/*
Theme Name: Javier Jaroal
Theme URI: https://javierjaroal.com/
Template: twentytwentyfive
Author: Felipe A. Salazar
Description: Tema hijo de Twenty Twenty-Five para javierjaroal.com. Guía de estilo (colores, tipografías, títulos y anchos) en theme.json, estilos de la web ordenados en este archivo, patrones «Reportaje de boda», «Galería», «Tarjeta de boda» y «Llamada a la acción», y plantilla «Reportaje de boda».
Version: 1.1.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: javier-jaroal
*/

/* ÍNDICE
   1.  Base: variables de la clase .jj
   2.  Plantilla «Portada a pantalla completa»
   3.  Secciones, títulos, botones y llamadas a la acción
   4.  Cabecera y menú
   5.  Portada, bloque por bloque
   6.  Portada en tablet y móvil
   7.  Notas internas
   8.  Páginas interiores: texto justificado, títulos y cabecera fija
   9.  Bodas reales y Portfolio
   10. Texto al ancho de las fotos
   11. Nuevo en el tema hijo: plantilla Reportaje, patrones y blog

   Colores, tipografías (con sus archivos) y tamaños de títulos: theme.json.
   Reglas que solo se aplican en el editor: assets/css/editor.css.
   Origen: CSS de Estilos globales del 10-11-2026 (respaldo en la carpeta del proyecto).
*/

/* =====================================================================
   1. BASE: VARIABLES DE LA CLASE .jj
   Todo el diseño de la portada y de los reportajes cuelga de la clase .jj.
   ===================================================================== */
.jj{--ink:#1b1817;--brown:#2c211b;--amber:#b98254;--amber-l:#d8a16d;--amber-d:#8a5a33;--cream:#f6f1ea;--sand:#ece3d6;--txt:#2b2622;--mut:#6d635b;--line:#ddd2c3;
 --serif:'Cormorant Garamond',Georgia,serif;--sans:'Open Sans',system-ui,sans-serif;
 font-family:var(--sans);color:var(--txt);font-size:16.5px;line-height:1.75;background:var(--cream);
 margin-top:0!important;margin-bottom:0!important}
.jj *{box-sizing:border-box}
.jj a{color:inherit}
.jj p{margin:0 0 1em}
.jj img{max-width:100%;height:auto;display:block}


/* =====================================================================
   2. AJUSTES DE LA PLANTILLA «PORTADA A PANTALLA COMPLETA»
   ===================================================================== */
/* Plantilla de portada: sin márgenes entre secciones */
body .wp-site-blocks:has(.jj){padding-top:0}
.entry-content:has(> .jj) > *{margin-block-start:0}
html:has(.jj-hero){scroll-behavior:smooth}
.jj[id], .jj [id]{scroll-margin-top:84px}


/* =====================================================================
   3. SECCIONES, TÍTULOS, BOTONES Y LLAMADAS A LA ACCIÓN
   Clases: section.jj, .jj-kick (antetítulo), .jj-lead (entradilla), .jj-btn-ghost, .jj-btn-line, .jj-btn-text, .jj-cta-row
   ===================================================================== */
/* Secciones */
section.jj{padding:120px 24px}
section.jj + section.jj{border-top:1px solid var(--line)}
.jj-dark + section.jj, section.jj + .jj-dark, section.jj + .jj-close, .jj-hero + section.jj{border-top:0!important}
.jj.jj-crema{background:var(--cream)}

/* Títulos y textos */
.jj h1,.jj h2,.jj h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;color:var(--ink);font-variant-numeric:lining-nums;letter-spacing:-.005em}
.jj h2{font-size:clamp(32px,3.8vw,46px);margin:0 0 26px}
/* Titular y entradilla alineados a la izquierda dentro del ancho de contenido */
section.jj{--cs:1120px}
section.jj.jj-faq{--cs:820px}
section.jj:not(.jj-day):not(.jj-hero) > h2{max-width:min(900px,var(--cs))!important;margin-left:max(0px,calc((100% - var(--cs)) / 2))!important;margin-right:auto!important}
.jj h3{font-size:25px;font-weight:500}
.jj .jj-kick{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--mut);margin:0 0 18px}
.jj .jj-lead{font-size:17px;color:var(--mut)}
section.jj:not(.jj-day) > .jj-lead{max-width:680px!important;margin-left:max(0px,calc((100% - var(--cs)) / 2))!important;margin-right:auto!important}
.jj mark{padding:2px 6px;font-size:12px;color:#6b5300}

/* Botones (bloque Botones con estilos propios) */
.jj .wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;padding:14px 26px;border-radius:0;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:.2s;background:var(--ink);color:#fff;border:1px solid var(--ink)}
.jj .wp-block-button .wp-block-button__link:hover{background:var(--amber-d);border-color:var(--amber-d)}
.jj .jj-btn-ghost .wp-block-button__link{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.jj .jj-btn-ghost .wp-block-button__link:hover{background:#fff;color:var(--ink)}
.jj .jj-btn-line .wp-block-button__link{background:transparent;color:var(--ink)}
.jj .jj-btn-line .wp-block-button__link:hover{background:var(--ink);color:#fff}
.jj .jj-btn-text .wp-block-button__link{background:transparent!important;border:0;border-bottom:1px solid currentColor;padding:4px 0;color:var(--ink)}
.jj .jj-btn-text .wp-block-button__link:hover{color:var(--amber-d)}
.jj .jj-link a{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-d);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* Llamados a la acción al final de cada sección */
.jj .jj-cta-row{border-top:1px solid var(--line);padding-top:30px;margin-top:64px;text-align:center}
.jj .jj-cta-row > p{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.25;color:var(--ink);margin:0 0 18px}
.jj .jj-cta-row .wp-block-buttons{gap:12px 28px}


/* =====================================================================
   4. CABECERA Y MENÚ (parte de plantilla «Cabecera»)
   En la portada va transparente sobre el hero y pasa a .solid con el script de la portada.
   ===================================================================== */
/* ---------- Menú ---------- */
.jj.jj-nav{position:absolute;top:0;left:0;right:0;z-index:50;background:transparent;padding:0 24px;height:84px;align-items:center;transition:background .3s}
.admin-bar .jj.jj-nav{top:32px}
.jj.jj-nav.solid{position:fixed;background:rgba(27,24,23,.92);backdrop-filter:blur(6px)}
.jj.jj-nav, .jj.jj-nav + .jj-hero{border-top:0}
.jj .jj-logo{margin:0;font-family:var(--sans);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#d9cdbf;line-height:1.2}
.jj .jj-logo a{font-family:var(--serif);font-size:28px;letter-spacing:.02em;text-transform:none;color:#fff;text-decoration:none;display:inline-block;margin-bottom:2px}
.jj .jj-menu{gap:30px;color:#fff}
.jj .jj-menu .wp-block-navigation-item__content{color:#fff;text-decoration:none;font-size:11px;letter-spacing:.22em;font-weight:600;text-transform:uppercase;opacity:.9}
.jj .jj-menu .wp-block-navigation-item__content:hover{opacity:1;color:var(--amber-l)}
.jj .jj-menu .jj-cta .wp-block-navigation-item__content{border:1px solid rgba(255,255,255,.6);padding:9px 16px}
.jj .jj-menu .jj-cta .wp-block-navigation-item__content:hover{background:#fff;color:var(--ink)}
.jj .jj-menu .wp-block-navigation__responsive-container-open svg{fill:#fff}
.jj .jj-menu .wp-block-navigation__responsive-container.is-menu-open{background:#1b1817!important;color:#fff!important;padding:28px 24px}
.jj .jj-menu .is-menu-open .wp-block-navigation__responsive-container-content,.jj .jj-menu .is-menu-open .wp-block-navigation__container{align-items:flex-start!important}
.jj .jj-menu .is-menu-open .jj-cta .wp-block-navigation-item__content{padding:12px 18px;margin-top:10px}
.jj .jj-menu .is-menu-open .wp-block-navigation-item__content{font-size:14px;padding:12px 0}
@media(max-width:1120px) and (min-width:600px){.jj .jj-menu{gap:18px}.jj .jj-menu .wp-block-navigation-item__content{letter-spacing:.12em}}


/* =====================================================================
   5. PORTADA, BLOQUE POR BLOQUE
   Hero, un día de boda, el fotógrafo, cómo trabajo, encajamos, bodas reales, galerías, opiniones, cómo contratar, dónde trabajo, preguntas, cierre con formulario y botón flotante.
   ===================================================================== */
/* ---------- Portada (hero) ---------- */
.jj.jj-hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0;background:var(--ink);color:#fff}
.jj.jj-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(27,24,23,.25) 0%,rgba(27,24,23,.55) 100%);z-index:1}
.jj .jj-slides{position:absolute!important;inset:0;margin:0!important;display:block!important;gap:0!important}
.jj .jj-slides .wp-block-image{position:absolute!important;inset:0;margin:0!important;width:100%!important;height:100%;opacity:0;transition:opacity 1.8s ease}
.jj .jj-slides .wp-block-image:first-child{opacity:1}
.jj .jj-slides .wp-block-image img{width:100%!important;height:100%!important;object-fit:cover;transform:scale(1.06);will-change:opacity,transform}
.jj .jj-slides.is-live .wp-block-image{opacity:0}
.jj .jj-slides.is-live .wp-block-image.on{opacity:1}
.jj .jj-slides .wp-block-image.on img,.jj .jj-slides .wp-block-image.off img{animation:jjzoom 9s linear forwards}
@keyframes jjzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.jj .jj-hero-tx{position:relative;z-index:2;padding:120px 24px 90px;width:100%}
.jj .jj-hero-tx .jj-kick{color:#e9dfd3;margin-bottom:22px}
.jj .jj-hero-tx h1{color:#fff;font-size:clamp(40px,6vw,78px);letter-spacing:-.01em;margin:0 auto}
.jj .jj-hero-tx h1 em{font-style:italic;color:#fff}
.jj .jj-hero-tx .jj-intro{font-size:17px;max-width:560px;margin:22px auto 26px;color:#ece4da}
.jj .jj-hero-tx .jj-sub{font-size:15.5px;max-width:600px;margin:0 auto 34px;color:#ddd3c7;line-height:1.7}
.jj .jj-hero-cta{gap:18px 26px}
.jj .jj-hero-cta .jj-btn-text .wp-block-button__link{color:#fff}
.jj .jj-bars{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.jj .jj-bars i{display:block;width:28px;height:1px;background:rgba(255,255,255,.35);transition:background .6s}
.jj .jj-bars i.on{background:#fff}
/* El texto aparece después de la primera foto */
/* 1.1.2: el H1 queda visible desde el inicio (es el LCP de la portada); el resto del texto sigue entrando en fundido */
.jj.js-intro .jj-hero-tx > *:not(h1){opacity:0;transform:translateY(12px)}
.jj.js-intro.tx-in .jj-hero-tx > *{opacity:1;transform:none;transition:opacity 1.2s ease,transform 1.2s ease}
.jj.js-intro.tx-in .jj-hero-tx > *:nth-child(2){transition-delay:.15s}
.jj.js-intro.tx-in .jj-hero-tx > *:nth-child(3){transition-delay:.35s}
.jj.js-intro.tx-in .jj-hero-tx > *:nth-child(4){transition-delay:.5s}
.jj.js-intro.tx-in .jj-hero-tx > *:nth-child(5){transition-delay:.7s}

/* ---------- Un día de boda: una columna al 70 % ---------- */
.jj.jj-day{padding-top:96px}
.jj.jj-day > .jj-kick, .jj.jj-day > h2, .jj.jj-day > .jj-lead{text-align:center;margin-left:auto!important;margin-right:auto!important}
.jj.jj-day > h2{max-width:900px!important}
.jj.jj-day > .jj-lead{max-width:680px!important}
.jj .jj-columna{display:block!important;width:70vw!important;max-width:none!important;margin:48px 0 0!important;position:relative;left:50%;transform:translateX(-50%)}
.jj .jj-columna .wp-block-image{width:100%!important;margin:0 0 20px!important;display:block}
.jj .jj-columna .wp-block-image:last-child{margin-bottom:0!important}
.jj .jj-columna .wp-block-image img{width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover}

/* ---------- El fotógrafo ---------- */
.jj .jj-me-cols{gap:64px}
.jj .jj-retrato{position:relative;margin:0}
.jj .jj-retrato:before{content:"";position:absolute;left:-18px;top:-18px;width:55%;height:55%;border:1px solid var(--amber);z-index:0}
.jj .jj-retrato img{position:relative;z-index:1;aspect-ratio:4/5;width:100%;object-fit:cover;object-position:30% 50%}
.jj .jj-retrato figcaption{font-size:12px;color:var(--mut);margin-top:10px;text-align:left}
.jj.jj-me h2 em{font-style:italic;color:var(--amber-d)}
.jj .jj-sign{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--ink);margin:6px 0 20px}
.jj .jj-facts{gap:34px;margin:26px 0 28px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jj .jj-facts p{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);line-height:1.5}
.jj .jj-facts strong{display:block;font-family:var(--serif);font-weight:500;font-size:38px;line-height:1;color:var(--ink);letter-spacing:0;margin-bottom:4px;font-variant-numeric:lining-nums}
.jj.jj-me .wp-block-buttons{margin-bottom:22px}

/* ---------- Cómo trabajo (fondo oscuro) ---------- */
.jj.jj-dark{background:var(--brown);color:#e9dfd3}
.jj.jj-dark h2,.jj.jj-dark h3{color:#fff}
.jj.jj-dark .jj-kick{color:var(--amber-l)}
.jj .jj-steps{gap:28px;margin-top:44px}
.jj .jj-steps .wp-block-column{border-top:1px solid rgba(216,161,109,.5);padding-top:20px}
.jj .jj-n{font-family:var(--serif);font-size:40px;color:var(--amber-l);line-height:1;margin:0 0 10px}
.jj .jj-steps h3{margin:0 0 8px}
.jj .jj-steps p:not(.jj-n){font-size:15px;color:#c9bcad;margin:0}
.jj.jj-dark .jj-cta-row{border-top-color:rgba(255,255,255,.15)}
.jj.jj-dark .jj-cta-row > p,.jj.jj-dark .jj-btn-text .wp-block-button__link{color:#fff}

/* ---------- ¿Encajamos? ---------- */
.jj .jj-fit{gap:56px;margin-top:40px}
.jj .jj-fit .wp-block-column{border-top:1px solid var(--ink);padding-top:26px}
.jj .jj-fit .jj-no{border-top-color:var(--line)}
.jj .jj-fit h3{font-size:28px;margin-bottom:14px}
.jj .jj-fit ul,.jj ul.jj-check{list-style:none;margin:0;padding:0}
.jj .jj-fit li,.jj ul.jj-check li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line);font-size:16px}
.jj .jj-fit li:last-child,.jj ul.jj-check li:last-child{border-bottom:0}
.jj .jj-yes li:before,.jj ul.jj-check li:before{content:"";position:absolute;left:2px;top:17px;width:14px;height:8px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.jj .jj-no li{color:var(--mut)}
.jj .jj-no li:before{content:"–";position:absolute;left:4px;top:9px;color:var(--mut)}
.jj .jj-fit strong, .jj ul.jj-check strong{color:var(--ink);font-weight:600}

/* ---------- Bodas reales (tarjetas) ---------- */
.jj .jj-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;margin-top:40px}
.jj .jj-card{min-width:0;margin:0!important}
.jj .jj-card .wp-block-image{margin:0;overflow:hidden;aspect-ratio:3/2}
.jj .jj-card .wp-block-image a,.jj .jj-card .wp-block-image img{display:block;width:100%;height:100%}
.jj .jj-card .wp-block-image img{object-fit:cover;transition:transform .6s}
.jj .jj-card:hover .wp-block-image img{transform:scale(1.04)}
.jj .jj-card h3{margin:16px 0 2px}
.jj .jj-card h3 a{text-decoration:none}
.jj .jj-card .jj-place{font-size:13px;color:var(--mut);letter-spacing:.04em;margin:0 0 8px}
.jj .jj-card p:not(.jj-place){font-size:14px;line-height:1.55;margin:0}
.jj .jj-card-big{grid-column:span 2;grid-row:span 2;display:flex!important;flex-direction:column}
.jj .jj-card-big .wp-block-image{aspect-ratio:auto;flex:1;min-height:320px;position:relative}
.jj .jj-card-big .wp-block-image a,.jj .jj-card-big .wp-block-image > img{position:absolute;inset:0}
.jj .jj-card-big .wp-block-image img{object-position:50% 75%}

/* ---------- Galerías por zona ---------- */
.jj .jj-thumbs{gap:14px!important;margin-top:36px}
.jj .jj-thumbs .wp-block-image{aspect-ratio:3/2;background:var(--ink)}
.jj .jj-thumbs .wp-block-image img{transition:transform .6s,opacity .3s}
.jj .jj-thumbs .wp-block-image:hover img{transform:scale(1.04);opacity:.9}
.jj .jj-thumbs.wp-block-gallery .wp-block-image figcaption{background:linear-gradient(0deg,rgba(27,24,23,.8),rgba(27,24,23,0));padding:34px 16px 12px;text-align:left;font-size:12px;letter-spacing:.04em;color:#e9dfd3;max-height:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.jj .jj-thumbs figcaption strong{display:block;font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:0;color:#fff;line-height:1.1}

/* ---------- Opiniones ---------- */
.jj .jj-ops{gap:44px;margin-top:40px;align-items:flex-start}
.jj .jj-ops .wp-block-embed figcaption{font-size:14px;color:var(--mut);margin-top:10px;text-align:left}
.jj .wp-block-quote{margin:0 0 22px;padding:0 0 22px;border:0;border-bottom:1px solid var(--line)}
.jj .wp-block-quote p{font-family:var(--serif);font-size:23px;font-style:italic;line-height:1.35;color:var(--ink);margin:0 0 8px}
.jj .wp-block-quote cite{font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--mut)}

/* ---------- Cómo contratar ---------- */
.jj .jj-pricing{gap:56px;margin-top:40px;border-top:1px solid var(--ink)}
.jj .jj-pricing-big{padding:34px 0}
.jj .jj-from{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);font-weight:700;margin:0}
.jj .jj-say{font-family:var(--serif);font-size:34px;line-height:1.2;color:var(--ink);margin:6px 0 16px}
.jj .jj-pricing-big p:last-child{font-size:15px;color:var(--mut)}
.jj .jj-pricing ul.jj-check{padding:26px 0}
.jj .jj-book-title{font-size:30px;margin:40px 0 22px}
.jj .jj-bsteps{gap:22px}
.jj .jj-bsteps .wp-block-column{border-top:1px solid var(--amber);padding-top:14px;font-size:15px}
.jj .jj-bsteps .jj-n{font-size:30px;color:var(--amber-d);margin-bottom:6px}
.jj .jj-bsteps strong{color:var(--ink);font-size:16px}

/* ---------- Dónde trabajo ---------- */
.jj .jj-zones{gap:40px;margin-top:40px}
.jj .jj-zones .wp-block-column{border-top:1px solid var(--ink);padding-top:26px;display:flex;flex-direction:column}
.jj .jj-zones h3{font-size:29px;margin-bottom:10px}
.jj .jj-zones p{font-size:15px;color:var(--mut)}
.jj .jj-zones p:not(.jj-more){flex:1}
.jj .jj-more a{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-d);text-decoration:none}
.jj .jj-also{margin-top:22px;font-size:15px;color:var(--mut)}

/* ---------- Preguntas frecuentes ---------- */
.jj .wp-block-details{border-bottom:1px solid var(--line);padding:20px 0;margin:0}
.jj .wp-block-details summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:23px;color:var(--ink);display:flex;justify-content:space-between;gap:20px}
.jj .wp-block-details summary::-webkit-details-marker{display:none}
.jj .wp-block-details summary:after{content:"+";color:var(--amber)}
.jj .wp-block-details[open] summary:after{content:"–"}
.jj .wp-block-details p{margin:12px 0 0}

/* ---------- Cierre con formulario ---------- */
.jj.jj-close{padding:140px 24px;min-height:0;color:#fff}
.jj.jj-close h2{color:#fff;font-size:clamp(38px,5.5vw,66px);max-width:none}
.jj.jj-close .wp-block-cover__inner-container > p{color:#e9dfd3;font-size:18px}
.jj .jj-wa-form{max-width:640px;margin:30px auto 0;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jj .jj-wa-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#d9cdbf}
.jj .jj-wa-form label.full,.jj .jj-wa-form .jj-wa-send,.jj .jj-wa-form .priv{grid-column:1/-1}
.jj .jj-wa-form input,.jj .jj-wa-form textarea{font:500 16px var(--sans);padding:10px 0;border:0;border-bottom:1px solid rgba(255,255,255,.55);border-radius:0;background:transparent;color:#fff;width:100%;min-height:48px;letter-spacing:0;text-transform:none}
.jj .jj-wa-form textarea{min-height:84px;resize:vertical}
.jj .jj-wa-form input::placeholder,.jj .jj-wa-form textarea::placeholder{color:rgba(255,255,255,.45)}
.jj .jj-wa-form input[type=date]{color-scheme:dark}
.jj .jj-wa-send{display:flex;justify-content:center;align-items:center;min-height:52px;margin-top:10px;background:#fff;color:var(--ink)!important;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.jj .jj-wa-send:hover{background:var(--amber-l)}
.jj .jj-wa-form .priv{font-size:12px;color:#c9bcad;margin:0;line-height:1.5}
.jj .jj-contact{margin-top:28px;font-size:14px;color:#d9cdbf;letter-spacing:.04em}
.jj .jj-contact a{color:#fff}

/* ---------- Botón de WhatsApp flotante ---------- */
.jj-wa-fix{position:fixed;right:20px;bottom:20px;z-index:99;width:50px;height:50px;border-radius:50%;background:#1b1817;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .4s}
.jj-wa-fix.show{opacity:1;pointer-events:auto}
.jj-wa-fix svg{width:24px;height:24px}

.jj a:focus-visible,.jj input:focus-visible,.jj textarea:focus-visible,.jj summary:focus-visible{outline:2px solid var(--amber-l);outline-offset:3px}


/* ---------- Bloque bajo el hero (reunión 2, 29-10-2026) ---------- */
section.jj.jj-manifiesto{padding:96px 24px 40px}
.jj.jj-manifiesto + .jj-day{border-top:0!important;padding-top:40px}
.jj.jj-manifiesto p{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.5;color:var(--ink);margin:0}

/* ---------- Vídeo de opiniones ---------- */
.jj .jj-video{max-width:860px!important;margin:40px auto 0 max(0px,calc((100% - var(--cs)) / 2))!important}
.jj .jj-video figcaption{font-size:14px;color:var(--mut);margin-top:10px;text-align:left}

/* ---------- Ventana de luz de WordPress (al hacer clic en las fotos de la boda) ---------- */
.wp-lightbox-overlay .scrim{background-color:#1b1817!important;opacity:.96!important}
.wp-lightbox-overlay .close-button{color:#fff!important;fill:#fff}
.wp-lightbox-overlay .close-button svg{fill:#fff}
@media(max-width:600px){section.jj.jj-manifiesto{padding:64px 16px 24px}}


/* =====================================================================
   6. PORTADA EN TABLET (900 px) Y MÓVIL (600 px)
   ===================================================================== */
/* ---------- Tablet ---------- */
@media(max-width:900px){
 section.jj{padding:84px 24px}
 .jj .jj-me-cols{gap:40px}
 .jj .jj-retrato{max-width:440px;margin-left:18px}
 .jj .jj-steps,.jj .jj-bsteps{flex-wrap:wrap!important}
 .jj .jj-steps > .wp-block-column,.jj .jj-bsteps > .wp-block-column{flex-basis:calc(50% - 14px)!important;flex-grow:0}
 .jj .jj-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .jj .jj-card-big{grid-row:auto}
 .jj .jj-card-big .wp-block-image{aspect-ratio:3/2;flex:none;min-height:0}
 .jj .jj-card-big .wp-block-image a,.jj .jj-card-big .wp-block-image > img{position:static}
 .jj .jj-thumbs.columns-3 .wp-block-image{width:calc(50% - 7px)!important}
 .jj .jj-columna{width:auto!important;left:auto;transform:none;margin-top:36px!important}
 .jj .jj-columna .wp-block-image{margin-bottom:12px!important}
}
/* ---------- Móvil ---------- */
@media(max-width:600px){
 .jj{font-size:16px}
 section.jj{padding:72px 16px}
 .jj.jj-nav{padding:0 16px}
 .jj .jj-logo a{font-size:24px}
 .jj .jj-hero-tx{padding:110px 20px 80px}
 .jj .jj-hero-tx h1{font-size:40px}
 .jj .jj-hero-tx .jj-intro{font-size:15.5px}
 .jj .jj-hero-tx .jj-sub{font-size:14.5px}
 .jj .jj-hero-cta{flex-direction:column}
 .jj .jj-steps > .wp-block-column,.jj .jj-bsteps > .wp-block-column{flex-basis:100%!important}
 .jj .jj-cards{grid-template-columns:1fr!important}
 .jj .jj-card-big{grid-column:auto}
 .jj .jj-columna .wp-block-image{margin-bottom:8px!important}
 .jj .jj-thumbs{gap:8px!important}
 .jj .jj-thumbs.columns-3 .wp-block-image{width:calc(50% - 4px)!important}
 .jj .jj-thumbs figcaption{font-size:0!important;padding:24px 10px 8px!important}
 .jj .jj-thumbs figcaption strong{font-size:20px}
 .jj .jj-say{font-size:28px}
 .jj .jj-facts{gap:20px}.jj .jj-facts strong{font-size:32px}
 .jj .jj-wa-form{grid-template-columns:1fr}
 .jj .jj-cta-row .wp-block-buttons{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 .jj .jj-slides .wp-block-image img{animation:none!important;transform:none}
 html{scroll-behavior:auto}
}


/* =====================================================================
   7. NOTAS INTERNAS EN AMARILLO
   Las etiquetas <mark> solo se ven en el editor.
   ===================================================================== */
/* Notas internas en amarillo: visibles solo en el editor */
body:not(.editor-styles-wrapper) .jj mark{display:none!important}

/* =====================================================================
   8. PÁGINAS INTERIORES: TEXTO JUSTIFICADO, TÍTULOS Y CABECERA FIJA
   Regla de Javier: texto justificado, sin partir palabras con guion.
   ===================================================================== */
/* --- Texto justificado en toda la web (pedido de Javier, 03-11-2026). No afecta a textos centrados ni a etiquetas cortas. --- */
main p:not(.has-text-align-center):not(.has-text-align-right):not(.has-text-align-left):not(:is(.jj-close,.jj-cta-row,.jj-manifiesto,.jj-hero-tx,.jj-day,.jj-nav,.jj-wa-form) p),
main .wp-block-post-content li{text-align:justify;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}

/* ---------- Cabecera común en todas las páginas (10-11-2026) ---------- */
body.page:not(.home) main.wp-block-group, body.single main.wp-block-group{background:#f6f1ea;margin-top:0!important}
body.page:not(.home) .wp-block-post-title, body.single .wp-block-post-title{text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(34px,5vw,52px);line-height:1.15;color:#1b1817;text-transform:none}

body:not(.home) .wp-site-blocks > footer.wp-block-template-part, body:not(.home) .wp-site-blocks > .wp-block-template-part:last-child{margin-block-start:0}
body:not(.home) .wp-block-template-part:has(> .jj-nav){position:sticky;top:0;z-index:50}
.admin-bar:not(.home) .wp-block-template-part:has(> .jj-nav){top:32px}
@media (max-width:782px){.admin-bar:not(.home) .wp-block-template-part:has(> .jj-nav){top:46px}}
body:not(.home) .jj.jj-nav, body:not(.home) .jj.jj-nav.solid{position:relative;top:0;background:#1b1817}


/* =====================================================================
   9. BODAS REALES (PORTADA) Y PORTFOLIO: CUADRÍCULA DE 4
   ===================================================================== */
/* ---------- Bodas reales en 2 filas de 4 (10-11-2026) ---------- */
.jj#bodas .jj-cards,.jj#portfolio .jj-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:1360px!important;margin-left:auto!important;margin-right:auto!important}
.jj#bodas .jj-card p,.jj#portfolio .jj-card p{text-align:left}
@media (max-width:1000px){.jj#bodas .jj-cards,.jj#portfolio .jj-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:600px){.jj#bodas .jj-cards,.jj#portfolio .jj-cards{grid-template-columns:1fr!important}}

/* ---------- Portfolio (10-11-2026) ---------- */
.jj#portfolio{padding-top:8px}
.jj#portfolio .jj-lead{margin-left:auto!important;margin-right:auto!important;max-width:760px;text-align:center}
.jj#portfolio > h2{text-align:center;margin:40px auto 0!important}
.jj#portfolio .jj-pf-text{margin-top:72px}
.jj#portfolio .jj-pf-text h2{margin-top:0}
.jj#portfolio .jj-pf-text h3{margin:32px 0 8px}
body.page:not(.home) main.wp-block-group > .wp-block-group:has(> .wp-block-post-title){padding-bottom:0}


/* =====================================================================
   10. TEXTO AL ANCHO DE LAS FOTOS (páginas interiores)
   Párrafos y listas justificados, última línea centrada, al mismo ancho que las galerías.
   ===================================================================== */
/* ---------- Texto justificado al ancho de las fotos en todas las páginas interiores (10-11-2026) ---------- */
body:not(.home) .jj.jj-day > .jj-lead, body:not(.home) .jj.jj-day > p:not(.jj-kick){position:relative;left:50%;transform:translateX(-50%);width:70vw!important;max-width:none!important;margin-left:0!important;margin-right:0!important;text-align:justify!important;text-align-last:center}
body.page:not(.home) .wp-block-post-content > p, body.page:not(.home) .wp-block-post-content > ul, body.single .wp-block-post-content > p, body.single .wp-block-post-content > ul{max-width:var(--wp--style--global--wide-size)!important;text-align:justify!important;text-align-last:center}
body.page:not(.home) .wp-block-post-content > h2, body.page:not(.home) .wp-block-post-content > h3, body.single .wp-block-post-content > h2, body.single .wp-block-post-content > h3{max-width:var(--wp--style--global--wide-size)!important;text-align:center}
body.page:not(.home) .wp-block-post-content > ul, body.single .wp-block-post-content > ul{list-style-position:inside}
.jj#portfolio .jj-pf-text{max-width:1360px!important}
.jj#portfolio .jj-pf-text > *{max-width:none!important;text-align:justify;text-align-last:center}
.jj#portfolio .jj-pf-text > h2, .jj#portfolio .jj-pf-text > h3{text-align:center}
@media (max-width:900px){body:not(.home) .jj.jj-day > .jj-lead, body:not(.home) .jj.jj-day > p:not(.jj-kick){left:auto;transform:none;width:auto!important}}

/* =====================================================================
   11. NUEVO EN EL TEMA HIJO (10-11-2026)
   Plantilla «Reportaje de boda», patrones «Galería» y «Llamada a la acción», y blog.
   ===================================================================== */

/* Plantilla «Reportaje de boda» */
.jj-reportaje .wp-block-post-content > .jj-day:first-child{padding-top:40px}
.jj-reportaje-cabecera .wp-block-post-title{margin-bottom:0}
/* Reportajes antiguos (fotos y párrafos sueltos, sin sección .jj): mismo ancho que la plantilla de página y aire antes de «Otras bodas» */
.jj-reportaje > .wp-block-post-content{margin-top:var(--wp--preset--spacing--50)}
.jj-reportaje > .wp-block-post-content:not(:has(> section.jj:last-child)):not(:has(> .jj-cta-bloque:last-child)){padding-bottom:var(--wp--preset--spacing--60)}
.jj-reportaje > .wp-block-post-content:has(> section.jj:first-child){margin-top:0}

/* Patrón «Galería»: suelto en una página o dentro de un reportaje */
.jj.jj-galeria{padding:0 24px;background:transparent}
section.jj .jj.jj-galeria{padding:0}
body:not(.home) .jj.jj-galeria > .jj-lead{position:relative;left:50%;transform:translateX(-50%);width:70vw!important;max-width:none!important;margin:48px 0 0!important;text-align:justify!important;text-align-last:center}

/* Patrón «Llamada a la acción» */
.jj.jj-cta-bloque{padding:0 24px 96px;background:transparent}
section.jj .jj.jj-cta-bloque{padding:0}
.jj.jj-cta-bloque .jj-cta-row{margin-top:48px}

/* Blog: lista de entradas con extracto */
.jj-blog .jj-blog-title{text-align:center;margin-bottom:0}
.jj-blog .wp-block-post-title a{text-decoration:none}
.jj-blog .wp-block-post-excerpt__more-link{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--accent-3);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* «Otras bodas»: parte de plantilla al final de cada reportaje (4 x 2; 2 columnas en tablet y móvil) */
section.jj.jj-otras{padding:96px 24px;border-top:1px solid var(--line)}
section.jj.jj-otras:not(.jj-day):not(.jj-hero) > h2{margin-left:auto!important;margin-right:auto!important;max-width:900px!important;text-align:center}
.jj.jj-otras .jj-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:1360px!important;margin-left:auto!important;margin-right:auto!important}
.jj.jj-otras .jj-card:nth-child(n+9){display:none}
.jj.jj-otras .jj-card p{text-align:left}
.jj.jj-otras .jj-link{margin-top:44px}
@media (max-width:1000px){.jj.jj-otras .jj-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:600px){
 section.jj.jj-otras{padding:64px 16px}
 .jj.jj-otras .jj-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
 .jj.jj-otras .jj-card h3{font-size:19px;margin-top:10px}
 .jj.jj-otras .jj-card .jj-place{font-size:12px}
}

@media (max-width:900px){
 body:not(.home) .jj.jj-galeria > .jj-lead{left:auto;transform:none;width:auto!important}
}