:root{
  --lav:#D1BCDC; --lav-2:#E3D2EB; --lav-soft:#F7F1FA;
  --navy:#2B415D; --navy-deep:#1B2C42;
  --sand:#EFE5DA; --sand-soft:#FBF6F1;
  --cream:#FDFBFC; --white:#fff;
  --ink:#292430; --muted:#635D6E;
  --wa:#25D366;
  --r:16px; --rl:28px;
  --arch:52% 52% 14px 14px / 32% 32% 14px 14px;
  --max:1160px;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink); overflow-x:hidden;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:'Fraunces','Georgia',serif; font-weight:500; line-height:1.1; margin:0;
  font-variation-settings:'opsz' 96; letter-spacing:-.015em;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px}
.sec{padding:96px 0; position:relative}
.eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--navy); opacity:.6; margin:0;
}
.sec-head{max-width:660px; margin:0 auto 54px; text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.1rem); color:var(--navy); margin:.6rem 0 .2rem}
.sec-head h2 em{font-style:italic; font-weight:400; color:var(--lav)}
.sec-head p{color:var(--muted); margin:1rem 0 0}
.squiggle{display:block; margin:10px auto 0; width:132px; height:14px; overflow:visible}
.squiggle path{
  fill:none; stroke:var(--lav); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:150; stroke-dashoffset:150;
}
.in .squiggle path, .squiggle.in path{stroke-dashoffset:0; transition:stroke-dashoffset 1s .25s var(--ease)}

/* ---------- Botones ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.98rem;
  padding:15px 30px; border-radius:999px; border:1.6px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
}
.btn::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.22);
  transform:translateX(-101%) skewX(-18deg); transition:transform .55s var(--ease);
}
.btn:hover::after{transform:translateX(101%) skewX(-18deg)}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--navy); color:#fff; box-shadow:0 8px 22px rgba(43,65,93,.26)}
.btn-primary:hover{background:var(--navy-deep); box-shadow:0 14px 32px rgba(43,65,93,.34)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--lav)}
.btn-ghost:hover{background:var(--lav-soft); border-color:var(--navy)}
.btn-wa{background:var(--wa); color:#06301a; box-shadow:0 8px 22px rgba(37,211,102,.34)}
.btn-wa:hover{background:#1cbb57}
/* Los iconos dentro de botones se atan al texto: si no, se estiran al ancho del botón. */
.btn svg{width:1.2em; height:1.2em; flex:none}
.btn-sm{padding:12px 22px; font-size:.92rem}
.btn-block{width:100%}

/* ---------- Barra de progreso ---------- */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--lav),var(--navy)); transition:width .1s linear;
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:70; background:rgba(253,251,252,.86);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
header.stuck{border-bottom-color:var(--lav-2); box-shadow:0 4px 24px rgba(43,65,93,.07)}
.nav{display:flex; align-items:center; gap:22px; height:82px; transition:height .3s var(--ease)}
header.stuck .nav{height:66px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; min-width:0}
.brand img{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
  transition:width .3s var(--ease), height .3s var(--ease), transform .5s var(--ease);
}
header.stuck .brand img{width:38px; height:38px}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand b{
  font-family:'Fraunces',serif; font-size:1.24rem; color:var(--navy); font-weight:600;
  letter-spacing:-.02em; display:block; line-height:1.05;
}
.brand i{
  font-style:normal; display:block; font-size:.66rem; color:var(--muted);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.nav-links{display:flex; gap:30px}
.nav-links a{
  position:relative; text-decoration:none; font-size:.95rem; font-weight:600; color:var(--navy); padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--lav);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}

/* ---------- Decoracion ---------- */
.blob{position:absolute; border-radius:50%; filter:blur(46px); pointer-events:none; z-index:0}
.fly{position:absolute; pointer-events:none; color:var(--navy); opacity:.16; z-index:1}
.fly svg{width:100%; height:100%}
.anim .fly{animation:flutter 9s ease-in-out infinite}
.anim .fly.f2{animation-duration:11.5s; animation-delay:-3s}
.anim .fly.f3{animation-duration:13s; animation-delay:-6s}
@keyframes flutter{
  0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}
  33%{transform:translate3d(16px,-22px,0) rotate(7deg)}
  66%{transform:translate3d(-12px,-10px,0) rotate(-3deg)}
}
.anim .blob{animation:drift 17s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(28px,-32px,0) scale(1.12)}}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(168deg,var(--lav-soft) 0%,var(--white) 58%)}
.hero .blob.b1{width:560px; height:560px; right:-170px; top:-210px; background:var(--lav); opacity:.5}
.hero .blob.b2{width:420px; height:420px; left:-190px; bottom:-230px; background:var(--sand); opacity:.6}
.hero .fly.f1{width:58px; height:58px; left:4%;  top:22%}
.hero .fly.f2{width:34px; height:34px; left:44%; top:12%}
.hero .fly.f3{width:44px; height:44px; right:6%; bottom:14%}
.hero-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:60px;
  align-items:center; padding:84px 24px 96px;
}
.hero h1{font-size:clamp(2.7rem,6vw,4.5rem); color:var(--navy); margin:1rem 0 1.1rem}
.hero h1 em{
  font-style:italic; font-weight:300; color:var(--lav);
  display:inline-block; position:relative;
}
.hero h1 em::after{
  content:""; position:absolute; left:2%; right:2%; bottom:.1em; height:2px; background:var(--lav);
  transform:scaleX(0); transform-origin:left;
}
.anim .hero h1 em::after{animation:lineIn .9s 1.1s var(--ease) forwards}
@keyframes lineIn{to{transform:scaleX(1)}}
.hero p.lead{font-size:1.14rem; color:var(--muted); max-width:33em; margin:0 0 34px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px}
.hero-trust{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.75);
  border:1px solid var(--lav-2); color:var(--navy); font-size:.85rem; font-weight:600;
  padding:9px 16px; border-radius:999px; backdrop-filter:blur(6px);
  transition:transform .25s var(--ease), border-color .25s ease;
}
.chip:hover{transform:translateY(-2px); border-color:var(--navy)}
.chip svg{width:15px; height:15px; flex:none; color:var(--lav)}
.hero-media{position:relative}
.hero-photo{
  border-radius:var(--arch); overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 30px 70px rgba(43,65,93,.2); position:relative; z-index:2;
}
.hero-photo img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.hero-media:hover .hero-photo img{transform:scale(1.05)}
.hero-frame{
  position:absolute; inset:22px -22px -22px 22px; border:1.6px solid var(--lav);
  border-radius:var(--arch); z-index:1;
}
.hero-tag{
  position:absolute; left:-34px; bottom:38px; z-index:3; background:#fff;
  border-radius:18px; padding:14px 20px; box-shadow:0 14px 38px rgba(43,65,93,.17);
  display:flex; align-items:center; gap:12px;
}
.hero-tag img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.hero-tag b{display:block; font-family:'Fraunces',serif; color:var(--navy); font-size:1rem; line-height:1.1}
.hero-tag span{font-size:.76rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.anim .hero-tag{animation:floaty 5.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}

/* Entrada escalonada del hero */
.anim .hero-grid > div > *{opacity:0; animation:rise .9s var(--ease) forwards}
.anim .hero-grid > div > *:nth-child(1){animation-delay:.1s}
.anim .hero-grid > div > *:nth-child(2){animation-delay:.22s}
.anim .hero-grid > div > *:nth-child(3){animation-delay:.34s}
.anim .hero-grid > div > *:nth-child(4){animation-delay:.46s}
.anim .hero-grid > div > *:nth-child(5){animation-delay:.58s}
.anim .hero-media{opacity:0; animation:rise 1.1s .3s var(--ease) forwards}
@keyframes rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}

/* ---------- Marquesina ---------- */
.marquee{background:var(--navy); color:var(--lav); padding:17px 0; overflow:hidden; white-space:nowrap}
.marquee-track{display:inline-flex; gap:0; will-change:transform}
.anim .marquee-track{animation:slide 26s linear infinite}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee span{
  font-family:'Fraunces',serif; font-style:italic; font-size:1.06rem; padding:0 26px;
  display:inline-flex; align-items:center; gap:26px;
}
.marquee span::after{content:"✦"; font-style:normal; font-size:.72rem; opacity:.6}

/* ---------- Beneficios ---------- */
.bens{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.ben{
  text-align:center; padding:34px 22px; border-radius:var(--rl); background:var(--white);
  border:1px solid var(--lav-2); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.ben:hover{transform:translateY(-8px); box-shadow:0 22px 46px rgba(43,65,93,.11); border-color:var(--lav)}
.ben-ico{
  width:62px; height:62px; margin:0 auto 18px; border-radius:50%;
  background:var(--lav-soft); display:grid; place-items:center; color:var(--navy);
  transition:background .35s ease, transform .5s var(--ease);
}
.ben:hover .ben-ico{background:var(--lav); transform:rotate(-8deg) scale(1.08)}
.ben-ico svg{width:26px; height:26px}
.ben h3{font-size:1.14rem; color:var(--navy); margin-bottom:8px}
.ben p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.6}

/* ---------- Catalogo ---------- */
.catalogo{background:linear-gradient(180deg,var(--sand-soft),var(--white))}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.card{
  background:#fff; border-radius:var(--rl); overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--lav-2);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-10px); box-shadow:0 28px 58px rgba(43,65,93,.16)}
.card-img{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--lav-soft)}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.card:hover .card-img img{transform:scale(1.08)}
.card-price{
  position:absolute; top:16px; right:16px; background:#fff; color:var(--navy);
  font-family:'Fraunces',serif; font-weight:600; font-size:1.04rem;
  padding:8px 16px; border-radius:999px; box-shadow:0 6px 18px rgba(43,65,93,.16);
  transition:transform .35s var(--ease), background .35s ease, color .35s ease;
}
.card:hover .card-price{transform:scale(1.07); background:var(--navy); color:#fff}
.card-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.card-body h3{font-size:1.3rem; color:var(--navy); margin-bottom:10px}
.card-body p{font-size:.93rem; color:var(--muted); margin:0 0 18px; flex:1}
.variants{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px}
.variants small{
  font-size:.74rem; font-weight:600; color:var(--navy); background:var(--lav-soft);
  border:1px solid var(--lav-2); padding:5px 11px; border-radius:999px;
  transition:background .25s ease, transform .25s var(--ease);
}
.variants small:hover{background:var(--lav); transform:translateY(-2px)}
.card-mas{background:var(--lav-soft); border-color:var(--lav); text-align:center; justify-content:center}
.cat-note{text-align:center; margin-top:46px; color:var(--muted); font-size:.95rem}
.cat-note a{color:var(--navy); font-weight:700}

/* ---------- Como pedir ---------- */
.pasos-sec{background:var(--navy); color:#fff; overflow:hidden}
.pasos-sec .blob{width:520px; height:520px; left:-160px; top:-200px; background:var(--lav); opacity:.16}
.pasos-sec .sec-head h2{color:#fff}
.pasos-sec .sec-head .eyebrow{color:var(--lav); opacity:1}
.pasos-sec .sec-head p{color:rgba(255,255,255,.68)}
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; z-index:2}
.paso{position:relative; padding:34px 28px; border-radius:var(--rl); background:rgba(255,255,255,.06); border:1px solid rgba(209,188,220,.22); transition:background .35s ease, transform .35s var(--ease)}
.paso:hover{background:rgba(255,255,255,.11); transform:translateY(-6px)}
.paso-n{
  font-family:'Fraunces',serif; font-style:italic; font-size:3rem; color:var(--lav);
  opacity:.5; line-height:1; margin-bottom:10px; display:block;
}
.paso h3{font-size:1.2rem; margin-bottom:8px}
.paso p{margin:0; font-size:.93rem; color:rgba(255,255,255,.7)}

/* ---------- Historia ---------- */
.story-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:64px; align-items:center}
.story-media{position:relative}
.story-media .ph{border-radius:var(--arch); overflow:hidden; aspect-ratio:3/4; box-shadow:0 26px 58px rgba(43,65,93,.16)}
.story-media .ph img{width:100%; height:100%; object-fit:cover}
.story-media .ring{position:absolute; inset:-18px 18px 18px -18px; border:1.6px solid var(--lav); border-radius:var(--arch)}
.story h2{font-size:clamp(2.1rem,4.4vw,3rem); color:var(--navy); margin:.6rem 0 1.2rem}
.story h2 em{font-style:italic; font-weight:300; color:var(--lav)}
.story p{color:var(--muted); margin:0 0 1.15rem}
.pull{
  position:relative; margin:30px 0; padding:6px 0 6px 28px; border-left:2px solid var(--lav);
  font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; color:var(--navy);
  font-weight:400; line-height:1.45;
}
.mv{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px}
.mv div{
  background:var(--lav-soft); border:1px solid var(--lav-2); border-radius:var(--r); padding:24px;
  transition:transform .35s var(--ease), background .35s ease;
}
.mv div:hover{transform:translateY(-5px); background:#fff}
.mv h3{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); opacity:.6; margin-bottom:10px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700}
.mv p{font-size:.92rem; margin:0}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; text-align:center; padding:100px 0; background:linear-gradient(140deg,var(--lav-soft),var(--sand-soft))}
.cta .blob.c1{width:520px; height:520px; left:-140px; bottom:-260px; background:var(--lav); opacity:.55}
.cta .blob.c2{width:400px; height:400px; right:-140px; top:-190px; background:var(--sand); opacity:.7}
.cta .fly.f1{width:52px; height:52px; left:9%; top:20%}
.cta .fly.f2{width:36px; height:36px; right:11%; bottom:22%}
.cta-inner{position:relative; z-index:2; max-width:660px; margin:0 auto}
.cta h2{font-size:clamp(2.2rem,4.8vw,3.3rem); color:var(--navy); margin:.7rem 0 1.1rem}
.cta h2 em{font-style:italic; font-weight:300; color:var(--lav)}
.cta p{color:var(--muted); margin:0 0 34px}

/* ---------- Contacto ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.contact-list a{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:#fff; border:1px solid var(--lav-2); border-radius:var(--r); padding:17px 20px;
  transition:border-color .3s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contact-list a:hover{border-color:var(--lav); transform:translateX(6px); box-shadow:0 12px 30px rgba(43,65,93,.09)}
.contact-list .ico{
  flex:none; width:44px; height:44px; border-radius:50%; background:var(--lav-soft);
  display:grid; place-items:center; color:var(--navy); transition:background .3s ease}
.contact-list a:hover .ico{background:var(--lav)}
.contact-list .ico svg{width:19px; height:19px}
.contact-list b{display:block; font-family:'Fraunces',serif; color:var(--navy); font-size:1.05rem; font-weight:600}
.contact-list span{font-size:.87rem; color:var(--muted)}
.contact-side{background:var(--navy); color:#fff; border-radius:var(--rl); padding:40px; position:relative; overflow:hidden}
.contact-side .blob{width:320px; height:320px; right:-130px; bottom:-160px; background:var(--lav); opacity:.22}
.contact-side > *{position:relative; z-index:2}
.contact-side h3{font-size:1.5rem; margin-bottom:12px}
.contact-side p{color:rgba(255,255,255,.72); font-size:.95rem; margin:0 0 26px}
.contact-side .btn-primary{background:var(--lav); color:var(--navy); box-shadow:none}
.contact-side .btn-primary:hover{background:#fff}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep); color:rgba(255,255,255,.62); padding:52px 0 32px; font-size:.87rem}
.foot-top{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.11)}
.foot-top .brand b{color:#fff}
.foot-top .brand i{color:var(--lav)}
.foot-social{display:flex; gap:11px}
.foot-social a{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff;
  transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
.foot-social a:hover{background:var(--lav); color:var(--navy); transform:translateY(-4px)}
.foot-social svg{width:18px; height:18px}
.foot-bot{padding-top:24px; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:inline-flex; align-items:center; gap:11px;
  background:var(--wa); color:#06301a; text-decoration:none;
  font-weight:600; font-size:.94rem; padding:15px 22px; border-radius:999px;
  box-shadow:0 10px 30px rgba(37,211,102,.44); transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.05)}
.wa-float svg{width:23px; height:23px; flex:none}
.anim .wa-float{animation:pulso 2.6s ease-out infinite}
@keyframes pulso{0%{box-shadow:0 12px 34px rgba(37,211,102,.46), 0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 12px 34px rgba(37,211,102,.46), 0 0 0 16px rgba(37,211,102,0)}}

/* ---------- Reveal ---------- */
.anim .rv{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.anim .rv.in{opacity:1; transform:none}
.anim .rv-s{opacity:0; transform:translateY(24px) scale(.97); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.anim .rv-s.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:52px; padding:60px 24px 76px}
  .hero-media{max-width:420px; margin:0 auto}
  .hero-frame{inset:18px -14px -18px 14px}
  .bens{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .pasos{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr; gap:40px}
  .story-media{max-width:360px; margin:0 auto}
  .contact-grid{grid-template-columns:1fr; gap:34px}
  .nav-links{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .sec{padding:66px 0}
  .nav{height:66px; gap:12px}
  header.stuck .nav{height:60px}
  .brand img{width:38px; height:38px}
  .brand{overflow:hidden}
  .brand > span{min-width:0; overflow:hidden}
  .brand b{font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
  .brand i{display:none}
  header .btn-sm{padding:11px 17px; font-size:.86rem}
  .cards{grid-template-columns:1fr}
  .bens{grid-template-columns:1fr}
  .mv{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 100%}
  .hero-tag{left:-8px; bottom:-18px; padding:11px 15px}
  .contact-side{padding:30px}
  .wa-float span{display:none}
  .wa-float{padding:17px; border-radius:50%}
  .marquee span{font-size:.95rem; padding:0 18px}
  .hero .fly.f2, .hero .fly.f3{display:none}
  .hero .fly.f1{width:40px; height:40px; left:auto; right:4%; top:6%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   PÁGINA DE PRODUCTO
   Ligera a propósito: una pantalla que vende, sin ruido.
   ============================================================ */
.p-top{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg,var(--lav-soft) 0%,var(--white) 62%);
  padding:44px 0 76px;
}
.p-top .blob.p1{width:520px; height:520px; right:-180px; top:-220px; background:var(--lav); opacity:.45}
.p-migas{
  position:relative; z-index:2; display:flex; align-items:center; gap:8px;
  font-size:.84rem; color:var(--muted); margin-bottom:26px;
}
.p-migas a{text-decoration:none; color:var(--navy); font-weight:600}
.p-migas a:hover{text-decoration:underline}
.p-migas span{opacity:.5}

.p-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}

.p-galeria{position:relative}
.p-foto{
  border-radius:var(--arch); overflow:hidden; aspect-ratio:4/5; background:var(--lav-soft);
  box-shadow:0 30px 70px rgba(43,65,93,.2);
}
.p-foto img{width:100%; height:100%; object-fit:cover; transition:opacity .35s var(--ease)}
.p-marco{position:absolute; inset:20px -20px -20px 20px; border:1.6px solid var(--lav); border-radius:var(--arch); z-index:-1}
.p-miniaturas{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.p-miniaturas button{
  width:64px; height:64px; padding:0; border-radius:14px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:none; transition:border-color .25s ease, transform .25s var(--ease);
}
.p-miniaturas button img{width:100%; height:100%; object-fit:cover}
.p-miniaturas button:hover{transform:translateY(-3px)}
.p-miniaturas button[aria-current="true"]{border-color:var(--navy)}

.p-info .eyebrow{margin-bottom:14px}
.p-info h1{font-size:clamp(2rem,4.4vw,3.1rem); color:var(--navy); margin:0 0 16px}
.p-info h1 em{font-style:italic; font-weight:300; color:var(--lav)}
.p-desc{font-size:1.06rem; color:var(--muted); margin:0 0 26px}

.p-precio{display:flex; align-items:baseline; gap:12px; margin-bottom:26px; flex-wrap:wrap}
.p-precio b{font-family:'Fraunces',serif; font-size:2.5rem; font-weight:600; color:var(--navy); line-height:1}
.p-precio small{font-size:.85rem; color:var(--muted); font-weight:600}
.p-agotado{
  display:inline-flex; align-items:center; gap:7px; background:#FEF3F2; color:#B42318;
  border:1px solid #FDA29B; padding:8px 16px; border-radius:999px; font-size:.85rem; font-weight:700;
}

.p-opciones{margin-bottom:26px}
.p-opciones h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy); opacity:.65; font-weight:700; margin-bottom:10px;
}
.p-chips{display:flex; flex-wrap:wrap; gap:8px}
.p-chips button{
  font:inherit; font-size:.88rem; font-weight:600; color:var(--navy); cursor:pointer;
  background:#fff; border:1.5px solid var(--lav-2); padding:9px 17px; border-radius:999px;
  transition:border-color .22s ease, background .22s ease, transform .22s var(--ease);
}
.p-chips button:hover{transform:translateY(-2px); border-color:var(--lav)}
.p-chips button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}

.p-puntos{list-style:none; padding:0; margin:0 0 30px; display:grid; gap:12px}
.p-puntos li{display:flex; gap:12px; align-items:flex-start; font-size:.97rem; color:var(--ink)}
.p-puntos svg{width:20px; height:20px; flex:none; color:var(--lav); margin-top:2px}

.p-cta{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:24px}
.p-cta .btn{font-size:1.02rem; padding:17px 32px}
.p-nota{font-size:.86rem; color:var(--muted); display:flex; align-items:center; gap:8px}
.p-nota svg{width:16px; height:16px; color:var(--lav); flex:none}

/* Tira de confianza */
.p-tira{background:var(--navy); color:#fff; padding:30px 0}
.p-tira .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.p-tira div{display:flex; gap:13px; align-items:center}
.p-tira .ic{
  width:42px; height:42px; border-radius:50%; background:rgba(209,188,220,.18);
  display:grid; place-items:center; color:var(--lav); flex:none;
}
.p-tira .ic svg{width:20px; height:20px}
.p-tira b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; font-weight:600}
.p-tira span{font-size:.83rem; color:rgba(255,255,255,.66)}

/* Detalle largo */
.p-detalle{padding:70px 0}
.p-detalle .caja{max-width:720px; margin:0 auto}
.p-detalle h2{font-size:clamp(1.7rem,3.4vw,2.3rem); color:var(--navy); margin-bottom:18px; text-align:center}
.p-detalle p{color:var(--muted); margin:0 0 1.1rem}

/* Cierre */
.p-cierre{
  background:linear-gradient(140deg,var(--lav-soft),var(--sand-soft));
  text-align:center; padding:74px 0; position:relative; overflow:hidden;
}
.p-cierre .blob{width:440px; height:440px; left:50%; bottom:-260px; translate:-50% 0; background:var(--lav); opacity:.5}
.p-cierre .wrap{position:relative; z-index:2; max-width:600px}
.p-cierre h2{font-size:clamp(1.8rem,3.8vw,2.6rem); color:var(--navy); margin-bottom:12px}
.p-cierre h2 em{font-style:italic; font-weight:300; color:var(--lav)}
.p-cierre p{color:var(--muted); margin:0 0 28px}

/* Otros productos */
.p-otros{padding:70px 0; background:var(--sand-soft)}
.p-otros-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.p-mini{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--lav-2);
  border-radius:var(--rl); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.p-mini:hover{transform:translateY(-8px); box-shadow:0 24px 50px rgba(43,65,93,.14)}
.p-mini .im{aspect-ratio:1/1; overflow:hidden; background:var(--lav-soft)}
.p-mini .im img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.p-mini:hover .im img{transform:scale(1.07)}
.p-mini .tx{padding:18px 20px 22px}
.p-mini h3{font-size:1.1rem; color:var(--navy); margin-bottom:5px}
.p-mini span{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--navy); font-weight:600}

@media (max-width:900px){
  .p-grid{grid-template-columns:1fr; gap:40px}
  .p-galeria{max-width:400px; margin:0 auto}
  .p-marco{inset:16px -12px -16px 12px}
  .p-tira .wrap{grid-template-columns:1fr; gap:18px}
  .p-otros-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .p-top{padding:26px 0 56px}
  .p-cta .btn{flex:1 1 100%}
  .p-precio b{font-size:2.1rem}
  .p-otros-grid{grid-template-columns:1fr}
  .p-detalle{padding:52px 0}
  .p-otros{padding:52px 0}
}

/* Enlaces de la tarjeta hacia la página del producto */
a.card-img{display:block}
.card-link{text-decoration:none; transition:color .25s ease}
.card-link:hover{color:var(--lav)}
.card-ver{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; align-self:flex-start;
  font-size:.86rem; font-weight:600; color:var(--navy); text-decoration:none; opacity:.72;
  transition:opacity .25s ease, gap .25s var(--ease);
}
.card-ver:hover{opacity:1; gap:10px}
.card-ver svg{width:15px; height:15px}

/* --- Contacto compacto: una sola caja, sin sección kilométrica --- */
.contacto-sec{padding:70px 0}
.contacto-caja{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:44px; align-items:center;
  background:var(--cream); border:1px solid var(--lav-2); border-radius:var(--rl); padding:40px 42px;
}
.contacto-izq h2{font-size:clamp(1.7rem,3vw,2.3rem); color:var(--navy); margin:.5rem 0 .8rem}
.contacto-izq > p{color:var(--muted); font-size:.95rem; margin:0 0 22px}
.contacto-pie{margin:16px 0 0!important; font-size:.82rem; color:var(--muted)}
.contacto-der{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.canal{
  display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0;
  background:#fff; border:1px solid var(--lav-2); border-radius:14px; padding:12px 14px;
  transition:border-color .28s ease, transform .28s var(--ease), box-shadow .28s var(--ease);
}
.canal:hover{border-color:var(--lav); transform:translateY(-3px); box-shadow:0 10px 24px rgba(43,65,93,.1)}
.canal .ic{flex:none; width:34px; height:34px; border-radius:50%; background:var(--lav-soft);
  display:grid; place-items:center; color:var(--navy)}
.canal .ic svg{width:16px; height:16px}
.canal .tx{min-width:0}
.canal b{display:block; font-family:'Fraunces',serif; color:var(--navy); font-size:.94rem; font-weight:600; line-height:1.2}
.canal small{display:block; color:var(--muted); font-size:.78rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
@media (max-width:980px){
  .contacto-caja{grid-template-columns:1fr; gap:30px; padding:34px 28px}
}
@media (max-width:620px){
  .contacto-sec{padding:52px 0}
  .contacto-der{grid-template-columns:1fr}
  .contacto-caja{padding:26px 22px}
}