/*
Theme Name:  Astorima NEW
Theme URI:   https://astorimacorporation.com
Author:      Astorima Corporation S.A.C.
Author URI:  https://astorimacorporation.com
Description: Tema oficial de Astorima Corporation — máquinas de coser industriales. 
             Diseño industrial moderno optimizado para rendimiento, accesibilidad y experiencia móvil superior.
Version:     2.0.0-dev
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astorima
Tags:        woocommerce, custom-menu, featured-images, full-width-template, accessible, performant, responsive
*/

/* ══════════════════════════
   VARIABLES DE MARCA - MEJORADAS
══════════════════════════ */
:root {
  /* Forzar siempre tema claro — sin dark mode automático */
  color-scheme: light;

  /* Paleta CELESTE + ROJO del logo — más viva y clara */
  --navy:       #0E63B8;   /* Azul vivo (antes navy oscuro) — legible sobre blanco y con texto blanco encima */
  --navy-dark:  #084A93;   /* Azul profundo para inicio de degradados (mantiene texto blanco) */
  --navy-mid:   #2E90EA;   /* Celeste brillante del logo — acentos y degradados */
  --red:        #F0392C;   /* Rojo del logo, más brillante */
  --red-light:  #FF5A4A;   /* Rojo claro/coral */
  --white:      #FFFFFF;
  --off-white:  #FAFBFD;  /* Más claro para mejor contraste */
  --light-blue: #E9F3FF;   /* Celeste muy claro para fondos */
  
  /* Textos con contraste GUARANTIZADO */
  --text-dark:  #0F172A;   /* Casi negro */
  --text-mid:   #334155;   /* Gris oscuro legible */
  --text-light: #64748B;   /* Gris medio legible */
  --text-muted: #94A3B8;   /* Solo para elementos NO críticos */
  
  /* Bordes más visibles */
  --border:     rgba(0,43,92,0.2);  
  
  /* Fuentes */
  --fh: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
  --fb: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --fm: 'DM Mono', 'Roboto Mono', monospace;
  
  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  
  /* Bordes y sombras */
  --border-radius: 0.5rem;
  --shadow-sm: 0 2px 8px rgba(0,43,92,0.08);
  --shadow-md: 0 12px 32px rgba(0,43,92,0.12);
  --shadow-lg: 0 20px 48px rgba(0,43,92,0.16);
}

/* ══════════════════════════
   RESET & BASE - OPTIMIZADO
══════════════════════════ */
*, *::before, *::after { 
  box-sizing: border-box; 
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 68px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body {
  font-family: var(--fb);
  background: var(--navy-dark);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

a { 
  text-decoration: none; 
  color: inherit; 
  transition: color 0.2s ease, transform 0.15s ease;
}

ul { list-style: none; }
button { 
  cursor: pointer; 
  border: none; 
  font-family: inherit;
}

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

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* Sin esto, una animación con `both` y animation-delay mantenía el
       elemento en su estado inicial (opacity:0) durante todo el retraso
       aunque la duración fuera ~0. Anular el retraso es lo que de verdad
       desactiva la animación. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════
   NAVEGACIÓN - MEJORADA
══════════════════════════ */
#site-header {
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 200;
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 3.25rem);
  height: 68px;
  background: rgba(10,73,147,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(240,57,44,0.35);
  animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  will-change: transform;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.site-branding { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
}

.site-logo-mark {
  width: 38px; 
  height: 38px; 
  background: linear-gradient(135deg, var(--red), var(--red-light));
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-family: var(--fh); 
  font-size: 21px; 
  font-weight: 900; 
  color: var(--white);
  flex-shrink: 0;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.site-logo-mark img { 
  width: 38px; 
  height: 38px; 
  object-fit: cover; 
  border-radius: var(--border-radius);
}

.site-name {
  font-family: var(--fh); 
  font-size: 21px; 
  font-weight: 800;
  letter-spacing: 0.08em; 
  color: var(--white); 
  line-height: 1;
}

.site-name small {
  display: block; 
  font-size: 9px; 
  font-weight: 300;
  letter-spacing: 0.22em; 
  color: rgba(255,255,255,0.4);
  text-transform: uppercase; 
  margin-top: 0.125rem;
}

#primary-navigation ul {
  display: flex; 
  gap: 2rem; 
  list-style: none;
  margin: 0;
  padding: 0;
}

#primary-navigation a {
  font-family: var(--fm); 
  font-size: 11px; 
  letter-spacing: 0.1em;
  text-transform: uppercase; 
  color: rgba(255,255,255,0.7);
  position: relative;
  transition: all 0.25s ease;
}

#primary-navigation a::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.3s ease;
}

#primary-navigation a:hover::after,
#primary-navigation .current-menu-item > a::after {
  width: 100%;
}

#primary-navigation a:hover,
#primary-navigation .current-menu-item > a { 
  color: var(--white); 
}

.nav-cta-btn {
  font-family: var(--fh); 
  font-size: 14px; 
  font-weight: 800;
  letter-spacing: 0.1em; 
  text-transform: uppercase;
  color: var(--white); 
  background: linear-gradient(135deg, var(--red), var(--red-light));
  border: none;
  padding: 0.6875rem 1.5rem; 
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.nav-cta-btn:hover::before {
  left: 100%;
}

.nav-cta-btn:hover { 
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ══════════════════════════
   HERO - ULTRA OPTIMIZADO
══════════════════════════ */
.hero-section {
  position: relative; 
  min-height: 100vh; 
  padding-top: 68px;
  display: flex; 
  flex-direction: column; 
  overflow: hidden;
}

.hero-bg {
  position: absolute; 
  inset: 0; 
  z-index: 0; 
  background: var(--navy-dark);
}

.hero-bg::before {
  content: '';
  position: absolute; 
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
}

.hero-bg::after {
  content: '';
  position: absolute; 
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 75% 35%, rgba(46,144,234,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 20% 75%, rgba(240,57,44,0.14) 0%, transparent 55%);
}

.hero-stripe {
  position: absolute; 
  z-index: 1;
  top: -15%; 
  right: 28%; 
  width: 4px; 
  height: 140%;
  background: linear-gradient(to bottom, var(--red), transparent);
  transform: rotate(-15deg); 
  opacity: 0.4;
  filter: blur(0.5px);
}

.hero-stripe-2 {
  position: absolute; 
  z-index: 1;
  top: -15%; 
  right: 27.5%; 
  width: 1px; 
  height: 140%;
  background: var(--red); 
  transform: rotate(-15deg); 
  opacity: 0.2;
}

.hero-watermark {
  position: absolute; 
  z-index: 1;
  bottom: -80px; 
  left: -30px;
  font-family: var(--fh); 
  font-size: clamp(280px, 35vw, 420px); 
  font-weight: 900;
  letter-spacing: -0.05em; 
  line-height: 1;
  color: rgba(255,255,255,0.02);
  pointer-events: none; 
  user-select: none; 
  white-space: nowrap;
}

.hero-inner {
  position: relative; 
  z-index: 10;
  flex: 1; 
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: stretch;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(2rem, 5vw, 5rem);
}

.hero-left {
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  padding: clamp(3rem, 8vh, 4rem) clamp(3rem, 8vw, 5rem) clamp(3rem, 8vh, 4rem) clamp(4rem, 10vw, 5rem);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.875rem;
  align-self: flex-start;
}
.hero-animated .hero-eyebrow {
  opacity: 0;
  animation: fadeUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

.eyebrow-dot {
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: var(--red);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(240,57,44,0.7); 
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 0 12px rgba(240,57,44,0); 
    transform: scale(1.1);
  }
}

.eyebrow-line {
  width: 2.25rem;
  height: 1px;
  background: rgba(255,255,255,0.25);
}


.eyebrow-text {
  font-family: var(--fm); 
  font-size: 11px;
  letter-spacing: 0.18em; 
  text-transform: uppercase; 
  color: rgba(255,255,255,0.6);
}

.hero-title {
  font-family: var(--fh); 
  line-height: 0.9; 
  letter-spacing: 0.015em; 
  margin-bottom: 0;
  position: relative;
}

.title-row { 
  display: block; 
  overflow: hidden; 
}

.title-word {
  display: inline-block;
}
/* LCP: el h1 NO lleva animación de entrada.
   Antes subía 60px desde opacity:0 dentro de .title-row (overflow:hidden),
   así que quedaba recortado e invisible durante los primeros 50-350 ms.
   Chrome no contabiliza como pintado nada con opacity:0 ni recortado,
   y este título es co-candidato a elemento LCP junto con .hero-sub.
   Debe pintarse en el primer frame. No reintroducir opacity/transform aquí. */

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

.title-word.tw-sm  { 
  font-size: clamp(56px, 6.5vw, 88px); 
  font-weight: 300; 
  color: rgba(255,255,255,0.65); 
}

.title-word.tw-lg  { 
  font-size: clamp(88px, 11vw, 148px); 
  font-weight: 900; 
  color: var(--white); 
}

.title-word.tw-red { 
  font-size: clamp(88px, 11vw, 148px); 
  font-weight: 900; 
  color: var(--red); 
  font-style: italic; 
}

.hero-sub {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
  max-width: 480px;
  margin-top: 1.75rem;
  margin-bottom: 2.75rem;
}
/* LCP: este párrafo es el elemento que Chrome mide como LCP en móvil.
   Antes: opacity:0 + 0.4s de retraso = 400 ms perdidos antes de poder pintar.
   Ahora solo se anima transform, así que el texto está visible y contabilizado
   desde el primer frame y aun así conserva el movimiento de entrada.
   NO volver a añadir opacity:0 ni animation-delay a esta regla. */
.hero-animated .hero-sub {
  animation: heroRise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes heroRise {
  from { transform: translateY(24px); }
  to   { transform: translateY(0); }
}

.hero-sub strong { 
  font-weight: 500; 
  color: rgba(255,255,255,0.85); 
}

.hero-btns {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.hero-animated .hero-btns {
  opacity: 0;
  animation: fadeUp 0.7s ease 0.5s both;
}

.btn-main {
  display: inline-flex; 
  align-items: center; 
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--red), var(--red-light));
  color: var(--white);
  font-family: var(--fh); 
  font-size: 16px; 
  font-weight: 800;
  letter-spacing: 0.08em; 
  text-transform: uppercase;
  padding: 1rem 2rem; 
  position: relative; 
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-main::before {
  content: ''; 
  position: absolute; 
  inset: 0;
  background: linear-gradient(135deg, var(--red-light), #FF6B57);
  transform: scale(0) rotate(45deg);
  transition: all 0.4s ease;
  border-radius: var(--border-radius);
}

.btn-main:hover::before { 
  transform: scale(1.2) rotate(45deg); 
}

.btn-main:hover { 
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.btn-main span {
  position: relative;
  z-index: 1;
}

/* El icono va fuera del <span>, así que sin esto el ::before del hover
   —que ocupa todo el botón— lo tapaba al escalar. Afecta también al
   botón «Escríbenos» de la portada. */
.btn-main svg {
  position: relative;
  z-index: 1;
}

.btn-ghost {
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem;
  border: 2px solid rgba(255,255,255,0.25); 
  color: rgba(255,255,255,0.75);
  font-family: var(--fh); 
  font-size: 15px; 
  font-weight: 600;
  letter-spacing: 0.07em; 
  text-transform: uppercase;
  padding: 1rem 1.5rem; 
  border-radius: var(--border-radius);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-ghost:hover { 
  border-color: rgba(255,255,255,0.8); 
  color: var(--white);
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}

.hero-stats {
  display: flex;
  gap: 0;
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.hero-stat { 
  flex: 1; 
  padding-right: 1.75rem; 
  border-right: 1px solid rgba(255,255,255,0.1); 
  margin-right: 1.75rem; 
}

.hero-stat:last-child { 
  border-right: none; 
  margin-right: 0; 
}

.hero-stat-num { 
  font-family: var(--fh); 
  font-size: clamp(42px, 5vw, 52px); 
  font-weight: 900; 
  line-height: 1; 
  margin-bottom: 0.25rem; 
}

.hero-stat-num .hi { 
  color: var(--red); 
}

.hero-stat-label { 
  font-size: 11px; 
  font-weight: 300; 
  color: rgba(255,255,255,0.4); 
  letter-spacing: 0.04em; 
  text-transform: uppercase;
}

/* Panel derecho hero - MEJORADO */
.hero-right {
  border-left: 1px solid rgba(255,255,255,0.08);
  background: rgba(7,52,110,0.62);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem;
  gap: 0.875rem;
}
.hero-animated .hero-right {
  opacity: 0;
  animation: fadeRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

@keyframes fadeRight {
  from { 
    opacity: 0; 
    transform: translateX(40px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

.panel-label {
  font-family: var(--fm); 
  font-size: 10px; 
  letter-spacing: 0.2em;
  text-transform: uppercase; 
  color: rgba(255,255,255,0.3);
  padding-bottom: 0.875rem; 
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0.25rem;
}

.hero-product-card {
  display: flex; 
  align-items: center; 
  gap: 1rem;
  border: 1px solid rgba(255,255,255,0.08); 
  border-left: 3px solid transparent;
  padding: 1.125rem; 
  cursor: pointer; 
  text-decoration: none; 
  color: inherit;
  transition: all 0.3s ease; 
  position: relative;
  border-radius: var(--border-radius);
}

.hero-product-card:hover,
.hero-product-card.featured {
  background: rgba(255,255,255,0.08); 
  border-left-color: var(--red);
  transform: translateX(8px);
}

.hero-product-card.featured {
  border-color: rgba(240,57,44,0.25);
  background: rgba(240,57,44,0.08);
  padding: 1.375rem 1.125rem;
}

.hpc-img {
  width: 64px; 
  height: 64px; 
  flex-shrink: 0;
  background: rgba(255,255,255,0.08); 
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden;
  border-radius: 0.375rem;
}

.hpc-img img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}

.hero-product-card.featured .hpc-img { 
  width: 76px; 
  height: 76px; 
}

.hpc-brand { 
  font-family: var(--fm); 
  font-size: 10px; 
  letter-spacing: 0.14em; 
  color: var(--red); 
  margin-bottom: 0.1875rem; 
}

.hpc-name { 
  font-family: var(--fh); 
  font-size: 18px; 
  font-weight: 800; 
  letter-spacing: 0.04em; 
  line-height: 1.1; 
  margin-bottom: 0.1875rem; 
}

.hero-product-card.featured .hpc-name { 
  font-size: 22px; 
}

.hpc-type { 
  font-size: 11px; 
  color: rgba(255,255,255,0.4); 
  margin-bottom: 0.5rem; 
}

.hpc-pricing { 
  display: flex; 
  align-items: baseline; 
  gap: 0.5rem; 
}

.hpc-old { 
  font-family: var(--fm); 
  font-size: 11px; 
  color: rgba(255,255,255,0.3); 
  text-decoration: line-through; 
}

.hpc-price { 
  font-family: var(--fh); 
  font-size: 22px; 
  font-weight: 800; 
}

.hero-product-card.featured .hpc-price { 
  font-size: 28px; 
}

.hpc-badge {
  position: absolute; 
  top: 0.625rem; 
  right: 0.625rem;
  background: var(--red); 
  color: var(--white);
  font-family: var(--fm); 
  font-size: 9px; 
  letter-spacing: 0.1em; 
  text-transform: uppercase;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 700;
}

.panel-see-all {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.5rem;
  border: 1px solid rgba(255,255,255,0.15); 
  padding: 0.875rem;
  font-family: var(--fh); 
  font-size: 14px; 
  font-weight: 700;
  letter-spacing: 0.08em; 
    text-transform: uppercase;
  color: rgba(255,255,255,0.5); 
  transition: all 0.3s ease; 
  margin-top: 0.25rem;
  border-radius: var(--border-radius);
}

.panel-see-all:hover { 
  border-color: var(--red); 
  color: var(--white); 
  background: rgba(240,57,44,0.12); 
  transform: translateY(-2px);
}

/* Barra inferior hero - MEJORADA */
.hero-bottom-bar {
  position: relative; 
  z-index: 10;
  display: grid; 
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(7,52,110,0.55);
  backdrop-filter: blur(20px);
}

.hbb-item {
  display: flex; 
  align-items: center; 
  gap: 1rem;
  padding: 1.375rem 2rem; 
  border-right: 1px solid rgba(255,255,255,0.08);
  opacity: 0; 
  animation: fadeUp 0.6s ease forwards;
  transition: background 0.3s ease;
}

.hbb-item:hover {
  background: rgba(240,57,44,0.1);
}

.hbb-item:nth-child(1) { animation-delay: 2s; }
.hbb-item:nth-child(2) { animation-delay: 2.1s; }
.hbb-item:nth-child(3) { animation-delay: 2.2s; }
.hbb-item:nth-child(4) { 
  animation-delay: 2.3s; 
  border-right: none; 
}

.hbb-icon {
  width: 40px; 
  height: 40px; 
  flex-shrink: 0;
  border: 2px solid rgba(240,57,44,0.5);
  border-radius: var(--border-radius);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 16px;
  background: rgba(240,57,44,0.08);
}

.hbb-name { 
  font-size: 13px; 
  font-weight: 600; 
  color: var(--white); 
  margin-bottom: 0.125rem; 
}

.hbb-desc { 
  font-size: 11px; 
  color: rgba(255,255,255,0.4); 
}

/* ══════════════════════════
   TICKER - OPTIMIZADO
══════════════════════════ */
.ticker-band { 
  background: linear-gradient(135deg, var(--red), var(--red-light));
  padding: 0.8125rem 0; 
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.ticker-track {
  display: flex; 
  animation: scrollTicker 30s linear infinite; 
  white-space: nowrap;
}

.ticker-item {
  display: inline-flex; 
  align-items: center; 
  gap: 1rem; 
  padding: 0 2rem;
  font-family: var(--fh); 
  font-size: 15px; 
  font-weight: 700;
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: var(--white);
}

.ticker-sep { 
  color: rgba(255,255,255,0.6); 
  font-weight: 300;
}

@keyframes scrollTicker { 
  0% { transform: translateX(0); } 
  100% { transform: translateX(-50%); } 
}

/* ══════════════════════════
   UTILIDADES GENERALES
══════════════════════════ */
.section-eyebrow {
  font-family: var(--fm); 
  font-size: 11px; 
  letter-spacing: 0.18em;
  text-transform: uppercase; 
  color: var(--red); 
  margin-bottom: 0.5rem;
  display: flex; 
  align-items: center; 
  gap: 0.625rem;
}

.section-eyebrow::before {
  content: ''; 
  display: block; 
  width: 1.5rem; 
  height: 2px; 
  background: var(--red);
  border-radius: 1px;
}

.section-title {
  font-family: var(--fh); 
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900; 
  line-height: 0.95; 
  letter-spacing: 0.015em;
}

.section-header {
  display: flex; 
  align-items: flex-end; 
  justify-content: space-between; 
  margin-bottom: 3.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.see-all-link {
  font-family: var(--fh); 
  font-size: 14px; 
  font-weight: 700;
  letter-spacing: 0.08em; 
  text-transform: uppercase;
  border-bottom: 2px solid var(--red); 
  padding-bottom: 0.125rem;
  white-space: nowrap; 
  position: relative;
  transition: all 0.3s ease;
}

.see-all-link::after {
  content: '→';
  margin-left: 0.25rem;
  transition: transform 0.3s ease;
}

.see-all-link:hover::after {
  transform: translateX(0.25rem);
}

/* ══════════════════════════
   SECCIÓN MARCAS - MEJORADA
══════════════════════════ */
.brands-section { 
  padding: clamp(5rem, 10vh, 6rem) clamp(3rem, 8vw, 5rem); 
  background: linear-gradient(to bottom, var(--off-white), #F9FBFD);
}

.brands-section .section-title { 
  color: var(--navy-dark); 
}

.brands-section .see-all-link { 
  color: var(--navy); 
}

.brands-section .see-all-link:hover {
  color: var(--red);
}

.brands-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--white);
}

.brand-card {
  padding: 2.25rem 1.75rem; 
  background: var(--white);
  border-right: 1px solid rgba(0,43,92,0.06);
  display: flex; 
  flex-direction: column; 
  gap: 0.625rem;
  text-decoration: none; 
  color: inherit;
  position: relative; 
  overflow: hidden; 
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-card:nth-child(5n) { border-right: none; }

.brand-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--red-light));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}

.brand-card:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.brand-card:hover { 
  background: var(--light-blue); 
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.brand-logo-box {
  width: 46px; 
  height: 46px; 
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: var(--border-radius);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-family: var(--fh); 
  font-size: 11px; 
  font-weight: 800; 
  color: var(--white); 
  letter-spacing: 0.04em;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.brand-logo-box img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}

.brand-card-name { 
  font-family: var(--fh); 
  font-size: 24px; 
  font-weight: 900; 
  letter-spacing: 0.04em; 
  color: var(--navy-dark); 
  line-height: 1.1;
}

.brand-card-qty { 
  font-family: var(--fm); 
  font-size: 11px; 
  color: var(--text-light); 
}

.brand-card-arr { 
  color: var(--red); 
  font-size: 20px; 
  margin-top: 0.25rem; 
  transition: all 0.3s ease; 
}

.brand-card:hover .brand-card-arr { 
  transform: translateX(8px) rotate(20deg); 
}

/* ══════════════════════════
   SECCIÓN PRODUCTOS - OPTIMIZADA
══════════════════════════ */
.products-section { 
  padding: clamp(5rem, 10vh, 6rem) clamp(3rem, 8vw, 5rem); 
  background: var(--white); 
}

.products-section .section-title { 
  color: var(--navy-dark); 
}

.products-section .see-all-link { 
  color: var(--navy); 
}

.products-section .see-all-link:hover { 
  color: var(--red); 
}

.products-tabs {
  display: flex; 
  gap: 0; 
  margin-bottom: 2.75rem;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.products-tabs::-webkit-scrollbar {
  display: none;
}

.ptab {
  font-family: var(--fh); 
  font-size: 15px; 
  font-weight: 700;
  letter-spacing: 0.06em; 
  text-transform: uppercase;
  padding: 0.875rem 1.75rem; 
  background: none; 
  border: none;
  color: var(--text-light); 
  cursor: pointer; 
  position: relative; 
  transition: color 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.ptab.active { 
  color: var(--navy-dark); 
}

.ptab.active::after {
  content: ''; 
  position: absolute; 
  bottom: -2px; 
  left: 0; 
  right: 0; 
  height: 3px; 
  background: linear-gradient(90deg, var(--red), var(--red-light));
}

.ptab:hover:not(.active) { 
  color: var(--navy); 
}

.products-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ══════════════════════════
   TARJETA DE PRODUCTO - PREMIUM
══════════════════════════ */
.product-card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease;
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px rgba(0,27,58,0.08);
  height: 100%;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 16px 40px rgba(0,27,58,0.16);
  z-index: 2;
}

/* ── Área de imagen ── */
.product-card-img {
  height: 220px;
  background: linear-gradient(135deg, #EEF4FF 0%, #F5F9FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  flex-shrink: 0;
}

.product-card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

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

.product-card-img .no-img {
  font-size: 52px;
  opacity: 0.25;
}

/* ── Badges ── */
.pc-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.pc-badge-sale {
  background: linear-gradient(135deg, var(--red), var(--red-light));
  color: var(--white);
}

.pc-badge-top {
  background: var(--navy-dark);
  color: var(--white);
}

.pc-brand-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--navy-dark);
  background: rgba(255,255,255,0.96);
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Cuerpo de la tarjeta ── */
.product-card-body {
  padding: 1rem 1.125rem 0.875rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pc-type {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  line-height: 1.3;
}

.pc-name {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-dark);
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Pie: precio + botón ── */
.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,27,58,0.08);
}

.pc-price-old {
  font-family: var(--fm);
  font-size: 10px;
  color: var(--text-light);
  text-decoration: line-through;
  line-height: 1.2;
}

.pc-price {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 900;
  color: var(--navy-dark);
  line-height: 1;
}

.pc-price del {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 400;
  margin-right: 0.25rem;
}

.pc-price small {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-mid);
  margin-right: 0.1rem;
}

.pc-add-btn {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border: none;
  color: var(--white);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,27,58,0.25);
  cursor: pointer;
}

.pc-add-btn:hover {
  background: linear-gradient(135deg, var(--red), var(--red-light));
  transform: scale(1.12) rotate(90deg);
  box-shadow: 0 4px 12px rgba(240,57,44,0.35);
}

/* ══════════════════════════
   SECCIÓN CATEGORÍAS - ENHANCED
══════════════════════════ */
.categories-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2rem;
  /* Padding con degradado propio (antes margin): el azul fluye sin franjas
     hacia el FAQ, que continúa en #0B57A6 */
  padding: clamp(5rem, 10vh, 6rem) 0;
  background: linear-gradient(to bottom, var(--navy-dark), #0B57A6);
}

.category-card {
  position: relative; 
  min-height: 420px;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end;
  padding: 3rem 2.25rem; 
  text-decoration: none; 
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.category-card:hover::before {
  opacity: 1;
}

.category-card:nth-child(1) { 
  background: linear-gradient(135deg, var(--navy-dark), var(--navy)); 
}

.category-card:nth-child(2) {
  background: linear-gradient(135deg, #C42618, var(--red));
}

.category-card:nth-child(3) { 
  background: linear-gradient(135deg, var(--navy-mid), var(--navy)); 
}

.category-card:hover {
  transform: translateY(-20px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.cat-ghost-num {
  position: absolute; 
  bottom: -40px; 
  right: -20px;
  font-family: var(--fh); 
  font-size: clamp(160px, 25vw, 220px); 
  font-weight: 900;
  color: rgba(255,255,255,0.05); 
  line-height: 1; 
  pointer-events: none; 
  letter-spacing: -0.06em;
}

.cat-top-bar { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 4px; 
  background: rgba(255,255,255,0.2); 
}

.cat-seq { 
  font-family: var(--fm); 
  font-size: 10px; 
  letter-spacing: 0.2em; 
  color: rgba(255,255,255,0.4); 
  margin-bottom: 0.75rem; 
}

.cat-name { 
  font-family: var(--fh); 
  font-size: clamp(42px, 6vw, 56px); 
  font-weight: 900; 
  color: var(--white); 
  line-height: 0.95; 
  letter-spacing: 0.015em; 
  margin-bottom: 0.75rem; 
  position: relative;
  z-index: 2;
}

.cat-desc { 
  font-size: 14px; 
  font-weight: 300; 
  line-height: 1.7; 
  color: rgba(255,255,255,0.55); 
  max-width: 280px; 
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.cat-go {
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem;
  font-family: var(--fh); 
  font-size: 14px; 
  font-weight: 700;
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: rgba(255,255,255,0.7); 
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.category-card:hover .cat-go { 
  color: var(--white); 
}

.cat-go-arrow { 
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
  display: inline-block; 
}

.category-card:hover .cat-go-arrow { 
  transform: translateX(12px) scale(1.2); 
}

.cat-divider { 
  position: absolute; 
  top: 0; 
  right: 0; 
  width: 1px; 
  height: 100%; 
  background: rgba(255,255,255,0.1); 
}

/* ══════════════════════════
   SERVICIOS - ENHANCED
══════════════════════════ */
.services-section {
  padding: clamp(5rem, 10vh, 6rem) clamp(3rem, 8vw, 5rem);
  background: linear-gradient(to bottom, var(--off-white), #F8FAFC);
  /* Remate rojo al final del FAQ (mismo recurso que blog-preview) */
  border-top: 4px solid var(--red);
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: clamp(3rem, 8vw, 5rem); 
  align-items: start;
}

.services-section .section-title { 
  color: var(--navy-dark); 
  margin-bottom: 1rem; 
}

.services-section .section-eyebrow { 
  color: var(--red); 
}

.services-desc { 
  font-size: 16px; 
  font-weight: 300; 
  line-height: 1.85; 
  color: var(--text-mid); 
  margin-bottom: 2.25rem; 
}

.contact-chips { 
  display: flex; 
  gap: 0.75rem; 
  flex-wrap: wrap; 
}

.contact-chip {
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem;
  font-family: var(--fh); 
  font-size: 14px; 
  font-weight: 700;
  letter-spacing: 0.05em; 
  text-transform: uppercase; 
  padding: 0.8125rem 1.375rem; 
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.chip-red { 
  background: linear-gradient(135deg, var(--red), var(--red-light)); 
  color: var(--white); 
}

.chip-red:hover { 
  background: linear-gradient(135deg, var(--red-light), #FF6B57); 
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.chip-navy { 
  background: linear-gradient(135deg, var(--navy-dark), var(--navy)); 
  color: var(--white); 
}

.chip-navy:hover { 
  background: linear-gradient(135deg, var(--navy), var(--navy-mid)); 
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.services-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1px; 
  background: var(--border); 
}

.service-item { 
  background: var(--white); 
  padding: 1.75rem 1.5rem; 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
  transition: all 0.3s ease; 
}

.service-item:hover { 
  background: var(--light-blue); 
  transform: translateY(-4px);
}

.service-icon { 
  width: 44px; 
  height: 44px; 
  background: linear-gradient(135deg, var(--navy-dark), var(--navy)); 
  border-radius: var(--border-radius);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 18px; 
  margin-bottom: 0.25rem;
  box-shadow: var(--shadow-sm);
}

.service-name { 
  font-size: 15px; 
  font-weight: 600; 
  color: var(--navy-dark); 
  margin-bottom: 0.25rem;
}

.service-text { 
  font-size: 13px; 
  font-weight: 300; 
  color: var(--text-mid); 
  line-height: 1.65; 
}

/* ══════════════════════════
   TESTIMONIOS - PREMIUM
══════════════════════════ */
.testimonials-section { 
  padding: clamp(5rem, 10vh, 6rem) clamp(3rem, 8vw, 5rem); 
  background: linear-gradient(135deg, var(--navy-dark), #052E63);
}

.testimonials-section .section-eyebrow { 
  color: rgba(255,255,255,0.4); 
}

.testimonials-section .section-eyebrow::before { 
  background: rgba(255,255,255,0.3); 
}

.testimonials-section .section-title { 
  color: var(--white); 
  margin-bottom: 3rem; 
}

.testimonials-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 1.5rem;
}

.testimonial-card { 
  background: rgba(255,255,255,0.05); 
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2rem 1.625rem; 
  display: flex; 
  flex-direction: column; 
  gap: 0.875rem; 
  transition: all 0.4s ease;
  border-radius: var(--border-radius);
}

.testimonial-card:hover { 
  background: rgba(255,255,255,0.08); 
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.testi-stars { 
  color: var(--red-light); 
  font-size: 16px; 
  letter-spacing: 0.25rem; 
}

.testi-text { 
  font-size: 15px; 
  font-weight: 300; 
  line-height: 1.75; 
  color: rgba(255,255,255,0.75); 
  flex: 1;
  font-style: italic;
}

.testi-author { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
  padding-top: 0.875rem; 
  border-top: 1px solid rgba(255,255,255,0.08); 
}

.testi-avatar {
  width: 42px; 
  height: 42px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, var(--red), var(--red-light));
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-family: var(--fh); 
  font-size: 14px; 
  font-weight: 800; 
  color: var(--white); 
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.testi-author-name { 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--white); 
}

.testi-author-role { 
  font-size: 11px; 
  color: rgba(255,255,255,0.4); 
  margin-top: 0.0625rem; 
}

/* ══════════════════════════
   WOOCOMMERCE - TOTALMENTE OPTIMIZADO
══════════════════════════ */
.woocommerce-page { 
  background: var(--off-white); 
}

.woocommerce-page main { 
  padding-top: 68px; 
}

.woo-shop-header {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  padding: 4rem 5rem 3rem;
  border-bottom: 4px solid var(--red);
  position: relative;
  overflow: hidden;
}

.woo-shop-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--red-light), var(--red));
}

.woo-shop-header h1 {
  font-family: var(--fh); 
  font-size: clamp(52px, 7vw, 88px); 
  font-weight: 900;
  color: var(--white); 
  letter-spacing: 0.025em;
  margin: 0;
  position: relative;
  z-index: 2;
}

ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce-page ul.products.columns-2,
.woocommerce-page ul.products.columns-3,
.woocommerce-page ul.products.columns-4,
.woocommerce-page ul.products.columns-5 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  padding: clamp(2rem, 5vh, 3rem) clamp(2rem, 5vw, 4rem) !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
  align-items: start !important;
}

/* ──────────────────────────────────────────────────────────────
   El hueco de la primera casilla

   WooCommerce añade ::before y ::after a ul.products como clearfix
   de la época de los floats. Al convertir la lista en rejilla, esos
   dos pseudo-elementos pasan a ser CELDAS: el ::before ocupa la
   primera y empuja todos los productos una posición.

   Se nota en el catálogo, en cada categoría, en cada marca y en los
   relacionados: la primera fila aparece con un hueco a la izquierda
   y el último producto baja de fila solo.
   ────────────────────────────────────────────────────────────── */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product {
  background: var(--white) !important;
  color: var(--text-dark) !important;
  /* Anular width/margin/float que WooCommerce pone con .columns-X */
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 2px 12px rgba(0,27,58,0.08) !important;
  overflow: hidden !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-12px) scale(1.02) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 2 !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
  aspect-ratio: 4/3 !important; 
  object-fit: contain !important;
  background: linear-gradient(135deg, var(--light-blue), #F0F7FF) !important; 
  padding: 1rem !important;
  border-radius: var(--border-radius) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fb) !important; 
  font-size: 15px !important;
  font-weight: 600 !important; 
  color: var(--text-dark) !important; 
  padding: 1.25rem 1.25rem 0.5rem !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--fh) !important; 
  font-size: 26px !important;
  font-weight: 900 !important; 
  color: var(--navy-dark) !important;
  padding: 0 1.25rem 1.5rem !important;
}

.woocommerce ul.products li.product .price del {
  font-size: 14px !important; 
  color: var(--text-light) !important; 
  opacity: 1 !important;
  margin-right: 0.5rem;
}

.woocommerce ul.products li.product a.button {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy)) !important; 
  color: var(--white) !important;
  font-family: var(--fh) !important; 
  font-size: 14px !important;
  font-weight: 700 !important; 
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important; 
  border-radius: var(--border-radius) !important;
  transition: all 0.3s ease !important;
  margin: 0 1.25rem 1.5rem !important;
  padding: 1rem !important;
  width: calc(100% - 2.5rem) !important;
  text-align: center !important;
  box-shadow: var(--shadow-sm) !important;
}

.woocommerce ul.products li.product a.button:hover { 
  background: linear-gradient(135deg, var(--red), var(--red-light)) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.woocommerce .woocommerce-breadcrumb { 
  padding: 1.25rem 5rem 0; 
  font-family: var(--fm); 
  font-size: 12px; 
  color: var(--text-light); 
  letter-spacing: 0.06em; 
}

.woocommerce span.onsale {
  background: linear-gradient(135deg, var(--red), var(--red-light)) !important; 
  color: var(--white) !important;
  font-family: var(--fm) !important; 
  font-size: 11px !important;
  letter-spacing: 0.12em !important; 
  border-radius: 0.25rem !important;
  min-height: auto !important; 
  min-width: auto !important; 
  padding: 0.375rem 0.75rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  top: 1rem !important;
  left: 1rem !important;
}

/* Producto individual */
.woocommerce div.product { 
  padding: clamp(4rem, 10vh, 5rem) clamp(3rem, 8vw, 5rem); 
  background: var(--off-white);
}

.woocommerce div.product .product_title {
  font-family: var(--fh) !important; 
  font-size: clamp(42px, 6vw, 72px) !important;
  font-weight: 900 !important; 
  color: var(--navy-dark) !important; 
  letter-spacing: 0.025em !important;
  margin-bottom: 1rem !important;
}

.woocommerce div.product p.price {
  font-family: var(--fh) !important; 
  font-size: clamp(36px, 5vw, 48px) !important;
  font-weight: 900 !important; 
  color: var(--navy-dark) !important;
  margin-bottom: 2rem !important;
}

.woocommerce div.product p.price del { 
  color: var(--text-light) !important; 
  font-size: 22px !important; 
  opacity: 1 !important; 
}

.woocommerce div.product .woocommerce-product-gallery__image img { 
  border: 1px solid var(--border); 
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button {
  background: linear-gradient(135deg, var(--red), var(--red-light)) !important; 
  color: var(--white) !important;
  font-family: var(--fh) !important; 
  font-size: 16px !important; 
  font-weight: 800 !important;
  letter-spacing: 0.08em !important; 
  text-transform: uppercase !important;
  border-radius: var(--border-radius) !important; 
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 1.25rem 2.5rem !important;
  border: none !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover { 
  background: linear-gradient(135deg, var(--red-light), #FF6B57) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.woocommerce-page .woocommerce { 
  padding: 0 clamp(3rem, 8vw, 5rem) clamp(4rem, 10vh, 5rem); 
  background: var(--off-white); 
}

/* ══════════════════════════
   FOOTER - ELEGANTE
══════════════════════════ */
#site-footer {
  background: linear-gradient(180deg, #083762 0%, #05264A 100%);
  padding: 4rem clamp(3rem, 8vw, 5rem) 2rem;
  border-top: 4px solid var(--red);
  position: relative;
  overflow: hidden;
}

#site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--red-light), var(--red));
}

.footer-inner { 
  display: grid; 
  grid-template-columns: 2fr 1fr 1fr 1fr; 
  gap: 3rem; 
  margin-bottom: 3rem; 
}

.footer-brand-row { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
  margin-bottom: 1rem; 
}

.footer-mark {
  width: 44px; 
  height: 44px; 
  background: linear-gradient(135deg, var(--red), var(--red-light));
  border-radius: var(--border-radius);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-family: var(--fh); 
  font-size: 24px; 
  font-weight: 900; 
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.footer-mark img { 
  width: 44px; 
  height: 44px; 
  object-fit: cover;
  border-radius: var(--border-radius);
}

.footer-site-name { 
  font-family: var(--fh); 
  font-size: 26px; 
  font-weight: 900; 
  letter-spacing: 0.06em; 
  color: var(--white); 
  line-height: 1; 
}

.footer-site-name small { 
  display: block; 
  font-size: 10px; 
  font-weight: 300; 
  letter-spacing: 0.22em; 
  color: rgba(255,255,255,0.35); 
  text-transform: uppercase; 
  margin-top: 0.0625rem; 
}

.footer-about { 
  font-size: 14px; 
  font-weight: 300; 
  line-height: 1.75; 
  color: rgba(255,255,255,0.4); 
  margin-bottom: 1.5rem; 
}

.footer-socials { 
  display: flex; 
  gap: 0.625rem; 
}

.footer-social {
  width: 40px; 
  height: 40px; 
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: rgba(255,255,255,0.4); 
  font-size: 14px; 
  text-decoration: none;
  font-family: var(--fh); 
  font-weight: 700; 
  transition: all 0.3s ease;
}

.footer-social:hover { 
  border-color: var(--red); 
  color: var(--red); 
  background: rgba(240,57,44,0.1);
  transform: translateY(-4px) scale(1.1);
}

.footer-col-title {
  font-family: var(--fh); 
  font-size: 13px; 
  font-weight: 700;
  letter-spacing: 0.12em; 
  text-transform: uppercase;
  color: rgba(255,255,255,0.5); 
  margin-bottom: 1.125rem;
  padding-bottom: 0.625rem; 
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2rem;
  height: 2px;
  background: var(--red);
}

.footer-nav-links { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 0.625rem; 
  padding: 0;
  margin: 0;
}

.footer-nav-links a { 
  font-size: 14px; 
  font-weight: 300; 
  color: rgba(255,255,255,0.4); 
  text-decoration: none; 
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0.5rem;
}

.footer-nav-links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  background: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background 0.3s ease;
}

.footer-nav-links a:hover { 
  color: rgba(255,255,255,0.9); 
  padding-left: 1rem;
}

.footer-nav-links a:hover::before {
  background: var(--red);
}

.footer-bottom {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding-top: 1.5rem; 
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--fm); 
  font-size: 12px; 
  color: rgba(255,255,255,0.25); 
  letter-spacing: 0.04em;
}

/* ══════════════════════════
   ANIMACIONES - SUAVES
══════════════════════════ */
@keyframes fadeUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* ══════════════════════════
   PÁGINAS INTERIORES
══════════════════════════ */
.page-content-wrap { 
  padding-top: 68px; 
}

.page-banner {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  padding: clamp(1.25rem, 2.5vh, 2rem) clamp(1.5rem, 5vw, 4rem);
  border-bottom: 4px solid var(--red);
}

.page-banner h1 {
  font-family: var(--fh);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.025em;
  margin: 0;
}

.page-main-content {
  background: var(--off-white);
  padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 5vh, 4rem);
  color: var(--text-dark);
}

.page-main-content h2,
.page-main-content h3 { 
  font-family: var(--fh); 
  color: var(--navy-dark); 
  font-weight: 800; 
  margin-bottom: 1rem; 
  letter-spacing: 0.02em;
}

.page-main-content h2 { font-size: clamp(28px, 4vw, 40px); }
.page-main-content h3 { font-size: clamp(22px, 3vw, 32px); }

.page-main-content p { 
  font-weight: 300; 
  line-height: 1.85; 
  color: var(--text-mid); 
  margin-bottom: 1rem; 
}

/* Scroll hint — sólo visible en móvil via media query */
.hero-scroll-hint { display: none; }

/* ══════════════════════════
   HAMBURGER & MENÚ MÓVIL
══════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}

.hamburger:hover,
.hamburger.open {
  background: var(--red);
  border-color: var(--red);
}

.hamburger span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, width 0.25s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Elementos exclusivos del drawer móvil — ocultos en desktop */
.nav-drawer-header,
.nav-drawer-cta {
  display: none;
}

/* Overlay de fondo */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.nav-overlay.visible {
  opacity: 1;
}

/* Menú móvil: drawer desde la derecha */
@media (max-width: 768px) {
  #primary-navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 10000;
    background: var(--navy-dark);
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex !important;
  }

  #primary-navigation.nav-open {
    transform: translateX(0);
  }

  /* Cabecera del panel */
  #primary-navigation::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--red);
    flex-shrink: 0;
  }

  /* Zona de logo/marca dentro del drawer */
  .nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
  }

  .nav-drawer-brand {
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    cursor: pointer;
    color: var(--white);
    font-size: 20px;
    line-height: 1;
    transition: background 0.2s ease;
    flex-shrink: 0;
  }

  .nav-drawer-close:hover {
    background: var(--red);
    border-color: var(--red);
  }

  #primary-navigation ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0.5rem 0;
    flex: 1;
  }

  #primary-navigation ul li {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  #primary-navigation.nav-open ul li {
    opacity: 1;
    transform: translateX(0);
  }

  /* Escalonado de entrada */
  #primary-navigation.nav-open ul li:nth-child(1) { transition-delay: 0.08s; }
  #primary-navigation.nav-open ul li:nth-child(2) { transition-delay: 0.13s; }
  #primary-navigation.nav-open ul li:nth-child(3) { transition-delay: 0.18s; }
  #primary-navigation.nav-open ul li:nth-child(4) { transition-delay: 0.23s; }
  #primary-navigation.nav-open ul li:nth-child(5) { transition-delay: 0.28s; }
  #primary-navigation.nav-open ul li:nth-child(6) { transition-delay: 0.33s; }

  #primary-navigation ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--fh);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
  }

  #primary-navigation ul li a::after {
    content: '›';
    display: block;
    font-size: 22px;
    font-weight: 300;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin-left: auto;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    position: static;
    bottom: auto;
  }

  #primary-navigation ul li a:hover {
    color: var(--white);
    background: rgba(255,255,255,0.04);
    padding-left: 1.6rem;
  }

  #primary-navigation ul li a:hover::after {
    opacity: 1;
    transform: translateX(4px);
  }

  #primary-navigation ul li.current-menu-item > a {
    color: var(--white);
    border-left: 3px solid var(--red);
    padding-left: calc(1.25rem - 3px);
  }

  /* CTA dentro del drawer */
  .nav-drawer-cta {
    display: block;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.07);
  }

  .nav-drawer-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--red);
    color: var(--white) !important;
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .nav-drawer-cta a:hover {
    background: #D02A1C;
    transform: translateY(-1px);
  }
}

