/* =========================================================
   Escuela Alonkura — estilos
   Paleta tomada del logo: azul marino, rojo y dorado,
   más verde, tierra y celeste de los íconos de los sellos
   Motivo: rombo escalonado (inspiración textil)
   ========================================================= */

:root {
  --papel:   #F8F8F6;
  --tinta:   #182050;   /* azul marino profundo: textos y fondos oscuros */
  --gris:    #565D74;
  --linea:   #DCDDE3;
  --azul:    #283670;   /* anillo exterior del logo */
  --rojo:    #CD1B1B;   /* anillo y centro del logo */
  --dorado:  #DFB225;   /* manos del logo */
  --verde:   #3A7A3F;   /* ciencia: planta y laureles */
  --tierra:  #8B5A3C;   /* interculturalidad: kultrun */
  --celeste: #3F72B8;   /* tecnología: globo */

  --f-titulo: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-texto:  "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --t-0: 1rem;
  --t-1: 1.25rem;
  --t-2: 1.563rem;
  --t-3: 2.441rem;
  --t-4: clamp(2.6rem, 6vw, 4.2rem);
  --t-5: clamp(3.4rem, 10vw, 7.5rem);

  --ancho: 1200px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(4rem, 10vw, 8rem);
  --radio: 14px;

  --banda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24'%3E%3Cdefs%3E%3Cpath id='r' fill-rule='evenodd' d='M10 0h4v4h4v4h4v8h-4v4h-4v4h-4v-4H6v-4H2V8h4V4h4zM10 10v4h4v-4z'/%3E%3C/defs%3E%3Cuse href='%23r' fill='%23283670'/%3E%3Cuse href='%23r' x='24' fill='%23CD1B1B'/%3E%3Cuse href='%23r' x='48' fill='%23DFB225'/%3E%3Cuse href='%23r' x='72' fill='%23CD1B1B'/%3E%3C/svg%3E");

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--f-texto);
  overflow-x: hidden;
  overflow-x: clip;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 750;  overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: min(100% - 2 * var(--pad), var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--tinta); color: #fff; padding: .75rem 1rem; }
.saltar:focus { left: 1rem; top: 1rem; }

.banda { height: 12px; background: var(--banda) repeat-x left center / 48px 12px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.4rem; border-radius: 999px;
  font: 700 1rem/1.2 var(--f-texto); text-decoration: none; cursor: pointer;
  border: 2px solid var(--tinta); transition: background .2s, color .2s;
}
.boton-lleno { background: var(--tinta); color: var(--papel); }
.boton-lleno:hover { background: var(--rojo); border-color: var(--rojo); }
.boton-linea { background: transparent; color: var(--tinta); }
.boton-linea:hover { background: var(--tinta); color: var(--papel); }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(10px); }
.cabecera-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 2 * var(--pad), 1320px); margin-inline: auto; min-height: 72px; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; font: 750 1.2rem/1 var(--f-titulo); letter-spacing: -.01em; }
.marca img { width: 48px; height: 48px; object-fit: contain; }

.menu { display: flex; align-items: center; gap: 1.5rem; }
.menu > ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.menu > ul > li { position: relative; }
.menu > ul > li > a, .sub-boton {
  display: block; padding: .6rem .9rem; border-radius: 999px; text-decoration: none;
  font: 700 1rem/1.2 var(--f-texto); color: var(--tinta); background: none; border: 0; cursor: pointer;
}
.sub-boton::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.2em) rotate(45deg); }
.menu > ul > li > a:hover, .sub-boton:hover { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.menu li.activo > a, .menu li.activo > .sub-boton { box-shadow: inset 0 -3px 0 var(--rojo); border-radius: 0; }

.sub {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 260px;
  list-style: none; margin: 0; padding: .5rem; background: #fff;
  border: 2px solid var(--tinta); border-radius: var(--radio);
  opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity .2s, translate .2s, visibility .2s;
}
.tiene-sub:hover .sub, .tiene-sub:focus-within .sub, .tiene-sub.abierto .sub { opacity: 1; visibility: visible; translate: 0 0; }
.sub a { display: block; padding: .6rem .8rem; border-radius: 8px; text-decoration: none; }
.sub a:hover, .sub a[aria-current] { background: var(--papel); }
.boton-portal { background: var(--azul); border-color: var(--azul); color: #fff; min-height: 44px; padding-block: .5rem; }
.boton-portal:hover { background: var(--rojo); border-color: var(--rojo); }

.menu-boton { display: none; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .9rem; border: 2px solid var(--tinta); border-radius: 999px; background: none; font: 700 1rem var(--f-texto); color: var(--tinta); cursor: pointer; }
.menu-icono, .menu-icono::before, .menu-icono::after { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .25s, background .25s; }
.menu-icono { position: relative; }
.menu-icono::before, .menu-icono::after { content: ""; position: absolute; left: 0; }
.menu-icono::before { top: -6px; } .menu-icono::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-icono { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-icono::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-icono::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .menu-boton { display: inline-flex; }
  .marca span { font-size: 1.05rem; }
  .menu {
    position: fixed; inset: 84px 0 0 0; z-index: 49;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.5rem;
    padding: 1.5rem var(--pad) calc(2rem + env(safe-area-inset-bottom, 0px));
    background: var(--papel); overflow-y: auto;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .4s cubic-bezier(.7,0,.2,1), visibility .4s;
  }
  .menu.abierto { clip-path: inset(0 0 0 0); visibility: visible; }
  .menu > ul { flex-direction: column; gap: 0; }
  .menu > ul > li { border-bottom: 1px solid var(--linea); }
  .menu > ul > li > a, .sub-boton { font: 750 1.8rem/1.2 var(--f-titulo); padding: 1rem 0; width: 100%; text-align: left; border-radius: 0; }
  .menu > ul > li > a:hover, .sub-boton:hover { background: none; }
  .menu li.activo > a, .menu li.activo > .sub-boton { box-shadow: none; color: var(--rojo); }
  .sub { position: static; border: 0; padding: 0 0 1rem; background: none; display: none; opacity: 1; visibility: visible; translate: none; }
  .tiene-sub:hover .sub, .tiene-sub:focus-within .sub { display: none; }
  .tiene-sub.abierto .sub { display: block; }
  .sub a { font-size: 1.1rem; padding: .6rem 0; }
  .boton-portal { min-height: 56px; font-size: 1.1rem; }
  body.menu-abierto { overflow: hidden; }
}

/* ---------- Telón de transición entre páginas ---------- */
.telon { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.telon span { background: var(--c); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.7,0,.25,1); }
.telon span:nth-child(2) { transition-delay: .06s; }
.telon span:nth-child(3) { transition-delay: .12s; }
.telon span:nth-child(4) { transition-delay: .18s; }
.telon-cubre .telon span { transform: scaleY(1); }
.telon-entrando .telon span { transform: scaleY(1); transform-origin: top; transition: none; }
.telon-saliendo .telon span { transform: scaleY(0); transform-origin: top; }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(2rem, 5vw, 5rem);
  width: min(100% - 2 * var(--pad), 1320px); margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--sec);
}
.hero-anios { font: 700 1.05rem/1 var(--f-texto); color: var(--rojo); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.hero-anios::before { content: ""; width: 2.5rem; height: 12px; background: var(--banda) repeat-x left / 48px 12px; }
.hero-titulo { font-size: var(--t-5); line-height: .92; font-weight: 800; letter-spacing: -.04em; margin-bottom: 1.5rem; font-variation-settings: "opsz" 96; }
.hero-titulo .linea { display: block; position: relative; overflow: hidden; width: fit-content; padding-right: .05em; }
.hero-titulo .linea > span { display: block; }
.hero-titulo .linea:nth-child(2) { margin-left: clamp(1rem, 6vw, 5rem); }
.hero-titulo .linea:nth-child(3) { margin-left: clamp(2rem, 12vw, 10rem); }
.hero-bajada { font-size: var(--t-1); max-width: 34ch; color: var(--gris); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero-media { position: relative; margin: 0; }
.arco { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radio) var(--radio); overflow: hidden; background: var(--azul); }
.arco video { width: 100%; height: 100%; object-fit: cover; }
.hero-rombo { position: absolute; width: clamp(56px, 8vw, 96px); }
.hero-rombo.r1 { fill: var(--dorado); left: -1.5rem; bottom: 18%; }
.hero-rombo.r2 { fill: var(--rojo); right: -1rem; top: 10%; width: clamp(36px, 5vw, 56px); }
.hero-pausa { position: absolute; right: 1rem; bottom: 1rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 0; background: rgb(255 255 255 / .9); color: var(--tinta); font: 700 .9rem var(--f-texto); cursor: pointer; }

/* Momento de entrada: cada línea del lema se revela tras un bloque de color */
@media (prefers-reduced-motion: no-preference) {
  .hero-titulo .linea::after {
    content: ""; position: absolute; inset: 0; background: var(--c);
    transform: scaleX(0); transform-origin: left;
    animation: barrido 1s cubic-bezier(.7,0,.2,1) forwards;
  }
  .hero-titulo .linea > span { opacity: 0; animation: aparece 1s linear forwards; }
  .hero-titulo .linea:nth-child(1)::after, .hero-titulo .linea:nth-child(1) > span { animation-delay: .15s; }
  .hero-titulo .linea:nth-child(2)::after, .hero-titulo .linea:nth-child(2) > span { animation-delay: .35s; }
  .hero-titulo .linea:nth-child(3)::after, .hero-titulo .linea:nth-child(3) > span { animation-delay: .55s; }
  .arco { animation: arco 1.1s .4s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes barrido { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes aparece { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes arco { from { clip-path: inset(100% 0 0 0 round 999px 999px 14px 14px); } to { clip-path: inset(0 0 0 0 round 999px 999px 14px 14px); } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 2rem; }
  .hero-media { order: -1; max-width: 360px; width: 72%; justify-self: end; }
  .arco { aspect-ratio: 1 / 1; }
}

/* ---------- Accesos rápidos ---------- */
.accesos { padding-bottom: var(--sec); }
.accesos-lista { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin-block: 0; border-top: 2px solid var(--tinta); }
.accesos-lista li + li { border-left: 1px solid var(--linea); }
.accesos-lista a { display: grid; gap: .3rem; padding: 1.5rem 1.25rem; height: 100%; text-decoration: none; position: relative; transition: background .25s, color .25s; }
.accesos-lista svg { width: 28px; fill: var(--c); margin-bottom: .75rem; transition: fill .25s, rotate .4s; }
.accesos-lista strong { font: 750 var(--t-1)/1.1 var(--f-titulo); }
.accesos-lista span { color: var(--gris); font-size: .95rem; }
.accesos-lista a:hover { background: var(--c); color: #fff; }
.accesos-lista a:hover span { color: rgb(255 255 255 / .85); }
.accesos-lista a:hover svg { fill: #fff; rotate: 90deg; }
@media (max-width: 860px) {
  .accesos-lista { grid-template-columns: 1fr 1fr; }
  .accesos-lista li:nth-child(3) { border-left: 0; }
  .accesos-lista li:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ---------- Sellos (sección protagonista) ---------- */
.sellos { background: var(--tinta); color: #fff; }
.sellos-marco { position: relative; }
.sellos-pista { display: flex; }
.sellos-intro, .sello { flex: 0 0 100vw; min-height: 100vh; min-height: 100svh; }
.sellos-intro { display: grid; grid-template-columns: 1fr minmax(240px, 440px); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: var(--pad) max(var(--pad), calc((100vw - var(--ancho)) / 2)); }
.sellos-intro h2 { font-size: var(--t-5); max-width: 10ch; line-height: .95; }
.sellos-intro p { font-size: var(--t-1); max-width: 36ch; color: rgb(255 255 255 / .8); }
.sellos-logo { width: 100%; height: auto; align-self: center; justify-self: center; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 50%; padding: 4%; }
@media (max-width: 760px) { .sellos-intro { grid-template-columns: 1fr; } .sellos-logo { max-width: 280px; } }
.sellos-pista-ayuda { font-size: 1rem !important; display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.sellos-pista-ayuda::after { content: ""; width: 3rem; height: 12px; background: var(--banda) repeat-x left / 48px 12px; }

.sello { position: relative; overflow: hidden; background: var(--c); display: flex; align-items: center; }
.sello-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(200px, 360px) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; width: min(100% - 2 * var(--pad), var(--ancho)); margin-inline: auto; }
.sello img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: rgb(255 255 255 / .12); border-radius: 50%; padding: 8%; }
.sello h3 { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.04em; margin-bottom: .3em; }
.sello p { font-size: var(--t-1); max-width: 38ch; }
.sello-fondo { position: absolute; right: -8vw; bottom: -12vh; width: min(70vw, 720px); fill: rgb(0 0 0 / .1); }
.sello[style*="dorado"] { color: var(--tinta); }
.sello[style*="dorado"] .sello-fondo { fill: rgb(255 255 255 / .22); }

.sellos-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgb(255 255 255 / .15); display: none; }
.sellos-progreso span { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.sellos.horizontal .sellos-progreso { display: block; }

/* Sin scroll horizontal: sellos apilados, cada uno ocupando su mundo de color */
.sellos:not(.horizontal) .sellos-pista { flex-direction: column; }
.sellos:not(.horizontal) .sellos-intro, .sellos:not(.horizontal) .sello { flex-basis: auto; min-height: auto; padding-block: var(--sec); }
@media (max-width: 760px) {
  .sello-in { grid-template-columns: 1fr; }
  .sello img { max-width: 180px; }
}

/* ---------- Encabezados de sección ---------- */
.titular { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.titular p { font-size: var(--t-1); color: var(--gris); }

/* ---------- Formación ciudadana ---------- */
.ciudadania { padding-block: var(--sec); }
.ciudadania-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.ciudadania-lista li { padding: 1.5rem 0 2rem; border-top: 2px solid var(--tinta); }
.ciudadania-lista li:nth-child(3n+1) { border-top-color: var(--azul); }
.ciudadania-lista li:nth-child(3n+2) { border-top-color: var(--dorado); }
.ciudadania-lista li:nth-child(3n)   { border-top-color: var(--rojo); }
.ciudadania-lista h3 { font-size: var(--t-2); }
.ciudadania-lista p { color: var(--gris); max-width: 38ch; }
@media (max-width: 900px) { .ciudadania-lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ciudadania-lista { grid-template-columns: 1fr; } }

/* ---------- Próximas actividades ---------- */
.actividades { padding-block: var(--sec); }
.actividades-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.actividades .titular { margin-bottom: 0; }
.agenda { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.agenda li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linea); }
.agenda time { display: grid; justify-items: center; align-content: center; gap: .15rem; aspect-ratio: 1; background: var(--c); color: #fff; border-radius: var(--radio); }
.agenda li[style*="dorado"] time { color: var(--tinta); }
.agenda-dia { font: 800 2.2rem/1 var(--f-titulo); letter-spacing: -.03em; }
.agenda-mes { font-weight: 700; font-size: .95rem; }
.agenda-tipo { margin: 0 0 .2rem; font-weight: 700; font-size: .95rem; color: var(--c); }
.agenda h3 { font-size: var(--t-1); margin-bottom: .25rem; }
.agenda li p:last-child { margin: 0; color: var(--gris); }
@media (max-width: 860px) { .actividades-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .agenda li { grid-template-columns: 4.25rem 1fr; gap: 1rem; } .agenda-dia { font-size: 1.8rem; } }

/* ---------- Talleres ---------- */
.talleres { background: var(--tinta); color: #fff; padding-block: var(--sec); }
.talleres .titular p { color: rgb(255 255 255 / .75); }
.talleres-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.talleres-lista li { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--radio); background: var(--c); overflow: hidden; }
.talleres-lista li[style*="dorado"] { color: var(--tinta); }
.talleres-lista svg { position: absolute; right: -1.5rem; top: -1.5rem; width: 110px; fill: rgb(255 255 255 / .16); }
.talleres-lista h3 { font-size: var(--t-2); position: relative; }
.talleres-lista p { opacity: .9; }
.talleres-lista dl { margin: auto 0 0; display: grid; gap: .35rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .3); }
.talleres-lista li[style*="dorado"] dl { border-top-color: rgb(24 32 80 / .25); }
.talleres-lista dl div { display: grid; grid-template-columns: 4.75rem 1fr; gap: .5rem; }
.talleres-lista dt { font-weight: 700; }
.talleres-lista dd { margin: 0; }

/* ---------- Evaluación ---------- */
.evaluacion { padding-block: var(--sec); background: #fff; border-block: 1px solid var(--linea); }
.evaluacion-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.evaluacion-lado { position: sticky; top: 7rem; }
.evaluacion-lado > p { font-size: var(--t-1); color: var(--gris); }
.datos { margin: 2rem 0; display: grid; gap: 1.25rem; }
.datos div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.datos dt { font: 800 var(--t-3)/1 var(--f-titulo); letter-spacing: -.03em; color: var(--azul); white-space: nowrap; }
.datos div:nth-child(2) dt { color: var(--rojo); }
.datos div:nth-child(3) dt { font-size: var(--t-2); color: #A8841A; }
.datos dd { margin: 0; color: var(--gris); }

.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon details:first-child { border-top: 2px solid var(--tinta); }
.acordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.35rem 0; font: 700 var(--t-1)/1.3 var(--f-titulo);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ""; flex: 0 0 22px; height: 22px;
  background: var(--azul); transition: rotate .3s, background .3s;
  clip-path: polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);
}
.acordeon details[open] summary::after { rotate: 45deg; background: var(--rojo); }
.acordeon-cuerpo { padding: 0 0 1.5rem; max-width: 60ch; color: var(--gris); }
.acordeon-cuerpo strong { color: var(--tinta); }
@media (max-width: 860px) { .evaluacion-grid { grid-template-columns: 1fr; } .evaluacion-lado { position: static; } }

/* ---------- Comunidad ---------- */
.comunidad { padding-block: var(--sec); }
.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.pestanas button {
  min-height: 48px; padding: .5rem 1.25rem; border-radius: 999px; border: 2px solid var(--tinta);
  background: none; font: 700 1rem var(--f-texto); color: var(--tinta); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.pestanas button:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.pestanas button[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.panel { position: relative; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radio); background: var(--c); color: #fff; overflow: hidden; }
.panel::after { content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 220px; height: 220px; background: rgb(255 255 255 / .12); clip-path: polygon(41.7% 0,58.3% 0,58.3% 16.7%,75% 16.7%,75% 33.3%,91.7% 33.3%,91.7% 66.7%,75% 66.7%,75% 83.3%,58.3% 83.3%,58.3% 100%,41.7% 100%,41.7% 83.3%,25% 83.3%,25% 66.7%,8.3% 66.7%,8.3% 33.3%,25% 33.3%,25% 16.7%,41.7% 16.7%); }
.panel-rol { font: 800 var(--t-3)/1 var(--f-titulo); letter-spacing: -.03em; }
.panel-texto { font-size: var(--t-1); max-width: 52ch; margin: 0; position: relative; z-index: 1; }
.panel[style*="dorado"] { color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { .panel:not([hidden]) { animation: panel .45s cubic-bezier(.2,.7,.2,1); } }
@keyframes panel { from { clip-path: inset(0 100% 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }

/* ---------- Logros ---------- */
.logros { background: var(--azul); color: #fff; padding-block: var(--sec); }
.logros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.logros-grid > div p { font-size: var(--t-1); color: rgb(255 255 255 / .8); max-width: 36ch; }
.logros-lista { list-style: none; margin: 0; padding: 0; }
.logros-lista li { border-top: 1px solid rgb(255 255 255 / .3); }
.logros-lista li:last-child { border-bottom: 1px solid rgb(255 255 255 / .3); }
.logros-lista a { display: grid; padding: 1.5rem 0; text-decoration: none; transition: padding .3s, color .3s; }
.logros-lista strong { font: 800 clamp(2.4rem, 5vw, 3.6rem)/1 var(--f-titulo); letter-spacing: -.03em; }
.logros-lista span { color: rgb(255 255 255 / .7); }
.logros-lista a:hover { padding-left: 1rem; color: var(--dorado); }
@media (max-width: 760px) { .logros-grid { grid-template-columns: 1fr; } }

/* ---------- Páginas internas ---------- */
.portada { position: relative; overflow: hidden; background: var(--tono); color: #fff; padding-block: clamp(3rem, 8vw, 6rem); }
.portada h1 { font-size: var(--t-4); max-width: 18ch; position: relative; z-index: 1; }
.portada p { font-size: var(--t-1); max-width: 40ch; opacity: .9; position: relative; z-index: 1; margin: 0; }
.portada[style*="dorado"] { color: var(--tinta); }
.portada-rombo { position: absolute; right: -4rem; top: 50%; translate: 0 -50%; width: clamp(200px, 30vw, 380px); fill: rgb(255 255 255 / .12); }
.volver { display: inline-block; margin-bottom: 1rem; font-weight: 700; text-decoration: none; opacity: .9; }
.volver::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg) translateY(-.1em); }
@media (prefers-reduced-motion: no-preference) {
  .portada h1 { animation: sube .7s .15s cubic-bezier(.2,.7,.2,1) both; }
  .portada-rombo { animation: gira 1.2s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes sube { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes gira { from { rotate: -90deg; scale: .6; } to { rotate: 0deg; scale: 1; } }

.contenido { padding-block: clamp(3rem, 7vw, 5rem) var(--sec); }
.texto { max-width: 68ch; }
.texto h2 { font-size: var(--t-3); margin-top: 1.5em; }
.destacado { font: 600 var(--t-2)/1.35 var(--f-titulo); letter-spacing: -.01em; }
.linea-tiempo { list-style: none; padding: 0; margin: 1.5rem 0; border-left: 3px solid var(--dorado); }
.linea-tiempo li { display: grid; gap: .2rem; padding: 0 0 1.5rem 1.5rem; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: -9px; top: .35rem; width: 15px; height: 15px; background: var(--dorado); rotate: 45deg; }
.linea-tiempo strong { font: 800 var(--t-1) var(--f-titulo); }

.equipo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem; }
.equipo li { display: grid; gap: .25rem; }
.equipo img, .equipo-inicial { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 999px 999px var(--radio) var(--radio); margin-bottom: .75rem; }
.equipo-inicial { display: grid; place-items: center; background: var(--c); color: #fff; font: 800 5rem var(--f-titulo); }
.equipo strong { font: 750 var(--t-1) var(--f-titulo); }
.equipo span { color: var(--gris); }

.documentos { list-style: none; padding: 0; margin: 0; }
.documentos li { border-bottom: 1px solid var(--linea); }
.documentos li:first-child { border-top: 2px solid var(--tinta); }
.documentos a { display: grid; grid-template-columns: 32px 1fr; column-gap: 1.25rem; padding: 1.5rem .5rem; text-decoration: none; transition: background .2s; }
.documentos svg { grid-row: span 2; width: 28px; fill: var(--azul); margin-top: .2rem; transition: rotate .4s, fill .2s; }
.documentos strong { font: 750 var(--t-2)/1.15 var(--f-titulo); }
.documentos span { color: var(--gris); }
.documentos a:hover { background: #fff; }
.documentos a:hover svg { rotate: 90deg; fill: var(--rojo); }

.doc-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.visor { width: 100%; height: 80vh; border: 2px solid var(--tinta); border-radius: var(--radio); background: #fff; }

.aviso { padding: 1rem 1.25rem; border-radius: var(--radio); background: #fff; border-left: 6px solid var(--dorado); }
.aviso ul { margin: 0; padding-left: 1.1rem; }
.aviso-ok { border-left-color: var(--verde); }
.aviso-error { border-left-color: var(--rojo); }

.contacto-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); }
.contacto-datos address { font-style: normal; font-size: var(--t-1); margin-bottom: 1rem; }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radio); margin-top: 1.5rem; }
.formulario { display: grid; gap: 1.1rem; }
.formulario label { display: grid; gap: .4rem; font-weight: 700; }
.formulario input, .formulario textarea {
  font: 400 1.0625rem var(--f-texto); color: var(--tinta); padding: .85rem 1rem; min-height: 48px;
  border: 2px solid var(--linea); border-radius: 10px; background: #fff; transition: border-color .2s;
}
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--celeste); }
.formulario .boton { justify-self: start; }
.trampa { position: absolute; left: -9999px; }
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.pie { position: relative; z-index: 4; background: var(--tinta); color: rgb(255 255 255 / .85); }
.pie-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 3rem; padding-block: 4rem 3rem; }
.marca-pie { color: #fff; }
.marca-pie img { width: 56px; height: 56px; }
.pie-lema { font: 700 var(--t-1) var(--f-titulo); color: var(--dorado); margin: 1rem 0; }
.pie address { font-style: normal; margin-bottom: 1rem; }
.pie h2 { font-size: var(--t-1); color: #fff; letter-spacing: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.redes { display: flex; gap: 1.25rem; }
.redes a { font-weight: 700; }
.pie-legal { padding-block: 1.5rem 2rem; border-top: 1px solid rgb(255 255 255 / .15); font-size: .9rem; margin-bottom: 0; }
@media (max-width: 860px) { .pie-grid { grid-template-columns: 1fr; gap: 2rem; } }


/* ---------- Transiciones entre secciones ---------- */
/* Serpiente: divisor que se dibuja con el scroll, montado sobre el borde entre secciones */
.serpiente {
  --alto: clamp(90px, 11vw, 160px);
  position: relative; z-index: 5; height: var(--alto);
  margin-block: calc(var(--alto) / -2); pointer-events: none;
  overflow-x: clip;
}
.serpiente svg { width: 100%; height: 100%; overflow: visible; }
.serpiente .trazo { fill: none; stroke-width: 12; stroke-linecap: round; }
.serpiente .t-azul   { stroke: var(--azul); }
.serpiente .t-rojo   { stroke: var(--rojo); }
.serpiente .t-dorado { stroke: var(--dorado); }
.serpiente .cabeza { fill: var(--tinta); opacity: 0; }
.animado .serpiente .trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.animado .serpiente .cabeza { opacity: 1; }

/* Diapositiva: la sección entra desde un costado, precedida por una cortina de color */
.diapo { position: relative; overflow-x: clip; }
.cortina { display: none; }
.animado .cortina {
  display: block; position: absolute; inset: 0; z-index: 4;
  background: var(--cortina); pointer-events: none;
}
.animado .diapo > .contenedor { position: relative; z-index: 1; }

/* Empuje: la sección sube como una tarjeta sobre la anterior, que se aleja hacia atrás */
.animado [data-empuja] {
  position: relative; z-index: 3;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 60px rgb(24 32 80 / .16);
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .telon { display: none; }
}