@font-face { font-family: "Ibarra Real Nova"; src: url(../fonts/ibarra.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- tokens (Design System de Toisón 1.3) ---------- */
:root {
  --marca: "Ibarra Real Nova", Georgia, "Times New Roman", serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1200px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --radio: 999px; --radio-c: 18px;
  --bg: #000000; --bg2: #000000; --surf: #111111; --surf2: #1c1c1c; --borde: #313131;
  --txt: #f8f6f2; --txt2: #d2cdc5; --oro: #e3b45f; --sube: #55e8a0; --baja: #ff6b62;
  --prim: #e3b45f; --sobre-prim: #140d00; --sim-o: #f8f6f2; --sim-t: #e3b45f;
  --nav-bg: rgb(0 0 0 / .72); --nav-linea: rgb(255 255 255 / .08);
  --a-bg: #000000; --a-surf: #111111; --a-surf2: #1c1c1c; --a-borde: #313131; --a-txt: #f8f6f2; --a-txt2: #d2cdc5; --a-graf: #e3b45f; --a-sube: #55e8a0; --a-baja: #ff6b62; --a-prim: #e3b45f; --a-sobre: #140d00;
  --sombra: 0 60px 120px -40px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
  color-scheme: dark;
}
html[data-dir="marfil"] {
  --radio: 8px; --radio-c: 10px;
  /* 7 nov: los mismos tonos que el Marfil nuevo de la app (0.8.3b): crema en capas, tinta, el vino y el oro del logo */
  --bg: #ede1cc; --bg2: #e5d7bf; --surf: #fdf9f2; --surf2: #eee3d0; --borde: #dccbb0;
  --txt: #1c1915; --txt2: #4a443d; --oro: #7a5716; --sube: #08573a; --baja: #a42018;
  --prim: #4e101d; --sobre-prim: #f8efe0; --sim-o: #4e101d; --sim-t: #a87a2a;
  --nav-bg: rgb(237 225 204 / .88); --nav-linea: #dccbb0;
  --a-bg: #ede1cc; --a-surf: #fdf9f2; --a-surf2: #eee3d0; --a-borde: #dccbb0; --a-txt: #1c1915; --a-txt2: #4a443d; --a-graf: #a87a2a; --a-sube: #08573a; --a-baja: #a42018; --a-prim: #4e101d; --a-sobre: #f8efe0;
  --a-menu: #3c0b16; --a-menu-txt: #e2d0bb; --a-oro-logo: #e3b45f;
  --sombra: 10px 10px 0 #1c1915;
  /* 5 nov: «light dark» en la raíz (Samsung Internet no repinta lo que dice llevar su modo oscuro) y lo de dentro, claro */
  color-scheme: light dark;
}
html[data-dir="marfil"] body { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --sistema-oscuro: 1; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font: 400 17px/1.6 var(--ui); background: var(--bg); color: var(--txt); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color .5s, color .5s; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
.cont { max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--prim); color: var(--sobre-prim); border-radius: var(--radio); font-weight: 600; text-decoration: none; }
.salta:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; }
.s-o { fill: var(--sim-o); } .s-t { fill: var(--sim-t); }
.ejemplo { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 4px; background: var(--a-surf2); color: var(--a-txt2); font: 650 11px/1.4 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
main { position: relative; z-index: 1; }

/* ---------- mármol G (AMOLED con vetas finas): la misma textura que la app; fija, sin costuras ---------- */
html[data-dir="marmol"] body::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 28%, rgb(255 255 255 / .045) 40%, rgb(255 255 255 / .085) 46%, rgb(255 255 255 / .03) 52%, transparent 64%), radial-gradient(120% 60% at 30% -10%, rgb(255 255 255 / .07), transparent 60%), url(../marmol-g.webp) center top / cover no-repeat #000; }
@media (min-width: 900px) { html[data-dir="marmol"] body::before { background-image: linear-gradient(118deg, transparent 28%, rgb(255 255 255 / .045) 40%, rgb(255 255 255 / .085) 46%, rgb(255 255 255 / .03) 52%, transparent 64%), radial-gradient(120% 60% at 30% -10%, rgb(255 255 255 / .07), transparent 60%), url(../marmol-g-pc.webp); } }
html[data-dir="marmol"] .boton { background: linear-gradient(180deg, #f7dfa8 0%, #e3b45f 55%, #b5863a 100%); }
.brillo { position: fixed; z-index: 0; top: 0; left: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(227 180 95 / .09), transparent 60%); opacity: 0; transition: opacity .6s; }
html[data-dir="marmol"] .brillo.on { opacity: 1; }

/* ---------- cabecera fija ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--nav-linea); transition: background-color .5s; }
.nav .cont { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo svg { flex: none; width: 30px; max-width: none; height: auto; }
.logo b { font: 600 17px/1 var(--marca); letter-spacing: .16em; }
.menu { display: flex; justify-content: center; gap: 26px; font-size: 14.5px; font-weight: 500; }
.menu a { position: relative; padding: 6px 0; text-decoration: none; color: var(--txt2); white-space: nowrap; transition: color .25s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--curva); }
.menu a:hover { color: var(--txt); }
.menu a:hover::after { transform: scaleX(1); }
.derecha { display: flex; align-items: center; gap: 18px; justify-self: end; }
.ajustes { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--borde) 80%, transparent); }
.ajustes .sep { width: 1px; height: 16px; background: var(--borde); }
.estilo, .idioma { display: inline-flex; gap: 2px; }
.estilo button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.estilo i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); transition: transform .3s var(--curva); }
.estilo button[aria-pressed="true"] i { transform: scale(1.15); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--oro); }
.m-marmol { background: linear-gradient(135deg, #000 50%, #e3b45f 50%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.m-marfil { background: linear-gradient(135deg, #ede1cc 50%, #3c0b16 50%); }
.idioma button { min-width: 30px; height: 26px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; font: 650 11.5px/1 var(--ui); letter-spacing: .06em; color: var(--txt2); cursor: pointer; }
.idioma button[aria-pressed="true"] { background: var(--surf2); color: var(--txt); }
/* 7 nov: con la bandera de cada idioma delante, como en el selector de la app */
.idioma button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.idioma .bandera { width: 16px; height: 11px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .14); }
.mm-ajustes .idioma .bandera { width: 20px; height: 14px; }
.entrar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--txt); white-space: nowrap; }
.entrar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--curva); }
.entrar:hover svg { transform: translateX(3px); }
.menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-btn svg path { transition: transform .3s var(--curva), opacity .3s; transform-origin: center; }
.menu-btn.abierto svg path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn.abierto svg path:nth-child(2) { opacity: 0; }
.menu-btn.abierto svg path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.menu-movil { display: grid; gap: 4px; padding: 8px 20px 20px; border-top: 1px solid var(--nav-linea); }
.menu-movil[hidden] { display: none; }
.menu-movil a { padding: 12px 8px; font-size: 17px; font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); }
.mm-ajustes { display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 4px; }
.mm-ajustes .estilo button { width: 44px; height: 44px; } .mm-ajustes .estilo i { width: 18px; height: 18px; }
.mm-ajustes .idioma button { min-width: 48px; height: 40px; font-size: 13px; }
@media (max-width: 1180px) { .menu { gap: 18px; font-size: 14px; } .nav .cont { gap: 16px; } .derecha { gap: 12px; } .demo-wrap { width: 100%; } .movil { right: 0; } }
@media (max-width: 1160px) {
  .nav .cont { grid-template-columns: auto 1fr; }
  .menu, .ajustes { display: none; }
  .menu-btn { display: grid; }
  .derecha { gap: 8px; }
}
@media (max-width: 420px) {
  .nav .cont { gap: 10px; padding: 0 14px; }
  .logo { gap: 8px; } .logo svg { width: 26px; } .logo b { font-size: 15px; letter-spacing: .12em; }
  .entrar { font-size: 14px; padding: 8px 0; }
  .boton.chico { padding: 0 13px; font-size: 13px; }
  .derecha { gap: 6px; }
  .entrar svg { display: none; } /* 7 nov: en inglés («Log in», «Request access») la cabecera se salía 8 px a 390, y 13 px a 360 */
  .entrar { font-size: 13.5px; letter-spacing: -0.01em; } /* 12 nov: «Mi cuenta» es más larga que «Entrar»: a 390 se salía 3 px */
  .boton.chico { padding: 0 10px; }
  .derecha { gap: 4px; }
  .menu-btn { width: 38px; }
}
/* en los móviles más estrechos (360–380 px) no cabían logo, «Entrar», «Pedir acceso» y el menú: la palabra del logo se
   esconde (TOISÓN sale grande justo debajo, en la portada) y queda el símbolo */
@media (max-width: 380px) { .nav .logo b { display: none; } }

