/* =====================================================================
   GAVEJO · VERSIÓN MINIMAL (prueba)
   Se carga DESPUÉS de styles.css y solo sobrescribe. Para volver a la
   versión anterior basta con quitar minimal.css y minimal.js del HTML.
   Criterios: menos texto a la vista, imágenes protagonistas, una sola
   familia tipográfica, más aire, un solo botón por bloque.
   ===================================================================== */

:root {
  --bone: #FAFAF8;
  --secondary: #F3F2EF;
  --ink: #141414;
  --stone: #7A776F;
  --border: #E7E4DE;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
  --section-y: clamp(96px, 12vw, 168px);
}

body { font-size: 16px; line-height: 1.65; letter-spacing: -0.003em; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.025em; }
.label { font-size: 11px; font-weight: 500; letter-spacing: .22em; }
.h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; max-width: 18ch; }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--stone); }
.quote { font-family: var(--font-accent); font-style: italic; font-size: clamp(24px, 2.4vw, 30px); border-left: 0; padding: 0; color: var(--ink); }

/* Fondos: una sola superficie, sin rayas entre secciones */
.bg-secondary { background: var(--bone); }
.rule-y { border-top: 0; border-bottom: 0; }

/* ----- Botones: uno solo, sobrio ----- */
.btn { font-weight: 500; font-size: 14px; letter-spacing: 0; padding: 14px 24px; background: var(--ink); border-color: var(--ink); }
.btn:hover { background: #000; border-color: #000; }
.btn--ghost, .btn--light { background: transparent; }
.btn--wa { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--wa:hover { background: var(--wa); border-color: var(--wa); color: #fff; }

/* En los bloques de producto, el botón principal pasa a enlace y desaparecen los secundarios */
.sol .btn-row .btn, .card .btn-row .btn, .sheet .actions .btn {
  background: none; border: 0; padding: 0 0 3px; color: var(--ink);
  border-bottom: 1px solid var(--ink); font-size: 14px;
}
.sol .btn-row .btn:hover, .card .btn-row .btn:hover, .sheet .actions .btn:hover { color: var(--wood); border-color: var(--wood); background: none; }
.sol .btn-row .btn:not(:first-child), .card .btn-row .btn:not(:first-child) { display: none; }
.sol .num, .card .num, .card .small-sub { display: none; }

/* ----- Cabecera ----- */
.header { background: rgba(250,250,248,.92); border-bottom-color: transparent; }
.header.is-scrolled { border-bottom-color: var(--border); }
.nav a { font-size: 13px; }
.nav .nav-mb { font-size: 15px; }
.header .btn--sm { padding: 10px 16px; font-size: 13px; }

/* ----- Hero ----- */
.hero::after { background: linear-gradient(to top, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 55%, rgba(10,10,10,0) 80%); }
.hero h1 { font-size: clamp(40px, 6.6vw, 104px); line-height: .98; max-width: 13ch; margin: 18px 0 20px; }
.hero .sub { font-size: 17px; max-width: 46ch; margin-bottom: 30px; }
.intent-label { display: none; }
.intent-options a { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.55); padding: 6px 0; font-size: 14px; font-weight: 500; margin-right: 22px; }
.intent-options a:hover { background: none; color: #fff; border-color: #fff; }
.intent-options .intent-mb { font-size: 18px; padding: 4px 0; border-color: rgba(201,154,110,.8); }
.intent-options .intent-mb:hover { background: none; color: #E8C9A6; }
@media (max-width: 640px) { .intent-options a { margin-right: 0; } }

/* ----- Barra de datos: más ligera ----- */
.facts { background: var(--bone); border-bottom: 1px solid var(--border); }
.facts li { font-size: 14px; }
.facts li + li { border-left-color: var(--border); }

/* ----- "¿Qué busca?": tres imágenes grandes ----- */
#que-busca .section-head { margin-bottom: 40px; }
.paths { gap: 14px; }
.path {
  position: relative; min-height: clamp(420px, 44vw, 620px); padding: 28px; border: 0; color: #fff;
  background: #222 center / cover no-repeat; justify-content: flex-end; overflow: hidden;
}
.path::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0) 58%); transition: opacity .3s ease; }
.path > * { position: relative; }
.path:nth-child(1) { background-image: url(img/sol-fachadas.webp); }
.path:nth-child(2) { background-image: url(img/tab-luxury.webp); }
.path:nth-child(3) { background-image: url(img/mb-intro.webp); }
.path .n, .path p, .path .for { display: none; }
.path h3, .path--mb h3 { color: #fff; font-size: clamp(22px, 2vw, 28px); }
.path .go, .path--mb .go { color: rgba(255,255,255,.85); font-weight: 500; }
.path:hover { border: 0; }
.path:hover::before { opacity: .8; }
.path--mb { background-color: #2a2018; }
@media (max-width: 900px) { .path { min-height: 340px; } }

/* ----- Cabecera de zona ----- */
.zone-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: clamp(56px, 7vw, 96px); }
.zone-head .aside { max-width: 62ch; }
.subnav a { border: 0; padding: 0; margin-right: 18px; color: var(--stone); font-size: 13px; }
.subnav a:hover { color: var(--ink); }

/* ----- Soluciones: imagen dominante ----- */
.solutions { gap: clamp(96px, 11vw, 160px); }
.sol { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.sol:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.sol > .ph { position: relative; top: 0; height: auto !important; aspect-ratio: 4 / 5 !important; }
.sol h3 { font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 14px; }
.sol .desc { color: var(--stone); }
.mini-link { margin-top: 22px; }
.link-arrow { font-size: 13px; border: 0; color: var(--stone); }
@media (max-width: 860px) { .sol, .sol:nth-child(even) { grid-template-columns: 1fr; } }

/* Desplegables: limpios */
.more { border-top: 1px solid var(--border); border-bottom: 0; margin-top: 30px; }
.more > summary { font-weight: 500; font-size: 13px; color: var(--stone); padding: 14px 0; }
.more > summary::after { color: var(--stone); font-size: 20px; }
.specs > div { border-bottom-color: var(--border); font-size: 15px; }
.specs { border-top: 0; }
.tags li { border-color: var(--border); font-size: 12px; }

/* ----- Maderas y tableros: foto grande, ficha plegada ----- */
.group-title { border-bottom: 0; margin-bottom: 28px; }
.group-title h3 { font-size: clamp(24px, 2.4vw, 32px); }
.sheets { gap: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.sheet { background: none; border: 0; }
.sheet .ph, .sheet .ph--sheet { aspect-ratio: 4 / 5; }
.sheet .body { padding: 22px 0 0; gap: 10px; }
.sheet .body > p { color: var(--stone); }
.sheet .actions { padding-top: 14px; }
.sheet .more { margin-top: 10px; }

/* ----- Mader Balear ----- */
.mb-intro { min-height: 86vh; }
.mb-intro .ph { min-height: 520px; }
.cards { gap: clamp(64px, 7vw, 112px) clamp(24px, 4vw, 56px); }
.card .ph { aspect-ratio: 4 / 5; margin-bottom: 24px; }
.card .desc { color: var(--stone); }

/* ----- Obras, interlocutor, pasos, contacto ----- */
.work--featured .ph { aspect-ratio: 16 / 10; }
.steps li { border-top-color: var(--border); }
.steps .n { font-size: 15px; font-weight: 500; color: var(--stone); margin-bottom: 14px; }
.contact .review { background: none; border: 0; padding: 0; }
.footer .company { border-bottom-color: var(--border); }
.footer .company .logo { height: 96px; }

/* 3. Huecos sin foto: franja baja (se sigue viendo qué falta, sin dominar la página) */
.ph.is-empty { background: var(--secondary); aspect-ratio: auto !important; height: 120px !important; min-height: 0 !important; }
.ph.is-empty::after { border: 0; font-size: 11px; letter-spacing: .06em; }

/* ===== Ajustes v2 de la minimal ===== */

/* 1. Dato clave visible en las fichas (formato, espesor o especie) */
.sheet .key { font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: .01em; margin: -2px 0 0; }

/* 4. Inicio de cada zona marcado con línea y número grande */
.zone-head { border-top: 1px solid var(--ink); padding-top: 28px; position: relative; }
.zone-head::before {
  position: absolute; right: 0; top: 22px; font-size: clamp(56px, 8vw, 120px); font-weight: 500;
  line-height: 1; color: var(--border); letter-spacing: -0.04em;
}
#soluciones .zone-head::before { content: "01"; }
#maderas-y-tableros .zone-head::before { content: "02"; }
@media (max-width: 640px) { .zone-head::before { font-size: 48px; top: 20px; } }

/* 5. Tarjetas "¿Qué busca?": vuelve la línea de para quién es */
.path .for, .path--mb .for { display: block; border: 0; padding: 0; margin: 0; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.78); }

/* 7. Icono de WhatsApp en las tarjetas de Mader Balear */
.wa-mini { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); color: var(--wa); margin-left: 14px; vertical-align: middle; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.wa-mini svg { width: 16px; height: 16px; fill: currentColor; }
.wa-mini:hover { background: var(--wa); color: #fff; border-color: var(--wa); }
.card .btn-row { align-items: center; }

/* Interlocutor: encima del pie, compacto. Foto como máximo el tamaño de juancarlosgamez.com (340×440), aquí 240×310 */
.person-band { padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid var(--border); }
.person-band .person { grid-template-columns: 120px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); max-width: 760px; align-items: start; }
.person-band .person .ph { max-width: 120px; aspect-ratio: 340 / 440; }
.person-band .person .ph img { filter: none; } /* foto a color, sin el filtro gris */
.person-band .h2 { font-size: clamp(26px, 2.6vw, 34px); }
.person-band .person-text { gap: 12px; }
.person-band .lead { font-size: 16px; }
.person-band .person-text p:not(.label):not(.lead) { font-size: 15px; color: var(--stone); }
.person-band .btn-row { margin-top: 6px; }
@media (max-width: 800px) { .person-band .person { grid-template-columns: 96px minmax(0, 1fr); } .person-band .person .ph { max-width: 96px; } }

/* Empresa + interlocutor unidos en el pie: logo · texto · foto con botón debajo */
.footer .company--person { grid-template-columns: auto minmax(0, 1fr) max-content; align-items: center; max-width: 880px; margin-left: auto; margin-right: auto; }
.footer .company--person .logo { height: 80px; }
.footer .company--person .text { gap: 12px; }
.footer .company--person .person-line { font-size: 15px; color: var(--stone); max-width: 62ch; margin: 0; }
.footer .company--person .person-line strong { color: var(--ink); font-weight: 500; }
/* La foto toma exactamente el ancho del botón que tiene debajo */
.person-mini { display: grid; gap: 8px; justify-items: stretch; width: max-content; }
.person-mini .ph { aspect-ratio: 340 / 440; width: 100%; }
.person-mini .btn { justify-content: center; padding: 6px 10px; font-size: 11px; gap: 6px; white-space: nowrap; }
@media (max-width: 800px) {
  .footer .company--person { grid-template-columns: 1fr; }
  .person-mini { grid-template-columns: 96px auto; align-items: end; justify-content: start; }
}

/* Logo de Mader Balear en su zona (versión clara sobre fondo nogal) */
.mb-intro .mb-logo { width: min(320px, 80%); height: auto; margin: -4px 0 4px; }

/* Franja de marcas y fabricantes */
.brands { padding: clamp(48px, 6vw, 72px) 0; border-top: 1px solid var(--border); text-align: center; }
.brands .label { margin-bottom: 28px; color: var(--ink, #2b2b2b); }
.brands-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px clamp(32px, 5vw, 64px); max-width: 980px; margin: 0 auto; }
.brands-logos img { height: 34px; width: auto; filter: brightness(.45); transition: filter .2s ease; }
.brands-logos img[src*="elite"], .brands-logos img[src*="bdecora"], .brands-logos img[src*="luxury"], .brands-logos img[src*="newtech"] { height: 58px; }
.brands-logos img[src*="burned"] { height: 18px; }
.brands-logos img:hover { filter: brightness(.2); }
.brands-more { margin-top: 26px; font-size: 13px; color: var(--stone); }

/* Tipografía de Mader Balear: Instrument Serif (misma familia que el resto de la minimal) */
:root { --font-mb: "Instrument Serif", Georgia, serif; }
.mb-intro h2, .mb-zone h2, .mb-zone h3, .mb-zone h4, .path--mb h3, .nav .nav-mb, .intent-options .intent-mb, .footer .mb-name { font-weight: 400; letter-spacing: -0.01em; }

/* Logo grande de Gavejo sobre el H1 (versión blanca) */
.hero .hero-logo { display: block; height: clamp(80px, 9vw, 140px); width: auto; margin: 0 0 22px -6px; filter: drop-shadow(0 2px 12px rgba(0,0,0,.25)); }
/* PRUEBA: logo en la esquina superior izquierda del hero, mismo tamaño */
.hero > .hero-logo { position: absolute; z-index: 2; top: calc(var(--header-h) + 32px); left: var(--gutter); margin: 0; }

/* === PRUEBA "MÁS COMPACTA" (14-10-2026): contenido más estrecho y menos aire vertical. Para volver atrás, borrar este bloque. === */
:root { --container: 1080px; --section-y: clamp(72px, 8.5vw, 120px); }
.solutions { gap: clamp(64px, 7vw, 104px); }
.cards { gap: clamp(44px, 5vw, 72px) clamp(24px, 3.5vw, 48px); }
.sheets { gap: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 32px); }
.brands { padding: clamp(40px, 5vw, 60px) 0; }
/* === PRUEBA "BLANCO Y ORO" MADER BALEAR (16-10-2026). Para volver atrás, borrar este bloque y quitar <em> del h2 de la intro. === */
#mader-balear { --mb-white: #F5F0E8; --mb-gold: #C4A882; --mb-bronze: #8B6A42; --mb-bronze-dark: #6F5232; --mb-ink: #1A1714; }
#mader-balear .mb-intro { background: #1F1A15; color: var(--mb-white); }
#mader-balear .mb-intro h2 { color: var(--mb-white); }
#mader-balear .mb-intro h2 em { font-style: italic; color: var(--mb-gold); }
#mader-balear .mb-intro p { color: rgba(245,240,232,.82); }
#mader-balear .mb-intro .label, #mader-balear .mb-intro .motto { color: var(--mb-gold); }
#mader-balear .btn { background: var(--mb-bronze); border-color: var(--mb-bronze); color: #FAF7F2; }
#mader-balear .btn:hover { background: var(--mb-bronze-dark); border-color: var(--mb-bronze-dark); }
#mader-balear .mb-intro .btn--light { background: transparent; color: var(--mb-white); border-color: rgba(196,168,130,.7); }
#mader-balear .mb-intro .btn--light:hover { background: var(--mb-gold); color: var(--mb-ink); border-color: var(--mb-gold); }
#mader-balear .btn--ghost, #mader-balear .btn--wa { background: transparent; color: var(--mb-ink); border-color: var(--border); }
#mader-balear .btn--ghost:hover { background: var(--mb-ink); color: var(--mb-white); border-color: var(--mb-ink); }
#mader-balear .btn--wa:hover { background: var(--wa); border-color: var(--wa); color: #fff; }
#mader-balear .mb-zone { --bone: #F5F0E8; --wood: var(--mb-bronze); --wood-dark: var(--mb-bronze-dark); --ink: var(--mb-ink); }
#mader-balear .mb-zone .label, #mader-balear .mb-zone .num { color: var(--mb-bronze); }
#mader-balear .mb-zone h2, #mader-balear .mb-zone h3 { color: var(--mb-ink); }

#mader-balear .card .btn-row .btn { background: none; border: 0; border-bottom: 1px solid var(--mb-bronze); padding: 0 0 3px; color: var(--mb-bronze); }
#mader-balear .card .btn-row .btn:hover { background: none; color: var(--mb-ink); border-color: var(--mb-ink); }

.sheets .sheet--wide { grid-column: 1 / -1; }
.sheet--wide .ph, .sheet--wide .ph--sheet { aspect-ratio: 16 / 10; }

.works--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.works--grid .work .ph { aspect-ratio: 3 / 2; }
.works--grid .work .btn { margin-top: 14px; }
@media (max-width: 900px) { .works--grid { grid-template-columns: 1fr; } }

/* Madera en obra: 3 proyectos con Necesidad → Solución → Resultado */
.works--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nsr { display: grid; gap: 0; margin: 12px 0 0; }
.nsr div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--border); padding: 9px 0; }
.nsr dt { font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); padding-top: 3px; }
.nsr dd { margin: 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) { .works--grid { grid-template-columns: 1fr; } }
/* Enlace a la página interior */
.more-link { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }
/* Páginas interiores */
.page-inner main { padding-top: var(--header-h); }
.crumb { padding-top: 22px; padding-bottom: 6px; font-family: var(--font-display); font-size: 13px; color: var(--stone); }
.crumb a { color: var(--stone); }
.page-cta { border-top: 1px solid var(--border); text-align: center; }
.page-cta .h2, .page-cta .lead { margin-left: auto; margin-right: auto; }
.page-cta .btn-row { justify-content: center; margin-top: 24px; }
.mb-intro .ph { max-width: 100%; }
@media (max-width: 860px) { .mb-intro .ph { min-height: 0; } }

/* ===== MÓVIL (16-10-2026) · solo pantallas estrechas; en ordenador no cambia nada. Para volver atrás, borrar este bloque. ===== */
@media (max-width: 700px) {
  /* 1. Mader Balear y Piezas singulares: tarjetas que se deslizan de lado (como Maderas y tableros) */
  #mader-balear .cards {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; scrollbar-width: thin;
  }
  #mader-balear .cards > .card { flex: 0 0 86%; scroll-snap-align: start; }
  #mader-balear .card .ph { margin-bottom: 16px; }
  #mader-balear .section-head::after { content: "Deslice para ver más →"; display: block; margin-top: 10px; font-family: var(--font-display); font-size: 13px; color: var(--mb-bronze, var(--wood)); }

  /* 3. Botones de tarjeta e iconos de WhatsApp con zona táctil de 44 px (se ven igual) */
  .sol .btn-row .btn, .card .btn-row .btn, .sheet .actions .btn { min-height: 44px; display: inline-flex; align-items: flex-end; }
  .wa-mini { width: 44px; height: 44px; }
  .link-arrow { display: inline-block; padding: 12px 0 2px; }

  /* 4. Soluciones: foto algo más baja para acortar la sección */
  .sol > .ph { aspect-ratio: 4 / 3 !important; }

  /* 5. Letra mínima legible */
  .label, .specs dt, .nsr dt { font-size: 12px; }
  .tags li, .path .for, .contact-line, .footer .legal, .crumb, .form-legal, .sheet .specs dd, .specs dd { font-size: 13px; }
  .footer p, .footer li { font-size: 15px; }
}
@media (max-width: 520px) {
  /* 2. Inicio más compacto: sin el logo grande repetido y titular en 4 líneas */
  .hero > .hero-logo { display: none; }
  .hero h1 { font-size: 32px; max-width: none; margin-top: 12px; }
}
/* Inicio: texto legible sobre cualquier foto */
.hero .label, .hero h1 { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.45); }

/* ===== Zona 02 en dos familias + Madera antigua en una franja (17-10-2026) ===== */
.sheets--familias .sheet .body { gap: 12px; }
.fam-num { font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; color: var(--stone); }
.fam-tipos { font-family: var(--font-display); font-size: 14px; color: var(--ink); border-top: 1px solid var(--border); padding-top: 12px; margin: 0; }
.ficha-item { padding: 16px 0; border-top: 1px solid var(--border); }
.ficha-item:first-child { border-top: 0; padding-top: 4px; }
.ficha-item h5 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ficha-item > p { color: var(--stone); font-size: 15px; margin: 0 0 10px; }
.ficha-item .ficha-sub { font-weight: 500; color: var(--ink); }
.ficha-item .quote { font-size: 16px; margin: 10px 0; }
.mb-band { display: grid; gap: clamp(24px, 3vw, 36px); }
.mb-band .ph--band { aspect-ratio: 16 / 9; }
.mb-band-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.mb-band-intro .desc { color: var(--stone); margin: 0 0 20px; }
.mb-band-intro .btn-row { align-items: center; }
.mb-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.mb-types li { border-top: 1px solid var(--border); padding: 12px 0 14px; }
.mb-types strong { display: block; font-family: var(--font-mb); font-size: 24px; font-weight: 400; color: var(--mb-ink, var(--ink)); }
.mb-types span { font-size: 14px; color: var(--stone); }
.mb-also { margin: 0; font-size: 14px; color: var(--stone); }
@media (max-width: 860px) { .mb-band-body { grid-template-columns: 1fr; } .mb-band .ph--band { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .mb-types { grid-template-columns: 1fr; } }
.mb-band { position: relative; }
.mb-band > .anchor-alias { position: absolute; top: 0; left: 0; }

/* Madera antigua: 6 piezas en 3 columnas */
.mb-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mb-band-body { grid-template-columns: 1fr; }
.mb-band-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.mb-band-intro .desc { margin: 0; max-width: 60ch; }
.fam-link { margin: 0; font-size: 14px; }
@media (max-width: 860px) { .mb-types { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mb-types { grid-template-columns: 1fr; } }
/* Tableros de Madera Antigua & Reclaimed Boards: apartado destacado */
.mb-types-feature a { display: block; text-decoration: none; color: inherit; }
.mb-types-feature strong { color: var(--mb-bronze, var(--wood)) !important; }
.mb-types-feature .arrow { display: inline-block; transition: transform .2s ease; }
.mb-types-feature a:hover .arrow { transform: translateX(4px); }
#mader-balear .mb-feature { background: #1F1A15; color: var(--mb-white, #F5F0E8); }
.mb-feature-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mb-feature .ph { aspect-ratio: 4 / 5; background: #2E241A; }
#mader-balear .mb-feature .label { color: var(--mb-gold, #C4A882); }
#mader-balear .mb-feature .h2 { color: var(--mb-white, #F5F0E8); font-family: var(--font-mb); max-width: 16ch; }
.mb-feature .lead { color: rgba(245,240,232,.82); }
.mb-feature-types { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.mb-feature-types li { border-top: 1px solid rgba(196,168,130,.45); padding: 12px 0; }
.mb-feature-types strong { display: block; font-family: var(--font-mb); font-size: 22px; font-weight: 400; color: var(--mb-gold, #C4A882); }
.mb-feature-types span { font-size: 14px; color: rgba(245,240,232,.72); }
.mb-feature-specs { margin: 18px 0 26px; display: grid; gap: 8px; }
.mb-feature-specs div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
.mb-feature-specs dt { font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,240,232,.6); padding-top: 3px; }
.mb-feature-specs dd { margin: 0; font-size: 15px; color: rgba(245,240,232,.9); }
#mader-balear .mb-feature .btn--light { background: transparent; color: var(--mb-white, #F5F0E8); border-color: rgba(196,168,130,.7); }
#mader-balear .mb-feature .btn--light:hover { background: var(--mb-gold, #C4A882); color: #1A1714; border-color: var(--mb-gold, #C4A882); }
.mb-feature .wa-mini { border-color: rgba(245,240,232,.3); }
.mb-feature .btn-row { align-items: center; }
@media (max-width: 860px) { .mb-feature-grid { grid-template-columns: 1fr; } .mb-feature .ph { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .mb-feature-types { grid-template-columns: 1fr; } .mb-feature-specs div { grid-template-columns: 1fr; gap: 2px; } }
/* Prueba: apartado de Tableros al 50 % de ancho (tarjeta oscura centrada) */
#mader-balear .mb-feature { background: transparent; padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(56px, 6vw, 88px); }
.mb-feature-grid { max-width: 540px; margin: 0 auto; grid-template-columns: 1fr; gap: 0; background: #1F1A15; color: var(--mb-white, #F5F0E8); }
.mb-feature .ph { aspect-ratio: 16 / 10; }
.mb-feature-text { padding: 24px 28px 28px; }
#mader-balear .mb-feature .h2 { font-size: clamp(26px, 2.6vw, 32px); max-width: none; margin-bottom: 10px; }
.mb-feature .lead { font-size: 15px; }
.mb-feature-types { margin-top: 18px; gap: 0 14px; }
.mb-feature-types strong { font-size: 18px; }
.mb-feature-types span { font-size: 13px; }
.mb-feature-specs { margin: 14px 0 20px; }
.mb-feature-specs div { grid-template-columns: 84px minmax(0, 1fr); }
.mb-feature-specs dd { font-size: 14px; }
.mb-feature .btn-row { gap: 10px; }
.mb-feature .btn { padding: 11px 16px; font-size: 13px; }
@media (max-width: 860px) { .mb-feature .ph { aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .mb-feature-text { padding: 20px; } }
/* Tableros: franja horizontal baja, de borde a borde (sustituye a la prueba del 50 %) */
#mader-balear .mb-feature { background: #1F1A15; padding: 0; margin: clamp(24px, 3vw, 40px) 0 0; }
.mb-feature .container { max-width: none; padding: 0; }
.mb-feature-grid { max-width: none; margin: 0; background: transparent; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); align-items: stretch; min-height: 440px; }
.mb-feature .ph { aspect-ratio: auto; height: 100%; min-height: 440px; }
.mb-feature-text { padding: clamp(28px, 3.5vw, 48px) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) clamp(28px, 3.5vw, 48px) clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); align-content: center; }
.mb-feature-text > .label, .mb-feature-text > .h2, .mb-feature-text > .lead { grid-column: 1; }
.mb-feature-text > .mb-feature-types { grid-column: 1; grid-template-columns: 1fr 1fr 1fr; }
.mb-feature-text > .mb-feature-specs, .mb-feature-text > .btn-row { grid-column: 2; }
.mb-feature-text > .mb-feature-specs { grid-row: 1 / span 3; align-self: end; margin: 0 0 18px; }
.mb-feature-text > .btn-row { grid-row: 4; align-self: start; margin-top: 18px; }
#mader-balear .mb-feature .h2 { font-size: clamp(26px, 2.4vw, 34px); }
@media (max-width: 1000px) {
  .mb-feature-text { grid-template-columns: 1fr; padding: 28px var(--gutter); }
  .mb-feature-text > * { grid-column: 1 !important; grid-row: auto !important; }
  .mb-feature-text > .mb-feature-specs { margin: 16px 0 0; }
}
@media (max-width: 760px) {
  .mb-feature-grid { grid-template-columns: 1fr; min-height: 0; }
  .mb-feature .ph { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
}
/* Tipos de tablero pulsables */
.mb-feature-types .tt { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 0 0 6px; border-bottom: 2px solid transparent; transition: border-color .2s ease; }
.mb-feature-types .tt strong { display: inline-block; }
.mb-feature-types .tt strong::after { content: " →"; font-size: .8em; opacity: .7; }
.mb-feature-types .tt:hover strong, .mb-feature-types .tt.is-on strong { color: #E2C9A0; }
.mb-feature-types .tt.is-on { border-bottom-color: var(--mb-gold, #C4A882); }
.mb-feature-types .tt:focus-visible { outline: 2px solid var(--mb-gold, #C4A882); outline-offset: 4px; }
.tt-info { grid-column: 1; margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: rgba(245,240,232,.78); min-height: 3em; }
.mb-feature figure img { transition: opacity .18s ease; }
.mb-feature-types .tt strong { white-space: nowrap; }
.mb-feature-types .tt span { display: block; margin-top: 2px; }

/* Tableros: mismo ancho que la foto de "Estructura, superficie y carpintería" (dentro del contenedor, foto 16:9 arriba y texto debajo) */
#mader-balear .mb-feature { background: transparent; padding: 0 0 clamp(56px, 6vw, 88px); margin: 0; }
.mb-feature .container { max-width: var(--container); padding: 0 var(--gutter); }
.mb-feature-grid { grid-template-columns: 1fr; min-height: 0; background: #1F1A15; }
.mb-feature .ph { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.mb-feature-text { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); }
@media (max-width: 1000px) { .mb-feature-text { padding: 24px; } }
/* Obras: 4 proyectos en 2 x 2, fotos más grandes */
.works--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .works--grid { grid-template-columns: 1fr; } }

/* ===== MÓVIL 2 (23-10-2026): Obras deslizable, Tableros y Puertas más compactos. Solo pantallas estrechas. ===== */
@media (max-width: 700px) {
  .works--grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; scrollbar-width: thin; }
  .works--grid > .work { flex: 0 0 86%; scroll-snap-align: start; }
  #obras .section-head::after { content: "Deslice para ver más →"; display: block; margin-top: 10px; font-family: var(--font-display); font-size: 13px; color: var(--wood); }
  .nsr div { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
  .mb-feature .ph { aspect-ratio: 21 / 9; }
  .mb-feature-specs { display: none; }
  .mb-feature-text { padding: 20px; }
  .mb-band .ph--band { aspect-ratio: 16 / 10; }
  .mb-types li { padding: 9px 0 10px; }
  .mb-types strong { font-size: 20px; }
}
/* Mensaje de gracias tras enviar el formulario: visible y claro */
.is-sent .success { display: block; background: #F1ECE3; border-left: 3px solid var(--wood); padding: 28px 32px; animation: okIn .4s ease; }
.success .ok-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2F6F3E; color: #fff; font-size: 24px; margin-bottom: 14px; }
.success h3 { margin-bottom: 10px; }
@keyframes okIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }