/* =====================================================
   III MARATÓN REGIONAL DE LECTURA Y NARRACIÓN ORAL
   Estilos ordenados como se ve la página, de arriba abajo.
   Cada sección trae su propio diseño para celular al final.

   0. Variables y base (paleta celeste)
   1. Componentes compartidos
   2. Encabezado
   3. Portada (y cuenta regresiva)
   4. Participan
   5. Muro de lectura
   6. Qué debemos tener en cuenta
   7. Programa
   8. Materiales
   9. Galería de fotos
   10. Videos
   11. Llamado final
   12. Pie de página
   13. Notificación, visor de imágenes y reproductor
   ===================================================== */


/* =====================================================
   0. VARIABLES Y BASE
   ===================================================== */

:root {
  /* Paleta celeste del colegio: cambia el tono aquí y se actualiza toda la página */
  --celeste: #4db3e6;        /* tono principal, tipo buzo */
  --celeste-dark: #1a7cba;   /* botones y acentos */
  --celeste-deep: #0b4f8a;   /* textos y pie de página */
  --celeste-soft: #d9f0fc;   /* fondos suaves */
  --celeste-mist: #f2faff;   /* casi blanco */
  --banner: linear-gradient(120deg, #2a95d1 0%, #1a7cba 100%);

  --ink: #102b4b;
  --muted: #59728b;
  --white: #fff;
  --line: #cce8fb;
  --shadow: 0 18px 50px rgba(26, 124, 186, .15);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}

body {
  margin: 0;
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color: var(--ink);
  background: var(--celeste-mist);
  line-height: 1.55;
}

a {
  color: inherit;
}

.wrap {
  width: min(1160px,92%);
  margin: auto;
}

.topline {
  height: 7px;
  background: linear-gradient(90deg, var(--celeste-dark), #8fd6f6, var(--celeste-dark));
}


/* =====================================================
   1. COMPONENTES COMPARTIDOS
   ===================================================== */

/* Fondo continuo de toda la página (desde la portada hasta el pie) */

main {
  --r: 300px; /* tamaño de los círculos decorativos */
  position: relative;
  overflow: hidden;
  background:
    /* brillos blancos de la portada */
    radial-gradient(ellipse 900px 600px at 85% 0, rgba(255,255,255,.95) 0, transparent 70%),
    radial-gradient(ellipse 800px 500px at 0 900px, rgba(255,255,255,.7) 0, transparent 70%),
    /* círculos a lo largo de la página */
    radial-gradient(circle var(--r) at 0% 4%, transparent 0 calc(var(--r) - 34px), rgba(77,179,230,.15) calc(var(--r) - 33px) var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle var(--r) at 100% 22%, transparent 0 calc(var(--r) - 34px), rgba(77,179,230,.15) calc(var(--r) - 33px) var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle var(--r) at 0% 48%, transparent 0 calc(var(--r) - 34px), rgba(77,179,230,.15) calc(var(--r) - 33px) var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle var(--r) at 100% 74%, transparent 0 calc(var(--r) - 34px), rgba(77,179,230,.15) calc(var(--r) - 33px) var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle var(--r) at 0% 96%, transparent 0 calc(var(--r) - 34px), rgba(77,179,230,.15) calc(var(--r) - 33px) var(--r), transparent calc(var(--r) + 1px)),
    /* degradado que se intensifica hacia abajo */
    linear-gradient(180deg, #f2faff 0%, #dff2fc 25%, #d3ecfb 60%, #c4e5f8 100%);
}

@media (max-width: 560px) {
  main {
    --r: 170px;
  }
}


/* Secciones */

section {
  padding: 76px 0;
}

.soft {
  background: rgba(255, 255, 255, .55);
}

/* Título de cada sección dentro de una tarjeta celeste */

.section-head {
  --icon: "📖";
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0 0 28px;
  padding: 22px 26px 22px 88px;
  text-align: left;
  border-radius: 20px;
  background: var(--banner);
  box-shadow: var(--shadow);
}

.section-head--left {
  margin: 0 0 20px;
}

/* ícono en cuadro blanco */
.section-head::before {
  content: var(--icon);
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff;
  font-size: 26px;
  box-shadow: 0 6px 14px rgba(0, 40, 90, .18);
}

/* círculo decorativo */
.section-head::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -70px;
  width: 190px;
  height: 190px;
  border: 26px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  pointer-events: none;
}

.section-kicker {
  display: none;
}

.section-head h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}

.section-head p {
  position: relative;
  z-index: 1;
  margin: 3px 0 0;
  font-size: 14px;
  color: #eaf7ff;
}

/* Ícono de cada sección (cámbialo aquí cuando tengas los logos) */
#participa .section-head { --icon: "👥"; }
#muro .section-head { --icon: "📸"; }
#ten-en-cuenta .section-head { --icon: "✅"; }
#programa .section-head { --icon: "📅"; }
#materiales .section-head { --icon: "📚"; }
#fotos .section-head { --icon: "🖼️"; }
#videos .section-head { --icon: "🎥"; }

@media (max-width: 560px) {
  .section-head {
    padding: 18px 16px 18px 74px;
  }

  .section-head::before {
    left: 16px;
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .section-head h2 {
    font-size: 21px;
  }

  .section-head p {
    font-size: 13px;
  }
}

/* Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 13px;
  padding: 13px 17px;
  font: inherit;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s,box-shadow .15s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(26, 124, 186, .25);
}

.btn-primary {
  background: linear-gradient(120deg, var(--celeste), var(--celeste-dark));
  color: #fff;
  box-shadow: 0 10px 24px rgba(26, 124, 186, .35);
}

.btn-secondary {
  background: #fff;
  color: var(--celeste-deep);
  border: 1.5px solid var(--celeste);
}

/* Textos auxiliares */

.tiny {
  font-size: 12px!important;
  color: #6f879d!important;
  margin-top: 15px;
}

.empty-state {
  border: 1px dashed #b9e0f6;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  color: #6a8aa3;
  font-size: 13px;
  background: var(--celeste-mist);
}

/* Tarjetas publicadas desde el panel (muro, galería y materiales) */

.published-card {
  min-width: 0;
  overflow: hidden;
}

.published-card > img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
}

/* Fotos del muro y de la galería: cada foto en su tarjeta */

.gallery-grid {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* sin fotos publicadas, no se muestra la tarjeta grande vacía */
.local-grid:empty,
.gallery-grid:empty {
  display: none;
}

.local-grid .published-card,
.gallery-grid .published-card {
  padding: 10px;
  background: var(--celeste-mist);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(26, 124, 186, .1);
  transition: transform .2s, box-shadow .2s;
}

.local-grid .published-card:hover,
.gallery-grid .published-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26, 124, 186, .2);
}

.local-grid .published-card > img,
.gallery-grid .published-card > img {
  border-radius: 14px;
}

/* título y descripción, si la foto los tiene */
.local-grid .published-card-content,
.gallery-grid .published-card-content {
  padding: 12px 6px 4px;
}

.local-grid .published-card-content h3,
.gallery-grid .published-card-content h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--celeste-deep);
}

.local-grid .published-card-content p,
.gallery-grid .published-card-content p {
  margin: 0;
  font-size: 13px;
  color: #6c849b;
}


/* =====================================================
   2. ENCABEZADO
   ===================================================== */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  text-decoration: none;
  font-weight: 900;
  color: var(--celeste-deep);
  letter-spacing: -.03em;
}

.brandmark {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(145deg, var(--celeste), var(--celeste-dark));
  font-size: 23px;
  box-shadow: 0 8px 18px rgba(26, 124, 186, .3);
}

.brand small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--celeste-dark);
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 19px;
  flex-wrap: wrap;
}

.navlinks a {
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  color: #2f5f85;
}

.navlinks a:hover {
  color: var(--celeste-dark);
}

.navlinks .pill {
  background: var(--celeste-dark);
  color: #fff;
  padding: 10px 15px;
  border-radius: 99px;
  box-shadow: 0 6px 14px rgba(26, 124, 186, .3);
}

.navlinks .pill:hover {
  color: #fff;
  background: var(--celeste-deep);
}

