/* ============================================================
   SOYAr — Hoja de estilos principal
   Paleta derivada del logotipo: verde brote, verde oliva, oro aceite
   Tipografías autoalojadas en /assets/fonts (sin dependencia de Google Fonts)
   ============================================================ */

/* --- Archivo Variable · display · wght 100–900 · wdth 62–125 --- */
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Instrument Sans Variable · texto · wght 400–700 --- */
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-display:swap;
  font-weight:400 700; font-stretch:75% 100%;
  src:url(../fonts/instrument-sans-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-display:swap;
  font-weight:400 700; font-stretch:75% 100%;
  src:url(../fonts/instrument-sans-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- IBM Plex Mono · datos y etiquetas --- */
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:400;
  src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:500;
  src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Color */
  --verde:      #078E28;
  --verde-osc:  #056B1E;
  --oliva:      #6A9330;
  --oro:        #DECB00;
  --oro-osc:    #B9A800;
  --bosque:     #0C2113;
  --bosque-2:   #143020;
  --bosque-3:   #1D4029;
  --hueso:      #EDF0E8;
  --hueso-2:    #E2E7DA;
  --papel:      #FFFFFF;
  --tinta:      #101A0C;
  --gris:       #5C665A;
  --gris-cl:    #97A093;
  --linea:      rgba(16,26,12,.14);
  --linea-osc:  rgba(237,240,232,.16);

  /* Tipografía */
  --display: "Archivo", "Arial Narrow", sans-serif;
  --texto:   "Instrument Sans", system-ui, -apple-system, sans-serif;
  --dato:    "IBM Plex Mono", ui-monospace, monospace;

  /* Métrica */
  --ancho: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --nav-h: 78px;
  --r: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--hueso);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--oro); color:var(--tinta); }

:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:2px; }

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:118%;
  line-height:1.03;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem,6.2vw,4.6rem); text-transform:uppercase; }
h2{ font-size:clamp(1.9rem,3.6vw,3rem); text-transform:uppercase; }
h3{ font-size:clamp(1.15rem,1.5vw,1.45rem); font-stretch:112%; letter-spacing:0; }
h4{ font-size:1rem; font-stretch:106%; letter-spacing:.01em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; }

/* Etiqueta de dato — vocabulario de ficha técnica */
.eyebrow{
  font-family:var(--dato);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--oliva);
  display:flex;
  align-items:center;
  gap:.65rem;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--oro);
  flex:none;
}
.on-dark .eyebrow{ color:var(--oro); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,8vw,116px); }
.section--tight{ padding-block:clamp(48px,5vw,72px); }
.on-dark{ background:var(--bosque); color:var(--hueso); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:var(--papel); }
.lead{ font-size:clamp(1.05rem,1.2vw,1.22rem); line-height:1.55; color:var(--gris); }
.on-dark .lead{ color:var(--gris-cl); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--dato); font-size:.78rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.95rem 1.5rem;
  border:1.5px solid transparent; border-radius:var(--r);
  text-decoration:none; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--oro{ background:var(--oro); color:var(--tinta); border-color:var(--oro); }
