:root{
  --green:#187a2f;
  --red:#c62828;
  --gold:#e0a106;
  --muted:#f4f4f5;
  --text:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,Segoe UI,Roboto,Arial;color:var(--text);line-height:1.6;background:#fff}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:0 auto}

/* Topbar */
.topbar{
  background:linear-gradient(90deg,var(--green),var(--red));
  color:#fff;text-align:center;font-weight:700;letter-spacing:.2px;
  padding:.5rem 1rem;font-size:.95rem
}

/* Header fijo */
.header{
  position: static; top: auto;z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #eee;
  backdrop-filter:saturate(1.2) blur(6px);
  transition:box-shadow .2s ease, transform .2s ease;
}
.header.scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.06) }
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;font-weight:800}
.logo{
  width: 100px;   /* o 28–36px según te guste */
  height: 72px;
  object-fit: contain;
}
.nav{
  display:flex;
  gap:1rem;
  align-items:center;
  background: rgba(255,255,255,0.95); /* ← agrega esta línea */
  backdrop-filter: blur(6px);         /* ← y esta si quieres un toque translúcido */
}

.nav-link{padding:.55rem .9rem;border-radius:999px;text-decoration:none;color:var(--text);font-weight:600}
.nav-link:hover{background:var(--muted)}
.nav .cta{background:var(--green);color:#fff}
.nav .cta:hover{filter:brightness(.95)}
.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:26px;height:3px;background:#333;margin:5px 0;border-radius:2px}

/* Hero */
.hero{position:relative;min-height:36vh;display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden; z-index: -1;}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%,rgba(0,0,0,.35),transparent 60%),
    linear-gradient(135deg,#111 0%,#333 100%);
}
.hero-content{position:relative;padding:3rem 0}
.hero h1{margin:0 0 .75rem;font-size:clamp(2rem,4.5vw,3.6rem);line-height:1.1}
.hero .overline{letter-spacing:.15em;font-weight:700;color:#e5e7eb;font-size:.9rem;text-transform:uppercase}
.hero strong{color:var(--gold)}
.hero p{max-width:820px;margin:0 auto 1.2rem;color:#e5e7eb}
.hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{background:var(--gold);border:0;color:#111;font-weight:800;padding:.8rem 1.1rem;border-radius:10px;text-decoration:none;cursor:pointer}
.btn-outline{background:transparent;border:2px solid #fff;color:#fff}

/* Sections */
.section{ padding:4rem 0; scroll-margin-top: var(--topbar-h); }
.about{background:var(--muted)}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.about-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:1.2rem;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.bullets{margin:0;padding-left:1.1rem}
.bullets li{margin:.45rem 0}

/* Productos */
.products h2{text-align:center;margin-top:0}
.controls{display:flex;gap:.6rem;justify-content:center;margin:1rem 0 2rem}
.controls input[type=search]{padding:.75rem 1rem;border:1px solid #ddd;border-radius:10px;min-width:260px}
.controls .btn-small{padding:.6rem .9rem;font-size:.9rem}
.product-grid{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;padding:0;margin:0
}
.product-grid li{
  background:#fff;border:1px solid #eee;border-radius:14px;padding:1rem;font-weight:700;
  box-shadow:0 5px 14px rgba(0,0,0,.05)
}

/* Valores */
.values{background:#0f172a;color:#e5e7eb}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.value-card{background:#111827;border:1px solid #222;border-radius:16px;padding:1.2rem}
.value-card h3{color:var(--gold);margin-top:0}

/* Contacto (iframe embebido a pantalla completa) */
.form-embed {
  position: relative;
  width: 100%;
  height: 100vh;              /* antes: min-height:760px; → ocupa toda la pantalla */
  background: #fff;
  border: none;               /* opcional: quita borde si no quieres marco */
  border-radius: 0;           /* elimina curvas si quieres que llene todo */
  box-shadow: none;           /* sin sombra */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.form-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.privacy-hint {
  font-size: .9rem;
  color: #475569;
  margin-top: 1rem;
  text-align: center;
}

/* Footer */
.footer{background:#0b0b0b;color:#cbd5e1;padding:2rem 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer a{color:#cbd5e1;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}

/* Responsive */
@media (max-width: 880px){
  .grid-2{grid-template-columns:1fr}
  .nav{display:none;position:absolute;right:1rem;top:64px;background:#fff;border:1px solid #eee;border-radius:12px;padding:.5rem;flex-direction:column}
  .hamburger{display:block}
  .nav.open{display:flex}
}

/* Sección contacto colapsable */
.contact-collapsible{max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s ease, opacity .3s ease;}
.contact-collapsible.is-open{max-height:1200px; opacity:1}

/* Forzar el tamaño del formulario embebido */
#gform{
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: 0 !important;
  display: block !important;
}
#contacto .form-embed{
  height: 100vh;        /* asegura el contenedor a pantalla completa */
  max-width: none;      /* sin límite de ancho */
  margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none;
}