/* Inter autohospedada, la misma cara que usa el sistema interno. Los dos
   productos comparten marca y hasta ahora se dibujaban con letras distintas:
   Control servía Inter y la web usaba la del sistema operativo, así que el
   mismo cliente veía dos tipografías entre el sitio y su orden impresa.
   Los archivos y la licencia OFL están en /static/fonts/. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/inter-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/static/fonts/inter-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* =============================================================================
   FTCEL · ftcel.com
   Hoja de estilos única. Mobile-first.

   Todo se apoya en las escalas de :root. La regla es simple: ningún valor de
   tamaño, espacio, radio o duración se escribe a mano fuera de esta sección.
   Si hace falta un valor nuevo, se agrega a la escala; no se inventa aparte.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* -- Color ---------------------------------------------------------------
     Paleta PROVISIONAL hasta que exista el logo definitivo.
     --blue-700 es el color de acción: 5.5:1 sobre blanco, legible en texto. */
  --blue-900: #0e3971;
  --blue-800: #114fa2;
  --blue-700: #0c63d6;
  --blue-600: #277cec;
  --blue-500: #4c95f5;
  --blue-100: #d2e5fe;
  --blue-50:  #eaf3fe;

  --wa:       #25d366;
  /* Monograma de FTCel como máscara: sirve de textura y de marca de agua. */
  --marca-ftcel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='black'%3E%3Crect x='8' y='14' width='84' height='9'/%3E%3Crect x='24' y='14' width='9' height='72'/%3E%3Crect x='67' y='14' width='9' height='72'/%3E%3Crect x='8' y='45' width='84' height='9'/%3E%3Crect x='14' y='77' width='29' height='9'/%3E%3Crect x='57' y='77' width='29' height='9'/%3E%3C/g%3E%3C/svg%3E");
  --wa-dark:  #1aa851;

  --ink:       #14273f;
  --ink-soft:  #35496a;
  --muted:     #5a6a86;
  --line:      #dde7f4;
  --line-soft: #e9f0f9;

  /* La página no es blanca: el blanco queda para las superficies elevadas */
  --bg:      #f2f7fd;
  --bg-alt:  #e7effa;
  --surface: #ffffff;

  --ok:      #15803d;
  --no:      #b42318;

  /* El anillo de foco se redefine dentro de los bloques oscuros (ver 5) */
  --focus:      #0b2a52;
  --focus-halo: rgba(11, 42, 82, .18);

  /* -- Tipografía ----------------------------------------------------------
     8 pasos. Cada uno se distingue del anterior; no hay medios píxeles. */
  --text-2xs: .75rem;    /* 12 · etiquetas */
  --text-xs:  .875rem;   /* 14 · navegación, pie, apoyos */
  --text-sm:  1rem;      /* 16 · cuerpo */
  --text-md:  1.125rem;  /* 18 · bajadas */
  --text-lg:  1.25rem;   /* 20 · títulos de tarjeta */
  --text-xl:  1.5rem;    /* 24 · títulos de panel */
  --text-2xl: 2.25rem;   /* 36 · títulos de sección */
  --text-3xl: 3rem;      /* 48 · título principal, cifras */

  /* Solo tres pesos. 550 y 650 no existen en las fuentes del sistema y cada
     sistema operativo los redondeaba a su manera. */
  --w-normal: 400;
  --w-semi:   600;
  --w-bold:   700;

  --lh-tight: 1.1;
  --lh-head:  1.25;
  --lh-body:  1.65;

  /* -- Espacio · base 4 ---------------------------------------------------- */
  --sp-1:  .25rem;   /*  4 */
  --sp-2:  .5rem;    /*  8 */
  --sp-3:  .75rem;   /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */

  /* Ritmo vertical en dos niveles: dentro de un capítulo y entre capítulos */
  --gap-section: clamp(2rem, 4vw, 2.75rem);
  --gap-band:    clamp(1.75rem, 3.5vw, 2.75rem);
  --pad-hero:      clamp(2.5rem, 6vw, 4rem);
  --pad-hero-end:  clamp(3rem, 7vw, 4.5rem);
  --pad-phero:     clamp(2rem, 5vw, 3.25rem);
  --pad-phero-end: clamp(1.75rem, 4vw, 2.5rem);
  --pad-phero-sm:  clamp(1.25rem, 3vw, 1.75rem);

  /* -- Forma --------------------------------------------------------------- */
  /* Escala de radios compartida con el sistema interno: 6 · 10 · 14 · 20 · 999.
     La web usa los pasos altos y Control los bajos, pero los valores salen de
     la misma escala en vez de ser dos familias parecidas. */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 60, 120, .06), 0 1px 3px rgba(20, 60, 120, .05);
  --shadow:    0 4px 16px rgba(20, 60, 120, .09), 0 1px 3px rgba(20, 60, 120, .06);
  --shadow-lg: 0 18px 44px rgba(16, 57, 111, .14);

  /* -- Movimiento · tres tiempos ------------------------------------------- */
  --t-fast: 120ms;
  --t:      200ms;
  --t-slow: 300ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --header-h: 68px;

  --wrap:    1140px;
  --narrow:  760px;
  --measure: 68ch;

  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  /* Motivo de marca: la rejilla del monograma, en fino y muy tenue */
  --rejilla: 56px;
  --rejilla-linea: rgba(255, 255, 255, .05);
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
  /* El panel de menú vive fuera de pantalla a la derecha: se recorta para que
     no genere scroll horizontal. `clip` no crea contenedor de scroll, así que
     el header sticky sigue funcionando. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--w-normal);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  font-weight: var(--w-bold);
  line-height: var(--lh-head);
  letter-spacing: -.02em;
}

h1 {
  font-size: clamp(var(--text-2xl), 5.5vw, var(--text-3xl));
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
}
h2 { font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl)); letter-spacing: -.025em; }
h3 { font-size: var(--text-lg); letter-spacing: -.015em; }
h4 { font-size: var(--text-sm); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-700); text-decoration-color: rgba(12, 99, 214, .38); text-underline-offset: 3px; }
a:hover { color: var(--blue-600); }

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

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

.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;
}

.skip-link {
  position: absolute; left: 50%; top: -100px;
  transform: translateX(-50%);
  z-index: 200; padding: var(--sp-3) var(--sp-5);
  background: var(--blue-700); color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none; font-weight: var(--w-semi);
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --- 3. Layout ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.wrap-narrow { max-width: var(--narrow); }
.center { text-align: center; }

/* Una banda agrupa las secciones de un mismo capítulo bajo un fondo común.
   El aire entre secciones de la misma banda es menor que el que separa dos
   bandas: eso es lo que hace que la página se lea como capítulos y no como
   una lista de bloques equivalentes. */
.band { padding-block: var(--gap-band); }
.band--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line-soft);
}
.band--deep {
  position: relative;
  background: linear-gradient(150deg, #1a63c0 0%, var(--blue-900) 100%);
  color: #dbe9fb;
  overflow: hidden;
}
/* La rejilla se desvanece hacia abajo para que no compita con el texto */
.band--deep::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--rejilla-linea) 0 2px, transparent 2px var(--rejilla)),
    repeating-linear-gradient(0deg,  var(--rejilla-linea) 0 2px, transparent 2px var(--rejilla));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
}
.band--deep > * { position: relative; }

.section { padding-block: var(--gap-section); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-10); }
.section-head.center { margin-inline: auto; }
.section-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--text-md);
  max-width: var(--measure);
}
.section-cta { margin-top: var(--sp-8); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-size: var(--text-2xs); font-weight: var(--w-semi);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-700);
}
.eyebrow-center { justify-content: center; }

.lead {
  font-size: var(--text-md);
  color: var(--muted);
  max-width: 60ch;
}

.fineprint {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--text-xs); color: var(--muted); line-height: 1.5;
  max-width: var(--measure);
}
.fineprint svg { flex: none; margin-top: .2em; }

.disclaimer {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
  font-size: var(--text-xs); color: var(--ink-soft);
}
.disclaimer svg { flex: none; margin-top: .2em; color: var(--blue-700); }

