/*
Theme Name: Andrés Soler
Description: Tema de bloques ligero para Andrés Soler · Notas Musicales. Sin JavaScript, sin créditos.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: andres-soler
*/

@media (prefers-color-scheme: dark) {
  body {
    --wp--preset--color--base: #0c0d0e;
    --wp--preset--color--surface: #17191a;
    --wp--preset--color--contrast: #eef0f1;
    --wp--preset--color--muted: #9aa2a7;
    --wp--preset--color--accent-dark: #3fd0d7;
    --wp--preset--color--line: #26292b;
  }
  /* la firma es negra sobre blanco: se invierte y se funde con el fondo */
  .wp-block-post-content img[alt="firmaBLOG"] { filter: invert(1); mix-blend-mode: screen; }
}
.wp-block-post-content img[alt="firmaBLOG"] { mix-blend-mode: multiply; background: transparent; }

@view-transition { navigation: auto; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-underline-offset: .2em; }

/* ---------- Cabecera ---------- */
.site-header { background: var(--wp--preset--color--ink); color: #fff; }
/* La cabecera completa (no su contenedor interno) es la que queda fija al bajar */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
html { scroll-padding-top: 6rem; }
.site-header a { color: #fff; text-decoration: none; }
.wordmark { display: inline-block; line-height: 0; }
.wordmark img { display: block; height: 54px; width: auto; }
@media (max-width: 520px) { .wordmark img { height: 38px; } }
.site-header .wp-block-navigation { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: .85rem; }
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.site-header .wp-block-navigation__responsive-container-open svg, .site-header .wp-block-navigation__responsive-container-close svg { fill: #fff; }

/* ---------- Portada: banda de presentación ---------- */
.intro { position: relative; overflow: hidden; background: var(--wp--preset--color--ink); color: #fff; }
.intro h1, .intro .hero-nombre { font-size: clamp(3rem, 1rem + 9vw, 8.5rem); font-weight: 800; letter-spacing: -.045em; line-height: .92; margin: 0; color: #fff; }
.intro .lema { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(1.1rem, .9rem + 1vw, 1.8rem); color: var(--wp--preset--color--accent); margin: 1.25rem 0 0; padding-top: 1rem; border-top: 6px solid var(--wp--preset--color--accent); display: inline-block; }
.eq { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 0; display: flex; align-items: flex-end; gap: 6px; height: 70%; opacity: .9; pointer-events: none; }
.eq i { display: block; width: clamp(5px, 1vw, 12px); background: var(--wp--preset--color--accent); height: 20%; border-radius: 2px 2px 0 0; transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .eq i { animation: eq 1.8s ease-in-out infinite alternate; }
  .eq i:nth-child(3n) { animation-duration: 1.3s; } .eq i:nth-child(4n) { animation-duration: 2.3s; } .eq i:nth-child(5n+1) { animation-delay: -.7s; } .eq i:nth-child(2n) { animation-delay: -1.1s; }
  @keyframes eq { from { height: 14%; } to { height: 96%; } }
}
.eq i:nth-child(1){height:30%}.eq i:nth-child(2){height:60%}.eq i:nth-child(3){height:40%}.eq i:nth-child(4){height:80%}.eq i:nth-child(5){height:50%}.eq i:nth-child(6){height:90%}.eq i:nth-child(7){height:35%}.eq i:nth-child(8){height:70%}.eq i:nth-child(9){height:45%}.eq i:nth-child(10){height:85%}.eq i:nth-child(11){height:55%}.eq i:nth-child(12){height:30%}
@media (max-width: 700px) { .eq { opacity: .35; } }

/* ---------- Rejilla a sangre, sin huecos ---------- */
.mosaic .wp-block-post-template { gap: 0 !important; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 900px) { .mosaic .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; } }
.mosaic .wp-block-post-template > li { margin: 0; padding: 0; }
.card { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--wp--preset--color--ink); }
.card .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; height: 100%; }
.card .wp-block-post-featured-image a { display: block; height: 100%; }
.card .wp-block-post-featured-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.card:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.card-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 3rem 1.25rem 1.1rem; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.5) 60%, transparent); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.card:hover .card-info, .card:focus-within .card-info { opacity: 1; transform: none; }
@media (hover: none) { .card-info { opacity: 1; transform: none; padding-top: 1.6rem; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); } .card-info .wp-block-post-date, .card-info .wp-block-post-terms { display: none; } }
.card-info a { color: #fff; text-decoration: none; pointer-events: auto; }
.card-info .wp-block-post-title { font-size: clamp(1.05rem, .9rem + .6vw, 1.45rem); margin: .2rem 0 0; letter-spacing: -.015em; }
.card-info .wp-block-post-date, .card-info .wp-block-post-terms { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); margin: 0; }
.card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: var(--wp--preset--color--accent); transition: width .45s ease; z-index: 3; }
.card:hover::after { width: 100%; }
@media (max-width: 600px) { .card-info { padding: 1.6rem .8rem .6rem; } .card-info .wp-block-post-title { font-size: .95rem; } }


/* ---------- Entradas ---------- */
.entry-head h1 { font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4rem); }
.entry-cover { margin-block: 2rem 2.2rem; }
.entry-cover img { display: block; width: 100%; height: min(72vh, 100vw); object-fit: cover; object-position: center; }
.wp-block-post-content a:hover { color: var(--wp--preset--color--accent); }
.wp-block-embed iframe, .entry-content iframe { max-width: 100%; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16/9; }
.wp-block-embed.is-type-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.entry-content > * + * { margin-block-start: 1.4rem; }
.wp-block-post-content img, .wp-block-post-content video { max-width: 100%; height: auto; }
.meta { letter-spacing: .1em; text-transform: uppercase; font-family: var(--wp--preset--font-family--display); }
.meta a { text-decoration: none; color: var(--wp--preset--color--accent-dark); }

/* ---------- Paginación, formularios ---------- */
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.wp-block-query-pagination a { text-decoration: none; display: inline-block; padding: .85rem 1.6rem; background: var(--wp--preset--color--ink); color: #fff; }
.wp-block-query-pagination a:hover { background: var(--wp--preset--color--accent); color: #08090a; }
.wp-block-button__link, .wp-block-search__button, .wp-block-post-comments-form input[type=submit] { background: var(--wp--preset--color--ink); color: #fff; border-radius: 0; font-family: var(--wp--preset--font-family--display); font-weight: 600; }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.site-header .wp-block-navigation, .site-header .wp-block-navigation__container { gap: 1.75rem; }
.site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink); }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.2rem; font-size: 1.4rem; }


/* El hueco de la última fila queda en negro, como el resto del bloque */
.mosaic { background: var(--wp--preset--color--ink); }

/* Comentarios: lista limpia y formulario desplegable */
.comentarios { margin-top: 1.5rem; }
.comentarios .wp-block-comments-title { font-size: 1.1rem; margin: 0 0 1.5rem; }
.comentario { padding: 1.1rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.comentario .wp-block-comment-author-name { margin: 0; font-weight: 700; }
.comentario .wp-block-comment-author-name a { color: inherit; text-decoration: none; }
.comentario .wp-block-comment-date { margin: 0 0 .5rem; }
.comentario .wp-block-comment-content p { margin: .4rem 0; }
.comentario .wp-block-comment-reply-link a { color: var(--wp--preset--color--accent-dark); text-decoration: none; font-weight: 600; }
.wp-block-comment-template, .wp-block-comment-template ol { list-style: none; margin: 0; padding: 0; }
.wp-block-comment-template .children { margin-left: 1.5rem; }
.comment-details { margin-top: 0; }
.comment-details > summary { display: inline-block; list-style: none; cursor: pointer; padding: .85rem 1.6rem; background: var(--wp--preset--color--ink); color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 600; transition: background .2s, color .2s; }
.comment-details > summary::-webkit-details-marker { display: none; }
.comment-details > summary:hover, .comment-details[open] > summary { background: var(--wp--preset--color--accent); color: #08090a; }
.comment-details[open] > summary::after { content: "  ×"; }
.comment-details:not(:has(.comment-form)) { display: none; }
.comment-details .comment-form { margin-top: 1.5rem; display: grid; gap: 1rem; }
.comment-details .comment-form p { margin: 0; }
.comment-details .comment-reply-title { font-size: 1.1rem; margin: 1.5rem 0 .25rem; }
.comment-details label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.comment-details input[type=text], .comment-details input[type=email], .comment-details input[type=url], .comment-details textarea { width: 100%; box-sizing: border-box; padding: .8rem .9rem; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); color: inherit; font: inherit; border-radius: 0; }
.comment-details input:focus, .comment-details textarea:focus { outline: 2px solid var(--wp--preset--color--accent); border-color: transparent; }
.comment-details .comment-form-cookies-consent, .comment-details .comment-subscription-form { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--wp--preset--color--muted); }
.comment-details .comment-form-cookies-consent label, .comment-details .comment-subscription-form label { font-weight: 400; margin: 0; }
.comment-details input[type=submit] { background: var(--wp--preset--color--ink); color: #fff; border: 0; padding: .85rem 1.6rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; cursor: pointer; }
.comment-details input[type=submit]:hover { background: var(--wp--preset--color--accent); color: #08090a; }

/* Reproductor de audio con onda */
.wp-block-audio { margin-block: 1.5rem; }
.wp-block-audio audio { width: 100%; }
.wp-block-audio .rp ~ audio { display: none; }
.rp { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.2rem 1rem 1rem; background: var(--wp--preset--color--ink); color: #fff; }
.rp-play { flex: none; width: 3.6rem; height: 3.6rem; border: 0; border-radius: 50%; background: var(--wp--preset--color--accent); color: #08090a; cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .2s; }
.rp-play:hover { transform: scale(1.07); background: #3fd0d7; }
.rp-play svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.rp-centro { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.rp-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rp-titulo { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tiempo { flex: none; font-size: .78rem; color: #9aa2a7; font-variant-numeric: tabular-nums; }
.rp-onda { display: block; width: 100%; height: 64px; cursor: pointer; touch-action: none; }
.rp-onda:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.wp-block-audio + .wp-block-audio { margin-top: 2px; }
@media (max-width: 520px) { .rp { gap: .8rem; padding: .8rem; } .rp-play { width: 3rem; height: 3rem; } .rp-onda { height: 52px; } }
.wp-block-post-title.entry-head { margin-bottom: 1.2rem; }
.wp-block-post-content > p + .wp-block-audio { margin-top: 1.5rem; }

/* Final de la entrada: firma, iconos, etiquetas y comentarios, centrados y compactos */
.entry-content figure.wp-block-image.aligncenter { margin-block: 1.4rem -.2rem; }
.wp-block-social-links.fuentes { justify-content: center; margin: 1.1rem auto 0; gap: .9rem; }
.wp-block-social-links.fuentes .wp-social-link a { padding: .35rem; }
.etiquetas { text-align: center; margin: 1.1rem 0 0; color: var(--wp--preset--color--muted); }
.etiquetas a { margin: 0 .2rem; }
.comment-details { text-align: center; }
.comment-details .comment-form, .comment-details .comment-reply-title { text-align: left; }

/* Vídeo propio */
.wp-block-video { margin-block: 1.5rem; }
.wp-block-video video { display: block; width: 100%; height: auto; background: #000; }
.wp-block-video + .wp-block-video { margin-top: .75rem; }

/* Línea de cierre del texto */
hr.fin-post { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin-block: 2rem 0; height: 0; }
/* La firma lleva espacio en blanco debajo: se compensa para que la línea quede pegada al texto */
.entry-content > figure.wp-block-image.aligncenter:last-child { margin-bottom: -3rem; }
.comentarios { margin-top: 2.2rem; }

/* Equipo del estudio: dentro de la columna del texto; categoría a la izquierda, modelo a la derecha */
.equipo { margin-block: 2rem 2.5rem; }
.equipo-grupo { margin-bottom: 2rem; }
.equipo-grupo h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .2rem; padding-bottom: .7rem; color: var(--wp--preset--color--muted); border-bottom: 3px solid var(--wp--preset--color--accent); }
.equipo-grupo ul { list-style: none; margin: 0; padding: 0; }
.equipo-grupo li { display: grid; grid-template-columns: 13.5rem 1fr; gap: .2rem 1rem; align-items: baseline; margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--wp--preset--color--line); line-height: 1.35; }
.equipo-grupo li .cat { font-size: .82rem; color: var(--wp--preset--color--muted); }
.equipo-grupo li strong { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1rem; }
@media (max-width: 560px) { .equipo-grupo li { grid-template-columns: 1fr; padding: .6rem 0; } }

/* Pie: icono centrado y copyright debajo */
.pie { text-align: center; }
.pie-logo { display: block; width: 56px; margin: 0 auto 1.1rem; line-height: 0; }
.pie-logo img { display: block; width: 56px; height: 56px; opacity: .95; transition: transform .25s ease, opacity .25s ease; }
.pie-logo:hover img { transform: translateY(-2px); opacity: 1; }
.pie-copy { margin: 0; letter-spacing: .01em; }
/* El pie siempre queda al fondo, aunque la página sea corta */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > footer { margin-top: auto; }

/* «Mi primer disco»: la portada (fondo negro) se muestra entera, centrada sobre una banda negra a todo el ancho */
.postid-789 .entry-cover { background: #000; }
.postid-789 .entry-cover img { object-fit: contain !important; }

/* Álbum: carátula a la izquierda y canciones sobre un degradado del color de la portada */
.disco { counter-reset: pista; margin-block: 1.8rem; padding: 1.6rem 1rem 1rem; background: linear-gradient(180deg, #5a1a3c 0%, #34122b 34%, #14090f 78%, #0c0a0d 100%); color: #fff; }
.disco-cab { display: flex; align-items: flex-end; gap: 1.4rem; padding: 0 .6rem 1.6rem; }
.disco-cab img { display: block; width: 168px; height: 168px; flex: none; box-shadow: 0 10px 34px rgba(0,0,0,.55); }
.disco-txt { display: grid; gap: .35rem; min-width: 0; }
.disco-tipo { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.disco-titulo { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.8rem); letter-spacing: -.03em; line-height: 1.02; }
.disco-meta { font-size: .85rem; color: rgba(255,255,255,.78); }
.disco .wp-block-audio { margin: 0; }
.disco .wp-block-audio + .wp-block-audio { margin-top: 0; }
.disco .rp { background: transparent; border-radius: 6px; padding: .4rem .8rem .4rem .5rem; gap: .8rem; transition: background .15s; }
.disco .rp:hover { background: rgba(255,255,255,.09); }
.disco .rp.rp-activo { background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); padding-block: .7rem; }
.disco .rp-play { width: 2.3rem; height: 2.3rem; }
.disco .rp-play svg { width: 1.05rem; height: 1.05rem; }
.disco .rp-titulo { cursor: pointer; font-weight: 500; }
.disco .rp-titulo::before { counter-increment: pista; content: counter(pista); display: inline-block; width: 1.6rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.disco .rp-activo .rp-titulo { color: var(--wp--preset--color--accent); font-weight: 700; }
.disco .rp-tiempo { color: rgba(255,255,255,.7); }
.disco .rp-onda { display: none; }
.disco .rp.rp-activo .rp-onda { display: block; }
.rp-titulo { cursor: pointer; }
@media (max-width: 560px) { .disco { padding: 1rem .4rem .6rem; } .disco-cab { gap: 1rem; } .disco-cab img { width: 104px; height: 104px; } }
.disco .rp-titulo::before { counter-increment: pista; content: counter(pista, decimal-leading-zero) "  "; color: var(--wp--preset--color--accent); font-variant-numeric: tabular-nums; margin-right: .3rem; }
.disco .rp-onda { display: none; }
.disco .rp.rp-activo { padding-block: .8rem; }
.disco .rp.rp-activo .rp-onda { display: block; }
.rp-titulo { cursor: pointer; }
/* Enlaces del álbum a otras plataformas, dentro de la cabecera del reproductor */
.disco-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .55rem; margin-top: .55rem; }
.disco-enlaces > span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-right: .15rem; }
.disco-enlaces a { color: #fff; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.disco-enlaces a svg { width: 1.15rem; height: 1.15rem; display: block; }
.disco-enlaces a:hover, .disco-enlaces a:focus-visible { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #08090a; transform: translateY(-2px); }
@media (max-width: 560px) { .disco-enlaces > span { flex-basis: 100%; } }

/* Colores de marca de los iconos añadidos a mano */
.wp-block-social-links.is-style-logos-only .sl-applemusic { color: #fa243c; }
.wp-block-social-links.is-style-logos-only .sl-deezer { color: #a238ff; }

/* Vídeos panorámicos con franjas negras grabadas en el archivo (1920×1080 con imagen de 1920×800):
   el reproductor toma la proporción real (2,4:1) y se muestra solo la parte central. No se toca el archivo. */
.video-panoramico video { aspect-ratio: 1920 / 800; height: auto; object-fit: cover; }

/* Encabezado de la entrada: categoría, título y fecha con aire entre ellos */
.entry-head .wp-block-post-terms { margin: 0 0 .7rem; }
.entry-head .wp-block-post-title { margin: 0; }
.entry-head .wp-block-post-date { margin: 0; }

/* Acciones bajo la línea de cierre: «Contacta conmigo» (solo en páginas) y «Dejar un comentario», encima de las respuestas */
.comentarios .acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem; margin: 1.8rem 0 2.2rem; }
.comentarios .acciones .wp-block-buttons { margin: 0; }
.comentarios .acciones .wp-block-button__link { display: inline-block; padding: .85rem 1.6rem; background: var(--wp--preset--color--ink); color: #fff; border-radius: 0; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.7; text-decoration: none; transition: background .2s, color .2s; }
.comentarios .acciones .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: #08090a; }
.comentarios .acciones .comment-details[open] { flex: 1 0 100%; }
.comentarios .acciones:not(:has(.wp-block-buttons)):not(:has(.comment-form)) { display: none; }
.comentarios .wp-block-comments-title { margin-top: 0; }
.wp-block-buttons.cta-disco { margin-top: 1.2rem; }
/* En las páginas la firma va dentro de un párrafo: se compensa el hueco bajo la imagen, como en las entradas */
.entry-content > p:has(> img[alt="firmaBLOG"]) { margin-bottom: -3rem; }
.entry-content > p:has(> img[alt="firmaBLOG"]) > img { display: block; margin: 0 auto; }

/* Los dos botones de acción (Contacta conmigo / Dejar un comentario): exactamente el mismo tamaño y letra */
.comentarios .acciones .wp-block-button__link,
.comentarios .acciones .comment-details > summary {
	box-sizing: border-box; display: inline-block; height: 3.4rem; padding: 0 1.7rem !important; line-height: 3.4rem !important;
	font-family: var(--wp--preset--font-family--display); font-weight: 600 !important; font-size: 1.0625rem !important; letter-spacing: normal;
	background: var(--wp--preset--color--ink); color: #fff; border-radius: 0; text-align: center; white-space: nowrap;
}
.comentarios .acciones .wp-block-button__link:hover,
.comentarios .acciones .comment-details > summary:hover,
.comentarios .acciones .comment-details[open] > summary { background: var(--wp--preset--color--accent); color: #08090a; }

/* Móvil: el icono del pie guarda la misma proporción con la cabecera que en el ordenador (56/54 de la cabecera → 40/38) */
@media (max-width: 520px) {
	.pie-logo { width: 40px; margin-bottom: .9rem; }
	.pie-logo img { width: 40px; height: 40px; }
}

/* Pie más ajustado */
.wp-site-blocks > footer .pie { padding-top: 1.5rem !important; padding-bottom: 1.3rem !important; }
.pie-logo { margin-bottom: .7rem; }
@media (max-width: 520px) {
	.wp-site-blocks > footer .pie { padding-top: 1.2rem !important; padding-bottom: 1.1rem !important; }
	.pie-logo { margin-bottom: .6rem; }
}

/* Respuestas anidadas: sangría y una línea turquesa a la izquierda para que se lean como respuesta */
.wp-block-comment-template ol { margin: .4rem 0 0 1.2rem !important; padding: 0 0 0 1.3rem !important; border-left: 3px solid var(--wp--preset--color--accent); }
.wp-block-comment-template ol .comentario { border-bottom: 0; padding-bottom: .4rem; }
@media (max-width: 520px) { .wp-block-comment-template ol { margin-left: .4rem !important; padding-left: .9rem !important; } }

/* Banner con retrato a la derecha: el fondo negro de la foto se funde con el del banner */
.intro { min-height: clamp(480px, 64vh, 660px); display: flex; align-items: center; }
.intro > .wp-block-group { position: relative; z-index: 2; width: 100%; }
.hero-foto { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 78%; object-fit: cover; object-position: right center; mix-blend-mode: lighten; z-index: 1; pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%); mask-image: linear-gradient(to right, transparent 0, #000 42%); }
@media (max-width: 700px) {
	.intro { min-height: 560px; align-items: flex-start; }
	.hero-foto { height: 62%; max-width: 100%; width: 100%; object-position: right bottom;
		-webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 55%, transparent 100%); }
}

/* ===== Portada a pantalla completa (solo con el script activo: html.hero-activo) ===== */
.wordmark img { transition: height .4s cubic-bezier(.2,.7,.2,1); }
.site-header, .site-header > .wp-block-group { transition: background-color .35s ease, padding .4s cubic-bezier(.2,.7,.2,1); }
.site-header .wp-block-navigation { transition: opacity .35s ease; }

html.hero-activo .wp-site-blocks > header.wp-block-template-part { position: fixed; top: 0; left: 0; right: 0; }
html.hero-activo:not(.scrolled) .site-header { background: transparent; }
html.hero-activo:not(.scrolled) .site-header > .wp-block-group { padding-top: 1.6rem !important; padding-bottom: .6rem !important; }
html.hero-activo:not(.scrolled) .wordmark img { height: 108px; }
html.hero-activo:not(.scrolled) .site-header .wp-block-navigation { opacity: 0; pointer-events: none; }
html.hero-activo .site-header:focus-within .wp-block-navigation { opacity: 1; pointer-events: auto; }

html.hero-activo .intro { min-height: 100vh; min-height: 100svh; padding: 0; }
html.hero-activo .intro > .wp-block-group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* el título queda para lectores de pantalla y buscadores */
html.hero-activo .hero-foto { height: 100%; max-width: 82%; }
html.hero-activo .scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; width: 14px; height: 14px; margin-left: -7px; z-index: 3; border-right: 2px solid rgba(255,255,255,.75); border-bottom: 2px solid rgba(255,255,255,.75); transform: rotate(45deg); transition: opacity .3s; }
html.hero-activo.scrolled .scroll-cue { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { html.hero-activo .scroll-cue { animation: cue 1.8s ease-in-out infinite; } @keyframes cue { 0%,100% { transform: translateY(0) rotate(45deg); opacity: .5; } 50% { transform: translateY(8px) rotate(45deg); opacity: 1; } } }
@media (prefers-reduced-motion: reduce) { .wordmark img, .site-header, .site-header > .wp-block-group, .site-header .wp-block-navigation { transition: none; } }

@media (max-width: 700px) {
	html.hero-activo:not(.scrolled) .wordmark img { height: 74px; }
	html.hero-activo:not(.scrolled) .site-header > .wp-block-group { padding-top: 1.2rem !important; }
	html.hero-activo .hero-foto { top: auto; bottom: 0; height: auto; width: 140%; max-width: none; right: -16%; object-fit: contain;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%); mask-image: linear-gradient(to bottom, transparent 0, #000 28%); }
}
html.hero-activo.scrolled .scroll-cue { animation: none; opacity: 0; }

/* Ordenador: al entrar, el logo grande queda a la altura de la parte superior de la oreja del retrato (≈ 23 % de la altura)
   y, al hacer scroll, sube a la barra superior con la misma transición de relleno. */
@media (min-width: 701px) {
	html.hero-activo:not(.scrolled) .site-header > .wp-block-group { padding-top: 22vh !important; }
	.site-header > .wp-block-group { transition-duration: .6s; }
	.wordmark img { transition-duration: .6s; }
}

/* El fondo negro de la barra solo aparece cuando ya es pequeña:
   al bajar espera a que termine de encogerse (retardo = casi toda la transición del tamaño) y entra rápido;
   al subir se vuelve transparente enseguida, antes de que la cabecera vuelva a crecer. */
html.hero-activo .site-header { transition: background-color .12s ease 0s; }
html.hero-activo.scrolled .site-header { transition: background-color .18s ease .5s; }
@media (prefers-reduced-motion: reduce) { html.hero-activo .site-header, html.hero-activo.scrolled .site-header { transition: none; } }

/* La introducción no vuelve: tras bajar, la foto se funde, se retira del todo y la cabecera pasa a ocupar su sitio en la página */
html.hero-activo .hero-foto, html.hero-activo .scroll-cue { transition: opacity .5s ease; }
html.hero-fuera .intro { display: none; }
html.hero-activo { overflow-anchor: none; }

/* Altura de la barra pequeña (logo + relleno): se usa al retirar la introducción para que el contenido no se mueva */
html { --cab: 86px; }
@media (max-width: 520px) { html { --cab: 70px; } }
html.hero-fuera .wp-site-blocks > main { padding-top: var(--cab); }

/* ===== Móvil: logo grande centrado arriba y retrato justo debajo, a su tamaño natural (la introducción no llena la pantalla) ===== */
@media (max-width: 700px) {
	/* el logo se ajusta al ancho disponible (4,68 = proporción del rótulo) y queda centrado */
	html.hero-activo:not(.scrolled) .wordmark img { height: min(74px, calc((100vw - 2.5rem) / 4.68)); }
	html.hero-activo:not(.scrolled) .wordmark { margin-inline: auto; }
	html.hero-activo:not(.scrolled) .site-header .wp-block-navigation { position: absolute; right: 1.25rem; }

	/* El relleno viene fijado en la propia etiqueta, así que hace falta !important.
	   Franja negra superior = lo que ocupa el logo grande (relleno 1,2 rem + alto del logo) más un poco de aire, para que el logo no toque la cara. */
	html.hero-activo .intro { display: block; min-height: 0; padding-top: calc(1.2rem + min(74px, (100vw - 2.5rem) / 4.68) + 1.4rem) !important; padding-bottom: 0 !important; }
	html.hero-activo .hero-foto { position: relative; right: auto; bottom: auto; top: auto; display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: center;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%); }
	html.hero-activo .scroll-cue { display: none; }
}

/* La retirada de la introducción debe ganar siempre a cualquier regla que la muestre (antes, en móvil, la pisaba otra regla) */
html.hero-fuera .intro { display: none !important; }

/* Presentación: el texto sigue en la página (lo leen buscadores y lectores de pantalla) pero no se ve */
.presentacion { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }