/* Manas · páginas interiores de la Pymótica.
   Sistema de color B · Dúo. Frío = lo que prepara la IA. Cálido = lo que decides tú. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-variable-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-variable-latin.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* Manas · sistema de color B · Dúo (copiado del bloque B de la vista previa de paletas) */
:root {
  /* Noche (fondos oscuros) */
  --noche: #080C11;
  --noche-2: #0E151C;
  --noche-3: #141D26;
  --texto-n: #ECE8DF;
  --texto-n-2: #A7B0B4;
  --filete-n: rgba(236, 232, 223, 0.12);
  /* Papel (fondos claros) */
  --papel: #F3EFE7;
  --papel-2: #EAE4D8;
  --tinta: #121A1E;
  --tinta-2: #4A5459;
  --filete-p: rgba(18, 26, 30, 0.14);
  /* IA · frío */
  --ia-n: #2ED9BF;
  --ia-p: #08627F;
  --ia-fondo-p: #E8F1F1;
  --ia-tinta-p: #0B3F52;
  --ia-halo: rgba(46, 217, 191, 0.35);
  /* Tú · cálido */
  --marfil: #FFF1DA;
  --brasa: #FFC98A;
  --calido-panel: #FFF6E8;
  --calido-borde: #E7C595;
  --calido-casilla: #FFFDF8;
  --calido-casilla-borde: #EBDDC6;
  --calido-caja: #8A6A45;
  --calido-titulo: #7A4310;
  --calido-trazo: #B5652B;
  --papel-calido: #F1E3CC;
  --calido-sombra: rgba(214, 140, 60, 0.28);
  /* Semáforo (n = noche · p = papel) */
  --verde-n: #6FCF7F;
  --ambar-n: #EEC22E;
  --rojo-n: #F2545B;
  --gris-n: #8A95A5;
  --verde-p: #2E6B33;
  --ambar-p: #735A00;
  --rojo-p: #AE3823;
  --gris-p: #5E6468;
  /* Próximamente (plano de obra) */
  --plano-n: #9DB8F2;
  --plano-p: #2F5BAE;
  /* Acentos */
  --acento-n: #ECE8DF;
  --acento-p: #121A1E;
  --acento-degradado: var(--logo-degradado-n);
  /* Logo */
  --logo-degradado-n: linear-gradient(90deg, #2ED9BF 0%, #FFF1DA 30%, #FFC98A 42%, #FFC98A 58%, #FFF1DA 70%, #2ED9BF 100%);
  --logo-degradado-p: linear-gradient(90deg, #08627F 0%, #2B3A3A 30%, #7A4310 42%, #7A4310 58%, #2B3A3A 70%, #08627F 100%);
  --logo-lema-n: #A7B0B4;
  --logo-lema-p: #4A5459;
  --logo-tam: clamp(1.4rem, 2.2vw, 1.75rem);
  --logo-lema-tam: 10px;

  /* tipografía y ritmo (de la portada) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-serif: 'Charter', 'Bitstream Charter', 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif;
  --barra: 72px;
  --margen: clamp(16px, 6vw, 112px);
  --ancho: 1200px;
  --curva: cubic-bezier(.2, .7, .1, 1);
}

/* ============================================================ BASE */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-sans); font-size: 18px; line-height: 1.6;
  background: var(--papel); color: var(--tinta);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
q { quotes: '«' '»' '“' '”'; }
::selection { background: rgba(46, 217, 191, .32); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }

.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; }
.saltar {
  position: fixed; left: 16px; top: -64px; z-index: 300; background: var(--marfil); color: var(--noche);
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: top .2s;
}
.saltar:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ia-p); outline-offset: 3px; border-radius: 4px; }
.tema-noche :focus-visible, .barra :focus-visible, .pie :focus-visible { outline-color: var(--ia-n); }
/* grano: cubre el documento entero (antes «fixed»: sólo cubría la primera pantalla y en una captura de página
   completa dejaba una costura de tono a la altura de la ventana, y≈900 px en escritorio) */
body { position: relative; }
.grano {
  position: absolute; inset: 0; pointer-events: none; z-index: 250; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ============================================================ CABECERA */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--barra);
  padding: 0 clamp(16px, 3vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(8, 12, 17, .96); color: var(--texto-n);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(46, 217, 191, .14);
}
.marca { display: flex; flex-direction: column; align-items: flex-start; position: relative; text-decoration: none; flex: none; }
.marca-nombre {
  font-family: var(--font-sans); font-weight: 200; font-size: var(--logo-tam); letter-spacing: 11px; line-height: 1.15;
  background: var(--logo-degradado-n); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: marcaVaiven 8s ease-in-out infinite;
}
@keyframes marcaVaiven { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.marca-rotulo {
  font-family: var(--font-mono); font-size: var(--logo-lema-tam); text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--logo-lema-n); margin-top: -1px; white-space: nowrap;
}
.marca-canvas { position: absolute; top: -10px; left: -14px; width: calc(100% + 28px); height: calc(100% + 20px); pointer-events: none; }
.menu-lista { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.menu-lista a {
  position: relative; display: inline-block; padding: 8px 0; font-size: 14.5px; font-weight: 500;
  color: var(--texto-n-2); text-decoration: none; transition: color .25s;
}
.menu-lista a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--ia-n);
  transition: right .35s var(--curva);
}
.menu-lista a:hover { color: var(--texto-n); }
.menu-lista a:hover::after { right: 0; }
.menu-lista a[aria-current="page"] { color: var(--texto-n); }
.menu-lista a[aria-current="page"]::after { right: 0; height: 2px; background: var(--brasa); }
.menu-boton {
  display: none; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(236, 232, 223, .28); font-size: 14px; font-weight: 600; color: var(--texto-n);
}
.menu-boton .rayas { width: 16px; height: 10px; position: relative; display: inline-block; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.menu-boton .rayas::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; margin-top: -.75px; border-top: 1.5px solid currentColor; }
.menu-boton[aria-expanded="true"] .rayas { border-color: transparent; }
.menu-boton[aria-expanded="true"] .rayas::after { transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .rayas::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; margin-top: -.75px; border-top: 1.5px solid currentColor; transform: rotate(-45deg); }

.menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.barra .menu-cta {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .1px; white-space: nowrap; text-decoration: none;
  background: var(--marfil); color: var(--noche); box-shadow: 0 8px 30px -10px rgba(255, 201, 138, .55);
  transition: transform .25s var(--curva), box-shadow .3s;
}
.barra .menu-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(255, 201, 138, .12), 0 14px 40px -12px rgba(255, 201, 138, .7); }
.barra .menu-cta:focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; }

/* ============================================================ SECCIONES */
main { display: block; }
.seccion { position: relative; padding: clamp(80px, 11vw, 150px) var(--margen); }
.tema-noche { background: var(--noche); color: var(--texto-n); }
.tema-noche.alterna { background: var(--noche-2); }
.tema-papel { background: var(--papel); color: var(--tinta); }
.tema-papel.alterna { background: var(--papel-2); }
.capa { max-width: var(--ancho); margin: 0 auto; position: relative; }
.estrecha { max-width: 820px; }

.cabecera-pagina { padding-top: calc(var(--barra) + clamp(56px, 9vw, 120px)); padding-bottom: clamp(64px, 9vw, 120px); overflow: hidden; }
.migas { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .6px; color: var(--texto-n-2); }
.migas ol { display: flex; flex-wrap: wrap; gap: 8px; }
.migas li + li::before { content: '›'; margin-right: 8px; opacity: .7; }
.migas a { color: var(--texto-n-2); text-decoration: none; border-bottom: 1px solid rgba(236, 232, 223, .25); }
.migas a:hover { color: var(--texto-n); }
.tema-papel .migas, .tema-papel .migas a { color: var(--tinta-2); }

.antetitulo {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--texto-n-2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tema-papel .antetitulo { color: var(--tinta-2); }
.antetitulo .num { color: var(--texto-n); font-variant-numeric: tabular-nums; }
.tema-papel .antetitulo .num { color: var(--tinta); }
.titular { font-size: clamp(48px, 8.4vw, 124px); line-height: .96; letter-spacing: -.035em; margin: 26px 0 18px; }
.titular .punto { color: var(--ia-n); }
.tema-papel .titular .punto { color: var(--ia-p); }
.segunda { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; color: var(--texto-n); max-width: 30ch; }
.tema-papel .segunda { color: var(--tinta); }
.h2 { font-size: clamp(34px, 5vw, 66px); line-height: 1.03; margin: 16px 0 18px; max-width: 22ch; }
.h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; }
.entrada { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--texto-n-2); max-width: 62ch; }
.tema-papel .entrada { color: var(--tinta-2); }
.entrada strong, .cuerpo strong { color: var(--texto-n); font-weight: 600; }
.tema-papel .entrada strong, .tema-papel .cuerpo strong { color: var(--tinta); }
.cuerpo { font-size: 17px; color: var(--texto-n-2); max-width: 62ch; }
.tema-papel .cuerpo { color: var(--tinta-2); }
.tu { color: var(--brasa); font-weight: 600; }
.tema-papel .tu { color: var(--tinta); background: linear-gradient(transparent 62%, rgba(231, 197, 149, .75) 62%); padding: 0 2px; }
.fila-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }

/* ============================================================ BOTONES */
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; line-height: 1.1; text-decoration: none; text-align: center;
  transition: transform .25s var(--curva), box-shadow .3s, background .3s, color .3s, border-color .3s;
}
.boton-tu { background: var(--marfil); color: var(--noche); box-shadow: 0 8px 30px -10px rgba(255, 201, 138, .55); }
.boton-tu:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(255, 201, 138, .12), 0 14px 40px -12px rgba(255, 201, 138, .7); }
.boton-contorno { border: 1px solid rgba(236, 232, 223, .34); color: var(--texto-n); }
.boton-contorno:hover { border-color: var(--texto-n); background: rgba(236, 232, 223, .06); }
.tema-papel .boton-tu { background: var(--tinta); color: var(--marfil); box-shadow: 0 10px 30px -14px rgba(160, 90, 20, .7); }
.tema-papel .boton-tu:hover { box-shadow: 0 0 0 6px rgba(214, 140, 60, .16), 0 16px 36px -14px rgba(160, 90, 20, .8); }
.tema-papel .boton-contorno { border-color: rgba(18, 26, 30, .35); color: var(--tinta); }
.tema-papel .boton-contorno:hover { border-color: var(--tinta); background: rgba(18, 26, 30, .04); }
.boton[disabled] { opacity: .5; cursor: progress; transform: none; }
.enlace { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: currentColor; }

/* ============================================================ VOCES Y ETIQUETAS */
.ia {
  font-family: var(--font-mono); font-size: 15px; line-height: 1.55; letter-spacing: -.1px; color: var(--ia-n);
  border-left: 2px solid currentColor; padding-left: 14px;
}
.ia .ia-sello { display: block; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; opacity: .85; margin-bottom: 3px; }
.tema-papel .ia { color: var(--ia-p); }
.tema-papel .ia .ia-sello { opacity: 1; }
.proximamente {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1.2;
  font-style: normal; color: var(--plano-n); padding: 6px 12px; border: 1px dashed currentColor; border-radius: 4px;
  background: repeating-linear-gradient(45deg, rgba(157, 184, 242, .08) 0 6px, transparent 6px 12px);
}
.proximamente::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
/* etiqueta pequeña (criterio del CEO 2026-10-11: «en pequeño y el menor número de veces posible»); mismos valores que las variantes pequeñas ya existentes */
.proximamente.peq { padding: 2px 8px; font-size: 10px; letter-spacing: 1.4px; }
.tema-papel .proximamente, .panel-tu .proximamente { color: var(--plano-p); background: repeating-linear-gradient(45deg, rgba(47, 91, 174, .07) 0 6px, transparent 6px 12px); }
/* paneles de noche dentro de una sección de papel: vuelven a la variante de noche */
.tema-papel .tema-noche .proximamente, .tema-papel .franja .proximamente, .tema-papel .llamada .proximamente {
  color: var(--plano-n); background: repeating-linear-gradient(45deg, rgba(157, 184, 242, .08) 0 6px, transparent 6px 12px);
}
.tema-papel .franja :focus-visible, .tema-papel .llamada :focus-visible, .tema-papel .tema-noche :focus-visible { outline-color: var(--ia-n); }
.pie-ejemplo, .rotulo-ejemplo { font-family: var(--font-mono); font-size: 12px; letter-spacing: .4px; color: var(--texto-n-2); }
.tema-papel .pie-ejemplo, .tema-papel .rotulo-ejemplo { color: var(--tinta-2); }
.ej { font-family: var(--font-mono); font-size: .74em; letter-spacing: .3px; color: var(--texto-n-2); white-space: nowrap; font-style: normal; }
.tema-papel .ej, .panel-tu .ej { color: var(--tinta-2); }
.ia .ej { color: inherit; opacity: .85; }
.pildora {
  display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 9px 18px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .6px; border: 1px solid rgba(46, 217, 191, .35); color: var(--texto-n);
  background: rgba(46, 217, 191, .05);
}
.pildora b { font-weight: 600; color: var(--ia-n); }

/* semáforo con las formas del sistema B · Dúo firmado (paletas/index.html, bloque «estados»):
   verde círculo · ámbar ROMBO · rojo cuadrado · gris anillo hueco. Forma + color + texto: nunca sólo color. */
.semaforo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px; white-space: nowrap; }
.semaforo i { width: 11px; height: 11px; display: inline-block; flex: none; }
.s-verde { color: var(--verde-p); } .s-verde i { border-radius: 50%; background: currentColor; }
.s-ambar { color: var(--ambar-p); } .s-ambar i { width: 9px; height: 9px; margin: 0 1px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.s-rojo { color: var(--rojo-p); } .s-rojo i { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.s-gris { color: var(--gris-p); } .s-gris i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; background: transparent; }
.tema-noche .s-verde { color: var(--verde-n); } .tema-noche .s-ambar { color: var(--ambar-n); }
.tema-noche .s-rojo { color: var(--rojo-n); } .tema-noche .s-gris { color: var(--gris-n); }

/* panel cálido: lo que decides tú */
.panel-tu {
  background: var(--calido-panel); color: var(--tinta); border: 1px solid var(--calido-borde); border-radius: 18px;
  padding: clamp(20px, 3vw, 32px); box-shadow: 0 30px 70px -44px rgba(160, 90, 20, .6);
}
.panel-tu .panel-titulo {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--calido-titulo); margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.panel-tu .panel-titulo::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--calido-trazo); box-shadow: 0 0 0 4px rgba(214, 140, 60, .18); }
.tema-noche .panel-tu { box-shadow: 0 30px 80px -40px rgba(255, 201, 138, .35); }

/* recuadro de voz IA sobre papel */
.recuadro-ia { background: var(--ia-fondo-p); color: var(--ia-tinta-p); border-left: 2px solid var(--ia-p); border-radius: 0 12px 12px 0; padding: 14px 18px; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6; }
.recuadro-ia .ia-sello { display: block; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ia-p); margin-bottom: 4px; }
.recuadro-ia .ej { color: var(--ia-tinta-p); }

/* índice de página */
.indice { margin-top: 44px; border-top: 1px solid var(--filete-n); padding-top: 18px; }
.indice p { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--texto-n-2); margin-bottom: 12px; }
.indice ol { display: flex; flex-wrap: wrap; gap: 8px; counter-reset: ind; }
.indice li { counter-increment: ind; }
.indice a {
  display: inline-flex; gap: 8px; align-items: baseline; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--filete-n);
  font-size: 14px; color: var(--texto-n); text-decoration: none; transition: border-color .25s, background .25s;
}
.indice a::before { content: counter(ind, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--ia-n); }
.indice a:hover { border-color: rgba(46, 217, 191, .5); background: rgba(46, 217, 191, .06); }

/* preguntas frecuentes */
.faq { border-top: 1px solid var(--filete-p); margin-top: 28px; }
.tema-noche .faq { border-color: var(--filete-n); }
.faq details { border-bottom: 1px solid var(--filete-p); }
.tema-noche .faq details { border-color: var(--filete-n); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center;
  padding: 22px 0; font-family: var(--font-serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 16px; line-height: 1; transition: transform .3s var(--curva); opacity: .7;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .respuesta { padding: 0 44px 24px 0; font-size: 16.5px; color: var(--tinta-2); max-width: 70ch; }
.tema-noche .faq .respuesta { color: var(--texto-n-2); }
.faq .respuesta p + p, .faq .respuesta .proximamente { margin-top: 10px; }
.faq-bloque + .faq-bloque { margin-top: 48px; }
.faq-bloque h3 { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--tinta-2); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tema-noche .faq-bloque h3 { color: var(--texto-n-2); }

/* llamada final */
.cierre-final { text-align: left; }
.banda {
  font-family: var(--font-serif); font-size: clamp(30px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.025em; max-width: 24ch;
}
.banda em { font-style: italic; color: var(--ia-n); }
.tema-papel .banda em { color: var(--ia-p); }
.llamada {
  margin-top: clamp(40px, 6vw, 72px); padding: clamp(26px, 4vw, 52px); border-radius: 24px; background: var(--noche); color: var(--texto-n);
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px 48px; align-items: end;
}
.llamada::after { content: ''; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 138, .26), transparent 65%); pointer-events: none; }
.llamada h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; }
.llamada p { color: var(--texto-n-2); margin-top: 14px; font-size: 17px; }
.llamada .acciones { position: relative; z-index: 1; justify-content: flex-end; }
.llamada .correo { font-family: var(--font-mono); font-size: 14px; color: var(--texto-n-2); margin-top: 16px; }
.llamada .correo a { color: var(--texto-n); }
.aviso-prox {
  margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; font-size: 15px; color: var(--tinta-2); max-width: 80ch;
}
.tema-noche .aviso-prox { color: var(--texto-n-2); }
.tema-papel .llamada .boton-tu { background: var(--marfil); color: var(--noche); }
.tema-papel .llamada .boton-contorno { border-color: rgba(236, 232, 223, .34); color: var(--texto-n); }

/* ============================================================ PIE */
.pie { background: var(--noche); color: var(--texto-n-2); padding: 72px var(--margen) 40px; }
.pie-rejilla { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; align-items: start; }
.pie .marca { margin-bottom: 18px; }
.pie p, .pie address { font-size: 15px; max-width: 42ch; font-style: normal; }
.pie h2 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 500; color: var(--texto-n-2); margin-bottom: 14px; }
.pie ul { display: grid; gap: 9px; font-size: 15px; }
.pie a { color: var(--texto-n); text-decoration: none; border-bottom: 1px solid rgba(236, 232, 223, .25); transition: border-color .25s; }
.pie a:hover { border-color: var(--ia-n); }
.pie a.marca { border-bottom: 0; }
.pie-legal { max-width: var(--ancho); margin: 52px auto 0; padding-top: 22px; border-top: 1px solid var(--filete-n); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; }

/* ============================================================ FUNCIONALIDADES */
.cab-func { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.cab-func .entrada { margin-top: 26px; }
.cab-func .pildora { margin-top: 28px; }
/* título de Funcionalidades en 1-2 renglones (auditoría 2026-10-10, punto 5) */
.cab-func .titular { font-size: clamp(44px, 5.6vw, 80px); max-width: 14ch; }
.definicion { border-left: 1px solid var(--filete-n); padding-left: clamp(18px, 2.4vw, 32px); }
.definicion .palabra { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; }
.definicion .palabra b { font-weight: 700; }
.definicion .cat { font-family: var(--font-mono); font-size: 13px; color: var(--texto-n-2); margin-left: 6px; }
.definicion ol { margin-top: 16px; display: grid; gap: 14px; counter-reset: def; }
.definicion li { counter-increment: def; display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-family: var(--font-serif); font-size: 18.5px; line-height: 1.45; color: var(--texto-n); }
.definicion li::before { content: counter(def) '.'; font-family: var(--font-mono); font-size: 13px; color: var(--ia-n); padding-top: 4px; }

.verbos { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 56px repeat(2, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid var(--filete-n); }
.verbo { padding: 30px 22px 30px 0; border-right: 1px solid var(--filete-n); }
.verbo + .verbo, .verbo.tras-bisagra { padding-left: 22px; }
.verbo:nth-child(3) { border-right: 0; }
.verbo .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; color: var(--ia-n); }
.verbo h3 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1; margin: 10px 0 14px; }
.verbo p { font-size: 15.5px; color: var(--texto-n-2); }
.verbo .ia { margin-top: 16px; font-size: 13.5px; }
.bisagra {
  writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, rgba(255, 201, 138, .16), rgba(255, 201, 138, .05)); border-left: 1px solid rgba(255, 201, 138, .45); border-right: 1px solid rgba(255, 201, 138, .45);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--brasa); padding: 16px 0;
}
.verbo.ultimo { padding-left: 22px; border-right: 0; }
/* entre 1000 y 1199 px: prepara arriba, «Tú decides» en horizontal y hace debajo */
@media (min-width: 1000px) and (max-width: 1199px) {
  .verbos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bisagra { grid-column: 1 / -1; writing-mode: horizontal-tb; transform: none; border: 1px solid rgba(255, 201, 138, .45); border-radius: 12px; padding: 12px 16px; margin: 8px 0; }
  .verbo.tras-bisagra { padding-left: 0; }
}

.pasos { margin-top: 44px; display: grid; gap: 0; counter-reset: paso; position: relative; }
.paso { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; padding: 28px 0; border-top: 1px solid var(--filete-p); align-items: start; }
.paso:last-child { border-bottom: 1px solid var(--filete-p); }
.paso .paso-n { font-family: var(--font-serif); font-size: 56px; line-height: .9; color: var(--tinta); font-variant-numeric: lining-nums; }
.paso .paso-n small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ia-p); margin-top: 10px; }
.paso h3 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.1; }
.paso p { font-size: 16.5px; color: var(--tinta-2); }
.paso.decides { background: var(--calido-panel); border: 1px solid var(--calido-borde); border-radius: 18px; padding: 28px; margin: 14px 0; box-shadow: 0 24px 60px -44px rgba(160, 90, 20, .7); }
.paso.decides + .paso { border-top: 0; }
.paso.decides .paso-n small { color: var(--calido-titulo); }
.correos { display: grid; gap: 8px; }
.correo-ej { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--calido-casilla); border: 1px solid var(--calido-casilla-borde); font-size: 14.5px; }
.correo-ej .caja { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--calido-caja); position: relative; }
.correo-ej.si .caja { background: var(--tinta); border-color: var(--tinta); }
.correo-ej.si .caja::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--marfil); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.correo-ej .que { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--calido-titulo); }
.cierre-bloque { margin-top: 30px; font-family: var(--font-serif); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; max-width: 40ch; }

/* plano del edificio */
.plano { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.edificio { width: 100%; height: auto; overflow: visible; }
.edificio a { cursor: pointer; }
.edificio .losa-sup { fill: #18212A; stroke: rgba(236, 232, 223, .16); stroke-width: 1; }
.edificio .losa-der { fill: #0B1117; }
.edificio .losa-izq { fill: #1E2833; }
.edificio .tabique-sup { fill: #2A3642; } .edificio .tabique-der { fill: #141D26; } .edificio .tabique-izq { fill: #222D38; }
.edificio .mueble-sup { fill: #33404C; } .edificio .mueble-der { fill: #1A232D; } .edificio .mueble-izq { fill: #27323D; }
.edificio .vidrio-sup { fill: rgba(46, 217, 191, .10); stroke: rgba(46, 217, 191, .7); stroke-width: 1; }
.edificio .vidrio-der { fill: rgba(46, 217, 191, .05); stroke: rgba(46, 217, 191, .55); stroke-width: 1; }
.edificio .vidrio-izq { fill: rgba(46, 217, 191, .08); stroke: rgba(46, 217, 191, .55); stroke-width: 1; }
.edificio .orbe { fill: var(--ia-n); }
.edificio .nucleo { stroke: var(--ia-n); stroke-width: 1.4; stroke-dasharray: 2 4; opacity: .7; fill: none; pointer-events: none; }
.edificio a:focus { outline: none; }
.edificio .planta-g { transition: opacity .3s; }
.edificio .halo { opacity: .25; transition: opacity .3s, r .3s; }
.edificio .rotulo-n { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; fill: var(--ia-n); }
.edificio .rotulo-t { font-family: var(--font-serif); font-size: 19px; fill: var(--texto-n); }
.edificio .guia { stroke: rgba(236, 232, 223, .28); stroke-width: 1; stroke-dasharray: 2 3; }
.edificio .canto { stroke: rgba(46, 217, 191, .0); stroke-width: 2; fill: none; transition: stroke .3s; }
.edificio a:hover .halo, .edificio a:focus-visible .halo, .edificio a.encendida .halo { opacity: .9; }
.edificio a:hover .canto, .edificio a:focus-visible .canto, .edificio a.encendida .canto { stroke: var(--ia-n); }
.edificio a:hover .rotulo-t, .edificio a:focus-visible .rotulo-t, .edificio a.encendida .rotulo-t { fill: var(--marfil); text-decoration: underline; }
.edificio a:focus-visible .marco-foco { stroke: var(--ia-n); stroke-width: 2; stroke-dasharray: 5 4; }
.edificio .marco-foco { fill: transparent; stroke: transparent; }
.ascensor { border: 1px solid var(--filete-n); border-radius: 18px; padding: 22px; background: rgba(255, 255, 255, .02); }
.ascensor-titulo { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--texto-n-2); margin-bottom: 12px; }
.ascensor ol { display: grid; gap: 6px; }
.ascensor ol a {
  display: grid; grid-template-columns: 40px 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: var(--texto-n); border: 1px solid transparent; transition: background .25s, border-color .25s;
}
.ascensor ol a:hover, .ascensor ol a.encendida, .ascensor ol a:focus-visible { background: rgba(46, 217, 191, .07); border-color: rgba(46, 217, 191, .4); }
.ascensor .boton-planta { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(236, 232, 223, .35); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; }
.ascensor ol a:hover .boton-planta, .ascensor ol a.encendida .boton-planta { border-color: var(--ia-n); color: var(--ia-n); box-shadow: 0 0 0 4px rgba(46, 217, 191, .12); }
.ascensor svg { width: 24px; height: 24px; stroke: var(--ia-n); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ascensor .nombre { font-family: var(--font-serif); font-size: 19px; line-height: 1.2; }
.ascensor .ir { font-family: var(--font-mono); font-size: 12px; color: var(--texto-n-2); }
.ascensor-nota { margin-top: 14px; font-size: 14px; color: var(--texto-n-2); }

.entradilla-plantas { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.entradilla-plantas p { font-size: 16.5px; color: var(--tinta-2); }
.entradilla-plantas p b { color: var(--tinta); }
.entradilla-plantas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.entradilla-plantas li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.5; color: var(--tinta-2); }
.entradilla-plantas li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ia-p); }
.fichas { margin-top: 48px; display: grid; gap: 22px; }
.ficha-planta {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px 48px; padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--filete-p); border-radius: 22px; background: rgba(255, 255, 255, .5);
  transition: box-shadow .4s, border-color .4s;
}
.ficha-planta:target { border-color: rgba(8, 98, 127, .55); box-shadow: 0 0 0 4px rgba(8, 98, 127, .12), 0 30px 60px -40px rgba(8, 98, 127, .6); }
.ficha-planta.asesor { background: linear-gradient(125deg, rgba(8, 98, 127, .08), rgba(255, 255, 255, .55) 60%); }
.ficha-lado .planta-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ia-p); }
.ficha-lado h3 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.05; margin: 10px 0 16px; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.ficha-lado .icono { width: 54px; height: 54px; stroke: var(--ia-p); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ficha-lado .estado { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px; color: var(--tinta-2); }
.ficha-lado .estado b { font-weight: 600; color: var(--plano-p); }
.ficha-lado .volver { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--tinta-2); }
.que-hace { font-family: var(--font-serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.3; color: var(--tinta); }
.ficha-campos { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--filete-p); border: 1px solid var(--filete-p); border-radius: 14px; overflow: hidden; }
.ficha-campos > div { background: var(--papel); padding: 16px 18px; }
.ficha-campos .ancho { grid-column: 1 / -1; }
.ficha-campos dt { font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tinta-2); }
.ficha-campos dd { font-size: 15.5px; line-height: 1.5; margin-top: 6px; color: var(--tinta); }
.tareas { display: grid; gap: 8px; margin-top: 4px; }
.tareas li { position: relative; padding-left: 28px; }
.tareas li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 9px; height: 9px; border: 1.5px solid var(--ia-p); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.ficha-campos .nunca { background: var(--calido-panel); }
.ficha-campos .nunca dt { color: var(--calido-titulo); }
.ficha-campos .bandeja { background: var(--calido-panel); }
.ficha-campos .bandeja dt { color: var(--calido-titulo); }

.cuadricula { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.cuadricula.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.item { padding: 24px 0; border-top: 1px solid var(--filete-n); }
.tema-papel .item { border-color: var(--filete-p); }
.item h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.15; }
.item p { margin-top: 8px; font-size: 16px; color: var(--texto-n-2); }
.tema-papel .item p { color: var(--tinta-2); }
.item .ia { margin-top: 12px; font-size: 13.5px; }
.recorrido { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: rec; }
.recorrido-titulo { margin-top: 64px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--texto-n-2); }
.recorrido li { counter-increment: rec; border: 1px solid var(--filete-n); border-radius: 16px; padding: 20px; background: rgba(255, 255, 255, .02); }
.recorrido li::before { content: counter(rec, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--ia-n); }
.recorrido h4 { font-size: 24px; line-height: 1.1; margin: 8px 0 8px; }
.recorrido p { font-size: 15px; color: var(--texto-n-2); }
.recorrido .ia { margin-top: 10px; font-size: 13px; }
.recorrido li.decides { border-color: rgba(255, 201, 138, .55); background: rgba(255, 201, 138, .07); }
.recorrido li.decides::before { color: var(--brasa); }
.cierre-linea { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--filete-n); font-family: var(--font-serif); font-size: clamp(21px, 2vw, 26px); }
.tema-papel .cierre-linea { border-color: var(--filete-p); }

/* salud */
.salud { margin-top: 44px; display: grid; gap: 18px; }
.nivel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px 40px; padding: 26px 0; border-top: 1px solid var(--filete-p); }
.nivel-cab .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ia-p); }
.nivel-cab h3 { font-size: 26px; line-height: 1.1; margin-top: 6px; }
.dimensiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 16px; }
.dimensiones li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--filete-p); background: rgba(255, 255, 255, .45); font-size: 14px; line-height: 1.3; }
.dimensiones .semaforo { justify-content: center; }
.resumen-salud { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 15px; }
.reglas-salud { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.reglas-salud li { padding: 14px 16px; border-radius: 12px; background: var(--papel); border: 1px solid var(--filete-p); font-size: 15px; }

/* formación */
.cursos { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.curso { border: 1px solid var(--filete-n); border-radius: 18px; padding: 22px; background: rgba(255, 255, 255, .02); }
.curso h4 { font-size: 22px; line-height: 1.15; }
.curso p { margin-top: 10px; font-size: 15px; color: var(--texto-n-2); }
.subtitulo-bloque { margin-top: 64px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--texto-n-2); }
.tema-papel .subtitulo-bloque { color: var(--tinta-2); }

/* herramientas */
.capas-herr { margin-top: 40px; display: grid; gap: 10px; max-width: 760px; }
.capa-manas { padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(46, 217, 191, .45); background: rgba(46, 217, 191, .06); font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; color: var(--ia-n); text-transform: uppercase; }
.capa-herr { display: flex; flex-wrap: wrap; gap: 8px; }
.capa-herr li { padding: 10px 14px; border-radius: 10px; border: 1px dashed rgba(236, 232, 223, .3); font-size: 14.5px; color: var(--texto-n); }
.linea-control { margin-top: 30px; }

/* reglas de a bordo */
.reglas { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--filete-p); counter-reset: regla; }
.regla { counter-increment: regla; display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 24px 28px 24px 0; border-bottom: 1px solid var(--filete-p); }
.regla:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--filete-p); }
.regla::before { content: counter(regla, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--ia-p); padding-top: 6px; }
.regla h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.regla p { margin-top: 6px; font-size: 15.5px; color: var(--tinta-2); }
.regla.calida::before { color: var(--calido-trazo); }
.nota-pie { margin-top: 22px; font-size: 15px; color: var(--tinta-2); }

/* ============================================================ PRECIOS */
.capas-precio { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.capa-precio { position: relative; border: 1px solid var(--filete-n); border-radius: 20px; padding: 24px; background: rgba(255, 255, 255, .02); }
.capa-precio svg { width: 64px; height: 56px; margin-bottom: 14px; }
.capa-precio .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ia-n); }
.capa-precio h3 { font-size: 28px; line-height: 1.1; margin: 6px 0 10px; }
.capa-precio p { font-size: 15px; color: var(--texto-n-2); }
.capa-precio .pago { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--texto-n); }
.linea-fina { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--texto-n-2); }

.de-serie { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.de-serie li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--filete-p); font-size: 14.5px; background: rgba(255, 255, 255, .5); }
.de-serie-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tinta-2); margin-top: 30px; }
.franja { margin-top: 40px; border-radius: 22px; padding: clamp(22px, 3vw, 36px); background: var(--noche); color: var(--texto-n); }
.franja h3 { font-size: clamp(24px, 2.6vw, 34px); }
.franja ul.gar { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--filete-n); }
.franja .gar li { padding: 18px 18px 6px 0; }
.franja .gar li + li { padding-left: 18px; border-left: 1px solid var(--filete-n); }
.franja .gar b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.15; }
.franja .gar span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--texto-n-2); }
.franja .gar li.calida b { color: var(--brasa); }
.franja .mas { margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgba(157, 184, 242, .4); display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; font-size: 15px; color: var(--texto-n-2); }
.franja .cierre-franja { margin-top: 16px; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--texto-n); }

.planes { margin-top: 44px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--filete-p); border-radius: 22px; padding: 22px 20px; background: rgba(255, 255, 255, .55); position: relative; }
.plan.recomendado { background: var(--noche); color: var(--texto-n); border-color: var(--noche); box-shadow: 0 40px 80px -50px rgba(8, 12, 17, .9); }
.plan .marca-rec { position: absolute; top: -12px; left: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--marfil); color: var(--noche); }
.plan-nombre { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; }
.plan-precio { margin-top: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.plan-importe { font-family: var(--font-serif); font-size: clamp(40px, 3.6vw, 54px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.selector-pago { margin-top: 22px; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--filete-p); border-radius: 999px; background: rgba(255, 255, 255, .5); }
.pago-op { font: inherit; font-size: 15px; padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--tinta-2); cursor: pointer; }
.pago-op[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.pago-ahorro { margin-left: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ia-p); }
.pago-op[aria-pressed="true"] .pago-ahorro { color: var(--ia-n); }
.pago-nota { margin-top: 10px; font-size: 14.5px; color: var(--tinta-2); }
.plan-importe .desde { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; margin-right: 4px; }
.plan-periodo { font-size: 14px; color: var(--tinta-2); }
.plan.recomendado .plan-periodo, .plan.recomendado .plan-lema, .plan.recomendado .plan-incluye li, .plan.recomendado .plan-sub { color: var(--texto-n-2); }
.plan-tripulacion { margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--filete-p); border-bottom: 1px solid var(--filete-p); display: grid; gap: 4px; font-size: 14.5px; }
.plan.recomendado .plan-tripulacion { border-color: var(--filete-n); }
.plan-tripulacion .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ia-p); }
.plan.recomendado .plan-tripulacion .t { color: var(--ia-n); }
.plan-tripulacion b { font-weight: 600; }
.plan-lema { margin-top: 12px; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.3; color: var(--tinta-2); }
.plan-incluye { margin-top: 16px; flex: 1; }
.plan-incluye .proximamente { margin-bottom: 12px; }
.plan-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tinta-2); margin: 12px 0 6px; }
.plan-incluye ul { display: grid; gap: 7px; }
.plan-incluye li { font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); padding-left: 14px; position: relative; }
.plan-incluye li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border: 1px dashed currentColor; border-radius: 50%; }
.plan .boton { margin-top: 20px; width: 100%; padding: 13px 16px; font-size: 15px; }
.plan.recomendado .boton-tu { background: var(--marfil); color: var(--noche); }
.planes-nota { margin-top: 16px; font-size: 14px; color: var(--tinta-2); }

.creditos { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--filete-p); vertical-align: top; }
.tabla th { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tinta-2); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px; }
.packs { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.packs li { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--filete-p); background: rgba(255, 255, 255, .55); font-size: 14.5px; }
.packs b { font-weight: 600; }
.asientos { margin-top: 12px; display: grid; gap: 6px; font-size: 15px; }
.asientos li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.asientos li b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; padding-top: 3px; }

.escalera { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.escalera li { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--filete-n); font-size: 14.5px; color: var(--texto-n-2); }
.escalera li b { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ia-n); font-weight: 600; margin-bottom: 4px; }
.escalera li:nth-child(1) { margin-top: 36px; } .escalera li:nth-child(2) { margin-top: 24px; } .escalera li:nth-child(3) { margin-top: 12px; }
.agentes { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.agente { border: 1px solid var(--filete-n); border-radius: 18px; padding: 20px; background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; }
.agente svg { width: 30px; height: 30px; stroke: var(--ia-n); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.agente .plan-nombre { margin-top: 14px; letter-spacing: 1.6px; font-size: 12.5px; }
.agente .plan-precio { margin-top: 8px; }
.agente .plan-importe { font-size: 36px; }
.agente .plan-periodo { color: var(--texto-n-2); }
.agente p { margin-top: 12px; font-size: 14.5px; color: var(--texto-n-2); }
.agente p.decide { margin-top: auto; padding-top: 12px; color: var(--brasa); font-size: 14px; }
.tripulacion-completa { margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 32px; align-items: center; padding: 26px 28px; border-radius: 22px; border: 1px solid rgba(46, 217, 191, .45); background: linear-gradient(120deg, rgba(46, 217, 191, .10), rgba(255, 201, 138, .06)); }
.tripulacion-completa .plan-importe { font-size: clamp(44px, 4.4vw, 60px); }
.tripulacion-completa p { font-size: 15.5px; color: var(--texto-n-2); max-width: 52ch; }
.tripulacion-completa .ahorro { font-family: var(--font-mono); font-size: 13px; color: var(--texto-n); border: 1px solid var(--filete-n); padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.de-serie-n { margin-top: 26px; font-size: 15px; color: var(--texto-n-2); max-width: 90ch; }
.de-serie-n b { color: var(--texto-n); font-weight: 600; }

.asesor-planes { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.asesor-plan { border: 1px solid var(--filete-p); border-radius: 22px; padding: 26px; background: rgba(255, 255, 255, .55); }
.asesor-plan ul { margin-top: 16px; display: grid; gap: 9px; }
.asesor-plan li { font-size: 15px; color: var(--tinta-2); padding-left: 18px; position: relative; }
.asesor-plan li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--ia-p); }
.montajes { margin-top: 28px; }
.montajes td.total { font-family: var(--font-serif); font-size: 22px; }
.condiciones { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.condiciones li { padding: 18px; border-radius: 16px; border: 1px solid var(--filete-p); background: rgba(255, 255, 255, .55); font-size: 15px; color: var(--tinta-2); }
.condiciones li b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--tinta); margin-bottom: 6px; }
.condiciones .proximamente { margin-top: 10px; }

/* ============================================================ CONTACTO */
.cab-contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cab-contacto .entrada { margin-top: 22px; }
.formulario { position: relative; }
.formulario h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; margin-bottom: 18px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 14px; font-weight: 600; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta); background: var(--calido-casilla); border: 1px solid #C7AE8A;
  border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: #6A6152; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--calido-titulo); outline-offset: 2px; border-color: var(--calido-titulo); }
.consentimiento { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; margin-top: 4px; }
.consentimiento input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tinta); }
.consentimiento a { color: var(--tinta); }
.formulario .boton { margin-top: 18px; }
.oculto-bot { display: none; }
.aviso-form { margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.aviso-form.ok { background: #E7F1E7; color: #1F4A23; border: 1px solid #9CC3A0; }
.aviso-form.mal { background: #FBE9E5; color: #7E2414; border: 1px solid #E2A595; }
.lateral { display: grid; gap: 14px; }
.tarjeta-n { border: 1px solid var(--filete-n); border-radius: 18px; padding: 22px; background: rgba(255, 255, 255, .02); }
.tarjeta-n h2, .tarjeta-n h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--texto-n-2); margin-bottom: 12px; font-weight: 500; }
.tarjeta-n p, .tarjeta-n address { font-style: normal; font-size: 16px; color: var(--texto-n); }
.tarjeta-n a { color: var(--texto-n); }
.despues { display: grid; gap: 10px; counter-reset: des; }
.despues li { counter-increment: des; display: grid; grid-template-columns: 30px 1fr; gap: 8px; font-size: 15.5px; color: var(--texto-n); }
.despues li::before { content: counter(des, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--ia-n); padding-top: 3px; }
.despues li:last-child::before { color: var(--brasa); }
.demo-ver { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: dv; }
.demo-ver li { counter-increment: dv; border: 1px solid var(--filete-p); border-radius: 18px; padding: 22px; background: rgba(255, 255, 255, .55); }
.demo-ver li::before { content: counter(dv, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--ia-p); }
.demo-ver li.decides { background: var(--calido-panel); border-color: var(--calido-borde); }
.demo-ver li.decides::before { color: var(--calido-titulo); }
.demo-ver h4 { font-size: 22px; line-height: 1.15; margin: 8px 0 6px; }
.demo-ver p { font-size: 15px; color: var(--tinta-2); }
.dia { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--filete-p); }
.dia li { padding: 22px 24px 4px 0; }
.dia li + li { padding-left: 24px; border-left: 1px solid var(--filete-p); }
.dia .hora { font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.dia .hora small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tinta-2); margin-top: 8px; }
.dia p { margin-top: 12px; font-size: 15.5px; color: var(--tinta-2); }
/* «Por la mañana», «A media mañana», «Antes de comer»: titulares en tinta (antes heredaban el gris de .dia p) */
.dia p.hora { margin-top: 0; color: var(--tinta); }
.dia li.decides .hora small { color: var(--calido-titulo); }

/* ============================================================ PORTADA PROVISIONAL (se sustituye al unir la portada definitiva) */
.portada-prov { min-height: 100vh; }
.portada-prov .fila-etiquetas { margin-top: 22px; }
.puertas { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.puertas a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: 20px; border: 1px solid var(--filete-n); background: rgba(255, 255, 255, .02); text-decoration: none; color: var(--texto-n); transition: border-color .25s, background .25s; }
.puertas a:hover { border-color: rgba(46, 217, 191, .5); background: rgba(46, 217, 191, .05); }
.puertas .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ia-n); }
.puertas .t { font-family: var(--font-serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; }
.puertas .d { font-size: 15px; color: var(--texto-n-2); }
.puertas li.decides a { border-color: rgba(255, 201, 138, .5); background: rgba(255, 201, 138, .06); }
.puertas li.decides .n { color: var(--brasa); }
@media (max-width: 999px) { .puertas { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ LEGAL */
.legal-cab .legal-meta { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--texto-n-2); }
.legal { max-width: 780px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--tinta-2); }
.legal h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; color: var(--tinta); margin: 48px 0 14px; padding-top: 22px; border-top: 1px solid var(--filete-p); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 21px; color: var(--tinta); margin: 28px 0 10px; }
.legal p { margin: 12px 0; }
.legal ul { margin: 12px 0; display: grid; gap: 8px; }
.legal li { padding-left: 20px; position: relative; }
.legal li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 8px; height: 1px; background: var(--ia-p); }
.legal strong { color: var(--tinta); font-weight: 600; }
.legal a { color: var(--ia-p); text-underline-offset: 3px; }
.legal code { font-family: var(--font-mono); font-size: .88em; background: var(--ia-fondo-p); color: var(--ia-tinta-p); padding: 1px 6px; border-radius: 4px; }
.legal hr { border: 0; border-top: 1px solid var(--filete-p); margin: 40px 0 20px; }
.legal .last-updated { margin-top: 36px; font-family: var(--font-mono); font-size: 13px; }

/* ============================================================ TABLETA Y MÓVIL */
@media (max-width: 1180px) {
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .agentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja ul.gar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja .gar li, .franja .gar li + li { padding: 16px 16px 12px 0; border-left: 0; border-bottom: 1px solid var(--filete-n); }
}
@media (max-width: 999px) {
  :root { --barra: 64px; }
  body { font-size: 16px; }
  .menu-boton { display: inline-flex; }
  /* panel del menú: fondo OPACO del bloque Dúo noche (con .985 se transparentaba el titular de detrás) */
  .menu { position: fixed; top: var(--barra); left: 0; right: 0; z-index: 210; background: var(--noche); border-bottom: 1px solid rgba(46, 217, 191, .2); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8); padding: 8px 16px 20px; display: none; }
  .menu.abierto { display: block; }
  .menu-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-lista a { display: block; padding: 16px 4px; font-size: 18px; border-bottom: 1px solid var(--filete-n); }
  .menu-lista a::after { display: none; }
  .menu-lista a[aria-current="page"] { color: var(--brasa); }
  .barra .menu-cta { margin-top: 16px; width: 100%; padding: 15px 18px; font-size: 16px; }
  .cab-func, .plano, .cab-contacto, .creditos, .llamada { grid-template-columns: minmax(0, 1fr); }
  .llamada .acciones { justify-content: flex-start; }
  .definicion { border-left: 0; padding-left: 0; border-top: 1px solid var(--filete-n); padding-top: 22px; }
  .verbos { grid-template-columns: minmax(0, 1fr); }
  .verbo, .verbo + .verbo, .verbo.tras-bisagra, .verbo.ultimo { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--filete-n); }
  .bisagra { writing-mode: horizontal-tb; transform: none; border: 1px solid rgba(255, 201, 138, .45); border-radius: 12px; padding: 14px 16px; margin: 16px 0; text-align: center; line-height: 1.5; }
  .paso { grid-template-columns: 70px minmax(0, 1fr); }
  .paso > :nth-child(3) { grid-column: 2; }
  .paso .paso-n { font-size: 42px; }
  .entradilla-plantas, .cuadricula, .cuadricula.tres, .reglas, .asesor-planes { grid-template-columns: minmax(0, 1fr); }
  .regla:nth-child(2n) { padding-left: 0; border-left: 0; }
  .ficha-planta { grid-template-columns: minmax(0, 1fr); }
  /* ficha en una columna: el icono va en línea con el número y el título, no en una fila propia */
  .ficha-lado { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
  .ficha-lado > * { grid-column: 1; }
  .ficha-lado .icono { grid-column: 2; grid-row: 1 / span 2; width: 42px; height: 42px; align-self: center; }
  .ficha-lado h3 { margin-bottom: 4px; }
  .ficha-lado .estado { margin-top: 10px; }
  .recorrido, .demo-ver { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nivel { grid-template-columns: minmax(0, 1fr); }
  .capas-precio { grid-template-columns: minmax(0, 1fr); }
  .escalera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escalera li:nth-child(n) { margin-top: 0; }
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tripulacion-completa { grid-template-columns: minmax(0, 1fr); }
  .tripulacion-completa .ahorro { white-space: normal; justify-self: start; border-radius: 14px; }
  .paso > * { min-width: 0; }
  .correo-ej { grid-template-columns: 22px minmax(0, 1fr); }
  .correo-ej .que { grid-column: 2; }
  .dia { grid-template-columns: minmax(0, 1fr); }
  .dia li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--filete-p); }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-rejilla > :first-child { grid-column: 1 / -1; }
  .edificio { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .seccion { padding-top: 72px; padding-bottom: 72px; }
  .cabecera-pagina { padding-top: calc(var(--barra) + 44px); }
  .marca-nombre { letter-spacing: 9px; }
  .ficha-campos { grid-template-columns: minmax(0, 1fr); }
  .recorrido, .demo-ver, .planes, .agentes, .escalera { grid-template-columns: minmax(0, 1fr); }
  .franja ul.gar { grid-template-columns: minmax(0, 1fr); }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .asientos li { grid-template-columns: 1fr; gap: 0; }
  .dimensiones { grid-template-columns: minmax(0, 1fr); }
  .ascensor { padding: 14px; }
  .ascensor ol a { grid-template-columns: 36px 24px 1fr; padding: 8px; }
  .ascensor .ir { display: none; }
  .ascensor .boton-planta { width: 36px; height: 36px; }
  .faq .respuesta { padding-right: 0; }
  .pie-rejilla { grid-template-columns: minmax(0, 1fr); }
  .boton { white-space: normal; }
  .tabla { font-size: 14px; }
}

/* ============================================================ MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marca-nombre { animation: none; background-position: 0% 50%; }
}

/* 2026-10-10 · precios, contacto y legales */
[hidden] { display: none !important; }
.nota-desarrollo { margin-top: 22px; max-width: 62ch; padding: 10px 0 10px 16px; border-left: 2px solid var(--brasa); font-size: 15.5px; color: var(--texto-n-2); }
.plan-todo { margin: 0 0 4px; padding: 9px 12px; border-radius: 12px; background: var(--ia-fondo-p); color: var(--ia-tinta-p); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.plan.recomendado .plan-todo { background: rgba(46, 217, 191, .14); color: var(--ia-n); }
.cred-t { display: flex; align-items: center; gap: 10px; margin: 30px 0 10px; font-size: 20px; line-height: 1.2; }
.cred-t:first-of-type { margin-top: 18px; }
.cred-t-1 { margin-top: 0 !important; }
.cred-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ia-p); color: var(--ia-p); font-family: var(--font-mono); font-size: 12.5px; }
.consumo { margin: 4px 0 18px; padding: 18px 18px 14px; border-radius: 16px; border: 1px solid var(--filete-p); background: rgba(255, 255, 255, .55); }
.consumo-pista { position: relative; height: 16px; border-radius: 999px; background: var(--ia-fondo-p); border: 1px solid var(--filete-p); margin-bottom: 30px; }
.consumo-lleno { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, var(--ia-p), #2E7F8F); }
.consumo-extra { position: absolute; left: 80%; top: 0; bottom: 0; right: 0; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(45deg, rgba(174, 56, 35, .22) 0 6px, transparent 6px 12px); }
.consumo-marca { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--tinta); font-style: normal; }
.consumo-marca.m80 { left: 64%; }
.consumo-marca.m100 { left: 80%; }
.consumo-marca b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.consumo-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--tinta-2); }
.consumo-leyenda .ex { color: var(--rojo-p); }
.pasos-marcha { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: pm; }
.pasos-marcha li { counter-increment: pm; position: relative; border: 1px solid var(--filete-p); border-radius: 18px; padding: 22px; background: rgba(255, 255, 255, .55); }
.pasos-marcha li::before { content: counter(pm, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--ia-p); }
.pasos-marcha li.decides { background: var(--calido-panel); border-color: var(--calido-borde); }
.pasos-marcha li.decides::before { color: var(--calido-titulo); }
.pasos-marcha h3 { font-size: 22px; line-height: 1.15; margin: 8px 0 6px; }
.pasos-marcha p { font-size: 15px; color: var(--tinta-2); }
.pasos-nota { margin-top: 22px; font-size: 16px; color: var(--tinta-2); }
.legal a { color: var(--ia-p); }
@media (max-width: 1100px) { .pasos-marcha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pasos-marcha { grid-template-columns: minmax(0, 1fr); } }

/* 2026-10-10 · funcionalidades */
.h2-ancho { max-width: 30ch; }
.nota-ficticia { margin-top: 18px; max-width: 62ch; padding: 4px 0 4px 14px; border-left: 2px solid var(--brasa); font-size: 15.5px; color: var(--texto-n-2); }

/* índice de página en tres grupos */
.indice-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: ind; border: 1px solid var(--filete-n); border-radius: 20px; background: rgba(255, 255, 255, .02); overflow: hidden; }
.indice-grupo { padding: 22px 20px 14px; }
.indice-grupo + .indice-grupo { border-left: 1px solid var(--filete-n); }
.indice .indice-rotulo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px 10px; font-family: var(--font-serif); font-size: 24px; line-height: 1.1; letter-spacing: -.01em; text-transform: none; color: var(--marfil); }
.indice .indice-rotulo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 4px rgba(255, 201, 138, .16); }
.indice .indice-grupos ol { display: grid; gap: 2px; counter-reset: none; }
.indice .indice-grupos a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; font-size: 16px; line-height: 1.25; color: var(--texto-n); }
.indice .indice-grupos a:hover, .indice .indice-grupos a:focus-visible { border-color: rgba(46, 217, 191, .4); background: rgba(46, 217, 191, .07); }
.indice a small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: var(--texto-n-2); }

/* ficha del despacho (calida, como su planta) */
.ficha-planta.despacho { background: linear-gradient(125deg, rgba(214, 140, 60, .13), rgba(255, 255, 255, .55) 60%); }
.ficha-planta.despacho .icono { stroke: var(--calido-trazo); }
.ficha-planta.despacho .planta-num { color: var(--calido-titulo); }

/* lo que usas cada día */
.usos { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.uso { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border: 1px solid var(--filete-p); border-radius: 20px; background: rgba(255, 255, 255, .55); transition: border-color .3s, box-shadow .3s; }
.uso:hover { border-color: rgba(8, 98, 127, .45); box-shadow: 0 24px 50px -38px rgba(8, 98, 127, .7); }
.uso .ico { box-sizing: content-box; width: 26px; height: 26px; padding: 12px; margin-bottom: 6px; border-radius: 14px; background: var(--ia-fondo-p); stroke: var(--ia-p); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.uso h3 { font-size: 21px; line-height: 1.15; }
.uso p { font-size: 15px; color: var(--tinta-2); }
.usos-mas { margin-top: 28px; max-width: 80ch; font-size: 16px; color: var(--tinta-2); }
.usos-futuro { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 15px; color: var(--tinta-2); }

/* formación: la primera destacada a doble ancho y cuatro iguales */
.cursos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.curso { grid-column: span 2; }
.curso:nth-child(2) { grid-column: span 3; }
.curso { display: flex; flex-direction: column; align-items: flex-start; }
.curso .proximamente { margin-bottom: 14px; }
.curso:first-child { grid-column: span 3; padding: clamp(24px, 3vw, 36px); background: linear-gradient(135deg, rgba(46, 217, 191, .09), rgba(255, 255, 255, .02) 65%); border-color: rgba(46, 217, 191, .4); }
.curso:first-child h4 { font-size: clamp(28px, 3vw, 38px); line-height: 1.08; }
.curso:first-child p { font-size: 17px; max-width: 46ch; }

/* para cada persona */
.personas { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.persona { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--filete-n); border-radius: 20px; background: rgba(255, 255, 255, .02); }
.persona:first-child { border-color: rgba(255, 201, 138, .5); background: rgba(255, 201, 138, .06); }
.persona .ico { width: 34px; height: 34px; stroke: var(--ia-n); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.persona:first-child .ico { stroke: var(--brasa); }
.persona-nivel { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ia-n); }
.persona:first-child .persona-nivel { color: var(--brasa); }
.persona h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; margin: 8px 0 16px; }
.persona-lista { display: grid; gap: 10px; font-size: 15.5px; color: var(--texto-n-2); }
.persona-lista li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.persona-lista li::before { content: ''; width: 7px; height: 7px; margin-top: 8px; border: 1.5px solid var(--ia-n); border-radius: 2px; transform: rotate(45deg); }
.flujo { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr) 132px minmax(0, 1fr); align-items: stretch; }
.fl-nodo { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--filete-n); border-radius: 18px; background: rgba(255, 255, 255, .03); }
.fl-nodo p { font-size: 15px; color: var(--texto-n-2); }
.fl-nodo .fl-rotulo { font-family: var(--font-serif); font-size: 21px; line-height: 1.15; color: var(--texto-n); }
.fl-nodo.fl-cima { border-color: rgba(255, 201, 138, .55); background: rgba(255, 201, 138, .07); }
.fl-nodo .fl-ia { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; color: var(--ia-n); }
.fl-ia i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ia-n); box-shadow: 0 0 0 3px rgba(46, 217, 191, .18); }
.fl-ia i + i + i { margin-right: 4px; }
.fl-enlace { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; text-align: center; }
.fl-enlace svg { width: 64px; height: 36px; stroke: var(--ia-n); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fl-enlace span { font-size: 12px; line-height: 1.25; color: var(--texto-n-2); }

/* tus herramientas: equipo, capa de IA y herramientas */
.esquema { margin-top: 40px; max-width: 980px; display: grid; }
.esq-nodo { padding: 22px 24px; border: 1px solid var(--filete-p); border-radius: 20px; background: rgba(255, 255, 255, .55); }
.esq-rotulo { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ia-p); }
.esq-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.esq-fichas li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--filete-p); background: var(--papel); font-size: 14.5px; }
.esq-manas { background: var(--noche); color: var(--texto-n); border-color: rgba(46, 217, 191, .5); box-shadow: 0 30px 70px -40px rgba(8, 98, 127, .8), inset 0 0 0 1px rgba(46, 217, 191, .12); }
.esq-manas .esq-rotulo { color: var(--ia-n); }
.esq-manas .esq-texto { margin-top: 8px; font-family: var(--font-serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.25; color: var(--marfil); }
.esq-manas .esq-fichas li { background: rgba(46, 217, 191, .07); border-color: rgba(46, 217, 191, .35); color: var(--texto-n); }
.esq-enlace { display: flex; align-items: center; justify-content: center; gap: 12px; height: 70px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .4px; color: var(--tinta-2); }
.esq-enlace svg { width: 36px; height: 50px; stroke: var(--ia-p); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.esq-herr { overflow: hidden; padding-bottom: 18px; }
.cinta { margin-top: 16px; display: grid; gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
/* cada fila: dos lotes iguales (el segundo, aria-hidden) que avanzan su propio ancho; cada lote ocupa al menos la fila, así no queda hueco */
.cinta-fila { display: flex; overflow: hidden; }
.cinta-lote { display: flex; flex: none; min-width: 100%; justify-content: space-around; gap: 12px; padding-right: 12px; animation: cintaCorre 44s linear infinite; }
.cinta-fila.inversa .cinta-lote { animation-direction: reverse; }
.cinta-fila.lenta .cinta-lote { animation-duration: 64s; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 14px; border: 1px solid var(--filete-p); background: var(--papel); color: var(--tinta); font-size: 15px; white-space: nowrap; }
.chip .ico { width: 24px; height: 24px; flex: none; stroke: var(--ia-p); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* cinta de logotipos del bloque de conexiones: en gris; cada marca pasa a su color (--marca) al pasar el ratón */
.cinta-marcas { margin-top: 28px; }
.chip-marca { transition: border-color .3s ease; }
.chip .logo-marca { width: 22px; height: 22px; flex: none; filter: grayscale(1) brightness(0); opacity: .5; transition: filter .3s ease, opacity .3s ease; }
.chip .logo-marca.monograma { filter: grayscale(1); opacity: .6; }
.chip-marca:hover, .chip-marca:focus-within { border-color: var(--marca); }
.chip-marca:hover .logo-marca, .chip-marca:focus-within .logo-marca { filter: none; opacity: 1; }
@keyframes cintaCorre { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.cinta:hover .cinta-lote, .cinta:focus-within .cinta-lote { animation-play-state: paused; }
.linea-conexion { margin-top: 26px; }
.herr-textos { margin-top: 30px; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 32px; align-items: center; }
.herr-textos .linea-control { margin-top: 0; }
.herr-nota { font-size: 17px; line-height: 1.5; color: var(--tinta-2); }
.herr-nota b { color: var(--tinta); font-weight: 600; }

@media (max-width: 1279px) {
  .cursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curso, .curso:nth-child(2) { grid-column: auto; }
  .curso:first-child { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 1199px) {
  .usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .indice-grupos { grid-template-columns: minmax(0, 1fr); }
  .indice-grupo + .indice-grupo { border-left: 0; border-top: 1px solid var(--filete-n); }
  .personas { grid-template-columns: minmax(0, 1fr); }
  .flujo { grid-template-columns: minmax(0, 1fr); }
  .fl-enlace { flex-direction: row; justify-content: center; gap: 14px; padding: 6px 0; }
  .fl-enlace svg { transform: rotate(90deg); margin: 14px -8px; flex: none; }
  .fl-enlace span { max-width: 14ch; text-align: left; }
  .herr-textos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .usos, .cursos { grid-template-columns: minmax(0, 1fr); }
  .indice a small { display: none; }
  .esq-nodo { padding: 18px; }
  .esq-enlace { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinta { -webkit-mask-image: none; mask-image: none; }
  .cinta-lote { animation: none; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .cinta-lote[aria-hidden="true"] { display: none; }
}

/* plano y ascensor en el orden del edificio 3D: tu despacho, en cálido */
.edificio a.despacho .orbe { fill: var(--brasa); }
.edificio a.despacho .rotulo-t { fill: var(--marfil); }
.ascensor a.despacho .boton-planta { border-color: rgba(255, 201, 138, .6); color: var(--brasa); }
.ascensor a.despacho svg { stroke: var(--brasa); }


/* 2026-10-10 · jerarquía */
.linea-sector { margin-top: 20px; max-width: 58ch; padding: 4px 0 4px 16px; border-left: 2px solid var(--brasa); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: var(--texto-n); }
.proximamente + h3, .proximamente + h4 { margin-top: 12px; }
.fila-desde { margin-top: 10px; }

/* marca discreta «Desde …» */
.desde-plan {
  display: inline-block; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; line-height: 1.2; color: var(--ia-n);
}
.tema-papel .desde-plan { color: var(--ia-p); }
.tema-papel .tema-noche .desde-plan, .tema-papel .franja .desde-plan { color: var(--ia-n); }

/* tres pilares de la entrada */
.pilares { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pilar { position: relative; display: grid; text-decoration: none; align-content: start; gap: 8px; height: 100%; padding: 24px 24px 54px; border: 1px solid var(--filete-n); border-radius: 20px; background: rgba(255, 255, 255, .02); transition: border-color .2s, background .2s, transform .2s; }
.pilar:hover { border-color: rgba(46, 217, 191, .5); background: rgba(46, 217, 191, .06); transform: translateY(-2px); }
.pilar-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--ia-n); }
.pilar b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.pilar-t { font-size: 15.5px; color: var(--texto-n-2); }
.pilar-ir { position: absolute; left: 24px; bottom: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ia-n); }
.pilar.calido { border-color: rgba(255, 201, 138, .5); background: rgba(255, 201, 138, .06); }
.pilar.calido:hover { border-color: var(--brasa); background: rgba(255, 201, 138, .1); }
.pilar.calido .pilar-n, .pilar.calido .pilar-ir { color: var(--brasa); }

/* cuatro enlaces de entrada (P1-P4 de Funcionalidades): 2 + 2 y, en pantalla ancha, en una fila */
@media (min-width: 1000px) { .pilares.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pilares.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* tarjetas «en camino» */
.tarjetas-prox { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.prox-tarjeta { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px dashed rgba(157, 184, 242, .5); border-radius: 18px; background: repeating-linear-gradient(45deg, rgba(157, 184, 242, .05) 0 8px, transparent 8px 16px); }
.prox-tarjeta h3 { font-size: clamp(22px, 2vw, 27px); line-height: 1.12; }
.prox-tarjeta p { margin-top: 8px; font-size: 15.5px; color: var(--texto-n-2); }
.prox-tarjeta .fila-desde { margin-top: auto; padding-top: 14px; }

/* reglas con etiqueta */
.regla .proximamente { margin-bottom: 10px; }

/* seguridad y datos */
.seguridad { margin-top: 22px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.seguridad > .seg { grid-column: span 2; }
.seguridad > .seg:nth-child(n+4) { grid-column: span 3; }
.seg { position: relative; padding: 24px 22px 22px; border: 1px solid var(--filete-p); border-radius: 18px; background: rgba(255, 255, 255, .55); }
.seg::before { content: ''; display: block; width: 22px; height: 22px; margin-bottom: 14px; border-radius: 50%; background: var(--ia-fondo-p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308627F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 1px rgba(8, 98, 127, .3); }
.seg h4 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.15; }
.seg p { margin-top: 8px; font-size: 15px; color: var(--tinta-2); }
.seg.calida { background: var(--calido-panel); border-color: var(--calido-borde); }
.seg.calida::before { background-color: var(--papel-calido); box-shadow: 0 0 0 1px var(--calido-trazo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5652B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.seg-prox { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; border-style: dashed; border-color: rgba(47, 91, 174, .55); background: repeating-linear-gradient(45deg, rgba(47, 91, 174, .05) 0 8px, transparent 8px 16px); }
.seg-prox::before { display: none; }
.seg-lista { margin-top: 10px; display: grid; gap: 6px; font-size: 15px; color: var(--tinta-2); }
.seg-lista li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.seg-lista li::before { content: ''; width: 7px; height: 7px; margin-top: 8px; border: 1.5px solid var(--plano-p); border-radius: 2px; transform: rotate(45deg); }
.aviso-peq { margin-top: 18px; font-size: 14px; color: var(--tinta-2); }

/* cada puesto, su cuadro */
.cuadro-puesto { margin-top: 28px; padding: clamp(22px, 3vw, 34px); border: 1px dashed rgba(157, 184, 242, .55); border-radius: 20px; background: repeating-linear-gradient(45deg, rgba(157, 184, 242, .05) 0 8px, transparent 8px 16px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cuadro-puesto h3 { margin-top: 14px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.cuadro-puesto > p { margin-top: 8px; max-width: 70ch; font-size: 16.5px; color: var(--texto-n-2); }
.cp-fuentes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 0; align-items: center; }
.cp-fuentes li { padding: 8px 14px; border: 1px solid var(--filete-n); border-radius: 999px; font-size: 14.5px; background: rgba(255, 255, 255, .03); }
.cp-fuentes li + li { margin-left: 28px; position: relative; }
.cp-fuentes li + li::before { content: '+'; position: absolute; left: -19px; top: 50%; transform: translateY(-50%); color: var(--ia-n); font-family: var(--font-mono); }
.cuadro-puesto > .cp-resultado { margin-top: 14px; padding: 10px 16px; border: 1px solid rgba(255, 201, 138, .5); border-radius: 14px; background: rgba(255, 201, 138, .07); color: var(--marfil); font-size: 15.5px; }
.cp-resultado span { color: var(--brasa); margin-right: 6px; }

/* garantía de persona y línea con etiqueta */
.garantia-persona { margin-top: 22px; max-width: 760px; }
.pt-lista { display: grid; gap: 10px; font-size: 16px; }
.pt-lista li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.pt-lista li::before { content: ''; width: 7px; height: 7px; margin-top: 8px; border: 1.5px solid var(--calido-trazo); border-radius: 2px; transform: rotate(45deg); }
.linea-prox { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-family: var(--font-serif); font-size: clamp(20px, 2vw, 25px); }

/* abrir la ficha con lo más valioso */
.lo-mas { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ia-p); }
.ficha-planta.despacho .lo-mas { color: var(--calido-titulo); }

/* escalera de contexto por plan */
.esc-intro { margin-top: 14px; max-width: 62ch; font-size: 17px; }
.escalera:has(.esc-paso) { margin-top: 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.escalera .esc-paso, .escalera li.esc-paso:nth-child(n) { margin-top: 0; font-size: inherit; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: calc(92px + var(--n) * 30px); padding: 18px; color: var(--ia-tinta-p); border: 1px solid rgba(8, 98, 127, .35); border-radius: 16px; background: linear-gradient(180deg, rgba(8, 98, 127, calc(var(--n) * .035)), var(--ia-fondo-p)); }
.esc-plan { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ia-p); }
.escalera .esc-paso b { display: block; margin-bottom: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--ia-tinta-p); }
.escalera .esc-paso.calido { background: var(--calido-panel); border-color: var(--calido-borde); }
.esc-paso.calido .esc-plan { color: var(--calido-titulo); }
.escalera .esc-paso.calido b { color: var(--tinta); }
.esc-hace { font-size: 14.5px; line-height: 1.35; color: var(--tinta-2); }

/* cuadro de planes */
.tabla-planes { margin-top: 36px; border: 1px solid var(--filete-n); border-radius: 20px; background: rgba(255, 255, 255, .02); overflow: hidden; }
.tabla-planes table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabla-planes thead th { padding: 18px 12px; text-align: left; font-family: var(--font-serif); font-weight: 400; font-size: 21px; line-height: 1.1; border-bottom: 1px solid var(--filete-n); vertical-align: bottom; }
.tabla-planes thead th small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .6px; color: var(--texto-n-2); }
.tabla-planes thead th.col-rec, .tabla-planes td:nth-child(4) { background: rgba(46, 217, 191, .05); }
.tabla-planes thead th:first-child { width: 17%; }
.tabla-planes tbody th, .tabla-planes td { padding: 14px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--filete-n); font-size: 14.5px; line-height: 1.4; }
.tabla-planes tbody th { font-weight: 600; color: var(--texto-n); }
.tabla-planes tbody th .proximamente { display: flex; width: max-content; margin-top: 8px; padding: 3px 8px; font-size: 10px; letter-spacing: 1.4px; }
.tabla-planes td { color: var(--texto-n-2); }
.tabla-planes td .proximamente { display: inline-flex; margin-top: 6px; padding: 3px 8px; font-size: 10px; letter-spacing: 1.4px; white-space: normal; }
.tabla-planes td.igual, .tabla-planes td.no-entra { color: rgba(167, 176, 180, .85); }
.tabla-planes td.igual span[aria-hidden] { color: var(--ia-n); font-size: 17px; }
.tabla-nota { margin-top: 14px; max-width: 80ch; font-size: 14px; color: var(--texto-n-2); }
.acciones-fila { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* hoy funciona / en camino */
.hoy-camino { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hoy, .camino { padding: clamp(22px, 3vw, 34px); border-radius: 20px; }
.hoy { border: 1px solid rgba(8, 98, 127, .45); background: linear-gradient(135deg, rgba(8, 98, 127, .08), rgba(255, 255, 255, .55) 70%); }
.camino { border: 1px dashed rgba(47, 91, 174, .6); background: repeating-linear-gradient(45deg, rgba(47, 91, 174, .05) 0 8px, transparent 8px 16px); }
.hoy h3, .camino h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.camino-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hoy ul, .camino ul { margin-top: 18px; display: grid; gap: 11px; font-size: 15.5px; color: var(--tinta-2); }
.hoy li, .camino li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.hoy li::before { content: ''; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ia-p); box-shadow: 0 0 0 3px rgba(8, 98, 127, .18); }
.camino li::before { content: ''; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; border: 1.5px dashed var(--plano-p); }

/* precios: panel de ajustes con etiqueta */
.de-serie li em.proximamente { margin-left: 8px; padding: 2px 8px; font-size: 10px; font-style: normal; letter-spacing: 1.4px; }
.franja .gar em.proximamente { display: inline-flex; margin-top: 8px; padding: 3px 9px; font-size: 10.5px; font-style: normal; letter-spacing: 1.4px; }

@media (max-width: 1199px) {
  .seguridad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seguridad > .seg, .seguridad > .seg:nth-child(n+4) { grid-column: span 1; }
  .seguridad > .seg:last-child { grid-column: 1 / -1; }
  .tarjetas-prox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .pilares, .hoy-camino { grid-template-columns: minmax(0, 1fr); }
  .escalera:has(.esc-paso) { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
  .escalera .esc-paso { min-height: 0; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 14px; background: linear-gradient(90deg, rgba(8, 98, 127, .16) calc(var(--n) * 20%), var(--ia-fondo-p) calc(var(--n) * 20%)); }
  .escalera .esc-paso.calido { background: var(--calido-panel); }
  .escalera li.esc-paso:has(.esc-hace) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: baseline; }
  .esc-hace { grid-column: 2; }
  .esc-plan { flex: 0 0 96px; }
  /* cuadro de planes: una tarjeta por función */
  .tabla-planes { border: 0; background: transparent; overflow: visible; }
  .tabla-planes thead { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-planes table, .tabla-planes tbody, .tabla-planes tr { display: block; }
  .tabla-planes tr { margin-bottom: 12px; border: 1px solid var(--filete-n); border-radius: 16px; background: rgba(255, 255, 255, .02); overflow: hidden; }
  .tabla-planes tbody th { display: block; padding: 14px 16px; border-top: 0; background: rgba(255, 255, 255, .04); font-size: 16px; }
  .tabla-planes td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 16px; }
  .tabla-planes td > * { grid-column: 2; }
  .tabla-planes td::before { grid-column: 1; grid-row: 1 / span 3; align-self: start; content: attr(data-plan); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ia-n); }
}
@media (max-width: 639px) {
  .seguridad, .tarjetas-prox { grid-template-columns: minmax(0, 1fr); }
  .seguridad > .seg:last-child { grid-column: auto; }
  .cp-fuentes { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cp-fuentes li + li { margin-left: 0; }
  .cp-fuentes li + li::before { display: none; }
  .esc-plan { flex-basis: 84px; }
  .tabla-planes td { grid-template-columns: 84px minmax(0, 1fr); }
}

.bajada { text-wrap: pretty; }

/* 2026-10-11 · una sola marca «Próximamente» por grupo y etiquetas encima de lo que marcan */
.grupo-prox { margin-top: 64px; }
.grupo-prox .subtitulo-bloque { margin-top: 0; }
.grupo-prox + .cuadricula, .grupo-prox + .tarjetas-prox { margin-top: 20px; }
.tareas li > .proximamente:first-child { display: flex; width: max-content; margin-bottom: 6px; }
/* v5.1 (diseño n.º 10): la marca de plan, siempre a la izquierda y en la misma línea que su texto */
.fila-li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 10px 0 0; vertical-align: 1px; }
.vigila-prox { display: block; margin-top: 12px; }
.vigila-prox > .proximamente { display: flex; width: max-content; margin-bottom: 6px; }
/* precios: sublista «En camino» con su etiqueta única dentro de cada plan */
.plan-camino { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; }
.plan-camino .proximamente, .plan-incluye .plan-camino .proximamente { margin: 0; padding: 2px 8px; font-size: 10px; letter-spacing: 1.4px; }
.lista-camino li::before { border-color: var(--plano-p); }
.plan.recomendado .lista-camino li::before { border-color: var(--plano-n); }
.asesor-plan .plan-camino { margin-top: 18px; }
.asesor-plan .lista-camino { margin-top: 8px; }
.asesor-plan .lista-camino li::before { background: var(--plano-p); }

/* v5.1 · Por áreas, «Entre áreas»: un solo nivel, cada pieza en una frase y la marca de plan al final de su línea (crítica CEO n.º 15, diseño n.º 9) */
.entre-rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.entre-lista { border-top: 1px solid var(--filete-n); }
.entre-lista li { padding: 16px 0; border-bottom: 1px solid var(--filete-n); font-family: var(--font-serif); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.35; color: var(--texto-n); }
.entre-lista .mas { color: var(--texto-n-2); }
.entre-lista .desde-plan { margin-left: 8px; vertical-align: 2px; }
@media (max-width: 899px) { .entre-rejilla { grid-template-columns: minmax(0, 1fr); } }
/* v5.1 · Por áreas: los enlaces del dibujo del edificio también enseñan el foco (cableado n.º 7, WCAG 2.4.7) */
.edificio a:focus-visible, svg a:focus-visible { outline: 2px solid var(--ia-n); outline-offset: 2px; }