/* Capa de arte adicional — carga después de styles.css/vs-styles.css */

:root{
  --accent-wine:      #5c1626;
  --accent-wine-soft: rgba(92,22,38,.10);
  --ease-editorial:   cubic-bezier(.16,1,.3,1);
  --grain-opacity:    .045;
}

@media (prefers-reduced-motion: reduce){
  :root{ --grain-opacity:.03; }
}

/* Selección / scrollbar */
::selection{ background:var(--accent); color:#0d0d0d; }
html{ scrollbar-width:thin; scrollbar-color:var(--accent-dark) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--accent-dark); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Tipografía — hero/CTA/page-hero en serif editorial, cifras en Bebas */
:root{ --font-hero: 'Tenor Sans', Georgia, serif; }

.hero__title,
.cta-section__title,
.page-hero__title,
.footer__hero-title{
  font-weight:400;
  letter-spacing:.035em;
}
.hero__title em,
.cta-section__title em,
.page-hero__title em{
  font-style:italic;
  color:inherit;
}

.hero__eyebrow,
.eyebrow{
  letter-spacing:.28em;
}

.hero__counter,
.product-card__price,
.footer__hero-label{
  font-family:'Bebas Neue', var(--font-hero);
  letter-spacing:.08em;
}

.hero__eyebrow,
.footer__hero-label,
.cta-section .eyebrow{
  color:rgba(255,255,255,.82);
}
.hero__eyebrow{
  border-bottom-color:rgba(255,255,255,.55);
}
.hero__trust-item svg{ color:rgba(255,255,255,.75); }

/* Grano de textura — secciones oscuras */
.has-grain{ position:relative; isolation:isolate; }
.has-grain::after{
  content:'';
  position:absolute; inset:0;
  z-index:3; pointer-events:none;
  opacity:var(--grain-opacity);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* Marquee de marcas — barrido */
.brands-marquee__item{
  background:linear-gradient(100deg, var(--text-muted) 38%, var(--accent) 50%, var(--text-muted) 62%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:iiShimmer 7s linear infinite;
}
@keyframes iiShimmer{
  0%   { background-position:220% 0; }
  100% { background-position:-220% 0; }
}
@media (prefers-reduced-motion: reduce){
  .brands-marquee__item{ animation:none; -webkit-text-fill-color:var(--text-muted); color:var(--text-muted); }
}

/* Divisor del footer */
.footer__divider-line{
  position:relative;
  overflow:hidden;
}
.footer__divider-line::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--accent) 45%, transparent 55%, transparent);
  background-size:200% 100%;
  animation:iiDividerSweep 5s var(--ease-editorial) infinite;
}
@keyframes iiDividerSweep{
  0%,15%{ background-position:200% 0; }
  55%,100%{ background-position:-100% 0; }
}

