/* ============================================================================
   TEC-iNFO · STYLE.CSS
   ----------------------------------------------------------------------------
   Web premium estática para Tec-iNfo (Febobox SL).
   Estilo: Apple-inspired. Tipografía system-ui. Sin dependencias.

   ORGANIZACIÓN
   01 · Reset y normalización
   02 · Tokens de diseño (paleta, tipografía, espaciado, sombras, radios)
   03 · Base (html, body, tipografía global, focus visible, accesibilidad)
   04 · Layout (container, secciones, utilidades)
   05 · Componentes:
        5.1 · Botones
        5.2 · Cards
        5.3 · Brand pills (píldoras de marca)
        5.4 · Checklist
        5.5 · FAQ acordeón
   06 · Navegación (header sticky con blur)
   07 · Hero
   08 · Bloque servicios (grid 4x2)
   09 · Bloque "por qué nosotros"
   10 · Bloque marcas
   11 · Bloque zonas locales
   12 · Bloque opiniones
   13 · Bloque FAQ
   14 · CTA final azul
   15 · Footer
   16 · FAB WhatsApp
   17 · Banner de cookies
   18 · Animaciones (scroll reveal + reduce-motion)
   19 · Media queries (mobile-first → tablet → desktop)

   BREAKPOINTS
   base   0–599   móvil
   sm     600+    tablet pequeña
   md     768+    tablet
   lg     1024+   desktop
   xl     1280+   desktop ancho
============================================================================ */


/* ============================================================================
   01 · RESET Y NORMALIZACIÓN
   Reset minimalista. No usamos normalize.css; el reset propio es 30 líneas
   y elimina 100% lo que necesitamos.
============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

img, picture, svg, video {
  max-width: 100%;
  display: block;
  height: auto;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--c-primary); color: #fff; }


/* ============================================================================
   02 · TOKENS DE DISEÑO
   Todas las variables de la marca viven aquí. Cambiar el color primario o un
   espaciado se hace en un solo sitio.
============================================================================ */

:root {

  /* ---------- 02.1 · Paleta -------------------------------------------- */

  --c-primary:        #0071e3;   /* Apple Blue — botones, links, acentos      */
  --c-primary-hover:  #0040c1;   /* hover / active                            */
  --c-primary-soft:   #e6f1fb;   /* fondo super claro para badges informativos*/

  --c-wa:             #25d366;   /* WhatsApp                                  */
  --c-wa-hover:       #1ebe5a;

  --c-text:           #1d1d1f;   /* texto principal (casi negro Apple)        */
  --c-text-soft:      #6e6e73;   /* texto secundario · 5.0:1 AA ✓             */
  --c-text-muted:     #71717a;   /* texto auxiliar · 4.65:1 AA ✓              */

  --c-bg:             #ffffff;   /* fondo base                                */
  --c-surface:        #f5f5f7;   /* fondo alterno de secciones                */
  --c-surface-2:      #fbfbfd;   /* superficie aún más sutil                  */

  --c-border:         #d2d2d7;   /* bordes y dividers                         */
  --c-border-soft:    #e8e8ed;   /* bordes más suaves                         */

  --c-success:        #34c759;
  --c-danger:         #ff3b30;

  --c-dark:           #1d1d1f;   /* footer y CTAs invertidos                  */
  --c-dark-2:         #2c2c2e;


  /* ---------- 02.2 · Tipografía ---------------------------------------- */

  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", "Helvetica Neue", system-ui, Roboto, sans-serif;

  /* Escala fluida con clamp(MIN, PREFERIDO, MAX) — crece con el viewport.   *
   * El valor preferido usa 'vw' para escalar suavemente entre breakpoints. */

  --fs-display: clamp(2.5rem, 5.5vw + 1rem, 3.75rem);   /* 40 → 60 */
  --fs-h1:      clamp(2rem,   3.5vw + 1rem, 2.75rem);   /* 32 → 44 */
  --fs-h2:      clamp(1.5rem, 2vw + 0.8rem, 1.875rem);  /* 24 → 30 */
  --fs-h3:      clamp(1.1rem, 0.8vw + 0.9rem, 1.375rem);/* 18 → 22 */
  --fs-body:    1.0625rem;                              /* 17     */
  --fs-small:   0.875rem;                               /* 14     */
  --fs-micro:   0.75rem;                                /* 12     */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;

  --ls-tight:   -0.022em;   /* títulos display */
  --ls-snug:    -0.012em;   /* h1, h2          */
  --ls-normal:  0;
  --ls-wide:    0.08em;     /* eyebrows tipo "POLA DE LENA · ASTURIAS"      */


  /* ---------- 02.3 · Espaciado ----------------------------------------- */

  --sp-1: 0.25rem;   /* 4   */
  --sp-2: 0.5rem;    /* 8   */
  --sp-3: 0.75rem;   /* 12  */
  --sp-4: 1rem;      /* 16  */
  --sp-5: 1.5rem;    /* 24  */
  --sp-6: 2rem;      /* 32  */
  --sp-7: 3rem;      /* 48  */
  --sp-8: 4rem;      /* 64  */
  --sp-9: 6rem;      /* 96  */
  --sp-10:8rem;      /* 128 */


  /* ---------- 02.4 · Radios -------------------------------------------- */

  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;


  /* ---------- 02.5 · Sombras ------------------------------------------- */

  /* Apple casi no usa sombra. Las que usamos son discretísimas.            */

  --sh-1:     0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-2:     0 8px 24px rgba(0, 0, 0, 0.06);
  --sh-3:     0 16px 40px rgba(0, 0, 0, 0.08);
  --sh-nav:   0 1px 0 rgba(0, 0, 0, 0.08);
  --sh-float: 0 12px 32px rgba(37, 211, 102, 0.25);


  /* ---------- 02.6 · Transiciones -------------------------------------- */

  --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Curva característica Apple. La misma que iOS usa para todo.            */


  /* ---------- 02.7 · Layout -------------------------------------------- */

  --container-max: 1200px;
  --container-pad: var(--sp-5);    /* padding lateral móvil                  */
  --section-y:     var(--sp-9);    /* padding vertical sección (móvil)       */

  --z-nav:     100;
  --z-fab:     90;
  --z-cookies: 110;
}


/* ============================================================================
   03 · BASE
============================================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;     /* clip > hidden: no rompe position: sticky.        */
}

/* Respetar reducción de movimiento globalmente. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Jerarquía tipográfica base. Cualquier h1 sin clase respeta la escala.    */

h1, h2, h3, h4 {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); }

p { color: var(--c-text); }

/* Foco accesible (siempre visible al navegar con teclado). */

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Helper para lectores de pantalla (texto oculto visualmente). */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Salto al contenido principal (atajo de accesibilidad). */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  z-index: 9999;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }


/* ============================================================================
   04 · LAYOUT
============================================================================ */

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

.section {
  padding: var(--section-y) 0;
}

.section--surface { background: var(--c-surface); }
.section--dark    { background: var(--c-dark); color: #fff; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-7);
}

.section-head .eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-3);
}

.section-head h2 {
  margin-bottom: var(--sp-3);
}

.section-head p {
  color: var(--c-text-soft);
  font-size: 1.125rem;
  max-width: 640px;
  margin: 0 auto;
}

/* Utilidades rápidas */

.text-center { text-align: center; }
.text-soft   { color: var(--c-text-soft); }
.text-muted  { color: var(--c-text-muted); }
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }


/* ============================================================================
   05 · COMPONENTES
============================================================================ */

/* ---------- 5.1 · Botones ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.65em;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--r-pill);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-base);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

/* Primario: azul Apple sólido. */
.btn--primary {
  background: var(--c-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--c-primary-hover); }

/* WhatsApp: verde. */
.btn--wa {
  background: var(--c-wa);
  color: #fff;
}
.btn--wa:hover { background: var(--c-wa-hover); }

/* Outline: borde fino sobre fondo claro. */
.btn--outline {
  background: transparent;
  color: var(--c-text);
  box-shadow: inset 0 0 0 1.5px var(--c-text);
}
.btn--outline:hover {
  background: var(--c-text);
  color: #fff;
}

/* Ghost: solo texto, ideal para "saber más". */
.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  padding: 0.5em 0.75em;
}
.btn--ghost:hover { color: var(--c-primary-hover); }
.btn--ghost .arrow { transition: transform var(--t-fast); display: inline-block; }
.btn--ghost:hover .arrow { transform: translateX(3px); }

/* Invertidos (sobre fondo azul). */
.btn--white {
  background: #fff;
  color: var(--c-primary);
}
.btn--white:hover { background: var(--c-surface); }

/* Tamaños. */
.btn--sm { padding: 0.6em 1.2em; font-size: var(--fs-small); }
.btn--lg { padding: 1em 1.9em; font-size: 1.125rem; }


/* ---------- 5.2 · Cards -------------------------------------------------- */

.card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

/* Card con efecto "lift" al pasar el ratón (Apple-style). */
.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: transparent;   /* la sombra sustituye al borde en hover     */
}

/* Card de servicio (con icono arriba). */
.card-service {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}
.card-service .icon {
  width: 36px;
  height: 36px;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}
.card-service h3 {
  font-size: 1.25rem;
}
.card-service p {
  font-size: 0.9375rem;
  color: var(--c-text-soft);
  flex-grow: 1;
}
.card-service .card-link {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.card-service .card-link .arrow {
  transition: transform var(--t-fast);
}
.card-service:hover .card-link .arrow {
  transform: translateX(3px);
}

/* Card-link clickable entera (el <a> envuelve la card). */
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }

/* Card de zona (más grande, con micro-icono pin arriba derecha). */
.card-zone {
  position: relative;
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  height: 100%;
}
.card-zone .pin {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 22px;
  height: 22px;
  color: var(--c-text-muted);
}
.card-zone h3 {
  font-size: 1.5rem;
  margin-bottom: var(--sp-2);
}
.card-zone p {
  color: var(--c-text-soft);
  margin-bottom: var(--sp-4);
}

/* Card de opinión. */
.card-review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}
.card-review .stars {
  display: flex;
  gap: 2px;
  color: #ffb800;          /* amarillo Google */
}
.card-review .stars svg { width: 18px; height: 18px; }
.card-review blockquote {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-text);
  flex-grow: 1;
}
.card-review cite {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}


/* ---------- 5.3 · Brand pills ------------------------------------------- */

.brand-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  max-width: 980px;
  margin: 0 auto;
}
.brand-row + .brand-row { margin-top: var(--sp-4); }

.brand-pill {
  padding: 0.55em 1.15em;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.brand-pill:hover {
  border-color: var(--c-text);
}

/* Separador con etiqueta entre tiras de marcas. */
.brand-sep {
  text-align: center;
  margin: var(--sp-6) 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 480px;
  margin-inline: auto;
}
.brand-sep::before,
.brand-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}


/* ---------- 5.4 · Checklist (lista con check verde) --------------------- */

.checklist {
  display: grid;
  gap: var(--sp-3);
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-body);
}
.checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--c-primary);
  border-radius: 50%;
  /* check SVG inline en background */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}


/* ---------- 5.5 · FAQ ---------------------------------------------------- */

.faq {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid var(--c-border-soft);
}
.faq-item {
  border-bottom: 1px solid var(--c-border-soft);
}
.faq-item summary {
  list-style: none;        /* quitar triángulo nativo */
  cursor: pointer;
  padding: var(--sp-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--c-primary); }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-surface);
  /* + en SVG inline */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  transition: transform var(--t-base), background-color var(--t-fast);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);     /* + se convierte en × */
  background-color: var(--c-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
.faq-item .faq-content {
  padding: 0 0 var(--sp-5);
  color: var(--c-text-soft);
  line-height: var(--lh-normal);
  max-width: 680px;
}
.faq-item .faq-content p + p { margin-top: var(--sp-3); }


/* ============================================================================
   06 · NAVEGACIÓN (header sticky con backdrop blur)
============================================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.nav.is-scrolled { box-shadow: var(--sh-nav); }
.nav.is-hidden   { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 64px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.logo__mark {
  /* Imagen del monograma Ti.                                            *
   * Conservamos el ratio nativo (~1.46:1) usando height fija y width 'auto'.*
   * El aria-hidden="" del HTML evita que los lectores de pantalla       *
   * dupliquen la marca al estar ya escrita "Tec-iNfo" al lado.          */
  display: inline-block;
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

/* En el footer el monograma queda algo más grande para equilibrar el bloque. */
.footer__brand .logo__mark {
  height: 38px;
}
.logo__text strong { font-weight: var(--fw-semibold); }
.logo__text { letter-spacing: -0.01em; }

/* Enlaces de menú (desktop) */
.nav__links {
  display: none;             /* oculto en móvil; aparece en md             */
  align-items: center;
  gap: var(--sp-5);
}
.nav__links a {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  padding: 0.5em 0;
  position: relative;
  transition: color var(--t-fast);
}
.nav__links a:hover { color: var(--c-primary); }
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--c-primary);
  transition: width var(--t-base);
}
.nav__links a:hover::after { width: 100%; }

/* CTA derecha (siempre visible) */
.nav__cta { display: flex; align-items: center; gap: var(--sp-2); }

/* Botón hamburguesa (solo móvil) */
.nav__toggle {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.nav__toggle:hover { background: var(--c-surface); }
.nav__toggle .bar {
  position: relative;
  width: 22px; height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.nav__toggle .bar::before,
.nav__toggle .bar::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform var(--t-base), top var(--t-base);
}
.nav__toggle .bar::before { top: -7px; }
.nav__toggle .bar::after  { top:  7px; }

/* Estado abierto: hamburguesa se convierte en cruz */
.nav__toggle.is-open .bar { background: transparent; }
.nav__toggle.is-open .bar::before { top: 0; transform: rotate(45deg); }
.nav__toggle.is-open .bar::after  { top: 0; transform: rotate(-45deg); }

/* Drawer / overlay de menú móvil                                            *
 * IMPORTANTE: debe colocarse en el HTML como HERMANO DEL HEADER, NO dentro.  *
 * Si está dentro de .nav, el backdrop-filter del header crea un containing  *
 * block que rompe el position:fixed del drawer (queda recortado al header). */
.nav__drawer {
  position: fixed;
  inset: 0;                              /* cubre todo el viewport            */
  height: 100vh;                         /* fallback navegadores antiguos     */
  height: 100dvh;                        /* viewport dinámico móvil (real)    */
  z-index: 200;                          /* por encima del header (z-nav=100) */
  background: #fff;
  padding: calc(64px + var(--sp-5))      /* deja sitio para el header fijo    */
           var(--container-pad)
           var(--sp-7);
  overflow-y: auto;                      /* scroll interno si contenido largo */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;          /* evita rebote del scroll al body   */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-slow),
              visibility 0s linear var(--t-slow);
}
.nav__drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-slow),
              visibility 0s linear 0s;
}
.nav__drawer ul { display: grid; gap: var(--sp-2); }
.nav__drawer a {
  display: block;
  padding: var(--sp-4) 0;
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border-soft);
}
.nav__drawer .cta-block {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
}


/* ============================================================================
   07 · HERO
============================================================================ */

.hero {
  padding-top: calc(64px + var(--sp-9));   /* compensa la nav fija          */
  padding-bottom: var(--sp-9);
  background: linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin-bottom: var(--sp-5);
}
.hero__title .accent { color: var(--c-primary); }

.hero__sub {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-6);
  max-width: 540px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  color: var(--c-text-soft);
  font-size: var(--fs-small);
}
.hero__trust .stat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero__trust .stat .num {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* Visual derecho (SVG iPhone esquemático) */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__visual svg {
  width: 100%;
  max-width: 360px;
  height: auto;
}


/* ============================================================================
   08 · BLOQUE SERVICIOS
============================================================================ */

.services-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}


/* ============================================================================
   09 · BLOQUE "POR QUÉ NOSOTROS"
============================================================================ */

.why-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  text-align: center;
}
.why-grid .why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.why-grid .why-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-grid h3 { font-size: 1.125rem; }
.why-grid p {
  color: var(--c-text-soft);
  font-size: 0.9375rem;
  max-width: 280px;
}


/* ============================================================================
   10 · BLOQUE MARCAS — la rejilla la maneja .brand-row (sección 5.3)
============================================================================ */


/* ============================================================================
   11 · BLOQUE ZONAS LOCALES
============================================================================ */

.zones-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}


/* ============================================================================
   12 · BLOQUE OPINIONES
============================================================================ */

.reviews-head {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.reviews-head .rating {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1rem;
  color: var(--c-text-soft);
}
.reviews-head .rating .num {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}
.reviews-head .rating .stars { color: #ffb800; }
.reviews-head .rating .stars svg { width: 16px; height: 16px; }

.reviews-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

/* En móvil, las reseñas se vuelven slider horizontal con scroll-snap. */
@media (max-width: 767px) {
  .reviews-grid {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--container-pad);
    padding-bottom: var(--sp-3);
    margin: 0 calc(var(--container-pad) * -1);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .reviews-grid > .card {
    scroll-snap-align: start;
  }
}


/* ============================================================================
   13 · BLOQUE FAQ — usa .faq de la sección 5.5
============================================================================ */


/* ============================================================================
   14 · CTA FINAL AZUL
============================================================================ */

.cta-final {
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-9) 0;
  text-align: center;
}
.cta-final h2 {
  color: #fff;
  margin-bottom: var(--sp-4);
}
.cta-final p {
  color: rgba(255,255,255,0.85);
  font-size: 1.125rem;
  max-width: 540px;
  margin: 0 auto var(--sp-6);
}
.cta-final .btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}


/* ============================================================================
   15 · FOOTER
============================================================================ */

.footer {
  background: var(--c-dark);
  color: rgba(255,255,255,0.75);
  padding: var(--sp-9) 0 var(--sp-6);
  font-size: var(--fs-small);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}

.footer__col h4 {
  color: #fff;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.footer__col ul { display: grid; gap: var(--sp-3); }

.footer__col a {
  color: rgba(255,255,255,0.75);
  transition: color var(--t-fast);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.footer__col a:hover { color: #fff; }

.footer__brand p {
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-small);
  margin-top: var(--sp-3);
  max-width: 280px;
  line-height: 1.5;
}

.footer__brand .logo {
  color: #fff;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--fs-micro);
  color: rgba(255,255,255,0.6);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__legal a { font-size: var(--fs-micro); }

.footer__address {
  font-style: normal;
  line-height: 1.5;
}


/* ============================================================================
   16 · FAB WHATSAPP
============================================================================ */

.fab-wa {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  width: 56px;
  height: 56px;
  background: var(--c-wa);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-float);
  z-index: var(--z-fab);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.fab-wa:hover {
  transform: scale(1.08);
  background: var(--c-wa-hover);
}
.fab-wa svg { width: 28px; height: 28px; }

/* Animación de pulso lentísima (atrae la mirada sin molestar). */
@media (prefers-reduced-motion: no-preference) {
  .fab-wa::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-wa);
    z-index: -1;
    animation: pulse 2.5s ease-out infinite;
  }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.5); opacity: 0;    }
}


/* ============================================================================
   17 · BANNER DE COOKIES
============================================================================ */

.cookies {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-3);
  z-index: var(--z-cookies);
  transform: translateY(150%);
  transition: transform var(--t-slow);
  max-width: 540px;
  margin: 0 auto;
}
.cookies.is-visible { transform: translateY(0); }

.cookies p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-text-soft);
  line-height: 1.5;
}
.cookies p a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.cookies__btns .btn { flex: 1; min-width: 120px; }


/* ============================================================================
   18 · ANIMACIONES (scroll reveal)
============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Stagger: las cards hijas aparecen escalonadas. */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease, transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .reveal-stagger.is-visible > *           { opacity: 1; transform: none; }
  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms;  }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
  .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
  .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
  .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
  .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
}

/* Animación específica del SVG hero: las "grietas" se desvanecen al cargar. */
@media (prefers-reduced-motion: no-preference) {
  .hero__visual .crack {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: heal 2.2s ease-out 0.4s forwards;
  }
  .hero__visual .crack--2 { animation-delay: 0.6s; }
  .hero__visual .crack--3 { animation-delay: 0.8s; }
  .hero__visual .crack--4 { animation-delay: 1s;   }
}
@keyframes heal {
  0%   { stroke-dashoffset: 0;   opacity: 1;   }
  60%  { stroke-dashoffset: 0;   opacity: 1;   }
  100% { stroke-dashoffset: 200; opacity: 0;   }
}


/* ============================================================================
   19 · MEDIA QUERIES
   Mobile-first. El CSS de arriba es el de móvil; aquí solo añadimos.
============================================================================ */

/* ---- sm: 600px+ (tablet pequeña) ---------------------------------------- */
@media (min-width: 600px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid      { grid-template-columns: repeat(2, 1fr); }
  .zones-grid    { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid  { grid-template-columns: repeat(2, 1fr); }

  .cookies {
    left: auto;
    right: var(--sp-4);
    bottom: var(--sp-4);
    max-width: 420px;
    margin: 0;
  }
}

/* ---- md: 768px+ (tablet / nav horizontal) ------------------------------- */
@media (min-width: 768px) {

  :root {
    --container-pad: var(--sp-6);
    --section-y: var(--sp-10);
  }

  .nav__toggle { display: none; }
  .nav__links  { display: flex; }
  .nav__drawer { display: none; }

  .hero__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-8);
  }

  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid      { grid-template-columns: repeat(4, 1fr); }
  .zones-grid    { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid  { grid-template-columns: repeat(3, 1fr); }

  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }

  .fab-wa {
    right: var(--sp-6);
    bottom: var(--sp-6);
    width: 60px;
    height: 60px;
  }
  .fab-wa svg { width: 30px; height: 30px; }
}

/* ---- lg: 1024px+ (desktop) --------------------------------------------- */
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }

  .hero {
    padding-top: calc(64px + var(--sp-10));
    padding-bottom: var(--sp-10);
  }

  .hero__visual svg { max-width: 420px; }
}

/* ---- xl: 1280px+ (desktop ancho) --------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --container-pad: var(--sp-7);
  }
}


/* ============================================================================
   20 · COMPONENTES ESPECÍFICOS DE PÁGINAS INTERNAS
   - Breadcrumb (.crumbs)
   - Feature block split 2 columnas (.feature-block + modifiers)
   - Hero de página interna (.hero-inner)
   - Bloque highlight numerado (.highlight-row)
   - Trust stat con enlace Google (.hero__trust .stat a)
   - Card destacada Google (opinions placeholder en home)
   - Modificadores de grids (.zones-grid--3)
============================================================================ */

/* ---------- Breadcrumb ---------------------------------------------------- */

.crumbs {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  padding: calc(64px + var(--sp-5)) 0 0;    /* compensa nav fija            */
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.crumbs li:not(:last-child)::after {
  content: '›';
  color: var(--c-border);
  margin-left: var(--sp-1);
}
.crumbs a {
  color: var(--c-text-muted);
  transition: color var(--t-fast);
}
.crumbs a:hover { color: var(--c-primary); }
.crumbs [aria-current="page"] {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

/* ---------- Hero de página interna --------------------------------------- *
 * Más bajo que el de la home: respira pero deja sitio a las siguientes      *
 * secciones. Sin la columna visual de la derecha por defecto.               */

.hero-inner {
  padding-top: var(--sp-7);   /* el .crumbs ya añadió el padding por la nav */
  padding-bottom: var(--sp-9);
  background: linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
}
.hero-inner .hero__inner {
  grid-template-columns: 1fr;
  max-width: 820px;
}
.hero-inner .hero__title {
  font-size: var(--fs-h1);
}
.hero-inner .hero__sub {
  max-width: none;
}

/* ---------- Feature block (split 2 columnas con visual e info) ----------- *
 * Patrón clásico de landing Apple: izquierda visual, derecha copy.           *
 * En móvil se apilan; visual encima, copy debajo.                            */

.feature-block {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
.feature-block.is-reverse .feature__visual { order: 2; }   /* invertir cols */

.feature__visual {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.feature__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-4);
}
.feature__sub {
  color: var(--c-text-soft);
  font-size: 1.0625rem;
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}
.feature__list {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.feature__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 1rem;
}
.feature__list svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-primary);
}

@media (min-width: 768px) {
  .feature-block {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .feature-block.is-reverse .feature__visual { order: 0; }
  .feature-block.is-reverse .feature__content { order: -1; }
  .feature__visual { min-height: 380px; }
}


/* ---------- Highlight row (números grandes + label) ---------------------- *
 * Tira de tiempos típicos para "Reparación express".                         */

.highlight-row {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  text-align: center;
}
.highlight-row .item {
  padding: var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
}
.highlight-row .num {
  display: block;
  font-size: 2.5rem;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-2);
}
.highlight-row .label {
  font-size: var(--fs-small);
  color: var(--c-text-soft);
}

@media (min-width: 600px) { .highlight-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .highlight-row { grid-template-columns: repeat(4, 1fr); } }


/* ---------- Bloque texto SEO (columna estrecha de lectura) --------------- */

.prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-text);
}
.prose h3 {
  font-size: 1.375rem;
  margin: var(--sp-6) 0 var(--sp-3);
}
.prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--sp-4); }
.prose p:last-child { margin-bottom: 0; }
.prose a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast);
}
.prose a:hover { color: var(--c-primary-hover); }


/* ---------- Eyebrow dentro de feature-block ------------------------------ *
 * Etiqueta azul en mayúsculas que abre el bloque feature (alternativa al    *
 * .section-head .eyebrow para usos fuera de cabecera de sección).            */

.feature__eyebrow {
  display: inline-block;
  color: var(--c-primary);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-small);
  margin-bottom: var(--sp-3);
}

/* Visual del feature-block con fondo gradiente azul suave (variante). */
.feature__visual--accent {
  background: linear-gradient(135deg, var(--c-primary-soft) 0%, var(--c-surface) 100%);
}

/* Highlight-row embebido dentro de .feature__visual: 2 columnas, full width. */
.highlight-row--inset {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  width: 100%;
}

/* Nota legal pequeña al final de un feature-block. */
.feature__legal-note {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin-top: var(--sp-4);
}

/* Item del checklist marcado como "no incluido". */
.feature__list .is-not { color: var(--c-text-soft); }


/* ---------- Trust stats del hero · enlace de Google --------------------- *
 * El .stat de "Opiniones reales en Google" lleva un <a> con icono. Aquí    *
 * lo estilamos para no necesitar inline styles.                            */

.hero__trust .stat a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
.hero__trust .stat a:hover { color: var(--c-primary); }


/* ---------- Card destacada para opiniones (Google placeholder) ---------- *
 * Se usa en home/index.html mientras no haya reseñas reales integradas.     */

.card-google {
  padding: var(--sp-7);
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}
.card-google .logo-google {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.card-google h3 {
  margin-bottom: var(--sp-3);
}
.card-google p {
  color: var(--c-text-soft);
  margin-bottom: var(--sp-5);
}


/* ---------- Modifier de .zones-grid: 3 cols auto-fit -------------------- *
 * Para landings pilar donde queremos 3 zonas (no 4 como en home).           */

.zones-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* ---------- Footer brand: logo en blanco -------------------------------- *
 * En el footer oscuro el texto del logo se invierte a blanco automáticamente.*/

.footer__brand .logo {
  color: #fff;
}
.footer__address-hours {
  opacity: 0.8;
}


/* ============================================================================
   END · style.css
============================================================================ */