/* =====================================================================
   Pelegrina Envases - estilos
   Sin frameworks y sin CDN: todo vive en el hosting, para que abra
   rapido en el celular del galpon, que es desde donde va a entrar la
   mayoria.

   LOS COLORES SALEN DEL LOGO REAL, medidos pixel por pixel sobre
   "Recurso 14Circular fondo rojo.png":
       rojo  #E62C20   (88,5 % del logo)
       crema #F0F5E1   (10,2 %)

   El rojo de marca sobre blanco da 4,45:1 de contraste, apenas por
   debajo del minimo AA para texto chico (4,5:1). Por eso hay dos:
       --rojo      fondos, botones y trazos gruesos. Es EL color
       --rojo-txt  mas oscuro, solo para texto sobre blanco

   EL VERDE SOLO EXISTE PARA WHATSAPP, y solo en el boton flotante.
   Antes estaba tambien en los botones grandes y se comia la marca:
   la pagina parecia de WhatsApp y no de Pelegrina. Los botones de
   accion son rojos.
   ===================================================================== */

:root{
  --rojo:      #E62C20;
  --rojo-osc:  #B81C12;
  --rojo-txt:  #C41F14;
  --crema:     #F0F5E1;
  --tinta:     #16181C;
  --tinta-2:   #464C55;
  --papel:     #FFFFFF;
  --borde:     #E2E5EA;
  --oscuro:    #14181D;
  --wa:        #25D366;

  --ancho: 1140px;
  --r: 12px;
  --sombra: 0 2px 4px rgba(20,24,29,.06), 0 8px 24px rgba(20,24,29,.08);
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--fuente); color:var(--tinta);
  background:var(--papel); font-size:17px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--rojo-txt)}

.contenedor{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 20px}

.saltar{position:absolute; left:-9999px; top:0; background:var(--tinta); color:#fff; padding:10px 16px; z-index:100}
.saltar:focus{left:0}

/* ---------- barra ---------- */
.barra{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--borde); backdrop-filter:saturate(1.2) blur(6px);
}
.barra__i{display:flex; align-items:center; gap:18px; height:68px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none}
.marca img{height:38px; width:auto}
.marca__txt{height:26px !important}

.nav{margin-left:auto; display:flex; gap:22px}
.nav a{color:var(--tinta-2); text-decoration:none; font-size:15.5px; padding:6px 0}
.nav a:hover{color:var(--rojo-txt)}
.barra__cta{padding:10px 18px; font-size:15px}

.hamb{display:none; margin-left:auto; width:44px; height:44px; background:none; border:1px solid var(--borde); border-radius:10px; cursor:pointer; padding:10px}
.hamb span{display:block; height:2px; background:var(--tinta); margin:4px 0; border-radius:2px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; text-decoration:none; font-weight:600;
  border:2px solid transparent; cursor:pointer; font-size:16px; font-family:inherit;
}
.btn--g{padding:15px 30px; font-size:17px}
.btn--rojo{background:var(--rojo); color:#fff}
.btn--rojo:hover{background:var(--rojo-osc)}
.btn--linea{border-color:currentColor; color:#fff; background:transparent}
.btn--linea:hover{background:rgba(255,255,255,.14)}
button.btn{border:0}

/* ---------- portada ---------- */
.hero{position:relative; color:#fff; isolation:isolate}
.hero__foto{
  position:absolute; inset:0; z-index:-2;
  background:url(../img/w/hero.jpg) center/cover no-repeat #2A1206;
}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(12,10,8,.92) 0%, rgba(12,10,8,.72) 55%, rgba(12,10,8,.35) 100%)}
.hero__i{padding:96px 20px 92px; max-width:760px; margin-left:max(20px, calc(50% - var(--ancho)/2))}
.hero__sello{
  display:inline-block; margin:0 0 18px; padding:7px 15px; border-radius:999px;
  background:var(--rojo); font-size:14px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
}
.hero h1{margin:0 0 18px; font-size:clamp(38px, 7vw, 64px); line-height:1.05; letter-spacing:-1px}
.hero h1 span{color:var(--crema)}
.hero__bajada{margin:0 0 30px; font-size:clamp(17px, 2.3vw, 21px); max-width:580px; color:#EFEBE7}
.hero__ctas{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- franja ---------- */
.franja{background:var(--tinta); color:#fff}
.franja__i{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:26px 20px}
.franja__i div{display:flex; flex-direction:column}
.franja__i b{font-size:16px}
.franja__i span{font-size:14px; color:#AEB5BF}

/* ---------- secciones ---------- */
.seccion{padding:78px 0}
.seccion--crema{background:var(--crema)}
.seccion--oscura{background:var(--oscuro); color:#fff}
.seccion--oscura h2, .seccion--oscura h3{color:#fff}
.seccion--oscura a{color:#FFB3AB}
h2{font-size:clamp(28px, 4vw, 38px); line-height:1.15; margin:0 0 14px; letter-spacing:-.5px}
h3{font-size:19px; margin:0 0 8px}
.seccion__bajada{margin:0 0 38px; color:var(--tinta-2); max-width:660px; font-size:18px}
.seccion--oscura .seccion__bajada{color:#B9C0CA}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}

/* ---------- productos ---------- */
.grilla{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.prod{
  background:#fff; border:1px solid var(--borde); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.prod:hover{box-shadow:var(--sombra)}
.prod__foto{width:100%; height:200px; object-fit:cover}
.prod__i{padding:20px; display:flex; flex-direction:column; flex:1}
.prod p{margin:0 0 12px; color:var(--tinta-2); font-size:16px}
/* Las cuatro tarjetas sin foto llevan un filo rojo arriba, para que la
   grilla no se vea rota mientras no haya fotos de esos rubros. */
.prod--sinfoto{border-top:4px solid var(--rojo)}
.prod--sinfoto .prod__i{padding-top:24px}

.lista{margin:0 0 16px; padding-left:20px; color:var(--tinta-2); font-size:15.5px}
.lista li{margin:3px 0}
.prod__cta{margin-top:auto; font-weight:600; text-decoration:none; cursor:pointer; color:var(--rojo-txt)}
.prod__cta:hover{text-decoration:underline}

/* ---------- selector por cultivo ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px}
.chip{padding:11px 20px; border-radius:999px; border:1px solid #D6DCC8; background:#fff; cursor:pointer; font-size:16px; font-family:inherit; color:var(--tinta)}
.chip:hover{border-color:var(--rojo)}
.chip[aria-pressed="true"]{background:var(--rojo); border-color:var(--rojo); color:#fff}
.reco{background:#fff; border:1px solid #D6DCC8; border-left:5px solid var(--rojo); border-radius:var(--r); padding:24px}
.reco p{color:var(--tinta-2); margin:0 0 18px}

/* ---------- la empresa ---------- */
.fabrica__foto{border-radius:var(--r); width:100%; object-fit:cover}

/* ---------- contacto ---------- */
.lugar{margin-bottom:24px}
.lugar p{margin:2px 0; color:#C8CFD8}
.nota{font-size:15px; color:#98A1AC}
.form{display:flex; flex-direction:column; gap:14px}
.form label{display:flex; flex-direction:column; gap:6px; font-size:15px; color:#C8CFD8}
.form input, .form select, .form textarea{
  padding:12px 14px; border-radius:10px; border:1px solid #39404A;
  background:#1D232A; color:#fff; font-size:16px; font-family:inherit;
}
.form input:focus, .form select:focus, .form textarea:focus{outline:2px solid var(--rojo); border-color:var(--rojo)}
.form__aviso{margin:0; font-size:15px; min-height:22px}
.form__aviso.ok{color:#B7E4C7}
.form__aviso.mal{color:#FFA8A8}
.tarro{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- pie ---------- */
.pie{background:#0E1115; color:#9AA3AE; padding:30px 0; font-size:15px}
.pie__i p{margin:3px 0}
.pie__fina{color:#6B747F; font-size:13.5px}

/* ---------- boton flotante de WhatsApp ----------
   El UNICO verde de la pagina. Es el color propio de WhatsApp y ahi si
   corresponde: la gente lo reconoce sin leer. */
.flota{
  position:fixed; right:18px; bottom:18px; z-index:60; width:54px; height:54px;
  border-radius:50%; background:var(--wa); color:#0A2E17; display:flex;
  align-items:center; justify-content:center; box-shadow:var(--sombra); cursor:pointer;
}
.flota:hover{filter:brightness(.94)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grilla{grid-template-columns:repeat(2,1fr)}
  .dos{grid-template-columns:1fr; gap:34px}
  .franja__i{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body{font-size:16px}
  .hamb{display:block}
  .barra__cta{display:none}
  .nav{position:absolute; left:0; right:0; top:68px; background:#fff; flex-direction:column;
       gap:0; border-bottom:1px solid var(--borde); padding:6px 20px 14px; display:none}
  .nav.abierto{display:flex}
  .nav a{padding:12px 0; border-bottom:1px solid var(--borde)}
  .grilla{grid-template-columns:1fr}
  .seccion{padding:56px 0}
  .hero__i{padding:64px 20px 60px}
  .hero__sello{font-size:12px; padding:6px 13px; letter-spacing:.2px}
}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---------- acceso del personal ----------
   Un candado chico en el pie, y nada mas. Antes era una seccion entera
   con titulo y tres botones: le gritaba al cliente que entraba a cotizar
   que ahi adentro habia sistemas internos. Ahora hay que saber que esta.
   Se abre con <details>, sin JavaScript. */
.acc{margin-top:14px}
.acc summary{
  list-style:none; cursor:pointer; width:28px; height:28px; line-height:28px;
  text-align:center; font-size:15px; opacity:.45; border-radius:6px; user-select:none;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{opacity:1; background:#1B1F25}
.acc[open] summary{opacity:1}
.acc__l{display:flex; gap:16px; flex-wrap:wrap; padding:10px 0 2px}
.acc__l a{color:#7D8792; font-size:13.5px; text-decoration:none}
.acc__l a:hover{color:var(--rojo); text-decoration:underline}