/* ============================================================================
   QUÍMICAS ALMARAZ (QA) — WordPress Theme Stylesheet
   Version: 2.0.0
   Theme URI: https://quimicasalmaraz.com
   Description: Custom CSS para WordPress — Químicas Almaraz (QA)

   Paleta derivada del logotipo:
   - Q circular: degradado teal/verde-azulado
   - A triangular: azul marino profundo

   Compatibilidad: WordPress 6.x, Elementor, WooCommerce, CF7
   Inspirado en: Brenntag, Fluidra, Veolia, SUEZ
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   0. WEB FONTS
   ───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* Cabinet Grotesk (self-hosted) — descomentar si se dispone de los ficheros */
/*
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
*/


/* ─────────────────────────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES (Design Tokens)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Colores primarios (del logotipo) ── */
  --qa-navy:            #0B1D3A;
  --qa-navy-deep:       #061225;
  --qa-navy-light:      #142D52;
  --qa-navy-rgb:        11, 29, 58;

  --qa-teal:            #00B4A0;
  --qa-teal-dark:       #009688;
  --qa-teal-light:      #2DD4BF;
  --qa-teal-bright:     #5EEAD4;
  --qa-teal-rgb:        0, 180, 160;

  --qa-cyan:            #06B6D4;
  --qa-cyan-light:      #67E8F9;

  /* ── Colores secundarios ── */
  --qa-emerald:         #10B981;
  --qa-emerald-light:   #34D399;

  /* ── Colores de acento ── */
  --qa-gold:            #F59E0B;
  --qa-gold-light:      #FCD34D;
  --qa-amber:           #D97706;

  /* ── Neutros ── */
  --qa-white:           #FFFFFF;
  --qa-gray-50:         #F8FAFC;
  --qa-gray-100:        #F1F5F9;
  --qa-gray-200:        #E2E8F0;
  --qa-gray-300:        #CBD5E1;
  --qa-gray-400:        #94A3B8;
  --qa-gray-500:        #64748B;
  --qa-gray-600:        #475569;
  --qa-gray-700:        #334155;
  --qa-gray-800:        #1E293B;
  --qa-gray-900:        #0F172A;

  /* ── Semánticos ── */
  --qa-success:         #059669;
  --qa-warning:         #D97706;
  --qa-danger:          #DC2626;
  --qa-info:            var(--qa-cyan);

  /* ── Gradientes ── */
  --qa-gradient-brand:     linear-gradient(135deg, var(--qa-teal) 0%, var(--qa-cyan) 50%, var(--qa-teal-light) 100%);
  --qa-gradient-navy:      linear-gradient(135deg, var(--qa-navy-deep) 0%, var(--qa-navy) 50%, var(--qa-navy-light) 100%);
  --qa-gradient-hero:      linear-gradient(160deg, var(--qa-navy-deep) 0%, var(--qa-navy) 40%, rgba(0, 180, 160, 0.15) 100%);
  --qa-gradient-teal:      linear-gradient(135deg, var(--qa-teal-dark) 0%, var(--qa-teal) 50%, var(--qa-teal-light) 100%);
  --qa-gradient-overlay:   linear-gradient(180deg, rgba(var(--qa-navy-rgb), 0.85) 0%, rgba(var(--qa-navy-rgb), 0.4) 100%);
  --qa-gradient-cta:       linear-gradient(135deg, var(--qa-teal) 0%, var(--qa-emerald) 100%);
  --qa-gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --qa-gradient-water:     linear-gradient(180deg, #0B1D3A 0%, #0E4D64 40%, #00B4A0 100%);
  --qa-gradient-section:   linear-gradient(180deg, var(--qa-gray-50) 0%, var(--qa-white) 100%);

  /* ── Tipografía ── */
  --qa-font-display:    'Cabinet Grotesk', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --qa-font-body:       'Inter', 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --qa-font-mono:       'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --qa-text-xs:         clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --qa-text-sm:         clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --qa-text-base:       clamp(0.938rem, 0.875rem + 0.3vw, 1.063rem);
  --qa-text-lg:         clamp(1.063rem, 0.95rem + 0.5vw, 1.25rem);
  --qa-text-xl:         clamp(1.188rem, 1rem + 0.8vw, 1.5rem);
  --qa-text-2xl:        clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --qa-text-3xl:        clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --qa-text-4xl:        clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  --qa-text-5xl:        clamp(2.5rem, 1.6rem + 3.5vw, 4.25rem);
  --qa-text-6xl:        clamp(3rem, 1.8rem + 5vw, 5.5rem);

  /* ── Espaciado ── */
  --qa-space-1:         0.25rem;
  --qa-space-2:         0.5rem;
  --qa-space-3:         0.75rem;
  --qa-space-4:         1rem;
  --qa-space-5:         1.25rem;
  --qa-space-6:         1.5rem;
  --qa-space-8:         2rem;
  --qa-space-10:        2.5rem;
  --qa-space-12:        3rem;
  --qa-space-16:        4rem;
  --qa-space-20:        5rem;
  --qa-space-24:        6rem;
  --qa-space-32:        8rem;
  --qa-space-section:   clamp(4rem, 3rem + 5vw, 8rem);

  /* ── Bordes y radios ── */
  --qa-radius-sm:       0.375rem;
  --qa-radius-md:       0.625rem;
  --qa-radius-lg:       1rem;
  --qa-radius-xl:       1.5rem;
  --qa-radius-2xl:      2rem;
  --qa-radius-full:     9999px;

  /* ── Sombras ── */
  --qa-shadow-xs:       0 1px 2px rgba(var(--qa-navy-rgb), 0.05);
  --qa-shadow-sm:       0 1px 3px rgba(var(--qa-navy-rgb), 0.08), 0 1px 2px rgba(var(--qa-navy-rgb), 0.04);
  --qa-shadow-md:       0 4px 6px -1px rgba(var(--qa-navy-rgb), 0.08), 0 2px 4px -2px rgba(var(--qa-navy-rgb), 0.04);
  --qa-shadow-lg:       0 10px 15px -3px rgba(var(--qa-navy-rgb), 0.08), 0 4px 6px -4px rgba(var(--qa-navy-rgb), 0.03);
  --qa-shadow-xl:       0 20px 25px -5px rgba(var(--qa-navy-rgb), 0.1), 0 8px 10px -6px rgba(var(--qa-navy-rgb), 0.04);
  --qa-shadow-2xl:      0 25px 50px -12px rgba(var(--qa-navy-rgb), 0.2);
  --qa-shadow-teal:     0 8px 30px rgba(var(--qa-teal-rgb), 0.25);
  --qa-shadow-inner:    inset 0 2px 4px rgba(var(--qa-navy-rgb), 0.06);
  --qa-shadow-glow:     0 0 20px rgba(var(--qa-teal-rgb), 0.3), 0 0 60px rgba(var(--qa-teal-rgb), 0.1);

  /* ── Transiciones ── */
  --qa-ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --qa-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --qa-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --qa-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --qa-duration-fast:   150ms;
  --qa-duration-base:   250ms;
  --qa-duration-slow:   400ms;
  --qa-duration-slower: 600ms;

  /* ── Layout ── */
  --qa-container-sm:    640px;
  --qa-container-md:    768px;
  --qa-container-lg:    1024px;
  --qa-container-xl:    1280px;
  --qa-container-2xl:   1440px;
  --qa-container-max:   1600px;

  /* ── Z-index ── */
  --qa-z-base:          1;
  --qa-z-dropdown:      100;
  --qa-z-sticky:        200;
  --qa-z-header:        300;
  --qa-z-overlay:       400;
  --qa-z-modal:         500;
  --qa-z-toast:         600;
  --qa-z-tooltip:       700;

  /* ── WordPress admin bar offset ── */
  --qa-admin-bar-height: 0px;
}

/* WordPress Admin Bar: ajustar header fijo */
.admin-bar {
  --qa-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar {
    --qa-admin-bar-height: 46px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. RESET & BASE (compatible con WordPress)
   ───────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  scroll-padding-top: calc(5rem + var(--qa-admin-bar-height));
}

body,
body.custom-background {
  font-family: var(--qa-font-body);
  font-size: var(--qa-text-base);
  line-height: 1.7;
  color: var(--qa-gray-700);
  background-color: var(--qa-white);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

::selection {
  background-color: rgba(var(--qa-teal-rgb), 0.2);
  color: var(--qa-navy);
}

:focus-visible {
  outline: 2px solid var(--qa-teal);
  outline-offset: 3px;
  border-radius: var(--qa-radius-sm);
}

img,
video,
svg,
.wp-post-image,
.attachment-post-thumbnail {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--qa-teal-dark);
  text-decoration: none;
  transition: color var(--qa-duration-base) var(--qa-ease-smooth);
}

a:hover,
a:focus {
  color: var(--qa-teal);
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* WordPress: restablecer listas dentro de contenido */
.entry-content ul,
.entry-content ol,
.wp-block-list,
.comment-content ul,
.comment-content ol,
.widget ul,
.widget ol {
  margin-left: var(--qa-space-6);
  margin-bottom: var(--qa-space-4);
}

.entry-content ul,
.entry-content .wp-block-list:not(.wp-block-list-item) ul,
.comment-content ul {
  list-style: disc;
}

.entry-content ol,
.comment-content ol {
  list-style: decimal;
}

.entry-content li,
.comment-content li {
  margin-bottom: var(--qa-space-2);
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title,
.wp-block-heading {
  font-family: var(--qa-font-display);
  color: var(--qa-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1, .entry-title        { font-size: var(--qa-text-5xl); margin-bottom: var(--qa-space-6); }
h2                       { font-size: var(--qa-text-4xl); margin-bottom: var(--qa-space-5); }
h3                       { font-size: var(--qa-text-3xl); margin-bottom: var(--qa-space-4); }
h4                       { font-size: var(--qa-text-2xl); margin-bottom: var(--qa-space-3); }
h5                       { font-size: var(--qa-text-xl);  margin-bottom: var(--qa-space-3); }
h6                       { font-size: var(--qa-text-lg);  margin-bottom: var(--qa-space-2); }

p {
  margin-bottom: var(--qa-space-4);
}

.entry-content p {
  max-width: 72ch;
}

.qa-lead,
.has-large-font-size {
  font-size: var(--qa-text-xl);
  line-height: 1.6;
  color: var(--qa-gray-600);
}

.qa-display {
  font-size: var(--qa-text-6xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.qa-overline {
  font-size: var(--qa-text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--qa-teal);
  margin-bottom: var(--qa-space-3);
  display: block;
}

.qa-overline--light {
  color: var(--qa-teal-light);
}

.qa-gradient-text {
  background: var(--qa-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.qa-text-balance {
  text-wrap: balance;
}

blockquote,
.wp-block-quote {
  border-left: 4px solid var(--qa-teal);
  padding: var(--qa-space-4) var(--qa-space-6);
  margin: var(--qa-space-8) 0;
  font-size: var(--qa-text-lg);
  font-style: italic;
  color: var(--qa-gray-600);
  background: var(--qa-gray-50);
  border-radius: 0 var(--qa-radius-md) var(--qa-radius-md) 0;
}

blockquote cite,
.wp-block-quote cite,
.wp-block-quote__citation {
  display: block;
  font-size: var(--qa-text-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--qa-navy);
  margin-top: var(--qa-space-3);
}

blockquote cite::before,
.wp-block-quote cite::before {
  content: '— ';
}

/* WordPress: código y pre */
code,
.wp-block-code {
  font-family: var(--qa-font-mono);
  font-size: 0.9em;
  background: var(--qa-gray-100);
  padding: 0.15em 0.4em;
  border-radius: var(--qa-radius-sm);
  color: var(--qa-navy);
}

pre,
.wp-block-preformatted,
.wp-block-code code {
  display: block;
  padding: var(--qa-space-5);
  background: var(--qa-gray-900);
  color: var(--qa-gray-200);
  border-radius: var(--qa-radius-lg);
  overflow-x: auto;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. LAYOUT & CONTAINERS (WordPress + custom)
   ───────────────────────────────────────────────────────────────────────────── */

/* WordPress site wrapper */
/* WordPress/Divi: ocultar título auto-generado */
.page-title,
.entry-title,
header.entry-header,
.et_post_meta_wrapper,
.elementor-page-title {
  display: none !important;
}

/* Divi: ocultar header y top-header nativos (sustituidos por qa-header) */
#top-header,
#main-header {
  display: none !important;
}

/* WordPress/Divi: resetear spacing inyectado por el tema */
#main-content .container,
.site-content,
.page-content,
.entry-content,
.et_builder_inner_content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#page,
.site,
#content,
.site-content {
  width: 100%;
}

/* Contenedores propios */
.qa-container {
  width: 100%;
  max-width: var(--qa-container-xl);
  margin-inline: auto;
  padding-inline: var(--qa-space-6);
}

.qa-container--narrow  { max-width: var(--qa-container-md); }
.qa-container--wide    { max-width: var(--qa-container-2xl); }
.qa-container--full    { max-width: var(--qa-container-max); }

/* WordPress content width */
.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-cover):not(.qa-hero):not(.qa-section--full) {
  max-width: var(--qa-container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--qa-space-6);
  padding-right: var(--qa-space-6);
}

/* WordPress: Alineaciones */
.alignwide {
  max-width: var(--qa-container-2xl);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.alignleft {
  float: left;
  margin-right: var(--qa-space-6);
  margin-bottom: var(--qa-space-4);
}

.alignright {
  float: right;
  margin-left: var(--qa-space-6);
  margin-bottom: var(--qa-space-4);
}

/* WordPress: limpieza de floats */
.entry-content::after {
  content: '';
  display: table;
  clear: both;
}

/* Secciones */
.qa-section {
  padding-block: var(--qa-space-section);
}

.qa-section--navy {
  background: var(--qa-gradient-navy);
  color: var(--qa-gray-200);
}

.qa-section--navy h2,
.qa-section--navy h3,
.qa-section--navy h4,
.qa-section--navy .entry-title,
.qa-section--navy .widget-title {
  color: var(--qa-white);
}

.qa-section--navy p,
.qa-section--navy .qa-lead {
  color: rgba(255, 255, 255, 0.65);
}

.qa-section--navy .qa-lead {
  font-size: var(--qa-text-lg);
  line-height: 1.7;
}

.qa-section--gray {
  background: var(--qa-gradient-section);
}

.qa-section--teal {
  background: var(--qa-gradient-teal);
  color: var(--qa-white);
}

.qa-section--teal h2,
.qa-section--teal h3,
.qa-section--teal h4 {
  color: var(--qa-white);
}

/* Grid system */
.qa-grid {
  display: grid;
  gap: var(--qa-space-8);
}

.qa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.qa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.qa-grid--4 { grid-template-columns: repeat(4, 1fr); }

.qa-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.qa-flex {
  display: flex;
  gap: var(--qa-space-4);
}

.qa-flex--center  { align-items: center; justify-content: center; }
.qa-flex--between { align-items: center; justify-content: space-between; }
.qa-flex--wrap    { flex-wrap: wrap; }

@media (max-width: 768px) {
  .qa-grid--2,
  .qa-grid--3,
  .qa-grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .qa-grid--3,
  .qa-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. WORDPRESS IMAGES & MEDIA
   ───────────────────────────────────────────────────────────────────────────── */

/* WP Caption */
.wp-caption,
.wp-block-image {
  max-width: 100%;
  margin-bottom: var(--qa-space-6);
}

.wp-caption img,
.wp-block-image img {
  border-radius: var(--qa-radius-lg);
  box-shadow: var(--qa-shadow-md);
}

.wp-caption-text,
.wp-block-image figcaption,
.wp-element-caption {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
  text-align: center;
  margin-top: var(--qa-space-2);
  font-style: italic;
}

/* WordPress Gallery */
.wp-block-gallery,
.gallery {
  display: grid;
  gap: var(--qa-space-4);
  margin-bottom: var(--qa-space-8);
}

.wp-block-gallery.columns-2,
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.columns-3,
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-4,
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

.wp-block-gallery .wp-block-image,
.gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--qa-radius-lg);
}

.wp-block-gallery .wp-block-image img,
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--qa-duration-slower) var(--qa-ease-smooth);
}

.wp-block-gallery .wp-block-image:hover img,
.gallery-item:hover img {
  transform: scale(1.05);
}

/* WordPress embed/video */
.wp-block-embed,
.wp-block-video {
  margin-bottom: var(--qa-space-8);
}

.wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--qa-radius-xl);
  box-shadow: var(--qa-shadow-lg);
}

.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* WordPress Separator */
hr,
.wp-block-separator {
  border: none;
  height: 2px;
  background: var(--qa-gradient-brand);
  margin: var(--qa-space-12) auto;
  max-width: 120px;
  border-radius: var(--qa-radius-full);
}

.wp-block-separator.is-style-wide {
  max-width: 100%;
  height: 1px;
  background: var(--qa-gray-200);
}

.wp-block-separator.is-style-dots {
  background: transparent;
  height: auto;
  text-align: center;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. HEADER & NAVIGATION (WordPress compatible)
   ───────────────────────────────────────────────────────────────────────────── */
.qa-header,
.site-header {
  position: fixed;
  top: var(--qa-admin-bar-height);
  left: 0;
  right: 0;
  z-index: var(--qa-z-header);
  transition: all var(--qa-duration-slow) var(--qa-ease-smooth);
}

.qa-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qa-space-5) var(--qa-space-6);
  max-width: var(--qa-container-max);
  margin-inline: auto;
}

/* Estado transparente (sobre hero) */
.qa-header--transparent {
  background: transparent;
}

.qa-header--transparent .qa-nav__link,
.qa-header--transparent .menu-item a {
  color: rgba(255, 255, 255, 0.85);
}

.qa-header--transparent .qa-nav__link:hover,
.qa-header--transparent .menu-item a:hover {
  color: var(--qa-white);
}

/* Estado sólido (al hacer scroll) */
.qa-header--solid {
  background: rgba(var(--qa-navy-rgb), 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.qa-header--solid .qa-header__inner {
  padding-block: var(--qa-space-3);
}

/* Logo */
.qa-logo,
.custom-logo-link {
  display: flex;
  align-items: center;
  gap: var(--qa-space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.qa-logo__image,
.custom-logo {
  height: 44px;
  width: auto;
  transition: transform var(--qa-duration-base) var(--qa-ease-spring);
}

.qa-logo:hover .qa-logo__image,
.custom-logo-link:hover .custom-logo {
  transform: scale(1.05);
}

.qa-logo__text,
.site-title {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-lg);
  font-weight: 700;
  color: var(--qa-white);
  letter-spacing: -0.01em;
  margin: 0;
}

.qa-logo__text span,
.site-title a {
  color: var(--qa-teal-light);
  text-decoration: none;
}

.site-description {
  font-size: var(--qa-text-xs);
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Navegación principal — clases propias */
.qa-nav {
  display: flex;
  align-items: center;
  gap: var(--qa-space-1);
}

.qa-nav__item {
  position: relative;
}

.qa-nav__link {
  display: flex;
  align-items: center;
  gap: var(--qa-space-2);
  padding: var(--qa-space-2) var(--qa-space-4);
  font-size: var(--qa-text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--qa-gray-300);
  border-radius: var(--qa-radius-md);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  white-space: nowrap;
}

.qa-nav__link:hover,
.qa-nav__link--active {
  color: var(--qa-white);
  background: rgba(255, 255, 255, 0.08);
}

.qa-nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--qa-teal);
  border-radius: var(--qa-radius-full);
}

/* Navegación WordPress: wp_nav_menu() */
.main-navigation ul,
#primary-menu,
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--qa-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation .menu-item {
  position: relative;
}

.main-navigation .menu-item a {
  display: flex;
  align-items: center;
  gap: var(--qa-space-2);
  padding: var(--qa-space-2) var(--qa-space-4);
  font-family: var(--qa-font-body);
  font-size: var(--qa-text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--qa-gray-300);
  border-radius: var(--qa-radius-md);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  white-space: nowrap;
  text-decoration: none;
}

.main-navigation .menu-item a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
  color: var(--qa-white);
  background: rgba(255, 255, 255, 0.08);
}

.main-navigation .current-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--qa-teal);
  border-radius: var(--qa-radius-full);
}

/* WordPress: submenú dropdown */
.main-navigation .sub-menu {
  position: absolute;
  top: calc(100% + var(--qa-space-2));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  padding: var(--qa-space-3);
  background: var(--qa-white);
  border-radius: var(--qa-radius-lg);
  box-shadow: var(--qa-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  border: 1px solid var(--qa-gray-100);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: var(--qa-z-dropdown);
}

.main-navigation .menu-item:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.main-navigation .sub-menu .menu-item a {
  color: var(--qa-gray-700);
  padding: var(--qa-space-3) var(--qa-space-4);
  border-radius: var(--qa-radius-md);
  font-size: var(--qa-text-sm);
  background: transparent;
}

.main-navigation .sub-menu .menu-item a:hover {
  background: var(--qa-gray-50);
  color: var(--qa-teal-dark);
  transform: translateX(4px);
}

/* WordPress: submenú nivel 3+ */
.main-navigation .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  transform: translateX(8px) translateY(0);
}

.main-navigation .sub-menu .menu-item:hover > .sub-menu {
  transform: translateX(0) translateY(0);
}

/* Dropdown propio (qa-nav) */
.qa-nav__dropdown {
  position: absolute;
  top: calc(100% + var(--qa-space-2));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  padding: var(--qa-space-3);
  background: var(--qa-white);
  border-radius: var(--qa-radius-lg);
  box-shadow: var(--qa-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  border: 1px solid var(--qa-gray-100);
}

.qa-nav__item:hover .qa-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.qa-nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--qa-space-3);
  padding: var(--qa-space-3) var(--qa-space-4);
  border-radius: var(--qa-radius-md);
  color: var(--qa-gray-700);
  font-size: var(--qa-text-sm);
  transition: all var(--qa-duration-fast) var(--qa-ease-smooth);
}

.qa-nav__dropdown-link:hover {
  background: var(--qa-gray-50);
  color: var(--qa-teal-dark);
  transform: translateX(4px);
}

.qa-nav__dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--qa-radius-md);
  background: rgba(var(--qa-teal-rgb), 0.08);
  color: var(--qa-teal);
  flex-shrink: 0;
}

/* Botón toggle submenú: oculto en desktop */
.qa-submenu-toggle {
  display: none;
}

/* Mobile menu toggle */
.qa-hamburger,
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: var(--qa-space-2);
  cursor: pointer;
  background: none;
  border: none;
}

.qa-hamburger__line {
  width: 100%;
  height: 2px;
  background: var(--qa-white);
  border-radius: var(--qa-radius-full);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  transform-origin: center;
}

.qa-hamburger--open .qa-hamburger__line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.qa-hamburger--open .qa-hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.qa-hamburger--open .qa-hamburger__line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Header actions (teléfono + CTA) */
.qa-header__actions {
  display: flex;
  align-items: center;
  gap: var(--qa-space-4);
}

.qa-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-2);
  font-size: var(--qa-text-sm);
  font-weight: 600;
  color: var(--qa-teal-light);
  padding: var(--qa-space-2) var(--qa-space-4);
  border-radius: var(--qa-radius-full);
  border: 1px solid rgba(var(--qa-teal-rgb), 0.25);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-header__phone:hover {
  background: rgba(var(--qa-teal-rgb), 0.1);
  color: var(--qa-white);
  border-color: var(--qa-teal);
}

.qa-header__phone svg {
  animation: qa-ring 2.5s ease-in-out infinite;
}

@keyframes qa-ring {
  0%, 80%, 100% { transform: rotate(0); }
  5% { transform: rotate(15deg); }
  10% { transform: rotate(-15deg); }
  15% { transform: rotate(12deg); }
  20% { transform: rotate(-8deg); }
  25% { transform: rotate(0); }
}

.qa-header__cta {
  display: flex;
  align-items: center;
  gap: var(--qa-space-3);
}

@media (max-width: 768px) {
  .qa-header__phone span { display: none; }
  .qa-header__actions { gap: var(--qa-space-2); }
}

/* Mobile nav — patrón idéntico al de Vexeo/Mainex/Ecoenergy */
@media (max-width: 1024px) {

  /* Hamburger → X fixed encima del overlay */
  .qa-header .qa-hamburger--open {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10001 !important;
    background: var(--qa-teal) !important;
    border-radius: var(--qa-radius-sm, 6px) !important;
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .qa-header .main-navigation,
  .qa-header .nav-menu,
  .qa-header .main-navigation > ul {
    display: none !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(var(--qa-navy-rgb), 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 5rem 1.5rem 2rem !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .qa-header .main-navigation.toggled,
  .qa-header .nav-menu.qa-nav--open,
  .qa-header .main-navigation > ul.qa-nav--open {
    display: flex !important;
  }

  .qa-hamburger {
    display: flex !important;
  }

  .qa-header__phone span {
    display: none !important;
  }

  .qa-header__actions .qa-btn--sm {
    display: none !important;
  }

  .qa-header .nav-menu .menu-item,
  .qa-header .nav-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .qa-header .nav-menu .menu-item > a {
    display: block !important;
    font-size: 1.1rem !important;
    padding: 0.9rem 1rem !important;
    color: var(--qa-white) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-decoration: none !important;
    background: transparent !important;
    line-height: 1.4 !important;
  }

  .qa-header .nav-menu .menu-item-has-children {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .qa-header .nav-menu .menu-item-has-children > a {
    flex: 1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .qa-submenu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--qa-white) !important;
  }

  .qa-submenu-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    transition: transform var(--qa-duration-base) var(--qa-ease-smooth);
  }

  .menu-item-has-children.qa-submenu--open > .qa-submenu-toggle svg {
    transform: rotate(180deg);
  }

  .qa-header .menu-item-has-children > .sub-menu {
    width: 100% !important;
    position: static !important;
    display: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 0 0 1rem !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .qa-header .menu-item-has-children.qa-submenu--open > .sub-menu {
    display: flex !important;
    flex-direction: column !important;
  }

  .qa-header .menu-item-has-children:hover > .sub-menu {
    display: none !important;
    animation: none !important;
  }

  .qa-header .menu-item-has-children.qa-submenu--open:hover > .sub-menu {
    display: flex !important;
  }
}

.qa-overflow-hidden { overflow: hidden !important; }


/* ─────────────────────────────────────────────────────────────────────────────
   7. HERO SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Hero principal (homepage) ── */
.qa-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--qa-navy-deep);
  margin-top: calc(-1 * (5rem + var(--qa-admin-bar-height)));
  padding-top: calc(5rem + var(--qa-admin-bar-height));
}

.qa-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.qa-hero__bg img,
.qa-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qa-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--qa-gradient-overlay);
  z-index: 1;
}

/* Efecto de partículas/moléculas de agua */
.qa-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(var(--qa-teal-rgb), 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(var(--qa-teal-rgb), 0.08) 0%, transparent 45%);
}

.qa-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--qa-container-xl);
  margin-inline: auto;
  padding: var(--qa-space-32) var(--qa-space-6) var(--qa-space-16);
}

.qa-hero__title {
  color: var(--qa-white);
  margin-bottom: var(--qa-space-6);
}

.qa-hero__title em {
  font-style: normal;
  background: var(--qa-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.qa-hero__subtitle {
  font-size: var(--qa-text-xl);
  color: rgba(255, 255, 255, 0.75);
  max-width: 55ch;
  margin-bottom: var(--qa-space-10);
  line-height: 1.6;
}

.qa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qa-space-4);
  margin-bottom: var(--qa-space-16);
}

/* Métricas flotantes en hero */
.qa-hero__metrics {
  display: flex;
  gap: var(--qa-space-10);
  padding-top: var(--qa-space-10);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.qa-hero__metric {
  text-align: left;
}

.qa-hero__metric-value {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-4xl);
  font-weight: 800;
  color: var(--qa-teal-light);
  line-height: 1;
  margin-bottom: var(--qa-space-1);
}

.qa-hero__metric-label {
  font-size: var(--qa-text-sm);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Indicador de scroll */
.qa-hero__scroll {
  position: absolute;
  bottom: var(--qa-space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qa-space-2);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--qa-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: qa-float 3s ease-in-out infinite;
}

.qa-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--qa-teal), transparent);
  animation: qa-scroll-line 2s ease-in-out infinite;
}

/* ── Hero interno (páginas interiores) ── */
.qa-hero--inner {
  min-height: 50vh;
}

.qa-hero--inner .qa-hero__content {
  padding-top: var(--qa-space-16);
}

/* ── Hero con vídeo ── */
.qa-hero--video .qa-hero__bg video {
  filter: brightness(0.6) contrast(1.1);
}

@media (max-width: 768px) {
  .qa-hero {
    min-height: 90dvh;
  }

  .qa-hero__metrics {
    flex-direction: column;
    gap: var(--qa-space-6);
  }

  .qa-hero__content {
    padding-top: var(--qa-space-24);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. BUTTONS (WordPress + custom)
   ───────────────────────────────────────────────────────────────────────────── */
.qa-btn,
.wp-block-button__link,
.wp-element-button,
.button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qa-space-2);
  padding: var(--qa-space-3) var(--qa-space-8);
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--qa-radius-full);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
}

.qa-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity var(--qa-duration-base) var(--qa-ease-smooth);
  opacity: 0;
}

.qa-btn:hover::before {
  opacity: 1;
}

/* Primary (default para WP buttons) */
.qa-btn--primary,
.wp-block-button__link,
.wp-element-button,
.button,
input[type="submit"],
button[type="submit"] {
  background: var(--qa-gradient-cta);
  color: var(--qa-white);
  box-shadow: var(--qa-shadow-md), 0 4px 20px rgba(var(--qa-teal-rgb), 0.3);
}

.qa-btn--primary::before {
  background: linear-gradient(135deg, var(--qa-teal-dark) 0%, var(--qa-teal) 100%);
}

.qa-btn--primary:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--qa-shadow-lg), 0 8px 30px rgba(var(--qa-teal-rgb), 0.4);
  color: var(--qa-white);
}

.qa-btn--primary:active,
.wp-block-button__link:active,
input[type="submit"]:active {
  transform: translateY(0);
}

/* WordPress: outline button style */
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--qa-teal-dark);
  border: 1.5px solid var(--qa-teal);
  box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover {
  background: var(--qa-teal);
  color: var(--qa-white);
  box-shadow: var(--qa-shadow-teal);
}

/* Secondary */
.qa-btn--secondary {
  background: transparent;
  color: var(--qa-white);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.qa-btn--secondary:hover {
  border-color: var(--qa-white);
  background: rgba(255, 255, 255, 0.08);
  color: var(--qa-white);
  transform: translateY(-2px);
  box-shadow: none;
}

/* Secondary dark (para fondos claros) */
.qa-btn--secondary-dark {
  background: transparent;
  color: var(--qa-navy);
  border: 1.5px solid var(--qa-gray-300);
  box-shadow: none;
}

.qa-btn--secondary-dark:hover {
  border-color: var(--qa-navy);
  background: rgba(var(--qa-navy-rgb), 0.04);
  color: var(--qa-navy);
  transform: translateY(-2px);
}

/* Navy */
.qa-btn--navy {
  background: var(--qa-navy);
  color: var(--qa-white);
  box-shadow: var(--qa-shadow-md);
}

.qa-btn--navy::before {
  background: var(--qa-navy-light);
}

.qa-btn--navy:hover {
  transform: translateY(-2px);
  box-shadow: var(--qa-shadow-lg);
  color: var(--qa-white);
}

/* Ghost */
.qa-btn--ghost {
  background: transparent;
  color: var(--qa-teal-dark);
  padding-inline: var(--qa-space-4);
  box-shadow: none;
}

.qa-btn--ghost:hover {
  background: rgba(var(--qa-teal-rgb), 0.06);
  color: var(--qa-teal);
  box-shadow: none;
}

/* Tamaños */
.qa-btn--sm { padding: var(--qa-space-2) var(--qa-space-5); font-size: var(--qa-text-xs); }
.qa-btn--lg { padding: var(--qa-space-4) var(--qa-space-10); font-size: var(--qa-text-base); }
.qa-btn--xl { padding: var(--qa-space-5) var(--qa-space-12); font-size: var(--qa-text-lg); }

/* Icono */
.qa-btn__icon {
  display: flex;
  align-items: center;
  transition: transform var(--qa-duration-base) var(--qa-ease-spring);
}

.qa-btn:hover .qa-btn__icon--right  { transform: translateX(4px); }
.qa-btn:hover .qa-btn__icon--down   { transform: translateY(3px); }


/* ─────────────────────────────────────────────────────────────────────────────
   9. CARDS
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Card base ── */
.qa-card {
  position: relative;
  background: var(--qa-white);
  border-radius: var(--qa-radius-xl);
  overflow: hidden;
  transition: all var(--qa-duration-slow) var(--qa-ease-smooth);
  border: 1px solid var(--qa-gray-100);
}

.qa-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--qa-shadow-xl);
  border-color: rgba(var(--qa-teal-rgb), 0.15);
}

.qa-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.qa-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--qa-duration-slower) var(--qa-ease-smooth);
}

.qa-card:hover .qa-card__image img {
  transform: scale(1.06);
}

.qa-card__body {
  padding: var(--qa-space-6) var(--qa-space-6) var(--qa-space-8);
}

.qa-card__tag {
  display: inline-block;
  padding: var(--qa-space-1) var(--qa-space-3);
  font-size: var(--qa-text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--qa-teal-dark);
  background: rgba(var(--qa-teal-rgb), 0.08);
  border-radius: var(--qa-radius-full);
  margin-bottom: var(--qa-space-3);
}

.qa-card__title {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-xl);
  font-weight: 700;
  color: var(--qa-navy);
  margin-bottom: var(--qa-space-3);
  line-height: 1.3;
}

.qa-card__description {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
  line-height: 1.65;
  margin-bottom: var(--qa-space-4);
}

.qa-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-2);
  font-size: var(--qa-text-sm);
  font-weight: 600;
  color: var(--qa-teal-dark);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-card__link:hover {
  gap: var(--qa-space-3);
  color: var(--qa-teal);
}

/* ── Card servicio (con icono) ── */
.qa-card--service {
  padding: var(--qa-space-8);
  text-align: left;
}

.qa-card--service .qa-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--qa-radius-lg);
  background: rgba(var(--qa-teal-rgb), 0.08);
  margin-bottom: var(--qa-space-5);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-card--service .qa-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--qa-teal);
  transition: transform var(--qa-duration-base) var(--qa-ease-spring);
}

.qa-card--service:hover .qa-card__icon {
  background: var(--qa-gradient-cta);
}

.qa-card--service:hover .qa-card__icon svg {
  color: var(--qa-white);
  transform: scale(1.1);
}

/* ── Card glass (glassmorphism) ── */
.qa-card--glass {
  background: var(--qa-gradient-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--qa-gray-200);
}

.qa-card--glass:hover {
  border-color: rgba(var(--qa-teal-rgb), 0.3);
  box-shadow: var(--qa-shadow-glow);
}

.qa-card--glass .qa-card__title       { color: var(--qa-white); }
.qa-card--glass .qa-card__description  { color: rgba(255, 255, 255, 0.65); }

/* ── Card producto ── */
.qa-card--product {
  text-align: center;
}

.qa-card--product .qa-card__image {
  aspect-ratio: 1;
  background: var(--qa-gray-50);
  padding: var(--qa-space-8);
}

.qa-card--product .qa-card__image img {
  object-fit: contain;
}

/* ── Card estadística ── */
.qa-card--stat {
  padding: var(--qa-space-8);
  text-align: center;
  border: none;
  background: transparent;
}

.qa-card--stat:hover {
  transform: none;
  box-shadow: none;
}

.qa-card--stat .qa-card__value {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-5xl);
  font-weight: 800;
  color: var(--qa-teal);
  line-height: 1;
  margin-bottom: var(--qa-space-2);
}

.qa-card--stat .qa-card__label {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Card horizontal ── */
.qa-card--horizontal {
  display: grid;
  grid-template-columns: 280px 1fr;
}

.qa-card--horizontal .qa-card__image {
  aspect-ratio: auto;
  height: 100%;
}

@media (max-width: 768px) {
  .qa-card--horizontal {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. FEATURES / SERVICIOS
   ───────────────────────────────────────────────────────────────────────────── */
.qa-features__header {
  text-align: center;
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--qa-space-16);
}

.qa-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qa-space-16);
  align-items: center;
  margin-bottom: var(--qa-space-section);
}

.qa-feature-row:nth-child(even) {
  direction: rtl;
}

.qa-feature-row:nth-child(even) > * {
  direction: ltr;
}

.qa-feature-row__image {
  border-radius: var(--qa-radius-2xl);
  overflow: hidden;
  box-shadow: var(--qa-shadow-2xl);
  position: relative;
}

.qa-feature-row__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(var(--qa-teal-rgb), 0.1);
}

.qa-feature-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.qa-feature-row__content {
  padding: var(--qa-space-4);
}

.qa-feature-row__list {
  margin-top: var(--qa-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--qa-space-3);
  margin-left: 0;
}

.qa-feature-row__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--qa-space-3);
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-600);
  list-style: none;
}

.qa-feature-row__list-item::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: var(--qa-radius-full);
  background: rgba(var(--qa-teal-rgb), 0.1);
  border: 2px solid var(--qa-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2300B4A0'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .qa-feature-row {
    grid-template-columns: 1fr;
    gap: var(--qa-space-8);
  }

  .qa-feature-row:nth-child(even) {
    direction: ltr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. ABOUT
   ───────────────────────────────────────────────────────────────────────────── */
.qa-about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--qa-space-16);
  align-items: center;
}

.qa-about__image-stack {
  position: relative;
  padding: var(--qa-space-8);
}

.qa-about__image-main {
  border-radius: var(--qa-radius-2xl);
  overflow: hidden;
  box-shadow: var(--qa-shadow-2xl);
}

.qa-about__image-accent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
  border-radius: var(--qa-radius-xl);
  overflow: hidden;
  box-shadow: var(--qa-shadow-xl);
  border: 4px solid var(--qa-white);
}

.qa-about__badge {
  position: absolute;
  top: 0;
  right: var(--qa-space-4);
  background: var(--qa-gradient-cta);
  color: var(--qa-white);
  padding: var(--qa-space-5);
  border-radius: var(--qa-radius-xl);
  text-align: center;
  box-shadow: var(--qa-shadow-teal);
}

.qa-about__badge-value {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-3xl);
  font-weight: 800;
  line-height: 1;
}

.qa-about__badge-label {
  font-size: var(--qa-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .qa-about__grid {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. COUNTERS
   ───────────────────────────────────────────────────────────────────────────── */
.qa-counters {
  background: var(--qa-gradient-navy);
  position: relative;
  overflow: hidden;
}

.qa-counters::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(var(--qa-teal-rgb), 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.qa-counters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--qa-space-8);
  text-align: center;
}

.qa-counter {
  padding: var(--qa-space-8);
  position: relative;
}

.qa-counter:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.qa-counter__value {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-5xl);
  font-weight: 800;
  color: var(--qa-teal-light);
  line-height: 1;
  margin-bottom: var(--qa-space-2);
}

.qa-counter__label {
  font-size: var(--qa-text-sm);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

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

  .qa-counter:not(:last-child)::after {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. TESTIMONIALS
   ───────────────────────────────────────────────────────────────────────────── */
.qa-testimonial {
  background: var(--qa-gray-50);
  border-radius: var(--qa-radius-2xl);
  padding: var(--qa-space-10) var(--qa-space-10) var(--qa-space-8);
  position: relative;
}

.qa-testimonial__quote-mark {
  position: absolute;
  top: var(--qa-space-6);
  left: var(--qa-space-8);
  font-family: var(--qa-font-display);
  font-size: 6rem;
  line-height: 1;
  color: rgba(var(--qa-teal-rgb), 0.12);
  pointer-events: none;
}

.qa-testimonial__text {
  font-size: var(--qa-text-lg);
  font-style: italic;
  color: var(--qa-gray-700);
  line-height: 1.7;
  margin-bottom: var(--qa-space-6);
  position: relative;
  z-index: 1;
}

.qa-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--qa-space-4);
}

.qa-testimonial__avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--qa-radius-full);
  object-fit: cover;
  border: 2px solid var(--qa-teal);
}

.qa-testimonial__name {
  font-weight: 700;
  color: var(--qa-navy);
  font-size: var(--qa-text-base);
}

.qa-testimonial__role {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. FORMS (WordPress, CF7, WooCommerce)
   ───────────────────────────────────────────────────────────────────────────── */
.qa-form__group,
.wpcf7-form-control-wrap,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
  margin-bottom: var(--qa-space-5);
}

.qa-form__label,
.comment-form label,
.wpcf7-form label {
  display: block;
  font-size: var(--qa-text-sm);
  font-weight: 600;
  color: var(--qa-gray-700);
  margin-bottom: var(--qa-space-2);
}

.qa-form__input,
.qa-form__textarea,
.qa-form__select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select,
.wpcf7-form-control:not(.wpcf7-submit),
.comment-form input:not([type="submit"]),
.comment-form textarea {
  width: 100%;
  padding: var(--qa-space-3) var(--qa-space-4);
  font-size: var(--qa-text-base);
  color: var(--qa-gray-800);
  background: var(--qa-white);
  border: 1.5px solid var(--qa-gray-200);
  border-radius: var(--qa-radius-lg);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  appearance: none;
  line-height: 1.5;
}

.qa-form__input:focus,
.qa-form__textarea:focus,
.qa-form__select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.wpcf7-form-control:not(.wpcf7-submit):focus {
  outline: none;
  border-color: var(--qa-teal);
  box-shadow: 0 0 0 3px rgba(var(--qa-teal-rgb), 0.12);
}

input::placeholder,
textarea::placeholder {
  color: var(--qa-gray-400);
}

textarea,
.qa-form__textarea {
  min-height: 140px;
  resize: vertical;
}

.qa-form__hint {
  font-size: var(--qa-text-xs);
  color: var(--qa-gray-400);
  margin-top: var(--qa-space-1);
}

.qa-form__error,
.wpcf7-not-valid-tip {
  font-size: var(--qa-text-xs);
  color: var(--qa-danger);
  margin-top: var(--qa-space-1);
}

/* CF7: mensajes de éxito/error */
.wpcf7-response-output {
  padding: var(--qa-space-4) var(--qa-space-5);
  border-radius: var(--qa-radius-lg);
  font-size: var(--qa-text-sm);
  margin-top: var(--qa-space-4);
}

.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--qa-success);
  background: rgba(5, 150, 105, 0.08);
  color: var(--qa-success);
}

.wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: var(--qa-danger);
  background: rgba(220, 38, 38, 0.08);
  color: var(--qa-danger);
}

/* WordPress: formulario de búsqueda */
.search-form {
  display: flex;
  gap: var(--qa-space-2);
}

.search-form .search-field {
  flex: 1;
}

.search-form .search-submit {
  flex-shrink: 0;
}

/* Formulario en fondo oscuro */
.qa-form--dark label,
.qa-form--dark .qa-form__label {
  color: var(--qa-gray-300);
}

.qa-form--dark input,
.qa-form--dark textarea,
.qa-form--dark select,
.qa-form--dark .qa-form__input,
.qa-form--dark .qa-form__textarea,
.qa-form--dark .qa-form__select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--qa-white);
}

.qa-form--dark input:focus,
.qa-form--dark textarea:focus,
.qa-form--dark select:focus {
  border-color: var(--qa-teal);
  box-shadow: 0 0 0 3px rgba(var(--qa-teal-rgb), 0.2);
}

.qa-form--dark input::placeholder,
.qa-form--dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. CTA / CALL TO ACTION
   ───────────────────────────────────────────────────────────────────────────── */
.qa-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--qa-radius-2xl);
  background: var(--qa-gradient-navy);
  padding: var(--qa-space-20) var(--qa-space-12);
  text-align: center;
}

.qa-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 180%;
  background: radial-gradient(circle, rgba(var(--qa-teal-rgb), 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.qa-cta::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 50%;
  height: 160%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.qa-cta__content {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin-inline: auto;
}

.qa-cta__title {
  color: var(--qa-white);
  margin-bottom: var(--qa-space-4);
}

.qa-cta__text {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--qa-text-lg);
  margin-bottom: var(--qa-space-8);
  max-width: 50ch;
  margin-inline: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. FOOTER (WordPress compatible)
   ───────────────────────────────────────────────────────────────────────────── */
.qa-footer,
.site-footer {
  background: var(--qa-navy-deep);
  color: var(--qa-gray-400);
  padding-top: var(--qa-space-20);
}

.qa-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--qa-space-12);
  padding-bottom: var(--qa-space-16);
}

.qa-footer__brand {
  max-width: 320px;
}

.qa-footer__brand .qa-logo {
  margin-bottom: var(--qa-space-5);
}

.qa-footer__brand p {
  font-size: var(--qa-text-sm);
  line-height: 1.7;
  color: var(--qa-gray-500);
}

.qa-footer__heading,
.site-footer .widget-title {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-sm);
  font-weight: 700;
  color: var(--qa-white);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--qa-space-5);
}

.qa-footer__links,
.site-footer .widget ul {
  display: flex;
  flex-direction: column;
  gap: var(--qa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qa-footer__link,
.site-footer .widget ul li a {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-2);
  text-decoration: none;
}

.qa-footer__link:hover,
.site-footer .widget ul li a:hover {
  color: var(--qa-teal-light);
  transform: translateX(3px);
}

.qa-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--qa-space-3);
  margin-bottom: var(--qa-space-4);
  font-size: var(--qa-text-sm);
}

.qa-footer__contact-icon {
  color: var(--qa-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.qa-footer__social {
  display: flex;
  gap: var(--qa-space-3);
  margin-top: var(--qa-space-6);
}

.qa-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--qa-radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--qa-gray-400);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-footer__social-link:hover {
  background: var(--qa-teal);
  color: var(--qa-white);
  transform: translateY(-3px);
}

.qa-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--qa-space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--qa-space-4);
  font-size: var(--qa-text-xs);
  color: var(--qa-gray-600);
}

.qa-footer__bottom-links {
  display: flex;
  gap: var(--qa-space-6);
}

.qa-footer__bottom-links a {
  color: var(--qa-gray-600);
  font-size: var(--qa-text-xs);
}

.qa-footer__bottom-links a:hover {
  color: var(--qa-teal-light);
}

@media (max-width: 768px) {
  .qa-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--qa-space-8);
  }

  .qa-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   17. ELEMENTOS ESPECIALES - SECTOR AGUA/QUÍMICA
   ───────────────────────────────────────────────────────────────────────────── */

/* Onda decorativa */
.qa-wave {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.qa-wave svg {
  display: block;
  width: 100%;
  height: auto;
}

.qa-wave--top {
  transform: rotate(180deg);
}

/* Efecto gota de agua */
.qa-droplet {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.qa-droplet::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--qa-gradient-brand);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(-45deg);
  opacity: 0.15;
}

.qa-droplet__icon {
  position: relative;
  z-index: 1;
  color: var(--qa-teal);
}

/* Efecto molecular (decorativo) */
.qa-molecules {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.4;
}

.qa-molecule {
  position: absolute;
  border-radius: var(--qa-radius-full);
  background: rgba(var(--qa-teal-rgb), 0.1);
  animation: qa-float-molecule 20s ease-in-out infinite;
}

.qa-molecule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 40px;
  height: 1px;
  background: rgba(var(--qa-teal-rgb), 0.15);
}

.qa-molecule--sm { width: 8px; height: 8px; }
.qa-molecule--md { width: 14px; height: 14px; }
.qa-molecule--lg { width: 22px; height: 22px; }

/* Badge certificación */
.qa-certification {
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-3);
  padding: var(--qa-space-3) var(--qa-space-5);
  background: var(--qa-white);
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius-full);
  font-size: var(--qa-text-sm);
  font-weight: 600;
  color: var(--qa-gray-700);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-certification:hover {
  box-shadow: var(--qa-shadow-md);
  border-color: var(--qa-teal);
}

.qa-certification__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--qa-radius-full);
  object-fit: contain;
}

/* Timeline / Proceso */
.qa-process {
  position: relative;
  padding-left: var(--qa-space-12);
}

.qa-process::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--qa-teal), var(--qa-cyan), var(--qa-teal-light));
  border-radius: var(--qa-radius-full);
}

.qa-process__step {
  position: relative;
  padding-bottom: var(--qa-space-10);
}

.qa-process__step:last-child {
  padding-bottom: 0;
}

.qa-process__dot {
  position: absolute;
  left: calc(-1 * var(--qa-space-12) + 8px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: var(--qa-radius-full);
  background: var(--qa-white);
  border: 3px solid var(--qa-teal);
  z-index: 1;
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-process__step:hover .qa-process__dot {
  background: var(--qa-teal);
  box-shadow: var(--qa-shadow-glow);
  transform: scale(1.3);
}

.qa-process__number {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-xs);
  font-weight: 700;
  color: var(--qa-teal);
  letter-spacing: 0.05em;
  margin-bottom: var(--qa-space-1);
}

.qa-process__title {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-xl);
  font-weight: 700;
  color: var(--qa-navy);
  margin-bottom: var(--qa-space-2);
}

.qa-process__text {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────────────────────
   18. LOGOS CLIENTES / PARTNERS
   ───────────────────────────────────────────────────────────────────────────── */
.qa-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qa-space-10);
  flex-wrap: wrap;
  padding: var(--qa-space-8) 0;
}

.qa-logos__item {
  opacity: 0.4;
  filter: grayscale(1);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-logos__item:hover {
  opacity: 1;
  filter: grayscale(0);
}

.qa-logos__item img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* Carrusel infinito */
.qa-logos-scroll {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.qa-logos-scroll__track {
  display: flex;
  gap: var(--qa-space-12);
  animation: qa-scroll-logos 30s linear infinite;
  width: max-content;
}

.qa-logos-scroll__item {
  flex-shrink: 0;
  opacity: 0.35;
  filter: grayscale(1);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-logos-scroll__item:hover {
  opacity: 1;
  filter: grayscale(0);
}

.qa-logos-scroll__item img {
  height: 36px;
  width: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   19. TABLES (WordPress + custom)
   ───────────────────────────────────────────────────────────────────────────── */
.qa-table-wrapper,
.wp-block-table {
  overflow-x: auto;
  border-radius: var(--qa-radius-xl);
  border: 1px solid var(--qa-gray-100);
  box-shadow: var(--qa-shadow-sm);
  margin-bottom: var(--qa-space-8);
}

.qa-table,
.wp-block-table table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.qa-table thead,
.wp-block-table thead,
.entry-content table thead {
  background: var(--qa-navy);
}

.qa-table th,
.wp-block-table th,
.entry-content table th {
  padding: var(--qa-space-4) var(--qa-space-5);
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-xs);
  font-weight: 700;
  color: var(--qa-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
}

.qa-table td,
.wp-block-table td,
.entry-content table td {
  padding: var(--qa-space-4) var(--qa-space-5);
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-700);
  border-bottom: 1px solid var(--qa-gray-100);
}

.qa-table tbody tr:hover,
.wp-block-table tbody tr:hover,
.entry-content table tbody tr:hover {
  background: rgba(var(--qa-teal-rgb), 0.03);
  transition: background var(--qa-duration-fast) var(--qa-ease-smooth);
}

.qa-table tbody tr:last-child td {
  border-bottom: none;
}

/* WP table striped style */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--qa-gray-50);
}


/* ─────────────────────────────────────────────────────────────────────────────
   20. TABS / ACCORDION / FAQ
   ───────────────────────────────────────────────────────────────────────────── */

/* Tabs */
.qa-tabs {
  display: flex;
  gap: var(--qa-space-1);
  padding: var(--qa-space-1);
  background: var(--qa-gray-100);
  border-radius: var(--qa-radius-full);
  width: fit-content;
}

.qa-tab {
  padding: var(--qa-space-2) var(--qa-space-6);
  font-size: var(--qa-text-sm);
  font-weight: 500;
  color: var(--qa-gray-500);
  border-radius: var(--qa-radius-full);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-tab:hover {
  color: var(--qa-gray-700);
}

.qa-tab--active {
  background: var(--qa-white);
  color: var(--qa-navy);
  box-shadow: var(--qa-shadow-sm);
  font-weight: 600;
}

.qa-tab-panel {
  display: none;
  animation: qa-fade-in var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-tab-panel--active {
  display: block;
}

/* Accordion */
.qa-accordion {
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius-xl);
  overflow: hidden;
}

.qa-accordion__item {
  border-bottom: 1px solid var(--qa-gray-100);
}

.qa-accordion__item:last-child {
  border-bottom: none;
}

.qa-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qa-space-5) var(--qa-space-6);
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-base);
  font-weight: 600;
  color: var(--qa-navy);
  text-align: left;
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  cursor: pointer;
  background: transparent;
}

.qa-accordion__trigger:hover {
  background: var(--qa-gray-50);
}

.qa-accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--qa-duration-base) var(--qa-ease-spring);
  color: var(--qa-teal);
}

.qa-accordion__item--open .qa-accordion__icon {
  transform: rotate(180deg);
}

.qa-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--qa-duration-slow) var(--qa-ease-smooth);
}

.qa-accordion__item--open .qa-accordion__content {
  max-height: 500px;
}

.qa-accordion__body {
  padding: 0 var(--qa-space-6) var(--qa-space-6);
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-600);
  line-height: 1.7;
}


/* ─────────────────────────────────────────────────────────────────────────────
   21. MODAL / LIGHTBOX
   ───────────────────────────────────────────────────────────────────────────── */
.qa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--qa-navy-rgb), 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--qa-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--qa-space-6);
  opacity: 0;
  visibility: hidden;
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

.qa-modal-overlay--open {
  opacity: 1;
  visibility: visible;
}

.qa-modal {
  background: var(--qa-white);
  border-radius: var(--qa-radius-2xl);
  box-shadow: var(--qa-shadow-2xl);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--qa-duration-base) var(--qa-ease-spring);
}

.qa-modal-overlay--open .qa-modal {
  transform: translateY(0) scale(1);
}

.qa-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qa-space-6);
  border-bottom: 1px solid var(--qa-gray-100);
}

.qa-modal__title {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-xl);
  font-weight: 700;
  color: var(--qa-navy);
  margin: 0;
}

.qa-modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--qa-radius-md);
  color: var(--qa-gray-400);
  transition: all var(--qa-duration-fast) var(--qa-ease-smooth);
}

.qa-modal__close:hover {
  background: var(--qa-gray-100);
  color: var(--qa-gray-700);
}

.qa-modal__body {
  padding: var(--qa-space-6);
}

.qa-modal__footer {
  padding: var(--qa-space-4) var(--qa-space-6);
  border-top: 1px solid var(--qa-gray-100);
  display: flex;
  justify-content: flex-end;
  gap: var(--qa-space-3);
}


/* ─────────────────────────────────────────────────────────────────────────────
   22. BREADCRUMBS & PAGINATION (WordPress)
   ───────────────────────────────────────────────────────────────────────────── */

/* Breadcrumbs (Yoast / Rank Math / custom) */
.qa-breadcrumbs,
.yoast-breadcrumbs,
.rank-math-breadcrumb,
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--qa-space-2);
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-400);
  margin-bottom: var(--qa-space-6);
  flex-wrap: wrap;
}

.qa-breadcrumbs__link,
.yoast-breadcrumbs a,
.rank-math-breadcrumb a,
.breadcrumbs a {
  color: var(--qa-gray-500);
}

.qa-breadcrumbs__link:hover,
.yoast-breadcrumbs a:hover,
.rank-math-breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--qa-teal);
}

.qa-breadcrumbs__separator {
  color: var(--qa-gray-300);
  font-size: 0.75em;
}

.qa-breadcrumbs__current {
  color: var(--qa-navy);
  font-weight: 600;
}

/* WordPress Pagination */
.qa-pagination,
.pagination,
.nav-links,
.page-numbers {
  display: flex;
  align-items: center;
  gap: var(--qa-space-1);
  flex-wrap: wrap;
}

.qa-pagination__item,
.page-numbers a,
.page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--qa-space-2);
  font-size: var(--qa-text-sm);
  font-weight: 500;
  color: var(--qa-gray-600);
  border-radius: var(--qa-radius-md);
  transition: all var(--qa-duration-fast) var(--qa-ease-smooth);
  text-decoration: none;
}

.qa-pagination__item:hover,
.page-numbers a:hover {
  background: var(--qa-gray-100);
  color: var(--qa-navy);
}

.qa-pagination__item--active,
.page-numbers .current {
  background: var(--qa-teal);
  color: var(--qa-white);
  font-weight: 700;
}

.qa-pagination__item--active:hover,
.page-numbers .current:hover {
  background: var(--qa-teal-dark);
  color: var(--qa-white);
}

/* WordPress: Post navigation */
.post-navigation,
.posts-navigation {
  margin-top: var(--qa-space-12);
  padding-top: var(--qa-space-6);
  border-top: 1px solid var(--qa-gray-200);
}

.nav-previous a,
.nav-next a {
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-2);
  font-weight: 600;
  color: var(--qa-navy);
}

.nav-previous a:hover,
.nav-next a:hover {
  color: var(--qa-teal);
}


/* ─────────────────────────────────────────────────────────────────────────────
   23. WORDPRESS COMMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.comments-area {
  margin-top: var(--qa-space-16);
  padding-top: var(--qa-space-12);
  border-top: 1px solid var(--qa-gray-200);
}

.comments-title {
  font-size: var(--qa-text-2xl);
  margin-bottom: var(--qa-space-8);
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment-list .comment {
  padding: var(--qa-space-6);
  margin-bottom: var(--qa-space-4);
  background: var(--qa-gray-50);
  border-radius: var(--qa-radius-xl);
  border: 1px solid var(--qa-gray-100);
}

.comment-list .comment .children {
  margin-left: var(--qa-space-8);
  margin-top: var(--qa-space-4);
  padding: 0;
  list-style: none;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--qa-space-3);
  margin-bottom: var(--qa-space-3);
}

.comment-author .avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--qa-radius-full);
  border: 2px solid var(--qa-teal);
}

.comment-author .fn {
  font-family: var(--qa-font-display);
  font-weight: 700;
  color: var(--qa-navy);
  font-style: normal;
}

.comment-metadata,
.comment-metadata a {
  font-size: var(--qa-text-xs);
  color: var(--qa-gray-400);
}

.comment-content p {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-600);
}

.reply a {
  font-size: var(--qa-text-xs);
  font-weight: 600;
  color: var(--qa-teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reply a:hover {
  color: var(--qa-teal);
}

/* Comment form */
.comment-respond {
  margin-top: var(--qa-space-12);
}

.comment-reply-title {
  font-size: var(--qa-text-2xl);
  margin-bottom: var(--qa-space-6);
}


/* ─────────────────────────────────────────────────────────────────────────────
   24. WORDPRESS WIDGETS / SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.widget {
  margin-bottom: var(--qa-space-8);
  padding: var(--qa-space-6);
  background: var(--qa-white);
  border-radius: var(--qa-radius-xl);
  border: 1px solid var(--qa-gray-100);
}

.widget-title {
  font-size: var(--qa-text-lg);
  margin-bottom: var(--qa-space-4);
  padding-bottom: var(--qa-space-3);
  border-bottom: 2px solid var(--qa-teal);
}

.widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget ul li {
  padding: var(--qa-space-2) 0;
  border-bottom: 1px solid var(--qa-gray-100);
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a {
  color: var(--qa-gray-600);
  font-size: var(--qa-text-sm);
  transition: color var(--qa-duration-base) var(--qa-ease-smooth);
}

.widget ul li a:hover {
  color: var(--qa-teal);
}

/* Sidebar layout */
.content-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--qa-space-12);
  align-items: start;
}

@media (max-width: 1024px) {
  .content-sidebar {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   25. WORDPRESS BLOG CARDS / ARCHIVE
   ───────────────────────────────────────────────────────────────────────────── */
.qa-posts-grid,
.blog .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--qa-space-8);
}

article.post,
article.page {
  margin-bottom: var(--qa-space-12);
}

/* WordPress: post thumbnail in archive */
.post-thumbnail {
  margin-bottom: var(--qa-space-5);
  border-radius: var(--qa-radius-xl);
  overflow: hidden;
  box-shadow: var(--qa-shadow-md);
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  transition: transform var(--qa-duration-slower) var(--qa-ease-smooth);
}

.post-thumbnail:hover img {
  transform: scale(1.04);
}

/* WordPress: entry meta */
.entry-meta {
  display: flex;
  align-items: center;
  gap: var(--qa-space-4);
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
  margin-bottom: var(--qa-space-4);
  flex-wrap: wrap;
}

.entry-meta a {
  color: var(--qa-teal-dark);
  font-weight: 500;
}

.entry-meta a:hover {
  color: var(--qa-teal);
}

.cat-links,
.tags-links {
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-2);
}

.cat-links a,
.tags-links a {
  display: inline-block;
  padding: var(--qa-space-1) var(--qa-space-3);
  background: rgba(var(--qa-teal-rgb), 0.08);
  border-radius: var(--qa-radius-full);
  font-size: var(--qa-text-xs);
  font-weight: 600;
  color: var(--qa-teal-dark);
}

.cat-links a:hover,
.tags-links a:hover {
  background: var(--qa-teal);
  color: var(--qa-white);
}

/* WordPress: entry footer */
.entry-footer {
  margin-top: var(--qa-space-8);
  padding-top: var(--qa-space-6);
  border-top: 1px solid var(--qa-gray-100);
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-500);
}


/* ─────────────────────────────────────────────────────────────────────────────
   26. WOOCOMMERCE BASIC
   ───────────────────────────────────────────────────────────────────────────── */
.woocommerce .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--qa-space-6);
}

.woocommerce .products .product {
  background: var(--qa-white);
  border-radius: var(--qa-radius-xl);
  overflow: hidden;
  border: 1px solid var(--qa-gray-100);
  transition: all var(--qa-duration-slow) var(--qa-ease-smooth);
  padding: 0;
}

.woocommerce .products .product:hover {
  transform: translateY(-4px);
  box-shadow: var(--qa-shadow-lg);
  border-color: rgba(var(--qa-teal-rgb), 0.15);
}

.woocommerce .products .product img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.woocommerce .products .product .woocommerce-loop-product__title {
  font-family: var(--qa-font-display);
  font-size: var(--qa-text-base);
  font-weight: 600;
  color: var(--qa-navy);
  padding: var(--qa-space-4) var(--qa-space-4) var(--qa-space-1);
}

.woocommerce .products .product .price {
  font-family: var(--qa-font-display);
  font-weight: 700;
  color: var(--qa-teal-dark);
  padding: 0 var(--qa-space-4);
  font-size: var(--qa-text-lg);
}

.woocommerce .products .product .button,
.woocommerce .products .product .add_to_cart_button {
  display: block;
  margin: var(--qa-space-4);
  text-align: center;
  border-radius: var(--qa-radius-full);
}

/* WooCommerce: badges */
.woocommerce .onsale {
  background: var(--qa-teal);
  color: var(--qa-white);
  font-family: var(--qa-font-display);
  font-weight: 700;
  font-size: var(--qa-text-xs);
  border-radius: var(--qa-radius-full);
  padding: var(--qa-space-1) var(--qa-space-3);
  position: absolute;
  top: var(--qa-space-3);
  left: var(--qa-space-3);
  z-index: 1;
}

/* WooCommerce: notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--qa-space-4) var(--qa-space-5);
  border-radius: var(--qa-radius-lg);
  margin-bottom: var(--qa-space-6);
  font-size: var(--qa-text-sm);
}

.woocommerce-message {
  border-left: 4px solid var(--qa-success);
  background: rgba(5, 150, 105, 0.06);
}

.woocommerce-info {
  border-left: 4px solid var(--qa-cyan);
  background: rgba(6, 182, 212, 0.06);
}

.woocommerce-error {
  border-left: 4px solid var(--qa-danger);
  background: rgba(220, 38, 38, 0.06);
}


/* ─────────────────────────────────────────────────────────────────────────────
   27. ELEMENTOR OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */

/* Forzar tipografía QA en Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--qa-font-display);
  color: var(--qa-navy);
}

.elementor-widget-text-editor {
  font-family: var(--qa-font-body);
  color: var(--qa-gray-700);
}

/* Elementor: botones con estilo QA */
.elementor-button {
  font-family: var(--qa-font-display) !important;
  font-weight: 600 !important;
  border-radius: var(--qa-radius-full) !important;
  transition: all var(--qa-duration-base) var(--qa-ease-smooth) !important;
  letter-spacing: 0.02em;
}

.elementor-button:hover {
  transform: translateY(-2px);
}

/* Elementor: iconos y icon boxes con colores QA */
.elementor-icon {
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
}

/* Elementor: secciones full-width correctamente */
.elementor-section.elementor-section-stretched,
.e-con.e-con-full {
  max-width: 100% !important;
}

/* Elementor: container gaps */
.e-con > .e-con-inner {
  max-width: var(--qa-container-xl);
  margin-inline: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   28. TOAST / NOTIFICATIONS
   ───────────────────────────────────────────────────────────────────────────── */
.qa-toast {
  position: fixed;
  bottom: var(--qa-space-6);
  right: var(--qa-space-6);
  z-index: var(--qa-z-toast);
  display: flex;
  align-items: flex-start;
  gap: var(--qa-space-3);
  padding: var(--qa-space-4) var(--qa-space-5);
  background: var(--qa-white);
  border-radius: var(--qa-radius-lg);
  box-shadow: var(--qa-shadow-xl);
  border-left: 4px solid var(--qa-teal);
  max-width: 400px;
  transform: translateX(120%);
  transition: transform var(--qa-duration-slow) var(--qa-ease-spring);
}

.qa-toast--visible  { transform: translateX(0); }
.qa-toast--error    { border-left-color: var(--qa-danger); }
.qa-toast--warning  { border-left-color: var(--qa-warning); }

.qa-toast__message {
  font-size: var(--qa-text-sm);
  color: var(--qa-gray-700);
}

.qa-toast__close {
  flex-shrink: 0;
  color: var(--qa-gray-400);
  cursor: pointer;
}


/* ─────────────────────────────────────────────────────────────────────────────
   29. BADGES / CHIPS / TAGS
   ───────────────────────────────────────────────────────────────────────────── */
.qa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--qa-space-1);
  padding: var(--qa-space-1) var(--qa-space-3);
  font-size: var(--qa-text-xs);
  font-weight: 600;
  border-radius: var(--qa-radius-full);
  white-space: nowrap;
}

.qa-badge--teal    { background: rgba(var(--qa-teal-rgb), 0.1); color: var(--qa-teal-dark); }
.qa-badge--navy    { background: rgba(var(--qa-navy-rgb), 0.08); color: var(--qa-navy); }
.qa-badge--success { background: rgba(5, 150, 105, 0.1); color: var(--qa-success); }
.qa-badge--warning { background: rgba(217, 119, 6, 0.1); color: var(--qa-warning); }
.qa-badge--danger  { background: rgba(220, 38, 38, 0.1); color: var(--qa-danger); }

.qa-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--qa-radius-full);
  background: currentColor;
}


/* ─────────────────────────────────────────────────────────────────────────────
   30. TOOLTIP
   ───────────────────────────────────────────────────────────────────────────── */
.qa-tooltip {
  position: relative;
}

.qa-tooltip__content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--qa-space-2) var(--qa-space-3);
  background: var(--qa-navy);
  color: var(--qa-white);
  font-size: var(--qa-text-xs);
  border-radius: var(--qa-radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--qa-duration-fast) var(--qa-ease-smooth);
  pointer-events: none;
  z-index: var(--qa-z-tooltip);
}

.qa-tooltip__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--qa-navy);
}

.qa-tooltip:hover .qa-tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* ─────────────────────────────────────────────────────────────────────────────
   31. ANIMATIONS
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes qa-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes qa-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes qa-fade-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes qa-fade-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes qa-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes qa-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-10px); }
}

@keyframes qa-scroll-line {
  0%       { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50.01%   { transform-origin: bottom; }
  100%     { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

@keyframes qa-scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes qa-float-molecule {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(10px, -20px) rotate(90deg); }
  50%      { transform: translate(-5px, -10px) rotate(180deg); }
  75%      { transform: translate(-15px, 5px) rotate(270deg); }
}

@keyframes qa-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes qa-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes qa-ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(2.5); opacity: 0; }
}

@keyframes qa-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Clases de animación (Intersection Observer) */
.qa-animate {
  opacity: 0;
}

.qa-animate--visible {
  animation-fill-mode: forwards;
  animation-duration: var(--qa-duration-slower);
  animation-timing-function: var(--qa-ease-out);
}

.qa-animate--fade-up.qa-animate--visible     { animation-name: qa-fade-up; }
.qa-animate--fade-left.qa-animate--visible    { animation-name: qa-fade-left; }
.qa-animate--fade-right.qa-animate--visible   { animation-name: qa-fade-right; }
.qa-animate--scale-in.qa-animate--visible     { animation-name: qa-scale-in; }
.qa-animate--fade-in.qa-animate--visible      { animation-name: qa-fade-in; }

/* Delays escalonados */
.qa-delay-1 { animation-delay: 100ms; }
.qa-delay-2 { animation-delay: 200ms; }
.qa-delay-3 { animation-delay: 300ms; }
.qa-delay-4 { animation-delay: 400ms; }
.qa-delay-5 { animation-delay: 500ms; }
.qa-delay-6 { animation-delay: 600ms; }


/* ─────────────────────────────────────────────────────────────────────────────
   32. LOADING / SKELETON
   ───────────────────────────────────────────────────────────────────────────── */
.qa-skeleton {
  background: linear-gradient(90deg,
    var(--qa-gray-100) 25%,
    var(--qa-gray-200) 50%,
    var(--qa-gray-100) 75%
  );
  background-size: 400% 100%;
  animation: qa-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--qa-radius-md);
}

.qa-skeleton--text   { height: 1em; margin-bottom: var(--qa-space-2); }
.qa-skeleton--title  { height: 2em; width: 60%; margin-bottom: var(--qa-space-4); }
.qa-skeleton--circle { width: 48px; height: 48px; border-radius: var(--qa-radius-full); }
.qa-skeleton--image  { aspect-ratio: 16/10; width: 100%; }

.qa-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--qa-gray-200);
  border-top-color: var(--qa-teal);
  border-radius: var(--qa-radius-full);
  animation: qa-spin 0.8s linear infinite;
}


/* ─────────────────────────────────────────────────────────────────────────────
   33. SCROLL-TO-TOP
   ───────────────────────────────────────────────────────────────────────────── */
.qa-scroll-top {
  position: fixed;
  bottom: var(--qa-space-8);
  right: var(--qa-space-8);
  z-index: var(--qa-z-sticky);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qa-navy);
  color: var(--qa-white);
  border-radius: var(--qa-radius-full);
  box-shadow: var(--qa-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--qa-duration-base) var(--qa-ease-smooth);
  cursor: pointer;
}

.qa-scroll-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.qa-scroll-top:hover {
  background: var(--qa-teal);
  transform: translateY(-3px);
  box-shadow: var(--qa-shadow-teal);
}


/* ─────────────────────────────────────────────────────────────────────────────
   34. UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

/* Text */
.qa-text-center { text-align: center; }
.qa-text-left   { text-align: left; }
.qa-text-right  { text-align: right; }

.qa-text-navy  { color: var(--qa-navy); }
.qa-text-teal  { color: var(--qa-teal); }
.qa-text-white { color: var(--qa-white); }
.qa-text-muted { color: var(--qa-gray-500); }
.qa-text-light { color: var(--qa-gray-400); }

.qa-font-display { font-family: var(--qa-font-display); }
.qa-font-bold    { font-weight: 700; }
.qa-font-medium  { font-weight: 500; }

/* Spacing */
.qa-mt-0  { margin-top: 0; }
.qa-mb-0  { margin-bottom: 0; }
.qa-mt-4  { margin-top: var(--qa-space-4); }
.qa-mb-4  { margin-bottom: var(--qa-space-4); }
.qa-mt-8  { margin-top: var(--qa-space-8); }
.qa-mb-8  { margin-bottom: var(--qa-space-8); }
.qa-mt-12 { margin-top: var(--qa-space-12); }
.qa-mb-12 { margin-bottom: var(--qa-space-12); }
.qa-mt-16 { margin-top: var(--qa-space-16); }
.qa-mb-16 { margin-bottom: var(--qa-space-16); }
.qa-mx-auto { margin-inline: auto; }

/* Display */
.qa-hidden       { display: none; }
.qa-block        { display: block; }
.qa-inline-block { display: inline-block; }

.qa-sr-only,
.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-width: 0;
}

.screen-reader-text:focus {
  background: var(--qa-white);
  clip: auto;
  color: var(--qa-navy);
  display: block;
  font-size: var(--qa-text-sm);
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: var(--qa-space-3) var(--qa-space-6);
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  border-radius: var(--qa-radius-md);
  box-shadow: var(--qa-shadow-lg);
}

/* Size */
.qa-w-full     { width: 100%; }
.qa-max-w-prose { max-width: 65ch; }

/* Borders */
.qa-rounded-full { border-radius: var(--qa-radius-full); }
.qa-rounded-xl   { border-radius: var(--qa-radius-xl); }
.qa-rounded-2xl  { border-radius: var(--qa-radius-2xl); }

/* Shadows */
.qa-shadow-none { box-shadow: none; }
.qa-shadow-sm   { box-shadow: var(--qa-shadow-sm); }
.qa-shadow-md   { box-shadow: var(--qa-shadow-md); }
.qa-shadow-lg   { box-shadow: var(--qa-shadow-lg); }
.qa-shadow-xl   { box-shadow: var(--qa-shadow-xl); }

/* Overflow */
.qa-overflow-hidden { overflow: hidden; }

/* Sticky */
.qa-sticky {
  position: sticky;
  top: calc(5rem + var(--qa-admin-bar-height));
}


/* ─────────────────────────────────────────────────────────────────────────────
   35. RESPONSIVE HELPERS
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .qa-hide-mobile { display: none !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .qa-hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
  .qa-hide-desktop { display: none !important; }
}

@media (max-width: 1024px) {
  .qa-hide-below-lg { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   36. PRINT STYLES
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
  .qa-header,
  .site-header,
  .qa-footer,
  .site-footer,
  .qa-scroll-top,
  .qa-toast,
  .qa-modal-overlay,
  #wpadminbar,
  .no-print {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #000;
    page-break-after: avoid;
  }

  .qa-section {
    padding-block: 1rem;
  }

  .qa-card {
    border: 1px solid #ddd;
    box-shadow: none;
    break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   37. REDUCED MOTION (Accesibilidad)
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .qa-hero__scroll,
  .qa-logos-scroll__track,
  .qa-molecule {
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   38. HIGH CONTRAST MODE (Accesibilidad)
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --qa-gray-100: #e0e0e0;
    --qa-gray-200: #c0c0c0;
    --qa-gray-400: #666666;
    --qa-gray-500: #444444;
  }

  .qa-card,
  .qa-btn--secondary,
  .qa-btn--secondary-dark,
  .qa-nav__dropdown,
  .main-navigation .sub-menu {
    border-width: 2px;
  }
}