/* Sistema "Expediente" de Aleksa. SingularityCode usa la tinta; el color de
   cada producto vive solo dentro de su propia ventana. */
:root{
  --canvas:#F5F5F5; --card:#FFFFFF; --fg:#171717; --muted-fg:#616161;
  --border:#E6E6E6; --input:#858585; --muted:#EDEDED;
  --tinta:#10234C; --tinta-fg:#FAFAFA; --tinta-muted:#A9B6D1; --tinta-accent:#1B3165; --tinta-border:#2A3F6E;
  --accion:#10234C; --accion-fg:#FAFAFA; --accion-hover:#1B3165;
  --aleksa:#205AC5; --aleksa-fg:#FFFFFF;
  --r-sm:8px; --r-md:12px; --r-lg:20px;
  --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:#0A0A0A; --card:#1A1A1A; --fg:#F2F2F2; --muted-fg:#9E9E9E;
    --border:#303030; --input:#6B6B6B; --muted:#262626;
    --tinta:#112040; --tinta-fg:#F5F5F5; --tinta-muted:#A3AFC7; --tinta-accent:#1A2D57; --tinta-border:#27396A;
    --accion:#E6EAF3; --accion-fg:#10234C; --accion-hover:#FFFFFF;
    --aleksa:#4B82E7; --aleksa-fg:#0F1B33;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0A0A0A; --card:#1A1A1A; --fg:#F2F2F2; --muted-fg:#9E9E9E;
  --border:#303030; --input:#6B6B6B; --muted:#262626;
  --tinta:#112040; --tinta-fg:#F5F5F5; --tinta-muted:#A3AFC7; --tinta-accent:#1A2D57; --tinta-border:#27396A;
  --accion:#E6EAF3; --accion-fg:#10234C; --accion-hover:#FFFFFF;
  --aleksa:#4B82E7; --aleksa-fg:#0F1B33;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{ margin:0; background:var(--canvas); color:var(--fg); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accion); outline-offset:3px; border-radius:4px; }
.ancho{ max-width:1120px; margin:0 auto; padding:0 24px; }
@media (max-width:480px){ .ancho{ padding:0 16px; } }
p{ margin:0 0 1.1em; }
.apagado{ color:var(--muted-fg); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.display-lg{ font-family:var(--display); font-weight:200; font-size:clamp(2.35rem,5.6vw,4.1rem); line-height:1.02; letter-spacing:-.037em; margin:0; text-wrap:balance; }
.display{ font-family:var(--display); font-weight:200; font-size:clamp(1.9rem,4vw,2.5rem); line-height:1.08; letter-spacing:-.03em; margin:0 0 20px; text-wrap:balance; max-width:22ch; }
.display-sm{ font-family:var(--display); font-weight:300; font-size:clamp(1.3rem,2.4vw,1.55rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 8px; text-wrap:balance; }
.bajada{ color:var(--muted-fg); max-width:56ch; margin:-6px 0 26px; font-size:17px; }

section{ padding:88px 0; }
@media (max-width:720px){ section{ padding:60px 0; } body{ font-size:16px; } }

.boton{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:var(--r-md); font:500 15px/1 var(--sans); text-decoration:none; white-space:nowrap; background:var(--accion); color:var(--accion-fg); border:1px solid transparent; transition:background 150ms; }
.boton:hover{ background:var(--accion-hover); }
.boton-contorno{ background:transparent; color:var(--fg); border-color:var(--input); }
.boton-contorno:hover{ background:var(--muted); }
.boton-sm{ height:38px; padding:0 14px; font-size:14px; }
.boton-claro{ background:var(--tinta-fg); color:var(--tinta); }
.boton-claro:hover{ background:#FFFFFF; }
.boton-contorno-claro{ color:var(--tinta-fg); border-color:var(--tinta-muted); }
.boton-contorno-claro:hover{ background:var(--tinta-accent); }
.enlace{ color:var(--accion); font-weight:500; text-underline-offset:3px; }

/* Barra sólida */
.barra{ position:sticky; top:0; z-index:20; background:var(--canvas); border-bottom:1px solid var(--border); }
.barra-fila{ display:flex; align-items:center; gap:22px; height:64px; }
.marca{ font-family:var(--display); font-weight:500; font-size:19px; letter-spacing:-.015em; text-decoration:none; color:var(--fg); }
.barra nav{ margin-left:auto; display:flex; align-items:center; gap:22px; font-size:14.5px; }
.barra nav a.ancla{ color:var(--muted-fg); text-decoration:none; }
.barra nav a.ancla:hover{ color:var(--fg); }
@media (max-width:760px){ .barra nav a.ancla{ display:none; } }

/* Portada: qué somos y, enseguida, el índice de productos */
.portada{ padding:88px 0 72px; }
.portada .display-lg{ max-width:15ch; }
.portada-sub{ font-size:clamp(1.05rem,1.8vw,1.2rem); color:var(--muted-fg); margin:20px 0 0; max-width:52ch; }
.portada .acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.indice{ list-style:none; margin:48px 0 0; padding:0; border-top:1px solid var(--fg); }
.indice a{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) auto; gap:8px 32px; align-items:baseline; padding:22px 4px; border-bottom:1px solid var(--border); text-decoration:none; transition:background 150ms; }
.indice a:hover{ background:var(--card); }
.indice-nombre{ font-family:var(--display); font-weight:300; font-size:clamp(1.6rem,3.2vw,2.2rem); letter-spacing:-.025em; line-height:1.1; }
.indice-que{ color:var(--muted-fg); }
.indice-flecha{ font-family:var(--display); font-weight:200; font-size:28px; line-height:1; color:var(--muted-fg); transition:transform 150ms, color 150ms; }
.indice a:hover .indice-flecha{ transform:translateY(3px); color:var(--fg); }
@media (max-width:720px){
  .portada{ padding:60px 0 48px; }
  .indice a{ grid-template-columns:minmax(0,1fr) auto; }
  .indice-que{ grid-column:1; grid-row:2; font-size:15.5px; }
  .indice-flecha{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}

/* Producto */
.producto{ border-top:1px solid var(--border); }
.producto-cab{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 56px; align-items:start; margin-bottom:32px; }
.producto-cab .display{ margin:0 0 10px; }
.producto-para{ font-size:15px; color:var(--muted-fg); margin:0; }
.producto-cab ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.producto-cab li{ padding:11px 0; border-bottom:1px solid var(--border); }
.producto-pie{ margin-top:14px; font-size:14px; color:var(--muted-fg); display:flex; justify-content:space-between; align-items:center; gap:12px 20px; flex-wrap:wrap; }
.producto-acciones{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
@media (max-width:860px){ .producto-cab{ grid-template-columns:minmax(0,1fr); } }

/* Ventana de Aleksa que se puede tocar (solo CSS) */
.ventana{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card); overflow:hidden; display:grid; grid-template-columns:190px minmax(0,1fr); }
.rail{ background:color-mix(in srgb, var(--canvas) 60%, var(--card)); border-right:1px solid var(--border); padding:16px 12px; display:flex; flex-direction:column; gap:3px; }
.rail-marca{ display:flex; align-items:center; gap:9px; padding:4px 8px 16px; font-family:var(--display); font-weight:500; font-size:15px; }
.tile{ width:26px; height:26px; border-radius:var(--r-md); background:var(--aleksa); display:flex; align-items:center; justify-content:center; flex:none; }
.tile svg{ width:15px; height:15px; color:var(--aleksa-fg); }
.rail-item{ padding:7px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--muted-fg); white-space:nowrap; }
.demo .rail label.rail-item{ cursor:pointer; }
#v1:checked ~ .ventana .rail label[for=v1], #v2:checked ~ .ventana .rail label[for=v2], #v3:checked ~ .ventana .rail label[for=v3]{ background:var(--aleksa); color:var(--aleksa-fg); font-weight:500; }
#v1:focus-visible ~ .ventana .rail label[for=v1], #v2:focus-visible ~ .ventana .rail label[for=v2], #v3:focus-visible ~ .ventana .rail label[for=v3]{ outline:2px solid var(--aleksa); outline-offset:2px; }
.vista{ display:none; }
#v1:checked ~ .ventana #vista1, #v2:checked ~ .ventana #vista2, #v3:checked ~ .ventana #vista3{ display:block; }
.ventana-cab{ height:50px; display:flex; align-items:center; padding:0 18px; border-bottom:1px solid var(--border); font-size:12.5px; color:var(--muted-fg); }
.banda{ margin:18px; padding:24px 26px; background:var(--tinta); color:var(--tinta-fg); border-radius:var(--r-lg); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:24px; }
.rotulo-app{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-muted); }
.periodo{ font-family:var(--display); font-weight:200; font-size:38px; letter-spacing:-.035em; line-height:1.02; margin-top:6px; }
.riel{ height:4px; border-radius:999px; background:color-mix(in srgb, var(--tinta-fg) 20%, transparent); margin-top:18px; overflow:hidden; }
.riel i{ display:block; height:100%; width:60%; background:var(--tinta-fg); border-radius:999px; }
.kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.kpi{ padding:2px 14px; border-left:1px solid color-mix(in srgb, var(--tinta-fg) 15%, transparent); }
.kpi:first-child{ border-left:0; }
.kpi-cifra{ font-family:var(--display); font-weight:300; font-size:32px; letter-spacing:-.03em; line-height:1.05; margin-top:8px; font-variant-numeric:tabular-nums; }
.kpi-pie{ font-size:12px; color:var(--tinta-muted); margin-top:4px; }
.tabs-movil{ display:none; }
.tabla-app{ margin:18px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; font-size:13.5px; }
.tabla-app .fila{ display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); align-items:center; }
.tabla-app .fila:last-child{ border-bottom:0; }
.tabla-app .cab{ background:var(--muted); color:var(--muted-fg); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.estado{ justify-self:start; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:500; }
.e-rev{ background:#FBF0DC; color:#92610C; } .e-ok{ background:#E3F2E8; color:#1D723C; } .e-rad{ background:#E4ECFA; color:#205AC5; } .e-ret{ background:var(--muted); color:var(--muted-fg); }
.tabla-nota{ margin:0 18px 18px; font-size:14px; color:var(--muted-fg); }
@media (max-width:860px){
  .ventana{ grid-template-columns:minmax(0,1fr); }
  .rail, .ventana-cab{ display:none; }
  .banda{ grid-template-columns:minmax(0,1fr); margin:14px; padding:20px; }
  .kpi{ padding:2px 10px; }
  .kpi .rotulo-app{ min-height:2.4em; }
  .kpi-cifra{ font-size:26px; }
  .tabs-movil{ display:flex; gap:8px; padding:14px 14px 0; }
  .tabs-movil label{ cursor:pointer; padding:7px 14px; border-radius:999px; border:1px solid var(--border); font-size:14px; }
  #v1:checked ~ .ventana .tabs-movil label[for=v1], #v2:checked ~ .ventana .tabs-movil label[for=v2], #v3:checked ~ .ventana .tabs-movil label[for=v3]{ background:var(--aleksa); color:var(--aleksa-fg); border-color:var(--aleksa); }
  .tabla-app .fila{ grid-template-columns:1fr 1fr; } .tabla-app .fila span:nth-child(2){ display:none; }
}

/* Asistente de Aleksa (solo CSS) */
.asistente{ margin:18px; }
.preguntas{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.preguntas label{ cursor:pointer; padding:7px 13px; border:1px solid var(--border); border-radius:999px; font-size:13px; line-height:1.35; transition:background 150ms; }
.preguntas label:hover{ background:var(--muted); }
#q1:checked ~ .preguntas label[for=q1], #q2:checked ~ .preguntas label[for=q2], #q3:checked ~ .preguntas label[for=q3]{ background:var(--aleksa); color:var(--aleksa-fg); border-color:var(--aleksa); }
#q1:focus-visible ~ .preguntas label[for=q1], #q2:focus-visible ~ .preguntas label[for=q2], #q3:focus-visible ~ .preguntas label[for=q3]{ outline:2px solid var(--aleksa); outline-offset:2px; }
.respuesta{ display:none; padding:18px 20px; border:1px solid var(--border); border-radius:var(--r-md); background:color-mix(in srgb, var(--canvas) 50%, var(--card)); font-size:14.5px; }
#q1:checked ~ #r1, #q2:checked ~ #r2, #q3:checked ~ #r3{ display:block; animation:aparece 260ms ease-out; }
@keyframes aparece{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.respuesta p{ margin:0 0 6px; }
.respuesta-cifra{ font-family:var(--display); font-weight:300; font-size:30px; letter-spacing:-.03em; line-height:1.1; }
.respuesta-cifra span{ font-family:var(--sans); font-size:13px; letter-spacing:0; color:var(--muted-fg); margin-left:6px; }
.fuente{ margin-top:10px !important; font-size:12.5px; color:var(--aleksa); }

/* Lo que puedes comprobar */
.pruebas{ padding-top:24px; }
.lista-pruebas{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); max-width:920px; }
.lista-pruebas li{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:6px 32px; padding:20px 0; border-bottom:1px solid var(--border); align-items:baseline; }
.lista-pruebas b{ font-family:var(--display); font-weight:300; font-size:clamp(1.15rem,2vw,1.35rem); letter-spacing:-.015em; line-height:1.25; }
.lista-pruebas span{ color:var(--muted-fg); }
@media (max-width:720px){ .lista-pruebas li{ grid-template-columns:minmax(0,1fr); } }

/* Qué significa que lo operemos: el recorrido de un mensaje */
.opera{ background:var(--card); }
.recorrido{ list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.recorrido li{ position:relative; padding:0 28px 0 0; }
.recorrido li + li{ padding-left:28px; }
.recorrido .quien{ display:block; font-size:13px; color:var(--muted-fg); margin-bottom:10px; }
.recorrido h3{ margin-bottom:10px; }
.recorrido p{ margin:0; color:var(--muted-fg); font-size:16px; max-width:34ch; }
.hilo{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.hilo b{ width:36px; height:36px; border-radius:999px; border:1px solid var(--fg); display:flex; align-items:center; justify-content:center; font:300 17px/1 var(--display); flex:none; }
.hilo i{ flex:1; height:1px; margin-right:-28px; background:repeating-linear-gradient(90deg, var(--input) 0 6px, transparent 6px 11px); }
.recorrido li:last-child .hilo i{ display:none; }
.recorrido li:last-child .hilo b{ background:var(--tinta); border-color:var(--tinta); color:var(--tinta-fg); }
@media (max-width:820px){
  .recorrido{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .recorrido li, .recorrido li + li{ padding:0 0 0 54px; }
  .hilo{ position:absolute; left:0; top:0; bottom:-28px; flex-direction:column; margin:0; }
  .hilo i{ width:1px; height:auto; margin:0; background:repeating-linear-gradient(180deg, var(--input) 0 6px, transparent 6px 11px); }
}
.sigue{ margin:44px 0 0; padding-top:22px; border-top:1px solid var(--border); max-width:62ch; }

/* La casa */
.tinta{ background:var(--tinta); color:var(--tinta-fg); }
.tinta .apagado{ color:var(--tinta-muted); }
.cita{ font-family:var(--display); font-weight:200; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.15; letter-spacing:-.025em; max-width:26ch; margin:0 0 18px; text-wrap:balance; }

/* Preguntas */
.faq{ margin:20px 0 0; max-width:760px; border-top:1px solid var(--border); }
.faq div{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:20px; padding:16px 0; border-bottom:1px solid var(--border); }
.faq dt{ font-weight:600; } .faq dd{ margin:0; color:var(--muted-fg); }
@media (max-width:620px){ .faq div{ grid-template-columns:minmax(0,1fr); gap:4px; } }

/* Cierre */
.final .acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.final .bajada{ color:var(--tinta-muted); margin:0; }
.micro{ margin-top:14px; font-size:14.5px; }
.micro a{ color:var(--tinta-fg); }

.pie{ border-top:1px solid var(--border); padding:32px 0; font-size:14px; color:var(--muted-fg); }
.pie-fila{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; }
.pie a{ color:var(--muted-fg); text-underline-offset:3px; }
.pie-enlaces{ display:flex; gap:20px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* ---------- 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{ position:relative; isolation:isolate; overflow:hidden; }
.aurora::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; } }

/* ---------- v15: portada centrada y a pantalla completa ---------- */
.portada.aurora{ min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:center; padding:72px 0 120px; text-align:center; position:relative; }
.aurora::before{ display:none; }
.portada-centro{ width:100%; }
.titular{ font-size:clamp(2.9rem,7.4vw,5.6rem); line-height:.98; letter-spacing:-.045em; max-width:14ch; margin:0 auto; }
.pal{ display:inline-block; animation:sube 900ms cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 90ms + 120ms); }
@keyframes sube{ from{ opacity:0; transform:translateY(.35em); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
.portada .portada-sub{ margin:24px auto 0; max-width:46ch; font-size:clamp(1.1rem,1.9vw,1.3rem); animation:aparece 700ms ease-out 700ms both; }
.portada .agente{ margin:44px auto 0; max-width:760px; text-align:left; position:relative; animation:aparece 800ms ease-out 900ms both; }
.portada .caja{ height:72px; padding-left:24px; }
.portada .caja input{ font-size:19px; }
.portada .enviar{ width:52px; height:52px; }
/* El halo vive detrás de la caja: el espectáculo es el agente, no la página */
.portada .caja::after{ content:""; position:absolute; inset:-26px -40px; z-index:-1; border-radius:999px; background:conic-gradient(from var(--ang), var(--g1), var(--g3), var(--g4), var(--g2), var(--g1)); filter:blur(38px); opacity:.2; animation:gira 7s linear infinite; transition:opacity 300ms; pointer-events:none; }
.portada .caja:focus-within::after{ opacity:.32; }
.portada .agente-pie{ flex-direction:column; justify-content:center; margin-top:18px; }
.portada .sugeridas{ justify-content:center; }
.portada .cupo{ text-align:center; }
.portada .hilo-qa, .portada .registro, .portada .enviado{ text-align:left; }

/* Fondo: tres luces que se mueven muy despacio */
.aurora-fondo{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.aurora-fondo i{ position:absolute; width:46vmax; height:46vmax; border-radius:50%; filter:blur(70px); opacity:.35; mix-blend-mode:multiply; }
.aurora-fondo i:nth-child(1){ left:8%; top:18%; background:radial-gradient(circle, color-mix(in srgb, var(--g2) 55%, transparent), transparent 65%); animation:deriva1 22s ease-in-out infinite alternate; }
.aurora-fondo i:nth-child(2){ right:4%; top:6%; background:radial-gradient(circle, color-mix(in srgb, var(--g4) 45%, transparent), transparent 65%); animation:deriva2 26s ease-in-out infinite alternate; }
.aurora-fondo i:nth-child(3){ left:30%; bottom:-22%; background:radial-gradient(circle, color-mix(in srgb, var(--g3) 45%, transparent), transparent 65%); animation:deriva3 30s ease-in-out infinite alternate; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .aurora-fondo i{ mix-blend-mode:screen; opacity:.22; } }
:root[data-theme="dark"] .aurora-fondo i{ mix-blend-mode:screen; opacity:.22; }
@keyframes deriva1{ to{ transform:translate(12vw,8vh) scale(1.15); } }
@keyframes deriva2{ to{ transform:translate(-14vw,12vh) scale(.9); } }
@keyframes deriva3{ to{ transform:translate(10vw,-10vh) scale(1.1); } }
.portada.aurora::after{ content:""; position:absolute; inset:auto 0 0 0; height:140px; background:linear-gradient(transparent, var(--canvas)); z-index:-1; pointer-events:none; }

.bajar{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); font-size:14px; color:var(--muted-fg); text-decoration:none; display:flex; gap:8px; align-items:center; animation:aparece 700ms ease-out 1500ms both; }
.bajar span{ display:inline-block; animation:flota 2.4s ease-in-out infinite; }
.bajar:hover{ color:var(--fg); }
@keyframes flota{ 50%{ transform:translateY(4px); } }

.productos-lista{ padding-top:40px; }
.productos-lista .indice{ margin-top:8px; }

@media (max-width:600px){
  .portada.aurora{ padding:48px 0 96px; min-height:calc(100svh - 64px); }
  .portada .caja{ height:62px; padding-left:18px; } .portada .caja input{ font-size:16.5px; }
  .portada .enviar{ width:46px; height:46px; }
  .portada .caja::after{ inset:-18px -12px; }
}
@media (prefers-reduced-motion: reduce){ .pal, .portada .portada-sub, .portada .agente, .bajar{ animation:none !important; opacity:1; } .aurora-fondo i{ animation:none !important; } }

/* ---------- 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; } }

/* ---------- v19: retrato de Enrique en el cierre ---------- */
.cierre-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:40px 64px; align-items:center; }
.cierre-foto{ margin:0; justify-self:end; width:100%; max-width:320px; }
.cierre-foto img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-lg);
  box-shadow:0 0 0 1px var(--tinta-border), 0 30px 60px -30px rgb(0 0 0 / .6), 0 0 80px -20px color-mix(in srgb, var(--g2) 45%, transparent); }
.cierre-foto figcaption{ margin-top:12px; font-size:13.5px; color:var(--tinta-muted); }
.cierre-foto figcaption b{ color:var(--tinta-fg); font-weight:600; }
@media (max-width:760px){ .cierre-grid{ grid-template-columns:minmax(0,1fr); } .cierre-foto{ justify-self:start; max-width:220px; order:-1; } }

/* ---------- v20: pie de página ---------- */
.pie-v20{ padding:56px 0 28px; border-top:1px solid var(--border); background:var(--canvas); color:var(--fg); font-size:14.5px; }
.pie-arriba{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:28px 48px; padding-bottom:40px; border-bottom:1px solid var(--border); }
.pie-marca .marca{ font-size:22px; }
.pie-marca p{ margin:6px 0 0; color:var(--muted-fg); }
.pie-pregunta{ flex:0 1 420px; min-width:260px; }
.pie-pregunta label{ display:block; margin:0 0 8px 4px; font-size:13.5px; color:var(--muted-fg); }
.pie-caja{ display:flex; align-items:center; gap:10px; height:52px; padding:0 6px 0 16px; border-radius:999px; border:1.5px 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 9s linear infinite; }
.pie-caja .orbe{ width:14px; height:14px; }
.pie-caja input{ flex:1; min-width:0; height:100%; border:0; background:transparent; font:inherit; font-size:15.5px; color:var(--fg); outline:none; }
.pie-caja .enviar{ width:40px; height:40px; }
.pie-caja .enviar svg{ width:17px; height:17px; }
.pie-columnas{ display:grid; grid-template-columns:repeat(3, minmax(0,180px)); gap:24px 48px; padding:32px 0; }
.pie-columnas div{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.pie-titulo{ margin:0 0 4px; font-size:12.5px; color:var(--muted-fg); }
.pie-columnas a{ color:var(--fg); text-decoration:none; }
.pie-columnas a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pie-v20 .hueco{ font-size:12px; }
.pie-abajo{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 32px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; color:var(--muted-fg); }
.pie-abajo span:last-child{ max-width:52ch; }
@media (max-width:640px){ .pie-columnas{ grid-template-columns:1fr 1fr; } .pie-pregunta{ flex-basis:100%; } }

/* ---------- v21: tabcode, con su propio sistema ("Barra Cálida", colores aproximados hasta tener los tokens del repo) ---------- */
.tc{ --tc-crema:#FBF6EC; --tc-papel:#FFFDF8; --tc-fg:#22190F; --tc-muted:#6E6253; --tc-borde:#22190F; --tc-linea:#E6DCCB; --tc-tinta:#1F2B45; --tc-verde:#2E7D4F; --tc-verde-bg:#E3F1E7; --tc-ambar:#B7791F; --tc-ambar-bg:#FBEBCD; --tc-rojo:#B3261E;
  font-family:"Nunito", ui-rounded, system-ui, sans-serif; color:var(--tc-fg); background:var(--tc-crema); border:2px solid var(--tc-borde); border-radius:18px; overflow:hidden; }
.tc-barra{ display:flex; align-items:center; gap:16px; padding:10px 14px; border-bottom:2px solid var(--tc-borde); background:var(--tc-papel); flex-wrap:wrap; }
.tc-marca{ font-weight:800; font-size:18px; letter-spacing:-.01em; }
.tc-tabs{ display:flex; gap:6px; }
.tc-tabs label{ cursor:pointer; padding:7px 14px; border:2px solid var(--tc-linea); border-radius:12px; font-weight:700; font-size:14px; }
#t1:checked ~ .tc .tc-tabs label[for=t1], #t2:checked ~ .tc .tc-tabs label[for=t2], #t3:checked ~ .tc .tc-tabs label[for=t3]{ background:var(--tc-tinta); border-color:var(--tc-tinta); color:#fff; }
#t1:focus-visible ~ .tc .tc-tabs label[for=t1], #t2:focus-visible ~ .tc .tc-tabs label[for=t2], #t3:focus-visible ~ .tc .tc-tabs label[for=t3], #sin-red:focus-visible ~ .tc .tc-red{ outline:2px solid var(--tc-tinta); outline-offset:2px; }
.tc-red{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:6px 12px; border:2px solid var(--tc-linea); border-radius:999px; font-size:13px; font-weight:700; }
.tc-red i{ width:9px; height:9px; border-radius:50%; background:var(--tc-verde); }
.fuera-linea{ display:none; }
#sin-red:checked ~ .tc .en-linea{ display:none; } #sin-red:checked ~ .tc .fuera-linea{ display:inline; }
#sin-red:checked ~ .tc .tc-red{ border-color:var(--tc-ambar); background:var(--tc-ambar-bg); }
#sin-red:checked ~ .tc .tc-red i{ background:var(--tc-ambar); }

.tc-vista{ display:none; padding:16px; }
#t1:checked ~ .tc #tv1, #t2:checked ~ .tc #tv2, #t3:checked ~ .tc #tv3{ display:block; }
.tc-cab{ display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 12px; }
.tc-cab b{ font-weight:800; font-size:18px; } .tc-cab span{ font-size:13px; color:var(--tc-muted); font-weight:600; }
.tc-nota{ margin:12px 2px 0; font-size:13.5px; color:var(--tc-muted); }

.mesas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mesa{ border:2px solid var(--tc-borde); border-radius:14px; padding:12px; min-height:86px; display:flex; flex-direction:column; justify-content:space-between; background:var(--tc-papel); }
.mesa b{ font-size:22px; font-weight:800; line-height:1; }
.mesa span{ font-size:13px; 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-tinta); border-color:var(--tc-tinta); color:#fff; }
.mesa.cuenta{ background:var(--tc-ambar-bg); border-color:var(--tc-ambar); } .mesa.cuenta span{ color:#7A4E0E; }

.tc-oscura{ background:#15110C; color:#F6EFE3; }
.tc-oscura .tc-cab span{ color:#B9AD9B; }
.comandas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.comanda{ border:2px solid #4A4034; border-radius:14px; padding:12px; background:#221B13; }
.comanda p{ margin:0 0 4px; font-size:15px; font-weight:700; }
.comanda .c-nota{ font-size:13px; font-weight:600; color:#F2C46D; margin-top:-2px; }
.c-cab{ display:flex; justify-content:space-between; margin-bottom:8px; padding-bottom:8px; border-bottom:2px solid #4A4034; }
.c-cab b{ font-size:16px; font-weight:800; } .c-cab span{ font-size:13px; font-weight:800; }
.comanda.vieja{ border-color:#E0674F; } .comanda.vieja .c-cab span{ color:#FF8A73; }
.comanda.nueva .c-cab span{ color:#7FD39B; }

.cobro{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px; }
.cuenta{ border:2px solid var(--tc-borde); border-radius:14px; padding:12px 14px; background:var(--tc-papel); }
.cuenta p{ display:flex; justify-content:space-between; gap:12px; margin:0; padding:7px 0; border-bottom:1px solid var(--tc-linea); font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.cuenta .propina{ color:var(--tc-muted); }
.cuenta .total{ border-bottom:0; font-size:18px; font-weight:800; padding-top:10px; }
.comprobante{ border:2px dashed var(--tc-borde); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--tc-papel); }
.comp-num{ margin:0; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; }
.comp-ok{ margin:0; align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--tc-verde-bg); color:var(--tc-verde); font-weight:800; font-size:13px; }
.comp-espera{ display:none; margin:0; font-size:13.5px; font-weight:600; color:#7A4E0E; background:var(--tc-ambar-bg); border-radius:10px; padding:8px 10px; }
#sin-red:checked ~ .tc .comp-ok{ display:none; } #sin-red:checked ~ .tc .comp-espera{ display:block; }
.tc-probar{ margin-top:auto; cursor:pointer; align-self:flex-start; padding:8px 14px; border-radius:12px; background:var(--tc-tinta); color:#fff; font-weight:800; font-size:14px; border:2px solid var(--tc-tinta); }
#sin-red:checked ~ .tc .tc-probar{ background:var(--tc-verde); border-color:var(--tc-verde); }

@media (max-width:720px){
  .mesas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .comandas, .cobro{ grid-template-columns:minmax(0,1fr); }
  .tc-red{ margin-left:0; }
  .tc-barra{ gap:10px; }
}

/* Rutas en el hero: para quién es cada producto, sin tener que preguntar */
.rutas{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin-top:22px; }
.rutas a{ display:inline-flex; align-items:baseline; gap:8px; padding:10px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:color-mix(in srgb, var(--card) 80%, transparent); text-decoration:none; color:var(--fg); transition:border-color 150ms, background 150ms; }
.rutas a:hover{ border-color:var(--input); background:var(--card); }
.rutas span{ font-size:14px; color:var(--muted-fg); }
.rutas b{ font-family:var(--display); font-weight:500; font-size:17px; letter-spacing:-.01em; }
.rutas i{ font-style:normal; color:var(--muted-fg); transition:transform 150ms; }
.rutas a:hover i{ transform:translateX(3px); }
.portada.activa .rutas{ display:none; }
.sin-js{ margin:16px 4px 0; font-size:14px; color:var(--muted-fg); text-align:center; }
@media (max-width:600px){ .rutas{ flex-direction:column; align-items:stretch; } .rutas a{ justify-content:space-between; } }