/* ===== Geneseret — estilos generales ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Nunito+Sans:wght@400;600;700&display=swap');

:root{
  --azul-oscuro:  #4d7a94;
  --verde-agua:   #52a89b;
  --amarillo:     #f0cf6c;
  --texto:        #17242b;
  --texto-suave:  #45565d;
  --fondo:        #ffffff;
  --radio:        10px;
  --max: 1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Nunito Sans', sans-serif;
  color:var(--texto);
  background:var(--fondo);
  line-height:1.5;
}
h1,h2,h3,.mono{
  font-family:'Space Mono', monospace;
  font-weight:700;
  margin:0 0 .5em 0;
  letter-spacing:-0.5px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

/* ---- Header / Nav ---- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  max-width:var(--max);
  margin:0 auto;
}
.site-header .logo img{ height:52px; width:auto; }
.nav-links{
  display:flex;
  gap:36px;
  list-style:none;
  margin:0; padding:0;
  font-weight:700;
}
.nav-links a{
  text-decoration:underline;
  text-underline-offset:4px;
}
.nav-links a.active{ text-decoration-thickness:2px; }
.nav-toggle{ display:none; }

@media (max-width:720px){
  .nav-links{
    position:fixed; inset:0 0 0 auto;
    width:70%; height:100%;
    background:var(--fondo);
    flex-direction:column;
    padding:100px 32px;
    gap:28px;
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:-6px 0 20px rgba(0,0,0,.08);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
  }
  .nav-toggle span{ width:26px; height:3px; background:var(--texto); border-radius:2px; }
}

/* ---- Hero (Inicio) ---- */
.hero{
  position:relative;
  width:100%;
}
.hero-img{
  width:100%;
  height:auto;
  display:block;
}
.hero-hit{
  position:absolute;
  display:block;
}
.hero-hit-contacto{ left:4%; top:80.5%; width:10.5%; height:9%; }
.hero-hit-conocenos{ left:20.2%; top:80.5%; width:10.5%; height:9%; }
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:6px;
  font-weight:700;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  font-family:'Nunito Sans', sans-serif;
  font-size:1rem;
}
.btn-verde{ background:var(--verde-agua); color:#fff; }
.btn-amarillo{ background:var(--amarillo); color:var(--texto); text-decoration:underline; }
.btn:hover{ filter:brightness(0.95); }

/* ---- Nuestra Granja section ---- */
.granja{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
  align-items:center;
  padding:80px 32px;
  max-width:var(--max);
  margin:0 auto;
}
.granja img{ border-radius:var(--radio); }
.granja p{ color:var(--texto-suave); font-size:1.08rem; }

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

/* ---- Contamos con (3 columns) ---- */
.contamos h2{ text-align:center; padding-top:50px; font-size:1.6rem; letter-spacing:2px; }
.contamos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  min-height:340px;
}
.contamos-grid div{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:40px 30px;
  color:#0d1f26;
  font-family:'Space Mono', monospace;
  font-size:1.4rem;
  line-height:1.4;
}
.c1{ background:var(--azul-oscuro); color:#fff; }
.c2{ background:var(--verde-agua); color:#0d1f26; }
.c3{ background:var(--amarillo); }

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

/* ---- Quote ---- */
.quote{
  max-width:900px;
  margin:0 auto;
  padding:70px 32px;
  text-align:center;
  font-family:'Space Mono', monospace;
  font-size:1.4rem;
  line-height:1.5;
}

/* ---- Page header banner (Nosotros/Productos/Contacto) ---- */
.page-banner{
  padding:34px 32px;
  text-align:center;
}
.page-banner h1{ font-size:2.6rem; margin:0; }
.banner-azul{ background:var(--azul-oscuro); color:#0d1f26; }
.banner-verde{ background:var(--verde-agua); color:#0d1f26; }

/* ---- Two column content block (image + text) ---- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:70px 32px;
  max-width:var(--max);
  margin:0 auto;
}
.split img{ border-radius:var(--radio); width:100%; height:100%; object-fit:cover; }
.split.reverse > img{ order:2; }
.split p{ color:var(--texto-suave); font-size:1.08rem; }

@media (max-width:800px){
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse > img{ order:0; }
}

/* ---- Valores (Nosotros) ---- */
.valores-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  padding:20px 32px 70px;
  max-width:var(--max);
  margin:0 auto;
  align-items:start;
}
.valores-cards{ display:flex; flex-direction:column; gap:22px; max-width:420px; width:100%; }
.valores-cards .card{
  background:var(--azul-oscuro);
  color:#fff;
  border-radius:14px;
  padding:22px 26px;
  text-align:center;
  width:100%;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.valores-cards .card h3{ margin-bottom:6px; }
.valores-wrap img{ border-radius:var(--radio); width:100%; }

@media (max-width:800px){
  .valores-wrap{ grid-template-columns:1fr; }
}

/* ---- Vision / Mision ---- */
.vm{
  background:linear-gradient(135deg,#c9d6dc,#e6ecee);
  padding:70px 32px;
}
.vm-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}
.vm-grid p{ color:var(--texto-suave); }
@media (max-width:720px){ .vm-grid{ grid-template-columns:1fr; } }

/* ---- Productos ---- */
.producto-item{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:40px;
  align-items:center;
  padding:50px 32px;
  max-width:var(--max);
  margin:0 auto;
}
.producto-item img{ border-radius:var(--radio); }
.producto-item p{ color:var(--texto-suave); font-size:1.05rem; }
@media (max-width:720px){ .producto-item{ grid-template-columns:1fr; } }

.presentaciones{
  background:var(--verde-agua);
  text-align:center;
  padding:70px 32px;
}
.presentaciones h2{ font-size:2rem; margin-bottom:40px; }
.presentaciones-list{
  display:flex;
  justify-content:center;
  gap:70px;
  flex-wrap:wrap;
  font-family:'Space Mono', monospace;
  font-size:2rem;
  margin-bottom:40px;
}
.presentaciones .nota{ font-weight:700; }

/* ---- Contacto ---- */
.contacto-banner{ background:var(--verde-agua); padding-bottom:70px; }
.contacto-grid{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:50px;
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
  align-items:start;
}
.contact-card{
  background:var(--azul-oscuro);
  border-radius:14px;
  padding:32px;
  color:#fff;
}
.contact-card h2{ color:var(--amarillo); }
.field{ margin-bottom:18px; }
.field label{ display:block; color:var(--amarillo); font-size:.95rem; margin-bottom:6px; }
.field input, .field textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.08);
  border-radius:6px;
  padding:10px 12px;
  color:#fff;
  font-family:inherit;
  font-size:1rem;
}
.field textarea{ min-height:90px; resize:vertical; }
.contact-card .btn{ width:100%; text-align:center; margin-top:8px; }
.contacto-msg{
  font-family:'Space Mono', monospace;
  font-size:1.5rem;
  text-align:center;
  color:#0d1f26;
  padding-top:40px;
}
@media (max-width:800px){ .contacto-grid{ grid-template-columns:1fr; } }
.gracias{ text-align:center; padding:40px 32px 10px; color:var(--texto-suave); }

/* ---- Footer ---- */
footer{
  padding:60px 32px 24px;
  max-width:var(--max);
  margin:0 auto;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  gap:60px;
  justify-content:space-between;
  padding-bottom:30px;
}
.footer-logo img{ height:60px; }
.footer-col h4{ margin:0 0 10px 0; font-family:'Nunito Sans'; font-weight:700; }
.footer-col a{ display:block; text-decoration:underline; margin-bottom:4px; color:var(--texto-suave); }
.footer-social{ display:flex; align-items:flex-start; }
.footer-social a{ display:inline-flex; }
.footer-bottom{
  text-align:center;
  font-size:.85rem;
  color:#8a97a0;
  border-top:1px solid #eee;
  padding-top:20px;
}