:root{
  --fondo:#f4ede1;
  --superficie:#fbf7ef;
  --superficie2:#ede4d4;
  --superficie3:#e3d8c4;
  --borde:#e0d5c2;
  --borde-fuerte:#c9b99f;
  --tinta:#2a1f22;
  --tinta-suave:#6b5a57;
  --tinta-tenue:#8a7972;
  --acento:#6b2233;
  --exito:#2f6b4f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:Archivo,system-ui,sans-serif;font-synthesis:none;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--tinta);text-decoration:none}
a:hover{color:var(--acento)}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}
::selection{background:var(--acento);color:var(--fondo)}
summary::-webkit-details-marker{display:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================================
   YVEX — hoja común del sitio.
   Design entregó todo con estilos en línea; aquí van a clases porque el
   resumen original ya pedía "extraer un yvex.css común": con estilos en línea
   cada página vuelve a divergir en cuanto se toca una.
   ============================================================================ */

/* --- Enlace de salto (accesibilidad) --- */
.saltar{position:fixed;left:-9999px;top:0;z-index:130;padding:14px 20px;background:var(--acento);color:var(--fondo)}
.saltar:focus{left:16px;top:16px}

/* --- Cabecera --- */
.cabecera{position:sticky;top:0;z-index:40;background:rgba(244,237,225,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.cabecera-caja{max-width:1560px;margin:0 auto;padding:6px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.marca{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 0}
.marca-txt{font-size:21px;font-weight:600;letter-spacing:-.045em}
.marca-punto{width:5px;height:5px;background:var(--acento);display:inline-block}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0 2px}
.nav a{font-size:14px;letter-spacing:.01em;padding:12px 13px;min-height:44px;display:inline-flex;align-items:center}
.nav-cta{white-space:nowrap;padding:12px 18px !important;background:var(--acento);color:var(--fondo);margin-left:10px}
.nav-cta:hover{color:var(--fondo);opacity:.9}

/* --- Cinta: la regla horizontal con etiquetas que separa cada tramo --- */
.tramo{max-width:1560px;margin:0 auto;padding:clamp(40px,7vw,96px) 24px clamp(48px,8vw,110px)}
.cinta{display:flex;align-items:center;gap:16px;margin-bottom:clamp(40px,9vw,120px)}
.cinta-etq{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);white-space:nowrap}
.cinta-regla{flex:1;height:1px;background:var(--borde)}
.cinta--oscura .cinta-etq{color:var(--borde-fuerte)}
.cinta--oscura .cinta-regla{background:rgba(224,213,194,.35)}

/* --- Titular de portada --- */
.titular{margin:0;font-size:clamp(44px,9.4vw,164px);line-height:.9;font-weight:500;letter-spacing:-.05em;text-wrap:balance;max-width:15ch}
.entrada{margin-top:clamp(36px,6vw,88px);display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,56px);align-items:flex-end}
.entrada-txt{margin:0;flex:1 1 420px;min-width:0;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:var(--tinta-suave);max-width:46ch}
.entrada-nota{margin:0;flex:0 1 auto;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;color:var(--tinta-tenue)}

/* --- Imagen a sangre --- */
.sangre{position:relative;width:100%;height:clamp(300px,62vh,660px);overflow:hidden;background:var(--superficie2)}
.sangre-hueco{position:absolute;inset:0;display:grid;place-items:center;padding:24px}
.sangre-marcador{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-tenue);text-align:center;max-width:44ch;line-height:1.7;border:1px dashed var(--borde-fuerte);padding:14px 18px}
.sangre-pie{position:absolute;left:24px;bottom:18px;margin:0;pointer-events:none;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}

/* --- Tarjetas de producto (que no son tarjetas: son tramos de la cinta) --- */
.prod{display:block;padding:clamp(26px,4vw,54px) 0;border-top:1px solid var(--borde)}
.prod--vivo{border-top-color:var(--borde-fuerte);transition:padding-left .5s cubic-bezier(.2,.7,.2,1)}
.prod--vivo:hover{padding-left:14px}
.prod-estado{margin:0;display:flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.prod-estado--vivo{color:var(--exito)}
.prod-punto{width:7px;height:7px;display:inline-block;border:1px solid var(--borde-fuerte)}
.prod-punto--vivo{background:var(--exito);border-color:var(--exito)}
.prod-nombre{margin:6px 0 0;font-size:clamp(46px,11vw,190px);line-height:.86;font-weight:500;letter-spacing:-.055em}
.prod-nombre--pronto{font-size:clamp(34px,6.4vw,104px);line-height:.9;letter-spacing:-.05em;color:var(--tinta-suave)}
.prod-desc{margin:clamp(16px,2.4vw,32px) 0 0;font-size:clamp(17px,2.1vw,30px);line-height:1.3;letter-spacing:-.02em;max-width:32ch;text-wrap:pretty}
.prod-desc--pronto{font-size:16px;line-height:1.5;letter-spacing:0;color:var(--tinta-suave);max-width:46ch;margin-top:14px}
.prod-ir{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--acento);min-height:44px}
.prod--pronto{border-top-color:var(--borde)}
.prod--asistente{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,56px);align-items:flex-end;padding-bottom:clamp(48px,7vw,96px)}
.prod-asis-txt{flex:1 1 380px;min-width:0}
.prod-asis-hueco{flex:0 1 300px;min-width:220px;aspect-ratio:1/1;border:1px solid var(--borde-fuerte);display:grid;place-items:center;padding:18px}

/* --- Precio: el único tramo en negativo, para que pese --- */
.precio{background:var(--tinta);color:var(--fondo);min-height:86vh;display:flex;align-items:center}
.precio-caja{max-width:1560px;margin:0 auto;width:100%;padding:clamp(56px,9vw,120px) 24px}
.precio-titular{margin:0;font-size:clamp(32px,6.2vw,104px);line-height:.96;font-weight:500;letter-spacing:-.045em;max-width:18ch;text-wrap:balance}
.precio-fila{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,72px);align-items:flex-end;margin-top:clamp(40px,7vw,96px)}
.precio-cifra{margin:0;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.04em}
.precio-desde{font-family:Archivo,sans-serif;font-size:.24em;letter-spacing:.16em;text-transform:uppercase;vertical-align:middle;margin-right:.8em;color:var(--borde-fuerte)}
.precio-mes{font-family:Archivo,sans-serif;font-size:.22em;letter-spacing:.02em;color:var(--borde-fuerte)}
.precio-nota{flex:1 1 320px;min-width:0;margin:0;font-size:16px;line-height:1.55;color:var(--superficie3);max-width:48ch}

/* --- Pie --- */
.pie{border-top:1px solid var(--borde)}
.pie-caja{max-width:1560px;margin:0 auto;padding:clamp(40px,6vw,80px) 24px 28px;display:flex;flex-wrap:wrap;gap:32px}
.pie-marca{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pie-yvex{font-size:clamp(40px,7vw,96px);line-height:.88;font-weight:500;letter-spacing:-.05em}
.pie-correo{display:inline-flex;align-items:center;min-height:44px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;color:var(--tinta-suave)}
/* El pie repartía los enlaces con `auto-fit` y quedaban desperdigados por
   todo el ancho, con "Eliminar cuenta" cayendo solo a otra fila. Dos
   columnas fijas y alineadas a la derecha lo ordenan. */
.pie-nav{flex:0 1 auto;margin-left:auto;display:grid;grid-template-columns:repeat(2,minmax(140px,auto));gap:0 clamp(24px,4vw,64px);align-content:start}
.pie-nav a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid var(--borde)}
@media (max-width:620px){ .pie-nav{grid-template-columns:1fr;margin-left:0} }
.pie-legal{flex:1 1 100%;margin:clamp(32px,5vw,72px) 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--tinta-suave)}

/* ============================================================================
   PÁGINA DE PRODUCTO (/pos)
   ============================================================================ */
.vo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.titular--medio{font-size:clamp(34px,6.6vw,110px);max-width:17ch}
.seccion-t{margin:0;font-size:clamp(26px,4.2vw,62px);line-height:1;font-weight:500;letter-spacing:-.04em;max-width:18ch;text-wrap:balance}
.seccion-p{margin:18px 0 0;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--tinta-suave);max-width:56ch}
.seccion-p--ancha{max-width:64ch;margin-top:clamp(20px,3vw,36px)}
.demo-intro{margin-bottom:clamp(28px,4vw,52px)}
.tramo--demo{padding-bottom:clamp(56px,9vw,130px)}

/* --- Selector de dispositivo --- */
.demo-barra{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-bottom:18px}
.demo-sel{display:inline-flex;border:1px solid var(--borde-fuerte)}
.demo-sel-b{background:none;border:0;padding:0 20px;min-height:48px;font-size:14.5px;letter-spacing:.01em;cursor:pointer;color:var(--tinta-suave);transition:background .3s ease,color .3s ease}
.demo-sel-b+.demo-sel-b{border-left:1px solid var(--borde-fuerte)}
.demo-sel--activo{background:var(--acento);color:var(--fondo)}
.demo-espejo{margin:0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--tinta-tenue)}

/* --- Marco de la demo -------------------------------------------------------
   Los tokens del TEMA se aplican aquí, no en :root: el sitio no cambia de
   color, solo el programa que se enseña dentro. `--d-r*` (esquinas) y
   `--d-pad`/`--d-fila` (densidad) son las otras dos perillas reales.
   La app es redondeada y con superficies elevadas; el sitio es plano. Dentro
   del marco manda la app: es una ventana a otro programa, no una sección. */
.demo-marco{
  --d-bg:#f4ede1;--d-s1:#fbf7ef;--d-s2:#ede4d4;--d-s3:#e3d8c4;
  --d-borde:#e0d5c2;--d-borde-f:#c9b99f;--d-lateral:#ede4d4;
  --d-txt:#2a1f22;--d-txt-t:#6b5a57;--d-txt-d:#8a7972;
  --d-ac:#6B2233;--d-ac-suave:rgba(107,34,51,.1);--d-ac-borde:rgba(107,34,51,.38);--d-ac-txt:#fff;
  --d-exito:#0b6d4d;--d-alerta:#8a5a00;--d-peligro:#c0392b;
  --d-r:14px;--d-rs:10px;--d-rp:999px;--d-pad:14px;--d-fila:16px;--d-esc:1;
  position:relative;background:var(--d-bg);border:1px solid var(--borde-fuerte);
  color:var(--d-txt);font-size:14px;overflow:hidden;
  transition:background .4s ease,color .4s ease;
}
.demo-marco[data-vista="pc"] .demo-movil,
.demo-marco[data-vista="movil"] .demo-pc{display:none}
.demo-marco .num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.demo-marco button{cursor:pointer;font-family:inherit;color:inherit}
.demo-marco svg{flex:0 0 auto}
.dpc-tecla{display:inline-flex;align-items:center;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.16);font-family:'IBM Plex Mono',monospace;font-size:10px;font-style:normal;letter-spacing:.04em}

/* --- Demo A: escritorio --- */
.dpc{display:flex;flex-direction:column;min-height:560px}
.dpc-titulo{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--d-borde);font-size:13px}
.dpc-logo{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:var(--d-ac);color:var(--d-ac-txt);font-size:12px;font-weight:600}
.dpc-titulo-sep{color:var(--d-txt-d);font-size:11px;padding-left:10px;border-left:1px solid var(--d-borde)}
.dpc-cols{flex:1;display:grid;grid-template-columns:186px 1fr 236px;min-height:0}
.dpc-lateral{display:flex;flex-direction:column;gap:1px;padding:14px 12px;background:var(--d-lateral);border-right:1px solid var(--d-borde)}
.dpc-grupo{margin:14px 0 6px;padding:0 10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-txt-d)}
.dpc-grupo:first-child{margin-top:0}
.dpc-mod{display:flex;align-items:center;gap:11px;padding:calc(var(--d-pad) * .62) 10px;border-radius:var(--d-rs);font-size:14px;color:var(--d-txt-t)}
.dpc-mod--act{background:var(--d-ac-suave);color:var(--d-ac);box-shadow:inset 2px 0 0 var(--d-ac)}
.dpc-lat-pie{margin-top:auto;padding-top:14px;border-top:1px solid var(--d-borde);display:flex;flex-direction:column;gap:8px}
.dpc-todo,.dpc-salir{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--d-rs);font-size:13.5px;color:var(--d-txt-t)}
.dpc-todo{border:1px solid var(--d-borde);background:var(--d-s1)}
.dpc-user{display:flex;align-items:center;gap:10px;padding:2px 10px}
.dpc-user-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--d-ac);color:var(--d-ac-txt);font-size:12px}
.dpc-user-txt{display:flex;flex-direction:column;line-height:1.25}
.dpc-user-txt b{font-size:13px;font-weight:500}
.dpc-user-txt small{font-size:10.5px;color:var(--d-txt-d)}
.dpc-centro{display:flex;flex-direction:column;min-width:0;padding:12px}
.dpc-tabs{display:flex;gap:6px;margin-bottom:9px}
.dpc-tab{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:var(--d-rp);background:var(--d-s2);font-size:12.5px;color:var(--d-txt-t)}
.dpc-tab--act{background:var(--d-s3);color:var(--d-txt)}
.dpc-tab i{font-style:normal;color:var(--d-txt-d)}
.dpc-tab--mas{padding:7px 12px}
.dpc-panel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--d-s1);border:1px solid var(--d-borde);border-radius:var(--d-r)}
.dpc-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.dpc-volver{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--d-rs);border:1px solid var(--d-borde);color:var(--d-txt-t)}
.dpc-buscar-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:0 12px;border:1.5px solid var(--d-ac-borde);border-radius:var(--d-rp);background:var(--d-bg);color:var(--d-txt-d)}
.dpc-buscar{flex:1;min-width:0;background:none;border:0;padding:14px 0;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--d-txt);outline:none}
.dpc-buscar::placeholder{color:var(--d-txt-d)}
.dpc-hint{padding:3px 8px;border-radius:var(--d-rp);background:var(--d-s2);font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--d-txt-d);white-space:nowrap}
.dpc-cajero{font-size:12.5px;color:var(--d-txt-t);white-space:nowrap;padding-right:4px}
.dpc-carrito{flex:1;min-height:170px;overflow:auto;border-top:1px solid var(--d-borde)}
.dpc-vacio{height:100%;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--d-txt-d)}
.dpc-vacio p{margin:0;font-size:14px}
.dpc-linea{display:grid;grid-template-columns:1fr auto 108px;gap:12px;align-items:center;padding:var(--d-fila) 16px;border-bottom:1px solid var(--d-borde)}
.dpc-linea--act{background:var(--d-ac-suave);box-shadow:inset 3px 0 0 var(--d-ac)}
.dpc-l-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dpc-l-nom{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpc-l-uni{font-size:11.5px;color:var(--d-txt-d)}
.dpc-pastilla{display:inline-flex;align-items:center;gap:12px;padding:5px 10px;border-radius:var(--d-rp);background:var(--d-s2);font-size:14px}
.dpc-pastilla button{width:20px;height:20px;background:none;border:0;font-size:15px;line-height:1;color:var(--d-txt-t)}
.dpc-pastilla button:hover{color:var(--d-ac)}
.dpc-l-imp{text-align:right;font-size:15px}
.dpc-cliente{padding:11px 16px;border-bottom:1px solid var(--d-borde)}
.dpc-cliente-b{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--d-rp);border:1px dashed var(--d-borde-f);font-size:12.5px;color:var(--d-txt-t)}
.dpc-totales{padding:14px 16px 16px}
.dpc-sub{display:flex;justify-content:space-between;font-size:14px;color:var(--d-txt-t)}
.dpc-tot{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 16px}
.dpc-tot span:first-child{font-size:11px;letter-spacing:.16em;color:var(--d-txt-d)}
.dpc-tot .num{font-size:calc(38px * var(--d-esc));line-height:1;letter-spacing:-.03em;color:var(--d-ac)}
.dpc-acciones{display:flex;gap:10px}
.dpc-btn-sec{padding:0 20px;min-height:48px;border-radius:var(--d-rs);border:1px solid var(--d-borde-f);background:var(--d-s2);font-size:14px;color:var(--d-txt-t)}
.dpc-btn-cobrar{flex:1;min-height:48px;border:0;border-radius:var(--d-rs);background:var(--d-ac);color:var(--d-ac-txt);font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.dpc-btn-cobrar[disabled]{opacity:.42;cursor:not-allowed}
.dpc-der{display:flex;flex-direction:column;gap:10px;padding:12px 12px 12px 0;min-width:0}
.dpc-buscar-nombre{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:var(--d-rp);background:var(--d-s1);border:1px solid var(--d-borde);font-size:13px;color:var(--d-txt-t)}
.dpc-buscar-nombre span{flex:1}
.dpc-buscar-nombre .dpc-tecla{background:var(--d-s2);color:var(--d-txt-d)}
.dpc-panel--favs{flex:1;padding:14px;min-height:0}
.dpc-favs-titulo{margin:0 0 10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-txt-d)}
.dpc-favs{display:flex;flex-direction:column;gap:7px;overflow:auto;max-height:290px}
/* `flex:0 0 auto` no es opcional: dentro de un contenedor flex con altura
   limitada, los hijos se ENCOGEN por defecto y recortaban el precio. */
.dpc-fav{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border-radius:var(--d-rs);border:1px solid var(--d-borde);background:var(--d-s2);min-height:44px}
.dpc-fav:hover{border-color:var(--d-ac)}
.dpc-fav-dep{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--d-txt-d)}
.dpc-fav-nom{font-size:12.5px;line-height:1.25}
.dpc-fav-pre{font-size:12px;color:var(--d-ac)}
.dpc-ventas-dia{padding:13px;border-radius:var(--d-rs);border:1px solid var(--d-borde);background:var(--d-s1);font-size:13.5px;color:var(--d-txt-t)}
.dpc-estado{display:flex;align-items:center;gap:14px;padding:8px 14px;border-top:1px solid var(--d-borde);font-size:11px;color:var(--d-txt-d)}
.dpc-est-viva::before,.dpc-est-sync::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--d-ac)}
.dpc-est-turno{font-family:'IBM Plex Mono',monospace}
.dpc-est-der{margin-left:auto;display:flex;gap:14px}

/* --- Demo B: celular --- */
.demo-movil{display:flex;justify-content:center;padding:clamp(18px,3vw,38px) 16px;background:var(--d-s2)}
.dmv{width:334px;max-width:100%;background:var(--d-bg);border:1px solid var(--d-borde-f);border-radius:26px;padding:8px 0 0;display:flex;flex-direction:column;overflow:hidden}
.dmv-sistema{display:flex;justify-content:space-between;padding:2px 18px 8px;font-size:10.5px;color:var(--d-txt-d)}
.dmv-sync{color:var(--d-exito)}
.dmv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 10px}
.dmv-titulo{font-size:20px;font-weight:600;letter-spacing:-.03em}
.dmv-iconos{display:flex;gap:7px}
.dmv-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--d-rs);background:var(--d-s2);color:var(--d-txt-t)}
.dmv-buscar{display:block;padding:0 14px}
.dmv-buscar input{width:100%;background:var(--d-s2);border:1.5px solid var(--d-ac-borde);border-radius:var(--d-rs);padding:11px 13px;font-size:12.5px;color:var(--d-txt);outline:none}
.dmv-buscar input::placeholder{color:var(--d-txt-d)}
.dmv-cuenta{margin:11px 14px 8px;font-size:12.5px;color:var(--d-txt-t)}
.dmv-rejilla{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;padding:0 14px}
.dmv-prod{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:var(--d-rs);background:var(--d-s1);border:1px solid var(--d-borde);min-height:96px}
.dmv-prod--act{border-color:var(--d-ac);border-width:1.5px;background:var(--d-s3)}
.dmv-badge{position:absolute;top:5px;right:5px;min-width:20px;height:20px;display:grid;place-items:center;border-radius:var(--d-rp);background:var(--d-ac);color:var(--d-ac-txt);font-size:10.5px}
.dmv-av{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--d-s3);color:var(--d-txt-t);font-size:14px}
.dmv-prod-nom{font-size:10.5px;line-height:1.25;text-align:center}
.dmv-prod-pre{margin-top:auto;font-size:11.5px;color:var(--d-ac)}
.dmv-hoja{margin-top:12px;padding:8px 14px 14px;background:var(--d-s1);border-top:1px solid var(--d-borde);display:flex;flex-direction:column;gap:10px}
.dmv-asa{width:46px;height:4px;border-radius:2px;background:var(--d-borde-f);align-self:center}
.dmv-hoja-fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dmv-hoja-n{margin:0;font-size:10.5px;letter-spacing:.14em;color:var(--d-txt-d)}
.dmv-hoja-total{margin:2px 0 0;font-size:26px;line-height:1;letter-spacing:-.03em}
.dmv-hoja-nom{margin:4px 0 0;font-size:11px;color:var(--d-txt-d);max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmv-hoja-vacia{margin:0;text-align:center;font-size:12.5px;color:var(--d-txt-d)}
.dmv-cobrar{padding:0 26px;min-height:52px;border:0;border-radius:var(--d-rs);background:var(--d-ac);color:var(--d-ac-txt);font-size:16px}
.dmv-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--d-borde);background:var(--d-s1)}
.dmv-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 11px;color:var(--d-txt-d);font-size:10px}
.dmv-tab--act{color:var(--d-ac)}
.dmv-tab--act svg{background:var(--d-ac-suave);border-radius:var(--d-rs);padding:2px;box-sizing:content-box}

/* --- Cobro --- */
.demo-cobro{position:absolute;inset:0;background:rgba(42,31,34,.35);backdrop-filter:blur(2px);display:grid;place-items:center;padding:clamp(14px,3vw,30px);overflow:auto}
/* IMPRESCINDIBLE: la regla de arriba fija `display`, y una regla del autor
   gana a la hoja del navegador. Sin esto, `hidden` no oculta nada y la capa
   se queda encima de la demo tapándola con un recuadro vacío. */
.demo-cobro[hidden]{display:none}
.dco{width:100%;max-width:560px}
.dco-panel{background:var(--d-s1);border:1px solid var(--d-borde);border-radius:calc(var(--d-r) + 6px);padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.dco-cabeza{background:var(--d-s2);border-radius:var(--d-r);padding:18px;text-align:center;margin-bottom:18px}
.dco-etq{margin:0;font-size:10.5px;letter-spacing:.18em;color:var(--d-txt-d)}
.dco-total{margin:6px 0 0;font-size:clamp(32px,5vw,50px);line-height:1;letter-spacing:-.02em}
.dco-metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
.dco-met{padding:0 12px;min-height:46px;border-radius:var(--d-rs);border:1px solid var(--d-borde);background:var(--d-s2);font-size:13.5px;color:var(--d-txt-t)}
.dco-met--act{background:var(--d-s3);color:var(--d-txt);border-color:var(--d-borde-f)}
.dco-mixto{margin:12px 0 0;text-align:center;font-size:13px;font-weight:500;color:var(--d-txt-t)}
.dco-est{margin:20px 0;text-align:center;font-size:13.5px;color:var(--d-txt-d)}
.dco-acciones{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;border-top:1px solid var(--d-borde);padding-top:16px}
.dco-btn{min-height:48px;padding:0 20px;border:0;border-radius:var(--d-rs);background:var(--d-ac);color:var(--d-ac-txt);font-size:14px;display:inline-flex;align-items:center;gap:9px}
.dco-btn[disabled]{opacity:.42;cursor:not-allowed}
.dco-btn-sec{min-height:48px;padding:0 18px;border-radius:var(--d-rs);border:1px solid var(--d-borde-f);background:var(--d-s2);font-size:14px;color:var(--d-txt-t);display:inline-flex;align-items:center;gap:9px}

/* Cobro del móvil: pantalla completa, no diálogo */
.dco--movil{max-width:334px}
.dcm{background:var(--d-bg);border:1px solid var(--d-borde-f);border-radius:26px;padding:14px 0 18px;overflow:hidden}
.dcm-barra{display:flex;align-items:center;justify-content:space-between;padding:0 16px 14px;border-bottom:1px solid var(--d-borde);font-size:15px}
.dcm-cancelar{background:none;border:0;font-size:15px;color:var(--d-txt-t);padding:0}
.dcm-etq{margin-top:18px;text-align:center}
.dcm-total{margin:6px 0 20px;text-align:center;font-size:38px;line-height:1;letter-spacing:-.03em}
.dcm-metodos{display:flex;margin:0 14px;padding:4px;border-radius:var(--d-rs);background:var(--d-s2);gap:2px}
.dcm-met{flex:1;text-align:center;padding:11px 2px;border-radius:calc(var(--d-rs) - 2px);font-size:11.5px;color:var(--d-txt-t)}
.dcm-met--act{background:var(--d-ac);color:var(--d-ac-txt)}
.dcm-pregunta{margin:16px 14px 8px;font-size:12.5px;color:var(--d-txt-t)}
.dcm-campo{margin:0 14px}
.dcm-campo input{width:100%;text-align:center;background:var(--d-s2);border:1px solid var(--d-borde);border-radius:var(--d-rs);padding:16px 12px;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:22px;color:var(--d-txt);outline:none}
.dcm-campo input::placeholder{color:var(--d-txt-d)}
.dcm-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 14px 0}
.dcm-chip{min-height:46px;border-radius:var(--d-rs);border:0;background:var(--d-s2);font-size:14px;color:var(--d-txt)}
.dcm-chip:hover{background:var(--d-s3)}
.dcm-mixto{margin:16px 14px;text-align:center;font-size:13.5px;color:var(--d-ac)}
.dcm-cambio,.dcm-falta{margin:0 14px 12px;text-align:center;font-size:14px;color:var(--d-exito)}
.dcm-falta{color:var(--d-alerta)}
.dcm-cambio strong,.dcm-falta strong{font-size:18px}
.dcm-confirmar{display:block;width:calc(100% - 28px);margin:0 14px;min-height:54px;border:0;border-radius:var(--d-rs);background:var(--d-ac);color:var(--d-ac-txt);font-size:16px}
.dcm-confirmar[disabled]{opacity:.42;cursor:not-allowed}