/* ---------- botones ---------- */
.boton { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--radio); border: 1px solid transparent; background: var(--prim); color: var(--sobre-prim); font-weight: 650; font-size: 15.5px; letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--curva), box-shadow .25s; }
.boton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .32) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--curva); }
.boton:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--prim) 70%, transparent); }
.boton:hover::after { transform: translateX(120%); }
.boton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton.chico { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- portada: arriba el escudo de cada estilo y el titular; debajo el correo, las cifras y la app ---------- */
.hero { position: relative; overflow: hidden; padding: 0 0 64px; --h1-d: .3s; --baja-d: .45s; }
html[data-dir="marfil"] .hero { --h1-d: .25s; --baja-d: .4s; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "escudo escudo" "titulo titulo" "texto demo"; column-gap: 44px; align-items: center; }
.escudo { grid-area: escudo; min-width: 0; }
.hero h1 { grid-area: titulo; }
.texto { grid-area: texto; max-width: 580px; margin-top: 52px; }
.demo-wrap { grid-area: demo; margin-top: 52px; }
.escudo > div { display: none; }
html[data-dir="marmol"] .esc-marmol, html[data-dir="marfil"] .esc-marfil { display: block; }
.k { display: inline-flex; align-items: flex-start; gap: 10px; line-height: 1.5; margin: 0 0 22px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.k .punto { flex: none; margin-top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sube); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sube) 50%, transparent); animation: late 2.6s ease-out infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sube) 45%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
h1 { margin: 0; font: 500 clamp(38px, 4.6vw, 62px)/1.06 var(--marca); letter-spacing: -.012em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--oro); }
html[data-dir="marfil"] h1 em { color: var(--prim); }
.ent { margin: 22px 0 0; max-width: 32em; color: var(--txt2); font-size: 18.5px; line-height: 1.6; text-wrap: pretty; }
.texto > .k-hero + .ent { margin-top: 0; }
@keyframes funde { from { opacity: 0; } to { opacity: 1; } }
@keyframes desaparece { to { opacity: 0; } }
@keyframes traza2 { from { stroke-dashoffset: 2; } to { stroke-dashoffset: 0; } }
@keyframes letra { from { opacity: 0; transform: translateY(40%) scaleY(1.3); } to { opacity: 1; transform: none; } }
@keyframes palabra { from { opacity: 0; transform: translateY(.45em) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes gira { to { transform: rotate(360deg); } }

/* el titular, palabra a palabra cuando el escudo ya está */
.hero h1 .pal { display: inline-block; animation: palabra .9s var(--curva) both; animation-delay: calc(var(--h1-d) + var(--i) * 55ms); }
html.listo .hero h1 .pal { animation-delay: calc(var(--i) * 35ms); }
.texto, .demo-wrap { animation: sube .8s var(--curva) both; animation-delay: var(--baja-d); }
.demo-wrap { animation-delay: calc(var(--baja-d) + .12s); }

/* Mármol: el relieve que se dibuja y respira */
.esc-marmol { --rw: min(100%, 780px, max(440px, calc((100svh - 440px) * 1.75))); }
.relieve { position: relative; width: var(--rw); aspect-ratio: 1120 / 640; margin: calc(var(--rw) / 1.75 * -.06) auto calc(var(--rw) / 1.75 * -.13); } /* sin máscara desde el Mármol G: la imagen ya no trae fondo (el relieve y la palabra sobre transparente) */
.relieve .lento { position: absolute; inset: 0; animation: respira 18s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.05) translateY(-1%); } }
.relieve img { position: absolute; inset: 0; width: 100%; height: 100%; animation: funde 1s ease .95s both; }
.vec { position: absolute; inset: 0; width: 100%; height: 100%; }
.relieve .vec { animation: desaparece .6s ease 1.7s forwards; }
.vec path { fill: none; stroke: #e3b45f; stroke-width: 1.1; stroke-linejoin: round; }
.vec .vo { stroke: #f6ead5; stroke-dasharray: 2; animation: traza2 1.1s cubic-bezier(.6, 0, .2, 1) .1s both; }
.vec .vt { stroke-dasharray: 2; animation: traza2 .95s cubic-bezier(.6, 0, .2, 1) .5s both; }
html[data-dir="marmol"] .hero h1 { text-align: center; max-width: 22em; margin: 0 auto; }

/* Marfil: la cabecera de periódico */
.esc-marfil { padding-top: 26px; }
.filete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 10px 0; border-top: 1px solid var(--txt); border-bottom: 3px double var(--txt); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--txt2); }
.cabecera { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 32px); padding: 22px 0 8px; border-bottom: 1px solid var(--txt); }
.cabecera svg { flex: none; width: clamp(40px, 7vw, 100px); height: auto; animation: sube 1s var(--curva) .15s both; }
.cabecera .palabra { display: flex; margin: 0; padding-top: .06em; font: 600 clamp(52px, 11vw, 150px)/1.02 var(--marca); letter-spacing: .12em; color: var(--txt); }
.cabecera .palabra span { display: inline-block; animation: letra 1.1s var(--curva) both; animation-delay: calc(.2s + var(--i) * 80ms); }
.lema { margin: 0; padding: 9px 0; border-bottom: 3px double var(--txt); text-align: center; font: italic 500 clamp(16px, 1.8vw, 20px)/1.4 var(--marca); color: var(--txt2); animation: funde 1s ease .7s both; }
html[data-dir="marfil"] .hero-grid { grid-template-areas: "escudo escudo" "titulo demo" "texto demo"; align-items: start; }
html[data-dir="marfil"] .hero h1 { margin-top: 44px; font-size: clamp(42px, 5vw, 70px); line-height: 1.02; }
html[data-dir="marfil"] .texto { margin-top: 0; }
html[data-dir="marfil"] .demo-wrap { align-self: center; margin-top: 44px; }
html[data-dir="marfil"] .k-hero { display: none; }
html[data-dir="marfil"] .hero .ent::first-letter { float: left; margin: 6px 9px 0 0; font: 600 58px/.8 var(--marca); color: var(--prim); }

@keyframes destello { to { transform: translateX(120%); } }

.acceso { margin-top: 30px; }
.campo { display: flex; gap: 8px; max-width: 520px; padding: 6px; border-radius: calc(var(--radio) + 4px); background: var(--surf); border: 1px solid var(--borde); box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset; transition: border-color .25s, box-shadow .25s; }
html[data-dir="marfil"] .campo { box-shadow: 4px 4px 0 var(--txt); border-color: var(--txt); }
.campo:focus-within { border-color: var(--oro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro) 20%, transparent); outline: 3px solid var(--oro); outline-offset: 2px; }
html[data-dir="marfil"] .campo:focus-within { box-shadow: 4px 4px 0 var(--txt), 0 0 0 4px color-mix(in srgb, var(--oro) 25%, transparent); }
.campo input { flex: 1; min-width: 0; height: 52px; padding: 0 10px 0 16px; border: 0; background: transparent; color: var(--txt); font: 400 16.5px/1 var(--ui); }
.campo input::placeholder { color: color-mix(in srgb, var(--txt2) 75%, transparent); }
.campo input:focus { outline: none; }
.nota { margin: 12px 0 0 6px; font-size: 13.5px; color: var(--txt2); }
.nota a { padding: 12px 0; color: var(--txt); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--oro) 70%, transparent); text-underline-offset: 3px; }
.nota a:hover { text-decoration-color: var(--oro); }

.cifras { display: flex; gap: 0; margin: 36px 0 0; padding: 0; list-style: none; }
.cifras li { display: grid; gap: 2px; padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid color-mix(in srgb, var(--borde) 90%, transparent); }
.cifras li:last-child { border: 0; margin: 0; padding: 0; }
.cifras b { font: 500 30px/1.1 var(--marca); letter-spacing: -.01em; min-width: 2.2ch; }
.cifras span { font-size: 13px; color: var(--txt2); white-space: nowrap; }
html[data-dir="marfil"] .cifras li { border-color: var(--txt); }

/* fondo de la portada por estilo */
.hero-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html[data-dir="marmol"] .hero-fondo { background: radial-gradient(50% 40% at 50% 22%, rgb(227 180 95 / .07), transparent 70%), radial-gradient(45% 45% at 80% 78%, rgb(227 180 95 / .11), transparent 70%); }
html[data-dir="marfil"] .hero-fondo { background: linear-gradient(180deg, var(--bg) 0, var(--bg2) 100%); }

/* ---------- la app dibujada ---------- */
.demo-wrap { position: relative; width: calc(100% + 40px); --demo-w: 700; --demo-h: 600; }
.demo { position: relative; width: 700px; height: 600px; transform-origin: 0 0; }
.ventana { position: absolute; left: 0; top: 0; width: 600px; border-radius: var(--radio-c); background: var(--a-bg); color: var(--a-txt); box-shadow: var(--sombra); overflow: hidden; transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .5s var(--curva); font: 400 12.5px/1.4 var(--ui); }
html[data-dir="marfil"] .ventana { border: 1px solid var(--txt); }
.barra-nav-web { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px; background: var(--a-surf); border-bottom: 1px solid var(--a-borde); }
.luces { display: inline-flex; gap: 6px; }
.luces i { width: 10px; height: 10px; border-radius: 50%; background: var(--a-borde); }
.url { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px; margin: 0 auto; border-radius: 6px; background: var(--a-bg); color: var(--a-txt2); font-size: 11px; letter-spacing: .01em; }
.url svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.app-cab { display: flex; align-items: center; gap: 18px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--a-borde); }
.app-logo { display: inline-flex; align-items: center; gap: 8px; }
.app-logo svg { width: 20px; } .app-logo b { font: 600 11px/1 var(--marca); letter-spacing: .14em; }
.app-tabs { display: flex; gap: 2px; margin: 0 auto; }
.app-tabs button { height: 30px; padding: 0 11px; white-space: nowrap; border: 0; border-radius: 8px; background: transparent; color: var(--a-txt2); font: 500 12px/1 var(--ui); cursor: pointer; transition: background-color .25s, color .25s; }
.app-tabs button[aria-selected="true"] { background: var(--a-surf2); color: var(--a-txt); font-weight: 650; }
.app-tabs button:hover { color: var(--a-txt); }
.app-cuerpo { position: relative; height: 392px; padding: 16px; }
.pantalla { position: absolute; inset: 16px; display: grid; gap: 12px; animation: sube .5s var(--curva) both; }
@keyframes sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.p-cartera { grid-template-columns: 1.55fr 1fr; grid-template-rows: auto 1fr; }
.pantalla > :nth-child(2) .tarj, .pantalla > :nth-child(2).tarj, .pantalla > :nth-child(2) .nota-app { padding-right: 48px; }
.tarj { padding: 14px 16px; border-radius: 14px; background: var(--a-surf); border: 1px solid var(--a-borde); }
.tarj .et { font: 500 11px/14px var(--ui); color: var(--a-txt2); display: flex; justify-content: space-between; align-items: center; }
.cifra { margin-top: 2px; font: 650 28px/32px var(--ui); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.delta { font-size: 12px; font-weight: 600; } .delta span { color: var(--a-txt2); font-weight: 400; }
.sube { color: var(--a-sube); } .baja { color: var(--a-baja); }
.spark { width: 100%; height: 70px; margin-top: 6px; overflow: visible; }
.spark .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traza 1.6s var(--curva) .2s forwards; }
.spark .ar { opacity: 0; animation: aparece .9s ease 1.1s forwards; }
.spark .punta { fill: var(--a-graf); } .spark .halo { fill: var(--a-graf); opacity: .25; animation: halo 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes traza { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }
@keyframes halo { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(3); opacity: 0; } }
.rango { display: flex; gap: 2px; margin-top: 6px; }
.rango i { padding: 3px 9px; border-radius: 6px; font: 600 10.5px/1.3 var(--ui); font-style: normal; color: var(--a-txt2); }
.rango i.on { background: var(--a-surf2); color: var(--a-txt); }
.reparto { display: flex; gap: 2px; height: 8px; margin: 10px 0 8px; border-radius: 4px; overflow: hidden; }
.reparto span { transform-origin: 0 50%; animation: barra .9s var(--curva) both; animation-delay: calc(.3s + var(--i) * .12s); }
@keyframes barra { from { transform: scaleX(0); } }
.ley { display: grid; gap: 4px; font-size: 11px; color: var(--a-txt2); }
.ley span { display: flex; align-items: center; gap: 6px; } .ley span b { color: var(--a-txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.ley i { width: 8px; height: 8px; border-radius: 2px; }
.lista { grid-column: 1 / -1; padding: 4px 16px; }
.pos { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--a-borde); font-size: 12px; }
.pos:first-child { border-top: 0; }
.pos .av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; font: 700 9px/1 var(--ui); }
.pos b { font-weight: 600; } .pos small { display: block; font-size: 10.5px; color: var(--a-txt2); }
.pos .d { text-align: right; font-variant-numeric: tabular-nums; }
.pos .d small { color: inherit; }
.pos.mas { grid-template-columns: 26px 1fr; padding: 4px 0 2px; } .pos.mas small { color: var(--a-txt2); }
.riesgo { display: flex; gap: 3px; margin-top: 8px; } .riesgo i { flex: 1; height: 6px; border-radius: 3px; background: var(--a-surf2); } .riesgo i.on { background: var(--a-graf); }
.p-paso { grid-template-columns: 1fr 1fr; }
.check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--a-borde); font-size: 12px; }
.check:first-of-type { border-top: 0; }
.check i { width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; border: 1.5px solid var(--a-txt2); }
.check.ok i { background: var(--a-prim); border-color: var(--a-prim); }
.check small { display: block; color: var(--a-txt2); font-size: 11px; }
.chip { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--a-surf2); font-size: 10px; font-weight: 600; }
.anillo { width: 54px; height: 54px; } .anillo .fondo { fill: none; stroke: var(--a-surf2); stroke-width: 5; } .anillo .lleno { fill: none; stroke: var(--a-graf); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .75; transform: rotate(-90deg); transform-origin: center; animation: anillo 1.2s var(--curva) .3s both; }
@keyframes anillo { from { stroke-dashoffset: 1; } }
.p-mercados { grid-template-columns: 1fr 1fr; }
.idx { display: grid; grid-template-columns: 1fr 60px auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--a-borde); font-size: 12px; }
.idx:first-child { border-top: 0; }
.idx b { font-weight: 600; } .idx small { display: block; color: var(--a-txt2); font-size: 10.5px; }
.idx svg { width: 60px; height: 20px; } .idx .num { text-align: right; font-weight: 600; }
.nota-app { padding: 12px 14px; border-radius: 12px; background: var(--a-surf2); font-size: 12px; } .nota-app b { display: block; margin-bottom: 2px; }
.medidor { display: flex; gap: 2px; height: 8px; margin: 10px 0 6px; border-radius: 4px; overflow: hidden; } .medidor span { transform-origin: 0 50%; animation: barra .9s var(--curva) both; }
.ff { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--a-borde); font-size: 12px; }
.ff:first-of-type { border-top: 0; }
.sg { font-size: 11px; font-weight: 700; } .sg.p { color: var(--a-sube); } .sg.n { color: var(--a-baja); } .sg.e, .sg.m { color: var(--a-txt2); }
.pesos { display: inline-flex; gap: 3px; } .pesos i { width: 6px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--a-txt) 22%, transparent); } .pesos i.on { background: var(--a-graf); }
.p-hacienda { grid-template-columns: 1fr 1fr; }
.fila { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--a-borde); font-size: 12px; } .fila:first-of-type { border-top: 0; }
.fila b { font-variant-numeric: tabular-nums; }
.tramo { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 11px; color: var(--a-txt2); padding: 4px 0; }
.tramo i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--a-surf2); overflow: hidden; } .tramo i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--a-graf); transform-origin: 0 50%; animation: barra .9s var(--curva) both; }

/* móvil */
.movil { position: absolute; right: -40px; bottom: -40px; width: 204px; aspect-ratio: 300 / 620; padding: 7px; border-radius: 34px; background: #0e0c0d; box-shadow: 0 0 0 1px #3a3336, 0 50px 90px -30px rgb(0 0 0 / .65); transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .5s var(--curva); }
html[data-dir="marfil"] .movil { box-shadow: 0 0 0 1px #3a3336, 8px 8px 0 #1c1915; }
.movil::before { content: ""; position: absolute; z-index: 6; top: 14px; left: 50%; width: 60px; height: 17px; margin-left: -30px; border-radius: 999px; background: #0e0c0d; }
.pant { position: absolute; inset: 7px; overflow: hidden; border-radius: 27px; background: var(--a-bg); color: var(--a-txt); font: 400 9px/1.4 var(--ui); }
.pant::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, rgb(255 255 255 / .07), transparent 38%); }
.pant .estado { display: flex; justify-content: space-between; padding: 12px 18px 0; font: 600 9px/1 var(--ui); }
.pant .estado svg { width: 12px; height: 8px; fill: currentColor; }
.pant .capa { display: flex; flex-direction: column; height: calc(100% - 22px); padding: 10px 10px 0; }
.pant .hola { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pant .hola small { display: block; color: var(--a-txt2); font-size: 8.5px; } .pant .hola b { font: 650 14px/18px var(--ui); }
.pant .yo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--a-surf2); } .pant .yo svg { width: 13px; }
.pant .tarj { padding: 9px 10px; border-radius: 12px; }
.pant .tarj + .tarj { margin-top: 6px; }
.pant .solo-movil { display: none; }
.pant .tarj .et { font-size: 8.5px; line-height: 11px; }
.pant .check { grid-template-columns: 13px 1fr; gap: 7px; padding: 6px 0; font-size: 8.8px; }
.pant .check i { width: 12px; height: 12px; border-radius: 3px; }
.pant .check small { font-size: 8px; } .pant .chip { font-size: 7.5px; padding: 1px 6px; }
.pant .anillo { width: 36px; height: 36px; }
.pant .cifra { font-size: 17px; line-height: 22px; }
.pant .barra-nav { margin: auto -10px 0; display: flex; justify-content: space-around; padding: 6px 2px 12px; border-top: 1px solid var(--a-borde); background: var(--a-surf); }
.pant .barra-nav span { display: grid; justify-items: center; gap: 2px; font: 500 6.5px/1 var(--ui); color: var(--a-txt2); }
.pant .barra-nav .act { color: var(--a-prim); font-weight: 650; }
.pant .barra-nav svg { width: 14px; height: 14px; fill: none; stroke: var(--a-txt2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pant .barra-nav .act svg { stroke: var(--a-prim); }
/* Marfil (7 nov): la barra de abajo del móvil en vino, como en la app, con lo elegido en el oro del logo */
html[data-dir="marfil"] .pant .barra-nav { background: var(--a-menu); border-top: 0; }
html[data-dir="marfil"] .pant .barra-nav span { color: var(--a-menu-txt); }
html[data-dir="marfil"] .pant .barra-nav svg { stroke: var(--a-menu-txt); }
html[data-dir="marfil"] .pant .barra-nav .act { color: var(--a-oro-logo); }
html[data-dir="marfil"] .pant .barra-nav .act svg { stroke: var(--a-oro-logo); }

/* ---------- cinta y confianza ---------- */
.cinta { position: relative; z-index: 1; overflow: hidden; padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
html[data-dir="marfil"] .cinta { border-color: var(--txt); }
.cinta-in { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.cinta-in span { display: inline-flex; align-items: center; gap: 22px; padding: 0 11px; font: 500 14px/1 var(--ui); letter-spacing: .04em; color: var(--txt2); white-space: nowrap; }
.cinta-in span.marca { font: 600 15px/1 var(--marca); letter-spacing: .04em; color: var(--txt); }
.cinta-in span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--oro); }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta:hover .cinta-in { animation-play-state: paused; }
.confianza { position: relative; z-index: 1; padding: 56px 0 40px; }
.conf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.conf-grid li { display: grid; grid-template-columns: 24px 1fr; gap: 6px 14px; align-items: start; }
.conf-grid svg { width: 24px; height: 24px; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.conf-grid b { font: 600 16.5px/1.3 var(--ui); letter-spacing: -.01em; }
.conf-grid p { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.55; color: var(--txt2); }

/* ---------- pantallas estrechas ---------- */
@media (max-width: 1140px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); column-gap: 32px; }
  .conf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { padding: 0 0 40px; }
  .demo-wrap { width: 100%; }
  .cifras { flex-wrap: wrap; gap: 14px 0; }
}
@media (max-width: 600px) {
  .demo-wrap { --demo-w: 232; --demo-h: 472; display: flex; justify-content: center; }
  .ventana { display: none; }
  .demo { width: 232px; height: 472px; }
  .movil { right: auto; left: 0; bottom: auto; top: 0; width: 232px; }
  .pant .solo-movil { display: block; }
}
@media (max-width: 560px) {
  .cont { padding: 0 20px; }
  .ent { font-size: 17px; }
  .campo { flex-direction: column; padding: 8px; border-radius: 16px; }
  .campo input { height: 48px; padding-left: 12px; }
  .campo .boton { width: 100%; }
  .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cifras li { padding-right: 12px; margin-right: 12px; }
  .cifras b { font-size: 24px; }
  .cifras span { white-space: normal; font-size: 12px; line-height: 1.3; }
  .conf-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cinta-in { animation: none; }
  .spark .ln, .spark .ar, .reparto span, .medidor span, .anillo .lleno, .tramo i::after, .pantalla { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .k .punto, .spark .halo { animation: none; }
  .ventana, .movil { transition: none; transform: none !important; }
}
@media (max-width: 350px) { .logo b { display: none; } }

/* ---------- secciones ---------- */
.seccion { position: relative; z-index: 1; padding: 88px 0; }
.alt { background: var(--bg2); }
html[data-dir="marmol"] .alt { background: transparent; }
html[data-dir="marfil"] .alt { background: var(--bg2); }
.cab-sec { max-width: 720px; margin-bottom: 48px; }
.cab-sec .k { margin-bottom: 18px; }
h2 { margin: 0; font: 500 clamp(32px, 4.4vw, 50px)/1.08 var(--marca); letter-spacing: -.01em; text-wrap: balance; }
h2 em { font-style: normal; color: var(--oro); }
html[data-dir="marfil"] h2 em { color: var(--prim); }
.cab-sec .ent { font-size: 17.5px; }
html[data-dir="marfil"] .cab-sec { border-top: 3px double var(--txt); padding-top: 24px; }
h3 { margin: 0 0 8px; font: 600 19px/1.3 var(--ui); letter-spacing: -.012em; }
.tarjeta { padding: 26px 26px 24px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); }
.tarjeta > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--txt2); }
html[data-dir="marfil"] .tarjeta { border-color: var(--txt); box-shadow: 6px 6px 0 var(--txt); background: var(--surf); }
.pie-ej { margin: 12px 0 0; font-size: 12.5px; color: var(--txt2); }

/* aparecer al bajar */
.js .r { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--curva), transform .8s var(--curva); transition-delay: var(--d, 0s); }
.js .r.in { opacity: 1; transform: none; }

/* ---------- producto: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento .tarjeta { display: flex; flex-direction: column; }
.bento .tarjeta > p { flex: none; }
.b-brokers { grid-column: span 3; } .b-precios { grid-column: span 3; }
.b-riesgo, .b-paso, .b-objetivos { grid-column: span 2; }
.b-futuro { grid-column: span 6; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--bg); font: 600 13.5px/1.2 var(--marca); letter-spacing: .02em; }
html[data-dir="marfil"] .chips li { border-radius: 6px; border-color: var(--txt); }
.chips li:last-child { font-family: var(--ui); font-weight: 500; color: var(--txt2); border-style: dashed; }
.mini-lista { margin-top: 18px; border-top: 1px solid var(--borde); }
.mini-lista .fila-p { display: grid; grid-template-columns: 1fr 64px auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.mini-lista .fila-p b { font-weight: 600; } .mini-lista .fila-p small { display: block; color: var(--txt2); font-size: 12px; }
.mini-lista svg { width: 64px; height: 22px; } .mini-lista .num { text-align: right; font-weight: 600; }
.sube { color: var(--sube); } .baja { color: var(--baja); }
.reparto-g { margin-top: 18px; }
.reparto-g .barra { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.reparto-g .barra span { transform-origin: 0 50%; }
.in .reparto-g .barra span { animation: barra .9s var(--curva) both; animation-delay: calc(.2s + var(--i) * .1s); }
.reparto-g .ley { margin-top: 10px; font-size: 13px; color: var(--txt2); gap: 6px; }
.reparto-g .ley span b { color: var(--txt); }
.reparto-g .ley i { width: 9px; height: 9px; border-radius: 2px; }
.reparto-g .riesgo { margin-top: 14px; } .reparto-g .riesgo i { height: 7px; background: var(--surf2); } .reparto-g .riesgo i.on { background: var(--oro); }
.reparto-g .riesgo-lab { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--txt2); } .reparto-g .riesgo-lab b { color: var(--txt); }
.lista-check { margin: 18px 0 0; padding: 0; list-style: none; }
.lista-check li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.lista-check li:first-child { border-top: 0; }
.lista-check i { width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--txt2); }
.lista-check li.ok i { background: var(--prim); border-color: var(--prim); position: relative; }
.lista-check li.ok i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--sobre-prim); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lista-check small { display: block; color: var(--txt2); font-size: 12.5px; }
.limites { display: grid; gap: 12px; margin-top: 18px; }
.limite { font-size: 13.5px; }
.limite .lab { display: flex; justify-content: space-between; margin-bottom: 5px; } .limite .lab b { font-variant-numeric: tabular-nums; }
.limite .pista { position: relative; height: 8px; border-radius: 4px; background: var(--surf2); overflow: hidden; }
.limite .pista i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--oro); transform-origin: 0 50%; }
.in .limite .pista i { animation: barra .9s var(--curva) both; }
.limite .pista u { position: absolute; top: -2px; bottom: -2px; left: var(--l); width: 2px; background: var(--txt); }
.limite.pasa .pista i { background: var(--baja); }
.limite .chip { margin-top: 6px; background: var(--surf2); font-size: 11px; }
.fut-cab { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.fut-cab .ejemplo { flex: none; }
.fut-grid { display: grid; grid-template-columns: 320px 1fr; gap: 36px; margin-top: 22px; align-items: center; }
.mando { display: grid; gap: 14px; }
.mando label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--txt2); }
.mando output { font: 600 16px/1 var(--ui); color: var(--txt); font-variant-numeric: tabular-nums; white-space: nowrap; }
input[type="range"] { width: 100%; height: 32px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--txt) 18%, var(--surf2)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--txt) 18%, var(--surf2)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--prim); border: 3px solid var(--surf); box-shadow: 0 0 0 1px var(--borde), 0 4px 10px rgb(0 0 0 / .25); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--prim); border: 3px solid var(--surf); box-shadow: 0 0 0 1px var(--borde); }
.fut-svg { width: 100%; height: 160px; }
.fut-svg path { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fut-svg .mal { stroke: var(--baja); opacity: .8; } .fut-svg .med { stroke: var(--txt2); opacity: .8; } .fut-svg .bien { stroke: var(--sube); opacity: .8; }
.fut-svg .apo { stroke: var(--txt2); stroke-dasharray: 4 4; opacity: .6; }
.fut-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.fut-cifras div { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--borde); }
.fut-cifras small { display: block; font-size: 12px; color: var(--txt2); } .fut-cifras b { font: 600 20px/1.2 var(--ui); }
.fut-ejes { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--txt2); }
.fut-cab p { font-size: 15px; }

/* ---------- la IA ---------- */
.ia-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.etapas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.etapas li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--borde); }
.etapas li:first-child { border-top: 0; padding-top: 0; }
.et-n { font: 500 30px/1 var(--marca); color: var(--oro); }
.etapas b { display: block; font-size: 17px; letter-spacing: -.01em; margin-bottom: 4px; }
.etapas p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--txt2); }
.lector { padding: 24px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); }
html[data-dir="marfil"] .lector { border-color: var(--txt); box-shadow: 8px 8px 0 var(--txt); }
.lector-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.lector-cab .k { margin: 0; }
.titulares { display: grid; gap: 8px; }
.titulares button { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--bg); color: var(--txt); text-align: left; font: 500 14.5px/1.4 var(--ui); cursor: pointer; transition: border-color .25s, background-color .25s; }
.titulares button small { display: block; font-size: 12px; color: var(--txt2); }
.titulares button[aria-selected="true"] { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, var(--bg)); }
.titulares .sg { font-size: 13px; font-weight: 700; }
.lectura { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); animation: sube .5s var(--curva) both; }
.lectura .paso-l { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 8px 0; font-size: 14.5px; line-height: 1.55; }
.lectura .paso-l > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surf2); color: var(--oro); font: 700 11px/1 var(--ui); font-style: normal; }
.lectura .paso-l b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); margin-bottom: 2px; }
.lectura .factores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lectura .factores span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surf2); font-size: 12.5px; }
.lectura .decides { margin-top: 10px; padding: 10px 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--oro) 60%, transparent); font-size: 13.5px; color: var(--txt2); }
.lectura .decides b { color: var(--txt); }
.aviso-ia { max-width: 760px; margin: 40px 0 0; padding: 14px 18px; border-left: 3px solid var(--oro); font-size: 14px; color: var(--txt2); }

/* ---------- hacienda ---------- */
.renta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
.tramos { display: grid; gap: 10px; margin-top: 18px; }
.tramo { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13.5px; color: var(--txt2); }
.tramo b { color: var(--txt); font-variant-numeric: tabular-nums; }
.tramo i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--surf2); overflow: hidden; }
.tramo i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--oro); transition: width .5s var(--curva); }
.tot-t { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding: 14px 0 6px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); font-size: 15px; }
.tot-t b { font: 600 28px/1 var(--ui); letter-spacing: -.01em; }
.lista-renta { margin: 0; padding: 0; list-style: none; }
.lista-renta li { padding: 18px 0; border-top: 1px solid var(--borde); }
.lista-renta li:first-child { border-top: 0; padding-top: 0; }
.lista-renta b { display: block; font-size: 16.5px; letter-spacing: -.01em; margin-bottom: 4px; }
.lista-renta p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--txt2); }

/* ---------- mercados: mapa ---------- */
.mapa-ctl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--radio); background: var(--surf2); border: 1px solid var(--borde); }
.seg button { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radio); background: transparent; color: var(--txt2); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s; }
.seg button[aria-pressed="true"] { background: var(--prim); color: var(--sobre-prim); }
.mapa-g { display: grid; grid-template-columns: 1fr 320px; gap: 18px; margin-top: 18px; align-items: stretch; }
.mapa-caja { position: relative; padding: 12px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); }
html[data-dir="marfil"] .mapa-caja, html[data-dir="marfil"] .ficha-p { border-color: var(--txt); box-shadow: 6px 6px 0 var(--txt); }
#mapa { width: 100%; height: auto; aspect-ratio: 1000 / 439; touch-action: pan-y; background: color-mix(in srgb, var(--oro) 4%, var(--surf)); border-radius: 12px; }
#mapa path { stroke: var(--surf); stroke-width: .6; transition: fill .6s ease; vector-effect: non-scaling-stroke; }
#mapa path.con { cursor: pointer; }
#mapa path.con:hover, #mapa path.foco { stroke: var(--txt); stroke-width: 1.4; }
.mapa-tip { position: absolute; z-index: 3; min-width: 150px; padding: 10px 12px; border-radius: 12px; background: var(--txt); color: var(--bg); font-size: 13px; pointer-events: none; transform: translate(14px, 14px); }
.mapa-tip b { display: block; font-size: 14px; }
.mapa-tip .tip-s { color: #0b6b45; font-weight: 700; } .mapa-tip .tip-b { color: #b3361a; font-weight: 700; }
html[data-dir="marfil"] .mapa-tip .tip-s { color: #6fd6a1; } html[data-dir="marfil"] .mapa-tip .tip-b { color: #ff9a78; }
.mapa-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 10px 6px 2px; font-size: 13px; color: var(--txt2); }
.mapa-toca { margin-left: auto; }
.paises { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 10px 2px 0; border-top: 1px solid var(--borde); list-style: none; }
.paises button { min-height: 40px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--txt2); font: 500 12.5px/1 var(--ui); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.paises button:hover { color: var(--txt); border-color: var(--txt2); }
.paises button[aria-pressed="true"] { background: var(--prim); color: var(--sobre-prim); border-color: var(--prim); }
.escala { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.escala i { display: inline-block; width: 140px; height: 8px; border-radius: 4px; }
.ficha-p { padding: 20px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); }
.ficha-p .anim { animation: sube .45s var(--curva) both; }
.ficha-p h3 { margin: 10px 0 0; font: 500 26px/1.15 var(--marca); letter-spacing: 0; }
.ficha-p .sub2 { margin: 2px 0 14px; font-size: 13px; color: var(--txt2); }
.ficha-p table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ficha-p th, .ficha-p td { padding: 7px 0; text-align: right; border-top: 1px solid var(--borde); }
.ficha-p th[scope="row"], .ficha-p thead th:first-child { text-align: left; }
.ficha-p thead th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt2); border-top: 0; }
.ficha-p .tuyo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.ficha-p .tuyo small { display: block; font-size: 12px; color: var(--txt2); } .ficha-p .tuyo b { font: 600 24px/1.2 var(--ui); }
.ficha-p .tuyo ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; } .ficha-p .tuyo li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.ficha-p .nota-p { margin: 14px 0 0; font-size: 12.5px; color: var(--txt2); }

/* ---------- seguridad ---------- */
.seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lista-puntos { margin: 14px 0 0; padding: 0; list-style: none; }
.lista-puntos li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--borde); font-size: 15px; line-height: 1.55; color: var(--txt2); }
.lista-puntos li:first-child { border-top: 0; }
.lista-puntos li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); }
.lista-puntos b { color: var(--txt); }
.no-hace .lista-puntos li::before { background: transparent; border: 2px solid var(--oro); width: 6px; height: 6px; top: 18px; }
.marca-nota { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--txt2); }

/* ---------- gratis y pro ---------- */
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; align-items: start; }
.plan { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); }
html[data-dir="marfil"] .plan { border-color: var(--txt); box-shadow: 6px 6px 0 var(--txt); }
.pro-plan { border-color: color-mix(in srgb, var(--oro) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--oro) 8%, var(--surf)), var(--surf)); }
.plan-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.plan-cab b { font: 500 30px/1 var(--marca); } .plan-cab .num { font: 600 22px/1 var(--ui); }
.pronto { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.plan .lista-puntos { flex: 1; } .plan .lista-puntos li { font-size: 14.5px; }
.plan .boton { margin-top: 22px; align-self: flex-start; }
.plan-nota { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--borde); font-size: 13.5px; color: var(--txt2); }

/* ---------- quién hay detrás (nota discreta, plegada, al final) ---------- */
.quien-nota { padding: 8px 0 40px; }
.quien-nota summary { display: inline-flex; align-items: center; gap: 10px; font: 500 13.5px/1.4 var(--ui); letter-spacing: .02em; color: var(--txt2); cursor: pointer; list-style: none; }
.quien-nota summary::-webkit-details-marker { display: none; }
.quien-nota summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .3s var(--curva); }
.quien-nota details[open] summary::after { transform: rotate(225deg); }
.quien-nota summary:hover { color: var(--txt); }
.quien-texto { margin-top: 14px; }
.quien-texto p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--txt2); max-width: 38em; }
.quien-texto .firma { margin-top: 14px; font-size: 14px; color: var(--txt2); }
.quien-texto .firma a { color: var(--txt); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--oro) 70%, transparent); text-underline-offset: 3px; }

/* ---------- preguntas ---------- */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--borde); }
.faq details:last-child { border-bottom: 1px solid var(--borde); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; font: 500 18px/1.35 var(--ui); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--oro); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .3s var(--curva); margin-right: 6px; }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq p { margin: 0 0 20px; padding: 0 4px; max-width: 46em; font-size: 15.5px; line-height: 1.6; color: var(--txt2); }

/* ---------- pide acceso, final ---------- */
.final { position: relative; z-index: 1; padding: 40px 0 104px; }
.final-caja { padding: 56px 40px; border-radius: 24px; text-align: center; background: var(--surf); border: 1px solid var(--borde); }
html[data-dir="marmol"] .final-caja { background: radial-gradient(70% 100% at 50% 0%, rgb(227 180 95 / .14), transparent 70%), var(--surf); }
html[data-dir="marfil"] .final-caja { border-color: var(--txt); box-shadow: 8px 8px 0 var(--txt); border-radius: var(--radio-c); }
.final-caja .ent { margin: 14px auto 0; }
.final-caja .acceso { margin: 26px auto 0; max-width: 520px; }
.final-caja .nota { text-align: center; margin-left: 0; }

/* ---------- pie ---------- */
.pie { position: relative; z-index: 1; padding: 56px 0 40px; border-top: 1px solid var(--borde); background: var(--bg2); font-size: 14.5px; }
html[data-dir="marmol"] .pie { background: #101312; }
html[data-dir="marfil"] .pie { border-top: 3px double var(--txt); }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pie-marca p { margin: 14px 0 0; color: var(--txt2); max-width: 28em; }
.pie-android { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pie-android svg { width: 18px; height: 18px; fill: none; stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pie-col { display: grid; gap: 0; align-content: start; }
.pie-col a { padding: 9px 0; }
.pie-col b { margin-bottom: 4px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.pie-col a { text-decoration: none; color: var(--txt2); } .pie-col a:hover { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }
.pie-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: 12.5px; line-height: 1.6; color: var(--txt2); max-width: 70em; }
.pie-legal p { margin: 0 0 10px; }
.copy { margin-top: 16px; }

/* ---------- pantallas estrechas ---------- */
@media (max-width: 1140px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-brokers, .b-precios, .b-riesgo, .b-paso, .b-objetivos { grid-column: span 1; }
  .b-futuro { grid-column: span 2; }
  .ia-grid, .renta-grid, .mapa-g { grid-template-columns: 1fr; }
  .mapa-g { gap: 14px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .seccion { padding: 72px 0; }
  .cab-sec { margin-bottom: 32px; }
  .fut-grid { grid-template-columns: 1fr; gap: 20px; }
  .fut-cab { flex-wrap: wrap; } .fut-cab .ejemplo { order: -1; }
  .seg-grid, .planes { grid-template-columns: 1fr; }
  .final-caja { padding: 40px 22px; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .b-futuro { grid-column: span 1; }
  .tarjeta, .lector, .plan { padding: 20px; }
  .fut-cifras { grid-template-columns: 1fr; gap: 8px; }
  .etapas li { grid-template-columns: 40px 1fr; gap: 12px; } .et-n { font-size: 24px; }
  .pie-grid { grid-template-columns: 1fr; gap: 24px; }
  .final-caja .campo { flex-direction: column; }
  .escala i { width: 90px; }
  .mapa-toca { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .r { opacity: 1; transform: none; transition: none; }
  .in .reparto-g .barra span, .in .limite .pista i, .lectura, .ficha-p .anim { animation: none; }
  .tramo i::after { transition: none; }
}

.acceso.hecho .nota { margin-left: 0; font-size: 15px; color: var(--txt); }

/* ================= web híbrida: lo recuperado de la web del 1 nov ================= */

/* ---------- barra de progreso dorada, arriba del todo ---------- */
.progreso { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 2px; background: var(--oro); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- titulares de sección, palabra a palabra ---------- */
.js .r [data-split] .pal { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(1.5deg); transition: opacity .8s var(--curva), transform .8s var(--curva); transition-delay: calc(.12s + var(--i) * 45ms); }
.js .r.in [data-split] .pal { opacity: 1; transform: none; }

/* ---------- Marfil: números romanos en cada sección ---------- */
html[data-dir="marfil"] .k[data-rom]::before { content: attr(data-rom) " ·"; font: 600 15px/1.2 var(--marca); letter-spacing: .1em; color: var(--txt); }


/* ---------- comunes ---------- */
.sub { margin: 0 0 10px; font: 500 clamp(26px, 3vw, 34px)/1.12 var(--marca); letter-spacing: -.005em; }
.intro { margin: 0 0 24px; max-width: 36em; font-size: 16px; line-height: 1.6; color: var(--txt2); }
.boton.sec { background: transparent; color: var(--txt); border-color: color-mix(in srgb, var(--txt) 35%, transparent); }
.boton.sec:hover { box-shadow: none; border-color: var(--txt); }
.boton:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.boton:disabled::after { display: none; }

/* ---------- la IA: cifras que cuentan ---------- */
.ia-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 80px 0 0; padding: 0; list-style: none; }
.ia-num li { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); }
html[data-dir="marfil"] .ia-num li { border-top: 3px double var(--txt); }
.ia-num b { display: block; font: 500 clamp(46px, 5.2vw, 68px)/1 var(--marca); color: var(--oro); font-variant-numeric: lining-nums tabular-nums; }
html[data-dir="marfil"] .ia-num b { color: var(--prim); }
.ia-num span { display: block; margin-top: 10px; max-width: 17em; font-size: 14.5px; line-height: 1.55; color: var(--txt2); }

/* ---------- la IA: el diagrama de los seis factores ---------- */
.fac-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; margin-top: 104px; }
.radial { width: 100%; height: auto; overflow: visible; }
.radial .rayo { stroke: var(--borde); stroke-width: 1.2; }
.radial .flujo { fill: var(--oro); opacity: 0; animation: flujo 2.6s cubic-bezier(.5, 0, .5, 1) infinite; animation-delay: var(--d); }
@keyframes flujo { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(70px); opacity: 0; } }
.radial .centro rect { fill: var(--surf); stroke: var(--oro); stroke-width: 1.2; }
.radial .centro text { fill: var(--txt); font: 600 15px var(--marca); }
.radial .centro .peq { fill: var(--txt2); font: 500 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.radial .nodo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.radial .nodo .aro { fill: var(--surf); stroke: var(--borde); stroke-width: 1.5; transition: stroke .3s, transform .4s var(--curva); transform-box: fill-box; transform-origin: center; }
.radial .nodo:hover .aro { stroke: color-mix(in srgb, var(--oro) 60%, var(--borde)); }
.radial .nodo.sel .aro { stroke: var(--oro); stroke-width: 2.5; transform: scale(1.14); }
.radial .nodo .ic { font: 700 20px var(--ui); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.radial .nodo .ic.p { fill: var(--sube); } .radial .nodo .ic.n { fill: var(--baja); } .radial .nodo .ic.m { fill: var(--oro); } .radial .nodo .ic.e { fill: var(--txt2); }
.radial .nodo .nom { fill: var(--txt); font: 600 14px var(--ui); text-anchor: middle; pointer-events: none; }
html[data-dir="marfil"] .radial .centro rect { stroke: var(--txt); }
.fac-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
.fac-tabs button { min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--txt2); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .25s, color .25s, background-color .25s; }
html[data-dir="marfil"] .fac-tabs button { border-radius: 6px; }
.fac-tabs button:hover { color: var(--txt); }
.fac-tabs button[aria-pressed="true"] { color: var(--txt); border-color: var(--oro); background: color-mix(in srgb, var(--oro) 12%, transparent); }
.fac-det { padding: 24px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); min-height: 318px; }
html[data-dir="marfil"] .fac-det { border-color: var(--txt); box-shadow: 8px 8px 0 var(--txt); }
.fd-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fac-det h4 { margin: 0; font: 600 25px/1.2 var(--marca); }
.fac-det .mira { margin: 8px 0 16px; font-size: 14px; color: var(--txt2); }
.fac-det .lect { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--surf2); font-size: 16px; line-height: 1.5; }
.fac-det dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.fac-det dt { font-size: 12px; color: var(--txt2); }
.fac-det dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; }
.fac-det .anim { animation: sube .45s var(--curva) both; }
.fac-det .sg, .temas-g .sg, .feed .sg, .lectura .sg { color: var(--txt2); }
.fac-det .sg.p, .temas-g .sg.p, .feed .sg.p, .lectura .sg.p { color: var(--sube); }
.fac-det .sg.n, .temas-g .sg.n, .feed .sg.n, .lectura .sg.n { color: var(--baja); }
.fac-det .sg.m, .temas-g .sg.m, .feed .sg.m, .lectura .sg.m { color: var(--oro); }
.fac-det .pesos i, .feed .pesos i, .lectura .pesos i { background: color-mix(in srgb, var(--txt) 22%, transparent); }
.fac-det .pesos i.on, .feed .pesos i.on, .lectura .pesos i.on { background: var(--oro); }

/* ---------- la IA: temas ---------- */
.temas-b { margin-top: 96px; }
.temas-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tema { padding: 22px; border-radius: var(--radio-c); border: 1px solid var(--borde); background: color-mix(in srgb, var(--surf) 80%, transparent); }
html[data-dir="marfil"] .tema { border-color: var(--txt); background: var(--surf); box-shadow: 6px 6px 0 var(--txt); }
.tema .k { margin-bottom: 10px; }
.tema h4 { margin: 0 0 6px; font: 600 18.5px/1.3 var(--ui); letter-spacing: -.01em; }
.tema p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--txt2); }
.tema .tema-f { margin: 0 0 12px; font-size: 13px; }
.toca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toca span { padding: 3px 10px; border-radius: 999px; background: var(--surf2); font-size: 12.5px; font-weight: 600; }
.toca .toca-lab { padding-left: 0; background: none; color: var(--txt2); font-weight: 500; }

/* ---------- la IA: noticias que llegan y el asistente ---------- */
.feed-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; margin-top: 96px; }
.feed { position: relative; padding: 6px 22px 8px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); overflow: hidden; }
html[data-dir="marfil"] :is(.feed, .chat) { border-color: var(--txt); box-shadow: 8px 8px 0 var(--txt); }
.feed-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 13px; color: var(--txt2); }
.feed-cab b { display: inline-flex; align-items: center; gap: 8px; color: var(--txt); font-size: 14px; }
.feed-cab b i { width: 8px; height: 8px; border-radius: 50%; background: var(--sube); animation: parpadeo 1.6s ease-in-out infinite; }
.feed.quieta .feed-cab b i { animation: none; opacity: .5; }
@keyframes parpadeo { 50% { opacity: .25; } }
.feed-der { display: inline-flex; align-items: center; gap: 8px; }
.pausa { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--txt2); font-size: 13px; font-weight: 600; cursor: pointer; }
.pausa:hover { color: var(--txt); border-color: var(--txt2); }
.feed ol { list-style: none; margin: 0; padding: 0; }
.nt { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--borde); }
.nt:first-child { border-top: 0; }
.nt.nueva { animation: entra-n .7s var(--curva) both; }
@keyframes entra-n { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.nt .meta { grid-column: 1 / -1; display: flex; gap: 10px; font-size: 12px; color: var(--txt2); }
.nt .meta b { color: var(--txt); font-weight: 600; }
.nt h4 { margin: 0; font: 600 16.5px/1.35 var(--ui); letter-spacing: -.01em; }
.nt .chip-f { align-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surf2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nt .lee { grid-column: 1 / -1; margin: 2px 0 0; padding-left: 10px; border-left: 2px solid var(--oro); font-size: 14px; color: var(--txt2); }
.chat { padding: 22px; border-radius: calc(var(--radio-c) + 6px); background: var(--surf); border: 1px solid var(--borde); }
html[data-dir="marfil"] .chat { border-radius: var(--radio-c); }
.chat-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 600; }
.chat-cab svg { width: 28px; }
.chat-cab .ejemplo { margin-left: auto; }
.burbuja { max-width: 90%; padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.55; }
.burbuja.yo { margin-left: auto; border-bottom-right-radius: 6px; background: var(--prim); color: var(--sobre-prim); font-weight: 500; }
.burbuja.ella { display: grid; margin-top: 12px; border-bottom-left-radius: 6px; background: var(--surf2); min-height: 4em; }
.burbuja.ella > span { grid-area: 1 / 1; }
.burbuja .fantasma { visibility: hidden; }
.preg-chat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }
.preg-chat button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--txt2); font-size: 14px; text-align: left; cursor: pointer; transition: border-color .25s, color .25s; }
html[data-dir="marfil"] .preg-chat button { border-radius: 6px; }
.preg-chat button:hover { color: var(--txt); }
.preg-chat button[aria-pressed="true"] { color: var(--txt); border-color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, transparent); }
.cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--oro); animation: parpadeo .8s steps(1) infinite; }

/* ---------- hacienda: la hoja paso a paso ---------- */
.hoja-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-bottom: 80px; }
.pasos-r > .k { margin-bottom: 16px; }
.pasos-n { display: flex; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.pasos-n button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--borde); background: var(--surf); color: var(--txt2); font: 600 17px/1 var(--marca); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--curva); }
html[data-dir="marfil"] .pasos-n button { border-radius: 6px; border-color: var(--txt); }
.pasos-n button:hover { border-color: var(--oro); color: var(--txt); }
.pasos-n button[aria-current="step"] { background: var(--prim); border-color: var(--prim); color: var(--sobre-prim); transform: scale(1.06); }
.etapa-r h3 { margin: 0 0 12px; font: 500 clamp(26px, 2.6vw, 32px)/1.12 var(--marca); letter-spacing: -.005em; }
.etapa-r p { margin: 0; max-width: 32em; font-size: 17.5px; line-height: 1.6; color: var(--txt2); }
.etapa-r:not([hidden]) { animation: sube .5s var(--curva) both; }
.etapa-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hoja { padding: 28px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); box-shadow: 0 30px 60px -40px rgb(0 0 0 / .5); }
html[data-dir="marfil"] .hoja { border-color: var(--txt); box-shadow: 8px 8px 0 var(--txt); }
.hoja-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.hoja-cab b { font: 600 21px/1.2 var(--marca); }
.hoja dl { margin: 0; }
.lin { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 11px 12px; margin: 0 -12px; border-radius: 10px; font-size: 15px; transition: background-color .4s, box-shadow .4s; }
.lin dt { color: var(--txt2); transition: color .4s; }
.lin dd { margin: 0; font-weight: 600; text-align: right; }
.lin.hecha dt { color: var(--txt); }
.lin.on { background: var(--surf2); box-shadow: inset 3px 0 0 var(--oro); }
.lin.on dt { color: var(--txt); }
.lin.on dd { animation: late-num .6s var(--curva); }
@keyframes late-num { 0% { transform: translateX(8px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.lin.tot { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--borde); border-radius: 0 0 10px 10px; }
.lin.tot dt { color: var(--txt); font-weight: 600; }
.lin.tot dd { font: 600 28px/1 var(--marca); }
.hoja .pie-ej { margin-top: 14px; }
.renta-grid .pie-ej + .pie-ej { margin-top: 6px; }
.cal { margin-top: 56px; padding: 26px 28px; border-radius: var(--radio-c); background: var(--surf); border: 1px solid var(--borde); }
html[data-dir="marfil"] .cal { border-color: var(--txt); box-shadow: 8px 8px 0 var(--txt); }
.cal-cab b { font: 600 21px/1.2 var(--marca); }
.cal ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.cal li { position: relative; padding-top: 24px; }
.cal li::before { content: ""; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro) 18%, transparent); }
.cal li::after { content: ""; position: absolute; top: 9px; left: 20px; right: -14px; height: 1px; background: var(--borde); transform-origin: 0 50%; }
.cal li:last-child::after { display: none; }
.js .cal li::after { transform: scaleX(0); transition: transform 1s var(--curva) .3s; }
.js .cal.in li::after { transform: none; }
.cal li b { display: block; font: 600 18px/1.25 var(--marca); }
.cal li span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--txt2); }

/* ---------- mercados: el mapa grande ---------- */
.mapa-ctl { gap: 12px 16px; }
.ficha-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ficha-cab .k { margin: 0; }
.ficha-p .de-cartera { color: var(--txt2); font-size: 13px; }
.ficha-p td { white-space: nowrap; font-weight: 600; }
.lista-m { margin-top: 26px; }
.lista-cab { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt2); }
.mapa-lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mapa-lista button { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--surf); color: var(--txt); text-align: left; font: 600 14.5px/1.3 var(--ui); cursor: pointer; transition: border-color .25s, transform .25s var(--curva); }
html[data-dir="marfil"] .mapa-lista button { border-color: var(--txt); border-radius: 6px; }
.mapa-lista button:hover { border-color: var(--oro); transform: translateY(-2px); }
.mapa-lista button[aria-pressed="true"] { border-color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }
.mapa-lista small { display: block; font-size: 12px; font-weight: 500; color: var(--txt2); }
.mapa-lista b { font-size: 15px; white-space: nowrap; }
.pant .mapa-mini, .app .mapa-mini { margin: 6px -2px 0; }
.mapa-mini svg { width: 100%; height: auto; }

/* ---------- por qué Toisón: la historia con escenas ---------- */
.mito-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 24px; }
.caps { list-style: none; margin: 0; padding: 0; }
.cap { min-height: 54vh; display: flex; flex-direction: column; justify-content: center; padding: 36px 0; }
.cap:first-child { min-height: 40vh; justify-content: flex-start; }
.cap .fecha { font: 600 15px/1 var(--marca); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.cap h3 { margin: 12px 0 14px; font: 500 clamp(28px, 3.4vw, 42px)/1.08 var(--marca); letter-spacing: -.005em; }
.cap p { margin: 0; max-width: 31em; font-size: 17.5px; line-height: 1.65; color: var(--txt2); text-wrap: pretty; }
.cap .mini-esc { display: none; }
.escenario { position: sticky; top: calc(50vh - 210px); height: 440px; }
.marco { position: relative; height: 100%; border-radius: calc(var(--radio-c) + 8px); overflow: hidden; border: 1px solid var(--borde); background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--oro) 9%, var(--surf)), var(--surf) 72%); }
html[data-dir="marmol"] .marco { background: radial-gradient(ellipse at 50% 40%, rgb(227 180 95 / .09), rgb(28 31 30 / .6) 72%); }
html[data-dir="marfil"] .marco { border-radius: var(--radio-c); border-color: var(--txt); box-shadow: 8px 8px 0 var(--txt); background: var(--surf); }
.esc { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; transition: opacity .7s ease, transform .7s var(--curva); }
.esc[aria-hidden="true"] { opacity: 0; transform: scale(.96); }
.esc svg { width: 100%; height: 100%; overflow: visible; }
.esc .linea { fill: none; stroke: var(--oro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.esc .tenue { fill: none; stroke: var(--txt2); stroke-width: 1; opacity: .5; }
.esc text { fill: var(--txt2); font: 500 12px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.esc .grande { fill: var(--oro); font: 600 64px var(--marca); letter-spacing: 0; text-transform: none; }
.esc .dib { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--curva); transition-delay: var(--d, 0s); }
.esc.on .dib { stroke-dashoffset: 0; }
.esc .estrella { fill: var(--oro); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--curva); transition-delay: var(--d, 0s); }
.esc.on .estrella { transform: scale(1); }
.esc .titila { fill: var(--txt2); animation: titila 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes titila { 50% { opacity: .15; } }
.esc .ola { animation: ola 7s linear infinite; }
.esc .ola2 { animation-duration: 11s; animation-direction: reverse; }
@keyframes ola { to { transform: translateX(-80px); } }
.esc .barco { transition: transform .2s linear; }
.esc .mece { transform-box: fill-box; transform-origin: 50% 100%; animation: mece 3.6s ease-in-out infinite; }
@keyframes mece { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-3px); } }
.esc .fill-o { fill: var(--sim-o); opacity: 0; transition: opacity .8s ease 1.4s; }
.esc .fill-t { fill: var(--sim-t); opacity: 0; transform: translateY(-60px); transition: opacity .6s ease 1.2s, transform 1.1s cubic-bezier(.3, 1.4, .5, 1) 1.2s; }
.esc.on .fill-o { opacity: 1; }
.esc.on .fill-t { opacity: 1; transform: none; }
.esc .guarda { stroke-dasharray: 3 9; opacity: .8; transform-box: fill-box; transform-origin: center; animation: gira 40s linear infinite; }
.esc .phi { fill: var(--oro); font: 600 34px var(--marca); letter-spacing: 0; text-transform: none; }
html[data-dir="marfil"] .esc .linea { stroke: var(--txt); }
html[data-dir="marfil"] .esc .grande, html[data-dir="marfil"] .esc .phi { fill: var(--prim); }
html[data-dir="marfil"] .esc .estrella { fill: var(--txt); }
.porque-h { margin: 88px auto 0; max-width: 46em; text-align: center; }
.porque-h h3 { margin: 0; font: 500 clamp(30px, 3.6vw, 44px)/1.1 var(--marca); letter-spacing: -.005em; }
.porque-h h3 em { color: var(--oro); font-style: italic; }
html[data-dir="marfil"] .porque-h h3 em { color: var(--prim); }
.porque-h p { margin: 14px auto 0; max-width: 40em; font-size: 18px; line-height: 1.6; color: var(--txt2); }
.porque-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.porque-c { position: relative; padding: 26px 24px; border-radius: var(--radio-c); border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); background: color-mix(in srgb, var(--surf) 55%, transparent); overflow: hidden; }
html[data-dir="marfil"] .porque-c { border-color: var(--txt); background: var(--surf); box-shadow: 6px 6px 0 var(--txt); }
.porque-c .gr { display: block; font: 600 54px/1 var(--marca); color: var(--oro); }
html[data-dir="marfil"] .porque-c .gr { color: var(--prim); }
.porque-c h4 { margin: 10px 0 6px; font: 600 21px/1.2 var(--marca); }
.porque-c p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--txt2); }

/* ---------- pantallas estrechas (lo recuperado) ---------- */
@media (max-width: 1140px) {
  .hoja-grid { gap: 36px; }
  .mapa-lista { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid, html[data-dir="marfil"] .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "escudo" "titulo" "texto" "demo"; }
  .texto { margin-top: 28px; max-width: 640px; }
  html[data-dir="marfil"] .texto { margin-top: 0; }
  .demo-wrap, html[data-dir="marfil"] .demo-wrap { margin-top: 40px; }
  html[data-dir="marfil"] .hero h1 { margin-top: 30px; }
  .esc-marmol { --rw: min(100%, 560px); }
  .ia-num { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-top: 64px; }
  .fac-grid, .feed-grid, .hoja-grid { grid-template-columns: 1fr; gap: 28px; }
  .fac-grid, .feed-grid, .temas-b { margin-top: 72px; }
  .radial { max-width: 460px; margin: 0 auto; }
  .temas-g, .porque-g { grid-template-columns: 1fr; }
  .cal ol { grid-template-columns: 1fr 1fr; }
  .cal li:nth-child(2)::after { display: none; }
  .mito-grid { grid-template-columns: 1fr; gap: 0; }
  .escenario { display: none; }
  .cap, .cap:first-child { min-height: 0; padding: 30px 0; }
  .cap .mini-esc { display: block; position: relative; height: 280px; margin-top: 22px; }
  .porque-h { margin-top: 48px; }
}
@media (max-width: 600px) {
  .mapa-lista { grid-template-columns: 1fr; gap: 8px; }
  .mapa-lista button { min-height: 52px; align-items: center; }
  .mapa-ctl .seg { width: 100%; }
  .mapa-ctl .seg button { flex: 1; padding: 0 8px; }
  .fac-det dl { grid-template-columns: 1fr 1fr; }
  .feed { padding: 4px 16px 6px; }
  .nt { grid-template-columns: 1fr; }
  .nt .chip-f { justify-self: start; }
  .chat { padding: 18px; }
  .hoja { padding: 22px 20px; }
  .lin { font-size: 14px; }
  .cal { padding: 22px 20px; }
  .cal ol { grid-template-columns: 1fr; }
  .cal li::after { display: none; }
  .etapa-nav .boton { flex: 1; }
  .filete span:nth-child(2) { display: none; }
  .cabecera { padding-top: 16px; }
  .esc-marfil { padding-top: 16px; }
  html[data-dir="marfil"] .hero .ent::first-letter { font-size: 50px; }
}

/* ---------- menos movimiento (lo recuperado) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .pal, .texto, .demo-wrap, .relieve .lento, .cabecera svg, .cabecera .palabra span, .lema, .k .punto { animation: none !important; }
  .relieve img { animation: none !important; opacity: 1; }
  .relieve .vec { display: none; }
  .js .r [data-split] .pal { opacity: 1; transform: none; transition: none; }
  .radial .flujo { animation: none; opacity: 0; }
  .feed-cab b i, .nt.nueva, .cursor, .fac-det .anim, .etapa-r:not([hidden]), .lin.on dd { animation: none; }
  .esc, .esc .dib, .esc .estrella, .esc .fill-o, .esc .fill-t, .esc .barco { transition: none; }
  .esc .titila, .esc .ola, .esc .mece, .esc .guarda { animation: none; }
  .js .cal li::after { transform: none; transition: none; }
  .mapa-lista button { transition: none; }
}

/* portátiles de poca altura: el escudo se recoge para que el correo asome en la primera pantalla */
@media (min-width: 901px) and (max-height: 820px) {
  .texto, .demo-wrap { margin-top: 34px; }
  .esc-marfil { padding-top: 14px; }
  .cabecera { padding-top: 12px; }
  .cabecera .palabra { font-size: clamp(52px, 8.6vw, 116px); }
  html[data-dir="marfil"] .hero h1 { margin-top: 26px; font-size: clamp(40px, 4.4vw, 60px); }
  html[data-dir="marfil"] .demo-wrap { margin-top: 26px; }
}

/* ---------- después de la revisión aparte ---------- */
/* el inglés guardado no se ve en español mientras carga */
html.en-pend body { opacity: 0; }
/* Marfil: aire entre el titular y la capitular */
html[data-dir="marfil"] .texto > .ent { margin-top: 26px; }
/* el correo en el móvil: un campo de verdad, no una línea aplastada */
@media (max-width: 560px) { .campo input { flex: none; } }
/* Mármol en el móvil: el logotipo no toca el titular */
@media (max-width: 900px) { .relieve { margin-bottom: calc(var(--rw) / 1.75 * -.05); } }
/* los círculos de estilo dicen qué son al pasar el ratón o con el teclado */
.estilo button { position: relative; }
.estilo button::after { content: attr(aria-label); position: absolute; z-index: 5; top: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: 4px; background: var(--txt); color: var(--bg); font: 600 12px/1.3 var(--ui); white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -4px); transition: opacity .2s, transform .2s; }
.estilo button:hover::after, .estilo button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mm-ajustes .estilo button::after { display: none; }
@media (prefers-reduced-motion: reduce) { .estilo button::after { transition: none; } }

/* el menú con «Por qué Toisón» delante: más apretado antes de plegarse */
@media (max-width: 1340px) { .menu { gap: 18px; font-size: 14px; } .nav .cont { gap: 18px; } .derecha { gap: 12px; } }