/* =========================================================
   Ipesa – Río Chico — Nuevo sitio — hoja de estilos base
   ========================================================= */

/* =========================================================
   Fuentes DIN Pro / DIN Pro Condensed (self-hosted)
   ========================================================= */
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-lightitalic.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-mediumitalic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-bolditalic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro Condensed"; src:url("../fonts/dinpro-condensed-blackitalic.woff2") format("woff2"); font-weight:900; font-style:italic; font-display:swap; }

@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-lightitalic.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-mediumitalic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-bolditalic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"DIN Pro"; src:url("../fonts/dinpro-blackitalic.woff2") format("woff2"); font-weight:900; font-style:italic; font-display:swap; }



:root{
  /* Marca Ipesa – Río Chico */
  --amarillo: #E8C31C;          /* anillo Ipesa (logo) */
  --amarillo-hover: #D9B30E;
  --amarillo-suave: #FBF3CF;
  --azul: #009FE4;              /* Río Chico (logo) — uso decorativo */
  --azul-texto: #0A6E9E;        /* versión legible sobre blanco (5,4:1) */
  --negro: #1C1D1A;
  --gris-900: #17181a;
  --gris-700: #474a47;
  --gris-500: #6f736f;
  --gris-200: #e6e7e3;
  --gris-100: #f4f5f2;
  --blanco: #ffffff;
  --radius: 14px;
  --shadow-sm: 0 2px 10px rgba(20,22,18,.06);
  --shadow-md: 0 12px 32px rgba(20,22,18,.12);
  --container: 1180px;
  --header-h: 84px;
  --font-head: "DIN Pro Condensed", "Arial Narrow", sans-serif;
  --font-body: "DIN Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{ margin:0; font-family:var(--font-body); color:var(--negro); background:var(--blanco); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; border-radius:4px; }
h1,h2,h3,h4{ font-family:var(--font-head); text-transform:uppercase; font-weight:700; letter-spacing:.5px; line-height:1.08; margin:0 0 .5em; }
/* Mayúsculas sólo para títulos cortos: los h3 de tarjetas van en tipo oración */
h3{ text-transform:none; letter-spacing:.2px; line-height:1.2; }
h2{ font-size:clamp(30px,3.6vw,46px); }
p{ line-height:1.7; color:var(--gris-700); margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===== Anillo Ipesa (elemento firma) =====
   El círculo amarillo con el hueco descentrado hacia abajo, igual que el logo. */
.ring{ display:inline-block; width:14px; height:14px; flex-shrink:0; background:var(--amarillo);
  -webkit-mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%); mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%);
  border-radius:50%; }
.ring-deco{ position:absolute; pointer-events:none; border-radius:50%; background:var(--amarillo);
  -webkit-mask:radial-gradient(circle at 50% 62%, transparent 0 53%, #000 53.5%); mask:radial-gradient(circle at 50% 62%, transparent 0 53%, #000 53.5%); }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px; font-weight:500; font-size:14px; color:var(--azul-texto); margin-bottom:12px; }
.eyebrow::before{ content:""; width:14px; height:14px; border-radius:50%; background:var(--amarillo);
  -webkit-mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%); mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%); }
.eyebrow.center{ justify-content:center; }
.section--dark .eyebrow, .page-hero .eyebrow{ color:var(--amarillo); }

.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--alt{ background:var(--gris-100); }
.section--dark{ background:var(--negro); color:var(--blanco); }
.section--dark p{ color:#c9ccc6; }
.section-head{ max-width:760px; margin:0 0 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.lead{ font-size:18px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:14px 30px; border-radius:100px; border:none; background:none;
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:15px; transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn--primary{ background:var(--amarillo); color:var(--negro); }
.btn--primary:hover{ background:var(--amarillo-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ box-shadow:inset 0 0 0 2px currentColor; }
.btn--ghost:hover{ background:rgba(255,255,255,.14); }
.btn--dark{ box-shadow:inset 0 0 0 2px var(--negro); color:var(--negro); }
.btn--dark:hover{ background:var(--negro); color:#fff; }
.btn--sm{ min-height:40px; padding:10px 20px; font-size:14px; }
.link-arrow{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:14px; color:var(--azul-texto); display:inline-flex; align-items:center; gap:6px; }
.link-arrow::after{ content:"→"; transition:transform .2s ease; }
.link-arrow:hover::after{ transform:translateX(4px); }

/* ===== Header ===== */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,.97); border-bottom:1px solid transparent; transition:box-shadow .25s ease, border-color .25s ease; }
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); border-color:var(--gris-200); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.site-header .logo img{ height:46px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav a.nav-link{ display:flex; align-items:center; gap:6px; padding:12px 14px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px; font-weight:500; font-size:15px; border-radius:8px; color:var(--negro); }
.main-nav a.nav-link:hover, .main-nav li.is-open > a.nav-link, .main-nav a.nav-link.is-current{ color:var(--azul-texto); background:var(--gris-100); }
.main-nav li{ position:relative; }
.nav-caret{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; opacity:.6; }
.dropdown{ position:absolute; top:100%; left:0; min-width:270px; background:#fff; border-radius:12px; box-shadow:var(--shadow-md); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s ease; }
li.is-open > .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
@media (hover:hover) and (pointer:fine) and (min-width:1101px){
  .main-nav li:hover > .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
  .main-nav li:hover > .dropdown::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
}
.dropdown a{ display:block; padding:10px 14px; border-radius:8px; font-size:15px; font-weight:500; color:var(--gris-900); }
.dropdown a:hover{ background:var(--gris-100); color:var(--azul-texto); }
.dropdown hr{ border:none; border-top:1px solid var(--gris-200); margin:6px 4px; }
.dropdown a .ext{ opacity:.55; font-size:12px; margin-left:4px; }
.dropdown--wide{ min-width:520px; display:grid; grid-template-columns:1fr 1fr; gap:0 6px; }
.nav-lang{ margin-left:6px; padding:8px 14px; border:1.5px solid var(--gris-200); border-radius:100px; font-size:13px; font-weight:700; }
.nav-lang:hover{ border-color:var(--negro); }
.nav-toggle{ display:none; }

/* ===== Hero (home) ===== */
.hero{ position:relative; height:100vh; min-height:600px; max-height:900px; overflow:hidden; color:#fff; background:var(--negro); }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; background-size:cover; background-position:center; }
.hero-slide.is-active{ opacity:1; }
.hero-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,15,12,.78) 0%, rgba(14,15,12,.48) 45%, rgba(14,15,12,.12) 78%); }
.hero .ring-deco{ z-index:2; width:min(62vw,720px); aspect-ratio:1; right:-14vw; bottom:-26%; opacity:.9; transform:scale(.92) rotate(-8deg); transition:transform 1.4s cubic-bezier(.2,.7,.3,1); }
.hero.is-ready .ring-deco{ transform:scale(1) rotate(0); }
.hero-content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:var(--header-h); }
.hero-content .container{ width:100%; }
.hero-brand{ display:inline-block; font-family:var(--font-head); letter-spacing:3px; text-transform:uppercase; color:var(--amarillo); font-weight:700; margin-bottom:16px; font-size:16px; min-height:1.2em; }
.hero-title{ font-size:clamp(40px,6.2vw,88px); margin-bottom:28px; max-width:15ch; text-shadow:0 4px 24px rgba(0,0,0,.25); }
.hero-title span{ display:block; }
.hero-title.is-long{ font-size:clamp(30px,3.9vw,54px); max-width:26ch; }
.hero-title .hero-title-2{ color:#fff; opacity:.92; font-weight:500; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-dots{ position:absolute; z-index:4; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.hero-dots button{ width:30px; height:4px; border-radius:4px; border:none; background:rgba(255,255,255,.4); padding:0; transition:background .2s; position:relative; }
.hero-dots button::before{ content:""; position:absolute; inset:-12px -2px; }
.hero-dots button.is-active{ background:var(--amarillo); }
.is-fading{ opacity:0 !important; transition:opacity .35s ease !important; }
.hero-brand, .hero-title, #heroCtaProduct{ transition:opacity .45s ease; }

/* ===== Intro home (Calidad / Innovación / Inversión) ===== */
.intro-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.tabs{ margin-top:28px; }
.tab-list{ display:flex; gap:6px; border-bottom:1px solid var(--gris-200); margin-bottom:22px; flex-wrap:wrap; }
.tab-list button{ background:none; border:none; padding:12px 18px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; font-size:16px; color:var(--gris-500); position:relative; min-height:44px; }
.tab-list button[aria-selected="true"]{ color:var(--negro); }
.tab-list button[aria-selected="true"]::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; background:var(--amarillo); border-radius:3px; }
.tab-panel[hidden]{ display:none; }
.tab-panel p{ font-size:16.5px; }

/* ===== Video ===== */
.video-feature{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:16/10; background:#000; cursor:pointer; border:none; padding:0; width:100%; display:block; color:#fff; text-align:left; }
.video-feature img{ width:100%; height:100%; object-fit:cover; opacity:.78; transition:opacity .3s ease, transform .6s ease; }
.video-feature:hover img{ opacity:.92; transform:scale(1.03); }
.video-play{ position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:var(--amarillo); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.35); transition:transform .25s ease; }
.video-feature:hover .video-play{ transform:translate(-50%,-50%) scale(1.08); }
.video-play::after{ content:""; border-style:solid; border-width:12px 0 12px 19px; border-color:transparent transparent transparent var(--negro); margin-left:5px; }
.video-caption{ position:absolute; z-index:2; left:22px; bottom:18px; right:22px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:16px; }
.video-feature::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.6), transparent 50%); }

