/* ═══ 03 · MAQUETACIÓN: contenedor, secciones, cabecera y pie ═══
   En WordPress el ancho lo da el layout «constrained» de theme.json
   (contentSize 1180px) y el margen lateral, --gutter en el root padding.
   .wrap se mantiene para el catálogo estático y para el contenido antiguo. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Secciones: todas son core/group alignfull con layout constrained */
section,.sec{padding:var(--section-y) 0;border-top:1px solid var(--border)}
.soft{background:var(--bg2)}
@media(max-width:700px){section,.sec{padding:var(--section-y-m) 0}}

/* Alineación a todo el ancho dentro del contenido de WordPress */
.wp-site-blocks{overflow-x:clip}
/* El root padding es 0 (theme.json): el contenido ya ocupa todo el ancho, así que
   alignfull no necesita márgenes negativos (con ellos se salía 1 gutter por la izquierda). */
.wp-block-post-content>.alignfull,.wp-site-blocks>.alignfull{margin-left:0;margin-right:0;width:auto;max-width:none}
.wp-block-html{max-width:none}
/* Un grupo constrained de WordPress centra a contentSize: coincide con .wrap */
.is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wrap);margin-left:auto!important;margin-right:auto!important}

/* ── Etiqueta y cabecera de sección ── */
.lbl{display:flex;align-items:baseline;gap:14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:30px}
.lbl b,.lbl strong{color:var(--blue-text);font-weight:600}
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:end;margin-bottom:60px}
.intro h2{max-width:22ch}
.intro p{font-size:19px;color:var(--tx);max-width:48ch;padding-bottom:4px}
.intro.mid{display:block;max-width:58ch;margin-left:auto;margin-right:auto;text-align:center}
.intro.mid h2{max-width:none}
.intro.mid p{margin-top:18px;margin-left:auto;margin-right:auto;padding-bottom:0}
.lbl.mid{justify-content:center}
/* Utilidades: sustituyen a los style="" de las maquetas v2 (construir.py falla si queda uno) */
.mt-0{margin-top:0}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-22{margin-top:22px}.mt-26{margin-top:26px}.mt-28{margin-top:28px}.mt-30{margin-top:30px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-52{margin-top:52px}.mt-56{margin-top:56px}.mt-64{margin-top:64px}
.mb-0{margin-bottom:0}.mb-20{margin-bottom:20px}.mb-22{margin-bottom:22px}.mb-26{margin-bottom:26px}.m-0{margin:0}
.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-19{font-size:19px}
.fw-400{font-weight:400}
.lead{font-size:18px}
.lead-19{font-size:19px;max-width:46ch}
.maxw-46{max-width:46ch}.maxw-70{max-width:70ch}.maxw-860{max-width:860px;margin-left:auto;margin-right:auto}.maxw-980{max-width:980px;margin-left:auto;margin-right:auto}
.tx-dim{color:var(--tx-dim)}
.col-center{display:flex;flex-direction:column;justify-content:center}
.ai-center{align-items:center}
.flex-28{display:flex;gap:28px;flex-wrap:wrap}
.one-col{grid-template-columns:1fr}
.w-52{width:52%}
.ar-4-5 img,img.ar-4-5{aspect-ratio:4/5}
.ar-wide img,img.ar-wide{aspect-ratio:1907/921}
.bt-dark{border-top:1px solid var(--border-dark)}
/* celdas sueltas de .cols3 apiladas (ficha técnica de temi) */
.cell-mid{padding:24px 0;border-right:none}
.cell-top{padding:0 0 24px;border-right:none}
.cell-bottom{padding:24px 0 0;border-right:none;border-bottom:none}
@media(max-width:860px){
  .intro{grid-template-columns:1fr;gap:18px;align-items:start;margin-bottom:44px}
  .intro h2{max-width:none}
  .intro p{padding-bottom:0;font-size:17px}
}

/* ── Cabecera ── */
header.site{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:40}
header.site .wrap,header.site .hd{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:28px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.brand{font-size:20px;font-weight:700;letter-spacing:-.035em;color:var(--tx-hi);flex:none;display:inline-flex;align-items:center}
.brand span{color:var(--blue)}
.brand img{height:28px;width:auto}
.nav{display:flex;align-items:center;gap:30px;font-size:15px;color:var(--tx-dim);font-weight:500}
.nav a:hover,.nav a[aria-current]{color:var(--tx-hi)}
.nav a[aria-current]{border-bottom:2px solid var(--blue);padding-bottom:2px}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:11px 18px;font-size:15px}
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius);align-items:center;justify-content:center;cursor:pointer;flex:none;background:transparent}
.nav-burger i{display:block;width:18px;height:2px;background:var(--tx-hi);position:relative;transition:background .15s}
.nav-burger i::before,.nav-burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--tx-hi);transition:transform .15s,top .15s}
.nav-burger i::before{top:-6px}.nav-burger i::after{top:6px}
.nav-burger[aria-expanded="true"] i{background:transparent}
.nav-burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
@media(max-width:960px){
  .nav{display:none}
  .nav-cta .btn-b{display:none}
  .nav-burger{display:flex}
  header.site.is-open .nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:var(--header-h);background:var(--bg);border-bottom:1px solid var(--border);padding:12px var(--gutter) 20px;gap:0;font-size:17px}
  header.site.is-open .nav a{padding:14px 0;border-bottom:1px solid var(--border);color:var(--tx-hi)}
  header.site.is-open .nav a[aria-current]{border-bottom:1px solid var(--border);color:var(--blue-text)}
  header.site.is-open .nav a.nav-contacto{display:block}
}
.nav a.nav-contacto{display:none} /* solo aparece en el menú móvil (en escritorio es el botón) */

/* ── Migas de pan ── */
.crumbs{font-size:13px;color:var(--tx-dim);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.crumbs a:hover{color:var(--tx-hi)}
.crumbs span::before,.crumbs .sep{content:"/";margin-right:8px;color:var(--border-hi)}
/* Migas de Yoast con el mismo aspecto */
.yoast-breadcrumbs{font-size:13px;color:var(--tx-dim);margin-bottom:28px}
.yoast-breadcrumbs a:hover{color:var(--tx-hi)}
.yoast-breadcrumbs .breadcrumb_last{color:var(--tx-dim)}

/* ── Pie ── */
footer.site{background:var(--bg-dark);color:var(--tx-inv-dim);padding:72px 0 40px;font-size:15px;border-top:1px solid var(--border-dark)}
footer.site .wrap,footer.site .ft{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:40px;padding-bottom:48px;border-bottom:1px solid var(--border-dark)}
.fcols h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-inv-dim);margin-bottom:14px;font-weight:600}
.fcols a{display:block;padding:5px 0;color:var(--tx-inv);font-size:15px}
.fcols a:hover{color:#fff}
.fend{padding-top:28px;font-size:13px;color:var(--tx-inv-dim);line-height:1.7;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fend a{color:var(--tx-inv)}
.fend a:hover{color:#fff}