/* ==========================================================================
   Borbolla Metrology — sistema de diseño
   Sustituye a styles.css + slider.css + SpryMenuBar*.css
   Sin dependencias: ni jQuery, ni Spry, ni Bootstrap.
   ========================================================================== */

:root {
  /* --- Marca -------------------------------------------------------------
     Muestreado del logo: ámbar #FFC000 sobre negro.
     El ámbar puro no da contraste suficiente para texto sobre blanco,
     así que existe --bronce para ese uso. */
  --ambar:        #FFC000;
  --ambar-claro:  #FFE9A8;
  --ambar-tenue:  #FFF8E6;
  --bronce:       #7A5500;   /* ámbar oscurecido: sí es legible sobre claro */

  /* --- Neutros, con un sesgo cálido mínimo para acompañar al ámbar ------- */
  --tinta:        #14120D;
  --tinta-2:      #3F3B33;
  --tinta-3:      #6E685D;
  --linea:        #E0DBD1;
  --linea-fuerte: #C7C0B3;
  --fondo:        #FFFFFF;
  --fondo-2:      #FAF8F4;
  --fondo-3:      #F2EEE6;

  /* --- Semánticos (independientes del color de marca) ------------------- */
  --exito:        #2C6B3F;
  --error:        #A32E22;

  /* --- Tipografía ------------------------------------------------------- */
  --titular: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --texto:   -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --dato:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
             "Liberation Mono", monospace;

  /* --- Ritmo vertical --------------------------------------------------- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;  --e9: 96px;

  --ancho: 1200px;
}

/* --------------------------------------------------------------------------
   Reinicio mínimo
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--titular);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--bronce); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tinta); }

/* Foco visible en todo lo interactivo: hoy el sitio no lo tiene */
:focus-visible {
  outline: 3px solid var(--bronce);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enlace de salto para lectores de pantalla y teclado */
.saltar {
  position: absolute;
  left: -9999px;
  background: var(--tinta);
  color: #fff;
  padding: var(--e3) var(--e5);
  z-index: 100;
}
.saltar:focus { left: var(--e4); top: var(--e4); }

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

/* --------------------------------------------------------------------------
   Contenedor y rejilla
   Reemplaza el ancho fijo de 1250px y los márgenes negativos encadenados.
   -------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e5);
}

.seccion { padding-block: var(--e8); }

@media (max-width: 640px) {
  .seccion { padding-block: var(--e7); }
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cabecera {
  border-bottom: 1px solid var(--linea);
  background: var(--fondo);
  position: sticky;
  top: 0;
  z-index: 50;
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e5);
  padding-block: var(--e4);
  flex-wrap: wrap;
}

/* El archivo mide 872 px de ancho, asi que hasta 440 px se ve nitido incluso
   en pantalla de alta densidad. El minimo sube a 260 para que en el telefono
   siga leyendose "METROLOGY" debajo del nombre. */
.cabecera__logo img { width: clamp(260px, 38vw, 440px); }

.cabecera__contacto {
  margin-left: auto;
  text-align: right;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-3);
}
.cabecera__tel {
  font-family: var(--dato);
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
  display: block;
  letter-spacing: -.01em;
}

/* --- Buscador ------------------------------------------------------------
   La caja la dibuja js/buscar.js: sin JavaScript no puede funcionar, y una
   caja muerta es peor que ninguna. Por eso aqui solo esta el estilo. */

.buscador {
  position: relative;
  flex: 0 1 260px;
  margin-left: var(--e4);
}
.buscador__campo {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 9px var(--e3);
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--tinta);
  border-radius: 0;
  -webkit-appearance: none;
}
.buscador__campo::placeholder { color: var(--tinta-3); }
.buscador__campo:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 1px;
}
.buscador__lista {
  position: absolute;
  z-index: 120;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--linea);
  box-shadow: 0 12px 28px rgba(20, 18, 13, .16);
  max-height: 60vh;
  overflow-y: auto;
}
.buscador__lista[hidden] { display: none; }
.buscador__lista li + li { border-top: 1px solid var(--linea); }
.buscador__lista a {
  display: block;
  padding: 10px var(--e3);
  text-decoration: none;
  color: var(--tinta);
}
.buscador__lista a:hover,
.buscador__lista li[aria-selected="true"] a { background: var(--crema); }
.buscador__t { display: block; font-size: 14px; line-height: 1.35; }
.buscador__s {
  display: block;
  font-size: 12px;
  color: var(--tinta-3);
  margin-top: 2px;
}
.buscador__vacio {
  padding: 10px var(--e3);
  font-size: 13px;
  color: var(--tinta-2);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .cabecera { position: static; }
  .cabecera__contacto { margin-left: 0; text-align: left; width: 100%; }
  /* En el telefono el buscador va a todo lo ancho, debajo del contacto. */
  .buscador { flex: 1 0 100%; margin-left: 0; }
}

/* --- Navegación principal ------------------------------------------------
   HTML semántico + :focus-within. Sin Spry, sin JS, navegable con teclado. */

.nav { border-top: 1px solid var(--linea); }

.nav__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}

.nav__enlace {
  display: block;
  padding: var(--e3) var(--e4);
  font-family: var(--titular);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav__enlace:hover,
.nav__enlace:focus-visible { border-bottom-color: var(--ambar); color: var(--tinta); }
.nav__enlace[aria-current="page"] { border-bottom-color: var(--tinta); }

/* Menú de teléfono: <details> nativo, sin JavaScript */
.menu-movil { display: none; }
.menu-movil > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--e3) var(--e4);
  font-family: var(--titular);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 2px solid var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil > summary::after { content: "▾"; }
.menu-movil[open] > summary::after { content: "▴"; }

@media (max-width: 860px) {
  .nav > .contenedor > .nav__lista { display: none; }
  .menu-movil { display: block; padding-block: var(--e3); }
  .menu-movil .nav__lista { display: block; margin-top: var(--e3); }
  .menu-movil .nav__enlace {
    border-bottom: 1px solid var(--linea);
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   Portada: bloque de apertura
   -------------------------------------------------------------------------- */

.hero {
  background: var(--tinta);
  color: #fff;
  padding-block: var(--e9);
  position: relative;
  overflow: hidden;
}

/* Retícula de medición: el motivo del oficio, no un adorno genérico */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,192,0,.16) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, rgba(255,192,0,.10) 0 1px, transparent 1px 48px);
  pointer-events: none;
}

.hero > * { position: relative; }

.hero__rejilla {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: var(--e7);
  align-items: center;
}

.hero__eyebrow {
  font-family: var(--dato);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: var(--e4);
}

.hero__titulo {
  font-size: clamp(34px, 5vw, 60px);
  color: #fff;
  margin-bottom: var(--e5);
}
.hero__titulo em { font-style: normal; color: var(--ambar); }

.hero__entrada {
  font-size: 18px;
  color: #D8D3C8;
  max-width: 54ch;
  margin-bottom: var(--e6);
}

.hero__acciones { display: flex; gap: var(--e3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero { padding-block: var(--e7); }
  .hero__rejilla { grid-template-columns: 1fr; gap: var(--e6); }
}

/* --- Sello de acreditación: el argumento de venta más fuerte ------------- */

.sello {
  border: 1px solid rgba(255,192,0,.35);
  background: rgba(255,255,255,.04);
  padding: var(--e5);
  display: grid;
  gap: var(--e3);
}
.sello__etiqueta {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
}
.sello p { font-size: 15px; color: #D8D3C8; }
.sello img { border: 1px solid rgba(255,255,255,.14); }

/* --------------------------------------------------------------------------
   Botones — reemplazan a las clases de Bootstrap que nunca se cargaron
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--titular);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--e3) var(--e5);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.boton--principal {
  background: var(--ambar);
  color: var(--tinta);
  border-color: var(--ambar);
}
.boton--principal:hover { background: var(--ambar-claro); border-color: var(--ambar-claro); color: var(--tinta); }

.boton--claro {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.boton--claro:hover { background: #fff; color: var(--tinta); border-color: #fff; }

.boton--oscuro {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}
.boton--oscuro:hover { background: var(--tinta); color: #fff; }

.boton:disabled,
.boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Encabezado de sección
   -------------------------------------------------------------------------- */

.seccion__cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e6);
  padding-bottom: var(--e3);
  border-bottom: 2px solid var(--tinta);
}
.seccion__titulo { font-size: clamp(24px, 3vw, 32px); }
.seccion__nota {
  margin-left: auto;
  font-size: 14px;
  color: var(--tinta-3);
}

/* --------------------------------------------------------------------------
   Rejilla de productos
   Reemplaza los 30 IDs #box11…#box103 por una sola clase reutilizable
   (y de paso corrige el defecto M-07: la min-height que nunca se aplicó)
   -------------------------------------------------------------------------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--e5);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--ambar);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tarjeta:hover {
  border-color: var(--linea-fuerte);
  border-top-color: var(--ambar);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20,18,13,.09);
  color: inherit;
}

.tarjeta__medio {
  aspect-ratio: 4 / 3;
  background: var(--fondo-3);
  display: grid;
  place-items: center;
  padding: var(--e5);
  overflow: hidden;
}
.tarjeta__medio img { max-height: 100%; width: auto; object-fit: contain; }

.tarjeta__cuerpo {
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  flex: 1;
}

.tarjeta__marca {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronce);
}
.tarjeta__titulo { font-size: 18px; }
.tarjeta__texto { font-size: 14.5px; color: var(--tinta-2); }

.tarjeta__pie {
  margin-top: auto;
  padding-top: var(--e3);
  font-family: var(--titular);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bronce);
}
.tarjeta:hover .tarjeta__pie { color: var(--tinta); }

/* --------------------------------------------------------------------------
   Explorador de marcas
   Cada tarjeta muestra el logotipo de la marca. Al pasar el cursor por encima
   (o al tocar una miniatura en un teléfono) el logotipo da paso a las fotos
   de los equipos de esa marca.

   Es la misma idea del sitio anterior, que hacía este cambio con
   MM_swapImage() de Dreamweaver. Aquí se resuelve con CSS y un solo
   escuchador de eventos, y además funciona con teclado y con el dedo.
   -------------------------------------------------------------------------- */

