/* ═══════════════════════════════════════════════════════════
 * SVH Design Fix — T3-PERFECCION 2026-06-10
 * Aplica SOLO a body.svh-pfs-design (páginas nuevas SVH).
 * Resuelve: fondos blancos de Woodmart, no fullwidth, no responsive.
 * Tokens design system: #1a1a2e oscuro · #c1247d magenta · #F0EAD6 pearl
 * ═══════════════════════════════════════════════════════════ */

:root {
  --svh-dark-base: #1a1a2e;
  --svh-dark-mid: #201e38;
  --svh-dark-deep: #141426;
  --svh-magenta: #c1247d;
  --svh-magenta-hi: #e3479e;
  --svh-magenta-lo: #8f1a5d;
  --svh-pearl: #F0EAD6;
  --svh-pearl-dim: #A6A0B5;
  --svh-line-mag: rgba(193,36,125,.30);
  --svh-line-mag-soft: rgba(193,36,125,.18);
}

/* ──────────────────────────────────────────────
 * 1) Fondo global oscuro y tipografía
 * ────────────────────────────────────────────── */
body.svh-pfs-design {
  background: var(--svh-dark-base) !important;
  background-image:
    radial-gradient(ellipse 1200px 700px at 50% -5%, rgba(193,36,125,.18), transparent 65%),
    radial-gradient(ellipse 800px 600px at 100% 100%, rgba(125,71,193,.08), transparent 70%) !important;
  color: var(--svh-pearl) !important;
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Anular fondos blancos de Woodmart en wrappers principales */
body.svh-pfs-design .wd-content-layout,
body.svh-pfs-design .content-layout-wrapper,
body.svh-pfs-design .page-wrapper,
body.svh-pfs-design .content-area,
body.svh-pfs-design .site-content,
body.svh-pfs-design main.container,
body.svh-pfs-design main#main-content,
body.svh-pfs-design article.page,
body.svh-pfs-design .entry-content,
body.svh-pfs-design .vc_row,
body.svh-pfs-design .vc_column-inner,
body.svh-pfs-design .wpb_wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Headings tipografía Syne */
body.svh-pfs-design h1,
body.svh-pfs-design h2,
body.svh-pfs-design h3,
body.svh-pfs-design h4,
body.svh-pfs-design h5,
body.svh-pfs-design h6,
body.svh-pfs-design .vl-heading,
body.svh-pfs-design .svh-h1,
body.svh-pfs-design .svh-h2 {
  font-family: 'Syne', 'DM Sans', system-ui, sans-serif !important;
  color: var(--svh-pearl) !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

body.svh-pfs-design p,
body.svh-pfs-design li {
  color: var(--svh-pearl) !important;
}

body.svh-pfs-design a:not(.vl-btn):not(.svh-btn) {
  color: var(--svh-magenta-hi) !important;
}
body.svh-pfs-design a:not(.vl-btn):not(.svh-btn):hover {
  color: #fff !important;
}

/* ──────────────────────────────────────────────
 * 2) Fullwidth wrappers
 * ────────────────────────────────────────────── */
body.svh-pfs-design main.container,
body.svh-pfs-design main#main-content.wd-content-layout.container,
body.svh-pfs-design .wd-content-layout.container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* El container interno vl-container sí limita ancho legible */
body.svh-pfs-design .vl-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────
 * 3) Cards con glassmorphism por defecto
 *    (vence cualquier white background del parent)
 * ────────────────────────────────────────────── */
body.svh-pfs-design .vl-card,
body.svh-pfs-design .svh-card,
body.svh-pfs-design .vl-section--light .vl-card {
  background: linear-gradient(180deg, rgba(32,30,56,.92), rgba(20,20,38,.96)) !important;
  border: 1px solid var(--svh-line-mag) !important;
  border-radius: 20px !important;
  color: var(--svh-pearl) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6) !important;
}

/* Inputs / textareas en formularios */
body.svh-pfs-design input[type=text],
body.svh-pfs-design input[type=email],
body.svh-pfs-design input[type=password],
body.svh-pfs-design input[type=tel],
body.svh-pfs-design input[type=url],
body.svh-pfs-design input[type=number],
body.svh-pfs-design textarea,
body.svh-pfs-design select {
  background: rgba(20,20,38,.72) !important;
  color: var(--svh-pearl) !important;
  border: 1px solid rgba(240,234,214,.14) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font: inherit !important;
}

body.svh-pfs-design input:focus,
body.svh-pfs-design textarea:focus,
body.svh-pfs-design select:focus {
  border-color: var(--svh-magenta-hi) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(227,71,158,.18) !important;
}

body.svh-pfs-design label {
  color: var(--svh-pearl) !important;
  font-weight: 500;
}

