/* ==========================================================================
   V1 · TABLERO — replanteamiento completo
   --------------------------------------------------------------------------
   La página es un tablero de turnos: superficie de cal (yeso cálido), retícula
   de plano técnico al fondo, rótulos en condensada de señalización y el coral
   usado como señal, nunca como relleno. Todo lo que aquí se decide vive bajo
   .v1, así que no toca a las otras cuatro portadas.

   Contraste medido (ratio WCAG):
     antracita / cal ......... 8.24   ink-2 / cal ............. 6.17
     ink-3 / cal ............. 4.78   granate / cal ........... 5.16
     hueso / grafito ........ 12.64   coral-claro / grafito ... 4.73
     hueso / granate ......... 5.32   hueso / coral ........... 3.81  (solo rótulo)
   Regla derivada: el coral es superficie y cuerpo grande, jamás texto pequeño.
   En oscuro el acento de texto es coral-claro; en claro, granate.
   ========================================================================== */

.v1 {
  /* --- Superficies ----------------------------------------------------- */
  --cal:        #F9F2EE;   /* oklch(96.6% .009 60) — yeso cálido */
  --cal-2:      #EFE7E1;   /* bloques alternos */
  --cal-3:      #E2D6D0;   /* filos sobre cal */
  --hueso:      #FBF6F1;   /* texto sobre oscuro; nunca #fff puro */
  --grafito:    #2E2E2E;   /* gris oscuro de marca */
  --grafito-2:  #201C1B;   /* pie y sombras de superficie */
  --granate-hondo: #942222;

  /* --- Tinta ------------------------------------------------------------ */
  --tinta:   var(--antracita);
  --tinta-2: #615957;
  --tinta-3: #716A68;

  /* --- Líneas y retícula ------------------------------------------------ */
  --filo:      color-mix(in oklch, var(--antracita) 18%, transparent);
  --filo-2:    color-mix(in oklch, var(--antracita) 34%, transparent);
  --filo-claro:color-mix(in oklch, var(--hueso) 20%, transparent);
  --rejilla:   color-mix(in oklch, var(--antracita) 7%, transparent);
  --modulo:    clamp(36px, 5.2vw, 72px);

  /* --- Tipografía ------------------------------------------------------- */
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --stencil: "Big Shoulders Stencil Display", var(--display);
  --texto:   "Chivo", ui-sans-serif, system-ui, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-portada: clamp(2.9rem, 1rem + 7.2vw, 6.6rem);
  --t-flap:    clamp(1.3rem, 0.35rem + 4.2vw, 3.75rem);
  --t-1:       clamp(2.5rem, 1.2rem + 5vw, 5rem);
  --t-2:       clamp(1.95rem, 1.15rem + 3vw, 3.5rem);
  --t-3:       clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem);

  background: var(--cal);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
}

/* ==========================================================================
   1 · Tipos base y utilidades de la versión
   ========================================================================== */
.v1 h1, .v1 h2, .v1 h3, .v1 .t1, .v1 .t2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.92;
  text-wrap: balance;
}
.v1 .t1 { font-size: var(--t-1); }
.v1 .t2 { font-size: var(--t-2); }
.v1 h3  { font-size: var(--t-3); }

.v1 .lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--tinta-2);
}

.v1 .mono {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Rótulo de sección: monoespaciada, con testigo coral delante. */
.v1 .tag {
  display: flex; align-items: center; gap: 0;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--granate);
}
.v1 .tag-num {
  font-variant-numeric: tabular-nums;
  padding: 0.15em 0.45em;
  margin-right: 0.7em;
  background: var(--granate);
  color: var(--hueso);
}

/* Testigo. Sin animación no es más que un punto: no se pierde información. */
.v1 .led {
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.7em;
  flex: none;
}
.v1 .led--vivo { animation: v1-latido 2.6s ease-out infinite; }
@keyframes v1-latido {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 55%, transparent); }
  70%  { box-shadow: 0 0 0 0.5em color-mix(in oklch, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 0%, transparent); }
}

/* Grano sobre toda la página: textura de papel de obra, no ruido de vídeo. */
.v1 .grano {
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Retícula de plano. Se difumina con una máscara para que no sea un mantel. */
.v1 .plano {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--rejilla) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rejilla) 1px, transparent 1px);
  background-size: var(--modulo) var(--modulo);
  -webkit-mask-image: radial-gradient(125% 95% at 12% -5%, #000 18%, transparent 76%);
          mask-image: radial-gradient(125% 95% at 12% -5%, #000 18%, transparent 76%);
}

/* Pétalo del logotipo a contorno de 1 px: marca de agua que no altera la
   luminancia de la superficie, así que no baja el contraste del texto. */
.v1 .marca-agua {
  position: absolute;
  pointer-events: none;
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.25;
  /* El contorno viene de trazar el mapa de bits del logotipo, así que son
     muchos segmentos rectos encadenados. A tamaño grande y con las uniones a
     inglete cada vértice se ve como un pico; redondeadas, la línea fluye. */
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.3;
}
/* Sin girar: el pétalo tiene un eje y torcerlo lo delataba. Y entra por la
   esquina lo justo para que el corte sea una decisión y no un accidente. */
.v1 .marca-agua--portada { width: 44rem; right: -13rem; top: -10rem; opacity: 0.2; }
.v1 .marca-agua--pasos { width: 42rem; left: -16rem; bottom: -11rem; opacity: 0.26; }

/* Corchetes de encuadre: dos esquinas, nunca un marco entero. */
.v1 .corchete {
  position: absolute; z-index: 2;
  width: clamp(26px, 3.6vw, 52px);
  aspect-ratio: 1;
  border: 2px solid var(--coral);
  pointer-events: none;
}
.v1 .corchete--ne { top: -0.65rem; right: -0.65rem; border-left: 0; border-bottom: 0; }
.v1 .corchete--so { bottom: -0.65rem; left: -0.65rem; border-right: 0; border-top: 0; }

/* Etiquetas de puesto. Sin fondo: es una lista, no ocho botones. */
.v1 .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.v1 .chips li {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.02em;
  padding: 0.28em 0.6em;
  border: 1px solid var(--filo);
  color: var(--tinta-2);
}

/* Cabecera de sección compartida. */
.v1 .sec-cab {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: end;
  padding-bottom: clamp(2rem, 4vw, 3.4rem);
}
.v1 .sec-cab .tag { margin-bottom: 0.9rem; }
.v1 .sec-cab-nota { color: var(--tinta-2); font-size: var(--step--1); }

/* ==========================================================================
   2 · Botones
   Radio de 2 px y un relleno que entra desde la izquierda. Nunca sombra
   difusa de color: aquí manda el canto.
   ========================================================================== */
.v1 .btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.35rem;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color .28s ease, border-color .28s ease, background-color .28s ease;
  will-change: transform;
}
.v1 .btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.v1 .btn:hover::before, .v1 .btn:focus-visible::before { transform: scaleX(1); }
.v1 .btn-lg { padding: 1.05rem 1.7rem; font-size: var(--step-0); }

