/**
 * Cristaleria Altea - Tienda online (estilos publicos)
 */

/* f2 addendum Joan 27/08 (2bis): telefono de topbar solo icono, numero oculto
   visualmente pero accesible a lectores de pantalla. Sin color propio: hereda
   el color del elemento que la contiene. */
.ecom-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   CSS Variables & Theme
   ============================================ */
:root {
    /* Colors */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #8b5cf6;
    --accent: #06b6d4;
    --accent-pink: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Dark Theme */
    --dark-950: #030712;
    --dark-900: #0f0f23;
    --dark-800: #1a1a2e;
    --dark-700: #16213e;
    --dark-600: #1f2937;

    /* Light — --white es SIEMPRE blanco (demo.perfex.com.es / scLandingApplyTheme).
       Texto sobre superficie = --ecom-heading. Tinta sobre relleno de marca = --on-brand.
       html.ecom-theme-light NO puede remapear --white a tinta oscura: rompe CTAs. */
    --white: #ffffff;
    --on-brand: #ffffff;
    --ecom-heading: #ffffff;
    --ecom-body: #e2e8f0;
    --ecom-muted: #cbd5e1;
    --surface: #091A32;
    --ecom-surface: #091A32;
    --theme-mode: dark;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-hero: linear-gradient(135deg, #030712 0%, #0f0f23 50%, #1a1a2e 100%);
    /* f2 §F2.1 plan_aprobado: fuera el rosa #ec4899 (heredado de la demo SaaS,
       sin relacion con la marca de la cristaleria) — el degradado ahora sale de
       primary/accent, que ya son los tokens de marca del tema de la tienda. */
    --gradient-glow: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
    --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-light: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-light: rgba(255, 255, 255, 0.12);

    /* Spacing */
    --container-max: 1280px;
    --section-padding: 7rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.4);
    --shadow-glow-lg: 0 0 100px rgba(99, 102, 241, 0.3);
    --shadow-glow-cyan: 0 0 60px rgba(6, 182, 212, 0.4);
    --shadow-glow-pink: 0 0 60px rgba(236, 72, 153, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--ecom-surface, var(--dark-950));
    color: var(--ecom-body, var(--gray-300));
    line-height: 1.7;
    overflow-x: hidden;
}

::selection {
    background: var(--primary);
    color: var(--white);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    color: var(--ecom-heading, var(--white));
    font-weight: 700;
    line-height: 1.2;
}
/* f2 §F2.2 plan_aprobado: escala fluida (menos saltos bruscos entre breakpoints
   fijos de mas abajo) + letter-spacing negativo propio de tipografia display. */
h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); letter-spacing: -0.01em; }

/* ============================================
   Animated Background
   ============================================ */
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.bg-gradient {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--gradient-hero);
}

.bg-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139, 92, 246, 0.12), transparent),
        radial-gradient(ellipse 50% 30% at 50% 80%, rgba(236, 72, 153, 0.08), transparent);
    animation: bgPulse 10s ease-in-out infinite;
}

@keyframes bgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Floating Orbs */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: rgba(99, 102, 241, 0.15);
    top: -200px;
    left: -200px;
    animation: orbFloat 25s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: rgba(139, 92, 246, 0.12);
    top: 50%;
    right: -150px;
    animation: orbFloat 20s ease-in-out infinite reverse;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: rgba(6, 182, 212, 0.1);
    bottom: -100px;
    left: 30%;
    animation: orbFloat 30s ease-in-out infinite;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -50px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.95); }
}

/* ============================================
   Container & Utilities
   ============================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: var(--section-padding) 0;
    position: relative;
}

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

/* ============================================
   Navbar
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.25rem 0;
    transition: var(--transition);
}

.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0);
    backdrop-filter: blur(0);
    transition: var(--transition);
}

.navbar.scrolled::before {
    background: rgba(3, 7, 18, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
}

.navbar-brand svg {
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.5));
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.navbar-nav a {
    color: var(--gray-400);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 0.5rem 0;
}

.navbar-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-glow);
    transition: var(--transition);
    transform: translateX(-50%);
    border-radius: 2px;
}

.navbar-nav a:hover { color: var(--white); }
.navbar-nav a:hover::after { width: 100%; }

.navbar-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
}

.lang-btn {
    padding: 0.4rem 0.8rem;
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition);
}

.lang-btn:hover { color: var(--white); background: var(--glass-bg-light); }
.lang-btn.active { background: var(--primary); color: var(--white); }

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 9999;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--white);
    transition: var(--transition);
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    /* Tinta fija sobre el fondo de marca: --white se invierte en claro y el CTA
       quedaba #111 sobre navy. El contraste se garantiza en el FONDO, no eligiendo
       tinta al azar.
       background-color solido ademas del degradado: si accent es un tono claro,
       el degradado completo (--gradient-glow, hasta accent+rosa) puede acercarse
       demasiado al blanco en su extremo — el color solido de respaldo es siempre
       el primary (oscuro) y el degradado se capa sin llegar al accent puro. */
    background-color: var(--primary);
    background-image: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 45%, var(--accent)) 100%);
    color: var(--on-brand);
    box-shadow: var(--shadow-glow);
}

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

.btn-primary:hover::before { left: 100%; }
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 80px rgba(99, 102, 241, 0.6);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--glass-border-light);
}

.btn-outline:hover {
    background: var(--glass-bg-light);
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}

.btn-ghost {
    background: var(--glass-bg-light);
    color: var(--white);
    border: 1px solid var(--glass-border);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

.btn-lg { padding: 1.1rem 2.75rem; font-size: 1.05rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }

/* ============================================
   Hero Section
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 6rem;
    position: relative;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.hero-text { max-width: 620px; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    color: var(--accent);
    margin-bottom: 2rem;
}

.hero-badge::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px var(--accent);
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.hero h1 {
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.hero h1 .line-2 {
    display: block;
    background: var(--gradient-glow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.hero-description {
    font-size: 1.2rem;
    color: var(--gray-400);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

/* Hero Stats */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
}

.hero-stat { text-align: center; padding: 0.5rem; }

.hero-stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    background: var(--gradient-glow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

/* Hero Visual */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-glow-lg);
    transform: perspective(1000px) rotateY(-8deg) rotateX(5deg);
    transition: var(--transition-slow);
}

.hero-card:hover {
    transform: perspective(1000px) rotateY(0) rotateX(0) translateY(-10px);
    box-shadow: 0 0 120px rgba(99, 102, 241, 0.4);
}

.hero-card img {
    width: 100%;
    height: auto;
}

.hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

/* Floating badges */
.float-badge {
    position: absolute;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: floatBadge 5s ease-in-out infinite;
}

.float-badge-1 { top: 5%; right: -10%; animation-delay: 0s; }
.float-badge-2 { bottom: 15%; left: -8%; animation-delay: -2s; }

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.float-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--gradient-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.float-badge-text span { font-size: 0.75rem; color: var(--gray-500); display: block; }
.float-badge-text strong { color: var(--white); font-size: 0.95rem; }

/* ============================================
   Section Headers
   ============================================ */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-badge {
    display: inline-flex;
    padding: 0.5rem 1.25rem;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-header h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.section-header p {
    font-size: 1.15rem;
    color: var(--gray-400);
}

/* ============================================
   Product Cards
   ============================================ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.product-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

/* Foto del producto a tamano grande: zona media a sangre en la cabecera de
   la tarjeta (antes era un iconito de 56px junto al titulo). El margin
   negativo compensa el padding 2.5rem del .product-card. */
.product-media {
    display: block;
    margin: -2.5rem -2.5rem 1.75rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(6,182,212,0.08));
    border-bottom: 1px solid var(--glass-border);
}

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

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

.product-media-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.product-media-fallback.glass { background: var(--gradient-cyan); }
.product-media-fallback.tools { background: var(--gradient-purple); }

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-glow);
    opacity: 0;
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: var(--shadow-glow);
}

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

.product-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.4rem 0.9rem;
    background: var(--gradient-glow);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-glow);
    z-index: 2;
}

/* f2 §F2.3 plan_aprobado: tarjeta entera clicable (enlace-alfombra) + chip de
   espesor + un solo CTA. El link cubre toda la tarjeta pero por debajo (z-index 1)
   de los controles reales (badge/chip/CTA en 2) para que sigan siendo clicables
   por su cuenta y el foco de teclado no quede atrapado en el enlace invisible. */
.product-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.product-chip-thickness {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    padding: 0.3rem 0.75rem;
    background: color-mix(in srgb, var(--ecom-surface, var(--dark-950)) 82%, transparent);
    color: var(--ecom-heading, var(--white));
    border: 1px solid var(--glass-border);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
}
.product-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}
.product-card-cta { flex: 1; text-align: center; }

.product-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.product-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-icon.glass { background: var(--gradient-cyan); box-shadow: var(--shadow-glow-cyan); }
.product-icon.tools { background: var(--gradient-purple); box-shadow: var(--shadow-glow-pink); }

.product-icon svg { width: 28px; height: 28px; color: var(--white); }

.product-card h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.product-subtitle { color: var(--gray-500); font-size: 0.9rem; }

.product-description {
    color: var(--gray-400);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.product-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1.5rem;
}

.product-stat { text-align: center; }
.product-stat-value { font-size: 1.35rem; font-weight: 800; color: var(--white); }
.product-stat-label { font-size: 0.7rem; color: var(--gray-500); text-transform: uppercase; }

.product-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.product-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-400);
}

.product-feature svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}

/* ============================================
   Screenshots Gallery
   ============================================ */
.screenshots-section {
    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 50%, transparent 100%);
}

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.filter-btn {
    padding: 0.65rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--gray-400);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover, .filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: var(--shadow-glow);
}

.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

.screenshot-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition);
}

.screenshot-card:hover {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: var(--shadow-glow);
}

.screenshot-card.hidden { display: none; }

.screenshot-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.screenshot-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

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

.screenshot-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(3, 7, 18, 0.9) 100%);
    opacity: 0;
    transition: var(--transition);
}

.screenshot-card:hover .screenshot-overlay { opacity: 1; }

.screenshot-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 56px;
    height: 56px;
    background: var(--gradient-glow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    opacity: 0;
    transition: var(--transition);
    cursor: pointer;
    box-shadow: var(--shadow-glow);
}

.screenshot-card:hover .screenshot-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.screenshot-info { padding: 1.25rem 1.5rem; }

.screenshot-category {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--glass-bg-light);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.screenshot-info h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.screenshot-info p { font-size: 0.85rem; color: var(--gray-500); margin: 0; }

/* ============================================
   Features Grid
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.feature-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: var(--shadow-glow);
}

.feature-icon {
    width: 72px;
    height: 72px;
    background: var(--gradient-glow);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.75rem;
    box-shadow: var(--shadow-glow);
}

.feature-card h4 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.feature-card p { font-size: 0.9rem; color: var(--ecom-muted); }

/* ============================================
   Tech Stack
   ============================================ */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

.tech-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: var(--transition);
}

.tech-item:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}

.tech-item .tech-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.tech-item span {
    font-size: 0.85rem;
    color: var(--gray-400);
    font-weight: 500;
}

/* ============================================
   CTA Section
   ============================================ */
.cta-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.75rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.15rem;
    color: var(--gray-400);
    margin-bottom: 2.5rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    padding: 5rem 0 2rem;
    border-top: 1px solid var(--glass-border);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand { margin-bottom: 1rem; }

.footer-brand p {
    /* --ecom-muted (no --gray-500, que vale igual en claro y oscuro): estas
       clases genericas (.footer-brand, .footer-bottom, .footer-social) las
       reutiliza tambien el footer REAL (partials/footer.php) — este bloque
       era del footer viejo, ya muerto (if(false) en templates/salescloud.php),
       pero sus selectores seguian ganando por especificidad sobre el footer
       vivo al no tener color propio ahi. */
    color: var(--ecom-muted);
    margin-top: 1rem;
    max-width: 300px;
    font-size: 0.95rem;
}

.footer-column h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: var(--gray-400);
}

.footer-column ul li { margin-bottom: 0.75rem; }
.footer-column a { color: var(--ecom-muted); font-size: 0.9rem; }
.footer-column a:hover { color: var(--primary); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
}

.footer-bottom p { color: var(--ecom-muted); font-size: 0.9rem; }

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    width: 42px;
    height: 42px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   Lightbox
   ============================================ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    backdrop-filter: blur(20px);
}

.lightbox.active { opacity: 1; visibility: visible; }

.lightbox img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glow-lg);
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.lightbox-close:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   Page Hero (for secondary pages)
   ============================================ */
.page-hero {
    padding: 12rem 0 5rem;
    text-align: center;
    position: relative;
}

.page-hero h1 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    margin-bottom: 1rem;
}

.page-hero p {
    font-size: 1.15rem;
    color: var(--gray-400);
    max-width: 600px;
    margin: 0 auto;
}

/* Doc Layout */
.doc-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    padding: 4rem 0;
}

.doc-sidebar { position: sticky; top: 100px; height: fit-content; }

.doc-nav {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

.doc-nav h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}

.doc-nav ul { list-style: none; }
.doc-nav li { margin-bottom: 0.5rem; }

.doc-nav a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    color: var(--gray-400);
    font-size: 0.9rem;
    transition: var(--transition);
}

.doc-nav a:hover, .doc-nav a.active {
    background: var(--glass-bg-light);
    color: var(--primary);
}

.doc-content section {
    margin-bottom: 4rem;
    scroll-margin-top: 100px;
}

.doc-content h2 {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1.5rem;
}

.code-block {
    background: var(--dark-800);
    border: 1px solid var(--glass-border);
    color: var(--gray-300);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    margin: 1rem 0;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .hero-content { grid-template-columns: 1fr; text-align: center; }
    .hero-text { max-width: 100%; }
    .hero-buttons { justify-content: center; }
    .hero-visual { display: none; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-content { grid-template-columns: repeat(2, 1fr); }
    .doc-layout { grid-template-columns: 1fr; }
    .doc-sidebar { position: static; }
}

@media (max-width: 768px) {
    :root { --section-padding: 4rem; }

    .mobile-menu-toggle { display: flex; }

    .navbar-nav {
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 15, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 999;
    }

    .navbar-nav.mobile-open {
        opacity: 1;
        visibility: visible;
        z-index: 9998;
    }
    .navbar-nav a { font-size: 1.5rem; }
    /* El toggle claro/oscuro y el carrito tienen que verse en móvil:
       display:none de .navbar-cta los escondía detrás del hamburguesa. */
    .navbar-cta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
        margin-right: 0.5rem;
    }
    .navbar-cta .ecom-cart-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
    }
    .mobile-menu-toggle { z-index: 10000; }

    .hero { min-height: auto; padding: 9rem 0 4rem; }
    .hero h1 { font-size: 2.25rem; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: 1fr; }
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    .screenshots-grid { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-brand { margin: 0 auto; }
    .footer-brand p { margin: 1rem auto 0; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
    .cta-content h2 { font-size: 2rem; }
    .page-hero { padding: 9rem 0 3rem; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.85rem; }
    .hero-description { font-size: 1rem; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }
    .hero-stat-value { font-size: 1.75rem; }
    .product-features { grid-template-columns: 1fr; }
    .product-stats { grid-template-columns: repeat(2, 1fr); }
    .filter-buttons { gap: 0.35rem; }
    .filter-btn { padding: 0.5rem 1rem; font-size: 0.8rem; }
}

/* ================================================
   About Page - Founder Section
   ================================================ */

.founder-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 3rem;
    align-items: start;
}

.founder-card {
    text-align: center;
    padding: 3rem 2rem;
}

.founder-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
}

.founder-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.25rem;
}

.founder-role {
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.founder-tagline {
    color: var(--gray-400);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.founder-card .founder-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem;
}

.founder-card .founder-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

.founder-card .founder-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
}

.founder-contact {
    margin-top: 1.5rem;
}

.expertise-card {
    padding: 2.5rem;
}

.expertise-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.expertise-intro {
    color: var(--gray-400);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.expertise-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.expertise-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.expertise-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(99, 102, 241, 0.2);
}

.expertise-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.expertise-icon svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.expertise-content strong {
    display: block;
    color: white;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.expertise-content span {
    color: var(--gray-500);
    font-size: 0.85rem;
}

/* Achievements Grid */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.achievement-card {
    text-align: center;
    padding: 2rem 1rem;
}

.achievement-number {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.achievement-label {
    color: var(--gray-400);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.skill-card {
    padding: 2rem;
    text-align: center;
}

.skill-icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
}

.skill-card h4 {
    color: white;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.skill-card p {
    color: var(--gray-500);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.skill-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.skill-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 3px;
    transition: width 1s ease;
}

.skill-level {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
}

/* About Page Responsive */
@media (max-width: 1024px) {
    .founder-grid { grid-template-columns: 1fr; }
    .achievements-grid { grid-template-columns: repeat(2, 1fr); }
    .skills-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .achievements-grid { grid-template-columns: 1fr 1fr; }
    .skills-grid { grid-template-columns: 1fr; }
    .founder-card .founder-stats { grid-template-columns: 1fr; gap: 1rem; }
}

/* ================================================
   Documentation Pages - Module Cards
   ================================================ */

.doc-modules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.doc-module-card {
    padding: 2rem;
}

.doc-module-card h4 {
    color: white;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.doc-list li {
    padding: 0.5rem 0;
    color: var(--gray-400);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doc-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .doc-modules-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ============================================
   Coming Soon / Disabled Buttons
   ============================================ */
.btn-coming-soon {
    position: relative;
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-coming-soon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.03) 10px,
        rgba(255,255,255,0.03) 20px
    );
    border-radius: inherit;
}

.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    color: var(--secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.coming-soon-badge svg {
    width: 14px;
    height: 14px;
}

/* Footer demo links - Coming Soon */
.footer a.coming-soon {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ============================================
   MOBILE OPTIMIZATIONS v2.0
   Touch-friendly, performance-focused
   ============================================ */

/* Mobile-first touch targets (WCAG 2.5.5 - min 44x44px) */
@media (max-width: 1024px) {
    /* Improve navbar touch targets */
    .navbar-nav a {
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Language switcher - bigger touch area */
    .lang-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    /* Buttons - ensure touch-friendly */
    .btn {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
    }

    .btn-sm {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }
}

/* Tablet - 768px to 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Show hero images on tablet (smaller) */
    .hero-visual {
        display: flex !important;
    }

    .hero-card {
        max-width: 400px;
        transform: perspective(1000px) rotateY(-5deg) rotateX(3deg);
    }

    /* Stats bar - 3 columns on tablet */
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .hero-stat-value {
        font-size: 1.75rem;
    }
}

/* Mobile Large - 480px to 768px */
@media (max-width: 768px) {
    /* Root spacing adjustments */
    :root {
        --section-padding: 3.5rem;
    }

    .container {
        padding: 0 1.25rem;
    }

    /* Navbar mobile menu improvements */
    .navbar {
        padding: 1rem 0;
    }

    .navbar-brand span {
        font-size: 1.25rem;
    }

    .mobile-menu-toggle {
        padding: 0.75rem;
        min-width: 44px;
        min-height: 44px;
    }

    .mobile-menu-toggle span {
        width: 22px;
    }

    /* Mobile menu - full screen with better spacing */
    .navbar-nav {
        padding: 2rem;
        gap: 1.5rem;
    }

    .navbar-nav a {
        font-size: 1.35rem;
        padding: 1rem 1.5rem;
        width: 100%;
        text-align: center;
        border-radius: var(--radius-lg);
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
    }

    .navbar-nav a:hover,
    .navbar-nav a:active {
        background: var(--primary);
        color: var(--white);
    }

    /* Hero section mobile */
    .hero {
        padding: 7rem 0 3rem;
        min-height: auto;
    }

    .hero h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-badge {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
        line-height: 1.7;
    }

    .hero-buttons {
        gap: 0.75rem;
        margin-bottom: 2.5rem;
    }

    .hero-buttons .btn {
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Hero stats - 2x2 grid on mobile */
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 1rem;
    }

    .hero-stat {
        padding: 0.75rem 0.5rem;
    }

    .hero-stat-value {
        font-size: 1.5rem;
    }

    .hero-stat-label {
        font-size: 0.65rem;
    }

    /* Section headers mobile */
    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .section-header p {
        font-size: 1rem;
    }

    .section-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }

    /* Product cards mobile */
    .product-card {
        padding: 1.75rem;
    }

    .product-media {
        margin: -1.75rem -1.75rem 1.5rem;
    }

    .product-icon {
        width: 50px;
        height: 50px;
    }

    .product-icon svg {
        width: 24px;
        height: 24px;
    }

    .product-card h3 {
        font-size: 1.25rem;
    }

    .product-stats {
        gap: 0.5rem;
        padding: 1rem 0;
    }

    .product-stat-value {
        font-size: 1.1rem;
    }

    .product-stat-label {
        font-size: 0.6rem;
    }

    /* Feature cards mobile */
    .feature-card {
        padding: 1.5rem;
    }

    .feature-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .feature-card h4 {
        font-size: 1rem;
    }

    .feature-card p {
        font-size: 0.85rem;
    }

    /* Tech grid mobile */
    .tech-item {
        padding: 1rem 0.75rem;
    }

    .tech-item .tech-icon {
        font-size: 1.5rem;
    }

    .tech-item span {
        font-size: 0.75rem;
    }

    /* Screenshots mobile */
    .screenshots-grid {
        gap: 1rem;
    }

    .screenshot-info {
        padding: 1rem;
    }

    .screenshot-info h4 {
        font-size: 0.95rem;
    }

    /* Footer mobile */
    .footer {
        padding: 3rem 0 1.5rem;
    }

    .footer-content {
        gap: 2rem;
    }

    .footer-column h4 {
        margin-bottom: 1rem;
    }

    .footer-column ul li {
        margin-bottom: 0.5rem;
    }

    .footer-bottom {
        padding-top: 1.5rem;
    }

    /* CTA mobile */
    .cta-content h2 {
        font-size: 1.75rem;
    }

    .cta-content p {
        font-size: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Page hero mobile */
    .page-hero {
        padding: 8rem 0 2.5rem;
    }

    .page-hero h1 {
        font-size: 1.75rem;
    }

    .page-hero p {
        font-size: 1rem;
    }

    /* Doc layout mobile */
    .doc-nav {
        padding: 1rem;
    }

    .doc-nav a {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}

/* Mobile Small - up to 480px */
@media (max-width: 480px) {
    :root {
        --section-padding: 3rem;
    }

    .container {
        padding: 0 1rem;
    }

    /* Hero adjustments */
    .hero {
        padding: 6rem 0 2.5rem;
    }

    .hero h1 {
        font-size: 1.65rem;
        line-height: 1.15;
    }

    .hero-badge {
        font-size: 0.75rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats - stack vertically on very small screens */
    .hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .hero-stat-value {
        font-size: 1.35rem;
    }

    /* Section headers */
    .section-header h2 {
        font-size: 1.5rem;
    }

    /* Cards adjustments */
    .product-card {
        padding: 1.5rem;
    }

    .product-media {
        margin: -1.5rem -1.5rem 1.25rem;
    }

    .product-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .product-badge {
        top: 1rem;
        right: 1rem;
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
    }

    /* Feature cards */
    .feature-card {
        padding: 1.25rem;
    }

    /* Lightbox mobile */
    .lightbox img {
        max-width: 95%;
        border-radius: var(--radius-lg);
    }

    .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
    }

    /* Footer */
    .footer-social a {
        width: 44px;
        height: 44px;
    }
}

/* ============================================
   INDEX.HTML SPECIFIC - Stats Bar & Services
   (Overrides for inline styles in index.html)
   ============================================ */

/* Stats bar responsive */
@media (max-width: 992px) {
    .stats-bar {
        padding: 2rem 0;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem;
    }

    .stat-number {
        font-size: 2.25rem !important;
    }

    .stat-label {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    .stats-bar {
        padding: 1.5rem 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }

    .stat-item {
        padding: 0.75rem 0.5rem;
    }

    .stat-number {
        font-size: 1.75rem !important;
        margin-bottom: 0.25rem;
    }

    .stat-label {
        font-size: 0.7rem !important;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-number {
        font-size: 1.5rem !important;
    }

    /* Hide 5th stat on very small screens */
    .stat-item:nth-child(5) {
        display: none;
    }
}

/* Services grid responsive */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .service-card {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .service-card {
        padding: 1.75rem;
    }

    .service-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1.25rem;
    }

    .service-card h3 {
        font-size: 1.25rem;
    }

    .service-price {
        padding: 0.875rem;
        flex-wrap: wrap;
    }

    .service-price .amount {
        font-size: 1.75rem;
    }

    .service-features li {
        font-size: 0.85rem;
    }
}

/* Why grid responsive */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    .why-card {
        padding: 1.5rem 1rem;
    }

    .why-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 1rem;
    }

    .why-icon svg {
        width: 28px;
        height: 28px;
    }

    .why-card h4 {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .why-grid {
        grid-template-columns: 1fr !important;
    }

    .why-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        text-align: left;
    }

    .why-icon {
        margin: 0;
        flex-shrink: 0;
    }
}

/* Process grid responsive */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem 1.5rem;
    }

    .process-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .process-step h4 {
        font-size: 1rem;
    }

    .process-step p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .process-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .process-step {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        text-align: left;
    }

    .process-number {
        margin: 0;
        flex-shrink: 0;
    }
}

/* Modules grid responsive */
@media (max-width: 768px) {
    .modules-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .module-card {
        border-radius: 16px;
    }

    .module-image {
        height: 180px;
    }

    .module-content {
        padding: 1.25rem;
    }

    .module-content h3 {
        font-size: 1.15rem;
    }

    .module-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .module-actions .btn {
        width: 100%;
    }
}

/* Testimonials responsive */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .testimonial-card::before {
        font-size: 3rem;
        top: 1rem;
        right: 1.5rem;
    }

    .testimonial-content {
        font-size: 0.95rem;
    }

    .testimonial-avatar {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* Clients logos responsive */
@media (max-width: 768px) {
    .clients-logos {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem;
    }

    .client-logo {
        font-size: 0.9rem;
    }

    .client-logo-icon {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .clients-logos {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .client-logo {
        font-size: 0.8rem;
    }
}

/* FAQ responsive */
@media (max-width: 768px) {
    .faq-grid {
        max-width: 100%;
    }

    .faq-item {
        border-radius: 12px;
    }

    .faq-question {
        padding: 1.25rem;
        font-size: 0.95rem;
    }

    .faq-answer p {
        padding: 0 1.25rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Contact section responsive */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem;
    }

    .contact-info {
        text-align: center;
    }

    .contact-methods {
        max-width: 300px;
        margin: 2rem auto 0;
    }

    .contact-method {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .contact-form {
        padding: 1.75rem;
        border-radius: 20px;
    }

    .contact-form h4 {
        font-size: 1.25rem;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 10px;
    }

    .form-group textarea {
        min-height: 100px;
    }

    .form-submit .btn {
        padding: 1rem 1.5rem;
    }

    .contact-info h3 {
        font-size: 1.5rem;
    }
}

/* Hero images mobile (for index.html inline styles) */
@media (max-width: 1200px) and (min-width: 769px) {
    .hero-grid {
        gap: 2.5rem !important;
    }

    .hero-images {
        max-width: 500px !important;
    }

    .hero-image img {
        height: 150px !important;
    }

    .hero-image.large img {
        height: 180px !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 100px 0 60px !important;
        min-height: auto !important;
    }

    .hero-grid {
        gap: 2rem !important;
    }

    /* Show hero images on mobile - simplified grid */
    .hero-images {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
        max-width: 100% !important;
    }

    .hero-image {
        border-radius: 12px;
    }

    .hero-image img {
        height: 140px !important;
        object-fit: cover;
    }

    .hero-image.large {
        grid-column: span 1 !important;
    }

    .hero-image.large img {
        height: 160px !important;
    }

    /* Only show 2 images on mobile to save space */
    .hero-image:nth-child(3) {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 90px 0 50px !important;
    }

    .hero-image img {
        height: 120px !important;
    }

    .hero-image.large img {
        height: 140px !important;
    }
}

/* ============================================
   PERFORMANCE & ACCESSIBILITY
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .orb {
        animation: none;
    }

    .hero-card {
        transform: none;
    }

    .hero-card:hover {
        transform: none;
    }
}

/* Skip-link: oculto hasta recibir foco por teclado (primer Tab de cada pagina) */
.ecom-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary);
    color: var(--on-brand);
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}

.ecom-skip-link:focus {
    left: 0;
}

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Improve tap highlight on mobile */
@media (max-width: 768px) {
    a, button {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2);
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }

    .footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    @media (max-width: 768px) {
        .container {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
    }
}

/* Los <select> nativos heredan el esquema del sistema si no se declara. */
.contact-form-wrapper, .faq-section, .testimonials-section { color-scheme: dark; }

/* ============================================
   Tema de la tienda: modo CLARO
   ============================================
   Contrato demo.perfex.com.es: LIGHT = lienzo blanco, --white sigue #fff,
   texto de superficie = --ecom-heading. NO invertir --white.
   Server-side: <html class="ecom-theme-{mode}"> lo fija ecom_theme_html_attrs();
   el toggle llama ecomApplyStoreTheme (mismo JS que scLandingApplyTheme).
*/
html.ecom-theme-light {
    color-scheme: light;
}

html.ecom-theme-light body {
    --dark-950: #ffffff;
    --dark-900: #ffffff;
    --dark-800: var(--surface, #f8fafc);
    --dark-700: #e5e7eb;
    --dark-600: #d1d5db;

    --white: #ffffff;
    --ecom-heading: #0f172a;
    --ecom-body: #334155;
    --ecom-muted: #64748b;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;

    --glass-bg: #ffffff;
    --glass-bg-light: #ffffff;
    --glass-border: rgba(15, 23, 42, 0.10);
    --glass-border-light: rgba(15, 23, 42, 0.16);

    background: #ffffff;
    color: var(--ecom-body);
}

/* Navbar: el fondo al hacer scroll estaba escrito en rgba(3,7,18,..) suelto, fuera
   de las variables remapeadas arriba. */
html.ecom-theme-light .navbar.scrolled::before {
    background: var(--ecom-surface, rgba(255, 255, 255, 0.85));
    border-bottom: 1px solid var(--glass-border);
}

/* Overlays de imagen/hero y footer: mismo caso, rgba(3,7,18,..) directo. */
html.ecom-theme-light .product-hero-image::after,
html.ecom-theme-light .screenshot-overlay {
    background: linear-gradient(180deg, transparent 30%, var(--ecom-surface, var(--dark-950)) 100%) !important;
}

html.ecom-theme-light footer,
html.ecom-theme-light .site-footer {
    background: var(--ecom-surface, var(--dark-950));
    border-top: 1px solid var(--glass-border);
}

/* Botones/cards con texto blanco fijo (no via variable): se oscurecen a mano para
   no dejar texto claro sobre fondo claro. */
html.ecom-theme-light .btn-outline,
html.ecom-theme-light .btn-ghost,
html.ecom-theme-light .navbar-brand,
html.ecom-theme-light .hero h1,
html.ecom-theme-light .cart-header h1,
html.ecom-theme-light .checkout-header h1,
html.ecom-theme-light .lang-btn {
    color: var(--ecom-heading);
}
html.ecom-theme-light .lang-btn.active { color: var(--on-brand, #fff); }
/* Excepcion al oscurecido generico de .btn-outline de arriba: dentro de
   .cta-section el boton va sobre fondo oscuro solido (var(--primary)), no
   claro, asi que necesita texto claro igual que en modo oscuro. */
html.ecom-theme-light .cta-section .btn-outline { color: var(--on-brand); }

/* Inputs/selects/textarea del carrito, checkout y formulario de vidrio a medida:
   en dark llevan fondo oscuro y texto blanco fijo (P0: no tocar la LOGICA, solo
   el color). En claro se invierten para que sigan siendo legibles. */
html.ecom-theme-light input:not([type="color"]),
html.ecom-theme-light textarea,
html.ecom-theme-light select {
    background: #ffffff;
    border-color: var(--glass-border-light);
    color: var(--ecom-heading);
    color-scheme: light;
}
html.ecom-theme-light input::placeholder,
html.ecom-theme-light textarea::placeholder {
    color: var(--gray-400);
}
html.ecom-theme-light .contact-form-wrapper,
html.ecom-theme-light .faq-section,
html.ecom-theme-light .testimonials-section {
    color-scheme: light;
}
html.ecom-theme-light .contact-form-wrapper input,
html.ecom-theme-light .contact-form-wrapper textarea,
html.ecom-theme-light .contact-form-wrapper select {
    background: #ffffff !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--ecom-heading) !important;
}
html.ecom-theme-light .contact-form-wrapper label { color: var(--ecom-body) !important; }

/* Un solo botón tema: SVG sol (oscuro→claro) / luna (claro→oscuro). */
.ecom-theme-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 0.5rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    color: var(--ecom-heading, #fff);
    cursor: pointer;
    flex-shrink: 0;
}
.ecom-theme-mode-toggle:hover {
    background: color-mix(in srgb, var(--primary, #1A355B) 28%, transparent);
}
.ecom-theme-icon { display: none; }
html.ecom-theme-dark .ecom-theme-icon--sun,
html:not(.ecom-theme-light) .ecom-theme-icon--sun { display: block; }
html.ecom-theme-light .ecom-theme-icon--sun { display: none; }
html.ecom-theme-light .ecom-theme-icon--moon { display: block; }
html.ecom-theme-light .ecom-theme-mode-toggle {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
}


/* ############################################################
   CSS EXTRAIDO DE LAS VISTAS (antes en <style> inline)
   Va AL FINAL a proposito: a igualdad de especificidad gana lo
   ultimo, que es exactamente quien ganaba cuando esto vivia en un
   <style> de la vista (cargado despues de este archivo). No mover
   arriba sin revisar las colisiones de selector.
   ############################################################ */

/* ============================================================
   CATALOG  (extraido de views/public/catalog.php)
   ============================================================ */
.catalog-page { padding: 2rem 0 4rem; }
        .catalog-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

        .catalog-head { margin-bottom: 1.5rem; }
        .catalog-head h1 { font-size: 1.9rem; margin: 0 0 .35rem; color: var(--white); }
        .catalog-count { color: var(--ecom-muted); font-size: .92rem; }

        .catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }

        .catalog-filters {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 1.25rem;
            position: sticky;
            top: 1rem;
        }
        .filter-block { margin-bottom: 1.4rem; }
        .filter-block:last-child { margin-bottom: 0; }
        .filter-block h3 {
            font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
            color: var(--ecom-muted); margin: 0 0 .6rem;
        }
        .filter-list { list-style: none; margin: 0; padding: 0; }
        .filter-list li { margin-bottom: .3rem; }
        .filter-list a {
            display: block; padding: .4rem .6rem; border-radius: 8px;
            color: var(--ecom-body); text-decoration: none; font-size: .92rem;
        }
        .filter-list a:hover { background: var(--glass-bg-light); color: var(--ecom-heading); }
        .filter-list a.active { background: var(--primary); color: var(--on-brand); font-weight: 600; }

        .filter-form input, .filter-form select {
            width: 100%; padding: .55rem .7rem; border-radius: 8px;
            border: 1px solid var(--glass-border-light);
            background: var(--glass-bg); color: var(--ecom-heading); font-size: .92rem;
        }
        .filter-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
        .filter-form button {
            width: 100%; margin-top: .6rem; padding: .6rem; border: 0; border-radius: 8px;
            background: var(--primary); color: var(--on-brand); font-weight: 600; cursor: pointer;
        }
        .filter-reset { display: inline-block; margin-top: .5rem; color: var(--ecom-muted); font-size: .85rem; }

        .catalog-toolbar {
            display: flex; justify-content: flex-end; align-items: center;
            gap: .6rem; margin-bottom: 1rem;
        }
        .catalog-toolbar label { color: var(--ecom-muted); font-size: .88rem; }
        .catalog-toolbar select {
            padding: .45rem .7rem; border-radius: 8px;
            border: 1px solid var(--glass-border-light);
            background: var(--glass-bg); color: var(--ecom-heading);
        }

        .catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

        .catalog-card {
            background: rgba(255,255,255,.03);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 16px; overflow: hidden;
            display: flex; flex-direction: column;
            transition: transform .15s ease, border-color .15s ease;
        }
        .catalog-card:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.55); }
        .catalog-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
        .catalog-card-media {
            aspect-ratio: 4 / 3; background: rgba(0,0,0,.28);
            display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        .catalog-card-media img { width: 100%; height: 100%; object-fit: cover; }
        .catalog-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
        .catalog-badge {
            align-self: flex-start; font-size: .7rem; font-weight: 600; letter-spacing: .04em;
            text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px;
            background: rgba(99,102,241,.18); color: #a5b4fc; margin-bottom: .5rem;
        }
        .catalog-card h2 { font-size: 1rem; margin: 0 0 .35rem; color: var(--white); }
        .catalog-card p { font-size: .86rem; color: var(--ecom-muted); margin: 0 0 .9rem; flex: 1; }
        .catalog-price { font-size: 1.15rem; font-weight: 700; color: var(--white); }
        .catalog-price small { display: block; font-size: .72rem; font-weight: 500; color: var(--ecom-muted); }

        .catalog-empty {
            grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--ecom-muted);
        }

        .catalog-pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 2rem; }
        .catalog-pagination a, .catalog-pagination span {
            padding: .5rem .8rem; border-radius: 8px; text-decoration: none;
            border: 1px solid rgba(255,255,255,.12); color: var(--ecom-body); font-size: .9rem;
        }
        .catalog-pagination .current { background: var(--primary); color: var(--on-brand); border-color: var(--primary); }
        .catalog-pagination .ellipsis { border-color: transparent; padding: 0.5rem 0.3rem; }

        @media (max-width: 992px) {
            .catalog-layout { grid-template-columns: 1fr; }
            .catalog-filters { position: static; }
            .catalog-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .catalog-grid { grid-template-columns: 1fr; }
            .catalog-toolbar { justify-content: space-between; }
        }

/* ============================================================
   CART  (extraido de views/public/cart.php)
   ============================================================ */
.cart-page { min-height: 100vh; background: var(--ecom-surface, #0a0a0f); padding: 2rem 0; font-family: 'Inter', sans-serif; }
        .cart-container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
        .cart-header { margin-bottom: 2rem; }
        .cart-header h1 { color: var(--ecom-heading); font-size: 2rem; margin: 0 0 .35rem; }
        .cart-header p { color: var(--ecom-muted); margin: 0; }

        .cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
        @media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } }

        .cart-list { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: .5rem 1.5rem; }
        .cart-row { display: grid; grid-template-columns: 72px 1fr auto auto auto; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--glass-border); }
        .cart-row:last-child { border-bottom: none; }
        .cart-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--glass-bg-light); }
        .cart-thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--ecom-muted); font-size: 1.5rem; }
        .cart-name { color: var(--ecom-heading); font-weight: 600; margin: 0 0 .3rem; font-size: 1rem; }
        .cart-meta { color: var(--ecom-muted); font-size: .85rem; line-height: 1.5; }
        .cart-badge { display: inline-block; background: rgba(99,102,241,.18); color: #a5b4fc; border-radius: 6px; padding: .1rem .5rem; font-size: .75rem; margin-right: .4rem; }
        .cart-price, .cart-total { color: var(--ecom-heading); font-weight: 600; white-space: nowrap; }
        .cart-unit { display: block; color: var(--ecom-muted); font-size: .75rem; font-weight: 400; }
        .qty-input { width: 68px; padding: .5rem; background: var(--glass-bg-light); border: 1px solid var(--glass-border-light); border-radius: 8px; color: var(--ecom-heading); text-align: center; font-size: .95rem; }
        .qty-input:focus { outline: none; border-color: #6366f1; }
        .qty-static { color: var(--ecom-muted); min-width: 68px; text-align: center; display: inline-block; }
        .btn-remove { background: none; border: none; color: var(--ecom-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .4rem; border-radius: 6px; transition: color .2s, background .2s; }
        .btn-remove:hover { color: #f87171; background: rgba(248,113,113,.1); }

        .cart-summary { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.5rem; position: sticky; top: 2rem; }
        .sum-row { display: flex; justify-content: space-between; color: var(--ecom-muted); margin-bottom: .75rem; }
        .sum-row.final { color: var(--ecom-heading); font-size: 1.25rem; font-weight: 700; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--glass-border-light); }
        .btn-checkout { display: block; width: 100%; text-align: center; margin-top: 1.25rem; padding: .95rem 1rem; background: linear-gradient(135deg,#6366f1,#8b5cf6); color: var(--on-brand); border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; }
        .btn-checkout:hover { opacity: .92; }
        .link-continue { display: block; text-align: center; margin-top: .9rem; color: var(--ecom-muted); text-decoration: none; font-size: .9rem; }
        .link-continue:hover { color: var(--ecom-body); }

        .cart-empty { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 4rem 2rem; text-align: center; }
        .cart-empty h2 { color: var(--ecom-heading); margin: 0 0 .5rem; font-size: 1.4rem; }
        .cart-empty p { color: var(--ecom-muted); margin: 0 0 1.75rem; }
        .cart-empty a { display: inline-block; padding: .85rem 1.75rem; background-color: var(--primary); background-image: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--on-brand); border-radius: 10px; text-decoration: none; font-weight: 600; }

        @media (max-width: 640px) {
            .cart-row { grid-template-columns: 56px 1fr auto; grid-template-areas: "thumb info remove" "thumb qty price"; row-gap: .75rem; }
            .cart-thumb { width: 56px; height: 56px; grid-area: thumb; }
            .cart-row > .cart-info { grid-area: info; }
            .cart-row > .cart-qty { grid-area: qty; }
            .cart-row > .cart-total { grid-area: price; text-align: right; }
            .cart-row > .cart-price { display: none; }
            .cart-row > .btn-remove { grid-area: remove; justify-self: end; }
        }

/* ============================================================
   CHECKOUT  (extraido de views/public/checkout.php)
   ============================================================ */
.checkout-page { min-height: 100vh; background: var(--ecom-surface, #0a0a0f); padding: 2rem 0; }
        .checkout-container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
        .checkout-header { text-align: center; margin-bottom: 3rem; }
        .checkout-header h1 { color: var(--ecom-heading); font-size: 2rem; margin-bottom: 0.5rem; }
        .checkout-header p { color: var(--ecom-muted); }
        .checkout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; }
        @media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }

        .checkout-form { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 2rem; }
        .form-section { margin-bottom: 2rem; }
        .form-section h3 { color: var(--ecom-heading); font-size: 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        .form-section h3 span { width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }

        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; color: var(--ecom-body); font-size: 0.9rem; margin-bottom: 0.5rem; }
        .form-group input, .form-group select { width: 100%; padding: 0.875rem 1rem; background: var(--glass-bg-light); border: 1px solid var(--glass-border-light); border-radius: 10px; color: var(--ecom-heading); font-size: 1rem; transition: all 0.2s; }
        .form-group input:focus, .form-group select:focus { outline: none; border-color: #6366f1; background: rgba(99,102,241,0.1); }
        .form-group input::placeholder { color: var(--ecom-muted); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

        .order-summary { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.5rem; position: sticky; top: 2rem; }
        .order-summary h3 { color: var(--ecom-heading); font-size: 1.1rem; margin-bottom: 1.5rem; }
        .order-item { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--glass-border-light); }
        .order-item:last-of-type { border-bottom: none; }
        .order-item-name { color: var(--ecom-heading); font-weight: 500; }
        .order-item-meta { color: var(--ecom-muted); font-size: 0.85rem; margin-top: 0.25rem; }
        .order-item-price { color: var(--ecom-heading); font-weight: 600; }
        .order-item-price .original { text-decoration: line-through; color: var(--ecom-muted); font-size: 0.85rem; margin-right: 0.5rem; }

        .order-totals { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border-light); }
        .order-total-row { display: flex; justify-content: space-between; margin-bottom: 0.75rem; color: var(--ecom-muted); }
        .order-total-row.final { color: var(--ecom-heading); font-size: 1.25rem; font-weight: 700; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--glass-border-light); }

        .payment-methods { display: flex; flex-direction: column; gap: 0.75rem; }
        .payment-method { display: flex; align-items: center; padding: 1rem; background: var(--glass-bg); border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
        .payment-method:hover { background: var(--glass-bg-light); }
        .payment-method.selected { border-color: #6366f1; background: rgba(99,102,241,0.1); }
        .payment-method input { display: none; }
        .payment-method-radio { width: 20px; height: 20px; border: 2px solid var(--ecom-muted); border-radius: 50%; margin-right: 1rem; display: flex; align-items: center; justify-content: center; }
        .payment-method.selected .payment-method-radio { border-color: #6366f1; }
        .payment-method.selected .payment-method-radio::after { content: ''; width: 10px; height: 10px; background: #6366f1; border-radius: 50%; }
        .payment-method-info { flex: 1; }
        .payment-method-name { color: var(--ecom-heading); font-weight: 500; }
        .payment-method-desc { color: var(--ecom-muted); font-size: 0.85rem; }

        .btn-checkout { width: 100%; padding: 1rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; border-radius: 10px; color: var(--on-brand); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 1.5rem; }
        .btn-checkout:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99,102,241,0.3); }
        .btn-checkout:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        .secure-badge { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--ecom-muted); font-size: 0.85rem; margin-top: 1rem; }
        .secure-badge svg { color: #10b981; }

        .back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ecom-muted); text-decoration: none; margin-bottom: 2rem; }
        .back-link:hover { color: var(--ecom-heading); }

        /* Coupon styles */
        .coupon-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--glass-border-light); }
        .coupon-input-group { display: flex; gap: 0.5rem; }
        .coupon-input-group input { flex: 1; padding: 0.75rem 1rem; background: var(--glass-bg-light); border: 1px solid var(--glass-border-light); border-radius: 8px; color: var(--ecom-heading); font-size: 0.9rem; text-transform: uppercase; }
        .coupon-input-group input:focus { outline: none; border-color: #6366f1; }
        .coupon-input-group input::placeholder { color: var(--ecom-muted); text-transform: none; }
        .btn-apply-coupon { padding: 0.75rem 1.25rem; background: rgba(99,102,241,0.2); border: 1px solid #6366f1; border-radius: 8px; color: #818cf8; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
        .btn-apply-coupon:hover { background: rgba(99,102,241,0.3); }
        .btn-apply-coupon:disabled { opacity: 0.5; cursor: not-allowed; }
        .coupon-message { margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; }
        .coupon-message.success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: #10b981; }
        .coupon-message.error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
        .discount-row { color: #10b981 !important; }
        .discount-value { color: #10b981 !important; font-weight: 500; }
        .coupon-applied { display: flex; align-items: center; justify-content: space-between; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 8px; padding: 0.75rem 1rem; }
        .coupon-applied-info { display: flex; align-items: center; gap: 0.5rem; color: #10b981; }
        .coupon-applied-code { font-weight: 600; text-transform: uppercase; }
        .btn-remove-coupon { background: none; border: none; color: #ef4444; cursor: pointer; padding: 0.25rem; font-size: 1.2rem; line-height: 1; }
        .btn-remove-coupon:hover { color: #f87171; }
        .variation-label { color: #818cf8; font-weight: 500; }

        /* Remove item button */
        .order-item { position: relative; }
        .btn-remove-item {
            position: absolute;
            top: 50%;
            right: -8px;
            transform: translateY(-50%);
            background: rgba(239,68,68,0.1);
            border: 1px solid rgba(239,68,68,0.3);
            color: #ef4444;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            line-height: 1;
            opacity: 0;
            transition: all 0.2s;
        }
        .order-item:hover .btn-remove-item { opacity: 1; }
        .btn-remove-item:hover { background: rgba(239,68,68,0.2); color: #f87171; transform: translateY(-50%) scale(1.1); }
        .order-item-content { display: flex; justify-content: space-between; flex: 1; padding-right: 20px; }

/* ============================================================
   PRODUCT  (extraido de views/public/product.php)
   ============================================================ */
:root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #818cf8;
            --secondary: #8b5cf6;
            --dark: #0f172a;
            --dark-lighter: #1e293b;
            --gray-900: #111827;
            --gray-800: #1f2937;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;

            /* Adaptive colors - defaults for dark theme */
            --text-primary: #f3f4f6;
            --text-secondary: #d1d5db;
            --text-muted: #9ca3af;
            --text-light: #6b7280;
            --text-inverse: #111827;
            --border-color: rgba(255, 255, 255, 0.1);
            --border-light: rgba(255, 255, 255, 0.05);
            --card-bg: rgba(255, 255, 255, 0.03);
            --card-hover-bg: rgba(255, 255, 255, 0.06);
            --header-bg: rgba(15, 23, 42, 0.95);
            --input-bg: rgba(255, 255, 255, 0.05);
            --input-border: rgba(255, 255, 255, 0.1);
            --shadow-color: rgba(0, 0, 0, 0.3);
            --overlay-bg: rgba(0, 0, 0, 0.7);
        }

        .product-page { min-height: 100vh; background: linear-gradient(135deg, var(--dark) 0%, var(--gray-900) 100%); padding: 2rem 0 4rem; }
        .product-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

        /* Breadcrumbs */
        .breadcrumbs { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; font-size: 0.9rem; }
        .breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
        .breadcrumbs a:hover { color: var(--text-primary); }
        .breadcrumbs span { color: var(--text-light); }
        .breadcrumbs .current { color: var(--primary); }

        /* Product Grid */
        .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }
        @media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; gap: 2rem; } }

        /* Product Gallery */
        .product-gallery { position: sticky; top: 2rem; }
        .product-main-image { width: 100%; aspect-ratio: 4/3; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; }
        .product-main-image img { width: 100%; height: 100%; object-fit: cover; }

        /* Dynamic Glass Edge Profile Preview in main image */
        .main-glass-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--dark, #0f172a); background-image: linear-gradient(180deg, var(--dark) 0%, var(--dark-lighter) 50%, var(--gray-800) 100%); cursor: pointer; position: relative; }
        .main-glass-preview svg { width: 100%; height: 100%; transition: all 0.2s ease-out; }
        .main-glass-preview::after { content: ''; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: rgba(99,102,241,0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center no-repeat; border-radius: 8px; opacity: 0; transition: opacity 0.2s; }
        .main-glass-preview:hover::after { opacity: 1; }

        /* Glass View Thumbnails Gallery */
        .product-thumbnails { display: flex; gap: 0.75rem; flex-wrap: wrap; }
        .product-thumbnail { width: 80px; height: 60px; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
        .product-thumbnail:hover, .product-thumbnail.active { border-color: var(--primary); }
        .product-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

        /* Glass view thumbnails */
        .glass-thumb { width: 80px; height: 60px; background: linear-gradient(135deg, var(--dark), var(--dark-lighter)); border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; position: relative; }
        .glass-thumb:hover { border-color: rgba(99,102,241,0.5); transform: translateY(-2px); }
        .glass-thumb.active { border-color: var(--primary); box-shadow: 0 0 12px rgba(99,102,241,0.3); }
        .glass-thumb svg { width: 100%; height: 100%; }
        .glass-thumb-label { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; background: var(--overlay-bg); padding: 2px 0; }

        /* Lightbox Modal */
        .glass-lightbox { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 10000; align-items: center; justify-content: center; padding: 2rem; }
        .glass-lightbox.active { display: flex; }
        .glass-lightbox-content { max-width: 900px; max-height: 90vh; width: 100%; position: relative; }
        .glass-lightbox-svg { width: 100%; height: auto; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
        .glass-lightbox-svg svg { max-width: 100%; max-height: 70vh; }
        .glass-lightbox-close { position: absolute; top: -40px; right: 0; width: 36px; height: 36px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-primary); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .glass-lightbox-close:hover { background: rgba(239,68,68,0.8); border-color: var(--danger); }
        .glass-lightbox-title { text-align: center; color: var(--text-primary); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; }
        .glass-lightbox-nav { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
        .glass-lightbox-nav button { padding: 0.5rem 1rem; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
        .glass-lightbox-nav button:hover { background: rgba(99,102,241,0.3); border-color: var(--primary); }
        .glass-lightbox-nav button.active { background: var(--primary); border-color: var(--primary); }

        /* Product Info */
        .product-info { }
        .product-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2)); border: 1px solid rgba(99,102,241,0.3); border-radius: 50px; color: var(--primary-light); font-size: 0.85rem; margin-bottom: 1rem; }
        .product-title { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 0.5rem; }
        .product-version { color: var(--text-muted); font-size: 1rem; margin-bottom: 1.5rem; }
        .product-short-desc { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; }

        /* Price Box */
        .product-price-box { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; }
        .price-row { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
        .price-current { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); }
        .price-original { font-size: 1.25rem; color: var(--text-light); text-decoration: line-through; }
        .price-discount { background: linear-gradient(135deg, var(--success), #059669); padding: 0.25rem 0.75rem; border-radius: 50px; color: var(--on-brand); font-size: 0.85rem; font-weight: 600; }
        .price-meta { display: flex; gap: 2rem; color: var(--text-muted); font-size: 0.9rem; }
        .price-meta span { display: flex; align-items: center; gap: 0.5rem; }

        /* Action Buttons */
        .product-actions { display: flex; gap: 1rem; margin-bottom: 2rem; }
        .btn-buy { flex: 1; padding: 1rem 2rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 10px; color: var(--on-brand); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
        .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99,102,241,0.3); }
        .btn-demo { padding: 1rem 1.5rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; color: var(--text-primary); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
        .btn-demo:hover { background: var(--card-hover-bg); border-color: var(--border-color); }

        /* Features List */
        .product-features { margin-bottom: 2rem; }
        .product-features h4 { color: var(--text-primary); font-size: 1.1rem; margin-bottom: 1rem; }
        .features-list { display: grid; gap: 0.75rem; }
        .feature-item { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--text-secondary); }
        .feature-item svg { flex-shrink: 0; color: var(--success); margin-top: 0.15rem; }

        /* Stats Grid */
        .product-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
        @media (max-width: 600px) { .product-stats-grid { grid-template-columns: repeat(2, 1fr); } }
        .stat-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; text-align: center; }
        .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
        .stat-label { font-size: 0.85rem; color: var(--text-muted); }

        /* Description Section */
        .product-description-section { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; margin-bottom: 3rem; }
        .product-description-section h3 { color: var(--text-primary); font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
        .product-description-section h3 svg { color: var(--primary); }
        .product-description { color: var(--text-secondary); line-height: 1.8; }
        .product-description h4 { color: var(--text-primary); margin-top: 1.5rem; margin-bottom: 0.75rem; }
        .product-description ul { margin-left: 1.5rem; margin-bottom: 1rem; }
        .product-description li { margin-bottom: 0.5rem; }
        .product-description img { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; }

        /* Related Products */
        .related-section { margin-top: 4rem; }
        .related-section h3 { color: var(--text-primary); font-size: 1.5rem; margin-bottom: 2rem; text-align: center; }
        .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
        @media (max-width: 900px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }
        .related-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; transition: all 0.3s; }
        .related-card:hover { transform: translateY(-5px); border-color: rgba(99,102,241,0.3); }
        .related-card h4 { color: var(--text-primary); margin-bottom: 0.5rem; }
        .related-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .related-card .price { color: var(--ecom-heading); font-weight: 600; }
        .related-card a { display: block; text-decoration: none; }

        /* Navbar simplified */
        .navbar-simple { background: var(--header-bg); backdrop-filter: blur(10px); padding: 1rem 0; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-light); }
        .navbar-simple .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; }
        .navbar-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1.25rem; }
        .navbar-actions { display: flex; align-items: center; gap: 1rem; }
        .btn-cart { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; color: var(--text-primary); text-decoration: none; font-size: 0.9rem; transition: all 0.2s; }
        .btn-cart:hover { background: var(--card-hover-bg); }
        .cart-count { background: var(--primary); padding: 0.1rem 0.5rem; border-radius: 50px; font-size: 0.75rem; color: var(--on-brand); }

        /* Guarantee Badge */
        .guarantee-badge { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 12px; margin-bottom: 1.5rem; }
        .guarantee-badge svg { color: var(--success); flex-shrink: 0; }
        .guarantee-badge span { color: var(--success); font-size: 0.9rem; }

: sin esta envoltura
          // el bloque :root{...} se pintaba como texto en la cabecera de la ficha. ?>
    <style>

/* ============================================================
   ABOUT  (extraido de views/public/about.php)
   ============================================================ */
.page-header { padding: 8rem 0 4rem; background-color: #1a1a4e; background-image: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, #1a1a4e) 0%, #1a1a4e 100%); text-align: center; }
        .page-header h1 { color: var(--on-brand); font-size: 3rem; margin-bottom: 1rem; }
        .page-header p { color: rgba(255,255,255,0.7); font-size: 1.25rem; }
        .about-section { padding: 5rem 0; }
        .about-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
        .about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 5rem; }
        .about-text h2 { font-size: 2.5rem; color: #111827; margin-bottom: 1.5rem; line-height: 1.2; }
        .about-text h2 span { color: var(--accent); }
        .about-text p { color: #6b7280; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; }
        .about-image { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
        .about-image img { width: 100%; height: auto; display: block; }
        .about-image-placeholder { background: linear-gradient(135deg, var(--primary), var(--secondary)); height: 400px; display: flex; align-items: center; justify-content: center; color: var(--on-brand); font-size: 1.5rem; }
        .values-section { background: #f8fafc; padding: 5rem 0; }
        .section-title { text-align: center; margin-bottom: 3rem; }
        .section-title h2 { font-size: 2.5rem; color: #111827; margin-bottom: 1rem; }
        .section-title p { color: #6b7280; font-size: 1.1rem; }
        .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
        .value-card { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s; }
        .value-card:hover { transform: translateY(-5px); }
        .value-icon { width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #4DD4C8); display: flex; align-items: center; justify-content: center; color: var(--on-brand); margin-bottom: 1.5rem; }
        .value-card h3 { color: #111827; font-size: 1.25rem; margin-bottom: 0.75rem; }
        .value-card p { color: #6b7280; line-height: 1.7; }
        .timeline-section { padding: 5rem 0; }
        .timeline { max-width: 800px; margin: 0 auto; padding: 0 2rem; position: relative; }
        .timeline::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: #e5e7eb; }
        .timeline-item { display: flex; margin-bottom: 3rem; position: relative; }
        .timeline-item:nth-child(odd) { flex-direction: row-reverse; }
        .timeline-content { width: 45%; background: white; border-radius: 16px; padding: 1.5rem 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        .timeline-year { display: inline-block; background: var(--primary); color: var(--on-brand); padding: 0.25rem 0.75rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem; }
        .timeline-content h3 { color: #111827; margin-bottom: 0.5rem; }
        .timeline-content p { color: #6b7280; font-size: 0.95rem; margin: 0; }
        .timeline-dot { position: absolute; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; background: var(--primary); border-radius: 50%; border: 4px solid white; box-shadow: 0 0 0 2px var(--primary); }
        .team-section { background: #f8fafc; padding: 5rem 0; }
        .cta-section { background: linear-gradient(135deg, var(--secondary) 0%, #1a1a4e 100%); padding: 5rem 0; text-align: center; }
        .cta-section h2 { color: var(--on-brand); font-size: 2.5rem; margin-bottom: 1rem; }
        .cta-section p { color: rgba(255,255,255,0.7); font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
        .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
        @media (max-width: 900px) {
            .about-intro { grid-template-columns: 1fr; }
            .timeline::before { left: 20px; }
            .timeline-item, .timeline-item:nth-child(odd) { flex-direction: row; padding-left: 50px; }
            .timeline-content { width: 100%; }
            .timeline-dot { left: 20px; }
        }

/* ============================================================
   BLOG  (extraido de views/public/blog.php)
   ============================================================ */
.page-header { padding: 8rem 0 4rem; background-color: #1a1a4e; background-image: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, #1a1a4e) 0%, #1a1a4e 100%); text-align: center; }
        .page-header h1 { color: var(--on-brand); font-size: 3rem; margin-bottom: 1rem; }
        .page-header p { color: rgba(255,255,255,0.7); font-size: 1.25rem; max-width: 600px; margin: 0 auto; }
        .blog-section { padding: 5rem 0; background: #f8fafc; }
        .blog-container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
        .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
        .blog-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
        .blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
        .blog-card-img { width: 100%; height: 180px; object-fit: cover; background: #e5e7eb; }
        .blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
        .blog-card h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
        .blog-card h2 a { color: #111827; text-decoration: none; }
        .blog-card h2 a:hover { color: var(--primary); }
        .blog-card p { color: #6b7280; line-height: 1.6; flex: 1; margin: 0 0 1rem; }
        .blog-card-meta { font-size: 0.85rem; color: #9ca3af; }
        .blog-empty { text-align: center; color: #6b7280; padding: 4rem 0; }

/* ============================================================
   BLOG_POST  (extraido de views/public/blog_post.php)
   ============================================================ */
.page-header { padding: 8rem 0 4rem; background-color: #1a1a4e; background-image: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, #1a1a4e) 0%, #1a1a4e 100%); text-align: center; }
        .page-header h1 { color: var(--on-brand); font-size: 2.4rem; margin-bottom: 1rem; max-width: 800px; margin-left: auto; margin-right: auto; padding: 0 2rem; }
        .page-header .post-meta { color: rgba(255,255,255,0.7); font-size: 1rem; }
        .post-section { padding: 4rem 0; background: #f8fafc; }
        .post-container { max-width: 760px; margin: 0 auto; padding: 0 2rem; }
        .post-cover { width: 100%; border-radius: 16px; margin-bottom: 2rem; }
        .post-content { background: white; border-radius: 16px; padding: 2.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); color: #374151; line-height: 1.8; }
        .post-content h2, .post-content h3 { color: #111827; margin: 1.5rem 0 0.75rem; }
        .post-content ul { padding-left: 1.5rem; margin: 1rem 0; }
        .post-content img { max-width: 100%; border-radius: 8px; }
        .related { margin-top: 3rem; }
        .related h2 { color: #111827; margin-bottom: 1.5rem; }
        .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
        .related-card { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .related-card a { color: #111827; text-decoration: none; font-weight: 600; }
        .related-card a:hover { color: var(--primary); }
        .back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--primary); text-decoration: none; font-weight: 500; }

/* ============================================================
   CONTACT  (extraido de views/public/contact.php)
   ============================================================ */
/* padding:0 + min-height propio: el .page-header base (8rem/4rem, regla de
   abajo) metia el padding en el CONTENEDOR, pero .hero-map-bg (absolute,
   inset:0) cubre TODA esa caja mientras .hero-map-overlay (antes
   position:relative, en flujo) solo cubria su propio contenido de texto sin
   el padding del padre — el mapa asomaba por encima y por debajo de la
   barra oscura. Fix: overlay tambien absolute/inset:0 con su propio padding
   y centrado flex, para que cubra exactamente lo mismo que el mapa. */
.page-header--map-hero { position: relative; overflow: hidden; padding: 0; min-height: 300px; }
        .page-header--map-hero .hero-map-bg { position: absolute; inset: 0; z-index: 0; }
        .page-header--map-hero .hero-map-bg iframe { width: 100%; height: 100%; border: 0; display: block; }
        .page-header--map-hero .hero-map-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 8rem 0 4rem; background-color: #1a1a4e; background-image: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, #1a1a4e) 0%, #1a1a4e 100%); transition: opacity 0.6s ease; }
        .page-header--map-hero .hero-map-overlay .container { width: 100%; }
        .page-header--map-hero .hero-map-overlay.is-hidden { opacity: 0; pointer-events: none; }
.page-header { padding: 8rem 0 4rem; background-color: #1a1a4e; background-image: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, #1a1a4e) 0%, #1a1a4e 100%); text-align: center; }
        .page-header h1 { color: var(--on-brand); font-size: 3rem; margin-bottom: 1rem; }
        .page-header p { color: rgba(255,255,255,0.7); font-size: 1.25rem; }
        .contact-section { padding: 5rem 0; background: #f8fafc; }
        .contact-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
        .contact-info { }
        .contact-info h2 { font-size: 2rem; color: #111827; margin-bottom: 1.5rem; }
        .contact-info p { color: #6b7280; line-height: 1.7; margin-bottom: 2rem; }
        .info-card { background: white; border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; align-items: flex-start; gap: 1.5rem; }
        .info-icon { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #4DD4C8); display: flex; align-items: center; justify-content: center; color: var(--on-brand); flex-shrink: 0; }
        .info-content h3 { color: #111827; font-size: 1.1rem; margin-bottom: 0.5rem; }
        .info-content p { color: #6b7280; margin: 0; }
        .info-content a { color: var(--primary); text-decoration: none; }
        .contact-form-wrapper { background: white; border-radius: 20px; padding: 2.5rem; box-shadow: 0 4px 30px rgba(0,0,0,0.1); }
        .contact-form h3 { font-size: 1.5rem; color: #111827; margin-bottom: 0.5rem; }
        .contact-form > p { color: #6b7280; margin-bottom: 2rem; }
        .form-group { margin-bottom: 1.5rem; }
        .form-group label { display: block; color: #374151; font-weight: 500; margin-bottom: 0.5rem; }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.875rem 1rem; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 1rem; font-family: inherit; transition: border-color 0.2s; }
        .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
        .form-group textarea { resize: vertical; min-height: 120px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .btn-submit { width: 100%; padding: 1rem 2rem; background-color: var(--primary); background-image: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 45%, #4DD4C8) 100%); color: var(--on-brand); border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
        .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(42, 185, 173, 0.4); }
        .map-section { padding: 0; }
        .map-section iframe { width: 100%; height: 400px; border: none; }
        .schedule-card { background-color: var(--primary); background-image: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 45%, #4DD4C8) 100%); border-radius: 16px; padding: 2rem; color: var(--on-brand); margin-top: 1.5rem; }
        .schedule-card h3 { margin-bottom: 1rem; }
        .schedule-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
        .schedule-row:last-child { border: none; }
        @media (max-width: 900px) { .contact-container { grid-template-columns: 1fr; } }
        @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ  (extraido de views/public/faq.php)
   ============================================================ */
.page-header { padding: 8rem 0 4rem; background-color: #1a1a4e; background-image: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, #1a1a4e) 0%, #1a1a4e 100%); text-align: center; }
        .page-header h1 { color: var(--on-brand); font-size: 3rem; margin-bottom: 1rem; }
        .page-header p { color: rgba(255,255,255,0.7); font-size: 1.25rem; max-width: 600px; margin: 0 auto; }
        .faq-section { padding: 5rem 0; background: #f8fafc; }
        .faq-container { max-width: 800px; margin: 0 auto; padding: 0 2rem; }
        .faq-categories { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
        .faq-category-btn { padding: 0.75rem 1.5rem; border: 2px solid #e5e7eb; background: white; border-radius: 50px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
        .faq-category-btn:hover, .faq-category-btn.active { border-color: var(--primary); background: var(--primary); color: var(--on-brand); }
        .faq-item { background: white; border-radius: 16px; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; }
        .faq-question { padding: 1.5rem 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
        /* .faq-question ahora es <button> (accesibilidad, teclado nativo): reset de
           estilos de boton nativo, el resto de reglas de arriba (padding/flex/etc)
           ya aplican igual por ser la misma clase. */
        button.faq-question { width: 100%; background: transparent; border: none; margin: 0; font: inherit; text-align: left; color: inherit; appearance: none; }
        .faq-question:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
        .faq-question:hover { background: #f9fafb; }
        .faq-question h3 { font-size: 1.1rem; color: #111827; font-weight: 600; margin: 0; flex: 1; padding-right: 1rem; }
        .faq-icon { width: 24px; height: 24px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background 0.3s; flex-shrink: 0; }
        .faq-item.open .faq-icon { transform: rotate(180deg); background: var(--primary); color: var(--on-brand); }
        .faq-answer { padding: 0 2rem; max-height: 0; overflow: hidden; transition: all 0.3s ease; }
        .faq-item.open .faq-answer { padding: 0 2rem 1.5rem; max-height: 500px; }
        .faq-answer p { color: #6b7280; line-height: 1.7; margin: 0; }
        .faq-cta { background: white; border-radius: 20px; padding: 3rem; text-align: center; margin-top: 3rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        .faq-cta h2 { color: #111827; margin-bottom: 1rem; }
        .faq-cta p { color: #6b7280; margin-bottom: 2rem; }
        .default-faqs { margin-top: 2rem; }
        .default-faqs h2 { text-align: center; color: #111827; margin-bottom: 2rem; }

/* ============================================================
   TESTIMONIALS  (extraido de views/public/testimonials.php)
   ============================================================ */
.page-header { padding: 8rem 0 4rem; background-color: #1a1a4e; background-image: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 55%, #1a1a4e) 0%, #1a1a4e 100%); text-align: center; }
        .page-header h1 { color: var(--on-brand); font-size: 3rem; margin-bottom: 1rem; }
        .page-header p { color: rgba(255,255,255,0.7); font-size: 1.25rem; max-width: 600px; margin: 0 auto; }
        .testimonials-section { padding: 5rem 0; background: #f8fafc; }
        .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
        .testimonial-card { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
        .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
        .testimonial-stars { color: #fbbf24; margin-bottom: 1rem; }
        .testimonial-text { color: #4b5563; font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; }
        .testimonial-author { display: flex; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
        .testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: var(--on-brand); font-weight: 700; font-size: 1.2rem; }
        .testimonial-info h4 { color: #111827; font-weight: 600; margin-bottom: 0.25rem; }
        .testimonial-info span { color: #6b7280; font-size: 0.9rem; }
        .stats-bar { background: white; padding: 3rem 0; border-bottom: 1px solid #e5e7eb; }
        .stats-grid { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
        .stat-item { text-align: center; }
        .stat-value { font-size: 3rem; font-weight: 800; color: var(--primary); }
        .stat-label { color: #6b7280; font-size: 1rem; }
        .cta-section { background: var(--secondary); padding: 4rem 0; text-align: center; }
        .cta-section h2 { color: var(--on-brand); font-size: 2rem; margin-bottom: 1rem; }
        .cta-section p { color: rgba(255,255,255,0.7); margin-bottom: 2rem; }
        .empty-state { text-align: center; padding: 4rem; color: #6b7280; }

/* ============================================================
   PRODUCT  (extraido de views/public/product.php)
   OJO: el :root de esa vista sigue inline porque es dinamico
   ($settings) y define tokens propios (--text-*, --card-bg,
   --dark, --input-*) que SOLO existen en la ficha de producto.
   ============================================================ */
        .product-page { min-height: 100vh; background: linear-gradient(135deg, var(--dark) 0%, var(--gray-900) 100%); padding: 2rem 0 4rem; }
        .product-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

        /* Breadcrumbs */
        .breadcrumbs { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; font-size: 0.9rem; }
        .breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
        .breadcrumbs a:hover { color: var(--text-primary); }
        .breadcrumbs span { color: var(--text-light); }
        .breadcrumbs .current { color: var(--primary); }

        /* Product Grid */
        .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }
        @media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; gap: 2rem; } }

        /* Product Gallery */
        .product-gallery { position: sticky; top: 2rem; }
        .product-main-image { width: 100%; aspect-ratio: 4/3; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; }
        .product-main-image img { width: 100%; height: 100%; object-fit: cover; }

        /* Dynamic Glass Edge Profile Preview in main image */
        .main-glass-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--dark, #0f172a); background-image: linear-gradient(180deg, var(--dark) 0%, var(--dark-lighter) 50%, var(--gray-800) 100%); cursor: pointer; position: relative; }
        .main-glass-preview svg { width: 100%; height: 100%; transition: all 0.2s ease-out; }
        .main-glass-preview::after { content: ''; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: rgba(99,102,241,0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center no-repeat; border-radius: 8px; opacity: 0; transition: opacity 0.2s; }
        .main-glass-preview:hover::after { opacity: 1; }

        /* Glass View Thumbnails Gallery */
        .product-thumbnails { display: flex; gap: 0.75rem; flex-wrap: wrap; }
        .product-thumbnail { width: 80px; height: 60px; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
        .product-thumbnail:hover, .product-thumbnail.active { border-color: var(--primary); }
        .product-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

        /* Glass view thumbnails */
        .glass-thumb { width: 80px; height: 60px; background: linear-gradient(135deg, var(--dark), var(--dark-lighter)); border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; position: relative; }
        .glass-thumb:hover { border-color: rgba(99,102,241,0.5); transform: translateY(-2px); }
        .glass-thumb.active { border-color: var(--primary); box-shadow: 0 0 12px rgba(99,102,241,0.3); }
        .glass-thumb svg { width: 100%; height: 100%; }
        .glass-thumb-label { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; background: var(--overlay-bg); padding: 2px 0; }

        /* Lightbox Modal */
        .glass-lightbox { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 10000; align-items: center; justify-content: center; padding: 2rem; }
        .glass-lightbox.active { display: flex; }
        .glass-lightbox-content { max-width: 900px; max-height: 90vh; width: 100%; position: relative; }
        .glass-lightbox-svg { width: 100%; height: auto; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
        .glass-lightbox-svg svg { max-width: 100%; max-height: 70vh; }
        .glass-lightbox-close { position: absolute; top: -40px; right: 0; width: 36px; height: 36px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-primary); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .glass-lightbox-close:hover { background: rgba(239,68,68,0.8); border-color: var(--danger); }
        .glass-lightbox-title { text-align: center; color: var(--text-primary); font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; }
        .glass-lightbox-nav { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
        .glass-lightbox-nav button { padding: 0.5rem 1rem; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
        .glass-lightbox-nav button:hover { background: rgba(99,102,241,0.3); border-color: var(--primary); }
        .glass-lightbox-nav button.active { background: var(--primary); border-color: var(--primary); }

        /* Product Info */
        .product-info { }
        .product-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2)); border: 1px solid rgba(99,102,241,0.3); border-radius: 50px; color: var(--primary-light); font-size: 0.85rem; margin-bottom: 1rem; }
        .product-title { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 0.5rem; }
        .product-version { color: var(--text-muted); font-size: 1rem; margin-bottom: 1.5rem; }
        .product-short-desc { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; }

        /* Price Box */
        .product-price-box { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; }
        .price-row { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
        .price-current { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); }
        .price-original { font-size: 1.25rem; color: var(--text-light); text-decoration: line-through; }
        .price-discount { background: linear-gradient(135deg, var(--success), #059669); padding: 0.25rem 0.75rem; border-radius: 50px; color: var(--on-brand); font-size: 0.85rem; font-weight: 600; }
        .price-meta { display: flex; gap: 2rem; color: var(--text-muted); font-size: 0.9rem; }
        .price-meta span { display: flex; align-items: center; gap: 0.5rem; }

        /* Action Buttons */
        .product-actions { display: flex; gap: 1rem; margin-bottom: 2rem; }
        .btn-buy { flex: 1; padding: 1rem 2rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 10px; color: var(--on-brand); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
        .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99,102,241,0.3); }
        .btn-demo { padding: 1rem 1.5rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; color: var(--text-primary); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
        .btn-demo:hover { background: var(--card-hover-bg); border-color: var(--border-color); }

        /* Features List */
        .product-features { margin-bottom: 2rem; }
        .product-features h4 { color: var(--text-primary); font-size: 1.1rem; margin-bottom: 1rem; }
        .features-list { display: grid; gap: 0.75rem; }
        .feature-item { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--text-secondary); }
        .feature-item svg { flex-shrink: 0; color: var(--success); margin-top: 0.15rem; }

        /* Stats Grid */
        .product-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
        @media (max-width: 600px) { .product-stats-grid { grid-template-columns: repeat(2, 1fr); } }
        .stat-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; text-align: center; }
        .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
        .stat-label { font-size: 0.85rem; color: var(--text-muted); }

        /* Description Section */
        .product-description-section { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; margin-bottom: 3rem; }
        .product-description-section h3 { color: var(--text-primary); font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
        .product-description-section h3 svg { color: var(--primary); }
        .product-description { color: var(--text-secondary); line-height: 1.8; }
        .product-description h4 { color: var(--text-primary); margin-top: 1.5rem; margin-bottom: 0.75rem; }
        .product-description ul { margin-left: 1.5rem; margin-bottom: 1rem; }
        .product-description li { margin-bottom: 0.5rem; }
        .product-description img { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; }

        /* Related Products */
        .related-section { margin-top: 4rem; }
        .related-section h3 { color: var(--text-primary); font-size: 1.5rem; margin-bottom: 2rem; text-align: center; }
        .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
        @media (max-width: 900px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }
        .related-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; transition: all 0.3s; }
        .related-card:hover { transform: translateY(-5px); border-color: rgba(99,102,241,0.3); }
        .related-card h4 { color: var(--text-primary); margin-bottom: 0.5rem; }
        .related-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .related-card .price { color: var(--ecom-heading); font-weight: 600; }
        .related-card a { display: block; text-decoration: none; }

        /* Navbar simplified */
        .navbar-simple { background: var(--header-bg); backdrop-filter: blur(10px); padding: 1rem 0; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-light); }
        .navbar-simple .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; }
        .navbar-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1.25rem; }
        .navbar-actions { display: flex; align-items: center; gap: 1rem; }
        .btn-cart { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; color: var(--text-primary); text-decoration: none; font-size: 0.9rem; transition: all 0.2s; }
        .btn-cart:hover { background: var(--card-hover-bg); }
        .cart-count { background: var(--primary); padding: 0.1rem 0.5rem; border-radius: 50px; font-size: 0.75rem; color: var(--on-brand); }

        /* Guarantee Badge */
        .guarantee-badge { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 12px; margin-bottom: 1.5rem; }
        .guarantee-badge svg { color: var(--success); flex-shrink: 0; }
        .guarantee-badge span { color: var(--success); font-size: 0.9rem; }


/* A2/A3 chrome: topbar, mini-cart, toast, cookies */
.ecom-topbar { background: #0f172a; color: #e2e8f0; font-size: 0.82rem; padding: 0.35rem 0; }
.ecom-topbar-inner { display: flex; justify-content: flex-end; }
.ecom-topbar-phone { color: #e2e8f0; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; padding: 0.25rem; }
.ecom-topbar-phone-icon { display: block; }
.ecom-topbar-phone:hover { color: #fff; }
html.ecom-theme-light .ecom-topbar { background: #e2e8f0; color: #0f172a; }
html.ecom-theme-light .ecom-topbar-phone { color: #0f172a; }

/* Home + catálogo: tarjetas con FONDO claro y tinta oscura (no al revés). */
html.ecom-theme-light .product-card,
html.ecom-theme-light .catalog-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}
html.ecom-theme-light .product-card h3,
html.ecom-theme-light .product-stat-value,
html.ecom-theme-light .catalog-card h2,
html.ecom-theme-light .catalog-price {
    color: #0f172a;
}
html.ecom-theme-light .product-description,
html.ecom-theme-light .product-subtitle,
html.ecom-theme-light .product-stat-label,
html.ecom-theme-light .catalog-card p,
html.ecom-theme-light .catalog-price small {
    color: #475569;
}
html.ecom-theme-light .catalog-badge {
    background: #e2e8f0;
    color: #0f172a;
}
html.ecom-theme-light .btn-primary,
html.ecom-theme-light .btn-success {
    color: #fff;
}
html.ecom-theme-light .catalog-chip {
    border-color: #cbd5e1;
    color: #0f172a;
}
html.ecom-theme-light .catalog-card-media {
    background: #f1f5f9;
}
.product-main-image img {
    object-fit: contain;
    background: #111827;
}
html.ecom-theme-light .product-main-image img {
    background: #f1f5f9;
}
.ecom-cart-btn { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; }
.ecom-cart-btn .cart-count {
    background: var(--primary, #6366f1); color: var(--on-brand, #fff);
    min-width: 1.25rem; height: 1.25rem; border-radius: 999px; font-size: 0.7rem;
    align-items: center; justify-content: center; padding: 0 0.35rem;
}
.ecom-mini-cart-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1080; }
.ecom-mini-cart {
    position: fixed; top: 0; right: 0; width: min(22rem, 100vw); height: 100vh;
    background: var(--ecom-surface, #0f172a); color: var(--white, #fff);
    z-index: 1081; display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(0,0,0,.25);
}
.ecom-mini-cart[hidden],
.ecom-mini-cart-backdrop[hidden] {
    display: none !important;
}
.ecom-mini-cart__head, .ecom-mini-cart__foot {
    padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ecom-mini-cart__foot { border-bottom: 0; border-top: 1px solid rgba(255,255,255,.08); flex-direction: column; gap: .75rem; align-items: stretch; }
.ecom-mini-cart__close {
    background: none; border: 0; color: inherit; font-size: 1.8rem; line-height: 1;
    cursor: pointer; width: 2.25rem; height: 2.25rem; border-radius: 999px;
}
.ecom-mini-cart__body { flex: 1; overflow: auto; padding: .5rem 1.1rem 1rem; }
.ecom-mini-cart__empty { color: #94a3b8; padding: 2rem 0; text-align: center; }
.ecom-mini-cart__item {
    display: flex; justify-content: space-between; gap: .75rem;
    padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
    color: inherit; text-decoration: none;
}
.ecom-mini-cart__name { display: flex; flex-direction: column; gap: .15rem; font-weight: 600; }
.ecom-mini-cart__name small { font-weight: 400; color: #94a3b8; }
.ecom-mini-cart__cta { text-align: center; text-decoration: none; }
html.ecom-theme-light .ecom-mini-cart { background: #fff; color: #111827; }
html.ecom-theme-light .ecom-mini-cart__name small { color: #6b7280; }
.ecom-toast {
    position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(12px);
    background: #111827; color: #fff; padding: .7rem 1.1rem; border-radius: 999px;
    font-size: .9rem; z-index: 1100; opacity: 0; pointer-events: none; transition: .2s;
}
.ecom-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ecom-toast--error { background: #b91c1c; }
.ecom-cookie {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1070;
    background: #111827; color: #e5e7eb; border-radius: 14px; padding: 1rem 1.1rem;
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
}
/* `display:flex` pisa el [hidden]{display:none} del user-agent (especificidad de
   autor > UA), asi que sin esta regla el banner NO se cierra al aceptar. */
.ecom-cookie[hidden] { display: none; }
.ecom-cookie p { margin: 0; max-width: 40rem; font-size: .88rem; }
.ecom-cookie__actions { display: flex; gap: .6rem; align-items: center; }
.ecom-cookie a { color: #a5b4fc; }
.ecom-cookie button { background: var(--primary); color: var(--on-brand); border: 0; border-radius: 8px; padding: .45rem .9rem; cursor: pointer; }
.catalog-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 1rem; }
.catalog-chip {
    display: inline-flex; padding: .3rem .7rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18); color: var(--white, #fff);
    text-decoration: none; font-size: .82rem;
}
.catalog-chip.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-brand); }
html.ecom-theme-light .catalog-chip { color: var(--ecom-heading); border-color: var(--ecom-card-border); }
/* Especificidad: "html.ecom-theme-light .catalog-chip" (0,2,1) le gana a
   ".catalog-chip.is-on" (0,2,0) y en claro dejaba el chip activo con texto
   oscuro sobre fondo --primary (oscuro) — casi ilegible. Se restaura aqui con
   mas especificidad. */
html.ecom-theme-light .catalog-chip.is-on { color: var(--on-brand); }
.ecom-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; padding: 0; }
.ecom-trust li {
    list-style: none; background: var(--card-bg, rgba(255,255,255,.04));
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 14px; padding: 1rem; font-size: .9rem;
}
@media (max-width: 800px) { .ecom-trust { grid-template-columns: 1fr 1fr; } }


/* ===== Portado de demo.perfex.com.es (hero + trust + navbar glass) ===== */
.ecom-trust-bar {
    padding-top: 0;
    padding-bottom: 3rem;
}

.ecom-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.ecom-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.ecom-trust-icon {
    font-size: 1.5rem;
    line-height: 1;
}
/* f2 §F2.4 plan_aprobado: version SVG del icono (sustituye al emoji), color de
   marca via currentColor y sin encoger dentro del flex. */
.ecom-trust-icon--svg {
    flex-shrink: 0;
    color: var(--accent, var(--primary));
}

.ecom-trust-item strong {
    display: block;
    /* Énfasis de marca (no blanco fijo: rompe temas claros) */
    color: var(--accent, var(--primary));
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

.ecom-trust-item span {
    display: block;
    font-size: 0.82rem;
    color: var(--ecom-body, var(--gray-400));
}

/* ============================================
   Navbar — único sticky + glassmorphism
   ============================================ */
.navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.85rem 0;
    /* Glass: transparente + blur de lo que hay detrás */
    background: color-mix(in srgb, var(--surface, var(--dark-950)) 28%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
    backdrop-filter: blur(18px) saturate(1.45);
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border, rgba(255,255,255,0.1)) 80%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
                0 8px 32px color-mix(in srgb, var(--primary) 8%, transparent);
    transition:
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        padding 0.25s ease;
    will-change: transform;
}

/* Oculto al bajar; se muestra solo al subir */
.navbar.nav-hidden {
    transform: translateY(-110%);
    pointer-events: none;
    box-shadow: none;
    border-bottom-color: transparent;
}

/* Con menú móvil abierto, nunca ocultar */
body.menu-open .navbar.nav-hidden {
    transform: none;
    pointer-events: auto;
}

/* Fallback si no hay backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar {
        background: color-mix(in srgb, var(--surface, var(--dark-950)) 88%, transparent);
    }
}

/* Un pelín más denso al scrollear, sigue glass */
.navbar.scrolled {
    padding: 0.65rem 0;
    background: color-mix(in srgb, var(--surface, var(--dark-950)) 42%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.55);
    backdrop-filter: blur(22px) saturate(1.55);
    border-bottom-color: var(--glass-border, rgba(255,255,255,0.12));
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
                0 12px 40px color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Ya no usamos capa ::before opaca */
.navbar::before {
    display: none;
}

/* ========== Full-width section heroes (tema claro + degradados + partículas) ========== */
.ecom-fw-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #0f172a;
  background:
    radial-gradient(1200px 480px at 12% -10%, color-mix(in srgb, var(--primary) 22%, #fff) 0%, transparent 58%),
    radial-gradient(900px 420px at 88% 0%, color-mix(in srgb, var(--accent, #a78bfa) 20%, #fff) 0%, transparent 55%),
    linear-gradient(165deg, #ffffff 0%, #f4f7ff 42%, #eef6ff 100%);
}
.ecom-fw-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
  opacity: .55;
  pointer-events: none;
}
.ecom-fw-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ecom-fw-hero-bg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: .16;
  filter: saturate(1.05) blur(0.2px);
  transform: scale(1.04);
  pointer-events: none;
}
.ecom-fw-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(110deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 42%, rgba(255,255,255,.42) 100%),
    linear-gradient(0deg, rgba(248,250,252,.85) 0%, transparent 48%);
  pointer-events: none;
}
.ecom-fw-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* f2 §F2.1 plan_aprobado: solo desktop — en movil restan legibilidad y no
   aportan (menos ruido, mas intencion). */
@media (max-width: 768px) {
  .ecom-fw-hero__particles { display: none; }
}
/* Todas las partículas se mueven (más recorrido, más rápidas, direcciones mezcladas) */
.ecom-fw-hero__particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 65%, #fff);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
    0 0 12px color-mix(in srgb, var(--primary) 35%, transparent);
  opacity: .7;
  will-change: transform, opacity;
  animation-name: ecomFwParticleUp;
  animation-duration: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: running;
}
.ecom-fw-hero__particle:nth-child(odd) {
  width: 5px;
  height: 5px;
  background: color-mix(in srgb, var(--accent, #a78bfa) 70%, #fff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #a78bfa) 18%, transparent),
    0 0 10px color-mix(in srgb, var(--accent, #a78bfa) 30%, transparent);
  animation-duration: 11s;
}
.ecom-fw-hero__particle:nth-child(3n) {
  width: 9px;
  height: 9px;
  opacity: .5;
  animation-duration: 13s;
}
/* posiciones + delay (todas en ciclo activo) */
.ecom-fw-hero__particle--1  { left: 8%;  top: 22%; animation-delay: 0s; }
.ecom-fw-hero__particle--2  { left: 16%; top: 68%; animation-delay: -1.2s; }
.ecom-fw-hero__particle--3  { left: 24%; top: 18%; animation-delay: -2.4s; }
.ecom-fw-hero__particle--4  { left: 33%; top: 74%; animation-delay: -0.6s; }
.ecom-fw-hero__particle--5  { left: 41%; top: 30%; animation-delay: -3.6s; }
.ecom-fw-hero__particle--6  { left: 49%; top: 58%; animation-delay: -1.8s; }
.ecom-fw-hero__particle--7  { left: 57%; top: 16%; animation-delay: -4.2s; }
.ecom-fw-hero__particle--8  { left: 65%; top: 70%; animation-delay: -3s; }
.ecom-fw-hero__particle--9  { left: 73%; top: 28%; animation-delay: -0.9s; }
.ecom-fw-hero__particle--10 { left: 81%; top: 62%; animation-delay: -2.1s; }
.ecom-fw-hero__particle--11 { left: 89%; top: 20%; animation-delay: -4.8s; }
.ecom-fw-hero__particle--12 { left: 12%; top: 44%; animation-delay: -1.5s; }
.ecom-fw-hero__particle--13 { left: 28%; top: 50%; animation-delay: -3.3s; }
.ecom-fw-hero__particle--14 { left: 52%; top: 40%; animation-delay: -2.7s; }
.ecom-fw-hero__particle--15 { left: 70%; top: 48%; animation-delay: -0.3s; }
.ecom-fw-hero__particle--16 { left: 86%; top: 42%; animation-delay: -3.9s; }
.ecom-fw-hero__particle--17 { left: 38%; top: 12%; animation-delay: -1s; }
.ecom-fw-hero__particle--18 { left: 60%; top: 82%; animation-delay: -4.5s; }
.ecom-fw-hero__particle--19 { left: 5%;  top: 55%; animation-delay: -2s; }
.ecom-fw-hero__particle--20 { left: 46%; top: 78%; animation-delay: -3.1s; }
.ecom-fw-hero__particle--21 { left: 78%; top: 8%;  animation-delay: -0.4s; }
.ecom-fw-hero__particle--22 { left: 20%; top: 86%; animation-delay: -4s; }
.ecom-fw-hero__particle--23 { left: 92%; top: 48%; animation-delay: -1.7s; }
.ecom-fw-hero__particle--24 { left: 34%; top: 36%; animation-delay: -2.9s; }

/* Direcciones mezcladas: cada partícula se mueve (no todas en la misma dirección) */
.ecom-fw-hero__particle--1,
.ecom-fw-hero__particle--9,
.ecom-fw-hero__particle--17 { animation-name: ecomFwParticleUp; }
.ecom-fw-hero__particle--2,
.ecom-fw-hero__particle--10,
.ecom-fw-hero__particle--18 { animation-name: ecomFwParticleDown; }
.ecom-fw-hero__particle--3,
.ecom-fw-hero__particle--11,
.ecom-fw-hero__particle--19 { animation-name: ecomFwParticleLeft; }
.ecom-fw-hero__particle--4,
.ecom-fw-hero__particle--12,
.ecom-fw-hero__particle--20 { animation-name: ecomFwParticleRight; }
.ecom-fw-hero__particle--5,
.ecom-fw-hero__particle--13,
.ecom-fw-hero__particle--21 { animation-name: ecomFwParticleUpRight; }
.ecom-fw-hero__particle--6,
.ecom-fw-hero__particle--14,
.ecom-fw-hero__particle--22 { animation-name: ecomFwParticleUpLeft; }
.ecom-fw-hero__particle--7,
.ecom-fw-hero__particle--15,
.ecom-fw-hero__particle--23 { animation-name: ecomFwParticleDownRight; }
.ecom-fw-hero__particle--8,
.ecom-fw-hero__particle--16,
.ecom-fw-hero__particle--24 { animation-name: ecomFwParticleDownLeft; }

/* Recorrido más largo para que se note el movimiento */
@keyframes ecomFwParticleUp {
  0%   { transform: translate3d(0, 40px, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(8px, -110px, 0) scale(1.15); opacity: .12; }
}
@keyframes ecomFwParticleDown {
  0%   { transform: translate3d(0, -40px, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(-8px, 110px, 0) scale(1.15); opacity: .12; }
}
@keyframes ecomFwParticleLeft {
  0%   { transform: translate3d(48px, 0, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(-120px, 12px, 0) scale(1.15); opacity: .12; }
}
@keyframes ecomFwParticleRight {
  0%   { transform: translate3d(-48px, 0, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(120px, -12px, 0) scale(1.15); opacity: .12; }
}
@keyframes ecomFwParticleUpRight {
  0%   { transform: translate3d(-24px, 36px, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(90px, -100px, 0) scale(1.15); opacity: .12; }
}
@keyframes ecomFwParticleUpLeft {
  0%   { transform: translate3d(24px, 36px, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(-90px, -100px, 0) scale(1.15); opacity: .12; }
}
@keyframes ecomFwParticleDownRight {
  0%   { transform: translate3d(-24px, -36px, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(90px, 100px, 0) scale(1.15); opacity: .12; }
}
@keyframes ecomFwParticleDownLeft {
  0%   { transform: translate3d(24px, -36px, 0) scale(.85); opacity: .15; }
  35%  { opacity: .85; }
  100% { transform: translate3d(-90px, 100px, 0) scale(1.15); opacity: .12; }
}
/* dir-* del hero: sesgo opcional (las individuales siguen mezcladas por encima) */
.ecom-fw-hero--dir-up .ecom-fw-hero__particle--1,
.ecom-fw-hero--dir-up .ecom-fw-hero__particle--5,
.ecom-fw-hero--dir-up .ecom-fw-hero__particle--9,
.ecom-fw-hero--dir-up .ecom-fw-hero__particle--13,
.ecom-fw-hero--dir-up .ecom-fw-hero__particle--17,
.ecom-fw-hero--dir-up .ecom-fw-hero__particle--21 { animation-name: ecomFwParticleUp; }
.ecom-fw-hero--dir-down .ecom-fw-hero__particle--2,
.ecom-fw-hero--dir-down .ecom-fw-hero__particle--6,
.ecom-fw-hero--dir-down .ecom-fw-hero__particle--10,
.ecom-fw-hero--dir-down .ecom-fw-hero__particle--14,
.ecom-fw-hero--dir-down .ecom-fw-hero__particle--18,
.ecom-fw-hero--dir-down .ecom-fw-hero__particle--22 { animation-name: ecomFwParticleDown; }
/* Pausar partículas fuera de vista / pestaña oculta (JS añade la clase) */
.ecom-fw-hero--particles-paused .ecom-fw-hero__particle {
  animation-play-state: paused !important;
}
@media (max-width: 640px) {
  /* En móvil: un poco menos de partículas visuales (últimas 6 más suaves) */
  .ecom-fw-hero__particle--19,
  .ecom-fw-hero__particle--20,
  .ecom-fw-hero__particle--21,
  .ecom-fw-hero__particle--22,
  .ecom-fw-hero__particle--23,
  .ecom-fw-hero__particle--24 {
    opacity: 0.35;
  }
  .ecom-preview-banner__inner {
    font-size: 0.78rem;
  }
  .ecom-preview-banner__inner span {
    flex-basis: 100%;
  }
}
.ecom-fw-hero__inner {
  position: relative;
  z-index: 2;
  padding: 3.35rem 0 3.6rem;
}
.ecom-fw-hero--lg .ecom-fw-hero__inner {
  padding: 4.4rem 0 4.6rem;
}
.ecom-fw-hero--md .ecom-fw-hero__inner {
  padding: 3rem 0 3.2rem;
}
.ecom-fw-hero__content {
  max-width: 760px;
}
.ecom-fw-hero--center .ecom-fw-hero__content {
  margin: 0 auto;
  text-align: center;
}
.ecom-fw-hero--center .ecom-fw-hero__desc {
  margin-left: auto;
  margin-right: auto;
}
.ecom-fw-hero__badge {
  background: color-mix(in srgb, var(--primary) 10%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, #e2e8f0) !important;
  /* Oscurecido un 12% respecto a --primary puro: con presets de marca claros
     (p.ej. rose #e11d48) el texto sobre el fondo casi blanco de este badge
     quedaba en 4.49:1 (bajo el 4.5 de WCAG AA); el oscurecido da margen sin
     depender de que preset este activo. */
  color: color-mix(in srgb, var(--primary) 88%, black) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--primary) 88%, black) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}
.ecom-fw-hero__title {
  margin: 0.9rem 0 0.8rem;
  font-size: clamp(2.15rem, 4.3vw, 3.4rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.ecom-fw-hero__title .text-gradient {
  -webkit-text-fill-color: #0f766e;
  background: none;
  color: #0f766e;
}
.ecom-fw-hero__desc {
  margin: 0;
  max-width: 640px;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: #475569;
}
.ecom-fw-hero__crumbs {
  margin-bottom: 1rem;
  color: #64748b;
}
.ecom-fw-hero__crumbs a {
  color: #334155;
  text-decoration: none;
}
.ecom-fw-hero__crumbs a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.ecom-fw-hero__crumbs .ecom-breadcrumbs__current {
  color: #94a3b8;
}
.ecom-fw-hero__extra {
  margin-top: 1rem;
  color: #475569;
  font-size: 0.95rem;
}
.ecom-fw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.ecom-fw-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  margin-top: 1.45rem;
}
.ecom-fw-hero__stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 5.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, #fff 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, #e2e8f0);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}
.ecom-fw-hero__stats strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}
.ecom-fw-hero__stats span {
  font-size: 0.78rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Tema oscuro del sitio → hero oscuro + texto claro (también al cambiar con el picker) */
html.ecom-theme-dark .ecom-fw-hero--auto,
html:not(.ecom-theme-light) body.ecom-theme-dark .ecom-fw-hero--auto,
body.ecom-theme-dark .ecom-fw-hero--auto,
.ecom-fw-hero--dark {
  color: #f8fafc;
  background:
    radial-gradient(1100px 460px at 10% -8%, color-mix(in srgb, var(--primary) 34%, #0b1220) 0%, transparent 58%),
    radial-gradient(900px 420px at 92% 0%, color-mix(in srgb, var(--accent, #a78bfa) 28%, #0b1220) 0%, transparent 55%),
    linear-gradient(165deg, #0b1220 0%, #111827 48%, #0f172a 100%);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__mesh,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__mesh,
.ecom-fw-hero--dark .ecom-fw-hero__mesh {
  background-image:
    linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px);
  opacity: .28;
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__bg,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__bg,
.ecom-fw-hero--dark .ecom-fw-hero__bg {
  opacity: .28;
  filter: saturate(1.05) brightness(.75);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__overlay,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__overlay,
.ecom-fw-hero--dark .ecom-fw-hero__overlay {
  background:
    linear-gradient(110deg, rgba(8,12,22,.88) 0%, rgba(8,12,22,.62) 46%, rgba(8,12,22,.35) 100%),
    linear-gradient(0deg, rgba(8,12,22,.72) 0%, transparent 52%);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__title,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__title,
.ecom-fw-hero--dark .ecom-fw-hero__title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__desc,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__desc,
.ecom-fw-hero--dark .ecom-fw-hero__desc,
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__extra,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__extra,
.ecom-fw-hero--dark .ecom-fw-hero__extra {
  color: color-mix(in srgb, #fff 82%, #cbd5e1);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__badge,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__badge,
.ecom-fw-hero--dark .ecom-fw-hero__badge {
  background: color-mix(in srgb, #fff 12%, transparent) !important;
  border-color: color-mix(in srgb, #fff 26%, transparent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs,
.ecom-fw-hero--dark .ecom-fw-hero__crumbs {
  color: color-mix(in srgb, #fff 70%, transparent);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs a,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs a,
.ecom-fw-hero--dark .ecom-fw-hero__crumbs a {
  color: color-mix(in srgb, #fff 88%, transparent);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs a:hover,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs a:hover,
.ecom-fw-hero--dark .ecom-fw-hero__crumbs a:hover {
  color: #fff;
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs .ecom-breadcrumbs__current,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__crumbs .ecom-breadcrumbs__current,
.ecom-fw-hero--dark .ecom-fw-hero__crumbs .ecom-breadcrumbs__current {
  color: color-mix(in srgb, #fff 58%, transparent);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__stats > div,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__stats > div,
.ecom-fw-hero--dark .ecom-fw-hero__stats > div {
  background: color-mix(in srgb, #0b1220 55%, transparent);
  border-color: color-mix(in srgb, #fff 14%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__stats strong,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__stats strong,
.ecom-fw-hero--dark .ecom-fw-hero__stats strong {
  color: #fff;
}
html.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__stats span,
body.ecom-theme-dark .ecom-fw-hero--auto .ecom-fw-hero__stats span,
.ecom-fw-hero--dark .ecom-fw-hero__stats span {
  color: color-mix(in srgb, #fff 70%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .ecom-fw-hero__particle { animation: none !important; }
  .navbar { transition: none; }
}
.ecom-value-props .feature-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }

/* ===== Modo claro: el lienzo DEBE ser claro (gana a --ecom-surface oscuro del servidor) ===== */
html.ecom-theme-light {
    color-scheme: light;
    --ecom-surface: #ffffff;
    --dark-950: #ffffff;
    --dark-900: #ffffff;
    --dark-800: #f1f5f9;
    --dark-700: #e2e8f0;
    --dark-600: #cbd5e1;
    --white: #ffffff;
    --ecom-heading: #0f172a;
    --ecom-body: #334155;
    --ecom-muted: #64748b;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --glass-bg: #ffffff;
    --glass-bg-light: #ffffff;
    --glass-border: rgba(15, 23, 42, 0.10);
    --glass-border-light: rgba(15, 23, 42, 0.16);

    /* Ficha de producto (views/public/product.php) declara su propio set de
       variables --text-, --card- y --border- en :root (línea ~3062), con
       "defaults for dark theme" hardcoded y sin remapear aquí: título, specs,
       precio y breadcrumbs quedaban en gris claro/casi blanco sobre fondo
       blanco. Estos nombres son exclusivos de ese bloque (ver grep), no hay
       colisión con otras páginas. */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --text-inverse: #ffffff;
    --border-color: rgba(15, 23, 42, 0.10);
    --border-light: rgba(15, 23, 42, 0.06);
    --card-bg: #ffffff;
    --card-hover-bg: #f8fafc;
    --header-bg: rgba(255, 255, 255, 0.95);
    --input-bg: #ffffff;
    --input-border: rgba(15, 23, 42, 0.12);
    --shadow-color: rgba(15, 23, 42, 0.12);
}
html.ecom-theme-light body,
html.ecom-theme-light .catalog-page,
html.ecom-theme-light .cart-page,
html.ecom-theme-light .checkout-page,
html.ecom-theme-light .product-page {
    background: #f8fafc !important;
    color: #1e293b;
}
html.ecom-theme-light .navbar,
html.ecom-theme-light .ecom-topbar {
    color: var(--ecom-heading);
}
/* f2 addendum Joan 27/08: "class navbar mas claro" — en modo claro el glass al
   28%/42% de opacidad dejaba la navbar casi transparente sobre heros/fondos
   claros, sin borde visible que la separe del contenido. Se sube la opacidad
   del fondo (a partir de --white, ya remapeado a #fff en light) y el borde a
   algo mas solido, sin tocar el modo oscuro. */
html.ecom-theme-light .navbar {
    background: color-mix(in srgb, var(--white) 88%, transparent);
    border-bottom-color: var(--glass-border-light, rgba(15, 23, 42, 0.10));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--white) 60%, transparent),
                0 8px 24px color-mix(in srgb, var(--ecom-heading) 6%, transparent);
}
html.ecom-theme-light .navbar.scrolled {
    background: color-mix(in srgb, var(--white) 96%, transparent);
    border-bottom-color: var(--glass-border-light, rgba(15, 23, 42, 0.14));
}
html.ecom-theme-light .navbar-nav a,
html.ecom-theme-light .navbar-brand,
html.ecom-theme-light .lang-btn,
html.ecom-theme-light .ecom-cart-btn,
html.ecom-theme-light .ecom-topbar-phone {
    color: #0f172a;
}
html.ecom-theme-light .lang-btn.active {
    color: #fff;
    background: var(--primary);
}
html.ecom-theme-light .product-card,
html.ecom-theme-light .feature-card,
html.ecom-theme-light .ecom-trust-item,
html.ecom-theme-light .section-header h2,
html.ecom-theme-light .catalog-head h1,
html.ecom-theme-light .cart-header h1 {
    color: #0f172a;
}
html.ecom-theme-light .section-header p,
html.ecom-theme-light .product-description,
html.ecom-theme-light .ecom-trust-item span {
    color: #475569;
}
html.ecom-theme-light footer,
html.ecom-theme-light .site-footer {
    background: var(--ecom-surface);
    color: var(--ecom-body);
    border-top: 1px solid var(--ecom-card-border);
}
html.ecom-theme-light .custom-glass-form {
    background: rgba(12, 74, 110, 0.04);
    border-color: rgba(12, 74, 110, 0.18);
}
html.ecom-theme-light .custom-glass-form h4,
html.ecom-theme-light .custom-glass-form .value,
html.ecom-theme-light .price-breakdown-row.total {
    color: #0f172a;
}

/* ============================================================
   Logo por modo + selector de idioma en la topbar (16/08)
   Al final del fichero A PROPOSITO: la cascada de este modulo
   depende del orden (14.46 s10.3), no subir este bloque.
   ============================================================ */

/* Se imprimen los dos logos y se elige por CSS, no por JS: asi no parpadea
   con el script anti-flash del tema. company_logo = tinta clara (oscuro);
   company_logo_dark = tinta oscura (claro). */
.nav-logo { height: 40px; width: auto; display: block; }
.nav-logo--light { display: none; }
html.ecom-theme-light .nav-logo--dark { display: none; }
html.ecom-theme-light .nav-logo--light { display: block; }

.footer-logo { display: inline-block; margin-bottom: 1rem; }
.footer-logo .nav-logo { height: 46px; }

/* Selector de idioma: ahora vive en la topbar. */
.ecom-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ecom-topbar .lang-switcher { display: flex; gap: .25rem; align-items: center; }
.ecom-topbar .lang-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 999px;
    color: inherit; font-size: .8rem; line-height: 1; padding: .25rem .35rem;
    cursor: pointer; opacity: .75; transition: opacity .15s, border-color .15s, background .15s;
}
.ecom-topbar .lang-btn:hover { opacity: 1; }
.ecom-topbar .lang-btn.active { opacity: 1; border-color: currentColor; }
.ecom-topbar .lang-flag { font-size: 1rem; line-height: 1; }
.ecom-topbar .lang-flag--svg { width: 1.15rem; height: .82rem; border-radius: 2px; display: block; }
/* Solo bandera en todos los anchos (Joan 22/08). */
.ecom-topbar .lang-code { display: none; }

@media (max-width: 768px) {
    .nav-logo { height: 32px; }
}

/* Visor 3D: DIV contenedor (no <canvas>) — Three appendChild del WebGL.
   Fondo fijo oscuro (no tokenizado): es la lamina de vidrio 3D, la etiqueta
   de cota (.cfg3d-dim-label) es texto blanco fijo y necesita fondo oscuro
   en los DOS modos, no el --surface que en claro se vuelve casi blanco. */
.vid3d-stage {
    position: relative;
    margin-top: 12px;
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
    background: #091A32;
}
@media (max-width: 768px) {
    .vid3d-stage { height: 280px; }
}
#vid3d-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}
#vid3d-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
#vid3d-canvas .cfg3d-dim-label {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #fff;
    font: 700 13px/1.2 system-ui, sans-serif;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
    white-space: nowrap;
    z-index: 2;
}

/* Un recuadro: fotos + 3D (galería) */
.ecom-media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--ecom-card-bg, var(--card-bg, #091A32));
    border: 1px solid var(--ecom-card-border, var(--border-color, rgba(255,255,255,.1)));
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 0;
    touch-action: pan-y;
}
.ecom-media-track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
    will-change: transform;
}
.ecom-media-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}
.ecom-media-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111827;
    display: block;
}
html.ecom-theme-light .ecom-media-slide img { background: #f1f5f9; }
.ecom-media-frame .vid3d-stage {
    margin: 0;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}
.ecom-media-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ecom-media-nav:hover { background: color-mix(in srgb, var(--primary, #1A355B) 70%, #000); }
.ecom-media-nav--prev { left: 10px; }
.ecom-media-nav--next { right: 10px; }
.ecom-media-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.ecom-media-dot {
    pointer-events: auto;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.45);
    color: transparent;
    font-size: 0;
    cursor: pointer;
}
.ecom-media-dot[aria-label="3D"] {
    width: auto;
    height: 22px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(15, 23, 42, 0.55);
}
.ecom-media-dot.is-active { background: var(--primary, #1A355B); color: var(--on-brand, #fff); }
.ecom-media-empty { width: 100%; height: 100%; background: var(--glass-bg, rgba(255,255,255,.03)); }

/* ==========================================================================
   Armonizacion de tema (2026-08-11, reescrita F1 27/08/2026)
   about/faq/testimonials/contact traen su CSS "extraido de las vistas" (mas
   arriba en este archivo) con literales de un tema claro fijo (fondo #f8fafc,
   tarjetas blancas, texto #111827/#6b7280): no reaccionan al toggle claro/
   oscuro. Estas reglas van AL FINAL DEL ARCHIVO a proposito: a igual
   especificidad (un solo selector de clase, como el original) gana la que
   viene despues en la cascada — asi no hace falta !important, que es lo que
   forzaba fondo negro fijo en tema claro y texto oscuro fijo en tema oscuro
   (ver knowledge 14.4x, causas raiz 1-2 de la auditoria Playwright 27/08).
   Todo mapeado a tokens --ecom-* para que SI seguya al modo.
   ========================================================================== */
.about-section, .values-section, .team-section, .timeline-section,
.faq-section, .testimonials-section, .contact-section {
    background: var(--ecom-surface);
}

.value-card, .timeline-content, .faq-item, .faq-category-btn,
.testimonial-card, .stats-bar, .info-card, .contact-form-wrapper, .faq-cta {
    background: var(--ecom-card-bg);
    border: 1px solid var(--ecom-card-border);
    box-shadow: none;
}

.value-card:hover, .faq-item:hover, .testimonial-card:hover, .info-card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--ecom-card-border));
}

.about-section h1, .about-section h2, .about-section h3, .about-section h4,
.values-section h2, .values-section h3, .team-section h2, .team-section h3,
.timeline-section h2, .timeline-section h3,
.faq-section h1, .faq-section h2, .faq-section h3,
.testimonials-section h1, .testimonials-section h2, .testimonials-section h3,
.contact-section h1, .contact-section h2, .contact-section h3,
.value-card h3, .faq-item h3, .info-card h3, .testimonial-info h4,
.stats-bar .stat-value, .faq-cta h2, .default-faqs h2 {
    color: var(--ecom-heading);
}

.about-section p, .values-section p, .team-section p, .timeline-section p,
.faq-section p, .testimonials-section p, .contact-section p,
.value-card p, .faq-item p, .info-card p, .timeline-content p,
.testimonial-text, .testimonial-info span, .stats-bar .stat-label,
.faq-cta p, .faq-answer p {
    color: var(--ecom-body);
}

/* Campos de formulario: legibles en los dos modos, no solo en oscuro. */
.contact-form-wrapper input, .contact-form-wrapper textarea, .contact-form-wrapper select,
.form-group input, .form-group textarea, .form-group select {
    background: var(--ecom-card-bg);
    border: 1px solid var(--ecom-card-border);
    color: var(--ecom-heading);
}
.contact-form-wrapper input::placeholder, .contact-form-wrapper textarea::placeholder,
.form-group input::placeholder, .form-group textarea::placeholder {
    color: var(--ecom-muted);
}
.contact-form-wrapper label, .form-group label { color: var(--ecom-body); }

/* Enlaces de contacto (telefono/email) sobre tarjeta: --primary es tinta de
   marca fija (pensada para fondo claro) y no se lee sobre tarjeta oscura. */
.info-content a { color: var(--ecom-heading); text-decoration: underline; text-decoration-color: var(--primary); }

/* Badge/trust-bar: en accent (pensado para fondo oscuro) sobre fondo claro
   no llega a 4.5:1; en claro se deriva de --primary (mas oscuro). */
html.ecom-theme-light .section-badge,
html.ecom-theme-light .ecom-trust-item strong,
html.ecom-theme-light .about-text h2 span {
    color: var(--primary);
}

/* CTA con degradado primary->accent: si accent es un tono claro, el extremo
   bajo texto blanco puede caer por debajo de 4.5:1. Se capa el degradado
   para que nunca llegue al accent puro y se fija ademas un background-color
   solido (el audit de contraste, y algunos navegadores viejos, no leen
   background-image) para que el texto siempre tenga un fondo solido detras. */
.cta-section {
    background-color: var(--primary);
    background-image: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, var(--accent)) 100%);
}
.cta-section .contact-item,
.cta-section .contact-item a { color: var(--on-brand); }
/* h3 no hereda de .schedule-card: la regla global "h1..h6{color:var(--ecom-heading)}"
   (elemento, especificidad menor) igual gana porque .schedule-card no selecciona
   al hijo h3 — hay que apuntar al h3 explicitamente. */
.schedule-card h3 { color: var(--on-brand); }
.product-badge { color: var(--ecom-heading); }

/* Hamburguesa movil: barras --white fijo, invisibles en claro (solo se ve
   <768px, fuera del viewport de escritorio del audit, pero rompe en movil). */
html.ecom-theme-light .mobile-menu-toggle span { background: var(--ecom-heading); }
html.ecom-theme-light .navbar-nav a:hover,
html.ecom-theme-light .lang-btn:hover { color: var(--ecom-heading); }

/* .guarantee-badge span: --success es #10b981 fijo (no tokenizado por modo).
   En oscuro se lee bien; en claro sobre fondo casi blanco cae a 2.42:1.
   Oscurecemos solo el texto (no el icono/fondo/borde, que siguen bien). */
html.ecom-theme-light .guarantee-badge span { color: color-mix(in srgb, var(--success) 55%, #000); }

/* ============================================
   f2 §F2.6 plan_aprobado: estilos inline de testimonios/FAQ/CTA de home
   extraidos a clases (antes style="" repetido por tarjeta/fila).
   ============================================ */
.ecom-testimonial-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ecom-testimonial-avatar {
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--gradient-glow);
    display: flex; align-items: center; justify-content: center;
    color: var(--on-brand); font-weight: bold; flex-shrink: 0;
}
.ecom-testimonial-name { margin: 0; }
.ecom-testimonial-company { color: var(--ecom-muted); font-size: 0.85rem; }
.ecom-testimonial-quote { font-style: italic; color: var(--ecom-body); }

.ecom-faq-list { max-width: 800px; margin: 0 auto; }
.ecom-faq-item { margin-bottom: 1rem; padding: 1.5rem; }
.ecom-faq-question { margin: 0; }
.ecom-faq-question .faq-toggle-btn {
    display: flex; align-items: center; width: 100%;
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.ecom-faq-icon { margin-right: 0.5rem; color: var(--primary); }
.ecom-faq-answer { color: var(--ecom-muted); margin: 0; padding-left: 1.5rem; }

.ecom-cta-contact-info { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin: 30px 0; }
.ecom-cta-contact-item { text-align: center; }
.ecom-cta-contact-icon { margin-bottom: 10px; }
.ecom-cta-contact-label { font-weight: 600; }
.ecom-cta-contact-value { color: inherit; }