/* VISTA INICIO · Stefanie · marca de cosmética premium
   Negro profundo, blanco, dorado champán. Todas las clases llevan prefijo vt-
   para no heredar los parches de estilo-stefanie.css. */
:root{
  --vt-black:#0F0C0E;
  --vt-ink:#161214;
  --vt-ink-2:#3D3538;
  --vt-white:#FFFFFF;
  --vt-gold:#B8925A;
  --vt-gold-soft:#EADBC2;
  --vt-line:#E6E0D8;
  --vt-muted:#6F6663;
  --vt-head-h:72px;
  --vt-gutter:max(32px, calc((100vw - 1280px) / 2 + 32px));
}

.vt-home{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--vt-white);color:var(--vt-ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased;position:relative;}
.vt-home [hidden]{display:none!important;}
.vt-home{height:100svh;}
.vt-page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;min-width:0;width:100%;}
.vt-home > *{min-width:0;max-width:100%;}
.vt-home h1,.vt-home h2,.vt-home h3{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;letter-spacing:-.01em;}
.vt-home :focus-visible{outline:2px solid var(--vt-gold);outline-offset:3px;}
.vt-icon{width:18px;height:18px;flex:0 0 18px;display:block;}

/* ---------- Fondo animado ---------- */
.vt-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--vt-white);}
.vt-bg svg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);filter:blur(2.5px);}
/* Capa esmerilada: velo blanco con grano sutil, como vidrio mate sobre las figuras */
.vt-bg::after{content:"";position:absolute;inset:0;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"),
  rgba(255,255,255,.22);
  backdrop-filter:blur(7px) saturate(1.05);-webkit-backdrop-filter:blur(7px) saturate(1.05);}
.vt-shape{transform-box:fill-box;transform-origin:center;animation-name:vtMove;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;will-change:transform;}
@keyframes vtMove{
  0%{transform:translate(0,0) rotate(0deg) scale(1);}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(var(--sc));}
}
@media (prefers-reduced-motion:reduce){ .vt-shape{animation:none!important;} }

.vt-page,.vt-top,.vt-sheet{position:relative;z-index:1;}
.vt-sheet{position:fixed;z-index:45;}

