/* ==========================================================================
   Casa Nueva Design · Hoja de estilos
   Tipografías alojadas en el propio sitio (sin servicios de terceros)
   ========================================================================== */

/* DM Sans (variable) */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dmsans-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* IBM Plex Mono */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibmplexmono-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibmplexmono-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Instrument Serif */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/instrumentserif-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/instrumentserif-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Jost (variable, logotipo) */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/jost-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/jost-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   Tokens
   --barro se mantiene para superficies y cifras grandes; --barro-texto es la
   misma terracota un punto más profunda para que textos pequeños y botones
   lleguen al contraste AA (4,5:1) sobre crema.
   ========================================================================== */
:root{
  --crema:#F7F2E9; --arena:#EFE8DA; --tinta:#1E1B17; --texto:#4A443B; --suave:#6B6357;
  --barro:#B4573A; --barro-texto:#A34D30; --barro-osc:#8E3F27; --oliva:#3B3F35; --oliva-osc:#2E3229;
  --linea:rgba(30,27,23,.12); --pad:56px;
  --papel:#FFFDF8; --borde-campo:#857B6C; --error:#A12B1E; --ok:#2F6B45;
  --foco:var(--tinta);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,blockquote,figure{margin:0}
img{display:block;width:100%;height:auto;object-fit:cover;border-radius:6px}
a{color:var(--barro-texto);text-decoration:none}
a:hover{color:var(--barro-osc)}
button{font:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:80px;padding-bottom:80px}
.sin-top{padding-top:0}
.serif,h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
h2{font-size:clamp(30px,4vw,40px);line-height:1.1;letter-spacing:-.01em}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}

/* Accesibilidad: foco visible, salto al contenido y texto solo para lectores */
:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.precios,.cierre,footer,.plan.oscuro,.montaje{--foco:var(--crema)}
.plan{--foco:var(--tinta)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.saltar{position:absolute;left:16px;top:-120px;z-index:100;background:var(--tinta);color:var(--crema);padding:12px 20px;border-radius:999px;font-size:15px;font-weight:500}
.saltar:focus{top:12px;color:var(--crema)}
[tabindex="-1"]:focus{outline:none}
[tabindex="-1"]:focus-visible{outline:none}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 28px;border-radius:999px;border:0;font-size:16px;font-weight:500;line-height:1.2;text-align:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-barro{background:var(--barro-texto);color:var(--crema)}
.btn-barro:hover{background:var(--barro-osc);color:var(--crema)}
.btn-tinta{background:var(--tinta);color:var(--crema);padding:11px 20px;font-size:14px;min-height:44px}
.btn-tinta:hover{background:#3A352E;color:var(--crema)}
.btn-crema{background:var(--crema);color:var(--tinta)}
.btn-crema:hover{background:#fff;color:var(--tinta)}
.btn-linea{border:1px solid var(--tinta);background:transparent;color:var(--tinta);padding:12px 20px;font-size:15px;font-weight:400}
.btn-linea:hover{background:var(--tinta);color:var(--crema)}
.btn-linea-clara{border:1px solid var(--crema);color:var(--crema);padding:12px 20px;font-size:15px;font-weight:400}
.btn-linea-clara:hover{background:var(--crema);color:var(--tinta)}
.btn-plan{padding:12px 20px;font-size:15px;font-weight:400}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.7}

/* ==========================================================================
   Cabecera y menú
   ========================================================================== */
.header{position:relative;z-index:30;background:var(--crema);border-bottom:1px solid rgba(30,27,23,.1)}
.header .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:22px;padding-bottom:22px}
.logo{display:flex;align-items:center;gap:12px;color:#38784E}
.logo:hover{color:#38784E}
.logo span{font-family:'Jost',sans-serif;font-weight:200;font-size:19px;letter-spacing:.08em;line-height:1.05}
.nav{display:flex;align-items:center;gap:28px;font-size:15px}
.nav-lista{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-lista a{display:inline-block;padding:6px 0;color:var(--texto)}
.nav-lista a:hover{color:var(--barro-texto)}
.nav-cta{display:none}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--tinta);border-radius:999px;background:transparent;color:var(--tinta);font-size:15px;cursor:pointer}
.menu-btn[hidden]{display:none!important}
.menu-btn__cerrar{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__abrir{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__cerrar{display:block}

/* ==========================================================================
   Portada
   ========================================================================== */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:64px}
.hero-text{display:flex;flex-direction:column;gap:26px}
.hero-text .mono{color:var(--barro-texto);letter-spacing:.14em}
.hero h1{font-size:clamp(40px,5.6vw,66px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:19px;line-height:1.6;color:var(--texto);max-width:44ch;text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-cta small{font-size:15px;color:var(--suave)}
.hero-datos{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0;padding:14px 0 0;list-style:none;border-top:1px solid var(--linea);font-size:15px;color:var(--texto)}
.hero img{height:460px}

.marcas{background:var(--arena)}
.marcas .wrap{display:flex;align-items:center;gap:16px 40px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px;color:var(--suave)}
.marcas ul{display:flex;flex-wrap:wrap;gap:10px 32px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500;color:var(--texto)}
.marcas .mas{font-weight:400;color:var(--suave)}

.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin:44px 0 0;padding:0;list-style:none}
.paso{display:flex;flex-direction:column;gap:14px}
.paso .num{font-size:34px;color:var(--barro)}
.paso h3{font-size:20px;font-weight:500}
.paso p{font-size:16px;line-height:1.6;color:var(--texto)}

figure{display:flex;flex-direction:column;gap:10px}
figcaption{font-size:14px;color:var(--suave)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.duo img{height:300px}
.img-antes{object-position:50% 35%}

.precios{background:var(--oliva);color:var(--crema)}
.precios-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.precios-head p{font-size:16px;color:rgba(247,242,233,.7)}
.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.plan{background:var(--crema);color:var(--tinta);border-radius:8px;padding:32px;display:flex;flex-direction:column;gap:16px}
.plan .mono{color:var(--suave)}
.plan .precio{font-size:48px;line-height:1}
.plan .extra{font-size:14px;color:var(--suave)}
.plan p{font-size:16px;line-height:1.6;color:var(--texto)}
.plan .btn{margin-top:auto}
.plan.destacado{outline:3px solid var(--barro)}
.plan.destacado .mono{color:var(--barro-texto)}
.plan.oscuro{background:var(--oliva-osc);color:var(--crema);border:1px solid rgba(247,242,233,.22)}
.plan.oscuro .mono{color:#E0865C}
.plan.oscuro .precio{font-size:40px;line-height:1.1}
.plan.oscuro p{color:rgba(247,242,233,.8)}
.montaje{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 28px;border:1px dashed rgba(247,242,233,.35);border-radius:8px;margin-top:40px}
.montaje strong{display:block;font-size:19px;font-weight:500;margin-bottom:6px}
.montaje span{font-size:16px;color:rgba(247,242,233,.7)}
.montaje .btn{padding:12px 22px;font-size:15px}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.trio img{height:240px}
.trio figcaption{font-size:15px;color:var(--tinta)}

.citas{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}
blockquote{padding:32px;background:var(--arena);border-radius:8px;display:flex;flex-direction:column;gap:16px}
blockquote p{font-family:'Instrument Serif',Georgia,serif;font-size:24px;line-height:1.4}
blockquote cite{font-style:normal;font-size:15px;color:var(--suave)}

.trabajo{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.trabajo img{height:340px}
.trabajo-text{display:flex;flex-direction:column;gap:20px}
.trabajo-text p{font-size:18px;line-height:1.65;color:var(--texto);text-wrap:pretty}

.faq{margin:28px 0 0;border-bottom:1px solid var(--linea)}
.faq div{display:flex;justify-content:space-between;gap:40px;padding:22px 0;border-top:1px solid var(--linea)}
.faq dt{font-size:18px;font-weight:500}
.faq dd{margin:0;font-size:16px;line-height:1.6;color:var(--texto);max-width:52ch}

.cierre{background:var(--barro);color:var(--crema)}
.cierre .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-top:72px;padding-bottom:72px}
.cierre h2{max-width:24ch}

footer{background:var(--tinta);color:rgba(247,242,233,.6);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:40px;padding-bottom:40px}
footer a{color:rgba(247,242,233,.8)}
footer a:hover{color:var(--crema)}
.logo-pie{display:flex;align-items:center;gap:16px}
.logo-pie .nombre{font-family:'Jost',sans-serif;font-weight:200;font-size:22px;letter-spacing:.09em;color:#8FC3A2;line-height:1.05}
.logo-pie .claim{font-family:'Jost',sans-serif;font-weight:300;font-size:12px;letter-spacing:.16em;color:rgba(247,242,233,.55);margin-top:6px}
.pie-legal{border-top:1px solid rgba(247,242,233,.12)}
footer .pie-legal .wrap{padding-top:20px;padding-bottom:24px;align-items:center;font-size:13px}
.pie-legal nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.pie-legal nav a{display:inline-block;padding:6px 0}

/* ==========================================================================
   Vistas (formularios y páginas legales)
   Se muestran con el ancla de la URL (:target), también sin JavaScript.
   ========================================================================== */
.vista{display:none;scroll-margin-top:100vh} /* al abrir una vista por enlace, la página queda arriba (cabecera visible) */
.vista:target,.vista.vista--abierta{display:block}
/* :has() en reglas aparte: un navegador que no lo admite descarta solo estas */
.vista:has(:target){display:block}
main:has(.vista:target)>.home{display:none}
main:has(.vista :target)>.home{display:none}
body.modo-vista .home{display:none}
main:focus{outline:none}
.volver{display:inline-flex;align-items:center;min-height:44px;font-size:15px}

/* Páginas legales */
.legal.vista{padding-top:56px;padding-bottom:88px}
.legal{max-width:820px}
.legal .volver{margin-bottom:24px}
.legal .mono{display:block;color:var(--barro-texto);margin-bottom:14px}
.legal h1{font-size:clamp(36px,5vw,52px);line-height:1.05;letter-spacing:-.015em}
.legal .actualizado{font-size:14px;color:var(--suave);margin-top:12px;padding-bottom:28px;border-bottom:1px solid var(--linea)}
.legal h2{font-size:26px;margin:40px 0 14px}
.legal h3{font-size:19px;font-weight:500;line-height:1.3;color:var(--tinta);margin:28px 0 10px;scroll-margin-top:24px}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--texto)}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:20px}
.legal ul.datos{list-style:none;padding:22px 26px;background:var(--arena);border-radius:8px}
.legal ul.datos li+li{margin-top:6px}
.legal strong{color:var(--tinta);font-weight:500}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal .tabla{overflow-x:auto;margin-top:14px}
.legal table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;min-width:560px}
.legal th{text-align:left;font-weight:500;color:var(--tinta);border-bottom:1px solid var(--tinta);padding:10px 12px 10px 0}
.legal td{vertical-align:top;color:var(--texto);border-bottom:1px solid var(--linea);padding:12px 12px 12px 0}
.legal .anexo{background:var(--arena);border-radius:8px;padding:22px 26px}

/* ==========================================================================
   Formularios
   ========================================================================== */
.vista-form{padding-top:40px;padding-bottom:96px}
.vista-form .volver{margin-bottom:20px}
.form-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}
.form-intro{position:sticky;top:32px;display:flex;flex-direction:column;gap:20px;padding-top:8px}
.form-intro .mono{color:var(--barro-texto)}
.form-intro h1{font-size:clamp(38px,4.6vw,56px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.form-lead{font-size:18px;line-height:1.6;color:var(--texto);text-wrap:pretty}
.form-claves{margin:0;padding:18px 0 0;list-style:none;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5;color:var(--texto)}
.form-claves li{position:relative;padding-left:26px}
.form-claves li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);transform:rotate(-45deg)}
.form-alternativa{font-size:15px;color:var(--suave)}
.form-alternativa a,.form a,.form-success a:not(.btn){text-decoration:underline;text-underline-offset:2px}

.form-card{container:formulario / inline-size;background:var(--papel);border:1px solid rgba(30,27,23,.14);border-radius:10px;padding:36px}
.form{display:block}
.form__req{font-size:14px;color:var(--suave);margin-bottom:22px}
.form__extra{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.campo{display:flex;flex-direction:column;gap:8px;min-width:0}
.campo+.campo,.campos-fila+.campo,.campo+.campos-fila,.campos-fila+.campos-fila,.campo+.campo-check,.campo-fotos+.campo-check{margin-top:26px}
.campo>label,.campo legend,.campo__etiqueta{font-size:16px;font-weight:500;line-height:1.4;color:var(--tinta)}
.campo legend{margin-bottom:8px}
.campo legend+.campo__ayuda{margin-top:-6px}
.ast{color:var(--error);font-weight:500}
.campo__ayuda{font-size:14px;line-height:1.5;color:var(--suave)}
.campo__nota{font-size:14px;line-height:1.5;color:var(--suave);margin-top:4px}
.campos-fila{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;align-items:start}
.campos-fila>.campo{margin-top:0}

.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;line-height:1.4;color:var(--tinta);background:#fff;border:1px solid var(--borde-campo);border-radius:6px;transition:border-color .15s,box-shadow .15s}
.form textarea{min-height:104px;resize:vertical}
.form select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231E1B17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:14px 9px}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--tinta)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--tinta);outline-offset:1px;border-color:var(--tinta)}
.form [aria-invalid="true"]:not([type=checkbox]):not([type=radio]){border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}

.campo__error{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:500;line-height:1.45;color:var(--error)}
.campo__error[hidden]{display:none}
.campo__error svg{flex:none;margin-top:1px}
.campo__error--check{margin-top:8px;padding-left:36px}

/* Opciones en forma de píldora (casillas y botones de opción reales, accesibles) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex;max-width:100%}
.chip input,.opcion input{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip>span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;font-size:15px;line-height:1.3;color:var(--tinta);background:#fff;border:1px solid var(--borde-campo);border-radius:999px;transition:background .15s,border-color .15s,color .15s}
.chip>span::before{content:"";flex:none;width:16px;height:16px;border:1.5px solid var(--borde-campo);border-radius:4px;background:#fff center/11px 8px no-repeat}
.chip input[type=radio]+span::before{border-radius:50%}
.chip:hover>span{border-color:var(--tinta)}
.chip input:checked+span{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
.chip input[type=checkbox]:checked+span::before{border-color:var(--crema);background-color:var(--crema);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' fill='none' stroke='%231E1B17' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.chip input[type=radio]:checked+span::before{border-color:var(--crema);background:radial-gradient(circle,var(--crema) 0 4px,transparent 4.5px)}
.chip input:focus-visible+span{outline:3px solid var(--tinta);outline-offset:2px}
.chip input[aria-invalid="true"]+span{border-color:var(--error)}
.muestra{flex:none;width:34px;height:14px;border-radius:999px;border:1px solid rgba(30,27,23,.25)}
.muestra--neutros{background:linear-gradient(90deg,#EFE6D6 0 33%,#D8C7AC 33% 66%,#B49F80 66%)}
.muestra--tierras{background:linear-gradient(90deg,#E3B79A 0 33%,#C0704E 33% 66%,#8E3F27 66%)}
.muestra--verdes{background:linear-gradient(90deg,#C9CDB1 0 33%,#8A9070 33% 66%,#4E5640 66%)}
.muestra--azules{background:linear-gradient(90deg,#D3DCE0 0 33%,#8EA2AD 33% 66%,#4D6170 66%)}
.muestra--byn{background:linear-gradient(90deg,#FFFFFF 0 33%,#9A9A9A 33% 66%,#1E1B17 66%)}
.muestra--intenso{background:linear-gradient(90deg,#E3A72F 0 33%,#2F6F73 33% 66%,#B23A48 66%)}
.chip input:checked+span .muestra{border-color:rgba(247,242,233,.6)}

.opciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcion{position:relative;display:flex}
.opcion__caja{flex:1;display:flex;flex-direction:column;gap:4px;padding:16px 18px 16px 50px;background:#fff;border:1px solid var(--borde-campo);border-radius:8px;position:relative;transition:border-color .15s,background .15s}
.opcion__caja::before{content:"";position:absolute;left:18px;top:19px;width:18px;height:18px;border:1.5px solid var(--borde-campo);border-radius:50%;background:#fff}
.opcion__caja strong{font-size:16px;font-weight:500;color:var(--tinta)}
.opcion__caja span{font-size:14px;line-height:1.45;color:var(--suave)}
.opcion:hover .opcion__caja{border-color:var(--tinta)}
.opcion input:checked+.opcion__caja{border-color:var(--barro-texto);box-shadow:inset 0 0 0 1px var(--barro-texto);background:#FBF1EA}
.opcion input:checked+.opcion__caja::before{border-color:var(--barro-texto);background:radial-gradient(circle,var(--barro-texto) 0 5px,#fff 5.5px)}
.opcion input:focus-visible+.opcion__caja{outline:3px solid var(--tinta);outline-offset:2px}
.opcion input[aria-invalid="true"]+.opcion__caja{border-color:var(--error)}

/* Casilla de privacidad */
.campo-check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:30px;font-size:15px;line-height:1.5;color:var(--texto)}
.campo-check input{width:24px;height:24px;margin:0;accent-color:var(--barro-texto);cursor:pointer}
.campo-check label{cursor:pointer}
.campo__error--check+.campo-check{margin-top:18px}
.form__info-datos{margin-top:16px;padding:14px 16px;font-size:13px;line-height:1.55;color:var(--suave);background:var(--arena);border-radius:6px}
.form__info-datos strong{font-weight:500;color:var(--texto)}

/* Fotos */
.fotos-zona{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:18px;border:1.5px dashed var(--borde-campo);border-radius:8px;background:#fff;transition:border-color .15s,background .15s}
.fotos-zona.arrastrando{border-color:var(--barro-texto);background:#FBF1EA}
.fotos-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.fotos-boton{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--tinta);border-radius:999px;font-size:15px;font-weight:500;color:var(--tinta);cursor:pointer;background:var(--papel)}
.fotos-boton:hover{background:var(--tinta);color:var(--crema)}
.fotos-input:focus-visible+.fotos-boton{outline:3px solid var(--tinta);outline-offset:3px}
.fotos-input:disabled+.fotos-boton{cursor:not-allowed;opacity:.6;background:var(--papel);color:var(--tinta)}
.fotos-arrastra{font-size:14px;color:var(--suave)}
.fotos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none}
.fotos-lista[hidden]{display:none}
.fotos-lista li{position:relative}
.fotos-lista img{aspect-ratio:1;height:auto;border-radius:6px;border:1px solid var(--linea)}
.fotos-lista .fotos-quitar{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(30,27,23,.82);color:var(--crema);cursor:pointer}
.fotos-lista .fotos-quitar:hover{background:var(--tinta)}
.fotos-lista .fotos-quitar:focus-visible{outline:3px solid var(--tinta);outline-offset:2px;box-shadow:0 0 0 2px var(--crema)}
.fotos-lista .fotos-quitar:disabled{cursor:not-allowed;opacity:.5;background:rgba(30,27,23,.82)}
.fotos-lista .fotos-procesando{display:grid;place-items:center;aspect-ratio:1;border-radius:6px;border:1px dashed var(--borde-campo);font-size:13px;color:var(--suave);text-align:center;padding:8px}
.fotos-estado{font-size:14px;color:var(--suave);min-height:1.2em}

/* reCAPTCHA */
.form__captcha{margin-top:26px}
.form__captcha-titulo{font-size:16px;font-weight:500;margin-bottom:10px}
.form__captcha-wrap{min-height:78px;max-width:100%;overflow:hidden}
.form__captcha-wrap[hidden]{display:none}
.g-recaptcha{width:304px;transform-origin:0 0;transform:scale(var(--cap-escala,1))}
.form__fallback{font-size:15px;line-height:1.5;color:var(--texto);background:var(--arena);border-radius:6px;padding:12px 14px}
.form__fallback[hidden]{display:none}

/* Navegación entre pasos y envío */
.progreso{display:flex;gap:6px;margin-bottom:28px}
.progreso span{flex:1;height:4px;border-radius:2px;background:rgba(30,27,23,.14);transition:background .2s}
.progreso span.hecho{background:var(--barro-texto)}
.no-js .progreso{display:none}
.paso-form__titulo{font-size:clamp(28px,3vw,34px);line-height:1.1;margin-bottom:26px}
.paso-form__n{display:block;margin-bottom:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--barro-texto)}
.js .form-pasos .paso-form{display:none}
.js .form-pasos .paso-form.activo{display:block}
.no-js .paso-form+.paso-form{margin-top:48px;padding-top:40px;border-top:1px solid var(--linea)}
.no-js [data-siguiente],.no-js [data-atras]{display:none}
.paso-form__nav,.form__acciones{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--linea)}
.paso-form__nav>.btn:only-child,.form__acciones>.btn:only-child{margin-left:auto}
.form__subida{height:6px;margin-top:16px;border-radius:3px;background:rgba(30,27,23,.12);overflow:hidden}
.form__subida[hidden]{display:none}
.form__subida span{display:block;width:0;height:100%;background:var(--barro-texto);transition:width .2s}
.form__status{margin-top:14px;font-size:15px;font-weight:500;line-height:1.5;min-height:1.5em}
.form__status.is-ok{color:var(--ok)}
.form__status.is-error{color:var(--error)}

/* Confirmación */
.form-success{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:8px 0}
.form-success[hidden]{display:none}
.form-success__sello{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#E3EDE4;color:var(--ok)}
.form-success__kicker{color:var(--ok)}
.form-success__titulo{font-size:clamp(32px,3.6vw,42px);line-height:1.05}
.form-success p{font-size:17px;line-height:1.6;color:var(--texto);max-width:46ch}
.form-success .btn{margin-top:10px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .form-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px}
}
@media (max-width:1000px){
  .planes{grid-template-columns:repeat(2,1fr)}
  .header .wrap{justify-content:flex-start;gap:12px}
  .js .menu-btn{display:inline-flex;margin-left:auto}
  .js .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:4px var(--pad) 28px;background:var(--crema);border-bottom:1px solid var(--linea);box-shadow:0 22px 30px -22px rgba(30,27,23,.35)}
  .js .nav.abierto{display:flex}
  .js .nav-lista{flex-direction:column;gap:0}
  .js .nav-lista a{display:flex;align-items:center;min-height:56px;padding:8px 0;font-size:19px;color:var(--tinta);border-bottom:1px solid var(--linea)}
  .no-js .header .wrap{flex-wrap:wrap}
  .no-js .nav{order:3;width:100%}
  .no-js .header-cta{margin-left:auto}
  .no-js .nav-lista{flex-wrap:wrap;gap:4px 22px}
  .form-layout{grid-template-columns:1fr;gap:32px}
  .form-intro{position:static;gap:16px;padding-top:0}
  .form-intro h1{font-size:clamp(36px,6vw,48px)}
  .form-claves{flex-direction:row;flex-wrap:wrap;gap:8px 24px}
}
@media (max-width:860px){
  :root{--pad:24px}
  .section{padding-top:56px;padding-bottom:56px}
  .sin-top{padding-top:0}
  .hero{grid-template-columns:1fr;gap:36px;padding-top:44px;padding-bottom:48px}
  .hero img{height:auto;aspect-ratio:4/3}
  .pasos{grid-template-columns:1fr;gap:28px;margin-top:32px}
  .citas,.trabajo{grid-template-columns:1fr}
  .duo img{height:260px}
  .trabajo{gap:28px}
  .trabajo img{height:auto;aspect-ratio:16/10}
  .trio img{height:200px}
  .faq div{flex-direction:column;gap:8px}
  .cierre .wrap{padding-top:56px;padding-bottom:56px}
  .legal.vista{padding-top:32px;padding-bottom:64px}
  .vista-form{padding-top:24px;padding-bottom:64px}
  .form-card{padding:28px 24px}
}
@media (max-width:700px){
  .trio{grid-template-columns:1fr;gap:28px}
  .trio img{height:auto;aspect-ratio:3/2}
  .img-cuadros{object-position:50% 20%}
}
@media (max-width:640px){
  /* Tablas legales apiladas: cada fila como ficha, sin desplazamiento lateral */
  .legal table{min-width:0}
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block}
  .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .legal tr{padding:14px 16px;margin-top:12px;background:var(--papel);border:1px solid var(--linea);border-radius:8px}
  .legal td{padding:4px 0;border:0}
  .legal td::before{content:attr(data-label);display:block;font-size:13px;font-weight:500;color:var(--tinta)}
  .legal td+td{margin-top:6px}
}
@media (max-width:560px){
  .header .wrap{padding-top:16px;padding-bottom:16px}
  .header-cta{display:none}
  .js .nav-cta{display:flex;margin-top:22px;width:100%}
  .hero h1{font-size:clamp(34px,9.6vw,40px)}
  .hero-cta .btn{width:100%}
  .hero-cta small{width:100%;text-align:center}
  .duo{grid-template-columns:1fr;gap:28px}
  .duo img{height:auto;aspect-ratio:4/3}
  .planes{grid-template-columns:1fr}
  .plan{padding:28px}
  .montaje{padding:22px}
  .montaje .btn{width:100%}
  .lead{font-size:17px}
  blockquote{padding:26px}
  blockquote p{font-size:21px}
  .cierre .btn{width:100%}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .form-card{padding:24px 18px;border-radius:8px}
  .form-lead{font-size:17px}
  .form-claves{flex-direction:column}
  .paso-form__nav .btn,.form__acciones .btn{flex:1;padding-left:18px;padding-right:18px}
  .paso-form__nav [data-atras]{flex:0 0 auto;padding-left:22px;padding-right:22px}
  .form-success .btn{width:100%}
  .legal ul.datos,.legal .anexo{padding:18px}
}
@container formulario (max-width:520px){
  .campos-fila{grid-template-columns:1fr}
  .opciones{grid-template-columns:1fr}
}
@media (max-width:400px){
  .campos-fila,.opciones{grid-template-columns:1fr}
  .chip>span{padding:10px 14px}
}

/* Preferencias del sistema */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
  .chip>span,.opcion__caja,.fotos-zona,.form-card{border:1px solid CanvasText}
  /* marcado = borde grueso; foco = contorno exterior: así se distinguen los dos estados */
  .chip input:checked+span,.opcion input:checked+.opcion__caja{border:3px solid Highlight}
  .chip input:focus-visible+span,.opcion input:focus-visible+.opcion__caja{outline:3px solid CanvasText;outline-offset:3px}
  .chip>span::before,.opcion__caja::before{forced-color-adjust:none;border-color:CanvasText;background-color:Canvas}
  .chip input:checked+span::before,.opcion input:checked+.opcion__caja::before{background:Highlight}
  .progreso span.hecho,.form__subida span{background:Highlight}
  .muestra{forced-color-adjust:none}
}
@media print{
  .header,.saltar,footer,.vista-form,.cierre{display:none}
}