.btn--oro:hover{ background:var(--oro-osc); border-color:var(--oro-osc); }
.btn--verde{ background:var(--verde); color:#fff; border-color:var(--verde); }
.btn--verde:hover{ background:var(--verde-osc); border-color:var(--verde-osc); }
.btn--linea{ background:transparent; color:var(--tinta); border-color:var(--linea); }
.btn--linea:hover{ border-color:var(--tinta); }
.on-dark .btn--linea,.hero .btn--linea,.phero .btn--linea{ color:var(--hueso); border-color:rgba(237,240,232,.34); }
.on-dark .btn--linea:hover,.hero .btn--linea:hover,.phero .btn--linea:hover{ border-color:var(--hueso); background:rgba(237,240,232,.08); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background .3s, box-shadow .3s, height .3s;
}
.nav__in{
  width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__logo{ position:relative; display:flex; align-items:center; margin-right:auto; }
.nav__logo img{ height:56px; width:auto; transition:height .3s, opacity .3s; }
.nav__logo--clr{ position:absolute; left:0; top:50%; translate:0 -50%; opacity:0; }
.nav.is-top .nav__logo--clr{ opacity:1; }
.nav.is-top .nav__logo--osc{ opacity:0; }

.nav__links{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-family:var(--dato); font-size:.74rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding:.6rem .7rem; border-radius:var(--r);
  color:var(--tinta); position:relative; white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav.is-top .nav__links a{ color:rgba(255,255,255,.9); }
.nav__links a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.35rem;
  height:2px; background:var(--oro); transform:scaleX(0); transform-origin:left;
  transition:transform .25s;
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__cta{ padding:.7rem 1.05rem !important; }

.nav.is-stuck{
  background:rgba(237,240,232,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--linea);
  height:66px;
}
.nav.is-stuck .nav__logo img{ height:46px; }

/* dropdown productos */
.nav__drop{ position:relative; }
.nav__drop > button{
  font:inherit; background:none; border:0; cursor:pointer;
  font-family:var(--dato); font-size:.74rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta);
  padding:.6rem .7rem; display:inline-flex; align-items:center; gap:.4rem;
}
.nav.is-top .nav__drop > button{ color:rgba(255,255,255,.9); }
.nav__drop > button svg{ width:9px; transition:transform .2s; }
.nav__drop > button[data-activo]::after{
  content:""; position:absolute; left:.7rem; right:1.7rem; bottom:.35rem;
  height:2px; background:var(--oro);
}
.nav__drop > button{ position:relative; }
.nav__drop.is-open > button svg{ transform:rotate(180deg); }
.nav__menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:250px;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:0 18px 40px rgba(12,33,19,.16);
  list-style:none; margin:0; padding:.4rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.nav__drop.is-open .nav__menu{ opacity:1; visibility:visible; transform:none; }
.nav__menu a{ color:var(--tinta) !important; display:block; padding:.7rem .8rem; }
.nav__menu a::after{ display:none; }
.nav__menu a:hover{ background:var(--hueso); }

/* burger */
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--linea);
  background:transparent; border-radius:var(--r); cursor:pointer;
  padding:0; flex-direction:column; align-items:center; justify-content:center;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--tinta); transition:.25s; }
.burger span + span{ margin-top:4px; }
.nav.is-top .burger{ border-color:rgba(255,255,255,.4); }
.nav.is-top .burger span{ background:#fff; }
.burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   HERO — firma: rotador "SOY ___"
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  background:var(--bosque);
  overflow:hidden;
  padding-bottom:clamp(48px,7vw,90px);
  padding-top:var(--nav-h);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img,.hero__media iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:100%; object-fit:cover; border:0; pointer-events:none;
}
.hero__media iframe{
  width:100vw; height:56.25vw; min-height:100svh; min-width:177.77svh;
  opacity:0; transition:opacity 1.2s ease .3s;
}
.hero__media iframe.is-ready{ opacity:1; }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,33,19,.72) 0%, rgba(12,33,19,.30) 34%, rgba(12,33,19,.86) 100%),
    linear-gradient(90deg, rgba(12,33,19,.62) 0%, rgba(12,33,19,0) 62%);
}
.hero__in{ position:relative; z-index:2; width:100%; }

.hero__claim{
  font-family:var(--display); font-weight:900; font-stretch:125%;
  text-transform:uppercase; color:#fff;
  font-size:clamp(2.6rem,8.4vw,6.6rem);
  line-height:.92; letter-spacing:-.03em;
  margin:0 0 1.4rem; display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:.28em;
}
.hero__soy{ position:relative; }
.hero__rot{
  color:var(--oro);
  display:inline-block;
  min-height:1em;
}
.hero__rot span{ display:inline-block; animation:subeRot .5s cubic-bezier(.2,.8,.2,1); }
@keyframes subeRot{
  from{ opacity:0; transform:translateY(.45em); filter:blur(4px); }
  to{ opacity:1; transform:none; filter:none; }
}
.hero__sub{
  max-width:56ch; color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.55; margin-bottom:1.9rem;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* tira de datos */
.datos{
  border-top:1px solid var(--linea-osc);
  background:var(--bosque-2);
}
.datos__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.datos__i{
  padding:1.9rem 1.6rem 1.7rem;
  border-left:1px solid var(--linea-osc);
}
.datos__i:first-child{ border-left:0; padding-left:0; }
.datos__i:last-child{ padding-right:0; }
.datos__n{
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(1.7rem,2.6vw,2.4rem); color:var(--oro);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.datos__l{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris-cl); margin-top:.6rem;
}

/* ============================================================
   NOSOTROS
   ============================================================ */
.dosc{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(32px,5vw,72px); align-items:stretch; }
.dosc__fig{ position:relative; min-height:100%; }
.dosc__fig img{ width:100%; height:100%; min-height:360px; border-radius:var(--r); object-fit:cover; }
.dosc__fig::after{
  content:""; position:absolute; inset:auto -14px -14px auto;
  width:52%; height:34%; border:1.5px solid var(--oro); border-radius:var(--r); z-index:-1;
}
.dosc__title{ font-size:clamp(1.8rem,2.4vw,2.5rem); max-width:14ch; margin-bottom:.85rem; }
.dosc .lead{ margin-bottom:1.15rem; }

/* --- Nosotros: encabezado a lo ancho + dos columnas --- */
.nos{ margin-bottom:clamp(28px,3.5vw,48px); }
.nos__title{ font-size:clamp(1.9rem,3.6vw,3rem); text-transform:uppercase; max-width:none; margin:0; text-wrap:normal; }
.d-br{ display:none; }
@media (min-width:861px){ .d-br{ display:inline; } }
.nos__cols{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
.nos__fig{ margin:0; position:relative; }
.nos__fig img{ width:100%; height:auto; border-radius:var(--r); display:block; }
.nos__fig::after{
  content:""; position:absolute; inset:auto -14px -14px auto;
  width:52%; height:34%; border:1.5px solid var(--oro); border-radius:var(--r); z-index:-1;
}
.nos__cols .lead{ margin-bottom:1.15rem; }

.hace{ list-style:none; margin:1.7rem 0 0; padding:0; border-top:1px solid var(--linea); }

/* Checklist de nosotros: banda a lo ancho */
.nos__list{
  list-style:none; margin:clamp(30px,4vw,52px) 0 0; padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--linea);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem 2.4rem;
}
.nos__list li{ display:flex; gap:.8rem; align-items:baseline; font-size:.96rem; line-height:1.4; }
.nos__list li::before{
  content:""; width:8px; height:8px; flex:none; border-radius:50% 50% 50% 0;
  background:var(--verde); transform:rotate(-45deg);
}
.hace li{
  display:flex; gap:1rem; align-items:baseline;
  padding:.72rem 0; border-bottom:1px solid var(--linea);
  font-size:.95rem;
}
.hace li::before{
  content:""; width:7px; height:7px; flex:none; border-radius:50% 50% 50% 0;
  background:var(--verde); transform:rotate(-45deg);
}

/* ============================================================
   CADENA INTEGRADA — firma secundaria
   ============================================================ */
.cadena__head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:end; margin-bottom:2.8rem; }
.cadena__head > div{ min-width:0; }
.cadena__head p{ max-width:46ch; }
.cadena__head h2{ margin-bottom:0; }
.cadena{ position:relative; }
.cadena__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(196px,1fr);
  gap:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  border-top:1px solid var(--linea-osc);
  scrollbar-width:thin; scrollbar-color:var(--bosque-3) transparent;
}
.cadena__track::-webkit-scrollbar{ height:3px; }
.cadena__track::-webkit-scrollbar-thumb{ background:var(--bosque-3); }
.cadena__hint{
  font-family:var(--dato); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gris-cl); margin:1.1rem 0 0; display:flex; align-items:center; gap:.5rem;
}
.cadena__hint svg{ width:16px; color:var(--oro); animation:desliza 1.8s ease-in-out infinite; }
@keyframes desliza{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
.paso{
  scroll-snap-align:start;
  padding:1.9rem 1.5rem 2.1rem 0;
  border-left:1px solid var(--linea-osc);
  padding-left:1.5rem;
  position:relative;
}
.paso:first-child{ border-left:0; padding-left:0; }
.paso__n{
  font-family:var(--dato); font-size:.7rem; font-weight:500; letter-spacing:.14em;
  color:var(--oro); display:block; margin-bottom:1.9rem;
}
.paso__t{
  font-family:var(--display); font-weight:800; font-stretch:104%; text-transform:uppercase;
  font-size:.98rem; letter-spacing:-.005em; color:#fff; margin:0 0 .5rem;
  overflow-wrap:anywhere; hyphens:auto;
}
.paso__d{ font-size:.86rem; color:var(--gris-cl); line-height:1.5; margin:0; }
.paso::before{
  content:""; position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--oro);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.paso.is-in::before{ width:100%; }

/* ============================================================
   PRODUCTOS
   ============================================================ */
.prods{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,26px); }
.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.pcard:hover{ transform:translateY(-4px); border-color:var(--oliva); box-shadow:0 22px 46px rgba(12,33,19,.13); }
.pcard__fig{ overflow:hidden; aspect-ratio:16/10; background:var(--hueso-2); }
.pcard__fig img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pcard__fig img{ transform:scale(1.05); }
.pcard__body{ padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; flex:1; }
.pcard__t{
  font-family:var(--display); font-weight:800; font-stretch:115%; text-transform:uppercase;
  font-size:clamp(1.1rem,1.5vw,1.4rem); margin:0 0 .7rem; letter-spacing:-.01em;
}
.pcard__d{ font-size:.92rem; color:var(--gris); margin:0 0 1.4rem; }
.pcard__go{
  margin-top:auto; font-family:var(--dato); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--verde);
  display:inline-flex; align-items:center; gap:.5rem;
}
.pcard__go svg{ width:14px; transition:transform .25s; }
.pcard:hover .pcard__go svg{ transform:translateX(4px); }

/* Tarjeta destacada a lo ancho */
.pcard--wide{ display:grid; grid-template-columns:1.05fr 1fr; }
.pcard--wide .pcard__fig{ aspect-ratio:auto; height:100%; min-height:260px; }
.pcard--wide .pcard__body{ justify-content:center; padding:clamp(24px,3vw,44px); }
@media (max-width:720px){
  .pcard--wide{ grid-template-columns:1fr; }
  .pcard--wide .pcard__fig{ min-height:0; aspect-ratio:16/10; }
}

/* ============================================================
   CLIENTES
   ============================================================ */
.marq{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marq__row{ display:flex; gap:clamp(38px,5vw,72px); width:max-content; animation:marq 34s linear infinite; }
.marq:hover .marq__row{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.clientes{ background:var(--hueso-2); border-block:1px solid var(--linea); }
.marq img{
  height:54px; width:auto; object-fit:contain; flex:none;
  filter:grayscale(1) opacity(.62); transition:filter .3s;
}
.marq img:hover{ filter:none; }

/* ============================================================
   CONTACTO
   ============================================================ */
.cont{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,4vw,64px); }
.datosc{ list-style:none; margin:0 0 2rem; padding:0; }
.datosc > div{ padding:1rem 0; border-bottom:1px solid var(--linea-osc); }
.datosc dt{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.35rem;
}
.datosc dd{ margin:0; font-size:1rem; }
.datosc a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.datosc a:hover{ border-color:var(--oro); }

.form{ background:var(--bosque-2); border:1px solid var(--linea-osc); border-radius:var(--r); padding:clamp(22px,2.6vw,36px); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field--full{ grid-column:1/-1; }
.field label{
  font-family:var(--dato); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gris-cl);
}
.field input,.field textarea,.field select{
  font:inherit; font-size:.95rem; color:var(--hueso);
  background:rgba(237,240,232,.05); border:1px solid var(--linea-osc);
  border-radius:var(--r); padding:.8rem .9rem; width:100%;
  transition:border-color .2s, background .2s;
}
.field select option{ background:var(--bosque-2); color:var(--hueso); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--oro); background:rgba(237,240,232,.08);
}
.field textarea{ resize:vertical; min-height:112px; }
.form__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }
.form__nota{ font-size:.78rem; color:var(--gris-cl); margin:1rem 0 0; }

.mapa{ border:0; width:100%; height:clamp(300px,38vw,440px); filter:grayscale(.35) contrast(1.05); display:block; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--tinta); color:var(--gris-cl); padding-block:clamp(48px,5vw,72px) 0; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem; }
.foot__logo img{ height:60px; width:auto; margin-bottom:1.1rem; }
.foot h4{ color:var(--hueso); font-family:var(--dato); font-weight:500; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:.55rem; }
.foot a{ text-decoration:none; font-size:.92rem; transition:color .2s; }
.foot a:hover{ color:var(--oro); }
.foot__bar a{ font-size:inherit; color:inherit; }
.foot__bar{
  margin-top:clamp(38px,4vw,56px); padding-block:1.4rem;
  border-top:1px solid rgba(237,240,232,.1);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--dato); font-size:.68rem; letter-spacing:.06em; color:#5C6659;
}

/* WhatsApp flotante */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:transform .2s;
}
.wa:hover{ transform:scale(1.07); }
.wa svg{ width:29px; height:29px; fill:currentColor; }

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */
.phero{
  position:relative; padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px));
  padding-bottom:clamp(48px,7vw,96px);
  background:var(--bosque); color:var(--hueso); overflow:hidden;
}
.phero__bg{ position:absolute; inset:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; }
.phero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(12,33,19,.94) 12%, rgba(12,33,19,.55) 68%, rgba(12,33,19,.82) 100%);
}
.phero__in{ position:relative; z-index:2; max-width:70ch; }
.phero h1{ color:#fff; font-size:clamp(2.1rem,5vw,3.9rem); margin-bottom:1rem; }
.phero .lead{ color:rgba(255,255,255,.82); }
.migas{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris-cl); margin-bottom:1.4rem;
}
.migas a{ text-decoration:none; color:var(--oro); }

.prosa{ max-width:74ch; }
.prosa h2{ font-size:clamp(1.4rem,2.2vw,1.95rem); margin-top:2.2rem; }
.prosa h3{ margin-top:1.8rem; }
.prosa > :first-child{ margin-top:0; }

.vent{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; }
.vent li{ background:var(--papel); padding:1.05rem 1.2rem; display:flex; gap:.95rem; align-items:flex-start; font-size:.94rem; }
.vent b{ display:block; font-family:var(--display); font-stretch:110%; font-weight:800; text-transform:uppercase; font-size:.85rem; letter-spacing:.01em; margin-bottom:.2rem; }
.vent li::before{
  content:""; width:8px; height:8px; flex:none; margin-top:.42rem;
  border-radius:50% 50% 50% 0; background:var(--verde); transform:rotate(-45deg);
}

.tabla{ width:100%; border-collapse:collapse; margin-top:1.2rem; font-size:.92rem; }
.tabla caption{
  text-align:left; font-family:var(--dato); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--oliva); padding-bottom:.8rem;
}
.tabla th,.tabla td{ text-align:left; padding:.82rem 1rem; border-bottom:1px solid var(--linea); }
.tabla th{ font-family:var(--dato); font-weight:500; font-size:.75rem; letter-spacing:.06em; color:var(--gris); width:46%; }
.tabla td{ font-variant-numeric:tabular-nums; font-weight:600; }
.tabla tr:hover td, .tabla tr:hover th{ background:rgba(222,203,0,.09); }

/* Variantes sobre fondo oscuro */
.on-dark .prosa p{ color:var(--gris-cl); }
.on-dark .prosa strong{ color:var(--hueso); }
.on-dark .vent{ background:var(--linea-osc); border-color:var(--linea-osc); }
.on-dark .vent li{ background:var(--bosque-2); color:var(--gris-cl); }
.on-dark .vent b{ color:#fff; }
.on-dark .vent li::before{ background:var(--oro); }
.on-dark .tabla caption{ color:var(--oro); }
.on-dark .tabla th{ color:var(--gris-cl); border-color:var(--linea-osc); }
.on-dark .tabla td{ color:var(--hueso); border-color:var(--linea-osc); }
.on-dark .tabla tr:hover th,.on-dark .tabla tr:hover td{ background:rgba(222,203,0,.07); }

.pres{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; padding:0; list-style:none; }
.pres li{
  font-family:var(--dato); font-size:.76rem; letter-spacing:.08em;
  border:1px solid var(--linea); border-radius:100px; padding:.42rem .95rem;
  background:var(--papel);
}
.on-dark .pres li{ background:transparent; border-color:var(--linea-osc); color:var(--hueso); }

/* ---------- Descargas: fichas técnicas y hojas de seguridad ---------- */
.docs{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; gap:1px;
  background:var(--linea); border:1px solid var(--linea);
  border-radius:var(--r); overflow:hidden;
}
.docs li{
  background:var(--papel); padding:.95rem 1.2rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; align-items:center;
}
.docs b{
  font-family:var(--display); font-stretch:110%; font-weight:800;
  text-transform:uppercase; font-size:.85rem; letter-spacing:.01em;
  margin-right:auto;
}
.doc__a{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--dato); font-size:.7rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--linea); border-radius:100px; padding:.45rem .95rem;
  color:var(--tinta); text-decoration:none; white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s;
}
.doc__a::before{ content:"↓"; color:var(--verde); font-weight:700; }
.doc__a:hover{ border-color:var(--verde); color:var(--verde); }
.on-dark .docs{ background:var(--linea-osc); border-color:var(--linea-osc); }
.on-dark .docs li{ background:var(--bosque-2); }
.on-dark .docs b{ color:var(--hueso); }
.on-dark .doc__a{ color:var(--hueso); border-color:rgba(237,240,232,.34); }
.on-dark .doc__a::before{ color:var(--oro); }
.on-dark .doc__a:hover{ border-color:var(--oro); color:var(--oro); }

/* Descargas dentro de cards del catálogo */
.item__docs{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.item__docs .doc__a{ font-size:.64rem; padding:.38rem .8rem; }

.apl{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:1.6rem; }
.apl figure{ margin:0; border-radius:var(--r); overflow:hidden; position:relative; }
.apl img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.apl figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.2rem .95rem .8rem;
  background:linear-gradient(transparent,rgba(12,33,19,.9));
  color:#fff; font-family:var(--dato); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
}

.cta{ background:var(--bosque-2); text-align:center; }
.cta h2{ margin-bottom:.7rem; }
.cta p{ max-width:52ch; margin-inline:auto; }
.cta__acts{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.8rem; }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.4rem; }
.chip{
  font-family:var(--dato); font-size:.73rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem 1.05rem; border:1px solid var(--linea); border-radius:100px;
  background:var(--papel); color:var(--gris); cursor:pointer;
  transition:.2s;
}
.chip:hover{ border-color:var(--oliva); color:var(--tinta); }
.chip[aria-pressed="true"]{ background:var(--tinta); border-color:var(--tinta); color:var(--oro); }

.cat{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
.item{
  display:flex; flex-direction:column;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; transition:border-color .25s, box-shadow .25s, transform .25s;
}
.item:hover{ border-color:var(--oliva); box-shadow:0 18px 40px rgba(12,33,19,.12); transform:translateY(-3px); }
.item[hidden]{ display:none; }
.item__fig{
  aspect-ratio:1/1; padding:1.7rem; overflow:hidden;
  background:radial-gradient(circle at 50% 62%, var(--hueso-2), var(--papel) 72%);
  border-bottom:1px solid var(--linea);
}
.item__fig img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.item__body{ padding:1.3rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.item__cat{
  font-family:var(--dato); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oliva); margin-bottom:.5rem;
}
.item__t{
  font-family:var(--display); font-weight:800; font-stretch:112%; text-transform:uppercase;
  font-size:.98rem; line-height:1.15; letter-spacing:-.005em; margin:0 0 .6rem;
}
.item__d{ font-size:.85rem; color:var(--gris); line-height:1.5; margin:0 0 1.1rem; }
.item__pres{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--linea); }
.item__pres .pres{ margin-top:.55rem; }
.item__pres > span{
  font-family:var(--dato); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gris-cl);
}
.vacio{ grid-column:1/-1; text-align:center; padding:3rem 0; color:var(--gris); }

/* ============================================================
   Revelado en scroll
   ============================================================ */
.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rv.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .datos__grid{ grid-template-columns:repeat(2,1fr); }
  .datos__i:nth-child(3){ border-left:0; }
  .datos__i:nth-child(n+3){ border-top:1px solid var(--linea-osc); }
  .cont{ grid-template-columns:1fr; }
  .cat{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:860px){
  .burger{ display:flex; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel); padding:.6rem var(--gut) 1.4rem;
    border-bottom:1px solid var(--linea);
    box-shadow:0 18px 40px rgba(12,33,19,.16);
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
    transform:translateY(-14px); opacity:0; visibility:hidden;
    transition:opacity .25s, transform .25s, visibility .25s;
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__links a, .nav.is-top .nav__links a, .nav.is-top .nav__drop > button{ color:var(--tinta); }
  .nav__links > li{ border-bottom:1px solid var(--linea); }
  .nav__links > li:last-child{ border:0; padding-top:1rem; }
  .nav__links a{ padding:.95rem .2rem; display:block; }
  .nav__links a::after{ display:none; }
  .nav__drop{ position:static; }
  .nav__drop > button{ width:100%; justify-content:space-between; padding:.95rem .2rem; }
  .nav__menu{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; background:transparent; padding:0 0 .6rem .9rem;
    display:none; min-width:0;
  }
  .nav__drop.is-open .nav__menu{ display:block; }
  .nav__menu a{ padding:.6rem .2rem; font-size:.72rem; color:var(--gris) !important; }
  .nav__cta{ width:100%; justify-content:center; }
  .nav.is-stuck{ height:var(--nav-h); }
  .nav.is-stuck .nav__logo img{ height:46px; }
  .nav.is-menu-open{ background:rgba(237,240,232,.98); backdrop-filter:blur(12px); }
  .nav.is-menu-open .nav__logo--clr{ opacity:0; }
  .nav.is-menu-open .nav__logo--osc{ opacity:1; }

  .dosc{ grid-template-columns:1fr; }
  .dosc__fig img{ min-height:0; aspect-ratio:4/3; }
  .nos{ max-width:none; }
  .nos__cols{ grid-template-columns:1fr; }
  .nos__list{ grid-template-columns:1fr 1fr; }
  .cadena__head{ grid-template-columns:1fr; align-items:start; }
  .dosc__fig::after{ display:none; }
  .prods{ grid-template-columns:1fr; }
  .apl{ grid-template-columns:1fr; }
  .cadena__track{ grid-auto-columns:74vw; }
}

@media (max-width:560px){
  :root{ --nav-h:70px; }
  .datos__grid{ grid-template-columns:1fr; }
  .datos__i{ border-left:0; border-top:1px solid var(--linea-osc); }
  .datos__i:first-child{ border-top:0; }
  .cat{ grid-template-columns:1fr; }
  .nos__list{ grid-template-columns:1fr; }
  .form__grid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .hero__claim{ font-size:clamp(2.2rem,11vw,3.4rem); }
  .btn{ width:100%; justify-content:center; }
  .hero__acts .btn, .cta__acts .btn, .form__acts .btn{ width:100%; }
  .marq img{ height:40px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}

/* ============================================================
   CAMBIOS v11 — hero texto, tarjetas de valor, eco, certificaciones,
   productos 5-up con rótulo de sector
   ============================================================ */

/* Hero: titular largo (reemplaza rotador) */
.hero__claim--lead{
  font-size:clamp(1.9rem,3.9vw,3.4rem);
  line-height:1.04; letter-spacing:-.01em; text-transform:uppercase;
  max-width:20ch; margin-bottom:1.3rem;
}

/* Tarjetas de valor (reemplazan la tira de datos) */
.feats{ background:var(--bosque-2); border-top:1px solid var(--linea-osc); }
.feats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.feat{ padding:2rem 1.7rem 2.1rem; border-left:1px solid var(--linea-osc); }
.feat:first-child{ border-left:0; padding-left:0; }
.feat:last-child{ padding-right:0; }
.feat__ic{ display:inline-flex; width:34px; height:34px; color:var(--oro); margin-bottom:1rem; }
.feat__ic svg{ width:100%; height:100%; }
.feat__t{ color:#fff; font-family:var(--display); font-weight:800; font-stretch:112%; text-transform:uppercase; font-size:1.02rem; letter-spacing:-.005em; margin:0 0 .55rem; }
.feat__d{ color:var(--gris-cl); font-size:.9rem; line-height:1.5; margin:0; }

/* Eco stats en Nosotros (70-100 / 20-40 / 100) */
.eco{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); margin-top:clamp(30px,4vw,52px); }
.eco__i{ border-top:2px solid var(--oro); padding-top:1.1rem; }
.eco__n{ font-family:var(--display); font-weight:800; font-stretch:118%; font-size:clamp(2rem,3vw,2.7rem); line-height:1; letter-spacing:-.02em; color:var(--verde); }
.eco__n span{ font-size:.55em; margin-left:.05em; }
.eco__d{ font-size:.9rem; color:var(--gris); line-height:1.5; margin:.7rem 0 0; }

/* Certificaciones — La confianza se demuestra */
.certs{ background:var(--hueso-2); border-block:1px solid var(--linea); }
.certs__head{ text-align:center; max-width:56ch; margin:0 auto 2.6rem; }
.certs__head .eyebrow{ justify-content:center; }
.certs__title{ font-family:var(--display); font-weight:800; font-stretch:112%; text-transform:none; font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.01em; margin:0 0 .6rem; }
.certs__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.cert{ background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:1.6rem 1rem 1.4rem; text-align:center; transition:border-color .25s, transform .25s; }
.cert:hover{ border-color:var(--oliva); transform:translateY(-3px); }
.cert__ic{ display:inline-flex; width:40px; height:40px; color:var(--verde); margin-bottom:.9rem; }
.cert__ic svg{ width:100%; height:100%; }
.cert__code{ font-family:var(--display); font-weight:800; font-stretch:110%; text-transform:uppercase; font-size:.95rem; letter-spacing:.01em; }
.cert__label{ font-family:var(--dato); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); margin-top:.4rem; line-height:1.35; }
.certs__nota{ text-align:center; font-family:var(--dato); font-size:.68rem; letter-spacing:.06em; color:var(--gris-cl); margin:1.8rem 0 0; }

/* Productos 5-up con rótulo de sector */
.prods--5{ grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.2vw,18px); }
.pcard--sm .pcard__fig{ aspect-ratio:4/3; }
.pcard--sm .pcard__body{ padding:clamp(14px,1.1vw,18px); }
.pcard__cat{ font-family:var(--dato); font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--oliva); margin:0 0 .5rem; }
.pcard--sm .pcard__t{ font-size:clamp(.98rem,1vw,1.12rem); margin-bottom:.5rem; }
.pcard--sm .pcard__d{ font-size:.82rem; line-height:1.5; margin-bottom:1rem; }
.pcard--sm .pcard__go{ font-size:.66rem; }

@media (max-width:1180px){
  .prods--5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px){
  .feats__grid{ grid-template-columns:repeat(2,1fr); }
  .feat{ padding:1.7rem 1.4rem; }
  .feat:nth-child(odd){ border-left:0; padding-left:0; }
  .feat:nth-child(even){ padding-right:0; }
  .feat:nth-child(n+3){ border-top:1px solid var(--linea-osc); padding-top:1.7rem; }
  .certs__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .prods--5{ grid-template-columns:repeat(2,1fr); }
  .eco{ grid-template-columns:1fr; }
  .certs__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .feats__grid{ grid-template-columns:1fr; }
  .feat{ border-left:0 !important; padding:1.4rem 0 !important; border-top:1px solid var(--linea-osc); }
  .feat:first-child{ border-top:0; }
  .prods--5{ grid-template-columns:1fr; }
  .certs__grid{ grid-template-columns:1fr 1fr; }
}