/* ============================================================================
   cano.css — componentes a medida de Taller Cano y García
   Lenguaje: Industrial Garage / Neo-Brutalism. Consume tokens.css + base.css.
   Motivos firma: banda hazard roja-negra, tread de neumático, rayo, sombra dura.
   ========================================================================== */

/* ---- Tipografía display en CAPS (Anton) ---------------------------------- */
h1,h2,h3,.t-display{ text-transform:uppercase; letter-spacing:.005em; }
h2{ letter-spacing:.01em; line-height:1.08; }
.eyebrow{ font-family:var(--font-cond); font-weight:700; color:var(--accent); }
.eyebrow::before{ content:""; display:inline-block; width:26px; height:2px;
  background:var(--accent); vertical-align:middle; margin-right:.6rem; transform:translateY(-3px); }

/* word resaltada en titulares */
.hl{ color:var(--accent); }
.outline-word{ color:transparent; -webkit-text-stroke:2px var(--accent); }

/* ---- Banda HAZARD (rojo/negro diagonal) — separador firma ----------------- */
.hazard{ height:10px; width:100%;
  background:repeating-linear-gradient(135deg,
    var(--hazard-b) 0 22px, var(--hazard-a) 22px 44px); }
.hazard--thin{ height:6px; }

/* ---- Banda TREAD (huella de neumático) ----------------------------------- */
.tread{ height:18px; width:100%; background:
  repeating-linear-gradient(90deg,#000 0 14px, transparent 14px 26px),
  linear-gradient(#0a0a0b,#0a0a0b);
  border-block:2px solid #000; opacity:.9; }

/* ---- Barra superior util (tel / horario / rating) ------------------------ */
.utility{ background:#0c0c0d; color:var(--muted); font-family:var(--font-cond);
  font-size:.84rem; letter-spacing:.02em; border-bottom:1px solid var(--line); }
.utility__in{ display:flex; gap:var(--space-3); align-items:center; justify-content:space-between;
  padding:.5rem var(--gutter); flex-wrap:wrap; }
.utility a{ color:var(--steel); display:inline-flex; gap:.4rem; align-items:center; }
.utility a:hover{ color:#fff; }
.utility [data-icon]{ width:15px; height:15px; color:var(--accent); display:inline-block; }
.utility__sep{ opacity:.4; }
.utility{ position:fixed; top:0; left:0; right:0; z-index:calc(var(--z-nav) + 1); }
.rating-pill{ display:inline-flex; align-items:center; gap:.35rem; color:#f5d34a; }
.rating-pill [data-icon]{ width:14px; height:14px; color:#f5d34a; }
@media (max-width:680px){ .utility{ display:none; } }

/* ---- NAV: logo imagen + botón chunky ------------------------------------- */
.nav{ top:34px; }
@media (max-width:680px){ .nav{ top:0; } }
.nav__brand img{ height:46px; width:auto; }
.nav__links a:not(.btn){ font-family:var(--font-cond); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; font-size:.92rem; }
.nav__links a:not(.btn)::after{ content:""; display:block; height:2px; width:0;
  background:var(--accent); transition:width var(--dur-fast) var(--ease); margin-top:3px; }
.nav__links a:not(.btn):hover::after,.nav__links a.active::after{ width:100%; }

/* Botón estilo taller: rectangular, caps, sombra dura */
.btn{ border-radius:var(--radius-pill); text-transform:uppercase;
  font-family:var(--font-cond); font-weight:700; letter-spacing:.06em; }
/* En el nav, ".nav__links a" pinta el texto en gris (muted) y por especificidad
   ganaba al blanco del botón: forzamos blanco en el CTA del nav. */
.nav .btn--primary,.nav .btn--primary:hover{ color:var(--accent-ink); }
.btn--primary{ border:2px solid #000; box-shadow:3px 3px 0 #000; }
.btn--primary:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #000; }
.btn--ghost{ border:2px solid var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:#fff; background:color-mix(in srgb,var(--accent) 14%,transparent); }
.btn [data-icon]{ width:18px; height:18px; display:inline-block; }
.btn--lg{ padding:1.05rem 2rem; font-size:1.05rem; }

/* ---- HERO ----------------------------------------------------------------- */
.hero{ background:#0e0e10; padding-top:7.5rem; }
.hero__media{ left:auto; right:0; width:52%; }
.hero__media img{ filter:grayscale(.25) contrast(1.05) brightness(.78); }
.hero__media::after{ background:
  /* fundido izquierdo (texto encima) */
  linear-gradient(100deg,#0e0e10 24%, color-mix(in srgb,#0e0e10 34%,transparent) 60%, transparent 88%),
  /* fundido inferior: la foto se disuelve en el fondo, sin corte duro */
  linear-gradient(0deg, #0e0e10 0%, color-mix(in srgb,#0e0e10 55%,transparent) 13%, transparent 32%),
  /* fundido superior: entra suave bajo la barra/nav */
  linear-gradient(180deg, #0e0e10 0%, transparent 12%); }
.hero__media::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* glow rojo de marca anclado en la esquina inferior-derecha; se apaga antes
     de llegar al borde izquierdo, así no deja costura vertical contra el fondo */
  background:radial-gradient(90% 75% at 90% 108%, rgba(228,49,55,.20), transparent 60%); }
.hero__inner{ max-width:42rem; }
.hero h1{ font-size:var(--fs-900); line-height:var(--lh-tight); }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--space-2); }
.chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .9rem;
  border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:var(--radius);
  font-family:var(--font-cond); font-weight:600; font-size:.9rem; color:var(--text); }
.chip [data-icon]{ width:16px; height:16px; color:var(--accent); display:inline-block; }
.chip--star{ color:#f5d34a; } .chip--star [data-icon]{ color:#f5d34a; }
@media (max-width:860px){
  .hero__media{ width:100%; opacity:.5; }
  .hero__media::after{ background:linear-gradient(0deg,#0e0e10 18%, color-mix(in srgb,#0e0e10 55%,transparent)); }
}

/* ---- STATS band ----------------------------------------------------------- */
.stats{ background:var(--accent); color:#fff; border-block:2px solid #000; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats__item{ padding:var(--space-4) var(--space-3); text-align:center;
  border-left:1px solid rgba(0,0,0,.22); }
.stats__item:first-child{ border-left:0; }
.stats__num{ font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1; display:block; }
.stats__num span{ font-size:.55em; vertical-align:.25em; }
.stats__label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:.8rem; margin-top:.4rem; opacity:.9; }
@media (max-width:760px){ .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stats__item:nth-child(odd){ border-left:0; } .stats__item:nth-child(n+3){ border-top:1px solid rgba(0,0,0,.22); } }

/* ---- Encabezado de sección ----------------------------------------------- */
.sec-head{ max-width:46rem; }
.sec-head h2{ margin-top:.4rem; }

/* ---- SERVICIOS: tarjetas brutalistas -------------------------------------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:2px solid #000; background:#000; }
.svc{ background:var(--surface); padding:var(--space-4);
  border:1px solid var(--line); position:relative; transition:background var(--dur), transform var(--dur); }
.svc:hover{ background:var(--surface-2); }
.svc__ico{ width:54px; height:54px; display:grid; place-items:center; background:var(--accent);
  color:#fff; border:2px solid #000; margin-bottom:var(--space-2); }
.svc__ico [data-icon]{ width:30px; height:30px; display:block; }
.svc h3{ font-size:1.35rem; margin-bottom:.4rem; }
.svc p{ color:var(--muted); font-size:.96rem; }
.svc__no{ position:absolute; top:1rem; right:1.1rem; font-family:var(--font-display);
  font-size:1.1rem; color:var(--line); }
@media (max-width:860px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---- Galería especialidades (fotos reales) -------------------------------- */
.shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
.shot{ position:relative; overflow:hidden; border:2px solid #000; aspect-ratio:4/3; }
.shot img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.04);
  transition:transform .6s var(--ease); }
.shot:hover img{ transform:scale(1.06); }
.shot figcaption{ position:absolute; left:0; bottom:0; right:0; padding:.7rem .8rem;
  background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);
  font-family:var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.85rem; }
@media (max-width:860px){ .shots{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .shots{ grid-template-columns:1fr; } }

/* ---- "El taller" (about) -------------------------------------------------- */
.about{ display:grid; grid-template-columns:1fr 1.05fr; gap:var(--space-5); align-items:center; }
.about__media{ position:relative; }
.about__media img{ width:100%; border:2px solid #000; box-shadow:var(--shadow-hard-red); object-fit:cover;
  aspect-ratio:4/5; }
.about__tag{ position:absolute; left:-14px; bottom:24px; background:#000; color:#fff;
  font-family:var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:.6rem 1rem; border-left:4px solid var(--accent); font-size:.85rem; }
.values{ list-style:none; padding:0; display:grid; gap:.85rem; margin-top:var(--space-2); }
.values li{ display:flex; gap:.7rem; align-items:flex-start; }
.values [data-icon]{ width:22px; height:22px; color:var(--accent); flex:none; margin-top:2px; }
@media (max-width:860px){ .about{ grid-template-columns:1fr; } .about__media img{ aspect-ratio:16/10; } }

/* ---- PROCESO (pasos numerados) -------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); counter-reset:s; }
.step{ position:relative; padding-top:var(--space-3); border-top:3px solid var(--accent); }
.step__no{ font-family:var(--font-display); font-size:2.6rem; line-height:1; color:#fff; }
.step__no::before{ counter-increment:s; content:"0" counter(s); }
.step h3{ font-size:1.2rem; margin:.4rem 0; }
.step p{ color:var(--muted); font-size:.95rem; }
@media (max-width:860px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* ---- Marcas (marquee) ----------------------------------------------------- */
.brands{ background:#0c0c0d; border-block:2px solid #000; padding-block:var(--space-4); }
/* gap=0 + margen por ítem: cada copia mide exactamente lo mismo, así el
   translateX(-50%) cae justo en el borde y el bucle no da saltos.
   4 copias en el track => cada mitad (que es lo que recorre el -50%) son 2 sets,
   más anchos que cualquier pantalla, así nunca se ve el final del carrusel.
   Duración 56s para mantener la misma velocidad al recorrer doble distancia. */
.marquee__track{ gap:0; animation-duration:56s;
  will-change:transform; backface-visibility:hidden; }
.brand{ font-family:var(--font-display); text-transform:uppercase; font-size:1.6rem;
  color:#3a3a3e; letter-spacing:.02em; white-space:nowrap; display:flex; align-items:center;
  margin-right:var(--space-5); transition:color var(--dur-fast); }
.brand img{ height:34px; width:auto; display:block; opacity:.5;
  transition:opacity var(--dur-fast); }
.marquee:hover .brand{ color:#55555a; }
.marquee:hover .brand img{ opacity:.72; }
.brand:hover{ color:var(--steel); }
.brand:hover img{ opacity:1; }
.footer__legal{ color:var(--footer-text); opacity:.42; font-size:var(--fs-300);
  line-height:1.55; max-width:90ch; margin-top:var(--space-4); }

/* ---- RESEÑAS -------------------------------------------------------------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.review{ background:var(--surface); border:2px solid #000; padding:var(--space-3);
  box-shadow:var(--shadow-hard); display:flex; flex-direction:column; gap:.8rem; }
.review__stars{ display:flex; gap:.15rem; color:#f5d34a; }
.review__stars [data-icon]{ width:18px; height:18px; }
.review p{ font-size:1.02rem; }
.review__who{ display:flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:.6rem;
  border-top:1px solid var(--line); }
.review__ini{ width:40px; height:40px; flex:none; display:grid; place-items:center; background:var(--accent);
  color:#fff; font-family:var(--font-display); border:2px solid #000; }
.review__who b{ font-family:var(--font-cond); letter-spacing:.02em; }
.review__who span{ display:block; color:var(--muted); font-size:.85rem; }
@media (max-width:860px){ .reviews{ grid-template-columns:1fr; } }

.gbadge{ display:inline-flex; align-items:center; gap:.8rem; background:var(--surface);
  border:2px solid #000; box-shadow:var(--shadow-hard); padding:.8rem 1.3rem; }
.gbadge b{ font-family:var(--font-display); font-size:2rem; color:#fff; }
.gbadge .gstars{ color:#f5d34a; display:flex; gap:.1rem; } .gbadge .gstars [data-icon]{ width:16px;height:16px; }

/* ---- FAQ (accordion) ------------------------------------------------------ */
.faq{ max-width:48rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 0; display:flex; gap:1rem;
  align-items:center; justify-content:space-between; font-family:var(--font-cond);
  font-weight:700; font-size:1.12rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ico{ width:26px; height:26px; flex:none; display:grid; place-items:center;
  border:2px solid var(--accent); color:var(--accent); transition:transform var(--dur-fast); }
.faq summary .ico [data-icon]{ width:16px; height:16px; }
.faq details[open] summary .ico{ transform:rotate(45deg); background:var(--accent); color:#fff; }
.faq details p{ color:var(--muted); padding:0 0 1.1rem; max-width:62ch; }

/* ---- CONTACTO ------------------------------------------------------------- */
.contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-4); align-items:start; }
.info-card{ background:var(--surface); border:2px solid #000; box-shadow:var(--shadow-hard);
  padding:var(--space-4); display:grid; gap:var(--space-3); }
.info-row{ display:flex; gap:.9rem; align-items:flex-start; }
.info-row [data-icon]{ width:22px; height:22px; color:var(--accent); flex:none; margin-top:3px; }
.info-row b{ font-family:var(--font-cond); letter-spacing:.03em; display:block; }
.info-row a,.info-row span{ color:var(--muted); }
.info-row a:hover{ color:#fff; }
.hours{ width:100%; border-collapse:collapse; font-family:var(--font-cond); }
.hours td{ padding:.35rem 0; border-bottom:1px solid var(--line); }
.hours td:last-child{ text-align:right; color:var(--text); }
.hours tr.closed td:last-child{ color:var(--accent); }
.locard{ position:relative; border:2px solid #000; box-shadow:var(--shadow-hard); overflow:hidden;
  min-height:440px; display:flex; }
.locard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.45) contrast(1.05) brightness(.6); }
.locard__body{ position:relative; z-index:1; margin-top:auto; padding:var(--space-4);
  background:linear-gradient(0deg, #0c0c0db8 8%, transparent); width:100%; }
.locard__body h3{ font-size:2rem; margin:.3rem 0 .6rem; }
.locard__body p:not(.eyebrow){ color:var(--steel); max-width:34ch; margin-bottom:var(--space-3); }
.locard__body .btn [data-icon]{ width:18px; height:18px; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }

/* ---- Barra de acción móvil (NO es widget flotante de chat) ---------------- */
.mobile-cta{ display:none; }
@media (max-width:680px){
  .mobile-cta{ display:grid; grid-template-columns:1fr 1fr; position:fixed; inset:auto 0 0 0;
    z-index:var(--z-nav); border-top:2px solid #000; }
  .mobile-cta a{ padding:.95rem; text-align:center; font-family:var(--font-cond); font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; display:flex; gap:.5rem; align-items:center; justify-content:center; }
  .mobile-cta a [data-icon]{ width:18px; height:18px; }
  .mobile-cta .m-call{ background:var(--accent); color:#fff; }
  .mobile-cta .m-wa{ background:#111; color:#fff; }
  body{ padding-bottom:54px; }
}

/* ---- Footer extra --------------------------------------------------------- */
.footer__grid [data-icon]{ width:16px; height:16px; display:inline-block; vertical-align:-2px; margin-right:.35rem; color:var(--accent); }
.footer__brand-logo{ height:54px; width:auto; margin-bottom:.6rem; }

/* ---- Detalle: titular gigante de cierre ----------------------------------- */
.bigcta{ background:
  repeating-linear-gradient(135deg, rgba(228,49,55,.10) 0 18px, transparent 18px 36px), #0e0e10;
  border-block:2px solid #000; text-align:center; }
.bigcta h2{ font-size:clamp(2.4rem,7vw,5rem); }

@media (prefers-reduced-motion: reduce){
  .shot:hover img{ transform:none; }
}