/* [zonia] · alcances — hoja compartida */
:root{
  --azul:#1A3FB5;
  --azul-tenue:#EAEEF9;
  --tinta:#0E0E10;
  --papel:#FFFFFF;
  --papel-2:#F6F8FC;
  --linea:#E1E6F0;
  --linea-fuerte:#C7CFDF;
  --gris:#63697A;
  --gris-claro:#8B92A3;
  --rojo:#A8281E;
  --verde:#1F6F4A;
  --ambar:#8A6A12;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--mono); font-weight:400; font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:600; letter-spacing:-.03em; line-height:1.06; margin:0}
p{margin:0 0 1em}
a{color:var(--azul); text-decoration:none}
em{font-style:italic}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px}
@media(max-width:700px){ .wrap{padding:0 20px} }

/* ---------- barra ---------- */
.bar{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--linea);
}
.bar-in{max-width:var(--max); margin:0 auto; padding:0 32px; height:60px; display:flex; align-items:center; gap:22px}
.mark{font-weight:700; letter-spacing:-.06em; font-size:17px; color:var(--tinta); white-space:nowrap}
.mark b{color:var(--azul); font-weight:700}
.bar nav{display:flex; gap:18px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{
  font-size:12px; letter-spacing:.02em; color:var(--gris); white-space:nowrap;
  padding:4px 0; border-bottom:1.5px solid transparent; transition:.18s;
}
.bar nav a:hover{color:var(--tinta)}
.bar nav a.on{color:var(--azul); border-bottom-color:var(--azul)}
@media(max-width:820px){ .bar-in{padding:0 20px; gap:14px} .bar nav{gap:14px} }

/* ---------- hero ---------- */
.hero{padding:88px 0 56px; border-bottom:1px solid var(--linea)}
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--azul); font-weight:600; margin:0 0 26px;
}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.6rem); max-width:15ch}
.hero h1 em{color:var(--azul)}
.hero .lead{
  margin-top:30px; max-width:64ch; font-size:17px; line-height:1.66; color:var(--gris);
}
.hero .lead strong{color:var(--tinta); font-weight:600}
.cifras{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px;
  border-top:1px solid var(--linea);
}
.cifra{padding:22px 24px 6px; border-right:1px solid var(--linea)}
.cifra:last-child{border-right:0}
.cifra .v{font-size:34px; font-weight:600; letter-spacing:-.04em; line-height:1}
.cifra .k{margin-top:10px; font-size:12px; color:var(--gris); line-height:1.5}
@media(max-width:820px){
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra{border-bottom:1px solid var(--linea)}
  .cifra:nth-child(2n){border-right:0}
}

/* ---------- secciones ---------- */
section{padding:76px 0; border-bottom:1px solid var(--linea)}
.sec-head{display:grid; grid-template-columns:132px 1fr; gap:28px; align-items:start}
@media(max-width:820px){ .sec-head{grid-template-columns:1fr; gap:14px} }
.sec-num{
  font-size:64px; font-weight:600; letter-spacing:-.06em; line-height:.8; color:var(--azul);
  display:flex; align-items:baseline; gap:10px;
}
.sec-num svg{width:26px; height:26px; stroke:var(--azul); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:20ch}
.sec-head h2 em{color:var(--azul)}
.sec-lead{margin-top:18px; max-width:70ch; color:var(--gris); font-size:15.5px}
.sec-lead strong{color:var(--tinta); font-weight:600}
.resuelve{
  margin-top:22px; display:inline-flex; gap:10px; align-items:flex-start;
  background:var(--azul-tenue); border-left:2px solid var(--azul);
  padding:12px 16px; max-width:70ch; font-size:13.5px; line-height:1.55;
}
.resuelve b{font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:11px; color:var(--azul); white-space:nowrap; padding-top:2px}

/* ---------- subconceptos ---------- */
.subs{margin-top:52px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea)}
@media(max-width:860px){ .subs{grid-template-columns:1fr} }
.sub{background:var(--papel); padding:26px 26px 24px; display:flex; flex-direction:column; transition:background .2s}
.sub:hover{background:var(--papel-2)}
.sub .ix{font-size:11px; letter-spacing:.14em; color:var(--azul); font-weight:600; margin-bottom:12px}
.sub h3{font-size:19px; letter-spacing:-.025em; line-height:1.18; margin-bottom:10px}
.sub p{font-size:13.5px; color:var(--gris); line-height:1.6; margin-bottom:16px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.chip{
  font-size:11.5px; letter-spacing:.01em; color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:2px; padding:3px 8px; background:var(--papel);
  line-height:1.45;
}
.chip.g{border-color:#BFD3C4; background:#F2F8F4}
.chip.a{border-color:#E0D2A8; background:#FBF6E8}
.sub.ancho{grid-column:1/-1}

/* ---------- nota ---------- */
.nota{
  margin-top:34px; border:1px solid var(--linea); border-left:2px solid var(--tinta);
  padding:18px 22px; font-size:13.5px; color:var(--gris); line-height:1.62; background:var(--papel-2);
}
.nota b{color:var(--tinta); font-weight:600}
/* ---------- bóveda / ejemplos ---------- */
.anatomia{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:46px}
.anatomia div{background:var(--papel); padding:20px 20px 22px}
.anatomia .n{font-size:11px; letter-spacing:.14em; color:var(--azul); font-weight:600}
.anatomia h4{font-size:15px; margin:10px 0 8px; letter-spacing:-.02em}
.anatomia p{font-size:12.5px; color:var(--gris); margin:0; line-height:1.55}
@media(max-width:860px){ .anatomia{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .anatomia{grid-template-columns:1fr} }

.inv{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-top:0; }
.inv .c{background:var(--papel-2); padding:20px}
.inv .v{font-size:28px; font-weight:600; letter-spacing:-.04em}
.inv .k{font-size:12px; color:var(--gris); margin-top:8px; line-height:1.5}
@media(max-width:860px){ .inv{grid-template-columns:repeat(2,1fr)} }

/* ---------- marca demo de las maquetas ---------- */
:root{ --cafe:#2A1710; --rojo-m:#A8281E; --crema:#FBF7F2; }
.lock{display:inline-flex; align-items:center; gap:7px; font-weight:700; letter-spacing:-.02em}
.lock svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lock span{font-size:14px; line-height:1}
.lock span i{font-style:normal; font-weight:400; opacity:.72}

.piezas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:46px}
@media(max-width:980px){ .piezas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:660px){ .piezas{grid-template-columns:1fr} }
.pieza{border:1px solid var(--linea); background:var(--papel); display:flex; flex-direction:column}
.pieza-h{padding:14px 16px 12px; border-bottom:1px solid var(--linea); display:flex; gap:10px; align-items:baseline}
.pieza-h .id{font-size:11px; font-weight:700; color:var(--papel); background:var(--azul); padding:2px 6px; letter-spacing:.06em}
.pieza-h .t{font-size:14px; font-weight:600; letter-spacing:-.02em; line-height:1.25}
.pieza-m{padding:9px 16px 12px; font-size:11px; color:var(--gris-claro); border-bottom:1px solid var(--linea); line-height:1.65}
.pieza-m b{color:var(--gris); font-weight:500}
.pieza-b{padding:22px 18px; background:var(--papel-2); border-bottom:1px solid var(--linea)}
.pieza-f{padding:14px 16px 16px; font-size:12.5px; color:var(--gris); line-height:1.6}
.pieza-f b{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); margin-bottom:5px; font-weight:600}
.pieza-f .copy{color:var(--tinta); border-left:2px solid var(--linea-fuerte); padding-left:12px; margin:10px 0 0; white-space:pre-line}
.pieza-f .ojo{margin-top:12px; font-size:11.5px; color:var(--ambar); background:#FBF6E8; border:1px solid #EFE3C2; padding:8px 10px; line-height:1.5}

/* ---------- maqueta: reel 9:16 ---------- */
.reel{
  aspect-ratio:9/16; border-radius:18px; padding:16px 15px; overflow:hidden; position:relative;
  color:#fff; display:flex; flex-direction:column;
  background:
    radial-gradient(90% 55% at 30% 8%, rgba(255,196,120,.30), transparent 60%),
    radial-gradient(120% 70% at 80% 100%, rgba(168,40,30,.45), transparent 65%),
    linear-gradient(180deg,#3B2318 0%, #1A0D07 100%);
  box-shadow:0 10px 26px rgba(20,10,6,.24);
}
.reel .fila{display:flex; justify-content:space-between; align-items:center; font-size:9.5px; letter-spacing:.1em; color:rgba(255,255,255,.62); position:relative; z-index:2}
.reel .rec{color:#FF7A66; display:inline-flex; align-items:center; gap:5px}
.reel .rec:before{content:''; width:6px; height:6px; border-radius:50%; background:#FF5A44}
.reel .txt{margin-top:auto; font-size:21px; font-weight:700; letter-spacing:-.035em; line-height:1.12; position:relative; z-index:2; text-wrap:balance}
.reel .cta{
  margin-top:14px; align-self:flex-start; font-size:11px; font-weight:600; background:#fff; color:var(--cafe);
  padding:8px 14px; border-radius:999px; position:relative; z-index:2;
}
.reel .pie{margin-top:16px; display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:2; color:rgba(255,255,255,.92)}
.reel .pie .dur{font-size:9.5px; color:rgba(255,255,255,.5)}
.reel .barra{position:absolute; left:15px; right:15px; bottom:9px; height:2px; background:rgba(255,255,255,.22); border-radius:2px; z-index:2}
.reel .barra:after{content:''; position:absolute; left:0; top:0; bottom:0; width:38%; background:#fff; border-radius:2px}

/* ---------- storyboard ---------- */
.sb{margin-top:16px; border-top:1px solid var(--linea); padding-top:12px}
.sb b{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); margin-bottom:8px; font-weight:600}
.sb ol{margin:0; padding:0; list-style:none; counter-reset:s}
.sb li{counter-increment:s; display:grid; grid-template-columns:18px 50px 1fr; gap:8px; font-size:11.5px; color:var(--gris); padding:5px 0; border-bottom:1px dotted var(--linea); align-items:baseline}
.sb li:last-child{border-bottom:0}
.sb li:before{content:counter(s); color:var(--papel); background:var(--cafe); width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600}
.sb li span{color:var(--gris-claro); font-size:10.5px}
.sb li i{font-style:normal; color:var(--tinta)}

/* ---------- maqueta: impreso (cartel / volante / lona) ---------- */
.impreso{
  background:var(--rojo-m); color:#fff; border-radius:10px; padding:20px 18px 16px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
  box-shadow:0 8px 22px rgba(120,25,18,.20);
}
.impreso.carta{aspect-ratio:8.5/11}
.impreso.media{aspect-ratio:8.5/11}
.impreso .lock{color:#fff; opacity:.95; margin-bottom:14px}
.impreso .k{font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.2}
.impreso .p{font-size:clamp(38px,7.4vw,54px); font-weight:700; letter-spacing:-.05em; line-height:.92; margin:2px 0 12px}
.impreso .lin{width:100%; border-top:1px solid rgba(255,255,255,.22); padding:7px 0; font-size:11.5px; color:rgba(255,255,255,.78); line-height:1.4}
.impreso .qrow{margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:10px; align-self:stretch; text-align:left}
.impreso .qr{
  width:46px; height:46px; flex:0 0 46px; border-radius:3px; background:#fff; padding:3px; display:block;
}
.impreso .qt{font-size:10.5px; color:rgba(255,255,255,.85); line-height:1.4}

/* ---------- maqueta: whatsapp ---------- */
.wa{border-radius:14px; overflow:hidden; box-shadow:0 8px 22px rgba(20,30,25,.14); background:#ECE5DD}
.wa .top{background:#0F6B5C; color:#fff; padding:9px 12px; display:flex; align-items:center; gap:9px}
.wa .top .av{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center}
.wa .top .av svg{width:14px; height:14px; stroke:#fff; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.wa .top .nm{font-size:12px; font-weight:600; line-height:1.2}
.wa .top .st{font-size:9.5px; color:rgba(255,255,255,.7)}
.wa .cuerpo{
  padding:14px 12px 16px; display:flex; flex-direction:column; gap:8px; min-height:330px;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size:14px 14px;
}
.wa .et{align-self:center; background:rgba(255,255,255,.7); border-radius:6px; padding:3px 9px; font-size:9.5px; color:#5C6B62}
.wa .b{background:#fff; border-radius:9px 9px 9px 2px; padding:9px 11px; font-size:11.5px; line-height:1.55; color:#111; box-shadow:0 1px 1px rgba(0,0,0,.07); max-width:92%}
.wa .b.me{background:#DCF8C6; border-radius:9px 9px 2px 9px; align-self:flex-end}
.wa .b .h{font-weight:700; margin-bottom:4px; color:#0F6B5C; font-size:11px}
.wa .b ul{margin:6px 0 0; padding-left:14px}
.wa .b li{margin:1px 0}
.wa .hora{font-size:9px; color:#7f8f83; text-align:right; margin-top:5px}

/* ---------- maqueta: google ---------- */
.gpost{background:#fff; border:1px solid var(--linea-fuerte); border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(10,20,50,.07)}
.gpost .neg{display:flex; gap:9px; align-items:center; padding:12px}
.gpost .av{width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--linea-fuerte); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#4285F4}
.gpost .nm{font-weight:600; font-size:12.5px; line-height:1.3}
.gpost .st{color:var(--gris-claro); font-size:10px; line-height:1.4}
.gpost .estrellas{color:#E8A33D; letter-spacing:1px; font-size:10px}
.gpost .img{
  background:var(--rojo-m); color:#fff; padding:26px 16px 14px; display:flex; flex-direction:column; min-height:150px;
}
.gpost .img .t{font-size:22px; font-weight:700; letter-spacing:-.04em; line-height:1.08; text-transform:uppercase}
.gpost .img .s{font-size:11px; color:rgba(255,255,255,.8); margin-top:8px; line-height:1.45}
.gpost .img .lock{margin-top:auto; padding-top:16px; align-self:flex-end; color:#fff; opacity:.9}
.gpost .attr{display:flex; flex-wrap:wrap; gap:5px; padding:12px}
.gpost .attr span{border:1px solid var(--linea-fuerte); border-radius:12px; padding:2px 8px; font-size:10.5px; color:var(--gris)}
.gpost .attr span.ok{border-color:#9CC7AC; background:#F2F8F4; color:var(--verde)}
.gpost .liga{border-top:1px solid var(--linea); padding:10px 12px; font-size:11.5px; color:#1a73e8; font-weight:600}

/* ---------- maqueta: pizarrón ---------- */
.pizarron{
  aspect-ratio:4/5; border:7px solid #6B4A2B; border-radius:4px; padding:18px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:9px;
  color:#F6F1E4; box-shadow:0 8px 22px rgba(20,15,10,.22);
  background:
    radial-gradient(65% 45% at 30% 20%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(60% 40% at 75% 85%, rgba(255,255,255,.04), transparent 70%),
    #23261F;
}
.pizarron .a{font-size:10px; letter-spacing:.2em; color:rgba(246,241,228,.65)}
.pizarron .b{font-size:21px; font-weight:700; letter-spacing:-.03em; line-height:1.16; text-shadow:0 0 12px rgba(255,255,255,.10)}
.pizarron .r{width:52px; height:2px; background:rgba(246,241,228,.5); border-radius:2px}
.pizarron .c{font-size:11.5px; color:rgba(246,241,228,.78); line-height:1.55}
.pizarron .lock{color:rgba(246,241,228,.85); margin-top:6px}
.dos{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:46px}
.dos > div{background:var(--papel); padding:26px}
@media(max-width:820px){ .dos{grid-template-columns:1fr} }
.dos h4{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); margin-bottom:16px}
.lista{list-style:none; margin:0; padding:0}
.lista li{display:grid; grid-template-columns:16px 1fr; gap:10px; font-size:13.5px; color:var(--gris); padding:7px 0; border-bottom:1px dotted var(--linea); line-height:1.55}
.lista li:last-child{border-bottom:0}
.lista li b{color:var(--tinta); font-weight:600}
.lista svg{width:13px; height:13px; stroke:var(--azul); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-top:5px}
.cierre{padding:76px 0 84px; background:var(--tinta); color:#fff; border:0}
.cierre h2{font-size:clamp(1.8rem,4.4vw,3rem); max-width:22ch; color:#fff}
.cierre h2 em{color:#8FA6F0}
.cierre p{color:rgba(255,255,255,.62); max-width:62ch; margin-top:22px; font-size:15px}
.cierre .fila{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.cierre .fila span{border:1px solid rgba(255,255,255,.28); padding:9px 14px; font-size:12.5px; color:rgba(255,255,255,.86)}
footer{padding:30px 0 46px; font-size:11.5px; color:var(--gris-claro); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ================= navegación de documentos ================= */
.bar-in{gap:18px}
.docs{display:flex; gap:6px; margin-left:auto; align-items:center}
.docs a{
  font-size:11.5px; letter-spacing:.02em; color:var(--gris); white-space:nowrap;
  padding:5px 10px; border:1px solid var(--linea); border-radius:2px; transition:.18s;
}
.docs a:hover{border-color:var(--linea-fuerte); color:var(--tinta)}
.docs a.aqui{background:var(--azul); border-color:var(--azul); color:#fff; font-weight:600}
.bar nav{margin-left:0}
@media(max-width:1080px){ .docs a{padding:4px 7px; font-size:10.5px} }
@media(max-width:760px){ .bar nav{display:none} }

/* ================= mapa de módulos ================= */
.grupo{margin-top:44px; border:1px solid var(--linea)}
.grupo-h{display:flex; gap:14px; align-items:baseline; padding:16px 20px; border-bottom:1px solid var(--linea); background:var(--papel-2); flex-wrap:wrap}
.grupo-h .tag{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:3px 8px; border-radius:2px}
.tag.incl{background:var(--azul); color:#fff}
.tag.aparte{background:#FBF6E8; color:var(--ambar); border:1px solid #EFE3C2}
.tag.socio{background:#F2F8F4; color:var(--verde); border:1px solid #BFD3C4}
.grupo-h h3{font-size:17px; letter-spacing:-.025em}
.grupo-h p{margin:0; font-size:12.5px; color:var(--gris); width:100%; line-height:1.55}
.mod{display:grid; grid-template-columns:60px 1fr 200px; gap:18px; padding:18px 20px; border-bottom:1px solid var(--linea); align-items:start}
.mod:last-child{border-bottom:0}
.mod:hover{background:var(--papel-2)}
.mod .m{font-size:11px; font-weight:600; color:var(--azul); letter-spacing:.1em; padding-top:3px}
.mod h4{font-size:16px; letter-spacing:-.025em; margin-bottom:7px}
.mod p{font-size:13px; color:var(--gris); margin:0; line-height:1.6}
.mod .precio{text-align:right; font-size:14px; font-weight:600; letter-spacing:-.02em; padding-top:2px; line-height:1.4}
.mod .precio small{display:block; font-size:11px; font-weight:400; color:var(--gris-claro); letter-spacing:0; margin-top:4px}
.mod .precio .est{color:var(--ambar)}
.mod .precio .soc{color:var(--verde)}
@media(max-width:820px){
  .mod{grid-template-columns:1fr; gap:8px}
  .mod .precio{text-align:left}
}

/* ================= precios ================= */
.tarifas{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px}
@media(max-width:820px){ .tarifas{grid-template-columns:1fr} }
.tarifa{border:1px solid var(--linea); padding:28px 26px 26px; display:flex; flex-direction:column; background:var(--papel)}
.tarifa.destacada{border:1.5px solid var(--azul); box-shadow:0 10px 30px rgba(26,63,181,.08); position:relative}
.tarifa.destacada:before{
  content:'RECOMENDADO'; position:absolute; top:-9px; left:26px; background:var(--azul); color:#fff;
  font-size:9.5px; letter-spacing:.16em; font-weight:600; padding:3px 9px;
}
.tarifa .n{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); font-weight:600}
.tarifa h3{font-size:21px; margin:12px 0 4px; letter-spacing:-.03em}
.tarifa .p{font-size:46px; font-weight:600; letter-spacing:-.05em; line-height:1; margin:16px 0 4px}
.tarifa .iva{font-size:11.5px; color:var(--gris-claro)}
.tarifa ul{list-style:none; margin:20px 0 0; padding:0}
.tarifa li{display:grid; grid-template-columns:15px 1fr; gap:9px; font-size:13px; color:var(--gris); padding:6px 0; border-top:1px dotted var(--linea); line-height:1.55}
.tarifa li b{color:var(--tinta); font-weight:600}
.tarifa li svg{width:12px; height:12px; stroke:var(--azul); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-top:4px}
.tarifa li.no svg{stroke:var(--gris-claro)}
.tarifa .pie{margin-top:auto; padding-top:20px; font-size:12px; color:var(--gris-claro); line-height:1.55}

.desc{margin-top:22px; border:1px solid var(--linea); background:var(--papel-2); padding:24px 26px}
.desc h3{font-size:18px; letter-spacing:-.03em; margin-bottom:10px}
.desc p{font-size:13.5px; color:var(--gris); max-width:74ch}
.desc table{width:100%; border-collapse:collapse; margin-top:16px; font-size:13px}
.desc th, .desc td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--linea)}
.desc th{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-claro); font-weight:600}
.desc td.num{text-align:right; font-variant-numeric:tabular-nums}
.desc tr.total td{font-weight:600; border-bottom:0; border-top:1.5px solid var(--tinta)}
.desc .ahorro{color:var(--verde); font-weight:600}

/* ================= socios / MADA ================= */
.socio-h{display:grid; grid-template-columns:1fr 300px; gap:34px; align-items:start; margin-top:44px}
@media(max-width:860px){ .socio-h{grid-template-columns:1fr; gap:20px} }
.socio-ficha{border:1px solid var(--linea); padding:22px; background:var(--papel-2)}
.socio-ficha .nm{font-size:19px; font-weight:600; letter-spacing:-.03em}
.socio-ficha .url{font-size:12px; color:var(--azul); margin-top:4px; word-break:break-all}
.socio-ficha dl{margin:16px 0 0; display:grid; grid-template-columns:1fr; gap:0}
.socio-ficha dt{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-claro); margin-top:12px}
.socio-ficha dd{margin:3px 0 0; font-size:13px; color:var(--tinta)}
.proyectos{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:24px}
@media(max-width:760px){ .proyectos{grid-template-columns:1fr} }
.proy{background:var(--papel); padding:22px}
.proy .lugar{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--azul); font-weight:600}
.proy .nm{font-size:20px; font-weight:600; letter-spacing:-.03em; margin:8px 0 2px}
.proy .m2{font-size:26px; font-weight:600; letter-spacing:-.04em; color:var(--tinta)}
.proy .m2 small{font-size:12px; font-weight:400; color:var(--gris-claro)}
.proy .tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:12px}
.proy .tags span{font-size:11px; border:1px solid var(--linea-fuerte); padding:2px 7px; color:var(--gris)}

/* ================= pasos ================= */
.pasos{margin-top:44px; border:1px solid var(--linea)}
.paso{display:grid; grid-template-columns:52px 1fr; gap:18px; padding:20px; border-bottom:1px solid var(--linea)}
.paso:last-child{border-bottom:0}
.paso .n{font-size:26px; font-weight:600; color:var(--azul); letter-spacing:-.04em; line-height:1}
.paso h4{font-size:16px; letter-spacing:-.025em; margin-bottom:6px}
.paso p{font-size:13.5px; color:var(--gris); margin:0; line-height:1.6}

/* ================= liga a documento ================= */
.ligas{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px}
@media(max-width:760px){ .ligas{grid-template-columns:1fr} }
.liga-doc{border:1px solid var(--linea); padding:26px; display:block; color:var(--tinta); transition:.2s}
.liga-doc:hover{border-color:var(--azul); background:var(--papel-2)}
.liga-doc .n{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); font-weight:600}
.liga-doc h3{font-size:20px; margin:10px 0 8px; letter-spacing:-.03em}
.liga-doc p{font-size:13.5px; color:var(--gris); margin:0}
.liga-doc .flecha{margin-top:16px; font-size:13px; color:var(--azul); font-weight:600}
.liga-doc.pendiente{opacity:.62; border-style:dashed; cursor:default}
.liga-doc.pendiente:hover{border-color:var(--linea); background:var(--papel)}

/* ================= letra chica ================= */
.chica{margin-top:34px; font-size:12px; color:var(--gris-claro); line-height:1.7; max-width:88ch}
.chica b{color:var(--gris); font-weight:600}

/* ================= wordmark oficial [zonia] ================= */
/* La "n" de zonia es una "z" rotada -90°. Corchetes en azul de marca. */
.wm{
  display:inline-flex; align-items:baseline; flex-shrink:0; white-space:nowrap;
  font-family:var(--mono); font-weight:700; letter-spacing:-.02em; line-height:1;
  user-select:none; color:var(--tinta); font-size:var(--wm-size, 1.25rem);
}
.wm .br{color:var(--azul); font-weight:700}
.wm .tx{margin:0 .04em}
.wm .zn{display:inline-block; transform:rotate(-90deg); transform-origin:center 55%; margin:0 .02em}
.wm.claro{color:#fff}
.wm.claro .br{color:#6486FF}
a.wm:hover .br{color:var(--tinta)}
a.wm.claro:hover .br{color:#fff}

.ir-sitio{
  font-size:11px; letter-spacing:.04em; color:var(--gris); border:1px solid var(--linea);
  padding:4px 9px; white-space:nowrap; transition:.18s;
}
.ir-sitio:hover{border-color:var(--azul); color:var(--azul)}

/* ================= bloque de marca ================= */
.marca{display:grid; grid-template-columns:1.15fr 1fr; gap:0; border:1px solid var(--linea); margin-top:44px}
@media(max-width:860px){ .marca{grid-template-columns:1fr} }
.marca .izq{padding:34px 32px; border-right:1px solid var(--linea)}
@media(max-width:860px){ .marca .izq{border-right:0; border-bottom:1px solid var(--linea)} }
.marca .der{padding:34px 32px; background:var(--papel-2)}
.marca .logo-grande{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.marca .logo-grande .wm{--wm-size:3.2rem}
.marca .iso{
  width:56px; height:56px; border:1.5px solid var(--azul); display:flex; align-items:center; justify-content:center;
}
.marca .iso .wm{--wm-size:1.5rem}
.marca .pie-logo{margin-top:14px; font-size:11.5px; color:var(--gris-claro); line-height:1.6}
.marca p.q{margin-top:24px; font-size:14px; color:var(--gris); line-height:1.7; max-width:52ch}
.marca p.q strong{color:var(--tinta); font-weight:600}
.marca h4{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); margin-bottom:14px}
.paleta{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.paleta .c{border:1px solid var(--linea)}
.paleta .sw{height:56px}
.paleta .lb{padding:8px 9px; font-size:10px; line-height:1.5; color:var(--gris); background:var(--papel)}
.paleta .lb b{display:block; color:var(--tinta); font-size:11px; font-weight:600; letter-spacing:-.01em}
.tipo{margin-top:26px}
.tipo .muestra{font-size:34px; font-weight:600; letter-spacing:-.04em; line-height:1.1; color:var(--tinta)}
.tipo .muestra em{color:var(--azul)}
.tipo .pesos{margin-top:12px; font-size:12px; color:var(--gris); line-height:1.9}
.tipo .pesos span{margin-right:14px}

/* ================= socio: lockup MADA ================= */
.mada-lockup{display:inline-flex; align-items:center; gap:12px; color:#181F30}
.mada-lockup svg{height:26px; width:auto; display:block}
.mada-lockup .txt{font-size:19px; font-weight:700; letter-spacing:.16em; line-height:1;
  font-family:'Inter', var(--mono); text-transform:uppercase}
.mada-lockup .txt i{font-style:normal; font-weight:400; letter-spacing:.2em; opacity:.75}
.mada-lockup.chico svg{height:18px}
.mada-lockup.chico .txt{font-size:13px}
.junto{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.junto .mas{color:var(--gris-claro); font-size:16px}

/* ================= contacto ================= */
.contacto{background:#0A0D14; color:#fff; padding:76px 0 68px}
.contacto .eyebrow{color:#6486FF}
.contacto h2{font-size:clamp(1.9rem,4.6vw,3.1rem); color:#fff; max-width:20ch; letter-spacing:-.04em}
.contacto h2 em{color:#8FA6F0}
.contacto p{color:rgba(255,255,255,.64); max-width:58ch; margin-top:20px; font-size:15px}
.contacto .acciones{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; align-items:center}
.btn-wa{
  display:inline-flex; align-items:center; gap:11px; background:#25D366; color:#07231A;
  padding:15px 24px; font-size:15px; font-weight:700; letter-spacing:-.01em; transition:.18s;
}
.btn-wa:hover{background:#1FBA59; color:#07231A}
.btn-wa svg{width:20px; height:20px; fill:#07231A}
.btn-linea{
  display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.32);
  color:#fff; padding:15px 22px; font-size:13.5px; transition:.18s;
}
.btn-linea:hover{border-color:#fff; background:rgba(255,255,255,.06); color:#fff}
.contacto .datos{margin-top:34px; display:flex; gap:30px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.55)}
.contacto .datos b{color:#fff; font-weight:600; display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px; color:rgba(255,255,255,.42)}
.contacto .datos a{color:rgba(255,255,255,.86)}
.contacto .marca-pie{margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.contacto .marca-pie .wm{--wm-size:1.5rem}
.contacto .marca-pie .t{font-size:11.5px; color:rgba(255,255,255,.45)}

/* ================= [zonia]+ ================= */
.wm .pl{color:var(--azul); font-weight:700; margin-left:.1em}
.wm.claro .pl{color:#6486FF}
.marca .logo-grande .wm .pl{margin-left:.06em}

/* ================= la oferta de zonia ================= */
.oferta{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:44px}
@media(max-width:900px){ .oferta{grid-template-columns:1fr} }
.of{background:var(--papel); padding:28px 26px; display:flex; flex-direction:column}
.of.aqui{background:var(--azul-tenue); border-top:2px solid var(--azul)}
.of .nivel{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-claro); font-weight:600}
.of .of-wm{margin:14px 0 4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.of .of-wm .wm{--wm-size:1.6rem}
.of .comose{font-size:11px; color:var(--azul); border:1px solid var(--azul); padding:2px 7px; letter-spacing:.02em}
.of h4{font-size:15px; margin:12px 0 8px; letter-spacing:-.025em; line-height:1.3}
.of p{font-size:13px; color:var(--gris); line-height:1.62; margin:0 0 16px}
.of ul{list-style:none; margin:0 0 18px; padding:0}
.of li{display:grid; grid-template-columns:14px 1fr; gap:8px; font-size:12.5px; color:var(--gris); padding:5px 0; line-height:1.5}
.of li svg{width:11px; height:11px; stroke:var(--azul); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:4px}
.of .precio-of{margin-top:auto; padding-top:16px; border-top:1px solid var(--linea); font-size:13.5px; font-weight:600; letter-spacing:-.02em}
.of .precio-of small{display:block; font-weight:400; font-size:11.5px; color:var(--gris-claro); margin-top:4px; letter-spacing:0}
.of a.precio-of:hover{color:var(--azul)}

.hero-wm{display:block; --wm-size:1.7rem; margin-bottom:22px}

/* ================= complemento: página web ================= */
.complemento{margin-top:22px; border:1px solid var(--linea); display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea)}
@media(max-width:760px){ .complemento{grid-template-columns:1fr} }
.complemento .cab{grid-column:1/-1; background:var(--papel); padding:22px 26px 18px}
.complemento .cab h3{font-size:18px; letter-spacing:-.03em; margin-bottom:8px}
.complemento .cab p{margin:0; font-size:13.5px; color:var(--gris); max-width:76ch}
.complemento .op{background:var(--papel); padding:22px 26px 24px}
.complemento .op .n{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); font-weight:600}
.complemento .op .p{font-size:34px; font-weight:600; letter-spacing:-.045em; line-height:1; margin:12px 0 4px}
.complemento .op .iva{font-size:11.5px; color:var(--gris-claro)}
.complemento .op ul{list-style:none; margin:16px 0 0; padding:0}
.complemento .op li{display:grid; grid-template-columns:14px 1fr; gap:8px; font-size:12.5px; color:var(--gris); padding:5px 0; line-height:1.55}
.complemento .op li svg{width:11px; height:11px; stroke:var(--azul); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:4px}
.complemento .aviso{grid-column:1/-1; background:#FBF6E8; border-top:1px solid #EFE3C2; padding:14px 26px; font-size:12.5px; color:var(--ambar); line-height:1.6}
.complemento .aviso b{color:#6B520D}

/* ================= portada de propuesta ================= */
.propuesta{border-bottom:1px solid var(--linea); background:var(--papel-2)}
.propuesta .in{max-width:var(--max); margin:0 auto; padding:22px 32px; display:flex; gap:26px; align-items:center; flex-wrap:wrap}
@media(max-width:700px){ .propuesta .in{padding:18px 20px; gap:16px} }
.propuesta .et{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--azul); font-weight:600; white-space:nowrap}
.propuesta .para{font-size:15px; letter-spacing:-.02em; color:var(--tinta); font-weight:600}
.propuesta .para span{color:var(--gris); font-weight:400}
.propuesta .meta{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
.propuesta .meta div{font-size:11px; color:var(--gris-claro); line-height:1.5}
.propuesta .meta b{display:block; color:var(--tinta); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums}
@media(max-width:700px){ .propuesta .meta{margin-left:0; gap:16px} }

/* ================= premium: por qué no es genérico ================= */
.premium{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:44px}
@media(max-width:900px){ .premium{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .premium{grid-template-columns:1fr} }
.premium .p{background:var(--papel); padding:24px 22px}
.premium .p svg{width:20px; height:20px; stroke:var(--azul); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px}
.premium .p h4{font-size:15px; letter-spacing:-.025em; margin-bottom:8px; line-height:1.25}
.premium .p p{font-size:12.5px; color:var(--gris); margin:0; line-height:1.6}

/* ================= firma ================= */
.firma{margin-top:44px; border:1px solid var(--linea); display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; padding:26px 28px}
@media(max-width:760px){ .firma{grid-template-columns:1fr; gap:16px} }
.firma .ini{
  width:56px; height:56px; border:1.5px solid var(--azul); color:var(--azul);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; letter-spacing:-.04em;
}
.firma .nm{font-size:17px; font-weight:600; letter-spacing:-.03em}
.firma .rol{font-size:12.5px; color:var(--gris); margin-top:4px; line-height:1.6}
.firma .cta{display:flex; gap:10px; flex-wrap:wrap}
.firma .cta a{font-size:12.5px; border:1px solid var(--linea-fuerte); padding:9px 14px; color:var(--tinta); transition:.18s}
.firma .cta a:hover{border-color:var(--azul); color:var(--azul)}
.firma .cta a.wa{background:#25D366; border-color:#25D366; color:#07231A; font-weight:600}
.firma .cta a.wa:hover{background:#1FBA59; color:#07231A}

/* ================= precios "desde" ================= */
.desde{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-claro); font-weight:600; margin-bottom:6px}
.aster{color:var(--azul); font-weight:600}
.cifra .desde{margin-bottom:4px}
.mod .precio .desde{margin-bottom:3px; font-size:10px}
.nota-precio{
  margin-top:22px; border:1px solid #EFE3C2; background:#FBF6E8; padding:16px 20px;
  font-size:12.5px; color:#6B520D; line-height:1.7;
}
.nota-precio b{color:#4A3908}
.nota-precio .a{color:var(--azul); font-weight:700}

/* ============================================================
   SISTEMA TIPOGRÁFICO A (el vigente de zonia)
   Inter para texto de lectura · IBM Plex Mono para títulos
   display, etiquetas y datos. Sincronizado con src/app.css.
   ============================================================ */
:root{
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
body{font-family:var(--sans); font-size:15.5px; line-height:1.6; letter-spacing:0}

/* — display en mono — */
h1, h2,
.hero h1, .sec-head h2, .contacto h2, .abrir h3, .desc h3, .complemento .cab h3,
.marca .logo-grande, .tipo .muestra{
  font-family:var(--mono); letter-spacing:-.035em;
}
/* — títulos de tarjeta en Inter, como en la landing — */
h3, h4,
.sub h3, .mod h4, .of h4, .paso h4, .premium .p h4, .anatomia h4, .recorrido .r h4,
.liga-doc h3, .tarifa h3, .grupo-h h3, .proy .nm, .socio-ficha .nm, .firma .nm,
.pieza-h .t, .sb b, .pieza-f b{
  font-family:var(--sans); letter-spacing:-.02em;
}
/* — etiquetas, chips y microcopy de interfaz en mono — */
.eyebrow, .wm, .sec-num, .ix, .nivel, .comose, .tag, .id, .m, .n,
.bar nav a, .docs a, .ir-sitio, .chip, .propuesta .et, .propuesta .meta,
.anatomia .n, .liga-doc .n, .liga-doc .flecha, .abrir .n, .tarifa .n, .marca h4,
.pieza-m, .pieza-h .id, .of .nivel, .grupo-h .tag, .datos b, .paleta .lb,
.tipo .pesos, .sb li span, .cifra .k, .desde, .socio-ficha dt, .proy .lugar, .proy .tags span{
  font-family:var(--mono);
}
/* — números y precios en mono con cifras tabulares — */
.cifra .v, .tarifa .p, .complemento .op .p, .mod .precio, .of .precio-of,
.desc td.num, .desc th.num, .proy .m2, .inv .v, .paso .n, .sec-num,
.propuesta .meta b, .impreso .p, .firma .ini{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
/* — texto de lectura: Inter — */
p, li, td, dd, .lead, .sec-lead, .resuelve span, .nota, .chica, .nota-precio,
.sub p, .mod p, .of p, .paso p, .premium .p p, .anatomia p, .recorrido .r p,
.recorrido .r .q, .liga-doc p, .tarifa li, .tarifa .pie, .grupo-h p, .firma .rol,
.socio-ficha dd, .contacto p, .marca .q, .marca .pie-logo, .pieza-f, .sb li i,
.desc p, .desc td, .complemento .cab p, .complemento .op li, .complemento .aviso{
  font-family:var(--sans);
}
/* — las maquetas de publicidad son de otra marca: van en sans — */
.reel, .impreso, .wa, .gpost, .pizarron, .volante, .impreso .k, .impreso .lin, .impreso .qt{
  font-family:var(--sans);
}
.impreso .k{letter-spacing:.12em}
/* — ajustes finos tras el cambio de familia — */
.hero .lead{font-size:17.5px; line-height:1.62}
.sub p, .mod p, .of p{font-size:14px}
.bar nav a, .docs a{letter-spacing:.01em}
.pieza-f .copy{font-family:var(--sans)}

/* ================= las dos ramas ================= */
.ramas{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px}
@media(max-width:860px){ .ramas{grid-template-columns:1fr} }
.rama{border:1px solid var(--linea); background:var(--papel); display:flex; flex-direction:column; transition:.2s}
.rama.viva:hover{border-color:var(--azul); box-shadow:0 12px 34px rgba(26,63,181,.10)}
.rama .cab{padding:28px 28px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.rama .num{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--azul); font-weight:600}
.rama .estado{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 9px; border-radius:2px; font-weight:600;
}
.estado.on{background:#F2F8F4; color:var(--verde); border:1px solid #BFD3C4}
.estado.off{background:#FBF6E8; color:var(--ambar); border:1px solid #EFE3C2}
.rama h3{font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-.04em; padding:16px 28px 0; font-family:var(--mono)}
.rama .quien{padding:14px 28px 0; font-size:13px; color:var(--azul); font-weight:600}
.rama p.desc{padding:10px 28px 0; font-size:14px; color:var(--gris); line-height:1.65; margin:0}
.rama ul{list-style:none; margin:18px 0 0; padding:0 28px}
.rama li{display:grid; grid-template-columns:15px 1fr; gap:9px; font-size:13px; color:var(--gris); padding:6px 0; border-top:1px dotted var(--linea); line-height:1.55}
.rama li svg{width:12px; height:12px; stroke:var(--azul); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:4px}
.rama .pie{margin-top:auto; padding:24px 28px 26px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.rama .precio-r{font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:-.02em}
.rama .precio-r small{display:block; font-weight:400; font-size:11px; color:var(--gris-claro); margin-top:3px}
.rama .btn-r{background:var(--azul); color:#fff; padding:13px 20px; font-size:13.5px; font-weight:600; white-space:nowrap; transition:.18s}
.rama .btn-r:hover{background:#152F87}
.rama .btn-r.off{background:var(--papel-2); color:var(--gris-claro); border:1px solid var(--linea-fuerte); cursor:default}
.rama .norte-caja{padding:22px 28px 0; display:flex; align-items:flex-end; gap:16px}
.rama .norte-caja .globo{
  background:var(--papel-2); border:1px solid var(--linea); padding:12px 16px; font-size:12.5px;
  color:var(--gris); line-height:1.55; position:relative; border-radius:2px;
}

/* ================= Norte, el perrito ================= */
.norte{color:var(--tinta); display:block; overflow:visible}
.norte .ink{stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; fill:none}
.norte .thin{stroke:currentColor; stroke-width:1.5; stroke-linecap:round; fill:none}
.norte .az{fill:var(--azul); stroke:currentColor; stroke-width:1.8; stroke-linejoin:round}
.norte .az-f{fill:var(--azul)}
.norte .ink-f{fill:currentColor}
.norte .surf{fill:var(--papel)}
.norte .eyes{animation:norte-blink 5s infinite; transform-origin:center; transform-box:fill-box}
.norte .wag{animation:norte-wag .55s ease-in-out infinite alternate; transform-origin:0% 100%; transform-box:fill-box}
@keyframes norte-blink{0%,93%,100%{transform:scaleY(1)} 97%{transform:scaleY(.12)}}
@keyframes norte-wag{from{transform:rotate(-12deg)} to{transform:rotate(14deg)}}
@media (prefers-reduced-motion: reduce){ .norte .eyes, .norte .wag{animation:none} }

/* ================= página de mantenimiento ================= */
.mant{padding:84px 0 76px; border-bottom:1px solid var(--linea)}
.mant .caja{display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:center}
@media(max-width:760px){ .mant .caja{grid-template-columns:1fr; gap:26px} }
.mant .globo{
  background:var(--papel-2); border:1px solid var(--linea); padding:18px 22px; font-size:14px;
  color:var(--gris); line-height:1.65; margin-top:18px; position:relative;
}
.mant .globo:before{
  content:''; position:absolute; top:-9px; left:34px; width:14px; height:14px;
  background:var(--papel-2); border-left:1px solid var(--linea); border-top:1px solid var(--linea);
  transform:rotate(45deg);
}
.mant h1{font-size:clamp(2rem,5vw,3.2rem); font-family:var(--mono)}
.mant .lead{margin-top:22px; font-size:16px; color:var(--gris); max-width:60ch; line-height:1.66}
.mant .acciones{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.mant .acciones a{font-size:13.5px; padding:13px 20px; border:1px solid var(--linea-fuerte); color:var(--tinta); transition:.18s}
.mant .acciones a:hover{border-color:var(--azul); color:var(--azul)}
.mant .acciones a.pri{background:#25D366; border-color:#25D366; color:#07231A; font-weight:600}
.mant .acciones a.pri:hover{background:#1FBA59; color:#07231A}

/* ================= bloque grande: mira el ejemplo ================= */
.mira{padding:60px 0; border-bottom:1px solid var(--linea); background:
  linear-gradient(180deg, var(--azul-tenue) 0%, var(--papel-2) 100%)}
.mira-caja{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
@media(max-width:900px){ .mira-caja{grid-template-columns:1fr; gap:28px} }
.mira h2{font-size:clamp(1.7rem,3.6vw,2.6rem); letter-spacing:-.04em; margin-bottom:16px}
.mira h2 em{color:var(--azul)}
.mira .txt > p{font-size:15px; color:var(--gris); max-width:52ch; line-height:1.65; margin-bottom:0}
.mira .botones{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.btn-grande{
  background:var(--azul); color:#fff; padding:17px 26px; font-size:15px; font-weight:600;
  letter-spacing:-.01em; display:inline-flex; align-items:center; gap:9px; transition:.18s;
  box-shadow:0 10px 26px rgba(26,63,181,.22);
}
.btn-grande:hover{background:#152F87; color:#fff; transform:translateY(-1px)}
.btn-borde{
  border:1px solid var(--linea-fuerte); background:var(--papel); color:var(--tinta);
  padding:17px 22px; font-size:14px; font-weight:500; transition:.18s;
}
.btn-borde:hover{border-color:var(--azul); color:var(--azul)}
.mira .mini-datos{
  margin-top:22px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--gris-claro); text-transform:uppercase;
}
/* ventana simulada del estudio */
.ventana{border:1px solid var(--linea-fuerte); background:var(--papel); box-shadow:0 22px 50px rgba(14,22,56,.14); overflow:hidden}
.ventana .barra{display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--papel-2); border-bottom:1px solid var(--linea)}
.ventana .barra span{width:9px; height:9px; border-radius:50%; background:var(--linea-fuerte)}
.ventana .barra i{
  font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--gris-claro);
  margin-left:10px; background:var(--papel); border:1px solid var(--linea); padding:3px 10px; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ventana .lienzo{padding:26px 24px 24px}
.ventana .l-eyebrow{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--azul); font-weight:600}
.ventana .l-h1{font-family:var(--mono); font-size:clamp(17px,2.2vw,21px); font-weight:700; letter-spacing:-.035em; line-height:1.18; margin-top:14px}
.ventana .l-sub{font-size:12.5px; color:var(--gris); line-height:1.55; margin-top:12px}
.ventana .l-cifras{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:20px}
.ventana .l-cifras div{background:var(--papel); padding:12px 10px}
.ventana .l-cifras b{display:block; font-family:var(--mono); font-size:17px; letter-spacing:-.03em}
.ventana .l-cifras span{font-size:10px; color:var(--gris-claro); line-height:1.4; display:block; margin-top:4px}
.ventana .l-pie{margin-top:16px; padding-top:12px; border-top:1px solid var(--linea); font-family:var(--mono); font-size:10px; color:var(--gris-claro); display:flex; gap:12px; flex-wrap:wrap}
.ventana .l-pie b{color:var(--azul); font-weight:600}

/* ================= hero de la página de ejemplo ================= */
.hero-ej{padding:64px 0 56px; border-bottom:1px solid var(--linea); background:linear-gradient(180deg, var(--azul-tenue) 0%, var(--papel) 100%)}
.hero-ej .cols{display:grid; grid-template-columns:1fr 1.08fr; gap:48px; align-items:center}
@media(max-width:960px){ .hero-ej .cols{grid-template-columns:1fr; gap:30px} }
.hero-ej h1{font-size:clamp(2.1rem,4.6vw,3.3rem); max-width:14ch}
.hero-ej .lead{margin-top:22px; font-size:16px; color:var(--gris); max-width:48ch; line-height:1.66}
.cta-gigante{
  display:inline-flex; align-items:center; gap:12px; margin-top:30px;
  background:var(--azul); color:#fff; padding:22px 32px; font-size:17px; font-weight:700; letter-spacing:-.02em;
  box-shadow:0 14px 34px rgba(26,63,181,.26); transition:.18s;
}
.cta-gigante:hover{background:#152F87; color:#fff; transform:translateY(-2px); box-shadow:0 18px 42px rgba(26,63,181,.32)}
.cta-gigante .fl{font-size:20px; line-height:1}
.hero-ej .bajo-cta{margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--gris-claro); text-transform:uppercase}

/* ventana grande y clicable */
.ventana.grande{position:relative; display:block; transition:.2s}
.ventana.grande:hover{transform:translateY(-3px); box-shadow:0 28px 60px rgba(14,22,56,.20)}
.ventana.grande .lienzo{padding:30px 28px 26px}
.ventana.grande .l-h1{font-size:clamp(19px,2.6vw,25px)}
.ventana .l-nav{display:flex; gap:14px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--linea); font-family:var(--mono); font-size:10px; color:var(--gris-claro)}
.ventana .l-nav b{color:var(--azul); font-weight:600}
.ventana .l-barras{display:flex; align-items:flex-end; gap:6px; height:56px; margin-top:20px}
.ventana .l-barras i{flex:1; background:var(--azul); opacity:.85; border-radius:1px}
.ventana .l-barras i:nth-child(2){opacity:.62} .ventana .l-barras i:nth-child(3){opacity:.48}
.ventana .l-barras i:nth-child(4){opacity:.36} .ventana .l-barras i:nth-child(5){opacity:.26}
.ventana .l-barras i:nth-child(6){opacity:.18}
.ventana .lupa{
  position:absolute; right:16px; bottom:16px; background:var(--tinta); color:#fff;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; padding:7px 12px; text-transform:uppercase;
}

/* rejilla de estudios de ejemplo (lista para más casos) */
.casos{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px}
@media(max-width:760px){ .casos{grid-template-columns:1fr} }
.caso{border:1px solid var(--linea); padding:26px; display:flex; flex-direction:column; transition:.2s}
.caso.viva:hover{border-color:var(--azul); background:var(--papel-2)}
.caso .et{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--azul); font-weight:600}
.caso h3{font-size:21px; margin:12px 0 6px; letter-spacing:-.03em}
.caso .sub{font-size:12.5px; color:var(--gris-claro); font-family:var(--mono)}
.caso p{font-size:13.5px; color:var(--gris); margin:14px 0 0; line-height:1.6}
.caso .abrir-caso{margin-top:auto; padding-top:20px; font-size:14px; font-weight:600; color:var(--azul)}
.caso.proximo{border-style:dashed; opacity:.7}
.caso.proximo .et{color:var(--gris-claro)}
.caso.proximo .abrir-caso{color:var(--gris-claro)}

/* ================= mira el ejemplo · versión simple y visual ================= */
.mira .cab-mira{text-align:center; max-width:56ch; margin:0 auto}
.mira .cab-mira h2{font-size:clamp(1.9rem,4.4vw,3rem); margin-bottom:14px}
.mira .cab-mira p{font-size:16px; color:var(--gris); line-height:1.6; margin:0}
.cuadros{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:38px 0 0}
@media(max-width:860px){ .cuadros{grid-template-columns:repeat(2,1fr)} }
.cuadro{
  background:var(--papel); border:1px solid var(--linea); padding:24px 20px 22px; text-align:center;
  box-shadow:0 8px 22px rgba(14,22,56,.06); transition:.2s;
}
.mira a:hover .cuadro, .cuadro:hover{border-color:var(--azul); transform:translateY(-2px)}
.cuadro .num{font-family:var(--mono); font-size:34px; font-weight:700; color:var(--azul); letter-spacing:-.05em; line-height:1}
.cuadro h4{font-size:16px; margin:12px 0 8px; letter-spacing:-.025em}
.cuadro p{font-size:12.5px; color:var(--gris); line-height:1.55; margin:0}
.cuadro svg{width:26px; height:26px; stroke:var(--azul); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px}
.mira .centro{display:flex; justify-content:center; margin-top:34px}
.mira .pie-mira{text-align:center; margin-top:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--gris-claro); text-transform:uppercase}

/* ================= regresar (botón grande) ================= */
.volver{padding:56px 0; border-bottom:1px solid var(--linea); background:var(--papel-2)}
.volver .caja{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.volver .txt h3{font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.035em}
.volver .txt p{margin:10px 0 0; font-size:14.5px; color:var(--gris); max-width:52ch}
.volver .botones{display:flex; gap:12px; flex-wrap:wrap}

/* ============================================================
   PASE MÓVIL
   La barra se parte en dos filas, las tablas scrollean solas y
   las escalas tipográficas bajan un peldaño.
   ============================================================ */
.tabla-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabla-wrap table{min-width:480px}

@media (max-width:760px){
  html{scroll-padding-top:112px}

  /* — barra en dos filas: marca arriba, documentos abajo — */
  .bar-in{height:auto; padding:10px 16px 0; flex-wrap:wrap; row-gap:0}
  .bar .ir-sitio{display:none}
  .bar .mark, .bar .wm{--wm-size:1.15rem}
  .docs{
    margin-left:0; width:100%; order:3; overflow-x:auto; scrollbar-width:none;
    padding:10px 0 9px; gap:7px;
  }
  .docs::-webkit-scrollbar{display:none}
  .docs a{padding:7px 11px; font-size:11px}
  .bar nav{display:none}

  /* — aire general — */
  .hero, .hero-ej{padding:44px 0 40px}
  section{padding:52px 0}
  .wrap{padding:0 18px}
  .propuesta .in{padding:14px 18px; gap:12px}
  .propuesta .meta{gap:18px}

  /* — títulos y cifras un peldaño abajo — */
  .sec-head{gap:10px}
  .sec-num{font-size:40px}
  .sec-num svg{width:20px; height:20px}
  .hero .lead{font-size:16px}
  .cifras{grid-template-columns:1fr 1fr}
  .cifra{padding:16px 14px 8px}
  .cifra .v{font-size:24px}
  .cifra .desde{font-size:9.5px; margin-bottom:2px}
  .cifra .k{font-size:11px}

  /* — precios — */
  .tarifa{padding:22px 20px}
  .tarifa .p{font-size:34px}
  .complemento .op{padding:18px 20px}
  .complemento .op .p{font-size:28px}
  .mod{padding:16px 18px}
  .mod .precio{font-size:15px}
  .grupo-h{padding:14px 18px}

  /* — botones cómodos con el pulgar — */
  .cta-gigante, .btn-grande, .btn-wa, .btn-linea, .rama .btn-r, .mant .acciones a, .btn-borde{
    width:100%; justify-content:center; text-align:center;
  }
  .volver .botones, .mira .centro, .contacto .acciones, .mant .acciones{width:100%}
  .cta-gigante{padding:18px 22px; font-size:15.5px}

  /* — bloque del ejemplo — */
  .mira{padding:44px 0}
  .cuadros{gap:10px}
  .cuadro{padding:18px 12px 16px}
  .cuadro .num{font-size:26px}
  .cuadro h4{font-size:14px; margin:8px 0 6px}
  .cuadro p{font-size:11.5px}
  .ventana .lienzo, .ventana.grande .lienzo{padding:20px 16px 18px}
  .ventana .l-cifras{grid-template-columns:1fr}
  .ventana .l-nav{gap:9px; font-size:9px}

  /* — piezas de publicidad — */
  .pieza-b{padding:16px 14px}
  .reel{aspect-ratio:9/13}
  .impreso.carta, .impreso.media{aspect-ratio:8.5/10}
  .wa .cuerpo{min-height:280px}

  /* — tablas y fichas — */
  .desc{padding:18px 18px}
  .desc th, .desc td{padding:8px 10px; font-size:12px}
  .socio-ficha, .marca .izq, .marca .der{padding:22px 20px}
  .marca .logo-grande .wm{--wm-size:2.4rem}
  .paleta{grid-template-columns:repeat(2,1fr)}
  .tipo .muestra{font-size:26px}
  .firma{padding:20px}
  .contacto{padding:52px 0 48px}
  .contacto .datos{gap:18px}
  .anatomia div, .inv .c, .of, .sub, .premium .p, .recorrido .r{padding:20px 18px}
}

@media (max-width:430px){
  .cifras{grid-template-columns:1fr}
  .cifra{border-right:0}
  .cuadros{grid-template-columns:1fr 1fr}
  .paleta{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:2rem}
  .hero-ej h1{font-size:1.9rem}
  .mira .cab-mira h2{font-size:1.7rem}
  .propuesta .meta{gap:14px}
  .propuesta .meta div{font-size:10.5px}
}
.scroll-hint{display:none}
@media (max-width:760px){
  .scroll-hint{display:block; margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-claro)}
}