/* ---------- Barra superior negra ---------- */
.vt-top{position:sticky;top:0;z-index:50;background:var(--vt-black);color:var(--vt-white);}
.vt-top-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:12px 32px;}
.vt-logo{display:block;}
.vt-logo img{display:block;height:44px;width:auto;filter:invert(1);}
.vt-nav{display:flex;justify-content:center;gap:30px;}
.vt-nav a,.vt-nav button{background:none;border:0;border-bottom:1px solid transparent;padding:8px 0 7px;margin:0;font:500 14px/1.2 "DM Sans",sans-serif;color:rgba(255,255,255,.78);text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .25s ease,border-color .25s ease;}
.vt-nav a:hover,.vt-nav button:hover{color:var(--vt-white);}
.vt-nav [aria-current="page"],.vt-nav button[aria-expanded="true"]{color:var(--vt-white);border-bottom-color:var(--vt-gold);}
.vt-tools{display:flex;align-items:center;gap:10px;}
.vt-wa{display:inline-flex;align-items:center;gap:9px;font:500 14px/1 "DM Sans",sans-serif;color:var(--vt-white);text-decoration:none;padding:10px 16px;border:1px solid rgba(255,255,255,.22);border-radius:99px;transition:border-color .25s ease,background .25s ease;}
.vt-wa .vt-icon{color:#25D366;}
.vt-wa:hover{border-color:#25D366;background:rgba(37,211,102,.08);}
.vt-pill{display:inline-flex;align-items:center;gap:10px;background:var(--vt-white);color:var(--vt-black);text-decoration:none;font:600 14px/1 "DM Sans",sans-serif;padding:10px 10px 10px 16px;border-radius:99px;transition:background .25s ease;}
.vt-pill .vt-icon{color:var(--vt-black);width:18px;height:18px;}
.vt-pill:hover{background:var(--vt-gold-soft);}
.vt-count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:99px;background:var(--vt-gold);color:var(--vt-black);font:700 12px/1 "DM Sans",sans-serif;}
.vt-count.pop{animation:vtPop .4s ease;}
@keyframes vtPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---------- Hoja bajo la barra ---------- */
.vt-sheet{left:0;right:0;top:var(--vt-head-h);background:var(--vt-white);border-bottom:1px solid var(--vt-line);box-shadow:0 24px 48px -24px rgba(15,12,14,.25);max-height:min(70svh,560px);overflow:auto;}
.vt-sheet-in{max-width:1280px;margin:0 auto;padding:26px 32px 30px;}
.vt-sheet-in > section{animation:vtIn .28s ease both;}
@keyframes vtIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vt-search{display:flex;align-items:center;gap:10px;max-width:660px;border-bottom:1px solid var(--vt-black);padding-left:2px;}
.vt-search > .vt-icon{color:var(--vt-muted);}
.vt-search input{flex:1;min-width:0;border:0;background:transparent;font:400 16px "DM Sans",sans-serif;color:var(--vt-ink);padding:12px 0;outline:none;}
.vt-search button{background:var(--vt-black);color:var(--vt-white);border:0;border-radius:99px;font:600 14px/1 "DM Sans",sans-serif;padding:12px 22px;cursor:pointer;margin-bottom:4px;transition:background .25s ease,color .25s ease;}
.vt-search button:hover{background:var(--vt-gold);color:var(--vt-black);}
.vt-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.vt-chips a{font:500 14px/1 "DM Sans",sans-serif;text-decoration:none;color:var(--vt-ink);border:1px solid var(--vt-line);background:var(--vt-white);padding:10px 16px;border-radius:99px;transition:border-color .25s ease;}
.vt-chips a span{color:var(--vt-gold);font-weight:700;margin-left:4px;}
.vt-chips a:hover{border-color:var(--vt-black);}
.vt-chips a.is-on{background:var(--vt-black);border-color:var(--vt-black);color:var(--vt-white);}
.vt-chips a.is-on span{color:var(--vt-gold);}
.vt-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.vt-contact-grid > div{display:grid;gap:10px;align-content:start;padding-left:20px;border-left:1px solid var(--vt-gold-soft);}
.vt-contact-grid strong{font:600 17px/1.3 "DM Sans",sans-serif;}
.vt-contact-grid p{margin:0;color:var(--vt-muted);font-size:14px;}
.vt-contact-grid a{display:inline-flex;align-items:center;gap:9px;color:var(--vt-ink);font-weight:500;font-size:15px;text-decoration:none;border-bottom:1px solid var(--vt-gold);align-self:start;padding-bottom:3px;}
.vt-contact-grid a:hover{color:var(--vt-gold);}
.vt-contact-grid a .vt-icon{color:var(--vt-gold);}

/* ---------- Banner ---------- */
.vt-hero{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);height:clamp(300px,42svh,420px);background:transparent;color:var(--vt-ink);}
.vt-hero-copy{align-self:center;padding:16px clamp(24px,3vw,56px) 16px clamp(32px,5vw,96px);}
.vt-hero-copy::before{content:"";display:block;width:64px;height:1px;background:var(--vt-gold);margin-bottom:24px;}
.vt-hero h1{font-size:clamp(34px,3.9vw,56px);line-height:1.04;letter-spacing:-.025em;margin:0 0 18px;color:var(--vt-black);text-wrap:balance;}
.vt-hero p{margin:0;max-width:440px;font-size:16px;line-height:1.65;color:var(--vt-ink-2);}
.vt-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.vt-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:99px;font:600 15px/1 "DM Sans",sans-serif;text-decoration:none;border:1px solid transparent;transition:color .3s ease,border-color .3s ease,transform .25s ease,box-shadow .3s ease;}
.vt-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(184,146,90,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s ease;}
.vt-btn:hover::before{transform:translateX(120%);}
.vt-btn:active{transform:translateY(1px);}
.vt-btn-rose{background:var(--vt-black);color:var(--vt-white);box-shadow:0 14px 28px -16px rgba(15,12,14,.7);}
.vt-btn-rose:hover{transform:translateY(-1px);box-shadow:0 18px 32px -16px rgba(15,12,14,.8);}
.vt-btn-line{background:transparent;color:var(--vt-black);border-color:var(--vt-black);}
.vt-btn-line:hover{color:var(--vt-white);}
.vt-btn-line::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--vt-black);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;border-radius:inherit;}
.vt-btn-line:hover::after{transform:scaleX(1);}
.vt-btn .vt-icon{color:var(--vt-gold);}
.vt-hero-media{position:relative;overflow:hidden;background:#806758;}
.vt-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:translate3d(0,clamp(-6px,var(--py,0px),6px),0);will-change:transform;}

/* ---------- Catálogo / carrusel ---------- */
.vt-catalogo{position:relative;flex:1 1 0;min-height:0;min-width:0;display:flex;flex-direction:column;padding-top:14px;margin:0 clamp(12px,2vw,28px);border-radius:28px 28px 0 0;background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 60px -36px rgba(15,12,14,.35),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;}
.vt-cat-head{position:absolute;top:14px;right:clamp(20px,2.4vw,36px);z-index:3;}
.vt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.vt-cat-head h2{margin:0;font-size:clamp(30px,3.2vw,44px);line-height:1.05;}
.vt-cat-head h2::after{content:"";display:inline-block;width:40px;height:1px;background:var(--vt-gold);vertical-align:middle;margin-left:16px;}
.vt-clear{font-size:14px;color:var(--vt-muted);text-decoration:underline;text-underline-offset:4px;}
.vt-arrows{position:absolute;top:0;bottom:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(10px,1.4vw,22px);pointer-events:none;}
.vt-arrows button{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(15,12,14,.7);background:rgba(255,255,255,.92);box-shadow:0 14px 28px -16px rgba(15,12,14,.5);color:var(--vt-black);display:grid;place-items:center;cursor:pointer;transition:background .25s ease,color .25s ease,transform .25s ease;}
.vt-arrows button svg{width:18px;height:18px;}
.vt-arrows button:hover{background:var(--vt-black);color:var(--vt-gold);transform:scale(1.06);}
.vt-catalogo .vt-track{padding:4px clamp(64px,5vw,80px) 12px;}

.vt-track{flex:1 1 auto;min-height:0;display:flex;gap:30px;overflow-x:auto;overflow-y:hidden;padding:6px clamp(20px,2.4vw,36px) 28px;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;}
.vt-track::-webkit-scrollbar{display:none;}
.vt-track.is-drag{cursor:grabbing;}
.vt-card{flex:0 0 clamp(268px,28vw,380px);display:flex;flex-direction:column;min-height:0;}
.vt-card-img{position:relative;flex:1 1 0;min-height:96px;display:block;background:var(--vt-white);border:1px solid rgba(15,12,14,.08);box-shadow:0 18px 30px -22px rgba(15,12,14,.45);overflow:hidden;}
.vt-card-img img{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;-webkit-user-drag:none;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.vt-card:hover .vt-card-img img{transform:scale(1.04);}
.vt-card-body{padding:14px 2px 0;display:flex;flex-direction:column;gap:4px;}
.vt-card-body small{font:600 12px/1.2 "DM Sans",sans-serif;letter-spacing:.04em;color:var(--vt-gold);}
.vt-card-body h3{margin:0;font-size:25px;line-height:1.2;}
.vt-card-body h3 a{color:var(--vt-black);text-decoration:none;}
.vt-card-body h3 a:hover{color:var(--vt-gold);}
.vt-card-body p{margin:0;font-size:15px;line-height:1.5;color:var(--vt-muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.vt-card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;}
.vt-add button{display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;isolation:isolate;background:var(--vt-black);color:var(--vt-white);border:0;border-radius:99px;font:600 14px/1 "DM Sans",sans-serif;padding:14px 20px;cursor:pointer;transition:transform .2s ease,box-shadow .3s ease;}
.vt-add button .vt-icon{width:16px;height:16px;flex-basis:16px;color:var(--vt-gold);}
.vt-add button:hover{transform:translateY(-1px);box-shadow:0 12px 22px -14px rgba(15,12,14,.9);}
.vt-add button:active{transform:translateY(1px);}
.vt-card-actions > a{font:500 14px/1 "DM Sans",sans-serif;color:var(--vt-ink);text-decoration:none;border-bottom:1px solid var(--vt-gold);padding-bottom:3px;transition:color .2s ease;}
.vt-card-actions > a:hover{color:var(--vt-gold);}

.vt-empty{max-width:1280px;margin:0 auto;padding:24px 32px 40px;width:100%;box-sizing:border-box;}
.vt-empty p{font-size:18px;margin:0 0 16px;}
.vt-home .vt-empty .vt-btn-line{color:var(--vt-black);}

/* ---------- Modal de pedido ---------- */
.vt-home .fx-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,12,14,.5);opacity:0;transition:opacity .22s ease;}
.vt-home .fx-overlay.is-open{display:flex;}
.vt-home .fx-overlay.is-visible{opacity:1;}
.vt-home .fx-modal{position:relative;width:100%;max-width:440px;background:var(--vt-white);padding:34px 30px 28px;border-top:2px solid var(--vt-gold);}
.vt-home .fx-modal h3{font-size:26px;margin:0 0 10px;}
.vt-home .fx-text{margin:0;color:var(--vt-muted);font-size:15px;line-height:1.55;}
.vt-home .fx-close{position:absolute;top:8px;right:12px;background:none;border:0;font-size:28px;line-height:1;color:var(--vt-black);cursor:pointer;}
.vt-home .fx-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:26px;}
.vt-home .fx-actions button{border-radius:99px;padding:12px 20px;font:600 14px/1 "DM Sans",sans-serif;cursor:pointer;border:1px solid var(--vt-black);}
.vt-home .fx-primary{background:var(--vt-black);color:var(--vt-white);}
.vt-home .fx-secondary{background:transparent;color:var(--vt-black);}

/* ---------- Móvil (≤ 900px): diseño propio, sin bucle ---------- */
.vt-home *,.vt-home *::before,.vt-home *::after{box-sizing:border-box;}
.vt-wa-txt{display:inline;}
@media (max-width:900px){
  .vt-home{height:auto;min-height:100svh;}
  .vt-bg svg{filter:none;}
  .vt-bg::after{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.72);}
  .vt-wa-txt{display:none;}
  .vt-top-in{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:10px 16px 0;}
  .vt-logo img{height:34px;}
  .vt-tools{gap:8px;}
  .vt-wa{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;box-sizing:border-box;}
  .vt-wa .vt-icon{width:20px;height:20px;}
  .vt-pill{padding:8px 8px 8px 12px;font-size:13px;}
  .vt-pill .vt-icon{width:16px;height:16px;}
  .vt-count{min-width:22px;height:22px;font-size:11px;}
  .vt-nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start;gap:20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;}
  .vt-nav::-webkit-scrollbar{display:none;}
  .vt-nav a,.vt-nav button{font-size:14px;padding:10px 0 9px;flex:0 0 auto;}

  .vt-hero{display:flex;flex-direction:column;height:auto;}
  .vt-hero-media{order:-1;position:relative;width:100%;height:auto;aspect-ratio:1584 / 672;}
  .vt-hero-media img{inset:0;width:100%;height:100%;transform:none;}
  .vt-hero-copy{align-self:stretch;padding:24px 18px 26px;}
  .vt-hero-copy::before{margin-bottom:16px;}
  .vt-hero h1{font-size:clamp(30px,8.4vw,40px);line-height:1.08;margin:0 0 12px;}
  .vt-hero p{font-size:15px;line-height:1.6;}
  .vt-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px;}
  .vt-btn{width:100%;min-height:52px;}

  .vt-catalogo{flex:none;min-height:0;margin:0;padding:22px 0 0;border:0;border-top:1px solid var(--vt-line);border-radius:0;background:var(--vt-white);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;}
  .vt-cat-head{position:static;padding:0 18px 4px;}
  .vt-cat-head h2{font-size:24px;}
  .vt-arrows{position:static;display:flex;justify-content:flex-end;gap:10px;padding:0 18px 10px;pointer-events:auto;}
  .vt-arrows button{pointer-events:auto;width:40px;height:40px;}
  .vt-catalogo .vt-track{flex:none;min-height:0;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 18px 22px;scroll-snap-type:x mandatory;scroll-padding-inline:18px;overscroll-behavior-x:contain;cursor:auto;align-items:stretch;}
  .vt-catalogo .vt-card{flex:0 0 72vw;max-width:340px;scroll-snap-align:start;}
  .vt-card-img{flex:none;aspect-ratio:1 / 1;min-height:0;}
  .vt-card-img img{left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px);}
  .vt-card-body h3{font-size:20px;}
  .vt-card-body p{-webkit-line-clamp:2;}
  .vt-sheet{max-height:72svh;}
  .vt-sheet-in{padding:20px 18px 24px;}
  .vt-contact-grid{grid-template-columns:1fr;gap:22px;}
  .vt-empty{padding:20px 18px 32px;}
}
@media (prefers-reduced-motion:reduce){
  .vt-home *,.vt-home *::before,.vt-home *::after{animation:none!important;transition:none!important;}
}