/* =========================================================
   0) VARIABLES / RESET / BASE
========================================================= */
:root{
  --bg:#fff5f9;
  --card:#ffffff;
  --primary:#e91e63;
  --primary-soft:#f8bbd0;
  --accent:#d81b60;
  --text:#4a4a4a;
  --muted:#a06a7c;
  --line:#f3c1d3;

  /* Reutilizables */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Tamaños globales */
  --fs-body: 16px;
  --fs-logo: 1.8rem;
  --fs-menu: 1.05rem;
  --fs-footer-title: 1.3rem;
  --fs-footer-text: 1.05rem;

  /* Header */
  --header-pad-y: 18px;
  --topbar-fs: .75rem;

  /* Botones */
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;

  /* Carrito pill */
  --cart-pad-y: 16px;
  --cart-pad-x: 28px;
  --cart-fs: 1.15rem;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }

body{
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--text);

  /* Sticky footer */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* util */
.muted{ color: var(--muted); }

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
}

/* Para que el contenido empuje al footer abajo */
.section{ 
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

/* Links básicos */
a{ color: inherit; }
header a{ text-decoration:none; }


/* =========================================================
   1) COMPONENTES: BOTONES / INPUTS / TARJETAS / GRIDS
========================================================= */
.btn{
  background:var(--primary);
  color:white;
  padding: 8px 14px;
  border:none;
  border-radius:22px;
  font-weight:900;
  font-size:0.85rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(233,30,99,.25);
  transition:.2s ease;
}

.btn:hover{ background: var(--accent); }

.btn-ghost{
  background:transparent;
  color:var(--primary);
  border:1px solid var(--primary);
}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:14px;
  box-shadow:0 4px 15px rgba(233,30,99,0.08);
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

input, textarea{
  width:100%;
  padding:8px;
  border-radius: var(--radius-md);
  border:1px solid var(--line);
  margin-bottom:10px;
}

input:focus, textarea:focus{
  outline:none;
  border-color:var(--primary);
}

/* Imágenes producto */
.prod-img, .prod-img-lg{
  width:100%;
  border-radius:14px;
  background: var(--primary-soft);
  padding:8px;
}

.prod-img-lg{
  max-width:650px;
  margin:0 auto;
  display:block;
}

/* Badges */
.pill{
  background: var(--primary-soft);
  color: var(--accent);
  padding:6px 12px;
  border-radius:999px;
  font-size:.85rem;
}

/* =========================================================
   HERO 
========================================================= */

/* el hero ya existe, solo se ordena mejor */
.hero{
  padding: 50px 20px
}

/* */
.hero img{
  width: 100%;
  max-width: 700px;   /* tamaño amigable */
  height: auto;
  display: block;
  margin: 25px auto 0;
  border-radius: 18px;
  object-fit: cover;
}

.hero .hero-media,
.hero .hero-image,
.hero .hero-img{
  display: flex;
  justify-content: center;
}

/* =========================================================
   TEXTO LEGAL HERO (debajo de imagen)
========================================================= */
.hero-legal{
  margin-top: 30px;
  font-size: 1,5rem;
  color: #4a4a4a;
  letter-spacing: 0.5px;
  opacity: 0.9;
}


/* =========================================================
   3) WHATSAPP FLOAT
========================================================= */


/* =========================================================
   5) SOBRE MI
========================================================= */
.sobre-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:50px;
  align-items:center;
}

.sobre-img img{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 15px 35px rgba(0,0,0,.12);
  background:#fff;
}

.sobre-content h2{
  margin-bottom:18px;
  color:#e91e63;
}

.sobre-content p{
  margin-bottom:14px;
  line-height:1.7;
  color:#555;
}

.badge-soft{
  display:inline-block;
  background:#fde6ef;
  color:#d63384;
  padding:6px 14px;
  border-radius:30px;
  font-size:.8rem;
  margin-right:8px;
  margin-top:8px;
}

@media (max-width: 900px){
  .sobre-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   PRODUCTOS DESTACADOS - CONTENEDOR PRODUCTOS DESTACADOS
========================================================= */


.grid-3{
  justify-items: center; 
}

.grid-3 .card{
  max-width: 600px;   
  width: 100%;
  padding: 16px;
}

.grid-3 .card img{
  max-width: 450px;   
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
  object-fit: contain;
}

.product-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.product-card-link:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(233,30,99,.16);
}

/* Cards de productos: precio siempre abajo */
.grid-3 .card,
.grid-3 .product-card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Empuja precio y botón hacia abajo */
.grid-3 .card .row,
.grid-3 .product-card-link .row,
.product-card-bottom{
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* Precio centrado */
.grid-3 .card strong,
.grid-3 .product-card-link strong{
  text-align: center;
}

.product-card-link{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.product-card-bottom{
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.product-card-bottom{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
}

.product-card-bottom strong{
  font-size: 1.2rem;
  font-weight: 800;
}

.product-card-bottom .btn{
  margin-top: 2px;
}

/* =========================================================
   RESPONSIVE HOME
========================================================= */
.hero{
  padding:clamp(28px, 6vw, 56px) 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  justify-items:center;
  text-align:center;
}

.hero h1{
  font-size:clamp(2rem, 5vw, 4rem);
  line-height:1.05;
  margin:16px 0 0;
}

.hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin:22px 0 10px;
}

.hero-card{
  width:min(100%, 760px);
  margin:24px auto 0;
}

.hero img{
  max-width:min(100%, 720px);
  margin-top:0;
}

.hero-legal{
  font-size:clamp(.85rem, 1.6vw, 1rem);
  line-height:1.4;
}

.section-head{
  text-align:center;
}

.section-head h2{
  font-size:clamp(1.55rem, 3vw, 2.2rem);
}

.grid-3{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  align-items:stretch;
}

.grid-3 .card,
.grid-3 .product-card-link{
  width:100%;
  max-width:360px;
  min-height:auto;
}

@media (min-width: 1280px){
  .grid-3 .card,
  .grid-3 .product-card-link{
    max-width:340px;
  }
}

@media (max-width: 640px){
  .hero{
    padding-top:24px;
  }

  .hero-card{
    margin-top:18px;
  }

  .grid-3{
    gap:14px;
  }
}