/* Texto sobre la banda de color */
.band--deep h1, .band--deep h2, .band--deep h3 { color: #fff; }
.band--deep a:not(.btn) { color: #fff; }
.band--deep .eyebrow { color: #a9caf8; }
.band--deep .lead,
.band--deep .section-head p { color: #e7f0fd; }
.band--deep .fineprint { color: #e7f0fd; }

/* --- 4. Iconografía -------------------------------------------------------
   Tres tamaños de icono y tres de contenedor. El grosor de trazo se escala
   con el tamaño para mantener el peso óptico constante: un trazo fijo se ve
   pesado a 16px y endeble a 24px. */
.icon { flex: none; }

.icon-box {
  display: grid; place-items: center; flex: none;
  border-radius: var(--r-sm);
  background: var(--blue-50);
  color: var(--blue-700);
}
/* El ícono llenaba alrededor de la mitad de su caja y quedaba flotando, así
   que los bloques de ítems se veían más débiles que las tarjetas grandes. */
.icon-box svg { width: 66%; height: 66%; }
.icon-box--sm { width: 32px; height: 32px; }
.icon-box--md { width: 40px; height: 40px; border-radius: var(--r-sm); }
.icon-box--lg { width: 48px; height: 48px; border-radius: var(--r-md); }
.icon-box--solid {
  background: linear-gradient(140deg, var(--blue-700), var(--blue-900));
  color: #fff;
  box-shadow: 0 6px 16px rgba(20, 60, 120, .26);
}
.icon-box--wa { background: rgba(37, 211, 102, .14); color: var(--wa-dark); }

/* --- 5. Foco --------------------------------------------------------------
   Un solo anillo, pero el color se redefine dentro de los bloques oscuros.
   Antes el foco quedaba en 2.07:1 sobre el azul y era prácticamente invisible. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 6px var(--focus-halo);
}
.band--deep, .site-footer, .btn-primary {
  --focus: #ffffff;
  --focus-halo: rgba(255, 255, 255, .3);
}

/* --- 6. Botones ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-size: var(--text-xs); font-weight: var(--w-semi);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(1px) scale(.985); }

.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--text-sm); }
/* No habia ninguna regla de deshabilitado en todo el CSS. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; box-shadow: none; cursor: not-allowed; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; }
.btn-block { width: 100%; }

.btn-primary { background: var(--blue-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-600); color: #fff; box-shadow: var(--shadow); }

/* El verde queda para los CTA que están dentro del contenido, que es donde el
   click abre WhatsApp con el mensaje ya armado. La barra, el pie y el flotante
   —que acompañan siempre— pasan al azul de marca conservando el ícono: así el
   verde vuelve a significar algo en vez de ser «esto es un botón». */
.btn-wa { background: var(--wa); color: #06331a; box-shadow: 0 2px 10px rgba(37, 211, 102, .3); }
.btn-wa:hover { background: var(--wa-dark); color: #fff; box-shadow: 0 6px 18px rgba(37, 211, 102, .35); }

.btn-brand { background: var(--blue-700); color: #fff; box-shadow: 0 2px 10px rgba(12, 99, 214, .28); }
.btn-brand:hover { background: var(--blue-800); color: #fff; box-shadow: 0 6px 18px rgba(12, 99, 214, .32); }
.site-footer .btn-brand { background: #fff; color: var(--blue-800); box-shadow: none; }
.site-footer .btn-brand:hover { background: var(--blue-50); color: var(--blue-900); }
.btn-outline { background: var(--surface); color: var(--blue-700); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--blue-500); color: var(--blue-600); }

/* El fantasma se usa sobre fondos de color, no sobre el fondo claro de la
   pagina: ahi queda a pocos puntos de luminosidad del fondo y se lee como
   deshabilitado. Para el fondo claro esta .btn-outline. */
.btn-ghost { background: rgba(12, 99, 214, .09); color: var(--blue-800); }
.btn-ghost:hover { background: rgba(12, 99, 214, .16); color: var(--blue-800); }
.band--deep .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.band--deep .btn-ghost:hover { background: rgba(255, 255, 255, .22); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed;
  transform: none; box-shadow: none; pointer-events: none;
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.cta-row-center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-xs); font-weight: var(--w-semi);
  text-decoration: none; color: var(--blue-700);
}
.link-arrow svg { transition: transform var(--t) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- 7. Header ----------------------------------------------------------- */
.notice-bar {
  padding: var(--sp-2) var(--sp-5);
  background: var(--blue-700); color: var(--blue-50);
  font-size: var(--text-xs); text-align: center;
}

/* El fondo y el desenfoque van en ::before, NO en el header.
   `backdrop-filter` convierte al elemento en bloque contenedor de sus
   descendientes `position: fixed`: con el filtro puesto acá, el panel del menú
   —que vive dentro del header— dejaba de medirse contra la pantalla y se medía
   contra el header (375x69), quedando una caja de 112px con 501px de contenido
   adentro. Lo mismo haría `transform`, `filter`, `perspective`, `contain` o
   `will-change` sobre cualquiera de estos elementos. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(244, 249, 254, .88);
  backdrop-filter: saturate(180%) blur(12px);
  transition: background-color var(--t) var(--ease);
}
/* La separación aparece sólo cuando hay contenido pasando por debajo */
/* Dentro de la sección 3D el header pasa a una variante oscura translúcida:
   un header claro flotando sobre el azul profundo rompía la inmersión. */
.site-header.is-sobre-oscuro {
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.site-header.is-sobre-oscuro::before { background: rgba(7, 20, 38, .72); }
.site-header.is-sobre-oscuro .brand-logo { color: #fff; }
.site-header.is-sobre-oscuro .brand-text strong { color: #fff; }
.site-header.is-sobre-oscuro .brand-text small { color: #9dc0f0; }
.site-header.is-sobre-oscuro .site-nav ul a { color: #dbe9fb; }
.site-header.is-sobre-oscuro .site-nav ul a:hover { background: rgba(255, 255, 255, .1); }
.site-header.is-sobre-oscuro .site-nav ul a[aria-current="page"] { color: #fff; }
.site-header.is-sobre-oscuro .nav-toggle {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}
.site-header.is-sobre-oscuro .nav-toggle-bars i { background: #fff; }
.site-header .brand-logo,
.site-header .brand-text strong,
.site-header .brand-text small,
.site-header .site-nav ul a,
.site-header .nav-toggle { transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease); }

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(20, 60, 120, .07);
}
.header-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }

.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-right: auto;
  text-decoration: none; color: var(--ink);
}
.brand-logo {
  height: 30px; width: auto; flex: none;
  color: var(--blue-800);
}
.site-footer .brand-logo { height: 34px; color: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: var(--text-lg); letter-spacing: -.025em; }
.brand-text small { font-size: var(--text-2xs); color: var(--muted); }

.nav-toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav-toggle:hover { border-color: var(--blue-500); }
.nav-toggle:active { background: var(--blue-50); }
.nav-toggle-bars { display: grid; gap: var(--sp-1); width: 18px; }
.nav-toggle-bars i {
  display: block; height: 2px; border-radius: var(--r-xs);
  background: var(--ink);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* IMPORTANTE: cerrado, el panel NO existe en el layout.
   Antes quedaba fuera de pantalla con translateX(102%). Aunque `overflow-x:
   clip` impedía el scroll horizontal, en Chrome de Android ese ancho igual
   ensanchaba el viewport (720px en un teléfono de 393) y el navegador encogía
   la página entera al 54%. Por eso tampoco se anima entrando desde afuera:
   cualquier desborde, aunque dure 300ms, puede disparar lo mismo. */
.site-nav {
  display: none;
  position: fixed; inset: 0 0 0 auto;
  width: min(320px, 84vw);
  padding: calc(var(--header-h) + var(--sp-5)) var(--sp-6) var(--sp-6);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  transform-origin: right center;
}
.site-nav.open {
  display: block;
  animation: nav-entra var(--t-slow) var(--ease);
}
@keyframes nav-entra {
  from { opacity: 0; transform: scaleX(.94); }
  to   { opacity: 1; transform: none; }
}
.site-nav ul { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-6); }
.site-nav ul a {
  display: block; padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink); font-weight: var(--w-semi); font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-label-short { display: none; }
.site-nav ul a:hover { background: var(--blue-50); }
.site-nav ul a:active { background: var(--blue-100); }
/* La página actual se distingue del hover: color de marca y marca lateral */
.site-nav ul a[aria-current="page"] {
  color: var(--blue-700);
  background: transparent;
  box-shadow: inset 3px 0 0 var(--blue-700);
}
.nav-cta { width: 100%; }

body.nav-open { overflow: hidden; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(9, 20, 40, .42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
.nav-scrim.show { opacity: 1; pointer-events: auto; }

/* --- 8. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--pad-hero) 0 var(--pad-hero-end);
  background:
    radial-gradient(1000px 460px at 80% -10%, #e0ecfc 0%, transparent 62%),
    linear-gradient(180deg, #e6f0fd 0%, var(--bg) 100%);
  overflow: hidden;
}
.hero-inner { display: grid; gap: var(--sp-10); }
.hero h1 { margin-bottom: var(--sp-4); }
.hero .lead { margin-bottom: 0; }

.hero-badges {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  font-size: var(--text-xs); color: var(--ink-soft);
}
.hero-badges li { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--w-semi); }
.hero-badges svg { color: var(--ok); }

/* Panel de apoyo. Sin halo difuso ni icono gigante: el peso lo llevan las
   etiquetas, que dicen algo, en lugar de un dibujo de relleno. */
.hero-panel {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--surface) 0%, #dcebfd 100%);
  box-shadow: var(--shadow-lg);
}
.hero-panel-title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0;
  font-size: var(--text-2xs); font-weight: var(--w-semi);
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-800);
}
/* Panel de estado del taller. Sin JavaScript muestra los horarios de la
   semana; con JavaScript agrega arriba si está abierto ahora. */
.status-now {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--blue-100);
  font-size: var(--text-sm); font-weight: var(--w-semi); color: var(--ink);
}
.status-dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--muted);
}
.status-card.is-open  .status-dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(21, 128, 61, .16); }
.status-card.is-closed .status-dot { background: var(--muted); }
.status-detail { font-weight: var(--w-normal); color: var(--muted); }

.status-hours { display: grid; gap: var(--sp-2); }
.status-hours li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--text-xs); color: var(--muted);
}
.status-hours li span:last-child { color: var(--ink-soft); font-weight: var(--w-semi); text-align: right; }
.status-hours li.closed span:last-child { color: var(--muted); font-weight: var(--w-normal); }
/* El día en curso se destaca sin cambiar el tamaño, para no mover la caja */
.status-hours li.is-today { color: var(--blue-800); }
.status-hours li.is-today span:last-child { color: var(--blue-800); }

.status-note {
  margin: 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--blue-100);
  font-size: var(--text-xs); color: var(--muted);
}
.status-card .btn { justify-self: start; }

.hero-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero-chips li {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface); border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: var(--w-semi); color: var(--blue-800);
  box-shadow: var(--shadow-sm);
}
.hero-chips svg { color: var(--blue-600); }

/* --- 9. Encabezado de páginas internas ----------------------------------- */
.page-hero {
  padding: var(--pad-phero) 0 var(--pad-phero-end);
  background:
    radial-gradient(880px 380px at 82% -22%, #e0ecfc 0%, transparent 60%),
    linear-gradient(180deg, #e6f0fd 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero-sm { padding-bottom: var(--pad-phero-sm); }

/* --- 10. Tarjetas y grillas ---------------------------------------------- */
.card-grid { display: grid; gap: var(--sp-4); }

.card {
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--muted); margin-bottom: 0; }
.card .icon-box { margin-bottom: var(--sp-4); }

/* La elevación al pasar el mouse es una promesa de interacción: la tienen
   sólo las tarjetas que efectivamente llevan a algún lado. */
.card--link {
  position: relative;
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-100); }
.card--link:active { transform: translateY(-1px) scale(.995); }
.card--link:focus-within { border-color: var(--blue-500); }
.card--link h3 a { color: inherit; text-decoration: none; }
/* Un solo destino para toda la tarjeta, sin repetir el enlace en cada una */
.card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.card-hint {
  margin-top: auto; padding-top: var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-xs); font-weight: var(--w-semi); color: var(--blue-700);
}
.card-hint svg { transition: transform var(--t) var(--ease); }
.card--link:hover .card-hint svg { transform: translateX(4px); }

.card-contact .btn { margin-top: auto; align-self: flex-start; }
.card-contact p { margin-bottom: var(--sp-5); }

/* Ítem de lista con icono. NO es una tarjeta: no tiene superficie, borde ni
   sombra, y por lo tanto tampoco estados de interacción. */
.feature-grid { display: grid; gap: var(--sp-6); }
.feature h3 { margin-bottom: var(--sp-2); }
.feature p { color: var(--muted); margin-bottom: 0; max-width: 46ch; }
.feature .icon-box { margin-bottom: var(--sp-3); }

/* --- 11. Pilares --------------------------------------------------------- */
.pillars { display: grid; gap: var(--sp-5); }
.pillar {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-100); }
.pillar:active { transform: translateY(-1px) scale(.995); }
.pillar:focus-within { border-color: var(--blue-500); }
.pillar .icon-box { margin-bottom: var(--sp-5); }
.pillar h3 { font-size: var(--text-xl); }
.pillar > p { color: var(--muted); margin-bottom: var(--sp-5); }
.pillar-points { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.pillar-points li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); color: var(--ink-soft);
}
.pillar-points svg { color: var(--blue-600); }
.pillar .link-arrow { margin-top: auto; font-size: var(--text-sm); }
.pillar .link-arrow::after { content: ""; position: absolute; inset: 0; }

/* --- 12. Pastillas y etiquetas ------------------------------------------- */
.pill-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.center-list { justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: var(--w-semi); color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.pill svg { color: var(--blue-600); }
.pill-link { text-decoration: none; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.pill-link:hover { border-color: var(--blue-500); color: var(--blue-700); }
.pill-link:active { background: var(--blue-50); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-list li {
  padding: var(--sp-1) var(--sp-4);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: var(--w-semi); color: var(--blue-800);
}
.tag-list-lg li { padding: var(--sp-2) var(--sp-5); font-size: var(--text-sm); }

/* --- 13. Formulario ------------------------------------------------------ */
.quote-inner { display: grid; gap: var(--sp-10); }
.quote-text .fineprint { margin-top: var(--sp-6); }

.quote-form {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  /* Dentro del panel blanco vuelve a valer el anillo de foco oscuro */
  --focus: #0b2a52;
  --focus-halo: rgba(11, 42, 82, .18);
}
.field { display: grid; gap: var(--sp-1); }
.field label { font-size: var(--text-xs); font-weight: var(--w-semi); color: var(--ink); }
.field .optional { font-weight: var(--w-normal); color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: #f7fafe;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #90a1b8; }
.field input:focus, .field textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(12, 99, 214, .18);
}
.field textarea { resize: vertical; min-height: 84px; }
.field.invalid input, .field.invalid textarea { border-color: var(--no); }

.form-hint { margin: 0; font-size: var(--text-xs); color: var(--muted); min-height: 1.2em; }
.form-hint.error { color: var(--no); font-weight: var(--w-semi); }

/* --- 14. Proceso · recorrido continuo -------------------------------------
   Antes eran seis tarjetas sueltas en dos filas, lo que rompía la lectura
   lineal de una secuencia. Ahora es un recorrido con conector. */
.flow { display: grid; gap: 0; }
.flow-step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
}
.flow-step:last-child { padding-bottom: 0; }
/* Los títulos comparten línea y el texto cuelga debajo: con bloques apilados,
   el paso de texto más largo levantaba su título por encima de los demás. */
@media (min-width: 900px) {
  .flow-step { display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
  .flow-step h3 { min-height: 2.6em; }
}
/* Rail vertical en móvil */
.flow-step::before {
  content: "";
  position: absolute; left: 17px; top: 40px; bottom: 0;
  width: 2px; background: var(--blue-100);
}
.flow-step:last-child::before { display: none; }
.flow-num {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue-100);
  color: var(--blue-700);
  font-size: var(--text-xs); font-weight: var(--w-bold);
  z-index: 1;
}
.flow-step h3 { margin-bottom: var(--sp-1); font-size: var(--text-sm); }
.flow-step p { color: var(--muted); font-size: var(--text-xs); margin-bottom: 0; max-width: 48ch; }

/* --- 15. Línea de tiempo --------------------------------------------------
   La trayectoria es el contenido más distintivo que tiene FTCEL y estaba
   presentada como tres párrafos seguidos. */
.timeline { display: grid; }
.timeline-item {
  position: relative;
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-8);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute; left: 19px; top: 46px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-100), var(--line-soft));
}
.timeline-item:last-child::before { display: none; }
.timeline-marker {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue-100);
  color: var(--blue-700);
  z-index: 1;
}
.timeline-item:last-child .timeline-marker {
  background: linear-gradient(140deg, var(--blue-700), var(--blue-900));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(20, 60, 120, .26);
}
.timeline-label {
  display: block; margin-bottom: var(--sp-1);
  font-size: var(--text-2xs); font-weight: var(--w-semi);
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700);
}
.timeline-item h3 { margin-bottom: var(--sp-2); }
.timeline-item p { color: var(--muted); margin-bottom: 0; max-width: var(--measure); }

/* --- 16. Cifras y experiencia -------------------------------------------- */
.experience, .story { display: grid; gap: var(--sp-10); align-items: center; }
.story-text p { color: var(--muted); max-width: var(--measure); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.stats li {
  padding: var(--sp-6) var(--sp-3);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.stats strong {
  display: block;
  font-size: clamp(var(--text-xl), 5vw, var(--text-3xl));
  font-weight: var(--w-bold); letter-spacing: -.03em;
  color: var(--blue-700); line-height: var(--lh-tight);
}
.stats span { font-size: var(--text-2xs); color: var(--muted); }
.stats-column { grid-template-columns: 1fr; }

.pull-quote { margin: 0; }
.pull-quote p {
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
  line-height: 1.45; font-weight: var(--w-semi);
  color: #fff; letter-spacing: -.02em;
  max-width: 46ch;
}
.pull-quote p::before { content: "\201C"; }
.pull-quote p::after  { content: "\201D"; }

/* --- 17. Paneles --------------------------------------------------------- */
.split { display: grid; gap: var(--sp-5); }
.panel {
  padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.panel h2 { font-size: var(--text-xl); }
.panel h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); }
.panel p { color: var(--muted); max-width: var(--measure); }
.panel .icon-box { margin-bottom: var(--sp-4); }
.split-warranty { margin-top: var(--sp-5); }
.panel-ok h3 { color: var(--ok); }
.panel-no h3 { color: var(--no); }

.check-list { display: grid; gap: var(--sp-2); }
.check-list li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--text-xs); color: var(--ink-soft);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .45;
}

.cta-band { display: grid; gap: var(--sp-6); align-items: center; }
.cta-band .lead { margin-bottom: 0; }

/* --- 18. FAQ ------------------------------------------------------------- */
/* El acordeon se limita a si mismo en vez de centrar el bloque entero: asi la
   seccion mantiene el mismo eje izquierdo que todas las demas de la pagina. */
.faq-list { display: grid; gap: var(--sp-2); max-width: 760px; }

/* --- Pasos dentro de la banda de consulta --------------------------------- */
.quote-steps {
  list-style: none; counter-reset: paso; margin: var(--sp-6) 0 var(--sp-5); padding: 0;
  display: grid; gap: var(--sp-4);
}
.quote-steps li {
  counter-increment: paso; display: grid; grid-template-columns: 28px 1fr;
  gap: var(--sp-1) var(--sp-3); align-items: baseline;
}
.quote-steps li::before {
  content: counter(paso); grid-row: 1 / 3;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: var(--text-2xs); font-weight: var(--w-bold);
}
.quote-steps strong { color: #fff; font-weight: var(--w-semi); }
.quote-steps span { grid-column: 2; color: rgba(255, 255, 255, .78); font-size: var(--text-xs); }
.quote-faq { margin: 0; }

/* --- Horario: un solo lugar canónico --------------------------------------
   Aparecía tres veces completo en la misma página. La tabla entera vive en
   «Dónde estamos»; el hero muestra solo el renglón de hoy (el script lo marca
   con .is-today) y el pie una línea. */
.status-card .status-hours li:not(.is-today) { display: none; }
.status-hours-more { margin: var(--sp-2) 0 0; font-size: var(--text-xs); }
.status-hours-more a { color: var(--blue-700); font-weight: var(--w-semi); }
.footer-hours-line { margin: 0; color: #c3d9f5; font-size: var(--text-xs); line-height: var(--lh-body); }
.quote-faq .link-arrow { color: #fff; }

/* Textura de marca sobre la única superficie de color plano de la página.
   Va al 4 % y a gran escala: tiene que sentirse, no verse. */
.band--deep { position: relative; isolation: isolate; }
.band--deep::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .04; background: #fff;
  -webkit-mask: var(--marca-ftcel) right -60px top 50% / 420px 420px no-repeat;
  mask: var(--marca-ftcel) right -60px top 50% / 420px 420px no-repeat;
}

/* Las cifras, ya sin su sección propia, cierran «Por qué FTCEL». */
.stats--inline { margin-top: var(--sp-8); }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--t) var(--ease);
}
.faq-item:hover { border-color: var(--blue-100); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer; list-style: none;
  font-size: var(--text-sm); font-weight: var(--w-semi); color: var(--ink);
  transition: color var(--t) var(--ease), background-color var(--t-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:active { background: var(--blue-50); }
.faq-item summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item[open] summary { color: var(--blue-700); }
.faq-answer { padding: 0 var(--sp-5) var(--sp-5); }
.faq-answer p { color: var(--muted); margin: 0; max-width: var(--measure); }

/* --- 19. Reseñas --------------------------------------------------------- */
.rating-line {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); margin-bottom: 0;
  font-size: var(--text-xs); color: var(--muted);
}
.rating-line strong { color: var(--ink); font-size: var(--text-sm); }
.rating-line .stars { margin: 0; }

.review { display: flex; flex-direction: column; }
.stars { margin: 0 0 var(--sp-3); color: #f5a623; letter-spacing: .1em; }
.stars .dim { color: var(--line); }
.review-text { font-style: italic; color: var(--ink-soft) !important; }
.review-author {
  margin: var(--sp-4) 0 0 !important;
  font-size: var(--text-xs) !important; font-weight: var(--w-semi);
  color: var(--ink) !important;
}
.review-author span { font-weight: var(--w-normal); color: var(--muted); }

/* Mientras no haya reseñas cargadas, la sección se reduce a una franja. Un
   bloque grande que anuncia opiniones y no muestra ninguna se lee como un
   error, no como una sección pendiente. */
.reviews-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.reviews-strip div { max-width: 56ch; }
.reviews-strip strong { display: block; color: var(--ink); font-size: var(--text-sm); }
.reviews-strip p { margin: 0; color: var(--muted); font-size: var(--text-xs); }

/* --- 20. Ubicación y mapa ------------------------------------------------ */
.location { display: grid; gap: var(--sp-6); }
.location-data h3 {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6); font-size: var(--text-sm);
}
.location-data h3:first-child { margin-top: 0; }
.location-data h3 svg { color: var(--blue-600); }

.hours-list { display: grid; gap: var(--sp-2); }
.hours-list li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--line);
  font-size: var(--text-xs);
}
.hours-list li span:first-child { color: var(--muted); }
.hours-list li span:last-child { font-weight: var(--w-semi); color: var(--ink); text-align: right; }
/* "Cerrado" es un dato, no un error: color neutro en lugar de rojo */
.hours-list .closed { color: var(--muted) !important; font-weight: var(--w-normal) !important; }

