*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
:root{--verde:#2e7d32;--verde-claro:#66bb6a;--verde-oscuro:#1b5e20;--amarillo:#fdd835;--beige:#f5f5dc;--gris:#f4f4f4;--texto:#333}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--texto);line-height:1.6}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

/* HEADER */
header{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);position:sticky;top:0;z-index:100}
.navbar{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:15px 20px}


.nav-links{display:flex;gap:30px}
.nav-links a{font-weight:500;transition:.3s}
.nav-links a:hover,.nav-links a.active{color:var(--verde)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{width:25px;height:3px;background:var(--verde-oscuro);border-radius:2px}

/* HERO */
.hero{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:60px 20px;align-items:center}
.hero-text h1{font-size:3rem;color:var(--verde-oscuro);margin-bottom:20px;line-height:1.2}
.hero-text h1 span{color:var(--verde-claro)}
.hero-text p{font-size:1.15rem;margin-bottom:25px;color:#555}
.hero-buttons{display:flex;gap:15px;flex-wrap:wrap}
.hero-img img{border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,.15)}
.organic-badge{width:100px;margin-bottom:15px}

/* BOTONES */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;font-weight:600;cursor:pointer;border:none;transition:.3s;font-size:1rem}
.btn-primary{background:var(--verde);color:#fff}
.btn-primary:hover{background:var(--verde-oscuro);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--verde);border:2px solid var(--verde)}
.btn-outline:hover{background:var(--verde);color:#fff}
.btn.full{width:100%;justify-content:center;margin-top:10px}

/* BENEFICIOS */
.beneficios{padding:60px 20px;background:var(--gris);text-align:center}
.beneficios h2{font-size:2.2rem;color:var(--verde-oscuro);margin-bottom:40px}
.cards{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px}
.card{background:#fff;padding:30px 20px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.06);transition:.3s}
.card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,.12)}
.card i{font-size:3rem;color:var(--verde);margin-bottom:15px}
.card h3{color:var(--verde-oscuro);margin-bottom:10px}

/* VENTAJAS SECTION */
.ventajas-section{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:80px 20px;align-items:center}
.ventajas-img img{border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,.15)}
.ventajas-text h2{font-size:2.2rem;color:var(--verde-oscuro);margin-bottom:25px}
.ventajas-text ul li{padding:10px 0;font-size:1.05rem}
.ventajas-text ul li i{color:var(--verde);margin-right:10px}

/* INGREDIENTES */
.ingredientes-section{padding:60px 20px;background:var(--beige);text-align:center}
.ingredientes-section h2{font-size:2.2rem;color:var(--verde-oscuro);margin-bottom:30px}
.beneficios-img{max-width:500px;margin:auto;border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,.15)}

/* CTA EQUIPO */
.cta-equipo{padding:80px 20px;background:linear-gradient(135deg,var(--verde) 0%,var(--verde-oscuro) 100%);text-align:center}
.cta-box{max-width:700px;margin:auto;background:#fff;padding:50px 40px;border-radius:25px;box-shadow:0 25px 60px rgba(0,0,0,.3)}
.cta-icon{font-size:4rem;color:var(--amarillo);margin-bottom:15px}
.cta-box h2{font-size:2.3rem;color:var(--verde-oscuro);margin-bottom:15px}
.cta-box p{font-size:1.1rem;margin-bottom:20px}
.cta-list{text-align:left;max-width:500px;margin:20px auto}
.cta-list li{padding:8px 0;font-size:1.05rem}
.cta-list li i{color:var(--verde);margin-right:10px}
.btn-equipo{display:inline-block;background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff;padding:18px 45px;border-radius:50px;font-size:1.2rem;font-weight:700;margin:20px 0;text-transform:uppercase;letter-spacing:1px;box-shadow:0 10px 30px rgba(255,87,34,.4);transition:.3s;animation:pulse 2s infinite}
.btn-equipo:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 15px 40px rgba(255,87,34,.6)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.cta-box small{display:block;margin-top:10px;color:#666}

/* PRODUCTO DESTACADO */
.producto-destacado{padding:60px 20px;text-align:center}
.producto-destacado h2{font-size:2.2rem;color:var(--verde-oscuro);margin-bottom:40px}
.producto-card{max-width:1000px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--gris);padding:40px;border-radius:20px}
.producto-card img{border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.producto-info{text-align:left}
.producto-info h3{font-size:1.8rem;color:var(--verde-oscuro);margin-bottom:15px}
.producto-info p{margin-bottom:20px}

/* PRODUCTO DETALLE */
.producto-detalle{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:60px 20px}
.producto-galeria #mainImg{width:100%;border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,.15)}
.miniaturas{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.miniaturas img{width:80px;height:80px;object-fit:cover;border-radius:10px;cursor:pointer;border:3px solid transparent;transition:.3s}
.miniaturas img:hover{border-color:var(--verde)}
.badge{display:inline-block;background:var(--verde);color:#fff;padding:6px 15px;border-radius:50px;font-size:.9rem;margin-bottom:15px}
.producto-texto h1{font-size:2.3rem;color:var(--verde-oscuro);margin-bottom:10px}
.subtitulo{color:#666;margin-bottom:20px}
.precio{font-size:2.5rem;color:var(--verde);font-weight:700;margin-bottom:20px}
.descripcion{margin-bottom:25px;font-size:1.05rem}
.caracteristicas li{padding:8px 0}
.caracteristicas li i{color:var(--verde);margin-right:10px}
.cantidad{display:flex;align-items:center;gap:10px;margin:25px 0}
.cantidad button{width:40px;height:40px;border:2px solid var(--verde);background:#fff;color:var(--verde);border-radius:50%;font-size:1.2rem;cursor:pointer;font-weight:700}
.cantidad input{width:60px;text-align:center;padding:8px;border:2px solid #ddd;border-radius:10px;font-size:1rem}

/* INFO EXTRA */
.info-extra{max-width:1200px;margin:auto;padding:40px 20px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-bottom:30px}
.info-card{background:var(--gris);padding:25px;border-radius:15px;text-align:center}
.info-card i{font-size:2.5rem;color:var(--verde);margin-bottom:10px}
.info-card h3{color:var(--verde-oscuro);margin-bottom:10px}
.ingredientes-box{background:var(--beige);padding:30px;border-radius:15px}
.ingredientes-box h3{color:var(--verde-oscuro);margin-bottom:15px}

/* PÁGINAS LEGALES */
.pagina-legal{max-width:900px;margin:auto;padding:60px 20px}
.pagina-legal h1{color:var(--verde-oscuro);margin-bottom:20px;font-size:2.2rem}
.legal-card{background:var(--gris);padding:25px;border-radius:15px;margin-bottom:20px;border-left:5px solid var(--verde)}
.legal-card h2{color:var(--verde-oscuro);margin-bottom:12px;font-size:1.3rem}
.legal-card ul{padding-left:20px;margin-top:10px}
.legal-card ul li{padding:5px 0;list-style:disc}

/* CONTACTO */
.contacto{max-width:1200px;margin:auto;padding:60px 20px}
.contacto h1{text-align:center;color:var(--verde-oscuro);font-size:2.5rem;margin-bottom:10px}
.sub{text-align:center;color:#666;margin-bottom:40px}
.contacto-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:40px}
.contacto-info,.contacto-form{background:var(--gris);padding:35px;border-radius:20px}
.contacto-info h3,.contacto-form h3{color:var(--verde-oscuro);margin-bottom:25px}
.info-item{display:flex;gap:15px;margin-bottom:20px;align-items:flex-start}
.info-item i{font-size:1.5rem;color:var(--verde);background:#fff;padding:12px;border-radius:50%;min-width:45px;text-align:center}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;color:var(--verde-oscuro)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px;border:2px solid #ddd;border-radius:10px;font-size:1rem;font-family:inherit;transition:.3s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--verde)}

/* GRACIAS */
.gracias{text-align:center;padding:100px 20px;max-width:600px;margin:auto}
.gracias i{font-size:5rem;color:var(--verde);margin-bottom:20px}
.gracias h1{color:var(--verde-oscuro);margin-bottom:15px}
.gracias p{margin-bottom:30px;font-size:1.1rem}

/* FOOTER */
footer{background:var(--verde-oscuro);color:#fff;padding:50px 20px 20px;margin-top:40px}
.footer-cols{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px}
.footer-cols h4{margin-bottom:15px;color:var(--amarillo)}
.footer-cols a{transition:.3s}
.footer-cols a:hover{color:var(--amarillo)}
.footer-cols ul li{padding:5px 0}
.footer-cols p{padding:5px 0}
.footer-logo{width:180px;border-radius:20px;margin-bottom:15px;background:#fff;padding:8px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.copy{text-align:center;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;opacity:.8}

/* COOKIES */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#1b5e20;color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;z-index:1000;box-shadow:0 -5px 25px rgba(0,0,0,.2)}
.cookie-banner p{flex:1;min-width:250px}
.cookie-banner a{color:var(--amarillo);text-decoration:underline}
.cookie-banner div{display:flex;gap:10px}
.cookie-banner.hidden{display:none}

/* RESPONSIVE */
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:90px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;box-shadow:0 5px 15px rgba(0,0,0,.1)}
  .nav-links.active{display:flex}
  .hamburger{display:flex}
  .hero,.ventajas-section,.producto-card,.producto-detalle,.contacto-grid{grid-template-columns:1fr}
  .hero-text h1{font-size:2.2rem}
  .cta-box{padding:30px 20px}
  .cta-box h2{font-size:1.8rem}
  .btn-equipo{font-size:1rem;padding:15px 30px}
  .producto-info{text-align:center}
}

@media(min-width:900px){}


/* ==== BANNER LOGO SUPERIOR ==== */
.logo-banner{width:100%;background:linear-gradient(135deg,#f8fdf5 0%,#eaf5e0 100%);text-align:center;padding:5px 20px;border-bottom:3px solid var(--verde-claro);line-height:0}
.logo-banner img{max-width:420px;width:90%;height:auto;display:inline-block;transition:transform .3s ease;margin:0}
.logo-banner img:hover{transform:scale(1.03)}

/* Nav-home (enlace Inicio con icono, reemplaza al logo del nav) */
.nav-home{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--verde-oscuro);
  font-size:1.05rem;
  padding:8px 18px;
  border-radius:50px;
  background:var(--verde);
  color:#fff!important;
  transition:.3s;
}
.nav-home:hover{background:var(--verde-oscuro);transform:translateY(-2px)}
.nav-home i{font-size:1rem}

/* Responsive del banner */
@media(max-width:768px){
  .logo-banner{width:100%;background:linear-gradient(135deg,#f8fdf5 0%,#eaf5e0 100%);text-align:center;padding:5px 20px;border-bottom:3px solid var(--verde-claro);line-height:0}
  .logo-banner img{max-width:420px;width:90%;height:auto;display:inline-block;transition:transform .3s ease;margin:0}
  .nav-home{font-size:.95rem;padding:6px 14px}
}


/* ============================================= */
/* ============ OPTIMIZACIÓN MÓVIL ============= */
/* ============================================= */

@media(max-width:768px){
  /* --- Banner del logo --- */
  .logo-banner{padding:8px 10px}
  .logo-banner img{max-width:220px;width:75%}

  /* --- Navbar --- */
  .navbar{padding:10px 15px;flex-wrap:wrap}
  .nav-home{font-size:.9rem;padding:6px 14px}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:15px;box-shadow:0 5px 15px rgba(0,0,0,.1);gap:10px;z-index:99}
  .nav-links.active{display:flex}
  .nav-links li{text-align:center;padding:8px 0;border-bottom:1px solid #eee}
  .nav-links li:last-child{border-bottom:none}
  .hamburger{display:flex}

  /* --- Hero --- */
  .hero{grid-template-columns:1fr;gap:30px;padding:30px 15px;text-align:center}
  .hero-text h1{font-size:1.9rem;line-height:1.3}
  .hero-text p{font-size:1rem}
  .hero-buttons{justify-content:center}
  .organic-badge{width:80px;margin:0 auto 15px}

  /* --- Botones --- */
  .btn{font-size:.95rem;padding:11px 22px}
  .hero-buttons .btn{width:100%;justify-content:center}

  /* --- Beneficios --- */
  .beneficios{padding:40px 15px}
  .beneficios h2{font-size:1.6rem;margin-bottom:25px}
  .cards{grid-template-columns:1fr;gap:15px}
  .card{padding:25px 15px}
  .card i{font-size:2.5rem}

  /* --- Ventajas --- */
  .ventajas-section{grid-template-columns:1fr;gap:25px;padding:40px 15px;text-align:center}
  .ventajas-text h2{font-size:1.6rem}
  .ventajas-text ul{text-align:left;display:inline-block}

  /* --- Ingredientes --- */
  .ingredientes-section{padding:40px 15px}
  .ingredientes-section h2{font-size:1.6rem}
  .beneficios-img{max-width:100%}

  /* --- CTA equipo --- */
  .cta-equipo{padding:50px 15px}
  .cta-box{padding:30px 20px;border-radius:20px}
  .cta-box h2{font-size:1.6rem}
  .cta-box p{font-size:1rem}
  .cta-list{font-size:.95rem}
  .cta-list li{font-size:1rem}
  .btn-equipo{font-size:1rem;padding:15px 30px;width:100%;text-align:center}

  /* --- Producto destacado --- */
  .producto-destacado{padding:40px 15px}
  .producto-destacado h2{font-size:1.6rem}
  .producto-card{grid-template-columns:1fr;gap:20px;padding:25px 20px}
  .producto-info{text-align:center}
  .producto-info h3{font-size:1.5rem}

  /* --- Producto detalle --- */
  .producto-detalle{grid-template-columns:1fr;gap:25px;padding:30px 15px}
  .producto-galeria #mainImg{width:100%;max-height:400px;object-fit:contain;background:#fff}
  .miniaturas{justify-content:center}
  .miniaturas img{width:65px;height:65px}
  .producto-texto h1{font-size:1.7rem}
  .precio{font-size:2rem}
  .cantidad{justify-content:center;flex-wrap:wrap}

  /* --- Info extra producto --- */
  .info-extra{padding:30px 15px}
  .info-grid{grid-template-columns:1fr;gap:15px}
  .info-card{padding:20px}
  .ingredientes-box{padding:20px}
  .ingredientes-box p{font-size:.9rem;line-height:1.6}

  /* --- Páginas legales --- */
  .pagina-legal{padding:30px 15px}
  .pagina-legal h1{font-size:1.6rem}
  .legal-card{padding:20px}
  .legal-card h2{font-size:1.15rem}
  .legal-card p,.legal-card li{font-size:.95rem}

  /* --- Contacto --- */
  .contacto{padding:30px 15px}
  .contacto h1{font-size:1.8rem}
  .contacto-grid{grid-template-columns:1fr;gap:20px}
  .contacto-info,.contacto-form{padding:25px 20px}
  .info-item i{font-size:1.2rem;padding:10px;min-width:40px}
  .form-group input,.form-group textarea,.form-group select{font-size:16px;padding:11px}

  /* --- Footer --- */
  footer{padding:35px 15px 15px}
  .footer-cols{grid-template-columns:1fr;gap:25px;text-align:center}
  .footer-logo{width:140px;margin:0 auto 10px}
  .footer-cols ul{padding:0}
  .copy{font-size:.85rem}

  /* --- Cookies --- */
  .cookie-banner{flex-direction:column;padding:15px;text-align:center;gap:10px}
  .cookie-banner p{font-size:.9rem}
  .cookie-banner div{width:100%;justify-content:center}
  .cookie-banner .btn{flex:1;font-size:.9rem;padding:10px 15px}

  /* --- Gracias --- */
  .gracias{padding:60px 20px}
  .gracias i{font-size:4rem}
  .gracias h1{font-size:1.6rem}
}

/* --- Móvil pequeño (iPhone SE, etc.) --- */
@media(max-width:400px){
  .logo-banner img{max-width:180px}
  .hero-text h1{font-size:1.6rem}
  .btn{font-size:.9rem;padding:10px 18px}
  .btn-equipo{font-size:.95rem;padding:13px 25px}
  .cta-box h2{font-size:1.4rem}
  .producto-texto h1{font-size:1.5rem}
  .precio{font-size:1.8rem}
}


/* ============================================= */
/* ============ OPTIMIZACIÓN MÓVIL ============= */
/* ============================================= */

@media(max-width:768px){
  /* --- Banner del logo --- */
  .logo-banner{padding:8px 10px}
  .logo-banner img{max-width:220px;width:75%}

  /* --- Navbar --- */
  .navbar{padding:10px 15px;flex-wrap:wrap}
  .nav-home{font-size:.9rem;padding:6px 14px}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:15px;box-shadow:0 5px 15px rgba(0,0,0,.1);gap:10px;z-index:99}
  .nav-links.active{display:flex}
  .nav-links li{text-align:center;padding:8px 0;border-bottom:1px solid #eee}
  .nav-links li:last-child{border-bottom:none}
  .hamburger{display:flex}

  /* --- Hero --- */
  .hero{grid-template-columns:1fr;gap:30px;padding:30px 15px;text-align:center}
  .hero-text h1{font-size:1.9rem;line-height:1.3}
  .hero-text p{font-size:1rem}
  .hero-buttons{justify-content:center}
  .organic-badge{width:80px;margin:0 auto 15px}

  /* --- Botones --- */
  .btn{font-size:.95rem;padding:11px 22px}
  .hero-buttons .btn{width:100%;justify-content:center}

  /* --- Beneficios --- */
  .beneficios{padding:40px 15px}
  .beneficios h2{font-size:1.6rem;margin-bottom:25px}
  .cards{grid-template-columns:1fr;gap:15px}
  .card{padding:25px 15px}
  .card i{font-size:2.5rem}

  /* --- Ventajas --- */
  .ventajas-section{grid-template-columns:1fr;gap:25px;padding:40px 15px;text-align:center}
  .ventajas-text h2{font-size:1.6rem}
  .ventajas-text ul{text-align:left;display:inline-block}

  /* --- Ingredientes --- */
  .ingredientes-section{padding:40px 15px}
  .ingredientes-section h2{font-size:1.6rem}
  .beneficios-img{max-width:100%}

  /* --- CTA equipo --- */
  .cta-equipo{padding:50px 15px}
  .cta-box{padding:30px 20px;border-radius:20px}
  .cta-box h2{font-size:1.6rem}
  .cta-box p{font-size:1rem}
  .cta-list{font-size:.95rem}
  .cta-list li{font-size:1rem}
  .btn-equipo{font-size:1rem;padding:15px 30px;width:100%;text-align:center}

  /* --- Producto destacado --- */
  .producto-destacado{padding:40px 15px}
  .producto-destacado h2{font-size:1.6rem}
  .producto-card{grid-template-columns:1fr;gap:20px;padding:25px 20px}
  .producto-info{text-align:center}
  .producto-info h3{font-size:1.5rem}

  /* --- Producto detalle --- */
  .producto-detalle{grid-template-columns:1fr;gap:25px;padding:30px 15px}
  .producto-galeria #mainImg{width:100%;max-height:400px;object-fit:contain;background:#fff}
  .miniaturas{justify-content:center}
  .miniaturas img{width:65px;height:65px}
  .producto-texto h1{font-size:1.7rem}
  .precio{font-size:2rem}
  .cantidad{justify-content:center;flex-wrap:wrap}

  /* --- Info extra producto --- */
  .info-extra{padding:30px 15px}
  .info-grid{grid-template-columns:1fr;gap:15px}
  .info-card{padding:20px}
  .ingredientes-box{padding:20px}
  .ingredientes-box p{font-size:.9rem;line-height:1.6}

  /* --- Páginas legales --- */
  .pagina-legal{padding:30px 15px}
  .pagina-legal h1{font-size:1.6rem}
  .legal-card{padding:20px}
  .legal-card h2{font-size:1.15rem}
  .legal-card p,.legal-card li{font-size:.95rem}

  /* --- Contacto --- */
  .contacto{padding:30px 15px}
  .contacto h1{font-size:1.8rem}
  .contacto-grid{grid-template-columns:1fr;gap:20px}
  .contacto-info,.contacto-form{padding:25px 20px}
  .info-item i{font-size:1.2rem;padding:10px;min-width:40px}
  .form-group input,.form-group textarea,.form-group select{font-size:16px;padding:11px}

  /* --- Footer --- */
  footer{padding:35px 15px 15px}
  .footer-cols{grid-template-columns:1fr;gap:25px;text-align:center}
  .footer-logo{width:140px;margin:0 auto 10px}
  .footer-cols ul{padding:0}
  .copy{font-size:.85rem}

  /* --- Cookies --- */
  .cookie-banner{flex-direction:column;padding:15px;text-align:center;gap:10px}
  .cookie-banner p{font-size:.9rem}
  .cookie-banner div{width:100%;justify-content:center}
  .cookie-banner .btn{flex:1;font-size:.9rem;padding:10px 15px}

  /* --- Gracias --- */
  .gracias{padding:60px 20px}
  .gracias i{font-size:4rem}
  .gracias h1{font-size:1.6rem}
}

/* --- Móvil pequeño (iPhone SE, etc.) --- */
@media(max-width:400px){
  .logo-banner img{max-width:180px}
  .hero-text h1{font-size:1.6rem}
  .btn{font-size:.9rem;padding:10px 18px}
  .btn-equipo{font-size:.95rem;padding:13px 25px}
  .cta-box h2{font-size:1.4rem}
  .producto-texto h1{font-size:1.5rem}
  .precio{font-size:1.8rem}
}