/* Papelera Rosato — hoja de estilos propia.
   Cortes del original (Elementor): tableta ≤ 1024 px, teléfono ≤ 767 px. Los valores salen del CSS
   del constructor y del CSS a mano del sitio, medidos contra el original (ver README). */

:root {
  --oscuro: #292B37;
  --rojo: #ED2024;
  --texto: #747474;
  --blanco: #FFFFFF;
  --gris-claro: #F6F6F8;
  --linea: #E8E8ED;
  --fondo-claro: #F9F9F9;
  --rosa: #FDECEC;
  --gris-medio: #C5C5CB;
  --ancho: 1280px;
}
@media (max-width: 1024px) { :root { --ancho: 1024px; } }
@media (max-width: 767px) { :root { --ancho: 767px; } }

*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--texto);
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; background-color: transparent; }
img { max-width: 100%; height: auto; border-style: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { display: block; flex: none; fill: currentColor; }
.oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: -10000px; top: auto; z-index: 100000;
  padding: 15px 23px 14px; background: #f1f1f1; color: #21759b; font-size: 14px; line-height: normal;
}
.saltar:focus { left: 5px; top: 5px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 5px;
  background-color: var(--rojo);
  color: var(--blanco);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  text-align: center;
  text-transform: capitalize;
  fill: currentColor;
  transition: all .3s;
}
a.boton[href]:hover, a.boton[href]:focus, .boton--chico:hover {
  background-color: var(--oscuro);
  color: var(--blanco);
}
.boton--contacto { padding: 20px 40px; }
.boton--chico { padding: 12px 24px; }
.boton--tema { padding: 10px 20px; }
a.boton--tema[href]:hover, a.boton--tema[href]:focus { background-color: var(--blanco); color: var(--rojo); }

/* ---------- Encabezado ---------- */
.barra {
  padding: 0 20px;
  border-bottom: 1px solid var(--linea);
}
.barra__interior {
  display: flex;
  justify-content: space-between;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 10px;
}
.barra__datos { display: flex; gap: 30px; }
.barra__datos li { display: flex; align-items: center; }
.barra__datos .icono {
  width: 14px;
  height: 14px;
  margin-right: 18.5px;
  color: var(--rojo);
}
.redes { display: flex; }
.redes li { display: flex; }
.redes a { display: inline-flex; justify-content: center; align-items: center; transition: all .3s; }
.redes a:hover { opacity: .9; }
.redes--barra { align-self: center; }
.redes--barra a { width: 26px; height: 26px; border-radius: 10%; }
.redes--barra .icono { width: 13px; height: 13px; fill: var(--texto); }
.redes--barra a:hover .icono { fill: var(--oscuro); }

.principal {
  position: relative;
  z-index: 999;
  padding: 0 20px;
  border-bottom: 1px solid var(--linea);
}
.principal__interior {
  display: flex;
  max-width: var(--ancho);
  margin: 0 auto;
}
.principal__logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  width: 20%;
  padding: 10px;
  text-align: center;
}
.logo { display: inline-block; }
.logo img { display: inline-block; width: 67%; vertical-align: middle; }
.principal__logo > .logo { margin: 0 auto; }
.principal__navegacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  width: 80%;
  padding: 0 10px 0 0;
}
.menu { margin-right: 20px; color: var(--oscuro); }
.menu__boton { display: none; }
.menu__lista { position: relative; z-index: 2; display: flex; flex-wrap: wrap; }
.menu__lista > li { position: relative; display: flex; }
.menu__lista > li > a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 41px 20px;
  color: var(--oscuro);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  text-transform: capitalize;
  white-space: nowrap;
  transition: .4s;
}
.menu__lista > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--gris-claro);
  opacity: 0;
  transition: .3s;
}
.menu__lista > li > a:hover, .menu__lista > li > a:focus, .menu__lista > li.esta-abierto > a,
.menu__lista a[aria-current="page"] { color: var(--rojo); }
.menu__lista > li > a:hover::before, .menu__lista > li > a:focus::before, .menu__lista > li.esta-abierto > a::before,
.menu__lista > li > a[aria-current="page"]::before { opacity: 1; }
.menu__flecha {
  display: flex;
  align-items: center;
  margin: -10px 0;
  padding: 10px 0 10px 10px;
}
.menu__flecha svg { display: block; width: 18px; height: 18px; fill: #000; }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  display: none;
  min-width: 130px;
  background-color: #fff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1);
}
.con-submenu.esta-abierto > .submenu, .submenu.se-cierra { display: block; }
.submenu.se-cierra { animation: submenu-fundido 200ms cubic-bezier(.37, 0, .63, 1) forwards; }
@keyframes submenu-fundido { from { opacity: 1; } to { opacity: 0; } }
.submenu li:not(:last-child) { border-bottom: 1px solid var(--linea); }
.submenu a {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  border-left: 8px solid transparent;
  color: #33373D;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
  transition: .4s;
}
.submenu a:hover, .submenu a:focus, .submenu a[aria-current="page"] { background-color: var(--rojo); color: var(--blanco); }
.boton--contacto { align-self: center; }

/* ---------- Portada (carrusel) ---------- */
.portada { position: relative; display: flex; flex-direction: column; }
.portada__diapositivas { position: relative; height: 650px; overflow: hidden; cursor: grab; touch-action: pan-y; }
.portada__diapositivas:active { cursor: grabbing; }
.diapositiva {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s ease;
}
.diapositiva.es-activa { z-index: 1; opacity: 1; }
.diapositiva__fondo {
  position: absolute;
  inset: 0;
  background: 50% / cover no-repeat;
  transition: transform 10s linear;
}
.diapositiva__fondo--desde-1990 { background-color: #fb8404; background-image: url(../images/portada-diapositiva-desde-1990-1920x650.jpg); }
.diapositiva__fondo--calidad { background-color: #0883D2; background-image: url(../images/portada-diapositiva-calidad-1920x650.jpg); }
.diapositiva__fondo--reciclado { background-color: #EC5054; background-image: url(../images/portada-diapositiva-reciclado-1920x650.jpg); }
.diapositiva__fondo.con-zoom { transform: scale(1.3); transition-duration: 20s; }
.diapositiva__contenido[hidden] { display: none; }
.diapositiva__contenido.entra { animation: contenido-diapositiva 1.25s; }
.diapositiva__interior {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  color: #fff;
  text-align: start;
}
.diapositiva__contenido { max-width: 1260px; }
.diapositiva__titulo {
  color: var(--blanco);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: capitalize;
}
.diapositiva__texto { color: var(--blanco); font-size: 20px; line-height: 1.8em; }
.diapositiva__titulo:not(:last-child), .diapositiva__texto:not(:last-child) { margin-bottom: 30px; }
.boton--diapositiva { border: 0; }
.portada__corte {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  pointer-events: none;
}
.portada__corte svg {
  position: relative;
  left: 50%;
  display: block;
  width: calc(100% + 1.3px);
  height: 70px;
  fill: var(--blanco);
  transform: translateX(-50%);
}

/* ---------- Nuestra empresa ---------- */
.empresa {
  display: flex;
  flex-direction: column;
  margin-bottom: -30px;
  padding: 0 20px;
  overflow: hidden;
}
.empresa__interior {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  max-width: min(100%, var(--ancho));
  margin: 0 auto;
  padding-top: 60px;
}
.empresa__fotos {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 662px;
  margin: 10px;
}
.empresa__foto, .empresa__bloque, .empresa__video { position: absolute; border-radius: 30px; }
.empresa__foto {
  top: 0;
  left: -10px;
  z-index: 5;
  width: 470px;
  min-height: 480px;
  overflow: hidden;
  border: 10px solid var(--blanco);
  background-color: var(--texto);
  box-sizing: content-box;
}
.empresa__foto img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 481px;
  object-fit: cover;
  object-position: center center;
}
.empresa__bloque {
  top: 10%;
  left: 10%;
  width: 500px;
  min-height: 420px;
  background-color: var(--rojo);
}
.empresa__video {
  top: 38%;
  left: 56%;
  z-index: 10;
  width: 310px;
  min-height: 310px;
  overflow: hidden;
  border: 10px solid var(--blanco);
  background-color: var(--gris-medio);
}
.empresa__video a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; cursor: pointer; }
.empresa__video img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.empresa__reproducir {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
}
.empresa__reproducir svg {
  display: inline-block;
  width: 100px;
  height: 100px;
  fill: #fff;
  opacity: .8;
  filter: drop-shadow(1px 0 6px rgba(0, 0, 0, .3));
  transition: all .5s;
}
.empresa__puntos {
  position: absolute;
  top: 400px;
  left: -65px;
  z-index: 0;
  display: block;
  width: 150px;
  height: 150px;
  color: var(--rojo);
}
.empresa__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  margin-left: 90px;
  padding: 10px;
}
.antetitulo {
  color: var(--rojo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.antetitulo--centro { text-align: center; }
.empresa__titulo {
  margin: 8px 0 0;
  color: var(--oscuro);
  font-size: 39.06px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: capitalize;
}
.empresa__listas { display: flex; align-items: flex-start; gap: 20px; }
.tildes { width: 50%; max-width: 50%; flex: 0 1 auto; margin-bottom: 40px; }
.tildes li { display: flex; align-items: center; }
.tildes li:not(:last-child) { padding-bottom: 5px; }
.tildes li:not(:first-child) { margin-top: 5px; }
.tildes .icono { width: 20px; height: 20px; margin-right: 5px; color: var(--rojo); }
.tildes span {
  padding-left: 5px;
  color: var(--oscuro);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  text-transform: capitalize;
}
.empresa__accion { position: relative; }
.empresa__rombos {
  position: absolute;
  top: 483px;
  left: 379px;
  z-index: 0;
  display: block;
  width: 200px;
  height: 200px;
  color: var(--rosa);
}

/* ---------- Pensado para vos ---------- */
.pensado { position: relative; padding: 160px 20px 60px; }
.pensado::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fondo-ondas-1920x282.png) 50% 0 / contain no-repeat;
  opacity: .2;
  filter: saturate(0);
}
.pensado__interior, .procesos__interior {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 10px;
}
.pensado__interior > .antetitulo, .procesos__interior > .antetitulo { margin-bottom: 20px; }
.cabezal { display: flex; flex-direction: column; margin: 0 15% 20px; padding-bottom: 1%; }
.cabezal__titulo {
  margin: 8px 0 16px;
  color: var(--oscuro);
  font-size: 39.06px;
  font-weight: 700;
  line-height: 1.2em;
  text-align: center;
  text-transform: capitalize;
}
.cabezal__texto { font-size: 20px; line-height: 1.8em; text-align: center; }
.tarjetas { display: flex; margin-bottom: 40px; }
.tarjeta {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  margin: 20px 15px;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 20px;
}
.tarjeta { --extra: 40px; }
.tarjeta:first-child { margin: 20px 30px 20px 0; }
.tarjeta:last-child { margin: 20px 0 20px 30px; }
.tarjeta__foto {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}
.tarjeta__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 50% / cover no-repeat;
  transition: all 1.5s;
}
.tarjeta__foto--papel-higienico::before { background-image: url(../images/inicio-papel-higienico-1024x1024.jpg); }
.tarjeta__foto--rollo-de-cocina::before { background-image: url(../images/inicio-rollo-de-cocina-1024x1024.jpg); }
.tarjeta__foto--servilleta::before { background-image: url(../images/inicio-servilleta-801x801.jpg); }
.tarjeta:hover .tarjeta__foto::before { transform: scale(1.2); }
.tarjeta__cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  flex: 1 1 auto;
  padding: 35px;
  background-color: var(--blanco);
  text-align: center;
}
.tarjeta__cuerpo > * { width: 100%; }
.tarjeta__titulo {
  margin-bottom: 15px;
  color: #3F444B;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.6em;
  text-transform: capitalize;
}
.tarjeta__texto { margin-bottom: 15px; }
.tarjeta .boton { width: auto; margin: 0 auto; }

/* ---------- Reciclaje, Cuidado del agua, Recetas ---------- */
.temas { display: flex; flex-direction: column; margin-bottom: 120px; }
.temas__interior { display: flex; width: 100%; max-width: min(100%, var(--ancho)); margin: 0 auto; }
.tema {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 536px;
  padding: 0 0 80px;
  overflow: hidden;
  background: 50% / cover no-repeat;
}
.tema--reciclaje { background-image: url(../images/inicio-reciclaje-1024x1536.jpg); }
.tema--cuidado-del-agua { background-image: url(../images/inicio-cuidado-del-agua-1024x1536.jpg); }
.tema--recetas { background-image: url(../images/inicio-recetas-1024x1536.jpg); }
.tema::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  opacity: .55;
  transition: opacity .3s ease;
}
.tema:hover::before { opacity: .75; }
.tema__titulo, .tema .boton { position: relative; z-index: 2; transition: transform .5s ease; }
.tema .boton { transition: transform .5s ease, all .3s; }
.tema:hover .tema__titulo, .tema:hover .boton { transform: translateY(-16px); }
.tema__titulo {
  margin-bottom: 10px;
  color: var(--blanco);
  font-size: 31.25px;
  font-weight: 700;
  line-height: 1.3em;
  text-align: center;
  text-transform: capitalize;
}
.tema .boton { align-self: center; }

/* ---------- Procesos con aval ---------- */
.procesos { padding: 60px 20px; background-color: var(--fondo-claro); }
.certificados { display: flex; margin-bottom: 40px; }
.certificado {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex: 1 1 0;
  min-width: 0;
  margin: 20px 15px;
  padding: 30px;
  border: 1px solid var(--linea);
  border-radius: 20px;
  background-color: var(--blanco);
  text-align: center;
}
.certificado:first-child { margin: 20px 30px 20px 0; }
.certificado:last-child { margin: 20px 0 20px 30px; }
.certificado img { width: 75%; margin-bottom: 20px; vertical-align: middle; }
.certificado__titulo {
  width: 100%;
  margin: 28px 0 10px;
  color: var(--oscuro);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.6em;
  text-transform: capitalize;
}
.certificado__texto { width: 100%; }

/* ---------- Variedad y calidad (carrusel de productos) ---------- */
.variedad { display: flex; flex-direction: column; padding: 0 20px; background-color: var(--blanco); }
.variedad__interior {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: min(100%, var(--ancho));
  margin: 0 auto;
  padding: 70px 10px;
}
.variedad .cabezal { margin-bottom: 0; }
.carrusel {
  --por-vista: 4;
  margin: 0 0 40px;
  padding: 10px;
}
.carrusel__ventana { overflow: hidden; }
/* Como el autoHeight de Swiper: la pista toma el alto de la tarjeta activa (site.js) y recorta las
   más altas; el cambio de alto acompaña el avance (2 s, lineal). */
.carrusel__pista { display: flex; align-items: flex-start; transition: height 2s linear; }
.producto {
  flex: 0 0 calc((100% - (var(--por-vista) - 1) * 10px) / var(--por-vista));
  margin-right: 10px;
  min-height: 1px;
}
.producto__tarjeta {
  margin: 10px;
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: var(--blanco);
}
.producto__foto {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.producto__marco { display: block; }
.producto__marco img { border-radius: 10px 10px 0 0; vertical-align: baseline; }
@media (max-width: 1023.98px) { .carrusel { --por-vista: 2; } }
@media (max-width: 766.98px) { .carrusel { --por-vista: 1; } }
.producto__nombre {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 83px;
  padding: 15px;
  text-align: center;
}
.producto__nombre a {
  display: block;
  margin-bottom: 10px;
  color: var(--oscuro);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2em;
  text-transform: capitalize;
}

/* ---------- Pie ---------- */
.pie {
  position: relative;
  padding: 60px 20px 30px;
  border-top: 1px solid var(--linea);
  background-color: var(--blanco);
}
.pie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fondo-pie-1800x1162.jpg) 50% / cover no-repeat;
  opacity: .25;
  mix-blend-mode: luminosity;
  filter: saturate(0);
}
.pie__interior { position: relative; max-width: var(--ancho); margin: 0 auto; }
.pie__columnas { display: flex; }
.pie__columna { display: flex; flex-direction: column; align-items: flex-start; padding: 10px; }
.pie__columna--empresa { width: calc(27.5% - 25px); margin-right: 25px; }
.pie__columna--productos { width: calc(22.461% - 30px); margin-right: 30px; }
.pie__columna--la-empresa, .pie__columna--sede { width: calc(25% - 30px); margin-left: 30px; }
.pie__logo { display: inline-block; margin-bottom: 20px; }
.pie__logo img { display: inline-block; width: 51%; vertical-align: middle; }
.pie__texto { margin: 10px 0 34.4px; }
.pie__texto, .redes--pie, .pie__titulo, .pie__enlaces, .pie__direccion, .pie__telefonos { align-self: stretch; }
.redes--pie { flex-wrap: wrap; gap: 0 12px; }
.redes--pie a {
  width: 45px;
  height: 45px;
  border: 1px solid var(--rojo);
  border-radius: 50%;
  background-color: var(--rojo);
  color: var(--blanco);
}
.redes--pie .icono { width: 15px; height: 15px; fill: var(--blanco); }
.redes--pie a:hover { border-color: var(--blanco); background-color: var(--oscuro); }
.pie__titulo {
  margin-bottom: 20px;
  color: var(--oscuro);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7em;
  text-transform: capitalize;
}
.pie__titulo a { color: var(--oscuro); }
.pie__enlaces { width: 100%; }
.pie__enlaces li { display: flex; }
.pie__enlaces li:not(:last-child) { padding-bottom: 4px; }
.pie__enlaces li:not(:first-child) { margin-top: 4px; }
.pie__enlaces a {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--rojo);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  text-transform: capitalize;
  transition: color .3s;
}
.pie__enlaces a:hover { color: var(--oscuro); }
.pie__direccion { display: flex; align-items: flex-start; margin: -5px 0 20px; }
.pie__direccion .icono { position: relative; top: 8px; width: 14px; height: 14px; margin-right: 3.5px; color: var(--rojo); }
.pie__direccion span, .pie__telefonos span { padding-left: 5px; }
.pie__telefonos { margin-top: -17px; }
.pie__telefonos li { display: flex; align-items: center; }
.pie__telefonos .icono { width: 14px; height: 14px; margin-right: 3.5px; color: var(--rojo); }
.pie__derechos {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--linea);
  text-align: center;
}

/* ---------- WhatsApp ---------- */
.whatsapp {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation: whatsapp-entrada .4s cubic-bezier(.25, 1, .5, 1) both;
  transform-origin: bottom right;
}
.whatsapp--escritorio { right: 15px; bottom: 15px; }
.whatsapp__icono { display: block; width: 50px; height: 50px; pointer-events: none; }
.whatsapp__etiqueta {
  display: none;
  margin: 0 10px;
  padding: 0 16px;
  border-radius: 10px;
  background-color: #25D366;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
}
.whatsapp:hover .whatsapp__etiqueta, .whatsapp__etiqueta.se-oculta { display: block; }
.whatsapp:hover .whatsapp__etiqueta { animation: whatsapp-etiqueta .12s; }
.whatsapp__etiqueta.se-oculta { opacity: 0; transition: opacity .1s; }
@keyframes whatsapp-entrada { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes whatsapp-etiqueta { from { opacity: 0; transform: translateX(6px) scaleX(.6); } to { opacity: 1; transform: none; } }

/* ---------- Catálogo: listado de Productos ---------- */
.catalogo { padding: 60px 20px; }
.catalogo__interior, .ficha__interior, .relacionados__interior { max-width: var(--ancho); margin: 0 auto; }
.catalogo__interior, .relacionados__interior { padding: 10px; }
.migas { margin-bottom: 38px; font-size: 18px; }
.migas a { color: var(--oscuro); }
.migas a:hover { color: var(--rojo); }
.migas--catalogo { margin-bottom: 36.56px; color: #767676; font-size: 16.56px; }
.catalogo__cantidad { width: fit-content; margin-bottom: 18px; }
.grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.grilla--relacionados { gap: 40px 20px; }
.tarjeta-producto { position: relative; min-width: 0; }
.tarjeta-producto a { display: block; color: var(--oscuro); }
/* El color de los enlaces del tema del original al pasar el puntero: no se ve (el nombre tiene el
   suyo), pero lo heredan la foto y el borde. */
.tarjeta-producto a:hover { color: #336; }
.tarjeta-producto img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  border: 1px solid var(--linea);
  border-radius: 20px;
}
.grilla--relacionados .tarjeta-producto img { margin-bottom: 1em; border: 0; border-radius: 0; }
.tarjeta-producto__nombre {
  padding: .5em 0;
  color: var(--oscuro);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5em;
  text-transform: capitalize;
}
.paginacion { margin-top: 40px; text-align: center; }
.paginacion ul { display: inline-block; margin: 1px; white-space: nowrap; border: 1px solid #cfc8d8; border-right: 0; }
.paginacion li { float: left; overflow: hidden; border-right: 1px solid #cfc8d8; }
.paginacion a, .paginacion span {
  display: block;
  min-width: 1em;
  padding: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.paginacion a { background-color: #fff; color: var(--oscuro); }
.paginacion a:hover, .paginacion a:focus { background-color: #fff; color: var(--texto); }
.paginacion span { background-color: #e9e6ed; color: #816f98; }

/* ---------- Ficha de producto ---------- */
.ficha { padding: 60px 20px 30px; }
.ficha__interior { display: flex; }
.ficha__galeria { width: calc(45% - 30px); margin-right: 30px; padding: 10px; }
.ficha__datos { display: flex; flex-direction: column; width: 55%; padding: 10px; }
.galeria { position: relative; margin-bottom: 2em; }
.galeria__foto { position: relative; display: block; overflow: hidden; outline-offset: -2px; }
.galeria__foto img { display: block; width: 100%; height: auto; }
.galeria__foto--ampliable { cursor: default; } /* tapada por la ampliación, como en el original */
/* La lupa de WooCommerce: un círculo y un mango dibujados sobre un botón blanco. */
.galeria__lupa {
  position: absolute;
  top: .5em;
  right: .5em;
  z-index: 99;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background: #fff;
  color: #c36; /* el de los enlaces del tema; el dibujo tiene color propio */
  font-size: 36px;
  cursor: pointer;
  box-sizing: content-box;
}
.galeria__lupa:hover { color: #336; }
.galeria__lupa::before, .galeria__lupa::after { content: ""; position: absolute; display: block; box-sizing: content-box; }
.galeria__lupa::before { top: 9px; left: 9px; width: 10px; height: 10px; border: 2px solid #000; border-radius: 100%; }
.galeria__lupa::after { top: 19px; left: 22px; width: 2px; height: 8px; border-radius: 6px; background: #000; transform: rotate(-45deg); }
/* Foto ampliada que sigue al puntero (como jQuery Zoom en el original). */
.galeria__zoom {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  max-height: none;
  border: none;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
}
.migas, .ficha__titulo { flex: none; }
.ficha__titulo {
  color: var(--oscuro);
  font-size: 39.06px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: capitalize;
}
.ficha__titulo:not(:last-child) { margin-bottom: 20px; }
.ficha__descripcion p { margin-bottom: 14.4px; }
.relacionados { padding: 0 20px 60px; }
.relacionados__titulo {
  margin: 8px 0 16px;
  color: var(--oscuro);
  font-size: 31.25px;
  font-weight: 700;
  line-height: 1.3em;
  text-transform: capitalize;
}

/* ---------- Visor de fotos (como PhotoSwipe en el original) ---------- */
.visor-foto {
  position: fixed;
  inset: 0;
  z-index: 1500;
  overflow: hidden;
  outline: 0;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}
.visor-foto__fondo { position: absolute; inset: 0; background: #000; }
.visor-foto__marco { position: absolute; inset: 0; }
.visor-foto__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}
.visor-foto--raton.visor-foto--ampliable:not(.visor-foto--ampliado) .visor-foto__img { cursor: zoom-in; }
.visor-foto--ampliado .visor-foto__img { cursor: grab; }
.visor-foto--arrastrando .visor-foto__img { cursor: grabbing; }
.visor-foto__barra {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 44px;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
}
.visor-foto--con-barras .visor-foto__barra { background-color: rgba(0, 0, 0, .3); }
/* Hasta 1024 px PhotoSwipe pone su indicador de carga (invisible, 44 px) a la derecha de la barra. */
@media (max-width: 1024px) { .visor-foto__barra { padding-right: 44px; } }
.visor-foto--quieto .visor-foto__barra { opacity: 0; }
.visor-foto__boton {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url(../images/visor-botones.png) 0 0 / 264px 88px no-repeat;
  opacity: .75;
  cursor: pointer;
  transition: opacity .2s;
}
@media (min-resolution: 1.1dppx) { .visor-foto__boton { background-image: url(../images/visor-botones.svg); } }
.visor-foto__boton:hover, .visor-foto__boton:focus { opacity: 1; }
.visor-foto__boton--ampliar { display: none; background-position: -88px 0; }
.visor-foto--raton.visor-foto--ampliable .visor-foto__boton--ampliar { display: block; }
.visor-foto--ampliado .visor-foto__boton--ampliar { background-position: -132px 0; }
.visor-foto__boton--pantalla { background-position: 0 0; }
.visor-foto--pantalla .visor-foto__boton--pantalla { background-position: -44px 0; }
.visor-foto__boton--cerrar { background-position: 0 -44px; }

/* ---------- Visor de video (como el de Elementor: video cuadrado, sin arrancar solo) ---------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, .8);
}
.visor__marco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  line-height: 1.5;
  text-align: center;
  transform: translate(-50%, -50%);
}
.visor__marco iframe {
  width: min(90vh, 90vw);
  height: min(90vh, 90vw);
  border: 0;
  background-color: #000;
}
/* El lightbox de Elementor para un enlace a un video: 16:9, al 85 % del ancho (95 % en el teléfono). */
.visor--ancho .visor__marco iframe { width: 85vw; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .visor--ancho .visor__marco iframe { width: 95vw; } }
.visor__cerrar {
  position: absolute;
  top: 0;
  right: .75em;
  z-index: 2;
  display: flex;
  margin-top: 13px;
  padding: .25em;
  border: 0;
  background: none;
  color: rgba(237, 237, 237, .9);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: .3s;
}
.visor__cerrar svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.visor__cerrar:hover { color: #fff; }

/* ---------- ¿Cuál es tu papel?: Compromiso con el Medio Ambiente ---------- */
.compromiso { padding: 90px 20px 60px; background-color: var(--blanco); }
.compromiso__interior { display: flex; max-width: var(--ancho); margin: 0 auto; }
.compromiso__fotos { display: flex; width: 50%; }
/* Las fotos se ubican contra los bordes del marco; el bloque rojo es el único en el flujo. Como en
   Elementor, el marco mide el 100 % de la columna menos sus márgenes, pero no se achica por debajo
   de su contenido ni del ancho de la columna (a 1025 px y en el teléfono se pasa 20 px). */
.compromiso__marco {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  flex: 0 1 auto;
  width: 100%;
  margin: 10px;
  padding: 60px;
}
.compromiso__foto {
  position: absolute;
  z-index: 5;
  border: 0 solid var(--fondo-claro);
  border-radius: 20px;
  background: 50% / cover no-repeat;
}
.compromiso__foto--mano {
  right: 0;
  bottom: 0;
  width: 480px;
  height: 480px;
  border-width: 0 10px;
  background-image: url(../images/cual-es-tu-papel-mano-hoja-1000x667.jpg);
}
.compromiso__foto--arroyo {
  top: 0;
  left: 0;
  width: 300px;
  height: 310px;
  border-width: 0 10px 10px 0;
  background-image: url(../images/cual-es-tu-papel-arroyo-1000x668.jpg);
}
.compromiso__bloque {
  position: relative;
  flex: 0 1 auto;
  width: 480px;
  height: 480px;
  border-radius: 20px;
  background-color: var(--rojo);
}
.compromiso__arcos {
  position: absolute;
  top: 419px;
  left: -24px;
  z-index: 0;
  display: block;
  width: 150px;
  height: 150px;
  color: var(--linea);
  fill: currentColor;
}
.lateral {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: calc(50% - 60px);
  margin-left: 60px;
  padding: 10px;
}
.compromiso__cabezal { margin-bottom: 10px; }
.interior__titulo {
  margin: 8px 0 10px;
  color: var(--oscuro);
  font-size: 39.06px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: capitalize;
}
.tildes.tildes--circulo { width: auto; max-width: none; margin-bottom: 20px; }
.tildes--circulo .icono { width: 16px; height: 16px; margin-right: 4px; }
/* Columna de texto junto a fotos (.lateral) y fila de botones (.acciones): las comparten
   ¿Cuál es tu papel? y Cuidado del agua. */
.acciones { display: flex; flex-wrap: wrap; align-items: center; }
.acciones .boton + .boton { margin-left: 40px; }

/* ---------- Cuidado del agua ---------- */
.agua { padding: 60px 20px; }
.agua__interior { display: flex; max-width: var(--ancho); margin: 0 auto; }
/* Los adornos se ubican contra el marco; los anchos en % son los de los widgets del original (el
   icono va centrado en su widget y, si no entra, alineado al principio). */
.agua__fotos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  width: 50%;
  padding: 10px;
}
.agua__foto { width: 100%; margin-bottom: 20px; text-align: center; }
.agua__foto img {
  display: inline-block;
  vertical-align: middle;
  -webkit-mask: url(../images/cuidado-del-agua-mascara.svg) 50% 50% / contain no-repeat;
  mask: url(../images/cuidado-del-agua-mascara.svg) 50% 50% / contain no-repeat;
}
.agua__arcos, .agua__puntos, .agua__circulo { position: absolute; display: block; fill: currentColor; }
.agua__arcos { top: 335px; left: 18px; z-index: 100; width: 150px; height: 150px; color: var(--rojo); transform: rotate(270deg); }
.agua__puntos {
  top: 70px;
  left: calc(-3px + max(0px, (24.544% - 100px) / 2));
  z-index: 100;
  width: 100px;
  height: 100px;
  color: var(--oscuro);
  transform: rotate(270deg);
}
.agua__circulo { top: 364px; left: calc(498px + max(0px, (11.641% - 62px) / 2)); z-index: 1; width: 62px; height: 62px; color: var(--rojo); }

/* ---------- Reciclaje: Economía circular ---------- */
.circular { padding: 60px 20px 0; }
.circular__interior { display: flex; max-width: var(--ancho); margin: 0 auto; }
.circular__hoja {
  flex: 0 0 calc(25% - 30px);
  min-height: 421px;
  margin: 10px 20px 10px 10px;
  padding: 10px;
  border-radius: 20px;
  background: url(../images/reciclaje-hoja-1024x1024.jpg) 50% / cover no-repeat;
}
.circular__columna {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 0 0 calc(25% - 10px);
  margin-left: 10px;
  padding: 10px;
  border-radius: 20px;
}
.circular__residuos {
  height: 420px;
  padding: 10px;
  border-radius: 20px 20px 0 0;
  background: url(../images/reciclaje-residuos-1024x1024.jpg) 50% / cover no-repeat;
}
.circular__base { border-radius: 0 0 20px 20px; background-color: #F3ECE6; }
/* El recuadro rojo se sale del bloque beige hacia arriba y a la izquierda, con borde blanco. */
.circular__sello {
  width: 100%;
  margin: -60px 0 60px -60px;
  padding: 40px;
  border: solid var(--blanco);
  border-width: 10px 0 0 10px;
  border-radius: 20px;
  background-color: var(--rojo);
}
.circular__tierra { display: block; width: 70px; height: 70px; margin-bottom: 15px; color: var(--blanco); fill: currentColor; }
.circular__sello-texto {
  color: var(--blanco);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3em;
  text-transform: capitalize;
}
.circular__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  flex: 0 0 calc(50% - 60px);
  min-width: 0;
  margin-left: 60px;
  padding: 10px;
}
.circular__cabezal { margin-bottom: 10px; }
/* Historia: el mismo bloque con otras fotos, la base gris y un contador en el recuadro rojo. */
.circular--historia .circular__hoja { background-image: url(../images/historia-operaria-1000x1500.jpg); }
.circular--historia .circular__residuos { background-image: url(../images/historia-autoelevador-1000x1500.jpg); }
.circular--historia .circular__base { background-color: var(--linea); }
.circular--historia .circular__sello { display: flex; flex-wrap: wrap; padding: 40px 30px; }
.contador {
  display: flex;
  color: var(--blanco);
  font-size: 48.83px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: capitalize;
}
.contador__sufijo { white-space: pre-wrap; }
.circular__sello-pie {
  width: 100%;
  color: var(--blanco);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7em;
  text-transform: capitalize;
}
.tildes.tildes--texto { width: auto; max-width: none; margin-bottom: 20px; }
.tildes--texto li { align-items: flex-start; }
.tildes--texto .icono { width: 16px; height: 16px; margin: 6px 4px 0 0; }
.tildes--texto span { color: var(--texto); font-weight: 400; text-transform: none; }
.tildes--texto strong { font-weight: 700; }

/* ---------- Reciclaje: Hacia un consumo consciente ---------- */
.consciente { margin-top: 120px; padding: 60px 20px; background-color: var(--fondo-claro); }
.consciente__interior { display: flex; flex-wrap: wrap; max-width: var(--ancho); margin: 0 auto; }
.consciente--historia .consciente__foto { background-image: url(../images/historia-deposito-1500x1000.jpg); }
/* Historia: las tres normas ISO debajo, en tres columnas. */
.normas { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 20px; }
.norma { display: flex; flex-direction: column; margin-top: 40px; padding: 10px; } /* flex: el margen del título no se funde */
.norma:nth-child(1) { margin-right: 30px; }
.norma:nth-child(2) { margin-inline: 15px; }
.norma:nth-child(3) { margin-left: 30px; }
.norma img { display: block; width: 60%; margin-bottom: 20px; }
.norma__titulo {
  margin: 8px 0 10px;
  color: var(--oscuro);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.6em;
  text-transform: capitalize;
}
.consciente__texto {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  width: 50%;
  min-width: 0;
  padding: 0 90px 10px 10px;
}
/* La foto sube 6em por encima del bloque gris. */
.consciente__foto {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  width: 50%;
  margin-top: -6em;
  padding: 10px;
  border-radius: 10px;
  background: url(../images/reciclaje-rio-1280x1920.jpg) 50% / cover no-repeat;
}
/* Donde el original pone una animación Lottie que no carga (su archivo responde 403): queda el enlace
   al video, del mismo tamaño y sin nada visible. */
.consciente__video { width: 100%; margin: 140px 0; text-align: center; }
.consciente__video a { color: #c36; } /* el color de los enlaces del tema; no se ve */
.consciente__video a:hover { color: #336; }
.consciente__video span { display: inline-block; width: 20%; }
.consciente__acciones { display: flex; flex-wrap: wrap; align-items: flex-end; }
.consciente__acciones .boton:first-child { margin-top: 25px; }
.consciente__acciones .boton + .boton { margin-left: 40px; }

/* ---------- Encabezado de página con foto (Recetas, notas de Novedades) ---------- */
.portadilla { position: relative; padding: 60px 20px; background-color: var(--oscuro); }
/* La foto, en escala de grises, se mezcla con el fondo oscuro (overlay al 65 %). */
.portadilla::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #171720 50% / cover no-repeat;
  opacity: .65;
  filter: saturate(0);
  mix-blend-mode: overlay;
}
.portadilla--recetas::before { background-image: url(../images/recetas-fondo-1920x1280.jpg); }
.portadilla--novedades::before { background-color: transparent; background-image: url(../images/novedades-fondo-1920x1280.webp); opacity: .3; }
.portadilla__interior {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  max-width: var(--ancho);
  min-height: 230px;
  margin: 0 auto;
  padding: 10px;
}
.portadilla__titulo {
  width: 100%;
  margin-bottom: 20px;
  color: var(--blanco);
  font-size: 39.06px;
  font-weight: 700;
  line-height: 1.2em;
  text-align: center;
  text-transform: capitalize;
}
.portadilla__titulo--grande { font-size: 48.83px; }
.portadilla__migas { display: flex; justify-content: center; align-items: center; }
.portadilla__migas a, .portadilla__migas .portadilla__actual {
  display: block;
  color: var(--rojo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.portadilla__migas span { display: block; margin: 0 10px; color: var(--blanco); line-height: 1; }
.portadilla__migas .portadilla__actual { margin: 0; color: var(--blanco); line-height: 1.8em; }

/* ---------- Nota: foto, fecha y texto (Recetas, notas de Novedades) ---------- */
.nota { padding: 60px 20px; }
.nota__interior { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; margin: 0 auto; padding: 10px; }
.nota__foto { display: block; width: 100%; height: auto; border-radius: 20px; }
.nota__foto--recorte { height: 490px; object-fit: cover; }
.fecha { display: flex; }
.fecha a { display: flex; align-items: center; color: var(--oscuro); }
.fecha .icono { width: 14px; height: 14px; color: var(--rojo); }
.fecha time { padding-left: 5px; }
.nota__texto p { margin-bottom: .8em; }

/* ---------- Novedades: listado de notas (como el de Elementor) ---------- */
.novedades { padding: 60px 20px; }
.novedades__interior { max-width: var(--ancho); margin: 0 auto; padding: 10px; }
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 40px; }
.notas > li { display: flex; } /* cada nota toma el alto de su fila, como en el original */
.tarjeta-nota { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
/* La foto recortada en una caja de proporción fija (0,66; 0,5 en el teléfono), un poco agrandada. */
.tarjeta-nota__foto {
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding-bottom: 66%;
  border-radius: 20px;
  overflow: hidden;
}
.tarjeta-nota__foto img {
  position: absolute;
  top: calc(50% + 1px);
  left: calc(50% + 1px);
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.01) translate(-50%, -50%);
}
.tarjeta-nota__texto { flex-grow: 1; margin-bottom: 20px; }
.tarjeta-nota__titulo {
  margin-bottom: 20px;
  color: var(--oscuro);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7em;
  text-transform: capitalize;
}
.tarjeta-nota__fecha {
  margin-bottom: 20px;
  color: var(--gris-medio);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tarjeta-nota__resumen { margin-bottom: 20px; }
.tarjeta-nota__mas a {
  color: var(--rojo);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  text-transform: capitalize;
}

/* ---------- Formulario de maqueta (Trabajá con nosotros, Contacto), como el de Elementor ---------- */
.consulta { padding: 60px 20px; }
.consulta__interior { display: flex; flex-direction: column; max-width: 1000px; margin: 0 auto; padding: 10px; }
.consulta__interior > .antetitulo { margin-bottom: 20px; }
.cabezal--formulario { margin-bottom: calc(20px + 2%); padding-bottom: 0; }
.cabezal--formulario .cabezal__titulo { margin-bottom: 10px; }
/* Pedido del cliente: como oración, sin la mayúscula en cada palabra que pone el original. */
.cabezal__titulo--oracion { text-transform: none; }
/* Dos columnas con 30 px entre campos; el último margen se descuenta, como en Elementor. */
.formulario__campos { display: flex; flex-wrap: wrap; margin: 0 -15px -30px; }
.formulario__campo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 50%;
  min-height: 1px;
  margin-bottom: 30px;
  padding: 0 15px;
}
.formulario__campo--ancho { width: 100%; }
.formulario input, .formulario textarea {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(116, 116, 116, .22);
  border-radius: 5px;
  background-color: var(--blanco);
  color: var(--texto);
  font: 15px/1.4 "Outfit", sans-serif;
}
.formulario textarea { display: block; padding: 5px 14px; }
/* El campo del archivo queda con su tamaño nativo (sin pasar el ancho de su columna: en el teléfono el
   del original se sale de la pantalla). Su botón toma la letra de la página, como en el original. */
.formulario input[type="file"] { width: auto; min-height: 0; padding: 0; font-size: 16px; line-height: 1.5; }
.formulario ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* la de normalize.css del original */
.formulario input:focus, .formulario textarea:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
/* El lugar del reCAPTCHA v3 del original: no se ve, pero ocupa 1 px. */
.formulario__hueco { width: 100%; min-height: 1px; padding: 0 15px; }
.formulario__envio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 30px;
  padding: 0 15px;
}
.formulario__envio .boton { min-height: 47px; border: 0; white-space: nowrap; cursor: pointer; }
.formulario__envio .boton:hover, .formulario__envio .boton:focus { background-color: var(--oscuro); }
.formulario__estado { margin-top: 20px; color: var(--oscuro); text-align: center; }
.formulario__estado:empty { display: none; }
.formulario__estado--error { color: var(--rojo); }
.formulario__estado--cargando::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 2px solid var(--linea); border-top-color: var(--rojo); border-radius: 50%; animation: girar .8s linear infinite;
}
.formulario__envio .boton:disabled { opacity: .6; cursor: wait; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Contacto ---------- */
.soluciones { padding: 60px 20px; }
.soluciones__interior { display: flex; flex-direction: column; max-width: var(--ancho); margin: 0 auto; padding: 10px; }
.soluciones__interior > .antetitulo { margin-bottom: 20px; }
.cabezal--contacto { margin-bottom: calc(20px + 1%); padding-bottom: 0; }
.cabezal--contacto .cabezal__titulo { margin-bottom: 10px; }
.ayudas { display: flex; }
.ayuda {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: calc(50% - 20px);
  margin: 20px 20px 20px 0;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 90px rgba(0, 0, 0, .1);
}
.ayuda + .ayuda { margin: 20px 0 20px 20px; }
.ayuda--centrada { align-items: center; }
.ayuda__icono { display: block; flex: none; width: 80px; height: 80px; color: var(--rojo); fill: currentColor; }
.ayuda__texto { flex: 1 1 auto; min-width: 0; }
.ayuda__titulo, .dato__titulo {
  color: var(--oscuro);
  font-weight: 700;
  text-transform: capitalize;
}
.ayuda__titulo { margin: 8px 0 10px; font-size: 25px; line-height: 1.6em; }
.ubicacion { padding: 60px 20px; background-color: var(--fondo-claro); }
.ubicacion__interior { display: flex; max-width: var(--ancho); margin: 0 auto; }
.ubicacion__datos { display: flex; flex-direction: column; width: calc(40% - 40px); margin-right: 40px; padding: 10px; }
.ubicacion__datos > .antetitulo { margin-bottom: 20px; }
.ubicacion__cabezal { margin-bottom: 40px; }
.ubicacion__cabezal p { font-size: 20px; line-height: 1.8em; }
/* En el original, junto a cada dato hay un cuadrado rojo que no se ve: su máscara (custom.svg) no
   existe. Queda el lugar. */
.dato { display: flex; }
.dato--telefonos { padding: 20px 0; }
.dato__marca { flex: none; align-self: center; width: 40px; height: 40px; }
.dato__texto { width: 80%; padding-left: 20px; }
.dato__titulo { margin: 8px 0 5px; font-size: 20px; line-height: 1.7em; }
.ubicacion__mapa { display: flex; align-items: center; width: 60%; padding: 10px; }
.mapa { width: 100%; overflow: hidden; border-radius: 10px; }
.mapa iframe { display: block; width: 100%; height: 550px; border: 0; filter: saturate(0); }

/* ---------- Acordeón (como el de Elementor: uno abierto por vez, despliegue de 400 ms) ---------- */
.acordeon__item { border: 1px solid var(--linea); }
.acordeon__item + .acordeon__item { border-top: 0; }
.acordeon__titulo { font-size: 18px; }
.acordeon__titulo button {
  display: block;
  width: 100%;
  padding: 20px;
  border: 0;
  background-color: var(--blanco);
  color: var(--rojo);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  text-align: start;
  cursor: pointer;
}
.acordeon__nombre { text-transform: capitalize; }
.acordeon__titulo button[aria-expanded="true"] { color: var(--oscuro); }
.acordeon__icono { float: right; width: 27px; margin-right: 10px; }
.acordeon__icono svg { display: block; width: 18px; height: 18px; margin-left: auto; fill: currentColor; }
.acordeon__icono .acordeon__abierto, [aria-expanded="true"] .acordeon__icono .acordeon__cerrado { display: none; }
[aria-expanded="true"] .acordeon__icono .acordeon__abierto { display: block; }
.acordeon__contenido { padding: 20px; border-top: 1px solid var(--linea); }
.acordeon__contenido p { margin-bottom: .8em; }

/* ---------- ¿Cuál es tu papel?: Variedad y calidad sobre gris ---------- */
.variedad--gris { background-color: var(--gris-claro); }
.variedad--gris .carrusel { margin: 0; padding: 0; }

/* ---------- ¿Cuál es tu papel?: Instagram (como el feed de Smash Balloon del original) ---------- */
.instagram { display: flex; flex-direction: column; padding: 0 20px; }
.instagram__interior {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: min(100%, var(--ancho));
  margin: 0 auto;
  padding: 70px 10px;
}
.instagram .cabezal { margin-bottom: 0; }
.feed { padding-bottom: 46px; }
.feed__grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; padding: 12px 0; }
/* Los cortes del plugin: 2 columnas hasta 800 px y 1 hasta 480 px. */
@media (max-width: 800px) { .feed__grilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feed__grilla { grid-template-columns: 1fr; } }
.feed__item { min-width: 0; overflow: hidden; transition: all .5s ease; }
/* Las publicaciones que suma «Ver Más» aparecen con un fundido (site.js). */
.feed__item.es-nueva { opacity: 0; }
.feed__foto { position: relative; display: block; color: var(--oscuro); }
.feed__foto:hover { color: #336; } /* el color de los enlaces del tema; no se ve */
.feed__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 20px;
  object-fit: cover;
  transition: transform .5s ease-in-out;
}
.feed__icono {
  position: absolute;
  z-index: 1;
  display: block;
  color: rgba(255, 255, 255, .9);
  fill: currentColor;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .4));
}
.feed__icono--carrusel { top: 12px; right: 12px; width: 24px; height: 24px; }
.feed__icono--video { top: 50%; left: 50%; z-index: 2; width: 42px; height: 48px; margin: -24px 0 0 -19px; color: #fff; }
/* El plugin achica los iconos («sbi_medium») cuando cada foto mide entre 120 y 240 px: con 2
   columnas, en ventanas de 481 a 539 px. */
@media (min-width: 481px) and (max-width: 539.98px) {
  .feed__icono--carrusel { top: 8px; right: 8px; width: 18px; height: 18px; }
  .feed__icono--video { width: 20.125px; height: 23px; margin: -12px 0 0 -9px; }
}
.feed__acciones { margin-top: 43px; text-align: center; }
.feed__boton {
  display: inline-block;
  margin: 5px 0 0;
  padding: 12px 24px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: top;
  cursor: pointer;
  transition: all .1s ease-in;
}
.feed__boton[hidden] { display: none; }
/* El CSS a mano del original fija el ancho de los dos textos (72,34 px, medido de «Ver Más»). */
.feed__boton span {
  display: block;
  width: 72.3438px;
  height: 28.7969px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  text-transform: capitalize;
  white-space: nowrap;
}
.feed__boton--mas { background: rgb(212, 1, 115); text-transform: capitalize; white-space: nowrap; }
.feed__boton--mas:hover, .feed__boton--mas:focus { box-shadow: inset 0 0 20px 20px #F70087; outline: none; }
.feed__boton--seguir {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  background: rgb(24, 119, 242);
}
.feed__boton--seguir:hover, .feed__boton--seguir:focus { box-shadow: inset 0 0 10px 20px #0095f6; outline: none; }
.feed__boton--seguir svg { display: block; width: 13.125px; height: 15px; margin: 0 7px -1px 0; fill: currentColor; }

/* ---------- Entradas animadas ---------- */
.con-animaciones [data-entrada]:not(.es-visible) { visibility: hidden; }
.con-animaciones [data-entrada].es-visible { animation-duration: 1.25s; animation-fill-mode: both; }
[data-entrada="desde-izquierda"].es-visible { animation-name: desde-izquierda; }
[data-entrada="desde-abajo"].es-visible { animation-name: desde-abajo; }
[data-entrada="acercar"].es-visible { animation-name: acercar; }
[data-entrada="aparecer"].es-visible { animation-name: aparecer; }
/* animated-slow de Elementor. */
.con-animaciones [data-entrada][data-duracion="lenta"].es-visible { animation-duration: 2s; }
@keyframes desde-izquierda { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
/* Las tarjetas suben desde el alto de su columna en el original (tarjeta + márgenes): --extra. */
@keyframes desde-abajo { from { opacity: 0; transform: translate3d(0, calc(100% + var(--extra, 0px)), 0); } to { opacity: 1; transform: none; } }
@keyframes acercar { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes contenido-diapositiva { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .con-animaciones [data-entrada].es-visible { animation: none; }
}

/* ==================== Tableta (≤ 1024 px) ==================== */
@media (max-width: 1024px) {
  .barra__interior { flex-wrap: wrap; }
  .principal { padding: 20px; }
  .principal__logo { width: 50%; }
  .principal__logo .logo img { width: 39%; }
  .principal__navegacion { width: 50%; }
  .menu__boton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 7px;
    border: 0;
    border-radius: 3px;
    background-color: var(--fondo-claro);
    color: var(--oscuro);
    cursor: pointer;
  }
  .menu__boton svg { display: block; width: 28px; height: 28px; fill: currentColor; }
  .menu__boton:hover, .menu__boton:focus { background-color: var(--oscuro); color: var(--blanco); }
  .menu__boton .menu__cerrar, .menu.esta-abierto .menu__abrir { display: none; }
  .menu.esta-abierto .menu__cerrar { display: block; }
  .menu { position: relative; }
  .menu__lista {
    position: absolute;
    top: 100%;
    left: var(--menu-izquierda, 0);
    display: block;
    width: var(--menu-ancho, 100vw);
    max-height: 0;
    margin-top: 29px;
    overflow: hidden;
    visibility: hidden;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1);
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height .3s, transform .3s, visibility 0s .3s;
  }
  .menu.esta-abierto .menu__lista {
    max-height: 10000px;
    visibility: visible;
    transform: scaleY(1);
    transition: max-height .3s, transform .3s, visibility 0s;
  }
  .menu__lista > li { display: block; }
  .menu__lista > li:not(:last-child) { border-bottom: 1px solid var(--linea); }
  .menu__lista > li > a, .submenu a {
    padding: 25px 30px;
    color: #33373D;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    text-transform: none;
    white-space: normal;
  }
  .menu__lista > li > a::before { display: none; }
  .menu__lista > li > a:hover, .menu__lista > li > a:focus, .menu__lista > li.esta-abierto > a,
  .menu__lista a[aria-current="page"] { background-color: var(--rojo); color: var(--blanco); }
  .submenu { position: static; box-shadow: none; }
  .submenu a { line-height: 20px; }

  .portada__diapositivas { height: 650px; }

  .empresa { margin-bottom: -50px; }
  .empresa__interior { flex-direction: column-reverse; gap: 0; }
  .empresa__texto { width: 100%; margin: 0 0 40px; }
  .empresa__foto { width: 540px; min-height: 5px; }
  .empresa__bloque { width: 557px; min-height: 450px; }
  .empresa__rombos { top: 366px; left: 517px; }

  .pensado { padding: 90px 20px 60px; }
  .tarjetas, .certificados { flex-wrap: wrap; }
  .tarjeta, .tarjeta:first-child, .tarjeta:last-child,
  .certificado, .certificado:first-child, .certificado:last-child { flex: 0 0 100%; margin: 20px 0; }
  .tarjeta:first-child, .certificado:first-child { margin: 0 0 20px; }
  .tarjeta:first-child { --extra: 20px; }

  .pie__columnas { flex-wrap: wrap; }
  .pie__columna--empresa { width: 100%; margin-right: 0; }
  .pie__columna--productos { width: 50%; margin: 40px 0 0; }
  .pie__columna--la-empresa { width: 50%; margin: 40px 0 0; }
  .pie__columna--sede { width: 100%; margin: 40px 0 0; }
  .pie__logo img { width: 25%; }

  .grilla { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
  .ficha__interior { flex-wrap: wrap; }
  .ficha__galeria, .ficha__datos { width: 100%; margin-right: 0; }
  .grilla--relacionados .tarjeta-producto__nombre { font-size: 16px; }

  /* ¿Cuál es tu papel?: el texto pasa arriba y las fotos se agrandan con la ventana. */
  .compromiso { padding: 60px 20px; }
  .compromiso__interior { flex-wrap: wrap; }
  .compromiso__fotos { order: 2; width: 100%; }
  .lateral { order: 1; width: 100%; margin: 0 0 40px; }
  /* Cuidado del agua: el texto pasa arriba; la foto, a su tamaño natural y centrada. */
  .notas { grid-template-columns: 1fr; }
  .agua__interior { flex-wrap: wrap; }
  .agua__fotos { order: 2; width: 100%; margin-top: 25px; }
  .agua__arcos { top: 351px; left: 6px; }
  .agua__puntos { top: 32px; left: calc(-10px + max(0px, (24.544% - 100px) / 2)); }
  .agua__circulo { top: 381px; left: calc(570px + max(0px, (11.641% - 62px) / 2)); }
  .compromiso__foto--mano { width: 75%; height: 75vh; }
  .compromiso__foto--arroyo { width: 50%; height: calc(50vh + 10px); }
  .compromiso__arcos { top: 386px; left: -34px; z-index: 100; width: 168px; height: 168px; }
  .instagram__interior { padding-top: 40px; }

  /* Reciclaje: el texto pasa arriba y las dos fotos quedan debajo, invertidas. */
  .circular { padding: 60px 20px; }
  .circular__interior { flex-wrap: wrap; }
  .circular__texto { order: 1; flex-basis: 100%; margin: 0 0 40px; }
  .circular__columna { order: 2; flex-basis: calc(50% - 20px); margin: 0 20px 0 0; }
  .circular__hoja { order: 3; flex-basis: calc(50% - 40px); min-height: 520px; margin: 10px 10px 10px 30px; }
  .circular__residuos { height: 320px; }
  .circular__sello { width: auto; margin: 0 -90px 60px 140px; }
  .circular__sello-texto { font-size: 28px; }
  .consciente { margin-top: 0; }
  .consciente__interior { flex-wrap: wrap; margin: 10px; }
  .consciente__texto { width: 100%; padding: 0 0 40px; }
  .consciente__foto { width: 100%; margin-top: 0; }
  .consciente__video { margin: 120px 0; }

  /* Contacto: el bloque de cada tarjeta baja 20 px; los datos se centran junto al mapa, que se alarga. */
  .ayuda { padding-top: 60px; }
  .ubicacion__datos { justify-content: center; }
  .mapa iframe { height: 753px; }
}

/* ==================== Teléfono (≤ 767 px) ==================== */
@media (max-width: 767px) {
  .barra { display: none; }
  .principal__logo { width: 80%; text-align: start; }
  .principal__logo > .logo { margin: 0; }
  .principal__logo .logo img { width: 48%; }
  .principal__navegacion { width: 20%; }
  .menu { margin: 0; }
  .boton--contacto { display: none; }

  .diapositiva__interior { padding: 30px; }
  .diapositiva__titulo { font-size: 38px; }
  .diapositiva__texto:last-child { margin-bottom: 15px; }

  .empresa { min-height: 491px; margin-bottom: -30px; }
  .empresa__interior { flex-wrap: wrap; padding-bottom: 90px; }
  .empresa__fotos { margin: 10px 10px -270px; }
  .empresa__foto { width: 42vh; min-height: 0; }
  .empresa__foto img { height: 245px; }
  .empresa__bloque { left: 0; width: 100px; min-height: 241px; }
  .empresa__video { top: 28%; left: 21%; width: 240px; min-height: 240px; }
  .empresa__puntos { top: 30px; left: -26px; width: 100px; height: 100px; }
  .empresa__titulo { font-size: 33.18px; }
  .empresa__descripcion { margin-bottom: 20px; }
  .empresa__listas { flex-wrap: wrap; }
  .tildes { width: 100%; max-width: 100%; margin-bottom: 10px; }
  .tildes + .tildes { margin-bottom: 30px; }
  .empresa__accion { z-index: 5; }
  .empresa__rombos { top: 744px; left: 191px; width: 115px; height: 115px; }

  .cabezal { margin: 0 0 20px; padding-bottom: 20px; }
  .variedad .cabezal { margin-bottom: 0; }
  .tarjetas { margin-bottom: 0; }
  .cabezal__titulo { font-size: 33.18px; }
  .temas__interior { flex-wrap: wrap; }
  .tema__titulo { font-size: 27.65px; }
  .tarjeta__titulo { font-size: 23.04px; }
  .certificado__titulo { font-size: 23.04px; }

  .pie__columna--productos, .pie__columna--la-empresa { width: 100%; }
  .pie__titulo { font-size: 19.2px; }

  .grilla { grid-template-columns: repeat(2, 1fr); }
  .ficha__titulo { font-size: 33.18px; }
  .relacionados__titulo { font-size: 27.65px; }
  .grilla--relacionados .tarjeta-producto__nombre { font-size: 17px; }

  /* ¿Cuál es tu papel? */
  .compromiso__foto--mano { height: 50vh; }
  .compromiso__foto--arroyo { height: calc(25vh + 10px); }
  .compromiso__bloque { height: 250px; }
  .compromiso__arcos { top: 196px; left: -23px; width: 142px; height: 142px; }
  .interior__titulo { font-size: 33.18px; }
  .acciones .boton + .boton { margin: 40px 0 0; }
  /* Formulario: un campo por renglón y el botón a todo el ancho */
  .formulario__campo { width: 100%; }
  .cabezal--formulario { margin-bottom: 40px; padding-bottom: 0; }
  .formulario__envio .boton { flex-basis: 100%; }
  /* Contacto: tarjetas apiladas con el ícono arriba; datos y mapa, uno debajo del otro. */
  .ayudas { flex-direction: column; }
  .ayuda { flex-direction: column; width: 100%; margin: 0 0 20px; padding: 50px 30px 40px; }
  .ayuda + .ayuda { margin: 20px 0 0; }
  .ayuda--centrada { align-items: flex-start; }
  .ayuda__titulo { font-size: 23.04px; }
  .dato__titulo { font-size: 19.2px; }
  .ubicacion__interior { flex-wrap: wrap; }
  .ubicacion__datos { width: 100%; margin: 0 0 40px; }
  .ubicacion__mapa { width: 100%; }
  .mapa iframe { height: 280px; }
  /* Encabezado de página con foto */
  .portadilla__titulo { font-size: 33.18px; }
  .portadilla__titulo--grande { font-size: 39.81px; }
  .portadilla__migas a, .portadilla__migas .portadilla__actual { margin: 10px 0; }
  .tarjeta-nota__foto { padding-bottom: 50%; }
  .tarjeta-nota__titulo { font-size: 19.2px; }
  .portadilla__migas span { margin: 10px; }
  /* Cuidado del agua: la foto ocupa todo el ancho y los adornos se achican. */
  .agua { padding: 60px 20px 30px; }
  .agua__fotos { padding: 0; }
  .agua__foto img { width: 100%; margin-top: 2px; }
  .agua__arcos { top: 143px; left: -7px; width: 100px; height: 100px; }
  .agua__puntos { top: -9px; left: calc(3px + max(0px, (24.544% - 62px) / 2)); width: 62px; height: 62px; }
  .agua__circulo { top: 131px; left: calc(251px + max(0px, (11.641% - 32px) / 2)); z-index: 200; width: 32px; height: 32px; }

  /* Historia: el contador y los ISO, apilados */
  .contador { font-size: 39.81px; }
  .circular__sello-pie { font-size: 19.2px; }
  .normas { grid-template-columns: 1fr; }
  .norma:nth-child(1) { margin: 0 0 20px; }
  .norma:nth-child(2), .norma:nth-child(3) { margin: 20px 0; }
  .norma__titulo { font-size: 23.04px; }
  /* Reciclaje */
  .circular__columna { flex-basis: 100%; margin: 0 0 20px; }
  .circular__hoja { flex-basis: calc(100% - 20px); min-height: 320px; margin: 20px 10px 10px; }
  .circular__sello { margin: -60px 0 60px 60px; padding: 40px 20px; }
  .circular__sello-texto { font-size: 22px; }
  .consciente { padding: 60px 20px 30px; }
  .consciente__foto { margin-bottom: 20px; }
  .consciente__video { margin: 70px 0; }
  .consciente__video span { width: 50%; }
  .consciente__acciones .boton + .boton { margin: 40px 0 0; }
}