@media (max-width: 900px) {
  .nav {
    padding: 12px 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .navlinks {
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .navlinks a {
    font-size: 12px;
  }
}


/* =====================================================
   3. PORTADA (y cuenta regresiva)
   ===================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 70px;
}



.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 44px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid rgba(77, 179, 230, .5);
  color: var(--celeste-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(26, 124, 186, .12);
}

.eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--celeste);
}

.hero h1 {
  margin: 20px 0 16px;
  font-size: clamp(36px,4.5vw,59px);
  line-height: 1.04;
  letter-spacing: -.055em;
  color: var(--celeste-deep);
}

.hero h1 em {
  font-style: normal;
  color: var(--celeste-dark);
}

.hero .subtitle {
  font-size: 18px;
  font-weight: 650;
  color: var(--celeste-deep);
  margin: 0 0 10px;
}

.slogan {
  font-weight: 750;
  font-style: italic;
  color: var(--celeste-dark);
  margin: 0 0 25px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Cuenta regresiva */

.countdown-box {
  position: relative;
  margin-top: 28px;
  padding: 20px 20px 18px;
  max-width: 460px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(77, 179, 230, .45);
  box-shadow: 0 22px 44px rgba(26, 124, 186, .2);
  backdrop-filter: blur(8px);
}

.countdown-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 99px;
  background: var(--celeste-soft);
  color: var(--celeste-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0 14px;
}

.countdown div {
  padding: 13px 4px 10px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--celeste) 0%, var(--celeste-dark) 100%);
  box-shadow: 0 8px 18px rgba(26, 124, 186, .28);
}

.countdown b {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.countdown span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e3f5ff;
}

.countdown-box small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: #4a6f8a;
}

.countdown-msg {
  padding: 14px 0 8px;
  font-size: 20px;
  font-weight: 900;
  color: var(--celeste-deep);
}

/* Foto de portada */

.hero-art {
  position: relative;
}

.hero-photo {
  width: 100%;
  height: 435px;
  object-fit: cover;
  object-position: center;
  border-radius: 34px 34px 80px 34px;
  box-shadow: 0 24px 55px rgba(26, 124, 186, .32);
  border: 7px solid white;
}

.photo-badge {
  position: absolute;
  right: -10px;
  bottom: 28px;
  background: linear-gradient(130deg, var(--celeste), var(--celeste-dark));
  color: white;
  border-radius: 19px;
  padding: 19px 22px;
  box-shadow: var(--shadow);
  max-width: 230px;
}

.photo-badge strong {
  display: block;
  font-size: 22px;
  line-height: 1.15;
}

.photo-badge span {
  font-size: 12px;
  opacity: .95;
}

.float-book {
  position: absolute;
  left: -20px;
  top: 25px;
  background: #fff;
  border-radius: 18px;
  padding: 12px 15px;
  box-shadow: var(--shadow);
  font-size: 28px;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-photo {
    height: 360px;
  }

  .hero-art {
    max-width: 650px;
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 35px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero-photo {
    height: 300px;
    border-radius: 24px 24px 52px 24px;
  }

  .photo-badge {
    right: -3px;
    bottom: 15px;
    padding: 14px;
    max-width: 190px;
  }

  .photo-badge strong {
    font-size: 18px;
  }

  .countdown b {
    font-size: 26px;
  }
}


/* =====================================================
   4. PARTICIPAN
   ===================================================== */

.participants {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 30px;
  align-items: center;
}

.participants-aside {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 26px;
  background: var(--banner);
  color: #fff;
  min-height: 100%;
  box-shadow: var(--shadow);
}

/* círculo decorativo */
.participants-aside::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border: 30px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  pointer-events: none;
}

.participants-aside > * {
  position: relative;
  z-index: 1;
}

.participants-aside h3 {
  font-size: 28px;
  line-height: 1.12;
  margin: 12px 0;
}

.participants-aside p {
  opacity: .95;
}

.participants-aside .big {
  font-size: 58px;
  font-weight: 950;
  letter-spacing: -.06em;
  line-height: 1;
}

.participants-aside .big small {
  font-size: 24px;
}

.participant-list {
  display: grid;
  gap: 13px;
}

.participant {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 6px 18px rgba(26, 124, 186, .08);
}

.participant .dot {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--celeste-soft);
  color: var(--celeste-dark);
  font-weight: 900;
}

.participant p {
  margin: 0;
  color: #4b6985;
  font-size: 14px;
}

.participant strong {
  display: block;
  color: var(--celeste-deep);
  font-size: 15px;
  margin-bottom: 3px;
}

@media (max-width: 900px) {
  .participants {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   5. MURO DE LECTURA
   ===================================================== */

.wall {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Encabezado celeste de la tarjeta */



.wall-head > * {
  position: relative;
  z-index: 1;
}



.wall-head h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}



/* Cuerpo con las fotos */

.wall-body {
  padding: 24px 30px 30px;
}

.wall-body .empty-state {
  margin: 0;
}

.local-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.local-grid .published-card > img {
  height: 200px;
}

@media (max-width: 560px) {
  .wall-head {
    padding: 20px;
    gap: 14px;
  }

  .wall-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 22px;
    border-radius: 14px;
  }

  .wall-head h3 {
    font-size: 20px;
  }

  .wall-head p {
    font-size: 13px;
  }

  .wall-body {
    padding: 16px;
  }

  .local-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .local-grid .published-card > img {
    height: 140px;
  }
}


/* =====================================================
   6. QUÉ DEBEMOS TENER EN CUENTA
   ===================================================== */

/* Datos clave: fecha y lugar */

.keyinfo {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px;
  margin-bottom: 22px;
}

.keyinfo-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  color: #fff;
  border-radius: 22px;
  background: var(--banner);
  box-shadow: var(--shadow);
}

.keyinfo-icon {
  flex: 0 0 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 26px;
}

.keyinfo-item small {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e3f5ff;
}

.keyinfo-item strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.2;
}

.keyinfo-item p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #f0faff;
}

/* Tarjetas de consejos */

.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tip {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(26, 124, 186, .08);
  transition: transform .2s, box-shadow .2s;
}

.tip:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.tip-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--celeste-soft);
  font-size: 28px;
}

.tip h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--celeste-deep);
}

.tip p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #58728c;
}

@media (max-width: 900px) {
  .keyinfo {
    grid-template-columns: 1fr;
  }

  .tips-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .tips-grid {
    grid-template-columns: 1fr;
  }

  .keyinfo-item {
    padding: 18px;
  }

  .keyinfo-item strong {
    font-size: 18px;
  }
}


/* =====================================================
   7. PROGRAMA (línea de tiempo)
   ===================================================== */

.agenda {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.agenda-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 30px;
  color: var(--celeste-deep);
  background: var(--celeste-mist);
  border-bottom: 1px solid var(--line);
}

.agenda-date {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--celeste), var(--celeste-dark));
  color: #fff;
}

.agenda-date b {
  font-size: 28px;
  font-weight: 950;
}

.agenda-date span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.agenda-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.agenda-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #4b6985;
}

.agenda-list {
  list-style: none;
  margin: 0;
  padding: 30px 30px 10px;
}

.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 40px 1fr;
  padding-bottom: 20px;
}

/* línea vertical */
.agenda-item::before {
  content: "";
  position: absolute;
  left: 139px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #bfe3f7;
}

.agenda-item:last-child::before {
  bottom: auto;
  height: 18px;
}

/* punto */
.agenda-item::after {
  content: "";
  position: absolute;
  left: 131px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--celeste-dark);
  border: 4px solid var(--celeste-soft);
  box-sizing: border-box;
}

.agenda-time {
  grid-column: 1;
  padding-top: 7px;
  text-align: right;
  font-size: 13px;
  font-weight: 900;
  color: var(--celeste-dark);
}

