/* La Era Puebla · hoja de estilos compartida */
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --marino: #0F1D35;
  --marino-2: #1A2B4A;
  --ocre: #A8692C;
  --ocre-claro: #CC8F4C;
  --ocre-oscuro: #874F1E;
  --tierra: #5A371B;
  --crema: #F1E4D3;
  --papel: #FBF6EE;
  --tinta: #1E2433;
  --tinta-suave: #4A5163;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 72rem;
  --texto: 38rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ocre-oscuro); }
:focus-visible { outline: 3px solid var(--marino); outline-offset: 3px; border-radius: 2px; }
.fondo-oscuro :focus-visible, .salto:focus-visible { outline-color: var(--ocre-claro); }
.fondo-oscuro a:hover { color: var(--ocre-claro); }
.salto { position: absolute; left: -999px; top: 0; background: var(--marino); color: var(--crema); padding: .75rem 1rem; z-index: 10; font-family: var(--sans); }
.salto:focus { left: 1rem; top: 1rem; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 800; line-height: 1.1; margin: 0 0 .6em; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h3 { font-size: 1.5rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: var(--texto); }
.entradilla { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.5; }

/* Cabecera */
.cabecera { background: var(--marino); color: var(--crema); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.cabecera .marca img { height: 2.6rem; width: auto; }
.nav { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); font-family: var(--sans); font-weight: 500; font-size: .95rem; flex-wrap: wrap; justify-content: flex-end; }
.nav a { text-decoration: none; color: var(--crema); padding-block: .35rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ocre-claro); border-color: var(--ocre-claro); }
@media (max-width: 52rem) {
  .cabecera .contenedor { flex-wrap: wrap; row-gap: .25rem; }
  .nav { gap: .25rem 1rem; font-size: .9rem; justify-content: flex-start; }
}

/* El arco: la forma de la portada de la iglesia, repetida en todas las fotos */
.arco { border-radius: 50% 50% 0 0 / 34% 34% 0 0; overflow: hidden; }
.arco img { width: 100%; height: 100%; object-fit: cover; }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 600; font-size: 1rem; text-decoration: none; padding: .8rem 1.3rem; border-radius: 999px; background: var(--ocre-oscuro); color: #fff; border: 2px solid var(--ocre-oscuro); }
.boton:hover { background: var(--tierra); border-color: var(--tierra); color: #fff; }
.boton.secundario { background: transparent; color: inherit; border-color: currentColor; }
.boton.secundario:hover { color: var(--ocre-oscuro); border-color: var(--ocre-oscuro); }
.fondo-oscuro .boton.secundario:hover { color: var(--ocre-claro); border-color: var(--ocre-claro); }

/* Pie */
.pie { background: var(--marino); color: var(--crema); font-family: var(--sans); font-size: .95rem; padding-block: 3rem 2rem; }
.pie .contenedor { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.pie img { height: 3.2rem; width: auto; }
.pie a { color: var(--crema); }
.pie a:hover { color: var(--ocre-claro); }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid rgba(241,228,211,.2); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: rgba(241,228,211,.75); }

/* Páginas legales */
.legal-pagina { padding-block: 3rem 4rem; }
.legal-pagina h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.legal-pagina h2 { font-size: 1.4rem; margin-top: 2rem; }
.lista-limpia { list-style: none; padding: 0; margin: 0; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.error-pagina { padding-block: clamp(4rem, 10vw, 8rem); text-align: center; }
.error-pagina p { margin-inline: auto; }
.pendiente { background: #FFF1C9; padding: 0 .3em; border-radius: 3px; }