/* ═══════════════════════════════════════════════════════════
   TALLER FEDERICO — Hoja de estilos
   Base clara + bloques sólidos en el azul del logo.
   El logo nunca queda sobre un fondo que no sea blanco o su propio azul.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Colores de marca (tomados del logo) ────────────────
     --brand  azul del círculo y del texto "TALLER FEDERICO"
     --red    rojo de la "T" y de las flechas »
     Cambiando estas dos líneas cambia el sitio entero.        */
  --brand:      #1560E0;
  --brand-2:    #2E7CFF;   /* azul claro: hover y degradés */
  --brand-dk:   #0C3F9E;   /* azul oscuro */
  --brand-deep: #072B6B;   /* azul más profundo: barra superior */
  --brand-rgb:  21,96,224;

  --red:        #EE2222;
  --red-2:      #FF4438;
  --red-dk:     #C41414;
  --red-rgb:    238,34,34;

  /* Alias: el resto de la hoja usa --accent, que apunta al azul */
  --accent:     var(--brand);
  --accent-2:   var(--brand-2);
  --accent-dk:  var(--brand-dk);
  --accent-rgb: var(--brand-rgb);

  /* ── Neutros claros ───────────────────────────────────── */
  --paper:   #FFFFFF;
  --paper-2: #EEF4FD;   /* celeste muy suave: secciones alternas */
  --paper-3: #E2ECFA;   /* celeste un punto más marcado */
  --line:    #D8E4F5;

  --wa: #25D366;

  --tx:      #0E1B2E;   /* texto sobre claro */
  --tx-soft: #54677F;

  /* Texto sobre los bloques azules */
  --on-blue:      rgba(255,255,255,.90);
  --on-blue-soft: rgba(255,255,255,.72);

  /* Tipografía */
  --f-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --wrap: 1200px;
  --pad: clamp(1.15rem, 4vw, 2rem);
  --r: 14px;
  --r-sm: 10px;

  --sh-sm: 0 2px 10px rgba(14,27,46,.05);
  --sh:    0 12px 32px rgba(14,27,46,.10);
  --sh-lg: 0 26px 64px rgba(7,43,107,.24);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100% }
body{
  font-family:var(--f-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  color:var(--tx);
  background:var(--paper);
  /* `clip` en vez de `hidden`: recorta el desborde igual, pero NO crea un contenedor
     de scroll, que es lo que en los navegadores móviles rompe `position:fixed` y manda
     los botones flotantes fuera de la pantalla. `hidden` queda de respaldo para
     navegadores viejos que no entienden `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
[hidden]{ display:none !important }

h1,h2,h3,h4{
  font-family:var(--f-head);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.9rem, 1.6rem + 5.4vw, 5.4rem) }
h2{ font-size:clamp(2.2rem, 1.4rem + 3.2vw, 3.7rem) }
h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing:.005em }
h4{ font-size:1.05rem; letter-spacing:.06em }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--brand); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0 }

:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:4px }

/* Los símbolos del sprite traen su propio fill/stroke; acá sólo el tamaño. */
.ic{ width:1.05em; height:1.05em; flex:0 0 auto }

/* ═══════════ BOTONES ═══════════ */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--f-head); font-weight:700; font-size:1.06rem;
  letter-spacing:.045em; text-transform:uppercase;
  padding:.82rem 1.5rem; border-radius:var(--r-sm);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--lg{ padding:1.02rem 1.9rem; font-size:1.16rem }
.btn--block{ width:100% }

/* En pantallas angostas los botones largos no entran en una línea: pasan a ocupar
   todo el ancho, que además es más fácil de tocar con el dedo. */
@media (max-width:430px){
  .btn--lg{ padding:.95rem 1.15rem; font-size:1.08rem }
  .hero__actions,.cta__actions,.reviews__actions,.alert{ align-items:stretch }
  .hero__actions,.cta__actions,.reviews__actions{ flex-direction:column }
  .hero__actions .btn,
  .cta__actions .btn,
  .reviews__actions .btn,
  .alert .btn{ width:100%; white-space:normal }
}

/* Azul — acción principal sobre fondo claro */
.btn--primary{ box-shadow:0 8px 24px rgba(var(--brand-rgb),.30) }
.btn--primary:hover{ background:var(--brand-2); box-shadow:0 12px 30px rgba(var(--brand-rgb),.40) }

/* Rojo — urgencia (el acento del logo) */
.btn--red{ --btn-bg:var(--red); box-shadow:0 8px 24px rgba(var(--red-rgb),.30) }
.btn--red:hover{ background:var(--red-2); box-shadow:0 12px 30px rgba(var(--red-rgb),.40) }

/* Verde — exclusivo de WhatsApp */
.btn--wa{ --btn-bg:var(--wa); box-shadow:0 8px 24px rgba(37,211,102,.34) }
.btn--wa:hover{ background:#1fbb59; box-shadow:0 12px 30px rgba(37,211,102,.44) }

/* Contorno sobre fondo claro */
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--brand); box-shadow:inset 0 0 0 2px rgba(var(--brand-rgb),.35) }
.btn--ghost:hover{ background:var(--brand); color:#fff; box-shadow:inset 0 0 0 2px var(--brand) }

/* Blanco — para usar arriba de los bloques de color */
.btn--light{ --btn-bg:#fff; --btn-fg:var(--red); box-shadow:0 10px 26px rgba(0,0,0,.16) }
.btn--light:hover{ background:#fff; color:var(--red-dk); box-shadow:0 14px 34px rgba(0,0,0,.22) }

/* Contorno blanco — para usar arriba de los bloques de color */
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55) }
.btn--outline-light:hover{ background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 2px #fff }

/* ═══════════ BARRA SUPERIOR ═══════════ */
.topbar{
  background:var(--brand-deep); color:var(--on-blue-soft);
  font-size:.86rem; letter-spacing:.01em;
}
.topbar__inner{ display:flex; align-items:center; gap:1.1rem; height:42px; overflow:hidden }
.topbar__item{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap }
.topbar__item .ic{ color:#7FB2FF }
.topbar__sep{ width:1px; height:15px; background:rgba(255,255,255,.2) }
.topbar__phone{ margin-left:auto; color:#fff; font-weight:600; transition:color .2s }
.topbar__phone:hover{ color:#9EC6FF }
@media (max-width:860px){
  .topbar__inner > .topbar__item:nth-child(3), .topbar__sep{ display:none }
}
@media (max-width:520px){
  .topbar__inner > .topbar__item:first-child{ display:none }
  .topbar__phone{ margin-inline:auto }
}

/* ═══════════ HEADER ═══════════ */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.header.is-stuck{ box-shadow:0 6px 26px rgba(7,43,107,.12) }
.header__inner{ display:flex; align-items:center; gap:1.5rem; height:74px }

/* El logo es el archivo original del cliente, en PNG con fondo transparente.
   Se dimensiona por ancho y la altura sale sola de la proporción del archivo:
   así el lockup entero (círculo TF + texto + flechas) escala de una pieza. */
.logo{ display:flex; align-items:center; flex:0 0 auto }
.logo__img{
  width:clamp(142px, 16vw, 172px); height:auto;
  transition:transform .4s var(--ease);
}
.logo:hover .logo__img{ transform:scale(1.04) }

.nav{ display:flex; align-items:center; gap:.25rem; margin-left:auto }
.nav > a:not(.btn){
  font-family:var(--f-head); font-size:1.05rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  padding:.55rem .72rem; border-radius:8px; position:relative;
  transition:color .2s;
}
.nav > a:not(.btn)::after{
  content:''; position:absolute; left:.72rem; right:.72rem; bottom:.3rem; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav > a:not(.btn):hover{ color:var(--brand) }
.nav > a:not(.btn):hover::after,
.nav > a.is-active::after{ transform:scaleX(1) }
.nav > a.is-active{ color:var(--brand) }
.nav__cta{ margin-left:.7rem; font-size:.98rem; padding:.68rem 1.1rem }

.burger{ display:none; width:44px; height:44px; position:relative; margin-left:auto }
.burger span{
  position:absolute; left:11px; width:22px; height:2.5px; border-radius:2px;
  background:var(--brand); transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:15px }
.burger span:nth-child(2){ top:21px }
.burger span:nth-child(3){ top:27px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* El menú pasa a hamburguesa antes que el ancho máximo del contenido: con 6 ítems
   más el botón de WhatsApp, por debajo de este ancho queda al límite. */
@media (max-width:1120px){
  .burger{ display:block }
  /* El panel cuelga del header, no de una medida fija: la barra superior se va
     con el scroll y si lo anclábamos a 116px quedaba un hueco al abrirlo. */
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--paper); padding:1.2rem var(--pad) 2.4rem;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px rgba(7,43,107,.16);
    max-height:calc(100dvh - 74px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto }
  .nav > a:not(.btn){ padding:.9rem .5rem; font-size:1.28rem; border-bottom:1px solid var(--line) }
  .nav > a:not(.btn)::after{ display:none }
  .nav__cta{ margin:1rem 0 0; padding:1rem }
}

/* ═══════════ HERO (foto del frente + velo azul del logo) ═══════════ */
.hero{ position:relative; background:var(--brand-dk); color:#fff; overflow:hidden; isolation:isolate }
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  /* El velo es más denso a la izquierda, que es donde va el texto, y se abre
     hacia la derecha para que se lea el cartel del taller. */
  background-image:
    linear-gradient(101deg,
      rgba(7,43,107,.95)  0%,
      rgba(10,55,140,.90) 34%,
      rgba(21,96,224,.66) 64%,
      rgba(21,96,224,.42) 100%),
    url("img/taller-hero.jpg?v=2");
  background-size:cover;
  background-position:center 46%;
  background-repeat:no-repeat;
}
.hero__inner{
  display:block;
  padding-block:clamp(4rem, 9vw, 8rem) clamp(2.5rem, 4vw, 3.5rem);
}
.hero__content{ max-width:44ch }

/* En pantallas angostas el texto ocupa todo el ancho: el velo pasa a ser vertical */
@media (max-width:900px){
  .hero__bg{
    background-image:
      linear-gradient(178deg,
        rgba(7,43,107,.94)  0%,
        rgba(10,55,140,.90) 55%,
        rgba(21,96,224,.72) 100%),
      url("img/taller-hero.jpg?v=2");
    background-position:center 40%;
  }
  .hero__content{ max-width:none }
}
.hero .eyebrow{ color:#fff }
.hero .eyebrow .dot{ background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.28) }
@keyframes pulseLight{ 50%{ box-shadow:0 0 0 8px rgba(255,255,255,0) } }
.hero .eyebrow .dot{ animation-name:pulseLight }

/* Resaltado tipo bloque rojo inclinado, igual que las flechas » del logo */
.hl{
  display:inline-block; background:var(--red); color:#fff;
  padding:.03em .24em .07em; border-radius:5px;
  transform:skewX(-9deg);
  box-shadow:0 12px 32px rgba(var(--red-rgb),.38);
}
.hl > span{ display:inline-block; transform:skewX(9deg) }

.hero__lead{ margin-top:1.5rem; font-size:1.14rem; color:var(--on-blue); max-width:52ch }
.hero__lead strong{ color:#fff; font-weight:600 }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem }
.hero .btn--ghost{ --btn-fg:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5) }
.hero .btn--ghost:hover{ background:#fff; color:var(--brand); box-shadow:inset 0 0 0 2px #fff }

.hero__badges{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:2rem; font-size:.94rem; color:var(--on-blue) }
.hero__badges li{ display:flex; align-items:center; gap:.45rem }
.hero__badges .ic{ color:#fff; width:1rem; height:1rem }
/* La calificación de Google va destacada del resto de los sellos */
.hero__badges .is-rating{ color:#fff }
.hero__badges .is-rating .ic{ color:#FFC93C; width:1.1rem; height:1.1rem }
.hero__badges .is-rating strong{ font-family:var(--f-head); font-size:1.28rem; line-height:1; font-weight:700 }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-head); font-size:.92rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand);
  margin-bottom:1.1rem;
}
/* El punto va en rojo: mismo contraste azul/rojo que el logo */
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 4px rgba(var(--red-rgb),.22);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(var(--red-rgb),0) } }

/* ═══════════ FOTO DE LA SECCIÓN NOSOTROS ═══════════ */
img.ph--about{
  width:100%; height:auto; display:block;
  border-radius:var(--r); box-shadow:var(--sh);
}

/* ═══════════ CONTADORES ═══════════ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r); overflow:hidden; margin-bottom:clamp(2.5rem,5vw,4rem);
  backdrop-filter:blur(6px);
}
.stat{ padding:1.6rem 1.2rem; text-align:center; border-right:1px solid rgba(255,255,255,.2) }
.stat:last-child{ border-right:0 }
.stat b{
  display:block; font-family:var(--f-head); font-weight:700;
  font-size:clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height:1; color:#fff;
  font-variant-numeric:tabular-nums;
}
.stat span{ display:block; margin-top:.4rem; font-size:.85rem; color:var(--on-blue); letter-spacing:.02em }
@media (max-width:720px){
  .stats{ grid-template-columns:repeat(2,1fr) }
  .stat:nth-child(2){ border-right:0 }
  .stat:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.2) }
}

/* ═══════════ MARCAS ═══════════
   La barra vive dentro de la sección Repuestos, no suelta arriba de la página:
   respalda lo que se vende. Por eso va como tarjeta blanca y no como franja. */
.brands{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.9rem clamp(1.2rem,3vw,2rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.brands__label{ text-align:center; font-size:.86rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-soft); margin-bottom:1.2rem }
.brands__row{
  --logo-h:clamp(24px, 3.4vw, 34px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(1.6rem,5vw,3.4rem); min-height:calc(var(--logo-h) * 1.4);
}
.brand{ display:inline-flex; align-items:center; justify-content:center }

/* Los logos van apagados en gris y toman color al pasar el mouse: la barra
   respalda, no compite con el azul y el rojo del logo del taller. */
.brand img{
  height:var(--logo-h); width:auto; object-fit:contain;
  filter:grayscale(1) opacity(.55);
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
.brand:hover img{ filter:grayscale(0) opacity(1); transform:translateY(-2px) }

/* Ajuste óptico: a igual altura, una marca cuadrada "pesa" más que un logotipo
   apaisado, y un logo apilado deja el texto ilegible. Cada uno se escala aparte. */
.brand--zf img{ height:calc(var(--logo-h) * .82) }
/* APC lleva el eslogan apilado debajo de la marca: las letras "APC" ocupan sólo
   la mitad del alto del archivo, así que a igual altura se vería chico. */
.brand--apc img{ height:calc(var(--logo-h) * 1.30) }

/* Respaldo en texto para las marcas que todavía no tienen archivo de logo */
.brand__txt{
  display:none;
  font-family:var(--f-head); font-size:clamp(1.35rem,3vw,1.9rem); font-weight:700;
  letter-spacing:.1em; color:#9BADC6;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.brand.is-textonly img{ display:none }
.brand.is-textonly .brand__txt{ display:inline-block }
.brand.is-textonly:hover .brand__txt{ color:var(--brand); transform:translateY(-2px) }

/* ═══════════ SECCIONES ═══════════ */
.section{ padding-block:clamp(3.8rem, 8vw, 7rem) }
.section--alt{ background:var(--paper-2) }

/* Franja sólida en el azul del logo, para cortar la alternancia blanco/celeste.
   La caja de Diagnóstico (.diagbox) reusa estas mismas reglas: por eso los
   selectores de acá abajo no cuelgan de .section. */
.section--brand{ background:var(--brand); color:#fff }
.section--brand .eyebrow{ color:#fff }
.section--brand .eyebrow .dot{
  background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.28); animation-name:pulseLight;
}
/* Van con .about__body para ganarle en especificidad a `.about__body p`, que
   pinta el texto en gris y está más abajo en esta hoja. */
.section--brand p,
.section--brand .about__body p{ color:var(--on-blue) }
.section--brand p strong,
.section--brand .about__body p strong{ color:#fff }
.section--brand .ticks li{ color:var(--on-blue) }
.section--brand .ticks strong{ color:#fff }
.section--brand .ticks .ic{ color:#fff }
.section--brand img{ box-shadow:var(--sh-lg) }

.section__head{ max-width:60ch; margin:0 auto clamp(2.4rem,5vw,3.6rem); text-align:center }
.section__head--left{ margin-inline:0; text-align:left }
.section__lead{ margin-top:1.1rem; color:var(--tx-soft); font-size:1.06rem }

/* Los hijos de una grilla arrancan con `min-width:auto`, o sea que se niegan a
   achicarse por debajo de su contenido más ancho (un input, un select, una palabra
   larga). En pantallas chicas eso desborda la página a lo ancho. `min-width:0` los
   deja encogerse hasta el ancho real disponible. */
.grid > *,
.steps > *,
.about > *,
.contact > *,
.faq > *,
.footer__grid > *{ min-width:0 }

.grid{ display:grid; gap:1.3rem }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:980px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .grid--3,.grid--4{ grid-template-columns:1fr } }

/* ═══════════ SOLAPAS DE SERVICIOS ═══════════
   Diagnóstico, ¿Fallas? y Proceso son pestañas de #servicios. Repuestos NO:
   es otra línea de negocio y va como sección aparte, debajo.
   Los títulos de tarjeta, síntoma y paso bajaron de h3 a h4 dentro de las
   solapas, porque ahí cuelgan del h3 de cada panel; el tamaño no cambió.
   Fuera de las solapas (Repuestos) siguen siendo h3. */
.card h4,.symptom h4,.step h4{
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing:.005em;
}

.tabs{ margin-top:clamp(1.6rem,4vw,2.4rem) }

/* En pantallas angostas la barra scrollea en horizontal en vez de apilarse:
   apiladas, cinco pestañas empujan el contenido media pantalla para abajo. */
.tabs__bar{
  display:flex; gap:.5rem; padding-bottom:.9rem;
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
}
.tabs__bar::-webkit-scrollbar{ display:none }

.tab{
  display:inline-flex; align-items:center; gap:.55rem; flex:0 0 auto;
  scroll-snap-align:start;
  padding:.8rem 1.4rem; border-radius:999px;
  background:var(--paper); color:var(--tx-soft);
  box-shadow:inset 0 0 0 1.5px var(--line);
  font-family:var(--f-head); font-size:1.08rem; font-weight:600;
  letter-spacing:.045em; text-transform:uppercase; white-space:nowrap;
  transition:color .2s var(--ease), background-color .2s var(--ease),
             box-shadow .2s var(--ease);
}
.tab .ic{ width:1.15em; height:1.15em }
.tab:hover{ color:var(--brand); box-shadow:inset 0 0 0 1.5px rgba(var(--brand-rgb),.55) }
.tab.is-active{ background:var(--brand); color:#fff; box-shadow:0 8px 22px rgba(var(--brand-rgb),.30) }

@media (max-width:560px){
  .tab{ padding:.7rem 1.05rem; font-size:1rem }
  .tab .ic{ display:none }
}

.tabs__panels{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.4rem,3.5vw,2.6rem);
}
.panel{ animation:panelIn .35s var(--ease) }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px) } }

.panel__head{ max-width:62ch; margin-bottom:clamp(1.6rem,3.5vw,2.4rem) }
.panel__head h3,.diagbox h3{ font-size:clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem) }
.panel__lead{ margin-top:1rem; color:var(--tx-soft); font-size:1.04rem }
.panel__lead strong{ color:var(--tx) }

/* Bloque azul del Diagnóstico. Comparte los colores de .section--brand, pero
   contenido en una caja: dentro de una pestaña el azul no puede ir a todo ancho. */
.diagbox{ border-radius:var(--r); padding:clamp(1.6rem,4vw,3rem) }

/* ── Tarjetas de servicio ── */
.card{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:2rem 1.75rem 1.9rem; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:transparent }
.card:hover::before{ transform:scaleX(1) }
.card__ic{
  display:grid; place-items:center; width:56px; height:56px; margin-bottom:1.2rem;
  background:linear-gradient(150deg, rgba(var(--brand-rgb),.16), rgba(var(--brand-rgb),.06));
  color:var(--brand); border-radius:14px;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.card__ic svg{ width:27px; height:27px }
.card:hover .card__ic{ background:var(--brand); color:#fff }
/* h4 dentro de las solapas, h3 en la sección Repuestos: mismo tamaño, distinto
   nivel de título según de qué encabezado cuelgan. */
.card h3,.card h4{ margin-bottom:.6rem }
.card p{ color:var(--tx-soft); font-size:.98rem }

/* Tarjeta que lleva a otra pestaña. El link va en el título, pero el ::after
   estirado hace clickeable la tarjeta entera: no hay que apuntarle a dos
   palabras. Funciona porque .card ya es position:relative. */
.card--link h4 a::after{ content:''; position:absolute; inset:0 }
.card .card__more{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem;
  font-family:var(--f-head); font-size:.98rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--brand);
  transition:color .25s var(--ease);
}
.card--link:hover .card__more{ color:var(--red) }
.card .card__more .ic{ transition:transform .25s var(--ease) }
.card--link:hover .card__more .ic{ transform:translateX(4px) }

/* ── Síntomas ── */
.symptom{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:1.8rem 1.5rem; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.symptom:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:rgba(var(--red-rgb),.4) }
.symptom__n{
  display:block; font-family:var(--f-head); font-size:2.5rem; font-weight:700;
  line-height:1; color:var(--red); opacity:.55; margin-bottom:.7rem;
  transition:opacity .3s var(--ease);
}
.symptom:hover .symptom__n{ opacity:1 }
.symptom h4{ margin-bottom:.55rem }
.symptom p{ color:var(--tx-soft); font-size:.95rem }

.alert{
  display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem;
  margin-top:2rem; padding:1.5rem 1.7rem; border-radius:var(--r);
  background:linear-gradient(120deg, rgba(var(--red-rgb),.10), rgba(var(--red-rgb),.03));
  border:1px solid rgba(var(--red-rgb),.28);
}
.alert > .ic{ width:34px; height:34px; color:var(--red) }
.alert p{ flex:1 1 320px; font-size:.98rem; color:var(--tx-soft) }
.alert p strong{ color:var(--red-dk) }

/* ── Pasos ── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr } }
.step{ position:relative; padding-top:1.6rem; border-top:3px solid var(--line); transition:border-color .3s var(--ease) }
.step:hover{ border-top-color:var(--brand) }
.step__n{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:1rem;
  font-family:var(--f-head); font-size:1.4rem; font-weight:700;
  background:var(--brand); color:#fff; border-radius:12px;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.step:hover .step__n{ background:var(--red); transform:translateY(-3px) }
.step h4{ margin-bottom:.5rem }
.step p{ color:var(--tx-soft); font-size:.97rem }

/* ── Casa de repuestos (sección #repuestos) ── */
.parts{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(1.4rem,3.5vw,2.6rem); align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
.parts > *{ min-width:0 }
@media (max-width:900px){ .parts{ grid-template-columns:1fr } }

.parts__list,.parts__card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.1rem);
}
.parts__list h3,.parts__card h3{ font-size:1.28rem; letter-spacing:.02em; margin-bottom:.9rem }
.parts__intro{ color:var(--tx-soft); font-size:.99rem }
.parts__intro strong{ color:var(--tx) }
.parts__list .ticks{ margin:1.3rem 0 0 }

.parts__card{ display:grid; gap:.7rem; align-content:start }
.parts__card .btn{ margin-top:.3rem }

/* ── Nosotros ── */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center }
/* Variante con el texto a la izquierda y la foto a la derecha */
.about--flip{ grid-template-columns:1.1fr .9fr }
@media (max-width:900px){
  .about{ grid-template-columns:1fr }
  /* En una columna la foto va primero, que es lo que engancha */
  .about--flip .about__media{ order:-1 }
}
.about__media{ position:relative }
.about__stamp{
  position:absolute; right:-18px; top:-18px;
  display:grid; place-items:center; width:104px; height:104px; border-radius:50%;
  background:var(--red); color:#fff; box-shadow:0 14px 34px rgba(var(--red-rgb),.32);
  font-family:var(--f-head); text-transform:uppercase; line-height:1;
}
.about__stamp span{ font-size:.72rem; letter-spacing:.16em; opacity:.9 }
.about__stamp strong{ font-size:1.85rem; font-weight:700; margin-top:.2rem }
/* En celular el sello no puede sobresalir del margen o lo corta el borde */
@media (max-width:560px){
  .about__stamp{ width:84px; height:84px; right:-4px; top:-12px }
  .about__stamp strong{ font-size:1.5rem }
}
.about__body p{ color:var(--tx-soft); margin-top:1.1rem }
.about__body p strong{ color:var(--tx) }
.ticks{ margin:1.8rem 0 2rem; display:grid; gap:.85rem }
.ticks li{ display:flex; align-items:flex-start; gap:.7rem; color:var(--tx-soft) }
.ticks .ic{ color:var(--brand); margin-top:.35rem; width:1.05rem; height:1.05rem }
.ticks strong{ color:var(--tx) }

/* ── Opiniones: citas textuales de Google ── */
.quote{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem; display:flex; flex-direction:column; gap:1rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote:hover{ transform:translateY(-5px); box-shadow:var(--sh) }
.quote__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.quote__stars{ color:#FFB300; letter-spacing:.14em; font-size:1.1rem; line-height:1 }
.quote__g{ width:20px; height:20px; flex:0 0 auto; opacity:.9 }
.quote blockquote{ font-size:1.01rem; color:var(--tx); flex:1 }
.quote blockquote::before{ content:'“' }
.quote blockquote::after{ content:'”' }
.quote figcaption{
  display:flex; align-items:center; gap:.8rem;
  padding-top:1rem; border-top:1px solid var(--line);
}
.quote__av{
  display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto;
  background:var(--brand); color:#fff; border-radius:50%;
  font-family:var(--f-head); font-size:1.35rem; font-weight:700; line-height:1;
}
.quote__who{ display:flex; flex-direction:column; min-width:0 }
.quote__who strong{ font-family:var(--f-head); font-size:1.14rem; text-transform:uppercase; letter-spacing:.02em; line-height:1.15 }
.quote__who > span{ font-size:.82rem; color:var(--tx-soft) }

/* ── Bloque de cierre: calificación y links al perfil de Google ── */
.reviews{
  max-width:740px; margin:clamp(1.6rem,3vw,2.4rem) auto 0; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(2rem,5vw,3.4rem) clamp(1.4rem,4vw,3rem);
  box-shadow:var(--sh-sm);
}
.reviews__g{ display:block; width:34px; height:34px; margin:0 auto 1.1rem }

/* La calificación arranca oculta y sólo aparece si se carga data-rating */
.reviews__score{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-bottom:1.5rem }
.reviews__score b{ font-family:var(--f-head); font-size:2.7rem; line-height:1; color:var(--tx) }
.reviews__score small{ font-size:.9rem; color:var(--tx-soft) }

/* Estrellas con relleno parcial: el ancho lo fija --fill desde el JS */
.reviews__stars{ position:relative; display:inline-block; font-size:1.55rem; letter-spacing:.14em; color:#D5E0EE }
.reviews__stars::before{ content:'★★★★★' }
.reviews__stars::after{
  content:'★★★★★'; position:absolute; inset:0; overflow:hidden;
  width:var(--fill,0%); color:#FFB300; white-space:nowrap;
}

.reviews__lead{ color:var(--tx-soft); font-size:1.02rem; max-width:52ch; margin-inline:auto }
.reviews__actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:1.7rem }
@media (max-width:520px){ .reviews__actions .btn{ width:100% } }

/* ── FAQ ── */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start }
@media (max-width:900px){ .faq{ grid-template-columns:1fr } }
.faq .section__head{ margin-bottom:0; position:sticky; top:110px }
@media (max-width:900px){ .faq .section__head{ position:static; margin-bottom:2rem } }
.faq .section__head .btn{ margin-top:1.5rem }

.acc{ display:grid; gap:.7rem }
.acc__item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.acc__item[open]{ border-color:rgba(var(--brand-rgb),.5); box-shadow:var(--sh-sm) }
.acc__item summary{
  display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none;
  padding:1.1rem 1.3rem;
  font-family:var(--f-head); font-size:1.2rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.2;
  transition:color .2s;
}
.acc__item summary::-webkit-details-marker{ display:none }
.acc__item summary::after{
  content:''; margin-left:auto; flex:0 0 auto; width:13px; height:13px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .3s var(--ease);
}
.acc__item[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.acc__item summary:hover{ color:var(--brand) }
.acc__body{ padding:0 1.3rem 1.25rem; color:var(--tx-soft) }
.acc__body strong{ color:var(--tx) }
.acc__item[open] .acc__body{ animation:slideDown .3s var(--ease) }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-6px) } }

/* ── Franja de llamada a la acción (roja) ── */
.cta{ background:linear-gradient(115deg, var(--red-dk) 0%, var(--red) 50%, var(--red-2) 100%); color:#fff }
.cta__inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:2rem; padding-block:clamp(2.8rem,5vw,4rem);
}
.cta h2{ max-width:16ch }
.cta p{ margin-top:.9rem; max-width:52ch; color:rgba(255,255,255,.92) }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.85rem }

/* ── Contacto ── */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3rem); align-items:start }
@media (max-width:900px){ .contact{ grid-template-columns:1fr } }

.contact__info{ display:grid; gap:.9rem; align-content:start }
.cinfo{
  display:flex; align-items:flex-start; gap:1rem; min-width:0;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:1.15rem 1.25rem;
  transition:transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
a.cinfo:hover{ transform:translateX(4px); border-color:rgba(var(--brand-rgb),.5); background:#fff }
.cinfo__ic{
  display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto;
  background:var(--brand); color:#fff; border-radius:11px;
}
.cinfo__ic svg{ width:21px; height:21px }
.cinfo > span:last-child{ font-size:.97rem; color:var(--tx-soft); line-height:1.5; min-width:0; overflow-wrap:anywhere }
.cinfo strong{
  display:block; font-family:var(--f-head); font-size:.85rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx); margin-bottom:.25rem;
}

.social{ display:flex; gap:.6rem; margin-top:.4rem }
.social a{
  display:grid; place-items:center; width:46px; height:46px; border-radius:12px;
  background:var(--brand); color:#fff;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.social a svg{ width:21px; height:21px }
.social a:hover{ background:var(--red); transform:translateY(-3px) }

/* ── Formulario ── */
.form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--sh-sm) }
.form h3{ margin-bottom:.35rem }
.form__hint{ color:var(--tx-soft); font-size:.94rem; margin-bottom:1.4rem }
.field{ display:grid; gap:.4rem; margin-bottom:1rem; min-width:0 }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field-row > *{ min-width:0 }
/* Los campos traen un ancho intrínseco propio (el atributo `size`); sin esto
   empujan el ancho de toda la sección en pantallas chicas. */
.field input,.field select,.field textarea{ min-width:0 }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr } }
.field label{ font-size:.86rem; font-weight:600; letter-spacing:.03em; color:var(--tx) }
.field input,.field select,.field textarea{
  width:100%; padding:.78rem .95rem; background:var(--paper-2);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:110px }
.field input::placeholder,.field textarea::placeholder{ color:#93A5BD }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; background:#fff; border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.16);
}
.field.is-error input,.field.is-error select,.field.is-error textarea{ border-color:var(--red); background:#FFF5F5 }
.err{ font-size:.8rem; color:var(--red-dk); min-height:1em }
.form__note{ margin-top:.9rem; font-size:.82rem; color:var(--tx-soft); text-align:center }

/* ── Formulario de turnos ── */
.form--turno{ max-width:760px; margin-inline:auto }
.form--turno .cf-turnstile{ display:flex; justify-content:center; margin:1.3rem 0 .5rem }
.form--turno select:disabled{ color:var(--tx-soft); cursor:not-allowed }

/* Error general del formulario. Sin texto no ocupa lugar, así que el botón no
   queda flotando con un hueco debajo mientras no pasa nada. */
.form__err{ text-align:center; margin-top:.85rem; font-size:.95rem; line-height:1.5 }
.form__err:empty{ display:none; min-height:0 }
.form__err a{ color:var(--brand); font-weight:600; text-decoration:underline }
.form__err a:hover{ color:var(--red) }

.btn.is-loading{ opacity:.6; pointer-events:none }

/* ── Turno reservado ── */
.turno-ok{
  max-width:600px; margin-inline:auto; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(2rem,5vw,3.2rem) clamp(1.4rem,4vw,2.6rem); box-shadow:var(--sh-sm);
}
.turno-ok__ic{
  display:grid; place-items:center; width:74px; height:74px; margin:0 auto 1.3rem;
  background:var(--wa); color:#fff; border-radius:22px;
  box-shadow:0 12px 30px rgba(37,211,102,.35);
}
.turno-ok__ic svg{ width:36px; height:36px }
.turno-ok h3{ margin-bottom:.75rem }
.turno-ok__cuando{ font-size:1.14rem; font-weight:600; color:var(--tx) }
.turno-ok__nota{ margin:.9rem 0 1.7rem; color:var(--tx-soft); font-size:.97rem }

/* Los dos locales, lado a lado. En pantallas angostas se apilan: dos mapas en
   media pantalla cada uno no se leen. */
.maps{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin-top:2rem }
.maps > *{ min-width:0 }
@media (max-width:820px){ .maps{ grid-template-columns:1fr } }

.map{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm);
}
/* Cartel del mapa: mismo lenguaje que las tarjetas de Contacto (.cinfo) —
   ícono en cuadradito de color, rótulo chico arriba y dirección abajo. */
.map__cap{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.95rem 1.15rem; background:var(--paper-2); border-bottom:1px solid var(--line);
}
.map__ic{
  display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto;
  background:var(--brand); color:#fff; border-radius:11px;
}
.map__ic svg{ width:20px; height:20px }
/* El local de repuestos se marca en rojo, igual que en el resto del sitio */
.map__ic--red{ background:var(--red) }

.map__txt{
  display:flex; flex-direction:column; min-width:0;
  font-size:1.02rem; line-height:1.25; color:var(--tx);
}
.map__txt strong{
  font-family:var(--f-head); font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx-soft);
  margin-bottom:.2rem;
}

.map__go{
  margin-left:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .95rem; border-radius:999px;
  font-family:var(--f-head); font-size:.92rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--brand);
  box-shadow:inset 0 0 0 1.5px rgba(var(--brand-rgb),.35);
  transition:background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.map__go .ic{ width:1rem; height:1rem; transition:transform .25s var(--ease) }
.map__go:hover{ background:var(--brand); color:#fff; box-shadow:inset 0 0 0 1.5px var(--brand) }
.map__go:hover .ic{ transform:translateX(3px) }

/* Con los dos mapas lado a lado el cartel queda angosto: el botón baja a una
   segunda línea antes que atropellar la dirección. */
@media (max-width:1080px) and (min-width:821px){
  .map__go{ margin-left:0; width:100%; justify-content:center }
}
.map iframe{ display:block; width:100%; height:clamp(240px, 34vw, 340px); border:0 }

/* ═══════════ FOOTER (bloque sólido azul del logo) ═══════════ */
.footer{ background:var(--brand); color:var(--on-blue); padding-top:clamp(3rem,6vw,4.5rem) }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:2.5rem 2rem }
@media (max-width:980px){ .footer__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr } }
.footer__col h4{ color:#fff; margin-bottom:1.1rem; letter-spacing:.14em }
.footer__col ul{ display:grid; gap:.6rem; font-size:.95rem }
.footer__col a{ transition:color .2s }
.footer__col a:hover{ color:#fff }
.footer__col--brand p{ margin:1.1rem 0 1.3rem; font-size:.95rem; max-width:38ch }
/* En el footer va la versión clara del logo (img/logo-blanco.png): el original
   es azul y sobre este fondo no se leería. */
.logo--footer .logo__img{ width:clamp(158px, 22vw, 186px) }
/* El email es una palabra larga sin espacios: sin esto desborda a lo ancho en
   pantallas angostas, que es lo que rompía el posicionamiento de los flotantes. */
.footer__contact li{ display:flex; align-items:flex-start; gap:.6rem; min-width:0; overflow-wrap:anywhere }
.footer__contact a{ overflow-wrap:anywhere }
.footer__contact .ic{ color:#9EC6FF; margin-top:.35rem }
/* La columna lista dos bocas (taller y repuestos): el rótulo va en blanco para
   que se vea de un saque a cuál corresponde cada dato. */
.footer__contact strong{ color:#fff; font-weight:600 }
.social--footer{ margin-top:0 }
.social--footer a{ background:rgba(255,255,255,.16) }
.social--footer a:hover{ background:#fff; color:var(--brand) }

.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.22); font-size:.87rem;
}

/* ═══════════ FLOTANTES ═══════════ */
.fab{
  position:fixed; z-index:90; display:inline-flex; align-items:center; gap:.6rem;
  border-radius:999px; box-shadow:0 10px 30px rgba(7,43,107,.30);
  transition:transform .25s var(--ease), opacity .25s var(--ease), background-color .25s var(--ease);
}
.fab svg{ width:26px; height:26px; flex:0 0 auto }
/* Los márgenes suman el área segura del teléfono, para no quedar debajo de la
   barra de gestos ni del borde curvo de la pantalla. */
.fab--wa{
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  background:var(--wa); color:#fff; padding:.85rem 1.25rem;
  font-family:var(--f-head); font-size:1.05rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.fab--wa::after{
  content:''; position:absolute; inset:0; border-radius:999px; z-index:-1;
  background:var(--wa); animation:ring 2.6s ease-out infinite;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.55 } 70%,100%{ transform:scale(1.35); opacity:0 } }
.fab--wa:hover{ transform:translateY(-3px); background:#1fbb59 }
@media (max-width:520px){ .fab--wa span{ display:none } .fab--wa{ padding:.9rem } }

.fab--top{
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  width:46px; height:46px; justify-content:center;
  background:var(--brand); color:#fff; opacity:0; pointer-events:none;
}
.fab--top svg{ width:20px; height:20px }
.fab--top.is-visible{ opacity:1; pointer-events:auto }
.fab--top:hover{ background:var(--red) }

/* ═══════════ ANIMACIÓN DE ENTRADA ═══════════ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}

/* ═══════════ IMPRESIÓN ═══════════ */
@media print{
  .header,.topbar,.fab,.cta__actions,.hero__actions,.form,.maps,.burger{ display:none !important }
  /* En papel no hay pestañas que apretar: se imprimen los cinco paneles seguidos */
  .tabs__bar{ display:none !important }
  .panel[hidden]{ display:block !important }
  .panel + .panel{ margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid #ccc }
  .tabs__panels{ background:none !important; border:0 !important; padding:0 !important }
  .diagbox{ background:none !important; color:#000 !important }
  body{ color:#000; background:#fff }
  .hero,.cta,.footer{ background:#fff !important; color:#000 !important }
  .hl{ background:none !important; color:#000 !important; transform:none !important; box-shadow:none !important }
  .reveal{ opacity:1 !important; transform:none !important }
}