/* Ticket */
.dtk{max-width:330px;margin:0 auto}
.dtk-papel{background:#fff;color:#1a1a1a;border-radius:var(--d-r) var(--d-r) 0 0;padding:22px 20px;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:11.5px;line-height:1.55}
.dtk-negocio{margin:0 0 12px;text-align:center;font-family:Archivo,sans-serif;font-size:16px;font-weight:600;letter-spacing:-.02em}
.dtk-meta{display:flex;justify-content:space-between;gap:10px;color:#555}
.dtk-meta-l{margin:0;color:#555}
.dtk-sep{border-top:1px dashed #bbb;margin:10px 0}
.dtk-l{display:flex;justify-content:space-between;gap:12px}
.dtk-l--sub{color:#555;padding-left:10px}
.dtk-l--tot{font-weight:600;font-size:13px}
.dtk-l--cambio{color:#0b6d4d}
.dtk-pie{margin:0;text-align:center;color:#555}
.dtk-acciones{display:flex;gap:9px;padding:14px;background:var(--d-s1);border:1px solid var(--d-borde);border-top:0;border-radius:0 0 calc(var(--d-r) + 6px) calc(var(--d-r) + 6px)}
.dtk-acciones button{flex:1;justify-content:center}

/* --- Sincronización --- */
.sinc{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--borde-fuerte);padding-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,52px)}
.sinc-t{margin:0;font-size:clamp(22px,2.8vw,38px);line-height:1.05;font-weight:500;letter-spacing:-.03em;max-width:16ch}
.sinc-p{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--tinta-suave);max-width:48ch}
.sinc-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.sinc-lista li{border-top:1px solid var(--borde);padding:14px 0;font-size:15px;line-height:1.6;color:var(--tinta-suave)}
.sinc-lista li:first-child{border-top:0;padding-top:0}
.sinc-lista strong{color:var(--tinta);font-weight:500}
.sinc-pie{grid-column:1/-1;margin:0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;color:var(--tinta-tenue)}

/* --- Apariencia: vive junto a la demo, plegada por defecto --------------
   Va aquí y no en un tramo aparte porque el efecto se ve en la demo: si el
   control está a dos pantallas de distancia, cambias el tema y no ves nada. */
.apar-caja{margin-top:18px;border:1px solid var(--borde);background:var(--superficie)}
.apar-resumen{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:16px 44px 16px 18px;min-height:44px;position:relative}
.apar-resumen::-webkit-details-marker{display:none}
.apar-resumen>span:first-child{font-size:16px;letter-spacing:-.01em}
.apar-resumen-sub{font-size:13.5px;color:var(--tinta-tenue)}
.apar-resumen::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:1px solid var(--acento);border-bottom:1px solid var(--acento);transform:translateY(-70%) rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.apar-caja[open] .apar-resumen::after{transform:translateY(-20%) rotate(225deg)}
.apar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,44px);padding:6px 18px 22px;border-top:1px solid var(--borde)}
.apar-grupo{min-width:0}
.apar-grupo--ancho{grid-column:span 2}
.apar-lbl{margin:14px 0 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.apar-lbl--2{margin-top:22px}
.apar-temas{display:flex;flex-wrap:wrap;gap:10px}
.apar-tema{display:flex;flex-direction:column;gap:8px;padding:7px;min-height:44px;background:none;border:1px solid var(--borde);cursor:pointer;color:var(--tinta-suave)}
.apar-tema:hover{border-color:var(--borde-fuerte)}
.apar-tema--activo{border-color:var(--acento);color:var(--tinta)}
/* Miniatura con forma de app: lateral, dos renglones y un botón de acento. */
.apar-mini{display:flex;width:96px;height:58px;border:1px solid;overflow:hidden}
.apar-mini-lat{flex:0 0 26px;border-right:1px solid;display:flex;flex-direction:column;gap:4px;padding:6px 4px}
.apar-mini-lat i{display:block;height:4px;border-radius:2px;opacity:.85}
.apar-mini-lat i:first-child{opacity:1}
.apar-mini-cuerpo{flex:1;display:flex;flex-direction:column;gap:5px;padding:7px 6px}
.apar-mini-cuerpo i{display:block;height:4px;border-radius:2px;opacity:.5}
.apar-mini-cuerpo i:first-child{width:70%}
.apar-mini-cuerpo i:nth-child(2){width:45%}
.apar-mini-cuerpo b{margin-top:auto;display:block;height:11px;border-radius:3px}
.apar-tema-nombre{font-size:12px}
.apar-acentos{display:flex;flex-wrap:wrap;gap:8px}
.apar-acento{width:44px;height:44px;min-height:44px;border:1px solid var(--borde-fuerte);cursor:pointer;padding:0}
.apar-acento--activo{outline:2px solid var(--tinta);outline-offset:2px}
.apar-perillas{display:flex;gap:6px}
.apar-perilla{padding:0 15px;min-height:44px;background:none;border:1px solid var(--borde);font-family:inherit;font-size:14px;color:var(--tinta-suave);cursor:pointer}
.apar-perilla:hover{border-color:var(--borde-fuerte)}
.apar-perilla--activa{background:var(--acento);border-color:var(--acento);color:var(--fondo)}
.apar-nota{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--tinta-tenue);max-width:40ch}

/* --- Selector de giro --- */
.giro-zona{border-top:1px solid var(--borde);padding:clamp(18px,2.4vw,28px) 0 clamp(20px,2.6vw,30px)}
.giro-lbl{margin:0 0 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.giro-sel{display:flex;flex-wrap:wrap;gap:6px}
.giro-chip{padding:0 15px;min-height:44px;background:none;border:1px solid var(--borde);color:var(--tinta-suave);font-family:inherit;font-size:14px;cursor:pointer;transition:border-color .3s ease,color .3s ease,background .3s ease}
.giro-chip:hover{border-color:var(--borde-fuerte);color:var(--tinta)}
.giro-chip--activo{background:var(--acento);border-color:var(--acento);color:var(--fondo)}
.giro-frase{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--tinta-tenue);min-height:1.6em}

/* --- Aviso de datos ficticios --- */
.demo-aviso{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--tinta-tenue);max-width:60ch;border-left:2px solid var(--borde-fuerte);padding-left:14px}

/* --- Panel de giro (sugerencias reales del programa) --- */
.giro-panel{margin-top:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,64px);border-top:1px solid var(--borde-fuerte);padding-top:clamp(24px,3vw,40px)}
.giro-panel-t{margin:0 0 20px;grid-column:1/-1;font-size:clamp(20px,2.6vw,34px);line-height:1.1;font-weight:500;letter-spacing:-.03em;max-width:24ch}
.giro-sug{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.giro-sug li{border-top:1px solid var(--borde);padding:15px 0 15px 16px;position:relative;font-size:15.5px;line-height:1.6;color:var(--tinta-suave)}
.giro-sug li:first-child{border-top:0;padding-top:0}
.giro-sug li::before{content:"";position:absolute;left:0;top:24px;width:5px;height:5px;background:var(--acento)}
.giro-sug li:first-child::before{top:9px}
.giro-deps-zona{min-width:0}
.giro-deps-lbl{margin:0 0 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.giro-deps{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.giro-dep{padding:7px 12px;background:var(--superficie2);border:1px solid var(--borde);font-size:13.5px;color:var(--tinta-suave)}
.giro-dep--vacio{background:none;border-style:dashed;max-width:40ch;line-height:1.5}
.giro-deps-nota{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--tinta-tenue);max-width:42ch}

/* --- Invitación a contacto --- */
.adapta-cta{margin-top:clamp(36px,5vw,72px);border-top:1px solid var(--borde-fuerte);border-bottom:1px solid var(--borde-fuerte);padding:clamp(24px,4vw,48px) 0;display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,56px);align-items:flex-end}
.adapta-cta-t{flex:1 1 320px;margin:0;font-size:clamp(21px,3vw,38px);line-height:1.1;font-weight:500;letter-spacing:-.03em;max-width:18ch}
.adapta-cta-p{flex:2 1 340px;margin:0;font-size:15.5px;line-height:1.6;color:var(--tinta-suave);max-width:52ch}
.adapta-cta-b{flex:1 1 100%;display:inline-flex;align-items:center;gap:10px;min-height:52px;font-size:16px;color:var(--acento)}

/* --- Cerrar el día --- */
.cierre{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,44px)}
.cierre-caja{border-top:1px solid var(--borde-fuerte);padding-top:clamp(20px,2.6vw,32px)}
.cierre-etq{margin:0 0 18px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.cierre-lbl{margin:0;font-size:13.5px;color:var(--tinta-tenue)}
.cierre-esperado{margin:4px 0 20px;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(30px,4.4vw,52px);line-height:1;letter-spacing:-.035em}
.cierre-campo{display:flex;flex-direction:column;gap:7px;max-width:280px}
.cierre-campo span{font-size:13px;color:var(--tinta-suave)}
.cierre-campo input{background:var(--superficie);border:1px solid var(--borde-fuerte);padding:0 14px;min-height:50px;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:17px;color:var(--tinta);outline:none}
.cierre-campo input:focus{border-color:var(--acento)}
.corte-dif{margin:14px 0 0;font-size:17px;letter-spacing:-.01em;color:var(--tinta-tenue);min-height:1.5em}
.corte-dif--ok{color:var(--exito)}
.corte-dif--sobra,.corte-dif--falta{color:var(--acento)}
.cierre-mini{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:18px}
.cierre-mini div{display:flex;flex-direction:column;gap:3px}
.cierre-mini span{font-size:12.5px;color:var(--tinta-tenue)}
.cierre-mini strong{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:22px;font-weight:500;letter-spacing:-.02em}
.cierre-nota{margin:16px 0 0;font-size:14.5px;line-height:1.65;color:var(--tinta-suave);max-width:46ch}
.cierre-nota b{color:var(--tinta);font-weight:500}

/* --- Preguntas --- */
.faq{margin-top:clamp(28px,4vw,52px);max-width:82ch}
.faq-i{border-top:1px solid var(--borde)}
.faq-i:last-of-type{border-bottom:1px solid var(--borde)}
.faq-i summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;min-height:44px;font-size:clamp(16px,1.7vw,21px);line-height:1.35;letter-spacing:-.02em;position:relative}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:1px solid var(--acento);border-bottom:1px solid var(--acento);transform:translateY(-70%) rotate(45deg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq-i[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq-i summary:hover{color:var(--acento)}
.faq-i p{margin:0 0 22px;font-size:15.5px;line-height:1.7;color:var(--tinta-suave);max-width:64ch}
.faq-pie{margin:clamp(24px,3vw,40px) 0 0;font-size:15.5px;color:var(--tinta-suave)}
.faq-pie a{color:var(--acento);border-bottom:1px solid var(--borde-fuerte)}

/* --- Descargas: dos columnas con peso, no un titular flotando ---------- */
.descarga{background:var(--tinta);color:var(--fondo)}
.descarga-caja{max-width:1560px;margin:0 auto;padding:clamp(48px,8vw,110px) 24px}
.desc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,5vw,88px);align-items:start}
.desc-t{margin:0;font-size:clamp(32px,5.4vw,86px);line-height:.98;font-weight:500;letter-spacing:-.045em;max-width:13ch;text-wrap:balance}
.desc-p{margin:clamp(20px,3vw,34px) 0 0;font-size:16.5px;line-height:1.6;color:var(--superficie3);max-width:44ch}
.desc-datos{margin:clamp(24px,3vw,40px) 0 0;padding-top:20px;border-top:1px solid rgba(224,213,194,.28);display:flex;flex-direction:column;gap:11px}
.desc-datos div{display:flex;justify-content:space-between;gap:20px;max-width:44ch}
.desc-datos dt{margin:0;font-size:14.5px;color:var(--borde-fuerte)}
.desc-datos dd{margin:0;font-size:14.5px}
.desc-izq{min-width:0}
.desc-der{display:flex;flex-direction:column;gap:0}
.desc-op{border-top:1px solid rgba(224,213,194,.28);padding:clamp(20px,2.6vw,30px) 0}
.desc-op-etq{margin:0 0 12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--borde-fuerte)}
.desc-op-t{margin:0;font-size:clamp(20px,2.2vw,28px);line-height:1.1;font-weight:500;letter-spacing:-.02em}
.desc-op-p{margin:10px 0 18px;font-size:15px;line-height:1.6;color:var(--superficie3);max-width:40ch}
.desc-op-b{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.desc-op-b--pendiente{border:1px dashed var(--borde-fuerte);color:var(--borde-fuerte)}
.desc-ayuda{margin:clamp(22px,3vw,34px) 0 0;padding-top:20px;border-top:1px solid rgba(224,213,194,.28);font-size:15px;line-height:1.6;color:var(--superficie3);max-width:44ch}
.desc-ayuda a{color:var(--fondo);border-bottom:1px solid var(--borde-fuerte)}

/* --- Estrecho ------------------------------------------------------------
   La demo de ESCRITORIO en un teléfono no puede mantener sus tres columnas:
   se salía de la pantalla y hacía que TODA la página se desplazara de lado.
   Aquí se apila y la lateral pasa a ser una tira que se arrastra. */
@media (max-width:900px){
  /* La interfaz de escritorio NO se encoge para caber en un teléfono: eso la
     deforma y deja de parecerse al programa. Se conserva su ancho mínimo y
     se desplaza dentro de su propio marco, como mirar un monitor por una
     ventana. Por eso la demo abre en "Celular" en pantallas estrechas. */
  .demo-pc{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dpc{min-width:720px}
  .demo-marco[data-vista="pc"]::after{
    content:"Desliza para ver toda la pantalla";
    position:absolute;left:0;right:0;bottom:0;padding:7px 12px;
    background:var(--d-s2);border-top:1px solid var(--d-borde);
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--d-txt-d);text-align:center;pointer-events:none;
  }
  .dpc-cols{grid-template-columns:186px 1fr 236px}
  .demo-movil{padding-bottom:12px}
  /* Las etiquetas de cinta no caben en una línea a 390px. */
  .cinta{flex-wrap:wrap;gap:8px 12px}
  .cinta-etq{white-space:normal}
  .cinta-regla{min-width:40px}
}
.apar-grupo{min-width:0}
.dmv-dep-nom{color:var(--d-txt-t)}
/* Aviso de demo no cargada: tiene que verse, no esconderse en la consola. */
.demo-falla{margin:0;padding:clamp(24px,4vw,48px);font-size:15.5px;line-height:1.7;color:var(--acento);text-align:center}
.demo-falla code{font-family:'IBM Plex Mono',monospace;font-size:.92em;background:var(--superficie2);padding:2px 6px}
.dcm-cambio--vacio{opacity:0}
.dmv-hoja--vacia{opacity:.75}
.giro-zona--seccion{border-top:0;border-bottom:1px solid var(--borde);padding-top:0;margin-top:clamp(28px,4vw,48px)}

/* Anotaciones junto al teléfono: el aire lateral pasa a decir algo. */
.demo-movil{align-items:center;gap:clamp(24px,4vw,64px)}
.dmv-notas{display:none;margin:0;padding:0;list-style:none;flex:0 1 300px;max-width:34ch}
.dmv-nota{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--d-borde)}
.dmv-nota:first-child{border-top:0;padding-top:0}
.dmv-nota-n{font-size:11px;letter-spacing:.1em;color:var(--d-ac);padding-top:3px}
.dmv-nota b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.dmv-nota small{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--d-txt-t)}
@media (min-width:900px){ .dmv-notas{display:block} }