.marcas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--e5);
}

@media (max-width: 560px) {
  .marcas { grid-template-columns: 1fr; }
}

.marca {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  background: var(--fondo);
  transition: box-shadow .15s ease, border-color .15s ease;
  /* Ancla para el enlace que cubre toda la tarjeta */
  position: relative;
}
.marca:hover,
.marca:focus-within {
  border-color: var(--linea-fuerte);
  box-shadow: 0 6px 22px rgba(20,18,13,.09);
}

/* --- Visor: logotipo por defecto, fotos al pasar el cursor ------------ */

.marca__visor {
  aspect-ratio: 5 / 2;
  background: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}

.marca__logo,
.marca__foto {
  position: absolute;
  inset: var(--e4);
  width: calc(100% - var(--e4) * 2);
  height: calc(100% - var(--e4) * 2);
  /* `contain` y no `cover`: el archivo mezcla logotipos, banners de 3:1 y
     fotos casi cuadradas. Con `cover` las cuadradas salían recortadas. */
  object-fit: contain;
  transition: opacity .3s ease;
}

.marca__foto { opacity: 0; }
.marca__logo { opacity: 1; }

.marca.mostrando .marca__foto { opacity: 1; }
.marca.mostrando .marca__logo { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .marca__logo, .marca__foto { transition: none; }
}

/* Pie de foto que aparece con la imagen */
.marca__leyenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--e3);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--tinta);
  background: linear-gradient(to top, rgba(255,255,255,.97) 60%, rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .2s ease;
}
.marca.mostrando .marca__leyenda { opacity: 1; }

/* --- Tira de miniaturas ---------------------------------------------- */

.marca__tiras {
  display: flex;
  gap: 2px;
  background: var(--linea);
  border-bottom: 1px solid var(--linea);
}

.marca__tira {
  flex: 1;
  padding: 3px;
  border: 0;
  background: #fff;
  cursor: pointer;
  /* Altura fija, no `aspect-ratio`: con proporción la miniatura caía a 27 px
     de alto en teléfono (bajo el mínimo táctil de 44 px), y forzar
     `min-height` sobre una proporción imponía un ancho mínimo que
     desbordaba la pantalla. */
  height: 52px;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.marca__tira img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .45;
  transition: opacity .15s ease;
}
.marca__tira:hover img { opacity: .9; }
.marca__tira[aria-pressed="true"] img { opacity: 1; }
.marca__tira[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--ambar);
}

/* --- Texto ------------------------------------------------------------ */

.marca__cuerpo {
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  flex: 1;
}

.marca__rubro {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronce);
}
.marca__nombre { font-size: 20px; }
.marca__texto { font-size: 14.5px; color: var(--tinta-2); }

.marca__enlace {
  margin-top: auto;
  padding-top: var(--e3);
  font-family: var(--titular);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bronce);
  align-self: flex-start;
}
.marca__enlace:hover { color: var(--tinta); text-decoration: underline; }

/* Toda la tarjeta es clicable, no solo el "Ver marca".
   Se estira el enlace que ya existe en lugar de envolver la tarjeta en otro:
   asi sigue habiendo un unico destino para el teclado y el lector de pantalla. */
.marca__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}
.marca:hover .marca__enlace { color: var(--tinta); text-decoration: underline; }

/* Las miniaturas cambian la foto y NO deben navegar: van por encima. */
.marca__tiras { position: relative; z-index: 1; }

/* El cursor avisa que la tarjeta entera responde */
.marca { cursor: pointer; }
.marca__tira { cursor: pointer; }

/* --------------------------------------------------------------------------
   Banda de apertura compacta
   -------------------------------------------------------------------------- */

.banda {
  background: var(--tinta);
  color: #fff;
  padding-block: var(--e7);
  position: relative;
  overflow: hidden;
}
.banda::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,192,0,.16) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, rgba(255,192,0,.10) 0 1px, transparent 1px 48px);
  pointer-events: none;
}
.banda > * { position: relative; }

.banda__titulo {
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
  max-width: 22ch;
  margin-bottom: var(--e4);
}
.banda__titulo em { font-style: normal; color: var(--ambar); }

.banda__entrada {
  font-size: 17px;
  color: #D8D3C8;
  max-width: 58ch;
}

.banda__fila {
  display: flex;
  gap: var(--e5);
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Distintivo de acreditación, en línea */
.distintivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  border: 1px solid rgba(255,192,0,.4);
  background: rgba(255,192,0,.07);
  padding: var(--e3) var(--e4);
  text-decoration: none;
  color: #fff;
  max-width: 340px;
}
.distintivo:hover { background: rgba(255,192,0,.14); color: #fff; }
.distintivo strong {
  font-family: var(--dato);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ambar);
  display: block;
}
.distintivo span { font-size: 13.5px; color: #D8D3C8; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Carrusel — CSS scroll-snap nativo.
   Sustituye a s3Slider + jQuery 1.7.2 (defecto C-07).
   Se desplaza con el dedo, con la rueda y con el teclado.
   -------------------------------------------------------------------------- */

.carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 380px);
  gap: var(--e4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e4);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.carrusel > * { scroll-snap-align: start; }

.diapositiva {
  border: 1px solid var(--linea);
  background: var(--fondo-2);
  display: flex;
  flex-direction: column;
}
.diapositiva__medio {
  aspect-ratio: 16 / 9;
  background: var(--fondo-3);
  display: grid;
  place-items: center;
  padding: var(--e4);
}
.diapositiva__cuerpo { padding: var(--e5); display: grid; gap: var(--e2); }
.diapositiva__titulo { font-size: 17px; }
.diapositiva__lista {
  list-style: none;
  display: grid;
  gap: var(--e1);
  font-size: 14px;
  color: var(--tinta-2);
}
.diapositiva__lista li { padding-left: var(--e4); position: relative; }
.diapositiva__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--ambar);
}

/* --------------------------------------------------------------------------
   Franja de cifras
   -------------------------------------------------------------------------- */

.cifras {
  background: var(--fondo-2);
  border-block: 1px solid var(--linea);
}
.cifras__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e6);
  padding-block: var(--e7);
}
.cifra__n {
  font-family: var(--titular);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: var(--e2);
}
.cifra__n span { color: var(--ambar); }
.cifra__l { font-size: 14.5px; color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   Formularios — estilos propios, sin Bootstrap (defecto A-06)
   -------------------------------------------------------------------------- */

.campo { display: grid; gap: var(--e2); margin-bottom: var(--e5); }
.campo label { font-size: 14px; font-weight: 600; }
.campo label .req { color: var(--error); }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 16px;            /* 16px evita que iOS haga zoom al enfocar */
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linea-fuerte);
  background: var(--fondo);
  color: var(--tinta);
  width: 100%;
}
.campo input:focus-visible,
.campo textarea:focus-visible { border-color: var(--bronce); }

.campo__ayuda { font-size: 13px; color: var(--tinta-3); }
.campo__error { font-size: 13.5px; color: var(--error); font-weight: 600; }

/* Trampa para bots: invisible para el usuario, presente para el robot */
.trampa {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie {
  background: var(--tinta);
  color: #C9C4B8;
  padding-block: var(--e7) var(--e5);
  margin-top: var(--e9);
}
.pie a { color: #fff; }
.pie a:hover { color: var(--ambar); }

.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e6);
  padding-bottom: var(--e6);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.pie__titulo {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: var(--e3);
}
.pie__lista { list-style: none; display: grid; gap: var(--e2); font-size: 14.5px; }

.pie__social { display: flex; gap: var(--e3); margin-top: var(--e3); }
.pie__social img { width: 28px; height: 28px; object-fit: contain; }

.pie__legal {
  padding-top: var(--e4);
  font-size: 13px;
  color: #8C8779;
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

.prosa { max-width: 68ch; }
.prosa p + p { margin-top: var(--e4); }
.desplaza-x { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Página de producto (plantilla de marca)
   Reemplaza el patrón de las 222 páginas actuales, donde cada modelo era
   un #boxNN con posición fija y márgenes negativos.
   -------------------------------------------------------------------------- */

/* --- Migas de pan ----------------------------------------------------- */

.migas {
  padding-block: var(--e4);
  border-bottom: 1px solid var(--linea);
  font-size: 13.5px;
  color: var(--tinta-3);
}
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); }
.migas li + li::before { content: "›"; margin-right: var(--e2); color: var(--linea-fuerte); }
.migas a { color: var(--tinta-3); }
.migas a:hover { color: var(--tinta); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* --- Encabezado de la marca ------------------------------------------ */

.producto-cab {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--e7);
  align-items: center;
  padding-block: var(--e7);
  border-bottom: 1px solid var(--linea);
}
.producto-cab__logo {
  background: #fff;
  border: 1px solid var(--linea);
  padding: var(--e5);
  display: grid;
  place-items: center;
  min-height: 130px;
  /* El recuadro se ajusta al logotipo, igual que en las fichas de equipo:
     con un ancho fijo de columna quedaban franjas blancas a los lados. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
/* Los logos de los fabricantes vienen en archivos de tamanos muy distintos
   (de 193x64 a 380x264) y con proporciones que no se parecen: unos son una
   franja larga y otros casi un cuadrado. A tamano real el de Rayco se veia la
   mitad de grande que el de Dorsey sin ninguna razon. Se le da a todos la
   misma caja y 'contain' los acomoda dentro: los anchos se ajustan por el
   ancho, los cuadrados por el alto, y ninguno se deforma. */
.producto-cab__logo img {
  width: 260px;
  height: 90px;
  max-width: 100%;
  object-fit: contain;
}

.producto-cab__rubro {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronce);
  margin-bottom: var(--e2);
}
.producto-cab__titulo { font-size: clamp(28px, 4vw, 42px); margin-bottom: var(--e4); }
.producto-cab__entrada { font-size: 17px; color: var(--tinta-2); max-width: 62ch; }
.producto-cab__acciones { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e5); }

@media (max-width: 760px) {
  .producto-cab { grid-template-columns: 1fr; gap: var(--e5); padding-block: var(--e6); }
  .producto-cab__logo { max-width: 240px; }
  .producto-cab__logo img { width: 190px; height: 68px; }
}

/* --- Ficha de cada modelo -------------------------------------------- */

.modelos { display: grid; gap: var(--e6); }

.modelo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--e6);
  align-items: center;
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--linea);
}
.modelo:last-child { border-bottom: 0; padding-bottom: 0; }

/* Alterna el lado de la foto para que la lista no se lea como una tabla */
.modelo:nth-child(even) .modelo__medio { order: 2; }

/* Sin proporción fija: el catálogo mezcla banners apaisados de 3:1 con fotos
   verticales de 4:5. Con un marco fijo de 5:2, las verticales salían diminutas
   y con franjas blancas a los lados. Así el marco se adapta a cada foto y solo
   se limita la altura para que ninguna domine la ficha. */
.modelo__medio {
  background: #fff;
  border: 1px solid var(--linea);
  padding: var(--e3);
  display: grid;
  place-items: center;
  min-height: 180px;
  /* El recuadro se ajusta a la foto, no al revés: con una foto vertical en un
     marco ancho quedaban franjas blancas enormes a los lados, dentro del borde.
     Con fit-content el borde abraza la imagen y se centra en su columna. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.modelo__medio img {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
}

.modelo__clave {
  font-family: var(--dato);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronce);
  margin-bottom: var(--e2);
}
.modelo__titulo { font-size: 22px; margin-bottom: var(--e3); }
.modelo__texto { font-size: 15px; color: var(--tinta-2); margin-bottom: var(--e4); }

.modelo__lista { list-style: none; display: grid; gap: var(--e2); font-size: 14.5px; }
.modelo__lista li { padding-left: var(--e4); position: relative; color: var(--tinta-2); }
.modelo__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--ambar);
}
.modelo__acciones { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); }

@media (max-width: 760px) {
  .modelo { grid-template-columns: 1fr; gap: var(--e4); }
  .modelo:nth-child(even) .modelo__medio { order: 0; }
}

/* --- Llamada final a cotizar ----------------------------------------- */

.cierre {
  background: var(--tinta);
  color: #fff;
  padding: var(--e7);
  display: flex;
  gap: var(--e5);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,192,0,.16) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, rgba(255,192,0,.10) 0 1px, transparent 1px 48px);
  pointer-events: none;
}
.cierre > * { position: relative; }
.cierre__titulo { font-size: clamp(22px, 3vw, 30px); color: #fff; margin-bottom: var(--e2); }
.cierre__texto { color: #D8D3C8; font-size: 16px; max-width: 52ch; }

/* --------------------------------------------------------------------------
   Página de solicitud de información
   -------------------------------------------------------------------------- */

.solicitud {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--e8);
  align-items: start;
  padding-block: var(--e7);
}

@media (max-width: 860px) {
  /* minmax(0, 1fr) y no 1fr: por defecto una columna de rejilla no baja de su
     contenido mínimo, y el iframe del reCAPTCHA (392 px) ensanchaba toda la
     columna hasta desbordar la pantalla. */
  .solicitud { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
}

/* El widget del reCAPTCHA tiene ancho propio y no se puede redimensionar
   desde fuera. Si no cabe, que se desplace dentro de su caja en lugar de
   ensanchar la página. */
.g-recaptcha {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 400px) {
  .formulario { padding: var(--e4); }
}

.solicitud__titulo { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: var(--e4); }
.solicitud__entrada { font-size: 16.5px; color: var(--tinta-2); max-width: 56ch; }

.formulario {
  border: 1px solid var(--linea);
  background: var(--fondo-2);
  padding: var(--e6);
}

.campo__obligatorios {
  font-size: 13.5px;
  color: var(--tinta-3);
  margin-bottom: var(--e5);
}

/* El producto solicitado, mostrado sin que se pueda editar por accidente */
.producto-fijo {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  background: var(--ambar-tenue);
  border-left: 4px solid var(--ambar);
  margin-bottom: var(--e5);
}
.producto-fijo dt {
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronce);
}
.producto-fijo dd { margin: 0; font-weight: 600; font-size: 16px; }

/* Lo que el visitante recibe a cambio de sus datos */
.promesa {
  border: 1px solid var(--linea);
  padding: var(--e5);
}
.promesa h2 { font-size: 18px; margin-bottom: var(--e3); }
.promesa ul { list-style: none; display: grid; gap: var(--e3); }
.promesa li {
  position: relative;
  padding-left: var(--e5);
  font-size: 14.5px;
  color: var(--tinta-2);
}
.promesa li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 10px; height: 10px;
  background: var(--ambar);
}
.promesa__pie {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
  font-size: 14px;
  color: var(--tinta-3);
}

/* --------------------------------------------------------------------------
   Página de detalle de modelo
   -------------------------------------------------------------------------- */

.detalle-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e7);
  align-items: center;
  padding-block: var(--e7);
  border-bottom: 1px solid var(--linea);
}
.detalle-cab__medio {
  background: #fff;
  border: 1px solid var(--linea);
  aspect-ratio: 4 / 3;
  padding: var(--e4);
}
.detalle-cab__medio img { width: 100%; height: 100%; object-fit: contain; }

.detalle-cab__clave {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronce);
  margin-bottom: var(--e2);
}
.detalle-cab__titulo { font-size: clamp(28px, 4vw, 42px); margin-bottom: var(--e2); }
.detalle-cab__sub { font-size: 18px; color: var(--tinta-2); margin-bottom: var(--e5); }

@media (max-width: 800px) {
  .detalle-cab { grid-template-columns: minmax(0, 1fr); gap: var(--e5); padding-block: var(--e6); }
}

/* --- Acabados de la serie -------------------------------------------- */

.acabados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.acabado { background: var(--fondo); padding: var(--e5); }
.acabado h3 {
  font-size: 16px;
  margin-bottom: var(--e2);
  border-top: 3px solid var(--ambar);
  padding-top: var(--e3);
  display: inline-block;
}
.acabado p { font-size: 14.5px; color: var(--tinta-2); }

/* --- Tabla de rangos -------------------------------------------------- */

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--linea);
  /* La tabla es ancha; que se desplace dentro de su caja y nunca empuje
     el ancho de la página. */
  max-width: 100%;
}

.rangos {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  background: var(--fondo);
  font-size: 15px;
  /* Los números de rango se leen en columna: alinearlos por dígito. */
  font-variant-numeric: tabular-nums;
}
.rangos th, .rangos td {
  padding: var(--e3) var(--e4);
  text-align: left;
  border-bottom: 1px solid var(--linea);
}
.rangos thead th {
  font-family: var(--titular);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--fondo-3);
  color: var(--tinta);
  position: sticky;
  top: 0;
}
.rangos tbody tr:last-child td { border-bottom: 0; }
.rangos tbody tr:hover { background: var(--ambar-tenue); }

/* Primera celda de cada serie: se marca el cambio de grupo */
/* Unas tablas ponen el modelo en <td> y otras en <th scope="row">; las dos
   son la primera columna y se ven igual. */
.rangos td:first-child,
.rangos tbody th {
  font-family: var(--dato);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bronce);
  white-space: nowrap;
}
.rangos tr.grupo td { border-top: 2px solid var(--linea-fuerte); }

.rangos td.revisar::after {
  content: "por confirmar";
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--error);
  margin-left: var(--e2);
  white-space: nowrap;
}

/* --- Fotos por tamaño -------------------------------------------------- */

.tamanos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--e4);
}
.tamano {
  border: 1px solid var(--linea);
  background: #fff;
  padding: var(--e3);
  text-align: center;
}
.tamano img { width: 100%; height: 130px; object-fit: contain; }

/* Fotos secundarias de una ficha: van bajo la principal, mas chicas, para
   que se note cual manda. Se pueden abrir con la lupa como cualquier otra. */