/* Primario. Granate y no coral: hueso sobre coral se queda en 3,81:1. */
.v1 .btn-solido { background: var(--granate); color: var(--hueso); }
.v1 .btn-solido::before { background: var(--grafito); }

/* Secundario sobre claro. */
.v1 .btn-hueco { border: 1px solid var(--filo-2); color: var(--tinta); }
.v1 .btn-hueco::before { background: var(--tinta); }
.v1 .btn-hueco:hover, .v1 .btn-hueco:focus-visible { color: var(--hueso); border-color: var(--tinta); }

/* Primario sobre oscuro o sobre coral. */
.v1 .btn-claro { background: var(--hueso); color: var(--grafito); }
.v1 .btn-claro::before { background: var(--grafito); }
.v1 .btn-claro:hover, .v1 .btn-claro:focus-visible { color: var(--hueso); }

/* Secundario sobre oscuro. */
.v1 .btn-hueco-claro { border: 1px solid var(--filo-claro); color: var(--hueso); }
.v1 .btn-hueco-claro::before { background: var(--hueso); }
.v1 .btn-hueco-claro:hover, .v1 .btn-hueco-claro:focus-visible { color: var(--grafito); border-color: var(--hueso); }

/* Enlace de cabecera. */
.v1 .btn-linea {
  border: 1px solid var(--filo-claro); color: var(--hueso);
  padding: 0.6rem 0.95rem;
}
.v1 .btn-linea:hover { border-color: var(--coral-claro); color: var(--coral-claro); }

/* ==========================================================================
   3 · Cabecera
   ========================================================================== */
.v1 .cab {
  position: sticky; top: 0; z-index: 100;
  background: var(--grafito);
  color: var(--hueso);
  border-bottom: 1px solid color-mix(in oklch, var(--hueso) 12%, transparent);
  transition: background-color .3s ease;
}
.v1 .cab.is-fijo { background: color-mix(in oklch, var(--grafito-2) 94%, transparent); backdrop-filter: blur(8px); }
.v1 .cab-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0.8rem var(--gutter);
  display: flex; align-items: center; gap: clamp(0.8rem, 1.7vw, 1.5rem);
}
.v1 .cab-logo { flex: none; }
.v1 .cab-logo img { width: clamp(150px, 13.5vw, 186px); height: auto; }
.v1 .cab-nav { margin-left: auto; }
.v1 .cab-nav > ul { display: flex; gap: clamp(0.55rem, 1.35vw, 1.25rem); }
.v1 .cab-nav a {
  position: relative;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in oklch, var(--hueso) 82%, transparent);
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color .25s ease;
}
.v1 .cab-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--coral);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.v1 .cab-nav a:hover { color: var(--hueso); }
.v1 .cab-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.v1 .cab-nav-ctas { display: none; }
/* Dentro del panel del menú, `.cab-nav a` gana en especificidad al color del
   botón y lo dejaba en hueso al 82 %: 4,36:1 sobre granate, por debajo de AA.
   Los botones del panel mandan sobre el color de enlace. */
.v1 .cab-nav-ctas .btn { color: var(--hueso); }

.v1 .cab-acciones { display: flex; align-items: center; gap: 0.7rem; flex: none; }
/* Nada de la cabecera parte palabra. Los dos portales enteros en la barra
   pedían 1.240 px para caber en una línea; plegados tras un «Portal» con
   candado ocupan lo que ocupaba el acceso anterior y la barra vuelve a
   respirar. Los nombres completos están un clic más allá, en el desplegable,
   y en el panel del menú y en el pie salen siempre enteros. */
.v1 .cab-portales { position: relative; flex: none; }
.v1 .cab-portal-boton {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: color-mix(in oklch, var(--hueso) 72%, transparent);
  white-space: nowrap; cursor: pointer;
  transition: color .25s ease;
}
.v1 .cab-portal-boton:hover,
.v1 .cab-portal-boton[aria-expanded="true"] { color: var(--coral-claro); }
.v1 .cab-portal-punta { transition: transform .25s ease; }
.v1 .cab-portal-boton[aria-expanded="true"] .cab-portal-punta { transform: rotate(180deg); }

/* `display: grid` de clase le gana al `display: none` que el navegador da a
   [hidden], que es de elemento: sin esta línea el panel nace abierto. */
.v1 .cab-portal-menu[hidden] { display: none; }
.v1 .cab-portal-menu {
  position: absolute; top: calc(100% + 0.7rem); right: 0;
  min-width: 12.5rem;
  display: grid;
  background: var(--grafito-2);
  border: 1px solid color-mix(in oklch, var(--hueso) 14%, transparent);
  border-radius: 2px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.34);
  padding: 0.3rem;
  z-index: 20;
}
.v1 .cab-portal-menu a {
  display: block;
  padding: 0.55rem 0.7rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: color-mix(in oklch, var(--hueso) 78%, transparent);
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.v1 .cab-portal-menu a:hover,
.v1 .cab-portal-menu a:focus-visible {
  background: color-mix(in oklch, var(--hueso) 9%, transparent);
  color: var(--hueso);
}
/* Idioma: el mismo desplegable que «Portal», pero se queda en la barra
   cuando el menú se pliega. Quien no lee el idioma de la página tiene que
   poder cambiarlo sin abrir antes un menú escrito en ese idioma. */
.v1 .cab-idiomas { position: relative; flex: none; }
.v1 .cab-idioma-menu { min-width: 9.5rem; }
.v1 .cab-idioma-menu a[aria-current] { color: var(--hueso); box-shadow: inset 2px 0 0 var(--coral); }
.v1 .cab-burger { display: none; width: 42px; height: 34px; position: relative; }
.v1 .cab-burger span:not(.vh) {
  position: absolute; left: 9px; right: 9px; height: 2px; background: var(--hueso);
  transition: transform .3s ease, opacity .2s ease;
}
.v1 .cab-burger span:not(.vh):nth-child(1) { top: 13px; }
.v1 .cab-burger span:not(.vh):nth-child(2) { top: 20px; }
.v1 .cab-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.v1 .cab-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ==========================================================================
   4 · Portada
   ========================================================================== */
.v1 .portada {
  position: relative;
  overflow: clip;
  padding-block: clamp(2.5rem, 6vh, 5rem) clamp(3rem, 7vh, 6rem);
  border-bottom: 1px solid var(--filo);
}
.v1 .portada-in {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.82fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}
.v1 .portada-texto { min-width: 0; }
.v1 .portada .tag { margin-bottom: clamp(1rem, 2.4vw, 1.6rem); color: var(--granate); }

.v1 .portada-h1 {
  font-size: var(--t-portada);
  line-height: 0.86;
  letter-spacing: -0.022em;
  font-weight: 900;
  display: grid;
  gap: 0.06em;
  justify-items: start;
}
/* Máscara por línea: el texto sube desde debajo del corte, no se desvanece. */
.v1 .portada-h1 .l { display: block; overflow: hidden; padding-bottom: 0.045em; }
.v1 .portada-h1 .l > span { display: block; }

/* --- La ranura de letreros -------------------------------------------
   Catorce celdas con bisagra a media altura. Cada una gira sobre el eje X
   como el tablero de una estación. El ancho de celda lo mide el JS con la
   tipografía ya cargada: en em fijo, la M se recorta.
   ---------------------------------------------------------------------- */
.v1 .ranura {
  display: flex;
  gap: 0.04em;
  font-size: var(--t-flap);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  perspective: 900px;
  margin-block: 0.16em 0.1em;
  /* Sin JS no hay celdas y la palabra se queda sobre la cal: por eso el color
     base es granate y el hueso vive en la celda, que trae su propio fondo. */
  color: var(--granate);
}
.v1 .flap-c {
  position: relative;
  color: var(--hueso);
  width: var(--flap-w, 0.62em);
  height: 1.16em;
  background: var(--grafito);
  border-radius: 2px;
  display: grid; place-items: center;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--hueso) 8%, transparent);
}
/* La bisagra. Un filo claro arriba y una sombra abajo: dos mitades. */
.v1 .flap-c::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; z-index: 3;
  background: linear-gradient(var(--grafito-2) 0 1px, color-mix(in oklch, var(--hueso) 14%, transparent) 1px 2px);
  pointer-events: none;
}
.v1 .flap-cara {
  display: block;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}
.v1 .portada .lede { margin-top: clamp(1rem, 2.2vw, 1.6rem); }
.v1 .portada-ctas {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

/* Tres datos, verificables. Numeración tabular y filo a la izquierda. */
.v1 .portada-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.2vw, 2rem);
  margin-top: clamp(2rem, 4.5vw, 3.4rem);
  padding-top: clamp(1.2rem, 2.6vw, 1.8rem);
  border-top: 1px solid var(--filo);
}
.v1 .portada-datos li { padding-left: 0.9rem; border-left: 2px solid var(--coral); }
.v1 .portada-datos b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.6rem);
  font-weight: 800; line-height: 1;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.v1 .portada-datos span {
  display: block; margin-top: 0.35rem;
  font-size: var(--step--2); line-height: 1.4; color: var(--tinta-2);
}

