/* ==========================================================================
   Once Once · Agencia de seguros
   Tres recursos: fotografía de gran formato, tipografía expresiva y 11:11.
   ========================================================================== */

/* Plus Jakarta Sans guardada con la página (licencia SIL OFL 1.1 en assets/fonts/):
   no hay que esperar a Google Fonts. Letra variable, pesos 400 a 800. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.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: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Letra de respaldo con las medidas de Plus Jakarta Sans: mientras llega la letra
   de Google se usa Arial ajustada, así el texto no cambia de tamaño ni mueve la página
   cuando termina de cargar. Medidas tomadas comparando las dos letras en el navegador. */
@font-face {
  font-family: 'Plus Jakarta respaldo';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  font-weight: 100 500;
  size-adjust: 103.6%; ascent-override: 100.4%; descent-override: 21.2%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Plus Jakarta respaldo';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  font-weight: 501 900;
  size-adjust: 99%; ascent-override: 105%; descent-override: 22.2%; line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* Color */
  --bg: #121413;            /* negro carbón */
  --band: #181a19;
  --surface: #1e2120;
  --line: rgba(var(--text-rgb), 0.12);
  --line-strong: rgba(var(--text-rgb), 0.22);
  --text: #f8f5ec;          /* blanco cálido */
  --text-2: #c4c2b8;
  --text-3: #96958c;
  --accent: #fadc1f;        /* amarillo del logotipo */
  --accent-hover: #ffe74f;
  --ink: #121413;
  --tile: #ecebe5;
  --tile-top: #f5f3eb;
  --tile-borde: transparent;
  /* Los mismos colores en RGB, para transparencias */
  --bg-rgb: 18, 20, 19;
  --text-rgb: 248, 245, 236;
  --band-rgb: 24, 26, 25;
  /* Color de la página (no cambia dentro de las zonas que siempre son oscuras) */
  --pagina: #121413;
  --pagina-rgb: 18, 20, 19;
  --accent-ink: #fadc1f;    /* amarillo para texto e íconos */
  --sombra: rgba(0, 0, 0, 0.8);
  --hl-color: var(--accent);
  --hl-bg: none;
  --nota: #e9dc95;
  --chip-bg: rgba(43, 39, 17, 0.92);
  color-scheme: dark;

  /* Tipografía */
  --display: 'Plus Jakarta Sans', 'Plus Jakarta respaldo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Plus Jakarta Sans', 'Plus Jakarta respaldo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Medidas */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --section-space: clamp(56px, 6vw, 96px);
  --radius: 32px;
  --header-h: 84px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Atmósferas de los espacios de foto (se reemplazan por fotografías) */
  --ph-familia: radial-gradient(75% 62% at 55% 34%, #d6a86d 0%, #8c6641 36%, #3b3025 70%, #1c1c19 100%);
  --ph-camino: linear-gradient(176deg, #aebdc0 0%, #829386 28%, #59664f 50%, #3d4038 68%, #1c1d1a 100%);
  --ph-hogar: radial-gradient(75% 62% at 34% 30%, #e4c38c 0%, #9b754a 36%, #403428 70%, #1d1c19 100%);
  --ph-mascota: radial-gradient(75% 62% at 55% 40%, #bcbe87 0%, #707849 38%, #353b29 72%, #1b1d18 100%);
  --ph-cierre: radial-gradient(75% 60% at 50% 30%, #ecba79 0%, #9e6c40 38%, #3c2d22 72%, #1c1b18 100%);
  --ph-asesor: radial-gradient(75% 62% at 50% 34%, #9c9d94 0%, #4b4c47 55%, #1e1f1d 100%);
}

/* --------------------------------------------------------------------------
   Modo claro: sigue la preferencia del sistema o del navegador
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :root:not(.tema-oscuro) {
    --bg: #f6f3ec;          /* crema claro */
    --band: #eeeae1;
    --surface: #e5e0d4;
    --line: rgba(23, 25, 23, 0.12);
    --line-strong: rgba(23, 25, 23, 0.2);
    --text: #171917;
    --text-2: #4a4b45;
    --text-3: #615f58;
    --tile: #ffffff;
    --tile-top: #ffffff;
    --tile-borde: rgba(23, 25, 23, 0.08);
    --bg-rgb: 246, 243, 236;
    --text-rgb: 23, 25, 23;
    --band-rgb: 238, 234, 225;
    --pagina: #f6f3ec;
    --pagina-rgb: 246, 243, 236;
    --accent-ink: #7a5e00;  /* el amarillo no se lee sobre claro: se usa un ocre (4,6:1 o más) */
    --sombra: rgba(60, 48, 20, 0.22);
    /* Palabra destacada: resaltador amarillo sobre el cuerpo de las letras */
    --hl-color: currentColor;
    --hl-bg: linear-gradient(100deg, rgba(250, 220, 31, 0) 0.4%, rgba(250, 220, 31, 0.92) 2.2%, rgba(250, 220, 31, 0.8) 50%, rgba(250, 220, 31, 0.92) 97.8%, rgba(250, 220, 31, 0) 99.6%);
    --hl-pad: 0.07em;
    --nota: #6f5600;
    --chip-bg: rgba(255, 247, 204, 0.96);
    color-scheme: light;
  }

  /* Zonas que siguen oscuras en modo claro: la portada con foto, el recorrido 3D
     (es de noche), la banda de Empresas y el encabezado mientras está sobre la portada */
  :root:not(.tema-oscuro) .hero,
  :root:not(.tema-oscuro) .recorrido,
  :root:not(.tema-oscuro) .emp__band,
  :root:not(.tema-oscuro) body:has(.hero):not(.menu-abierto) .site-header:not(.is-solid) {
    --bg: #121413;
    --band: #181a19;
    --surface: #1e2120;
    --line: rgba(var(--text-rgb), 0.12);
    --line-strong: rgba(var(--text-rgb), 0.22);
    --text: #f8f5ec;
    --text-2: #c4c2b8;
    --text-3: #96958c;
    --tile: #ecebe5;
    --tile-top: #f5f3eb;
    --tile-borde: transparent;
    --bg-rgb: 18, 20, 19;
    --text-rgb: 248, 245, 236;
    --band-rgb: 24, 26, 25;
    --accent-ink: #fadc1f;
    --sombra: rgba(0, 0, 0, 0.8);
    --hl-color: var(--accent);
    --hl-bg: none;
    --nota: #e9dc95;
    --chip-bg: rgba(43, 39, 17, 0.92);
    color: var(--text);
  }
  /* El texto del selector va sobre la foto, en computador y en celular */
  @media all {
    :root:not(.tema-oscuro) .sel__media,
    :root:not(.tema-oscuro) .sel__panels {
      --bg: #121413;
      --band: #181a19;
      --surface: #1e2120;
      --line: rgba(var(--text-rgb), 0.12);
      --line-strong: rgba(var(--text-rgb), 0.22);
      --text: #f8f5ec;
      --text-2: #c4c2b8;
      --text-3: #96958c;
      --tile: #ecebe5;
      --tile-top: #f5f3eb;
      --tile-borde: transparent;
      --bg-rgb: 18, 20, 19;
      --text-rgb: 248, 245, 236;
      --band-rgb: 24, 26, 25;
      --accent-ink: #fadc1f;
      --sombra: rgba(0, 0, 0, 0.8);
      --hl-color: var(--accent);
      --hl-bg: none;
      --nota: #e9dc95;
      --chip-bg: rgba(43, 39, 17, 0.92);
      color: var(--text);
    }
  }
}

/* Modo forzado para revisar: ?tema=claro u ?tema=oscuro en la dirección */

:root.tema-claro {
  --bg: #f6f3ec;          /* crema claro */
  --band: #eeeae1;
  --surface: #e5e0d4;
  --line: rgba(23, 25, 23, 0.12);
  --line-strong: rgba(23, 25, 23, 0.2);
  --text: #171917;
  --text-2: #4a4b45;
  --text-3: #615f58;
  --tile: #ffffff;
  --tile-top: #ffffff;
  --tile-borde: rgba(23, 25, 23, 0.08);
  --bg-rgb: 246, 243, 236;
  --text-rgb: 23, 25, 23;
  --band-rgb: 238, 234, 225;
  --pagina: #f6f3ec;
  --pagina-rgb: 246, 243, 236;
  --accent-ink: #7a5e00;  /* el amarillo no se lee sobre claro: se usa un ocre (4,6:1 o más) */
  --sombra: rgba(60, 48, 20, 0.22);
  /* Palabra destacada: resaltador amarillo sobre el cuerpo de las letras */
  --hl-color: currentColor;
  --hl-bg: linear-gradient(100deg, rgba(250, 220, 31, 0) 0.4%, rgba(250, 220, 31, 0.92) 2.2%, rgba(250, 220, 31, 0.8) 50%, rgba(250, 220, 31, 0.92) 97.8%, rgba(250, 220, 31, 0) 99.6%);
  --hl-pad: 0.07em;
  --nota: #6f5600;
  --chip-bg: rgba(255, 247, 204, 0.96);
  color-scheme: light;
}

/* Zonas que siguen oscuras en modo claro: la portada con foto, el recorrido 3D
   (es de noche), la banda de Empresas y el encabezado mientras está sobre la portada */
.tema-claro .hero,
.tema-claro .recorrido,
.tema-claro .emp__band,
.tema-claro body:has(.hero):not(.menu-abierto) .site-header:not(.is-solid) {
  --bg: #121413;
  --band: #181a19;
  --surface: #1e2120;
  --line: rgba(var(--text-rgb), 0.12);
  --line-strong: rgba(var(--text-rgb), 0.22);
  --text: #f8f5ec;
  --text-2: #c4c2b8;
  --text-3: #96958c;
  --tile: #ecebe5;
  --tile-top: #f5f3eb;
  --tile-borde: transparent;
  --bg-rgb: 18, 20, 19;
  --text-rgb: 248, 245, 236;
  --band-rgb: 24, 26, 25;
  --accent-ink: #fadc1f;
  --sombra: rgba(0, 0, 0, 0.8);
  --hl-color: var(--accent);
  --hl-bg: none;
  --nota: #e9dc95;
  --chip-bg: rgba(43, 39, 17, 0.92);
  color: var(--text);
}
/* El texto del selector va sobre la foto, en computador y en celular */
@media all {
  .tema-claro .sel__media,
  .tema-claro .sel__panels {
    --bg: #121413;
    --band: #181a19;
    --surface: #1e2120;
    --line: rgba(var(--text-rgb), 0.12);
    --line-strong: rgba(var(--text-rgb), 0.22);
    --text: #f8f5ec;
    --text-2: #c4c2b8;
    --text-3: #96958c;
    --tile: #ecebe5;
    --tile-top: #f5f3eb;
    --tile-borde: transparent;
    --bg-rgb: 18, 20, 19;
    --text-rgb: 248, 245, 236;
    --band-rgb: 24, 26, 25;
    --accent-ink: #fadc1f;
    --sombra: rgba(0, 0, 0, 0.8);
    --hl-color: var(--accent);
    --hl-bg: none;
    --nota: #e9dc95;
    --chip-bg: rgba(43, 39, 17, 0.92);
    color: var(--text);
  }
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
a, button { touch-action: manipulation; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2rem, 1rem + 3.1vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; }

/* Palabra destacada: amarilla en modo oscuro; en claro, con resaltador.
   La franja va del 48 % al 88 % del alto de la letra: cubre el cuerpo de las
   minúsculas y llega justo debajo de la línea base. */
.hl {
  color: var(--hl-color);
  background-image: var(--hl-bg);
  background-repeat: no-repeat;
  background-position: 0 80%;
  background-size: 100% 40%;
  padding-inline: var(--hl-pad, 0);
  margin-inline: calc(-1 * var(--hl-pad, 0px));
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* El resaltador se dibuja de izquierda a derecha cuando aparece el título */
.js [data-reveal] .hl,
.js [data-split] .hl { background-size: 0% 40%; transition: background-size 900ms var(--ease-out) 450ms; }
.js .is-in .hl { background-size: 100% 40%; }
.sin-revelado .hl,
.sin-movimiento .hl { background-size: 100% 40% !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .js .hl { background-size: 100% 40% !important; transition: none !important; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--ink); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: var(--accent); color: var(--ink); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.section { padding-block: var(--section-space); }
.section--band { background: var(--band); }

.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
  color: var(--text-2);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
}
.kicker::before { content: ''; width: 32px; height: 2px; border-radius: 2px; background: var(--accent); }
.kicker--light { color: var(--text); }
.kicker--tag {
  padding: 8px 16px 8px 14px; border: 1px solid rgba(250, 220, 31, 0.4); border-radius: 999px; color: var(--text);
}
.kicker--tag::before { width: 8px; height: 8px; border-radius: 50%; }

/* Botones y enlaces */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: var(--ink); }
@media (hover: hover) { .btn--primary:hover { background: var(--accent-hover); } }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 0.9375rem; }
.btn--lg { min-height: 58px; padding: 14px 28px; font-size: 1.0625rem; }
.btn--xl { min-height: 66px; padding: 18px 34px; font-size: 1.1875rem; }
.btn--block { width: 100%; }
.btn--ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.btn--ghost .icon { transition: transform 200ms var(--ease-out); }
@media (hover: hover) {
  .btn--ghost:hover { border-color: rgba(250, 220, 31, 0.6); background: rgba(var(--text-rgb), 0.04); }
  .btn--ghost:hover .icon { transform: translateX(4px); }
}
.nos__cta { margin-top: 32px; }

.link-wa {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--text); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(250, 220, 31, 0.6); text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  transition: text-decoration-color 150ms ease;
}
.link-wa .icon { color: var(--accent-ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  color: var(--text); font-weight: 600; text-decoration: none;
}
.link-arrow .icon { width: 1.2em; height: 1.2em; transition: transform 200ms var(--ease-out); }
@media (hover: hover) { .link-arrow:hover .icon { transform: translateX(4px); } }
@media (hover: hover) { .link-wa:hover { text-decoration-color: var(--accent); } }

/* --------------------------------------------------------------------------
   Fotografía y espacios reservados
   -------------------------------------------------------------------------- */

.media { position: relative; overflow: hidden; background: var(--surface); }
.media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}

.ph { position: absolute; inset: 0; background: var(--surface); }
.ph::after {
  content: ''; position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph--familia { background: var(--ph-familia); }
.ph--camino { background: var(--ph-camino); }
.ph--hogar { background: var(--ph-hogar); }
.ph--mascota { background: var(--ph-mascota); }
.ph--cierre { background: var(--ph-cierre); }
.ph--asesor { background: var(--ph-asesor); }

.ph__label {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  display: flex; gap: 10px; align-items: flex-start;
  max-width: min(400px, calc(100% - 32px));
  padding: 10px 14px;
  border: 1px dashed rgba(250, 220, 31, 0.55); border-radius: 14px;
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text-2); font-size: 0.8125rem; line-height: 1.45;
}
.ph__label .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }
.ph__label strong { color: var(--text); font-weight: 600; }

.ph__zona {
  position: absolute; left: 48%; right: 6%; top: 18%; bottom: 26%;
  border: 1.5px dashed rgba(var(--text-rgb), 0.4); border-radius: 28px;
}
.ph__zona span {
  position: absolute; top: 14px; left: 16px;
  color: rgba(var(--text-rgb), 0.75); font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Motivo 11:11 (recurso gráfico, no logotipo)
   -------------------------------------------------------------------------- */

.motif {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: proportional-nums;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--text-rgb), 0.42);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------------------------
   Encabezado sobre la imagen
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: background-color 280ms ease, border-color 280ms ease;
}
.site-header.is-solid,
.menu-abierto .site-header {
  background: rgba(var(--bg-rgb), 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; flex: none; border-radius: 8px; }
.brand img { width: 152px; }

.nav-desktop ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-desktop a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border-radius: 999px; color: var(--text); font-weight: 500; text-decoration: none;
  transition: background-color 150ms ease;
}
@media (hover: hover) { .nav-desktop a:hover { background: rgba(var(--text-rgb), 0.1); } }

.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(var(--text-rgb), 0.3); border-radius: 50%;
  background: rgba(var(--bg-rgb), 0.3); color: var(--text); cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded='true'] .icon--open { display: none; }
.menu-toggle[aria-expanded='true'] .icon--close { display: block; }

.mobile-menu { border-top: 1px solid var(--line); }
.mobile-menu nav { padding-block: 8px 20px; }
.mobile-menu ul { margin: 0 0 16px; padding: 0; list-style: none; }
.mobile-menu li + li { border-top: 1px solid var(--line); }
.mobile-menu a:not(.btn) {
  display: flex; align-items: center; min-height: 58px;
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu:not([hidden]) { animation: menu-in 220ms var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 899px) {
  :root { --header-h: 68px; }
  .nav-desktop { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand img { width: 126px; }
}
@media (min-width: 900px) { .mobile-menu { display: none !important; } }
/* Celulares angostos (320 px): logo, «Hablemos» y menú caben sin salirse */
@media (max-width: 379px) {
  .header-inner { gap: 12px; }
  .brand img { width: 108px; }
  .header-actions .btn--sm { padding-inline: 14px; }
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  height: 100svh; min-height: 500px; max-height: 1080px;
  /* De noche, con un brillo amarillo detrás del carro (se ve mientras carga) */
  background:
    radial-gradient(50% 55% at 68% 52%, rgba(250, 220, 31, 0.12), rgba(250, 220, 31, 0) 70%),
    radial-gradient(80% 70% at 70% 40%, #1d1f1e 0%, #121413 70%);
}
/* Grano fotográfico en las tres escenas 3D (portada, recorrido y banda de Empresas):
   ruido gris, quieto y muy tenue, encima del 3D y debajo de los textos. Suaviza los
   degradados oscuros, que en algunas pantallas se ven en escalones */
.hero::after,
.recorrido__stage::after,
.emp__band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.4; mix-blend-mode: soft-light;
}
.hero::after, .emp__band::after { z-index: -1; }

/* El carro en 3D aparece con un fundido cuando termina de cargar */
.hero__auto { position: absolute; inset: 0; z-index: -3; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms ease; }
.hero__auto.is-listo { opacity: 1; }
.hero__shade {
  /* Velo parejo sobre la animación: súbelo para oscurecerla más, bájalo para que se vea más */
  --velo: linear-gradient(rgba(var(--bg-rgb), 0.64), rgba(var(--bg-rgb), 0.64));
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0) 20%),
    linear-gradient(90deg, rgba(var(--bg-rgb), 0.8) 0%, rgba(var(--bg-rgb), 0.3) 34%, rgba(var(--bg-rgb), 0) 55%),
    linear-gradient(0deg, rgba(var(--bg-rgb), 0.65) 0%, rgba(var(--bg-rgb), 0) 30%),
    var(--velo);
}
.hero__content { position: relative; z-index: 1; padding-bottom: clamp(44px, 8vh, 104px); }
.hero__kicker { margin-bottom: clamp(16px, 2vw, 28px); }

