/* ============================================================
   KALVORA · estilos
   Capas: reset → tokens → base → components → utilities
   El bloque marcado como "critical:start" ... "critical:end" se
   copia inline en <head> con tools/prerender.mjs (hero + cabecera).
   ============================================================ */

/* critical:start */
@layer reset, tokens, base, components, utilities;

/* Universo Kalvora · tipografía: Cormorant Garamond (titulares), IBM Plex Sans (texto), IBM Plex Mono (etiquetas) */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  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: 'Cormorant Garamond';
  src: url('../fonts/cormorant-italic-var.woff2') format('woff2');
  font-weight: 300 600; font-style: italic; font-display: swap;
  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: 'IBM Plex Sans';
  src: url('../fonts/plexsans-var.woff2') format('woff2');
  font-weight: 300 600; font-display: swap;
  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: 'IBM Plex Mono';
  src: url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
/* Respaldos con métricas ajustadas para que no salte el texto al llegar la fuente */
@font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'), local('Times New Roman'); ascent-override: 98%; descent-override: 30%; line-gap-override: 0%; size-adjust: 84%; }
@font-face { font-family: 'Plex Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'); ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; size-adjust: 101%; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  img, svg, canvas { display: block; max-width: 100%; }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
}

@layer tokens {
  :root {
    /* Paleta de marca: solo estos cuatro tonos y sus transparencias */
    --negro: #050505;
    --cromo: #E8EAEC;
    --plata: #BFC3C7;
    --gunmetal: #7C8288;
    --vacio: var(--capa-fondo);
    /* Capas de color: de lo más hondo a lo más cercano (misma paleta, más profundidad) */
    --capa-fondo: #050505;
    --capa-tarjeta: #0D0E0F;
    --capa-elevada: #16171A;
    --capa-tarjeta-v: rgba(13, 14, 15, .86);
    --capa-elevada-v: rgba(22, 23, 26, .92);
    --borde-suave: rgba(232, 234, 236, .10);
    --borde-metal: rgba(232, 234, 236, .22);
    --superficie: rgba(232, 234, 236, .035);
    --superficie-2: rgba(232, 234, 236, .06);
    --borde: rgba(232, 234, 236, .11);
    --borde-fuerte: rgba(232, 234, 236, .24);
    --brillo: rgba(232, 234, 236, .06);
    --metal: linear-gradient(180deg, #FFFFFF 0%, var(--cromo) 38%, var(--plata) 62%, var(--gunmetal) 100%);
    --metal-boton: linear-gradient(180deg, #F6F7F8 0%, var(--cromo) 45%, var(--plata) 100%);

    --f-titulo: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
    --f-cuerpo: 'IBM Plex Sans', 'Plex Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
    --header-h: 72px;
    --radio: 20px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-suave: cubic-bezier(.16, 1, .3, 1);
    --contenedor: 1200px;
    color-scheme: dark;
  }
}

@layer base {
  html {
    background: var(--vacio);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
  }
  body {
    min-height: 100vh;
    background: radial-gradient(ellipse 90% 60% at 70% 0%, rgba(232, 234, 236, .06), transparent 60%), var(--vacio);
    background-attachment: fixed;
    color: var(--cromo);
    font-family: var(--f-cuerpo);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }
  ::selection { background: var(--plata); color: var(--negro); }
  :focus-visible { outline: 1px solid var(--cromo); outline-offset: 4px; }
  a { color: var(--cromo); text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .container { width: min(100% - 32px, var(--contenedor)); margin-inline: auto; }
}

@layer components {
  .skip {
    position: absolute; left: 16px; top: -100px; z-index: 300;
    padding: 12px 16px; background: var(--cromo); color: var(--negro); border-radius: 8px; font-weight: 600;
  }
  .skip:focus { top: 12px; }

  /* ---------- Pantalla de carga (pequeña y liviana: la K real con un brillo y una línea) ---------- */
  .intro { display: none; }
  .js .intro {
    position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; align-content: center; gap: 22px;
    background: radial-gradient(circle at 50% 46%, var(--capa-tarjeta), var(--vacio) 45%);
    transition: opacity .7s var(--ease-suave), visibility 0s .7s;
  }
  .js.sin-intro .intro, .js.cargado .intro { opacity: 0; visibility: hidden; pointer-events: none; }
  .intro__k { position: relative; width: 76px; filter: drop-shadow(0 0 18px rgba(232, 234, 236, .25)); }
  .intro__k img { width: 100%; height: auto; }
  .intro__k::after {
    content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
    -webkit-mask: url('../brand/k-3d-520.webp') center / contain no-repeat; mask: url('../brand/k-3d-520.webp') center / contain no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  }
  .intro__barra { width: 96px; height: 1px; background: rgba(232, 234, 236, .12); overflow: hidden; }
  .intro__barra i { display: block; height: 100%; width: 100%; background: var(--cromo); transform: scaleX(0); transform-origin: left; }
  @media (prefers-reduced-motion: no-preference) {
    .js .intro__k { animation: kentra .9s var(--ease-suave) both; }
    .js .intro__k::after { animation: kbrillo 1.4s ease-in-out .3s both; }
    .js .intro__barra i { animation: cargar 1.1s var(--ease-suave) forwards; }
  }
  @keyframes kentra { from { opacity: 0; transform: scale(.85); filter: blur(6px); } }
  @keyframes girar { to { transform: rotate(360deg); } }
  @keyframes cargar { to { transform: scaleX(1); } }

  /* ---------- Cabecera ---------- */
  .header {
    position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
    transition: background-color .4s var(--ease), border-color .4s var(--ease);
    border-bottom: 1px solid transparent;
  }
  .header.is-scrolled { background: rgba(5, 5, 5, .92); border-color: var(--borde); }
  @supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
    .header.is-scrolled { background: rgba(5, 5, 5, .6); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
  }
  .header__inner { height: 100%; display: flex; align-items: center; gap: var(--s5); }
  .logo {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--f-mono); font-weight: 500; font-size: .8125rem; letter-spacing: .42em;
    color: var(--cromo); text-decoration: none; margin-right: auto; padding-block: 10px;
  }
  .k-mark { flex: none; height: 24px; width: auto; }
  .nav { display: none; }
  .nav__list { display: flex; gap: var(--s1); list-style: none; padding: 0; }
  .nav__link {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px;
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--plata); text-decoration: none; border-radius: 999px; transition: color .25s, background-color .25s;
  }
  .nav__link:hover { color: var(--cromo); background: var(--brillo); }
  @media (min-width: 1000px) { .nav { display: block; } }

  /* ---------- Botones ---------- */
  .btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 12px 26px; border-radius: 999px;
    font-family: var(--f-cuerpo); font-weight: 500; font-size: .98rem; letter-spacing: .01em; line-height: 1.2; text-align: center;
    text-decoration: none; border: 1px solid transparent;
    transition: transform .2s var(--ease), background-color .25s, border-color .25s, box-shadow .35s;
  }
  .btn:active { transform: scale(.98); }
  .btn--primary {
    background: var(--metal-boton); color: var(--negro);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(124, 130, 136, .5), 0 0 0 1px rgba(232, 234, 236, .25), 0 10px 40px -10px rgba(232, 234, 236, .35);
  }
  .btn--primary:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(124, 130, 136, .5), 0 0 0 1px rgba(232, 234, 236, .4), 0 14px 50px -8px rgba(232, 234, 236, .5); }
  .btn--primary::after {
    content: ''; position: absolute; inset: -20% auto -20% 0; width: 40%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9), transparent);
    transform: translateX(-160%) skewX(-18deg); transition: transform .8s var(--ease);
  }
  .btn--primary:hover::after { transform: translateX(360%) skewX(-18deg); }
  .btn--secondary { background: rgba(232, 234, 236, .03); border-color: var(--borde-fuerte); color: var(--cromo); }
  .btn--secondary:hover { background: var(--brillo); border-color: var(--plata); }
  .btn--xl { min-height: 58px; padding: 14px 34px; font-size: 1.03rem; }
  .btn--sm { min-height: 44px; padding: 10px 20px; font-size: .9rem; }
  .header__cta { white-space: nowrap; }

  /* ---------- Tipografía ---------- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--f-mono); font-weight: 400; font-size: .72rem; line-height: 1.5;
    text-transform: uppercase; letter-spacing: .22em; color: var(--plata);
  }
  .eyebrow::before { content: ''; flex: none; width: 28px; height: 1px; background: linear-gradient(90deg, var(--cromo), transparent); }
  .h1 {
    font-family: var(--f-titulo); font-weight: 300;
    font-size: clamp(2.5rem, 5.2vw + .5rem, 5.6rem); letter-spacing: .005em; line-height: .98;
    text-transform: uppercase; text-wrap: balance;
    background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .h1__b {
    display: block; margin-top: .14em;
    font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0;
    font-size: .72em; line-height: 1.05; color: var(--plata); -webkit-text-fill-color: var(--plata);
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    padding-block: calc(var(--header-h) + 32px) var(--s9);
    overflow: hidden;
  }
  .hero__inner { position: relative; z-index: 1; }
  .hero .h1 { max-width: 15ch; padding-right: .08em; }
  .hero .eyebrow { margin-bottom: var(--s6); }
  .hero__sub { max-width: 46ch; margin-top: var(--s6); color: var(--plata); font-weight: 300; font-size: clamp(1.0625rem, .5vw + .95rem, 1.25rem); line-height: 1.6; }
  .hero__actions { max-width: none; margin-top: var(--s7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .hero__micro { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: var(--gunmetal); }
  .hero__chips { list-style: none; padding: 0; margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); max-width: none; }
  .chip { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--plata); }
  .chip .icon { width: 15px; height: 15px; color: var(--cromo); }
  .hero__alt {
    display: inline-flex; align-items: center; gap: 6px; max-width: none; min-height: 44px; margin-top: var(--s5);
    color: var(--plata); font-size: .9rem;
  }
  .hero__alt:hover { color: var(--cromo); }
  /* ---------- La K realista (imagen cromada con profundidad) ---------- */
  .kreal { position: relative; width: var(--kw, 420px); aspect-ratio: 846 / 762; pointer-events: none; perspective: 1100px; }
  .kreal__halo {
    position: absolute; inset: -28%; border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 234, 236, .15), rgba(232, 234, 236, .04) 36%, transparent 62%);
  }
  .kreal__orbita { position: absolute; left: -22%; width: 144%; top: 36%; height: auto; overflow: visible; transform: rotate(-14deg); }
  .kreal__orbita ellipse { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .kreal__orbita .o1 { stroke: rgba(232, 234, 236, .16); stroke-dasharray: 2 9; }
  .kreal__orbita .o2 { stroke: rgba(232, 234, 236, .85); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 70 1200; }
  .kreal__flota { position: absolute; inset: 0; perspective: 1100px; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .85)) drop-shadow(0 0 34px rgba(232, 234, 236, .14)); }
  .kreal__cuerpo {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(var(--krx, 0deg)) rotateY(calc(var(--kry, 0deg) + var(--ks, 0deg)));
    transition: transform .7s var(--ease-suave);
  }
  .kreal__cuerpo img { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* Grosor: copias de la K apiladas hacia atrás (app.js), para que al girar se vea el canto de metal */
  .kreal__capa { transform: translateZ(calc(var(--z, 0) * -1px)); filter: brightness(var(--b, .5)); }
  .kreal__brillo {
    position: absolute; inset: 0; mix-blend-mode: screen;
    -webkit-mask: url('../brand/k-3d-520.webp') center / contain no-repeat; mask: url('../brand/k-3d-520.webp') center / contain no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 49%, transparent 60%) 160% 0 / 260% 100% no-repeat;
    transform: translateZ(1px);
  }
  /* Onda de luz que sale de la K cuando termina de aparecer */
  .kreal--hero::before {
    content: ''; position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(232, 234, 236, .7); box-shadow: 0 0 24px rgba(232, 234, 236, .35), inset 0 0 24px rgba(232, 234, 236, .2);
    translate: -50% -50%; scale: .5; opacity: 0; pointer-events: none;
  }
  .kreal__reflejo {
    position: absolute; left: 0; right: 0; top: 99%; height: 42%; overflow: hidden; opacity: .22; transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%);
  }
  .kreal__reflejo img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; filter: blur(1.5px); }
  .kreal::after {
    content: ''; position: absolute; left: 14%; right: 14%; top: 97%; height: 9%; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(232, 234, 236, .28), transparent 70%); filter: blur(6px);
  }
  .kreal--hero { position: absolute; z-index: 0; right: max(4vw, 24px); top: 50%; translate: 0 -46%; --kw: min(34vw, 500px); }
  @media (prefers-reduced-motion: no-preference) {
    .kreal__flota { animation: kflota 7s ease-in-out infinite; }
    .kreal__halo { animation: kpulso 6s ease-in-out infinite; }
    .kreal__brillo { animation: kbrillo 7s ease-in-out 2s infinite; }
    .kreal__orbita .o2 { animation: korbita 9s linear infinite; }
    .js:not(.cargado):not(.sin-intro) .kreal--hero { opacity: 0; scale: .9; filter: blur(8px); }
    .js .kreal--hero { transition: opacity 1.6s var(--ease-suave) .2s, scale 1.6s var(--ease-suave) .2s, filter 1.6s var(--ease-suave) .2s; }
    .js:not(.cargado):not(.sin-intro) .kreal--hero { animation: mostrar-seguro 0s 4.5s forwards; }
    @media (max-width: 899px) {
      .kreal--final .kreal__cuerpo { animation: kbalanceo 10s ease-in-out infinite; }
    }
  }
  @keyframes kflota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
  @keyframes kpulso { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
  @keyframes kbrillo { 0% { background-position: 160% 0; } 45%, 100% { background-position: -70% 0; } }
  @keyframes korbita { to { stroke-dashoffset: -1270; } }
  @keyframes kgiro { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
  @keyframes konda { 0% { opacity: .9; scale: .5; } 100% { opacity: 0; scale: 1.55; } }
  @keyframes kbalanceo { 0%, 100% { transform: rotateY(0deg) rotateX(0deg); } 25% { transform: rotateY(-10deg) rotateX(3deg); } 75% { transform: rotateY(10deg) rotateX(-3deg); } }
  /* Horizonte de planeta: un arco de luz al pie del hero */
  .hero::after {
    content: ''; position: absolute; z-index: 0; left: 50%; bottom: -78vw; width: 160vw; height: 90vw; transform: translateX(-50%);
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(232, 234, 236, .10), rgba(232, 234, 236, .02) 18%, transparent 40%);
    box-shadow: 0 -1px 0 rgba(232, 234, 236, .22), 0 -18px 60px -20px rgba(232, 234, 236, .25);
  }
  .hero__halo {
    position: absolute; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px;
    border-radius: 50%; pointer-events: none; opacity: 0; z-index: 0;
    background: radial-gradient(circle, rgba(232, 234, 236, .08), transparent 65%);
    transition: opacity .5s;
  }
  .hero.has-halo .hero__halo { opacity: 1; }
  /* Entrada del hero cuando termina la pantalla de carga */
  @media (prefers-reduced-motion: no-preference) {
    .js:not(.cargado):not(.sin-intro) .hero__inner > * { opacity: 0; transform: translateY(28px); filter: blur(6px); }
    .js .hero__inner > * { transition: opacity 1.1s var(--ease-suave), transform 1.1s var(--ease-suave), filter 1.1s var(--ease-suave); }
    .js .hero__inner > :nth-child(2) { transition-delay: .08s; }
    .js .hero__inner > :nth-child(3) { transition-delay: .18s; }
    .js .hero__inner > :nth-child(4) { transition-delay: .28s; }
    /* Red de seguridad: si el JavaScript no llega, todo se muestra igual a los 4,5 s */
    .js:not(.cargado):not(.sin-intro) .hero__inner > * { animation: mostrar-seguro 0s 4.5s forwards; }
  }
  .js:not(.cargado):not(.sin-intro) .intro { animation: ocultar-seguro 0s 4.5s forwards; }
  @keyframes mostrar-seguro { to { opacity: 1; transform: none; filter: none; } }
  @keyframes ocultar-seguro { to { opacity: 0; visibility: hidden; } }
  /* ---------- Entrada "salto desde el hiperespacio": cada vez que alguien entra ----------
     Las estrellas llegan como rayos (starfield.js), la página viene desde el fondo del espacio
     y la K da una vuelta completa. Es una sola vez y dura menos de 2 s, por eso corre siempre. */
  .js.warp:not(.warp-on) .hero, .js.warp:not(.warp-on) .header { opacity: 0; animation: mostrar-seguro 0s 3.5s forwards; }
  .js.warp-on .hero { animation: warp-hero 1.9s cubic-bezier(.16, 1, .3, 1) both; transform-origin: 50% 35%; }
  .js.warp-on .header { animation: warp-header 1s cubic-bezier(.16, 1, .3, 1) .75s both; }
  .js.warp-on .kreal--hero .kreal__cuerpo, .js.warp-on .kreal--hero .kreal__reflejo img { animation: kgiro 1.6s cubic-bezier(.65, 0, .35, 1) .55s backwards; }
  .js.warp-on .kreal--hero::before { animation: konda 1.3s ease-out 1.9s forwards; }
  /* Celular: después de la vuelta, la K queda balanceándose suave */
  @media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
    .js.warp-on .kreal--hero .kreal__cuerpo { animation: kgiro 1.6s cubic-bezier(.65, 0, .35, 1) .55s backwards, kbalanceo 10s ease-in-out 2.4s infinite; }
  }
  @keyframes warp-hero {
    0% { opacity: 0; transform: perspective(1000px) translateZ(-900px) rotateX(24deg); filter: blur(16px) brightness(1.8); }
    35% { opacity: 1; }
    70% { filter: blur(0) brightness(1.12); }
    100% { opacity: 1; transform: none; filter: none; }
  }
  @keyframes warp-header { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
  .icon { flex: none; width: 24px; height: 24px; }
  .icon--sm { width: 18px; height: 18px; }
  .icon--lg { width: 32px; height: 32px; }
  @media (max-width: 767px) {
    :root { --header-h: 64px; }
    .header__cta { padding-inline: 16px; }
    .hero { align-items: flex-start; padding-top: calc(var(--header-h) + 28px); }
    .hero .eyebrow { margin-bottom: var(--s5); }
    .hero__sub { margin-top: var(--s5); }
    .hero__actions { margin-top: var(--s6); }
    .hero::after { bottom: -150vw; width: 260vw; height: 170vw; }
  }
  /* Celular y tablet: la K arriba, en el flujo, antes del titular */
  @media (max-width: 899px) {
    .hero { flex-direction: column; }
    .kreal--hero { position: relative; right: auto; top: auto; translate: none; align-self: center; --kw: min(58vw, 300px); margin-bottom: calc(var(--kw) * .3); }
  }
  @media (min-width: 900px) and (max-width: 1199px) {
    .kreal--hero { --kw: 28vw; top: 56%; }
  }
  @media (min-width: 900px) {
    .hero__actions { flex-direction: row; align-items: center; gap: var(--s5); }
  }
}

