body{
  line-height: normal;
}

.header-nav-top .active{
  background-color: inherit  !important;
}
#header .header-top, 
#header .header-nav-features .header-nav-features-search-reveal-container {
  min-height: 20px;
}
#header .header-nav {
  min-height:auto;
}
.social-icons li:hover.social-icons-tiktok a {
  background: var(--black) !important;
}

.social-icons li:hover.social-icons-instagram a {
  background: var(--clr-instagram) !important;
}

b{
  font-weight: bold;
}

.mw-25{ max-width: 25%;}
.mw-30{ max-width: 30%;}
.mw-35{ max-width: 35%;}
.mw-40{ max-width: 40%;}
.mw-45{ max-width: 45%;}
.mw-50{ max-width: 50%;}

@media (max-width: 768px) { 
  .img-float-text {
    float:none !important;
    max-width: 100%;
  }

  #header.header-effect-shrink .header-container {
    min-height: auto;
  }
}

/* ===== Branding Climalem =====
   Tipografía: Montserrat en toda la UI y titulares (legible y profesional).
   Orbitron queda reservado SOLO a .font-brand (claims/branding puntual),
   no en titulares (resultaba poco legible). theme.css usa 'poppins'
   hardcodeado; se sobreescribe aquí (custom.css carga tras theme.css/skins). */
body,
h1, h2, h3, h4, h5, h6, .card-title,
button, input, select, textarea, optgroup,
.nav, .dropdown-menu, .breadcrumb, .btn {
  font-family: 'Montserrat', Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.font-brand {
  font-family: 'Orbitron', 'Montserrat', sans-serif !important;
  letter-spacing: .02em;
  font-weight: 700;
}

/* CTA cálido (ámbar del logo) — alto contraste sobre fondo claro y sobre bg-primary */
.btn-cta,
.home-intro .btn-cta {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #1c2b33 !important;
  font-weight: 700;
}
.btn-cta:hover,
.home-intro .btn-cta:hover {
  background-color: var(--secondary-d2) !important;
  border-color: var(--secondary-d2) !important;
  color: #1c2b33 !important;
}
/* Salvaguarda: ningún botón claro invisible dentro de la banda primaria */
.home-intro .btn-light { color: var(--primary) !important; }

/* Precio = chapa navy con amarillo de marca (máximo contraste, WCAG) */
.precio {
  display: inline-block;
  background-color: var(--primary) !important;
  color: var(--secondary) !important;
  padding: .45rem 1rem;
  border-radius: .4rem;
  line-height: 1.2;
}

/* Cabecera compacta tipo "sticky": logo + navbar en una sola fila, sin topbar */
#header .header-column.justify-content-end .header-row.pt-3 { display: none !important; }
#header .header-nav-top { display: none !important; }
#header .header-logo img { height: 40px !important; width: auto; }
#header .header-logo { padding: 0 !important; }
#header .header-body { padding-top: .5rem !important; padding-bottom: .5rem !important; border-top: 0; }
#header .header-row { align-items: center; }

/* Footer: todo el texto en blanco */
#footer, #footer p, #footer a, #footer span, #footer strong, #footer h5,
#footer .footer-copyright, #footer .footer-copyright a,
#footer .footer-ribbon span { color: #fff !important; }
#footer .fa-angle-right { color: #fff !important; }
/* Iconos de datos de contacto en amarillo de marca */
#footer .contact-details i { color: var(--secondary) !important; }

/* SÍGUENOS: el círculo blanco se mantiene; el icono va en el color de
   cada red social (la regla #footer a{color:#fff} de arriba lo dejaba
   blanco sobre blanco = invisible). Al pasar el ratón, el círculo se
   tiñe del color de la red y el icono pasa a blanco (comportamiento
   nativo de Porto). */
#footer .social-icons li a                        { color: var(--gray-800)    !important; }
#footer .social-icons li.social-icons-facebook a  { color: var(--clr-facebook)  !important; }
#footer .social-icons li.social-icons-twitter a   { color: var(--clr-sky-blue)  !important; }
#footer .social-icons li.social-icons-linkedin a  { color: var(--clr-blue-link) !important; }
#footer .social-icons li.social-icons-instagram a { color: var(--clr-instagram) !important; }
#footer .social-icons li.social-icons-tiktok a    { color: var(--black)        !important; }
#footer .social-icons li:hover a                  { color: #fff               !important; }

/* Franja de marcas global (encima del Kit Digital, en todas las páginas) */
.marcas-strip-global { padding:1.25rem 0; }
.marcas-strip-global .marca-item { display:flex; align-items:center; justify-content:center; min-height:60px; }
.marcas-strip-global .marca-item img { max-height:46px; width:auto; filter:grayscale(1); opacity:.5; transition:filter .25s, opacity .25s; }
.marcas-strip-global .marca-item:hover img { filter:grayscale(0); opacity:1; }
/* La marca centrada del slider se muestra marcada (como en hover) */
.marcas-strip-global .owl-item.center .marca-item img { filter:grayscale(0) !important; opacity:1 !important; }

/* ===== Featured boxes: títulos a 2 líneas =====
   Reserva 2 líneas de alto en los h4 de las tarjetas .featured-boxes-flat
   ("Por qué elegir Climalem", "Cómo trabajamos", "Por qué elegirnos" de
   Empresa). Así las tarjetas con título corto (1 línea) y largo (2 líneas)
   quedan a la misma altura sin tocar paddings, márgenes ni estilo. */
.featured-boxes-flat .featured-box h4 {
  min-height: 2.6em;
}

/* ===== Servicios: tarjeta limpia con icono en "chapa" =====
   Sustituye el círculo azul marino macizo + anillo hover de Porto
   (featured-box-effect-2) por una tarjeta estática y limpia con el
   icono en un recuadro redondeado con tinte azul claro suave.
   No clicable (sin hover engañoso). Ámbito limitado a
   .servicios-cards para no afectar a "Cómo trabajamos",
   "Por qué elegirnos" ni a la página Empresa. */
.servicios-cards .featured-box {
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .12) !important;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .06);
  margin: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.servicios-cards .featured-box .box-content {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  top: 0 !important;
  padding: 2rem 1.6rem;
  flex: 1 1 auto;
}
/* Icono dentro de una "chapa" redondeada con tinte azul claro suave
   (anula el círculo macizo y el anillo del effect-2 de Porto) */
.servicios-cards .icon-featured {
  position: static !important;
  top: 0 !important;
  width: 66px !important;
  height: 66px !important;
  line-height: 66px !important;
  margin: 0 0 1.1rem !important;
  border-radius: 16px !important;
  background-color: rgba(var(--primary-rgb), .09) !important;
  color: var(--primary) !important;
  font-size: 1.7em !important;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.servicios-cards .icon-featured:after { display: none !important; }
.servicios-cards .featured-box h4 { color: var(--primary) !important; }
.servicios-cards .featured-box p { color: #5a6b73; }

/* Hover moderno: la card se eleva y el icono se rellena con el
   amarillo de los botones (var(--secondary)). Sin convertirla en
   clicable. */
.servicios-cards .featured-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(var(--secondary-rgb), .22);
  border-color: var(--secondary) !important;
}
.servicios-cards .featured-box:hover .icon-featured {
  background-color: var(--secondary) !important;
  color: #1c2b33 !important;
  transform: scale(1.06);
}

/* ===== Marcas: tarjetas limpias clicables (misma estética que servicios) =====
   Sustituye la franja gris (bg-light) + logos sueltos por tarjetas
   blancas clicables a la web del fabricante. Ámbito: .marcas-cards. */
.marcas-cards .marca-card {
  display: flex;
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .06);
  padding: 1.6rem 1.5rem;
  text-decoration: none !important;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.marcas-cards a.marca-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(var(--primary-rgb), .16);
  border-color: var(--primary);
}
.marcas-cards .marca-logo { width: 140px; padding-right: 1.5rem; }
.marcas-cards .marca-logo img { max-height: 64px; width: auto; }
.marcas-cards .marca-card h4 { color: var(--primary) !important; }
.marcas-cards .marca-card .text-3 { color: #5a6b73; }
.marcas-cards .marca-mas {
  display: inline-block;
  color: var(--primary);
  letter-spacing: .04em;
  transition: color .25s ease;
}
.marcas-cards a.marca-card:hover .marca-mas { color: var(--secondary-d2); }
.marcas-cards .marca-mas .fa-angle-right { transition: transform .25s ease; }
.marcas-cards a.marca-card:hover .marca-mas .fa-angle-right { transform: translateX(4px); }

/* Variante compacta en la home: solo logo + nombre, en color */
.marcas-cards-logos .marca-card-logo { padding: 1.4rem 1rem; min-height: 124px; }
.marcas-cards-logos .marca-card-logo img { max-height: 50px; width: auto; }
.marcas-cards-logos .marca-card-name {
  display: block;
  margin-top: .7rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
}

@media (max-width: 575px) {
  .marcas-cards .marca-card { flex-direction: column; text-align: center; }
  .marcas-cards .marca-logo { width: auto; padding: 0 0 1rem; }
}

/* ===== Secciones en zebra: gris ↔ blanco =====
   En vez de tapar el hueco blanco, se da sentido al color: el page-header
   (título de página + breadcrumb) es gris y, a partir de ahí, las secciones
   alternan BLANCO / GRIS. Cada bloque se distingue por su propio color, no
   por un espacio en blanco. Los bloques van a ras: el cambio de color es la
   separación.

   El page-header es el 1er <section> hijo de .main; las secciones de
   contenido vienen después. Por eso:
     · nth-of-type(odd)  → gris   → page-header (1ª) + secciones 3ª, 5ª…
     · nth-of-type(even) → blanco → secciones 2ª, 4ª…
   El CTA azul (.home-intro/.bg-primary), el footer y las tarjetas blancas
   llevan color propio y quedan fuera de la alternancia. */

/* Bloques a ras: delimita el color, no la franja en blanco */
section.section { margin: 0 !important; }
.page-header    { margin-bottom: 0 !important; }
.home-intro     { margin-bottom: 0 !important; }

/* Alternancia gris/blanco de las secciones dentro de .main */
.main > section:nth-of-type(odd) {
  background-color: var(--gray-50) !important;  /* gris (igual que el page-header) */
  border-top: 0 !important;
}
.main > section:nth-of-type(even) {
  background-color: #fff !important;            /* blanco */
  border-top: 0 !important;
}

/* ===== Pingüino marca de agua + host del viento Canvas =====
   El VIENTO lo genera el componente Canvas 2D themes/porto/js/wind.js
   en modo SCOPED (un canvas dentro de cada zona, ver footer.tpl):
   .page-header (títulos), .home-intro (banda CTA azul) y .home-servicios
   (sección Servicios de la home) — las mismas zonas que tenía el viento
   CSS. wind.js pone el host en position:relative + overflow:hidden y el
   canvas en z-index:0; aquí solo subimos el contenido por encima.
   El pingüino marca de agua sigue en .page-header (azul) y .home-intro
   (blanco). Contenido siempre encima (capas z-index:0, contenido z-index:1). */

/* Anfitriones (pingüino marca de agua y/o viento Canvas).
   Incluye TODAS las zonas grises de páginas internas (zebra
   .main>section:nth-of-type(odd), salvo el page-header que va aparte). */
.page-header,
.home-intro,
.home-servicios,
.cl-wind,
.main > section:nth-of-type(odd):not(.page-header) { position: relative; }

/* El contenido real va por encima de las capas decorativas */
.page-header > .container,
.page-header > .container-fluid,
.home-intro > .container,
.home-servicios > .container,
.cl-wind > .container,
.main > section:nth-of-type(odd):not(.page-header) > .container,
.main > section:nth-of-type(odd):not(.page-header) > .container-fluid {
  position: relative;
  z-index: 1;
}

/* (El pingüino marca de agua de la cabecera de páginas internas
   —.page-header— se retiró a petición del cliente; allí solo queda
   el viento Canvas.) */

/* Pingüino marca de agua en la banda CTA azul (blanco, sin aire) */
.home-intro::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: 3%; top: 50%;
  width: 118px; height: 118px;
  transform: translateY(-50%);
  -webkit-mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
          mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
  background-color: #fff;
  opacity: 0;   /* oculto hasta que el banner entra en pantalla */
}
/* Al entrar el banner en pantalla al hacer scroll (.wind-seen): el
   pingüino entra desde la izquierda y recorre TODO el banner (1 vez). */
.home-intro.wind-seen::after {
  animation: cl-pin-vuela 4s cubic-bezier(.22,.61,.36,1) .3s 1 both;
}
/* Vuelo NATURAL del pingüino del banner: una sola transición continua
   A→B (sin fases). La desaceleración la da el cubic-bezier. */
@keyframes cl-pin-vuela {
  0%   { opacity: 0;   transform: translate(-90vw, -50%); }
  18%  { opacity: .14; }
  100% { opacity: .14; transform: translate(0, -50%); }
}
@media (max-width: 991px) {
  .home-intro::after { display: none; }   /* banda estrecha en móvil */
}
@media (prefers-reduced-motion: reduce) {
  /* sin vuelo: el pingüino aparece ya en su sitio cuando el banner se ve.
     wind.js (que respeta esta preferencia) sigue añadiendo .wind-seen. */
  .home-intro.wind-seen::after { animation: none; opacity: .14; }
}

/* Footer: copyright «© Copyright AAAA / PiensaNet» centrado
   (la columna vacía de la izquierda se colapsa y el bloque va al centro) */
#footer .footer-copyright .row > [class*="col-lg-5"] { display: none; }
#footer .footer-copyright .row > [class*="col-lg-7"] {
  flex: 0 0 100%;
  max-width: 100%;
  justify-content: center !important;
  text-align: center;
}

/* Pingüino mascota (a color) junto a "Quiénes somos" y en la 404 */
.pinguino-deco { width: 88px; height: auto; }
.pinguino-deco-lg { width: 150px; height: auto; }

/* Botón "volver arriba" = mini-pingüino de marca */
.scroll-to-top { background: var(--primary) !important; }
.scroll-to-top i { opacity: 0 !important; }
.scroll-to-top::after {
  content: "";
  position: absolute;
  inset: 16% 18%;
  -webkit-mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
          mask: url(../img/climalem-pinguino-mono.svg) no-repeat center / contain;
  background-color: #fff;
  transition: background-color .2s ease;
}
.scroll-to-top:hover::after { background-color: var(--secondary); }

/* ===== Submenús del menú principal =====
   Texto en negro en reposo, blanco al hover/focus/activo (sobre fondo
   gris sólido). Antes el reposo heredaba un gris claro casi ilegible. */
#header .dropdown-menu .dropdown-item {
  color: #000 !important;
}
#header .dropdown-menu .dropdown-item:hover,
#header .dropdown-menu .dropdown-item:focus,
#header .dropdown-menu .dropdown-item.active,
#header .dropdown-menu li:hover > .dropdown-item {
  background-color: var(--gray-700) !important;
  color: #fff !important;
}

/* Logo de X (Twitter) en el footer: FA 6.4.0 no trae fa-x-twitter,
   se usa un <svg> inline; que herede tamaño/color como el resto. */
#footer .social-icons-twitter a svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}

/* ===== Accesibilidad: contraste WCAG 2 AA =====
   El theme.css de Porto deja el cuerpo en var(--gray-500) (#777777)
   que sobre blanco da 4.47:1, justo por DEBAJO del umbral AA (4.5:1).
   Al añadirle .opacity-75 baja a ~#999 (2.84:1), claramente fallido.
   axe DevTools marcaba ambos casos en la home y en otras páginas.

   Solución: sin tocar plantillas, ajustar a #5a6b73 (5.2:1, ya en uso
   para textos secundarios en .servicios-cards/.marcas-cards), y anular
   el opacity-75 en los subtítulos de sección sobre fondo claro. El uso
   de .opacity-75 sobre fondos oscuros (banda CTA azul, etc.) NO se ve
   afectado porque se aplica con .text-color-light en otro contexto. */

/* Subtítulos de sección: "Climatización doméstica…", "Instalación,
   mantenimiento…", "Estos son los servicios…". Mantienen aspecto
   "muted" pero con contraste AA. */
/* Subtítulos/párrafos "muted" con opacity sobre fondo claro. El opacity mezcla
   el texto con el blanco y baja el contraste por debajo de AA:
     · text-4 opacity-8  → #7a7a7a (4.29:1)   [empresa]
     · text-4 opacity-75 → #838383 (3.9:1)    [inicio, servicios]
     · lead text-color-default opacity-8 → #929292 (3.11:1) [cabeceras]
   Se fija un color sólido de 5.55:1 y se anula la opacidad. Se excluye
   .text-color-light (texto claro sobre banda oscura, que NO debe tocarse). */
p.text-4.opacity-8:not(.text-color-light),
p.text-4.opacity-75:not(.text-color-light),
p.lead.text-color-default {
  color: #5a6b73 !important;
  opacity: 1 !important;
}

/* CAUSA RAÍZ del "montón" de fallos de contraste: el tema referencia
   var(--gray-500)=#777777 (4.48:1 sobre blanco, por debajo de AA) en 86 reglas
   de color de TEXTO: body, .featured-box p, .marca-card, .box-content, .text-3…
   Cambiar solo body{} no bastaba porque muchas reglas son más específicas.
   Se REDEFINE la variable a #595959 (7:1), lo que arregla todas de una vez.
   --gray-500 no se usa como fondo (solo un círculo decorativo del componente
   "process", sin uso aquí) ni como texto sobre oscuro salvo el footer (abajo).
   Los bordes usan otra variable (--gray-500-rgb), que no se toca. */
:root {
  --gray-500: #595959;
}
body { color: #595959; }
.text-color-default { color: #595959 !important; }
/* Nota: el footer ya fuerza todo el texto a #fff !important (regla previa
   "Footer: todo el texto en blanco"), así que la variable más oscura no le
   afecta: sigue en blanco sobre --dark (15:1). */

/* ===== Accesibilidad: jerarquía de encabezados (WCAG 1.3.1) =====
   El tema aplica a <h3> por defecto text-transform:uppercase y 1.8em, lo que
   empujaba a maquetar los subtítulos como <h4>/<h5> y rompía el orden de
   encabezados (h1→h4, h2→h4, etc.). Al pasar esos subtítulos a su nivel
   semántico correcto (<h3>), se neutraliza ese efecto para conservar el
   diseño original (minúsculas; el tamaño lo siguen dando las clases text-N).
   Solo afecta a los <h3> que creamos aquí: no existían <h3.font-weight-bold>
   previos salvo el de resenas.tpl, que ya usa .text-transform-none. */
.section h3.font-weight-bold {
  text-transform: none;
  letter-spacing: normal;
}
/* Subtítulos sin clase de tamaño (bloques de contacto, preguntas de FAQ…):
   replican el aspecto del <h4> original (1.4em, semibold, minúsculas)
   independientemente del nivel semántico (<h2>/<h3>) que ahora usan. */
.a11y-subheading {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 1.4em !important;
  font-weight: 600;
}

/* ===== Accesibilidad: foco de teclado visible (WCAG 2.4.7 AA / 2.4.11) =====
   theme.css aplica `body a { outline: none !important }` (y outline:0 en otros
   controles), eliminando por completo el indicador de foco de teclado. Se
   restaura un anillo de foco de doble capa: ámbar (destaca sobre fondos
   oscuros) + halo azul petróleo (destaca sobre fondos claros), de modo que
   SIEMPRE hay una capa con contraste ≥3:1 sea cual sea el fondo. Se usa
   :focus-visible para no molestar al usuario de ratón. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.accordion-toggle:focus-visible,
.owl-dot:focus-visible,
.owl-prev:focus-visible,
.owl-next:focus-visible {
  outline: 3px solid var(--secondary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(0, 48, 72, .6) !important;
  border-radius: 2px;
}
/* Respaldo para navegadores sin :focus-visible (que se apoyan en :focus). */
body a:focus,
button:focus,
.btn:focus {
  outline: 3px solid var(--secondary) !important;
  outline-offset: 2px !important;
}

/* ===== Accesibilidad: no depender solo del color (WCAG 1.4.1) =====
   El tema pone `a { text-decoration: none }`, dejando los enlaces dentro de
   texto corrido diferenciados únicamente por el color. Se restaura el
   subrayado en enlaces de párrafos de contenido (se excluyen botones; los
   menús y columnas de enlaces del footer no van dentro de <p>, no se ven
   afectados). */
p a:not(.btn):not([class*="btn-"]):not(.no-underline) {
  text-decoration: underline;
}

/* Texto pequeño de las "featured boxes" planas (Por qué elegir
   Climalem / Por qué elegirnos / Servicios listados). El .text-2 hereda
   #777 del body y se queda en 4.47:1. */
.featured-boxes-flat .featured-box .box-content p.text-2 {
  color: #5a6b73;
}

/* =========================================================
   CATÁLOGO DE PRODUCTOS — listado (productos.tpl)
   Tarjetas modernas: imagen en marco neutro, marca como título,
   descripción, CTA y botón externo al catálogo del fabricante.
   Misma familia visual que .servicios-cards y .marcas-cards
   (border + radius + shadow, hover translateY).
   ========================================================= */

.catalogo-intro { color: #5a6b73; }
.catalogo-intro p:last-child { margin-bottom: 0; }

.productos-cards .producto-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .06);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.productos-cards .producto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(var(--primary-rgb), .18);
  border-color: var(--primary);
}

.productos-cards a.producto-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}

/* Marco neutro para la foto: los equipos quedan completos (contain),
   no recortados — los recortes cuadrados del diseño anterior
   inutilizaban las fichas de productos. */
.productos-cards .producto-card-media {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--primary-rgb), .06) 0%, transparent 60%),
    linear-gradient(180deg, #f5f9fc 0%, #ffffff 100%);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  overflow: hidden;
}
.productos-cards .producto-card-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .4s ease;
}
.productos-cards .producto-card:hover .producto-card-media img {
  transform: scale(1.05);
}

/* Tag superior derecho (PDF / zoom) */
.productos-cards .producto-card-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  color: var(--primary);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .35rem .55rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.productos-cards .producto-card-tag-pdf { color: var(--secondary-d2); }

/* Cuerpo de la tarjeta */
.productos-cards .producto-card-body {
  padding: 1.3rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-top: 1px solid rgba(var(--primary-rgb), .08);
}

/* Título = marca: prominente, tipografía "logo" */
.productos-cards .producto-card-titulo {
  font-family: 'Orbitron', 'Montserrat', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--primary) !important;
  margin: 0 0 .6rem;
  line-height: 1.2;
}

.productos-cards .producto-card-desc {
  color: #5a6b73;
  font-size: .87rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
  flex: 1 1 auto;
}
.productos-cards .producto-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--primary);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: auto;
  transition: color .25s ease, gap .25s ease;
}
.productos-cards .producto-card:hover .producto-card-cta {
  color: var(--secondary-d2);
  gap: .7rem;
}
.productos-cards .producto-card-cta i {
  transition: transform .25s ease;
}
.productos-cards .producto-card:hover .producto-card-cta i {
  transform: translateX(3px);
}

/* Botón externo: Catálogo del fabricante (fuera del enlace principal) */
.productos-cards .producto-card-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  background: #fff;
  color: var(--primary) !important;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-top: 1px solid rgba(var(--primary-rgb), .12);
  transition: background-color .25s ease, color .25s ease;
}
.productos-cards .producto-card-marca i { font-size: .9em; }
.productos-cards .producto-card-marca:hover {
  background: var(--primary);
  color: #fff !important;
}

/* CTA inferior — bloque de cierre del catálogo */
.catalogo-cta {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .06) 0%, rgba(var(--secondary-rgb), .06) 100%);
  border: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 18px;
}
.catalogo-cta h3 { color: var(--primary); font-weight: 800; }

@media (max-width: 575px) {
  .productos-cards .producto-card-media { aspect-ratio: 1 / 1; padding: 1rem; }
  .productos-cards .producto-card-body { padding: 1rem 1.1rem 1.2rem; }
  .productos-cards .producto-card-titulo { font-size: 1.15rem; }
  .productos-cards .producto-card-desc { font-size: .82rem; }
}

/* =========================================================
   FICHA DE PRODUCTO (productos_fic.tpl)
   Galería a la izquierda, tarjeta de info + CTA a la derecha.
   ========================================================= */

.producto-ficha .ficha-galeria {
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .06);
  padding: 1.2rem;
}
.producto-ficha .ficha-galeria .ficha-galeria-img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  background: linear-gradient(180deg, #f5f9fc 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 1rem;
}
.producto-ficha .ficha-galeria .ficha-thumb img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  background: #f5f9fc;
  border-radius: 8px;
  padding: .35rem;
  border: 1px solid rgba(var(--primary-rgb), .1);
}

/* Tarjeta de información lateral */
.producto-ficha .ficha-info {
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .06);
  padding: 1.5rem;
}
@media (min-width: 992px) {
  .producto-ficha .ficha-info {
    position: sticky;
    top: 100px;
  }
}

/* Chip de marca en la ficha (sustituye a la caja de precio) */
.producto-ficha .ficha-marca-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d2) 100%);
  color: #fff;
  border-radius: 999px;
  padding: .55rem 1.1rem .55rem .9rem;
  margin-bottom: 1.2rem;
  line-height: 1.1;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25);
}
.producto-ficha .ficha-marca-chip i {
  color: var(--secondary);
  font-size: 1rem;
}
.producto-ficha .ficha-marca-chip span {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .85;
}
.producto-ficha .ficha-marca-chip strong {
  font-family: 'Orbitron', 'Montserrat', sans-serif;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Lista de garantías / ventajas */
.producto-ficha .ficha-features {
  margin: 0 0 1.3rem;
  padding: 0;
}
.producto-ficha .ficha-features li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .35rem 0;
  font-size: .9rem;
  color: #3d4a52;
}
.producto-ficha .ficha-features i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  margin-top: 1px;
}

/* Acciones */
.producto-ficha .ficha-acciones .btn { font-weight: 700; }
.producto-ficha .btn-outline.btn-primary {
  background: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
}
.producto-ficha .btn-outline.btn-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
}
.producto-ficha .btn-outline.btn-danger {
  background: transparent !important;
  color: #d9342b !important;
  border: 2px solid #d9342b !important;
}
.producto-ficha .btn-outline.btn-danger:hover {
  background: #d9342b !important;
  color: #fff !important;
}
.producto-ficha .btn-outline.btn-secondary {
  background: transparent !important;
  color: #5a6b73 !important;
  border: 2px solid #c9d2d8 !important;
}
.producto-ficha .btn-outline.btn-secondary:hover {
  background: #5a6b73 !important;
  color: #fff !important;
  border-color: #5a6b73 !important;
}

/* Contacto telefónico */
.producto-ficha .ficha-contacto {
  border-top: 1px dashed rgba(var(--primary-rgb), .18);
}
.producto-ficha .ficha-tel {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary) !important;
  text-decoration: none !important;
  letter-spacing: .02em;
}
.producto-ficha .ficha-tel:hover { color: var(--secondary-d2) !important; }
.producto-ficha .ficha-wa {
  display: inline-block;
  font-size: .92rem;
  font-weight: 700;
  color: #25D366 !important;
  text-decoration: none !important;
}
.producto-ficha .ficha-wa:hover { color: #128C7E !important; }

/* Descripción completa */
.producto-ficha .ficha-descripcion {
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), .1);
  border-radius: 16px;
  padding: 1.8rem 1.8rem 1.5rem;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), .04);
}
.producto-ficha .ficha-descripcion-titulo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 1rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid rgba(var(--primary-rgb), .12);
}
.producto-ficha .ficha-descripcion-cuerpo { color: #3d4a52; line-height: 1.65; }
.producto-ficha .ficha-descripcion-cuerpo p { margin-bottom: .8rem; }
.producto-ficha .ficha-descripcion-cuerpo strong { color: var(--primary); }
.producto-ficha .ficha-descripcion-cuerpo ul { padding-left: 1.2rem; }
.producto-ficha .ficha-descripcion-cuerpo li { padding: .2rem 0; }

/* Video iframe wrap */
.producto-ficha .ficha-video-wrap {
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

@media (max-width: 575px) {
  .producto-ficha .ficha-descripcion { padding: 1.3rem 1.2rem; }
  .producto-ficha .ficha-descripcion-titulo { font-size: 1.2rem; }
}