/* Fondo ambiental del CTA (desactivado más abajo al pasar a blanco) */
.cta-section{ position:relative; overflow:hidden; }
.cta-section::before{
  content:'';
  position:absolute; inset:-20%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 45% at 18% 30%, var(--accent-glow), transparent 70%),
    radial-gradient(30% 40% at 82% 70%, var(--accent-wine-soft), transparent 70%);
  filter:blur(40px);
  animation:iiDrift 22s var(--ease-editorial) infinite alternate;
}
.cta-section__inner{ position:relative; z-index:1; }
@keyframes iiDrift{
  0%  { transform:translate(0,0) scale(1); }
  100%{ transform:translate(-3%,3%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .cta-section::before{ animation:none; }
}

/* Cards de producto — segunda foto en hover + tilt (product-card y splash-card) */
.product-card,
.splash-card{ perspective:900px; }
.product-card__img-wrap,
.splash-card__img-wrap{
  position:relative; overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .45s var(--ease-editorial);
}
.product-card__img,
.splash-card__img{
  transition:transform .6s var(--ease-editorial), opacity .5s var(--ease-editorial);
}
.product-card__img--alt,
.splash-card__img--alt{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
}
.product-card:hover .product-card__img--alt,
.splash-card:hover .splash-card__img--alt{ opacity:1; }
.product-card:hover .product-card__img:not(.product-card__img--alt),
.splash-card:hover .splash-card__img:not(.splash-card__img--alt){ opacity:0; }

/* Botones magnéticos — el tirón lo aplica steroids.js */
[data-magnetic]{ transition:transform .5s var(--ease-editorial); }
[data-magnetic].is-pulled{ transition:transform .12s linear; }

/* Reveal editorial de títulos — solo activo si steroids.js confirmó arranque */
html.ii-js [data-wipe]{
  clip-path:inset(0 0 100% 0);
  transform:translateY(14px);
  opacity:0;
  transition:
    clip-path .9s var(--ease-editorial),
    transform .9s var(--ease-editorial),
    opacity .5s ease;
}
html.ii-js [data-wipe].is-wiped{
  clip-path:inset(0 0 0% 0);
  transform:translateY(0);
  opacity:1;
}

/* Paleta blanco/negro + más aire entre secciones */
.section-spacing{ padding-top:calc(var(--space-2xl) + var(--space-md)); padding-bottom:calc(var(--space-2xl) + var(--space-md)); }
@media (max-width:768px){
  .section-spacing{ padding-top:var(--space-2xl); padding-bottom:var(--space-2xl); }
}

.fpill--on{
  background:#0d0d0d;
  border-color:#0d0d0d;
  color:#fff;
}

.product-card__badge--hot,
.product-card__badge--offer,
.product-card__badge--new{
  background:#0d0d0d;
  color:#fff;
}

.cta-section{
  background:var(--bg);
}
.cta-section::before{ display:none; }
.cta-section.has-grain::after{ display:none; }
.cta-section__title,
.cta-section__desc{
  color:var(--text);
}
.cta-section__title em{ color:var(--accent); }
.cta-section .eyebrow{ color:var(--text-muted); }

.footer{
  background:var(--bg);
  color:var(--text);
  border-top:1px solid var(--border-soft);
}
.footer.has-grain::after{ display:none; }
.footer__hero::before{ display:none; }
.footer__hero-label{ color:var(--text-muted); }
.footer__hero-title{ color:var(--text); }
.footer__hero-cta{
  color:var(--text);
  border-color:var(--border);
}
.footer__hero-cta:hover{
  background:#0d0d0d;
  border-color:#0d0d0d;
  color:#fff;
}
.footer__divider-line{ background:var(--border-soft); }
.footer__divider-line::after{ animation:none; background:none; }
.footer__logo{ filter:none; opacity:1; }
.footer__logo-text{ color:var(--text); }
.footer__desc{ color:var(--text-muted); }
.footer__social-link{
  color:var(--text);
  border-color:var(--border);
}
.footer__social-link:hover{
  background:#0d0d0d;
  border-color:#0d0d0d;
  color:#fff;
}
.footer__col-title{ color:var(--text-muted); }
.footer__pagos-title{
  color:var(--text-muted);
  border-bottom-color:var(--border-soft);
}
.footer__link{ color:var(--text-soft); }
.footer__link:hover{ color:var(--text); }
.footer__link::before{ background:var(--accent); }
.footer__pago-badge{
  color:var(--text-muted);
  background:var(--bg-card);
  border-color:var(--border-soft);
}
.footer__bottom{ border-top:1px solid var(--border-soft); }
.footer__copy,
.footer__credit{ color:var(--text-muted); }
.footer__credit-link{ color:var(--text-soft); }
.footer__credit-link:hover{ color:var(--accent); }

.has-grain::after{ opacity:calc(var(--grain-opacity) * .6); }

/* Preloader */
#iiPreloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg-dark);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease-editorial), visibility .7s;
  animation:iiForceHide 0s 1.5s forwards;
}
@keyframes iiForceHide{ to{ opacity:0; visibility:hidden; } }
#iiPreloader__word{
  font-family:var(--font-hero);
  font-size:clamp(1.1rem, 3.6vw, 1.9rem);
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--text-inv);
  display:flex; overflow:hidden;
  padding-left:.4em;
}
#iiPreloader__word span{
  display:inline-block;
  opacity:0; transform:translateY(70%);
  animation:iiPreIn .6s var(--ease-editorial) forwards;
}
#iiPreloader__line{
  position:absolute; top:56%; left:50%;
  width:0; height:1px; background:var(--accent);
  transform:translateX(-50%);
  animation:iiPreLine 1s var(--ease-editorial) .45s forwards;
}
@keyframes iiPreIn{ to{ opacity:1; transform:none; } }
@keyframes iiPreLine{ to{ width:96px; } }

html.ii-loaded #iiPreloader{ opacity:0; visibility:hidden; }
html:not(.ii-loaded) body{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  #iiPreloader{ transition:opacity .3s linear, visibility .3s; }
  #iiPreloader__word span{ animation:none; opacity:1; transform:none; }
  #iiPreloader__line{ animation:none; width:96px; }
}

