/* ============================================================
   CasaGuía — sistema de diseño "cálido contemporáneo"
   Reconstruido fiel a la maqueta (CasaGuia Rediseno.dc.html)
   ============================================================ */

:root{
  --paper:#f7f5f1;
  --paper-2:#e9e6e0;
  --ink:#191b17;
  --ink-2:rgba(25,27,23,.62);
  --ink-3:rgba(25,27,23,.5);
  --line:rgba(25,27,23,.08);
  --line-2:rgba(25,27,23,.12);
  --soft:rgba(25,27,23,.06);
  --soft-2:rgba(25,27,23,.045);
  --card:#fff;

  /* Terracota y arena; aliases compartidos por los componentes. */
  --olive:#a84b16;
  --olive-d:#843b19;
  --olive-dd:#6b301b;
  --olive-tint:#fbefe5;
  --olive-tint-2:#f6e3d3;
  --lime:#e8ad7c;
  --lime-l:#f2c8a4;
  --lime-ll:#f7dcc4;

  --hatch:repeating-linear-gradient(115deg,#dcd8ce 0 12px,#e5e1d7 12px 24px);
  --hatch-sm:repeating-linear-gradient(115deg,#dcd8ce 0 8px,#e5e1d7 8px 16px);

  --r-lg:24px; --r-md:20px; --r-sm:16px; --r-pill:999px;
  --shadow:0 2px 10px rgba(0,0,0,.07);
  --shadow-lg:0 20px 60px rgba(0,0,0,.12);
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:56px 0 8px}
.section:first-of-type{padding-top:36px}
.kicker{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--olive);margin-bottom:16px}
h1,h2,h3{margin:0;text-wrap:pretty}
.h1{font:800 clamp(34px,6vw,60px)/1.03 'Schibsted Grotesk',sans-serif;letter-spacing:-.04em}
.h2{font:700 clamp(26px,4vw,40px)/1.1 'Schibsted Grotesk',sans-serif;letter-spacing:-.035em}
.h3{font:700 clamp(18px,2.4vw,22px)/1.2 'Schibsted Grotesk',sans-serif;letter-spacing:-.025em}
.lead{font:400 clamp(15px,1.7vw,16.5px)/1.6 'Schibsted Grotesk',sans-serif;color:var(--ink-2)}
.muted{color:var(--ink-2)}

/* ---- header / nav ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(247,245,241,.86);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.site-header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--maxw);margin:0 auto;padding:14px 20px}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:26px;height:26px;border-radius:9px;background:var(--olive);display:flex;align-items:center;justify-content:center;flex:none}
.brand-mark svg{width:15px;height:15px;color:#fff}
.brand-name{font:700 17px/1 'Schibsted Grotesk',sans-serif;letter-spacing:-.03em}
.nav-links{display:flex;gap:4px;padding:5px;background:var(--soft);border-radius:var(--r-pill);font:500 13px/1 'Schibsted Grotesk',sans-serif}
.nav-links a{padding:9px 15px;border-radius:var(--r-pill);color:var(--ink-2);white-space:nowrap;transition:.15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.nav-cta{font:600 13px/1 'Schibsted Grotesk',sans-serif;padding:12px 20px;background:var(--ink);color:var(--paper);border-radius:var(--r-pill);border:none;cursor:pointer;white-space:nowrap}
.nav-burger{display:none;width:44px;height:44px;border-radius:14px;background:var(--soft);border:none;cursor:pointer;align-items:center;justify-content:center}
.nav-burger svg{width:20px;height:20px}

/* mobile menu drawer */
.mnav{position:fixed;inset:0;z-index:200;display:none}
.mnav.open{display:block}
.mnav-scrim{position:absolute;inset:0;background:rgba(20,22,18,.4);backdrop-filter:blur(2px)}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,340px);background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .25s ease}
.mnav.open .mnav-panel{transform:none}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mnav-close{width:44px;height:44px;border-radius:14px;background:var(--soft);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mnav-panel a{padding:14px 16px;border-radius:14px;font:600 17px/1 'Schibsted Grotesk',sans-serif;color:var(--ink)}
.mnav-panel a.active{background:var(--olive-tint);color:var(--olive-d)}
.mnav-panel .nav-cta{margin-top:12px;text-align:center;padding:16px}

/* ---- buttons / pills ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 'Schibsted Grotesk',sans-serif;padding:16px 26px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:.15s;text-align:center}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{opacity:.9}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-olive{background:var(--olive);color:#fff}
.btn-lime{background:var(--lime);color:#14170f}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-soft{background:var(--soft);color:var(--ink)}
.btn-block{display:flex;width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,.pill:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(168,75,22,.4);outline-offset:3px}
[data-save-key].is-saved{background:var(--olive);color:#fff;border-color:var(--olive)}
.pill{display:inline-flex;align-items:center;gap:7px;font:500 13.5px/1 'Schibsted Grotesk',sans-serif;padding:11px 16px;border-radius:var(--r-pill);background:var(--soft);cursor:pointer;border:none;transition:.15s;white-space:nowrap}
.pill.active{background:var(--olive);color:#fff}
.badge{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 'Schibsted Grotesk',sans-serif;color:#fff;background:rgba(20,22,18,.42);padding:9px 14px;border-radius:var(--r-pill)}
.badge svg{width:14px;height:14px;color:var(--lime-l)}

/* ---- cards ---- */
.card{background:var(--card);border-radius:var(--r-md);padding:24px}
.card-dark{background:var(--ink);color:var(--paper);border-radius:var(--r-md);padding:24px}
.card-olive{background:var(--olive);color:#fff;border-radius:var(--r-md);padding:24px}
.hatch{background:var(--hatch)}
.hatch-sm{background:var(--hatch-sm)}

/* fotografías reales (override del placeholder rayado) */
.ph{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.ph-hero{background-image:url(../img/hero-casa.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-casa-compacta{background-image:url(../img/casa-compacta.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-cocina{background-image:url(../img/cocina.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-living{background-image:url(../img/living.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-campo{background-image:url(../img/casa-campo.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-steel{background-image:url(../img/steel-frame.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-bano{background-image:url(../img/bano.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-interior{background-image:url(../img/fachada.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-isla{background-image:url(../img/isla-cocina.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-quincho{background-image:url(../img/quincho.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-obra{background-image:url(../img/obra.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-interior2{background-image:url(../img/interior2.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-casa2{background-image:url(../img/casa2.jpg)!important;background-size:cover!important;background-position:center!important}
.ph-interior3{background-image:url(../img/interior3.jpg)!important;background-size:cover!important;background-position:center!important}

/* ---- hero ---- */
.hero{position:relative;border-radius:26px;overflow:hidden;background:var(--hatch)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,18,.15) 0%,rgba(20,22,18,.72) 68%,rgba(20,22,18,.86) 100%)}
.hero-inner{position:relative}

/* grids */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px}
.wraprow{display:flex;flex-wrap:wrap;gap:8px}

/* footer */
.site-footer{margin-top:56px;background:var(--ink);color:var(--paper)}
.footer-apps{max-width:var(--maxw);margin:0 auto;padding:40px 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;border-bottom:1px solid #ffffff20}
.footer-apps-eyebrow{font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:#e7bd99;margin:0 0 12px}
.footer-apps-copy h2{font-size:28px;line-height:1.15;letter-spacing:-.035em;margin:0 0 12px;color:#fffaf5}
.footer-apps-copy>p:last-child{font-size:14px;line-height:1.65;color:#d1c8bd;max-width:390px;margin:0}
.footer-app-platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.app-platform{padding:19px 18px 16px;border:1px solid #ffffff30;border-radius:18px;background:#ffffff06;min-width:0}
.app-platform-name{display:flex;align-items:center;gap:12px}
.app-platform-name img{width:28px;height:28px;flex:none;filter:invert(1)}
.app-platform-name span{display:block;font-size:10px;line-height:1.5;color:#d1c8bd;margin-bottom:2px}
.app-platform-name strong{display:block;font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.025em;white-space:nowrap;color:#fffaf5}
.app-platform-status{display:inline-block;margin-top:18px;padding:5px 9px;border-radius:6px;background:#463123;color:#f1d5b8;font:500 10px/1.3 'Schibsted Grotesk',sans-serif}
@media(max-width:820px){.footer-apps{grid-template-columns:1fr;gap:24px}.footer-app-platforms{max-width:440px}}
@media(max-width:560px){.footer-apps{padding:30px 20px}.footer-apps-copy h2{font-size:26px}.app-platform{padding:16px 12px}.app-platform-name{gap:9px}.app-platform-name strong{font-size:17px}.app-platform-name img{width:24px;height:24px}}
@media(max-width:380px){.footer-app-platforms{grid-template-columns:1fr}.app-platform{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px}.app-platform-status{margin-top:0}}
.footer-in{max-width:var(--maxw);margin:0 auto;padding:48px 20px 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-in .brand-name{color:var(--paper)}
.footer-col h4{font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,241,.5);margin:0 0 16px}
.footer-col a{display:block;font:400 14px/1 'Schibsted Grotesk',sans-serif;color:rgba(247,245,241,.75);padding:7px 0}
.footer-col a:hover{color:#fff}
.footer-sub{max-width:var(--maxw);margin:0 auto;padding:20px;border-top:1px solid rgba(247,245,241,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px/1.5 'Schibsted Grotesk',sans-serif;color:rgba(247,245,241,.5)}
.footer-newsletter input{width:100%;background:rgba(247,245,241,.08);border:1px solid rgba(247,245,241,.14);border-radius:var(--r-pill);padding:14px 18px;color:#fff;font:400 14px/1 'Schibsted Grotesk',sans-serif;margin-top:10px}
.footer-newsletter input::placeholder{color:rgba(247,245,241,.4)}

/* sliders (native range styled) */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:99px;background:var(--soft);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:99px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.22);cursor:pointer;border:none}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:99px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.22);cursor:pointer;border:none}
.range-fill{position:relative;height:7px;border-radius:99px;background:var(--soft)}
.range-fill>span{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--olive)}
.dual-range input[type=range]{pointer-events:none}
.dual-range input[type=range]::-webkit-slider-thumb{pointer-events:auto}
.dual-range input[type=range]::-moz-range-thumb{pointer-events:auto}
.visually-hidden-field{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;margin:-1px;padding:0;border:0;white-space:nowrap}

/* selectable option cards */
.opt{border:1.5px solid var(--line-2);border-radius:18px;padding:20px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff}
.opt:hover{border-color:rgba(25,27,23,.28)}
.opt.sel{border-color:var(--olive);background:var(--olive-tint)}
.opt .check{width:22px;height:22px;color:var(--olive);flex:none;opacity:0;transition:.15s}
.opt.sel .check{opacity:1}
.opt h4{font:700 17px/1.2 'Schibsted Grotesk',sans-serif;letter-spacing:-.02em;margin:0}
.opt p{margin:4px 0 0;font:400 14px/1.5 'Schibsted Grotesk',sans-serif;color:var(--ink-2)}

/* segmented */
.seg{display:flex;gap:8px}
.seg button{flex:1;text-align:center;padding:15px 0;border-radius:12px;background:var(--soft);border:none;cursor:pointer;font:500 13.5px/1 'Schibsted Grotesk',sans-serif;color:var(--ink);transition:.15s}
.seg button.active{background:var(--olive);color:#fff}

/* sticky mobile cta */
.sticky-cta{position:sticky;bottom:0;z-index:40;padding:12px 0 20px;background:linear-gradient(180deg,rgba(247,245,241,0),rgba(247,245,241,.96) 40%)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:14px 22px;border-radius:var(--r-pill);font:600 14px/1 'Schibsted Grotesk',sans-serif;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:300}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* custom dropdown */
.dropdown{position:relative;flex:1}
.dropdown .selbox{width:100%;display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line-2);border-radius:14px;padding:14px 18px;font:600 15px/1 'Schibsted Grotesk',sans-serif;background:#fff;cursor:pointer;color:var(--ink)}
.dropdown.open .selbox{border-color:var(--olive)}
.dropdown .selbox .chehv{transition:.2s}
.dropdown.open .selbox .chehv{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:50;display:none;max-height:240px;overflow:auto}
.dropdown.open .dd-menu{display:block}
.dd-menu button{display:block;width:100%;text-align:left;padding:12px 14px;border:none;background:none;border-radius:10px;font:500 14.5px/1 'Schibsted Grotesk',sans-serif;color:var(--ink);cursor:pointer}
.dd-menu button:hover{background:var(--soft)}

/* modal + galería */
.modal{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-scrim{position:absolute;inset:0;background:rgba(20,22,18,.55);backdrop-filter:blur(3px)}
.modal-box{position:relative;background:var(--paper);border-radius:22px;padding:22px;max-width:760px;width:100%;max-height:86vh;overflow:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font:700 16px/1 'Schibsted Grotesk',sans-serif}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gal-tile{height:140px;border-radius:14px;background:var(--hatch)}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr 1fr}}

/* lista de etapas (guía) */
.stage{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px solid transparent;border-radius:16px;padding:18px 20px;cursor:pointer;transition:.15s;font-family:'Schibsted Grotesk',sans-serif}
.stage:hover{border-color:var(--line-2)}
.stage.active{border-color:var(--olive);background:var(--olive-tint)}
.stage .n{font:800 14px/1 'Schibsted Grotesk',sans-serif;color:var(--olive)}
.stage .t{font:700 16px/1.25 'Schibsted Grotesk',sans-serif;flex:1}
.stage i{width:18px;height:18px;color:rgba(25,27,23,.4)}

/* wizard flows use their own top bar */
body[data-page="empezar"] .site-header,
body[data-page="asistente"] .site-header{display:none}

/* helpers */
.center{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt30{margin-top:30px}
.disc{background:var(--soft-2);border-radius:18px;padding:18px 20px;font:400 13px/1.6 'Schibsted Grotesk',sans-serif;color:var(--ink-2)}

/* ============ responsive ============ */
@media (max-width:900px){
  .footer-in{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:820px){
  .nav-links{display:none}
  .nav .nav-cta{display:none}
  .nav-burger{display:flex}
  .g4{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr}
  .hide-mobile{display:none!important}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .section{padding:34px 0 6px}
  .g2.keep{grid-template-columns:1fr 1fr}
  .g4,.g2:not(.keep){grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
  .row.stack-sm{flex-direction:column}
  .card,.card-dark,.card-olive{padding:20px}
}

/* Logo original del manual de marca, en vector. */
.brand{flex:none}
.brand-logo{display:block;width:116px;height:auto;flex:none}
.footer-col a.brand{display:inline-flex;padding:0}
.footer-in .brand-logo{width:140px}
.mnav-panel a.brand{padding:0}
@media(max-width:820px){.brand-logo{width:104px}.nav{padding-top:10px;padding-bottom:10px}}
@media(max-width:360px){.brand-logo{width:96px}}