.agenda-card {
  grid-column: 3;
  padding: 16px 18px;
  background: var(--celeste-mist);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.agenda-card strong {
  display: block;
  color: var(--celeste-deep);
  font-size: 16px;
}

.agenda-card p {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5d7791;
}

.agenda-note {
  margin: 0 30px 26px;
  padding: 12px 15px;
  background: var(--celeste-mist);
  border-radius: 12px;
  font-size: 12px;
  color: #577790;
}

@media (max-width: 600px) {
  .agenda-head {
    padding: 20px;
  }

  .agenda-head h3 {
    font-size: 18px;
  }

  .agenda-list {
    padding: 24px 18px 8px;
  }

  .agenda-item {
    grid-template-columns: 28px 1fr;
  }

  .agenda-item::before {
    left: 12px;
  }

  .agenda-item::after {
    left: 4px;
  }

  .agenda-time {
    grid-column: 2;
    text-align: left;
    padding: 0 0 6px;
  }

  .agenda-card {
    grid-column: 2;
  }

  .agenda-note {
    margin: 0 18px 20px;
  }
}


/* =====================================================
   8. MATERIALES
   ===================================================== */

/* Tarjetas guía */

.materials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.material {
  padding: 24px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--celeste);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(26, 124, 186, .09);
  transition: transform .2s, box-shadow .2s;
}

.material:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.material .fileico {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--celeste-soft);
  font-size: 28px;
}

.material h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--celeste-deep);
}

.material p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #69829a;
}

/* Caja con los documentos publicados */

.materials-box {
  margin-top: 26px;
  padding: 28px 30px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.materials-box-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--celeste-deep);
}

.materials-box-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: var(--celeste);
}

.materials-box .empty-state {
  margin: 0;
}

.file-list {
  display: grid;
  gap: 12px;
}

.file-list:empty {
  display: none;
}

/* Fila de cada documento */

.material-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--celeste-mist);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform .2s, box-shadow .2s;
}

.material-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(26, 124, 186, .14);
}

.file-badge {
  flex: 0 0 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.file-pdf  { background: #fde8e8; color: #c42323; }
.file-doc  { background: #e3eefc; color: #1f5fbf; }
.file-xls  { background: #e0f5e6; color: #1d7a3c; }
.file-ppt  { background: #fdeede; color: #c25e12; }
.file-img  { background: #e0f5f3; color: #0f7f78; }
.file-link { background: var(--celeste-soft); color: var(--celeste-dark); }
.file-file { background: #eceff3; color: #5b6b7b; }

.material-row-info {
  flex: 1;
  min-width: 0;
}

.material-row-info strong {
  display: block;
  font-size: 15.5px;
  color: var(--celeste-deep);
  overflow-wrap: anywhere;
}

.material-row-info p {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #6c849b;
  overflow-wrap: anywhere;
}

.material-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--celeste), var(--celeste-dark));
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(26, 124, 186, .28);
}

.material-btn:hover {
  background: var(--celeste-deep);
}

@media (max-width: 900px) {
  .materials {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .materials {
    grid-template-columns: 1fr;
  }

  .materials-box {
    padding: 20px 16px;
    border-radius: 22px;
  }

  .material-row {
    flex-wrap: wrap;
  }

  .material-row-info {
    flex: 1 1 calc(100% - 72px);
  }

  .material-btn {
    flex-basis: 100%;
    text-align: center;
  }
}


/* =====================================================
   9. GALERÍA DE FOTOS
   ===================================================== */

.gallery-grid {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-grid .published-card > img {
  height: 220px;
}

/* Tarjetas de ejemplo que se ven antes de cargar las fotos */
.gallery-item {
  position: relative;
  min-height: 170px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(140deg, #bee9ff, #eaf8ff);
  display: grid;
  place-items: center;
  color: var(--celeste-dark);
  font-size: 37px;
}

.gallery-item span {
  position: relative;
  z-index: 1;
  font-size: 12px;
  margin-left: -10px;
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gallery-grid {
    gap: 10px;
    padding: 14px;
    border-radius: 22px;
  }

  .gallery-grid .published-card > img {
    height: 150px;
  }

  .gallery-item {
    min-height: 135px;
  }
}


/* =====================================================
   10. VIDEOS
   ===================================================== */

/* Banner de la sección */

#videos .section-head {
  position: relative;
  max-width: none;
  margin: 0 0 26px;
  padding: 22px 26px 22px 84px;
  text-align: left;
  border-radius: 20px;
  background: var(--banner);
  box-shadow: var(--shadow);
}

#videos .section-head::before {
  content: "🎥";
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
}

#videos .section-kicker {
  display: none;
}

#videos .section-head h2 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 36px);
}

#videos .section-head p {
  margin-top: 2px;
  color: #eaf7ff;
}

/* Tarjetas */

.video-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 17px;
}

.video-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(26, 124, 186, .1);
  transition: transform .2s, box-shadow .2s;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #071c32;
  cursor: pointer;
  overflow: hidden;
}

.video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.video-card:hover .video-thumb img {
  transform: scale(1.04);
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border-radius: 50%;
  background: #e02424;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.video-info {
  display: grid;
  gap: 4px;
  padding: 16px 18px 18px;
}

.video-tag {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--celeste-soft);
  color: var(--celeste-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.video-info h3 {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--celeste-deep);
}

.video-info p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6c849b;
  white-space: pre-line;
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   11. LLAMADO FINAL
   ===================================================== */

.community {
  position: relative;
  overflow: hidden;
  background: var(--banner);
  color: #fff;
  border-radius: 28px;
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  box-shadow: var(--shadow);
}

/* círculo decorativo */
.community::after {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -110px;
  width: 240px;
  height: 240px;
  border: 30px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  pointer-events: none;
}

.community > * {
  position: relative;
  z-index: 1;
}

.community h2 {
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 9px;
  letter-spacing: -.03em;
}

.community p {
  margin: 0;
  opacity: .95;
  max-width: 640px;
}

.community .btn {
  background: #fff;
  color: var(--celeste-deep);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .community {
    padding: 26px;
    display: block;
  }

  .community .btn {
    margin-top: 18px;
  }
}


/* =====================================================
   12. PIE DE PÁGINA
   ===================================================== */

footer {
  background: var(--celeste-deep);
  color: white;
  padding: 36px 0 24px;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
}

.footer-title {
  font-size: 18px;
  font-weight: 900;
}

.footer-sub {
  font-size: 12px;
  color: #cfeafb;
}

.logos {
  min-width: 0;
  max-width: 100%;
}

.logos-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, .22);
  margin-top: 25px;
  padding-top: 16px;
  color: #bfe0f5;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .logos {
    width: 100%;
  }

  .logos-img {
    max-width: 100%;
  }
}


/* =====================================================
   13. NOTIFICACIÓN, VISOR DE IMÁGENES Y REPRODUCTOR
   ===================================================== */

/* Notificación emergente */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--celeste-deep);
  color: #fff;
  border-radius: 13px;
  padding: 12px 18px;
  box-shadow: var(--shadow);
  font-size: 13px;
  display: none;
  max-width: 90vw;
}

/* Visor ampliado de imágenes */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 10px;
  object-fit: contain;
}

/* Botón de cerrar (lo usan el visor y el reproductor) */

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

/* Reproductor emergente de videos */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .88);
}

.video-modal.open {
  display: flex;
}

.video-modal-box {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

.video-modal-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}



/* ===== Centrar los títulos de cada sección ===== */

main .section-head {
  text-align: center !important;
  padding: 30px 26px 28px !important;
}

main .section-head h2,
main .section-head p {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

main .section-head p {
  max-width: 640px;
}

@media (max-width: 560px) {
  main .section-head {
    padding: 24px 16px 22px !important;
  }
}



main .section-head::before {
  display: none !important;
}


/* ===== Documentos: botones y vista previa ===== */

.material-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

button.material-btn {
  border: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.material-btn--ghost {
  background: #fff;
  color: var(--celeste-deep);
  border: 1.5px solid var(--celeste);
  box-shadow: none;
}

.material-btn--ghost:hover {
  background: var(--celeste-soft);
}

/* Ventana de vista previa */

.doc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .8);
}

.doc-modal.open {
  display: flex;
}

.doc-modal-box {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  height: min(90vh, 820px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}

.doc-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--celeste-mist);
  border-bottom: 1px solid var(--line);
}

.doc-modal-title {
  min-width: 0;
  font-size: 15px;
  color: var(--celeste-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.doc-modal-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--celeste), var(--celeste-dark));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.doc-modal-btn:hover {
  background: var(--celeste-deep);
}

.doc-modal-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #e6eef5;
  color: #35506a;
  font-size: 16px;
  cursor: pointer;
}

.doc-modal-close:hover {
  background: #d3e2ee;
}

.doc-modal-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #eef3f7;
  overflow: auto;
}

.doc-modal-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.doc-modal-body img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.doc-modal-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #6a8aa3;
  font-size: 14px;
}

@media (max-width: 560px) {
  .doc-modal {
    padding: 0;
  }

  .doc-modal-box {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .doc-modal-bar {
    flex-wrap: wrap;
  }

  .doc-modal-title {
    flex: 1 1 100%;
  }

  .doc-modal-actions {
    flex: 1 1 100%;
  }

  .doc-modal-btn {
    flex: 1;
    text-align: center;
  }

  .doc-modal-close {
    margin-left: auto;
  }

  /* botones de cada documento: uno junto al otro, a lo ancho */
  .material-actions {
    flex-basis: 100%;
  }

  .material-actions .material-btn {
    flex: 1;
    text-align: center;
  }
}

/* ===== Vista previa de PDF ===== */

.doc-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.doc-pdf canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}



/* ===== Botón "Ver más" ===== */

.is-hidden {
  display: none !important;
}

.show-more-wrap {
  margin-top: 24px;
  text-align: center;
}

.show-more-btn {
  padding: 12px 26px;
  border: 1.5px solid var(--celeste);
  border-radius: 99px;
  background: #fff;
  color: var(--celeste-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(26, 124, 186, .12);
  transition: background .15s, transform .15s;
}

.show-more-btn:hover {
  background: var(--celeste-soft);
  transform: translateY(-2px);
}


/* ===== Página del muro (muro.html) ===== */

.muro-page {
  padding-top: 48px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 9px 18px;
  border: 1.5px solid var(--celeste);
  border-radius: 99px;
  background: #fff;
  color: var(--celeste-deep);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(26, 124, 186, .12);
  transition: background .15s, transform .15s;
}

.back-link:hover {
  background: var(--celeste-soft);
  transform: translateX(-3px);
}

/* Tarjeta grande que contiene todas las publicaciones */

.feed-card {
  padding: 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.feed-card .empty-state {
  margin: 0;
}

/* Cuadrícula de publicaciones */

.feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.feed:empty {
  display: none;
}

.feed-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--celeste-mist);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(26, 124, 186, .12);
  transition: transform .2s, box-shadow .2s;
}

.feed-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(26, 124, 186, .22);
}

/* foto: mismo tamaño en todas, así las filas quedan parejas */
.feed-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--celeste-soft);
}

.feed-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .35s;
}

.feed-post:hover .feed-media img {
  transform: scale(1.04);
}

.feed-media .video-thumb {
  height: 100%;
  aspect-ratio: auto;
}

/* texto: fecha, título y descripción completa */
.feed-body {
  flex: 1;
  padding: 22px 24px 26px;
}

.feed-date {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--celeste-dark);
}

.feed-body h3 {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--celeste-deep);
  overflow-wrap: anywhere;
}

.feed-body p {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4b6985;
  overflow-wrap: anywhere;
  white-space: pre-line; /* respeta los saltos de línea que escribes */
}

.feed-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--celeste-dark);
}

.feed-footer {
  margin-top: 36px;
  text-align: center;
}

@media (max-width: 1000px) {
  .feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .muro-page {
    padding-top: 32px;
  }

  .feed-card {
    padding: 16px;
    border-radius: 22px;
  }

  .feed {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feed-body {
    padding: 18px 18px 22px;
  }

  .feed-body h3 {
    font-size: 18px;
  }
}


/* ===== Inicio: tarjeta del muro ===== */

/* espacio entre la tarjeta grande y las fotos, y para que el botón no se corte */
.wall {
  padding: 30px;
}

/* descripción: respeta los saltos de línea pero muestra solo 2 líneas con "…" */
.local-grid .published-card-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.local-grid .published-card-content h3 {
  overflow-wrap: anywhere;
}

/* botón "Ver más" */
.show-more-wrap {
  margin-top: 28px;
}

.show-more-btn {
  display: inline-block;
  text-decoration: none;
}

@media (max-width: 560px) {
  .wall {
    padding: 16px;
  }
}