/* Botones primary/ghost */
body.svh-pfs-design .vl-btn--primary,
body.svh-pfs-design .svh-btn--primary,
body.svh-pfs-design button.primary,
body.svh-pfs-design .button-primary {
  background: linear-gradient(180deg, var(--svh-magenta-hi), var(--svh-magenta) 60%, var(--svh-magenta-lo)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 14px 26px !important;
  font-weight: 700;
  box-shadow: 0 10px 26px -8px rgba(193,36,125,.55);
  cursor: pointer;
}

body.svh-pfs-design .vl-btn--ghost,
body.svh-pfs-design .svh-btn--ghost {
  background: transparent !important;
  color: var(--svh-pearl-dim) !important;
  border: 1px solid rgba(240,234,214,.18) !important;
}

/* ──────────────────────────────────────────────
 * 4) UR Pro forms (login, registration, lost password)
 * ────────────────────────────────────────────── */
body.svh-pfs-design .ur-frontend-form,
body.svh-pfs-design .user-registration-MyAccount-content,
body.svh-pfs-design .ur-form-row,
body.svh-pfs-design .ur-form-grid {
  background: transparent !important;
}
body.svh-pfs-design .ur-frontend-form .ur-form-row .ur-field-item input,
body.svh-pfs-design .ur-frontend-form .ur-form-row .ur-field-item select,
body.svh-pfs-design .ur-frontend-form .ur-form-row .ur-field-item textarea {
  background: rgba(20,20,38,.72) !important;
  color: var(--svh-pearl) !important;
  border-color: rgba(240,234,214,.14) !important;
}
body.svh-pfs-design .ur-frontend-form .ur-form-row label {
  color: var(--svh-pearl) !important;
}
body.svh-pfs-design .ur-submit-button,
body.svh-pfs-design button[name="ur_submit_button"] {
  background: linear-gradient(180deg, var(--svh-magenta-hi), var(--svh-magenta) 60%, var(--svh-magenta-lo)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  box-shadow: 0 10px 26px -8px rgba(193,36,125,.55) !important;
}

/* ──────────────────────────────────────────────
 * 5) Tablas, listas, blockquotes
 * ────────────────────────────────────────────── */
body.svh-pfs-design table {
  background: transparent !important;
  color: var(--svh-pearl) !important;
  border-color: var(--svh-line-mag-soft) !important;
}
body.svh-pfs-design th,
body.svh-pfs-design td {
  border-color: rgba(240,234,214,.10) !important;
  color: var(--svh-pearl) !important;
}
body.svh-pfs-design blockquote {
  border-left: 3px solid var(--svh-magenta) !important;
  background: rgba(32,30,56,.55) !important;
  color: var(--svh-pearl) !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
}

/* ──────────────────────────────────────────────
 * 6) Anular específicas Woodmart con !important
 * ────────────────────────────────────────────── */
body.svh-pfs-design.wrapper-full-width,
body.svh-pfs-design .wd-page-content {
  background: var(--svh-dark-base) !important;
}

body.svh-pfs-design .wd-fixed-row,
body.svh-pfs-design .wd-fixed-area,
body.svh-pfs-design .wd-section {
  background: transparent !important;
}

/* ──────────────────────────────────────────────
 * 7) Responsive — Móvil, Tablet, PC, TV
 * ────────────────────────────────────────────── */
/* Móvil pequeño (<480px) */
@media (max-width: 479px) {
  body.svh-pfs-design .vl-container { padding-left: 16px !important; padding-right: 16px !important; }
  body.svh-pfs-design .vl-card { padding: 18px !important; border-radius: 16px !important; }
  body.svh-pfs-design h1 { font-size: 26px !important; }
  body.svh-pfs-design h2 { font-size: 22px !important; }
  body.svh-pfs-design h3 { font-size: 18px !important; }
}

/* Móvil grande (480-640px) */
@media (min-width: 480px) and (max-width: 640px) {
  body.svh-pfs-design .vl-container { padding-left: 20px !important; padding-right: 20px !important; }
  body.svh-pfs-design .vl-card { padding: 22px !important; }
  body.svh-pfs-design h1 { font-size: 30px !important; }
  body.svh-pfs-design h2 { font-size: 24px !important; }
}

/* Tablet (641-1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  body.svh-pfs-design .vl-container { padding-left: 28px !important; padding-right: 28px !important; max-width: 920px; }
  body.svh-pfs-design .vl-card { padding: 26px !important; }
  body.svh-pfs-design h1 { font-size: 34px !important; }
  body.svh-pfs-design h2 { font-size: 26px !important; }
}

/* PC estándar (1025-1599px) */
@media (min-width: 1025px) and (max-width: 1599px) {
  body.svh-pfs-design .vl-container { max-width: 1200px; padding-left: 32px !important; padding-right: 32px !important; }
  body.svh-pfs-design h1 { font-size: 38px !important; }
}

/* PC grande / 2K (1600-1999px) */
@media (min-width: 1600px) and (max-width: 1999px) {
  body.svh-pfs-design .vl-container { max-width: 1320px; padding-left: 40px !important; padding-right: 40px !important; }
  body.svh-pfs-design h1 { font-size: 44px !important; }
}

/* TV / 4K (≥2000px) */
@media (min-width: 2000px) {
  body.svh-pfs-design .vl-container { max-width: 1480px; padding-left: 48px !important; padding-right: 48px !important; }
  body.svh-pfs-design h1 { font-size: 52px !important; }
  body.svh-pfs-design .vl-card { padding: 38px !important; }
}

/* ──────────────────────────────────────────────
 * 8) Accesibilidad — focus outlines y reduced motion
 * ────────────────────────────────────────────── */
body.svh-pfs-design a:focus-visible,
body.svh-pfs-design button:focus-visible {
  outline: 2px solid var(--svh-magenta-hi) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.svh-pfs-design * { animation: none !important; transition: none !important; }
}