.hero__title {
  font-size: clamp(2.9rem, min(0.5rem + 7.4vw, 15svh), 9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: initial;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__title .line > span { display: inline-block; }

.hero__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 40px; margin-top: clamp(24px, 3vw, 40px);
}
.hero__lead {
  max-width: 30ch; text-wrap: pretty;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.35;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.sin-movimiento) .hero__title .line > span { animation: rise 1s var(--ease-out) both; }
  html:not(.sin-movimiento) .hero__title .line:nth-child(2) > span { animation-delay: 0.1s; }
  html:not(.sin-movimiento) .hero__kicker,
  html:not(.sin-movimiento) .hero__row { animation: fade-up 0.9s var(--ease-out) 0.35s both; }
}
@keyframes rise { from { transform: translateY(104%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }

@media (max-width: 899px) {
  .hero { min-height: 540px; max-height: none; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0) 18%),
      linear-gradient(0deg, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.6) 34%, rgba(var(--bg-rgb), 0) 62%),
      var(--velo);
  }
  .hero__title { font-size: clamp(2.6rem, 0.6rem + 11vw, 5.6rem); }
}
@media (max-width: 479px) {
  .hero__row { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero__row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Recorrido: casa 3D que se construye al desplazarte
   -------------------------------------------------------------------------- */

.recorrido { position: relative; height: 520vh; background: var(--bg); }
.recorrido__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* Terminada la animación, la sección mide una pantalla y la escena queda completa */
.recorrido.is-terminado { height: 100svh; }
.recorrido__stage { position: absolute; inset: 0; }
.recorrido__canvas { display: block; width: 100%; height: 100%; }


.recorrido__copy {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* Arriba, bajo el encabezado: el texto aparece apenas termina la portada */
  padding-top: calc(var(--header-h) + clamp(28px, 7vh, 88px));
  pointer-events: none;
}
.recorrido__copy .kicker { margin-bottom: 32px; font-family: var(--body); font-size: 0.9375rem; font-weight: 500; font-variation-settings: normal; letter-spacing: 0.01em; }

.recorrido__steps { display: grid; max-width: min(40rem, 46vw); }
.recorrido__step {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(26px); visibility: hidden;
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out), visibility 0s linear 500ms;
}
.recorrido__step.is-active {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity 600ms var(--ease-out) 120ms, transform 800ms var(--ease-out) 120ms, visibility 0s;
}
.recorrido__num { display: block; margin-bottom: 16px; color: var(--accent); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.recorrido__step h3 {
  max-width: 11ch;
  font-size: clamp(2.5rem, 1rem + 3.9vw, 5.1rem); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.04em;
}
.recorrido__step p {
  max-width: 30ch; margin-top: 22px;
  color: var(--text); opacity: 0.88;
  font-size: clamp(1.1875rem, 0.95rem + 0.65vw, 1.5rem); font-weight: 500; line-height: 1.5;
}
.recorrido__step .btn { margin-top: 30px; }

.recorrido__progress { display: flex; gap: 8px; margin-top: 44px; }
.recorrido__progress span { position: relative; width: 40px; height: 3px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
.recorrido__progress span::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(var(--fill, 0)); transform-origin: left center;
}

/* Pantallas bajas: el texto de cada paso cabe completo, con su botón y la barra */
@media (min-width: 900px) and (max-height: 640px) {
  .recorrido__copy { padding-top: calc(var(--header-h) + 20px); }
  .recorrido__copy .kicker { margin-bottom: 16px; }
  .recorrido__num { margin-bottom: 10px; }
  .recorrido__step h3 { font-size: clamp(2.3rem, min(1rem + 3.9vw, 9vh), 5.1rem); }
  .recorrido__step p { margin-top: 14px; font-size: 1.125rem; }
  .recorrido__step .btn { margin-top: 20px; }
  .recorrido__progress { margin-top: 24px; }
}

@media (max-width: 899px) {
  .recorrido { height: 480vh; }
  .recorrido__copy {
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .recorrido__copy::before {
    content: ''; position: absolute; inset: 42% 0 0 0; z-index: -1;
    background: linear-gradient(0deg, rgba(var(--bg-rgb), 0.96) 30%, rgba(var(--bg-rgb), 0));
  }
  .recorrido__copy .kicker { margin-bottom: 18px; }
  .recorrido__steps { max-width: none; }
  .recorrido__step h3 { font-size: clamp(2.4rem, 1rem + 7.2vw, 3.6rem); }
  .recorrido__step p { margin-top: 12px; font-size: 1.125rem; }
  .recorrido__step .btn { width: 100%; margin-top: 22px; }
  .recorrido__progress { margin-top: 26px; }
}

/* Movimiento reducido: la casa terminada y las etapas como lista */
.recorrido.is-static,
.recorrido.sin-3d { height: auto; }
.recorrido.is-static .recorrido__sticky,
.recorrido.sin-3d .recorrido__sticky { position: relative; height: auto; overflow: visible; display: grid; }
.recorrido.is-static .recorrido__stage { position: relative; height: min(72svh, 680px); }
.recorrido.sin-3d .recorrido__stage { display: none; }
.recorrido.is-static .recorrido__copy,
.recorrido.sin-3d .recorrido__copy { height: auto; padding-block: 56px var(--section-space); pointer-events: auto; }
.recorrido.is-static .recorrido__copy::before,
.recorrido.sin-3d .recorrido__copy::before { display: none; }
.recorrido.is-static .recorrido__steps,
.recorrido.sin-3d .recorrido__steps { max-width: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 32px; }
.recorrido.is-static .recorrido__step,
.recorrido.sin-3d .recorrido__step { grid-area: auto; opacity: 1; transform: none; visibility: visible; transition: none; }
/* La frase del cierre es más larga: en celular va en dos líneas, un poco más pequeña,
   para que el texto no suba hasta la casa */
@media (max-width: 599px) {
  .recorrido__step h3.recorrido__cierre { max-width: none; font-size: min(2.2rem, 9.2vw); }
}
.recorrido.is-static .recorrido__step h3,
.recorrido.sin-3d .recorrido__step h3 { font-size: clamp(2rem, 1.2rem + 1.8vw, 2.8rem); }
.recorrido.is-static .recorrido__progress,
.recorrido.sin-3d .recorrido__progress { display: none; }

/* --------------------------------------------------------------------------
   Selector editorial de seguros
   -------------------------------------------------------------------------- */

.sel { padding-top: var(--section-space); padding-bottom: clamp(24px, 3vw, 44px); }

/* Alto útil de pantalla: ninguna pieza del selector pasa de aquí */
.sel { --sel-h: clamp(440px, calc(100svh - var(--header-h) - 64px), 780px); }

.sel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas:
    '.     media'
    'head  media'
    'tabs  media'
    '.     media';
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: clamp(40px, 7vw, 120px);
  min-height: var(--sel-h);
}
.sel__head { grid-area: head; }
.sel__head h2 { font-size: clamp(2rem, min(1.2rem + 2.2vw, 6.8vh), 3.4rem); max-width: 14ch; }

.sel__tabs {
  grid-area: tabs; align-self: start;
  display: flex; flex-direction: column;
  margin-top: clamp(24px, 4.5vh, 48px);
  border-top: 1px solid var(--line-strong);
}
.sel__tab {
  position: relative;
  display: flex; align-items: center; gap: 0.38em;
  width: 100%; padding: 0.28em 0;
  border: 0; border-bottom: 1px solid var(--line-strong);
  background: none; color: var(--text-3);
  font-family: var(--display);
  font-size: clamp(1.5rem, min(0.85rem + 2.1vw, 5.6vh), 2.9rem); font-weight: 600;
  line-height: 1.14; letter-spacing: -0.03em; text-align: left;
  cursor: pointer;
  transition: color 250ms ease;
}
.sel__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 600ms var(--ease-out);
}
.sel__num, .sel__dash {
  font-family: var(--body); font-size: max(0.34em, 0.875rem); font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sel__num { min-width: 1.6em; }
.sel__dash { opacity: 0.6; }
.sel__tab[aria-selected='true'] { color: var(--text); }
.sel__tab[aria-selected='true'] .sel__num { color: var(--accent-ink); }
.sel__tab[aria-selected='true']::after { transform: scaleX(1); }
@media (hover: hover) {
  .sel__tab:hover { color: var(--text-2); }
  .sel__tab[aria-selected='true']:hover { color: var(--text); }
}

/* La foto ocupa el alto de pantalla; título, texto y enlace van sobre ella */
.sel__media {
  grid-area: media;
  position: relative; align-self: start;
  height: var(--sel-h);
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
}
.sel__media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--bg-rgb), 0.9) 0%, rgba(var(--bg-rgb), 0.55) 30%, rgba(var(--bg-rgb), 0) 58%);
}
.sel__media .ph__label { max-width: calc(100% - 120px); }
.sel__photo {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity 700ms ease, transform 1400ms var(--ease-out);
}
.sel__photo.is-active { opacity: 1; transform: scale(1); }
.sel__count {
  position: absolute; right: 18px; top: 18px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(var(--bg-rgb), 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}
.sel__count span { color: var(--text); }

.sel__panels {
  grid-area: media; align-self: end;
  position: relative; z-index: 2;
  padding: clamp(24px, 3vw, 40px);
}
.sel__panel { max-width: 30rem; }
.sel__panel h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); }
.sel__panel p { margin-top: 10px; color: var(--text); opacity: 0.86; font-size: 1.0625rem; }
.sel__panel .link-wa { margin-top: 14px; }
.sel__panel:focus-visible { outline-offset: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.sin-movimiento) .sel__panel:not([hidden]) { animation: fade-up 520ms var(--ease-out) both; }
}

@media (max-width: 899px) {
  .sel__grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'tabs' 'media';
    grid-template-rows: auto;
    min-height: 0;
  }
  .sel__tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 24px; border-top: 0;
  }
  .sel__tab {
    min-height: 56px; padding: 10px 14px;
    border: 1px solid var(--line-strong); border-radius: 16px;
    font-size: 1.1875rem; letter-spacing: -0.015em;
  }
  .sel__tab::after { display: none; }
  .sel__num { font-size: 0.72em; min-width: 0; }
  .sel__dash { display: none; }
  .sel__tab[aria-selected='true'] { background: var(--surface); border-color: rgba(250, 220, 31, 0.6); }
  /* En celular el texto también va sobre la foto, justo bajo las pestañas: al tocar
     una, se ve cambiar la foto y el texto a la vez */
  .sel__media { margin-top: 16px; height: auto; aspect-ratio: 4 / 5; max-height: 64svh; width: 100%; border-radius: 24px; }
  .sel__media::after {
    background: linear-gradient(0deg, rgba(var(--bg-rgb), 0.95) 0%, rgba(var(--bg-rgb), 0.75) 40%, rgba(var(--bg-rgb), 0) 74%);
  }
  .sel__panels { grid-area: media; align-self: end; padding: 22px 20px; }
  .sel__panel h3 { font-size: 1.625rem; }
  .sel__panel p { margin-top: 8px; color: var(--text-2); opacity: 1; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Nosotros
   -------------------------------------------------------------------------- */

.nos { padding-top: clamp(28px, 3.5vw, 52px); padding-bottom: clamp(48px, 6vw, 96px); }
.nos__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.nos__grid:has(.nos__asesor:not([hidden])) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); }
/* Sin foto del asesor: la frase a la izquierda y el texto con el botón a la derecha */
.nos__grid:not(:has(.nos__asesor:not([hidden]))) .nos__copy {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 96px); align-items: end;
}
.nos__grid:not(:has(.nos__asesor:not([hidden]))) .nos__text { margin-top: 0; }

