/* === Nunito local (rounded) === */
@font-face{
  font-family: 'Nunito';
  src: url('Nunito-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Nunito';
  src: url('Nunito-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Aplica Nunito como base */
html, body {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
}

/* ===== Baseline tipográfica + contenedor ===== */
:root{
  --container: 1200px;
  --leading: 1.6;
  --fg: #0f172a;
  --muted: #6b7280;
}
html { scroll-behavior: smooth; }
body { color: var(--fg); line-height: var(--leading); letter-spacing:.01em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

h1{
  font-weight: 700;
  letter-spacing: .01em;
  /* sombra suave, legible en fondos claros y medios */
  text-shadow: 0 2px 6px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.06);
}
h2{ font-weight:700; text-shadow: 0 1px 3px rgba(0,0,0,.12); }
h3{ font-size: clamp(1.1rem, .6vw + .9rem, 1.3rem); line-height:1.3; }
h4,h5{ line-height:1.3; }

/* Secciones con respiro */
.hero{ padding: clamp(1.5rem, 3vw, 3rem) 0; }
.hero h1{ text-shadow: 0 3px 10px rgba(0,0,0,.22), 0 1px 1px rgba(0,0,0,.07); }
.section, .text, .cards, .contact { padding: 1.2rem 0; }
.contact .card h3 { margin:.2rem 0 .6rem; }
.contact select { padding:.55rem .6rem; border:1px solid #ccc; border-radius:8px; background:#fff; }
.contact .actions { display:flex; gap:.6rem; margin-top:.75rem; }

/* ===== Header base ===== */
.site-header { border-bottom: 1px solid #eee; }
.site-header .container { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; }
.brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; font-weight:600; }
.main-nav a { margin-right: .75rem; text-decoration:none; color:#333; }
.main-nav a:hover { text-decoration: underline; }
.lang-switch a { margin-left: .5rem; text-decoration:none; color:#666; font-size:.9rem; }
.lang-switch a.active { font-weight:600; color:#000; }

/* Grupo derecho (selector idioma + logo) */
.right-group { display:flex; align-items:center; gap:.9rem; }

/* Switch de idioma de escritorio: oculto en mobile, visible en desktop */
.lang-desktop { display:none; gap:.6rem; align-items:center; }
.lang-desktop a { margin-left:.5rem; font-size:.9rem; color:#445269; text-decoration:none; }
.lang-desktop a.active { font-weight:700; color:#000; }

@media (min-width: 781px){
  .lang-desktop { display:flex; }
}

/* ===== Cards / campos / botones ===== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.card { border:1px solid #eee; border-radius: 16px; padding: 1rem; }
.field { margin: .75rem 0; display:flex; flex-direction:column; gap:.35rem; }
.field input, .field textarea { padding:.6rem .7rem; border:1px solid #ccc; border-radius:8px; }
button, .btn { padding:.6rem 1rem; border:0; background:#725314; color:#fff; border-radius:12px; cursor:pointer; }
.btn.ghost { background:transparent; color:#0a7cff; border:1px solid #0a7cff; }

/* Alerts */
.alert { padding: .8rem 1rem; border-radius: 10px; margin: 1rem 0; border:1px solid #ddd; }
.alert.success { background:#f0fff4; border-color:#b7f0c3; color:#064e3b; }
.alert.error { background:#fff1f2; border-color:#fecdd3; color:#7f1d1d; }

/* Honeypot: oculto fuera de pantalla (sin inline style) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Top social (header sutil) ===== */
.top-social { border-bottom:1px solid #eee; background:#f9fafb; }
.top-social .social-row { display:flex; justify-content:center; gap:1.1rem; padding:.45rem 0; }
.top-social .soc { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:#fff; border:1px solid #e5e7eb; cursor:pointer; }
.top-social .soc:hover { background:#f0f4ff; }

/* ===== Nav fila: menú izq, logo der ===== */
.nav-row { display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
.main-nav.left { display:flex; align-items:center; gap:1.05rem; flex-wrap:wrap; }
.main-nav.left a { text-decoration:none; color:#0a2a4a; }
.main-nav.left a:hover { text-decoration:underline; }
.lang-switch a { margin-left:.5rem; font-size:.9rem; color:#445269; text-decoration:none; }
.lang-switch a.active { font-weight:600; color:#000; }

/* Logo del header */
.brand.right img { width:88px; height:88px; }

/* ===== Quick contact (si se usa) ===== */
.quick-contact { border-top:1px solid #eee; background:#fafafa; padding: 2rem 0; }
.qc-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; }
.qc-col h4 { margin:.25rem 0 .75rem; font-size:1.05rem; }
.qc-item { display:flex; align-items:center; gap:.5rem; margin:.4rem 0; }
.qc-item .ico { width:1.25rem; text-align:center; opacity:.8; }
.qc-item a { color:#0a2a4a; text-decoration:none; }
.qc-item a:hover { text-decoration:underline; }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; display:none; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal-card { position:relative; width:min(92vw, 460px); margin:10vh auto 0; background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25); overflow:hidden; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding: .9rem 1rem; border-bottom:1px solid #eee; }
.modal-close { background:transparent; border:0; font-size:1.4rem; cursor:pointer; }
.modal-body { padding: 1rem; }
.modal .field { margin:.75rem 0; display:flex; flex-direction:column; gap:.35rem; }
.modal .field input[type="text"] { padding:.6rem .7rem; border:1px solid #ccc; border-radius:8px; }
.modal .field.checkbox { flex-direction:row; align-items:center; gap:.5rem; }
.modal .actions { display:flex; gap:.5rem; margin-top:.75rem; }

/* ===== Footer ===== */
.site-footer { border-top:1px solid #eee; background:#fafafa; }
.foot-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1.25rem; padding:1.2rem 0; }
.foot-col h5 { margin:.2rem 0 .6rem; font-size:1rem; letter-spacing:.02em; color:#0a2a4a; }
.foot-col .addr a { color:#0a2a4a; text-decoration:none; }
.foot-col .addr a:hover { text-decoration:underline; }
.foot-col .line { display:flex; align-items:center; gap:.5rem; margin:.35rem 0; }
.foot-col .ico { width:1.2rem; text-align:center; opacity:.85; }
.foot-col a.obf { text-decoration:none; color:#0a7cff; }
.foot-col a.obf:hover { text-decoration:underline; }

.foot-logo { border-top:1px solid #eee; text-align:center; padding:.8rem 0; }
.foot-logo img { width:112px; height:112px; }

.copy { text-align:center; color:#6b7280; padding: .4rem 0 1rem; }

/* ===== Micro-interacciones ===== */
a, .btn { transition: transform .06s ease, opacity .12s ease, background-color .12s ease; }
a:focus-visible, .btn:focus-visible { outline: 2px solid #0a7cff; outline-offset: 2px; border-radius: 8px; }
.btn:hover { transform: translateY(-1px); }

/* Asterisco de requerido y nota del formulario */
.req { color:#b91c1c; margin-left:.25rem; font-weight:700; }
.form-note { margin:.4rem 0 .6rem; color: var(--muted); font-size:.875rem; }
.field.checkbox .req { margin-left:.35rem; }

/* ===== Desktop grande: footer simétrico y centrado respecto del logo ===== */
@media (min-width: 781px){
  .foot-grid{
    grid-template-columns: repeat(2, minmax(320px, 520px));
    justify-content: center;
    column-gap: 4rem;
    row-gap: 1.5rem;
  }
  .foot-grid .foot-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .foot-col .line{ justify-content: center; }
  .foot-logo{ padding: 1.1rem 0; }
}

/* ===== Responsive (phones) ===== */
@media (max-width: 780px) {
  .brand.right img { width:72px; height:72px; }
  .foot-logo img { width:92px; height:92px; }
}

/* ===== RRHH ===== */
.rrhh-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1.1rem; }
.rrhh-card{ display:flex; flex-direction:column; gap:.5rem; }
.rrhh-title{ margin: .1rem 0 .15rem; }
.rrhh-meta{ display:flex; flex-wrap:wrap; gap:.4rem; color:#445269; font-size:.9rem; }
.tag{ display:inline-block; padding:.15rem .45rem; border:1px solid #e5e7eb; border-radius:999px; background:#fff; }
.rrhh-summary{ color:#334155; }
.rrhh-actions{ margin-top:auto; }

/* Forms: alineación de alturas entre inputs y select */
.field select{ padding:.6rem .6rem; border:1px solid #ccc; border-radius:8px; background:#fff; height: 42px; }
.field input[type="file"]{ border:1px dashed #cbd5e1; padding:.6rem; border-radius:8px; background:#fff; }
.field input:focus, .field textarea:focus, .field select:focus, .field input[type="file"]:focus{
  outline:2px solid #0a7cff; outline-offset:1px;
}


/* Avisos en RRHH */
.notice{ padding:.9rem 1rem; border-radius:10px; border:1px solid #cbd5e1; background:#f8fafc; color:#0f172a; margin: .8rem 0 1.1rem; }
.notice.info{ border-color:#c7d2fe; background:#eef2ff; }

/* Legal bajo el form */
.legal-note{ margin:.5rem 0 1rem; color:#475569; font-size:.9rem; }
.legal-note a{ color:#0a2a4a; text-decoration:underline; }
.hint{ display:block; color:#64748b; font-size:.85rem; margin-top:.25rem; }


/* ===== HERO: marco fino + overlay claro + esquinas reales en la imagen ===== */
.hero-banner{
  /* variables para controlar radio, gap de marco y opacidad del overlay */
  --hero-radius: 18px;
  --hero-gap: -45px;         /* ancho del marco fino (lateral que veías “grueso”) */
  --hero-overlay: .1;     /* opacidad del overlay sobre la foto (más claro) */

  position: relative;
  border-radius: var(--hero-radius);
  overflow: hidden;        /* recorta imagen y overlays */
  margin-bottom: clamp(1rem, 3vw, 2rem);
  min-height: clamp(180px, 28vw, 360px);
  display: grid;
  align-items: center;
  color: #fff;
}

/* Marco fino (detrás de la imagen) */
.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;                 /* ocupa todo el contenedor */
  z-index:0;               /* detrás de la imagen */
  border-radius: inherit;
  /* tono suave: podés usar #725314 con baja opacidad si preferís un marco “corporativo” */
  background: rgba(114, 83, 20, .12);
}

/* Capa de overlay sobre la imagen (más claro que antes) */
.hero-banner::after{
  content:"";
  position:absolute;
  inset: var(--hero-gap);  /* calza exactamente con la imagen */
  z-index:2;               /* sobre la imagen, bajo el texto */
  border-radius: calc(var(--hero-radius) - var(--hero-gap));
  /* overlay uniforme; si querés gradiente sólo abajo: 
     linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,var(--hero-overlay)) 90%) */
  background: rgba(0,0,0, var(--hero-overlay));
}

/* La imagen se “achica” un pelín para que se vea el marco fino alrededor */
.hero-banner .hero-media{
  position:absolute;
  inset: var(--hero-gap);
  z-index:1;               /* sobre el marco, debajo del overlay */
  border-radius: calc(var(--hero-radius) - var(--hero-gap));
  overflow:hidden;
}
.hero-banner .hero-media img{
  width:100%; height:100%;
  object-fit: cover; object-position: center; display:block;
  /* redondeo real de la imagen, no sólo clipping del contenedor */
  border-radius: inherit;
  filter: saturate(1.05) contrast(1.05);
}

/* Contenido (títulos) por encima de todo */
.hero-banner .hero-inner{ position: relative; z-index:3; padding: clamp(1.2rem, 3vw, 2.2rem) 1rem; text-align:center; }
.hero-banner .hero-title{
  color:#fff; font-weight:800; letter-spacing:.01em;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height:1.15;
  margin:0 0 .4rem; text-shadow: 0 6px 18px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.22);
}
.hero-banner .hero-subtitle{
  color:#fff; margin:0; font-weight:600;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  text-shadow: 0 4px 12px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
}

/* Mobile: ajustamos radio y marco un toque */
@media (max-width: 780px){
  .hero-banner{ --hero-radius: 14px; --hero-gap: -45px; min-height: clamp(160px, 34vw, 260px); }
  .hero-banner .hero-inner{ padding: 1.2rem 1rem; }
}


/* === MÁS ESPACIO ENTRE SECCIONES ===
   Aumentamos el padding vertical de los bloques de contenido comunes
*/
.section, .text, .cards, .contact,
.rrhh.positions, .rrhh.spontaneous, .rrhh.apply {
  padding: clamp(1.75rem, 4.5vw, 3rem) 0;
}

/* === Logos / badges === */
.badges{ padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.badge-row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(.8rem, 2.2vw, 1.2rem); align-items:center;
}
.badge-item{ text-align:center; }
.badge-item img{
  max-height: 64px; width:auto;
  filter: grayscale(0); opacity:.95;
  transition: transform .12s ease, opacity .12s ease;
}
.badge-item a:hover img{ transform: translateY(-2px); opacity:1; }
.badge-caption{ display:block; margin-top:.35rem; font-size:.9rem; color:#445269; }

/* === CTA elegante === */
.cta-block{ text-align:center; padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.cta-block .cta-text{ color:#334155; margin:.35rem 0 1rem; }
.btn.large{ padding:.8rem 1.25rem; font-size:1.05rem; border-radius:14px; }

/* === Logos / badges: cajas uniformes con aspect-ratio y duotono corporativo === */
:root{
  --brand-hex: #725314;
}

/* grilla responsiva */
.badge-row{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(.9rem, 2.2vw, 1.25rem);
  align-items: stretch;
}
.badge-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* Caja del logo: todas iguales */
.logo-box{
  /* ancho fluido + proporción fija (ajustá 3/2 o 16/9 según te guste) */
  width: min(240px, 100%);
  aspect-ratio: 3 / 2;
  display:grid; place-items:center;
  padding: 10px;                 /* margen interno */
  border-radius: 14px;
  border:1px solid rgba(114,83,20,.18);
  background:#fff;               /* base limpia */
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .2s ease;
  margin-inline: auto;
}

/* La imagen se adapta sin deformarse */
.logo-box img{
  max-width: 65%;
  max-height: 65%;
  object-fit: contain;
  display:block;
  /* estado base: gris sutil para homogeneizar */
  filter: grayscale(100%) contrast(1.05) brightness(0.98) opacity(.96);
  transition: transform .15s ease, filter .2s ease;
}

/* Enlace (para foco accesible) */
.badge-link{
  display:inline-block;
  border-radius: 16px; /* mayor que la caja para que el focus no la corte */
  outline: none;
}
.badge-link:focus-visible .logo-box{
  box-shadow: 0 0 0 3px rgba(114,83,20,.25);
}

/* Hover/focus: duotono aproximado a #725314 y leve lift */
.badge-item:hover .logo-box,
.badge-link:focus-visible .logo-box{
  transform: translateY(-2px);
}
.badge-item:hover .logo-box img,
.badge-link:focus-visible .logo-box img{
  /* aproximación de filtros a #725314 (PNG/JPEG) */
  filter:
    invert(16%) sepia(24%) saturate(1200%)
    hue-rotate(5deg) brightness(92%) contrast(95%);
}

/* Pie de texto */
.badge-caption{
  display:block; margin-top:.5rem;
  font-size:.9rem; color:#445269;
}

/* Ajustes mobile */
@media (max-width: 780px){
  .logo-box{ aspect-ratio: 16 / 10; padding: 8px; border-radius: 12px; }
  .badge-caption{ font-size:.88rem; }
}


/* === Texto + Media (bg difuminado + carrusel snap) === */
.section.text-media{ position: relative; overflow: clip; }
.section.text-media.has-bg .section-bg{
  position:absolute; inset:0 0 30% 0; z-index:0;
}
.section.text-media.has-bg .section-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 34%, rgba(255,255,255,0) 100%);
}

.section.text-media .section-bg img{
  width:100%; height:100%; object-fit: cover; object-position:center; filter: blur(0.6px);
}
.section.text-media .container{ position:relative; z-index:1; }
.media-carousel{ margin-top: .9rem; position:relative; }
.media-track{
  display:flex; gap:.8rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.3rem;
}
.media-item{ flex:0 0 auto; width:min(420px, 90%); scroll-snap-align:start; border-radius:14px; overflow:hidden; }
.media-item img{ display:block; width:100%; height:100%; object-fit:cover; }
.media-nav{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.media-nav .nav{
  pointer-events:auto; border:0; border-radius:999px; width:38px; height:38px; font-size:22px; line-height:1;
  background:rgba(255,255,255,.85); box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer;
}

/* === Misión + Visión + Video === */
.mv-grid{ display:grid; grid-template-columns: 1.2fr .9fr; gap: clamp(1rem, 3vw, 2rem); align-items:start; }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width: 900px){ .mv-grid{ grid-template-columns: 1fr; } }

/* === Banner Solar con KPI === */
.solar-kpi{ position:relative; border-radius:18px; overflow:hidden; margin: clamp(1rem, 3vw, 2rem) 0; }
.solar-kpi .kpi-bg{ position:absolute; inset:0; z-index:0; }
.solar-kpi .kpi-bg img{ width:100%; height:100%; object-fit:cover; filter: saturate(1.1) contrast(1.05); }
.solar-kpi::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
}
.solar-kpi .container{ position:relative; z-index:2; }
.kpi-card{
  display:grid; place-items:center; text-align:center; color:#fff;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.kpi-card h2{ margin:0 0 .4rem; color:#fff; text-shadow:0 6px 18px rgba(0,0,0,.32); }
.kpi-sub{ margin:0; opacity:.95; }
.kpi-value{
  margin:.3rem 0 .2rem; font-weight:800; letter-spacing:.01em;
  font-size: clamp(2.2rem, 6vw, 4rem); text-shadow:0 8px 22px rgba(0,0,0,.35);
}
.kpi-foot{ margin:.1rem 0 0; opacity:.95; }

/* Centrado vertical del video en la grilla de Misión/Visión */
.mv-grid{ align-items: stretch; }          /* que las columnas ocupen la altura del track */
.mv-video-col{ display: flex; }            /* habilitamos layout flexible en la col del video */
.mv-video-col .video-embed{ margin: auto 0; } /* centra verticalmente el iframe dentro de la col */

/* En mobile, va apilado: sin margen auto */
@media (max-width: 900px){
  .mv-video-col .video-embed{ margin: 0; }
}

/* ===== Cards de producto ===== */
.cards{ padding: clamp(1.2rem, 3.2vw, 2.2rem) 0; }
.card-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(1rem, 2.2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden; background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
}
.card-media{
  aspect-ratio: 4/3; background: #faf7f1;
  display:grid; place-items:center; overflow:hidden;
}
.card-media img{
  max-width: 86%; max-height: 86%; object-fit:contain; display:block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
}
.card-body{ padding: clamp(.9rem, 2.2vw, 1.1rem); }
.card-title{
  margin: 0 0 .35rem; font-weight:800;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); color:#222;
}
.card-body p{ margin:.35rem 0; color:#334155; }
.perf{ list-style:none; margin:.5rem 0 0; padding:0; }
.perf li{
  position:relative; padding-left: 1.15rem; margin:.25rem 0; color:#1f2937;
}
.perf li::before{
  content:"✓"; position:absolute; left:0; top:0; line-height:1;
  color:#725314; font-weight:800;
}
.industry{ margin:.6rem 0 0; }
.industry span{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  background: rgba(114,83,20,.1); color:#725314; font-weight:700; font-size:.9rem;
}

/* ===== Puntos de calidad ===== */
.quality{ padding: clamp(1.2rem, 3vw, 2rem) 0; }
.quality-row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(.8rem, 2vw, 1.2rem);
}
.quality-item{ display:flex; align-items:center; gap:.7rem; padding:.5rem .3rem; }
.qicon{
  flex:0 0 auto; width:56px; height:56px; border-radius:14px;
  background:#fff; display:grid; place-items:center;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
}
.qicon img{ max-width:70%; max-height:70%; object-fit:contain; display:block; }
.qlab{ font-weight:700; color:#1f2937; }

/* === PRODUCTS CARDS: imagen grande y sin rectángulo de fondo === */
.cards .card-media{
  /* más alto para darle protagonismo a la imagen */
  aspect-ratio: 1 / 1;            /* antes ~4/3; probá 4/5 si querés aún más alto */
  background: transparent;        /* sin rectángulo de fondo */
  padding: 0;                     /* nada de borde interior */
}
.cards .card-media img{
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  filter: none;                   /* si preferís, sacamos el drop-shadow */
}

/* Opcional: si querés todavía más presencia, podés subir el tamaño del área: */
/* .cards .card-media{ aspect-ratio: 4 / 5; } */

/* === QUALITY ICONS: grandes, con leyenda debajo, en 3 columnas desktop === */
.quality-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* base responsive */
  gap: clamp(1rem, 2.2vw, 1.4rem);
}
@media (min-width: 980px){
  .quality-row{
    grid-template-columns: repeat(3, 1fr); /* 3 columnas fijas en pantallas normales/grandes */
  }
}
.quality-item{
  display: flex;
  flex-direction: column;         /* icono arriba, texto abajo */
  align-items: center;
  text-align: center;
  padding: clamp(.6rem, 1.6vw, 1rem) .5rem;
}
.qicon{
  width: clamp(96px, 12vw, 128px);  /* iconos mucho más grandes */
  height: clamp(96px, 12vw, 128px);
  border-radius: 18px;
  background: transparent;         /* sin plaqueta de fondo */
  box-shadow: none;
  display: grid; place-items: center;
}
.qicon img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.qlab{
  margin-top: .6rem;
  font-weight: 700;
  font-size: clamp(.98rem, 1.2vw, 1.05rem);
  color: #1f2937;
}



/* ===== PRODUCT CARDS – Más grandes, tipografía más legible y 3 columnas ===== */

/* Espaciado general de la sección */
.cards{ 
  padding: clamp(1.6rem, 4vw, 3rem) 0; 
}

/* Grilla: por defecto responsiva; en desktop, 3 columnas fijas */
.card-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* móviles/tablet */
}
@media (min-width: 1100px){
  .card-grid{ grid-template-columns: repeat(3, 1fr); } /* 3 columnas en desktop */
}

/* Tarjeta más “grande” y cómoda de leer */
.card{
  display:flex; flex-direction:column;
  border-radius: 18px;
  background:#fff; 
  box-shadow: 0 10px 28px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
  overflow:hidden;
}

/* Imagen protagonista (sin rectángulo de fondo) */
.card-media{
  aspect-ratio: 4 / 5;               /* más alta que 1/1 para lucir el saco */
  background: transparent;
  display:grid; place-items:center;
}
.card-media img{
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  display:block;
  filter: none;
}

/* Cuerpo con tipografía más grande y line-height cómodo */
.card-body{
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1rem, 2.4vw, 1.35rem) clamp(1.1rem, 2.6vw, 1.5rem);
}
.card-title{
  margin: 0 0 .55rem;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color:#1f2937;
}
.card-body p{
  margin: .5rem 0;
  color:#334155;
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  line-height: 1.65;
}

/* Lista de performance más clara y espaciada */
.perf{ list-style:none; margin:.7rem 0 0; padding:0; }
.perf li{
  position:relative; padding-left: 1.25rem; margin:.35rem 0;
  color:#1f2937;
  font-size: clamp(.98rem, 1.1vw, 1.02rem);
}
.perf li::before{
  content:"✓"; position:absolute; left:0; top:0; line-height:1;
  color:#725314; font-weight:800;
}

/* Etiqueta de industria un poco más grande */
.industry{ margin:.8rem 0 0; }
.industry span{
  display:inline-block; 
  padding:.4rem .7rem; 
  border-radius:999px;
  background: rgba(114,83,20,.10); 
  color:#725314; 
  font-weight:700; 
  font-size: .95rem;
}

.error-page{ padding: clamp(2rem,5vw,4rem) 0; text-align:center; }
.error-page h1{ font-size: clamp(1.4rem,3vw,2rem); }

/* Modal (WhatsApp) siempre por encima del hero y overlays */
.modal{
  position: fixed;       /* asegura que no hereda stacking del contenedor */
  inset: 0;
  z-index: 20000;        /* > cualquier overlay del sitio */
}
.modal .modal-backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.modal .modal-card{
  position: relative;
  z-index: 1;
  /* opcional: sombra para destacarlo sobre fotos */
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Por si algún hero tiene z-index elevado, lo normalizamos */
.hero-banner{ z-index: 0; position: relative; }

/* === Contact Link (banner con imagen de fondo) === */
.contact-link{ position:relative; border-radius:18px; overflow:hidden; margin: clamp(1rem, 3vw, 2rem) 0; }
.contact-link .cl-bg{ position:absolute; inset:0; z-index:0; }
.contact-link .cl-bg img{ width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.05); }
.contact-link::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28));
}
.contact-link .container{ position:relative; z-index:2; }
.contact-link .cl-card{
  display:grid; place-items:center; text-align:center; color:#fff;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.contact-link h2{ color:#fff; margin:0 0 .4rem; text-shadow:0 6px 18px rgba(0,0,0,.28); }
.contact-link .cl-industry{ margin:.1rem 0 1rem; opacity:.95; color:#fff; }
.contact-link .btn.large{ background:#fff; color:#1f2937; font-weight:800; border:0; }
.contact-link .btn.large:hover{ transform: translateY(-1px); }

/* ===== Home Dashboard ===== */
.dash{ padding: clamp(1.4rem, 3.4vw, 2.6rem) 0; }
.dash-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(1rem, 2.2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 1100px){
  .dash-grid{ grid-template-columns: repeat(3, 1fr); } /* 3 col en desktop */
}
.dash-item{ display:block; }
.dash-card{
  display:flex; gap: .9rem; align-items:center;
  background:#fff; border-radius:18px; text-decoration:none;
  padding: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
  border: 1px solid rgba(114,83,20,.10);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.dash-card:hover, .dash-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  border-color: rgba(114,83,20,.25);
  outline: none;
}
.dash-media{
  flex: 0 0 auto;
  width: 92px; height: 92px;
  border-radius: 14px; background: #faf7f1; display:grid; place-items:center; overflow:hidden;
}
.dash-media img{ max-width: 90%; max-height: 90%; object-fit: contain; display:block; }
.dash-placeholder{ width:64px; height:64px; border-radius:12px; background: rgba(114,83,20,.14); }

.dash-body{ flex: 1 1 auto; min-width: 0; }
.dash-title{ margin:0 0 .15rem; font-weight: 800; color:#1f2937; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.dash-text{ margin:0; color:#334155; font-size: .98rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }


/* HEADER SIEMPRE ENCIMA DEL HERO */
.site-header, .site-head { position: relative; z-index: 30000; }

/* ===== NAV: hamburguesa + menús con submenús ===== */
.nav-toggle{
  display:none;
  width:42px; height:36px;
  border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; cursor:pointer;
  display:flex; flex-direction:column;  /* barras apiladas */
  align-items:center; justify-content:center;
  gap:5px;
}
.nav-toggle .bar{
  display:block;
  width:24px; height:2px;               /* líneas, no puntos */
  background:#0a2a4a;
  border-radius:2px;
}

.menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1rem; }
.menu > li > a{
  text-decoration:none; color:#0a2a4a; background:transparent; padding:.4rem .2rem;
}
.menu > li > a:hover{ text-decoration:underline; }

.has-submenu{ position:relative; }

/* Submenú (base): SIN gap vertical; queda pegado al padre */
.submenu{
  list-style:none; margin:0; padding:.4rem 0;
  position:absolute; left:0; top:100%;
  min-width: 220px;
  background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:none; z-index:50;
}
.submenu li a{ display:block; padding:.5rem .85rem; color:#0a2a4a; text-decoration:none; }
.submenu li a:hover{ background:#f5f7fb; }

/* Indicador ▾ vía span.caret (evita duplicados) */
.caret{ font-size:.8em; line-height:1; }


/* El selector de idioma dentro del menú (menu-lang) es solo para mobile */
.menu-lang{ display:none; }

/* ===== Desktop (≥780px): abrir por hover o foco de teclado ===== */
@media (min-width: 781px){
  .nav-toggle{ display:none; }
  .nav-row{ align-items: center; }
  .menu{ gap:1.1rem; }
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu{ display:block; }
}

/* ===== Mobile / Tablet (≤780px): menú vertical y submenús SIEMPRE visibles ===== */
@media (max-width: 780px){
  .nav-toggle{ display:flex; }
  .nav-row{ gap:.75rem; }
  .main-nav{ max-height:0; overflow:hidden; transition:max-height .2s ease; }
  .site-header.nav-open .main-nav{ max-height:80vh; }

  .menu{ flex-direction:column; align-items:stretch; gap:.25rem; padding:.5rem 0; }
  .menu > li { border-top:1px solid #eef2f7; }
  .menu > li:first-child{ border-top:0; }
  .menu > li > a{ padding:.7rem .25rem; text-align:left; }

  /* ▼ SIEMPRE visibles los submenús en mobile */
  .menu .submenu{
    position:static; display:block;
    border:0; border-radius:0; box-shadow:none; padding:0 0 .4rem 0;
  }

  /* El “padre” no actúa como botón en mobile (solo informa) */
  .menu .has-submenu > a.parent-link{
    /* cursor:default; pointer-events:none; color:#0a2a4a; */
    cursor:pointer; pointer-events:auto;
  }

  .menu .submenu li a{ padding:.55rem .9rem; }
  .menu-lang{ display:block; padding:.5rem 0; }
  .caret{ display:none; } /* en mobile no hace falta el indicador */
}

/* Ítem activo: bold + sombreado suave */
.menu > li > a.active,
.menu > li.has-submenu > a.parent-link.active{
  font-weight: 700;
  background: #eef3ff;
  border-radius: 8px;
  padding: .4rem .5rem;
}
.submenu li a.active{
  font-weight: 700;
  background: #f5f7ff;
}

/* Mostrar el nav en mobile cuando hay marca de apertura, sin importar variantes */
@media (max-width: 780px){
  html.nav-open #main-nav,
  .site-header.nav-open #main-nav,
  #main-nav.open{ display:block !important; max-height:80vh; overflow:auto; }
}

/* Oculto visualmente el checkbox, pero accesible para el label */
.nav-check{ position:absolute; clip:rect(0 0 0 0); clip-path: inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }

/* Botón hamburguesa (3 líneas) */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:36px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; cursor:pointer; gap:5px;
}
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#0a2a4a; border-radius:2px; }

/* Header por delante del hero */
.site-header, .site-head{ position:relative; z-index:1000; }

/* ------ Mobile ------ */
@media (max-width: 780px){
  /* Nav colapsable */
  #main-nav{ max-height:0; overflow:hidden; transition:max-height .2s ease; display:block; } /* display:block para animar altura */
  /* Abrir cuando el checkbox está marcado */
  .nav-check:checked ~ #main-nav{ max-height:80vh; }

  /* Verticalizamos el UL en mobile (si no lo tenés ya) */
  #main-nav .menu{ display:flex; flex-direction:column; gap:.25rem; padding:.5rem 0; }
  #main-nav .menu > li{ border-top:1px solid #eef2f7; }
  #main-nav .menu > li:first-child{ border-top:0; }
}

/* ------ Desktop ------ */
@media (min-width: 781px){
  .nav-toggle{ display:none; }
  #main-nav{ max-height:none; overflow:visible; }
  #main-nav .menu{ display:flex; flex-direction:row; gap: .8rem; }
}









/* === HERO FULL-BLEED + OVERLAY 1:1 ============================= */

/* 1) El contenedor del hero no agrega padding lateral */
.hero .container{ padding-left:0; padding-right:0; }

/* 2) El banner rompe el límite del .container y se extiende a todo el viewport */
.hero .hero-banner{
  /* Sin marco: overlay e imagen del mismo tamaño */
  --hero-radius: 0;
  --hero-gap: 0;

  position: relative;
  width: 100vw;                                 /* ocupa todo el viewport */
  margin-left: calc(50% - 50vw);                /* “salirse” del container */
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  min-height: clamp(200px, 36vw, 460px);        /* un poco más alto en mobile */
}

/* 3) Eliminamos el “marco” de color que agrandaba el lateral */
.hero .hero-banner::before{ content: none; }

/* 4) Overlay exactamente del tamaño de la imagen */
.hero .hero-banner::after{ inset: 0; background: rgba(0,0,0,.22); } /* ajustá .22 a gusto */

/* 5) Imagen al 100% del banner, sin gap */
.hero .hero-banner .hero-media{ inset: 0; border-radius: 0; }
.hero .hero-banner .hero-media img{ width:100%; height:100%; object-fit:cover; border-radius:0; }

/* 6) Texto centrado y acotado dentro del banner */
.hero .hero-banner .hero-inner{
  position: relative; z-index: 3;
  padding: clamp(1rem, 3vw, 2rem);
  max-width: min(100%, 1200px);
  margin-inline: auto;
  text-align: center;
}

/* 7) Tipografías más “fluidas” para pantallas chicas */
.hero .hero-banner .hero-title{
  font-size: clamp(1.4rem, 6vw, 2.8rem);
  line-height: 1.15;
}
.hero .hero-banner .hero-subtitle{
  font-size: clamp(.95rem, 3.2vw, 1.25rem);
}

/* 8) Mobile: garantizamos altura suficiente para que el texto no se salga */
@media (max-width: 780px){
  .hero .hero-banner{ min-height: clamp(240px, 50vw, 360px); }
}