/* =========================================================
   GEMS CHILE — style.css (FINAL)
   ========================================================= */

/* ---------- Paleta & base ---------- */
:root{
  --bg:#f9fbf7; --paper:#fff; --ink:#24323a; --muted:#6b7a86;
  --brand:#1b5e20; --accent:#FFB703;
  --apple:#D32F2F; --kiwi:#7CB342; --walnut:#8B5E3C;
  --ok:#55c271; --none:#cfd8dc;
  --shadow:0 10px 30px rgba(0,0,0,.08); --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--ink); background:var(--bg); line-height:1.5; scroll-behavior:smooth;
}

/* ---------- Header con video ---------- */
header{
  position:relative; height:92vh; min-height:520px;
  display:grid; place-items:center; text-align:center; color:#fff;
  margin-bottom:56px; overflow:hidden;
}
.header-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-1; filter:saturate(1.05) contrast(1.03)
}
.header-content{
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
  padding:32px 42px; border-radius:var(--radius);
  backdrop-filter:blur(2px); box-shadow:var(--shadow)
}
.header-content h1{line-height:1.05;letter-spacing:.5px}
.geecee-text{font-size:clamp(32px,6vw,64px);font-weight:800;display:block}
.chile-text{font-size:clamp(16px,3vw,28px);font-weight:600;display:block;margin-top:2px}
.header-content p{margin-top:10px;font-size:clamp(14px,2.4vw,18px)}

/* ---------- Navbar ---------- */
.navbar{position:absolute;top:18px;right:22px;z-index:2}
.menu-toggle{display:none;font-size:30px;color:#fff;cursor:pointer}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{
  color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;
  padding:6px 8px;border-radius:8px;transition:.2s ease
}
.nav-links a:hover{background:rgba(255,255,255,.14)}
.nav-links select{
  background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.35);
  padding:6px 10px;border-radius:10px
}

/* ---------- Secciones ---------- */
section{
  max-width:1200px;margin:0 auto 28px auto;padding:36px 28px;background:var(--paper);
  border-radius:var(--radius);box-shadow:var(--shadow);border-top:1px solid rgba(0,0,0,.06)
}
h2{font-size:clamp(22px,3.6vw,30px);color:var(--brand);margin-bottom:16px}
h3{font-size:clamp(18px,3vw,22px);color:#0d4b3a;margin:8px 0}

/* About */
.mission-vision-container{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center}
.about-us-image{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow)}

/* ---------- PRODUCTS — tarjetas verticales centradas ---------- */
.products-vertical{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;            /* cards igual altura por fila */
}
.product-card{
  display:flex;                   /* imagen + body */
  flex-direction:column;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  height:100%;
}
.product-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

/* Cuerpo en flex column: (se sobreescribe más abajo con grid para alinear) */
.pc-body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;                  /* ocupa el alto disponible */
  text-align:center;
  gap:10px;
  min-height:320px;               /* margen para textos largos */
}
.pc-title{display:flex;justify-content:center;gap:10px}
.pc-bullets{
  margin:0; padding-left:0; list-style-position:inside;
  color:var(--muted); text-align:center;
}
.pc-bullets li{margin:4px 0}
.btn-cta{
  margin-top:auto;                /* (se sobreescribe abajo en el fix) */
  align-self:center;
  background:var(--brand);color:#fff;text-decoration:none;font-weight:800;
  padding:10px 14px;border-radius:12px;transition:transform .15s ease,filter .2s ease
}
.btn-cta:hover{transform:translateY(-1px);filter:brightness(.95)}
.product-card.apples  .pc-title{color:var(--apple)}
.product-card.kiwi    .pc-title{color:var(--kiwi)}
.product-card.walnuts .pc-title{color:var(--walnut)}

/* ---------- SEASONALITY — grilla con Shipping/None ---------- */
.season-note{color:var(--muted);margin-bottom:14px}
.season-grid{
  --col-product:180px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#f4fff7,#ffffff);
  box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)
}
/* Cabecera (meses) */
.sg-head{
  display:grid;grid-template-columns:var(--col-product) repeat(12,1fr);
  background:#e8453a;color:#fff;font-weight:800;letter-spacing:.2px
}
.sg-head .sg-cell{padding:10px 8px;text-align:center;border-right:1px solid rgba(255,255,255,.18)}
.sg-head .sg-cell:first-child{text-align:left;padding-left:14px;border-right-color:rgba(255,255,255,.28)}
.sg-head abbr{border-bottom:none;text-decoration:none;cursor:help}
/* Filas */
.sg-row{display:grid;grid-template-columns:var(--col-product) repeat(12,1fr);background:#fff}
.sg-row:nth-child(odd){background:#fcfffd}
.sg-row + .sg-row{border-top:1px solid #eef4ef}
.sg-product{
  position:sticky;left:0;z-index:1;background:inherit;
  padding:12px 14px;display:flex;align-items:center;gap:10px;font-weight:700;border-right:1px solid #eef4ef
}
.sg-product .chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:#f1fff4;color:#184f2b;font-size:14px;box-shadow:0 2px 6px rgba(56,142,60,.12) inset
}
.chip.apple{background:rgba(211,47,47,.08);color:var(--apple)}
.chip.kiwi{background:rgba(124,179,66,.12);color:var(--kiwi)}
.chip.walnut{background:rgba(139,94,60,.12);color:var(--walnut)}
.sg-cell{padding:10px 6px;display:flex;align-items:center;justify-content:center;border-right:1px solid #eef4ef}
/* Pastillas */
.pill{
  min-width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08)
}
.s-ship .pill{background:var(--ok)}
.s-none .pill{background:var(--none);color:#546e7a}
/* Leyenda (Shipping / None) */
.season-legend{display:flex;gap:14px;align-items:center;margin-top:12px;flex-wrap:wrap}
.season-legend .dot{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:6px;box-shadow:0 2px 6px rgba(0,0,0,.1) inset}
.season-legend .dot.ship{background:var(--ok)}
.season-legend .dot.none{background:var(--none)}

/* ---------- Clientes ---------- */
#clients .logos-container{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:18px}
#clients .logos-container img{height:56px;width:auto;filter:saturate(.9) contrast(.9)}

/* ---------- Contacto + mapa ---------- */
#contact{position:relative;padding:0;min-height:560px;overflow:hidden}
#contact iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:saturate(1.05) contrast(1.02) brightness(.98)
}
.contact-info-form-container{
  position:relative;z-index:1;display:flex;gap:22px;justify-content:flex-end;align-items:flex-start;
  padding:24px;
}
.contact-info-block{
  max-width:420px;background:rgba(255,255,255,.92);
  padding:18px 20px;border-radius:14px;box-shadow:var(--shadow)
}
.contact-info-item{display:flex;align-items:center;gap:12px;margin:6px 0;color:#30424c}
.contact-info-item i{color:var(--brand)}
/* Formulario */
#contact-form{
  background:linear-gradient(135deg,#e8f8ec 0%,#fff6db 100%);
  color:#1b3130;padding:18px 20px;border-radius:14px;width:100%;max-width:420px;box-shadow:var(--shadow)
}
#contact-form h3{color:#0d4b3a}
#contact-form label{color:#234}
#contact-form input,#contact-form textarea{
  width:100%;padding:10px 12px;border:1px solid #c6d5c8;background:#ffffffc7;color:#123;border-radius:10px;margin:6px 0 14px
}
#contact-form textarea{min-height:120px;resize:vertical}
#contact-form button{
  background:var(--accent);color:#1e3a2f;border:0;padding:12px 16px;border-radius:10px;font-weight:800;cursor:pointer;transition:.2s ease
}
#contact-form button:hover{filter:brightness(.97);transform:translateY(-1px)}

/* ---------- Footer & WhatsApp ---------- */
footer{
  background:var(--brand);color:#fff;text-align:center;padding:28px 10px;
  border-radius:var(--radius);box-shadow:var(--shadow);max-width:1200px;margin:28px auto
}
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:20;transition:transform .2s ease}
.whatsapp-float:hover{transform:scale(1.05)}

/* ---------- Utilities ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .products-vertical{grid-template-columns:repeat(2,1fr)}
  .mission-vision-container{grid-template-columns:1fr}
  header{height:80vh}
}
@media (max-width:768px){
  .menu-toggle{display:block}
  .nav-links{display:none}
  .nav-links.active{
    display:flex;position:absolute;top:56px;right:20px;flex-direction:column;gap:10px;
    background:rgba(0,0,0,.85);padding:12px;border-radius:12px
  }
  section{padding:22px 18px}
  .products-vertical{grid-template-columns:1fr}
  .product-card img{height:220px}
  .season-grid{--col-product:140px}
  .sg-head .sg-cell{padding:8px 6px}
  .sg-product{padding:10px 10px}
  .pill{min-width:20px;height:20px;font-size:11px}
  #contact{min-height:820px}
  #contact iframe{position:static;height:320px}
  .contact-info-form-container{flex-direction:column;align-items:center;justify-content:center;padding:16px}
}

/* RTL */
html[dir="rtl"] .nav-links{direction:rtl}
html[dir="rtl"] .sg-product{text-align:right}

/* =========================================================
   ADD-ON 2025 — estilos no disruptivos para nuevas secciones
   (Specs <details>, Markets & Compliance y FAQs)
   ========================================================= */

/* ---------- Detalles/Specs dentro de las product cards ---------- */
#products .pc-body details{
  margin-top:10px;
  border:1px solid #e3efe6;
  border-radius:12px;
  background:#f6fff8;
  box-shadow:0 4px 10px rgba(0,0,0,.04) inset;
  overflow:hidden;
}
#products .pc-body details > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-weight:800;
  color:#0d4b3a;
  display:flex; align-items:center; gap:8px;
  user-select:none;
}
#products .pc-body details > summary::-webkit-details-marker{display:none}
#products .pc-body details > summary::after{
  content:"▾"; margin-left:auto; color:#275d42; font-weight:900;
  transition:transform .2s ease;
}
#products .pc-body details[open] > summary::after{ transform:rotate(180deg) }
#products .pc-body details > div{
  padding:10px 14px 14px 14px;
  color:#2c3e46;
}
#products .pc-body details h4{
  font-size:15px; color:#0d4b3a; margin:10px 0 6px; letter-spacing:.2px
}
#products .pc-body details p{ margin:6px 0 }
#products .pc-body details ul{ padding-left:18px; margin:6px 0 }
#products .pc-body details li{ margin:4px 0; color:var(--muted) }

/* Hover/focus accesible */
#products .pc-body details > summary:focus{
  outline:2px dashed #0d4b3a; outline-offset:2px
}
#products .pc-body details > summary:hover{
  background:#eefaf1
}

/* ---------- Markets & Compliance ---------- */
#markets ul{
  list-style:disc; padding-left:22px; color:#2c3e46
}
#markets li{ margin:6px 0 }

/* ---------- FAQs ---------- */
#faqs details{
  border:1px solid #e6edf0; border-radius:12px; margin:10px 0; background:#fff
}
#faqs details > summary{
  list-style:none; cursor:pointer; padding:12px 14px; font-weight:800; color:#0d4b3a;
  display:flex; align-items:center
}
#faqs details > summary::-webkit-details-marker{display:none}
#faqs details > summary::after{
  content:"＋"; margin-left:auto; color:#275d42; font-weight:900; transition:transform .2s ease
}
#faqs details[open] > summary::after{ content:"－" }
#faqs details > p{ padding:0 14px 12px 14px; color:#2c3e46 }

/* Nota extendida bajo la grilla de temporadas */
#seasonality .season-note + .season-legend + .season-note{
  margin-top:10px; color:#456; font-size:14px
}

/* ---------- Responsive tweaks (add-on) ---------- */
@media (max-width:768px){
  #products .pc-body details > summary{ padding:12px }
  #products .pc-body details > div{ padding:10px 12px 12px }
  #faqs details > summary{ padding:12px }
  #faqs details > p{ padding:0 12px 12px }
}

/* =========================================================
   FIX de alineación — colocar <details> y el botón al mismo nivel
   en todas las cards, sin tocar el HTML.
   ========================================================= */

/* Convierte .pc-body a grid para que <ul> ocupe 1fr y empuje
   el bloque <details> y el botón al fondo, igualando alturas. */
#products .pc-body{
  display:grid;                        /* sobrescribe el flex anterior */
  grid-template-rows:auto auto 1fr auto auto; /* h3, p, (ul crece), details, btn */
  align-content:stretch;
}

/* El botón ya no necesita margin-top:auto con grid */
#products .pc-body .btn-cta{
  margin-top:0;
  justify-self:center;
}

/* Micro–ajustes de separaciones */
#products .pc-body .pc-bullets{ margin-top:2px }
#products .pc-body details{ margin-top:10px }