.nos__statement {
  max-width: 14ch;
  font-size: clamp(2rem, 1rem + 3vw, 4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.nos__text { max-width: 50ch; margin-top: 28px; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

.nos__principios {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin-top: clamp(48px, 6vw, 80px) !important;
}
.nos__principios li { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.nos__principios strong { font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.nos__principios span { color: var(--text-3); font-size: 0.9375rem; }

.nos__asesor { position: relative; aspect-ratio: 4 / 4.4; max-height: min(520px, calc(100svh - var(--header-h) - 48px)); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.nos__asesor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nos__asesor figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 20px;
  background: linear-gradient(0deg, rgba(var(--bg-rgb), 0.85), rgba(var(--bg-rgb), 0));
}
.nos__asesor figcaption strong { display: block; font-family: var(--display); font-size: 1.375rem; font-weight: 600; }
.nos__asesor figcaption span { color: var(--text-2); font-size: 0.9375rem; }

@media (max-width: 899px) {
  .nos__grid:has(.nos__asesor:not([hidden])) { grid-template-columns: 1fr; }
  .nos__grid:not(:has(.nos__asesor:not([hidden]))) .nos__copy { display: block; }
  .nos__grid:not(:has(.nos__asesor:not([hidden]))) .nos__text { margin-top: 28px; }
  .nos__asesor { max-width: 420px; }
}
@media (max-width: 599px) {
  .nos__principios { grid-template-columns: 1fr; gap: 0; }
  .nos__principios li { padding-block: 16px; }
}

/* --------------------------------------------------------------------------
   Empresas
   -------------------------------------------------------------------------- */

.emp__band {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  height: clamp(460px, 74vh, 780px);
}
/* Detrás del título, la maqueta 3D (assets/js/empresas.js); mientras carga, el fondo de noche */
.emp__band {
  background:
    radial-gradient(55% 60% at 70% 45%, rgba(250, 220, 31, 0.08), rgba(250, 220, 31, 0) 70%),
    radial-gradient(80% 75% at 70% 40%, #1d1f1e 0%, #121413 70%);
}
.emp__maqueta { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms ease; }
.emp__maqueta.is-listo { opacity: 1; }
/* Los bordes del 3D se difuminan (sobre todo abajo) para que la maqueta no quede
   cortada en seco contra el borde de la banda */
.emp__maqueta {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 97%), linear-gradient(90deg, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 97%), linear-gradient(90deg, #000 86%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 899px) {
  /* En celular la maqueta va arriba: se difumina antes de llegar al texto */
  .emp__maqueta {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 50%, transparent 72%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 50%, transparent 72%);
  }
}
.emp__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--pagina) 0%, rgba(var(--pagina-rgb), 0) 18%),
    linear-gradient(90deg, rgba(var(--bg-rgb), 0.8) 0%, rgba(var(--bg-rgb), 0.45) 36%, rgba(var(--bg-rgb), 0) 60%),
    radial-gradient(90% 85% at 0% 100%, rgba(var(--bg-rgb), 0.85) 0%, rgba(var(--bg-rgb), 0.45) 40%, rgba(var(--bg-rgb), 0) 72%),
    linear-gradient(0deg, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0) 34%);
}
.emp__heading { padding-bottom: clamp(40px, 6vw, 80px); }
.emp__heading h2 { max-width: 14ch; font-size: clamp(2.2rem, 1rem + 3.7vw, 4.9rem); letter-spacing: -0.035em; }
.emp__band .ph__label { left: auto; right: var(--edge); top: 24px; }

.emp__body { padding-top: clamp(32px, 4vw, 64px); padding-bottom: clamp(40px, 5vw, 80px); }
/* La introducción va en la banda, bajo el título */
.emp__intro { max-width: 46ch; margin-top: clamp(18px, 2vw, 28px); color: var(--text); opacity: 0.86; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }

.emp__list { border-bottom: 1px solid var(--line-strong); }
.emp__row {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: center; gap: 24px 40px;
  padding: 30px 0;
  border-top: 1px solid var(--line-strong);
  text-decoration: none;
}
.emp__num { color: var(--text-3); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.emp__name {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1rem + 1.05vw, 2.05rem); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.025em;
  transition: transform 450ms var(--ease-out);
}
.emp__desc { color: var(--text-2); font-size: 1rem; }
.emp__cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.emp__cta .icon { width: 18px; height: 18px; color: var(--accent-ink); transition: color 200ms ease; }
@media (hover: hover) {
  .emp__row:hover .emp__name { transform: translateX(10px); }
  .emp__row:hover .emp__cta { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .emp__row:hover .emp__cta .icon { color: var(--ink); }
}

@media (max-width: 699px) {
  /* En celular, la maqueta va arriba y el texto abajo, sobre la parte más oscura */
  .emp__band { height: auto; min-height: 660px; }
  .emp__shade {
    background:
      linear-gradient(180deg, var(--pagina) 0%, rgba(var(--pagina-rgb), 0) 12%),
      linear-gradient(0deg, rgba(var(--bg-rgb), 0.94) 0%, rgba(var(--bg-rgb), 0.75) 38%, rgba(var(--bg-rgb), 0) 62%);
  }
  .emp__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'num name' '. desc' '. cta';
    gap: 10px 14px; padding: 24px 0;
  }
  .emp__num { grid-area: num; padding-top: 0.5em; }
  .emp__name { grid-area: name; }
  .emp__desc { grid-area: desc; }
  .emp__cta { grid-area: cta; justify-self: start; margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   ARL
   -------------------------------------------------------------------------- */

/* Franja breve: sigue a la lista de Empresas sin un salto grande */
.arl { padding-top: clamp(16px, 2vw, 32px); }
.arl__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--band);
}
.arl__panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 120% at 100% 0%, rgba(250, 220, 31, 0.12), rgba(250, 220, 31, 0) 60%);
}
.arl__head .kicker--tag { margin-bottom: clamp(16px, 2vw, 24px); }
.arl__head h2 { max-width: 14ch; font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); }
.arl__copy > p { max-width: 42ch; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.arl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; }

@media (max-width: 899px) {
  .arl__panel { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 479px) {
  .arl__actions { flex-direction: column; align-items: stretch; }
  .arl__actions .btn { width: 100%; }
  .arl__actions .link-arrow { justify-content: center; }
}

.arl__logos { margin-top: clamp(32px, 4vw, 56px); padding-top: 32px; border-top: 1px solid var(--line-strong); }
.logos-label { margin-bottom: 20px; color: var(--text-2); font-family: var(--body); font-size: 0.9375rem; font-weight: 500; font-variation-settings: normal; letter-spacing: 0; }
.logo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: start; gap: 12px;
}

@media (max-width: 479px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Logos: aseguradoras y clientes
   -------------------------------------------------------------------------- */

.logos-sec { padding-block: clamp(48px, 5vw, 80px); }
.logos-sec--clientes { border-top: 1px solid var(--line); }
.logos-sec__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 64px; margin-bottom: clamp(28px, 3vw, 44px);
}
.logos-sec__head h2 { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.logos-sec__head p { max-width: 40ch; color: var(--text-2); }

.logo-tile {
  display: grid; place-items: center; flex: none;
  width: 216px; height: 104px; padding: 14px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--tile-top) 0%, var(--tile) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px var(--tile-borde), 0 14px 30px -18px var(--sombra);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.logo-grid .logo-tile { width: auto; }
.logo-tile img { width: auto; max-width: 100%; max-height: 54px; object-fit: contain; }
@media (hover: hover) {
  .marquee .logo-tile:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 2px rgba(250, 220, 31, 0.75), 0 22px 40px -18px rgba(0, 0, 0, 0.9);
  }
}

.marquee { position: relative; }
.marquee__viewport {
  position: relative; overflow: hidden;
  display: grid; gap: 14px; padding-block: 10px;
}
/* Foco de luz: a color en el centro, apagados hacia los bordes */
.marquee__viewport::before,
.marquee__viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: min(32%, 440px); pointer-events: none;
  /* Solo quita el color: el fondo es neutro y no cambia */
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
}
.marquee__viewport::before {
  left: 0;
  /* Mismo tono del fondo: atenúa los logos sin dibujar un recuadro */
  background: linear-gradient(90deg, var(--band) 0%, rgba(var(--band-rgb), 0.55) 30%);
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent);
  mask-image: linear-gradient(90deg, #000 30%, transparent);
}
.marquee__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--band) 0%, rgba(var(--band-rgb), 0.55) 30%);
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent);
  mask-image: linear-gradient(270deg, #000 30%, transparent);
}
.marquee__row { overflow: visible; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
/* .marquee delante para ganarle a ul[role='list']: todas las copias deben medir igual */
.marquee .marquee__group { display: flex; gap: 14px; margin: 0; padding: 0 14px 0 0; list-style: none; }

.marquee__controls {
  display: flex; justify-content: flex-end;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 20px auto 0; padding-inline: var(--gutter);
}
.marquee__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.marquee__toggle .icon { width: 18px; height: 18px; }
@media (hover: hover) { .marquee__toggle:hover { color: var(--text); border-color: rgba(var(--text-rgb), 0.4); } }

.marquee.is-static .marquee__viewport::before,
.marquee.is-static .marquee__viewport::after { display: none; }
.marquee.is-static .marquee__track { width: auto; }
.marquee.is-static .marquee__group { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 var(--gutter); }
.marquee.is-static .marquee__controls { display: none; }

@media (max-width: 599px) {
  .logo-tile { width: 156px; height: 84px; padding: 12px 14px; border-radius: 18px; }
  .logo-tile img { max-height: 46px; }
  .marquee__viewport { gap: 10px; }
  .marquee__viewport::before, .marquee__viewport::after { width: 22%; }
  .marquee .marquee__group { gap: 10px; padding-right: 10px; }
  .marquee.is-static .logo-tile { width: calc(50% - 5px); }
  .marquee__controls { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.cierre { padding-block: var(--section-space) 40px; overflow: hidden; }
.cierre__grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.cierre__title {
  max-width: 12ch;
  font-size: clamp(2.3rem, 0.9rem + 3.4vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.04em;
}
.cierre__lead { max-width: 38ch; margin-top: 22px; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.cierre__copy .btn { margin-top: 30px; }

.cierre__visual { position: relative; }
.cierre__media { aspect-ratio: 1 / 1; max-height: min(420px, calc(100svh - var(--header-h) - 64px)); border-radius: var(--radius); }
.motif--cierre {
  position: absolute; z-index: 2;
  left: 0; bottom: 8%;
  transform: translateX(-38%);
  font-size: clamp(3.6rem, 6.4vw, 8rem);
  -webkit-text-stroke-color: rgba(var(--text-rgb), 0.55);
}
/* Sobre la foto, el contorno fino se perdía: más marcado y con una sombra suave */
.cierre__media:has(img) + .motif--cierre {
  -webkit-text-stroke-color: rgba(246, 243, 236, 0.9);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* «ul.» para ganarle a ul[role='list'], que quitaba el espacio sobre los datos.
   En computador, el primero va pegado a la izquierda, el último a la derecha
   y el espacio entre ellos es parejo */
ul.cierre__datos {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px;
  margin-top: clamp(40px, 4vw, 64px); padding-top: 36px;
  border-top: 1px solid var(--line-strong);
}
.cierre__datos li { display: grid; gap: 4px; align-content: start; }
.dato__label { color: var(--text-3); font-size: 0.875rem; }
.dato__valor {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; text-decoration: none; overflow-wrap: anywhere;
}
.dato__nota { color: var(--text-3); font-size: 0.875rem; }
a.dato__valor { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; }
@media (hover: hover) { a.dato__valor:hover { text-decoration-color: var(--accent); } }

@media (max-width: 899px) {
  .cierre__grid { grid-template-columns: 1fr; }
  .cierre__visual { width: min(100%, 380px); margin-left: auto; }
  .motif--cierre { transform: translateX(-26%); font-size: 17vw; }
  ul.cierre__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .cierre__copy .btn { width: 100%; }
  ul.cierre__datos { grid-template-columns: 1fr; gap: 10px; }
  .cierre__visual { width: 86%; }
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 40px calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 0.9375rem;
}
.footer-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px 48px; }
.footer-brand { display: flex; align-items: center; gap: 20px; }
.footer-brand img { width: 120px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .footer-nav a:hover { color: var(--text); } }
/* Franja final: derechos a la izquierda y, en la portada, el crédito del modelo 3D a la derecha */
.footer-bottom {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 48px;
  padding-top: 24px; /* sin línea arriba: cruzaba la firma «once once» del fondo */
}
.footer-legal { margin: 0; font-size: 0.875rem; white-space: nowrap; }
/* Crédito del modelo 3D de la portada (lo pide su licencia) */
.footer-creditos { flex: 0 1 62ch; margin: 0; color: var(--text-3); font-size: 0.75rem; line-height: 1.6; text-align: right; text-wrap: pretty; }
.footer-creditos a { color: inherit; text-underline-offset: 3px; }
@media (hover: hover) { .footer-creditos a:hover { color: var(--text-2); } }

/* Firma al final: «once once» enorme en contorno fino, del ancho del contenido, de
   fondo detrás de los derechos y los créditos y cortada por el borde de abajo. Es
   decorativa (aria-hidden); la «e» en amarillo, como en el logotipo.
   La letra es variable y trae trazos internos superpuestos: el relleno va del color
   del fondo y se pinta encima del contorno (paint-order), así solo queda el contorno
   de afuera y la «e» no muestra líneas de más */
.site-footer { overflow: hidden; padding-bottom: 0; }
.footer-inner { position: relative; z-index: 1; }
.footer-firma {
  position: relative; z-index: 0;
  margin-top: -0.6em; margin-bottom: -0.05em;
  font-family: var(--display); font-weight: 500;
  font-size: calc(min(100vw - 2 * var(--gutter), var(--container)) / 4.72);
  line-height: 0.8; letter-spacing: -0.045em;
  white-space: nowrap; color: var(--bg);
  -webkit-text-stroke: 2px rgba(var(--text-rgb), 0.17);
  paint-order: stroke fill;
  pointer-events: none; user-select: none;
}
/* Amarillo en oscuro y ocre en claro (el amarillo no se ve sobre crema) */
.footer-firma__e { -webkit-text-stroke-color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }

@media (max-width: 899px) {
  .footer-inner { grid-template-columns: 1fr; justify-items: start; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-nav { justify-content: flex-start; gap: 0 20px; }
  .footer-bottom { justify-self: stretch; flex-direction: column; }
  .footer-creditos { flex-basis: auto; text-align: left; }
  /* En celular la firma va justo debajo de los créditos, sin taparlos: así el botón
     flotante de WhatsApp queda sobre la firma y no sobre los textos */
  .footer-firma { margin-top: 28px; }
}

/* --------------------------------------------------------------------------
   Revisión
   -------------------------------------------------------------------------- */

.solo-revision { display: none !important; }
.modo-revision .solo-revision { display: block !important; }
.modo-revision .ph__label.solo-revision { display: flex !important; }

.nota-revision {
  margin-bottom: 28px; padding: 12px 16px;
  border: 1px dashed rgba(250, 220, 31, 0.5); border-radius: 14px;
  color: var(--nota); font-size: 0.875rem;
}
.arl__logos .nota-revision { margin: 20px 0 0; }

.placeholder {
  border: 1.5px dashed rgba(250, 220, 31, 0.45) !important;
  background: transparent !important;
  color: var(--text-3); font-size: 0.875rem; text-align: center;
}

.revision-chip {
  position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 45;
  max-width: calc(100% - 100px);
  padding: 8px 14px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid rgba(250, 220, 31, 0.35);
  color: var(--nota); font-size: 0.8125rem; line-height: 1.3;
}

/* --------------------------------------------------------------------------
   WhatsApp flotante
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed; z-index: 40;
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.wa-float .icon { width: 26px; height: 26px; }
/* Brillo de una sola vez (main.js agrega «brilla»): un anillo amarillo que se abre y se desvanece */
.wa-float::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.wa-float.brilla::after { animation: wa-brillo 1.8s var(--ease-out) 1; }
@keyframes wa-brillo {
  from { box-shadow: 0 0 0 0 rgba(250, 220, 31, 0.55); }
  to { box-shadow: 0 0 0 18px rgba(250, 220, 31, 0); }
}
@media (prefers-reduced-motion: reduce) { .wa-float.brilla::after { animation: none; } }
.sin-movimiento .wa-float.brilla::after { animation: none; }
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.menu-abierto .wa-float.is-visible { opacity: 0; pointer-events: none; }
@media (hover: hover) { .wa-float:hover { background: var(--accent-hover); } }
@media (max-width: 599px) {
  .wa-float { width: 52px; height: 52px; }
  .wa-float .icon { width: 24px; height: 24px; }
}

/* ==========================================================================
   Página Nosotros: recorrido animado
   ========================================================================== */

.nav-desktop a[aria-current='page'] { background: rgba(var(--text-rgb), 0.1); }

/* Titulares que aparecen palabra por palabra */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.w__i {
  display: inline-block; transform: translateY(108%);
  transition: transform 950ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
[data-split].is-in .w__i { transform: none; }

/* Portada */
.ns-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 48px) 88px;
}
.ns-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 65% at 88% 86%, rgba(250, 220, 31, 0.1), rgba(250, 220, 31, 0) 62%),
    radial-gradient(45% 55% at 8% 8%, rgba(var(--text-rgb), 0.05), rgba(var(--text-rgb), 0) 70%);
}
.motif--ns {
  position: absolute; z-index: -1; right: var(--edge); bottom: -0.16em;
  font-size: clamp(6.5rem, 19vw, 21rem);
  -webkit-text-stroke-color: rgba(var(--text-rgb), 0.14);
}
.ns-hero__inner { position: relative; }
.ns-hero__title {
  max-width: 10ch;
  font-size: clamp(2.9rem, min(0.7rem + 6.6vw, 14vh), 8rem);
  line-height: 1.02; letter-spacing: -0.04em;
  text-wrap: initial;
}
.ns-hero__rot {
  margin-top: clamp(24px, 3vw, 44px);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.5rem); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text-2);
}
.rot { display: inline-grid; vertical-align: bottom; overflow: hidden; color: var(--accent-ink); }
.rot__item {
  grid-area: 1 / 1; white-space: nowrap;
  transform: translateY(110%); opacity: 0;
  transition: transform 550ms var(--ease-out), opacity 350ms ease;
}
.rot__item.is-on { transform: none; opacity: 1; }
.rot__item.is-out { transform: translateY(-110%); opacity: 0; }
.rot--static { display: inline; }

.ns-hero__cue {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(48px, 8vh, 96px);
  color: var(--text-3); font-size: 0.875rem;
}
.ns-hero__line { width: 1px; height: 44px; background: linear-gradient(var(--accent), rgba(250, 220, 31, 0)); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.sin-movimiento) .ns-hero__line { animation: cue 2.4s ease-in-out infinite; }
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 1; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Manifiesto: palabras que se encienden */
.ns-manifiesto { padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.ns-manifiesto__text {
  max-width: 26ch;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.5rem); line-height: 1.18; letter-spacing: -0.025em;
}
/* Las palabras pendientes van en el gris del sitio (contraste de 4,5:1 o más, se leen
   antes de bajar) y se encienden al color del texto cuando llegas a ellas */
.hw { color: var(--text-3); transition: color 450ms ease; }
.hw.on { color: var(--text); }

/* Cómo trabajamos: encabezado arriba y cuatro pasos en fila */
.ns-proceso { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.ns-proceso__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 64px;
}
.ns-proceso__head h2 { max-width: 14ch; }
.ns-proceso__intro { max-width: 36ch; color: var(--text-2); font-size: 1.125rem; }

.ns-pasos {
  --gap: clamp(24px, 3vw, 40px);
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  margin-top: clamp(40px, 5vw, 72px) !important;
}
/* Línea que une los cuatro números: se dibuja al desplazarte */
.ns-pasos::before,
.ns-pasos::after {
  content: ''; position: absolute; top: 28px; height: 1px;
  left: 28px; right: calc((100% - 3 * var(--gap)) / 4 - 28px);
  background: var(--line-strong);
}
.ns-pasos::after { background: var(--accent); transform: scaleX(var(--prog, 0)); transform-origin: left center; }
.ns-paso { position: relative; }
.ns-paso__num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 56px; height: 56px;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg);
  color: var(--accent-ink); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ns-paso h3 { margin-top: 24px; font-size: clamp(1.4rem, 1.05rem + 1.05vw, 2.1rem); letter-spacing: -0.025em; }
.ns-paso p { max-width: 32ch; margin-top: 10px; color: var(--text-2); }

@media (max-width: 899px) {
  .ns-pasos { grid-template-columns: 1fr; gap: 36px; }
  .ns-pasos::before,
  .ns-pasos::after { top: 28px; bottom: 28px; left: 27px; right: auto; width: 1px; height: auto; }
  .ns-pasos::after { transform: scaleY(var(--prog, 0)); transform-origin: top center; }
  .ns-paso { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start; }
  .ns-paso h3 { margin-top: 0; padding-top: 10px; }
}

/* Principios: palabras que se tachan al aparecer */
.ns-principios { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.ns-principios__head h2 { max-width: 22ch; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.ns-sin { margin-top: clamp(24px, 4vw, 48px) !important; border-top: 1px solid var(--line-strong); }
.ns-sin__row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px 64px; align-items: center;
  padding-block: clamp(16px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line-strong);
}
.ns-sin__word {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 1rem + 2.8vw, 4rem); line-height: 1.05; letter-spacing: -0.035em;
}
.ns-sin__word s {
  position: relative; display: inline-block;
  text-decoration: none; color: var(--text-3);
}
/* La línea tacha la palabra y esta se apaga: «esto aquí no va» */
.ns-sin__word s::after {
  content: ''; position: absolute; left: -0.04em; right: -0.04em; top: 52%;
  height: 0.075em; border-radius: 0.04em; background: var(--accent);
  transform-origin: left center;
}
.js .ns-sin__word s { color: var(--text); transition: color 700ms ease 650ms; }
.js .ns-sin__word s::after { transform: scaleX(0); transition: transform 900ms var(--ease-out) 300ms; }
.js .ns-sin__row.is-in .ns-sin__word s { color: var(--text-3); }
.js .ns-sin__row.is-in .ns-sin__word s::after { transform: scaleX(1); }
.sin-revelado .ns-sin__word s { color: var(--text-3) !important; }
.sin-revelado .ns-sin__word s::after { transform: scaleX(1) !important; }
.ns-sin__text { max-width: 38ch; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

/* Medellín: la palabra se rellena al desplazarte */
.ns-ciudad { padding-block: var(--section-space); overflow: hidden; border-top: 1px solid var(--line); }
.ns-ciudad__word {
  position: relative; width: max-content; max-width: 100%;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(4rem, 0.5rem + 19vw, 19rem); line-height: 0.95; letter-spacing: -0.05em;
  white-space: nowrap;
}
.ns-ciudad__outline { color: transparent; -webkit-text-stroke: 1.5px rgba(var(--text-rgb), 0.35); }
.ns-ciudad__solid {
  position: absolute; inset: 0; color: var(--text);
  clip-path: inset(0 calc(100% - var(--fill, 0) * 100%) 0 0);
}
.ns-ciudad__copy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 64px; align-items: end; margin-top: clamp(32px, 4vw, 56px);
}
.ns-ciudad__title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.ns-ciudad__copy p { max-width: 40ch; color: var(--text-2); font-size: 1.125rem; }

/* Quién te asesora (solo con foto real) */
.ns-asesor { padding-top: var(--section-space); }
.ns-asesor__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ns-asesor .nos__asesor { max-width: 440px; width: 100%; }

/* Cierre */
.ns-cierre { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.ns-cierre__inner { display: grid; justify-items: center; text-align: center; }
.ns-cierre__title {
  font-size: clamp(3.4rem, 1rem + 8.6vw, 9.5rem);
  line-height: 1; letter-spacing: -0.045em;
}
.ns-cierre__lead { max-width: 36ch; margin-top: 28px; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
.ns-cierre__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; margin-top: 40px; }

@media (max-width: 899px) {
  .ns-ciudad__copy, .ns-asesor__grid { grid-template-columns: 1fr; }
  .ns-sin__row { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .ns-cierre__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .ns-cierre__actions .btn { width: 100%; }
  .ns-cierre__actions .link-arrow { justify-content: center; }
}

/* ==========================================================================
   Página ARL
   ========================================================================== */

.ar-hero .kicker--tag { margin-bottom: clamp(20px, 3vw, 32px); }
.ar-hero__title { max-width: 12ch; }
/* «ARL» en contorno, de fondo */
.ar-hero__marca {
  position: absolute; z-index: -1; right: var(--edge); bottom: -0.1em;
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(8rem, 28vw, 28rem); line-height: 0.8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--text-rgb), 0.1);
  pointer-events: none; user-select: none;
}
.ar-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(32px, 4vw, 48px); }

.ar-sec { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.ar-head h2 { max-width: 18ch; }
.ar-head__intro { max-width: 52ch; margin-top: 20px; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

/* Qué es: tres tarjetas */
.ar-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px) !important; }
.ar-card {
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--line); border-radius: 24px; background: var(--band);
}
@media (hover: hover) { .ar-card { transition: border-color 300ms ease, opacity 700ms var(--ease-out), transform 900ms var(--ease-out); } .ar-card:hover { border-color: rgba(250, 220, 31, 0.45); } }
.ar-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(250, 220, 31, 0.12); color: var(--accent-ink); }
.ar-card__icon .icon { width: 26px; height: 26px; }
.ar-card h3 { margin-top: 22px; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); }
.ar-card p { margin-top: 10px; color: var(--text-2); }

/* Quién debe estar afiliado: filas con etiqueta */
.ar-filas { margin-top: clamp(28px, 4vw, 48px) !important; border-top: 1px solid var(--line-strong); }
.ar-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1.1fr);
  gap: 12px 40px; align-items: center;
  padding-block: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line-strong);
}
.ar-fila h3 { font-size: clamp(1.3rem, 1rem + 1vw, 2rem); }
.ar-fila p { color: var(--text-2); }
.ar-tag {
  justify-self: start; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text-2); font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.ar-tag--si { border-color: var(--accent); background: var(--accent); color: var(--ink); }

/* Niveles de riesgo: barras que suben al aparecer y se pueden elegir */
.ar-niveles__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
/* Sección compacta: título más corto y barras más bajas */
.ar-niveles h2 { max-width: 16ch; font-size: clamp(1.75rem, 1rem + 2vw, 2.9rem); }
.ar-niveles .ar-head__intro { margin-top: 14px; font-size: 1rem; }
.ar-niveles__ui { display: grid; gap: 14px; }
.ar-barras {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px);
  align-items: end; height: clamp(130px, 15vw, 190px);
}
.ar-barra {
  position: relative; overflow: hidden;
  height: calc(var(--h, 1) * 100%); min-height: 46px;
  display: flex; align-items: flex-end; justify-content: center; padding: 0 0 10px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: transparent; color: var(--text-2); font: inherit; cursor: pointer;
  transition: border-color 250ms ease, color 250ms ease;
}
.ar-barra__fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--text-rgb), 0.14), rgba(var(--text-rgb), 0.03));
  transition: background-color 300ms ease;
}
.ar-barra__num { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem); }
.ar-barra[aria-pressed='true'] { border-color: var(--accent); color: var(--ink); }
.ar-barra[aria-pressed='true'] .ar-barra__fill { background: var(--accent); }
@media (hover: hover) {
  .ar-barra:hover { border-color: rgba(250, 220, 31, 0.6); color: var(--text); }
  .ar-barra[aria-pressed='true']:hover { color: var(--ink); }
}
.ar-barra:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.js .ar-barras .ar-barra {
  clip-path: inset(100% 0 0 0 round 14px);
  transition: clip-path 900ms var(--ease-out) calc(var(--i, 0) * 90ms), border-color 250ms ease, color 250ms ease;
}
.js .ar-barras.is-in .ar-barra { clip-path: inset(0 0 0 0 round 14px); }
.ar-niveles__lista { display: grid; gap: 12px; }
.ar-nivel { padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--band); }
.ar-nivel__tag { color: var(--accent-ink); font-size: 0.875rem; font-weight: 700; }
.ar-nivel p + p { margin-top: 4px; font-size: 1rem; }
.is-interactivo .ar-nivel:not([hidden]) { animation: fade-up 450ms var(--ease-out) both; }
.ar-niveles__nota { color: var(--text-3); font-size: 0.875rem; }

/* Preguntas frecuentes */
.ar-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ar-faq__lista { border-top: 1px solid var(--line-strong); }
.ar-q { border-bottom: 1px solid var(--line-strong); }
.ar-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.015em;
}
.ar-q summary::-webkit-details-marker { display: none; }
.ar-q summary .icon { flex: none; width: 22px; height: 22px; color: var(--accent-ink); transition: transform 300ms var(--ease-out); }
.ar-q[open] summary .icon { transform: rotate(45deg); }
.ar-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.ar-q__body { padding-bottom: 22px; }
.ar-q__body p { max-width: 56ch; color: var(--text-2); }
.ar-q[open] .ar-q__body { animation: fade-up 400ms var(--ease-out) both; }

@media (max-width: 899px) {
  .ar-cards { grid-template-columns: 1fr; }
  .ar-fila { grid-template-columns: 1fr; }
  .ar-niveles__grid, .ar-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .ar-hero__actions { flex-direction: column; align-items: stretch; }
  .ar-hero__actions .btn { width: 100%; }
  .ar-hero__actions .link-arrow { justify-content: center; }
}

/* ARL sin movimiento: barras completas y respuestas sin animación */
@media (prefers-reduced-motion: reduce) {
  .js .ar-barras .ar-barra { clip-path: none !important; transition: none !important; }
  .ar-nivel, .ar-q__body { animation: none !important; }
}
.sin-movimiento .ar-barra, .sin-revelado .ar-barra { clip-path: none !important; }
.sin-movimiento .ar-nivel, .sin-movimiento .ar-q__body { animation: none !important; }

/* Sin movimiento: todo visible, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .w__i { transform: none !important; transition: none !important; }
  .hw { color: var(--text) !important; }
  .ns-sin__word s, .ns-sin__word s::after { transition: none !important; }
}
.sin-movimiento .w__i { transform: none !important; transition: none !important; }
.sin-movimiento .hw { color: var(--text) !important; }
.sin-movimiento .ns-sin__word s, .sin-movimiento .ns-sin__word s::after { transition: none !important; }

/* --------------------------------------------------------------------------
   Revelados al entrar en pantalla
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='media'] { transform: none; transition: opacity 900ms ease; }
.js [data-reveal='media'] > * { transform: scale(1.07); transition: transform 1600ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal='media'].is-in > * { transform: none; }

.sin-revelado [data-reveal],
.sin-movimiento [data-reveal],
.sin-movimiento [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sel__photo { transition: opacity 200ms linear; transform: none !important; }
  .hero__title .line > span, .hero__kicker, .hero__row { animation: none !important; }
}
.sin-movimiento .sel__photo { transition: opacity 200ms linear; transform: none !important; }

/* --------------------------------------------------------------------------
   Página 404
   -------------------------------------------------------------------------- */

.pg-404 {
  display: grid; align-content: center; gap: clamp(40px, 8vh, 88px);
  min-height: 100svh; padding-block: 40px;
}
.pg-404 .brand img { width: 140px; }
.pg-404 h1 { max-width: 14ch; margin-top: 18px; font-size: clamp(2.4rem, 1rem + 4vw, 4.8rem); line-height: 1.02; letter-spacing: -0.04em; }
.pg-404__copy > p:not(.kicker) { max-width: 40ch; margin-top: 18px; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.pg-404__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }