/* ══════════════════════════════════════════════════════════════════════════
   PAVARIAR — BASE STYLES
   Variables, reset, nav, footer. Se carga en todas las páginas.
══════════════════════════════════════════════════════════════════════════ */

/* Ocultar los contenedores VACÍOS de Storefront en las páginas custom del tema.
   Removemos sus hijos vía PHP (woocommerce-setup.php), pero los wrappers
   (#masthead header, #colophon footer y la handheld footer bar) siguen
   renderizándose con su fondo claro y dejan franjas blancas arriba/abajo.
   En estas páginas usamos nuestro propio nav (.pv-nav) y footer (.pv-footer),
   así que estos contenedores sobran por completo.

   Se listan las clases de body de cada tipo de página custom. Al agregar una
   página custom nueva, suma aquí su clase (o su .page-template-*). */

/* Páginas donde reemplazamos el chrome de Storefront por el nuestro */
.woocommerce-cart #masthead.site-header,
.woocommerce-checkout #masthead.site-header,
.post-type-archive-product #masthead.site-header,
.tax-product_cat #masthead.site-header,
.tax-product_tag #masthead.site-header,
.single-product #masthead.site-header,
.woocommerce-account #masthead.site-header,
.error404 #masthead.site-header,
.page-template-template-home #masthead.site-header,
.page-template-template-legal #masthead.site-header,

.woocommerce-cart #colophon.site-footer,
.woocommerce-checkout #colophon.site-footer,
.post-type-archive-product #colophon.site-footer,
.tax-product_cat #colophon.site-footer,
.tax-product_tag #colophon.site-footer,
.single-product #colophon.site-footer,
.woocommerce-account #colophon.site-footer,
.error404 #colophon.site-footer,
.page-template-template-home #colophon.site-footer,
.page-template-template-legal #colophon.site-footer,

.storefront-handheld-footer-bar,
.woocommerce-cart .storefront-handheld-footer-bar,
.woocommerce-checkout .storefront-handheld-footer-bar,
.post-type-archive-product .storefront-handheld-footer-bar,
.tax-product_cat .storefront-handheld-footer-bar,
.tax-product_tag .storefront-handheld-footer-bar,
.single-product .storefront-handheld-footer-bar,
.woocommerce-account .storefront-handheld-footer-bar,
.error404 .storefront-handheld-footer-bar,
.page-template-template-home .storefront-handheld-footer-bar,
.page-template-template-legal .storefront-handheld-footer-bar {
  display: none !important;
}



/* ── VARIABLES GLOBALES ── */
:root {
  --yellow:      #FFD600;
  --yellow-dark: #E6C000;
  --black:       #0A0A0A;
  --white:       #FFFFFF;
  --gray:        #1A1A1A;
  --gray2:       #2A2A2A;
  --text-muted:  #888888;
  --red:         #FF4040;
  --green:       #4ade80;
  --radius:      20px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   NAV — Compartido entre todas las páginas
   Usamos !important para que los estilos de Storefront (que aplican en la
   home donde el body no tiene clases .woocommerce-*) no reduzcan los
   tamaños y se vean iguales en home, tienda, carrito y checkout.
══════════════════════════════════════════════════════════════════════════ */
.pv-nav {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 200 !important;
  padding: 14px 20px !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  background: rgba(10, 10, 10, 0.9) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 214, 0, 0.15) !important;
  box-sizing: border-box !important;
}

.pv-nav-logo {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  color: var(--yellow) !important;
  text-decoration: none !important;
}
.pv-nav-logo span { color: var(--white) !important; }

.pv-nav-right {
  display: flex !important; align-items: center !important; gap: 12px !important;
}

.pv-nav-cart {
  position: relative !important;
  background: rgba(255, 214, 0, 0.1) !important;
  border: 1px solid rgba(255, 214, 0, 0.25) !important;
  color: var(--white) !important;
  padding: 9px 14px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
  transition: background 0.2s;
}
.pv-nav-cart:hover {
  background: rgba(255, 214, 0, 0.2) !important;
  color: var(--white) !important;
}

/* Botón "Mi cuenta" — mismo estilo circular que el carrito */
.pv-nav-account {
  background: rgba(255, 214, 0, 0.1) !important;
  border: 1px solid rgba(255, 214, 0, 0.25) !important;
  color: var(--white) !important;
  padding: 9px 11px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background 0.2s;
}
.pv-nav-account:hover {
  background: rgba(255, 214, 0, 0.2) !important;
  color: var(--white) !important;
}

.pv-cart-count {
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 4px !important;
}

.pv-nav-shop-btn {
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap !important;
}
.pv-nav-shop-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(255, 214, 0, 0.4);
  color: var(--black) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÓN CTA — Compartido
══════════════════════════════════════════════════════════════════════════ */
.pv-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--black);
  font-family: 'DM Sans', sans-serif;
  font-weight: 900;
  font-size: 16px;
  padding: 18px 32px;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}
.pv-cta-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-110%) skewX(-20deg);
  transition: transform 0.4s;
}
.pv-cta-btn:hover::after { transform: translateX(110%) skewX(-20deg); }
.pv-cta-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(255, 214, 0, 0.45);
  color: var(--black);
}
.pv-cta-btn:active { transform: scale(0.98); }
.pv-cta-btn .arrow { font-size: 20px; transition: transform 0.2s; }
.pv-cta-btn:hover .arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER — Compartido
══════════════════════════════════════════════════════════════════════════ */
.pv-footer {
  background: var(--gray);
  padding: 40px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pv-footer-inner {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.pv-footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--yellow);
  margin-bottom: 16px;
}
.pv-footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 20px;
}
.pv-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.pv-footer-links a:hover { color: var(--yellow); }
.pv-footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMACIONES — Fade-up compartido
══════════════════════════════════════════════════════════════════════════ */
.pv-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pv-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   ELEMENTOS COMUNES DE STOREFRONT QUE OCULTAMOS
══════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart .entry-header,
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-header,
.woocommerce-checkout .page-title,
.post-type-archive-product .entry-header {
  display: none !important;
}

/* Sidebar oculta en todas las páginas WC */
.woocommerce-cart #secondary,
.woocommerce-cart .widget-area,
.woocommerce-checkout #secondary,
.woocommerce-checkout .widget-area,
.post-type-archive-product #secondary,
.post-type-archive-product .widget-area,
.single-product #secondary,
.single-product .widget-area {
  display: none !important;
}

/* Forzar contenido a full width en páginas WC */
.woocommerce-cart .col-full,
.woocommerce-cart #primary,
.woocommerce-cart .content-area,
.woocommerce-checkout .col-full,
.woocommerce-checkout #primary,
.woocommerce-checkout .content-area,
.post-type-archive-product .col-full,
.post-type-archive-product #primary,
.single-product .col-full,
.single-product #primary,
.page-template-template-legal .col-full,
.page-template-template-legal #primary,
.page-template-template-legal .content-area,
.page-template-template-legal #content,
.page-template-template-legal .site-content,
.page-template-template-legal .site-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Ocultar productos cruzados de Storefront */
.woocommerce-cart .cross-sells,
.woocommerce-cart .storefront-product-section {
  display: none !important;
}

/* Ocultar la barra inferior fija de Storefront (handheld footer bar)
   en TODAS las páginas custom del tema. Esta barra aparece en móvil
   con accesos a búsqueda/cuenta/carrito y rompe el diseño. */
.storefront-handheld-footer-bar,
.woocommerce-cart .storefront-handheld-footer-bar,
.woocommerce-checkout .storefront-handheld-footer-bar,
.post-type-archive-product .storefront-handheld-footer-bar,
.tax-product_cat .storefront-handheld-footer-bar,
.tax-product_tag .storefront-handheld-footer-bar,
.single-product .storefront-handheld-footer-bar,
.page-template-template-home .storefront-handheld-footer-bar {
  display: none !important;
}

/* Body negro en WC */
.woocommerce-cart,
.woocommerce-checkout,
.post-type-archive-product,
.single-product,
.tax-product_cat {
  background: var(--black) !important;
  color: var(--white) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FIXES — Correcciones de pulido (v2.1)
══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Eliminar blancos en html/body ── */
html, body {
  background: var(--black) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-cart,
body.woocommerce-checkout,
body.post-type-archive-product,
body.single-product,
body.page-template-template-home {
  background: var(--black) !important;
}

/* Eliminar margin del wp-admin-bar si está visible */
html[lang] {
  background: var(--black) !important;
}

/* ── FIX 2: Botones bien alineados con su texto ── */
.pv-cta-btn,
.pv-nav-shop-btn,
.pv-cart-checkout-btn {
  line-height: 1 !important;
  vertical-align: middle;
}

.pv-cta-btn .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── FIX 3: Footer centrado correctamente ── */
.pv-footer {
  width: 100% !important;
  display: block;
  background: var(--gray);
  text-align: center;
  padding: 40px 20px;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pv-footer-inner {
  max-width: 600px;
  margin: 0 auto !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pv-footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--yellow);
  margin: 0 0 8px 0;
  text-align: center;
  width: 100%;
}

.pv-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.pv-footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  margin: 8px 0 0 0;
  width: 100%;
}

/* ── FIX 4: Asegurar fondo negro en wrappers de Storefront ── */
#page,
.site,
.site-content,
#content {
  background: var(--black) !important;
}

/* Quitar el header blanco superior de Storefront en TODAS las páginas WC */
.woocommerce-cart .site-header,
.woocommerce-checkout .site-header,
.post-type-archive-product .site-header,
.single-product .site-header,
.tax-product_cat .site-header,
.woocommerce-account .site-header {
  display: none !important;
}

/* Asegurar que el contenido empieza justo después del nav fijo.
   El .pv-nav está con position:fixed, así que no ocupa espacio en el
   flujo y tapaba el contenido superior. Damos padding-top al body en
   todas las páginas que usan nuestro nav para que el contenido empiece
   justo debajo. */
body.page-template-template-home,
body.woocommerce-cart,
body.woocommerce-checkout,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag,
body.single-product {
  padding-top: 60px !important;
}

/* Y quitamos el padding-top que tenía el .site-content de las páginas
   WC (antes era el parche, ahora sobra y crearía doble espacio). */
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.post-type-archive-product .site-content,
.tax-product_cat .site-content,
.tax-product_tag .site-content,
.single-product .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FIX v2.2 — Botón CTA visible completo
══════════════════════════════════════════════════════════════════════════ */

/* Forzar que el botón se vea bien con todo su contenido */
.pv-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  padding: 18px 32px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  white-space: nowrap;
  min-height: 50px;
  box-sizing: border-box !important;
}

.pv-cta-btn:hover {
  background: var(--yellow-dark) !important;
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(255, 214, 0, 0.45);
  color: var(--black) !important;
}

.pv-cta-btn .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: transform 0.2s;
}

.pv-cta-btn:hover .arrow {
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV RESPONSIVE (v2.1)
   Con el botón de cuenta agregado hay 3 elementos a la derecha; en pantallas
   angostas comprimimos paddings, gap y el CTA para que nada se desborde.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .pv-nav { padding: 12px 14px !important; }
  .pv-nav-right { gap: 8px !important; }
  .pv-nav-logo { font-size: 24px !important; }
  .pv-nav-cart { padding: 8px 11px !important; }
  .pv-nav-account { padding: 8px 9px !important; }
  .pv-nav-shop-btn { padding: 9px 12px !important; font-size: 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA 404 PERSONALIZADA
══════════════════════════════════════════════════════════════════════════ */
body.error404 #content,
body.error404 .site-content,
body.error404 .col-full,
body.error404 #primary,
body.error404 .content-area,
body.error404 .site-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--black) !important;
}

.pv-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 80px; /* padding-top deja espacio para el nav fijo */
  background: var(--black);
  text-align: center;
}
.pv-404-inner {
  max-width: 560px;
}
.pv-404-code {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(90px, 22vw, 180px);
  line-height: 0.9;
  color: var(--yellow);
  margin: 8px 0 0;
}
.pv-404-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 7vw, 44px);
  color: var(--white);
  letter-spacing: 1px;
  margin: 12px 0 16px;
}
.pv-404-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  margin: 0 auto 32px;
  max-width: 420px;
}
.pv-404-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pv-404-home {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.pv-404-home:hover { color: var(--yellow); }

/* ══════════════════════════════════════════════════════════════════════════
   BANDAS AMARILLAS UNIFICADAS (tienda, cuenta, carrito, checkout)
   Objetivo: que TODAS empiecen justo donde termina el nav (sin esconderse
   detrás) y usen la MISMA tipografía y tamaños.
══════════════════════════════════════════════════════════════════════════ */

/* 1) Neutralizar el padding/margin superior de los wrappers en tienda y cuenta
      para que su banda arranque en y=0 (igual que ya hace el carrito), y luego
      la bajamos con margin-top hasta el borde inferior del nav. */
body.post-type-archive-product #content, body.post-type-archive-product .site-content, body.post-type-archive-product .col-full, body.post-type-archive-product #primary, body.post-type-archive-product .site-main, body.post-type-archive-product .woocommerce,
body.tax-product_cat #content, body.tax-product_cat .site-content, body.tax-product_cat .col-full, body.tax-product_cat #primary, body.tax-product_cat .site-main, body.tax-product_cat .woocommerce,
body.tax-product_tag #content, body.tax-product_tag .site-content, body.tax-product_tag .col-full, body.tax-product_tag #primary, body.tax-product_tag .site-main, body.tax-product_tag .woocommerce,
body.woocommerce-account #content, body.woocommerce-account .site-content, body.woocommerce-account .col-full, body.woocommerce-account #primary, body.woocommerce-account .site-main, body.woocommerce-account .woocommerce,
body.page-template-template-legal #content, body.page-template-template-legal .site-content, body.page-template-template-legal .col-full, body.page-template-template-legal #primary, body.page-template-template-legal .site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2) Tipografía IDÉNTICA para las 3 bandas (título, subtítulo, etiqueta). */
body .pv-shop-title,
body .pv-account-title,
body .pv-cart-title,
body .pv-checkout-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(52px, 11vw, 92px) !important;
  line-height: 0.9 !important;
  letter-spacing: -1px !important;
  color: var(--black) !important;
  margin: 10px 0 12px !important;
}
body .pv-shop-subtitle,
body .pv-account-subtitle,
body .pv-cart-subtitle,
body .pv-checkout-subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.7) !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}
body .pv-shop-header .pv-section-label,
body .pv-account-header .pv-section-label,
body .pv-cart-header .pv-section-label,
body .pv-cart-header-injected .pv-section-label,
body .pv-checkout-header .pv-section-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 14px !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE DE WHATSAPP
══════════════════════════════════════════════════════════════════════════ */
.pv-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pv-whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.5);
  color: #fff;
}
.pv-whatsapp-float:active { transform: scale(0.98); }

@media (max-width: 480px) {
  .pv-whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 18px;
    right: 18px;
  }
}

/* En la home, la burbuja flotante de "Ver carrito" también vive abajo a la
   derecha; subimos el botón de WhatsApp para que no se superpongan. */
body.page-template-template-home .pv-whatsapp-float {
  bottom: 92px;
}
@media (max-width: 480px) {
  body.page-template-template-home .pv-whatsapp-float {
    bottom: 80px;
  }
}

/* Buscador de la página 404 */
.pv-404-search {
  display: flex;
  align-items: center;
  max-width: 420px;
  margin: 32px auto 0;
  background: var(--gray);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  overflow: hidden;
}
.pv-404-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 14px 20px;
  font-size: 15px;
  outline: none;
}
.pv-404-search input[type="search"]::placeholder { color: var(--text-muted); }
.pv-404-search button {
  background: var(--yellow);
  color: var(--black);
  border: none;
  width: 48px;
  height: 48px;
  margin: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.pv-404-search button:hover { background: var(--yellow-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES (privacidad, cookies, términos, devoluciones)
   Usan la plantilla template-legal.php. Banda amarilla arriba + cuerpo de
   texto legible sobre fondo negro.
══════════════════════════════════════════════════════════════════════════ */
.pv-legal {
  background: var(--black);
}

/* Banda amarilla superior, misma fórmula que tienda/cuenta */
.pv-legal-header {
  background: var(--yellow);
  padding: 100px 20px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pv-legal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 30% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 70% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
}
.pv-legal-header-inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.pv-legal-header .pv-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 14px;
  display: block;
}
.pv-legal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(44px, 11vw, 84px);
  line-height: 0.9;
  letter-spacing: -1px;
  color: var(--black);
  margin: 0 0 12px;
}
.pv-legal-updated {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Cuerpo del documento */
.pv-legal-body {
  padding: 56px 20px 88px;
}
.pv-legal-inner {
  max-width: 760px;
  margin: 0 auto;
  font-family: 'DM Sans', sans-serif;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.7;
}

/* Tipografía interna del contenido legal (the_content) */
.pv-legal-inner h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 5vw, 34px);
  letter-spacing: 0.5px;
  color: var(--white);
  margin: 44px 0 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pv-legal-inner h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.pv-legal-inner h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  margin: 28px 0 10px;
}
.pv-legal-inner p { margin: 0 0 16px; }
.pv-legal-inner a {
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 214, 0, 0.4);
  transition: border-color 0.2s;
}
.pv-legal-inner a:hover { border-bottom-color: var(--yellow); }
.pv-legal-inner ul,
.pv-legal-inner ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.pv-legal-inner li { margin-bottom: 8px; }
.pv-legal-inner strong { color: var(--white); }

/* Tabla de cookies */
.pv-legal-inner table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 8px 0 24px !important;
  font-size: 14.5px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.pv-legal-inner thead,
.pv-legal-inner tbody,
.pv-legal-inner tr {
  background: transparent !important;
}
.pv-legal-inner th,
.pv-legal-inner td {
  text-align: left !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  vertical-align: top !important;
}
.pv-legal-inner th {
  background: var(--gray) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
.pv-legal-inner td {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
/* Storefront pinta las filas pares con un gris claro (zebra). Lo neutralizamos. */
.pv-legal-inner tr:nth-child(2n),
.pv-legal-inner tbody tr:nth-child(2n) {
  background: transparent !important;
}

/* Bloque destacado (ej. cómo ejercer tus derechos) */
.pv-legal-inner .pv-legal-highlight {
  background: rgba(255, 214, 0, 0.06);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 8px 0 24px;
}
.pv-legal-inner .pv-legal-highlight p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .pv-legal-header { padding: 80px 16px 40px; }
  .pv-legal-body { padding: 40px 16px 64px; }
  /* En móvil, las tablas de cookies pueden hacer scroll horizontal */
  .pv-legal-inner table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Aviso bajo la opción "Retiro en tienda" (carrito y checkout) */
.pv-pickup-note {
  display: block;
  margin: 6px 0 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgba(255, 214, 0, 0.08);
  border-left: 3px solid var(--yellow);
  border-radius: 6px;
  padding: 8px 12px;
}
.pv-pickup-note strong { color: var(--white); }