/* Estilos base de la web de IBIL. Móvil primero. */

/* Fuentes autoalojadas (licencia SIL OFL 1.1) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: optional; src: url("/fuentes/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: optional; src: url("/fuentes/cormorant-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: optional; src: url("/fuentes/cormorant-garamond-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: optional; src: url("/fuentes/public-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: optional; src: url("/fuentes/public-sans-600.woff2") format("woff2"); }

/* Reinicio mínimo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--carbon);
  background: var(--arena-clara);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: var(--azul-ibil); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--azul); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.hero, .seccion--azul, .cabecera-pagina--foto, .pie { --foco: var(--arena); }
html, body { overflow-x: clip; }
h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Tipografía */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; line-height: 1.08; color: var(--azul); letter-spacing: -0.005em; }
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); line-height: 1.2; }
h4, .h4 { font-family: var(--sans); font-weight: 600; font-size: var(--t-m); line-height: 1.3; color: var(--azul); letter-spacing: 0; }
.texto { max-width: var(--ancho-texto); }
.texto p + p { margin-top: 1em; }
.grande { font-size: var(--t-l); line-height: 1.55; }
.secundario { color: var(--pizarra); font-size: var(--t-s); }
.etiqueta { font-family: var(--sans); font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pizarra); }

/* Versículo: Cormorant cursiva, referencia en granate */
.versiculo { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--t-2xl); line-height: 1.3; color: var(--azul); max-width: 30ch; }
.versiculo cite { display: block; margin-top: var(--s-4); font-family: var(--sans); font-style: normal; font-weight: 600; font-size: var(--t-s); color: var(--granate); }

/* Contenedor y secciones */
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--s-8); }
.seccion--arena { background: var(--arena); }
.seccion--blanco { background: var(--blanco); }
.seccion--azul { background: var(--azul); color: var(--arena); }
.seccion--azul h2, .seccion--azul h3, .seccion--azul .versiculo { color: var(--arena); }
.seccion--azul .versiculo cite { color: var(--rosa-palido); }
.seccion--azul a { color: var(--arena); }
.seccion--azul .secundario, .seccion--azul .etiqueta { color: var(--azul-claro); }
@media (min-width: 48rem) { .seccion { padding-block: var(--s-9); } }
.seccion > .contenedor > h2 { margin-bottom: var(--s-6); }

/* Botones (radio 0, alto 52, sin sombra: manual de marca) */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--alto-boton); padding: 0 var(--s-5);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-m); line-height: 1; text-decoration: none;
  border: 1.5px solid var(--azul); border-radius: 0; cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.boton--primario { background: var(--azul); color: var(--blanco); }
.boton--primario:hover { background: var(--azul-ibil); border-color: var(--azul-ibil); color: var(--blanco); }
.boton--secundario { background: transparent; color: var(--azul); border-color: var(--azul-ibil); }
.boton--secundario:hover { background: var(--arena); color: var(--azul); }
.seccion--azul .boton--secundario { color: var(--arena); border-color: var(--azul-claro); }
.seccion--azul .boton--secundario:hover { background: rgba(255,255,255,0.08); }
.boton--claro { background: var(--arena); color: var(--azul); border-color: var(--arena); }
.boton--claro:hover { background: var(--blanco); border-color: var(--blanco); color: var(--azul); }
.seccion--azul .boton--claro, .seccion--azul .boton--claro:hover { color: var(--azul); }
.botones { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.boton { white-space: nowrap; }
.boton:active { transform: translateY(1px); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.boton--icono svg { width: 1.35rem; height: 1.35rem; flex: none; }
.boton--icono { gap: var(--s-3); }

/* Tarjetas: blanco, borde hueso, radio 0, sin sombra */
.tarjetas { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .tarjetas { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.tarjeta { background: var(--blanco); border: 1px solid var(--hueso); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.tarjeta h3 { font-size: var(--t-xl); }
.seccion--azul .tarjeta { background: transparent; border-color: var(--linea-sobre-azul); }
.seccion--azul .tarjeta h3 { color: var(--arena); }

/* Horario: lista definida, hora en serif grande */
.horario { display: grid; gap: 0; border-top: 1px solid var(--hueso); }
.horario > li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--hueso); align-items: baseline; }
.horario time { font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); color: var(--azul); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.horario p { color: var(--pizarra); font-size: var(--t-s); margin-top: var(--s-1); }

/* Franja de datos: la hora del culto como elemento memorable */
.franja { background: var(--arena); border-top: 1px solid var(--hueso); border-bottom: 1px solid var(--hueso); }
.franja .contenedor { display: grid; gap: var(--s-5); padding-block: var(--s-6); align-items: end; }
.franja__hora { font-family: var(--serif); font-weight: 500; font-size: var(--t-giant); line-height: 0.9; color: var(--azul); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.franja__hora small { display: block; font-size: var(--t-l); font-family: var(--sans); font-weight: 400; letter-spacing: 0; color: var(--pizarra); margin-bottom: var(--s-2); }
.franja__lugar { font-size: var(--t-l); line-height: 1.4; }
.franja__lugar strong { display: block; font-weight: 600; color: var(--azul); }
@media (min-width: 48rem) { .franja .contenedor { grid-template-columns: auto 1fr auto; gap: var(--s-7); } }

/* Cabecera */
.cabecera { background: var(--arena-clara); border-bottom: 1px solid var(--hueso); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.5rem; }
.cabecera__logo img { height: 2.75rem; width: auto; }
.menu { display: none; }
.cabecera .boton { min-height: 2.75rem; padding-inline: var(--s-4); font-size: var(--t-s); white-space: nowrap; flex: none; }
@media (min-width: 64rem) and (max-width: 76rem) { .menu { gap: var(--s-4); } .menu a { font-size: var(--t-xs); } .cabecera__logo img { height: 2.75rem; } }
@media (min-width: 64rem) {
  .cabecera .contenedor { min-height: 5.5rem; }
  .cabecera__logo img { height: 3.25rem; }
  .menu { display: flex; gap: var(--s-5); align-items: center; }
  .menu a { color: var(--azul); text-decoration: none; font-weight: 600; font-size: var(--t-s); padding: var(--s-2) 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--azul); }
  .menu a.boton { color: var(--blanco); padding: 0 var(--s-4); border: 1.5px solid var(--azul); }
  .menu a.boton:hover { background: var(--azul-ibil); border-color: var(--azul-ibil); }
}
.menu-boton { display: inline-flex; align-items: center; gap: var(--s-2); background: none; border: 1.5px solid var(--azul); color: var(--azul); font: 600 var(--t-s) var(--sans); min-height: 2.75rem; padding: 0 var(--s-4); cursor: pointer; }
@media (min-width: 64rem) { .menu-boton { display: none; } }

/* Hero con foto real y velo azul */
.hero { position: relative; background: var(--azul); color: var(--blanco); isolation: isolate; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--velo-1) 0%, var(--velo-2) 100%); z-index: -1; }
.hero .contenedor { padding-block: var(--s-7) var(--s-8); min-height: min(70vh, 36rem); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-5); }
.hero h1 { color: var(--blanco); max-width: 14ch; }
.hero h1 em { font-style: italic; font-weight: 500; }
.hero p { max-width: 36rem; font-size: var(--t-l); line-height: 1.5; }
.hero .hero__datos { font-size: var(--t-m); color: var(--azul-claro); }
.hero .hero__datos strong { color: var(--blanco); font-weight: 600; }
.enlace-claro { color: var(--blanco); font-weight: 600; align-self: center; text-underline-offset: 0.2em; }
.enlace-claro:hover { color: var(--arena); }
.hero .boton--primario { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }
.hero .boton--primario:hover { background: var(--arena); border-color: var(--arena); }
.hero .boton--secundario { color: var(--blanco); border-color: rgba(255,255,255,0.7); }
.hero .boton--secundario:hover { background: rgba(255,255,255,0.12); color: var(--blanco); }
@media (min-width: 48rem) { .hero .contenedor { min-height: min(78vh, 40rem); padding-block: var(--s-8) var(--s-9); } }

/* Foto con pie */
.figura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.figura figcaption { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--pizarra); }
.figura--vertical img { aspect-ratio: 4 / 5; }

/* Rejilla dos columnas texto + foto */
.dos { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 48rem) { .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } .dos--invertida > :first-child { order: 2; } }

/* Pie */
.pie { background: var(--azul); color: var(--azul-claro); font-size: var(--t-s); }
.pie .contenedor { padding-block: var(--s-8) var(--s-7); display: grid; gap: var(--s-6); }
.pie__logo img { width: 7rem; }
.pie .h4 { color: var(--arena); margin-bottom: var(--s-3); }
.pie a { color: var(--arena); }
.pie address { font-style: normal; }
.pie ul li + li { margin-top: var(--s-2); }
.pie__legal { border-top: 1px solid var(--linea-sobre-azul); padding-top: var(--s-4); font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
@media (min-width: 48rem) { .pie .contenedor { grid-template-columns: auto 1fr 1fr 1fr; } .pie__legal { grid-column: 1 / -1; } }

/* Barra fija inferior en móvil */
.barra-movil { position: fixed; inset-inline: 0; bottom: 0; height: var(--barra-movil); background: var(--blanco); border-top: 1px solid var(--hueso); display: grid; grid-template-columns: 1fr 1fr; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.barra-movil a { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-weight: 600; font-size: var(--t-s); color: var(--azul); text-decoration: none; }
.barra-movil a + a { border-left: 1px solid var(--hueso); }
.barra-movil svg { width: 1.25rem; height: 1.25rem; }
body:has(.barra-movil) { padding-bottom: var(--barra-movil); }
@media (min-width: 64rem) { .barra-movil { display: none; } body:has(.barra-movil) { padding-bottom: 0; } }

/* Enlace para saltar al contenido */
.saltar { position: absolute; left: -999px; top: 0; background: var(--azul); color: var(--blanco); padding: var(--s-3) var(--s-4); z-index: 100; }
.saltar:focus { left: var(--s-4); }

/* Muestra de estilo (solo en /estilo/) */
.muestra { border: 1px dashed var(--piedra); padding: var(--s-5); margin-top: var(--s-5); }
.muestra__titulo { font-family: var(--sans); font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pizarra); margin-bottom: var(--s-4); }
.paleta { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--s-3); }
.paleta div { aspect-ratio: 1; display: flex; align-items: flex-end; padding: var(--s-2); font-size: var(--t-xs); border: 1px solid var(--hueso); }