/* Pensa · base única de las landings (Pensa, gastronomía, kioscos, distribuidoras y páginas legales).
   Color, letras y logo: manual de marca v1.0. Medidas: landing de Pensa Gastronomía.
   Movimiento (skills de Emil Kowalski, revisadas el 14/10/2026): salida fuerte, entradas cortas, nada desde escala 0,
   sin desenfoque en bloques, con movimiento reducido solo fundidos. */

:root {
  --blanco: #F2F1EE;
  --negro: #131112;
  --bordo: #6B1A26;
  --gris: #6B6A67;
  --linea: #CFCDC8;
  --verde: #2E6A5C;
  --papel: #FFFFFF;          /* solo dentro de figuras: burbujas, pantallas, capturas */
  --fondo: var(--blanco);
  --texto: var(--negro);
  --marca: var(--bordo);
  --sobre-marca: var(--blanco);

  --f: "Schibsted Grotesk", Arial, sans-serif;
  --f-dato: "JetBrains Mono", Consolas, monospace;

  --sale: cubic-bezier(0.23, 1, 0.32, 1);       /* entradas y respuestas */
  --mueve: cubic-bezier(0.77, 0, 0.175, 1);     /* lo que ya está en pantalla y se desplaza o se dibuja */
  --t-toque: 160ms;
  --t-cambio: 200ms;
  --t-ui: 250ms;
  --t-entra: 300ms;
  --t-dibuja: 500ms;
  --t-aparece: 600ms;
  color-scheme: light;
}
.oscuro {
  --fondo: var(--negro);
  --texto: var(--blanco);
  --marca: #D87987;
  --sobre-marca: var(--negro);
  --gris: #8E8884;
  --linea: #2F2B2C;
  --verde: #7CC1B0;
  --papel: #1E1B1C;
  background: var(--fondo);
  color: var(--texto);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.5 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--negro); color: var(--blanco); padding: 10px 16px; border-radius: 980px; text-decoration: none; font-size: 14px; }
.saltar:focus { top: 10px; }

.ancho { max-width: 1120px; margin: 0 auto; padding-inline: 22px; }
.sec { padding-block: 140px; }
.sec.pegada { padding-top: 0; }
.sec.filete { border-top: 1px solid var(--linea); }
@media (max-width: 760px) { .sec { padding-block: 96px; } }

/* ---------- letras ---------- */
.display { font-size: clamp(48px, 9vw, 76px); line-height: .95; letter-spacing: -.04em; max-width: 14em; }
.t1 { font-size: clamp(32px, 6vw, 48px); line-height: 1; letter-spacing: -.03em; max-width: 15em; }
.t2 { font-size: clamp(24px, 4vw, 32px); line-height: 1.1; letter-spacing: -.02em; }
.t3 { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.bajada { margin-top: 20px; font-size: 20px; line-height: 1.4; color: var(--gris); max-width: 34em; }
.texto { color: var(--gris); font-size: 18px; line-height: 1.45; max-width: 34em; }
.chico { font-size: 13px; line-height: 1.45; color: var(--gris); }
.etiqueta { font: 500 12px/1.2 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.dato { font: 400 15px/1.3 var(--f-dato); font-variant-numeric: tabular-nums; }
.cifra { font: 500 clamp(46px, 8vw, 80px)/1 var(--f-dato); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.cifra.media { font-size: clamp(36px, 5vw, 56px); }
.mas { color: var(--verde); }
.menos { color: var(--marca); }
.cabeza { margin-bottom: 80px; }
@media (max-width: 760px) { .cabeza { margin-bottom: 56px; } }

/* ---------- barra ---------- */
.barra { position: sticky; top: 0; z-index: 30; background: var(--fondo); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.barra.con-linea { border-bottom-color: var(--linea); }
.barra .ancho { display: flex; align-items: center; gap: 28px; height: 64px; }
.barra .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.barra .logo img { height: 30px; width: auto; }
.barra .logo span { font-size: 15px; color: var(--gris); padding-left: 12px; border-left: 1px solid var(--linea); line-height: 24px; }
@media (max-width: 420px) { .barra .logo span { display: none; } }
.barra nav { display: flex; gap: 24px; margin-left: auto; }
.barra nav a { text-decoration: none; font-size: 14px; color: var(--gris); transition: color 150ms ease; white-space: nowrap; }
.barra nav a[aria-current="page"] { color: var(--texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.barra nav .nav-sec { padding-left: 24px; border-left: 1px solid var(--linea); }
/* Entre la compu y el celular: sin el nombre del rubro al lado del logo y con menos aire, para que todo entre en una fila. */
@media (max-width: 1100px) and (min-width: 861px) { .barra .logo span { display: none; } .barra .ancho { gap: 20px; } .barra nav { gap: 18px; } .barra nav .nav-sec { padding-left: 18px; } }
@media (max-width: 960px) and (min-width: 861px) { .barra nav .nav-sec { display: none; } }
/* En el celular los rubros pasan a una segunda fila, sin menú escondido. */
@media (max-width: 860px) {
  html { scroll-padding-top: 116px; }
  .barra .ancho { flex-wrap: wrap; height: auto; padding-top: 10px; gap: 0 16px; }
  .barra .logo { min-height: 44px; }
  .barra .boton-chico { margin-left: auto; white-space: nowrap; }
  .barra nav { order: 3; width: 100%; margin-left: 0; gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .barra nav a { font-size: 13px; }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .barra nav .nav-sec { display: none; }
}

/* ---------- botones y enlaces ---------- */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px; border: 0; border-radius: 980px; background: var(--marca); color: var(--sobre-marca); font: 500 16px/1.2 var(--f); text-decoration: none; transition: transform var(--t-toque) var(--sale), opacity 150ms ease; }
.boton:active { transform: scale(.97); }
.boton-chico { padding: 6px 14px; min-height: 0; font-size: 13px; white-space: nowrap; }
.boton-chico::before { content: ""; position: absolute; inset: -8px -4px; }
.enlace { color: var(--marca); text-decoration: none; font-size: 16px; transition: opacity 150ms ease; background: none; border: 0; padding: 0; }
.enlace::after { content: " ›" / ""; }
.enlace:active { opacity: .6; }
.acciones { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.boton-borde { min-height: 44px; padding: 10px 20px; border-radius: 980px; border: 1px solid var(--linea); background: transparent; font-size: 15px; transition: transform var(--t-toque) var(--sale); }
.boton-borde:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { opacity: .88; }
  .enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
  .barra nav a:hover, .pie a:hover { color: var(--texto); }
}

/* ---------- listas, paneles y figuras ---------- */
.renglones > li { padding: 16px 0; border-top: 1px solid var(--linea); display: grid; gap: 4px; }
.renglones > li:last-child { border-bottom: 1px solid var(--linea); }
.renglones b { font-weight: 500; }
.renglones span { color: var(--gris); }
.panel { border: 1px solid var(--linea); border-radius: 28px; padding: clamp(24px, 3.4vw, 40px); }
.pie-figura { margin-top: 18px; font-size: 13px; color: var(--gris); }
.dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dos.al-reves { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dos.al-reves > :first-child { order: 2; }
.dos + .dos { margin-top: 120px; }
.dos .lado { display: grid; gap: 20px; align-content: start; }
@media (max-width: 900px) { .dos, .dos.al-reves { grid-template-columns: minmax(0, 1fr); gap: 40px; } .dos.al-reves > :first-child { order: 0; } .dos + .dos { margin-top: 96px; } }

/* Marco plano para capturas reales del sistema: borde de 1px, ruta del menú arriba, sin sombras ni botoncitos de ventana. */
.marco { border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; background: var(--papel); }
.oscuro .marco { border-color: #3A3536; background: #FFFFFF; }
.marco .tapa { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; padding: 0 14px; border-bottom: 1px solid #CFCDC8; background: #FFFFFF; font: 400 11px/1 var(--f-dato); color: #6B6A67; white-space: nowrap; overflow: hidden; }
.marco img { width: 100%; }
.desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.desliza img { min-width: 640px; }
.ver-grande { margin-top: 12px; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- celular ---------- */
.cel { width: 100%; max-width: 340px; background: var(--negro); border-radius: 44px; padding: 9px; }
.oscuro .cel { background: #3A3536; }
.cel-pantalla { height: 600px; border-radius: 36px; overflow: hidden; background: var(--blanco); color: var(--negro); display: flex; flex-direction: column; position: relative; }
.cel-captura .cel-pantalla { height: auto; aspect-ratio: 780 / 1688; background: #FFFFFF; }
.cel-captura img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cel.chico-cel { max-width: 280px; }
@media (max-width: 420px) { .cel-pantalla { height: 560px; } }

/* ---------- chat de WhatsApp ---------- */
.chat-cab { display: flex; align-items: center; gap: 10px; padding: 20px 16px 12px; background: #FFFFFF; border-bottom: 1px solid #CFCDC8; color: #131112; }
.chat-cab .ava { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #CFCDC8; display: grid; place-items: center; flex: none; font: 500 12px/1 var(--f-dato); color: #131112; background: #F2F1EE; }
.chat-cab .ava img { width: 22px; height: auto; }
.chat-cab b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.chat-cab small { display: block; font-size: 12px; color: #6B6A67; line-height: 1.3; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; }
.msgs::-webkit-scrollbar { display: none; }
.msgs > :first-child { margin-top: auto; }
.msg { max-width: 84%; padding: 8px 11px 5px; border-radius: 14px; font-size: 14px; line-height: 1.42; white-space: pre-line; overflow-wrap: anywhere; transform-origin: bottom left; flex: none; }
.msg .hora { display: block; text-align: right; font: 400 10.5px/1.2 var(--f-dato); color: #6B6A67; margin-top: 3px; }
.msg.entra { align-self: flex-start; background: #FFFFFF; border: 1px solid #CFCDC8; border-bottom-left-radius: 4px; }
.msg.sale { align-self: flex-end; background: #131112; color: #F2F1EE; border-bottom-right-radius: 4px; transform-origin: bottom right; }
.msg.sale .hora { color: #B9B4AF; }
.msg.persona { border-color: #131112; }
.msg .quien { display: block; font: 500 10.5px/1.3 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: #6B1A26; margin-bottom: 3px; }
.nuevo-entra { animation: burbuja var(--t-entra) var(--sale) both; }
@keyframes burbuja { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.nota-chat { align-self: center; flex: none; font: 400 11px/1.3 var(--f-dato); color: #6B6A67; background: #FFFFFF; border: 1px solid #CFCDC8; border-radius: 6px; padding: 3px 9px; margin: 4px 0; }
.escribe { align-self: flex-start; flex: none; background: #FFFFFF; border: 1px solid #CFCDC8; border-radius: 14px; border-bottom-left-radius: 4px; padding: 11px 12px; display: flex; gap: 4px; }
.escribe i { width: 6px; height: 6px; border-radius: 50%; background: #6B6A67; animation: punto 1s infinite; }
.escribe i:nth-child(2) { animation-delay: .15s; } .escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.audio { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.audio .play { width: 28px; height: 28px; border-radius: 50%; background: #F2F1EE; display: grid; place-items: center; flex: none; }
.audio .play::after { content: ""; border-left: 9px solid #131112; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.onda { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.onda i { width: 3px; border-radius: 2px; background: currentColor; opacity: .55; }
.audio .dur { font: 400 11px/1 var(--f-dato); opacity: .8; }
.transcribe { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid #3A3536; font-size: 12.5px; color: #CFCAC4; }
.adjunto { display: flex; align-items: center; gap: 10px; border: 1px solid #CFCDC8; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: #F2F1EE; }
.msg.sale .adjunto { border-color: #3A3536; background: #2A2627; }
.adjunto .ico { width: 30px; height: 36px; border-radius: 4px; border: 1px solid currentColor; display: grid; place-items: center; font: 500 9px/1 var(--f-dato); flex: none; }
.adjunto b { display: block; font-size: 13px; line-height: 1.3; font-weight: 500; }
.adjunto small { font-size: 11.5px; color: #6B6A67; }
.msg.sale .adjunto small { color: #B9B4AF; }
.foto { width: 100%; border-radius: 8px; display: block; margin-bottom: 6px; }
.respuestas { align-self: flex-start; flex: none; width: 84%; display: grid; gap: 4px; }
.respuestas button { border: 1px solid #CFCDC8; background: #FFFFFF; color: #6B1A26; font-weight: 500; font-size: 14px; min-height: 44px; border-radius: 10px; transition: transform var(--t-toque) var(--sale); }
.respuestas button:active { transform: scale(.97); }
.respuestas button[aria-disabled="true"] { color: #6B6A67; cursor: default; }
.respuestas button.elegido { background: #131112; border-color: #131112; color: #F2F1EE; }
.chat-pie { display: flex; align-items: center; gap: 8px; padding: 10px 10px 16px; background: #FFFFFF; border-top: 1px solid #CFCDC8; }
.chat-pie span { flex: 1; border: 1px solid #CFCDC8; border-radius: 18px; padding: 7px 14px; font-size: 13px; color: #6B6A67; }
.chat-control { margin-top: 10px; border: 0; background: none; padding: 10px 0; color: var(--marca); font-size: 14px; min-height: 44px; }
.chat-control::after { content: " ›" / ""; }
.cambio-caso { transition: opacity 150ms ease; }
.cambio-caso.saliendo { opacity: 0; }

/* ---------- pasos "por detrás" y renglones que se suman ---------- */
.detras { display: grid; border-top: 1px solid var(--linea); }
.detras li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.detras .n { font: 500 12px/1.5 var(--f-dato); color: var(--gris); }
.detras b { display: block; font: 500 12px/1.5 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; }
.detras span { display: block; font-size: 14px; color: var(--gris); }
.detras li.persona b { color: var(--marca); }
.detras li.vacio { display: block; color: var(--gris); font-size: 14px; }
.renglon-nuevo { animation: renglon var(--t-entra) var(--sale) both; }
@keyframes renglon { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- fotos anchas: se abren al llegar y se acercan apenas al bajar ---------- */
.foto-ancha { margin-top: 80px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 8; background: #2A2627; }
.foto-ancha img { width: 100%; height: 100%; object-fit: cover; }
.foto-ancha.franja { aspect-ratio: 16 / 6; margin: 0 0 80px; }
.foto-mueve { clip-path: inset(9% 5% round 18px); transition: clip-path 900ms var(--mueve); }
.foto-mueve.listo { clip-path: inset(0 round 18px); }
.foto-mueve img, .foto-mueve video { transform: scale(1.1); transform-origin: center; }
.foto-ancha video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pausa { position: absolute; right: 14px; bottom: 14px; z-index: 2; min-height: 40px; padding: 8px 16px; border-radius: 980px; border: 0; background: var(--negro); color: var(--blanco); font-size: 13px; transition: transform var(--t-toque) var(--sale); }
.pausa:active { transform: scale(.97); }
@media (max-width: 760px) { .foto-ancha, .foto-ancha.franja { aspect-ratio: 4 / 3; margin-top: 56px; } .foto-ancha.franja { margin: 0 0 56px; } }

/* ---------- el problema (frase que se enciende con el scroll) ---------- */
.dolor { padding-block: 160px; }
.dolor .grande { font-size: clamp(32px, 5.4vw, 60px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; max-width: 18em; }
.palabra { color: var(--gris); transition: color 250ms ease; }
.palabra.on { color: var(--texto); }
.dolor .bajada { margin-top: 44px; }
@media (max-width: 760px) { .dolor { padding-block: 112px; } }

/* ---------- selector con pastilla (pestañas) ---------- */
.selector { position: relative; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--linea); border-radius: 980px; overflow-x: auto; scrollbar-width: none; width: max-content; max-width: 100%; }
.selector::-webkit-scrollbar { display: none; }
.selector .pastilla { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 980px; background: var(--texto); transition: transform var(--t-ui) var(--mueve), width var(--t-ui) var(--mueve); }
.selector button { position: relative; z-index: 1; flex: none; border: 0; background: transparent; min-height: 44px; padding: 8px 18px; border-radius: 980px; color: var(--gris); font-size: 15px; font-weight: 500; transition: color var(--t-cambio) ease, transform var(--t-toque) var(--sale); }
.selector button[aria-selected="true"], .selector button[aria-pressed="true"] { color: var(--fondo); }
.selector button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .selector button:not([aria-selected="true"]):not([aria-pressed="true"]):hover { color: var(--texto); } }
.panel-tab { margin-top: 44px; }
.panel-tab.cambia { animation: cambia var(--t-cambio) ease both; }
@keyframes cambia { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }

/* ---------- tus números ---------- */
.num { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.num .lado { display: grid; gap: 20px; align-content: start; position: sticky; top: 96px; }
@media (max-width: 900px) { .num { grid-template-columns: minmax(0, 1fr); } .num .lado { position: static; } }
.dato-bloque { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--linea); }
.cuentas { display: grid; }
.cuentas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linea); }
.cuentas > div:last-child { border-bottom: 1px solid var(--linea); }
.cuentas dt { color: var(--gris); }
.cuentas dd { font: 400 15px/1.3 var(--f-dato); font-variant-numeric: tabular-nums; text-align: right; }
.cuentas .total dt { color: var(--texto); font-weight: 500; }
.cuentas .total dd { font-weight: 500; }
.reglas-num { margin-top: 100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.reglas-num li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--texto); }
.reglas-num b { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.reglas-num span { color: var(--gris); }
@media (max-width: 900px) { .reglas-num { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; } }

/* gráfico: lo que importa en bordó, el resto en gris; guías de 1px */
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .guia { stroke: var(--linea); stroke-width: 1; }
.grafico .eje { font: 400 11px var(--f-dato); fill: var(--gris); }
.grafico .resalta { fill: var(--marca); }
.grafico .resto { fill: #8E8884; }
.grafico .linea-equi { stroke: var(--texto); stroke-width: 1.5; stroke-dasharray: 5 5; }
.grafico .linea-t { font: 500 11px var(--f-dato); fill: var(--texto); }
.grafico .barra-v { transform-box: fill-box; transform-origin: bottom; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--gris); margin-top: 14px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.barras-h { display: grid; gap: 16px; }
.barras-h li { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 64px; gap: 16px; align-items: center; }
.barras-h .pista { height: 12px; background: var(--linea); border-radius: 6px; overflow: hidden; }
.barras-h .pista span { display: block; height: 100%; background: var(--marca); border-radius: 6px; transform-origin: left; }
.barras-h em { font: 500 15px/1 var(--f-dato); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .barras-h li { grid-template-columns: minmax(0, 1fr) 56px; } .barras-h .pista { grid-column: 1 / -1; grid-row: 2; } }
/* barras y líneas que se dibujan una sola vez al llegar */
.dibuja .barra-v, .dibuja .pista span { transform: scaleY(0); transition: transform var(--t-dibuja) var(--sale); transition-delay: var(--retraso, 0ms); }
.dibuja .pista span { transform: scaleX(0); }
.dibuja.listo .barra-v, .dibuja.listo .pista span { transform: none; }
.dibuja .linea-equi, .dibuja .linea-t { opacity: 0; transition: opacity var(--t-dibuja) ease 450ms; }
.dibuja.listo .linea-equi, .dibuja.listo .linea-t { opacity: 1; }

/* ---------- comparar (antes / con Pensa) ---------- */
.versus { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.versus > div { padding: 32px 0; display: grid; gap: 14px; align-content: start; }
.versus > div + div { padding-left: 44px; border-left: 1px solid var(--linea); }
.versus h3 { font-size: 18px; font-weight: 500; }
.versus ul { display: grid; gap: 10px; }
.versus li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: var(--gris); }
.versus li::before { font: 500 15px/1.5 var(--f-dato); }
.versus .no li::before { content: "−"; color: var(--marca); }
.versus .si li::before { content: "+"; color: var(--verde); }
@media (max-width: 720px) { .versus { grid-template-columns: 1fr; } .versus > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); } }

/* ---------- pasos ---------- */
/* Pasos de arranque: una línea de tiempo con números grandes; la línea bordó se dibuja al aparecer. */
.pasos { counter-reset: paso; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 8px; }
.pasos::before, .pasos::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--linea); }
.pasos::after { background: var(--bordo); transform: scaleX(0); transform-origin: left; transition: transform 1600ms cubic-bezier(.65, 0, .35, 1) 200ms; }
.pasos.dibujado::after { transform: none; }
.pasos li { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 36px; }
.pasos li::after { content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--bordo); box-sizing: border-box; }
.pasos li::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); font: 500 clamp(56px, 6vw, 88px)/.9 var(--f-dato); letter-spacing: -.06em; color: var(--bordo); margin-bottom: 8px; }
.pasos b { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.pasos li > span:last-child { color: var(--gris); font-size: 16px; }
.promesa { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; color: var(--texto); max-width: 24em; letter-spacing: -.01em; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr 1fr; gap: 48px 24px; } .pasos::before, .pasos::after { display: none; } .pasos li { padding-top: 28px; border-top: 2px solid var(--bordo); } .pasos li::after { display: none; } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; gap: 40px; } }
@media (prefers-reduced-motion: reduce) { .pasos::after { transform: none; transition: none; } }
.piezas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 44px; }
.piezas li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--linea); }
.piezas b { font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.piezas span:last-child { color: var(--gris); }
@media (max-width: 900px) { .piezas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .piezas { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- quién hace qué ---------- */
.quien-hace { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; }
.quien-hace h3 { font-size: 18px; font-weight: 500; margin-bottom: 12px; }
.quien-hace li { padding: 11px 0; border-top: 1px solid var(--linea); color: var(--gris); font-size: 15px; }
@media (max-width: 520px) { .quien-hace { grid-template-columns: 1fr; } }

/* ---------- equipo ---------- */
.equipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.equipo li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 18px; align-items: start; padding-top: 24px; border-top: 1px solid var(--linea); }
.equipo .foto-lugar { grid-row: span 3; width: 72px; height: 72px; border-radius: 50%; border: 1px dashed var(--linea); display: grid; place-items: center; font: 500 10px/1 var(--f-dato); letter-spacing: .06em; color: var(--gris); }
.equipo .t3 { font-size: 20px; }
.equipo p { color: var(--gris); font-size: 15px; }
.equipo-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.equipo-dos li { grid-template-rows: auto auto 1fr; }
.equipo-dos p { max-width: 38em; }
@media (max-width: 900px) { .equipo-dos { grid-template-columns: 1fr; gap: 32px; } }
.equipo .retrato { grid-row: span 3; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--linea); }
@media (max-width: 900px) { .equipo { grid-template-columns: 1fr; gap: 32px; } }
.borrador { display: inline-block; margin-top: 28px; font: 500 12px/1.4 var(--f-dato); letter-spacing: .04em; color: var(--marca); border: 1px solid var(--marca); border-radius: 6px; padding: 6px 10px; }
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 80px; }
.datos li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--linea); }
.datos .cifra { font-size: clamp(40px, 5vw, 56px); }
.datos .chico { font-size: 15px; }
@media (max-width: 900px) { .datos { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- titular de portada: frases cortas que suben de a una ---------- */
.titular { font-size: clamp(44px, 8.4vw, 112px); font-weight: 600; line-height: .96; letter-spacing: -.045em; max-width: 12em; }
.titular .l { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.titular .l > span { display: inline-block; transform: translateY(108%); transition: transform 1000ms cubic-bezier(.22, 1, .36, 1); }
.titular .l:nth-child(2) > span { transition-delay: 140ms; }
.titular .l:nth-child(3) > span { transition-delay: 280ms; }
.titular.ver .l > span { transform: none; }
.titular .acento { color: var(--bordo); }
/* El subrayado bordó que se dibuja debajo de la palabra clave. */
.subraya { position: relative; font-style: normal; white-space: nowrap; }
.subraya svg { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .24em; overflow: visible; pointer-events: none; }
.subraya path { fill: none; stroke: var(--bordo); stroke-width: .07em; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 800ms cubic-bezier(.65, 0, .35, 1) 1100ms; }
.titular.ver .subraya path { stroke-dashoffset: 0; }
/* Onda de audio que se mueve, al lado de la palabra. */
.onda { display: inline-flex; align-items: center; gap: .06em; height: .62em; margin: 0 .12em 0 .08em; vertical-align: -.02em; }
.onda i { display: block; width: .07em; height: 100%; border-radius: 1em; background: var(--bordo); transform-origin: center; animation: onda 1100ms ease-in-out infinite; }
.onda i:nth-child(2) { animation-delay: -900ms; } .onda i:nth-child(3) { animation-delay: -650ms; } .onda i:nth-child(4) { animation-delay: -300ms; }
.onda i:nth-child(5) { animation-delay: -800ms; } .onda i:nth-child(6) { animation-delay: -450ms; } .onda i:nth-child(7) { animation-delay: -150ms; }
@keyframes onda { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .titular .l > span { transform: none; transition: none; } .subraya path { stroke-dashoffset: 0; transition: none; } .onda i { animation: none; transform: scaleY(.7); } }

/* ---------- prendés solo lo que usás (interruptores + menú del panel que crece y se achica) ---------- */
.prende-vivo { margin-top: 120px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .prende-vivo { grid-template-columns: minmax(0, 1fr); } }
.prende-vivo h3 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.prende-vivo .texto { margin-top: 14px; }
.grupos-mod { margin-top: 32px; display: grid; gap: 28px; }
.grupos-mod h4 { font: 500 12px/1.2 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.interruptor { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--linea); background: none; text-align: left; font-size: 16px; color: var(--texto); cursor: pointer; }
.interruptor .sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 28px; background: #CFCDC8; transition: background-color 200ms ease; }
.interruptor .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.interruptor[aria-checked="true"] .sw { background: var(--bordo); }
.interruptor[aria-checked="true"] .sw::after { transform: translateX(18px); }
.interruptor:active .sw::after { width: 26px; }
.interruptor[aria-checked="false"] { color: var(--gris); }
.menu-vivo { position: sticky; top: 96px; background: var(--negro); color: #CFCAC4; border-radius: 22px; padding: 22px 18px; font-size: 14px; }
.menu-vivo .mv-logo { color: var(--blanco); font-weight: 600; font-size: 17px; padding: 0 10px 14px; }
.menu-vivo .mv-g { font: 500 10.5px/1.2 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: #8E8884; padding: 14px 10px 6px; }
.menu-vivo .mv-i { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease; }
.menu-vivo .mv-i > span { overflow: hidden; display: block; }
.menu-vivo .mv-i > span > span { display: block; padding: 8px 10px; border-radius: 9px; }
.menu-vivo .mv-i.on-1 > span > span { background: #2A2627; color: var(--blanco); }
.menu-vivo .mv-i.apagado { grid-template-rows: 0fr; opacity: 0; }
.menu-vivo .mv-i.nuevo > span > span { animation: mv-nuevo 900ms ease; }
@keyframes mv-nuevo { 0% { background: rgba(216, 121, 135, .45); } 100% { background: transparent; } }
.menu-vivo .mv-pie { margin-top: 16px; padding: 14px 10px 0; border-top: 1px solid #2A2627; font: 500 12px/1.4 var(--f-dato); color: #8E8884; }
@media (max-width: 900px) {
  .prende-vivo { gap: 20px; }
  .prende-vivo > div:first-child { display: contents; }
  .prende-vivo h3 { order: 1; } .prende-vivo .texto { order: 2; margin-top: 0; }
  .prende-vivo .menu-vivo { order: 3; position: sticky; top: 112px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; border-radius: 16px; }
  .prende-vivo .grupos-mod { order: 4; margin-top: 4px; }
  .menu-vivo .mv-logo { width: 100%; padding: 0 4px 4px; font-size: 15px; }
  .menu-vivo .mv-g, .menu-vivo .mv-pie { display: none; }
  .menu-vivo .mv-i { display: block; }
  .menu-vivo .mv-i.apagado { display: none; }
  .menu-vivo .mv-i > span > span { padding: 5px 11px; border-radius: 980px; background: #2A2627; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .menu-vivo .mv-i { transition: none; } .menu-vivo .mv-i.nuevo > span > span { animation: none; } }

/* ---------- contacto ---------- */
/* Hablemos: la madeja de cables a la izquierda termina en el cable bordó, que llega justo al título.
   El cable está a la mitad de la foto y el título a la mitad de la sección: quedan alineados. */
.cta-cables { position: relative; overflow: hidden; background: var(--blanco); color: var(--negro); border-top: 1px solid var(--linea); }
.cta-cuerpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; min-height: clamp(560px, 74vh, 760px); }
.cta-texto { grid-column: 2; display: grid; grid-template-rows: 1fr auto 1fr; }
.cta-texto h2 { grid-row: 2; margin: 0; color: var(--bordo, #6B1A26); }
.cta-resto { grid-row: 3; align-self: start; padding-top: 22px; padding-bottom: 48px; }
.cta-resto .bajada { margin-top: 0; }
.cta-foto { position: absolute; left: 0; top: 0; bottom: 0; width: calc((100% - min(100%, 1120px)) / 2 + 22px + (min(100%, 1120px) - 92px) * .535 + 22px); }
.cta-foto img { position: absolute; right: 0; top: 50%; width: max(100%, 760px); height: auto; transform: translateY(-49.5%); display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%), linear-gradient(transparent, #000 20%, #000 80%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%), linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-composite: intersect;
  clip-path: inset(0 0 0 0); transition: clip-path 1800ms cubic-bezier(.22, 1, .36, 1); }
/* Al aparecer, la foto se descubre de izquierda a derecha: el cable avanza hasta el título. */
.cta-cables.espera .cta-foto img { clip-path: inset(0 100% 0 0); }
.cta-texto h2 { transition: opacity 600ms var(--sale) 900ms, transform 600ms var(--sale) 900ms; }
.cta-cables.espera .cta-texto h2 { opacity: 0; transform: translateX(-12px); }
@media (max-width: 900px) {
  .cta-cuerpo { grid-template-columns: 1fr; min-height: 0; padding-top: calc(56vw + 32px); padding-bottom: 24px; }
  .cta-texto { grid-column: 1; display: block; }
  .cta-foto { width: 100%; bottom: auto; height: 56vw; }
  .cta-foto { overflow: hidden; }
  .cta-foto img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cta-cables.espera .cta-foto img { clip-path: none; } .cta-cables.espera .cta-texto h2 { opacity: 1; transform: none; } }
.contacto .mail-fila { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.contacto .mail { font: 500 clamp(24px, 3.6vw, 40px)/1.15 var(--f-dato); letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; border-bottom: 1px solid var(--marca); padding-bottom: 4px; }

/* ---------- pie (igual en todas las páginas) ---------- */
.pie { border-top: 1px solid var(--linea); padding-block: 48px 40px; font-size: 14px; color: var(--gris); }
/* Electricidad roja por todo el final (Hablemos + pie): un lienzo WebGL detrás de los dos (movimiento.js → rayos). */
.pie-lema { margin: 72px 0 0; color: var(--blanco); font-size: min(8.4vw, 112px); white-space: nowrap; font-weight: 600; line-height: .9; letter-spacing: -.045em; transition: text-shadow 500ms ease; }
.zona-rayos { position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; display: block; }
html.rayos .pie { background: transparent; position: relative; z-index: 1; border-top: 0; }
[data-golpe] { transition: text-shadow 60ms ease !important; text-shadow: 0 0 2px #fff, 0 0 18px rgba(232, 50, 70, .85), 0 0 46px rgba(200, 30, 50, .55); }
.pie-arriba { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 44px; }
.pie-marca { display: grid; gap: 14px; align-content: start; }
.pie-marca img { height: 28px; width: auto; }
.pie-marca p { max-width: 24em; }
.pie h2 { font: 500 12px/1.2 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--texto); margin-bottom: 8px; }
.pie ul a { text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; transition: color 150ms ease; }
.pie-abajo { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 44px; }
.pie-legal { display: grid; gap: 6px; max-width: 46em; }
.pie-legal a { color: var(--texto); }
.pie .firma { font-family: var(--f-dato); font-size: 12px; letter-spacing: .02em; }
.data-fiscal { display: grid; place-items: center; width: 64px; height: 84px; border: 1px solid var(--linea); border-radius: 6px; text-align: center; font: 500 9px/1.3 var(--f-dato); letter-spacing: .04em; color: var(--gris); text-decoration: none; flex: none; }
@media (max-width: 900px) { .pie-arriba { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pie-arriba { grid-template-columns: 1fr; } }

/* ---------- páginas legales ---------- */
.hoja-legal { max-width: 65ch; }
.hoja-legal h2 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; margin-top: 44px; }
.hoja-legal p, .hoja-legal li { margin-top: 12px; color: var(--texto); }
.hoja-legal dl { margin-top: 20px; }

/* ---------- ver una captura grande ---------- */
dialog.lupa { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1500px); max-height: 94vh; overflow: visible; }
dialog.lupa::backdrop { background: rgba(19, 17, 18, .88); }
dialog.lupa img { max-height: 86vh; width: auto; max-width: 100%; border-radius: 10px; margin: 0 auto; background: #FFFFFF; }
dialog.lupa .boton-borde { position: fixed; top: 14px; right: 14px; background: var(--negro); color: var(--blanco); border-color: #3A3536; }
dialog.lupa p { color: #CFCAC4; font: 400 12px/1.4 var(--f-dato); text-align: center; margin-top: 10px; }

/* ---------- aparición al scrollear (decisión del dueño, 14/10/2026) ----------
   Solo con <html class="revela">, que pone el script. Sin JS, todo quieto y completo. */
.revela [data-revela] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-aparece) var(--sale), transform var(--t-aparece) var(--sale); transition-delay: var(--retraso, 0ms); }
.revela [data-revela="escala"] { transform: translateY(16px) scale(.97); }
.revela [data-revela].visto, .revela [data-revela]:focus-within { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Movimiento reducido: solo fundidos cortos, nada se desplaza. */
  .revela [data-revela], .revela [data-revela="escala"] { transform: none; transition: opacity 200ms ease; }
  .nuevo-entra, .renglon-nuevo { animation: aparece-suave 200ms ease both; }
  .panel-tab.cambia { animation: aparece-suave 200ms ease both; }
  .escribe i { animation: none; opacity: .6; }
  .foto-mueve { clip-path: none; transition: none; }
  .foto-mueve img, .foto-mueve video { transform: none !important; }
  .boton:active, .boton-borde:active, .respuestas button:active, .selector button:active { transform: none; }
  .selector .pastilla { transition: none; }
  .dibuja .barra-v, .dibuja .pista span { transform: none; transition: none; }
  .dibuja .linea-equi, .dibuja .linea-t { opacity: 1; transition: none; }
}
@keyframes aparece-suave { from { opacity: 0; } to { opacity: 1; } }
@media print { .revela [data-revela] { opacity: 1; transform: none; } .palabra { color: inherit; } }