/* ============================================================
   REFORMA SIN CAOS — Página de ventas
   Sistema visual: Dossier de marca ArquiSEJOS v6 (Junio 2026)
   Amarillo Chaleco #FFC700 · Negro Grafito #111111
   Gris Hormigón #E5E5E5 · Rojo Imprevisto #EC2424
   Archivo Black (display) · Courier Prime (metadatos) · DM Sans (cuerpo)
   ============================================================ */
:root{
  --amarillo:#FFC700;
  --negro:#111111;
  --hormigon:#E5E5E5;
  --rojo:#EC2424;
  --blanco:#F5F5F5;
  --display:'Archivo Black',sans-serif;
  --mono:'Courier Prime',monospace;
  --sans:'DM Sans',system-ui,sans-serif;
  --max:1080px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
.site-header,.site-footer,.nav-primary,.wp-block-template-part{display:none!important;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--blanco);color:var(--negro);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em;}
a{text-decoration:none;color:inherit;}
strong{font-weight:700;}
.tacha{color:var(--rojo);text-decoration:line-through;text-decoration-thickness:4px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.6rem;}

/* ── ETIQUETAS Y METADATOS ── */
.meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;}
.tag{display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--negro);color:var(--amarillo);padding:.25rem .6rem;}
.tag-amarillo{background:var(--amarillo);color:var(--negro);}
.tag-rojo{background:var(--rojo);color:#fff;}

/* ── BOTONES ── */
.btn{display:inline-block;font-family:var(--display);font-size:.9rem;text-transform:uppercase;letter-spacing:.02em;padding:1rem 1.8rem;background:var(--negro);color:var(--amarillo)!important;border:3px solid var(--negro);box-shadow:6px 6px 0 rgba(17,17,17,.25);transition:transform .12s ease,box-shadow .12s ease;}
.btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(17,17,17,.3);color:var(--amarillo)!important;}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(17,17,17,.3);color:var(--amarillo)!important;}
.btn-amarillo{background:var(--amarillo);color:var(--negro)!important;border-color:var(--negro);box-shadow:6px 6px 0 var(--negro);}
.btn-amarillo:hover{color:var(--negro)!important;box-shadow:9px 9px 0 var(--negro);}
.btn-amarillo:active{color:var(--negro)!important;box-shadow:2px 2px 0 var(--negro);}
.btn-sub{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.9rem;opacity:.65;}

/* ── HEADER ── */
.hdr{position:sticky;top:0;z-index:2000;background:#111111!important;border-bottom:3px solid #FFC700!important;}
.hdr-in{max-width:var(--max);margin:0 auto;height:56px!important;padding:0 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.logo{font-family:'Archivo Black',sans-serif!important;font-size:1.1rem!important;color:#FFC700!important;text-decoration:none!important;line-height:1!important;flex-shrink:0!important;cursor:default!important;}
.logo span{display:block!important;font-family:'Courier Prime',monospace!important;font-size:.48rem!important;color:rgba(255,255,255,.3)!important;letter-spacing:.14em!important;text-transform:uppercase!important;margin-top:3px!important;font-weight:400!important;}
.hdr nav{display:flex;align-items:center;gap:1.6rem;}
.hdr nav a{font-family:'Courier Prime',monospace!important;font-size:.68rem!important;font-weight:700!important;color:rgba(255,255,255,.8)!important;text-transform:uppercase!important;letter-spacing:.06em!important;text-decoration:none!important;border-bottom:2px solid transparent!important;padding-bottom:2px!important;transition:color .2s,border-color .2s!important;}
.hdr nav a:hover{color:#FFC700!important;border-bottom-color:#FFC700!important;text-decoration:none!important;}
.hdr nav a.nav-cta{background:#FFC700!important;color:#111111!important;padding:.55rem .9rem!important;border:none!important;font-family:'Archivo Black',sans-serif!important;font-weight:400!important;font-size:.72rem!important;text-transform:uppercase!important;letter-spacing:.02em!important;box-shadow:none!important;transition:background-color .2s,color .2s!important;}
.hdr nav a.nav-cta:hover{background:#ffffff!important;color:#111111!important;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:3px;background:#FFC700!important;margin:4px 0;transition:.25s;}
@media(max-width:880px){
  .nav-toggle{display:block!important;}
  .hdr nav{position:fixed!important;top:0!important;right:-100%!important;height:100vh!important;width:270px!important;background:#111111!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;padding:60px 36px!important;transition:.35s ease!important;border-left:3px solid #FFC700!important;}
  .hdr nav.is-active{right:0!important;}
  .hdr nav a{font-size:.95rem!important;padding:14px 0!important;width:100%!important;border-bottom:1px solid rgba(255,255,255,.12)!important;}
  .hdr nav a.nav-cta{background:none!important;color:#FFC700!important;padding:14px 0!important;}
}

/* ── HERO ── */
.hero{background:var(--amarillo);border-bottom:3px solid var(--negro);padding:80px 0 70px;}
.hero .meta-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-bottom:2.6rem;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--negro);}
.hero h1{font-size:clamp(2rem,5.4vw,3.6rem);max-width:860px;margin-bottom:1.8rem;}
.hero h1 .rojo{color:var(--rojo);}
.hero-story{font-size:1.02rem;font-weight:400;max-width:600px;margin-bottom:.7rem;}
.hero-punch{font-family:var(--sans)!important;font-size:1.05rem!important;font-weight:900!important;color:var(--negro)!important;text-transform:uppercase!important;letter-spacing:0.04em!important;margin:1.6rem 0 2.2rem;max-width:600px;}
.hero-line{height:3px;background:var(--negro);max-width:120px;margin:2rem 0;}

/* ── BANDA NEGRA (verdad) ── */
.banda{background:var(--negro)!important;color:#fff!important;padding:56px 0!important;}
.banda p{font-family:var(--display)!important;font-size:clamp(1.1rem,2.6vw,1.6rem)!important;line-height:1.4!important;max-width:860px!important;color:#ffffff!important;}
.banda .hl{color:var(--amarillo)!important;}
.banda .meta{color:rgba(255,255,255,.45)!important;display:block!important;margin-bottom:1.2rem!important;}

/* ── SECCIONES ── */
.sec{padding:80px 0;}
.sec-hormigon{background:var(--hormigon);border-top:3px solid var(--negro);border-bottom:3px solid var(--negro);}
.sec-head{margin-bottom:.6rem;}
.sec h2{font-size:clamp(1.6rem,3.6vw,2.4rem);max-width:780px;margin:1rem 0 1.2rem;border-left:none!important;padding-left:0!important;}
.sec-intro{max-width:620px;font-size:.98rem;font-weight:400;}

/* ── FICHAS DE INCIDENCIA ── */
.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:3rem;}
@media(max-width:920px){.fichas{grid-template-columns:1fr;max-width:560px;}}
.ficha{background:#fff;border:3px solid var(--negro);box-shadow:8px 8px 0 var(--negro);display:flex;flex-direction:column;}
.ficha-head{background:var(--hormigon);border-bottom:3px solid var(--negro);padding:.55rem .9rem;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.ficha-body{padding:1.1rem 1.1rem 1.3rem!important;display:flex!important;flex-direction:column!important;gap:0.7rem!important;flex:1!important;}
.ficha-quote{font-family:var(--display)!important;font-size:1.05rem!important;line-height:1.3!important;font-weight:900!important;color:var(--negro)!important;}
.ficha-row .tag{margin-bottom:.4rem;}
.ficha-row p{font-size:.85rem;line-height:1.7;}
.ficha-row .coste{color:var(--rojo);font-weight:700;}
.sello{align-self:flex-end;margin-top:auto;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--rojo);border:2px dashed var(--rojo);padding:.35rem .7rem;transform:rotate(-4deg);text-transform:uppercase;}

/* ── MIRADAS ── */
.miradas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:3rem;}
@media(max-width:920px){.miradas-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.miradas-grid{grid-template-columns:repeat(2,1fr);}}
.mirada{background:#fff;border:3px solid var(--negro);padding:1.1rem 1rem;transition:transform .12s ease,box-shadow .12s ease;box-shadow:5px 5px 0 var(--negro);}
.mirada:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--negro);}
.mirada .m-num{font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--negro);background:var(--amarillo);display:inline-block;padding:.1rem .4rem;margin-bottom:.6rem;}
.mirada .m-tit{display:block;font-family:var(--display);font-size:.82rem;line-height:1.3;text-transform:uppercase;}

/* ── QUÉ INCLUYE ── */
.incluye-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;margin-top:3rem;}
@media(max-width:860px){.incluye-grid{grid-template-columns:1fr;}}
.incluye-card{background:#fff;border:3px solid var(--negro);box-shadow:8px 8px 0 var(--negro);padding:1.8rem 1.6rem;}
.incluye-card .num{font-family:var(--mono);font-size:.7rem;font-weight:700;background:var(--negro);color:var(--amarillo);display:inline-block;padding:.15rem .5rem;margin-bottom:1rem;}
.incluye-card h3{font-size:1.08rem;margin-bottom:.7rem;}
.incluye-card p{font-size:.88rem;line-height:1.75;}

/* ── CÓMO FUNCIONA ── */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:3rem;counter-reset:paso;}
@media(max-width:860px){.pasos{grid-template-columns:1fr;max-width:520px;}}
.paso{background:#fff;border:3px solid var(--negro);padding:1.6rem 1.4rem;position:relative;}
.paso::before{counter-increment:paso;content:"0" counter(paso);position:absolute;top:-1.1rem;left:1.1rem;font-family:var(--display);font-size:1rem;background:var(--amarillo);border:3px solid var(--negro);padding:.15rem .6rem;}
.paso h3{font-size:.95rem;margin:.8rem 0 .6rem;}
.paso p{font-size:.85rem;line-height:1.7;}

/* ── PARA QUIÉN ── */
.quien-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;margin-top:3rem;}
@media(max-width:860px){.quien-grid{grid-template-columns:1fr;}}
.quien-col{background:#fff;border:3px solid var(--negro);padding:1.8rem 1.6rem;}
.quien-col.si{box-shadow:8px 8px 0 var(--amarillo);}
.quien-col.no{box-shadow:8px 8px 0 var(--hormigon);}
.quien-col h3{font-size:1rem;margin-bottom:1.2rem;}
.quien-col.no h3 span{color:var(--rojo);}
.quien-col ul{list-style:none;}
.quien-col li{font-size:.88rem;padding:.55rem 0 .55rem 1.8rem;position:relative;line-height:1.65;border-bottom:1px solid var(--hormigon);}
.quien-col li:last-child{border-bottom:none;}
.quien-col.si li::before{content:'→';font-family:var(--mono);font-weight:700;position:absolute;left:0;}
.quien-col.no li::before{content:'✕';font-family:var(--mono);font-weight:700;color:var(--rojo);position:absolute;left:0;}

/* ── PRECIO ── */
.precio-box{max-width:560px;margin:3rem auto 0;background:var(--amarillo);border:3px solid var(--negro);box-shadow:10px 10px 0 var(--negro);padding:2.8rem 2.4rem;text-align:center;}
.precio-box .meta{display:block;margin-bottom:1rem;}
.precio-num{font-family:var(--display);font-size:4.6rem;line-height:1;}
.precio-num sup{font-size:1.8rem;}
.precio-tipo{font-family:var(--mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:.7rem 0 1.8rem;}
.precio-lista{list-style:none;text-align:left;max-width:400px;margin:0 auto 2.2rem;background:#fff;border:3px solid var(--negro);padding:1.2rem 1.4rem;}
.precio-lista li{font-size:.86rem;padding:.42rem 0 .42rem 1.7rem;position:relative;border-bottom:1px solid var(--hormigon);}
.precio-lista li:last-child{border-bottom:none;}
.precio-lista li::before{content:'→';font-family:var(--mono);font-weight:700;position:absolute;left:0;}

/* ── FAQ ── */
.faq{max-width:760px;margin:3rem auto 0;}
.faq details{background:#fff;border:3px solid var(--negro);margin-bottom:1rem;}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 1.3rem;font-family:var(--display);font-size:.92rem;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--mono);font-weight:700;font-size:1.3rem;position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);}
.faq details[open]{box-shadow:6px 6px 0 var(--amarillo);}
.faq details[open] summary::after{content:'–';}
.faq .faq-a{padding:0 1.3rem 1.3rem;font-size:.88rem;line-height:1.8;max-width:640px;}

/* ── CIERRE ── */
.cierre{background:var(--negro)!important;color:#fff!important;text-align:center!important;padding:100px 0!important;border-top:3px solid var(--negro)!important;}
.cierre h2{font-family:var(--display)!important;font-size:clamp(1.6rem,3.6vw,2.4rem)!important;max-width:760px!important;margin:0 auto 1.4rem!important;color:#ffffff!important;border-left:none!important;padding-left:0!important;line-height:1.2!important;}
.cierre h2 .hl{color:var(--amarillo)!important;}
.cierre p{max-width:540px!important;margin:0 auto 2.4rem!important;color:rgba(255,255,255,.75)!important;font-size:.95rem!important;line-height:1.7!important;}
.cierre .btn-sub{color:rgba(255,255,255,.5)!important;opacity:1!important;}

/* ── FOOTER ── */
.ftr{background:var(--negro);color:#fff;border-top:1px solid rgba(255,255,255,.15);padding:2.2rem 0;}
.ftr-in{max-width:var(--max);margin:0 auto;padding:0 1.6rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.2rem;margin-bottom:1.2rem;}
.ftr-marca{font-family:var(--display);font-size:1rem;letter-spacing:.1em;}
.ftr-marca .am{color:var(--amarillo);}
.ftr-sub{display:block;font-family:var(--mono);font-size:.58rem;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;margin-top:4px;}
.ftr-links{display:flex;gap:1.4rem;flex-wrap:wrap;}
.ftr-links a{font-family:var(--mono);font-size:.62rem;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;transition:color .2s;}
.ftr-links a:hover{color:var(--amarillo);}
.ftr-copy{max-width:var(--max);margin:0 auto;padding:0 1.6rem;font-family:var(--mono);font-size:.6rem;color:rgba(255,255,255,.25);letter-spacing:.05em;}
