*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#152334;--muted:#637083;--primary:#8d1235;--primary2:#b3264f;--cream:#fbf8f6;--line:#eadfe2;--white:#fff; --whatsapp-green: #25D366;
            --whatsapp-dark: #128C7E}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,92%);margin:auto}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:42px;height:42px;border-radius:50%;display:block;object-fit:contain;flex-shrink:0}
.brand strong{display:block;font-size:20px;line-height:1}
.brand small{display:block;font-size:8px;letter-spacing:1.2px;margin-top:5px;color:var(--muted);font-weight:700}
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:600}
.nav-links a{position:relative}
.nav-links a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--primary);transition:.25s}
.nav-links a:hover:after{width:100%}
.menu-toggle{display:none;border:0;background:none;font-size:26px}
.hero{overflow:hidden;background:linear-gradient(135deg,#fff 0%,#fff7f5 52%,#f4e9ec 100%);padding:85px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:70px;align-items:center}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--primary);display:inline-block;margin-bottom:15px}
h1{font-size:clamp(42px,5.3vw,68px);line-height:1.05;letter-spacing:-2.5px;max-width:700px}
h1 span{color:var(--primary)}
.hero-copy>p{color:var(--muted);font-size:17px;max-width:620px;margin:24px 0 30px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.btn{padding:13px 22px;border-radius:9px;font-weight:700;font-size:14px;transition:.25s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 25px rgba(141,18,53,.18)}
.btn-primary:hover{background:#6f0e2a;transform:translateY(-2px)}
.btn-secondary{border:1px solid #d7c5ca;background:#fff}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.trust-row{display:flex;gap:38px;margin-top:48px}
.trust-row div{display:flex;flex-direction:column}
.trust-row b{font-size:17px}.trust-row span{font-size:12px;color:var(--muted)}
.hero-card{position:relative;display:flex;justify-content:center;align-items:center;min-height:510px}
.hero-card img{width:min(100%,470px);height:500px;object-fit:cover;border-radius:24px;box-shadow:0 30px 70px rgba(63,28,39,.18);transform:rotate(1.5deg);position:relative}
.glow{position:absolute;width:420px;height:420px;background:#e9b8c5;border-radius:50%;filter:blur(5px);opacity:.38}
.image-caption{position:absolute;bottom:8px;background:rgba(255,255,255,.9);padding:8px 14px;border-radius:999px;font-size:11px;color:var(--muted);box-shadow:0 8px 20px #0001}
.feature-strip{background:var(--primary);color:#fff}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.feature{display:flex;gap:17px;padding:30px 25px;border-right:1px solid #ffffff2b}
.feature:last-child{border:0}.feature>span{font-size:12px;opacity:.65;font-weight:800}
.feature strong{font-size:14px}.feature p{font-size:11px;opacity:.72;margin-top:3px}
.section{padding:105px 0}
.section-heading{text-align:center;max-width:720px;margin:0 auto 60px}
.section-heading h2,.about-copy h2,.contact-box h2{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-1.5px}
.section-heading p{color:var(--muted);margin-top:15px}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}

.product-orbit{position:absolute;width:340px;height:340px;border:1px solid #ffffff35;border-radius:50%}
.product-orbit:before{content:"";position:absolute;inset:35px;border:1px dashed #ffffff3d;border-radius:50%}
.product-label{font-size:52px;font-weight:800;letter-spacing:5px;position:relative}
.product-subtitle{font-size:13px;letter-spacing:7px;margin-top:8px;position:relative}

.product-content h3{font-size:29px;margin-bottom:14px}
.product-content>p{color:var(--muted);margin-bottom:28px}
.ingredient-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ingredient-grid article{padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px}
.ingredient-grid h4{font-size:14px}.ingredient-grid p{font-size:12px;color:var(--muted);margin-top:5px}
.note{margin-top:22px;padding:16px 18px;border-left:4px solid var(--primary);background:#f6ecef}
.note strong{font-size:13px}.note p{font-size:11px;color:var(--muted);margin-top:4px}
.indications{margin-top:85px;border-top:1px solid var(--line);padding-top:50px;display:grid;grid-template-columns:.75fr 1.25fr;gap:55px}
.indications h3{font-size:26px;line-height:1.2}
.indication-list{display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.indication-list span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:12px;font-weight:600}
.about-section{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-copy p{color:var(--muted);margin-top:18px}
.text-link{display:inline-block;margin-top:25px;color:var(--primary);font-weight:800;font-size:14px}
.about-cards{display:grid;gap:14px}
.about-card{padding:22px;border:1px solid var(--line);border-radius:15px;background:var(--cream)}
.about-card span{color:var(--primary);font-size:18px}.about-card h3{font-size:16px;margin-top:5px}.about-card p{font-size:12px;color:var(--muted);margin-top:5px}
.contact-section{padding-top:70px}
.contact-box{background:#1c2938;color:#fff;border-radius:25px;padding:55px 60px;display:flex;justify-content:space-between;gap:50px;align-items:center}
.contact-box h2{max-width:600px}.contact-box p{color:#bdc7d1;margin-top:14px;max-width:620px;font-size:14px}
.contact-box .eyebrow{color:#e4a5b7}
.contact-details{display:flex;flex-direction:column;gap:12px;min-width:230px}.contact-details a,.contact-details span{font-size:13px;color:#fff}
footer{background:#121b26;color:#8e9aa7;padding:25px 0;font-size:11px}
.footer-inner{display:flex;justify-content:space-between;gap:20px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

.hero-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.slide {
  display: none;
  position: relative;
  animation: fadeSlide 0.7s ease;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  display: block;
  border-radius: 20px;
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  color: white;
  background: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.75)
  );
  border-radius: 0 0 20px 20px;
}

.slider-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.dot.active {
  background: white;
  transform: scale(1.2);
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: scale(1.02);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}



.product-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;

  transition: 0.3s ease;

  z-index: 9999;
}

.product-overlay.active {
  opacity: 1;
  visibility: visible;
}

.product-picker {
  position: relative;

  width: min(900px, 90%);
  max-height: 80vh;

  padding: 35px;

  background: rgba(255, 255, 255, 0.97);

  border-radius: 24px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.35);

  overflow-y: auto;

  transform: translateY(30px) scale(0.95);
  transition: 0.3s ease;
}

.product-overlay.active .product-picker {
  transform: translateY(0) scale(1);
}

.product-picker h3 {
  margin-top: 0;
  margin-bottom: 25px;
}

.product-close {
  position: absolute;

  top: 15px;
  right: 20px;

  width: 40px;
  height: 40px;

  border: none;
  border-radius: 50%;

  background: #eee;

  font-size: 28px;

  cursor: pointer;
}

.product-image-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(160px, 1fr));

  gap: 20px;
}

.product-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.product-category-filter {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.product-category-filter.active,
.product-category-filter:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.product-empty-message {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
}

.product-option {
  width: 100%;
  border: 2px solid transparent;

  border-radius: 16px;

  padding: 10px;

  background: #f5f5f5;

  color: inherit;
  font: inherit;
  text-align: center;

  cursor: pointer;

  transition: 0.25s ease;
}

.product-option:hover {
  transform: translateY(-5px);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15);
}

.product-option img {
  width: 100%;
  height: 180px;

  object-fit: contain;

  border-radius: 12px;
}

.product-option-name {
  text-align: center;

  margin-top: 10px;

  font-weight: 600;
}

.product-option-category {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}


/* Main product image */

.main-product-image {
  position: absolute;

  inset: 0 0 92px;

  width: 100%;
  height: calc(100% - 92px);

  object-fit: contain;

  z-index: 1;

  display: block;
}

.main-product-image.change {
  transform: scale(0.85);
  opacity: 0;
}

.product-visual {
  position: relative;

  width: 100%;
  height: 600px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  border-radius: 25px;
}

.product-label {
  position: absolute;

  bottom: 34px;
  left: 12px;
  right: 12px;

  z-index: 5;

  font-size: 32px;
  font-weight: 800;

  color: #b3264f;
  line-height: 1.1;
  text-align: center;
}



.product-subtitle {
  position: absolute;

  bottom: 12px;
  left: 12px;
  right: 12px;

  z-index: 5;

  font-size: 14px;
  font-weight: 600;

  letter-spacing: 3px;

  color: var(--muted);
  text-align: center;
}

.view-badge {
  position: absolute;

  right: 25px;
  bottom: 110px;

  z-index: 10;

  width: 90px;
  height: 90px;

  border-radius: 50%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  cursor: pointer;

  background: rgba(255, 255, 255, 0.9);

  color: #111;

  font-weight: 700;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}


.view-badge:hover {
  transform: scale(1.08);
}

.view-badge small {
  font-size: 11px;
  font-weight: 500;
}

 /* HEADER WHATSAPP BUTTON */
        .whatsapp-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            background-color: var(--whatsapp-green);
            color: #ffffff;
            text-decoration: none;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
        }

        .whatsapp-btn:hover {
            background-color: var(--whatsapp-dark);
            transform: translateY(-2px);
        }

        /* FLOATING WHATSAPP BUTTON */
        .floating-whatsapp {
            position: fixed;
            bottom: 25px;
            right: 25px;
            background-color: var(--whatsapp-green);
            color: #FFFFFF;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .floating-whatsapp:hover {
            background-color: var(--whatsapp-dark);
            transform: scale(1.1);
        }

@media(max-width:800px){
  .nav-links{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:18px 4%;border-bottom:1px solid var(--line);flex-direction:column;gap:18px}
  .nav-links.open{display:flex}.menu-toggle{display:block}
  .hero{padding:55px 0}.hero-grid,.product-layout,.about-grid,.indications{grid-template-columns:1fr;gap:40px}
  .hero-card{min-height:auto}.hero-card img{height:390px}.feature-grid{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid #ffffff2b}
  .product-visual{height:460px}.section{padding:75px 0}.section-heading{margin-bottom:40px}
  .indications{gap:25px}.contact-box{padding:38px 28px;flex-direction:column;align-items:flex-start}.footer-inner{flex-direction:column}
}
@media(max-width:480px){
  h1{letter-spacing:-1.5px}.trust-row{gap:20px}.ingredient-grid{grid-template-columns:1fr}.hero-card img{height:330px}
  .product-visual{height:390px}
 .floating-whatsapp {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
                bottom: 20px;
                right: 20px;
            }
}
