/* dos×tres · sistema visual del sitio
   Colores del manual (dosxtres.pdf, p. 6). Roc Grotesk para titulares, Roboto Flex para texto.

   Reglas del sistema:
   1. La retícula 2×3 del isotipo es la interfaz. Sus esquinas en molinete (una recta, una redonda)
      se repiten en celdas, ventanas y paneles.
   2. Paleta del manual: pizarra oscura como fondo de marca, con la luz naranja que sale de una
      esquina (como en las páginas del manual). Naranja para la acción principal; lavanda y coral
      para celdas y detalles.
   3. Las maquetas de producto (los aplicativos) son siempre tarjetas blancas, sobre cualquier fondo. */

@view-transition { navigation: auto; }

:root {
  --pizarra: #1B3A4E;
  --pizarra-950: #0C1D29;
  --pizarra-900: #112838;
  --pizarra-700: #24475F;
  --naranja: #E3834A;
  --coral: #EF9E80;
  --lavanda: #B2BADC;
  --lavanda-honda: #A8B1D7;   /* tono sobre tono en campos de lavanda */
  --lavanda-200: #DDE1F0;
  --lavanda-100: #ECEEF7;
  --gris: #E5E5E5;
  --niebla: #F4F4F4;
  --blanco: #FFFFFF;
  --tinta: #161A28;
  --tinta-2: #4B5866;
  --tinta-3: #7A8590;
  --exito: #3E8E6E;
  --exito-claro: #DCEFE6;
  --aviso: #B4621F;
  --error: #B0461F;

  --f-titular: "roc-grotesk-wide", "Roc Grotesk Wide", "Arial Black", sans-serif;
  --f-sub: "roc-grotesk", "Roc Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 28px;
  --molinete-a: var(--r) 0 var(--r) 0;   /* celda izquierda del isotipo */
  --molinete-b: 0 var(--r) 0 var(--r);   /* celda derecha del isotipo */
  --molinete-s: 14px 3px 14px 3px;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --sec: clamp(80px, 11vw, 152px);

  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e-cajon: cubic-bezier(0.32, 0.72, 0, 1);

  --c-titular: var(--pizarra);
  --c-aspa: var(--naranja);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 17px/1.55 var(--f-texto);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, input, select, textarea, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--coral); color: var(--pizarra-950); }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--pizarra); color: var(--blanco); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.salto:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.sec { padding-block: var(--sec); }
.sec--niebla { background: var(--niebla); }
.sec--lavanda { background: var(--lavanda-100); }
.sec--oscura { background: var(--pizarra-900); color: var(--blanco); --c-titular: var(--blanco); --c-aspa: var(--coral); }

/* la luz naranja del manual: sale de una esquina del campo oscuro */
.luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.luz::before {
  content: ""; position: absolute; top: -32%; right: -18%; width: min(1100px, 95vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(227,131,74,.62), rgba(227,131,74,.26) 42%, rgba(239,158,128,.08) 64%, transparent 76%);
}

/* ---------- tipografía ---------- */
.t-xl, .t-l, .t-m, .t-s { font-family: var(--f-titular); font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; color: var(--c-titular); }
.t-xl { font-size: clamp(42px, 7.3vw, 108px); line-height: .94; }
.t-l  { font-size: clamp(34px, 4.7vw, 68px); line-height: .98; }
.t-m  { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -0.03em; }
.t-s  { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -0.02em; }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--tinta-2); max-width: 40ch; text-wrap: pretty; }
.sec--oscura .lead { color: rgba(255,255,255,.72); }
.texto { max-width: 62ch; color: var(--tinta-2); text-wrap: pretty; }
.chico { font-size: 14px; line-height: 1.45; }
.apagado { color: var(--tinta-3); }
.num { font-variant-numeric: tabular-nums; }
.nombre { white-space: nowrap; }

/* titular en dos tonos: la segunda frase baja a gris */
.dos-tonos span { display: block; color: #8A97A3; }

/* el aspa del logotipo dentro de un titular */
.aspa { display: inline-block; width: .56em; height: .56em; margin: 0 .06em 0 .1em; vertical-align: .02em; color: var(--c-aspa); }
.aspa svg { width: 100%; height: 100%; }

/* viñeta: una celda del isotipo */
.celdita { display: block; flex: none; width: 10px; height: 10px; border-radius: 3px 0 3px 0; background: var(--c-aspa); }

/* ---------- botones ---------- */
.btn {
  --bg: var(--pizarra); --fg: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 14px;
  background: var(--bg); color: var(--fg);
  font: 600 16px/1 var(--f-sub); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--e-out), background-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--naranja { --bg: var(--naranja); --fg: var(--pizarra-950); }
.btn--contorno { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--chico { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.btn--ancho { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--contorno):not(.btn--naranja):hover { --bg: var(--pizarra-700); }
  .btn--naranja:hover { --bg: #EC9461; }
  .btn--contorno:hover { --bg: color-mix(in srgb, currentColor 9%, transparent); }
}
.btn[data-cargando] { pointer-events: none; }
.btn .girando { width: 18px; height: 18px; animation: girar 700ms linear infinite; }
.enlace { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 200ms ease; }
.enlace:hover { text-decoration-color: currentColor; }

/* ---------- cabecera: barra plana de borde a borde ---------- */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--pizarra); view-transition-name: cabecera; transition: background-color 220ms ease, box-shadow 220ms ease; }
body[data-cab="oscuro"] .cab:not(.fija) { color: var(--blanco); --c-aspa: var(--coral); }
.cab.fija { background: rgba(255,255,255,.92); box-shadow: 0 1px 0 rgba(27,58,78,.1); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.cab__barra { display: flex; align-items: center; gap: 28px; height: 72px; }
.cab__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; border-radius: 8px; }
.cab__logo .iso { width: 30px; }
.cab__logo .wm { width: 104px; }
.cab__nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.cab__nav > a, .cab__nav > .desp > button {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px;
  font: 500 15px/1 var(--f-sub); text-decoration: none; background: none; border: 0; cursor: pointer;
  color: inherit; transition: background-color 160ms ease;
}
.cab__nav > a:hover, .cab__nav > .desp > button:hover, .desp.abierto > button { background: color-mix(in srgb, currentColor 9%, transparent); }
.cab__nav [aria-current="page"] { box-shadow: inset 0 -2px 0 var(--naranja); border-radius: 10px 10px 0 0; }
.cab__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cab__acciones .ingresar { font: 500 15px/1 var(--f-sub); text-decoration: none; padding: 12px 14px; border-radius: 10px; transition: background-color 160ms ease; }
.cab__acciones .ingresar:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.cab__boton-menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; cursor: pointer; place-items: center; }
.cab__boton-menu svg { width: 22px; height: 22px; }

/* desplegable de sectores */
.desp { position: relative; }
.desp > button svg { width: 14px; height: 14px; transition: transform 200ms var(--e-out); }
.desp.abierto > button svg { transform: rotate(180deg); }
.desp__panel {
  position: absolute; top: calc(100% + 10px); left: -12px; width: 520px;
  padding: 10px; border-radius: 20px; background: var(--blanco); color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(27,58,78,.08), 0 24px 60px -20px rgba(17,40,56,.35);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  transform-origin: 60px top; opacity: 0; transform: translateY(-4px) scale(.98); visibility: hidden;
  transition: opacity 160ms ease, transform 200ms var(--e-out), visibility 0s linear 200ms;
}
.desp.abierto .desp__panel { opacity: 1; transform: none; visibility: visible; transition: opacity 160ms ease, transform 200ms var(--e-out); }
.desp__item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px; border-radius: 14px; text-decoration: none; }
.desp__item:hover, .desp__item:focus-visible, .desp__item[aria-current="page"] { background: var(--niebla); }
.desp__item strong { display: block; font: 600 15px/1.2 var(--f-sub); color: var(--pizarra); margin-bottom: 3px; }
.desp__item span { font-size: 13.5px; line-height: 1.35; color: var(--tinta-2); }
.desp__item .mini-iso { width: 40px; margin-top: 2px; }

/* menú móvil */
.hoja { --c-aspa: var(--coral); position: fixed; inset: 0; z-index: 60; background: var(--pizarra-900); color: var(--blanco); display: flex; flex-direction: column; padding: 14px var(--gutter) 28px; overflow-y: auto; overscroll-behavior: contain; transform: translateY(-100%); visibility: hidden; transition: transform 380ms var(--e-cajon), visibility 0s linear 380ms; }
.hoja.abierta { transform: none; visibility: visible; transition: transform 420ms var(--e-cajon); }
.hoja__arriba { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.hoja__arriba .wm { width: 110px; }
.hoja nav { margin-top: 24px; display: grid; }
.hoja nav > a, .hoja__grupo { font: 600 28px/1.15 var(--f-titular); letter-spacing: -0.03em; text-decoration: none; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); }
.hoja__grupo { padding-bottom: 6px; }
.hoja nav > a.sub { font: 500 17px/1.3 var(--f-sub); letter-spacing: 0; color: rgba(255,255,255,.72); padding: 8px 0 8px 16px; border: 0; }
.hoja nav > a.sub:last-of-type { padding-bottom: 16px; }
.hoja__pie { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
.hoja__cerrar { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); display: grid; place-items: center; cursor: pointer; color: var(--blanco); }
.hoja__cerrar svg { width: 22px; height: 22px; }