/* ══════════════════════════
   SCROLL REVEAL
══════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ══════════════════════════
   BOTONES FLOTANTES
══════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,0.45);
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: waPulse 2.8s ease-in-out infinite;
}

.wa-float:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 10px 28px rgba(37,211,102,0.6);
  animation: none;
}

.wa-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  flex-shrink: 0;
}

@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,0.45); }
  55%       { box-shadow: 0 6px 20px rgba(37,211,102,0.45), 0 0 0 10px rgba(37,211,102,0.12); }
}

.scroll-top {
  position: fixed;
  bottom: 6.5rem;
  right: 2.125rem;
  z-index: 998;
  width: 44px;
  height: 44px;
  background: rgba(0,27,58,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.scroll-top:hover {
  background: var(--red);
  transform: translateY(-2px) scale(1.05);
}

/* ══════════════════════════
   RESPONSIVE - MÓVIL FIRST
══════════════════════════ */
@media (max-width: 1200px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { 
    position: absolute;
    top: 20%;
    right: 5%;
    width: 380px;
    height: 500px;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
  }
}

@media (max-width: 1024px) {
  #site-header { padding: 0 clamp(1.5rem, 4vw, 2.5rem); }
  .hero-left { 
    padding: 3rem clamp(1.5rem, 6vw, 3rem); 
  }
  .brands-grid { 
    grid-template-columns: repeat(3, 1fr); 
  }
  .products-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .testimonials-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .footer-inner { 
    grid-template-columns: 1fr 1fr; 
    gap: 2rem;
  }
  .brands-section, 
  .products-section, 
  .services-section,
  .testimonials-section, 
  #site-footer,
  .woocommerce div.product,
  .woocommerce-page .woocommerce { 
    padding-left: 3rem; 
    padding-right: 3rem; 
  }
}

@media (max-width: 768px) {
  .nav-cta-btn { display: none; }
  .hamburger { display: flex; }
  
  .hero-inner { 
    grid-template-columns: 1fr; 
    padding: 0 1.5rem;
  }
  .hero-right { display: none; }
  .hero-left {
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(100dvh - 68px);
  }

  .hero-eyebrow {
    align-self: center;
    margin-bottom: 1.25rem;
    justify-content: center;
  }

  .eyebrow-text {
    white-space: nowrap;
    letter-spacing: 0.12em;
  }

  .eyebrow-line {
    display: none;
  }

  .hero-sub {
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
  }

  .hero-btns {
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .btn-main,
  .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 1.0625rem 1.5rem;
    font-size: 15px;
  }

  .hero-stats {
    width: 100%;
    margin-top: 2rem;
    padding-top: 1.5rem;
    gap: 0;
  }
  .hero-bottom-bar {
    grid-template-columns: repeat(2, 1fr);
    position: relative;
  }

  .hbb-item {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
  }

  .hbb-icon {
    width: 34px;
    height: 34px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .hbb-name {
    font-size: 12px;
  }

  .hbb-desc {
    font-size: 10px;
  }
  
  .categories-section { 
    grid-template-columns: 1fr; 
    gap: 1.5rem;
  }
  
  .services-section { 
    grid-template-columns: 1fr; 
    gap: 3rem; 
  }
  
  .services-grid { 
    grid-template-columns: 1fr; 
  }
  
  .brands-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .products-grid { 
    grid-template-columns: 1fr; 
  }
  
  .testimonials-grid { 
    grid-template-columns: 1fr; 
  }
  
  .footer-inner { 
    grid-template-columns: 1fr; 
    gap: 2rem;
  }
  
  .brands-section, 
  .products-section, 
  .services-section,
  .testimonials-section, 
  #site-footer { 
    padding: 3rem 1.5rem; 
  }
  
  /* Fuentes del título reducidas para que quepan en pantalla móvil */
  .title-word.tw-sm {
    font-size: clamp(22px, 7vw, 36px);
  }

  .title-word.tw-lg,
  .title-word.tw-red {
    font-size: clamp(44px, 13.5vw, 72px);
  }

  /* Watermark más pequeño y sin desbordamiento */
  .hero-watermark {
    font-size: clamp(80px, 28vw, 140px);
    overflow: hidden;
    max-width: 100vw;
    bottom: 60px;
  }

  /* Evitar overflow horizontal en el hero */
  .hero-section {
    overflow-x: hidden;
  }

  /* Stats más compactos y legibles en móvil */
  .hero-stat-num {
    font-size: 34px;
  }

  .hero-stat {
    padding-right: 1rem;
    margin-right: 1rem;
  }

  /* Glow más intenso en móvil para mayor impacto visual */
  .hero-bg::after {
    background:
      radial-gradient(ellipse 80% 50% at 50% 20%, rgba(46,144,234,0.5) 0%, transparent 65%),
      radial-gradient(ellipse 60% 40% at 15% 85%, rgba(240,57,44,0.18) 0%, transparent 55%),
      radial-gradient(ellipse 50% 30% at 85% 70%, rgba(240,57,44,0.1) 0%, transparent 50%);
  }

  /* Scroll hint arrow */
  .hero-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-bottom: 1.25rem;
    color: rgba(255,255,255,0.25);
    font-family: var(--fm);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .hero-scroll-hint-arrow {
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(255,255,255,0.2);
    border-bottom: 2px solid rgba(255,255,255,0.2);
    transform: rotate(45deg);
    animation: scrollBounce 1.8s ease-in-out infinite;
  }

  @keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.25; }
    50% { transform: rotate(45deg) translateY(5px); opacity: 0.6; }
  }
  
  .woo-shop-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .page-banner {
    padding: 0.875rem 1.25rem;
  }

  .page-main-content {
    padding: 1.25rem 1.25rem 2.5rem;
  }
  
  .woocommerce .woocommerce-breadcrumb {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-5,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce-page ul.products.columns-2,
  .woocommerce-page ul.products.columns-3,
  .woocommerce-page ul.products.columns-4,
  .woocommerce-page ul.products.columns-5 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1rem 1rem 2rem !important;
  }

  .woocommerce .related.products,
  .woocommerce .upsells.products {
    padding: 2rem 0 1rem;
  }

  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products,
  .woocommerce-page .related.products ul.products,
  .woocommerce-page .upsells.products ul.products {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .woocommerce div.product {
    padding: 1.5rem !important;
  }

  .woocommerce ul.products li.product a.woocommerce-loop-product__link img {
    aspect-ratio: 4/3 !important;
    max-height: 260px !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px !important;
  }

  .woocommerce ul.products li.product .price {
    font-size: 24px !important;
  }

  .product-card-img {
    height: 180px;
  }

  .pc-price {
    font-size: 17px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-5,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce-page ul.products.columns-2,
  .woocommerce-page ul.products.columns-3,
  .woocommerce-page ul.products.columns-4,
  .woocommerce-page ul.products.columns-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
  }

  .woocommerce ul.products li.product a.woocommerce-loop-product__link img {
    aspect-ratio: 1/1 !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    padding: 0.875rem 0.875rem 0.375rem !important;
  }

  .woocommerce ul.products li.product .price {
    font-size: 20px !important;
    padding: 0 0.875rem 1rem !important;
  }

  .woocommerce ul.products li.product a.button {
    margin: 0 0.875rem 1rem !important;
    width: calc(100% - 1.75rem) !important;
    padding: 0.75rem !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .wa-float {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 50px;
    height: 50px;
  }
  .wa-float svg { width: 24px; height: 24px; }
  .scroll-top {
    bottom: 5.25rem;
    right: 1.375rem;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-main,
  .btn-ghost {
    justify-content: center;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .hero-stat {
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1rem;
  }
  
  .hero-stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ══════════════════════════
   CARGA RÁPIDA & PERFORMANCE
══════════════════════════ */
/* Dark mode desactivado — la página usa siempre sus colores originales */
/* color-scheme: light en :root es suficiente para la mayoría de navegadores */

/* ══════════════════════════
   WOOCOMMERCE — SHOP LAYOUT
══════════════════════════ */
.woo-shop-controls {
  padding: 1.25rem clamp(3rem, 8vw, 5rem) 0;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.woo-cat-desc {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  margin-top: 0.75rem;
  max-width: 600px;
}

.woo-header-inner {
  position: relative;
  z-index: 2;
}

.woo-shop-body {
  background: var(--off-white);
  padding: clamp(3rem, 8vh, 4rem) clamp(3rem, 8vw, 5rem);
}

/* Reset li.product cuando usamos el card custom: la tarjeta <a> ya pone fondo y color */
.woocommerce ul.products li.ast-product-item {
  background: transparent !important;
  color: var(--text-dark) !important;
  width: auto !important;
  float: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ast-product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-dark);
}

/* Ordering + result count */
.woocommerce-page .woocommerce-ordering select {
  font-family: var(--fm);
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  background: var(--white);
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
}

.woocommerce-page .woocommerce-result-count {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text-light);
}

/* Paginación tienda */
.woocommerce-page .woocommerce-pagination {
  padding: 2rem 0 0;
  display: flex;
  justify-content: center;
}

.woocommerce-page .woocommerce-pagination ul {
  display: flex;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-page .woocommerce-pagination ul li a,
.woocommerce-page .woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--fm);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  color: var(--text-mid);
  text-decoration: none;
  transition: all 0.25s ease;
  background: var(--white);
}

.woocommerce-page .woocommerce-pagination ul li a:hover,
.woocommerce-page .woocommerce-pagination ul li span.current {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--white);
}

/* Producto individual — ajustes */
.single-product-page {
  padding-top: 68px;
  background: var(--off-white);
}

.woocommerce div.product .summary {
  color: var(--text-dark) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce div.product .woocommerce-product-details__short-description li,
.woocommerce div.product .short-description,
.woocommerce div.product .short-description p {
  color: var(--text-mid) !important;
  font-family: var(--fb) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td {
  color: var(--text-dark) !important;
  font-family: var(--fb) !important;
  font-size: 14px !important;
}

.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta span,
.woocommerce div.product .product_meta a {
  color: var(--text-light) !important;
  font-family: var(--fm) !important;
  font-size: 12px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--fh) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--white) !important;
  border-radius: var(--border-radius) !important;
  padding: 2rem !important;
}

/* ══════════════════════════
   PRODUCTOS RELACIONADOS / UPSELLS (página individual)
══════════════════════════ */
.woocommerce .related.products,
.woocommerce .upsells.products {
  padding: 3rem 0 1rem;
  background: transparent;
  border-top: 1px solid var(--border);
  clear: both;
  width: 100%;
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
  font-family: var(--fh) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 900 !important;
  color: var(--navy-dark) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
}

.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 1.25rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
  align-items: start !important;
}

.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
  background: transparent !important;
  width: auto !important;
  float: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

/* Garantizar colores legibles en la tarjeta personalizada dentro de relacionados */
.woocommerce .related.products .product-card,
.woocommerce .upsells.products .product-card,
.woocommerce .related.products .ast-product-card,
.woocommerce .upsells.products .ast-product-card {
  color: var(--text-dark) !important;
  background: var(--white) !important;
}

.woocommerce .related.products .pc-name,
.woocommerce .upsells.products .pc-name {
  color: var(--text-dark) !important;
}

.woocommerce .related.products .pc-price,
.woocommerce .upsells.products .pc-price {
  color: var(--navy-dark) !important;
}

.woocommerce .related.products .pc-type,
.woocommerce .upsells.products .pc-type {
  color: var(--text-light) !important;
}

/* ══════════════════════════
   WOOCOMMERCE — RESEÑAS, VALORACIONES Y DESCRIPCIÓN
══════════════════════════ */

/* Tabs: títulos y contenido */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--off-white) !important;
  border-color: var(--border) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--white) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--text-mid) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--navy-dark) !important;
}

/* Panel de descripción */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs #tab-description {
  background: var(--white) !important;
  color: var(--text-dark) !important;
}

.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
  color: var(--text-dark) !important;
}

/* Sección de valoraciones/reseñas */
.woocommerce #reviews,
.woocommerce #reviews #comments {
  background: var(--white) !important;
  color: var(--text-dark) !important;
}

.woocommerce #reviews h2,
.woocommerce #reviews .woocommerce-Reviews-title {
  font-family: var(--fh) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 900 !important;
  color: var(--navy-dark) !important;
  letter-spacing: 0.04em !important;
}

/* Comentarios individuales */
.woocommerce #reviews .comment-text,
.woocommerce #reviews .woocommerce-review__text,
.woocommerce .comment-text p,
.woocommerce ol.commentlist li.comment .comment-text {
  background: var(--off-white) !important;
  color: var(--text-dark) !important;
  border-color: var(--border) !important;
}

.woocommerce ol.commentlist li.comment .comment-text p {
  color: var(--text-mid) !important;
}

/* Autor y fecha de la reseña */
.woocommerce .woocommerce-review__author,
.woocommerce ol.commentlist li .woocommerce-review__author {
  color: var(--navy-dark) !important;
  font-weight: 700 !important;
  font-family: var(--fb) !important;
}

.woocommerce .woocommerce-review__published-date,
.woocommerce ol.commentlist li .woocommerce-review__published-date {
  color: var(--text-light) !important;
  font-family: var(--fm) !important;
  font-size: 12px !important;
}

/* Estrellas de valoración */
.woocommerce .star-rating span,
.woocommerce .star-rating::before,
.woocommerce .woocommerce-product-rating .star-rating span {
  color: var(--red) !important;
}

.woocommerce p.stars a {
  color: var(--red) !important;
}

/* Formulario para dejar reseña */
.woocommerce #review_form #respond {
  background: var(--white) !important;
}

.woocommerce #review_form #respond label,
.woocommerce #review_form #respond p {
  color: var(--text-dark) !important;
  font-family: var(--fb) !important;
}

.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea {
  background: var(--off-white) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  font-family: var(--fb) !important;
}

.woocommerce #review_form #respond .comment-reply-title {
  font-family: var(--fh) !important;
  font-weight: 800 !important;
  color: var(--navy-dark) !important;
  font-size: clamp(20px, 2.5vw, 26px) !important;
}

/* Texto de "no hay valoraciones aún" */
.woocommerce #reviews #comments .woocommerce-noreviews,
.woocommerce p.no-comments {
  color: var(--text-light) !important;
  font-family: var(--fb) !important;
}

/* Fallback: título y precio en template por defecto de WooCommerce */
.woocommerce .related.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells.products li.product .woocommerce-loop-product__title {
  color: var(--text-dark) !important;
  font-family: var(--fb) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 1rem 1rem 0.5rem !important;
}

.woocommerce .related.products li.product .price,
.woocommerce .upsells.products li.product .price {
  color: var(--navy-dark) !important;
  font-family: var(--fh) !important;
  font-weight: 900 !important;
  padding: 0 1rem 1rem !important;
}

/* ══════════════════════════
   BLOG — PREVIEW HOMEPAGE
══════════════════════════ */
.blog-preview-section {
  padding: clamp(5rem, 10vh, 6rem) 0;
  background: linear-gradient(to bottom, #E8F0FA, #F3F8FD);
  border-top: 4px solid var(--red);
}

.blog-preview-inner {
  padding: 0 clamp(3rem, 8vw, 5rem);
}

.blog-preview-section .section-title {
  color: var(--navy-dark);
}

.blog-preview-section .section-eyebrow {
  color: var(--red);
}

.blog-header-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.blog-cta-yt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FF0000;
  color: var(--white);
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.blog-cta-yt svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.blog-cta-yt:hover {
  background: #CC0000;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.blog-preview-section .see-all-link {
  color: var(--navy);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0;
}

/* Card del blog */
.blog-card {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.blog-card-img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--light-blue), #F0F7FF);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img img {
  transform: scale(1.05);
}

.blog-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  opacity: 0.3;
}

.blog-card-cat {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  background: var(--navy-dark);
  color: var(--white);
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-weight: 700;
}

.blog-card-body {
  padding: 1.5rem 1.25rem 1.375rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.blog-card-date {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-card-title {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy-dark);
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-excerpt {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
  margin-top: 0.25rem;
  flex: 1;
}

.blog-card-read {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 0.75rem;
  display: block;
  transition: letter-spacing 0.3s ease;
}

.blog-card:hover .blog-card-read {
  letter-spacing: 0.14em;
}

/* ══════════════════════════
   BLOG — CARRUSEL (portada)
══════════════════════════ */
.blog-carousel {
  position: relative;
}

.blog-carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Espacio para la elevación y sombra de las cards sin recortarlas */
  padding: 12px 0 28px;
  margin: -12px 0 -28px;
  outline: none;
}

.blog-carousel-track::-webkit-scrollbar {
  display: none;
}

.blog-slide {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
  display: flex;
}

.blog-slide .blog-card {
  width: 100%;
}

.blog-carousel .blog-card:hover {
  transform: translateY(-6px);
}

/* Flechas */
.bc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--navy-dark);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 2;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.bc-arrow:hover {
  background: var(--red);
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

.bc-prev { left: -14px; }
.bc-next { right: -14px; }

/* Puntos de navegación */
.bc-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.bc-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(8, 74, 147, 0.22);
  cursor: pointer;
  transition: all 0.3s ease;
}

.bc-dot:hover {
  background: rgba(8, 74, 147, 0.45);
}

.bc-dot.active {
  width: 24px;
  background: var(--red);
}

/* Si todo cabe en pantalla no hay nada que rotar */
.blog-carousel.bc-static .bc-arrow,
.blog-carousel.bc-static .bc-dots {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .blog-carousel-track {
    scroll-behavior: auto;
  }
}

/* Sin posts — banner tutoriales */
.blog-no-posts {
  margin-top: 0;
}

.bnp-tutorial-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.bnp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  transition: all 0.3s ease;
}

.bnp-card:hover {
  border-color: rgba(240,57,44,0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.bnp-icon {
  font-size: 32px;
  margin-bottom: 1rem;
}

.bnp-title {
  font-family: var(--fh);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.bnp-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
}

.bnp-yt-cta {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: var(--border-radius);
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* ══════════════════════════
   BLOG — ARCHIVO (archive.php)
══════════════════════════ */
.blog-archive-page .page-banner-desc {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  margin-top: 0.75rem;
  max-width: 500px;
}

.blog-archive-body {
  background: var(--off-white);
  padding: clamp(3rem, 8vh, 4rem) clamp(3rem, 8vw, 5rem);
}

.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.blog-pagination .nav-links {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
}

.blog-pagination .nav-links a,
.blog-pagination .nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  font-family: var(--fm);
  font-size: 13px;
  color: var(--text-mid);
  text-decoration: none;
  background: var(--white);
  transition: all 0.25s ease;
}

.blog-pagination .nav-links a:hover,
.blog-pagination .nav-links .current {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--white);
}

.no-posts {
  font-size: 15px;
  color: var(--text-mid);
  text-align: center;
  padding: 3rem 0;
}

/* ══════════════════════════
   BLOG — POST INDIVIDUAL (single.php)
══════════════════════════ */
.single-post-page .page-content-wrap {
  padding-top: 0;
}

.post-hero {
  padding-top: 68px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.post-hero.has-thumbnail {
  min-height: 520px;
}

.post-hero-img {
  position: absolute;
  inset: 0;
}

.post-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,58,120,0.92) 0%, rgba(8,58,120,0.4) 100%);
}

.post-hero-content {
  position: relative;
  z-index: 2;
  padding: 3rem clamp(3rem, 8vw, 5rem);
  width: 100%;
  max-width: 900px;
}

.post-cat-chip {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.post-title {
  font-family: var(--fh);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--fm);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}

.post-meta-sep {
  color: rgba(255,255,255,0.25);
}

.post-body {
  background: var(--off-white);
  padding: clamp(3rem, 8vh, 4rem) clamp(3rem, 8vw, 5rem);
  display: grid;
  grid-template-columns: 1fr;
  max-width: 860px;
  margin: 0 auto;
}

.post-content {
  color: var(--text-dark);
  font-size: 17px;
  line-height: 1.85;
  font-weight: 300;
}

.post-content h2,
.post-content h3 {
  font-family: var(--fh);
  font-weight: 800;
  color: var(--navy-dark);
  letter-spacing: 0.02em;
  margin: 2rem 0 0.75rem;
}

.post-content h2 { font-size: clamp(28px, 4vw, 40px); }
.post-content h3 { font-size: clamp(22px, 3vw, 30px); }

.post-content p { margin-bottom: 1.25rem; }

.post-content img {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  margin: 1.5rem auto;
}

.post-content a {
  color: var(--red);
  text-decoration: underline;
}

.post-content blockquote {
  border-left: 4px solid var(--red);
  padding: 1rem 1.5rem;
  background: var(--light-blue);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text-mid);
}

.post-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.post-nav .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.post-nav .nav-previous a,
.post-nav .nav-next a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.post-nav .nav-next a { text-align: right; }

.post-nav .nav-previous a:hover,
.post-nav .nav-next a:hover {
  border-color: var(--red);
  background: var(--light-blue);
}

.post-nav-dir {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-nav-name {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-dark);
}

/* ══════════════════════════
   FAQ — PREGUNTAS FRECUENTES
══════════════════════════ */
.faq-section {
  position: relative;
  padding: clamp(5rem, 10vh, 7rem) clamp(3rem, 8vw, 5rem);
  /* Fondo claro como productos/marcas; la línea roja marca el corte con el azul
     de categorías, y el off-white final empalma con servicios */
  background: linear-gradient(to bottom, var(--white), var(--off-white));
  border-top: 4px solid var(--red);
  overflow: hidden;
}

/* Fondos decorativos */
.faq-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(8,74,147,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,74,147,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.faq-bg-glow {
  position: absolute;
  inset: 0;
  /* Resplandores muy sutiles sobre fondo claro */
  background:
    radial-gradient(ellipse 55% 60% at 80% 20%, rgba(14,99,184,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 15% 85%, rgba(240,57,44,0.05) 0%, transparent 55%);
  pointer-events: none;
}

/* Layout de dos columnas */
.faq-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(3rem, 8vw, 6rem);
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

/* Columna izquierda */
.faq-left {
  position: sticky;
  top: calc(68px + 2rem);
}

.faq-main-title {
  color: var(--navy-dark) !important;
  margin-bottom: 1.25rem;
}

.faq-title-accent {
  color: var(--red);
  font-style: italic;
}

.faq-intro {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #5A6B7C;
  margin-bottom: 2.5rem;
  max-width: 340px;
}

.faq-stat-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(8,74,147,0.15);
}

.faq-stat-num {
  font-family: var(--fh);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 900;
  color: var(--navy-dark);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.faq-stat-label {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A97A6;
}

.faq-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #25D366;
  color: var(--white);
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(37,211,102,0.25);
}

.faq-wa-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.faq-wa-btn:hover {
  background: #1db954;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(37,211,102,0.4);
}

/* Columna derecha: acordeón */
.faq-right {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid rgba(8,74,147,0.14);
  overflow: hidden;
}

.faq-item:first-child {
  border-top: 1px solid rgba(8,74,147,0.14);
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; }

.faq-q-text {
  font-family: var(--fh);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  color: #33495E;
  letter-spacing: 0.02em;
  flex: 1;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.faq-item[open] .faq-q-text,
.faq-question:hover .faq-q-text {
  color: var(--navy-dark);
}

/* Chevron animado */
.faq-chevron {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(8,74,147,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  background: transparent;
}

.faq-chevron svg {
  width: 14px;
  height: 14px;
  color: #4A6076;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), color 0.25s ease;
}

.faq-item[open] .faq-chevron {
  background: var(--red);
  border-color: var(--red);
}

.faq-item[open] .faq-chevron svg {
  transform: rotate(180deg);
  color: var(--white);
}

.faq-question:hover .faq-chevron:not(.faq-item[open] .faq-chevron) {
  border-color: rgba(8,74,147,0.5);
}

/* Barra de color izquierda al abrir */
.faq-item[open] {
  background: rgba(14,99,184,0.05);
  border-left: 3px solid var(--red);
  padding-left: 1rem;
}

/* Respuesta */
.faq-answer {
  padding: 0 2.5rem 1.5rem 0;
}

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq-answer p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: #5A6B7C;
  animation: faqOpen 0.3s ease both;
}

.faq-answer p strong {
  color: var(--navy-dark);
  font-weight: 600;
}

/* ══════════════════════════
   RESPONSIVE — Blog & Shop
══════════════════════════ */
@media (max-width: 1024px) {
  .blog-grid,
  .blog-archive-grid,
  .bnp-tutorial-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Carrusel: 2 cards por vista en tablet */
  .blog-slide {
    flex-basis: calc((100% - 1.5rem) / 2);
  }

  /* FAQ: en tablet las columnas se apilan */
  .faq-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 720px;
  }
  .faq-left {
    position: static;
  }
  .faq-intro {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .faq-section {
    padding: 3.5rem 1.5rem;
  }
  .faq-container {
    gap: 2rem;
  }
  .faq-stat-row {
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
  .faq-wa-btn {
    width: 100%;
    justify-content: center;
  }
  .faq-answer {
    padding-right: 0;
  }
  .faq-item[open] {
    padding-left: 0.75rem;
  }

  .blog-grid,
  .blog-archive-grid,
  .bnp-tutorial-cards {
    grid-template-columns: 1fr;
  }

  /* Carrusel: 1 card por vista en móvil, con la siguiente asomando
     para invitar al deslizamiento. Flechas ocultas: se navega con swipe. */
  .blog-slide {
    flex-basis: 86%;
  }

  .bc-arrow {
    display: none;
  }

  .blog-header-links {
    flex-direction: column;
    align-items: flex-start;
  }

  .woo-shop-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .woo-shop-body {
    padding: 2rem 1.5rem;
  }

  .woocommerce-page .woocommerce-breadcrumb {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .blog-preview-inner,
  .blog-archive-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .post-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .post-nav .nav-links {
    grid-template-columns: 1fr;
  }

  .post-nav .nav-next a {
    text-align: left;
  }
}

/* ══════════════════════════
   CATÁLOGO — 1 columna en móvil
══════════════════════════ */
@media (max-width: 600px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-2,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-5,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce-page ul.products.columns-2,
  .woocommerce-page ul.products.columns-3,
  .woocommerce-page ul.products.columns-4,
  .woocommerce-page ul.products.columns-5 {
    grid-template-columns: 1fr !important;
    padding: 1.25rem 1rem !important;
    gap: 1rem !important;
  }

  /* Grid personalizado del catálogo (woodmart-compat) — 1 columna en móvil.
     El style inline pone repeat(3,1fr); !important lo sobreescribe. */
  .wdm-products-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin: 1.5rem 0 !important;
  }
}

/* ══════════════════════════
   PRINT STYLES
══════════════════════════ */
@media print {
  #site-header,
  .hero-right,
  .hero-bottom-bar,
  .ticker-band,
  .nav-cta-btn {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO — rediseño 2026
   Superficie clara para leer; el azul queda de envoltorio.
══════════════════════════════════════════════════════════════ */

.single-product-page .ast-product {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}

/* Migas */
.ast-breadcrumb {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text-light);
  padding: var(--space-md) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ast-breadcrumb a { color: var(--text-light); }
.ast-breadcrumb a:hover { color: var(--navy); }
.ast-breadcrumb span[aria-hidden] { color: var(--text-muted); }
.ast-breadcrumb .current { color: var(--text-dark); }

/* Bloque principal */
.ast-product-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-top: var(--space-md);
}
.ast-product-gallery img { border-radius: var(--border-radius); }
.ast-product-gallery .woocommerce-product-gallery {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--space-sm);
  box-shadow: var(--shadow-sm);
  width: 100% !important;
  float: none !important;
}

/* position: sticky no funciona si algún ancestro es contenedor de scroll.
   El tema pone `overflow-x: hidden` en el body (para que las formas
   decorativas del hero no provoquen scroll horizontal), y eso convierte
   al body en contenedor y anula el sticky de todo lo que hay dentro.

   `overflow-x: clip` recorta exactamente igual pero NO crea contenedor
   de scroll, así que el sticky vuelve a funcionar. Se limita a la ficha
   de producto para no cambiar el comportamiento del resto del sitio. */
body.single-product { overflow-x: clip; }

/* La columna del resumen es bastante más alta que la foto: sin esto
   queda medio metro de blanco al lado del texto. La galería se queda
   pegada mientras se lee el resumen. */
@media (min-width: 901px) {
  .ast-product-gallery {
    position: sticky;
    top: 88px; /* 68 px de cabecera fija + aire */
    align-self: start;
  }
}

/* Alto mínimo para que cada producto no descuadre según su foto */
.ast-product-gallery .woocommerce-product-gallery__wrapper {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ast-product-gallery .woocommerce-product-gallery__image { width: 100%; }
.ast-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ast-product-summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--text-dark);
}

.ast-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ast-eyebrow a { color: var(--navy); }
.ast-eyebrow .ast-eyebrow-cat { color: var(--text-light); }
.ast-eyebrow-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-muted); flex-shrink: 0;
}

.ast-product-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0;
  text-wrap: balance;
}

/* El color va en el CONTENEDOR, no solo en los <p>.
   El body del tema es azul con texto blanco: cualquier elemento
   que venga del editor (ul, li, h3, strong…) heredaría ese blanco
   y quedaría invisible sobre el fondo claro de la ficha. */
.ast-product-lede,
.ast-product-lede * { color: var(--text-mid); }
.ast-product-lede strong,
.ast-product-lede b { color: var(--text-dark); }
.ast-product-lede a { color: var(--navy); }

.ast-product-lede p,
.ast-product-lede li {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 10px;
  max-width: 52ch;
}
.ast-product-lede p:last-child,
.ast-product-lede li:last-child { margin-bottom: 0; }
.ast-product-lede ul,
.ast-product-lede ol { margin: 0 0 10px; padding-left: 1.25em; list-style: disc; }

/* Tira de datos */
.ast-product-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ast-product-stats li { background: var(--white); padding: 14px 16px; }
.ast-stat-value {
  display: block;
  font-family: var(--fh);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  color: var(--navy-dark);
}
.ast-stat-label {
  display: block;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 4px;
}

/* Respaldo */
.ast-respaldo {
  background: var(--light-blue);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 20px 22px;
}
.ast-respaldo-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 14px;
}
.ast-respaldo-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ast-respaldo-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-mid);
}
.ast-respaldo-list strong { color: var(--text-dark); font-weight: 600; }
.ast-respaldo-list .ast-icon { color: var(--navy); flex-shrink: 0; margin-top: 2px; }

/* Llamadas a la acción */
.ast-product-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ast-cta-quote { padding: 16px 32px; font-size: 16px; }
.ast-cta-help {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--border);
  color: var(--navy-dark);
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 24px;
  border-radius: var(--border-radius);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ast-cta-help:hover { border-color: var(--navy); color: var(--navy); }

.ast-product-meta {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.9;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.ast-product-meta a { color: var(--navy); }

/* Encabezados de sección */
.ast-section-eyebrow {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
}
.ast-section-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.06;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 16px;
  text-wrap: balance;
}
.ast-section-eyebrow.ast-on-dark { color: var(--navy-mid); }
.ast-section-title.ast-on-dark { color: var(--white); }

/* Para qué sirve + ficha técnica */
.ast-product-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
  padding-top: var(--space-xl);
}

/* Sin ficha técnica, una sola columna: nada de media fila vacía.
   La medida de lectura la marca .ast-prose, no la rejilla. */
.ast-product-detail--solo { grid-template-columns: minmax(0, 1fr); }
.ast-product-detail--solo .ast-prose p,
.ast-product-detail--solo .ast-prose li,
.ast-product-detail--solo .ast-prose ul,
.ast-product-detail--solo .ast-prose ol { max-width: 68ch; }
/* Mismo motivo que en .ast-product-lede: el color se fija en el
   contenedor para que el contenido del editor no herede el blanco
   del body. La descripción de producto suele traer listas. */
.ast-prose,
.ast-prose * { color: var(--text-mid); }
.ast-prose strong,
.ast-prose b { color: var(--text-dark); font-weight: 600; }
.ast-prose a { color: var(--navy); }
.ast-prose a:hover { color: var(--navy-dark); }

.ast-prose p,
.ast-prose li {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 58ch;
}
.ast-prose p:last-child { margin-bottom: 0; }

.ast-prose ul,
.ast-prose ol {
  margin: 0 0 16px;
  padding-left: 1.3em;
  list-style: disc;
  max-width: 58ch;
}
.ast-prose ol { list-style: decimal; }
.ast-prose li { margin-bottom: 7px; }
.ast-prose li::marker { color: var(--navy); }

.ast-prose h2,
.ast-prose h3,
.ast-prose h4 {
  font-family: var(--fh);
  font-weight: 800;
  color: var(--navy-dark);
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 24px 0 10px;
}
.ast-prose h2 { font-size: 24px; }
.ast-prose h3 { font-size: 20px; }
.ast-prose h4 { font-size: 17px; }

.ast-prose img { border-radius: var(--border-radius); margin: 8px 0 16px; }

.ast-prose table {
  border-collapse: collapse;
  width: 100%;
  max-width: 58ch;
  margin: 0 0 16px;
  font-size: 14px;
}
.ast-prose th,
.ast-prose td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.ast-prose th { color: var(--text-dark); font-weight: 600; }

.ast-spec-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.ast-spec-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 16px;
}
.ast-spec-list { margin: 0; }
.ast-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ast-spec-row:last-child { border-bottom: 0; }
.ast-spec-row dt { color: var(--text-light); margin: 0; }
.ast-spec-row dd { color: var(--text-dark); font-weight: 600; margin: 0; text-align: right; }

/* Preguntas frecuentes */
.ast-product-faq { padding-top: var(--space-xl); }
.ast-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.ast-faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 18px 20px;
}
.ast-faq-q {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-dark);
  margin: 0 0 7px;
}
.ast-faq-a { font-size: 15px; line-height: 1.6; color: var(--text-mid); margin: 0; }

/* Aprende a usarla */
.ast-product-learn {
  margin-top: var(--space-xl);
  background: var(--navy-dark);
  border-radius: var(--border-radius);
  padding: 30px 34px;
}
.ast-learn-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.ast-learn-head .ast-section-title { margin-bottom: 0; }
.ast-learn-all {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}
.ast-learn-all:hover { color: var(--white); }
.ast-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.ast-learn-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--border-radius);
  padding: 20px 22px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ast-learn-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}
.ast-learn-cat {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-light);
}
.ast-learn-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
  color: var(--white);
}
.ast-learn-excerpt { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.7); }

/* Productos relacionados: hereda la rejilla que ya existe en el tema */
.ast-product .related.products { padding-top: var(--space-xl); }

/* ── Móvil ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ast-product-top,
  .ast-product-detail { grid-template-columns: 1fr; gap: var(--space-md); }
  .ast-product-learn { padding: 24px 20px; }
}

@media (max-width: 600px) {
  .single-product-page .ast-product { padding: 0 var(--space-sm) var(--space-lg); }
  .ast-product-cta { flex-direction: column; align-items: stretch; }
  .ast-cta-quote,
  .ast-cta-help { justify-content: center; min-height: 52px; }
  .ast-spec-row { flex-direction: column; gap: 2px; }
  .ast-spec-row dd { text-align: left; }
}


/* ══════════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO — rediseño 2026

   El <li> ya lo estiliza el bloque de arriba (fondo blanco, radio,
   sombra, flex en columna). Aquí va solo el contenido.

   Sin precio: la venta es por cotización.
══════════════════════════════════════════════════════════════ */

.woocommerce ul.products li.product.astc {
  position: relative;              /* ancla del enlace estirado */
  border: 1px solid var(--border) !important;
}
.woocommerce ul.products li.product.astc:hover {
  transform: translateY(-3px) !important;
  border-color: var(--navy) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── Imagen ─────────────────────────────────────────────── */
.astc-media {
  position: relative;
  background: var(--light-blue);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.astc-media .astc-img,
.astc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.35s ease;
}
.woocommerce ul.products li.product.astc:hover .astc-media img { transform: scale(1.04); }
.astc-noimg { color: var(--text-muted); }

.astc-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 4px 9px;
  border-radius: 4px;
}

/* ── Cuerpo ─────────────────────────────────────────────── */
.astc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  flex-grow: 1;
}

.astc-eyebrow {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

.astc-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.12;
  color: var(--text-dark);
  text-decoration: none;
  /* El enlace se estira sobre toda la tarjeta: un solo enlace real
     para lectores de pantalla, y toda la tarjeta clicable. */
  position: static;
}
.astc-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.woocommerce ul.products li.product.astc:hover .astc-title { color: var(--navy-dark); }

.astc-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 0;
  flex-grow: 1;
}

/* ── Botón de cotizar ───────────────────────────────────── */
.astc-cta {
  position: relative;
  z-index: 2;                       /* por encima del enlace estirado */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                 /* altura táctil mínima */
  background: linear-gradient(135deg, var(--red), var(--red-light));
  color: var(--white);
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 6px;
  margin-top: 4px;
  transition: filter 0.2s ease, transform 0.15s ease;
}
.astc-cta:hover {
  color: var(--white);
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.astc-cta:focus-visible { outline: 2px solid var(--navy-dark); outline-offset: 2px; }
.astc-cta .ast-icon { flex-shrink: 0; }

/* ── Móvil ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .astc-body { padding: 14px 14px 16px; gap: 7px; }
  .astc-title { font-size: 18px; }
  .astc-desc { font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════════
   ARTÍCULO DEL BLOG — rediseño 2026

   Es la plantilla que van a usar las 12 semanas del plan de
   contenidos. El cambio que más pesa no es decorativo: el cuerpo
   pasa de 15 px sobre 860 de ancho a 18 px con medida de 68
   caracteres.
══════════════════════════════════════════════════════════════ */

.ast-single {
  background: var(--off-white);
  padding-top: 68px;               /* cabecera fija */
  color: var(--text-dark);
}

/* Igual que en la ficha: overflow-x hidden en el body convierte al
   body en contenedor de scroll y anula el índice pegajoso. `clip`
   recorta igual sin crear contenedor. */
body.single-post { overflow-x: clip; }

.ast-article {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ── Cabecera ───────────────────────────────────────────── */
.ast-article-head { max-width: 860px; padding-top: var(--space-sm); }

.ast-article-chip {
  display: inline-block;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 5px 11px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.ast-article-chip:hover { color: var(--white); filter: brightness(1.08); }

.ast-article-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--text-dark);
  margin: 0 0 18px;
  text-wrap: balance;
}

.ast-article-lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 22px;
  max-width: 62ch;
}

.ast-article-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ast-byline-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius);
  background: var(--navy-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ast-byline-author {
  display: block;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
}
.ast-byline-dates {
  display: block;
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text-light);
}
.ast-byline-dates strong { color: var(--navy); font-weight: 500; }

/* ── Cuerpo con índice ──────────────────────────────────── */
.ast-article-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-top: var(--space-md);
}
.ast-article-grid--sin-indice { grid-template-columns: minmax(0, 1fr); }

.ast-toc {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 20px 20px 22px;
}
@media (min-width: 901px) {
  .ast-toc { position: sticky; top: 88px; }
}
.ast-toc-title {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 14px;
}
.ast-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: none;
}
.ast-toc-list a {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-mid);
  border-left: 2px solid var(--border);
  padding-left: 11px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ast-toc-list a:hover {
  color: var(--navy-dark);
  border-left-color: var(--red);
}

.ast-toc-cta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ast-toc-cta-label {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 9px;
}
.ast-toc-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  background: linear-gradient(135deg, var(--red), var(--red-light));
  color: var(--white);
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 6px;
}
.ast-toc-cta-btn:hover { color: var(--white); filter: brightness(1.06); }

.ast-article-body { min-width: 0; }
.ast-article-figure {
  margin: 0 0 28px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ast-article-figure img { width: 100%; height: auto; display: block; }

/* Cuerpo del texto: 18 px, interlínea 1.72, 68 caracteres.
   Hereda el resto de .ast-prose (color en el contenedor, listas,
   encabezados, tablas) que ya se definió para la ficha. */
.ast-article-content p,
.ast-article-content li {
  font-size: 18px;
  line-height: 1.72;
  max-width: 68ch;
}
.ast-article-content ul,
.ast-article-content ol { max-width: 68ch; }
.ast-article-content h2 {
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.1;
  margin: 34px 0 14px;
  scroll-margin-top: 96px;         /* que el índice no lo esconda bajo la cabecera */
}
.ast-article-content h3 { font-size: 22px; margin: 26px 0 10px; }
.ast-article-content img { max-width: 100%; }
.ast-article-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--border-radius);
  margin: 8px 0 20px;
}

/* ── Firma ──────────────────────────────────────────────── */
.ast-author {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  background: var(--navy-dark);
  border-radius: var(--border-radius);
  padding: 28px 32px;
  margin-top: var(--space-xl);
}
.ast-author-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius);
  background: rgba(255,255,255,0.12);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ast-author-name {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 6px;
}
.ast-author-bio {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
  max-width: 70ch;
}
.ast-author-cta {
  display: inline-flex;
  align-items: center;
  border: 2px solid rgba(255,255,255,0.25);
  color: var(--white);
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: var(--border-radius);
  white-space: nowrap;
}
.ast-author-cta:hover { color: var(--white); border-color: rgba(255,255,255,0.7); }

/* ── Del mismo tema ─────────────────────────────────────── */
.ast-related-posts {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xl);
}
.ast-related-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.ast-related-head .ast-section-title { margin-bottom: 0; }
.ast-related-head::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--border);
}
.ast-related-cat {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--text-light);
  order: 3;
}
.ast-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.ast-related-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ast-related-card:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}
.ast-related-thumb {
  display: block;
  background: var(--light-blue);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.ast-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ast-related-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; }
.ast-related-chip {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ast-related-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.14;
  color: var(--text-dark);
}
.ast-related-min { font-family: var(--fm); font-size: 11px; color: var(--text-light); }

/* ── Móvil ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ast-article-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .ast-toc { order: -1; }
  .ast-author { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 20px; }
  .ast-author-cta { justify-content: center; }
}

@media (max-width: 600px) {
  .ast-article { padding: 0 var(--space-sm); }
  .ast-related-posts { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .ast-article-content p,
  .ast-article-content li { font-size: 17px; line-height: 1.7; }
}


/* ══════════════════════════════════════════════════════════════
   ÍNDICE DEL BLOG Y ARCHIVOS — rediseño 2026
══════════════════════════════════════════════════════════════ */

.ast-blog {
  background: var(--off-white);
  padding-top: 68px;
  color: var(--text-dark);
}

.ast-blog-head { background: var(--navy-dark); padding: 40px 0 34px; }
.ast-blog-head-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.ast-blog-eyebrow {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-mid);
  margin: 0 0 12px;
}
.ast-blog-breadcrumb {
  font-family: var(--fm);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}
.ast-blog-breadcrumb a { color: rgba(255,255,255,0.75); }
.ast-blog-breadcrumb a:hover { color: var(--white); }

.ast-blog-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 14px;
  text-wrap: balance;
}
.ast-blog-desc,
.ast-blog-desc p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 68ch;
}

.ast-blog-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

/* ── Pilares ────────────────────────────────────────────── */
.ast-pilares { margin-bottom: var(--space-lg); }
.ast-pilares-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.ast-pilares-head::after { content: ""; flex-grow: 1; height: 1px; background: var(--border); }
.ast-pilares-head .ast-section-title { margin-bottom: 0; }

.ast-pilares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.ast-pilar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--border-radius);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}
.ast-pilar:first-child { border-top-color: var(--red); }
.ast-pilar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--red);
}
.ast-pilar-nombre {
  font-family: var(--fh);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.ast-pilar-desc { font-size: 14px; line-height: 1.5; color: var(--text-mid); }
.ast-pilar-count { font-family: var(--fm); font-size: 11px; color: var(--text-light); }

/* ── Destacado ──────────────────────────────────────────── */
.ast-destacado { margin-bottom: var(--space-lg); }
.ast-destacado-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-destacado-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ast-destacado-media {
  display: block;
  background: var(--light-blue);
  min-height: 300px;
  overflow: hidden;
}
.ast-destacado-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ast-destacado-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 36px;
  justify-content: center;
}
.ast-destacado-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ast-destacado-badge {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 4px 9px;
  border-radius: 4px;
}
.ast-destacado-cat {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}
.ast-destacado-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  color: var(--text-dark);
  text-wrap: balance;
}
.ast-destacado-excerpt { font-size: 17px; line-height: 1.65; color: var(--text-mid); }
.ast-destacado-meta { font-family: var(--fm); font-size: 12px; color: var(--text-light); }

/* ── Rejilla de artículos ───────────────────────────────── */
.ast-blog-lista-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--text-dark);
  margin-bottom: 22px;
}
.ast-blog-lista-head .ast-section-title { margin-bottom: 0; }

.ast-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.ast-post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ast-post-card:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}
.ast-post-media {
  display: block;
  position: relative;
  background: var(--light-blue);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.ast-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ast-post-video {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15,23,42,0.82);
  color: var(--white);
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
}
.ast-post-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  flex-grow: 1;
}
.ast-post-cat {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ast-post-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.12;
  color: var(--text-dark);
}
.ast-post-excerpt { font-size: 15px; line-height: 1.55; color: var(--text-mid); flex-grow: 1; }
.ast-post-meta { font-family: var(--fm); font-size: 11px; color: var(--text-light); }

/* ── Paginación ─────────────────────────────────────────── */
.ast-blog-pagination { margin-top: var(--space-lg); }
.ast-blog-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ast-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--text-mid);
}
.ast-blog-pagination .page-numbers:hover { border-color: var(--navy); color: var(--navy); }
.ast-blog-pagination .page-numbers.current {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--white);
}
.ast-blog-pagination .screen-reader-text { position: absolute; left: -9999px; }

.ast-sin-posts { font-size: 17px; color: var(--text-mid); }

/* ── Móvil ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ast-destacado-card { grid-template-columns: minmax(0, 1fr); }
  .ast-destacado-media { min-height: 200px; aspect-ratio: 16 / 9; }
  .ast-destacado-body { padding: 24px 22px; }
}

@media (max-width: 600px) {
  .ast-blog-head-inner,
  .ast-blog-body { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .ast-post-title { font-size: 20px; }
}


/* Antetítulo de los archivos de categoría y marca */
.ast-archivo-eyebrow {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-mid);
  margin: 0 0 10px;
}
/* La descripción del término hereda .ast-prose, pero va sobre el
   fondo azul de la cabecera del catálogo: se aclara el color. */
.woo-shop-header .woo-cat-desc,
.woo-shop-header .woo-cat-desc * { color: rgba(255,255,255,0.82); }
.woo-shop-header .woo-cat-desc strong { color: #FFFFFF; }
.woo-shop-header .woo-cat-desc a { color: #FFFFFF; text-decoration: underline; }
.woo-shop-header .woo-cat-desc p { max-width: 72ch; margin: 0 0 12px; }
.woo-shop-header .woo-cat-desc p:last-child { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════════════
   HOME — rediseño 2026

   Tres secciones nuevas o rehechas: «por qué comprarla aquí»
   (que sube al segundo lugar), «¿qué vas a coser?» y marcas.
   Todo sobre superficie clara; el azul queda de envoltorio.
══════════════════════════════════════════════════════════════ */

/* ── Por qué comprarla aquí ─────────────────────────────── */
.ast-porque {
  background: var(--off-white);
  color: var(--text-dark);
  padding: var(--space-xl) clamp(1.25rem, 5vw, 4rem);
}
.ast-porque-head { max-width: 76ch; margin-bottom: var(--space-md); }
.ast-porque-title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ast-porque-desc {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0;
}
.ast-porque-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: var(--space-md);
}
.ast-porque-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-porque-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ast-porque-icon { color: var(--navy); display: block; }
.ast-porque-name {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 14px 0 8px;
}
.ast-porque-text { font-size: 15px; line-height: 1.55; color: var(--text-mid); margin: 0; }

.ast-porque-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ast-porque-link {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
}
.ast-porque-link:hover { color: var(--navy-dark); }

/* ── ¿Qué vas a coser? ──────────────────────────────────── */
.ast-prendas {
  background: var(--light-blue);
  color: var(--text-dark);
  padding: var(--space-xl) clamp(1.25rem, 5vw, 4rem);
}
.ast-prendas-head { max-width: 72ch; margin-bottom: var(--space-md); }
.ast-prendas-desc { font-size: 17px; line-height: 1.65; color: var(--text-mid); margin: 0; }

.ast-prendas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.ast-prenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ast-prenda:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}
.ast-prenda-nombre {
  font-family: var(--fh);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.ast-prenda-texto { font-size: 15px; line-height: 1.55; color: var(--text-mid); flex-grow: 1; }
.ast-prenda-go {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
}
.ast-prendas-pie {
  font-size: 16px;
  color: var(--text-mid);
  margin: var(--space-md) 0 0;
}
.ast-prendas-pie a { color: var(--navy); font-weight: 600; }

/* ── Marcas ─────────────────────────────────────────────── */
.ast-marcas {
  background: var(--off-white);
  color: var(--text-dark);
  padding: var(--space-xl) clamp(1.25rem, 5vw, 4rem);
}
.ast-marcas-head { margin-bottom: var(--space-md); }

.ast-marcas-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.ast-marca-destacada {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--light-blue);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-marca-destacada:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ast-marca-nombre {
  font-family: var(--fh);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.06em;
  color: var(--navy-dark);
  line-height: 1;
}
.ast-marca-porque { font-size: 15px; line-height: 1.6; color: var(--text-mid); }

.ast-marcas-resto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.ast-marca {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 16px 18px 18px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ast-marca:hover { transform: translateY(-2px); border-color: var(--navy); }
.ast-marca-nombre-sm {
  font-family: var(--fh);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  line-height: 1;
}
.ast-marca-porque-sm { font-size: 13px; line-height: 1.5; color: var(--text-mid); }

/* ── Móvil ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ast-porque,
  .ast-prendas,
  .ast-marcas { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .ast-porque-cta { flex-direction: column; align-items: stretch; }
  .ast-porque-cta .btn-main { justify-content: center; }
  .ast-porque-link { text-align: center; }
  .ast-prenda-nombre { font-size: 21px; }
}


/* ══════════════════════════════════════════════════════════════
   CABECERA Y PIE — rediseño 2026
══════════════════════════════════════════════════════════════ */

/* ── Desplegable del menú (un nivel) ────────────────────── */
#primary-navigation li { position: relative; }

#primary-navigation .sub-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: 240px;
}

@media (min-width: 1025px) {
  #primary-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--red);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
  }
  #primary-navigation li:hover > .sub-menu,
  #primary-navigation li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  #primary-navigation .sub-menu a {
    display: block;
    padding: 9px 20px;
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-mid);
    white-space: nowrap;
  }
  #primary-navigation .sub-menu a:hover { color: var(--navy); background: var(--light-blue); }

  /* Indicador de que hay submenú */
  #primary-navigation .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.7;
  }
}

/* En móvil el submenú se muestra siempre, indentado dentro del cajón */
@media (max-width: 1024px) {
  #primary-navigation .sub-menu {
    padding: 4px 0 8px 16px;
    border-left: 2px solid rgba(255,255,255,0.18);
    margin: 4px 0 4px 4px;
  }
  #primary-navigation .sub-menu a {
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.82;
  }
}

/* ── Datos de la tienda dentro del cajón móvil ──────────── */
.nav-drawer-meta { display: none; }

@media (max-width: 1024px) {
  .nav-drawer-meta {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.14);
    font-family: var(--fm);
    font-size: 11px;
    line-height: 1.7;
    color: rgba(255,255,255,0.6);
    text-align: center;
  }
}

/* El CTA del cajón lleva icono: que no se descoloque */
.nav-drawer-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.nav-drawer-cta .ast-icon { flex-shrink: 0; }

/* ── Pie de cinco columnas ──────────────────────────────── */
.footer-inner.ast-footer-5 {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 1100px) {
  .footer-inner.ast-footer-5 { grid-template-columns: repeat(3, 1fr); }
  .ast-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .footer-inner.ast-footer-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .footer-inner.ast-footer-5 { grid-template-columns: 1fr; }
}

.footer-bottom .ast-footer-legal { font-family: var(--fm); font-size: 12px; }
.footer-bottom .ast-footer-legal a { color: inherit; text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════
   SERVICIO TÉCNICO — page-servicio-tecnico.php

   Misma regla que en el resto del rediseño: el azul es envoltorio,
   no fondo. El contenedor `.ast-st` fija superficie clara y color
   de texto oscuro, porque el body del tema es azul con texto
   blanco y si no, todo lo que no lleve color propio desaparece.
══════════════════════════════════════════════════════════════ */
.ast-st {
  background: var(--off-white);
  color: var(--text-dark);
}

/* ── Hero ───────────────────────────────────────────────────────
   El H1 es el elemento LCP de esta página: nada de `opacity` ni de
   `animation-delay` aquí, sólo texto que pinta de una. */
.ast-st-hero {
  background: var(--navy-dark);
  /* Los 68 px son la cabecera fija, igual que en `.hero-section`,
     `.post-hero`, `.ast-single` y `.ast-blog`. Sin ellos el antetítulo
     «Taller propio en Gamarra» queda debajo del header y no se ve. */
  padding: calc(68px + var(--space-lg)) clamp(1.25rem, 5vw, 4rem) var(--space-lg);
}
.ast-st-hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.ast-st-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 18px;
  text-wrap: balance;
}
.ast-st-lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  margin: 0 0 26px;
  max-width: 54ch;
}
.ast-st-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.ast-st-panel {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--border-radius);
  padding: 24px 26px;
}
.ast-st-panel-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 12px;
}
.ast-st-panel-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0 0 16px;
}
.ast-st-panel-links { display: flex; flex-direction: column; gap: 8px; }
.ast-st-panel-link {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  padding: 11px 13px;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ast-st-panel-link:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}

/* ── Secciones ──────────────────────────────────────────────── */
.ast-st-sec { padding: var(--space-xl) clamp(1.25rem, 5vw, 4rem) 0; }
.ast-st-sec--last { padding-bottom: var(--space-xl); }

.ast-st-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.ast-st-head .ast-section-title { margin: 0; font-size: clamp(26px, 3.4vw, 34px); }
.ast-st-rule { height: 1px; flex-grow: 1; background: var(--border); }

.ast-st-desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 22px;
  max-width: 70ch;
}

/* ── Qué reparamos ──────────────────────────────────────────── */
.ast-st-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}
.ast-st-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-st-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ast-st-card-name {
  font-family: var(--fh);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 7px;
}
.ast-st-card-text { font-size: 15px; line-height: 1.55; color: var(--text-mid); margin: 0; }

.ast-st-nota {
  background: var(--light-blue);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}
.ast-st-nota strong { color: var(--text-dark); font-weight: 600; }

/* ── Cómo funciona ──────────────────────────────────────────── */
.ast-st-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ast-st-paso { padding: 0 24px; border-left: 1px solid var(--border); }
.ast-st-paso:first-child { padding-left: 0; border-left: 0; }
.ast-st-paso:last-child { padding-right: 0; }
.ast-st-paso-num {
  display: block;
  font-family: var(--fh);
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  color: var(--light-blue);
  margin-bottom: 4px;
}
.ast-st-paso-titulo {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.ast-st-paso-texto { font-size: 15px; line-height: 1.55; color: var(--text-mid); margin: 0; }

/* ── Mantenimiento y repuestos ──────────────────────────────── */
.ast-st-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ast-st-duo-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 12px;
}
/* `.ast-on-dark` sólo estaba definido para `.ast-section-title`, así que
   sin esto el título de la tarjeta azul quedaba azul oscuro sobre azul
   oscuro: invisible. */
.ast-st-duo-title.ast-on-dark { color: var(--white); }
.ast-st-mant {
  background: var(--navy-dark);
  border-radius: var(--border-radius);
  padding: 30px 32px;
}
.ast-st-mant-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0 0 18px;
}
.ast-st-rep {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 30px 32px;
  box-shadow: var(--shadow-sm);
}
.ast-st-rep-text { font-size: 16px; line-height: 1.6; color: var(--text-mid); margin: 0 0 16px; }
.ast-st-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ast-st-chip {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy-dark);
  background: var(--light-blue);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
}

/* ── Contenido del editor ───────────────────────────────────── */
.ast-st-prose p,
.ast-st-prose li,
.ast-st-prose ul,
.ast-st-prose ol { max-width: 68ch; }

/* ── Preguntas del taller ───────────────────────────────────── */
.ast-st-faq {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.ast-st-faq-head .ast-section-title { font-size: clamp(26px, 3.4vw, 34px); }
.ast-st-faq-head .ast-st-desc { margin-bottom: 0; }
/* Una sola columna: en la mitad derecha, dos columnas de tarjetas
   dejarían las respuestas demasiado estrechas para leerlas. */
.ast-st-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ast-st-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .ast-st-duo { grid-template-columns: minmax(0, 1fr); }
  .ast-st-faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ast-st-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .ast-st-paso:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ── Móvil ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ast-st-sec { padding-top: var(--space-lg); }
  .ast-st-sec--last { padding-bottom: var(--space-lg); }
  .ast-st-lede { font-size: 16px; }
  .ast-st-cta { flex-direction: column; align-items: stretch; }
  .ast-st-cta .btn-main,
  .ast-st-cta .btn-ghost { justify-content: center; }
  .ast-st-pasos { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ast-st-paso { padding: 0; border-left: 0; }
  .ast-st-mant,
  .ast-st-rep { padding: 24px 22px; }
}


/* ══════════════════════════════════════════════════════════════
   MIGAS DE PAN — compartidas por page.php y contacto
══════════════════════════════════════════════════════════════ */
.ast-migas {
  font-family: var(--fm);
  font-size: 12px;
  margin-bottom: 14px;
}
.ast-migas a { color: var(--text-light); }
.ast-migas a:hover { color: var(--navy); }
.ast-migas-sep { color: var(--text-muted); padding: 0 6px; }
.ast-migas-actual { color: var(--text-dark); }
/* Sobre el banner azul de page.php el gris no se lee */
.page-banner .ast-migas a { color: rgba(255,255,255,0.7); }
.page-banner .ast-migas a:hover { color: var(--white); }
.page-banner .ast-migas-sep { color: rgba(255,255,255,0.45); }
.page-banner .ast-migas-actual { color: var(--white); }


/* ══════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES — arreglos sobre `.page-main-content`

   Sólo se tocan los hijos DIRECTOS: por aquí pasan páginas
   maquetadas con WPBakery y limitar el ancho de todo comprimiría
   sus filas e imágenes.
══════════════════════════════════════════════════════════════ */
.page-main-content > p,
.page-main-content > ul,
.page-main-content > ol,
.page-main-content > h2,
.page-main-content > h3 { max-width: 68ch; }

/* 300 es demasiado fino para leer un texto legal largo; el resto
   del tema usa 400. */
.page-main-content > p { font-weight: 400; }

/* Los enlaces salían del mismo gris que el texto y no parecían
   enlaces. */
.page-main-content a { color: var(--navy); text-decoration: underline; }
.page-main-content a:hover { color: var(--navy-dark); }

.ast-paginas-internas {
  margin-top: var(--space-md);
  font-family: var(--fh);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.ast-paginas-internas a { margin: 0 6px; }


/* ══════════════════════════════════════════════════════════════
   CONTACTO — page-contacto.php
══════════════════════════════════════════════════════════════ */
.ast-ct {
  background: var(--off-white);
  color: var(--text-dark);
  padding-top: 68px;                /* cabecera fija */
}

.ast-ct-head,
.ast-ct-canales,
.ast-ct-cuerpo { padding: 0 clamp(1.25rem, 5vw, 4rem); }

.ast-ct-head { padding-top: var(--space-lg); }
.ast-ct-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 14px;
  text-wrap: balance;
}
.ast-ct-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 30px;
  max-width: 62ch;
}

/* ── Canales ────────────────────────────────────────────────── */
.ast-ct-canales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}
.ast-ct-canal {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  color: var(--text-mid);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-ct-canal:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--text-mid); }
.ast-ct-canal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--navy);
}
.ast-ct-canal-name {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.ast-ct-canal-text {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.ast-ct-canal-dato {
  display: block;
  font-family: var(--fm);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--navy);
}
/* El correo es largo: a 17 px se sale de la tarjeta en móvil. */
.ast-ct-canal-dato--mail { font-size: 14px; word-break: break-word; }
.ast-ct-canal-dato--dir {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0;
}
.ast-ct-canal-horario {
  display: block;
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text-light);
  margin-top: 7px;
}

/* WhatsApp: la tarjeta azul. El color se fija en el CONTENEDOR,
   no en cada hijo, por la razón de siempre. */
.ast-ct-canal--wa,
.ast-ct-canal--wa:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: rgba(255,255,255,0.75); }
.ast-ct-canal--wa .ast-ct-canal-head,
.ast-ct-canal--wa .ast-ct-canal-name,
.ast-ct-canal--wa .ast-ct-canal-dato { color: var(--white); }

/* ── Cuerpo: formulario + columna lateral ───────────────────── */
.ast-ct-cuerpo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 34px;
  align-items: start;
  padding-bottom: var(--space-xl);
}

.ast-ct-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 30px 32px;
  box-shadow: var(--shadow-sm);
  color: var(--text-mid);
}
.ast-ct-form h2 {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 28px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 8px;
}
.ast-ct-form p { font-size: 16px; line-height: 1.6; margin: 0 0 18px; }

/* ── Contact Form 7 dentro de la tarjeta ────────────────────────
   Se estiliza por tipo de campo, nunca por nombre: los campos se
   cambian desde el panel y esta hoja no debe enterarse.

   El contenido de la página viene envuelto en una fila de WPBakery
   con dos columnas vacías del 16,6 % a los lados. Dentro de la
   tarjeta eso dejaría el formulario al 66 % del ancho, así que la
   fila se aplana y las columnas vacías se ocultan. */
.ast-ct-form .vc-row { display: block; gap: 0; margin: 0; }
.ast-ct-form .vc-col { min-width: 0 !important; max-width: none; }
.ast-ct-form .vc-col:empty { display: none; }

/* El H2 del editor trae su tamaño en el atributo `style`, hasta 44 px.
   Dentro de una tarjeta es desproporcionado y sólo se puede ganar al
   inline con `!important`. */
.ast-ct-form h2.wdm-title {
  font-size: clamp(24px, 3vw, 28px) !important;
  margin: 0 0 8px !important;
}

.ast-contacto-form .wpcf7 { max-width: 100%; }
.ast-contacto-form .wpcf7-form p { margin: 0 0 16px; }

/* CF7 separa los campos con <br>: sobra espacio y no se puede
   controlar. Se apagan y el margen lo pone cada campo. */
.ast-contacto-form .wpcf7-form br { display: none; }
.ast-contacto-form .wpcf7-form-control-wrap { display: block; margin-bottom: 16px; }
.ast-contacto-form .wpcf7-form center { display: block; margin-top: 4px; }

.ast-contacto-form label {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 7px;
}
.ast-contacto-form input[type="text"],
.ast-contacto-form input[type="email"],
.ast-contacto-form input[type="tel"],
.ast-contacto-form input[type="url"],
.ast-contacto-form input[type="number"],
.ast-contacto-form select,
.ast-contacto-form textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--off-white);
  color: var(--text-dark);
  font-family: var(--fb);
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ast-contacto-form textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.ast-contacto-form input:focus,
.ast-contacto-form select:focus,
.ast-contacto-form textarea:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(46,144,234,0.18);
}
.ast-contacto-form ::placeholder { color: var(--text-muted); }

.ast-contacto-form input[type="submit"],
.ast-contacto-form button[type="submit"] {
  width: 100%;
  min-height: 54px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--red), var(--red-light));
  color: var(--white);
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ast-contacto-form input[type="submit"]:hover,
.ast-contacto-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Avisos de CF7: por defecto salen con el borde amarillo del plugin */
.ast-contacto-form .wpcf7-response-output {
  border-radius: 6px;
  border-width: 1px;
  font-size: 14px;
  padding: 12px 14px;
  margin: 16px 0 0;
}
.ast-contacto-form .wpcf7-not-valid-tip { font-size: 13px; color: var(--red); margin-top: 5px; }
.ast-contacto-form .wpcf7-spinner { margin: 10px auto 0; display: block; }

/* ── Columna lateral ────────────────────────────────────────── */
.ast-ct-lado { display: flex; flex-direction: column; gap: 20px; }

.ast-ct-mapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 220px;
  background: var(--light-blue);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px;
  color: var(--text-mid);
}
.ast-ct-mapa:hover { color: var(--navy-dark); border-color: var(--navy-mid); }
.ast-ct-mapa-icon { color: var(--navy-mid); }
.ast-ct-mapa-dir { font-size: 15px; font-weight: 600; color: var(--text-dark); max-width: 30ch; }
.ast-ct-mapa-cta {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
}

.ast-ct-avisos {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.ast-ct-lado-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 14px;
}
.ast-ct-avisos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ast-ct-aviso { display: flex; gap: 11px; align-items: flex-start; }
.ast-ct-aviso-icon { color: var(--navy); flex-shrink: 0; margin-top: 2px; line-height: 0; }
.ast-ct-aviso-text { font-size: 15px; line-height: 1.5; color: var(--text-mid); }
.ast-ct-aviso-text strong { color: var(--text-dark); font-weight: 600; margin-right: 4px; }
.ast-ct-aviso-text a { color: var(--navy); text-decoration: underline; }

