/* Escuela de Familias 2026/2027 · Colegio Antonio Machado
   Mismo estilo que la animación para redes (after_effects/escuela_familias_2627):
   colores reales del logo del Ayuntamiento, fondo crema, titulares condensados
   (Encode Sans Condensed, la más parecida a la Futura Condensed de los vídeos) y Asap,
   la letra del tríptico. Fuentes alojadas aquí, sin pedirlas a Google. */

@font-face { font-family: "Asap"; src: url("../fuentes/asap-variable.woff2") format("woff2");
             font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Encode Sans Condensed"; src: url("../fuentes/encode-sans-condensed-800.woff2") format("woff2");
             font-weight: 800; font-display: swap; }

:root {
  --crema: #FFF8F2;
  --magenta: #D92450;
  --magenta-osc: #B81B42;
  --azul: #84BCE7;
  --amarillo: #E3AD30;
  --azul-claro: #D2E4F6;
  --azul-suave: #E5EFF9;
  --amarillo-suave: #FBEDCB;
  --tinta: #2A1F2D;
  --tinta-suave: #66596B;
  --blanco: #FFFFFF;
  --sombra: 0 10px 30px rgba(42, 31, 45, .10);
  --radio: 22px;
  --titulares: "Encode Sans Condensed", "Futura", "Arial Narrow", sans-serif;
  --texto: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--texto);
       font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
a { color: var(--magenta); }
h1, h2, h3 { margin: 0; line-height: 1.05; }
h2 { font-family: var(--titulares); font-weight: 800; text-transform: uppercase; color: var(--tinta);
     font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: .01em; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
section[id] { scroll-margin-top: 84px; }

.contenedor { width: min(1160px, 100% - 32px); margin-inline: auto; }
.contenedor--estrecho { width: min(820px, 100% - 32px); }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px;
         padding: .7em 1.6em; border-radius: 999px; border: 0; background: var(--magenta); color: var(--blanco);
         font: 700 1.05rem/1.1 var(--texto); text-decoration: none; cursor: pointer;
         box-shadow: 0 8px 20px rgba(217, 36, 80, .28); transition: transform .15s, box-shadow .15s, background .15s; }
.boton:hover { transform: translateY(-2px); background: var(--magenta-osc); box-shadow: 0 12px 26px rgba(217, 36, 80, .34); }
.boton--pequeno { min-height: 42px; padding: .5em 1.2em; font-size: .95rem; }
.boton--claro { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra); }
.boton--claro:hover { background: var(--blanco); color: var(--magenta); }
.boton--blanco { background: var(--blanco); color: var(--magenta); box-shadow: 0 10px 24px rgba(90, 10, 35, .25); }
.boton--blanco:hover { background: var(--amarillo-suave); }
.boton--grande { min-height: 64px; font-size: 1.2rem; padding: .8em 2em; }
.boton--whatsapp { background: #1FA855; box-shadow: none; }
.boton--whatsapp:hover { background: #178a45; box-shadow: none; }
.boton--borde { background: transparent; color: var(--blanco); border: 2px solid rgba(255, 255, 255, .7); box-shadow: none; }
.boton--borde:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }
.boton.cerrado { background: var(--tinta-suave); box-shadow: none; pointer-events: none; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 248, 242, .88);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(42, 31, 45, .06); }
.cabecera__fila { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
/* Logos del AMPA y del colegio, junto al de la Escuela de Familias */
.socios { display: flex; align-items: center; gap: 12px; margin-right: auto; padding-left: 16px; border-left: 2px solid rgba(42, 31, 45, .1); }
.socios img { display: block; height: 46px; width: auto; }
.marca img { width: 40px; height: 40px; }
.marca b { display: block; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; color: var(--magenta); font-size: 1.15rem; line-height: 1; }
.marca small { display: block; font-size: .8rem; color: var(--tinta-suave); line-height: 1.3; }
.menu { display: flex; gap: 22px; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .98rem; }
.menu a:hover { color: var(--magenta); }

/* ---------- Manchas de fondo (como en el vídeo) ---------- */
.mancha { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.mancha--azul { width: 46vmax; height: 46vmax; background: var(--azul-suave); left: -16vmax; top: -18vmax; }
.mancha--amarilla { width: 36vmax; height: 36vmax; background: var(--amarillo-suave); right: -12vmax; bottom: -14vmax; }

/* ---------- Portada ---------- */
.portada { position: relative; isolation: isolate; overflow: hidden; padding: 48px 0 72px; }
.portada__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.portada__logo { order: 2; text-align: center; }
.portada__pista { margin: 6px 0 0; font-size: .9rem; color: var(--tinta-suave); opacity: 0; animation: aparece .6s 4s both; }
.etiqueta { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--blanco);
            box-shadow: var(--sombra); font-size: .95rem; color: var(--tinta-suave); }
.etiqueta b { color: var(--blanco); background: var(--magenta); border-radius: 999px; padding: 2px 10px; margin-right: 4px;
              font-family: var(--titulares); text-transform: uppercase; font-weight: 800; letter-spacing: .02em; }
h1 { font-weight: 600; }
.h1__antes { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.h1__grande { display: block; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; color: var(--magenta);
              font-size: clamp(3.2rem, 8.4vw, 6.4rem); line-height: .95; letter-spacing: .005em; margin-top: 4px; }
.entradilla { font-size: 1.2rem; color: var(--tinta-suave); max-width: 34em; margin: 18px 0 0; }
.entradilla b { color: var(--tinta); }
.entradilla--centro { margin-inline: auto; text-align: center; }
.plazo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 26px; padding: 12px 20px;
         background: var(--amarillo); border-radius: 16px; transform: rotate(-1.2deg); box-shadow: 0 10px 22px rgba(160, 110, 10, .22); }
.plazo__texto { font-weight: 600; }
.plazo__cuenta { font-family: var(--titulares); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; }
.plazo__cuenta:empty { display: none; }
.botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- Logo animado ----------
   El SVG está despiezado (lo genera herramientas/generar_recursos.py). Las unidades de
   los transform de CSS son las del viewBox (puntos del PDF, 330×450). */
.logo-ef { position: relative; width: min(100%, 440px, max(240px, calc((100vh - 200px) * .733))); margin-inline: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.logo-ef svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-ef__corazon { position: absolute; inset: 0; pointer-events: none; }
.logo-ef .m { fill: var(--magenta); color: var(--magenta); }
.logo-ef .a { fill: var(--azul); }
.logo-ef .y { fill: var(--amarillo); }
.logo-ef .c { fill: var(--azul-claro); }
.logo-ef__corazon path { fill: var(--magenta); }

.persona { transform-box: fill-box; transform-origin: 50% 100%; animation: ola .5s ease-in-out both; animation-delay: calc(2.75s + var(--i) * .08s); }
.cuerpo { transform-box: fill-box; transform-origin: 50% 100%; animation: brota .5s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: var(--d); }
.cabeza { transform-box: fill-box; transform-origin: 50% 50%; animation: cae .55s both; animation-delay: calc(var(--d) + .1s); }
.brazos { transform-box: fill-box; transform-origin: 50% 50%; animation: abre .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--d) + .2s); }
.pA { --i: 0; --d: .15s; } .pB { --i: 1; --d: .32s; } .pC { --i: 2; --d: .55s; } .pD { --i: 3; --d: .72s; }
.pE { --i: 4; --d: .89s; } .pF { --i: 5; --d: 1.1s; } .pG { --i: 6; --d: 1.27s; }

/* El corazón se dibuja desde sus dos extremos y se cierra arriba: una máscara cónica
   centrada en el corazón que se abre desde abajo hacia los dos lados. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 180deg; }
.logo-ef__corazon {
  --mascara: conic-gradient(from 180deg at 50% 23%, #000 var(--giro), transparent var(--giro) calc(360deg - var(--giro)), #000 calc(360deg - var(--giro)));
  -webkit-mask-image: var(--mascara); mask-image: var(--mascara);
  animation: dibuja 1s cubic-bezier(.45, 0, .2, 1) 1.55s both;
}
.letra { transform-box: fill-box; transform-origin: 50% 50%; animation: letra .5s both; animation-delay: calc(2.25s + var(--n) * .04s); }
.pincelada { animation: pinta .5s ease-out 3.05s both; }
.cifra { transform-box: fill-box; transform-origin: 50% 50%; animation: salta .45s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(3.2s + var(--n) * .04s); }

/* Saludo al tocar el logo: otra ola. */
.logo-ef.saluda .persona { animation: ola2 .5s ease-in-out both; animation-delay: calc(var(--i) * .08s); }
.logo-ef.saluda .logo-ef__corazon { animation: latido .6s ease-out .35s both; transform-origin: 50% 23%; }

@keyframes brota { 0% { transform: scale(.7, 0); } 45% { transform: scale(.94, 1.12); } 72% { transform: scale(1.04, .95); } 100% { transform: none; } }
@keyframes cae { 0% { transform: translateY(-60px); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateY(2px); }
                 75% { transform: translateY(-5px); } 100% { transform: none; opacity: 1; } }
@keyframes abre { 0% { transform: scale(0) rotate(-24deg); } 60% { transform: scale(1.14) rotate(6deg); } 100% { transform: none; } }
@keyframes ola { 0%, 100% { transform: none; } 45% { transform: translateY(-14px); } }
@keyframes ola2 { 0%, 100% { transform: none; } 45% { transform: translateY(-14px); } }
@keyframes dibuja { from { --giro: 52deg; } to { --giro: 180deg; } }
@keyframes latido { 0%, 100% { transform: none; } 30% { transform: scale(1.06); } 60% { transform: scale(.98); } }
@keyframes letra { 0% { transform: translateY(-40px) rotate(-12deg); opacity: 0; } 20% { opacity: 1; }
                   60% { transform: translateY(3px) rotate(3deg); } 100% { transform: none; opacity: 1; } }
@keyframes pinta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes salta { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Secciones ---------- */
.seccion { position: relative; padding: 88px 0; }
.seccion--suave { background: var(--blanco); }
.antetitulo { margin: 0 0 8px; color: var(--magenta); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; }
.seccion h2 { max-width: 24ch; }
#contenidos h2, #contenidos .antetitulo, #video h2, #video .antetitulo { text-align: center; margin-inline: auto; }

.dos-columnas { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; margin-top: 30px; }
.texto p { margin: 0 0 14px; }
.cita { margin: 0; padding: 30px 34px; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
        border-left: 8px solid var(--amarillo); }
.cita p { margin: 0; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
          line-height: 1.1; color: var(--magenta); }
.cita cite { display: block; margin-top: 14px; font-style: normal; color: var(--tinta-suave); font-size: .95rem; }

.datos { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dato { background: var(--blanco); border-radius: var(--radio); padding: 24px 22px; box-shadow: var(--sombra); }
.dato b { display: block; margin-top: 14px; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.dato span:last-child { display: block; margin-top: 6px; color: var(--tinta-suave); font-size: 1rem; line-height: 1.4; }
.dato__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.dato__icono svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dato__icono--azul { background: var(--azul); } .dato__icono--amarillo { background: var(--amarillo); } .dato__icono--magenta { background: var(--magenta); }

.seccion--video { padding-top: 24px; }
.video { margin: 32px auto 0; width: min(900px, 100%); aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden;
         box-shadow: 0 20px 50px rgba(42, 31, 45, .18); background: var(--tinta); }
.video video { display: block; width: 100%; height: 100%; object-fit: cover; }

.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 30px 28px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.tarjeta__num { font-family: var(--titulares); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--azul-claro); }
.tarjeta:nth-child(2) .tarjeta__num { color: var(--amarillo-suave); } .tarjeta:nth-child(3) .tarjeta__num { color: #F7D0DA; }
.tarjeta h3 { margin: 10px 0 8px; font-size: 1.3rem; }
.tarjeta p { margin: 0; color: var(--tinta-suave); }

/* Línea de tiempo */
.linea { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
.linea::before { content: ""; position: absolute; left: 10px; right: 10px; top: 13px; height: 4px; border-radius: 4px;
                 background: linear-gradient(90deg, var(--magenta), var(--amarillo), var(--azul)); }
.linea__paso { position: relative; padding-top: 44px; }
.linea__paso::before { content: ""; position: absolute; top: 3px; left: 0; width: 24px; height: 24px; border-radius: 50%;
                       background: var(--blanco); border: 5px solid var(--azul); }
.linea__paso--ahora::before { border-color: var(--magenta); box-shadow: 0 0 0 7px rgba(217, 36, 80, .18); }
.linea__cuando { display: inline-block; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; color: var(--magenta); font-size: 1.1rem; line-height: 1.1; }
.linea__paso h3 { margin: 8px 0 6px; }
.linea__paso p { margin: 0; color: var(--tinta-suave); font-size: 1rem; }

.requisitos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.requisito { padding: 28px; border-radius: var(--radio); border: 2px dashed rgba(217, 36, 80, .28); background: rgba(255, 255, 255, .55); }
.requisito h3 { color: var(--magenta); font-size: 1.3rem; margin-bottom: 8px; }
.requisito p { margin: 0; }

/* ---------- ¿Te apuntas? ---------- */
.apuntate { background: var(--magenta); color: var(--blanco); text-align: center; padding: 88px 0 96px; position: relative; overflow: hidden; }
.apuntate__titulo { font-family: var(--titulares); font-weight: 800; text-transform: uppercase; color: var(--blanco); font-size: clamp(3.4rem, 11vw, 7.5rem); line-height: .95; max-width: none; }
.apuntate__lema { font-size: clamp(1.2rem, 2.6vw, 1.55rem); margin: 18px auto 0; max-width: 30em; }
.fila-familias { display: flex; justify-content: center; margin: 34px auto 10px; max-width: 760px; min-height: 120px; }
.fila-familias svg { width: 10%; max-width: 76px; height: auto; margin: 0 -2px; transform-origin: 50% 100%; transform: scale(0); }
.fila-familias.visible svg { animation: familia .45s cubic-bezier(.3, 1.5, .5, 1) both, ola .45s ease-in-out both;
                             animation-delay: calc(var(--k) * .1s), calc(1.5s + var(--k) * .06s); }
@keyframes familia { from { transform: scale(0); } to { transform: none; } }
.insignia { display: inline-block; margin-top: 18px; padding: 18px 44px 20px; background: var(--amarillo); color: var(--tinta);
            border-radius: 26px; transform: rotate(-2deg); box-shadow: 0 14px 30px rgba(90, 10, 35, .3); }
.insignia small { display: block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
.insignia span { display: block; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1; margin-top: 4px; }
.insignia em { display: block; font-style: normal; font-weight: 700; margin-top: 6px; }
.insignia em:empty { display: none; }
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 56px auto 40px; max-width: 1000px; display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.pasos li { counter-increment: paso; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radio);
            padding: 24px 24px 26px; font-size: 1rem; line-height: 1.5; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blanco);
                    color: var(--magenta); font-family: var(--titulares); font-weight: 800; font-size: 1.4rem; margin-bottom: 12px; }
.pasos b { display: block; font-size: 1.2rem; margin-bottom: 4px; }
.apuntate__aviso { margin: 14px 0 0; font-weight: 600; }
.formulario { margin: 8px auto 0; max-width: 780px; padding: 10px 10px 4px; background: var(--blanco); border-radius: var(--radio);
              box-shadow: 0 16px 40px rgba(90, 10, 35, .3); scroll-margin-top: 84px; }
.formulario iframe { display: block; width: 100%; height: var(--alto-escritorio, 1900px); border: 0; border-radius: 14px; background: var(--blanco); }
.formulario__cabecera { display: block; width: 100%; height: auto; border-radius: 14px; margin-bottom: 10px; }
.formulario__otra { margin: 8px 0 6px; color: var(--tinta-suave); font-size: .95rem; }
.formulario[hidden], .boton[hidden] { display: none; }
.apuntate__abierta { margin: 10px auto 0; max-width: 34em; font-size: 1.1rem; opacity: .95; }
.compartir { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.compartir p { width: 100%; margin: 0 0 4px; opacity: .92; }

/* ---------- Preguntas ---------- */
.preguntas { margin-top: 32px; display: grid; gap: 12px; }
.preguntas details { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra); padding: 0 24px; }
.preguntas summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 700; font-size: 1.1rem; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
                            display: grid; place-items: center; border-radius: 50%; background: var(--azul-suave); color: var(--magenta); font-size: 1.3rem; }
.preguntas details[open] summary::after { content: "−"; background: var(--magenta); color: var(--blanco); }
.preguntas details p { margin: 0 0 20px; color: var(--tinta-suave); }
.mas-info { margin-top: 28px; color: var(--tinta-suave); text-align: center; }

/* ---------- Pie ---------- */
.pie { background: var(--blanco); padding: 48px 0 40px; text-align: center; font-size: .95rem; color: var(--tinta-suave); }
.pie__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 48px; margin-bottom: 24px; }
.pie__logos img { width: auto; height: 104px; }
.pie__logos img[src$=".svg"] { height: auto; width: 170px; }
.pie p { max-width: 46em; margin: 0 auto 10px; }

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 980px) {
  .menu { display: none; }
  .portada { padding-top: 28px; }
  .portada__rejilla { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .portada__logo { order: 0; }
  .logo-ef { width: min(330px, 78vw); }
  .entradilla { margin-inline: auto; }
  .botones { justify-content: center; }
  .dos-columnas { grid-template-columns: 1fr; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linea { grid-template-columns: 1fr; gap: 0; }
  .linea::before { left: 10px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto;
                   background: linear-gradient(180deg, var(--magenta), var(--amarillo), var(--azul)); }
  .linea__paso { padding: 0 0 28px 48px; }
  .linea__paso::before { top: 0; }
}
@media (max-width: 700px) {
  .tarjetas, .requisitos, .pasos { grid-template-columns: 1fr; }
}
/* Móvil en horizontal: logo y texto lado a lado, para que el logo no ocupe toda la pantalla. */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .portada { padding: 16px 0 40px; }
  .portada__rejilla { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 28px; text-align: left; }
  .portada__logo { order: 0; }
  .logo-ef { width: min(100%, 260px, max(150px, calc((100vh - 170px) * .733))); }
  .portada__pista { display: none; }
  .entradilla { margin-inline: 0; font-size: 1.05rem; }
  .botones { justify-content: flex-start; }
  .h1__grande { font-size: clamp(2.6rem, 7vw, 3.6rem); }
}
@media (max-width: 560px) {
  body { font-size: 1.05rem; }
  .marca small { display: none; }
  .seccion { padding: 64px 0; }
  .datos { grid-template-columns: 1fr; }
  .dato { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; }
  .dato__icono { grid-row: span 2; }
  .dato b { margin-top: 0; }
  .video { aspect-ratio: 4 / 5; }
  .plazo { transform: none; }
  .insignia { padding: 16px 26px 18px; }
  .boton--grande { width: 100%; }
  .formulario { padding: 6px 6px 2px; border-radius: 18px; }
  .formulario iframe { height: var(--alto-movil, 2600px); }
  .formulario__cabecera { margin-bottom: 6px; }
  .portada { padding: 16px 0 56px; }
  .logo-ef { width: min(230px, 62vw); }
  .portada__pista { display: none; }
  .cabecera__fila { gap: 12px; }
  .socios { gap: 8px; padding-left: 12px; }
  .socios img { height: 38px; }
  .etiqueta { margin-bottom: 12px; }
}

/* Sin animaciones para quien lo pide en su sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-ef *, .logo-ef__corazon, .portada__pista, .fila-familias svg { animation: none !important; }
  .fila-familias svg { transform: none; }
  .portada__pista { opacity: 1; }
}

/* Móviles muy estrechos: la cabecera solo con los tres logos y el botón */
@media (max-width: 400px) {
  .marca span { display: none; }
  .socios img { height: 36px; }
}