/* Video del hero — opcional, ver img/hero/*.mp4 */
.hero__slide-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s var(--ease-editorial);
  pointer-events:none;
}
.hero__slide-video.is-ready{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero__slide-video{ display:none; }
}

/* CTA — banner plano sin caja oscura interna */
.cta-section__inner{
  background:transparent;
  border-radius:0;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  padding:var(--space-2xl) 0;
}
.cta-section__inner::before,
.cta-section__inner::after{ display:none; }

.cta-section__title{
  color:var(--text);
  text-transform:none;
}
.cta-section__title em{
  color:var(--text-muted);
}
.cta-section__text{
  color:var(--text-muted);
}
.cta-section__note{
  color:var(--text-muted);
}
.cta-section .eyebrow{
  color:var(--text-muted);
}
.cta-section .btn--wa-lg{
  box-shadow:none;
}

@media (max-width:768px){
  .cta-section__inner{ padding:var(--space-xl) 0; }
}

/* Familia tipográfica — Fraunces + Instrument Sans; nombre de producto queda en Tenor Sans */
:root{
  --font-hero:    'Fraunces', Georgia, serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Instrument Sans', -apple-system, sans-serif;
}

.product-card__name,
.modal__name,
.splash-card__name,
.splash-modal__name{
  font-family:'Tenor Sans', Georgia, serif;
}

.hero__title em,
.cta-section__title em,
.page-hero__title em{
  font-optical-sizing:auto;
}

/* Contacto — mismo sistema plano que el resto del sitio */
.contact-wa-card{
  border-radius:0;
  box-shadow:none;
  border-color:var(--border);
}
.contact-wa-card:hover{
  box-shadow:0 8px 24px rgba(13,13,13,0.06);
  transform:none;
}
.contact-wa-card::before{ opacity:1; background:var(--border); height:1px; }

.channels-grid{ gap:var(--space-lg); }
.channel-card{
  border-radius:0;
  padding:var(--space-xl) var(--space-lg);
}
.channel-card--active{ border-color:var(--text); box-shadow:none; }
.channel-card:hover{ box-shadow:0 8px 24px rgba(13,13,13,0.06); }

.channel-card__icon,
.contact-wa-card__icon,
.promise-item__icon{
  border-radius:0;
  border:none;
  border-left:2px solid currentColor;
  background:var(--bg-off);
}
.channel-card__icon--wa{ color:var(--wa); }
.channel-card__icon--ig{ color:#e1306c; }
.channel-card__icon--tt{ color:var(--text); }
.contact-wa-card__icon{ color:var(--wa); margin-left:auto; margin-right:auto; }

.promises-grid{ gap:var(--space-md); }
.promise-item{
  border-radius:0;
  border:1px solid transparent;
}
.promise-item:hover{
  background:transparent;
  border-color:var(--border-soft);
}
.promise-item__icon{
  border-radius:0;
  color:var(--text);
}
.promise-item:hover .promise-item__icon{
  background:var(--text);
  border-left-color:var(--text);
  color:#fff;
  transform:none;
}

@media (max-width:768px){
  .channels-grid{ grid-template-columns:1fr; gap:var(--space-md); }
  .promises-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Fondos con foto — rutas opcionales, ver notas en el chat del proyecto */
.why-us{
  position:relative;
  background:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
    url('img/why-us/bg.jpg') center/cover no-repeat,
    var(--bg-off);
}

body.page-contacto{
  position:relative;
}
body.page-contacto::before{
  content:'';
  position:fixed; inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.9) 55%, var(--bg) 85%),
    url('img/contacto/bg.jpg') center/cover no-repeat;
}
@media (max-width:900px){
  body.page-contacto::before{ position:absolute; height:100%; }
}
body.page-contacto .page-hero{ background:transparent; border-bottom-color:transparent; }
body.page-contacto .promises-section{ background:rgba(255,255,255,.85); border-color:var(--border-soft); }

/* Cursor personalizado — solo desktop con mouse */
@media (hover:hover) and (pointer:fine){
  html.ii-cursor-ready, html.ii-cursor-ready *{ cursor:none !important; }
  .ii-cursor{
    position:fixed; top:0; left:0; z-index:10000;
    width:10px; height:10px; border-radius:50%;
    background:#0d0d0d;
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease-editorial), height .25s var(--ease-editorial),
               background .25s var(--ease-editorial), opacity .2s ease;
    will-change:transform;
  }
  .ii-cursor--view{
    width:64px; height:64px;
    background:transparent;
    border:1px solid #0d0d0d;
  }
  .ii-cursor--view::after{
    content:'VER';
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-ui); font-size:.6rem; font-weight:600;
    letter-spacing:.1em; color:#0d0d0d;
  }
  .ii-cursor--link{ width:16px; height:16px; }
  .ii-cursor.is-hidden{ opacity:0; }
}

/* Transición entre páginas */
#iiPageExit{
  position:fixed; inset:0; z-index:9998;
  background:var(--bg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease-editorial);
}
#iiPageExit.is-active{ opacity:1; visibility:visible; }

/* Fraunces es más ancha que Tenor Sans: el hero title se
   partía en más líneas de las previstas y el bloque de texto
   se salía por arriba, tapado por el header. Más ancho de caja
   y tope de escala más conservador. */
.hero__slide-content{
  max-width:860px;
  justify-content:center;
}
.hero__title{
  font-size:clamp(2.75rem, 6vw, 6.25rem);
}

/* El centrado del hero era para desktop (evitar que el título
   se escondiera bajo el header con Fraunces). En móvil el
   título ya usa un tamaño más chico y no hace falta: mejor
   volver a anclar abajo para no tapar el video/foto. */
@media (max-width:768px){
  .hero__slide-content{
    justify-content:flex-end;
  }
}

/* Ícono del crédito de Andina Web Studio */
.footer__credit-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.footer-credit-icon{
  width:13px; height:13px;
  flex-shrink:0;
  opacity:.75;
  transition:opacity .25s var(--ease-editorial), transform .25s var(--ease-editorial);
}
.footer__credit-link:hover .footer-credit-icon{
  opacity:1;
  transform:rotate(-6deg);
}

/* Botón de favorito — esquina superior derecha de la card */
.product-card__fav{
  position:absolute;
  top:var(--space-xs); right:var(--space-xs);
  z-index:3;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9);
  border:1px solid var(--border-soft);
  border-radius:50%;
  color:var(--text);
  cursor:pointer;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s var(--ease-editorial), transform .25s var(--ease-editorial),
             background .2s ease, border-color .2s ease;
}
.product-card__fav svg{ width:16px; height:16px; }
.product-card:hover .product-card__fav,
.splash-card:hover .product-card__fav,
.product-card__fav:focus-visible,
.product-card__fav.is-fav{
  opacity:1;
  transform:translateY(0);
}
.product-card__fav:hover{
  background:#0d0d0d;
  border-color:#0d0d0d;
  color:#fff;
}
.product-card__fav.is-fav{
  color:#0d0d0d;
}
.product-card__fav.is-fav svg{
  fill:#0d0d0d;
}
@media (hover:none){
  .product-card__fav{ opacity:1; transform:none; background:rgba(255,255,255,.92); }
}

/* Skeleton loader — ya existía, solo se empareja al sistema plano */
.card-skeleton{ border-radius:0; }

/* Zoom táctil del modal — el :hover del CSS base no aplica en
   touch; steroids.js alterna esta clase con un tap */
@media (hover:none){
  .modal__main-img-wrap.is-zoomed .modal__main-img{
    transform:scale(1.75);
  }
  .splash-modal__img-wrap.is-zoomed .splash-modal__img{
    transform:scale(1.65);
  }
}

/* Separador del marquee — de rombo genérico a gota de perfume */
.brands-marquee__sep{
  display:inline-flex;
  align-items:center;
  color:var(--accent);
  opacity:.45;
}
.brands-marquee__sep svg{
  width:11px; height:11px;
}

/* Pop del corazón al marcar favorito */
.product-card__fav.is-popping{
  animation:iiFavPop .4s var(--ease-editorial);
}
@keyframes iiFavPop{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .product-card__fav.is-popping{ animation:none; }
}

/* Parallax del hero — más vida en móvil, donde no hay
   cursor ni tilt; el scale de la propia capa da margen para
   que el desplazamiento nunca deje ver un borde vacío */
.hero__slide-bg{
  will-change:transform;
}

/* ============================================================
   REFINAMIENTO VISUAL — menos ruido, más protagonismo al video
   ============================================================ */

/* Hero desktop: bloque editorial más contenido y overlay localizado. */
@media (min-width:769px){
  .hero__slide-content{
    max-width:590px;
    justify-content:center;
    padding-left:clamp(5rem, 9vw, 8.5rem);
    padding-right:1.5rem;
  }
  .hero__title{
    max-width:520px;
    font-size:clamp(2.65rem, 4.6vw, 4.9rem);
    line-height:.98;
    margin-bottom:1rem;
  }
  .hero__subtitle{
    max-width:360px;
    margin-bottom:1.5rem;
  }
  .hero__slide-overlay{
    background:
      linear-gradient(90deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.54) 30%, rgba(8,8,8,.13) 58%, transparent 78%),
      linear-gradient(0deg, rgba(8,8,8,.34) 0%, transparent 38%);
  }
  .hero__btns .btn{ padding:12px 20px; }
}

/* Tarjetas: dos acciones claras; WhatsApp permanece en modal y flotante. */
.product-card__btn-wa{ display:none; }
.product-card__actions{ grid-template-columns:.82fr 1.18fr; gap:6px; }
.product-card__img-wrap{ background:#fbfbfa; }
.product-card__family{ color:#6f6f6f; }
.product-card__badge--hot,
.product-card__badge--offer,
.product-card__badge--new{ background:var(--accent-wine); }

/* Promesas compactas: menos espacio vacío y decoración subordinada. */
.why-us__item{ padding:2rem 1.5rem; gap:.75rem; }
.why-us__item::after{ font-size:3.6rem; opacity:.72; }
.why-us__icon{ width:42px; height:42px; }
.why-us__icon svg{ width:23px; height:23px; }
.why-us__desc{ line-height:1.65; }

@media (max-width:768px){
  .hero{
    height:82dvh;
    min-height:620px;
  }
  .hero__slide-content{
    justify-content:flex-end;
    max-width:100%;
    padding:0 1rem 5rem;
  }
  .hero__title{
    max-width:340px;
    font-size:clamp(2.65rem, 12vw, 3.65rem);
    margin-bottom:1rem;
  }
  .hero__subtitle{
    max-width:330px;
    color:rgba(255,255,255,.76);
    margin-bottom:1.25rem;
  }
  .hero__slide-overlay{
    background:linear-gradient(0deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.50) 42%, rgba(8,8,8,.06) 72%);
  }

  .products-grid--featured{
    gap:12px;
    padding-right:1rem;
    scroll-padding-left:0;
  }
  .products-grid--featured .product-card,
  .products-grid--featured .featured-cta-card{
    flex:0 0 calc(100vw - 48px);
    max-width:none;
  }
  .products-grid--featured .product-card__img-wrap{ aspect-ratio:1 / 1.08; }
  .products-grid--featured .product-card__img{ object-fit:contain; padding:10px; }

  .why-us__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .why-us__item{ padding:1.5rem 1rem; min-height:220px; }
  .why-us__item::after{ font-size:3rem; }
}

/* Hero móvil: composición de campaña más breve para que el video respire. */
@media (max-width:600px){
  .hero__slide-content{
    padding:0 1rem 4.35rem;
  }
  .hero__eyebrow{
    margin-bottom:.7rem;
  }
  .hero__title{
    max-width:330px;
    font-size:clamp(2.25rem, 10vw, 2.75rem);
    line-height:.9;
    margin-bottom:.95rem;
  }
  .hero__subtitle{
    display:none;
  }
  .hero__btns{
    flex-wrap:nowrap;
  }
  .hero__btns .btn{
    width:auto;
    min-height:0;
    padding:10px 15px;
    font-size:.56rem;
    letter-spacing:.1em;
  }
  .hero__btns .btn--ghost{
    display:none;
  }
  .hero__slide-overlay{
    background:linear-gradient(0deg, rgba(8,8,8,.76) 0%, rgba(8,8,8,.34) 36%, rgba(8,8,8,.035) 66%);
  }
}

@media (max-width:480px){
  .products-grid--featured .product-card,
  .products-grid--featured .featured-cta-card{ flex-basis:calc(100vw - 48px); }
  .why-us__grid{ grid-template-columns:1fr; }
  .why-us__item{
    min-height:0;
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:1rem;
    row-gap:.4rem;
    align-items:start;
  }
  .why-us__icon{ grid-row:1 / span 2; }
  .why-us__title,
  .why-us__desc{ grid-column:2; }
}

/* ============================================================
   MODAL MÓVIL — ficha de producto a pantalla completa
   ============================================================ */
@media (max-width:768px){
  .modal-overlay{
    padding:0;
    align-items:stretch;
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .modal{
    width:100%;
    height:100dvh;
    max-width:none;
    max-height:100dvh !important;
    border:0;
    border-radius:0;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    overscroll-behavior:contain;
    background:#fff;
    animation:none !important;
  }
  .modal__close{
    position:fixed;
    top:calc(12px + env(safe-area-inset-top));
    right:12px;
    width:42px;
    height:42px;
    z-index:920;
    background:rgba(255,255,255,.94);
    box-shadow:0 5px 22px rgba(0,0,0,.12);
  }
  .modal__gallery{
    flex:0 0 auto;
    height:auto;
    padding:0;
    gap:0;
    overflow:visible;
    border:0;
    background:#fafafa;
  }
  .modal__main-img-wrap{
    flex:none;
    width:100%;
    height:46dvh;
    min-height:330px;
    max-height:480px;
    overflow:hidden;
    background:#fafafa;
  }
  .modal__main-img{
    padding:28px 34px 18px;
    object-fit:contain;
  }
  .modal__thumbs{
    width:100%;
    min-height:64px;
    padding:8px 16px 10px;
    overflow-x:auto;
    flex-wrap:nowrap;
    background:#fff;
    border-bottom:1px solid var(--border-soft);
    scrollbar-width:none;
  }
  .modal__thumbs::-webkit-scrollbar{ display:none; }
  .modal__thumb{ width:48px; height:48px; }
  .modal__info{
    flex:none;
    min-height:0;
    overflow:visible;
    padding:28px 20px 32px;
    gap:20px;
  }
  .modal__cat{ font-size:.625rem; }
  .modal__name{
    font-size:clamp(1.8rem, 8vw, 2.35rem);
    line-height:1.08;
    padding-right:0;
  }
  .modal__brand{ font-size:.9rem; }
  .modal__price{ font-size:2.1rem; }
  .modal__meta{ padding:10px 0; }
  .modal__meta-item{ padding:10px 12px; }
  .modal__meta-val{ font-size:.9rem; }
  .modal__pyramid{ flex-direction:column; gap:0; }
  .modal__pyramid-row{
    width:100%;
    padding:14px 0;
    border-right:0;
    border-bottom:1px solid var(--border-soft);
    display:grid;
    grid-template-columns:86px 1fr;
    align-items:start;
    gap:14px;
  }
  .modal__pyramid-stage{
    padding:2px 0 0;
    border:0;
    font-size:.56rem;
  }
  .modal__notes{ flex-direction:row; flex-wrap:wrap; gap:7px 14px; }
  .note{ font-size:.8rem; }
  .modal__bar-row{ padding:14px 0; }
  .modal__desc{ font-size:.94rem; line-height:1.75; }
  .modal__actions{
    position:sticky;
    bottom:0;
    z-index:915;
    flex:none;
    display:grid;
    grid-template-columns:1fr 54px;
    gap:8px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    box-shadow:0 -10px 30px rgba(0,0,0,.07);
  }
  .modal__actions .btn{ min-height:48px; padding:12px 10px; }
  .modal__actions .btn--wa{ font-size:0; padding:0; }
  .modal__actions .btn--wa svg{ width:22px; height:22px; margin:0; }
}

/* ============================================================
   CONTACTO — presentación de la demo por Andina Web Studio
   ============================================================ */
.page-contacto > main > .page-hero,
.page-contacto .contact-main,
.page-contacto .promises-section{ display:none; }

.demo-contact{
  position:relative;
  min-height:calc(100dvh - var(--header-h));
  overflow:hidden;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.12), transparent 28%),
    radial-gradient(circle at 18% 88%, rgba(255,255,255,.09), transparent 25%),
    #0b0b0b;
}
.demo-contact::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.demo-contact__orb{
  position:absolute;
  width:min(48vw,620px);
  aspect-ratio:1;
  right:-8vw;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 80px rgba(255,255,255,.02), 0 0 0 160px rgba(255,255,255,.015);
}
.demo-contact__mountains{
  position:absolute;
  z-index:0;
  left:0;
  bottom:-1px;
  width:100%;
  height:min(52vh,560px);
  pointer-events:none;
}
.demo-contact__mountain--back{ fill:rgba(255,255,255,.035); }
.demo-contact__mountain--mid{ fill:rgba(255,255,255,.075); }
.demo-contact__mountain--front{ fill:#080808; }
.demo-contact__inner{
  position:relative;
  z-index:1;
  width:100%;
  padding-top:clamp(72px, 10vh, 120px);
  padding-bottom:clamp(72px, 10vh, 120px);
}
.demo-contact__kicker{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  margin-bottom:24px;
}
.demo-contact__title{
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:.8;
}
.demo-contact__title > span{
  font-family:var(--font-hero);
  font-size:clamp(7rem, 20vw, 17rem);
  font-weight:400;
  letter-spacing:-.055em;
}
.demo-contact__title > small{
  font-family:var(--font-display);
  font-size:clamp(1.2rem, 2.4vw, 2.2rem);
  font-style:italic;
  font-weight:400;
  letter-spacing:.02em;
  color:rgba(255,255,255,.72);
  line-height:1.2;
  margin-top:20px;
}
.demo-contact__intro{
  max-width:520px;
  margin-top:32px;
  font-size:1rem;
  color:rgba(255,255,255,.58);
  line-height:1.75;
}
.demo-contact__actions{
  display:grid;
  grid-template-columns:minmax(320px, 1.2fr) minmax(280px, .8fr);
  gap:12px;
  max-width:900px;
  margin-top:48px;
}
.demo-contact__wa,
.demo-contact__socials a{
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  transition:background .3s var(--ease-editorial), border-color .3s, transform .3s var(--ease-editorial);
}
.demo-contact__wa{
  min-height:122px;
  padding:24px 28px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  background:rgba(255,255,255,.06);
}
.demo-contact__wa strong{ font-size:clamp(1.25rem, 2.5vw, 2rem); font-weight:500; }
.demo-contact__action-label{
  grid-column:1 / -1;
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.56);
}
.demo-contact__socials{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.demo-contact__socials a{
  min-height:122px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.demo-contact__socials span{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.demo-contact__socials strong{ font-size:.82rem; font-weight:500; }
.demo-contact__wa:hover,
.demo-contact__socials a:hover{ background:#fff; border-color:#fff; color:#0b0b0b; transform:translateY(-3px); }
.demo-contact__wa:hover .demo-contact__action-label,
.demo-contact__socials a:hover span{ color:rgba(11,11,11,.58); }
.demo-contact__signature{
  position:absolute;
  right:-20px;
  bottom:-54px;
  font-family:var(--font-hero);
  font-size:clamp(7rem, 18vw, 15rem);
  letter-spacing:-.05em;
  color:rgba(255,255,255,.025);
  pointer-events:none;
}

/* Solo quedan visibles las redes solicitadas. */
.footer__social-link[aria-label="TikTok"]{ display:none; }
.footer__social-link--x svg{ display:none; }
.footer__social-link--x::before{ content:'X'; font:600 16px/1 var(--font-ui); }

@media (max-width:768px){
  .demo-contact{ min-height:auto; }
  .demo-contact__inner{ padding-top:72px; padding-bottom:80px; }
  .demo-contact__orb{ width:88vw; right:-42vw; top:26%; }
  .demo-contact__title > span{ font-size:clamp(6rem, 32vw, 9rem); }
  .demo-contact__title > small{ margin-top:16px; font-size:1.25rem; }
  .demo-contact__intro{ font-size:.94rem; margin-top:28px; }
  .demo-contact__actions{ grid-template-columns:1fr; margin-top:36px; }
  .demo-contact__wa{ min-height:112px; padding:22px; }
  .demo-contact__socials a{ min-height:104px; padding:18px; }
  .demo-contact__signature{ right:-6px; bottom:-24px; }
}

/* ============================================================
   POR QUÉ ELEGIRNOS — manifiesto editorial
   ============================================================ */
.why-us{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#211e1c;
  background:#fff;
  border-top:1px solid rgba(33,30,28,.12);
  border-bottom:1px solid rgba(33,30,28,.12);
  padding-top:clamp(96px, 11vw, 150px);
  padding-bottom:clamp(96px, 11vw, 150px);
}
.why-us::before{
  content:'INSTANCIA INFINITO · PERFUMERÍA SELECTA ·';
  position:absolute;
  top:28px;
  right:4vw;
  width:auto;
  height:auto;
  font-family:'Bebas Neue',var(--font-hero);
  font-size:.68rem;
  letter-spacing:.28em;
  color:rgba(33,30,28,.3);
  white-space:nowrap;
  pointer-events:none;
}
.why-us > .container{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(560px,1.28fr);
  gap:clamp(64px, 9vw, 130px);
  align-items:start;
}
.why-us .section-header--center{
  position:sticky;
  top:calc(var(--header-h) + 52px);
  display:block;
  text-align:left;
  margin:0;
}
.why-us .section-header--center::after{
  content:'04 / razones';
  display:block;
  margin-top:42px;
  font-family:'Bebas Neue',var(--font-hero);
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(33,30,28,.42);
}
.why-us .eyebrow{
  color:#74535b;
  margin-bottom:18px;
}
.why-us .section-title{
  max-width:360px;
  font-size:clamp(3rem, 5vw, 5.2rem);
  line-height:.94;
  letter-spacing:-.035em;
  color:#211e1c;
}
.why-us .section-title em{
  display:block;
  margin-top:5px;
  font-family:var(--font-display);
  font-size:.72em;
  font-style:italic;
  color:#74535b;
}
.why-us .section-header--center .section-subtitle{
  max-width:340px;
  margin:28px 0 0;
  padding:22px 0 0;
  border-color:rgba(33,30,28,.16);
  color:rgba(33,30,28,.62);
  text-align:left;
  line-height:1.75;
}
.why-us__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid rgba(33,30,28,.24);
}
.why-us__item{
  min-height:150px;
  display:grid;
  grid-template-columns:58px minmax(170px,.75fr) minmax(260px,1.25fr) 64px;
  gap:22px;
  align-items:center;
  padding:30px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(33,30,28,.24);
  overflow:visible;
  transition:transform .55s var(--ease-editorial), background .35s ease, padding .55s var(--ease-editorial);
}
.why-us__item::before{
  height:100%;
  inset:0;
  background:rgba(255,255,255,.38);
  opacity:0;
  transition:opacity .35s ease;
  z-index:-1;
}
.why-us__item::after{
  content:attr(data-num);
  position:relative;
  inset:auto;
  grid-column:4;
  grid-row:1;
  justify-self:end;
  font-family:'Bebas Neue',var(--font-hero);
  font-size:3.4rem;
  line-height:1;
  letter-spacing:.02em;
  color:rgba(33,30,28,.14);
  opacity:1;
  transform:translateX(0);
  transition:color .35s ease, transform .55s var(--ease-editorial);
}
.why-us__icon{
  grid-column:1;
  grid-row:1;
  width:48px;
  height:48px;
  background:transparent;
  border:1px solid rgba(33,30,28,.26);
  border-radius:50%;
  color:#74535b;
  transition:background .35s, color .35s, transform .55s var(--ease-editorial), border-color .35s;
}
.why-us__title{
  grid-column:2;
  grid-row:1;
  font-size:clamp(1.15rem, 1.7vw, 1.55rem);
  line-height:1.25;
  letter-spacing:.01em;
  color:#211e1c;
}
.why-us__desc{
  grid-column:3;
  grid-row:1;
  max-width:430px;
  font-size:.86rem;
  line-height:1.75;
  color:rgba(33,30,28,.57);
}
@media (hover:hover) and (pointer:fine){
  .why-us__item:hover{
    padding-left:12px;
    padding-right:12px;
    transform:translateX(4px);
    box-shadow:none;
    border-color:rgba(33,30,28,.42);
  }
  .why-us__item:hover::before{ opacity:1; }
  .why-us__item:hover::after{ color:#74535b; transform:translateX(-4px); }
  .why-us__item:hover .why-us__icon{
    background:#211e1c;
    border-color:#211e1c;
    color:#fff;
    transform:translateY(-3px);
  }
}

@media (max-width:900px){
  .why-us > .container{
    grid-template-columns:1fr;
    gap:56px;
  }
  .why-us .section-header--center{ position:relative; top:auto; }
  .why-us .section-title{ max-width:none; }
  .why-us .section-title em{ display:inline; margin-left:.12em; }
  .why-us .section-header--center .section-subtitle{ max-width:560px; }
}

@media (max-width:600px){
  .why-us{ padding-top:78px; padding-bottom:78px; }
  .why-us::before{ top:22px; right:16px; font-size:.58rem; }
  .why-us > .container{ gap:42px; }
  .why-us .section-header--center::after{ margin-top:28px; }
  .why-us .section-title{ font-size:clamp(2.8rem, 14vw, 4rem); }
  .why-us .section-title em{ display:block; margin-left:0; }
  .why-us__item{
    min-height:0;
    grid-template-columns:46px 1fr 42px;
    column-gap:14px;
    row-gap:10px;
    padding:24px 0;
    align-items:start;
  }
  .why-us__icon{
    grid-column:1;
    grid-row:1 / span 2;
    width:42px;
    height:42px;
  }
  .why-us__title{ grid-column:2; grid-row:1; font-size:1.16rem; padding-top:3px; }
  .why-us__desc{ grid-column:2 / 4; grid-row:2; font-size:.82rem; }
  .why-us__item::after{
    grid-column:3;
    grid-row:1;
    font-size:2.25rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .why-us::before{ animation:none; }
  .why-us__item,
  .why-us__item::after,
  .why-us__icon{ transition:none; }
}