/* Layout: portada partida (texto + collage de fotos), luego bandas de sección a ancho completo
   con contenido centrado a 1180px; la franja verde-amarilla del pendón marca cada cambio de sección. */
:root {
  --papel: #f5f8f2;
  --superficie: #ffffff;
  --tinta: #13251a;
  --tinta-suave: #4b5d50;
  --linea: #d6e0d3;
  --verde: #1d6b37;
  --verde-hondo: #0e3b20;
  --sobre-verde: #ffffff;
  --amarillo: #f2c318;
  --sobre-amarillo: #1b1a08;
  --rojo: #c3222b;
  --verde-tenue: #e3efe1;
  --amarillo-tenue: #fbf1c7;
  --rojo-tenue: #f8e0de;
  --sombra: 0 18px 40px -24px rgba(14, 59, 32, .45);

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

  --t-xs: .8rem; --t-s: .92rem; --t-m: 1.05rem; --t-l: 1.35rem; --t-xl: 1.9rem; --t-2xl: clamp(2.2rem, 5vw, 3.4rem); --t-3xl: clamp(2.8rem, 8vw, 5.6rem);
  --radio: 14px;
  --ancho: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0c1610; --superficie: #142019; --tinta: #e8f0e8; --tinta-suave: #a6b8aa; --linea: #273a2d;
    --verde: #4fb46e; --verde-hondo: #08130c; --sobre-verde: #08130c; --amarillo: #f5cd3a; --rojo: #f0625f;
    --verde-tenue: #17301f; --amarillo-tenue: #2e2a10; --rojo-tenue: #361718; --sombra: 0 18px 40px -24px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0c1610; --superficie: #142019; --tinta: #e8f0e8; --tinta-suave: #a6b8aa; --linea: #273a2d;
  --verde: #4fb46e; --verde-hondo: #08130c; --sobre-verde: #08130c; --amarillo: #f5cd3a; --rojo: #f0625f;
  --verde-tenue: #17301f; --amarillo-tenue: #2e2a10; --rojo-tenue: #361718; --sombra: 0 18px 40px -24px rgba(0,0,0,.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--superficie); }
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; cursor: pointer; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.franja { height: 6px; background: linear-gradient(90deg, var(--verde) 0 38%, var(--amarillo) 38% 72%, var(--rojo) 72% 100%); }
.etiqueta { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
.pendiente { display: inline-flex; align-items: center; gap: .35em; font-size: var(--t-xs); font-weight: 700; color: var(--rojo); background: var(--rojo-tenue); border-radius: 999px; padding: .15em .65em; }
.pendiente::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }

/* Cabecera */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca img { width: 42px; height: 44px; object-fit: contain; }
.marca span { font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; line-height: 1.05; }
.marca small { display: block; font-family: var(--f-texto); font-weight: 400; font-size: var(--t-xs); color: var(--tinta-suave); }
.menu { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.menu a { text-decoration: none; font-size: var(--t-s); font-weight: 700; padding: 8px 10px; border-radius: 8px; color: var(--tinta-suave); }
.menu a:hover { color: var(--tinta); background: var(--verde-tenue); }
.menu a.activo { color: var(--verde); }
.boton-menu { display: none; margin-left: auto; background: none; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; font-weight: 700; }
@media (max-width: 1020px) {
  .boton-menu { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--superficie); border-bottom: 1px solid var(--linea); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px; font-size: var(--t-m); }
}

/* Portada */
.portada { padding-block: 48px 64px; overflow: hidden; }
.portada .envoltura { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.portada h1 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
.portada h1 .v { color: var(--verde); } .portada h1 .d { color: var(--amarillo); -webkit-text-stroke: 0; } .portada h1 .c { color: var(--rojo); }
.portada .nombre { margin-top: 20px; font-size: var(--t-l); font-family: var(--f-titulo); font-weight: 600; }
.portada .bajada { margin-top: 10px; color: var(--tinta-suave); max-width: 52ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.boton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid var(--verde); background: var(--verde); color: var(--sobre-verde); }
.boton.secundario { background: transparent; color: var(--verde); }
.boton.amarillo { background: var(--amarillo); border-color: var(--amarillo); color: var(--sobre-amarillo); }
.datos-rapidos { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea); }
.datos-rapidos b { display: block; font-family: var(--f-titulo); font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.datos-rapidos span { font-size: var(--t-s); color: var(--tinta-suave); }

.collage { position: relative; aspect-ratio: 1 / 1; max-width: 100%; }
.collage figure { margin: 0; position: absolute; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); border: 5px solid var(--superficie); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .f1 { inset: 0 18% 30% 0; animation: entra .8s ease-out both; }
.collage .f2 { inset: 46% 0 0 34%; animation: entra .8s .15s ease-out both; }
.collage .f3 { width: 34%; aspect-ratio: 3/4; left: 2%; bottom: 0; animation: entra .8s .3s ease-out both; }
.collage .escudo-flota { position: absolute; right: 4%; top: 4%; width: 22%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); animation: flota 6s ease-in-out infinite; }
@keyframes entra { from { transform: translateY(14px); } to { transform: none; } }
@keyframes flota { 50% { transform: translateY(-8px) rotate(-2deg); } }
@media (max-width: 860px) { .portada .envoltura { grid-template-columns: 1fr; } .collage { max-width: 520px; } }

/* Informativo del día */
.hoy { background: var(--verde-hondo); color: #eef5ee; padding-block: 28px; }
.hoy .envoltura { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.hoy .fecha-hoy { font-family: var(--f-titulo); }
.hoy .fecha-hoy b { display: block; font-size: 3.4rem; line-height: 1; color: var(--amarillo); font-variant-numeric: tabular-nums; }
.hoy .fecha-hoy span { font-size: var(--t-m); }
.hoy .etiqueta { color: var(--amarillo); }
.avisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aviso { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px; min-width: 0; }
.aviso .hora { font-size: var(--t-xs); font-weight: 700; color: var(--amarillo); letter-spacing: .06em; }
.aviso p { font-size: var(--t-s); margin-top: 4px; }
.aviso .cat { font-size: var(--t-xs); opacity: .75; }
@media (max-width: 760px) { .hoy .envoltura { grid-template-columns: 1fr; } }

/* Secciones */
.seccion { padding-block: 80px; }
.seccion.alterna { background: var(--superficie); border-block: 1px solid var(--linea); }
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: 36px; }
.encabezado h2 { font-size: var(--t-2xl); font-weight: 800; margin-top: 6px; }
.encabezado p { color: var(--tinta-suave); max-width: 52ch; }

/* Institución */
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pestana { border: 1px solid var(--linea); background: var(--superficie); padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: var(--t-s); }
.pestana[aria-selected="true"] { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.panel-inst { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.panel-inst .texto { display: grid; gap: 16px; font-size: 1.12rem; max-width: 65ch; min-width: 0; }
.panel-inst .texto .cita { font-family: var(--f-titulo); font-size: var(--t-l); font-weight: 500; line-height: 1.35; border-left: 5px solid var(--amarillo); padding-left: 20px; }
.panel-inst figure { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.panel-inst figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ficha { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.ficha th, .ficha td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.ficha th { width: 38%; color: var(--tinta-suave); font-weight: 400; padding-right: 12px; }
.ficha td { font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 860px) { .panel-inst { grid-template-columns: 1fr; } }

/* Valores */
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.valor { position: relative; border-radius: 20px; padding: 28px 24px 24px; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; color: #fff; }
.valor.verde { background: #1d6b37; } .valor.amarillo { background: #f2c318; color: #1b1a08; } .valor.rojo { background: #c3222b; }
.valor h3 { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; }
.valor .simbolo { position: absolute; top: 20px; left: 24px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.valor .num { position: absolute; top: -18px; right: 8px; font-family: var(--f-titulo); font-size: 9rem; font-weight: 800; opacity: .12; line-height: 1; }
.valor p { font-size: var(--t-s); max-width: 34ch; }
@media (max-width: 860px) { .valores { grid-template-columns: 1fr; } .valor { min-height: 200px; } }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0 20px; }
.chip { border: 1px solid var(--linea); background: var(--superficie); padding: 8px 14px; border-radius: 999px; font-size: var(--t-s); font-weight: 700; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.principios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.principio { text-align: left; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; display: grid; gap: 6px; transition: border-color .2s, transform .2s; }
.principio:hover { border-color: var(--verde); transform: translateY(-2px); }
.principio .n { font-size: var(--t-xs); color: var(--verde); font-weight: 700; font-variant-numeric: tabular-nums; }
.principio h4 { font-size: var(--t-m); }
.principio p { font-size: var(--t-s); color: var(--tinta-suave); display: none; }
.principio[aria-expanded="true"] { border-color: var(--verde); background: var(--verde-tenue); }
.principio[aria-expanded="true"] p { display: block; }

/* Equipo */
.directivos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
.directivo { display: grid; grid-template-columns: 140px 1fr; gap: 20px; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 20px; align-items: center; }
.avatar { aspect-ratio: 1; width: 100%; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 800; font-size: 2.4rem; color: var(--sobre-verde); background: var(--verde); border: 4px solid var(--amarillo); }
.directivo .cargo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--rojo); }
.directivo h3 { font-size: var(--t-l); margin: 4px 0 8px; }
.directivo p { font-size: var(--t-s); color: var(--tinta-suave); }
.directivo .mensaje { margin-top: 8px; font-style: italic; }
@media (max-width: 860px) { .directivos { grid-template-columns: 1fr; } .directivo { grid-template-columns: 96px 1fr; } .avatar { font-size: 1.8rem; } }
.docentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.docente { text-align: left; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; display: grid; gap: 10px; transition: transform .2s, border-color .2s; }
.docente:hover { transform: translateY(-3px); border-color: var(--verde); }
.docente .avatar { width: 64px; font-size: 1.1rem; border-width: 3px; }
.docente b { font-family: var(--f-titulo); font-size: var(--t-m); }
.docente span { font-size: var(--t-s); color: var(--tinta-suave); display: block; }

/* Informativo */
.noticias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.noticia { display: grid; grid-template-rows: auto 1fr; background: var(--superficie); border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); text-align: left; padding: 0; transition: transform .2s, box-shadow .2s; }
.noticia:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.noticia img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.noticia .cuerpo { padding: 18px; display: grid; gap: 8px; align-content: start; }
.noticia .meta { display: flex; gap: 10px; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .08em; }
.noticia .meta .cat { color: var(--verde); }
.noticia h3 { font-size: var(--t-l); }
.noticia p { font-size: var(--t-s); color: var(--tinta-suave); }
.noticia.destacada { grid-column: span 2; grid-row: span 2; grid-template-rows: 1fr auto; }
.noticia.destacada img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.noticia.destacada h3 { font-size: var(--t-xl); }
@media (max-width: 960px) { .noticias { grid-template-columns: repeat(2, 1fr); } .noticia.destacada { grid-row: auto; } }
@media (max-width: 640px) { .noticias { grid-template-columns: 1fr; } .noticia.destacada { grid-column: auto; grid-template-columns: 1fr; } .noticia.destacada img { min-height: 0; aspect-ratio: 16/10; } }

/* Eventos */
.eventos-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }
.proximo { background: var(--rojo); color: #fff; border-radius: 20px; padding: 28px; display: grid; gap: 14px; }
.proximo .etiqueta { color: #ffe9a3; }
.proximo h3 { font-size: var(--t-xl); }
.cuenta { display: flex; gap: 10px; flex-wrap: wrap; }
.cuenta div { background: rgba(0,0,0,.18); border-radius: 12px; padding: 10px 14px; min-width: 72px; text-align: center; }
.cuenta b { display: block; font-family: var(--f-titulo); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cuenta span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; }
.lista-eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-eventos li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; }
.dia-cal { text-align: center; border-right: 1px solid var(--linea); padding-right: 12px; font-family: var(--f-titulo); }
.dia-cal b { display: block; font-size: 1.8rem; line-height: 1; color: var(--rojo); font-variant-numeric: tabular-nums; }
.dia-cal span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave); }
.lista-eventos h4 { font-size: var(--t-m); }
.lista-eventos p { font-size: var(--t-s); color: var(--tinta-suave); }
@media (max-width: 860px) { .eventos-grid { grid-template-columns: 1fr; } }
.linea-tiempo { margin-top: 56px; }
.linea-tiempo h3 { font-size: var(--t-xl); margin-bottom: 6px; }
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
.mes { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.mes.actual { border: 2px solid var(--amarillo); background: var(--amarillo-tenue); }
.mes > b { font-family: var(--f-titulo); text-transform: capitalize; }
.mes .actual-tag { font-size: var(--t-xs); font-weight: 700; color: var(--tinta); background: var(--amarillo); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.especial { font-size: var(--t-s); line-height: 1.35; }
.especial small { display: block; color: var(--tinta-suave); font-size: var(--t-xs); }

/* Sedes */
.sedes-cabeza { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 20px; }
.buscador { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: 4px 6px 4px 18px; }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: inherit; padding: 10px 0; outline: none; }
.buscador:focus-within { border-color: var(--verde); }
.contador { font-size: var(--t-s); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.sedes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.sede { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; min-width: 0; }
.sede .cod { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--verde-tenue); color: var(--verde); font-weight: 700; font-family: var(--f-titulo); letter-spacing: .04em; }
.sede b { font-size: var(--t-s); line-height: 1.25; }
.sin-resultados { padding: 24px; text-align: center; color: var(--tinta-suave); }

/* Galería y videos */
.galeria { columns: 3 240px; column-gap: 12px; }
.galeria button { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; break-inside: avoid; background: var(--linea); position: relative; }
.galeria img { width: 100%; transition: transform .4s; }
.galeria button:hover img { transform: scale(1.04); }
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.video { display: grid; gap: 8px; }
.video video { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 16px; background: #000; }
.video b { font-size: var(--t-s); }
@media (max-width: 760px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .videos { grid-template-columns: 1fr; max-width: 320px; } }

/* Descargas */
.descargas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.descarga { display: flex; align-items: center; gap: 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; text-align: left; width: 100%; }
.descarga .tipo { flex: none; width: 52px; height: 60px; border-radius: 6px 16px 6px 6px; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; color: var(--sobre-verde); background: var(--verde); }
.descarga div { min-width: 0; }
.descarga b { display: block; }
.descarga small { color: var(--tinta-suave); }

/* Comentarios */
.comentarios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.formulario { display: grid; gap: 14px; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 24px; }
.formulario label { display: grid; gap: 6px; font-size: var(--t-s); font-weight: 700; }
.formulario input, .formulario select, .formulario textarea { font: inherit; font-weight: 400; color: inherit; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.formulario textarea { min-height: 110px; resize: vertical; }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulario .nota { font-size: var(--t-xs); color: var(--tinta-suave); }
.lista-comentarios { display: grid; gap: 12px; }
.comentario { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; display: grid; gap: 6px; }
.comentario header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-s); }
.comentario .rol { font-size: var(--t-xs); font-weight: 700; color: var(--verde); background: var(--verde-tenue); border-radius: 999px; padding: 1px 8px; }
.comentario p { font-size: var(--t-s); }
@media (max-width: 860px) { .comentarios-grid { grid-template-columns: 1fr; } .formulario .fila { grid-template-columns: 1fr; } }

/* Contacto y pie */
.contacto { background: var(--verde-hondo); color: #eef5ee; padding-block: 64px 32px; }
.contacto .envoltura { display: grid; gap: 40px; }
.contacto-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.contacto h2 { font-size: var(--t-2xl); }
.contacto h3 { font-size: var(--t-m); color: var(--amarillo); margin-bottom: 10px; }
.contacto p, .contacto li { font-size: var(--t-s); opacity: .9; }
.contacto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contacto .copiar { background: none; border: 1px solid rgba(255,255,255,.3); color: inherit; border-radius: 999px; padding: 2px 10px; font-size: var(--t-xs); margin-left: 6px; }
.contacto .boton { background: #1877f2; border-color: #1877f2; color: #fff; margin-top: 14px; }
.pie { border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: var(--t-xs); opacity: .75; }
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }

/* Ventana modal y aviso */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(5, 15, 9, .72); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.modal-caja { background: var(--superficie); color: var(--tinta); border-radius: 20px; max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; position: relative; }
.modal-caja img { width: 100%; max-height: 60vh; object-fit: contain; background: #000; }
.modal-caja .contenido { padding: 24px; display: grid; gap: 12px; }
.modal-caja h3 { font-size: var(--t-xl); }
.cerrar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--superficie); color: var(--tinta); font-size: 1.4rem; box-shadow: var(--sombra); z-index: 2; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--tinta); color: var(--papel); padding: 12px 20px; border-radius: 999px; font-size: var(--t-s); font-weight: 700; z-index: 90; max-width: calc(100% - 32px); text-align: center; }
.aparece { animation: aparece .6s ease-out both; }
@keyframes aparece { from { transform: translateY(16px); } to { transform: none; } }