/* ============================================================
   SUGAR GIFT · HOJA DE ESTILOS COMPARTIDA
   La usan index.html, productos.html y producto.html
   ============================================================ */

/* ---- 1. VARIABLES DE MARCA (cambia aquí los colores de todo el sitio) ---- */
:root{
  --rosa-suave:    #E9C9C6;
  --rosa-empolvado:#D6A6A2;
  --rosa-profundo: #C58B8B;
  --beige:         #EDE2D4;
  --beige-claro:   #F6EEE4;
  --blanco-calido: #FBF7F2;
  --gris-oscuro:   #2F2A28;
  --gris-medio:    #6F6862;
  --linea:         #E5D8C8;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ancho: 1200px;
  --radio: 14px;
  --sombra: 0 18px 50px -24px rgba(120, 80, 70, .35);
}

/* ---- 2. RESET Y BASE ---- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--gris-oscuro);
  background:var(--blanco-calido);
  line-height:1.65;
  font-weight:300;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:.3px; }

.contenedor{ width:90%; max-width:var(--ancho); margin:0 auto; }
.seccion{ padding:110px 0; }
.eyebrow{
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--rosa-profundo); font-weight:500; margin-bottom:18px;
}
.titulo-seccion{ font-size:clamp(2.1rem, 5vw, 3.4rem); margin-bottom:18px; }
.intro-seccion{ max-width:560px; color:var(--gris-medio); font-size:1.05rem; }

/* ---- Botones ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 30px; border-radius:50px; font-family:var(--sans);
  font-size:.86rem; letter-spacing:.06em; cursor:pointer; border:1px solid transparent;
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
  white-space:nowrap;
}
.btn-primario{ background:var(--gris-oscuro); color:var(--blanco-calido); }
.btn-primario:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.btn-rosa{ background:var(--rosa-profundo); color:#fff; }
.btn-rosa:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(197,139,139,.8); }
.btn-contorno{ background:transparent; color:var(--gris-oscuro); border-color:var(--gris-oscuro); }
.btn-contorno:hover{ background:var(--gris-oscuro); color:var(--blanco-calido); transform:translateY(-3px); }
.btn-wa{ background:#fff; color:var(--gris-oscuro); border:1px solid var(--linea); }
.btn-wa:hover{ border-color:var(--rosa-profundo); color:var(--rosa-profundo); }

.ico-wa{ width:18px; height:18px; flex:none; }

/* ---- 3. HEADER / NAVEGACIÓN ---- */
header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  padding:22px 0; transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
header.scrolled{
  background:rgba(251,247,242,.9); backdrop-filter:blur(12px);
  padding:14px 0; box-shadow:0 1px 0 var(--linea);
}
/* En las páginas internas (catálogo/ficha) el header arranca con fondo */
header.solido{ background:rgba(251,247,242,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--linea); }
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:var(--serif); font-size:1.75rem; font-weight:600; letter-spacing:.5px; }
.logo span{ color:var(--rosa-profundo); }
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; }
.nav-links a{ font-size:.83rem; letter-spacing:.08em; color:var(--gris-oscuro); position:relative; padding:4px 0; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--rosa-profundo); transition:width .35s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-derecha{ display:flex; align-items:center; gap:18px; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.menu-toggle span{ width:24px; height:2px; background:var(--gris-oscuro); transition:.3s; }
.menu-toggle.abierto span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.abierto span:nth-child(2){ opacity:0; }
.menu-toggle.abierto span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- 4. HERO (index) ---- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:90px;
  background:
    radial-gradient(1100px 600px at 78% 18%, var(--rosa-suave) 0%, transparent 55%),
    radial-gradient(900px 700px at 10% 90%, var(--beige) 0%, transparent 60%),
    var(--blanco-calido);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; width:100%; }
.hero-texto h1{ font-size:clamp(2.8rem, 7vw, 5.3rem); margin-bottom:24px; }
.hero-texto h1 em{ font-style:italic; color:var(--rosa-profundo); }
.hero-texto p{ font-size:1.15rem; color:var(--gris-medio); max-width:480px; margin-bottom:38px; }
.hero-botones{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-nota{ margin-top:34px; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-medio); }

.hero-visual{ position:relative; }
.hero-img{
  aspect-ratio:4/5; border-radius:24px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--rosa-empolvado), var(--beige));
  box-shadow:var(--sombra);
  display:flex; align-items:flex-end; justify-content:center;
}
.placeholder-label{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(47,42,40,.45); padding:14px; text-align:center; width:100%;
  background:linear-gradient(transparent, rgba(255,255,255,.35));
}
.hero-chip{
  position:absolute; bottom:26px; left:-26px; background:#fff; padding:16px 22px;
  border-radius:14px; box-shadow:var(--sombra); font-size:.82rem; line-height:1.3;
}
.hero-chip strong{ font-family:var(--serif); font-size:1.35rem; color:var(--rosa-profundo); display:block; }

/* ---- 5. CATEGORÍAS ---- */
.cats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:50px; }
.cat-card{
  position:relative; aspect-ratio:3/4; border-radius:var(--radio); overflow:hidden;
  cursor:pointer; box-shadow:0 10px 30px -22px rgba(120,80,70,.5);
}
.cat-card .cat-bg{ position:absolute; inset:0; transition:transform .7s ease; }
.cat-1 .cat-bg{ background:linear-gradient(160deg,var(--rosa-empolvado),var(--rosa-suave)); }
.cat-2 .cat-bg{ background:linear-gradient(160deg,var(--beige),var(--rosa-suave)); }
.cat-3 .cat-bg{ background:linear-gradient(160deg,var(--gris-oscuro),var(--rosa-profundo)); }
.cat-4 .cat-bg{ background:linear-gradient(160deg,var(--rosa-suave),var(--beige-claro)); }
.cat-5 .cat-bg{ background:linear-gradient(160deg,var(--rosa-profundo),var(--beige)); }
.cat-card:hover .cat-bg{ transform:scale(1.08); }
.cat-card .cat-nombre{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px; color:#fff;
  background:linear-gradient(transparent 40%, rgba(47,42,40,.55));
}
.cat-card .cat-nombre h3{ font-size:1.3rem; color:#fff; }
.cat-card .cat-nombre span{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }

/* ---- 6. TARJETAS DE PRODUCTO (compartidas index + catálogo) ---- */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:55px; }
.prod-card{
  background:#fff; border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea);
  transition:transform .4s ease, box-shadow .4s ease; display:flex; flex-direction:column;
}
.prod-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.prod-img{
  aspect-ratio:1/1; position:relative; display:flex; align-items:flex-end; justify-content:center;
  background-size:cover; background-position:center;
}
.prod-img .placeholder-label{ background:none; }
.prod-tag{
  position:absolute; top:14px; left:14px; background:#fff; color:var(--gris-oscuro);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:50px;
}
.prod-info{ padding:20px 20px 24px; flex:1; display:flex; flex-direction:column; }
.prod-marca{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa-profundo); }
.prod-info h3{ font-size:1.28rem; margin:6px 0 10px; }
.prod-precio-fila{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; }
.prod-precio{ font-family:var(--serif); font-size:1.5rem; font-weight:600; }
.prod-btn{
  font-size:.74rem; letter-spacing:.06em; padding:9px 16px; border-radius:50px;
  background:var(--beige-claro); color:var(--gris-oscuro); transition:.3s; border:1px solid transparent;
}
.prod-card:hover .prod-btn{ background:var(--rosa-profundo); color:#fff; }

/* Degradados placeholder reutilizables (grad: 1..6 en productos.js) */
.gp-1{ background:linear-gradient(150deg,var(--rosa-suave),var(--beige-claro)); }
.gp-2{ background:linear-gradient(150deg,var(--beige),var(--rosa-suave)); }
.gp-3{ background:linear-gradient(150deg,var(--gris-oscuro),var(--rosa-profundo)); }
.gp-4{ background:linear-gradient(150deg,var(--rosa-empolvado),var(--beige)); }
.gp-5{ background:linear-gradient(150deg,var(--rosa-profundo),var(--rosa-suave)); }
.gp-6{ background:linear-gradient(150deg,var(--beige-claro),var(--rosa-empolvado)); }

/* ---- 7. SOBRE / BENEFICIOS / CTA (index) ---- */
.sobre{ background:var(--beige-claro); }
.sobre-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sobre-img{
  aspect-ratio:4/5; border-radius:24px; box-shadow:var(--sombra);
  background:linear-gradient(150deg,var(--rosa-suave),var(--beige));
  display:flex; align-items:flex-end; justify-content:center;
}
.sobre-texto h2{ font-size:clamp(2rem,4.5vw,3rem); margin-bottom:22px; }
.sobre-texto p{ color:var(--gris-medio); margin-bottom:18px; font-size:1.06rem; }
.sobre-firma{ font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--rosa-profundo); margin-top:8px; }

/* Mapa de Google Maps embebido (ocupa el lugar de la imagen) */
.sobre-mapa{
  aspect-ratio:4/5; border-radius:24px; overflow:hidden; box-shadow:var(--sombra);
  background:var(--rosa-suave);
}
.sobre-mapa iframe{ width:100%; height:100%; border:0; display:block; }

/* Tarjeta de dirección dentro de Nosotras */
.sobre-direccion{
  margin:26px 0 4px; padding:20px 22px; background:#fff; border:1px solid var(--linea);
  border-radius:var(--radio); font-size:1rem; color:var(--gris-medio); line-height:1.6;
}
.sobre-direccion strong{ color:var(--gris-oscuro); }
.link-mapa{ display:inline-block; margin-top:10px; color:var(--rosa-profundo); font-size:.9rem; letter-spacing:.03em; }
.link-mapa:hover{ text-decoration:underline; }

.benef-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:55px; }
.benef{ text-align:left; padding:30px 26px; border:1px solid var(--linea); border-radius:var(--radio); background:#fff; transition:.4s; }
.benef:hover{ border-color:var(--rosa-empolvado); transform:translateY(-5px); }
.benef-ico{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--rosa-suave); margin-bottom:20px;
}
.benef-ico svg{ width:24px; height:24px; stroke:var(--gris-oscuro); fill:none; stroke-width:1.5; }
.benef h3{ font-size:1.3rem; margin-bottom:8px; }
.benef p{ font-size:.95rem; color:var(--gris-medio); }

.cta-final{
  background:
    radial-gradient(700px 400px at 50% 0%, var(--rosa-suave) 0%, transparent 60%),
    var(--gris-oscuro);
  color:var(--blanco-calido); text-align:center;
}
.cta-final h2{ font-size:clamp(2.2rem,5.5vw,3.8rem); margin-bottom:20px; color:#fff; }
.cta-final p{ max-width:540px; margin:0 auto 38px; color:rgba(251,247,242,.78); font-size:1.1rem; }

/* ---- 8. FOOTER ---- */
footer{ background:var(--gris-oscuro); color:rgba(251,247,242,.8); padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; }
.footer-col h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:20px; font-weight:500; }
.footer-logo{ font-family:var(--serif); font-size:1.8rem; color:#fff; margin-bottom:14px; }
.footer-logo span{ color:var(--rosa-empolvado); }
.footer-col p, .footer-col li{ font-size:.92rem; margin-bottom:11px; list-style:none; line-height:1.6; }
.footer-col a:hover{ color:var(--rosa-empolvado); }
.footer-redes{ display:flex; gap:14px; margin-top:6px; }
.footer-redes a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.footer-redes a:hover{ background:var(--rosa-profundo); border-color:var(--rosa-profundo); transform:translateY(-3px); }
.footer-redes svg{ width:18px; height:18px; fill:#fff; }
.horario-fila{ display:flex; justify-content:space-between; gap:14px; font-size:.9rem; margin-bottom:8px; }
.horario-fila span:last-child{ color:#fff; }
.cerrado{ color:var(--rosa-empolvado)!important; }
.footer-base{
  margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:rgba(251,247,242,.55);
}

/* ---- 9. BOTÓN FLOTANTE WHATSAPP ---- */
.wa-flotante{
  position:fixed; bottom:24px; right:24px; z-index:99;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:transform .3s ease;
  animation:pulso 2.6s infinite;
}
.wa-flotante:hover{ transform:scale(1.08); }
.wa-flotante svg{ width:30px; height:30px; fill:#fff; }
@keyframes pulso{ 0%,100%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6);} 50%{ box-shadow:0 12px 38px -4px rgba(37,211,102,.9);} }

/* ---- 10. ANIMACIÓN DE ENTRADA ---- */
.reveal{ opacity:1; }
.js-on .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.js-on .reveal.visible{ opacity:1; transform:none; }

/* ============================================================
   11. PÁGINA DE CATÁLOGO (productos.html)
   ============================================================ */
.page-head{
  padding:160px 0 50px;
  background:
    radial-gradient(800px 400px at 80% 0%, var(--rosa-suave) 0%, transparent 60%),
    var(--blanco-calido);
}
.breadcrumb{ font-size:.8rem; letter-spacing:.05em; color:var(--gris-medio); margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--rosa-profundo); }
.page-head h1{ font-size:clamp(2.4rem,6vw,4rem); }
.page-head p{ color:var(--gris-medio); max-width:520px; margin-top:14px; font-size:1.05rem; }

/* Barra superior del catálogo: filtros a la izquierda, orden a la derecha */
.cat-toolbar{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:18px; margin:40px 0 10px;
}
.orden-wrap{ display:flex; align-items:center; gap:10px; }
.orden-wrap label{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-medio); }
.orden-select{
  font-family:var(--sans); font-size:.88rem; color:var(--gris-oscuro);
  padding:10px 38px 10px 16px; border:1px solid var(--linea); border-radius:50px;
  background:#fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C58B8B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 15px center;
  cursor:pointer; appearance:none; -webkit-appearance:none; transition:border-color .3s;
}
.orden-select:hover{ border-color:var(--rosa-empolvado); }
.orden-select:focus{ outline:none; border-color:var(--rosa-profundo); }

.filtros{ display:flex; flex-wrap:wrap; gap:10px; }
.filtro-btn{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.04em;
  padding:10px 20px; border-radius:50px; border:1px solid var(--linea);
  background:#fff; color:var(--gris-oscuro); cursor:pointer; transition:.3s;
}
.filtro-btn:hover{ border-color:var(--rosa-empolvado); }
.filtro-btn.activo{ background:var(--gris-oscuro); color:#fff; border-color:var(--gris-oscuro); }
.catalogo-vacio{ text-align:center; padding:60px 0; color:var(--gris-medio); }

/* ============================================================
   12. PÁGINA DE PRODUCTO (producto.html)
   ============================================================ */
.detalle{ padding:150px 0 90px; }
.detalle-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }

/* Galería */
.galeria-principal{
  aspect-ratio:1/1; border-radius:20px; overflow:hidden; box-shadow:var(--sombra);
  display:flex; align-items:flex-end; justify-content:center; background-size:cover; background-position:center;
}
.galeria-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.galeria-thumbs div{ aspect-ratio:1/1; border-radius:12px; cursor:pointer; opacity:.7; transition:.3s; }
.galeria-thumbs div:hover{ opacity:1; }

/* Info */
.detalle-info .prod-marca{ font-size:.78rem; }
.detalle-info h1{ font-size:clamp(2.2rem,5vw,3.2rem); margin:8px 0 16px; }
.detalle-precio{ font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--gris-oscuro); margin-bottom:8px; }
.detalle-cat{ display:inline-block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-medio); border:1px solid var(--linea); padding:5px 14px; border-radius:50px; margin-bottom:24px; }
.detalle-desc{ color:var(--gris-medio); font-size:1.08rem; margin-bottom:30px; }

.opciones-titulo{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-oscuro); margin-bottom:12px; font-weight:500; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.chip{
  padding:9px 18px; border-radius:50px; border:1px solid var(--linea); background:#fff;
  font-size:.85rem; cursor:pointer; transition:.25s; user-select:none;
}
.chip:hover{ border-color:var(--rosa-empolvado); }
.chip.sel{ background:var(--rosa-profundo); color:#fff; border-color:var(--rosa-profundo); }

.detalle-acciones{ display:flex; gap:14px; flex-wrap:wrap; margin:10px 0 34px; }
.detalle-acciones .btn{ font-size:.92rem; padding:17px 32px; }

.caracteristicas{ border-top:1px solid var(--linea); padding-top:26px; }
.caracteristicas h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; font-weight:500; }
.caracteristicas ul{ list-style:none; }
.caracteristicas li{ position:relative; padding-left:26px; margin-bottom:11px; color:var(--gris-medio); font-size:.98rem; }
.caracteristicas li::before{
  content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%;
  background:var(--rosa-empolvado);
}

/* Producto no encontrado */
.no-encontrado{ text-align:center; padding:160px 0 120px; }
.no-encontrado h1{ font-size:clamp(2rem,5vw,3rem); margin-bottom:16px; }
.no-encontrado p{ color:var(--gris-medio); margin-bottom:30px; }

/* Relacionados */
.relacionados{ background:var(--beige-claro); }

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; text-align:center; padding-top:40px; }
  .hero-texto p{ margin-left:auto; margin-right:auto; }
  .hero-botones{ justify-content:center; }
  .hero-visual{ max-width:380px; margin:0 auto; }
  .hero-chip{ left:0; }
  .cats-grid{ grid-template-columns:repeat(2,1fr); }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .sobre-grid{ grid-template-columns:1fr; gap:36px; }
  .sobre-img{ max-width:420px; margin:0 auto; order:-1; }
  .sobre-mapa{ max-width:460px; margin:0 auto; width:100%; aspect-ratio:4/3; }
  .benef-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .detalle-grid{ grid-template-columns:1fr; gap:36px; }
  .galeria-principal{ max-width:460px; margin:0 auto; }
  .galeria-thumbs{ max-width:460px; margin-left:auto; margin-right:auto; }
}
@media (max-width:720px){
  .seccion{ padding:80px 0; }
  .menu-toggle{ display:flex; }
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    flex-direction:column; align-items:flex-start; justify-content:center; gap:28px;
    background:var(--blanco-calido); padding:40px; box-shadow:-10px 0 40px -20px rgba(0,0,0,.3);
    transform:translateX(100%); transition:transform .4s ease; z-index:90;
  }
  .nav-links.abierto{ transform:translateX(0); }
  .nav-links a{ font-size:1.05rem; }
  .nav-cta-desktop{ display:none; }
}
@media (max-width:520px){
  .cats-grid{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns:1fr; }
  .benef-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}