/* ===========================================================================
   Portada hibrida: base clara de taller, con islas oscuras donde hay producto.
   Todo el color vive aqui arriba. Cada par de texto y fondo esta medido contra
   el nivel AA de WCAG 2.2 y las cifras estan en el LEEME de esta carpeta.
   =========================================================================== */

:root {
  /* superficies */
  --papel: #f3f6f8;
  --tarjeta: #ffffff;
  --isla: #ffffff;
  --isla-alta: #f3f6f8;

  /* tinta */
  --tinta: #182b38;
  --tinta-suave: #4e6273;
  --isla-tinta: #182b38;
  --isla-suave: #4e6273;

  /* los tres colores que significan algo, y solo eso */
  --accion: #2459d3;        /* lo que se toca y lo que esta seleccionado */
  --cota: #00666a;          /* el suelo demostrado, y nada mas */
  --cambio: #b0451c;        /* la distancia al suelo, y los cambios de familia */
  --isla-accion: #2459d3;
  --isla-cota: #00666a;
  --isla-cambio: #b0451c;

  /* trazos */
  --linea: #cbd8e1;
  /* 3,47 sobre el papel y 3,76 sobre la tarjeta: es el unico borde que delimita las cajas de
     los esquemas, asi que le aplica el 3:1 de WCAG 1.4.11. Con #8199a9 daba 2,74. */
  --linea-fuerte: #6f8796;
  --isla-linea: #cbd8e1;

  /* las familias del ejemplo, siempre con etiqueta al lado */
  --fam-c: #7a5b00;
  --fam-k: #2f4858;
  --fam-t: #1f6b52;
  --fam-c-suave: #f5e6b8;
  --fam-k-suave: #d7e3ec;
  --fam-t-suave: #cdeade;

  /* ritmo */
  --aire: 40px;
  --aire-seccion: 128px;
  --radio: 3px;
  --sombra: 0 1px 2px rgba(24, 43, 56, .06), 0 8px 24px rgba(24, 43, 56, .06);

  --titular: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --texto: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Las tipografias se sirven como ficheros, autoalojadas y con cache larga. Abierta con doble clic
   desde una carpeta, Chrome no las carga y cae a la de respaldo: la web se publica por HTTPS. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fuentes/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fuentes/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fuentes/ibm-plex-sans-var.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .cifra-grande {
  font-family: var(--titular);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: .004em;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accion); text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 3px solid var(--accion);
  outline-offset: 3px;
  border-radius: 2px;
}
.isla :focus-visible { outline-color: var(--isla-accion); }

/* --- rejilla y aire ------------------------------------------------------ */

.envoltura {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--aire);
}
.envoltura--ancha { max-width: 1340px; }


/* La barra es pegajosa, asi que un salto interno dejaria el titulo debajo de ella. */
section[id], .seccion { scroll-margin-top: 86px; }

.seccion { padding-block: var(--aire-seccion); }
.seccion + .seccion { padding-top: 0; }

.rejilla {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.rejilla--pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

/* --- rotulos de seccion -------------------------------------------------- */

.rotulo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--texto);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 20px;
}
.rotulo::before {
  content: attr(data-numero);
  font-variant-numeric: tabular-nums;
  color: var(--accion);
}
.rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linea);
}
.isla .rotulo { color: var(--isla-suave); }
.isla .rotulo::before { color: var(--isla-accion); }
.isla .rotulo::after { background: var(--isla-linea); }

h2 { font-size: clamp(34px, 3.6vw, 50px); margin-bottom: 20px; }
h3 { font-size: 23px; margin-bottom: 10px; }

.entradilla {
  font-size: 20px;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.isla .entradilla { color: var(--isla-suave); }

.nota {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.isla .nota { color: var(--isla-suave); }

/* --- barra --------------------------------------------------------------- */

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--tinta);
  color: var(--tarjeta);
  padding: 12px 18px;
  z-index: 50;
}
.saltar:focus { left: 16px; top: 16px; position: fixed; }

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Opaca a proposito: al 94 % y compuesta encima de la isla oscura, el texto de la barra
     bajaba de 5,21 a 5,18 y ninguna cuenta hecha sobre el color declarado lo veia. */
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.barra > .envoltura {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
  padding-block: 10px;
  flex-wrap: wrap;
}
.marca {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: .02em;
  color: var(--tinta);
  text-decoration: none;
}
.barra nav { display: flex; gap: 22px; flex-wrap: wrap; }
.barra nav a {
  font-size: 14.5px;
  color: var(--tinta-suave);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.barra nav a:hover { color: var(--tinta); border-bottom-color: var(--accion); }
.barra .boton { margin-left: auto; }

.boton {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: var(--radio);
  border: 1px solid var(--accion);
  background: var(--accion);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.boton--hueco { background: transparent; color: var(--accion); }
.isla .boton--hueco { border-color: var(--isla-accion); color: var(--isla-accion); }

/* --- islas --------------------------------------------------------------- */

.isla {
  border-block: 1px solid var(--isla-linea);
  background: var(--isla);
  color: var(--isla-tinta);
  padding-block: var(--aire-seccion);
  margin-block: var(--aire-seccion);
}
.isla + .seccion { padding-top: 0; }
/* Dos islas seguidas son una sola superficie: entre ellas no va el aire de fuera. */
.isla--seguida { margin-top: calc(var(--aire-seccion) * -1); padding-top: 0; }
.isla h2, .isla h3 { color: var(--isla-tinta); }

/* --- la pantalla real del producto --------------------------------------- */

.pantalla { margin: 52px 0 0; }
.pantalla img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--isla-linea);
  border-radius: 10px;
  background: var(--isla-alta);
  box-shadow: 0 1px 2px rgba(24, 43, 56, .06), 0 18px 48px rgba(24, 43, 56, .12);
}
.pantalla-marco { border-radius: var(--radio); }
.pantalla figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--isla-suave);
}

/* --- tarjetas ------------------------------------------------------------ */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 30px 32px;
  box-shadow: var(--sombra);
}
.isla .tarjeta {
  background: var(--isla-alta);
  border-color: var(--isla-linea);
  box-shadow: none;
}

/* --- ampliaciones plegables ---------------------------------------------- */

details.amplia {
  border-top: 1px solid var(--linea);
  padding-top: 14px;
  margin-top: 22px;
}
details.amplia > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accion);
  list-style: none;
}
details.amplia > summary::-webkit-details-marker { display: none; }
details.amplia > summary::before { content: '+ '; font-variant-numeric: normal; }
details.amplia[open] > summary::before { content: '– '; }
details.amplia > div { padding-top: 12px; }
.isla details.amplia { border-top-color: var(--isla-linea); }
.isla details.amplia > summary { color: var(--isla-accion); }

/* =========================================================================
   1. La portada y el tablero
   ========================================================================= */

.hero { padding-top: 56px; padding-bottom: 20px; }

/* La categoria: lo primero que se lee, y dice de que producto se trata antes que ninguna promesa. */
.categoria {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cota);
  margin: 0 0 18px;
}

/* Las cuatro respuestas de la primera pantalla: que es, para quien, que obtienes y que haces ahora. */
.treinta-segundos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 44px 0 0;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.treinta-segundos > div { background: var(--tarjeta); padding: 24px 26px 26px; }
.treinta-segundos dt {
  font-family: var(--titular);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .01em;
  margin-bottom: 8px;
}
.treinta-segundos dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--tinta-suave); }
.hero h1 {
  font-size: clamp(38px, 4.9vw, 68px);
  font-weight: 700;
  letter-spacing: -.004em;
  max-width: 1140px;
  margin-bottom: 36px;
}
.rejilla--hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.hero .pregunta { color: var(--cambio); }
.hero .entradilla { font-size: 20px; }
.hero .acciones { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

.tablero { margin-top: 56px; }

.panel {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.panel-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(var(--papel), var(--tarjeta));
  flex-wrap: wrap;
}
.panel-cabeza h3 { font-size: 20px; }
.panel-cuerpo { padding: 28px; }

.mandos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.mandos button {
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  border: 1px solid var(--linea-fuerte);
  background: var(--tarjeta);
  color: var(--tinta);
  border-radius: var(--radio);
  cursor: pointer;
}
.mandos button:hover { border-color: var(--accion); color: var(--accion); }

.linea-produccion { position: relative; }
.pista {
  position: relative;
  height: 86px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--paso) - 1px), var(--linea) calc(var(--paso) - 1px) var(--paso));
  background-color: var(--papel);
}
.lote {
  position: absolute;
  top: 9px;
  height: 68px;
  border: 1px solid;
  border-radius: 2px;
  padding: 6px 8px;
  font-size: 12.5px;
  line-height: 1.25;
  cursor: grab;
  overflow: hidden;
  user-select: none;
}
.lote[data-familia="C"] { background: var(--fam-c-suave); border-color: var(--fam-c); color: #4b3800; }
.lote[data-familia="K"] { background: var(--fam-k-suave); border-color: var(--fam-k); color: #21323e; }
.lote[data-familia="T"] { background: var(--fam-t-suave); border-color: var(--fam-t); color: #134534; }
.lote strong { display: block; font-size: 14px; font-family: var(--titular); font-weight: 700; letter-spacing: .02em; }
.lote.tarde { box-shadow: inset 0 -5px 0 var(--cambio); }
.lote.agarrado { cursor: grabbing; opacity: .5; }
.lote.destino { outline: 2px dashed var(--accion); outline-offset: 1px; }

.limpieza {
  position: absolute;
  top: 9px;
  height: 68px;
  background: repeating-linear-gradient(45deg, #efe2da 0 5px, #e2cfc3 5px 10px);
  border: 1px solid var(--cambio);
  border-radius: 2px;
}
.limpieza span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #6d2a0f;
}

.leyenda-lotes {
  display: none;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.regla-horas {
  position: relative;
  height: 24px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--tinta-suave);
}
.regla-horas span { position: absolute; transform: translateX(-50%); }

.veredicto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}
.veredicto .frase { font-size: 18px; line-height: 1.5; }
.veredicto .frase b { color: var(--cambio); }
.veredicto.cerrado .frase b { color: var(--cota); }

.termometro { width: 250px; padding-bottom: 38px; }
.termometro-caja {
  position: relative;
  height: 168px;
  border-left: 2px solid var(--linea-fuerte);
  border-bottom: 2px solid var(--linea-fuerte);
  margin-left: 4px;
}
.termometro-cero {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.termometro-hueco-rotulo {
  position: absolute;
  left: 8px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--cambio);
}
.termometro-marca {
  position: absolute;
  left: 0;
  right: -14px;
  border-top: 2px solid;
  font-size: 12px;
  font-weight: 600;
  padding-left: 8px;
  white-space: nowrap;
}
.termometro-marca.suelo { border-color: var(--cota); color: var(--cota); }
.termometro-marca.tuyo { border-color: var(--cambio); color: var(--cambio); }
.termometro-hueco {
  position: absolute;
  left: 0; right: 0;
  background: repeating-linear-gradient(45deg, rgba(176,69,28,.10) 0 6px, rgba(176,69,28,.20) 6px 12px);
}
.termometro-prohibido {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(24,43,56,.05) 0 6px, rgba(24,43,56,.10) 6px 12px);
}

/* =========================================================================
   2. El calibrador de holgura
   ========================================================================= */

.calibrador { margin-top: 48px; }

.calibrador-cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--isla-linea);
  border: 1px solid var(--isla-linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 26px;
}
.calibrador-cifras > div { background: var(--isla-alta); padding: 20px 24px; }
.calibrador-cifras dt {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--isla-suave);
  margin-bottom: 6px;
}
.calibrador-cifras dd {
  margin: 0;
  font-family: var(--titular);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .01em;
}
.calibrador-cifras .plan dd { color: var(--isla-cambio); }
.calibrador-cifras .cota dd { color: var(--isla-cota); }
.calibrador-cifras .hueco dd { color: var(--isla-tinta); }
.calibrador-cifras dd.explica { display: block; margin: 7px 0 0; font: 400 13px/1.45 var(--texto); color: var(--isla-suave); }

.leyenda { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 14px; font-size: 14px; }
.llave { display: inline-flex; align-items: center; gap: 9px; color: var(--isla-suave); }
.llave::before { content: ''; width: 20px; height: 3px; border-radius: 2px; flex: none; }
.llave--plan::before { background: var(--isla-cambio); }
.llave--cota::before { background: var(--isla-cota); }

.grafica { position: relative; }
.grafica svg { display: block; width: 100%; height: auto; }

.mando-fila {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.mando-fila input[type="range"] { flex: 1; min-width: 220px; accent-color: var(--isla-accion); }
.mando-fila button {
  font: inherit;
  font-size: 14px;
  padding: 8px 18px;
  border: 1px solid var(--isla-accion);
  background: transparent;
  color: var(--isla-accion);
  border-radius: var(--radio);
  cursor: pointer;
  min-width: 118px;
}
.mando-fila .paso-rotulo { font-size: 14px; color: var(--isla-suave); min-width: 190px; }

.saltos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.saltos button {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 14px;
  border: 1px solid var(--isla-linea);
  background: transparent;
  color: var(--isla-suave);
  border-radius: var(--radio);
  cursor: pointer;
}
.saltos button:hover { border-color: var(--isla-accion); color: var(--isla-accion); }
.saltos button[disabled] { opacity: .45; cursor: default; }


.momento {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--isla-accion);
  background: var(--isla-alta);
  font-size: 15.5px;
  line-height: 1.55;
  min-height: 58px;
}
.momento b { color: var(--isla-tinta); }

