/* ==========================================================================
   Portal RIODEFE — identidad diocesana. Celular primero.
   Letras servidas desde el propio sitio (licencia OFL: ver /static/fuentes/).
   ========================================================================== */

@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fuentes/playfair-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fuentes/playfair-display-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fuentes/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fuentes/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fuentes/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fuentes/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fuentes/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root {
  --morado: #4A2360;   /* cuaresma: principal */
  --oro: #C9A227;      /* pontificio: acentos */
  --azul: #1F4E8C;     /* mar Caribe: enlaces */
  --verde: #3F7D4E;    /* cardón: lo territorial y wayuu */
  --rojo: #B3261E;     /* wayuu: Pasión, alertas */
  --arena: #F3EBDD;    /* arena y sal: fondos */
  --madera: #5C3A21;   /* textos y bordes */

  --arena-clara: #FBF7F0;
  --morado-oscuro: #341746;
  --tinta: #3A2414;            /* madera oscurecida para texto largo */
  --linea: rgba(92, 58, 33, .22);

  --titulos: "Playfair Display", Georgia, "Times New Roman", serif;
  --texto: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --ancho: 68rem;
  --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--arena); color: var(--tinta);
  font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--titulos); color: var(--morado); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 6vw, 2.75rem); margin: .2em 0 .4em; }
h2 { font-size: clamp(1.3rem, 4.2vw, 1.75rem); margin: 1.4em 0 .5em; }
a { color: var(--azul); text-underline-offset: .15em; }
a:hover { color: var(--morado); }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
img, svg { max-width: 100%; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.contenido { padding-top: 1.5rem; padding-bottom: 3rem; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--oro); color: var(--morado-oscuro); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 0; }

/* --- Aviso de construcción: discreto ------------------------------------ */
.construccion {
  background: var(--morado-oscuro); color: #E9DFC6; text-align: center;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: .3rem 16px;
}

/* --- Cabecera ------------------------------------------------------------ */
.cabecera { background: var(--morado); color: #fff; }
.cabecera__fila { display: flex; flex-direction: column; gap: .5rem; padding-top: .9rem; padding-bottom: .5rem; }
.marca { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.marca:hover { color: #fff; }
.marca .cruz { width: 28px; height: 40px; flex: none; }
.marca__texto { display: flex; flex-direction: column; min-width: 0; }
.marca__titulo { font-family: var(--titulos); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.marca__sub { font-size: .8rem; color: #E3D3A0; }

/* Barra de secciones: en celular se reparte en varias líneas, todo a la vista. */
.menu { display: flex; flex-wrap: wrap; gap: .1rem .15rem; align-items: center; margin: 0 -.5rem; padding-bottom: .25rem; }
.menu a {
  flex: none; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap;
  padding: .3rem .5rem; border-radius: var(--radio); border-bottom: 3px solid transparent;
}
.menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.menu a[aria-current="page"] { border-bottom-color: var(--oro); }
.menu__quien { color: #E3D3A0; font-size: .9rem; padding: 0 .5rem; flex: none; }
.menu__salir { margin: 0; flex: none; }
.menu .boton-enlace { color: #fff; }

/* --- Franja de los siete colores ---------------------------------------- */
.franja { display: flex; height: 8px; box-sizing: content-box; border-top: 2px solid var(--arena); }
.franja span { flex: 1; }
.franja span:nth-child(1) { background: var(--morado); }
.franja span:nth-child(2) { background: var(--oro); }
.franja span:nth-child(3) { background: var(--azul); }
.franja span:nth-child(4) { background: var(--verde); }
.franja span:nth-child(5) { background: var(--rojo); }
.franja span:nth-child(6) { background: var(--arena); box-shadow: inset 0 0 0 1px var(--linea); }
.franja span:nth-child(7) { background: var(--madera); }
.franja--fina { height: 5px; border-top: 0; }

/* --- Portada (inicio): bloque de color en lugar de fotografía ----------- */
.portada {
  background: linear-gradient(160deg, var(--morado) 0%, var(--morado-oscuro) 100%);
  color: #fff; padding: 2.5rem 0 3rem; text-align: center;
}
.portada__interior { display: flex; flex-direction: column; align-items: center; }
.cruz--grande { width: 56px; height: 80px; margin-bottom: 1rem; }
.portada__titulo { color: #fff; font-size: clamp(1.9rem, 7vw, 3.4rem); max-width: 18ch; margin: 0 0 1rem; }
.portada__mensaje {
  font-family: var(--titulos); font-style: italic; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
  line-height: 1.45; max-width: 34ch; margin: 0 0 1.5rem; color: #F6EED9;
}
.portada__mensaje::before, .portada__mensaje::after { color: var(--oro); }
.portada__mensaje::before { content: "«"; }
.portada__mensaje::after { content: "»"; }
.portada__fecha { margin: 0; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; }

.etiqueta {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .15rem .5rem; border-radius: 99px; background: var(--madera); color: #fff; vertical-align: middle;
}
.etiqueta--oro { background: var(--oro); color: var(--morado-oscuro); }

/* --- Textos -------------------------------------------------------------- */
.encabezado { margin-bottom: 1rem; }
.antetitulo {
  margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--madera);
}
.antetitulo--verde { color: var(--verde); }
.entrada { font-size: 1.15rem; max-width: 40em; }
.destacado {
  font-family: var(--titulos); font-size: 1.2rem; color: var(--morado);
  border-left: 4px solid var(--oro); padding: .25rem 0 .25rem 1rem; margin: 0;
}
.bloque { max-width: 44em; }
.nota { font-size: .95rem; color: var(--madera); border-top: 1px solid var(--linea); padding-top: .75rem; margin-top: 1.5rem; }
.tenue { color: #7A5C45; }
.vacio { background: var(--arena-clara); border: 1px dashed var(--linea); border-radius: var(--radio); padding: 1rem 1.25rem; }
.vacio--grande { padding: 2rem 1.25rem; text-align: center; max-width: 40em; margin: 1rem auto; }
.prosa { white-space: pre-line; max-width: 40em; }
.migas { font-size: .9rem; margin-bottom: .75rem; color: var(--madera); }
.titulo-seccion { margin-top: 2rem; }

.pendiente {
  display: inline-block; margin: .25rem 0 .5rem; padding: .3rem .7rem; border-radius: var(--radio);
  background: #FFF6E0; color: #6B4E0A; border: 1px solid var(--oro); font-size: .9rem; font-weight: 600;
}

/* --- Accesos del inicio -------------------------------------------------- */
.accesos { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; }
.acceso {
  display: flex; flex-direction: column; gap: .2rem; height: 100%; text-decoration: none;
  background: #fff; border-radius: var(--radio); padding: 1rem 1.1rem;
  border: 1px solid var(--linea); border-top: 6px solid var(--morado); color: var(--tinta);
}
.acceso:hover { color: var(--tinta); box-shadow: 0 4px 14px rgba(58,36,20,.12); }
.acceso__nombre { font-family: var(--titulos); font-weight: 700; font-size: 1.25rem; color: var(--morado); }
.acceso__texto { font-size: .98rem; }
.acceso--rojo { border-top-color: var(--rojo); }
.acceso--verde { border-top-color: var(--verde); }
.acceso--azul { border-top-color: var(--azul); }
.acceso--madera { border-top-color: var(--madera); }
.acceso--oro { border-top-color: var(--oro); }

/* --- El proyecto -------------------------------------------------------- */
.fundamentos { display: grid; gap: .75rem; margin: 0; }
.fundamento { background: #fff; border-left: 5px solid var(--morado); border-radius: var(--radio); padding: .75rem 1rem; }
.fundamento dt { font-family: var(--titulos); font-weight: 700; color: var(--morado); font-size: 1.1rem; }
.fundamento dd { margin: .2rem 0 0; }
.fundamento--oro { border-left-color: var(--oro); }
.fundamento--azul { border-left-color: var(--azul); }
.fundamento--verde { border-left-color: var(--verde); }
.lista-colegios { padding-left: 1.2rem; }

/* --- Escenas ------------------------------------------------------------ */
.escenas { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.escena-tarjeta {
  display: flex; align-items: stretch; text-decoration: none; background: #fff; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; height: 100%;
}
.escena-tarjeta:hover { color: var(--tinta); box-shadow: 0 4px 14px rgba(58,36,20,.12); }
.escena-tarjeta__numero {
  flex: none; width: 3.25rem; display: flex; align-items: center; justify-content: center;
  background: var(--morado); color: #fff; font-family: var(--titulos); font-weight: 700; font-size: 1.35rem;
}
.escena-tarjeta--territorio .escena-tarjeta__numero { background: var(--verde); }
.escena-tarjeta--resurreccion .escena-tarjeta__numero { background: var(--oro); color: var(--morado-oscuro); }
.escena-tarjeta--resurreccion { border-color: var(--oro); }
.escena-tarjeta__cuerpo { display: flex; flex-direction: column; padding: .65rem .9rem; }
.escena-tarjeta__titulo { font-family: var(--titulos); font-weight: 700; color: var(--morado); font-size: 1.08rem; line-height: 1.3; }
.escena-tarjeta__eje { font-size: .95rem; color: var(--madera); }

.ficha-escena { display: grid; gap: 1.25rem; }
.ficha-escena__bloque {
  background: var(--morado); color: #fff; border-radius: var(--radio); min-height: 9rem;
  display: flex; align-items: flex-end; padding: 1rem 1.25rem; border-bottom: 6px solid var(--oro);
}
.ficha-escena__bloque span { font-family: var(--titulos); font-size: 4.5rem; font-weight: 700; line-height: 1; }
.ficha-escena__bloque--territorio { background: var(--verde); }
.ficha-escena__bloque--resurreccion { background: var(--oro); color: var(--morado-oscuro); border-bottom-color: var(--morado); }
.ficha-escena__titulo { margin-top: .1rem; }
.ficha-datos { margin: 0; }
.ficha-datos dt { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--madera); margin-top: 1rem; }
.ficha-datos dd { margin: .2rem 0 0; font-size: 1.1rem; }
.ficha-datos__eje { font-family: var(--titulos); font-style: italic; color: var(--morado); font-size: 1.3rem !important; }

.paginacion { display: flex; flex-direction: column; gap: .5rem; margin-top: 2rem; }
.paginacion__enlace { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem .9rem; text-decoration: none; }
.paginacion__enlace--sig { text-align: right; }

/* --- Raíz wayuu ---------------------------------------------------------- */
.pasos, .elementos { padding-left: 1.3rem; }
.pasos li, .elementos li { margin-bottom: .6rem; }
.elementos li::marker { color: var(--verde); }

/* --- Memoria y noticias ------------------------------------------------- */
.anios { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.anio { display: flex; flex-direction: column; background: var(--azul); color: #fff; padding: 1rem; border-radius: var(--radio); text-decoration: none; }
.anio:hover { color: #fff; background: var(--morado); }
.anio__numero { font-family: var(--titulos); font-size: 2rem; font-weight: 700; }
.publicaciones { list-style: none; padding: 0; }
.publicacion { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .5rem 1rem 1rem; margin-bottom: .75rem; }
.publicacion h2 { margin-top: .5rem; }

/* --- Formularios -------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; max-width: 34rem; }
.formulario label { font-weight: 600; margin-top: .9rem; }
.formulario input:not([type="checkbox"]), .formulario textarea {
  font: inherit; color: var(--tinta); background: #fff; width: 100%;
  border: 1px solid #B9A58E; border-radius: var(--radio); padding: .6rem .7rem; margin-top: .3rem;
}
.formulario input:focus, .formulario textarea:focus { border-color: var(--azul); }
.formulario .casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .95rem; }
.casilla input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--morado); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.boton {
  margin-top: 1.25rem; align-self: flex-start; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--morado); color: #fff; border: 0; border-radius: var(--radio); padding: .7rem 1.4rem;
  border-bottom: 3px solid var(--oro);
}
.boton:hover { background: var(--morado-oscuro); }
.boton-enlace { font: inherit; background: none; border: 0; padding: .4rem .6rem; color: var(--azul); cursor: pointer; text-decoration: underline; }

.aviso { border-radius: var(--radio); padding: .75rem 1rem; margin: 0 0 1rem; }
.aviso--ok { background: #E6F0E8; border-left: 5px solid var(--verde); }
.aviso--error { background: #FBE9E7; border-left: 5px solid var(--rojo); }
.aviso--error p { margin: 0; font-weight: 600; }
.aviso--error ul { margin: .3rem 0 0; }

/* --- Zona interna ------------------------------------------------------- */
.caja-acceso { max-width: 26rem; margin: 1rem auto; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem 1.25rem 1.5rem; }
.tablero { list-style: none; padding: 0; display: grid; gap: .9rem; }
.panel { background: #fff; border: 1px solid var(--linea); border-top: 5px solid var(--morado); border-radius: var(--radio); padding: .25rem 1.1rem 1.1rem; }
.panel h2 { margin-top: .75rem; font-size: 1.3rem; }
.panel p { margin: .2rem 0 .6rem; }
.mensajes { list-style: none; padding: 0; }
.mensaje { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem 1rem; margin-bottom: .75rem; }
.mensaje--nuevo { border-left: 5px solid var(--oro); }
.mensaje p { margin: .2rem 0; }
.mensaje__asunto { font-weight: 700; }
.mensaje__texto { white-space: pre-line; }

/* --- Pie ---------------------------------------------------------------- */
.pie { background: var(--madera); color: #F3EBDD; font-size: .95rem; }
.pie a { color: #F6D978; }
.pie a:hover { color: #fff; }
.pie__rejilla { display: grid; gap: 1rem; padding-top: 1.5rem; padding-bottom: 2rem; }
.pie__titulo { font-family: var(--titulos); font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: .3rem; }
.pie p { margin: .3rem 0; }

/* --- Pantallas medianas y grandes -------------------------------------- */
@media (min-width: 40rem) {
  .accesos { grid-template-columns: repeat(2, 1fr); }
  .fundamentos { grid-template-columns: repeat(2, 1fr); }
  .tablero { grid-template-columns: repeat(2, 1fr); }
  .paginacion { flex-direction: row; justify-content: space-between; }
  .portada { padding: 4rem 0 4.5rem; }
}
@media (min-width: 56rem) {
  .cabecera__fila { flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: .9rem; }
  .marca { flex: 0 1 auto; min-width: 0; }
  .menu { margin: 0; padding: 0; flex: none; flex-wrap: nowrap; }
  .menu a { padding: .4rem .55rem; }
  .marca__titulo { font-size: 1.15rem; max-width: 26ch; }
  .accesos { grid-template-columns: repeat(3, 1fr); }
  .escenas { grid-template-columns: repeat(2, 1fr); }
  .ficha-escena { grid-template-columns: 14rem 1fr; align-items: start; }
  .ficha-escena__bloque { min-height: 14rem; }
  .pie__rejilla { grid-template-columns: 1fr 2fr 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }