/* ============================================================
   DÚO PACK INDUSTRIAL — estilos.css
   Estética: industrial-técnico premium (ficha técnica elevada)
   Mobile-first · Paleta del logo: navy #16355e + naranja #f07f13
   ============================================================ */

:root {
  --azul:        #16355e;
  --azul-osc:    #0d2242;
  --azul-tinta:  #1c4a86;
  --naranja:     #f07f13;
  --naranja-osc: #d96c05;
  --crema:       #f6f1e7;
  --papel:       #fbf9f4;
  --blanco:      #ffffff;
  --tinta:       #1d2431;
  --tinta-suave: #4d5a6e;
  --linea:       #dcd4c4;
  --wa:          #1fb355;
  --wa-osc:      #178f44;

  --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* El logo manda el alto del header: ancho / 2.3333 (proporción del logo) + padding + borde */
  --ancho-logo: clamp(215px, 28vw, 280px);
  --alto-topbar: calc(var(--ancho-logo) / 2.3333 + 1rem + 3px);
  --radio: 10px;
  --sombra: 0 18px 45px -18px rgba(13, 34, 66, .35);
  --transicion: .28s cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-topbar) + 1rem); }

body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

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

/* Recorta desbordes horizontales de slides y reveals laterales sin crear scroll */
main { overflow-x: clip; }

.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--naranja); color: var(--blanco);
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Tipografía base ---------- */
h1, h2, h3 {
  font-family: var(--f-display);
  line-height: 1.1;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 6.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 3.2vw, 1.4rem); font-weight: 700; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: .9rem;
}
.eyebrow::before { content: "// "; opacity: .6; }
.eyebrow--dark { color: var(--naranja-osc); }

/* ---------- Botones (área táctil ≥ 44px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.5rem;
  font-family: var(--f-display);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--wa { background: var(--wa); color: var(--blanco); box-shadow: 0 10px 24px -10px rgba(31, 179, 85, .55); }
.btn--wa:hover { background: var(--wa-osc); }

.btn--naranja { background: var(--naranja); color: var(--blanco); box-shadow: 0 10px 24px -10px rgba(240, 127, 19, .6); }
.btn--naranja:hover { background: var(--naranja-osc); }

.btn--mail { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn--mail:hover { background: var(--azul); color: var(--blanco); }

.btn--ghost { background: transparent; color: var(--blanco); border: 2px solid rgba(255, 255, 255, .55); }
.btn--ghost:hover { border-color: var(--naranja); color: var(--naranja); }

.btn--xl { font-size: 1.05rem; padding: 1rem 2rem; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  /* Línea azul de marca: delimita el sticky sobre las secciones de fondo claro */
  border-bottom: 3px solid var(--azul);
}
.topbar__in {
  width: min(100% - 1.6rem, 82rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .5rem;
}
.topbar__logo { display: block; flex: 0 0 auto; }
.topbar__logo img { width: var(--ancho-logo); height: auto; }

.nav {
  position: fixed; inset: 0; top: var(--alto-topbar); z-index: 99;
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--blanco);
  padding: 1.5rem;
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  transition: clip-path var(--transicion), visibility 0s var(--transicion);
}
.nav.abierto { clip-path: inset(0); visibility: visible; transition: clip-path var(--transicion); }
.nav a {
  font-family: var(--f-display);
  font-size: 1.4rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--azul); text-decoration: none;
  padding: .8rem .5rem;
  border-bottom: 1px solid var(--crema);
}
.nav a:hover, .nav a.actual { color: var(--naranja); }
.nav a.nav__cta {
  margin-top: 1rem;
  background: var(--naranja);
  color: var(--blanco);
  text-align: center; border-radius: 6px; border-bottom: none;
}
.nav a.nav__cta:hover { background: var(--naranja-osc); color: var(--blanco); }