/* --- Columna de la fotografía ---------------------------------------- */
.v1 .portada-vista { position: relative; }
.v1 .portada-foto { border-radius: 2px; }
.v1 .portada-foto.is-filled { box-shadow: 0 24px 60px -34px color-mix(in oklch, var(--grafito) 70%, transparent); }
.v1 .portada-ficha {
  position: absolute; left: clamp(-2.6rem, -3vw, -1.2rem); bottom: clamp(1.2rem, 3vw, 2.4rem);
  z-index: 3;
  background: var(--grafito);
  color: var(--hueso);
  padding: 0.9rem 1.1rem;
  border-radius: 2px;
  min-width: 12.5rem;
}
.v1 .portada-ficha .mono {
  color: var(--coral-claro);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding-bottom: 0.5rem; margin-bottom: 0.5rem;
  border-bottom: 1px dashed color-mix(in oklch, var(--hueso) 24%, transparent);
}
.v1 .portada-ficha dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0.22rem 1rem;
  font-family: var(--mono); font-size: var(--step--2);
}
.v1 .portada-ficha dt { color: color-mix(in oklch, var(--hueso) 62%, transparent); }
.v1 .portada-ficha dd { text-align: right; font-variant-numeric: tabular-nums; }

.v1 .portada-abajo {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: clamp(1.6rem, 4vh, 3rem) auto 0;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-3);
}
.v1 .portada-abajo i {
  display: block; width: clamp(3rem, 10vw, 7rem); height: 1px;
  background: linear-gradient(90deg, var(--coral), transparent);
}

/* ==========================================================================
   5 · Cinta de puestos
   Dos pistas en sentidos opuestos. Prueba de cobertura, no decoración vacía.
   ========================================================================== */
.v1 .cinta { overflow: hidden; }
.v1 .cinta-fila { overflow: hidden; }
.v1 .cinta-fila--a { background: var(--grafito); color: var(--hueso); }
.v1 .cinta-fila--b { background: var(--granate); color: var(--hueso); }
.v1 .cinta-pista {
  display: flex; align-items: center; gap: 1.4rem;
  padding-block: 0.5rem;
  width: max-content;
  will-change: transform;
}
.v1 .cinta-pista span {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 3.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.v1 .cinta-fila--a .cinta-pista span:nth-child(4n+1) { color: var(--coral-claro); }
.v1 .cinta-pista svg {
  width: clamp(0.9rem, 1.6vw, 1.5rem); flex: none;
  fill: none; stroke: currentColor; stroke-width: 8;
  opacity: 0.5;
}

/* ==========================================================================
   6 · Dos puertas
   ========================================================================== */
.v1 .puertas { display: grid; grid-template-columns: 1fr 1fr; }
.v1 .puerta {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.v1 .puerta--empresa   { background: var(--grafito);   color: var(--hueso); }
.v1 .puerta--candidato { background: var(--granate-hondo); color: var(--hueso); }
.v1 .puerta .tag { color: var(--coral-claro); }
.v1 .puerta--candidato .tag { color: color-mix(in oklch, var(--hueso) 88%, transparent); }
/* Grafito sobre coral se queda en 3,32:1; sobre coral claro sube a 6,03:1. */
.v1 .puerta .tag-num { background: var(--coral-claro); color: var(--grafito-2); }
.v1 .puerta--candidato .tag-num { background: var(--hueso); color: var(--granate-hondo); }
.v1 .puerta p { color: color-mix(in oklch, var(--hueso) 84%, transparent); }

.v1 .puerta-foto { --ar: 16 / 10; }
.v1 .puerta-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom,
    color-mix(in oklch, var(--grafito) 0%, transparent) 40%,
    color-mix(in oklch, var(--grafito) 55%, transparent) 100%);
}
.v1 .puerta--candidato .puerta-foto::after {
  background: linear-gradient(to bottom,
    color-mix(in oklch, var(--granate-hondo) 0%, transparent) 40%,
    color-mix(in oklch, var(--granate-hondo) 60%, transparent) 100%);
}
.v1 .puerta-cuerpo {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  padding-top: clamp(1.5rem, 3vw, 2.4rem);
}
.v1 .puerta-cuerpo .t2 { max-width: 15ch; }
.v1 .puerta-lista {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.03em;
  color: color-mix(in oklch, var(--hueso) 70%, transparent);
}
.v1 .puerta-lista li { display: flex; align-items: center; gap: 0.45rem; }
.v1 .puerta-lista li::before {
  content: ""; width: 5px; height: 5px; background: var(--coral-claro);
}
.v1 .puerta--candidato .puerta-lista li::before { background: var(--hueso); }
.v1 .puerta .btn { margin-top: auto; }

/* ==========================================================================
   7 · Sectores · el carril
   Por defecto se arrastra a mano con scroll-snap: funciona sin JS y en móvil.
   Cuando el JS toma el mando añade .is-carril-js y pasa a gobernarlo el scroll.
   ========================================================================== */
.v1 .sectores {
  position: relative;
  background: var(--cal-2);
  padding-block: clamp(3.5rem, 8vh, 6.5rem) clamp(2.5rem, 5vh, 4rem);
  overflow: hidden;
}
.v1 .carril-cab {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: end;
  padding-bottom: clamp(1.8rem, 4vw, 3rem);
}
.v1 .carril-cab .tag { margin-bottom: 0.9rem; color: var(--granate); }
.v1 .carril-nota { color: var(--tinta-2); font-size: var(--step--1); }
.v1 .carril-indice {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  display: flex; align-items: baseline; gap: 0.12em;
}
.v1 .carril-indice b { color: var(--granate); font-weight: 800; }
.v1 .carril-indice i { font-style: normal; opacity: 0.5; }