/* ============================================================================
   MOVIMIENTO — la cinta como hilo continuo
   ============================================================================ */

/* Base sin JS: TODO visible. Si GSAP no carga o el usuario pidió menos
   movimiento, la página se lee igual; solo falta el movimiento. */
.linea{display:block;overflow:hidden}
.linea-i{display:block}

/* --- El raíl ------------------------------------------------------------
   Un hilo de 1px pegado al margen izquierdo con los números de tramo
   enganchados. Es lo único que relaciona la página entera; sin él cada
   sección aparecía por su cuenta. */
.rail{position:fixed;left:26px;top:0;bottom:0;width:26px;z-index:30;display:none;pointer-events:none;flex-direction:column;align-items:center;justify-content:center;gap:0}
.rail-fondo{position:absolute;left:12px;top:12vh;bottom:12vh;width:1px;background:var(--borde)}
.rail-linea{position:absolute;left:12px;top:12vh;bottom:12vh;width:1px;background:var(--acento);transform:scaleY(0);transform-origin:top center}
.rail-marca{position:relative;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--tinta-tenue);background:var(--fondo);padding:7px 0;transition:color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);transform-origin:center}
.rail-marca--viva{color:var(--acento);transform:scale(1.28)}
/* El raíl necesita un margen PROPIO. Si solo se posiciona encima, se monta
   sobre el texto en cuanto la ventana no es enorme. Se le abre un carril
   real desplazando la página: así el hilo vive en el margen y las secciones
   a sangre tampoco tocan el borde izquierdo, que refuerza la idea de cinta. */
