/* =========================================================
   New Vacuum — www.newvacuum.com.ar
   Look & feel V4 (ASDESIGN)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --blue:#00567C;
  --blue-700:#014766;
  --blue-900:#013549;
  --green:#80BB00;
  --green-700:#6EA300;
  --teal:#1EA886;

  --gray-50:#EFEFEF;
  --gray-100:#E6E6E6;
  --gray-200:#DCDCDC;
  --gray-300:#CFCFCF;
  --line:#D8D8D8;

  --ink:#3D3D3D;
  --ink-soft:#5A5A5A;
  --white:#fff;

  --font:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-cond:"Barlow Semi Condensed","Barlow","Segoe UI",system-ui,sans-serif;

  --wrap:1180px;
  --gap:28px;
  --radius:10px;
  --shadow:0 6px 22px rgba(0,0,0,.10);
  --shadow-lg:0 14px 40px rgba(0,0,0,.16);
  --header-h:92px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p{margin:0}

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

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 10px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--blue);color:#fff;padding:12px 20px;font-weight:600;
}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ---------- Iconos ----------
   Los dibujos viven como archivos sueltos en img/icons/ y se pintan con
   `mask` + background-color:currentColor (extraidos del PDF de diseno), para que sigan heredando el color
   del contexto (blanco en el hero, verde en Contacto, azul en el pie). */
.i{
  display:inline-block;flex:none;
  width:1.05em;height:1.05em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.i--whatsapp     {-webkit-mask-image:url("../img/icons/whatsapp.png?v=20260909av");     mask-image:url("../img/icons/whatsapp.png?v=20260909av")}
.i--facebook     {-webkit-mask-image:url("../img/icons/facebook.png?v=20260909av");     mask-image:url("../img/icons/facebook.png?v=20260909av")}
.i--instagram    {-webkit-mask-image:url("../img/icons/instagram.png?v=20260909av");    mask-image:url("../img/icons/instagram.png?v=20260909av")}
.i--mail         {-webkit-mask-image:url("../img/icons/mail.png?v=20260909av");         mask-image:url("../img/icons/mail.png?v=20260909av")}
.i--pin          {-webkit-mask-image:url("../img/icons/pin.png?v=20260909av");          mask-image:url("../img/icons/pin.png?v=20260909av")}
.i--check-circle {-webkit-mask-image:url("../img/icons/check-circle.png?v=20260909av"); mask-image:url("../img/icons/check-circle.png?v=20260909av")}
.i--chevron-right{-webkit-mask-image:url("../img/icons/chevron-right.png?v=20260909av");mask-image:url("../img/icons/chevron-right.png?v=20260909av")}
.i--arrow-up     {-webkit-mask-image:url("../img/icons/arrow-up.svg?v=20260909av");     mask-image:url("../img/icons/arrow-up.svg?v=20260909av")}
.i--clock        {-webkit-mask-image:url("../img/icons/clock.png?v=20260909av");        mask-image:url("../img/icons/clock.png?v=20260909av")}
.i--shield       {-webkit-mask-image:url("../img/icons/shield.png?v=20260909av");       mask-image:url("../img/icons/shield.png?v=20260909av")}
.i--boxes        {-webkit-mask-image:url("../img/icons/boxes.png?v=20260909av");        mask-image:url("../img/icons/boxes.png?v=20260909av")}
.i--trash        {-webkit-mask-image:url("../img/icons/trash.png?v=20260909av");        mask-image:url("../img/icons/trash.png?v=20260909av")}
.i--pf-oxigeno   {-webkit-mask-image:url("../img/icons/pf-oxigeno.png?v=20260909av");   mask-image:url("../img/icons/pf-oxigeno.png?v=20260909av")}
.i--pf-mecanica  {-webkit-mask-image:url("../img/icons/pf-mecanica.png?v=20260909av");  mask-image:url("../img/icons/pf-mecanica.png?v=20260909av")}
.i--pf-adhesion  {-webkit-mask-image:url("../img/icons/pf-adhesion.png?v=20260909av");  mask-image:url("../img/icons/pf-adhesion.png?v=20260909av")}
.i--pf-brillo    {-webkit-mask-image:url("../img/icons/pf-brillo.png?v=20260909av");    mask-image:url("../img/icons/pf-brillo.png?v=20260909av")}
.i--pf-sellado   {-webkit-mask-image:url("../img/icons/pf-sellado.png?v=20260909av");   mask-image:url("../img/icons/pf-sellado.png?v=20260909av")}
.i--pf-o2-baja   {-webkit-mask-image:url("../img/icons/pf-o2-baja.png?v=20260909av");   mask-image:url("../img/icons/pf-o2-baja.png?v=20260909av")}
.i--pf-termica   {-webkit-mask-image:url("../img/icons/pf-termica.png?v=20260909av");   mask-image:url("../img/icons/pf-termica.png?v=20260909av")}
.i--file-pdf     {-webkit-mask-image:url("../img/icons/file-pdf.png?v=20260909av");     mask-image:url("../img/icons/file-pdf.png?v=20260909av")}
.i--download     {-webkit-mask-image:url("../img/icons/download.png?v=20260909av");     mask-image:url("../img/icons/download.png?v=20260909av")}

.ico{width:1.05em;height:1.05em}

/* ---------- Headings ---------- */
.h2{
  font-family:var(--font-cond);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.05;
  font-size:clamp(2rem,4.6vw,3.35rem);
  text-align:center;
}
.h2--blue{color:var(--blue)}
.h2--white{color:#fff}
.h2--left{text-align:left}
/* "¿Porqué el envasado al vacío…" va en caja baja y ancho normal */
.h2--sentence{
  font-family:var(--font);
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1.1;
  /* Con el bloque de texto mas ancho, el titulo vuelve a cuerpo grande. */
  font-size:clamp(1.7rem,3.4vw,3rem);
}

.lead{
  text-align:center;color:var(--ink-soft);
  font-size:1.05rem;margin-top:14px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.05rem;line-height:1;
  padding:15px 30px;border-radius:999px;
  color:#fff;background:var(--blue);
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn--blue{background:var(--blue)}
.btn--blue:hover{background:var(--blue-700)}
.btn--green{background:var(--green)}
.btn--green:hover{background:var(--green-700)}
.btn--wa{background:var(--green)}
.btn--wa:hover{background:var(--green-700)}
.btn--wa .ico{width:1.5em;height:1.5em}
.btn--sq{border-radius:4px;padding:13px 34px}

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  background:linear-gradient(90deg,#fff 0%,#fff 27%,var(--blue) 56%,var(--blue) 100%);
  color:#fff;
  font-size:.86rem;
}
.topbar__inner{
  max-width:var(--wrap);margin-inline:auto;padding:7px 24px;
  display:flex;justify-content:flex-end;align-items:center;gap:26px;
}
.topbar__item{display:inline-flex;align-items:center;gap:8px;opacity:.95;transition:opacity .2s}
.topbar__item:hover{opacity:1;text-decoration:underline}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:5px solid var(--green);
  transition:box-shadow .25s var(--ease);
}
.header.is-stuck{box-shadow:0 4px 18px rgba(0,0,0,.10)}
.header__inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 24px;
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.header__logo img{
  width:186px;height:auto;
  transition:width .25s var(--ease);
}
.header.is-stuck .header__logo img{width:158px}

.nav ul{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:var(--font);
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.02rem;color:var(--ink);
  padding:6px 0;position:relative;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover{color:var(--green)}
.nav a:hover::after{transform:scaleX(1)}
/* El link activo va solo en verde, sin la linea. */
.nav a.is-active{color:var(--green)}
.nav a.is-active::after{transform:scaleX(0)}

.navtoggle{display:none;width:44px;height:38px;padding:8px;position:relative}
.navtoggle span{
  display:block;height:3px;background:var(--blue);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.navtoggle span+span{margin-top:5px}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;isolation:isolate;background:#0c0c0c}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:1}
/* Sin velo oscuro encima de la foto: apagaba el salmon. Lo que sostiene la
   legibilidad del texto blanco es la sombra de .hero__kicker y .hero__title,
   que lleva un halo suave ademas del desplazamiento. */
.hero__content{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(64px,9vw,110px) 24px;
  min-height:clamp(420px,52vw,610px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;
}
.hero__kicker{
  font-size:clamp(1.4rem,3.05vw,3.05rem);
  font-weight:500;
  text-shadow:0 0 .35em rgba(0,0,0,.55), .04em .05em .06em rgba(0,0,0,.6);
}
.hero__title{
  margin-top:clamp(28px,5vw,58px);
  font-weight:700;line-height:1.06;
  font-size:clamp(2.1rem,6vw,4rem);
  text-shadow:0 0 .3em rgba(0,0,0,.5), .05em .06em .07em rgba(0,0,0,.65);
}
.hero__cta{
  margin-top:clamp(28px,4.5vw,52px);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
}
/* Los CTA del hero son mas grandes y de ancho fijo, como en el PDF (254x51). */
.hero__cta .btn{
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  min-width:254px;justify-content:center;
  font-family:var(--font);font-weight:600;
  font-size:1.2rem;letter-spacing:.01em;
  padding:11px 26px;
}
/* En el diseno el boton de WhatsApp va en caja mixta, no en mayusculas. */
.btn--wa{text-transform:none;letter-spacing:0}

/* =========================================================
   SECTORES
   ========================================================= */
.sectores{background:#fff}
.sectores__top{padding:clamp(56px,7vw,86px) 0 0}
.sectores__band{
  margin-top:clamp(40px,5vw,64px);
  /* La banda azul arranca a la mitad de las fotos de la primera fila. */
  --corte-azul:215px;
  background:linear-gradient(180deg,#fff 0,#fff var(--corte-azul),var(--blue) var(--corte-azul),var(--blue) 100%);
  padding-bottom:clamp(56px,6vw,90px);
}
.sector-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
}
.sector{
  background:#fff;border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.10);
  /* Marco blanco alrededor de la foto, a la mitad del grosor original. */
  padding:8px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.sector:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.sector h3{
  font-family:var(--font-cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  color:var(--blue);text-align:center;
  font-size:1.4rem;padding:8px 4px 16px;
}
.sector figure{overflow:hidden;border-radius:4px}
.sector img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .5s var(--ease)}
.sector:hover img{transform:scale(1.05)}

/* =========================================================
   PRODUCTOS
   ========================================================= */
.productos{
  background:linear-gradient(180deg,var(--gray-50) 0%,var(--gray-50) 62%,var(--gray-200) 62%,var(--gray-200) 100%);
  padding:clamp(56px,7vw,88px) 0 clamp(56px,7vw,88px);
}
.tabs{
  /* 4 rotulos de 280px. */
  max-width:1120px;margin:clamp(30px,4vw,44px) auto 0;
  display:flex;justify-content:center;
  border-bottom:1px solid var(--gray-300);
}
/* El <li> reparte el ancho; el <a> de adentro es el que se pinta y se clickea,
   asi que ocupa toda la celda para que el area sensible sea el rotulo entero. */
.tabs li{flex:1 1 0;max-width:280px;display:flex}
.tabs li+li{border-left:1px solid var(--gray-300)}
.tab{
  flex:1;
  font-family:var(--font-cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  /* Cuerpo tomado del PDF: "RIGID VAC" mide 140px de ancho a 1600.
     El minimo baja a 1rem para que "THERMO VAC HB" no se parta en dos
     lineas entre 600 y 730px, donde los 4 rotulos siguen en una fila. */
  font-size:clamp(1rem,2.6vw,2.2rem);color:var(--blue);
  padding:12px 10px 14px;
  text-align:center;
  position:relative;
  transition:color .2s var(--ease);
}
.tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--green);transform:scaleX(0);
  transition:transform .3s var(--ease);
}
/* El verde aparece solo en el over: no hay solapa "activa". */
.tab:hover{color:var(--green)}
.tab:hover::after{transform:scaleX(1)}

.prod-grid{
  /* Del mismo ancho que las solapas de arriba. */
  max-width:1120px;margin:clamp(26px,3.5vw,40px) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.prod{
  background:#fff;border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.09);
  padding:26px 26px 34px;text-align:center;
  border:2px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.prod figure{
  /* Los -26px anulan el padding de la tarjeta, asi la caja de la foto mide lo
     mismo que la tarjeta. Sirve para que el aire lateral de la foto sea un
     porcentaje del ancho de la TARJETA y no de la caja interna: de lo
     contrario el margen cambia con el ancho de la tarjeta, que se adapta.
     175 y no 205 de alto: las fotos son apaisadas y en la caja alta quedaba
     una franja vacia arriba y abajo. */
  margin:0 -26px 22px;
  height:175px;display:flex;align-items:center;justify-content:center;
}
/* 90% del ancho de la tarjeta: quedan 5% de aire a cada lado, parejo en las
   cuatro tarjetas y en cualquier tamano de pantalla. */
.prod figure img{max-width:90%;max-height:175px;width:auto;object-fit:contain}
.prod h3{
  font-family:var(--font-cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  /* Cuerpo tomado del PDF: "RIGID VAC" mide 104px de ancho a 1600,
     mas chico que el rotulo de arriba (140px). */
  color:var(--blue);font-size:1.65rem;margin-bottom:12px;
}
.prod p{color:var(--ink-soft);font-size:1rem;max-width:26ch;margin-inline:auto}
/* La tarjeta entera es un link a la ficha del producto. */
.prod a{display:block;color:inherit}
.prod a:hover h3{color:var(--green)}

.certif{
  margin-top:clamp(28px,3.5vw,40px);
  display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--ink-soft);font-size:.95rem;
}
.certif img{width:96px}
.productos__cta{margin-top:26px;text-align:center}

/* =========================================================
   BENEFICIOS
   ========================================================= */
.beneficios{
  position:relative;isolation:isolate;
  padding:clamp(52px,6.5vw,80px) 0 clamp(60px,7vw,92px);
  background:#2c3a20 url("../img/benefits-bg.jpg?v=20260909av") center/cover no-repeat;
}
.beneficios::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.06) 40%,rgba(0,0,0,.14));
}
.beneficios .h2{text-shadow:0 2px 14px rgba(0,0,0,.5)}
.benef-grid{
  margin-top:clamp(30px,4vw,48px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.benef{
  border-radius:var(--radius);
  border:3px solid rgba(255,255,255,.75);
  padding:30px 26px 34px;
  color:#fff;
  /* El desenfoque hace el trabajo pesado: deja ver la foto de fondo pero le
     quita el detalle, asi las tarjetas pueden ser mas transparentes sin que
     el texto blanco quede peleando contra las hojas y los tomates. */
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.benef:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.benef--blue{background:linear-gradient(150deg,rgba(16,84,112,.80),rgba(45,120,146,.70))}
.benef--teal{background:linear-gradient(150deg,rgba(22,160,128,.78),rgba(45,180,172,.68))}
/* Con el fondo mas transparente el texto pierde contraste contra las zonas
   claras de la foto; una sombra suave lo vuelve a despegar sin que se note. */
.benef h3,.benef p{text-shadow:0 1px 6px rgba(0,0,0,.28)}
.benef__ico{
  width:62px;height:62px;display:block;margin-bottom:26px;
}
.benef h3{
  font-weight:700;font-size:1.5rem;line-height:1.15;margin-bottom:14px;
}
/* Los parrafos tienen que arrancar a la misma altura en las cuatro tarjetas,
   asi que el titulo reserva lugar fijo. Con 3 lineas sobraba una vacia -en
   casi todos los anchos los cuatro titulos entran en 2- y quedaba un hueco
   grande antes del parrafo; con 2 siguen alineados y el texto queda junto.
   Abajo de 900px las tarjetas son anchas, los titulos entran en menos lineas
   y la reserva solo agregaria hueco, asi que no se aplica. */
@media (min-width:901px){
  .benef h3{min-height:2.3em}
}
/* Franja angosta: cuatro columnas en pantallas chicas. Ahi las tarjetas se
   estrechan y "Reduce costos y desperdicio" pasa a 3 lineas, asi que en ese
   tramo -y solo ahi- hace falta la reserva vieja para que los parrafos sigan
   arrancando parejos. */
@media (min-width:901px) and (max-width:999px){
  .benef h3{min-height:3.45em}
}
.benef p{font-size:1.12rem;line-height:1.45;color:rgba(255,255,255,.94)}

/* =========================================================
   ¿POR QUÉ?
   ========================================================= */
.porque{padding:clamp(56px,7vw,90px) 0;background:#fff;overflow:hidden}
.porque__inner{
  display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:center;
}
/* El bloque de texto se pasa sobre la columna de la foto, como en el PDF.
   Cae sobre el fondo blanco de la imagen, asi que no tapa el bife. */
.porque__text{position:relative;z-index:1;margin-right:-150px}
/* Sangra hasta el borde derecho y se recorta ahi, como en el PDF. */
.porque__img{margin-right:calc(-1 * max(0px,(100vw - var(--wrap)) / 2) - 24px);overflow:hidden}
.porque .h2{margin-bottom:clamp(28px,3.5vw,44px)}
.checklist{display:grid;gap:26px}
.checklist li{display:flex;gap:14px}
.check{
  width:26px;height:26px;flex:none;margin-top:2px;
  color:var(--green);
}
.checklist h3{
  font-family:var(--font);
  font-weight:600;color:var(--green);font-size:1.28rem;margin-bottom:4px;
}
.checklist p{color:var(--ink-soft);font-size:1.12rem;font-weight:300}
/* El archivo ya viene espejado (ajos a la derecha). Se agranda y el sobrante
   se recorta contra el borde derecho, como en el PDF. */
/* El archivo tiene ~19% de margen blanco a la derecha: con 138% el recorte
   entra en el bife y queda cortado contra el margen, como en el PDF. */
.porque__img img{width:138%;max-width:none}

/* =========================================================
   USOS
   ========================================================= */
.usos{background:var(--blue);padding:clamp(56px,7vw,88px) 0}
.usos-grid{
  margin-top:clamp(34px,4.5vw,54px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.uso{
  background:#fff;overflow:hidden;
  /* Mismo radio que las tarjetas de Sectores, Productos y Beneficios.
     `overflow:hidden` recorta la foto, asi que se redondea con la tarjeta. */
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.uso:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
/* Filete blanco alrededor de la foto, como en el PDF, a la mitad del grosor. */
.uso figure{overflow:hidden;margin:7px 7px 0;border-radius:2px}
.uso img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s var(--ease)}
.uso:hover img{transform:scale(1.06)}
.uso h3{
  font-family:var(--font-cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  color:var(--blue);text-align:center;font-size:1.2rem;
  padding:18px 12px;
}

/* =========================================================
   EMPRESA
   ========================================================= */
.empresa{padding:clamp(56px,7vw,92px) 0;background:#fff}
.empresa__inner{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:start;
}
.empresa__img img{width:100%;object-fit:cover;aspect-ratio:3/4}
.empresa__text .h2{margin-bottom:24px}
.empresa__text p{margin-bottom:18px;color:var(--ink-soft);font-size:1.12rem}
.empresa__text strong{color:var(--ink);font-weight:700}
.empresa__logos{
  display:flex;align-items:center;gap:22px;
  margin:30px 0 26px!important;
}
/* El logo de Rodofeli va envuelto en un <a>, asi que se apunta por posicion
   en el arbol y no con :first/:last-of-type. */
.empresa__logos img{width:auto}
.empresa__logos > img{height:44px}
.empresa__logos > a img{height:38px;transition:opacity .2s var(--ease)}
.empresa__logos > a:hover img{opacity:.75}

/* Link a Grupo Rodofeli dentro del texto */
.link-rodofeli{
  color:inherit;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.link-rodofeli:hover{color:var(--green-700)}
.empresa__sep{width:1px;height:42px;background:var(--gray-300)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  position:relative;isolation:isolate;
  padding:clamp(56px,7vw,90px) 0 clamp(60px,8vw,100px);
  background:#2b2b2b url("../img/faq-bg.jpg?v=20260909av") center 28%/cover no-repeat; 
}
/* .faq::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.80) 0%,rgba(18,18,18,.62) 34%,rgba(24,24,24,.50) 100%);
}*/
.faq::before {
  display: none;
}

.faq .h2{text-shadow:0 2px 16px rgba(0,0,0,.6)}
.acc{
  margin-top:clamp(32px,4.5vw,50px);
  max-width:920px;margin-inline:auto;
  display:grid;gap:16px;
}
.acc__item{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:18px 22px;text-align:left;
}
.acc__btn span{
  flex:1;
  font-family:var(--font);
  font-weight:600;font-size:1.2rem;color:var(--green);
  transition:color .2s var(--ease);
}
.acc__btn:hover span{color:var(--green-700)}
.acc__chev{
  width:20px;height:20px;flex:none;
  color:var(--green);
  transition:transform .3s var(--ease);
}
.acc__item.is-open .acc__chev{transform:rotate(90deg)}
.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease);
}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__inner p{padding:0 22px 20px 58px;color:var(--ink-soft);font-size:1rem}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{padding:clamp(56px,7vw,90px) 0 clamp(40px,5vw,70px);background:#fff;overflow:hidden}
.contacto__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px)}
/* El formulario va por encima de la foto: en el diseno se superponen y el
   boton Enviar queda sobre la bolsa. */
.contacto__form{position:relative;z-index:1}
.contacto__intro{margin:14px 0 30px;color:var(--ink-soft);font-size:1rem}

.field{margin-bottom:18px}
.field label{
  display:block;margin-bottom:7px;
  font-size:.95rem;font-weight:500;color:var(--ink);
}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  padding:12px 14px;
  /* Semitransparentes: en el diseno el filete se insinua por debajo del
     formulario. Va sobre el fondo, no con opacity, para no desvanecer el texto. */
  background:rgba(250,250,250,.72);border:1px solid rgba(216,216,216,.85);border-radius:3px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:#AFAFAF}
.field input:focus,.field textarea:focus{
  /* Al escribir se vuelve casi opaco, para que el texto se lea siempre. */
  outline:none;background:rgba(255,255,255,.96);
  border-color:var(--green);box-shadow:0 0 0 3px rgba(128,187,0,.18);
}
.field.has-error input,.field.has-error textarea{
  border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
.field__err{display:block;min-height:0;color:#C0392B;font-size:.85rem;margin-top:5px}
.field.has-error .field__err{min-height:1.2em}

.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}

/* Honeypot: fuera de pantalla, invisible para las personas. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Estados del envio, como cajas de alerta. */
.form__status{
  font-size:.95rem;font-weight:500;line-height:1.4;
  margin-top:16px;padding:0;border-radius:4px;
  border:1px solid transparent;
}
.form__status:empty{display:none}
.form__status.is-ok,.form__status.is-err{padding:12px 16px}
.form__status.is-ok{color:#3C6E00;background:#EFF7DF;border-color:#CBE39A}
.form__status.is-err{color:#8E2B20;background:#FBEDEB;border-color:#EFC3BD}
.btn:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}

.contacto__side{display:flex;flex-direction:column;gap:26px}
.contacto__data{display:grid;gap:14px}
.contacto__data li{display:flex;align-items:center;gap:14px;color:var(--ink-soft);font-size:1rem}
.ico--g{color:var(--green);width:1.3em;height:1.3em}
.contacto__data a:hover{color:var(--green-700);text-decoration:underline}
/* Sin margin-top:auto: en el PDF el bife arranca 48px debajo de los datos
   de contacto, no pegado al fondo de la seccion. El gap del flex ya aporta 26. */
.contacto__img{margin-top:0}
/* Medido contra el PDF: el bife ocupa 737px de ancho a 1600 y arranca por
   debajo del formulario. El archivo ya viene espejado. */
.contacto__img img{
  width:167%;max-width:none;
  margin-left:-38%;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--gray-50);border-top:5px solid var(--green)}
.footer__inner{
  display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,4vw,46px);
  padding-block:clamp(24px,3vw,34px);
}
.footer__brand img{width:100%;max-width:290px}
.footer__nav ul{display:flex;flex-wrap:wrap;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--green)}
.footer__nav a{
  font-family:var(--font-cond);
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:.98rem;color:var(--ink);
  transition:color .2s var(--ease);
}
.footer__nav a:hover{color:var(--green)}

.footer__grid{
  margin-top:20px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:34px;
}
.footer__grid h2{
  font-family:var(--font-cond);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--blue);font-size:1.08rem;margin-bottom:16px;
}
.footer__data{display:grid;gap:12px}
.footer__data li{display:flex;align-items:center;gap:11px;font-size:.95rem;color:var(--ink-soft)}
.footer__data .ico{color:var(--blue);width:1.2em;height:1.2em}
.footer__data a:hover{color:var(--green-700)}

.footer__social{display:flex;gap:14px;margin-bottom:22px}
.footer__social a{color:var(--blue);display:inline-flex}
.footer__social .i{width:22px;height:22px;transition:background-color .2s var(--ease),transform .2s var(--ease)}
.footer__social a:hover{color:var(--green)}
.footer__social a:hover .i{transform:translateY(-2px)}
.footer__certif{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-soft)}
.footer__certif img{width:86px}

.footer__bar{
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 28%,#C6E39A 40%,var(--green) 50%,var(--green) 100%);
  color:#fff;
}
.footer__bar-inner{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-block:10px;
  font-family:var(--font);font-weight:400;
  text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;
}
.footer__bar-inner a{text-decoration:none;transition:opacity .2s var(--ease)}
.footer__bar-inner a:hover{opacity:.75}

/* =========================================================
   FLOATING CONTROLS
   ========================================================= */
.totop,.wa-float{
  position:fixed;right:22px;z-index:90;
  display:grid;place-items:center;
  width:48px;height:48px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .2s;
}
.totop{
  bottom:22px;background:var(--blue);border:2px solid #fff;
  box-shadow:var(--shadow);
  width:42px;height:42px;
}
.totop{color:#fff}
.totop .i{width:22px;height:22px}
.totop:hover{background:var(--blue-700)}
.wa-float{
  bottom:82px;background:var(--green);border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.wa-float{color:#fff}
.wa-float .i{width:26px;height:26px}
.wa-float:hover{background:var(--green-700)}
.totop.is-visible,.wa-float.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
/* Sólo se ocultan si hay JS: sin JS el contenido siempre es visible. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* Interruptor de emergencia: JS lo activa si algo falló (observer que no
   dispara, transición que no avanza). Al matar la transición, el valor final
   se aplica de una y el contenido no puede quedar invisible. */
.js.reveals-off .reveal{opacity:1!important;transform:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav ul{gap:18px}
  .nav a,.crumbs ol{font-size:.96rem}
  .header__logo img{width:164px}
}

@media (max-width:900px){
  :root{--header-h:76px}
  body{font-size:16px}

  .navtoggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--gray-100);
    box-shadow:0 14px 26px rgba(0,0,0,.14);
    max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .nav.is-open{max-height:70vh;overflow-y:auto}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
  .nav a{display:block;padding:14px 24px;font-size:1.06rem}
  .nav a::after{display:none}
  .nav a.is-active{background:var(--gray-50)}
  .header__logo img{width:150px}
  .header.is-stuck .header__logo img{width:150px}

  .topbar{font-size:.8rem;background:var(--blue)}
  .topbar__inner{justify-content:center;flex-wrap:wrap;gap:16px}

  .sector-grid,.prod-grid,.usos-grid{grid-template-columns:repeat(2,1fr)}
  .benef-grid{grid-template-columns:repeat(2,1fr)}
  .sectores__band{
    background:linear-gradient(180deg,#fff 0,#fff 70px,var(--blue) 70px,var(--blue) calc(100% - 40px),#fff calc(100% - 40px),#fff 100%);
  }
  .porque__inner,.empresa__inner,.contacto__inner{grid-template-columns:1fr}
  .porque__text{margin-right:0}
  .contacto__img img{width:100%;margin-left:0}
  .porque__img{max-width:520px;margin-inline:auto;margin-right:auto}
  .porque__img img{width:100%}
  .empresa__img{max-width:480px;margin-inline:auto}
  .empresa__img img{aspect-ratio:4/3}
  .footer__inner{grid-template-columns:1fr;text-align:left}
  .footer__brand img{max-width:240px}
  .acc__inner p{padding-left:22px}
  .form__foot{justify-content:flex-start}
}

@media (max-width:600px){
  .topbar__item span{font-size:.78rem}
  .sector-grid,.prod-grid,.usos-grid,.benef-grid{grid-template-columns:1fr}
  .sectores__band{
    background:linear-gradient(180deg,#fff 0,#fff 60px,var(--blue) 60px,var(--blue) calc(100% - 34px),#fff calc(100% - 34px),#fff 100%);
  }
  .tabs{flex-direction:column;border-bottom:0;gap:2px}
  .tabs li{max-width:none}
  .tabs li+li{border-left:0}
  .tab{border:1px solid var(--gray-300);border-radius:4px}
  .tab::after{display:none}
  .footer__grid{grid-template-columns:1fr}
  .footer__nav ul{gap:14px}
  .footer__bar-inner{flex-direction:column;text-align:center;gap:4px;padding-block:12px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
  .totop,.wa-float{right:14px}
  .totop{bottom:14px}
  .wa-float{bottom:74px}
}

/* =========================================================
   PAGINA DE PRODUCTO  (cook-vac.html, rigid-vac.html, ...)
   Medido sobre "html productos.pdf", que viene a 1512 px de ancho.
   Factor render->css usado para pasar del PDF al CSS: 0.63.
   ========================================================= */

/* ---------- Miga de pan ---------- */
.crumbs{
  /* La franja arranca gris del lado izquierdo y se aclara hacia la derecha,
     igual que el fondo del hero que sigue abajo. */
  background:linear-gradient(90deg,#DBDCDD 0%,#E9E9EA 50%,#ECECED 100%);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.crumbs ol{
  /* Ojo: se anula solo lo que trae el <ol> por defecto. Ni `padding:0` ni
     `margin:0` a secas: se comerian el padding-inline y el margin-inline:auto
     del .wrap, y la miga se iria al borde en vez de alinear con el logo. */
  list-style:none;margin-block:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  min-height:70px;
  /* Mismos valores que .nav a: la miga y el menu principal tienen que leerse
     como la misma tipografia. Si se toca uno, tocar el otro. */
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.02rem;color:var(--ink);
}
.crumbs a{transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--green)}
.crumbs li+li::before{content:"/";margin-right:10px;color:#9C9C9C;font-weight:400}
.crumbs [aria-current="page"]{color:var(--green)}

/* ---------- Hero del producto ---------- */
.phero{
  /* Degrade horizontal medido en el PDF: #E0E1E2 en el borde izquierdo,
     blanco puro pasada la mitad. */
  background:linear-gradient(90deg,#DFE0E1 0%,#F4F4F5 25%,#fff 55%,#fff 100%);
  overflow:hidden;
}
.phero__inner{
  display:grid;grid-template-columns:minmax(300px,340px) 1fr;
  gap:clamp(24px,4vw,48px);align-items:center;
  min-height:500px;
  padding-block:clamp(36px,5vw,54px);
}

/* La lista de productos hace de navegacion entre las cuatro fichas. */
/* Paso entre items medido en el PDF: 67 px de tope a tope. */
.plist li+li{margin-top:23px}
.plist a{
  display:block;
  font-family:var(--font-cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:2.1rem;line-height:1.05;color:var(--blue);
  max-width:311px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.plist a:hover{color:var(--green)}
.plist [aria-current="page"]{
  color:var(--green);
  border-bottom:4px solid var(--green);
  /* Los 3 px que engorda el filete se descuentan arriba, para que el paso
     entre items siga siendo el mismo que en el diseno. */
  padding-bottom:5px;
}
.phero__certif{
  display:flex;align-items:center;gap:12px;
  margin-top:44px;font-size:.95rem;color:var(--ink-soft);
}
.phero__certif img{width:86px}

/* Alto fijo para las cuatro fichas: las fotos tienen proporciones distintas y
   si se escalaran solo por ancho, las verticales estirarian el hero al doble.
   El 415 y el max-width salen de medir la foto de Cook Vac contra el PDF de
   diseno: alli el jamon ocupa 556 px de ancho. */
.phero__foto{
  justify-self:end;width:100%;height:415px;
  display:flex;align-items:center;justify-content:flex-end;
}
.phero__foto img{
  width:auto;height:100%;max-width:607px;object-fit:contain;
  /* En el diseno la foto se pasa apenas del ancho de la caja. */
  margin-right:-59px;
}

/* ---------- Banda "Ficha Tecnica / Modelo" ---------- */
.ficha{
  position:relative;background:var(--green);overflow:hidden;
  /* El corte diagonal: 49 px de corrimiento en los 70 px de alto, y un hueco
     blanco de 13 px entre el azul y el verde. */
  --slant:49px;
  --hueco:13px;
}
.ficha__azul{
  position:absolute;top:0;bottom:0;left:0;width:40%;
  background:var(--blue);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
}
.ficha__hueco{
  position:absolute;top:0;bottom:0;
  left:calc(40% - var(--slant));width:calc(var(--slant) + var(--hueco));
  background:#fff;
  clip-path:polygon(79% 0,100% 0,21% 100%,0 100%);
}
.ficha__inner{position:relative;z-index:1;min-height:70px;display:flex;align-items:center}
.ficha__t{
  font-weight:300;font-size:clamp(1.5rem,3vw,2.7rem);
  line-height:1;color:#fff;
}
/* Va colgado de .ficha y no del wrap: en el diseno esta centrado sobre la
   mitad verde, que arranca donde termina la diagonal. */
.ficha__m{
  position:absolute;left:calc(40% + var(--hueco));right:3%;
  top:50%;transform:translateY(-50%);
  text-align:center;
  font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.4rem,3.1vw,2.72rem);line-height:1;color:#fff;
}
.ficha__m b{font-weight:700}

/* ---------- Cuerpo de la ficha ---------- */
.pdatos{padding:64px 0 76px;background:#fff}
.pbloque+.pbloque{margin-top:50px}
.pbloque--sep{margin-top:72px}

/* Ojo: estos titulos NO van en la condensada. Medidos contra el PDF, el ancho
   del texto solo cierra con la Barlow normal. */
.ph{
  display:flex;align-items:center;gap:16px;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.57rem;line-height:1.1;color:var(--green);
  margin-bottom:16px;
}
.ph .i{width:24px;height:24px}
/* Todo lo que cuelga de un titulo se alinea con su texto, no con el icono. */
.psangria{padding-left:40px}
.pdatos p{font-size:1.45rem;line-height:1.5;color:var(--ink)}

/* El flyer de Thermo Vac HB destaca "ALTA BARRERA" al lado de la estructura. */
.psello{
  display:inline-block;margin-left:14px;
  background:var(--blue);color:#fff;
  font-family:var(--font-cond);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:.72em;line-height:1;
  padding:7px 14px;border-radius:3px;
  vertical-align:middle;
}

/* ---------- Propiedades funcionales ---------- */
.pfun{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(16px,2.5vw,34px);
  margin:38px 40px 0;
}
.pfun li{text-align:center;flex:0 1 auto}
.pfun__i{
  display:block;margin:0 auto 12px;
  /* Caja unica de 82 px. Cada icono ocupa dentro la proporcion que tiene en
     el diseno, asi se ven del mismo tamano relativo que en el PDF. */
  width:82px;height:82px;color:var(--green);
}
.pfun__i.i--pf-oxigeno {-webkit-mask-size:69%;mask-size:69%}
.pfun__i.i--pf-mecanica{-webkit-mask-size:90%;mask-size:90%}
.pfun__i.i--pf-adhesion{-webkit-mask-size:100%;mask-size:100%}
.pfun__i.i--pf-brillo  {-webkit-mask-size:70%;mask-size:70%}
.pfun__i.i--pf-sellado {-webkit-mask-size:72%;mask-size:72%}
.pfun__i.i--pf-o2-baja {-webkit-mask-size:73%;mask-size:73%}
.pfun__i.i--pf-termica {-webkit-mask-size:73%;mask-size:73%}
.pfun span{display:block;font-size:1.45rem;line-height:1.4;color:var(--ink)}

/* ---------- Tabla de propiedades tecnicas ---------- */
.ptabla{margin:34px 40px 0;overflow-x:auto}
.ptabla table{width:100%;border-collapse:collapse;font-size:1.45rem}
.ptabla th,.ptabla td{
  padding:0 12px;height:55px;text-align:center;
  /* Los filetes blancos entre columnas son parte del diseno, no un borde. */
  border-left:2px solid #fff;
}
.ptabla th:first-child,.ptabla td:first-child{border-left:0}
.ptabla thead th{
  background:var(--green);color:#fff;
  font-weight:600;height:56px;
}
.ptabla tbody tr:nth-child(odd) td{background:#D1E4A3}
.ptabla tbody tr:nth-child(even) td{background:#E7F1D1}
.ptabla td{color:var(--ink)}
.ptabla sup{font-size:.7em;vertical-align:super;line-height:0}

/* ---------- Aplicaciones / medidas / formatos ---------- */
.pcols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,56px);
}
.plista li{
  font-size:1.45rem;line-height:1.5;color:var(--ink);
  display:flex;gap:8px;
}
.plista li::before{content:"\2022";color:var(--ink)}
.pcols b{font-weight:600}

/* ---------- Banda de descargas ---------- */
.descargas{position:relative;padding:37px 0 93px;background:#fff}
.descargas::before{
  content:"";position:absolute;left:0;right:0;top:0;height:231px;
  background:var(--blue);
}
.descargas__inner{position:relative}
.descargas h2{
  text-align:center;color:#fff;font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.2;
  margin-bottom:30px;
}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:33px}
.dcard{
  background:#fff;border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  min-height:256px;padding:34px 18px 0;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.dcard__ico{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:8px;background:#F3F9E6;
  margin-bottom:33px;
}
.dcard__ico .i{width:30px;height:30px;color:var(--green)}
/* "Ficha tecnica" va con los mismos valores que .nav a y que la miga de pan. */
.dcard__k{
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.02rem;line-height:1.1;color:var(--ink);
}
.dcard__n{
  font-family:var(--font-cond);
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.5rem;line-height:1.1;color:var(--green);
  margin-top:6px;
}
.dcard__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:auto;margin-bottom:30px;
  min-width:152px;height:38px;padding:0 18px;
  border:1px solid #D3D4D5;border-radius:19px;
  font-size:1.05rem;color:#464646;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.dcard__btn .i{width:18px;height:18px}
.dcard__btn:hover{border-color:var(--green);color:var(--green);background:#F7FBEF}

/* ---------- Responsive de la pagina de producto ---------- */
@media (max-width:1400px){
  /* La sangria de la foto esta calibrada para 1512; mas angosto se recorta. */
  .phero__foto img{margin-right:-40px}
}

@media (max-width:1080px){
  .phero__inner{grid-template-columns:minmax(260px,300px) 1fr;min-height:0}
  .plist a{font-size:1.55rem}
  .phero__foto img{max-width:510px;margin-right:-20px}
  .dgrid{gap:22px}
}

@media (max-width:900px){
  .crumbs ol{min-height:56px;gap:8px}
  .phero__inner{grid-template-columns:1fr;gap:32px}
  .phero__foto{justify-self:center;height:auto;justify-content:center}
  .phero__foto img{width:100%;height:auto;max-width:460px;margin-right:0}
  .plist a{max-width:none}

  /* Sin lugar para la diagonal, las dos mitades pasan a ser dos renglones. */
  .ficha__azul,.ficha__hueco{display:none}
  .ficha{background:var(--green)}
  .ficha__inner{
    flex-direction:column;align-items:flex-start;gap:6px;
    padding-block:14px;
  }
  .ficha__t{position:relative}
  .ficha__t::before{
    /* El azul vuelve como fondo de su propio renglon, a todo el ancho. */
    content:"";position:absolute;left:-50vw;right:-50vw;top:-14px;bottom:-8px;
    background:var(--blue);z-index:-1;
  }
  .ficha__m{
    position:static;transform:none;text-align:left;
    width:100%;max-width:var(--wrap);margin-inline:auto;
    padding:0 24px 14px;
  }

  .pdatos{padding:44px 0 52px}
  .pdatos p,.pfun span,.plista li,.ptabla table{font-size:1.15rem}
  /* El corte de linea del diseno solo tiene sentido a lo ancho. */
  .pdatos p br{display:none}
  .ph{font-size:1.23rem}
  .psangria{padding-left:0}
  .pfun,.ptabla{margin-inline:0}
  .pfun{flex-wrap:wrap;justify-content:center;gap:32px 24px}
  .pfun li{flex:0 1 30%;min-width:150px}
  .pcols{grid-template-columns:1fr;gap:34px}
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .descargas::before{height:180px}
  .descargas{padding-bottom:60px}
}

@media (max-width:600px){
  .plist li+li{margin-top:22px}
  .plist a{font-size:1.35rem}
  .pdatos p,.pfun span,.plista li,.ptabla table{font-size:.98rem}
  .ph{font-size:1.06rem;gap:12px}
  .ph .i{width:19px;height:19px}
  .dgrid{grid-template-columns:1fr;gap:18px}
  .dcard{min-height:0;padding-top:26px}
  .dcard__ico{margin-bottom:20px}
  .dcard__btn{margin-top:22px}
  .descargas::before{height:150px}
}