/*
Theme Name: Abriendo Camino Bloques
Theme URI: https://abriendocaminofilm.es/
Author: Media PS Producción Audiovisual
Author URI: https://www.mediaps.es/
Description: Tema de bloques para la web de la serie documental Abriendo Camino. Editable desde el editor de WordPress (Gutenberg), sin Elementor.
Version: 1.0.11
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abriendo-camino-bloques
*/

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:root { --ac-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
:where(.wp-site-blocks) [id] { scroll-margin-top: 90px; }
img { height: auto; }

/* Antetítulo (estilo de párrafo) */
.is-style-antetitulo { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 14px !important; color: var(--wp--preset--color--verde); margin-bottom: 0; }
.has-azul-background-color .is-style-antetitulo, .wp-block-cover .is-style-antetitulo { color: var(--wp--preset--color--crema-verde); }

/* Tarjeta (estilo de grupo) */
.is-style-tarjeta { background: var(--wp--preset--color--blanco); border-radius: 6px; overflow: hidden; }
.is-style-tarjeta > .wp-block-image:first-child { margin: 0; }
.is-style-tarjeta > .wp-block-image:first-child img { width: 100%; object-position: top; display: block; }
.wp-block-column > .is-style-tarjeta { height: 100%; }
.is-style-tarjeta.ac-destacada { outline: 3px solid var(--wp--preset--color--verde-claro); }

/* Pincelada detrás del título */
.is-style-brocha { background: url(assets/img/brocha-azul.png) no-repeat center / 100% 100%; padding: 10px 18px !important; }
.is-style-brocha :where(h1,h2,h3) { color: #fff !important; text-shadow: 0 0 2px rgba(15,25,40,.9), 0 2px 8px rgba(15,25,40,.75); margin: 0; }

/* Decoraciones de sección */
.ac-deco { position: relative; isolation: isolate; }
.ac-deco::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
.ac-topo-verde-der::before { background-image: url(assets/img/topo-verde.png); right: -60px; top: 40px; width: 300px; height: 300px; opacity: .35; }
.ac-topo-verde-izq::before { background-image: url(assets/img/topo-verde.png); left: -70px; bottom: 40px; width: 260px; height: 260px; opacity: .3; }
.ac-topo-azul-der::before { background-image: url(assets/img/topo-azul.png); right: -50px; top: 120px; width: 280px; height: 280px; opacity: .3; }
.ac-topo-mapa-izq::before { background-image: url(assets/img/topo-mapa.png); left: -40px; top: 60px; width: 260px; height: 260px; opacity: .25; }
.ac-topo-mapa-der::before { background-image: url(assets/img/topo-mapa.svg); background-position: right bottom; right: 0; bottom: 0; width: 33.333%; height: auto; aspect-ratio: 1860 / 1530; opacity: .16; }
.ac-montanas { background-image: url(assets/img/montanas.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; }
@media (max-width: 781px) { .ac-montanas { background-size: 200% auto; } .ac-deco::before { opacity: .15; } }

/* Collage de fotos recortadas */
.ac-collage { position: relative; min-height: 380px; }
.ac-collage > .wp-block-image { position: absolute; margin: 0; }
.ac-collage > .wp-block-image:nth-child(1) { left: 0; top: 0; width: 46%; }
.ac-collage > .wp-block-image:nth-child(2) { right: 4%; top: 30px; width: 44%; }
.ac-collage > .wp-block-image:nth-child(3) { left: 26%; bottom: 0; width: 44%; }
.ac-collage-2 { position: relative; min-height: 440px; }
.ac-collage-2 > .wp-block-image { position: absolute; margin: 0; }
.ac-collage-2 > .wp-block-image img { width: 100%; object-fit: cover; border-radius: 6px; }
.ac-collage-2 > .wp-block-image:nth-child(1) { left: 0; top: 0; width: 80%; }

.ac-collage-2 > .wp-block-image:nth-child(2) { right: 0; bottom: 0; width: 62%; }
.ac-collage-2 > .wp-block-image:nth-child(2) img { border: 6px solid var(--wp--preset--color--fondo); }
@media (max-width: 781px) {
  .ac-collage, .ac-collage-2 { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac-collage > .wp-block-image, .ac-collage-2 > .wp-block-image { position: static; width: auto !important; }
}

/* Tira de fotos */
.ac-tira.wp-block-gallery { gap: 4px !important; }
.ac-tira.wp-block-gallery .wp-block-image img { height: 260px; object-fit: cover; }

/* Laureles */
.is-style-laureles.wp-block-gallery { gap: 14px !important; }
.is-style-laureles.wp-block-gallery .wp-block-image { background: #fff; border: 1px solid #E3E8ED; border-radius: 4px; padding: 6px; box-sizing: border-box; }
.is-style-laureles.wp-block-gallery .wp-block-image img { height: 92px !important; object-fit: contain !important; }

/* Tarjetas de premio */
.ac-premio { align-items: center; }
.ac-premio .wp-block-image { margin: 0; flex: 0 0 84px; }
.ac-premio .wp-block-image img { width: 84px; height: 56px; object-fit: contain; }
.ac-premio p { margin: 0; }

/* Retratos */
.ac-retrato img, .ac-redondeada img { border-radius: 6px; }
.ac-retrato figcaption { text-align: center; }
.ac-redondo { flex-shrink: 0; margin: 0; }
.ac-redondo img { border-radius: 50%; }
.ac-gris img { filter: grayscale(1); }
.ac-sombra img { box-shadow: 0 16px 40px rgba(23,32,46,.18); border-radius: 6px; }

/* Reseñas */
.ac-resena .wp-block-quote { border: 0; padding: 0; margin: 0; font-size: 17px; }
.ac-resena .wp-block-quote p { margin: 0; }

/* Cabecera */
.ac-cabecera { position: sticky; top: 0; z-index: 50; }
.admin-bar .ac-cabecera { top: 32px; }
.ac-logo-hueco { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--wp--preset--color--verde-claro); }
.ac-logo-hueco:has(img) { border: 0; }

/* Preguntas */
.wp-block-details { background: #fff; border-radius: 6px; padding: 18px 22px; align-self: stretch; box-sizing: border-box; }
.wp-block-details summary { font-weight: 700; font-size: 17px; cursor: pointer; }
.wp-block-details > p { margin: 12px 0 0; color: var(--wp--preset--color--texto); }

/* Botón contorno */
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 1.5px; }

/* Tabla de ficha técnica */
.ac-ficha-tabla table { border-collapse: collapse; width: 100%; font-size: 15px; }
.ac-ficha-tabla th, .ac-ficha-tabla td { border: 0; border-bottom: 1px solid var(--wp--preset--color--gris-borde, #DCE3EA); padding: 10px 12px; text-align: left; vertical-align: top; }
.ac-ficha-tabla th { width: 34%; color: var(--wp--preset--color--tinta); font-weight: 700; }
.ac-ficha-tabla.is-style-stripes tbody tr:nth-child(odd) { background: var(--wp--preset--color--blanco); }
.ac-ficha-tabla.is-style-stripes { border-bottom: 0; }

.ac-retrato, .ac-retrato img { width: 100%; }
.ac-retrato img { height: auto; }

/* Collage de 3 fotos (protagonistas) */
.ac-collage-3 { position: relative; min-height: 500px; }
.ac-collage-3 > .wp-block-image { position: absolute; margin: 0; }
.ac-collage-3 > .wp-block-image img { width: 100%; border-radius: 6px; }
.ac-collage-3 > .wp-block-image:nth-child(1) { left: 0; top: 0; width: 72%; }
.ac-collage-3 > .wp-block-image:nth-child(2) { right: 0; top: 170px; width: 58%; }
.ac-collage-3 > .wp-block-image:nth-child(3) { left: 4%; bottom: 0; width: 44%; }
.ac-collage-3 > .wp-block-image:nth-child(n+2) img { border: 6px solid var(--wp--preset--color--fondo); }
@media (max-width: 781px) {
  .ac-collage-3 { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac-collage-3 > .wp-block-image { position: static; width: auto !important; }
  .ac-collage-3 > .wp-block-image:nth-child(1) { grid-column: 1 / -1; }
  .ac-collage-3 > .wp-block-image img { border: 0 !important; }
}

/* Filas de equipo (retratos) */
.ac-equipo .wp-block-image { margin: 0; }
.ac-equipo .wp-block-image figcaption { text-align: center; font-size: 13px; line-height: 1.35; margin: 8px 0 0; color: var(--wp--preset--color--texto); }
.ac-equipo .wp-block-image figcaption strong { color: var(--wp--preset--color--tinta); }
.ac-equipo-grande .ac-redondo img { border-radius: 8px; }
.ac-equipo-peque .wp-block-image figcaption { font-size: 12px; }
@media (max-width: 781px) {
  .ac-equipo-grande .wp-block-image img { width: 132px !important; }
  .ac-equipo-peque .wp-block-image img { width: 86px !important; }
}

/* ===== Movimiento (v1.0.5) ===== */
/* Botones: respuesta al pulsar y fundido de color */
.wp-element-button, .wp-block-button__link { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 160ms var(--ac-ease-out); }
.wp-element-button:active, .wp-block-button__link:active { transform: scale(0.97); }

/* Preguntas: flecha que gira + despliegue suave donde el navegador lo admite */
.wp-block-details summary { list-style: none; position: relative; padding-right: 34px; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ac-ease-out); }
.wp-block-details[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
@supports (interpolate-size: allow-keywords) {
  .wp-block-details { interpolate-size: allow-keywords; }
  .wp-block-details::details-content { block-size: 0; opacity: 0; overflow: hidden; transition: block-size 200ms var(--ac-ease-out), opacity 200ms var(--ac-ease-out), content-visibility 200ms allow-discrete; }
  .wp-block-details[open]::details-content { block-size: auto; opacity: 1; }
}

/* Cabecera: sombra suave al bajar */
.ac-cabecera::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(rgba(23, 32, 46, 0.10), rgba(23, 32, 46, 0)); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.ac-cabecera.is-stuck::after { opacity: 1; }

/* Aparición al hacer scroll (solo si el script está activo; sin JS todo se ve) */
.ac-reveal-on .ac-reveal { transition: opacity 1200ms var(--ac-ease-out) var(--ac-delay, 0ms), transform 1200ms var(--ac-ease-out) var(--ac-delay, 0ms); }
.ac-reveal-on .ac-reveal:not(.is-visible) { opacity: 0; transform: translateY(32px); }
@media (prefers-reduced-motion: reduce) {
  .ac-reveal-on .ac-reveal { transition: opacity 300ms ease; }
  .ac-reveal-on .ac-reveal:not(.is-visible) { transform: none; }
  .wp-element-button, .wp-block-button__link { transition: background-color 150ms ease, color 150ms ease; }
  .wp-element-button:active, .wp-block-button__link:active { transform: none; }
}

/* Portadas: alinear el contenido con la cabecera en pantallas anchas (v1.0.9) */
/* v1.0.10: el bloque de posición de contenido de la portada pone margin:0 con más especificidad; se fuerza el centrado y se quita el padding lateral del cover para alinear también en móvil */
.wp-block-cover.alignfull { padding-left: 0; padding-right: 0; }
.wp-block-cover.alignfull > .wp-block-cover__inner-container { box-sizing: border-box; width: 100%; max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)); margin-inline: auto !important; }

/* v1.0.11: teasers de YouTube en ventana emergente (assets/js/video.js) */
.ac-video { width: min(1100px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.ac-video::backdrop { background: rgba(23, 32, 46, .86); }
.ac-video__marco { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ac-video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ac-video__cerrar { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 44px; cursor: pointer; transition: background-color 150ms ease-out, transform 160ms var(--ac-ease-out); }
.ac-video__cerrar:hover { background: rgba(255,255,255,.26); }
.ac-video__cerrar:active { transform: scale(.94); }
.ac-video__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.ac-video-abierto { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ac-video[open] { animation: ac-video-in 220ms var(--ac-ease-out); }
  .ac-video[open]::backdrop { animation: ac-video-fondo 220ms ease-out; }
}
@keyframes ac-video-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ac-video-fondo { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .ac-video { width: 100vw; } .ac-video__marco { border-radius: 0; } .ac-video__cerrar { right: 12px; } }