/* =========================================================
   CONTENT GROWING — "Taller de renovación web"
   Papel + tinta + naranja. Bordes y sombras duras, tipografía editorial.
   ========================================================= */
:root{
  --or:#F05A12; --or-d:#D44A06; --or-l:#FFE3D2;
  --ink:#141210; --ink2:#4B4640; --mut:#8A837A;
  --paper:#F4EFE6; --paper2:#EBE4D7; --card:#FFFCF7; --line:#141210;
  --wa:#25D366;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"Unbounded",system-ui,sans-serif; /* etiquetas */
  --receipt:"Space Mono",ui-monospace,monospace; /* texto de las boletas */
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --sh:5px 5px 0 var(--ink);
  --navfont:"Unbounded",system-ui,sans-serif; /* letra del menú: cámbiala aquí */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body,section,header,footer{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{flex-shrink:0}
::selection{background:var(--or);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:.95}

/* botones duros */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:17px;padding:15px 22px;border:2px solid var(--ink);border-radius:10px;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s;white-space:nowrap;background:var(--card)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-or{background:var(--or);color:#fff}
.btn-wa{background:var(--wa);color:#fff}
.btn-ink{background:var(--ink);color:#fff}

/* cabecera de sección numerada */
.shead{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end;border-top:2px solid var(--ink);padding-top:18px;margin-bottom:54px}
.shead .num{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.shead .num b{display:block;font-family:var(--disp);font-size:clamp(60px,9vw,120px);line-height:.8;letter-spacing:-.06em;color:var(--or);-webkit-text-stroke:0}
.shead h2{font-size:clamp(38px,6.4vw,84px)}
.shead p{margin-top:16px;max-width:620px;color:var(--ink2);font-size:18px}
section{padding:110px 0}
@media(max-width:760px){section{padding:76px 0}.shead{grid-template-columns:1fr;gap:6px;margin-bottom:36px}.shead p{font-size:16.5px}}

/* ---------- barra superior ---------- */
.topbar{background:var(--ink);color:#EDE6DA;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;height:34px;align-items:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3DDC84;margin-right:8px;box-shadow:0 0 0 3px rgba(61,220,132,.25);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(61,220,132,0)}}
@media(max-width:620px){.topbar .r{display:none}}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(244,239,230,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid transparent;transition:border-color .2s}
nav.sc{border-color:var(--ink)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.04em}
.logo .mk{width:38px;height:38px;border-radius:9px;background:var(--ink);display:grid;place-items:center;transform:rotate(-6deg);transition:.3s}
.logo:hover .mk{transform:rotate(6deg)}
.logo em{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--or);letter-spacing:-.01em;margin-left:-4px}
.nav-links{display:flex;gap:4px}
.nav-links a{font-family:var(--navfont);font-weight:500;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;padding:9px 12px;border-radius:8px;border:1.5px solid transparent}
.nav-links a:hover{border-color:var(--ink);background:var(--card)}
.nav-r{display:flex;gap:10px;align-items:center}
.nav-r .btn{padding:10px 16px;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.burger{display:none;width:46px;height:46px;border:2px solid var(--ink);border-radius:10px;place-items:center;background:var(--card);box-shadow:3px 3px 0 var(--ink)}
.mnav{display:none}
@media(max-width:1060px){
  .nav-links,.nav-r .login{display:none}.burger{display:grid}
  .mnav{display:block;position:fixed;top:108px;left:12px;right:12px;background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:var(--sh);padding:8px 18px;z-index:45;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s}
  .mnav.on{transform:none;opacity:1;pointer-events:auto}
  .mnav a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1.5px dashed #CFC6B6;font-family:var(--disp);font-weight:700;font-size:20px}
  .mnav a:last-child{border:0}
  .mnav a span{font-family:var(--mono);font-size:12px;color:var(--mut);font-weight:400}
}
@media(max-width:440px){.nav-r .btn-or{display:none}}

/* ---------- HERO ---------- */
.hero{padding:56px 0 90px;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.08fr 1fr;gap:60px;align-items:center}
.hero .kicker{display:inline-flex;gap:10px;align-items:center;border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px 7px 8px;background:var(--card)}
.hero .kicker span{background:var(--or);color:#fff;border-radius:999px;padding:3px 9px}
.hero h1{font-size:clamp(52px,8.4vw,112px);margin:26px 0 24px;letter-spacing:-.05em}
.hero h1 .strike{position:relative;display:inline-block;color:var(--mut)}
.hero h1 .strike:after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.11em;background:var(--or);transform:rotate(-4deg) scaleX(0);transform-origin:left;animation:strike .7s .5s cubic-bezier(.7,0,.3,1) forwards;border-radius:9px}
@keyframes strike{to{transform:rotate(-4deg) scaleX(1)}}
.hero h1 .serif{font-size:1.06em;color:var(--or);letter-spacing:-.02em}
.lead{font-size:20px;color:var(--ink2);max-width:540px}
.lead b{color:var(--ink)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 30px}
.facts{display:flex;gap:0;border:2px solid var(--ink);border-radius:12px;background:var(--card);max-width:560px;overflow:hidden}
.facts div{flex:1;padding:12px 14px;border-right:2px solid var(--ink)}
.facts div:last-child{border:0}
.facts b{display:block;font-family:var(--disp);font-size:24px;letter-spacing:-.04em;line-height:1.05}
.facts small{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
@media(max-width:980px){.hero{padding:34px 0 70px}.hero .wrap{grid-template-columns:1fr;gap:56px}.lead{font-size:18px}}
@media(max-width:480px){.hero-ctas .btn{width:100%}.facts b{font-size:19px}.facts div{padding:10px}}

/* sello giratorio */
.seal{position:absolute;width:132px;height:132px;right:-28px;top:-48px;z-index:6;filter:drop-shadow(4px 4px 0 var(--ink))}
.seal svg.ring{width:100%;height:100%;animation:spin 18s linear infinite}
.seal .core{position:absolute;inset:26px;border-radius:50%;background:var(--or);border:2px solid var(--ink);display:grid;place-items:center;text-align:center;color:#fff;font-family:var(--disp);font-weight:800;line-height:.9}
.seal .core small{display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em}
.seal .core b{font-size:30px;letter-spacing:-.05em}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.seal{width:104px;height:104px;right:-6px;top:-54px}.seal .core{inset:20px}.seal .core b{font-size:23px}}

/* cinta de obra */
.tape{position:absolute;left:-30px;top:-40px;z-index:5;background:repeating-linear-gradient(-45deg,var(--or) 0 16px,var(--ink) 16px 32px);padding:4px 0;transform:rotate(-4deg);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.tape span{display:block;background:var(--paper);font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.12em;padding:5px 16px;text-transform:uppercase}
@media(max-width:600px){.tape{left:-6px;top:-30px}.tape span{font-size:10px;padding:4px 10px}}

/* ---------- Ventana de navegador + comparador ---------- */
.stage{position:relative}
.frame{background:#fff;border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--ink)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--paper2);border-bottom:2px solid var(--ink)}
.frame-bar i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card)}
.frame-bar i:first-child{background:var(--or)}
.frame-bar .url{flex:1;margin-left:8px;background:var(--card);border:1.5px solid var(--ink);border-radius:6px;font-family:var(--mono);font-size:11px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp{position:relative;aspect-ratio:16/11;overflow:hidden}
.cmp .layer{position:absolute;inset:0}
.cmp .after{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1)}
.cmp.show-after .after{clip-path:inset(0 0 0 0)}
.cmp .scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--or);box-shadow:0 0 0 1px rgba(240,90,18,.3),0 0 22px 6px rgba(240,90,18,.55);z-index:4;opacity:0;pointer-events:none}
.cmp .scan.down{animation:scanD 1.15s cubic-bezier(.77,0,.18,1) forwards}
.cmp .scan.up{animation:scanU 1.15s cubic-bezier(.77,0,.18,1) forwards}
@keyframes scanD{0%{top:0;opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
@keyframes scanU{0%{top:100%;opacity:1}92%{opacity:1}100%{top:0;opacity:0}}
.fstate{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);white-space:nowrap;transition:background .4s,color .4s}.fstate.on{background:var(--or);color:#fff}.cmp .state{position:absolute;top:10px;right:10px;z-index:5;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);color:var(--ink);transition:background .4s,color .4s}
.cmp.show-after .state{background:var(--or);color:#fff}
@media(max-width:600px){.fstate{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);white-space:nowrap;transition:background .4s,color .4s}.fstate.on{background:var(--or);color:#fff}.cmp .state{font-size:8.5px;padding:3px 6px;top:6px;right:6px}}
.switch{display:flex;gap:0;margin-top:22px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:4px 4px 0 var(--ink);width:max-content}
.switch button{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;display:flex;align-items:center;gap:8px;transition:background .25s,color .25s}
.switch button+button{border-left:2px solid var(--ink)}
.switch button.on{background:var(--ink);color:#fff}
.switch button.on.a{background:var(--or)}
.switch button i{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.switch button.on i{background:currentColor}

/* =========== MINI-WEBS (escalan con el recuadro: 1cqw = 1% del ancho) =========== */
.cmp{container-type:inline-size}
@keyframes floaty{50%{translate:0 -.9cqw}}
.m{position:absolute;inset:0;overflow:hidden;line-height:1.25}
.m *{box-sizing:border-box}
.ph{background:linear-gradient(135deg,#9a8f84,#c9bfb3 50%,#7d7268);position:relative}
.ph:after{content:"imagen.jpg";position:absolute;right:4px;bottom:3px;font:1.3cqw Arial,sans-serif;color:rgba(255,255,255,.7)}

/* ----- ANTES 1: pollería ----- */
.b-pollo{background:#fff;font-family:Arial,Helvetica,sans-serif;color:#333}
.b-pollo .hd{background:#C8102E;display:flex;align-items:center;justify-content:space-between;padding:1.6cqw 3cqw;border-bottom:.8cqw solid #FFD200}
.b-pollo .lg{font-family:"Brush Script MT","Segoe Script",cursive;font-size:5cqw;color:#FFD200;text-shadow:.3cqw .3cqw 0 #6b0000;line-height:1}
.b-pollo .mn{display:flex;gap:2cqw;font-size:1.7cqw;color:#fff;font-weight:bold;text-transform:uppercase}
.b-pollo .ban{height:33cqw;background:linear-gradient(160deg,#7a3b10,#c47a2c 45%,#5a2a08);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.b-pollo .ban b{font-size:5.4cqw;color:#FFD200;text-shadow:.35cqw .35cqw 0 #000;font-family:Impact,Arial Black,sans-serif;letter-spacing:.1cqw}
.b-pollo .ban span{font-size:2cqw;color:#fff;background:#C8102E;padding:.6cqw 2cqw;margin-top:1cqw;border:.3cqw solid #fff}
.b-pollo .rw{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5cqw;padding:2cqw 3cqw}
.b-pollo .rw>div{border:1px solid #ddd;font-size:1.5cqw;text-align:center;padding-bottom:1cqw}
.b-pollo .rw .ph{height:11cqw;margin-bottom:.8cqw}
.b-pollo .fb{position:absolute;right:2cqw;bottom:2cqw;width:22cqw;background:#fff;border:1px solid #bbb;font-size:1.3cqw;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.b-pollo .fb b{display:block;background:#3b5998;color:#fff;padding:.6cqw}
.b-pollo .pop{position:absolute;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center}
.b-pollo .pop div{width:44cqw;background:#FFD200;border:.6cqw solid #C8102E;text-align:center;padding:2.4cqw;font-family:Impact,Arial Black,sans-serif;color:#C8102E;font-size:4cqw;position:relative;line-height:1.1}
.b-pollo .pop small{display:block;font:bold 1.6cqw Arial;color:#333;margin-top:1cqw}
.b-pollo .pop i{position:absolute;top:-2.2cqw;right:-2.2cqw;width:4cqw;height:4cqw;border-radius:50%;background:#fff;border:1px solid #999;font:bold 2.2cqw Arial;color:#333;display:grid;place-items:center;font-style:normal}

/* ----- DESPUÉS 1: pollería ----- */
.a-pollo{background:#17110D;color:#F6EBDD;font-family:var(--body)}
.a-pollo .nv{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4cqw;font-size:1.7cqw}
.a-pollo .nv b{font-family:var(--disp);font-weight:800;font-size:2.8cqw;letter-spacing:-.1cqw}
.a-pollo .nv b em{font-family:var(--serif);font-weight:400;color:#FF7A2F}
.a-pollo .nv span{opacity:.6;display:flex;gap:2.4cqw}
.a-pollo .wa{background:#25D366;color:#fff;padding:1cqw 2cqw;border-radius:9cqw;font-weight:700;opacity:1!important}
.a-pollo .hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;padding:0 4cqw;gap:2cqw}
.a-pollo h5{font-family:var(--disp);font-weight:800;font-size:8.4cqw;line-height:.86;letter-spacing:-.45cqw;text-transform:uppercase}
.a-pollo h5 em{display:block;font-family:var(--serif);font-weight:400;text-transform:none;color:#FF7A2F;letter-spacing:-.1cqw;font-size:.92em}
.a-pollo p{font-size:1.8cqw;opacity:.7;margin:2cqw 0;max-width:36cqw}
.a-pollo .ct{display:inline-flex;gap:1cqw;align-items:center;background:#FF7A2F;color:#17110D;font-weight:800;font-size:1.8cqw;padding:1.4cqw 2.4cqw;border-radius:1cqw}
.a-pollo .plate{width:36cqw;justify-self:center;margin-top:-4cqw;position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#2a1d15 0 56%,#3b2a1f 57% 62%,#2a1d15 63%);box-shadow:0 0 0 .4cqw #3b2a1f,0 4cqw 8cqw rgba(0,0,0,.6)}
.a-pollo .ck{position:absolute;inset:22%;border-radius:46% 54% 50% 50%;background:radial-gradient(circle at 35% 30%,#f2b25a,#c4621e 45%,#7b2f0b 80%);box-shadow:inset -1cqw -1.4cqw 2cqw rgba(0,0,0,.35);animation:floaty 5s ease-in-out infinite}
.a-pollo .fr{position:absolute;width:3cqw;height:11cqw;border-radius:1cqw;background:linear-gradient(#ffd77a,#e9a83a);transform:rotate(var(--r));left:var(--x);top:var(--y)}
.a-pollo .tag{position:absolute;right:-1cqw;top:6%;background:#F6EBDD;color:#17110D;border-radius:50%;width:15cqw;height:15cqw;display:grid;place-items:center;text-align:center;font-family:var(--disp);font-weight:800;font-size:3.2cqw;line-height:.9;transform:rotate(12deg)}
.a-pollo .tag small{display:block;font:600 1.2cqw var(--mono)}
.a-pollo .bar{position:absolute;left:4cqw;right:4cqw;bottom:3cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.a-pollo .bar div{border:1px solid rgba(246,235,221,.18);border-radius:1.4cqw;padding:1.4cqw 1.8cqw;font-size:1.5cqw;display:flex;justify-content:space-between}
.a-pollo .bar b{color:#FF7A2F}

/* ----- ANTES 2: sanguchería ----- */
.b-sang{background:#f4f4f4;font-family:Verdana,Arial,sans-serif;color:#222}
.b-sang .hd{background:#111;text-align:center;padding:1.8cqw}
.b-sang .lg{display:inline-block;background:#F5C400;color:#111;font:bold 3.6cqw "Comic Sans MS","Comic Sans",cursive;padding:.6cqw 3cqw;border-radius:50%;border:.4cqw solid #fff}
.b-sang .mn{background:#F5C400;display:flex;justify-content:center;gap:3cqw;font-size:1.6cqw;padding:1cqw;font-weight:bold}
.b-sang .car{height:26cqw;margin:2cqw 3cqw;position:relative}
.b-sang .car:before{content:"‹";position:absolute;left:1cqw;top:40%;color:#fff;font-size:5cqw;z-index:1}
.b-sang .car:after{content:"Foto_local_2019.jpg"}
.b-sang h6{font:bold 2.6cqw "Comic Sans MS",cursive;text-align:center;color:#c00;margin:1cqw 0}
.b-sang .ca{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqw;padding:0 3cqw}
.b-sang .ca>div{background:#fff;border:1px solid #ccc;font-size:1.3cqw;text-align:center;padding-bottom:.8cqw}
.b-sang .ca .ph{height:9cqw;margin-bottom:.6cqw}
.b-sang .ft{position:absolute;left:0;right:0;bottom:0;background:#111;color:#999;font-size:1.2cqw;padding:1.2cqw 3cqw;display:flex;justify-content:space-between;align-items:center}
.b-sang .ft span:last-child{border:1px solid #999;padding:.4cqw 1cqw}

/* ----- DESPUÉS 2: sanguchería ----- */
.a-sang{background:#FFD23F;color:#161210;font-family:var(--body)}
.a-sang .nv{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4cqw;font-size:1.7cqw;font-weight:600}
.a-sang .nv b{font-family:var(--disp);font-weight:800;font-size:2.8cqw;letter-spacing:-.15cqw}
.a-sang .nv i{font-style:normal;background:#161210;color:#FFD23F;padding:1cqw 2cqw;border-radius:9cqw}
.a-sang h5{position:absolute;left:4cqw;top:10cqw;font-family:var(--disp);font-weight:800;font-size:9.6cqw;line-height:.82;letter-spacing:-.6cqw;text-transform:uppercase;z-index:2}
.a-sang h5 em{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.2cqw;color:#C2410C}
.a-sang .sw{position:absolute;right:4cqw;top:14cqw;width:40cqw;z-index:1;transform:rotate(-8deg);animation:floaty 5s ease-in-out infinite}
.a-sang .sw i{display:block;border-radius:2cqw;margin-top:-1cqw;border:.35cqw solid #161210}
.a-sang .b1{height:8cqw;background:radial-gradient(circle at 30% 30%,#f4c27a,#c67a2c);border-radius:20cqw 20cqw 2cqw 2cqw!important}
.a-sang .b2{height:3.4cqw;background:#7FB23F}
.a-sang .b3{height:6cqw;background:repeating-linear-gradient(90deg,#a0451c 0 3cqw,#c96a2a 3cqw 6cqw)}
.a-sang .b4{height:3cqw;background:#F08A3C}
.a-sang .b5{height:3cqw;background:repeating-linear-gradient(90deg,#fff 0 2cqw,#a3195b 2cqw 3.4cqw)}
.a-sang .b6{height:6cqw;background:radial-gradient(circle at 30% 70%,#f4c27a,#c67a2c);border-radius:2cqw 2cqw 6cqw 6cqw!important}
.a-sang .st{position:absolute;right:6cqw;top:8cqw;z-index:3;width:13cqw;height:13cqw;border-radius:50%;background:#161210;color:#FFD23F;display:grid;place-items:center;text-align:center;font:800 2.6cqw/0.9 var(--disp);transform:rotate(-14deg)}
.a-sang .st small{display:block;font:600 1.1cqw var(--mono)}
.a-sang .row{position:absolute;left:4cqw;right:4cqw;bottom:3cqw;display:flex;gap:1.4cqw;align-items:center;z-index:2}
.a-sang .row span{border:.3cqw solid #161210;border-radius:9cqw;padding:1cqw 2cqw;font-size:1.6cqw;font-weight:700;background:#FFF3C4}
.a-sang .row b{margin-left:auto;background:#161210;color:#fff;padding:1.4cqw 2.6cqw;border-radius:9cqw;font-size:1.8cqw}

/* ----- ANTES 3: estudio de abogados ----- */
.b-law{background:#fff;font-family:"Times New Roman",Times,serif;color:#333}
.b-law .hd{background:#14284B;display:flex;justify-content:space-between;align-items:center;padding:2cqw 3cqw;border-bottom:.5cqw solid #B8973E}
.b-law .lg{color:#fff;font-size:2.6cqw;letter-spacing:.2cqw}
.b-law .lg small{display:block;color:#B8973E;font-size:1.4cqw;font-style:italic}
.b-law .mn{display:flex;gap:1.8cqw;color:#ddd;font-size:1.5cqw}
.b-law .ph{height:22cqw;background:linear-gradient(120deg,#5b5146,#a89a86 50%,#4a4036)}
.b-law .ph:after{content:"stock_mazo_justicia.jpg"}
.b-law .bd{display:grid;grid-template-columns:1fr 30%;gap:2.4cqw;padding:2.4cqw 3cqw}
.b-law h6{font-size:2.4cqw;color:#14284B;margin-bottom:1cqw;border-bottom:1px solid #B8973E;padding-bottom:.6cqw}
.b-law p{font-size:1.45cqw;text-align:justify;line-height:1.45}
.b-law .sd{background:#f1f1f1;border:1px solid #ddd;padding:1.4cqw;font-size:1.4cqw}
.b-law .sd b{display:block;color:#14284B;margin-bottom:.6cqw}
.b-law .sd u{display:block;color:#1a0dab;margin:.3cqw 0}

/* ----- DESPUÉS 3: estudio de abogados ----- */
.a-law{background:#F3EEE6;color:#151515;font-family:var(--body)}
.a-law .nv{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4cqw;font-size:1.6cqw;border-bottom:1px solid rgba(0,0,0,.15)}
.a-law .nv b{font-family:var(--serif);font-weight:400;font-size:3cqw;letter-spacing:-.05cqw}
.a-law .nv span{display:flex;gap:2.4cqw;opacity:.7}
.a-law .grid{display:grid;grid-template-columns:1.35fr 1fr;height:calc(100% - 8cqw)}
.a-law .l{padding:4cqw;display:flex;flex-direction:column;justify-content:space-between}
.a-law .k{font:600 1.3cqw var(--mono);letter-spacing:.2cqw;text-transform:uppercase;color:#8A6D3B}
.a-law h5{font-family:var(--serif);font-weight:400;font-size:7.4cqw;line-height:.95;letter-spacing:-.25cqw;margin:1.4cqw 0}
.a-law h5 em{color:#8A6D3B}
.a-law .ct{display:inline-flex;align-items:center;gap:1.4cqw;font-size:1.7cqw;font-weight:600}
.a-law .ct b{background:#151515;color:#F3EEE6;padding:1.4cqw 2.4cqw;border-radius:.6cqw}
.a-law .ar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(0,0,0,.2);margin-top:2cqw}
.a-law .ar div{padding:1.4cqw 1.4cqw 0 0;font-size:1.45cqw}
.a-law .ar i{display:block;font:normal 1.2cqw var(--mono);color:#8A6D3B}
.a-law .r{background:#151515;position:relative;overflow:hidden}
.a-law .r:before{content:"";position:absolute;inset:12% 18% 0;border-radius:40% 40% 0 0;background:linear-gradient(#3a3a3a,#262626);box-shadow:0 -6cqw 0 -1cqw #2e2e2e}
.a-law .r:after{content:"";position:absolute;left:34%;right:34%;top:7%;aspect-ratio:1;border-radius:50%;background:#3a3a3a}
.a-law .q{position:absolute;left:2.4cqw;right:2.4cqw;bottom:2.4cqw;z-index:1;background:#F3EEE6;padding:1.6cqw;font-size:1.4cqw;border-radius:.6cqw}
.a-law .q b{display:block;font-family:var(--serif);font-weight:400;font-size:3.4cqw;line-height:1}

/* ----- ANTES 4: inmobiliaria ----- */
.b-inm{background:#fff;font-family:Arial,Helvetica,sans-serif;color:#444}
.b-inm .tp{background:#2E7D32;color:#fff;font-size:1.3cqw;padding:.8cqw 3cqw;display:flex;justify-content:space-between}
.b-inm .hd{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 3cqw;border-bottom:1px solid #eee}
.b-inm .lg{font-weight:bold;font-size:2.6cqw;color:#2E7D32}
.b-inm .lg span{color:#999;font-weight:normal}
.b-inm .mn{display:flex;gap:1.8cqw;font-size:1.4cqw;text-transform:uppercase}
.b-inm .sl{height:22cqw;background:linear-gradient(#9ec5e8,#d8ebf7 60%,#b0b0a0 61%);position:relative}
.b-inm .sl i{position:absolute;bottom:0;background:#c9c3b6;border:1px solid #a9a395;background-image:repeating-linear-gradient(0deg,transparent 0 2cqw,#8fb4cc 2cqw 3cqw)}
.b-inm .sl b{position:absolute;left:3cqw;top:3cqw;background:rgba(0,0,0,.5);color:#fff;font-size:2.4cqw;padding:1cqw 1.6cqw}
.b-inm .se{display:flex;gap:1cqw;margin:-3cqw 3cqw 0;position:relative;background:#eee;border:1px solid #ccc;padding:1.4cqw}
.b-inm .se span{flex:1;background:#fff;border:1px solid #bbb;font-size:1.3cqw;padding:.8cqw;color:#777}
.b-inm .se span:after{content:" ▾";float:right}
.b-inm .se b{background:#2E7D32;color:#fff;font-size:1.3cqw;padding:.8cqw 2cqw}
.b-inm .gr{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:2cqw 3cqw}
.b-inm .gr>div{border:1px solid #ddd;font-size:1.3cqw;padding-bottom:1cqw}
.b-inm .gr .ph{height:9cqw;margin-bottom:.8cqw}
.b-inm .gr p{padding:0 1cqw}
.b-inm .gr u{display:inline-block;margin:.6cqw 1cqw 0;background:#2E7D32;color:#fff;text-decoration:none;padding:.4cqw 1cqw}

/* ----- DESPUÉS 4: inmobiliaria ----- */
.a-inm{background:#0E1A1F;color:#fff;font-family:var(--body)}
.a-inm .sky{position:absolute;inset:0;background:linear-gradient(180deg,#F7A35C 0%,#E86A4A 28%,#5B3B6E 58%,#0E1A1F 85%)}
.a-inm .bl{position:absolute;bottom:0;background:linear-gradient(180deg,#22343C,#0E1A1F);border-top-left-radius:.6cqw;border-top-right-radius:.6cqw;background-image:repeating-linear-gradient(180deg,transparent 0 2.2cqw,rgba(255,214,150,.55) 2.2cqw 2.8cqw),linear-gradient(180deg,#22343C,#0E1A1F);background-size:100% 100%}
.a-inm .nv{position:relative;display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4cqw;font-size:1.6cqw}
.a-inm .nv b{font-family:var(--disp);font-weight:800;font-size:2.8cqw;letter-spacing:-.15cqw}
.a-inm .nv i{font-style:normal;background:#fff;color:#0E1A1F;padding:1cqw 2cqw;border-radius:9cqw;font-weight:700}
.a-inm h5{position:relative;font-family:var(--disp);font-weight:800;font-size:7.6cqw;line-height:.9;letter-spacing:-.4cqw;padding:0 4cqw;max-width:62cqw}
.a-inm h5 em{font-family:var(--serif);font-weight:400;letter-spacing:-.1cqw}
.a-inm .srch{position:relative;margin:2.4cqw 4cqw 0;display:flex;align-items:center;gap:0;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);border-radius:9cqw;padding:.8cqw;width:max-content;font-size:1.5cqw}
.a-inm .srch span{padding:.8cqw 2cqw;border-right:1px solid rgba(255,255,255,.25)}
.a-inm .srch b{background:#F7A35C;color:#0E1A1F;border-radius:9cqw;padding:1cqw 2.2cqw;margin-left:.8cqw}
.a-inm .cards{position:absolute;right:4cqw;bottom:3.4cqw;display:flex;gap:1.6cqw}
.a-inm .cd{width:20cqw;background:rgba(255,255,255,.95);color:#0E1A1F;border-radius:1.6cqw;padding:1cqw;font-size:1.3cqw;animation:floaty 5s ease-in-out infinite}
.a-inm .cd+.cd{animation-delay:1.2s}
.a-inm .cd .im{height:8cqw;border-radius:1cqw;background:linear-gradient(160deg,#F7A35C,#5B3B6E);margin-bottom:1cqw;position:relative}
.a-inm .cd .im:after{content:"Entrega 2027";position:absolute;left:.8cqw;top:.8cqw;background:#fff;font:600 1cqw var(--mono);padding:.3cqw .7cqw;border-radius:9cqw}
.a-inm .cd b{display:block;font-family:var(--disp);font-size:2cqw;letter-spacing:-.08cqw}
.a-inm .cd small{color:#6b7a80}

/* ---------- marquee ---------- */
.marq{background:var(--ink);color:var(--paper);border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1.2deg);margin:0 -20px;position:relative;z-index:2}
.marq .track{display:inline-flex;animation:marq 38s linear infinite}
.marq span{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.03em;padding:0 22px;display:inline-flex;align-items:center;gap:44px}
.marq span:after{content:"✺";color:var(--or);font-size:.8em}
.marq span:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 01 diagnóstico ---------- */
.diag{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.diag .intro p{font-size:19px;color:var(--ink2);margin:18px 0 30px;max-width:460px}
.sheet{background:var(--card);border:2px solid var(--ink);border-radius:6px;box-shadow:10px 10px 0 var(--ink);position:relative;transform:rotate(.8deg)}
.sheet-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding:14px 20px;gap:10px;flex-wrap:wrap}
.sheet-head b{font-family:var(--disp);font-size:20px;letter-spacing:-.03em}
.row{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:15px 20px;border-bottom:1.5px dashed #CFC6B6}
.row:last-of-type{border-bottom:0}
.row .n{font-family:var(--mono);font-size:12px;color:var(--mut)}
.row h4{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1.15}
.row p{font-size:14.5px;color:var(--ink2);margin-top:2px}
.fail{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.08em;color:#C62C1A;border:1.5px solid #C62C1A;border-radius:4px;padding:3px 7px;transform:rotate(-3deg);white-space:nowrap}
.stamp{position:absolute;right:22px;bottom:-30px;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--or);border:3px double var(--or);border-radius:8px;padding:8px 14px;background:var(--card);transform:rotate(-8deg);text-transform:uppercase;line-height:1.3;text-align:center}
@media(max-width:900px){.diag{grid-template-columns:1fr;gap:34px}.sheet{transform:none}.row{grid-template-columns:28px 1fr;}.row .fail{grid-column:2;justify-self:start;margin-top:4px}}

/* ---------- 02 antes / después ---------- */
#trabajos{background:var(--paper2);border-block:2px solid var(--ink)}
.work{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start}
.idx{display:grid;gap:0;border-top:2px solid var(--ink)}
.idx button{display:grid;grid-template-columns:44px 1fr auto;align-items:center;text-align:left;padding:18px 4px;border-bottom:2px solid var(--ink);font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.03em;transition:padding .25s,color .25s}
.idx button small{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--mut)}
.idx button:after{content:"→";opacity:0;transform:translateX(-8px);transition:.25s;color:var(--or)}
.idx button:hover{padding-left:12px}
.idx button.on{color:var(--or)}
.idx button.on:after{opacity:1;transform:none}
.case{display:none}
.case.on{display:block;animation:rise .45s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.case-foot{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start;margin-top:28px}
.case-info h3{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
.case-info p{color:var(--ink2)}
.case-info ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.case-info li{font-family:var(--mono);font-size:12px;letter-spacing:.03em;border:1.5px solid var(--ink);border-radius:999px;padding:6px 12px;background:var(--card)}
.note{font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:34px;letter-spacing:.02em}
@media(max-width:980px){.work{grid-template-columns:1fr;gap:26px}.idx{grid-template-columns:repeat(2,1fr);border-top:0;gap:8px}.idx button{border:2px solid var(--ink);border-radius:10px;padding:12px;font-size:16px;grid-template-columns:30px 1fr;background:var(--card)}.idx button:after{display:none}.idx button.on{background:var(--ink);color:#fff}.idx button.on small{color:#bbb}.idx button:hover{padding-left:12px}.case-foot{grid-template-columns:1fr;gap:18px}}

/* ---------- 03 precios como boletas ---------- */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.ticket{position:relative;background:var(--card);border:2px solid var(--ink);border-bottom:0;padding:26px 24px 30px;font-family:var(--mono);font-size:13.5px;filter:drop-shadow(7px 7px 0 var(--ink))}
.ticket:after{content:"";position:absolute;left:-2px;right:-2px;bottom:-14px;height:16px;background:linear-gradient(-45deg,transparent 8px,var(--card) 0) 0 0/16px 16px repeat-x,linear-gradient(45deg,transparent 8px,var(--card) 0) 0 0/16px 16px repeat-x}
.ticket.pop{transform:translateY(-14px) rotate(-1deg);background:#FFF6EE}
.ticket.pop:after{background:linear-gradient(-45deg,transparent 8px,#FFF6EE 0) 0 0/16px 16px repeat-x,linear-gradient(45deg,transparent 8px,#FFF6EE 0) 0 0/16px 16px repeat-x}
.t-top{text-align:center;border-bottom:1.5px dashed var(--ink);padding-bottom:14px;margin-bottom:14px}
.t-top small{display:block;color:var(--mut);font-size:11px;letter-spacing:.08em}
.t-top h3{font-family:var(--disp);font-size:30px;letter-spacing:-.04em;margin:6px 0 4px;line-height:1}
.t-top p{font-family:var(--body);font-size:14.5px;color:var(--ink2);line-height:1.4}
.t-line{display:flex;justify-content:space-between;gap:8px;padding:4px 0}
.t-line span:first-child{flex:1;display:flex;gap:6px}
.t-line span:first-child:after{content:"";flex:1;border-bottom:1.5px dotted #B5AC9D;transform:translateY(-5px)}
.t-sec{margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--ink)}
.t-sec>b{display:block;font-size:11px;letter-spacing:.1em;margin-bottom:6px}
.t-inc{list-style:none;display:grid;gap:5px;font-size:13px}
.t-inc li:before{content:"+ ";color:var(--or);font-weight:600}
.t-no{font-size:12px;color:var(--mut);line-height:1.5}
.total{display:flex;justify-content:space-between;align-items:flex-end;margin-top:16px;padding-top:14px;border-top:2px solid var(--ink)}
.total small{font-size:11px;letter-spacing:.1em}
.total b{font-family:var(--disp);font-size:58px;letter-spacing:-.06em;line-height:.85}
.total b sup{font-size:20px;letter-spacing:0;vertical-align:top;margin-right:3px}
.ticket .btn{width:100%;margin-top:22px;font-size:16px}
.ticket .tag-pop{position:absolute;top:-18px;right:16px;background:var(--or);color:#fff;font-weight:600;font-size:11.5px;letter-spacing:.08em;padding:6px 10px;border:2px solid var(--ink);transform:rotate(4deg);text-transform:uppercase}
.barcode{height:30px;margin-top:20px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);opacity:.85}
.extras{margin-top:60px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start}
.ext-list{border:2px solid var(--ink);border-radius:12px;background:var(--card);overflow:hidden}
.ext-list div{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1.5px dashed #CFC6B6;font-size:16px}
.ext-list div:last-child{border:0}
.ext-list b{font-family:var(--mono);font-size:14px;white-space:nowrap}
.pay{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.pay .mono{width:100%;margin-bottom:4px;color:var(--ink2)}
.plogo{height:46px;min-width:76px;padding:6px 12px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.plogo img{max-height:32px;max-width:110px;display:block}
.plogo:has(img) .t{display:none}
.plogo .t{font-family:var(--mono);font-size:12.5px}
.promo{display:flex;justify-content:space-between;align-items:center;margin-top:16px;background:var(--ink);color:#fff;padding:8px 10px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.promo b{background:var(--or);padding:2px 7px;font-size:13px}
.save{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--or);border:1.5px dashed var(--or);padding:3px 8px}
.bf{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:20px 24px;margin:-20px 0 54px;box-shadow:6px 6px 0 var(--or)}
.bf b{display:block;font-family:var(--disp);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;margin-top:4px}
.bf .mono{color:#FF8A4C}
.clock{display:flex;gap:8px}
.clock span{background:var(--paper);color:var(--ink);border-radius:8px;min-width:62px;padding:8px 6px;text-align:center;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.clock b{display:block;font-family:var(--disp);font-size:28px;letter-spacing:-.04em;margin:0;line-height:1}
@media(max-width:600px){.bf{padding:16px}.clock span{min-width:0;flex:1}.clock b{font-size:22px}}
.seal .core b{font-size:25px!important}
.chip{font-family:var(--mono);font-size:12.5px;border:1.5px solid var(--ink);border-radius:6px;padding:7px 11px;background:var(--card)}
@media(max-width:980px){.tickets{grid-template-columns:1fr;max-width:440px;margin:0 auto;gap:44px}.ticket.pop{transform:none;order:-1}.extras{grid-template-columns:1fr}}

/* ---------- 04 por qué tan barato ---------- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-.02em}
.quote b{font-family:var(--disp);font-style:normal;font-weight:800;letter-spacing:-.04em;color:var(--or)}
.reasons{display:grid;gap:0;border-top:2px solid var(--ink)}
.reasons>div{display:grid;grid-template-columns:60px 1fr;gap:14px;padding:20px 0;border-bottom:2px solid var(--ink)}
.reasons i{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--or);padding-top:4px}
.reasons h4{font-size:22px;letter-spacing:-.03em;line-height:1.1;margin-bottom:4px}
.reasons p{color:var(--ink2);font-size:16px}
@media(max-width:900px){.why{grid-template-columns:1fr;gap:34px}}

/* ---------- 05 orden de trabajo (oscuro) ---------- */
.dark{background:var(--ink);color:var(--paper)}
.dark .shead{border-color:var(--paper)}
.dark .shead p{color:#B9B1A4}
.order{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--paper);border-radius:14px;overflow:hidden}
.order div{padding:28px 22px 26px;border-right:2px solid var(--paper);position:relative}
.order div:last-child{border:0}
.order .big{font-family:var(--disp);font-weight:800;font-size:76px;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--paper);display:block;margin-bottom:22px}
.order div:hover .big{color:var(--or);-webkit-text-stroke-color:var(--or)}
.order h3{font-size:24px;letter-spacing:-.03em;margin-bottom:8px;line-height:1.05}
.order p{color:#B9B1A4;font-size:15.5px}
.order .when{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--or);color:#fff;padding:4px 9px;border-radius:4px}
.guar{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border-top:1.5px dashed #5B544B}
.guar div{padding:22px 22px 0 0;display:flex;gap:14px}
.guar svg{color:var(--or)}
.guar h4{font-size:19px;letter-spacing:-.02em;margin-bottom:4px;line-height:1.15}
.guar p{color:#B9B1A4;font-size:15px}
@media(max-width:980px){.order{grid-template-columns:1fr 1fr}.order div:nth-child(2){border-right:0}.order div:nth-child(-n+2){border-bottom:2px solid var(--paper)}.guar{grid-template-columns:1fr}}
@media(max-width:560px){.order{grid-template-columns:1fr}.order div{border-right:0;border-bottom:2px solid var(--paper)}.order div:last-child{border:0}.order .big{font-size:60px}}

/* ---------- 06 panel ---------- */
.panel{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.panel ul{list-style:none;margin:24px 0 32px;border-top:2px solid var(--ink)}
.panel li{padding:14px 0;border-bottom:1.5px dashed #CFC6B6;display:flex;gap:12px;font-size:17px}
.panel li b{font-family:var(--mono);font-size:12px;color:var(--or);padding-top:4px}
.pm{background:var(--card);border:2px solid var(--ink);border-radius:16px;box-shadow:10px 10px 0 var(--ink);padding:18px;transform:rotate(-1deg)}
.pm-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:2px solid var(--ink)}
.pm-head b{font-family:var(--disp);font-size:18px;letter-spacing:-.03em}
.pm-next{background:var(--or);color:#fff;border:2px solid var(--ink);border-radius:12px;padding:16px;margin-bottom:12px}
.pm-next b{display:block;font-family:var(--disp);font-size:21px;letter-spacing:-.03em;margin:4px 0 10px;line-height:1.05}
.pm-next span{display:inline-block;background:var(--card);color:var(--ink);border:2px solid var(--ink);font-weight:700;font-size:13px;padding:6px 11px;border-radius:7px}
.pm-box{border:2px solid var(--ink);border-radius:12px;padding:14px;margin-bottom:12px}
.pm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 0 6px}
.pm-steps i{height:10px;border:1.5px solid var(--ink);border-radius:3px}
.pm-steps i.on{background:var(--ink)}
.pm-steps i.half{background:repeating-linear-gradient(-45deg,var(--or) 0 5px,transparent 5px 9px)}
.pm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-row .pm-box{margin:0}
.pm-v{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.05em;line-height:1}
@media(max-width:900px){.panel{grid-template-columns:1fr;gap:40px}.pm{transform:none}}

/* ---------- equipo ---------- */
.team{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;border:2px solid var(--ink);border-radius:16px;padding:36px;background:var(--card);box-shadow:var(--sh)}
.photo{width:150px;height:180px;border:2px solid var(--ink);border-radius:10px;background:repeating-linear-gradient(45deg,var(--paper2) 0 10px,var(--paper) 10px 20px);display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:11px;color:var(--mut);transform:rotate(-3deg);box-shadow:4px 4px 0 var(--ink)}
.team p.big{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.01em}
.team .sig{margin-top:14px;color:var(--ink2)}
@media(max-width:760px){.team{grid-template-columns:1fr;padding:24px;gap:22px}.photo{width:120px;height:140px}}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--ink)}
details{border-bottom:2px solid var(--ink)}
summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:56px 1fr 40px;gap:10px;align-items:center;padding:22px 0;font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.03em;line-height:1.15}
summary::-webkit-details-marker{display:none}
summary i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--mut)}
summary:after{content:"+";width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:18px;transition:.25s;justify-self:end}
details[open] summary:after{transform:rotate(45deg);background:var(--or);color:#fff}
details p{padding:0 50px 24px 66px;color:var(--ink2);font-size:17px;max-width:880px}
@media(max-width:700px){summary{grid-template-columns:34px 1fr 40px}details p{padding:0 0 22px 44px}}

/* ---------- contacto ---------- */
.contact{background:var(--or);border-block:2px solid var(--ink);padding:100px 0}
.contact .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center}
.contact h2{font-size:clamp(56px,10vw,150px);letter-spacing:-.06em;color:var(--ink);line-height:.85}
.contact h2 .serif{color:#fff}
.contact .sub{font-size:20px;margin:24px 0 30px;max-width:480px}
.contact .lines{display:grid;gap:10px;font-family:var(--mono);font-size:14px}
.contact .lines a{display:flex;gap:12px;align-items:center;border-bottom:1.5px solid var(--ink);padding:10px 0;width:max-content;max-width:100%}
form{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:26px;box-shadow:10px 10px 0 var(--ink);display:grid;gap:14px}
form h3{font-size:26px;letter-spacing:-.04em}
label{display:grid;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
input,select{width:100%;border:2px solid var(--ink);border-radius:9px;background:#fff;padding:12px 13px;font:16px var(--body);color:var(--ink);outline:none;transition:box-shadow .15s}
input:focus,select:focus{box-shadow:4px 4px 0 var(--or)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form small{font-family:var(--mono);font-size:11px;color:var(--mut);text-align:center}
@media(max-width:900px){.contact{padding:70px 0}.contact .wrap{grid-template-columns:1fr}.frow{grid-template-columns:1fr}form{padding:20px}}

/* ---------- footer ---------- */
footer{padding:60px 0 30px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px}
.f-grid h4{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;color:var(--mut)}
.f-grid a{display:block;padding:4px 0;font-weight:500}
.f-grid a:hover{color:var(--or)}
.recl{display:inline-flex!important;gap:8px;align-items:center;border:2px solid var(--ink);border-radius:8px;padding:8px 12px!important;margin-top:14px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;background:var(--card)}
.wordmark{font-family:var(--disp);font-weight:800;font-size:clamp(54px,14.5vw,210px);letter-spacing:-.07em;line-height:.8;white-space:nowrap;border-top:2px solid var(--ink);padding-top:26px}
.wordmark em{font-family:var(--serif);font-weight:400;color:var(--or);letter-spacing:-.03em}
.legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:11.5px;color:var(--mut);letter-spacing:.03em}
@media(max-width:800px){.f-grid{grid-template-columns:1fr 1fr}.f-grid>div:first-child{grid-column:1/-1}}

/* ---------- flotantes ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:62px;height:62px;border-radius:50%;background:var(--wa);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;transition:transform .15s}
.wa-float:hover{transform:translate(-2px,-2px) rotate(-8deg)}
.mbar{display:none}
@media(max-width:700px){
  .wa-float{display:none}
  .mbar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;gap:8px;transform:translateY(140%);transition:transform .3s}
  .mbar.on{transform:none}
  .mbar .btn{flex:1;padding:13px 8px;font-size:15.5px;box-shadow:3px 3px 0 var(--ink)}
  body{padding-bottom:80px}
}

/* aparición al hacer scroll (solo si hay JavaScript) */
.anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.anim .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.anim .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*{animation:none!important}.cmp .after{transition:none}}

/* ---------- Multipágina ---------- */
.nav-links a.here{border-color:var(--ink);background:var(--or);color:#fff}
.mnav a.here{color:var(--or)}
.page-top{padding:56px 0 0}
.crumb{display:flex;gap:10px;align-items:center;margin-bottom:26px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.crumb a{border-bottom:1.5px solid var(--ink)}
.crumb a:hover{color:var(--or);border-color:var(--or)}
.next-page{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:2px solid var(--ink);border-radius:14px;padding:22px 26px;background:var(--card);box-shadow:var(--sh);margin-top:60px}
.next-page b{display:block;font-family:var(--disp);font-size:clamp(24px,3vw,34px);letter-spacing:-.04em;line-height:1}
.dark .next-page{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* Índice en la portada */
.map{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mcard{display:flex;flex-direction:column;gap:10px;min-height:250px;border:2px solid var(--ink);border-radius:14px;padding:20px;background:var(--card);box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.mcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.mcard .n{font-family:var(--disp);font-weight:800;font-size:54px;line-height:.8;letter-spacing:-.06em;color:var(--or)}
.mcard h3{font-size:26px;letter-spacing:-.04em;line-height:1}
.mcard p{color:var(--ink2);font-size:15px;flex:1}
.mcard b{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.mcard.hot{background:var(--or);color:#fff}
.mcard.hot .n{color:var(--ink)}
.mcard.hot p{color:#fff}
@media(max-width:1100px){.map{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.map{grid-template-columns:1fr 1fr}.mcard{min-height:200px;padding:16px}.mcard .n{font-size:42px}.mcard h3{font-size:21px}}
@media(max-width:420px){.map{grid-template-columns:1fr}}

/* ---------- Letra de etiquetas: Unbounded (más ancha, se compensa el tamaño) ---------- */
.mono,.topbar,.crumb,.kicker,.fstate,.switch button,.order .when,.case-info li,.idx button small,.shead .num,.sheet-head .mono,.fail,.stamp,.chip,.plogo .t,.f-grid h4,.legal,.recl,.note,label,form small,summary i,.reasons i,.panel li b,.mcard b,.tape span,.promo,.tag-pop{letter-spacing:.01em!important;font-weight:500}
.topbar{font-size:10.5px}
.kicker{font-size:11px}
.fstate{font-size:9.5px}
.switch button{font-size:11.5px}
.case-info li{font-size:11px}
.note{font-size:10.5px}
.legal{font-size:10.5px}
label{font-size:10.5px}
.tape span{font-size:10px}
.stamp{font-size:11.5px}
.fail{font-size:9.5px}
/* Boletas: tipografía de ticket con más carácter */
.ticket{font-family:var(--receipt)}
.ticket .t-top small,.ticket .t-sec>b,.ticket .total small,.ticket .promo,.ticket .tag-pop{font-family:var(--mono)}
/* ---------- Fotos reales en los ejemplos (Magnific / Freepik) ---------- */
.m img{display:block}
/* Pollería: el plato es la foto, recortada en círculo */
.a-pollo .nv{position:relative;z-index:3}
.a-pollo .plate{width:33cqw;margin-top:2cqw;border-radius:50%;background:none;box-shadow:0 0 0 .5cqw #3b2a1f,0 0 0 1cqw #17110D,0 4cqw 8cqw rgba(0,0,0,.6)}
.a-pollo .plate img{width:100%;height:100%;object-fit:cover;object-position:40% 72%;border-radius:50%;animation:floaty 6s ease-in-out infinite}
.a-pollo .plate{overflow:visible}
.a-pollo .plate .tag{z-index:2}
/* Sanguchería: foto tipo afiche con borde negro */
.a-sang .sw{width:44cqw;right:3.5cqw;top:13cqw;transform:rotate(-5deg)}
.a-sang .sw img{width:100%;aspect-ratio:3/2;object-fit:cover;border:.45cqw solid #161210;border-radius:2cqw;box-shadow:1.2cqw 1.2cqw 0 #161210}
/* Abogados: foto en blanco y negro */
.a-law .r:before,.a-law .r:after{display:none}
.a-law .r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.05)}
/* Inmobiliaria después: atardecer real con degradado para leer el texto */
.a-inm .sky{background:linear-gradient(90deg,rgba(14,26,31,.88) 0%,rgba(14,26,31,.55) 45%,rgba(14,26,31,.1) 75%),linear-gradient(0deg,rgba(14,26,31,.7),transparent 40%),url(img/ejemplos/inm-fondo.jpg) 60% 50%/cover}
.a-inm .cd .im{background-size:cover;background-position:center}
/* Inmobiliaria antes: foto de baja calidad, lavada y pixelada */
.b-inm .sl{background:url(img/ejemplos/inm-antes.jpg) center/cover;filter:saturate(.55) contrast(.85) brightness(1.08);image-rendering:pixelated}
/* ---------- Logo oficial: cuadro negro, clic blanco y ondas naranjas ---------- */
.logo .mk{background:#141210;overflow:hidden;transform:none;border-radius:10px}
.logo:hover .mk{transform:scale(1.06)}
.logo .mk img{width:100%;height:100%;display:block}
footer .logo{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.04em}
/* ----- ANTES 5: peluquería (rosado, cursiva, brillos) ----- */
.b-pelu{background:#FCE4F1 radial-gradient(circle at 20% 30%,#fff 0 .3cqw,transparent .4cqw) 0 0/6cqw 6cqw;font-family:Georgia,"Times New Roman",serif;color:#5a2a48}
.b-pelu .hd{background:linear-gradient(90deg,#C2185B,#E91E63,#BA68C8);display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 3cqw;border-bottom:.5cqw solid #F8BBD0}
.b-pelu .lg{font-family:"Brush Script MT","Segoe Script",cursive;font-size:4.2cqw;color:#fff;text-shadow:.25cqw .25cqw 0 #880E4F;line-height:1}
.b-pelu .lg small{display:block;font:italic 1.3cqw Georgia,serif;text-shadow:none;color:#FCE4F1}
.b-pelu .mn{display:flex;gap:1.6cqw;font:bold 1.4cqw Arial,sans-serif;color:#fff}
.b-pelu .mq{background:#FFEB3B;color:#C2185B;font:bold 1.6cqw Arial,sans-serif;padding:.7cqw 3cqw;white-space:nowrap;overflow:hidden;border-bottom:1px solid #f0c000}
.b-pelu .bd{display:grid;grid-template-columns:30cqw 1fr;gap:2.4cqw;padding:2.6cqw 3cqw}
.b-pelu .ft{height:24cqw;border:.6cqw solid #fff;box-shadow:0 0 0 1px #E91E63;background:url(img/ejemplos/pelu-antes.jpg) center/cover;filter:saturate(.6) brightness(1.15) contrast(.8);image-rendering:pixelated}
.b-pelu h6{font:italic bold 2.6cqw Georgia,serif;color:#C2185B;margin-bottom:.8cqw}
.b-pelu p{font-size:1.45cqw;line-height:1.35}
.b-pelu ul{list-style:none;margin:1cqw 0;font-size:1.5cqw;columns:2}
.b-pelu .tx b{display:inline-block;background:#E91E63;color:#fff;font:bold 1.4cqw Arial,sans-serif;padding:.8cqw 1.6cqw;border:.25cqw outset #F48FB1}
.b-pelu .vs{position:absolute;left:3cqw;bottom:2cqw;font:1.2cqw Arial,sans-serif;color:#7a4a68}
.b-pelu .vs span{background:#000;color:#0f0;font-family:"Courier New",monospace;padding:.2cqw .6cqw;letter-spacing:.2cqw}

/* ----- DESPUÉS 5: peluquería (estudio elegante) ----- */
.a-pelu{background:#120F0D;color:#F5EEE6;font-family:var(--body)}
.a-pelu .ph2{position:absolute;inset:0;background:linear-gradient(90deg,#120F0D 0%,rgba(18,15,13,.92) 34%,rgba(18,15,13,.25) 66%,rgba(18,15,13,.05)),linear-gradient(0deg,rgba(18,15,13,.85),transparent 45%),url(img/ejemplos/pelu-fondo.jpg) 70% 30%/cover}
.a-pelu .nv{position:relative;display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 4cqw;font-size:1.6cqw}
.a-pelu .nv b{font-family:var(--disp);font-weight:800;font-size:2.8cqw;letter-spacing:-.12cqw}
.a-pelu .nv b em{font-family:var(--serif);font-weight:400;color:#E9B48A}
.a-pelu .nv span{display:flex;gap:2.4cqw;opacity:.65;margin-left:auto;margin-right:2.4cqw}
.a-pelu .nv i{font-style:normal;border:1px solid rgba(245,238,230,.5);padding:1cqw 2cqw;border-radius:9cqw;font-weight:600}
.a-pelu .tx{position:relative;padding:3cqw 4cqw 0;max-width:56cqw}
.a-pelu .k{font:500 1.3cqw var(--mono);letter-spacing:.2cqw;text-transform:uppercase;color:#E9B48A}
.a-pelu h5{font-family:var(--disp);font-weight:800;font-size:7.4cqw;line-height:.9;letter-spacing:-.38cqw;margin:1.4cqw 0 2.4cqw}
.a-pelu h5 em{font-family:var(--serif);font-weight:400;letter-spacing:-.1cqw;color:#E9B48A}
.a-pelu .ct{display:inline-block;background:#F5EEE6;color:#120F0D;font-weight:800;font-size:1.7cqw;padding:1.4cqw 2.4cqw;border-radius:9cqw}
.a-pelu .sv{position:absolute;left:4cqw;bottom:3cqw;display:flex;gap:1.4cqw}
.a-pelu .sv div{background:rgba(18,15,13,.55);backdrop-filter:blur(8px);border:1px solid rgba(245,238,230,.18);border-radius:1.4cqw;padding:1.2cqw 1.8cqw;font-size:1.4cqw;display:grid;gap:.3cqw}
.a-pelu .sv b{font-family:var(--disp);font-size:2cqw;color:#E9B48A}
.a-pelu .nx{position:absolute;right:4cqw;bottom:3cqw;background:#F5EEE6;color:#120F0D;border-radius:1.6cqw;padding:1.4cqw 2cqw;display:grid;gap:.3cqw;animation:floaty 5s ease-in-out infinite}
.a-pelu .nx small{font:600 1.05cqw var(--mono);letter-spacing:.1cqw;color:#8a6a52}
.a-pelu .nx b{font-family:var(--disp);font-size:2.2cqw}