@layer utilities {
  .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;
  }
}
/* Sin capa a propósito: el fondo espacial gana aunque el visor ponga su propio fondo claro */
html:root { background: var(--capa-fondo); color-scheme: dark; }
html body { background: transparent; color: #E8EAEC; }
html:not(.stars-on) body { background: var(--capa-fondo); }
/* critical:end */

/* ============================================================
   Resto de componentes (no críticos)
   ============================================================ */
@layer base {
  html.stars-on body { background: transparent; } /* el fondo negro es el del html; así se ven las estrellas y la K 3D */
  .stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
  .nebula {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 80% 50% at 75% 10%, rgba(232, 234, 236, .06), transparent 60%),
      radial-gradient(ellipse 60% 40% at 10% 70%, rgba(124, 130, 136, .07), transparent 60%);
  }
  /* Estrellas de respaldo sin JS (un patrón liviano) */
  .nebula::before {
    content: ''; position: absolute; inset: 0; opacity: .55;
    background-image:
      radial-gradient(1px 1px at 20px 30px, var(--plata), transparent 60%),
      radial-gradient(1px 1px at 140px 90px, var(--gunmetal), transparent 60%),
      radial-gradient(1.5px 1.5px at 90px 170px, var(--cromo), transparent 60%),
      radial-gradient(1px 1px at 210px 220px, var(--gunmetal), transparent 60%);
    background-size: 260px 260px;
  }
  html.stars-on .nebula::before { display: none; }
}

@layer components {
  /* Secciones */
  .section { position: relative; padding-block: clamp(80px, 12vw, 168px); }
  /* Las secciones fuera de pantalla no se maquetan hasta acercarse: carga inicial más liviana */
  .section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  .section__head { max-width: 65ch; margin-bottom: var(--s7); }
  .section__head .eyebrow { margin-bottom: var(--s4); }
  .h2 {
    font-family: var(--f-titulo); font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw + 1rem, 3rem); line-height: 1.12; letter-spacing: -.015em;
    text-wrap: balance;
  }
  .h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.005em; }
  .lead { margin-top: var(--s4); color: var(--plata); font-size: 1.125rem; max-width: 60ch; }
  .center { display: flex; justify-content: center; margin-top: var(--s6); }
  .demos__cta, .planes__cta, .final__cta { flex-wrap: wrap; gap: var(--s3) var(--s4); }
  .planes__cierre { margin-top: var(--s7); text-align: center; color: var(--plata); font-size: 1.0625rem; }
  .link { color: var(--cromo); }
  .link-arrow {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding-top: var(--s3);
    color: var(--cromo); font-weight: 500; text-decoration: none;
  }
  .link-arrow:hover { text-decoration: underline; }
  .btn-text {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px;
    background: none; border: 0; color: var(--plata); text-decoration: underline; text-underline-offset: 3px;
  }
  .btn-text:hover { color: var(--cromo); }

  /* Tarjetas con brillo superior */
  .card {
    position: relative; isolation: isolate; background-color: var(--superficie);
    background-image: radial-gradient(120% 70% at 50% 0%, var(--brillo), transparent 60%);
    border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--s5);
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }
  /* Brillo que sigue al cursor (mismo lenguaje del halo del hero), solo con mouse real */
  @media (hover: hover) and (pointer: fine) {
    .card::after {
      content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
      background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 234, 236, .10), transparent 65%);
      opacity: 0; transition: opacity .35s;
    }
    .card:hover::after { opacity: 1; }
    .card:hover { border-color: var(--plata); }
  }
  /* Borde metálico cromo → gunmetal vía mask */
  .metal { border-color: transparent; }
  .metal::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(145deg, rgba(232, 234, 236, .55), rgba(124, 130, 136, .15) 45%, rgba(124, 130, 136, .35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .metal--strong::before { background: linear-gradient(160deg, var(--cromo), var(--gunmetal) 55%, var(--plata)); }

  .badge {
    display: inline-block; width: fit-content; padding: 4px 12px; border-radius: 999px;
    background: linear-gradient(180deg, var(--cromo), var(--plata)); color: var(--negro);
    font-family: var(--f-mono); font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  }
  

  /* Precios */
  
  .nota-aparte {
    display: flex; gap: 8px; align-items: flex-start; margin-top: var(--s3);
    padding: 10px 12px; border-radius: 10px; background: rgba(232, 234, 236, .04); border: 1px solid var(--borde);
    color: var(--plata); font-size: .9375rem; line-height: 1.45;
  }
  .nota-aparte .icon { margin-top: 1px; color: var(--cromo); }
  .checks { list-style: none; padding: 0; display: grid; gap: var(--s3); }
  .checks li { display: flex; gap: 10px; align-items: flex-start; }
  .checks .icon { margin-top: 3px; color: var(--cromo); }
  .checks--no .icon { color: var(--gunmetal); }

  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  

  .eyebrow--tag { display: inline-block; padding: 4px 10px; border: 1px solid var(--plata); border-radius: 6px; color: var(--cromo); }
  
  
  
  
  
  
  
  

  /* Demo con JS: línea de tiempo + escenario fijo (sin saltos de diseño) */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Maquetas de la demo (todo CSS/SVG, sin fotos) */
  .mock { width: min(100%, 300px); font-size: .9375rem; }
  
  
  
  
  
  
  
  
  .mock-phone { width: 200px; padding: 10px; border-radius: 30px; border: 1.5px solid var(--plata); background: var(--capa-tarjeta); }
  .mock-phone__screen { border-radius: 22px; padding: 18px 14px; background: linear-gradient(180deg, var(--capa-elevada), var(--capa-tarjeta)); min-height: 290px; display: flex; flex-direction: column; }
  .mock-phone__brand { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--plata); }
  .mock-phone__h { font-family: var(--f-titulo); font-weight: 700; font-size: 1.125rem; margin-top: 6px; }
  .mock-phone__menu { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 10px; font-size: .8125rem; }
  .mock-phone__menu li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
  .sk { display: block; width: 34px; height: 8px; border-radius: 4px; background: var(--gunmetal); opacity: .6; }
  .mock-phone__btn { margin-top: auto; padding: 10px; border-radius: 10px; background: var(--cromo); color: var(--negro); text-align: center; font-weight: 600; }
  
  
  .bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.4; }
  .bubble--in { align-self: flex-start; background: var(--capa-elevada); border-bottom-left-radius: 4px; }
  .bubble--out { align-self: flex-end; background: var(--cromo); color: var(--negro); border-bottom-right-radius: 4px; }
  
  
  
  
  
  

  /* 6) Método */
  .metodo__list { list-style: none; padding: 0; display: grid; gap: var(--s6); counter-reset: paso; }
  .metodo__item { position: relative; padding-top: var(--s5); border-top: 1px solid var(--borde); }
  .metodo__item p { margin-top: var(--s2); color: var(--plata); }
  .metodo__n { display: block; margin-bottom: var(--s3); font-family: var(--f-mono); font-size: 1.5rem; color: var(--plata); }
  .metodo__nota { display: flex; gap: 10px; align-items: center; margin-top: var(--s7); font-weight: 600; font-size: 1.0625rem; }
  @media (min-width: 900px) { .metodo__list { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }

  /* 7) Planes */
  .planes__grid { list-style: none; padding: 0; display: grid; gap: var(--s5); align-items: stretch; }
  .plan { display: flex; flex-direction: column; padding: var(--s6) var(--s5); transition: transform .3s var(--ease), border-color .3s; }
  .plan:hover { transform: translateY(-4px); transition-delay: 0s; }
  .plan .badge { margin-bottom: var(--s3); }
  .plan__nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.75rem; line-height: 1.1; }
  .plan__para { margin-top: var(--s2); color: var(--plata); min-height: 3.2em; }
  .plan__inc { margin: var(--s5) 0 var(--s3); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--plata); }
  .plan__cta { margin-top: auto; width: 100%; }
  .plan__regalo {
    display: flex; gap: 8px; align-items: flex-start; margin-top: var(--s3);
    padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--plata);
    color: var(--cromo); font-size: .875rem; line-height: 1.4;
  }
  .plan__regalo .icon { flex: none; margin-top: 1px; color: var(--plata); }
  .plan--destacado { background-color: var(--capa-elevada-v); background-image: radial-gradient(120% 60% at 50% 0%, rgba(232, 234, 236, .12), transparent 60%); }
  @media (max-width: 899px) { .plan--destacado { order: -1; } }
  @media (min-width: 900px) {
    .planes__grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* Burbujas flotantes: los planes "flotan" sobre el fondo espacial */
  .section--space { position: relative; }
  .section--space::before {
    content: ''; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(232, 234, 236, .06), transparent 70%);
  }
  .bubble { border-radius: 28px; }
  .bubble::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 60% at 30% 0%, rgba(232, 234, 236, .07), transparent 55%);
  }

  /* ---------- Personaliza tu plan ---------- */
  .personaliza { padding: clamp(20px, 4vw, 40px); }
  .personaliza__opciones { display: flex; flex-wrap: wrap; gap: var(--s4); }
  .chip-opt {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; min-height: 48px;
    background: rgba(232, 234, 236, .03); border: 1px solid var(--borde); border-radius: 14px;
    text-align: left; color: var(--plata); transition: border-color .2s, background-color .2s;
    flex: 1 1 240px; max-width: 100%;
  }
  .chip-opt .icon { flex: none; margin-top: 2px; color: var(--gunmetal); transition: color .2s; }
  .chip-opt__texto { display: flex; flex-direction: column; gap: 2px; }
  .chip-opt__texto strong { color: var(--cromo); font-size: .9375rem; }
  .chip-opt__texto small { color: var(--gunmetal); font-size: .8125rem; }
  .chip-opt:hover { border-color: var(--plata); }
  .chip-opt[aria-pressed='true'] { border-color: var(--cromo); background: rgba(232, 234, 236, .08); }
  .chip-opt[aria-pressed='true'] .icon { color: var(--cromo); }
  .personaliza__resultado { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--borde); }
  .personaliza__vacio { color: var(--plata); }
  .personaliza__preview .checks { margin-top: var(--s3); }
  .personaliza__acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); align-items: center; }
  .personaliza__sincal { color: var(--gunmetal); font-size: .875rem; }
  [data-personaliza-wa][aria-disabled='true'] { opacity: .5; pointer-events: none; }

  
  
  

  
  
  
  
  
  

  
  
  
  
  
  
  
  
  .promesas { display: grid; gap: var(--s4); }
  @media (min-width: 760px) { .promesas { grid-template-columns: 1fr 1fr; } }
  .promesa { padding: var(--s6) var(--s5); }
  .promesa .checks { margin-top: var(--s4); }
  .promesa--no { background-image: none; }

  /* 10) Preguntas */
  .faq { display: grid; gap: var(--s3); max-width: 860px; }
  .faq__item { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
  .faq__item summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
    min-height: 56px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none;
  }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__item summary::after {
    content: ''; flex: none; width: 12px; height: 12px; margin-right: 4px;
    border-right: 1.5px solid var(--plata); border-bottom: 1.5px solid var(--plata);
    transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease);
  }
  .faq__item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
  .faq__item p { padding: 0 18px 18px; color: var(--plata); max-width: 65ch; }
  .max-inline { margin-top: var(--s5); }
  @media (min-width: 769px) { .max-inline { display: none; } }

  /* 11) CTA final */
  .final { text-align: center; }
  .final .container { display: flex; flex-direction: column; align-items: center; }
  .final__titulo { max-width: 22ch; }
  .final .lead { margin-inline: auto; }
  .final__cta { margin-top: var(--s6); display: flex; justify-content: center; }
  .lead-form { margin-top: var(--s5); width: min(100%, 520px); text-align: left; }
  .lead-form__toggle {
    display: flex; justify-content: center; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
    color: var(--plata); text-decoration: underline; text-underline-offset: 3px; text-align: center;
  }
  .lead-form__toggle::-webkit-details-marker { display: none; }
  .lead-form__toggle:hover { color: var(--cromo); }
  .lead-form__form { margin-top: var(--s4); padding: var(--s5); display: grid; gap: var(--s4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
  .field { display: grid; gap: 6px; }
  .field label { font-weight: 600; font-size: .9375rem; }
  .field input[type='text'], .field input[type='tel'], .field select {
    width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px;
    background: var(--negro); border: 1px solid rgba(232, 234, 236, .28); color: var(--cromo); font-size: 1rem;
  }
  .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--plata) 50%), linear-gradient(135deg, var(--plata) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
  .field__tel { display: flex; align-items: stretch; }
  .field__tel span { display: grid; place-items: center; padding-inline: 12px; border: 1px solid rgba(232, 234, 236, .28); border-right: 0; border-radius: 10px 0 0 10px; color: var(--plata); }
  .field__tel input[type='tel'] { border-radius: 0 10px 10px 0; }
  .field__help { color: var(--plata); font-size: .875rem; }
  .field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
  .field--check input { width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--cromo); }
  .field--check label { font-weight: 400; color: var(--plata); line-height: 1.5; }
  .field [aria-invalid='true'] { border-color: var(--cromo); border-width: 2px; }
  .lead-form__status:empty { display: none; }
  .lead-form__status { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--plata); }
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* 12) Footer */
  .footer { padding-block: var(--s8) var(--s9); border-top: 1px solid var(--borde); color: var(--plata); font-size: .9375rem; }
  .footer__inner { display: grid; gap: var(--s5); }
  .footer .logo { display: inline-block; margin-bottom: var(--s2); }
  .footer__legal { margin-top: var(--s2); }
  .footer__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
  .footer__links a, .footer__links span { display: inline-flex; align-items: center; min-height: 48px; color: var(--plata); }
  .footer__links .btn-text { padding-inline: 0; }
  .footer__copy { color: var(--gunmetal); }

  /* Flotantes */
  .wa-float {
    position: fixed; z-index: 40; right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom) + var(--banner-h, 0px));
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(180deg, var(--cromo), var(--plata)); color: var(--negro);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 234, 236, .3);
    transition: transform .3s var(--ease), opacity .3s;
  }
  .wa-float.is-hidden { transform: translateY(24px) scale(.8); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .3s var(--ease), opacity .3s, visibility 0s .3s; }
  /* Botón de Max: píldora con avatar brillante, borde plateado y un brillo que respira */
  .max-fab {
    position: fixed; z-index: 40; right: 24px; bottom: calc(24px + var(--banner-h, 0px));
    display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 22px 8px 8px; border-radius: 999px;
    color: var(--cromo); font-weight: 600; letter-spacing: .01em; cursor: pointer;
    border: 1px solid rgba(232, 234, 236, .38);
    background: linear-gradient(135deg, rgba(26, 28, 31, .96), rgba(10, 11, 12, .96));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 24px rgba(232, 234, 236, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform .25s var(--ease), border-color .25s var(--ease), bottom .3s var(--ease);
  }
  .max-fab:hover { transform: translateY(-3px); border-color: rgba(232, 234, 236, .7); }
  .max-fab:active { transform: translateY(0) scale(.97); }
  .max-fab__spark {
    position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff, var(--cromo) 45%, var(--plata)); color: #0d0e0f;
    box-shadow: 0 0 18px rgba(232, 234, 236, .35);
  }
  .max-fab__spark .icon, .max-teaser__avatar .icon { width: 22px; height: 22px; stroke-width: 2.2; }
  /* Puntito verde: "Max está en línea" */
  .max-fab__spark::after {
    content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
    background: #3ddc84; box-shadow: 0 0 0 2px #0d0e0f, 0 0 10px rgba(61, 220, 132, .75);
  }
  /* Anillo que respira detrás del avatar, para llamar la atención al entrar */
  .max-fab__spark::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--plata); opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .max-fab { animation: maxEntra .8s var(--ease) backwards, maxGlow 3.8s ease-in-out 1s infinite; }
    .max-fab.is-nuevo .max-fab__spark::before { animation: maxRespira 2.6s ease-out 3; }
    .max-teaser.is-visible .max-teaser__msg { animation: maxPop .6s var(--ease) backwards; }
  }
  @keyframes maxRespira {
    0% { transform: scale(.7); opacity: .9; }
    100% { transform: scale(1.7); opacity: 0; }
  }
  @keyframes maxEntra {
    from { opacity: 0; transform: translateY(18px) scale(.9); }
    to { opacity: 1; transform: none; }
  }
  @keyframes maxGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 20px rgba(232, 234, 236, .08), inset 0 1px 0 rgba(255, 255, 255, .08); }
    50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 40px rgba(232, 234, 236, .28), inset 0 1px 0 rgba(255, 255, 255, .08); }
  }
  @keyframes maxPop {
    0% { transform: translateY(8px) scale(.94); }
    60% { transform: translateY(-2px) scale(1.01); }
    100% { transform: none; }
  }

  /* Saludo de Max: aparece solo al entrar, como un mensaje de chat */
  .max-teaser {
    position: fixed; z-index: 39; right: 24px; bottom: calc(92px + var(--banner-h, 0px));
    max-width: 310px; display: flex; align-items: flex-start; gap: 6px;
    opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none;
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
    visibility: hidden;
  }
  .max-teaser.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .max-teaser__msg {
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left;
    padding: 12px 16px 12px 12px; border-radius: 20px 20px 4px 20px;
    background: linear-gradient(135deg, rgba(26, 28, 31, .97), rgba(11, 12, 13, .97)); border: 1px solid rgba(232, 234, 236, .24);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 30px rgba(232, 234, 236, .08);
    color: var(--cromo); text-decoration: none;
  }
  .max-teaser__avatar {
    grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff, var(--cromo) 45%, var(--plata)); color: #0d0e0f;
    box-shadow: 0 0 16px rgba(232, 234, 236, .3);
  }
  .max-teaser__msg strong { font-family: var(--f-titulo); font-size: 1.0625rem; line-height: 1.2; }
  .max-teaser__msg span:not(.max-teaser__avatar) { color: var(--plata); font-size: .8125rem; line-height: 1.4; }
  .max-teaser__close {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center; margin-top: 2px;
    border-radius: 50%; background: rgba(13, 14, 15, .96); border: 1px solid var(--borde); color: var(--plata); font-size: .9375rem;
  }
  .max-teaser__close:hover { color: var(--cromo); }
  /* Celular: Max va como círculo encima del botón de WhatsApp, y el saludo sale encima de los dos */
  @media (max-width: 768px) {
    html { scroll-padding-bottom: 88px; }
    .max-fab {
      right: calc(16px + env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom) + var(--banner-h, 0px));
      padding: 8px; gap: 0; min-height: 0;
    }
    .max-fab > span:last-child { display: none; }
    .max-teaser { right: 16px; left: 16px; max-width: none; justify-content: flex-end; bottom: calc(152px + env(safe-area-inset-bottom) + var(--banner-h, 0px)); }
  }
  @media (min-width: 769px) {
    .wa-float { display: none; }
  }
  .max-open .max-fab, .max-open .wa-float, .max-open .max-teaser { visibility: hidden; }

  /* Banner de cookies */
  .consent {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: 960px; margin-inline: auto; padding: 12px 14px;
    display: grid; gap: 10px; align-items: center;
    background: rgba(13, 14, 15, .97); border: 1px solid var(--borde); border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6); font-size: .875rem; line-height: 1.45; color: var(--plata);
  }
  .consent a { color: var(--cromo); }
  .consent__acciones { display: flex; gap: 8px; align-items: center; }
  .consent__acciones .btn { flex: 1 1 0; padding-inline: 10px; white-space: nowrap; font-size: .875rem; }
  @media (min-width: 760px) { .consent { grid-template-columns: 1fr auto; } .consent__acciones .btn { flex: none; } }

  /* Panel de Max */
  .max-panel {
    position: fixed; z-index: 70; right: 16px; bottom: 16px; left: 16px;
    max-width: 400px; margin-left: auto; max-height: min(620px, calc(100svh - 32px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--capa-tarjeta); border: 1px solid var(--borde); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
  }
  .max-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--borde); }
  .max-panel__head h2 { font-family: var(--f-titulo); font-size: 1rem; font-weight: 600; }
  .max-panel__close { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; color: var(--cromo); }
  .max-panel__close:hover { background: var(--brillo); }
  .max-panel__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; overscroll-behavior: contain; }
  .max-panel__aviso { padding: 14px; border-radius: 12px; border: 1px solid var(--plata); color: var(--cromo); font-size: .9375rem; }
  .max-panel__aviso .btn { margin-top: 12px; width: 100%; }
  .max-panel__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--borde); }
  .max-panel__form input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; border-radius: 10px; background: var(--negro); border: 1px solid rgba(232, 234, 236, .28); color: var(--cromo); font-size: 1rem; }
  .max-panel .bubble { max-width: 90%; }
  .max-panel .bubble--pensando { color: var(--plata); font-style: italic; background: transparent; border: 1px dashed var(--borde); }

  /* Aparición al hacer scroll: solo opacity y transform */
  @media (prefers-reduced-motion: no-preference) {
    .js .section [data-reveal] {
      transition: opacity .5s var(--ease), transform .5s var(--ease);
      transition-delay: calc(var(--i, 0) * 60ms);
    }
    .js .section:not(.is-visible) [data-reveal] { opacity: 0; transform: translateY(16px); }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    /* La entrada "salto desde el hiperespacio" (una sola vez, menos de 2 s) queda por fuera de este freno */
    :not(.hero, .header, .kreal__cuerpo, .kreal__reflejo img), :not(.kreal--hero)::before, *::after {
      animation-duration: 1ms !important; animation-iteration-count: 1 !important;
      transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
  }
}

/* Atributo hidden siempre gana sobre display de componentes */
@layer components {
  .max-panel[hidden], .max-panel__form[hidden], .btn-text[hidden] { display: none; }
}

/* ============================================================
   Landing de restaurantes (Día 3): secciones nuevas, K en 3D y toques futuristas.
   Solo grises: #050505, #E8EAEC, #BFC3C7, #7C8288.
   ============================================================ */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

@layer components {
  /* ---------- Lo que vemos ---------- */
  .vemos { display: grid; gap: var(--s7); align-items: center; }
  .vemos__texto { max-width: 62ch; }
  .vemos__texto .eyebrow { margin-bottom: var(--s4); }
  .vemos__puntos { list-style: none; padding: 0; margin-top: var(--s6); display: grid; gap: 0; }
  .vemos__puntos li {
    display: flex; gap: var(--s4); align-items: baseline; padding-block: var(--s4);
    border-top: 1px solid var(--borde); font-size: 1.0625rem;
  }
  .vemos__puntos li:last-child { border-bottom: 1px solid var(--borde); }
  .vemos__puntos span { font-family: var(--f-mono); font-size: .875rem; color: var(--gunmetal); }
  .vemos__cierre {
    margin-top: var(--s6); max-width: 26ch;
    font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.375rem, 2vw + 1rem, 2rem); line-height: 1.25;
  }

  /* ---------- Sistema: las 4 piezas ---------- */
  .sistema__grid { list-style: none; padding: 0; display: grid; gap: var(--s5); }
  .pieza { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) var(--s5); }
  .pieza__n { font-family: var(--f-mono); font-size: 1.5rem; color: var(--gunmetal); }
  .pieza__texto { color: var(--plata); }
  
  .servicios__mas { margin-top: var(--s2); }
  @media (min-width: 640px) { .sistema__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .sistema__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }

  /* ---------- Banda AEO ---------- */
  .section--aeo {
    border-block: 1px solid var(--borde);
    background: linear-gradient(180deg, transparent, rgba(232, 234, 236, .035) 50%, transparent);
  }
  .aeo { display: grid; gap: var(--s6); align-items: center; }
  .aeo__texto { max-width: 62ch; }
  .aeo__texto .eyebrow { margin-bottom: var(--s4); }
  .aeo__cierre { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--borde); color: var(--cromo); font-weight: 500; }

  /* ---------- Planes ---------- */
  .planes__pie { margin-top: var(--s7); text-align: center; color: var(--plata); font-size: .9375rem; }

  .lead--largo { max-width: 72ch; font-size: 1.0625rem; }
  .final__inner { width: 100%; display: flex; flex-direction: column; align-items: center; }

  /* ---------- Toques futuristas ---------- */
  /* 1) Borde giratorio en el plan destacado */
  .plan--destacado::before {
    background: conic-gradient(from var(--ang), var(--cromo), rgba(124, 130, 136, .2) 22%, var(--plata) 50%, rgba(124, 130, 136, .2) 78%, var(--cromo));
  }
  @media (prefers-reduced-motion: no-preference) {
    .plan--destacado::before { animation: giro-borde 7s linear infinite; }
  }
  @keyframes giro-borde { to { --ang: 360deg; } }

  /* 2) Líneas que se rellenan con el scroll (barra de la cabecera y pasos del método) */
  .header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, var(--gunmetal), var(--cromo)); transform: scaleX(var(--prog, 0)); transform-origin: left;
  }
  .metodo__item::after {
    content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; pointer-events: none;
    background: var(--cromo); transform: scaleX(var(--f, 0)); transform-origin: left;
  }
  html:not(.js) .metodo__item { --f: 1; }
}

@layer components {
  .plan > :nth-last-child(2) { margin-bottom: var(--s5); }
}

/* ============================================================
   UNIVERSO KALVORA 2027 · capa de diseño final
   Titulares serif finos y cromados, tarjetas de vidrio que flotan,
   órbita de servicios, puntos de navegación, nebulosa en movimiento.
   Solo grises de marca (#050505 · #E8EAEC · #BFC3C7 · #7C8288).
   ============================================================ */
@layer base {
  /* Nebulosa que deriva despacio + viñeta (por encima de las estrellas, por debajo de la K) */
  .nebula { z-index: -2; overflow: hidden; background: none; }
  .nebula::after {
    content: ''; position: absolute; inset: -25%;
    background:
      radial-gradient(ellipse 38% 30% at 78% 18%, rgba(232, 234, 236, .075), transparent 70%),
      radial-gradient(ellipse 34% 26% at 14% 58%, rgba(191, 195, 199, .05), transparent 70%),
      radial-gradient(ellipse 46% 34% at 62% 96%, rgba(124, 130, 136, .08), transparent 70%),
      radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
    animation: deriva 70s ease-in-out infinite alternate;
  }
  @keyframes deriva { to { transform: translate3d(-5%, 4%, 0) scale(1.1) rotate(4deg); } }
}

@layer components {
  /* ---------- Ritmo y titulares ---------- */
  .section { padding-block: clamp(96px, 13vw, 184px); }
  .section__head { max-width: 62ch; margin-bottom: var(--s8); }
  .section__head .eyebrow { margin-bottom: var(--s5); }
  .h2 {
    font-family: var(--f-titulo); font-weight: 300; text-transform: uppercase;
    font-size: clamp(2.15rem, 3.4vw + 1rem, 3.9rem); line-height: 1.0; letter-spacing: .005em; text-wrap: balance;
    background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .h3 { font-family: var(--f-cuerpo); font-weight: 500; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; }
  .lead { color: var(--plata); font-weight: 300; font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem); line-height: 1.7; }
  .eyebrow--tag { padding: 6px 12px; border: 1px solid var(--borde-fuerte); border-radius: 999px; color: var(--cromo); }
  .eyebrow--tag::before { display: none; }

  /* ---------- Tarjetas de vidrio ---------- */
  .card {
    background: var(--capa-tarjeta-v);
    background-image: linear-gradient(180deg, rgba(22, 23, 26, .78), var(--capa-tarjeta-v) 55%);
    border: 1px solid var(--borde-suave); border-radius: var(--radio);
    box-shadow: inset 0 1px 0 rgba(232, 234, 236, .08), 0 40px 80px -48px rgba(0, 0, 0, .9);
  }
  .metal::before { background: linear-gradient(150deg, rgba(232, 234, 236, .5), rgba(124, 130, 136, .08) 40%, rgba(124, 130, 136, .08) 60%, rgba(232, 234, 236, .28)); }
  /* Inclinación 3D con el mouse (app.js pone --rx y --ry) */
  .card[data-inclina], .card[data-inclina]:hover {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
  }
  .card[data-inclina].is-inclinada { transition: transform .12s linear, border-color .3s, box-shadow .3s; }
  .card[data-inclina]:hover { border-color: var(--borde-fuerte); box-shadow: inset 0 1px 0 rgba(232, 234, 236, .12), 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 60px -30px rgba(232, 234, 236, .25); }

  /* Flotación (usa "translate" para no pelear con la inclinación) */
  @media (prefers-reduced-motion: no-preference) {
    .bubble { animation: flotar-suave 8s ease-in-out infinite; animation-delay: var(--float-delay, 0s); }
    .pieza { animation: flotar-suave 9s ease-in-out infinite; animation-delay: var(--flota, 0s); }
    .bubble:hover, .pieza:hover { animation-play-state: paused; }
  }
  @keyframes flotar-suave { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

  /* Aparición al hacer scroll: sube, se enfoca y se aclara */
  @media (prefers-reduced-motion: no-preference) {
    .js .section [data-reveal] {
      transition:
        opacity .9s var(--ease-suave) calc(var(--i, 0) * 80ms),
        translate .9s var(--ease-suave) calc(var(--i, 0) * 80ms),
        filter .9s var(--ease-suave) calc(var(--i, 0) * 80ms),
        transform .5s var(--ease-suave), border-color .3s, box-shadow .3s;
    }
    .js .section:not(.is-visible) [data-reveal] { opacity: 0; transform: none; translate: 0 32px; filter: blur(8px); }
  }

  /* ---------- Lo que vemos ---------- */
  .vemos__puntos li { font-weight: 300; font-size: 1.125rem; }
  .vemos__puntos span { font-family: var(--f-mono); color: var(--gunmetal); }
  .vemos__cierre {
    font-family: var(--f-titulo); font-style: italic; font-weight: 300;
    font-size: clamp(1.9rem, 2.4vw + 1rem, 2.9rem); line-height: 1.12; max-width: 22ch; color: var(--cromo);
  }

  /* ---------- Servicios + órbita ---------- */
  .sistema__top { display: grid; gap: var(--s6); align-items: center; margin-bottom: var(--s8); }
  .sistema__top .section__head { margin-bottom: 0; }
  @media (min-width: 900px) { .sistema__top { grid-template-columns: 1.1fr .9fr; gap: var(--s8); } }
  .orbita { margin: 0 auto; width: min(100%, 440px); }
  .orbita svg { width: 100%; height: auto; overflow: visible; }
  .orbita__anillo { fill: none; stroke: rgba(232, 234, 236, .18); stroke-width: 1; stroke-dasharray: 2 6; }
  .orbita__anillo--ext { stroke: rgba(232, 234, 236, .07); stroke-dasharray: none; }
  .orbita__giro { transform-origin: 210px 210px; }
  .orbita__nodo { transform-box: fill-box; transform-origin: center; }
  .orbita__nodo circle { fill: var(--capa-tarjeta); stroke: rgba(232, 234, 236, .38); stroke-width: 1; }
  .orbita__nodo text, .orbita__texto-centro { text-anchor: middle; fill: #E8EAEC; }
  .orbita__nodo text { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em; }
  .orbita__flujo { stroke: rgba(232, 234, 236, .32); stroke-width: 1; stroke-dasharray: 3 7; }
  .orbita__centro { fill: var(--capa-tarjeta); stroke: #E8EAEC; stroke-width: 1.2; filter: drop-shadow(0 0 22px rgba(232, 234, 236, .35)); }
  .orbita__texto-centro { font-family: var(--f-titulo); font-size: 13px; letter-spacing: .14em; }
  .orbita__satelite { fill: #E8EAEC; }
  @media (prefers-reduced-motion: no-preference) {
    .orbita__giro { animation: girar 80s linear infinite; }
    .orbita__nodo { animation: girar 80s linear infinite reverse; }
    .orbita__flujo { animation: fluir 2.6s linear infinite; }
  }
  @keyframes fluir { to { stroke-dashoffset: -20; } }
  .pieza__n, .metodo__n, .vemos__puntos span { font-variant-numeric: lining-nums; }
  .pieza__n { font-family: var(--f-titulo); font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--gunmetal); }
  .pieza .h3 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.75rem; line-height: 1.12; }
  .pieza__texto { font-weight: 300; }
  .servicios__mas { margin-top: var(--s6); }

  /* ---------- AEO ---------- */
  .section--aeo {
    border-block: 1px solid var(--borde);
    background:
      radial-gradient(ellipse 60% 80% at 20% 50%, rgba(232, 234, 236, .05), transparent 70%),
      linear-gradient(180deg, transparent, rgba(232, 234, 236, .025) 50%, transparent);
  }
  .aeo__cierre { font-family: var(--f-titulo); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.4; color: var(--cromo); }

  /* ---------- Demo ---------- */
  
  

  /* ---------- Planes ---------- */
  .plan__nombre { font-family: var(--f-titulo); font-weight: 400; font-size: 2.1rem; text-transform: uppercase; letter-spacing: .06em; }
  .plan--destacado { box-shadow: inset 0 1px 0 rgba(232, 234, 236, .14), 0 0 90px -30px rgba(232, 234, 236, .3), 0 40px 90px -40px #000; }
  .badge { font-family: var(--f-mono); font-weight: 400; letter-spacing: .14em; }
  .planes__pie { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .06em; }

  /* ---------- Método ---------- */
  .metodo__n { font-family: var(--f-titulo); font-style: italic; font-weight: 300; font-size: 3rem; line-height: 1; color: var(--plata); }
  .metodo__item p { font-weight: 300; }

  /* ---------- Nosotros, preguntas, cierre ---------- */
  .faq__item { background: linear-gradient(180deg, rgba(18, 18, 19, .8), rgba(7, 7, 8, .7)); border-color: var(--borde); border-radius: 14px; transition: border-color .3s; }
  .faq__item[open], .faq__item:hover { border-color: var(--borde-fuerte); }
  .faq__item summary { font-weight: 500; }
  .faq__item p { font-weight: 300; }
  .final { overflow: hidden; }
  .final::before {
    content: ''; position: absolute; left: 50%; top: 42%; width: min(120vw, 1100px); aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(circle, rgba(232, 234, 236, .07), transparent 60%);
    box-shadow: inset 0 0 0 1px rgba(232, 234, 236, .05);
  }
  .final__titulo { max-width: 18ch; font-size: clamp(2.4rem, 4.4vw + 1rem, 5rem); }

  /* ---------- Pie con la marca gigante ---------- */
  .footer { position: relative; overflow: hidden; }
  .footer__marca {
    grid-column: 1 / -1; width: 100%; margin-top: var(--s7); text-align: center; user-select: none; pointer-events: none;
    font-family: var(--f-titulo); font-weight: 300; font-size: clamp(3.5rem, 16vw, 15rem); line-height: .8; letter-spacing: .14em;
    background: linear-gradient(180deg, rgba(232, 234, 236, .22), rgba(232, 234, 236, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* ---------- Puntos de navegación (escritorio ancho) ---------- */
  .puntos { display: none; }
  @media (min-width: 1280px) {
    .puntos { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; }
    .puntos__a { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(232, 234, 236, .25); transition: background-color .3s, box-shadow .3s, transform .3s; }
    .puntos__a::before { content: ''; position: absolute; inset: -8px; }
    .puntos__a:hover { background: var(--plata); }
    .puntos__a.is-activo { background: var(--cromo); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(232, 234, 236, .08), 0 0 14px rgba(232, 234, 236, .6); }
    .puntos__t {
      position: absolute; left: 20px; top: 50%; transform: translate(-6px, -50%); opacity: 0; white-space: nowrap; pointer-events: none;
      font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cromo);
      transition: opacity .3s, transform .3s;
    }
    .puntos__a:hover .puntos__t, .puntos__a:focus-visible .puntos__t { opacity: 1; transform: translate(0, -50%); }
  }
}

@layer components {
  /* La K realista también corona el cierre */
  .kreal--final { --kw: min(50vw, 300px); margin: 0 auto calc(var(--kw) * .32); }
}

@layer components {
  /* Banda de IA centrada: una sola idea, en el medio del universo */
  .aeo { justify-items: center; text-align: center; }
  .aeo__texto { max-width: 46rem; }
  .aeo__texto .eyebrow { justify-content: center; }
  .aeo__texto .lead { margin-inline: auto; }
}

@layer components {
  /* ---------- Sistema: cuatro piezas más compactas y un cierre que se lee ---------- */
  .pieza .h3 { font-size: 1.45rem; }
  .sistema__cierre {
    margin-top: var(--s7); text-align: center; text-wrap: balance;
    font-family: var(--f-titulo); font-weight: 300; font-size: clamp(1.35rem, 2vw + .8rem, 1.9rem); color: var(--plata);
  }

  /* ---------- Los seis servicios ---------- */
  .catalogo__grid { list-style: none; padding: 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .catalogo__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .catalogo__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
  .catalogo__item { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); }
  .catalogo__ico {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
    border: 1px solid var(--borde-fuerte); background: var(--superficie-2); color: var(--cromo);
  }
  .catalogo__item .h3 { font-family: var(--f-titulo); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
  .catalogo__item p:last-child { color: var(--plata); font-weight: 300; }

  /* ---------- Demos ---------- */
  .demos__grid { display: grid; gap: var(--s5); }
  @media (min-width: 900px) { .demos__grid { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
  .demo-card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5); }
  .demo-card__tag { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--plata); }
  .demo-card .h3 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.6rem, 2vw + 1rem, 2.1rem); line-height: 1.12; text-wrap: balance; }
  .demo-card__texto { color: var(--plata); font-weight: 300; }
  .demo-card__visual { display: grid; place-items: center; padding-block: var(--s4); margin-block: auto; }
  .demo-card > .btn { align-self: flex-start; }
  .demos__pie { margin-top: var(--s5); color: var(--plata); font-size: .9375rem; max-width: 65ch; }
  .demos__cta { margin-top: var(--s5); }

  /* Tarjeta de fidelidad (sellos o puntos) */
  .seg { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); }
  .seg__b { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--plata); font-size: .875rem; font-weight: 500; transition: background-color .25s, color .25s; }
  .seg__b[aria-pressed='true'] { background: var(--cromo); color: var(--negro); }
  .tarjeta {
    display: grid; gap: var(--s4); padding: var(--s5); border-radius: 18px; border: 1px solid var(--borde-fuerte);
    background: linear-gradient(160deg, rgba(232, 234, 236, .09), rgba(124, 130, 136, .04) 55%, rgba(5, 5, 5, .5));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  }
  .tarjeta__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
  .tarjeta__marca { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .24em; color: var(--plata); }
  .tarjeta__estado { font-family: var(--f-mono); font-size: .8rem; color: var(--cromo); }
  .sellos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
  .sellos[hidden], .barra-puntos[hidden] { display: none; }
  .sello { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(232, 234, 236, .3); background: rgba(5, 5, 5, .35); transition: border-color .3s, background-color .3s, box-shadow .3s; }
  .sello img { mix-blend-mode: screen; width: 62%; height: auto; opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .3s, transform .45s var(--ease-suave); }
  .sello.is-on { border-style: solid; border-color: var(--plata); background: rgba(232, 234, 236, .08); }
  .sello.is-on img { opacity: 1; transform: none; }
  .tarjeta.is-completa .sello.is-on { border-color: var(--cromo); box-shadow: 0 0 18px rgba(232, 234, 236, .35); }
  .barra-puntos { display: grid; gap: var(--s3); }
  .barra-puntos__n { display: flex; align-items: baseline; gap: 6px; color: var(--plata); }
  .barra-puntos__n strong { font-family: var(--f-titulo); font-weight: 300; font-size: 3rem; line-height: 1; color: var(--cromo); font-variant-numeric: lining-nums; }
  .barra-puntos__pista { height: 8px; border-radius: 999px; background: rgba(232, 234, 236, .12); overflow: hidden; }
  .barra-puntos__pista i { display: block; width: 100%; height: 100%; background: var(--metal); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-suave); }
  .fid__msg { min-height: 1.6em; color: var(--cromo); font-size: .95rem; }
  .fid__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
  @media (prefers-reduced-motion: no-preference) {
    .sello.is-nuevo img { animation: sello-pop .6s var(--ease-suave) both; }
  }
  @media (prefers-reduced-motion: reduce) { .sello img, .barra-puntos__pista i, .sello { transition: none; } }
  @keyframes sello-pop { 0% { transform: scale(2) rotate(-25deg); opacity: 0; } 60% { transform: scale(.9) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

  /* ---------- Arma el sistema: pregunta del bot + módulos ---------- */
  .personaliza__bot { border: 0; margin: 0 0 var(--s6); padding: 0; min-width: 0; }
  .personaliza__bot legend { padding: 0; margin-bottom: var(--s3); font-weight: 600; font-size: 1.0625rem; color: var(--cromo); }
  .personaliza__bot-opciones { display: grid; gap: var(--s3); }
  @media (min-width: 900px) { .personaliza__bot-opciones { grid-template-columns: repeat(3, 1fr); } }
  .radio-opt { position: relative; display: flex; }
  .radio-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .radio-opt span {
    position: relative; flex: 1; display: flex; align-items: center; min-height: 56px; padding: var(--s3) var(--s4) var(--s3) 46px;
    border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); color: var(--plata); font-size: .9375rem; line-height: 1.35;
    transition: border-color .2s, background-color .2s, color .2s;
  }
  .radio-opt span::before { content: ''; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1.5px solid var(--gunmetal); }
  .radio-opt input:checked + span { border-color: var(--cromo); background: rgba(232, 234, 236, .08); color: var(--cromo); }
  .radio-opt input:checked + span::before { border-color: var(--cromo); background: radial-gradient(circle, var(--cromo) 0 4px, transparent 5px); }
  .radio-opt input:focus-visible + span { outline: 2px solid var(--cromo); outline-offset: 3px; }
  .personaliza__aviso { margin-top: var(--s3); color: var(--cromo); font-size: .9375rem; }
  .personaliza__aviso[hidden], .chip-opt__estrella[hidden] { display: none; }
  .personaliza__modulos { margin-bottom: var(--s4); }
  .personaliza__opciones { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
  @media (min-width: 640px) { .personaliza__opciones { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .personaliza__opciones { grid-template-columns: repeat(3, 1fr); } }
  .personaliza__opciones .chip-opt { width: 100%; }
  .chip-opt__estrella {
    align-self: flex-start; margin-top: var(--s2); padding: 2px 10px; border: 1px solid var(--cromo); border-radius: 999px;
    font: normal 400 .66rem/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cromo);
  }
  .personaliza[data-bot='bueno'] [data-opt='fidelidad'] { border-color: var(--cromo); box-shadow: 0 0 0 1px rgba(232, 234, 236, .3), 0 0 28px rgba(232, 234, 236, .18); }
  .personaliza[data-bot='bueno'] [data-opt='max'] { opacity: .55; }
}

@layer components {
  /* ---------- Servicios: el "para qué" de cada uno ---------- */
  .catalogo__para { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--borde); color: var(--cromo); font-style: italic; font-size: .9375rem; }

  /* ---------- Módulos sueltos ---------- */
  .modulos { margin-top: var(--s7); padding: var(--s5); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); display: grid; gap: var(--s2); }
  .modulos__t { font-family: var(--f-titulo); font-weight: 500; font-size: 1.5rem; }
  .modulos__p { color: var(--plata); }
  .modulos__lista { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: var(--s2); }

  /* ---------- Tarjeta de fidelidad: aviso por WhatsApp y "así funciona" ---------- */
  .fid__wa { display: grid; gap: var(--s2); }
  .fid__wa[hidden] { display: none; }
  .fid__wa-t { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--plata); }
  .fid__wa-b { padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: rgba(232, 234, 236, .08); border: 1px solid var(--borde); color: var(--cromo); font-size: .9rem; line-height: 1.5; }
  .fid__como { border-top: 1px solid var(--borde); padding-top: var(--s3); }
  .fid__como summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; color: var(--cromo); }
  .fid__como ol { margin: var(--s2) 0 0; padding-left: 1.2em; display: grid; gap: var(--s2); color: var(--plata); font-size: .9375rem; }
}

@layer components {
  /* ---------- Planes: lo que incluye, repartido en las 4 piezas ---------- */
  .plan__grupos { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s4); }
  .grupo { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); align-items: start; }
  .grupo__ico {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--borde-metal); background: var(--capa-tarjeta); color: var(--plata);
  }
  .grupo__t { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cromo); line-height: 36px; }
  .grupo__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; color: var(--cromo); font-size: .9375rem; line-height: 1.45; }
  .grupo__lista li { position: relative; padding-left: 14px; }
  .grupo__lista li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--plata); }
  .grupo--vacio .grupo__ico { color: var(--gunmetal); border-style: dashed; background: transparent; }
  .grupo--vacio .grupo__t { color: var(--gunmetal); }
  .grupo__no { color: var(--gunmetal); font-size: .875rem; line-height: 1.4; }
  .plan__acomp { margin-bottom: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--borde-suave); color: var(--plata); font-size: .9rem; line-height: 1.45; }
  .plan__acomp strong { color: var(--cromo); font-weight: 500; }
  .plan .nota-aparte { margin-bottom: var(--s5); }
  .plan__regalo { margin-bottom: var(--s3); }

  /* ---------- Módulos sueltos: una fila corta ---------- */
  .modulos {
    margin-top: var(--s6); padding: var(--s4) var(--s5); border: 1px solid var(--borde-suave); border-radius: var(--radio);
    background: var(--capa-tarjeta-v); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  }
  .modulos__texto { display: grid; gap: 2px; }
  .modulos__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
}

@layer components {
  /* En computador, cada bloque de las tres tarjetas (nombre, incluye, acompañamiento, regalo, botón) queda a la misma altura */
  @media (min-width: 900px) {
    @supports (grid-template-rows: subgrid) {
      .planes__grid { grid-template-rows: repeat(10, auto); column-gap: var(--s5); row-gap: 0; }
      .plan { display: grid; grid-template-rows: subgrid; grid-row: span 10; row-gap: 0; align-content: start; }
      .plan__grupos { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--s4); margin-bottom: var(--s4); }
      .plan__para { min-height: 0; }
      .plan__cta { align-self: end; }
    }
  }
}

@layer components {
  /* Planes en celular: el botón pliega "lo que incluye"; en computador no existe y todo se ve */
  .plan__ver { display: none; }
  @media (max-width: 899px) {
    .plan__ver {
      display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 48px; margin-top: var(--s4);
      padding: 0 16px; border: 1px solid var(--borde-metal); border-radius: 12px; background: var(--capa-tarjeta); color: var(--cromo); font-weight: 500; font-size: .9375rem;
    }
    .plan__ver .icon { transition: transform .3s var(--ease); transform: rotate(90deg); }
    .plan--abierto .plan__ver .icon { transform: rotate(-90deg); }
    .js .plan:not(.plan--abierto) .plan__inc,
    .js .plan:not(.plan--abierto) .plan__grupos,
    .js .plan:not(.plan--abierto) .plan__acomp { display: none; }
    .js .plan:not(.plan--abierto) .plan__regalo { margin-top: var(--s4); }
  }
}

@layer components {
  /* Ocho servicios: 4 columnas en pantalla ancha */
  @media (min-width: 1200px) { .catalogo__grid { grid-template-columns: repeat(4, 1fr); } }
}

@layer components {
  .automatizaciones__cta { margin-top: var(--s6); }
}

@layer components {
  /* ---------- Día 10: automatizaciones por áreas, "cómo lo hacemos", AEO explicado y cómo cobramos ---------- */
  @media (min-width: 1200px) { .catalogo__grid--3 { grid-template-columns: repeat(3, 1fr); } }
  .area__ejemplos { margin-top: var(--s2); gap: var(--s2); color: var(--plata); font-weight: 300; font-size: .9375rem; }
  .catalogo__item .nota-aparte { margin-top: var(--s2); font-size: .875rem; }
  .automatizaciones__como { margin-top: var(--s8); }
  .automatizaciones__como .modulos__t { margin-bottom: var(--s5); }
  @media (min-width: 900px) { .metodo__list--3 { grid-template-columns: repeat(3, 1fr); } }
  .automatizaciones__propio { margin-top: var(--s7); }
  .aeo__hacemos { margin: var(--s6) auto 0; max-width: 40rem; text-align: left; }
  .aeo__hacemos .modulos__t { margin-bottom: var(--s4); text-align: center; }
  .aeo__hacemos .checks span { color: var(--plata); font-weight: 300; }
  .metodo__cobro { margin-top: var(--s7); }
}

@layer components {
  /* Diagnóstico de 1 minuto: preguntas con botones */
  .diag { border: 0; padding: 0; margin: 0; min-width: 0; }
  .diag legend { padding: 0; margin-bottom: var(--s2); font-weight: 500; color: var(--cromo); font-size: .9375rem; }
  .diag__opciones { display: grid; gap: var(--s2); }
  @media (min-width: 600px) { .diag__opciones { grid-template-columns: repeat(2, 1fr); } }
  .diag .radio-opt span { min-height: 48px; font-size: .9rem; }
  .diag [aria-invalid] + span { border-color: var(--plata); }
  /* "¿Te ha pasado?": el cierre es más largo, le damos más ancho */
  .vemos__cierre { max-width: 30ch; }
}