/* upa, landing nueva (2026-10-09). Referentes: el storytelling de Nu y la escala de las propuestas E y F.
   Tinta y el punto azul son de upa; cada producto trae su color dentro de su bloque. */
:root{
  --canvas:#F3F4F7; --card:#FFFFFF; --fg:#11141B; --muted-fg:#5A6070; --border:#E1E4EA; --pista:#E6E8EE;
  --tinta:#10234C; --tinta-2:#18306A; --tinta-fg:#F6F7FA; --tinta-muted:#A9B6D1;
  --punto:#2A69DF; --punto-claro:#7FA6EE;
  --aleksa:#205AC5; --aleksa-osc:#163F8C; --aleksa-claro:#E7EEFC;
  --tc:#1F2B45; --tc-crema:#FBF6EC; --tc-papel:#FFFDF8; --tc-fg:#22190F; --tc-muted:#6E6253; --tc-linea:#E6DCCB; --tc-ambar:#B7791F; --tc-ambar-bg:#FBEBCD; --tc-verde:#2E7D4F; --tc-verde-bg:#E3F1E7;
  --titulo:#10234C;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:36px;
  --display:"Outfit", ui-sans-serif, system-ui, sans-serif;
  --sans:"Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#0B0D12; --card:#151922; --fg:#EEF0F4; --muted-fg:#9AA1B2; --border:#262C38; --pista:#1D2230;
    --titulo:#EEF0F4; --punto:#5B8EE8; --aleksa-claro:#1A2740;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0B0D12; --card:#151922; --fg:#EEF0F4; --muted-fg:#9AA1B2; --border:#262C38; --pista:#1D2230;
  --titulo:#EEF0F4; --punto:#5B8EE8; --aleksa-claro:#1A2740;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ margin:0; background:var(--canvas); color:var(--fg); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--punto); outline-offset:3px; border-radius:6px; }
.ancho{ width:100%; max-width:1240px; margin:0 auto; padding-inline:24px; }
@media (max-width:600px){ .ancho{ padding-inline:16px; } body{ font-size:16px; } }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none !important; }

/* Marca: upa en minúscula, con el punto en la u */
.marca{ font-family:var(--display); font-weight:500; font-size:30px; line-height:1; letter-spacing:-.045em; text-decoration:none; color:inherit; display:inline-flex; align-items:baseline; white-space:nowrap; }
.marca .u{ position:relative; display:inline-block; }
.marca .punto{ position:absolute; left:50%; top:.06em; width:.17em; height:.17em; margin-left:-.1em; border-radius:50%; background:var(--punto); }
.barra .marca .punto, .pie .marca .punto{ background:var(--punto-claro); }
.marca.sube .punto{ animation:upa 1.4s cubic-bezier(.2,.9,.25,1.25) .3s both; }
@keyframes upa{ 0%{ transform:translateY(.42em) scale(.6); } 55%{ transform:translateY(-.1em) scale(1.05); } 100%{ transform:none; } }

/* Botones en píldora */
.pildora{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; border:0; cursor:pointer; text-decoration:none; white-space:nowrap; font:600 15.5px/1 var(--sans); background:var(--tinta); color:var(--tinta-fg); transition:transform 150ms, background 150ms; }
.pildora:hover{ background:var(--tinta-2); }
.pildora:active{ transform:scale(.98); }
.pildora.clara{ background:#fff; color:var(--tinta); }
.pildora.clara:hover{ background:#EEF2FB; }
.pildora.chica{ min-height:40px; padding:0 18px; font-size:14.5px; }
.pildora svg{ width:18px; height:18px; flex:none; }
.enlace{ font-weight:600; text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.enlace:hover{ text-decoration:underline; text-underline-offset:4px; }

/* Barra */
.barra{ position:absolute; top:0; left:0; right:0; z-index:20; color:var(--tinta-fg); }
.barra-fila{ display:flex; align-items:center; gap:28px; height:76px; }
.barra nav{ margin-left:auto; display:flex; align-items:center; gap:26px; font-size:15px; }
.barra nav a.ancla{ text-decoration:none; color:var(--tinta-muted); }
.barra nav a.ancla:hover{ color:#fff; }
@media (max-width:820px){ .barra nav a.ancla{ display:none; } }

/* Portada */
.portada{ background:var(--tinta); color:var(--tinta-fg); border-radius:0 0 var(--r-xl) var(--r-xl); padding:150px 0 96px; position:relative; overflow:hidden; isolation:isolate; }
.portada::before{ content:""; position:absolute; z-index:-1; width:900px; height:900px; right:-260px; top:-320px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--punto) 34%, transparent), transparent 62%); }
.portada-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:48px; align-items:end; }
.portada h1{ font-family:var(--display); font-weight:600; font-size:clamp(2.9rem,7vw,6.2rem); line-height:.95; letter-spacing:-.05em; margin:0; text-wrap:balance; }
.portada h1 em{ font-style:normal; color:var(--punto-claro); }
.portada-sub{ margin-top:28px; font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--tinta-muted); max-width:46ch; }
.portada-sub b{ color:#fff; font-weight:600; }
@media (max-width:900px){ .portada{ padding:120px 0 40px; } .portada-grid{ grid-template-columns:minmax(0,1fr); gap:36px; } }

/* La tarjeta de la demo, como el "aplica" de Nu */
.demo{ background:#fff; color:#11141B; border-radius:var(--r-lg); padding:26px; box-shadow:0 30px 60px -30px rgb(0 0 0 / .55); }
.demo h2{ font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.025em; margin:0 0 6px; color:#10234C; }
.demo p{ font-size:15px; color:#5A6070; }
.demo .pregunta{ margin:18px 0 10px; font-size:13.5px; font-weight:600; color:#3A4050; }
.opciones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.opciones button{ font:500 15px/1.25 var(--sans); text-align:left; padding:14px; border-radius:var(--r-md); border:1.5px solid #E1E4EA; background:#F7F8FA; color:#11141B; cursor:pointer; transition:border-color 150ms, background 150ms; }
.opciones button small{ display:block; font-size:12.5px; color:#5A6070; margin-top:3px; }
.opciones button[aria-pressed="true"]{ border-color:#10234C; background:#EEF2FB; }
.demo .pildora{ width:100%; margin-top:14px; min-height:54px; font-size:16px; }
.demo .nota{ margin-top:12px; font-size:13px; color:#6A7080; }

/* Secciones */
section{ padding:120px 0; }
@media (max-width:720px){ section{ padding:76px 0; } }
.titulo{ font-family:var(--display); font-weight:600; font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1; letter-spacing:-.048em; margin:0; color:var(--titulo); text-wrap:balance; }
.bajada{ margin-top:18px; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted-fg); max-width:54ch; }

/* ¡Upa! */
.upa{ padding:110px 0 30px; }
.upa .titulo{ max-width:16ch; }
.upa .titulo span{ color:var(--punto); }
.cargas{ margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.cargas li{ list-style:none; padding:12px 20px; border-radius:999px; background:var(--card); border:1px solid var(--border); font-size:16px; }
.upa .remate{ margin-top:22px; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted-fg); max-width:56ch; }

/* Los dos productos */
.familia{ padding-top:90px; }
.familia-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.puerta{ display:flex; flex-direction:column; gap:14px; min-height:330px; padding:36px; border-radius:var(--r-lg); text-decoration:none; position:relative; overflow:hidden; transition:transform 200ms; }
.puerta:hover{ transform:translateY(-3px); }
.puerta .para{ font-size:14px; font-weight:600; opacity:.85; }
.puerta .nombre{ font-family:var(--display); font-weight:600; font-size:clamp(2.6rem,4.6vw,3.8rem); letter-spacing:-.05em; line-height:1; }
.puerta p{ max-width:34ch; font-size:16.5px; }
.puerta .ir{ margin-top:auto; font-weight:600; display:inline-flex; gap:8px; align-items:center; }
.puerta.aleksa{ background:var(--aleksa); color:#fff; }
.puerta.aleksa p{ color:#D6E2FA; }
.puerta.tabcode{ background:var(--tc-crema); color:var(--tc-fg); border:2px solid var(--tc-fg); }
.puerta.tabcode .nombre{ font-family:"Nunito", ui-rounded, system-ui, sans-serif; font-weight:800; letter-spacing:-.03em; }
.puerta.tabcode p{ color:var(--tc-muted); }
@media (max-width:760px){ .familia-grid{ grid-template-columns:minmax(0,1fr); } .puerta{ min-height:0; padding:28px 24px; } }

/* El bloque de color de cada producto, con su frase gigante */
.grande{ padding:130px 0; }
.grande .frase{ font-family:var(--display); font-weight:600; font-size:clamp(2.6rem,7.4vw,6.6rem); line-height:.98; letter-spacing:-.052em; max-width:15ch; margin:0 auto; text-align:center; text-wrap:balance; }
.grande.aleksa{ background:var(--aleksa); color:#fff; }
.grande.tabcode{ background:var(--tc); color:var(--tc-crema); }
.grande.tabcode .frase{ font-family:"Nunito", ui-rounded, system-ui, sans-serif; font-weight:800; letter-spacing:-.035em; }
@media (max-width:720px){ .grande{ padding:84px 0; } }

/* Ficha de producto */
.producto{ padding:96px 0 120px; }
.producto-cab{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 64px; align-items:end; }
.producto-cab .titulo{ font-size:clamp(3rem,6vw,5.2rem); }
.producto.tc .producto-cab .titulo{ font-family:"Nunito", ui-rounded, system-ui, sans-serif; font-weight:800; letter-spacing:-.035em; }
.producto-cab p{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted-fg); max-width:44ch; }
.producto-cab .acciones{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:18px; }
@media (max-width:860px){ .producto-cab{ grid-template-columns:minmax(0,1fr); } }

.piezas{ margin-top:48px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:stretch; }
@media (max-width:960px){ .piezas{ grid-template-columns:minmax(0,1fr); } }
.lista{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; }
@media (max-width:560px){ .lista{ grid-template-columns:minmax(0,1fr); } }
.pieza{ background:var(--card); border-radius:var(--r-lg); padding:26px; }
.pieza h3{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.025em; line-height:1.15; margin:0 0 8px; color:var(--titulo); }
.pieza p{ font-size:15.5px; color:var(--muted-fg); }

/* Las maquetas */
.vitrina{ border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column; gap:18px; }
.vitrina.aleksa{ background:var(--aleksa-claro); }
.vitrina.tabcode{ background:var(--tc-crema); color:var(--tc-fg); border:2px solid var(--tc-fg); font-family:"Nunito", ui-rounded, system-ui, sans-serif; }
.vitrina .leyenda{ font-size:13px; color:var(--muted-fg); font-family:var(--sans); }
.vitrina.tabcode .leyenda{ color:var(--tc-muted); }

/* Aleksa: lista de asistencia y el celular del acudiente */
.ventana{ background:#fff; color:#11141B; border-radius:var(--r-md); overflow:hidden; border:1px solid #DCE3F2; font-size:14px; }
.ventana-cab{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid #E6EAF2; font-size:13px; color:#5A6070; }
.tile{ width:24px; height:24px; border-radius:7px; background:var(--aleksa); display:grid; place-items:center; color:#fff; flex:none; }
.tile svg{ width:14px; height:14px; }
.ventana-cab b{ color:#11141B; font-weight:600; }
.fila{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid #EEF1F6; }
.fila:last-child{ border-bottom:0; }
.marcar{ font:500 12.5px/1 var(--sans); padding:7px 12px; border-radius:999px; border:1px solid #BFE0CB; background:#E3F2E8; color:#1D723C; cursor:pointer; min-width:84px; }
.marcar[aria-pressed="true"]{ background:#FBF0DC; border-color:#E9C98C; color:#92610C; }
.cel{ align-self:flex-end; width:min(270px,100%); background:#0F1420; border-radius:30px; padding:10px; box-shadow:0 20px 40px -24px rgb(16 35 76 / .6); }
.cel-pantalla{ background:#F6F8FC; border-radius:22px; padding:14px; min-height:132px; color:#11141B; font-size:13.5px; display:flex; flex-direction:column; gap:10px; }
.cel-cab{ font-size:12px; color:#5A6070; display:flex; justify-content:space-between; }
.aviso{ background:#fff; border-radius:14px; padding:12px; border:1px solid #E1E7F4; }
.aviso b{ display:block; font-size:14px; }
.aviso span{ color:#5A6070; font-size:12.5px; }
.aviso.vacio{ border-style:dashed; background:transparent; color:#7A8090; text-align:center; font-size:12.5px; }
.aviso.nuevo{ animation:llega 420ms cubic-bezier(.2,.8,.2,1.2); }
@keyframes llega{ from{ opacity:0; transform:translateY(-8px) scale(.97); } to{ opacity:1; transform:none; } }

/* tabcode: las mesas en el celular */
.tc-cel{ align-self:center; width:min(340px,100%); background:#15110C; border-radius:34px; padding:10px; }
.tc-pantalla{ background:var(--tc-papel); border-radius:26px; padding:14px; display:flex; flex-direction:column; gap:12px; color:var(--tc-fg); }
.tc-cab{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800; }
.tc-cab span{ color:var(--tc-muted); font-weight:700; }
.mesas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mesa{ font-family:inherit; text-align:left; border:2px solid var(--tc-fg); border-radius:14px; padding:10px; min-height:70px; display:flex; flex-direction:column; justify-content:space-between; background:var(--tc-papel); color:var(--tc-fg); cursor:pointer; }
.mesa b{ font-size:19px; font-weight:800; line-height:1; }
.mesa span{ font-size:12px; font-weight:700; }
.mesa.libre{ border-style:dashed; border-color:var(--tc-muted); background:transparent; } .mesa.libre span{ color:var(--tc-muted); }
.mesa.ocupada{ background:var(--tc); border-color:var(--tc); color:#fff; }
.mesa.cuenta{ background:var(--tc-ambar-bg); border-color:var(--tc-ambar); } .mesa.cuenta span{ color:#7A4E0E; }
.mesa[aria-pressed="true"]{ outline:3px solid var(--tc-ambar); outline-offset:2px; }
.detalle{ border:2px solid var(--tc-fg); border-radius:14px; padding:12px; font-size:13.5px; font-weight:700; background:#fff; min-height:132px; }
.detalle p{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
.detalle .total{ border-top:1px solid var(--tc-linea); margin-top:4px; padding-top:7px; font-weight:800; font-size:15px; }
.detalle .gris{ color:var(--tc-muted); }

/* Acompañamiento */
.acompana-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.paso{ grid-column:span 4; background:var(--card); border-radius:var(--r-lg); padding:30px; display:flex; flex-direction:column; gap:10px; }
.paso .num{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--punto); }
.paso h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.2vw,1.8rem); letter-spacing:-.03em; line-height:1.1; margin:0; color:var(--titulo); }
.paso p{ color:var(--muted-fg); font-size:16px; }
.enrique{ grid-column:1 / -1; background:var(--tinta); color:var(--tinta-fg); border-radius:var(--r-lg); padding:30px; display:grid; grid-template-columns:150px minmax(0,1fr); gap:28px; align-items:center; }
.enrique img{ width:150px; height:150px; object-fit:cover; border-radius:22px; }
.enrique h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.035em; line-height:1.05; margin:0 0 10px; }
.enrique p{ color:var(--tinta-muted); }
.enrique .pildora{ margin-top:18px; }
@media (max-width:960px){ .paso{ grid-column:span 6; } .enrique{ grid-column:1 / -1; } }
@media (max-width:620px){ .paso{ grid-column:1 / -1; } .enrique{ grid-template-columns:minmax(0,1fr); } .enrique img{ width:110px; height:110px; } }

/* Preguntas */
.preguntas-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px 64px; align-items:start; }
@media (max-width:860px){ .preguntas-grid{ grid-template-columns:minmax(0,1fr); } }
.faq details{ border-bottom:1px solid var(--border); }
.faq details:first-child{ border-top:1px solid var(--border); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.025em; line-height:1.2; color:var(--titulo); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; width:38px; height:38px; border-radius:999px; background:var(--pista); color:var(--muted-fg); display:grid; place-items:center; font:400 22px/1 var(--sans); transition:transform 200ms; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 24px; color:var(--muted-fg); max-width:58ch; font-size:16.5px; }

/* Cierre */
.cierre{ padding:40px 0 120px; }
.cierre-caja{ background:var(--tinta); color:var(--tinta-fg); border-radius:var(--r-xl); padding:clamp(48px,8vw,100px) clamp(24px,6vw,80px); text-align:center; position:relative; overflow:hidden; isolation:isolate; }
.cierre-caja::before{ content:""; position:absolute; z-index:-1; inset:auto -20% -60% -20%; height:120%; background:radial-gradient(closest-side, color-mix(in srgb, var(--punto) 30%, transparent), transparent); }
.cierre-caja .titulo{ color:#fff; font-size:clamp(2.6rem,6.4vw,5.6rem); max-width:13ch; margin:0 auto; }
.cierre-caja p{ margin:22px auto 0; color:var(--tinta-muted); max-width:46ch; font-size:clamp(1.05rem,1.6vw,1.2rem); }
.cierre-caja .pildora{ margin-top:34px; min-height:56px; padding:0 30px; font-size:16.5px; }

/* Pie */
.pie{ background:var(--tinta); color:var(--tinta-fg); padding:64px 0 32px; }
.pie-arriba{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px 48px; padding-bottom:40px; border-bottom:1px solid #2A3F6E; }
.pie .marca{ font-size:44px; }
.pie-lema{ margin-top:10px; color:var(--tinta-muted); max-width:34ch; }
.pie-columnas{ display:flex; gap:56px; flex-wrap:wrap; font-size:15px; }
.pie-columnas div{ display:flex; flex-direction:column; gap:10px; }
.pie-columnas .t{ font-size:13px; color:var(--tinta-muted); }
.pie-columnas a{ text-decoration:none; }
.pie-columnas a:hover{ text-decoration:underline; text-underline-offset:4px; }
.pie-abajo{ padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:13px; color:var(--tinta-muted); }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.cargas li i{ font-style:normal; font-size:12.5px; font-weight:600; margin-left:8px; padding:3px 9px; border-radius:999px; background:var(--aleksa-claro); color:var(--aleksa); vertical-align:2px; }
.cargas li i.tc{ background:var(--tc-crema); color:var(--tc-fg); border:1px solid var(--tc-linea); }
.enrique h3{ max-width:20ch; }
/* En oscuro, el botón principal se aclara; dentro de la tarjeta blanca de la demo sigue en tinta */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pildora:not(.clara){ background:#E6EAF3; color:#10234C; } :root:not([data-theme="light"]) .pildora:not(.clara):hover{ background:#fff; } }
:root[data-theme="dark"] .pildora:not(.clara){ background:#E6EAF3; color:#10234C; }
.demo .pildora:not(.clara){ background:#10234C !important; color:#F6F7FA !important; }


/* ======================================================================
   El agente (rediseñado para la portada nueva). Mecánica igual que antes
   (agente.js); los colores pasan a los azules de upa y a la portada tinta.
   ====================================================================== */
/* ---------- Agente en la portada: ya está esperando ---------- */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
:root{ --g1:#205AC5; --g2:#6F97EE; --g3:#4DB8D8; --g4:#9A8AEB; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --g1:#4B82E7; --g2:#8DB0F5; --g3:#63C8E6; --g4:#B0A2F2; } }
:root[data-theme="dark"]{ --g1:#4B82E7; --g2:#8DB0F5; --g3:#63C8E6; --g4:#B0A2F2; }
.aurora-vieja{ position:relative; isolation:isolate; overflow:hidden; }
.aurora-vieja::before{ content:""; position:absolute; z-index:-1; left:50%; top:-160px; width:min(1100px,140vw); height:520px; transform:translateX(-50%); background:radial-gradient(closest-side at 30% 55%, color-mix(in srgb, var(--g2) 22%, transparent), transparent), radial-gradient(closest-side at 70% 45%, color-mix(in srgb, var(--g4) 16%, transparent), transparent), radial-gradient(closest-side at 50% 70%, color-mix(in srgb, var(--g3) 14%, transparent), transparent); filter:blur(30px); opacity:.9; pointer-events:none; }

.agente{ margin-top:36px; max-width:780px; }
.caja{ position:relative; display:flex; align-items:center; gap:12px; height:64px; padding:0 8px 0 20px; border-radius:999px; border:2px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--ang), var(--g1), var(--g2), var(--g3), var(--g4), var(--g1)) border-box;
  animation:gira 7s linear infinite; box-shadow:0 1px 2px rgb(0 0 0 / .04), 0 8px 30px -12px color-mix(in srgb, var(--g1) 32%, transparent); transition:box-shadow 250ms; }
.caja:focus-within{ box-shadow:0 1px 2px rgb(0 0 0 / .04), 0 10px 44px -10px color-mix(in srgb, var(--g1) 65%, transparent); animation-duration:3.5s; }
@keyframes gira{ to{ --ang:360deg; } }
.caja input{ flex:1; min-width:0; height:100%; border:0; background:transparent; font:inherit; font-size:17.5px; color:var(--fg); outline:none; }
.caja input::placeholder{ color:var(--muted-fg); }
.caja input[disabled]{ opacity:.55; }
.enviar{ flex:none; width:46px; height:46px; border-radius:999px; border:0; display:flex; align-items:center; justify-content:center; background:var(--accion); color:var(--accion-fg); cursor:pointer; transition:transform 150ms, background 150ms; }
.enviar:hover{ background:var(--accion-hover); } .enviar:active{ transform:scale(.94); }
.enviar svg{ width:20px; height:20px; }

/* El orbe: está ahí, respirando, esperando */
.orbe{ flex:none; width:18px; height:18px; border-radius:999px; background:conic-gradient(from var(--ang), var(--g1), var(--g3), var(--g4), var(--g2), var(--g1)); animation:gira 7s linear infinite, respira 3.2s ease-in-out infinite; }
@keyframes respira{ 0%,100%{ transform:scale(.86); filter:saturate(.9); } 50%{ transform:scale(1); filter:saturate(1.2); } }
.pensando .orbe, .orbe.activo{ animation:gira 1.4s linear infinite, respira 1s ease-in-out infinite; }

.agente-pie{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 20px; margin:14px 4px 0; }
.sugeridas{ display:flex; flex-wrap:wrap; gap:8px; }
.sugeridas button{ font:inherit; font-size:14px; line-height:1.3; color:var(--fg); background:color-mix(in srgb, var(--card) 70%, transparent); border:1px solid var(--border); border-radius:999px; padding:8px 14px; cursor:pointer; transition:border-color 150ms, background 150ms; }
.sugeridas button:hover{ border-color:var(--g2); background:var(--card); }
.sugeridas button[disabled]{ display:none; }
.cupo{ font-size:13px; color:var(--muted-fg); }

/* La conversación */
.hilo-qa{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; }
.hilo-qa:empty{ display:none; }
.turno{ display:flex; flex-direction:column; gap:12px; animation:aparece 280ms ease-out; }
.turno-p{ align-self:flex-end; max-width:85%; padding:10px 16px; border-radius:20px 20px 6px 20px; background:var(--muted); font-size:15.5px; }
.turno-r{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:14px; align-items:start; }
.turno-r .orbe{ margin-top:4px; }
.turno-r:not(.pensando) .orbe{ animation:none; transform:none; }
.r-texto{ margin:0; font-size:16.5px; line-height:1.6; }
.r-texto a{ color:var(--accion); font-weight:500; text-underline-offset:3px; }
.r-texto .p{ opacity:0; animation:palabra 360ms ease-out forwards; }
@keyframes palabra{ from{ opacity:0; filter:blur(3px); } to{ opacity:1; filter:none; } }
.brillo{ margin:0; font-size:15.5px; background:linear-gradient(90deg, var(--muted-fg) 0%, var(--muted-fg) 35%, var(--g1) 50%, var(--muted-fg) 65%, var(--muted-fg) 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brilla 1.6s linear infinite; }
@keyframes brilla{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }
.fuentes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; opacity:0; animation:aparece 300ms ease-out forwards; }
.fuente{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--border); border-radius:999px; font-size:12.5px; color:var(--muted-fg); background:var(--card); }
.fuente svg{ width:12px; height:12px; }
@keyframes aparece{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Registro, dentro de la conversación */
.registro, .enviado{ margin-top:22px; padding:22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card); animation:aparece 280ms ease-out; }
.registro-titulo{ font-family:var(--display); font-weight:300; font-size:21px; letter-spacing:-.02em; line-height:1.25; margin:0 0 6px; }
.registro-sub{ font-size:14.5px; color:var(--muted-fg); margin:0 0 16px; max-width:56ch; }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.campos label{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted-fg); }
.campos input, .campos select{ height:42px; padding:0 12px; font:inherit; font-size:15px; color:var(--fg); background:var(--canvas); border:1px solid var(--input); border-radius:var(--r-sm); }
.consentimiento{ display:flex; gap:10px; align-items:flex-start; margin:16px 0 0; font-size:14px; color:var(--muted-fg); }
.consentimiento input{ margin-top:4px; } .consentimiento a{ color:var(--fg); }
.turnstile{ margin:14px 0 0; height:56px; max-width:300px; display:flex; align-items:center; padding:0 14px; border:1px dashed var(--input); border-radius:var(--r-sm); font-size:12.5px; color:var(--muted-fg); }
.error{ margin:12px 0 0; font-size:14px; color:#B3261E; }
.registro-acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.maqueta-aviso{ margin:14px 4px 0; font-size:12.5px; color:var(--muted-fg); }

@media (max-width:600px){
  .caja{ height:58px; padding-left:16px; } .caja input{ font-size:16px; }
  .enviar{ width:42px; height:42px; }
  .campos{ grid-template-columns:1fr; }
  .turno-p{ max-width:92%; }
}
@media (prefers-reduced-motion: reduce){ .caja, .orbe{ animation:none !important; } .r-texto .p, .fuentes{ opacity:1; animation:none; } }

/* ---------- v16: registro conversado ---------- */
[hidden]{ display:none !important; }
@media (prefers-reduced-motion: reduce){ .rapidas, .fuentes{ opacity:1 !important; } }
.rapidas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; opacity:0; animation:aparece 300ms ease-out forwards; }
.rapidas button{ font:inherit; font-size:14px; line-height:1.3; padding:8px 14px; border-radius:999px; cursor:pointer; border:1px solid var(--g1); background:color-mix(in srgb, var(--g1) 8%, var(--card)); color:var(--fg); transition:background 150ms; }
.rapidas button:hover{ background:color-mix(in srgb, var(--g1) 16%, var(--card)); }
.rapidas button.sec{ border-color:var(--border); background:var(--card); color:var(--muted-fg); }
.rapidas[data-usado] button{ pointer-events:none; opacity:.4; }
.rapidas[data-usado] button.elegida{ opacity:1; background:var(--g1); border-color:var(--g1); color:#fff; }
.aviso-campo{ margin:12px 8px 0; font-size:14px; color:#B3261E; text-align:left; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; animation:aparece 200ms ease-out; }
.aviso-campo button{ font:inherit; font-size:13.5px; padding:4px 12px; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; }
.aviso-campo button[data-usar]{ background:#B3261E; border-color:#B3261E; color:#fff; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .aviso-campo{ color:#F2B8B5; } :root:not([data-theme="light"]) .aviso-campo button[data-usar]{ background:#F2B8B5; border-color:#F2B8B5; color:#601410; } }
.caja.invalida{ background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(#B3261E,#B3261E) border-box; animation:none; }
.caja.invalida::after{ opacity:0 !important; }
.caja input[disabled]{ cursor:default; }

/* ---------- v17: el agente como asistente de voz ---------- */
/* Al empezar, el titular se recoge y aparece la escena encima de la caja */
.titular, .portada .portada-sub{ transition:opacity 500ms ease, transform 600ms cubic-bezier(.2,.7,.2,1), max-height 600ms ease, margin 600ms ease; max-height:4em; }
.titular{ max-height:3em; }
.portada.activa .titular, .portada.activa .portada-sub{ opacity:0; transform:translateY(-24px) scale(.96); max-height:0; margin:0; overflow:hidden; pointer-events:none; }
.portada.activa .bajar{ opacity:0; pointer-events:none; animation:none; }
.portada.activa .portada-sub{ animation:none; }
.escena{ height:0; opacity:0; overflow:hidden; visibility:hidden; pointer-events:none; display:flex; flex-direction:column; transition:height 700ms cubic-bezier(.2,.7,.2,1), opacity 500ms ease 150ms, visibility 0s linear 700ms; }
.portada.activa .escena{ height:min(58vh,540px); opacity:1; visibility:visible; pointer-events:auto; overflow:visible; transition:height 700ms cubic-bezier(.2,.7,.2,1), opacity 500ms ease 150ms, visibility 0s; }

/* Lo dicho: lo último grande, lo anterior sube, se achica y se desvanece */
.pila{ list-style:none; margin:0; padding:0 8px; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:22px; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0, #000 40%); mask-image:linear-gradient(transparent 0, #000 40%); text-align:center; }
.intercambio{ font-size:16px; transition:font-size 600ms cubic-bezier(.2,.7,.2,1), opacity 600ms ease, filter 600ms ease; animation:aparece 350ms ease-out; }
.i-p{ margin:0 0 8px; font-size:.95em; color:var(--muted-fg); }
.i-p::before{ content:"“"; } .i-p::after{ content:"”"; }
.i-r{ margin:0 auto; max-width:30ch; font-family:var(--display); font-weight:300; font-size:1.6em; line-height:1.28; letter-spacing:-.018em; text-wrap:balance; }
.i-r a{ color:var(--g1); text-underline-offset:4px; }
.intercambio .fuentes, .intercambio .rapidas{ justify-content:center; }
.intercambio[data-edad="1"]{ font-size:11.5px; opacity:.5; }
.intercambio[data-edad="2"]{ font-size:9.5px; opacity:.28; filter:blur(.4px); }
.intercambio[data-edad="3"]{ font-size:8px; opacity:.12; filter:blur(.8px); }
.intercambio[data-edad="4"]{ display:none; }
.intercambio:not([data-edad="0"]) .fuentes, .intercambio:not([data-edad="0"]) .rapidas:not([data-usado]){ display:none; }
.intercambio:not([data-edad="0"]) .rapidas button:not(.elegida){ display:none; }
.intercambio:not([data-edad="0"]) .i-r{ max-width:44ch; }

/* El orbe de voz */
.voz{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 0 18px; }
.orbe-voz{ --amp:0; position:relative; width:76px; height:76px; border-radius:50%; overflow:hidden; background:var(--g1);
  transform:scale(calc(1 + var(--amp) * .22)); box-shadow:0 0 calc(22px + var(--amp) * 46px) color-mix(in srgb, var(--g1) 55%, transparent), inset 0 -8px 20px rgb(0 0 0 / .18), inset 0 6px 16px rgb(255 255 255 / .35); }
.orbe-voz i{ position:absolute; width:70%; height:70%; left:15%; top:15%; border-radius:50%; filter:blur(8px); opacity:.9; animation:orbita var(--v,6s) linear infinite; }
.orbe-voz i:nth-child(1){ background:var(--g1); --r:14px; --v:6s; }
.orbe-voz i:nth-child(2){ background:var(--g3); --r:16px; --v:8s; animation-direction:reverse; }
.orbe-voz i:nth-child(3){ background:var(--g4); --r:12px; --v:5s; animation-delay:-2s; }
.orbe-voz i:nth-child(4){ background:#fff; width:38%; height:38%; left:31%; top:26%; --r:7px; --v:4s; opacity:.6; }
@keyframes orbita{ from{ transform:rotate(0) translateX(var(--r)) rotate(0); } to{ transform:rotate(360deg) translateX(var(--r)) rotate(-360deg); } }
.escena[data-estado="espera"] .orbe-voz{ animation:respira 3.6s ease-in-out infinite; }
.escena[data-estado="piensa"] .orbe-voz i{ animation-duration:1.1s; }
.escena[data-estado="piensa"] .orbe-voz{ animation:late 1s ease-in-out infinite; }
@keyframes late{ 50%{ transform:scale(.9); } }
.estado{ margin:0; min-height:1.4em; font-size:14px; background:linear-gradient(90deg, var(--muted-fg) 0%, var(--muted-fg) 35%, var(--g1) 50%, var(--muted-fg) 65%, var(--muted-fg) 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brilla 1.6s linear infinite; }

/* Con la escena activa, el orbe chico de la caja sobra */
.portada.activa .caja .orbe{ opacity:0; width:0; margin-left:-12px; }
.caja .orbe{ transition:opacity 300ms, width 300ms, margin 300ms; }
.terminar{ display:none; font:inherit; font-size:13px; color:var(--muted-fg); background:none; border:0; padding:4px 8px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.portada.activa .terminar{ display:inline-block; }
.portada .agente-pie{ gap:8px; }

@media (max-width:600px){
  .portada.activa .escena{ height:min(56vh,480px); }
  .intercambio{ font-size:15px; }
  .i-r{ font-size:1.45em; }
  .orbe-voz{ width:64px; height:64px; }
}
@media (prefers-reduced-motion: reduce){ .orbe-voz{ transform:none; } .escena, .titular, .portada .portada-sub, .intercambio{ transition:none; } }

/* ---------- v18: relevo a Enrique ---------- */
.relevo{ display:inline-flex; align-items:center; gap:14px; margin-top:18px; padding:10px 10px 10px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); text-align:left;
  box-shadow:0 10px 30px -14px color-mix(in srgb, var(--g1) 45%, transparent); opacity:0; animation:relevo 700ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes relevo{ from{ opacity:0; transform:translateY(10px) scale(.96); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
/* La foto nace del orbe: mismo anillo de degradado */
.relevo-foto{ position:relative; flex:none; width:56px; height:56px; border-radius:50%; padding:2.5px; background:conic-gradient(from var(--ang), var(--g1), var(--g3), var(--g4), var(--g2), var(--g1)); animation:gira 6s linear infinite; }
.relevo-foto img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--card); animation:nace 900ms cubic-bezier(.2,.7,.2,1) both; animation-delay:inherit; }
@keyframes nace{ from{ transform:scale(.3); filter:blur(8px) saturate(0); opacity:0; } 60%{ opacity:1; } to{ transform:none; filter:none; } }
.relevo-quien{ display:flex; flex-direction:column; line-height:1.3; padding-right:6px; }
.relevo-quien b{ font-weight:600; font-size:15px; }
.relevo-quien span{ font-size:13px; color:var(--muted-fg); }
.intercambio:not([data-edad="0"]) .relevo{ display:none; }
@media (max-width:560px){ .relevo{ flex-wrap:wrap; justify-content:center; border-radius:var(--r-lg); padding:14px; } .relevo .boton{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .relevo{ opacity:1 !important; } .relevo-foto img{ animation:none !important; } }


/* ---- Ajustes de la portada nueva para el agente ---- */
.portada{ --g1:#2A69DF; --g2:#7FA6EE; --g3:#5B8EE8; --g4:#A9C4F5;
  --fg:#F6F7FA; --muted-fg:#A9B6D1; --muted:rgba(255,255,255,.08); --border:rgba(255,255,255,.16); --input:rgba(255,255,255,.35);
  --card:#FFFFFF; --canvas:#10234C; --accion:#10234C; --accion-fg:#FFFFFF; --accion-hover:#18306A; }
.boton{ display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 18px; border-radius:999px; font:600 14.5px/1 var(--sans); text-decoration:none; white-space:nowrap; background:#10234C; color:#fff; border:0; cursor:pointer; }
.boton-sm{ height:38px; padding:0 16px; font-size:14px; }
.boton-contorno{ background:transparent; color:inherit; border:1px solid currentColor; }
.portada .caja{ max-width:none; }
.portada .caja input{ color:#11141B; }
.portada .caja input::placeholder{ color:#6A7080; }
.portada .caja{ background:linear-gradient(#fff,#fff) padding-box, conic-gradient(from var(--ang), #2A69DF, #7FA6EE, #A9C4F5, #5B8EE8, #2A69DF) border-box; box-shadow:0 20px 50px -20px rgb(0 0 0 / .55); }
.portada .caja::after{ opacity:.28; }
.portada .sugeridas button{ background:rgba(255,255,255,.06); color:#E6EBF5; border-color:rgba(255,255,255,.18); }
.portada .sugeridas button:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.portada .rapidas button{ background:rgba(255,255,255,.08); color:#fff; border-color:#7FA6EE; }
.portada .rapidas button:hover{ background:rgba(255,255,255,.16); }
.portada .rapidas button.sec{ background:transparent; color:#A9B6D1; border-color:rgba(255,255,255,.2); }
.portada .fuente{ background:rgba(255,255,255,.06); color:#C9D3E8; border-color:rgba(255,255,255,.16); }
.portada .i-r a{ color:#7FA6EE; }
.portada .aviso-campo{ color:#FFB4AB; }
.portada .aviso-campo button[data-usar]{ background:#FFB4AB; border-color:#FFB4AB; color:#601410; }
.portada .relevo, .portada .registro, .portada .enviado{ color:#11141B; --fg:#11141B; --muted-fg:#5A6070; --border:#E1E4EA; --input:#C5CAD3; --canvas:#F3F4F7; --muted:#EEF0F4; }
.portada .relevo{ background:#fff; }
.portada .terminar{ color:#A9B6D1; }

/* ---- Portada nueva: el titular y el agente al centro ---- */
.portada{ border-radius:0 0 20px 20px; padding:140px 0 72px; text-align:center; }
.portada::before{ right:50%; transform:translateX(50%); top:-420px; width:1100px; height:1000px; }
.portada-centro{ max-width:960px; }
.portada .titular{ font-size:clamp(2.8rem,7vw,6rem); max-width:14ch; margin:0 auto; max-height:6em; }
.portada .portada-sub{ margin:26px auto 0; max-width:52ch; }
.portada .agente{ margin:44px auto 0; max-width:780px; text-align:left; }
.portada .caja{ height:68px; padding:0 8px 0 22px; border-radius:999px; }
.portada .caja input{ font-size:17.5px; }
.portada .enviar{ width:52px; height:52px; background:#10234C; color:#fff; }
.portada .agente-pie{ flex-direction:column; align-items:center; margin-top:16px; }
.portada .sugeridas{ justify-content:center; }
.portada .cupo{ text-align:center; color:#A9B6D1; }
.portada .hilo-qa, .portada .registro, .portada .enviado{ text-align:left; }
.portada .i-r{ color:#fff; }
.portada .i-p{ color:#A9B6D1; }
.atajos{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; align-items:center; font-size:15px; color:#A9B6D1; }
.portada.activa .atajos{ opacity:.7; }
.sin-js{ margin:16px 4px 0; font-size:14px; color:#A9B6D1; text-align:center; }
@media (max-width:600px){ .portada{ padding:110px 0 48px; } .portada .caja{ height:60px; padding-left:16px; } .portada .caja input{ font-size:16px; } .portada .enviar{ width:44px; height:44px; } .atajos span{ width:100%; } }
.cierre-caja{ border-radius:24px; }

/* ---- La caja de dudas del pie ---- */
.pie-pregunta{ margin-top:22px; max-width:420px; }
.pie-pregunta label{ display:block; margin:0 0 8px 4px; font-size:13.5px; color:var(--tinta-muted); }
.pie-caja{ display:flex; align-items:center; gap:10px; height:52px; padding:0 6px 0 18px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
.pie-caja input{ flex:1; min-width:0; height:100%; border:0; background:transparent; font:inherit; font-size:15.5px; color:#fff; outline:none; }
.pie-caja input::placeholder{ color:#A9B6D1; }
.pie-caja .enviar{ width:40px; height:40px; border-radius:999px; border:0; display:grid; place-items:center; background:#fff; color:#10234C; cursor:pointer; }
.pie-caja .enviar svg{ width:17px; height:17px; }

/* Sin degradados: la portada y el cierre van en tinta plana */
.portada::before, .cierre-caja::before{ display:none; }

/* Portada en negro; el único brillo es el halo de la caja del agente, que respira con ella */
.portada{ background:#07080C; }
.portada .agente{ position:relative; isolation:isolate; }
.portada .caja{ position:relative; box-shadow:0 0 0 1px rgb(255 255 255 / .06), 0 24px 60px -24px rgb(0 0 0 / .8); }
.portada .caja::after{ content:""; position:absolute; inset:-30px -46px; z-index:-1; border-radius:999px; background:conic-gradient(from var(--ang), #2A69DF, #5B8EE8, #A9C4F5, #7FA6EE, #2A69DF); filter:blur(42px); opacity:.32; animation:gira 7s linear infinite; pointer-events:none; transition:opacity 300ms; }
.portada .caja:focus-within::after{ opacity:.5; }
.portada .sugeridas button{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.portada .portada-sub, .portada .cupo, .atajos{ color:#9AA3B5; }
@media (max-width:600px){ .portada .caja::after{ inset:-18px -12px; } }

/* ======================================================================
   Portada y barra inspiradas en america.gov: la portada es una tarjeta
   dentro de la página, con la barra adentro, y el agente se monta sobre
   un panel que va mostrando Aleksa y tabcode funcionando.
   ====================================================================== */
.portada-marco{ padding:12px 12px 0; }
.portada{ border-radius:28px; padding:22px 0 56px; background:#07080C; }
@media (max-width:600px){ .portada-marco{ padding:8px 8px 0; } .portada{ border-radius:22px; padding:14px 0 40px; } }

.portada .barra{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 28px; height:auto; color:#fff; z-index:30; }
@media (max-width:600px){ .portada .barra{ padding:4px 14px; } }
.barra-acciones{ display:flex; align-items:center; gap:10px; }
.menu-boton{ font:600 14.5px/1 var(--sans); min-height:40px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff; cursor:pointer; }
.menu-boton:hover, .menu-boton[aria-expanded="true"]{ background:rgba(255,255,255,.1); }
.menu{ position:absolute; right:28px; top:calc(100% + 8px); width:min(320px, calc(100vw - 32px)); background:#fff; color:#11141B; border-radius:20px; padding:8px; box-shadow:0 24px 60px -20px rgb(0 0 0 / .6); text-align:left; }
.menu a{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; text-decoration:none; }
.menu a:hover{ background:#F1F3F7; }
.menu b{ font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.02em; }
.menu span{ font-size:13.5px; color:#5A6070; }
@media (max-width:600px){ .menu{ right:14px; } .barra-acciones .pildora{ display:none; } }

.portada .portada-centro{ margin-top:72px; max-width:1000px; }
@media (max-width:600px){ .portada .portada-centro{ margin-top:44px; } }
.portada .titular{ font-size:clamp(2.6rem,6.4vw,5.4rem); }
.portada .portada-sub{ margin-top:22px; }
.portada .agente{ max-width:860px; margin-top:40px; }
.portada .caja{ z-index:2; }

/* El panel de escenas, debajo de la caja */
.escenas{ position:relative; z-index:1; margin-top:-34px; height:430px; border-radius:28px; overflow:hidden; background:#12151D; border:1px solid rgba(255,255,255,.08); }
.portada.activa .escenas{ display:none; }
.esc{ position:absolute; inset:0; margin:0; padding:62px 28px 54px; opacity:0; transition:opacity 600ms ease; display:flex; flex-direction:column; pointer-events:none; }
.esc.activa{ opacity:1; pointer-events:auto; }
.esc-lienzo{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:26px; }
.esc figcaption{ position:absolute; left:28px; bottom:20px; right:120px; font-size:13.5px; color:#9AA3B5; text-align:left; }
.esc-puntos{ position:absolute; right:22px; bottom:20px; display:flex; gap:8px; z-index:3; }
.esc-puntos button{ width:9px; height:9px; padding:0; border-radius:999px; border:0; background:rgba(255,255,255,.28); cursor:pointer; transition:width 250ms, background 250ms; }
.esc-puntos button[aria-pressed="true"]{ width:26px; background:#fff; }
.esc-aleksa .ventana{ width:min(380px,100%); }
.esc-aleksa .cel{ align-self:center; width:220px; }
.chip{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; }
.chip.ok{ background:#E3F2E8; color:#1D723C; } .chip.falta{ background:#FBF0DC; color:#92610C; }
.asistente-dato{ width:min(440px,100%); padding-bottom:16px; }
.asistente-dato .q{ margin:16px 16px 0; padding:10px 14px; border-radius:14px; background:#E7EEFC; color:#163F8C; font-size:14px; width:fit-content; }
.asistente-dato .cifra{ margin:14px 16px 0; font-family:var(--display); font-weight:500; font-size:44px; letter-spacing:-.04em; line-height:1; color:#11141B; }
.asistente-dato .cifra span{ font-family:var(--sans); font-size:14px; letter-spacing:0; color:#5A6070; }
.asistente-dato .r{ margin:8px 16px 0; font-size:14.5px; color:#3A4050; }
.asistente-dato .fuente-dato{ margin:12px 16px 0; padding-top:10px; border-top:1px solid #EEF1F6; font-size:12.5px; color:#205AC5; }
.esc-tabcode .tc-cel{ width:300px; }
.mesas-fijas .mesa{ cursor:default; }
.comandas-fijas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:min(720px,100%); font-family:"Nunito", ui-rounded, system-ui, sans-serif; }
.comandas-fijas .comanda{ border:2px solid #4A4034; border-radius:16px; padding:14px; background:#221B13; color:#F6EFE3; }
.comandas-fijas .comanda p{ margin:0 0 4px; font-size:15px; font-weight:700; }
.comandas-fijas .c-nota{ font-size:13px; color:#F2C46D; }
.comandas-fijas .c-cab{ display:flex; justify-content:space-between; margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid #4A4034; }
.comandas-fijas .c-cab b{ font-size:16px; font-weight:800; } .comandas-fijas .c-cab span{ font-size:13px; font-weight:800; }
.comandas-fijas .vieja{ border-color:#E0674F; } .comandas-fijas .vieja .c-cab span{ color:#FF8A73; }
.comandas-fijas .nueva .c-cab span{ color:#7FD39B; }
@media (max-width:760px){
  .escenas{ height:460px; margin-top:-30px; }
  .esc{ padding:56px 14px 64px; }
  .esc figcaption{ left:16px; right:16px; bottom:38px; font-size:12.5px; }
  .esc-puntos{ left:16px; right:auto; bottom:16px; }
  .esc-aleksa .cel{ display:none; }
  .esc-tabcode .tc-cel{ width:260px; }
  .comandas-fijas{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .comandas-fijas .comanda:nth-child(n+3){ display:none; }
}
.portada .barra .menu{ display:flex; flex-direction:column; align-items:stretch; gap:2px; margin:0; font-size:15px; }
.portada .barra .menu[hidden]{ display:none; }
.portada .portada-centro{ margin-left:auto; margin-right:auto; padding-inline:24px; width:100%; }
@media (max-width:600px){ .portada .portada-centro{ padding-inline:12px; } }
/* El halo ya no es una capa aparte: es la sombra de la caja, que respira despacio */
.portada .caja::after{ display:none; }
.portada .caja{ background:#fff; border:1.5px solid rgba(127,166,238,.9); animation:halo 6s ease-in-out infinite; }
@keyframes halo{ 0%,100%{ box-shadow:0 0 0 1px rgb(255 255 255 / .05), 0 0 60px -8px rgb(42 105 223 / .45); } 50%{ box-shadow:0 0 0 1px rgb(255 255 255 / .08), 0 0 90px 0 rgb(91 142 232 / .6); } }
.portada .caja:focus-within{ border-color:#fff; }
@media (prefers-reduced-motion: reduce){ .portada .caja{ animation:none; box-shadow:0 0 70px -6px rgb(42 105 223 / .5); } }
.cobro-fila{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--tc-verde-bg); color:var(--tc-verde); font-size:13.5px; font-weight:700; }
.cobro-fila b{ font-weight:800; }
/* Sin panel de escenas: la caja del agente va sola */
.portada .agente-pie{ margin-top:18px; }
.portada{ padding-bottom:88px; }
@media (max-width:600px){ .portada{ padding-bottom:48px; } }
/* La portada ocupa la pantalla: la barra arriba y el contenido centrado en el alto */
.portada{ min-height:calc(100svh - 24px); display:flex; flex-direction:column; padding-bottom:72px; }
.portada .portada-centro{ margin-top:auto; margin-bottom:auto; padding-top:48px; }
@media (max-width:600px){ .portada{ min-height:calc(100svh - 16px); padding-bottom:40px; } .portada .portada-centro{ padding-top:32px; } }

/* ¡Upa! como tabla: filas con línea fina, el producto a la derecha */
.cargas-cab{ margin-top:56px; display:flex; justify-content:space-between; padding:0 4px 14px; border-bottom:2px solid var(--fg); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-fg); }
.cargas{ margin:0; display:block; }
.cargas li{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 4px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:none; font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2.4vw,1.75rem); line-height:1.25; letter-spacing:-.02em; transition:background 150ms, padding 150ms; }
.cargas li:hover{ background:var(--card); padding-inline:16px; }
.cargas li i{ flex:none; margin:0; font-family:var(--sans); font-size:13.5px; padding:6px 13px; letter-spacing:0; vertical-align:0; }
@media (max-width:600px){ .cargas-cab{ margin-top:40px; } .cargas li{ padding:20px 2px; gap:14px; } .cargas li i{ font-size:12.5px; padding:5px 11px; } }
.cargas li i:not(.tc){ color:var(--punto); }

/* Quiénes somos */
.nosotros{ padding-bottom:40px; }
.antetitulo{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--punto); margin-bottom:18px; }
.nosotros-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:end; }
.nosotros .titulo{ max-width:15ch; }
.nosotros-texto{ display:flex; flex-direction:column; gap:16px; font-size:clamp(1.02rem,1.4vw,1.15rem); color:var(--muted-fg); max-width:52ch; }
.filas{ margin:64px 0 0; border-top:2px solid var(--fg); }
.filas > div{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:baseline; padding:24px 4px; border-bottom:1px solid var(--border); }
.filas dt{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-fg); }
.filas dd{ margin:0; font-family:var(--display); font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.3; letter-spacing:-.02em; }
@media (max-width:820px){ .nosotros-grid{ grid-template-columns:minmax(0,1fr); gap:24px; } .filas{ margin-top:44px; } .filas > div{ grid-template-columns:minmax(0,1fr); gap:6px; padding:20px 2px; } }

/* Pedir la demo: pantalla completa sobre el negro del hero, una pregunta a la vez y la tarjeta que se arma al lado.
   Tiene un solo aspecto, igual en modo claro y oscuro. */
html.con-dialogo{ overflow:hidden; }
.pide{ --pide-bg:#07080C; --pide-fg:#F6F7FA; --pide-muted:#8E97AC; --pide-linea:rgba(255,255,255,.18); --pide-acento:#7FA6EE;
  width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--pide-bg); color:var(--pide-fg); overflow:auto; overscroll-behavior:contain; }
.pide[open]{ display:flex; flex-direction:column; animation:pide-entra 320ms cubic-bezier(.2,.8,.2,1); }
.pide::backdrop{ background:#07080C; }
@keyframes pide-entra{ from{ opacity:0; } }
.pide-barra{ display:flex; align-items:center; gap:24px; padding:20px clamp(16px,4vw,48px); }
.pide-barra .marca{ font-size:28px; color:var(--pide-fg); }
.pide-barra .marca .punto{ background:var(--pide-acento); }
.pide-progreso{ flex:1; max-width:420px; margin:0 auto; height:3px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.pide-progreso i{ display:block; height:100%; width:0; background:var(--pide-acento); border-radius:3px; transition:width 420ms cubic-bezier(.2,.8,.2,1); }
.pide-cerrar{ display:inline-flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border:0; border-radius:999px; background:rgba(255,255,255,.07); color:var(--pide-fg); cursor:pointer; font:500 13px var(--sans); }
.pide-cerrar:hover{ background:rgba(255,255,255,.13); }
.pide-cerrar svg{ width:18px; height:18px; }
.pide kbd{ font:600 11.5px/1 var(--sans); padding:4px 6px; border-radius:6px; border:1px solid var(--pide-linea); color:var(--pide-muted); background:rgba(255,255,255,.04); }

.pide-cuerpo{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(32px,6vw,96px); align-items:center; width:100%; max-width:1240px; margin:0 auto; padding:24px clamp(16px,4vw,48px) 56px; }
.pide-paso{ position:relative; max-width:640px; }
.pide-cuenta{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--pide-acento); margin-bottom:18px; }
.pide-pregunta{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.02; letter-spacing:-.045em; text-wrap:balance; outline:none; }
.pide-ayuda{ margin-top:14px; font-size:17px; color:var(--pide-muted); max-width:46ch; }
.pide-respuesta{ margin-top:36px; }
.pide-respuesta input, .pide-respuesta textarea{ width:100%; padding:6px 0 14px; border:0; border-bottom:2px solid var(--pide-linea); border-radius:0; background:transparent; color:var(--pide-fg); caret-color:var(--pide-acento);
  font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.025em; transition:border-color 200ms; }
.pide-respuesta textarea{ font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.35; resize:none; min-height:110px; }
.pide-respuesta input::placeholder, .pide-respuesta textarea::placeholder{ color:rgba(255,255,255,.22); }
.pide-respuesta input:focus, .pide-respuesta textarea:focus{ outline:none; border-bottom-color:var(--pide-acento); }
.pide-respuesta [aria-invalid="true"]{ border-bottom-color:#F07B7B; }
.pide-opciones{ display:flex; flex-wrap:wrap; gap:10px; }
.pide-opciones button{ display:flex; align-items:center; gap:14px; padding:14px 20px 14px 14px; border:1.5px solid var(--pide-linea); border-radius:999px; background:rgba(255,255,255,.03); color:var(--pide-fg); cursor:pointer; text-align:left; font:500 17px/1.2 var(--sans); transition:border-color 150ms, background 150ms, transform 150ms; }
.pide-opciones button:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); }
.pide-opciones button:active{ transform:scale(.98); }
.pide-opciones button[aria-checked="true"]{ border-color:var(--pide-acento); background:rgba(127,166,238,.14); }
.pide-opciones button[aria-checked="true"] kbd{ background:var(--pide-acento); color:#07080C; border-color:var(--pide-acento); }
.pide-opciones span{ display:flex; flex-direction:column; gap:4px; }
.pide-opciones small{ font-size:14px; color:var(--pide-muted); font-weight:400; }
.pide-opciones.grandes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pide-opciones.grandes button{ flex-direction:column; align-items:flex-start; gap:28px; padding:20px 22px 22px; border-radius:var(--r-lg); min-height:170px; justify-content:space-between; }
.pide-opciones.grandes b{ font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,3vw,2.4rem); letter-spacing:-.04em; }
.pide-opciones.grandes [data-producto="tabcode"] b{ font-family:"Nunito", var(--sans); font-weight:800; letter-spacing:-.02em; }
.pide-opciones.grandes [data-producto="tabcode"][aria-checked="true"]{ border-color:#E8B867; background:rgba(232,184,103,.12); }
.pide-opciones.grandes [data-producto="tabcode"][aria-checked="true"] kbd{ background:#E8B867; border-color:#E8B867; }
.pide-error{ margin-top:16px; display:inline-flex; gap:8px; align-items:center; padding:8px 14px; border-radius:999px; background:rgba(240,123,123,.12); color:#F5A3A3; font-size:15px; }
.pide-acciones{ margin-top:32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pide-acciones .pildora{ min-height:52px; padding:0 28px; font-size:16px; }
.pide-acciones .pildora:disabled{ opacity:.7; cursor:progress; }
.pide-tecla{ font-size:13.5px; color:var(--pide-muted); display:inline-flex; gap:8px; align-items:center; }
.pide-atras{ margin-top:40px; padding:0; border:0; background:none; color:var(--pide-muted); font:500 14.5px var(--sans); cursor:pointer; }
.pide-atras:hover{ color:var(--pide-fg); }
.pide-consentimiento{ margin-top:22px; display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--pide-muted); cursor:pointer; max-width:52ch; }
.pide-consentimiento input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--pide-acento); }
.pide-consentimiento a{ color:var(--pide-fg); }
.pide :focus-visible{ outline:2px solid var(--pide-acento); outline-offset:3px; }
.pide .trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Movimiento de cada pregunta */
.pide-anima.entra{ animation:pide-sube 420ms cubic-bezier(.2,.8,.2,1); }
.pide-anima.vuelve{ animation:pide-baja 420ms cubic-bezier(.2,.8,.2,1); }
.pide-anima.sacude{ animation:pide-sacude 380ms; }
@keyframes pide-sube{ from{ opacity:0; transform:translateY(28px); } }
@keyframes pide-baja{ from{ opacity:0; transform:translateY(-28px); } }
@keyframes pide-sacude{ 20%{ transform:translateX(-8px); } 40%{ transform:translateX(7px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(2px); } }

/* La tarjeta de la demo, con el halo del agente */
.pide-tarjeta{ position:relative; background:#fff; color:#11141B; border-radius:var(--r-lg); padding:26px; border:1.5px solid rgba(127,166,238,.9); animation:halo 6s ease-in-out infinite; transition:transform 500ms cubic-bezier(.2,.8,.2,1); }
.pt-cab{ display:flex; flex-direction:column; gap:6px; padding-bottom:18px; border-bottom:2px solid #11141B; }
.pt-etq{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5A6070; }
.pt-titulo{ font-family:var(--display); font-weight:600; font-size:28px; letter-spacing:-.035em; color:#10234C; transition:color 300ms; }
.pide-tarjeta[data-producto="aleksa"] .pt-titulo{ color:#205AC5; }
.pide-tarjeta[data-producto="tabcode"] .pt-cab{ border-bottom-color:#B7791F; }
.pide-tarjeta[data-producto="tabcode"] .pt-titulo{ color:#22190F; }
.pt-datos{ margin:0; }
.pt-datos > div{ display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px; align-items:baseline; padding:13px 0; border-bottom:1px solid #E6E8EE; }
.pt-datos dt{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#8A90A0; }
.pt-datos dd{ margin:0; min-height:1.3em; font-size:15.5px; font-weight:500; overflow-wrap:anywhere; position:relative; }
.pt-datos > div:not(.lleno) dd::before{ content:""; position:absolute; left:0; top:50%; width:62%; height:8px; margin-top:-4px; border-radius:4px; background:#EEF0F4; }
.pt-datos > div.nuevo dd{ animation:pt-llena 520ms cubic-bezier(.2,.8,.2,1); }
@keyframes pt-llena{ 0%{ opacity:0; transform:translateY(6px); background:rgba(42,105,223,.0); } 40%{ opacity:1; background:rgba(42,105,223,.14); } 100%{ transform:none; background:rgba(42,105,223,0); } }
.pt-pie{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.pt-pie img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.pt-pie > span:nth-child(2){ display:flex; flex-direction:column; font-size:14px; line-height:1.3; }
.pt-pie > span:nth-child(2) span{ color:#5A6070; font-size:13px; }
.pt-sello{ margin-left:auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#2E7D4F; color:#fff; transform:scale(0); transition:transform 420ms cubic-bezier(.2,1.4,.3,1) 200ms; }
.pt-sello svg{ width:20px; height:20px; }
.pide.enviada .pt-sello{ transform:scale(1); }
.pide.enviada .pide-tarjeta{ transform:translateY(-6px); }

@media (max-width:860px){
  .pide-cuerpo{ grid-template-columns:minmax(0,1fr); align-items:start; gap:28px; padding-top:12px; }
  .pide-tarjeta{ display:none; }
  .pide.al-final .pide-tarjeta, .pide.enviada .pide-tarjeta{ display:block; order:-1; padding:18px 18px 16px; }
  .pide.al-final .pt-datos > div, .pide.enviada .pt-datos > div{ padding:9px 0; }
  .pide.al-final .pt-titulo, .pide.enviada .pt-titulo{ font-size:23px; }
  .pide-barra{ gap:14px; padding-top:calc(14px + env(safe-area-inset-top, 0px)); }
  .pide-cerrar kbd{ display:none; }
  .pide-opciones.grandes{ grid-template-columns:minmax(0,1fr); }
  .pide-opciones.grandes button{ min-height:0; gap:14px; flex-direction:row; align-items:center; justify-content:flex-start; }
  .pide-tecla{ display:none !important; }
  .pide-acciones .pildora{ flex:1; }
  .pide-cuerpo{ padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce){ .pide[open], .pide-anima, .pide-tarjeta, .pt-datos dd{ animation:none !important; } .pt-sello, .pide-tarjeta{ transition:none; } }
/* Titular más largo y sobrio: más ancho y un poco más chico */
.portada .titular{ font-size:clamp(2.3rem,5vw,4.4rem); max-width:19ch; line-height:1.02; max-height:5em; }
.portada .portada-sub{ max-width:52ch; margin-left:auto; margin-right:auto; }
.enrique h3{ max-width:24ch; text-wrap:balance; }
.upa .titulo{ max-width:17ch; }
@media (max-width:600px){ .portada .titular{ font-size:clamp(1.9rem,8.6vw,2.4rem); } }


/* ---- Aleksa por dentro: la bandeja de solicitudes reconstruida desde el repo de Aleksa
   (tokens.css, StatFilter, StatusIndicator, PageHeader, cabecera y menú del shell).
   Asoma por el borde de abajo del hero, recortada. Siempre en el tema claro de Aleksa. */
.portada{ min-height:0; }
.portada .portada-centro{ margin-top:0; margin-bottom:0; padding-top:clamp(56px,9vh,104px); }
.portada{ padding-bottom:0; }
.vivo{ position:relative; width:100%; max-width:1180px; margin:clamp(56px,8vh,88px) auto 0; padding-inline:24px; text-align:left; }
.vivo-nota{ font-size:13.5px; color:#9AA3B8; margin:0 0 14px 4px; }
.vivo-nota b{ color:#fff; font-weight:600; }
.vivo-marco{ height:clamp(470px,58vh,580px); overflow:hidden; border-radius:18px 18px 0 0; }
.ak{ --ak-brand:#2059C5; --ak-brand-50:#EEF3FE; --ak-canvas:#F5F5F5; --ak-card:#FFFFFF; --ak-fg:#171717; --ak-muted:#EDEDED; --ak-muted-fg:#616161;
  --ak-border:#E5E5E5; --ak-input:#858585; --ak-cromo:#F0F0F0; --ak-cromo-fg:#424242; --ak-cromo-borde:#E0E0E0;
  --ak-ok:#1D7240; --ak-ok-bg:#EBF7EF; --ak-warn:#94620C; --ak-warn-bg:#FDF4E1; --ak-mal:#C42121; --ak-info:#2059C5; --ak-info-bg:#EBF1FC; --ak-rol:#B8336A;
  background:var(--ak-canvas); color:var(--ak-fg); font-family:var(--sans); font-size:14px; line-height:1.45; border-radius:18px 18px 0 0;
  box-shadow:0 0 0 1px rgb(255 255 255 / .08), 0 -10px 60px -10px rgb(42 105 223 / .45); transform:translateY(90px); opacity:.0;
  transition:transform 900ms cubic-bezier(.16,1,.3,1), opacity 600ms ease; text-align:left; }
.vivo.arriba .ak{ transform:none; opacity:1; }
.ak svg{ width:16px; height:16px; flex:none; }
.ak button{ font:inherit; color:inherit; }
.ak-cab{ display:flex; align-items:center; gap:14px; height:56px; padding:0 18px; background:var(--ak-cromo); border-bottom:1px solid var(--ak-cromo-borde); border-radius:18px 18px 0 0; }
.ak-inst{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:15px; letter-spacing:-.01em; }
.ak-tile{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--ak-brand); color:#fff; }
.ak-tile svg{ width:18px; height:18px; }
.ak-buscar{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 10px; border:1px solid var(--ak-border); border-radius:10px; background:#fff; color:var(--ak-muted-fg); font-size:13px !important; cursor:pointer; min-width:220px; }
.ak-buscar kbd{ margin-left:auto; font:500 10px ui-monospace, monospace; padding:1px 5px; border:1px solid var(--ak-border); border-bottom-width:2px; border-radius:4px; }
.ak-periodo{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ak-muted-fg); padding-right:12px; border-right:1px solid var(--ak-border); }
.ak-periodo svg{ width:14px; height:14px; }
.ak-rol{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 11px; border:1px solid var(--ak-brand); border-radius:10px; font-size:13px; }
.ak-rol svg{ color:var(--ak-brand); }
.ak-cuerpo{ display:flex; min-height:640px; }
.ak-menu{ flex:none; width:206px; padding:14px 10px; background:var(--ak-cromo); border-right:1px solid var(--ak-cromo-borde); display:flex; flex-direction:column; gap:2px; }
.ak-grupo{ margin:12px 8px 6px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ak-muted-fg); }
.ak-grupo:first-child{ margin-top:2px; }
.ak-item{ display:flex; align-items:center; gap:10px; height:32px; padding:0 10px; border:0; border-radius:8px; background:none; color:var(--ak-cromo-fg) !important; font-size:13.5px !important; cursor:pointer; text-align:left; transition:background 150ms; }
.ak-item:hover{ background:#fff; }
.ak-item.activo{ background:#fff; color:var(--ak-fg) !important; font-weight:600 !important; box-shadow:inset 3px 0 0 var(--ak-brand); }
.ak-cuenta{ margin-left:auto; min-width:20px; height:18px; padding:0 6px; border-radius:999px; background:var(--ak-brand); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.ak-lienzo{ position:relative; flex:1; min-width:0; padding:26px 30px 30px; display:flex; flex-direction:column; gap:20px; }
.ak-titulo{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.ak-titulo h3{ margin:0; font-family:var(--display); font-weight:300; font-size:38px; line-height:1.05; letter-spacing:-.02em; color:var(--ak-fg); }
.ak-titulo p{ margin-top:8px; max-width:62ch; font-size:13.5px; color:var(--ak-muted-fg); }
.ak-acciones{ display:flex; gap:8px; flex:none; }
.ak-btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border:1px solid var(--ak-input); border-radius:12px; background:#fff; font-size:13.5px !important; font-weight:500; cursor:pointer; white-space:nowrap; transition:background 100ms; }
.ak-btn:hover{ background:var(--ak-muted); }
.ak-btn.primario{ background:var(--ak-brand); border-color:var(--ak-brand); color:#fff !important; }
.ak-btn.primario:hover{ background:#1A4CA8; }
.ak-btn:disabled{ opacity:.5; cursor:default; }
.ak-aviso{ display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px; border-radius:16px; background:var(--ak-info-bg); border:1px solid #C9D9F7; transition:background 300ms, border-color 300ms; }
.ak-aviso > svg{ color:var(--ak-brand); }
.ak-aviso span{ color:var(--ak-muted-fg); }
.ak-aviso b{ color:var(--ak-fg); }
.ak-aviso .ak-btn{ margin-left:auto; }
.ak-aviso.listo{ background:var(--ak-ok-bg); border-color:#C7E7D2; }
.ak-aviso.listo > svg{ color:var(--ak-ok); }
.ak-cifras{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; }
.ak-cifra{ flex:1 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0 22px 12px 4px; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer; text-align:left; transition:border-color 150ms; }
.ak-cifra:hover{ border-bottom-color:var(--ak-border); }
.ak-cifra b{ font-family:var(--display); font-weight:300; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; color:var(--ak-fg); }
.ak-cifra span{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ak-muted-fg); white-space:nowrap; }
.ak-cifra[aria-pressed="true"]{ border-bottom-color:var(--ak-brand); }
.ak-cifra[aria-pressed="true"] b, .ak-cifra[aria-pressed="true"] span{ color:var(--ak-brand); }
.ak-cifra[aria-pressed="true"] span{ font-weight:600; }
.ak-p{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--ak-muted-fg); }
.ak-p.info{ background:var(--ak-info); } .ak-p.ok{ background:var(--ak-ok); } .ak-p.warn{ background:var(--ak-warn); } .ak-p.mal{ background:var(--ak-mal); }
.ak-tabla{ background:var(--ak-card); border-radius:20px; padding:6px 14px; }
.ak-fila{ display:grid; grid-template-columns:118px minmax(0,1.5fr) 74px minmax(0,1fr) 84px 108px 34px; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid var(--ak-border); }
.ak-fila:last-child{ border-bottom:0; }
.ak-encabezado{ font-size:12.5px; color:var(--ak-muted-fg); padding-top:10px; padding-bottom:10px; }
.ak-fila .num{ color:var(--ak-brand); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }
.ak-fila .quien b{ display:block; font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ak-fila .quien small{ display:block; font-size:11.5px; color:var(--ak-muted-fg); letter-spacing:.02em; }
.ak-fila .gris{ color:var(--ak-muted-fg); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ak-estado{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; white-space:nowrap; }
.ak-estado.info{ color:var(--ak-info); } .ak-estado.ok{ color:var(--ak-ok); } .ak-estado.warn{ color:var(--ak-warn); } .ak-estado.mal{ color:var(--ak-mal); } .ak-estado.neutro{ color:var(--ak-muted-fg); }
.ak-mas{ position:relative; }
.ak-mas > button{ width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:none; cursor:pointer; color:var(--ak-muted-fg); }
.ak-mas > button:hover{ background:var(--ak-muted); }
.ak-menu-fila{ position:absolute; right:0; top:34px; z-index:5; min-width:150px; padding:6px; background:#fff; border:1px solid var(--ak-border); border-radius:12px; box-shadow:0 12px 30px -10px rgb(0 0 0 / .25); }
.ak-menu-fila button{ display:block; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; text-align:left; cursor:pointer; font-size:13.5px !important; }
.ak-menu-fila button:hover{ background:var(--ak-muted); }
.ak-menu-fila .rojo{ color:var(--ak-mal) !important; }
.ak-fila.cambia{ animation:ak-cambia 1.2s ease; }
@keyframes ak-cambia{ 0%{ background:var(--ak-ok-bg); } 100%{ background:transparent; } }
.ak-vacio{ padding:22px 6px; color:var(--ak-muted-fg); font-size:13.5px; }
.ak-toast{ position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:10px; max-width:min(520px, calc(100% - 32px)); padding:11px 16px; border-radius:12px; background:#171717; color:#fff; font-size:13.5px; box-shadow:0 14px 34px -12px rgb(0 0 0 / .5); animation:ak-toast 260ms cubic-bezier(.16,1,.3,1); }
@keyframes ak-toast{ from{ opacity:0; transform:translate(-50%, -8px); } }
@media (max-width:900px){
  .ak-menu, .ak-periodo{ display:none; }
  .ak-buscar{ min-width:0; } .ak-buscar span, .ak-buscar kbd{ display:none; }
  .ak-titulo{ flex-direction:column; gap:14px; } .ak-titulo h3{ font-size:30px; }
}
@media (max-width:600px){
  .vivo{ padding-inline:10px; margin-top:44px; }
  .vivo-marco{ height:500px; }
  .ak-cab{ padding:0 12px; gap:10px; } .ak-inst span:last-child{ font-size:14px; }
  .ak-rol span{ display:none; }
  .ak-lienzo{ padding:18px 14px; gap:16px; }
  .ak-titulo p{ display:none; } .ak-acciones .ak-btn:last-child{ display:none; }
  .ak-aviso{ flex-wrap:wrap; } .ak-aviso .ak-btn{ margin-left:0; width:100%; justify-content:center; }
  .ak-cifra{ padding-right:16px; } .ak-cifra b{ font-size:24px; }
  .ak-tabla{ padding:4px 12px; }
  .ak-encabezado{ display:none !important; }
  .ak-fila{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"quien estado" "num mas"; gap:4px 10px; padding:12px 2px; }
  .ak-fila .quien{ grid-area:quien; } .ak-fila .num{ grid-area:num; font-size:12px; } .ak-fila .ak-estado{ grid-area:estado; justify-self:end; } .ak-fila .ak-mas{ grid-area:mas; justify-self:end; }
  .ak-fila .gris{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .ak{ transition:none; transform:none; opacity:1; } }

/* ---- Propuesta de hero: titular a la izquierda, Aleksa como imagen principal y el asistente en un panel ---- */
.hero2{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:56px; align-items:end; width:100%; max-width:1240px; margin:0 auto; padding:clamp(72px,12vh,136px) 24px 0; text-align:left; }
.hero2-titulo{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(2.5rem,5.4vw,5rem); line-height:.98; letter-spacing:-.05em; color:#fff; text-wrap:balance; max-width:14ch; }
.hero2-sub{ font-size:17px; line-height:1.55; color:#A9B3C8; }
.hero2-sub b{ color:#fff; font-weight:600; }
.hero2-botones{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }
.hero2-botones .pildora{ min-height:50px; padding:0 26px; font-size:15.5px; }
.hero2-pregunta{ margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.hero2-pregunta label{ display:block; font-size:13px; color:#8E97AC; margin-bottom:6px; }
.hero2-campo{ display:flex; align-items:center; gap:10px; border-bottom:1.5px solid rgba(255,255,255,.22); transition:border-color 150ms; }
.hero2-campo:focus-within{ border-bottom-color:#7FA6EE; }
.hero2-campo input{ flex:1; min-width:0; padding:10px 0; border:0; background:transparent; color:#fff; font:400 16px var(--sans); caret-color:#7FA6EE; }
.hero2-campo input::placeholder{ color:rgba(255,255,255,.4); }
.hero2-campo input:focus{ outline:none; }
.hero2-campo button{ flex:none; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; }
.hero2-campo button:hover{ background:rgba(255,255,255,.2); }
.hero2-campo button svg{ width:16px; height:16px; }
.portada .vivo{ max-width:1288px; }
.portada .vivo-marco{ height:clamp(500px,62vh,640px); }
@media (max-width:900px){ .hero2{ grid-template-columns:minmax(0,1fr); gap:24px; padding-top:56px; } .hero2-titulo{ font-size:clamp(2.2rem,8.6vw,3.4rem); } }
@media (max-width:600px){ .hero2{ padding-inline:16px; padding-top:40px; } .hero2-botones .pildora{ flex:1; } }

/* El asistente, en un panel lateral sobre el negro */
.asistente{ width:min(480px,100%); height:100%; max-height:none; max-width:none; margin:0 0 0 auto; padding:0; border:0; background:#0B0D12; color:#F6F7FA; text-align:left;
  box-shadow:-30px 0 80px -30px rgb(0 0 0 / .7); border-left:1px solid rgba(255,255,255,.08); }
.asistente[open]{ display:flex; flex-direction:column; animation:asistente-entra 320ms cubic-bezier(.16,1,.3,1); }
.asistente::backdrop{ background:rgb(7 8 12 / .55); }
@keyframes asistente-entra{ from{ transform:translateX(40px); opacity:0; } }
.asistente-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.asistente-cab h2{ margin:0; font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.02em; color:#fff; }
.asistente-cab p{ margin-top:4px; font-size:13px; color:#8E97AC; }
.asistente-cerrar{ flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:999px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; }
.asistente-cerrar:hover{ background:rgba(255,255,255,.15); }
.asistente-cerrar svg{ width:18px; height:18px; }
.portada .asistente .agente{ flex:1; min-height:0; display:flex; flex-direction:column; margin:0; max-width:none; padding:0 20px 18px; }
.portada .asistente .escena{ height:auto !important; flex:1; min-height:0; opacity:1; visibility:visible; pointer-events:auto; overflow:hidden; transition:none; }
.portada .asistente .pila{ overflow-y:auto; justify-content:flex-start; padding:18px 2px 8px; gap:18px; -webkit-mask-image:none; mask-image:none; }
.portada .asistente .pila > :first-child{ margin-top:auto; }
.portada .asistente .intercambio, .portada .asistente .intercambio[data-edad]{ display:flex; flex-direction:column; font-size:15px; opacity:1; filter:none; text-align:left; animation:none; }
.portada .asistente .i-p{ align-self:flex-end; max-width:85%; margin:0 0 10px; padding:9px 14px; border-radius:16px 16px 4px 16px; background:rgba(255,255,255,.09); color:#E6EBF5; font-size:14.5px; }
.portada .asistente .i-p::before, .portada .asistente .i-p::after{ content:none; }
.portada .asistente .i-r{ margin:0; max-width:none; font-family:var(--sans); font-weight:400; font-size:15.5px; line-height:1.55; letter-spacing:0; color:#F6F7FA; text-wrap:pretty; }
.portada .asistente .intercambio .fuentes, .portada .asistente .intercambio .rapidas{ justify-content:flex-start; }
.portada .asistente .intercambio:not([data-edad="0"]) .fuentes{ display:flex; }
.portada .asistente .relevo{ margin-top:14px; }
.portada .asistente .voz{ padding:4px 2px 10px; align-items:flex-start; }
.portada .asistente .orbe-voz{ display:none; }
.portada .asistente .estado{ font-size:13px; color:#8E97AC; }
.portada .asistente .caja{ height:56px; animation:none; border:1px solid rgba(255,255,255,.2); box-shadow:none; background:#fff; }
.portada .asistente .caja .orbe{ display:none; }
.portada .asistente .agente-pie{ align-items:flex-start; margin-top:12px; }
.portada .asistente .sugeridas{ justify-content:flex-start; }
.portada .asistente .cupo{ text-align:left; }
@media (max-width:600px){ .asistente{ width:100%; border-left:0; } .portada .asistente .agente{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce){ .asistente[open]{ animation:none; } }
.hero2{ grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr); }
.hero2-titulo{ font-size:clamp(2.3rem,4.5vw,4.25rem); max-width:16ch; line-height:1; }
@media (max-width:900px){ .hero2-titulo{ font-size:clamp(2.1rem,8.6vw,3.2rem); } }
.portada .hero2-titulo{ font-size:clamp(2.3rem,4.5vw,4.25rem); max-width:16ch; line-height:1; letter-spacing:-.05em; }
@media (max-width:900px){ .portada .hero2-titulo{ font-size:clamp(2.1rem,8.6vw,3.2rem); } }

/* El asistente con más protagonismo: su propio bloque en el hero */
.hero2{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:64px; }
.hero2-texto .hero2-sub{ margin-top:24px; max-width:44ch; }
.hero2-asistente{ background:#12151D; border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:22px; }
.ha-cab{ display:flex; gap:14px; align-items:flex-start; }
.ha-cab img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.ha-cab h2{ margin:0; font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.02em; color:#fff; }
.ha-cab p{ margin-top:4px; font-size:13.5px; line-height:1.45; color:#8E97AC; }
.ha-campo{ margin-top:18px; display:flex; align-items:center; gap:8px; height:58px; padding:0 7px 0 18px; border-radius:16px; background:#fff; border:2px solid transparent; transition:border-color 150ms; }
.ha-campo:focus-within{ border-color:#7FA6EE; }
.ha-campo input{ flex:1; min-width:0; border:0; background:transparent; color:#11141B; font:400 16px var(--sans); }
.ha-campo input::placeholder{ color:#7A8193; }
.ha-campo input:focus{ outline:none; }
.ha-campo button{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px; background:var(--tinta); color:#fff; cursor:pointer; transition:background 150ms; }
.ha-campo button:hover{ background:var(--tinta-2); }
.ha-campo svg, .ha-sugeridas svg{ width:16px; height:16px; flex:none; }
.ha-sugeridas{ list-style:none; margin:14px 0 0; padding:0; }
.ha-sugeridas li + li{ border-top:1px solid rgba(255,255,255,.08); }
.ha-sugeridas button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px; border:0; background:none; color:#C9D1E2; font:400 14.5px var(--sans); text-align:left; cursor:pointer; transition:color 150ms; }
.ha-sugeridas button svg{ opacity:.45; transition:transform 150ms, opacity 150ms; }
.ha-sugeridas button:hover{ color:#fff; }
.ha-sugeridas button:hover svg{ opacity:1; transform:translateX(3px); }
@media (max-width:900px){ .hero2{ gap:32px; } }
@media (max-width:600px){ .hero2-asistente{ padding:18px 16px; border-radius:20px; } .ha-cab p{ font-size:13px; } }
.ha-marca{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tinta); }
.ha-marca .marca{ font-size:26px; color:#fff; line-height:1; margin-top:-4px; }
.ha-marca .marca .punto{ background:var(--punto-claro); }
@media (max-width:900px){ .hero2{ grid-template-columns:minmax(0,1fr); gap:32px; } }

/* El asistente debajo de la demo, con la caja que respira */
.hero2{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:56px; align-items:end; }
.hero2-asistente{ margin-top:34px; padding:0; background:none; border:0; border-radius:0; }
.ha-titulo{ font-size:14px; font-weight:500; color:#C9D1E2; margin:0 0 12px 4px; }
.portada .hero-caja{ height:62px; padding:0 7px 0 18px; }
.portada .hero-caja input{ font-size:16px; }
.portada .hero-caja .enviar{ width:46px; height:46px; }
.ha-nota{ margin:12px 4px 0; font-size:12.5px; line-height:1.45; color:#8E97AC; }
@media (max-width:900px){ .hero2{ grid-template-columns:minmax(0,1fr); gap:28px; } }
@media (max-width:600px){ .portada .hero-caja{ height:58px; } }

/* El asistente como campo para escribir, rectangular: no compite con la píldora de la demo */
.portada .hero-caja{ height:auto; flex-direction:column; align-items:stretch; gap:10px; padding:16px 12px 12px 18px; border-radius:16px; }
.portada .hero-caja input{ height:28px; font-size:16.5px; padding:0; }
.hc-pie{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.hc-pie span{ font-size:12px; line-height:1.4; color:#6A7080; max-width:34ch; }
.portada .hero-caja .enviar{ width:40px; height:40px; border-radius:10px; flex:none; }
.portada .hero-caja .enviar svg{ width:18px; height:18px; }
.portada .asistente .caja{ border-radius:14px; }
.portada .asistente .enviar{ border-radius:10px; }
.ha-titulo{ margin-bottom:10px; }

/* ---- El escenario: Aleksa por dentro y, pegado a su derecha, el asistente de upa ---- */
.esc-nota{ width:calc(100% - 48px); max-width:1240px; margin:clamp(48px,7vh,72px) auto 14px; padding:0 4px; text-align:left; }
.escenario{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 380px; width:calc(100% - 48px); max-width:1240px; height:clamp(560px,68vh,680px);
  margin:0 auto 48px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#0B0D12; text-align:left;
  box-shadow:0 0 0 1px rgb(255 255 255 / .02), 0 30px 100px -30px rgb(42 105 223 / .55); transform:translateY(70px); opacity:0;
  transition:transform 900ms cubic-bezier(.16,1,.3,1), opacity 600ms ease; }
.escenario.arriba{ transform:none; opacity:1; }
.esc-producto{ min-width:0; height:100%; overflow:hidden; }
.escenario .vivo-marco{ height:100%; border-radius:0; }
.escenario .ak{ border-radius:0; box-shadow:none; transform:none; opacity:1; height:100%; }
.escenario .ak-cab{ border-radius:0; }
.ak-btn.senalado{ animation:senal 1.4s ease 2; }
@keyframes senal{ 0%,100%{ box-shadow:0 0 0 0 rgb(32 89 197 / 0); } 40%{ box-shadow:0 0 0 6px rgb(32 89 197 / .3); transform:translateY(-1px); } }

.pane{ display:flex; flex-direction:column; min-height:0; min-width:0; background:#0B0D12; border-left:1px solid rgba(255,255,255,.08); color:#F6F7FA; }
.pane-cab{ padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.pane-cab h2{ margin:0; font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.02em; color:#fff; }
.pane-cab p{ margin-top:4px; font-size:12.5px; line-height:1.45; color:#8E97AC; }
.pane-ejemplo{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:16px 18px 12px; overflow:hidden; }
.pe-et{ margin-bottom:auto; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5E6880; }
.pe-q{ align-self:flex-end; max-width:88%; min-height:36px; padding:8px 12px; border-radius:14px 14px 4px 14px; background:rgba(255,255,255,.09); font-size:14px; color:#E6EBF5; }
.pe-q::after{ content:""; display:inline-block; width:1.5px; height:1em; background:#7FA6EE; vertical-align:-2px; margin-left:1px; animation:parpadea 1s steps(1) infinite; }
.pe-q.listo::after{ display:none; }
@keyframes parpadea{ 50%{ opacity:0; } }
.pe-r{ font-size:14.5px; line-height:1.55; color:#F6F7FA; min-height:4.6em; }
.pe-r .p{ opacity:0; animation:pe-sale 280ms ease forwards; }
@keyframes pe-sale{ to{ opacity:1; } }
.pe-f{ align-self:flex-start; font-size:11.5px; color:#8E97AC; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:3px 10px; opacity:0; transition:opacity 300ms; }
.pe-f.ver{ opacity:1; }
.portada.activa .pane-ejemplo{ display:none; }

/* El agente dentro del panel: un chat de trabajo, sin orbe ni halo */
.portada .pane .agente{ flex:none; display:flex; flex-direction:column; margin:0; max-width:none; padding:0 14px 14px; }
.portada.activa .pane .agente{ flex:1; min-height:0; }
.portada .pane .escena{ display:none; }
.portada.activa .pane .escena{ display:flex; height:auto !important; flex:1; min-height:0; opacity:1; visibility:visible; pointer-events:auto; overflow:hidden; transition:none; }
.portada .pane .pila{ overflow-y:auto; justify-content:flex-start; padding:16px 4px 8px; gap:18px; -webkit-mask-image:none; mask-image:none; }
.portada .pane .pila > :first-child{ margin-top:auto; }
.portada .pane .intercambio, .portada .pane .intercambio[data-edad]{ display:flex; flex-direction:column; font-size:15px; opacity:1; filter:none; text-align:left; animation:none; }
.portada .pane .i-p{ align-self:flex-end; max-width:88%; margin:0 0 10px; padding:8px 12px; border-radius:14px 14px 4px 14px; background:rgba(255,255,255,.09); color:#E6EBF5; font-size:14px; }
.portada .pane .i-p::before, .portada .pane .i-p::after{ content:none; }
.portada .pane .i-r{ margin:0; max-width:none; font-family:var(--sans); font-weight:400; font-size:14.5px; line-height:1.55; letter-spacing:0; color:#F6F7FA; text-wrap:pretty; }
.portada .pane .intercambio .fuentes, .portada .pane .intercambio .rapidas{ justify-content:flex-start; }
.portada .pane .intercambio:not([data-edad="0"]) .fuentes{ display:flex; }
.portada .pane .relevo{ margin-top:12px; }
.portada .pane .voz{ padding:2px 4px 8px; align-items:flex-start; }
.portada .pane .orbe-voz{ display:none; }
.portada .pane .estado{ font-size:12.5px; color:#8E97AC; }
.portada .pane .caja{ height:52px; padding:0 6px 0 14px; border-radius:12px; animation:none; border:1px solid rgba(255,255,255,.18); box-shadow:none; background:#fff; }
.portada .pane .caja .orbe{ display:none; }
.portada .pane .caja input{ font-size:15.5px; }
.portada .pane .enviar{ width:40px; height:40px; border-radius:10px; }
.portada .pane .agente-pie{ flex-direction:row; align-items:center; justify-content:space-between; margin:8px 2px 0; }
.portada .pane .sugeridas{ display:none; }
.portada .pane .cupo{ font-size:11.5px; text-align:left; }
.portada:not(.activa) .pane .cupo{ display:none; }
@media (max-width:980px){
  .escenario{ grid-template-columns:minmax(0,1fr); height:auto; }
  .pane{ order:-1; border-left:0; border-bottom:1px solid rgba(255,255,255,.08); min-height:400px; }
  .portada.activa .pane{ height:560px; }
  .esc-producto{ height:480px; }
}
@media (max-width:600px){ .esc-nota, .escenario{ width:calc(100% - 20px); } .escenario{ margin-bottom:24px; border-radius:16px; } }
@media (prefers-reduced-motion: reduce){ .escenario{ transition:none; transform:none; opacity:1; } .ak-btn.senalado{ animation:none; outline:3px solid rgb(32 89 197 / .35); } }
/* Aleksa más angosta dentro del escenario */
.escenario .ak-menu{ width:184px; }
.escenario .ak-lienzo{ padding:22px 24px 24px; gap:18px; }
.escenario .ak-titulo h3{ font-size:34px; }
.escenario .ak-titulo p{ max-width:48ch; }
.escenario .ak-acciones .ak-btn:last-child{ display:none; }
.escenario .ak-fila{ grid-template-columns:92px minmax(0,1fr) 76px 76px 104px 30px; }
.escenario .ak-fila > :nth-child(4){ display:none; }
.escenario .ak-cifra{ padding-right:14px; }
.escenario .ak-cifra b{ font-size:26px; }
@media (max-width:1240px){ .escenario .ak-menu{ display:none; } }
.portada .pane .cupo:empty{ display:none; }

/* Aleksa y el asistente, cada uno en su bloque */
.escenario{ grid-template-columns:minmax(0,1fr) 380px; gap:20px; height:auto; overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; margin-top:clamp(44px,6vh,64px); }
.esc-col{ display:flex; flex-direction:column; min-width:0; }
.esc-col .esc-nota{ width:auto; margin:0 0 12px; padding:0 4px; }
.esc-producto{ height:clamp(540px,66vh,660px); border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 90px -40px rgb(42 105 223 / .5); }
.pane{ height:clamp(540px,66vh,660px); border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#0F1218; box-shadow:0 30px 90px -40px rgb(42 105 223 / .5); }
@media (max-width:980px){
  .escenario{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .esc-col-pane{ order:-1; }
  .pane{ order:0; height:auto; min-height:420px; border:1px solid rgba(255,255,255,.12); }
  .portada.activa .pane{ height:560px; }
  .esc-producto{ height:480px; }
}

/* ---- El asistente en su franja: pregunta en grande a la izquierda, la respuesta a la derecha ---- */
.banda{ width:calc(100% - 48px); max-width:1240px; margin:clamp(56px,8vh,88px) auto 0; padding:22px 0 30px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); text-align:left; color:#F6F7FA; }
.banda-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.banda-cab h2{ margin:0; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#7FA6EE; font-family:var(--sans); }
.banda-cab p{ margin:0; font-size:13px; color:#8E97AC; }
.banda-cuerpo{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; margin-top:26px; align-items:start; }
.banda-form{ display:flex; align-items:flex-end; gap:16px; padding-bottom:12px; border-bottom:2px solid rgba(255,255,255,.22); transition:border-color 200ms; }
.banda-form:focus-within{ border-bottom-color:#7FA6EE; }
.banda-form.invalida{ border-bottom-color:#F07B7B; }
.banda-form input{ flex:1; min-width:0; padding:0; border:0; background:transparent; color:#fff; caret-color:#7FA6EE;
  font:500 clamp(1.5rem,2.7vw,2.4rem)/1.15 var(--display); letter-spacing:-.03em; outline:none; }
.banda-form input::placeholder{ color:rgba(255,255,255,.3); }
.banda-form input[disabled]{ opacity:.5; }
.banda-enviar{ flex:none; width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:12px; background:#fff; color:#10234C; cursor:pointer; transition:transform 150ms; }
.banda-enviar:active{ transform:scale(.95); }
.banda-enviar svg{ width:20px; height:20px; }
.banda .aviso-campo{ margin:10px 0 0; color:#F5A3A3; font-size:14px; }
.banda-pie{ margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.banda .sugeridas{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:14px; color:#8E97AC; }
.banda .sugeridas button{ padding:0; border:0; background:none; color:#C9D1E2; font:inherit; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(255,255,255,.22); text-underline-offset:5px; transition:color 150ms, text-decoration-color 150ms; border-radius:0; }
.banda .sugeridas button:hover{ color:#fff; text-decoration-color:#7FA6EE; }
.banda .terminar{ padding:0; border:0; background:none; color:#C9D1E2; font:500 14px var(--sans); cursor:pointer; text-decoration:underline; text-underline-offset:5px; }
.banda .cupo{ font-size:12.5px; color:#8E97AC; }
.banda .cupo:empty{ display:none; }
/* La respuesta */
.banda-respuesta{ min-height:190px; border-left:1px solid rgba(255,255,255,.1); padding-left:32px; }
.banda .pane-ejemplo{ padding:0; justify-content:flex-start; gap:12px; min-height:190px; }
.banda .pe-et{ margin:0; color:#5E6880; }
.banda .pe-q{ align-self:flex-start; max-width:none; min-height:0; padding:0; background:none; border-radius:0; font-size:14px; color:#8E97AC; }
.banda .pe-q::before{ content:"Pregunta: "; color:#5E6880; }
.banda .pe-r{ font-family:var(--display); font-weight:300; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.35; letter-spacing:-.01em; min-height:5.4em; }
.banda .escena{ display:none; }
.portada.activa .banda .escena{ display:flex; flex-direction:column; height:auto !important; opacity:1; visibility:visible; pointer-events:auto; overflow:visible; transition:none; gap:10px; }
.banda .estado{ margin:0; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5E6880; min-height:1.2em; }
.banda .pila{ list-style:none; margin:0; padding:0; display:block; overflow:visible; -webkit-mask-image:none; mask-image:none; }
.banda .intercambio{ display:none !important; }
.banda .intercambio[data-edad="0"]{ display:block !important; font-size:16px; opacity:1; filter:none; text-align:left; animation:none; }
.banda .i-p{ margin:0 0 10px; font-size:14px; color:#8E97AC; }
.banda .i-p::before{ content:"Pregunta: "; color:#5E6880; } .banda .i-p::after{ content:none; }
.banda .i-r{ margin:0; max-width:none; font-family:var(--display); font-weight:300; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.35; letter-spacing:-.01em; color:#F6F7FA; text-wrap:pretty; }
.banda .fuentes, .banda .rapidas{ justify-content:flex-start; }
.banda .relevo{ margin-top:14px; }
@media (max-width:900px){
  .banda-cuerpo{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .banda-respuesta{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.1); padding-top:20px; min-height:0; }
  .banda .pane-ejemplo{ min-height:200px; }
}
@media (max-width:600px){ .banda{ width:calc(100% - 32px); margin-top:44px; } .banda-cab p{ font-size:12.5px; } }
/* Aleksa sola, a lo ancho, debajo de la franja */
.escenario{ grid-template-columns:minmax(0,1fr); margin-top:clamp(40px,6vh,64px); }
.portada .banda .sugeridas{ justify-content:flex-start; text-align:left; }
.portada .banda .agente-pie, .banda-pie{ justify-content:flex-start; }
/* Aleksa a lo ancho: vuelve la columna de convocatoria y el segundo botón */
@media (min-width:1100px){
  .escenario .ak-fila{ grid-template-columns:118px minmax(0,1.4fr) 84px minmax(0,1fr) 90px 112px 34px; }
  .escenario .ak-fila > :nth-child(4){ display:block; }
  .escenario .ak-acciones .ak-btn:last-child{ display:inline-flex; }
  .escenario .ak-menu{ width:206px; }
}

/* La franja del asistente: el único lugar con un poco de brillo de IA, con medida */
@property --barrido{ syntax:'<percentage>'; inherits:false; initial-value:-30%; }
.banda{ position:relative; isolation:isolate; }
.banda::before{ content:""; position:absolute; z-index:-1; left:8%; right:8%; top:18%; bottom:10%; border-radius:50%;
  background:radial-gradient(ellipse at 35% 50%, rgb(42 105 223 / .16), transparent 70%); filter:blur(30px); pointer-events:none; }
.banda-cab h2{ background:linear-gradient(90deg, #7FA6EE 0%, #C9D9FA 45%, #7FA6EE 60%, #7FA6EE 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brillo-texto 5s linear infinite; }
@keyframes brillo-texto{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
/* La línea de la pregunta lleva una luz que la recorre; más viva al escribir o mientras piensa */
.banda-form{ position:relative; border-bottom-color:rgba(255,255,255,.16); }
.banda-form::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent calc(var(--barrido) - 18%), #2A69DF calc(var(--barrido) - 8%), #A9C4F5 var(--barrido), #2A69DF calc(var(--barrido) + 8%), transparent calc(var(--barrido) + 18%));
  animation:barrido 4.5s cubic-bezier(.45,0,.55,1) infinite; opacity:.85; }
.banda-form:focus-within::after{ animation-duration:2.6s; opacity:1; }
.portada .banda:has(.escena[data-estado="piensa"]) .banda-form::after{ animation-duration:1.1s; opacity:1; }
@keyframes barrido{ from{ --barrido:-20%; } to{ --barrido:120%; } }
.banda-form:focus-within{ border-bottom-color:rgba(127,166,238,.35); }
.banda-enviar{ box-shadow:0 0 0 0 rgb(127 166 238 / 0); transition:transform 150ms, box-shadow 250ms; }
.banda-enviar:hover{ box-shadow:0 0 24px 2px rgb(127 166 238 / .45); }
/* Mientras busca, el estado lleva un destello */
.banda .escena[data-estado="piensa"] .estado{ background:linear-gradient(90deg, #5E6880 0%, #DDE6FB 50%, #5E6880 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brillo-texto 1.6s linear infinite; }
/* La respuesta aparece palabra por palabra, con un leve degradado al llegar */
.banda .i-r .p, .banda .pe-r .p{ opacity:0; animation:palabra-banda 520ms ease-out forwards; }
@keyframes palabra-banda{ 0%{ opacity:0; filter:blur(4px); color:#7FA6EE; } 60%{ opacity:1; filter:none; color:#C9D9FA; } 100%{ opacity:1; color:#F6F7FA; } }
@media (prefers-reduced-motion: reduce){
  .banda-cab h2, .banda .escena .estado{ animation:none; color:#7FA6EE; background:none; }
  .banda-form::after{ animation:none; opacity:0; }
  .banda .i-r .p, .banda .pe-r .p{ animation:none; opacity:1; }
}

/* Menos texto: la pregunta a lo ancho y en grande, la respuesta en una línea debajo */
.banda{ padding:20px 0 26px; }
.banda-cuerpo{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:14px; }
.banda .sugeridas{ display:none !important; }
.banda-form{ padding-bottom:14px; gap:20px; }
.banda-form input{ font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.1; letter-spacing:-.035em; }
.banda-enviar{ width:60px; height:60px; border-radius:14px; }
.banda-enviar svg{ width:24px; height:24px; }
.banda-respuesta{ border-left:0; padding-left:0; min-height:0; margin-top:18px; }
.banda .pane-ejemplo{ min-height:72px; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; }
.banda .pe-r, .banda .i-r{ min-height:0; font-size:clamp(1.05rem,1.6vw,1.3rem); color:#C9D1E2; }
.banda .pe-r{ flex:1; min-width:min(100%, 420px); }
.banda .pe-f{ align-self:center; }
.banda .i-p{ font-size:13px; margin-bottom:6px; }
.banda-pie{ margin-top:0; }
.banda-pie:has(.terminar:not([style*="none"])){ margin-top:12px; }
@media (max-width:600px){ .banda-enviar{ width:52px; height:52px; } .banda .pane-ejemplo{ min-height:96px; } }
.banda-cuerpo{ display:flex; flex-direction:column; }
.banda-pregunta{ display:contents; }
.banda-form{ order:1; } .banda .aviso-campo{ order:2; } .banda-respuesta{ order:3; } .banda-pie{ order:4; margin-top:10px; }
@media (max-width:900px){ .banda-respuesta{ border-top:0; padding-top:0; } }
@media (max-width:600px){ .banda-form input{ font-size:1.4rem; } .banda .pane-ejemplo{ min-height:84px; } }
.banda-cuerpo{ align-items:stretch; } .banda-form{ width:100%; }

/* Escritorio: el agente más pequeño (el celular queda como está) */
@media (min-width:901px){
  .banda{ margin-top:clamp(44px,6vh,64px); padding:16px 0 20px; }
  .banda-cuerpo{ margin-top:10px; max-width:820px; }
  .banda-form{ padding-bottom:10px; gap:14px; }
  .banda-form input{ font-size:clamp(1.35rem,1.9vw,1.75rem); letter-spacing:-.02em; }
  .banda-enviar{ width:44px; height:44px; border-radius:11px; }
  .banda-enviar svg{ width:19px; height:19px; }
  .banda-respuesta{ margin-top:12px; }
  .banda .pe-r, .banda .i-r{ font-size:clamp(1rem,1.2vw,1.12rem); }
  .banda .pane-ejemplo{ min-height:52px; }
}
/* El agente a lo ancho de la franja, alineado con sus líneas */
@media (min-width:901px){
  .banda-cuerpo{ max-width:none; }
  .banda .pane-ejemplo{ align-items:center; }
  .banda .pe-f{ align-self:center; }
}
@media (min-width:901px){ .banda{ padding:20px 0 20px; } .banda .pane-ejemplo{ min-height:34px; } }

/* Una sola raya: la de la pregunta (Edgar: tres rayas son mucho) */
.banda{ border-top:0; border-bottom:0; }

/* UpAI: el logito del asistente, en negrita cursiva */
.banda-cab h2{ display:flex; align-items:baseline; gap:8px; background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#C9D1E2; animation:none;
  font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; }
.upai{ display:inline-block; transform:skewX(-12deg); font-family:var(--display); font-weight:800; font-size:24px; line-height:1; letter-spacing:-.04em; color:#fff; padding-right:2px; }
.upai b{ font-weight:800; background:linear-gradient(90deg, #5B8EE8 0%, #C9D9FA 45%, #7FA6EE 60%, #2A69DF 100%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:brillo-texto 5s linear infinite; }
@media (prefers-reduced-motion: reduce){ .upai b{ animation:none; background:none; color:#7FA6EE; } }
/* UpAI en letra caligráfica */
.upai{ transform:none; font-family:"Yellowtail", "Brush Script MT", cursive; font-weight:400; font-size:34px; letter-spacing:0; line-height:.9; padding:0 .12em 0 0; }
.upai b{ font-weight:400; padding-right:.18em; margin-right:-.18em; }
@media (min-width:901px){ .upai{ font-size:32px; } }
/* UpAI: «Up» caligráfico (Norican) y «AI» en la letra del logo de upa */
.upai{ display:inline-flex; align-items:baseline; gap:1px; font-family:"Norican", "Brush Script MT", cursive; font-size:34px; line-height:1; color:#fff; padding:0; }
.upai b{ font-family:var(--display); font-weight:500; font-size:.72em; letter-spacing:-.03em; padding:0; margin:0; }
@media (min-width:901px){ .upai{ font-size:32px; } }
.upai{ font-size:40px; } @media (min-width:901px){ .upai{ font-size:38px; } } .upai b{ font-size:.62em; margin-left:2px; }
/* UpAI: «Up» en Pacifico */
.upai{ font-family:"Pacifico", "Brush Script MT", cursive; font-size:30px; line-height:1.25; }
@media (min-width:901px){ .upai{ font-size:28px; } }
.upai b{ font-size:.78em; margin-left:3px; }
.upai{ gap:0; } .upai b{ margin-left:-3px; }
/* Aleksa en el celular: las filas vuelven a ser fichas (las reglas del escenario las pisaban) */
@media (max-width:600px){
  .escenario .ak-fila{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"quien estado" "num mas"; gap:4px 10px; padding:12px 2px; }
  .escenario .ak-fila > :nth-child(4){ display:none; }
}
@media (max-width:600px){ .ak-toast{ left:12px; right:12px; transform:none; max-width:none; animation-name:ak-toast-cel; } } @keyframes ak-toast-cel{ from{ opacity:0; transform:translateY(-8px); } }

/* Botón de modo claro / oscuro en la barra */
.tema-boton{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff; cursor:pointer; transition:background 150ms; }
.tema-boton:hover{ background:rgba(255,255,255,.1); }
.tema-boton svg{ width:18px; height:18px; grid-area:1 / 1; transition:opacity 200ms, transform 300ms cubic-bezier(.2,.8,.2,1); }
.tema-boton .sol{ opacity:0; transform:rotate(-60deg) scale(.6); }
.tema-oscuro .tema-boton .luna{ opacity:0; transform:rotate(60deg) scale(.6); }
.tema-oscuro .tema-boton .sol{ opacity:1; transform:none; }
:root[data-theme="dark"] .aviso-campo{ color:#F2B8B5; }
:root[data-theme="dark"] .aviso-campo button[data-usar]{ background:#F2B8B5; border-color:#F2B8B5; color:#601410; }
:root[data-theme="dark"] .pildora:not(.clara):hover{ background:#fff; }
html{ transition:background-color 300ms; }
/* Celular: la tarjeta de Aleksa concéntrica con el negro (mismo margen a los lados y abajo; radio = radio del negro − margen) */
@media (max-width:600px){
  .portada{ border-radius:22px; }
  .escenario{ width:calc(100% - 20px); margin-bottom:10px; }
  .esc-producto{ border-radius:12px; }
}

/* ---- Los dos productos por dentro, en pestañas parejas ---- */
.esc-tabs{ display:flex; gap:8px; margin:0 0 14px; }
.esc-tabs button{ flex:1; max-width:300px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:#C9D1E2; cursor:pointer; text-align:left; transition:background 150ms, border-color 150ms; }
.esc-tabs button b{ font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.02em; color:#fff; }
.esc-tabs button[data-tab="tabcode"] b{ font-family:"Nunito", var(--sans); font-weight:800; letter-spacing:-.01em; }
.esc-tabs button span{ font-size:12.5px; color:#8E97AC; }
.esc-tabs button:hover{ background:rgba(255,255,255,.07); }
.esc-tabs button[aria-selected="true"]{ background:#fff; border-color:#fff; }
.esc-tabs button[aria-selected="true"] b{ color:#10234C; }
.esc-tabs button[aria-selected="true"] span{ color:#5A6070; }
.esc-tabs button[data-tab="tabcode"][aria-selected="true"]{ background:#FBF6EC; border-color:#FBF6EC; }
.esc-tabs button[data-tab="tabcode"][aria-selected="true"] b{ color:#22190F; }
.esc-col .esc-nota{ margin:0 0 12px; }
/* tabcode por dentro: la maqueta del celular sobre su crema, con lo que hace al lado */
.esc-tc{ background:#FBF6EC; color:#22190F; }
.tc-escena{ height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px; padding:40px 56px; }
.tc-et{ font-family:"Nunito", var(--sans); font-weight:800; font-size:15px; color:#B7791F; margin-bottom:10px; }
.tc-texto h3{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.05; letter-spacing:-.035em; color:#22190F; }
.tc-texto ul{ margin:22px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.tc-texto li{ position:relative; padding-left:22px; font-size:15.5px; line-height:1.45; color:#4A3F31; }
.tc-texto li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:#B7791F; }
.esc-tc .vitrina{ margin:0; padding:0; background:none; justify-self:center; }
@media (max-width:900px){
  .tc-escena{ grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 20px; align-content:start; overflow:auto; }
  .esc-tc{ height:auto !important; min-height:480px; }
}
@media (max-width:600px){ .esc-tabs button{ padding:10px 12px; } .esc-tabs button b{ font-size:17px; } .esc-tabs button span{ font-size:11.5px; } }

/* Nuestros productos: puertas con dos salidas */
.puerta-acciones{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px 22px; }
.puerta-acciones .ir{ text-decoration:none; font-weight:600; }
.puerta-acciones .ir:hover{ text-decoration:underline; text-underline-offset:4px; }
div.puerta:hover{ transform:none; }
.esc-tc .vitrina.tabcode{ border:0; background:none; padding:0; } .esc-tc .tc-cel{ width:min(300px,100%); }

/* ---- Pie: la misma tarjeta negra del hero, para cerrar la página como abre ---- */
.pie{ background:transparent; color:#F6F7FA; padding:0 12px 12px; }
.pie-marco{ background:#07080C; border-radius:28px; padding:64px 0 28px; overflow:hidden; position:relative; isolation:isolate; }
.pie-marco::before{ content:""; position:absolute; z-index:-1; left:-10%; right:-10%; bottom:-30%; height:70%; background:radial-gradient(ellipse at 50% 100%, rgb(42 105 223 / .22), transparent 65%); pointer-events:none; }
.pie-arriba{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:40px 64px; align-items:end; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.pie-pregunta{ margin:0; max-width:none; }
.pie-pregunta label{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; margin:0 0 14px; font-size:15px; color:#C9D1E2; }
.pie-pregunta .upai{ font-size:30px; }
.pie-caja{ height:auto; padding:0 0 12px; border:0; border-radius:0; background:transparent; border-bottom:2px solid rgba(255,255,255,.22); transition:border-color 200ms; }
.pie-caja:focus-within{ border-bottom-color:#7FA6EE; }
.pie-caja input{ font:500 clamp(1.2rem,2vw,1.6rem)/1.2 var(--display); letter-spacing:-.02em; color:#fff; caret-color:#7FA6EE; }
.pie-caja input::placeholder{ color:rgba(255,255,255,.32); }
.pie-enviar{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px; background:#fff; color:#10234C; cursor:pointer; }
.pie-enviar svg{ width:19px; height:19px; }
.pie-enrique{ display:flex; gap:16px; align-items:flex-start; padding:18px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.pie-enrique img{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; }
.pie-enrique b{ display:block; font-size:16px; color:#fff; }
.pie-enrique span{ display:block; margin-top:2px; font-size:13.5px; line-height:1.45; color:#8E97AC; }
.pie-enrique-acciones{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px 18px; }
.pie-enrique-acciones a{ display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:#fff; text-decoration:none; }
.pie-enrique-acciones a svg{ width:15px; height:15px; transition:transform 150ms; }
.pie-enrique-acciones a:hover svg{ transform:translateX(3px); }
.pie-columnas{ display:flex; flex-wrap:wrap; gap:28px 72px; padding:36px 0 8px; font-size:15px; }
.pie-columnas div{ display:flex; flex-direction:column; gap:12px; }
.pie-columnas .t{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5E6880; }
.pie-columnas a{ color:#E6EBF5; text-decoration:none; }
.pie-columnas a small{ display:block; font-size:12.5px; color:#8E97AC; margin-top:2px; }
.pie-columnas a:hover{ color:#fff; text-decoration:none; }
.pie-marca-grande{ margin:12px 0 0; line-height:.8; text-align:center; pointer-events:none; user-select:none; }
.pie-marca-grande .marca{ font-size:clamp(9rem,30vw,26rem); font-weight:600; letter-spacing:-.06em; color:rgba(255,255,255,.07); }
.pie-marca-grande .marca .punto{ background:#5B8EE8; box-shadow:0 0 60px 6px rgb(42 105 223 / .55); }
.pie-abajo{ position:relative; margin-top:-1.2em; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:13px; color:#8E97AC; }
.pie-arriba-link{ color:#C9D1E2; text-decoration:none; }
.pie-arriba-link:hover{ color:#fff; }
@media (max-width:900px){ .pie-arriba{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px){
  .pie{ padding:0 8px 8px; }
  .pie-marco{ border-radius:22px; padding:44px 0 22px; }
  .pie-columnas{ gap:28px 48px; }
  .pie-marca-grande .marca{ font-size:42vw; }
  .pie-abajo{ margin-top:-.6em; }
}
.pie-marca-grande{ margin:28px 0 8px; line-height:1; padding-bottom:.02em; }
.pie-marca-grande .marca{ font-size:clamp(8rem,24vw,20rem); line-height:1.05; }
.pie-marca-grande .marca .punto{ box-shadow:0 0 36px 2px rgb(42 105 223 / .35); }
.pie-abajo{ margin-top:0; }
@media (max-width:600px){ .pie-marca-grande .marca{ font-size:38vw; } .pie-abajo{ margin-top:0; } }
.pie-marca-grande{ margin:4px 0 14px; } .pie-marca-grande .marca{ font-size:clamp(7rem,19vw,16rem); }
/* Pie: la marca en su tamaño normal, junto al copyright */
.pie-abajo{ align-items:center; padding-top:22px; margin-top:28px; }
.pie-firma{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pie-firma .marca{ font-size:30px; color:#fff; }
.pie-firma .marca .punto{ background:#7FA6EE; }
/* Redes sociales en el pie (cada una aparece solo si tiene enlace en datos.json) */
.pie-derecha{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pie-redes{ display:flex; gap:8px; }
.pie-redes:empty{ display:none; }
.pie-redes a{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.14); color:#C9D1E2; transition:color 150ms, background 150ms, border-color 150ms; }
.pie-redes a:hover{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }
.pie-redes svg{ width:18px; height:18px; }
.pie-redes a, .pie-redes .red-pronto{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.14); color:#C9D1E2; }
.pie-redes .red-pronto{ cursor:default; }
/* Volver arriba: un botón de la misma familia que las redes, separado por una línea */
.pie-derecha{ gap:14px; }
.pie-subir{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#fff; color:#10234C; text-decoration:none; transition:transform 150ms, background 150ms; position:relative; margin-left:6px; }
.pie-subir::before{ content:""; position:absolute; left:-11px; top:8px; bottom:8px; width:1px; background:rgba(255,255,255,.14); }
.pie-subir svg{ width:18px; height:18px; transition:transform 200ms cubic-bezier(.2,.8,.2,1); }
.pie-subir:hover{ background:#E6EBF5; }
.pie-subir:hover svg{ transform:translateY(-2px); }
.pie-subir:active{ transform:scale(.94); }
@media (max-width:600px){ .pie-abajo{ align-items:flex-end; } }

/* UpAI: el logo en SVG (recreado del diseño aprobado, 2026-10-10) */
.upai-logo{ display:inline-block; height:30px; width:auto; vertical-align:middle; position:relative; top:2px; }
.banda-cab h2{ align-items:center; gap:10px; }
.pie-pregunta label{ align-items:center; }
.pie-pregunta .upai-logo{ height:26px; }
@media (max-width:600px){ .upai-logo{ height:28px; } }
/* UpAI más pequeño */
.upai-logo{ height:22px; top:1px; }
.pie-pregunta .upai-logo{ height:20px; }
@media (max-width:600px){ .upai-logo{ height:22px; } }

/* ---- tabcode por dentro: mesas, pedido y cobro reconstruidos desde su repo
   (tokens «Barra Cálida» de frontend/packages/shared/src/ui/tokens.css). Siempre en su tema claro. */
.esc-tc{ background:#faf6ec; }
.tq{ --tq-primario:#c13b1e; --tq-accion:#1a130b; --tq-lienzo:#faf6ec; --tq-sup:#f7f1e5; --tq-papel:#fffcf5; --tq-txt:#1a130b; --tq-mute:#5a4a38;
  --tq-borde:#2d1f14; --tq-linea:#d7ccb9; --tq-ok:#2e6b2e; --tq-ok-bg:#e6eddd; --tq-warn:#8a5a00; --tq-warn-bg:#f7ebcb; --tq-info:#1f4fa8; --tq-info-bg:#e3eaf8;
  height:100%; display:flex; background:var(--tq-lienzo); color:var(--tq-txt); font-family:"Nunito", var(--sans); font-size:14px; line-height:1.4; text-align:left; }
.tq button{ font:inherit; color:inherit; }
.tq svg{ width:18px; height:18px; flex:none; }
.tq-lado{ flex:none; width:196px; padding:18px 14px; background:var(--tq-sup); border-right:1px solid var(--tq-linea); display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.tq-logo{ display:flex; align-items:center; gap:9px; }
.tq-logo svg{ width:34px; height:34px; }
.tq-logo span{ font-weight:800; font-size:22px; letter-spacing:-.02em; }
.tq-logo i{ font-style:normal; color:var(--tq-primario); }
.tq-lema{ margin:2px 0 14px 43px; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--tq-mute); }
.tq-negocio{ display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--tq-linea); border-bottom:1px solid var(--tq-linea); margin-bottom:8px; }
.tq-negocio > span{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:#e3d8c4; font-weight:800; }
.tq-negocio b{ display:block; font-size:12.5px; } .tq-negocio small{ font-size:11px; color:var(--tq-mute); }
.tq-grupo{ margin:10px 4px 4px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tq-mute); }
.tq-item{ display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border:0; border-radius:10px; background:none; cursor:pointer; font-size:13.5px !important; text-align:left; }
.tq-item:hover{ background:rgba(0,0,0,.04); }
.tq-item.activo{ background:#fae5de; color:var(--tq-primario) !important; font-weight:700 !important; }
.tq-main{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; }
.tq-top{ flex:none; display:flex; justify-content:space-between; align-items:center; height:52px; padding:0 24px; border-bottom:1px solid var(--tq-linea); font-size:13px; }
.tq-gris{ color:var(--tq-mute); }
.tq-linea{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; }
.tq-linea i{ width:7px; height:7px; border-radius:50%; background:var(--tq-ok); }
.tq-vista{ flex:1; min-height:0; overflow:auto; padding:22px 24px 26px; }
.tq-h{ margin:0; font-weight:800; font-size:30px; letter-spacing:-.02em; }
.tq-cab{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.tq-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.tq-chip{ display:inline-flex; align-items:center; padding:4px 9px; border-radius:6px; font-size:11.5px; font-weight:700; }
.tq-chip.info{ background:var(--tq-info-bg); color:var(--tq-info); } .tq-chip.warn{ background:var(--tq-warn-bg); color:var(--tq-warn); } .tq-chip.ok{ background:var(--tq-ok-bg); color:var(--tq-ok); }
.tq-mesas{ margin-top:18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; }
.tq-mesa{ min-height:132px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px; border-radius:14px; border:2px solid var(--tq-borde); background:var(--tq-papel); cursor:pointer; text-align:left; transition:transform 120ms, box-shadow 120ms; }
.tq-mesa:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -12px rgb(45 31 20 / .4); }
.tq-mesa b{ font-size:30px; font-weight:800; line-height:1; }
.tq-mesa small{ font-size:12px; color:var(--tq-mute); }
.tq-mesa .tq-total{ margin-top:auto; font-weight:800; font-size:15px; }
.tq-mesa.libre{ border:2px dashed #cfc3ad; background:transparent; }
.tq-mesa.libre b{ color:var(--tq-ok); }
.tq-mesa.libre .tq-pie{ margin-top:auto; display:flex; align-items:center; gap:6px; font-size:11px; }
.tq-mesa.cuenta{ border-color:var(--tq-info); }
.tq-mesa.cambia{ animation:tq-cambia 1s ease; }
@keyframes tq-cambia{ 0%{ box-shadow:0 0 0 6px rgb(46 107 46 / .35); } 100%{ box-shadow:none; } }
.tq-ayuda{ margin-top:16px; font-size:12.5px; color:var(--tq-mute); }
/* Pedido */
.tq-volver{ border:0; background:none; padding:0; display:inline-flex; gap:6px; align-items:center; font-size:13px !important; color:var(--tq-mute) !important; cursor:pointer; margin-bottom:8px; }
.tq-pedido{ display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; margin-top:14px; }
.tq-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tq-cats button{ padding:7px 11px; border-radius:10px; border:1px solid var(--tq-linea); background:var(--tq-papel); font-size:12.5px !important; cursor:pointer; }
.tq-cats button[aria-pressed="true"]{ background:var(--tq-accion); border-color:var(--tq-accion); color:#fff !important; }
.tq-prods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; }
.tq-prod{ position:relative; display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:12px; border:1px solid var(--tq-linea); background:var(--tq-papel); cursor:pointer; text-align:left; }
.tq-prod:hover{ border-color:var(--tq-primario); }
.tq-prod img{ width:56px; height:56px; border-radius:8px; object-fit:cover; }
.tq-prod b{ font-weight:700; font-size:13px; line-height:1.25; min-height:2.5em; }
.tq-prod span{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:13.5px; }
.tq-prod span i{ font-style:normal; width:24px; height:24px; display:grid; place-items:center; border-radius:6px; border:1px solid var(--tq-linea); color:var(--tq-primario); font-weight:700; }
.tq-prod em{ position:absolute; top:10px; right:10px; font-style:normal; font-size:10.5px; color:var(--tq-primario); font-weight:700; }
.tq-cuenta{ align-self:start; padding:16px; border-radius:14px; border:1px solid var(--tq-linea); background:var(--tq-papel); }
.tq-cuenta .tq-et{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tq-mute); }
.tq-cuenta h4{ margin:2px 0 10px; font-weight:800; font-size:20px; }
.tq-lin{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--tq-linea); font-size:13px; }
.tq-lin .q{ display:inline-flex; align-items:center; gap:6px; }
.tq-lin .q button{ width:24px; height:24px; border-radius:6px; border:1px solid var(--tq-linea); background:var(--tq-sup); cursor:pointer; }
.tq-lin.enviada{ color:var(--tq-mute); }
.tq-vacio{ padding:12px 0; font-size:12.5px; color:var(--tq-mute); border-top:1px solid var(--tq-linea); }
.tq-totalfila{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0 12px; border-top:2px solid var(--tq-borde); font-weight:800; }
.tq-totalfila b{ font-size:22px; }
.tq-btn{ width:100%; min-height:46px; border:0; border-radius:12px; background:var(--tq-accion); color:#fff !important; font-weight:800 !important; font-size:14.5px !important; cursor:pointer; }
.tq-btn:disabled{ opacity:.35; cursor:default; }
.tq-btn.verde{ background:var(--tq-ok); }
.tq-link{ display:block; margin:10px auto 0; border:0; background:none; font-weight:800 !important; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
/* Cobro */
.tq-cobro{ position:absolute; top:0; right:0; bottom:0; width:min(340px,100%); z-index:4; display:flex; flex-direction:column; background:var(--tq-papel); border-left:1px solid var(--tq-borde); box-shadow:-20px 0 40px -20px rgb(0 0 0 / .35); animation:tq-entra 260ms cubic-bezier(.16,1,.3,1); }
@keyframes tq-entra{ from{ transform:translateX(30px); opacity:0; } }
.tq-cobro-cab{ display:flex; justify-content:space-between; align-items:flex-start; padding:16px 18px 12px; border-bottom:1px solid var(--tq-linea); }
.tq-cobro-cab h4{ margin:0; font-size:18px; font-weight:800; } .tq-cobro-cab p{ margin:2px 0 0; font-size:12px; color:var(--tq-mute); }
.tq-cobro-cab button{ border:0; background:none; cursor:pointer; font-size:20px !important; line-height:1; }
.tq-cobro-cuerpo{ flex:1; overflow:auto; padding:14px 18px; display:flex; flex-direction:column; gap:14px; }
.tq-grupo-op legend{ font-weight:800; font-size:13.5px; padding:0 4px; }
.tq-grupo-op{ margin:0; border:1px solid var(--tq-linea); border-radius:12px; padding:10px 12px 12px; }
.tq-grupo-op p{ margin:0 0 8px; font-size:12px; color:var(--tq-mute); }
.tq-ops{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tq-ops button{ min-height:44px; padding:4px; border-radius:10px; border:1px solid var(--tq-borde); background:var(--tq-papel); font-weight:700 !important; font-size:12.5px !important; cursor:pointer; line-height:1.15; }
.tq-ops button small{ display:block; font-weight:500; font-size:10.5px; color:var(--tq-mute); }
.tq-ops button[aria-pressed="true"]{ background:var(--tq-accion); color:#fff !important; } .tq-ops button[aria-pressed="true"] small{ color:#d7ccb9; }
.tq-cobro-pie{ padding:12px 18px 16px; border-top:1px solid var(--tq-borde); background:var(--tq-sup); }
.tq-toast{ position:absolute; left:50%; top:62px; transform:translateX(-50%); z-index:6; max-width:min(440px,calc(100% - 24px)); padding:10px 14px; border-radius:12px; background:var(--tq-accion); color:#fff; font-size:13px; box-shadow:0 14px 30px -12px rgb(0 0 0 / .5); animation:ak-toast 260ms cubic-bezier(.16,1,.3,1); }
@media (max-width:980px){ .tq-lado{ display:none; } }
@media (max-width:700px){
  .tq-pedido{ grid-template-columns:minmax(0,1fr); }
  .tq-vista{ padding:16px 14px 20px; } .tq-top{ padding:0 14px; }
  .tq-h{ font-size:24px; } .tq-mesas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tq-toast{ left:12px; right:12px; transform:none; max-width:none; animation-name:ak-toast-cel; }
}
@media (max-width:900px){ .esc-tc{ height:560px !important; min-height:0; } }

/* Tarjetas de producto con gancho: una frase de entrada y tres cosas que hace */
.puerta{ gap:12px; }
.puerta .nombre{ margin-bottom:6px; }
.puerta-gancho{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.15; letter-spacing:-.025em; max-width:24ch; }
.puerta-lista{ margin:8px 0 6px; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.puerta-lista li{ position:relative; padding-left:28px; font-size:15.5px; line-height:1.45; max-width:44ch; }
.puerta-lista li::before{ content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border-radius:50%;
  background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite:source-in; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat; opacity:.9; }
.puerta.aleksa .puerta-lista li{ color:#E3EBFC; } .puerta.aleksa .puerta-lista li::before{ background:#9DBBF3; }
.puerta.tabcode .puerta-lista li{ color:#3D3225; } .puerta.tabcode .puerta-lista li::before{ background:#B7791F; }
.puerta .puerta-para{ font-size:14px; opacity:.85; margin-top:auto; }
.puerta.aleksa .puerta-para{ color:#C7D7F7; } .puerta.tabcode .puerta-para{ color:var(--tc-muted); }
.puerta-acciones{ margin-top:6px; }
.puerta.tabcode .puerta-gancho{ font-family:"Nunito", var(--sans); font-weight:800; letter-spacing:-.015em; }
.puerta-lista li::before{ -webkit-mask:none; mask:none; opacity:1; width:20px; height:20px; top:.15em; }
.puerta-lista li::after{ content:""; position:absolute; left:7px; top:calc(.15em + 4px); width:5px; height:9px; border-right:2.2px solid; border-bottom:2.2px solid; transform:rotate(45deg); }
.puerta.aleksa .puerta-lista li::before{ background:rgba(255,255,255,.2); } .puerta.aleksa .puerta-lista li::after{ border-color:#fff; }
.puerta.tabcode .puerta-lista li::before{ background:#B7791F; } .puerta.tabcode .puerta-lista li::after{ border-color:#FBF6EC; }

/* Bandera de Colombia junto a la marca */
.marca-con-bandera{ display:inline-flex; align-items:center; gap:10px; }
.bandera{ display:inline-flex; flex:none; width:21px; height:14px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgb(255 255 255 / .18); position:relative; top:2px; }
.bandera svg{ width:100%; height:100%; display:block; }
.pie-firma .bandera{ width:18px; height:12px; }
.barra-acciones .bandera{ top:0; margin-right:4px; }
/* «Pregúntale a» pegado al logo de UpAI */
.banda-cab h2{ gap:6px; }
.pie-pregunta label{ gap:6px; }
.pie-pregunta label .pa-pre{ margin-left:2px; }
.upai-logo{ margin-left:-1px; }

/* ---- Concepto «La postura»: la página como cinco argumentos con su prueba ---- */
.hero2-firma{ margin-top:18px; display:flex; align-items:center; gap:12px; font-size:14px; color:#A9B3C8; }
.hero2-firma img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; }
.hero2-firma b{ color:#fff; font-weight:600; }
.portada .banda{ margin-bottom:56px; }
.arg{ padding:clamp(72px,10vw,120px) 0; border-top:1px solid var(--border); }
.arg:first-of-type{ border-top:0; }
.arg-cab{ display:grid; grid-template-columns:90px minmax(0,1.15fr) minmax(0,.85fr); gap:20px 48px; align-items:start; }
.arg-num{ font-family:var(--display); font-weight:600; font-size:clamp(2.6rem,4vw,3.6rem); line-height:.9; letter-spacing:-.04em; color:var(--punto); }
.arg .titulo{ font-size:clamp(2rem,3.8vw,3.4rem); line-height:1.02; max-width:18ch; }
.arg-texto{ display:flex; flex-direction:column; gap:14px; font-size:clamp(1.02rem,1.3vw,1.12rem); color:var(--muted-fg); padding-top:6px; }
.arg-texto b{ color:var(--fg); }
.arg-maq{ margin-top:clamp(36px,5vw,56px); }
.arg-leyenda{ font-size:14px; color:var(--muted-fg); margin:0 0 12px 4px; }
.arg-leyenda b{ color:var(--fg); }
.arg-ventana{ height:clamp(540px,64vh,660px); border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 30px 70px -40px rgb(16 35 76 / .45); }
.arg-ventana .ak{ transform:none; opacity:1; border-radius:0; box-shadow:none; height:100%; }
.arg-ventana .vivo-marco{ height:100%; border-radius:0; }
.arg-ventana .ak-cab{ border-radius:0; }
.arg-noche{ background:#0B0D12; color:#F6F7FA; border-top:0; }
.arg-noche .titulo{ color:#fff; }
.arg-noche .arg-texto{ color:#A9B3C8; } .arg-noche .arg-texto b{ color:#fff; }
.arg-noche .arg-num{ color:#F2B862; }
.arg-noche .arg-leyenda{ color:#8E97AC; } .arg-noche .arg-leyenda b{ color:#fff; }
.arg-noche .arg-ventana{ border-color:rgba(255,255,255,.1); }
.arg-enrique{ display:flex; gap:14px; align-items:center; margin-top:8px; padding:16px; border-radius:16px; background:var(--card); border:1px solid var(--border); }
.arg-enrique img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; }
.arg-enrique b{ display:block; color:var(--fg); font-size:16px; } .arg-enrique span{ font-size:14.5px; }
@media (max-width:980px){ .arg-cab{ grid-template-columns:minmax(0,1fr); gap:14px; } .arg-ventana{ height:520px; } .arg-ventana.esc-tc{ height:560px !important; } }
@media (max-width:600px){ .arg-maq{ padding-inline:10px; } .arg-ventana{ border-radius:14px; } }
/* Postura: los productos presentados antes de los argumentos */
.familia + .arg{ border-top:1px solid var(--border); }
/* Botón de demo con la foto de Enrique */
.pildora-foto{ padding-left:6px !important; gap:12px; }
.pildora-foto img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px #fff; }
.hero2-botones .pildora-foto{ min-height:52px; padding-right:26px; }
/* Sin zoom: sin doble toque ni pellizco, y campos de 16px para que iOS no acerque al enfocar */
html{ touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }
@media (max-width:900px){ input, select, textarea{ font-size:16px !important; } }
/* Cargo de Enrique */
.cargo{ font-style:normal; font-weight:500; font-size:12.5px; letter-spacing:.02em; color:var(--muted-fg); }
.arg-enrique .cargo{ display:block; margin:1px 0 6px; color:var(--punto, #2A69DF); font-weight:600; }
.pt-pie .cargo{ font-size:11.5px; margin-left:4px; }
/* Aleksa por dentro: Aprende (rutas con misiones que se marcan solas) */
.ap{ display:flex; flex-direction:column; }
.ap .ak-cab{ flex:none; }
.ap-rol{ margin-left:auto; }
.ap-lienzo{ position:relative; flex:1; min-height:0; overflow:auto; padding:22px 30px 30px; display:flex; flex-direction:column; gap:18px; scrollbar-width:thin; }
.ap-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--ak-border); }
.ap-tabs button{ height:36px; padding:0 12px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; font-size:13.5px !important; color:var(--ak-muted-fg) !important; cursor:pointer; }
.ap-tabs button.activo{ border-bottom-color:var(--ak-brand); color:var(--ak-fg) !important; font-weight:600 !important; }
.ap-cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.ap-cabeza h3{ margin:0; font-family:var(--display); font-weight:300; font-size:38px; line-height:1.05; letter-spacing:-.02em; color:var(--ak-fg); }
.ap-cabeza p{ margin-top:8px; max-width:58ch; font-size:13.5px; color:var(--ak-muted-fg); }
.ap-pill{ flex:none; display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:var(--ak-brand-50); color:var(--ak-brand); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.ap-pill.listo{ background:var(--ak-ok-bg); color:var(--ak-ok); }
.ap-ruta{ background:var(--ak-card); border:1px solid var(--ak-border); border-radius:20px; padding:18px 18px 8px; }
.ap-ruta-cab{ display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--ak-border); }
.ap-ruta-cab h4{ margin:0; font-family:var(--display); font-weight:500; font-size:18px; color:var(--ak-fg); }
.ap-ruta-cab p{ margin-top:2px; font-size:12.5px; color:var(--ak-muted-fg); }
.ap-anillo{ --p:33%; flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--ak-ok) var(--p), var(--ak-muted) 0); transition:--p 600ms; }
.ap-anillo b{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--ak-card); font-size:13px; font-weight:600; color:var(--ak-fg); font-variant-numeric:tabular-nums; }
.ap-misiones{ list-style:none; margin:0; padding:0; }
.ap-mision{ border-bottom:1px solid var(--ak-border); }
.ap-mision:last-child{ border-bottom:0; }
.ap-fila{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.ap-marca{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--ak-border); font-size:12px; font-weight:600; color:var(--ak-muted-fg); font-variant-numeric:tabular-nums; transition:background 300ms, border-color 300ms, color 300ms; }
.ap-mision.hecha .ap-marca{ background:var(--ak-ok); border-color:var(--ak-ok); color:#fff; }
.ap-mision.hecha .ap-marca svg{ width:14px; height:14px; }
.ap-txt{ flex:1; min-width:0; }
.ap-txt b{ display:block; font-size:14px; font-weight:600; color:var(--ak-fg); }
.ap-txt span{ font-size:12.5px; color:var(--ak-muted-fg); }
.ap-mision.hecha .ap-txt span{ color:var(--ak-ok); }
.ap-botones{ flex:none; display:flex; gap:6px; }
.ap-botones .ak-btn{ height:32px; padding:0 12px; font-size:12.5px !important; border-color:var(--ak-border); }
.ap-guia{ margin:0 0 14px 38px; padding:14px 16px; border-radius:14px; background:var(--ak-canvas); font-size:13px; color:var(--ak-muted-fg); animation:aparece 200ms ease-out; }
.ap-guia p{ color:var(--ak-fg); }
.ap-guia small{ display:block; margin:12px 0 6px; font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--ak-muted-fg); }
.ap-guia ol{ margin:0; padding-left:18px; display:grid; gap:4px; }
.ap-resumen{ font-size:13.5px; color:var(--ak-fg); font-weight:600; }
.ap-gente{ background:var(--ak-card); border:1px solid var(--ak-border); border-radius:20px; padding:4px 18px; }
.ap-persona{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--ak-border); }
.ap-persona:last-child{ border-bottom:0; }
.ap-persona b{ display:block; font-size:14px; color:var(--ak-fg); }
.ap-persona span{ font-size:12.5px; color:var(--ak-muted-fg); }
.ap-barra{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ak-muted-fg); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-barra i{ flex:1; height:6px; border-radius:999px; background:var(--ak-muted); overflow:hidden; }
.ap-barra i::before{ content:""; display:block; height:100%; width:var(--p); background:var(--ak-ok); border-radius:999px; transition:width 600ms; }
@media (max-width:600px){
  .ap-lienzo{ padding:16px 14px 20px; gap:14px; }
  .ap-cabeza{ flex-direction:column; gap:10px; } .ap-cabeza h3{ font-size:30px; }
  .ap-ruta{ padding:14px 12px 4px; }
  .ap-fila{ flex-wrap:wrap; }
  .ap-botones{ width:100%; padding-left:38px; } .ap-botones .ak-btn{ flex:1; justify-content:center; }
  .ap-guia{ margin-left:0; }
  .ap-persona{ grid-template-columns:minmax(0,1fr); gap:8px; }
}
/* Carrusel de features de los productos */
.fx{ margin-top:56px; }
.fx-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.fx-cab h3{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.03em; color:var(--titulo); }
.fx-ctrl{ display:flex; align-items:center; gap:8px; }
.fx-filtro{ display:inline-flex; padding:4px; border-radius:999px; background:var(--pista); }
.fx-filtro button{ height:34px; padding:0 14px; border:0; border-radius:999px; background:none; font:600 13.5px/1 var(--sans); color:var(--muted-fg); cursor:pointer; }
.fx-filtro button[aria-pressed="true"]{ background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgb(0 0 0 / .12); }
.fx-flecha{ width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--fg); display:grid; place-items:center; cursor:pointer; transition:opacity 150ms, transform 150ms; }
.fx-flecha:hover{ transform:translateY(-1px); }
.fx-flecha:disabled{ opacity:.35; cursor:default; transform:none; }
.fx-flecha svg{ width:18px; height:18px; }
.fx-pista{ margin-top:22px; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding-bottom:6px; }
.fx-pista::-webkit-scrollbar{ display:none; }
.fx-slide{ flex:0 0 min(400px, 84vw); scroll-snap-align:start; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:var(--card); border:1px solid var(--border); }
.fx-slide[hidden]{ display:none; }
.fx-mock{ position:relative; height:250px; overflow:hidden; padding:16px; font-size:12px; line-height:1.35; }
.fx-txt{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; }
.fx-prod{ font-size:12px; font-weight:700; letter-spacing:.02em; }
.fx-slide.fx-ak .fx-prod{ color:var(--aleksa); } .fx-slide.fx-tc .fx-prod{ color:var(--tc-ambar); font-family:"Nunito", var(--sans); font-weight:800; }
.fx-txt h3{ margin:0; font-family:var(--display); font-weight:600; font-size:20px; line-height:1.2; letter-spacing:-.02em; color:var(--fg); text-wrap:balance; }
.fx-txt p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--muted-fg); }
.fx-pie{ margin-top:14px; font-size:13px; color:var(--muted-fg); }

/* tabcode: base */
.fx-tcpapel{ background:var(--tc-crema); color:var(--tc-fg); font-family:"Nunito", var(--sans); }
/* Cocina */
.fx-kds{ background:#101113; color:#f3f1ec; font-family:"Nunito", var(--sans); display:flex; flex-direction:column; gap:10px; }
.kds-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kds-top b{ font-size:13px; font-weight:800; }
.kds-tabs{ display:flex; gap:4px; } .kds-tabs i{ font-style:normal; font-size:10.5px; font-weight:700; padding:4px 8px; border-radius:8px; background:#1a1c1f; color:#a7a39a; }
.kds-tabs i.on{ background:#f3f1ec; color:#101113; }
.kds-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; flex:1; min-height:0; }
.kds-card{ background:#202327; border:1px solid #33373d; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.kds-cab{ display:flex; align-items:center; gap:4px; padding:7px 8px; background:#1f3a2a; }
.kds-card.aten .kds-cab{ background:#4a3710; } .kds-card.tarde .kds-cab{ background:#b8281c; }
.kds-cab b{ font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kds-cab em{ font-style:normal; font-size:7.5px; font-weight:800; padding:1px 4px; border-radius:4px; background:#4c8dff; color:#fff; }
.kds-t{ margin-left:auto; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.kds-it{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; padding:6px 8px; border-bottom:1px dashed #33373d; font-size:11.5px; font-weight:700; }
.kds-it span{ color:#f0b43c; font-weight:800; }
.kds-it small{ width:100%; padding-left:14px; color:#a7a39a; font-weight:600; font-size:10px; }
.kds-lista{ margin:auto 6px 6px; height:30px; border-radius:8px; background:#3fb56b; color:#06210f; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:12px; }
.kds-lista kbd{ font:800 9px/1 "Nunito", sans-serif; padding:2px 4px; border-radius:4px; background:rgb(0 0 0 / .18); }
/* Dividir */
.fx-split{ display:flex; flex-direction:column; gap:10px; }
.sp-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sp-cab b{ font-size:15px; font-weight:800; }
.sp-seg{ display:flex; padding:3px; border-radius:10px; border:1.5px solid #2d1f14; } .sp-seg i{ font-style:normal; font-size:10.5px; font-weight:700; padding:4px 7px; border-radius:7px; color:#5a4a38; }
.sp-seg i.on{ background:#1a130b; color:#faf6ec; }
.sp-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; flex:1; }
.sp-col{ background:#fffcf5; border:1.5px solid #2d1f14; border-radius:12px; padding:9px; display:flex; flex-direction:column; gap:3px; }
.sp-col.sin{ border-style:dashed; border-color:#d7ccb9; background:transparent; }
.sp-col b{ font-size:12px; font-weight:800; } .sp-col > span{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.sp-col small{ margin-top:auto; color:#2e6b2e; font-weight:700; font-size:11px; }
.sp-col p{ margin:0; display:flex; gap:6px; font-size:11.5px; font-weight:600; padding-top:5px; border-top:1px solid #d7ccb9; }
.sp-col p i{ font-style:normal; font-weight:800; }
.sp-pie{ font-size:10.5px; color:#5a4a38; }
/* Bre-B */
.fx-breb{ display:flex; align-items:center; gap:16px; }
.bb-qr{ flex:none; width:150px; height:150px; padding:10px; background:#fff; border-radius:12px; border:1.5px solid #2d1f14; }
.bb-qr svg{ width:100%; height:100%; display:block; }
.bb-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bb-txt small{ font-size:11px; font-weight:700; color:#5a4a38; }
.bb-txt > b{ font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.bb-txt p{ margin:0; font-size:11.5px; color:#5a4a38; } .bb-txt strong{ color:#1a130b; }
.bb-chips{ display:flex; gap:4px; margin-top:6px; } .bb-chips i{ font-style:normal; font-size:10.5px; font-weight:700; padding:4px 8px; border-radius:999px; border:1.5px solid #d7ccb9; color:#5a4a38; }
.bb-chips i.on{ background:#1a130b; border-color:#1a130b; color:#faf6ec; }
/* Caja */
.fx-caja{ display:flex; flex-direction:column; gap:6px; }
.cj-ceja{ font-size:10px; font-weight:800; letter-spacing:.12em; color:#5a4a38; }
.cj-tit{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.cj-caja{ margin-top:4px; padding:12px 14px; border:2px solid #1a130b; border-radius:12px; background:#fffcf5; display:flex; flex-direction:column; gap:3px; }
.cj-caja small{ font-size:11px; font-weight:700; color:#5a4a38; }
.cj-caja b{ font-size:30px; font-weight:800; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cj-caja span{ font-size:11px; color:#5a4a38; } .cj-caja em{ font-style:normal; font-size:11px; font-weight:700; color:#8a5a00; }
.cj-falta{ margin-top:auto; padding:8px 10px; border-radius:10px; background:#f7ebcb; color:#8a5a00; font-size:11.5px; font-weight:700; }
@media (max-width:600px){ .fx-ctrl .fx-flecha{ display:none; } .fx-slide{ flex-basis:86vw; } .fx-mock{ width:400px; zoom:.84; } }
@media (max-width:380px){ .fx-mock{ zoom:.78; } }
/* Aleksa: base */
.fx-akbase{ background:#F5F5F5; color:#171717; font-family:var(--sans); }
.fx-akbase b{ font-family:var(--display); font-weight:500; }
/* QR */
.fx-qr{ display:flex; gap:12px; align-items:flex-start; background:linear-gradient(135deg,#EEF3FE,#F5F5F5); }
.qr-dlg{ flex:none; width:150px; background:#fff; border:1px solid #E5E5E5; border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:7px; box-shadow:0 10px 30px -18px rgb(32 89 197 / .5); }
.qr-dlg > b{ font-size:12.5px; }
.qr-caja{ position:relative; align-self:center; width:104px; height:104px; padding:5px; border:1px solid #E5E5E5; border-radius:8px; overflow:hidden; }
.qr-svg, .qr-svg svg{ display:block; width:100%; height:100%; }
.qr-scan{ position:absolute; left:0; right:0; top:0; height:2px; background:#2059C5; box-shadow:0 0 12px 2px rgb(32 89 197 / .55); animation:qrscan 2.6s ease-in-out infinite; }
@keyframes qrscan{ 0%,100%{ top:4%; } 50%{ top:94%; } }
.qr-btn{ display:flex; align-items:center; justify-content:center; height:26px; border:1px solid #858585; border-radius:8px; font-size:10.5px; font-weight:500; }
.qr-btn.wa{ border-color:#1D7240; color:#1D7240; }
.qr-cel{ flex:1; min-width:0; height:250px; margin-top:4px; background:#fff; border:6px solid #171717; border-bottom:0; border-radius:22px 22px 0 0; padding:10px 10px 0; display:flex; flex-direction:column; gap:5px; animation:celsube 900ms cubic-bezier(.16,1,.3,1) both; }
@keyframes celsube{ from{ transform:translateY(40px); opacity:0; } }
.cel-cab{ display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:center; font-family:var(--display); font-size:11px; font-weight:500; }
.cel-cab small{ grid-column:2; font-family:var(--sans); font-size:9px; color:#616161; }
.cel-escudo{ grid-row:span 2; width:20px; height:22px; border-radius:4px 4px 10px 10px; background:#7A1F3D; }
.cel-paso{ display:flex; gap:4px; margin-top:4px; } .cel-paso i{ flex:1; height:4px; border-radius:4px; background:#EDEDED; } .cel-paso i.on{ background:#7A1F3D; }
.cel-pt{ font-size:9px; color:#616161; }
.cel-h{ font-size:12px; margin-top:2px; } .cel-h2{ font-size:11px; margin-top:4px; }
.cel-in{ height:22px; border:1px solid #D4D4D4; border-radius:6px; padding:0 7px; display:flex; align-items:center; font-size:9.5px; color:#8A8A8A; }
.cel-gr{ display:flex; gap:5px; } .cel-gr i{ flex:1; font-style:normal; border:1px solid #D4D4D4; border-radius:7px; padding:4px 6px; font-size:11px; font-weight:600; display:flex; flex-direction:column; }
.cel-gr i small{ font-size:8.5px; font-weight:500; color:#616161; } .cel-gr i.on{ border-color:#7A1F3D; box-shadow:inset 0 0 0 1px #7A1F3D; }
/* Aprobar */
.fx-aprobar{ display:grid; place-items:center; background:linear-gradient(135deg,#F5F5F5,#EBF7EF); }
.apb{ width:min(300px,100%); background:#fff; border:1px solid #E5E5E5; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:6px; box-shadow:0 14px 34px -20px rgb(0 0 0 / .35); }
.apb-t{ font-size:15px; } .apb small{ font-size:10.5px; color:#616161; }
.apb ul{ list-style:none; margin:4px 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.apb li{ position:relative; padding-left:20px; font-size:11.5px; opacity:0; animation:apbli 6s ease infinite; }
.apb li::before{ content:""; position:absolute; left:0; top:1px; width:14px; height:14px; border-radius:50%; background:#1D7240; }
.apb li::after{ content:""; position:absolute; left:5px; top:3.5px; width:3px; height:6px; border-right:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(45deg); }
.apb li:nth-child(2){ animation-delay:.35s; } .apb li:nth-child(3){ animation-delay:.7s; } .apb li:nth-child(4){ animation-delay:1.05s; }
@keyframes apbli{ 0%,4%{ opacity:0; transform:translateX(-6px); } 10%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.apb-btn{ margin-top:4px; height:32px; border-radius:10px; background:#2059C5; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
/* Notas */
.fx-notas{ display:flex; flex-direction:column; gap:8px; }
.nt-tabla{ background:#fff; border:1px solid #E5E5E5; border-radius:12px; overflow:hidden; }
.nt-f{ display:grid; grid-template-columns:1.3fr 1fr .9fr; align-items:center; gap:6px; padding:5px 10px; border-top:1px solid #EDEDED; font-size:11.5px; }
.nt-enc{ border-top:0; background:#FAFAFA; font-size:9.5px; font-weight:600; color:#616161; padding:6px 10px; }
.nt-n{ justify-self:start; width:40px; height:22px; border:1px solid #D4D4D4; border-radius:6px; display:grid; place-items:center; font-variant-numeric:tabular-nums; font-weight:600; }
.nt-f i{ font-style:normal; font-size:10px; font-weight:600; padding:2px 7px; border-radius:999px; }
.nt-f .sup{ background:#EBF7EF; color:#1D7240; } .nt-f .alt{ background:#EBF1FC; color:#2059C5; } .nt-f .bas{ background:#FDF4E1; color:#94620C; } .nt-f .baj{ background:#FDECEC; color:#C42121; }
.nt-toast{ align-self:center; max-width:94%; background:#171717; color:#fff; border-radius:10px; padding:8px 12px; font-size:10.5px; display:flex; flex-direction:column; gap:1px; animation:nttoast 5s ease infinite; }
.nt-toast b{ font-family:var(--sans); font-weight:700; font-size:11.5px; }
@keyframes nttoast{ 0%,20%{ opacity:0; transform:translateY(8px); } 28%,90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
/* Boletines */
.fx-bol{ display:flex; flex-direction:column; gap:7px; }
.bol-t{ font-size:20px; font-weight:300 !important; letter-spacing:-.02em; }
.bol-ok{ background:#EBF7EF; border:1px solid #C7E7D2; color:#1D7240; border-radius:10px; padding:8px 10px; font-size:11px; font-weight:500; }
.bol-f{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #E5E5E5; border-radius:10px; padding:6px 10px; font-size:11.5px; }
.bol-f code{ font:10px ui-monospace, monospace; color:#616161; } .bol-f i{ margin-left:auto; font-style:normal; font-size:10.5px; font-weight:600; color:#2059C5; }
/* Circulares */
.fx-circ{ display:flex; flex-direction:column; gap:6px; }
.ci-t{ font-size:16px; } .fx-circ > small{ font-size:10.5px; color:#616161; margin-top:-4px; }
.ci-barra{ height:8px; border-radius:99px; background:#EDEDED; overflow:hidden; } .ci-barra i{ display:block; height:100%; width:72%; background:#2059C5; border-radius:99px; animation:cibarra 1.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes cibarra{ from{ width:0; } }
.ci-fila{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; font-weight:600; }
.ci-btn{ height:26px; padding:0 9px; border-radius:8px; border:1px solid #858585; background:#fff; display:inline-flex; align-items:center; font-size:10.5px; font-weight:500; white-space:nowrap; }
.ci-h{ font-size:12px; margin-top:4px; }
.ci-p{ display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #E5E5E5; border-radius:10px; padding:7px 10px; font-size:11px; }
.ci-p i{ font-style:normal; font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:99px; background:#FDF4E1; color:#94620C; }
/* Familia */
.fx-fam{ display:flex; gap:10px; align-items:flex-start; background:linear-gradient(135deg,#F5F5F5,#EEF3FE); }
.fam-cel{ flex:1.15; min-width:0; height:250px; background:#fff; border:6px solid #171717; border-bottom:0; border-radius:22px 22px 0 0; padding:12px 10px 0; display:flex; flex-direction:column; gap:5px; }
.fam-h{ font-size:15px; } .fam-cel > small{ font-size:9.5px; color:#616161; margin-top:-3px; }
.fam-hijo{ display:flex; align-items:center; gap:7px; margin-top:4px; } .fam-hijo b{ display:block; font-size:12.5px; } .fam-hijo small{ font-size:9.5px; color:#616161; }
.fam-av{ width:26px; height:26px; border-radius:50%; background:#F6E7D6; color:#9A5A12; display:grid; place-items:center; font-weight:700; font-size:12px; }
.fam-sem{ margin:0; font-size:9.5px; color:#424242; }
.fam-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:5px; } .fam-tiles i{ font-style:normal; position:relative; border:1px solid #E5E5E5; border-radius:8px; padding:8px 7px; font-size:10px; font-weight:600; }
.fam-tiles em{ position:absolute; top:5px; right:6px; font-style:normal; min-width:15px; height:15px; border-radius:99px; background:#2059C5; color:#fff; font-size:9px; display:grid; place-items:center; }
.fam-inst{ flex:1; min-width:0; margin-top:24px; background:#F0F5FE; border:1px solid #BFD1F5; border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:5px; }
.fam-inst b{ font-size:11.5px; } .fam-inst small{ font-size:9.5px; color:#616161; }
.fam-inst span{ margin-top:2px; height:26px; border-radius:8px; background:#2059C5; color:#fff; font-size:9.5px; font-weight:600; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 6px; }