/* Hallmark · genre: editorial · macrostructure: Split Studio · tone: cálido y concreto · anchor hue: latón
 * theme: custom (marca AulaPeral) · paper #f4efe6 arena · ink #0b3a5b mar · accent #e8a33d latón
 * display: Fraunces Soft (SOFT 100, WONK 0) · body: Atkinson Hyperlegible Next
 * enrichment: Tier B, SVG hecho a mano (ojo de buey) + vídeo propio · nav: N1a · footer: legal
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */
/* AulaPeral · web pública. Primero el móvil; a partir de 48rem, escritorio. Sin JavaScript. */

@font-face {
  font-family: "Fraunces Soft";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/fraunces-soft-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-next-latin.woff2") format("woff2");
}

:root {
  /* Marca */
  --mar: #0b3a5b;
  --mar-hondo: #072a42;
  --agua: #1f7a9c;          /* solo decorativo: no llega a 4,5:1 sobre arena */
  --agua-texto: #17617d;    /* agua para texto pequeño */
  --laton: #e8a33d;
  --laton-hondo: #a8681a;
  --laton-claro: #f8e7c6;
  --arena: #f4efe6;
  --papel: #fbf8f2;
  --hoja: #fffdf8;
  /* Texto */
  --tinta: #0b3a5b;
  --tinta-2: #3b5466;
  --linea: #ddd3c3;
  --linea-fuerte: #c9bca6;
  --bien: #2a6a43;
  --medias: #8a4b00;
  --sobre-mar: #f4efe6;
  --sobre-mar-2: #c3d0da;
  /* Tipos */
  --f-titulos: "Fraunces Soft", Georgia, "Times New Roman", serif;
  --f-texto: "Atkinson Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.1875rem;
  --t-lg: clamp(1.25rem, 1.1rem + .5vw, 1.4rem);
  --t-xl: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --t-display: clamp(2.25rem, 1.35rem + 4.4vw, 4.25rem);
  /* Espacios (4 pt) */
  --e-2xs: .25rem; --e-xs: .5rem; --e-sm: .75rem; --e-md: 1rem; --e-lg: 1.5rem;
  --e-xl: 2rem; --e-2xl: 3rem; --e-3xl: 4.5rem; --e-4xl: 7rem;
  /* Movimiento */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
  --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--arena);
  font-variant-numeric: lining-nums;
}

h1, h2, h3 {
  font-family: var(--f-titulos);
  font-weight: 700;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); letter-spacing: -.025em; line-height: 1.02; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 650; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--agua-texto); outline-offset: 3px; border-radius: 3px; }
strong { font-weight: 700; }

.caja { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--mar); color: var(--sobre-mar); padding: .75rem 1rem; border-radius: var(--radio); }
.saltar:focus { top: 1rem; }

/* ── Botones y enlaces de acción ─────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.35rem;
  font-family: var(--f-texto); font-weight: 700; font-size: var(--t-base); letter-spacing: .005em;
  white-space: nowrap; text-decoration: none;
  border-radius: 999px; border: 2px solid transparent;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(1px); }
.boton--laton { background: var(--laton); color: var(--mar); }
.boton--laton:hover { background: #efb256; }
.boton--mar { background: var(--mar); color: var(--sobre-mar); }
.boton--mar:hover { background: var(--mar-hondo); }
.boton--borde { min-height: 44px; padding: 0 1.1rem; border-color: var(--mar); color: var(--mar); }
.boton--borde:hover { background: var(--mar); color: var(--sobre-mar); }

.enlace {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 700; text-decoration: underline; text-decoration-color: var(--laton-hondo);
  text-decoration-thickness: 2px; white-space: nowrap;
}
.enlace:hover { text-decoration-thickness: 3px; }

/* ── Cabecera ────────────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 5; background: var(--arena); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.marca { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-right: auto; text-decoration: none; }
.marca__icono { width: 34px; height: 34px; display: block; }
.marca__nombre { font-family: var(--f-titulos); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; color: var(--mar); line-height: 1; }
.marca__nombre span { color: var(--agua-texto); }
.menu { display: none; }

/* ── Ojo de buey (decoración) ────────────────────────────────── */
.ojo { display: block; pointer-events: none; }
.ojo__aro { fill: none; stroke: var(--laton-hondo); stroke-width: 2; }
.ojo__aro--fino { stroke-width: 1; }
.ojo__remaches circle { fill: var(--laton-hondo); }
.ojo__burbujas circle { fill: none; stroke: var(--laton-hondo); stroke-width: 1.5; }
.ojo__mar { fill: var(--agua); opacity: .12; }
.ojo__agua { fill: none; stroke: var(--agua); stroke-width: 2; stroke-linecap: round; }
.ojo__casco { fill: var(--mar); }
.ojo__periscopio { fill: none; stroke: var(--mar); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ojo__helice { fill: var(--laton-hondo); }

/* ── Portada ─────────────────────────────────────────────────── */
.portada { position: relative; padding: var(--e-2xl) 0 var(--e-3xl); }
.ojo--portada {
  position: absolute; z-index: 0; width: 22rem; height: 22rem;
  right: -13rem; top: -12rem; opacity: .28;
}
.portada__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2xl); }
.portada h1 { max-width: 13ch; margin-bottom: var(--e-lg); }
.entrada { font-size: var(--t-md); line-height: 1.55; color: var(--tinta-2); max-width: 33rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-sm) var(--e-xl); margin: var(--e-xl) 0 var(--e-lg); }
.portada__alcance { font-size: var(--t-sm); color: var(--tinta-2); max-width: 30rem; margin: 0; }

/* Vídeo: vertical en el móvil, horizontal en el escritorio */
.video { margin: 0; width: min(100%, 19rem); }
.video__marco {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 14px; background: var(--mar);
  box-shadow: 0 0 0 1px var(--mar), 0 24px 48px -28px rgba(7, 42, 66, .55);
}
.video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--mar); }
.video figcaption { margin-top: var(--e-sm); }
.video__texto summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  cursor: pointer; font-weight: 700; font-size: var(--t-sm);
  text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: .2em;
}
.video__texto summary::-webkit-details-marker { display: none; }
.video__texto summary { list-style: none; }
.video__texto summary::before { content: "▸"; color: var(--laton-hondo); transition: transform var(--dur) var(--ease-out); }
.video__texto[open] summary::before { transform: rotate(90deg); }
.video__texto p { font-size: var(--t-sm); color: var(--tinta-2); max-width: 36rem; }

/* ── Casos: cada situación con su ejemplo ───────────────────── */
.caso { padding: var(--e-3xl) 0; border-top: 1px solid var(--linea); }
.caso__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); align-items: start; }
.caso h2 { max-width: 17ch; margin-bottom: var(--e-lg); }
.caso__texto p { max-width: 34rem; color: var(--tinta-2); }
.caso__texto p:first-of-type { color: var(--tinta); font-size: var(--t-md); }
.fuente { white-space: nowrap; font-size: .9em; }

.prueba { margin: 0; min-width: 0; }
.prueba figcaption { margin-top: var(--e-sm); font-size: var(--t-sm); color: var(--tinta-2); max-width: 30rem; }

/* La hoja de ejercicio: papel, raya fina, sin marco de móvil */
.hoja {
  background: var(--hoja); border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  padding: var(--e-lg) var(--e-lg) var(--e-md);
  box-shadow: 0 1px 0 var(--linea), 0 18px 36px -30px rgba(7, 42, 66, .45);
}
.hoja__donde { font-size: .875rem; font-weight: 700; color: var(--agua-texto); margin-bottom: var(--e-sm); letter-spacing: .01em; }
.hoja__pregunta { font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-lg); line-height: 1.3; margin-bottom: var(--e-lg); }
.mate { white-space: nowrap; font-variant-numeric: tabular-nums; }

.pista { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-sm); align-items: baseline; margin-bottom: var(--e-lg); }
.pista__etiqueta {
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
  background: var(--laton-claro); color: var(--mar); padding: .15rem .55rem; border-radius: 999px;
}
.pista p { margin: 0; font-size: var(--t-sm); line-height: 1.5; }

.respuesta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--e-sm); padding: var(--e-sm) 0; border-top: 1px dashed var(--linea-fuerte); border-bottom: 1px dashed var(--linea-fuerte); margin-bottom: var(--e-md); }
.respuesta__etiqueta { font-size: .8125rem; font-weight: 700; color: var(--tinta-2); }
.respuesta__valor { font-family: var(--f-titulos); font-size: 1.25rem; font-weight: 600; }

.correccion { margin: 0; font-size: var(--t-sm); line-height: 1.5; }
.correccion strong { font-weight: 800; }
.correccion--bien strong { color: var(--bien); }
.correccion--medias strong { color: var(--medias); }

/* El plan de examen: una regla de días */
.plan { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linea-fuerte); }
.plan li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; padding: 0 0 var(--e-lg) var(--e-lg); }
.plan li::before {
  content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--arena); border: 2px solid var(--agua-texto);
}
.plan__dia { font-family: var(--f-titulos); font-weight: 700; font-size: var(--t-lg); line-height: 1.2; }
.plan__que { color: var(--tinta-2); }
.plan .plan__examen { padding-bottom: 0; }
.plan .plan__examen::before { background: var(--laton); border-color: var(--laton-hondo); width: 16px; height: 16px; left: -9px; top: .3rem; }
.plan__examen .plan__que { color: var(--tinta); font-weight: 700; }

/* El informe: un correo de verdad, sin marco de correo */
.informe {
  background: var(--hoja); border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  padding: var(--e-lg); font-size: var(--t-sm); line-height: 1.5;
  box-shadow: 0 18px 36px -30px rgba(7, 42, 66, .45);
}
.informe__titulo { font-family: var(--f-titulos); font-weight: 700; font-size: 1.3rem; margin: 0; }
.informe__fecha { color: var(--tinta-2); margin: 0 0 var(--e-md); }
.informe__nombre { font-family: var(--f-titulos); font-weight: 650; font-size: var(--t-md); margin: 0 0 var(--e-xs); padding-top: var(--e-md); border-top: 1px solid var(--linea); }
.informe__tabla { border-collapse: collapse; width: 100%; margin-bottom: var(--e-md); font-variant-numeric: tabular-nums; }
.informe__tabla th { text-align: left; font-weight: 400; color: var(--tinta-2); padding: .2rem var(--e-md) .2rem 0; }
.informe__tabla td { text-align: right; font-weight: 700; white-space: nowrap; padding: .2rem 0; }
.informe__tabla tr + tr { border-top: 1px solid var(--linea); }
.informe__apartado { font-weight: 700; margin: var(--e-md) 0 var(--e-2xs); }
.informe ul { margin: 0; padding-left: 1.1rem; }
.informe li { margin-bottom: .15rem; }

/* ── Precio ──────────────────────────────────────────────────── */
.precio { background: var(--mar); color: var(--sobre-mar); padding: var(--e-3xl) 0; }
.precio__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2xl); }
.precio h2 { max-width: 14ch; }
.precio__texto p { color: var(--sobre-mar-2); max-width: 32rem; }
.precio__texto p:first-of-type { color: var(--sobre-mar); font-size: var(--t-md); }
.precio :focus-visible { outline-color: var(--laton); }
.tarifa { border-top: 1px solid rgba(244, 239, 230, .25); padding-top: var(--e-lg); }
.tarifa__cifra { font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-lg); margin: 0 0 var(--e-sm); }
.tarifa__euros { display: block; font-size: clamp(4rem, 3rem + 5vw, 6.5rem); font-weight: 700; line-height: .95; letter-spacing: -.03em; color: var(--laton); }
.tarifa__detalle { color: var(--sobre-mar-2); max-width: 26rem; }
.tarifa__ahora { display: inline-block; font-weight: 700; color: var(--sobre-mar); border-bottom: 2px solid var(--laton); padding-bottom: .1rem; margin: 0; }
.incluye { border-top: 1px solid rgba(244, 239, 230, .25); padding-top: var(--e-lg); }
.tarifa__incluye { font-weight: 700; margin: 0 0 var(--e-xs); }
.tarifa__lista { list-style: none; margin: 0; padding: 0; columns: 1; color: var(--sobre-mar-2); }
.tarifa__lista li { padding: .4rem 0; border-top: 1px solid rgba(244, 239, 230, .14); break-inside: avoid; }
.tarifa__lista li::first-letter { text-transform: uppercase; }

/* ── Asignaturas y edades ───────────────────────────────────── */
.seccion { padding: var(--e-3xl) 0; }
.seccion--papel { background: var(--papel); border-top: 1px solid var(--linea); }
.asignaturas__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); }
.asignaturas__cabeza p { color: var(--tinta-2); max-width: 30rem; }
.asignaturas { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.asignaturas > div { padding: var(--e-md) 0; border-top: 1px solid var(--linea-fuerte); }
.asignaturas > div:last-child { border-bottom: 1px solid var(--linea-fuerte); }
.asignaturas dt { font-family: var(--f-titulos); font-weight: 650; font-size: var(--t-md); margin-bottom: .2rem; }
.asignaturas dd { margin: 0; color: var(--tinta-2); }

.edades { margin-top: var(--e-4xl); }
.edades__titulo { margin-bottom: var(--e-xs); }
.edades__intro { color: var(--tinta-2); margin-bottom: var(--e-xl); }
.regla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); }
.regla__barra { display: block; height: 10px; border-radius: 2px; margin-bottom: var(--e-md); }
.regla__tramo--primaria .regla__barra { background: var(--laton); width: 100%; }
.regla__tramo--eso .regla__barra { background: var(--agua); width: 100%; }
.regla__tramo--bach .regla__barra { background: var(--mar); width: 50%; }
.regla h3 { margin-bottom: var(--e-xs); }
.regla h3 span { display: block; font-family: var(--f-texto); font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; color: var(--tinta-2); margin-top: .2rem; }
.regla p { color: var(--tinta-2); margin: 0; max-width: 24rem; }

/* ── Preguntas ───────────────────────────────────────────────── */
.preguntas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-lg); }
.preguntas h2 { max-width: 12ch; }
.preguntas__lista { max-width: 44rem; }
details { border-bottom: 1px solid var(--linea-fuerte); }
.preguntas__lista details:first-child { border-top: 1px solid var(--linea-fuerte); }
.preguntas summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .85rem 0;
  font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-md); line-height: 1.3;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px;
  border-right: 2px solid var(--mar); border-bottom: 2px solid var(--mar);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur) var(--ease-out);
}
.preguntas details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.preguntas summary:hover { color: var(--agua-texto); }
.preguntas details p { color: var(--tinta-2); max-width: 38rem; }
.preguntas details a { color: var(--mar); font-weight: 700; }
.video__texto { border-bottom: 0; }

/* ── Piloto ──────────────────────────────────────────────────── */
.piloto { padding: var(--e-3xl) 0; border-top: 1px solid var(--linea); position: relative; }
.piloto__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); align-items: center; }
.piloto__texto p { font-size: var(--t-md); max-width: 34rem; }
.piloto__texto p + p { color: var(--tinta-2); font-size: var(--t-base); }
.piloto .boton { margin: var(--e-xs) 0 var(--e-md); }
.piloto__correo { font-size: var(--t-base); }
.piloto .piloto__correo { font-size: var(--t-sm); }
.piloto__correo a { font-weight: 700; display: inline-block; padding: .65rem 0; }
.ojo--piloto { width: min(15rem, 70%); height: auto; justify-self: start; }
.ojo--piloto .ojo__aro { stroke-width: 3; }

/* ── Pie ─────────────────────────────────────────────────────── */
.pie { background: var(--mar-hondo); color: var(--sobre-mar); padding: var(--e-2xl) 0 var(--e-3xl); font-size: 1rem; }
.pie__rejilla { display: grid; gap: 1.25rem; }
.pie p { margin: 0; }
.marca__nombre--pie { color: var(--sobre-mar); font-size: 1.5rem; margin-bottom: .35rem !important; }
.marca__nombre--pie span { color: var(--laton); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.pie__aviso { font-size: .9375rem; color: var(--sobre-mar-2); }
.pie :focus-visible { outline-color: var(--laton); }

/* ── Escritorio ──────────────────────────────────────────────── */
@media (min-width: 48rem) {
  .caja { padding: 0 2rem; }
  .menu { display: flex; gap: 1.75rem; font-weight: 700; font-size: var(--t-sm); margin-right: .5rem; }
  .menu a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; white-space: nowrap; }
  .menu a:hover { text-decoration: underline; text-decoration-color: var(--laton-hondo); text-decoration-thickness: 2px; }

  .portada { padding: var(--e-3xl) 0 var(--e-4xl); }
  .ojo--portada { width: 44rem; height: 44rem; right: -16rem; top: -9rem; opacity: .3; }
  .portada__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-2xl); align-items: center; }
  .portada h1 { max-width: 12ch; }
  .video { width: 100%; margin-top: var(--e-xl); }
  .video__marco { aspect-ratio: 16 / 9; }

  .caso { padding: var(--e-4xl) 0; }
  .caso__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-xl); }
  .caso__texto { grid-column: 1 / span 5; }
  .prueba { grid-column: 7 / span 6; margin-top: var(--e-xl); }
  .caso--al-reves .caso__texto { grid-column: 8 / span 5; grid-row: 1; }
  .caso--al-reves .prueba { grid-column: 1 / span 6; grid-row: 1; margin-top: var(--e-3xl); }
  .caso .plan { margin-top: var(--e-md); max-width: 26rem; }

  .precio { padding: var(--e-4xl) 0; }
  .precio__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-xl); }
  .precio__texto { grid-column: 1 / span 6; }
  .tarifa { grid-column: 8 / span 5; border-top: 0; padding-top: 0; }
  .incluye { grid-column: 1 / -1; margin-top: var(--e-xl); }

  .asignaturas__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-xl); }
  .asignaturas__cabeza { grid-column: 1 / span 4; }
  .asignaturas { grid-column: 6 / span 7; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-xl); }
  .asignaturas > div:nth-last-child(2) { border-bottom: 1px solid var(--linea-fuerte); }

  /* La regla: cada etapa, más o menos lo que dura (4, 4 y 2 años) */
  .regla { grid-template-columns: 4fr 4fr 2.4fr; gap: 0; }
  .regla__tramo > :not(.regla__barra) { padding-right: var(--e-xl); }
  .regla__barra { border-radius: 0; }
  .regla__tramo--primaria .regla__barra { border-radius: 2px 0 0 2px; }
  .regla__tramo--bach .regla__barra { width: 100%; border-radius: 0 2px 2px 0; }
  .regla__tramo--bach > :not(.regla__barra) { padding-right: 0; }

  .preguntas { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-xl); }
  .preguntas h2 { grid-column: 1 / span 4; }
  .preguntas__lista { grid-column: 5 / span 8; }

  .piloto__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-xl); }
  .piloto__texto { grid-column: 1 / span 7; }
  .ojo--piloto { grid-column: 9 / span 4; width: 100%; max-width: 20rem; justify-self: end; }

  .pie__rejilla { grid-template-columns: 1fr auto; align-items: start; }
  .pie__aviso { grid-column: 1 / -1; }
}

@media (min-width: 48rem) {
  .tarifa__lista { columns: 2; column-gap: var(--e-xl); }
}
@media (min-width: 64rem) {
  .tarifa__lista { columns: 4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
  .boton:hover, .boton:active { transform: none; }
}