/* ============================================================================
   IGLESIA PARROQUIAL DE LA ENCARNACIÓN · Las Gabias, Granada
   Hoja de estilos principal

   Índice
   01 · Tokens de diseño
   02 · Reinicio y base
   03 · Tipografía y utilidades
   04 · Cabecera y navegación
   05 · Hero e accesos
   06 · Nuestra parroquia
   07 · Párrocos  (sección principal)
   08 · Horarios
   09 · Actividades · Actualidad
   10 · Galería y visor
   11 · Sacramentos · Comunidad
   12 · Contacto y formulario
   13 · Pie y WhatsApp
   14 · Movimiento y adaptaciones
   ========================================================================= */

/* == 01 · TOKENS DE DISEÑO ================================================ */
:root {
  /* Color. Cal andaluza y piedra como fondo; azul mariano (el manto de la
     Virgen, advocación del templo) como color estructural; granate reservado
     a los mensajes de error; dorado solo en filetes de 1px, nunca en superficies. */
  --cal:      #F8F5EF;   /* cal, fondo principal (ya no blanco puro)  */
  --marfil:   #EDE7DA;   /* marfil, secciones alternas                */
  --arena:    #E0D6C3;   /* beige suave, bloques de dato              */
  --piedra:   #686356;   /* piedra, texto secundario (AA sobre cal y marfil) */
  --piedra-c: #B5B0A5;   /* piedra clara, solo filetes y bordes       */
  --tinta:    #2B2723;   /* tinta cálida, texto principal             */
  --azul:     #1E3A5F;   /* azul mariano: el manto de la Virgen.
                            Color estructural de secciones y acentos  */
  --azul-cl:  #2F5985;   /* azul claro, para estados y detalles       */
  --azul-pal: #A9BFD8;   /* azul pálido, texto secundario sobre azul  */
  --granate:  #6E1F2E;   /* reservado a errores: marca lo urgente     */
  --oro:      #B08A3E;   /* dorado, solo líneas finas                 */
  --oro-txt:  #8A6A26;   /* dorado oscurecido, para texto legible     */
  --oro-cl:   #D9B368;   /* dorado claro, legible sobre azul          */

  /* Tipografía: dos familias del sistema, sin dependencias externas. */
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style",
           "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida */
  --t-hero:    clamp(2.4rem, 1.5rem + 3.2vw, 4.2rem);
  --t-grande:  clamp(2.2rem, 1.4rem + 3.2vw, 3.9rem);
  --t-titulo:  clamp(1.85rem, 1.3rem + 1.9vw, 2.7rem);
  --t-sub:     clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --t-menor:   0.82rem;

  /* Ritmo vertical y anchos */
  --aire:      clamp(3.75rem, 2rem + 6vw, 7.5rem);
  --ancho:     1200px;
  --ancho-txt: 62ch;

  --transicion: 260ms cubic-bezier(.22,.61,.36,1);
}

/* == 02 · REINICIO Y BASE ================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(16px, 0.94rem + 0.2vw, 18px);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;          /* compensa la cabecera fija */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.68;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
picture { display: block; }
.hero picture, .comunidad picture { display: contents; }
img { height: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; }
p  { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--arena); color: var(--tinta); }

.salto-contenido {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--cal); color: var(--tinta);
  border: 1px solid var(--oro);
  transition: top var(--transicion);
}
.salto-contenido:focus { top: 1rem; }

/* == 03 · TIPOGRAFÍA Y UTILIDADES ======================================== */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.seccion { padding-block: var(--aire); }
.seccion--marfil { background: var(--marfil); }
.seccion--arena  {
  background: var(--arena);
  --piedra:   #5C574F;             /* el gris se oscurece sobre fondo arena */
  --piedra-c: #A69F93;
}

.titulo {
  font-size: var(--t-titulo);
  letter-spacing: -0.012em;
  max-width: 18ch;
}
.titulo--grande { font-size: var(--t-grande); max-width: 14ch; }
.titulo--claro  { color: var(--tinta); }

/* Filete dorado: el único uso del oro como elemento visible */
.filete {
  display: block;
  width: 68px; height: 1px;
  margin: 1.35rem 0 1.5rem;
  background: var(--oro);
}

.encabezado { margin-bottom: clamp(2.5rem, 1.5rem + 2vw, 4rem); }
.encabezado__texto {
  max-width: 52ch;
  color: var(--piedra);
  font-size: var(--t-sub);
  margin: 0;
}

.entradilla {
  font-family: var(--serif);
  font-size: var(--t-sub);
  line-height: 1.55;
  max-width: 46ch;
}

/* Botones: contorno fino por defecto, sólido para la acción principal */
.boton {
  display: inline-block;
  padding: .82rem 1.55rem;
  border: 1px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.boton:hover, .boton:focus-visible { background: var(--tinta); color: var(--cal); }

.boton--solido {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--cal);
}
.boton--solido:hover, .boton--solido:focus-visible {
  background: #152B47; border-color: #152B47; color: var(--cal);
}

/* Enlace de texto con subrayado dorado que crece al pasar */
.enlace {
  display: inline-block;
  font-size: .92rem;
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--oro), var(--oro));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 28px 1px;
  transition: background-size var(--transicion), color var(--transicion);
}
.enlace:hover, .enlace:focus-visible { background-size: 100% 1px; color: var(--azul); }
/* El correo es largo: que parta antes de desbordar su columna */
.enlace--correo { overflow-wrap: anywhere; }

/* Párrafos de texto corrido, justificados y sin partir palabras con guion.
   Quedan fuera los textos centrados, la portada y los datos sueltos. */
.parroquia__texto p:not(.nota-editable),
.parrocos__cita,
.parroco__bio,
.labor__intro,
.sacramento p,
.comunidad__texto p:not(.comunidad__valores),
.contacto__datos .entradilla,
.actividad__texto p,
.noticia__texto p,
main.seccion p:not(.nota-editable) {
  text-align: justify;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Sección sin contenido todavía: dice qué pasará y adónde ir mientras tanto */
.vacio {
  margin: 0;
  padding: clamp(2.25rem, 4vw, 3.25rem) 1.5rem;
  border-top: 1px solid var(--oro);
  color: var(--piedra);
  font-family: var(--serif);
  font-size: var(--t-sub);
  line-height: 1.55;
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}
.vacio .enlace { font-size: inherit; }

/* Marca visible de contenido pendiente de sustituir */
.nota-editable {
  margin: .85rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--piedra-c);
  color: var(--piedra);
  font-size: var(--t-menor);
  font-style: italic;
  line-height: 1.5;
}
.nota-editable--centrada {
  border-left: 0;
  border-top: 1px solid var(--piedra-c);
  padding: .9rem 0 0;
  margin-top: 2.75rem;
  text-align: center;
}

/* Lista de datos etiqueta/valor */
.datos { margin: 0 0 1.1rem; }
.datos dt {
  font-size: var(--t-menor);
  color: var(--piedra);
  letter-spacing: .02em;
}
.datos dd { margin: 0 0 .6rem; }

/* == 04 · CABECERA Y NAVEGACIÓN ========================================== */
.cabecera {
  /* la altura vive en una variable: el panel desplegable se cuelga de ella */
  --alto-cabecera: 76px;
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* azul translúcido con desenfoque: deja intuir la foto que pasa por debajo */
  background: rgba(24, 46, 76, .86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  color: var(--marfil);
  --piedra: var(--azul-pal);
  --oro:    var(--oro-cl);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), background var(--transicion);
}
.cabecera--posada {
  background: rgba(24, 46, 76, .97);
  border-bottom-color: rgba(255, 255, 255, .16);
}

.cabecera__interior {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  min-height: var(--alto-cabecera);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
  padding: .55rem .7rem;
  margin-left: -.7rem;
  border-radius: 6px;
  transition: background 150ms ease-out;
}
.marca:hover, .marca:focus-visible { background: rgba(255, 255, 255, .09); }
.marca__cruz { width: 13px; height: 22px; fill: var(--oro); flex: none; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.marca__texto strong {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.06rem; letter-spacing: .005em;
}
.marca__texto span { font-size: .74rem; color: var(--piedra); }

.navegacion ul { display: flex; align-items: center; gap: clamp(.1rem, .4vw, .35rem); }

/* Opciones de menú al estilo Windows 11: rectángulo redondeado que se ilumina
   al pasar por encima, y una pastilla de acento en la opción activa. */
.navegacion a {
  position: relative;
  display: block;
  padding: .5rem .8rem .62rem;
  border-radius: 6px;
  font-size: .89rem;
  text-decoration: none;
  color: var(--marfil);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.navegacion a:hover,
.navegacion a:focus-visible { background: rgba(255, 255, 255, .11); }
.navegacion a:active { background: rgba(255, 255, 255, .06); }
.navegacion a.activo { background: rgba(255, 255, 255, .15); color: #FFFFFF; }

/* La pastilla se anima con transform, no con width: no obliga a recalcular
   el diseño en cada fotograma. */
.navegacion a::after {
  content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 18px; height: 3px; border-radius: 2px;
  background: var(--oro-cl);
  transform: translateX(-50%) scaleX(0);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.navegacion a.activo::after { transform: translateX(-50%) scaleX(1); }

/* Botón de menú: solo visible en pantallas pequeñas */
.hamburguesa {
  display: none;
  align-items: center; gap: .55rem;
  padding: .55rem .7rem;
  background: none; border: 0;
  border-radius: 6px;
  color: var(--marfil);
  font-size: .85rem;
  transition: background 150ms ease-out;
}
.hamburguesa:hover, .hamburguesa:focus-visible { background: rgba(255, 255, 255, .11); }
.hamburguesa:active { background: rgba(255, 255, 255, .06); }
.hamburguesa__texto { letter-spacing: .01em; }
.hamburguesa__barras { display: block; width: 22px; }
.hamburguesa__barras i {
  display: block; height: 1px; background: var(--marfil);
  margin: 5px 0;
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* == 05 · HERO Y ACCESOS ================================================= */
.hero { padding-top: 76px; }

/* Marco recto: la foto arranca justo bajo la cabecera. El arco queda solo en los retratos de los párrocos. */
.hero__marco {
  position: relative;
  display: flex; align-items: flex-start;
  /* La altura crece con el ancho para que quepa la escena entera (7:5): la cruz,
     la torre, la portada y la plaza. El texto va arriba para quedar a la vista. */
  min-height: clamp(540px, 71vw, 1400px);
  overflow: hidden;
  background: var(--marfil);
}

.hero__imagen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Si la ventana es más apaisada que la foto, 'cover' recorta en vertical.
     Anclado arriba, lo que se pierde es la calle, nunca la cruz. */
  object-position: 50% 0;
  transform: scale(1.05);
  animation: reposar 1400ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes reposar { to { transform: scale(1); } }

.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(104deg, rgba(14, 27, 45, .86) 0%, rgba(14, 27, 45, .70) 28%,
                            rgba(14, 27, 45, .20) 54%, rgba(14, 27, 45, 0) 74%),
    linear-gradient(to bottom, rgba(14, 27, 45, .45) 0%, rgba(14, 27, 45, 0) 40%);
}

.hero__texto {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  /* el aire superior deja respirar la curva del arco */
  padding-block: clamp(5.5rem, 13vh, 7.5rem) 2rem;
}
/* La medida de lectura se fija en cada elemento, no en el bloque */
.hero__titulo, .hero__subtitulo, .hero__acciones { max-width: 660px; }
.hero__texto { color: var(--cal); }
.hero__texto .filete { background: var(--oro-cl); margin: 1.1rem 0 1.15rem; }
.hero__titulo {
  font-size: var(--t-hero);
  letter-spacing: -0.018em;
  margin: 0;
  text-shadow: 0 1px 24px rgba(10, 20, 34, .45);
}
.hero__subtitulo {
  font-size: .95rem;
  color: #D3E0EE;
  margin-bottom: .6rem;
}
.hero__entrada {
  font-family: var(--serif);
  font-size: var(--t-sub);
  line-height: 1.5;
  max-width: 27ch;
  margin-bottom: 1.5rem;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
/* Sobre la fotografía: el principal en claro, los otros en contorno fino.
   Así se leen sin necesidad de lavar la imagen. */
.hero__acciones .boton {
  background: rgba(12, 24, 40, .34);
  border-color: rgba(255, 255, 255, .62);
  color: var(--cal);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hero__acciones .boton:hover,
.hero__acciones .boton:focus-visible {
  background: var(--cal); border-color: var(--cal); color: var(--azul);
}
.hero__acciones .boton--solido {
  background: var(--cal); border-color: var(--cal); color: var(--azul);
}
.hero__acciones .boton--solido:hover,
.hero__acciones .boton--solido:focus-visible {
  background: var(--oro-cl); border-color: var(--oro-cl); color: #16283F;
}

/* Entrada escalonada, una sola vez al cargar */
.hero__texto > * { animation: emerger 900ms cubic-bezier(.22,.61,.36,1) backwards; }
.hero__texto > *:nth-child(1) { animation-delay: 160ms; }
.hero__texto > *:nth-child(2) { animation-delay: 260ms; }
.hero__texto > *:nth-child(3) { animation-delay: 320ms; }
.hero__texto > *:nth-child(4) { animation-delay: 380ms; }
.hero__texto > *:nth-child(5) { animation-delay: 460ms; }
@keyframes emerger { from { opacity: 0; transform: translateY(16px); } }

/* Tres accesos en una franja azul a sangre: el color entra ya en la
   primera pantalla, separados por filetes en lugar de por tarjetas. */
.accesos {
  width: 100%;
  /* el relleno lateral se alinea solo con la retícula de .contenedor */
  padding-inline: max(1.25rem, calc((100% - var(--ancho)) / 2));
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--azul);
  color: var(--marfil);
  --piedra:   var(--azul-pal);
  --piedra-c: rgba(255, 255, 255, .24);
  --oro:      var(--oro-cl);
}
/* Centrado: cada columna se lee como una unidad y los filetes divisorios
   la enmarcan, en lugar de quedar descolgados del texto. */
.acceso {
  padding: 2.1rem clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--piedra-c);
  text-align: center;
  text-decoration: none;
  transition: background var(--transicion);
}
.acceso:last-child { border-right: 0; }
.acceso:hover, .acceso:focus-visible { background: rgba(255, 255, 255, .07); }
.acceso p {
  margin: 0 auto; color: var(--piedra); font-size: .92rem; max-width: 30ch;
}
.acceso__titulo {
  font-size: 1.35rem;
  margin-bottom: .5rem;
  position: relative;
  display: inline-block;
  padding-bottom: .35rem;
}
.acceso__titulo::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 24px; height: 1px; background: var(--oro);
  transform: translateX(-50%);
  transition: width var(--transicion);
}
.acceso:hover .acceso__titulo::after { width: 100%; }

/* == 06 · NUESTRA PARROQUIA ============================================== */
.parroquia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
.parroquia__texto p { max-width: var(--ancho-txt); }
.parroquia__galeria { margin: 0; }
.parroquia__galeria img { width: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.parroquia__galeria figcaption {
  margin-top: .6rem;
  font-size: .82rem; color: var(--piedra);
}

/* Historia del templo: línea de tiempo en tarjetas */
.historia { grid-column: 1 / -1; margin-top: clamp(3rem, 5vw, 4.5rem); }
.historia__titulo { margin-bottom: 1.25rem; font-size: 1.5rem; }
.linea-tiempo {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}
.linea-tiempo::before {
  content: ""; position: absolute; left: 0; right: 0; top: .45rem;
  height: 1px; background: var(--oro);
}
.hito { position: relative; padding-top: 1.75rem; }
.hito::before {
  content: ""; position: absolute; top: 0; left: 1rem;
  width: .9rem; height: .9rem;
  background: var(--marfil);
  border: 2px solid var(--oro);
  border-radius: 50%;
}
.hito__tarjeta {
  height: 100%;
  padding: 1rem 1rem 1.1rem;
  background: #FFFDF8;
  border: 1px solid var(--arena);
  border-radius: 12px;
  box-shadow: 0 12px 24px -20px rgba(43, 39, 35, .5);
}
.hito__fecha { display: block; font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; color: var(--azul); }
.hito__texto { margin: .45rem 0 0; font-size: .88rem; line-height: 1.5; }
.hito--destacado::before { background: var(--oro-cl); border-color: var(--oro-cl); }
.hito--destacado .hito__tarjeta {
  color: var(--marfil);
  background: linear-gradient(160deg, #1E3A5F 0%, #2A5282 100%);
  border-color: #1E3A5F;
  box-shadow: 0 18px 32px -20px rgba(30, 58, 95, .85);
}
.hito--destacado .hito__fecha { color: var(--oro-cl); }

/* Patrona y hermandades */
.parroquia__fichas {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 1.25rem;
}
.ficha {
  padding: 1.4rem 1.5rem 1.5rem;
  background: #FFFDF8;
  border: 1px solid var(--arena);
  border-radius: 12px;
  box-shadow: 0 12px 24px -20px rgba(43, 39, 35, .5);
}
.ficha p { margin: 0; line-height: 1.6; }
.ficha strong { font-weight: 600; }
.ficha__titulo { margin-bottom: .6rem; font-size: 1.25rem; color: var(--azul); }
.ficha__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ficha__lista li { position: relative; padding-left: 1.1rem; }
.ficha__lista li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: .5rem; height: 1px; background: var(--oro);
}
.ficha--destacada {
  color: var(--marfil);
  background: linear-gradient(160deg, #1E3A5F 0%, #2A5282 100%);
  border-color: #1E3A5F;
  box-shadow: 0 18px 32px -20px rgba(30, 58, 95, .85);
}
.ficha--destacada .ficha__titulo { color: var(--oro-cl); }

/* == 07 · PÁRROCOS · sección principal ==================================== */
/* Única sección con luz propia: recuerda a la Anunciación, advocación del templo. */
.parrocos {
  position: relative;
  /* Azul del manto: la sección más importante es también la más distinta.
     Los tokens se redefinen aquí, así todo lo de dentro se aclara solo. */
  color: var(--marfil);
  --tinta:    var(--marfil);
  --piedra:   var(--azul-pal);
  --piedra-c: rgba(255, 255, 255, .30);
  --arena:    rgba(255, 255, 255, .18);
  --oro:      var(--oro-cl);
  --oro-txt:  var(--oro-cl);
  background:
    radial-gradient(115% 85% at 80% -12%, #33598A 0%, rgba(51,89,138,0) 62%),
    var(--azul);
  overflow: hidden;
}
.parrocos::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(var(--oro), rgba(176,138,62,0));
  opacity: .5;
}

.parrocos__encabezado { max-width: 620px; margin-bottom: clamp(3rem, 4vw, 4.5rem); }
.parrocos__cita {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + .75vw, 1.65rem);
  line-height: 1.5;
  color: var(--oro-cl);
  max-width: 34ch;
  margin: 0;
}

.parrocos__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}

.parrocos__fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}



.parroco__nombre { font-size: 1.4rem; margin-bottom: .2rem; }

/* Cada ficha ocupa dos filas de la retícula (nombre y cargo) y las comparte con
   las demás: si un nombre ocupa dos líneas, los cargos siguen a la misma altura.
   El hueco entre filas de la ficha es 0; el de la retícula separa las fichas. */
.parroco {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}
.parroco__nombre { align-self: end; }
.parroco__cargo { align-self: start; }

/* Avatar en vídeo bajo los nombres. Portado de ideacode con la paleta de la
   parroquia; el vídeo es apaisado (1280x720), así que el marco va en 16:9 y
   no se recorta nada. Ancho: el de las dos fichas, con tope. */
.parrocos__video {
  grid-column: 1 / -1;
  /* anula el hueco entre filas de la retícula: el vídeo va pegado a los cargos */
  margin-top: calc(1.4rem - clamp(1.75rem, 3vw, 3rem));
  width: 100%;
  max-width: 620px;
}
.video {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: #0E1B2D;
  box-shadow: 0 24px 48px -24px rgba(5, 12, 22, .8);
}
.video video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: #0E1B2D;
}
.video--vertical { aspect-ratio: 9 / 16; }
.video--retrato  { aspect-ratio: 3 / 4; }
.video--cuadro   { aspect-ratio: 1 / 1; }
.video--paisaje  { aspect-ratio: 4 / 3; }
.video--banda    { aspect-ratio: 16 / 9; }

/* La portada tapa el reproductor y es el botón. El velo es translúcido para que
   se vea el fotograma, y sube hacia abajo, donde van el rótulo y el pie. */
.video__play {
  position: absolute; inset: 0; z-index: 1;
  display: none;
  place-content: center; justify-items: center;
  gap: .85rem;
  padding: 1.5rem;
  border: 0;
  text-align: center;
  cursor: pointer;
  color: var(--marfil);
  font-family: inherit;
  background: linear-gradient(180deg, rgba(14, 27, 45, .12) 0%, rgba(14, 27, 45, .38) 50%, rgba(14, 27, 45, .82) 100%);
  transition: background .4s ease;
}
.video__play:hover,
.video__play:focus-visible {
  background: linear-gradient(180deg, rgba(14, 27, 45, .05) 0%, rgba(14, 27, 45, .26) 50%, rgba(14, 27, 45, .72) 100%);
}
.js .video__play { display: grid; }
.video.is-playing .video__play { display: none; }

.video__disc {
  display: grid; place-content: center;
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  background: var(--oro-cl);
  color: #16283F;
  box-shadow: 0 8px 26px rgba(5, 12, 22, .5);
  transition: transform .4s ease;
}
/* el triángulo pesa a la izquierda: se compensa a ojo */
.video__disc svg { width: 1.5rem; height: 1.5rem; fill: currentColor; margin-left: .15rem; }
.video__play:hover .video__disc,
.video__play:focus-visible .video__disc { transform: scale(1.07); }
.video__rotulo {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  line-height: 1.2;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(5, 12, 22, .8);
}
.video__pie {
  font-size: .82rem;
  color: var(--azul-pal);
  text-shadow: 0 1px 12px rgba(5, 12, 22, .85);
}

.parroco__cargo {
  color: var(--oro-txt);
  font-size: .86rem;
  letter-spacing: .02em;
  margin-bottom: .9rem;
}
.parroco__bio { font-size: .95rem; margin-bottom: 1rem; }

/* La labor: lista corrida, sin iconos ni tarjetas */
.labor {
  border-top: 1px solid var(--oro);
  padding-top: 1.9rem;
}
.labor__titulo { font-size: 1.5rem; margin-bottom: .9rem; max-width: 20ch; }
.labor__intro { color: var(--piedra); font-size: .95rem; max-width: 42ch; }
.labor__lista {
  columns: 2;
  column-gap: 2.25rem;
  margin-top: 1.6rem;
}
.labor__lista li {
  break-inside: avoid;
  padding: .62rem 0 .62rem 1.5rem;
  border-top: 1px solid var(--arena);
  font-size: .93rem;
  position: relative;
}
.labor__lista li::before {
  content: ""; position: absolute; left: 0; top: 1.22rem;
  width: 9px; height: 1px; background: var(--oro);
}

/* == 08 · HORARIOS DE MISA (calendario) ================================= */

/* Tarjeta destacada: la próxima misa */
.misa-hoy {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: 1rem 1.75rem;
  margin-bottom: 2rem;
  padding: 1.6rem 2rem;
  color: var(--marfil);
  background: linear-gradient(135deg, #1E3A5F 0%, #2A5282 100%);
  border-radius: 16px;
  box-shadow: 0 24px 46px -26px rgba(30, 58, 95, .8);
}
.misa-hoy[hidden] { display: none; }
/* la cruz de la torre, en marca de agua */
.misa-hoy__cruz {
  position: absolute; right: 2rem; top: 50%;
  width: auto; height: 160%;
  transform: translateY(-50%);
  fill: var(--oro-cl); opacity: .09;
  pointer-events: none;
}
.misa-hoy__icono {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: rgba(217, 179, 104, .15);
  box-shadow: inset 0 0 0 1px rgba(217, 179, 104, .45);
}
.misa-hoy__icono svg {
  width: 1.6rem; height: 1.6rem;
  fill: none; stroke: var(--oro-cl); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.misa-hoy p { margin: 0; }
.misa-hoy__etiqueta { font-size: .82rem; color: var(--azul-pal); }
.misa-hoy__hora {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.4rem);
  line-height: 1.05;
  color: var(--oro-cl);
  font-variant-numeric: tabular-nums;
}
.misa-hoy__detalle { position: relative; justify-self: end; text-align: right; }
.misa-hoy__cuando { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.misa-hoy p.misa-hoy__extra { margin-top: .3rem; font-size: .88rem; color: var(--azul-pal); }
.misa-hoy__extra[hidden] { display: none; }

/* Selector de temporada, tipo pastilla */
.temporadas {
  display: inline-flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: 1.6rem;
  padding: .3rem;
  background: #FFFDF8;
  border: 1px solid var(--arena);
  border-radius: 14px;
  box-shadow: 0 8px 18px -14px rgba(43, 39, 35, .4);
}
.temporada {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .55rem 1.15rem .5rem;
  background: transparent;
  border: 0; border-radius: 10px;
  text-align: left;
  transition: background 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.temporada:hover { background: var(--marfil); }
.temporada[aria-selected="true"] {
  background: var(--azul); color: var(--marfil);
  box-shadow: 0 10px 20px -12px rgba(30, 58, 95, .8);
}
.temporada__nombre { font-family: var(--serif); font-size: 1.05rem; }
.temporada__fechas { font-size: .76rem; color: var(--piedra); }
.temporada[aria-selected="true"] .temporada__fechas { color: var(--azul-pal); }
.temporada__ahora,
.dia--hoy::before {
  padding: .05rem .5rem;
  font-size: .7rem; line-height: 1.5;
  background: var(--oro-cl); color: #16283F;
  border-radius: 999px;
}
.temporada__ahora { position: absolute; top: -.7rem; right: .5rem; }
.temporada__ahora[hidden] { display: none; }

/* La semana: una tarjeta por día */
.semana__periodo { margin: 0 0 .9rem; font-size: .88rem; color: var(--piedra); }
.semana__dias {
  list-style: none; margin: 0; padding: .5rem 0 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .75rem;
}
.dia {
  position: relative;
  display: flex; flex-direction: column; gap: .75rem;
  min-height: 10.5rem;
  padding: 1.15rem .95rem 1.25rem;
  background: #FFFDF8;
  border: 1px solid var(--arena);
  border-top: 3px solid var(--oro);
  border-radius: 12px;
  box-shadow: 0 12px 24px -20px rgba(43, 39, 35, .5);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.dia:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(43, 39, 35, .55); }
.dia__nombre { display: flex; flex-direction: column; font-family: var(--serif); font-size: 1.08rem; line-height: 1.2; }
.dia__nombre small { margin-top: .15rem; font-family: var(--sans); font-size: .74rem; color: var(--piedra); }
.dia__horas { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.dia__horas time {
  padding: .22rem .72rem;
  font-size: .98rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
  background: var(--marfil);
  border-radius: 999px;
}
.dia__nota { font-size: .74rem; line-height: 1.35; color: var(--piedra); }

/* El domingo, en azul: es la celebración principal de la semana */
.dia--domingo {
  color: var(--marfil);
  background: linear-gradient(160deg, #1E3A5F 0%, #2A5282 100%);
  border-color: #1E3A5F;
  border-top-color: var(--oro-cl);
  box-shadow: 0 18px 32px -20px rgba(30, 58, 95, .85);
}
.dia--domingo .dia__nombre small { color: var(--azul-pal); }
.dia--domingo .dia__horas time { color: var(--marfil); background: rgba(255, 255, 255, .13); }

/* Hoy */
.dia--hoy {
  background: #FFF7E6;
  box-shadow: 0 0 0 2px var(--oro-cl), 0 18px 32px -18px rgba(176, 138, 62, .6);
}
.dia--hoy.dia--domingo { background: linear-gradient(160deg, #24466F 0%, #2F5A8C 100%); }
.dia--hoy::before { content: "Hoy"; position: absolute; top: -.8rem; left: .85rem; }

/* Información práctica, en tarjetas pequeñas */
.misa-info {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: .75rem;
}
.misa-info li {
  padding: 1rem 1.1rem 1.05rem;
  font-size: .9rem; line-height: 1.5;
  background: #FFFDF8;
  border: 1px solid var(--arena);
  border-radius: 12px;
}
.misa-info strong {
  display: block; margin-bottom: .2rem;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400;
  color: var(--azul);
}
.misa-fuente { margin: 1.5rem 0 0; font-size: .82rem; color: var(--piedra); }

/* == 09 · ACTIVIDADES · ACTUALIDAD ============================== */
.actividades {
  display: grid;
  /* dos columnas en escritorio: con cuatro actividades la retícula queda llena */
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(2.25rem, 3.5vw, 3.5rem);
}
.actividad {
  border-top: 1px solid var(--oro);
  padding-top: 1.5rem;
}
/* Si más adelante se añade fotografía a una actividad, encaja aquí */
.actividad img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  margin-bottom: 1.35rem;
}
.actividad__titulo { font-size: 1.45rem; margin-bottom: 1rem; }
.actividad__texto p { font-size: .95rem; max-width: 46ch; }
.actividad .datos {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 1.1rem; row-gap: .25rem;
  padding-bottom: 1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--arena);
}
.actividad .datos dd { margin: 0; font-size: .9rem; }
.actividad .datos dt { padding-top: .04rem; }


/* Actualidad */
.noticias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(2rem, 3vw, 3rem);
}
.noticia img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.noticia__texto { border-top: 1px solid var(--piedra-c); padding-top: 1.15rem; }
.noticia__fecha { color: var(--piedra); font-size: .8rem; margin-bottom: .45rem; }
.noticia__titulo { font-size: 1.32rem; margin-bottom: .65rem; }
.noticia__texto p { font-size: .94rem; }

/* == 10 · GALERÍA Y VISOR =============================================== */
.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2rem;
}
.filtro {
  padding: .45rem 1rem;
  background: none;
  border: 1px solid var(--piedra-c);
  color: var(--piedra);
  font-size: .84rem;
  transition: all var(--transicion);
}
.filtro:hover { border-color: var(--azul); color: var(--azul); }
.filtro--activo {
  background: var(--azul); border-color: var(--azul); color: var(--cal);
}

.galeria {
  display: grid;
  /* tres columnas: las seis fotografías llenan dos filas completas */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}
.galeria__pieza { margin: 0; }
.galeria__pieza[hidden] { display: none; }

.galeria__boton {
  display: block; width: 100%; padding: 0;
  border: 0; background: var(--marfil);
  overflow: hidden;
}
.galeria__boton img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.galeria__boton:hover img, .galeria__boton:focus-visible img { transform: scale(1.035); }
.galeria__pieza figcaption {
  margin-top: .55rem;
  font-size: .8rem; color: var(--piedra);
}

/* Visor claro: la web no usa fondos negros, tampoco al ampliar */
.visor {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, 2vw, 2rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(237, 231, 218, .97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: aparecer 240ms ease both;
}
.visor[hidden] { display: none; }
@keyframes aparecer { from { opacity: 0; } }

.visor__figura { margin: 0; max-width: min(1000px, 100%); text-align: center; }
.visor__figura img {
  max-height: 78vh; width: auto; margin-inline: auto;
  box-shadow: 0 0 0 1px var(--arena);
}
.visor__figura figcaption {
  margin-top: .9rem; font-size: .85rem; color: var(--piedra);
}

.visor__cerrar {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--piedra-c);
  font-size: 1.6rem; line-height: 1;
  transition: all var(--transicion);
}
.visor__cerrar:hover { background: var(--azul); color: var(--cal); border-color: var(--azul); }

.visor__nav {
  flex: none;
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--piedra-c);
  font-size: 1.7rem; line-height: 1;
  transition: all var(--transicion);
}
.visor__nav:hover { background: var(--azul); color: var(--cal); border-color: var(--azul); }

/* == 10b · MÚSICA: VÍDEOS PROPIOS ======================================== */
.musica {
  color: var(--marfil);
  --tinta:    var(--marfil);
  --piedra:   var(--azul-pal);
  --oro:      var(--oro-cl);
  background:
    radial-gradient(110% 80% at 15% -10%, #33598A 0%, rgba(51, 89, 138, 0) 60%),
    var(--azul);
}
.musica .enlace { color: var(--marfil); }
.musica .enlace:hover, .musica .enlace:focus-visible { color: var(--oro-cl); }

/* El vídeo es vertical (9:16): ocupa una columna estrecha y el texto va al lado */
.musica__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.musica__marco { width: 100%; }
.musica__intro { margin: 0 0 1.5rem; max-width: 46ch; font-size: .95rem; line-height: 1.65; color: var(--azul-pal); }

/* Lista de vídeos, en tarjetas */
.pistas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pista {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .5rem .7rem .5rem .5rem;
  color: var(--marfil);
  text-align: left;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.pista:hover, .pista:focus-visible { background: rgba(255, 255, 255, .11); }
.pista[aria-current="true"] { background: rgba(217, 179, 104, .14); border-color: var(--oro-cl); }
.pista__miniatura { display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; }
.pista__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.pista__titulo { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; }
.pista__autor  { display: block; margin-top: .15rem; font-size: .78rem; color: var(--azul-pal); }

/* == 11 · SACRAMENTOS · COMUNIDAD ============================== */
.sacramentos {
  display: grid;
  /* tres columnas: los seis sacramentos llenan dos filas completas */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--piedra-c);
}
.sacramento {
  display: flex; flex-direction: column;
  padding: 1.9rem clamp(1.25rem, 2vw, 2.25rem) 1.9rem 0;
  border-bottom: 1px solid var(--piedra-c);
}
/* el enlace baja al pie de cada celda: quedan todos a la misma altura */
.sacramento .enlace { margin-top: auto; align-self: flex-start; }
.sacramento h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.sacramento p { font-size: .93rem; color: #55504A; max-width: 38ch; }

/* Banda fotográfica de comunidad */
.comunidad {
  padding-block: 0;                /* anula el aire de .seccion */
  position: relative;
  isolation: isolate;              /* el velo y el texto se apilan aquí dentro */
  display: flex; align-items: center;
  min-height: clamp(440px, 62vh, 640px);
  overflow: hidden;
}
.comunidad__fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Velo de cal: mantiene la banda luminosa y el texto legible */
.comunidad::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg,
      rgba(248,245,239,.96) 0%, rgba(248,245,239,.88) 40%,
      rgba(248,245,239,.25) 72%, rgba(248,245,239,0) 92%);
}
.comunidad__texto {
  position: relative; z-index: 2;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.comunidad__texto p { max-width: 44ch; }
.comunidad__valores {
  font-family: var(--serif);
  font-size: var(--t-sub);
  color: var(--azul);
  border-top: 1px solid var(--oro);
  padding-top: 1.1rem;
  margin-top: 1.75rem;
  max-width: 30ch;
}


/* == 12 · CONTACTO Y FORMULARIO ========================================= */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.contacto__datos { min-width: 0; }
.datos--contacto {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  column-gap: 0;                   /* el filete de cada fila queda continuo */
  border-top: 1px solid var(--arena);
  padding-top: 1.25rem;
  margin-top: 1.75rem;
}
.datos--contacto dt { padding: .55rem 1.25rem .55rem 0; }
.datos--contacto dd {
  padding: .55rem 0; margin: 0;
  border-bottom: 1px solid var(--arena);
}
.datos--contacto dt { border-bottom: 1px solid var(--arena); }

/* Iconos de teléfono y correo. En escritorio cuelgan en el hueco entre la
   etiqueta y el dato: así todos los valores siguen alineados a la misma línea. */
.dato-icono { position: relative; }
.icono-dato {
  position: absolute; left: -1.7rem; top: .92rem;
  width: 1.05rem; height: 1.05rem;
  fill: none; stroke: var(--oro-txt); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.mapa { margin-top: 2rem; }
.mapa iframe {
  width: 100%; aspect-ratio: 16 / 9;
  border: 0; display: block;
  background: var(--marfil);          /* mientras Google tarda en responder */
  border-top: 1px solid var(--oro);
}
/* La dirección en texto, bajo el mapa: se lee, se copia y se imprime */
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 1rem;
  margin: .85rem 0 0;
  font-size: .88rem; color: var(--piedra);
}
.mapa__pie strong { color: var(--tinta); font-weight: 600; }

/* Formulario de líneas: sin cajas, coherente con los filetes de la página */
.formulario {
  background: var(--marfil);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--oro);
}
.formulario__titulo { font-size: 1.5rem; margin-bottom: 1.6rem; }

.campo { margin-bottom: 1.35rem; }
.campo label {
  display: block;
  font-size: .82rem; color: var(--piedra);
  margin-bottom: .35rem;
}
.campo__opcional { color: var(--piedra); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .6rem 0;
  font: inherit; font-size: .96rem;
  color: var(--tinta);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--piedra-c);
  border-radius: 0;
  transition: border-color var(--transicion);
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; border-bottom-color: var(--azul); border-bottom-width: 2px;
  padding-bottom: calc(.6rem - 1px);
}
.campo--error input, .campo--error select, .campo--error textarea {
  border-bottom-color: var(--granate);
}
.campo__error { margin: .35rem 0 0; font-size: .8rem; color: var(--granate); }

.formulario .boton { margin-top: .5rem; }
.formulario__aviso { margin: 1rem 0 0; font-size: .88rem; min-height: 1.2em; }
.formulario__aviso--ok  { color: #2E6B4F; }
.formulario__aviso--mal { color: var(--granate); }

/* Casilla de consentimiento: la etiqueta se alinea con la casilla aunque
   ocupe dos líneas, y el error cruza las dos columnas. */
.campo--casilla {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .7rem; align-items: start;
}
.campo--casilla input {
  width: 1.15rem; height: 1.15rem; margin-top: .2rem;
  accent-color: var(--azul); cursor: pointer;
}
.campo--casilla label { margin: 0; font-size: .92rem; line-height: 1.5; cursor: pointer; }
.campo--casilla .campo__error { grid-column: 1 / -1; }
.campo--casilla.campo--error label { color: var(--granate); }

/* Aviso de protección de datos: letra pequeña, en negrita y algo más oscura
   que el resto de notas, para que no pase por encima sin leerse. */
.formulario__legal {
  margin: 1.1rem 0 0; font-size: .76rem; line-height: 1.65;
  font-weight: 600; color: var(--tinta);
}
.formulario__legal strong { font-weight: 700; }

/* Campo señuelo para robots. No se usa «display: none» a propósito: hay
   robots que descartan lo que está oculto de esa manera. */
.trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* == 13 · PIE Y WHATSAPP ================================================ */
.pie {
  background: var(--azul);
  color: var(--marfil);
  --piedra: var(--azul-pal);
  --oro:    var(--oro-cl);
  border-top: 1px solid var(--oro-cl);
  padding-block: clamp(3rem, 5vw, 4.5rem) 1.75rem;
}
/* Cuatro columnas alineadas arriba: marca, dos grupos de enlaces y contacto */
.pie__interior {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.pie__logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--marfil); }
.pie__logo .marca__cruz { flex: none; width: 18px; height: 30px; }
.pie__nombre { display: block; font-family: var(--serif); font-size: 1.18rem; line-height: 1.25; }
.pie__lugar  { display: block; margin-top: .15rem; font-size: .82rem; color: var(--azul-pal); }
.pie__lema { margin: 1.15rem 0 0; max-width: 38ch; text-wrap: pretty; font-size: .9rem; line-height: 1.6; color: var(--azul-pal); }

.pie__titulo {
  margin: 0 0 1rem;
  padding-bottom: .65rem;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400;
  color: var(--oro-cl);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.pie__lista a { font-size: .92rem; color: var(--marfil); text-decoration: none; transition: color 150ms ease-out; }
.pie__lista a:hover, .pie__lista a:focus-visible { color: var(--oro-cl); }

.pie__contacto li,
.pie__contacto a { display: flex; align-items: flex-start; gap: .6rem; }
.pie__contacto address { font-style: normal; font-size: .92rem; line-height: 1.5; }
.pie__contacto span { min-width: 0; overflow-wrap: anywhere; }
.icono-pie {
  flex: none; width: .95rem; height: .95rem; margin-top: .3rem;
  fill: none; stroke: var(--oro-cl); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Franja inferior: derechos a un lado, créditos al otro */
.pie__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 2rem;
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .82rem; color: var(--azul-pal);
}
.pie__copy { margin: 0; }
.pie__base a { color: var(--azul-pal); text-decoration: none; transition: color 150ms ease-out; }
.pie__base a:hover, .pie__base a:focus-visible { color: var(--oro-cl); }

/* Los dos enlaces de abajo van juntos, a la derecha del aviso de copyright */
.pie__enlaces {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem 1.5rem; margin: 0;
}

/* Acceso al panel: se ve, pero sin llamar la atención. Es para los párrocos,
   no para quien visita la web. */
.pie__panel {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .85rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  transition: color 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out;
}
.pie__panel:hover, .pie__panel:focus-visible {
  background: rgba(255, 255, 255, .09);
  border-color: var(--oro-cl);
}
.icono-panel {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Volver arriba: mismo tamaño y sitio que el de WhatsApp. Se oculta con
   «visibility», no con «display», para que la aparición sea suave y para que
   mientras no se ve tampoco se pueda alcanzar con el tabulador. */
.arriba {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  padding: 0;
  /* Dorado como el botón de reproducir los vídeos: es el único color que se
     distingue igual de bien sobre las secciones claras y sobre las azules. */
  color: #16283F;
  background: var(--oro-cl);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(5, 12, 22, .35);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms,
              background 150ms ease-out;
}
.arriba--visible { opacity: 1; visibility: visible; transform: none; }
.arriba:hover { background: var(--oro); }
.arriba--visible:hover, .arriba--visible:focus-visible { transform: translateY(-3px); }
.arriba svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Si el botón de WhatsApp está activo, este se sube para no taparlo */
.arriba--con-whatsapp { bottom: 84px; }

.whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: #2E6B4F;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(43, 39, 35, .22);
  transition: transform var(--transicion);
}
.whatsapp[hidden] { display: none; }
.whatsapp svg { width: 26px; height: 26px; fill: #fff; }
.whatsapp:hover { transform: translateY(-3px); }

/* == 14 · MOVIMIENTO Y ADAPTACIONES ==================================== */
/* Aparición al hacer scroll: se aplica a bloques completos, no a cada elemento */
[data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1);
}
[data-revelar].visible { opacity: 1; transform: none; }

/* --- Tableta ancha: el menu se compacta antes que partirse -------------
   Siete opciones en una linea necesitan unos 1.100px. Por debajo de eso se
   recorta lo prescindible («Nuestra», «Nuestros») y se aprieta el espaciado,
   en lugar de dejar que el menu salte a una segunda linea.
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-opt { display: none; }
  .navegacion ul { gap: .1rem; }
  .navegacion a { padding: .5rem .55rem .62rem; font-size: .85rem; }
  .marca__texto strong { font-size: 1rem; }
  .marca { gap: .55rem; }
}

/* --- Tablet ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .parroquia,
  .parrocos__cuerpo,
  .contacto { grid-template-columns: 1fr; }

  .labor { margin-top: 1rem; }
  /* en tablet la línea de tiempo ocupa dos filas: sin línea ni puntos, solo tarjetas */
  .linea-tiempo { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .75rem; }
  .linea-tiempo::before, .hito::before { display: none; }
  .hito { padding-top: 0; }
  .musica__cuerpo { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .pie__interior { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}

/* --- Tableta: ni compacto caben, asi que manda el boton de menu --------- */
@media (max-width: 900px) {
  .hamburguesa { display: flex; }

  .navegacion {
    position: fixed; inset: var(--alto-cabecera) 0 auto 0;
    /* opaco: el panel tapa el contenido y debe leerse sin estorbo */
    background: #182E4C;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 18px 36px rgba(15, 28, 46, .28);
    padding: .5rem clamp(.75rem, 4vw, 1.5rem) 1rem;
    display: none;
  }
  .navegacion--abierta { display: block; }
  .navegacion ul { display: block; }
  .navegacion li { border-bottom: 0; }
  /* en el panel sobra sitio: vuelven los nombres completos */
  .nav-opt { display: inline; }
  .navegacion a { padding: .85rem .8rem; font-size: 1rem; border-radius: 6px; }
  /* en vertical, la pastilla de acento se coloca a la izquierda */
  .navegacion a::after {
    left: 0; bottom: auto; top: 50%;
    width: 3px; height: 18px;
    transform: translateY(-50%) scaleY(0);
  }
  .navegacion a.activo::after { transform: translateY(-50%) scaleY(1); }
  .marca__texto strong { font-size: 1.06rem; }
  .marca { gap: .7rem; }
}

/* --- Móvil: la prioridad del proyecto --------------------------------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }

  .cabecera { --alto-cabecera: 68px; }
  .marca__texto strong { font-size: .98rem; }

  .hero { padding-top: 68px; }
  .hero__marco {
    min-height: clamp(480px, 76vh, 620px);
  }
  .hero__texto { padding-block-start: clamp(3rem, 9vh, 5rem); }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .boton { text-align: center; }

  /* Calendario de misas: tarjeta de hoy en dos filas y un día por línea */
  .misa-hoy { grid-template-columns: auto 1fr; gap: .9rem 1rem; padding: 1.3rem 1.25rem; }
  .misa-hoy__icono { width: 2.75rem; height: 2.75rem; }
  .misa-hoy__detalle { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .misa-hoy__cruz { right: .5rem; height: 130%; }
  .temporadas { display: flex; }
  .temporada { flex: 1 1 0; align-items: center; text-align: center; padding: .5rem .35rem; }
  .temporada__fechas { font-size: .68rem; }
  .temporada__nombre { font-size: .94rem; white-space: nowrap; }
  .semana__dias { grid-template-columns: 1fr; gap: .55rem; }
  .dia {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: 1rem; row-gap: .15rem;
    min-height: 0;
    padding: .8rem 1rem;
    border-top-width: 1px;
    border-left: 3px solid var(--oro);
  }
  .dia--domingo { border-left-color: var(--oro-cl); }
  .dia:hover { transform: none; }
  .dia__nombre { grid-column: 1; grid-row: 1; }
  .dia__horas { grid-column: 2; grid-row: 1 / span 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .dia__nota { grid-column: 1; grid-row: 2; }
  .dia--hoy { padding-top: 1.35rem; }
  .dia--hoy::before { top: .3rem; left: 1rem; }

  /* Historia del templo: la línea de tiempo pasa a vertical */
  .linea-tiempo { grid-template-columns: 1fr; gap: .7rem; }
  .linea-tiempo::before, .hito::before { display: block; }
  .linea-tiempo::before { left: .45rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .hito { padding-top: 0; padding-left: 1.75rem; }
  .hito::before { top: 1.2rem; left: 0; }
  .parroquia__fichas { grid-template-columns: 1fr; }

  .musica__cuerpo { grid-template-columns: 1fr; }
  .musica__marco { max-width: 280px; margin-inline: auto; }
  .video__disc { width: 3.5rem; height: 3.5rem; }

  .accesos { grid-template-columns: 1fr; }
  .acceso {
    padding: 1.5rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--piedra-c);
  }
  .acceso p { max-width: 34ch; }
  .acceso:last-child { border-bottom: 0; }

  .parroquia__galeria img { aspect-ratio: 16 / 10; }

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

  .labor__lista { columns: 1; }

  .galeria { grid-template-columns: 1fr 1fr; gap: 10px; }
  .galeria__pieza figcaption { font-size: .74rem; }

  .visor { padding: 1rem; }
  .visor__figura img { max-height: 64vh; }
  .visor__nav { position: absolute; bottom: 1.25rem; }
  .visor__nav--previo { left: calc(50% - 58px); }
  .visor__nav--siguiente { right: calc(50% - 58px); }

  .datos--contacto { grid-template-columns: 1fr; }
  .datos--contacto dt { border-bottom: 0; padding-bottom: 0; }
  /* en móvil no hay hueco a la izquierda: el icono va delante del dato */
  .dato-icono { display: flex; align-items: center; gap: .55rem; }
  .dato-icono .enlace { min-width: 0; }
  .icono-dato { position: static; flex: none; }

  .pie__interior { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .pie__marca, .pie__columna:last-child { grid-column: 1 / -1; }
  .pie__base { flex-direction: column; align-items: flex-start; }
}

/* --- Movil estrecho ----------------------------------------------------
   El rotulo ya no se parte en varias lineas, asi que hay que hacerle sitio
   al boton: se aprieta la tipografia y el boton se queda solo con el icono
   (mantiene su nombre accesible en el aria-label).
   ---------------------------------------------------------------------- */
@media (max-width: 430px) {
  .marca__texto strong { font-size: .9rem; }
  .marca__texto span { font-size: .68rem; }
  .marca { gap: .5rem; padding: .55rem .5rem; margin-left: -.5rem; }
  .hamburguesa__texto { display: none; }
  .hamburguesa { padding: .55rem .5rem; }
}

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

/* --- Pantallas grandes ------------------------------------------------ */
@media (min-width: 1600px) {
  :root { --ancho: 1320px; }
}

/* --- Menos movimiento -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .hero__imagen { transform: none; }
}

/* --- Impresión --------------------------------------------------------- */
@media print {
  .cabecera, .whatsapp, .arriba, .filtros, .visor, .hero__acciones { display: none !important; }
  body { background: #fff; }
  [data-revelar] { opacity: 1; transform: none; }
  .seccion { padding-block: 1.5rem; break-inside: avoid; }
}