:root{
  --pared:#D6D3CC;
  --rosa:#EDC9BA;
  --rosa-hondo:#D69F88;
  --mantequilla:#F2E4BC;
  --menta:#D3E0C8;
  --lila:#E9D6E0;
  --papel:#FBF7F0;
  --tinta:#56664A;
  --tinta-suave:#7C5444;
  --trazo:#4F4440;
  --terracota:#B97F5C;
  --salvia:#83866E;
  --salvia-honda:#717361;
  --crema:#ECECD6;
  --acento:#BF7A57;
  --pizarra:#4B3B48;
  --curva:cubic-bezier(.2,.85,.25,1);
  --f-titulo:"Montserrat",system-ui,sans-serif;
  --f-titulo-peso:800;
  --f-titulo-espacio:-.035em;
  --f-titulo-var:normal;
  --f-cursiva:"Newsreader",Georgia,serif;
  --f-cursiva-peso:400;
  --f-texto:"Montserrat",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{
  font-family:var(--f-texto);color:var(--tinta);
  background-color:var(--pared);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.6'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .28 -.9 0 0 0 .95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:300px 300px;
}
body::before{   content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003' numOctaves='4' seed='13'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .44 0 0 0 0 .42 1.2 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='1600' height='1000' filter='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
a{color:inherit}
img{display:block;max-width:100%}
.titulo{font-family:var(--f-titulo);font-weight:var(--f-titulo-peso);letter-spacing:var(--f-titulo-espacio);font-variation-settings:var(--f-titulo-var);text-wrap:balance}
.cursiva{font-family:var(--f-cursiva);font-style:italic;font-weight:var(--f-cursiva-peso);letter-spacing:-.005em;color:var(--acento)}

.cab{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,4vw,56px) 26px}
.cab .franja{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:#F2DCCD;
  background-image:linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);
}
.cab .cota-cab{position:absolute;left:clamp(16px,4vw,56px);right:clamp(16px,4vw,56px);bottom:10px;height:10px;border-left:1.2px solid #C08A6C;border-right:1.2px solid #C08A6C;pointer-events:none}
.cab .cota-cab::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #C08A6C}
.cab .cota-cab span{position:absolute;left:50%;top:-3px;transform:translateX(-50%);background:#F2DCCD;padding:0 8px;font-size:.6rem;font-weight:700;letter-spacing:.2em;color:#B07658}
.cab img{height:50px;width:auto}
.cab nav{display:flex;gap:clamp(28px,4vw,56px);padding-top:10px}
.marca-nav{position:relative;text-decoration:none;color:var(--tinta);padding-bottom:12px;display:block}
.marca-nav b{font-size:.88rem;font-weight:700;letter-spacing:.02em}
.marca-nav small{position:absolute;left:0;top:-17px;white-space:nowrap;font-family:"Caveat",cursive;font-size:1rem;color:var(--acento);transform:rotate(-6deg);opacity:.9}
.marca-nav i{position:absolute;left:0;right:0;bottom:0;height:8px;border-left:1.2px solid var(--acento);border-right:1.2px solid var(--acento);transform-origin:0 50%;transform:scaleX(.45);transition:transform .4s var(--curva)}
.marca-nav i::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.2px solid var(--acento)}
.marca-nav:hover i,.marca-nav:focus-visible i{transform:scaleX(1)}
.marca-nav:focus-visible{outline:2px dashed var(--acento);outline-offset:6px}
.portada{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,5vw,80px);align-items:center;
  padding:clamp(6px,2vw,24px) clamp(16px,5vw,80px) clamp(70px,9vw,120px);
}
.lamina{
  position:relative;background:var(--papel);padding:clamp(16px,2.4vw,30px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 28px 40px -26px rgba(51,48,45,.55), 0 2px 6px rgba(51,48,45,.12);
  background-image:linear-gradient(rgba(131,134,110,.16) 1px, transparent 1px),linear-gradient(90deg, rgba(131,134,110,.16) 1px, transparent 1px);
  background-size:22px 22px;
}
.portada .lamina{transform:rotate(-1deg)}
.cinta{
  position:absolute;width:110px;height:30px;background:rgba(242,228,188,.85);
  clip-path:polygon(3% 0,97% 4%,100% 30%,97% 60%,100% 100%,2% 96%,0 65%,3% 35%);
  box-shadow:0 1px 2px rgba(51,48,45,.15);
}
.cinta.a{top:-12px;left:-26px;transform:rotate(-38deg)}
.cinta.b{bottom:-10px;right:-28px;transform:rotate(-34deg)}
.marca{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);align-items:center;gap:clamp(12px,2.4vw,30px)}
.marca svg{width:100%;height:auto;display:block;overflow:visible}
.contorno{fill:none;stroke:var(--trazo);stroke-width:5;stroke-linejoin:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:trazar 1.7s var(--curva) .2s forwards}
.relleno{opacity:0;animation:llenar 1s var(--curva) forwards}
.relleno.r1{animation-delay:1.5s}.relleno.r2{animation-delay:1.7s}.relleno.r3{animation-delay:1.9s}.relleno.r4{animation-delay:2.05s}
@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes llenar{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.cota{fill:none;stroke:var(--tinta-suave);stroke-width:2;opacity:0;animation:aparecer .6s ease 1.2s forwards}
.cota-txt{font-family:"Montserrat",sans-serif;font-size:26px;font-weight:600;letter-spacing:2px;fill:var(--tinta-suave);opacity:0;animation:aparecer .6s ease 1.4s forwards}
@keyframes aparecer{to{opacity:1}}
.raya{width:4px;align-self:stretch;background:#F1D9BD;transform-origin:50% 0;transform:scaleY(0);animation:bajar .7s var(--curva) 2.1s forwards}
@keyframes bajar{to{transform:scaleY(1)}}
.nombre{font-family:"Montserrat",sans-serif;color:var(--salvia);line-height:.92}
.nombre span{display:block;opacity:0;transform:translate3d(-16px,0,0);animation:entrar .7s var(--curva) forwards}
.nombre .g{font-weight:400;font-size:clamp(1.25rem,2.6vw,2.2rem);letter-spacing:.02em;animation-delay:2.2s}
.nombre .d{font-weight:800;font-size:clamp(2rem,4.6vw,3.9rem);letter-spacing:-.01em;animation-delay:2.35s}
.nombre .j{font-weight:800;font-size:clamp(2rem,4.6vw,3.9rem);letter-spacing:-.01em;animation-delay:2.5s}
.nombre .t{font-weight:500;font-size:clamp(.72rem,1.25vw,1.02rem);color:var(--terracota);margin-top:10px;letter-spacing:.01em;animation-delay:2.7s}
@keyframes entrar{to{opacity:1;transform:translate3d(0,0,0)}}
.leyenda{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:10px;border-top:1.5px solid var(--trazo);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}

.portada h1{font-size:clamp(2.5rem,5.2vw,4.9rem);line-height:.98}
.portada h1 .cursiva{font-size:1.06em}
.portada .sub{margin-top:24px;max-width:36ch;font-size:1.08rem;line-height:1.6;color:var(--tinta-suave)}
.portada .sub strong{color:var(--tinta);font-weight:600}
.acciones{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:30px;align-items:center}
.enlace-ig{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--rosa-hondo);padding-bottom:2px}

.recorrido{height:560vh;position:relative}
.escenario{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center;padding:24px clamp(16px,5vw,80px)}
.plano-casa{transform:rotate(-.6deg);transform-origin:50% 0;will-change:transform,filter;padding:clamp(14px,2vw,26px) clamp(14px,2vw,26px) 0}
.plano-casa svg{width:100%;height:auto;display:block;overflow:visible}
.cuarto{fill:transparent;transition:fill .8s var(--curva)}
.mueble{fill:none;stroke:#7A6E66;stroke-width:1.3;stroke-linejoin:round}
.muro{fill:none;stroke:#5A4E48;stroke-linecap:square;stroke-linejoin:miter}
.muro.ext{stroke-width:12}
.muro.int{stroke-width:6}
.ventana{fill:var(--papel);stroke:#5A4E48;stroke-width:1.2}
.vidrio{stroke:#7FA0A8;stroke-width:1.4}
.puerta-pl .hoja{stroke:#5A4E48;stroke-width:2.4;fill:none}
.puerta-pl .arco{stroke:#8A7C72;stroke-width:1;stroke-dasharray:3 3;fill:none}
.cota-pl path{stroke:#8A7C72;stroke-width:1;fill:none}
.cota-pl text,.norte text{font-family:"Montserrat",sans-serif;font-size:10px;font-weight:600;letter-spacing:1.4px;fill:#7A6E66}
.norte circle{fill:none;stroke:#8A7C72;stroke-width:1}
.norte path{fill:var(--acento)}
.rotulo{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;fill:#5A4E48;text-transform:uppercase}
.rotulo .m2{font-size:9.5px;font-weight:500;letter-spacing:.06em;fill:#8A7C72;text-transform:none}
.camino{fill:none;stroke:#C0715A;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 8}
.pie-agente{fill:#C0715A}
.halo{fill:rgba(192,113,90,.18);stroke:#C0715A;stroke-width:1.2}
.cajetin-pl{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;margin:14px calc(-1 * clamp(14px,2vw,26px)) 0;border-top:1.5px solid #5A4E48;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7A6E66}
.cajetin-pl span{padding:9px 12px;border-right:1px solid rgba(90,78,72,.4)}
.cajetin-pl span:last-child{border-right:0;text-align:right}

.ficha{align-self:center;min-width:0}
.pasos{position:relative;min-height:clamp(250px,40vh,330px)}
.paso{isolation:isolate;position:absolute;inset:0 0 auto 0;opacity:0;transform:translate3d(0,18px,0);transition:opacity .55s var(--curva),transform .55s var(--curva);pointer-events:none}
.paso.activo{opacity:1;transform:translate3d(0,0,0);pointer-events:auto}
.paso .lugar{font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acento)}
.paso h2{margin-top:12px;font-size:clamp(1.8rem,3.1vw,2.9rem);line-height:1.1;max-width:17ch;color:var(--tinta)}
.paso p{margin-top:16px;max-width:38ch;font-size:1.02rem;line-height:1.6;color:var(--tinta-suave)}

.asesoras{padding:clamp(70px,10vw,130px) clamp(16px,5vw,80px) clamp(60px,8vw,110px);text-align:center}
.asesoras h2{font-size:clamp(2.1rem,4.6vw,4.1rem);line-height:1}
.titulo-asesoras{text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.9rem,4.2vw,3.7rem)!important;line-height:1.02!important;color:var(--tinta)}
.titulo-asesoras .subraya{position:relative;display:inline-block;color:var(--acento)}
.titulo-asesoras .subraya svg{position:absolute;left:-2%;right:-2%;bottom:-.22em;width:104%;height:.36em;overflow:visible}
.titulo-asesoras .subraya path{fill:none;stroke:#E8B497;stroke-width:5;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.1s var(--curva) .2s}
.asesoras.ver .titulo-asesoras .subraya path{stroke-dashoffset:0}
.ficha{position:relative;padding-right:150px}
.carril{position:absolute;top:-25%;right:-60px;width:230px;height:160%;overflow:visible;pointer-events:none}
.huella{fill:var(--acento);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(1.35);transition:opacity .35s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
.huella.ver{opacity:.42;transform:scale(1)}
.huella.vieja{opacity:.2}
.bajada-huellas{position:relative;height:clamp(320px,60vh,560px);margin-bottom:calc(-1 * clamp(80px,12vw,160px))}
.bajada-huellas svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pizarra{
  position:relative;margin:clamp(36px,5vw,60px) auto 0;max-width:1080px;
  padding:clamp(54px,6vw,80px) clamp(18px,4vw,60px) clamp(40px,5vw,64px);
  border-radius:18px;
  background-color:var(--pizarra);
  background-image:
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 7px #E9DCCB, inset 0 0 0 8px rgba(90,60,70,.35), inset 0 0 60px rgba(0,0,0,.25), 0 30px 40px -28px rgba(60,40,50,.55);
}
.pizarra .rotulo-tiza{position:absolute;top:14px;left:50%;transform:translateX(-50%) rotate(-2deg);font-family:"Caveat",cursive;font-weight:600;font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1;color:#F6EFE6;white-space:nowrap;filter:url(#tiza);letter-spacing:.01em}
.tarjetas{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(36px,5vw,70px)}
.tarjeta{position:relative;width:min(400px,100%);aspect-ratio:1.7/1;perspective:1600px;cursor:pointer;text-align:left}
.tarjeta:nth-child(1){transform:rotate(-2deg)}
.tarjeta:nth-child(2){transform:rotate(1.6deg)}
.giro{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--curva)}
.tarjeta:hover .giro,.tarjeta:focus-visible .giro,.tarjeta.volteada .giro{transform:rotateY(180deg)}
.tarjeta:focus-visible{outline:2px dashed rgba(246,242,234,.8);outline-offset:10px}
.cara{
  position:absolute;inset:0;backface-visibility:hidden;background:var(--papel);
  box-shadow:0 26px 34px -20px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.2);
  display:grid;grid-template-columns:42% 1fr;overflow:hidden;
}
.cara .foto{position:relative;overflow:hidden;background:#CDBFA9}
.cara .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 4%;transform:scale(1.18);transform-origin:50% 0}
.cara .datos{padding:22px 20px 18px;display:flex;flex-direction:column;justify-content:space-between}
.cara h3{font-family:var(--f-titulo);font-weight:var(--f-titulo-peso);font-variation-settings:var(--f-titulo-var);letter-spacing:-.01em;font-size:1.5rem;line-height:1.05}
.cara .rol{font-family:var(--f-cursiva);font-style:italic;font-size:1.02rem;color:var(--tinta-suave);margin-top:6px}
.cara .gira{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acento);display:flex;align-items:center;gap:8px;padding-right:44px}
.cara.frente::after{
  content:"";position:absolute;right:0;bottom:0;width:46px;height:46px;
  background:linear-gradient(315deg, var(--pizarra) 0 50%, #E3DACB 50%, #FBF7F0 72%, #EDE4D5 100%);
  box-shadow:-3px -3px 8px -2px rgba(0,0,0,.25);
  border-top-left-radius:6px;
  transform-origin:100% 100%;
  animation:doblez 2.8s ease-in-out infinite;
}
@keyframes doblez{0%,62%,100%{transform:scale(1)}74%{transform:scale(1.32)}86%{transform:scale(1.08)}}
.tarjeta:hover .cara.frente::after{animation:none;transform:scale(1.5)}
.cara.atras{transform:rotateY(180deg);grid-template-columns:1fr;background:var(--fondo);align-content:center;padding:24px 28px}
.cara.atras small{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6E5A4E}
.cara.atras .numero{display:block;margin-top:6px;color:#8E4E33;font-family:var(--f-titulo);font-weight:var(--f-titulo-peso);font-variation-settings:var(--f-titulo-var);font-size:clamp(1.9rem,4vw,2.6rem);text-decoration:none;letter-spacing:-.01em}
.cara.atras .wa{color:#56664A;display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;width:max-content}
.pinza{position:absolute;top:-30px;left:50%;width:64px;height:52px;margin-left:-32px;z-index:3;pointer-events:none}

.cierre{
  position:relative;margin:clamp(30px,5vw,60px) clamp(10px,3vw,48px) 0;
  padding:clamp(70px,8vw,110px) clamp(22px,5vw,80px) clamp(60px,7vw,100px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:center;
  isolation:isolate;
}
.cierre::before{   content:"";position:absolute;inset:0;z-index:-2;transform:rotate(-.5deg);
  background-color:#F4E2D6;
  background-image:
    radial-gradient(70% 60% at 18% 40%, rgba(232,186,160,.55), transparent 70%),
    radial-gradient(50% 55% at 84% 70%, rgba(214,226,200,.6), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch' seed='3'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.1'%3E%3CfeDistantLight azimuth='120' elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 -.7 0 0 0 .78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-size:auto,auto,260px 260px;
  clip-path:polygon(0% 1.00%,2% 1.19%,4% 1.27%,6% 1.51%,8% 1.18%,10% 1.48%,12% 0.05%,14% 0.74%,16% 1.51%,18% 1.04%,20% 1.44%,22% 0.18%,24% 0.75%,26% 0.39%,28% 0.87%,30% 0.92%,32% 0.02%,34% 0.35%,36% 0.45%,38% 1.47%,40% 1.23%,42% 0.26%,44% 1.28%,46% 0.22%,48% 0.99%,50% 0.20%,52% 0.00%,54% 1.39%,56% 0.34%,58% 0.34%,60% 1.57%,62% 1.40%,64% 0.46%,66% 1.54%,68% 0.86%,70% 1.08%,72% 0.33%,74% 1.51%,76% 1.11%,78% 1.55%,80% 1.43%,82% 0.48%,84% 0.58%,86% 0.27%,88% 0.23%,90% 0.10%,92% 0.48%,94% 0.96%,96% 0.01%,98% 1.08%,100% 0.54%,99.85% 0%,99.59% 4%,99.76% 8%,99.84% 12%,99.76% 16%,99.65% 20%,99.97% 24%,99.51% 28%,99.99% 32%,99.63% 36%,99.58% 40%,99.99% 44%,99.61% 48%,99.82% 52%,99.71% 56%,100.00% 60%,99.98% 64%,99.91% 68%,99.52% 72%,99.90% 76%,99.62% 80%,99.54% 84%,99.53% 88%,99.83% 92%,99.82% 96%,99.74% 100%,100% 98.76%,98% 99.83%,96% 98.80%,94% 98.72%,92% 98.62%,90% 99.94%,88% 98.49%,86% 99.85%,84% 99.45%,82% 99.02%,80% 98.53%,78% 99.46%,76% 98.52%,74% 99.13%,72% 99.50%,70% 99.49%,68% 99.72%,66% 99.87%,64% 99.76%,62% 98.90%,60% 98.41%,58% 99.74%,56% 99.92%,54% 98.42%,52% 99.15%,50% 99.35%,48% 99.62%,46% 99.05%,44% 98.68%,42% 99.27%,40% 99.33%,38% 99.91%,36% 98.53%,34% 99.95%,32% 99.21%,30% 98.66%,28% 99.79%,26% 98.83%,24% 98.48%,22% 98.99%,20% 98.74%,18% 99.83%,16% 99.30%,14% 99.76%,12% 98.65%,10% 99.53%,8% 99.27%,6% 98.40%,4% 98.64%,2% 98.44%,0% 99.27%,0.24% 100%,0.36% 96%,0.24% 92%,0.15% 88%,0.20% 84%,0.07% 80%,0.19% 76%,0.49% 72%,0.48% 68%,0.31% 64%,0.25% 60%,0.17% 56%,0.04% 52%,0.14% 48%,0.39% 44%,0.43% 40%,0.18% 36%,0.39% 32%,0.39% 28%,0.35% 24%,0.33% 20%,0.38% 16%,0.18% 12%,0.35% 8%,0.14% 4%,0.24% 0%);
  filter:drop-shadow(0 18px 22px rgba(90,60,40,.25));
}
.cierre::after{   content:"";position:absolute;inset:14px 10px -12px 16px;z-index:-3;transform:rotate(-.5deg);background:rgba(80,60,50,.16);filter:blur(16px)
}
.cinta-cierre{position:absolute;width:130px;height:34px;background:rgba(236,214,190,.82);clip-path:polygon(3% 0,97% 4%,100% 30%,97% 60%,100% 100%,2% 96%,0 65%,3% 35%);box-shadow:0 1px 2px rgba(51,48,45,.15);z-index:2}
.cinta-cierre.a{top:-12px;left:8%;transform:rotate(-6deg)}
.cinta-cierre.b{top:-10px;right:12%;transform:rotate(5deg);background:rgba(211,224,200,.85)}
.mancha-cafe{position:absolute;right:30%;bottom:9%;width:120px;height:120px;z-index:-1;opacity:.5;pointer-events:none}
.lapiz{position:absolute;left:4%;bottom:5%;width:min(300px,36vw);transform:rotate(-8deg);z-index:1;filter:drop-shadow(0 6px 6px rgba(90,60,40,.3));pointer-events:none}
.nota-mano{font-family:"Caveat",cursive;font-weight:600;color:#9A4F35;font-size:1.5rem;line-height:1;transform:rotate(-4deg);display:inline-block}
.llave-plano{width:clamp(120px,15vw,185px);overflow:visible}
.llave-plano .lavado{filter:url(#acuarela)}
.llave-plano .tr{fill:none;stroke:#5A3D58;stroke-width:3.2;filter:url(#lapiz);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 2s var(--curva)}
.llave-plano .ct{fill:none;stroke:#5A3D58;stroke-width:1.5;opacity:0;transition:opacity .8s 1.4s}
.llave-plano text{font-family:"Caveat",cursive;font-size:17px;font-weight:600;fill:#9A4F35;opacity:0;transition:opacity .8s 1.6s}
.cierre.ver .llave-plano .tr{stroke-dashoffset:0}
.cierre.ver .llave-plano .ct,.cierre.ver .llave-plano text{opacity:.8}
.cierre .lugar{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7A4A63}
.cierre h2{margin-top:12px;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;color:#5A3D58;max-width:15ch}
.cierre h2 .cursiva{color:#9A4F35}
.cierre .bajada{margin-top:18px;font-size:1.04rem;line-height:1.6;color:#5A3D58;max-width:40ch}

.cel{position:relative;width:clamp(240px,22vw,300px);display:block;text-decoration:none;color:#F5F5F5;transform:rotate(3deg);transition:transform .5s var(--curva)}
.cel:hover,.cel:focus-visible{transform:rotate(0deg) translate3d(0,-6px,0)}
.cel:focus-visible{outline:2px solid #5A3D58;outline-offset:8px;border-radius:30px}
.cel > img{width:100%;height:auto;filter:drop-shadow(0 30px 30px rgba(30,40,25,.35))}
.pantalla{
  position:absolute;left:4.6%;top:2.4%;width:90.8%;height:95.2%;border-radius:12.5%/6.2%;overflow:hidden;
  background:#0C0C0D;font-family:-apple-system,"Helvetica Neue","Montserrat",sans-serif;font-size:9.5px;line-height:1.32;
  display:flex;flex-direction:column;
}
.isla{position:absolute;top:1.6%;left:50%;width:30%;height:3.4%;margin-left:-15%;background:#000;border-radius:20px;z-index:3}
.barra{display:flex;justify-content:space-between;padding:9% 9% 2%;font-weight:700;font-size:10px}
.ig-top{display:flex;align-items:center;gap:8px;padding:3% 5% 3%;font-weight:700;font-size:12.5px}
.ig-top svg{width:12px;flex:none}
.ig-top .usuario{flex:1;display:inline-block}
.ig-perfil{display:flex;align-items:center;gap:9px;padding:0 5% 3%}
.ig-avatar{flex:none;width:31%;aspect-ratio:1;border-radius:50%;padding:2.5px;background:conic-gradient(from 200deg,#F9CE34,#EE2A7B,#6228D7,#EE2A7B,#F9CE34)}
.ig-avatar img{width:100%;height:100%;border-radius:50%;border:2.5px solid #0C0C0D;object-fit:cover}
.ig-perfil .datos{flex:1;min-width:0}
.ig-nombre{font-weight:700;font-size:8.6px;letter-spacing:.01em;display:inline-block;line-height:1.25}
.ig-cifras{display:flex;justify-content:space-between;margin-top:6px}
.ig-cifras b{display:block;font-size:10.5px}
.ig-cifras span{color:#E8E8E8;font-size:8.6px}
.ig-bio{padding:0 5% 3%;color:#F0F0F0}
.ig-bio .cat{color:#A8A8A8}
.ig-bio span{display:block}
.ig-bio .link{color:#E0F1FF;font-weight:600;margin-top:2px}
.ig-fb{display:inline-flex;align-items:center;gap:4px;margin:0 5% 3%;padding:3px 7px;border:1px solid #333;border-radius:20px;font-weight:600;font-size:8.5px;width:max-content}
.ig-tabs{display:flex;justify-content:space-around;border-bottom:1px solid #262626;padding:5px 0 4px}
.ig-tabs svg{width:13px;stroke:#8E8E8E}
.ig-tabs svg:first-child{stroke:#F5F5F5}
.ig-grid-marco{flex:1;overflow:hidden;position:relative}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;animation:desplazar 26s linear infinite alternate}
.ig-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@keyframes desplazar{0%,8%{transform:translate3d(0,0,0)}92%,100%{transform:translate3d(0,-52%,0)}}
.cel:hover .ig-grid{animation-play-state:paused}
.cel:hover .ig-nombre,.cel:focus-visible .ig-nombre,.cel:hover .usuario,.cel:focus-visible .usuario{animation:vibrar .38s linear infinite, brillar 1.6s ease-in-out infinite}
@keyframes vibrar{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  20%{transform:translate3d(-1px,.5px,0) rotate(-1deg)}
  40%{transform:translate3d(1px,-.5px,0) rotate(1deg)}
  60%{transform:translate3d(-1px,0,0) rotate(-.5deg)}
  80%{transform:translate3d(1px,.5px,0) rotate(.5deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
@keyframes brillar{0%,100%{color:#F5F5F5;text-shadow:none}50%{color:#F6C9A6;text-shadow:0 0 6px rgba(240,170,120,.95),0 0 16px rgba(240,170,120,.7)}}
.cel .pista{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-size:.78rem;font-weight:700;color:#5A3D58;letter-spacing:.04em}

.pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px clamp(16px,5vw,80px) 40px;font-size:.84rem;color:#7C5444;margin-top:24px;border-top:1px solid rgba(90,78,72,.25)}
.pie a{font-weight:700;text-decoration:none}

.wa-flota{
  position:fixed;right:clamp(16px,2.6vw,32px);bottom:clamp(16px,2.6vw,32px);z-index:40;
  width:68px;height:68px;display:block;text-decoration:none;color:var(--tinta);
}
.wa-flota .sello-wa{position:absolute;inset:0;border-radius:50%;background:var(--papel);
  box-shadow:inset 0 0 0 2px var(--tinta), inset 0 0 0 6px var(--papel), inset 0 0 0 7px var(--terracota), 0 14px 22px -10px rgba(51,48,45,.55);
  display:flex;align-items:center;justify-content:center;transition:transform .35s var(--curva)}
.wa-flota .sello-wa svg{width:28px;height:28px}
.wa-flota .anillo{position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed var(--terracota);animation:girar 18s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.wa-flota .nota{
  position:absolute;right:calc(100% + 14px);top:50%;white-space:nowrap;
  transform:translate3d(8px,-50%,0);opacity:0;pointer-events:none;
  font-size:.8rem;line-height:1.3;text-align:right;color:var(--tinta);
  transition:opacity .3s var(--curva), transform .3s var(--curva);
}
.wa-flota .nota b{display:block;font-size:.95rem}
.wa-flota .nota::after{content:"";position:absolute;left:calc(100% + 4px);top:50%;width:10px;border-top:1.5px solid var(--terracota)}
.wa-flota:hover .sello-wa,.wa-flota:focus-visible .sello-wa{transform:rotate(-8deg) scale(1.06)}
.wa-flota:hover .nota,.wa-flota:focus-visible .nota{opacity:1;transform:translate3d(0,-50%,0)}
.wa-flota:focus-visible{outline:2px dashed var(--tinta);outline-offset:14px;border-radius:50%}

@media (max-width:980px){
  .cierre{grid-template-columns:1fr;justify-items:start}
  .cel{justify-self:center;margin-top:20px;margin-bottom:30px}
}
@media (max-width:900px){
  .portada{grid-template-columns:1fr}
  .escenario{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:14px;padding-top:14px;height:100svh}
  .plano-casa{transform:none}
  .ficha{align-self:start}
  .pasos{min-height:186px}
  .ficha{padding-right:96px}
  .carril{width:96px;right:-12px;top:-10%;height:130%}
  .paso h2{font-size:clamp(1.3rem,5.8vw,1.8rem);margin-top:8px}
  .paso p{font-size:.92rem;margin-top:10px}
}
@media (max-width:560px){
  .cab img{height:38px}
  .marca-nav small{display:none}
  .marca-nav b{font-size:.8rem}
  .cab .cota-cab span{font-size:.5rem;letter-spacing:.12em}
  .lapiz{width:170px;left:auto;right:6%;bottom:2%}
  .mancha-cafe{right:6%;bottom:auto;top:30%}
  .cab nav{gap:8px}
  .marca{grid-template-columns:minmax(0,.8fr) auto minmax(0,1.3fr)}
  .leyenda span:last-child{display:none}
  .cara .datos{padding:14px 12px 10px}
  .cara h3{font-size:1.15rem}
  .cara .rol{font-size:.9rem}
  .cara .gira{font-size:.62rem;padding-right:34px}
  .cara.frente::after{width:34px;height:34px}
  .wa-flota span{display:none}
  .pizarra{padding-top:76px}
  .pie{padding-bottom:110px}
  .llave-plano{width:84px}
  .wa-flota{padding:13px}
  .cajetin-pl{font-size:.5rem;letter-spacing:.08em;white-space:nowrap}
  .cajetin-pl span{padding:7px 8px}
}
@media (max-width:560px){
    .cab{padding:14px 16px 24px}
  .cab img{height:34px}
  .cab nav{gap:18px;padding-top:4px}
  .marca-nav{padding-bottom:9px}
  .marca-nav b{font-size:.78rem;letter-spacing:.03em}
  .cab .cota-cab{left:16px;right:16px;bottom:8px}
  .cab .cota-cab span{display:none}
    .portada{padding:10px 16px 56px;gap:30px}
  .portada .lamina{margin:0 6px;padding:14px 14px 10px}
  .portada .leyenda{margin-top:10px;font-size:.58rem}
  .portada h1{font-size:2.35rem;line-height:1.02}
  .portada .sub{font-size:1rem;line-height:1.62;margin-top:18px;max-width:none}
  .portada .sub strong{display:block;margin-bottom:4px}
  .acciones{margin-top:22px}
    .escenario{padding:12px 16px 20px;gap:18px}
  .plano-casa{padding:10px 10px 0}
  .ficha{align-self:center;padding:22px 74px 24px 20px;background:var(--papel);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 26px -18px rgba(51,48,45,.45);transform:rotate(.5deg);margin:0 4px}
  .ficha::before{content:"";position:absolute;top:-11px;left:22px;width:84px;height:24px;background:rgba(242,228,188,.85);transform:rotate(-4deg);clip-path:polygon(3% 0,97% 4%,100% 30%,97% 60%,100% 100%,2% 96%,0 65%,3% 35%)}
  .pasos{min-height:224px}
  .paso .lugar{font-size:.66rem;letter-spacing:.16em}
  .paso h2{font-size:1.55rem;line-height:1.14;margin-top:10px;max-width:none}
  .paso p{font-size:.94rem;line-height:1.58;margin-top:12px}
  .carril{width:68px;right:0;top:4%;height:92%}
  .bajada-huellas{height:34vh;margin-bottom:-40px}
    .asesoras{padding:56px 16px 50px}
  .titulo-asesoras{font-size:1.8rem!important}
  .pizarra{margin-top:30px;padding:70px 14px 30px;border-radius:14px}
  .tarjetas{gap:44px}
  .tarjeta{width:100%}
    .cierre{margin:40px 10px 0;padding:58px 22px 120px;gap:18px}
  .llave-plano{position:absolute;top:16px;right:20px;width:42px;transform:rotate(14deg)}
  .nota-mano{font-size:1.35rem}
  .cierre h2{font-size:2rem;line-height:1.06;max-width:none}
  .cierre .bajada{font-size:.98rem;margin-top:14px}
  .cel{width:78%;margin:16px auto 34px;transform:rotate(1.5deg)}
  .mancha-cafe{display:none}
  .lapiz{width:150px;left:18px;right:auto;bottom:22px}
  .cinta-cierre{width:96px;height:28px}
    .pie{flex-direction:column;align-items:flex-start;gap:6px;padding:28px 20px 120px;font-size:.8rem;line-height:1.5}
  .wa-flota{width:58px;height:58px;right:14px;bottom:14px}
  .wa-flota .sello-wa svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .contorno,.llave-plano .tr,.titulo-asesoras .subraya path{stroke-dashoffset:0}
  .huella{transition:none}
  .relleno,.cota,.cota-txt,.nombre span,.llave-plano .ct,.llave-plano text{opacity:1;transform:none}
  .raya{transform:none}
}
.pie .firma-et{display:inline-grid;justify-items:start;line-height:1;text-decoration:none;color:var(--pizarra)}
.firma-et small{font-family:"Caveat",cursive;font-weight:500;font-size:.95rem;color:#7C5444}
.firma-et b{font-family:"Caveat",cursive;font-weight:600;font-size:1.55rem;transform:rotate(-3deg);transform-origin:0 50%;filter:url(#lapiz)}
.firma-et svg{width:118px;height:11px;margin-top:-3px;overflow:visible}
.firma-et path{fill:none;stroke:var(--acento);stroke-width:1.8;stroke-linecap:round;filter:url(#lapiz);stroke-dasharray:200;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--curva)}
.firma-et:hover path,.firma-et:focus-visible path{stroke-dashoffset:200}
.firma-et:focus-visible{outline:2px dashed var(--acento);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.firma-et path{transition:none}}
@media (max-width:560px){.cab nav .nav-ig{display:none}}
@media (min-width:561px){.pie:has(~ .wa-flota){padding-right:clamp(120px,10vw,150px)}}