/* ============================================================
   INTRO — El logo viaja hasta su lugar en la barra
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background-color: var(--c-black-dark);
  /* Un poco más corta que el viaje del logo (1s): la web termina de aparecer
     justo antes de que el logo aterrice, no después.
     Lineal, por lo mismo que la aparición del logo: con --ease-out el negro se
     iba casi entero en los primeros 130ms y el hero ya estaba entero en
     pantalla cuando el logo recién empezaba a achicarse. El viaje quedaba
     sobre una foto quieta en vez de acompañar la apertura. */
  transition: background-color 900ms linear;
}
/* El negro se va desvaneciendo mientras el logo viaja: la home no aparece de
   golpe, se descubre por debajo. */
.intro.is-abriendo { background-color: transparent; }
.intro.is-fuera { pointer-events: none; }

/* El conjunto isotipo + nombre. La aparición va acá y no en cada pieza: así
   las dos entran como una sola marca, y de paso deja libre el transform del
   isotipo, que es del viaje.
   --iso-h manda: el ancho del nombre y la separación se calculan a partir de
   ella con los factores medidos del logo original (ver el comentario del
   index). El min(26vh, 30vw) es porque el conjunto con nombre es 2.5 veces
   más ancho que el isotipo solo: atado únicamente a la altura, en un teléfono
   el nombre se iba del ancho de la pantalla. */
.intro__marca {
  --iso-h: clamp(5rem, min(26vh, 30vw), 17rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  /* Aparición al ras: sólo opacidad. Nada de blur —sobre el logo se veía como
     pixelado— ni de escala.
     La curva va lineal a propósito: con --ease-out el 80% de la opacidad se
     resuelve en el primer 15% del tiempo y el logo aparecía de golpe por más
     que la animación durara. Lineal es la única que se percibe pareja.
     El retardo de 500ms es el negro del principio: con opacity 0 de base, la
     pantalla queda en negro pleno y el logo recién entonces empieza a subir.
     Termina holgada antes de que arranque el viaje (PAUSA, 2000ms en main.js)
     para que las dos no se pisen. */
  animation: introLogoIn 1300ms linear 500ms forwards;
}
@keyframes introLogoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.intro__logo {
  height: var(--iso-h);
  width: auto;
  /* El punto de origen tiene que ser el centro: el JS calcula el viaje entre
     centros, y con cualquier otro origen la escala desviaría el aterrizaje. */
  transform-origin: center center;
  will-change: transform;
}
/* 2.485 y 0.121 salen de medir el logo original: el nombre es 2.505 veces el
   ancho del isotipo y los separa 0.122 de su alto, corregido por el margen
   transparente que trae el archivo del isotipo (el dibujo ocupa 370 de 373). */
.intro__nombre {
  width: calc(var(--iso-h) * 2.485);
  height: auto;
  margin-top: calc(var(--iso-h) * 0.121);
}
/* El nombre se disuelve mientras el isotipo sale hacia la barra: los dos
   movimientos juntos se leen como que la marca se despoja del nombre. Dura
   menos que el viaje (1s) para que el isotipo llegue solo. */
.intro__nombre.is-saliendo {
  opacity: 0;
  transition: opacity 450ms linear;
}
.intro__logo.is-viajando {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Bloquea el scroll mientras la intro está activa */
body.intro-active {
  overflow: hidden;
  height: 100vh;
}
/* El logo real de la barra se mantiene invisible hasta que el que viaja
   aterriza encima: ahí se relevan y el cambio no se percibe. */
body.intro-active .nav__logo img { opacity: 0; }
body.intro-active .nav { z-index: 190; }

@media (prefers-reduced-motion: reduce) {
  .intro__marca { animation: none; opacity: 1; }
  .intro__logo.is-viajando { transition: none; }
  .intro__nombre.is-saliendo { transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-black-dark);
  color: var(--c-white-pure);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  animation: heroZoom 12s var(--ease-out) forwards;
}
@keyframes heroZoom {
  to { transform: scale(1); }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.hero__lines {
  position: absolute;
  inset: 0;
  background-image: url('../../assets-optimized/logos/Fondo Pantalla P&Spng-2.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 65% auto;
  opacity: 0.07;
  mix-blend-mode: screen;
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(5rem, 12vh, 8rem);
}
.hero__inner {
  max-width: 1100px;
  /* left-aligned: text starts at the container edge, not centered */
  margin-left: 0;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--s-5);
}
.hero__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-celeste-bright);
  display: inline-block;
}
.hero__title {
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-5);
}
.hero__title em {
  font-style: normal;
  color: var(--c-celeste-bright);
  font-weight: var(--fw-light);
}
.hero__sub {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.85);
  max-width: 56ch;
  margin-bottom: var(--s-7);
  line-height: 1.55;
}
.hero__ctas {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}
/* Hero CTAs: a touch smaller than base .btn, and both equal width
   (min-width contains the longer label so they render the same size) */
.hero__ctas .btn {
  padding: 0.85rem 1.5rem;
  min-width: 16rem;
  justify-content: center;
}
/* HERO — mobile: kill the zoom animation, smaller CTAs (auto-width, left-aligned) */
@media (max-width: 880px) {
  .hero__media img {
    animation: none;
    transform: none;
  }
  .hero__lines { background-size: 120% auto; }
  .hero__content {
    padding-top: clamp(6rem, 14vh, 9rem);
    padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
  }
  .hero__title {
    font-size: clamp(1.875rem, 7vw, 2.5rem);
  }
  .hero__sub {
    font-size: 1rem;
    margin-bottom: var(--s-6);
  }
  .hero__ctas .btn {
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-micro);
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* ============================================================
   PROYECTOS DESTACADOS — Bento horizontal gallery
   ============================================================ */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  margin-bottom: var(--s-9);
  flex-wrap: wrap;
}
.section-head__title { max-width: 720px; }
.section-head__title h2 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin-top: var(--s-3);
}
.section-head__title h2 .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }
.section-head__aside { text-align: right; max-width: 360px; }
.section-head__aside p { color: var(--c-gray-300); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
/* Al envolverse, el aside queda DEBAJO del título: alinearlo a la derecha ahí
   lo deja colgando. Y 6rem de aire bajo el encabezado es demasiado en mobile. */
@media (max-width: 768px) {
  .section-head { margin-bottom: var(--s-7); }
  .section-head__aside { text-align: left; max-width: none; }
}

.bento {
  background: var(--c-black-soft);
  color: var(--c-white-chalk);
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}
.bento__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 720px;
}
.bento__head h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
  white-space: nowrap;
}
.bento__head h2 .accent {
  color: var(--c-celeste-bright);
  font-weight: var(--fw-light);
}
.bento__head p {
  color: var(--c-gray-300);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: 56ch;
}

/* Viewport hides overflow; track holds the bento grid */
.bento__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  padding-inline: var(--container-pad);
}
.bento__viewport.is-dragging { cursor: grabbing; }
.bento__viewport.is-dragging * { pointer-events: none; }

.bento__track {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(2, clamp(160px, 22vw, 280px));
  grid-auto-columns: clamp(220px, 24vw, 340px);
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  will-change: transform;
  width: max-content;
}

/* Bento card */
.bento__card {
  position: relative;
  overflow: hidden;
  background: var(--c-black-dark);
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: block;
  text-align: left;
  border-radius: 0;
  transform: translateY(30px);
  opacity: 0;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.bento__card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.bento__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78);
  transition: transform 900ms var(--ease-out), filter 500ms var(--ease-out);
  pointer-events: none;
}
.bento__card:hover img,
.bento__card:focus-visible img {
  transform: scale(1.06);
  filter: brightness(1);
}
.bento__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.bento__card:hover .bento__overlay,
.bento__card:focus-visible .bento__overlay {
  opacity: 1;
}
.bento__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1rem, 1.5vw, 1.5rem);
  z-index: 2;
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.bento__card:hover .bento__caption,
.bento__card:focus-visible .bento__caption {
  transform: translateY(0);
  opacity: 1;
}
.bento__cat {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-celeste-bright);
  margin-bottom: 0.25rem;
}
.bento__name {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
  color: var(--c-white-pure);
}

/* Bento spans */
.bento__card[data-span="sm"]   { grid-row: span 1; grid-column: span 1; }
.bento__card[data-span="tall"] { grid-row: span 2; grid-column: span 1; }
.bento__card[data-span="wide"] { grid-row: span 1; grid-column: span 2; }
.bento__card[data-span="lg"]   { grid-row: span 2; grid-column: span 2; }

.bento__card[data-span="lg"] .bento__name {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Señal de "esto se desliza", sin texto: dos flechitas y una pastilla que
   recorre el riel. El movimiento es lo que comunica; por eso se apaga entero
   con movimiento reducido, donde quedan las flechas y el riel quietos. */
.bento__hint {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--c-gray-500);
}
.bento__hint-gesto {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.bento__hint-gesto svg {
  width: 8px;
  height: 14px;
  flex: none;
}
.bento__hint-riel {
  position: relative;
  display: block;
  width: clamp(48px, 9vw, 72px);
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.35;
}
.bento__hint-pastilla {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40%;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--radius-pill);
  background: var(--c-celeste-bright);
  animation: bentoHint 2.4s var(--ease-in-out) infinite;
}
/* Recorre el riel y vuelve, con una pausa en cada punta para que se lea como
   un gesto y no como un vaivén nervioso. */
@keyframes bentoHint {
  0%, 12%   { left: 0; }
  50%, 62%  { left: 60%; }
  100%      { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bento__hint-pastilla { animation: none; left: 30%; }
}

@media (max-width: 700px) {
  .bento__track {
    grid-template-rows: repeat(2, clamp(140px, 38vw, 240px));
    grid-auto-columns: clamp(180px, 60vw, 280px);
  }
  /* Section-head titles must wrap on small screens, not overflow */
  .bento__head h2,
  .section-head__title h2 {
    white-space: normal;
  }
  /* Section header on mobile: tighter spacing, aside left-aligned (was
     right-aligned + huge bottom margin = the weird empty gap) */
  .section-head {
    margin-bottom: var(--s-6);
    gap: var(--s-3);
  }
  .section-head__aside {
    text-align: left;
    max-width: none;
  }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms var(--ease-out), visibility 350ms;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__inner {
  position: relative;
  max-width: min(1200px, 90vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transform: scale(0.96) translateY(12px);
  transition: transform 400ms var(--ease-out);
}
.lightbox.is-open .lightbox__inner {
  transform: scale(1) translateY(0);
}
.lightbox__inner img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}
.lightbox__caption {
  text-align: center;
  color: var(--c-white-chalk);
}
.lightbox__cat {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-celeste-bright);
  margin-bottom: 0.4rem;
}
.lightbox__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--c-white-chalk);
  font-size: 1.75rem;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  z-index: 2;
}
.lightbox__close:hover {
  background: var(--c-celeste-bright);
  color: var(--c-black-dark);
  border-color: var(--c-celeste-bright);
}

body.no-scroll { overflow: hidden; }

/* ============================================================
   PRODUCTOS — PVC / ALUMINIO
   ============================================================ */
.productos {
  background: var(--c-black-dark);
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(1rem, 2vw, 2rem);
}
.productos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  margin-top: var(--s-8);
}
@media (max-width: 880px) {
  .productos__grid { grid-template-columns: 1fr; }
}
.producto-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-black-soft);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-7);
  color: var(--c-white-pure);
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-out);
}
.producto-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.producto-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1500ms var(--ease-out), filter 600ms var(--ease-out);
  filter: brightness(0.55);
}
.producto-card:hover .producto-card__bg img {
  transform: scale(1.05);
  filter: brightness(0.7);
}
.producto-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.producto-card__content { position: relative; z-index: 2; }
.producto-card__system {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-celeste-bright);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.producto-card__system::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--c-celeste-bright);
}
.producto-card__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
  margin-bottom: var(--s-4);
}
.producto-card__desc {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.8);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-5);
  max-width: 42ch;
}
.producto-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.producto-card:hover .producto-card__cta {
  gap: 1rem;
  color: var(--c-celeste-bright);
}

/* ============================================================
   EL DETALLE — Scrollytelling (image pinned, text scrolls)
   ============================================================ */
.detail {
  background: var(--c-black-dark);
  position: relative;
  padding-block: var(--section-y);
}
.section-head--detail {
  margin-bottom: var(--s-7);
}
.section-head--detail h2 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  max-width: 22ch;
  margin: var(--s-4) 0 0;
}

.detail-experience {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.75fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.detail-visuals {
  position: sticky;
  top: 6.4rem;
  height: calc(100svh - 8.4rem);
}
/* Recorte de la foto (con overflow) separado del contenedor sticky, así la
   banda que tapa el texto (::before, fuera de la caja) no queda recortada. */
.detail-visuals__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1.5rem;
}
.detail-visual {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
}
.detail-visual.is-active {
  opacity: 1;
  transform: scale(1);
}
.detail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-copy { display: grid; }
.detail-item {
  min-height: 72svh;
  display: grid;
  align-content: center;
  padding: var(--s-6) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--dur-base) var(--ease-out);
}
.detail-item.is-active { color: var(--c-white-pure); }
.detail-item span {
  color: var(--c-celeste-bright);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.detail-item h3 {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
}
.detail-item p {
  margin: 0;
  max-width: 26rem;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
}

@media (max-width: 1120px) {
  .detail-experience { grid-template-columns: 1fr; }
  /* La foto arranca justo en el borde inferior del navbar (apenas metida
     detrás), sin hueco: así el texto que sube queda siempre tapado. */
  .detail-visuals {
    position: sticky;
    top: 3.5rem;
    height: min(60svh, 28rem);
    z-index: 1;
  }
  .detail-item {
    min-height: max(22rem, 54svh);
    align-content: end;
  }
}

@media (max-width: 640px) {
  .detail-visuals {
    top: 3.35rem;
    height: min(52svh, 21rem);
  }
  .detail-visuals__stage { border-radius: 1rem; }
  .detail-item {
    min-height: max(18rem, 44svh);
    align-content: end;
    padding: var(--s-5) 0 var(--s-6);
  }
  .detail-item h3 {
    font-size: clamp(1.35rem, 7vw, 1.8rem);
  }
  .detail-item p {
    max-width: 22rem;
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* ============================================================
   SERVICIOS — Reciclaje + Reparaciones
   ============================================================ */
.servicios {
  background: var(--c-black-dark);
  position: relative;
  padding-top: clamp(2rem, 4vw, 4rem);
}
.section-head__title h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  white-space: nowrap;
}
.servicios__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: var(--s-7);
}
@media (max-width: 880px) {
  .servicios__grid { grid-template-columns: 1fr; }
}
.servicio-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--c-black-soft);
}
.servicio-card__bg {
  position: absolute;
  inset: 0;
}
.servicio-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
  filter: brightness(0.6);
}
.servicio-card:hover .servicio-card__bg img { transform: scale(1.05); }
.servicio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.servicio-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-6);
  z-index: 2;
  color: var(--c-white-pure);
}
.servicio-card__content h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-3);
  line-height: 1;
}
.servicio-card__content p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.85);
  max-width: 42ch;
  margin-bottom: var(--s-4);
  line-height: 1.5;
}

/* ============================================================
   CONFIANZA
   ============================================================ */
.confianza {
  background: var(--c-black-soft);
  position: relative;
  overflow: hidden;
}
.confianza__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .confianza__grid { grid-template-columns: 1fr; }
}
.confianza__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.confianza__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.confianza__text h2 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin-top: var(--s-3);
  margin-bottom: var(--s-5);
}
.confianza__text h2 .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }
.confianza__text p {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-gray-300);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-7);
  max-width: 52ch;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto {
  background: var(--c-black-dark);
  position: relative;
  overflow: hidden;
}
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 880px) {
  .contacto__grid { grid-template-columns: 1fr; }
}
.contacto__intro h2 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
  margin-top: var(--s-3);
  margin-bottom: var(--s-5);
}
.contacto__intro h2 .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }
/* Cuando el encabezado es una frase y no un título corto, el tamaño display
   se come media pantalla: baja a cuerpo de subtítulo y se afloja la línea. */
.contacto__intro-frase {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
  max-width: 30ch;
}
.contacto__intro p {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-gray-300);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-7);
  max-width: 44ch;
}
.contacto__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.contacto__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contacto__info-item .label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-gray-500);
}
.contacto__info-item .value {
  font-size: var(--fs-body);
  color: var(--c-white-chalk);
  overflow-wrap: anywhere;
}
.contacto__info-item a:hover { color: var(--c-celeste-bright); }

/* === FORM === */
.form {
  display: grid;
  gap: var(--s-5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.form__field label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-gray-300);
  font-weight: var(--fw-medium);
}
.form__field input,
.form__field select,
.form__field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  color: var(--c-white-pure);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
  outline: none;
}
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--c-gray-500); }
.form__field input:hover,
.form__field textarea:hover { border-color: rgba(255, 255, 255, 0.22); }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--c-celeste-bright);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(30, 192, 255, 0.15);
}
.form__field textarea {
  resize: vertical;
  min-height: 130px;
}
.form__field select { appearance: none; cursor: pointer; }
.form__field select option { background: var(--c-black-soft); color: var(--c-white-pure); }

/* --- Custom select (on-brand dropdown over a hidden native <select>) --- */
/* Native control stays in the DOM for the form value + validation, hidden visually. */
.form__field select.cselect-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.cselect { position: relative; }
.cselect__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  color: var(--c-white-pure);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.cselect__trigger:hover { border-color: rgba(255, 255, 255, 0.22); }
.cselect.is-open .cselect__trigger,
.cselect__trigger:focus-visible {
  border-color: var(--c-celeste-bright);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(30, 192, 255, 0.15);
}
.cselect__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cselect__value--placeholder { color: var(--c-gray-500); }
.cselect__arrow {
  flex-shrink: 0;
  color: var(--c-celeste-bright);
  font-size: 0.9em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cselect.is-open .cselect__arrow { transform: rotate(180deg); }

.cselect__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--c-black-soft);
  border: 1px solid var(--c-gray-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  max-height: 260px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.cselect.is-open .cselect__list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Flip upward when there isn't room below (set by JS) */
.cselect--up .cselect__list {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(6px);
}
.cselect--up.is-open .cselect__list { transform: translateY(0); }
.cselect__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--c-gray-300);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.cselect__option.is-active { background: var(--c-gray-800); color: var(--c-white-pure); }
.cselect__option[aria-selected="true"] {
  color: var(--c-celeste-bright);
  font-weight: var(--fw-medium);
}
.cselect__option[aria-selected="true"]::after {
  content: '✓';
  font-size: 0.85em;
}
/* Slim, on-brand scrollbar when the list overflows */
.cselect__list::-webkit-scrollbar { width: 6px; }
.cselect__list::-webkit-scrollbar-thumb {
  background: var(--c-gray-700);
  border-radius: var(--radius-pill);
}
.form__field--error .cselect__trigger,
.form__field--error input,
.form__field--error select,
.form__field--error textarea {
  border-color: #ff4d6d;
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.14);
}
.form__field .err-msg {
  font-size: var(--fs-micro);
  color: #ff4d6d;
  letter-spacing: var(--tracking-snug);
  display: none;
}
.form__field--error .err-msg { display: block; }
.form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--s-3);
  width: 100%;
  padding-block: 1.05rem;
}
.form__success {
  padding: var(--s-5);
  border: 1px solid var(--c-celeste-bright);
  color: var(--c-celeste-bright);
  font-size: var(--fs-body);
  display: none;
}
.form__success.is-visible { display: block; }

/* Mismo bloque que el de éxito pero en rojo, para cuando el envío no sale */
.form__error {
  margin-top: var(--s-4);
  padding: var(--s-5);
  border: 1px solid #ff6b6b;
  color: #ff9d9d;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  display: none;
}
.form__error.is-visible { display: block; }
.form__error a { color: var(--c-celeste-bright); text-decoration: underline; }

/* Trampa de spam: fuera de pantalla para el usuario, pero visible para los
   bots que completan todo. No usa display:none porque muchos bots lo detectan. */
.form__botcheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   HISTORIA — Editorial block (Fontenla-inspired)
   ============================================================ */
.historia-block {
  background: var(--c-white-chalk);
  color: var(--c-black-dark);
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem);
}

.historia-block__intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: flex-start;
  padding-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* Huge outlined numeral with parallax + clip-path reveal */
.historia-block__numeral {
  position: relative;
  line-height: 0.8;
  user-select: none;
  pointer-events: none;
  align-self: flex-start;
  margin-top: clamp(3rem, 6vw, 6.5rem);
  will-change: transform;
}
.historia-block__numeral span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(14rem, 28vw, 30rem);
  font-weight: var(--fw-light);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-black-dark);
  text-stroke: 1.5px var(--c-black-dark);
  opacity: 0.18;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1800ms cubic-bezier(0.65, 0, 0.35, 1);
}
.historia-block__numeral.is-revealed span {
  clip-path: inset(0 0 0 0);
}

.historia-block__copy {
  max-width: 640px;
  padding-top: clamp(1rem, 3vw, 2.5rem);
}

.eyebrow-dark {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-black-dark);
  margin-bottom: var(--s-5);
}

.historia-block__title {
  font-size: clamp(1.625rem, 2.8vw, 2.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
  color: var(--c-black-dark);
  margin-bottom: var(--s-5);
  max-width: 22ch;
}

.historia-block__body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.75;
  color: #555;
  max-width: 60ch;
  margin-bottom: var(--s-6);
}

/* Rectangle buttons (sharp, no border-radius) */
.btn-rect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.5rem;
  background: transparent;
  color: var(--c-black-dark);
  border: 1.5px solid var(--c-black-dark);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn-rect:hover {
  background: var(--c-black-dark);
  color: var(--c-white-pure);
}

/* Cinematic video — small, contained, very thin */
.historia-block__video {
  position: relative;
  width: min(75vw, 1290px);
  margin-left: auto;
  margin-right: clamp(2rem, 5vw, 6rem);
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  aspect-ratio: 75 / 16;
  overflow: hidden;
  background: var(--c-black-dark);
}
.historia-block__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text block under video — aligned right, matching intro layout */
.historia-block__after {
  padding-top: clamp(0.5rem, 1.5vw, 1.5rem);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
}
.historia-block__after-inner {
  grid-column: 2;
  max-width: 640px;
  text-align: left;
}
.historia-block__after-inner .historia-block__body {
  margin-bottom: var(--s-7);
}

