/* Reset & Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6; color: #1e1919; background-color: #ffffff; overflow-x: hidden;
}

/* CSS Variables */
:root{
    --primary-green:#6B8E23; --primary-yellow:#FFD700; --accent-green:#90B44B; --accent-yellow:#FFC847;
    --text-dark:#1e1919; --text-light:#ffffff; --text-subtle:#736c64; --text-subtle-dark:#bbb5ae;
    --surface-light:#f7f5f2; --surface-white:#ffffff; --surface-dark:#1e1919; --accent-ui:#61525a;
    --container-width:1200px; --spacing-xs:8px; --spacing-sm:16px; --spacing-md:24px; --spacing-lg:40px; --spacing-xl:60px; --spacing-2xl:80px; --spacing-3xl:120px;
}

/* Container */
.container{ max-width:var(--container-width); margin:0 auto; padding:0 var(--spacing-md); }

/* Typography */
h1,h2,h3,h4,h5,h6{ font-weight:700; line-height:1.2; color:var(--text-dark); }
h1{font-size:48px;} h2{font-size:38px;} h3{font-size:32px;} h4{font-size:24px;} h5{font-size:18px;}

/* Header */
.header{ position:fixed; top:0; left:0; right:0; background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
    z-index:1000; border-bottom:1px solid rgba(97,82,90,.1); }
.header-content{ display:flex; justify-content:space-between; align-items:center; padding:var(--spacing-md) 0; }
.logo img{ height:56px; width:auto; display:block; object-fit:contain; }
@media (max-width: 767px){ .logo img{ height:44px; } }

.nav{ display:flex; gap:var(--spacing-lg); align-items:center; }
.nav a{ text-decoration:none; color:var(--text-dark); font-weight:500; font-size:16px; transition:color .3s ease; position:relative; }
.nav a:hover{ color:var(--primary-green); }
.nav a::after{ content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--primary-green); transition:width .3s ease; }
.nav a:hover::after{ width:100%; }
.btn-header{ background:var(--primary-green); color:var(--text-light)!important; padding:10px 24px; border-radius:8px; transition:background .3s ease, transform .2s ease; }
.btn-header::after{ display:none; }
.btn-header:hover{ background:var(--accent-green); transform:translateY(-2px); }
.mobile-menu-btn{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.mobile-menu-btn span{ width:25px; height:3px; background:var(--text-dark); border-radius:2px; transition:all .3s ease; }

/* Hero as Parallax Background */
.hero{ margin-top:90px; min-height:70vh; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero.parallax-bg{ background-image:var(--hero-bg); background-size:cover; background-position:center; background-attachment: fixed; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 30%, rgba(255,255,255,0) 70%); pointer-events:none; }
.hero-content{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:var(--spacing-xl); }
.hero-single{ padding: var(--spacing-3xl) 0; }
.hero-badge{ display:inline-block; background:rgba(107,142,35,.18); color:#fff; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:700; backdrop-filter: blur(2px); }
.hero-title{ font-size:56px; margin:var(--spacing-md) 0; line-height:1.1; color:var(--text-light); text-shadow:0 8px 40px rgba(0,0,0,.35); }
.hero-subtitle{ font-size:20px; color:#f0f0f0; margin-bottom:var(--spacing-lg); line-height:1.6; }
.hero-cta{ display:flex; gap:var(--spacing-sm); flex-wrap:wrap; }

.hero-bottom-swoosh{ position:absolute; bottom:-60px; left:50%; width:140%; height:160px; background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%);
    transform:translateX(-50%); pointer-events:none; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; font-size:16px; font-weight:600; text-decoration:none; border-radius:10px; transition:all .3s ease; cursor:pointer; border:none; font-family:inherit; }
.btn-primary{ background:var(--primary-green); color:var(--text-light); box-shadow:0 4px 15px rgba(107,142,35,.3); }
.btn-primary:hover{ background:var(--accent-green); transform:translateY(-3px); box-shadow:0 6px 25px rgba(107,142,35,.4); }
.btn-secondary{ background:var(--surface-white); color:var(--text-dark); border:2px solid var(--primary-green); }
.btn-secondary:hover{ background:var(--surface-light); transform:translateY(-3px); }
.btn-product{ width:100%; justify-content:center; background:var(--primary-green); color:var(--text-light); margin-top:var(--spacing-sm); }
.btn-product:hover{ background:var(--accent-green); transform:translateY(-2px); }

/* Image Prominence / Media Bleed + Parallax */
.media-bleed{ position:relative; overflow:visible; }
.media-bleed img{ width:120%; max-width:none; margin-left:-10%; height:auto; display:block; filter: contrast(1.05) saturate(1.05); }
.parallax-media{ position:relative; overflow:visible; }
.parallax-media img{ will-change: transform; border-radius: 0; clip-path: ellipse(85% 65% at 50% 50%); }
.subtle-oval img{ clip-path: ellipse(90% 70% at 50% 50%); }

/* About Section */
.about{ padding:var(--spacing-3xl) 0; background:var(--surface-white); }
.about-content{ display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-xl); align-items:center; }
.section-label{ display:inline-block; color:var(--primary-green); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:var(--spacing-sm); }
.section-title{ font-size:38px; margin-bottom:var(--spacing-md); }
.section-description{ font-size:18px; color:var(--text-subtle); margin-bottom:var(--spacing-md); line-height:1.7; }
.about-stats{ display:flex; gap:var(--spacing-lg); margin-top:var(--spacing-lg); }
.stat{ display:flex; flex-direction:column; }
.stat-number{ font-size:36px; font-weight:800; color:var(--primary-green); line-height:1; }
.stat-label{ font-size:14px; color:var(--text-subtle); margin-top:4px; }

/* Benefits Section */
.benefits{ padding:var(--spacing-3xl) 0; background:var(--surface-light); }
.section-header{ text-align:center; margin-bottom:var(--spacing-xl); }
.benefits-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--spacing-lg); }
.benefit-card{ background:var(--surface-white); padding:var(--spacing-lg); border-radius:16px; transition:all .3s ease; border:2px solid transparent; }
.benefit-card:hover{ transform:translateY(-8px); border-color:var(--primary-green); box-shadow:0 15px 40px rgba(0,0,0,.1); }
.benefit-icon{ width:64px; height:64px; background:rgba(107,142,35,.1); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:var(--spacing-md); color:var(--primary-green); }
.benefit-card h4{ font-size:20px; margin-bottom:var(--spacing-sm); }
.benefit-card p{ color:var(--text-subtle); line-height:1.6; }

/* Process Section */
.process{ padding:var(--spacing-3xl) 0; background:var(--surface-white); }
.process-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--spacing-lg); }
.process-step{ position:relative; text-align:center; }
.step-number{ display:inline-flex; width:60px; height:60px; background:var(--primary-green); color:var(--text-light); border-radius:50%; align-items:center; justify-content:center; font-size:24px; font-weight:800; margin:0 auto var(--spacing-md); }
.step-image{ margin-bottom:var(--spacing-md); }
.step-image img{ width:100%; height:auto; }
.process-step h4{ font-size:20px; margin-bottom:var(--spacing-sm); }
.process-step p{ color:var(--text-subtle); line-height:1.6; }

/* Products Section */
.products{ padding:var(--spacing-3xl) 0; background:var(--surface-light); }
.products-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--spacing-lg); }
.product-card{ background:var(--surface-white); border-radius:20px; overflow:hidden; transition:all .3s ease; border:2px solid transparent; position:relative; }
.product-card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,.15); border-color:var(--primary-green); }
.product-card.featured{ border-color:var(--primary-yellow); box-shadow:0 10px 30px rgba(255,215,0,.2); }
.product-badge{ position:absolute; top:16px; right:16px; background:var(--primary-green); color:var(--text-light); padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; z-index:1; }
.featured-badge{ background:var(--primary-yellow); color:var(--text-dark); }
.product-image{ height:auto; }
.product-image img{ width:100%; height:auto; display:block; }

.product-info{ padding:var(--spacing-lg); }
.product-info h4{ font-size:22px; margin-bottom:var(--spacing-sm); }
.product-info p{ color:var(--text-subtle); margin-bottom:var(--spacing-md); line-height:1.6; }
.product-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:var(--spacing-md); }
.price-label{ font-size:14px; color:var(--text-subtle); }
.price{ font-size:28px; font-weight:800; color:var(--primary-green); }

/* Certifications Section */
.certifications{ padding:var(--spacing-xl) 0; background:var(--surface-white); border-top:1px solid rgba(97,82,90,.1); border-bottom:1px solid rgba(97,82,90,.1); }
.certifications-content{ display:flex; justify-content:space-between; align-items:center; gap:var(--spacing-xl); }
.certifications-text h3{ font-size:24px; margin-bottom:var(--spacing-sm); }
.certifications-text p{ color:var(--text-subtle); max-width:500px; }
.certifications-badges{ display:flex; gap:var(--spacing-lg); flex-wrap:wrap; }
.cert-badge{ display:flex; flex-direction:column; align-items:center; gap:var(--spacing-xs); color:var(--primary-green); }
.cert-badge span{ font-size:14px; font-weight:600; color:var(--text-dark); }

/* Testimonials Section */
.testimonials{ padding:var(--spacing-3xl) 0; background:var(--surface-light); }
.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--spacing-lg); }
.testimonial-card{ background:var(--surface-white); padding:var(--spacing-lg); border-radius:16px; transition:all .3s ease; border-left:4px solid var(--primary-green); }
.testimonial-card:hover{ transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,.1); }
.testimonial-stars{ color:var(--primary-yellow); font-size:20px; margin-bottom:var(--spacing-sm); }
.testimonial-text{ font-size:16px; color:var(--text-dark); line-height:1.7; margin-bottom:var(--spacing-md); font-style:italic; }
.testimonial-author{ display:flex; flex-direction:column; gap:4px; }
.testimonial-author strong{ font-size:16px; color:var(--text-dark); }
.testimonial-author span{ font-size:14px; color:var(--text-subtle); }
/* Testimonios: avatares pequeños en círculo */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.testimonial-avatar {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 94px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  border: 2px solid rgba(0, 0, 0, .06);
}

/* Más compactos en móvil */
@media (max-width: 767px) {
  .testimonial-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
  }
}


/* CTA Section */
.cta-section{ padding:var(--spacing-3xl) 0; background:var(--surface-white); }
.cta-content{ display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-xl); align-items:center; background:linear-gradient(135deg, rgba(107,142,35,.05) 0%, rgba(255,215,0,.05) 100%); border-radius:24px; padding:var(--spacing-xl); }
.cta-image img{ width:100%; height:auto; display:block; }
.cta-text h3{ font-size:36px; margin-bottom:var(--spacing-md); }
.cta-text p{ font-size:18px; color:var(--text-subtle); margin-bottom:var(--spacing-lg); line-height:1.7; }

/* Footer */
.footer{ background:var(--surface-dark); color:var(--text-light); padding:var(--spacing-2xl) 0 var(--spacing-md); }
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--spacing-lg); margin-bottom:var(--spacing-lg); }
.footer-col h4{ color:var(--text-light); font-size:18px; margin-bottom:var(--spacing-md); }
.footer-col p{ color:var(--text-subtle-dark); margin-bottom:var(--spacing-sm); line-height:1.6; }
.footer-col a{ color:var(--text-subtle-dark); text-decoration:none; transition:color .3s ease; }
.footer-col a:hover{ color:var(--primary-green); }
.footer-col ul{ list-style:none; }
.footer-col ul li{ margin-bottom:var(--spacing-xs); }
.footer-social{ display:flex; gap:var(--spacing-sm); margin-top:var(--spacing-md); }
.footer-social a{ width:40px; height:40px; background:rgba(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s ease; }
.footer-social a:hover{ background:var(--primary-green); transform:translateY(-3px); }
.footer-bottom{ text-align:center; padding-top:var(--spacing-lg); border-top:1px solid rgba(255,255,255,.1); color:var(--text-subtle-dark); }

/* WhatsApp Floating Button */
.whatsapp-float{ position:fixed; bottom:30px; right:30px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4); transition:all .3s ease; z-index:999; color:white; }
.whatsapp-float:hover{ transform:scale(1.1) translateY(-3px); box-shadow:0 6px 30px rgba(37,211,102,.6); }

/* Animations */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

/* Responsive */
@media (max-width: 991px){
    :root{ --spacing-3xl:80px; --spacing-2xl:60px; --spacing-xl:40px; }
    .hero-title{ font-size:40px; }
    .about-content, .cta-content{ grid-template-columns:1fr; }
    .process-steps{ grid-template-columns:1fr; }
    .nav{ display:none; }
    .mobile-menu-btn{ display:flex; }
    .certifications-content{ flex-direction:column; text-align:center; }
    .certifications-badges{ justify-content:center; }
}
@media (max-width: 767px){
    .hero-title{ font-size:32px; }
    .section-title{ font-size:28px; }
    .hero-cta{ flex-direction:column; }
    .btn{ width:100%; justify-content:center; }
    .benefits-grid, .products-grid, .testimonials-grid{ grid-template-columns:1fr; }
    .about-stats{ justify-content:space-around; }
    .whatsapp-float{ width:50px; height:50px; bottom:20px; right:20px; }
    .media-bleed img{ width:140%; margin-left:-20%; }
}

/* Fallback for iOS where background-attachment: fixed is ignored */
@supports (-webkit-touch-callout: none) {
  .hero.parallax-bg { background-attachment: scroll; }
}


/* --- Tweaks based on feedback --- */

/* 1) Big hero logo overlay */
.hero-logo{
    position:absolute;
    right: clamp(12px, 5vw, 60px);
    bottom: clamp(12px, 6vw, 80px);
    z-index: 2;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
    animation: popIn .8s ease-out both .2s;
}
.hero-logo img{
    width: clamp(120px, 22vw, 320px);
    height: auto;
    display: block;
}

/* 2) Process section alignment & equal media height */
.process-steps{ align-items:start; }
.step-image{ margin-bottom: var(--spacing-md); border-radius: 16px; overflow: hidden; }
.step-image{ aspect-ratio: 4 / 3; } /* equalize heights */
.step-image img{ width:100%; height:100%; object-fit:cover; }
.process-step{ text-align:center; padding: 0 var(--spacing-sm); }
.process-step h4, .process-step p{ margin-left:auto; margin-right:auto; max-width: 38ch; }

/* 3) More room between image and text in "Quiénes somos" */
.about-content{ column-gap: calc(var(--spacing-xl) + 20px); }
.about-text{ padding-left: clamp(10px, 2vw, 24px); }
.about .about-image{ margin-right: clamp(10px, 2vw, 24px); }

@media (max-width: 991px){
  .hero-logo{
    right: 16px;
    bottom: 24px;
  }
  .about-text{ padding-left: 0; }
  .about .about-image{ margin-right: 0; }
}

/* subtle entrance */
@keyframes popIn{
  0%{ transform: translateY(10px) scale(.96); opacity: 0; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}


/* --- HERO layout fix: logo a la izquierda, texto a la derecha --- */
.hero-content.hero-single{
  display:grid;
  grid-template-columns: minmax(160px, 26vw) 1fr;
  align-items:center;
  gap: var(--spacing-xl);
}
.hero-logo{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  margin: 0;
  justify-self:center;
  align-self:center;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
.hero-logo img{
  width: clamp(180px, 24vw, 380px) !important;
  height:auto;
  display:block;
}

/* Stack en móvil */
@media (max-width: 991px){
  .hero-content.hero-single{
    grid-template-columns: 1fr;
  }
  .hero-logo{
    order: -1; /* logo arriba del texto */
    margin-bottom: var(--spacing-md);
  }
}

/* --- Degradado inferior alineado --- */
.hero-bottom-swoosh{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  width:100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 65%, rgba(255,255,255,1) 100%);
  transform:none !important;
}


/* === Header reveal after hero scroll === */
/* Only apply the hidden state when JS is active */
.js-ready .header{
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.js-ready .header.visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* === Subtítulos de secciones más grandes y con tipografía light === */
.section-title {
  font-size: clamp(42px, 6vw, 64px);   /* crece de forma fluida entre móvil y desktop */
  font-weight: 200;                    /* fuente muy delgada */
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--text-dark);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-transform: none;                /* evita que se vean todas en mayúsculas */
}

/* Si quieres que los títulos sean más etéreos aún */
@supports (font-variation-settings: normal) {
  .section-title {
    font-variation-settings: "wght" 200;
  }
}
/* === Subtítulos verdes (section-label) más grandes y elegantes === */
.section-label {
  display: inline-block;
  color: var(--primary-green);
  font-size: clamp(24px, 2vw, 30px);   /* ≈50% más grande que antes */
  font-weight: 300;                    /* ligero */
  letter-spacing: 2.5px;               /* mantiene aire */
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
  opacity: 0.9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Si la fuente soporta variaciones tipográficas */
@supports (font-variation-settings: normal) {
  .section-label {
    font-variation-settings: "wght" 300;
  }
}
/* === WhatsApp flotante: fix en móvil y sin "hover" en pantallas táctiles === */
.whatsapp-float{
  position: fixed !important;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: visible;
  z-index: 2147483647;
  box-shadow: 0 4px 20px rgba(37,211,102,.40);
  will-change: transform;
}

/* El SVG no debe sobresalir del círculo */
.whatsapp-float svg{
  width: 60%;
  height: 60%;
}

/* Desactivar "hover scale" en pantallas táctiles (causaba recorte) */
@media (pointer: coarse) {
  .whatsapp-float:hover{ transform: none !important; box-shadow: 0 4px 20px rgba(37,211,102,.40) !important; }
}

/* Posición segura en móvil con "safe-area" y más margen interno */
@media (max-width: 767px){
  .whatsapp-float{
    width: 56px;
    height: 56px;
    right: calc(24px + env(safe-area-inset-right));   /* empuja más hacia adentro */
    bottom: calc(24px + env(safe-area-inset-bottom)); /* evita la barra de gestos */
  }
  @supports (right: constant(safe-area-inset-right)){
    .whatsapp-float{
      right: calc(24px + constant(safe-area-inset-right));
      bottom: calc(24px + constant(safe-area-inset-bottom));
    }
  }
}

/* Mantener el "hover" solo en mouse/trackpad */
@media (pointer: fine){
  .whatsapp-float:hover{
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 28px rgba(37,211,102,.55);
  }
}