.v1 .carril-marco {
  overflow-x: auto; overflow-y: hidden;
  /* Sin imán con ratón: cada muesca de la rueda vale unos 100 px, menos de la
     mitad de un panel, y el imán —obligatorio o por proximidad— la devolvía al
     panel de partida. Con el dedo sí compensa, y ahí sigue puesto. */
  scroll-snap-type: none;
  scrollbar-width: none;
  /* El gesto horizontal no se escapa al historial del navegador. */
  overscroll-behavior-x: contain;
  /* Sangría igual a la del .wrap: el primer panel se alinea con el titular. */
  --sangria: calc((100% - min(100%, var(--maxw))) / 2 + var(--gutter));
}
.v1 .carril-marco::-webkit-scrollbar { display: none; }
.v1 .carril-pista {
  display: flex;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  width: max-content;
  padding-inline: var(--sangria, var(--gutter));
  align-items: stretch;
}
.v1 .sectores.is-carril-js {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(1.5rem, 3vh, 2.5rem);
}
.v1 .sectores.is-carril-js .carril-marco { overflow: visible; scroll-snap-type: none; }
/* El imán, solo donde se arrastra con el dedo. */
@media (pointer: coarse) {
  .v1 .sectores:not(.is-carril-js) .carril-marco { scroll-snap-type: x proximity; }
}
.v1 .sectores.is-carril-js .carril-pista { will-change: transform; }
/* Anclada, la sección entera tiene que caber en la pantalla: el panel se mide
   en alto de ventana y la fotografía deja de ir por proporción. */
.v1 .sectores.is-carril-js .carril-cab { padding-bottom: clamp(0.9rem, 2vh, 1.6rem); }
.v1 .sectores.is-carril-js .carril-cab .t2 { font-size: clamp(1.6rem, 1rem + 1.7vw, 2.6rem); }
.v1 .sectores.is-carril-js .panel { width: clamp(15rem, 22vw, 20rem); gap: 0.55rem; padding: clamp(0.85rem, 1.4vh, 1.25rem); }
.v1 .sectores.is-carril-js .panel-num { font-size: clamp(2.1rem, 1.3rem + 1.9vw, 3.2rem); }
.v1 .sectores.is-carril-js .panel p { font-size: var(--step--2); }
/* La fotografía mantiene su proporción también anclada. Antes se le daba una
   altura en vh y el mismo ancho de panel, y a 900 px de ventana eso dejaba una
   tira que cortaba las cabezas. Ahora manda el 4:3 y el panel se estrecha si
   hace falta. */
.v1 .sectores.is-carril-js .carril-barra { margin-top: clamp(0.9rem, 2vh, 1.6rem); }

.v1 .panel {
  scroll-snap-align: start;
  position: relative;
  width: clamp(16rem, 25vw, 22rem);
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--cal);
  border: 1px solid var(--filo);
  border-radius: 2px;
}
.v1 .panel-num {
  /* La stencil cortaba las cifras con demasiado filo y el 04 salía con una
     mota suelta. La condensada normal a peso medio dice lo mismo sin gritar. */
  font-family: var(--display);
  font-size: clamp(2.3rem, 1.5rem + 2.5vw, 3.7rem);
  font-weight: 600; line-height: 0.82;
  letter-spacing: 0.01em;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.v1 .panel-foto { border-radius: 2px; }
.v1 .panel h3 { color: var(--tinta); }
.v1 .panel p { font-size: var(--step--1); color: var(--tinta-2); }
.v1 .panel .chips { margin-top: auto; padding-top: 0.4rem; }

.v1 .panel--grafito { background: var(--grafito); border-color: var(--grafito); color: var(--hueso); }
.v1 .panel--grafito h3 { color: var(--hueso); }
.v1 .panel--grafito p { color: color-mix(in oklch, var(--hueso) 78%, transparent); }
.v1 .panel--grafito .panel-num { color: var(--coral-claro); }
.v1 .panel--grafito .chips li { border-color: color-mix(in oklch, var(--hueso) 26%, transparent); color: color-mix(in oklch, var(--hueso) 80%, transparent); }

.v1 .panel--coral { background: var(--granate-hondo); border-color: var(--granate-hondo); color: var(--hueso); }
.v1 .panel--coral h3 { color: var(--hueso); }
.v1 .panel--coral p { color: color-mix(in oklch, var(--hueso) 86%, transparent); }
.v1 .panel--coral .panel-num { color: var(--hueso); }
.v1 .panel--coral .chips li { border-color: color-mix(in oklch, var(--hueso) 34%, transparent); color: var(--hueso); }
.v1 .panel-marca {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hueso);
  border-top: 1px solid color-mix(in oklch, var(--hueso) 36%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--hueso) 36%, transparent);
  padding-block: 0.3rem;
}

.v1 .panel--llamada {
  background: none;
  border: 1px dashed var(--filo-2);
  justify-content: center; gap: 1rem;
}
.v1 .panel--llamada .btn { align-self: flex-start; }

.v1 .carril-barra { position: relative; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.v1 .carril-barra > i {
  /* La pista va en ::before, que es absoluto y por tanto pinta por encima de
     un hijo en flujo: sin este z-index la barra coral queda tapada. */
  position: relative; z-index: 1;
  display: block; height: 2px; background: var(--coral);
  transform-origin: left center;
}
.anim .v1 .carril-barra > i { transform: scaleX(0.06); }
.v1 .carril-barra::before {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0;
  height: 2px; background: var(--cal-3);
}

/* ==========================================================================
   8 · Pasos, sobre una regla graduada
   ========================================================================== */
.v1 .pasos {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 9vh, 7rem);
  border-bottom: 1px solid var(--filo);
}
.v1 .regla { position: relative; height: 26px; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.v1 .regla::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--filo-2);
}
.v1 .regla::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background-image: linear-gradient(to right, var(--filo-2) 1px, transparent 1px);
  background-size: calc(100% / 24) 100%;
}
.v1 .regla > i {
  position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--coral);
  transform-origin: left center;
}
.anim .v1 .regla > i { transform: scaleX(0); }
.v1 .pasos-lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
}
.v1 .pasos-lista li { position: relative; padding-top: 0.4rem; }
.v1 .paso-n {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.8rem);
  font-weight: 600; line-height: 0.82;
  letter-spacing: 0.01em;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.7rem;
}
.v1 .pasos-lista h3 { margin-bottom: 0.4rem; }
.v1 .pasos-lista p { font-size: var(--step--1); color: var(--tinta-2); }

