/*
Theme Name: Dovtronik Corporativo B2B
Theme URI: https://dovtronik.com.mx/
Author: Dovtronik de México
Author URI: https://dovtronik.com.mx/
Description: Tema corporativo limpio B2B para Dovtronik de México. Alta accesibilidad, 100% autoadministrable sin código HTML y totalmente responsivo.
Version: 3.9.0
License: GNU General Public License v2 or later
Text Domain: dovtronik-corporativo
*/

/* Los enlaces con ancla (#laboratorio-sam, #torres…) se desplazan en vez de
   saltar. Quien pidió menos movimiento en su sistema conserva el salto seco. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Las fuentes de respaldo se ajustan al tamaño de las definitivas. Sin esto
   el texto se pinta con la del sistema, y al llegar Archivo cambia de ancho
   y empuja el contenido: es la causa principal del salto de diseño (CLS). */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Roboto Fallback';
  src: local('Arial');
  size-adjust: 100%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* El encabezado fijo taparía el título de la sección al llegar. */
[id] { scroll-margin-top: 120px; }

:root {
  --primary: #004050;
  --primary-dark: #08252d;
  --primary-light: #002d38;
  --accent: #e07f0e;
  --accent-hover: #c86e06;
  --bg-main: #ffffff;
  --bg-alt: #f8fafb;
  --bg-strip: #f5f7f7;
  --text-main: #25383d;
  --text-muted: #4d5f63;
  --text-light: #8d9a9d;
  --border-color: #eef1f1;
  --border-dark: #dde3e4;
  --rb: 6px;
  --rc: 14px;
  --rp: 100px;
}

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

body {
  margin: 0;
  background: var(--bg-main);
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
a:hover {
  color: var(--accent);
}

/* Custom Customization for Autocomplete Scrollbar */
.b2b-search-dropdown-box::-webkit-scrollbar {
  width: 6px;
}
.b2b-search-dropdown-box::-webkit-scrollbar-track {
  background: #f1f5f6;
  border-radius: 10px;
}
.b2b-search-dropdown-box::-webkit-scrollbar-thumb {
  background: var(--primary, #004050);
  border-radius: 10px;
}
.b2b-search-dropdown-box::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #e07f0e);
}

/* WhatsApp Floating Launcher Pulsating Ring Animation (GPU Composited) */
@keyframes waPulseRing {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  }
}

.wa-pulse-icon {
  animation: waPulseRing 2s infinite ease-in-out !important;
}

/* Micro-interacciones de base para controles sin clase propia.
   Se excluye .dov-btn: esos botones tienen su propio sistema de color más
   abajo y esta regla genérica les pisaba el contraste del texto. */
button:not(.dov-btn), .btn, a.btn-primary {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
button:not(.dov-btn):hover, .btn-primary:hover {
  cursor: pointer;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,64,80,0.18);
}
button:not(.dov-btn):active, .btn-primary:active {
  transform: translateY(1px);
}

/* =========================================================================
   BARRA SUPERIOR DE UTILIDAD
   Separa el contacto de la navegación del catálogo. El menú recupera el ancho
   que necesitaba y cada barra hace un solo trabajo.
   ========================================================================= */

/* Teal corporativo del logo: es el color propio de la marca y hace que la
   franja se lea como parte de Dovtronik, no como un elemento neutro. */
.dov-utility-bar {
  background: var(--primary);
  color: #d3e7eb;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 12.5px;
  line-height: 1;
}

.dov-utility-bar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 7px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.dov-utility-bar__badge {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #8fb2b9;
}

.dov-utility-bar__links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.dov-utility-bar a {
  color: #c7dde2;
  text-decoration: none;
  transition: color var(--dov-fast, 0.18s) ease;
}
.dov-utility-bar a:hover,
.dov-utility-bar a:focus-visible { color: var(--accent); }
.dov-utility-bar a .dov-icon { transition: stroke 0.18s ease; }
.dov-utility-bar a:hover .dov-icon { stroke: var(--accent); }

@media (max-width: 1180px) {
  /* Con el menú hamburguesa el contacto ya vive dentro del drawer. */
  .dov-utility-bar { display: none; }
}

/* Header & Nav Bar */
/* La barra principal se ancla arriba al bajar: en un catálogo de 31 equipos
   el buscador y el botón de cotización deben seguir a mano. La barra de
   utilidad no se ancla —se desplaza con la página— para no robar altura. */
.main-nav-bar {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 10px 40px;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 999;
  transition: padding 0.28s var(--dov-ease, ease),
              box-shadow 0.28s var(--dov-ease, ease);
}

/* Al despegarse del inicio se compacta y proyecta sombra: señala que la
   página está desplazada sin ocupar más espacio del necesario. */
.main-nav-bar.is-stuck {
  padding-top: 7px;
  padding-bottom: 7px;
  box-shadow: 0 6px 22px rgba(0, 40, 50, 0.10);
}

.logo-dovtronik {
  height: 54px !important;
  width: auto !important;
  object-fit: contain;
  transition: height 0.28s var(--dov-ease, ease);
}
.main-nav-bar.is-stuck .logo-dovtronik { height: 44px !important; }

/* La barra de administración de WordPress ya ocupa el borde superior. */
.admin-bar .main-nav-bar { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .main-nav-bar { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav-bar, .logo-dovtronik { transition: none; }
}
.nav-desktop-menu {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 8px;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 13.5px;
  color: #25383d;
}

/* Multilevel Dropdown Navigation System */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 270px;
  background: #ffffff;
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,64,80,0.22);
  padding: 8px 0;
  z-index: 99999;
}

.nav-dropdown:hover .dropdown-menu {
  display: block !important;
  animation: navDropdownFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes navDropdownFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu a {
  display: block !important;
  padding: 11px 20px !important;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif !important;
  font-size: 13.5px !important;
  color: #25383d !important;
  text-transform: none !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #f2f5f5;
  transition: all 0.2s ease !important;
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

.dropdown-menu a:hover {
  background: #f4f8f9 !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  padding-left: 24px !important;
}

.nav-phone-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Hamburger & Mobile Drawer */
.hamburger-btn {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.hamburger-btn span {
  width: 24px;
  height: 2.5px;
  background: var(--primary);
  border-radius: 2px;
}
.mobile-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24px;
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
  z-index: 999;
  flex-direction: column;
  gap: 16px;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 15px;
}
.mobile-drawer.active {
  display: flex !important;
}

/* Hero Section */
.hero-grid-a {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  padding: 64px 40px 60px;
  max-width: 1320px;
  margin: 0 auto;
}

/* Stats Strip */
.stats-strip-a {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-strip);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.stats-item-a {
  padding: 34px 30px;
  border-right: 1px solid #e6eaea;
}
.stats-item-a:last-child {
  border-right: none;
}
.stats-number {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--primary);
}
.stats-label {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #5a6a6e;
  margin-top: 8px;
}

/* Grids & Cards */
.products-grid-a, .sectors-grid-a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Clean Borderless Floating Cards with Soft Ambient Elevation (No Harsh Lines) */
.product-card-item {
  border: none !important;
  outline: none !important;
  border-radius: var(--rc);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 40, 50, 0.06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.product-card-item:hover {
  border: none !important;
  outline: none !important;
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 64, 80, 0.14);
}

.product-card-item .card-bg-zoom,
.product-card-item img,
.product-card-item div[style*="background"] {
  border: none !important;
  outline: none !important;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card-item:hover .card-bg-zoom,
.product-card-item:hover img,
.product-card-item:hover div[style*="background"] {
  transform: scale(1.09) !important;
}

/* Completely Borderless Industrial Sectors Section */
#sectores {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Brands & Certifications Bar Redesign */
.brands-bar-section {
  padding: 68px 40px;
  background: linear-gradient(180deg, #f7f9f9 0%, #ffffff 100%);
  border-top: 1px solid rgba(0, 40, 50, 0.08);
  text-align: center;
  position: relative;
}

.brands-bar-container {
  max-width: 1240px;
  margin: 0 auto;
}

.brands-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--accent, #e07f0e);
  background: rgba(224, 127, 14, 0.08);
  border: 1px solid rgba(224, 127, 14, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.brands-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #e07f0e);
  box-shadow: 0 0 8px rgba(224, 127, 14, 0.8);
}

.brands-title {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--primary-dark, #08252d);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.brands-subtitle {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-muted, #4d5f63);
  max-width: 780px;
  margin: 0 auto 40px;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.brand-card-item {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 40, 50, 0.09);
  padding: 24px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 40, 50, 0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

.brand-card-item:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 42px rgba(0, 64, 80, 0.14);
  border-color: rgba(224, 127, 14, 0.45);
}

.brand-card-img-box {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.brand-card-img-box img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-card-item:hover .brand-card-img-box img {
  transform: scale(1.08);
}

.brand-card-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--primary, #004050);
  margin-top: 14px;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

.brand-card-item:hover .brand-card-label {
  color: var(--accent, #e07f0e);
}

@media (max-width: 992px) {
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Footer */
.main-footer {
  padding: 40px;
  background: var(--primary-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  color: #8fb2b9;
  font-size: 13px;
}

/* Gutenberg & Content Block Styling */
.entry-content, .page-content, .post-content {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-main);
  max-width: 1200px;
  margin: 0 auto;
}

/* Responsive Queries */
/* El menú completo más el teléfono necesitan ~1180px para no comprimirse:
   por debajo de ese ancho los rótulos se apretaban y el número se partía en
   tres líneas, así que ahí ya entra el menú hamburguesa. */
@media (max-width: 1180px) {
  .nav-desktop-menu, .nav-phone-box { display: none !important; }
  .hamburger-btn { display: flex !important; }
}

@media (max-width: 992px) {
  .hero-grid-a { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 24px 36px !important; }
  .products-grid-a, .sectors-grid-a { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
  .stats-strip-a { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-title { font-size: 38px !important; }
  .logo-dovtronik { height: 48px !important; }
}
@media (max-width: 640px) {
  .products-grid-a, .sectors-grid-a { grid-template-columns: 1fr !important; gap: 16px !important; }
  .stats-strip-a { grid-template-columns: 1fr !important; }
  .hero-title { font-size: 30px !important; line-height: 1.15 !important; }
  .main-nav-bar { padding: 14px 18px !important; }
}

/* =========================================================================
   SISTEMA DE INTERACCIÓN — hover / focus / active / disabled
   Transiciones cortas y sobrias, sin desplazamientos llamativos.
   ========================================================================= */

:root {
  --dov-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dov-fast: 0.18s;
  --dov-base: 0.25s;
}

/* Foco visible y consistente en todo lo interactivo (accesibilidad).
   :focus-visible sólo aparece con teclado, no al hacer clic con el ratón. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Enlaces del menú principal ------------------------------------------ */
/* El subrayado crece desde el centro animando `transform`, no `width`,
   para no forzar recálculo de layout en cada fotograma. */
/* El subrayado aplica a los enlaces de navegación, nunca a los botones ni al
   teléfono: en ellos pintaba una barra ámbar encima del contenido. */
.main-nav-bar a:not(.dov-btn):not(.dov-phone-link),
.nav-desktop-menu a:not(.dov-btn),
.dropdown-toggle {
  position: relative;
  transition: color var(--dov-base) var(--dov-ease);
}

.main-nav-bar a:not(.dov-btn):not(.dov-phone-link)::after,
.nav-desktop-menu a:not(.dov-btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dov-base) var(--dov-ease);
}

.main-nav-bar a:not(.dov-btn):not(.dov-phone-link):hover::after,
.main-nav-bar a:not(.dov-btn):not(.dov-phone-link):focus-visible::after,
.nav-desktop-menu a:not(.dov-btn):hover::after,
.nav-desktop-menu a:not(.dov-btn):focus-visible::after {
  transform: scaleX(1);
}

.main-nav-bar a:not(.dov-btn):not(.dov-phone-link):hover,
.nav-desktop-menu a:not(.dov-btn):hover {
  color: var(--accent);
}

/* Blindaje del contenido de los botones: ninguna regla del tema puede dejar
   el texto o el icono invisibles sobre el fondo del botón.

   El objetivo es el subrayado del menú (`a::after`), que si no se cuela en
   los botones. Por eso se exceptúa el ::after del botón «Cotizar», que no
   viene del menú sino que es su halo: sin la excepción, el pseudoelemento
   se crea y anima, pero jamás se pinta. */
.dov-btn:not([data-cotiza-abrir])::after,
.dov-btn::before { display: none !important; }

.dov-btn,
.dov-btn:hover,
.dov-btn:focus-visible { opacity: 1 !important; }

.dov-btn span { opacity: 1 !important; visibility: visible !important; }
.dov-btn .dov-icon { opacity: 1 !important; visibility: visible !important; }

/* El desplegable no lleva subrayado: se resalta el renglón completo. */
.dropdown-menu a::after { display: none; }

.dropdown-menu a {
  transition: background var(--dov-fast) ease, color var(--dov-fast) ease,
              padding-left var(--dov-base) var(--dov-ease);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: #f4f8f9;
  color: var(--primary);
  padding-left: 22px;
}

/* --- Botones -------------------------------------------------------------- */
.dov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1;
  padding: 14px 24px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dov-base) var(--dov-ease),
              border-color var(--dov-base) var(--dov-ease),
              color var(--dov-base) var(--dov-ease),
              box-shadow var(--dov-base) var(--dov-ease),
              transform var(--dov-fast) var(--dov-ease);
}

.dov-btn:hover { transform: translateY(-2px); }
.dov-btn:active { transform: translateY(0); transition-duration: 0.06s; }

.dov-btn[disabled],
.dov-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* Primario: del teal institucional al ámbar de transmisión activa.
   El cambio de color es el mensaje — el control respondió. */
.dov-btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 64, 80, 0.18);
}
.dov-btn--primary:hover,
.dov-btn--primary:focus-visible {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(224, 127, 14, 0.34);
}

/* El texto y los iconos heredan siempre el color del botón: ninguna regla
   heredada del tema debe dejar el contenido ilegible sobre el fondo ámbar. */
.dov-btn span,
.dov-btn .dov-icon { color: inherit; }
.dov-btn .dov-icon { stroke: currentColor; }
.dov-btn--primary:active { background: var(--accent-hover); }

/* Latido del botón «Cotizar» del encabezado.
   ------------------------------------------------------------------
   Es la única acción del encabezado que pide algo al visitante, así que
   necesita voz propia sin gritar: un halo ámbar que se expande y se apaga
   cada seis segundos. No mueve el botón ni cambia su tamaño —nada que
   desplace el maquetado ni sume CLS—, sólo `box-shadow` y `opacity`, que
   el compositor resuelve sin repintar.

   El halo vive en un ::after propio para dejar libre la sombra del botón,
   y se detiene en cuanto el puntero o el teclado llegan: a partir de ahí
   manda el hover ámbar, que ya comunica el estado.

   Aquí sólo viven los fotogramas. Las reglas que aplican el halo están al
   final de la hoja, después de `.dov-btn { transition: all … !important }`:
   declaradas en este punto, esa transición se impone sobre el `box-shadow`
   y el pulso nunca llega a verse. */
@keyframes dov-latido {
  /* El pulso ocupa el primer 18 % del ciclo; el resto es reposo, que es
     lo que lo mantiene discreto: llama la atención una vez, no todo el rato.

     El anillo mantiene el color mientras crece y sólo se apaga al final.
     Si el tamaño y la opacidad se animan a la vez —de 0px opaco a 9px
     transparente— el halo se desvanece al mismo ritmo que se expande y no
     llega a verse en ningún fotograma: es invisible de principio a fin. */
  0%   { box-shadow: 0 0 0 0   rgba(224, 127, 14, 0); }
  4%   { box-shadow: 0 0 0 2px rgba(224, 127, 14, 0.55); }
  14%  { box-shadow: 0 0 0 8px rgba(224, 127, 14, 0.22); }
  22%  { box-shadow: 0 0 0 13px rgba(224, 127, 14, 0); }
  100% { box-shadow: 0 0 0 0   rgba(224, 127, 14, 0); }
}

/* Acento: ya nace ámbar, así que profundiza en lugar de saltar de tono. */
.dov-btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(224, 127, 14, 0.24);
}
.dov-btn--accent:hover,
.dov-btn--accent:focus-visible {
  background: var(--accent-hover);
  box-shadow: 0 8px 24px rgba(224, 127, 14, 0.38);
}

/* Suave: el gris claro se llena de teal al pasar el cursor. */
.dov-btn--soft {
  background: #f2f5f5;
  color: var(--primary);
  border-color: #d4dedf;
}
.dov-btn--soft:hover,
.dov-btn--soft:focus-visible {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 64, 80, 0.24);
}
.dov-btn--soft:hover .dov-icon { transform: translateX(3px); }
.dov-btn--soft .dov-icon { transition: transform var(--dov-base) var(--dov-ease); }

/* --- Boton de WhatsApp: clase aislada ------------------------------------
   Se nombra `dov-wa-cta` y no `dov-btn--*` a proposito: no comparte reglas
   con el resto de la botonera, asi ningun cambio futuro en `.dov-btn` puede
   volver a teñirle el texto.

   El problema que resuelve: el boton es un <a>, y tanto `a:hover` (arriba,
   ~linea 75) como el color heredado pintaban el rotulo de ambar sobre el
   verde de WhatsApp. Contraste 1.6:1, ilegible.

   Aqui el texto es blanco fijo -en reposo, hover, focus y active- y la
   respuesta al puntero es un oscurecimiento del propio verde mediante
   `filter: brightness()`. El color no cambia de familia: solo baja de
   intensidad, que es justo lo que se pidio. */
.dov-wa-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: #25d366;
  box-shadow: 0 5px 18px rgba(37, 211, 102, 0.26);
  transition: filter 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* El blanco se fija en los cuatro estados y tambien en los hijos: ni el
   `a:hover` del tema ni una regla futura pueden sobrescribirlo. */
.dov-wa-cta,
.dov-wa-cta:link,
.dov-wa-cta:visited,
.dov-wa-cta:hover,
.dov-wa-cta:focus,
.dov-wa-cta:focus-visible,
.dov-wa-cta:active,
.dov-wa-cta span,
.dov-wa-cta svg,
.dov-wa-cta .dov-icon {
  color: #fff !important;
  fill: none;
  stroke: currentColor;
}

.dov-wa-cta:hover,
.dov-wa-cta:focus-visible {
  /* Mismo verde, mas profundo: no hay salto de tono. */
  filter: brightness(0.88);
  box-shadow: 0 9px 26px rgba(37, 211, 102, 0.34);
  transform: translateY(-2px);
}

.dov-wa-cta:active {
  filter: brightness(0.80);
  transform: translateY(0);
  transition-duration: 0.06s;
}

.dov-wa-cta:focus-visible {
  outline: 3px solid #0d7a37;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dov-wa-cta { transition: none; }
  .dov-wa-cta:hover,
  .dov-wa-cta:active { transform: none; }
}

.dov-btn--outline {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
  font-size: 13.5px;
  padding: 13px 16px;
}
.dov-btn--outline:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 64, 80, 0.2);
}

