/* =========================
   Entre Alas y Raíces - styles.css
   Sistema visual transversal + AIDA (consolidado)
   ========================= */

/* ---------- Variables ---------- */
:root{
  /* Marca */
  --brand-orange: #F2943E;
  --brand-green:  #2E7D66;
  --brand-green-dark: #1F5A42;

  /* Pasteles de apoyo */
  --mint:   #E9F6F1;
  --peach:  #FFEDE0;
  --sand:   #FFF8ED;
  --lilac:  #F3F0FF;

  /* Neutros */
  --white:  #FFFFFF;
  --ink:    #1F2937;
  --ink-2:  #374151;
  --muted:  #6B7280;
  --border: #E5E7EB;

  /* Sombra y radios */
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;

  /* Tipografía base */
  --size-h1: clamp(2.2rem, 3vw, 3.2rem);
  --size-h2: clamp(1.6rem, 2.2vw, 2.2rem);
  --size-h3: clamp(1.25rem, 1.6vw, 1.6rem);
  --size-body: 1rem;
  --size-small: .95rem;

  /* Container y espaciados */
  --container: 1180px;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  /* Otros */
  --whatsapp-green: #25d366;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:'Lora', serif;
  color: var(--ink);
  background: var(--white);
  line-height:1.65;
  font-size: var(--size-body);
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand-green); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }

/* ---------- Header & Nav ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}

/* Soporte a header antiguo .nav/.menu (por si existe en otras páginas) */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem }
.brand img{ height:56px; width:auto; border-radius:.5rem }
.brand .title{ font-family:'Quattrocento', serif; font-size:1.1rem; color:var(--ink) }

/* Menú moderno .navbar (el que usamos ahora) */
.navbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end; /* derecha en desktop */
}
@media (max-width:900px){
  .navbar{ justify-content:center; } /* centrado en móvil/tablet */
}

/* Menú legacy .menu (si lo usas en otras páginas) */
.menu{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.menu a{
  font-family:'Quattrocento Sans', sans-serif;
  padding:.5rem .8rem; border-radius:.75rem;
}
.menu a.active, .menu a:hover{ background:var(--mint); text-decoration:none; }

/* Botón hamburguesa (solo si lo usas) */
.menu-toggle{ display:none; }
@media (max-width:768px){
  .menu-toggle{
    display:block; background:none; border:none; font-size:1.8rem; cursor:pointer; margin-left:auto;
  }
  .menu{ display:none; flex-direction:column; gap:1rem; background:#fff; position:absolute; top:60px; right:10px;
         padding:1rem; border-radius:8px; box-shadow:0 4px 6px rgba(0,0,0,.1); }
  .menu.is-open{ display:flex; }
}

/* Accentos del nav */
.navbar a{ padding:.55rem .9rem; border-radius:10px; text-decoration:none; }
.navbar a.nav-productos{ background:var(--brand-green); color:#fff; }
.navbar a.nav-productos:hover{ filter:brightness(.95); }
.navbar a.nav-carrito{
  border:2px solid var(--brand-green); color:var(--ink);
  border-radius:999px; padding:.45rem .9rem; position:relative; text-decoration:none;
}
.navbar a.nav-carrito:hover{ background:var(--mint); }
.navbar a.nav-carrito .badge{
  position:absolute; top:-8px; right:-8px; background:crimson; color:#fff;
  font-size:.7rem; padding:2px 6px; border-radius:999px; min-width:18px; text-align:center;
}
.site-slogan{ color:var(--brand-green-dark); font-weight:600; text-decoration:none; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Poppins', sans-serif; font-weight:600;
  padding:.8rem 1.2rem; border-radius:var(--radius-lg);
  border:2px solid transparent; transition:.25s ease; cursor:pointer;
}
.btn-primary{ background:var(--brand-green); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-secondary{ background:var(--brand-orange); color:#fff; }
.btn-outline{ background:transparent; color:var(--brand-green); border-color:var(--brand-green); }
.btn-outline:hover{ background:var(--mint) }
.btn-small{ padding:.5rem .8rem; border-radius:.6rem; }

/* ---------- Tarjetas / Secciones ---------- */
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow); padding:var(--space-4); }
.card--destacado{ border:2px solid var(--brand-green); position:relative; }
.card--destacado::before{
  content:"Destacado"; position:absolute; top:10px; left:10px; background:var(--brand-green); color:#fff;
  font-size:.75rem; padding:4px 8px; border-radius:999px;
}
.section{ padding:var(--space-7) 0; }
.section-header{ margin-bottom:var(--space-4); }
.section-header h2{ font-family:'Quattrocento', serif; font-size:var(--size-h2); margin:0 0 .5rem; }
.section-header p{ color:var(--muted); margin:0; }

/* ---------- Fondos AIDA ---------- */
.bg-attention{ background: linear-gradient(180deg, var(--peach), var(--sand)); }
.bg-interest{  background: var(--white); }
.bg-desire{    background: linear-gradient(180deg, var(--mint), var(--lilac)); }
.bg-action{    background: var(--white); }

/* ---------- HERO (Inicio) ---------- */
.hero{ background: var(--peach); padding:24px 0; }
.hero h1{
  font-family:'Quattrocento', serif; font-size:var(--size-h1);
  margin:0 0 var(--space-3);
}
.hero p{ color:var(--ink-2); margin:0 0 var(--space-4); }
.hero-inner{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr; /* derecha más ancha */
  gap:24px; align-items:center;
}
@media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; } }

/* Columna izquierda centrada */
.hero-left{ text-align:center; }
.hero-left h1{ margin:0 auto 12px; max-width:22ch; }
.hero-left p{ margin:16px auto 0; max-width:56ch; color:var(--ink-2); }
.hero-left .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px; }

/* Columna derecha: carrusel lleno */
.hero-right{ width:100%; }
.hero-right .carousel{
  width:100%; aspect-ratio:16 / 10; max-height:420px; border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--shadow);
}
.hero-right .carousel-track{ display:flex; transition:transform .6s ease; }
.hero-right .carousel-slide{ min-width:100%; }
.hero-right .carousel img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-right .carousel-dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:8px;
}
.hero-right .carousel-dots button{
  width:10px; height:10px; border-radius:50%; border:none; background:#ddd; cursor:pointer;
}
.hero-right .carousel-dots button.active{ background:var(--brand-green); }

/* ---------- Grids genéricos ---------- */
.grid-3{ display:grid; gap:var(--space-4); grid-template-columns:repeat(3,1fr); }
.grid-2{ display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

/* ---------- Listas con ícono ---------- */
.list-check{ list-style:none; padding:0; margin:0; }
.list-check li{ padding-left:1.75rem; position:relative; margin:.4rem 0; }
.list-check li:before{ content:'✔'; position:absolute; left:0; top:.15rem; color:var(--brand-green); font-weight:700; }

/* ---------- Tablas ---------- */
.table{ width:100%; border-collapse:collapse; font-size:.98rem; }
.table th, .table td{ border:1px solid var(--border); padding:.75rem; text-align:left; }
.table th{ background:#FAFAFB; }

/* ---------- Formularios ---------- */
.input, .select, .textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--border); border-radius:.8rem; font-family:'Lora', serif;
}
.textarea{ min-height:140px; }

/* ---------- Footer ---------- */
/* ---------- Footer ---------- */
.footer{
  padding: var(--space-5) 0 var(--space-4);
  border-top:1px solid var(--border);
  background:#FCFCFD;
  color:var(--muted);
}

/* columnas del footer */
.footer .cols{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:2fr 1fr 1fr;
}

.footer .brand-small{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.footer img{
  height:40px;
  border-radius:.4rem;
}

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

/* ---------- Utilidades ---------- */
.m0{margin:0}
.center{text-align:center}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-5{margin-top:var(--space-5)}
.mb-4{margin-bottom:var(--space-4)}
.hidden{display:none}
.badge{ display:inline-block; padding:.35rem .6rem; border-radius:.6rem; background:var(--mint); color:var(--brand-green); font-size:.9rem; }
.notice{ background:var(--sand); border:1px solid var(--border); padding:.9rem 1rem; border-radius:.8rem; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--whatsapp-green); color:#fff;
  padding:12px 14px; border-radius:999px; box-shadow:var(--shadow);
  text-decoration:none;
}
.whatsapp-float:hover{ filter:brightness(.95); }

/* ---------- Contacto (logo en panel derecho) ---------- */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:900px){ .contacto-grid{ grid-template-columns:1fr; } }
.contacto-logo-box{
  display:flex; align-items:center; justify-content:center; background:#fff;
  border-radius:14px; box-shadow:var(--shadow); padding:24px;
}
.contacto-logo-box img{ max-width:360px; height:auto; }

/* ---------- Productos (cards & grid) ---------- */
.products-section{ max-width:1200px; margin:0 auto; padding:0 16px 48px; }
.products-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .products-grid{ grid-template-columns:repeat(3,1fr); } }

.product-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; height:100%;
}
.product-media{ aspect-ratio:4 / 3; overflow:hidden; background:#f7f7f7; }
.product-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.product-body{ padding:16px 16px 12px; }
.product-title{ font-weight:700; font-size:clamp(18px, 2.2vw, 20px); margin:0 0 6px; text-align:center; }
.product-desc{ color:var(--ink-2); font-size:.95rem; line-height:1.45; margin:8px 0 0; }
.product-features{ margin:10px 0 0; padding-left:18px; }
.product-features li{ margin:2px 0; }

.product-cta{
  display:flex; gap:10px; justify-content:center; align-items:center;
  padding:12px 16px 18px; margin-top:auto;
}
.product-cta .btn{ padding:10px 14px; border-radius:10px; border:1px solid var(--border); text-decoration:none; font-weight:600; }
.product-cta .btn-primary{ background:var(--brand-green); color:#fff; border-color:transparent; }
.product-cta .btn-outline{ background:#fff; color:var(--ink); }
/* =========================
   MOBILE A: HERO/CARRUSEL + PRODUCTOS
   (No modifica la vista en PC)
   ========================= */

/* --- HERO / CARRUSEL (home) --- */
@media (max-width: 768px) {
  /* Intenta cubrir los nombres de sección habituales */
  .hero, .carousel, .slider, .banner {
    height: auto !important;
  }
  .hero img, .carousel img, .slider img, .banner img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;   /* más grande y proporcionado en móvil */
    object-fit: cover;
    display: block;
  }
}

/* --- PRODUCTOS (tarjetas) en móvil: 1 columna legible --- */
@media (max-width: 768px) {
  /* Nombres probables de contenedores de grilla */
  .products-grid, .product-list, .cards-grid, .lista-productos, .contenedor-productos {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Botones sin cortes */
  .product-cta {
    flex-wrap: wrap;
  }
}
/* ===== HEADER & NAV ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Logo + slogan a la izquierda */
  padding: 10px 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.topbar img {
  height: 48px;
}

.site-slogan {
  margin-left: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #2E7D66;
  white-space: nowrap;
  text-decoration: none;
}

/* Botón ☰ oculto en escritorio */
.hamburger {
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
  color: #2E7D66;
  display: none;
}

/* Menú por defecto (escritorio) */
.navbar.menu {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto; /* lo manda a la derecha en PC */
}

/* Vista móvil */
@media (max-width: 768px) {
  /* Botón hamburguesa visible arriba a la derecha */
  .hamburger {
    display: block;
    margin-left: auto;
  }

  /* Ocultar menú en móvil por defecto */
  .navbar.menu {
    display: none;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    padding: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }

  /* Mostrar menú cuando tenga la clase .is-open */
  .navbar.menu.is-open {
    display: flex;
  }
}


/* ====== HEADER + NAV (FINAL) ====== */
header { position: relative; }

/* Logo + slogan SIEMPRE a la izquierda */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  max-width:1200px;
  margin:0 auto;
}
.site-slogan{
  margin-left:8px;
  font-size:1rem;
  font-weight:600;
  color:#2E7D66;
  text-decoration:none;
  white-space:nowrap;
}

/* Botón ☰ oculto en escritorio */
.hamburger{
  display:none;
  font-size:28px;
  background:none;
  border:0;
  color:#2E7D66;
  cursor:pointer;
  line-height:1;
}

/* Menú en ESCRITORIO (forzado) */
@media (min-width: 769px){
  .navbar.menu{
    display:flex !important;
    align-items:center;
    gap:16px;
    margin-left:auto;           /* el menú se va a la derecha */
    position:static !important;
    background:transparent !important;
    padding:0 !important;
    box-shadow:none !important;
  }
  .hamburger{ display:none !important; }
}

/* Menú en MÓVIL */
@media (max-width: 768px){
  /* Botón a la derecha del header */
  .hamburger{
    display:block;
    position:absolute;
    right:16px;
    top:16px;
  }

  /* Oculto por defecto; se abre con .is-open */
  .navbar.menu{
    display:none;
    flex-direction:column;
    position:absolute;
    left:0; right:0; top:60px;
    background:#fff;
    padding:16px 20px;
    box-shadow:0 8px 20px rgba(0,0,0,.10);
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index:1000;
  }
  .navbar.menu.is-open{ display:flex; }
  .navbar.menu a{ display:block; padding:10px 0; }

  /* HERO / CARRUSEL grande y legible en móvil */
  .hero-inner{ display:block !important; }
  .hero-right{ margin-top:12px; }
  .hero-right .carousel{
    width:100% !important;
    aspect-ratio:16/9;
    max-height:none;
    border-radius:12px;
    overflow:hidden;
  }
  .hero-right .carousel img{
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    display:block;
  }
}
/* ====== FIX NAV ESCRITORIO ====== */
@media (min-width: 769px){
  /* Que el nav se comporte horizontal y a la derecha */
  .navbar.menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:16px !important;
    position:static !important;
    background:transparent !important;
    padding:0 !important;
    box-shadow:none !important;
    margin-left:auto !important;  /* empuja el menú a la derecha */
  }
  /* Enlace horizontal (anula “display:block” heredado de móvil) */
  .navbar.menu a{
    display:inline-block !important;
    padding:.55rem .9rem !important;
  }
}

/* ====== FIX NAV MÓVIL ====== */
@media (max-width: 768px){
  /* Botón visible arriba derecha */
  .hamburger{
    display:block !important;
    position:absolute !important;
    right:16px; top:16px;
  }

  /* Menú oculto por defecto */
  .navbar.menu{
    display:none !important;
    flex-direction:column;
    position:absolute; left:0; right:0; top:60px;
    background:#fff; padding:16px 20px;
    box-shadow:0 8px 20px rgba(0,0,0,.10);
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index:1000;
  }

  /* Mostramos cuando JS agrega la clase */
  .navbar.menu.is-open,
  .navbar.is-open{
    display:flex !important;
  }

  .navbar.menu a{ display:block; padding:10px 0; }
}

/* ====== FIX PUNTOS CARRUSEL EN MÓVIL ====== */
@media (max-width: 768px){
  .hero-right .carousel-dots{
    position:static !important;
    transform:none !important;
    margin:10px auto 16px !important; /* bajo la imagen */
    text-align:center;
  }
}
/* ===== Checkout Progress Steps ===== */
.checkout-steps {
  display: flex;
  justify-content: center;
  margin: 20px 0 30px;
  gap: 20px;
  flex-wrap: wrap;
}

.checkout-steps .step {
  padding: 8px 16px;
  border-radius: 20px;
  background: #d8ede7;
  color: #1f6b58;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid #1f6b58;
  opacity: 0.5;
}

.checkout-steps .step.active {
  background: #1f6b58;
  color: white;
  opacity: 1;
}