/* Responsive */
@media (max-width: 880px) {
  .historia-block__intro,
  .historia-block__after {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .historia-block__after-inner { grid-column: 1; }
  .historia-block__numeral { margin-top: 0; }
  .historia-block__numeral span {
    font-size: clamp(10rem, 40vw, 18rem);
  }
  .historia-block__video {
    width: 88vw;
    margin-right: auto;
    margin-left: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ============================================================
   FABRICA — Sticky scrollytelling: photo stays, stats crossfade
   ============================================================ */
.fabrica-new {
  background: var(--c-white-chalk);
  color: var(--c-black-dark);
  position: relative;
  /* Normal top/bottom section spacing — identical to every other section */
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.fabrica-new__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.fabrica-new__media {
  position: relative;
  overflow: hidden;
  background: var(--c-black-dark);
  aspect-ratio: 4 / 5;
  width: 100%;
}
.fabrica-new__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fabrica-new__copy {
  max-width: 640px;
  display: flex;
  flex-direction: column;
}
/* DOM order is copy-top → cta → stats-stage.
   Desktop keeps the original visual order (title/body → button → stats)
   via `order`; mobile flips stats above the button (see media query). */
.fabrica-new__copy-top { order: 0; }
.fabrica-new__cta { order: 1; }
.fabrica-new__stats-stage { order: 2; }
.fabrica-new__title {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--c-black-dark);
  margin-bottom: var(--s-5);
  text-transform: lowercase;
}
.fabrica-new__body {
  font-size: var(--fs-body);
  color: #555;
  line-height: 1.65;
  margin-bottom: var(--s-6);
  max-width: 50ch;
}

/* Stats stage — both rows live in same spot, crossfade */
/* Los 4 datos a la vista, en 2×2. Antes eran dos filas superpuestas que se
   cruzaban con el scroll; ahora entran con el fade escalonado de [data-reveal]
   y el número sube solo al aparecer. */
.fabrica-new__stats-stage {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(0,0,0,0.12);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
}
.fab-stat__num {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--c-black-dark);
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-bottom: var(--s-3);
}
.fab-stat__num span:last-child {
  font-size: 0.5em;
  font-weight: var(--fw-light);
  color: var(--c-gray-500);
  margin-left: 0.1rem;
}
.fab-stat__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--c-black-dark);
  margin-bottom: var(--s-2);
}
.fab-stat__desc {
  font-size: var(--fs-small);
  color: #777;
  line-height: 1.55;
  max-width: 28ch;
}

/* Button variant for dark text on light bg */
.btn-rect--dark {
  border-color: var(--c-black-dark);
  color: var(--c-black-dark);
}
.btn-rect--dark:hover {
  background: var(--c-black-dark);
  color: var(--c-white-pure);
}

@media (max-width: 880px) {
  /* Dissolve the copy wrappers so title / photo / body / stats / cta are all
     direct children of the grid — then reorder freely.
     Mobile order: title -> photo -> body -> stats slider -> button */
  .fabrica-new__grid {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
  }
  .fabrica-new__copy,
  .fabrica-new__copy-top {
    display: contents;
  }
  .fabrica-new__title  { order: 1; margin-bottom: 0; }
  .fabrica-new__media  { order: 2; aspect-ratio: 4 / 3; max-height: none; }
  .fabrica-new__body   { order: 3; margin-bottom: 0; }
  .fabrica-new__stats-stage { order: 4; }
  .fabrica-new__cta    { order: 5; }

  /* Los 4 datos siguen a la vista, en 2×2. Antes era un slider horizontal;
     con los cuatro visibles de una no hace falta deslizar nada. */
  .fabrica-new__stats-stage {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--s-5);
    gap: var(--s-6) var(--s-4);
  }
}
/* El 2×2 entra cómodo hasta ~340px, así que sólo se apila en pantallas muy
   angostas. A 460px se rompía en la mayoría de los teléfonos y los 4 datos
   quedaban en una tira larguísima, que es justo lo que se quería evitar. */
@media (max-width: 340px) {
  .fabrica-new__stats-stage { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOWROOM — Editorial video section
   ============================================================ */
.showroom {
  background: var(--c-black-dark);
  color: var(--c-white-chalk);
  padding-block: var(--section-y);
  position: relative;
}
.showroom__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.showroom__content {
  max-width: 520px;
}
.showroom__title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
}
.showroom__title .accent {
  color: var(--c-celeste-bright);
  font-weight: var(--fw-light);
}
.showroom__body {
  font-size: var(--fs-body);
  color: var(--c-gray-300);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-5);
}
.showroom__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.showroom__list li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--c-gray-300);
  line-height: 1.5;
}
.showroom__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--c-celeste-bright);
  margin-top: 0.55em;
  flex-shrink: 0;
}
.showroom__video {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-black-soft);
}
.showroom__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery — grid de fotos del showroom debajo del video */
.showroom__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.showroom__gallery-item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-black-soft);
}
.showroom__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.showroom__gallery-item:hover img { transform: scale(1.05); }
@media (max-width: 880px) {
  .showroom__gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .showroom__gallery { grid-template-columns: 1fr; }
}
/* Variante compacta (galería de obras en producto-pvc): celdas más bajas para
   que 9 fotos no estiren la sección. 3:2 es ~11% más baja que 4:3. */
.showroom__gallery--compact .showroom__gallery-item { aspect-ratio: 3 / 2; }

/* Mobile: slider horizontal con snap en vez de grilla. Apiladas, 9 fotos son
   ~2000px de scroll vertical; así entran en una fila y se recorren con el dedo.
   La foto va al 82% para que asome la siguiente y se note que se desliza. */
@media (max-width: 640px) {
  .showroom__gallery--compact {
    display: flex;
    grid-template-columns: none;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    scroll-padding-left: var(--container-pad);
  }
  .showroom__gallery--compact::-webkit-scrollbar { display: none; }
  .showroom__gallery--compact .showroom__gallery-item {
    flex: 0 0 82%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
  }
}
/* Dots del slider de obras — mismo lenguaje que el de Proceso */
.showroom__dots { display: none; }
@media (max-width: 640px) {
  .showroom__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--s-5);
  }
}
/* Fotos verticales: el recorte centrado se come la parte de arriba, que es
   justo donde está el arco / el paño alto. Se sube el encuadre. */
.showroom__gallery-item--top img { object-position: center 32%; }
/* Al revés: fotos verticales donde lo que interesa —la carpintería— está en la
   mitad de abajo, y el recorte centrado se quedaba con el cielo. */
.showroom__gallery-item--bottom img { object-position: center 78%; }

@media (max-width: 880px) {
  /* Dissolve the content wrapper so the video can sit right under the title.
     Mobile order: eyebrow -> title -> video -> body -> list -> button */
  .showroom__grid {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }
  .showroom__content { display: contents; }
  .showroom .t-eyebrow { order: 1; }
  .showroom__title {
    order: 2;
    margin-top: 0;
    margin-bottom: 0;
  }
  .showroom__video {
    order: 3;
    aspect-ratio: 4 / 3;
  }
  .showroom__body {
    order: 4;
    margin-bottom: 0;
  }
  .showroom__list {
    order: 5;
    margin-bottom: 0;
  }
  .showroom .btn-rect { order: 6; }
}

/* ============================================================
   CONTACTO PAGE — page hero + maps (contacto.html)
   ============================================================ */
/* Nav with a permanent dark background (sub-pages without a full-bleed hero) */
.nav--solid {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-hero {
  background: var(--c-black-dark);
  color: var(--c-white-chalk);
  position: relative;
  overflow: hidden;
  padding-block: clamp(8.5rem, 16vh, 12rem) clamp(2.5rem, 6vw, 5rem);
}
/* Hero con imagen de fondo + overlay (contacto.html) */
.page-hero--media {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(3rem, 8vh, 6rem);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg picture { display: block; width: 100%; height: 100%; }
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Mobile: hero a pantalla completa con altura ESTABLE (svh no cambia al
   esconderse la barra del navegador → evita el "zoom" al scrollear).
   Encuadre centrado y foto un poco más oscura para leer el texto. */
@media (max-width: 640px) {
  .page-hero--media {
    min-height: 100svh;
    /* Menos aire arriba y abajo: el bloque baja y aprovecha más pantalla,
       sin llegar a pegarse al borde. */
    padding-block: clamp(6rem, 12vh, 8rem) clamp(2rem, 4.5vh, 3rem);
  }
  .page-hero__bg img {
    object-position: center center;
  }
  /* La foto se mantiene clara arriba, donde se la ve, y baja a casi negro en
     el tercio inferior, que es donde apoya el texto: ahí antes competían el
     blanco de la letra y los claros de la foto. */
  .page-hero__bg::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.30) 30%,
      rgba(0,0,0,0.72) 62%,
      rgba(0,0,0,0.94) 100%);
  }
}
.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.20) 42%, rgba(0,0,0,0.85) 100%);
}
.page-hero--media > .container { position: relative; z-index: 1; }
.page-hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  /* Sin interletrado negativo. En la Bold a tamaño display el brazo de la "r"
     se monta sobre la "t" de "Aberturas": primero se probó -0.015em y seguía
     tocándose. En normal las letras usan la separación que trae la fuente, que
     es la única que garantiza que no se pisen — y varía según el dispositivo,
     porque no hay fuente web y cada uno cae en Helvetica, Arial o Roboto. */
  letter-spacing: normal;
  line-height: 0.95;
  margin-top: var(--s-3);
  margin-bottom: var(--s-5);
}
.page-hero__title .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }
/* A 40px el Light queda demasiado fino sobre foto (y en iOS, con Helvetica Neue
   Light real, más todavía). El celeste ya diferencia la palabra por sí solo. */
@media (max-width: 640px) {
  .page-hero__title .accent { font-weight: var(--fw-medium); }
  /* En mobile el título entra en un solo renglón: se anula el salto de línea
     —que sólo sirve en pantalla ancha— y se achica lo justo para que quepa.
     Va con vw para que acompañe al ancho: si igual no entrara, parte en dos
     líneas en vez de desbordar. */
  /* La medida la manda el título más largo ("Aberturas de Aluminio."): así los
     tres heroes de producto quedan del mismo tamaño y todos entran. */
  .page-hero__title--una-linea { font-size: clamp(1.55rem, 7vw, 2.5rem); }
  .page-hero__title--una-linea br { display: none; }
}
.page-hero__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-gray-300);
  line-height: var(--lh-relaxed);
  max-width: 52ch;
}

/* On the contacto page the form section sits between two dark blocks */
.page--contacto .contacto { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }
.page--contacto .contacto__intro h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-6);
}

/* === MAPS === */
.maps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 880px) {
  .maps__grid { grid-template-columns: 1fr; }
}
.map-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.map-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.map-card__address {
  font-size: var(--fs-body);
  color: var(--c-gray-300);
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
}
.map-card__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-gray-900);
}
.map-card__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray-500);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.map-card__cta { align-self: start; }

/* ============================================================
   PÁGINA DE PRODUCTO (producto-pvc.html, -aluminio, -in-out)
   ============================================================ */
/* --- Product hero extras (sobre .page-hero--media) --- */
.prod-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
/* --- Hero partido: título a un lado, render del producto al otro.
   Para páginas sin fotos de obra (barandas), donde un hero tipográfico
   solo deja una franja negra vacía. --- */
.prod-hero--split > .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.prod-hero__figure {
  margin: 0;
  display: flex;
  justify-content: center;
}
.prod-hero__figure img {
  width: 100%;
  max-width: 420px;
  height: auto;
}
@media (max-width: 880px) {
  .prod-hero--split > .container {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }
  .prod-hero__figure img { max-width: 300px; }
}
/* Sin foto de fondo, las 8,5rem de aire superior del hero son negro vacío:
   en mobile se recortan y el render se achica para no estirar la pantalla. */
@media (max-width: 640px) {
  .page-hero:not(.page-hero--media) {
    padding-block: clamp(6.5rem, 13vh, 8rem) clamp(2rem, 5vw, 3rem);
  }
  .prod-hero__figure img { max-width: 240px; }
}

/* Botones a todo el ancho: apilados y con anchos distintos se ven desprolijos */
@media (max-width: 480px) {
  .prod-hero__actions .btn,
  .prod-cta__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
}

/* --- Prestaciones --- */
.prod-specs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.prod-spec {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-celeste-bright);
}
.prod-spec__k {
  font-size: var(--fs-h4, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}
.prod-spec__v {
  color: var(--c-gray-500);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

/* --- Variante de 8 ítems (aluminio): dos filas de cuatro, más apretadas que
   la grilla de 4 para que la sección no se estire. --- */
.prod-specs__grid--ocho {
  gap: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
}
.prod-specs__grid--ocho .prod-spec { gap: var(--s-2); padding-top: var(--s-3); }
.prod-specs__grid--ocho .prod-spec__k { font-size: var(--fs-body); }
.prod-specs__grid--ocho .prod-spec__v { line-height: var(--lh-base); }
@media (max-width: 1000px) {
  .prod-specs__grid--ocho { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: slider horizontal con snap, igual que el de Proceso. Cada ficha al
   78% para que asome la siguiente y se note que se desliza. */
@media (max-width: 640px) {
  .prod-specs__grid--ocho {
    display: flex;
    grid-template-columns: none;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    padding-bottom: var(--s-3);
    scroll-padding-left: var(--container-pad);
    scrollbar-width: none;
  }
  .prod-specs__grid--ocho::-webkit-scrollbar { display: none; }
  .prod-specs__grid--ocho .prod-spec {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
@media (max-width: 880px) {
  .prod-specs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .prod-specs__grid { grid-template-columns: 1fr; }
}

/* --- Encabezado apilado ---
   En pantalla ancha el .section-head normal estira título y bajada a los bordes
   opuestos del contenedor y deja una franja muerta en el medio. Esta variante
   la cierra bajando la bajada debajo del título, alineada a la izquierda.
   Sin acotar a una sección: la usan Prestaciones y Reparaciones. */
.section-head--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
.section-head--stacked .section-head__aside {
  text-align: left;
  max-width: 62ch;
}
/* --- Ventajas del PVC (grilla) --- */
.ventajas-stage { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

/* Los íconos vienen negro pleno sobre transparente: se invierten a blanco
   en vez de pedir una segunda tanda de archivos */
/* Se miden por ALTURA: dos de los íconos son anchos (ratio ~2.46) y midiéndolos
   por el lado mayor quedaban visualmente a menos de la mitad que el resto. */
.ventaja__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ventaja__icon img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.ventaja__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-white-chalk);
  line-height: 1.3;
}

/* -- Vista 1: grilla de 8 tarjetas -- */
.ventajas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}
@media (max-width: 900px) { .ventajas-grid { grid-template-columns: repeat(2, 1fr); } }
.ventaja {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: clamp(1.25rem, 2.5vw, 1.85rem) var(--s-3);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.ventaja:hover {
  border-color: rgba(30, 192, 255, 0.4);
  background: rgba(30, 192, 255, 0.05);
}
.ventaja .ventaja__icon { height: 3.4rem; max-width: 100%; }
/* En 2 columnas angostas los íconos anchos (ratio 2.46) topaban contra el borde
   de la tarjeta y se achicaban de alto: se baja la altura para que entren enteros */
@media (max-width: 600px) {
  .ventaja { padding: var(--s-5) var(--s-2); }
  .ventaja .ventaja__icon { height: 2.7rem; }
}

/* --- Crédito al proveedor --- */
/* Rótulo al lado del logo y separado por una línea: se lee como firma al pie
   de la sección, no como encabezado de las ventajas (que son propias). */
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.partner__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-gray-500);
}
.partner__logo { width: clamp(125px, 14vw, 170px); height: auto; }
@media (max-width: 480px) {
  .partner { flex-direction: column; gap: var(--s-4); }
}

/* --- Tipologías / sistemas --- */
.prod-systems__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.prod-system {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--c-black-soft);
  border: 1px solid var(--c-gray-700);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.prod-system:hover { border-color: var(--c-celeste-bright); transform: translateY(-4px); }
.prod-system h3 {
  font-size: var(--fs-h4, 1.375rem);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-3);
}
.prod-system p {
  color: var(--c-gray-500);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
@media (max-width: 640px) {
  .prod-systems__grid { grid-template-columns: 1fr; }
}

/* --- Terminaciones / foliados --- */
.prod-finishes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.finish { margin: 0; }
.finish img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  border: 1px solid var(--c-gray-700);
}
.finish__name {
  margin-top: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-gray-300);
  text-align: center;
}
@media (max-width: 700px) {
  .prod-finishes__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .prod-finishes__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- CTA final --- */
.prod-cta { background: var(--c-black-dark); }
.prod-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-5);
  max-width: 60ch;
  margin-inline: auto;
}
.prod-cta__inner h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.prod-cta__inner p {
  color: var(--c-gray-300);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
}
.prod-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

/* Detalle del producto abierto */
.linea-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 880px) { .linea-detail { grid-template-columns: 1fr; gap: var(--s-6); } }
/* Línea sin foto todavía: el texto ocupa el ancho completo */
.linea-detail--sin-foto { grid-template-columns: 1fr; max-width: 62ch; }
/* Slider de fotos: scroll nativo con snap + dots (sin flechas ni contador) */
.linea-slider {
  position: relative;
  min-width: 0;
}
.linea-slider__frame { position: relative; }
.linea-slider__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-md);
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.linea-slider__track::-webkit-scrollbar { display: none; }
/* Durante el arrastre con mouse el snap molesta; se suelta hasta que la
   animación de acomodado termina (si no, el re-snap la corta de golpe) */
.linea-slider__track.is-dragging { cursor: grabbing; }
.linea-slider__track.is-free { scroll-snap-type: none; }
.linea-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 7 / 6;
  overflow: hidden;
  background: #e9e9eb;
}
.linea-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* Render transparente (PNG): sin fondo claro y mostrando la pieza completa */
.linea-slider__slide--bare {
  background: transparent;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}
.linea-slider__slide--bare img { object-fit: contain; }
/* Flechas — opción extra al swipe y a los dots. Ocultas hasta que el mouse
   entra en la foto; en los extremos no aparecen porque no hay a dónde ir. */
.linea-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;          /* área clickeable cómoda, aunque el trazo sea fino */
  height: 4.25rem;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  /* Sin círculo detrás: la sombra es lo único que la despega de fotos claras */
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.6));
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.linea-slider__arrow svg { width: 0.95rem; height: 3.1rem; }
.linea-slider__arrow--prev { left: 0.9rem; transform: translateY(-50%) translateX(-6px); }
.linea-slider__arrow--next { right: 0.9rem; transform: translateY(-50%) translateX(6px); }
.linea-slider__arrow--next svg { transform: rotate(180deg); }
.linea-slider__frame:hover .linea-slider__arrow,
.linea-slider__arrow:focus-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.linea-slider__arrow:hover { color: var(--c-celeste-bright); }
.linea-slider__arrow[disabled] { pointer-events: none; }
.linea-slider__frame:hover .linea-slider__arrow[disabled] { opacity: 0; }
/* Sin hover (touch): manda el swipe, las flechas sobran */
@media (hover: none) {
  .linea-slider__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .linea-slider__arrow { transition: opacity var(--dur-fast) var(--ease-out); }
  .linea-slider__arrow--prev,
  .linea-slider__arrow--next { transform: translateY(-50%); }
}

/* Dots — mismo lenguaje que el slider de Proceso: el activo se estira en píldora */
.linea-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--s-4);
}
.linea-slider__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.linea-slider__dot:hover { background: rgba(255, 255, 255, 0.45); }
.linea-slider__dot.is-active {
  width: 24px;
  background: var(--c-celeste-bright);
}
@media (prefers-reduced-motion: reduce) {
  .linea-slider__dot { transition: none; }
}
.linea-detail__type {
  display: inline-block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-celeste-bright);
  margin-bottom: var(--s-3);
}
.linea-detail__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-3);
}
.linea-detail__desc {
  color: var(--c-gray-300);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  margin-bottom: var(--s-4);
}
.linea-detail__feats {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.linea-detail__feats li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--c-gray-300);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.linea-detail__feats li::before {
  content: '\203a';
  position: absolute;
  left: 0;
  color: var(--c-celeste-bright);
  font-weight: var(--fw-bold);
}
.linea-detail__feats li::after { content: '.'; }
/* En columna: el botón es inline-flex y como caja en línea arrastraba el
   espacio del renglón, que lo dejaba desalineado con el texto de arriba.
   Como ítem flex además le sirve el align-self para quedar del ancho de su
   texto en vez de estirarse. */
.linea-detail__body {
  display: flex;
  flex-direction: column;
}
.linea-detail__cta {
  align-self: start;
  /* Se suma al margen inferior del bloque anterior: separa el botón del texto
     para que no se lea como un renglón más. */
  margin-top: var(--s-5);
  padding: 0.85rem 1.6rem;
  font-weight: var(--fw-semibold);
}

/* --- Colores de una línea: variantes del mismo producto.
   Comparten el manejador de las miniaturas (data-photo), así que al tocarlas
   el visor se mueve a esa foto y la muestra queda marcada. --- */
.linea-colores { margin-bottom: var(--s-4); }
.linea-colores__label {
  display: block;
  margin-bottom: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-gray-500);
}
/* Grilla de celdas iguales: con flex, un nombre largo ("Larch Terra Brown")
   estiraba su ítem y las muestras quedaban desalineadas entre sí. */
.linea-colores__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--s-4) var(--s-3);
  align-items: start;
}
.linea-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  cursor: pointer;
  padding: 0;
}
.linea-color__chip {
  display: block;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: #e9e9eb;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.linea-color__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linea-color:hover .linea-color__chip { border-color: rgba(255, 255, 255, 0.35); }
.linea-color.is-active .linea-color__chip { border-color: var(--c-celeste-bright); }
.linea-color__name {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--c-gray-500);
  text-align: center;
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-out);
}
.linea-color.is-active .linea-color__name { color: var(--c-white-chalk); }
/* Celdas y muestras algo más chicas en mobile: con 12 colores, a 4,5rem
   entraban sólo tres por fila y la paleta se estiraba a lo largo. */
@media (max-width: 560px) {
  .linea-colores__list { grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr)); }
  .linea-color__chip { width: 2.6rem; height: 2.6rem; }
}

/* Grid */
.lineas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
@media (max-width: 700px) { .lineas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .lineas-grid { grid-template-columns: 1fr; } }
.linea-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Sólo con mouse: en táctil el :hover se queda pegado después del tap y la
   tarjeta quedaba levantada y con la foto ampliada hasta tocar otra cosa. */
@media (hover: hover) {
  .linea-card:hover { border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); }
  .linea-card:hover .linea-card__media img { transform: scale(1.04); }
}
.linea-card.is-active { border-color: var(--c-celeste-bright); }
.linea-card__media {
  aspect-ratio: 7 / 6;
  overflow: hidden;
  background: #e9e9eb;
}
.linea-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }

/* --- Líneas cuya "foto" es un render recortado, no una foto de obra
   (aluminio). Con cover se les partía la mitad, y en una celda apaisada
   quedaban diminutos: van completos y en celda cuadrada. --- */
.lineas--render .linea-card__media {
  aspect-ratio: 1 / 1;
  background: transparent;
  /* En % para que el aire escale con la tarjeta. Los renders cuadrados
     llenaban la celda de borde a borde y el producto se veía enorme. */
  padding: 11%;
}
.lineas--render .linea-card__media img { object-fit: contain; }
.lineas--render .linea-slider__slide { aspect-ratio: 1 / 1; }
.linea-card__meta { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 1rem; }
.linea-card__name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-white-chalk); }
.linea-card__type { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-gray-500); }

/* Panel del detalle dentro de la grilla: ocupa la fila completa, justo debajo
   de la fila de la tarjeta elegida. Se abre en el lugar, sin mandar al final. */
.linea-panel {
  grid-column: 1 / -1;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  /* El gap de la grilla es chico y el botón quedaba pegado a la tarjeta
     siguiente: cierra el panel con aire propio, para que se lea dónde termina. */
  padding-bottom: clamp(2rem, 6vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Cerrado: el panel queda en su lugar pero sin contenido, así que no debe
   ocupar ni dejar su relleno. */
.linea-panel:empty { display: none; }
/* La animación va en el contenido, no en el panel: el panel ahora es fijo y
   sólo se le reemplaza lo de adentro, así el despliegue se repite cada vez
   que se elige un producto. */
.linea-panel > .linea-detail { animation: lineaPanelIn 380ms var(--ease-out); }
/* La tarjeta sube al tope al abrirse: este margen la deja debajo del nav fijo */
.linea-card { scroll-margin-top: 5.5rem; }
@keyframes lineaPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .linea-panel > .linea-detail { animation: none; }
}

/* Acordeón (mismo corte que el JS): la tarjeta abierta pasa a ser la cabecera
   del panel. Esconde su foto porque el visor de abajo abre justo con esa misma
   imagen y se veía repetida una debajo de la otra; y el panel esconde nombre y
   tipo porque ya los pone la tarjeta. Así no se duplica nada y no hace falta
   sacar la tarjeta de la grilla, que reacomodaría las demás. */
@media (max-width: 700px) {
  /* El título y la foto se leían como dos bloques sin relación: entre medio
     había el gap de la grilla, el margen y el padding del panel, y encima una
     línea divisoria. Se saca la línea y se junta todo: la cercanía sola ya
     dice que son lo mismo. */
  .linea-panel {
    border-top: 0;
    margin-top: 0;
    padding-top: var(--s-3);
  }
  .linea-card.is-active .linea-card__media { display: none; }
  .linea-card.is-active {
    /* Sin esto se estiraría a la altura de la tarjeta con foto de al lado
       cuando la grilla va a dos columnas. */
    align-self: start;
    background: rgba(30, 192, 255, 0.08);
  }
  .linea-card.is-active .linea-card__meta { padding: 0.9rem 1rem; }
  .linea-card.is-active .linea-card__name { color: var(--c-celeste-bright); }
  .linea-panel .linea-detail__type,
  .linea-panel .linea-detail__name { display: none; }
}

/* ============================================================
   COLORES PVC — muestra destacada
   ============================================================ */
/* Logo del fabricante de los foliados, centrado sobre las muestras.
   El archivo ya viene blanqueado desde el script, sin filtro CSS. */
.colores-brand {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.colores-brand__logo { width: clamp(150px, 17vw, 205px); height: auto; }

/* -- Vista 2: muestra destacada + selector -- */
.colores-featured {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.colores-featured__main {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.colores-featured__chip {
  flex: 0 0 auto;
  width: clamp(9rem, 30vw, 16rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.colores-featured__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.colores-featured__info { display: flex; flex-direction: column; gap: 0.4rem; }
.colores-featured__name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}
.colores-featured__thumbs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(0.4rem, 1vw, 0.75rem);
}
.colores-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.colores-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.colores-thumb:hover { border-color: rgba(255, 255, 255, 0.35); }
.colores-thumb.is-active { border-color: var(--c-celeste-bright); }
/* 16 miniaturas en 8 columnas quedaban de ~34px en mobile: imposibles de tocar */
@media (max-width: 900px) { .colores-featured__thumbs { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 560px) {
  .colores-featured__main { flex-direction: column; align-items: flex-start; }
  .colores-featured__chip { width: clamp(11rem, 55vw, 16rem); }
  .colores-featured__thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   PÁGINA DE SERVICIOS (servicios.html)
   ============================================================ */
/* --- Proceso: flujo numerado "Qué hacemos" --- */
.proceso__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 1000px) { .proceso__grid { grid-template-columns: repeat(3, 1fr); } }
/* Mobile: slider horizontal con snap. Cada tarjeta al 78% para que asome la
   siguiente y se note que se puede deslizar. */
@media (max-width: 640px) {
  .proceso__grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    padding-bottom: var(--s-3);
    scroll-padding-left: var(--container-pad);
    scrollbar-width: none;
  }
  .proceso__grid::-webkit-scrollbar { display: none; }
  .proceso-step {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
/* Indicadores tipo carrusel (dots) — solo en el slider mobile.
   El activo se estira en una píldora celeste. */
.proceso__dots { display: none; }
@media (max-width: 640px) {
  .proceso__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--s-5);
  }
}
/* Compartido por el slider de Proceso y el de la galería de obras.
   El JS crea los dots con esta clase, así que no hay markup que tocar. */
.carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.carousel-dot.is-active {
  width: 24px;
  background: var(--c-celeste-bright);
}
@media (prefers-reduced-motion: reduce) {
  .carousel-dot { transition: none; }
}
.proceso-step {
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.proceso-step__num {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wider);
  color: var(--c-celeste-bright);
  font-weight: var(--fw-medium);
}
.proceso-step__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  margin: var(--s-3) 0;
}
.proceso-step__desc {
  color: var(--c-gray-300);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* --- Postventa: banda destacada (5º paso) --- */
.postventa__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 880px) { .postventa__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
/* La foto es vertical (2:3). Con un alto fijo la caja quedaba casi cuadrada y
   el recorte se comía casi un tercio: los pies de ella o las manos de él,
   según dónde cayera. Con proporción, el recorte es siempre el mismo y mucho
   menor, y además la foto acompaña el ancho de su columna. */
.postventa__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-black-dark);
  aspect-ratio: 4 / 5;
}
.postventa__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Apenas por debajo del centro: reparte lo poco que sobra sin llegar a
     tocar ni las manos de arriba ni los pies de abajo. */
  object-position: center 55%;
}
.postventa__content { display: flex; flex-direction: column; }
.postventa__step { color: var(--c-celeste-bright); }
.postventa__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: var(--s-2) 0 var(--s-3);
}
.postventa__title .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }
.postventa__body {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-gray-300);
  line-height: var(--lh-base);
  max-width: 44ch;
  margin-bottom: var(--s-4);
}
.postventa__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--s-3);
}
@media (max-width: 880px) { .postventa__list { grid-template-columns: 1fr; } }
.postventa__list li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--s-1) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.postventa__item-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
}
.postventa__item-desc {
  color: var(--c-gray-300);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.postventa__cta {
  align-self: start;
  /* Antes era margin-top:auto, que lo empujaba al fondo de la columna: en
     monitores grandes la foto es alta, la columna se estiraba con ella y
     quedaba un hueco enorme entre el texto y el botón. */
  margin-top: var(--s-4);
  padding: 0.55rem 1.2rem;
  font-size: var(--fs-small);
  gap: 0.5rem;
}

/* ============================================================
   PROYECTOS (proyectos.html)
   ============================================================ */
/* --- Mosaico ---
   Grilla de celdas iguales donde algunas piezas ocupan dos filas o dos
   columnas. Es lo que le da el ritmo irregular sin necesidad de masonry. */
/* Sin hero: la página abre con el título, así que hace falta el aire que
   normalmente aporta el hero para despejar la barra fija. */
.proyectos { padding-top: clamp(7.5rem, 15vh, 10rem); }
.proy-cabecera { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.proy-titulo {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  margin-top: var(--s-3);
}
.proy-titulo .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }

.proy-mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(9rem, 14vw, 15rem);
  gap: clamp(0.5rem, 1vw, 0.9rem);
  /* Con celdas de distinto tamaño quedan huecos: dense los rellena con las
     fotos que entran, en vez de dejar el mosaico agujereado. */
  grid-auto-flow: dense;
}
.proy-foto--ancha { grid-column: span 2; }
.proy-foto--alta  { grid-row: span 2; }
@media (max-width: 900px) {
  .proy-mosaico { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .proy-mosaico { grid-template-columns: 1fr; }
  .proy-foto--ancha { grid-column: span 1; }
  .proy-foto--alta { grid-row: span 1; }
}
.proy-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-black-soft);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.proy-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
/* El efecto: la señalada se agranda y se aclara, y el resto del mosaico baja
   de intensidad. Queda una sola foto en foco por vez. */
@media (hover: hover) {
  .proy-mosaico:hover .proy-foto { opacity: 0.45; }
  .proy-mosaico:hover .proy-foto:hover {
    opacity: 1;
    transform: scale(1.02);
    z-index: 2;
  }
  .proy-foto:hover img { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .proy-foto, .proy-foto img { transition: none; }
  .proy-mosaico:hover .proy-foto:hover { transform: none; }
  .proy-foto:hover img { transform: none; }
}

/* ============================================================
   REPARACIONES (reparaciones.html)
   ============================================================ */
/* Logo de la unidad, sobre el título del hero. Va con alto fijo para que no
   dependa del ancho de la pantalla y siempre se lea igual. */
.rep-hero__logo {
  width: auto;
  height: clamp(2.4rem, 5.5vw, 3.4rem);
  margin-bottom: var(--s-4);
}

/* --- Los tres pasos: foto, número, título y una línea --- */
.rep-pasos__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.rep-paso__media {
  margin: 0 0 var(--s-5);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-black-soft);
}
.rep-paso__media img { width: 100%; height: 100%; object-fit: cover; }
/* El número va debajo de la foto, no encima: se lee siempre igual sin depender
   de qué haya en la imagen. */