/* ==========================================================================
   9 · Por qué · bloque oscuro
   ========================================================================== */
.v1 .porque {
  background: var(--grafito); color: var(--hueso);
  padding-block: clamp(4rem, 9vh, 7rem);
}
.v1 .porque-in {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.v1 .porque-cab { position: sticky; top: 6rem; }
.v1 .porque-cab .tag { color: var(--coral-claro); margin-bottom: 1rem; }
.v1 .porque-cab .t2 { color: var(--hueso); }
.v1 .porque-foto { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-radius: 2px; }
.v1 .porque .corchete { border-color: var(--coral-claro); }

.v1 .ventajas { display: grid; }
.v1 .ventajas li {
  display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.2rem, 2.6vw, 1.9rem);
  border-top: 1px solid color-mix(in oklch, var(--hueso) 16%, transparent);
  transition: background-color .3s ease, padding-left .3s ease;
}
.v1 .ventajas li:last-child { border-bottom: 1px solid color-mix(in oklch, var(--hueso) 16%, transparent); }
.v1 .ventajas b {
  font-family: var(--mono); font-size: var(--step--2);
  font-weight: 500; letter-spacing: 0.08em;
  color: var(--coral-claro);
  padding-top: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.v1 .ventajas h3 { color: var(--hueso); margin-bottom: 0.35rem; }
.v1 .ventajas p { color: color-mix(in oklch, var(--hueso) 78%, transparent); font-size: var(--step--1); max-width: 54ch; }
@media (hover: hover) and (pointer: fine) {
  .v1 .ventajas li:hover { background: color-mix(in oklch, var(--hueso) 5%, transparent); }
}

/* ==========================================================================
   10 · Ofertas · el tablero de vacantes
   Maquetado como lo que será: filas de datos del panel interno.
   ========================================================================== */
.v1 .ofertas { background: var(--cal-2); padding-block: clamp(4rem, 9vh, 7rem); }
.v1 .ofertas .tag { color: var(--granate); }
.v1 .tablero { border-top: 2px solid var(--tinta); }
.v1 .tablero-cab {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 7.5rem;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-2);
  border-bottom: 1px solid var(--filo);
}
.v1 .fila { border-bottom: 1px solid var(--filo); }
.v1 .fila a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 7.5rem;
  gap: 1rem;
  align-items: center;
  padding: clamp(0.9rem, 2vw, 1.35rem) 0.9rem;
  text-decoration: none;
  position: relative;
  transition: background-color .3s ease, color .3s ease;
}
.v1 .fila a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--coral);
  transform: scaleY(0); transform-origin: center top;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.v1 .fila a:hover, .v1 .fila a:focus-visible { background: var(--cal); }
.v1 .fila a:hover::before, .v1 .fila a:focus-visible::before { transform: scaleY(1); }
.v1 .f-ref { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.v1 .f-puesto b {
  display: block;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); line-height: 1;
  color: var(--tinta);
}
.v1 .f-puesto em {
  display: block; margin-top: 0.25rem; font-style: normal;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.04em; color: var(--granate);
}
.v1 .f-lugar, .v1 .f-jornada { font-size: var(--step--1); color: var(--tinta-2); }
.v1 .f-estado {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--granate);
}
.v1 .f-flecha {
  position: absolute; right: 0.9rem; top: 50%; translate: 0 -50%;
  font-family: var(--mono); color: var(--granate);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s ease;
}
.v1 .fila a:hover .f-flecha, .v1 .fila a:focus-visible .f-flecha { opacity: 1; transform: translateX(0); }

.v1 .ofertas-aviso {
  margin-top: 1rem; color: var(--tinta-2);
  letter-spacing: 0.03em;
}
.v1 .ofertas-pie { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.8rem, 4vw, 2.8rem); }

/* ==========================================================================
   11 · Cierre
   La fotografía va sobre coral y su pared se funde con la superficie de la
   página por un degradado lateral: la pared del estudio continúa en el sitio.
   ========================================================================== */
.v1 .cierre {
  position: relative; isolation: isolate;
  background: var(--granate-hondo);
  color: var(--hueso);
  overflow: hidden;
  padding-block: clamp(4.5rem, 12vh, 9rem);
}
/* La fotografía ocupa la derecha y no lleva NADA encima: ni velado de color
   ni oscurecido. Se funde con la superficie solo por su canto izquierdo, que
   es la junta entre la pared del estudio y la de la página. El texto vive en
   el granate liso, así que su contraste no depende de la imagen. */
/* La fotografía vuelve a sangre, que es donde el grupo sale más grande: a
   1440 px ocupa 764 px de ancho, más que en ninguna otra disposición, y no se
   recorta a nadie.

   Lo que fallaba antes no era la sangre, era el velado: iba de un borde al
   otro y enturbiaba a las personas. Pero el grupo vive en el 42–95 % del
   ancho del original y el texto en el 0–42 %, así que son zonas que no se
   tocan. El velado ahora se apaga en el 40 % —antes de que empiece nadie— y
   sirve solo para lo que tiene que servir: asentar el texto sobre la pared.
   De la mitad derecha en adelante la fotografía está limpia, sin una capa
   encima. */
.v1 .cierre-foto {
  position: absolute; inset: 0; z-index: -1;
  aspect-ratio: auto;
  background: none;
  -webkit-mask-image: none;
          mask-image: none;
}
/* Anclada abajo: el sobrante de 15 px se recorta por arriba, que es pared,
   y no por abajo, donde el grupo ya viene cortado de origen. */
.v1 .cierre-foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.v1 .cierre-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    color-mix(in oklch, var(--granate-hondo) 93%, transparent) 0%,
    color-mix(in oklch, var(--granate-hondo) 84%, transparent) 20%,
    color-mix(in oklch, var(--granate-hondo) 40%, transparent) 33%,
    transparent 40%);
}

.v1 .cierre-in { position: relative; z-index: 2; }
/* El texto se queda en su mitad: nunca pisa la fotografía. */
.v1 .cierre-in > * { max-width: min(30rem, 38vw); }
.v1 .cierre .tag { color: color-mix(in oklch, var(--hueso) 88%, transparent); }
/* El titular puede rebasar la columna del cuerpo —es texto grande y ahí la
   fotografía todavía está en la parte velada de la máscara— pero nunca llega
   a la zona donde la imagen ya se ve. */
.v1 .cierre .t1 { margin: 1rem 0 1.2rem; max-width: min(36rem, 44vw); }
/* Sobre granate liso, el hueso da 7,79:1. Ya no hay que medir contra la foto. */
.v1 .cierre .lede { color: var(--hueso); }
.v1 .cierre-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }

/* ==========================================================================
   12 · Pie
   ========================================================================== */
.v1 .pie { background: var(--grafito-2); color: var(--hueso); padding-top: clamp(3rem, 7vh, 5rem); }
.v1 .pie-in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.v1 .pie-marca { position: relative; }
.v1 .pie-marca img { width: clamp(150px, 16vw, 200px); height: auto; }
.v1 .pie-marca p {
  margin-top: 1rem; max-width: 30ch;
  color: color-mix(in oklch, var(--hueso) 68%, transparent);
  font-size: var(--step--1);
}
.v1 .pie-petalo {
  position: absolute; left: -1rem; bottom: -3.5rem; width: 12rem;
  fill: none; stroke: var(--coral); stroke-width: 1.25;
  stroke-linejoin: round; stroke-linecap: round;
  opacity: 0.35;
  pointer-events: none;
}
.v1 .pie-col h3 {
  font-size: var(--step--2);
  font-family: var(--mono); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral-claro);
  margin-bottom: 1rem;
}
.v1 .pie-col ul { display: grid; gap: 0.5rem; }
.v1 .pie-col a { text-decoration: none; color: color-mix(in oklch, var(--hueso) 82%, transparent); font-size: var(--step--1); transition: color .2s ease; }
.v1 .pie-col a:hover { color: var(--coral-claro); }
.v1 .pie-col address, .v1 address.pie-col { font-style: normal; }
.v1 .pie-col p { color: color-mix(in oklch, var(--hueso) 74%, transparent); font-size: var(--step--1); }
.v1 .pie-col p + p { margin-top: 0.6rem; }
.v1 .pie-nota { font-size: var(--step--2) !important; color: color-mix(in oklch, var(--hueso) 52%, transparent) !important; }
.v1 .pie-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-block: 1.3rem 2.5rem;
  border-top: 1px solid color-mix(in oklch, var(--hueso) 14%, transparent);
  font-family: var(--mono); font-size: var(--step--2);
  color: color-mix(in oklch, var(--hueso) 60%, transparent);
}
.v1 .pie-legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; }
.v1 .pie-legal a { text-decoration: none; }
.v1 .pie-legal a:hover { color: var(--coral-claro); }
.v1 .pie-interno { color: var(--coral-claro); }

/* ==========================================================================
   13 · Huecos de imagen — ajustes de esta versión
   ========================================================================== */
.v1 .slot { background-color: var(--cal-2); }
.v1 .slot-ficha { color: var(--tinta-2); }
.v1 .slot-petalo { color: var(--hueso); opacity: 0.2; }
/* Sobre el hueco vacío es una marca; sobre la fotografía sería una mancha. */
.v1 .slot.is-filled .slot-petalo { display: none; }

/* ==========================================================================
   14 · Respuesta a la pantalla
   ========================================================================== */
@media (max-width: 1080px) {
  .v1 .portada-in { grid-template-columns: 1fr; }
  .v1 .portada-vista { max-width: 32rem; }
  .v1 .porque-in { grid-template-columns: 1fr; }
  .v1 .porque-cab { position: static; }
  .v1 .pasos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v1 .carril-cab { grid-template-columns: 1fr auto; }
  .v1 .carril-nota { grid-column: 1 / -1; }

  /* El menú pasa a botón aquí y no a los 900: con el logotipo grande, los seis
     enlaces y las dos acciones dejan de caber en una línea. */
  /* Absoluto respecto a la cabecera, que es sticky y por tanto posicionada.
     En `fixed` con `top: 100%` el panel se iba al borde inferior de la
     ventana y el menú no llegaba a verse nunca. */
  .v1 .cab-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-left: 0;
    background: var(--grafito-2);
    border-bottom: 1px solid color-mix(in oklch, var(--hueso) 12%, transparent);
    padding: 1.4rem var(--gutter) 2rem;
    display: grid; gap: 1.2rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .4s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
  }
  .v1 .cab-nav.is-abierto { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .v1 .cab-nav > ul { flex-direction: column; gap: 0.2rem; }
  .v1 .cab-nav a { font-size: var(--step--1); }
  .v1 .cab-nav-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .v1 .cab-burger { display: block; }
  /* En cuanto la navegación se pliega, los dos portales pasan al panel: en la
     barra ya solo caben el logotipo, la llamada y el botón de menú. */
  .v1 .cab-portales { display: none; }
}

@media (max-width: 900px) {
  .v1 .cab-acciones .btn-solido { display: none; }
  .v1 .puertas { grid-template-columns: 1fr; }
  .v1 .cierre { padding-top: 0; }
  .v1 .cierre-foto {
    position: relative; inset: auto; width: 100%;
    /* La misma proporción del original también aquí: en 16:10 `cover` volvía
       a recortar por abajo, justo donde el grupo ya viene cortado de origen. */
    aspect-ratio: 16 / 9;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  /* Apilado no hay texto sobre la fotografía, así que el velado sobra: solo
     apagaría el tercio izquierdo de la franja sin motivo. */
  .v1 .cierre-foto::after { display: none; }
  /* Apilado no hay fotografía al lado: el texto recupera todo el ancho.
     La regla del titular es más específica, así que hay que repetirla. */
  .v1 .cierre-in > * { max-width: 100%; }
  .v1 .cierre .t1 { max-width: 100%; }
  .v1 .tablero-cab { display: none; }
  .v1 .fila a { grid-template-columns: 1fr auto; gap: 0.35rem 1rem; padding-inline: 0.4rem; }
  .v1 .f-ref { grid-row: 1; grid-column: 2; text-align: right; }
  .v1 .f-puesto { grid-row: 1; grid-column: 1; }
  .v1 .f-lugar  { grid-row: 2; grid-column: 1 / -1; }
  .v1 .f-jornada{ grid-row: 3; grid-column: 1; }
  .v1 .f-estado { grid-row: 3; grid-column: 2; justify-self: end; }
  .v1 .f-flecha { display: none; }
}

@media (max-width: 560px) {
  /* Apilados, dos anchos distintos quedan desiguales: van a línea completa. */
  .v1 .portada-ctas .btn,
  .v1 .cierre-ctas .btn,
  .v1 .ofertas-pie .btn { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .v1 .portada-datos { grid-template-columns: 1fr; gap: 0.9rem; }
  .v1 .portada-ficha { position: static; margin-top: 0.8rem; min-width: 0; }
  .v1 .pasos-lista { grid-template-columns: 1fr; }
  .v1 .sec-cab, .v1 .carril-cab { grid-template-columns: 1fr; align-items: start; }
  .v1 .carril-indice { display: none; }
  .v1 .pie-in { grid-template-columns: 1fr 1fr; }
  .v1 .pie-marca { grid-column: 1 / -1; }
  .v1 .pie-petalo { display: none; }
  .v1 .ventajas li { grid-template-columns: 1fr; gap: 0.3rem; }
  .v1 .marca-agua--portada { width: 34rem; right: -14rem; top: -6rem; }
}

@media (max-width: 400px) {
  /* Marcador: el par de portales ya sale de la barra en el corte de 1080 px. */
}

/* ==========================================================================
   14b · Con el dedo
   En móvil lo que se pulsa tiene que medir unos 44 px, aunque se dibuje más
   pequeño. El área crece con relleno y márgenes negativos: nada se mueve de
   sitio.
   ========================================================================== */
@media (max-width: 1080px) {
  .v1 .cab-burger { width: 44px; height: 44px; margin: -5px -1px -5px 0; }
  .v1 .cab-burger span:not(.vh):nth-child(1) { top: 18px; }
  .v1 .cab-burger span:not(.vh):nth-child(2) { top: 25px; }
  .v1 .cab-idiomas .cab-portal-boton { padding-block: 0.8rem; margin-block: -0.8rem; }

  /* Panel del menú: renglones altos y letra de lectura, no la de la barra. */
  .v1 .cab-nav > ul { gap: 0; }
  .v1 .cab-nav > ul a { display: inline-block; padding-block: 0.7rem; font-size: var(--step-0); }
  .v1 .cab-nav-ctas .btn { min-height: 44px; }
}

@media (pointer: coarse) {
  .v1 .miga a,
  .v1 .cabeza-ficha dd a { padding-block: 0.7rem; }
}

@media (max-width: 640px) {
  /* Los enlaces legales del pie iban a 20 px de alto y casi pegados. */
  .v1 .pie-legal ul { gap: 0 1.3rem; }
  .v1 .pie-legal li > a,
  .v1 .pie-legal li > button { display: inline-block; padding-block: 0.55rem; }

  /* En columnas tan estrechas, `pretty` de Chrome reparte los renglones a
     costa de dejarlos muy desiguales. Aquí se lee mejor el corte normal. */
  .v1 p { text-wrap: wrap; }
}

/* ==========================================================================
   15 · Estado inicial del movimiento
   Lo pone el CSS y solo con .anim en <html>, para que nada parpadee.
   ========================================================================== */
/* Lo que el CSS apaga tiene que ser EXACTAMENTE lo que el JS enciende. Con
   `[data-portada]` a secas se apagaba el contenedor de las llamadas y de los
   datos mientras la línea de tiempo encendía a sus hijos: el contenedor se
   quedaba a cero para siempre y con él todo lo de dentro. */
.anim .v1 [data-portada="tag"],
.anim .v1 [data-portada="lede"],
.anim .v1 [data-portada="vista"],
.anim .v1 [data-portada="ctas"] > *,
.anim .v1 [data-portada="datos"] > li { opacity: 0; }

/* Los renglones del titular no llevan opacidad: los tapa su propio corte. */
.anim .v1 .portada-h1 .l > span { transform: translateY(106%); }
.anim .v1 .ranura { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .v1 .led--vivo { animation: none; }
}