/* ===== Productos (grid de tarjetas) ===== */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product-card{ position:relative; display:flex; flex-direction:column; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; }
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.product-card .pc-img{ aspect-ratio:4/3; overflow:hidden; background:var(--gris-200); }
.product-card .pc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.product-card:hover .pc-img img{ transform:scale(1.06); }
.product-card .pc-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.product-card .pc-tag{ font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--gris-500); margin-bottom:6px; font-weight:500; }
.product-card h3{ font-size:24px; margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px; }
.product-card p{ font-size:14.5px; line-height:1.6; margin-bottom:16px; flex:1; }
.product-card .link-arrow::before{ content:""; position:absolute; inset:0; }

/* ===== Hechos (banda oscura) ===== */
.facts-band{ position:relative; overflow:hidden; }
.facts-band .ring-deco{ width:520px; aspect-ratio:1; left:-180px; top:-160px; opacity:.12; }
.facts-grid{ position:relative; display:grid; grid-template-columns:1.1fr 2fr; gap:56px; align-items:center; }
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.fact strong{ display:block; font-family:var(--font-head); font-size:clamp(38px,4vw,54px); color:var(--amarillo); line-height:1; margin-bottom:10px; font-weight:700; }
.fact span{ font-size:14.5px; color:#c9ccc6; line-height:1.5; display:block; }

/* ===== Novedades ===== */
.novedades-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.novedad-card{ position:relative; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column; }
.novedad-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.novedad-card[hidden]{ display:none; }
/* La grilla se adapta a la cantidad de notas: 1 = tarjeta ancha, 2 = dos columnas, 3 o más = tres */
.novedades-grid.is-2{ grid-template-columns:repeat(2,1fr); }
.novedades-grid.is-1{ grid-template-columns:1fr; }
@media (min-width:861px){
  .novedades-grid.is-1 .novedad-card{ flex-direction:row; }
  .novedades-grid.is-1 .novedad-img-link{ flex:0 0 56%; aspect-ratio:auto; min-height:400px; }
  .novedades-grid.is-1 .novedad-body{ padding:48px 52px; justify-content:center; }
  .novedades-grid.is-1 .novedad-card h3{ font-size:30px; line-height:1.2; margin-bottom:16px; }
  .novedades-grid.is-1 .novedad-card p{ font-size:16.5px; line-height:1.7; flex:none; margin-bottom:26px; }
}
.novedades-empty{ grid-column:1/-1; color:var(--gris-500); }
.novedad-img-link{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--gris-200); }
.novedad-img-link img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.novedad-card:hover .novedad-img-link img{ transform:scale(1.06); }
.novedad-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.novedad-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.novedad-date{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--gris-500); }
.novedad-card h3{ font-size:20px; margin-bottom:10px; text-transform:none; letter-spacing:0; line-height:1.3; }
.novedad-card h3 a:hover{ color:var(--azul-texto); }
.novedad-card p{ font-size:14.5px; margin-bottom:18px; flex:1; }

/* detalle de novedad */
.novedad-content{ max-width:760px; margin:0 auto; }
.page-hero h1.is-long{ font-size:clamp(34px,4vw,52px); max-width:24ch; text-transform:none; letter-spacing:0; line-height:1.12; }
.novedad-hero-img{ width:100%; max-height:480px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-md); margin-bottom:44px; cursor:zoom-in; }
.novedad-content p{ font-size:17px; line-height:1.8; color:var(--gris-700); margin-bottom:20px; }
.novedad-content .standfirst{ font-size:20px; line-height:1.6; color:var(--negro); font-weight:500; }
.novedad-content h2{ font-size:26px; margin:36px 0 14px; text-transform:none; letter-spacing:0; line-height:1.3; }
.novedad-content img{ width:100%; border-radius:var(--radius); margin:28px 0; box-shadow:var(--shadow-sm); cursor:zoom-in; }
.novedad-content strong{ color:var(--negro); }
.novedad-content a{ color:var(--azul-texto); text-decoration:underline; text-underline-offset:3px; }
.novedad-content ul{ margin:0 0 20px 22px; list-style:disc; }
.novedad-content li{ margin-bottom:8px; color:var(--gris-700); font-size:16.5px; line-height:1.7; }
.novedad-content blockquote{ margin:28px 0; padding:4px 0 4px 26px; position:relative; }
.novedad-content blockquote::before{ content:""; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:50%; background:var(--amarillo); -webkit-mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%); mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%); }
.novedad-content blockquote p{ color:var(--negro); font-style:italic; }
.novedad-source{ font-size:14.5px !important; color:var(--gris-500) !important; border-top:1px solid var(--gris-200); padding-top:18px; margin-top:32px; }
.novedad-actions{ max-width:760px; margin:12px auto 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ===== Page hero (subpáginas) — con la foto de cabecera original ===== */
.page-hero{ position:relative; padding:176px 0 76px; color:#fff; overflow:hidden; background-color:var(--negro); background-size:cover; background-position:center; }
.page-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,15,12,.86) 0%, rgba(14,15,12,.62) 55%, rgba(14,15,12,.35) 100%); }
.page-hero .ring-deco{ width:380px; aspect-ratio:1; right:-90px; bottom:-190px; opacity:.9; }
.page-hero .container{ position:relative; z-index:1; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:14px; color:#d9dcd5; margin-bottom:18px; flex-wrap:wrap; }
.breadcrumb a{ color:#d9dcd5; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.6; }
.page-hero h1{ font-size:clamp(40px,5.2vw,68px); margin-bottom:14px; max-width:18ch; }
.page-hero .page-hero-sub{ color:#eceee8; max-width:640px; font-size:24px; margin-bottom:0; font-family:var(--font-head); letter-spacing:.3px; font-weight:500; line-height:1.3; }
.page-hero p.page-hero-text{ color:#dfe2da; max-width:640px; font-size:17px; margin:0; }

/* ===== Bloques de contenido ===== */
.content-block{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.content-block.reverse > :first-child{ order:2; }
.content-block img.cb-img{ border-radius:var(--radius); box-shadow:var(--shadow-md); width:100%; aspect-ratio:4/3; object-fit:cover; }
.content-block + .content-block{ margin-top:88px; }
.prose{ max-width:760px; }
.prose p{ font-size:17px; }
.prose h3{ font-size:24px; margin-top:28px; }
.prose ul{ list-style:none; margin:0 0 1.2em; }
.prose ul li{ position:relative; padding-left:26px; margin-bottom:10px; line-height:1.65; color:var(--gris-700); }
.prose ul li::before{ content:""; position:absolute; left:2px; top:.5em; width:10px; height:10px; border-radius:50%; background:var(--amarillo); }
.brand-logo{ height:64px; width:auto; margin-bottom:26px; }
.brand-logo--sm{ height:50px; }

/* Listas de características con checks */
.check-list{ list-style:none; margin:0; padding:0; }
.check-list li{ position:relative; padding-left:28px; margin-bottom:10px; line-height:1.6; color:var(--gris-700); font-size:15.5px; }
.check-list li::before{ content:""; position:absolute; left:0; top:.35em; width:16px; height:16px; border-radius:50%; background:var(--amarillo-suave); box-shadow:inset 0 0 0 5px var(--amarillo); }

/* Tarjetas de valores / políticas */
.value-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.value-grid.three{ grid-template-columns:repeat(3,1fr); }
.value-card{ background:#fff; border-radius:var(--radius); padding:32px 30px; box-shadow:var(--shadow-sm); }
.section--alt .value-card{ background:#fff; }
.value-card h3{ font-size:22px; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.value-card p:last-child, .value-card ul:last-child{ margin-bottom:0; }
.value-card.feature{ grid-column:1 / -1; background:var(--negro); color:#fff; }
.value-card.feature p{ color:#d3d6cf; font-size:17px; }
.value-card.feature h3{ color:var(--amarillo); }

/* Visión / Misión */
.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.vm-card{ position:relative; border-radius:var(--radius); padding:48px 42px; overflow:hidden; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; }
.vm-card h2{ font-size:clamp(34px,4vw,52px); margin-bottom:16px; }
.vm-card p{ font-size:19px; line-height:1.6; margin:0; }
.vm-card--vision{ background:var(--amarillo); }
.vm-card--vision p{ color:var(--negro); }
.vm-card--mision{ background:var(--negro); color:#fff; }
.vm-card--mision p{ color:#e2e5de; }
.vm-card .ring-deco{ width:260px; aspect-ratio:1; right:-70px; top:-70px; }
.vm-card--vision .ring-deco{ background:#fff; opacity:.35; }
.vm-card--mision .ring-deco{ opacity:.2; }

/* Timeline / historia */
.history-figure{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }
.history-figure img{ width:100%; }
.history-figure figcaption{ background:var(--negro); color:#c9ccc6; font-size:14px; padding:12px 18px; }
figure{ margin:0; }

/* Plantas industriales */
.plant-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.plant-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
.plant-card .plant-media{ aspect-ratio:16/9; background:var(--gris-200); position:relative; overflow:hidden; }
.plant-card .plant-media img{ width:100%; height:100%; object-fit:cover; }
.plant-card .plant-body{ padding:28px 28px 30px; flex:1; display:flex; flex-direction:column; }
.plant-card h3{ font-size:24px; margin-bottom:6px; }
.plant-loc{ font-size:14px; color:var(--gris-500); text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; display:block; }
.plant-stats{ display:flex; gap:28px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--gris-200); }
.plant-stats div strong{ display:block; font-family:var(--font-head); font-size:28px; line-height:1; }
.plant-stats div span{ font-size:13px; color:var(--gris-500); text-transform:uppercase; letter-spacing:.5px; }
.plant-card .check-list{ margin-bottom:20px; flex:1; }
.map-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:linear-gradient(135deg,#2a2c27,#1c1d1a); color:#fff; border:none; width:100%; cursor:pointer; padding:20px; text-align:center; }
.map-placeholder .ring{ width:44px; height:44px; }
.map-placeholder span{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; font-size:15px; }
.map-placeholder small{ color:#b9bcb5; font-size:13px; }
.map-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-wide{ position:relative; aspect-ratio:21/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }

/* Galerías de producto */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery.cols-2{ grid-template-columns:repeat(2,1fr); }
.gallery.cols-4{ grid-template-columns:repeat(4,1fr); }
.gallery button{ padding:0; border:none; background:var(--gris-200); border-radius:12px; overflow:hidden; aspect-ratio:4/3; cursor:zoom-in; display:block; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery button:hover img{ transform:scale(1.05); }
.gallery .g-feature{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }

/* Líneas (Agrotileno) — acordeón/tabs */
.line-tabs .tab-list{ border-bottom:none; gap:10px; margin-bottom:36px; }
.line-tabs .tab-list button{ border:1.5px solid var(--gris-200); border-radius:100px; padding:10px 22px; font-size:15px; color:var(--gris-700); background:#fff; }
.line-tabs .tab-list button[aria-selected="true"]{ background:var(--negro); border-color:var(--negro); color:#fff; }
.line-tabs .tab-list button[aria-selected="true"]::after{ display:none; }

/* Ficha técnica (almacenamiento de líquidos) */
.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.spec-card{ background:#fff; border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm); }
.spec-card h3{ font-size:19px; margin-bottom:14px; }
.spec-card .check-list li{ font-size:15px; }
.product-model{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.model-code{ font-family:var(--font-head); font-weight:900; font-size:clamp(46px,5vw,72px); line-height:.9; color:var(--amarillo); -webkit-text-stroke:1.5px var(--negro); letter-spacing:1px; }

/* Aplicaciones (geomembranas) */
.app-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.app-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.app-card img{ aspect-ratio:16/10; object-fit:cover; width:100%; }
.app-card .app-body{ padding:24px 26px 28px; }
.app-card h3{ font-size:21px; margin-bottom:10px; }
.app-card p{ font-size:15px; margin-bottom:.8em; }
.app-card p:last-child{ margin-bottom:0; }

/* Datos impositivos */
.company-tabs .tab-list{ border-bottom:1px solid var(--gris-200); }
.company-head{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.company-head img{ height:62px; width:auto; }
.company-head h2{ margin:0; font-size:32px; }
.acc{ border:1px solid var(--gris-200); border-radius:12px; background:#fff; margin-bottom:12px; overflow:hidden; }
.acc > summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:18px; min-height:56px; }
.acc > summary::-webkit-details-marker{ display:none; }
.acc > summary::after{ content:""; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; margin-top:-4px; flex-shrink:0; }
.acc[open] > summary::after{ transform:rotate(-135deg); margin-top:4px; }
.acc[open] > summary{ border-bottom:1px solid var(--gris-200); background:var(--gris-100); }
.acc-body{ padding:22px; }
.acc-group + .acc-group{ margin-top:26px; }
.acc-group > h3{ font-size:15px; letter-spacing:1.5px; color:var(--azul-texto); margin-bottom:14px; text-transform:uppercase; }
.doc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.doc-item{ border:1px solid var(--gris-200); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px; background:#fff; }
.doc-item h4{ font-family:var(--font-body); text-transform:none; letter-spacing:0; font-weight:700; font-size:14px; line-height:1.35; margin:0; color:var(--negro); }
.doc-thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.doc-thumbs button{ padding:0; border:1px solid var(--gris-200); border-radius:6px; overflow:hidden; background:var(--gris-100); width:72px; height:92px; cursor:zoom-in; }
.doc-thumbs img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.doc-pdf{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px; color:var(--azul-texto); padding:10px 14px; border:1.5px solid var(--gris-200); border-radius:10px; min-height:44px; }
.doc-pdf:hover{ border-color:var(--azul-texto); }
.doc-pdf .pdf-badge{ font-family:var(--font-head); font-size:12px; letter-spacing:1px; background:#b3261e; color:#fff; border-radius:4px; padding:3px 6px; }

/* CTA strip */
.cta-strip{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--amarillo); border-radius:24px; padding:48px 52px; position:relative; overflow:hidden; }
.cta-strip h2{ margin:0 0 8px; font-size:clamp(26px,3.2vw,38px); max-width:24ch; text-transform:none; letter-spacing:0; line-height:1.15; }
.cta-strip p{ margin:0; color:var(--negro); max-width:60ch; }
.cta-strip .btn--dark:hover{ background:var(--negro); color:var(--amarillo); }
.cta-strip .ring-deco{ width:300px; aspect-ratio:1; right:-80px; bottom:-120px; background:#fff; opacity:.28; }
.cta-strip > *:not(.ring-deco){ position:relative; }

/* ===== Contacto ===== */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; }
.contact-info-card{ background:var(--negro); color:#fff; border-radius:var(--radius); padding:40px 34px; position:relative; overflow:hidden; }
.contact-info-card .ring-deco{ width:240px; aspect-ratio:1; right:-90px; bottom:-90px; opacity:.18; }
.contact-info-card h3{ font-size:15px; letter-spacing:1.5px; color:var(--amarillo); margin:26px 0 8px; text-transform:uppercase; }
.contact-info-card h3:first-of-type{ margin-top:0; }
.contact-info-card p, .contact-info-card a{ color:#e0e3dc; font-size:16px; margin-bottom:0; }
.contact-info-card a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.3); }
.contact-info-card a:hover{ color:var(--amarillo); }
.contact-form{ background:#fff; border:1px solid var(--gris-200); border-radius:var(--radius); padding:40px; }
.form-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; min-width:0; }
.form-field input, .form-field select, .form-field textarea{ width:100%; min-width:0; }
.form-field.full{ grid-column:1 / -1; }
.form-field label, .form-legend{ font-size:13.5px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-700); }
.form-field input, .form-field textarea, .form-field select{ border:1.5px solid var(--gris-200); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:16px; background:var(--gris-100); transition:border-color .2s ease, background .2s ease; min-height:48px; color:var(--negro); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--azul-texto); background:#fff; }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-section-title{ grid-column:1 / -1; font-size:18px; margin:18px 0 16px; padding-top:18px; border-top:1px solid var(--gris-200); display:flex; align-items:center; gap:10px; }
.form-section-title:first-child{ border-top:none; padding-top:0; margin-top:0; }
.radio-table{ width:100%; border-collapse:collapse; margin-bottom:20px; grid-column:1 / -1; }
.radio-table th, .radio-table td{ padding:10px 8px; text-align:center; border-bottom:1px solid var(--gris-200); font-size:14.5px; }
.radio-table th:first-child, .radio-table td:first-child{ text-align:left; font-weight:500; }
.radio-table thead th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--gris-500); font-weight:500; }
.radio-table input{ width:20px; height:20px; accent-color:var(--negro); }
.check-field{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--gris-700); grid-column:1 / -1; margin-bottom:20px; }
.check-field input{ width:20px; height:20px; margin-top:2px; accent-color:var(--negro); flex-shrink:0; }
.form-note{ font-size:14px; color:var(--gris-500); margin-top:12px; }
.form-success{ display:none; background:var(--amarillo-suave); border-radius:12px; padding:20px 24px; color:var(--negro); font-weight:500; margin-top:18px; }
.form-success.is-visible{ display:block; }
.form-error{ display:none; background:#fdecea; border-radius:12px; padding:20px 24px; color:#7a1c12; font-weight:500; margin-top:18px; }
.form-error.is-visible{ display:block; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form{ position:relative; }
.contact-form button[disabled]{ opacity:.6; cursor:wait; }

/* ===== Footer ===== */
.site-footer{ background:var(--negro); color:#c9ccc6; padding-top:72px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-grid img.footer-logo{ height:50px; width:auto; margin-bottom:18px; }
.footer-grid p{ color:#a9ada7; font-size:15px; }
.footer-col .footer-title{ color:#fff; font-size:15px; letter-spacing:1px; margin-bottom:18px; text-transform:uppercase; line-height:1.3; }
.footer-col ul li{ margin-bottom:10px; font-size:15px; }
.footer-col a{ color:#c9ccc6; font-size:15px; }
.footer-col a:hover{ color:var(--amarillo); }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{ width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
.social-row a:hover{ background:var(--amarillo); border-color:var(--amarillo); color:var(--negro); }
.social-row svg{ width:17px; height:17px; fill:currentColor; }
.footer-legal{ padding:28px 0 32px; font-size:12px; line-height:1.8; color:#8f948e; }
.footer-legal p{ font-size:12px; color:#8f948e; margin:0 0 .8em; line-height:1.8; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-top:1px solid rgba(255,255,255,.08); font-size:13px; color:#8f948e; flex-wrap:wrap; gap:10px; }
.footer-bottom a:hover{ color:#fff; }

/* ===== Lightboxes ===== */
.lightbox{ position:fixed; inset:0; background:rgba(12,13,11,.93); z-index:2000; display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox.is-open{ display:flex; }
.lightbox-inner{ width:min(960px,100%); aspect-ratio:16/9; position:relative; }
.lightbox-inner iframe{ width:100%; height:100%; border-radius:10px; border:none; }
.lightbox-close{ position:absolute; top:-50px; right:0; background:none; border:none; color:#fff; font-size:34px; line-height:1; width:44px; height:44px; }
.lightbox--img img{ max-width:90vw; max-height:85vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }
.lightbox--img .lightbox-close{ top:18px; right:24px; z-index:1; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.14); border:none; color:#fff; width:52px; height:52px; border-radius:50%; font-size:30px; line-height:1; transition:background .2s ease; display:flex; align-items:center; justify-content:center; }
.lightbox-nav:hover{ background:rgba(255,255,255,.28); }
.lightbox-prev{ left:18px; } .lightbox-next{ right:18px; }
.lightbox-nav.is-hidden{ display:none; }
.lightbox-caption{ position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#e0e3dc; font-size:14px; padding:0 70px; }

/* ===== Loader ===== */
#page-loader{ position:fixed; inset:0; z-index:3000; background:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; transition:opacity .5s ease, visibility .5s ease; }
#page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#page-loader .loader-ring{ width:64px; height:64px; background:var(--amarillo); border-radius:50%;
  -webkit-mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%); mask:radial-gradient(circle at 50% 62%, transparent 0 27%, #000 28%);
  animation:loaderPulse 1.1s ease-in-out infinite; }
@keyframes loaderPulse{ 0%,100%{ transform:scale(.86); opacity:.7; } 50%{ transform:scale(1); opacity:1; } }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); transition-delay:var(--d,0s); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.no-js .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  #page-loader{ display:none; }
  .hero .ring-deco{ transition:none; transform:none; }
  .hero-slide{ transition:none; }
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .main-nav{ position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:#fff; flex-direction:column; align-items:stretch; padding:16px 20px 40px; overflow:auto; transform:translateX(100%); transition:transform .3s ease; visibility:hidden; }
  .main-nav.is-open{ transform:translateX(0); visibility:visible; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .main-nav a.nav-link{ justify-content:space-between; padding:14px 12px; font-size:17px; border-bottom:1px solid var(--gris-100); border-radius:0; }
  .dropdown, .dropdown--wide{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; padding:4px 0 10px 12px; min-width:0; grid-template-columns:1fr; }
  li.is-open > .dropdown{ display:block; }
  .nav-lang{ align-self:flex-start; margin:16px 0 0; }
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; width:48px; height:48px; padding:11px; }
  .nav-toggle span{ width:26px; height:2px; background:var(--negro); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .facts-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:980px){
  .intro-grid, .content-block, .contact-grid, .vm-grid{ grid-template-columns:1fr; gap:40px; }
  .content-block.reverse > :first-child{ order:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .novedades-grid, .app-grid, .spec-grid, .value-grid.three{ grid-template-columns:repeat(2,1fr); }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .plant-list{ grid-template-columns:1fr; }
  .gallery.cols-4{ grid-template-columns:repeat(3,1fr); }
  .map-wide{ aspect-ratio:4/3; }
}
@media (max-width:640px){
  :root{ --header-h:72px; }
  .site-header .logo img{ height:40px; }
  .section{ padding:64px 0; }
  .section--tight{ padding:48px 0; }
  .container{ padding:0 16px; }
  .hero{ min-height:560px; }
  .hero .ring-deco{ width:90vw; right:-40vw; bottom:-12%; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .product-grid, .novedades-grid, .novedades-grid.is-2, .app-grid, .spec-grid, .value-grid, .value-grid.three, .footer-grid{ grid-template-columns:1fr; }
  .gallery, .gallery.cols-4{ grid-template-columns:repeat(2,1fr); }
  .gallery .g-feature{ grid-column:span 2; grid-row:auto; aspect-ratio:4/3; }
  .form-grid{ grid-template-columns:minmax(0,1fr); }
  .contact-form{ padding:24px 20px; }
  .page-hero{ padding:140px 0 52px; }
  .page-hero .ring-deco{ width:240px; right:-110px; bottom:-150px; }
  .cta-strip{ padding:36px 26px; }
  .vm-card{ padding:36px 28px; min-height:0; }
  .plant-stats{ gap:20px; }
  .radio-table th, .radio-table td{ padding:8px 4px; font-size:13.5px; }
  .novedad-content p{ font-size:16.5px; }
  .lightbox-nav{ width:44px; height:44px; font-size:24px; }
  .lightbox-prev{ left:6px; } .lightbox-next{ right:6px; }
}