@media (min-width:1180px){
  .rail{display:flex}
  body{padding-left:64px}
  .cabecera-caja,.tramo,.precio-caja,.descarga-caja,.pie-caja,.flujo-cabeza{padding-left:12px;padding-right:36px}
  .flujo-pista{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){ .rail-marca{transition:none} }

/* --- Tramo horizontal: una venta de principio a fin --------------------- */
.flujo{position:relative;overflow:hidden;padding:clamp(40px,7vw,96px) 0 clamp(48px,8vw,110px);border-top:1px solid var(--borde)}

/* CLAVE del tramo fijado: tiene que medir UNA pantalla exacta.
   Antes era más alto que el viewport, así que al quedar fijado arriba los
   visuales de cada paso (el cambio, el ticket) caían por debajo del borde y
   solo aparecían al terminar de recorrerlo — justo lo contrario de lo que
   debe pasar. Ahora la cabecera ocupa lo que necesita y la pista se queda
   con todo el alto restante. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  /* El padding superior deja sitio a la barra pegajosa: sin él, el titular
     del tramo queda por debajo de ella justo al fijarse. */
  .flujo{height:100vh;padding:64px 0 0;display:flex;flex-direction:column;justify-content:flex-start}
  /* `width:100%` es necesario: en un contenedor flex en columna, el
     `margin:0 auto` de la cabecera gana a `align-items:stretch`, así que se
     encogía a su contenido y quedaba centrada, desalineada de la pista. */
  .flujo-cabeza{flex:0 0 auto;width:100%;padding-top:clamp(20px,3vh,40px);padding-bottom:clamp(14px,2.4vh,28px)}
  .flujo-cabeza .seccion-t{font-size:clamp(24px,3.4vw,46px)}
  .flujo-cabeza .cinta{margin-bottom:clamp(14px,2.6vh,32px)}
  .flujo-guia{margin-top:12px;font-size:16px}
  .flujo-avance{margin-top:14px}
  .flujo-pista{flex:1 1 auto;min-height:0;align-items:stretch;padding-bottom:clamp(20px,3vh,44px)}
  .flujo-paso{padding-top:18px}
  .flujo-t{font-size:clamp(20px,2vw,27px)}
  .flujo-p{margin:12px 0 18px;font-size:15px}
  .flujo-visual{min-height:0;flex:1 1 auto;overflow:hidden}
}
.flujo-cabeza{max-width:1560px;margin:0 auto;padding:0 24px clamp(32px,5vw,64px)}
.flujo-guia{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:18px 0 0;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--tinta-suave);max-width:56ch}
.flujo-guia-pista{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-tenue)}
.flujo-guia-pista::after{content:" ↓"}
.flujo-pista{display:flex;gap:clamp(18px,2.4vw,40px);padding:0 24px;will-change:transform}
.flujo-paso{flex:0 0 clamp(280px,74vw,420px);display:flex;flex-direction:column;border-top:1px solid var(--borde-fuerte);padding-top:22px;opacity:.5;transition:opacity .6s ease}
.flujo-paso--vivo,.sin-gsap .flujo-paso{opacity:1}
.flujo-n{margin:0 0 14px;font-size:11px;letter-spacing:.18em;color:var(--acento)}
.flujo-t{margin:0;font-size:clamp(21px,2.4vw,32px);line-height:1.08;font-weight:500;letter-spacing:-.03em;max-width:16ch}
.flujo-p{margin:14px 0 26px;font-size:15.5px;line-height:1.6;color:var(--tinta-suave);max-width:38ch}
.flujo-visual{margin-top:auto;background:var(--superficie);border:1px solid var(--borde);padding:18px;display:flex;flex-direction:column;gap:10px;min-height:150px;justify-content:center}
.flujo-paso--cta{justify-content:center;border-top-color:var(--acento)}
.flujo-cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;font-size:17px;color:var(--acento)}

/* Piezas de los visuales del flujo */
.fv-barra{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1.5px solid var(--acento-borde,rgba(107,34,51,.38));border-radius:999px;background:var(--superficie2)}
.fv-lupa{width:13px;height:13px;border:1.5px solid var(--tinta-tenue);border-radius:50%;position:relative;flex:0 0 auto}
.fv-lupa::after{content:"";position:absolute;right:-4px;bottom:-3px;width:5px;height:1.5px;background:var(--tinta-tenue);transform:rotate(45deg)}
.fv-cod{flex:1;min-width:0;font-size:11px;letter-spacing:.04em;color:var(--tinta-tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-tecla{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--tinta-tenue);white-space:nowrap}
.fv-linea{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--borde)}
.fv-linea--act{background:var(--superficie2);box-shadow:inset 3px 0 0 var(--acento);border-bottom:0}
.fv-linea b{display:block;font-size:14px;font-weight:500}
.fv-linea small{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tinta-tenue)}
.fv-pill{padding:4px 12px;border-radius:999px;background:var(--superficie3);font-size:12.5px;letter-spacing:.08em;white-space:nowrap}
.fv-metodos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fv-met{padding:11px 8px;text-align:center;border:1px solid var(--borde);background:var(--superficie2);font-size:12.5px;color:var(--tinta-suave)}
.fv-met--act{background:var(--superficie3);color:var(--tinta);border-color:var(--borde-fuerte)}
.fv-mixto{margin:4px 0 0;text-align:center;font-size:12.5px;color:var(--tinta-suave)}
.fv-cambio{align-items:center;text-align:center;gap:6px}
.fv-cambio-etq{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:var(--tinta-tenue)}
.fv-cambio-n{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(34px,4.4vw,54px);line-height:1;letter-spacing:-.03em;color:var(--exito)}
.fv-ticket{background:#fff;color:#1a1a1a;padding:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.5}
.fv-tk-neg{margin:0 0 8px;text-align:center;font-family:Archivo,sans-serif;font-size:14px;font-weight:600}
.fv-tk-sep{border-top:1px dashed #bbb;margin:8px 0}
.fv-tk-l{display:flex;justify-content:space-between;gap:10px;color:#555}
.fv-tk-tot{color:#1a1a1a;font-weight:600;font-size:12.5px}
.fv-tk-pie{margin:8px 0 0;text-align:center;color:#555}

/* Estrecho: carrusel táctil, sin fijar el scroll. Fijarlo en un teléfono es
   donde estos efectos se sienten rotos. */
/* MOVIL Y TABLET: los pasos se APILAN en vertical.
   Se probó como tira que se arrastra y no funciona: al deslizar hacia abajo
   —que es lo que hace todo el mundo— la página pasa de largo y no ves ni uno
   de los cinco pasos. Una tira horizontal dentro de una página que se
   desplaza en vertical obliga a adivinar el gesto. Apilados se leen todos,
   que es de lo que se trataba. */
@media (max-width:1023px){
  .flujo-pista{flex-direction:column;overflow:visible;gap:clamp(28px,5vw,44px);padding-bottom:0}
  .flujo-paso{flex:1 1 auto;opacity:1;max-width:56ch}
  .flujo-visual{min-height:0}
  .flujo-guia-pista{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flujo-pista{flex-direction:column;overflow:visible;gap:36px}
  .flujo-paso{flex:1 1 auto;opacity:1;max-width:56ch}
  .flujo-guia-pista{display:none}
}

/* ============================================================================
   CERRAR EL DÍA — portada de las pantallas reales de Corte y Reportes
   ============================================================================ */
.cierre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,3vw,56px)}
.cierre-caja{border-top:1px solid var(--borde-fuerte);padding-top:clamp(20px,2.6vw,32px);min-width:0}
.cierre-etq{margin:0 0 20px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.ct-lbl{margin:0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-tenue)}
.ct-hero{background:var(--superficie);border:1px solid var(--borde);padding:clamp(18px,2.4vw,26px)}
.ct-cifra{margin:8px 0 0;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(34px,4.4vw,54px);line-height:1;letter-spacing:-.035em;color:var(--exito)}
.ct-desglose{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:9px}
.ct-desglose div{display:flex;justify-content:space-between;gap:16px}
.ct-desglose dt{margin:0;font-size:14px;color:var(--tinta-suave)}
.ct-desglose dd{margin:0;font-size:14px}
.ct-modal{margin-top:18px;background:var(--superficie);border:1px solid var(--borde-fuerte);padding:clamp(18px,2.4vw,26px)}
.ct-modal-t{margin:0;font-size:19px;font-weight:500;letter-spacing:-.02em}
.ct-modal-p{margin:8px 0 18px;font-size:14.5px;line-height:1.55;color:var(--tinta-suave)}
.ct-esperado{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--superficie2);padding:14px 16px;margin-bottom:16px}
.ct-esperado span{font-size:15px}
.ct-esperado strong{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;color:var(--exito)}
.ct-campo{display:block}
.ct-campo-lbl{display:block;margin-bottom:7px;font-size:14px;color:var(--tinta-suave)}
.ct-campo-caja{display:flex;align-items:center;gap:10px;border:1.5px solid var(--acento-borde,rgba(107,34,51,.38));background:var(--superficie2);padding:0 14px}
.ct-campo-caja i{font-style:normal;font-size:17px;color:var(--tinta-tenue)}
.ct-campo-caja input{flex:1;min-width:0;background:none;border:0;outline:none;padding:15px 0;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:18px;color:var(--tinta)}
.corte-dif{margin:14px 0 0;font-size:16px;font-weight:500;color:var(--tinta-tenue);min-height:1.5em}
/* Mismos nombres que el programa: Sobrante en frío, Faltante en alerta. */
.corte-dif--ok{color:var(--exito)}
.corte-dif--sobra{color:#1d4ed8}
.corte-dif--falta{color:var(--acento)}
.rp-fila{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.rp-hero{background:var(--superficie);border:1px solid var(--borde);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;justify-content:center}
.rp-cifra{margin:8px 0 0;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.035em;color:var(--acento)}
.rp-sub{margin:10px 0 0;font-size:12.5px;color:var(--tinta-tenue)}
.rp-lado{display:flex;flex-direction:column;gap:12px}
.rp-mini{flex:1;background:var(--superficie);border:1px solid var(--borde);padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.rp-mini-n{margin:6px 0 0;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(22px,2.6vw,32px);line-height:1;letter-spacing:-.03em}
.rp-mini--ok .rp-mini-n{color:var(--exito)}
.rp-narrativa{margin:26px 0 14px;font-size:19px;font-weight:500;letter-spacing:-.02em}
.rp-tabla{width:100%;border-collapse:collapse;font-size:14px}
.rp-tabla th{text-align:right;padding:0 0 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--tinta-tenue);border-bottom:1px solid var(--borde)}
.rp-tabla th:first-child{text-align:left}
.rp-tabla td{padding:13px 0;text-align:right;border-bottom:1px solid var(--borde)}
.rp-tabla td:first-child{text-align:left;position:relative;padding-right:16px}
.rp-nom{display:block}
.rp-barra{display:block;height:3px;margin-top:7px;background:var(--acento);opacity:.55}
.rp-gan{color:var(--exito)}
.cierre-nota{margin:18px 0 0;font-size:14.5px;line-height:1.65;color:var(--tinta-suave);max-width:52ch}
.cierre-nota b{color:var(--tinta);font-weight:500}
@media (max-width:520px){ .rp-fila{grid-template-columns:1fr} }

/* --- Preguntas: el ancho se usa, no se deja muerto --- */
.preg-cabeza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,72px);align-items:start}
.preg-lado{border-top:1px solid var(--borde-fuerte);padding-top:20px}
.preg-lado-t{margin:0;font-size:19px;font-weight:500;letter-spacing:-.02em}
.preg-lado-p{margin:10px 0 16px;font-size:15px;line-height:1.6;color:var(--tinta-suave);max-width:40ch}
.preg-lado-b{display:inline-flex;align-items:center;gap:9px;min-height:48px;font-size:16px;color:var(--acento)}
.preg-datos{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:9px}
.preg-datos div{display:flex;justify-content:space-between;gap:16px}
.preg-datos dt{margin:0;font-size:14px;color:var(--tinta-suave)}
.preg-datos dd{margin:0;font-size:14px;color:var(--acento)}
/* Rejilla, NO `columns`. Con columnas CSS, al abrir una pregunta el
   contenido se reparte de nuevo entre columnas y las demás saltan de sitio
   bajo el dedo del usuario. Con grid cada pregunta se queda donde está. */
.faq{margin-top:clamp(28px,4vw,52px);max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,34ch),1fr));gap:0 clamp(24px,4vw,72px);align-content:start}
.faq-i:last-of-type{border-bottom:0}
.faq-i:nth-last-child(-n+2){border-bottom:1px solid var(--borde)}
@media (max-width:820px){
  .faq-i:nth-last-child(-n+2){border-bottom:0}
  .faq-i:last-of-type{border-bottom:1px solid var(--borde)}
}

/* La introducción de cada tramo repartía titular arriba y párrafo debajo,
   dejando media pantalla muerta a la derecha. En pantallas anchas van en
   paralelo: el aire pasa a ser una decisión y no un sobrante. */
@media (min-width:1000px){
  .demo-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,80px);align-items:end}
  .demo-intro .seccion-p{margin-top:0;padding-bottom:6px}
  .entrada{align-items:end}
}

/* Barra de avance del tramo horizontal. No es adorno: saber cuánto queda es
   lo que evita que un tramo fijado se sienta como un secuestro. */
.flujo-avance{margin-top:22px;height:2px;background:var(--borde);max-width:340px;overflow:hidden}
.flujo-avance-i{display:block;height:100%;background:var(--acento);transform:scaleX(0);transform-origin:left center}
@media (max-width:1023px){ .flujo-avance{display:none} }
@media (prefers-reduced-motion:reduce){ .flujo-avance{display:none} }

/* La tira se arrastra con el ratón donde es un desplazador (no fijada). */
@media (max-width:1023px){
  .flujo-pista{cursor:grab}
  .flujo-pista--agarrada{cursor:grabbing;scroll-snap-type:none;user-select:none}
  .flujo-guia-pista::after{content:" — arrastra"}
}

/* ============================================================================
   PÁGINAS LEGALES Y CONTACTO
   ============================================================================ */
.lg-cabeza{padding-bottom:clamp(28px,4vw,52px)}
.lg-intro{display:grid;gap:clamp(20px,3vw,56px)}
@media (min-width:1000px){ .lg-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end} .lg-intro .seccion-p{margin-top:0;padding-bottom:6px} }
.lg-aviso{margin:clamp(24px,3vw,40px) 0 0;max-width:72ch;border:1px dashed var(--acento);padding:16px 18px;font-size:14.5px;line-height:1.65;color:var(--acento)}
.lg-aviso strong{font-weight:600}

.lg-cuerpo{border-top:1px solid var(--borde-fuerte)}
.lg-caja{max-width:1560px;margin:0 auto;padding:0 24px clamp(56px,8vw,120px);display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,72px);align-items:flex-start}
.lg-indice{flex:1 1 230px;min-width:0;position:sticky;top:76px;padding-top:clamp(24px,3vw,44px)}
.lg-indice-t{margin:0 0 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.lg-indice-l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.lg-indice-l a{display:flex;gap:11px;align-items:baseline;min-height:44px;padding:6px 0 6px 13px;font-size:14.5px;line-height:1.35;color:var(--tinta-suave);border-left:2px solid var(--borde);transition:border-color .35s ease,color .35s ease}
.lg-indice-l a .num{font-size:11px;color:var(--tinta-tenue)}
.lg-indice-l a:hover{color:var(--tinta)}
.lg-ind--vivo{border-left-color:var(--acento) !important;color:var(--tinta) !important}
.lg-ind--vivo .num{color:var(--acento)}

.lg-texto{flex:3 1 560px;min-width:0;padding-top:clamp(24px,3vw,44px);max-width:72ch}
.lg-sec{border-top:1px solid var(--borde);padding:clamp(26px,3.6vw,50px) 0;scroll-margin-top:88px}
.lg-sec:first-child{border-top:0;padding-top:0}
.lg-n{margin:0 0 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--acento)}
.lg-t{margin:0 0 16px;font-size:clamp(21px,2.6vw,34px);line-height:1.08;font-weight:500;letter-spacing:-.03em;max-width:22ch}
.lg-guia{margin:0 0 16px;font-size:16px;line-height:1.65;color:var(--tinta-suave);max-width:64ch}
.lg-relleno{margin:0;padding-left:16px;border-left:2px solid var(--borde-fuerte);font-size:15px;line-height:1.7;color:var(--tinta-tenue);max-width:64ch}
.lg-relleno-etq{display:block;margin-bottom:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
.lg-cierre{margin:clamp(32px,4vw,56px) 0 0;padding-top:22px;border-top:1px solid var(--borde-fuerte);font-size:15.5px;line-height:1.6;color:var(--tinta-suave)}
.lg-cierre a{color:var(--acento);border-bottom:1px solid var(--borde-fuerte)}

/* --- Contacto --- */
.cto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,80px);margin-top:clamp(36px,5vw,80px);align-items:start}
.cto-etq{margin:0 0 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.cto-principal{border-top:1px solid var(--borde-fuerte);padding-top:20px}
.cto-correo{display:inline-block;font-size:clamp(22px,3.2vw,44px);line-height:1.1;letter-spacing:-.03em;color:var(--acento);word-break:break-word;min-height:48px}
.cto-p{margin:16px 0 0;font-size:15.5px;line-height:1.65;color:var(--tinta-suave);max-width:44ch}
.cto-p--corto{max-width:38ch}
.cto-lado{display:flex;flex-direction:column}
.cto-caso{border-top:1px solid var(--borde);padding:20px 0}
.cto-caso:first-child{border-top-color:var(--borde-fuerte)}
.cto-caso-t{margin:0;font-size:18px;font-weight:500;letter-spacing:-.02em}
.cto-caso-p{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--tinta-suave);max-width:46ch}
.cto-caso-p strong{color:var(--tinta);font-weight:500}
.cto-pendiente{margin-top:clamp(36px,5vw,72px);border-top:1px solid var(--borde);padding-top:20px}
.cto-marcador{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border:1px dashed var(--borde-fuerte);font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-tenue)}
@media (max-width:900px){ .lg-indice{position:static} }

/* Texto de las páginas legales con contenido real. */
.lg-p{margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--tinta-suave);max-width:64ch}
.lg-p:last-child{margin-bottom:0}
.lg-p strong{color:var(--tinta);font-weight:500}
.lg-p a{color:var(--acento);border-bottom:1px solid var(--borde-fuerte)}
.lg-p--lbl{margin-bottom:10px}
.lg-lista{margin:0 0 18px;padding:0;list-style:none;max-width:64ch}
.lg-lista li{position:relative;padding:0 0 0 18px;margin-bottom:11px;font-size:16px;line-height:1.65;color:var(--tinta-suave)}
.lg-lista li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;background:var(--acento)}
.lg-lista strong{color:var(--tinta);font-weight:500}
.lg-lista a{color:var(--acento);border-bottom:1px solid var(--borde-fuerte)}
.lg-nota{margin:0 0 16px;padding:14px 16px;background:var(--superficie2);border-left:2px solid var(--borde-fuerte);font-size:15px;line-height:1.65;color:var(--tinta-tenue);max-width:64ch}
.lg-nota:last-child{margin-bottom:0}

/* --- Baja de cuenta desde la web ---------------------------------------
   Vive dentro de la sección 02 de eliminar-cuenta.html. Usa las mismas
   variables que el resto del sitio: no introduce ni un color nuevo.
   El botón de confirmar es el ÚNICO elemento en rojo peligro de toda la
   web, y es a propósito: es la única acción irreversible que se puede
   ejecutar desde aquí. */
.bajaweb{margin:0 0 18px;max-width:64ch}
.bajaweb-abrir{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--borde-fuerte);background:var(--superficie);color:var(--tinta);font-family:inherit;font-size:15.5px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.bajaweb-abrir:hover{background:var(--superficie2);border-color:var(--acento)}
.bajaweb-abrir[aria-expanded="true"]{background:var(--superficie2)}
.bajaweb-form{margin-top:18px;padding:22px;background:var(--superficie);border:1px solid var(--borde-fuerte)}
.bajaweb-lbl{display:block;margin:0 0 8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.bajaweb-lbl strong{color:var(--tinta);font-weight:500}
.bajaweb-lbl:not(:first-child){margin-top:20px}
.bajaweb-campo{display:block;width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px;background:var(--fondo);border:1px solid var(--borde-fuerte);color:var(--tinta);font-family:inherit;font-size:16px}
.bajaweb-campo:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(107,34,51,.12)}
/* El código se lee dígito a dígito: monoespaciada y con aire entre cifras. */
.bajaweb-campo--codigo{font-family:'IBM Plex Mono',monospace;font-size:22px;letter-spacing:.42em;text-align:center;max-width:11ch}
.bajaweb-btn{display:block;width:100%;min-height:52px;margin-top:20px;padding:0 20px;border:1px solid var(--acento);background:var(--acento);color:#fff;font-family:inherit;font-size:16px;font-weight:500;cursor:pointer;transition:opacity .18s ease}
.bajaweb-btn:hover{opacity:.9}
.bajaweb-btn:disabled{opacity:.5;cursor:default}
.bajaweb-btn--peligro{background:#b3261e;border-color:#b3261e}
.bajaweb-volver{display:block;width:100%;min-height:46px;margin-top:10px;border:0;background:none;color:var(--tinta-suave);font-family:inherit;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bajaweb-eco{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--tinta-suave)}
.bajaweb-eco strong{color:var(--tinta);font-weight:500;word-break:break-all}
.bajaweb-aviso{margin:20px 0 0;padding:14px 16px;background:var(--superficie2);border-left:2px solid #b3261e;font-size:14.5px;line-height:1.6;color:var(--tinta-suave)}
.bajaweb-estado{margin:14px 0 0;min-height:20px;font-size:14.5px;line-height:1.5;color:var(--tinta-suave)}
.bajaweb-estado--error{color:#b3261e}
.bajaweb-final{margin:0;font-size:16px;line-height:1.7;color:var(--tinta-suave)}
@media (max-width:520px){ .bajaweb-form{padding:18px} }

/* --- Botones de descarga vivos (pos.html) -----------------------------
   Conviven con .desc-op-b--pendiente, que se conserva por si vuelve a
   hacer falta marcar algo como no disponible. Van sobre el fondo oscuro
   de la sección de descargas, de ahí el crema sobre borde claro. */
.desc-op-b--vivo{border:1px solid var(--fondo);background:var(--fondo);color:var(--acento);text-decoration:none;font-weight:500;transition:opacity .18s ease}
.desc-op-b--vivo:hover{opacity:.88}
.desc-op-nota{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--superficie3);max-width:42ch}
.desc-op-nota a{color:var(--fondo);text-underline-offset:3px}

/* --- Yaxo en la tarjeta del asistente (index.html) --------------------
   El hueco era un recuadro punteado con la leyenda de marcador. Ahora
   lleva al personaje, así que deja de ser un placeholder y pasa a ser
   contenido: fondo sólido y sin borde de trazos. */
.prod-asis-hueco--yaxo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;border:0;background:none;padding:clamp(24px,3vw,40px) 0}
/* Sin recuadro: el borde lo heredaba del hueco de marcador, y encerrar a la
   mascota en una caja la hacia parecer una imagen pegada en vez de parte de
   la pagina. */
.yaxo{width:clamp(150px,17vw,230px);height:auto;display:block}
.yaxo-pie{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-tenue)}

/* --- Lista numerada de las páginas legales ---------------------------- */
.lg-lista--num{list-style:decimal}
.lg-enlace-fuerte{font-weight:500;color:var(--acento);text-underline-offset:3px}
/* Huella SHA-256: monoespaciada y partible, son 64 caracteres sin espacios. */
.lg-huella{margin:6px 0 20px;padding:12px 14px;background:var(--superficie2);font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.7;color:var(--tinta-suave);word-break:break-all}

/* --- Pasos numerados de la prueba cerrada (pos.html) ------------------
   Van sobre el fondo oscuro de la sección de descargas. El número no es
   decorativo: es lo que comunica que hay un orden y que saltárselo falla.
   Por eso es el elemento con más contraste del bloque. */
.pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.paso{display:flex;align-items:flex-start;gap:16px}
.paso-n{flex:0 0 auto;width:30px;height:30px;margin-top:11px;border-radius:50%;border:1px solid var(--fondo);color:var(--fondo);font-family:'IBM Plex Mono',monospace;font-size:13px;display:flex;align-items:center;justify-content:center}
.paso-cuerpo{min-width:0}
.paso .desc-op-nota{margin-top:10px}
@media (max-width:520px){ .paso{gap:12px} .paso-n{width:26px;height:26px;font-size:12px} }