/*
Theme Name: Moldumat
Theme URI: https://moldumatart.com
Description: Tema hijo de GeneratePress para la web de Moldumat (Mataró). Paleta y tipografía de la maqueta aprobada; patrones bloqueados para que el cliente edite sin romper. Construido por DiversoBrand.
Author: DiversoBrand · Daniel Ortegón
Author URI: https://diversobrand.com
Template: generatepress
Version: 1.0.35
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: moldumat
*/

/* ------------------------------------------------------------------
   0 · Fuentes autoalojadas (latin, woff2). Sin API de Google.
------------------------------------------------------------------ */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/montserrat-var.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/lora-400-italic.woff2") format("woff2")}

/* ------------------------------------------------------------------
   1 · Tokens. Los colores viven en Personalizador → Colores (GP los
   publica como --contrast, --base, --accent…). Aquí solo alias.
------------------------------------------------------------------ */
:root{
  --mo-red:var(--accent,#BC3530);
  --mo-red-dark:#9E2C28;
  --mo-red-light:#E2736E;      /* AA sobre negro: 5,73:1 (el rojo de marca se queda en 3,06:1) */
  --mo-black:var(--contrast,#1A1A1A);
  --mo-text:var(--contrast-2,#3D3D3D);
  --mo-muted:#6B665F;           /* AA: 5,69:1 sobre blanco · 4,54:1 sobre beige */
  --mo-beige:var(--base,#EAE5DC);
  --mo-border:var(--base-2,#D5CFBF);
  --mo-white:var(--base-3,#FFFFFF);
  --mo-wa:#25D366;
  --mo-radius:8px;
  /* GP no tiene theme.json: sin esto los bloques de disposición limitada pierden el ancho */
  --wp--style--global--content-size:1200px;
  --wp--style--global--wide-size:1200px;
}

/* ------------------------------------------------------------------
   2 · Base tipográfica (gana a la de GP por orden de carga)
------------------------------------------------------------------ */
body{font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.7;color:var(--mo-text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Montserrat,system-ui,sans-serif;font-weight:600;line-height:1.2;color:var(--mo-black);text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(28px,4vw,48px);font-weight:700}
h2{font-size:clamp(22px,3vw,36px)}
h3{font-size:18px}
p{margin:0 0 1em}
.entry-content>*:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--mo-red);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Sin título de página ni márgenes de GP en las páginas maquetadas */
.page .entry-header,.single-taller .entry-header{display:none}
.page .site-main,.single-taller .site-main{margin:0}
.page .content-area .site-main .inside-article,.single-taller .inside-article{padding:0}
.page.one-container .site-content,.single-taller.one-container .site-content{padding:0}
.page .inside-article{background:transparent}

/* Grupo interior de GP: sin relleno ni ancho en nuestras secciones (regla 10 de la skill) */
[class*="mo-"] > .wp-block-group__inner-container{padding:0;max-width:none}

/* ------------------------------------------------------------------
   3 · Secciones y rejilla
------------------------------------------------------------------ */
.mo-sec{padding-block:56px}
.mo-sec-sm{padding-block:48px}
.mo-sec-xs{padding-block:28px 12px}
@media(min-width:768px){.mo-sec{padding-block:80px}.mo-sec-sm{padding-block:64px}}
.mo-sec,.mo-sec-sm,.mo-sec-xs{padding-inline:16px}
@media(min-width:768px){.mo-sec,.mo-sec-sm,.mo-sec-xs{padding-inline:32px}}
.wp-block-group.mo-sec>*,.wp-block-group.mo-sec-sm>*,.wp-block-group.mo-sec-xs>*{max-width:1200px;margin-left:auto!important;margin-right:auto!important}
.wp-block-group.mo-sec>.mo-narrow-l,.wp-block-group.mo-sec-sm>.mo-narrow-l{margin-left:auto!important;margin-right:auto!important}
.bg-white{background:var(--mo-white)}
.bg-beige{background:var(--mo-beige)}
.bg-black{background:var(--mo-black);color:rgba(255,255,255,.85)}
.bg-black h1,.bg-black h2,.bg-black h3,.bg-black .eyebrow{color:#fff}
.bg-black .eyebrow.red{color:var(--mo-red)}
.mo-narrow{max-width:768px!important}
.mo-narrow-l{max-width:680px!important}
.mo-center{text-align:center}

.eyebrow{text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:600;margin:0 0 12px;color:var(--mo-black)}
.eyebrow.red,.eyebrow.has-accent-color{color:var(--mo-red)}
.red{color:var(--mo-red)}
.muted{color:var(--mo-muted)}
.small{font-size:14px}
.lead{font-size:clamp(16px,1.6vw,19px)}
.bg-black .lead{color:rgba(255,255,255,.85)}
.score{font-size:clamp(22px,3vw,32px);font-weight:600;color:var(--mo-black);margin:24px 0 8px}

/* Dos columnas alineadas al centro (texto + foto) */
.mo-two.wp-block-columns{align-items:center;gap:40px}
@media(min-width:782px){.mo-two.wp-block-columns{gap:64px}}
.mo-two.mo-top.wp-block-columns{align-items:flex-start}

/* ------------------------------------------------------------------
   4 · Botones: estilos de bloque para core/button
------------------------------------------------------------------ */
.wp-block-button .wp-block-button__link{font:600 11px/1 Montserrat,sans-serif;letter-spacing:2.5px;text-transform:uppercase;border-radius:2px;padding:16px 28px;min-height:44px;border:1px solid transparent;transition:background .2s,color .2s,transform .1s}
.wp-block-button.is-style-mo-primary .wp-block-button__link,.wp-block-button:not([class*="is-style-"]) .wp-block-button__link{background:var(--mo-red);color:#fff;border-color:var(--mo-red)}
.wp-block-button.is-style-mo-primary .wp-block-button__link:hover,.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover{background:var(--mo-red-dark)}
.wp-block-button.is-style-mo-secondary .wp-block-button__link{background:transparent;color:var(--mo-black);border-color:var(--mo-black)}
.wp-block-button.is-style-mo-secondary .wp-block-button__link:hover{background:var(--mo-black);color:#fff}
.wp-block-button.is-style-mo-ghost .wp-block-button__link{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.wp-block-button.is-style-mo-ghost .wp-block-button__link:hover{background:#fff;color:var(--mo-black)}
.wp-block-button.is-style-mo-outline-light .wp-block-button__link{background:rgba(20,16,12,.68);color:#fff;border-color:#fff}
.wp-block-button.is-style-mo-outline-light .wp-block-button__link:hover{background:#fff;color:var(--mo-black)}

/* ------------------------------------------------------------------
   5 · Cabecera y menú (GP + ajustes)
------------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:50}
.site-header,.main-navigation{background:var(--mo-black)}
/* El logo manda su propia proporcion. GeneratePress imprime en linea
   `.site-header .header-image{width:140px}` (0,2,0) y ganaba a `.site-logo img` (0,1,1):
   se aplicaban ancho Y alto a la vez y el logo salia estirado un 63%.
   Con `.site-header .site-logo img` (0,2,1) gana esta regla y width:auto vuelve a mandar.
   Si se cambia el alto, NO tocar el ancho: lo calcula el navegador. */
/* La cabecera mide ahora 104 px: el destino de los enlaces internos y del
   «Saltar al contenido» tiene que despejarla. */
html{scroll-padding-top:124px}

/* 80 px NO es estetica: es el minimo al que «LA BOTIGA DE MARCS» se lee.
   La bajada mide el 12,4% de la altura del logo, asi que a 64 px cae en 8,0 px,
   que es el umbral de lectura en pantalla. Por debajo de 68 px deja de leerse y
   el logo queda incompleto. La cabecera pasa a 104 px (80 + 12+12 de relleno).
   Decision de Daniel, 17-sep: la bajada es parte del logo y se respeta. */
.site-header .site-logo img{height:64px;width:auto;max-width:none}
/* Sin excepcion en movil: si la bajada es parte del logo, se lee en todas las pantallas.
   A 375 px el logo ocupa 119 px de ancho y quedan 161 px hasta el boton del menu. */
.inside-header,.inside-navigation{max-width:1320px}
.inside-header{padding-top:12px;padding-bottom:12px}
.main-navigation .main-nav ul li a{line-height:48px}
.main-navigation .main-nav ul li a{font-weight:500;font-size:14px;padding-left:14px;padding-right:14px;white-space:nowrap}
.main-navigation .main-nav>ul{flex-wrap:nowrap}
.main-navigation ul ul{background:#242424}
.main-navigation .main-nav ul li.mo-nav-cta>a{background:var(--mo-red);color:#fff;border-radius:2px;padding:9px 18px;line-height:1;margin-left:12px;font-weight:600;font-size:13px}
.main-navigation .main-nav ul li.mo-nav-cta>a:hover{background:var(--mo-red-dark)}
@media(max-width:1279px){.main-navigation .main-nav ul li.mo-nav-cta>a{margin:8px 0 0;display:inline-block}}
.inside-navigation{position:static}

/* ------------------------------------------------------------------
   6 · Hero (bloque Cover con clase mo-hero)
------------------------------------------------------------------ */
.mo-hero.wp-block-cover{min-height:520px;padding:64px 16px}
@media(min-width:768px){.mo-hero.wp-block-cover{padding:64px 32px}}
.mo-hero .wp-block-cover__background{background:linear-gradient(to right,rgba(20,16,12,.88) 0%,rgba(20,16,12,.72) 45%,rgba(20,16,12,.25) 85%)!important;opacity:1!important}
.mo-hero .wp-block-cover__inner-container{max-width:1200px;width:100%;margin:0 auto}
.mo-hero .wp-block-cover__inner-container>*{max-width:760px}
.mo-hero h1{font-size:clamp(34px,5.5vw,64px);color:#fff;line-height:1.1;margin-bottom:20px}
.mo-hero .eyebrow{color:rgba(255,255,255,.95)}
.mo-hero p{color:rgba(255,255,255,.95)}
.mo-hero .lead{max-width:640px}
.mo-hero .wp-block-buttons{margin-top:32px}
.mo-hero .mo-badges{display:flex;gap:16px 24px;flex-wrap:wrap;margin:40px 0 0;font-size:12px;color:rgba(255,255,255,.9)}

/* ------------------------------------------------------------------
   7 · Tarjetas, fotos, reseñas, FAQ, pasos
------------------------------------------------------------------ */
.mo-cards.wp-block-columns{gap:20px}
@media(min-width:600px) and (max-width:781px){.mo-cards.wp-block-columns{flex-wrap:wrap}.mo-cards.wp-block-columns>.wp-block-column{flex-basis:calc(50% - 12px)!important}.mo-revs.wp-block-columns{flex-wrap:wrap}.mo-revs.wp-block-columns>.wp-block-column{flex-basis:calc(50% - 12px)!important}}
.mo-card{background:#fff;border:1px solid var(--mo-border);border-radius:var(--mo-radius);overflow:hidden;display:flex;flex-direction:column}
.mo-card .wp-block-image{margin:0}
.mo-card .wp-block-image img{aspect-ratio:3/2;object-fit:cover;width:100%}
.mo-card-b{padding:24px;display:flex;flex-direction:column;flex:1}
.mo-card-b .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:2px;margin-bottom:10px}
.mo-card-b h3{margin-bottom:10px}
@media(min-width:600px){.mo-card-b h3{min-height:calc(3 * 1.2em)}}
.mo-card-b h3 a{color:var(--mo-black);text-decoration:none}
.mo-card-b h3 a:hover{color:var(--mo-red)}
.mo-card-b p:last-child{margin:0}
.mo-card.beige{background:var(--mo-beige);padding:24px}

.mo-ph img,.mo-ph .wp-block-image img{border-radius:var(--mo-radius);object-fit:cover;width:100%}
.mo-ph.r43 img{aspect-ratio:4/3}.mo-ph.r34 img{aspect-ratio:3/4}.mo-ph.r54 img{aspect-ratio:5/4}.mo-ph.r45 img{aspect-ratio:4/5}
.mo-prov{position:relative}
.mo-prov::after{content:"Foto provisional";position:absolute;left:8px;top:8px;background:rgba(26,26,26,.72);color:#fff;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.mo-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;background:#F2EDE2;border:1px dashed var(--mo-border);color:#6B665E;font:600 11px Montserrat,sans-serif;letter-spacing:2.5px;text-transform:uppercase;padding:16px;border-radius:4px;min-height:120px}

.mo-rev{border:1px solid var(--mo-border);border-radius:var(--mo-radius);padding:28px;display:flex;flex-direction:column;background:#fff}
.bg-white .mo-rev{background:var(--mo-beige)}
.mo-rev .stars{color:var(--mo-red);letter-spacing:2px;font-size:14px;margin:0}
.mo-rev .quote,.mo-rev blockquote p{font:italic 400 17px/1.7 Lora,Georgia,serif;margin:20px 0 0;flex:1}
.mo-rev .who{margin-top:24px;padding-top:20px;border-top:1px solid var(--mo-border);font-size:14px;color:var(--mo-black);font-weight:600}
.mo-rev .who small{display:block;font:600 11px Montserrat,sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--mo-muted);margin-top:4px}

.mo-faq .wp-block-details{border-bottom:1px solid var(--mo-border);margin:0}
.mo-faq .wp-block-details summary{cursor:pointer;font-weight:600;color:var(--mo-black);padding:20px 0;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.mo-faq .wp-block-details summary::-webkit-details-marker{display:none}
.mo-faq .wp-block-details summary::after{content:"+";color:var(--mo-muted)}
.mo-faq .wp-block-details[open] summary::after{content:"–"}
.mo-faq .wp-block-details p{margin:0 0 20px}

.mo-steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:40px;grid-template-columns:1fr;counter-reset:paso}
@media(min-width:768px){.mo-steps{grid-template-columns:1fr 1fr}}
.mo-steps li{display:flex;gap:20px;counter-increment:paso}
.mo-steps li::before{content:counter(paso);font-size:clamp(34px,5.5vw,64px);font-weight:700;line-height:1;color:var(--mo-red)}

/* Contacto */
.mo-ct{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
.mo-ct li{display:flex;gap:16px}
.mo-ct .eyebrow{margin:0 0 4px}
.mo-ct p{margin:0}
.mo-map{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;aspect-ratio:4/3;border:1px solid var(--mo-border);border-radius:var(--mo-radius);background:#F2EDE2;text-decoration:none;color:var(--mo-black)}
.mo-map b{color:var(--mo-red)}

/* Talleres */
.mo-tcard{display:grid;gap:24px;grid-template-columns:1fr;background:#fff;border:1px solid var(--mo-border);border-radius:var(--mo-radius);overflow:hidden;text-decoration:none;color:var(--mo-text)}
@media(min-width:768px){.mo-tcard{grid-template-columns:2fr 3fr}}
.mo-tcard img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.mo-tcard-b{padding:24px 24px 28px;display:flex;flex-direction:column;gap:14px}
.mo-tcard-b p{margin:0}
.mo-meta{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--mo-black)}
.mo-meta.big{font-size:16px;margin-top:24px}
.mo-celeb{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr}
@media(min-width:768px){.mo-celeb{grid-template-columns:1fr 1fr;column-gap:40px}}
.mo-celeb li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--mo-border)}
.mo-celeb .fecha{flex:0 0 120px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--mo-muted);padding-top:3px}
.mo-celeb b{color:var(--mo-black)}
.mo-celeb p{margin:4px 0 0;font-size:14px}
.mo-estado{display:inline-block;font:600 11px Montserrat,sans-serif;letter-spacing:2px;text-transform:uppercase;padding:6px 10px;border-radius:2px;background:var(--mo-beige);color:var(--mo-black)}
.mo-estado.proximo{background:var(--mo-red);color:#fff}

/* ------------------------------------------------------------------
   8 · Formularios (Forminator) — playbook lead-form-ux
   Un tema por pantalla, opciones como tarjetas, primario solo al final,
   esquinas suaves, etiquetas legibles, foco visible, 44 px táctiles.
------------------------------------------------------------------ */
.mo-form-card{background:#fff;border:1px solid var(--mo-border);border-radius:var(--mo-radius);padding:24px}
@media(min-width:768px){.mo-form-card{padding:40px}}
.bg-white .mo-form-card{background:var(--mo-beige)}
.mo-form-card .forminator-ui.forminator-custom-form{font-family:Montserrat,sans-serif!important}
/* etiquetas y ayudas */
.forminator-ui.forminator-custom-form .forminator-label{font:600 15px/1.4 Montserrat,sans-serif!important;color:var(--mo-black)!important;margin-bottom:8px!important}
.forminator-ui.forminator-custom-form .forminator-label .forminator-required{color:var(--mo-red)!important}
.forminator-ui.forminator-custom-form .forminator-description{font:400 13px/1.5 Montserrat,sans-serif!important;color:var(--mo-muted)!important;margin-top:8px!important}
.forminator-ui.forminator-custom-form .forminator-row{margin-bottom:24px!important;display:flex!important;flex-wrap:wrap;gap:16px}
.forminator-ui.forminator-custom-form .forminator-row .forminator-col{flex:1 1 100%;min-width:0}
@media(min-width:600px){.forminator-ui.forminator-custom-form .forminator-row .forminator-col-6{flex:1 1 calc(50% - 8px)}}
.forminator-ui.forminator-custom-form .forminator-col-12.forminator-field-number .forminator-input{max-width:200px}
/* campos */
.forminator-ui.forminator-custom-form .forminator-input,.forminator-ui.forminator-custom-form .forminator-textarea,.forminator-ui.forminator-custom-form .forminator-input-with-prefix{border:1px solid var(--mo-border)!important;border-radius:8px!important;background:#fff!important;font:400 16px Montserrat,sans-serif!important;color:var(--mo-text)!important;min-height:48px;padding:12px 16px!important;box-shadow:none!important}
.forminator-ui.forminator-custom-form .forminator-textarea{min-height:96px!important;height:96px!important}
.forminator-ui.forminator-custom-form .forminator-input:focus,.forminator-ui.forminator-custom-form .forminator-textarea:focus{border-color:var(--mo-red)!important;box-shadow:0 0 0 3px rgba(188,53,48,.15)!important;outline:none!important}
.forminator-ui.forminator-custom-form ::placeholder{color:#767169!important;opacity:1}
/* opciones como tarjetas (radio y checkbox) */
.forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-radio){display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){.forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-radio){grid-template-columns:1fr 1fr}}
.forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-radio)>.forminator-label,.forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-radio)>.forminator-description,.forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-radio)>.forminator-error-message{grid-column:1/-1}
.forminator-ui.forminator-custom-form .forminator-radio,.forminator-ui.forminator-custom-form .forminator-checkbox{display:flex!important;align-items:center;gap:12px;min-height:48px;margin:0!important;padding:12px 16px;border:1px solid var(--mo-border);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.forminator-ui.forminator-custom-form .forminator-radio:hover,.forminator-ui.forminator-custom-form .forminator-checkbox:hover{border-color:var(--mo-black)}
.forminator-ui.forminator-custom-form .forminator-radio:has(input:checked),.forminator-ui.forminator-custom-form .forminator-checkbox:has(input:checked){border:2px solid var(--mo-red);background:#FBF1F0;padding:11px 15px}
.forminator-ui.forminator-custom-form .forminator-radio:has(input:focus-visible),.forminator-ui.forminator-custom-form .forminator-checkbox:has(input:focus-visible){box-shadow:0 0 0 3px rgba(188,53,48,.2)}
.forminator-ui.forminator-custom-form .forminator-radio-label,.forminator-ui.forminator-custom-form .forminator-checkbox-label{font:500 15px/1.4 Montserrat,sans-serif!important;color:var(--mo-black)!important}
.forminator-ui.forminator-custom-form .forminator-radio-bullet,.forminator-ui.forminator-custom-form .forminator-checkbox-box{flex:0 0 auto;border-color:var(--mo-border)!important}
.forminator-ui.forminator-custom-form .forminator-radio input:checked+.forminator-radio-bullet,.forminator-ui.forminator-custom-form .forminator-checkbox input:checked+.forminator-checkbox-box{background:var(--mo-red)!important;border-color:var(--mo-red)!important}
/* consentimiento: texto legible, sin tarjeta */
.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-checkbox{min-height:0;padding:0;border:0;background:transparent;align-items:flex-start}
.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-checkbox:has(input:checked){border:0;background:transparent;padding:0}
.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-checkbox-label{font-size:13px!important;font-weight:400!important;color:var(--mo-text)!important;line-height:1.5}
.forminator-ui.forminator-custom-form .forminator-field-consent a{color:var(--mo-red)}
/* subida de archivo: secundario, no compite con el CTA */
.forminator-ui.forminator-custom-form .forminator-button-upload{background:transparent!important;color:var(--mo-black)!important;border:1px solid var(--mo-black)!important;border-radius:2px!important;font:600 11px/1 Montserrat,sans-serif!important;letter-spacing:2px;text-transform:uppercase;padding:14px 20px!important;min-height:44px}
.forminator-ui.forminator-custom-form .forminator-button-upload:hover{background:var(--mo-black)!important;color:#fff!important}
/* botones: Siguiente ligero, Atrás como texto, enviar en rojo */
.forminator-ui.forminator-custom-form .forminator-button{font:600 11px/1 Montserrat,sans-serif!important;letter-spacing:2.5px;text-transform:uppercase;border-radius:2px!important;padding:16px 28px!important;min-height:44px}
.forminator-ui.forminator-custom-form .forminator-button-submit{background:var(--mo-red)!important;color:#fff!important;border:1px solid var(--mo-red)!important}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover{background:var(--mo-red-dark)!important}
.forminator-ui.forminator-custom-form .forminator-button-next{background:#fff!important;color:var(--mo-red)!important;border:1px solid var(--mo-red)!important}
.forminator-ui.forminator-custom-form .forminator-button-next:hover{background:var(--mo-red)!important;color:#fff!important}
.forminator-ui.forminator-custom-form .forminator-button-back{background:transparent!important;color:var(--mo-muted)!important;border:0!important;padding-left:0!important;letter-spacing:1.5px}
.forminator-ui.forminator-custom-form .forminator-button-back:hover{color:var(--mo-black)!important}
.forminator-ui.forminator-custom-form .forminator-pagination-footer{margin-top:8px!important;display:flex;justify-content:space-between;align-items:center;gap:12px}
/* progreso: línea fina en rojo, sin porcentaje */
.forminator-ui.forminator-custom-form .forminator-pagination-steps{margin-bottom:28px!important}
.forminator-ui.forminator-custom-form .forminator-progress-bar{height:6px!important;border-radius:3px;background:var(--mo-border)!important}
.forminator-ui.forminator-custom-form .forminator-progress-bar span{background:var(--mo-red)!important;border-radius:3px}
.forminator-ui.forminator-custom-form .forminator-progress-label{display:none!important}
/* errores y éxito */
.forminator-ui.forminator-custom-form .forminator-error-message{font:400 13px Montserrat,sans-serif!important;color:var(--mo-red)!important;margin-top:6px!important}
.forminator-ui.forminator-custom-form .forminator-field.forminator-has_error .forminator-input,.forminator-ui.forminator-custom-form .forminator-field.forminator-has_error .forminator-textarea{border-color:var(--mo-red)!important}
.forminator-ui .forminator-response-message{font-family:Montserrat,sans-serif!important;border-radius:8px!important}
.forminator-ui .forminator-response-message.forminator-success{background:#EAE5DC!important;color:var(--mo-black)!important;border-left:4px solid var(--mo-red)!important}
/* móvil: una columna, botones a ancho completo */
@media(max-width:599px){.forminator-ui.forminator-custom-form .forminator-button{width:100%;justify-content:center}.forminator-ui.forminator-custom-form .forminator-pagination-footer{flex-direction:column-reverse;align-items:stretch}.forminator-ui.forminator-custom-form .forminator-button-back{text-align:center}}

/* ------------------------------------------------------------------
   9 · Pie de página
------------------------------------------------------------------ */
.site-footer{background:var(--mo-black);color:rgba(255,255,255,.8)}
.footer-widgets{padding:56px 0 32px}
.footer-widgets .inside-footer-widgets{gap:32px}
.footer-widgets .widget{margin-bottom:0}
.footer-widgets p{font-size:14px;line-height:1.7;margin:0 0 8px;color:rgba(255,255,255,.8)}
.footer-widgets strong{color:#fff;font-weight:600}
.footer-widgets .widget-title{color:#fff;text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:600;margin-bottom:20px}
.footer-widgets a{color:rgba(255,255,255,.8);text-decoration:none}
.footer-widgets a:hover{color:#fff}
.footer-widgets ul{list-style:none;margin:0;padding:0}
.footer-widgets li{margin-bottom:8px;font-size:14px}
.site-info{font-size:13px;color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.12);background:var(--mo-black)}
.site-info .inside-site-info{flex-direction:column;gap:14px;text-align:center;padding-top:28px;padding-bottom:28px}
.site-info .copyright-bar{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.mo-legal-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px}
.mo-legal-nav a,.mo-legal-nav .mo-cookies{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding:4px 0;cursor:pointer}
.mo-legal-nav a:hover,.mo-legal-nav .mo-cookies:hover{color:var(--mo-red-light);border-bottom-color:var(--mo-red-light)}
.mo-legal-nav .mo-sep{color:rgba(255,255,255,.35)}
.mo-legal-nav [hidden]{display:none}
.mo-legal-nav .mo-cookies{background:none;border:0;font:inherit}
.site-info .copyright{color:rgba(255,255,255,.6);font-size:12px}
.site-info .cmplz-manage-consent-container{display:none}

/* ------------------------------------------------------------------
   10 · Botón flotante de WhatsApp (logo oficial, verde, medible)
------------------------------------------------------------------ */
.mo-wa{position:fixed;right:20px;bottom:20px;z-index:40;width:56px;height:56px;border-radius:50%;background:var(--mo-wa);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s}
.mo-wa:hover{transform:scale(1.06)}
.mo-wa svg{width:30px;height:30px;fill:#fff}

/* ------------------------------------------------------------------
   11 · Banner de cookies (Complianz): Aceptar y Rechazar con el mismo formato (guía AEPD 2023)
------------------------------------------------------------------ */
.cmplz-cookiebanner{font-family:Montserrat,system-ui,sans-serif!important;border-radius:8px!important}
.cmplz-cookiebanner .cmplz-title{font-weight:600!important;color:var(--mo-black)!important}
.cmplz-cookiebanner .cmplz-message{font-size:13px!important;line-height:1.5!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,.cmplz-cookiebanner .cmplz-btn.cmplz-deny{background:var(--mo-red)!important;color:#fff!important;border:1px solid var(--mo-red)!important;border-radius:2px!important;font-weight:600!important;letter-spacing:1.5px;text-transform:uppercase;font-size:11px!important;min-height:44px}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover{background:var(--mo-red-dark)!important;border-color:var(--mo-red-dark)!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{background:transparent!important;color:var(--mo-black)!important;border:1px solid var(--mo-black)!important;border-radius:2px!important;font-size:11px!important;letter-spacing:1.5px;text-transform:uppercase;min-height:44px}
.cmplz-cookiebanner .cmplz-links a,.cmplz-cookiebanner .cmplz-link{color:var(--mo-red)!important}
.cmplz-cookiebanner .cmplz-close{color:var(--mo-black)!important}

/* ------------------------------------------------------------------
   12 · Contraste AA sobre fondo negro (bloque 5 de la auditoría)
   #BC3530 sobre #1A1A1A da 3,06:1. Sobre oscuro usamos #E2736E (5,73:1).
------------------------------------------------------------------ */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item>a,
.main-navigation .main-nav ul li.current-menu-ancestor>a,
.main-navigation .main-nav ul li.current_page_item>a,
.main-navigation ul ul li a:hover{color:var(--mo-red-light)!important}
.main-navigation .main-nav ul li.mo-nav-cta>a,
.main-navigation .main-nav ul li.mo-nav-cta.current-menu-item>a{color:#fff!important}
.bg-black .eyebrow.red,.bg-black .red,.mo-hero .eyebrow.red{color:var(--mo-red-light)}
.footer-widgets a:hover,.site-info a:hover{color:var(--mo-red-light)!important}
.mo-estado.proximo{background:var(--mo-red);color:#fff}

/* ------------------------------------------------------------------
   13 · Pulido visual (pasada del 17-sep)
   Todo lo de aquí está medido en el navegador, no estimado.
   El logo NO se toca: solo cambia lo que hay a su alrededor.
------------------------------------------------------------------ */

/* 13.1 · Desborde horizontal de 8 px en TODAS las páginas.
   GeneratePress estira los bloques a ancho completo con `calc(50% - 50vw)`,
   y 50vw incluye la barra de desplazamiento: cada bloque salía 15 px más ancho
   que la página, se salía 8 px por cada lado y dejaba scroll horizontal.
   De paso comía el margen lateral del móvil: el texto quedaba a 8 px del borde
   en vez de a los 16 px que pide el propio bloque.
   `100%` sobre :root resuelve contra el área SIN barra y 100vw la incluye,
   así que su diferencia ES el ancho de la barra. Cero JavaScript.
   Medido: desborde 8 px → 0 · margen lateral 8 px → 16 px. */
/* AQUI ESTUVO el intento de calcular el ancho de la barra de scroll con una
   variable CSS. NO FUNCIONA y ademas quita el ancho completo a todas las secciones:
   las variables se sustituyen como TEXTO, asi que ese 100% no se resuelve contra
   :root sino contra el elemento que la usa (1200 px en escritorio, no el viewport).
   El resultado era margin-left:0 y las bandas dejaban de ir de borde a borde.
   Lo que si funciona es el html,body{overflow-x:clip} de 13.1 bis. NO REPONER ESTO. */

/* 13.1 bis · El scroll horizontal de 8 px.
   GeneratePress estira los bloques a ancho completo con calc(50% - 50vw) y 50vw INCLUYE
   la barra de desplazamiento: cada bloque sale 15 px mas ancho que la pagina.
   `clip` y no `hidden`: hidden crea un contenedor de scroll y rompe el position:sticky
   de la cabecera. Hace falta tambien en body porque en Chrome el clip de html no se
   propaga al viewport. Verificado: desborde 8 px -> 0 y la cabecera sigue pegada. */
html,body{overflow-x:clip}

/* 13.2 · La cabecera se fundía con el hero.
   Fondo negro sobre hero negro y sin separación: el logo se perdía.
   Un filo claro de 1 px la despega del hero, y la sombra suave la levanta
   cuando el scroll la deja sobre las secciones claras. Una sola regla, sin JS. */
.site-header{box-shadow:0 1px 0 rgba(255,255,255,.18),0 10px 24px -14px rgba(0,0,0,.55)}

/* 13.3 · El botón de la cabecera se saltaba el sistema.
   Todos los botones del tema llevan min-height:44px; este se quedaba en 31 px
   porque solo tenía padding. Y cambiaba de color sin transición mientras el
   resto sí la tienen. 40 px encaja en la caja de 48 px del menú. */
.main-navigation .main-nav ul li.mo-nav-cta>a{
	min-height:40px;display:inline-flex;align-items:center;
	transition:background .2s ease;
}

/* 13.4 · Simetría de la cabecera en móvil.
   El logo arrancaba a 30 px del borde y el icono del menú acababa a 50 px:
   la caja táctil de 55x60 px lleva 20 px de relleno interno que empujaban
   el icono hacia dentro. El margen negativo alinea el ICONO con el logo
   sin encoger el objetivo táctil. */
.menu-toggle{margin-right:-20px}

/* 13.5 · El anillo de foco era invisible justo donde más se navega con teclado.
   :focus-visible usa el rojo de marca, que sobre el negro de la cabecera da
   3,06:1. Sobre fondo oscuro se usa el rojo claro, que ya está en el sistema
   por la pasada de contraste (5,73:1). */
.site-header :focus-visible,
.main-navigation :focus-visible,
.mo-hero :focus-visible,
.bg-black :focus-visible,
.site-footer :focus-visible,
.footer-widgets :focus-visible{outline-color:var(--mo-red-light)}

/* ------------------------------------------------------------------
   14 · Pulido visual — hallazgos verificados de la auditoría del 17-sep
   Cada bloque lleva su porqué. Ninguno toca el logo ni sustituye fotos.
------------------------------------------------------------------ */

/* Un solo medianil para todas las rejillas de tarjetas (antes 20 y 32) */
.mo-cards.wp-block-columns,
.mo-revs.wp-block-columns{gap:24px}


/* ==== 1 · Ningun boton del sitio acusa la pulsacion: la transicion de `transform` esta declarada p ==== */
/* ------------------------------------------------------------------
   4 bis · Pulsacion y suavizado de estados
------------------------------------------------------------------ */
.wp-block-button .wp-block-button__link{
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.wp-block-button .wp-block-button__link:active{transform:translateY(1px)}

/* Menu: el cambio de color deja de ser un salto seco */
.main-navigation .main-nav ul li a{transition:color .18s ease, background-color .18s ease}
.main-navigation .main-nav ul li.mo-nav-cta>a{transition:background .18s ease, transform .1s ease}
.main-navigation .main-nav ul li.mo-nav-cta>a:active{transform:translateY(1px)}

/* Forminator: los botones del formulario, igual */
.forminator-ui.forminator-custom-form .forminator-button,
.forminator-ui.forminator-custom-form .forminator-button-upload{
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.forminator-ui.forminator-custom-form .forminator-button:active,
.forminator-ui.forminator-custom-form .forminator-button-upload:active{transform:translateY(1px)}

/* WhatsApp flotante: le faltaba la pulsacion */
.mo-wa{transition:transform .15s ease, box-shadow .15s ease}
.mo-wa:active{transform:scale(.97)}


/* ==== 2 · Las tarjetas de servicio y de trabajos estan inertes: solo cambia el color del titulo, y ==== */
/* ------------------------------------------------------------------
   7 ter · La tarjeta reacciona aunque solo enlace el titulo
------------------------------------------------------------------ */
.mo-card{transition:border-color .18s ease, box-shadow .18s ease}
.mo-card:has(.mo-card-b h3 a:hover),
.mo-card:has(.mo-card-b h3 a:focus-visible){
  border-color:var(--mo-black);
  box-shadow:0 6px 20px rgba(26,26,26,.08);
}
.mo-card-b h3 a{transition:color .15s ease}
.mo-card-b h3 a:active{color:var(--mo-red-dark)}

/* `:has()` no existe en navegadores antiguos: ahi simplemente no hay
   realce de tarjeta, el enlace del titulo sigue funcionando igual. */


/* ==== 3 · El acordeon de la FAQ no da ninguna senal de que la fila sea pulsable ==== */
/* ------------------------------------------------------------------
   7 quater · FAQ: la fila entera acusa el raton
   El padding lateral se compensa con margen negativo: en reposo la
   maqueta queda identica pixel a pixel.
------------------------------------------------------------------ */
.mo-faq .wp-block-details summary{
  padding-inline:8px;
  margin-inline:-8px;
  border-radius:4px;
  transition:color .15s ease, background-color .15s ease;
}
.mo-faq .wp-block-details summary::after{
  display:inline-block;
  transition:color .15s ease, transform .2s ease;
}
.mo-faq .wp-block-details summary:hover{color:var(--mo-red);background-color:rgba(26,26,26,.04)}
.mo-faq .wp-block-details summary:hover::after{color:var(--mo-red);transform:scale(1.15)}
.mo-faq .wp-block-details summary:active{background-color:rgba(26,26,26,.07)}
.mo-faq .wp-block-details[open] summary{color:var(--mo-black)}


/* ==== 4 · `prefers-reduced-motion` solo apaga las transiciones, no las animaciones, y lo hace de u ==== */
/* ------------------------------------------------------------------
   2 bis · Movimiento reducido. SUSTITUYE la regla de la linea 51.
   `!important` aqui esta justificado: es la excepcion canonica, la
   preferencia del usuario tiene que ganar a cualquier regla de autor.
   Se usa .01ms en vez de `none` para que `transitionend` siga
   disparandose y no se queden a medias Forminator ni Complianz.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Nada de desplazamientos ni escalados de cortesia */
  .mo-tcard:hover,.mo-tcard:focus-visible,.mo-tcard:active,
  .wp-block-button .wp-block-button__link:active,
  .main-navigation .main-nav ul li.mo-nav-cta>a:active,
  .forminator-ui.forminator-custom-form .forminator-button:active,
  .forminator-ui.forminator-custom-form .forminator-button-upload:active,
  .mo-wa:hover,.mo-wa:active,
  .mo-faq .wp-block-details summary:hover::after{transform:none !important}
}


/* ==== 5 · Los desplegables de Servicios y Nosotros son un rectángulo #242424 sin borde ni sombra s ==== */
/* 5 bis · Desplegables: panel con filo, radio y sombra de verdad.
   Acotado a ≥1280px para no tocar el acordeón del menú móvil, donde el submenú es estático. */
@media(min-width:1280px){
  .main-navigation ul ul{border:1px solid rgba(255,255,255,.12);border-top:0;border-radius:0 0 var(--mo-radius) var(--mo-radius);box-shadow:0 16px 34px -14px rgba(0,0,0,.65);padding-bottom:4px}
  .main-navigation .main-nav ul ul li a{padding-left:16px;padding-right:16px}
}


/* ==== 6 · El menú no tiene estados: hover sin transición, página actual solo por color y anillo de ==== */
/* 5 bis · Estados del menú: transición, marca de página actual y foco visible sobre negro.
   El subrayado usa currentColor, así que hereda el rojo claro de la sección 12 sin duplicar tokens.
   No hace falta !important: estas propiedades no las declara la CSS del Personalizador. */
.main-navigation .main-nav>ul>li>a{transition:color .18s ease}
.main-navigation .main-nav>ul>li:not(.mo-nav-cta)>a::after{content:"";position:absolute;left:14px;right:14px;bottom:9px;height:2px;background:currentColor;opacity:0;transform:scaleX(.35);transform-origin:left center;transition:opacity .18s ease,transform .18s ease}
.main-navigation .main-nav>ul>li:not(.mo-nav-cta):hover>a::after,
.main-navigation .main-nav>ul>li:not(.mo-nav-cta).sfHover>a::after{opacity:.55;transform:none}
.main-navigation .main-nav>ul>li[class*="current-menu-"]:not(.mo-nav-cta)>a::after,
.main-navigation .main-nav>ul>li.current_page_item:not(.mo-nav-cta)>a::after{opacity:1;transform:none}
@media(max-width:1279px){.main-navigation .main-nav>ul>li>a::after{display:none}}

/* Anillo de foco legible sobre los fondos negros de cabecera y pie */
.site-header :focus-visible,.site-footer :focus-visible{outline:2px solid #fff;outline-offset:2px}


/* ==== 7 · Con la cabecera fija y sin scroll-padding, los enlaces internos y el "Saltar al contenid ==== */
/* 2 bis · La cabecera fija tapa el destino de los enlaces internos.
   96px cubre los 72px actuales y los 78px si se sube el logo, dejando aire. */
html{scroll-padding-top:124px} /* 104 de cabecera + 24 de aire */


/* ==== 8 · Dos secciones seguidas con el mismo fondo dejan agujeros de hasta 266 px: 7 fronteras en ==== */
/* ------------------------------------------------------------------
   3 bis · Ritmo entre secciones
   Si dos secciones consecutivas comparten fondo no hay borde de color
   que justifique los dos rellenos: se suman y dejan un agujero.
   Una sola separación (la padding-bottom de la primera), no dos.
   Ojo: el body es #EAE5DC, así que una sección SIN clase de fondo
   es beige a efectos visuales y cuenta como tal.
   .mo-sec-xs queda fuera a propósito (su padding-bottom es 12 px).
------------------------------------------------------------------ */
:is(.mo-sec,.mo-sec-sm).bg-white + :is(.mo-sec,.mo-sec-sm).bg-white,
:is(.mo-sec,.mo-sec-sm).bg-black + :is(.mo-sec,.mo-sec-sm).bg-black,
:is(.mo-sec,.mo-sec-sm).bg-beige + :is(.mo-sec,.mo-sec-sm).bg-beige,
:is(.mo-sec,.mo-sec-sm).bg-beige + :is(.mo-sec,.mo-sec-sm):not(.bg-white,.bg-black,.bg-beige),
:is(.mo-sec,.mo-sec-sm):not(.bg-white,.bg-black,.bg-beige) + :is(.mo-sec,.mo-sec-sm).bg-beige,
:is(.mo-sec,.mo-sec-sm):not(.bg-white,.bg-black,.bg-beige) + :is(.mo-sec,.mo-sec-sm):not(.bg-white,.bg-black,.bg-beige){
  padding-block-start:0;
}


/* ==== 9 · Los 28 px fantasma de WordPress debajo de los 39 bloques de columnas: toda sección acaba ==== */
/* El núcleo mete 1.75em (28 px) debajo de TODO bloque de columnas.
   No está en ninguna escala, descuadra el fondo de cada sección y pisa
   por colapso los margin-top que sí decidimos. El espacio lo manda el
   contenedor (padding de sección) o el hermano siguiente, no el bloque. */
.entry-content .wp-block-columns{margin-bottom:0}

/* Filas sucesivas de una misma rejilla (p. ej. el muro de /resenas/):
   separación explícita, igual al medianil horizontal. */
.entry-content .wp-block-columns + .wp-block-columns{margin-top:24px}


/* ==== 10 · Hueco de 782 a 1279 px: las rejillas de tarjetas y reseñas no tienen ninguna regla y el  ==== */
/* SUSTITUYE la regla de .mo-cards/.mo-revs del bloque 7 (línea 153 de
   style.css, la de @media(min-width:600px) and (max-width:781px)).
   El 2-up llega ahora hasta 1279 px, el mismo corte del menú móvil
   (generate_mobile_menu_media_query): un solo régimen de tablet.
   !important en flex-wrap: el núcleo imprime
   `@media (min-width:782px){.wp-block-columns{flex-wrap:nowrap!important}}`
   y además el <style id="core-block-supports-inline-css"> con
   `.wp-container-core-columns-is-layout-1c1a6f30{flex-wrap:nowrap}`
   se pinta DESPUÉS de la hoja del tema hijo. No hay alternativa.
   !important en flex-basis: por debajo de 782 el núcleo fuerza 100%.
   flex-grow:0: sin él, la tarjeta huérfana de una fila de 3 se estira
   a ancho completo. */
@media (min-width:600px) and (max-width:1279px){
  .mo-cards.wp-block-columns,
  .mo-revs.wp-block-columns{flex-wrap:wrap!important}
  .mo-cards.wp-block-columns>.wp-block-column{flex-basis:calc(50% - 12px)!important /* 12 = la mitad del gap de 24 */;flex-grow:0}
  .mo-revs.wp-block-columns>.wp-block-column{flex-basis:calc(50% - 12px)!important;flex-grow:0}
}


/* ==== 11 · /pedir-presupuesto/ arranca 36 px más arriba que las otras 11 páginas: a .mo-sec-xs se l ==== */
/* .mo-sec-xs se quedó fuera del media query de 768 px y dejaba la
   página de presupuesto arrancando 36 px más arriba que las demás.
   Arriba iguala al resto de páginas; abajo sigue corto a propósito,
   porque debajo va el formulario y no una sección nueva. */
.mo-sec-xs{padding-block:var(--mo-sec-y-sm,48px) var(--mo-sp-3,12px)}
@media(min-width:768px){
  .mo-sec-xs{padding-block:var(--mo-sec-y-sm,64px) var(--mo-sp-3,12px)}
}


/* ==== 12 · Hay dos formas de pintar una tarjeta y solo una recibe los ajustes finos: en /profesiona ==== */
/* ------------------------------------------------------------------
   15 · Tarjeta sin .mo-card-b (/profesionales/): mismo trato fino
   que la tarjeta con cuerpo de la home. Sin !important: la
   especificidad de .mo-card.beige > X ya gana a .eyebrow y a p.
------------------------------------------------------------------ */
.mo-card.beige > .eyebrow{letter-spacing:2px;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-card.beige > h3{margin-bottom:10px}
.mo-card.beige > p:last-child{margin-bottom:0}
@media(min-width:600px){.mo-card.beige > h3{min-height:calc(2 * 1.2em)}}


/* ==== 13 · Clases huérfanas: `mo-two-text` y `mo-celeb-wrap` no existen en el CSS, y por eso /profe ==== */
/* ------------------------------------------------------------------
   16 · mo-two-text: misma calle que mo-two, sin el centrado vertical
   (son dos columnas de texto, deben alinear arriba).
   `mo-celeb-wrap` (talleres) también está huérfana; no necesita
   regla, se puede quitar del bloque en el editor.
------------------------------------------------------------------ */
.mo-two-text.wp-block-columns{gap:40px}
@media(min-width:782px){.mo-two-text.wp-block-columns{gap:64px}}


/* ==== 14 · La medida de línea llega a 146 caracteres: las 27 respuestas de la FAQ y los párrafos su ==== */
/* ------------------------------------------------------------------
   2.1 · Medida de lectura. Montserrat 400 mide 8,25 px por carácter a
   16 px (medido sobre fonts/montserrat-var.woff2): 1200 px = 146
   caracteres por línea. Cómodo: 60-75.
------------------------------------------------------------------ */
:root{--mo-measure:38rem}        /* 608 px ≈ 74 caracteres a 16 px */

/* FAQ: 27 respuestas en 6 páginas iban a 1200 px. Acotamos el texto,
   no el <details>, para que la línea inferior siga cruzando la sección. */
.mo-faq .wp-block-details summary,
.mo-faq .wp-block-details p{max-width:var(--mo-measure)}

/* Párrafos y listas que cuelgan directos de una sección */
.mo-sec > .wp-block-group__inner-container > p,
.mo-sec > .wp-block-group__inner-container > ul,
.mo-sec-sm > .wp-block-group__inner-container > p,
.mo-sec-sm > .wp-block-group__inner-container > ul,
.mo-sec-xs > .wp-block-group__inner-container > p{max-width:var(--mo-measure)}

/* Alineación: solo se centra el bloque si la sección es .mo-center */
.mo-sec:not(.mo-center) > .wp-block-group__inner-container > p,
.mo-sec-sm:not(.mo-center) > .wp-block-group__inner-container > p,
.mo-sec-xs:not(.mo-center) > .wp-block-group__inner-container > p{margin-inline:0 auto}
.mo-center > .wp-block-group__inner-container > p{margin-inline:auto}

/* Los dos envoltorios estrechos, al mismo valor. El !important no es
   nuevo: viene de las reglas originales, y hace falta porque
   `.wp-block-group.mo-sec>*` (0,2,0) gana a `.mo-narrow-l` (0,1,0)
   y le impondría los 1200 px. */
.mo-narrow,.mo-narrow-l{max-width:var(--mo-measure)!important}


/* ==== 15 · La cabecera sticky atrapa el menú móvil abierto en pantallas bajas ==== */
/* Añade al final del bloque 5 · Cabecera y menú.
   El menú móvil se despliega DENTRO de la cabecera sticky. Con las
   entradas abiertas pasa de 500 px: en un móvil apaisado el final del
   menú queda fuera de pantalla y no hay manera de llegar. Con esto la
   cabecera se desplaza por dentro cuando el menú está abierto.
   :has() ya se usa en el bloque 8 de esta misma hoja, no añade
   requisitos de navegador. Sin !important: no hace falta. */
@media (max-width:1279px){
  .site-header:has(#site-navigation.toggled){
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}


/* ==== 16 · Los títulos de las tarjetas reservan 3 líneas fijas desde 600 px: 43 px de aire muerto e ==== */
/* SUSTITUYE en el bloque 7 la línea
   @media(min-width:600px){.mo-card-b h3{min-height:calc(3 * 1.2em)}}
   Dos líneas es el máximo real que necesita el título más largo
   («Montajes especiales y vitrinas») en todo el rango ≥600 px una vez
   corregida la rejilla del hallazgo 2. */
@media(min-width:600px){.mo-card-b h3{min-height:calc(2 * 1.2em)}}


/* ==== 17 · Las fichas de taller y el mapa de contacto son enlaces completos y no reaccionan a nada ==== */
/* ------------------------------------------------------------------
   7 bis · Tarjetas-enlace: la ficha entera acusa raton y teclado
------------------------------------------------------------------ */
.mo-tcard{transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.mo-tcard:hover{
  border-color:var(--mo-black);
  box-shadow:0 6px 20px rgba(26,26,26,.10);
  transform:translateY(-2px);
}
/* En foco NO se toca box-shadow: ahi vive el anillo del hallazgo 1 */
.mo-tcard:focus-visible{border-color:var(--mo-black);transform:translateY(-2px)}
.mo-tcard:active{transform:translateY(0);box-shadow:0 2px 8px rgba(26,26,26,.10)}
.mo-tcard h3{transition:color .18s ease}
.mo-tcard:hover h3,
.mo-tcard:focus-visible h3{color:var(--mo-red)}

/* El mapa de Contacto es un enlace externo: que lo parezca */
.mo-map{transition:border-color .18s ease, background-color .18s ease}
.mo-map:hover,
.mo-map:focus-visible{border-color:var(--mo-black);background-color:#EDE7DA}
.mo-map:active{background-color:var(--mo-beige)}


/* ------------------------------------------------------------------
   15 · Que el logo respire (auditoria del 17-sep, 20 agentes)
   Daniel: "se ve comprimido / el logo debe respirar debajo".
   La causa no era una sola. Son cuatro, y tres no cuestan alto.
------------------------------------------------------------------ */

/* 15.1 · El espacio de respeto, y solo por abajo.
   El fichero del logo NO trae margen: la M toca el borde de arriba y la
   bajada el de abajo. Todo el aire lo pone este padding.
   A 64 px el mayor hueco INTERNO del logo (entre la M y MOLDUMAT) mide
   8,6 px, y el aire exterior de abajo eran 12: solo 1,4 veces. Un espacio
   de respeto que no supera con claridad el ritmo interno de la pieza no se
   lee como espacio, se lee como parte de la composicion.
   Solo paga el lado de abajo: arriba no hay corte, abajo si (el filo).
   padding-block y NO el atajo padding: GeneratePress pone los 40 px
   laterales con .inside-header{padding:20px 40px} y el atajo los borraria. */
.inside-header{padding-block:12px 20px}
@media(min-width:769px){.inside-header{padding-block:12px 24px}}

/* 15.2 · El logo alineado con el titular del hero.
   La cabecera corria a 1320 px con 40 de calle y el contenido a 1200 con 32:
   el logo caia 20 px a la izquierda del H1 en escritorio y 14 a la derecha en
   movil. El ojo leia la barra como una tira ajena pegada encima del banner,
   no como el techo de la misma columna. 1264 = 1200 + 32 + 32. Cuesta 0 px. */
.inside-header{max-width:1264px;padding-left:32px;padding-right:32px}
@media(max-width:768px){.inside-header{padding-left:16px;padding-right:16px}}

/* 15.3 · Una sola geometria en la fila.
   Convivian tres alturas centradas: logo 64, menu 48, boton 40. El logo, el
   unico sin espacio de respeto propio, era el que menos aire recibia.
   Igualar la caja del menu a 64 no cambia el alto de la cabecera y de paso
   sube el area de pulsacion de 48 a 64 px. Coste: 0 px. */
@media(min-width:1280px){
	.main-navigation .main-nav ul li a{line-height:64px}
	.main-navigation .main-nav>ul>li:not(.mo-nav-cta)>a::after{bottom:17px}
	.main-navigation .main-nav ul li.mo-nav-cta>a{min-height:44px}
}


/* ------------------------------------------------------------------
   14 · Aviso de cookies en móvil
   Medido a 390x844 con cookies limpias: el banner ocupaba 354 px, el
   42 % de la pantalla, y dejaba fuera de alcance los dos CTA de la
   portada y el botón flotante de WhatsApp. De esos 354 px, 155 eran
   solo botonera: tres botones apilados de 45 px.
   Aceptar y Rechazar pasan a la misma fila, con el MISMO tamaño y el
   MISMO formato, así que la paridad que pide la guía de la AEPD se
   mantiene intacta. «Ver preferencias» baja a enlace de texto.
   OJO con el !important: la hoja banner-1-optin.css de Complianz se
   encola DESPUÉS que esta, y su regla .cmplz-cookiebanner
   .cmplz-buttons{flex-direction:column} tiene la misma especificidad,
   así que sin !important gana ella por orden de carga.
------------------------------------------------------------------ */
@media (max-width:599px){
  /* Es una REJILLA de 7 filas con gap de 10 px, y tres de esas filas
     están vacías: 60 px de aire. Se apagan y se baja el gap. */
  .cmplz-cookiebanner{padding:12px 16px!important;row-gap:4px!important}
  .cmplz-cookiebanner .cmplz-divider,
  .cmplz-cookiebanner .cmplz-links.cmplz-information{display:none!important}
  .cmplz-cookiebanner .cmplz-message{font-size:13px;line-height:1.45}

  .cmplz-cookiebanner .cmplz-buttons{
    flex-direction:row!important;flex-wrap:wrap!important;
    gap:8px!important;margin-top:8px;align-items:stretch;
  }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny{
    flex:1 1 calc(50% - 4px)!important;width:auto!important;
    min-height:44px!important;height:auto!important;
  }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences{
    flex:1 1 100%!important;width:auto!important;
    min-height:0!important;height:auto!important;
    background:none!important;border:0!important;box-shadow:none!important;
    padding:4px 0!important;font-size:13px;text-decoration:underline;
  }
  .cmplz-cookiebanner .cmplz-documents{margin-top:6px}
  .cmplz-cookiebanner .cmplz-documents .cmplz-link{font-size:12px}

  /* Mientras el aviso está en pantalla, la burbuja de WhatsApp se aparta. */
  body:has(.cmplz-cookiebanner.cmplz-show) .mo-wa{bottom:258px}
}

/* ─── Formulario de presupuesto: bloque opcional plegado y nota de confianza ───
   Forminator no trae ni «details» ni microcopia bajo el botón; los monta el tema
   desde inc/forms.php. El objetivo es que el último paso no parezca un expediente. */
.mo-extra{border:1px solid rgba(26,26,26,.16);border-radius:8px;background:#fff;margin:0 0 20px}
.mo-extra>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 16px;
  cursor:pointer;list-style:none;font-weight:600;color:var(--mo-red);border-radius:8px}
.mo-extra>summary::-webkit-details-marker{display:none}
.mo-extra>summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;font-weight:400}
.mo-extra[open]>summary::after{content:"–"}
.mo-extra>summary:focus-visible{outline:2px solid var(--mo-red);outline-offset:2px}
.mo-extra[open]>summary{border-bottom:1px solid rgba(26,26,26,.1);border-radius:8px 8px 0 0}
.mo-extra>.forminator-row{padding:16px 16px 0}
.mo-extra>.forminator-row:last-child{padding-bottom:4px}
.mo-nota{margin:14px 0 0;font-size:14px;line-height:1.5;color:#5d5a54;text-align:center}
/* El consentimiento necesita un objetivo táctil de verdad (mínimo 44 px). */
.forminator-ui.forminator-custom-form label.forminator-consent{min-height:44px;padding:6px 0}

/* ─── Página de presupuesto: el formulario se ve al llegar, sin hacer scroll ───
   Medido a 390×844 antes de tocar nada: cabecera 100 px + preámbulo 212 px + margen
   de la tarjeta 73 px = el 45% de la pantalla antes de la primera pregunta, con el
   botón 66 px por debajo del pliegue. Se recorta el aire, no el texto. */
#presupuesto{padding-block:28px 36px}
#presupuesto .mo-center h2{margin-bottom:6px}
#presupuesto .mo-center .lead{margin:0 0 4px}
#presupuesto .mo-center .small.muted{margin:0}
#presupuesto .mo-form-card{margin-top:18px!important;padding:20px}
@media(min-width:768px){
  #presupuesto{padding-block:48px 64px}
  #presupuesto .mo-form-card{margin-top:28px!important;padding:36px}
}

/* El preambulo de la pagina de presupuesto repite lo que pregunta el formulario:
   se le recorta el aire para que la primera pregunta entre en pantalla al llegar. */
body:has(#presupuesto) .mo-sec-xs{padding-block:20px 8px}
@media(min-width:768px){body:has(#presupuesto) .mo-sec-xs{padding-block:40px 10px}}

/* Forminator solo trae CSS para dos columnas (.forminator-col-6). La fila de tres
   (alto · ancho · piezas) necesita su propia regla, con el mismo hueco de 16 px. */
@media(min-width:600px){
  .forminator-ui.forminator-custom-form .forminator-row .forminator-col-4{flex:1 1 calc(33.3333% - 10.67px)}
}
/* Un campo corto solo en su fila no se estira a todo el ancho (ej. población). */
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6:only-child{flex-grow:0}

/* ===================== Pase de diseño · 17-oct-2026 ===================== */

/* 1 · Preguntas frecuentes. Tenían separadores de 1 px en #D5CFBF, casi invisibles
   sobre beige, y el «+» quedaba a 768 px de su propia pregunta: la vista no los une.
   Cada pregunta pasa a ser una tarjeta blanca, con el control pegado al texto. */
/* Patron de lista con separador, igual que el resto de la web y que la
   implementacion de BIGSEO (fondo transparente, una linea fina, sin radio
   ni sombra). Las tarjetas blancas que probe antes rompian el lenguaje de la
   home: cinco cajas duras sobre beige que se leian como botones. Lo que si
   fallaba de verdad era el ancho (768 px dejaba el «+» a media pantalla de su
   propia pregunta) y que el separador no se veia. BIGSEO usa 520 px. */
/* Hace falta .wp-block-group delante: la regla del tema para los hijos directos
   de seccion gana por especificidad y la dejaba en los 768 px de la columna. */
/* El ancho se limita en cada fila, no en el contenedor: asi la lista arranca en el
   mismo borde que el titulo, sin pelearse con los margenes automaticos del tema. */
.mo-faq .wp-block-details{max-width:620px}
.mo-center .mo-faq .wp-block-details{margin-inline:auto}
.mo-faq .wp-block-details{background:transparent;border:0;border-bottom:1px solid var(--mo-border);border-radius:0;margin:0;box-shadow:none}
.mo-faq .wp-block-details:first-child{border-top:1px solid var(--mo-border)}
.mo-faq .wp-block-details>summary{padding:20px 2px;gap:24px;align-items:center}
.mo-faq .wp-block-details>summary::after{color:var(--mo-red);font-size:20px;line-height:1;font-weight:400}
.mo-faq .wp-block-details[open]>summary{border-bottom:0}
.mo-faq .wp-block-details>p{margin:0;padding:0 2px 22px}

/* 2 · La escala de secciones tenía 56 y 48 px: 8 px de diferencia se leen como un
   solo valor. Se separa el escalón secundario para que la jerarquía se vea. */
.mo-sec-sm{padding-block:36px}
@media(min-width:768px){.mo-sec-sm{padding-block:52px}}

/* 3 · El rojo de marca sobre beige se queda en 4,54:1, cuatro centésimas por encima
   del mínimo. Sobre beige se usa la versión profunda: 5,88:1. */
/* Ojo: la sección de reseñas es beige a la vista pero NO lleva la clase .bg-beige,
   así que hay que cubrir también las secciones sin clase de fondo, igual que hace
   la regla de costuras de más arriba. Nunca sobre negro: ahí manda --mo-red-light. */
:is(.mo-sec,.mo-sec-sm,.mo-sec-xs).bg-beige :is(.eyebrow.red,.red),
:is(.mo-sec,.mo-sec-sm,.mo-sec-xs):not(.bg-white,.bg-black) :is(.eyebrow.red,.red),
.mo-card.beige > .eyebrow.red,
.skip-link{color:var(--mo-red-dark)}

/* Los enlaces de contacto (WhatsApp, teléfono, email, mapa) viven sobre beige y el
   rojo de marca ahí se queda en 4,54:1. Son los enlaces que más importan de la web,
   así que van en rojo profundo: 5,88:1. */
.mo-ct a,
.mo-map b{color:var(--mo-red-dark)}

/* ==== 18 · FAQ a dos columnas, mapa con imagen y formulario al final de cada página (17-oct-2026) ==== */

/* 1 · FAQ. La lista de 620 px dejaba 340 px de beige vacío a la derecha en un contenedor de 960.
   Titular a la izquierda y preguntas a la derecha, en el mismo molde de dos columnas que
   «Visítanos o escríbenos». En móvil se apilan y todo mide lo mismo que el resto. */
.mo-faq-cols.wp-block-columns{align-items:flex-start;gap:28px}
@media(min-width:782px){.mo-faq-cols.wp-block-columns{gap:64px}}
.mo-faq-cols .wp-block-heading{margin-bottom:0}
.mo-faq-cols .mo-faq{margin-top:0!important}
/* Las filas llenan su columna (antes 620 px fijos); las respuestas conservan la medida de lectura.
   El summary traia margin-inline:-8px para el hover: sin tope de ancho dejaba el «+» 6 px fuera de la raya. */
.mo-faq-cols .mo-faq .wp-block-details,
.mo-faq-cols .mo-faq .wp-block-details summary{max-width:none}
.mo-faq-cols .mo-faq .wp-block-details summary{margin-inline:0;padding-inline:2px 4px}
.mo-faq-more{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--mo-muted)}

/* 2 · Mapa: era una caja beige con texto, nunca un mapa. Ahora es una imagen de OpenStreetMap
   centrada en la ficha de Google del taller, con el pin y el botón encima. Sigue siendo un solo
   enlace a Google Maps: cero iframes, cero cookies de terceros, nada que Complianz tenga que tapar.
   /contacto/ lo muestra como franja ancha (aspect-ratio 16/6 en línea) con una imagen panorámica. */
.mo-mapbox{position:relative}
.mo-map{position:relative;display:block;overflow:hidden;padding:0;background:var(--mo-beige)}
.mo-map picture{display:contents}
.mo-map img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover}
.mo-map .mo-pin{position:absolute;left:50%;top:50%;width:32px;height:42px;transform:translate(-50%,-100%);pointer-events:none}
.mo-pin path{fill:var(--mo-red);stroke:var(--mo-white);stroke-width:2}
.mo-pin circle{fill:var(--mo-white)}
.mo-map .mo-map-cta{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;background:var(--mo-white);border:1px solid var(--mo-border);border-radius:var(--mo-radius);font-size:15px;font-weight:600;line-height:1;color:var(--mo-black);transition:border-color .18s ease}
.mo-map:hover .mo-map-cta,.mo-map:focus-visible .mo-map-cta{border-color:var(--mo-black)}
.mo-map:focus-visible{outline:2px solid var(--mo-red);outline-offset:3px}
.mo-map-at{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--mo-muted);text-align:right}
.mo-map-at a{display:inline-block;padding-block:8px;color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 3 · Formulario embebido al final de las páginas de servicio. WhatsApp no desaparece:
   pasa a una línea bajo el formulario, como alternativa para quien no quiere rellenar nada.
   Los dos enlaces de WhatsApp nuevos (FAQ y formulario) miden 44 px de alto, como el botón al que sustituyen. */
.mo-form-alt{margin:14px 0 0;font-size:15px;line-height:1.5;text-align:center;color:var(--mo-muted)}
.mo-faq-more a,
.mo-form-alt a{display:flex;align-items:center;min-height:44px;color:var(--mo-red-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mo-form-alt a{justify-content:center}

/* La fila de un campo oculto (hidden-1, «Página de origen») se pintaba: la regla de .forminator-row
   de más arriba (!important, 0,3,0) gana a la de Forminator (!important, 0,2,0) y dejaba 24 px de hueco. */
.forminator-ui.forminator-custom-form .forminator-row.forminator-hidden{display:none!important}

/* 4 · El subtítulo del formulario dejaba la palabra «claro.» sola en la segunda línea a 1440 px. */
#presupuesto .mo-center .lead{text-wrap:balance}

/* 5 · Tope de altura de las fotos (21-oct-2026). Las fotos verticales tomaban el tamaño del ancho de la columna
   y en portátiles y monitores con zoom pasaban del 100 % de la pantalla visible (hasta 150 %). Ahora ninguna pasa
   del 72 % de la altura visible; el ancho baja a la vez, así que el marco sigue ENTERO (sin recorte).
   El móvil (< 600 px) no se toca: ahí la foto a todo el ancho ya cabe. */
@media(min-width:600px){
.mo-ph img,.mo-ph .wp-block-image img{display:block;margin-inline:auto;height:auto}
.mo-ph.r34 img{width:min(100%,calc((100svh - 100px)*.54))}
.mo-ph.r45 img{width:min(100%,calc((100svh - 100px)*.576))}
.mo-ph.r43 img{width:min(100%,calc((100svh - 100px)*.96))}
}