/*
Theme Name: Alianza de Corazones
Description: Tema de alianzacorazones.org. Hijo de Twenty Twenty-Five: solo trae los colores, las fuentes, la cabecera, el pie y el pase de fotos. Se edita en el repositorio Servidores (hetzner-falkenstein/wordpress/alianzacorazones.org/themes/alianza) y se sube; no se edita aquí.
Template: twentytwentyfive
Version: 1.0
Text Domain: alianza
*/

/* Los colores y las fuentes están en theme.json. Aquí va solo lo que theme.json no sabe
   hacer. Las clases (caja, programa, tarjeta, pase…) se ponen en el editor de WordPress,
   en «Avanzado → Clases CSS adicionales» de cada bloque. */

/* ---------- Cabecera ---------- */
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
.cabecera { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.cabecera .wp-block-site-title { margin: 0; font-size: 1.5rem; }
.cabecera .wp-block-site-title a { color: #fff; text-decoration: none; }
.cabecera .wp-block-site-title a::before { content: "♥"; color: var(--wp--preset--color--accent-1); margin-right: .45em; }
.cabecera .wp-block-navigation { text-transform: uppercase; font-size: .9rem; letter-spacing: .02em; }
.cabecera .wp-block-navigation a:hover,
.cabecera .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--accent-1); text-decoration: none; }

/* ---------- Pase de fotos de la portada ----------
   Un grupo «pase» con un grupo «diapositiva» por foto: la imagen, un párrafo «etiqueta»
   (con su color: etiqueta-magenta, etiqueta-verde o etiqueta-ambar) y un párrafo
   «subtitulo». En el editor de WordPress se ven una debajo de otra; en la web, de una en
   una. Sin JavaScript se queda la primera; assets/pase.js las va cambiando («activa») y
   pone las flechas. La transición se activa después («animado») para que al cargar no
   se vea fundirse nada. */
.pase { position: relative; overflow: hidden; height: clamp(220px, 27vw, 460px); margin-top: 0; background: var(--wp--preset--color--accent-3); }
.pase .diapositiva { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.pase:not(.con-js) .diapositiva:first-child,
.pase .diapositiva.activa { opacity: 1; visibility: visible; }
.pase.animado .diapositiva { transition: opacity .8s ease, visibility .8s; }
.pase .diapositiva .wp-block-image { margin: 0; height: 100%; }
.pase .diapositiva img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pase .diapositiva .etiqueta,
.pase .diapositiva .subtitulo { position: absolute; left: 55%; margin: 0; color: #fff; font-weight: 300; line-height: 1.25; }
.pase .diapositiva .etiqueta { bottom: 50%; padding: .1em .45em; font-size: clamp(1.15rem, 2.2vw, 2rem); }
.pase .diapositiva .subtitulo { top: calc(50% + .6rem); left: calc(55% + 4.5vw); font-size: clamp(.9rem, 1.3vw, 1.2rem); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.etiqueta-magenta { background: var(--wp--preset--color--magenta); }
.etiqueta-verde   { background: var(--wp--preset--color--verde); }
.etiqueta-ambar   { background: var(--wp--preset--color--ambar); }

.pase .flecha { position: absolute; top: 50%; z-index: 2; width: 3rem; height: 4rem; margin-top: -2rem; padding: 0; border: 0; background: none; cursor: pointer; opacity: .85; }
.pase .flecha:hover, .pase .flecha:focus-visible { opacity: 1; }
.pase .flecha::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1.9rem; height: 1.9rem; border: solid #fff; border-width: 0 0 2px 2px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.pase .flecha-anterior { left: 0; }
.pase .flecha-anterior::before { transform: translate(-25%, -50%) rotate(45deg); }
.pase .flecha-siguiente { right: 0; }
.pase .flecha-siguiente::before { transform: translate(-75%, -50%) rotate(-135deg); }

@media (max-width: 700px) {
	.pase .diapositiva .etiqueta { left: 1rem; bottom: 3.2rem; }
	.pase .diapositiva .subtitulo { left: 1rem; top: auto; bottom: 1.2rem; right: 1rem; }
	.pase .flecha { display: none; }
}

/* ---------- Portada ---------- */
.caja { padding: 1.4rem 1.6rem 1.1rem; border-radius: 4px; background: var(--wp--preset--color--accent-2); }
.caja { margin-top: 1.4rem; }
.caja h2 { margin: 0 0 .55rem; }
.caja h3 { margin: 0 0 1rem; }

.programa { align-items: center; }
.programa { margin-top: 2rem; }
.programa img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; border-radius: 4px; }
.wp-block-separator { border: 0; border-top: 1px solid #8d8c88; opacity: 1; }
.wp-block-post-content > .wp-block-separator { margin-top: 2.2rem; margin-bottom: 2.2rem; }

.tarjeta { padding: 2.4rem 1.6rem 1.8rem; background: var(--wp--preset--color--accent-2); text-align: center; }
.tarjeta .wp-block-image { margin: 0 auto 1.2rem; }
.tarjeta .wp-block-image img { width: 230px; max-width: 100%; height: auto; }
.tarjeta h3 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.tarjeta p { margin: 0; font-size: .92rem; }

.llamada { max-width: 27rem; margin-left: auto !important; margin-right: auto !important; }
.wp-block-button__link { box-shadow: 0 3px 0 #b1203a; }
.wp-block-button__link:hover { filter: brightness(1.08); }

/* ---------- Páginas interiores ---------- */
.wp-block-post-title { margin-bottom: 1.5rem; }
.album.wp-block-gallery.has-nested-images { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 2.6rem; }
.album.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: auto; margin: 0; }
.album.wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 700px) {
	.album.wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); }
}
.mapa iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 4px; }

/* ---------- Pie ---------- */
.pie { margin-top: 3.5rem; padding-top: 3rem; padding-bottom: 3rem; font-size: .95rem; }
.pie h2 { margin: 0 0 1.2rem; color: #fff; font-size: 1.2rem; text-transform: uppercase; }
.pie p { margin: 0; color: #a9afbb; }
.pie strong { color: #c9cdd6; }
.pie a { color: #a9afbb; text-decoration: none; }
.pie a:hover { color: #fff; }
.menu-pie { margin: 0; padding: 0; list-style: none; }
.menu-pie li { padding: .65rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.menu-pie li:first-child { padding-top: 0; }
.menu-pie li:last-child { border-bottom: 0; }
.menu-pie li::before { content: "›"; display: inline-block; width: 1.05rem; height: 1.05rem; margin-right: .6rem; border: 1px solid var(--wp--preset--color--accent-1); border-radius: 50%; color: var(--wp--preset--color--accent-1); font-size: .9rem; line-height: .95rem; text-align: center; }
.miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 21rem; }
.miniaturas .wp-block-image { margin: 0; }
.miniaturas img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.miniaturas a:hover img { filter: brightness(1.15); }
.pie-legal { margin-top: 0; padding-top: 1.1rem; padding-bottom: 1.1rem; font-size: .85rem; }
.pie-legal p, .pie-legal a { color: #8f96a3; text-decoration: none; }
.pie-legal a:hover { color: #fff; }