.rep-paso__num {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  color: var(--c-celeste-bright);
  margin-bottom: var(--s-2);
}
.rep-paso__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--s-2);
}
.rep-paso__desc {
  color: var(--c-gray-300);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
}
/* Mobile: los tres pasos pasan a filas, con la foto chica al costado. Apilar
   las tarjetas enteras daba más de 1000px de scroll, y un slider escondía dos
   de los tres: acá se ve el circuito completo de una sola mirada. */
@media (max-width: 700px) {
  .rep-pasos__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .rep-paso {
    display: grid;
    grid-template-columns: clamp(5rem, 24vw, 7rem) 1fr;
    /* Las tres filas van declaradas: sin esto, el "1 / -1" de la foto no tiene
       a dónde llegar —no hay grilla explícita— y termina ocupando una sola
       fila, con el título y la bajada cayendo por debajo de la imagen. */
    grid-template-rows: auto auto auto;
    column-gap: var(--s-4);
    align-items: start;
  }
  .rep-paso__media {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
    aspect-ratio: 1 / 1;
  }
  .rep-paso__num,
  .rep-paso__title,
  .rep-paso__desc { grid-column: 2; }
  .rep-paso__title { font-size: var(--fs-body); }
  .rep-paso__desc { font-size: var(--fs-small); }
}

/* Botón suelto entre secciones: el llamado se repite, no se espera al final */
.rep-cta-inline {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* --- Qué reparamos: dos listas al hilo, sin descripciones --- */
/* Dos columnas que son una sola lista partida al medio: sin rótulos, para que
   se lea de corrido y el visitante encuentre lo suyo. */
.rep-que__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
@media (max-width: 700px) { .rep-que__grid { grid-template-columns: 1fr; } }
.rep-lista { list-style: none; }
.rep-lista li {
  padding: clamp(0.7rem, 1.6vw, 1rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-white-chalk);
}

/* --- Banda de cierre: foto a todo el ancho con el llamado encima --- */
.rep-banda {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 12vw, 8rem);
  background: var(--c-black-dark);
}
.rep-banda__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}
/* La foto tiene mucho claro: sin este velo el texto blanco no se lee */
.rep-banda::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.35) 100%);
  z-index: 1;
}
.rep-banda__inner { position: relative; z-index: 2; }
.rep-banda__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  margin-bottom: var(--s-6);
  max-width: 20ch;
}
.rep-banda__title .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }

@media (max-width: 700px) {
  /* El velo horizontal deja clara la mitad derecha; a todo el ancho el texto
     cae ahí y no se lee. Se pasa a un velo parejo de arriba a abajo. */
  .rep-banda::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.84) 100%);
  }
  .rep-banda__title { max-width: none; }
}
/* Igual que los botones del hero y del cierre en el resto del sitio: a todo el
   ancho, para que sean fáciles de tocar y no queden tres tamaños distintos. */
@media (max-width: 480px) {
  .rep-cta-inline .btn,
  .rep-banda .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* --- Reciclaje: bloque editorial --- */
/* El video es vertical (9:16), así que la columna que lo aloja se mantiene
   angosta y el grid se acota: a 1440px de contenedor un video a todo ancho
   quedaba de más de 1000px de alto. La foto pasa debajo del texto para que
   la columna derecha alcance una altura parecida a la del video. */
.reciclaje__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1120px;
  margin-inline: auto;
}
.reciclaje__video {
  order: -1;
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-black-soft);
  box-shadow: var(--shadow-lg);
}
.reciclaje__video video { width: 100%; height: 100%; object-fit: cover; }

/* Botón de sonido: oculto hasta que el usuario se acerca al video —con el
   mouse en desktop, con el dedo en mobile (clase .is-ui desde el JS)—. */
.video-sonido {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.reciclaje__video.is-ui .video-sonido,
.reciclaje__video:focus-within .video-sonido {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Sólo donde el hover es real: en táctil se queda "pegado" tras el tap. */
@media (hover: hover) {
  .reciclaje__video:hover .video-sonido { opacity: 1; transform: none; pointer-events: auto; }
}
.video-sonido:hover { background: rgba(0, 0, 0, 0.75); }
/* Con movimiento reducido el JS pone los controles nativos, que ya traen
   volumen: el botón propio sobraría y se superpondría con la barra. */
.reciclaje__video video[controls] ~ .video-sonido { display: none; }
.video-sonido__ico {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-sonido__ico--on { display: none; }
.video-sonido[aria-pressed="true"] .video-sonido__ico--on { display: block; }
.video-sonido[aria-pressed="true"] .video-sonido__ico--off { display: none; }
.reciclaje__media {
  aspect-ratio: 16 / 9;
  margin-top: var(--s-6);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-black-soft);
}
.reciclaje__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
  .reciclaje__grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    max-width: none;
  }
  /* El bloque de texto deja de ser una caja y sus hijos pasan a ser ítems del
     grid: es la única forma de meter el video entre la bajada y el botón sin
     duplicar marcado ni tocar el desktop. */
  .reciclaje__content { display: contents; }
  .reciclaje__media { display: none; }

  /* Apilado: título, bajada, video y el botón cerrando. Los márgenes se
     anulan porque ahora el aire lo da el gap del grid. */
  .reciclaje__title { order: 1; margin: 0; }
  .reciclaje__body { order: 2; margin: 0; }
  /* Acotar el ancho evita que a 9:16 ocupe dos pantallas de alto en tablet. */
  .reciclaje__video { order: 3; width: 100%; max-width: 21rem; margin-inline: auto; }
  .reciclaje__cta { order: 4; justify-self: start; }
}
.reciclaje__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: var(--s-3) 0 var(--s-5);
}
.reciclaje__title .accent { color: var(--c-celeste-bright); font-weight: var(--fw-light); }
.reciclaje__body {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-gray-300);
  line-height: var(--lh-relaxed);
  max-width: 46ch;
  margin-bottom: var(--s-5);
}
.reciclaje__cta { color: var(--c-celeste-bright); }

/* ============================================================
   PÁGINA NOSOTROS (nosotros.html)

   Es una página de lectura, no de impacto: el texto institucional
   es largo y va en cuerpo de lectura, con titulares contenidos.
   Los bloques que reutiliza (.confianza, .historia-block) están
   calibrados para la home, donde llevan tres palabras a tamaño
   display; acá esa misma escala se comía la pantalla. Todo cuelga
   de .page--nosotros para no mover nada de la home.
   ============================================================ */
.page--nosotros .page-hero__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}
.page--nosotros .confianza__text h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  line-height: 1.25;
}
.page--nosotros .historia-block__title {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  max-width: 30ch;
}
/* El numeral de la home llega a 30rem y es el elemento de la
   sección; acá acompaña al texto, no lo tapa. */
.page--nosotros .historia-block__numeral span {
  font-size: clamp(6rem, 13vw, 14rem);
}
/* El segundo bloque oscuro invierte el orden para que las dos
   fotos no queden apiladas contra el mismo margen. En una sola
   columna el orden vuelve a ser foto y después texto. */
.page--nosotros .confianza__grid--invertido .confianza__media { order: 2; }
@media (max-width: 880px) {
  .page--nosotros .confianza__grid--invertido .confianza__media { order: 0; }
}
/* Galería suelta: acá va sin el bloque de texto del showroom de la
   home, así que no necesita el aire que lo separaba de arriba. */
.page--nosotros .showroom__gallery { margin-top: 0; }