.modelo__extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--e3);
  margin-top: var(--e3);
  /* El contenedor de la foto centra a sus hijos, asi que sin esto la tira de
     miniaturas se encoge a su ancho minimo y se apilan una debajo de otra. */
  justify-self: stretch;
  width: 100%;
}
.modelo__extras img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--linea);
}
.tamano span {
  display: block;
  margin-top: var(--e2);
  font-family: var(--dato);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--tinta-2);
}

/* --- Navegación entre modelos de la misma marca ---------------------- */

.modelos-nav {
  padding-block: var(--e4);
  border-bottom: 1px solid var(--linea);
}
.modelos-nav__titulo {
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: var(--e3);
}
.modelos-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.nav-modelo {
  display: block;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linea);
  font-size: 13.5px;
  text-decoration: none;
  color: var(--tinta-2);
  background: var(--fondo);
}
.nav-modelo:hover { border-color: var(--bronce); color: var(--tinta); }
.nav-modelo.es-actual {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Subseries plegables (serie LH)
   28 modelos en una sola tabla eran ilegibles. Se agrupan en 6 bloques
   plegables: cerrado se ve una línea con foto pequeña, nombre y resumen;
   abierto aparece la tabla.

   Usa <details> nativo: sin JavaScript, y el navegador ya sabe abrirlo al
   buscar texto dentro con Ctrl+F.
   -------------------------------------------------------------------------- */

.subseries { display: grid; gap: var(--e3); }

.subserie {
  border: 1px solid var(--linea);
  background: var(--fondo);
  /* Un elemento de rejilla no baja de su contenido mínimo por defecto, y la
     tabla interna (min-width 520px) ensanchaba el bloque hasta desbordar la
     pantalla del teléfono. */
  min-width: 0;
}
.subserie[open] { border-color: var(--linea-fuerte); }

.subserie > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: center;
  padding: var(--e3) var(--e4);
}
.subserie > summary::-webkit-details-marker { display: none; }
.subserie > summary:hover { background: var(--fondo-2); }
.subserie[open] > summary { border-bottom: 1px solid var(--linea); }

.subserie__foto {
  width: 68px;
  height: 52px;
  object-fit: contain;
  background: #fff;
}

.subserie__nombre {
  font-family: var(--titular);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: block;
}
.subserie__resumen {
  font-size: 13.5px;
  color: var(--tinta-3);
  display: block;
  margin-top: 2px;
}

.subserie__meta {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bronce);
  white-space: nowrap;
}
.subserie__meta::after {
  content: "▾";
  font-size: 14px;
  color: var(--tinta-3);
}
.subserie[open] .subserie__meta::after { content: "▴"; }

.subserie__cuerpo { padding: var(--e5); min-width: 0; }

/* La temperatura es igual en toda la subserie: se muestra una vez aquí,
   en lugar de repetirla en cada fila de la tabla. */
.subserie__dato {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: var(--e4);
  font-size: 14px;
}
.subserie__dato dt {
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.subserie__dato dd { margin: 0; color: var(--tinta-2); }

.subserie__nota {
  font-size: 13.5px;
  color: var(--tinta-3);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px dashed var(--linea);
}

.leyenda {
  font-size: 13px;
  color: var(--tinta-3);
  margin-top: var(--e4);
}

@media (max-width: 560px) {
  .subserie > summary { grid-template-columns: 52px minmax(0, 1fr); gap: var(--e3); }
  .subserie__foto { width: 52px; height: 40px; }
  .subserie__meta { grid-column: 1 / -1; justify-content: space-between; }
  .subserie__cuerpo { padding: var(--e4); }
}

/* --- Modelos enlazados dentro de una tabla de datos ------------------
   La primera columna ya va en bronce, así que un enlace ahí no se
   distinguía del texto normal. El subrayado lo hace evidente. */

.rangos td a,
.rangos tbody th a {
  color: var(--bronce);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 700;
}
.rangos td a:hover,
.rangos td a:focus-visible,
.rangos tbody th a:hover,
.rangos tbody th a:focus-visible {
  color: var(--tinta);
  background: var(--ambar-claro);
}

/* --- Galeria con pie de foto ------------------------------------------
   Para lo que no es una maquina: un software se enseña, no se ficha.
   Las capturas son anchas y de detalle fino, asi que se les deja el ancho
   completo de la columna y el pie explica que esta viendo. */

.galeria {
  display: grid;
  gap: var(--e7);
}
.galeria__pieza {
  margin: 0;
  display: grid;
  gap: var(--e4);
}
.galeria__pieza img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--fondo-2);
  border: 1px solid var(--linea);
}
.galeria__pieza figcaption {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: 62ch;
}

/* --- Hojas de un documento ----------------------------------------------
   El certificado se ensena como imagenes, una por hoja. Se dibujan a todo
   el ancho de la columna, no en rejilla de tres: un documento con letra
   chica no se lee en una miniatura. */

/* Doble clase a proposito: mas abajo hay una consulta de medios que vuelve
   a poner las columnas de .galeria, y con una sola clase ganaba aquella. */
.galeria.galeria--hojas {
  grid-template-columns: 1fr;
  max-width: 900px;
}
.galeria--hojas img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linea);
  background: #fff;
}


/* Con dos o mas piezas caben en pareja, sin que ninguna baje de 320px */
@media (min-width: 900px) {
  .galeria { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .galeria__pieza { align-content: start; }
}

/* Variante de la franja para frases en lugar de cifras: "Fácil de usar" a
   42px se parte en tres renglones y desalinea la fila. */
.cifras--frases .cifra__n {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: var(--e3);
}

/* Etiqueta de orden dentro de una caja .promesa: "Etapa 1", "Módulo 2".
   Sirve para que una rejilla de cajas se lea como una secuencia y no como
   una lista de cosas sueltas. */
.promesa__orden {
  font-family: var(--dato);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronce);
  margin-bottom: var(--e2);
}
.promesa__sub {
  font-size: 13px;
  color: var(--tinta-3);
  margin: calc(var(--e2) * -1) 0 var(--e4);
}
/* En una rejilla, las cajas se estiran al alto de la fila */
.rejilla > .promesa { height: 100%; }

/* --------------------------------------------------------------------------
   Lupa: ver una imagen del catálogo en grande
   Muchas fotos de producto son chicas dentro de su tarjeta. Con esto el
   visitante las abre a pantalla completa sin salir de la página.
   El JS (js/lupa.js) añade .ampliable a las imágenes que participan.
   -------------------------------------------------------------------------- */

.ampliable { cursor: zoom-in; }
.ampliable:focus-visible { outline: 3px solid var(--bronce); outline-offset: 3px; }

.lupa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--e6);
  background: rgba(20, 18, 13, .92);
}
.lupa[hidden] { display: none; }

.lupa__figura {
  margin: 0;
  max-width: min(1700px, 100%);
  max-height: 100%;
  display: grid;
  gap: var(--e4);
  justify-items: center;
}
.lupa__figura img {
  max-width: 100%;
  /* Deja aire para el pie de foto y el botón de cerrar */
  max-height: calc(100vh - var(--e9));
  height: auto;
  object-fit: contain;
  background: var(--fondo);
  /* Las fotos chicas se amplían: al escalarlas conviene suavizar el pixel */
  image-rendering: auto;
}
.lupa__figura figcaption {
  color: #fff;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
  max-width: 70ch;
}

.lupa__cerrar {
  position: absolute;
  top: var(--e4);
  right: var(--e4);
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  cursor: pointer;
}
.lupa__cerrar:hover { background: rgba(255, 255, 255, .12); }
.lupa__cerrar:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* Con la lupa abierta, la página de atrás no debe desplazarse */
body.lupa-abierta { overflow: hidden; }

@media (max-width: 640px) {
  .lupa { padding: var(--e5) var(--e3); }
  .lupa__figura img { max-height: calc(100vh - var(--e8) * 2); }
}

/* --------------------------------------------------------------------------
   Publicaciones
   Una lista larga, no un catálogo: importa poder recorrerla, no lucirla.
   -------------------------------------------------------------------------- */

.publica { display: grid; gap: 0; }

.publica__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e4) var(--e6);
  align-items: start;
  padding-block: var(--e5);
  border-bottom: 1px solid var(--linea);
}
.publica__item:last-child { border-bottom: 0; }

.publica__fecha {
  font-family: var(--dato);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: var(--e2);
}
.publica__titulo { font-size: 19px; margin-bottom: var(--e2); }
.publica__titulo a { color: inherit; text-decoration: none; }
.publica__titulo a:hover,
.publica__titulo a:focus-visible { color: var(--bronce); text-decoration: underline; }
.publica__sub {
  font-size: 15px;
  color: var(--bronce);
  margin-bottom: var(--e3);
}
.publica__texto { font-size: 15px; color: var(--tinta-2); max-width: 68ch; }
.publica__ir {
  align-self: center;
  white-space: nowrap;
  font-family: var(--titular);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .publica__item { grid-template-columns: minmax(0, 1fr); }
  .publica__ir { justify-self: start; }
}

/* Videos: la relación de aspecto se fija para que no salte al cargar */
.videos { display: grid; gap: var(--e6); }
@media (min-width: 760px) {
  .videos { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
}
.video__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--fondo-3);
  border: 1px solid var(--linea);
}
.video__marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__titulo { font-size: 16px; margin: var(--e4) 0 var(--e2); }
.video__texto { font-size: 14.5px; color: var(--tinta-2); }