/* ==========================================================
   DISEÑO V2 — ENFOCADO EN LOS 3 PRODUCTOS
   Colores y medidas centralizados aquí.
   ========================================================== */
:root{
  --green:#0a4229;
  --green2:#2f7b16;
  --blue:#155d96;
  --gold:#b18728;
  --ink:#12221a;
  --cream:#f6f5ef;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 50px));margin:auto}

/* ==========================================================
   LOGO PRINCIPAL — TAMAÑO FIJO Y RESPONSIVO
   La imagen NO puede crecer por reglas globales de img.
   Desktop: 180px x 50px aprox.
   Móvil:   150px x 42px aprox.
   ========================================================== */

.header .container.nav > .logo > img {
  display: block !important;
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.links{display:flex;gap:26px;font-size:11px;font-weight:800}
.links a:hover{color:var(--green2)}
.quote,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:3px;font-size:11px;font-weight:800;padding:13px 20px}
.quote{background:var(--green);color:#fff}
.menu{display:none;border:0;background:none;font-size:24px}

.hero{
  position:relative;
  min-height:430px;
  overflow:hidden;
  /* IMAGEN DEL BANNER: esta es la imagen que debe quedar DETRÁS del texto HTML. */
  background-image:url("assets/hero-azucar-mexico.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* Capa MUY ligera únicamente para mejorar la lectura del texto izquierdo.
   No tapa los costales ni convierte el banner en un fondo verde. */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.68) 0%,rgba(255,255,255,.36) 37%,rgba(255,255,255,0) 65%);
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:2;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.hero-copy{max-width:610px}
.kicker{margin:0 0 8px;color:var(--green2);font-size:13px;font-weight:900;letter-spacing:.03em}
.hero h1{font-size:50px;line-height:.97;margin:0 0 18px;color:var(--green);letter-spacing:.015em}
.hero-copy>p:not(.kicker){max-width:490px;font-size:16px;line-height:1.55}
.buttons{display:flex;gap:12px;margin-top:22px}
.primary{background:var(--green);color:#fff}
.secondary{background:#fff;color:var(--green);border:1px solid var(--green)}
.hero-note{background:#ffffffdd;padding:22px 25px;min-width:205px;display:grid;gap:7px;border-left:5px solid var(--green2)}
.hero-note strong{font-size:24px;color:var(--green)}
.hero-note span{font-size:12px}

/* Nombres sobre los costales de la fotografía.
   Se colocan SOBRE los costales, no en la columna izquierda. */
.hero-bag-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.bag-label{
  position:absolute;
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  line-height:1.05;
  text-shadow:0 2px 4px rgba(0,0,0,.38);
  font-size:clamp(13px,1.35vw,22px);
  letter-spacing:.02em;
}
.bag-standard{left:65.5%;top:50.5%;transform:translate(-50%,-50%)}
.bag-refined{left:83.3%;top:52.5%;transform:translate(-50%,-50%)}

.products{padding:62px 0;background:#fff}
.section-title{text-align:center;margin-bottom:32px}
.section-title h2{font-size:31px;margin:0 0 8px;color:var(--green)}
.section-title>p:last-child{font-size:13px;color:#555}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{border:1px solid #e1e2da;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 5px 25px #0000000d;transition:transform .2s,box-shadow .2s}
.product:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0002}
.product-image{background:#152818;aspect-ratio:1.05/1;overflow:hidden;padding:8px}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-info{padding:23px}
.tag{display:inline-block;font-size:9px;font-weight:900;padding:5px 8px;margin-bottom:9px;border-radius:3px;color:#fff}
.tag.green{background:var(--green2)}
.tag.blue{background:var(--blue)}
.tag.gold{background:var(--gold)}
.product-info h3{font-size:23px;line-height:1.05;margin:0 0 12px;color:var(--green)}
.price{font-size:26px;font-weight:900;color:#9a7922;margin-bottom:5px}
.price small{font-size:10px;font-weight:800;color:#555}
.minimum{font-size:12px;margin:0 0 13px}
.product-info>p:not(.minimum){font-size:12px;line-height:1.5;color:#555;min-height:38px}
.product-btn{display:flex;align-items:center;justify-content:center;color:#fff;padding:12px 10px;font-size:10px;font-weight:900;margin-top:18px;border-radius:3px}
.green-btn{background:var(--green2)}
.blue-btn{background:var(--blue)}
.gold-btn{background:var(--gold)}

.industries{background:linear-gradient(90deg,#073d27,#0b5b33);color:#fff;padding:48px 0}
.light{color:#d5e8a9}
.industries h2{margin:0 0 24px;font-size:31px}
.industry-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.industry-grid div{background:#fff;color:var(--green);min-height:85px;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.industry-grid b{font-size:25px}.industry-grid span{font-size:9px;font-weight:900}

.about{padding:58px 0;background:var(--cream)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about h2{font-size:32px;line-height:1.03;color:var(--green);margin:0 0 15px}
.about p:not(.kicker){font-size:14px;line-height:1.6;max-width:600px}
.stats{border-left:1px solid #ccc;padding-left:30px;display:grid;gap:22px}
.stats div{display:grid;gap:5px}.stats strong{font-size:17px}.stats span{font-size:11px;line-height:1.5}

.sustainability{padding:45px 0}
.sustainability h2{font-size:30px;color:var(--green);margin:0 0 8px}
.sustainability p:not(.kicker){font-size:13px}

.contact{background:#043d27;color:#fff;padding:50px 0}
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:70px;align-items:center}
.contact h2{font-size:34px;line-height:1.02;margin:0 0 13px}
.contact p:not(.kicker){line-height:1.5;font-size:13px}
.contact-card{background:#fff;color:var(--ink);padding:28px;border-radius:5px;display:grid;gap:12px}
.contact-card h3{margin:0 0 5px;color:var(--green)}
.contact-card a{font-size:13px;color:var(--green2);font-weight:700}
.contact-card .whatsapp{background:var(--green);color:#fff;text-align:center;padding:12px;margin-top:7px}

footer{padding:35px 0 15px;background:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.footer-brand{color:var(--green);font-size:16px}
.footer-grid p{font-size:11px;color:#666}
.footer-grid h4{font-size:10px;margin:0 0 10px}
.footer-grid a{display:block;font-size:10px;line-height:1.9}
.socials{display:flex;gap:8px;margin-top:12px}.socials a{width:25px;height:25px;border:1px solid #bbb;border-radius:50%;display:grid;place-items:center}
.legal{border-top:1px solid #ddd;margin-top:25px;padding-top:12px;font-size:9px;color:#777}

@media(max-width:950px){
 .links{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;padding:20px 25px;flex-direction:column}
 .links.open{display:flex}.menu{display:block}.quote{display:none}
 .product-grid{grid-template-columns:1fr}
 .product{display:grid;grid-template-columns:45% 55%}.product-image{aspect-ratio:auto}
 .industry-grid{grid-template-columns:repeat(4,1fr)}
 .contact-grid,.about-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
 .container{width:calc(100% - 30px)}
 .hero{min-height:520px;background-position:58% center}
 .hero-content{padding:35px 0;display:block;min-height:520px}
 .hero-note{margin-top:25px;max-width:250px}
 .hero-bag-labels{display:none}
 .buttons{flex-direction:column}.buttons .btn{width:100%}
 .product{display:block}.product-image{aspect-ratio:1.05/1}
 .industry-grid{grid-template-columns:repeat(2,1fr)}
 .footer-grid{grid-template-columns:1fr 1fr}
}

/* ==========================================================
   FORMULARIO DE CONTACTO + SEO/CONVERSIÓN
   ========================================================== */
.form-note{font-size:12px!important;opacity:.85}
.form-status{width:min(var(--max),calc(100% - 50px));margin:18px auto 0;padding:12px 16px;border-radius:4px;font-size:13px;font-weight:700;display:none}
.form-status.success{display:block;background:#e8f5e9;color:#155724}
.form-status.error{display:block;background:#fff0f0;color:#8a1c1c}
.contact-form{display:grid;gap:12px}
.contact-form label{font-size:11px;font-weight:800;display:grid;gap:5px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;font:inherit;font-size:12px;font-weight:400;padding:11px 12px;border:1px solid #d7d9d2;border-radius:3px;background:#fff;color:var(--ink);outline:none}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--green2);box-shadow:0 0 0 2px #2f7b1620}
.contact-form textarea{resize:vertical;min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.privacy-note{font-size:9px!important;color:#777!important;line-height:1.4!important;margin:0!important}
.hp{position:absolute!important;left:-10000px!important;opacity:0!important;height:1px!important;width:1px!important}
@media(max-width:650px){.form-row{grid-template-columns:1fr}.form-status{width:calc(100% - 30px)}}

/* ==========================================================
   BOTÓN FLOTANTE "LLAMA AHORA" — SOLO MÓVIL
   Oculto en escritorio y visible hasta 650px.
   ========================================================== */
.mobile-call {
  display: none;
  position: fixed;
  left: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 1000;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 22px #0005;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid #ffffff30;
}

.mobile-call-icon {
  width: 28px;
  height: 28px;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
}

@media (max-width: 650px) {
  .mobile-call {
    display: flex;
  }

  /* Evita que el botón tape el último contenido del sitio. */
  body {
    padding-bottom: 78px;
  }
}