/* ---------- héroe: campo de pizarra con la luz naranja ---------- */
.heroe { --c-titular: var(--blanco); --c-aspa: var(--coral); position: relative; isolation: isolate; overflow: clip; background: var(--pizarra-900); color: var(--blanco); padding-top: clamp(120px, 11.5vw, 156px); }
.heroe .lead { color: rgba(255,255,255,.74); }
.heroe h1 { max-width: 13ch; }
.heroe--inicio h1 { margin-top: 28px; }
.heroe--inicio .lead { margin-top: clamp(24px, 2.6vw, 36px); max-width: 46ch; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.heroe__nota { margin-top: 16px; font-size: 14.5px; color: rgba(255,255,255,.6); }
.pastilla {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: 14px; line-height: 1.2; text-decoration: none; color: rgba(255,255,255,.88);
  transition: background-color 200ms ease;
}
.pastilla:hover { background: rgba(255,255,255,.12); }
.pastilla b { font: 600 12px/1 var(--f-sub); background: var(--coral); color: var(--pizarra-950); padding: 5px 8px; border-radius: 999px; }
.heroe__escena { position: relative; margin-top: clamp(48px, 5vw, 64px); margin-bottom: clamp(-260px, -16vw, -96px); }
.heroe + .puente { padding-top: calc(clamp(96px, 16vw, 260px) + var(--sec) * .5); }

/* páginas internas */
.heroe--interna { padding-bottom: clamp(72px, 9vw, 120px); }
.heroe--interna h1 { max-width: 16ch; }
.heroe--interna .lead { margin-top: 24px; max-width: 52ch; }
.heroe--claro { --c-titular: var(--pizarra); --c-aspa: var(--naranja); background: var(--niebla); color: var(--tinta); }
.heroe--claro .lead { color: var(--tinta-2); }
.heroe--claro .luz::before { background: radial-gradient(closest-side, rgba(178,186,220,.7), rgba(178,186,220,.25) 50%, transparent 74%); }
.sector-heroe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }

/* ---------- ventana de producto (maqueta) ---------- */
.ventana {
  position: relative; border-radius: 22px 0 22px 0; overflow: hidden;
  background: var(--blanco); color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -24px rgba(5,15,24,.55), 0 12px 32px -12px rgba(5,15,24,.4);
  font-family: var(--f-texto); font-size: 13px; line-height: 1.4;
}
.ventana__barra { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 14px; background: var(--niebla); border-bottom: 1px solid var(--gris); }
.semaforo { display: flex; gap: 7px; }
.semaforo i { width: 11px; height: 11px; border-radius: 50%; background: #D5D8DC; }
.ventana__url { flex: 1; max-width: 340px; margin-inline: auto; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--blanco); color: var(--tinta-3); font-size: 12px; box-shadow: inset 0 0 0 1px var(--gris); }
.ventana__cuerpo { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 520px; }

.app-lateral { border-right: 1px solid var(--gris); padding: 18px 16px; display: flex; flex-direction: column; gap: 18px; background: #FAFAFA; }
.app-negocio { display: flex; align-items: center; gap: 10px; }
.app-negocio .av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px 3px 10px 3px; background: var(--pizarra); color: var(--blanco); font: 600 12px/1 var(--f-sub); }
.app-negocio strong { display: block; font: 600 13.5px/1.2 var(--f-sub); color: var(--pizarra); }
.app-negocio small { color: var(--tinta-3); font-size: 11.5px; }
.app-modulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.app-modulos span { aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 5px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--gris); color: var(--tinta-2); font-size: 10px; font-weight: 500; }
.app-modulos span svg { width: 17px; height: 17px; }
.app-modulos span:nth-child(1), .app-modulos span:nth-child(6) { border-radius: 12px 2px 12px 2px; }
.app-modulos span:nth-child(2), .app-modulos span:nth-child(5) { border-radius: 12px; }
.app-modulos span:nth-child(3), .app-modulos span:nth-child(4) { border-radius: 2px 12px 2px 12px; }
.app-modulos span.activo { background: var(--pizarra); color: var(--blanco); box-shadow: none; }
.app-menu { display: grid; gap: 2px; }
.app-menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--tinta-2); font-size: 13px; }
.app-menu li svg { width: 16px; height: 16px; color: var(--tinta-3); }
.app-menu li.activo { background: var(--blanco); color: var(--pizarra); font-weight: 600; box-shadow: 0 0 0 1px var(--gris); }
.app-menu li.activo svg { color: var(--naranja); }

.app-principal { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.app-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-cabeza h3 { font: 600 19px/1.2 var(--f-sub); color: var(--pizarra); letter-spacing: -0.01em; }
.app-cabeza p { color: var(--tinta-3); font-size: 12.5px; }
.app-boton { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--pizarra); color: var(--blanco); font: 600 12.5px/1 var(--f-sub); white-space: nowrap; }
.app-boton svg { width: 14px; height: 14px; }
.app-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.kpi { padding: 14px 16px; border-radius: 14px; background: var(--niebla); }
.kpi small { display: block; color: var(--tinta-2); font-size: 12px; }
.kpi strong { display: block; margin-top: 6px; font: 600 22px/1.1 var(--f-sub); color: var(--pizarra); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 11.5px; font-weight: 600; }
.kpi--fuerte { background: var(--pizarra); }
.kpi--fuerte small { color: rgba(255,255,255,.7); }
.kpi--fuerte strong { color: var(--blanco); }
.kpi--fuerte em { color: var(--coral); }
.app-graf { display: grid; grid-template-columns: repeat(13, 1fr); align-items: end; gap: 6px; height: 92px; padding: 0 2px; border-bottom: 1px solid var(--gris); }
.app-graf i { display: block; border-radius: 5px 5px 0 0; background: var(--lavanda-200); height: var(--h); }
.app-graf i.alto { background: var(--lavanda); }
.app-graf i.ahora { background: var(--naranja); }
.app-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.app-tabla th { text-align: left; font-weight: 500; color: var(--tinta-3); padding: 0 8px 8px; font-size: 11.5px; }
.app-tabla td { padding: 9px 8px; border-top: 1px solid #EFEFEF; white-space: nowrap; }
.app-tabla td:nth-child(2) { white-space: normal; }
.app-tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.app-tabla tr.nueva { animation: filaNueva 900ms var(--e-out) both; }
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; transition: background-color 300ms ease, color 300ms ease; }
.estado svg { width: 12px; height: 12px; }
.estado--ok { background: var(--exito-claro); color: var(--exito); }
.estado--envio { background: var(--lavanda-200); color: var(--pizarra); }
.estado--envio .girando { animation: girar 800ms linear infinite; }
.app-aviso { position: absolute; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: var(--molinete-s); background: var(--pizarra); color: var(--blanco); box-shadow: 0 18px 40px -12px rgba(12,29,41,.55); font-size: 12.5px; max-width: 300px; opacity: 0; transform: translateY(10px); transition: opacity 300ms ease, transform 500ms var(--e-out); }
.app-aviso.ver { opacity: 1; transform: none; }
.app-aviso .ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(239,158,128,.18); color: var(--coral); }
.app-aviso .ic svg { width: 16px; height: 16px; }
.app-aviso strong { display: block; font: 600 13px/1.25 var(--f-sub); }
.app-aviso span { color: rgba(255,255,255,.7); }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes filaNueva { from { opacity: 0; } }

/* ---------- las seis celdas del isotipo ---------- */
.cabeza-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.cabeza-sec .lead { justify-self: end; }
.reticula { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.celda {
  --fondo: var(--pizarra); --tx: var(--blanco); --tx2: rgba(255,255,255,.72);
  position: relative; display: flex; flex-direction: column; min-height: clamp(320px, 29vw, 400px);
  padding: clamp(22px, 2.4vw, 32px); background: var(--fondo); color: var(--tx);
  border-radius: var(--r); text-decoration: none;
  transition: transform 300ms var(--e-out);
}
.celda:nth-child(1), .celda:nth-child(6) { border-radius: var(--molinete-a); }
.celda:nth-child(3), .celda:nth-child(4) { border-radius: var(--molinete-b); }
.celda--lavanda { --fondo: var(--lavanda); --tx: var(--pizarra-950); --tx2: rgba(12,29,41,.72); }
.celda--coral { --fondo: var(--coral); --tx: var(--pizarra-950); --tx2: rgba(12,29,41,.76); }
.celda h3 { font: 600 clamp(21px, 1.9vw, 26px)/1.1 var(--f-titular); letter-spacing: -0.03em; padding-right: 48px; }
.celda p { margin-top: 10px; color: var(--tx2); font-size: 15.5px; line-height: 1.45; max-width: 32ch; }
.celda__vis { margin-top: auto; padding-top: 24px; }
.celda__mas { position: absolute; top: clamp(22px, 2.4vw, 32px); right: clamp(22px, 2.4vw, 32px); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tx) 12%, transparent); transition: transform 300ms var(--e-out), background-color 200ms ease; }
.celda__mas svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .celda:hover { transform: translateY(-4px); }
  .celda:hover .celda__mas { transform: rotate(90deg); background: color-mix(in srgb, var(--tx) 22%, transparent); }
}

/* mini-interfaces dentro de cada celda: tarjetas blancas */
.celda__vis > * { background: var(--blanco); color: var(--tinta); border-radius: var(--molinete-s); padding: 14px 16px; font-size: 12.5px; box-shadow: 0 14px 28px -22px rgba(12,29,41,.45); }
.v-ride header { display: flex; justify-content: space-between; align-items: center; font: 600 12px/1 var(--f-sub); color: var(--pizarra); }
.v-ride .clave { margin-top: 10px; font-size: 10.5px; letter-spacing: .04em; color: var(--tinta-3); word-break: break-all; line-height: 1.35; }
.v-ride footer { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.v-ride footer b { font: 600 18px/1 var(--f-sub); color: var(--pizarra); font-variant-numeric: tabular-nums; }
.v-caja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.v-caja span { height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--niebla); font: 600 15px/1 var(--f-sub); color: var(--pizarra); }
.v-caja .total { grid-column: 1 / -1; height: auto; padding: 12px 14px; display: flex; justify-content: space-between; background: var(--pizarra); color: var(--blanco); border-radius: 10px 3px 10px 3px; }
.v-caja .total small { font-size: 12.5px; }
.v-stock { display: grid; gap: 10px; }
.v-stock div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.v-stock b { font-weight: 600; color: var(--pizarra); font-variant-numeric: tabular-nums; }
.v-stock i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--niebla); overflow: hidden; }
.v-stock i::before { content: ""; display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--lavanda); }
.v-stock .bajo i::before { background: var(--naranja); }
.v-mesa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.v-mesa span { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 9px; background: var(--niebla); font-weight: 500; }
.v-mesa span b { font: 600 13px/1 var(--f-sub); color: var(--pizarra); font-variant-numeric: tabular-nums; }
.v-rol { display: grid; gap: 8px; }
.v-rol div { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #EFEFEF; }
.v-rol div:last-child { border: 0; padding: 2px 0 0; font: 600 15px/1.2 var(--f-sub); color: var(--pizarra); }
.v-rol span { color: var(--tinta-2); }
.v-rol div:last-child span { color: inherit; }
.v-asiento div { display: grid; grid-template-columns: 1fr 56px 56px; gap: 8px; padding: 6px 0; }
.v-asiento div + div { border-top: 1px solid #EFEFEF; }
.v-asiento .cab-t { font-size: 11px; color: var(--tinta-3); padding-top: 0; }
.v-asiento .der { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- recorrido de una venta ---------- */
.recorrido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pasos { display: grid; gap: 4px; margin-top: 36px; }
.paso { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; width: 100%; padding: 16px 18px 16px 14px; border: 0; border-radius: 18px; background: none; text-align: left; cursor: pointer; color: var(--tinta-2); transition: background-color 200ms ease, color 200ms ease; }
.paso:hover { background: rgba(27,58,78,.05); }
.paso[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 0 0 1px rgba(27,58,78,.07), 0 14px 30px -18px rgba(17,40,56,.3); }
.paso__n { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px 3px 11px 3px; display: grid; place-items: center; background: var(--gris); color: var(--pizarra); font: 600 14px/1 var(--f-sub); transition: background-color 200ms ease, color 200ms ease; }
.paso[aria-selected="true"] .paso__n { background: var(--pizarra); color: var(--blanco); }
.paso strong { font: 600 18px/1.25 var(--f-sub); color: var(--pizarra); letter-spacing: -0.01em; }
.paso span { font-size: 15px; line-height: 1.45; }
.paso__barra { position: absolute; left: 72px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--gris); overflow: hidden; opacity: 0; }
.paso[aria-selected="true"] .paso__barra { opacity: 1; }
.paso__barra i { display: block; height: 100%; width: 100%; background: var(--naranja); transform: scaleX(0); transform-origin: left; }
.paso[aria-selected="true"] .paso__barra i { animation: llenar var(--dur, 4200ms) linear forwards; }
.recorrido.pausa .paso__barra i { animation-play-state: paused; }
@keyframes llenar { to { transform: scaleX(1); } }

.escenario { position: relative; min-height: 470px; display: grid; }
.escenario__fondo { position: absolute; inset: 0; border-radius: var(--molinete-b); background: var(--pizarra); overflow: hidden; }
.escenario__fondo::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; right: -30%; top: -40%; background: radial-gradient(closest-side, rgba(227,131,74,.5), transparent 70%); }
.escenario__pausa { position: absolute; z-index: 2; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: var(--blanco); cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--e-out); }
.escenario__pausa:hover { background: rgba(255,255,255,.2); }
.escenario__pausa:active { transform: scale(.94); }
.escenario__pausa svg { width: 16px; height: 16px; }
.lamina { grid-area: 1 / 1; position: relative; align-self: center; justify-self: center; width: min(400px, calc(100% - 48px)); margin-block: 40px; background: var(--blanco); border-radius: 18px 4px 18px 4px; box-shadow: 0 30px 60px -30px rgba(12,29,41,.55); padding: 22px; font-size: 13.5px; opacity: 0; transform: translateY(14px) scale(.98); filter: blur(4px); transition: opacity 260ms ease, transform 420ms var(--e-out), filter 260ms ease; pointer-events: none; }
.lamina.activa { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: 90ms; }
.lamina h4 { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 15px/1.2 var(--f-sub); color: var(--pizarra); margin-bottom: 14px; }
.lamina h4 small { font: 500 12px/1 var(--f-texto); color: var(--tinta-3); }
.lin { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px dashed #E2E2E2; }
.lin span small { display: block; color: var(--tinta-3); font-size: 12px; }
.lin b { font-weight: 500; font-variant-numeric: tabular-nums; }
.lin--total { border-top: 1.5px solid var(--pizarra); margin-top: 4px; padding-top: 12px; }
.lin--total span, .lin--total b { font: 600 17px/1 var(--f-sub); color: var(--pizarra); }
.lamina__pie { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.sello { position: absolute; right: 20px; top: 54px; transform: rotate(-9deg); padding: 6px 10px; border: 2px solid var(--exito); color: var(--exito); border-radius: 8px; font: 700 12px/1 var(--f-sub); letter-spacing: .06em; opacity: .9; }
.lamina .clave { font-size: 11px; letter-spacing: .02em; color: var(--tinta-2); word-break: break-all; background: var(--niebla); padding: 10px 12px; border-radius: 10px; margin: 12px 0; line-height: 1.4; }
.stock-fila { display: grid; grid-template-columns: 1fr 70px; gap: 6px 12px; padding: 10px 0; border-top: 1px solid #EFEFEF; align-items: center; }
.stock-fila .cuenta { text-align: right; font: 600 16px/1 var(--f-sub); color: var(--pizarra); font-variant-numeric: tabular-nums; }
.stock-fila .cuenta s { color: var(--tinta-3); font: 400 13px/1 var(--f-texto); margin-right: 6px; }
.stock-fila .barra { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: var(--niebla); overflow: hidden; }
.stock-fila .barra i { display: block; height: 100%; width: var(--p); background: var(--lavanda); border-radius: inherit; }
.stock-fila.bajo .barra i { background: var(--naranja); }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--niebla); color: var(--tinta-2); }
.etiqueta svg { width: 14px; height: 14px; flex: none; }
.etiqueta--aviso { background: #FBE7DA; color: var(--aviso); }
.asiento { width: 100%; border-collapse: collapse; font-size: 13px; }
.asiento th { font-weight: 500; color: var(--tinta-3); text-align: left; font-size: 11.5px; padding-bottom: 6px; }
.asiento td { padding: 9px 0; border-top: 1px solid #EFEFEF; }
.asiento .der { text-align: right; font-variant-numeric: tabular-nums; }
.asiento td.sangria { padding-left: 18px; }
.asiento tfoot td { border-top: 1.5px solid var(--pizarra); font: 600 14px/1 var(--f-sub); color: var(--pizarra); padding-top: 12px; }

/* ---------- sectores con pestañas ---------- */
.selector { position: relative; display: inline-flex; padding: 5px; border-radius: 16px; background: var(--niebla); box-shadow: inset 0 0 0 1px rgba(27,58,78,.06); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.selector::-webkit-scrollbar { display: none; }
.selector button { position: relative; z-index: 1; height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: none; font: 500 15px/1 var(--f-sub); color: var(--tinta-2); cursor: pointer; white-space: nowrap; transition: color 200ms ease; }
.selector button[aria-selected="true"] { color: var(--blanco); }
.selector__marca { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 12px; background: var(--pizarra); transition: transform 380ms var(--e-out), width 380ms var(--e-out); }
.sector-panel { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--molinete-a); background: var(--niebla); }
.sector-panel h3 { margin-bottom: 16px; }
.lista-check { display: grid; gap: 12px; margin: 22px 0 30px; }
.lista-check li { display: grid; grid-template-columns: 10px 1fr; gap: 14px; color: var(--tinta-2); line-height: 1.45; }
.lista-check .celdita { margin-top: .48em; }
.lista-check strong { color: var(--tinta); font-weight: 600; }
.sector-panel__vis { display: grid; place-items: center; min-height: 380px; }

/* maqueta de teléfono */
.telefono { width: min(290px, 100%); border-radius: 42px; padding: 10px; background: var(--pizarra-950); box-shadow: 0 40px 70px -34px rgba(12,29,41,.55); }
.telefono__pantalla { border-radius: 33px; background: var(--blanco); overflow: hidden; padding: 46px 18px 18px; position: relative; min-height: 540px; font-size: 13px; }
.telefono__pantalla::before { content: ""; position: absolute; top: 12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: var(--pizarra-950); }
.tel-titulo { font: 600 20px/1.15 var(--f-sub); color: var(--pizarra); letter-spacing: -0.01em; margin-bottom: 14px; }
.tel-campo { padding: 11px 13px; border-radius: 12px; background: var(--niebla); margin-bottom: 8px; }
.tel-campo small { display: block; color: var(--tinta-3); font-size: 11px; }
.tel-campo b { font-weight: 500; }
.tel-items { margin: 12px 0; }
.tel-boton { position: absolute; left: 18px; right: 18px; bottom: 18px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--pizarra); color: var(--blanco); font: 600 15px/1 var(--f-sub); }

/* tarjetas de interfaz (sectores y plataforma) */
.tarjeta-app { width: min(420px, 100%); background: var(--blanco); border-radius: 20px 4px 20px 4px; padding: 22px; box-shadow: 0 30px 60px -32px rgba(12,29,41,.45), 0 0 0 1px rgba(27,58,78,.05); font-size: 13.5px; }
.tarjeta-app h4 { font: 600 16px/1.2 var(--f-sub); color: var(--pizarra); display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.tarjeta-app + .tarjeta-app { margin-top: -36px; margin-left: 64px; position: relative; }
.pila { display: grid; justify-items: start; }
.margen { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--niebla); }
.margen b { font: 600 22px/1 var(--f-sub); color: var(--pizarra); }
.margen i { flex: 1; height: 8px; border-radius: 8px; background: var(--gris); overflow: hidden; }
.margen i::before { content: ""; display: block; width: 32%; height: 100%; background: var(--naranja); border-radius: inherit; }
.reportes { display: grid; gap: 8px; }
.reportes div { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--niebla); }
.reportes .ic { width: 34px; height: 34px; border-radius: 10px 3px 10px 3px; display: grid; place-items: center; background: var(--blanco); color: var(--pizarra); }
.reportes .ic svg { width: 17px; height: 17px; }
.reportes strong { display: block; font-weight: 600; color: var(--pizarra); }
.reportes small { color: var(--tinta-3); }
.platos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.platos span { display: grid; gap: 6px; padding: 12px 10px; border-radius: 12px; background: var(--niebla); font-size: 12.5px; line-height: 1.25; font-weight: 500; }
.platos span b { font: 600 14px/1 var(--f-sub); color: var(--pizarra); }
.platos span.sel { background: var(--coral); }
.comanda { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--gris); }

/* ---------- SRI ---------- */
.sri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.comprobantes { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.14); }
.comprobantes li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; gap: 14px; align-items: center; font-size: 16px; color: rgba(255,255,255,.86); }
.comprobantes li:nth-child(odd) { padding-right: 16px; }
.papel { --c-aspa: var(--naranja); position: relative; background: var(--blanco); color: var(--tinta); border-radius: 4px 4px 0 0; padding: 30px 30px 40px; box-shadow: 0 50px 80px -30px rgba(0,0,0,.6); font-size: 13px; transform: rotate(2.2deg); max-width: 470px; justify-self: center; width: 100%; }
.papel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 6px, var(--blanco) 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 6px, var(--blanco) 0) 7px 0 / 14px 10px repeat-x; }
.papel__cab { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gris); }
.papel__cab .wm { width: 92px; color: var(--pizarra); }
.papel__cab div:last-child { text-align: right; font-size: 12px; color: var(--tinta-2); }
.papel__cab strong { display: block; font: 600 14px/1.3 var(--f-sub); color: var(--pizarra); }
.papel .apagado { color: var(--tinta-3); }
.papel dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 14px 0; font-size: 12.5px; }
.papel dt { color: var(--tinta-3); }
.papel dd { font-variant-numeric: tabular-nums; word-break: break-all; }
.papel .sello { top: 82px; right: 28px; font-size: 14px; padding: 8px 12px; }
.papel table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.papel th { text-align: left; color: var(--tinta-3); font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--gris); }
.papel td { padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.papel .der { text-align: right; font-variant-numeric: tabular-nums; }
.papel .tot td { border: 0; padding-top: 6px; white-space: nowrap; }
.papel .tot--fin td { font: 600 15px/1 var(--f-sub); color: var(--pizarra); padding-top: 12px; }

/* ---------- puesta en marcha y soporte ---------- */
.mudanza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.etapas { counter-reset: etapa; display: grid; margin-top: 36px; }
.etapas li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding-bottom: 28px; }
.etapas li::before { counter-increment: etapa; content: counter(etapa); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px 3px 12px 3px; background: var(--pizarra); color: var(--blanco); font: 600 15px/1 var(--f-sub); }
.etapas li:not(:last-child)::after { content: ""; position: absolute; left: 19.5px; top: 48px; bottom: 6px; width: 1.5px; background: repeating-linear-gradient(to bottom, var(--lavanda) 0 5px, transparent 5px 10px); }
.etapas strong { display: block; font: 600 18px/1.3 var(--f-sub); color: var(--pizarra); margin-top: 8px; }
.etapas p { color: var(--tinta-2); margin-top: 4px; max-width: 44ch; }
.chat { background: var(--blanco); border-radius: var(--molinete-b); padding: 24px; box-shadow: 0 30px 70px -40px rgba(12,29,41,.45), 0 0 0 1px rgba(27,58,78,.06); }
.chat__cab { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--gris); }
.chat__cab .iso-av { width: 42px; height: 42px; border-radius: 13px 4px 13px 4px; background: var(--pizarra); display: grid; place-items: center; }
.chat__cab .iso-av svg { width: 24px; }
.chat__cab strong { display: block; font: 600 15px/1.2 var(--f-sub); color: var(--pizarra); }
.chat__cab small { color: var(--exito); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.chat__cab small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--exito); }
.burbujas { display: grid; gap: 10px; padding-top: 18px; font-size: 14.5px; line-height: 1.45; }
.burbuja { max-width: 84%; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: var(--niebla); justify-self: start; }
.burbuja--yo { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--lavanda-200); color: var(--pizarra-950); }
.burbuja small { display: block; margin-top: 4px; font-size: 11px; opacity: .6; text-align: right; }
.garantias { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.garantias div { padding: 16px; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(27,58,78,.07); }
.garantias strong { display: block; font: 600 16px/1.25 var(--f-sub); color: var(--pizarra); }
.garantias strong svg { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; color: var(--naranja); }
.garantias span { font-size: 14px; color: var(--tinta-2); }

/* ---------- preguntas ---------- */
.preguntas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.acordeon { border-top: 1px solid var(--gris); }
.acordeon details { border-bottom: 1px solid var(--gris); interpolate-size: allow-keywords; }
.acordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; font: 600 18px/1.3 var(--f-sub); color: var(--pizarra); letter-spacing: -0.01em; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .mas { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--niebla); transition: transform 260ms var(--e-out), background-color 200ms ease; }
.acordeon summary .mas svg { width: 16px; height: 16px; }
.acordeon details[open] summary .mas { transform: rotate(45deg); background: var(--coral); }
.acordeon details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--e-out), content-visibility 320ms allow-discrete; }
.acordeon details[open]::details-content { block-size: auto; }
.acordeon .resp { padding: 0 48px 24px 0; color: var(--tinta-2); max-width: 64ch; }

/* ---------- franja naranja con una sola frase ---------- */
.declara { --c-titular: var(--pizarra-950); position: relative; isolation: isolate; overflow: clip; background: var(--naranja); color: var(--pizarra-950); }
.declara .t-xl { max-width: 15ch; letter-spacing: -0.04em; }
.declara__iso { position: absolute; z-index: -1; right: -7%; top: 50%; width: min(46vw, 640px); transform: translateY(-50%); color: var(--pizarra-950); opacity: .09; }
.declara__pie { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 980px; }
.declara__pie p { font-size: 16px; line-height: 1.45; color: rgba(12,29,41,.78); padding-top: 14px; border-top: 1.5px solid rgba(12,29,41,.25); }
.declara__pie strong { display: block; color: var(--pizarra-950); font: 600 17px/1.25 var(--f-sub); margin-bottom: 4px; }

/* ---------- cierre: pizarra con la luz desde abajo, titular a la izquierda y tarjeta de RUC ---------- */
.cierre { --c-titular: var(--blanco); position: relative; isolation: isolate; overflow: clip; background: var(--pizarra-900); color: var(--blanco); }
.cierre .luz::before { top: auto; bottom: -78%; right: -12%; width: min(1200px, 120vw); }
.cierre__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cierre .t-l { max-width: 13ch; }
.cierre .lead { margin-top: 18px; color: rgba(255,255,255,.74); }
.alta { display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 32px); background: var(--blanco); border-radius: var(--molinete-b); box-shadow: 0 30px 60px -40px rgba(12,29,41,.5); }
.alta__nota { font-size: 14px; color: var(--tinta-3); text-align: center; }

/* ---------- pie ---------- */
.pie { --c-aspa: var(--coral); background: var(--pizarra-950); color: rgba(255,255,255,.7); padding-top: clamp(56px, 7vw, 88px); }
.pie__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px 32px; }
.pie__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--blanco); text-decoration: none; border-radius: 8px; }
.pie__logo .iso { width: 32px; }
.pie__logo .wm { width: 112px; }
.pie__marca p { margin-top: 18px; max-width: 34ch; font-size: 15px; }
.pie h2 { font: 600 14px/1.2 var(--f-sub); color: var(--blanco); margin-bottom: 14px; }
.pie ul { display: grid; gap: 10px; font-size: 15px; }
.pie ul a { text-decoration: none; transition: color 160ms ease; }
.pie ul a:hover { color: var(--blanco); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px 0 32px; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }

/* ---------- plataforma ---------- */
.plataforma { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.indice { position: sticky; top: 112px; }
.indice__iso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 132px; }
.indice__iso a { aspect-ratio: 1; background: var(--gris); transition: background-color 260ms ease; }
.indice__iso a:nth-child(1), .indice__iso a:nth-child(6) { border-radius: 12px 0 12px 0; }
.indice__iso a:nth-child(2), .indice__iso a:nth-child(5) { border-radius: 12px; }
.indice__iso a:nth-child(3), .indice__iso a:nth-child(4) { border-radius: 0 12px 0 12px; }
.indice__iso a:hover { background: var(--lavanda); }
.indice__iso a.activo { background: var(--pizarra); }
.indice__iso a.activo:nth-child(4) { background: var(--coral); }
.indice ol { margin-top: 22px; display: grid; gap: 2px; }
.indice ol a { display: block; padding: 7px 0; text-decoration: none; color: var(--tinta-3); font: 500 15px/1.3 var(--f-sub); transition: color 160ms ease; }
.indice ol a:hover, .indice ol a.activo { color: var(--pizarra); }
.modulo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--gris); scroll-margin-top: 96px; }
.modulo:first-child { border-top: 0; padding-top: 0; }
.modulo h2 { margin: 10px 0 16px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.06; letter-spacing: -0.028em; }
.modulo__tag { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--f-sub); color: var(--tinta-2); }
.modulo__vis { display: grid; place-items: center; min-height: 340px; padding: clamp(24px, 3vw, 40px); border-radius: var(--molinete-b); background: var(--niebla); }
.modulo:nth-child(even) .modulo__vis { border-radius: var(--molinete-a); }

.principios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); margin-top: 48px; }
.principios li { padding: 28px 28px 8px 0; }
.principios li + li { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.14); }
.principios strong { display: block; font: 600 20px/1.2 var(--f-sub); color: var(--blanco); margin-bottom: 10px; }
.principios p { color: rgba(255,255,255,.68); font-size: 15.5px; }
.principios .mini-iso { width: 40px; margin-bottom: 22px; }

/* ---------- sector ---------- */
.plan-iso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 420px; }
.plan-iso span { aspect-ratio: 1.12; display: grid; align-content: end; padding: 14px; background: var(--blanco); color: var(--tinta-3); font: 500 13.5px/1.2 var(--f-sub); box-shadow: inset 0 0 0 1px var(--gris); }
.plan-iso span:nth-child(1), .plan-iso span:nth-child(6) { border-radius: 18px 0 18px 0; }
.plan-iso span:nth-child(2), .plan-iso span:nth-child(5) { border-radius: 18px; }
.plan-iso span:nth-child(3), .plan-iso span:nth-child(4) { border-radius: 0 18px 0 18px; }
.plan-iso span.on { background: var(--pizarra); color: var(--blanco); box-shadow: none; }
.plan-iso span.on.coral { background: var(--coral); color: var(--pizarra-950); }

.dolores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 48px; }
.dolores li { padding-top: 20px; border-top: 1.5px solid var(--pizarra); }
.dolores strong { display: block; font: 600 20px/1.2 var(--f-sub); color: var(--pizarra); margin-bottom: 10px; letter-spacing: -0.01em; }
.dolores p { color: var(--tinta-2); }

.plan-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.precio-grande { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; }
.precio-grande b { font: 600 clamp(56px, 7vw, 88px)/1 var(--f-titular); letter-spacing: -0.04em; color: var(--pizarra); }
.precio-grande span { color: var(--tinta-2); }

/* ---------- precios ---------- */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; background: var(--blanco); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(27,58,78,.08); }
.plan:nth-child(1) { border-radius: var(--molinete-a); }
.plan:nth-child(4) { border-radius: var(--molinete-b); }
.plan .mini-plan { display: grid; grid-template-columns: repeat(3, 14px); gap: 3px; margin-bottom: 22px; }
.plan .mini-plan i { width: 14px; height: 14px; background: var(--gris); }
.plan .mini-plan i:nth-child(1), .plan .mini-plan i:nth-child(6) { border-radius: 4px 0 4px 0; }
.plan .mini-plan i:nth-child(2), .plan .mini-plan i:nth-child(5) { border-radius: 4px; }
.plan .mini-plan i:nth-child(3), .plan .mini-plan i:nth-child(4) { border-radius: 0 4px 0 4px; }
.plan .mini-plan i.on { background: var(--pizarra); }
.plan h3 { font: 600 22px/1.15 var(--f-titular); letter-spacing: -0.03em; color: var(--pizarra); }
.plan > p { margin-top: 8px; font-size: 15px; color: var(--tinta-2); min-height: 3em; }
.plan .precio { margin: 22px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.plan .precio b { font: 600 46px/1 var(--f-titular); letter-spacing: -0.04em; color: var(--pizarra); }
.plan .precio span { font-size: 14.5px; color: var(--tinta-2); }
.plan .iva { font-size: 13px; color: var(--tinta-3); min-height: 0; }
.plan ul { margin: 22px 0 26px; display: grid; gap: 10px; font-size: 14.5px; }
.plan li { display: grid; grid-template-columns: 10px 1fr; gap: 12px; line-height: 1.4; }
.plan li .celdita { margin-top: .4em; }
.plan .btn { margin-top: auto; }

.tabla-comp-env { position: relative; overflow-x: auto; margin-top: 40px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(27,58,78,.1); background: var(--blanco); }
.tabla-comp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.tabla-comp th, .tabla-comp td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--gris); }
.tabla-comp th:first-child, .tabla-comp td:first-child { text-align: left; }
.tabla-comp thead th { font: 600 15px/1.2 var(--f-sub); color: var(--pizarra); background: var(--niebla); }
.tabla-comp tbody th { font-weight: 400; color: var(--tinta); }
.tabla-comp .grupo th { font: 600 13.5px/1 var(--f-sub); color: var(--tinta-3); background: #FAFAFA; padding-block: 12px; }
.tabla-comp svg { width: 20px; height: 20px; margin: auto; color: var(--pizarra); }
.tabla-comp .no { color: #C3C8CD; }
.incluye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid rgba(255,255,255,.14); }
.incluye li { padding: 22px 24px 22px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.incluye li:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); }
.incluye strong { display: block; font: 600 17px/1.25 var(--f-sub); color: var(--blanco); margin-bottom: 4px; }
.incluye span { color: rgba(255,255,255,.66); font-size: 15px; }

/* ---------- formularios ---------- */
.form { display: grid; gap: 16px; }
.form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: grid; gap: 7px; }
.campo label { font: 500 14.5px/1.2 var(--f-sub); color: var(--pizarra); }
.campo label small { font: 400 13px/1 var(--f-texto); color: var(--tinta-3); margin-left: 4px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 13px 15px; border: 0; border-radius: 13px;
  background-color: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1px #D6DADE; font-size: 16px;
  transition: box-shadow 160ms ease; appearance: none; -webkit-appearance: none;
}
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.campo select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231B3A4E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); }
.campo input:hover, .campo select:hover, .campo textarea:hover { box-shadow: inset 0 0 0 1px #AEB6BE; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--pizarra), 0 0 0 4px rgba(178,186,220,.5); }
.campo [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--error); }
.campo .err { font-size: 13.5px; color: var(--error); }
.campo .err:empty { display: none; }
.campo .ayuda { font-size: 13.5px; color: var(--tinta-3); }
.casilla { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14.5px; color: var(--tinta-2); cursor: pointer; }
.casilla input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #AEB6BE; background: var(--blanco) center/14px no-repeat; cursor: pointer; transition: background-color 160ms ease, box-shadow 160ms ease; }
.casilla input:checked { background-color: var(--pizarra); box-shadow: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-7'/></svg>"); }
.casilla input:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.casilla a { color: var(--pizarra); }
.clave-campo { position: relative; }
.clave-campo input { padding-right: 52px; }
.clave-campo button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; display: grid; place-items: center; color: var(--tinta-3); cursor: pointer; }
.clave-campo button:hover { background: var(--niebla); color: var(--pizarra); }
.clave-campo button svg { width: 20px; height: 20px; }

.contacto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.canales { display: grid; gap: 10px; margin-top: 36px; }
.canal { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(27,58,78,.08); text-decoration: none; transition: box-shadow 200ms ease; }
a.canal:hover { box-shadow: 0 0 0 1.5px var(--pizarra); }
.canal .ic { width: 44px; height: 44px; border-radius: 13px 4px 13px 4px; display: grid; place-items: center; background: var(--lavanda-100); color: var(--pizarra); }
.canal .ic svg { width: 20px; height: 20px; }
.canal strong { display: block; font: 600 16px/1.25 var(--f-sub); color: var(--pizarra); }
.canal span { font-size: 14.5px; color: var(--tinta-2); }
.panel-form { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--molinete-b); background: var(--blanco); box-shadow: 0 30px 70px -44px rgba(12,29,41,.4), 0 0 0 1px rgba(27,58,78,.07); }
.listo { display: grid; justify-items: start; gap: 14px; padding: 12px 0; }
.listo .ok { width: 56px; height: 56px; border-radius: 17px 5px 17px 5px; display: grid; place-items: center; background: var(--exito-claro); color: var(--exito); }
.listo .ok svg { width: 28px; height: 28px; }

/* ---------- acceso: registro e ingreso ---------- */
.acceso { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--blanco); }
.acceso__marca { --c-titular: var(--blanco); --c-aspa: var(--coral); position: relative; isolation: isolate; overflow: clip; background: var(--pizarra-900); color: var(--blanco); padding: 32px clamp(28px, 5vw, 72px); display: flex; flex-direction: column; }
.acceso__marca > a { color: var(--blanco); align-self: flex-start; border-radius: 8px; }
.acceso__marca > a .wm { width: 118px; }
.acceso__marca .luz::before { top: auto; bottom: -50%; right: -40%; }
.acceso__centro { margin-block: auto; padding-block: 48px; }
.acceso__centro .t-m { max-width: 14ch; }
.acceso__centro .lead { margin-top: 18px; color: rgba(255,255,255,.74); }
.acceso__centro .lista-check li { color: rgba(255,255,255,.74); }
.acceso__centro .lista-check strong { color: var(--blanco); }
.acceso__pie { font-size: 14px; color: rgba(255,255,255,.55); display: flex; gap: 20px; flex-wrap: wrap; }
.acceso__pie a { text-decoration: none; }
.acceso__pie a:hover { color: var(--blanco); }
.acceso__form { display: grid; align-content: center; padding: 40px clamp(24px, 6vw, 96px); background: var(--niebla); }
.acceso__form > div { width: 100%; max-width: 440px; margin-inline: auto; }
.acceso__form h1 { font: 600 30px/1.1 var(--f-titular); letter-spacing: -0.03em; color: var(--pizarra); }
.acceso__form .sub { margin-top: 10px; color: var(--tinta-2); }
.acceso__form .form { margin-top: 32px; }
.acceso__form .iso-form { width: 56px; margin-bottom: 28px; }
.acceso__alt { margin-top: 26px; font-size: 15px; color: var(--tinta-2); text-align: center; }
.acceso__volver { display: none; }
.progreso-iso { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; margin-bottom: 26px; }
.progreso-iso i { height: 26px; background: var(--gris); transition: background-color 360ms ease; }
.progreso-iso i:nth-child(1), .progreso-iso i:nth-child(6) { border-radius: 8px 0 8px 0; }
.progreso-iso i:nth-child(2), .progreso-iso i:nth-child(5) { border-radius: 8px; }
.progreso-iso i:nth-child(3), .progreso-iso i:nth-child(4) { border-radius: 0 8px 0 8px; }
.progreso-iso i.on { background: var(--pizarra); }
.progreso-iso i.on:nth-child(4) { background: var(--naranja); }
.modulos-ingreso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 36px; max-width: 460px; }
.modulos-ingreso span { aspect-ratio: 1.15; display: grid; align-content: space-between; padding: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font: 500 14px/1.2 var(--f-sub); color: rgba(255,255,255,.88); }
.modulos-ingreso span svg { width: 20px; height: 20px; color: var(--coral); }
.modulos-ingreso span:nth-child(1), .modulos-ingreso span:nth-child(6) { border-radius: 16px 0 16px 0; }
.modulos-ingreso span:nth-child(2), .modulos-ingreso span:nth-child(5) { border-radius: 16px; }
.modulos-ingreso span:nth-child(3), .modulos-ingreso span:nth-child(4) { border-radius: 0 16px 0 16px; }
.codigo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.codigo input { height: 60px; text-align: center; font: 600 24px/1 var(--f-sub); color: var(--pizarra); padding: 0; }

/* ---------- 404 ---------- */
.nada { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; }
.nada .reticula-vacia { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; justify-content: center; margin-bottom: 40px; }
.nada .reticula-vacia i { height: 64px; background: var(--gris); }
.nada .reticula-vacia i:nth-child(1), .nada .reticula-vacia i:nth-child(6) { border-radius: 18px 0 18px 0; }
.nada .reticula-vacia i:nth-child(2) { border-radius: 18px; background: var(--pizarra); }
.nada .reticula-vacia i:nth-child(5) { border-radius: 18px; background: transparent; box-shadow: inset 0 0 0 2px var(--naranja); }
.nada .reticula-vacia i:nth-child(3), .nada .reticula-vacia i:nth-child(4) { border-radius: 0 18px 0 18px; }
.nada .heroe__acciones { justify-content: center; }

/* ---------- entrada del héroe: la única secuencia de carga ---------- */
.entra { opacity: 0; transform: translateY(18px); }
.listo-carga .entra { animation: entrar 900ms var(--e-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.heroe__escena .ventana { opacity: 0; }
.listo-carga .heroe__escena .ventana { animation: ventana 1100ms var(--e-out) 420ms forwards; }
@keyframes entrar { to { opacity: 1; transform: none; } }
@keyframes ventana { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

/* ---------- adaptable ---------- */
@media (max-width: 1100px) {
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(n) { border-radius: var(--r); }
  .ventana__cuerpo { grid-template-columns: 200px minmax(0, 1fr); }
  .plataforma { grid-template-columns: 1fr; }
  .indice { display: none; }
}
@media (max-width: 960px) {
  .cab__nav, .cab__acciones { display: none; }
  .cab__boton-menu { display: grid; }
  .cab__barra { height: 64px; }
  .cabeza-sec, .recorrido, .sri, .mudanza, .preguntas, .contacto, .sector-panel, .sector-heroe, .modulo, .plan-fila, .cierre__in { grid-template-columns: 1fr; }
  .cabeza-sec .lead { justify-self: start; }
  .luz::before { top: -140px; right: -45%; width: 130vw; }
  .cierre .luz::before { top: auto; bottom: -45%; right: -40%; width: 150vw; }
  .declara__iso { width: 80vw; right: -30%; top: auto; bottom: -10%; transform: none; }
  .declara__pie { grid-template-columns: 1fr; gap: 0; }
  .declara__pie p { padding-block: 14px; }
  .reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .celda:nth-child(odd) { border-radius: var(--molinete-a); }
  .celda:nth-child(even) { border-radius: var(--molinete-b); }
  .ventana__cuerpo { grid-template-columns: 1fr; }
  .app-lateral { display: none; }
  .principios { grid-template-columns: 1fr 1fr; }
  .principios li { border-bottom: 1px solid rgba(255,255,255,.14); }
  .principios li:nth-child(3) { padding-left: 0; border-left: 0; }
  .dolores { grid-template-columns: 1fr; }
  .incluye { grid-template-columns: 1fr 1fr; }
  .incluye li:nth-child(n) { padding-left: 0; border-left: 0; padding-right: 16px; }
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { display: none; }
  .acceso__volver { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; color: var(--pizarra); }
  .acceso__volver .wm { width: 108px; }
  .acceso__form { align-content: start; min-height: 100svh; padding-top: 24px; }
  .pie__cols { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
  .papel { transform: none; }
  .escenario { min-height: 440px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .reticula { grid-template-columns: 1fr; }
  .celda:nth-child(n) { min-height: 0; }
  .celda__vis { padding-top: 32px; }
  .heroe__acciones .btn { flex: 1 1 auto; }
  .app-kpis { grid-template-columns: 1fr 1fr; }
  .app-kpis .kpi:nth-child(3) { display: none; }
  .app-tabla th:nth-child(2), .app-tabla td:nth-child(2) { display: none; }
  .app-principal { padding: 16px; }
  .app-cabeza .app-boton { display: none; }
  .app-aviso { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .ventana__cuerpo { min-height: 470px; }
  .comprobantes { grid-template-columns: 1fr; }
  .comprobantes li:nth-child(odd) { padding-right: 0; }
  .garantias { grid-template-columns: 1fr; }
  .planes { grid-template-columns: 1fr; }
  .form .dos { grid-template-columns: 1fr; }
  .incluye { grid-template-columns: 1fr; }
  .principios { grid-template-columns: 1fr; }
  .principios li:nth-child(n) { padding-left: 0; border-left: 0; }
  .tarjeta-app + .tarjeta-app { margin-left: 20px; }
  .telefono { width: min(270px, 100%); }
  .platos { grid-template-columns: repeat(2, 1fr); }
  .acordeon .resp { padding-right: 0; }
  .selector { display: flex; }
  .selector button { flex: 1 0 auto; padding: 0 14px; }
  .sector-panel__vis { min-height: 0; }
  .lamina { padding: 18px; }
  .sello { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .entra, .heroe__escena .ventana { opacity: 1; transform: none; }
  .lamina { filter: none; transform: none; }
  .paso__barra { display: none; }
}

/* Catálogo real; las capacidades y planes editoriales siguen siendo independientes. */
.catalogo__modulo { min-width: 0; min-height: 0; overflow-wrap: anywhere; }
.catalogo__modulo h3 { padding-right: 0; }
.catalogo__modulo img { width: 64px; height: 64px; object-fit: contain; background: var(--blanco); padding: 8px; border-radius: var(--molinete-s); margin-bottom: 24px; }
.catalogo__descripcion { margin-top: 10px; color: var(--tx2); font-size: 15.5px; line-height: 1.45; white-space: pre-line; }
.catalogo__descripcion p { margin: 0; }
.catalogo__descripcion > * + * { margin-top: 10px; }
.catalogo__descripcion ul, .catalogo__descripcion ol { padding-left: 1.3em; list-style: revert; }
.catalogo__descripcion li + li { margin-top: 4px; }
.catalogo__cta { margin-top: auto; padding-top: 24px; font: 600 15px/1.4 var(--f-sub); }
.catalogo__estado { grid-column: 1 / -1; padding: 32px; text-align: center; background: var(--niebla); border-radius: var(--r); color: var(--tinta-2); }
.catalogo__estado .btn { margin-top: 20px; }
#catalogo-t { scroll-margin-top: 100px; }
.sector-panel > * { min-width: 0; }

/* Los estados de tarifa se ajustan al ancho de las tarjetas. */
.precio, .precio-grande { flex-wrap: wrap; }
.precio [data-module-price].precio--estado, .precio-grande [data-module-price].precio--estado { font-size: clamp(16px, 1.7vw, 22px); white-space: normal; overflow-wrap: anywhere; }
[data-price-retry]:not([hidden]) { margin-top: 16px; }

.plan-fila > * { min-width: 0; }
.plan-iso span { min-width: 0; overflow-wrap: anywhere; }

/* Tarifa individual de las paginas de modulo. */
.planes--single { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.heroe--inicio > .wrap { padding-bottom: clamp(56px, 7vw, 96px); }

.funciones { grid-template-columns: repeat(2,minmax(0,1fr)); }
.funciones .celda { min-height: 360px; }
.funciones .celda__vis { max-width: 420px; width: 100%; }
@media (max-width:640px) { .funciones { grid-template-columns: minmax(0,1fr); } .funciones .celda { min-height: 320px; } }
.heroe--inicio + .puente { padding-top: var(--sec); }

/* Restaurante: capturas reales seleccionadas y miniaturas con datos de ejemplo. */
.restaurante-ceja { font: 600 11px/1.5 var(--f-sub); letter-spacing: .12em; text-transform: uppercase; }
.restaurante-heroe .restaurante-ceja { color: var(--tinta-2); }
.restaurante-heroe h1 { max-width: 13ch; margin-top: 20px; }
.restaurante-heroe h1 span { color: var(--tinta-3); }
.restaurante-heroe { padding-bottom: clamp(36px,5vw,72px); }
.restaurante-punto { width: 7px; height: 7px; background: var(--naranja); border-radius: 50%; flex: none; }
.restaurante-vistas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.restaurante-vista { display: flex; flex-direction: column; padding: clamp(22px,3vw,36px); border-radius: var(--molinete-a); min-width: 0; overflow: hidden; }
.restaurante-vista--lavanda { background: var(--lavanda); }
.restaurante-vista--coral { background: var(--coral); border-radius: var(--molinete-b); }
.restaurante-vista__texto h3 { margin-top: 14px; font: 600 clamp(26px,3vw,38px)/1.1 var(--f-titular); letter-spacing: -.035em; color: var(--pizarra-950); }
.restaurante-vista__texto p { margin-top: 16px; color: var(--pizarra); max-width: 36ch; }
.restaurante-funciones .celda { min-height: 420px; }
.restaurante-funciones .celda > .restaurante-ceja { opacity: .8; margin-bottom: 16px; }
.restaurante-funciones .celda h3 { padding-right: 0; }
.restaurante-comanda header, .restaurante-caja header { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #e9edf2; }
.restaurante-comanda header > span { color: #526579; font-size: 10px; }
.restaurante-comanda > div, .restaurante-caja > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding-block: 12px; border-bottom: 1px solid #e9edf2; }
.restaurante-comanda b { padding: 4px; background: #eef0f5; border-radius: 4px; }
.restaurante-estado { display: inline-block; font-size: 10px; color: #16613f; background: #e0f1e7; border-radius: 12px; padding: 4px 8px; }
.restaurante-funciones footer { padding-top: 10px; color: #526579; font-size: 10px; }
.restaurante-tablero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.restaurante-tablero > div { padding: 10px; background: #f4f5fb; border-radius: 8px; }
.restaurante-tablero span { display: block; font-size: 10px; color: #526579; }
.restaurante-tablero strong { display: block; margin-top: 6px; color: var(--pizarra); font: 600 17px/1.1 var(--f-sub); }
.restaurante-tablero svg, .restaurante-tablero footer { grid-column: 1 / -1; width: 100%; }
@media (max-width: 960px) { .restaurante-funciones { grid-template-columns: minmax(0,1fr); } .restaurante-funciones .celda { min-height: 300px; } .restaurante-funciones .celda__vis { max-width: 420px; width: 100%; } }
@media (max-width: 640px) {
  .restaurante-vistas { grid-template-columns: minmax(0,1fr); }
  .restaurante-heroe h1 { font-size: clamp(48px,14vw,72px); }
}

/* Maquetas HTML del estilo original, sin capturas pegadas. */
.demo-escena { margin-top: clamp(40px,5vw,64px); }
.demo-ventana .app-modulos { grid-template-columns: repeat(2,minmax(0,1fr)); }
.demo-nota { color: var(--tinta-2); font-size: 11px; line-height: 1.5; padding: 12px 16px; }
.demo-ventana .demo-nota { background: var(--niebla); }
.mesas-demo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: auto; padding-top: 30px; }
.mesa-demo { background: var(--blanco); padding: 18px; border-radius: 14px 4px 14px 4px; border-left: 3px solid var(--exito); display: flex; flex-direction: column; min-height: 160px; color: var(--pizarra); }
.mesa-demo strong { font: 600 19px/1.2 var(--f-sub); }
.mesa-demo span { align-self: start; padding: 4px 8px; font-size: 11px; border-radius: 20px; background: var(--exito-claro); color: var(--exito); margin-top: 14px; }
.mesa-demo small { margin-top: auto; padding-top: 24px; color: var(--tinta-2); font-size: 11px; }
.mesa-demo--ocupada { border-color: var(--naranja); }
.mesa-demo--ocupada span { background: #fbe7da; color: #a44321; }
.menu-demo { margin-top: auto; padding: 30px 0 0; }
.menu-demo .platos { grid-template-columns: repeat(2,minmax(0,1fr)); }
.menu-demo .platos span { min-height: 100px; background: var(--blanco); color: var(--pizarra); }
.restaurante-vista > .demo-nota { padding-inline: 0; color: var(--pizarra); }
@media (max-width:640px) {
  .demo-ventana .app-tabla { table-layout: fixed; font-size: 10px; }
  .demo-ventana .app-tabla th, .demo-ventana .app-tabla td { padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; }
  .demo-ventana .estado { padding: 3px 5px; font-size: 9px; gap: 3px; }
  .demo-ventana .app-aviso { display: none; }
  .mesa-demo { padding: 12px; min-height: 130px; }
  .mesa-demo strong { font-size: 16px; }
}

.producto-vista .demo-escena { margin-top: 0; }

/* Recreaciones HTML de las capturas reales; el marco conserva el estilo del sitio. */
.system-preview { color: #2d4052; background: #f4f6fa; border-radius: 24px 0 24px 0; overflow: hidden; border: 1px solid #dfe5f1; text-align: left; font: 400 12px/1.45 var(--f-texto); box-shadow: 0 22px 54px #061a2426; }
.system-preview *, .system-preview *::before, .system-preview *::after { box-sizing: border-box; }
.system-preview h4 { font: 500 12px/1.4 var(--f-texto); color: #2d4052; }
.system-preview .sys-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.system-preview .demo-nota { background: white; border-top: 1px solid #e4e8f2; }
.system-preview__content { min-width: 0; }
.system-card { border: 1px solid #dfe5f1; background: #fff; border-radius: 12px; min-width: 0; }
.system-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: white; padding: 12px; border-top: 0; border-bottom: 1px solid #e0e6f0; font-size: 10px; }
.system-toolbar__left, .system-toolbar__right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.system-wordmark { color: #142330; font-size: 12px; white-space: nowrap; }
.system-wordmark span { color: #ff754b; }
.system-tool, .system-search, .system-user, .system-alert { display: flex; align-items: center; gap: 6px; border: 1px solid #e0e6f0; border-radius: 6px; padding: 5px 8px; background: #f8f9fc; white-space: nowrap; }
.system-search { min-width: 0; }
.system-search > span { border: 1px solid #9eabc0; padding: 0 4px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; }
.system-search b { color: #62728e; font-weight: 500; }
.system-alert { padding: 1px 7px; border-color: #ff754b; }
.system-user { border-radius: 20px; }
.system-user i { border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; background: #ff754b; color: white; }
.system-home-tab { display: flex; gap: 7px; align-items: center; width: fit-content; padding: 8px 12px; color: #ff754b; border-bottom: 2px solid #ff754b; background: white; border-radius: 8px 8px 0 0; }
.system-commercial-layout { display: grid; grid-template-columns: minmax(0,7fr) minmax(220px,3fr); gap: 16px; padding: 16px 12px 36px; }
.system-commercial-main { min-width: 0; display: grid; gap: 16px; }
.system-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.system-metric { background: white; border: 1px solid #dfe5f1; border-radius: 10px; border-left: 3px solid #ec2637; padding: 10px; min-width: 0; }
.system-metric > span { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #647792; font-size: 10px; }
.system-metric .sys-icon { color: #ef2537; background: #fce5e6; border-radius: 5px; padding: 3px; width: 20px; height: 20px; }
.system-metric > strong { display: block; font-size: 19px; color: #162136; font-weight: 500; margin: 6px 0; }
.system-metric > small { display: block; font-size: 9px; color: #6d80a1; }
.system-metric > small b { color: #277556; font-weight: 400; }
.system-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.system-card > header > span:first-child { display: flex; align-items: center; gap: 7px; }
.system-commercial-chart, .system-distribution { padding: 16px; }
.system-commercial-chart header .sys-icon { color: #ff754b; }
.system-chart-options { font-size: 11px; white-space: nowrap; color: #6f7f9a; }
.system-chart-options > span { display: inline-block; border: 1px solid #dfe5f1; border-radius: 6px; padding: 4px; margin-left: 5px; }
.system-chart-options b { color: #162136; background: white; padding: 3px 6px; border-radius: 4px; font-weight: 500; }
.system-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
.system-legend > span { display: flex; gap: 7px; align-items: center; font-size: 9px; color: #162136; background: var(--tint); border-radius: 9px; padding: 5px 9px; }
.system-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.system-sales-chart { width: 100%; }
.system-distribution header .sys-icon { color: #8e9cc8; }
.system-pie { width: 120px; height: 120px; margin: 14px auto 4px; }
.system-summary { align-self: start; padding: 16px 12px; color: #162136; }
.system-summary header { font-size: 12px; }
.system-summary header strong { font-weight: 500; }
.system-summary header > span { font-size: 9px; white-space: nowrap; }
.system-summary h4 { color: #637796; margin: 12px 0 8px; }
.system-summary li { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 7px 0; }
.system-summary li .sys-icon { width: 12px; height: 12px; flex-basis: 12px; color: #788ca8; }
.system-summary li > span { flex: 1; min-width: 0; }
.system-summary li b { background: #edf0f4; border-radius: 12px; min-width: 17px; text-align: center; font-weight: 400; }
.system-summary .muted { color: #7186a6; }
.system-summary__activities { border-top: 1px solid #e6eaf2; padding-top: 12px; }
.system-preview--restaurant { background: #f0f2fc; }
.restaurant-system-layout { display: grid; grid-template-columns: 185px minmax(0,1fr); }
.restaurant-system-sidebar { background: #fafbfd; padding: 17px 9px; display: flex; flex-direction: column; min-width: 0; }
.restaurant-system-sidebar > strong { font-size: 14px; font-weight: 500; padding: 0 6px; }
.restaurant-system-sidebar ul { display: grid; gap: 3px; margin-top: 15px; }
.restaurant-system-sidebar li { display: flex; align-items: center; gap: 11px; padding: 12px 10px; border-radius: 13px; color: #5d6b88; font-weight: 600; font-size: 11px; }
.restaurant-system-sidebar li.selected { background: #e3e6f9; color: #2d4052; }
.restaurant-system-sidebar li.selected .sys-icon { color: #af3900; }
.restaurant-sidebar-bottom { display: grid; justify-content: center; gap: 15px; margin-top: auto; padding-top: 40px; }
.restaurant-sidebar-bottom span { display: grid; place-items: center; background: #bbc4f0; width: 28px; height: 28px; border-radius: 50%; }
.restaurant-system-main { padding: 20px 16px; min-width: 0; }
.restaurant-system-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 22px; }
.restaurant-system-heading > span:first-child { display: flex; align-items: center; gap: 7px; min-width: 0; }
.restaurant-system-heading strong { font-size: 14px; font-weight: 500; }
.restaurant-system-heading small { color: #5b6b88; font-size: 9px; }
.restaurant-date { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 10px; border: 1px solid #d3daf2; border-radius: 16px; font-size: 10px; }
.restaurant-metric { border: 1px solid #dfe3f4; background: #fafbfd; border-radius: 13px; padding: 10px 12px; min-width: 0; }
.restaurant-metric > span { display: block; color: #8b94ac; font-size: 9px; font-weight: 500; }
.restaurant-metric strong { display: block; font-size: 20px; font-weight: 600; }
.restaurant-metric--dark { background: #161d2e; color: #fafbfd; }
.restaurant-metric--dark > span { color: #c1c4cd; }
.restaurant-chart-card { padding: 17px; margin-top: 15px; background: #fafbfd; }
.restaurant-sales-chart { width: 100%; margin-top: 10px; }
.restaurant-sales-chart text { stroke: none; }
.restaurant-ranking { padding: 17px; margin-top: 15px; background: #fafbfd; }
.restaurant-ranking ul { margin: 10px 0 16px; }
.restaurant-ranking li { display: flex; align-items: center; gap: 10px; padding: 12px 5px; }
.restaurant-product-icon { display: grid; place-items: center; background: #e1e4f8; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; }
.restaurant-product-name { min-width: 0; overflow-wrap: anywhere; flex: 1; font-size: 11px; }
.restaurant-product-name small { display: block; color: #657492; font-size: 10px; margin-top: 3px; }
.restaurant-product-bar { height: 3px; width: 56px; flex: 0 0 56px; background: linear-gradient(to right,#ffa27e var(--rank),#e8ebf6 var(--rank)); }
.restaurant-more { display: block; text-align: center; color: #d75b31; font-size: 10px; }
@media (max-width: 1050px) {
  .system-search { display: none; }
  .system-commercial-layout { grid-template-columns: minmax(0,7fr) minmax(180px,3fr); gap: 10px; }
  .system-metrics { gap: 7px; }
  .system-metric { padding: 8px; }
  .restaurant-system-layout { grid-template-columns: 150px minmax(0,1fr); }
}
@media (max-width: 700px) {
  .system-toolbar { padding: 9px; }
  .system-toolbar__left { gap: 10px; flex-wrap: wrap; }
  .system-toolbar__right, .system-tool { display: none; }
  .system-commercial-layout { grid-template-columns: minmax(0,1fr); padding: 12px 10px 20px; }
  .system-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .system-card > header { flex-wrap: wrap; }
  .system-commercial-chart, .system-distribution { padding: 12px; }
  .system-summary { padding: 14px; }
  .system-sales-chart { min-height: 120px; }
  .restaurant-system-layout { grid-template-columns: minmax(0,1fr); }
  .restaurant-system-sidebar { padding: 12px; }
  .restaurant-system-sidebar ul { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; }
  .restaurant-system-sidebar li { padding: 7px 9px; gap: 5px; font-size: 10px; }
  .restaurant-system-sidebar li .sys-icon { width: 14px; height: 14px; flex-basis: 14px; }
  .restaurant-sidebar-bottom { display: none; }
  .restaurant-system-main { padding: 12px; }
  .restaurant-system-heading { flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
  .restaurant-system-heading > span:first-child { flex-wrap: wrap; }
  .restaurant-ranking, .restaurant-chart-card { padding: 12px; }
  .restaurant-sales-chart { min-height: 120px; }
  .restaurant-product-bar { width: 25px; flex-basis: 25px; }
}

.restaurant-chart-range, .restaurant-chart-dates { display: none; }
@media (max-width: 700px) {
  .system-sales-chart, .restaurant-sales-chart { height: 140px; }
  .system-sales-chart path, .restaurant-sales-chart path { vector-effect: non-scaling-stroke; }
  .restaurant-sales-chart text { display: none; }
  .restaurant-chart-range { display: block; color: #657492; font-size: 10px; margin-top: 8px; }
  .restaurant-chart-dates { display: flex; justify-content: space-between; color: #657492; font-size: 9px; }
}

.system-browser-spacer { width: 47px; flex: 0 0 47px; }
@media (max-width: 700px) { .system-browser-spacer { display: none; } }