/* =========================================================
   Miniaturas de webs de ejemplo. Todo en cqw: escala con el ancho.
   Cada plantilla tiene sus propios colores, iguales en tema claro y oscuro.
   ========================================================= */
.site{container-type:inline-size;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:10px;width:100%;max-width:100%;text-align:left;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 30px 60px -34px rgba(0,0,0,.5);font-family:var(--body)}
.site .bar{height:3.4cqw;display:flex;align-items:center;gap:.7cqw;padding:0 1.6cqw;background:rgba(0,0,0,.07);position:relative;z-index:2}
.site .bar i{width:.9cqw;height:.9cqw;border-radius:50%;background:currentColor;opacity:.28}
.site .bar span{font:400 1.25cqw/1 var(--mono);opacity:.55;margin-left:1.4cqw;white-space:nowrap}
.site .vp{position:absolute;inset:3.4cqw 0 0 0;overflow:hidden}
.site h4,.site h5,.site p{margin:0}
.mn{display:flex;align-items:center;gap:3cqw;padding:2.4cqw 4cqw;font:500 1.35cqw/1 var(--body);position:relative}
.mn b{margin-right:auto;font-weight:400}

/* Corte · carnicería */
.t-corte{background:#f2ebe1;color:#2a1512}
.t-corte .mn b{font:400 2.4cqw/1 "DM Serif Display",Georgia,serif;letter-spacing:.22em;color:#8e1b1b}
.q-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:4cqw;padding:0 4cqw}
.q-h{font:400 5.6cqw/1.02 "DM Serif Display",Georgia,serif;letter-spacing:-.01em}
.q-s{font:500 1.25cqw/1 var(--body);opacity:.65;margin:1.8cqw 0 2.4cqw!important}
.q-list div{display:flex;justify-content:space-between;padding:1.15cqw 0;border-top:.13cqw solid rgba(42,21,18,.2);font:400 1.45cqw/1 var(--body)}
.q-list span:last-child{font-weight:600}
.q-btn{display:inline-block;margin-top:2.4cqw;background:#8e1b1b;color:#f2ebe1;padding:1.3cqw 2.4cqw;font:600 1.4cqw/1 var(--body);border-radius:.4cqw}
.q-img{aspect-ratio:1/1.05;border-radius:.6cqw;position:relative;background:
  radial-gradient(ellipse 30% 14% at 35% 40%,rgba(245,225,210,.8),transparent 70%),
  radial-gradient(ellipse 22% 10% at 64% 62%,rgba(245,225,210,.65),transparent 70%),
  radial-gradient(ellipse 40% 8% at 50% 24%,rgba(245,225,210,.5),transparent 70%),
  radial-gradient(ellipse 18% 9% at 30% 75%,rgba(245,225,210,.55),transparent 70%),
  radial-gradient(ellipse at 50% 50%,#b53a33 0,#8e1b1b 45%,#4a0f0e 100%)}
.q-tag{position:absolute;left:2cqw;bottom:2cqw;background:#f2ebe1;color:#2a1512;font:600 1.2cqw/1 var(--body);padding:1cqw 1.4cqw;border-radius:.4cqw}

/* Brasa · restaurante */
.t-brasa{background:#1a1512;color:#efe2d0}
.t-brasa .mn b{font:400 2.4cqw/1 "DM Serif Display",Georgia,serif;letter-spacing:.14em}
.b-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:4cqw;padding:0 4cqw}
.b-photo{aspect-ratio:1/1.02;border-radius:.6cqw;background:
  repeating-linear-gradient(100deg,transparent 0 3.2cqw,rgba(20,10,6,.55) 3.2cqw 3.8cqw),
  radial-gradient(ellipse 60% 45% at 45% 62%,#ffcf7a 0,#f08a3b 18%,#b3401a 38%,#4a1a0b 64%,#1a1512 86%)}
.b-txt h4{font:400 7.4cqw/.94 "DM Serif Display",Georgia,serif;letter-spacing:-.01em}
.b-txt .s{font:400 1.25cqw/1 var(--mono);opacity:.6;margin:2cqw 0 3cqw}
.b-menu{display:grid;gap:1.3cqw;font:400 1.45cqw/1.2 var(--body)}
.b-menu div{display:flex;gap:1cqw;align-items:baseline}
.b-menu div::after{content:"";order:1;flex:1;border-bottom:.15cqw dotted rgba(239,226,208,.35)}
.b-menu span:last-child{order:2;font-family:var(--mono)}
.b-btn{display:inline-block;margin-top:3cqw;background:#d9622b;color:#1a1512;font:600 1.4cqw/1 var(--body);padding:1.2cqw 2.2cqw}

/* Lente · portfolio audiovisual */
.t-lente{background:#f0efea;color:#151515}
.t-lente .mn b{font:700 1.9cqw/1 "Syne",sans-serif;letter-spacing:-.02em}
.l-head{padding:.6cqw 4cqw 3.4cqw;font:600 4.5cqw/1.03 "Syne",sans-serif;letter-spacing:-.035em;max-width:84%}
.l-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw 1.4cqw;padding:0 4cqw}
.l-grid figure{margin:0}
.l-grid .f{aspect-ratio:2.39/1}
.l-grid figcaption{font:400 1.1cqw/1 var(--mono);margin-top:.9cqw;opacity:.65}
.f1{background:linear-gradient(180deg,#f3b06b 0,#e07a4a 38%,#2c3e4f 39%,#152431 100%)}
.f2{background:radial-gradient(circle at 70% 40%,#fff6d8 0 3%,#8aa6b8 6%,#24384a 40%,#0b141d 100%)}
.f3{background:linear-gradient(180deg,#cfd6d2 0,#cfd6d2 55%,#b7a68a 55%,#8c7a5d 100%)}
.f4{background:linear-gradient(90deg,#0d0d0d 0 30%,#3a2b23 30% 34%,#c9a27e 34% 70%,#0d0d0d 70%)}
.f5{background:radial-gradient(ellipse at 50% 120%,#e8473b 0,#7a1d2d 40%,#120d18 80%)}
.f6{background:linear-gradient(160deg,#9fc1c6 0,#4f7b86 50%,#1f3940 100%)}

/* Barro · tienda */
.t-barro{background:#ebe4d7;color:#2c221d}
.t-barro .mn b{font:400 2.6cqw/1 "Young Serif",Georgia,serif;letter-spacing:-.02em}
.r-top{display:flex;justify-content:space-between;align-items:end;padding:1cqw 4cqw 3cqw;gap:4cqw}
.r-top h4{font:400 4.6cqw/1.02 "Young Serif",Georgia,serif;max-width:60%;letter-spacing:-.02em}
.r-top span{font:400 1.25cqw/1.4 var(--mono);opacity:.7;text-align:right}
.r-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:0 4cqw}
.r-row .tile{background:#ddd2c1;aspect-ratio:1/.78;display:grid;place-items:center}
.r-row .cap{display:flex;justify-content:space-between;font:400 1.35cqw/1 var(--body);margin-top:1.1cqw}
.r-row .cap span:last-child{font-family:var(--mono)}
.pot{width:56%;aspect-ratio:2/1.05;border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--c);position:relative;margin-top:14%}
.pot::before{content:"";position:absolute;left:0;right:0;top:-12%;height:24%;border-radius:50%;background:var(--r)}
.vase{width:30%;aspect-ratio:1/1.6;background:var(--c);border-radius:40% 40% 46% 46%/30% 30% 70% 70%;position:relative}
.vase::before{content:"";position:absolute;left:30%;right:30%;top:-9%;height:14%;background:var(--c);border-radius:20%}
.plate{width:66%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--r) 0 54%,var(--c) 55%)}

/* Calma · bienestar */
.t-calma{background:#dce3d6;color:#26332a}
.t-calma .mn b{font:600 italic 2.8cqw/1 "Cormorant Garamond",Georgia,serif}
.c-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:5cqw;padding:3cqw 4cqw 0;position:relative}
.c-sun{position:absolute;right:-8cqw;top:-10cqw;width:40cqw;aspect-ratio:1;border-radius:50%;background:#cbd6c4}
.c-h{font:500 italic 9cqw/.9 "Cormorant Garamond",Georgia,serif;letter-spacing:-.02em;position:relative}
.c-p{font:400 1.5cqw/1.5 var(--body);max-width:32cqw;margin-top:2.6cqw;opacity:.8}
.c-btn{display:inline-block;margin-top:2.6cqw;background:#26332a;color:#dce3d6;border-radius:99cqw;font:500 1.4cqw/1 var(--body);padding:1.3cqw 2.6cqw}
.c-list{position:relative;align-self:end;font:400 1.35cqw/1 var(--body)}
.c-list .t{font:500 1.15cqw/1 var(--mono);opacity:.6;margin-bottom:1.4cqw}
.c-list div.r{display:flex;justify-content:space-between;padding:1.25cqw 0;border-top:.12cqw solid rgba(38,51,42,.25)}
.c-list div.r span:first-child{font-family:var(--mono);opacity:.7}

/* Planta · arquitectura */
.t-planta{background:#d5d4ce;color:#121212}
.t-planta .mn{text-transform:uppercase;font:500 1.3cqw/1 "Archivo Narrow",sans-serif;letter-spacing:.08em}
.t-planta .mn b{font:700 1.9cqw/1 "Archivo Narrow",sans-serif;letter-spacing:.04em}
.p-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:4cqw;padding:1cqw 4cqw 0}
.p-draw{aspect-ratio:1/.92;position:relative;border-bottom:.25cqw solid #121212}
.p-draw .a{position:absolute;left:8%;right:22%;bottom:0;height:58%;border:.22cqw solid #121212;border-bottom:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(20% - .22cqw),#121212 calc(20% - .22cqw) 20%),repeating-linear-gradient(180deg,transparent 0 calc(33.3% - .15cqw),rgba(18,18,18,.35) calc(33.3% - .15cqw) 33.3%)}
.p-draw .b{position:absolute;left:44%;right:4%;bottom:58%;height:26%;border:.22cqw solid #121212;border-bottom:0;background:#e4e3dd}
.p-draw .c{position:absolute;left:0;right:0;bottom:-3.5%;height:3.5%;background:repeating-linear-gradient(135deg,#121212 0 .2cqw,transparent .2cqw .9cqw)}
.p-draw .d{position:absolute;left:8%;top:0;font:400 1.1cqw/1 var(--mono)}
.p-t{margin:0 0 2cqw;font:700 8cqw/.85 "Archivo Narrow",sans-serif;letter-spacing:-.02em;text-transform:uppercase}
.p-list{font:500 1.35cqw/1 "Archivo Narrow",sans-serif}
.p-list div{display:grid;grid-template-columns:3cqw 1fr 8cqw 4cqw;gap:1cqw;padding:1.25cqw 0;border-top:.15cqw solid #121212}
.p-list span:nth-child(1),.p-list span:nth-child(3),.p-list span:nth-child(4){font-family:var(--mono);font-size:1.15cqw}
.p-list span:nth-child(3),.p-list span:nth-child(4){text-align:right}

/* Consulta · marca personal */
.t-consulta{background:#ece6ef;color:#2c2440}
.t-consulta .mn b{font:600 2.2cqw/1 "Lora",Georgia,serif}
.n-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:5cqw;padding:1cqw 4cqw 0;align-items:start}
.n-arch{aspect-ratio:1/1.2;border-radius:50% 50% 0 0/40% 40% 0 0;background:radial-gradient(ellipse at 50% 35%,#ebcdbb 0 13%,#b48a7a 22%,#6d5a7a 55%,#3f3456 100%)}
.n-h{font:500 4.6cqw/1.05 "Lora",Georgia,serif;letter-spacing:-.02em}
.n-p{font:400 1.45cqw/1.5 var(--body);opacity:.75;margin:2cqw 0 2.4cqw!important;max-width:40cqw}
.n-t div{display:flex;justify-content:space-between;padding:1.2cqw 0;border-top:.12cqw solid rgba(44,36,64,.25);font:400 1.4cqw/1 var(--body)}
.n-t span:last-child{font-family:var(--mono)}
.n-btn{display:inline-block;margin-top:2.4cqw;background:#2c2440;color:#ece6ef;font:500 1.4cqw/1 var(--body);padding:1.3cqw 2.4cqw;border-radius:.5cqw}

/* Pulso · landing */
.t-pulso{background:#0f1729;color:#e6ecfa}
.t-pulso .bar{background:rgba(255,255,255,.06)}
.t-pulso .mn b{font:700 2.1cqw/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.u-hero{text-align:center;padding:1cqw 8cqw 0}
.u-h{font:700 5.6cqw/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em}
.u-p{font:400 1.45cqw/1.4 var(--body);opacity:.7;margin-top:1.6cqw!important}
.u-b{display:flex;gap:1cqw;justify-content:center;margin-top:2.2cqw;font:600 1.3cqw/1 var(--body)}
.u-b span{padding:1.1cqw 2cqw;border-radius:.6cqw;border:.12cqw solid rgba(230,236,250,.3)}
.u-b span:first-child{background:#8fb4ff;color:#0f1729;border-color:#8fb4ff}
.u-dash{margin:3cqw 10cqw 0;background:#17213a;border:.12cqw solid rgba(230,236,250,.12);border-radius:1cqw 1cqw 0 0;padding:2cqw;display:grid;grid-template-columns:1fr 2fr;gap:2cqw}
.u-k{font:400 1.1cqw/1 var(--mono);opacity:.6}
.u-v{font:700 3.4cqw/1.1 "Bricolage Grotesque",sans-serif;margin-top:.8cqw}
.u-v small{font:500 1.2cqw/1 var(--mono);color:#7ee0a8;margin-left:.6cqw}
.u-bars{display:flex;align-items:end;gap:.8cqw;height:12cqw}
.u-bars i{flex:1;background:#8fb4ff;opacity:.85;border-radius:.3cqw .3cqw 0 0}

/* Solar · inmobiliaria */
.t-solar{background:#f4f3ef;color:#1a1f1c}
.t-solar .mn b{font:700 2.3cqw/1 var(--body);letter-spacing:-.05em}
.t-solar .mn .dot{color:#1f5c46}
.s-hero{padding:0 4cqw;display:grid;gap:2.4cqw}
.s-h{font:600 4.6cqw/1.02 var(--body);letter-spacing:-.045em;max-width:72%}
.s-search{display:grid;grid-template-columns:1fr 1.4fr 1fr auto;border:.15cqw solid #1a1f1c;font:500 1.35cqw/1.2 var(--body);background:#fff}
.s-search span{padding:1.2cqw 1.8cqw;border-right:.15cqw solid #dcdad2}
.s-search small{display:block;font:400 1cqw/1 var(--mono);opacity:.55;margin-bottom:.5cqw}
.s-search em{font-style:normal;background:#1f5c46;color:#fff;padding:0 3cqw;display:grid;place-items:center;font-weight:600}
.s-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:2.8cqw 4cqw 0}
.s-img{aspect-ratio:4/2.5;background:var(--g)}
.s-row p{font:600 1.4cqw/1.3 var(--body);margin-top:1cqw}
.s-row small{display:block;font:400 1.15cqw/1.3 var(--mono);opacity:.65;margin-top:.3cqw}

/* Albor · clínica */
.t-albor{background:#f4f8f8;color:#0f2b33}
.t-albor .mn b{font:700 2.3cqw/1 var(--body);letter-spacing:-.04em;color:#0f7b83}
.t-albor .mn em{font-style:normal;background:#0f7b83;color:#fff;padding:1cqw 1.8cqw;border-radius:99cqw}
.a-wrap{display:grid;grid-template-columns:1fr 1fr;gap:5cqw;padding:1cqw 4cqw 0;align-items:start}
.a-h{font:600 5cqw/1.02 var(--body);letter-spacing:-.045em}
.a-list{margin-top:2.6cqw;font:400 1.4cqw/1 var(--body)}
.a-list div{padding:1.2cqw 0;border-top:.12cqw solid rgba(15,43,51,.15);display:flex;justify-content:space-between}
.a-list span:last-child{font-weight:600}
.a-btn{display:inline-block;margin-top:2.6cqw;background:#0f2b33;color:#fff;padding:1.3cqw 2.4cqw;border-radius:99cqw;font:500 1.35cqw/1 var(--body)}
.a-img{aspect-ratio:1/1.08;border-radius:2cqw;background:radial-gradient(circle at 62% 34%,#ffffff 0 9%,#d4e8e9 26%,#8fbfc2 62%,#4d8c92);position:relative}
.a-card{position:absolute;left:-5cqw;bottom:4cqw;background:#fff;border-radius:1.2cqw;padding:1.6cqw 2.2cqw;font:400 1.15cqw/1.3 var(--body);box-shadow:0 1cqw 3cqw rgba(15,43,51,.18)}
.a-card b{display:block;font:600 1.9cqw/1.2 var(--body);color:#0f7b83;margin-top:.3cqw}

/* Mareta · hotel */
.t-mareta{background:#1d3d52;color:#fff}
.t-mareta .bar{background:rgba(255,255,255,.12)}
.m-hero{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 40%,rgba(0,0,0,.35)),linear-gradient(180deg,#f2c79a 0,#e59a72 30%,#9a8f9c 50%,#3a6680 51%,#1d3d52 100%)}
.t-mareta .mn b{font:400 2.2cqw/1 "DM Serif Display",Georgia,serif;letter-spacing:.3em}
.m-txt{position:relative;padding:5cqw 4cqw 0;text-align:center}
.m-h{font:400 8cqw/1 "DM Serif Display",Georgia,serif;letter-spacing:-.01em}
.m-p{font:400 1.6cqw/1.3 var(--body);margin-top:1.4cqw!important;opacity:.92}
.m-book{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:grid;grid-template-columns:repeat(3,1fr) auto;background:#fff;color:#1d2a30;font:500 1.4cqw/1.2 var(--body)}
.m-book span{padding:1.5cqw 2cqw;border-right:.12cqw solid #e2ddd3}
.m-book small{display:block;font:500 1cqw/1 var(--mono);opacity:.55;margin-bottom:.5cqw}
.m-book em{font-style:normal;background:#1d3d52;color:#fff;display:grid;place-items:center;padding:0 2.6cqw;font-weight:600}

/* Forja · gimnasio */
.t-forja{background:#121212;color:#f1f1f1}
.t-forja .bar{background:rgba(255,255,255,.07)}
.t-forja .mn{text-transform:uppercase;font:500 1.25cqw/1 var(--body);letter-spacing:.08em}
.t-forja .mn b{font:400 2.6cqw/1 "Anton",Impact,sans-serif;letter-spacing:.04em}
.f-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:3cqw;padding:0 4cqw}
.f-h{font:400 10cqw/.88 "Anton",Impact,sans-serif;text-transform:uppercase}
.f-h span{color:#ff5a1f}
.f-p{font:400 1.45cqw/1.45 var(--body);opacity:.7;margin-top:2.2cqw!important;max-width:34cqw}
.f-tags{display:flex;gap:.8cqw;margin-top:2.2cqw;flex-wrap:wrap}
.f-tags span{border:.12cqw solid rgba(255,255,255,.3);padding:.8cqw 1.4cqw;font:500 1.15cqw/1 var(--mono);text-transform:uppercase}
.f-img{background:radial-gradient(ellipse at 70% 30%,#ff8a4c 0,#a3320f 30%,#2a1a14 65%,#121212);aspect-ratio:1/1.1;position:relative}
.f-price{position:absolute;left:0;bottom:0;background:#ff5a1f;color:#121212;padding:1.6cqw 2.2cqw;font:400 3cqw/1 "Anton",Impact,sans-serif}
.f-price small{display:block;font:600 1.1cqw/1 var(--mono);margin-bottom:.6cqw;text-transform:uppercase}

/* Navaja · barbería */
.t-navaja{background:#15241f;color:#eadfc8}
.t-navaja .bar{background:rgba(255,255,255,.07)}
.t-navaja .mn b{font:400 2cqw/1 "DM Serif Display",Georgia,serif;letter-spacing:.2em;text-transform:uppercase}
.v-wrap{text-align:center;padding:1cqw 9cqw 0}
.v-k{font:500 1.15cqw/1 var(--mono);opacity:.7}
.v-h{margin-top:1.4cqw!important;font:400 11.5cqw/.9 "DM Serif Display",Georgia,serif}
.v-list{display:grid;grid-template-columns:1fr 1fr;gap:0 5cqw;margin-top:3cqw;text-align:left;font:400 1.5cqw/1 var(--body)}
.v-list div{display:flex;justify-content:space-between;padding:1.25cqw 0;border-top:.12cqw solid rgba(234,223,200,.25)}
.v-list span:last-child{font-family:var(--mono)}
.v-btn{display:inline-block;margin-top:2.8cqw;border:.15cqw solid #eadfc8;padding:1.2cqw 2.6cqw;font:500 1.3cqw/1 var(--body);letter-spacing:.12em;text-transform:uppercase}

/* Vidal · abogados */
.t-vidal{background:#f6f5f1;color:#13213a}
.t-vidal .mn b{font:600 1.9cqw/1 "Lora",Georgia,serif}
.w-wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:4cqw;padding:1cqw 4cqw 0}
.w-h{font:500 4.8cqw/1.05 "Lora",Georgia,serif;letter-spacing:-.02em}
.w-areas{display:grid;grid-template-columns:1fr 1fr;gap:0 3cqw;margin-top:3cqw}
.w-areas div{border-top:.15cqw solid #13213a;padding:1.2cqw 0 2cqw;font:600 1.5cqw/1.25 var(--body)}
.w-areas small{display:block;font:400 1.15cqw/1.35 var(--body);opacity:.65;margin-top:.6cqw}
.w-img{aspect-ratio:1/1.15;background:radial-gradient(ellipse at 50% 30%,#8c96a8 0 12%,#4a5a78 34%,#13213a 80%);position:relative}
.w-q{position:absolute;left:-3cqw;bottom:3cqw;right:3cqw;background:#f6f5f1;padding:1.6cqw 2cqw;font:400 1.25cqw/1.35 var(--body)}
.w-q b{display:block;font:600 1.7cqw/1.2 "Lora",Georgia,serif;margin-bottom:.4cqw}

/* Web antigua (antes del rediseño) */
.t-viejo{background:#dcdcdc;color:#222;font-family:"Times New Roman",Times,serif}
.o-head{background:#3a6ea5;color:#fff;padding:2cqw 3cqw;font:700 3.4cqw/1 "Times New Roman",Times,serif}
.o-nav{background:#c4c4c4;padding:1cqw 3cqw;font:1.5cqw/1 "Times New Roman",Times,serif;color:#00e;text-decoration:underline;display:flex;gap:2.4cqw}
.o-body{display:grid;grid-template-columns:1fr 2.6fr;gap:2cqw;padding:2cqw 3cqw}
.o-side{background:#f2f2f2;border:.15cqw solid #999;padding:1.4cqw;font:1.35cqw/1.45 "Times New Roman",Times,serif}
.o-side u{color:#00e}
.o-main{font:1.65cqw/1.4 "Times New Roman",Times,serif}
.o-main h5{font:700 2.6cqw/1.1 "Times New Roman",Times,serif;margin:0 0 1.2cqw;color:#3a6ea5}
.o-img{width:38%;aspect-ratio:4/3;background:linear-gradient(#a9bccd,#7c93a8);float:right;margin:0 0 1cqw 1.5cqw;border:.4cqw ridge #888}
.o-foot{position:absolute;bottom:0;left:0;right:0;background:#3a6ea5;color:#fff;font:1.2cqw/1 "Times New Roman",Times,serif;padding:1.2cqw 3cqw;text-align:center}

/* =========================================================
   Plantillas animadas y cinemáticas
   ========================================================= */
.site .mn{z-index:2}
/* Filo · carnicería */
.t-filo{background:#0d0807;color:#f3e7dc}
.t-filo .bar{background:rgba(255,255,255,.06)}
.fi-bg{position:absolute;inset:0;background:radial-gradient(ellipse 30% 10% at 40% 44%,rgba(250,225,210,.5),transparent 70%),radial-gradient(ellipse 24% 8% at 63% 60%,rgba(250,225,210,.42),transparent 70%),radial-gradient(ellipse 34% 7% at 52% 30%,rgba(250,225,210,.3),transparent 70%),radial-gradient(ellipse at 50% 50%,#9e2a22 0,#5e1410 45%,#1a0806 85%);animation:mk-kb 14s ease-in-out infinite alternate}
.fi-vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 25%,rgba(0,0,0,.8) 100%)}
.t-filo .mn b{font:400 2.4cqw/1 "DM Serif Display",Georgia,serif;letter-spacing:.3em}
.fi-c{position:relative;text-align:center;padding-top:7cqw}
.fi-k{font:500 1.35cqw/1 var(--body);opacity:.8}
.fi-h{font:400 8.4cqw/1 "DM Serif Display",Georgia,serif;margin-top:1.4cqw!important}
.fi-h span{display:block;overflow:hidden;padding-bottom:.08em}
.fi-h i{display:block;font-style:normal;animation:mk-line 8s cubic-bezier(.2,.7,.2,1) infinite}
.fi-h span+span i{animation-delay:.2s}
.fi-tick{position:absolute;left:0;right:0;bottom:3cqw;overflow:hidden;border-block:.12cqw solid rgba(243,231,220,.3);padding:1.2cqw 0;font:500 1.4cqw/1 var(--body);white-space:nowrap}
.fi-tick div{display:inline-block;animation:mk-tick 22s linear infinite}
/* Humo · restaurante */
.t-humo{background:#0b0a09;color:#efe6da}
.t-humo .bar{background:rgba(255,255,255,.06)}
.hu-glow{position:absolute;left:0;right:0;bottom:-22%;height:72%;background:radial-gradient(ellipse 60% 60% at 50% 100%,#e0662a 0,#7a2a10 35%,transparent 70%);animation:mk-glow 2.6s ease-in-out infinite alternate}
.hu-s{position:absolute;bottom:0;width:32cqw;height:32cqw;border-radius:50%;background:radial-gradient(circle,rgba(225,215,205,.24),transparent 65%);filter:blur(1.6cqw);animation:mk-smoke 9s linear infinite}
.t-humo .mn b{font:500 2cqw/1 var(--body);letter-spacing:.4em}
.hu-c{position:relative;text-align:center;padding-top:8cqw}
.hu-h{font:500 italic 12cqw/.9 "Cormorant Garamond",Georgia,serif;animation:mk-breathe 6s ease-in-out infinite alternate}
.hu-p{font:400 1.5cqw/1.4 var(--body);opacity:.75;margin-top:2cqw!important}
.hu-b{display:inline-block;margin-top:2.6cqw;border:.13cqw solid #efe6da;padding:1.2cqw 2.6cqw;font:500 1.3cqw/1 var(--body);border-radius:99cqw}
/* Altura · hotel */
.t-altura{background:#f6d5b0;color:#fff}
.t-altura .bar{color:#3a2d3f}
.al-sky{position:absolute;inset:0;background:linear-gradient(180deg,#ffae78 0,#f8d3ad 42%,#cfd8e4 100%)}
.al-sun{position:absolute;left:60%;top:34%;width:11cqw;aspect-ratio:1;border-radius:50%;background:#fff4d8;box-shadow:0 0 9cqw #ffd59a;animation:mk-sun 9s ease-in-out infinite alternate}
.al-m{position:absolute;left:-10%;right:-10%;bottom:0;height:var(--h);background:var(--c);clip-path:polygon(0 62%,9% 32%,20% 56%,33% 14%,46% 50%,58% 24%,72% 56%,85% 18%,100% 46%,100% 100%,0 100%);animation:mk-drift var(--d) ease-in-out infinite alternate}
.t-altura .mn{color:#2f2a40}
.t-altura .mn b{font:700 2.2cqw/1 var(--body);letter-spacing:-.04em}
.al-c{position:relative;padding:3cqw 4cqw 0}
.al-h{font:600 6cqw/1 var(--body);letter-spacing:-.045em;color:#2f2a40}
.al-book{position:absolute;left:4cqw;bottom:4cqw;background:rgba(20,18,30,.55);color:#fff;border-radius:99cqw;padding:1.3cqw 2.2cqw;font:400 1.35cqw/1 var(--body)}
.al-book b{font-weight:600}
/* Marea · estética */
.t-marea{background:#e7f0ef;color:#163634}
.ma-b{position:absolute;width:46cqw;aspect-ratio:1;border-radius:50%;filter:blur(4cqw);opacity:.8;animation:mk-float 11s ease-in-out infinite alternate}
.t-marea .mn b{font:600 2.3cqw/1 "Lora",Georgia,serif}
.ma-c{position:relative;text-align:center;padding-top:7cqw}
.ma-h{font:500 7.6cqw/1.08 "Lora",Georgia,serif;letter-spacing:-.02em}
.ma-rot{display:inline-grid;overflow:hidden;vertical-align:bottom;height:1.12em}
.ma-rot span{grid-area:1/1;opacity:0;animation:mk-rot 9s infinite}
.ma-rot span:nth-child(2){animation-delay:3s}
.ma-rot span:nth-child(3){animation-delay:6s}
.ma-p{font:400 1.5cqw/1.4 var(--body);opacity:.7;margin-top:2cqw!important}
.ma-btn{display:inline-block;margin-top:2.4cqw;background:#163634;color:#e7f0ef;border-radius:99cqw;padding:1.3cqw 2.6cqw;font:500 1.35cqw/1 var(--body)}
/* Órbita · tecnología */
.t-orbita{background:#06070d;color:#e9ecff}
.t-orbita .bar{background:rgba(255,255,255,.06)}
.t-orbita .vp{perspective:90cqw}
.or-core{position:absolute;left:50%;top:64%;width:15cqw;aspect-ratio:1;margin:-7.5cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d4dbff,#5b6cff 45%,#1b1f5c 80%);box-shadow:0 0 10cqw #3c4cff}
.or-ring{position:absolute;left:50%;top:64%;width:54cqw;height:54cqw;margin:-27cqw;border:.16cqw solid rgba(160,175,255,.55);border-radius:50%;animation:mk-spin 10s linear infinite}
.or-ring::before{content:"";position:absolute;left:50%;top:-1cqw;width:2cqw;height:2cqw;margin-left:-1cqw;border-radius:50%;background:#bfc8ff;box-shadow:0 0 2cqw #8f9cff}
.or-ring.r2{width:36cqw;height:36cqw;margin:-18cqw;animation:mk-spin2 7s linear infinite}
.t-orbita .mn b{font:700 2.2cqw/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.or-c{position:relative;text-align:center;padding-top:3cqw}
.or-h{font:700 6cqw/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.045em;background:linear-gradient(90deg,#fff 0,#9aa6ff 25%,#fff 50%,#9aa6ff 75%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mk-shine 6s linear infinite}
.or-p{font:400 1.5cqw/1.4 var(--body);opacity:.65;margin-top:1.6cqw!important}
/* Plano · filmmaker */
.t-plano{background:#000;color:#f2f2f2}
.t-plano .bar{background:#111}
.pl-frame{position:absolute;left:0;right:0;top:7cqw;bottom:7cqw;overflow:hidden}
.pl-s{position:absolute;inset:0;opacity:0;background:var(--g);animation:mk-scene 12s infinite}
.pl-s:first-child{opacity:1}
.t-plano .mn b{font:600 1.9cqw/1 var(--body);letter-spacing:-.02em}
.pl-tc{position:absolute;right:4cqw;top:9.5cqw;display:flex;gap:.8cqw;align-items:center;font:500 1.25cqw/1 var(--body)}
.pl-tc i{width:1cqw;height:1cqw;border-radius:50%;background:#ff3b30;animation:mk-blink 1.2s steps(2) infinite}
.pl-cap{position:absolute;left:4cqw;bottom:10cqw;font:600 5cqw/1 var(--body);letter-spacing:-.04em;text-shadow:0 .4cqw 3cqw rgba(0,0,0,.5)}
.pl-cap small{display:block;font:500 1.3cqw/1 var(--body);letter-spacing:0;opacity:.8;margin-bottom:1cqw}

@keyframes mk-kb{from{transform:scale(1)}to{transform:scale(1.16) translate(-3%,2%)}}
@keyframes mk-line{0%{transform:translateY(110%)}12%,80%{transform:none}92%,100%{transform:translateY(-110%)}}
@keyframes mk-tick{to{transform:translateX(-50%)}}
@keyframes mk-glow{from{opacity:.65}to{opacity:1}}
@keyframes mk-smoke{0%{transform:translateY(20cqw) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-45cqw) scale(1.5);opacity:0}}
@keyframes mk-breathe{from{letter-spacing:-.02em;opacity:.85}to{letter-spacing:.03em;opacity:1}}
@keyframes mk-sun{from{transform:translateY(4cqw)}to{transform:translateY(-1cqw)}}
@keyframes mk-drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes mk-float{from{transform:translate(0,0) scale(1)}to{transform:translate(6cqw,-4cqw) scale(1.15)}}
@keyframes mk-rot{0%{opacity:0}3%,29%{opacity:1}32%,100%{opacity:0}}
@keyframes mk-spin{from{transform:rotateX(74deg) rotateZ(0)}to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes mk-spin2{from{transform:rotateX(70deg) rotateY(18deg) rotateZ(360deg)}to{transform:rotateX(70deg) rotateY(18deg) rotateZ(0)}}
@keyframes mk-shine{to{background-position:-200% 0}}
@keyframes mk-scene{0%{opacity:0;transform:scale(1.1)}8%,33%{opacity:1}41%,100%{opacity:0;transform:scale(1)}}
@keyframes mk-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.site *{animation:none!important}.ma-rot span:first-child,.pl-s:first-child{opacity:1}}

/* =========================================================
   Fotos reales (Pexels) en las plantillas
   ========================================================= */
.q-img{background:url(../img/px-12884549.jpg) center/cover!important}
.b-photo{background:linear-gradient(180deg,rgba(26,21,18,0),rgba(26,21,18,.25)),url(../img/px-3997609.jpg) center/cover!important}
.a-img{background:url(../img/px-30902075.jpg) center/cover!important}
.m-hero{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 40%,rgba(0,0,0,.45)),url(../img/px-19550058.jpg) center/cover!important}
.f-img{background:linear-gradient(0deg,rgba(18,18,18,.4),transparent 50%),url(../img/px-6796973.jpg) center/cover!important}
.w-img{background:url(../img/px-7876202.jpg) center 30%/cover!important}
.n-arch{background:url(../img/px-31987756.jpg) center 25%/cover!important}
.c-sun{background:url(../img/px-4057839.jpg) center/cover!important;opacity:.95}
.p-draw{background:url(../img/px-14086482.jpg) center/cover!important;border-bottom:0!important}
.p-draw .d{left:4%!important;top:auto!important;bottom:4%;color:#fff;background:rgba(0,0,0,.45);padding:.6cqw .9cqw}
.r-row .tile{background-size:cover!important;background-position:center!important}
.l-grid .f1{background:url(../img/px-3062542.jpg) center/cover}.l-grid .f2{background:url(../img/px-2627246.jpg) center/cover}.l-grid .f3{background:url(../img/px-3379933.jpg) center/cover}
.l-grid .f4{background:url(../img/px-4914352.jpg) center/cover}.l-grid .f5{background:url(../img/px-3384788.jpg) center/cover}.l-grid .f6{background:url(../img/px-17944423.jpg) center/cover}
.fi-bg{background:url(../img/px-18606624.jpg) center/cover!important}
.fi-vig{background:radial-gradient(ellipse at 50% 45%,rgba(40,6,4,.35) 20%,rgba(0,0,0,.85) 100%)!important}
.hu-photo{position:absolute;inset:0;background:url(../img/px-16041746.jpg) center/cover;opacity:.6;animation:mk-kb 16s ease-in-out infinite alternate}
.al-sky{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0) 50%),url(../img/px-29414775.jpg) center 60%/cover!important}
.al-m{opacity:.92}
.al-h{color:#fff!important;text-shadow:0 .3cqw 2cqw rgba(0,0,0,.35)}
.t-altura .mn{color:#fff!important}
.v-photo{position:absolute;inset:0;background:url(../img/px-2076930.jpg) center 30%/cover;opacity:.3;filter:grayscale(.4)}
.v-wrap{position:relative}
.ma-photo{position:absolute;right:0;top:0;bottom:0;width:48%;background:url(../img/px-5069612.jpg) center/cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.ma-c{text-align:left!important;padding:7cqw 0 0 5cqw!important;max-width:62%;position:relative}
.s-img{background-size:cover!important;background-position:center!important}
.pl-s{background-size:cover!important;background-position:center!important}

/* Altura rehecha: refugio de montaña cinematográfico con niebla en movimiento */
.t-altura{background:#1c2226!important;color:#fff}
.t-altura .bar{color:#fff;background:rgba(0,0,0,.25)}
.t-altura .al-photo{position:absolute;inset:-4%;background:url(../img/px-17944423.jpg) center 55%/cover;animation:mk-kb 18s ease-in-out infinite alternate}
.t-altura .al-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,18,.5) 0,rgba(10,14,18,.05) 32%,rgba(10,14,18,.15) 55%,rgba(10,14,18,.78) 100%)}
.t-altura .al-fog{position:absolute;left:-30%;width:160%;height:38%;filter:blur(1.4cqw);animation:mk-fog 20s ease-in-out infinite alternate;
  background:radial-gradient(ellipse 28% 45% at 28% 50%,rgba(255,255,255,.38),transparent 70%),radial-gradient(ellipse 24% 38% at 72% 58%,rgba(255,255,255,.3),transparent 70%),radial-gradient(ellipse 18% 30% at 50% 40%,rgba(255,255,255,.22),transparent 70%)}
.t-altura .al-fog.f1{top:40%}
.t-altura .al-fog.f2{top:58%;opacity:.75;animation-duration:28s;animation-direction:alternate-reverse}
@keyframes mk-fog{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
.t-altura .mn{color:#fff!important}
.t-altura .mn b{font:600 1.7cqw/1 var(--body)!important;letter-spacing:.55em!important}
.t-altura .al-side{position:absolute;right:4cqw;top:13cqw;display:grid;justify-items:center;gap:1cqw;font:500 1.1cqw/1 var(--body);color:rgba(255,255,255,.85)}
.t-altura .al-side i{display:block;width:.12cqw;height:11cqw;background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1))}
.t-altura .al-c{position:absolute!important;left:4cqw;bottom:12.5cqw;padding:0!important}
.t-altura .al-k{font:500 1.3cqw/1 var(--body);opacity:.85}
.t-altura .al-h{margin-top:1.4cqw!important;font:400 7.2cqw/.98 "DM Serif Display",Georgia,serif!important;letter-spacing:-.015em!important;color:#fff!important;text-shadow:0 .4cqw 3cqw rgba(0,0,0,.35)}
.t-altura .al-h em{font:600 italic 1.08em/1 "Cormorant Garamond",Georgia,serif}
.t-altura .al-book{position:absolute!important;left:4cqw!important;right:4cqw;bottom:3.4cqw!important;display:grid;grid-template-columns:repeat(3,1fr) auto;padding:0!important;
  background:rgba(255,255,255,.14)!important;border:.1cqw solid rgba(255,255,255,.35);border-radius:.8cqw!important;color:#fff;font:500 1.35cqw/1.2 var(--body)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.t-altura .al-book span{padding:1.3cqw 2cqw;border-right:.1cqw solid rgba(255,255,255,.25)}
.t-altura .al-book small{display:block;font-size:1cqw;opacity:.7;margin-bottom:.4cqw}
.t-altura .al-book b{background:#fff;color:#1c2226;display:grid;place-items:center;padding:0 2.6cqw;border-radius:.55cqw;margin:.5cqw;font-weight:600}

/* Altura v3: titular en la parte alta (no se corta en miniaturas) y amanecer con contraste */
.t-altura .al-photo{background:url(../img/px-29414775.jpg) center 70%/cover!important}
.t-altura .al-shade{background:linear-gradient(90deg,rgba(14,10,20,.62) 0,rgba(14,10,20,.25) 55%,rgba(14,10,20,0) 100%),linear-gradient(180deg,rgba(14,10,20,.35),transparent 30%,transparent 70%,rgba(14,10,20,.55))!important}
.t-altura .al-fog.f1{top:55%!important}
.t-altura .al-fog.f2{top:70%!important}
.t-altura .al-side{display:none}
.t-altura .al-c{position:absolute!important;left:4cqw!important;top:11cqw!important;bottom:auto!important}
.t-altura .al-h{font-size:6.6cqw!important}
.t-altura .al-cta{display:inline-block;margin-top:2.4cqw;background:#fff;color:#1c1626;padding:1.2cqw 2.4cqw;border-radius:99cqw;font:600 1.3cqw/1 var(--body)}
.t-altura .al-book{left:auto!important;right:4cqw!important;width:56%;bottom:3.4cqw!important;font-size:1.2cqw!important}
.t-altura .al-book span{padding:1.1cqw 1.6cqw}