/* EcoAires — Tienda
   Implementación de "Tienda EcoAires.dc.html" (Claude Design canvas). */

:root {
  /* Paleta oficial del manual de marca --------------------------------- */
  --navy: #23405E;         /* azul institucional, texto fuerte y botones   */
  --azul: #0032A1;         /* azul profundo, linea industrial              */
  --turquesa: #50BFC6;     /* turquesa de marca: fondos, ondas, acentos    */
  --verde: #74C465;        /* verde, linea hogar                           */
  --oliva: #7D9F0C;
  --amarillo: #DBD962;

  /* El turquesa de marca sobre blanco da 2.2:1 de contraste, insuficiente
     para texto. Para tipografia, enlaces y bordes se usa esta version
     oscurecida del mismo tono (184deg), que llega a 5.5:1. */
  --teal: #276D72;
  --teal-dark: #205B60;
  --teal-deep: #1B4D51;

  --navy-soft: #33547A;    /* navy aclarado, para degradados               */

  --ink: #33383F;
  --ink-2: #4A5261;
  --ink-3: #6B7480;
  --ink-4: #8B93A0;
  --placeholder: #A9B0BA;

  --line: #E3E8EF;
  --line-soft: #EDF1F6;
  --line-softer: #F0F3F7;
  --line-strong: #C9D3E0;
  --line-chip: #DDE4EC;
  --line-tab: #D6DDE7;

  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --surface-3: #F5F7FA;
  --surface-4: #F1F5F9;

  --info-bg: #F1F6FC;
  --info-border: #D6E4F5;
  --info-ink: #1D6FD0;

  --mint-bg: #EDF8F9;
  --mint-border: #BFE5E8;

  --warn-bg: #FEFCEC;
  --warn-border: #EFEDBE;

  --whatsapp: #1FA855;
  --danger: #D14343;

  /* Las tres lineas usan colores de la paleta, de menor a mayor porte. */
  --hogar: #4E9E42;              /* #74C465 oscurecido para que lea texto */
  --hogar-tint: #F2FAF1;
  --hogar-border: #CDEBC8;
  --comercial: #276D72;
  --comercial-tint: #EDF8F9;
  --comercial-border: #BFE5E8;
  --industrial: #0032A1;
  --industrial-tint: #EFF3FC;
  --industrial-border: #C6D3F0;

  --shell: 1200px;
  /* Poppins es la unica tipografia de la marca; las dos variables quedan
     porque el CSS ya las usa para separar titulos de texto corrido. */
  --display: 'Poppins', system-ui, sans-serif;
  --text: 'Poppins', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  font-family: var(--text);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }

input, select, button, textarea { font-family: inherit; }
input:focus, select:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
::placeholder { color: var(--placeholder); }

img { max-width: 100%; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.shell { max-width: var(--shell); margin: 0 auto; width: 100%; padding-left: 24px; padding-right: 24px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 40;
  /* Gris casi blanco: es lo que hace que la solapa abierta, que si es blanca,
     se despegue. Con el header blanco la solapa no tenia de que despegarse. */
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 3px rgba(35, 64, 94, 0.06);
}

/* Las solapas ocupan el alto entero del header y apoyan sobre su borde
   inferior, como las hojas de una planilla: por eso el inner no lleva padding
   vertical propio y los hijos se estiran. */
.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-height: 86px;
  position: relative;   /* ancla del panel desplegable en mobile */
}

/* El logo real es apaisado (3,87:1), no la caja 108x71 del canvas:
   se fija el alto y el ancho sale solo. */
.site-header__logo {
  height: 62px;
  width: auto;
  max-width: 280px;
  flex: none;
  cursor: pointer;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.site-nav span,
.site-nav a { cursor: pointer; color: inherit; text-decoration: none; }
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 0 auto;
  /* El nombre entero, siempre. Si no entra en una linea parte en dos: es
     preferible una solapa de dos renglones a llamar a la seccion de otra
     manera en la barra que en el resto del sitio. */
  white-space: normal;
  max-width: 9.6em;
  line-height: 1.16;
  padding: 0 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  /* Un pixel abajo: la solapa activa tapa el borde del header, que es lo que
     hace que se lea como una hoja adelante y no como un boton pintado. */
  margin-bottom: -1px;
  transition: background 0.16s ease, color 0.16s ease;
}
.site-nav a { color: var(--ink-3); }
.site-nav a:hover {
  color: var(--navy);
  text-decoration: none;
  background: rgba(80, 191, 198, 0.1);
}

.site-nav .is-current {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.1px;
  background: var(--surface);
  border-color: var(--line-strong);
  /* Tres cosas a la vez: la barra turquesa de arriba, un resplandor del mismo
     color que la levanta del gris, y la sombra hacia arriba. Sin el
     resplandor la solapa se distinguia, pero habia que buscarla. */
  box-shadow:
    inset 0 4px 0 var(--turquesa),
    inset 0 -14px 22px -18px rgba(80, 191, 198, 0.55),
    0 -3px 12px rgba(35, 64, 94, 0.09);
}
.site-nav .is-current:hover { background: var(--surface); color: var(--navy); }

/* La tienda es la unica accion comercial del menu: va destacada y no es una
   solapa, porque no es una seccion mas del sitio. */
.site-nav__tienda {
  color: var(--navy) !important;
  font-weight: 700;
  border: 1.5px solid var(--line-strong) !important;
  border-radius: 999px !important;
  padding: 9px 22px !important;
  margin-left: auto;
  align-self: center;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.site-nav__tienda:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  background: var(--mint-bg);
}
/* Dentro de la tienda la capsula se pinta: es el unico item que cambia de
   fondo, porque tampoco es una seccion mas del sitio. */
.site-nav__tienda.is-current {
  border-color: var(--teal) !important;
  background: var(--teal);
  color: #fff !important;
}
.site-nav__tienda.is-current:hover { background: var(--teal-dark); color: #fff !important; }

.site-header__home { display: flex; align-items: center; flex: none; line-height: 0; }

/* Hamburguesa: solo aparece en pantallas chicas. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sólo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cart-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  flex: none;
}
.cart-button:hover { background: var(--navy); }

.cart-button__count {
  background: #fff;
  color: var(--teal);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ---------- Shared bits ---------- */

.view { padding: 22px 24px 60px; }

.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--navy);
}

.section-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}

.section-sub { font-size: 15px; color: var(--ink-3); margin: 0; }

.check {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
}

.card { border: 1px solid var(--line); border-radius: 10px; }

/* Image placeholder used when an asset is missing from /assets */
.img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, #F4F7FB 0 10px, #EAF0F7 10px 20px);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 6px;
  line-height: 1.35;
  min-height: 40px;
  overflow: hidden;
}

/* ---------- Trust strips ---------- */

.trust-strip { border-bottom: 1px solid var(--line); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.trust-item {
  display: flex;
  gap: 13px;
  align-items: center;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.trust-item svg,
.trust-item .trust-icon { flex: none; width: 50px; height: 50px; object-fit: contain; }
.trust-item img.trust-icon { mix-blend-mode: multiply; }

.trust-item__title { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--navy); }
.trust-item__sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; }

.trust-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.trust-box .trust-item { align-items: flex-start; }

/* Los cuatro del checkout van en columna: icono arriba, texto abajo, sin la
   línea divisoria que sí llevan los de la barra superior. */
.trust-item--vert {
  flex-direction: column;
  align-items: center !important;
  text-align: center;
  border-left: 0;
  padding-left: 0;
  gap: 10px;
}
.trust-item--vert svg { width: 34px; height: 34px; }
.trust-box .trust-item__title { font-size: 13.5px; }
.trust-box .trust-item__sub { font-size: 12.5px; margin-top: 4px; line-height: 1.5; }

/* ---------- Callout banners ---------- */

.banner {
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.banner--info { background: var(--info-bg); border: 1px solid var(--info-border); }
.banner--warn { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 10px; }
.banner--plain { border: 1px solid var(--line); border-radius: 10px; }

.banner__body { flex: 1; min-width: 260px; }
.banner__title { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--navy); }
.banner__text { font-size: 14px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }

.btn-outline-blue {
  background: #fff;
  border: 1px solid var(--comercial);
  color: var(--comercial);
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline-blue:hover { background: var(--comercial); color: #fff; }

.btn-whatsapp {
  background: var(--whatsapp);
  border: 0;
  color: #fff;
  border-radius: 6px;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.btn-whatsapp:hover { filter: brightness(0.93); }
.btn-whatsapp small { display: block; font-weight: 500; font-size: 12px; }

/* Con el logo adelante, el botón pasa a ser icono + texto en una fila. */
a.btn-whatsapp.btn-whatsapp--logo { display: inline-flex; align-items: center; gap: 11px; }
.btn-whatsapp__logo { width: 26px; height: 26px; flex: none; }

.fineprint { text-align: center; font-size: 11.5px; color: var(--ink-4); margin: 20px 0 0; }

/* ---------- Hero ---------- */

.hero {
  background: var(--surface-4);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
  position: relative;
  z-index: 2;
  min-height: 340px;
}

.hero__title {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.08;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: -1px;
}
.hero__title em { color: var(--teal); font-weight: 700; font-style: normal; }

.hero__kicker {
  font-family: var(--display);
  font-size: 19px;
  color: var(--navy);
  margin: 0 0 18px;
  font-weight: 500;
}

.hero__lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 26px;
  max-width: 460px;
  text-wrap: pretty;
}

.hero__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  max-width: 460px;
}

.hero__check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

.hero__check span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: none;
}

.hero__art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  /* En un <img> reemplazado, top+bottom no fijan el alto: sin esto queda
     corto y se ve el fondo abajo. */
  height: 100%;
  z-index: 1;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 26%, rgba(0, 0, 0, 0.85) 55%, #000 78%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 26%, rgba(0, 0, 0, 0.85) 55%, #000 78%);
}
.hero__art.img-missing { mask-image: none; -webkit-mask-image: none; opacity: 0.55; }

/* ---------- Line cards ---------- */

.lines-head { padding-top: 54px; padding-bottom: 10px; text-align: center; }

.lines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 28px;
  padding-bottom: 54px;
}

.line-card {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}

.line-card__media {
  position: relative;
  height: 168px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background-color: #FFFFFFEB;
  overflow: hidden;
}
.line-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--teal); }
.line-card__media .img-missing { width: 100%; height: 100%; border: 0; border-radius: 0; }

.line-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.line-card__label { font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: var(--ink-3); }
.line-card__name { font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: -0.4px; }
.line-card__text { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; flex: 1; text-wrap: pretty; }

.line-card__cta {
  align-self: flex-start;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.line-card__cta:hover { filter: brightness(0.92); }

/* ---------- Catalogue ---------- */

.catalogue {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.catalogue__inner { padding-top: 52px; padding-bottom: 52px; text-align: center; }

.filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 30px;
  flex-wrap: wrap;
}

.filter {
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line-tab);
}

/* ---------- Visor de fotos ---------- */

.gallery__zoom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: zoom-in;
}
.gallery__zoom img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.gallery__lupa {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(18, 53, 107, 0.82);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.gallery__lupa svg { width: 19px; height: 19px; }
.gallery__zoom:hover .gallery__lupa,
.gallery__zoom:focus-visible .gallery__lupa { opacity: 1; }

.zoom { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }

.zoom__fondo {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(11, 22, 44, 0.9);
  cursor: zoom-out;
}

.zoom__caja {
  position: relative;
  z-index: 1;
  width: min(1000px, 94vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.zoom__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.zoom__titulo { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--navy); }
.zoom__titulo em {
  font-family: var(--text);
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-3);
  margin-left: 10px;
}
.zoom__cerrar {
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 4px;
}
.zoom__cerrar:hover { color: var(--navy); }

/* Los controles de la lupa, al lado de la cruz de cerrar. */
.zoom__herramientas { display: flex; align-items: center; gap: 4px; }
.zoom__lupa {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom__lupa:hover { background: var(--surface-3); border-color: var(--line-strong); }
/* Tabular para que el número no baile al pasar de 100% a 250%. */
.zoom__aumento {
  min-width: 48px;
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.zoom__marco {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 62px;
  /* Un gris algo más marcado que el resto: los equipos son blancos y sobre
     fondo casi blanco se pierden los bordes. */
  background: var(--surface-4);
  /* La foto acercada se recorre por dentro del marco y no se derrama sobre
     las flechas ni sobre la barra del título. */
  overflow: hidden;
}
.zoom__foto {
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  /* El punto que queda quieto al acercar lo calcula el JS a partir del centro
     de la foto; el origen tiene que ser ese mismo. */
  transform-origin: 50% 50%;
}
/* Con la foto acercada el gesto es arrastrar, no scrollear: sin esto el
   navegador se queda con el movimiento del dedo antes de que llegue al JS. */
.zoom__marco.is-ampliado { touch-action: none; cursor: grab; }
.zoom__marco.is-ampliado .zoom__foto { cursor: grab; }
.zoom__marco.is-ampliado:active,
.zoom__marco.is-ampliado:active .zoom__foto { cursor: grabbing; }

.zoom__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(18, 53, 107, 0.12);
}
.zoom__flecha:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.zoom__flecha--prev { left: 10px; }
.zoom__flecha--next { right: 10px; }

.zoom__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
}
.zoom__miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.zoom__mini {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom__mini img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.zoom__mini.is-active { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.zoom__contador { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* ---------- Aviso destacado ---------- */

.panel-aviso { display: flex; gap: 14px; align-items: flex-start; }
.panel-aviso__icono {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--teal-deep);
  margin-top: 1px;
}

/* ---------- Otras líneas desde la ficha ---------- */

.otras-lineas { margin-top: 36px; display: grid; gap: 10px; }
.otras-lineas__titulo {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--navy);
  margin-bottom: 4px;
}
.otras-lineas__item {
  display: grid;
  gap: 3px;
  border: 1px solid;
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
}
.otras-lineas__item:hover { text-decoration: none; filter: brightness(0.97); }
.otras-lineas__nombre { font-family: var(--display); font-size: 15px; font-weight: 600; }
.otras-lineas__blurb { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.otras-lineas__ir { font-size: 12.5px; font-weight: 700; margin-top: 3px; }

/* ---------- Aviso de flete en el carrito ---------- */

.drawer__flete {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 11px 13px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.drawer__flete svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #B7791F; }
/* El texto va en un solo <span>: antes cada trozo suelto era un flex item y la
   leyenda se partía en columnas. */
.drawer__flete span { flex: 1; min-width: 0; }
.drawer__flete strong { color: var(--navy); }

/* ---------- Preguntas frecuentes ---------- */

.faq { max-width: 820px; }
.faq__grupo { margin-top: 34px; }

.faq__titulo {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px;
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  list-style: none;
  cursor: pointer;
  padding: 16px 2px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--teal); }

/* El signo se dibuja con dos barras: una gira y desaparece al abrir. */
.faq__item summary span {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 4px;
}
.faq__item summary span::before,
.faq__item summary span::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 1px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.faq__item summary span::after { transform: rotate(90deg); }
.faq__item[open] summary span::after { transform: rotate(0); opacity: 0; }

.faq__resp { padding: 0 40px 18px 2px; }
.faq__resp p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* La tabla comparativa dentro de una respuesta. */
.faq__tabla-caja {
  overflow-x: auto;
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.faq__tabla {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.faq__tabla th,
.faq__tabla td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.faq__tabla thead th {
  border-top: 0;
  background: var(--surface-3);
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
}
.faq__tabla tbody th {
  font-weight: 600;
  color: var(--navy);
  width: 22%;
}
.faq__resp .faq__nota {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ---------- Página de línea ---------- */

.linea__hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* La carátula ocupa la mitad derecha y se desvanece hacia la izquierda, para
   que el texto caiga sobre el color plano de la línea. */
.linea__caratula {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 30%, #000 65%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 30%, #000 65%);
}

.linea__hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 30px;
  padding-bottom: 46px;
  max-width: var(--shell);
}

.linea__hero .crumbs { margin-bottom: 22px; }

.linea__label {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  margin-bottom: 8px;
}

.linea__titulo {
  font-family: var(--display);
  font-size: 40px;
  line-height: 1.12;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -1px;
  margin: 0 0 16px;
  max-width: 620px;
  text-wrap: pretty;
}

.linea__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 26px;
  max-width: 580px;
  text-wrap: pretty;
}

.linea__datos {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(18, 53, 107, 0.12);
  max-width: 580px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.linea__datos b {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  display: block;
  letter-spacing: -0.4px;
}

.linea__equipos { padding-top: 46px; padding-bottom: 46px; }

.linea__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.linea__barra .section-title { font-size: 24px; }

.linea__otras {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.linea__otras a {
  border: 1px solid;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
}
.linea__otras a:hover { text-decoration: none; filter: brightness(0.9); }

/* --- buscador y orden --- */

.buscador {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 26px auto 0;
  text-align: left;
}

.buscador__campo {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
}
.buscador__campo svg {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--ink-4);
  pointer-events: none;
}
.buscador__campo input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 11px 38px 11px 40px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.buscador__campo input::-webkit-search-cancel-button { display: none; }

.buscador__limpiar {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-4);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.buscador__limpiar:hover { background: var(--line); }

.buscador__orden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
}
.buscador__orden select {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-size: 13.5px;
  background: #fff;
  color: var(--ink);
}

.sin-resultados {
  max-width: 780px;
  margin: 16px auto 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  text-align: left;
}
.sin-resultados strong { color: var(--navy); }
.sin-resultados button {
  border: 0;
  background: none;
  color: var(--teal);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* --- comparador --- */

.comparar-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  margin-top: 2px;
}
.comparar-check input { width: 15px; height: 15px; accent-color: var(--teal); cursor: pointer; }
.comparar-check:hover { color: var(--teal); }
.comparar-check.is-lleno { opacity: 0.45; cursor: not-allowed; }
.comparar-check.is-lleno input { cursor: not-allowed; }

.cmp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 -6px 20px rgba(18, 53, 107, 0.25);
}
.cmp-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-wrap: wrap;
}
.cmp-bar__items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cmp-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 6px 5px 13px;
  font-size: 13px;
  font-weight: 600;
}
.cmp-bar__chip button {
  border: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.cmp-bar__chip button:hover { background: rgba(255, 255, 255, 0.35); }

.cmp-bar__hint { font-size: 12.5px; color: #C9D8EE; }
.cmp-bar__acciones { display: flex; gap: 10px; align-items: center; }
.cmp-bar__acciones .btn-ghost {
  flex: none;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 9px 16px;
}
.cmp-bar__acciones .btn-ghost:hover { border-color: #fff; color: #fff; }

.cmp-bar__ver {
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.cmp-bar__ver:hover { background: var(--teal-dark); }
.cmp-bar__ver:disabled { background: rgba(255, 255, 255, 0.2); cursor: not-allowed; }

body.con-cmp-bar { padding-bottom: 76px; }

.cmp__scroll { overflow-x: auto; margin-top: 22px; }
.cmp__tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp__tabla th, .cmp__tabla td { padding: 12px 14px; text-align: left; }
.cmp__tabla thead th { vertical-align: bottom; border-bottom: 2px solid var(--line); }

.cmp__etiqueta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  width: 210px;
}

.cmp__foto {
  display: block;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.cmp__foto img { max-height: 120px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.cmp__nombre { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--navy); }
.cmp__linea { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; margin-top: 2px; }
.cmp__comprar { width: 100%; margin-top: 10px; }
.cmp__quitar {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.cmp__quitar:hover { color: var(--danger); }

.cmp__tabla tbody tr { border-bottom: 1px solid var(--line-soft); }
.cmp__tabla tbody td { font-size: 14px; color: var(--ink); }
.cmp--difiere td { font-weight: 600; color: var(--navy); }
.cmp--difiere { background: #F7FAFD; }
.cmp--igual td { color: var(--ink-3); }

/* --- selector de superficie --- */

.m2 {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 26px auto 0;
  max-width: 780px;
  text-align: left;
}

/* Solo el titulo, con el > delante: la bajada tiene su propio <strong> adentro
   -la palabra "teorica"- y con el selector suelto ese tambien se volvia un
   bloque de 16 px, asi que el renglon se partia en tres. */
.m2__head > strong {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}
.m2__head span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.m2__head span strong {
  display: inline;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
}

.m2__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.m2__opt {
  border: 1px solid var(--line-tab);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.m2__opt:hover { border-color: var(--teal); color: var(--teal); }
.m2__opt.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }

.m2__otra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  margin-left: 4px;
}
.m2__otra input {
  width: 78px;
  border: 1px solid var(--line-tab);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  text-align: center;
}

.m2__resultado {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.m2__resultado button {
  border: 0;
  background: none;
  color: var(--teal);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.m2__volumen {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.m2__volumen svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--info-ink); }
.m2__volumen strong { color: var(--navy); }

/* --- bloque de alquiler --- */

.alquiler {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  background: linear-gradient(135deg, var(--navy) 0%, #1B4A8F 100%);
  border-radius: 14px;
  padding: 30px 34px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Halo suave, para que el bloque no sea un rectángulo plano. */
.alquiler::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(14, 140, 140, 0.28);
  pointer-events: none;
}

.alquiler__marca {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.5);
  align-self: stretch;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  padding-right: 4px;
}

.alquiler__cuerpo { position: relative; z-index: 1; }

.alquiler__titulo {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0 0 7px;
  color: #fff;
}
.alquiler__texto {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #C9D8EE;
  max-width: 520px;
}

.alquiler__puntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.alquiler__puntos li {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
}

.alquiler__accion {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.alquiler__cta {
  background: var(--whatsapp);
  color: #fff;
  border-radius: 8px;
  padding: 15px 30px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.alquiler__cta:hover { filter: brightness(0.93); color: #fff; text-decoration: none; }
.alquiler__nota { font-size: 12px; color: rgba(255, 255, 255, 0.65); }

/* --- stock --- */

.stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.stock__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.stock--detalle { font-size: 14px; margin: -8px 0 18px; }

.btn-buy:disabled,
.btn-add:disabled {
  background: var(--line-strong);
  cursor: not-allowed;
  filter: none;
}

.summary__line--agotado { opacity: 0.75; }
.summary__agotado {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--danger);
  margin-top: 2px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}

.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card:hover { box-shadow: 0 10px 24px rgba(18, 53, 107, 0.1); }

/* Los equipos se dibujan a escala entre si: la altura de la foto es
   proporcional a la altura real, y todos apoyados en el mismo piso. Antes cada
   foto llenaba su recuadro y un ROTO 38 de 95 cm se veia igual de grande que un
   ROTO 59 de 2,23 m. La escala la pone la tarjeta en --escala. */
.product-card__media {
  position: relative;
  height: 205px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: #fff;
}
.product-card__media img {
  max-height: calc(100% * var(--escala, 1));
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-card__link { align-items: flex-end; }
.product-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.product-card__media .img-missing { width: 100%; height: 100%; }

.badge-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 4px 9px;
  border-radius: 4px;
  z-index: 1;
}

.product-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  border-top: 1px solid var(--line-softer);
}

.product-card__name { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--navy); }
.product-card__specs { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.product-card__price { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--navy); margin-top: 2px; }
.product-card__cuota { font-size: 12px; color: var(--ink-3); }
.product-card__actions { display: flex; gap: 8px; margin-top: 6px; }

.btn-ghost {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  border-radius: 6px;
  padding: 9px 0;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-ghost:hover { border-color: var(--navy); text-decoration: none; color: var(--navy); }

.btn-buy {
  flex: 1;
  border: 0;
  color: #fff;
  border-radius: 6px;
  padding: 9px 0;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.btn-buy:hover { filter: brightness(0.92); }

/* ---------- Product detail ---------- */

.crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 20px; }
.crumbs span { cursor: pointer; }

.detail { display: grid; grid-template-columns: 1fr 1.05fr; gap: 46px; align-items: start; }

.gallery__main {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: #fff;
}
.gallery__main img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.gallery__main .img-missing { width: 100%; height: 100%; font-size: 13px; }

.gallery__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 5px;
  line-height: 1.3;
  z-index: 1;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.gallery__thumb {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  background: #fff;
}
.gallery__thumb:hover { border-color: var(--line-strong); }
.gallery__thumb.is-active { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.gallery__thumb img { max-height: 62px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
/* Si falta el archivo, el recuadro de reemplazo lleva el nombre de la foto:
   es el unico lugar donde ese texto sigue estando a la vista. */
.gallery__thumb .img-missing { width: 100%; height: 62px; border: 0; font-size: 9px; }

.detail__model {
  display: inline-block;
  color: #fff;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: 5px;
}

.detail__title {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--navy);
  margin: 16px 0 6px;
  letter-spacing: -0.8px;
  text-wrap: pretty;
}

.detail__cat { font-size: 13.5px; color: var(--ink-3); margin-bottom: 20px; }
.detail__cat b { color: var(--teal); font-weight: 600; }

.detail__tagline {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 26px;
  text-wrap: pretty;
}

.detail__badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detail__badge {
  display: flex;
  gap: 12px;
  align-items: center;
  border-left: 2px solid var(--teal);
  padding-left: 12px;
}
.detail__badge .badge-icono {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--teal);
}
.detail__badge div { font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.4; }

.detail__price {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  color: var(--navy);
  margin: 26px 0 18px;
  letter-spacing: -1px;
}

.buy-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }

.qty { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.qty button { width: 38px; align-self: stretch; border: 0; background: #fff; font-size: 18px; color: var(--navy); cursor: pointer; }
.qty button:hover { background: var(--surface-4); }
.qty output { width: 38px; text-align: center; font-weight: 700; color: var(--navy); font-size: 15px; }

.btn-add {
  flex: 1;
  min-width: 220px;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 15px 20px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.6px;
  cursor: pointer;
}
.btn-add:hover { background: var(--teal-dark); }

.btn-rent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--industrial);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 15px 26px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn-rent:hover { filter: brightness(0.93); color: #fff; text-decoration: none; }
.btn-rent:visited { color: #fff; }

.pay-note { display: flex; gap: 26px; margin-top: 18px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.pay-note b { color: var(--navy); }
.pay-note .sep { color: var(--line-strong); }
.pay-note .off { color: var(--teal); }

.rent-note { font-size: 13px; color: var(--ink-3); margin-top: 12px; }

.short-trust {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 40px;
  padding: 24px 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.short-trust div {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  padding-left: 18px;
  border-left: 1px solid var(--line-chip);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* El dibujo manda acá: son cuatro promesas que se leen de un vistazo -envíos,
   garantía, asesoramiento, servicio- y a 21 px el icono no se distinguía del
   texto. flex: 0 0 auto para que el SVG no se aplaste cuando el texto va en dos
   líneas, que es lo que pasa en "Repuestos y servicio técnico". */
.short-trust svg {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

/* La nota que explica el (*) de la superficie. Va pegada a la tabla y no
   separada por el aire de siempre: es parte de la tabla, no un párrafo suelto. */
.specs__nota {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
}

.highlights {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 10px;
  margin-top: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  text-align: center;
}
.highlights dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; color: var(--info-ink); margin-bottom: 8px; }
.highlights dd { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.35; margin: 0; }

.detail__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; align-items: start; }

.panel-grey { background: var(--surface-3); border-radius: 10px; padding: 24px 26px; }
.panel-mint { background: var(--mint-bg); border: 1px solid var(--mint-border); border-radius: 10px; padding: 24px 26px; }
.panel-mint .eyebrow { color: var(--teal-deep); margin-bottom: 12px; }
.panel-mint p { font-size: 14px; line-height: 1.65; color: var(--ink); margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { background: #fff; border: 1px solid var(--line-chip); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--ink); }

.detail__long { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 44px; align-items: start; }

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.benefit { display: flex; gap: 10px; }
.benefit div { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.benefit b { color: var(--navy); }

.why-title { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--navy); margin: 34px 0 14px; }
.why-list { display: flex; flex-direction: column; gap: 10px; }
.why-item { display: flex; gap: 10px; align-items: flex-start; }
.why-item div { font-size: 14px; color: var(--ink); line-height: 1.5; }

.paras { display: flex; flex-direction: column; gap: 14px; }
.paras p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0; text-wrap: pretty; }

.specs { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.specs__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-soft); }
.specs__row:nth-child(even) { background: var(--surface-2); }
.specs__row:last-child { border-bottom: 0; }
.specs__row dt { padding: 13px 18px; font-size: 13.5px; color: var(--ink-2); margin: 0; }
.specs__row dd { padding: 13px 18px; font-size: 13.5px; color: var(--navy); font-weight: 600; margin: 0; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related__card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.related__media { height: 120px; display: flex; align-items: center; justify-content: center; }
.related__media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.related__media .img-missing { width: 100%; height: 100%; }
.related__name { font-size: 12.5px; color: var(--navy); line-height: 1.4; font-weight: 600; flex: 1; }
.related__price { font-size: 13px; color: var(--ink-2); }

.btn-view {
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
}
.btn-view { display: block; text-decoration: none; text-align: center; }
.btn-view:hover { background: var(--teal); text-decoration: none; color: #fff; }

/* ---------- Checkout ---------- */

.back-link { font-size: 13px; color: var(--ink-2); cursor: pointer; margin-bottom: 14px; display: inline-block; }

.checkout__title {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
  letter-spacing: -0.9px;
}
.checkout__lead { font-size: 15px; color: var(--ink-3); margin: 0 0 28px; }

.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.checkout__panel { border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
.checkout__aside { display: flex; flex-direction: column; gap: 18px; }

/* --- asistente de pasos --- */

.pasos {
  display: flex;
  list-style: none;
  margin: 0 0 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  gap: 6px;
}

.pasos__item { flex: 1; min-width: 0; }
.pasos__item > * {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-4);
  text-align: left;
}
.pasos__item button { cursor: pointer; }
.pasos__item button:hover { color: var(--navy); }

.pasos__n {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--surface-4);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.pasos__item.is-actual > * { color: var(--navy); }
.pasos__item.is-actual .pasos__n { background: var(--navy); color: #fff; }
.pasos__item.is-hecho > * { color: var(--ink-2); }
.pasos__item.is-hecho .pasos__n { background: var(--teal); color: #fff; }

.paso { min-height: 260px; }

.paso__resumen {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.paso__resumen strong { display: block; color: var(--navy); margin-top: 3px; font-size: 14px; }

.paso__nota { font-size: 12.5px; color: var(--ink-3); margin: 16px 0 0; line-height: 1.55; }

.transporte {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.transporte__label {
  display: block;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}
.transporte__ayuda {
  margin: 5px 0 11px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
.transporte textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  min-height: 62px;
}
.transporte textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; }

.pasos__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.pasos__atras { flex: none; padding: 13px 20px; text-decoration: none; }

.pasos__siguiente {
  flex: 1;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 15px 24px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.pasos__siguiente:hover { background: #0E2B57; }
.pasos__confirmar { background: var(--teal); letter-spacing: 1px; }
.pasos__confirmar:hover { background: var(--teal-dark); }
.pasos__siguiente:disabled { background: var(--line-strong); cursor: not-allowed; }

/* El resumen acompaña el scroll: la idea de los pasos es que siempre esté a la
   vista mientras se completa.

   Va sobre el aside entero y no sobre un hijo: cuando el sticky tenía un
   hermano debajo, al scrollear se le montaba encima. `align-self: start` evita
   que el grid lo estire a toda la altura, que anularía el sticky. */
.checkout__aside { position: sticky; top: 100px; align-self: start; }

.step { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.step__n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}
.step__label { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--navy); }
.step--later { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line-soft); gap: 24px; }

.billing-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.billing-toggle button {
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 13px 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.billing-toggle button.is-active { background: var(--navy); color: #fff; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; }
.field--wide { grid-column: span 2; }
.field span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }
.field input,
.field select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 11px 12px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}

/* --- errores de validación --- */

.field__error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--danger);
  line-height: 1.4;
}

.field--error input,
.field--error select { border-color: var(--danger); background: #FEF6F6; }
.field--error input:focus { outline-color: var(--danger); }
.field--error > span { color: var(--danger); }

.terms--error { color: var(--danger); }
.terms--error input { outline: 2px solid var(--danger); outline-offset: 2px; }

.form-alert {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--danger);
}
.form-alert:empty { margin-top: 0; }

/* --- forma de pago --- */

.pay-options { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.pay-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 16px 18px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.pay-option:hover { border-color: var(--navy); }
.pay-option.is-active { border-color: var(--teal); background: var(--mint-bg); box-shadow: inset 0 0 0 1px var(--teal); }
.pay-options--error .pay-option { border-color: var(--danger); }

.pay-option__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  flex: none;
  margin-top: 2px;
}
.pay-option.is-active .pay-option__dot { border-color: var(--teal); border-width: 5px; }

.pay-option__body { display: block; }

.pay-option__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.pay-option__tag {
  font-family: var(--text);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--teal);
  border-radius: 999px;
  padding: 3px 9px;
}

.pay-option__desc {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.hint--depot { background: var(--mint-bg); border-color: var(--mint-border); color: var(--ink); margin-top: 16px; line-height: 1.55; }

/* --- notas del resumen --- */

.summary__row--off span { color: var(--teal); font-weight: 600; }

.summary__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: right;
}
.summary__note--muted { color: var(--ink-3); font-size: 12px; }

.subhead {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 28px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.company-box {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 22px;
}
.company-box__title { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.company-box .field-grid { grid-template-columns: 1fr; gap: 14px; }

.hint {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--navy);
  margin: 14px 0 16px;
}

.summary__title { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--navy); margin-bottom: 18px; }

.summary__head,
.summary__line { display: grid; grid-template-columns: 1fr 84px 82px 92px 22px; gap: 8px; }

.summary__head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ink-3);
}
.summary__head span:not(:first-child) { text-align: right; }

.summary__line { align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-softer); }
.summary__prod { display: flex; gap: 10px; align-items: center; }
.summary__prod img { width: 40px; height: 46px; object-fit: contain; flex: none; }
.summary__prod .img-missing { width: 40px; height: 46px; flex: none; font-size: 0; }
.summary__prod div { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.summary__line > span { text-align: right; font-size: 12.5px; color: var(--ink-2); }
.summary__line > span.is-total { color: var(--navy); font-weight: 600; }

/* stepper de cantidad dentro del resumen */
.summary__qty {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  overflow: hidden;
}
.summary__qty button {
  width: 24px;
  height: 26px;
  border: 0;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.summary__qty button:hover { background: var(--surface-4); }
.summary__qty output { width: 26px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--navy); }

.summary__remove {
  border: 0;
  background: none;
  color: var(--placeholder);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  justify-self: end;
}
.summary__remove:hover { color: var(--danger); }

.factura-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 11px 14px;
}
.factura-note strong { color: var(--navy); }

.send-error {
  margin-top: 14px;
  background: #FEF6F6;
  border: 1px solid #F3C9C9;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.send-error strong { color: var(--danger); }

/* resumen plegable, solo en pantallas chicas */
.summary-mobile { display: none; }

.summary-mobile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-2);
}
.summary-mobile summary::-webkit-details-marker { display: none; }
.summary-mobile summary::after { content: '▾'; margin-left: auto; color: var(--ink-3); }
.summary-mobile[open] summary::after { content: '▴'; }
.summary-mobile summary strong { font-family: var(--display); font-size: 18px; color: var(--navy); }

.summary-mobile__body {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 12px 16px;
}
.summary-mobile__line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); padding: 5px 0; }
.summary-mobile__line--off span { color: var(--teal); font-weight: 600; }

/* --- confirmación --- */

.gracias { max-width: 720px; text-align: center; }

.gracias__mark {
  width: 62px;
  height: 62px;
  margin: 8px auto 20px;
  border-radius: 50%;
  background: var(--mint-bg);
  border: 2px solid var(--teal);
  color: var(--teal);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gracias__title {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.8px;
  margin: 0 0 8px;
}
.gracias__lead { font-size: 15.5px; color: var(--ink-3); margin: 0 0 26px; }

.gracias__order {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 34px;
  margin-bottom: 26px;
}
.gracias__order span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; color: var(--ink-3); }
.gracias__order strong { font-family: var(--display); font-size: 24px; color: var(--navy); letter-spacing: 0.5px; }

/* ---------- pedido pendiente de pago ---------- */

.estado-chip {
  display: inline-block;
  margin-top: 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--display);
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8A6D1F !important;
}

/* ------------------------------------------------- codigo de descuento */

.cupon {
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  padding: 13px 14px;
  margin-bottom: 14px;
  background: var(--surface-2);
}
.cupon__label {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.cupon__fila { display: flex; gap: 8px; }
.cupon__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  /* El codigo se guarda en mayusculas igual; que se vea asi mientras se
     tipea evita la duda de si "verano2026" es el mismo que "VERANO2026". */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--surface);
}
.cupon__input:focus {
  outline: 2px solid var(--mint-border);
  border-color: var(--teal);
}
.cupon__btn {
  border: 1px solid var(--teal);
  background: var(--teal);
  color: #fff;
  border-radius: 7px;
  padding: 10px 18px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cupon__btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.cupon__btn:disabled { opacity: 0.6; cursor: default; }
.cupon__error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--danger);
  line-height: 1.4;
}

/* Ya aplicado: el codigo, cuanto descuenta y como sacarlo. */
.cupon--puesto {
  border-style: solid;
  border-color: var(--hogar-border);
  background: var(--hogar-tint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cupon__dato { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cupon__codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: 0.6px;
  word-break: break-all;
}
.cupon__etiqueta {
  background: #2F6B26;
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.cupon__quitar {
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.cupon__quitar:hover { color: var(--danger); }
/* Ocupa la fila entera abajo del codigo, no al lado. */
.cupon__aviso {
  flex-basis: 100%;
  font-size: 12.5px;
  color: #8A6D1F;
  line-height: 1.45;
}

.drawer__totals--off span { color: var(--hogar); }

/* Mismo chip, pero cuando el pago ya entro: el amarillo de "pendiente"
   arriba de un pago acreditado se lee como un problema. */
.estado-chip--ok {
  background: var(--hogar-tint);
  border-color: var(--hogar-border);
  color: #2F6B26 !important;
}

/* Reintentar el pago rechazado. */
.btn-pagar {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 15px 30px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-pagar:hover { filter: brightness(1.15); color: #fff; text-decoration: none; }
.btn-pagar:visited { color: #fff; }

.banco {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.banco__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.banco__importe {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  color: var(--navy);
}

.banco__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 20px;
  margin: 0;
  font-size: 14.5px;
}
.banco__datos dt { color: var(--ink-3); white-space: nowrap; }
.banco__datos dd {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
  /* El CBU no se parte a la mitad en pantallas angostas. */
  word-break: break-all;
}
.banco__copiable { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.banco__copiar {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  white-space: nowrap;
}
.banco__copiar:hover { border-color: var(--turquesa); background: var(--mint-bg); }
.banco__copiar--ok { color: var(--hogar); border-color: var(--hogar-border); background: var(--hogar-tint); }

.banco__nota {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .banco__datos { grid-template-columns: 1fr; gap: 2px; }
  .banco__datos dt { margin-top: 10px; font-size: 12.5px; }
}

.gracias__panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 26px;
  text-align: left;
}

.gracias__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.gracias__steps li { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.gracias__steps strong { color: var(--navy); }

.gracias__back { flex: none; margin-top: 22px; padding: 12px 26px; }

a.btn-whatsapp { display: inline-block; text-decoration: none; }
a.btn-whatsapp:hover { text-decoration: none; color: #fff; }

.summary__row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); padding: 14px 0 6px; }
.summary__row--last { padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; }
.summary__total dt { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--navy); letter-spacing: 0.5px; }
.summary__total dd { font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--navy); letter-spacing: -0.8px; margin: 0; }

.iva { background: var(--mint-bg); border-radius: 8px; padding: 14px 16px; margin-top: 18px; }
.iva__title { font-size: 13px; font-weight: 700; color: var(--teal-deep); }
.iva__sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

.info-cards { display: flex; flex-direction: column; gap: 12px; }

.info-importante { margin-top: 22px; }
.info-importante .info-cards {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}
.info-importante .info-card { flex: 1 1 240px; }
.info-card { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 16px 18px; }
.info-card__title { font-family: var(--display); font-size: 14.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.info-card p { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.terms { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 13.5px; color: var(--ink-2); }
.terms input { width: 17px; height: 17px; accent-color: var(--teal); }
.terms--promo { margin-top: 12px; align-items: flex-start; }
.terms--promo input { flex: none; margin-top: 1px; }

/* La casilla de promociones de los formularios del sitio. */
.promo-casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
}
.promo-casilla input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--teal); }
.campos .promo-casilla { grid-column: 1 / -1; }

/* ---------- páginas legales ---------- */

.legal { max-width: 860px; }
.legal .sec-head__bajada { font-size: 14px; color: var(--ink-3); }
.legal__intro p,
.legal__sec p,
.legal__sec li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}
.legal__intro p { margin: 0 0 12px; }
.legal__sec { margin-top: 30px; }
.legal__sec h2 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}
.legal__sec p { margin: 0 0 10px; }
.legal__sec ul { margin: 0 0 12px; padding-left: 22px; }
.legal__sec li { margin-bottom: 4px; }
.legal__enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal__enlaces a { font-weight: 600; color: var(--teal-dark); }
.legal__ir { display: inline-flex; align-items: center; gap: 6px; }
.legal__ir .flecha-ir { width: 16px; height: 16px; }

/* Botón de arrepentimiento: la explicación a un lado y el formulario al otro. */
.arrep { max-width: var(--shell); }
.arrep .sec-head__bajada { font-size: 17px; color: var(--ink-2); max-width: 70ch; }
.arrep__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 34px;
  align-items: start;
}
.arrep__pasos { margin: 0 0 18px; padding-left: 22px; }
.arrep__pasos li { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 10px; }
.arrep__nota { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin: 0 0 14px; }
.arrep__caja {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 14px;
  padding: 26px 28px;
}
.arrep__titulo {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
}
.arrep__codigo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 12px;
}
.arrep__codigo span { font-size: 13px; color: var(--ink-3); }
.arrep__codigo strong {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--navy);
}
@media (max-width: 860px) {
  .arrep__grid { grid-template-columns: 1fr; gap: 22px; }
  .arrep__caja { padding: 22px 16px; }
}

.btn-confirm {
  width: 100%;
  margin-top: 16px;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 19px 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
.btn-confirm:hover { background: var(--teal-dark); }
.btn-confirm:disabled { background: var(--line-strong); cursor: not-allowed; }

.confirm-note { text-align: center; font-size: 12px; color: var(--ink-4); margin: 12px 0 0; }

.empty-note { font-size: 14px; color: var(--ink-3); }

/* ---------- Cart drawer ---------- */

.overlay { position: fixed; inset: 0; background: rgba(18, 53, 107, 0.35); z-index: 50; border: 0; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: #fff;
  z-index: 51;
  box-shadow: -8px 0 30px rgba(18, 53, 107, 0.2);
  display: flex;
  flex-direction: column;
}

.drawer__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__title { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--navy); }
.drawer__close { border: 0; background: none; font-size: 20px; color: var(--ink-3); cursor: pointer; }

.drawer__body { flex: 1; overflow-y: auto; padding: 18px 24px; }
.drawer__lines { display: flex; flex-direction: column; gap: 16px; }

.drawer__line { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--line-softer); padding-bottom: 14px; }
.drawer__line img { width: 52px; height: 60px; object-fit: contain; flex: none; }
.drawer__line .img-missing { width: 52px; height: 60px; flex: none; font-size: 0; }
.drawer__line > div { flex: 1; }
.drawer__name { font-size: 13px; color: var(--navy); font-weight: 600; line-height: 1.35; }
.drawer__qty { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.drawer__sub { font-size: 13.5px; color: var(--navy); font-weight: 700; margin-top: 4px; }

/* Cuando el carrito pide más de lo que hay en stock (app.js, avisoReparto):
   la compra sigue, y lo que falta tiene plazo a coordinar por WhatsApp. */
.aviso-stock {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #FFF6E5;
  border-left: 3px solid #B7791F;
  border-radius: 6px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  color: #6B4A0E;
}
.aviso-stock--linea { grid-column: 1 / -1; margin-top: 2px; }
.drawer__remove { border: 0; background: none; color: var(--placeholder); font-size: 16px; cursor: pointer; }
.drawer__remove:hover { color: var(--danger); }

.drawer__foot { padding: 20px 24px; border-top: 1px solid var(--line); }
.drawer__totals { display: flex; justify-content: space-between; margin-bottom: 14px; }
.drawer__totals span:first-child { font-size: 14px; color: var(--ink-2); }
.drawer__totals span:last-child { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--navy); }

.btn-checkout {
  width: 100%;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 15px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.6px;
  cursor: pointer;
}
.btn-checkout:hover { background: var(--teal-dark); }
.btn-checkout:disabled { background: var(--line-strong); cursor: not-allowed; }

/* ---------- Footer ---------- */

.site-footer { margin-top: auto; background: var(--navy); color: #C9D8EE; padding: 46px 0 0; }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 34px;
  align-items: start;
  padding-bottom: 38px;
}
/* Los dos logos del pie pesan igual, y para eso no pueden medir igual: a la
   misma altura el de Rotoplast pesa dos veces y media mas -es una pastilla
   llena, 69% de tinta, contra 18% del nuestro, que es un trazo fino-. Las
   alturas salen de igualar la superficie de tinta: 48 contra 38 px. */
.site-footer__logo {
  width: auto;
  height: 48px;
  display: block;
  filter: brightness(0) invert(1);
}
.site-footer__nota { font-size: 12.5px; line-height: 1.65; margin: 14px 0 0; max-width: 40ch; }
.site-footer__nota strong { color: #fff; font-weight: 600; }

/* "Representantes exclusivos de: [logo]". El logo se alinea con la linea de
   texto en vez de colgar debajo, y en el pie -sobre fondo oscuro- se invierte
   para que un logo impreso en negro no desaparezca. */
.firma-marcas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.firma-marcas__logo {
  height: 34px;
  width: auto;
  display: block;
}
.site-footer__nota.firma-marcas { margin-top: 18px; }
.site-footer__nota.firma-marcas .firma-marcas__logo { height: 38px; }
.firma-marcas .img-missing {
  padding: 3px 9px;
  font-size: 11px;
  min-height: 0;
}

.site-footer__col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.site-footer__col h2 {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 5px;
}
.site-footer__col a { color: #C9D8EE; text-decoration: none; cursor: pointer; }
.site-footer__col a:hover { color: #fff; text-decoration: underline; }
/* Instagram, YouTube y WhatsApp como logo y no como palabra: son marcas que
   se reconocen por la forma antes que por el nombre, y en tres renglones de
   texto se perdian entre los demas enlaces de la columna. */
.site-footer__redes { display: flex; gap: 10px; margin-top: 12px; }
.site-footer__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #C9D8EE;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.site-footer__redes a:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
  text-decoration: none;
}
.site-footer__redes svg { width: 19px; height: 19px; display: block; }

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
  padding-bottom: 22px;
  font-size: 12px;
  color: #9FB4D0;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.site-footer__legales { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__legales a { color: #C9D7EA; text-decoration: none; }
.site-footer__legales a:hover { color: #fff; text-decoration: underline; }
/* El de arrepentimiento, destacado: la norma pide que se vea sin buscarlo. */
.site-footer__legales .site-footer__arrep {
  color: #fff;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .highlights { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1180px) {
  /* El nav envolvía en varias filas y dejaba un header pegajoso de 207 px: un
     cuarto de la pantalla perdido en todo el scroll. Ahora se colapsa detrás
     de la hamburguesa. El corte es 1180 y no 1080 porque los nombres
     completos -"Climatizadores evaporativos"- piden 958 px de menú: con el
     logo y el padding, abajo de eso el menú se pega al logotipo. */
  .site-header__inner { gap: 12px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .site-header__logo { height: 46px; max-width: 210px; }
  .nav-toggle { display: flex; }
  .cart-button { margin-left: auto; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(18, 53, 107, 0.1);
    padding: 6px 24px 12px;
    font-size: 15px;
  }
  .site-header.nav-open { position: sticky; }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav span,
  .site-nav a {
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--line-softer);
    border-radius: 0;
    margin-bottom: 0;
    background: none;
    box-shadow: none;
  }
  /* En el panel desplegable no hay solapas: la seccion abierta se marca con
     una barra turquesa al costado, que es lo que se lee en una lista. */
  .site-nav .is-current {
    box-shadow: none;
    background: none;
    color: var(--navy);
    font-weight: 700;
    border-left: 4px solid var(--turquesa);
    padding-left: 12px;
  }
  /* En el desplegable cada item es una fila: no hay ancho que repartir. */
  .site-nav a { flex: 0 0 auto; max-width: none; text-align: left; justify-content: flex-start; }
  .site-nav > :last-child { border-bottom: 0; }
  /* Dentro del panel desplegable la cápsula no aporta: se aplana. */
  .site-nav__tienda {
    border: 0;
    border-radius: 0;
    padding: 13px 0;
    margin-left: 0;
    color: var(--teal) !important;
  }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { position: static; width: 100%; height: 220px; -webkit-mask-image: none; mask-image: none; border-radius: 10px; }
  .detail, .detail__long, .detail__notes, .checkout { grid-template-columns: 1fr; gap: 28px; }
  /* En el celular el panel del checkout medía 384 px en una pantalla de 375:
     una columna "1fr" no baja del ancho mínimo de lo que tiene adentro, y el
     padding de 28 px por lado se sumaba encima. Con minmax(0, 1fr) la columna
     manda sobre el contenido, y el padding se achica a lo que entra. */
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .checkout__panel { padding: 22px 16px; }
  .summary-mobile { display: block; margin-bottom: 22px; }

  /* La carátula pasa a ser una banda arriba del texto, sin máscara. */
  .linea__caratula {
    position: static;
    width: 100%;
    height: 190px;
    -webkit-mask-image: none;
    mask-image: none;
    display: block;
  }
  .linea__hero-inner { padding-top: 22px; padding-bottom: 34px; }
  .linea__titulo { font-size: 29px; }
  .linea__desc { font-size: 15px; }
  .linea__datos { gap: 22px; }
  .linea__datos b { font-size: 17px; }

  /* El visor ocupa toda la pantalla y las flechas se corren a los bordes. */
  .zoom__caja { width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; }
  .zoom__marco { padding: 12px 8px; }
  .zoom__foto { max-height: 58vh; }
  .zoom__flecha { width: 38px; height: 38px; font-size: 22px; }
  .zoom__flecha--prev { left: 4px; }
  .zoom__flecha--next { right: 4px; }
  .zoom__pie { flex-direction: column; align-items: flex-start; gap: 8px; }
  .zoom__mini { width: 46px; height: 46px; }
  .gallery__lupa { opacity: 1; }   /* sin hover en táctil */

  /* En una columna el resumen ya no está al costado: no tiene sentido fijarlo. */
  .checkout__aside { position: static; }
  .info-importante .info-cards { flex-direction: column; }
  .pasos { gap: 2px; }
  .pasos__item > * { flex-direction: column; gap: 5px; text-align: center; font-size: 11.5px; }
  .paso { min-height: 0; }
  .pasos__nav { flex-direction: column-reverse; align-items: stretch; }
  .pasos__atras { text-align: center; }
  .lines-grid { grid-template-columns: 1fr; }
  .alquiler { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; text-align: left; }
  .alquiler__marca {
    writing-mode: horizontal-tb;
    transform: none;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0 0 10px;
    letter-spacing: 3px;
  }
  .alquiler__titulo { font-size: 21px; }
  .alquiler__accion { justify-items: stretch; }
  .alquiler__cta { text-align: center; }
  .trust-grid, .trust-box, .short-trust { grid-template-columns: repeat(2, 1fr); }
  .gallery__main { height: 380px; }
}

@media (max-width: 720px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .buscador { flex-direction: column; align-items: stretch; }
  .buscador__orden { justify-content: space-between; }
  .buscador__orden select { flex: 1; margin-left: 10px; }
  .cmp-bar__inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .cmp-bar__acciones .btn-ghost { flex: 1; }
  .cmp-bar__ver { flex: 2; }
  body.con-cmp-bar { padding-bottom: 140px; }
  .cmp__etiqueta { width: 130px; white-space: normal; }
  .detail__badges { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: 34px; }
  .checkout__title { font-size: 30px; }
  .drawer { width: 100%; }
}

@media (max-width: 520px) {
  .product-grid, .trust-grid, .trust-box, .short-trust, .field-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .summary__head, .summary__line { grid-template-columns: 1fr 74px 78px 20px; }
  /* En pantallas muy chicas el subtotal por línea se cae: ya está el total abajo. */
  .summary__head span:nth-child(4),
  .summary__line > span.is-total { display: none; }
  .gracias__title { font-size: 27px; }
  .gracias__order { display: flex; padding: 16px; }
}

/* ==================================================================
   SITIO INSTITUCIONAL
   Lenguaje gráfico del manual de marca: cápsulas de borde fino, las
   tres ondas del isotipo, degradado navy -> turquesa -> verde, y los
   títulos en ExtraBold con la bajada en itálica.
   ================================================================== */

/* El pie de 60 px era el mas caro: aparece en toda pagina que arranca con
   un encabezado, y se suma a la cabeza de la franja que venga abajo. */
.seccion { padding: 36px 24px 40px; }

/* ---------- cápsula ---------- */

.pill {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 6px 17px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--teal);
}
.pill--marca { color: var(--navy); font-weight: 600; letter-spacing: 1.5px; font-size: 11.5px; }
/* Frio y calor: los dos colores con los que la marca separa las dos familias. */
.pill--frio { color: var(--teal); }
.pill--calor { color: #C2571F; }

/* La misma capsula, pero que hace algo: vuelve. Conserva la forma para que se
   lea como parte del encabezado y no como un boton suelto arriba de todo. */
.pill--volver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  cursor: pointer;
  font-weight: 600;
  padding: 6px 18px 6px 13px;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.pill--volver svg { width: 15px; height: 15px; flex: none; }
.pill--volver:hover {
  background: var(--mint-bg);
  color: var(--teal-dark);
  transform: translateX(-2px);
}
.pill--volver:active { transform: translateX(-3px); }

/* ---------- encabezado de sección ---------- */

/* Sin ancho propio: un texto solo ocupa el margen de la página, como
   todo lo demás. Medir la línea en 720 px lo dejaba flotando con media
   página en blanco al lado. */
.sec-head { margin-bottom: 34px; }
.sec-head__titulo {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--navy);
  margin: 16px 0 0;
}
.sec-head__bajada {
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 14px 0 0;
}
.sec-head .pill + .sec-head__titulo { margin-top: 14px; }

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn:hover { text-decoration: none; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #1A3149; color: #fff; }
.btn--claro { background: #fff; color: var(--navy); }
.btn--claro:hover { background: var(--mint-bg); color: var(--navy); }
.btn--linea { border-color: rgba(255, 255, 255, 0.65); color: #fff; background: transparent; }
.btn--linea:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.btn--wa { background: var(--whatsapp); color: #fff; }
.btn--wa:hover { background: #178E46; color: #fff; }

.link-mas {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal);
  cursor: pointer;
}
.seccion__mas { margin-top: 26px; }

/* ---------- hero ---------- */

/* El carrito y la barra de comparar son de la tienda. En el sitio
   institucional no existen: alguien que esta leyendo sobre aerotermos no
   tiene por que ver un carrito. app.js pone .en-tienda en el <body>. */
body:not(.en-tienda) .cart-button { display: none; }

/* ---------- las cuatro puertas de evaporativos ---------- */

.cuatro {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  /* Casi sin pie: abajo arranca la primera seccion, que trae el suyo. Los
     44 px de antes se sumaban a ese y dejaban una franja de nada entre las
     puertas y el primer titulo. */
  margin: 26px 0 4px;
}
.cuatro__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 20px 20px 22px;
  background: var(--surface);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.cuatro__item:hover {
  border-color: var(--teal);
  background: var(--mint-bg);
  color: var(--navy);
  text-decoration: none;
  transform: translateY(-2px);
}
.cuatro__icono {
  width: 34px;
  height: 34px;
  color: var(--teal);
  flex: none;
}
/* La cuarta abre el formulario. Se distingue sin dejar de ser una de cuatro:
   en navy lleno pesaba el doble que las otras tres y se leia como el boton
   principal de la pagina, que no lo es. */
.cuatro__item--cta {
  background: var(--mint-bg);
  color: var(--navy);
  border-color: var(--mint-border);
}
.cuatro__item--cta .cuatro__icono { color: var(--teal); }
.cuatro__item--cta:hover {
  background: #E2F2F4;
  border-color: var(--teal);
  color: var(--navy);
}

@media (max-width: 900px) {
  .cuatro { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0 34px; }
  /* Son cinco: la última -Analizar mi espacio- ocupa el renglón entero. */
  .cuatro__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cuatro__item { padding: 15px 15px 17px; font-size: 13.5px; gap: 9px; }
}
@media (max-width: 460px) {
  /* En una columna las cuatro puertas se acuestan: el icono al costado y el
     texto al lado. Apiladas -icono arriba, titulo, bajada- se llevaban 485 px
     antes de que empezara la pagina. Acostadas, la mitad, y sin sacar nada. */
  .cuatro { grid-template-columns: 1fr; gap: 8px; margin: 22px 0 30px; }
  .cuatro__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 12px 14px;
  }
  .cuatro__icono { grid-column: 1; }
  .cuatro__item > span { grid-column: 2; }
  .cuatro__item:hover { transform: none; }
}

/* Las cuatro fotos de la pagina de evaporativos. */
.evap-fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.evap-foto { margin: 0; }
.evap-foto__img,
.evap-foto .img-missing {
  width: 100%;
  height: 290px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: var(--surface-3);
}

@media (max-width: 760px) {
  .evap-fotos { grid-template-columns: 1fr; gap: 12px; }
  .evap-foto__img, .evap-foto .img-missing { height: 210px; }
}

/* ---------- formulario "analizar mi espacio" ---------- */

.an-fondo {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 18px;
  overflow-y: auto;
  background: rgba(18, 40, 62, 0.62);
  backdrop-filter: blur(2px);
}
/* El fondo cierra el diálogo. Es un <button> y no un div con onclick para que
   también lo alcance el teclado. */
.an-fondo__cerrar {
  position: fixed;
  inset: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.an-caja {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border-radius: 14px;
  padding: 34px 36px 32px;
  box-shadow: 0 30px 70px rgba(18, 40, 62, 0.35);
  margin: auto 0;
}
.an-x {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}
.an-x:hover { background: var(--surface-3); color: var(--navy); }

.an-titulo {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--navy);
  margin: 0 34px 0 0;
}
.an-bajada {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 12px 0 24px;
}

.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.an-campo { display: flex; flex-direction: column; gap: 6px; }
.an-campo--ancho { grid-column: 1 / -1; }
.an-campo label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.an-campo input,
.an-campo select,
.an-campo textarea {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  width: 100%;
}
.an-campo textarea { resize: vertical; min-height: 74px; }
/* El formato esperado, debajo del campo: el placeholder desaparece apenas se
   escribe el primer numero, que es justo cuando hace falta saberlo. */
.an-ayuda { font-size: 11.5px; color: var(--ink-4); }
.an-campo input:focus,
.an-campo select:focus,
.an-campo textarea:focus {
  outline: 2px solid var(--mint-border);
  border-color: var(--teal);
}
.an-campo.is-error input,
.an-campo.is-error select { border-color: var(--danger); }
.an-error { font-size: 12.5px; color: var(--danger); }

/* Las tres medidas en una fila: son un dato solo partido en tres. */
.an-medidas { display: flex; align-items: center; gap: 10px; }
.an-medida { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.an-medida input {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  width: 100%;
}
.an-medida.is-error input { border-color: var(--danger); }
.an-medida em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--ink-4);
  text-transform: uppercase;
}
.an-medidas__u { font-size: 13px; color: var(--ink-3); align-self: flex-start; padding-top: 12px; }

/* La trampa para robots: fuera de la pantalla, no con display:none, que
   algunos la detectan y la saltean. */
.an-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.an-falla {
  margin-top: 16px;
  background: #FEF6F6;
  border: 1px solid #F3C9C9;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--danger);
}

.an-acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.an-acciones .btn-whatsapp { padding: 13px 22px; border: 0; cursor: pointer; font: inherit; }
/* Los dos botones con su dibujo adelante y a la misma altura: WhatsApp con su
   logo, mail con el sobre. Mismo tamaño de icono, así ninguno parece el
   secundario del otro. */
.an-acciones .btn-whatsapp,
.an-acciones .btn--mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-weight: 700;
}
.an-acciones .btn-whatsapp__logo,
.an-acciones .icono-sobre { width: 22px; height: 22px; flex: none; }
.an-acciones .btn--mail { border-radius: 6px; padding: 13px 22px; }

/* La aclaración de WhatsApp, pegada a los botones: el envío termina allá. */
.an-nota-wa {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* En el formulario de contacto las salidas van dentro de la grilla de
   campos, que ya tiene su propio aire: sin la raya ni el margen de arriba. */
.campos .an-acciones { margin-top: 4px; padding-top: 0; border-top: 0; }

/* El aviso de contacto: una ventana chica, no el formulario entero. */
.an-caja--chica { max-width: 460px; margin: auto; }

.an-listo { text-align: center; padding: 18px 0 6px; }
.an-listo__tilde {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--hogar-tint);
  color: #2F6B26;
  font-size: 32px;
  line-height: 62px;
}
.an-listo h3 {
  font-family: var(--display);
  font-size: 21px;
  color: var(--navy);
  margin: 0 0 8px;
}
.an-listo p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 auto 22px; max-width: 46ch; }

@media (max-width: 640px) {
  .an-fondo { padding: 0; }
  .an-caja { border-radius: 0; min-height: 100%; padding: 26px 20px 28px; }
  .an-grid { grid-template-columns: 1fr; }
  .an-titulo { font-size: 21px; }
  .an-medidas__u { display: none; }
  .an-acciones .btn, .an-acciones .btn-whatsapp { width: 100%; justify-content: center; }
  /* El aviso no ocupa la pantalla entera como el formulario: es una frase y
     un botón, y a pantalla completa parecía otra página. */
  .an-fondo[data-contacto-listo] { padding: 16px; align-items: center; }
  .an-caja.an-caja--chica { min-height: 0; border-radius: 14px; padding: 30px 22px 26px; }
}

/* ---------- empresas que confian en nosotros ---------- */

.clientes {
  background: var(--surface-3);
  padding: 62px 0 66px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.clientes__titulo {
  font-family: var(--display);
  font-size: 31px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--navy);
  text-align: center;
  margin: 0;
}
.clientes__bajada {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  text-align: center;
  margin: 14px auto 40px;
  max-width: 68ch;
}

.clientes__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* Cada logo en su tarjeta blanca. Los originales vienen con fondos distintos
   -uno es blanco sobre negro, otro sobre azul- y sin una caja comun el muro
   se ve como un collage y no como una lista de clientes. */
.cliente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 22px;
  height: 116px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cliente:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 18px rgba(35, 64, 94, 0.07);
}
.cliente__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Si falta el archivo, el nombre alcanza: un recuadro con el texto adentro
   es mas util que un icono roto. */
.cliente .img-missing {
  border: 0;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

/* Un segundo encabezado dentro de la misma sección: el título más chico,
   porque no compite con el de la página, y sin el aire de un bloque nuevo. */
.sec-head--sub { margin-top: 6px; }
.sec-head--sub .sec-head__titulo { font-size: 27px; }

@media (max-width: 1080px) {
  .clientes__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .clientes { padding: 44px 0 48px; }
  .clientes__titulo { font-size: 24px; }
  .clientes__bajada { font-size: 14.5px; margin-bottom: 28px; }
  .clientes__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cliente { height: 84px; padding: 10px 14px; }
}
@media (max-width: 460px) {
  .clientes__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- los seis accesos de la home ---------- */

/* La home, de arriba abajo, sin aire entre medio: termina una seccion y
   empieza la siguiente. Los 78 + 90 px que tenia esta franja, repetidos en
   cada bloque, eran media pantalla de celular por seccion scrolleando en
   blanco. */
.accesos { padding: 30px 0 38px; }

/* El enunciado es el remate del slider, no el titulo de lo que viene abajo:
   va pegado a las fotos. */
.home-enunciado { padding: 26px 0 6px; }

/* Dos renglones de titulo, uno arriba del otro: el de arriba es el enunciado
   y el de abajo la condicion. Van en el mismo h2 para que el documento tenga
   un solo encabezado y no dos sueltos. */
.accesos__titulo {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.1px;
  color: var(--navy);
  text-align: center;
  margin: 0;
}
.accesos__titulo span {
  display: block;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--teal);
  margin-top: 8px;
}

/* El mismo título, un escalón más abajo: acá encabeza una sección, mientras
   que el de arriba es el enunciado de la home entera. Si midieran igual
   competirían, y el visitante no sabría cuál de los dos manda. */
.accesos__titulo--sec {
  font-size: 30px;
  letter-spacing: -0.7px;
  margin-bottom: 34px;
}
.accesos__titulo--sec span { font-size: 19px; margin-top: 6px; }

.accesos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px 40px;
}

/* La galería de la home en recuadro, del mismo ancho y radio que asesoramiento
   y alquiler: sin marco, los seis rubros quedaban sueltos sobre el fondo. El
   filete verde arriba la ata a la paleta sin repetir el navy del de arriba. */
.accesos__marco {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 45, 70, 0.07);
  padding: 34px 30px 30px;
}

.acceso {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 10px 6px 14px;
  border-radius: 12px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.acceso:hover {
  background: var(--surface-3);
  text-decoration: none;
  transform: translateY(-3px);
}
.acceso .rubro__icono {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
}
.acceso__nombre {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  line-height: 1.35;
}
.acceso__texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 14px auto 0;
  max-width: 34ch;
}
/* El "Ver fotos ->" al pie, a la derecha del recuadro: seis hexagonos
   centrados se leen como una ilustracion, y hasta que no aparece la flecha no
   se entiende que cada uno lleva a algun lado. */
.acceso__ir {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}
.flecha-ir { width: 16px; height: 16px; flex: none; }
/* La flecha se adelanta al pasar el mouse: el movimiento dice "por aca se
   sigue" mejor que cualquier palabra. */
.acceso .flecha-ir { transition: transform 0.18s ease; }
.acceso:hover .flecha-ir { transform: translateX(4px); }

/* ---------- franja de llamado a la accion ---------- */

/* Texto a la izquierda y boton a la derecha, en una franja baja. Es el mismo
   ritmo que la de alquiler, y a proposito: la home baja encadenando franjas
   de la misma altura en vez de bloques altos separados por aire. */
.cta-fila { padding: 20px 0; }
.cta-fila--alterna { background: var(--surface-3); }
.cta-fila__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 22px;
}
.cta-fila--alterna .cta-fila__inner { padding-top: 26px; padding-bottom: 26px; }
.cta-fila__texto { flex: 1 1 520px; min-width: 0; }
.cta-fila__titulo {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--navy);
  margin: 0;
}
.cta-fila__bajada {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 8px 0 0;
}
.cta-fila__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.cta-fila__btn .flecha-ir { transition: transform 0.18s ease; }
.cta-fila__btn:hover .flecha-ir { transform: translateX(4px); }

@media (max-width: 900px) {
  .accesos { padding: 52px 0 62px; }
  .accesos__titulo { font-size: 30px; margin-bottom: 38px; }
  .accesos__titulo span { font-size: 20px; }
  /* Con el nombre repetido, porque la regla de arriba llega después que la
     variante y a igual especificidad le gana. */
  .accesos__titulo--sec.accesos__titulo--sec { font-size: 24px; margin-bottom: 26px; }
  .accesos__titulo--sec.accesos__titulo--sec span { font-size: 17px; }
  .accesos__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }
  .acceso .rubro__icono { width: 76px; height: 76px; margin-bottom: 15px; }
  .acceso__nombre { font-size: 13.5px; letter-spacing: 1.2px; }
  .acceso__texto { font-size: 14px; }
}
@media (max-width: 560px) {
  .accesos__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- recorrido: la pagina anterior y la siguiente ---------- */

/* Una barra arriba y otra abajo de cada seccion. El hueco de la izquierda se
   mantiene aunque no haya pagina anterior -space-between con un <span> vacio-,
   asi el boton que si existe queda donde tiene que estar y no saltando al
   medio segun la pagina. */
.recorrido__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.recorrido__hueco { flex: 0 1 auto; }

.recorrido--arriba { padding: 18px 0 0; }
/* Abajo va despegada del bloque anterior y pegada al cierre: es el final del
   recorrido de la pagina, no un bloque mas. */
.recorrido--abajo { padding: 26px 0 34px; }

.recorrido__ir {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 48%;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.recorrido__ir:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 10px rgba(18, 40, 62, .07);
}

/* El rotulo chico arriba y el nombre de la pagina abajo: "Siguiente" dice que
   es un paso del recorrido y el nombre dice cual, sin que ninguno de los dos
   tenga que competir por el mismo renglon. */
.recorrido__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.recorrido__texto small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.recorrido__ir--atras .recorrido__texto { text-align: left; }
.recorrido__ir--sig .recorrido__texto { text-align: right; }

.recorrido__ir .flecha-ir {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--teal);
  transition: transform .18s ease;
}
/* Cada una se adelanta hacia su lado: el movimiento dice para donde lleva. */
.recorrido__ir--atras:hover .flecha-ir { transform: translateX(-4px); }
.recorrido__ir--sig:hover .flecha-ir { transform: translateX(4px); }

@media (max-width: 700px) {
  /* Uno arriba del otro y a todo el ancho. Lado a lado cada pastilla quedaba
     en 154 px, el nombre se partia en tres renglones y las dos terminaban con
     alturas distintas -67 y 83 px-. Apiladas el nombre entra en un renglon,
     que es lo que hace falta para saber adonde lleva cada una. */
  .recorrido__inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .recorrido__hueco { display: none; }
  .recorrido__ir { max-width: none; padding: 11px 16px; gap: 10px; }
  .recorrido__ir--sig { justify-content: flex-end; }
  .recorrido__texto { font-size: 13.5px; }
  .recorrido__texto small { font-size: 10px; }
  .recorrido--arriba { padding-top: 12px; }
  .recorrido--abajo { padding: 20px 0 26px; }
}

/* ---------- seguir viendo: los tres proximos pasos ---------- */

.pasos-sig {
  border-top: 1px solid var(--line);
  padding: 34px 0 38px;
  background: var(--surface);
}
.pasos-sig__titulo {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
}
.pasos-sig__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.salida {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 22px 46px 22px 24px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.salida:hover {
  border-color: var(--teal);
  background: var(--mint-bg);
  text-decoration: none;
  transform: translateY(-2px);
}
.salida__nombre {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.salida__texto {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 7px;
}
/* La flecha, arriba a la derecha: dice "esto lleva a otro lado" sin ocupar
   una linea de texto. */
.salida__flecha {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 19px;
  line-height: 1;
  color: var(--line-strong);
  transition: color 0.18s ease, transform 0.18s ease;
}
.salida:hover .salida__flecha { color: var(--teal); transform: translateX(3px); }

/* La tienda no es una seccion del sitio: se distingue. */
.salida--tienda { border-color: var(--mint-border); background: var(--mint-bg); }
.salida--tienda:hover { background: var(--surface); border-color: var(--teal); }

@media (max-width: 900px) {
  .pasos-sig { padding: 36px 0 40px; }
  .pasos-sig__grid { grid-template-columns: 1fr; gap: 10px; }
  .salida { padding: 17px 42px 17px 18px; }
  .salida__nombre { font-size: 16px; }
  .salida__flecha { top: 17px; right: 17px; }
}

/* ---------- pagina de productos ---------- */

/* La bajada y el primer titulo estaban a 130 px uno del otro: el margen del
   encabezado, el pie de la seccion y el aire de la franja, sumados. */
/* Doble clase a proposito: el @media de mas abajo vuelve a declarar .seccion
   con la misma especificidad, y por venir despues le ganaba a esta. */
.seccion.seccion--prod { padding-bottom: 0; }
.seccion--prod .sec-head { margin-bottom: 6px; }

.prod { padding: 44px 0 40px; }
/* Una de cada dos con fondo: son siete franjas seguidas y sin el cambio se
   leen como una sola pagina continua. */
.prod--alterno { background: var(--surface-3); }
.prod { scroll-margin-top: 96px; }

/* La franja va comprimida: la foto es el fondo y el texto se le monta encima,
   arriba a la izquierda. Los planos de catalogo son escaleras -los equipos
   crecen hacia la derecha- y ese angulo queda vacio: se midio entre 6% y 43%
   de tinta ahi contra 85-94% abajo a la izquierda. */
.prod {
  --prod-fondo: var(--surface);
}
.prod--alterno { --prod-fondo: var(--surface-3); }

.prod__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.prod__head,
.prod-hero {
  grid-column: 1;
  grid-row: 1;
}
.prod__head {
  position: relative;
  z-index: 2;
  align-self: start;
  /* 78%: es lo que necesita el titulo mas largo -"Climatizadores evaporativos
     de pared", 877 px a 44- para entrar en una sola linea. */
  max-width: 78%;
  padding: 8px 0 44px;
}
/* El velo: el color de la pagina difuminado detras del texto. Cubre el caso en
   que un plano no siga la escalera -techo es el que mas tinta tiene arriba a
   la izquierda- sin dibujar una caja, que es lo que rompia el efecto. */
.prod__head::before {
  content: '';
  position: absolute;
  inset: -56px -30% -40px -28%;
  z-index: -1;
  background: radial-gradient(60% 66% at 32% 44%,
    var(--prod-fondo) 0%, var(--prod-fondo) 64%, transparent 100%);
}
.prod__head .prod__titulo { font-size: 44px; }
/* La linea turquesa arriba del titulo, que antes colgaba del nombre de la
   marca. La marca se saco; la linea se queda, que es lo que separa una familia
   de la siguiente sin meter otro borde. */
.prod__titulo::before {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--turquesa);
  margin-bottom: 20px;
}

.prod__titulo {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--navy);
  margin: 0;
}
.prod__texto {
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 16px 0 0;
}