.map-embed {
  position: relative;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--blue-50);
  overflow: hidden;
}
.map-embed-lg { min-height: 420px; }
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.map-load {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--sp-1);
  width: 100%; border: 0; cursor: pointer;
  /* Las rayas diagonales son, en la convención de la web, el patrón de
     contenido ausente: se leía como un mapa que no cargó en vez de como una
     tarjeta que ofrece abrirlo. */
  background: var(--blue-50);
  font: inherit; color: var(--blue-800);
  transition: background-color var(--t) var(--ease);
}
.map-load:hover { background: var(--blue-100); }
.map-load:active { background: var(--blue-100); }
.map-load svg { color: var(--blue-600); }
.map-load strong { font-size: var(--text-sm); }
/* La tarjeta del mapa acompaña la altura de la columna de datos que tiene al lado. */
.location .map-embed { min-height: 100%; }
.map-load small { color: var(--muted); font-size: var(--text-xs); }

/* --- 21. Prosa legal ----------------------------------------------------- */
.prose h2 { font-size: var(--text-lg); margin-top: var(--sp-10); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); max-width: var(--measure); }

/* --- 22. Footer ---------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-16);
  background: linear-gradient(170deg, var(--blue-900) 0%, #0a2750 100%);
  color: #c3d9f5;
  font-size: var(--text-xs);
}
/* Monograma como marca de agua: identidad sin ocupar contenido */
.footer-watermark {
  position: absolute; right: -4%; bottom: -18%;
  width: min(420px, 46%); height: auto;
  color: #fff; opacity: .045;
  pointer-events: none;
}
.footer-grid { position: relative; display: grid; gap: var(--sp-10); padding-bottom: var(--sp-10); }
.footer-bottom { position: relative; }
.footer-brand .brand-logo { margin-bottom: var(--sp-5); }
.footer-about { color: #c3d9f5; margin-bottom: var(--sp-5); max-width: 34ch; }
.site-footer h2 {
  font-size: var(--text-2xs); letter-spacing: .09em; text-transform: uppercase;
  color: #b3d1f7; margin-bottom: var(--sp-4);
}
.footer-list { display: grid; gap: var(--sp-3); }
.footer-list li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.footer-list svg { flex: none; margin-top: .2em; color: #8ab4ec; }
.footer-list a { color: #dce9fb; text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer-hours li { display: block; }
.footer-hours li span:first-child { display: block; color: #9ec2f0; }
.footer-hours li span:last-child { display: block; }
.footer-hours .closed { color: #b3d1f7; }
.footer-nav a { color: #c3d9f5; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #b8d4f8;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #c3d9f5; }

/* Crédito de licencia: presente y legible, pero claramente secundario */
.footer-credits { padding-bottom: var(--sp-5); font-size: var(--text-2xs); }
.footer-credits p { margin: 0; color: #8fb3e4; }
.footer-credits a { color: #a9c6ee; text-decoration: none; }
.footer-credits a:hover { color: #fff; text-decoration: underline; }
/* Espacio para que el flotante no se apoye sobre los enlaces del pie. */
@media (max-width: 899px) { .site-footer { padding-bottom: calc(var(--sp-8) + 56px); } }

/* --- 23. Botón flotante de WhatsApp -------------------------------------- */
.wa-float {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blue-700); color: #fff;
  box-shadow: 0 8px 22px rgba(12, 99, 214, .40);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease),
              opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
/* Nace oculto: mientras el botón del hero está en pantalla el flotante es
   redundante, y encima se apoyaba sobre la tarjeta de horarios tapando la hora
   de cierre. Aparece recién cuando el CTA principal quedó arriba. */
.wa-float { opacity: 0; visibility: hidden; transform: scale(.85); }
.wa-float.is-on { opacity: 1; visibility: visible; transform: scale(1); }
/* Sin JavaScript el flotante se ve siempre, que es el comportamiento anterior. */
.no-js .wa-float { opacity: 1; visibility: visible; transform: none; }
.wa-float:hover { transform: scale(1.06); background: var(--blue-800); color: #fff; }
.wa-float:active { transform: scale(.96); }

/* --- 24. Aparición al hacer scroll --------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.visible {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

/* --- 25. Experiencia 3D · el equipo por dentro ---------------------------
   Dos estados. Por defecto la sección es un bloque de texto normal: si no hay
   JavaScript, no hay WebGL o el modelo no carga, NO queda un hueco enorme.
   El script agrega `is-3d` recién cuando la experiencia está lista, y ahí la
   sección toma su altura larga y el contenedor se vuelve sticky. */
.teardown {
  --teardown-bg: #071426;
  position: relative;
  padding-block: var(--gap-band);
  color: #dbe9fb;
  background: var(--teardown-bg);
}
.teardown.is-3d {
  height: 340vh;
  padding-block: 0;
  /* Sin degradado: corte limpio contra el fondo claro. El borde lo marca una
     línea azul muy tenue (ver .teardown::before / ::after), para que se lea
     como el comienzo de otra cosa y no como un cambio de background. */
  background: var(--teardown-bg);
}

/* Un paso por encima del resto del sitio: la sección tiene mucho espacio y el
   modelo mucha presencia, así que el texto necesita cuerpo para no quedar
   tímido. Es un tamaño de display propio de esta sección, no un paso nuevo de
   la escala general. */
.teardown { --teardown-titulo: 2.5rem; }   /* 40px */
.teardown h2 {
  color: #fff;
  /* En celular arranca en 24: a 393px un título de 40 se comía cuatro líneas. */
  font-size: clamp(var(--text-xl), 5vw, var(--teardown-titulo));
  letter-spacing: -.03em;
}
.teardown-acento {
  color: #7fb0ff;
  font-weight: inherit;
}
.teardown p { color: #cfe1fa; font-size: var(--text-sm); }
.teardown .eyebrow { color: #8fb7f5; }

/* Línea de corte: 1px con un degradado horizontal que se apaga en los bordes.
   Es el "acá empieza otra experiencia" sin recurrir a un fundido. */
.teardown::before,
.teardown::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0,
    rgba(125, 175, 255, .5) 22%,
    rgba(125, 175, 255, .5) 78%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}
.teardown::before { top: 0; }
.teardown::after { bottom: 0; }

.teardown-sticky { position: relative; }
.teardown.is-3d .teardown-sticky {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  /* Móvil: modelo arriba, texto abajo. Nada se superpone. */
  display: grid;
  grid-template-rows: 46fr 54fr;
}

/* El canvas no tiene borde ni caja: ocupa espacio de página, no un widget */
.teardown-stage { position: relative; min-height: 0; }
.teardown:not(.is-3d) .teardown-stage { display: none; }
.teardown-canvas {
  display: block; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.teardown-canvas.is-ready { opacity: 1; }

.teardown-loading {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  margin: 0;
  font-size: var(--text-xs); color: #7fa6dd !important;
  transition: opacity var(--t-slow) var(--ease);
}
.teardown-loading.is-done { opacity: 0; }

/* Viñeta muy suave: concentra la mirada en el texto y el equipo sin que se
   note. Va por encima del canvas y por debajo del texto. */
.teardown.is-3d .teardown-sticky::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 72% at 50% 50%,
    transparent 55%, rgba(0, 8, 20, .30) 100%);
}

.teardown-inner { display: flex; align-items: center; min-height: 0; }
.teardown-copy { max-width: 34rem; }

.teardown-steps { position: relative; }
.teardown-step h2 { margin-bottom: var(--sp-3); }
.teardown-step p { margin-bottom: 0; max-width: 46ch; }
.teardown:not(.is-3d) .teardown-step + .teardown-step { margin-top: var(--sp-6); }

/* Con la experiencia activa los pasos se apilan y se muestra uno por vez */
/* Los pasos se superponen en una misma celda de grilla, no con posición
   absoluta: así el contenedor mide lo que mide el paso más alto y el texto no
   se desborda sobre la lista de abajo. En celular, con el título más grande,
   el alto fijo anterior se quedaba corto y los textos se pisaban. */
.teardown.is-3d .teardown-steps { display: grid; }
.teardown.is-3d .teardown-step {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease),
              visibility var(--t-slow) var(--ease);
}
.teardown.is-3d .teardown-step.is-active {
  opacity: 1; visibility: visible; transform: none;
}

.teardown-services {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-8);
  /* Un paso más chica que el resto para que los seis entren en una línea: es
     una lista de apoyo, no contenido principal. */
  font-size: var(--text-2xs);
}
.teardown-services li {
  display: flex; align-items: center; gap: var(--sp-3);
  color: rgba(255, 255, 255, .42);
  transition: color var(--t-slow) var(--ease);
}
/* El servicio del tramo actual se enciende. Sólo cambia el color y agrega un
   halo: nada que ocupe espacio. Con un punto delante, al encenderse los seis
   en el último paso la fila crecía y se partía en dos líneas. */
.teardown-services li.is-activo {
  color: #fff;
  text-shadow: 0 0 14px rgba(127, 176, 255, .65);
}

/* En pantallas chicas los seis no entran en una línea y quedaba "Software"
   solo abajo. Dos filas de tres, sin puntos: más prolijo que un huérfano. */
@media (max-width: 899px) {
  .teardown-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3) var(--sp-4);
  }
}

/* De 900 para arriba entran en una línea y se separan con un punto. Va
   DESPUÉS de cada ítem salvo el último: puesto antes, al partirse en dos
   líneas la segunda arrancaba con un punto suelto. */
@media (min-width: 900px) {
  .teardown-services li:not(:last-child)::after {
    content: ""; width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: .55;
  }
}

.teardown-hint {
  position: absolute; left: 0; right: 0; bottom: var(--sp-5);
  z-index: 2;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase;
  color: #6f97cf !important;
  transition: opacity var(--t-slow) var(--ease);
}
/* Flecha mínima que baja unos píxeles y vuelve */
.teardown-flecha {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: teardown-baja 1.8s var(--ease) infinite;
}
@keyframes teardown-baja {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .75; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
.teardown:not(.is-3d) .teardown-hint { display: none; }
.teardown-hint.is-done { opacity: 0; }

/* --- 26. Breakpoints ----------------------------------------------------- */
@media (min-width: 620px) {
  .card-grid    { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars      { grid-template-columns: repeat(2, 1fr); }
  .split        { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: repeat(2, 1fr); }
  .stats-column { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  html { scroll-padding-top: calc(var(--header-h) + var(--sp-8)); }

  .nav-toggle { display: none; }
  .site-nav, .site-nav.open {
    position: static; width: auto; padding: 0;
    display: flex; align-items: center; gap: var(--sp-6);
    background: none; border: 0; box-shadow: none;
    transform: none; overflow: visible; animation: none;
  }
  .site-nav ul { display: flex; gap: var(--sp-1); margin-bottom: 0; }
  .site-nav ul a { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); }
  /* En escritorio la página actual se marca con una barra inferior */
  .site-nav ul a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--blue-700);
    border-radius: 0;
  }
  .nav-label-full  { display: none; }
  .nav-label-short { display: inline; }
  .nav-cta { width: auto; }
  .nav-scrim { display: none; }

  .hero-inner   { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--sp-16); }
  .card-grid    { grid-template-columns: repeat(3, 1fr); }
  .card-grid-2  { grid-template-columns: repeat(2, 1fr); }
  .feature-grid   { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
  .feature-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .quote-inner  { grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
  .experience   { grid-template-columns: 1.2fr .8fr; gap: var(--sp-16); }
  .story        { grid-template-columns: 1.35fr .65fr; gap: var(--sp-16); align-items: start; }
  .stats-column { grid-template-columns: 1fr; }
  .location     { grid-template-columns: .9fr 1.1fr; gap: var(--sp-10); align-items: start; }
  .cta-band     { grid-template-columns: 1fr auto; gap: var(--sp-10); }
  .footer-grid  { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-10); }
  .wa-float     { display: none; }

  /* Composición editorial: el texto ocupa la izquierda y el modelo el resto.
     El canvas se corre a la derecha en vez de mover la cámara. */
  .teardown.is-3d .teardown-sticky { display: block; }
  /* El canvas ocupa TODO el ancho. Si se recortaba al 58% derecho se veía el
     borde del rectángulo: el glow aclara su área y afuera queda solo el
     degradado CSS. A sangre completa no hay borde posible; al modelo lo corre
     el propio script hacia la derecha. */
  .teardown.is-3d .teardown-stage { position: absolute; inset: 0; }
  .teardown.is-3d .teardown-inner { position: relative; height: 100%; z-index: 1; }
  /* La columna termina antes del 41% para dejar aire hasta la pieza más a la
     izquierda del despiece, que llega al 43,5% en el momento más abierto. */
  .teardown-copy { width: min(40%, 28rem); max-width: none; }
  .teardown p { font-size: var(--text-md); }
  .quote-form   { padding: var(--sp-8); }

  /* El proceso pasa a recorrido horizontal: el conector cruza los números */
  .flow { grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); }
  .flow-step { grid-template-columns: 1fr; gap: var(--sp-3); padding-bottom: 0; }
  .flow-step::before {
    left: 36px; right: calc(var(--sp-5) * -1); top: 17px; bottom: auto;
    width: auto; height: 2px;
  }
  .flow-step:last-child::before { display: none; }
  .flow-step p { max-width: none; }
}

@media (min-width: 1100px) {
  /* Grillas de 8: cuatro columnas evitan la fila final incompleta */
  .card-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .card-grid   { gap: var(--sp-5); }
}

/* --- 27. Preferencias del usuario ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Los pasos cambian sin desplazamiento ni fundido */
  .teardown.is-3d .teardown-step { transform: none !important; }
  .teardown-flecha { animation: none; }
}

@media print {
  .site-header, .wa-float, .site-footer, .map-embed, .quote-form { display: none; }
  body { color: #000; background: #fff; }
}