:root{
    --negro:#0E0C09;
    --negro-suave:#181410;
    --ivory:#F7F2E6;
    --ivory-suave:#EFE4CC;
    --dorado:#C9A227;
    --dorado-claro:#E7CE7D;
    --dorado-oscuro:#8F6E17;
    --carbon:#1B1712;
    --linea:#E4D8B8;
    --serif:'Georgia','Iowan Old Style',serif;
    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --maxw:1280px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--ivory); color:var(--carbon); font-family:var(--sans); -webkit-font-smoothing:antialiased;}
  a{color:inherit; text-decoration:none;}
  img{display:block; width:100%; height:100%; object-fit:cover;}
  ul{list-style:none;}

  /* Promo */
  .promo{background:var(--negro); color:var(--dorado-claro); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:9px 12px; overflow:hidden; white-space:nowrap;}
  .promo-track{display:inline-flex; animation:marquee 26s linear infinite;}
  .promo span{margin:0 18px;}
  @keyframes marquee{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

  /* Header */
  header{position:sticky; top:0; z-index:50; background:rgba(247,242,230,.95); backdrop-filter:blur(6px); border-bottom:1px solid var(--linea);}
  .topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 18px;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand img{width:42px; height:42px; border-radius:50%; object-fit:cover;}
  .brand-name{font-family:var(--serif); font-style:italic; font-size:19px; letter-spacing:.01em; color:var(--negro);}
  .nav-desktop{display:none; gap:24px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; position:relative;}
  .nav-desktop > li{position:relative; padding:6px 0;}
  .nav-desktop a{border-bottom:2px solid transparent; padding-bottom:4px;}
  .nav-desktop > li:hover > a{color:var(--dorado-oscuro); border-color:var(--dorado);}
  .dropdown{display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--linea); border-radius:8px; padding:10px 0; min-width:170px; box-shadow:0 14px 30px rgba(0,0,0,.1); z-index:5;}
  .nav-desktop > li:hover .dropdown{display:block;}
  .dropdown a{display:block; padding:8px 16px; font-size:11px; letter-spacing:.03em; border:none;}
  .dropdown a:hover{background:var(--ivory-suave); color:var(--dorado-oscuro);}
  .topbar-icons{display:flex; gap:14px; align-items:center;}
  .icon-btn{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ivory-suave); font-size:13px; position:relative; transition:transform .2s ease;}
  .icon-btn:hover{transform:translateY(-2px);}
  .cart-count{position:absolute; top:-4px; right:-4px; background:var(--dorado); color:#fff; font-size:9px; font-weight:700; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .menu-mobile{display:block; font-size:19px;}

  .cats-scroll{display:flex; gap:8px; overflow-x:auto; padding:0 18px 12px; scrollbar-width:none;}
  .cats-scroll::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto; padding:7px 15px; border:1px solid var(--linea); border-radius:20px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; background:#fff; white-space:nowrap; transition:.25s ease;}
  .chip.active{background:var(--negro); color:var(--dorado-claro); border-color:var(--negro);}

  /* Hero */
  .hero{position:relative; margin:14px 18px; border-radius:16px; overflow:hidden; min-height:420px; display:flex; align-items:flex-end;}
  .hero img{position:absolute; inset:0; z-index:0;}
  .hero::after{content:"";position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,12,9,.88) 0%, rgba(14,12,9,.25) 55%, rgba(14,12,9,.4) 100%); z-index:1;}
  canvas.sparkle{position:absolute; inset:0; z-index:2; pointer-events:none;}
  .hero-content{position:relative; z-index:3; padding:28px 24px 30px; color:var(--ivory); max-width:480px;}
  .hero-eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--dorado-claro); margin-bottom:10px;
    opacity:0; transform:translateY(14px); animation:heroIn .7s ease .05s forwards;}
  .hero h1{font-family:var(--serif); font-style:italic; font-weight:400; font-size:33px; line-height:1.15; margin-bottom:14px;
    opacity:0; transform:translateY(14px); animation:heroIn .7s ease .18s forwards;}
  .hero p{font-size:13.5px; opacity:.9; max-width:360px; margin-bottom:20px;
    opacity:0; transform:translateY(14px); animation:heroIn .7s ease .3s forwards;}
  .hero-ctas{display:flex; gap:10px; flex-wrap:wrap;
    opacity:0; transform:translateY(14px); animation:heroIn .7s ease .42s forwards;}
  @keyframes heroIn{to{opacity:1; transform:translateY(0);}}
  .btn-gold{display:inline-flex; align-items:center; gap:8px; background:var(--dorado); color:var(--negro); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:12px 20px; border-radius:30px; transition:transform .25s ease, box-shadow .25s ease;}
  .btn-gold:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.3);}
  .btn-outline{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ivory); color:var(--ivory); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:12px 20px; border-radius:30px; transition:.25s ease;}
  .btn-outline:hover{background:rgba(247,242,230,.12);}

  /* Secciones */
  .section{padding:38px 18px 8px;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
  .section-head h2{font-family:var(--serif); font-style:italic; font-weight:400; font-size:21px; color:var(--negro);}
  .section-head a{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--carbon); padding-bottom:2px; white-space:nowrap;}

  .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .card{background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--linea); transition:transform .35s ease, box-shadow .35s ease;}
  .card:hover{transform:translateY(-6px); box-shadow:0 14px 26px rgba(20,16,10,.12);}
  .card-photo{position:relative; aspect-ratio:3/4; width:100%; overflow:hidden; background:var(--ivory-suave);}
  .card-photo img{transition:transform .5s ease;}
  .card:hover .card-photo img{transform:scale(1.06);}
  .badge-new{position:absolute; top:8px; left:8px; background:var(--negro); color:var(--dorado-claro); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:10px; z-index:2;}
  .fav-btn{position:absolute; top:8px; right:8px; width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,.88); display:flex; align-items:center; justify-content:center; font-size:11px; z-index:2; transition:transform .25s ease;}
  .fav-btn:hover{transform:scale(1.12);}
  .card-info{padding:12px 13px 15px;}
  .card-info .marca-tag{font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--dorado-oscuro); margin-bottom:3px; font-weight:700;}
  .card-info .nombre{font-size:12px; font-weight:600; margin-bottom:4px; line-height:1.28;}
  .card-info .precio{font-size:13px; color:var(--negro); font-weight:700;}

  /* Bloque Únnica / Virtuossa */
  .marcas{padding:38px 18px 10px;}
  .marcas-head{text-align:center; margin-bottom:20px;}
  .marcas-head .eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--dorado-oscuro); margin-bottom:8px;}
  .marcas-head h2{font-family:var(--serif); font-style:italic; font-size:24px; color:var(--negro);}
  .marcas-grid{display:grid; grid-template-columns:1fr; gap:14px;}
  .marca-card{position:relative; border-radius:16px; overflow:hidden; min-height:280px; display:flex; align-items:flex-end;}
  .marca-card img{position:absolute; inset:0;}
  .marca-card::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,12,9,.85), rgba(14,12,9,.1) 60%);}
  .marca-copy{position:relative; z-index:2; padding:22px; color:var(--ivory);}
  .marca-copy .tag{display:inline-block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; background:var(--dorado); color:var(--negro); padding:4px 10px; border-radius:12px; margin-bottom:10px; font-weight:700;}
  .marca-copy h3{font-family:var(--serif); font-style:italic; font-size:26px; margin-bottom:6px;}
  .marca-copy p{font-size:12px; opacity:.85; max-width:260px;}

  /* Nuestra esencia */
  .esencia{margin:44px 18px; text-align:center; padding:38px 22px; position:relative;}
  .esencia canvas.linea{display:block; margin:0 auto 20px; width:120px; height:28px;}
  .esencia .eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--dorado-oscuro); margin-bottom:12px;}
  .esencia h2{font-family:var(--serif); font-style:italic; font-size:24px; margin-bottom:14px; color:var(--negro);}
  .esencia p{font-size:13.5px; line-height:1.7; color:#4a4030; max-width:560px; margin:0 auto;}

  /* Beneficios */
  .beneficios{background:var(--negro); color:var(--ivory); padding:40px 18px; margin-top:10px;}
  .beneficios-head{text-align:center; margin-bottom:26px;}
  .beneficios-head .eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--dorado-claro); margin-bottom:8px;}
  .beneficios-head h2{font-family:var(--serif); font-style:italic; font-size:22px;}
  .beneficios-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .beneficio{text-align:center; padding:14px 8px;}
  .beneficio .ic{font-size:24px; color:var(--dorado-claro); margin-bottom:10px;}
  .beneficio h4{font-size:12.5px; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
  .beneficio p{font-size:11px; opacity:.7; line-height:1.5;}

  /* Instagram */
  .insta{padding:40px 18px 10px; text-align:center;}
  .insta .eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--dorado-oscuro); margin-bottom:8px;}
  .insta h2{font-family:var(--serif); font-style:italic; font-size:22px; margin-bottom:6px; color:var(--negro);}
  .insta .handle{font-size:12.5px; color:var(--dorado-oscuro); margin-bottom:18px; display:inline-block;}
  .insta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
  .insta-grid .ph{position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:6px;}
  .insta-grid .ph::after{content:"♡"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(14,12,9,0); color:#fff; font-size:18px; opacity:0; transition:.25s ease;}
  .insta-grid .ph:hover::after{background:rgba(14,12,9,.35); opacity:1;}

  /* Frase final */
  .frase-final{background:linear-gradient(120deg, var(--negro) 0%, #241d12 100%); color:var(--ivory); text-align:center; padding:52px 24px; margin-top:42px; position:relative; overflow:hidden;}
  .frase-final h2{font-family:var(--serif); font-style:italic; font-weight:400; font-size:24px; line-height:1.4; max-width:520px; margin:0 auto; position:relative; z-index:2;}
  .frase-final .marca-mini{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dorado-claro); margin-top:14px; position:relative; z-index:2;}

  /* Footer / contacto */
  footer{background:var(--negro-suave); color:#d9cfba; padding:36px 18px 110px;}
  .footer-grid{display:flex; flex-direction:column; gap:26px;}
  .logo-f{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .logo-f img{width:38px; height:38px; border-radius:50%;}
  .logo-f span{font-family:var(--serif); font-style:italic; font-size:19px; color:#fff;}
  footer p{font-size:12px; line-height:1.7; opacity:.8;}
  .footer-col h4{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--dorado-claro); margin-bottom:12px;}
  .footer-links{display:flex; flex-direction:column; gap:8px;}
  .footer-links a{font-size:12px; opacity:.85;}
  .footer-links a:before{content:"— "; opacity:.5;}
  .footer-bottom{margin-top:24px; padding-top:18px; border-top:1px solid #332b1e; font-size:10px; opacity:.55;}

  /* WhatsApp + nav inferior */
  .wa-float{position:fixed; bottom:18px; right:18px; z-index:60; background:#25D366; color:#fff; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:23px; animation:waPulse 2.6s ease-in-out infinite;}
  @keyframes waPulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.45);} 50%{box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 10px rgba(37,211,102,0);}}
  .bottomnav{position:fixed; bottom:0; left:0; right:0; z-index:55; background:#fff; border-top:1px solid var(--linea); display:flex; justify-content:space-around; padding:10px 8px calc(10px + env(safe-area-inset-bottom));}
  .bn-item{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; color:#9c9086;}
  .bn-item.active{color:var(--dorado-oscuro); font-weight:700;}
  .bn-ic{font-size:16px;}

  [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  [data-reveal].in-view{opacity:1; transform:translateY(0);}
  [data-reveal-stagger] > *{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
  [data-reveal-stagger].in-view > *{opacity:1; transform:translateY(0);}
  [data-reveal-stagger].in-view > *:nth-child(1){transition-delay:.04s;}
  [data-reveal-stagger].in-view > *:nth-child(2){transition-delay:.1s;}
  [data-reveal-stagger].in-view > *:nth-child(3){transition-delay:.16s;}
  [data-reveal-stagger].in-view > *:nth-child(4){transition-delay:.22s;}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    [data-reveal], [data-reveal-stagger] > *{opacity:1; transform:none;}
  }

  /* ===== Desktop ===== */
  @media (min-width:900px){
    .menu-mobile{display:none;}
    .nav-desktop{display:flex;}
    .topbar{padding:16px 36px; max-width:var(--maxw); margin:0 auto;}
    .cats-scroll{display:none;}
    .bottomnav{display:none;}
    .section, .marcas, .insta{padding-left:36px; padding-right:36px;}
    .section-head h2{font-size:26px;}
    .grid{grid-template-columns:repeat(4,1fr); gap:20px;}
    .hero{margin:22px 36px; min-height:520px;}
    .hero h1{font-size:48px; max-width:600px;}
    .hero p{font-size:15px; max-width:420px;}
    .marcas-grid{grid-template-columns:1fr 1fr;}
    .marca-card{min-height:360px;}
    .beneficios-grid{grid-template-columns:repeat(4,1fr); max-width:var(--maxw); margin:0 auto;}
    .insta-grid{grid-template-columns:repeat(6,1fr); max-width:var(--maxw); margin:0 auto;}
    footer{padding:52px 36px;}
    .footer-grid{flex-direction:row; justify-content:space-between; max-width:var(--maxw); margin:0 auto;}
    .wa-float{bottom:26px; right:26px;}
    .esencia p{font-size:15px;}
  }

/* Misión y Visión */
.mision-vision{padding:44px 18px 10px;}
.mv-head{text-align:center; margin-bottom:24px;}
.mv-head .eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--dorado-oscuro); margin-bottom:8px;}
.mv-head h2{font-family:var(--serif); font-style:italic; font-size:24px; color:var(--negro);}
.mv-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.mv-card{background:#fff; border:1px solid var(--linea); border-radius:16px; padding:28px 24px; text-align:center; transition:transform .35s ease, box-shadow .35s ease;}
.mv-card:hover{transform:translateY(-6px); box-shadow:0 14px 26px rgba(20,16,10,.1);}
.mv-icon{width:50px; height:50px; border-radius:50%; background:var(--negro); color:var(--dorado-claro); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 16px; transition:transform .6s ease;}
.mv-card:hover .mv-icon{transform:rotate(180deg);}
.mv-card h3{font-family:var(--serif); font-style:italic; font-size:19px; margin-bottom:10px; color:var(--negro);}
.mv-card p{font-size:13px; line-height:1.65; color:#4a4030;}
@media (min-width:900px){
  .mision-vision{padding-left:36px; padding-right:36px;}
  .mv-grid{grid-template-columns:1fr 1fr; max-width:900px; margin:0 auto; gap:22px;}
  .mv-card{padding:36px 30px;}
}