/* AEDU · colores sacados del logo oficial (azul #002147, turquesa #00cfca) */
@font-face { font-family: "Marker"; src: url(/assets/fonts/PermanentMarker.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 100 900; src: url(/assets/fonts/Montserrat-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 100 900; src: url(/assets/fonts/Montserrat-italic.woff2) format("woff2"); font-display: swap; }

:root {
  --azul: #002147;
  --turquesa: #00cfca;
  --fondo: #f3f6f9;
  --fondo-2: #e7eef4;
  --texto: #002147;
  --texto-2: #36506e;
  --linea: #c9d6e2;
  --logo: url(/assets/aedu-logo.png?v=f2d93b2f);
  --radio: 14px;
  color-scheme: light;
}
/* modo oscuro: lo pone el script de la cabeza (elección guardada o, si no hay, la del sistema) */
:root[data-tema="oscuro"] { --fondo: #00152e; --fondo-2: #002147; --texto: #f4f7fa; --texto-2: #b9c8d8; --linea: #1d3a5c; --logo: url(/assets/aedu-logo-claro.png?v=f41ae1da); color-scheme: dark; }

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font: 500 17px/1.6 Montserrat, system-ui, sans-serif; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
body::after { /* grano de papel, como en las piezas de Sandra */
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
main { overflow-x: clip; }  /* la franja inclinada sobresale por los lados */
img { display: block; max-width: 100%; height: auto; }
svg.i { width: 28px; height: 28px; flex: none; color: var(--turquesa); }
.envoltura { width: min(1180px, 100% - 40px); margin-inline: auto; }
.marcador { font-family: Marker, "Comic Sans MS", cursive; font-weight: 400; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.oculto { position: absolute !important; left: -9999px; }

/* trazo de brocha: el mismo trazo turquesa que subraya «DANZAS URBANAS» en el logo */
.brocha { position: relative; z-index: 0; white-space: nowrap; }
.brocha::after {
  content: ""; position: absolute; z-index: -1; left: -.08em; right: -.12em; bottom: -.16em; height: .34em;
  background: url(/assets/trazo-subrayado.png?v=d0e7bacd) center / 100% 100% no-repeat;
}
.subrayado { padding: 0 .06em .34em; background: url(/assets/trazo-subrayado.png?v=d0e7bacd) left bottom / 100% .5em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }  /* el trazo del logo bajo las palabras, uno por línea */

h1, h2, h3, .lema { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

/* franja en movimiento: la única de la página */
.franja { background: var(--turquesa); color: #002147; transform: rotate(-2deg); margin: 8px -20px 40px; padding: 14px 0; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(0,33,71,.5); }
.franja-pista { display: flex; gap: 48px; width: max-content; }
.franja span { font-size: clamp(30px, 4vw, 52px); white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.franja span::after { content: ""; width: 58px; height: 14px; background: #002147; -webkit-mask: url(/assets/trazo-subrayado.png?v=d0e7bacd) center / contain no-repeat; mask: url(/assets/trazo-subrayado.png?v=d0e7bacd) center / contain no-repeat; }

/* cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.cabecera .logo { width: 128px; height: 64px; background: var(--logo) left center / contain no-repeat; }
.cabecera nav { display: flex; align-items: center; gap: 28px; font-weight: 700; font-size: 15px; }
.cabecera nav a:not(.boton) { text-decoration: none; }
.cabecera nav a:not(.boton):hover { text-decoration: underline; text-decoration-color: var(--turquesa); text-decoration-thickness: 3px; text-underline-offset: 6px; }

.boton {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 0;
  font: 800 16px/1 Montserrat, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--turquesa); color: #002147; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--turquesa) 80%, transparent);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(1px) scale(.98); }
.boton svg, .boton svg.i { width: 18px; height: 18px; color: currentColor; }
.boton.secundario { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px var(--texto); }
.cabecera .boton { padding: 11px 18px; font-size: 14px; }
/* botón claro / oscuro: luna en claro, sol en oscuro */
.tema { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px var(--linea); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.tema:hover { box-shadow: inset 0 0 0 2px var(--turquesa); }
.tema:active { transform: scale(.94); }
.tema:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }
.tema svg.i { display: block; width: 20px; height: 20px; color: currentColor; }
.tema .sol, [data-tema="oscuro"] .tema .luna { display: none; }
[data-tema="oscuro"] .tema .sol { display: block; }

/* portada */
.portada { position: relative; overflow: hidden; }
.portada .envoltura { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; min-height: calc(100dvh - 68px); padding-block: 48px 64px; }
.portada h1 { font-size: clamp(64px, 9vw, 132px); }
.portada h1 .linea { display: block; }
.portada p { margin-top: 46px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--texto-2); max-width: 30ch; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.portada .marca { position: relative; justify-self: center; width: min(440px, 100%); }
.portada .marca { transition: transform .5s cubic-bezier(.16,1,.3,1); will-change: transform; }
.portada .marca img { position: relative; filter: drop-shadow(0 24px 30px rgba(0,33,71,.18)); }
.marca-oscura { display: none; }
[data-tema="oscuro"] .marca-clara { display: none; } [data-tema="oscuro"] .marca-oscura { display: block; }

/* qué es */
.quees { padding-block: 120px; text-align: center; }
.quees h2 { font-size: clamp(44px, 6vw, 76px); }
.quees blockquote { margin: 34px auto 0; max-width: 30ch; font: 800 italic clamp(24px, 2.6vw, 34px)/1.35 Montserrat, sans-serif; }

/* a quién representa */
.quien { padding-block: 40px 120px; }
.quien .envoltura { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.quien h2 { font-size: clamp(40px, 5vw, 64px); position: sticky; top: 110px; }
.quien ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quien li { display: flex; gap: 16px; align-items: center; padding: 22px; background: var(--fondo-2); border-radius: var(--radio); font-weight: 700; font-size: 18px; line-height: 1.3; }
.quien li:last-child { background: var(--azul); color: #f4f7fa; }

/* objetivos: rejilla de 5 piezas */
.objetivos { padding-block: 40px 120px; }
.objetivos h2 { font-size: clamp(44px, 6vw, 76px); margin-bottom: 40px; }
.rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.pieza { padding: 30px; border-radius: var(--radio); background: var(--fondo-2); display: flex; flex-direction: column; gap: 16px; min-height: 220px; }
.pieza h3 { font-size: 22px; line-height: 1.2; font-weight: 800; }
.pieza p { color: var(--texto-2); font-weight: 500; }
.pieza:nth-child(1) { grid-column: span 4; background: var(--turquesa); color: #002147; }
.pieza:nth-child(1) p { color: #002147; }
.pieza:nth-child(1) svg.i { color: #002147; }
.pieza:nth-child(1) h3 { font: 400 clamp(30px, 3.4vw, 46px)/1.05 Marker, cursive; text-transform: uppercase; }
.pieza:nth-child(2) { grid-column: span 2; background: var(--azul); color: #f4f7fa; }
.pieza:nth-child(2) p { color: #b9c8d8; }
.pieza:nth-child(3), .pieza:nth-child(4), .pieza:nth-child(5) { grid-column: span 2; }

/* formación */
.formacion { padding-block: 40px 120px; }
.formacion .envoltura { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.formacion h2 { font-size: clamp(44px, 6vw, 76px); }
.formacion .intro { margin-top: 38px; font-size: 20px; font-weight: 600; color: var(--texto-2); max-width: 34ch; }
.formacion .nota { margin-top: 26px; display: flex; gap: 12px; align-items: flex-start; font-weight: 700; max-width: 42ch; }
.formacion ol { list-style: none; padding: 0; display: grid; gap: 22px; }
.formacion li { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.formacion li svg { grid-row: span 2; margin-top: 2px; }
.formacion li strong { font-weight: 800; font-size: 19px; }
.formacion li span { color: var(--texto-2); }

/* cómo trabajamos */
.como { padding-block: 40px 120px; }
.como h2 { font-size: clamp(44px, 6vw, 76px); text-align: center; }
.pasos { display: flex; gap: 16px; margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; list-style: none; padding-left: 0; }
.pasos li { flex: 1 0 210px; scroll-snap-align: start; padding: 26px 22px; border-top: 4px solid var(--turquesa); background: var(--fondo-2); border-radius: 0 0 var(--radio) var(--radio); }
.pasos strong { display: block; margin-top: 14px; font-size: 18px; font-weight: 800; line-height: 1.25; }
.pasos span { display: block; margin-top: 6px; color: var(--texto-2); font-size: 15px; }
.lema { margin: 56px auto 0; text-align: center; font-size: clamp(30px, 4vw, 52px); max-width: 22ch; }

/* lista prioritaria: el único bloque en azul */
.lista { background: var(--azul); color: #f4f7fa; padding-block: 110px; position: relative; overflow: hidden; }
.lista::before { content: ""; position: absolute; width: 520px; aspect-ratio: 318 / 171; right: -80px; bottom: -60px; background: url(/assets/trazo-cruce.png?v=4448306d) center / contain no-repeat; opacity: .22; }
.lista .envoltura { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lista h2 { font-size: clamp(48px, 6.5vw, 88px); }
.lista h2 .turquesa { color: var(--turquesa); }
.lista .gancho { margin-top: 22px; font-size: 20px; font-weight: 600; color: #d6e2ee; max-width: 32ch; }
.lista .letra { margin-top: 18px; font-size: 13px; color: #9fb4ca; }
form { color-scheme: light; background: #f4f7fa; color: #002147; border-radius: var(--radio); padding: 34px; display: grid; gap: 18px; }
form .campo { display: grid; gap: 8px; }
form label { font-weight: 800; font-size: 15px; }
form input[type=email], form select { font: 600 17px Montserrat, sans-serif; color: #002147; padding: 14px 16px; border: 2px solid #8aa1b9; border-radius: 10px; background: #fff; width: 100%; }
form input:focus-visible, form select:focus-visible, .boton:focus-visible, a:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }
form .ayuda { font-size: 13px; color: #36506e; }
form .consentimiento { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-weight: 600; font-size: 14px; line-height: 1.45; }
form .consentimiento input { width: 20px; height: 20px; margin-top: 2px; accent-color: #002147; }
form .boton { justify-content: center; font-size: 17px; padding: 17px 24px; }
.aviso { display: none; border-radius: 10px; padding: 14px 16px; font-weight: 700; }
#apuntado:target ~ form .aviso.ok, #lista-error:target ~ form .aviso.error { display: block; }
.aviso.ok { background: #d6f7f5; color: #003b3a; }
.aviso.error { background: #fde3e3; color: #7a1010; }

/* pie */
.pie { padding-block: 56px 40px; border-top: 1px solid var(--linea); }
.pie .envoltura { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.pie .logo { width: 150px; height: 75px; background: var(--logo) left center / contain no-repeat; }
.pie .pie-nombre { color: var(--texto-2); font-size: 15px; line-height: 1.6; }
.pie .enlaces { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 15px; }
.pie .enlaces a { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
.pie .enlaces svg.i { width: 20px; height: 20px; }
.pie .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--texto-2); padding-top: 22px; border-top: 1px solid var(--linea); }

/* páginas legales */
.legal-pagina { padding-block: 64px 100px; }
.legal-pagina .envoltura { max-width: 760px; }
.legal-pagina h1 { font-size: clamp(40px, 5vw, 60px); margin-bottom: 28px; }
.legal-pagina h2 { font-size: 20px; font-weight: 800; margin: 32px 0 10px; }
.legal-pagina p, .legal-pagina li { color: var(--texto-2); }
.legal-pagina ul { padding-left: 20px; display: grid; gap: 6px; }

/* entrada: la portada aparece y las secciones suben al entrar en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .portada h1 .linea, .portada p, .portada .acciones, .portada .marca { animation: entra .9s cubic-bezier(.16,1,.3,1) both; }
  .portada h1 .linea:nth-child(2) { animation-delay: .08s; } .portada p { animation-delay: .16s; } .portada .acciones { animation-delay: .24s; }
  .portada .marca { animation-name: entra-marca; animation-duration: 1.1s; }
  .js .revela { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .js .revela.visto { opacity: 1; transform: none; }
  .js .brocha::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65,0,.35,1) .25s; }
  .js .portada .brocha::after { animation: dibuja 1s cubic-bezier(.65,0,.35,1) .5s both; transition: none; }
  .visto .brocha::after, h2.visto .brocha::after { clip-path: inset(0 0 0 0); }
  .franja-pista { animation: desliza 38s linear infinite; }
  .portada .marca img.marca-clara, .portada .marca img.marca-oscura { animation: respira 6s ease-in-out infinite; }
  .pieza { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
  .pieza:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 24px 40px -28px rgba(0,33,71,.55); }
}
@keyframes dibuja { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes desliza { to { transform: translateX(-50%); } }
@keyframes respira { 50% { transform: translateY(-10px); } }
@keyframes entra { from { opacity: 0; transform: translateY(24px); } }
@keyframes entra-marca { from { opacity: 0; transform: translateY(30px) rotate(-4deg) scale(.96); } }

/* móvil */
@media (max-width: 900px) {
  .cabecera nav a:not(.boton) { display: none; }
  /* logo, botón de modo y «Entrar en la lista» en una línea sin aplastar el logo */
  .cabecera .envoltura { gap: 12px; } .cabecera nav { gap: 10px; }
  .cabecera .logo { flex: 0 1 128px; min-width: 80px; }
  .portada .envoltura, .quien .envoltura, .formacion .envoltura, .lista .envoltura { grid-template-columns: 1fr; }
  .portada .envoltura { min-height: auto; padding-block: 40px 72px; gap: 24px; }
  .portada .marca { width: min(300px, 80%); order: -1; }
  .quien h2 { position: static; }
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .pieza:nth-child(1) h3 { font-size: clamp(16px, calc(8.6vw - 10.5px), 27px); }  /* a la medida: «PROFESIONALIZACIÓN» entera hasta en 320 px */
  .pieza:nth-child(n) { grid-column: auto; min-height: 0; }
  .pie .envoltura { grid-template-columns: minmax(0, 1fr); }
  .pie .enlaces a { overflow-wrap: anywhere; }
  .quees, .quien, .objetivos, .formacion, .como { padding-block: 72px; }
}
@media (max-width: 400px) {
  .cabecera .boton { padding: 10px 14px; font-size: 13px; }
  .tema { width: 36px; height: 36px; }
}
@media (max-width: 560px) {
  .pie .enlaces a span { font-size: 13px; }  /* el correo entero, o partido por la arroba, sin cortar palabras */
  .quien ul { grid-template-columns: 1fr; }
  form { padding: 24px; }
}