.tira-plan { margin-top: 26px; }
.tira-plan-pista {
  position: relative;
  height: 44px;
  background: var(--isla-alta);
  border: 1px solid var(--isla-linea);
  border-radius: var(--radio);
}
.tira-lote {
  position: absolute;
  top: 5px;
  height: 32px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #0d141a;
  transition: left .18s ease, width .18s ease;
}
.tira-lote[data-familia="C"] { background: #e8c85f; }
.tira-lote[data-familia="K"] { background: #93b4c9; }
.tira-lote[data-familia="T"] { background: #6fc9a5; }
.tira-lote.movido { box-shadow: 0 0 0 2px var(--isla-cambio); }
.tira-limpieza {
  position: absolute;
  top: 5px;
  height: 32px;
  background: var(--hueco-tira, repeating-linear-gradient(45deg, #efe2da 0 5px, #e2cfc3 5px 10px));
  border-radius: 2px;
}

/* =========================================================================
   Esquemas SVG comunes
   ========================================================================= */

.esquema { display: block; width: 100%; height: auto; overflow: visible; }
.esquema .ceramica-1 { stop-color: #ffffff; }
.esquema .ceramica-2 { stop-color: #f1f5f8; }
.esquema .tarjeta-esq { stroke: var(--linea); stroke-width: 1; }
.esquema .nodo-claro { fill: var(--papel); stroke: var(--linea); stroke-width: 1; }
.esquema .nodo-laca { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.esquema .brillo-laca { fill: rgba(255, 255, 255, .22); }
.esquema .red { fill: none; stroke: var(--linea-fuerte); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.esquema .fuera-red { fill: var(--tarjeta); stroke: var(--linea-fuerte); stroke-width: 1.2; stroke-dasharray: 6 5; }
.esquema .icono { fill: none; stroke: var(--accion); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.esquema .icono--claro { stroke: #9fc0ff; }
.esquema .rotulo-caja { font: 600 14.5px var(--texto); fill: var(--tinta); }
.esquema .rotulo-caja--grande { font: 700 21px var(--titular); letter-spacing: .02em; }
.esquema .rotulo-caja--claro { fill: #e8eff4; }
.esquema .rotulo-menor { font: 400 12.5px var(--texto); fill: var(--tinta-suave); }
.esquema .rotulo-menor--claro { fill: #9fb3c2; }
.esquema .rotulo-eje { font: 600 11px var(--texto); fill: var(--tinta-suave); letter-spacing: .14em; text-transform: uppercase; }
.esquema .rotulo-eje--claro { fill: #9fb3c2; }
.esquema .flecha { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.esquema .flecha-lee { stroke: var(--accion); }
.esquema .flecha-escribe { stroke: var(--cota); }
.esquema .flecha-gris, .esquema .flecha-fuera { stroke: var(--linea-fuerte); }
.esquema .flecha-fuera { stroke-dasharray: 5 5; }
.esquema .punta-lee { fill: var(--accion); }
.esquema .punta-escribe { fill: var(--cota); }
.esquema .punta-gris { fill: var(--linea-fuerte); }
.esquema .disco-lee { fill: var(--accion); }
.esquema .disco-escribe { fill: var(--cota); }
.esquema .rotulo-flecha { font: 500 12.5px var(--texto); fill: var(--tinta-suave); }
.esquema .numero-flecha { font: 700 12px var(--texto); fill: #fff; text-anchor: middle; }
.esquema .anima { transform-box: fill-box; }

/* Entrada de los esquemas al llegar a pantalla: las piezas suben y aparecen en orden y las flechas
   se dibujan después. Solo si el guion ha marcado el documento y no se pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .js .esquema-caja .anima { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1), transform .6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .esquema-caja .traza { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1s cubic-bezier(0.65, 0.05, 0.36, 1), opacity .2s linear; transition-delay: calc(450ms + var(--i, 0) * 140ms); }
  .js .esquema-caja .flecha-fuera { opacity: 0; transition: opacity .6s linear; transition-delay: 900ms; }
  .js .esquema-caja.dentro .anima { opacity: 1; transform: none; }
  .js .esquema-caja.dentro .traza { stroke-dashoffset: 0; opacity: 1; }
  .js .esquema-caja.dentro .flecha-fuera { opacity: 1; }
}

/* Los dos cuerpos de un mismo esquema: el dibujo ancho y el flujo vertical. Un dibujo de 1240 px
   encogido a 350 deja sus rotulos de 12,5 px en 3,9 px, asi que en estrecho se recompone, no se
   escala. Medido el 24-sep-2026. */
.solo-estrecho { display: none; }
.solo-estrecho-linea { display: none; }

.flujo { list-style: none; margin: 0; padding: 0; }
.flujo-paso {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--accion);
  border-radius: var(--radio);
  background: var(--tarjeta);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.flujo-paso--fuera { border-left-color: var(--linea-fuerte); }
.flujo-de, .flujo-a { margin: 0; font-size: 15px; font-weight: 600; }
.flujo-a { color: var(--tinta-suave); font-weight: 400; }
.flujo-flecha {
  margin: 8px 0;
  padding-left: 22px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.flujo-flecha::before {
  content: '';
  position: absolute;
  left: 4px; top: 2px; bottom: 2px;
  width: 2px;
  background: var(--linea-fuerte);
}
.flujo-flecha::after {
  content: '';
  position: absolute;
  left: 1px; bottom: -1px;
  border: 4px solid transparent;
  border-top-color: var(--linea-fuerte);
}
.flujo-flecha--lee::before, .flujo-flecha--lee::after { background: var(--accion); border-top-color: var(--accion); }
.flujo-flecha--escribe::before, .flujo-flecha--escribe::after { background: var(--cota); border-top-color: var(--cota); }
.flujo-flecha--lee::after, .flujo-flecha--escribe::after { background: transparent; }
.flujo-num {
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--accion);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: 1px;
}
.flujo-flecha--escribe .flujo-num { background: var(--cota); }
.flujo-flecha--fuera .flujo-num { background: var(--tinta-suave); }

/* =========================================================================
   Bloques de contenido
   ========================================================================= */

.estados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.estado { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px 28px; box-shadow: var(--sombra); }
.estado h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.estado ul { margin: 14px 0 0; padding-left: 20px; }
.estado li { margin-bottom: 9px; font-size: 15.5px; line-height: 1.5; }
.estado li::marker { color: var(--linea-fuerte); }
.chip {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid;
  flex: none;
}
.chip-marca { width: 15px; height: 15px; display: block; }
.chip--hecho { border-color: var(--cota); color: var(--cota); }
.chip--no { border-color: var(--tinta-suave); color: var(--tinta-suave); }

.fases { margin-top: 44px; }
.fases-mandos { display: flex; gap: 0; border-bottom: 2px solid var(--linea); margin-bottom: 0; flex-wrap: wrap; }
.fases-mandos button {
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 26px;
  border: 0;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.fases-mandos button[aria-selected="true"] { color: var(--accion); border-bottom-color: var(--accion); }
.fase-panel { background: var(--tarjeta); border: 1px solid var(--linea); border-top: 0; padding: 32px; box-shadow: var(--sombra); }
.fase-panel[hidden] { display: none; }
.fase-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 36px; margin-top: 24px; }
.fase-datos dt { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 5px; }
.fase-datos dd { margin: 0; font-size: 15.5px; line-height: 1.5; }

/* Una tabla ancha no arrastra la pagina entera: se desliza ella sola, y con foco de teclado para
   quien no tiene raton. */
.tabla-desliza { overflow-x: auto; }
.tabla-desliza:focus-visible { outline-offset: 0; }

/* La matriz de cambios del ejemplo es corta y tiene que leerse entera en un movil: no hereda el
   ancho minimo de las tablas de contenido. */
table.medidas.medidas--compacta { min-width: 0; font-size: 14px; }
table.medidas.medidas--compacta th, table.medidas.medidas--compacta td { padding: 9px 10px; }

table.medidas { width: 100%; min-width: 560px; border-collapse: collapse; margin-top: 36px; font-size: 15px; }
table.medidas th, table.medidas td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.medidas thead th { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 2px solid var(--linea-fuerte); }
table.medidas td.valor { font-family: var(--titular); font-weight: 700; font-size: 23px; white-space: nowrap; color: var(--tinta); }
table.medidas td.ambito { color: var(--tinta-suave); font-size: 14px; line-height: 1.5; }
table.medidas tbody tr:hover { background: var(--tarjeta); }

.oferta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.oferta h3 { font-size: 19px; }
.oferta ul { margin: 12px 0 0; padding-left: 20px; }
.oferta li { margin-bottom: 9px; font-size: 15.5px; line-height: 1.5; }
.oferta .tarjeta-parrafo { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; }

.pie { border-top: 1px solid var(--linea); padding-block: 48px; }
.pie .envoltura { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: baseline; }

.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Pantallas estrechas
   ========================================================================= */

/* El nombre del producto dentro de la barra deja de caber mucho antes de 720 px: a 768 px, L5 se
   leia «Cola sin azucar 1». Se esconde en cuanto la barra baja de unos 60 px de ancho, y la
   leyenda de debajo, que es su repuesto, aparece a la vez. */
@media (max-width: 1080px) {
  .lote-producto { display: none; }
  .leyenda-lotes { display: block; }
  .rejilla, .rejilla--pareja, .rejilla--hero { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero h1 { margin-bottom: 36px; }
  .rejilla--tres, .estados, .oferta, .calibrador-cifras, .fase-datos,
  .treinta-segundos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --aire: 20px; --aire-seccion: 72px; }
  body { font-size: 16px; }
  .hero { padding-top: 48px; }
  .barra nav { display: none; }
  .barra > .envoltura { min-height: 56px; row-gap: 8px; }
  /* Dos filas y no tres: la marca y la llamada comparten la primera, y el mando de nivel ocupa la
     segunda entera. Con la llamada en su propia fila la barra se comia un tercio de la pantalla. */
  .barra .derecha { flex: 1; flex-wrap: wrap; margin-left: 0; gap: 8px 12px; }
  .barra .derecha .boton { order: 1; margin-left: auto; white-space: nowrap; padding: 9px 16px; font-size: 14.5px; }
  .nivel { order: 3; width: 100%; font-size: 12.5px; gap: 8px; }
  .nivel > span:first-child { font-size: 12px; }
  .nivel-botones { flex: 1; min-width: 0; }
  /* Envuelven en dos lineas en vez de recortarse: a 320 px «de sistemas» no cabe en una, y
     recortado no avisa de nada porque el boton no crece. */
  .nivel-botones button { padding: 4px 4px; font-size: 12px; white-space: normal; line-height: 1.2; }
  .rejilla--tres, .estados, .oferta, .calibrador-cifras, .fase-datos,
  .treinta-segundos { grid-template-columns: minmax(0, 1fr); }
  .treinta-segundos { margin-top: 40px; }
  .categoria { font-size: 12.5px; }
  .pantalla { margin-top: 32px; }
  /* Un plan de 8 recursos por 26 semanas no se lee encogido a 350 px, y recortarlo le quitaria lo
     que cuenta, que es el tamaño. Se recorre de lado, que es lo que se hace con un plan en un
     movil. A 1000 px de ancho minimo los nombres de recurso y las semanas ya se leen. */
  .pantalla-marco { overflow-x: auto; }
  .pantalla img { min-width: 1000px; }
  .saltos button { flex: 1 1 auto; }

  /* Los esquemas anchos se van y entran los flujos verticales. Y las tablas dejan de ser tablas:
     cada fila pasa a ficha, con el rotulo de su columna delante, que es lo unico que se lee de
     verdad a 390 px. */
  .solo-ancho { display: none; }
  .solo-estrecho { display: block; }
  .solo-estrecho-linea { display: inline; }
  .esquema-caja { margin-top: 36px; }

  table.medidas--fichas { min-width: 0; }
  /* Solo la tabla que se recompone en fichas deja de necesitar desplazamiento. Apagandolo en
     TODAS, la matriz de cambios del ejemplo volvia a quedar cortada y sin forma de alcanzarla. */
  .tabla-desliza--fichas { overflow-x: visible; }
  /* Y la matriz de cambios se aprieta hasta caber: es corta, y tiene que leerse entera. */
  table.medidas.medidas--compacta { font-size: 12.5px; }
  table.medidas.medidas--compacta th, table.medidas.medidas--compacta td { padding: 7px 6px; }
  .medidas--fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .medidas--fichas tbody tr {
    display: block;
    border: 1px solid var(--linea);
    border-left: 3px solid var(--cota);
    border-radius: var(--radio);
    background: var(--tarjeta);
    padding: 16px 18px;
    margin-bottom: 14px;
  }
  table.medidas--fichas th, table.medidas--fichas td { display: block; border: 0; padding: 0; }
  table.medidas--fichas th[scope="row"] { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
  table.medidas--fichas td.valor { font-size: 30px; line-height: 1.05; margin-bottom: 10px; white-space: normal; }
  .medidas--fichas td.ambito::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: 4px;
  }
  .medidas--fichas tbody tr:hover { background: var(--tarjeta); }
  .panel-cuerpo { padding: 18px; }
  .pista { height: 58px; }
  .lote, .limpieza { top: 7px; height: 44px; }
  .lote { padding: 5px 4px; }
  .lote strong { font-size: 13px; }
  .mandos button { flex: 1 1 auto; }
  .veredicto { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .termometro { width: 100%; }
  .calibrador-cifras dd { font-size: 34px; }
  table.medidas { font-size: 14px; }
  table.medidas th, table.medidas td { padding: 12px 10px; }
  table.medidas td.valor { font-size: 20px; }
  .fases-mandos button { padding: 12px 16px; font-size: 15px; }
  .fase-panel { padding: 20px; }
}

@media (max-width: 420px) {
  /* El rotulo se lleva 58 de los 202 px de la fila, y sin el los tres botones caben con su palabra
     entera hasta 320 px. Sigue nombrando el grupo por `aria-labelledby`. */
  .nivel > span:first-child {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   ampe.app: logotipo, primera pantalla con la pieza, tema oscuro y pie
   ========================================================================= */

.logo { display: inline-flex; }
.logo img { display: block; }
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca .logo { flex: none; }

.hero { padding-top: 40px; }
.hero-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: center;
  min-height: min(620px, calc(100svh - 160px));
}
.hero h1 { font-size: clamp(38px, 4.4vw, 64px); margin-bottom: 26px; }
.hero .entradilla { font-size: 19px; max-width: 34em; }

/* La pieza: la imagen fija pinta primero y es el LCP; el lienzo entra encima con un fundido
   cuando ya tiene su primer fotograma. Sin WebGL2 o con menos movimiento se queda la imagen. */
.pieza { position: relative; margin: 0; aspect-ratio: 75 / 64; width: 100%; }
.pieza-fija, .pieza canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pieza-fija { object-fit: contain; }
.pieza canvas { opacity: 0; }
.pieza--viva canvas { opacity: 1; }
.pieza--viva .pieza-fija { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pieza canvas, .pieza-fija { transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1); }
}
.pieza-pausa {
  position: absolute;
  right: 0;
  bottom: 0;
  font: inherit;
  font-size: 13.5px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--linea-fuerte);
  background: var(--tarjeta);
  color: var(--tinta);
  cursor: pointer;
}

.hero-contexto { margin-top: 36px; max-width: 62em; color: var(--tinta-suave); font-size: 17px; }

/* Entradas al hacer scroll: el contenido es visible por defecto. Solo se oculta para entrar si
   el guion ha marcado el documento y el visitante no pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .js .entra { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1), transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
  .js .entra.dentro { opacity: 1; transform: none; }
}

.pie-rejilla { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: start; }
.pie .marca { font-size: 22px; margin-bottom: 8px; }
.pie-enlaces { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; }
.pie-sociedad { grid-column: 1 / -1; margin: 0; }

.legal { padding-block: 56px 96px; }
.legal h1 { font-size: clamp(34px, 4vw, 52px); font-weight: 700; margin-bottom: 28px; }
.legal h2 { font-size: 26px; margin: 40px 0 12px; }
.legal p, .legal li { max-width: 46em; }

@media (max-width: 900px) {
  .hero-rejilla { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .pieza { max-width: 560px; margin-inline: auto; }
  .barra nav { display: none; }
  .pie-rejilla { grid-template-columns: 1fr; }
}

/* Tema oscuro: los mismos tokens, otros valores. Las islas ya son oscuras y se quedan. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0c141b;
    --tarjeta: #131e27;
    --isla: #070c11;
    --isla-alta: #101820;
    --isla-tinta: #e8eff4;
    --isla-suave: #9fb3c2;
    --isla-accion: #7fa8ff;
    --isla-cota: #3fc8cc;
    --isla-cambio: #ff9057;
    --isla-linea: #2c3b48;
    --hueco-tira: repeating-linear-gradient(45deg, #3b2a20 0 5px, #4d372a 5px 10px);
    --tinta: #e8eff4;
    --tinta-suave: #a9bbc8;
    --accion: #7fa8ff;
    --cota: #3fc8cc;
    --cambio: #ff9057;
    --linea: #24333f;
    --linea-fuerte: #6f8796;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
  .boton { color: #0c141b; }
  .esquema .ceramica-1 { stop-color: #18242e; }
  .esquema .ceramica-2 { stop-color: #131e27; }
  .esquema .numero-flecha { fill: #0c141b; }
  .boton--hueco { color: var(--accion); }
}

.marca-animada { display: block; margin-bottom: 18px; }

.contacto { display: grid; gap: 8px; align-content: start; }
.contacto h3 { font-size: 24px; margin-bottom: 6px; }
.contacto label { font-size: 14.5px; font-weight: 600; color: var(--tinta); margin-top: 6px; }
.contacto .opcional { font-weight: 400; color: var(--tinta-suave); }
.contacto input, .contacto textarea {
  font: inherit; font-size: 16px; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: 10px 12px; width: 100%;
}
.contacto textarea { resize: vertical; min-height: 120px; }
.contacto .boton { justify-self: start; margin-top: 10px; }
.contacto .nota { margin-top: 6px; font-size: 13.5px; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }