/*
 * ASISCOLE · sitio público.
 * Dirección: capítulos de color (taste-skill, semilla 1417381736). El día escolar es la página:
 * cada capítulo es un campo plano de color, de borde a borde, unido al siguiente sin separador.
 * Paleta tomada solo del logo de ASISCOLE (violeta y cian) con su tinta y su papel.
 * Tipos: League Spartan 700 (titulares) y Figtree 400/600 (texto).
 */
:root {
  --tinta: #120c26;
  --violeta: #5b21e6;
  --cian: #22c7f2;
  --papel: #f5f3fc;
  --niebla: #dcd3fb;
  --blanco: #ffffff;

  --display: "League Spartan", "Figtree", system-ui, sans-serif;
  --texto: "Figtree", system-ui, sans-serif;

  /* Cinco tamaños: pequeño, cuerpo, entrada, cabecera y portada. */
  --t-peq: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-cuerpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-entrada: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-cabeza: clamp(2.5rem, 1.2rem + 5.4vw, 6.5rem);
  --t-portada: clamp(5.5rem, 13vw, 12rem);

  --margen: clamp(16px, 4vw, 56px);
  --radio: 0px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--tinta);
  color: var(--tinta);
  font: 400 var(--t-cuerpo) / 1.5 var(--texto);
  -webkit-font-smoothing: antialiased;
}
button,
input {
  font: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--cian);
  outline-offset: 3px;
}
::selection {
  background: var(--cian);
  color: var(--tinta);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.saltar {
  position: absolute;
  left: var(--margen);
  top: -60px;
  z-index: 50;
  background: var(--cian);
  color: var(--tinta);
  padding: 10px 16px;
  font-weight: 600;
}
.saltar:focus {
  top: 12px;
}
.num {
  font-variant-numeric: tabular-nums;
}

.titulo-grande,
.titulo-medio,
h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.88;
}
.titulo-grande {
  font-size: var(--t-cabeza);
  max-width: 14ch;
}
.titulo-medio {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
}

/* Botón único: rectángulo plano; su esquina superior repite el corte de las pestañas. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  font: 600 var(--t-cuerpo) / 1 var(--texto);
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
  transition: transform 200ms var(--curva), background-color 200ms var(--curva);
}
.boton:hover {
  transform: translateY(-2px);
}
.boton:active {
  transform: translateY(0) scale(0.98);
}
.boton-tinta {
  background: var(--tinta);
  color: var(--papel);
}
.boton-tinta:hover {
  background: #2a1d55;
}
.boton-cian {
  background: var(--cian);
  color: var(--tinta);
}
.boton-cian:hover {
  background: #6ad9f7;
}

/* ------------------------------------------------------------------ portada */
.portada {
  position: relative;
  min-height: 100svh;
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px var(--margen);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 700 1.5rem / 1 var(--display);
  letter-spacing: -0.03em;
}
.marca img {
  width: 40px;
  height: 40px;
}
.barra-enlace {
  justify-self: end;
  font-size: var(--t-peq);
  font-weight: 600;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 200ms var(--curva);
}
.barra-enlace:hover {
  border-color: var(--cian);
}
.portada-texto {
  text-align: center;
  padding: clamp(24px, 6vh, 72px) var(--margen) 0;
}
.portada h1 {
  font-size: var(--t-portada);
  line-height: 0.82;
  color: var(--blanco);
}
.portada-frase {
  margin: 28px auto 0;
  max-width: 34ch;
  font-size: var(--t-entrada);
  line-height: 1.35;
  color: var(--papel);
}

/* Carpetas: bandas planas de 86 % de ancho, cada una 64 px debajo de la anterior. */
.carpetas {
  position: relative;
  flex: 1;
  min-height: 46svh;
  margin-top: clamp(32px, 6vh, 64px);
}
.carpeta {
  position: absolute;
  left: 7%;
  right: 7%;
  height: 100%;
  display: block;
  text-decoration: none;
  transition: transform 260ms var(--curva);
}
.carpeta .pestana {
  position: absolute;
  bottom: 100%;
  left: var(--tab);
  height: 40px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  font: 600 var(--t-cuerpo) / 1 var(--texto);
  color: var(--tinta);
  background: inherit;
  text-decoration: none;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}
a.carpeta:hover,
a.carpeta:focus-visible {
  transform: translateY(-10px);
}
.c-contacto {
  top: 0;
  background: var(--cian);
}
.c-modulos {
  top: 64px;
  background: var(--niebla);
}
.c-aviso {
  top: 128px;
  background: var(--violeta);
}
.c-aviso .pestana {
  color: var(--blanco);
}
.c-dia {
  top: 192px;
  background: var(--papel);
  padding: 32px;
}
.carpeta-contenido {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.carpeta-que {
  max-width: 40ch;
  font-size: var(--t-entrada);
  line-height: 1.35;
  color: var(--tinta);
}

/* ------------------------------------------------------------------ capítulos */
.capitulo {
  position: relative;
  min-height: 90svh;
  padding: clamp(72px, 12vh, 140px) var(--margen);
}

/* Un día: la barra del día escolar, cada tramo con su duración real. */
.cap-dia {
  background: var(--papel);
}
.cap-dia .titulo-grande {
  margin-bottom: 64px;
}
.barra-dia {
  display: flex;
  gap: 6px;
  height: 30vh;
  min-height: 180px;
}
.tramo,
.tramos-texto li {
  flex: var(--min) 1 0;
  min-width: 12%;
}
.tramo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tramo-dur {
  font: 700 clamp(1.25rem, 0.9rem + 1.2vw, 1.875rem) / 1 var(--display);
  letter-spacing: -0.02em;
}
.tramo-hora {
  font-size: var(--t-peq);
  font-variant-numeric: tabular-nums;
}
.t1 {
  background: var(--tinta);
  color: var(--papel);
}
.t2 {
  background: var(--violeta);
  color: var(--blanco);
}
.t3 {
  background: var(--cian);
  color: var(--tinta);
}
.t4 {
  background: var(--niebla);
  color: var(--tinta);
}
.tramos-texto {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 6px;
}
.tramos-texto li {
  max-width: none;
  padding-right: 16px;
  font-size: var(--t-cuerpo);
}
.tramos-texto li:nth-child(2) {
  max-width: 34ch;
}

/* El aviso: campo fijo a la izquierda, columna de controles a la derecha. */
.cap-aviso {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  padding: 0;
  background: var(--violeta);
  color: var(--blanco);
}
.aviso-fijo {
  grid-column: 1 / 7;
  position: sticky;
  top: 0;
  height: 100svh;
  background: var(--cian);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margen);
}
.aviso-columna {
  grid-column: 8 / 13;
  padding: 72px var(--margen) 30vh 0;
  max-width: 44ch;
}
.aviso-columna .titulo-medio {
  margin-bottom: 18vh;
}
.control-bloque {
  min-height: 50vh;
}
.control-frase {
  font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem) / 1.15 var(--texto);
  margin-bottom: 12px;
}
.control-bloque > p:not(.control-frase):not(.control-ayuda) {
  font-size: var(--t-cuerpo);
  color: var(--blanco);
  margin-bottom: 22px;
}
.control-etiqueta {
  display: block;
  font-size: var(--t-peq);
  font-weight: 600;
  margin-bottom: 8px;
}
.control-texto {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 600 var(--t-cuerpo) var(--texto);
}
.control-rango {
  width: 100%;
  accent-color: var(--cian);
  height: 44px;
}
.control-ayuda {
  font-size: var(--t-peq);
  color: var(--blanco);
}
.segmentado {
  display: inline-flex;
  background: var(--tinta);
  padding: 4px;
  gap: 4px;
}
.segmentado button {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  color: var(--papel);
  font: 600 var(--t-cuerpo) var(--texto);
  cursor: pointer;
  transition: background-color 200ms var(--curva), color 200ms;
}
.segmentado button[aria-checked="true"] {
  background: var(--cian);
  color: var(--tinta);
}
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}
.interruptor input {
  position: absolute;
  opacity: 0;
}
.interruptor-pista {
  width: 56px;
  height: 32px;
  background: var(--tinta);
  position: relative;
  transition: background-color 200ms;
}
.interruptor-pista::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: var(--papel);
  transition: transform 220ms var(--curva);
}
.interruptor input:checked + .interruptor-pista {
  background: var(--cian);
}
.interruptor input:checked + .interruptor-pista::after {
  transform: translateX(24px);
  background: var(--tinta);
}
.interruptor input:focus-visible + .interruptor-pista {
  outline: 3px solid var(--blanco);
  outline-offset: 3px;
}

/* El teléfono: fragmento de la interfaz real (data-ui). */
.telefono {
  width: min(440px, 100%);
  background: var(--tinta);
  color: var(--papel);
  border-radius: 34px;
  padding: 18px 14px 22px;
  box-shadow: 0 30px 60px -30px rgb(18 12 38 / 0.6);
}
.tel-barra {
  display: flex;
  justify-content: space-between;
  padding: 2px 14px 14px;
  font-size: var(--t-peq);
  color: #c9c2e6;
}
.noti {
  background: var(--blanco);
  color: var(--tinta);
  border-radius: 20px;
  padding: 18px;
  transition: transform 260ms var(--curva);
}
.noti.salta {
  animation: salta 420ms var(--curva);
}
@keyframes salta {
  0% { transform: translateY(8px); opacity: 0.4; }
  100% { transform: none; opacity: 1; }
}
.noti-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.noti-cabeza div {
  flex: 1;
  min-width: 0;
}
.noti-de {
  font-weight: 600;
  font-size: var(--t-peq);
}
.noti-sede {
  font-size: var(--t-peq);
  color: #5d5778;
}
.noti-estado {
  flex: none;
  font-size: var(--t-peq);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: #dcfae5;
  color: #04250e;
}
.noti-estado.tarde {
  background: #fffbeb;
  color: #92400e;
}
.noti-estado.espera {
  background: #ece9f6;
  color: #3d3760;
}
.noti-texto {
  font-size: var(--t-entrada);
  line-height: 1.35;
}
.noti-nota {
  margin-top: 10px;
  font-size: 14px;
  color: #5d5778;
}
.tel-pie {
  margin-top: 16px;
  padding: 0 14px;
  font-size: var(--t-peq);
  color: #c9c2e6;
}

/* Módulos: índice con vista previa (movimiento firma). */
.cap-modulos {
  background: var(--niebla);
}
.cap-modulos .titulo-grande {
  margin-bottom: 64px;
  max-width: 16ch;
}
.indice {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: start;
}
.indice-filas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.indice-filas button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 18px 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--tinta);
  cursor: pointer;
  transition: opacity 240ms var(--curva), transform 240ms var(--curva);
}
.indice-filas button > span:first-child {
  font: 700 clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem) / 1 var(--display);
  letter-spacing: -0.03em;
}
.fila-nota {
  font-size: var(--t-cuerpo);
  color: #3d3760;
}
.indice-filas:hover button,
.indice-filas:focus-within button {
  opacity: 0.38;
}
.indice-filas button:hover,
.indice-filas button:focus-visible,
.indice-filas button[aria-pressed="true"] {
  opacity: 1;
}
.indice-filas button:hover {
  transform: translateX(6px);
}
.vista {
  position: sticky;
  top: 12vh;
  display: grid;
  min-height: 380px;
}
.vista-panel {
  grid-area: 1 / 1;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: 16px;
  padding: 26px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 240ms var(--curva), transform 240ms var(--curva);
  pointer-events: none;
  font-size: 16px;
}
.vista-panel.activa {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ui-titulo {
  font-size: var(--t-peq);
  font-weight: 600;
  color: #5d5778;
  margin-bottom: 16px;
}
.ui-fuerte {
  font-weight: 600;
}
.ui-escaneo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--papel);
  border-radius: 12px;
  margin-bottom: 14px;
}
.ui-escaneo div {
  flex: 1;
  min-width: 0;
}
.ui-mono {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e6defe;
  color: #3c1aa0;
  font-weight: 600;
}
.ui-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.ui-lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #eceaf3;  /* taste-skill-ignore: filas de una lista dentro de un fragmento de interfaz (data-ui) */
}
.ui-pill {
  flex: none;
  font-size: var(--t-peq);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ui-ok {
  background: #dcfae5;
  color: #04250e;
}
.ui-aviso {
  background: #fffbeb;
  color: #92400e;
}
.ui-gris {
  background: #ece9f6;
  color: #3d3760;
}
.ui-error {
  background: #ffedea;
  color: #831c1e;
}
.ui-gris-t {
  color: #5d5778;
  font-size: 14px;
}
.ui-pie {
  margin-top: 14px;
  font-size: 14px;
  color: #5d5778;
}

/* Compromisos: la línea de nombres cortada por los dos bordes. */
.cap-compromisos {
  background: var(--papel);
}
.banda {
  background: var(--tinta);
  color: var(--papel);
  height: 34vh;
  min-height: 200px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.banda-pista {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font: 700 8vw / 1 var(--display);
  letter-spacing: -0.04em;
  white-space: nowrap;
  animation: corre 40s linear infinite;
}
.banda-pista i {
  flex: none;
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  background: var(--cian);
}
@keyframes corre {
  to { transform: translateX(-50%); }
}
.banda-explica {
  max-width: 62ch;
  padding: 28px var(--margen) 0;
  font-size: var(--t-cuerpo);
}

/* Ryjec: panel oscuro inset, foto en círculo (el círculo del logo de Ryjec). */
.cap-ryjec {
  background: var(--papel);
  padding: 72px 20px 20px;
}
.panel-ryjec {
  position: relative;
  min-height: 92svh;
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
  display: grid;
  grid-template-columns: 63fr 37fr;
}
.ryjec-izq {
  padding: 56px;
  position: relative;
}
.ryjec-izq .titulo-medio {
  color: var(--blanco);
}
.ryjec-foto {
  position: absolute;
  margin: 0;
  bottom: -8vw;
  left: 56px;
  width: 42vw;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.ryjec-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
  animation: deriva 40s ease-in-out infinite alternate;
}
@keyframes deriva {
  from { transform: scale(1.04); }
  to { transform: scale(1.14) translate(-2%, -1%); }
}
.ryjec-der {
  padding: 56px 56px 56px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
}
.ryjec-der > div {
  max-width: 320px;
}
.ryjec-der h3 {
  font: 600 var(--t-entrada) / 1.2 var(--texto);
  margin-bottom: 10px;
  color: var(--blanco);
}
.ryjec-der p {
  font-size: var(--t-cuerpo);
  color: var(--papel);
}
.ryjec-logo {
  width: 200px;
  filter: invert(1);
  mix-blend-mode: screen;
}

/* Contacto: tira de fotos y formulario de tres celdas. */
.cap-contacto {
  background: var(--cian);
  min-height: 0;
  padding-top: 48px;
  padding-bottom: 96px;
  overflow: hidden;
}
.tira {
  margin: 0 calc(var(--margen) * -1) 72px;
  overflow: hidden;
}
.tira-pista {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: corre 70s linear infinite;
}
.tira img {
  height: 150px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
}
.r32 {
  width: 225px;
}
.r11 {
  width: 150px;
}
.r34 {
  width: 113px;
}
.contacto-frase {
  margin-top: 16px;
  max-width: 46ch;
  font-size: var(--t-entrada);
  line-height: 1.35;
}
.formulario {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: 96px;
}
.celda {
  display: block;
  height: 100%;
}
.celda input,
.celda-enviar {
  width: 100%;
  height: 100%;
  border: 0;
  background: #63d6f5;
  color: var(--tinta);
  font: 400 var(--t-cuerpo) var(--texto);
  text-align: center;
  transition: background-color 200ms var(--curva);
}
.celda input::placeholder {
  color: #0f4a5c;
}
.celda input:focus {
  background: #c8f1fc;
  outline: none;
}
.celda input[aria-invalid="true"] {
  box-shadow: inset 0 -4px 0 #831c1e;  /* taste-skill-ignore: marca de error de un campo de formulario */
}
.celda-enviar {
  background: var(--tinta);
  color: var(--papel);
  font-weight: 600;
  cursor: pointer;
}
.celda-enviar:hover {
  background: #2a1d55;
}
.formulario-nota {
  margin-top: 12px;
  font-size: var(--t-peq);
}

/* Pie: el nombre primero, recortado por abajo. */
.pie {
  background: var(--tinta);
  color: var(--papel);
  padding: 40px var(--margen) 32px;
  overflow: hidden;
}
.pie-nombre {
  font: 700 clamp(5rem, 24vw, 22rem) / 0.8 var(--display);
  letter-spacing: -0.05em;
  color: var(--violeta);
  height: 0.62em;
  overflow: hidden;
}
.pie-fila {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px;
}
.pie-vias {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie-vias a {
  display: inline-block;
  font: 700 clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem) / 1.25 var(--display);
  color: var(--cian);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.pie-vias a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.pie-columnas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.pie-columnas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-peq);
}
.pie-columnas li {
  margin-bottom: 8px;
}
.pie-columnas a {
  text-decoration: none;
  color: #d9d3f0;
}
.pie-columnas a:hover {
  color: var(--blanco);
  text-decoration: underline;
}
.pie-tit {
  font-weight: 600;
  color: var(--blanco);
}
.pie-creditos li:not(.pie-tit) {
  color: #b9b2d8;
}
.pie-legal {
  margin-top: 96px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--t-peq);
  color: #b9b2d8;
}
.pie-legal p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pie-ryjec {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* Entrada de cada parte al aparecer (no oculta nada si el script falla: la clase la pone JS). */
.js .entra {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--curva), transform 700ms var(--curva);
  transition-delay: var(--retraso, 0ms);
}
.js .entra.visto {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ teléfono */
@media (max-width: 820px) {
  .barra {
    padding: 14px var(--margen);
  }
  .portada-texto {
    padding-top: 72px;
  }
  .portada h1 {
    font-size: 21vw;
  }
  .portada-frase {
    font-size: 1.125rem;
  }
  .carpetas {
    min-height: 52svh;
  }
  .carpeta {
    left: 0;
    right: 0;
  }
  .carpeta .pestana {
    height: 32px;
    font-size: var(--t-peq);
    padding: 0 18px;
  }
  .c-modulos { top: 52px; }
  .c-aviso { top: 104px; }
  .c-dia { top: 156px; padding: 24px var(--margen); }
  .carpeta-contenido {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .carpeta-que {
    font-size: var(--t-cuerpo);
  }
  .c-dia .boton {
    width: 100%;
  }
  .ryjec-der > div {
    max-width: none;
  }
  /* En el teléfono la barra se vuelve vertical: cada tramo guarda su proporción y su frase. */
  .tramos-texto {
    display: none;
  }
  .barra-dia {
    flex-direction: column;
    height: auto;
  }
  .tramo {
    flex: none;
    min-height: max(96px, calc(var(--min) * 0.7px));
    justify-content: flex-start;
    gap: 8px;
  }
  .tramo .tramo-frase {
    display: block;
    font-size: 16px;
  }
  .cap-dia .titulo-grande {
    margin-bottom: 32px;
  }
  .cap-aviso {
    display: block;
  }
  .aviso-fijo {
    position: sticky;
    top: 0;
    height: 46svh;
    z-index: 2;
    padding: 12px;
  }
  .telefono {
    transform: scale(0.82);
    transform-origin: center;
  }
  .aviso-columna {
    padding: 48px var(--margen) 64px;
    max-width: none;
  }
  .aviso-columna .titulo-medio {
    margin-bottom: 40px;
  }
  .control-bloque {
    min-height: 0;
    margin-bottom: 56px;
  }
  .control-frase {
    font-size: 22px;
  }
  .indice {
    grid-template-columns: 1fr;
  }
  .vista {
    position: static;
    min-height: 330px;
  }
  .banda {
    height: 22vh;
    min-height: 150px;
  }
  .banda-pista {
    font-size: 15vw;
  }
  .banda-explica {
    font-size: 16px;
    padding-top: 20px;
  }
  .cap-ryjec {
    padding: 48px 10px 10px;
  }
  .panel-ryjec {
    display: block;
    min-height: 0;
    padding-bottom: 70vw;
  }
  .ryjec-izq,
  .ryjec-der {
    padding: 32px 24px;
    position: static;
  }
  .ryjec-der {
    gap: 32px;
    padding-top: 0;
  }
  .ryjec-foto {
    width: 86vw;
    left: 50%;
    transform: translateX(-50%);
    bottom: -22vw;
  }
  .tira img {
    height: 110px;
  }
  .formulario {
    grid-template-columns: 1fr;
    height: auto;
  }
  .celda {
    height: 60px;
  }
  .pie-fila,
  .pie-columnas {
    grid-template-columns: 1fr 1fr;
  }
  .pie-vias {
    grid-column: 1 / -1;
  }
  .pie-legal {
    font-size: var(--t-peq);
  }
}

.tramo-frase {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .banda-pista,
  .tira-pista,
  .ryjec-foto img {
    animation: none;
  }
  .js .entra {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .noti.salta {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}