/* ==========================================================================
   15 · Vitrina de regalos
   Para tiendas multimarca donde lo que se vende es el detalle: moda, flores,
   fragancias, casa. Índigo profundo con oro, y un catálogo que cuelga de una
   percha como las etiquetas de regalo de una tienda.
   ========================================================================== */

:root{
  --indigo:var(--marca-1, #2A347D);
  --indigo-hondo:#1B2255;
  --indigo-noche:#141A42;
  --oro:var(--marca-2, #C28734);
  --oro-claro:#E0B871;
  --papel:#FBF8F3;
  --papel-2:#F4EEE4;
  --tinta:#1B1F33;
  --tinta-suave:#4E5470;
  --gris:#8A8FA6;
  --linea:rgba(27,31,51,.14);
  --linea-oro:rgba(194,135,52,.4);
  --linea-clara:rgba(255,255,255,.16);
  --ease:cubic-bezier(.22,.75,.28,1);
  --r:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--papel); color:var(--tinta); line-height:1.68;
  -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.12; font-weight:500; letter-spacing:-.015em}
p{margin:0 0 1rem}

/* Este arquetipo no usa manchas: el fondo es papel liso con filetes de oro */
.blob{display:none !important}

.wrap{width:min(1240px,92vw); margin:0 auto}
.sec{padding:112px 0; position:relative}
.eyebrow{font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oro); margin:0 0 20px; font-weight:600}
.filete{width:56px; height:1px; background:var(--oro); margin:22px 0}
.centrado .filete{margin-left:auto; margin-right:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border-radius:var(--r); text-decoration:none; font-weight:600;
  font-size:.86rem; letter-spacing:.06em; border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-primary{background:var(--oro); color:#201606; border-color:var(--oro)}
.btn-primary:hover{transform:translateY(-3px); background:var(--oro-claro)}
.btn-ghost{background:transparent; color:var(--papel); border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{border-color:var(--oro); color:var(--oro)}
.btn-linea{background:transparent; color:var(--indigo); border-color:var(--indigo)}
.btn-linea:hover{background:var(--indigo); color:var(--papel)}
.btn-wa{background:#25D366; color:#04331d; border-color:#25D366}
.btn-wa:hover{transform:translateY(-3px)}
.btn-sm{padding:11px 22px; font-size:.78rem}

.chip{display:inline-flex; align-items:center; gap:9px; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(251,248,243,.74)}
.chip svg{width:15px; height:15px; color:var(--oro)}

/* ---------- Encabezado ---------- */
#hdr{position:sticky; top:0; z-index:60; background:rgba(27,34,85,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--linea-oro)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:26px; height:82px;
  transition:height .3s var(--ease)}
header.stuck .nav{height:66px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0}
.brand img{width:44px; height:44px; object-fit:contain; flex:none;
  background:var(--papel); border-radius:50%; padding:5px}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-size:1.1rem; color:var(--papel); font-weight:500; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.brand i{font-style:normal; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--oro)}
.nav-links{display:flex; gap:32px}
.nav-links a{position:relative; text-decoration:none; color:rgba(251,248,243,.8);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; padding:6px 0;
  transition:color .25s}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--oro); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease)}
.nav-links a:hover{color:var(--papel)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}

/* ---------- 1 · Portada en tríptico ---------- */
.v-hero{background:var(--indigo); color:var(--papel); position:relative; overflow:hidden}
.v-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(224,184,113,.16), transparent 70%),
    linear-gradient(180deg, var(--indigo) 0%, var(--indigo-hondo) 100%)}
.v-triptico{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.25fr 1fr;
  min-height:min(80vh,660px)}
.v-panel{position:relative; overflow:hidden; border-left:1px solid var(--linea-oro)}
.v-panel:first-child{border-left:0}
.v-panel img{width:100%; height:100%; object-fit:cover; opacity:.82;
  transition:transform 1.4s var(--ease), opacity .6s}
.v-panel:hover img{transform:scale(1.05); opacity:1}
.v-centro{display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:76px 42px; border-left:1px solid var(--linea-oro);
  border-right:1px solid var(--linea-oro)}
.v-centro h1{font-size:clamp(2.1rem,4.4vw,3.5rem); color:var(--papel); max-width:16ch}
.v-centro h1 em{font-style:italic; color:var(--oro-claro)}
.v-lead{margin:24px 0 0; max-width:40ch; color:rgba(251,248,243,.78); font-size:1rem}
.v-hero-cta{display:flex; gap:14px; margin:34px 0 0; flex-wrap:wrap; justify-content:center}
.v-firmas{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:center;
  margin-top:34px; padding-top:26px; border-top:1px solid var(--linea-oro)}