.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 11px;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 3px; background: var(--azul); border-radius: 2px; transition: var(--transicion); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(90rem 40rem at 110% -10%, rgba(28, 74, 134, .55), transparent 60%),
    linear-gradient(160deg, var(--azul-osc) 0%, var(--azul) 65%);
  color: var(--blanco);
  overflow: hidden;
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(4.5rem, 10vw, 7rem);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
}
.hero__in { position: relative; display: grid; gap: 2.5rem; }
.hero h1, .hero .hero__h1 { font-size: clamp(2rem, 6.6vw, 3.4rem); font-weight: 800; color: var(--blanco); max-width: 14ch; }
.hero h1.h1--portada { max-width: 22ch; font-size: clamp(1.55rem, 5vw, 2.7rem); }
.hero h1 em, .hero .hero__h1 em { font-style: normal; color: var(--naranja); }
.hero__sub { margin-top: 1.1rem; max-width: 46ch; font-size: 1.06rem; color: rgba(255, 255, 255, .85); }
.hero__sub strong { color: var(--blanco); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-top: 1.6rem; }
.hero__chips li {
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .06em;
  padding: .45rem .8rem;
  border: 1px dashed rgba(255, 255, 255, .4);
  border-radius: 4px;
  color: rgba(255, 255, 255, .9);
}
.hero__media { position: relative; justify-self: center; max-width: 34rem; }
.hero__media img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.hero__stamp {
  position: absolute; right: .4rem; top: -1.2rem;
  transform: rotate(6deg);
  background: var(--naranja); color: var(--blanco);
  font-family: var(--f-display); font-size: .85rem; font-weight: 700;
  line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; text-align: center;
  padding: .85rem 2.2rem;
  clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
}
.hero__stamp b { font-size: 1.15rem; }
.hero__cut {
  position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(2.2rem, 6vw, 4.5rem);
  background: var(--papel);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* ---------- Barra de stats ---------- */
.stats { background: var(--papel); padding: 1.2rem 0 0; }
.stats__in {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.stat { background: var(--papel); padding: 1.2rem 1rem; text-align: center; }
.stat b {
  display: block;
  font-family: var(--f-display); font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 700;
  color: var(--naranja-osc); line-height: 1;
}
.stat span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.seccion--crema {
  background: var(--crema);
  clip-path: polygon(0 0, 100% clamp(1.5rem, 4vw, 3rem), 100% 100%, 0 100%);
  padding-top: clamp(5rem, 12vw, 8.5rem);
}
.seccion__head { max-width: 42rem; margin-bottom: clamp(2.2rem, 6vw, 3.5rem); }
.seccion__head p:not(.eyebrow) { margin-top: .9rem; color: var(--tinta-suave); }

/* ---------- Productos línea nueva ---------- */
.prods { display: grid; gap: clamp(2.5rem, 7vw, 4.5rem); }

.prod {
  display: grid; gap: 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.prod__media {
  position: relative;
  display: grid; place-items: center;
  min-height: 240px;
  padding: 2.5rem 1.5rem 1.5rem;
  background:
    radial-gradient(28rem 16rem at 50% 115%, rgba(240, 127, 19, .16), transparent 70%),
    linear-gradient(175deg, var(--crema) 0%, #efe6d4 100%);
}
.prod__media img { max-width: min(100%, 26rem); filter: drop-shadow(0 22px 22px rgba(29, 36, 49, .3)); }
.prod__num {
  position: absolute; left: .6rem; top: -.8rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(5rem, 12vw, 7rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(22, 53, 94, .22);
  user-select: none;
}
.hex {
  position: absolute; right: 1rem; top: 1rem;
  display: grid; place-items: center;
  min-width: 92px; min-height: 54px;
  padding: .4rem .9rem;
  background: var(--naranja); color: var(--blanco);
  font-family: var(--f-display); font-size: .92rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; text-align: center;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  transform: rotate(4deg);
}
.prod__body { padding: 0 1.4rem 1.6rem; }
.prod__body > p { margin-top: .7rem; color: var(--tinta-suave); font-size: .97rem; }

/* Ficha técnica */
.ficha {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.2rem;
  font-size: .92rem;
}
.ficha caption {
  caption-side: top; text-align: left;
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--naranja-osc);
  padding-bottom: .5rem;
}
.ficha caption::before { content: "▸ "; }
.ficha th, .ficha td { padding: .55rem .25rem; border-bottom: 1px solid var(--crema); vertical-align: top; }
.ficha th {
  text-align: left; font-family: var(--f-mono); font-weight: 500;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); width: 42%;
}
.ficha td { font-weight: 500; color: var(--tinta); }

.prod__cta { display: grid; gap: .7rem; margin-top: 1.4rem; }

/* ---------- Recicladas ---------- */
.recs { display: grid; gap: 1.5rem; }
.rec {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.rec:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.rec > img { width: 100%; background: #fdf5e9; }
.rec__body { padding: 1.2rem 1.3rem 1.4rem; }
.rec__body ul { list-style: none; margin-top: .6rem; }
.rec__body li {
  font-size: .92rem; color: var(--tinta-suave);
  padding: .3rem 0 .3rem 1.2rem;
  position: relative;
}
.rec__body li::before { content: "▸"; position: absolute; left: 0; color: var(--naranja); }
.rec__body > p { margin-top: .6rem; color: var(--tinta-suave); font-size: .95rem; }
.rec__cta { display: flex; gap: .6rem; margin-top: 1rem; }
.miniwa, .minimail {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 .5rem;
  font-family: var(--f-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; border-radius: 6px;
  transition: var(--transicion);
}
.miniwa { background: var(--wa); color: var(--blanco); }
.miniwa:hover { background: var(--wa-osc); }
.minimail { border: 2px solid var(--azul); color: var(--azul); }
.minimail:hover { background: var(--azul); color: var(--blanco); }
.rec--cta {
  display: grid; align-content: center;
  background: var(--azul);
  border-color: var(--azul);
}
.rec--cta h3 { color: var(--blanco); }
.rec--cta p { color: rgba(255, 255, 255, .8); }
.rec--cta .btn { margin-top: 1.1rem; }

/* ---------- Artículos para empaque ---------- */
.emps { display: grid; gap: 1.3rem; }
.emp {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.emp:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.emp > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}
.emp__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
.emp__body p { margin-top: .45rem; font-size: .92rem; color: var(--tinta-suave); flex: 1; }
.emp__cta { display: flex; gap: .6rem; margin-top: 1rem; }
.btn-espec {
  flex: 1.4;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 .5rem;
  background: var(--azul); color: var(--blanco);
  border: 0; border-radius: 6px;
  font-family: var(--f-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer;
  transition: var(--transicion);
}
.btn-espec:hover { background: var(--azul-tinta); }
.emp__cta .miniwa { flex: 1; }

/* ---------- Modals de especificaciones ---------- */
.modal {
  margin: auto;
  width: min(92vw, 34rem);
  max-height: 88dvh;
  overflow-y: auto;
  border: 0; border-radius: 12px;
  border-top: 5px solid var(--naranja);
  padding: 1.8rem 1.6rem 1.6rem;
  background: var(--blanco); color: var(--tinta);
}
.modal::backdrop { background: rgba(13, 34, 66, .72); backdrop-filter: blur(3px); }
.modal > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}
.modal > img + h3 { margin-top: 1rem; }
.modal[open] { animation: entraArriba .35s cubic-bezier(.4, 0, .2, 1); }
.modal > p { margin-top: .6rem; color: var(--tinta-suave); font-size: .96rem; }
.modal__sub {
  margin-top: 1.1rem;
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--naranja-osc);
}
.modal__sub::before { content: "▸ "; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin-top: .7rem; padding: 0; }
.chips li {
  font-family: var(--f-mono); font-size: .8rem;
  padding: .38rem .7rem;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: 4px;
  color: var(--tinta);
}
.modal__cta { display: grid; gap: .7rem; margin-top: 1.5rem; }
.modal__cerrar {
  position: absolute; right: .8rem; top: .8rem;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, .9); border: 0; border-radius: 50%;
  box-shadow: 0 1px 5px rgba(13, 34, 66, .18);
  font-size: 1.15rem; color: var(--tinta-suave);
  cursor: pointer;
  transition: var(--transicion);
}
.modal__cerrar:hover { background: var(--crema); color: var(--tinta); }

/* ---------- A la medida ---------- */
.medida { background: var(--azul-osc); color: var(--blanco); padding: clamp(3.5rem, 9vw, 6.5rem) 0; position: relative; overflow: hidden; }
.medida::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.medida__in { position: relative; display: grid; gap: 2.5rem; }
.medida h2 { color: var(--blanco); }
.medida__copy > p { margin-top: 1rem; color: rgba(255, 255, 255, .82); }
.medida__media { position: relative; }
.medida__media img { border-radius: var(--radio); box-shadow: 0 25px 50px -20px rgba(0, 0, 0, .6); }
.medida__badge {
  position: absolute; left: -.5rem; bottom: -1.2rem;
  background: var(--naranja); color: var(--blanco);
  font-family: var(--f-display); font-size: 1rem; font-weight: 600;
  line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; text-align: center;
  padding: .9rem 1.1rem;
  clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
  transform: rotate(-5deg);
}
.medida__badge b { font-size: 1.25rem; }
/* Variante: intro de artículos de empaque (imagen recortada flotante, a la derecha en desktop) */
.medida--emp .medida__media img {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .55));
}
.medida--emp .medida__badge { left: auto; right: -.5rem; transform: rotate(5deg); }

.caps { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.caps dt {
  font-family: var(--f-display); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--naranja);
}
.caps dt::before { content: "▸ "; }
.caps dd { color: rgba(255, 255, 255, .78); font-size: .95rem; margin-left: 1.1rem; }
.medida .btn { margin-top: 1.8rem; }

/* ---------- Certificación ---------- */
.cert { background: var(--papel); padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.cert__in { display: grid; gap: 2.5rem; }
.cert__copy > p { margin-top: 1rem; color: var(--tinta-suave); }
.cert__copy .btn { margin-top: 1.6rem; }
.ficha--invert { max-width: 34rem; }
.cert__media { position: relative; }
.cert__media img { border-radius: var(--radio); box-shadow: var(--sombra); }
.cert__media figcaption {
  margin-top: .8rem;
  font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .08em; color: var(--tinta-suave);
}
.cert__media figcaption::before { content: "// "; color: var(--naranja); }

/* ---------- Por qué ---------- */
.porque { background: var(--crema); padding: clamp(3.5rem, 9vw, 6rem) 0; }
.porque__kicker {
  font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 2rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px dashed var(--linea);
}
.porque__kicker::before { content: "// "; color: var(--naranja); }
.porque__kicker:first-of-type { margin-top: 0; }
.porque__grid { display: grid; gap: 1.3rem; }
.pq {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--naranja);
  border-radius: var(--radio);
  padding: 1.5rem 1.4rem;
}
.pq b {
  font-family: var(--f-mono); font-size: .8rem;
  letter-spacing: .2em; color: var(--naranja-osc);
}
.pq h3 { margin-top: .4rem; }
.pq p { margin-top: .5rem; color: var(--tinta-suave); font-size: .94rem; }

/* ---------- Cierre / CTA final ---------- */
.cierre {
  position: relative;
  background:
    radial-gradient(70rem 35rem at -10% 110%, rgba(240, 127, 19, .22), transparent 60%),
    linear-gradient(200deg, var(--azul) 0%, var(--azul-osc) 70%);
  color: var(--blanco);
  padding: clamp(4rem, 10vw, 7rem) 0;
  clip-path: polygon(0 clamp(1.5rem, 4vw, 3rem), 100% 0, 100% 100%, 0 100%);
}
.cierre__in { text-align: center; display: grid; justify-items: center; }
.cierre h2 { color: var(--blanco); }
.pasos {
  display: grid; gap: .8rem;
  list-style: none;
  margin: 2rem 0 2.2rem;
}
.pasos li {
  display: flex; align-items: center; gap: .8rem;
  font-size: 1.02rem; color: rgba(255, 255, 255, .88);
  text-align: left;
}
.pasos b {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; flex: 0 0 auto;
  background: var(--naranja); color: var(--blanco);
  font-family: var(--f-display); font-size: 1.15rem;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.cierre__cta { display: flex; flex-direction: column; gap: 1rem; width: min(100%, 26rem); }
.cierre__cat {
  margin-top: 1.8rem;
  color: rgba(255, 255, 255, .85);
  font-family: var(--f-mono); font-size: .85rem; letter-spacing: .05em;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, .5);
  padding-bottom: .2rem;
}
.cierre__cat:hover { color: var(--naranja); border-color: var(--naranja); }

/* ---------- Footer ---------- */
.pie { background: var(--azul-osc); color: rgba(255, 255, 255, .78); padding: 3rem 0 0; }
.pie__in { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
/* El logo va recortado (logo-duopack-blanco-v2): el original traía 57% de
   aire vertical y por eso el texto se veía despegado. */
.pie__marca img { width: 195px; }
.pie__marca p { margin-top: .85rem; font-size: .92rem; max-width: 30ch; line-height: 1.6; }
.pie__zonas { display: inline-block; margin-top: .55rem; color: rgba(255, 255, 255, .62); }
/* align-content:start — si no, las filas se estiran al alto de la columna
   más larga y los enlaces quedan despegados entre sí. */
.pie__nav { display: grid; gap: .5rem; align-content: start; }
.pie__nav a, .pie__contacto a {
  color: rgba(255, 255, 255, .85); text-decoration: none;
  font-size: .95rem;
  display: inline-flex; align-items: center; min-height: 44px;
}
.pie__dir {
  margin-top: .7rem; font-size: .92rem; line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}
.pie__nav a:hover, .pie__contacto a:hover { color: var(--naranja); }
.pie__contacto { display: grid; gap: .5rem; align-content: start; }

/* ---------- Redes sociales en el pie ---------- */
.pie__redes { display: flex; gap: .6rem; margin-top: 1.2rem; }
.pie__redes a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  transition: var(--transicion);
}
.pie__redes a:hover {
  background: var(--naranja); border-color: var(--naranja); color: var(--blanco);
}
.pie__redes a:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 1.2rem;
  text-align: center;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
}

/* ---------- FAB WhatsApp ---------- */
.fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 58px; padding: 0 1.35rem 0 1.1rem;
  background: var(--wa); color: var(--blanco);
  border-radius: 999px;
  box-shadow: 0 12px 28px -8px rgba(23, 143, 68, .65);
  text-decoration: none;
  transition: transform var(--transicion), background var(--transicion);
}
.fab:hover { transform: scale(1.05); background: var(--wa-osc); }
.fab:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }
.fab svg { flex: 0 0 auto; }
.fab__txt {
  font-family: var(--f-display); font-size: .88rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
/* En pantallas angostas el flotante vuelve a ser círculo: con texto
   tapaba el contenido de las tarjetas al ir bajando. */
@media (max-width: 599px) {
  .fab { width: 58px; padding: 0; justify-content: center; border-radius: 50%; }
  .fab__txt { display: none; }
}

/* ---------- Hero slider ---------- */
.hero__slides { position: relative; display: grid; }
.hero__slides > .slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
  pointer-events: none;
}
.hero__slides > .slide.activa {
  opacity: 1; transform: none;
  visibility: visible; pointer-events: auto;
}
.hero__slides > .slide.saliente { transform: translateX(-48px); }

.hero__ctrl {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.8rem;
}
.hero__flecha {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  color: var(--blanco);
  font-size: 1.7rem; line-height: 1;
  cursor: pointer;
  transition: var(--transicion);
}
.hero__flecha:hover { border-color: var(--naranja); color: var(--naranja); }
.hero__dots { display: flex; gap: .6rem; }
.dot {
  width: 34px; height: 8px;
  padding: 0; border: 0; border-radius: 4px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: var(--transicion);
}
.dot:hover { background: rgba(255, 255, 255, .55); }
.dot.activa { background: var(--naranja); }

.hero__stamp--emp { background: var(--azul-tinta); }

/* ---------- Entrada del hero al cargar ---------- */
@keyframes entraArriba { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes entraMedia  { from { opacity: 0; transform: translateY(30px) scale(.95); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: entraArriba .7s cubic-bezier(.4, 0, .2, 1) backwards; }
.hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__copy > *:nth-child(2) { animation-delay: .15s; }
.hero__copy > *:nth-child(3) { animation-delay: .25s; }
.hero__copy > *:nth-child(4) { animation-delay: .35s; }
.hero__copy > *:nth-child(5) { animation-delay: .45s; }
.hero__media { animation: entraMedia .9s cubic-bezier(.4, 0, .2, 1) .3s backwards; }

/* ---------- Reveal on scroll ----------
   El estado oculto solo aplica con JS activo (html.js);
   sin JS todo queda visible. --d = retraso de cascada por elemento. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.4, 0, .2, 1) var(--d, 0s);
}
.js .reveal--img { transform: translateY(28px) scale(.94); }
.js .reveal--izq { transform: translateX(-40px); }
.js .reveal--der { transform: translateX(40px); }
.js .reveal.vis { opacity: 1; transform: none; }
.js .rec.reveal.vis:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal--img, .js .reveal--izq, .js .reveal--der { opacity: 1; transform: none; transition: none; }
  .hero__copy > *, .hero__media { animation: none; }
  .hero__slides > .slide { transition: opacity .2s ease; transform: none; }
  .modal[open] { animation: none; }
  .btn, .rec, .emp, .fab { transition: none; }
}

/* ============================================================
   TABLET — 768px
   ============================================================ */
@media (min-width: 768px) {
  .stats__in { grid-template-columns: repeat(4, 1fr); }
  .valores { grid-template-columns: repeat(2, 1fr); }
  .mv { grid-template-columns: repeat(2, 1fr); }

  .hero__in { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .hero__media { justify-self: end; }
  .hero__stamp { right: -.4rem; top: -1.6rem; }

  .prod { grid-template-columns: 1fr 1.15fr; gap: 0; }
  .prod--flip { grid-template-columns: 1.15fr 1fr; }
  .prod--flip .prod__media { order: 2; }
  .prod--flip .prod__body { order: 1; }
  .prod__media { min-height: 100%; padding: 3rem 2rem; }
  .prod__body { padding: 2.2rem 2.4rem; align-self: center; }
  .prod__cta { grid-template-columns: 1fr 1fr; }

  .recs { grid-template-columns: repeat(2, 1fr); }
  .emps { grid-template-columns: repeat(2, 1fr); }
  .modal__cta { grid-template-columns: 1fr 1fr; }

  .medida__in { grid-template-columns: .95fr 1.05fr; align-items: center; }
  .medida--emp .medida__media { order: 2; }
  .medida--emp .medida__copy { order: 1; }
  .caps { grid-template-columns: 1fr 1fr; }

  .cert__in { grid-template-columns: 1.1fr .9fr; align-items: center; }

  .porque__grid { grid-template-columns: repeat(2, 1fr); }

  .pasos { grid-template-columns: repeat(3, auto); gap: 2rem; }
  .cierre__cta { flex-direction: row; width: auto; }

  .pie__in { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* ============================================================
   DESKTOP — 1024px
   ============================================================ */
@media (min-width: 1120px) {
  .burger { display: none; }
  .nav {
    position: static; clip-path: none; visibility: visible;
    flex-direction: row; align-items: center; gap: clamp(.55rem, .95vw, 1.3rem);
    background: none; padding: 0;
  }
  .nav a {
    font-size: clamp(.75rem, 1vw, .95rem); letter-spacing: .02em; padding: .5rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .nav a:hover, .nav a.actual { border-color: var(--naranja); }
  /* El CTA sale del menú de escritorio (lo cubre el flotante de WhatsApp);
     se conserva en el menú desplegable de móvil. */
  .nav a.nav__cta { display: none; }

}

/* Retículas anchas — se mantienen desde 1024px */
@media (min-width: 1024px) {
  .porque__grid { grid-template-columns: repeat(4, 1fr); }
  .recs { grid-template-columns: repeat(3, 1fr); }
  .emps { grid-template-columns: repeat(4, 1fr); }
  .valores { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   AGREGADOS — ronda de observaciones (26-ago-2026)
   ============================================================ */

/* ---------- Botón de WhatsApp en formato ícono ---------- */
.miniwa { gap: .4rem; }
.miniwa svg { display: block; }
.rec__cta .miniwa,
.emp__cta .miniwa { flex: 0 0 auto; width: 52px; padding: 0; }
.rec__cta .minimail { flex: 1; }
.emp__cta .btn-espec { flex: 1; }

/* ---------- Selector de color de las cintas ---------- */
.colores { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.color {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .85rem;
  background: var(--blanco); color: var(--azul);
  border: 2px solid var(--linea); border-radius: 6px;
  font-family: var(--f-display); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: var(--transicion);
}
.color:hover { border-color: var(--naranja); }
.color.activo { border-color: var(--naranja); background: var(--crema); }
.color:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.color__sw {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sw); border: 1px solid rgba(29, 36, 49, .25);
}
.color__sw--claro { box-shadow: inset 0 0 0 1px rgba(29, 36, 49, .12); }

/* ---------- Nosotros ---------- */
.nosotros { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--crema); }
.nosotros .seccion__head h2 { max-width: 24ch; }

.mv { display: grid; gap: 1.25rem; margin-top: 2.2rem; }
.mv__card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--naranja);
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem;
}
.mv__tag {
  font-family: var(--f-display); font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--naranja); margin-bottom: .6rem;
}
.mv__card p:last-child { color: var(--tinta-suave); font-size: .97rem; }

.nosotros .porque__kicker { margin-top: 2.6rem; }

.valores { display: grid; gap: 1px; margin-top: 1.2rem; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.valor { background: var(--papel); padding: 1.25rem 1.35rem; }
.valor dt {
  font-family: var(--f-display); font-size: 1.02rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--azul); margin-bottom: .3rem;
}
.valor dt::before { content: ""; display: block; width: 26px; height: 3px;
  background: var(--naranja); margin-bottom: .6rem; }
.valor dd { color: var(--tinta-suave); font-size: .92rem; line-height: 1.55; }

/* ---------- Botón volver arriba ---------- */
.arriba {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 90;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--azul); color: var(--blanco);
  border: 0; border-radius: 50%;
  box-shadow: 0 10px 24px -10px rgba(13, 34, 66, .6);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--transicion), transform var(--transicion), visibility 0s var(--transicion), background var(--transicion);
}
.arriba.visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--transicion), transform var(--transicion), background var(--transicion); }
.arriba:hover { background: var(--azul-tinta); }
.arriba:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }

@media (min-width: 768px) {
  .arriba { left: 1.6rem; bottom: 1.6rem; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .arriba { transition: none; }
}

/* Ícono de descarga junto a "Catálogo" */
.nav__cat { display: inline-flex; align-items: center; gap: .35rem; }
.nav__cat svg { flex: 0 0 auto; }
.cierre__cat svg { vertical-align: -3px; margin-right: .35rem; }

/* Eyebrows que quedaban en gris por el color de párrafo de su bloque */
.cert__copy .eyebrow, .envio__copy .eyebrow { color: var(--naranja-osc); }

/* ---------- Alcance de envío ---------- */
/* .caps nació sobre fondo azul (dd en blanco): aquí va sobre fondo claro */
.envio .caps dd { color: var(--tinta-suave); }
.envio .caps dt { color: var(--azul); }
.envio .caps dt::before { color: var(--naranja); }

.envio { padding-block: clamp(3rem, 7vw, 4.75rem); background: var(--papel); }
.envio__in { display: grid; gap: 2rem; }
.envio__copy h2 { margin-bottom: .8rem; }
.envio__copy > p { color: var(--tinta-suave); max-width: 60ch; }
.envio__copy .caps { margin-top: 1.6rem; }

.envio__cta {
  background: var(--azul);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
  align-self: start;
  box-shadow: var(--sombra);
}
.envio__tag {
  font-family: var(--f-display); font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja); margin-bottom: .5rem;
}
.envio__pregunta {
  font-family: var(--f-display); font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  font-weight: 800; line-height: 1.15; color: var(--blanco);
  text-transform: uppercase; letter-spacing: .01em;
  margin-bottom: .7rem;
}
.envio__cta > p:last-of-type { color: rgba(255, 255, 255, .82); font-size: .95rem; }
.envio__cta .btn { margin-top: 1.3rem; width: 100%; }

@media (min-width: 900px) {
  .envio__in { grid-template-columns: 1.35fr .65fr; gap: 3rem; align-items: start; }
}

/* ---------- Teléfono de oficina en el cierre ---------- */
.cierre__tel {
  margin-top: 1.1rem;
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: center;
  font-size: .95rem;
}
.cierre__tel span {
  font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja);
}
.cierre__tel a {
  color: var(--blanco); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 1px;
  transition: var(--transicion);
}
.cierre__tel a:hover { color: var(--naranja); border-color: var(--naranja); }

/* ============================================================
   TEXTO JUSTIFICADO — petición de la clienta (15-sep-2026)
   Se justifica el texto corrido que tiene ancho suficiente para
   que las líneas queden parejas. En las columnas angostas (los
   valores, las ventajas, las tarjetas de producto) el justificado
   abre huecos entre palabras, así que ahí se queda a la izquierda.
   `hyphens: auto` con lang="es" corta bien en español.
   ============================================================ */
.hero__sub,
.seccion__head > p,
.prod__body > p,
.medida__copy > p,
.cert__copy > p,
.envio__copy > p,
.mv__card p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Por debajo de 480px ni con guiones se ve bien: vuelve a la izquierda. */
@media (max-width: 479px) {
  .hero__sub,
  .seccion__head > p,
  .prod__body > p,
  .medida__copy > p,
  .cert__copy > p,
  .envio__copy > p,
  .mv__card p {
    text-align: left;
  }
}

/* ---------- Pie: renglones más juntos en escritorio ----------
   Los 44px de alto son por el área táctil; con mouse sobran y dejaban
   los enlaces muy separados. Se conservan en móvil y tablet. */
@media (min-width: 1024px) {
  .pie__nav, .pie__contacto { gap: 0; }
  .pie__nav a, .pie__contacto a { min-height: 32px; }
  .pie__redes { margin-top: 1rem; }
}

/* ===== Badge de ubicación sobre el CTA de WhatsApp (26-oct-2026) ===== */
.ubibadge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.7rem;
  padding: .7rem 1.15rem;
  background: rgba(13, 34, 66, .62);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 16px;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55);
  max-width: 100%;
}
.ubibadge__pin { flex: 0 0 auto; color: var(--naranja); }
.ubibadge__txt { display: grid; gap: .1rem; min-width: 0; }
.ubibadge__tit {
  font-weight: 800;
  font-size: clamp(.98rem, 2.6vw, 1.12rem);
  line-height: 1.2;
  color: var(--blanco);
  letter-spacing: -.01em;
}
.ubibadge__sub {
  font-size: clamp(.8rem, 2.1vw, .88rem);
  line-height: 1.3;
  color: rgba(255, 255, 255, .8);
}

@media (max-width: 479px) {
  .ubibadge { gap: .6rem; padding: .62rem .9rem; border-radius: 14px; margin-top: 1.4rem; }
  .ubibadge__pin { width: 26px; height: 26px; }
}