.ast-ct-libro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 18px 22px;
  color: var(--text-mid);
}
.ast-ct-libro:hover { border-color: var(--navy-mid); color: var(--text-mid); }
.ast-ct-libro-name {
  display: block;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.ast-ct-libro-desc { display: block; font-size: 14px; margin-top: 3px; }
.ast-ct-libro-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ast-ct-canales { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ast-ct-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ── Móvil ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ast-ct-lede { font-size: 17px; margin-bottom: 24px; }
  .ast-ct-canales { grid-template-columns: minmax(0, 1fr); }
  .ast-ct-form { padding: 24px 20px; }
  .ast-ct-cuerpo { padding-bottom: var(--space-lg); }
}


/* ══════════════════════════════════════════════════════════════
   EMPRESA — page-empresa.php
══════════════════════════════════════════════════════════════ */
.ast-em {
  background: var(--off-white);
  color: var(--text-dark);
  padding-top: 68px;                /* cabecera fija */
}

.ast-em-head,
.ast-em-cifras,
.ast-em-cuerpo,
.ast-em-marcas-sec,
.ast-em-cta-sec { padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }

.ast-em-head { padding-top: var(--space-lg); }
.ast-em-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 14px;
  max-width: 20ch;
  text-wrap: balance;
}
.ast-em-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  max-width: 66ch;
}

/* ── Cifras ─────────────────────────────────────────────────── */
.ast-em-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: var(--space-lg);
}
.ast-em-cifra {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.ast-em-cifra-num {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 6px;
}
.ast-em-cifra-num .hi { color: var(--red); }
.ast-em-cifra-label {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
}

/* ── Texto + lateral ────────────────────────────────────────── */
.ast-em-cuerpo {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
  padding-top: var(--space-xl);
}

.ast-em-texto h2 {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 12px;
}
.ast-em-texto h2 + p { margin-top: 0; }
.ast-em-texto h2:not(:first-child) { margin-top: var(--space-md); }
.ast-em-texto p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0 0 14px;
  max-width: 68ch;
}
.ast-em-texto a { color: var(--navy); text-decoration: underline; }
.ast-em-texto a:hover { color: var(--navy-dark); }

.ast-em-lado { display: flex; flex-direction: column; gap: 20px; }
.ast-em-caja {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.ast-em-caja--datos { background: var(--light-blue); box-shadow: none; }
.ast-em-caja-title {
  font-family: var(--fh);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 14px;
}

.ast-em-esperar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ast-em-esperar-name {
  display: block;
  font-family: var(--fh);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-dark);
}
.ast-em-esperar-text {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-mid);
  margin-top: 3px;
}

.ast-em-datos { margin: 0; }
.ast-em-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.ast-em-dato:last-child { border-bottom: 0; }
.ast-em-dato dt {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
  flex-shrink: 0;
}
.ast-em-dato dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: right;
}

/* ── Marcas ─────────────────────────────────────────────────── */
.ast-em-marcas-sec { padding-top: var(--space-xl); }
.ast-em-head-linea {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.ast-em-head-linea .ast-section-title { margin: 0; font-size: clamp(26px, 3.4vw, 34px); }
.ast-em-rule { height: 1px; flex-grow: 1; background: var(--border); }

.ast-em-marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.ast-em-marca {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 18px 14px;
  text-align: center;
  font-family: var(--fh);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.08em;
  color: var(--navy-dark);
  box-shadow: var(--shadow-sm);
}

/* ── CTA final ──────────────────────────────────────────────── */
.ast-em-cta-sec { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.ast-em-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--navy-dark);
  border-radius: var(--border-radius);
  padding: 30px 34px;
}
.ast-em-cta-title {
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 8px;
}
.ast-em-cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0;
  max-width: 62ch;
}

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ast-em-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ast-em-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ast-em-title { max-width: none; }
}

/* ── Móvil ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ast-em-lede { font-size: 17px; }
  .ast-em-cifras { grid-template-columns: minmax(0, 1fr); }
  .ast-em-cuerpo,
  .ast-em-marcas-sec,
  .ast-em-cta-sec { padding-top: var(--space-lg); }
  .ast-em-cta-sec { padding-bottom: var(--space-lg); }
  .ast-em-cta { padding: 24px 22px; }
  .ast-em-cta .btn-main { width: 100%; justify-content: center; }
  .ast-em-dato { flex-direction: column; gap: 2px; }
  .ast-em-dato dd { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════
   404 Y BUSCADOR — 01/09/2026

   Sirve a `404.php`, `search.php`, `searchform.php` y a los dos
   componentes compartidos (`template-parts/resultado.php` y
   `template-parts/salidas.php`).

   Las dos plantillas usan `.page-content-wrap` como envoltorio, así
   que el `padding-top: 68px` de la cabecera fija ya viene puesto —
   ver la regla de CAMBIOS.md sobre el primer bloque de cada
   plantilla. El banner azul y las migas también se heredan de
   «PÁGINAS INTERIORES»; aquí solo va el cuerpo.
══════════════════════════════════════════════════════════════ */

/* Texto solo para lectores de pantalla. El tema tenía una regla
   equivalente pero encerrada en `.ast-blog-pagination`. */
.ast-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ast-404-cuerpo,
.ast-busqueda-cuerpo {
  background: var(--off-white);
  color: var(--text-dark);
  padding: clamp(1.75rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4.5rem);
}

.ast-404-lede {
  max-width: 62ch;
  margin: 0 0 var(--space-md);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ── Formulario ─────────────────────────────────────────────── */
.ast-buscador {
  display: flex;
  gap: 10px;
  max-width: 640px;
}

.ast-buscador-campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  font-family: var(--fb);
  /* 16px es un mínimo, no una preferencia: por debajo de eso Safari en
     iOS hace zoom sobre el campo al enfocarlo y descoloca la página. */
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  -webkit-appearance: none;
  appearance: none;
}

.ast-buscador-campo::placeholder { color: var(--text-muted); }

.ast-buscador-campo:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14, 99, 184, 0.15);
}

.ast-buscador-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  background: var(--navy-dark);
  color: var(--white);
  border: 0;
  border-radius: var(--border-radius);
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.ast-buscador-btn:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

/* ── Filas de resultado ─────────────────────────────────────── */
.ast-busqueda-recuento {
  margin: var(--space-md) 0 0;
  font-family: var(--fm);
  font-size: 13px;
  color: var(--text-light);
}

.ast-res-lista {
  display: grid;
  gap: 12px;
  margin-top: var(--space-md);
}

.ast-res {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ast-res:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ast-res-media {
  display: block;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 6px;
  /* El celeste no es decoración: es lo que se ve cuando el resultado
     no tiene imagen destacada, y así la rejilla no se desalinea. */
  background: var(--light-blue);
}

.ast-res-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ast-res-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ast-res-tipo {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

.ast-res-product .ast-res-tipo { color: var(--red); }

.ast-res-tit {
  font-family: var(--fh);
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--navy-dark);
}

.ast-res:hover .ast-res-tit { color: var(--navy); }

.ast-res-txt {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-mid);
}

.ast-res-meta {
  font-family: var(--fm);
  font-size: 12px;
  color: var(--text-light);
}

/* ── Búsqueda sin resultados ────────────────────────────────── */
.ast-busqueda-vacia {
  max-width: 62ch;
  margin-top: var(--space-md);
}

.ast-busqueda-vacia-lede {
  margin: 0 0 8px;
  font-family: var(--fh);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--navy-dark);
}

.ast-busqueda-vacia-ayuda {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ── Salidas ────────────────────────────────────────────────── */
.ast-404-sugerencias,
.ast-404-salidas,
.ast-busqueda-salidas {
  margin-top: var(--space-lg);
}

.ast-salidas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ast-salida {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ast-salida:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.ast-salida-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--light-blue);
  color: var(--navy-dark);
}

.ast-salida-tit {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--navy-dark);
}

.ast-salida-txt {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-mid);
}

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ast-salidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Móvil ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ast-buscador { flex-wrap: wrap; }
  .ast-buscador-campo { flex: 1 1 100%; }
  .ast-buscador-btn { flex: 1 1 100%; justify-content: center; }

  .ast-salidas { grid-template-columns: minmax(0, 1fr); }

  .ast-res {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .ast-res-media { width: 64px; height: 64px; }
}

/* ══════════════════════════════════════════════════════════════
   BOTÓN FANTASMA SOBRE FONDO CLARO — 05/09/2026

   `.btn-ghost` nació para el hero azul: borde y texto blancos. Sobre
   el `--off-white` de `.ast-st` desaparece por completo. Este
   modificador conserva la forma y le da los colores invertidos.

   Lo estrena la sección «¿No compraste tu máquina aquí?» de la
   página de servicio técnico.
══════════════════════════════════════════════════════════════ */
.btn-ghost--claro {
  border-color: rgba(14, 99, 184, 0.35);
  color: var(--navy-dark);
  backdrop-filter: none;
}

.btn-ghost--claro:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(14, 99, 184, 0.06);
}

/* Enlace al servicio técnico dentro del bloque de respaldo de la ficha
   (06/09/2026). El estilo lo pone `.ast-porque-link`, que ya existe y
   es azul sobre claro; aquí sólo hace falta separarlo de la lista y
   que respete el margen del bloque. */
.ast-respaldo-link {
  display: inline-block;
  margin-top: 14px;
}

/* ══════════════════════════════════════════════════════════════
   CATÁLOGO, CATEGORÍA Y MARCA EN MÓVIL — 06/09/2026

   Los tres son dos plantillas distintas, conviene no confundirlas:
   - `/catalogo-maquinas-de-coser/` es una PÁGINA con el shortcode de
     rejilla de `inc/woodmart-compat.php` (`.wdm-products-grid`).
   - Las categorías (`/remalladora-industrial/`) y las marcas
     (`/marca/maquinas-de-coser-sakura/`) sí usan
     `woocommerce/archive-product.php` con `ul.products`.

   Medido a 375x812 antes de tocar nada.
══════════════════════════════════════════════════════════════ */

/* ── 1. El subrayado de las tarjetas (NO es cosa de móvil) ─────

   `.page-main-content a { text-decoration: underline }` es la única
   regla de su bloque SIN el combinador `>` que usan sus vecinas
   (`.page-main-content > p`, `> ul`, `> h2`…). Se escribió para que
   los enlaces de las páginas legales se vieran como enlaces, pero
   alcanza a cualquier descendiente — y el catálogo es una página,
   no un archivo.

   Resultado: los 26 títulos del catálogo salían subrayados, en móvil
   y en escritorio. Gana por especificidad (0,1,1) a `.product-card`
   (0,1,0), así que no basta con lo que ya había.

   El subrayado lo dibuja el ANCESTRO: por eso los hijos computaban
   `text-decoration-line: none` y aun así se veía la raya. Hay que
   apagarlo en el propio `<a>`. */
.page-main-content a.product-card,
.page-main-content .btn-main,
.page-main-content .btn-ghost {
  text-decoration: none;
}


/* ── 2. Tablet ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .woo-shop-header { padding: 44px clamp(1.25rem, 5vw, 3rem) 36px; }
  .woo-shop-controls { padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem); }
}


/* ── 3. Móvil ─────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* La cabecera se comía 700 px de una pantalla de 812: el primer
     producto no aparecía hasta el píxel 984. Más de una pantalla
     entera de scroll antes de ver una sola máquina. */
  .woo-shop-header {
    padding-top: 32px;
    padding-bottom: 26px;
  }

  /* El mayor culpable, y no era el que parecía: el H1 tenía
     `line-height: 1.6`. Para un titular de 52 px eso son 83 px de
     interlineado y 166 px de alto en dos líneas. En un titular de
     display el interlineado va pegado. */
  .woo-shop-header h1 {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.08;
  }

  /* La descripción de categoría son tres párrafos que en 375 px se
     convierten en doce líneas. No se recorta —es el texto que
     posiciona y el que orienta a quien llega— pero se aprieta. */
  .woo-cat-desc p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  .woo-cat-desc p:last-child { margin-bottom: 0; }

  /* Los controles tenían 48 px de padding lateral en un viewport de
     375, más del doble que la cabecera. */
  .woo-shop-controls {
    padding-top: 14px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .woo-shop-controls .woocommerce-breadcrumb { padding: 0 0 10px; }

  /* 12 px en un <select> hace que Safari en iOS haga ZOOM sobre la
     página al enfocarlo, y luego el usuario se queda con la página
     ampliada. Es la misma razón por la que el campo del buscador
     lleva 16 px.

     El `.woocommerce-page` delante NO sobra: quien fija los 12 px es
     `.woocommerce-page .woocommerce-ordering select` (0,2,1), así que
     un selector de (0,1,1) pierde. Probado en vivo el 06/09. */
  .woocommerce-page .woocommerce-ordering select,
  .woocommerce-page .woo-loop-meta select {
    font-size: 16px;
    min-height: 44px;
  }
  .woo-loop-meta { gap: 10px; }

  /* La barra flotante de redes es `position: fixed` y ocupa los 44 px
     pegados al borde derecho (x 326–370 en un viewport de 375). No se
     toca —es decisión del propietario que se quede— pero sí se aparta
     el texto de debajo: sin esto, la descripción de categoría pierde
     una palabra por línea detrás de los iconos, y eso es texto que se
     lee, no un botón que se pulsa.

     Se aparta SÓLO la descripción, no toda la cabecera: apartando el
     `.woo-header-inner` entero, el H1 perdía ancho y «Remalladora
     Industrial» se partía en dos líneas, que son 50 px más de scroll
     a cambio de nada — el titular queda por encima de la barra.

     La rejilla de productos también pasa por debajo, pero ahí la
     barra tapa el borde de una tarjeta, no una frase. */
  .woo-cat-desc { padding-right: 56px; }

  /* Dos columnas. El catálogo son 26 tarjetas de ~300 px de alto: a
     una columna son 10.670 px de página. A dos, 7.734. La imagen
     ocupa 140 px, así que entra de sobra en una tarjeta de 162.
     El `!important` es obligado: las reglas que fuerzan una columna
     más arriba en este archivo también lo llevan. */
  .wdm-products-grid,
  .woocommerce-page ul.products,
  .woocommerce-page ul.products.columns-2,
  .woocommerce-page ul.products.columns-3,
  .woocommerce-page ul.products.columns-4,
  .woocommerce-page ul.products.columns-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .woocommerce-page ul.products { padding: 1rem 0.75rem !important; }

  /* La caja de imagen mide 220 px de alto pensada para una tarjeta
     ancha. En una de 162 deja demasiado aire arriba y abajo. */
  .product-card-img { height: 150px; padding: 0.75rem; }
  .product-card-body { padding: 0.75rem 0.75rem 0.625rem; }
  .pc-name { font-size: 13px; }
}


/* ── 4. Teléfonos muy estrechos ───────────────────────────────
   El corte va en 340 px, no en 380. Se escribió primero en 379 y
   habría sido un tiro en el pie: 375 px es la anchura de iPhone SE
   y mini —y la anchura estándar de prueba—, así que la regla habría
   devuelto a UNA columna justo en el móvil más común, deshaciendo
   todo lo de arriba sin que se notara.

   A 360 px (el Android típico) dos columnas dan tarjetas de 162 px,
   las mismas que se verificaron a 375. Por debajo de 340 ya quedan
   en ~142 y ahí sí compensa una sola. */
@media (max-width: 340px) {
  .wdm-products-grid,
  .woocommerce-page ul.products,
  .woocommerce-page ul.products.columns-2,
  .woocommerce-page ul.products.columns-3,
  .woocommerce-page ul.products.columns-4,
  .woocommerce-page ul.products.columns-5 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .product-card-img { height: 190px; }
}