:root{
  --text:#2b2b2b; --muted:#6b6b6b;
  --primary:#ea4c89; --primary-600:#d63d78;
  --card:#fff; --bg:#fff; --soft:#fff3f7;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,92%);margin:0 auto}
.center{text-align:center}

/* NAV */
.nav{
  position:sticky;top:0;z-index:40;
  background:#ffffffcc;
  backdrop-filter:blur(8px);
  border-bottom:1px solid #0001;
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{
  font-family:"DM Serif Display",serif;
  font-size:22px;
  background:linear-gradient(90deg,#ff6aa8 0%,#c43c73 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.menu{display:flex;gap:22px;font-weight:600}
.menu a:hover{color:var(--primary)}

/* HERO */
.hero{
  padding:64px 0 40px;
  background:
    radial-gradient(ellipse at 20% 0%,#fde8f1 0%,transparent 40%),
    radial-gradient(ellipse at 80% 10%,#fdeef6 0%,transparent 40%),
    linear-gradient(#fff,#fff);
  overflow:hidden;
}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;
  background:#fff;box-shadow:var(--shadow);
  font-weight:600;color:#7a7a7a;
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:#f6c53d;display:inline-block;
}
.hero-title{
  margin:20px auto 10px;
  font-family:"DM Serif Display",serif;
  font-size:clamp(34px,4.6vw,52px);
  line-height:1.08;color:#fff;
  background:linear-gradient(90deg,#ff6aa8 0%,#c43c73 100%);
  display:inline-block;
  padding:18px 24px;
  border-radius:16px;
  box-shadow:var(--shadow);
}
.hero-sub{
  color:#5b5b5b;
  font-size:clamp(16px,1.9vw,19px);
  max-width:900px;
  margin:0 auto 20px;
}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  appearance:none;border:0;border-radius:12px;
  padding:12px 18px;font-weight:700;
  cursor:pointer;
  transition:transform .06s,box-shadow .2s,background .2s;
}
.btn-primary{
  background:var(--primary);color:#fff;
  box-shadow:0 10px 24px rgba(234,76,137,.22);
}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:#fff;color:#2b2b2b;border:1px solid #00000014}
.btn-ghost:hover{box-shadow:var(--shadow)}

/* SECCIONES */
.catalog-section{padding:48px 0;background:var(--soft)}
.catalog-section:nth-of-type(odd){background:#fff}
.sec-title{
  font-family:"DM Serif Display",serif;
  text-align:center;
  font-size:clamp(26px,3vw,36px);
  margin:0 0 8px;
}
.sec-sub{
  color:#6a6a6a;
  text-align:center;
  margin:0 0 18px;
}

/* ENLACE “VER TODO” (debajo del carrusel, a la derecha) */
.sec-link--bottom{
  display:block;
  text-align:right;
  color:#000;
  font-weight:600;
  font-size:17px;
  margin-top:18px;
  text-decoration:none;
}
.sec-link--bottom:hover{ color:#000; }

/* Puente suave hero → primera sección (sin línea) */
/* Mantenemos solo el ajuste de posición; quitamos el degradado */
#mujer.catalog-section{
  position:relative;
  margin-top:-48px;
  padding-top:48px;
}

/* CARRUSEL */
.carousel{position:relative}
.track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px, 1fr);
  gap:16px;
  overflow:visible;
  padding:10px 4px 16px;
}

/* Modo estático */
.track.static{
  grid-auto-flow:row;
  grid-auto-columns:unset;
  grid-template-columns:repeat(auto-fit, minmax(260px, 260px));
  justify-content:center;
  justify-items:stretch;
  gap:16px;
}

/* Flechas y looper */
.is-viewport{
  overflow:hidden !important;
  display:block !important;
  position:relative;
}
.loop-row{
  display:flex;
  gap:16px;
  will-change:transform;
  transition:transform .18s ease-out;
}

/* Tarjetas */
.card{
  background:var(--card);
  border:1px solid #00000010;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-width:260px;
}

/* Recuadro imagen – marco universal */
.card__img{
  width:100%;
  aspect-ratio: 1080 / 1050; /* mismo marco que tus imágenes Canva */
  background:#f6f6f6;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;overflow:hidden;
}
.card__img img{
  inline-size:100%;
  block-size:100%;
  object-fit:contain;       /* no recorta; siempre entra completa */
  object-position:center;
  transition:transform .35s ease;
  will-change:transform;
}
.card:hover .card__img img{transform:scale(1.1)}

.card__body{
  padding:14px;
  display:grid !important;
  grid-template-rows:auto 1fr auto;
  row-gap:6px !important;
  height:auto !important;
}
.card__content{flex:unset !important;}
.card__footer{
  margin-top:0 !important;
  display:block !important;
  gap:0 !important;
}

.card__title{
  margin:0;
  font-weight:700;
  line-height:1.25;
  min-height:2.5em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.card__sub{
  margin:0;
  color:#6a6a6a;
  font-size:14px;
  line-height:1.4;
  min-height:2.8em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.card__price{margin:6px 0 8px;font-weight:800}

.card__actions{display:flex;gap:8px}
.card__btn{flex:1}

/* Flechas */
.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;border:0;cursor:pointer;
  background:#fff;box-shadow:var(--shadow);
  font-size:18px;display:grid;place-items:center;
  transition:opacity .2s;z-index:5;
}
.nav-btn:hover{opacity:.9}
.nav-btn:disabled{opacity:.4;cursor:not-allowed}
.nav-btn.prev{left:-6px}
.nav-btn.next{right:-6px}
@media (max-width:640px){
  .nav-btn.prev{left:2px}
  .nav-btn.next{right:2px}
}

/* ===== BANNERS PROMOCIONALES HOME ===== */
.catalog-promos{
  width:100%;
  background-color:#fdeef4; /* tono suave que combina con la marca */
  margin-top:-16px;          /* subimos el bloque para tapar la franja rosa */
  padding:0 0 40px;          /* sin padding arriba, solo abajo */
}
.promo-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  left:50%;
  transform:translateX(-50%);
}
.promo-track{
  display:flex;
  transition:transform 0.5s ease;
}
.promo-slide{
  flex:0 0 100%;
}
.promo-slide img{
  width:100%;
  height:auto;   /* muestra la imagen completa, sin recortes */
  display:block;
}
.promo-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:rgba(255,255,255,0.85);
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
  transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  z-index:2;
}
.promo-arrow:hover{
  background:#ffffff;
  transform:translateY(-50%) scale(1.05);
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
}
.promo-prev{left:16px;}
.promo-next{right:16px;}

@media (max-width:768px){
  .catalog-promos{
    margin-top:-16px;    /* mismo ajuste en móvil */
    padding:0 0 28px;    /* sin espacio rosa arriba */
  }
  .promo-arrow{
    width:32px;
    height:32px;
    font-size:18px;
  }
  .promo-prev{left:8px;}
  .promo-next{right:8px;}
}

/* FOOTER */
.footer{
  padding:28px 0;
  border-top:1px solid #00000010;
  background:#fff;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* WhatsApp icon dentro del botón del catálogo */
.card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-left:20px;
}
.card__btn .icon-wa{
  width:26px;
  height:26px;
  flex-shrink:0;
  fill:#fff;
  transform:translateX(-4px);
}

/* ===== MODO COMPACTO ===== */
@media (max-height: 820px) and (min-width: 900px) {
  .catalog-section{ padding: 28px 0; }

  .sec-title{
    font-size: clamp(24px, 2.6vw, 34px);
    margin: 0 0 6px;
  }
  .sec-sub{
    font-size: 15px;
    margin: 0 0 12px;
  }

  .track{ padding: 6px 4px 10px; }

  /* Mantener el mismo marco en compact desktop (sin forzar height) */
  .card__img{ width:100%; padding:0; margin:0; overflow:hidden; }
  .card__img img{ object-fit:contain; object-position:center; }

  .card__body{
    padding:12px;
    display:grid !important;
    grid-template-rows:auto 1fr auto;
    row-gap:6px !important;
    height:auto !important;
  }
  .card__footer{ margin-top:0 !important; display:block !important; gap:0 !important; }

  .card__title{
    margin:0; line-height:1.25; min-height:2.5em;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
  .card__sub{
    margin:0; line-height:1.4; min-height:2.8em;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
  .card__price{ margin:6px 0 8px; }

  .card__btn{ padding: 12px 16px; }

  .nav-btn{ top: 46%; }
}

/* ===== PARCHE SOLO PARA MÓVIL: recortar cualquier desborde horizontal ===== */
@media (max-width: 768px){
  html, body { overflow-x: clip; }

  /* evitar que "Esencia y Alma" se parta en dos líneas en móvil */
  .brand{
    white-space: nowrap;
  }

  /* quitar el gap general del menú en móvil
     para poder controlar los espacios uno por uno */
  .menu{
    gap: 0 !important;
  }

  /* ajustes finos del menú en móvil */
  .menu a:nth-child(1){  /* Perfumería */
    margin-left: 10px;
    margin-right: 6px;
  }
  .menu a:nth-child(2){  /* Hogar */
    margin-left: 10px;
    margin-right: 6px;
  }
  .menu a:nth-child(3){  /* Contacto */
    margin-left: 8px;
    margin-right: 6px;
  }

  @supports not (overflow-x: clip){
    html, body { overflow-x: hidden; }
  }
}

/* ===== Footer en móvil: botón debajo y texto a ancho completo ===== */
@media (max-width: 768px){
  .footer__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer__brand{
    max-width: none !important;
    width: 100%;
  }
  .footer__brand p{ max-width: none; }
  .footer__contact{ width: 100%; }
  .footer__contact .btn{
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

/* ===== MODO COMPACTO PARA CELULARES (solo móvil) ===== */
@media (max-width: 768px){

  .catalog-section{
    padding: 28px 0 32px;
  }

  .sec-title{
    font-size: clamp(22px, 5.4vw, 28px);
    margin: 0 0 6px;
  }
  .sec-sub{
    font-size: 15px;
    margin: 0 0 14px;
    line-height: 1.45;
  }

  .track{
    gap: 12px;
    padding: 6px 2px 10px;
  }

  /* Mantener el mismo marco también en móvil (sin alturas variables) */
  .card__img{ width:100%; }
  .card__img img{ object-fit:contain; }

  .card__body{ padding: 12px; }
  .card__btn{ padding: 12px 14px; }
  .nav-btn{ top: 46%; }
}