.dov-btn--ghost {
  background: #f4f7f8;
  color: #35494d;
  border-color: #cbd5d7;
  font-size: 13.5px;
  padding: 13px 16px;
}
.dov-btn--ghost:hover,
.dov-btn--ghost:focus-visible {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

/* Las pastillas de filtro también viran a ámbar al pasar el cursor, para que
   el catálogo use el mismo lenguaje de color que los botones. */
.dov-filter-pill:hover:not(.is-active) {
  background: rgba(224, 127, 14, 0.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent-hover) !important;
}

.dov-filter-pill {
  transition: background var(--dov-base) var(--dov-ease),
              color var(--dov-base) var(--dov-ease),
              border-color var(--dov-base) var(--dov-ease),
              transform var(--dov-fast) var(--dov-ease);
}
.dov-filter-pill:hover:not(.is-active) {
  background: #e6eeef !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.dov-filter-pill:active { transform: scale(0.97); }

.dov-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 64, 80, 0.28);
  transition: color var(--dov-fast) ease, border-color var(--dov-fast) ease;
}
.dov-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Enlace de texto con flecha ("Ver catálogo completo →").
   El subrayado se dibuja de izquierda a derecha y la flecha avanza:
   dos señales de dirección en lugar de un simple cambio de tono. */
.dov-textlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color var(--dov-base) var(--dov-ease);
}
.dov-textlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dov-base) var(--dov-ease);
}
.dov-textlink:hover,
.dov-textlink:focus-visible { color: var(--accent); }
.dov-textlink:hover::after,
.dov-textlink:focus-visible::after { transform: scaleX(1); }

/* --- Tarjetas de producto ------------------------------------------------- */
/* Al pasar el cursor se enciende una línea ámbar en el borde superior: la
   misma señal de "canal activo" que usan los botones, aplicada a la tarjeta. */
.product-card-item {
  position: relative;
  transition: transform var(--dov-base) var(--dov-ease),
              box-shadow var(--dov-base) var(--dov-ease);
}
.product-card-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dov-base) var(--dov-ease);
  z-index: 3;
}
.product-card-item:hover::before,
.product-card-item:focus-within::before { transform: scaleX(1); }

.product-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 40, 50, 0.13);
}
.product-card-item:hover img { transform: scale(1.05); }

/* El título del producto vira a ámbar junto con la tarjeta. */
.product-card-item h3 a { transition: color var(--dov-base) var(--dov-ease); }
.product-card-item:hover h3 a { color: var(--accent) !important; }

/* =========================================================================
   TARJETA DEL ASESOR (concepto aprobado)
   Cierra la cuadrícula de líneas de producto. Es la salida para quien llega
   sin saber qué modelo pedir: en vez de otra categoría, una persona.
   ========================================================================= */

/* Ocupa una sola celda: cierra la cuadrícula de 6 (5 líneas + el asesor) sin
   dejar huecos, y guarda la misma proporción que las tarjetas vecinas. */
.expert-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 34px 30px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: radial-gradient(circle at 85% 30%, rgba(224, 127, 14, 0.22) 0%, rgba(0, 75, 92, 0.6) 45%, #00222b 100%), linear-gradient(135deg, #001f27 0%, #003a49 60%, #02141a 100%);
  box-shadow: 0 12px 32px rgba(0, 40, 50, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

.expert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 50, 65, 0.32);
  border-color: rgba(224, 127, 14, 0.5);
}

/* Halo ámbar tras el hombro del técnico: da profundidad sin una segunda imagen. */
.expert-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 38%, rgba(224, 127, 14, 0.28), transparent 60%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.expert-card:hover .expert-card__glow {
  opacity: 1;
  transform: scale(1.06);
}

.expert-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #ffa534;
  background: rgba(224, 127, 14, 0.15);
  border: 1px solid rgba(224, 127, 14, 0.35);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.expert-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffa534;
  box-shadow: 0 0 8px #ffa534;
}

.expert-card__content {
  position: relative;
  z-index: 3;
  max-width: 74%;
}

.expert-card__content h3 {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.18;
  color: #ffffff;
  margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.expert-card__content p {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: #d1f0f5;
  margin: 0 0 22px;
}

.expert-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #003644;
  background: #ffffff;
  padding: 13px 22px;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-card__cta svg.dov-icon {
  transition: transform 0.35s ease;
}

.expert-card__cta-arrow {
  transition: transform 0.35s ease;
}

/* Al pasar el cursor el botón vira a ámbar, igual que el resto del sitio. */
.expert-card:hover .expert-card__cta {
  background: #e07f0e;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(224, 127, 14, 0.4);
  transform: translateY(-2px);
}

.expert-card:hover .expert-card__cta svg.dov-icon {
  transform: scale(1.12) rotate(-5deg);
}

.expert-card:hover .expert-card__cta-arrow {
  transform: translateX(4px);
}

/* El técnico asoma por el borde derecho, recortado por el contenedor: da
   presencia sin competir con el texto en una celda estrecha. */
.expert-card__img {
  position: absolute;
  right: -28px;
  bottom: 0;
  height: 92%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  z-index: 2;
  opacity: 0.95;
  filter: drop-shadow(-10px 6px 20px rgba(0, 0, 0, 0.42));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-card:hover .expert-card__img {
  transform: translateX(-5px) scale(1.025);
}

@media (max-width: 992px) {
  .expert-card { min-height: 230px; }
  .expert-card__content { max-width: 70%; }
}

@media (max-width: 640px) {
  /* A una sola columna la foto le quitaría espacio al texto: se retira. */
  .expert-card { min-height: 0; padding: 28px 24px; }
  .expert-card__content { max-width: 100%; }
  .expert-card__img { display: none; }
}

/* --- Iconografía ---------------------------------------------------------- */
.dov-icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.dov-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color var(--dov-base) var(--dov-ease);
}

/* Datos de contacto del pie: el icono se enciende en ámbar antes que el texto,
   para que el objetivo del clic quede claro sobre fondo oscuro. */
a.dov-contact-item .dov-icon { transition: stroke var(--dov-base) var(--dov-ease); }
a.dov-contact-item:hover,
a.dov-contact-item:focus-visible { color: var(--accent) !important; }
a.dov-contact-item:hover .dov-icon { stroke: var(--accent); }

/* Teléfono del encabezado: es un enlace real, así que se comporta como tal. */
.dov-phone-link { text-decoration: none; }
.dov-phone-link:hover,
.dov-phone-link:focus-visible { color: var(--accent) !important; }
.dov-phone-link .dov-icon { transition: stroke var(--dov-base) var(--dov-ease); }
.dov-phone-link:hover .dov-icon { stroke: var(--accent); }

/* Accesos rápidos del widget de WhatsApp. */
.dov-wa-chip {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 12.5px;
  color: #33484c;
  background: #fff;
  border: 1px solid #d0dcde;
  padding: 6px 14px;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--dov-fast) ease, border-color var(--dov-fast) ease,
              color var(--dov-fast) ease;
}
.dov-wa-chip:hover,
.dov-wa-chip:focus-visible {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

/* En pantallas táctiles el hover se queda fijo tras tocar: lo anulamos. */
@media (hover: none) {
  .dov-btn:hover,
  .product-card-item:hover { transform: none; }
  .product-card-item:hover img { transform: none; }
}

/* =========================================================================
   ANIMACIONES DE ENTRADA VINCULADAS AL SCROLL
   Sólo `transform` y `opacity`. El disparo lo hace IntersectionObserver
   (js/scroll-anim.js); aquí vive únicamente el aspecto visual.
   ========================================================================= */

/* El estado oculto sólo existe si el JS añadió `.dov-anim-ready` al <html>.
   Si el JS falla o no carga, la clase nunca aparece y todo queda visible. */
.dov-anim-ready [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.55s var(--dov-ease), transform 0.55s var(--dov-ease);
}

.dov-anim-ready [data-anim="fade-up"]    { transform: translate3d(0, 18px, 0); }
.dov-anim-ready [data-anim="fade-in"]    { transform: none; }
.dov-anim-ready [data-anim="fade-left"]  { transform: translate3d(-20px, 0, 0); }
.dov-anim-ready [data-anim="fade-right"] { transform: translate3d(20px, 0, 0); }
.dov-anim-ready [data-anim="zoom"]       { transform: scale(0.97); }

.dov-anim-ready [data-anim].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Escalonado corto para grupos (tarjetas, iconos, filas). */
.dov-anim-ready [data-anim-delay="1"] { transition-delay: 60ms; }
.dov-anim-ready [data-anim-delay="2"] { transition-delay: 120ms; }
.dov-anim-ready [data-anim-delay="3"] { transition-delay: 180ms; }
.dov-anim-ready [data-anim-delay="4"] { transition-delay: 240ms; }
.dov-anim-ready [data-anim-delay="5"] { transition-delay: 300ms; }

/* Preferencia del sistema: sin movimiento. Todo permanece visible. */
@media (prefers-reduced-motion: reduce) {
  .dov-anim-ready [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .dov-btn,
  .product-card-item,
  .main-nav-bar a::after,
  .nav-desktop-menu a::after {
    transition: none !important;
  }
  .dov-btn:hover,
  .product-card-item:hover { transform: none; }
}

/* =========================================================================
   PANEL DE FILTROS DEL CATÁLOGO
   Cuatro ejes comerciales en columnas, como el buscador del sitio original.
   ========================================================================= */

.dov-filter-panel {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.dov-filter-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #f5f7f7;
  border-bottom: 1px solid var(--border-color);
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 14.5px;
  color: var(--text-main);
}

.dov-filter-panel__body {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  padding: 24px 20px;
}

.dov-filter-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.dov-filter-group legend {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
  padding: 0;
}

.dov-filter-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 14px;
  color: var(--text-main);
  cursor: pointer;
  transition: color var(--dov-fast) ease;
}

.dov-filter-opt:hover { color: var(--accent); }

.dov-filter-opt input {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex: none;
}

/* Opción sin equipos publicados: se muestra, pero desactivada y etiquetada.
   La línea existe comercialmente aunque el catálogo no la tenga cargada. */
.dov-filter-opt.is-empty {
  color: var(--text-light);
  cursor: default;
}
.dov-filter-opt.is-empty:hover { color: var(--text-light); }
.dov-filter-opt.is-empty input { cursor: default; }

.dov-filter-soon {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(224, 127, 14, 0.1);
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Categoría con catálogo: navega a su propia página. */
.dov-filter-opt--link { text-decoration: none; }
.dov-filter-opt--link.is-current { color: var(--primary); font-weight: 600; }

.dov-filter-num {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(0, 64, 80, 0.08);
  padding: 2px 8px;
  border-radius: 100px;
}

/* Entrada del menú sin catálogo: visible, no clicable. */
.dropdown-item-disabled {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 11px 20px !important;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 13.5px;
  color: var(--text-light) !important;
  border-bottom: 1px solid #f2f5f5;
  cursor: default;
}
.dropdown-item-disabled:last-child { border-bottom: none; }
.dropdown-item-disabled em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(224, 127, 14, 0.1);
  padding: 2px 7px;
  border-radius: 100px;
  margin-left: auto;
  white-space: nowrap;
}

/* Línea de catálogo todavía sin equipos publicados. */
.dov-empty-line {
  text-align: center;
  max-width: 560px;
  margin: 20px auto 8px;
  padding: 48px 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}
.dov-empty-line h2 {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--primary-dark);
  margin: 14px 0 10px;
}
.dov-empty-line p {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.dov-empty-line strong { font-weight: 600; color: var(--text-main); }
.dov-empty-line__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.dov-filter-panel__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 22px;
  flex-wrap: wrap;
}

.dov-filter-count {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-left: auto;
}

@media (max-width: 1100px) {
  .dov-filter-panel__body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 720px) {
  .dov-filter-panel__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 460px) {
  .dov-filter-panel__body { grid-template-columns: 1fr; }
  .dov-filter-count { margin-left: 0; width: 100%; }
}

/* =========================================================================
   HERO: rotador del titular y carrusel
   ========================================================================= */

/* Segundo renglón del titular. El H1 permanece fijo e indexable; esto es
   decoración marcada aria-hidden, así que nunca cambia lo que lee un buscador. */
.hero-rotator {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.2;
  color: var(--text-muted);
  margin: 0 0 26px;
  min-height: 2.1em; /* altura reservada: la rotación no mueve el layout */
}

/* Pastilla ámbar: el sector rota dentro de una etiqueta sólida, como el
   indicador de canal activo de un equipo de radio. El volteo ocurre sobre el
   eje X con perspectiva, así que la palabra gira como una pieza física. */
.hero-rotator__slot {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding: 7px 15px 8px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(224, 127, 14, 0.28);
  perspective: 620px;
  /* La cara trasera del volteo no debe asomar por los bordes. */
  overflow: hidden;
  /* La pastilla se ciñe a cada palabra y transiciona de ancho al cambiar:
     nada de huecos vacíos en las palabras cortas. El margen derecho viaja
     con la misma curva, así ancho + margen suman siempre lo mismo y el
     renglón no se reacomoda a mitad del giro (ver hero-motion.js). */
  transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              margin-right 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Brillo diagonal que recorre la pastilla al cambiar de palabra. */
.hero-rotator__slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.hero-rotator__slot.is-flipping::after {
  animation: heroSheen 0.62s ease-out;
}

@keyframes heroSheen {
  to { transform: translateX(120%); }
}

.hero-rotator__word {
  display: inline-block;
  transform-origin: center center -14px;
  backface-visibility: hidden;
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sale girando hacia arriba; entra desde abajo completando el giro. */
.hero-rotator__word.is-out {
  opacity: 0;
  transform: rotateX(72deg) translateY(-6px);
}
.hero-rotator__word.is-in {
  opacity: 0;
  transform: rotateX(-72deg) translateY(6px);
}

/* --- Carrusel del hero ---------------------------------------------------- */
.hero-carousel { position: relative; }

.hero-carousel__stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  /* Proporción fija: reserva el espacio antes de cargar la imagen (evita CLS). */
  aspect-ratio: 640 / 310;
  background: #eef2f3;
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-slide.is-active { opacity: 1; }

/* Sin JS todas las diapositivas siguen en el DOM; se muestra la primera. */
.no-js .hero-slide { position: relative; opacity: 1; }
.no-js .hero-slide:not(:first-child) { display: none; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 34px 18px 16px;
  background: linear-gradient(to top, rgba(4, 28, 35, 0.88), rgba(4, 28, 35, 0));
  color: #fff;
}

.hero-slide__tag {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-slide__text {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.45;
}

.hero-carousel__dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 14px;
}

.hero-dot {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: #d3dcde;
  cursor: pointer;
  transition: background var(--dov-base) var(--dov-ease), width var(--dov-base) var(--dov-ease);
}
.hero-dot:hover { background: #a8b8bb; }
.hero-dot.is-active { background: var(--accent); width: 38px; }

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

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-rotator__word { transition: none; transform: none !important; }
  .hero-rotator__slot.is-flipping::after { animation: none; }
}

/* =========================================================================
   NOTICIAS: cuerpo del artículo, compartir y paginación
   ========================================================================= */

.dov-article {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-main);
}
.dov-article > * + * { margin-top: 1.15em; }
.dov-article h2 {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.25;
  color: var(--primary-dark);
  margin-top: 1.8em;
}
.dov-article h3 {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--primary-dark);
  margin-top: 1.6em;
}
.dov-article a {
  color: var(--primary);
  border-bottom: 1px solid rgba(0, 64, 80, 0.3);
}
.dov-article a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.dov-article ul, .dov-article ol { padding-left: 1.3em; }
.dov-article li + li { margin-top: 0.45em; }
.dov-article img { max-width: 100%; height: auto; border-radius: 10px; }
.dov-article blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  color: var(--text-muted);
  font-style: italic;
}
.dov-article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dov-article th, .dov-article td {
  border: 1px solid var(--border-color);
  padding: 9px 12px;
  text-align: left;
}

/* --- Compartir ------------------------------------------------------------ */
/* Enlaces nativos de cada plataforma: sin scripts de terceros, así que la
   página no carga rastreadores externos ni peso extra. */
.dov-share {
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.dov-share__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 14px;
}

.dov-share__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dov-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border-dark);
  padding: 9px 16px;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dov-base) var(--dov-ease),
              border-color var(--dov-base) var(--dov-ease),
              color var(--dov-base) var(--dov-ease),
              transform var(--dov-fast) var(--dov-ease);
}
.dov-share__btn:hover { transform: translateY(-2px); color: #fff; }
.dov-share__btn:active { transform: translateY(0); }

/* Cada red toma su color al pasar el cursor: el destino queda claro. */
.dov-share__btn--wa:hover   { background: #25d366; border-color: #25d366; }
.dov-share__btn--li:hover   { background: #0a66c2; border-color: #0a66c2; }
.dov-share__btn--fb:hover   { background: #1877f2; border-color: #1877f2; }
.dov-share__btn--mail:hover { background: var(--primary); border-color: var(--primary); }
.dov-share__btn--copy:hover { background: var(--accent); border-color: var(--accent); }
.dov-share__btn.is-copied {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* --- Llamada a la acción del artículo ------------------------------------- */
.dov-article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding: 26px 28px;
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}
.dov-article-cta h2 {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  color: var(--primary-dark);
  margin: 0 0 6px;
}
.dov-article-cta p {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0;
}

/* --- Paginación ----------------------------------------------------------- */
.dov-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 42px;
}
.dov-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--dov-base) var(--dov-ease),
              border-color var(--dov-base) var(--dov-ease),
              color var(--dov-base) var(--dov-ease);
}
.dov-pagination .page-numbers:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dov-pagination .page-numbers.current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

@media (max-width: 640px) {
  .dov-article-cta { flex-direction: column; align-items: flex-start; }
  .dov-share__btn span { display: none; }
  .dov-share__btn { padding: 11px 14px; }
}

/* =========================================================================
   MENÚ MÓVIL — secciones desplegables por pulsación
   Se apoya en <details>/<summary>: el navegador ya resuelve abrir, cerrar,
   teclado y lectores de pantalla, así que no hace falta JavaScript.
   ========================================================================= */

.dov-mobile-group { border-bottom: 1px solid #f0f3f4; }
.dov-mobile-group:last-of-type { border-bottom: 0; }

.dov-mobile-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
  transition: color var(--dov-fast) ease;
}
.dov-mobile-group summary::-webkit-details-marker { display: none; }
.dov-mobile-group summary:hover { color: var(--accent); }

.dov-mobile-group summary .dov-icon {
  transition: transform var(--dov-base) var(--dov-ease);
}
.dov-mobile-group[open] summary { color: var(--accent); }
.dov-mobile-group[open] summary .dov-icon { transform: rotate(180deg); }

.dov-mobile-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 12px 14px;
  border-left: 2px solid rgba(224, 127, 14, 0.28);
  margin-left: 2px;
}

.dov-mobile-sub a,
.dov-mobile-sub .is-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--text-muted);
  text-decoration: none;
}
.dov-mobile-sub a:hover { color: var(--accent); }

/* Línea sin catálogo: visible pero no pulsable, igual que en escritorio. */
.dov-mobile-sub .is-empty { color: var(--text-light); }
.dov-mobile-sub .is-empty em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(224, 127, 14, 0.1);
  padding: 2px 7px;
  border-radius: 100px;
}

/* --- Tabla de ficha técnica ----------------------------------------------- */
.dov-spec-table tbody tr {
  transition: background var(--dov-fast) ease;
}
.dov-spec-table tbody tr:hover { background: #fafcfc; }

@media (max-width: 560px) {
  /* En móvil la tabla se apila para no comprimir los valores largos. */
  .dov-spec-table th,
  .dov-spec-table td {
    display: block;
    width: 100% !important;
    white-space: normal !important;
  }
.dov-spec-table th { padding-bottom: 2px !important; }
  .dov-spec-table td { padding-top: 0 !important; padding-bottom: 12px !important; }
}

/* ==========================================================================
   HIGH-TECH B2B ATMOSPHERIC HEADERS & FRONTEND DESIGN REFINEMENTS
   ========================================================================== */

/* Smooth Dark Teal B2B Header (Clean solid gradient, zero patterns/stripes) */
.cat-hero {
  position: relative;
  background: linear-gradient(135deg, #00222b 0%, #003846 60%, #04161f 100%) !important;
  background-image: linear-gradient(135deg, #00222b 0%, #003846 60%, #04161f 100%) !important;
  color: #ffffff !important;
  padding: 64px 40px !important;
  overflow: hidden !important;
  border-bottom: 2px solid rgba(224, 127, 14, 0.3) !important;
  box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.25) !important;
}

.cat-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: 5%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 200, 240, 0.14) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(50px);
}

.cat-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(224, 127, 14, 0.6) 50%, transparent 100%);
}

.cat-hero__inner {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.cat-hero__render-col {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.cat-hero__render-col img {
  width: 100%;
  max-width: 580px;
  max-height: 440px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 35px rgba(0, 220, 255, 0.35));
  transform: scale(1.18);
  transform-origin: center right;
  animation: floatSubtle 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-7px) scale(1.02); }
}

@media (max-width: 992px) {
  .cat-hero__inner {
    grid-template-columns: 1fr;
  }
  .cat-hero__render-col {
    display: none;
  }
}

.cat-hero__badge-pill {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 7px 16px;
  border-radius: 100px;
  color: #e0f4f7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-hero__badge-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(224, 127, 14, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Enhanced Product Cards & Panels */
.product-card-item {
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 40, 50, 0.06);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  border: 1px solid rgba(0, 64, 80, 0.06);
}

.product-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(0, 40, 50, 0.12);
  border-color: rgba(224, 127, 14, 0.3);
}

/* Polished Search Focus & Buttons */
.b2b-search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3.5px rgba(224, 127, 14, 0.2) !important;
}

.dov-btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dov-btn:hover {
  transform: translateY(-2px);
}

/* Cotización por volumen: el hover debe llenarse de teal, no sólo teñir el
   texto. La regla `.dov-btn { … !important }` de arriba pisaba el fondo y
   dejaba el botón gris con la letra en color, que parecía un fallo. Se
   redeclara aquí, al final, para que el relleno gane la cascada. */
.dov-btn.dov-btn--soft:hover,
.dov-btn.dov-btn--soft:focus-visible {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 64, 80, 0.24) !important;
}
.dov-btn.dov-btn--soft:hover .dov-icon,
.dov-btn.dov-btn--soft:hover span { color: #fff !important; stroke: #fff !important; }

/* Latido del botón «Cotizar» — redeclarado al final del archivo a propósito.
   ------------------------------------------------------------------------
   La regla `.dov-btn { transition: all … !important }` de arriba se aplica
   también al pseudoelemento y deja el `box-shadow` bajo el mando de esa
   transición en vez de los fotogramas, con lo que el pulso no llega a
   verse. Aquí el halo recupera el control: `transition: none` corta esa
   herencia y la declaración vive después en la cascada, así que gana sin
   necesidad de más `!important`.

   El detalle está descrito junto a los @keyframes, más arriba en la hoja. */
.dov-btn.dov-btn--primary[data-cotiza-abrir] {
  position: relative;
}
.dov-btn.dov-btn--primary[data-cotiza-abrir]::after {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Sólo la opacidad transiciona: el `box-shadow` debe quedar en manos de
     los fotogramas, y una transición sobre él ahogaría el pulso. */
  transition: opacity 0.25s ease !important;
  animation: dov-latido 6s ease-out infinite;
}
/* Con el puntero encima el halo se atenúa, pero el ciclo sigue corriendo.
   Apagarlo con `animation: none` lo mataba de raíz: este botón vive en la
   esquina superior derecha, donde el puntero pasa constantemente, así que
   bastaba rozarlo una vez para que el latido no volviera nunca. */
.dov-btn.dov-btn--primary[data-cotiza-abrir]:hover::after,
.dov-btn.dov-btn--primary[data-cotiza-abrir]:focus-visible::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dov-btn.dov-btn--primary[data-cotiza-abrir]::after { animation: none; }
}

/* Product Lines Category Cards 100% Container & Smooth Hover Zoom Effects */
.cat-card-img-box {
  height: 230px !important;
  width: 100% !important;
  background: #f5f8f8 !important;
  overflow: hidden !important;
  position: relative !important;
}

.cat-card-img-box img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  /* Las ilustraciones de categoria son cuadradas (400x400) y la caja es
     apaisada (230px de alto). Con `cover` el navegador recortaba el 38 %
     de cada imagen -19 % arriba y 19 % abajo-, y a los equipos altos
     -torres, repetidores, el operador con casco- les cortaba la cabeza.
     Con `contain` la ilustracion entra completa; el fondo #f5f8f8 de la
     caja rellena lo que sobra a los lados. */
  object-fit: contain !important;
  object-position: center !important;
  padding: 14px !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important;
}

.product-card-item {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 22px rgba(0, 40, 50, 0.07) !important;
  border: 1px solid rgba(0, 40, 50, 0.09) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
}

.product-card-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(0, 64, 80, 0.18) !important;
  border-color: rgba(224, 127, 14, 0.45) !important;
}

.product-card-item:hover .cat-card-img-box img,
.product-card-item:hover img {
  transform: scale(1.09) !important;
  filter: brightness(1.05) contrast(1.04) !important;
}

/* Ver Más Card Link Styling */
.card-ver-mas {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 14px !important;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: var(--accent, #e07f0e) !important;
  transition: color 0.3s ease !important;
}

.card-ver-mas__arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card-item:hover .card-ver-mas {
  color: #cc7000 !important;
}

.product-card-item:hover .card-ver-mas__arrow {
  transform: translateX(5px) !important;
}


/* Redes sociales del pie ------------------------------------------------- */
.dov-footer-redes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.dov-footer-redes a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: #bfe0e6;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.dov-footer-redes a:hover {
  background: var(--accent, #e07f0e);
  border-color: var(--accent, #e07f0e);
  color: #fff;
  transform: translateY(-2px);
}
.dov-footer-redes a:focus-visible {
  outline: 2px solid var(--accent, #e07f0e);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .dov-footer-redes a { transition: none; }
  .dov-footer-redes a:hover { transform: none; }
}

/* ======================================================================
   Ficha de producto: galería, folleto y visor ampliado
   ====================================================================== */

/* La imagen principal invita a pulsarse: basta el cursor de lupa para
   anunciarlo, sin añadir un icono encima de la foto. */
.dov-ampliable {
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  border-radius: 10px;
}

/* El marco de la foto (.dov-prod-marco) es un fondo, no una superficie que
   reaccione: no se eleva ni cambia de borde. Toda la respuesta al puntero
   la lleva la propia imagen, que crece apenas y anuncia que se puede
   ampliar. Así queda un solo elemento reaccionando, no dos encajados. */
.dov-prod-marco {
  transition: box-shadow 0.3s ease;
}
.dov-prod-marco:hover {
  box-shadow: 0 14px 34px rgba(0, 40, 50, 0.10);
}
.dov-prod-marco .dov-ampliable img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dov-prod-marco .dov-ampliable:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .dov-prod-marco .dov-ampliable img,
  .dov-prod-marco .dov-ampliable:hover img { transition: none; transform: none; }
}

/* Las miniaturas de la galería sí son su propia superficie: ahí no hay
   tarjeta que reaccione, así que el realce lo lleva la miniatura. */
.dov-galeria .dov-ampliable {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.dov-galeria .dov-ampliable:hover {
  transform: translateY(-3px);
  border-color: var(--accent, #e07f0e);
}

/* El foco de teclado sí se dibuja siempre: es la única señal de dónde
   está uno al navegar sin ratón. */
.dov-ampliable:focus-visible {
  outline: 2.5px solid var(--accent, #e07f0e);
  outline-offset: 4px;
}

/* Miniaturas de la galería: cuadradas y del mismo alto, para que tres
   fotos de proporciones distintas no descuadren la columna. */
.dov-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.dov-galeria .dov-ampliable {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f8f8;
  border: 1px solid #e3ebec;
  overflow: hidden;
}
.dov-galeria img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Descarga del folleto: se lee como una acción, no como un enlace suelto. */
.dov-folleto {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #e3ebec;
  border-radius: 12px;
  background: #fbfdfd;
  text-decoration: none;
  color: var(--primary-dark, #08252d);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.dov-folleto:hover,
.dov-folleto:focus-visible {
  border-color: var(--accent, #e07f0e);
  box-shadow: 0 6px 20px rgba(224, 127, 14, 0.16);
}
.dov-folleto__txt {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
}
.dov-folleto__meta {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #6b7d81;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- visor */

.dov-visor {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.dov-visor::backdrop {
  background: rgba(3, 22, 27, 0.88);
}
.dov-visor__marco {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 64px;
  box-sizing: border-box;
}
.dov-visor__img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.dov-visor__pie {
  font-family: 'Roboto', sans-serif;
  font-size: 13.5px;
  color: #d6e2e4;
  text-align: center;
  max-width: 60ch;
}
.dov-visor__cerrar,
.dov-visor__nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  transition: background 0.2s ease;
}
.dov-visor__cerrar:hover,
.dov-visor__nav:hover { background: rgba(255, 255, 255, 0.26); }
.dov-visor__cerrar:focus-visible,
.dov-visor__nav:focus-visible {
  outline: 2.5px solid var(--accent, #e07f0e);
  outline-offset: 3px;
}
.dov-visor__cerrar {
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  font-size: 27px;
}
.dov-visor__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 32px;
}
.dov-visor__nav--prev { left: 14px; }
.dov-visor__nav--sig { right: 14px; }
.dov-visor__nav[hidden] { display: none; }

.dov-visor__contador {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #c3d3d6;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .dov-visor__marco { padding: 60px 16px 48px; }
  .dov-visor__nav { width: 40px; height: 40px; font-size: 26px; }
  .dov-visor__nav--prev { left: 6px; }
  .dov-visor__nav--sig { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .dov-ampliable,
  .dov-ampliable:hover { transition: none; transform: none; }
}

/* ----------------------------------------------------------------------
   Ficha de producto en pantallas estrechas
   ----------------------------------------------------------------------
   El maquetado de la ficha se escribió con `style="grid-template-columns:
   1fr 1fr"` en el propio marcado, sin punto de quiebre: al reducir el ancho
   las dos columnas seguían repartiéndose el espacio y la ficha técnica
   quedaba estrujada contra el borde, ilegible. Los atributos `style` ganan
   a cualquier selector, así que estas reglas necesitan `!important` para
   corregirlos desde aquí. */

@media (max-width: 900px) {
  /* Imagen arriba, datos debajo: en vertical no caben dos columnas. */
  .dov-prod-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 560px) {
  .dov-prod-ventajas { grid-template-columns: 1fr !important; }

  /* Los tres botones secundarios se apilan: en fila quedaban tan angostos
     que el número de teléfono se cortaba a media cifra. */
  .dov-prod-acciones { grid-template-columns: 1fr !important; }

  /* La ficha técnica pasa de dos columnas a bloques: la etiqueta encima y
     el valor debajo, cada fila separada por su línea. Así una medida larga
     («136-174 MHz | 403-470 MHz») se lee entera en vez de partirse letra
     a letra en una columna de 40 px. */
  .dov-spec-table th,
  .dov-spec-table td {
    display: block;
    width: auto !important;
    white-space: normal !important;
    padding: 0 !important;
  }
  .dov-spec-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7d81 !important;
    padding-top: 12px !important;
  }
  .dov-spec-table td {
    padding-bottom: 12px !important;
    font-weight: 500;
  }
  .dov-spec-table tr { display: block; }
  .dov-spec-table tr + tr { border-top: 1px solid #f2f5f5; }

  .dov-specs-card { padding: 18px 16px !important; }
}

/* ----------------------------------------------------------------------
   Página 404
   ----------------------------------------------------------------------
   Una dirección equivocada no es un callejón sin salida: se reconoce el
   error en una línea y el resto del espacio se dedica a las tres rutas
   que el visitante venía buscando. */

.dov-404 {
  max-width: 720px;
  margin: 0 auto;
  padding: 90px 24px 110px;
  text-align: center;
}
.dov-404__codigo {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #e07f0e);
  margin: 0 0 10px;
}
.dov-404__titulo {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  color: var(--primary-dark, #08252d);
  margin: 0 0 14px;
}
.dov-404__texto {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #536468;
  margin: 0 auto 30px;
  max-width: 52ch;
}
.dov-404__salidas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}
.dov-404__ayuda {
  font-family: 'Roboto', 'Roboto Fallback', sans-serif;
  font-size: 14px;
  color: #6b7d81;
  margin: 0;
}
.dov-404__ayuda a {
  color: var(--primary, #004050);
  font-weight: 600;
}

@media (max-width: 520px) {
  .dov-404 { padding: 60px 20px 80px; }
  .dov-404__salidas .dov-btn { width: 100%; justify-content: center; }
}