:root{
    --cream:#fdf8f6;
    --blush:#f7e7e1;
    --blush-soft:#fbeee9;
    --rose:#d99a8b;
    --rose-dark:#b06e5f;
    --rose-deep:#8f4f43;
    --gold:#c9a876;
    --text-dark:#3a2a28;
    --text-soft:#7a6560;
    --white:#ffffff;
    --shadow: 0 20px 50px -20px rgba(150, 90, 75, 0.25);
    --radius: 24px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;scroll-padding-top:90px;}

  body{
    font-family:'Poppins', sans-serif;
    color:var(--text-dark);
    background:var(--cream);
    line-height:1.65;
    overflow-x:hidden;
  }
  body.modal-open{overflow:hidden;}

  img{max-width:100%;display:block;}

  h1,h2,h3,h4{
    font-family:'Playfair Display', serif;
    font-weight:600;
    line-height:1.2;
    color:var(--rose-deep);
  }

  a{color:inherit;text-decoration:none;}

  .container{
    max-width:1140px;
    margin:0 auto;
    padding:0 24px;
  }

  section{padding:100px 0;position:relative;}

  .eyebrow{
    display:inline-block;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--rose-dark);
    font-weight:600;
    margin-bottom:16px;
  }

  .section-title{
    font-size:clamp(28px, 4vw, 42px);
    margin-bottom:18px;
  }

  .section-intro{
    max-width:620px;
    color:var(--text-soft);
    font-size:17px;
    margin-bottom:56px;
  }

  .center{text-align:center;margin-left:auto;margin-right:auto;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 32px;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
    transition:transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
    border:none;
    /* Sin esto, tocar el botón en mobile deja el recuadro celeste de
       resaltado táctil por defecto del navegador (mismo problema que ya
       vimos con las tarjetas del catálogo). */
    -webkit-tap-highlight-color:transparent;
    /* Sin resetear esto, el navegador puede aplicar su estilo nativo de
       :focus (algunos motores lo renderizan con un offset propio), lo que
       se sentía como que el botón "saltaba" al quedar enfocado y volvía a
       su lugar al perder el foco (ej. al tocar el stepper de al lado). */
    -webkit-appearance:none;appearance:none;outline:none;
  }
  .btn svg{width:18px;height:18px;flex-shrink:0;}
  .btn:focus-visible{outline:2px solid var(--rose-deep);outline-offset:2px;}
  .btn-primary{
    background:linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
    color:#fff;
    box-shadow:0 12px 30px -10px rgba(176,110,95,0.6);
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 36px -10px rgba(176,110,95,0.7);}
  .btn-outline{
    background:transparent;
    border:1.5px solid var(--rose-dark);
    color:var(--rose-deep);
  }
  .btn-outline:hover{background:var(--rose-dark);color:#fff;}
    /*transform:translateY(-3px);}*/
  .btn-white{
    background:#fff;
    color:var(--rose-deep);
  }
  .btn-white:hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(0,0,0,0.2);}

  .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}

  /* ---------- Nav ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(253,248,246,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(180,120,105,0.1);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 24px;
    max-width:1140px;
    margin:0 auto;
    font-family:'Inter',sans-serif;
  }
  .logo{
    font-family:'Playfair Display', serif;
    font-size:20px;
    font-weight:700;
    color:var(--rose-deep);
    letter-spacing:0.5px;
  }
  header .logo{font-family:'Inter',sans-serif;font-weight:700;}
  .logo span{color:var(--gold);}
  .nav-links{
    display:flex;
    gap:32px;
    font-size:14px;
    font-weight:500;
    font-family:'Inter',sans-serif;
  }
  .nav-links a{color:var(--text-dark);opacity:0.8;transition:opacity .2s;}
  .nav-links a:hover{opacity:1;color:var(--rose-dark);}
  .nav-cta{display:flex;align-items:center;gap:16px;}
  .nav .btn{padding:10px 22px;font-size:13px;}
  .menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--rose-deep);cursor:pointer;}

  @media(max-width:820px){
    .nav-links{
      position:absolute;
      top:100%;left:0;right:0;
      background:var(--cream);
      flex-direction:column;
      align-items:center;
      gap:0;
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease, box-shadow .35s ease;
      border-bottom:1px solid rgba(180,120,105,0.1);
    }
    /* Más que de sobra para las 7 opciones + padding: un max-height fijo
       más ajustado (320px) las recortaba (overflow:hidden), la última
       quedaba cortada a la mitad. */
    .nav-links.open{max-height:520px;box-shadow:0 16px 28px -14px rgba(58,42,40,0.25);}
    .nav-links a{padding:16px 0;width:100%;text-align:center;}
    .nav-links a:not(:last-child){border-bottom:1px solid rgba(180,120,105,0.08);}
    .menu-toggle{display:block;}
    .nav-cta .btn-outline{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    padding:180px 0 120px;
    background:
      radial-gradient(circle at 85% 15%, rgba(217,154,139,0.25), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(201,168,118,0.18), transparent 40%),
      var(--blush-soft);
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:64px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(34px, 5vw, 56px);
    margin-bottom:22px;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--gold);
  }
  .hero p.lead{
    font-size:18px;
    color:var(--text-soft);
    max-width:480px;
    margin-bottom:36px;
  }
  .trust-row{
    display:flex;
    gap:28px;
    margin-top:44px;
    flex-wrap:wrap;
  }
  .trust-item{font-size:13px;color:var(--text-soft);}
  .trust-item strong{display:block;font-family:'Playfair Display',serif;font-size:24px;color:var(--rose-deep);}

  /* placeholder photo frame */
  .photo-frame{
    position:relative;
    border-radius:var(--radius);
    background:linear-gradient(160deg, var(--blush) 0%, #efd6cb 100%);
    aspect-ratio:4/5;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    overflow:hidden;
    border:2px dashed rgba(176,110,95,0.35);
  }
  .photo-frame.square{aspect-ratio:1/1;}
  .photo-frame.wide{aspect-ratio:16/10;}
  .photo-frame .ph-inner{
    text-align:center;
    color:var(--rose-dark);
    padding:24px;
  }
  .photo-frame .ph-inner svg{width:40px;height:40px;margin-bottom:10px;opacity:.7;}
  .photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 25%;}
  .photo-frame:has(img){border:none;}
  .photo-frame .ph-inner span{
    display:block;
    font-size:12.5px;
    font-weight:500;
    opacity:.75;
    max-width:200px;
    margin:0 auto;
  }
  .hero-photo-wrap{position:relative;}
  .floating-badge{
    position:absolute;
    bottom:-18px;left:-18px;
    background:#fff;
    padding:10px 14px;
    border-radius:16px;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    gap:10px;
    max-width:210px;
  }
  .floating-badge .dot{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--rose),var(--gold));
    flex-shrink:0;
  }
  .floating-badge p{font-size:10.5px;color:var(--text-soft);line-height:1.35;}
  .floating-badge strong{display:block;font-size:12px;color:var(--rose-deep);}

  /* icon-circle social buttons (hero + final CTA) */
  .social-icons{display:flex;gap:14px;}
  .social-icons a{
    width:46px;height:46px;border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 24px -12px rgba(150,90,75,0.35);
    color:var(--rose-dark);
    transition:transform .25s;
  }
  .social-icons a:hover{transform:translateY(-4px);background:var(--rose-dark);color:#fff;}
  .social-icons svg{width:20px;height:20px;}
  .social-icons.lg a{width:56px;height:56px;box-shadow:0 14px 28px -12px rgba(150,90,75,0.4);}
  .social-icons.lg svg{width:24px;height:24px;}

  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;row-gap:32px;}
    .hero{padding:100px 0 60px;}
    .hero-photo-wrap{
      order:-1;
      width:100vw;
      max-width:100vw;
      margin:0 calc(50% - 50vw) 32px;
      position:relative;
    }
    .hero-photo-wrap .photo-frame{
      aspect-ratio:3/4;
      border-radius:0;
      border:none;
      box-shadow:none;
      mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 85%, transparent 100%);
      -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 85%, transparent 100%);
    }
    .hero-photo-wrap .photo-frame img{
      transform:scale(1.4);
      object-position:center 18%;
    }
    .floating-badge{
      position:absolute;
      top:auto;bottom:22px;left:auto;right:14px;
      width:fit-content;
      max-width:168px;
      padding:10px 14px;
      gap:10px;
    }
    .floating-badge .dot{width:28px;height:28px;}
    .floating-badge p{font-size:12px;line-height:1.4;}
    .floating-badge strong{font-size:13px;}
  }
  @media(max-width:600px){
    .floating-badge{max-width:155px;padding:9px 12px;}
  }

  /* ---------- Carousels (shared) ---------- */
  .carousel{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:22px;
    padding:6px 11% 20px;
    scrollbar-width:none;
  }
  .carousel::-webkit-scrollbar{display:none;}
  .carousel > *{scroll-snap-align:center;}

  /* ---------- Pillars / photo cards ---------- */
  .pillar-card{
    flex:0 0 78%;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 34px -18px rgba(150,90,75,0.25);
  }
  .pillar-photo{position:relative;}
  .pillar-photo .photo-frame{border-radius:0;aspect-ratio:4/3;}
  .pillar-icon{
    position:absolute;
    top:14px;left:14px;
    width:44px;height:44px;
    border-radius:14px;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px -8px rgba(0,0,0,0.25);
  }
  .pillar-icon svg{width:22px;height:22px;color:var(--rose-dark);}
  .pillar-body{padding:22px 24px 26px;}
  .pillar-card h3{font-size:18px;margin-bottom:8px;}
  .pillar-card p{font-size:14px;color:var(--text-soft);}

  @media(min-width:601px){.pillar-card{flex:0 0 44%;}}
  @media(min-width:1000px){.pillar-card{flex:0 0 29%;}}

  /* ---------- Mobile tightening ---------- */
  @media(max-width:600px){
    section{padding:64px 0;}
    .container{padding:0 20px;}
    .hero{padding:80px 0 64px;}
    .floating-badge{
      left:12px;right:12px;bottom:-18px;
      max-width:none;padding:14px 16px;
    }
    .trust-row{gap:20px;margin-top:32px;}
    .producto-grid{padding:18px 20px 28px;}
    .negocio-section{padding:36px 20px;border-radius:22px;}
    .final-cta{padding:70px 0 64px;}
    .footer-inner{justify-content:center;text-align:center;}
  }

  /* ---------- Rutina section (day/night toggle) ---------- */
  .rutina-section{
    position:relative;
    overflow:hidden;
    --sect-title:var(--rose-deep);
    --sect-text:var(--text-soft);
    --card-bg:#fff;
    --card-text:var(--text-soft);
  }
  .rutina-section[data-mode="night"]{
    --sect-title:#fff;
    --sect-text:rgba(255,255,255,0.75);
    --card-bg:rgba(255,255,255,0.08);
    --card-text:rgba(255,255,255,0.82);
  }
  .rutina-section > .container{position:relative;z-index:1;}
  .rutina-bg{
    position:absolute;inset:0;z-index:0;
    opacity:0;
    transition:opacity .9s ease;
  }
  .rutina-bg.bg-day{
    opacity:1;
    background:linear-gradient(180deg,#d9edf9 0%,var(--blush-soft) 100%);
  }
  .rutina-bg.bg-day::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(70px 24px at 14% 20%, rgba(255,255,255,0.65), transparent 70%),
      radial-gradient(90px 28px at 78% 12%, rgba(255,255,255,0.55), transparent 70%),
      radial-gradient(60px 20px at 50% 30%, rgba(255,255,255,0.4), transparent 70%);
  }
  .rutina-bg.bg-night{
    background:linear-gradient(160deg,#221c3f 0%,#2d2350 60%,#3a2a58 100%);
  }
  .rutina-bg.bg-night::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(1.6px 1.6px at 10% 15%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 22% 42%,#fff,transparent),
      radial-gradient(1.8px 1.8px at 35% 10%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 48% 32%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 60% 8%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 72% 38%,#fff,transparent),
      radial-gradient(1.8px 1.8px at 85% 14%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 92% 45%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 16% 65%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 42% 70%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 66% 62%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 88% 68%,#fff,transparent);
  }
  .rutina-section[data-mode="night"] .bg-day{opacity:0;}
  .rutina-section[data-mode="night"] .bg-night{opacity:1;}

  .rutina-section .section-title{color:var(--sect-title);transition:color .6s ease;}
  .rutina-section .section-intro{color:var(--sect-text);transition:color .6s ease;}

  .rutina-toggle{
    display:inline-flex;
    background:#fff;
    border-radius:50px;
    padding:6px;
    gap:4px;
    margin-bottom:8px;
    box-shadow:0 8px 20px -12px rgba(150,90,75,0.3);
    transition:background .6s ease;
  }
  .rutina-section[data-mode="night"] .rutina-toggle{background:rgba(255,255,255,0.08);}
  .rutina-tab{
    border:none;background:transparent;cursor:pointer;
    padding:10px 24px;border-radius:50px;
    font-family:'Poppins',sans-serif;
    font-weight:600;font-size:14px;
    color:var(--text-soft);
    transition:background .3s,color .3s;
  }
  .rutina-section[data-mode="night"] .rutina-tab{color:rgba(255,255,255,0.7);}
  .rutina-tab.active{background:linear-gradient(135deg,var(--rose),var(--rose-dark));color:#fff;}

  .rutina-sky{position:absolute;top:18px;right:20px;width:44px;height:44px;overflow:hidden;z-index:1;}
  .rutina-sky .sun,.rutina-sky .moon{
    position:absolute;inset:0;font-size:26px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .6s ease,opacity .6s ease;
  }
  .rutina-sky .sun{transform:translateY(0);opacity:1;}
  .rutina-sky .moon{transform:translateY(36px);opacity:0;}
  .rutina-section[data-mode="night"] .sun{transform:translateY(-36px);opacity:0;}
  .rutina-section[data-mode="night"] .moon{transform:translateY(0);opacity:1;}
  .rutina-sky .stars{position:absolute;inset:-10px;opacity:0;transition:opacity .6s ease;}
  .rutina-section[data-mode="night"] .stars{opacity:1;}
  .rutina-sky .stars::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(1.6px 1.6px at 12% 30%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 30% 65%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 50% 20%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 68% 55%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 85% 25%,#fff,transparent);
  }

  .rutina-panels{position:relative;max-width:520px;}
  .rutina-card{
    display:none;
    background:var(--card-bg);
    border-radius:20px;
    padding:32px;
    box-shadow:0 12px 34px -18px rgba(150,90,75,0.2);
    transition:background .6s ease;
  }
  .rutina-card.active{display:block;animation:fadeIn .5s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .rutina-card h3{
    display:flex;align-items:center;gap:10px;
    font-size:20px;margin-bottom:20px;
    color:var(--sect-title);
  }
  .rutina-list{list-style:none;}
  .rutina-list li{
    display:flex;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid rgba(176,110,95,0.1);
    font-size:14.5px;
    color:var(--card-text);
  }
  .rutina-list li:last-child{border-bottom:none;}
  .rutina-list .num{
    flex-shrink:0;
    width:26px;height:26px;
    border-radius:50%;
    background:var(--blush);
    color:var(--rose-deep);
    font-size:12px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .note-honesty{
    margin-top:36px;
    background:var(--card-bg);
    border-left:4px solid var(--gold);
    border-radius:12px;
    padding:20px 24px;
    font-size:14px;
    color:var(--card-text);
    max-width:720px;
    transition:background .6s ease,color .6s ease;
  }
  .note-honesty strong{color:var(--sect-title);}

  /* ---------- Testimonios ---------- */
  .testi-card{
    flex:0 0 78%;
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 12px 30px -18px rgba(150,90,75,0.22);
  }
  @media(min-width:601px){.testi-card{flex:0 0 44%;}}
  @media(min-width:1000px){.testi-card{flex:0 0 29%;}}
  .stars{color:var(--gold);font-size:14px;margin-bottom:14px;letter-spacing:2px;}
  .testi-card p.quote{font-size:14.5px;color:var(--text-soft);margin-bottom:20px;font-style:italic;}
  .testi-person{display:flex;align-items:center;gap:12px;}
  .testi-avatar{
    width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg,var(--rose),var(--gold));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:13px;font-weight:700;
  }
  .testi-person strong{font-size:13.5px;display:block;}
  .testi-person span{font-size:12px;color:var(--text-soft);}

  /* ---------- Producto destacado ---------- */
  .producto-section{background:var(--blush-soft);}
  .producto-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    align-content:start;
    align-items:start;
    gap:56px;
    background:#fff;
    border-radius:28px;
    padding:36px 56px 56px;
    box-shadow:var(--shadow);
    cursor:pointer;
  }
  .producto-grid .photo-frame{box-shadow:none;background:#fff;}
  .producto-grid h3{font-size:26px;line-height:1.25;margin-bottom:16px;min-height:2.5em;}
  .producto-grid-desc{max-height:100px;overflow-y:auto;margin-bottom:22px;}
  .producto-grid p{color:var(--text-soft);font-size:15px;margin:0;}
  .beneficios{list-style:none;margin-bottom:28px;}
  .beneficios li{
    display:flex;gap:10px;align-items:flex-start;
    font-size:14.5px;color:var(--text-dark);
    margin-bottom:10px;
  }
  .beneficios svg{width:18px;height:18px;color:var(--rose-dark);flex-shrink:0;margin-top:2px;}

  @media(max-width:900px){
    .producto-grid{grid-template-columns:1fr;gap:24px;padding:24px 24px 36px;}
  }
  .producto-carousel{padding:6px 6% 20px;align-items:flex-start;}
  .producto-carousel .producto-grid{flex:0 0 100%;}
  @media(min-width:700px){.producto-carousel .producto-grid{flex:0 0 88%;}}
  @media(min-width:1000px){
    .producto-carousel{padding:6px 2% 20px;}
    .producto-carousel .producto-grid{
      flex:0 0 31%;
      grid-template-columns:1fr;
      gap:20px;
      padding:20px 22px 26px;
    }
    .producto-carousel .producto-grid .photo-frame{aspect-ratio:4/5;}
    .producto-carousel .producto-grid h3{font-size:19px;min-height:auto;margin-bottom:8px;}
    .producto-carousel .producto-grid-desc{max-height:72px;margin-bottom:16px;}
  }

  /* ---------- Catálogo completo ---------- */
  .catalogo-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
  }
  .catalogo-tab{
    display:flex;
    align-items:center;
    gap:8px;
    border:1.5px solid rgba(176,110,95,0.3);
    background:#fff;
    color:var(--rose-deep);
    padding:10px 20px;
    border-radius:50px;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:13.5px;
    cursor:pointer;
    transition:background .25s,color .25s,transform .25s;
  }
  @media(hover:hover){
    .catalogo-tab:hover{transform:translateY(-2px);}
  }
  .catalogo-tab.active{
    background:var(--rose-deep);
    color:#fff;
    border-color:var(--rose-deep);
  }
  @media(hover:hover){
    .catalogo-tab.active:hover{background:var(--rose-deep);color:#fff;}
  }
  .catalogo-tab-emoji{font-size:20px;line-height:1;flex:none;}
  @media(max-width:600px){
    .catalogo-tabs{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;}
    .catalogo-tabs-break{flex-basis:100%;order:1;width:0;height:0;margin:0;padding:0;}
    .catalogo-tab{
      order:0;
      display:flex;align-items:center;justify-content:center;gap:0;
      width:46px;height:46px;padding:0;border-radius:50%;
      box-shadow:0 10px 24px -12px rgba(150,90,75,0.35);
      max-width:70vw;white-space:nowrap;
      transition:background .25s,color .25s;
    }
    .catalogo-tab.active{
      order:2;
      width:auto;padding:0 18px;border-radius:50px;
      justify-content:flex-start;gap:8px;
      transition:border-radius .35s ease,padding .35s ease,background .25s,color .25s;
    }
    .catalogo-tab .catalogo-tab-label{
      display:grid;grid-template-columns:0fr;opacity:0;
    }
    .catalogo-tab .catalogo-tab-label > span{overflow:hidden;min-width:0;}
    .catalogo-tab.active .catalogo-tab-label{
      grid-template-columns:1fr;opacity:1;
      transition:grid-template-columns .35s ease,opacity .2s ease;
    }
  }
  .catalogo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:24px;
  }
  .catalogo-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 30px -20px rgba(150,90,75,0.3);
    display:flex;
    flex-direction:column;
    position:relative;
    animation:catalogoCardIn .4s ease both;
  }
  @keyframes catalogoCardIn{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:none;}
  }
  .catalogo-card .photo-frame{border-radius:0;aspect-ratio:1/1;background:#fff;}
  .catalogo-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;}
  .catalogo-card h4{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:14.5px;
    color:var(--text-dark);
    margin-bottom:10px;
    line-height:1.35;
    min-height:2.7em;
  }
  .catalogo-price{
    display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  }
  .catalogo-price .before{
    text-decoration:line-through;
    color:var(--text-soft);
    font-family:'Inter',sans-serif;
    font-size:12.5px;
  }
  .catalogo-price .now{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:19px;
    letter-spacing:-.2px;
    color:var(--rose-deep);
  }
  .catalogo-price-badge{
    position:absolute;bottom:8px;right:8px;z-index:1;
    background:rgba(255,255,255,0.94);
    border-radius:10px;padding:5px 9px;
    display:flex;flex-direction:column;align-items:flex-end;
    box-shadow:0 4px 12px -4px rgba(0,0,0,0.3);
  }
  .catalogo-price-badge .before{
    text-decoration:line-through;color:var(--text-soft);
    font-family:'Inter',sans-serif;font-size:10px;line-height:1.3;
  }
  .catalogo-price-badge .now{
    font-family:'Inter',sans-serif;font-weight:700;font-size:14px;
    letter-spacing:-.2px;color:var(--rose-deep);line-height:1.3;
  }
  .catalogo-card-actions{display:flex;justify-content:center;gap:8px;margin-top:auto;}
  .catalogo-card-actions .qty-stepper{flex:1;justify-content:center;gap:6px;}
  .catalogo-card-actions .qty-stepper button{width:30px;height:30px;font-size:16px;}
  .catalogo-card-actions .qty-stepper span{font-size:15px;}
  .catalogo-card .btn{
    padding:10px 18px;
    font-size:12.5px;
    justify-content:center;
    width:100%;
  }
  .btn-add-cart,.btn-wa-icon{
    flex:none;
    width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(176,110,95,0.3);
    background:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s,color .2s,transform .2s;
    -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;outline:none;
  }
  .btn-add-cart:focus-visible,.btn-wa-icon:focus-visible{outline:2px solid var(--rose-deep);outline-offset:2px;}
  .btn-add-cart{color:var(--rose-deep);}
  .btn-wa-icon{color:#25D366;}
  .btn-add-cart svg,.btn-wa-icon svg{width:18px;height:18px;}
  @media(hover:hover){
    .btn-add-cart:hover{background:var(--rose-deep);color:#fff;}
    .btn-wa-icon:hover{background:#25D366;color:#fff;}
  }
  .btn-cart,.btn-avail{
    background:#f1e4d8;
    color:var(--rose-deep);
  }
  .btn-cart:hover,.btn-avail:hover{background:#e8d5c2;transform:translateY(-3px);box-shadow:0 18px 36px -10px rgba(0,0,0,0.15);}
  .btn-cart svg{width:20px;height:20px;order:1;}
  .catalogo-badge{
    position:absolute;
    top:12px;left:12px;
    background:rgba(58,42,40,0.85);
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:5px 12px;
    border-radius:50px;
    z-index:1;
  }
  .catalogo-loading{color:var(--text-soft);font-size:14px;}
  .catalogo-card.skeleton .photo-frame,
  .producto-grid.skeleton .photo-frame,
  .skeleton-line{
    background:linear-gradient(90deg,#f1e4d8 25%,#f8efe7 37%,#f1e4d8 63%);
    background-size:400% 100%;
    animation:skeletonShimmer 1.4s ease infinite;
  }
  .catalogo-card.skeleton .catalogo-card-body{gap:12px;}
  .skeleton-line{height:14px;border-radius:8px;}
  .skeleton-line.btn{height:36px;margin-top:auto;}
  .catalogo-card.skeleton,
  .producto-grid.skeleton{cursor:default;pointer-events:none;}
  @keyframes skeletonShimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
  @media(max-width:600px){
    .catalogo-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:14px;}
  }
  /* Sin esto, tocar un botón anidado (agregar al carrito, +/-) resalta en
     mobile el rectángulo táctil por defecto del navegador sobre toda la
     card contenedora (que es "clickeable" por el cursor:pointer), no solo
     sobre el botón — se ve como un flash de toda la tarjeta al tocar. */
  .catalogo-card{cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .catalogo-card-actions button,.catalogo-card-actions a{-webkit-tap-highlight-color:transparent;}

  .catalogo-pagination{
    display:flex;align-items:center;justify-content:center;gap:16px;
    margin:0 0 20px;
  }
  .catalogo-page-btn{
    width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(176,110,95,0.3);
    background:#fff;color:var(--rose-deep);font-size:18px;cursor:pointer;
    transition:background .2s,color .2s;
  }
  .catalogo-page-btn:disabled{opacity:.35;cursor:default;}
  @media(hover:hover){
    .catalogo-page-btn:not(:disabled):hover{background:var(--rose-deep);color:#fff;}
  }
  .catalogo-page-info{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:var(--text-soft);}

  /* ---------- Modal de producto ---------- */
  .product-modal{
    position:fixed;inset:0;z-index:1000;
    display:flex;align-items:flex-end;justify-content:center;
    visibility:hidden;opacity:0;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .product-modal.open{visibility:visible;opacity:1;}
  .product-modal-backdrop{
    position:absolute;inset:0;background:rgba(58,42,40,0.55);backdrop-filter:blur(2px);
  }
  .product-modal-panel{
    position:relative;background:#fff;width:100%;max-width:480px;
    /* dvh (alto de viewport "dinámico") después de vh a propósito: en
       mobile, vh se recalcula cuando la barra de direcciones del navegador
       se oculta/aparece (algo que puede pasar solo con tocar un botón),
       corriendo TODO el contenido del popup, footer incluido. dvh está
       pensado justo para no reaccionar a eso. Navegadores que no lo
       entienden simplemente ignoran la línea y se quedan con el vh. */
    height:88vh;height:88dvh;
    border-radius:24px 24px 0 0;overflow:hidden;
    display:flex;flex-direction:column;
    transform:translateY(24px);transition:transform .3s ease;
  }
  .product-modal.open .product-modal-panel{transform:translateY(0);}
  @media(min-width:700px){
    .product-modal{align-items:center;}
    .product-modal-panel{border-radius:24px;height:85vh;height:85dvh;}
  }
  .product-modal-close{
    position:absolute;top:14px;right:14px;z-index:2;
    width:34px;height:34px;border-radius:50%;border:none;
    background:rgba(255,255,255,0.9);color:var(--rose-deep);
    font-size:16px;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,0.3);
  }
  .product-modal-back{
    position:absolute;top:12px;left:14px;z-index:2;
    display:flex;align-items:center;gap:5px;
    height:30px;padding:0 12px 0 8px;border-radius:50px;border:none;
    background:var(--rose-deep);color:#fff;
    font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
    cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,0.4);
  }
  .product-modal-back svg{width:14px;height:14px;}
  .product-modal-back[hidden]{display:none;}
  .product-modal-gallery{position:relative;background:#fff;height:min(420px, 48vh);flex:none;}
  .product-modal-img{width:100%;height:100%;object-fit:cover;display:block;}
  .product-modal-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:36px;height:36px;border-radius:50%;border:none;
    background:rgba(255,255,255,0.85);color:var(--rose-deep);
    font-size:20px;line-height:1;cursor:pointer;
  }
  .product-modal-nav.prev{left:12px;}
  .product-modal-nav.next{right:12px;}
  .product-modal-nav[hidden]{display:none;}
  .product-modal-dots{
    position:absolute;bottom:10px;left:0;right:0;
    display:flex;justify-content:center;gap:7px;
    padding:5px 10px;
  }
  .product-modal-dots span{
    width:7px;height:7px;border-radius:50%;
    background:rgba(58,42,40,0.3);border:1.5px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    transition:background .2s;
  }
  .product-modal-dots span.active{background:var(--rose-deep);}
  .product-modal-top{padding:12px 22px 0;flex:none;}
  .product-modal-name{font-size:18px;margin-bottom:2px;}
  .product-modal-meta{color:var(--text-soft);font-size:12px;margin-bottom:6px;}
  .product-modal-price{margin-bottom:2px;text-align:left;align-items:flex-start;}
  .product-modal-top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .product-modal-actions-compact{display:flex;align-items:center;gap:10px;flex:none;}
  .product-modal-actions-compact .btn-add-cart,
  .product-modal-actions-compact .btn-wa-icon{width:44px;height:44px;}
  .product-modal-actions-compact .btn-add-cart svg,
  .product-modal-actions-compact .btn-wa-icon svg{width:20px;height:20px;}
  /* Más grande que el del catálogo (44px de botón al lado) pero sin llegar
     al tamaño de esos botones. */
  .product-modal-actions-compact .qty-stepper{gap:12px;}
  .product-modal-actions-compact .qty-stepper button{width:38px;height:38px;font-size:17px;}
  .product-modal-actions-compact .qty-stepper span{font-size:15px;}
  .product-modal-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 22px;}
  .product-modal-tabbar{
    flex:none;
    display:flex;gap:20px;overflow-x:auto;
    margin:6px 22px 0;padding-bottom:0;border-bottom:1px solid rgba(58,42,40,0.1);
    scrollbar-width:none;
  }
  .product-modal-tabbar::-webkit-scrollbar{display:none;}
  .product-modal-tab{
    flex:none;white-space:nowrap;background:none;border:none;cursor:pointer;
    font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
    letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft);
    padding:0 0 8px;border-bottom:2px solid transparent;
    transition:color .2s,border-color .2s;
  }
  .product-modal-tab.active{color:var(--rose-deep);border-color:var(--rose-deep);}
  .product-modal-tabpanel p{color:var(--text-soft);font-size:14px;line-height:1.55;white-space:pre-line;}
  .product-modal-benefits{margin:0;}
  .product-modal-ingredients{list-style:none;margin:0;}
  .product-modal-ingredients li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
  .product-modal-ingredients li svg{width:16px;height:16px;color:var(--rose-dark);flex-shrink:0;margin-top:2px;}
  .product-modal-ingredients li strong{display:block;color:var(--text-dark);font-size:14px;margin-bottom:2px;}
  .product-modal-ingredients li span{color:var(--text-soft);font-size:14px;line-height:1.55;white-space:pre-line;}
  .product-modal-included{display:flex;flex-direction:column;gap:10px;}
  .product-modal-chip{
    display:flex;align-items:center;gap:12px;
    background:var(--blush-soft);border-radius:14px;padding:8px 10px 8px 8px;
    transition:background .2s;
  }
  .product-modal-chip[data-sku]{cursor:pointer;}
  .product-modal-chip[data-sku]:hover{background:var(--blush);}
  .product-modal-chip img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#fff;}
  .product-modal-chip .chip-noimg{
    width:44px;height:44px;border-radius:10px;flex-shrink:0;
    background:#fff;display:flex;align-items:center;justify-content:center;
    color:var(--rose-dark);
  }
  .product-modal-chip .chip-noimg svg{width:20px;height:20px;}
  .product-modal-chip .chip-name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text-dark);line-height:1.35;}
  .product-modal-chip .chip-qty{
    flex:none;background:var(--rose-deep);color:#fff;
    font-size:12px;font-weight:700;padding:4px 11px;border-radius:50px;
  }
  /* La versión grande del footer solo tiene sentido en desktop, donde el
     modal tiene mucho más alto disponible; en mobile ocupaba demasiado
     espacio (sobre todo con precio tachado) y dejaba poco para el
     contenido scrolleable, así que ahí se usa la compacta junto al precio.
     display:none acá y display:flex de nuevo dentro del media query de
     desktop, más abajo. */
  .product-modal-footer{
    display:none;flex:none;align-items:center;gap:10px;
    padding:14px 22px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid rgba(58,42,40,0.08);
    box-shadow:0 -8px 16px -12px rgba(0,0,0,0.15);
  }
  /* flex:1 en los dos (agregar y el slot de WhatsApp/stepper) para que se
     repartan el ancho mitad y mitad de forma responsiva — con un ancho fijo
     en px no entraba en pantallas angostas reales. Altura fija para que
     ambos calcen exacto y no se note ningún salto al alternar el stepper. */
  .product-modal-add-cart{flex:1;min-width:0;justify-content:center;white-space:nowrap;padding-left:12px;padding-right:12px;height:52px;}
  .product-modal-buy svg,.product-modal-add-cart svg{width:22px;height:22px;}

  /* Layout de 2 columnas del modal en desktop. Va al final del bloque para
     ganarle a las reglas base de arriba (misma especificidad, pero estas
     vienen después en el CSS): antes quedaba antes en el archivo y las
     reglas base de abajo las pisaban en el navegador. */
  @media(min-width:900px){
    .product-modal-panel{
      max-width:960px;
      /* Alto de respaldo antes de que cargue la imagen; app.js lo recalcula
         y lo fija en línea al alto real de la imagen (sin recorte, sin
         franjas), dejando que el botón de comprar quede siempre a esa
         altura y la descripción haga scroll interno si no entra. */
      height:min(560px, 82vh);
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:auto auto minmax(0,1fr) auto;
      column-gap:32px;
    }
    .product-modal-gallery{grid-column:1;grid-row:1 / -1;height:100%;}
    .product-modal-img{object-fit:contain;}
    .product-modal-top{grid-column:2;grid-row:1;padding:40px 56px 0 0;}
    .product-modal-name{font-size:26px;}
    .product-modal-tabbar{grid-column:2;grid-row:2;margin:6px 32px 0 0;}
    .product-modal-scroll{grid-column:2;grid-row:3;padding:10px 32px 10px 0;min-height:0;}
    .product-modal-footer{display:flex;grid-column:2;grid-row:4;padding-left:0;padding-right:32px;}
    .product-modal-actions-compact{display:none;}
  }

  /* ---------- Carrito ---------- */
  .cart-fab{
    position:fixed;right:22px;bottom:22px;z-index:900;
    width:56px;height:56px;border-radius:50%;border:none;
    background:var(--rose-deep);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 14px 30px -12px rgba(150,90,75,0.55);
    transition:transform .2s;
  }
  .cart-fab:hover{transform:translateY(-3px);}
  .cart-fab svg{width:24px;height:24px;}
  .cart-fab-count{
    position:absolute;top:-4px;right:-4px;
    min-width:22px;height:22px;padding:0 5px;border-radius:50px;
    background:var(--gold);color:#fff;
    font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px #fff;
  }

  .cart-drawer{
    position:fixed;inset:0;z-index:1000;
    visibility:hidden;opacity:0;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .cart-drawer.open{visibility:visible;opacity:1;}
  .cart-drawer-backdrop{position:absolute;inset:0;background:rgba(58,42,40,0.55);backdrop-filter:blur(2px);}
  .cart-drawer-panel{
    position:absolute;top:0;right:0;bottom:0;
    width:100%;max-width:420px;background:#fff;
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .3s ease;
  }
  .cart-drawer.open .cart-drawer-panel{transform:translateX(0);}
  .cart-drawer-header{
    flex:none;display:flex;align-items:center;justify-content:space-between;
    padding:20px 22px;border-bottom:1px solid rgba(58,42,40,0.08);
  }
  .cart-drawer-header h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--rose-deep);}
  .cart-drawer-header-actions{display:flex;align-items:center;gap:12px;}
  .cart-clear-btn{
    background:none;border:none;color:var(--text-soft);cursor:pointer;
    font-family:'Poppins',sans-serif;font-weight:600;font-size:12px;
    text-decoration:underline;text-underline-offset:2px;
  }
  .cart-clear-btn:hover{color:var(--rose-deep);}
  .cart-drawer-close{
    width:34px;height:34px;border-radius:50%;border:none;
    background:var(--blush-soft);color:var(--rose-deep);
    font-size:16px;cursor:pointer;
  }
  .cart-view{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 22px;overflow-y:auto;}
  .cart-items{display:flex;flex-direction:column;gap:14px;}
  .cart-item{display:flex;align-items:center;gap:14px;padding:8px 0;}
  .cart-item img{width:76px;height:76px;border-radius:14px;object-fit:cover;background:var(--blush-soft);flex:none;}
  .cart-item-body{flex:1;min-width:0;}
  .cart-item-body h5{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:var(--text-dark);margin-bottom:5px;line-height:1.3;}
  .cart-item-price{font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;color:var(--rose-deep);}
  .cart-item .qty-stepper{flex:none;gap:12px;}
  .cart-item .qty-stepper button{width:28px;height:28px;font-size:16px;}
  .cart-item .qty-stepper span{font-size:14.5px;}
  .cart-item-remove{
    flex:none;width:34px;height:34px;border:none;background:none;
    color:var(--text-soft);cursor:pointer;
  }
  .cart-item-remove svg{width:19px;height:19px;}
  .cart-empty{color:var(--text-soft);font-size:14px;text-align:center;padding:32px 0;}
  .cart-summary{margin-top:auto;padding-top:18px;border-top:1px solid rgba(58,42,40,0.08);}
  .cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .cart-total-row span{font-family:'Poppins',sans-serif;font-size:14px;color:var(--text-soft);}
  .cart-total-row strong{font-family:'Inter',sans-serif;font-weight:700;font-size:19px;color:var(--rose-deep);}

  /* Contador -/+ compartido: tarjetas del catálogo, footer del modal y filas del carrito. */
  .qty-stepper{display:flex;align-items:center;gap:10px;}
  .qty-stepper[hidden]{display:none;}
  .qty-stepper button{
    flex:none;width:24px;height:24px;border-radius:50%;border:1px solid rgba(176,110,95,0.3);
    background:#fff;color:var(--rose-deep);cursor:pointer;font-size:14px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;outline:none;
  }
  .qty-stepper button:focus-visible{outline:2px solid var(--rose-deep);outline-offset:2px;}
  .qty-stepper button:disabled{opacity:.35;cursor:not-allowed;}
  .qty-stepper span{font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;min-width:14px;text-align:center;}
  /* Botón "-" del panel de agregar: en 1 se convierte en tacho (quita del
     carrito) en vez de dejar bajar a 0. */
  .qty-minus-trash{display:none;}
  [data-qty-delta="-1"].is-remove .qty-minus-dash{display:none;}
  [data-qty-delta="-1"].is-remove .qty-minus-trash{display:flex;}
  .qty-minus-trash svg{width:13px;height:13px;}

  /* Estado agregar-al-carrito↔stepper de .qty-actions (tarjetas del catálogo
     y footer del modal; NO las filas del carrito, esas siempre muestran su
     stepper). Por defecto: botón agregar + WhatsApp visibles, stepper
     colapsado. [data-state="active"] es por sku (ver activateSku en JS):
     dura 5s, se comparte entre la tarjeta del catálogo y el popup del mismo
     producto, y se apaga al instante al cerrar el popup. */
  .qty-actions [data-add-to-cart]{
    transition:background .25s ease,color .25s ease,border-color .25s ease;
  }
  .qty-actions.out-of-stock [data-add-to-cart]{display:none;}
  .qty-actions[data-state="active"] [data-add-to-cart]{
    background:var(--rose-deep);color:#fff;border-color:var(--rose-deep);
  }
  /* Mientras se elige cantidad, el ícono de carrito se reemplaza por un
     check: tocarlo ahí confirma y recién ahí se suma al carrito real. */
  .qty-actions [data-add-to-cart] .icon-check{display:none;}
  .qty-actions[data-state="active"] [data-add-to-cart] .icon-cart{display:none;}
  .qty-actions[data-state="active"] [data-add-to-cart] .icon-check{display:block;}
  /* .pop la agrega/quita JS solo al pasar de inactivo a activo (ver
     activateSku) — no atada a [data-state="active"] directamente, porque
     reafirmar ese mismo atributo en cada +/- podía re-disparar la animación
     en Chrome aunque el valor no cambiara, y eso se sentía como el ícono
     (o el botón) dando un salto extra en cada clic. */
  .qty-actions [data-add-to-cart] svg.pop{
    animation:qtyIconRock .5s ease;
  }
  @keyframes qtyIconRock{
    0%,100%{transform:rotate(0);}
    25%{transform:rotate(-18deg);}
    60%{transform:rotate(14deg);}
    85%{transform:rotate(-6deg);}
  }

  /* Tarjetas del catálogo: el botón de WhatsApp es un círculo chico (40px),
     bastante más angosto que el stepper, así que sí necesita animar su
     ancho para dejarle el espacio. */
  .qty-actions .btn-wa-icon{
    transition:opacity .25s ease,max-width .3s ease,transform .25s ease,margin .3s ease;
    opacity:1;max-width:160px;transform:scale(1);
  }
  .qty-actions[data-state="active"] .btn-wa-icon{
    opacity:0;max-width:0;transform:scale(.5);margin-left:0;margin-right:0;
    pointer-events:none;overflow:hidden;
  }
  /* Mismo patrón (ícono chico + stepper animando su ancho) para las
     tarjetas del catálogo y la versión compacta del modal en mobile. */
  .catalogo-card-actions .qty-stepper,
  .product-modal-actions-compact .qty-stepper{
    opacity:0;max-width:0;transform:scale(.85);pointer-events:none;overflow:hidden;
    transition:opacity .25s ease .08s,max-width .3s ease,transform .25s ease .08s;
  }
  .catalogo-card-actions.qty-actions[data-state="active"] .qty-stepper,
  .product-modal-actions-compact.qty-actions[data-state="active"] .qty-stepper{
    opacity:1;max-width:400px;transform:scale(1);pointer-events:auto;
  }

  /* Modal: "Ver en WhatsApp" y el stepper ocupan prácticamente el mismo
     tamaño, así que en vez de animar anchos (que puede reflowar el botón de
     al lado si algo no calza exacto) se superponen en un slot de tamaño
     fijo y solo se hace fundido de opacidad — el slot nunca cambia de
     tamaño, así que nada de alrededor se puede mover. */
  .qty-actions-slot{position:relative;flex:1;min-width:0;height:52px;}
  .qty-actions-slot .btn-cart{
    position:relative;width:100%;height:100%;justify-content:center;white-space:nowrap;padding:0;
    transition:opacity .25s ease;
  }
  .qty-actions-slot .qty-stepper{
    position:absolute;inset:0;
    justify-content:center;opacity:0;pointer-events:none;
    transition:opacity .25s ease;
  }
  .qty-actions[data-state="active"] .qty-actions-slot .btn-cart{opacity:0;pointer-events:none;}
  .qty-actions[data-state="active"] .qty-actions-slot .qty-stepper{opacity:1;pointer-events:auto;}

  .qty-stepper-lg{gap:18px;}
  .qty-stepper-lg button{width:44px;height:44px;font-size:20px;}
  .qty-stepper-lg span{font-size:17px;}
  .qty-stepper-lg .qty-minus-trash svg{width:18px;height:18px;}

  .checkout-intro{color:var(--text-soft);font-size:14px;margin:0 0 16px;}
  .checkout-options{display:flex;flex-direction:column;gap:14px;}
  .checkout-option{
    display:block;text-align:left;
    border:1.5px solid rgba(176,110,95,0.3);border-radius:16px;padding:16px 18px;
    background:#fff;cursor:pointer;text-decoration:none;
    transition:background .2s,border-color .2s;
  }
  .checkout-option strong{display:block;font-family:'Poppins',sans-serif;font-size:14.5px;color:var(--text-dark);margin-bottom:4px;}
  .checkout-option span{display:block;font-size:12.5px;color:var(--text-soft);line-height:1.4;}
  .checkout-option:disabled{opacity:.5;cursor:default;}
  .checkout-option-wa{display:flex;align-items:center;gap:14px;}
  .checkout-option-wa svg{width:26px;height:26px;color:#25D366;flex:none;}
  .checkout-option-wa .checkout-option-body strong,
  .checkout-option-wa .checkout-option-body span{margin-bottom:0;}
  @media(hover:hover){
    .checkout-option:not(:disabled):hover{border-color:var(--rose-deep);background:var(--blush-soft);}
  }

  /* ---------- Popup datos de envío (checkout por WhatsApp) ---------- */
  .shipping-modal{
    position:fixed;inset:0;z-index:1100;
    display:flex;align-items:flex-end;justify-content:center;
    visibility:hidden;opacity:0;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .shipping-modal.open{visibility:visible;opacity:1;}
  .shipping-modal-backdrop{position:absolute;inset:0;background:rgba(58,42,40,0.55);backdrop-filter:blur(2px);}
  .shipping-modal-panel{
    position:relative;background:#fff;width:100%;max-width:480px;
    height:auto;max-height:92vh;max-height:92dvh;
    border-radius:24px 24px 0 0;overflow:hidden;
    display:flex;flex-direction:column;
    transform:translateY(24px);transition:transform .3s ease;
  }
  .shipping-modal.open .shipping-modal-panel{transform:translateY(0);}
  @media(min-width:700px){
    .shipping-modal{align-items:center;}
    .shipping-modal-panel{border-radius:24px;height:auto;max-height:88vh;max-height:88dvh;}
  }
  .shipping-modal-close{
    position:absolute;top:14px;right:14px;z-index:2;
    width:34px;height:34px;border-radius:50%;border:none;
    background:rgba(255,255,255,0.9);color:var(--rose-deep);
    font-size:16px;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,0.3);
  }
  .shipping-modal-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 24px 20px;}
  .shipping-modal-title{font-size:20px;margin-bottom:4px;}
  .shipping-modal-intro{color:var(--text-soft);font-size:13.5px;line-height:1.5;margin-bottom:16px;}
  .shipping-section-label{
    font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;
    letter-spacing:.5px;text-transform:uppercase;color:var(--rose-dark);
    margin:16px 0 10px;
  }
  .shipping-field{margin-bottom:12px;}
  .shipping-field label{
    display:block;font-family:'Poppins',sans-serif;font-weight:600;
    font-size:12.5px;color:var(--text-dark);margin-bottom:6px;
  }
  .shipping-field-row{display:flex;gap:12px;}
  .shipping-field-row .shipping-field{flex:1;min-width:0;}
  .shipping-field-row .shipping-field-narrow{flex:0 0 130px;}
  .shipping-field input,
  .shipping-field select{
    width:100%;padding:12px 14px;border-radius:12px;
    border:1.5px solid rgba(176,110,95,0.3);background:#fff;
    font-family:'Poppins',sans-serif;font-size:14px;color:var(--text-dark);
    -webkit-appearance:none;appearance:none;outline:none;
    transition:border-color .2s;
  }
  .shipping-field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f4f43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
    padding-right:36px;
  }
  .shipping-field select:disabled{opacity:.5;cursor:not-allowed;}
  .shipping-field input:focus,
  .shipping-field select:focus{border-color:var(--rose-deep);}
  .shipping-field input.invalid,
  .shipping-field select.invalid{border-color:#c0392b;}
  .shipping-courier-result{
    margin:14px 0 16px;padding:14px 16px;border-radius:16px;
    font-size:13.5px;line-height:1.5;
  }
  .shipping-courier-result.ok{background:var(--blush-soft);color:var(--text-dark);}
  .shipping-courier-result.ok strong{color:var(--rose-deep);}
  .shipping-courier-result.blocked{background:#fbeaea;color:#7a3230;}
  .shipping-courier-result.blocked strong{color:#c0392b;}
  .shipping-courier-result .shipping-field{margin-top:12px;margin-bottom:0;}
  .shipping-submit{
    display:flex;width:fit-content;justify-content:center;margin:20px auto 0;
    background:var(--rose-deep);border:1.5px solid var(--rose-deep);color:#fff;
  }
  .shipping-submit[hidden]{display:none;}
  .shipping-submit svg{width:24px;height:24px;}
  .shipping-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
  .shipping-submit-nuskin{text-decoration:none;}
  .shipping-submit-nuskin[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none;}

  /* ---------- Comunidad gallery ---------- */
  #comunidad{background:var(--blush-soft);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
  .gallery-grid .photo-frame{aspect-ratio:1/1;border-radius:16px;}
  @media(max-width:800px){.gallery-grid{grid-template-columns:1fr 1fr;}}

  /* ---------- Negocio / socias ---------- */
  .negocio-section{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(135deg, var(--rose-deep) 0%, var(--rose-dark) 55%, var(--gold) 130%);
    color:#fff;
    border-radius:32px;
    margin:0 24px;
    padding:72px 56px;
    max-width:1092px;
    margin-left:auto;
    margin-right:auto;
  }
  .negocio-section::before,.negocio-section::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,0.16);
    filter:blur(2px);
    z-index:-1;
  }
  .negocio-section::before{width:220px;height:220px;top:-90px;right:-60px;}
  .negocio-section::after{width:160px;height:160px;bottom:-70px;left:-50px;background:rgba(255,255,255,0.1);}
  .negocio-badge{
    display:flex;width:fit-content;align-items:center;gap:8px;
    background:rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.3);
    padding:8px 16px;border-radius:50px;
    font-size:12.5px;font-weight:600;
    margin-bottom:18px;
  }
  .negocio-section .eyebrow{color:var(--blush);}
  .negocio-section h2{color:#fff;}
  .negocio-section .section-intro{color:rgba(255,255,255,0.85);}
  .negocio-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:36px 0 40px;
  }
  .negocio-item{
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:16px;
    padding:22px;
    transition:transform .25s ease,background .25s ease;
  }
  .negocio-item:hover{transform:translateY(-4px);background:rgba(255,255,255,0.18);}
  .negocio-icon{
    width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,0.9);
    display:flex;align-items:center;justify-content:center;
    font-size:19px;margin-bottom:12px;
  }
  .negocio-item h4{color:#fff;font-size:16px;margin-bottom:6px;font-family:'Poppins';font-weight:600;}
  .negocio-item p{font-size:13.5px;color:rgba(255,255,255,0.85);}
  .negocio-section .btn-white{
    box-shadow:0 14px 34px -10px rgba(0,0,0,0.35);
    animation:pulseCta 2.6s infinite;
  }
  @keyframes pulseCta{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-3px);}
  }

  @media(max-width:800px){
    .negocio-section{padding:48px 26px;}
    .negocio-grid{grid-template-columns:1fr;}
  }

  /* ---------- Final CTA ---------- */
  #negocio{padding-bottom:40px;}
  .final-cta{
    text-align:center;
    padding:40px 0 100px;
  }
  .final-cta h2{font-size:clamp(28px,4vw,40px);margin-bottom:20px;}
  .final-cta p{color:var(--text-soft);max-width:520px;margin:0 auto 36px;}
  .final-cta .cta-row{justify-content:center;}
  .final-cta .social-icons{justify-content:center;margin-top:40px;}
  .wa-nudge{font-size:24px;display:inline-block;}
  .wa-nudge.left{animation:nudgeLeft 1.4s ease-in-out infinite;}
  .wa-nudge.right{animation:nudgeRight 1.4s ease-in-out infinite;}
  @keyframes nudgeLeft{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
  @keyframes nudgeRight{0%,100%{transform:translateX(0);}50%{transform:translateX(-8px);}}

  /* ---------- Footer ---------- */
  footer{
    background:#2f211f;
    color:rgba(255,255,255,0.7);
    padding:48px 0 28px;
    font-size:13.5px;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
  }
  footer .logo{color:#fff;}
  footer .logo span{color:var(--gold);}
  .footer-links{display:flex;gap:22px;flex-wrap:wrap;}
  .footer-bottom{
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.12);
    text-align:center;
    font-size:12px;
    color:rgba(255,255,255,0.45);
  }


  /* ---------- Reveal animation ---------- */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}