/*
 * Theme Name: CyberPlus Child
 * Template: astra
 * Version: 2.0.0
 */

/* ═══════════════════════════════════════════════
   VARIABLES GLOBALES
   ═══════════════════════════════════════════════ */
:root {
  --cp-navy:     #0e1a33;
  --cp-navy2:    #101d35;
  --cp-navy3:    #172542;
  --cp-sky:      #3aa8ff;
  --cp-sky-soft: rgba(58,168,255,.1);
  --cp-muted:    #6b85a8;
  --cp-text:     #c8daf0;
  --cp-border:   rgba(58,168,255,.15);
}

/* ═══════════════════════════════════════════════
   FONDO GLOBAL
   ═══════════════════════════════════════════════ */
html {
  background-color: var(--cp-navy);
  background-image:
    linear-gradient(rgba(58,168,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,168,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
}
body, #page, .site, .ast-site-content-wrap,
.entry-content, .ast-article-post, #content, #primary,
.ast-container, .site-content,
section.cp-hero, .cp-hero-wrap, div.cp-productos-section {
  background-color: transparent !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════
   TIPOGRAFÍA GLOBAL
   ═══════════════════════════════════════════════ */
body,
.entry-content, .entry-content p, .entry-content li, .entry-content a,
.woocommerce-loop-product__title,
.site-footer, .site-footer p, .site-footer a,
h1, h2, h3, h4, h5, h6, .entry-title, .page-title {
  font-family: 'Inter', sans-serif !important;
}
.cp-hero-inner h1, .cp-mega-promo h4,
.cp-reviews-header h2, .cp-productos-header h2 {
  font-family: 'Space Grotesk', sans-serif !important;
}

/* ═══════════════════════════════════════════════
   STICKY HEADER
   ═══════════════════════════════════════════════ */
#cp-custom-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: var(--cp-navy);
}
.site-header { display: none !important; }

/* ═══════════════════════════════════════════════
   TOPBAR URGENTE
   ═══════════════════════════════════════════════ */
.cp-topbar-urgent {
  background: #c93837;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cp-topbar-urgent .cp-topbar-text { color: #fff; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; }
.cp-topbar-urgent .cp-topbar-btn {
  background: #fff; color: #7a1f1f;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px; padding: 6px 16px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s;
}
.cp-topbar-urgent .cp-topbar-btn:hover { background: #f0f0f0; color: #601818; }

/* ═══════════════════════════════════════════════
   HEADER ROW 1 — Logo + cuenta + carrito
   ═══════════════════════════════════════════════ */
.cp-header-row1 {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cp-header-row1 .cp-row-inner {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 14px 28px;
}
.cp-logo-wrap { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
a.cp-logo {
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 40px;
  color: #3aa8ff; text-decoration: none; display: flex; align-items: center; line-height: 1;
}
a.cp-logo span:first-child { color: #fff; }
span.cp-logo-dot {
  display: inline-flex; width: 10px; height: 10px; border-radius: 50%;
  background: #3aa8ff; box-shadow: 0 0 8px #3aa8ff;
  animation: cp-pulse 1.5s ease-in-out infinite;
  margin-left: 3px; align-self: flex-end; margin-bottom: 2px;
}
@keyframes cp-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #3aa8ff; }
  50%       { opacity: .3; box-shadow: 0 0 16px #3aa8ff; }
}
.cp-logo-tagline { font-family: 'Inter', sans-serif; font-size: 12px; color: #fff; }
.cp-account-row { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.cp-account-row a { color: #cad5e8 !important; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; text-decoration: none !important; }
.cp-cart-icon {
  background: rgba(58,168,255,.15); border: 1px solid rgba(58,168,255,.3);
  border-radius: 6px; padding: 6px 12px;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none !important; position: relative;
}
.cp-cart-icon i { font-size: 16px; color: #3aa8ff; }
.cp-cart-badge {
  position: absolute; top: -7px; right: -8px;
  background: #3aa8ff; color: var(--cp-navy);
  font-size: 9px; font-weight: 700;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════
   HEADER ROW 2 — Menú chips
   ═══════════════════════════════════════════════ */
.cp-header-row2 {
  background: #101d35;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.cp-header-row2 .cp-row-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 10px 28px;
  flex-wrap: wrap;
}
.cp-row-inner { max-width: 1320px; margin: 0 auto; }
.cp-nav-left { display: flex; align-items: center; gap: 8px; flex: 1 1 50%; min-width: 0; }
#cp-custom-header .main-header-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex: 0.8; min-width: 0;
  background: transparent; /* Cambio 7: Astra pisaba esto con #f9f9f9 por reusar la clase main-header-menu */
}
#cp-custom-header .main-header-menu > li { list-style: none; width: 100%; }
.cp-service-chip {
  color: #fff !important;
  background: rgba(58,168,255,.1); border: 1px solid rgba(58,168,255,.22);
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
  height: 38px; padding: 0 16px; box-sizing: border-box; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none !important; white-space: nowrap; transition: background .15s;
  width: 100%;
}
.cp-service-chip:hover { background: rgba(58,168,255,.18); }
.cp-service-chip i { font-size: 14px; color: #3aa8ff; }
.cp-chev { font-size: 12px !important; color: #6b85a8 !important; transition: transform .2s; }
.cp-has-dropdown.cp-dropdown-open .cp-chev { transform: rotate(180deg); }
@media (min-width: 861px) {
  .cp-has-dropdown:hover .cp-chev { transform: rotate(180deg); }
}

.cp-hardware-chip {
  color: #fff !important;
  background: rgba(58,168,255,.1); border: 1px solid rgba(58,168,255,.22);
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
  height: 38px; padding: 0 16px; box-sizing: border-box; border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none !important; white-space: nowrap;
  flex: 1.3; min-width: 0;
}
.cp-hardware-link { display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none !important; flex-shrink: 0; }
.cp-hardware-link i { font-size: 14px; color: #3aa8ff; }
.cp-hardware-chip .divider { width: 1px; height: 14px; background: rgba(255,255,255,.2); flex-shrink: 0; }
.cp-hardware-chip input.ph {
  border: none; outline: none; background: transparent;
  color: #9fb4d2; font-family: 'Inter', sans-serif; font-size: 12.5px;
  min-width: 0; width: 100%; padding: 0; cursor: text;
}
.cp-hardware-chip input.ph::placeholder { color: #9fb4d2; }
.cp-hardware-chip input.ph::-webkit-search-cancel-button,
.cp-hardware-chip input.ph::-webkit-search-decoration { -webkit-appearance: none; }

/* ── Dropdown ── */
.cp-has-dropdown { position: relative; }
.cp-has-dropdown .cp-dropdown {
  display: none; position: absolute; top: 100%; margin-top: -6px; left: 0;
  background: #172542; border: 1px solid rgba(58,168,255,.12);
  border-radius: 12px; padding: 8px 0; min-width: 260px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); z-index: 9999;
}
@media (min-width: 861px) {
  .cp-has-dropdown:hover .cp-dropdown { display: block; }
}
.cp-has-dropdown .cp-dropdown a {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  color: #9fb4d2; font-size: 13px; text-decoration: none; transition: background .15s;
}
.cp-has-dropdown .cp-dropdown a:hover { background: #3aa8ff; color: #0e1a33; }
.cp-dropdown.cp-hardware-dropdown { border: 1px solid rgba(58,168,255,.15); border-radius: 8px; min-width: 220px; width: 220px; }
.cp-dropdown.cp-hardware-dropdown a { color: #c8daf0; border-bottom: 1px solid rgba(58,168,255,.15); }
.cp-dropdown.cp-hardware-dropdown a.cp-dropdown-vertodas { color: #3aa8ff; font-weight: 600; border-bottom: none; }
.cp-hardware-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cp-has-dropdown .cp-dropdown a:hover strong { color: #0e1a33; }
.cp-has-dropdown .cp-dropdown a:hover span { color: rgba(14,26,51,.7); }
.cp-has-dropdown .cp-dropdown a:hover i { color: #0e1a33; }
.cp-has-dropdown .cp-dropdown a i { color: #3aa8ff; font-size: 16px; flex-shrink: 0; }
.cp-has-dropdown .cp-dropdown a div { display: flex; flex-direction: column; gap: 2px; }
.cp-has-dropdown .cp-dropdown a strong { color: #fff; font-size: 13px; font-weight: 600; }
.cp-has-dropdown .cp-dropdown a span { font-size: 12px; color: #cdd3db; }

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.cp-hero-wrap {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  width: 100vw; max-width: 100vw; padding: 0;
}
.ast-article-post:has(.cp-hero-wrap),
#primary:has(.cp-hero-wrap) { padding-top: 0 !important; margin-top: 0 !important; }
.ast-article-post:has(.cp-hero-wrap) .entry-header { margin-top: 0 !important; margin-bottom: 0 !important; }
.cp-hero {
  border-radius: 0; padding: 36px 32px 24px;
  position: relative; overflow: visible;
  display: flex; flex-direction: column; justify-content: center;
}
.cp-hero::before {
  content: ''; position: absolute;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(58,168,255,.2), transparent 65%);
  top: -180px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.cp-hero-inner {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto; padding: 0 24px; text-align: center;
}
.cp-hero-inner::before {
  content: none;
}
.cp-hero-inner h1 { font-weight: 800; font-size: clamp(32px,5.5vw,48px); color: #fff; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.015em; }
.cp-hero-inner p { font-size: 18px; color: #9fb4d2; margin: 0 0 26px; }

/* ═══════════════════════════════════════════════
   STATS ROW
   ═══════════════════════════════════════════════ */
.cp-stats-row {
  display: flex; justify-content: center; align-items: center;
  gap: 0; border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 16px 0; margin: 24px 0 0; flex-wrap: nowrap;
}
.cp-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 24px; background: transparent; border: none; }
.cp-stat-info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cp-stat-info strong { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.cp-stat-info span { font-size: 13px; color: #6b85a8; white-space: nowrap; }
.cp-stat-sep { width: 1px; height: 50px; background: rgba(255,255,255,.07); flex-shrink: 0; }

/* ── Fila de estadísticas en mobile: pasa a grilla 2x2 ── */
@media (max-width: 480px) {
  .cp-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 0 !important;
    padding: 18px 10px !important;
  }
  .cp-stat { padding: 0 8px !important; min-width: 0 !important; }
  .cp-stat-info span { white-space: normal !important; }
  .cp-stat-sep { display: none !important; }
  .cp-reviews-badges { flex-direction: column !important; flex-wrap: wrap !important; }
  .cp-reviews-badge { white-space: normal !important; text-align: center !important; max-width: 100% !important; }
  .cp-hero-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .cp-hero { overflow: hidden !important; }
}

/* ═══════════════════════════════════════════════
   ESPACIADOR (usado entre secciones)
   ═══════════════════════════════════════════════ */
.cp-cards-spacer { height: 30px; }

/* ═══════════════════════════════════════════════
   RESEÑAS
   ═══════════════════════════════════════════════ */
.cp-reviews-section { position: relative; z-index: 1; padding: 0 20px 30px; font-family: Inter, sans-serif; }
.cp-reviews-header { text-align: center; padding-top: 8px; margin-bottom: 36px; }
.cp-reviews-header h2 { font-family: 'Space Grotesk', sans-serif !important; font-size: clamp(28px,4vw,44px) !important; font-weight: 800 !important; letter-spacing: -.72px; line-height: 1.2; color: #fff !important; margin: 0 0 16px; }
.cp-reviews-badges { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: nowrap; }
a.cp-reviews-badge { text-decoration: none !important; cursor: pointer; }
a.cp-reviews-badge:hover { border-color: rgba(58,168,255,.4) !important; }
.cp-reviews-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(23,37,66,.8); border: 1px solid rgba(58,168,255,.2); border-radius: 999px; padding: 7px 18px; white-space: nowrap; font-size: 13px; color: #9fb4d2; }
.cp-reviews-badge .stars { color: #fbbc04; font-size: 15px; letter-spacing: 1px; }
.cp-reviews-badge strong { color: #fff; }
.cp-reviews-badge .g-blue   { color: #4285F4; font-weight: 700; }
.cp-reviews-badge .g-red    { color: #EA4335; font-weight: 700; }
.cp-reviews-badge .g-yellow { color: #FBBC05; font-weight: 700; }
.cp-reviews-badge .g-green  { color: #34A853; font-weight: 700; }
.cp-carousel-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cp-carousel-viewport { overflow: hidden; flex: 1; }
.cp-carousel-track { display: flex; transition: transform .4s ease; width: 100%; }
.cp-review-card { min-width: calc(33.333% - 8px); margin-right: 12px; background: #172542; border: 1px solid rgba(58,168,255,.12); border-radius: 14px; padding: 10px 14px; box-sizing: border-box; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; transition: border-color .2s; }
.cp-review-card:hover { border-color: rgba(58,168,255,.35); }
.cp-review-top { display: flex; align-items: flex-start; gap: 8px; }
.cp-review-avatar { width: 34px; height: 34px; border-radius: 50%; background: #3aa8ff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--cp-navy); flex-shrink: 0; }
.cp-review-avatar.av1 { background: #3aa8ff; }
.cp-review-avatar.av2 { background: #5bc4a0; }
.cp-review-avatar.av3 { background: #f5a623; }
.cp-review-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cp-review-meta p:empty, .cp-review-top > p:empty, .cp-review-card > p:empty { display: none; margin: 0; padding: 0; }
.cp-review-meta br { display: none; }
.cp-review-name  { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.cp-review-date  { font-size: 11px; color: #6b85a8; }
.cp-review-stars { color: #fbbc04; font-size: 12px; letter-spacing: 1px; }
.cp-review-text  { font-size: 12px; color: #b8c6de; line-height: 1.4; margin: 0; }
.cp-carousel-arrow { background: rgba(23,37,66,.9); border: 1px solid rgba(58,168,255,.25); color: #3aa8ff; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s; padding: 0; }
.cp-carousel-arrow:hover { background: rgba(58,168,255,.15); border-color: rgba(58,168,255,.6); }
.cp-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(58,168,255,.25); border: none; cursor: pointer; padding: 0; transition: background .2s, width .2s; }
.cp-dot.active { background: #3aa8ff; width: 22px; border-radius: 4px; }

/* ═══════════════════════════════════════════════
   SECCIÓN PRODUCTOS (shortcode cp_productos)
   ═══════════════════════════════════════════════ */
.cp-productos-section { padding: 60px 24px; }
.cp-productos-header { text-align: center; margin-bottom: 28px; }
.cp-productos-filtros { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-bottom: 32px !important; background: transparent !important; border: none !important; padding: 0 !important; }
/* Cambio 12: los botones de categoria pasan a ser "chips" navy con borde
   celeste sutil y texto claro -- mismo estilo que los botones "Soporte
   Tecnico" / "Hardware" del header -- para resolver el bajo contraste
   contra el fondo navy general. El celeste solido #3aa8ff (el mismo del
   boton "Carrito") queda afuera a proposito: ese acento se reserva para
   la accion de compra y no debe repetirse en navegacion/filtros. Se
   aplica igual en mobile y desktop. */
.cp-filtro-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 18px !important; color: #c8daf0 !important; font-size: 13px !important; font-weight: 500 !important; background: #172542 !important; border: 1px solid rgba(58,168,255,.25) !important; border-radius: 999px !important; cursor: pointer !important; position: relative !important; transition: background .2s, border-color .2s, color .2s !important; font-family: Inter, sans-serif !important; box-shadow: none !important; }
.cp-filtro-btn i { font-size: 14px; color: rgba(200,218,240,.6); transition: color .2s; }
.cp-filtro-btn:hover { background: rgba(58,168,255,.16) !important; border-color: rgba(58,168,255,.4) !important; color: #fff !important; }
.cp-filtro-btn:hover i { color: #fff !important; }
.cp-filtro-btn.active { background: rgba(58,168,255,.16) !important; border-color: rgba(58,168,255,.45) !important; color: #fff !important; }
.cp-filtro-btn.active i { color: #fff !important; }
.cp-filtro-sep { display: none !important; }
/* Tarea B: el filtro "Llega hoy" ahora es una pildora solida igual al badge verde de la grilla/ficha (.cp-badge-llega-hoy), en vez del estilo "tab" de texto que usan los demas filtros de categoria -- se lo distingue a proposito porque no es una categoria, es un atajo de disponibilidad */
.cp-filtro-btn.cp-filtro-llega-hoy {
  background: #00A650 !important;
  color: #fff !important;
  border-radius: 99px !important;
  padding: 7px 16px !important;
}
.cp-filtro-btn.cp-filtro-llega-hoy i {
  color: #fff !important;
}
.cp-filtro-btn.cp-filtro-llega-hoy:hover,
.cp-filtro-btn.cp-filtro-llega-hoy:hover i {
  background: #00913f !important;
  color: #fff !important;
}
.cp-filtro-btn.cp-filtro-llega-hoy.active,
.cp-filtro-btn.cp-filtro-llega-hoy.active i {
  background: #00A650 !important;
  color: #fff !important;
}
.cp-filtro-btn.cp-filtro-llega-hoy.active {
  box-shadow: 0 0 0 2px rgba(255,255,255,.5) !important;
}
.cp-filtro-btn.cp-filtro-llega-hoy.active::after {
  display: none !important;
}

/* Cambio 13 (ajuste): "flex-basis: 100%" estiraba el propio boton a
   todo el ancho -- flex-basis define el tamaño del item, no solo si
   hace salto de linea, por eso quedaba como una barra larga en vez de
   una pildora. Fix: un pseudo-elemento invisible del contenedor actua
   como "salto de linea" (el que lleva flex-basis:100%), y el boton se
   reordena para caer despues de ese salto -- así mantiene su tamaño
   compacto (flex: 0 0 auto), igual que los botones de categoria.
   margin-right:auto lo alinea a la izquierda de su propia fila (el
   contenedor centra por default con justify-content). Mismo boton,
   mismo color, solo cambia el layout. En mobile no se toca -- ahi ya
   convive bien junto a las categorias. */
@media (min-width: 769px) {
  .cp-productos-filtros::after {
    content: '';
    order: 1;
    flex-basis: 100%;
    width: 0;
    height: 0;
  }
  .cp-filtro-btn.cp-filtro-llega-hoy {
    order: 2;
    flex: 0 0 auto !important;
    margin-top: 16px !important;
    margin-right: auto !important;
  }
}

/* Tarea 2: selector de orden por precio, junto a los filtros de categoria */
.cp-productos-orden { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 auto 24px !important; font-family: Inter, sans-serif !important; }
.cp-productos-orden label { color: #6b85a8 !important; font-size: 13px !important; font-weight: 500 !important; }
.cp-productos-orden select#cp-orden-precio { background: rgba(14,26,51,.95) !important; color: #fff !important; border: 1px solid rgba(58,168,255,.25) !important; border-radius: 8px !important; padding: 6px 12px !important; font-size: 13px !important; font-family: Inter, sans-serif !important; cursor: pointer !important; outline: none !important; }
.cp-productos-orden select#cp-orden-precio:hover, .cp-productos-orden select#cp-orden-precio:focus { border-color: rgba(58,168,255,.6) !important; }
@media (max-width: 480px) { .cp-productos-orden { flex-wrap: wrap; } }

#cp-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; max-width: 1100px !important; margin: 0 auto !important; min-height: 200px; }
/* Cambio 15: boton "Cargar mas" -- es hijo directo de #cp-grid (display:grid),
   asi que grid-column:1/-1 lo hace ocupar toda la fila sin importar si son
   4 columnas (desktop) o 1 (mobile, ver media query mas abajo). Mismo
   lenguaje visual "chip" navy que los botones de categoria (Cambio 12). */
.cp-btn-cargar-mas {
  grid-column: 1 / -1;
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 12px 30px;
  background: #172542;
  border: 1px solid rgba(58,168,255,.25);
  border-radius: 999px;
  color: #c8daf0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.cp-btn-cargar-mas:hover {
  background: rgba(58,168,255,.16);
  border-color: rgba(58,168,255,.4);
  color: #fff;
}
.cp-btn-cargar-mas:disabled {
  opacity: .6;
  cursor: default;
}
.cp-prod-card { background: rgba(14,26,51,.95) !important; border: 1px solid rgba(58,168,255,.15) !important; border-radius: 14px !important; overflow: hidden !important; transition: all .25s !important; display: flex !important; flex-direction: column !important; cursor: pointer !important; }
.cp-prod-card:hover { border-color: #3aa8ff !important; transform: translateY(-3px) !important; }
.cp-prod-img { width: 100% !important; height: 180px !important; background: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; }
.cp-prod-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 4px !important; }
.cp-prod-badge { position: absolute !important; top: 8px !important; left: 8px !important; background: #e24b4a !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 99px !important; }
.cp-prod-badge-48hs { top: 8px !important; left: auto !important; right: 8px !important; background: #172542 !important; border: none !important; color: #ffffff !important; display: inline-flex !important; align-items: center; gap: 3px; font-weight: 100 !important; letter-spacing: 0.4px; }
.cp-prod-badge-48hs i { font-size: 11px; }
.cp-prod-body { padding: 14px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; }
.cp-prod-cat { font-size: 10px !important; color: #3aa8ff !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 4px !important; }
.cp-prod-name { font-size: 13px !important; color: #fff !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 8px !important; min-height: 36px !important; }
.cp-prod-price { margin-bottom: 12px !important; margin-top: auto !important; }
.cp-prod-price .woocommerce-Price-amount { font-size: 16px !important; color: #3aa8ff !important; font-weight: 700 !important; font-family: 'Space Grotesk', sans-serif !important; }
.cp-prod-price del .woocommerce-Price-amount { font-size: 12px !important; color: #3b506e !important; }
.cp-prod-btn { display: block !important; width: 100% !important; padding: 9px !important; background: #3aa8ff !important; border: none !important; border-radius: 8px !important; color: #0e1a33 !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; transition: background .2s !important; font-family: Inter, sans-serif !important; }
.cp-prod-btn.loading { opacity: .6 !important; pointer-events: none !important; }
.cp-prod-body a.added_to_cart {
  display: block !important;
  text-align: center !important;
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #3aa8ff !important;
  text-decoration: underline !important;
}
.cp-prod-btn:hover { background: #5cc9ff !important; color: #0e1a33 !important; }

/* Hover en "Agregar al carrito" de la ficha de producto — no tenía ningún feedback */
.single_add_to_cart_button {
  transition: background .2s, box-shadow .2s, transform .2s !important;
}
.single_add_to_cart_button:hover {
  background: #5cc9ff !important;
  box-shadow: 0 4px 10px rgba(58,168,255,.35) !important;
  transform: translateY(-1px) !important;
}

.single_add_to_cart_button.button.alt {
  height: 26px !important;
  padding: 0px 16px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
}

.cp-sin-productos { color: #6b85a8; text-align: center; padding: 40px; grid-column: 1/-1; }
.cp-grid-loading { display: flex; align-items: center; justify-content: center; grid-column: 1/-1; padding: 40px; }
.cp-grid-loading::after { content: ''; width: 32px; height: 32px; border: 3px solid rgba(58,168,255,.2); border-top-color: #3aa8ff; border-radius: 50%; animation: cp-spin .7s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════
   PRODUCTOS RELACIONADOS — mismo estilo que cp_productos
   ═══════════════════════════════════════════════ */
.related.products { margin-top: 48px; }
.related.products > h2 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: #0e1a33; margin-bottom: 20px; }
.related.products ul.products { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.related.products ul.products li.product { position: relative !important; background: rgba(14,26,51,.95) !important; border: 1px solid rgba(58,168,255,.15) !important; border-radius: 14px !important; overflow: hidden !important; transition: all .25s !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; }
.related.products ul.products li.product .onsale {
  position: absolute !important;
  top: 8px !important; left: 8px !important;
  background: #e24b4a !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  margin: 0 !important;
  min-height: 0 !important; min-width: 0 !important;
  line-height: 1.4 !important;
  z-index: 2;
  text-transform: uppercase;
}
.related.products ul.products li.product.outofstock::before {
  content: "AGOTADO";
  position: absolute !important;
  top: 8px !important; left: 8px !important;
  background: #e24b4a !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  z-index: 2;
  text-transform: uppercase;
}
.related.products ul.products li.product p.stock {
  display: none !important;
}
.related.products ul.products li.product .ast-shop-product-out-of-stock {
  display: none !important;
}
.related.products ul.products li.product:hover { border-color: #3aa8ff !important; transform: translateY(-3px) !important; }
.related.products ul.products li.product > a:first-child { display: flex !important; flex-direction: column !important; flex: 1 !important; text-decoration: none !important; }
.related.products ul.products li.product img { width: 100% !important; height: 160px !important; object-fit: contain !important; background: #fff !important; padding: 8px !important; }
.related.products ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; color: #fff !important; font-weight: 600 !important; line-height: 1.4 !important; padding: 14px 14px 4px !important; margin: 0 !important; min-height: 36px !important; }
.related.products ul.products li.product .price { padding: 0 14px 12px !important; margin-top: auto !important; }
.related.products ul.products li.product .price .woocommerce-Price-amount { font-size: 16px !important; color: #3aa8ff !important; font-weight: 700 !important; font-family: 'Space Grotesk', sans-serif !important; }
.related.products ul.products li.product .price del .woocommerce-Price-amount { font-size: 12px !important; color: #3b506e !important; }
.related.products ul.products li.product a.button { display: block !important; width: calc(100% - 28px) !important; margin: 0 14px 14px !important; padding: 9px !important; background: #3aa8ff !important; border: none !important; border-radius: 8px !important; color: #0e1a33 !important; font-size: 12px !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; transition: background .2s !important; font-family: Inter, sans-serif !important; }
.related.products ul.products li.product a.button:hover { background: #5cc9ff !important; color: #0e1a33 !important; }
.related.products ul.products li.product a.button.cp-btn-consultar {
  background: #128C46 !important;
  border: 1px solid #128C46 !important;
  color: #0e1a33 !important;
}
.related.products ul.products li.product a.button.cp-btn-consultar:hover {
  background: #25D366 !important;
  color: #0e1a33 !important;
}
.related.products ul.products li.product a.button.cp-btn-consultar:active {
  background: #4CE08A !important;
  color: #0e1a33 !important;
}

@media (max-width: 980px) {
  .related.products ul.products { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
  .related.products ul.products { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════
   FEATURES BAR
   ═══════════════════════════════════════════════ */
.cyber-features-bar { padding: 32px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.feature-item { background: #172542; border-radius: 12px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; border: 1px solid rgba(58,168,255,.1); }
.feature-icon-circle { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(58,168,255,.12); border: 1px solid rgba(58,168,255,.25); }
.feature-icon-circle svg path, .feature-icon-circle svg rect, .feature-icon-circle svg circle { stroke: #3aa8ff; fill: none; }
.feature-title { font-size: 12px; font-weight: 700; color: #fff; font-family: Inter, sans-serif; margin: 0; }
.feature-desc  { font-size: 11px; color: #6b85a8; font-family: Inter, sans-serif; margin: 0; line-height: 1.4; }

/* ── Franja de confianza en la ficha de producto (única ubicación real) ── */
body .cyber-features-bar:not(.cp-trust-inline-inner) { display: none !important; }
.cp-trust-inline {
  background-color: var(--cp-navy);
  background-image:
    linear-gradient(rgba(58,168,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,168,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 48px 24px;
}
.cp-trust-inline-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 !important;
  gap: 32px !important;
}
.cp-trust-inline .cp-trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.cp-trust-inline .cp-trust-item i { font-size: 34px; color: #3aa8ff; margin-bottom: 4px; }
.cp-trust-inline .cp-trust-item strong { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.cp-trust-inline .cp-trust-item span { font-size: 13.5px; color: #6b85a8; }

/* ═══════════════════════════════════════════════
   WOOCOMMERCE — FIX GENERALES
   ═══════════════════════════════════════════════ */
.woocommerce-products-header__title.page-title:empty { display: none !important; }
.wc-block-components-notice-banner, .wc-block-store-notices,
.woocommerce-message, .woocommerce-notices-wrapper { display: none !important; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 980px) {
  .cp-header-row1 { flex-direction: column; gap: 12px; }
  .cp-header-row2 { flex-wrap: wrap; }
  #cp-grid { grid-template-columns: repeat(2,1fr) !important; }
  .cyber-features-bar { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .cp-hero { padding: 36px 20px 0; }
  .cp-review-card { min-width: 100%; margin-right: 0; }
  .cp-carousel-arrow { display: none; }
  .cp-filtro-btn { padding: 6px 10px; font-size: 12px; }
  #cp-grid { grid-template-columns: 1fr !important; }
  .cyber-features-bar { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   MOBILE — Menú de navegación personalizado
   ═══════════════════════════════════════════════ */
.cp-mobile-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 36px;
  background: transparent;
  border: 1px solid rgba(58,168,255,.3);
  border-radius: 6px;
  color: #fff; font-size: 18px;
  cursor: pointer;
}
@media (max-width: 860px) {
  .cp-mobile-nav-toggle { display: flex !important; }
  .cp-nav-left {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 8px;
    position: relative;
  }
  #cp-custom-header .main-header-menu {
    display: flex;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    gap: 4px;
    z-index: 999;
  }
  #cp-custom-header .main-header-menu.cp-mobile-open { display: flex; }
  .cp-service-chip { width: 100%; justify-content: space-between; gap: 3px; padding: 0 12px; }
  /* Cambio 9: el dropdown deja de vivir dentro de la columna angosta del
     boton que lo abre y pasa a flotar a lo ancho completo de la fila. */
  .cp-has-dropdown { position: static; }
  .cp-has-dropdown .cp-dropdown {
    position: absolute; left: 0; right: 0; top: 46px;
    display: none; box-shadow: 0 12px 30px rgba(0,0,0,.35);
    margin-top: 0; width: auto; min-width: 0;
  }
  .cp-has-dropdown.cp-dropdown-open .cp-dropdown { display: block; }

  /* Cambio 6: Hardware pasa a ser un boton propio (mismo tamano y estilo que
     Soporte Tecnico) en la misma fila; el buscador queda separado, debajo. */
  .cp-hardware-chip { display: contents; }
  .cp-hardware-has-dropdown { flex: 1 1 0; min-width: 0; }
  .cp-hardware-link {
    width: 100%; height: 38px; box-sizing: border-box;
    justify-content: space-between; padding: 0 12px; gap: 3px;
    background: rgba(58,168,255,.1);
    border: 1px solid rgba(58,168,255,.22);
    border-radius: 6px;
  }
  /* Cambio 9: el chevron de Soporte Tecnico quedaba pegado/desbordado porque
     el texto no tenia contenedor propio para truncar; ahora ambos labels
     truncan si hace falta y el chevron siempre queda con el mismo margen. */
  .cp-service-chip .label,
  .cp-hardware-link .label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  .cp-chev { flex-shrink: 0; }
  .cp-hardware-chip .divider { display: none; }
  .cp-hardware-search {
    flex: 1 1 100%;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(58,168,255,.1);
    border: 1px solid rgba(58,168,255,.22);
    border-radius: 6px;
  }
  .cp-hardware-chip input.ph { min-width: 0 !important; flex: 1 !important; }
}

/* Cambio 12: los chips de categoria ya llevan fondo/borde/pill propios
   en todos los tamaños de pantalla (ver .cp-filtro-btn mas arriba), asi
   que este override mobile y los separadores sueltos dejaron de hacer
   falta. */

/* ── Tarjetas de "problemas": la altura ahora se calcula sola vía JS ── */
/* ── Páginas de servicios ── */
.page-template-default .entry-header,
.page-template-default .entry-title {
  display: none !important;
}
.page-template-default .entry-content,
.page-template-default #primary,
.page-template-default #content,
.page-template-default .site-content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* ── Formulario de contacto (WPForms) sobre fondo oscuro ── */
.page-template-default .wpforms-field-label,
.page-template-default .wpforms-field-sublabel,
.page-template-default .wpforms-field-description,
.page-template-default .wpforms-form label {
  color: #fff !important;
}
.page-template-default .wpforms-field-required {
  color: #e24b4a !important;
}
/* ── Título y subtítulo sección productos ── */
.cp-productos-header h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(28px,4vw,44px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}
.cp-productos-header p {
  font-size: 17px !important;
  color: #9fb4d2 !important;
  margin: 0 0 20px !important;
  line-height: 1.6 !important;
}
.cp-productos-header .cp-accent { color: #3aa8ff !important; }
/* ── Página de producto individual ── */
.single-product .site-content,
.single-product #primary,
.single-product #content,
.single-product .entry-content,
.single-product .ast-article-post,
.woocommerce-page.single-product {
  background-color: #ffffff !important;
  background-image: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.single-product .summary,
.single-product .woocommerce-product-gallery,
.single-product .product_title,
.single-product .price,
.single-product p.stock,
.single-product .woocommerce-product-details__short-description {
  color: #0e1a33 !important;
}
.single-product .product_meta a,
.single-product .product_meta span {
  color: #3aa8ff !important;
}
.single-product p.stock.out-of-stock {
  display: inline-block !important;
  background: #e24b4a !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  text-transform: uppercase !important;
}

/* ── Productos relacionados: fondo navy igual que el inicio (solo esta sección) ── */
.single-product .related.products {
  background-color: var(--cp-navy) !important;
  background-image:
    linear-gradient(rgba(58,168,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,168,255,.05) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  padding: 48px 24px 56px !important;
  box-sizing: border-box !important;
}
.single-product .related.products > h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-align: center !important;
  max-width: 1100px !important;
  margin: 0 auto 20px !important;
}
.single-product .related.products ul.products {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ── Colapsar la sección "Above Footer" de Astra (fila vacía, forzaba 60px) ── */
.site-above-footer-wrap,
.ast-builder-footer-grid-columns.site-above-footer-inner-wrap,
.ast-builder-grid-row-container-inner {
  min-height: 0 !important;
  height: auto !important;
}
/* ── Footer: fondo navy sólido y texto claro, en todo el sitio ── */
.site-footer,
#colophon,
.ast-footer-overlay,
.footer-adv-overlay,
.footer-widget-area,
[class*="footer-widget-area-"],
.footer-widget-area-inner,
.footer-widget-area .widget.widget_block,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
  background-color: var(--cp-navy) !important;
  background-image: none !important;
}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] h1,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] h2,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] h3,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] h4,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] h5,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] h6 {
  color: #fff !important;
}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] p,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] li,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] span {
  color: #9fb4d2 !important;
}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] a {
  color: #cad5e8 !important;
  text-decoration: none !important;
}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] a:hover {
  color: #3aa8ff !important;
}
/* El body también tiene las clases woocommerce-page + single-product a la vez,
   así que la regla ".woocommerce-page.single-product { background:#fff }" de más
   arriba lo pinta blanco a él directamente. Lo volvemos a poner transparente. */
body.woocommerce-page.single-product {
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Página del carrito ── */
.woocommerce-cart .site-content,
.woocommerce-cart #primary,
.woocommerce-cart #content,
.woocommerce-cart .entry-content,
.woocommerce-cart .ast-article-post {
  background-color: #ffffff !important;
  background-image: none !important;
}
.woocommerce-cart .woocommerce,
.woocommerce-cart table.cart,
.woocommerce-cart .cart-collaterals {
  color: #0e1a33 !important;
}

/* ── Carrito vacío — ocultar carita ── */
.woocommerce-cart .woocommerce-cart-form ~ * .wc-empty-cart-message,
.cart-empty.woocommerce-info::before,
.woocommerce-cart .woocommerce-info::before {
  display: none !important;
}
.woocommerce-cart .woocommerce-info {
  background: rgba(58,168,255,.08) !important;
  border-color: #3aa8ff !important;
  color: #fff !important;
}
/* ── Ocultar solo la carita/imagen del carrito vacío (no el resto) ── */
.woocommerce-cart .wc-empty-cart-message img,
.woocommerce-cart .woocommerce-info img,
.wc-block-cart__empty-cart__image,
.wc-block-cart__empty-cart__ > svg,
.wc-block-cart__empty-cart__ > img,
.wc-block-cart__empty-cart__title::before { display: none !important; }

/* ── Ocultar "Nuevo en la tienda" (sugerencias de productos, no el título) ── */
.wc-block-handpicked-products,
.wp-block-woocommerce-handpicked-products { display: none !important; }
.wc-block-grid.wc-block-product-new { display: none !important; }
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading.has-text-align-center:not(.wc-block-cart__empty-cart__title) { display: none !important; }
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator { display: none !important; }
/* ── Carrito vacío: se ocultan solo la carita/imagen y "Nuevo en la tienda"
   arriba — el bloque completo NO se oculta, así el título y el botón de
   "Volver a la tienda" siguen visibles quedaría en blanco sin esto. ── */
/* ── Página de checkout ── */
.woocommerce-checkout .site-content,
.woocommerce-checkout #primary,
.woocommerce-checkout #content,
.woocommerce-checkout .entry-content,
.woocommerce-checkout .ast-article-post {
  background-color: #ffffff !important;
  background-image: none !important;
}
/* ── Ocultar leyenda de impuestos en carrito ── */
.wc-block-components-totals-taxes,
.wc-block-cart__totals-wrapper .wc-block-components-taxes,
.tax-total { display: none !important; }
/* ── Links en cards de productos ── */
a.cp-prod-name { color: #fff !important; text-decoration: none !important; }
a.cp-prod-name:hover { color: #3aa8ff !important; }
a.cp-prod-img { display: block; }
/* ── Búsqueda resultados — ancho completo ── */
.woocommerce-page.search-results #primary,
.woocommerce-page.search-results .site-main,
.woocommerce-page.search-results .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.cp-search-results-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.cp-search-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr);
  gap: 16px !important;
  width: 100% !important;
}
/* ── Precio transferencia y MP en producto ── */
.cp-precio-bars { margin: 12px 0 16px; display: flex; flex-direction: column; gap: 8px; }

.cp-precio-bar { border-radius: 6px; padding: 0 18px; height: 26px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; width: 75%; }
.cp-precio-bar-half { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; min-width: 0; }
.cp-precio-bar-transferencia .cp-precio-bar-half:first-child { align-items: baseline; gap: 8px; }
.cp-precio-bar-valor-anterior { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: line-through; white-space: nowrap; }

/* Barra 1 — precio especial transferencia */
.cp-precio-bar-transferencia { 
    background: var(--cp-navy);
}

.cp-precio-bar-valor { 
    font-size: 14px; 
    font-weight: 800; 
    color: #fff; 
    line-height: 1; 
}

.cp-precio-bar-valor .woocommerce-Price-amount { 
    font-size: 14px; 
    color: #fff; 
}

.cp-precio-bar-pill { 
    display: inline-flex; 
    align-items: center; 
    gap: 5px; 
    color: #fff; 
    font-size: 13px; /* Tamaño del texto */
    font-weight: 400; 
    letter-spacing: -0.3px; 
    white-space: nowrap; 
}

/* Tamaño del icono */
.cp-precio-bar-pill i {
    font-size: 16px; /* Tamaño del icono emparejado al texto */
}

/* Barra 2 — precio de lista Mercado Pago + cuotas */
.cp-precio-bar-mp { background: #FFD400; }
.cp-precio-bar-valor-mp { color: #0e1a33 !important; }
.cp-precio-bar-valor-mp .woocommerce-Price-amount { color: #0e1a33 !important; }
.cp-precio-bar-half-mp-derecha { gap: 5px; }
.cp-precio-bar-mp-label { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; color: #111; white-space: nowrap; letter-spacing: -0.3px;}
.cp-precio-mp-logo { width: 35px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.cp-cuotas-toggle { position: relative; display: flex; align-items: center; margin: 0; padding: 0; }
.cp-cuotas-toggle summary {
  list-style: none; cursor: pointer; user-select: none;
  background: #0e1a33; color: #fff; font-size: 13px; font-weight: 600;
  height: 24px; padding: 0 10px; box-sizing: border-box;
  border-radius: 6px; display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap; flex-shrink: 0;
}
.cp-cuotas-toggle summary::-webkit-details-marker { display: none; }
.cp-cuotas-toggle summary i { font-size: 13px; transition: transform .15s; }
.cp-cuotas-toggle[open] summary i { transform: rotate(90deg); }
.cp-cuotas-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  background: #fff; border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 220px;
}
.cp-cuotas-panel div { font-size: 14px; color: #222; padding: 4px 0; white-space: nowrap; }
.cp-cuotas-panel div:first-child { font-weight: 700; border-bottom: 1px solid #eee; margin-bottom: 4px; padding-bottom: 8px; }

/* Badge "Demora 48hs" — igualado al botón de agregar al carrito */
.cp-badge-demora-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1b5e20;
  color: #ffffff;
  
  /* Ajustes de texto para igualar al azul */
  font-size: 12px;           /* Subido de 13px a 14px */
  font-weight: 500;          /* Bajado de 700 a 600 (menos grueso) */
  
  /* Ajustes de forma y altura */
  height: 26px;              /* Bajado para emparejar la altura exacta del azul */
  border-radius: 8px;        /* Bajado de 6px a 3px para igualar las esquinas */
  padding: 0 16px;
  box-sizing: border-box;
  margin-left: 8px;
  vertical-align: middle;
  width: 132px;              /* Ancho idéntico al botón azul */
}

.cp-badge-demora-inline i { 
  font-size: 14px; 
}

/* Badge "Llega hoy" — variante clickeable igualada al boton de agregar al carrito */
.cp-badge-llega-hoy-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #00A650;
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  height: 26px;
  border-radius: 8px;
  padding: 0 16px;
  box-sizing: border-box;
  margin-left: 8px;
  vertical-align: middle;
  width: 132px;
}
.cp-badge-llega-hoy-inline:hover {
  color: #ffffff;
  opacity: .9;
}
.cp-badge-llega-hoy-inline i {
  font-size: 14px;
}
/* ── MOBILE — Barras de precio (transferencia / Mercado Pago) — evita corte de texto y superposición del ícono ── */
@media (max-width: 480px) {
  .cp-precio-bar {
    height: 26px;
    min-height: 26px;
    flex-wrap: nowrap;
    padding: 0 12px;
    width: 100%;
    gap: 8px;
  }

  .cp-precio-bar-half {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .cp-precio-bar-transferencia .cp-precio-bar-half:first-child {
    flex-wrap: nowrap;
  }

  .cp-precio-bar-valor,
  .cp-precio-bar-valor .woocommerce-Price-amount {
    font-size: 13px;
  }

  .cp-precio-bar-pill {
    font-size: 12px;
    white-space: nowrap;
  }

  .cp-precio-bar-pill i {
    font-size: 15px;
  }

  .cp-precio-bar-mp {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .cp-precio-bar-mp-label {
    font-size: 12px;
    white-space: nowrap;
    gap: 3px;
  }

  .cp-precio-mp-logo {
    width: 18px;
    height: 18px;
  }

  .cp-precio-bar-half-mp-derecha {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .cp-cuotas-toggle summary {
    height: 22px;
    padding: 0 8px;
  }
}

/* ── MOBILE — Refuerzo de altura fija para imágenes de producto en la grilla ── */
@media (max-width: 480px) {
  .cp-prod-img {
    height: 150px !important;
  }
}


/* ═══════════════════════════════════════════════
   MI CUENTA (WooCommerce) sobre fondo oscuro
   ═══════════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 30px !important;
  background: var(--cp-navy3) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link {
  margin: 0 !important;
  border-bottom: 1px solid var(--cp-border) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child {
  border-bottom: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a {
  display: block !important;
  background: transparent !important;
  color: var(--cp-text) !important;
  padding: 12px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
  background: var(--cp-sky-soft) !important;
  color: #fff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--cp-sky) !important;
  color: var(--cp-navy) !important;
  font-weight: 700 !important;
}
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content li,
.woocommerce-account .woocommerce-MyAccount-content td,
.woocommerce-account .woocommerce-MyAccount-content th,
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-MyAccount-content legend {
  color: var(--cp-text) !important;
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--cp-sky) !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content .u-columns {
  background: var(--cp-navy3) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 10px !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  border-color: var(--cp-border) !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
  padding: 20px !important;
}
.woocommerce-account .woocommerce-MyAccount-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-MyAccount-content select {
  background: #fff !important;
  color: var(--cp-navy) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 6px !important;
  padding: 10px !important;
}
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
  background: var(--cp-sky) !important;
  color: var(--cp-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
}
@media (max-width: 480px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin-bottom: 20px !important;
  }
}


/* ── Mi Cuenta: tarjetas de Direcciones (listado) ── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  background: transparent !important;
  border-bottom: 1px solid var(--cp-border) !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px !important;  /* ajustá este valor a gusto */
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
  color: var(--cp-sky) !important;
}
.woocommerce-account .woocommerce-MyAccount-content address {
  color: var(--cp-text) !important;
  font-style: normal !important;
}

/* ==========================================================
   MI CUENTA — Login / Registro (usuario NO logueado)
   ========================================================== */
.woocommerce-account #customer_login h2,
.woocommerce-account #customer_login label,
.woocommerce-account #customer_login p,
.woocommerce-account #customer_login legend {
  color: var(--cp-text) !important;
}

.woocommerce-account #customer_login a {
  color: var(--cp-sky) !important;
}

.woocommerce-account #customer_login input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  background: #fff !important;
  color: var(--cp-navy) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 6px !important;
  padding: 10px !important;
}

.woocommerce-account #customer_login button[type="submit"],
.woocommerce-account #customer_login .woocommerce-Button,
.woocommerce-account #customer_login button.button {
  background: var(--cp-sky) !important;
  color: var(--cp-navy) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  background: var(--cp-navy3) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

/* ═══════════════════════════════════════════════
   BOTÓN "CONSULTAR" (WhatsApp) — productos que exceden
   el límite de facturación
   ═══════════════════════════════════════════════ */
.cp-btn-consultar {
  background: #128C46 !important;
  border: 1px solid #128C46 !important;
  color: #0e1a33 !important;
}
.cp-btn-consultar:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #0e1a33 !important;
}
.cp-btn-consultar:active {
  background: #4CE08A !important;
  border-color: #4CE08A !important;
  color: #0e1a33 !important;
}


/* Badge "Llega hoy" — disponibilidad inmediata en deposito Rosario (AIR o ELIT), superpuesto sobre la imagen */
.cp-badge-llega-hoy {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #00A650;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 99px;
}
.cp-badge-llega-hoy i {
    font-size: 12px;
}

/* Apilado cuando coincide con OFERTA/AGOTADO en la grilla home y archive-product.php (hermanos directos) */
.cp-prod-badge + .cp-badge-llega-hoy {
    top: 34px;
}

/* Apilado en relacionados: verificado en vivo que tanto .onsale como el badge Llega-hoy quedan dentro de .astra-shop-thumbnail-wrap (Astra envuelve todo el contenido del loop item ahi); se ancla al li.product para cubrir cualquier anidamiento interno */
li.product:has(.onsale) .cp-badge-llega-hoy {
    top: 34px;
}

/* Corrección de alineación entre 'Agregar al carrito' y 'Demora 48hs' */
.single-product form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.single_add_to_cart_button.button.alt {
  height: 26px !important;
  padding: 0px 16px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

.cp-badge-demora-inline {
  margin-left: 0 !important; /* El espaciado pasa a ser controlado por gap */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TAREA A (retomada, sesion autonoma) -- fix real de mobile en la ficha
   ══════════════════════════════════════════════════════════════════════
   Diagnosticado con un iframe de 400px de ancho (mismo viewport real que
   usa el Device Toolbar de Chrome DevTools) sobre "Procesador AMD Ryzen 9
   7900 SIN COOLER" (tiene la etiqueta "Solo Transferencia").

   Problemas 1 y 2: en mobile, .single-product form.cart es un flex row
   con quantity + boton + badge, y a ~345px de ancho disponible el texto
   de AMBOS ("Agregar al carrito" y "Demora 48hs") se cortaba en 2 lineas
   dentro de su caja de altura fija (26px), quedando superpuesto/descentrado.
   Fix: el badge no se achica mas alla de lo que necesita su texto (nowrap);
   si aun asi no entran los 3 elementos en una fila, el badge pasa a su
   propia fila completa en vez de comprimirse hasta cortar el texto.

   Problema 3 + HALLAZGO NUEVO (no relacionado a mobile): .cp-precio-bar-
   solo-transferencia (el aviso "Disponible solo por transferencia
   bancaria" que se muestra en los 41 productos con esa etiqueta) nunca
   tuvo un color de fondo propio -- el texto es blanco y esa seccion de la
   ficha tiene fondo blanco, asi que el aviso queda 100% INVISIBLE hoy en
   produccion, en cualquier tamano de pantalla (bug preexistente, no
   introducido por este cambio). Se le agrega el mismo fondo navy que la
   barra de "Precio especial Transferencia" de al lado, y se reduce su
   altura (pedido explicito de la tarea) de los 36px que hereda por
   defecto de .cp-precio-bar a un valor cercano al del boton.
*/
@media (max-width: 480px) {
  .single-product form.cart {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
}
.cp-badge-demora-inline,
.cp-badge-llega-hoy-inline {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.cp-precio-bars-solo-transferencia .cp-precio-bar-transferencia {
  height: 26px !important;
  min-height: 26px !important;
}
.cp-precio-bars-solo-transferencia .cp-precio-bar-valor,
.cp-precio-bars-solo-transferencia .cp-precio-bar-valor .woocommerce-Price-amount {
  font-size: 14px !important;
}
.cp-precio-bars-solo-transferencia .cp-precio-bar-pill {
  font-size: 13px !important;
  white-space: nowrap !important;
}
.cp-precio-bars-solo-transferencia .cp-precio-bar-pill i {
  font-size: 16px !important;
}
@media (max-width: 480px) {
  .cp-precio-bars-solo-transferencia .cp-precio-bar-transferencia {
    height: 26px !important;
    min-height: 26px !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
  }
  .cp-precio-bars-solo-transferencia .cp-precio-bar-half {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }
  .cp-precio-bars-solo-transferencia .cp-precio-bar-transferencia .cp-precio-bar-half:first-child {
    flex-wrap: nowrap !important;
  }
  .cp-precio-bars-solo-transferencia .cp-precio-bar-pill {
    white-space: nowrap !important;
  }
}