/* Sitio publico de la parroquia.
   Traduccion a clases del prototipo guideliness/Parroquia San Juan Bautista.html,
   que traia todo en atributos style inline.

   Sin media queries, como el prototipo: la retícula es
   repeat(auto-fit, minmax(320px, 1fr)) y la tipografia usa clamp(). */

/* Paleta, tipografia y medidas de la parroquia.
   Unico hogar de los tokens: menu.css, paginas.css, auth.css y sitio.css los
   importan y no vuelven a declarar ninguno.

   Los valores salen de los dos prototipos de guideliness/, tomados uno por uno
   de los atributos style inline. El panel y el sitio comparten paleta a
   proposito: es lo que hacen los prototipos. */

:root {
  /* --- Paleta --- */
  --burdeos: #5c1020;         /* titulos del panel, boton oscuro, seccion oscura */
  --burdeos-claro: #7a1a2c;
  --acento: #a81e36;          /* boton primario, eyebrows, enlaces */
  --acento-fuerte: #8c1729;
  --crema: #fbf7f3;           /* fondo general */
  --crema-alt: #f3ebe5;       /* seccion alterna y cabecera de tabla */
  --rosa-claro: #f6ede8;      /* fila seleccionada, texto sobre burdeos */
  --rosa: #c58f97;
  --rosa-tenue: #c9b3ae;      /* borde del boton secundario */
  --tinta: #2a1a1d;
  --tenue: #6b5a5c;
  --tenue-2: #8a7375;
  --tenue-3: #7a6265;         /* textos en cursiva de apoyo */
  --borde: #e6dad3;           /* borde de tarjetas y paneles */
  --borde-input: #dccfc9;
  --separador-fila: #f0e6e0;  /* linea entre filas de una lista */
  --fila-hover: #f9f2ed;
  --pie: #3e0b17;             /* pie del sitio y barra lateral del panel */
  --pie-texto: #ebd9d5;
  --pie-tenue: #a88389;
  --aviso-fondo: #f3e7e4;
  --verde-ok: #4a7c59;
  --blanco: #ffffff;

  /* --- Nombres heredados que consumen los CSS copiados de cbz-report --- */
  --verde: var(--burdeos);
  --verde-hover: var(--burdeos-claro);
  --fondo: var(--crema);
  --superficie: var(--blanco);
  --texto: var(--tinta);
  --texto-label: var(--tenue);
  --texto-sec: var(--tenue);
  --texto-ter: var(--tenue-3);
  --sobre-verde: var(--rosa-claro);
  --sobre-verde-fuerte: var(--crema-alt);
  --error-fondo: var(--aviso-fondo);
  --error-borde: #eec9cf;
  --error-icono: var(--acento);
  --error-texto: var(--burdeos);
  --ok-fondo: #eef4f0;
  --ok-borde: #cfdfd5;
  --separador: var(--separador-fila);
  --peligro: var(--acento);
  --peligro-hover: var(--acento-fuerte);
  --hover-claro: var(--fila-hover);
  --estrella: #d9a441;
  --placeholder: #a89598;

  /* --- Medidas del prototipo --- */
  --rail-ancho: 264px;
  --rail-plegado: 76px;
  --ancho: 1120px;            /* contenedor del sitio publico */
  --panel-x: 40px;            /* margen lateral del panel */
  --radio: 2px;               /* el prototipo usa esquinas casi rectas */

  /* --- Tipografia --- */
  --titulos: "Marcellus", Georgia, serif;
  --interfaz: "Lora", Georgia, serif;
  --texto-fuente: "Lora", Georgia, serif;

  /* --- Estados de las solicitudes (los repite config/solicitudes.js) --- */
  --estado-nueva: #a81e36;
  --estado-contactada: #c58f97;
  --estado-confirmada: #4a7c59;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto-fuente);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--acento);
  text-decoration: none;
}

a:hover {
  color: var(--burdeos);
  text-decoration: underline;
}

input,
select,
textarea {
  font-family: var(--texto-fuente);
}

.sitio {
  min-height: 100vh;
  background: var(--crema);
}

/* --- Piezas comunes --- */

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 96px 32px;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px;
  align-items: start;
}

.rejilla--centrada {
  align-items: center;
  gap: 56px;
}

.eyebrow {
  margin: 0 0 16px;
  font-family: var(--titulos);
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--acento);
}

.titulo {
  margin: 0 0 24px;
  font-family: var(--titulos);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--tinta);
}

.intro {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--tenue);
  max-width: 60ch;
  text-wrap: pretty;
}

.pie-nota {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--tenue-2);
  font-style: italic;
}

.boton {
  display: inline-block;
  padding: 15px 30px;
  background: var(--acento);
  color: var(--crema);
  font-family: var(--titulos);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.boton:hover {
  background: var(--burdeos);
  color: var(--crema);
  text-decoration: none;
}

.boton--linea {
  background: transparent;
  border: 1px solid var(--rosa-tenue);
  color: var(--burdeos);
}

.boton--linea:hover {
  background: transparent;
  border-color: var(--acento);
  color: var(--acento);
}

.boton--claro {
  background: var(--rosa-claro);
  color: var(--burdeos);
}

.boton--claro:hover {
  background: var(--rosa);
  color: var(--pie);
}

/* --- Secciones sobre fondo oscuro --- */

.oscuro {
  background: var(--burdeos);
  color: var(--rosa-claro);
}

/* Las dos secciones oscuras del prototipo respiran un poco menos */
.oscuro .contenedor {
  padding: 92px 32px;
}

.oscuro .eyebrow,
.oscuro .pie-nota {
  color: var(--rosa);
}

.oscuro .titulo {
  color: var(--rosa-claro);
}

.alterno {
  background: var(--crema-alt);
}

/* --- Encabezado --- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 247, 243, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.marca:hover {
  text-decoration: none;
}

.marca__escudo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.marca__nombre {
  font-family: var(--titulos);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burdeos);
  line-height: 1.3;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.nav a {
  color: var(--tinta);
}

.nav a:hover {
  color: var(--acento);
}

/* La marca la pone sitio.js; sin JS el nav funciona igual, solo sin resaltado */
.nav a.is-activo {
  color: var(--acento);
  border-bottom: 1px solid var(--acento);
}

/* --- Portada --- */

.portada {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 88px 32px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px;
  align-items: center;
}

.portada__titulo {
  margin: 0 0 26px;
  font-family: var(--titulos);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.06;
  font-weight: 400;
  color: var(--tinta);
  text-wrap: balance;
}

.portada__lema {
  margin: 0 0 34px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--tenue);
  max-width: 44ch;
  text-wrap: pretty;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.portada__medallon {
  display: flex;
  justify-content: center;
}

.portada__medallon > div {
  width: min(340px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px rgba(92, 16, 32, 0.1);
}

.portada__medallon img {
  width: 72%;
  height: 72%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/* --- Horarios de misa --- */

/* El H2 de horarios es un punto mayor que el del resto de las secciones */
.titulo--horarios {
  font-size: clamp(32px, 4.5vw, 44px);
  margin-bottom: 56px;
}

.horarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(197, 143, 151, 0.35);
  border: 1px solid rgba(197, 143, 151, 0.35);
}

.horarios__bloque {
  background: var(--burdeos);
  padding: 40px 36px;
}

.horarios__dia {
  margin: 0 0 24px;
  font-family: var(--titulos);
  font-size: 23px;
  font-weight: 400;
  color: var(--rosa-claro);
}

.horarios__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 21px;
  color: var(--pie-texto);
}

/* Con muchas misas la columna se hace larguisima: a partir de cuatro, dos
   columnas, que es lo que hace el prototipo con los domingos. */
.horarios__lista--doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.horarios__vacio {
  margin: 0;
  font-size: 16px;
  color: var(--rosa);
  font-style: italic;
}

.especiales {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(197, 143, 151, 0.35);
}

.especiales__titulo {
  margin: 0 0 26px;
  font-family: var(--titulos);
  font-size: 26px;
  font-weight: 400;
  color: var(--rosa-claro);
}

.especiales__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.especiales__tarjeta {
  background: rgba(251, 247, 243, 0.07);
  border: 1px solid rgba(197, 143, 151, 0.35);
  padding: 28px 26px;
}

.especiales__cuando {
  margin: 0 0 10px;
  font-family: var(--titulos);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rosa);
}

.especiales__que {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pie-texto);
}

/* --- Pasos numerados --- */

.pasos {
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  color: var(--tinta);
  border-top: 1px solid var(--borde);
}

.pasos li {
  display: flex;
  gap: 14px;
}

.pasos__numero {
  color: var(--rosa);
  font-family: var(--titulos);
}

/* --- Formularios de solicitud --- */

.tarjeta-form {
  background: #ffffff;
  border: 1px solid var(--borde);
  padding: 40px;
}

.tarjeta-form__titulo {
  margin: 0 0 6px;
  font-family: var(--titulos);
  font-size: 24px;
  font-weight: 400;
  color: var(--burdeos);
}

.tarjeta-form__bajada {
  margin: 0 0 30px;
  font-size: 14px;
  color: var(--tenue-2);
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Dos columnas de 0 no caben en un telefono: por debajo de 560px, una */
@media (max-width: 560px) {
  .form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.campo--ancho {
  grid-column: 1 / -1;
}

.form__nota {
  margin: -6px 0 0;
  font-size: 13px;
  color: var(--tenue-2);
  font-style: italic;
}

.campo__opcional {
  text-transform: none;
  letter-spacing: normal;
  color: var(--tenue-2);
  font-style: italic;
}

.campo input {
  padding: 12px 14px;
  border: 1px solid var(--borde-input);
  background: var(--crema);
  font-size: 16px;
  color: var(--tinta);
  border-radius: 2px;
  text-transform: none;
  letter-spacing: normal;
}

.campo input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.form .boton {
  grid-column: 1 / -1;
}

/* El honeypot: fuera de la vista pero sin display:none, que algunos robots
   detectan. No lleva label ni tabindex para que nadie lo alcance tecleando. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: #f3e7e4;
  border-left: 3px solid var(--acento);
  font-size: 15px;
  color: var(--burdeos);
}

.aviso--error {
  background: var(--error-fondo);
  border-left-color: var(--error-icono);
  color: var(--error-texto);
}

/* --- Tarjetas de notaria --- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.tarjeta {
  background: #ffffff;
  border: 1px solid var(--borde);
  border-top: 3px solid var(--acento);
  padding: 30px 28px;
}

.tarjeta--pendiente {
  background: var(--crema-alt);
  border-top: 1px solid var(--borde);
}

.tarjeta__titulo {
  margin: 0 0 10px;
  font-family: var(--titulos);
  font-size: 21px;
  font-weight: 400;
  color: var(--burdeos);
}

.tarjeta__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tenue);
}

.tarjeta__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: var(--tenue);
}

/* --- Grupos --- */

.grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.grupo {
  background: #ffffff;
  border: 1px solid var(--borde);
  padding: 26px 24px;
}

.grupo__nombre {
  margin: 0 0 8px;
  font-family: var(--titulos);
  font-size: 20px;
  font-weight: 400;
  color: var(--burdeos);
}

.grupo__dato {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tenue);
}

/* --- Ubicacion --- */

/* Las dos sedes: el templo y el Centro Pastoral, separadas por un filete */
.sedes {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}

.sede + .sede {
  border-top: 1px solid rgba(197, 143, 151, 0.3);
  padding-top: 22px;
}

.direccion {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.5;
  font-family: var(--titulos);
}

.direccion--secundaria {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--pie-texto);
  font-family: var(--texto-fuente);
}

/* El boton de cada sede es un punto mas chico que el de la portada */
.boton--chico {
  padding: 14px 26px;
  font-size: 13px;
}

.croquis {
  background: var(--crema-alt);
  padding: 12px;
  border: 1px solid rgba(197, 143, 151, 0.4);
}

.croquis svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Enlaces --- */

.enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}

.enlace {
  background: var(--crema);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}

.enlace:hover {
  background: var(--crema-alt);
  text-decoration: none;
}

.enlace__nombre {
  font-family: var(--titulos);
  font-size: 21px;
  color: var(--burdeos);
}

.enlace__descripcion {
  font-size: 15px;
  color: var(--tenue);
}

/* --- Foto de la fiesta --- */

/* La foto de la parroquia es vertical (250x322). Con una caja de alto fijo y
   object-fit: cover se recortaba por arriba y por abajo, asi que se deja a su
   proporcion real y se centra en la columna. El tope de 300px evita ampliarla
   mucho por encima de sus 250 px nativos, que la dejarian borrosa. */
.foto {
  display: flex;
  justify-content: center;
}

.foto img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  border: 1px solid var(--borde);
}

/* --- Pie --- */

.pie {
  background: var(--pie);
  color: var(--pie-texto);
}

.pie__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 48px;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.pie__marca img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.pie__marca span {
  font-family: var(--titulos);
  font-size: 19px;
  line-height: 1.3;
  color: var(--rosa-claro);
}

.pie__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #c9a9ae;
}

.pie__titulo {
  margin: 0 0 16px;
  font-family: var(--titulos);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rosa);
}

.pie__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.pie__nav a,
.pie__texto a {
  color: var(--pie-texto);
}

.pie__cierre {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 32px 40px;
}

.pie__cierre > div {
  padding-top: 24px;
  border-top: 1px solid rgba(197, 143, 151, 0.25);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pie__cierre p {
  margin: 0;
  font-size: 13px;
  color: var(--pie-tenue);
}

.pie__cierre a {
  font-size: 13px;
  color: var(--pie-tenue);
}