/* ═══════════════════════════════════════════════════════════════════
   Clyra — layout y componentes.
   Los colores y la tipografía viven en tokens.css, extraídos del
   proyecto de Framer. Aquí solo va el layout: paddings, gaps y anchos
   copiados nodo a nodo, no estimados a ojo.
   ═══════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> solo envuelve: que no meta una caja en línea entre el marco y la imagen. */
picture { display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3, figure { margin: 0; }

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

/* ── Secciones: contenedor común ────────────────────────────────── */
.seccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}
.seccion > * { width: 100%; }

/* ── Navegación ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--borde);
}
.nav__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px;
}
/* El logo, más grande en escritorio que los 58x24 de Framer: ahí se veía
   pequeño. En móvil se queda en el tamaño original, donde funcionaba. */
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo svg { width: 78px; height: 32px; }
.nav__menu { display: flex; align-items: center; gap: 26px; }

/* El CTA vive en la barra, NO dentro del menú: si estuviera dentro
   desaparecería en móvil junto con los enlaces. */
.nav__cta { flex-shrink: 0; }
.nav__hamburguesa {
  display: none;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  padding: 9px 10px;
  cursor: pointer;
  line-height: 0;
}
/* `display:flex` pisaría el atributo `hidden`, que es lo que abre y cierra
   el menú. Esta regla lo devuelve a su sitio, y en escritorio no existe. */
.nav__desplegable[hidden] { display: none; }
@media (min-width: 1200px) { .nav__desplegable { display: none !important; } }
.nav__desplegable {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 20px 22px;
  border-top: 1px solid var(--borde);
}
.nav__desplegable .enlace-de-menu {
  padding: 13px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 17px;
}
.nav__desplegable .boton { margin-top: 16px; justify-content: center; }
.enlace-de-menu { text-decoration: none; transition: color .18s ease; }
.enlace-de-menu:hover { color: var(--naranja); }

/* ── Botones ────────────────────────────────────────────────────────
   Valores del componente «Botón» de Framer, variante a variante,
   incluidos los estados de hover (que allí son variantes propias). */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 100px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s ease, background-color .18s ease, border-color .18s ease;
}
.boton:hover { transform: translateY(-2px); }

.boton--primario {
  background: var(--naranja);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(61, 53, 41, .10),
              0 8px 24px -8px rgba(247, 115, 40, .45);
}
/* En Framer el hover del primario cambia al rojo de marca, no solo la sombra. */
.boton--primario:hover {
  background: var(--rojo);
  box-shadow: 0 1px 2px 0 rgba(61, 53, 41, .10),
              0 10px 28px -8px rgba(224, 74, 66, .5);
}

.boton--secundario {
  background: var(--tarjeta);
  color: var(--texto-titular);
  border-color: var(--borde-fuerte);
  box-shadow: 0 1px 2px 0 rgba(61, 53, 41, .06);
}
.boton--secundario:hover { background: var(--fondo-elevado); }

.boton--inverso {
  background: #fff;
  color: var(--purpura-profundo);
  box-shadow: 0 2px 8px 0 rgba(47, 13, 88, .18);
}
.boton--inverso:hover { background: rgba(255, 255, 255, .90); }

.boton--inverso-contorno {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.boton--inverso-contorno:hover { background: rgba(255, 255, 255, .24); }

/* Horizontal con salto de línea, como el contenedor de Framer. Con el relleno
   correcto los botones rompen solos donde tienen que romper: no hace falta
   forzar la columna. */
.acciones { display: flex; flex-wrap: wrap; gap: 14px; width: auto; justify-content: center; }

/* El ítem del menú de la página en la que estás. */
.enlace-de-menu[aria-current="page"] { color: var(--naranja); }

/* ── Hero ───────────────────────────────────────────────────────── */
.seccion--hero {
  gap: 64px;
  padding: 96px 32px 104px;
  background: radial-gradient(50% 50% at 50% 0%,
    rgba(252, 178, 37, .16) 0%,
    rgba(247, 115, 40, .05) 40%,
    rgba(250, 247, 242, 0) 68%);
}
.hero__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.hero__entradilla { max-width: 660px; }
.hero__pie { color: var(--texto-suave); }

.captura {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--borde);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 6px 0 rgba(61, 53, 41, .06),
              0 28px 60px -30px rgba(93, 20, 103, .28);
}

/* El vídeo del hero llena el marco de la captura; el póster tiene su misma
   proporción (1440×900), así que no salta nada al empezar a reproducirse. */
.captura__video { display: block; width: 100%; height: auto; background: #fffdf9; }

/* ── El giro ────────────────────────────────────────────────────── */
.seccion--giro { gap: 56px; padding: 104px 32px; }
/* «Transversal»: encabezado y vídeo del mapa con los rombos, mismo ritmo que «El giro». */
.seccion--transversal { gap: 56px; padding: 0 32px 104px; }
.encabezado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.seccion--giro .encabezado { max-width: 720px; }

.rejilla-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 34px 32px;
  border-radius: 18px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
}
.tarjeta--apagada { background: var(--fondo-elevado); }
.tarjeta--acento {
  border-color: rgba(247, 115, 40, .30);
  box-shadow: 0 2px 6px 0 rgba(61, 53, 41, .05),
              0 20px 44px -28px rgba(247, 115, 40, .35);
}

.puntos { display: flex; flex-direction: column; gap: 14px; }
.puntos li { display: flex; align-items: flex-start; gap: 12px; }
.punto__icono { flex-shrink: 0; line-height: 0; margin-top: 4px; }
/* Colores tomados del proyecto: #B0A898 y el naranja de marca. */
.punto__icono--no { color: #B0A898; }
.punto__icono--si { color: var(--naranja); }

/* ── Para quién ─────────────────────────────────────────────────── */
.seccion--para-quien {
  gap: 52px;
  padding: 104px 32px;
  background: var(--fondo-elevado);
}
.tarjeta--salida {
  gap: 18px;
  padding: 38px 36px 34px;
  box-shadow: 0 1px 3px 0 rgba(61, 53, 41, .05);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.tarjeta--salida:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -22px rgba(93, 20, 103, .28);
}
.icono-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(247, 115, 40, .13);
  color: var(--naranja);
}
.enlace-de-accion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  text-decoration: none;
  transition: gap .2s ease;
}
.enlace-de-accion:hover { gap: 11px; }

/* ── Cierre ─────────────────────────────────────────────────────── */
.seccion--cierre {
  padding: 116px 32px;
  overflow: clip;
  background: linear-gradient(135deg,
    #F77328 0%, #E04A42 28%, #851F6A 62%, #5D1467 88%, #2F0D58 100%);
}
.cierre__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* ── Pie ────────────────────────────────────────────────────────── */
.pie { background: var(--purpura-profundo); color: var(--texto-sobre-oscuro); }
.pie__contenido { max-width: 1200px; margin: 0 auto; padding: 64px 32px 44px; }
.pie__marca-y-legales {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.pie__marca { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.pie__logo svg { filter: brightness(0) invert(1); }
.pie__columna { display: flex; flex-direction: column; gap: 12px; }
.pie__columna .texto-de-pie { text-decoration: none; transition: color .18s ease; }
.pie__columna .texto-de-pie:hover { color: #fff; }
.pie__separador {
  border: 0;
  height: 1px;
  background: rgba(245, 239, 230, .14);
  margin: 40px 0 24px;
}
.pie__cierre { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ── Aparición al entrar en vista ───────────────────────────────── */
[data-aparece].pendiente,
[data-aparece].pendiente > * {
  opacity: 0;
  transform: translateY(24px);
}
[data-aparece],
[data-aparece] > * {
  transition: opacity .5s cubic-bezier(.44,0,.56,1),
              transform .5s cubic-bezier(.44,0,.56,1);
}
/* El contenedor escalonado no se mueve él: mueve a sus hijos. */
[data-escalona].pendiente { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-aparece], [data-aparece] > * { opacity: 1 !important; transform: none !important; }
}

/* ── Tableta ────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nav__barra { padding: 16px 28px; }
  .nav__menu { display: none; }
  .nav__hamburguesa { display: block; }
  /* Logo a la izquierda; botón y hamburguesa juntos a la derecha, como en
     Framer. Con `space-between` y tres hijos, el botón quedaba en el medio. */
  .nav__barra { gap: 10px; }
  .nav__cta { margin-left: auto; }
  .seccion--hero { gap: 52px; padding: 76px 28px 84px; }
  .seccion--giro, .seccion--para-quien { padding: 84px 28px; }
  .seccion--transversal { padding: 0 28px 84px; }
  .seccion--cierre { padding: 96px 28px; }
}

/* La barra en tableta enseña el botón junto a la hamburguesa. */
@media (max-width: 1199.98px) {
  .nav__barra::after { content: ""; }
}

/* ── Móvil ──────────────────────────────────────────────────────── */
@media (max-width: 809.98px) {
  .nav__barra { padding: 14px 20px; }
  .nav__logo svg { width: 58px; height: 24px; }
  /* En un móvil estrecho el botón se acorta antes de empujar nada. */
  .nav__cta { padding: 12px 18px; font-size: 14px; }
  .seccion--hero { gap: 40px; padding: 56px 20px 64px; }
  .seccion--giro, .seccion--para-quien { padding: 64px 20px; gap: 36px; }
  .seccion--transversal { padding: 0 20px 64px; gap: 36px; }
  .seccion--cierre { padding: 72px 20px; }
  .rejilla-2 { grid-template-columns: 1fr; gap: 18px; }
  .tarjeta { padding: 26px 22px; gap: 16px; }
  .tarjeta--salida { padding: 28px 22px 26px; }
  .acciones { width: 100%; flex-direction: column; }
  .acciones .boton { width: 100%; }
  .pie__contenido { padding: 48px 20px 36px; }
  .pie__marca-y-legales { flex-direction: column; gap: 32px; }
}


/* La segunda mitad del titular va en naranja — son dos runs en Framer. */
.acento { color: var(--naranja); }

/* ═══ Variantes de sección ═══════════════════════════════════════════
   Los valores salen de los nodos de Framer, sección por sección. */

/* Encabezado de página sin captura a pantalla completa. */
.seccion--hero-corto { gap: 44px; padding: 92px 32px 72px; }
.encabezado--ancho   { max-width: 840px; gap: 22px; }
.encabezado--estrecho{ max-width: 740px; gap: 16px; }

.seccion--elevada    { padding: 80px 32px 84px; gap: 36px; background: var(--fondo-elevado); }
.seccion--captura   { padding: 80px 32px 84px; gap: 38px; }
.seccion--texto-solo { padding: 84px 32px; gap: 18px; }

/* El marco de las capturas de La Crónica. */
.marco-captura {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}
.marco-captura img {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: 0 2px 6px 0 rgba(61, 53, 41, .06),
              0 24px 52px -30px rgba(93, 20, 103, .26);
}
.marco-captura figcaption { text-align: center; color: var(--texto-suave); }
.captura--panel { max-width: 960px; border-radius: 16px; }

/* Un titular sobre el gradiente del cierre. */
.sobre-oscuro { color: #fff; }
.cierre__contenido--estrecho { max-width: 700px; gap: 24px; }
.seccion--texto-solo .enlace-de-accion { margin: 0 auto; }

@media (max-width: 809.98px) {
  .seccion--hero-corto { padding: 56px 20px 44px; gap: 30px; }
  .seccion--elevada,
  .seccion--captura,
  .seccion--texto-solo { padding: 56px 20px 60px; gap: 26px; }
  .marco-captura { gap: 10px; }
}

/* En el hero de la home, Framer apila los dos botones aunque quepan en línea:
   el contenedor es `width:auto` con salto activado y allí resuelve a columna.
   El cierre de /para-el-docente sí rompe solo, porque los botones son más
   largos. Se replica lo que se ve, acotado al hero. */
.seccion--hero .acciones { flex-direction: column; align-items: center; }

/* ── Preguntas ──────────────────────────────────────────────────── */
.seccion--preguntas {
  padding: 72px 32px 92px;
  border-top: 1px solid var(--borde);
}
.lista-preguntas {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}
.pregunta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--borde);
}
.pregunta--ultima { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 809.98px) {
  .seccion--preguntas { padding: 44px 20px 60px; }
  .lista-preguntas { gap: 20px; }
}

/* ── Para el centro ─────────────────────────────────────────────── */
.seccion--datos        { padding: 84px 32px 88px; gap: 44px; }
.seccion--conservacion { padding: 84px 32px; gap: 38px; }
.seccion--integraciones{ padding: 80px 32px 84px; gap: 36px; }
.seccion--documentos   { padding: 76px 32px 84px; gap: 28px; }
.seccion--cierre-centro{ padding: 96px 32px; }

.hechos {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 760px;
  margin: 0 auto;
}
.hecho {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--borde);
}
.hecho--ultimo { border-bottom: 0; padding-bottom: 0; }

.plazos { max-width: 760px; margin: 0 auto; width: 100%; }
.plazo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--borde);
}
.plazo:last-child { border-bottom: 0; }
.plazo dt { margin: 0; }
.plazo dd { margin: 0; text-align: right; }

.nota {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--fondo-elevado);
}

.rejilla-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.tarjeta--plataforma { padding: 26px 24px 24px; gap: 8px; border-radius: 14px; }

.fichas-legales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}
.ficha-legal {
  padding: 11px 18px;
  border-radius: 9px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  transition: border-color .18s ease, color .18s ease;
}
.ficha-legal:hover { border-color: var(--borde-fuerte); }

@media (max-width: 1199.98px) {
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .seccion--datos, .seccion--conservacion, .seccion--integraciones,
  .seccion--documentos { padding: 56px 20px 60px; gap: 28px; }
  .seccion--cierre-centro { padding: 72px 20px; }
  .rejilla-3 { grid-template-columns: 1fr; }
  .plazo { flex-direction: column; gap: 4px; align-items: flex-start; }
  .plazo dd { text-align: left; }
  .hechos { gap: 20px; }
  .hecho { padding-bottom: 20px; }
}

/* ── Los dos recorridos ─────────────────────────────────────────────
   Tres columnas: alumno · eje · profesor. Cada hito ocupa un lado y
   deja el otro vacío, salvo el que los cruza. El eje central es el
   mismo hilo continuo de arriba abajo. */
.seccion--recorridos { padding: 88px 32px 92px; gap: 40px; }
.seccion--recorridos__encabezado { max-width: 720px; }

.recorrido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

.hito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}
.hito__hueco { min-height: 1px; }

.hito__eje {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hito__linea { flex: 1; width: 1px; background: var(--borde-fuerte); min-height: 10px; }
.hito__punto {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: var(--borde-fuerte);
  flex-shrink: 0;
}
/* Los hitos del profesor llevan el punto en naranja: es su recorrido. */
.hito__punto--activo { background: var(--naranja); }

.hito__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 22px;
  border-radius: 13px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  box-shadow: 0 1px 3px 0 rgba(61, 53, 41, .05);
}
.hito__tarjeta--alum { align-items: flex-end; text-align: right; }
.hito__tarjeta--prof { border-color: rgba(247, 115, 40, .30); }
.hito__tarjeta--der  { align-items: flex-start; text-align: left; }

.cambio-de-turno {
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--naranja);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin: 6px 0;
}

@media (max-width: 809.98px) {
  .seccion--recorridos { padding: 56px 20px 64px; gap: 28px; }
  /* A pantalla estrecha el eje se va al margen y todo se alinea a la izquierda:
     dos columnas de tarjetas no caben sin partir las palabras. */
  .hito { grid-template-columns: 22px minmax(0, 1fr); }
  .hito__hueco { display: none; }
  .hito__eje { grid-column: 1; grid-row: 1; }
  .hito__tarjeta { grid-column: 2; align-items: flex-start; text-align: left; }
  .hito__tarjeta--alum + .hito__eje + .hito__tarjeta--prof { margin-top: 6px; }
  .hito:has(.hito__tarjeta--alum):has(.hito__tarjeta--prof) { grid-template-columns: 22px minmax(0, 1fr); }
  .hito:has(.hito__tarjeta--alum):has(.hito__tarjeta--prof) .hito__tarjeta--prof { grid-column: 2; }
  .recorrido { gap: 8px; }
}

/* ── Contacto ───────────────────────────────────────────────────── */
.seccion--contacto { padding: 86px 32px 72px; }
.contacto__fila {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1060px;
  margin: 0 auto;
}
.contacto__texto { flex: 1 1 0; display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.contacto__vias  { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }

.via {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border-radius: 14px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  box-shadow: 0 1px 3px 0 rgba(61, 53, 41, .05);
}
.via__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.via__texto a { text-decoration: none; }
.via__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.icono-caja--via { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgba(247,115,40,.11); }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--texto-titular);
  transition: border-color .18s ease, background-color .18s ease;
}
.pastilla:hover { border-color: var(--borde-fuerte); background: var(--fondo-elevado); }
.pastilla svg { color: var(--naranja); }
.pastilla--whatsapp svg { color: #25D366; }


/* ── Formulario ─────────────────────────────────────────────────── */
.seccion--formulario {
  padding: 88px 32px 96px;
  gap: 34px;
  background: var(--fondo-elevado);
}
.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.campo { display: flex; flex-direction: column; gap: 7px; }
.formulario input[type="text"],
.formulario input[type="email"],
.formulario textarea {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  color: var(--texto-titular);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 13px 15px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.formulario textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.formulario input:focus, .formulario textarea:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(247, 115, 40, .15);
}
.formulario ::placeholder { color: var(--texto-tenue); }

.consentimiento { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consentimiento input { margin-top: 3px; accent-color: var(--naranja); width: 16px; height: 16px; flex-shrink: 0; }

.boton--ancho { width: 100%; }
.formulario-aviso { text-align: center; padding: 12px; border-radius: 10px; }
.formulario-aviso--ok  { background: rgba(31, 107, 78, .10); color: #1F6B4E; }
.formulario-aviso--mal { background: rgba(199, 69, 27, .10); color: #C7451B; }

@media (max-width: 1199.98px) {
  .seccion--contacto { padding: 70px 28px 56px; }
  .contacto__fila { flex-direction: column; gap: 40px; max-width: 680px; }
  .contacto__vias { width: 100%; }
}
@media (max-width: 809.98px) {
  .seccion--contacto { padding: 52px 20px 44px; }
  .contacto__fila { gap: 30px; }
  .seccion--formulario { padding: 60px 20px 72px; gap: 26px; }
  .via { padding: 16px 15px; gap: 13px; }
}

/* ── Actividades ────────────────────────────────────────────────────
   Cada ficha con el mismo esqueleto: cabecera pegada, pregunta,
   párrafo, medios y el reparto en dos tarjetas. */
.seccion--actividad { padding: 84px 32px; border-top: 1px solid var(--borde); }
.seccion--elevada-plana { background: var(--fondo-elevado); }

.actividad {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

/* La cabecera se queda arriba mientras recorres la ficha: es lo que hace
   que cada actividad se lea como una unidad. Por debajo de la nav (z 5). */
.actividad__cabecera {
  position: sticky;
  top: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0 14px;
  background: var(--fondo);
  box-shadow: 0 14px 18px -14px rgba(61, 53, 41, .10);
}
.seccion--elevada-plana .actividad__cabecera { background: var(--fondo-elevado); }
.actividad__resumen { color: var(--texto-suave); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--texto);
}
.chip--mecanica {
  background: rgba(247, 115, 40, .11);
  border-color: rgba(247, 115, 40, .22);
  color: var(--naranja);
  font-weight: 600;
}

.pregunta-actividad { margin: 0; padding-left: 22px; border-left: 3px solid var(--naranja); }
.pregunta-actividad p { font-style: italic; }
/* El balanceo de línea deja el párrafo corto por la derecha: aquí estorba. */
.actividad__parrafo { text-wrap: pretty; }

.actividad__medios { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.actividad__medios figcaption { text-align: center; color: var(--texto-suave); }
.cartas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cartas img, .artefacto {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--borde);
  box-shadow: 0 2px 6px 0 rgba(61, 53, 41, .06);
}
.artefacto { max-width: 660px; margin: 0 auto; }

.tarjeta--reparto { gap: 10px; padding: 24px; }
.actividad__reparto { gap: 18px; max-width: none; }

@media (max-width: 1199.98px) {
  .seccion--actividad { padding: 64px 28px; }
  .cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .seccion--actividad { padding: 52px 20px; }
  .actividad { gap: 22px; }
  /* A pantalla pequeña la cabecera mide casi 200 px: pegada se comería un
     cuarto del alto útil. El separador de sección ya orienta. */
  .actividad__cabecera { position: static; padding: 0; box-shadow: none; }
  .cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .actividad__reparto { gap: 14px; }
  .tarjeta--reparto { padding: 20px 18px; }
}

/* ── Documentos legales ─────────────────────────────────────────────
   Una sola columna de lectura. Los tamaños salen de los presets
   Documento/* y los espaciados de los bloques del proyecto. */
.seccion--documento { padding: 76px 32px 92px; }
.documento { max-width: 760px; margin: 0 auto; width: 100%; }

/* Espaciado con `padding`, no con `margin`: en Framer son paddings y NO
   colapsan entre bloques contiguos. Con márgenes, un párrafo seguido de un
   apartado perdía la suma de los dos y el documento salía ~150 px corto. */
.documento-titulo { margin: 0; padding: 0 0 4px; }
.documento-fecha  { margin: 0; padding: 0 0 26px; color: var(--texto-suave); }
.documento-parrafo{ margin: 0; padding: 0 0 14px; }
.documento-apartado    { margin: 0; padding: 34px 0 12px; }
.documento-subapartado { margin: 0; padding: 20px 0 8px; }

.documento-lista { margin: 0; padding: 0 0 14px 22px; list-style: disc; }
.documento-lista li { margin-bottom: 7px; }
.documento-lista li::marker { color: var(--texto-tenue); }

.documento a { color: var(--purpura); text-decoration: underline; text-underline-offset: 2px; }
.documento a:hover { color: var(--naranja); }

/* Una tabla ancha se desplaza dentro de su caja: el cuerpo de la página
   nunca se mueve de lado. */
.documento-tabla {
  margin: 6px 0 24px;
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.documento-tabla table { border-collapse: collapse; width: 100%; min-width: 480px; }
.documento-tabla th, .documento-tabla td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6em;
  color: var(--texto);
}
.documento-tabla th {
  background: var(--fondo-elevado);
  font-weight: 600;
  color: var(--texto-titular);
}
.documento-tabla tr:last-child td { border-bottom: 0; }

@media (max-width: 809.98px) {
  .seccion--documento { padding: 48px 20px 64px; }
  .documento-tabla th, .documento-tabla td { padding: 11px 13px; font-size: 14px; }
}

/* ── Aviso de cookies ───────────────────────────────────────────────
   Barra abajo, pero en oscuro. Sobre una web entera en crema, un aviso con
   fondo blanco se pierde; con el púrpura del pie se ve desde el primer
   segundo y no bloquea nada. Molesta un poco, que es la idea, sin ponerse
   en medio.

   Los dos botones miden lo mismo y cuestan un clic cada uno: la AEPD exige
   que rechazar sea tan fácil como aceptar, y eso incluye tamaño y color. */
#aviso-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: var(--purpura-profundo);
  border-radius: 14px;
  box-shadow: 0 8px 20px -6px rgba(31, 26, 18, .28),
              0 26px 60px -18px rgba(47, 13, 88, .55);
  animation: ac-entra .5s cubic-bezier(.16, 1, .3, 1) .35s both;
}
@keyframes ac-entra {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #aviso-cookies { animation: none; } }

.ac__caja {
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.ac__texto {
  flex: 1;
  min-width: min(100%, 22rem);
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-sobre-oscuro);
}
.ac__texto a { color: #fff; text-underline-offset: 3px; }
.ac__texto a:hover { color: var(--dorado); }

.ac__botones { display: flex; gap: 10px; flex-shrink: 0; }
.ac__botones button {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
/* Las dos variantes «sobre oscuro» que ya usa el sistema en los cierres:
   contorno y sólido. Mismo tamaño, misma tipografía, un clic cada uno. */
#ac-rechazar {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
}
#ac-rechazar:hover { background: rgba(255, 255, 255, .24); }
#ac-aceptar {
  background: #fff;
  border: 1px solid #fff;
  color: var(--purpura-profundo);
}
#ac-aceptar:hover { background: rgba(255, 255, 255, .90); }

@media (max-width: 809.98px) {
  #aviso-cookies { left: 12px; right: 12px; bottom: 12px; }
  .ac__caja { gap: 15px; padding: 17px 17px; }
  .ac__texto { min-width: 100%; }
  .ac__botones { width: 100%; }
  .ac__botones button { flex: 1; padding: 12px 14px; }
}

/* El botón para cambiar la decisión sobre cookies, dentro del documento. */
.documento-boton {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 12px;
  margin-left: 4px;
  border-radius: 8px;
  border: 1px solid var(--borde-fuerte);
  background: var(--tarjeta);
  color: var(--texto-titular);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.documento-boton:hover { background: var(--fondo-elevado); border-color: var(--texto-tenue); }

/* El campo trampa del formulario: fuera de la vista y fuera del foco, pero
   presente en el DOM para que un bot lo rellene. No se usa `display:none`
   porque algunos bots lo detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Página de unidad (/actividades/prehistoria) ──────────────────────
   Blanco y negro. La pieza central es el mapa del tiempo del alumno, con lo
   que crea en cada sesión; lo demás son líneas finas y mucho aire. */
.unidad__ancho { width: 100%; max-width: 980px; margin: 0 auto; }

.unidad-hero { padding: 84px 32px 72px; }
.unidad-hero__migas { margin: 0 0 34px; font-size: 14px; line-height: 1.4; color: var(--texto-suave); }
.unidad-hero__migas a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--borde-fuerte); }
.unidad-hero__migas a:hover { color: var(--texto-titular); }
.unidad-hero__titular {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--texto-titular);
}
.unidad-hero__entradilla {
  margin: 28px 0 0;
  max-width: 54ch;
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: -0.015em;
  color: var(--texto);
}

/* Bloques. Aire y una línea arriba; nada de bandas de color. */
.unidad-bloque { padding: 0 32px; }
.unidad-bloque > .unidad__ancho { padding: 88px 0 96px; border-top: 1px solid var(--borde); }
.unidad-bloque__cabecera { display: flex; flex-direction: column; gap: 12px; max-width: 58ch; margin-bottom: 56px; }
.unidad-bloque__cabecera > * { margin: 0; }
.unidad-bloque .titular-2 { font-weight: 500; text-wrap: pretty; }
.unidad-bloque .cuerpo { color: var(--texto); }
.enlace-texto { color: var(--texto-titular); text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.enlace-texto:hover { color: var(--naranja); }

/* El mapa del tiempo del alumno, en estático. Medidas y colores salen de
   components/timeline/map (MapNode, MapLanes, MapRuler, MapArtifact): tronco
   de 2 px en tinta, nodo de 18, nombre en serifa, fechas diminutas, la banda
   del Paleolítico fuera de escala con su «//», y el artefacto como una foto. */
.mapa { --tinta: #1f1f1f; --regla: 96px; list-style: none; margin: 0; padding: 0; }
.mapa__periodo {
  position: relative;
  display: grid;
  grid-template-columns: var(--regla) 250px minmax(0, 1fr);
  gap: 0 44px;
  padding: 34px 28px 64px 0;
  scroll-margin-top: 110px;
}
/* Tronco: del centro de este nodo al del siguiente. */
.mapa__periodo::before {
  content: "";
  position: absolute;
  left: calc(var(--regla) + 8px);
  top: 46px;
  bottom: -46px;
  z-index: 2;
  width: 2px;
  background: var(--tinta);
}
/* Nodo. */
.mapa__periodo::after {
  content: "";
  position: absolute;
  left: var(--regla);
  top: 37px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--tinta);
  border-radius: 50%;
  background: var(--tinta);
  z-index: 3;
}
.mapa__ano {
  padding: 4px 14px 0 0;
  text-align: right;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  color: #8b857b;
  font-variant-numeric: tabular-nums;
}
.mapa__punto { display: flex; flex-direction: column; gap: 22px; padding-left: 34px; }
.mapa__rotulo { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.mapa__rotulo strong { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--tinta); }
.mapa__rotulo span { font-size: 12.5px; line-height: 1.4; color: #8b857b; font-variant-numeric: tabular-nums; }
/* Borde blanco, como una foto, y un filo tenue para que se vea sobre el papel. */
.mapa__artefacto {
  display: block;
  object-fit: cover;
  object-position: top;
  border: 3px solid #fff;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(31, 31, 31, .1), 0 22px 44px -22px rgba(40, 30, 10, .4);
}
.mapa__artefacto--carta { width: 124px; height: 168px; transform: rotate(-4deg); }
.mapa__artefacto--ancho { width: 188px; height: 140px; transform: rotate(3deg); }
/* La banda del Paleolítico: 1,4 millones de años que no caben a escala. */
.mapa__periodo--banda { margin-bottom: 30px; }
.mapa__periodo--banda > * { position: relative; z-index: 1; }
.mapa__periodo--banda .mapa__punto::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34px;
  bottom: -64px;
  left: -40px;
  width: calc(980px - var(--regla) - 4px);
  max-width: calc(100vw - var(--regla) - 68px);
  border-radius: 12px;
  background: #f2f0ec;
}
.mapa__periodo--banda::before { bottom: -76px; }
.mapa__corte { position: absolute; z-index: 2; left: calc(var(--regla) - 1px); bottom: -22px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; }
.mapa__fuera { position: absolute; z-index: 1; right: 16px; bottom: 12px; font-size: 11.5px; color: #8b857b; }
/* El último periodo: el tronco baja hasta el remate. */
.mapa__periodo--ultimo { padding-bottom: 48px; }
.mapa__periodo--ultimo::before { bottom: -14px; }
.mapa__fin { position: relative; display: grid; grid-template-columns: var(--regla) 1fr; height: 18px; }
.mapa__fin::after { content: ""; position: absolute; left: calc(var(--regla) + 2px); top: 13px; width: 14px; height: 2px; border-radius: 1px; background: var(--tinta); }
.mapa__fin .mapa__ano { padding-top: 5px; }

.sesion__que { display: flex; flex-direction: column; gap: 16px; max-width: 60ch; }
.sesion__que > * { margin: 0; }
.sesion__pregunta {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--texto-titular);
  text-wrap: balance;
}

/* Una sesión por dentro: los pasos sí son una secuencia, y por eso van numerados. */
.por-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 72px; align-items: start; }
.por-dentro .cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.por-dentro figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.por-dentro figcaption { color: var(--texto-suave); }
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: flex; flex-direction: column; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 22px 0 24px; border-top: 1px solid var(--borde); }
.pasos li:first-child { border-top: 0; padding-top: 0; }
.pasos li::before {
  content: counter(paso);
  grid-row: span 2;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  line-height: 1.3;
  color: var(--naranja);
}
.pasos strong { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--texto-titular); letter-spacing: -0.01em; }
.pasos p { margin: 8px 0 0; max-width: 54ch; }

/* Criterios: una tabla. Número, en qué se fija Clyra, lo que dice el BOE. */
.criterio {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 44px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--borde);
}
.criterio:last-child { border-bottom: 1px solid var(--borde); }
.criterio > * { margin: 0; }
.criterio__numero { font-family: "Playfair Display", Georgia, serif; font-size: 24px; line-height: 1.25; color: var(--texto-titular); font-variant-numeric: lining-nums; }
.criterio__observa { font-size: 17px; line-height: 1.55; color: var(--texto-titular); letter-spacing: -0.015em; }
.criterio__boe { font-size: 14px; line-height: 1.65; color: var(--texto-suave); }
.criterios__nota { margin: 36px 0 0; max-width: 66ch; }

.unidad-texto { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.unidad-texto > * { margin: 0; }
.unidad-preguntas { border-top: 0; padding-top: 0; }
.unidad-preguntas .lista-preguntas { max-width: 980px; margin: 0 auto; padding-top: 88px; border-top: 1px solid var(--borde); }
.unidad-preguntas .pregunta { max-width: 62ch; }

@media (max-width: 809.98px) {
  .unidad-hero { padding: 48px 20px 64px; }
  .unidad-hero__entradilla { font-size: 17px; }
  .unidad-bloque { padding: 0 20px; }
  .unidad-bloque > .unidad__ancho { padding: 56px 0 64px; }
  .unidad-bloque__cabecera { margin-bottom: 36px; }
  .mapa { --regla: 0px; }
  .mapa__ano { display: none; }
  .mapa__periodo { grid-template-columns: 1fr; gap: 22px; padding: 26px 16px 48px 0; }
  .mapa__periodo::before { top: 38px; bottom: -38px; }
  .mapa__periodo::after { top: 29px; }
  .mapa__punto { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .mapa__rotulo strong { font-size: 20px; }
  .mapa__artefacto--carta { width: 84px; height: 114px; }
  .mapa__artefacto--ancho { width: 120px; height: 90px; }
  .sesion__que { padding-left: 34px; }
  .mapa__periodo--banda .mapa__punto::before { top: -26px; bottom: auto; height: calc(100% + 1000px); display: none; }
  .mapa__periodo--banda { background: #f2f0ec; border-radius: 12px; margin-left: -8px; padding-left: 8px; }
  .mapa__periodo--banda::before, .mapa__periodo--banda::after { margin-left: 8px; }
  .mapa__corte { margin-left: 8px; }
  .mapa__fin { display: none; }
  .por-dentro { grid-template-columns: 1fr; gap: 44px; }
  .criterio { grid-template-columns: 1fr; gap: 8px; padding: 22px 0 24px; }
  .unidad-preguntas .lista-preguntas { padding-top: 56px; }
}

/* ── Opinión (DEC-0049): portada, índice, nota y franja de la home ──
   Una columna de lectura, como los documentos. Lo que distingue a la
   sección es la percha: la noticia a la que responde cada nota, en
   cursiva y en naranja, encima del titular que la contesta. */
.seccion--opinion-cabecera { padding-bottom: 40px; }
.opinion__firma { color: var(--texto-suave); }
.opinion__firma a { color: var(--purpura); text-decoration: underline; text-underline-offset: 2px; }
.opinion__firma a:hover { color: var(--naranja); }

.opinion-portada__percha,
.opinion-entrada__percha,
.opinion-ultima__percha,
.opinion-nota__percha {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45em;
  color: var(--naranja);
  text-wrap: pretty;
}
.opinion-portada__titulo,
.opinion-entrada__titulo,
.opinion-ultima__titulo {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.14em;
  letter-spacing: -0.015em;
  color: var(--texto-titular);
  text-wrap: balance;
}
.opinion-portada__titulo a,
.opinion-entrada__titulo a,
.opinion-ultima__titulo a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color .18s ease;
}
.opinion-portada__titulo a:hover,
.opinion-entrada__titulo a:hover,
.opinion-ultima__titulo a:hover { text-decoration-color: var(--naranja); }
.opinion-portada__resumen,
.opinion-entrada__resumen,
.opinion-ultima__resumen {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.62em;
  letter-spacing: -0.02em;
  color: var(--texto);
  max-width: 62ch;
}
.opinion-portada__fecha,
.opinion-entrada__fecha {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: var(--texto-suave);
}

/* La portada: la última nota, con su tarjeta */
.seccion--opinion-portada { padding: 0 32px 56px; }
.opinion-portada {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 48px;
  align-items: center;
  padding: 44px 48px;
  background: var(--fondo-elevado);
  border-radius: 24px;
}
.opinion-portada--sin-imagen { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.opinion-portada__texto { display: flex; flex-direction: column; gap: 14px; }
.opinion-portada__titulo { font-size: 36px; line-height: 1.1em; letter-spacing: -0.02em; }
.opinion-portada__texto .enlace-de-accion { margin-top: 6px; }
.opinion-portada__imagen {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: 0 22px 44px -18px rgba(47, 13, 88, .28);
  transition: transform .25s ease;
}
.opinion-portada__imagen:hover { transform: translateY(-3px); }
.opinion-portada__imagen img { width: 100%; height: auto; display: block; }

/* El índice: fecha a la izquierda, la nota a la derecha */
.seccion--opinion { padding: 0 32px 96px; }
.opinion { max-width: 860px; margin: 0 auto; width: 100%; }
.opinion-entrada {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 32px;
  row-gap: 10px;
  padding: 34px 0 36px;
  border-top: 1px solid var(--borde);
}
.opinion-entrada:last-child { border-bottom: 1px solid var(--borde); }
.opinion-entrada__percha,
.opinion-entrada__titulo,
.opinion-entrada__resumen { grid-column: 2; }
.opinion-entrada__titulo { font-size: 28px; }
.opinion-entrada__fecha { grid-column: 1; grid-row: 1 / span 3; padding-top: 4px; }

/* La nota */
.seccion--opinion-nota { padding: 64px 32px 96px; }
.opinion-nota { max-width: 680px; margin: 0 auto; width: 100%; }
.opinion-nota__cabecera {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--borde);
}
.opinion-nota__seccion {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4em;
  color: var(--texto-suave);
}
.opinion-nota__seccion a { text-decoration: none; }
.opinion-nota__seccion a:hover { color: var(--naranja); }
.opinion-nota__titulo {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.08em;
  letter-spacing: -0.02em;
  color: var(--texto-titular);
  text-wrap: balance;
}
.opinion-nota__firma {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5em;
  color: var(--texto-suave);
  padding-top: 4px;
}

.opinion-nota__cuerpo {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 17.5px;
  line-height: 1.68em;
  letter-spacing: -0.015em;
  color: var(--texto);
}
.opinion-nota__cuerpo > * + * { margin-top: 18px; }
.opinion-nota__cuerpo h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2em;
  letter-spacing: -0.015em;
  color: var(--texto-titular);
  margin-top: 42px;
  text-wrap: balance;
}
.opinion-nota__cuerpo h2 + * { margin-top: 14px; }
.opinion-nota__cuerpo h3 {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35em;
  color: var(--texto-titular);
  margin-top: 30px;
}
.opinion-nota__cuerpo strong { font-weight: 600; color: var(--texto-titular); }
.opinion-nota__cuerpo a { color: var(--purpura); text-decoration: underline; text-underline-offset: 2px; }
.opinion-nota__cuerpo a:hover { color: var(--naranja); }
.opinion-nota__cuerpo blockquote {
  margin: 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--naranja);
  font-style: italic;
}
.opinion-nota__cuerpo ul, .opinion-nota__cuerpo ol { padding-left: 24px; }
.opinion-nota__cuerpo ul { list-style: disc; }
.opinion-nota__cuerpo li + li { margin-top: 8px; }
.opinion-nota__cuerpo li::marker { color: var(--texto-tenue); }
.opinion-nota__cuerpo hr { border: 0; height: 1px; background: var(--borde); margin: 32px 0; }

.opinion-nota__compartir {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: var(--texto-suave);
  padding-top: 10px;
}
.opinion-nota__compartir a {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--borde);
}
.opinion-nota__compartir a:hover { color: var(--naranja); text-decoration-color: var(--naranja); }

.opinion-nota__cierre {
  margin-top: 52px;
  padding: 30px 30px 32px;
  background: var(--fondo-elevado);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opinion-nota__cierre-texto {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.opinion-nota__cierre-texto strong { font-weight: 600; color: var(--texto-titular); }
.opinion-nota__cierre .enlace-de-accion + .opinion-nota__cierre-texto { margin-top: 14px; }

.opinion-nota__mas { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--borde); }
.opinion-nota__mas-titulo {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2em;
  color: var(--texto-titular);
  padding-bottom: 6px;
}
.opinion-nota__mas-lista li { border-top: 1px solid var(--borde); }
.opinion-nota__mas-lista li:first-child { border-top: 0; }
.opinion-nota__mas-lista a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  text-decoration: none;
}
.opinion-nota__mas-percha {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4em;
  color: var(--naranja);
}
.opinion-nota__mas-enlace {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4em;
  letter-spacing: -0.01em;
  color: var(--texto-titular);
  transition: color .18s ease;
}
.opinion-nota__mas-lista a:hover .opinion-nota__mas-enlace { color: var(--naranja); }

.opinion-nota__volver {
  margin-top: 28px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5em;
}
.opinion-nota__volver a { color: var(--purpura); text-decoration: underline; text-underline-offset: 2px; }
.opinion-nota__volver a:hover { color: var(--naranja); }

/* La franja de la home con la última nota */
.seccion--opinion-ultima { padding: 84px 32px 88px; border-top: 1px solid var(--borde); }
.opinion-ultima {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.opinion-ultima__titulo { font-size: 30px; }
.opinion-ultima .enlace-de-accion { margin-top: 6px; }

@media (max-width: 1199.98px) {
  .opinion-portada { grid-template-columns: minmax(0, 1fr); max-width: 820px; gap: 32px; }
  .opinion-portada__imagen { max-width: 560px; }
}
@media (max-width: 809.98px) {
  .seccion--opinion-cabecera { padding-bottom: 28px; }
  .seccion--opinion-portada { padding: 0 20px 40px; }
  .opinion-portada { padding: 28px 22px 30px; border-radius: 18px; gap: 24px; }
  .opinion-portada__titulo { font-size: 27px; }
  .seccion--opinion { padding: 0 20px 64px; }
  .opinion-entrada { grid-template-columns: minmax(0, 1fr); padding: 28px 0 30px; row-gap: 9px; }
  .opinion-entrada__percha, .opinion-entrada__titulo, .opinion-entrada__resumen, .opinion-entrada__fecha { grid-column: 1; }
  .opinion-entrada__fecha { grid-row: auto; padding-top: 2px; }
  .opinion-entrada__titulo, .opinion-ultima__titulo { font-size: 26px; }
  .seccion--opinion-nota { padding: 40px 20px 64px; }
  .opinion-nota__cabecera { gap: 14px; padding-bottom: 26px; margin-bottom: 26px; }
  .opinion-nota__titulo { font-size: 33px; }
  .opinion-nota__cuerpo { font-size: 17px; }
  .opinion-nota__cuerpo h2 { font-size: 23px; margin-top: 34px; }
  .opinion-nota__cierre { padding: 24px 22px 26px; }
  .seccion--opinion-ultima { padding: 56px 20px 60px; }
}
@media (max-width: 639.98px) {
  .opinion-portada__percha, .opinion-entrada__percha, .opinion-ultima__percha, .opinion-nota__percha { font-size: 17px; }
  .opinion-portada__titulo { font-size: 25px; }
  .opinion-entrada__titulo, .opinion-ultima__titulo { font-size: 24px; }
  .opinion-nota__titulo { font-size: 29px; }
}