/**
 * Omalflex — hoja de estilos principal.
 * Depende de design-tokens.css (debe cargarse antes). Mobile-first.
 * Un único fichero para mantener el peso bajo control (<300 KB/página).
 */

/* ==========================================================================
   1. Reset 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; }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] { padding: 0; list-style: none; }

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a { color: inherit; }

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
  font-family: var(--omx-fuente-cuerpo);
  font-size: var(--omx-tipo-cuerpo);
  line-height: var(--omx-interlineado-cuerpo);
  background-color: var(--omx-color-humo);
  color: var(--omx-texto-sobre-claro);
}

h1, h2, h3, h4 {
  font-family: var(--omx-fuente-titulos);
  line-height: var(--omx-interlineado-titulo);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--omx-tipo-h1); }
h2 { font-size: var(--omx-tipo-h2); }
h3 { font-size: var(--omx-tipo-h3); }
h4 { font-size: var(--omx-tipo-h4); }

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Foco visible SIEMPRE, nunca se elimina sin sustituto */
:focus-visible {
  outline: 3px solid var(--omx-color-naranja);
  outline-offset: 2px;
  border-radius: 2px;
}

.omx-fondo-oscuro :focus-visible {
  outline-color: var(--omx-color-naranja);
}

/* Enlace de salto de navegación */
.omx-saltar-navegacion {
  position: absolute;
  left: var(--omx-espacio-4);
  top: -100px;
  z-index: var(--omx-z-modal);
  background: var(--omx-color-naranja);
  color: var(--omx-color-grafito);
  padding: var(--omx-espacio-3) var(--omx-espacio-5);
  font-weight: 600;
  transition: top var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-saltar-navegacion:focus-visible {
  top: var(--omx-espacio-4);
}

.omx-visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

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

.omx-seccion {
  position: relative;
  padding-block: var(--omx-espacio-9);
}

.omx-seccion--oscura {
  background-color: var(--omx-color-marino);
  color: var(--omx-texto-sobre-oscuro);
}

.omx-seccion--acero {
  background-color: var(--omx-color-acero-azul);
  color: var(--omx-texto-sobre-oscuro);
}

.omx-seccion--clara {
  background-color: var(--omx-color-humo);
  color: var(--omx-texto-sobre-claro);
}

.omx-fondo-oscuro { color: var(--omx-texto-sobre-oscuro); }

.omx-grid {
  display: grid;
  gap: var(--omx-espacio-6);
}

@media (min-width: 640px) {
  .omx-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .omx-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .omx-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .omx-grid--2-1 { grid-template-columns: 2fr 1fr; }
}

/* Numeración de secciones estilo plano técnico: "01 / 02" */
.omx-numero-seccion {
  display: inline-flex;
  align-items: baseline;
  gap: var(--omx-espacio-1);
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-pequeno);
  letter-spacing: 0.12em;
  color: var(--omx-color-naranja);
  margin-bottom: var(--omx-espacio-3);
}

.omx-numero-seccion::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  margin-left: var(--omx-espacio-2);
}

/* Trama de puntos tipo plano técnico, muy sutil, decorativa */
.omx-trama-tecnica {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.omx-seccion--clara .omx-trama-tecnica {
  background-image: radial-gradient(circle, rgba(22, 24, 29, 0.08) 1px, transparent 1px);
}

/* El naranja de acento no alcanza 4.5:1 sobre blanco humo (solo sirve como
   fondo de botón/badge, ver paleta en CLAUDE.md): en secciones claras el
   número de sección usa el índigo de marca en su lugar. */
.omx-seccion--clara .omx-numero-seccion {
  color: var(--omx-texto-marca-sobre-claro);
}

/* Líneas técnicas de 1px como separador */
.omx-linea-tecnica {
  border: none;
  border-top: 1px solid var(--omx-linea-tecnica);
  margin-block: var(--omx-espacio-6);
}

/* ==========================================================================
   4. Cabecera
   ========================================================================== */

/*
 * La cabecera NUNCA es 100% transparente: depender de que el fondo bajo ella
 * sea siempre oscuro es frágil. Fondo claro (blanco translúcido + blur) en
 * vez del oscuro de la paleta anterior — así el logo real se ve con su
 * degradado índigo verdadero sin necesitar ningún filtro (en el pie, sobre
 * fondo oscuro fijo, se usa .omx-logo-halo en vez de forzarlo a blanco). El
 * 85% de opacidad en reposo está verificado para mantener ≥9.9:1 de
 * contraste con el nav en índigo oscuro incluso en el peor caso (hero
 * oscuro justo detrás); al hacer scroll sube a 95% + blur mayor + sombra.
 */
.omx-cabecera {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--omx-z-header);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--omx-duracion-media) var(--omx-easing),
              backdrop-filter var(--omx-duracion-media) var(--omx-easing),
              border-color var(--omx-duracion-media) var(--omx-easing),
              box-shadow var(--omx-duracion-media) var(--omx-easing);
}

.omx-cabecera.is-fija {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--omx-borde-sobre-claro);
  box-shadow: 0 4px 24px rgba(13, 43, 78, 0.1);
}

.omx-cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--omx-espacio-5);
  padding-block: var(--omx-espacio-4);
}

.omx-cabecera__logo img {
  height: 52px;
  width: auto;
}

/* Logo real (con su degradado índigo) + halo blanco alrededor de su
   silueta: sobre el fondo oscuro del pie, sin esto el lado más oscuro del
   degradado se fundiría con el fondo. drop-shadow (no box-shadow) respeta
   la transparencia real del PNG/WebP y dibuja el contorno exacto de la
   silueta, no un rectángulo. Varias capas a distintos radios para que el
   halo se vea sólido y no como una simple sombra difusa. */
.omx-logo-halo {
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.omx-cabecera__nav {
  display: none;
}

@media (min-width: 900px) {
  .omx-cabecera__nav {
    display: flex;
    align-items: center;
    gap: var(--omx-espacio-6);
  }
}

.omx-cabecera__nav a {
  color: var(--omx-texto-marca-sobre-claro);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--omx-tipo-pequeno);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: var(--omx-espacio-1);
}

.omx-cabecera__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--omx-color-turquesa);
  transition: width var(--omx-duracion-media) var(--omx-easing);
}

.omx-cabecera__nav a:hover::after,
.omx-cabecera__nav a[aria-current="page"]::after {
  width: 100%;
}

.omx-cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--omx-espacio-4);
}

.omx-cabecera__boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--omx-borde-sobre-claro);
  color: var(--omx-texto-marca-sobre-claro);
  cursor: pointer;
  transition: border-color var(--omx-duracion-rapida) var(--omx-easing),
              background-color var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-cabecera__boton-icono:hover {
  border-color: var(--omx-color-turquesa);
  background-color: rgba(20, 184, 166, 0.1);
}

/* Hamburguesa: por debajo de 900px .omx-cabecera__nav se oculta (ver la
   media query de arriba) y sin esto no quedaba NINGUNA forma de llegar a
   Sobre nosotros/Distribución/Máquinas de ocasión/Contacto desde el móvil —
   bug real reportado por el cliente. Mismo estilo de botón icono que la
   lupa; solo visible por debajo de 900px (oculto en desktop, donde el nav
   ya se ve entero). */
.omx-cabecera__hamburguesa {
  display: none;
}

@media (max-width: 899px) {
  .omx-cabecera__hamburguesa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--omx-borde-sobre-claro);
    color: var(--omx-texto-marca-sobre-claro);
    cursor: pointer;
  }

  .omx-cabecera__hamburguesa:hover {
    border-color: var(--omx-color-turquesa);
    background-color: rgba(20, 184, 166, 0.1);
  }
}

.omx-selector-idioma {
  position: relative;
}

.omx-selector-idioma__boton {
  display: inline-flex;
  align-items: center;
  gap: var(--omx-espacio-2);
  background: transparent;
  border: 1px solid var(--omx-borde-sobre-claro);
  color: var(--omx-texto-marca-sobre-claro);
  padding: var(--omx-espacio-2) var(--omx-espacio-3);
  font-size: var(--omx-tipo-pequeno);
  text-transform: uppercase;
  cursor: pointer;
}

.omx-selector-idioma__lista {
  position: absolute;
  right: 0;
  top: calc(100% + var(--omx-espacio-2));
  background: var(--omx-color-blanco);
  border: 1px solid var(--omx-borde-sobre-claro);
  box-shadow: var(--omx-sombra-tarjeta);
  min-width: 140px;
  display: none;
  flex-direction: column;
}

.omx-selector-idioma[data-abierto="true"] .omx-selector-idioma__lista {
  display: flex;
}

.omx-selector-idioma__lista a {
  display: flex;
  align-items: center;
  gap: var(--omx-espacio-2);
  padding: var(--omx-espacio-3) var(--omx-espacio-4);
  text-decoration: none;
  font-size: var(--omx-tipo-pequeno);
  /* El fondo de la lista ahora es blanco (antes era grafito oscuro, y el
     bug real que motivó fijar este color explícitamente sigue aplicando:
     sin ello el enlace hereda cualquier color del body en vez del propio
     de este menú). */
  color: var(--omx-texto-sobre-claro);
}

.omx-selector-idioma__boton span,
.omx-selector-idioma__lista a span {
  font-size: 1.1em;
}

.omx-selector-idioma__lista a:hover,
.omx-selector-idioma__lista a:focus-visible {
  background: var(--omx-color-humo);
}

/* Panel de navegación a pantalla completa para móvil (<900px), abierto por
   la hamburguesa. Mismo patrón visual y de accesibilidad que el overlay de
   búsqueda (.omx-buscador): hidden nativo, fondo marino translúcido con
   blur, focus trap gestionado en motion.js. */
.omx-menu-movil[hidden] {
  display: none;
}

.omx-menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--omx-z-modal);
  background-color: rgba(13, 43, 78, 0.97);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Iconos de redes dentro del menú móvil: centrados bajo la navegación. */
.omx-menu-movil .omx-redes {
  justify-content: center;
  margin-top: var(--omx-espacio-7);
}

.omx-menu-movil__cerrar {
  position: absolute;
  top: var(--omx-espacio-5);
  right: var(--omx-margen-contenido);
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--omx-borde-sobre-oscuro);
  color: var(--omx-color-blanco);
  font-size: 1.1rem;
  cursor: pointer;
}

.omx-menu-movil__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--omx-espacio-6);
}

.omx-menu-movil__nav a {
  color: var(--omx-color-blanco);
  text-decoration: none;
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-h3);
  font-weight: 600;
}

.omx-menu-movil__nav a[aria-current="page"] {
  color: var(--omx-color-turquesa);
}

/* ==========================================================================
   5. Botones
   ========================================================================== */

/* Botones más compactos y redondeados que en la v1 "industrial pesada"
   (bisel angular grande + barrido diagonal): el cliente los veía toscos y
   grandes. v2: forma de píldora, padding reducido, tipografía un punto más
   pequeña. v3 (este cambio): aún más pequeños, y el texto ya no se envuelve
   en 2 líneas (quedaba mal centrado) — el botón ensancha en su lugar. */
.omx-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--omx-espacio-1);
  padding: 0.5rem 1.1rem;
  font-family: var(--omx-fuente-cuerpo);
  font-weight: 600;
  font-size: var(--omx-tipo-minuscula);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--omx-duracion-rapida) var(--omx-easing),
              transform var(--omx-duracion-rapida) var(--omx-easing),
              box-shadow var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-boton:hover,
.omx-boton:focus-visible {
  transform: translateY(-2px);
}

.omx-boton__flecha {
  display: inline-block;
  transition: transform var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-boton:hover .omx-boton__flecha,
.omx-boton:focus-visible .omx-boton__flecha {
  transform: translateX(4px);
}

/* Primario: acento de venta naranja, con degradado sutil para dar algo de
   profundidad sin ser un bloque plano. Texto SIEMPRE oscuro (AA: blanco/
   naranja falla). Sombra con el propio tinte naranja en vez de negro puro. */
.omx-boton--primario {
  background: linear-gradient(135deg, var(--omx-color-naranja), #ff8449);
  color: var(--omx-color-grafito);
  box-shadow: 0 3px 10px rgba(255, 107, 44, 0.3);
}

.omx-boton--primario:hover,
.omx-boton--primario:focus-visible {
  box-shadow: 0 6px 16px rgba(255, 107, 44, 0.38);
}

/* Secundario: outline índigo/turquesa sobre fondo claro u oscuro. El
   ::before es un velo de currentColor a baja opacidad — se adapta solo al
   color de texto de cada contexto (claro u oscuro) sin necesitar variantes. */
.omx-boton--secundario {
  background-color: transparent;
  border-color: currentColor;
  color: inherit;
}

.omx-boton--secundario::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: currentColor;
  opacity: 0;
  transition: opacity var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-boton--secundario:hover::before,
.omx-boton--secundario:focus-visible::before {
  opacity: 0.08;
}

/* WhatsApp: verde de marca, mismo tratamiento de degradado + sombra de color
   que el primario. Texto SIEMPRE oscuro (blanco/verde no alcanza AA). */
.omx-boton--whatsapp {
  background: linear-gradient(135deg, var(--omx-color-whatsapp), var(--omx-color-whatsapp-hover));
  color: var(--omx-color-grafito);
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3);
}

.omx-boton--whatsapp:hover,
.omx-boton--whatsapp:focus-visible {
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.38);
}

.omx-boton--bloque {
  width: 100%;
  justify-content: center;
}

/* Compartir (ficha de máquina): mismo patrón accesible que el selector de
   idioma (posición relativa + [data-abierto] + cierre con clic fuera/Escape),
   con desplegable claro. La confirmación de "enlace copiado" es un párrafo
   role="status" independiente del desplegable, no un estado del propio botón. */
.omx-compartir {
  position: relative;
  display: inline-flex;
}

.omx-compartir__lista {
  position: absolute;
  top: calc(100% + var(--omx-espacio-2));
  left: 0;
  z-index: var(--omx-z-overlay);
  background: var(--omx-color-blanco);
  border: 1px solid var(--omx-borde-sobre-claro);
  box-shadow: var(--omx-sombra-tarjeta);
  border-radius: 12px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: var(--omx-espacio-2);
  gap: var(--omx-espacio-1);
}

.omx-compartir__lista[hidden] {
  display: none;
}

.omx-compartir__opcion {
  display: flex;
  align-items: center;
  gap: var(--omx-espacio-2);
  padding: var(--omx-espacio-3);
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--omx-texto-sobre-claro);
  font-size: var(--omx-tipo-pequeno);
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.omx-compartir__opcion:hover,
.omx-compartir__opcion:focus-visible {
  background-color: var(--omx-color-humo);
}

.omx-compartir__confirmacion {
  position: absolute;
  top: calc(100% + var(--omx-espacio-2));
  left: 0;
  z-index: var(--omx-z-overlay);
  background-color: var(--omx-color-grafito);
  color: var(--omx-color-blanco);
  font-size: var(--omx-tipo-minuscula);
  font-weight: 600;
  padding: var(--omx-espacio-2) var(--omx-espacio-3);
  border-radius: 8px;
  white-space: nowrap;
}

.omx-compartir__confirmacion[hidden] {
  display: none;
}

/* ==========================================================================
   6. Tarjetas (máquinas, sectores, marcas)
   ========================================================================== */

.omx-tarjeta[hidden] {
  display: none;
}

/* Carrusel de tarjetas de máquina (home): pista con scroll-snap nativo +
   autoplay que avanza con scrollBy() — accesible por defecto (funciona con
   scroll táctil/rueda/teclado sin JS) y el autoplay es solo una capa
   opcional encima, nunca el único modo de controlarlo. */
.omx-carrusel-maquinas {
  position: relative;
}

.omx-carrusel-maquinas__pista {
  display: flex;
  gap: var(--omx-espacio-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--omx-espacio-2);
  scrollbar-width: none;
}

.omx-carrusel-maquinas__pista::-webkit-scrollbar {
  display: none;
}

.omx-carrusel-maquinas__item {
  flex: 0 0 85%;
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 640px) {
  .omx-carrusel-maquinas__item { flex: 0 0 46%; }
}

@media (min-width: 1024px) {
  .omx-carrusel-maquinas__item { flex: 0 0 31.5%; }
}

.omx-carrusel-maquinas__flecha {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--omx-borde-sobre-claro);
  background-color: var(--omx-color-blanco);
  color: var(--omx-texto-sobre-claro);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--omx-sombra-tarjeta);
  transition: background-color var(--omx-duracion-rapida) var(--omx-easing),
              transform var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-carrusel-maquinas__flecha:hover,
.omx-carrusel-maquinas__flecha:focus-visible {
  background-color: var(--omx-color-naranja);
}

.omx-carrusel-maquinas__flecha--prev { left: calc(-1 * var(--omx-espacio-5)); }
.omx-carrusel-maquinas__flecha--next { right: calc(-1 * var(--omx-espacio-5)); }

@media (max-width: 639px) {
  .omx-carrusel-maquinas__flecha { display: none; }
}

.omx-tarjeta--clicable {
  cursor: pointer;
}

.omx-tarjeta {
  display: flex;
  flex-direction: column;
  background-color: var(--omx-color-blanco);
  color: var(--omx-texto-sobre-claro);
  border: 1px solid var(--omx-borde-sobre-claro);
  box-shadow: var(--omx-sombra-tarjeta);
  clip-path: polygon(
    var(--omx-bisel) 0, 100% 0, 100% calc(100% - var(--omx-bisel)),
    calc(100% - var(--omx-bisel)) 100%, 0 100%, 0 var(--omx-bisel)
  );
  transition: box-shadow var(--omx-duracion-media) var(--omx-easing),
              transform var(--omx-duracion-media) var(--omx-easing),
              border-color var(--omx-duracion-media) var(--omx-easing);
}

.omx-tarjeta:hover, .omx-tarjeta:focus-within {
  box-shadow: var(--omx-sombra-tarjeta-hover);
  border-color: var(--omx-color-naranja);
  transform: translateY(-4px);
}

.omx-tarjeta__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--omx-color-acero-azul);
}

.omx-tarjeta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--omx-duracion-lenta) var(--omx-easing);
}

.omx-tarjeta:hover .omx-tarjeta__media img,
.omx-tarjeta:focus-within .omx-tarjeta__media img {
  transform: scale(1.04);
}

/* Carrusel de fotos de la tarjeta (home y listado de máquinas) */
.omx-carrusel__lista {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--omx-carrusel-indice, 0) * -100%));
  transition: transform var(--omx-duracion-lenta) var(--omx-easing);
  touch-action: pan-y;
}

.omx-carrusel__item {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.omx-carrusel__puntos {
  position: absolute;
  bottom: var(--omx-espacio-3);
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--omx-espacio-2);
}

.omx-carrusel__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.3);
  padding: 0;
  cursor: pointer;
  transition: background-color var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-carrusel__punto.is-activo {
  background-color: var(--omx-color-blanco);
}

@media (prefers-reduced-motion: reduce) {
  .omx-carrusel__lista { transition: none; }
}

.omx-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--omx-espacio-2);
  padding: var(--omx-espacio-5);
  flex: 1;
}

.omx-tarjeta__marca-modelo {
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-h4);
  font-weight: 600;
}

.omx-tarjeta__meta {
  display: flex;
  gap: var(--omx-espacio-3);
  font-size: var(--omx-tipo-pequeno);
  color: var(--omx-texto-mudo-sobre-claro);
}

.omx-tarjeta__precio {
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-h4);
  color: var(--omx-texto-marca-sobre-claro);
  margin-top: auto;
}

.omx-tarjeta__acciones {
  display: flex;
  gap: var(--omx-espacio-3);
  padding: 0 var(--omx-espacio-5) var(--omx-espacio-5);
}

.omx-tarjeta__acciones .omx-boton {
  flex: 1;
  font-size: var(--omx-tipo-pequeno);
  padding: var(--omx-espacio-3) var(--omx-espacio-4);
}

/* ==========================================================================
   6bis. Tarjetas de sector (home) y franja de marcas distribuidas
   ========================================================================== */

.omx-tarjeta-sector {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--omx-espacio-4);
  padding: var(--omx-espacio-6);
  background-color: var(--omx-color-blanco);
  color: var(--omx-texto-sobre-claro);
  border: 1px solid var(--omx-borde-sobre-claro);
  overflow: hidden;
  clip-path: polygon(
    var(--omx-bisel) 0, 100% 0, 100% calc(100% - var(--omx-bisel)),
    calc(100% - var(--omx-bisel)) 100%, 0 100%, 0 var(--omx-bisel)
  );
  transition: box-shadow var(--omx-duracion-media) var(--omx-easing),
              border-color var(--omx-duracion-media) var(--omx-easing),
              transform var(--omx-duracion-media) var(--omx-easing);
}

/* Barra de acento en gradiente arriba de la tarjeta — mismo degradado que
   el logo real, para que el detalle "de marca" aparezca también aquí. */
.omx-tarjeta-sector::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--omx-color-indigo-medio), var(--omx-color-turquesa));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--omx-duracion-media) var(--omx-easing);
}

.omx-tarjeta-sector:hover::before,
.omx-tarjeta-sector:focus-within::before {
  transform: scaleX(1);
}

.omx-tarjeta-sector:hover, .omx-tarjeta-sector:focus-within {
  box-shadow: var(--omx-sombra-tarjeta-hover);
  border-color: var(--omx-color-turquesa);
  transform: translateY(-4px);
}

.omx-tarjeta-sector__numero {
  position: absolute;
  top: var(--omx-espacio-3);
  right: var(--omx-espacio-4);
  font-family: var(--omx-fuente-titulos);
  font-size: 3rem;
  font-weight: 700;
  color: var(--omx-color-humo);
  line-height: 1;
  z-index: 0;
}

.omx-tarjeta-sector__icono {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--omx-color-indigo-oscuro), var(--omx-color-indigo-medio));
  color: var(--omx-color-blanco);
  transition: transform var(--omx-duracion-media) var(--omx-easing);
}

.omx-tarjeta-sector:hover .omx-tarjeta-sector__icono,
.omx-tarjeta-sector:focus-within .omx-tarjeta-sector__icono {
  transform: scale(1.08) rotate(-4deg);
}

.omx-tarjeta-sector__titulo {
  position: relative;
  z-index: 1;
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-h4);
  font-weight: 600;
}

.omx-tarjeta-sector__texto {
  position: relative;
  z-index: 1;
  color: var(--omx-texto-mudo-sobre-claro);
}

.omx-franja-marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--omx-espacio-8);
}

.omx-franja-marcas a {
  position: relative;
  display: inline-flex;
}

/* En reposo, las 3 marcas deben verse con el mismo tono exacto (antes cada
   logo quedaba más o menos visible según su propio contraste/color de
   origen al pasar por escala de grises — el del medio casi no se veía).
   brightness(0) invert(1) fuerza TODOS los logos a la misma silueta blanca
   sólida, sin depender de su color real. */
.omx-franja-marcas img {
  height: 40px;
  width: auto;
  max-width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity var(--omx-duracion-media) var(--omx-easing);
}

/* Hemingstone/Jenplas no es un wordmark sobre transparente como los otros
   dos: es una insignia con relleno de color sólido y el texto/icono ENCIMA
   de ese mismo relleno, los dos igual de opacos. brightness(0) no distingue
   "relleno" de "texto" por transparencia (no hay ninguna) — solo por color,
   que es justo lo que ese filtro anula — así que el resultado era un bloque
   blanco sólido sin ningún detalle legible. Aquí se usa grayscale() en vez
   de brightness(0)/invert(1): conserva el contraste real entre el relleno
   (más oscuro) y el texto/icono (más claro) en lugar de aplanarlo del todo. */
.omx-franja-marcas img.omx-franja-marcas__logo-detallado {
  filter: grayscale(1) brightness(1.6);
}

/* Al hover, la silueta blanca se desvanece y aparece la misma silueta pero
   coloreada en turquesa exacto (no una aproximación con filtros de imagen):
   un ::after con background-color sólido recortado a la forma exacta del
   logo vía mask-image, usando la misma URL que la propia imagen. */
.omx-franja-marcas a::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--omx-color-turquesa);
  mask-image: var(--omx-mascara-logo);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--omx-mascara-logo);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: 0;
  transition: opacity var(--omx-duracion-media) var(--omx-easing);
}

.omx-franja-marcas a:hover img,
.omx-franja-marcas a:focus-visible img {
  opacity: 0;
}

.omx-franja-marcas a:hover::after,
.omx-franja-marcas a:focus-visible::after {
  opacity: 1;
}

/* ==========================================================================
   7. Badges / tags de estado
   ========================================================================== */

.omx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--omx-espacio-1);
  padding: var(--omx-espacio-1) var(--omx-espacio-3);
  font-size: var(--omx-tipo-minuscula);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--omx-color-blanco);
}

.omx-badge--novedad { background-color: var(--omx-color-tag-novedad); }
.omx-badge--oferta { background-color: var(--omx-color-tag-oferta); color: var(--omx-color-grafito); }
.omx-badge--proxima_entrada { background-color: var(--omx-color-tag-proxima); }
.omx-badge--vendida { background-color: var(--omx-color-tag-vendida); color: var(--omx-color-grafito); }
/* Tags personalizados creados desde el admin (no son ninguno de los 4 "de
   estado" de arriba, así que no tienen un color propio): mismo azul acero
   ya usado como fondo de sección con texto blanco, así se garantiza AA
   sin verificar un tono nuevo. */
.omx-badge--personalizado { background-color: var(--omx-color-acero-azul); }

.omx-tarjeta__badges {
  position: absolute;
  top: var(--omx-espacio-3);
  left: var(--omx-espacio-3);
  display: flex;
  gap: var(--omx-espacio-2);
  z-index: 1;
}

/* Cinta diagonal para "vendida" */
.omx-tarjeta--vendida .omx-tarjeta__media::after {
  content: attr(data-etiqueta-vendida);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 24, 29, 0.55);
  color: var(--omx-color-blanco);
  font-family: var(--omx-fuente-titulos);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: rotate(-8deg);
}

/* ==========================================================================
   8. Placa de características (specs de máquina, estilo placa industrial)
   ========================================================================== */

.omx-placa {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--omx-borde-sobre-claro);
  border: 1px solid var(--omx-borde-sobre-claro);
}

@media (min-width: 640px) {
  .omx-placa { grid-template-columns: repeat(4, 1fr); }
}

.omx-placa__campo {
  background-color: var(--omx-color-blanco);
  color: var(--omx-texto-sobre-claro);
  padding: var(--omx-espacio-4);
}

.omx-placa__etiqueta {
  display: block;
  font-size: var(--omx-tipo-minuscula);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--omx-texto-mudo-sobre-claro);
  margin-bottom: var(--omx-espacio-1);
}

.omx-placa__valor {
  display: block;
  font-family: var(--omx-fuente-titulos);
  font-weight: 600;
  font-size: var(--omx-tipo-cuerpo-lg);
}

/* ==========================================================================
   9. Breadcrumbs
   ========================================================================== */

.omx-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omx-espacio-2);
  font-size: var(--omx-tipo-pequeno);
  color: var(--omx-texto-mudo-sobre-claro);
}

.omx-breadcrumbs a {
  color: var(--omx-texto-mudo-sobre-claro);
  text-decoration: none;
}

.omx-breadcrumbs a:hover { color: var(--omx-texto-marca-sobre-claro); }

.omx-breadcrumbs li { display: flex; align-items: center; gap: var(--omx-espacio-2); }

.omx-breadcrumbs li:not(:last-child)::after {
  content: '/';
  opacity: 0.5;
}

.omx-breadcrumbs [aria-current="page"] {
  color: var(--omx-texto-sobre-claro);
  font-weight: 600;
}

/* ==========================================================================
   10. Formularios
   ========================================================================== */

/* Compensa la cabecera fija al llegar por ancla (#omx-formulario-contacto)
   desde "Pedir información": sin esto, el navegador posiciona el formulario
   justo debajo del borde superior del viewport, y la cabecera fija lo tapa. */
.omx-formulario-contacto {
  scroll-margin-top: calc(var(--omx-espacio-8) + 24px);
}

.omx-campo {
  display: flex;
  flex-direction: column;
  gap: var(--omx-espacio-2);
  margin-bottom: var(--omx-espacio-5);
}

.omx-campo label {
  font-weight: 600;
  font-size: var(--omx-tipo-pequeno);
}

.omx-campo input,
.omx-campo textarea,
.omx-campo select {
  padding: var(--omx-espacio-3);
  border: 1px solid var(--omx-borde-sobre-claro);
  background-color: var(--omx-color-blanco);
  font-size: var(--omx-tipo-cuerpo);
}

.omx-campo input:focus-visible,
.omx-campo textarea:focus-visible,
.omx-campo select:focus-visible {
  outline: 3px solid var(--omx-color-naranja);
  outline-offset: 1px;
}

.omx-campo__ayuda {
  font-size: var(--omx-tipo-minuscula);
  color: var(--omx-texto-mudo-sobre-claro);
}

.omx-campo__error {
  font-size: var(--omx-tipo-pequeno);
  color: #b3261e;
  font-weight: 600;
}

.omx-campo--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--omx-espacio-3);
}

.omx-campo--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   10bis. Filtros del listado de máquinas
   ========================================================================== */

.omx-filtros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--omx-espacio-4);
  align-items: end;
  padding: var(--omx-espacio-5);
  background-color: var(--omx-color-blanco);
  border: 1px solid var(--omx-borde-sobre-claro);
}

@media (min-width: 900px) {
  .omx-filtros { grid-template-columns: repeat(5, 1fr) auto; }
}

.omx-filtros__campo {
  display: flex;
  flex-direction: column;
  gap: var(--omx-espacio-1);
}

.omx-filtros__campo label {
  font-size: var(--omx-tipo-minuscula);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--omx-texto-mudo-sobre-claro);
}

.omx-filtros__campo select {
  padding: var(--omx-espacio-3);
  border: 1px solid var(--omx-borde-sobre-claro);
  background-color: var(--omx-color-blanco);
  font-size: var(--omx-tipo-pequeno);
}

.omx-filtros__campo select:focus-visible {
  outline: 3px solid var(--omx-color-naranja);
  outline-offset: 1px;
}

.omx-filtros__acciones {
  display: flex;
  align-items: center;
  gap: var(--omx-espacio-4);
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .omx-filtros__acciones { grid-column: auto; flex-direction: column; align-items: stretch; }
}

.omx-filtros__acciones .omx-boton {
  font-size: var(--omx-tipo-pequeno);
  padding: var(--omx-espacio-3) var(--omx-espacio-4);
  white-space: nowrap;
}

.omx-filtros__limpiar {
  font-size: var(--omx-tipo-pequeno);
  text-decoration: underline;
  white-space: nowrap;
}

.omx-filtros__resultados {
  margin-top: var(--omx-espacio-5);
  font-weight: 600;
  color: var(--omx-texto-mudo-sobre-claro);
}

/* ==========================================================================
   11. Pie de página
   ========================================================================== */

.omx-pie {
  background-color: var(--omx-color-marino);
  color: var(--omx-texto-sobre-oscuro);
  padding-block: var(--omx-espacio-8) var(--omx-espacio-6);
}

.omx-pie__grid {
  display: grid;
  gap: var(--omx-espacio-7);
}

@media (min-width: 900px) {
  .omx-pie__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.omx-pie__titulo {
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-pequeno);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--omx-texto-mudo-sobre-oscuro);
  margin-bottom: var(--omx-espacio-4);
}

.omx-pie__enlaces {
  display: flex;
  flex-direction: column;
  gap: var(--omx-espacio-3);
}

.omx-pie__enlaces a {
  text-decoration: none;
  color: var(--omx-texto-sobre-oscuro);
}

.omx-pie__enlaces a:hover { color: var(--omx-color-naranja); }

/* Iconos de redes sociales (reutilizable: pie, menú móvil y contacto). Por
   defecto, pensados para fondo OSCURO: monocromos en blanco apagado, con fondo
   turquesa + icono grafito al pasar por encima, siguiendo la regla de la paleta
   (turquesa como fondo saturado con contenido oscuro encima, nunca claro). */
.omx-redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omx-espacio-3);
  margin-top: var(--omx-espacio-5);
}

.omx-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--omx-texto-mudo-sobre-oscuro);
  background-color: rgba(255, 255, 255, 0.08);
  transition: color var(--omx-duracion-rapida) var(--omx-easing),
              background-color var(--omx-duracion-rapida) var(--omx-easing),
              transform var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-redes a:hover,
.omx-redes a:focus-visible {
  color: var(--omx-color-grafito);
  background-color: var(--omx-color-turquesa);
  transform: translateY(-2px);
}

.omx-redes svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Variante para fondo CLARO (columna de datos de la página de contacto): icono
   en marino de marca sobre un tinte oscuro tenue; el hover mantiene el mismo
   turquesa + icono grafito, que también contrasta sobre fondo claro. */
.omx-redes--claro a {
  color: var(--omx-color-marino);
  background-color: rgba(13, 43, 78, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .omx-redes a { transition: none; }
  .omx-redes a:hover,
  .omx-redes a:focus-visible { transform: none; }
}

.omx-pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--omx-espacio-4);
  margin-top: var(--omx-espacio-8);
  padding-top: var(--omx-espacio-5);
  border-top: 1px solid var(--omx-borde-sobre-oscuro);
  font-size: var(--omx-tipo-minuscula);
  color: var(--omx-texto-mudo-sobre-oscuro);
}

.omx-mapa-facha {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--omx-color-acero-azul);
  border: 1px solid var(--omx-borde-sobre-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--omx-espacio-4);
  cursor: pointer;
}

.omx-mapa-facha__texto {
  color: var(--omx-texto-mudo-sobre-oscuro);
  font-size: var(--omx-tipo-pequeno);
}

.omx-seccion--clara .omx-mapa-facha,
.omx-seccion--acero .omx-mapa-facha {
  background-color: var(--omx-color-marino);
}

.omx-mapa-facha iframe { width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   12. Hero
   ========================================================================== */

.omx-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at top right, var(--omx-color-acero-azul) 0%, var(--omx-color-marino) 55%);
  color: var(--omx-texto-sobre-oscuro);
  overflow: hidden;
}

.omx-hero__malla {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
}

.omx-hero__contenido {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.omx-hero__titulo {
  overflow: hidden;
}

.omx-hero__palabra {
  display: inline-block;
  will-change: transform, clip-path;
  clip-path: inset(0 0 100% 0);
  transform: translateY(100%);
  transition: transform var(--omx-duracion-lenta) var(--omx-easing),
              clip-path var(--omx-duracion-lenta) var(--omx-easing);
  transition-delay: calc(var(--omx-palabra-orden, 0) * 60ms);
}

.omx-hero__palabra.is-visible {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .omx-hero__palabra {
    clip-path: inset(0 0 0 0);
    transform: none;
    transition: none;
  }
}

/* Cabecera de páginas interiores (no home): banda oscura compacta con
   breadcrumbs + H1, en vez del hero a pantalla completa. El padding-top
   extra compensa la altura de la cabecera fija que queda superpuesta. */
.omx-cabecera-pagina {
  background-color: var(--omx-color-marino);
  color: var(--omx-texto-sobre-oscuro);
  padding-block: calc(var(--omx-espacio-9) + 64px) var(--omx-espacio-8);
}

.omx-cabecera-pagina .omx-breadcrumbs {
  margin-bottom: var(--omx-espacio-4);
  padding-inline: 0;
}

/* .omx-breadcrumbs fija sus colores pensando en fondo claro (el uso más
   común); dentro de .omx-cabecera-pagina el fondo es grafito, así que hace
   falta la variante "sobre-oscuro" o el texto queda con contraste
   insuficiente (2.78:1, falla AA). */
.omx-cabecera-pagina .omx-breadcrumbs,
.omx-cabecera-pagina .omx-breadcrumbs a {
  color: var(--omx-texto-mudo-sobre-oscuro);
}

.omx-cabecera-pagina .omx-breadcrumbs a:hover {
  color: var(--omx-color-naranja);
}

.omx-cabecera-pagina .omx-breadcrumbs [aria-current="page"] {
  color: var(--omx-texto-sobre-oscuro);
}

.omx-cabecera-pagina__subtitulo {
  margin-top: var(--omx-espacio-4);
  max-width: 42rem;
  color: var(--omx-texto-mudo-sobre-oscuro);
  font-size: var(--omx-tipo-cuerpo-lg);
}

.omx-hero__subtitulo {
  font-size: var(--omx-tipo-cuerpo-lg);
  color: var(--omx-texto-mudo-sobre-oscuro);
  margin-top: var(--omx-espacio-5);
  max-width: 38rem;
}

.omx-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omx-espacio-4);
  margin-top: var(--omx-espacio-7);
}

/* ==========================================================================
   13. Contadores animados
   ========================================================================== */

.omx-contador {
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-h2);
  font-weight: 700;
  color: var(--omx-color-naranja);
}

.omx-contador__etiqueta {
  display: block;
  font-family: var(--omx-fuente-cuerpo);
  font-size: var(--omx-tipo-pequeno);
  font-weight: 400;
  color: var(--omx-texto-mudo-sobre-oscuro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--omx-espacio-1);
}

/* ==========================================================================
   14. Reveal on scroll
   ========================================================================== */

.omx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--omx-duracion-lenta) var(--omx-easing),
              transform var(--omx-duracion-lenta) var(--omx-easing);
  transition-delay: calc(var(--omx-reveal-orden, 0) * 60ms);
}

.omx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .omx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   15. CTA sticky en móvil (fichas de máquina)
   ========================================================================== */

.omx-cta-flotante {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--omx-z-header);
  display: flex;
  gap: var(--omx-espacio-3);
  padding: var(--omx-espacio-3) var(--omx-margen-contenido);
  background-color: rgba(13, 43, 78, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--omx-borde-sobre-oscuro);
  box-shadow: var(--omx-sombra-flotante);
}

@media (min-width: 900px) {
  .omx-cta-flotante { display: none; }
}

/* Botón flotante de WhatsApp, visible en todas las páginas. En móvil se
   oculta en las páginas que ya tienen la barra .omx-cta-flotante (ficha de
   máquina) para no duplicar el mismo CTA de WhatsApp dos veces en la misma
   pantalla; en escritorio esa barra nunca se muestra, así que ahí sí. */
.omx-whatsapp-flotante {
  position: fixed;
  right: var(--omx-espacio-5);
  bottom: var(--omx-espacio-5);
  z-index: var(--omx-z-header);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--omx-color-whatsapp);
  color: var(--omx-color-grafito);
  box-shadow: var(--omx-sombra-flotante);
  transition: transform var(--omx-duracion-rapida) var(--omx-easing),
              background-color var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-whatsapp-flotante:hover,
.omx-whatsapp-flotante:focus-visible {
  background-color: var(--omx-color-whatsapp-hover);
  transform: scale(1.06);
}

@media (max-width: 899px) {
  body:has(.omx-cta-flotante) .omx-whatsapp-flotante { display: none; }
}

/* ==========================================================================
   16bis. Galería de la ficha de máquina + lightbox
   ========================================================================== */

.omx-galeria {
  position: relative;
}

.omx-galeria__badges {
  position: absolute;
  top: var(--omx-espacio-3);
  left: var(--omx-espacio-3);
  z-index: 2;
  display: flex;
  gap: var(--omx-espacio-2);
}

.omx-galeria__principal {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--omx-borde-sobre-claro);
  padding: 0;
  background-color: var(--omx-color-acero-azul);
  cursor: zoom-in;
}

.omx-galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.omx-galeria__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  background-color: rgba(13, 43, 78, 0.6);
  color: var(--omx-color-blanco);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.omx-galeria__flecha--prev { left: var(--omx-espacio-3); }
.omx-galeria__flecha--next { right: var(--omx-espacio-3); }

.omx-galeria__miniaturas {
  display: flex;
  gap: var(--omx-espacio-2);
  margin-top: var(--omx-espacio-3);
  overflow-x: auto;
}

.omx-galeria__miniatura {
  flex: 0 0 72px;
  width: 72px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
}

.omx-galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }

.omx-galeria__miniatura.is-activa {
  border-color: var(--omx-color-naranja);
  opacity: 1;
}

.omx-lightbox[hidden] {
  display: none;
}

.omx-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--omx-z-modal);
  background-color: rgba(10, 11, 13, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

.omx-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

.omx-lightbox__cerrar,
.omx-lightbox__flecha {
  position: absolute;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--omx-color-blanco);
  cursor: pointer;
}

.omx-lightbox__cerrar {
  top: var(--omx-espacio-4);
  right: var(--omx-espacio-4);
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
}

.omx-lightbox__flecha {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 2rem;
}

.omx-lightbox__flecha--prev { left: var(--omx-espacio-4); }
.omx-lightbox__flecha--next { right: var(--omx-espacio-4); }

/* La barra de CTA sticky de la ficha necesita hueco al final para no tapar el pie en móvil */
@media (max-width: 899px) {
  body:has(.omx-cta-flotante) .omx-pie { padding-bottom: calc(var(--omx-espacio-6) + 76px); }
}

/* ==========================================================================
   17. Overlay de búsqueda
   ========================================================================== */

.omx-buscador[hidden] {
  display: none;
}

.omx-buscador {
  position: fixed;
  inset: 0;
  z-index: var(--omx-z-modal);
  background-color: rgba(13, 43, 78, 0.96);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding: var(--omx-espacio-8) var(--omx-margen-contenido);
}

.omx-buscador__panel {
  width: 100%;
  max-width: 42rem;
  height: fit-content;
}

.omx-buscador__form {
  display: flex;
  align-items: center;
  gap: var(--omx-espacio-3);
  border-bottom: 2px solid var(--omx-borde-sobre-oscuro);
  padding-bottom: var(--omx-espacio-4);
}

.omx-buscador__form input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--omx-color-blanco);
  font-size: var(--omx-tipo-h3);
  font-family: var(--omx-fuente-titulos);
  outline: none;
}

.omx-buscador__form input::placeholder {
  color: var(--omx-texto-mudo-sobre-oscuro);
}

.omx-buscador__cerrar {
  background: transparent;
  border: 1px solid var(--omx-borde-sobre-oscuro);
  color: var(--omx-color-blanco);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1.1rem;
}

.omx-buscador__resultados {
  margin-top: var(--omx-espacio-6);
  color: var(--omx-color-blanco);
}

.omx-buscador__grupo-titulo {
  font-size: var(--omx-tipo-pequeno);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--omx-color-naranja);
  margin-bottom: var(--omx-espacio-3);
}

.omx-buscador__resultado {
  display: flex;
  gap: var(--omx-espacio-3);
  padding: var(--omx-espacio-3) 0;
  border-bottom: 1px solid var(--omx-borde-sobre-oscuro);
  text-decoration: none;
  color: var(--omx-color-blanco);
}

.omx-buscador__resultado img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

.omx-buscador__resultado strong {
  display: block;
}

.omx-buscador__resultado p {
  margin: var(--omx-espacio-1) 0 0;
  font-size: var(--omx-tipo-pequeno);
  color: var(--omx-texto-mudo-sobre-oscuro);
}

/* <mark> solo se usa para resaltar coincidencias de búsqueda en todo el
   proyecto (overlay y página /buscar): un único estilo de marca en vez del
   amarillo por defecto del navegador. Cada contexto fija su propio color de
   base (claro u oscuro) ya heredado; aquí solo se anula el fondo y se pone
   el peso/color de acento. */
mark {
  background: none;
  color: var(--omx-color-naranja);
  font-weight: 700;
}

/* Sobre fondo claro, el naranja no alcanza AA como texto (ver paleta en
   CLAUDE.md): se usa el índigo oscuro, que sí pasa. */
.omx-seccion--clara mark {
  color: var(--omx-texto-marca-sobre-claro);
}

.omx-buscador__estado {
  color: var(--omx-texto-mudo-sobre-oscuro);
  margin-top: var(--omx-espacio-6);
}

.omx-buscador__ver-todos {
  display: inline-block;
  margin-top: var(--omx-espacio-5);
  color: var(--omx-color-blanco);
  font-weight: 600;
}

/* ==========================================================================
   16. Banner de cookies
   ========================================================================== */

.omx-cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--omx-z-modal);
  background-color: rgba(13, 43, 78, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--omx-borde-sobre-oscuro);
  color: var(--omx-texto-sobre-oscuro);
  padding: var(--omx-espacio-5) var(--omx-margen-contenido);
}

.omx-cookies__contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--omx-espacio-5);
  max-width: var(--omx-ancho-contenido);
  margin-inline: auto;
}

.omx-cookies__texto {
  max-width: 46rem;
  font-size: var(--omx-tipo-pequeno);
  color: var(--omx-texto-mudo-sobre-oscuro);
}

.omx-cookies__titulo {
  font-family: var(--omx-fuente-titulos);
  font-size: var(--omx-tipo-cuerpo-lg);
  color: var(--omx-texto-sobre-oscuro);
  margin-bottom: var(--omx-espacio-1);
}

.omx-cookies__texto a { color: var(--omx-texto-sobre-oscuro); }

.omx-cookies__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omx-espacio-3);
}

.omx-cookies__acciones .omx-boton {
  padding: var(--omx-espacio-2) var(--omx-espacio-4);
}

.omx-cookies__panel:not([hidden]) {
  max-width: var(--omx-ancho-contenido);
  margin: var(--omx-espacio-5) auto 0;
  padding-top: var(--omx-espacio-5);
  border-top: 1px solid var(--omx-borde-sobre-oscuro);
  display: flex;
  flex-direction: column;
  gap: var(--omx-espacio-4);
}

.omx-cookies__categoria {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--omx-espacio-4);
}

.omx-cookies__categoria-titulo {
  font-weight: 600;
  margin-bottom: var(--omx-espacio-1);
}

.omx-cookies__categoria-texto {
  font-size: var(--omx-tipo-pequeno);
  color: var(--omx-texto-mudo-sobre-oscuro);
  max-width: 38rem;
}

.omx-cookies__siempre-activo {
  color: var(--omx-color-naranja);
  font-weight: 700;
  flex-shrink: 0;
}

.omx-interruptor {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.omx-interruptor input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.omx-interruptor__pista {
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: var(--omx-borde-sobre-oscuro);
  border-radius: 12px;
  transition: background-color var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-interruptor__bola {
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px;
  background-color: var(--omx-color-blanco);
  border-radius: 50%;
  transition: transform var(--omx-duracion-rapida) var(--omx-easing);
}

.omx-interruptor input:checked + .omx-interruptor__pista {
  background-color: var(--omx-color-naranja);
}

.omx-interruptor input:checked + .omx-interruptor__pista .omx-interruptor__bola {
  transform: translateX(20px);
}

.omx-interruptor input:focus-visible + .omx-interruptor__pista {
  outline: 3px solid var(--omx-color-naranja);
  outline-offset: 2px;
}