/* ---------- 2 · Cinta del eslogan ---------- */
.v-cinta{background:var(--oro); color:#241804; text-align:center}
.v-cinta p{margin:0; font-size:clamp(1rem,1.9vw,1.35rem); font-style:italic}
.v-cinta span{display:block; margin-top:10px; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; opacity:.72; font-style:normal}

/* ---------- 3 · Catálogo colgado de la percha ---------- */
.v-catalogo{background:var(--papel)}
.v-cab{text-align:center; max-width:52ch; margin:0 auto 18px}
.v-cab h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.v-cab h2 em{font-style:italic; color:var(--oro)}
.v-cab p{margin-top:18px; color:var(--tinta-suave)}

.v-percha{position:relative; margin-top:74px; padding-top:52px}
/* El hilo del que cuelgan las etiquetas */
.v-percha::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--oro) 12%, var(--oro) 88%, transparent)}
.v-rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:52px 34px}
.v-etiqueta{position:relative; display:flex; flex-direction:column}
/* cada etiqueta cuelga a distinta altura, como en una vitrina */
.v-etiqueta:nth-child(2){margin-top:44px}
.v-etiqueta:nth-child(3){margin-top:22px}
.v-etiqueta:nth-child(5){margin-top:34px}
/* el hilo que la une a la percha */
.v-hilo{position:absolute; left:50%; top:-52px; width:1px; height:52px;
  background:var(--linea-oro); translate:-50% 0}
.v-etiqueta:nth-child(2) .v-hilo{top:-96px; height:96px}
.v-etiqueta:nth-child(3) .v-hilo{top:-74px; height:74px}
.v-etiqueta:nth-child(5) .v-hilo{top:-86px; height:86px}
.v-hilo::after{content:""; position:absolute; bottom:-5px; left:50%; width:9px; height:9px;
  border:1px solid var(--oro); border-radius:50%; background:var(--papel); translate:-50% 0}

.v-foto{position:relative; display:block; overflow:hidden; background:var(--papel-2);
  border:1px solid var(--linea); border-radius:var(--r)}
.v-foto img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.2s var(--ease)}
.v-etiqueta:hover .v-foto img{transform:scale(1.05)}
.v-precio{position:absolute; left:14px; bottom:14px; z-index:3; background:var(--papel);
  color:var(--indigo); font-weight:600; font-size:.92rem; padding:8px 15px;
  border-radius:var(--r); border:1px solid var(--linea-oro)}
.v-ficha{padding:20px 2px 0}
.v-ficha h3{font-size:1.24rem; margin-bottom:8px}
.v-ficha h3 a{text-decoration:none}
.v-ficha h3 a:hover{color:var(--oro)}
.v-ficha p{font-size:.9rem; color:var(--gris); margin:0 0 16px}
.v-opciones{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.v-opciones small{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); border:1px solid var(--linea); border-radius:var(--r);
  padding:5px 11px}
.v-pie{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:16px; border-top:1px solid var(--linea)}
.v-ver{text-decoration:none; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--indigo); display:inline-flex; align-items:center; gap:8px}
.v-ver svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.v-ver:hover svg{transform:translateX(4px)}
.v-nota{margin-top:56px; text-align:center; font-size:.86rem; color:var(--gris)}

/* ---------- 4 · Ocasiones ---------- */
.v-ocasiones{background:var(--papel-2)}
.v-oca{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--linea); margin-top:52px}
.v-oca div{background:var(--papel-2); padding:38px 26px; text-align:center;
  transition:background .3s}
.v-oca div:hover{background:var(--papel)}
.v-oca b{display:block; font-size:1.06rem; margin-bottom:10px; font-weight:500}
.v-oca span{display:block; font-size:.86rem; color:var(--tinta-suave)}
.v-oca i{display:block; margin:0 auto 16px; width:26px; height:1px; background:var(--oro)}

/* ---------- 5 · Historia ---------- */
.v-historia{background:var(--indigo-hondo); color:var(--papel)}
.v-historia .wrap{display:grid; grid-template-columns:1fr 1.2fr; gap:76px; align-items:start}
.v-historia h2{font-size:clamp(1.9rem,3.8vw,2.8rem); color:var(--papel); margin-bottom:20px}
.v-historia h2 em{font-style:italic; color:var(--oro-claro)}
.v-historia p{color:rgba(251,248,243,.76)}
.v-historia .hist > summary{color:var(--oro-claro)}
.v-retrato{position:relative}
.v-retrato img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r)}
.v-retrato::after{content:""; position:absolute; inset:14px -14px -14px 14px; z-index:-1;
  border:1px solid var(--linea-oro); border-radius:var(--r)}
.v-mv{margin-top:36px; border-top:1px solid var(--linea-clara)}
.v-mv div{padding:24px 0; border-bottom:1px solid var(--linea-clara)}
.v-mv h3{font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--oro);
  margin-bottom:10px; font-weight:600}
.v-mv p{margin:0; font-size:.95rem}

/* ---------- 6 · Cierre ---------- */
.v-cierre{background:var(--papel); text-align:center}
.v-cierre h2{font-size:clamp(2rem,4.6vw,3.2rem); margin-bottom:18px}
.v-cierre h2 em{font-style:italic; color:var(--oro)}
.v-cierre > .wrap > p{max-width:56ch; margin:0 auto 30px; color:var(--tinta-suave)}
.v-pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea);
  margin-top:72px; text-align:left}
.v-pasos div{background:var(--papel); padding:36px 30px}
.v-pasos b{display:block; font-family:inherit; font-size:1.7rem; color:var(--oro);
  margin-bottom:14px; font-weight:500}
.v-pasos h3{font-size:1.04rem; margin-bottom:10px}
.v-pasos p{margin:0; font-size:.9rem; color:var(--tinta-suave)}

/* ---------- 7 · Contacto ---------- */
.v-contacto{background:var(--indigo); color:var(--papel); padding:88px 0}
.v-contacto .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.v-contacto h2{font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--papel); margin-bottom:16px}
.v-contacto h2 em{font-style:italic; color:var(--oro-claro)}
.v-canales{display:grid; gap:1px; background:var(--linea-clara);
  border:1px solid var(--linea-clara); border-radius:var(--r); overflow:hidden}
.v-canales a{display:flex; align-items:center; gap:16px; padding:18px 22px;
  background:var(--indigo); text-decoration:none; transition:background .3s}
.v-canales a:hover{background:var(--indigo-hondo)}
.v-canales svg{width:18px; height:18px; color:var(--oro); flex:none}
.v-canales .et{font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(251,248,243,.55); display:block}
.v-canales .va{color:var(--papel); font-size:.94rem}

footer{background:var(--indigo-noche); color:rgba(251,248,243,.7); padding:56px 0 42px}
.foot-top{display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--linea-clara)}
.foot-social{display:flex; gap:12px}
.foot-social a{width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--linea-clara); color:var(--papel);
  transition:border-color .3s, color .3s, transform .3s}
.foot-social a:hover{border-color:var(--oro); color:var(--oro); transform:translateY(-3px)}
.foot-social svg{width:17px; height:17px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:22px; font-size:.8rem}

/* ---------- Piezas compartidas, con el acento de este tema ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--oro),var(--oro-claro)); transition:width .1s linear}
.saltar{background:var(--indigo); color:var(--papel); border-radius:var(--r)}
.pista{color:rgba(251,248,243,.6)}
.wa-float{position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex;
  align-items:center; gap:10px; background:var(--indigo); color:var(--papel);
  text-decoration:none; font-weight:600; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; padding:17px 26px; border-radius:60px;
  border:1px solid var(--linea-oro); box-shadow:0 18px 40px rgba(20,26,66,.34);
  transition:transform .3s var(--ease), background .3s}
.wa-float:hover{transform:translateY(-3px); background:var(--indigo-hondo)}
.wa-float svg{width:20px; height:20px; flex:none; color:var(--oro)}
.anim .wa-float{animation:pulsoV 3.6s ease-out infinite}
@keyframes pulsoV{
  0%{box-shadow:0 18px 40px rgba(20,26,66,.34), 0 0 0 0 rgba(194,135,52,.42)}
  70%,100%{box-shadow:0 18px 40px rgba(20,26,66,.34), 0 0 0 15px rgba(194,135,52,0)}}
.insignia, .insignia-linea{border-radius:var(--r)}
.insignia-linea{background:var(--oro); color:#201606; font-weight:600}
.hist > summary{color:var(--oro)}
.barra-compra{border-top:1px solid var(--oro)}
.barra-compra .bc-txt b{color:var(--indigo)}

/* ---------- Página de producto ---------- */
.vp-cab{background:var(--indigo); color:var(--papel); padding:24px 0 2px}
/* margin:0 a propósito: el margen del párrafo se escapaba y abría una franja clara */
.crumbs{margin:0; display:flex; gap:10px; flex-wrap:wrap; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(251,248,243,.5)}
.crumbs a{text-decoration:none; color:rgba(251,248,243,.74)}
.crumbs a:hover{color:var(--oro)}
.vp-cuerpo{background:var(--indigo); color:var(--papel); padding:44px 0 104px}
.vp-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.vp-marco{position:relative}
.vp-marco img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
.vp-marco::after{content:""; position:absolute; inset:16px -16px -16px 16px; z-index:-1;
  border:1px solid var(--linea-oro); border-radius:var(--r)}
.vp-info h1{font-size:clamp(1.9rem,4vw,3rem); color:var(--papel); margin-bottom:18px}
.vp-info h1 em{font-style:italic; color:var(--oro-claro)}
.vp-info .rico{color:rgba(251,248,243,.78)}
.vp-info .rico-titulo{color:var(--oro); opacity:1}
.vp-precio{display:flex; align-items:baseline; gap:14px; margin:30px 0 6px}
.vp-precio b{font-size:clamp(1.9rem,4vw,2.6rem); color:var(--oro); font-weight:500}
.vp-precio small{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(251,248,243,.55)}
.vp-op{margin:26px 0 0}
.vp-op h3{font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro);
  margin-bottom:12px; font-weight:600}
.vp-chips{display:flex; flex-wrap:wrap; gap:9px}
.vp-chips button{background:transparent; color:rgba(251,248,243,.84);
  border:1px solid var(--linea-clara); border-radius:var(--r); padding:9px 17px;
  font:inherit; font-size:.84rem; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s}
.vp-chips button:hover{border-color:var(--oro); color:var(--oro)}
.vp-chips button[aria-pressed="true"]{background:var(--oro); color:#201606; border-color:var(--oro)}
.vp-puntos{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:12px}
.vp-puntos li{position:relative; padding-left:26px; color:rgba(251,248,243,.82); font-size:.94rem}
.vp-puntos li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:1px;
  background:var(--oro)}
.vp-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.vp-detalle{background:var(--papel); padding:104px 0}
.vp-detalle .wrap{display:grid; grid-template-columns:.75fr 1.25fr; gap:64px; align-items:start}
.vp-detalle h2{font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:18px}
.vp-otros{background:var(--papel-2); padding:104px 0}
.vp-otros-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:30px; margin-top:44px}
.vp-mini{text-decoration:none; display:block}
.vp-mini .im{overflow:hidden; border-radius:var(--r); border:1px solid var(--linea);
  background:var(--papel)}
.vp-mini img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.1s var(--ease)}
.vp-mini:hover img{transform:scale(1.05)}
.vp-mini h3{font-size:1.04rem; margin:16px 0 6px}
.vp-mini span{color:var(--oro); font-weight:600; font-size:.94rem}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .v-triptico{grid-template-columns:1fr}
  .v-panel{display:none}
  .v-centro{border:0; padding:76px 30px}
  .v-rejilla{grid-template-columns:repeat(2,1fr); gap:44px 26px}
  .v-etiqueta:nth-child(n){margin-top:0}
  .v-etiqueta:nth-child(2){margin-top:36px}
  .v-etiqueta:nth-child(4){margin-top:36px}
  .v-etiqueta:nth-child(n) .v-hilo{top:-52px; height:52px}
  .v-etiqueta:nth-child(2) .v-hilo, .v-etiqueta:nth-child(4) .v-hilo{top:-88px; height:88px}
  .v-historia .wrap{grid-template-columns:1fr; gap:44px}
  .v-retrato{max-width:420px}
  .v-contacto .wrap{grid-template-columns:1fr; gap:36px}
  .vp-grid, .vp-detalle .wrap{grid-template-columns:1fr; gap:44px}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:78px 0}
  .nav{height:68px}
  .nav-links{display:none}
  .v-centro{padding:64px 22px}
  .v-hero-cta .btn{flex:1 1 100%}
  .v-percha{margin-top:56px}
  .v-rejilla{grid-template-columns:1fr; gap:56px}
  .v-etiqueta:nth-child(n){margin-top:0}
  .v-etiqueta:nth-child(n) .v-hilo{top:-40px; height:40px}
  .v-percha{padding-top:40px}
  .v-pasos{grid-template-columns:1fr}
  .v-oca{grid-template-columns:1fr}
  .wa-float span{display:none}
  .wa-float{padding:17px; border-radius:50%}
  .vp-detalle, .vp-otros{padding:76px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .v-panel img, .v-foto img, .vp-mini img{transition:none}
}