/* Los dos datos duros, sacados de la propia ficha. */
.prod__datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}
.prod__datos li {
  background: var(--surface);
  border: 1px solid var(--mint-border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  color: var(--ink-2);
}
.prod__datos b {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-right: 5px;
}

/* ---- el equipo, de lado a lado ---- */

/* El equipo no va adentro de nada. El recuadro con degradado turquesa lo
   encerraba y le competia; el peso ahora lo da el tamano, la sombra propia y
   el aire alrededor. */
/* La foto respeta los margenes de la pagina, como todo el resto. Antes salia
   hasta el borde de la pantalla y quedaba desproporcionada contra el texto.
   La caja sigue siendo mas alta que la foto: ese aire de arriba es donde se
   apoya el titulo. */
.prod-hero {
  position: relative;
  margin: 0;
}
.prod-hero img,
.prod-hero .img-missing {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* El plano recortado: apoyado sobre una sombra elipsoidal que hace de piso.
   Sin ella el equipo queda flotando en el medio de la nada. */
.prod-hero--suelto::before {
  content: '';
  position: absolute;
  right: 6%;
  bottom: -4px;
  width: min(760px, 66%);
  height: 60px;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(35, 64, 94, 0.22) 0%, rgba(35, 64, 94, 0) 72%);
  border-radius: 50%;
}
/* El aire de arriba, igual para todas: es donde se apoya el titulo. Antes lo
   daba una caja de alto fijo y dependia de la proporcion de cada foto -pared
   sobraba 171 px y techo 27-, asi que solo pared quedaba despegada. */
.prod-hero--suelto { padding-top: 170px; }
.prod-hero--suelto img {
  /* Sin alto fijo: la foto se dibuja a su proporcion y ocupa el ancho. */
  height: auto;
  filter: drop-shadow(0 20px 26px rgba(35, 64, 94, 0.17));
}
.prod-hero--suelto .img-missing { height: 430px; }

/* Un solo equipo, no una linea entera: manda el alto y no el ancho, y la foto
   se recuesta a la derecha. */
.prod-hero--retrato img {
  width: auto;
  max-width: 100%;
  max-height: 470px;
  margin-left: auto;
}
/* Y el texto se queda de su lado: acá no hay rincón vacío donde encimarse. */
.prod-hero--retrato ~ .prod__head { max-width: 56%; }
.prod-hero--retrato ~ .prod__head::before { display: none; }

/* Los planos de catalogo tampoco llevan velo. Los renders de cada linea vienen
   sobre blanco y con el rincon de arriba a la izquierda vacio, asi que el
   titulo se lee sin ayuda; el velo solo dejaba una mancha blanca encima de los
   equipos. Donde si se queda es en las familias sin plano -aerotermos,
   cortinas-, que llevan foto de obra y ahi el texto no se leeria. */
.prod-hero--suelto ~ .prod__head::before { display: none; }

/* Donde no hubo plano de catalogo va la foto de obra. Se recuesta a la derecha
   por el mismo motivo, y el velo del texto tiene que ser mas cerrado: una foto
   de galpon tiene detalle en todos lados y no un angulo vacio. */
.prod-hero--foto img,
.prod-hero--foto .img-missing {
  height: 520px;
  object-fit: cover;
  object-position: 100% 50%;
  border-radius: 18px;
}
.prod-hero--foto ~ .prod__head::before {
  inset: -70px -34% -56px -28%;
  background: radial-gradient(66% 72% at 32% 44%,
    var(--prod-fondo) 0%, var(--prod-fondo) 74%, transparent 100%);
}

/* ---- las dos instalaciones, a lo ancho ---- */

/* Las dos de la misma altura. El ancho de cada una sale de su proporcion
   -va en el flex-grow, en linea- y la caja lleva esa misma proporcion, asi que
   el alto queda igual para las dos y la foto entra entera. */
.prod-obras {
  display: flex;
  gap: 18px;
  margin-top: 22px;
}
.prod-obra {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-4);
}
/* Una sola foto de obra no ocupa el ancho entero: a 1150 px de ancho una
   foto 16:9 mide 650 de alto y se come la pantalla. */
.prod-obra:only-child { flex: 0 1 760px !important; }
.prod-obra img,
.prod-obra .img-missing {
  width: 100%;
  height: 100%;
  /* La caja ya tiene la proporcion de la foto, asi que cover no recorta nada:
     entra entera y sin deformarse. */
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.prod-obra:hover img { transform: scale(1.045); }

.prod__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ---- las tres lineas de portatiles ---- */

/* Cada linea ocupa una franja entera, en zigzag: la primera con las fotos a la
   izquierda, la siguiente a la derecha. Tres tarjetas iguales en fila daban a
   entender que era una sola cosa en tres tamanos, y son tres decisiones. */
.ptl { padding: 34px 0; }
.ptl__inner {
  display: grid;
  /* La columna ancha es la de las fotos, de los dos lados. Con order: 2 las
     fotos se cambiaban de lugar pero heredaban el ancho de la otra columna, y
     la linea del medio quedaba con los equipos mas chicos que las de arriba y
     abajo. Se invierten las columnas y la posicion, no el orden. */
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}
/* La fila explicita hace falta: con la columna sola, al invertir quedaba
   primero en el DOM la caja de la columna 2, y el texto -que va a la 1- no
   podia retroceder dentro de la misma fila y se caia a la de abajo. */
.ptl__fotos { grid-column: 1; grid-row: 1; }
.ptl__texto { grid-column: 2; grid-row: 1; }
.ptl--invertida .ptl__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.ptl--invertida .ptl__fotos { grid-column: 2; grid-row: 1; }
.ptl--invertida .ptl__texto { grid-column: 1; grid-row: 1; }

/* El alto del renglon de equipos. Es un valor y no una proporcion porque de
   el cuelgan las escalas: un porcentaje contra un alto que depende del
   contenido no se puede resolver. */
/* El alto del renglon de equipos. Es un valor y no una proporcion porque de
   el cuelgan las escalas: un porcentaje contra un alto que depende del
   contenido no se puede resolver. Subio de 330 a 420: los recuadros son mas
   anchos que las fotos -el equipo mas ancho usaba 151 px de 307- asi que
   habia lugar de sobra para dibujarlos mas grandes. */
.ptl__fotos { display: flex; gap: 14px; align-items: stretch; --ptl-alto: 420px; }
/* Con tres equipos la columna se reparte en tres y cada recuadro queda
   angosto: la foto topa contra el ancho antes que contra el alto, y la
   escala deja de mandar -el ROTO 46 salia a 255 px cuando le tocaban 325-.
   El renglon baja para que el alto vuelva a ser el limite. Las tres
   condiciones dobles solo se cumplen las tres a la vez cuando hay
   exactamente tres hermanos, asi que la regla se apaga sola. */
.ptl-eq:nth-child(1):nth-last-child(3),
.ptl-eq:nth-child(2):nth-last-child(2),
.ptl-eq:nth-child(3):nth-last-child(1) { --ptl-alto: 300px; }

/* Tres equipos en 375 px: cada caja queda en unos 96 px utiles, y el mas ancho
   -el 46, con 0,565 de proporcion- necesita que el alto no pase de 172 para
   entrar. Por encima de eso la foto topa contra el ancho y las tres se dibujan
   iguales, que es justo lo que la escala tiene que evitar. */
@media (max-width: 700px) {
  .ptl-eq:nth-child(1):nth-last-child(3),
  .ptl-eq:nth-child(2):nth-last-child(2),
  .ptl-eq:nth-child(3):nth-last-child(1) { --ptl-alto: 170px; }
}

/* El recuadro de cada equipo: placa clara, borde fino y la foto -que viene sin
   fondo- apoyada en su propia sombra. Es un link: lleva a la ficha de la
   tienda, que es donde se compra. */
.ptl-eq {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, var(--surface-3) 100%);
  box-shadow: 0 2px 10px rgba(35, 64, 94, 0.05);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ptl-eq:hover {
  transform: translateY(-4px);
  border-color: var(--mint-border);
  box-shadow: 0 14px 26px rgba(35, 64, 94, 0.12);
  text-decoration: none;
}
/* La caja manda el alto y el equipo ocupa la fraccion que le toca por tamano
   real, apoyado abajo. Es lo mismo que hace la tarjeta de la tienda. */
.ptl-eq__caja {
  width: 100%;
  height: var(--ptl-alto);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ptl-eq__foto,
.ptl-eq .img-missing {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100% * var(--escala, 1));
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 16px rgba(35, 64, 94, 0.16));
}
.ptl-eq__nombre {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy);
}

.ptl__rotulo {
  display: block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.ptl__nombre {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--navy);
  margin: 0;
}
.ptl__desc { font-size: 16px; line-height: 1.62; color: var(--ink-2); margin: 14px 0 0; }
.ptl__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

@media (max-width: 900px) {
  .ptl { padding: 34px 0; }
  /* Apilado el zigzag no existe: las fotos van siempre arriba, para que las
     tres lineas se lean en el mismo orden. */
  .ptl__inner, .ptl--invertida .ptl__inner { grid-template-columns: 1fr; gap: 26px; }
  .ptl__fotos, .ptl--invertida .ptl__fotos { grid-column: 1; grid-row: 1; }
  .ptl__texto, .ptl--invertida .ptl__texto { grid-column: 1; grid-row: 2; }
  /* En pantalla angosta la caja de cada equipo queda tan finita que la foto
     topa contra el ANCHO antes que contra el alto, y ahi la escala deja de
     mandar: los tres de hogar salian de 78 px de ancho, todos iguales, con el
     46 mas bajo que el 42. El alto del renglon baja hasta que el limite
     vuelva a ser el alto, y el recuadro se ajusta para no comerse el ancho
     que hace falta. */
  .ptl-eq { padding: 14px 5px 12px; }
  .ptl__fotos { gap: 8px; --ptl-alto: 260px; }
  .ptl__nombre { font-size: 24px; }
  .ptl__desc { font-size: 15px; }
}


/* ---- la ficha tecnica ---- */

.ficha { margin-top: 22px; }
/* Se despliega con un movimiento corto: apretar un botón y que la tabla
   simplemente esté ahí no se lee como que apareció. */
@keyframes ficha-abrir {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.ficha:not([hidden]) { animation: ficha-abrir 0.26s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .ficha:not([hidden]) { animation: none; }
}
/* La tabla tiene seis columnas: en un celular no entra y se desliza sola,
   sin empujar el ancho de la pagina. */
.ficha__scroll {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.ficha__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 620px;
}
.ficha__tabla thead th {
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 13px 16px;
  text-align: center;
  white-space: nowrap;
}
/* La primera celda del encabezado rotula las filas, no una columna de datos:
   va alineada a la izquierda y en el turquesa de la marca. */
.ficha__tabla thead th:first-child { text-align: left; color: var(--turquesa); }
.ficha__tabla tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--navy);
  padding: 12px 16px;
  white-space: nowrap;
  background: var(--mint-bg);
}
.ficha__tabla td {
  text-align: center;
  padding: 12px 16px;
  color: var(--ink);
  white-space: nowrap;
}
.ficha__tabla tbody tr + tr th,
.ficha__tabla tbody tr + tr td { border-top: 1px solid var(--line); }
.ficha__tabla tbody tr:nth-child(even) td { background: var(--surface-2); }

.ficha__notas {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-3);
}
.ficha__notas span { color: var(--line-strong); }

/* El rojo es el de la marca, no uno de la paleta: un boton de YouTube en
   turquesa no se lee como YouTube. */
.btn--yt {
  background: #FF0000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.btn--yt:hover { background: #D90000; color: #fff; text-decoration: none; }
.btn--yt .btn__logo { width: 20px; height: 20px; flex: none; }

.btn--linea-navy {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line-strong);
  cursor: pointer;
}
.btn--linea-navy:hover { border-color: var(--navy); color: var(--navy); background: var(--surface-3); }

@media (max-width: 900px) {
  .prod { padding: 46px 0 44px; }
  .prod__titulo { font-size: 27px; letter-spacing: -0.8px; }
  .prod__texto { font-size: 16px; }
  .prod__datos li { padding: 7px 14px; font-size: 13px; }
  /* En pantalla angosta no hay angulo vacio donde meter el texto: la foto
     baja y el texto vuelve a ser texto, sin velo. */
  .prod__head { grid-row: 1; max-width: none; padding: 0; }
  .prod__head::before { display: none; }
  .prod__head .prod__titulo { font-size: 27px; }
  .prod__titulo::before { margin-bottom: 14px; }
  .prod-hero { grid-row: 2; margin-top: 24px; }
  /* Apilado el texto no monta sobre nada: el aire de arriba no hace falta. */
  .prod-hero--suelto { padding-top: 0; }
  .prod-hero--foto img, .prod-hero--foto .img-missing { height: 250px; }
  .prod-hero--suelto .img-missing { height: 250px; }
  .prod-hero--foto img { border-radius: 14px; }
  .prod__acciones { margin-top: 22px; }
  .prod-obras { gap: 10px; margin-top: 18px; }
  .prod__acciones .btn { width: 100%; text-align: center; }
}

/* ---------- instalaciones por rubro ---------- */

.seccion.seccion--inst { padding-bottom: 8px; }

/* Indice de rubros: con diez franjas de diez fotos, la pagina mide varias
   pantallas y sin esto hay que recorrerla entera para saber si el rubro
   propio esta. */
.rubros-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}
.rubros-indice__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 18px 7px 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--surface);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
/* El mismo símbolo que encabeza el rubro más abajo y que usan los accesos de
   la home, en chico: el rubro se reconoce sin leer la etiqueta. */
.rubros-indice__item .rubro__icono { width: 26px; height: 26px; }
.rubros-indice__item:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--mint-bg);
  text-decoration: none;
}

.rubro { padding: 36px 0; }
/* Una de cada dos con fondo, para que las diez franjas no se lean como una
   sola tira continua de fotos. */
.rubro--alterno { background: var(--surface-3); }
/* El header queda pegajoso arriba: sin esto, el ancla del indice deja el
   titulo del rubro tapado por la barra del sitio. */
.rubro { scroll-margin-top: 84px; }
/* /contacto baja hasta el formulario: sin margen, el título quedaba debajo
   del header fijo. */
#contacto { scroll-margin-top: 84px; }

.rubro__head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 26px;
}
.rubro__icono { width: 72px; height: 72px; flex: none; display: block; }
.rubro__nombre {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--navy);
  margin: 4px 0 0;
}
.rubro__texto {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 10px 0 0;
}

/* Mosaico, no tira: la primera foto ocupa cuatro casillas y las otras nueve
   van chicas alrededor. Diez miniaturas iguales no dicen por dónde empezar. */
.rubro__galeria {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 170px;
  gap: 14px;
}
/* Cada foto es un botón: abre el visor. Hay que sacarle todo lo de botón. */
.rubro__foto {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  display: block;
}
.rubro__foto--grande { grid-column: span 2; grid-row: span 2; }
/* Con diez fotos la última fila quedaría con dos casillas vacías: dos de las
   tres últimas se estiran y el mosaico cierra parejo. La doble condición hace
   que la regla se apague sola si algún rubro no tiene exactamente diez. */
.rubro__foto:nth-child(8):nth-last-child(3),
.rubro__foto:nth-child(9):nth-last-child(2) { grid-column: span 2; }

.rubro__foto img,
.rubro__foto .img-missing {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface-4);
  transition: transform 0.5s ease;
}
.rubro__foto:hover img { transform: scale(1.05); }
/* El velo del hover dice que la foto hace algo, sin poner un ícono encima de
   cien miniaturas. */
.rubro__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(35, 64, 94, 0);
  transition: background 0.2s ease;
}
.rubro__foto:hover::after { background: rgba(35, 64, 94, 0.14); }
.rubro__foto:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }

@media (max-width: 1080px) {
  .rubro__galeria { grid-template-columns: repeat(3, 1fr); }
  /* Con tres columnas la cuenta es otra: la casilla grande ocupa cuatro y
     quedan nueve chicas, así que la última fila se llenaría con una sola. Se
     estira la última al ancho entero y el mosaico vuelve a cerrar. */
  .rubro__foto:nth-child(8):nth-last-child(3) { grid-column: auto; }
  .rubro__foto:nth-child(9):nth-last-child(2) { grid-column: auto; }
  .rubro__foto:nth-child(10):nth-last-child(1) { grid-column: span 3; }
}
@media (max-width: 760px) {
  .rubro { padding: 38px 0; }
  .rubro__head { gap: 15px; margin-bottom: 20px; }
  .rubro__icono { width: 54px; height: 54px; }
  .rubro__nombre { font-size: 21px; }
  .rubro__texto { font-size: 14.5px; }
  .rubro__galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rubro__foto--grande { grid-column: auto; grid-row: auto; }
  /* El alto lo pone la fila del grid, no la foto: si no, la casilla grande
     y la chica quedan del mismo alto. */
  .rubro__galeria { grid-auto-rows: 128px; }
}

/* ---------- slider de la home ---------- */

.slider {
  position: relative;
  overflow: hidden;
  /* Alto fijo: las cuatro fotos tienen proporciones distintas (una cuadrada,
     una vertical) y sin un alto propio la pagina saltaria en cada cambio. */
  min-height: clamp(500px, 66vh, 660px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--navy);
  color: #fff;
}
.slider__pista { position: absolute; inset: 0; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  /* visibility, y no display, para que la transicion tenga a que agarrarse.
     Sin esto, los slides ocultos siguen recibiendo el foco del tabulador. */
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.slide.is-actual {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s;
  z-index: 1;
}

.slide__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Respaldo: cada slide trae su propio encuadre en linea, desde el campo
     "foco" de contenido.json. Esto es lo que se usa si alguna vez falta. */
  object-position: center 40%;
  display: block;
}
/* El encuadre se arma con dos piezas que se componen en un solo transform:
   el espejo -dos de las cuatro fotos van dadas vuelta para que el sujeto quede
   del lado opuesto al texto- y el zoom, que en la 4 es lo unico que da margen
   para correr la foto. Los valores los pone contenido.json en linea. */
.slide__foto {
  --slide-espejo: 1;
  --slide-zoom: 1;
  transform: scaleX(var(--slide-espejo)) scale(var(--slide-zoom));
}
.slide__foto--espejo { --slide-espejo: -1; }

/* La foto entra un poco mas grande y se va abriendo mientras el slide esta a
   la vista. El movimiento arranca de nuevo cada vez que el slide vuelve a ser
   el actual, porque la animacion cuelga de la clase. Dura mas que el turno del
   slide -6,5 s- asi que nunca se ve quedarse quieta antes de cambiar.

   Los keyframes repiten la formula del transform en vez de agregar un scale
   aparte: si no, pisarian el espejo y el zoom de encuadre. */
@keyframes slide-acercamiento {
  from { transform: scaleX(var(--slide-espejo)) scale(calc(var(--slide-zoom) * 1.11)); }
  to   { transform: scaleX(var(--slide-espejo)) scale(var(--slide-zoom)); }
}
.slide.is-actual .slide__foto {
  animation: slide-acercamiento 8s cubic-bezier(0.16, 0.7, 0.3, 1) both;
  will-change: transform;
}
.slide .img-missing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

/* El velo: sin esto el texto blanco cae sobre chapa clara y no se lee. Es mas
   denso a la izquierda, que es donde vive el texto, y se abre a la derecha
   para que la foto siga siendo la foto. */
.slide__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(18, 40, 62, 0.88) 0%, rgba(18, 40, 62, 0.72) 38%,
                    rgba(18, 40, 62, 0.34) 66%, rgba(18, 40, 62, 0.22) 100%),
    linear-gradient(to top, rgba(18, 40, 62, 0.55) 0%, rgba(18, 40, 62, 0) 42%);
}

.slide__inner {
  position: relative;
  width: 100%;
  padding-top: 40px;
  /* Deja libre la franja de abajo, donde van los puntos y la linea de marcas. */
  padding-bottom: 96px;
}
/* El ancho lo limita el texto y no el contenedor: .slide__inner es .shell, y
   pisarle el max-width lo desalinea del resto de la pagina. */
.slide__iso,
.slide__titulo,
.slide__texto,
.slide__acciones { max-width: 760px; }
.slide__iso {
  width: 62px;
  height: auto;
  display: block;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.95);
}
.slide__titulo {
  font-family: var(--display);
  font-size: 54px;
  /* En negrita y la bajada no: el titulo es corto y la bajada lo completa. */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.4px;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.slide__texto {
  font-size: 22px;
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.slide__acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---- controles ---- */

.slider__pie {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 26px;
}
/* Solo la firma de la marca del slide que está a la vista. */
.slider .slider__marcas { display: none; }
.slider[data-marca="rotoplast"] .slider__marcas[data-firma="rotoplast"],
.slider[data-marca="sonniger"] .slider__marcas[data-firma="sonniger"] { display: flex; }

/* El logo de SONNIGER es gris sobre transparente: encima del velo azul del
   slide el nombre casi no se leía y "Heating Partners" desaparecía. El de
   ROTOPLAST trae su propio sello de color y no lo necesita. Una placa blanca
   y no el logo pasado a blanco: así se ve con los colores de la marca. */
.slider__marcas .firma-marcas__logo--sonniger {
  box-sizing: border-box;
  height: 34px;
  padding: 6px 10px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.slider__marcas {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Sin la firma al lado, el margen automático los sigue dejando a la derecha. */
.slider__controles { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.slider__puntos { display: flex; gap: 10px; margin-right: 6px; }
.slider__punto {
  position: relative;
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.slider__punto:hover { background: rgba(255, 255, 255, 0.65); }
.slider__punto.is-actual { background: #fff; width: 52px; }
/* El area clickeable real es mas alta que la barrita, que mide 4 px. */
.slider__punto::before {
  content: '';
  position: absolute;
  inset: -14px 0;
}

.slider__flecha {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(18, 40, 62, 0.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(3px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.slider__flecha:hover { background: rgba(18, 40, 62, 0.75); border-color: #fff; }
.slider__flecha svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
  .slide__titulo { font-size: 44px; letter-spacing: -1.2px; }
}
@media (max-width: 760px) {
  /* Mismo modelo que en escritorio -slides apilados en absolute- pero mas
     bajo. Que el alto lo pusiera el contenido pedia sacar tambien la pista
     del absolute, y no vale la pena: con un alto fijo el titulo mas largo
     entra igual. */
  .slider { min-height: 580px; }
  /* 138 px abajo: la franja del pie mide 124 en dos filas y el slide, que va
     en absolute, le pasaria por encima con los botones. */
  .slide__inner { padding-top: 30px; padding-bottom: 138px; }
  .slide__titulo { font-size: 33px; letter-spacing: -0.8px; }
  .slide__texto { font-size: 18.5px; }
  .slide__iso { width: 50px; margin-bottom: 16px; }
  .slider__pie { padding-bottom: 20px; flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .slider__marcas { font-size: 11.5px; }
}

/* Quien pidio menos movimiento no quiere un carrusel que se mueve solo: el
   cambio es instantaneo y el autoplay se apaga desde el JS. */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .slide.is-actual { transition: none; }
  .slide.is-actual .slide__foto { animation: none; }
  .slider__punto { transition: none; }
}

.hero-inst {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, var(--navy) 0%, #1E5E7E 42%, var(--turquesa) 100%);
  color: #fff;
}
.hero-inst__fondo { position: absolute; inset: 0; opacity: 0.4; }
.hero-inst__fondo svg { width: 100%; height: 100%; display: block; }
.hero-inst .blob--1 { fill: rgba(255, 255, 255, 0.07); }
.hero-inst .blob--2 { fill: rgba(116, 196, 101, 0.16); }

.hero-inst__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding-top: 68px;
  padding-bottom: 68px;
}
.hero-inst__titulo {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -1.6px;
  margin: 0;
}
.hero-inst__bajada {
  font-size: 19px;
  line-height: 1.55;
  margin: 20px 0 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.92);
}
.hero-inst__acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero-inst__pie {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.72);
}
.hero-inst__art { position: relative; }
.hero-inst__img {
  width: 100%;
  height: 380px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.28));
}
.hero-inst__art .img-missing { width: 100%; height: 380px; border-color: rgba(255, 255, 255, 0.35); color: #fff; }

/* ---------- por qué evaporativa ---------- */

.porque { background: var(--surface-3); padding: 56px 0; margin-top: 46px; }
.porque__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.porque__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; }
.porque__n {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--turquesa);
  display: block;
  line-height: 1;
}
.porque__item h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 12px 0 8px;
}
.porque__item p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ---------- tarjetas de equipo ---------- */

.eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eq-grid--3 { grid-template-columns: repeat(3, 1fr); }

.eq-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.eq-card:hover { border-color: var(--turquesa); box-shadow: 0 10px 26px rgba(35, 64, 94, 0.09); }
.eq-card__media { height: 200px; background: var(--surface-3); }
.eq-card__media img, .eq-card__media .img-missing {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0;
}
.eq-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.eq-card__marca {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--teal);
}
.eq-card__nombre {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--navy);
  margin: 8px 0 0;
}
.eq-card__tagline { font-size: 14px; font-style: italic; color: var(--teal); margin: 8px 0 0; }
.eq-card__texto { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 18px; flex: 1; }
.eq-card__cta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
  align-self: flex-start;
  border-bottom: 2px solid var(--turquesa);
  padding-bottom: 2px;
}
.eq-card__cta:hover { color: var(--teal); text-decoration: none; }

.grupo-titulo {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--navy);
  margin: 52px 0 20px;
}
.grupo-titulo span { font-weight: 500; font-size: 15px; color: var(--ink-3); letter-spacing: 0; }
.grupo-texto { font-size: 15px; color: var(--ink-2); margin: -10px 0 22px; }

/* ---------- calefacción eficiente ---------- */

/* Las dos puertas de la página van más anchas que las cuatro de Evaporativos:
   son dos, y con el ancho de una de cuatro quedaban perdidas en la fila. */
.cuatro--dos { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.cuatro--dos .cuatro__item { flex-direction: column; align-items: flex-start; gap: 6px; }
.cuatro--dos .cuatro__item em {
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* El encabezado de Cortinas no monta sobre ninguna foto: es texto suelto. */
.prod__head--suelto { position: static; max-width: none; padding: 0; }
.prod__head--suelto::before { display: none; }

/* Las tres ventajas del catálogo, en una tira. Llevan tilde porque eso son:
   una lista de lo que el equipo resuelve, no tres títulos. */
/* Aerotermos: el texto y la ficha a la izquierda, el equipo y sus dos vistas
   a la derecha. Los tres dibujos son la misma pieza mirada de tres lados, asi
   que van juntos y arriba, a la altura del titulo, y no repartidos entre el
   encabezado y el pie de la seccion. */
/* La entrada termina en las cuatro puertas y abajo arranca Aerotermos, que
   trae su propio aire: sin esto se sumaban 40 + 44 px de nada entre las
   puertas y el primer titulo. */
.seccion.seccion--calef { padding-bottom: 0; }
.prod--calef { padding-top: 26px; }

.calef-aero {
  display: grid;
  /* La columna del texto lleva el titulo, el parrafo, la ficha y el recuadro
     de medidas; la otra, el equipo y sus vistas. De ahi el reparto 2 a 1. */
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 34px 40px;
  align-items: start;
}
.calef-aero__texto { min-width: 0; }
.calef-aero__texto .prod__texto { max-width: none; }
.calef-aero__vistas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.calef-aero__equipo,
.calef-aero__corte { margin: 0; width: 100%; }
.calef-aero__img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 22px rgba(35, 64, 94, 0.15));
}
/* El equipo de frente manda; las vistas de atras, de arriba y de costado son
   la aclaracion, y van mas chicas. */
.calef-aero__equipo { max-width: 100%; }
.calef-aero__corte { max-width: 88%; }

/* El recuadro de medidas: el mismo ancho que la ficha de arriba, apoyado sobre
   el fondo de la seccion. Trae su propio color y su propio redondeo, asi que
   no lleva caja. */
.calef-medidas { margin: 26px 0 0; }
.calef-medidas__img,
.calef-medidas .img-missing {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
/* La ficha, abierta: aca es el contenido de la seccion y no un detalle que se
   pide con un boton, asi que no lleva la animacion de desplegado. */
/* Abierta y adentro de una columna: las celdas van mas justas para que las
   cinco entren sin barra de scroll horizontal. */
.ficha--abierta { animation: none; margin-top: 24px; }
.ficha--abierta .ficha__tabla th,
.ficha--abierta .ficha__tabla td { padding-left: 12px; padding-right: 12px; }
.ficha--abierta .ficha__tabla tbody th { font-size: 13.5px; }

/* Guard y Guard Pro: dos tarjetas con el equipo recortado sobre placa clara,
   igual que los portátiles. */
.calef-modelos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 34px;
}
.calef-modelo {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, var(--surface-3) 100%);
  padding: 26px 28px 28px;
  box-shadow: 0 2px 10px rgba(35, 64, 94, 0.05);
}
/* Las dos fotos llegaban en un cuadrado de 1000x1000 con el equipo adentro:
   la Guard es una cortina apaisada que ocupaba el 21% del alto, asi que en una
   caja de 200 px se dibujaba a 42 y el resto era aire. Los PNG se recortaron
   al rectangulo del equipo; con eso cada uno llena lo que su forma permite
   -la Guard el ancho, la Guard Pro el alto- y la caja puede ser mas baja. */
.calef-modelo__img,
.calef-modelo .img-missing {
  width: 100%;
  height: 190px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(35, 64, 94, 0.14));
}
.calef-modelo h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
  margin: 20px 0 8px;
}
.calef-modelo p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.calef-sub {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  /* 46 px era el mismo aire que se le saco a las secciones: adentro de una
     franja tambien se paga. */
  margin: 30px 0 0;
}
/* Cuando encabeza su propia sección y no una subsección. */
.calef-sub--solo { font-size: 26px; margin: 0 0 22px; }

/* Invierno y verano, uno al lado del otro: la comparación es el contenido. */
.calef-barrera {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.calef-barrera__item { margin: 0; }
.calef-barrera__item__img,
.calef-barrera__item .img-missing {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.calef-barrera__item figcaption,
.calef-control__item figcaption {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.como-pasos--tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 34px;
  margin-top: 40px;
}
.como-pasos--tres li { margin-bottom: 0; }

/* Los tres controles: el panel y el mando son planos recortados y el módulo
   WiFi es una foto de campaña, así que van sobre placa y no sueltos. */
.calef-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.calef-control__item { margin: 0; }
.calef-control__item__img,
.calef-control__item .img-missing {
  width: 100%;
  height: 230px;
  object-fit: contain;
  display: block;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.calef-galeria__head { margin-bottom: 26px; }

@media (max-width: 900px) {
  .cuatro--dos { grid-template-columns: 1fr; }
  .calef-aero { grid-template-columns: 1fr; gap: 26px; }
  .calef-aero__vistas { flex-direction: row; align-items: center; gap: 18px; }
  .calef-aero__equipo { max-width: 55%; }
  .calef-aero__corte { max-width: 42%; }
  .calef-modelo__img, .calef-modelo .img-missing { height: 150px; }
  .calef-modelos,
  .calef-barrera, .calef-control, .como-pasos--tres { grid-template-columns: 1fr; }
  .calef-modelo__img, .calef-modelo .img-missing { height: 150px; }
  .calef-control__item__img, .calef-control__item .img-missing { height: 190px; }
  .calef-sub { font-size: 19px; margin-top: 24px; }
}

/* ---------- cómo funciona el sistema ---------- */

/* A todo el ancho: es la definicion de la pagina, no una bajada. */
.como-intro { margin-top: 10px; }
.como-intro p {
  font-size: 21px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.como-intro p:last-child { margin-bottom: 0; }

/* Las franjas de la sección, con el mismo ritmo que las de Productos: una de
   cada dos con fondo, para que seis bloques seguidos no se lean como una sola
   página continua. */
.como-bloque { padding: 40px 0; }
.como-bloque--alterno { background: var(--surface-3); }
.como-bloque__titulo {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.8px;
  color: var(--navy);
  margin: 0;
  max-width: 22ch;
}
.como-bloque__titulo--centro { max-width: none; text-align: center; }
/* El encabezado de la galeria no lleva el tope de 22ch: "Equipos SONNIGER en
   operacion" entra en un renglon y partido en dos se lee como dos ideas. */
.calef-galeria__head .como-bloque__titulo { max-width: none; }
.como-bloque__bajada {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 14px 0 0;
}

/* El esquema viene sin fondo, asi que se apoya directo sobre el color de la
   seccion. Va suelto: un borde alrededor de un dibujo que ya tiene su propio
   marco visual solo agrega ruido. */
.como-esquema { margin: 30px 0 0; }
/* Cuando abre la seccion no hay nada arriba de lo que separarse. */
.como-esquema--primero { margin-top: 0; }

/* El corte y sus cinco rotulos, uno al lado del otro: el dibujo a dos tercios
   y los numeros en una columna al costado. Apilados -dibujo a todo el ancho,
   rotulos en una fila de cinco debajo- se llevaban una pantalla entera para
   decir cinco palabras. */
.como-corte {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.como-corte .como-esquema { margin: 0; }
.como-corte .esquema-leyenda--rotulos {
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}
.como-esquema__img,
.como-esquema .img-missing {
  width: 100%;
  height: auto;
  display: block;
}

/* Inyección y extracción: el texto arriba a todo el ancho y las dos fotos
   abajo, en fila. Las dos son la misma nave con los equipos montados de dos
   maneras -de pared y sobre el techo-, así que van al lado: puestas una
   debajo de la otra hay que acordarse de la primera para leer la segunda. */
.como-mixto { display: grid; gap: 34px; }
.como-mixto__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.como-mixto__foto { margin: 0; }
.como-mixto__img,
.como-mixto__foto .img-missing {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
/* Las dos fotos tienen la misma proporción, así que recortar al mismo alto no
   deforma nada; el atributo height del <img> ganaría, por eso el height auto. */
.como-mixto__img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* La leyenda de un esquema: los numeros que quedaron dibujados sobre el
   equipo, con su nombre. El texto salio de la imagen -adentro quedaba a 11 px
   por mas que la imagen se agrandara- y aca escala como cualquier otro. */
.esquema-leyenda {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 34px;
}
.esquema-leyenda li { position: relative; padding-left: 48px; }
.esquema-leyenda h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 5px;
}
.esquema-leyenda p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* En el corte del climatizador los cinco son rotulos y no parrafos: el
   recorrido se cuenta una sola vez, abajo. Entran los cinco en una fila. */
.esquema-leyenda--rotulos {
  margin-top: 26px;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 22px;
}
.esquema-leyenda--rotulos li {
  padding: 0 0 0 44px;
  display: flex;
  align-items: center;
  min-height: 34px;
}
.esquema-leyenda--rotulos h3 { font-size: 15px; line-height: 1.3; margin: 0; }

/* El recorrido completo, una sola vez. Es el texto de la seccion, no una nota
   al margen: va a lo ancho y con el cuerpo de la entrada. */
.como-recorrido {
  margin: 30px 0 0;
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

.como-pasos { list-style: none; margin: 26px 0 0; padding: 0; }
.como-pasos li {
  position: relative;
  padding-left: 52px;
  margin-bottom: 24px;
}
.como-pasos li:last-child { margin-bottom: 0; }
.esquema-leyenda .como-pasos__n,
.como-pasos__n {
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mint-bg);
  border: 1.5px solid var(--mint-border);
  color: var(--teal-dark);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.como-pasos h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}
.como-pasos p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }

/* La conclusión del bloque, marcada con la barra turquesa del manual. */
.como-nota {
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--turquesa);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  font-style: italic;
}

/* Los videos van arriba del todo, debajo de la bajada: es lo primero que
   contesta "como funciona" sin pedirle a nadie que lea. */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
}
.video-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.video-card__pie {
  margin: 0;
  padding: 14px 18px 16px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
/* El reproductor reemplaza al botón cuando alguien aprieta play: hereda la
   misma caja 16:9 que la miniatura. */
.video-card .caso__marco { aspect-ratio: 16 / 9; }
.video-card .caso__marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Estrés térmico: el texto a la izquierda y la tabla a la derecha, y los dos
   del mismo alto. Con align-items: start la tabla sobraba media columna por
   debajo del texto; estirada, las ocho filas reparten el alto que hay. */
.como-calor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 52px;
  align-items: stretch;
}
.como-calor__texto { display: flex; flex-direction: column; justify-content: center; }
.como-calor .calor { display: flex; }
.como-calor .calor__tabla { height: 100%; }
.como-calor__fuerte {
  font-size: 19px;
  line-height: 1.6;
  color: var(--navy);
  font-weight: 500;
  margin: 22px 0 0;
}
.calor {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.calor__tabla { width: 100%; border-collapse: collapse; }
.calor__tabla th,
.calor__tabla td { text-align: left; padding: 14px 20px; }
.calor__tabla thead th {
  background: var(--surface-3);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.calor__tabla thead th:last-child { text-align: right; }
.calor__tabla tbody tr + tr { border-top: 1px solid var(--line-softer); }
.calor__tabla tbody th {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
/* La celda del porcentaje aloja la barra: el número va adelante y alineado a
   la derecha, la barra crece desde la izquierda por detrás. */
.calor__tabla td {
  position: relative;
  text-align: right;
}
.calor__tabla td b {
  position: relative;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
}
.calor__barra {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  border-radius: 0 6px 6px 0;
  /* Del turquesa de la marca al naranja de calor: la fila de 41° se lee de
     lejos sin tener que comparar los números. */
  background: linear-gradient(90deg,
    rgba(80, 191, 198, 0.30) 0%, rgba(194, 87, 31, 0.30) 100%);
}

.como-beneficios { margin: 34px 0 0; }
.como-beneficios__img,
.como-beneficios .img-missing {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .como-bloque { padding: 42px 0; }
  .como-bloque__titulo { font-size: 24px; }
  .como-bloque__bajada { font-size: 16px; }
  .como-mixto, .como-calor { grid-template-columns: 1fr; gap: 28px; }
  /* En pantalla angosta cada foto quedaría de 160 px y no se distinguiría una
     flecha: se apilan y cada una ocupa el ancho. */
  .como-mixto__fotos { grid-template-columns: 1fr; gap: 22px; }
  /* El corte al lado de los rotulos solo entra en pantalla ancha: en 375 px
     el dibujo quedaba de 181 px y no se leia ni un numero. Apilados, el
     dibujo ocupa el ancho y los cinco rotulos van en dos columnas. */
  .como-corte { grid-template-columns: 1fr; gap: 20px; }
  .esquema-leyenda { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  /* Con el nombre del contenedor delante, porque la regla de arriba que los
     pone en una columna lleva dos clases y le ganaria a esta. */
  .como-corte .esquema-leyenda--rotulos,
  .esquema-leyenda--rotulos { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .como-recorrido { font-size: 16px; }
  .como-intro p { font-size: 18px; }
  .videos-grid { grid-template-columns: 1fr; gap: 16px; }
  .como-calor__fuerte { font-size: 17px; }
  .calor__tabla th, .calor__tabla td { padding: 12px 14px; }
  .calor__tabla tbody th, .calor__tabla td b { font-size: 17px; }
}

/* ---------- marcas ---------- */

.marcas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.marcas { grid-template-columns: 1fr; max-width: 720px; }
.marca-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  background: var(--surface-2);
}
.marca-card__logo { display: flex; align-items: center; justify-content: center; }
.marca-card__img { max-height: 54px; width: auto; object-fit: contain; }
.marca-card__logo .img-missing { width: 100%; height: 54px; font-size: 12px; }
.marca-card__nombre {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--navy);
  margin: 0;
}
.marca-card__origen { font-weight: 500; font-size: 13px; color: var(--ink-3); letter-spacing: 0; }
.marca-card__rol { font-size: 13px; font-weight: 600; color: var(--teal); margin: 6px 0 0; }
.marca-card__que { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 8px 0 0; }

/* ---------- aviso de la tienda ---------- */

.aviso-tienda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  background: linear-gradient(100deg, var(--mint-bg), #F4FBF6);
  border: 1px solid var(--mint-border);
  border-radius: 16px;
  padding: 28px 32px;
  margin-top: 34px;
}
.aviso-tienda h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--navy);
  margin: 0;
}
.aviso-tienda p { font-size: 14.5px; color: var(--ink-2); margin: 8px 0 0; }

/* ---------- página de un equipo ---------- */

.eq-detalle { padding: 30px 24px 60px; }
.migas { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }
.migas a { color: var(--teal); cursor: pointer; }
.migas span { margin: 0 4px; }

.eq-detalle__top { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.eq-detalle__media { border-radius: 16px 16px 120px 16px; overflow: hidden; background: var(--surface-3); height: 400px; }
.eq-detalle__img, .eq-detalle__media .img-missing {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0;
}
.eq-detalle__info h1 {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--navy);
  margin: 16px 0 0;
}
.eq-detalle__tagline { font-size: 18px; font-style: italic; color: var(--teal); margin: 12px 0 0; }
.eq-detalle__desc { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 16px 0 0; }
.eq-detalle__lineas { font-size: 14.5px; color: var(--ink-2); margin: 14px 0 0; }
.eq-detalle__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.eq-bloque { margin-top: 52px; }
.eq-bloque h2 {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--navy);
  margin: 0 0 16px;
}
.eq-bloque__texto { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin: 0; }
.eq-bloque__pie { margin-top: 18px; }

.eq-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; }
.eq-lista li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.eq-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--turquesa);
}

.eq-espacios { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.eq-espacios li {
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  color: var(--navy);
}

.eq-galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.eq-galeria__item { height: 180px; border-radius: 12px; overflow: hidden; background: var(--surface-3); }
.eq-galeria__item img, .eq-galeria__item .img-missing {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; font-size: 12px;
}

/* ---------- instalaciones ---------- */

.inst-tira { background: var(--surface-3); padding: 56px 0; margin-top: 56px; }
.inst-tira__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.inst-mini__media {
  height: 160px;
  border-radius: 12px 12px 12px 70px;
  overflow: hidden;
  background: #fff;
}
.inst-mini__media img, .inst-mini__media .img-missing {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; font-size: 12px;
}
.inst-mini h3 {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
  margin: 12px 0 0;
}

/* ---------- casos de éxito ---------- */

.casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.caso { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.caso__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--navy);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.caso__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.caso__icono,
.play-icono {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 44px;
  border-radius: 10px;
  background: rgba(35, 64, 94, 0.86);
  transition: background 0.16s ease;
}
.caso__icono::after,
.play-icono::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-left: 15px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.caso__play:hover .caso__icono { background: var(--turquesa); }

/* ---------- video dentro de la galería del equipo ---------- */

.gallery__video {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #0E1621;
  cursor: pointer;
  overflow: hidden;
}
.gallery__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__video:hover .play-icono { background: var(--turquesa); }

/* El Short es vertical: el marco se centra y toma el alto disponible en vez
   de estirar el video a lo ancho. */
.gallery__marco {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery__marco iframe {
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border: 0;
  display: block;
}

/* Miniatura de un video: se distingue de las fotos por el play. */
.gallery__thumb--video { position: relative; }
.gallery__thumb--video img { width: 100%; height: 62px; max-height: 62px; object-fit: cover; display: block; }
.play-icono--chico {
  width: 26px;
  height: 19px;
  border-radius: 5px;
}
.play-icono--chico::after {
  border-left-width: 7px;
  border-top-width: 4px;
  border-bottom-width: 4px;
}
.caso__marco { aspect-ratio: 16 / 9; background: #000; }
.caso__marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.caso__body { padding: 18px 20px 20px; }
/* El rubro es el titulo y la empresa el pie: se intercambiaron los dos pesos,
   no los dos nombres, para que cada clase siga diciendo lo que contiene. */
.caso__rubro { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; }
.caso__cliente { font-size: 13.5px; color: var(--ink-3); margin: 4px 0 0; }

/* La salida al canal, al pie de los seis testimonios. */
.mas-videos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.mas-videos__titulo {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--navy);
  margin: 0;
}

/* ---------- eventos ---------- */

.eventos { display: grid; gap: 20px; }
.evento {
  display: grid;
  grid-template-columns: 260px 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.evento--proximo { border-color: var(--turquesa); box-shadow: 0 8px 22px rgba(80, 191, 198, 0.16); }
.evento__media { background: var(--surface-3); min-height: 170px; }
.evento__media img, .evento__media .img-missing {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; font-size: 12px;
}
/* Logos, no fotos: enteros, con aire alrededor y una raya que los separa del
   texto. El aire es parejo para todos porque build-images.py les recorta el
   margen que trae cada archivo; si no, uno se vería el doble que el de al lado. */
.evento__media--logo {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evento__media--logo img {
  width: 100%;
  height: auto;
  max-height: 130px;
  object-fit: contain;
}
.evento__body { padding: 22px 26px; }
.evento__estado {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 12px;
}
.evento--proximo .evento__estado { color: var(--teal); border-color: var(--turquesa); background: var(--mint-bg); }
.evento__body h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--navy);
  margin: 12px 0 0;
}
.evento__cuando { font-size: 14px; font-weight: 600; color: var(--teal); margin: 6px 0 0; }
.evento__texto { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 10px 0 0; }

/* ---------- sobre nosotros ---------- */

/* La pagina abre con la capsula sola: la definicion de la empresa esta abajo,
   en su recuadro, y repetirla como bajada seria decirla dos veces. */
.seccion.seccion--nos { padding-bottom: 0; }
.seccion--nos .sec-head { margin-bottom: 0; }

/* La firma: el logo y la frase que contesta "a quien estoy llamando". Es lo
   primero que se lee de la pagina, asi que tiene el cuerpo de un titular y no
   el de un parrafo, y el filete turquesa del manual a la izquierda. */
.nos-quienes { padding: 10px 0 8px; }
.nos-firma {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--turquesa);
  border-radius: 16px;
  padding: 30px 34px;
}
/* Mas grande: es el logo de la casa al lado de la frase que define la casa.
   A 62 px quedaba como una nota al margen de su propio titulo. */
.nos-firma__logo { width: auto; height: 92px; flex: none; display: block; }
.nos-firma__texto {
  flex: 1 1 420px;
  min-width: 0;
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.3px;
  color: var(--navy);
}
/* La linea vertical entre el logo y el texto solo tiene sentido si estan uno
   al lado del otro; apilados seria una raya suelta arriba del parrafo. */
@media (min-width: 760px) {
  .nos-firma__texto { border-left: 1px solid var(--line-strong); padding-left: 34px; }
}

/* ---- EcoAires en el pais ---- */

/* El mapa viene dibujado en celeste sobre transparente: esta hecho para fondo
   oscuro, asi que la franja va en navy y no al reves.

   Y va mas oscura que el resto de las franjas navy del sitio. Sobre el navy
   habitual -#23405E a #1E5E7E- la tinta del mapa quedaba con 1.01 de contraste:
   invisible, medido. Bajando el degradado sube a 2.5-3.1, y el texto blanco
   encima pasa de 8 a 12:1, asi que no se pierde nada. */
.nos-pais {
  background: linear-gradient(120deg, #12283E 0%, #16394E 58%, #123039 100%);
  color: #fff;
}
.nos-pais__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 46px;
}
.nos-pais__titulo {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 0;
}
.nos-pais__bajada {
  font-size: 16.5px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.88);
  margin: 16px 0 0;
}
.nos-pais__puntos {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  /* Dos arriba y dos abajo, del mismo ancho. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 10px;
}
.nos-pais__puntos li {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* En el celular cada botón mide media pantalla y el texto parte en dos o
   tres renglones: un óvalo de radio completo con tres renglones se ve como
   una píldora deformada, así que las puntas se redondean menos. */
@media (max-width: 560px) {
  .nos-pais__puntos li { border-radius: 14px; padding: 8px 10px; font-size: 12.5px; line-height: 1.35; }
}
/* Sumarse a la red, dentro de la misma franja que habla de la red. */
.nos-red {
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.nos-red__titulo {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #fff;
}

/* Sin recuadro ni fondo: el dibujo ya trae el suyo y apoyarlo en una caja lo
   convertiria en una ilustracion pegada encima de la franja. */
.nos-mapa { margin: 0; display: flex; justify-content: center; }
.nos-mapa__img {
  width: auto;
  max-width: 100%;
  max-height: 380px;
  height: auto;
  display: block;
}

/* ---- el respaldo de ROTOPLAST ---- */

.nos-resp { background: var(--surface-3); border-bottom: 1px solid var(--line); }
.nos-resp__inner {
  display: grid;
  /* El texto y el logo comparten la primera fila; los numeros van abajo, a lo
     ancho de las dos, porque son el argumento y no una nota al costado. */
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 34px 48px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 52px;
}
.nos-resp__head { grid-column: 1; }
.nos-resp__titulo {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.9px;
  color: var(--navy);
  margin: 14px 0 0;
}
.nos-resp__texto {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-2);
  margin: 16px 0 0;
}
/* El logo y el sello, sueltos. Vienen recortados y sobre transparente, asi
   que un recuadro de otro color solo les pone un marco que no tienen. */
.nos-resp__marca {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  justify-self: center;
}
.nos-resp__logo { width: 100%; max-width: 300px; height: auto; display: block; }
/* El enlace toma el ancho del logo, así el área que se toca es el logo y no
   toda la columna. */
.nos-resp__logo-link,
.firma-marcas__link {
  display: block;
  border-radius: 6px;
  transition: opacity .18s ease, transform .18s ease;
}
.nos-resp__logo-link { width: 100%; max-width: 300px; }
.firma-marcas__link { display: inline-flex; }
.nos-resp__logo-link:hover,
.firma-marcas__link:hover { opacity: .85; }
.nos-resp__logo-link:focus-visible,
.firma-marcas__link:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
/* El sello, algo mas chico que el logo: es la firma de lo que dice el titulo,
   no la marca. La raya de arriba lo separa sin encerrarlo en una caja. */
.nos-resp__sello {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

/* La fabrica y el video, uno al lado del otro y de la misma altura: los
   50.000 m2 se entienden viendolos, no leyendo el numero. */
.nos-planta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.nos-planta__foto { margin: 0; display: flex; flex-direction: column; }
/* height: auto tiene que estar. El <img> trae width y height como atributos
   -para que no salte el layout al cargar- y ese height, aunque sea una pista
   de presentacion, le gana al aspect-ratio: la foto salia a sus 399 px
   naturales y no a los 16:9 del video de al lado. */
.nos-planta__img,
.nos-planta__foto .img-missing {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* La foto es una aerea casi cuadrada y los galpones estan abajo a la
     derecha: centrada, el recorte 16:9 se lleva medio campo y media ciudad. */
  object-position: 58% 62%;
  border-radius: 14px;
  display: block;
}
.nos-planta__foto figcaption {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 8px;
}
/* La tarjeta de video trae su propio pie: la foto se alinea con el. */
.nos-planta .video-card { margin: 0; }

.nos-cifras {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
}
.nos-cifra {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--turquesa);
  border-radius: 14px;
  padding: 22px 24px;
}
.nos-cifra__dato {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.4px;
  color: var(--navy);
  /* Tabular para que los tres numeros arranquen a la misma altura optica. */
  font-variant-numeric: tabular-nums;
}
.nos-cifra__que {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .nos-pais__inner,
  .nos-resp__inner { grid-template-columns: 1fr; }
  .nos-pais__titulo { font-size: 27px; letter-spacing: -0.7px; }
  .nos-resp__titulo { font-size: 25px; letter-spacing: -0.6px; }
  .nos-resp__head { grid-column: 1; }
  /* Apilados, el logo y el sello se ponen uno al lado del otro: la columna ya
     no es angosta y de a uno quedarian dos renglones casi vacios. */
  .nos-resp__marca {
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    justify-self: start;
    gap: 24px;
  }
  .nos-resp__logo { max-width: 190px; }
  /* En la fila el enlace no es una imagen: con width 100% se tomaba el ancho
     sobrante y el sello lo apretaba hasta 100 px. Con ancho fijo queda en los
     190 px que tenía el logo antes de ser enlace. */
  .nos-resp__logo-link { flex: none; width: 190px; max-width: 100%; }
  .nos-resp__sello {
    max-width: 130px;
    padding-top: 0;
    padding-left: 24px;
    border-top: 0;
    border-left: 1px solid var(--line-strong);
  }
  .nos-planta { grid-template-columns: 1fr; gap: 14px; }
  .nos-firma { gap: 20px; padding: 22px 22px; }
  .nos-firma__logo { height: 46px; }
  .nos-firma__texto { font-size: 18px; }
  .nos-cifras { grid-template-columns: 1fr; gap: 12px; }
  .nos-cifra { padding: 18px 20px; }
  .nos-cifra__dato { font-size: 31px; }
  .nos-mapa__img { max-height: 300px; }
}

/* ---------- contacto ---------- */

.contacto { display: grid; grid-template-columns: 1.35fr 1fr; gap: 38px; align-items: start; }
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--navy); }
.campo input, .campo textarea {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--turquesa); outline-offset: -1px; }
.campo [aria-invalid="true"] { border-color: var(--danger); }
.campo__error { font-size: 12.5px; color: var(--danger); }

.contacto__datos {
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 32px 30px;
}
.contacto__datos h2 { font-family: var(--display); font-size: 23px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.5px; }
.contacto__datos > p { font-size: 14.5px; color: rgba(255, 255, 255, 0.82); margin: 0 0 18px; }
.contacto__dato { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; font-size: 15px; }
.contacto__dato span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--turquesa);
}
.contacto__dato a { color: #fff; text-decoration: none; }
.contacto__dato a:hover { text-decoration: underline; color: #fff; }
.contacto__nota { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 22px 0 0; }

.ok-msg {
  background: var(--mint-bg);
  border: 1px solid var(--mint-border);
  border-radius: 12px;
  padding: 20px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--teal-deep);
}
.ok-msg strong { color: var(--navy); }

/* ---------- cierre ---------- */

/* El cierre repite al pie de casi todas las paginas, asi que cada pixel que
   ocupa lo ocupa doce veces. Es una invitacion, no una seccion: el titulo, dos
   renglones y los botones, en una franja que se lee de una mirada. */
.cierre {
  background: linear-gradient(115deg, var(--navy) 0%, #1E5E7E 55%, var(--teal-dark) 100%);
  color: #fff;
  padding: 34px 24px;
  margin-top: 0;
}
.cierre__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 40px;
  text-align: left;
}
.cierre__inner > h2 { grid-column: 1; grid-row: 1; }
.cierre__inner > p { grid-column: 1; grid-row: 2; }
.cierre__acciones { grid-column: 2; grid-row: 1 / span 2; }
.cierre__inner h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin: 0;
}
.cierre__inner p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 6px 0 0;
  max-width: 56ch;
}
.cierre__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.cierre__acciones .btn { padding: 11px 20px; font-size: 13.5px; }

/* El asesoramiento de la home: el mismo fondo, en recuadro como el de
   alquiler y separado del slider. */
.asesor-home { padding: 30px 0 0; }

/* Los dos recuadros de la home, asesoramiento y alquiler, con la misma
   altura: filas de 1fr, y cada recuadro estirado hasta el alto de su fila.
   El más alto -alquiler- es el que marca la medida. */
.home-recuadros { display: grid; grid-auto-rows: 1fr; }
.home-recuadros > section { display: flex; flex-direction: column; }
.home-recuadros .cierre--recuadro,
.home-recuadros .alq__inner { flex: 1 1 auto; }
/* Mismo ancho, radio y relleno que .alq__inner, para que los dos recuadros
   seguidos midan igual. */
.cierre--recuadro {
  border-radius: 14px;
  padding: 26px 30px;
}
/* El texto queda centrado en alto cuando el recuadro se estira. */
.cierre--recuadro { display: flex; align-items: center; }
.cierre--recuadro .cierre__inner { max-width: none; width: 100%; }
.cierre--recuadro .cierre__inner p { font-size: 16px; max-width: 80ch; }
.cierre--recuadro .btn { cursor: pointer; font: inherit; }

/* ---------- alquiler ---------- */

/* Va arriba del cierre y tiene que distinguirse de el sin gritar: el cierre es
   la franja navy a todo el ancho, asi que el alquiler es una tarjeta clara
   apoyada sobre el fondo de la pagina. */
/* Pegada a los seis rubros de arriba: termina una y empieza la otra. */
/* En la home va entre la franja de asesoramiento y la galería: el aire va
   arriba, porque abajo la galería ya trae el suyo. */
.alq { padding: 30px 0 0; }
.alq__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
  flex-wrap: wrap;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  padding: 26px 30px;
}
.alq__cuerpo { flex: 1 1 460px; min-width: 0; }
.alq__marca {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.alq__titulo {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--navy);
  margin: 5px 0 0;
}
.alq__texto {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 8px 0 0;
  max-width: 62ch;
}
.alq__puntos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.alq__puntos li {
  font-size: 12.5px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}
.alq__accion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 0 0 auto;
}
.alq__accion .btn { cursor: pointer; font: inherit; }
.alq__nota { font-size: 12px; color: var(--ink-3); }

@media (max-width: 780px) {
  .cierre__inner { grid-template-columns: 1fr; }
  .cierre__inner > h2, .cierre__inner > p, .cierre__acciones {
    grid-column: 1;
    grid-row: auto;
  }
  .cierre__acciones { margin-top: 16px; }
}

/* ---------- responsive del sitio ---------- */

@media (max-width: 1080px) {
  .hero-inst__titulo { font-size: 44px; }
  .eq-grid, .eq-grid--3, .casos-grid { grid-template-columns: repeat(2, 1fr); }
  .porque__grid { grid-template-columns: repeat(2, 1fr); }
  .eq-galeria { grid-template-columns: repeat(3, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* En una columna, el rubro se acuesta: el icono a la izquierda y el texto al
   lado. Apilado -icono centrado, nombre, texto, flecha- cada uno medía 245 px
   y los seis se llevaban 1655 px de scroll; acostados, la mitad. El icono
   ocupa las tres filas del texto, asi que queda centrado contra el bloque. */
@media (max-width: 620px) {
  .accesos__grid { gap: 8px; }
  .acceso {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    text-align: left;
    padding: 12px 10px;
  }
  .acceso .rubro__icono {
    width: 62px;
    height: 62px;
    margin: 0;
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .acceso__nombre { grid-column: 2; grid-row: 1; letter-spacing: 1.1px; }
  .acceso__texto {
    grid-column: 2;
    grid-row: 2;
    margin: 5px 0 0;
    max-width: none;
    font-size: 14px;
  }
  .acceso__ir { grid-column: 2; grid-row: 3; margin-top: 7px; }
  /* Sin el salto al pasar el dedo: en tactil no hay "pasar por encima", y el
     movimiento aparece recien al tocar, cuando ya se esta yendo a otra pagina. */
  .acceso:hover { transform: none; }
}

@media (max-width: 900px) {
  /* En el celular el aire se paga en scroll: la misma pagina en 375 px mide el
     triple de pantallas que en el escritorio. */
  .cta-fila { padding: 14px 0; }
  .cta-fila__inner { padding-top: 18px; padding-bottom: 18px; }
  .cta-fila__titulo { font-size: 22px; }
  .cta-fila__btn { width: 100%; justify-content: center; }
  .home-enunciado { padding: 22px 0 4px; }
  .accesos { padding: 26px 0 30px; }
  .accesos__marco { padding: 24px 16px 20px; }

  .hero-inst__inner { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; }
  .hero-inst__art { order: -1; }
  .hero-inst__img, .hero-inst__art .img-missing { height: 230px; }
  .hero-inst__titulo { font-size: 38px; letter-spacing: -1.1px; }
  .hero-inst__bajada { font-size: 17px; }
  .sec-head__titulo { font-size: 32px; }
  .eq-detalle__top { grid-template-columns: 1fr; gap: 26px; }
  .eq-detalle__media { height: 260px; border-radius: 14px; }
  .eq-detalle__info h1 { font-size: 30px; }
  .inst-tira__grid { grid-template-columns: repeat(2, 1fr); }
  .contacto { grid-template-columns: 1fr; }
  .mv { grid-template-columns: 1fr; }
  .cierre__inner h2 { font-size: 26px; }
}

@media (max-width: 640px) {
  .seccion { padding: 26px 24px 30px; }
  .hero-inst__titulo { font-size: 32px; }
  .eq-grid, .eq-grid--3, .casos-grid, .inst-tira__grid { grid-template-columns: 1fr; }
  .porque__grid { grid-template-columns: 1fr; }
  .eq-galeria { grid-template-columns: repeat(2, 1fr); }
  .eq-lista { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .evento { grid-template-columns: 1fr; }
  .evento__media { height: 180px; min-height: 0; }
  .evento__media--logo { height: 150px; border-right: 0; border-bottom: 1px solid var(--line); }
  .evento__media--logo img { max-height: 100px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .aviso-tienda { padding: 22px 24px; }
  .sec-head__titulo { font-size: 27px; }
}

/* ================================================= Tecnología ROTOPLAST */

/* El header fijo taparía el título de cada bloque al saltar desde el índice. */
[id^="tec-"] { scroll-margin-top: 84px; }

.tec-intro { padding-bottom: 30px; }
.tec-intro .sec-head { margin-bottom: 14px; }
.tec-alcance {
  display: inline-block;
  margin: 0 0 20px;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--mint-bg);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
}
.tec-indice { display: flex; flex-wrap: wrap; gap: 8px; }
.tec-indice a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  background: var(--surface);
}
.tec-indice a:hover { border-color: var(--teal); color: var(--teal-dark); }

.tec-ante {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

/* ---- SMC: la franja oscura ---- */
.tec-smc {
  background: linear-gradient(120deg, var(--navy) 0%, #1E4866 100%);
  color: #fff;
  padding: 52px 0;
}
.tec-smc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 26px 48px;
  align-items: center;
}
.tec-smc .tec-ante { color: #7FD8C8; }
.tec-smc h2 {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  margin: 0 0 14px;
}
.tec-smc__texto p { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.86); margin: 0 0 12px; }
.tec-smc__dato { display: flex; align-items: baseline; gap: 12px; margin-top: 18px !important; }
.tec-smc__dato strong {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.tec-smc__dato span { font-size: 14px; color: rgba(255, 255, 255, 0.75); max-width: 20ch; }
.tec-smc__img { margin: 0; }
.tec-smc__img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
.tec-smc__ventajas {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 24px;
}
.tec-smc__ventajas h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
}
.tec-ventajas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 24px;
}
.tec-ventajas li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.tec-ventajas li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 4px;
  width: 11px;
  height: 6px;
  border-left: 2px solid #7FD8C8;
  border-bottom: 2px solid #7FD8C8;
  transform: rotate(-45deg);
}

/* ---- grupos de piezas ---- */
.tec-grupo { padding: 52px 0 10px; }
/* Sin ancho maximo: los textos de esta pagina llegan hasta el margen, igual
   que las tarjetas que tienen debajo. */
.tec-head { margin-bottom: 26px; }
.tec-head h2 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--navy);
  margin: 0 0 8px;
}
.tec-head p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.tec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.tec-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.tec-card__media {
  height: 240px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.tec-card__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.tec-card--foto .tec-card__media { padding: 0; }
.tec-card--foto .tec-card__img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.tec-card__body { padding: 20px 22px 22px; }
.tec-card__body h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.tec-card__body > p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.tec-puntos { list-style: none; margin: 0; padding: 0; }
.tec-puntos li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.tec-puntos li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* ---- UV-C ---- */
.tec-uvc { padding: 52px 0 10px; }
.tec-uvc__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: center;
  /* El mismo azul de la franja de SMC, para que las dos franjas oscuras de la
     pagina sean la misma y no dos. */
  background: linear-gradient(120deg, var(--navy) 0%, #1E4866 100%);
  border-radius: 18px;
  overflow: hidden;
  padding: 0 40px 0 0;
  color: #fff;
}
.tec-uvc__img { margin: 0; height: 100%; min-height: 360px; }
.tec-uvc__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tec-uvc .tec-ante { color: #F2C230; }
.tec-uvc h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 14px;
}
.tec-uvc__texto { padding: 36px 0; }
.tec-uvc__texto p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.84); margin: 0 0 10px; }
.tec-uvc__texto .tec-uvc__resultado { color: #fff; font-weight: 600; margin-top: 14px; }

/* ---- control Wi-Fi ---- */
.tec-control { padding: 52px 0 10px; }
.tec-control__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 36px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 32px;
}
.tec-control__panel figure { margin: 0; }
.tec-control__panel img { width: 100%; height: auto; display: block; }
.tec-control__panel h3,
.tec-funciones h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}
.tec-control__app {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  background: linear-gradient(135deg, #123A6B 0%, #0E2A4E 100%);
  border-radius: 14px;
  padding: 28px 32px;
}
.tec-control__cel { margin: 0; }
.tec-control__cel img { width: 100%; height: auto; display: block; border-radius: 10px; }
.tec-funciones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}
.tec-funciones li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.tec-icono { width: 34px; height: 34px; color: #7FD8C8; }
.tec-funciones h3 { color: #fff; font-size: 15.5px; margin: 2px 0 4px; }
.tec-funciones p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }

.tec-cierre { padding-top: 52px; padding-bottom: 10px; }

/* ---- la franja en la ficha de cada equipo ---- */
.eq-tec {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 26px;
}
.eq-tec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.eq-tec__head h2 { margin-bottom: 6px; }
.eq-tec__head .eq-bloque__texto { margin: 0; }
.eq-tec__ir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--teal-dark); white-space: nowrap; }
.eq-tec__ir .flecha-ir { width: 16px; height: 16px; }
.eq-tec__piezas {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.eq-tec__piezas li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.eq-tec__img { height: 92px; display: flex; align-items: center; justify-content: center; }
.eq-tec__img img { max-height: 92px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.eq-tec__nombre { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.35; }

@media (max-width: 980px) {
  .tec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tec-ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tec-control__app { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tec-smc { padding: 38px 0; }
  .tec-smc__inner,
  .tec-control__panel,
  .tec-control__app { grid-template-columns: minmax(0, 1fr); }
  .tec-smc h2 { font-size: 26px; }
  .tec-grupo, .tec-uvc, .tec-control { padding-top: 38px; }
  .tec-head h2 { font-size: 25px; }
  .tec-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tec-card__media { height: 220px; }
  .tec-uvc__inner { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .tec-uvc__img { min-height: 0; height: 240px; }
  .tec-uvc__texto { padding: 24px 20px 26px; }
  .tec-uvc h2 { font-size: 23px; }
  .tec-control__panel, .tec-control__app { padding: 20px 18px; gap: 20px; }
  .tec-control__cel { max-width: 260px; margin: 0 auto; }
  .tec-funciones { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .eq-tec { padding: 20px 16px; }
  .eq-tec__piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .tec-ventajas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- opcional de una familia (extractores sobre ruedas) ---------- */
.prod-opcional {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 640px;
  margin: 18px 0 6px;
  padding: 14px 22px 14px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
}
.prod-opcional__img { height: 170px; display: flex; align-items: center; justify-content: center; }
.prod-opcional__img img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.prod-opcional__etiqueta {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.prod-opcional h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 2px 0 6px;
}
.prod-opcional p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 520px) {
  .prod-opcional { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 14px 12px 10px; }
  .prod-opcional__img { height: 120px; }
  .prod-opcional h3 { font-size: 17px; }
}