/* Cundia · landing
   Colores, letras y medidas salen de la app: app/Cundia/Marca/Tokens.swift.
   Dos modos, como en la app: Papel (claro) y Noche (oscuro). */

@font-face {
  font-family: "Fraunces";
  src: url("fuentes/fraunces.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ───────── Fichas de color ───────── */

:root {
  color-scheme: light;
  --papel: #F6F2EA;
  --hueso: #EDE7DC;
  --superficie: #FFFCF7;
  --elevada: #FFFFFF;
  --separador: #DCD3C6;
  --texto: #1B1622;
  --texto-2: #4A4452;
  --texto-3: #6B6472;
  --acento: #4E1F55;
  --acento-pulsado: #6E2E78;
  --sobre-acento: #FFFCF7;
  --ambar: #E9AE48;
  --contorno-campo: #8F8798;
  --ok: #2C6A3B;
  --ok-fondo: #E2EEE2;
  --aviso: #8A5300;
  --aviso-fondo: #F5E6C8;
  --alerta: #B0261C;
  --alerta-fondo: #F6DFDA;
  --riel: #1B1622;
  --pizarra: #1B1622;
  --pizarra-texto: #F6F2EA;
  --linea-papel: rgb(27 22 34 / .3);
  --sombra-papel: rgb(27 22 34 / .08);
  --sombra-objeto: rgb(27 22 34 / .45);
  --cabecera-fondo: rgb(246 242 234 / .86);
  --escenario: #141019;
  --tostada-fondo: #1B1622;
  --tostada-texto: #F6F2EA;
  --tostada-accion: #C9A7D0;
  --tostada-visto: #7DCB8C;

  --letra-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --letra-texto: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cabecera: 64px;

  /* Movimiento: cuatro duraciones y tres curvas para toda la página */
  --t-1: 150ms;
  --t-2: 280ms;
  --t-3: 520ms;
  --t-4: 900ms;
  --entra: cubic-bezier(.16, 1, .3, 1);
  --sale: cubic-bezier(.4, 0, 1, 1);
  --muelle: cubic-bezier(.34, 1.45, .64, 1);
  --curva: var(--entra);   /* alias antiguo: una sola curva de entrada */
  --t-5: 1600ms;           /* trazos que se dibujan al bajar */
  --pulso: 2800ms;         /* el pulso que respira (onda) */
  --ciclo: 5s;             /* los hilos que viajan */
  --deriva: 18s;           /* el fondo del héroe */
  --cinta: 36s;            /* la franja que corre */
}

/* Noche: el modo oscuro de la app. Lo usan el tema Noche, la sección del pase y el pie. */
:root[data-tema="noche"],
.seccion--noche,
.pie {
  color-scheme: dark;
  --papel: #141019;
  --hueso: #241E2B;
  --superficie: #1E1925;
  --elevada: #28222F;
  --separador: #3A3342;
  --texto: #F6F2EA;
  --texto-2: #C9C1CF;
  --texto-3: #A39CAA;
  --acento: #C9A7D0;
  --acento-pulsado: #DDC4E2;
  --sobre-acento: #141019;
  --contorno-campo: #7A7185;
  --ok: #7DCB8C;
  --ok-fondo: #1D3323;
  --aviso: #E9AE48;
  --aviso-fondo: #3A2B10;
  --alerta: #F28B7F;
  --alerta-fondo: #3E1E1B;
  --riel: #5F566A;
  --pizarra: #28222F;
  --linea-papel: #5F566A;
  --sombra-papel: transparent;
  --sombra-objeto: rgb(0 0 0 / .55);
  --cabecera-fondo: rgb(20 16 25 / .84);
  --tostada-fondo: #F6F2EA;
  --tostada-texto: #1B1622;
  --tostada-accion: #4E1F55;
  --tostada-visto: #2C6A3B;
}
:root[data-tema="noche"] { --escenario: #0B080E; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) {
    color-scheme: dark;
    --papel: #141019;
    --hueso: #241E2B;
    --superficie: #1E1925;
    --elevada: #28222F;
    --separador: #3A3342;
    --texto: #F6F2EA;
    --texto-2: #C9C1CF;
    --texto-3: #A39CAA;
    --acento: #C9A7D0;
    --acento-pulsado: #DDC4E2;
    --sobre-acento: #141019;
    --contorno-campo: #7A7185;
    --ok: #7DCB8C;
    --ok-fondo: #1D3323;
    --aviso: #E9AE48;
    --aviso-fondo: #3A2B10;
    --alerta: #F28B7F;
    --alerta-fondo: #3E1E1B;
    --riel: #5F566A;
    --pizarra: #28222F;
    --linea-papel: #5F566A;
    --sombra-papel: transparent;
    --sombra-objeto: rgb(0 0 0 / .55);
    --cabecera-fondo: rgb(20 16 25 / .84);
    --escenario: #0B080E;
    --tostada-fondo: #F6F2EA;
    --tostada-texto: #1B1622;
    --tostada-accion: #4E1F55;
    --tostada-visto: #2C6A3B;
  }
}

/* ───────── Base ───────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabecera) + 16px);
  background: var(--papel);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--letra-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--acento); text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li, dd, figcaption { text-wrap: pretty; }
strong { font-weight: 650; }
[hidden] { display: none !important; }
::selection { background: rgb(201 167 208 / .45); }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.envoltura { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .envoltura { padding-inline: 28px; } }
@media (min-width: 1100px) { .envoltura { padding-inline: 40px; } }

.saltar {
  position: absolute; top: 12px; left: 16px; z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--acento); color: var(--sobre-acento);
  font-weight: 600; text-decoration: none;
  transform: translateY(-220%);
}
.saltar:focus { transform: none; }
/* Destino del enlace «Saltar al contenido»: recibe el foco, pero no se dibuja un contorno alrededor de toda la página */
main:focus { outline: none; }

/* ───────── Cabecera ───────── */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  background: var(--cabecera-fondo);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: border-color var(--t-2);
}
.cabecera.con-borde { border-bottom-color: var(--separador); }
.cabecera__dentro { display: flex; align-items: center; gap: 16px; min-height: var(--cabecera); }
.cabecera__marca { display: inline-flex; align-items: center; margin-right: auto; padding-block: 8px; color: var(--acento); border-radius: 8px; }
.logotipo { width: auto; height: 30px; aspect-ratio: 549.92 / 208.55; }
.cabecera__nav { display: none; }

@media (min-width: 880px) {
  .cabecera__nav { display: block; }
  .cabecera__nav ul { list-style: none; display: flex; gap: 2px; }
  .cabecera__nav a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 12px;
    border-radius: 10px;
    color: var(--texto-2);
    font-size: .9375rem; font-weight: 550; text-decoration: none;
    transition: color var(--t-1), background-color var(--t-1);
  }
  .cabecera__nav a:hover { color: var(--texto); background: rgb(127 118 136 / .12); }
}

/* ───────── Botones y enlaces ───────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 14px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color var(--t-1), transform var(--t-1) var(--curva);
}
.boton:hover { background: var(--acento-pulsado); }
.boton:active { transform: translateY(1px); }
.boton--pequeno { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: .9375rem; }
.boton--ancho { width: 100%; }
.boton[aria-disabled="true"] { cursor: progress; opacity: .72; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 48px;
  color: var(--acento);
  font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .28em;
  transition: text-decoration-color var(--t-1);
}
.enlace-flecha::after { content: "→"; content: "→" / ""; display: inline-block; transition: transform var(--t-2) var(--curva); }
.enlace-flecha:hover { text-decoration-color: currentColor; }
.enlace-flecha:hover::after { transform: translateX(3px); }

/* ───────── Primera pantalla ───────── */

.heroe { padding: clamp(28px, 5vw, 56px) 0 clamp(64px, 9vw, 112px); }
.heroe__dentro { display: grid; gap: 48px; }

@media (min-width: 960px) {
  .heroe__dentro { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(40px, 6vw, 104px); align-items: center; }
  .heroe__texto { padding-top: clamp(24px, 7vh, 96px); }
}

.estado-proyecto {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--separador); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2);
  font-size: .875rem; font-weight: 600; line-height: 1.35;
}
.luz { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 3px rgb(233 174 72 / .28); }

.heroe__titulo {
  max-width: 14ch;
  margin-top: 22px;
  font-family: var(--letra-titulo);
  font-size: clamp(2.625rem, 1.3rem + 3.9vw, 4.875rem);
  font-weight: 580;
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.heroe__entradilla {
  max-width: 34rem;
  margin-top: 24px;
  color: var(--texto-2);
  font-size: clamp(1.125rem, 1.02rem + .35vw, 1.3125rem);
  line-height: 1.5;
}
.heroe__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }

.heroe__producto { display: grid; justify-items: center; gap: 18px; margin: 0; }
.heroe__pie { max-width: 25rem; color: var(--texto-3); font-size: .875rem; line-height: 1.45; text-align: center; text-wrap: balance; }

/* ───────── El móvil ───────── */

.movil {
  --bisel: 11px;
  position: relative;
  width: calc(372px + 2 * var(--bisel));
  max-width: 100%;
  padding: var(--bisel);
  border-radius: 58px;
  background: #100C14;
  box-shadow:
    inset 0 0 0 1px #4A4452,
    inset 0 0 0 3px #100C14,
    0 50px 90px -40px var(--sombra-objeto),
    0 22px 40px -24px var(--sombra-objeto);
}
.movil__pantalla {
  position: relative;
  display: flex; flex-direction: column;
  height: 860px;
  overflow: hidden;
  border-radius: 47px;
  background: var(--papel);
  color: var(--texto);
  isolation: isolate;
}

@media (min-width: 640px) {
  .movil::before,
  .movil::after { content: ""; position: absolute; width: 3px; background: #2A2330; }
  .movil::before { left: -3px; top: 168px; height: 56px; border-radius: 2px 0 0 2px; box-shadow: 0 72px 0 #2A2330; }
  .movil::after { right: -3px; top: 220px; height: 92px; border-radius: 0 2px 2px 0; }
}

/* En pantallas bajas el móvil se encoge entero, sin cambiar sus proporciones.
   Cuenta: 882 px de móvil, 89 de cabecera y margen arriba y 16 abajo, para que se vea entero con la franja «datos ficticios». */
@media (min-width: 640px) and (max-height: 1020px) { .heroe { padding-top: 24px; } }
@media (min-width: 640px) and (max-height: 986px) { .heroe .movil { zoom: .92; } }
@media (min-width: 640px) and (max-height: 915px) { .heroe .movil { zoom: .84; } }
@media (min-width: 640px) and (max-height: 845px) { .heroe .movil { zoom: .77; } }
@media (min-width: 640px) and (max-height: 783px) { .heroe .movil { zoom: .7; } }
@media (min-width: 640px) and (max-height: 721px) { .heroe .movil { zoom: .63; } }

.barra-estado {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: 46px; padding: 4px 30px 0 40px;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.barra-estado__isla { position: absolute; top: 11px; left: 50%; width: 118px; height: 34px; margin-left: -59px; border-radius: 20px; background: #000; }
.barra-estado__iconos { display: flex; align-items: center; gap: 5px; }
.barra-estado__iconos svg { width: auto; height: 12px; }

/* ───────── La app por dentro ───────── */

.app__cuerpo {
  flex: 1; min-height: 0;
  padding: 8px 16px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.app__cuerpo::-webkit-scrollbar { display: none; }

.app__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app__fecha { font-size: 12.5px; font-weight: 650; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; }
.app__saludo { margin-top: 2px; color: var(--texto-2); font-size: 15px; line-height: 1.3; }
.app__redondos { display: flex; gap: 7px; }
.redondo {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--separador); border-radius: 50%;
  background: var(--superficie); color: var(--acento);
}
.redondo svg { width: 18px; height: 18px; }
/* Por debajo de 390 px la fecha no cabe en una línea junto a los tres botones: se aprietan un poco */
@media (max-width: 389.98px) {
  .app__redondos { gap: 5px; }
  .app__redondos .redondo { width: 34px; height: 34px; }
  .app__redondos .redondo svg { width: 16px; height: 16px; }
  .app__fecha { font-size: 12px; letter-spacing: .05em; }
}

.app__frase {
  margin-top: 14px;
  border-radius: 6px;
  font-family: var(--letra-titulo); font-size: 21.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
}
.app__frase > span { display: block; }
.app__frase-apoyo { color: var(--texto-2); }
.app__frase:focus { outline: none; }
.app__frase:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; }

.app__local { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; color: var(--texto-2); font-size: 14px; }
.puesto {
  display: inline-block;
  padding: 2px 8px;
  border: 1.25px solid currentColor; border-radius: 999px;
  color: var(--acento);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; line-height: 1.4; text-transform: uppercase;
}
.app__pase { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.app__pase-titulo { font-family: var(--letra-titulo); font-size: 18px; font-weight: 600; }

/* El riel del pase: la barra de la que cuelgan las comandas */
.riel {
  height: 5px;
  margin: 6px 0 12px;
  border-radius: 3px;
  background:
    radial-gradient(circle, var(--papel) 0 1.2px, transparent 1.7px) 3px 50% / 5px 5px no-repeat,
    radial-gradient(circle, var(--papel) 0 1.2px, transparent 1.7px) calc(100% - 3px) 50% / 5px 5px no-repeat,
    var(--riel);
}

/* ───────── Comandas ───────── */

/* El papel de comanda: borde de abajo en dientes, como el ticket del pase */
.comanda,
.ficha,
.formulario {
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%;
}

.comandas { list-style: none; }
.comanda-sitio {
  display: grid;
  grid-template-rows: 1fr;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 .75px var(--linea-papel)) drop-shadow(0 6px 8px var(--sombra-papel));
  transition: opacity var(--t-1);
}
/* Al irse, el sitio sale del flujo (el papel sigue su vuelo) y las demás comandas ocupan el hueco con transform (el JS) */
.comandas { position: relative; }
.comanda-sitio.se-va { position: absolute; left: 0; right: 0; margin-bottom: 0; opacity: 0; pointer-events: none; }

.comanda {
  --s: 5px;
  --estado: var(--separador);
  position: relative;
  min-height: 0;
  padding: 10px 14px calc(13px + var(--s));
  overflow: hidden;
  border-top: 3px solid var(--estado);
  background: var(--superficie);
}
.comanda--alerta { --estado: var(--alerta); }
.comanda--aviso { --estado: var(--aviso); }

.comanda__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.comanda__quien { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.comanda__hora { font-family: var(--letra-titulo); font-size: 21px; font-weight: 600; line-height: 1.1; }
.comanda__origen { color: var(--texto-2); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.chip {
  --chip-fondo: var(--hueso);
  --chip-texto: var(--texto-2);
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: var(--chip-fondo); color: var(--chip-texto);
  font-size: 12px; font-weight: 650; line-height: 1.3; white-space: nowrap;
}
.chip svg { flex: none; width: 13px; height: 13px; }
.chip--alerta { --chip-fondo: var(--alerta-fondo); --chip-texto: var(--alerta); }
.chip--aviso { --chip-fondo: var(--aviso-fondo); --chip-texto: var(--aviso); }
.chip--ok { --chip-fondo: var(--ok-fondo); --chip-texto: var(--ok); }

.comanda__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.comanda__titulo { font-family: var(--letra-titulo); font-size: 18.5px; font-weight: 600; line-height: 1.15; }
.comanda__valor { font-family: var(--letra-titulo); font-size: 28px; font-weight: 560; line-height: 1; white-space: nowrap; }
.comanda__valor--alerta { color: var(--alerta); }
.comanda__valor--aviso { color: var(--aviso); }
.comanda__detalle { margin-top: 3px; color: var(--texto-2); font-size: 14px; }
.comanda__cuando { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--texto-2); font-size: 14px; }
.comanda__cuando svg { flex: none; width: 14px; height: 14px; }
.comanda__cuando--alerta { color: var(--alerta); font-weight: 600; }
.comanda__quehacer { margin-top: 10px; font-size: 15px; line-height: 1.4; }
/* La columna de la derecha: la cifra arriba y, debajo, lo que se puede hacer («Revisar ›») */
.comanda__fila--baja { align-items: flex-end; margin-top: 3px; }
.comanda__fila--baja .comanda__detalle { margin-top: 0; }

.comanda__boton {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px;
  margin-top: 12px; padding: 0 14px;
  border: 0; border-radius: 13px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: 15px; font-weight: 600;
  transition: background-color var(--t-1), transform var(--t-1) var(--curva);
}
.comanda__boton:hover { background: var(--acento-pulsado); }
.comanda__boton:active { transform: scale(.985); }
.comanda__boton svg { flex: none; width: 20px; height: 20px; }

.comanda__verbo {
  display: inline-flex; align-items: center; gap: 3px;
  margin: -10px -6px -10px 0;
  padding: 10px 6px 10px 12px;
  border: 0; border-radius: 10px;
  background: none; color: var(--acento);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.comanda__verbo:hover { text-decoration: underline; text-underline-offset: .2em; }
.chevron {
  flex: none;
  width: 7px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lo resuelto se sella, como en la app (Marca/Componentes/Sello.swift): tinta de acento, doble marco y -6°.
   Cae desde arriba, más grande y girado, y el papel acusa el golpe. */
.comanda { transition: border-color var(--t-1); }
.comanda.esta-resuelta > :not(.sello) { opacity: .38; transition: opacity var(--t-2); }
.sello {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  translate: -50% -50%;
  rotate: -6deg;
  padding: 5px 12px 4px;
  border: 2px solid currentColor; border-radius: 6px;
  box-shadow: 0 0 0 2.5px var(--superficie), 0 0 0 4px currentColor;
  background: var(--superficie);
  color: var(--acento);
  font-family: var(--letra-titulo); font-size: 16px; font-weight: 700; letter-spacing: .12em; line-height: 1.15;
  text-align: center; text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
  animation: sellar var(--t-1) var(--sale) both;
}
.sello small { display: block; margin-top: 2px; font-family: var(--letra-texto); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-transform: none; }
/* Tras una acción, el foco llega al sello (cundia.js › enfocar): el aro se aparta de su doble marco y va en el color del texto, para no confundirse con él */
.sello:focus-visible { outline: 3px solid var(--texto); outline-offset: 6px; border-radius: 6px; }
@keyframes sellar {
  from { opacity: 0; scale: 2.3; rotate: -16deg; }
  to { opacity: 1; scale: 1; rotate: -6deg; }
}
/* Sellada, la comanda ya no pide nada: sin etiqueta, sin «hace…» ni botón, y con la misma altura */
.comanda.esta-resuelta :is(.chip, .comanda__cuando, .comanda__quehacer, .comanda__boton, .comanda__verbo) { visibility: hidden; }

/* Al abrir la pantalla, las comandas se cuelgan del riel una a una, como en Hoy */
.esta-entrando .comanda-sitio > .comanda { transform-origin: 50% 0; animation: colgar var(--t-3) var(--muelle) .25s backwards; }
.esta-entrando .comanda-sitio:nth-child(2) > .comanda { animation-delay: .35s; }
.esta-entrando .comanda-sitio:nth-child(4) > .comanda { animation-delay: .45s; }
/* Mientras el pase no se ve (móvil), las comandas esperan donde empieza «colgar» */
.por-colgar .comanda-sitio > .comanda { opacity: 0; transform: translateX(340px) rotate(2.5deg); transform-origin: 50% 0; }
@keyframes colgar {
  from { opacity: 0; transform: translateX(340px) rotate(2.5deg); }
}

.app__reiniciar {
  display: flex; align-items: center;
  min-height: 40px; margin: 6px auto 4px; padding: 0 16px;
  border: 1px solid var(--separador); border-radius: 999px;
  background: var(--superficie); color: var(--acento);
  font-size: 14px; font-weight: 600;
  animation: aparecer var(--t-2) var(--curva) both;
}
@keyframes aparecer {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

.app__demo {
  flex: none;
  padding: 6px 12px;
  border-top: 1px solid var(--separador);
  background: var(--hueso); color: var(--texto-2);
  font-size: 12px; font-weight: 550; line-height: 16px; text-align: center;
}

.pestanas-app {
  flex: none;
  display: flex;
  height: 58px; margin: 8px 12px 18px; padding: 5px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--separador), 0 10px 22px -12px var(--sombra-objeto);
}
.pestanas-app__una {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.pestanas-app__una svg { width: 22px; height: 22px; }
.pestanas-app__una.es-activa { background: var(--hueso); color: var(--acento); }

.tostada {
  position: absolute; right: 12px; bottom: 122px; left: 12px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 8px 12px;
  border-radius: 16px;
  background: var(--tostada-fondo); color: var(--tostada-texto);
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .45);
  animation: aparecer var(--t-2) var(--curva) both;
}
.tostada__visto { flex: none; color: var(--tostada-visto); }
.tostada__visto svg { width: 22px; height: 22px; }
.tostada__texto { flex: 1; font-size: 13.5px; line-height: 1.35; }
.tostada__deshacer {
  flex: none;
  min-height: 40px; padding: 0 10px;
  border: 0; border-radius: 10px;
  background: none; color: var(--tostada-accion);
  font-size: 14px; font-weight: 700;
}
.tostada__deshacer:focus-visible { outline-color: var(--tostada-accion); outline-offset: 0; }

/* En el teléfono de quien lee, la app se enseña sin marco: ya está en un móvil */
@media (max-width: 639.98px) {
  .heroe__acciones .boton { width: 100%; }
  .heroe .movil { width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .heroe .movil__pantalla {
    height: auto;
    border: 1px solid var(--separador); border-radius: 26px;
    box-shadow: 0 30px 60px -36px var(--sombra-objeto);
  }
  .heroe .barra-estado,
  .heroe .pestanas-app { display: none; }
  .heroe .app__cuerpo { padding: 18px 16px 12px; overflow: visible; }
  .heroe .tostada { bottom: 42px; }
}

/* ───────── Secciones ───────── */

.seccion { padding-block: clamp(72px, 10vw, 136px); }
.seccion--alterna { background: var(--hueso); }
.seccion--noche { background: var(--escenario); color: var(--texto); }
.seccion__cabeza { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }

.antetitulo {
  display: flex; align-items: center; gap: 10px;
  color: var(--acento);
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase;
}
.antetitulo::before { content: ""; flex: none; width: 22px; height: 4px; border-radius: 2px; background: currentColor; }

.seccion__titulo {
  margin-top: 16px;
  font-family: var(--letra-titulo);
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.375rem);
  font-weight: 580;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.seccion__entradilla {
  max-width: 40rem;
  margin-top: 20px;
  color: var(--texto-2);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.55;
}

.nota {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgb(127 118 136 / .1);
  color: var(--texto-2);
  font-size: .9375rem; line-height: 1.5;
}
.nota--desarrollo::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 2px rgb(233 174 72 / .3);
  vertical-align: .08em;
}

.movil--captura { --bisel: 10px; width: min(calc(300px + 2 * var(--bisel)), 100%); border-radius: 50px; }
/* Las capturas son del modo claro: su barra de estado también */
.movil--captura .movil__pantalla { height: auto; border-radius: 40px; background: #F6F2EA; color: #1B1622; }
/* Pantalla de 300 px: isla y márgenes más estrechos para que la isla no pise la cobertura */
.movil--captura .barra-estado { padding: 4px 24px 0 34px; font-size: 14px; }
.movil--captura .barra-estado__isla { width: 92px; height: 28px; margin-left: -46px; }
.captura { position: relative; aspect-ratio: 480 / 984; }
.captura img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--t-3) var(--curva); }
.captura img.es-activa,
html:not(.js) .captura img:first-child { opacity: 1; }

/* ───────── Sellos de estado: lo que existe y lo que viene ───────── */

.estado {
  --e-color: var(--texto-2);
  --e-fondo: transparent;
  --e-borde: var(--contorno-campo);
  --e-icono: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--e-borde); border-radius: 999px;
  background: var(--e-fondo); color: var(--e-color);
  font-family: var(--letra-texto); font-size: .75rem; font-weight: 700; letter-spacing: .03em; line-height: 1.4; text-transform: none; white-space: nowrap;
}
.estado::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: var(--e-icono) center / contain no-repeat;
  mask: var(--e-icono) center / contain no-repeat;
}
.estado--hoy {
  --e-color: var(--ok); --e-fondo: var(--ok-fondo); --e-borde: color-mix(in srgb, var(--ok) 38%, transparent);
  --e-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.estado--obra {
  --e-color: var(--aviso); --e-fondo: var(--aviso-fondo); --e-borde: color-mix(in srgb, var(--aviso) 38%, transparent);
  --e-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2a6 6 0 0 0 0 12z'/%3E%3C/svg%3E");
}
.estado--plan {
  --e-color: var(--texto-2); --e-borde: var(--texto-3);
  border-style: dashed;
  --e-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-dasharray='2.6 2'/%3E%3C/svg%3E");
}

/* ───────── Héroe: lo que cambia respecto a la primera versión ───────── */

.heroe { position: relative; }
.heroe::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: min(100%, 980px);
  z-index: -1;
  background:
    radial-gradient(46rem 34rem at 82% 28%, rgb(201 167 208 / .34), transparent 70%),
    radial-gradient(30rem 24rem at 4% 6%, rgb(233 174 72 / .13), transparent 70%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="dia"]) .heroe::before { opacity: .55; } }
:root[data-tema="noche"] .heroe::before { opacity: .55; }
.heroe .heroe__titulo { max-width: 13ch; }
@media (min-width: 960px) { .heroe .heroe__titulo { max-width: 11.5ch; } }

/* ───────── Cómo funciona ───────── */


.triada {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(26px, 5vw, 56px);
  border-radius: 30px;
  background: var(--acento); color: var(--sobre-acento);
}
.triada__rotulo { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.triada__lista { list-style: none; display: grid; gap: 28px; margin-top: 22px; }
@media (min-width: 860px) { .triada__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.triada__lista h3 { font-family: var(--letra-titulo); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 580; line-height: 1.05; letter-spacing: -.02em; }
.triada__lista p { max-width: 22rem; margin-top: 10px; font-size: 1.0625rem; opacity: .92; }

/* ───────── Las áreas ───────── */

.leyenda { display: grid; gap: 0; margin: 0 0 clamp(28px, 4vw, 44px); border: 1px solid var(--separador); border-radius: 20px; background: var(--superficie); }
.leyenda > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--separador); }
.leyenda > div:first-child { border-top: 0; }
.leyenda dd { color: var(--texto-2); font-size: .9375rem; line-height: 1.45; }
@media (min-width: 860px) {
  .leyenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leyenda > div { padding: 20px 24px; border-top: 0; border-left: 1px solid var(--separador); }
  .leyenda > div:first-child { border-left: 0; }
}


.llamada {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px;
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(22px, 3.5vw, 36px) clamp(22px, 4vw, 44px);
  border-radius: 26px;
  background: var(--acento); color: var(--sobre-acento);
}
.llamada__texto { max-width: 34rem; font-family: var(--letra-titulo); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 580; line-height: 1.2; text-wrap: balance; }
.llamada .boton { background: var(--sobre-acento); color: var(--acento); }
.llamada .boton:hover { background: var(--elevada); }
.llamada .boton:focus-visible { outline-color: var(--sobre-acento); }

/* ───────── Decidir con datos: la pizarra ───────── */

.datos__claves { list-style: none; display: grid; gap: 16px; margin-top: 30px; }
.datos__claves li { padding-left: 18px; border-left: 3px solid var(--acento); color: var(--texto-2); }
.datos__claves strong { color: var(--texto); }

.panel { margin: 0; padding: clamp(14px, 3vw, 28px); border: 1px solid var(--separador); border-radius: 30px; background: var(--superficie); box-shadow: 0 40px 80px -50px rgb(0 0 0 / .8); }
.panel__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 4px 4px 18px; }
.panel__local { font-family: var(--letra-titulo); font-size: 1.25rem; font-weight: 600; }
.panel__demo { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: .8125rem; font-weight: 650; }
.panel__rejilla { display: grid; gap: 12px; }
@media (min-width: 560px) { .panel__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ratio { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px; border: 1px solid var(--separador); border-radius: 20px; background: var(--elevada); }
.ratio--ancho { grid-column: 1 / -1; }
.ratio--grande { background: var(--acento); border-color: transparent; color: var(--sobre-acento); }
.ratio--grande .ratio__etiqueta,
.ratio--grande .ratio__pie { color: inherit; opacity: .9; }
.ratio__etiqueta { color: var(--texto-2); font-size: .75rem; font-weight: 700; letter-spacing: .09em; line-height: 1.35; text-transform: uppercase; }
.ratio__cifra { font-family: var(--letra-titulo); font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 580; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ratio__cifra--media { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); }
.ratio__cifra--vacia { color: var(--texto-3); font-size: 2rem; }
.ratio__pie { color: var(--texto-2); font-size: .875rem; line-height: 1.45; }

.escala { position: relative; height: 10px; margin: 8px 0 4px; border-radius: 5px; background: var(--separador); }
.escala__relleno { position: absolute; inset: 0 auto 0 0; width: 69%; border-radius: 5px; background: var(--ok); }
.escala__marca { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--texto); }
.escala__marca--objetivo { left: 75%; }
.escala__marca--alerta { left: 87.5%; background: var(--alerta); }

.subidas { list-style: none; display: grid; gap: 10px; margin: 10px 0 6px; }
@media (min-width: 760px) { .subidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.subidas li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--hueso); }
.subidas__producto { font-weight: 650; line-height: 1.3; }
.subidas__producto span { display: block; color: var(--texto-3); font-size: .8125rem; font-weight: 500; }
.subidas__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--letra-titulo); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.subidas__antes { color: var(--texto-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.subidas__porc { padding: 1px 9px; border-radius: 999px; background: var(--aviso-fondo); color: var(--aviso); font-family: var(--letra-texto); font-size: .8125rem; font-weight: 700; }
.subidas__plato { color: var(--texto-2); font-size: .875rem; line-height: 1.4; }

.panel__falta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 4px 12px; color: var(--texto-2); font-size: .9375rem; }
.panel__plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .panel__plan { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ratio--plan { gap: 8px; padding: 14px; border-style: dashed; border-color: var(--texto-3); background: transparent; }
.panel__pie { margin: 18px 4px 2px; color: var(--texto-3); font-size: .8125rem; line-height: 1.5; }

/* ───────── La demostración, pantalla a pantalla ───────── */

.rail { list-style: none; display: flex; gap: 20px; margin: 0 -4px; padding: 4px 4px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; border-radius: 12px; }
.toma { flex: 0 0 min(66vw, 236px); scroll-snap-align: start; }
.toma img { width: 100%; border: 1px solid var(--separador); border-radius: 26px; box-shadow: 0 28px 50px -34px var(--sombra-objeto); background: var(--hueso); }
.toma__titulo { margin-top: 16px; font-family: var(--letra-titulo); font-size: 1.1875rem; font-weight: 600; }
.toma__pie { margin-top: 4px; color: var(--texto-2); font-size: .9063rem; line-height: 1.45; }
@media (min-width: 1100px) {
  .rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .toma { flex: none; }
}
.demo__nota { max-width: 46rem; margin-top: 12px; color: var(--texto-3); font-size: .875rem; }

/* ───────── Para quién ───────── */

.quien__rejilla { display: grid; gap: 20px; }
@media (min-width: 800px) { .quien__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.quien__bloque { padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--separador); border-radius: 26px; background: var(--superficie); }
.quien__bloque--no { border-style: dashed; background: transparent; }
.quien__bloque h3 { font-family: var(--letra-titulo); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 580; line-height: 1.1; }
.quien__bloque ul { list-style: none; display: grid; gap: 14px; margin-top: 22px; }
.quien__bloque li { position: relative; padding-left: 30px; color: var(--texto-2); }
.quien__bloque li::before {
  content: "";
  position: absolute; top: .22em; left: 0;
  width: 18px; height: 18px;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quien__bloque--no li::before {
  background: var(--texto-3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.quien__cierre { max-width: 36rem; margin: clamp(32px, 4vw, 56px) auto 0; font-family: var(--letra-titulo); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 580; line-height: 1.2; text-align: center; text-wrap: balance; }

/* ───────── Dónde está ───────── */

.tramos { --hueco: clamp(32px, 4vw, 56px); list-style: none; display: grid; }
.tramo { position: relative; padding: 0 0 44px 40px; }
.tramo:last-child { padding-bottom: 0; }
.tramo::before { content: ""; position: absolute; top: 30px; bottom: 4px; left: 10px; width: 2px; background: var(--separador); }
.tramo:last-child::before { display: none; }
.tramo__titulo { font-family: var(--letra-titulo); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.tramo__punto { position: absolute; top: 4px; left: 0; width: 22px; height: 22px; border-radius: 50%; }
.tramo--hecho .tramo__punto { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-fondo); }
.tramo--desarrollo .tramo__punto { background: var(--ambar); box-shadow: 0 0 0 4px var(--aviso-fondo); }
.tramo--despues .tramo__punto { border: 2px dashed var(--texto-3); background: var(--hueso); }
.tramo__sub { margin-top: 4px; color: var(--texto-2); font-size: .9375rem; }
.tramo ul { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.tramo ul li { position: relative; padding-left: 26px; }
.tramo ul li::before {
  content: "";
  position: absolute; top: .3em; left: 0;
  width: 16px; height: 16px;
  background: var(--marca-color);
  -webkit-mask: var(--marca) center / contain no-repeat;
  mask: var(--marca) center / contain no-repeat;
}
.tramo--hecho {
  --marca-color: var(--ok);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tramo--desarrollo {
  --marca-color: var(--aviso);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2a6 6 0 0 0 0 12z'/%3E%3C/svg%3E");
}
.tramo--despues {
  --marca-color: var(--texto-3);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-dasharray='2.6 2'/%3E%3C/svg%3E");
}
@media (min-width: 860px) {
  .tramos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--hueco); }
  .tramo,
  .tramo:last-child { padding: 46px 0 0; }
  .tramo::before { top: 10px; right: calc(10px - var(--hueco)); bottom: auto; left: 34px; width: auto; height: 2px; }
  .tramo__punto { top: 0; }
}

/* ───────── Preguntas ───────── */

.preguntas__rejilla { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .preguntas__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 112px); align-items: start; }
  .preguntas .seccion__cabeza { position: sticky; top: calc(var(--cabecera) + 40px); margin-bottom: 0; }
}
.preguntas__lista { border-top: 1px solid var(--separador); }
.pregunta { border-bottom: 1px solid var(--separador); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--letra-titulo); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); font-weight: 600; line-height: 1.3;
  transition: color var(--t-1);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  background:
    linear-gradient(var(--acento) 0 0) center / 100% 2px no-repeat,
    linear-gradient(var(--acento) 0 0) center / 2px 100% no-repeat;
  transition: transform var(--t-2) var(--curva);
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta summary:hover { color: var(--acento); }
.pregunta__respuesta { max-width: 42rem; padding-bottom: 24px; color: var(--texto-2); }
.pregunta__respuesta > * + * { margin-top: 12px; }
.pregunta__respuesta ul { padding-left: 1.2em; }


/* ───────── Acceso anticipado ───────── */

.acceso__rejilla { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .acceso__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 112px); align-items: start; }
  .acceso__texto { position: sticky; top: calc(var(--cabecera) + 40px); }
}
.acceso__texto > p:not(.antetitulo) { max-width: 32rem; margin-top: 20px; color: var(--texto-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }

.formulario-sitio { filter: drop-shadow(0 0 .75px var(--linea-papel)) drop-shadow(0 28px 32px var(--sombra-papel)); }
.formulario {
  --s: 6px;
  container-type: inline-size;
  padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 36px) calc(clamp(26px, 4vw, 40px) + var(--s));
  border-top: 4px solid var(--acento);
  background: var(--superficie);
}
.formulario__aviso { padding: 12px 14px; border-radius: 12px; background: rgb(127 118 136 / .1); color: var(--texto-2); font-size: .9375rem; }

.campo { display: grid; gap: 6px; margin-top: 20px; }
.campo__etiqueta { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.campo__opcional { margin-left: .35em; color: var(--texto-3); font-weight: 400; }
.campo__control {
  width: 100%; min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--contorno-campo); border-radius: 12px;
  background: var(--elevada); color: var(--texto);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--t-1);
}
.campo__control:hover { border-color: var(--texto-2); }
.campo__control:focus-visible { border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 12px; }
.campo__control[aria-invalid="true"] { border-color: var(--alerta); }
select.campo__control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
textarea.campo__control { min-height: 120px; resize: vertical; }
.campo__error { display: flex; align-items: flex-start; gap: 6px; color: var(--alerta); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.campo__error::before {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  margin-top: .1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 1 0 8 1zM9.84 5.03l1.13 1.13L9.13 8l1.84 1.84-1.13 1.13L8 9.13l-1.84 1.84-1.13-1.13L6.87 8 5.03 6.16l1.13-1.13L8 6.87z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 1 0 8 1zM9.84 5.03l1.13 1.13L9.13 8l1.84 1.84-1.13 1.13L8 9.13l-1.84 1.84-1.13-1.13L6.87 8 5.03 6.16l1.13-1.13L8 6.87z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.formulario__doble { display: grid; column-gap: 16px; }
@container (min-width: 440px) {
  .formulario__doble { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.campo--grupo { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.campo--grupo legend { margin-bottom: 10px; padding: 0; }
.casillas { display: flex; flex-wrap: wrap; gap: 8px; }
.casilla {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 14px 8px 12px;
  border: 1.5px solid var(--contorno-campo); border-radius: 999px;
  background: var(--elevada);
  font-size: .9375rem; line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--t-1), background-color var(--t-1);
}
.casilla input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
.casilla:hover { border-color: var(--texto-2); }
.casilla:has(:checked) { border-color: var(--acento); background: rgb(201 167 208 / .2); }
.casilla--consentimiento,
.casilla--consentimiento:hover,
.casilla--consentimiento:has(:checked) { align-items: flex-start; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--texto-2); }
.casilla--consentimiento input { margin-top: .12em; }
.casilla--consentimiento a { font-weight: 600; }

.formulario .boton { min-height: 52px; margin-top: 26px; font-size: 1.0625rem; }

/* El estado del envío. Se queda vacío hasta que hay algo que decir */
.formulario__estado {
  --estado-fondo: var(--hueso);
  --estado-texto: var(--texto);
  font-weight: 550;
}
.formulario__estado:not(:empty) {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--estado-texto); border-radius: 4px 12px 12px 4px;
  background: var(--estado-fondo); color: var(--estado-texto);
}
.formulario__estado[data-tono="ok"] { --estado-fondo: var(--ok-fondo); --estado-texto: var(--ok); }
.formulario__estado[data-tono="aviso"] { --estado-fondo: var(--aviso-fondo); --estado-texto: var(--aviso); }
.formulario__estado[data-tono="alerta"] { --estado-fondo: var(--alerta-fondo); --estado-texto: var(--alerta); }
.formulario__estado .sello { position: static; display: inline-block; margin: 2px 0 12px; translate: none; color: var(--ok); }

/* ───────── Inversores y pie ───────── */

.inversores-banda { padding-block: clamp(40px, 6vw, 64px); border-top: 1px solid var(--separador); }
.inversores-banda__dentro { display: grid; gap: 8px 40px; align-items: center; }
.inversores-banda__titulo { font-family: var(--letra-titulo); font-size: 1.5rem; font-weight: 600; }
.inversores-banda p { max-width: 36rem; color: var(--texto-2); }
@media (min-width: 860px) {
  .inversores-banda__dentro { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.pie { padding-block: 56px 48px; background: var(--escenario); color: var(--texto); }
.pie__dentro { display: grid; gap: 24px; }
.pie__marca { justify-self: start; color: var(--acento); border-radius: 8px; }
.pie__marca .logotipo { height: 34px; }
.pie__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; }
.pie__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); font-size: .9375rem; text-decoration: none; }
.pie__nav a:hover { color: var(--texto); text-decoration: underline; }
.pie__nota { max-width: 40rem; color: var(--texto-3); font-size: .875rem; }
.pie__tema {
  justify-self: start;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--separador); border-radius: 999px;
  background: none; color: var(--texto);
  font-size: .9375rem; font-weight: 600;
  transition: border-color var(--t-1);
}
.pie__tema:hover { border-color: var(--texto-3); }
@media (min-width: 860px) {
  .pie__dentro { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 48px; }
  .pie__nav { grid-column: 2 / 4; justify-self: end; }
  .pie__nota { grid-column: 1 / 3; }
  .pie__tema { grid-column: 3; justify-self: end; }
}

/* ───────── Páginas interiores ───────── */

/* Usan las piezas de la primera pantalla (heroe__*), pero sin el móvil en vivo ni sus reglas */
.portada { padding: clamp(28px, 5vw, 56px) 0 clamp(64px, 9vw, 112px); }
.portada--corta { padding-bottom: clamp(32px, 5vw, 56px); }
.portada--sola { padding-block: clamp(56px, 12vw, 152px); }
.portada--sola .heroe__titulo { max-width: 16ch; }

.cabecera__nav a[aria-current="page"] { color: var(--texto); background: rgb(127 118 136 / .12); }
.pie__nav a[aria-current="page"] { color: var(--texto); }

.ficha-estado { max-width: 34rem; margin-top: 40px; }
.ficha-estado__titulo { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.ficha-estado__titulo span { color: var(--texto-3); }
.ficha-estado dl { margin-top: 14px; border-top: 2px solid var(--texto); }
.ficha-estado dl > div { padding: 14px 0; border-bottom: 1px solid var(--separador); }
.ficha-estado dt { color: var(--acento); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ficha-estado dd { margin-top: 4px; color: var(--texto-2); }
@media (min-width: 640px) {
  .ficha-estado dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 20px; }
  .ficha-estado dt { padding-top: .3em; }
  .ficha-estado dd { margin-top: 0; }
}

.cifras { display: grid; gap: 40px 48px; }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cifra { padding-top: 18px; border-top: 2px solid var(--texto); }
.cifra__numero {
  display: block;
  color: var(--acento);
  font-family: var(--letra-titulo);
  font-size: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);
  font-weight: 580;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -.03em;
}
.cifra__texto { display: block; max-width: 28rem; margin-top: 14px; color: var(--texto-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.fuente { max-width: 46rem; margin-top: clamp(32px, 4vw, 48px); color: var(--texto-3); font-size: .875rem; line-height: 1.5; }

.hitos { list-style: none; border-top: 1px solid var(--separador); }
.hito { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--separador); }
/* En el móvil la fecha va encima; el orden del código sigue siendo título, fecha y texto */
.hito__cuando { order: -1; color: var(--acento); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
.hito__titulo { font-family: var(--letra-titulo); font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.hito__texto { max-width: 40rem; color: var(--texto-2); }
.hito--despues .hito__cuando { color: var(--texto-3); }
@media (min-width: 760px) {
  .hito { grid-template-columns: 14rem minmax(0, 1fr); column-gap: 32px; padding: 28px 0; }
  .hito__cuando {
    grid-column: 1; grid-row: 1 / span 2;
    padding-top: .2em;
    font-family: var(--letra-titulo); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.25; text-transform: none;
  }
  .hito__titulo,
  .hito__texto { grid-column: 2; }
}

.bloques { display: grid; gap: 56px; }
@media (min-width: 860px) { .bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 7vw, 112px); } }
.bloque__titulo {
  margin-top: 16px;
  font-family: var(--letra-titulo);
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);
  font-weight: 580;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.bloque > p:not(.antetitulo) { max-width: 32rem; margin-top: 16px; color: var(--texto-2); }

.legal { max-width: 44rem; padding-bottom: clamp(72px, 10vw, 136px); }
.legal h2 { margin-top: 48px; font-family: var(--letra-titulo); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.legal h2:first-child { margin-top: 0; }
.legal p,
.legal ul { margin-top: 14px; color: var(--texto-2); }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--texto); }
.legal .nota { margin-top: 0; margin-bottom: 40px; }

/* ───────── Movimiento reducido y alto contraste ───────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .comanda,
  .ficha,
  .formulario { -webkit-mask: none; mask: none; border: 1px solid CanvasText; }
  .chip,
  .puesto,
  .sello,
  .boton,
  .comanda__boton { border: 1px solid CanvasText; }
  .riel,
  .tramo__punto,
  .antetitulo::before { background: CanvasText; forced-color-adjust: none; }
}

/* ───────── W7 · lo que se añadió el 31/10, tarde ───────── */
.llamada--sobre-noche { margin-top: clamp(28px, 3.5vw, 44px); }
.mas { margin-top: 4px; border-top: 1px solid var(--separador); }
.mas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 10px 0; cursor: pointer; list-style: none;
  color: var(--acento); font-weight: 650; font-size: .9688rem;
}
.mas summary::-webkit-details-marker { display: none; }
.mas summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-2) var(--entra); }
.mas[open] summary::after { transform: rotate(-135deg); }
.mas summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 8px; }
.mas .capacidades { margin-top: 0; }
.casilla input[type="checkbox"] { width: 24px; height: 24px; }
.pregunta__respuesta a { font-weight: 600; }
.pie__nota a { text-decoration: underline; }
@media (max-width: 480px) {
  .pestanas-app__una { font-size: 11px; }
  .puesto, .comanda__origen { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mas summary::after { transition: none; } }

/* ═════════ W8 · La landing visual: menos texto, más movimiento ═════════
   Se animan transform y opacity (y, en los controles, el color de fondo o de borde, que no mueve nada). Todo lo que oculta algo al empezar cuelga de html.anima,
   que solo pone el JS cuando se puede animar: sin JS o con movimiento reducido, la página entera se lee y se usa. */

/* Entradas: cada elemento llega una vez, con el retraso de su sitio entre hermanos (--i) */
.anima [data-entra] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--t-3) var(--entra), transform var(--t-3) var(--entra);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.anima [data-entra="brota"] { transform: scale(.8); transition-timing-function: var(--entra), var(--muelle); }
.anima [data-entra="desliza"] { transform: translate3d(-28px, 0, 0); }
.anima [data-entra="asienta"] { transform: translate3d(0, 48px, 0) rotate(1.2deg); }
.anima [data-entra].visto { opacity: 1; transform: none; }
.anima [data-entra].listo { transition: opacity var(--t-2), transform var(--t-2) var(--entra); transition-delay: 0s; }
.anima .toma[id] { transform: none; }   /* los destinos de «Medir» y «Revisar» no quedan tapados por la cabecera */

/* Lo que se mueve sin parar solo se mueve mientras se ve */
.anima [data-vive]:not(.en-vista) *,
.anima [data-vive]:not(.en-vista) *::before,
.anima [data-vive]:not(.en-vista) *::after,
.anima [data-vive]:not(.en-vista)::before,
.anima [data-vive]:not(.en-vista)::after { animation-play-state: paused !important; }

@keyframes onda { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
@keyframes abre { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
@keyframes sube-letra { from { transform: translate3d(0, 112%, 0); } to { transform: none; } }
@keyframes entra-arriba { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-7rem, 4rem, 0) scale(1.18); } }
@keyframes corre { to { transform: translate3d(calc(var(--w, 900px) * -1), 0, 0); } }
@keyframes pulsa-dedo { from { opacity: .55; transform: scale(.4); } to { opacity: 0; transform: scale(1.9); } }

/* Cabecera: lo que llevas leído */
.cabecera__progreso { position: absolute; inset: auto 0 -1px 0; height: 2px; pointer-events: none; opacity: 0; }
.anima .cabecera__progreso { opacity: 1; }
.cabecera__progreso > span { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); }
.cabecera__nav a.activo { color: var(--texto); background: rgb(127 118 136 / .12); }

/* ───────── Héroe ───────── */

.heroe__sellos { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 28px; }
.luz { position: relative; }
.anima .luz::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ambar); animation: onda var(--pulso) var(--entra) infinite; }
.anima .heroe { overflow-x: clip; overflow-y: visible; }
.anima .heroe::after {
  content: ""; position: absolute; z-index: -1; right: -10rem; top: 4rem; width: 40rem; height: 40rem;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(233 174 72 / .2), transparent 65%);
  animation: deriva var(--deriva) ease-in-out infinite alternate;
}
.pal { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.pal > span { display: inline-block; animation: sube-letra var(--t-4) var(--entra) backwards; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
.anima .heroe__texto > :not(h1) { animation: entra-arriba var(--t-3) var(--entra) backwards; animation-delay: calc(560ms + var(--k, 0) * 90ms); }
.anima .heroe__texto > :nth-child(1) { --k: -4; }
.anima .heroe__texto > :nth-child(3) { --k: 0; }
.anima .heroe__texto > :nth-child(4) { --k: 1; }
.anima .heroe__texto > :nth-child(5) { --k: 2; }
.anima .heroe__producto { animation: entra-arriba var(--t-4) var(--entra) 260ms backwards; }
.heroe__producto .movil { will-change: translate; }

/* ───────── Franja ───────── */

.franja { border-block: 1px solid var(--separador); background: var(--superficie); }
.franja__ventana { overflow: hidden; }
.franja__pista { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; padding: 22px 0; }
.franja__pista li { display: flex; align-items: center; gap: 36px; white-space: nowrap; font-family: var(--letra-titulo); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 580; letter-spacing: -.01em; }
.franja__pista li::after { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); }
.franja__pista li:last-child::after { display: none; }
.anima .franja__pista { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: corre var(--cinta) linear infinite; }
.anima .franja__pista li { padding-right: 36px; }
.anima .franja__pista li:last-child::after { display: block; }
.anima .franja__ventana {
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.franja__ventana:hover .franja__pista { animation-play-state: paused; }
/* Pausar la cinta (WCAG 2.2.2): solo existe mientras la cinta se mueve (el JS le quita hidden); discreto, pero con 28 px de alto y borde de control */
.franja__pausa {
  position: relative; display: block; margin: -10px auto 10px; min-width: 72px; min-height: 28px; padding: 3px 14px;
  border: 1px solid var(--contorno-campo); border-radius: 999px; background: transparent; color: var(--texto-2);
  font-size: .75rem; font-weight: 650; letter-spacing: .04em; line-height: 1.3;
  transition: background-color var(--t-1), border-color var(--t-1), color var(--t-1);
}
.franja__pausa::after { content: ""; position: absolute; inset: -8px -4px; }   /* zona de toque de 44 px sin engordar el botón */
.franja__pausa:hover { background: var(--hueso); color: var(--texto); }
.franja__pausa[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.franja__pausa[aria-pressed="true"]:hover { background: var(--acento-pulsado); border-color: var(--acento-pulsado); }
.franja--pausada .franja__pista { animation-play-state: paused; }
@media (forced-colors: active) { .franja__pausa[aria-pressed="true"] { border-width: 3px; } }   /* sin colores propios, «pulsado» se nota en el borde */

/* ───────── Los dolores: una tarjeta cada uno, se abre al tocar ───────── */

.dolores__lista { list-style: none; display: grid; gap: 14px; align-items: start; }
@media (min-width: 640px) { .dolores__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .dolores__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dolor__caja { border: 1px solid var(--separador); border-radius: 22px; background: var(--superficie); transition: border-color var(--t-2), translate var(--t-2) var(--entra); }
.dolor__caja:hover { translate: 0 -4px; border-color: var(--acento); }
.dolor__caja[open] { border-color: var(--acento); }
.dolor__caja summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; padding: 18px 18px 18px; list-style: none; cursor: pointer; border-radius: 22px; }
.dolor__caja summary::-webkit-details-marker { display: none; }
.dolor__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--hueso); color: var(--acento); transition: transform var(--t-3) var(--muelle); }
.dolor__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dolor__caja:hover .dolor__icono, .dolor__caja[open] .dolor__icono { transform: rotate(-8deg) scale(1.1); }
.dolor__numero { color: var(--texto-3); font-family: var(--letra-titulo); font-size: 1rem; font-weight: 600; letter-spacing: .08em; }
.dolor__titulo { order: 1; flex: 0 0 100%; font-family: var(--letra-titulo); font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); font-weight: 600; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.dolor__sellos { order: 2; flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.dolor__mas, .capacidad__mas { flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--acento);
  background: linear-gradient(var(--acento) 0 0) center / 12px 2px no-repeat, linear-gradient(var(--acento) 0 0) center / 2px 12px no-repeat;
  transition: transform var(--t-2) var(--muelle); }
details[open] > summary > .dolor__mas, details[open] > summary > .capacidad__mas { transform: rotate(135deg); }
.dolor__cuerpo { display: grid; gap: 10px; padding: 0 18px 18px; color: var(--texto-2); font-size: .9375rem; line-height: 1.5; }
.dolor__respuesta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--separador); font-size: .875rem; }
details[open] > .dolor__cuerpo, details[open] > .capacidad__texto, details[open] > p { animation: abre var(--t-3) var(--entra); }

/* ───────── Un servicio en Casa Muestra ───────── */

.escenas { position: relative; padding-left: 36px; }
@media (min-width: 960px) { .escenas { padding-left: 60px; } }
.servicio__reloj { position: sticky; top: calc(var(--cabecera) + 12px); z-index: 6; height: 0; display: flex; justify-content: flex-end; align-items: flex-start; overflow: visible; pointer-events: none; }
.servicio__reloj .luz { display: none; }
.servicio__hora { display: inline-block; padding: 5px 14px 4px; border: 1px solid var(--separador); border-radius: 999px; background: var(--papel); box-shadow: 0 6px 18px var(--sombra-papel); color: var(--texto); font-family: var(--letra-titulo); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.escenas__linea { position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: var(--separador); }
.escenas__linea > span { position: absolute; inset: 0; border-radius: 1px; background: var(--acento); transform-origin: 50% 0; }
.anima .escenas__linea > span { transform: scaleY(0); }

.escena { position: relative; display: grid; gap: 28px; align-items: center; }
.escena + .escena { margin-top: clamp(64px, 9vw, 120px); }
.escena:first-of-type { margin-top: 0; }
@media (min-width: 900px) { .escena { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 88px); } }
.escena__punto { position: absolute; left: -35px; top: 6px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--separador); background: var(--papel); transition: background-color var(--t-2), border-color var(--t-2), transform var(--t-3) var(--muelle); }
@media (min-width: 960px) { .escena__punto { left: -59px; } }
.escena.activa .escena__punto { border-color: var(--acento); background: var(--acento); transform: scale(1.25); }
.anima .escena.activa .escena__punto::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--acento); animation: onda var(--pulso) var(--entra) infinite; }
.escena__hora { display: flex; align-items: center; gap: 10px; color: var(--acento); font-family: var(--letra-titulo); font-size: 1.0625rem; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.escena__hora::after { content: ""; width: 28px; height: 2px; border-radius: 1px; background: currentColor; }
.escena__titulo { margin-top: 10px; font-family: var(--letra-titulo); font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); font-weight: 580; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.escena__linea { margin-top: 12px; color: var(--texto-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.45; }
.escena__sellos { list-style: none; display: grid; gap: 8px; margin-top: 22px; }
.escena__sellos li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--texto-2); font-size: .9375rem; }

.escena__lado { display: flex; justify-content: center; }
.escena__pantalla { width: min(100%, 352px); margin: 8px; transition: scale var(--t-3) var(--entra); }
.anima .escena:not(.activa) .escena__pantalla { scale: .965; }
.pantalla {
  position: relative; display: flex; flex-direction: column; height: 472px; overflow: hidden;
  border-radius: 30px; background: var(--papel); color: var(--texto);
  box-shadow: 0 0 0 7px #100C14, 0 0 0 8px #4A4452, 0 44px 70px -34px var(--sombra-objeto);
  isolation: isolate;
}
.pantalla__barra { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px 18px; }
.pantalla__titulo { margin-right: auto; font-family: var(--letra-titulo); font-size: 1.1875rem; font-weight: 600; }
.pantalla__hora { color: var(--texto-2); font-size: .875rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.pantalla__repetir { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0 0 2px; border: 1px solid var(--separador); border-radius: 50%; background: var(--superficie); color: var(--acento); font-size: 1.25rem; line-height: 1; transition: transform var(--t-3) var(--muelle), background-color var(--t-1); }
.pantalla__repetir::after { content: ""; position: absolute; inset: -4px; }
.pantalla__repetir:hover { transform: rotate(-200deg); background: var(--hueso); }
.pantalla__cuerpo { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 18px 14px; }
.pantalla__demo { flex: none; padding: 6px 12px; border-top: 1px solid var(--separador); background: var(--hueso); color: var(--texto-2); font-size: .75rem; font-weight: 550; line-height: 16px; text-align: center; }

.dedo { position: absolute; left: 0; top: 0; z-index: 9; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--acento); background: rgb(110 46 120 / .2); opacity: 0; pointer-events: none; }
.dedo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--acento); opacity: 0; }
.dedo.toca::after { animation: pulsa-dedo var(--t-3) var(--entra); }

.sello--en-pantalla { display: none; }
.fichaje[data-estado="hecho"] .sello--en-pantalla,
.precio[data-estado="hecho"] .sello--en-pantalla,
.tanda:is([data-estado="merma"], [data-estado="gastada"]) .sello--en-pantalla,
.cierre[data-estado="cerrado"] .sello--en-pantalla { display: block; }

/* Escena 1 · fichar */
.fichaje { align-items: center; gap: 12px; text-align: center; }
.fichaje__quien { display: flex; align-items: center; gap: 10px; font-family: var(--letra-titulo); font-size: 1.125rem; font-weight: 600; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-family: var(--letra-texto); font-size: .8125rem; font-weight: 700; }
.fichaje__pedir { color: var(--texto-2); font-size: .9375rem; }
.fichaje__puntos { display: flex; gap: 16px; height: 18px; }
.fichaje__puntos i { width: 14px; height: 14px; border: 2px solid var(--acento); border-radius: 50%; transition: transform var(--t-2) var(--muelle), background-color var(--t-1); }
.fichaje__puntos i.lleno { background: var(--acento); transform: scale(1.2); }
.teclado { display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; justify-content: center; margin-top: 4px; transition: opacity var(--t-2); }
.fichaje[data-estado="hecho"] .teclado { opacity: .62; }
.teclado button { display: grid; place-items: center; height: 40px; border: 1px solid var(--separador); border-radius: 12px; background: var(--superficie); font-family: var(--letra-titulo); font-size: 1.1875rem; font-weight: 600; transition: transform var(--t-1) var(--entra), background-color var(--t-1); }
.teclado button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--texto-2); }
.teclado button:hover { background: var(--hueso); }
.teclado button:active, .teclado button.pulsada { transform: scale(.9); background: var(--hueso); }

/* Escena 2 · el albarán */
.albaran__prov { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--texto-2); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.albaran__prov .chip { margin-left: 0; text-transform: none; letter-spacing: 0; }
.albaran__lineas { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 12px; border: 1px solid var(--separador); border-radius: 14px; background: var(--superficie); transition: border-color var(--t-2); }
.linea--sube { border-color: var(--aviso); }
.linea__nombre { font-size: .9375rem; font-weight: 650; line-height: 1.25; }
.linea__nombre small { display: block; color: var(--texto-3); font-size: .75rem; font-weight: 500; }
.linea__precio { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--letra-titulo); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.linea__antes { color: var(--texto-3); font-size: .8125rem; font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; }
.linea__pct { grid-column: 2; justify-self: end; margin-left: 0; }
.albaran__fc s { color: var(--texto-3); }
.albaran__fc { color: var(--alerta); font-weight: 700; }
.albaran__aviso { margin-top: 12px; }
.albaran__aviso .comanda__boton { margin-top: 10px; min-height: 40px; }
.albaran__bueno { margin-top: 14px; }
.albaran[data-estado="recibido"] :is(.linea__antes, .linea__pct, .albaran__aviso) { display: none; }
.albaran[data-estado="aviso"] .albaran__bueno { display: none; }
.albaran[data-estado="aviso"] .albaran__aviso .comanda { animation: colgar var(--t-3) var(--muelle) backwards; transform-origin: 50% 0; }
.albaran[data-estado="aviso"] .linea__pct { animation: pop var(--t-3) var(--muelle) backwards; }

/* Escena 3 · el precio */
.precio { gap: 8px; }
.precio__plato { font-family: var(--letra-titulo); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; }
.precio__pvp { font-family: var(--letra-titulo); font-size: 3.25rem; font-weight: 580; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.precio__pvp output { font: inherit; }
.precio__control { margin-top: 2px; }
.precio__control input { display: block; width: 100%; height: 40px; margin: 0; background: transparent; cursor: grab; -webkit-appearance: none; appearance: none; }
.precio__control input:active { cursor: grabbing; }
.precio__control input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--separador); }
.precio__control input::-moz-range-track { height: 8px; border-radius: 4px; background: var(--separador); }
.precio__control input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 3px solid var(--superficie); border-radius: 50%; background: var(--acento); box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.precio__control input::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid var(--superficie); border-radius: 50%; background: var(--acento); box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.precio__control input:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 8px; }
.precio__control input:disabled { opacity: .45; cursor: default; }
.precio__extremos { display: flex; justify-content: space-between; color: var(--texto-3); font-size: .75rem; font-variant-numeric: tabular-nums; }
.escala--fc { margin-top: 14px; }
.escala--fc .escala__relleno { background: var(--aviso); }
.escala--fc[data-nivel="ok"] .escala__relleno { background: var(--ok); }
.escala--fc[data-nivel="alerta"] .escala__relleno { background: var(--alerta); }
.escala--fc .escala__relleno { transition: transform var(--t-3) var(--entra), background-color var(--t-2); }
.escala--fc { --v: .858; }
.precio__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.precio__cifras p { color: var(--texto-2); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.precio__cifras b { display: block; margin-top: 2px; color: var(--texto); font-family: var(--letra-titulo); font-size: 1.5rem; font-weight: 580; font-variant-numeric: tabular-nums; }
.precio__boton { margin-top: auto; }
.precio[data-estado="hecho"] .precio__boton { display: none; }

/* Escena 4 · la tanda */
.tanda { gap: 2px; }
.tanda__nombre { font-family: var(--letra-titulo); font-size: 1.625rem; font-weight: 600; line-height: 1.15; }
.tanda__sub { color: var(--texto-2); font-size: .875rem; }
.tanda__quedan { margin-top: 14px; font-family: var(--letra-titulo); font-size: 2.5rem; font-weight: 580; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tanda:not([data-estado="vida"]) .tanda__quedan { color: var(--alerta); }
.tanda__barra { height: 10px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: var(--separador); }
.tanda__barra > span { display: block; height: 100%; background: var(--aviso); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform var(--t-3) var(--entra), background-color var(--t-2); }
.tanda:not([data-estado="vida"]) .tanda__barra > span { background: var(--alerta); }
.tanda__acciones { display: flex; gap: 8px; margin-top: 18px; }
.tanda:is([data-estado="merma"], [data-estado="gastada"]) .tanda__acciones { display: none; }
.boton-pantalla { flex: 1; min-height: 46px; padding: 0 10px; border: 1.5px solid var(--acento); border-radius: 13px; background: transparent; color: var(--acento); font-size: .9375rem; font-weight: 650; line-height: 1.15; transition: transform var(--t-1) var(--entra), background-color var(--t-1); }
.boton-pantalla:active { transform: scale(.96); }
.boton-pantalla--fuerte { background: var(--acento); color: var(--sobre-acento); }
.tanda__tirado { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--separador); color: var(--texto-2); font-size: .875rem; font-weight: 600; }
.tanda__tirado b { margin-left: 6px; color: var(--texto); font-family: var(--letra-titulo); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Escena 5 · el recuento */
.recuento__cifra { color: var(--texto-2); font-size: .9375rem; font-weight: 600; }
.recuento__cifra b { margin-right: 4px; color: var(--texto); font-family: var(--letra-titulo); font-size: 2.75rem; font-weight: 580; font-variant-numeric: tabular-nums; line-height: 1; }
.recuento__barra { height: 10px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: var(--separador); }
.recuento__barra > span { display: block; height: 100%; background: var(--ok); transform-origin: 0 50%; transform: scaleX(var(--v, .692)); transition: transform var(--t-3) var(--entra); }
.recuento__zona { margin-top: 18px; color: var(--texto-2); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.recuento__lista { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.recuento__lista li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--separador); border-radius: 14px; background: var(--superficie); }
.recuento__nombre { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 650; line-height: 1.2; }
.recuento__nombre small { display: block; color: var(--texto-3); font-size: .75rem; font-weight: 500; }
.contar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 104px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--acento); border-radius: 999px; background: transparent; color: var(--acento); font-size: .875rem; font-weight: 650; transition: transform var(--t-1) var(--entra), background-color var(--t-2), color var(--t-2); }
.contar svg { display: none; flex: none; width: 14px; height: 14px; }
.contar.es-contado { border-color: transparent; background: var(--ok-fondo); color: var(--ok); }
.contar.es-contado svg { display: block; animation: pop var(--t-2) var(--muelle); }
.contar:active { transform: scale(.95); }

/* Escena 6 · el cierre */
.cierre { gap: 10px; }
.cierre__frase { font-family: var(--letra-titulo); font-size: 1.625rem; font-weight: 600; line-height: 1.15; }
.cierre__lista { list-style: none; display: grid; gap: 8px; margin-top: 8px; transition: opacity var(--t-2); }
.cierre[data-estado="cerrado"] .cierre__lista { opacity: .7; }
.cierre__lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--separador); border-radius: 14px; background: var(--superficie); font-size: .9375rem; font-weight: 650; }
.cierre__visto { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 2px solid var(--contorno-campo); border-radius: 50%; color: transparent; transition: background-color var(--t-2), border-color var(--t-2), color var(--t-2); }
.cierre__visto svg { width: 14px; height: 14px; }
.cierre__lista li.es-hecho .cierre__visto { border-color: var(--ok); background: var(--ok); color: var(--superficie); }
.cierre__lista li.es-hecho .cierre__visto svg { animation: pop var(--t-2) var(--muelle); }
.cierre__boton { margin-top: auto; }
.cierre[data-estado="cerrado"] .cierre__boton { display: none; }

/* ───────── Cómo funciona ───────── */

.seccion--alterna.mano { background: var(--hueso); }
.flujo { position: relative; list-style: none; display: grid; gap: 28px; }
.flujo::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: repeating-linear-gradient(var(--contorno-campo) 0 6px, transparent 6px 12px); opacity: .7; }
.anima .flujo::after { content: ""; position: absolute; left: 31px; top: 32px; width: 2px; height: calc((100% - 64px) * .2); background: linear-gradient(transparent, var(--acento)); animation: viaja-v var(--ciclo) linear infinite; }
@keyframes viaja-v { from { transform: translate3d(0, -100%, 0); } 80%, to { transform: translate3d(0, 500%, 0); } }
@keyframes viaja-h { from { transform: translate3d(-100%, 0, 0); } 80%, to { transform: translate3d(500%, 0, 0); } }
@keyframes anillo { 0% { opacity: .9; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.6); } }
.nodo { position: relative; z-index: 1; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px 18px; }
.nodo__icono { position: relative; grid-row: 1 / span 2; display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--acento); border-radius: 50%; background: var(--superficie); color: var(--acento); }
.nodo__icono svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anima .nodo__icono::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--acento); border-radius: 50%; opacity: 0; animation: anillo var(--ciclo) var(--entra) infinite; animation-delay: calc(var(--i, 0) * 1.25s); }
.nodo__titulo { align-self: end; font-family: var(--letra-titulo); font-size: 1.375rem; font-weight: 600; line-height: 1.15; }
.nodo__sellos { display: flex; flex-wrap: wrap; gap: 6px; align-self: start; }
@media (min-width: 860px) {
  .flujo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .flujo::before { left: 12.5%; right: 12.5%; top: 31px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--contorno-campo) 0 6px, transparent 6px 12px); }
  .anima .flujo::after { left: 12.5%; top: 31px; width: calc((100% - 0px) * .75 * .2); height: 2px; background: linear-gradient(90deg, transparent, var(--acento)); animation-name: viaja-h; }
  .nodo { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .nodo__icono { grid-row: auto; }
  .nodo__titulo, .nodo__sellos { align-self: auto; justify-content: center; }
}
.recorrido { list-style: none; display: grid; gap: 18px; padding: 8px 0 20px; }
.recorrido h3 { font-family: var(--letra-titulo); font-size: 1.1875rem; font-weight: 600; }
.recorrido p { max-width: 46rem; margin-top: 4px; color: var(--texto-2); }
.mas--claro { margin-top: 18px; border-top-color: rgb(255 252 247 / .3); }
.mas--claro summary { color: var(--sobre-acento); }
/* El aro de foco normal es del color del fondo de la tríada y no se vería: aquí va del color del texto que hay encima (claro y oscuro) */
.triada :focus-visible,
.mas--claro summary:focus-visible { outline-color: var(--sobre-acento); }
.triada__texto { list-style: none; display: grid; gap: 12px; padding: 4px 0 16px; max-width: 46rem; }
.triada__lista h3 { padding-bottom: 14px; }
.triada__lista li { position: relative; }
.triada__lista li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 2px; background: var(--ambar); transform-origin: 0 50%; transition: transform var(--t-4) var(--entra) calc(var(--i, 0) * 120ms + 300ms); }
.anima .triada__lista li:not(.visto)::after { transform: scaleX(0); }
.triada__lista { margin-top: 18px; gap: 20px; }

/* ───────── Las áreas, en pestañas ───────── */

.areas__tabs { display: flex; gap: 8px; margin-bottom: 14px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: none; }
.areas__tabs::-webkit-scrollbar { display: none; }
html:not(.js) .areas__tabs { display: none; }
.areas__tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border: 1.5px solid var(--separador); border-radius: 999px; background: var(--superficie); color: var(--texto-2); font-size: .9688rem; font-weight: 650; transition: background-color var(--t-2), color var(--t-2), border-color var(--t-2), transform var(--t-2) var(--muelle); }
.areas__tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.areas__tab:hover { border-color: var(--acento); color: var(--acento); }
.areas__tab[aria-selected="true"] { border-color: var(--acento); background: var(--acento); color: var(--sobre-acento); transform: scale(1.04); }
.areas__panel { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--separador); border-radius: 26px; background: var(--superficie); }
html:not(.js) .areas__panel + .areas__panel { margin-top: 20px; }
.areas__panel:focus-visible { outline-offset: 4px; }
.area__titulo { margin-top: 0; }
.capacidades { list-style: none; display: grid; margin-top: 20px; }
.capacidad { border-top: 1px solid var(--separador); }
.capacidad summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 60px; padding: 12px 0; list-style: none; cursor: pointer; border-radius: 10px; }
.capacidad summary::-webkit-details-marker { display: none; }
.capacidad h4 { flex: 1 1 14rem; margin: 0; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.capacidad .estado { order: 1; }
.capacidad__mas { order: 2; margin-left: 0; width: 24px; height: 24px; }
.capacidad > details > p { max-width: 38rem; padding: 0 0 18px; color: var(--texto-2); font-size: .9688rem; line-height: 1.5; }
.area__nota { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--separador); color: var(--texto-3); font-size: .9375rem; }
@media (min-width: 720px) { .capacidad h4 { flex-basis: 20rem; } .capacidad summary { flex-wrap: nowrap; } .capacidad .estado { order: 1; } }

/* ───────── La pizarra ───────── */

.escala__relleno { width: 100%; transform-origin: 0 50%; transform: scaleX(var(--v, .69)); transition: transform var(--t-4) var(--entra) 300ms; }
.anima .panel:not(.visto) .escala__relleno { transform: scaleX(0); }
.escala--fc .escala__relleno { transition-delay: 0s; transform: scaleX(var(--v, .858)); }
.ratio { transition: translate var(--t-2) var(--entra), border-color var(--t-2); }
.ratio:not(.ratio--plan):hover { translate: 0 -3px; border-color: var(--acento); }
.subidas__porc { display: inline-block; transition: transform var(--t-3) var(--muelle) 900ms; }
.anima .panel:not(.visto) .subidas__porc { transform: scale(0); }
.subidas__antes { transition: opacity var(--t-3) 600ms; }
.anima .panel:not(.visto) .subidas__antes { opacity: 0; }

/* ───────── Capturas ───────── */

.rail__mandos { display: flex; gap: 10px; margin-top: 4px; }
@media (min-width: 1100px) { .rail__mandos { display: none; } }
.rail__boton { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--separador); border-radius: 50%; background: var(--superficie); color: var(--acento); transition: transform var(--t-2) var(--muelle), background-color var(--t-1); }
.rail__boton:hover { background: var(--hueso); }
.rail__boton:active { transform: scale(.92); }
.chevron--izq { transform: scaleX(-1); }
.toma img { transition: translate var(--t-3) var(--entra); }
.toma:hover img { translate: 0 -8px; }
.rail:focus-visible { outline-offset: 2px; }

/* ───────── Dónde está ───────── */

.tramos { position: relative; }
.tramo::before { content: none; }
.tramos::before, .tramos::after { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 2px; }
.tramos::before { background: var(--separador); }
.tramos::after { background: var(--acento); transform-origin: 50% 0; transition: transform var(--t-5) var(--entra) 200ms; }
.anima .tramos:not(.visto)::after { transform: scaleY(0); }
.tramo__punto { transition: transform var(--t-3) var(--muelle) calc(var(--i, 0) * 450ms + 250ms); }
.anima .tramos:not(.visto) .tramo__punto { transform: scale(0); }
.anima .tramo--desarrollo .tramo__punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ambar); animation: onda var(--pulso) var(--entra) infinite; }
@media (min-width: 860px) {
  .tramos::before, .tramos::after { left: 10px; right: 10px; top: 10px; bottom: auto; width: auto; height: 2px; }
  .tramos::after { transform-origin: 0 50%; }
  .anima .tramos:not(.visto)::after { transform: scaleX(0); }
}

/* ───────── Para quién y preguntas ───────── */

.quien__bloque li { transition: opacity var(--t-3) var(--entra), transform var(--t-3) var(--entra); }
.pregunta[open] > .pregunta__respuesta { animation: abre var(--t-3) var(--entra); }

/* ───────── Llamadas y formulario ───────── */

.llamada .boton { position: relative; }
.anima .llamada.visto .boton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--sobre-acento); opacity: 0; animation: onda var(--pulso) var(--entra) 1.2s infinite; pointer-events: none; }

/* ───────── Movimiento reducido: todo quieto, completo y manejable ───────── */

@media (prefers-reduced-motion: reduce) {
  .pal > span, .anima .heroe__texto > *, .anima .heroe__producto { animation: none; }
  .franja__pista { animation: none !important; }
  .escenas__linea > span { transform: none !important; }
}
@media (forced-colors: active) {
  .dolor__mas, .capacidad__mas, .pantalla, .dedo { forced-color-adjust: none; border: 1px solid CanvasText; }
  .escenas__linea, .tramos::before { background: CanvasText; }
}

/* ───────── W8 · revisión del 01/11: tacto, sellos que no tapan y listas alineadas ───────── */

/* Tocable de verdad: 44 px como mínimo, sin cambiar el aire de las pantallas */
.pantalla__repetir { width: 44px; height: 44px; margin: -4px -4px -4px 0; }
.pantalla__repetir::after { content: none; }
.teclado button { height: 44px; }
.comanda__verbo { min-height: 44px; margin-block: -12px; }
.contar { min-height: 44px; }
.albaran__aviso .comanda__boton { min-height: 44px; }
.precio__control input { height: 44px; }
.mas summary { min-height: 48px; }
.pie__marca { display: inline-flex; align-items: center; min-height: 44px; }
.casilla a, .pie__nota a { padding-block: 12px; }

/* Viñetas de la lista de espera, dentro de la columna */
.acceso__claves { list-style: disc inside; padding: 0; margin-top: 16px; display: grid; gap: 6px; color: var(--texto-2); }

/* Los sellos de las pantallas se posan debajo y no tapan lo que se acaba de hacer */
.fichaje .sello--en-pantalla { top: 58px; translate: -50% 0; }   /* sobre «Escribe tu PIN», que ya no hace falta */
.cierre .sello--en-pantalla { top: auto; bottom: 10px; translate: -50% 0; }

/* El precio actual no se «sube» a sí mismo (como en la app, donde esa acción queda desactivada) */
.precio__boton:disabled { opacity: .45; cursor: default; }
.precio__boton:disabled:hover { background: var(--acento); }

/* La hora del servicio, en el carril de la línea y no encima del texto */
@media (max-width: 719px) {
  .servicio__reloj { justify-content: flex-start; margin-left: -43px; }
  /* 12 px como mínimo; el relleno lateral baja para que la píldora siga cabiendo en el carril (43 px) sin pisar el texto de la escena */
  .servicio__hora { padding: 2px 3px 1px; font-size: .75rem; letter-spacing: 0; box-shadow: none; }
}

/* «Ver otra vez» se enseña cuando el JS ha montado la escena (data-jugable): con movimiento la cuenta otra vez; quieto, la deja en su inicio para jugarla a mano.
   Sin JS no hay nada que repetir. Quieto tampoco gira al pasar el ratón */
.escena:not([data-jugable]) .pantalla__repetir { display: none; }
@media (prefers-reduced-motion: reduce) { .pantalla__repetir:hover { transform: none; } }

/* Dolores en móvil: cuatro a la vista y «Ver los otros N» (sin JS se ven todos) */
.dolores__lista[data-recortada] > li:nth-child(n + 5) { display: none; }
.dolores__ver { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px; padding: 0 18px; border: 1.5px solid var(--acento); border-radius: 14px; background: transparent; color: var(--acento); font-size: 1rem; font-weight: 650; transition: background-color var(--t-1), transform var(--t-1) var(--entra); }
.dolores__ver:hover { background: var(--hueso); }
.dolores__ver:active { transform: scale(.98); }
.dolores__ver[hidden] { display: none; }

/* Imprimir o guardar como PDF sin haber recorrido la página: todo visible y los paneles de «Qué hace» abiertos */
@media print {
  .anima [data-entra] { opacity: 1; transform: none; }
  [role="tabpanel"][hidden] { display: block !important; }
}