/* --- REBRAND 2026: Google Fonts (Jost + Inter + JetBrains Mono) --- */


/* --- DESACTIVAR SCROLL SUAVE GLOBAL --- */
html {
    scroll-behavior: auto !important;
    /* clip recorta sin crear scroll context — ni rompe el momentum
       scroll de iOS (como hacía overflow-x: hidden) ni deja que el
       html scrollee horizontalmente cuando un descendiente excede
       100vw.  Es el sustituto correcto del antiguo overflow-x: hidden
       en el html.  Safari 16 o superior. */
    overflow-x: clip;
}

/* Ocultar los botones CTA en dispositivos móviles */
@media (max-width: 768px) {
	.cta-top-buttons {
        display: none;
    }
	.gb-headline-a7ca03f6 {
        margin-top: -50px; 
    }
}

/* ===================================
   CART MENU ITEM & COUNT BADGE
   ================================== */

.menu-item-cart a {
    color: #1d1d1f !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center;
    gap: 8px; /* Espacio entre texto "Carrito" y la bolita */
}

.menu-item-cart a:hover {
    color: var(--accent-deep) !important;
    text-decoration: none !important;
}

/* Estilo de la bolita */
.dai-cart-count {
    background-color: var(--accent); /* Coral */
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px; 
    height: 20px;
    border-radius: 10px; /* Redondo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    line-height: 1;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* OCULTAR SI ESTÁ VACÍO O ES 0 */
/* 1. Si el HTML está vacío (gracias a PHP) */
.dai-cart-count:empty {
    display: none !important;
}

/* 2. Si JavaScript le añade la clase hidden (doble seguridad) */
.dai-cart-count.hidden {
    display: none !important;
}

.woocommerce-Address.u-column2.col-2 {
    display: none;
}

.footer-bar-align-right .copyright-bar {
    display: none;
}

.inside-site-info.grid-container {
	min-width: 100%;
    padding: 0;
	margin: 0;
}

.nav-align-center .main-nav>ul {
    width: max-content;
}

.inside-header {
    padding: 40px 40px;
}



:root {
    /* Rebrand 2026 — Charcoal + Coral sobre Apple Gray */
    --primary: #1d1d1f;            /* Charcoal: header, footer, botones primarios, headings, texto */
    --secondary: #1d1d1f;           /* Mismo charcoal como color de interfaz dominante */
    --accent: #E65A48;              /* Coral: badges, hover, acentos */
    --accent-deep: #C94733;         /* Coral oscuro: links en cuerpo de texto */
    --brand-red: #E65A48;           /* Mantenemos compat con clases existentes (ahora coral real) */
    --bg: #F5F5F7;                  /* Apple Gray */
    --text: #1d1d1f;                /* Texto principal: charcoal */
    --text-light: #6E6E73;          /* Muted neutro Apple-style */
    --line: #D2D2D7;                /* Bordes de inputs, separadores fuertes */
    --line-soft: #E5E5EA;           /* Bordes suaves */
    --card-bg: #FFFFFF;
    --gradient: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 100%);
    /* Tipografía */
    --font-display: 'Jost', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-body);
}

body {
    background-color: var(--bg);
    color: var(--text);
    overflow-x: clip; /* clip (no hidden) para no romper momentum scroll en iOS Safari */
    font-size: 18px;
    line-height: 1.5;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Rebrand 2026: Headings, botones y nav usan Jost */
h1, h2, h3, h4, h5, h6,
.btn, button,
.nav-links,
.logo,
.entry-title,
.site-title,
.post-title,
.widget-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

:is(h1, h2, h3, h4, h5, h6) :is(span, strong, b, em, a, mark, small, u) {
    font-family: inherit;
}

/* Rebrand 2026: code/pre/kbd usan JetBrains Mono */
code, pre, kbd, samp, .mono, .code {
    font-family: var(--font-mono);
}

/* Rebrand 2026: selección y scrollbar */
::selection {
    background-color: var(--accent);
    color: var(--primary);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* --- UI COMPONENTS --- */
.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(29, 29, 31, 0.18);
}

.btn-primary:hover {
    background: #2c2c2e; /* petrol-2 */
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(29, 29, 31, 0.28);
}

.btn-accent {
    background: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(230, 90, 72, 0.25);
}

.btn-accent:hover {
    background: var(--accent-deep);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(201, 71, 51, 0.35);
}

/* Acento dorado dentro del H1 del hero */
.hero-h1-accent {
    background: -webkit-linear-gradient(45deg, var(--accent-deep), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-deep); /* fallback */
    display: inline-block;
    line-height: 1.05;
    padding-bottom: 0.08em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- HEADER --- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo {
    font-weight: 800;
    font-size: 24px;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 1;
}

/* --- SECTIONS GENERAL --- */
section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

h2 {
    font-size: 56px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

p.lead {
    font-size: 24px;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto 40px;
}

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

/* --- ANIMATION UTILS --- */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Variantes de animación agresivas */
.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.active { opacity: 1; transform: scale(1); }

.reveal-rotate {
    opacity: 0;
    transform: perspective(1000px) rotateX(45deg) translateY(100px);
    transition: all 1.2s ease;
}
.reveal-rotate.active { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); }

.reveal-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease;
}
.reveal-left.active { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease;
}
.reveal-right.active { opacity: 1; transform: translateX(0); }

/* --- HERO --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at center, #FFFFFF 0%, var(--bg) 100%);
}

.hero h1 {
    font-size: 80px;
    letter-spacing: -0.03em;
    background: -webkit-linear-gradient(45deg, var(--primary), var(--ink-2, #2c2c2e));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.hero-badge {
    background: rgba(230, 90, 72, 0.14);
    color: var(--accent-deep);
    border: 1px solid rgba(230, 90, 72, 0.35);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-block;
}

/* --- UI MOCKUP --- */
.app-interface {
    background: white;
    border-radius: 20px;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.15);
    max-width: 900px;
    margin: 60px auto 0;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
}

.app-header {
    background: #f3f3f3;
    padding: 15px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.app-body {
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    min-height: 400px;
}

.sidebar-mock { background: #f9f9f9; border-radius: 10px; height: 100%; }
.content-mock { 
    background: #fff; 
    border: 2px dashed #ddd; 
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-weight: bold;
}

/* --- FEATURES GRID --- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.feature-card {
    background: white;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: var(--bg);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--secondary);
    margin-bottom: 20px;
}

/* --- TECH STACK MARQUEE --- */
.tech-stack {
    padding: 60px 0;
    background: white;
    white-space: nowrap;
    overflow: hidden;
}

.tech-track {
    display: inline-block;
    animation: scroll 20s linear infinite;
}

.tech-logo {
    display: inline-block;
    font-size: 30px;
    margin: 0 40px;
    color: #ccc;
    font-weight: bold;
}

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

/* --- DUAL SECTION --- */
.dual-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.dual-img {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.code-block {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 20px;
    border-radius: 15px;
    font-family: var(--font-mono);
    font-size: 14px;
    position: relative;
}

/* --- PRICING --- */
.pricing-card {
    background: white;
    padding: 50px;
    border-radius: 30px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.pricing-card.featured {
    border: 2px solid var(--secondary);
    transform: scale(1.05);
    z-index: 2;
}

.price {
    font-size: 60px;
    font-weight: 800;
    margin: 20px 0;
}

.price span { font-size: 20px; font-weight: 400; color: var(--text-light); }

.feature-list {
    list-style: none;
    margin: 30px 0;
    text-align: left;
}

.feature-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* --- FOOTER --- */
footer {
    background: white;
    padding: 80px 0 40px;
    border-top: 1px solid #eee;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    h1 { font-size: 48px !important; }
    h2 { font-size: 36px; }
    .dual-section { grid-template-columns: 1fr; }
    .hero { height: auto; padding: 150px 0 80px; }
    .pricing-card.featured { transform: scale(1); }
}



/* --- HEADER STYLES --- */

/* 1. Contenedor principal del Header */
.site-header {
    background-color: rgba(255, 255, 255, 0.8) !important; /* Fondo blanco semitransparente */
    backdrop-filter: blur(20px); /* Efecto cristal de Apple */
    -webkit-backdrop-filter: blur(20px);
    position: fixed !important;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: none !important; /* Quitamos sombras duras del tema */
}

/* 2. Alineación del contenido (Logo - Menú - Iconos) */
.site-header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: 70px; /* Altura fija para consistencia */
}

/* 3. Logo */
.site-logo img {
    height: 35px !important; /* Reducimos tamaño para elegancia */
    width: auto !important;
    display: block;
}

/* 4. Menú de Navegación */
.header-menu {
    display: flex;
    gap: 25px;
    margin: 0 !important;
}

.header-menu li {
    list-style: none;
}

.header-menu li a {
    color: #1d1d1f !important; /* Color texto oscuro */
    font-family: var(--font-body);
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    opacity: 0.8;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.header-menu li a:hover {
    opacity: 1;
    color: var(--accent-deep) !important; /* Oro oscuro al hover */
}

/* Quitar fondos o bordes extraños del tema en el menú activo */
.header-menu li.current-menu-item a {
    color: #1d1d1f !important;
}

/* 5. Iconos de WooCommerce (Carrito y Cuenta) */
.site-header-wc a {
    color: #1d1d1f !important;
    display: inline-block;
    margin-left: 15px;
}

.site-header-wc svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* La bolita del contador del carrito */
.cart-contents .count-number {
    background-color: #1d1d1f !important; /* Verde */
    color: white !important;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 5px;
    position: relative;
    top: -10px;
    left: -5px;
}

/* 6. Menú Hamburguesa (Móvil) - Asegurar que se vea en fondo blanco */
.nav-icon .line {
    background-color: #1d1d1f !important; /* Líneas negras, no blancas */
}

/* --- Variables Globales (Rebrand 2026) --- */
:root {
    --primary: #1d1d1f;
    --secondary: #1d1d1f;
    --accent: #E65A48;
    --accent-deep: #C94733;
    --brand-red: #E65A48;
    --bg: #F5F5F7;
    --text: #1d1d1f;
    --text-light: #6E6E73;
    --line: #D2D2D7;
    --line-soft: #E5E5EA;
    --card-bg: #FFFFFF;
    --gradient: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 100%);
    /* Variables Tech */
    --tech-bg: #1d1d1f;
    --tech-glow: 0 0 20px rgba(230, 90, 72, 0.45);
}

/* Nota: Eliminamos los estilos directos a 'body' para no romper tu tema WP */

/* --- CLASE PARA PLACEHOLDERS DE IMÁGENES (HORMIGA) --- */
.ant-placeholder {
    background-color: rgba(29, 29, 31, 0.1);
    border: 2px dashed var(--secondary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--secondary);
    font-weight: bold;
    font-size: 0.9rem;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.ant-placeholder:hover {
    background-color: rgba(29, 29, 31, 0.2);
    transform: scale(1.02);
}
.ant-placeholder::before {
    content: '🐜';
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(29, 29, 31, 0.18);
}
.btn-primary:hover {
    background: #2c2c2e; /* petrol-2: ligeramente más oscuro/claro, siempre petrol */
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(29, 29, 31, 0.28);
    text-decoration: none;
}
.btn-accent {
    background: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(230, 90, 72, 0.25);
}
.btn-accent:hover {
    background: var(--accent-deep);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(201, 71, 51, 0.35);
    text-decoration: none;
}

/* Botón secundario "outlined" — versión ghost del accent.
   Usado como secondary CTA junto a un primary sólido para
   mantener jerarquía visual clara. */
.btn-accent-outline {
    background: #FFFFFF;
    color: var(--accent-deep); /* #C94733 — contraste 4.6:1 sobre blanco, WCAG AA */
    border: 2px solid var(--accent);
    box-shadow: 0 2px 6px rgba(230, 90, 72, 0.06);
}

.btn-accent-outline:hover {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(230, 90, 72, 0.28);
    text-decoration: none;
}

.btn-accent-outline:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(230, 90, 72, 0.12);
    background: var(--accent-deep);
    color: #FFFFFF;
    border-color: var(--accent-deep);
}

.btn-accent-outline:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Asegurar que ningún botón se subraye al hover */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
a.btn:hover,
a.btn:focus {
    text-decoration: none !important;
}

.container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-custom {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

h2.custom-h2 { font-size: 56px; line-height: 1.1; margin-bottom: 20px; font-weight: 700;}

p.lead { font-size: 24px; color: var(--text-light); max-width: 700px; margin: 0 auto 40px; }
.text-center { text-align: center; }

/* Animaciones base */
.reveal { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.8); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale.active { opacity: 1; transform: scale(1); }
.reveal-rotate { opacity: 0; transform: perspective(1000px) rotateX(45deg) translateY(100px); transition: all 1.2s ease; }
.reveal-rotate.active { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); }

.anim-zoom { transform: scale(0.5); transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.reveal.anim-zoom.active { transform: scale(1); opacity: 1; }

/* --- HERO MEJORADO UX --- */
.hero {
    height: auto; 
    min-height: 100vh; 
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: flex-start; 
    text-align: center;
    background: radial-gradient(circle at center, #FFFFFF 0%, var(--bg) 100%);
    padding-top: 250px;
    padding-bottom: 10px; 
    overflow: hidden; 
}

/* LOGO EN HERO */
.hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 60px; 
    opacity: 0; 
    transform: translateY(-20px);
    animation: fadeInDown 1s ease forwards 0.2s;
}

.hero-logo i {
    font-size: 2rem;
    color: var(--brand-red);
}

.hero-logo span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--brand-red);
    letter-spacing: -0.02em;
}

@keyframes fadeInDown {
    to { opacity: 1; transform: translateY(0); }
}

.hero h1 {
    font-size: 90px;
    letter-spacing: -0.04em;
    background: -webkit-linear-gradient(45deg, var(--primary), #2c2c2e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0; 
    line-height: 1; 
    text-align: center; 
    font-weight: 800; 
    position: relative;
    z-index: 10;
}

.hero-subtitle-container {
    margin-top: 60px; 
    margin-bottom: 80px;
    position: relative;
    z-index: 10;
}

/* INTERFAZ REALISTA */
.app-interface {
    background: white;
    border-radius: 20px;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.2); 
    max-width: 1100px; 
    width: 95%;
    margin: 40px auto 0; 
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    position: relative;
    transform-origin: top center;
}
.app-header { background: #f3f3f3; padding: 15px; display: flex; gap: 8px; border-bottom: 1px solid #e0e0e0; align-items: center; }
.app-title-bar { margin-left: 15px; font-size: 0.9rem; color: #666; font-weight: 600; display: flex; align-items: center; gap: 10px;}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.app-body { 
    padding: 0; 
    display: grid; 
    grid-template-columns: 200px 1fr 320px; 
    gap: 0; 
    min-height: 600px;
    background: #fff;
    text-align: left; 
}

.app-sidebar { background: #f8f9fa; padding: 25px 15px; border-right: 1px solid #e5e7eb; font-size: 0.9rem; color: #666; }
.sidebar-item { padding: 12px 15px; margin-bottom: 8px; border-radius: 8px; cursor: default; display: flex; align-items: center; gap: 12px; transition: 0.2s;}
.sidebar-item:hover { background: #e9ecef; }
.sidebar-item i { width: 20px; text-align: center; }
.sidebar-item.active { background: #e5e7eb; color: #000; font-weight: 600; }

.app-main { padding: 40px; overflow-y: auto; }
.fake-input-group { margin-bottom: 25px; }
.fake-label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 8px; font-weight: 600;}
.fake-input { height: 45px; background: #ffff; border-radius: 8px; border: 1px solid #d1d5db; width: 100%; padding: 0 15px; display: flex; align-items: center; color: #333; font-size: 0.95rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05);}
.fake-input.select { background: #f9fafb; justify-content: space-between; color: #555;}
.fake-input.select::after { content: '▼'; font-size: 0.7rem; color: #999; }

.app-console { background: #1e1e1e; color: #e0e0e0; padding: 20px; display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 0.85rem; position: relative; }
.console-header { font-weight: bold; margin-bottom: 15px; color: #fff; font-family: var(--font-body); border-bottom: 1px solid #333; padding-bottom: 10px;}
#console-output { 
    flex-grow: 1;
    overflow-y: auto;
    color: #4ade80;
    white-space: pre-wrap;
    line-height: 1.6;
    scrollbar-width: thin;
}

.progress-container { height: 6px; background: #333; border-radius: 3px; overflow: hidden; margin-top: 20px; flex-shrink: 0;}
#progress-bar { height: 100%; width: 0%; background: #4ade80; transition: width 0.3s ease; border-radius: 3px;}

.tech-stack { padding: 60px 0; background: white; white-space: nowrap; overflow: hidden; margin-bottom: 0; }
.tech-track { display: inline-block; animation: scroll 20s linear infinite; }
.tech-logo { display: inline-block; font-size: 30px; margin: 0 40px; color: #ccc; font-weight: bold; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.dual-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.code-block { background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 15px; font-family: var(--font-mono); font-size: 14px; position: relative; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
.feature-grid.grid-5 { grid-template-columns: repeat(5, 1fr); }
.feature-grid.grid-5 .card-simple { padding: 32px 24px; }

.card-simple { background: white; padding: 40px; border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); transition: transform 0.3s ease; height: 100%; display: flex; flex-direction: column; justify-content: flex-start;}

/* Tags de tipo de IA (Nube / Local) — alineados al fondo de cada tarjeta */
.feature-grid { align-items: stretch; }
.feature-grid .feature-card { display: flex; flex-direction: column; height: 100%; }
.feature-grid .card-simple p { margin-bottom: 0; }
.ai-tag {
    display: inline-block;
    margin-top: auto;
    padding-top: 18px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ai-tag-cloud { color: var(--primary); }
.ai-tag-local { color: var(--accent-deep); }
.card-simple:hover { transform: translateY(-10px); }
.icon-box { width: 60px; height: 60px; background: var(--bg); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--secondary); margin-bottom: 20px; }

.font-grotesk { font-family: var(--font-display); }

/* --- MAPA --- */
#d3-map-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: radial-gradient(ellipse at center, #1d1d1f 0%, #0a0a0c 100%);
}
.land-path { fill: rgba(255, 255, 255, 0.08); stroke: none; }
.d3-data-point { fill: #E65A48; filter: drop-shadow(0 0 6px rgba(230, 90, 72, 0.9)); opacity: 0; }

/* --- SCROLL HORIZONTAL --- */
.section-screen {
    height: 100vh;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 0;
}

.horizontal-scroll-container {
    display: flex;
    height: 100%;
    width: 300%; 
    will-change: transform;
}

.scroll-panel {
    width: 33.3333%; 
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.blog-slide-content {
    height: 100%;
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
}

.sticky-text {
    width: 45%;
    padding-right: 40px;
}

.sticky-visual {
    width: 50%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.feature-card-sticky {
    position: absolute;
    width: 100%;
    max-width: 450px;
    height: 500px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 30px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    transform: translateY(100px);
    opacity: 0;
    visibility: hidden; 
}

#card-1 {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.feature-icon-sticky {
    font-size: 3.5rem;
    color: var(--secondary);
    margin-bottom: 20px;
}

.feature-title-sticky {
    font-size: 2.2rem;
    margin-bottom: 15px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--primary);
}

.feature-desc-sticky {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* --- "CÓMO FUNCIONA" --- */
.how-sticky-section {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: auto; 
    min-height: 100vh;
}

.how-sticky-content {
    width: 45%;
    height: 80vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.how-steps-container {
    width: 45%;
    padding-top: 20vh; 
    padding-bottom: 20vh;
}

.step-block {
    height: 80vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.3;
    transition: 0.5s;
    border-left: 2px solid #ddd;
    padding-left: 30px;
}

.step-block.active {
    opacity: 1;
    border-left-color: var(--secondary);
}

.step-block h3 { font-size: 2rem; margin-bottom: 15px; font-weight: 700; }
.step-block p { font-size: 1.2rem; color: var(--text-light); }

/* Sección Escala sin Límites */
.scale-section {
    height: 400px; 
    background-attachment: fixed; 
    background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=1740&q=80'); 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
}

/* =========================================
   PANELS: MODO CIUDAD / MODO PAÍS / MÁQUINA DE BLOGGING
   Misma arquitectura visual; cada panel se diferencia
   por la mezcla de petrol y oro.
   ========================================= */

.mode-panel {
    position: relative;
    overflow: hidden;
}

.mode-panel .mode-eyebrow {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
}

.mode-panel .mode-title {
    color: var(--primary);
    line-height: 1.05;
    font-weight: 800;
}

.mode-panel .mode-desc {
    color: var(--text-light);
}

.mode-panel .mode-code-card {
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(29, 29, 31, 0.08);
    border: 1px solid var(--line-soft);
    border-left-width: 4px;
}

.mode-panel .mode-code-card code {
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.mode-panel .mode-bg-icon {
    position: absolute;
    right: -3rem;
    bottom: -2rem;
    font-size: 22rem;
    opacity: 0.08;
    pointer-events: none;
    line-height: 1;
}

@media (min-width: 768px) {
    .mode-panel .mode-bg-icon { font-size: 32rem; }
}

/* --- 1. Modo Ciudad: PETROL puro sobre Apple Gray --- */
.mode-panel.mode-city { background: var(--bg); }
.mode-panel.mode-city .mode-eyebrow {
    color: var(--primary);
    background: rgba(29, 29, 31, 0.08);
}
.mode-panel.mode-city .mode-code-card { border-left-color: var(--primary); }
.mode-panel.mode-city .mode-bg-icon { color: var(--primary); }

/* --- 2. Modo País: ORO sobre crema --- */
.mode-panel.mode-country {
    background: linear-gradient(180deg, #FFF0EE 0%, #FFFFFF 100%);
}
.mode-panel.mode-country .mode-eyebrow {
    color: var(--accent-deep);
    background: rgba(230, 90, 72, 0.18);
}
.mode-panel.mode-country .mode-code-card { border-left-color: var(--accent); }
.mode-panel.mode-country .mode-bg-icon { color: var(--accent); }

/* --- 3. Máquina de Blogging: PETROL + ORO mezclados --- */
.mode-panel.mode-blog {
    background:
        radial-gradient(circle at 20% 80%, rgba(230, 90, 72, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(29, 29, 31, 0.06) 0%, transparent 45%),
        #FFFFFF;
}
.mode-panel.mode-blog .mode-blog-iconbox {
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(29, 29, 31, 0.10) 0%, rgba(230, 90, 72, 0.18) 100%);
    color: var(--accent-deep);
}

/* --- ESTILOS TECH / NEON (SECCION ALGORITMO) --- */
.section-tech-glow {
    background-color: var(--tech-bg);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.section-tech-glow .scroll-panel {
     background: transparent !important; 
}

.section-tech-glow h2, .section-tech-glow h3, .section-tech-glow .custom-h2, .section-tech-glow .feature-title-sticky {
    color: #fff !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
}

.section-tech-glow p, .section-tech-glow .feature-desc-sticky, .section-tech-glow code {
     color: #cbd5e1 !important;
}

.section-tech-glow .bg-white {
     background: rgba(255, 255, 255, 0.05) !important;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255,255,255,0.1) !important;
     color: #fff !important;
}

.section-tech-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 25% 35%, rgba(230, 90, 72, 0.22) 0%, rgba(0,0,0,0) 35%),
        radial-gradient(circle at 75% 65%, rgba(230, 90, 72, 0.14) 0%, rgba(0,0,0,0) 40%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%);
    animation: rotateBg 30s linear infinite;
    z-index: 0;
    pointer-events: none;
    filter: blur(20px);
}

.section-tech-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(230, 90, 72, 0.18) 1px, transparent 1px),
        radial-gradient(rgba(230, 90, 72, 0.10) 1px, transparent 1px);
    background-size: 60px 60px, 90px 90px;
    background-position: 0 0, 30px 30px;
    animation: techDrift 40s linear infinite;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}

@keyframes rotateBg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes techDrift {
    from { background-position: 0 0, 30px 30px; }
    to { background-position: 60px 60px, 120px 120px; }
}

/* Garantizar que el contenido quede por encima de las capas decorativas */
.section-tech-glow > * { position: relative; z-index: 1; }

/* Media Queries */
@media (max-width: 768px) {
    .hero { padding-top: 100px; min-height: auto; padding-bottom: 40px; }
    .hero h1 { font-size: 48px !important; }
    
    .hero-logo { display: none; }
    
    .hero-header-container { 
        flex-direction: column; 
        text-align: center; 
    }
    
    .hero-title-wrapper { order: 1; width: 100%; text-align: center; margin-bottom: 20px; }
    .hero-subtitle-container { order: 2; margin-top: 0; margin-bottom: 40px; }
    .hero-image-wrapper { order: 3; width: 100%; justify-content: center; margin-bottom: 40px; }
    .app-interface { order: 4; }
    
    h2.custom-h2 { font-size: 36px; }
    .dual-section { grid-template-columns: 1fr; }

    .section-screen {
        width: 100%;
        height: auto;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .horizontal-scroll-container {
        width: 100%;
        flex-direction: column;
        height: auto;
        transform: none !important;
    }
    .scroll-panel {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 60px 20px;
    }
    .blog-slide-content { flex-direction: column; }
    .sticky-text { width: 100%; text-align: center; margin-bottom: 40px; padding-right: 0; }
    
    .sticky-visual { 
        width: 100%; 
        height: auto; 
        display: block; 
    }
    
    .feature-card-sticky {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 30px; 
        width: 100%;
        height: auto;
        min-height: auto;
    }

    .how-sticky-section { flex-direction: column; height: auto; display: block; }
    .how-sticky-content { width: 100%; height: auto; margin-bottom: 40px; }
    .how-steps-container { width: 100%; padding-top: 0; }
    .step-block { height: auto; padding: 40px 0 40px 20px; opacity: 1; margin-bottom: 30px; }

    .app-body { grid-template-columns: 1fr; min-height: auto; }
    .app-sidebar, .app-main { display: none; }
    .app-console { border-left: none; height: 400px; }
    
    .feature-grid, .feature-grid.grid-5 { grid-template-columns: 1fr; }
    
    #globalMap { height: auto !important; padding: 60px 0 !important; }
    
    .scale-section { display: none; }
    
    #imagenes { padding-top: 40px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .app-body { grid-template-columns: 60px 1fr 250px; }
    .sidebar-item span { display: none; }
    .sidebar-item i { width: 100%; font-size: 1.2rem;}
    .sidebar-item { justify-content: center; padding: 15px 5px;}
    .feature-grid, .feature-grid.grid-5 { grid-template-columns: repeat(2, 1fr); }
}

/* --- ESTILOS PARA LAS IMÁGENES DE LAS HORMIGAS --- */

/* Contenedor */
.ant-img-wrapper {
    position: relative;
    overflow: hidden;
    background-color: rgba(29, 29, 31, 0.05); 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* La imagen en sí */
.ant-real-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Ajustes específicos para la Hormiga Artista (MUCHO MÁS GRANDE) */
.artist-ant-wrapper {
    position: absolute;
    bottom: -40px; 
    right: -75px;
    width: 330px;
    height: auto;
    z-index: 10;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); 
}

/* Ajuste específico para el logo del header */
.hero-logo img {
    height: 50px;
    width: auto;
}

/* --- ESTILOS SECCIÓN PRODUCTOS --- */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
    align-items: center; /* Alinea verticalmente si tienen alturas distintas */
}

.pricing-card {
    background: white;
    border-radius: 30px;
    padding: 0;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.15);
    border-color: rgba(29, 29, 31, 0.3);
}

/* Tarjeta destacada (central) */
.pricing-card.featured {
    border: 2px solid var(--secondary);
    transform: scale(1.05);
    box-shadow: 0 20px 50px -10px rgba(29, 29, 31, 0.15);
    z-index: 2;
}

.pricing-card.featured:hover {
    transform: translateY(-15px) scale(1.08);
}

.popular-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
    color: white;
    padding: 5px 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 10;
    letter-spacing: 1px;
}

.card-header {
    background: #f8f9fa;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    border-bottom: 1px dashed #e0e0e0;
}

.product-img {
    width: 120px;
    height: auto;
    margin: 0 auto;
    display: block;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

.pricing-card:hover .product-img {
    transform: scale(1.15) rotate(5deg);
}

.product-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #e0e0e0;
    color: #666;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 10px;
    text-transform: uppercase;
}

.card-body {
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-body h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary);
}

.price-tag {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.savings-text {
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.feature-list-check {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
    color: var(--text-light);
    font-size: 0.95rem;
}

.feature-list-check li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-list-check i {
    color: var(--secondary);
}

/* Botones de producto */
.btn-product {
    width: 100%;
    margin-top: auto;
    background: #fff;
    color: var(--text);
    border: 2px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-product:hover {
    background: var(--text);
    color: white;
    border-color: var(--text);
    transform: none !important; /* Anula el transform general de .btn:hover */
}

.btn-featured {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
    box-shadow: 0 10px 20px rgba(29, 29, 31, 0.3);
}

.btn-featured:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
}

/* Notificación flotante de carrito */
.cart-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Oculto abajo */
    background: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border: 1px solid var(--secondary);
}

.cart-notification.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .pricing-card.featured { transform: scale(1); }
    .pricing-card:hover { transform: translateY(-5px); }
}

/* --- ESTILOS DESPLEGABLE MÁS INFO --- */
.more-info-container {
    width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

.more-info-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.3s ease;
    user-select: none;
}

.more-info-trigger:hover {
    color: var(--secondary);
}

.arrow-icon {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

/* Clase para rotar la flecha cuando está abierto */
.more-info-trigger.open .arrow-icon {
    transform: rotate(180deg);
    color: var(--secondary);
}

.more-info-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    text-align: center;
}

.more-info-content p {
    font-size: 0.85rem;
    color: #666;
    margin: 10px 0 0 0;
    line-height: 1.4;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* --- MEJORA IMÁGENES SECCIÓN "CÓMO FUNCIONA" --- */

/* 1. El contenedor tipo tarjeta premium */
#como-funciona .how-it-works-image-box {
    width: 100%;
    height: 450px; /* Un poco más alto para que respire */
    border-radius: 40px; /* Bordes más redondeados, estilo Apple */
    background: #ffffff; /* Fondo blanco limpio */
    /* Sombra suave pero definida, similar a las pricing cards */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.02);
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease;
    border: 1px solid rgba(255,255,255,0.5); /* Borde sutil para definición */
}

/* Efecto sutil al pasar el ratón por la caja */
#como-funciona .how-it-works-image-box:hover {
    box-shadow: 0 35px 60px -15px rgba(29, 29, 31, 0.15), 0 0 0 1px rgba(29, 29, 31, 0.05);
    transform: translateY(-5px);
}

/* 2. La imagen de la hormiga dentro */
#como-funciona .how-it-works-image-box img {
    /* Sombra arrojada a la propia ilustración para que "flote" */
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1));
    /* Reducimos ligeramente la escala para dar "aire" dentro de la caja */
    transform: scale(0.85);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote suave */
}

/* Efecto en la imagen al pasar el ratón */
#como-funciona .how-it-works-image-box:hover img {
    transform: scale(0.9) rotate(2deg); /* Se agranda un poco y rota sutilmente */
    filter: drop-shadow(0 20px 30px rgba(29, 29, 31, 0.2));
}

/* 3. Fondo ambiental (Glow) detrás de la tarjeta */
/* Aseguramos que el contenedor padre tenga posición relativa */
.how-sticky-content {
    position: relative;
    z-index: 1;
}

/* Creamos un pseudo-elemento para el brillo de fondo */
.how-sticky-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; /* Alineado a la izquierda, detrás de la imagen */
    transform: translateY(-50%);
    width: 60%; /* Ocupa el área de la imagen */
    height: 80%;
    /* Degradado radial suave con tu color corporativo */
    background: radial-gradient(ellipse at center, rgba(29, 29, 31, 0.15) 0%, rgba(255,255,255,0) 70%);
    z-index: -1; /* Detrás del contenido */
    pointer-events: none;
    opacity: 0.8;
    filter: blur(40px); /* Difuminado fuerte para que sea sutil */
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    #como-funciona .how-it-works-image-box {
        height: 350px; /* Un poco más bajo en móvil */
        border-radius: 30px;
    }
    /* Ajustar el brillo de fondo en móvil para que quede centrado */
    .how-sticky-content::before {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }
}

/* Etiqueta específica para Plan Agency (Color Coral) */
.popular-tag.agency-tag {
    background-color: #E65A48 !important;
}

/* Estilo para el separador "Desbloquea de por vida" */
.lifetime-unlock-label {
    background: linear-gradient(90deg, rgba(230, 90, 72, 0.16) 0%, rgba(230, 90, 72, 0.04) 100%);
    color: var(--accent-deep);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 15px 0 10px 0;
    display: inline-block;
    width: 100%;
    text-align: left;
    border-left: 3px solid var(--accent);
    letter-spacing: 0.5px;
}

.lifetime-unlock-label i {
    color: var(--accent-deep);
    margin-right: 4px;
}

/* Ajustes listas */
.feature-list-check {
    margin-bottom: 0 !important; /* Quitamos margen inferior para controlar mejor el espaciado */
}

/* Características comunes: un poco más suaves */
.common-features li {
    color: #666;
    font-size: 0.9rem;
}

/* Características exclusivas: Texto normal */
.exclusive-features li {
    color: var(--text);
    font-weight: 400; /* Cambiado a 400 (normal) */
    border-bottom: 1px solid rgba(0,0,0,0.03);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

/* Forzar que cualquier negrita (strong) dentro de esta lista se vea normal */
.exclusive-features li strong {
    font-weight: 400;
}

.exclusive-features li:last-child {
    border-bottom: none;
}

/* Iconos de características exclusivas */
.exclusive-features i {
    color: var(--secondary);
    width: 20px; /* Ancho fijo para alinear texto */
    text-align: center;
}

/* --- ESTILOS TOOLTIPS DE INFORMACIÓN --- */

.tooltip-item {
    position: relative;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* LA "i" PERSONALIZADA (CSS PURO) */
.custom-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #cbd5e1; /* Borde gris suave */
    color: #cbd5e1; /* Letra gris suave */
    font-size: 10px !important;
    font-family: 'Times New Roman', serif; /* Serif para la "i" clásica */
    font-weight: bold;
    font-style: italic;
    cursor: help;
    margin-left: 5px;
    transition: all 0.3s ease;
    background: transparent;
    line-height: 1;
}

.custom-info-icon:hover, 
.custom-info-icon.active-tooltip {
    border-color: var(--secondary);
    color: var(--secondary);
    background: rgba(29, 29, 31, 0.1);
}

/* El cuadro de texto del Tooltip */
.info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%; /* Un poco más arriba */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #333;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: sans-serif; /* Fuente normal para el texto */
    font-style: normal;
    font-size: 0.8rem; 
    font-weight: 400;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: center;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Triangulito */
.info-icon::before {
    content: '';
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 6px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1000;
}

/* Mostrar Tooltip */
.info-icon:hover::after,
.info-icon:hover::before,
.info-icon.active-tooltip::after,
.info-icon.active-tooltip::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Ajuste móvil */
@media (max-width: 480px) {
    .info-icon::after {
        max-width: 180px;
        left: auto;
        right: -10px;
        transform: translateX(0) translateY(10px);
    }
    
    .info-icon::before {
        left: auto;
        right: 2px;
        transform: translateX(0) translateY(10px);
    }
    
    .info-icon.active-tooltip::after,
    .info-icon.active-tooltip::before {
        transform: translateX(0) translateY(-5px);
    }
}

/* --- 1. ELIMINAR ICONOS WOOCOMMERCE --- */
.site-header-wc {
    display: none !important;
}

/* --- 2. AUMENTAR ALTURA DEL MENÚ --- */
/* Cambiamos la altura de 70px a 100px (puedes ajustar este número) */
.site-header-content {
    height: 100px !important; 
}

/* Ajustamos el padding del header si es necesario para que respire mejor */
.site-header {
    height: auto !important; 
}

/* --- 3. ANIMACIÓN DE SUBRAYADO VERDE --- */
.header-menu li a {
    position: relative; /* Necesario para posicionar la línea */
    padding-bottom: 5px; /* Espacio entre el texto y la línea */
    text-decoration: none !important; /* Quitamos subrayados por defecto */
}

/* Creamos la línea (inicialmente invisible/sin ancho) */
.header-menu li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px; /* Grosor de la línea */
    display: block;
    margin-top: 5px;
    right: 0;
    background: var(--secondary); /* Tu verde corporativo (#1d1d1f) */
    transition: width 0.3s ease; /* La magia de la animación */
    -webkit-transition: width 0.3s ease;
    bottom: 0;
    left: 0; 
}

/* Al pasar el ratón, la línea crece al 100% */
.header-menu li a:hover::after {
    width: 100%;
    left: 0;
    background: var(--secondary);
}

/* Opcional: Mantener la línea fija si es la página actual */
.header-menu li.current-menu-item a::after {
    width: 100%;
}

/* Asegurar que el color del texto también cambie a verde (opcional, ya lo tenías) */
.header-menu li a:hover {
    color: var(--secondary) !important;
}


/* --- 1. AJUSTE VERTICAL (PEGAR AL HEADER) --- */
/* Reducimos de 170px a 135px. 
   Esto es: 100px (Header) + 32px (Admin Bar) + 3px (Respiro) */
.woocommerce-account .content-page {
    padding-top: 135px !important; 
    min-height: 80vh;
    background-color: #f8f9fa;
}

/* Aseguramos la posición del header con la barra de admin */
body.admin-bar .site-header {
    top: 32px !important;
}

/* --- 2. BREADCRUMBS (MIGAS DE PAN) --- */
.woocommerce-account .breadcrumb-trail {
    max-width: 1400px;
    margin: 0 auto 15px auto; /* Un poco de margen abajo antes del título */
    padding: 0 20px;
    text-align: left;
    position: relative;
    z-index: 10;
    font-size: 0.9rem;
    color: #666;
}

/* --- 3. CONTENEDOR PRINCIPAL --- */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: nowrap;
    gap: 60px; /* Espacio generoso entre menú y contenido */
    max-width: 1400px; /* Ancho amplio para llevar el menú a la izquierda */
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start;
}

/* --- 4. TÍTULO H1 (My account) --- */
.woocommerce-account h1 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px; /* Reducido un poco para juntar más */
    color: var(--text, #1d1d1f);
    width: 100%;
}

/* --- 5. MENÚ IZQUIERDA --- */
.woocommerce-MyAccount-navigation {
    flex: 0 0 260px;
    width: 260px;
    /* Mantenemos el empuje hacia abajo para alinearlo visualmente con el contenido */
    margin-top: 80px; 
    margin-bottom: 30px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 8px;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 15px 20px;
    background: white;
    border-radius: 10px;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border: 1px solid transparent;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: #1d1d1f;
    color: white;
    box-shadow: 0 5px 15px rgba(29, 29, 31, 0.3);
    transform: translateY(-2px);
}

/* --- 6. CONTENIDO DERECHA --- */
.woocommerce-MyAccount-content {
    flex: 1; 
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
    min-width: 0;
    margin-top: 0;
}

/* --- 7. CAJA DE LICENCIA Y EJECUCIONES (MEJORADA) --- */
.license-box-wrapper {
    background: #f0fdf4;
    padding: 30px;
    border-radius: 16px;
    border: 1px dashed #1d1d1f;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(29, 29, 31, 0.05);
}

.license-grid {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
}

.license-item {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.license-divider {
    width: 1px;
    height: 60px;
    background-color: rgba(29, 29, 31, 0.2);
    display: block;
}

.license-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: #1d1d1f; /* Tu verde secundario */
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Estilo del Código */
.license-display {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    background: white;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid rgba(29, 29, 31, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.license-display:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #1d1d1f;
}

/* Estilo del Contador de Ejecuciones */
.executions-display {
    font-family: var(--font-display);
    font-size: 2.2rem; /* Número grande */
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1;
}

/* --- ESTILOS EXTRA PARA EL 0 (RECARGA) --- */

/* Cuando es un enlace (saldo 0) */
.recharge-link {
    text-decoration: none;
    color: #E65A48; /* Color coral/rojo para llamar la atención (o usa tu var --secondary) */
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    transition: transform 0.2s ease;
}

.recharge-link:hover {
    transform: scale(1.05);
    color: #c0392b;
}

/* El texto pequeñito de "Recargar" */
.recharge-badge {
    font-size: 0.8rem;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 5px;
    background: rgba(230, 90, 72, 0.1); /* Fondo rojizo suave */
    color: #E65A48;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.recharge-link:hover .recharge-badge {
    background: #E65A48;
    color: white;
}

/* Ajuste del color del número cuando NO es 0 (para mantener tu verde) */
.executions-display:not(.is-zero) {
    color: #1d1d1f;
}

/* Ajuste Móvil */
@media (max-width: 600px) {
    .license-grid {
        flex-direction: column;
        gap: 30px;
    }
    .license-divider {
        width: 100%;
        height: 1px;
    }
    .license-box-wrapper {
        padding: 20px;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .woocommerce-account .content-page {
        padding-top: 120px !important; /* Ajuste móvil */
    }

    .woocommerce-account .woocommerce {
        flex-direction: column;
        gap: 30px;
        max-width: 100%;
    }
    
    .woocommerce-MyAccount-navigation {
        width: 100%;
        margin-top: 0; 
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .woocommerce-MyAccount-navigation ul li {
        width: auto;
        flex: 1 1 auto;
    }
}

/* --- ESTILOS SECCIÓN FAQ --- */
.faq-wrapper.reveal-scale { opacity: 1; transform: none; transition: none; }
.faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: rgba(29, 29, 31, 0.3);
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text, #333);
    background: #fff;
    transition: background 0.2s;
    user-select: none;
}

.faq-question:hover {
    background: #f9f9f9;
    color: var(--secondary, #1d1d1f);
}

.faq-answer {
    padding: 0 20px 20px 20px;
    display: none; /* Oculto por defecto */
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    border-top: 1px solid #f0f0f0;
    margin-top: -5px;
    padding-top: 20px;
}

/* Estilo para las rutas de archivo */
.faq-answer code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: #e11d48;
    word-break: break-all;
}

.arrow {
    transition: transform 0.3s ease;
    color: #ccc;
}

/* --- ESTADO ABIERTO (JS) --- */
.faq-item.open .faq-answer {
    display: block;
    animation: fadeIn 0.3s ease;
}

.faq-item.open .arrow {
    transform: rotate(180deg);
    color: var(--secondary, #1d1d1f);
}

.faq-item.open .faq-question {
    color: var(--secondary, #1d1d1f);
    background: #fdfdfd;
}

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

/* --- 1. CONFIGURACIÓN BASE (CHECKBOX OCULTO) --- */
#btn-menu {
    display: none; /* El checkbox nunca se ve */
}

/* --- 2. VERSIÓN ESCRITORIO (> 1050px) --- */
@media (min-width: 1051px) {
    /* Ocultamos el icono de hamburguesa en PC */
    #nav-icon {
        display: none;
    }

    /* El menú se ve horizontal */
    #menu {
        display: block;
        position: static;
        background: transparent;
        width: auto;
        height: auto;
        box-shadow: none;
    }

    .header-menu {
        display: flex;
        gap: 30px;
        margin: 0;
        padding: 0;
    }
}

/* --- 3. VERSIÓN MÓVIL (HAMBURGUESA PREMIUM) (<= 1050px) --- */
@media (max-width: 1050px) {
    
    /* A. CONTENEDOR DEL ICONO (Botón) */
    #nav-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px; /* Área táctil más grande para mejor UX */
        height: 50px;
        cursor: pointer;
        z-index: 9999; 
        position: relative; 
        margin-left: auto;
        /* Quitamos fondo gris si lo hubiera, lo dejamos limpio */
        background: transparent;
        transition: transform 0.3s ease;
    }

    /* Efecto al pasar el ratón (opcional en móvil, pero bueno para híbridos) */
    #nav-icon:hover {
        transform: scale(1.05);
    }

    /* B. ESTRUCTURA DE LAS LÍNEAS */
    .nav-icon {
        position: relative;
        width: 28px; /* Ancho visual de las líneas */
        height: 20px; /* Altura total del conjunto */
    }

    .nav-icon .line {
        position: absolute;
        width: 100%;
        height: 2.5px; /* Líneas finas pero visibles (Elegancia) */
        background-color: #1d1d1f; /* Negro suave */
        border-radius: 10px; /* Bordes totalmente redondeados */
        transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Animación con rebote suave */
        left: 0;
    }

    /* Posiciones iniciales (Hamburguesa) */
    .nav-icon .top { 
        top: 0; 
    }
    
    .nav-icon .middle { 
        top: 50%; 
        transform: translateY(-50%); 
        width: 75%; /* La línea del medio un poco más corta (Estilo moderno) */
        left: 12.5%; /* Centrada */
        opacity: 1;
    }
    
    .nav-icon .bottom { 
        bottom: 0; 
    }

    /* C. ESTADOS ACTIVOS (TRANSFORMACIÓN A "X") */
    
    /* Línea superior: Baja al centro y rota 45 grados */
    #btn-menu:checked + label .nav-icon .top {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        background-color: #1d1d1f; /* Cambia a tu color verde al abrir */
    }

    /* Línea del medio: Se encoge hasta desaparecer */
    #btn-menu:checked + label .nav-icon .middle {
        width: 0%;
        opacity: 0;
        left: 50%;
    }

    /* Línea inferior: Sube al centro y rota -45 grados */
    #btn-menu:checked + label .nav-icon .bottom {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
        background-color: #1d1d1f; /* Cambia a tu color verde al abrir */
    }

    /* D. EL MENÚ LATERAL (DRAWER) - Sin cambios en funcionalidad, solo visual */
    #menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background: #ffffff;
        z-index: 9990;
        padding: 100px 30px 40px 30px;
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Deslizamiento estilo iOS */
        box-shadow: -10px 0 30px rgba(0,0,0,0.15); /* Sombra más difuminada */
        overflow-y: auto;
        display: block;
    }

    #btn-menu:checked ~ #menu {
        right: 0;
    }

    /* E. LISTA DE ENLACES (Tipografía mejorada) */
    .header-menu {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Más espacio entre enlaces */
    }

    .header-menu li {
        margin: 0;
        width: 100%;
        opacity: 0;
        transform: translateX(30px);
        transition: all 0.4s ease;
    }

    #btn-menu:checked ~ #menu .header-menu li {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Cascada de aparición */
    #btn-menu:checked ~ #menu li:nth-child(1) { transition-delay: 0.1s; }
    #btn-menu:checked ~ #menu li:nth-child(2) { transition-delay: 0.15s; }
    #btn-menu:checked ~ #menu li:nth-child(3) { transition-delay: 0.2s; }
    #btn-menu:checked ~ #menu li:nth-child(4) { transition-delay: 0.25s; }
    #btn-menu:checked ~ #menu li:nth-child(5) { transition-delay: 0.3s; }
    #btn-menu:checked ~ #menu li:nth-child(6) { transition-delay: 0.35s; }

    .header-menu li a {
        display: block;
        padding: 10px 0;
        font-family: var(--font-display) !important; /* Usamos tu fuente moderna */
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        border-bottom: none; /* Quitamos bordes para que sea más limpio */
        color: #1d1d1f !important;
        transition: color 0.2s;
    }

    .header-menu li a:hover {
        color: #1d1d1f !important;
        padding-left: 10px;
    }

    /* F. OVERLAY OSCURO */
    #menu::before {
        content: none;
    }

    #menu {
        overflow-x: hidden;
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    }

    #btn-menu:checked ~ #menu {
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15), 0 0 0 100vmax rgba(29, 29, 31, 0.35);
    }

    #menu .header-menu li {
        display: block;
        height: auto;
        background: transparent;
    }

    #menu .header-menu li a {
        line-height: 1.3;
        padding: 10px 0;
    }

    /* Bloquea el scroll del body mientras el drawer está abierto.
       Antes el contenido detrás del menú scrolleaba al pasar el dedo,
       lo que daba sensación de "scroll roto" en algunos puntos. */
    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* --- PREVENCIÓN DE SOLAPAMIENTO CON HEADER --- */

/* 1. Definimos la altura del header como variable (opcional, pero buena práctica) */
:root {
    --header-height-desktop: 100px;
    --header-height-mobile: 80px;
}

/* 2. Ajuste para el Header Fijo */
.site-header {
    height: var(--header-height-desktop) !important;
    display: flex;
    align-items: center;
}

.site-header-content {
    height: 100% !important; /* El contenido usa el 100% del header */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Empujar el cuerpo de la página hacia abajo */
/* Esto afecta a TODAS las páginas, no solo a WooCommerce */
body {
    padding-top: var(--header-height-desktop) !important;
}

/* Si tienes una barra de admin de WordPress, hay que sumar 32px */
body.admin-bar {
    padding-top: calc(var(--header-height-desktop) + 32px) !important;
}

/* Corrección específica para la HERO SECTION de la Home */
/* Como la Hero a veces tiene sus propios paddings, aseguramos que empiece limpia */
.hero {
    min-height: calc(100vh - var(--header-height-desktop)); /* Restamos el header */
    padding-top: 60px !important; /* Espacio visual interno extra */
}

/* --- AJUSTES MÓVILES (< 768px) --- */
@media (max-width: 768px) {
    
    /* Header más compacto en móvil */
    .site-header {
        height: var(--header-height-mobile) !important;
    }

    /* Empujar el body menos en móvil */
    body {
        padding-top: var(--header-height-mobile) !important;
    }

    body.admin-bar {
        padding-top: calc(var(--header-height-mobile) + 32px) !important; /* Si se ve la barra admin en móvil (raro, pero posible) */
        /* A veces la barra admin en móvil es de 46px o no es fija, ajusta si es necesario */
    }
    
    /* En móvil, la barra de admin suele no ser fija (position: absolute), 
       así que a veces no hace falta sumar los 32px/46px al padding-top del body si esta hace scroll.
       Pero si tu tema la hace fija, mantenlo. */

    /* Ajuste Hero Móvil */
    .hero {
        padding-top: 40px !important;
    }
}

/* --- CORRECCIONES ESPECÍFICAS DE PÁGINAS --- */

/* Páginas de contenido normal (Blog, Contacto, etc.) */
.site-content {
    margin-top: 0 !important; /* Ya lo maneja el padding-top del body */
    padding-top: 40px !important; /* Espacio visual estético */
}

/* WooCommerce (Ya tenías una regla específica, la actualizamos para que use la misma lógica) */
.woocommerce-account .content-page,
.woocommerce-cart .content-page,
.woocommerce-checkout .content-page {
    /* En estas páginas queremos un poco más de aire arriba */
    padding-top: 40px !important; 
}

/* --- FOOTER MODERNIZADO (DirectorAI) --- */

/* 1. Contenedor Principal */
footer {
    background-color: #ffffff; /* Fondo blanco limpio */
    border-top: 1px solid rgba(0,0,0,0.05); /* Línea divisoria muy sutil */
    padding: 40px 0; /* Espaciado vertical cómodo */
    margin-top: auto; /* Empuja el footer al final si hay poco contenido */
    position: relative;
    z-index: 10;
}

/* 2. Ancho y Centrado del contenido */
.content-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. Disposición Flexible (Logo Izq - Texto Der) */
.widget-content-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que baje en pantallas pequeñas */
    gap: 20px;
}

/* 4. Estilo del Logo en el Footer */
.logo-footer a {
    display: block;
    text-decoration: none;
}

.logo-footer img {
    height: 35px !important; /* Tamaño elegante, no gigante */
    width: auto !important;
    opacity: 0.8; /* Un poco suavizado por defecto */
    transition: all 0.3s ease;
    filter: grayscale(100%); /* Opcional: Logo en gris para no distraer */
}

/* Al pasar el ratón, el logo cobra vida */
.logo-footer img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-1px);
}

/* 5. Estilo del Texto (Copyright) */
.widget-area {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #6E6E73; /* Gris medio (estilo texto secundario Apple) */
    font-weight: 500;
}

.widget-area p {
    margin: 0;
    line-height: 1.5;
}

/* Si quieres que "DirectorAI" en el copyright destaque un poco */
.widget-area p:contains("DirectorAI") {
    /* Esto requiere estructura HTML específica, pero como fallback visual general: */
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
    footer {
        padding: 30px 0;
    }

    .widget-content-footer {
        flex-direction: column; /* Apilar elementos verticalmente */
        text-align: center;
        gap: 15px;
    }

    .logo-footer img {
        height: 40px !important; /* Un poco más grande en móvil para facilitar el toque */
        margin: 0 auto; /* Centrar imagen */
    }
}

/* --- 1. RESET DEL TEMA PARA EL FOOTER (FULL WIDTH) --- */
footer, 
.site-footer, 
.content-footer {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background-color: transparent !important; /* Dejamos que nuestro wrapper ponga el color */
}

.widget-content-footer {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Ocultar elementos antiguos si quedara alguno suelto del tema */
.widget-content-footer .widget-area,
.widget-content-footer .logo-footer {
    display: none !important; 
    /* Ojo: esto oculta lo que había antes fuera de nuestro bloque HTML */
}

/* Permitir que nuestro bloque HTML se muestre (sobreescribe el display none de arriba para nuestro bloque) */
.widget_block {
    display: block !important;
    width: 100%;
    margin: 0;
}

/* --- 2. ESTILOS DEL NUEVO FOOTER PROFESIONAL --- */

.directorai-footer-wrapper {
    background-color: #FFFFFF; /* Blanco limpio sobre Apple Gray del body */
    border-top: 1px solid var(--line-soft);
    color: var(--text-light);
    font-family: var(--font-body);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 80px;
}

.dai-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Columna de marca más ancha */
    gap: 40px;
}

/* Columna de Marca */
.dai-footer-logo {
    height: 45px;
    width: auto;
    margin-bottom: 20px;
}

.dai-footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 25px;
    max-width: 300px;
}

.dai-social-links {
    display: flex;
    gap: 15px;
}

.dai-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--primary);
    transition: all 0.3s ease;
    text-decoration: none;
}

.dai-social-links a:hover {
    background: var(--accent); /* Coral — acento de marca */
    color: #FFFFFF;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230, 90, 72, 0.25);
}

/* Columnas de enlaces */
.dai-footer-col h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dai-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dai-footer-col ul li {
    margin-bottom: 12px;
}

.dai-footer-col ul li a {
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.95rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.dai-footer-col ul li a:hover {
    color: var(--accent-deep); /* Coral oscuro — visible y on-brand */
    padding-left: 3px; /* Pequeño desplazamiento al hover */
}

/* Barra inferior */
.dai-footer-bottom {
    margin-top: 60px;
    border-top: 1px solid var(--line-soft);
    padding: 30px 0;
    background: #FFFFFF;
}

.bottom-flex {
    display: flex !important; /* Sobreescribe el grid del container */
    justify-content: space-between;
    align-items: center;
}

.copyright-text, .made-with {
    font-size: 0.9rem;
    color: #86868B; /* Apple tertiary — discreto sin desaparecer */
}

.made-with a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color .25s ease, border-color .25s ease;
}

.made-with a:hover {
    color: var(--accent-deep);
    border-bottom-color: var(--accent);
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .dai-footer-container {
        grid-template-columns: 1fr 1fr; /* 2 columnas en tablet */
        gap: 30px;
    }
    .brand-col {
        grid-column: span 2; /* La marca ocupa todo el ancho arriba */
        text-align: center;
    }
    .dai-footer-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .dai-social-links {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .directorai-footer-wrapper {
        padding-top: 50px;
    }
    .dai-footer-container {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        text-align: center;
        gap: 40px;
    }
    .brand-col {
        grid-column: span 1;
    }
    .bottom-flex {
        flex-direction: column;
        gap: 15px;
    }
}

/* --- FIX PARA ENLACES ANCLA (Menú) --- */

/* 1. RESET: Si es un enlace ancla (#), forzamos que NO se vea activo por defecto (ni texto verde ni línea) */
.header-menu li.current-menu-item a[href*="#"] {
    color: #1d1d1f !important; /* Forzamos color negro original */
}

.header-menu li.current-menu-item a[href*="#"]::after {
    width: 0 !important; /* Forzamos línea invisible */
}

/* Pero SÍ debe subrayarse al hacer hover, igual que el resto de enlaces.
   No cambiamos el color del texto: solo aparece la línea inferior. */
.header-menu li.current-menu-item a[href*="#"]:hover::after {
    width: 100% !important;
    left: 0;
    background: var(--primary);
}

.header-menu li.current-menu-item a[href*="#"]:hover {
    color: #1d1d1f !important;
}

/* 2. ACTIVO REAL: Estilos cuando el JavaScript detecta el scroll (Clase .active-anchor) */

/* Texto verde cuando JS lo activa */
.header-menu li.active-anchor a {
    color: var(--secondary) !important;
}

/* Línea verde cuando JS lo activa */
.header-menu li.active-anchor a::after {
    width: 100% !important;
    left: 0;
    background: var(--secondary);
}

/* --- BOTÓN VOLVER ARRIBA (SCROLL TO TOP) --- */
#dai-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--secondary, #1d1d1f); /* Tu verde */
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9990; /* Por encima de todo, pero debajo del loader/menú móvil */
    
    /* Flex para centrar el icono */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    
    /* Sombras y Estética */
    box-shadow: 0 4px 15px rgba(29, 29, 31, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* ESTADO INICIAL: OCULTO */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
}

/* Efecto Hover (solo PC) */
@media (hover: hover) {
    #dai-back-to-top:hover {
        background-color: #2c2c2e; /* Verde más oscuro */
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 6px 20px rgba(29, 29, 31, 0.4);
    }
}

/* CLASE ACTIVA (Cuando JS detecta scroll) */
#dai-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* AJUSTE MÓVIL */
@media (max-width: 768px) {
    #dai-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
        /* Evitar que se superponga con notificaciones de carrito si las hay */
    }
}

/* =========================================
   DISEÑO PÁGINA "PEDIDO RECIBIDO" (MODERNA)
   ========================================= */

/* 1. Limpieza General y Fondo */
.woocommerce-order {
    max-width: 1000px;
    margin: 0 auto;
    font-family: var(--font-body);
    color: var(--text, #1d1d1f);
}

/* 2. Caja de "Gracias" (Estilo Hero) */
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    background: linear-gradient(135deg, var(--secondary, #1d1d1f) 0%, #2c2c2e 100%);
    color: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(29, 29, 31, 0.3);
    position: relative;
    overflow: hidden;
    border: none;
}

/* Icono decorativo check */
.woocommerce-notice.woocommerce-notice--success::before {
    content: '\f00c'; /* FontAwesome Check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2rem;
    display: block;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* 3. Resumen del Pedido (La lista horizontal) */
ul.woocommerce-order-overview {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: white;
    padding: 30px;
    border-radius: 20px;
    list-style: none;
    margin-bottom: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
    gap: 20px;
}

ul.woocommerce-order-overview li {
    flex: 1 1 150px; /* Responsive */
    border-right: 1px solid #f0f0f0;
    margin: 0;
    padding: 0 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #6E6E73;
    letter-spacing: 0.5px;
}

ul.woocommerce-order-overview li:last-child {
    border-right: none;
}

ul.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.1rem;
    color: var(--text, #1d1d1f);
    margin-top: 5px;
    font-weight: 700;
    text-transform: none;
}

/* 4. Detalles del Pedido (Tablas) */
.woocommerce-order-details, 
.woocommerce-customer-details {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    margin-bottom: 40px;
    border: 1px solid rgba(0,0,0,0.02);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    color: var(--text, #1d1d1f);
}

/* Estilo de la Tabla */
.woocommerce-table--order-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px; /* Espacio entre filas */
    border: none;
}

.woocommerce-table--order-details th {
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #6E6E73;
    font-weight: 600;
    padding: 10px 0;
    border: none;
}

.woocommerce-table--order-details td {
    padding: 15px 0;
    border-top: 1px solid #f9f9f9;
    font-size: 1rem;
}

.product-name a {
    color: var(--secondary, #1d1d1f);
    text-decoration: none;
    font-weight: 600;
}

.product-quantity {
    color: #6E6E73;
    font-weight: normal;
}

/* Totales (Footer de tabla) */
tfoot th {
    text-align: right;
    padding-right: 20px !important;
    font-weight: normal;
}

tfoot tr:last-child th, 
tfoot tr:last-child td {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text, #1d1d1f);
    border-top: 2px solid #f0f0f0;
    padding-top: 20px;
}

tfoot tr:last-child td .amount {
    color: var(--secondary, #1d1d1f);
}

/* 5. Direcciones */
.woocommerce-customer-details address {
    font-style: normal;
    background: #f9fafb;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    line-height: 1.8;
    color: #555;
}

.woocommerce-customer-details--email, 
.woocommerce-customer-details--phone {
    font-weight: 600;
    color: var(--text, #1d1d1f);
    margin-top: 10px;
    display: block;
}

/* 6. Botón "Volver a pedir" */
.order-again {
    margin-top: 30px;
    text-align: center;
}

.order-again .button {
    background: var(--text, #1d1d1f);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.2s;
}

.order-again .button:hover {
    transform: translateY(-2px);
    background: #000;
}

/* =========================================
   OCULTAR CLAVES DE LICENCIA
   ========================================= */

/* Ocultar el título H2 que NO es el título principal de la sección */
/* El título principal tiene la clase .woocommerce-order-details__title */
/* El título de licencias es un H2 "desnudo" */
.woocommerce-order-details > h2:not(.woocommerce-order-details__title) {
    display: none !important;
}

/* Ocultar la tabla que NO es la de detalles del pedido */
/* La tabla de pedido tiene .woocommerce-table--order-details */
/* La tabla de licencias solo tiene .shop_table */
.woocommerce-order-details > table.shop_table:not(.woocommerce-table--order-details) {
    display: none !important;
}

/* --- AJUSTES RESPONSIVE --- */
@media (max-width: 768px) {
    ul.woocommerce-order-overview {
        flex-direction: column;
        gap: 0;
    }
    
    ul.woocommerce-order-overview li {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 0;
    }
    
    ul.woocommerce-order-overview li:last-child {
        border-bottom: none;
    }
    
    .woocommerce-order-details, 
    .woocommerce-customer-details {
        padding: 20px;
    }
}

/* --- ESTILOS PÁGINA CÓMO FUNCIONA (NUEVO) --- */

.tutorial-header {
    padding: 60px 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* Contenedor Timeline */
.tutorial-timeline-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
}

/* Línea vertical continua */
.tutorial-timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50px; /* Alineado con los marcadores */
    height: 100%;
    width: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.tutorial-step {
    display: flex;
    gap: 40px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

/* Marcador circular con número */
.step-marker {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--secondary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 0 0 8px white; /* Borde blanco para separar de la línea */
    font-family: var(--font-display);
}

.step-content {
    flex-grow: 1;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
}

.step-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

/* Placeholder para imágenes (Mockups) */
.software-mockup {
    width: 100%;
    height: auto;
    min-height: 350px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.software-mockup img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.mockup-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #9ca3af;
    gap: 10px;
    text-align: center;
    padding: 20px;
}

.mockup-placeholder i {
    font-size: 3rem;
}

/* Cajas de información extra */
.info-box {
    background: #f0fdfa;
    border-left: 4px solid var(--secondary);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-top: 20px;
}

.info-box h4 {
    color: var(--secondary);
    margin-bottom: 10px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-box ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    color: #555;
    font-size: 0.95rem;
}

/* Badges para los modos */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-right: 10px;
    vertical-align: middle;
}

.badge.city { background: rgba(29, 29, 31, 0.08); color: #1d1d1f; }
.badge.country { background: rgba(230, 90, 72, 0.15); color: #C94733; }

/* Lista de pasos de importación (CORREGIDO DEFINITIVO) */
ol.import-steps {
    list-style: none !important;        /* Oculta la numeración por defecto del tema */
    padding: 0 !important;              /* Resetea padding */
    margin: 30px 0;
    counter-reset: dai-steps-counter;   /* Inicia nuestro contador personalizado a 0 */
}

ol.import-steps li {
    list-style-type: none !important;   /* Asegura que no salgan puntos ni números dobles */
    position: relative;
    counter-increment: dai-steps-counter; /* Suma 1 al contador en CADA línea */
    padding-left: 50px !important;      /* Espacio reservado a la izquierda para el círculo */
    margin-bottom: 25px;
    margin-left: 0 !important;
    line-height: 1.6;
}

ol.import-steps li::before {
    content: counter(dai-steps-counter); /* Muestra el número actual (1, 2, 3...) */
    position: absolute;
    left: 0;
    top: -2px;                          /* Ajuste fino vertical */
    width: 32px;
    height: 32px;
    background: var(--secondary);       /* Tu color verde corporativo */
    color: white;
    border-radius: 50%;                 /* Círculo perfecto */
    text-align: center;
    line-height: 32px;                  /* Centra el número verticalmente */
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(29, 29, 31, 0.3); /* Sombra para profundidad */
    z-index: 1;
}

/* Feature grid pequeño para el paso 2 */
.feature-grid-small {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.feature-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
}

.feature-item strong {
    display: block;
    color: var(--primary);
    margin-bottom: 5px;
}

.feature-item p {
    font-size: 0.9rem;
    margin: 0;
    color: #666;
}

/* CTA Final */
.tutorial-cta {
    background: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 100%);
    color: white;
    padding: 60px 20px;
    border-radius: 30px;
    margin: 60px auto 0;
    max-width: 900px;
    box-shadow: 0 20px 40px rgba(29, 29, 31, 0.2);
}

.tutorial-cta h3 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.tutorial-cta p {
    color: rgba(255,255,255,0.9);
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tutorial-timeline-container::before {
        left: 20px;
    }
    
    .tutorial-step {
        flex-direction: column;
        gap: 20px;
    }
    
    .step-marker {
        margin-left: -10px; /* Ajuste visual para alinear con la línea */
    }
    
    .step-content {
        padding: 25px;
    }
    
    .feature-grid-small {
        grid-template-columns: 1fr;
    }
}

/* --- ESTILOS ARTÍCULO BLOG DIRECTORAI --- */

.dai-blog-wrapper {
    font-family: var(--font-body);
    color: #1d1d1f;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Header */
.dai-blog-header {
    text-align: center;
    margin-bottom: 40px;
}

.dai-subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary, #1d1d1f); /* Usa tu variable o el color fijo */
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.dai-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    background: -webkit-linear-gradient(45deg, #000, #434343);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dai-lead {
    font-size: 1.2rem;
    color: #666;
    max-width: 90%;
    margin: 0 auto;
}

.dai-separator {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
    margin: 40px 0;
}

/* Comparison Section */
.dai-comparison-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.dai-col {
    padding: 30px;
    border-radius: 20px;
    background: #f9f9f9;
    transition: transform 0.3s ease;
}

.dai-col.dai-highlight {
    background: #f0fdfa; /* Verde muy claro */
    border: 1px solid rgba(29, 29, 31, 0.1);
    box-shadow: 0 10px 30px rgba(29, 29, 31, 0.05);
}

.dai-col:hover {
    transform: translateY(-5px);
}

.dai-col h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.text-red { color: #e11d48; }
.text-green { color: var(--secondary, #1d1d1f); }

.text-red { color: #e11d48; }
.text-green { color: var(--secondary, #1d1d1f); }

/* --- MODIFICACIÓN AQUÍ --- */
.dai-list {
    list-style: none !important; /* Fuerza la eliminación del punto negro */
    padding: 0 !important;       /* Resetea el padding del tema */
    margin: 0;
}

.dai-list li {
    list-style-type: none !important; /* Doble seguridad contra el punto negro */
    position: relative;
    padding-left: 35px !important;    /* Aumentado de 25px a 35px para evitar solapamiento */
    margin-bottom: 10px;
    font-size: 0.95rem;
    margin-left: 0 !important;        /* Asegura que esté alineado a la izquierda */
}
/* ------------------------- */

.dai-list li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px; /* Ancho fijo para el icono */
    text-align: center; /* Centrar el icono en su espacio */
}

.dai-list.manual li::before {
    content: "\f00d"; /* X mark */
    color: #e11d48;
}

.dai-list.auto li::before {
    content: "\f00c"; /* Check mark */
    color: var(--secondary, #1d1d1f);
}

/* Feature Grid */
.dai-section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
}

.dai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.dai-card {
    background: white;
    padding: 30px 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.dai-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.dai-icon-box {
    width: 60px;
    height: 60px;
    background: var(--bg, #F5F5F7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    color: var(--secondary, #1d1d1f);
}

.dai-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.dai-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Stats Banner */
.dai-stats-banner {
    background: #1e1e1e;
    color: white;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 60px;
    text-align: center;
}

.dai-stat .dai-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent, #E65A48);
    line-height: 1;
}

.dai-stat .dai-label {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Conclusion */
.dai-conclusion {
    text-align: center;
    background: #f8f9fa;
    padding: 50px 30px;
    border-radius: 20px;
    margin-bottom: 40px;
}

.dai-conclusion h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.dai-conclusion p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px;
    color: #555;
}

.dai-cta-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.dai-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.dai-btn.primary {
    background: var(--secondary, #1d1d1f);
    color: white;
}

.dai-btn.primary:hover {
    background: #2c2c2e;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(29, 29, 31, 0.3);
}

.dai-btn.secondary {
    background: white;
    color: #333;
    border: 1px solid #ddd;
}

.dai-btn.secondary:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

/* Animaciones Simples */
.reveal-up {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.fade-in {
    animation: fadeIn 1s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .dai-title { font-size: 2rem; }
    .dai-comparison-section { grid-template-columns: 1fr; }
    .dai-stats-banner { flex-direction: column; gap: 40px; }
}

/* Estilos específicos para la lista de pasos del artículo 2 */
.dai-step-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dai-step-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
}

.step-number {
    font-size: 5rem;
    font-weight: 800;
    color: rgba(29, 29, 31, 0.15);
    -webkit-text-stroke: 0;
    margin-bottom: 10px;
    font-family: var(--font-display);
    line-height: 1;
    display: block;
    letter-spacing: -0.02em;
    transition: color 0.4s ease;
}

/* Cuando el bloque está activo, el número pasa a oro y gana presencia */
.step-block.active .step-number {
    color: var(--accent);
}

.step-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #1d1d1f;
}

.step-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
}

/* Estilos específicos para el artículo de Seguridad */

/* Tarjetas de SO */
.dai-os-steps {
    margin: 60px 0;
}

.dai-os-card {
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s;
}

.dai-os-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.dai-os-header {
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2rem;
    font-weight: 700;
}

.dai-os-card.mac .dai-os-header {
    background: #f0f0f0;
    color: #333;
}

.dai-os-card.win .dai-os-header {
    background: #e6f4ff;
    color: #0078d4;
}

.dai-os-body {
    padding: 25px;
    background: white;
}

.dai-os-body ol {
    margin: 15px 0 0 20px;
    padding: 0;
    list-style-type: decimal;
}

.dai-os-body li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #555;
}

.dai-os-body code {
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: #d63384;
}

/* FAQ Items dentro del artículo */
.dai-faq-item {
    text-align: left;
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
}

.dai-faq-item strong {
    display: block;
    font-size: 1.1rem;
    color: var(--secondary, #1d1d1f);
    margin-bottom: 10px;
}

.dai-faq-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
}

/* --- MEJORA VISUALIZACIÓN IMÁGENES (LIGHTBOX) --- */

/* 1. Indicador visual en la imagen pequeña */
.software-mockup img {
    cursor: zoom-in; /* Cambia el cursor a una lupa */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Efecto al pasar el ratón (Desktop) */
.software-mockup img:hover {
    transform: scale(1.02); /* Se agranda ligeramente */
    filter: brightness(1.05); /* Se ilumina un poco */
}

/* 2. El Visor a Pantalla Completa (Lightbox) */
.dai-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro semitransparente */
    z-index: 99999; /* Por encima de TODO, incluso del menú */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out; /* Cursor para indicar cerrar */
    opacity: 0;
    animation: daiFadeIn 0.3s forwards;
    padding: 20px; /* Margen de seguridad */
}

.dai-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Asegura que la imagen se vea entera */
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    transform: scale(0.95);
    animation: daiZoomIn 0.3s forwards;
    border-radius: 5px;
}

/* Animaciones de entrada suaves */
@keyframes daiFadeIn {
    to { opacity: 1; }
}

@keyframes daiZoomIn {
    to { transform: scale(1); }
}


/* =========================================
   FIX: REPARACIÓN DE LAYOUT HERO (FLEXBOX)
   ========================================= */

/* 1. Contenedor de Botones (Descargar / Comprar) */
/* Reemplaza la funcionalidad de: flex flex-col md:flex-row */
.hero-subtitle-container .flex {
    display: flex !important;
    flex-direction: column; /* Móvil: uno encima de otro */
    align-items: center;
    justify-content: center;
    gap: 20px; /* Reemplaza gap-4 */
}

/* 2. Contenedor Superior (Título e Imagen de la Hormiga) */
/* Reemplaza la funcionalidad en el encabezado del hero */
.hero-header-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- VERSIÓN ESCRITORIO (PC/Tablet) --- */
@media (min-width: 768px) {
    /* Botones lado a lado */
    .hero-subtitle-container .flex {
        flex-direction: row; 
    }

    /* Título e Imagen lado a lado */
    .hero-header-container {
        flex-direction: row;
    }
}

/* =========================================
   SECCIÓN SCROLL HORIZONTAL (MODOS) — REBRAND 2026
   Paleta: Apple Gray + Petrol + Old Gold
   ========================================= */

/* 1. Fondos de cada panel — alineados con la nueva estética */
/* Panel 1: Modo Ciudad — Apple Gray con acento petrol */
.horizontal-scroll-container .scroll-panel:nth-child(1) {
    background-color: var(--bg) !important; /* #F5F5F7 */
}
/* Panel 2: Modo País — crema cálida con acento oro */
.horizontal-scroll-container .scroll-panel:nth-child(2) {
    background: linear-gradient(180deg, #FFF0EE 0%, #FFFFFF 100%) !important;
}
/* Panel 3: Máquina de Blogging — blanco con halos sutiles */
.horizontal-scroll-container .scroll-panel:nth-child(3) {
    background:
        radial-gradient(circle at 20% 80%, rgba(230, 90, 72, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(29, 29, 31, 0.06) 0%, transparent 45%),
        #FFFFFF !important;
}

/* 2. Tipografía y tamaños */
.scroll-panel h2 {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--primary); /* Petrol */
    margin-bottom: 1.5rem;
    font-family: var(--font-display);
}

.scroll-panel p {
    font-size: 1.25rem;
    line-height: 1.75;
    color: var(--text-light); /* Muted #6E6E73 */
    margin-bottom: 2rem;
}

/* Etiquetas superiores (Estrategia Local / Nacional) */
.scroll-panel span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* 3. Colores específicos por panel */

/* PANEL 1: Modo Ciudad — petrol puro */
.horizontal-scroll-container .scroll-panel:nth-child(1) span {
    color: var(--primary);
}
.horizontal-scroll-container .scroll-panel:nth-child(1) .bg-white {
    border-left: 4px solid var(--primary);
}
.horizontal-scroll-container .scroll-panel:nth-child(1) i {
    color: var(--primary);
}

/* PANEL 2: Modo País — oro */
.horizontal-scroll-container .scroll-panel:nth-child(2) span {
    color: var(--accent-deep); /* #C94733 */
}
.horizontal-scroll-container .scroll-panel:nth-child(2) .bg-white {
    border-left: 4px solid var(--accent);
}
.horizontal-scroll-container .scroll-panel:nth-child(2) i {
    color: var(--accent);
}

/* 4. Cajas de Código (Las cajitas blancas) */
.scroll-panel .bg-white {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
}

.scroll-panel code {
    display: block;
    color: #374151; /* Gris oscuro para el código */
    font-family: var(--font-mono);
    font-size: 0.95rem;
    margin-bottom: 5px;
}

/* 5. Ajustes para Pantallas Grandes (Desktop) */
@media (min-width: 768px) {
    .scroll-panel h2 {
        font-size: 4.5rem; /* Texto gigante (text-7xl) */
    }
}

/* =========================================
   FIX: RESTAURACIÓN DE DETALLES TAILWIND PERDIDOS
   ========================================= */

/* 1. SECCIÓN MAPA: BANDERAS Y TEXTOS (Clases tipo bg-white/10) */
#flags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem; /* gap-6 */
}

#flags-container > div {
    background-color: rgba(255, 255, 255, 0.1) !important; /* bg-white/10 */
    backdrop-filter: blur(8px); /* backdrop-blur */
    -webkit-backdrop-filter: blur(8px);
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid rgba(255, 255, 255, 0.2); /* border-white/20 */
    color: white;
    cursor: default;
    transition: background-color 0.3s ease;
}

#flags-container > div:hover {
    background-color: rgba(255, 255, 255, 0.2) !important; /* hover:bg-white/20 */
}

/* Texto "Próximamente..." en morado claro */
#globalMap .text-indigo-200 {
    color: #c7d2fe !important; 
}

/* Título Grande del Mapa */
#globalMap h2 {
    font-size: 3rem; /* text-5xl */
    line-height: 1;
}

/* 2. BOTÓN HERO: SOMBRA VERDE (shadow-emerald-500/30) */
.btn-accent.shadow-lg {
    /* Recreamos la sombra suave verde esmeralda */
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3), 
                0 4px 6px -2px rgba(16, 185, 129, 0.3) !important;
}

/* 3. ICONOS GIGANTES DE FONDO (Scroll Section) */
/* Antes eran text-[20rem] y md:text-[40rem] */
.scroll-panel > i {
    font-size: 20rem; 
    line-height: 1;
    position: absolute;
    bottom: 0;
    right: -5rem; /* -right-20 */
    opacity: 0.1; /* opacity-10 */
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    .scroll-panel > i {
        font-size: 40rem !important; /* Gigante en PC */
    }
}

/* 4. AJUSTES DE ANCHO Y CONTENEDORES (w-full, max-w-4xl) */
.hero-subtitle-container {
    max-width: 56rem !important; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
}

.hero-title-wrapper, 
.hero-image-wrapper {
    /* En móvil ocupan todo, en PC automático */
    width: 100%; 
}

@media (min-width: 768px) {
    .hero-title-wrapper, 
    .hero-image-wrapper {
        width: auto !important; /* md:w-auto */
    }
}

/* 5. ARREGLO IMAGEN CENTRAL HORMIGA (Ant Image Wrapper) */
/* Aseguramos que el contenedor tenga el tamaño correcto si Tailwind falló */
.ant-img-wrapper {
    /* Esto ya estaba inline en tu HTML, pero aseguramos por si acaso el CSS externo lo pisa */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   FIX: VISIBILIDAD TEXTO FOOTER
   ========================================= */

/* 1. Forzar color oscuro en la descripción ("La plataforma líder...") */
.directorai-footer-wrapper .dai-footer-desc {
    color: #4b5563 !important; /* Gris oscuro legible */
    font-weight: 500;
}

/* 2. (Opcional) Asegurar que los títulos de columna también se vean */
.directorai-footer-wrapper h4 {
    color: #111827 !important; /* Negro casi puro */
}

/* 3. (Opcional) Asegurar que los enlaces de la lista se vean */
.directorai-footer-wrapper ul li a {
    color: #6b7280 !important; /* Gris medio */
}

/* =========================================
   ESTILOS BLOQUE DESCARGAS (RESPONSIVE)
   ========================================= */

/* 1. Contenedor Principal (Eliminamos el padding gigante de section) */
.descargas-container {
    padding: 40px 0;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Si está dentro del tutorial, quitamos padding extra para que encaje en la línea de tiempo */
.step-downloads .descargas-container {
    padding: 10px 0 0 0;
}

.descargas-container > h2 {
    margin-bottom: 14px;
}
.descargas-sub {
    max-width: 700px;
    margin: 0 auto 40px;
    padding: 0 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 1.15rem;
    line-height: 1.6;
}

/* 2. Grid de Tarjetas */
.downloads-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}
.downloads-mas {
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line-soft);
    box-shadow: 0 8px 20px rgba(29, 29, 31, 0.08);
    color: var(--accent-deep);
    font-size: 1rem;
}

/* 3. Estilo de las Tarjetas */
.download-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    position: relative;
}
.card-paso {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(230, 90, 72, 0.10);
    color: var(--accent-deep);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* Iconos Superiores */
.card-icon-wrapper {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.card-icon-wrapper.plugin-icon {
    width: auto;
    gap: 14px;
}
.card-icon-wrapper.plugin-icon img {
    width: auto;
    height: 70px;
}
.plugin-icon-flecha {
    color: #c7c7cc;
    font-size: 1.2rem;
}
.plugin-icon-wp {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #21759b;
    color: #fff;
    font-size: 26px;
}

/* Textos */
.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary);
}

.card-desc {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.version-text {
    font-size: 0.8rem;
    color: #999;
    margin-top: 15px;
    margin-bottom: 0;
}

/* 4. Botones de Sistemas Operativos */
.os-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-os {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    flex: 1; /* Ocupan espacio igual */
    min-width: 140px;
    white-space: nowrap;
}

/* Estilos Específicos de Botón */
.btn-os.mac {
    background: #F5F5F7;
    color: #1d1d1f;
    border: 1px solid #e5e5e5;
}
.btn-os.mac:hover { background: #e5e5e5; }

.btn-os.windows {
    background: #f0f9ff;
    color: #0078d4;
    border: 1px solid #bae6fd;
}
.btn-os.windows:hover { background: #e0f2fe; }

.btn-os.wordpress {
    background: #21759b;
    color: white;
    width: 100%; /* Botón WP ancho completo */
}
.btn-os.wordpress:hover { background: #1a5c7a; color: white; }

/* 5. AJUSTES MÓVILES (CRÍTICO) */
@media (max-width: 768px) {
    .downloads-grid {
        grid-template-columns: 1fr; /* Una columna */
        gap: 14px;
    }
    .downloads-mas {
        justify-self: center;
    }
    .descargas-sub {
        font-size: 1.02rem;
        margin-bottom: 28px;
    }

    .download-card {
        padding: 25px 20px;
        /* Quitamos las sombras pesadas en móvil para limpiar la interfaz */
        box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
        border: 1px solid #eee;
    }

    /* Título más pequeño */
    .card-title {
        font-size: 1.3rem;
    }

    /* Botones de descarga al 100% de ancho para facilitar el toque */
    .os-buttons {
        flex-direction: column;
    }

    .btn-os {
        width: 100%;
        padding: 15px; /* Más área táctil */
        font-size: 1rem;
    }
}

/* =========================================
   GLOBAL: CENTRAR TODOS LOS TÍTULOS H1
   ========================================= */
h1, 
.entry-title, 
.page-title, 
.woocommerce-products-header__title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%; /* Asegura que ocupen todo el ancho para poder centrarse */
}

/* =========================================
   FIX: ESPACIO BANDERAS IDIOMAS
   ========================================= */

#flags-container img {
    margin-right: 10px !important; /* Espacio entre bandera y texto */
    display: inline-block !important;
    vertical-align: middle !important; /* Alineación perfecta con el texto */
    transform: translateY(-1px); /* Ajuste óptico fino hacia arriba */
}

/* =========================================
   NUEVO SISTEMA DE PRECIOS Y OFERTAS
   ========================================= */

/* Contenedor del precio para evitar saltos de línea raros */
.price-wrapper {
    min-height: 80px; /* Altura fija para alinear tarjetas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px 0 25px 0;
}

/* Cabecera donde va el precio viejo y el descuento */
.price-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

/* Precio Antiguo (Tachado) */
.old-price {
    text-decoration: line-through;
    color: #9ca3af; /* Gris claro */
    font-size: 1.1rem;
    font-weight: 500;
}

/* Etiqueta de Ahorro (Badge) */
.save-badge {
    background-color: #fef3c7; /*#dcfce7; Fondo verde muy claro */
    color: #92400e; /* Texto verde oscuro */
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

/* Variación Badge para plan PRO (Destacado) */
.badge-pro {
    background-color: #fef3c7; /* Fondo amarillo/dorado */
    color: #92400e;
}

/* Variación Badge para plan AGENCY */
.badge-agency {
    background-color: #fef3c7; /* Fondo rojizo suave */
    color: #92400e;
}

/* Ajuste del precio principal cuando hay oferta */
.active-offer .price-tag {
    color: var(--secondary); /* Rojo vibrante para el nuevo precio */
    transform: scale(1.1); /* Un pelín más grande */
}

/* Ajuste específico para la tarjeta destacada (PRO) */
.pricing-card.featured .active-offer .price-tag {
    color: var(--secondary); /* En la pro, usamos tu verde corporativo */
}

/* =========================================
   ESTILOS PRECIO UNITARIO (Unit Pricing)
   ========================================= */

.unit-price-label {
    font-size: 0.9rem;
    color: #94a3b8; /* Gris azulado suave */
    margin-top: -15px; /* Pegarlo un poco más al precio principal */
    margin-bottom: 25px; /* Separarlo de la lista de features */
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* El número del precio unitario */
.unit-price-highlight {
    color: #1d1d1f; /* Verde corporativo para indicar valor */
    font-weight: 700;
    font-size: 1rem;
}

/* Si hay oferta activa, el precio unitario destaca más */
.active-offer + .unit-price-label .unit-price-highlight {
    color: #E65A48; /* Verde un poco más intenso */
}

/* Ajuste móvil para que no descuadre */
@media (max-width: 768px) {
    .unit-price-label {
        font-size: 0.85rem;
    }
}

/* =========================================
   FIX: TOOLTIPS Y PARPADEO EN PRECIOS
   ========================================= */

/* 1. Permitir que los tooltips salgan de la tarjeta */
.pricing-card {
    overflow: visible !important; /* Fundamental: deja salir el tooltip */
    z-index: 1; /* Nivel base */
    /* Truco para que el z-index cambie al instante y la animación sea suave */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, z-index 0s linear !important;
}

/* 2. Al pasar el ratón, traer la tarjeta al frente */
/* Esto evita el parpadeo y asegura que el tooltip tape a la tarjeta vecina */
.pricing-card:hover {
    z-index: 50 !important; 
    transform: translateY(-15px) scale(1.02);
}

/* 3. Corrección visual de esquinas (Importante) */
/* Al quitar overflow:hidden, las imágenes cuadradas sobresalen de las esquinas redondas. 
   Esto lo arregla aplicando el radio a la cabecera también. */
.pricing-card .card-header {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

/* 4. Asegurar que los tooltips estén siempre encima de todo */
.info-icon::after, 
.info-icon::before {
    z-index: 9999 !important;
    pointer-events: none; /* Evita que el tooltip interfiera con el clic */
}

/* =========================================
   ESTILOS UPSELL CARRITO (MARKETING)
   ========================================= */

.dai-upsell-box {
    background: linear-gradient(135deg, #FFF0EE 0%, #FFFFFF 100%);
    border: 1px solid rgba(230, 90, 72, 0.45);
    border-left: 4px solid var(--accent);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(29, 29, 31, 0.08);
    overflow: visible !important;
    z-index: 10;

    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Etiqueta flotante */
.upsell-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #E65A48; /* Color de atención (Coral) */
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 15px;
    border-bottom-left-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.1);
}

.upsell-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.upsell-text h3 {
    margin: 0 0 5px 0;
    color: #1d1d1f;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--font-display);
}

.upsell-text p {
    margin: 0;
    color: #4b5563;
    font-size: 1rem;
}

.upsell-price-action {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,0.6);
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(29, 29, 31, 0.1);
}

.price-diff {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.2;
}

.diff-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
}

.diff-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1d1d1f;
}

/* Botón de acción */
.btn-upsell {
    background: #1d1d1f;
    color: white !important;
    text-decoration: none !important;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(29, 29, 31, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-upsell:hover {
    background: #2c2c2e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 29, 31, 0.4);
}

/* Animación de entrada suave */
.slide-down-animation {
    animation: slideDown 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* Ajuste Móvil */
@media (max-width: 768px) {
    .upsell-content {
        flex-direction: column;
        text-align: center;
    }
    .upsell-price-action {
        width: 100%;
        flex-direction: column;
        gap: 15px;
    }
    .price-diff {
        text-align: center;
    }
    .btn-upsell {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   ESTILOS NUEVOS UPSELL AVANZADO
   ========================================= */

.upsell-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    padding-bottom: 20px;
}

.upsell-title-area h3 {
    margin: 0 0 5px 0;
    color: #1d1d1f;
    font-size: 1.5rem;
    font-weight: 800;
}

/* Comparación de coste unitario */
.upsell-cost-comparison {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.cost-item {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: 1.2;
}

.cost-item span { font-size: 0.75rem; color: #888; text-transform: uppercase; font-weight: 700; }
.cost-item.old strong { color: #ef4444; text-decoration: line-through; }
.cost-item.new strong { color: #E65A48; font-size: 1.1rem; }

.cost-arrow { color: #ccc; }

/* Grid de Características */
.upsell-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 30px;
    margin-bottom: 25px;
}

.upsell-feature-item {
    font-size: 0.9rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.upsell-feature-item i { color: #1d1d1f; }

.upsell-feature-item.highlight {
    color: #1d1d1f;
    font-weight: 500;
}

/* Separador "De por vida" en Upsell */
.upsell-lifetime-separator {
    grid-column: span 2;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #1d1d1f;
    font-weight: 800;
    border-bottom: 2px solid rgba(29, 29, 31, 0.1);
    padding-bottom: 5px;
}

/* Botón Full Width con Precio */
.btn-upsell.full-width {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
    background: linear-gradient(90deg, #1d1d1f 0%, #2c2c2e 100%);
}

.btn-upsell:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(29, 29, 31, 0.3);
}

.btn-col-left {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
}

.small-text { font-size: 0.8rem; opacity: 0.9; font-weight: 400; }
.big-price { font-size: 1.4rem; font-weight: 800; }

.btn-col-right {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .upsell-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .upsell-cost-comparison {
        width: 100%;
        justify-content: space-between;
    }
    .upsell-features-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .upsell-lifetime-separator {
        grid-column: span 1;
    }
    .btn-upsell.full-width {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    .btn-col-left { text-align: center; }
}

/* =========================================
   ESTILOS TOOLTIPS (GLOBALES & UPSELL)
   ========================================= */

/* 1. El Icono "i" */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    color: #94a3b8;
    font-size: 11px !important;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    font-style: italic;
    cursor: help;
    margin-left: 6px;
    transition: all 0.2s ease;
    background: white;
    line-height: 1;
    position: relative; /* Necesario para posicionar el texto flotante */
    z-index: 20;
}

/* Hover en el icono */
.info-icon:hover, 
.info-icon.active-tooltip {
    border-color: #1d1d1f;
    color: #1d1d1f;
    background: #f0fdfa;
}

/* 2. La Caja de Texto (Pseudo-elemento ::after) */
.info-icon::after {
    content: attr(data-tooltip); /* Coge el texto del HTML */
    position: absolute;
    bottom: 140%; /* Que aparezca encima */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Efecto entrada */
    
    background: #1e293b; /* Fondo oscuro */
    color: #fff;
    
    padding: 10px 14px;
    border-radius: 8px;
    
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    
    width: max-content;
    max-width: 250px; /* Ancho máximo para que no se desmadre */
    white-space: pre-wrap;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 9999; /* Muy alto para tapar todo */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* 3. El Triangulito (Pseudo-elemento ::before) */
.info-icon::before {
    content: '';
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    border: 6px solid transparent;
    border-top-color: #1e293b; /* Mismo color que el fondo */
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 9999;
}

/* 4. Mostrar Tooltip (Hover en PC o Clase Activa en Móvil) */
.info-icon:hover::after,
.info-icon:hover::before,
.info-icon.active-tooltip::after,
.info-icon.active-tooltip::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px); /* Pequeña elevación final */
}

/* Ajuste específico para que no se corte en móviles si está muy al borde */
@media (max-width: 480px) {
    .info-icon::after {
        left: auto;
        right: -10px; /* Alinear a la derecha del icono */
        transform: translateX(0) translateY(10px);
    }
    .info-icon::before {
        left: auto;
        right: 4px;
        transform: translateX(0) translateY(10px);
    }
    .info-icon.active-tooltip::after,
    .info-icon.active-tooltip::before {
        transform: translateX(0) translateY(-5px);
    }
}

/* =========================================
   FIX: ALINEACIÓN ICONOS Y ESPACIO TEXTO
   ========================================= */

/* 1. Ajustar el contenedor de la lista para ganar espacio lateral */
.feature-list-check {
    margin-left: -10px !important; /* Movemos toda la lista un poco a la izquierda */
    padding-left: 0 !important;
}

/* 2. Ajustar cada elemento de la lista */
.feature-list-check li {
    padding-left: 10px; /* Recuperamos un poco de aire interno */
    gap: 8px !important; /* Reducimos el espacio entre el icono y el texto (era 10px) */
    align-items: flex-start !important; /* Alinear arriba por si el texto ocupa 2 líneas */
}

/* 3. Asegurar que el icono tenga un ancho fijo y no empuje demasiado */
.feature-list-check i {
    width: 18px !important; /* Fijar ancho del icono */
    text-align: center;
    margin-top: 4px; /* Ajuste óptico para alinear con la primera línea de texto */
    flex-shrink: 0; /* Evitar que el icono se aplaste */
}

/* 4. Forzar que el texto ocupe todo el espacio restante */
.feature-list-check li {
    display: flex; 
    width: 100%;
}


/* =========================================
   MEJORA ESTÉTICA CABECERA MI CUENTA (LIMPIA)
   ========================================= */

/* 1. Ocultar el texto de descripción largo por defecto */
.woocommerce-MyAccount-content > p:nth-of-type(2) {
    display: none !important;
}

/* 2. Contenedor Principal (El Párrafo de saludo) */
.woocommerce-MyAccount-content > p:first-of-type {
    display: flex;             /* Activamos Flexbox */
    align-items: center;       /* Centrado vertical */
    flex-wrap: wrap;           /* Adaptable a móvil */
    
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;             /* Más espacio interno */
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* Sombra suave */
    border: 1px solid rgba(0,0,0,0.02);

    /* TRUCO DE MAGIA: OCULTAR TEXTO RAW */
    /* Esto oculta el "Hola", los paréntesis y el "¿no eres...?" */
    font-size: 0 !important;   
    color: transparent !important; 
}

/* 3. Reconstruir el saludo "Hola" */
.woocommerce-MyAccount-content > p:first-of-type::before {
    content: '👋 Hola,';      /* Texto nuevo limpio */
    font-family: var(--font-display);
    font-size: 1.5rem;        /* Tamaño visible */
    color: #4b5563;           /* Color gris elegante */
    margin-right: 8px;        /* Separación del nombre */
    font-weight: 600;
}

/* 4. Mostrar solo el PRIMER nombre (Pau) */
.woocommerce-MyAccount-content > p:first-of-type strong:first-of-type {
    font-size: 1.5rem;        /* Restaurar tamaño */
    color: #1d1d1f;           /* Tu verde corporativo */
    font-family: var(--font-display);
    font-weight: 800;
    pointer-events: none;     /* Evitar selección rara */
    display: inline-block;
}

/* 5. OCULTAR EL SEGUNDO NOMBRE (El que estaba dentro del paréntesis) */
.woocommerce-MyAccount-content > p:first-of-type strong:nth-of-type(2) {
    display: none !important;
}

/* 6. Botón "Cerrar sesión" (A la DERECHA) */
.woocommerce-MyAccount-content > p:first-of-type a {
    font-size: 0.75rem;       /* Restaurar tamaño del texto del botón */
    margin-left: auto;        /* MAGIA: Empuja el botón al final derecho */
    
    font-family: var(--font-body);
    color: #E65A48;           /* Color Coral */
    background: rgba(230, 90, 72, 0.08); 
    padding: 10px 20px;
    border-radius: 30px;      /* Pill shape */
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border: 1px solid rgba(230, 90, 72, 0.2);
    display: inline-flex;     /* Asegurar que se comporte como bloque */
    align-items: center;
    gap: 5px;
}

/* Hover en el botón */
.woocommerce-MyAccount-content > p:first-of-type a:hover {
    background: #E65A48;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 90, 72, 0.25);
}

/* Ajuste Móvil: Que el botón baje si no cabe */
@media (max-width: 500px) {
    .woocommerce-MyAccount-content > p:first-of-type a {
        margin-left: 0;       /* Quitar empuje a la derecha */
        margin-top: 15px;     /* Separar de arriba */
        width: 100%;          /* Ancho completo */
        justify-content: center;
    }
}

/* --- ESTILOS PLAN ACTUAL Y FOOTER DASHBOARD --- */

/* Estilo para la etiqueta del Plan */
.plan-badge {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: #1d1d1f; /* Verde corporativo */
    background: #fff;
    border: 1px solid rgba(29, 29, 31, 0.2);
    padding: 8px 20px;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* Contenedor del enlace inferior */
.license-footer-action {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed rgba(29, 29, 31, 0.2); /* Línea divisoria sutil */
    text-align: center;
}

/* Enlace de mejora */
.btn-upgrade-link {
    color: #1d1d1f;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.btn-upgrade-link:hover {
    color: #2c2c2e; /* Verde más oscuro */
    border-bottom-color: #2c2c2e; /* Subrayado al hover */
    transform: translateY(-1px);
    display: inline-block;
}

.btn-upgrade-link i {
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.2s;
}

.btn-upgrade-link:hover i {
    transform: translateX(4px); /* Flecha se mueve a la derecha */
}

/* Ajuste móvil para las 3 columnas */
@media (max-width: 900px) {
    .license-grid {
        flex-direction: column; /* Apilar en vertical */
        gap: 25px;
    }
    .license-divider {
        width: 100%;
        height: 1px; /* Divider horizontal */
        background: rgba(29, 29, 31, 0.1);
    }
}

/* --- NOTIFICACIÓN TOAST (COPIAR LICENCIA) --- */
.dai-toast {
    visibility: hidden;
    min-width: 280px;
    background-color: #333; /* Fondo oscuro elegante */
    color: #fff;
    text-align: center;
    border-radius: 50px; /* Forma de píldora */
    padding: 12px 24px;
    position: fixed;
    z-index: 99999;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Efecto rebote suave */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.dai-toast.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dai-toast i {
    color: #4ade80; /* Check verde */
    font-size: 1.1rem;
}

/* =========================================
   MEJORAS SECCIÓN MAPA (IDIOMAS)
   ========================================= */

/* 1. Ajuste del título para móviles */
#globalMap h2 {
    /* Evita que las palabras se corten (guionización) */
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
    /* Tipografía fluida: se ajusta entre 2rem y 3rem según el ancho */
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.2;
    padding: 0 15px; /* Pequeño respiro lateral en móviles */
}

/* 2. Espacio entre las banderas y el párrafo inferior */
#flags-container {
    margin-bottom: 40px !important; /* Añade aire debajo de las etiquetas */
}

/* 3. Ajuste del párrafo "Próximamente..." */
#globalMap p.mt-8 {
    margin-top: 0 !important; /* Quitamos el margen superior nativo de Tailwind para controlarlo con el contenedor de arriba */
    display: block;
    width: 100%;
}

/* Media Query específica para asegurar que en pantallas muy pequeñas no rompa */
@media (max-width: 480px) {
    #globalMap h2 {
        font-size: 1.8rem !important; /* Tamaño de seguridad para móviles muy estrechos */
        margin-bottom: 30px !important;
    }
    
    #flags-container {
        gap: 8px !important; /* Etiquetas un poco más juntas en móvil para ahorrar espacio vertical */
        margin-bottom: 30px !important;
    }
}

/* =========================================
   BLOQUEO DE SCROLL HORIZONTAL Y TIPOGRAFÍA
   ========================================= */

/* 1. Bloqueo de desplazamiento lateral SOLO en body.
   IMPORTANTE: NO aplicar overflow-x: hidden ni position: relative
   al elemento html.  En iOS Safari ambos crean un scroll context
   separado del viewport y rompen el momentum scrolling nativo:
   el scroll se queda enganchado un instante al inicio y luego
   choca con límites artificiales que se liberan al cabo de un
   rato — el bug reportado en iPhone.
   overflow-x: clip en body recorta sin crear scroll context
   (Safari 16 o superior, cobertura cercana al 100 % de iOS hoy). */
body {
    max-width: 100%;
    overflow-x: clip;
}

/* 2. Optimización de títulos para evitar cortes de palabras */
.scroll-panel h2, 
.sticky-text h2, 
.feature-title-sticky {
    hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* 3. Títulos específicos de la sección Blogging y Cards */
@media (max-width: 768px) {
    /* "Máquina de Blogging" */
    .sticky-text h2 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 1.1;
    }

    /* "Planificador de Keywords", "Redacción SEO-Perfecta", "Visuales & Programación" */
    .feature-title-sticky {
        font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
        line-height: 1.2;
    }

    /* Ajuste de márgenes laterales para que nada empuje hacia afuera */
    .sticky-text, .sticky-visual, .scroll-panel {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 4. Espacio entre banderas y párrafo (Ajuste global) */
#flags-container {
    margin-bottom: 45px !important;
}

/* --- MEJORA VISUAL: FILA DESTACADA (CANTIDAD DE DIRECTORIOS) --- */
.main-execution-row {
    background: linear-gradient(135deg, rgba(29, 29, 31, 0.06) 0%, rgba(230, 90, 72, 0.10) 100%);
    border-radius: 10px;
    padding: 12px 15px !important;
    margin-bottom: 18px !important;
    border: 1px solid rgba(29, 29, 31, 0.08);
    border-left: 4px solid var(--accent);

    /* Hacer que la caja sea más ancha para resaltar */
    width: calc(100% + 10px) !important;
    margin-left: -5px !important;
    box-shadow: 0 4px 10px rgba(29, 29, 31, 0.04);
}

/* Contenedor del texto destacado */
.main-feat-content {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.2;
}

/* El Número Grande (1, 10, 50) */
.main-feat-number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--accent-deep);
}

/* El Texto (DIRECTORIOS WEB COMPLETOS) */
.main-feat-text {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* =========================================
   FIX: PRECIOS TACHADOS EN EL CARRITO (WooCommerce Blocks)
   ========================================= */

/* 1. Contenedor de precios: Flexbox para alinear bien */
.wc-block-cart-item__prices .wc-block-components-product-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important; /* Separación entre precio viejo y nuevo */
    flex-wrap: wrap !important;
}

/* 2. Precio Anterior (Tachado) */
.wc-block-components-product-price__regular {
    color: #9ca3af !important; /* Gris suave */
    font-size: 0.9rem !important; /* Un poco más pequeño */
    text-decoration: line-through !important;
    font-weight: 400 !important;
    opacity: 0.8;
}

/* 3. Precio Nuevo (Oferta) */
.wc-block-components-product-price__value.is-discounted {
    color: var(--secondary, #1d1d1f) !important; /* Tu verde corporativo */
    font-weight: 800 !important;
    font-size: 1.1rem !important; /* Un poco más grande para destacar */
    text-decoration: none !important; /* Quitar subrayado por defecto */
    background: transparent !important;
}

/* 4. Etiqueta de Ahorro (El badge debajo del precio) */
.wc-block-components-product-badge {
    display: inline-block !important;
    margin-top: 5px !important;
    background-color: #fef3c7 !important; /* Fondo amarillo/dorado suave */
    color: #92400e !important; /* Texto oscuro para contraste */
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    letter-spacing: 0.5px !important;
}

/* =========================================
   ESTILOS CARRITO VACÍO (MODERNO & LIMPIO)
   ========================================= */

/* 1. Ocultar elementos feos por defecto */
.wp-block-woocommerce-empty-cart-block hr,
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
    display: none !important;
}

/* 2. Mensaje de Carrito Vacío */
.wc-block-cart__empty-cart__title {
    font-family: var(--font-display) !important;
    font-size: 2.5rem !important;
    color: var(--primary, #1d1d1f) !important;
    margin-bottom: 20px !important;
    position: relative;
}

/* Reemplazar texto inglés con pseudo-elemento (Truco CSS) */
.wc-block-cart__empty-cart__title {
    visibility: hidden; /* Oculta el texto original */
    position: relative;
}

.wc-block-cart__empty-cart__title::after {
    content: "Tu carrito está vacío"; /* Texto en Español */
    visibility: visible;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

/* Icono del carrito vacío */
.wc-block-cart__empty-cart__title::before {
    content: '\f07a'; /* Icono FontAwesome de carrito */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 4rem;
    color: #e5e7eb; /* Gris muy suave */
    display: block;
    visibility: visible;
    margin-bottom: 20px;
}

/* 3. Título "New in store" -> "Planes Disponibles" */
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
    visibility: hidden;
    position: relative;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
}

.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title)::after {
    content: "Empieza hoy mismo";
    visibility: visible;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary, #1d1d1f);
    width: 100%;
    text-align: center;
}

/* 4. Grid de Productos (Tarjetas) */
.wc-block-grid__products {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    padding: 0 20px !important;
}

.wc-block-grid__product {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px !important;
    padding: 30px !important;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 300px !important; /* Ancho fijo para consistencia */
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative; /* Para el badge de oferta */
}

.wc-block-grid__product:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Imagen del producto */
.wc-block-grid__product-image {
    margin-bottom: 20px !important;
}

.wc-block-grid__product-image img {
    width: 120px !important;
    height: auto !important;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img {
    transform: scale(1.1);
}

/* Título del producto */
.wc-block-grid__product-title {
    font-family: var(--font-body) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--primary, #1d1d1f) !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
}

/* --- PRECIOS: ALINEACIÓN Y ESTILO --- */
.wc-block-grid__product-price {
    margin-bottom: 25px !important; /* Más aire antes del botón */
    font-size: 1.1rem !important;
    display: flex !important;
    justify-content: center !important; /* Centrado horizontal */
    align-items: center !important;     /* Centrado vertical */
    gap: 12px !important;               /* Espacio uniforme entre precios */
    min-height: 40px !important;        /* Altura mínima para alinear filas */
}

/* Precio Tachado (Anterior) */
.wc-block-grid__product-price del {
    color: #9ca3af !important;          /* Gris suave */
    font-size: 0.95rem !important;      /* Tamaño equilibrado */
    text-decoration: line-through !important;
    opacity: 0.8;                       /* Un poco transparente */
    margin-right: 0 !important;         /* El gap del padre ya maneja el espacio */
    font-weight: 400 !important;
}

/* Precio Nuevo (Oferta) */
.wc-block-grid__product-price ins {
    color: var(--secondary, #1d1d1f) !important; /* Tu verde corporativo */
    font-weight: 800 !important;
    text-decoration: none !important;   /* Quitar subrayado feo por defecto */
    font-size: 1.4rem !important;       /* Destacado */
    background: transparent !important; /* Quitar fondo amarillo por defecto */
}

/* Limpiar span interno del precio para evitar estilos heredados */
.wc-block-grid__product-price .amount {
    font-family: var(--font-display) !important; /* Tu tipografía moderna */
}

/* --- BOTÓN AÑADIR AL CARRITO: ALINEACIÓN UNIFORME --- */
.wp-block-button.wc-block-grid__product-add-to-cart {
    margin-top: auto !important; /* Empuja el botón al final de la tarjeta */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.wp-block-button__link.add_to_cart_button {
    background: var(--primary, #1d1d1f) !important;
    color: white !important;
    border-radius: 30px !important;
    padding: 12px 30px !important; /* Un poco más ancho */
    font-weight: 700 !important;   /* Texto más fuerte */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Animación suave */
    display: inline-block !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; /* Sombra sutil por defecto */
    border: none !important;
}

.wp-block-button__link.add_to_cart_button:hover {
    background: var(--secondary, #1d1d1f) !important;
    transform: translateY(-2px) !important; /* Pequeña elevación */
    box-shadow: 0 8px 15px rgba(29, 29, 31, 0.25) !important; /* Sombra verde al hover */
}

/* Ocultar el Upsell Box si el carrito está vacío (ya que no tiene sentido hacer upgrade de nada) */
.wp-block-woocommerce-cart .dai-upsell-box {
    display: none !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .wc-block-grid__products {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .wc-block-grid__product {
        width: 100% !important;
        max-width: 350px !important;
    }
    
    .wc-block-cart__empty-cart__title::before {
        font-size: 3rem;
    }
    
    .wc-block-cart__empty-cart__title::after {
        font-size: 2rem;
    }
}

/* =========================================
   NUEVA SECCIÓN: DIRECTORAI ENGINE (LIGHT TECH MODE)
   ========================================= */

.engine-section-dark {
    /* Fondo claro técnico */
    background: #ffffff;
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
    color: #1e293b; /* Texto oscuro base */
    padding: 100px 0;

    /* --- LÓGICA ANCHO COMPLETO (FULL WIDTH) --- */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}

/* Fondo decorativo (Grid Gris Suave) */
.engine-grid-lines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Rejilla en gris suave en vez de blanco */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    pointer-events: none;
}

/* Brillo ambiental central (Petrol + Oro suaves) */
.engine-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    background:
        radial-gradient(circle at 35% 40%, rgba(230, 90, 72, 0.16) 0%, rgba(255,255,255,0) 55%),
        radial-gradient(circle at 65% 60%, rgba(29, 29, 31, 0.08) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    pointer-events: none;
    animation: glowPulse 6s infinite alternate;
}

.engine-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.engine-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 60px;
}

.engine-header > .engine-badge-dark,
.bk-header > .bk-badge,
.text-center > .agentic-badge,
.text-center > .engine-badge-dark {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.reveal-left > .hero-badge {
    display: block;
    width: fit-content;
}

.engine-badge-dark {
    background: rgba(230, 90, 72, 0.14);
    border: 1px solid rgba(230, 90, 72, 0.35);
    color: var(--accent-deep);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

/* Texto Gradiente Oscuro */
.text-gradient {
    background: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Evita que descenders (g, p, j) se corten al recortar el fondo a texto */
    line-height: 1.18;
    padding-bottom: 0.15em;
    display: inline-block;
}

:is(h1, h2, h3) span.text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    display: inline;
    line-height: inherit;
    padding-bottom: 0;
}

/* Sobreescribir la clase de opacidad blanca que teníamos en el HTML */
.text-white-opacity {
    color: #64748b !important; /* Gris pizarra elegante */
    font-weight: 500;
}

/* Layout Grid */
.engine-layout {
    display: grid;
    grid-template-columns: 1fr 350px 1fr;
    gap: 40px;
    align-items: stretch;
    margin-top: 40px;
}
.engine-layout > .engine-center-visual { align-self: center; }

/* Tarjetas con Efecto Cristal Claro (Light Glassmorphism) */
.card-glass {
    background: rgba(255, 255, 255, 0.7); /* Blanco semitransparente */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Sombra suave para separar del fondo blanco */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
    opacity: 0; /* Inicio para animación JS */
}

.card-glass:hover {
    background: #ffffff;
    border-color: var(--accent);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(230, 90, 72, 0.18);
}

.feat-icon-box {
    background: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 100%);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--accent);
    flex-shrink: 0;
    box-shadow: 0 8px 15px rgba(29, 29, 31, 0.25), inset 0 0 0 1px rgba(230, 90, 72, 0.18);
}

.card-glass:hover .feat-icon-box {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--primary);
    box-shadow: 0 10px 25px rgba(230, 90, 72, 0.35);
}

.feat-content h4 {
    color: #1e293b; /* Negro azulado */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: var(--font-display);
}

.feat-content p {
    color: #64748b; /* Gris texto */
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* --- CENTRO: NÚCLEO ANIMADO --- */
.engine-center-visual {
    position: relative;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.engine-logo-core {
    width: 140px;
    height: 140px;
    background: #ffffff;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 20px 60px rgba(29, 29, 31, 0.2), 0 0 0 1px rgba(230, 90, 72, 0.25), 0 0 30px rgba(230, 90, 72, 0.15);
    border: 1px solid rgba(230, 90, 72, 0.35);
    animation: corePulse 3s infinite ease-in-out;
}

.engine-logo-img {
    width: 90px;
    height: auto;
}

/* Anillos orbitales (Ajustados para fondo claro) */
.orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(29, 29, 31, 0.1); /* Anillos verdes muy sutiles */
}

.ring-inner { width: 200px; height: 200px; border-style: dashed; border-color: rgba(230, 90, 72, 0.35); animation: spinRight 20s linear infinite; }
.ring-middle { width: 280px; height: 280px; border-color: rgba(29, 29, 31, 0.15); animation: spinLeft 30s linear infinite; }
.ring-outer { width: 360px; height: 360px; border: 1px dotted rgba(230, 90, 72, 0.25); animation: spinRight 60s linear infinite; }

/* Partículas */
.orbit-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--accent);
    top: 50%; left: 50%;
}

.p1 { animation: orbit1 10s linear infinite; }
.p2 { animation: orbit2 15s linear infinite; }

.core-glow {
    position: absolute;
    width: 100px; height: 100px;
    background: var(--accent);
    filter: blur(80px);
    opacity: 0.45;
    animation: glowPulse 4s infinite alternate;
}

/* KEYFRAMES */
@keyframes spinRight { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spinLeft { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes corePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes glowPulse { 0% { opacity: 0.3; } 100% { opacity: 0.6; } }

@keyframes orbit1 {
    from { transform: rotate(0deg) translateX(140px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}
@keyframes orbit2 {
    from { transform: rotate(180deg) translateX(180px) rotate(-180deg); }
    to { transform: rotate(540deg) translateX(180px) rotate(-540deg); }
}

/* Animación de flotación CSS pura */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.is-floating {
    animation: floatY 4s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 1024px) {
    .engine-layout {
        grid-template-columns: 1fr 1fr;
    }
    .engine-center-visual {
        grid-column: span 2;
        order: -1; 
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .engine-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .engine-center-visual {
        transform: scale(0.8);
        margin-bottom: 20px;
    }
    .card-glass {
        width: 100%;
    }
    .engine-grid-lines { display: none; }
}

/* =======================================================
   GLOBAL FULL WIDTH (BREAK-OUT) - EXCEPTO HERO
   ======================================================= */

/*
   Esta regla fuerza a los contenedores a salirse del ancho 
   limitado de WordPress y ocupar toda la pantalla (100vw).
   Afecta a todas las secciones menos a la Hero.
*/

.section-custom,      /* Afecta a: Engine, Scraping, Algoritmo, IA, FAQ, Precios */
.tech-stack,          /* La cinta de logos */
.scale-section,       /* Imagen parallax "Escala sin límites" */
.descargas-container  /* Bloque de descargas */
{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}

/* Aseguramos que el CONTENIDO interno de esas secciones 
   siga centrado y no se pegue a los bordes.
*/
.container-custom,
.descargas-container > .downloads-grid, /* Grid interno de descargas */
.descargas-container > h2
{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Ajuste específico para el bloque de descargas que tenía un max-width global */
.descargas-container {
    max-width: none !important; /* Quitamos el límite al contenedor padre */
    background-color: #f8f9fa; /* Le damos un fondo suave para que se note el ancho completo */
}
.step-downloads .descargas-container {
    width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    background-color: transparent;
}
.step-downloads .descargas-container > .downloads-grid {
    padding-left: 0;
    padding-right: 0;
}
.step-downloads .descargas-sub {
    max-width: none;
    margin: 0 0 22px;
    padding: 0;
    text-align: left;
    font-size: 1rem;
}

/* Ajuste de seguridad para evitar scroll horizontal indeseado.
   Mantenemos solo en body (no en html) — overflow-x en html rompe
   el scroll en iOS Safari (ver nota en regla anterior). */
body {
    overflow-x: clip;
}

/* =========================================
   SECCIÓN BLOG AGÉNTICO (NEURAL STYLE)
   ========================================= */

.agentic-section {
    background: radial-gradient(circle at top right, #2c2c2e 0%, #1d1d1f 100%);
    position: relative;
    overflow: hidden;
    color: white;
    padding: 120px 0;
    
    /* Full Width Break-out */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Fondo decorativo */
.neural-bg-grid {
    position: absolute;
    width: 100%; height: 100%; top: 0; left: 0;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
    pointer-events: none;
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.6;
}
.orb-1 { width: 400px; height: 400px; background: #E65A48; top: -100px; left: -100px; animation: floatOrb 20s infinite alternate; }
.orb-2 { width: 300px; height: 300px; background: #C94733; bottom: -50px; right: -50px; animation: floatOrb 15s infinite alternate-reverse; }

@keyframes floatOrb {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Badge */
.agentic-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #F08778; /* Oro claro */
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 0 20px rgba(230, 90, 72, 0.4);
}

.text-white { color: white !important; }
.text-indigo-200 { color: #D2D2D7 !important; }

.text-green-400 { color: #22c55e; }

.floating-y { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* --- CLASE PARA ICONOS SVG PERSONALIZADOS (Tech Stack) --- */
.custom-tech-icon {
    width: 1em;            /* Hereda el tamaño de font-size (30px) */
    height: 1em;
    fill: currentColor;    /* IMPORTANTE: Hereda el color gris (#ccc) */
    vertical-align: -0.15em; /* Alineación óptica con el texto */
    margin-right: 5px;
    display: inline-block;
}

/* =========================================
   AJUSTE HERO: PANTALLA COMPLETA (100vh)
   ========================================= */

.hero {
    /* Calculamos la altura restando el header y la barra de admin si existe */
    height: calc(100vh - var(--header-height-desktop)) !important;
    min-height: 600px; /* Seguridad para pantallas muy bajas */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrado vertical perfecto */
    text-align: center;
    padding-top: 0 !important; /* Quitamos el padding que empujaba hacia abajo */
    padding-bottom: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Ajuste del contenedor interno del Hero */
.hero .container-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* Ajuste específico para el H1 en el Hero Full Screen */
.hero h1 {
    font-size: clamp(2.5rem, 6vw, 5.5rem) !important; /* Tipografía fluida */
    line-height: 1.1;
    margin-bottom: 20px;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .hero {
        height: calc(100vh - var(--header-height-mobile)) !important;
    }
}

/* =========================================
   TECH STACK: ANCHO COMPLETO (FULL WIDTH)
   ========================================= */

.tech-stack {
    padding: 40px 0;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    
    /* Forzar ancho completo */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    z-index: 20;
}

/* Aseguramos que la pista de logos no tenga saltos */
.tech-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scroll 30s linear infinite; /* Un poco más lento para mejor lectura */
}

/* Añadir esto a css.css */
.hero .app-interface {
    max-width: 850px; /* Reducido para que quepa en un 100vh estándar */
    margin-top: 30px;
    transform: scale(0.9); /* Escala sutil para ahorrar espacio vertical */
}

@media (max-height: 800px) {
    .hero .app-interface {
        display: none; /* En pantallas muy bajas, ocultamos el mockup para priorizar el H1 y botones */
    }
}

/* =========================================
   FIX MÓVIL: ELIMINACIÓN DE ESPACIOS MUERTOS
   ========================================= */

@media (max-width: 768px) {
    /* 1. Reducir el grosor real del header en móvil */
    .inside-header {
        padding: 10px 20px !important; /* Estaba en 40px, lo bajamos a 10px */
    }

    /* 2. Eliminar el padding del body para que el Hero suba al techo */
    body, body.admin-bar {
        padding-top: 0 !important;
    }

    .hero {
        height: auto !important;
        min-height: 100vh !important;
        /* El Hero empieza en el tope (0), pero empujamos el CONTENIDO 
           exactamente lo que mide el header (80px) para que no lo tape */
        padding-top: 80px !important; 
        padding-bottom: 20px !important;
        justify-content: flex-start !important;
    }

    /* 3. Ajuste del contenedor y elementos internos */
    .hero .container-custom {
        padding-top: 0 !important; /* Quitamos los 10px de aire extra */
    }

    .hero h1 {
        font-size: 2.1rem !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important; /* Pegamos el título a la imagen */
        line-height: 1.1 !important;
    }

    /* 4. Pegar la hormiga al título */
    .hero .ant-img-wrapper {
        width: 140px !important; /* Un poco más pequeña para que quepa todo */
        height: 140px !important;
        margin: 5px auto 10px auto !important; /* Margen mínimo */
    }

    /* 5. Ajustar el subtítulo y botones */
    .hero-subtitle-container {
        margin-top: 0 !important; /* Quitamos el margen superior de 60px */
    }

    .hero .lead {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
        padding: 0 20px;
    }
}

/* =========================================
   FIX MÓVIL: DIRECTORAI ENGINE (PLUGIN)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Forzar layout de una sola columna */
    .engine-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* FORZAR VISIBILIDAD DEL NÚCLEO */
    .engine-logo-core {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important; /* Evita que GSAP lo deje en 0 */
        transform: scale(1) !important; 
        background: #ffffff !important;
        z-index: 20 !important;
    }

    .engine-logo-img {
        display: block !important;
        width: 80px !important; /* Ajuste de tamaño para el círculo de móvil */
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Aseguramos que el contenedor visual tenga espacio suficiente */
    .engine-center-visual {
        height: 280px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* 3. Ajustar las tarjetas de cristal */
    .card-glass {
        opacity: 1 !important; /* Aseguramos visibilidad si falla el JS */
        transform: none !important; /* Evitamos que el desplazamiento lateral las saque de margen */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px !important;
        /* Hacemos el texto un poco más pequeño para que no se alargue la tarjeta */
    }

    .feat-content h4 {
        font-size: 1.1rem !important;
    }

    .feat-content p {
        font-size: 0.85rem !important;
    }

    /* 4. Desactivar elementos pesados de fondo en móvil */
    .engine-grid-lines {
        opacity: 0.5; /* Suavizamos la rejilla */
        background-size: 40px 40px; /* Rejilla más pequeña para móviles */
    }

    .engine-badge-dark {
        font-size: 0.75rem !important;
        padding: 5px 12px !important;
    }

    .engine-section-dark {
        padding: 60px 0 !important; /* Reducimos el padding vertical de la sección */
    }
}

/* --- Ajuste de las columnas de tarjetas --- */
.engine-col {
    display: grid;
    grid-auto-rows: 1fr;
    /* Distancia uniforme entre los 3 recuadros de cada columna en PC */
    gap: 30px; 
}

/* --- Ajuste del layout principal en PC --- */
.engine-layout {
    display: grid;
    /* Aumentamos el gap horizontal para que los anillos no toquen las tarjetas */
    grid-template-columns: 1fr 380px 1fr; 
    gap: 60px; 
    align-items: center;
    margin-top: 40px;
}

/* --- Asegurar que las tarjetas no crezcan infinitamente --- */
.card-glass {
    width: 100%;
    max-width: 450px; /* Evita que se ensanchen demasiado en monitores grandes */
    margin: 0 auto;  /* Centra la tarjeta en su columna */
    opacity: 0;
    /* ... resto de tus estilos ... */
}

@media (max-width: 768px) {
    /* 1. Contenedor principal en móvil */
    .engine-layout {
        display: flex !important;
        flex-direction: column !important;
        /* Distancia uniforme entre TODO el stack (Logo -> Columna 1 -> Columna 2) */
        gap: 30px !important; 
    }

    /* 2. Forzar que las columnas hereden la misma distancia */
    .engine-col {
        display: flex !important;
        flex-direction: column !important;
        /* Distancia uniforme entre recuadros de la misma columna */
        gap: 30px !important; 
    }

    /* 3. Limpiar márgenes residuales */
    .card-glass {
        max-width: 100% !important;
        margin: 0 !important; /* El gap del padre ya hace el trabajo */
        opacity: 1 !important;
        transform: none !important;
    }

    /* 4. Ajuste del núcleo visual */
    .engine-center-visual {
        order: -1; 
        height: 250px !important;
        margin: 0 !important; /* Eliminamos márgenes para que el gap sea exacto */
        transform: scale(0.65); /* Un poco más pequeño para dejar aire a los lados */
    }
}

/* =========================================
   AJUSTE HERO ESCRITORIO (PC): FIX CORTE VERTICAL
   ========================================= */

@media (min-width: 769px) {
    .hero {
        /* ALINEACIÓN: Empezar desde arriba */
        justify-content: flex-start !important;
        padding-top: 80px !important; 

        /* SOLUCIÓN AL CORTE: */
        /* 1. Altura automática para que crezca si el contenido lo pide */
        height: auto !important; 
        /* 2. Mínimo el alto de la pantalla (para mantener el diseño full screen en monitores grandes) */
        min-height: calc(100vh - var(--header-height-desktop)) !important;
        /* 3. Permitir ver lo que sobresalga (habilita el scroll del navegador) */
        overflow: visible !important; 
    }

    .hero .container-custom {
        justify-content: flex-start !important;
        /* El contenedor también debe adaptarse */
        height: auto !important; 
        padding-bottom: 60px !important; /* Margen inferior de seguridad para que no se pegue al borde */
    }

    /* --- MÁRGENES ESTÉTICOS (Mantenemos tu diseño anterior) --- */

    .hero-logo {
        margin-bottom: 30px !important; 
    }
    
    .hero-header-container {
        margin-bottom: 0 !important;
    }
    
    .hero-subtitle-container {
        /* Distancia ARRIBA: Desde la Imagen hasta el Texto */
        margin-top: 80px !important; 
        margin-bottom: 0 !important; 
    }

    .hero .lead {
        /* Distancia ABAJO: Desde el Texto hasta los Botones */
        margin-bottom: 80px !important; 
    }
}

/* =========================================
   SECCIÓN SHOWCASE (EXAMPLES)
   ========================================= */

.examples-section {
    background-color: #ffffff;
    position: relative;
    padding: 100px 0;
    overflow: visible; /* Permitir efecto 3D salir del margen */
}

/* Fondos ambientales */
.ex-glow {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    z-index: 0;
    animation: pulseGlow 8s infinite alternate;
}
.glow-left { top: 10%; left: -200px; background: #1d1d1f; }
.glow-right { bottom: 10%; right: -200px; background: #E65A48; }

@keyframes pulseGlow { 0% { opacity: 0.1; transform: scale(1); } 100% { opacity: 0.25; transform: scale(1.2); } }

.examples-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    perspective: 1000px; /* Clave para el efecto 3D */
}

/* --- TARJETA MAESTRA --- */
.example-card {
    position: relative;
    height: 400px; /* O auto según tu media query */
    border-radius: 30px;
    text-decoration: none;
    display: block;
    
    /* FIX VISUAL 1: Forzar recorte de bordes en 3D (Chrome/Safari) */
    overflow: hidden; 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    
    /* FIX VISUAL 2: Aislamiento de capas */
    isolation: isolate;
    
    /* Sombras y Bordes */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    
    /* Preparación 3D */
    transform-style: preserve-3d;
    transform: perspective(1000px); /* Perspectiva base */
    
    /* Transición: Solo suavizamos transform cuando el ratón SALE. 
       Cuando está DENTRO, el JS controla el movimiento (sin lag). */
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
}

/* Efecto Hover Sutil (Sombra) */
.example-card:hover {
    box-shadow: 0 25px 50px rgba(0,0,0,0.2), 0 0 20px rgba(255,255,255,0.1);
    z-index: 10;
}

/* Fondos específicos */
/* Monterrey: Urbano, Oscuro, Neón Naranja/Verde */
.card-bold .ex-card-bg {
    background: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 100%);
    position: absolute; inset: 0; z-index: 0;
}
.card-bold::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1546522306-646698622998?q=80&w=800&auto=format&fit=crop'); 
    background-size: cover; opacity: 0.2; mix-blend-mode: overlay; transition: 0.5s;
}

/* Sudáfrica: Elegante, Petrol/Dorado, Suave */
.card-elegant .ex-card-bg {
    background: linear-gradient(135deg, #1d1d1f 0%, #0a0a0c 100%);
    position: absolute; inset: 0; z-index: 0;
}
.card-elegant::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?q=80&w=800&auto=format&fit=crop'); 
    background-size: cover; opacity: 0.3; mix-blend-mode: soft-light; transition: 0.5s;
}

/* Hover: Zoom imagen fondo */
.example-card:hover::before { transform: scale(1.1); opacity: 0.4; }

/* Contenido Interno */
.ex-content {
    position: relative; z-index: 2;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translateZ(30px); /* Flota sobre el fondo */
}

.ex-badge {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 20px;
}
.badge-purple { background: rgba(230, 90, 72, 0.15); color: #F08778; border-color: rgba(230, 90, 72, 0.3); }

.ex-main-info { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.ex-flag { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.example-card h3 { font-size: 2.5rem; font-weight: 800; margin: 0; line-height: 1; color: white !important;}

.ex-divider { height: 1px; background: linear-gradient(to right, rgba(255,255,255,0.5), transparent); margin-bottom: 25px; }

.ex-details-grid { display: flex; gap: 30px; margin-bottom: auto; }
.ex-detail { display: flex; flex-direction: column; }
.ex-detail .label { font-size: 0.8rem; color: rgba(255,255,255,0.6); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.ex-detail .value { font-size: 1.1rem; font-weight: 600; }
.val-bold { color: #E65A48; }
.val-elegant { color: #F08778; }

/* UI Flotante (Pills) */
.ex-floating-ui {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px;
    transform: translateZ(50px); /* Flota más arriba */
}
.ui-pill {
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 16px; border-radius: 12px; font-size: 0.85rem; font-weight: 500;
    display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px);
}
.pill-gold { background: rgba(230, 90, 72, 0.12); border-color: rgba(230, 90, 72, 0.35); color: #F08778; }

/* Botón CTA */
.ex-cta {
    background: white; color: black;
    padding: 15px; border-radius: 12px;
    text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateZ(20px);
}
.cta-elegant { background: #E65A48; color: #1d1d1f; }

.example-card:hover .ex-cta { transform: translateZ(40px) scale(1.05); }

/* Responsive */
@media (max-width: 900px) {
    .examples-grid { grid-template-columns: 1fr; }
    .example-card { height: auto; min-height: 380px; }
    .ex-floating-ui { transform: translateZ(0); margin-top: 20px; } /* Simplificar en móvil */
}

/* --- AJUSTES EXTRA SECCIÓN EJEMPLOS --- */

/* Ajuste de altura automática para acomodar el nuevo contenido */
.example-card {
    height: auto !important; /* Permitir crecer */
    min-height: 520px; /* Altura mínima base */
    padding-bottom: 20px;
}

/* Espacio superior extra para las categorías */
.ex-floating-ui.spaced-top {
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Header de la tarjeta (Badge + Live) */
.ex-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ex-live-dot {
    font-size: 0.8rem;
    font-weight: 700;
    color: #4ade80;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blink {
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px #4ade80;
    animation: blinkLive 2s infinite;
}

@keyframes blinkLive { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* --- NUEVO MÓDULO: CAJA DE BLOG --- */
.ex-blog-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
    transform: translateZ(40px); /* Efecto 3D */
    transition: background 0.3s;
}

.ex-blog-box:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

.box-purple {
    background: rgba(29, 29, 31, 0.4);
    border-color: rgba(230, 90, 72, 0.25);
}

.blog-box-header {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-check {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-tags span {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-mono);
}

/* Ajuste Responsive */
@media (max-width: 900px) {
    .example-card { min-height: auto; }
}


/* =============================================
   PAGINAS LEGALES (Aviso Legal, Privacidad, Cookies)
   ============================================= */

.legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 80px;
}

.legal-header {
    margin-bottom: 48px;
}

.legal-header .custom-h2 {
    margin-bottom: 12px;
}

.legal-header .lead {
    color: #6B7280;
    font-size: 1.1rem;
}

.legal-content {
    line-height: 1.8;
    color: #374151;
}

.legal-section {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #E5E7EB;
}

.legal-section:last-of-type {
    border-bottom: none;
}

.legal-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
    margin-top: 0;
}

.legal-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1F2937;
    margin-top: 24px;
    margin-bottom: 12px;
}

.legal-section p {
    margin-bottom: 14px;
    font-size: 0.95rem;
}

.legal-section ul,
.legal-section ol {
    margin: 12px 0 16px 20px;
    padding: 0;
}

.legal-section ul li,
.legal-section ol li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.7;
}

.legal-section a {
    color: #1d1d1f;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.legal-section a:hover {
    color: #2c2c2e;
}

.legal-section code {
    background: #F3F4F6;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #1F2937;
    font-family: var(--font-mono);
}

.legal-section strong {
    color: #111827;
}

/* Tablas legales */
.legal-table-wrapper {
    overflow-x: auto;
    margin: 16px 0 20px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 500px;
}

.legal-table thead {
    background: #F9FAFB;
}

.legal-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #E5E7EB;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.legal-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #F3F4F6;
    color: #4B5563;
    vertical-align: top;
}

.legal-table tbody tr:last-child td {
    border-bottom: none;
}

.legal-table tbody tr:hover {
    background: #FAFAFA;
}

/* Fecha de actualizacion */
.legal-update {
    background: #F9FAFB;
    padding: 16px 20px !important;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    margin-top: 40px;
}

.legal-update p {
    margin: 0;
    font-size: 0.9rem;
    color: #6B7280;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-page {
        padding: 40px 16px 60px;
    }

    .legal-section h2 {
        font-size: 1.2rem;
    }

    .legal-table {
        font-size: 0.82rem;
    }

    .legal-table th,
    .legal-table td {
        padding: 10px 12px;
    }
}


/* =============================================
   BANNER DE COOKIES
   ============================================= */

#cookiesbox.cookiesn {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: auto;
    z-index: 99999;
    background: #1d1d1f;
    color: #E5E5EA !important;
    padding: 24px;
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    gap: 16px;
    animation: cookiesSlideUp 0.4s ease-out;
    font-family: inherit;
}

#cookiesbox.cookiesn p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: #E5E5EA !important;
    background: none !important;
}

#cookiesbox.cookiesn a {
    color: #E65A48 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

#cookiesbox.cookiesn a:hover {
    color: #F08778 !important;
}

#cookiesbox.cookiesn button {
    background: #E65A48 !important;
    color: #1d1d1f !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    width: 100%;
}

#cookiesbox.cookiesn button:hover {
    background: #C94733 !important;
    color: #FFFFFF !important;
}

#cookiesbox.cookies-hidden {
    animation: cookiesSlideDown 0.4s ease-in forwards;
}

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

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

@media (max-width: 600px) {
    #cookiesbox.cookiesn {
        bottom: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
        padding: 20px;
    }
}

/* ============================================================
   IDENTIDAD DE MARCA (icono + logo + portada con IA)
   ============================================================ */
.brandkit-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: #F5F5F7;
    background:
        radial-gradient(circle at 15% 0%, rgba(230, 90, 72, 0.10) 0%, rgba(245, 245, 247, 0) 45%),
        radial-gradient(circle at 85% 100%, rgba(29, 29, 31, 0.07) 0%, rgba(245, 245, 247, 0) 50%),
        linear-gradient(180deg, #FAFAFC 0%, #F0F0F3 100%);
    color: var(--text);
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    border-top: 1px solid rgba(29, 29, 31, 0.07);
    border-bottom: 1px solid rgba(29, 29, 31, 0.07);
}

.bk-glow {
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 620px;
    background: radial-gradient(ellipse at center, rgba(230, 90, 72, 0.16) 0%, rgba(230, 90, 72, 0) 68%);
    z-index: 0;
    pointer-events: none;
    animation: glowPulse 7s infinite alternate;
}

.bk-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(29, 29, 31, 0.075) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 50% 42%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 20%, transparent 78%);
    z-index: 0;
    pointer-events: none;
}

.bk-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Cabecera --- */
.bk-header { text-align: center; max-width: 780px; margin: 0 auto 60px; }

.bk-badge {
    display: inline-block;
    background: rgba(230, 90, 72, 0.13);
    border: 1px solid rgba(230, 90, 72, 0.34);
    color: var(--accent-deep);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 22px;
}
.bk-badge i { margin-right: 7px; }

.bk-title { margin-bottom: 18px; }
.bk-lead { color: var(--text-light); margin: 0; }

/* --- Escenario: navegador + assets --- */
.bk-stage {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 70px;
}

.bk-browser {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(29, 29, 31, 0.16);
}

.bk-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: #F0F0F3;
    border-bottom: 1px solid var(--line-soft);
}
.bk-dot { width: 11px; height: 11px; border-radius: 50%; background: #D2D2D7; flex: 0 0 auto; }
.bk-url {
    margin-left: 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-light);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    padding: 4px 14px;
}
.bk-url i { font-size: 0.65rem; margin-right: 5px; opacity: 0.6; }

/* Cabecera del sitio generado: icono + nombre */
.bk-siteheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: #1d1d1f;
}
.bk-logo { display: flex; align-items: center; gap: 11px; }
.bk-sitename {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.2px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .7s ease .9s, transform .7s ease .9s;
}
.bk-stage.active .bk-sitename { opacity: 1; transform: translateX(0); }

.bk-nav { display: flex; gap: 14px; }
.bk-nav span { width: 40px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); }

/* Emblema SVG con trazo que se dibuja */
.bk-emblem { width: 34px; height: 34px; flex: 0 0 auto; overflow: visible; }
.bk-emblem-lg { width: 92px; height: 92px; }

.bk-emblem-ring {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3.5;
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1) .15s;
}
.bk-emblem-mark {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1) .45s;
}
.bk-stage.active .bk-emblem-ring,
.bk-stage.active .bk-emblem-mark { stroke-dashoffset: 0; }

/* Portada con oscurecido y titular */
.bk-cover { position: relative; height: 168px; overflow: hidden; }
.bk-cover-img {
    position: absolute;
    inset: 0;
    background:
        url('https://directorai.org/wp-content/uploads/dai-cover.webp') center / cover no-repeat,
        radial-gradient(circle at 22% 30%, rgba(230, 90, 72, 0.55) 0%, transparent 52%),
        linear-gradient(125deg, #3a2c22 0%, #6b4a2f 45%, #c8873f 100%);
    transform: scale(1.12);
    transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bk-stage.active .bk-cover-img { transform: scale(1); }
.bk-cover-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); }
.bk-cover-h1 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 24px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.42rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .8s ease 1.15s, transform .8s ease 1.15s;
}
.bk-stage.active .bk-cover-h1 { opacity: 1; transform: translateY(0); }

.bk-body { padding: 22px; display: flex; flex-direction: column; gap: 11px; }
.bk-line { height: 9px; border-radius: 5px; background: var(--line-soft); display: block; }
.bk-line.w70 { width: 70%; }
.bk-line.w90 { width: 90%; }
.bk-line.w50 { width: 50%; }

/* Barrido de "generando" */
.bk-scan {
    position: absolute;
    top: 0;
    left: -55%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    pointer-events: none;
    z-index: 3;
}
.bk-stage.active .bk-scan { animation: bkScan 2.6s cubic-bezier(0.4, 0, 0.2, 1) .3s 2; }

@keyframes bkScan {
    0%   { left: -55%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 108%; opacity: 0; }
}

/* --- Assets generados --- */
.bk-assets { display: flex; flex-direction: column; gap: 22px; }

.bk-asset {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(29, 29, 31, 0.07);
    transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s ease;
}
.bk-asset:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(29, 29, 31, 0.13); }

.bk-asset-preview {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.bk-asset-icon .bk-asset-preview { height: 150px; }
.bk-asset-cover .bk-asset-preview { height: 92px; }

/* Cuadrícula de transparencia */
.bk-checker {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #ECECEF 25%, transparent 25%, transparent 75%, #ECECEF 75%),
        linear-gradient(45deg, #ECECEF 25%, transparent 25%, transparent 75%, #ECECEF 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}

.bk-cover-img-sm { position: absolute; inset: 0; transform: none; }

.bk-asset-meta { display: flex; flex-direction: column; gap: 3px; }
.bk-asset-meta strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--text);
}
.bk-asset-meta span {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-light);
}

/* --- Tarjetas de features --- */
.bk-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 46px;
}

.bk-card {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 30px 26px;
    transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s ease, border-color .45s ease;
}
.bk-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 46px rgba(29, 29, 31, 0.12);
    border-color: rgba(230, 90, 72, 0.4);
}
.bk-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(230, 90, 72, 0.12);
    color: var(--accent-deep);
    font-size: 1.24rem;
    margin-bottom: 18px;
}
.bk-card h3 {
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--text);
}
.bk-card p {
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--text-light);
    margin: 0;
}

.bk-foot {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    color: var(--text-light);
    margin: 0;
}
.bk-foot i { color: var(--accent); margin-right: 7px; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .bk-stage { grid-template-columns: 1fr; }
    .bk-assets { flex-direction: row; }
    .bk-asset { flex: 1; }
    .bk-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .brandkit-section { padding: 72px 0; }
    .bk-header { margin-bottom: 42px; }
    .bk-dots { display: none; }
    .bk-stage { gap: 22px; margin-bottom: 48px; }
    .bk-assets { flex-direction: column; }
    .bk-features { grid-template-columns: 1fr; gap: 18px; }
    .bk-cover { height: 132px; }
    .bk-cover-h1 { font-size: 1.1rem; }
    .bk-sitename { font-size: 1rem; }
    .bk-url { display: none; }
    .bk-nav span { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .bk-glow { animation: none; }
    .bk-stage.active .bk-scan { animation: none; }
    .bk-scan { display: none; }
    .bk-emblem-ring, .bk-emblem-mark { stroke-dashoffset: 0; transition: none; }
    .bk-sitename, .bk-cover-h1 { opacity: 1; transform: none; transition: none; }
    .bk-cover-img { transform: none; transition: none; }
}

/* Banner de cookies: gana al display:block !important de .cookiesblock del
   tema, para que ocultarlo tras aceptar no dependa del orden de los scripts. */
#cookiesbox.cookies-hidden { display: none !important; }

.lang-switch {
    position: relative;
    flex: none;
    margin-left: 22px;
    font-family: var(--font-body);
}
.lang-switch summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .62rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: #fff;
    color: var(--text-light);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ''; }
.lang-switch summary:hover {
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 2px 10px rgba(230, 90, 72, .12);
}
.lang-switch summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.lang-switch summary > svg {
    width: 13px;
    height: 13px;
    transition: transform .3s ease;
}
.lang-switch[open] summary > svg { transform: rotate(180deg); }
.lang-switch[open] summary { border-color: var(--accent); color: var(--text); }
.lang-switch .flag {
    width: 21px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.lang-switch .flag svg {
    width: 100%;
    height: 100%;
    display: block;
}
.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    min-width: 190px;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(29, 29, 31, .14);
    animation: daiLangIn .22s ease both;
}
@keyframes daiLangIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.lang-menu a.lang-opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 9px;
    color: var(--text);
    font-size: .87rem;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.lang-menu a.lang-opt:hover { background: var(--bg); color: var(--accent-deep); }
.lang-menu a.lang-opt.is-active {
    color: var(--accent);
    font-weight: 700;
    background: rgba(230, 90, 72, .07);
}
@media (max-width: 1050px) {
    .site-header-content > .site-logo { order: 0; }
    .site-header-content > .lang-switch { order: 1; }
    .site-header-content > div:not(.site-logo) { order: 2; }
    .lang-switch { margin-left: auto; margin-right: 6px; }
    .lang-switch summary { padding: .45rem .5rem; gap: .35rem; }
    .lang-switch summary b { display: none; }
    .lang-menu { min-width: 175px; max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) {
    .lang-menu { animation: none; }
    .lang-switch summary > svg { transition: none; }
}

.llm-hud {
    margin: 14px 0 12px;
    padding: 10px 12px;
    background: #101012;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #d8d8dc;
    text-align: left;
}
.hud-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hud-label { color: #8b8b92; text-transform: uppercase; letter-spacing: 0.6px; font-size: 0.62rem; }
.hud-value { color: #fff; white-space: nowrap; }
.hud-bar { height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; margin: 8px 0; overflow: hidden; }
.hud-bar-fill {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #E65A48, #f0b849);
    border-radius: 3px;
    transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.llm-card.active .hud-bar-fill { width: 78%; }
.hud-row-bottom { margin-top: 2px; }
.hud-lanes { display: inline-flex; align-items: center; gap: 4px; }
.hud-lane {
    width: 9px; height: 9px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.3s, box-shadow 0.3s;
}
.llm-card.active .hud-lane { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); }
.llm-card.active .hud-lane:nth-child(2) { transition-delay: 0.9s; }
.llm-card.active .hud-lane:nth-child(3) { transition-delay: 1.15s; }
.llm-card.active .hud-lane:nth-child(4) { transition-delay: 1.4s; }
.llm-card.active .hud-lane:nth-child(5) { transition-delay: 1.65s; }
.hud-tokens { color: #4ade80; }
.hud-tokens b { font-weight: 700; font-size: 0.95rem; }


.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-img {
    width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: 10px; display: block;
    transform: scale(1.06);
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.st-img.st-fading { opacity: 0; }
.reveal-scale.active .st-img { transform: scale(1); }
.st-img:hover { transform: scale(1.04); transition-duration: 0.5s; }
.st-caption {
    margin-top: 14px; font-family: var(--font-mono); font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.65); display: flex; align-items: center; gap: 8px;
    padding-right: 150px;
}
.st-caption i { color: #f0b849; }
.st-marquee-block { margin-top: 54px; }
.st-marquee-title {
    text-align: center; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5); margin-bottom: 18px;
}
.st-marquee {
    overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.st-track { display: flex; gap: 12px; width: max-content; animation: st-scroll 30s linear infinite; }
@keyframes st-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.st-chip {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 9px 18px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff; font-size: 0.86rem; font-weight: 600;
    transition: background 0.3s, border-color 0.3s;
}
.st-chip i { color: #E65A48; }
.st-chip:hover { background: rgba(230, 90, 72, 0.22); border-color: rgba(230, 90, 72, 0.5); }

.fv-section { background: #faf9f7; position: relative; overflow: hidden; }
.fv-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(29, 29, 31, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.fv-header { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.fv-header > .fv-badge, .mon-header > .mon-badge {
    display: block; width: fit-content; margin-left: auto; margin-right: auto;
}
.fv-badge, .mon-badge, .rv-badge {
    background: rgba(230, 90, 72, 0.13);
    border: 1px solid rgba(230, 90, 72, 0.34);
    color: var(--accent-deep);
    padding: 6px 16px; border-radius: 20px;
    font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 20px;
}
.fv-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 28px; align-items: stretch; }
.fv-card {
    background: #fff; border: 1px solid #ececec; border-radius: 20px;
    padding: 30px 30px 26px;
    box-shadow: 0 18px 50px rgba(29, 29, 31, 0.07);
    display: flex; flex-direction: column;
}
.fv-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.fv-card-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #E65A48, #C94733);
    color: #fff; font-size: 1.05rem;
}
.fv-card h3 { margin: 0; font-size: 1.28rem; }
.fv-card-desc { color: var(--text-light); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.fv-biz {
    background: #fbfbfa; border: 1px solid #eee; border-radius: 14px;
    padding: 18px; margin-top: 18px;
    flex: 1; display: flex; flex-direction: column;
}
.oc-list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.fv-biz-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.fv-biz-name { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.fv-biz-name i { color: var(--accent-deep); }
.fv-biz-stars { color: #f0b849; font-size: 0.85rem; letter-spacing: 1px; }
.oc-pills { margin-bottom: 12px; }
.oc-pill {
    display: none; align-items: center; gap: 7px;
    font-size: 0.78rem; font-weight: 700;
    padding: 5px 12px; border-radius: 999px;
}
.js-oc.is-open .oc-pill-open { display: inline-flex; background: #d4edda; color: #155724; }
.js-oc.is-closed .oc-pill-closed { display: inline-flex; background: #f8d7da; color: #721c24; }
.oc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: oc-blink 1.4s ease-in-out infinite; }
@keyframes oc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
.oc-list { list-style: none; margin: 0; padding: 0; }
.oc-list li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 5px 8px; border-radius: 6px;
    font-size: 0.84rem; color: var(--text-light);
}
.oc-list li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-list li.oc-today { font-weight: 700; }
.oc-list li.oc-today-open { background: #d4edda; color: #155724; }
.oc-list li.oc-today-closed { background: #f8d7da; color: #721c24; }
.oc-now {
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e5e5e5;
    font-size: 0.78rem; color: var(--text-light);
    font-family: var(--font-mono);
}
.oc-now b { color: var(--text); font-variant-numeric: tabular-nums; }

.fv-radar-wrap { display: flex; gap: 22px; align-items: stretch; margin-top: 18px; flex: 1; }
.fv-radar { align-self: center; }
.fv-rel-cols { justify-content: space-between; }
.fv-radar {
    position: relative; width: 150px; height: 150px; flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #10231c 0%, #0b1512 100%);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.25), 0 14px 34px rgba(11, 21, 18, 0.35);
}
.radar-ring { position: absolute; border: 1px solid rgba(74, 222, 128, 0.22); border-radius: 50%; }
.radar-ring.rr1 { inset: 18%; }
.radar-ring.rr2 { inset: 33%; }
.radar-ring.rr3 { inset: 3%; }
.radar-sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(74, 222, 128, 0.5), rgba(74, 222, 128, 0.08) 22%, transparent 30%);
    animation: radar-turn 3.6s linear infinite;
}
@keyframes radar-turn {
    to { transform: rotate(360deg); }
}
.radar-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: #E65A48; color: #fff; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px rgba(230, 90, 72, 0.25), 0 6px 14px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
.radar-dot {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.9);
}
.radar-dot::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px solid rgba(74, 222, 128, 0.7);
    animation: radar-ping 3.6s ease-out infinite;
}
.radar-dot.rd1 { top: 30%; left: 61%; }
.radar-dot.rd2 { top: 62%; left: 28%; }
.radar-dot.rd2::after { animation-delay: 0.9s; }
.radar-dot.rd3 { top: 20%; left: 33%; }
.radar-dot.rd3::after { animation-delay: 1.8s; }
.radar-dot.rd4 { top: 68%; left: 66%; }
.radar-dot.rd4::after { animation-delay: 2.7s; }
@keyframes radar-ping {
    0% { transform: scale(0.4); opacity: 1; }
    70%, 100% { transform: scale(2.4); opacity: 0; }
}
.fv-rel-cols { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.fv-rel-group {
    background: #fbfbfa; border: 1px solid #eee; border-radius: 12px;
    padding: 12px 14px;
}
.fv-rel-main {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.9rem; font-weight: 700;
}
.fv-rel-main i { color: var(--accent-deep); width: 16px; text-align: center; }
.fv-rel-main b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-rel-cat {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-light); background: #f0f0ef;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.fv-rel-items {
    margin: 9px 0 0 7px; padding-left: 13px;
    border-left: 2px solid #eee;
    display: flex; flex-direction: column; gap: 7px;
}
.fv-rel-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #eee; border-radius: 9px;
    padding: 7px 11px; font-size: 0.82rem; font-weight: 600;
    opacity: 0; transform: translateX(18px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fv-rel-item::before {
    content: ""; position: absolute; left: -15px; top: 50%;
    width: 10px; height: 2px; background: #eee;
}
.reveal-right.active .fv-rel-item { opacity: 1; transform: translateX(0); }
.reveal-right.active .ri1 { transition-delay: 0.25s; }
.reveal-right.active .ri2 { transition-delay: 0.45s; }
.reveal-right.active .ri3 { transition-delay: 0.65s; }
.reveal-right.active .ri4 { transition-delay: 0.85s; }
.fv-rel-item i { color: var(--accent-deep); width: 16px; text-align: center; }
.fv-rel-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-rel-item b {
    font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem;
    color: #155724; background: #d4edda; padding: 2px 8px; border-radius: 999px;
    white-space: nowrap;
}

.rv-section { background: linear-gradient(180deg, #fdf3f1 0%, #faf9f7 100%); padding-top: 70px; padding-bottom: 70px; overflow: hidden; }
.rv-flex { display: flex; align-items: center; gap: 56px; }
.rv-copy { flex: 1.1; }
.rv-copy > .rv-badge { display: block; width: fit-content; }
.rv-title { margin-bottom: 14px; }
.rv-lead { margin: 0; }
.rv-demo { flex: 1; display: flex; justify-content: center; }
.rv-flip { perspective: 1200px; width: 100%; max-width: 420px; }
.rv-inner {
    position: relative; width: 100%; min-height: 235px;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.rv-flipped .rv-inner { transform: rotateY(180deg); }
.rv-face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: #fff; border: 1px solid #eee; border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 22px 55px rgba(29, 29, 31, 0.12);
    display: flex; flex-direction: column;
}
.rv-back { transform: rotateY(180deg); background: #fffdf5; }
.rv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rv-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #E65A48, #C94733);
    color: #fff; font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.rv-who { display: flex; flex-direction: column; line-height: 1.25; }
.rv-who b { font-size: 0.92rem; }
.rv-stars { color: #f0b849; font-size: 0.78rem; letter-spacing: 1.5px; }
.rv-g { margin-left: auto; font-size: 1.15rem; color: #b9b9c0; }
.rv-text { font-size: 0.95rem; line-height: 1.55; color: var(--text); margin: 0 0 16px; flex: 1; }
.rv-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rv-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 700;
    background: rgba(230, 90, 72, 0.1); color: var(--accent-deep);
    padding: 4px 11px; border-radius: 999px;
}
.rv-chip img { border-radius: 2px; }
.rv-chip-orig { background: #f2f2f3; color: var(--text-light); }
.rv-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 0.8rem; font-weight: 700; color: var(--accent-deep);
    text-decoration: underline; text-underline-offset: 3px;
    font-family: inherit;
}
.rv-link:hover { color: #C94733; }

.mon-section { background: #0f0f10; color: #fff; position: relative; overflow: hidden; }
.mon-grid-lines {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
}
.mon-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.mon-glow-gold { width: 480px; height: 480px; background: rgba(240, 184, 73, 0.14); top: -140px; right: -100px; }
.mon-glow-accent { width: 420px; height: 420px; background: rgba(230, 90, 72, 0.14); bottom: -120px; left: -100px; }
.mon-header { text-align: center; max-width: 780px; margin: 0 auto 60px; }
.mon-badge { background: rgba(240, 184, 73, 0.12); border-color: rgba(240, 184, 73, 0.4); color: #f0b849; backdrop-filter: blur(5px); }
.mon-title { color: #fff; }
.mon-gold {
    background: linear-gradient(115deg, #f0b849, #ffe6a8 55%, #f0b849);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; padding-bottom: 0.12em;
}
.mon-lead { color: rgba(255, 255, 255, 0.62); }
.mon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mon-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px; padding: 30px 28px 26px;
    backdrop-filter: blur(6px);
    display: flex; flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}
.mon-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230, 90, 72, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(230, 90, 72, 0.2);
}
.mon-icon {
    width: 48px; height: 48px; border-radius: 13px;
    background: linear-gradient(135deg, rgba(230, 90, 72, 0.24), rgba(240, 184, 73, 0.16));
    border: 1px solid rgba(230, 90, 72, 0.4);
    color: #E65A48; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.mon-card h3 { color: #fff; font-size: 1.22rem; margin: 0 0 10px; }
.mon-card p { color: rgba(255, 255, 255, 0.6); font-size: 0.92rem; line-height: 1.6; margin: 0 0 22px; }
.mon-demo {
    position: relative; margin-top: auto; height: 128px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px; padding: 14px 16px; overflow: hidden;
}
.ad-line { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); margin-bottom: 8px; }
.ad-line.w50 { width: 50%; }
.ad-line.w60 { width: 60%; }
.ad-line.w70 { width: 70%; }
.ad-line.w80 { width: 80%; }
.ad-line.w90 { width: 90%; }
.ad-slot {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 30px; margin-bottom: 8px; border-radius: 7px;
    background: rgba(240, 184, 73, 0.14);
    border: 1px dashed rgba(240, 184, 73, 0.55);
    color: #f0b849; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 2px;
    overflow: hidden;
}
.ad-slot::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 230, 168, 0.35), transparent);
    animation: ad-shine 2.6s ease-in-out infinite;
}
@keyframes ad-shine {
    0% { left: -60%; }
    60%, 100% { left: 120%; }
}
.mon-chip {
    position: absolute; right: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #f0b849; color: #1d1d1f;
    font-size: 0.72rem; font-weight: 800;
    padding: 5px 11px; border-radius: 999px;
    box-shadow: 0 8px 20px rgba(240, 184, 73, 0.35);
    opacity: 0; transform: translateY(10px) scale(0.9);
    transition: opacity 0.5s ease 1s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s;
}
.mon-card.active .mon-chip { opacity: 1; transform: translateY(0) scale(1); }
.feat-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px; padding: 7px 10px; margin-bottom: 7px;
}
.feat-avatar {
    width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7);
    font-size: 0.62rem; display: flex; align-items: center; justify-content: center;
}
.feat-bars { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.feat-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.feat-bar.w35 { width: 35%; }
.feat-bar.w40 { width: 40%; }
.feat-bar.w45 { width: 45%; }
.feat-bar.w60 { width: 60%; }
.feat-bar.w70 { width: 70%; }
.feat-bar.w75 { width: 75%; }
.feat-row-star { position: relative; border-color: transparent; }
.mon-card.active .feat-row-star { animation: feat-glow 0.7s ease-out 0.9s forwards; }
@keyframes feat-glow {
    0% { border-color: transparent; box-shadow: none; }
    100% { border-color: rgba(240, 184, 73, 0.75); box-shadow: 0 0 18px rgba(240, 184, 73, 0.28), inset 0 0 12px rgba(240, 184, 73, 0.1); }
}
.feat-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f0b849; color: #1d1d1f;
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 3px 8px; border-radius: 999px;
    opacity: 0; transform: scale(2.2) rotate(-14deg);
}
.mon-card.active .feat-badge { animation: feat-stamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards; }
@keyframes feat-stamp {
    0% { opacity: 0; transform: scale(2.2) rotate(-14deg); }
    60% { opacity: 1; transform: scale(0.92) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.mon-demo-feat .mon-chip { transition-delay: 1.5s; }
.mon-demo-leads { display: flex; align-items: center; gap: 12px; }
.lead-form {
    width: 40%; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px; padding: 10px;
}
.lead-form .ad-line { height: 6px; margin-bottom: 6px; }
.lead-btn { display: block; height: 12px; width: 55%; border-radius: 5px; background: rgba(230, 90, 72, 0.8); }
.lead-path { flex: 1; border-top: 2px dashed rgba(255, 255, 255, 0.2); position: relative; }
.lead-plane {
    position: absolute; left: 42%; top: 46%;
    color: #f0b849; font-size: 1rem;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(240, 184, 73, 0.6));
}
.mon-card.active .lead-plane { animation: lead-fly 2.8s ease-in-out 0.6s infinite; }
@keyframes lead-fly {
    0% { opacity: 0; transform: translate(0, 6px) rotate(8deg); }
    12% { opacity: 1; }
    46% { opacity: 1; transform: translate(120px, -14px) rotate(14deg); }
    58% { opacity: 0; transform: translate(150px, -18px) rotate(16deg); }
    100% { opacity: 0; transform: translate(0, 6px) rotate(8deg); }
}
.lead-dest {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: rgba(240, 184, 73, 0.14);
    border: 1px solid rgba(240, 184, 73, 0.4);
    color: #f0b849; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.mon-demo-leads .mon-chip { transition-delay: 1.8s; }
.mon-cta { text-align: center; margin-top: 58px; }
.mon-cta-line { font-size: 1.18rem; color: rgba(255, 255, 255, 0.85); font-weight: 600; margin: 0 0 22px; }
.mon-btn {
    background: linear-gradient(115deg, #f0b849, #e8a63a);
    color: #1d1d1f; font-weight: 800;
    padding: 15px 34px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 0 14px 38px rgba(240, 184, 73, 0.3);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.mon-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(240, 184, 73, 0.42); color: #1d1d1f; }

@media (max-width: 900px) {
    .fv-grid { grid-template-columns: 1fr; gap: 20px; }
    .fv-header { margin-bottom: 38px; }
    .fv-radar-wrap { flex-direction: column; gap: 18px; }
    .fv-radar { width: 170px; height: 170px; }
    .fv-rel-list { width: 100%; }
    .rv-flex { flex-direction: column; gap: 30px; }
    .rv-demo { width: 100%; }
    .rv-flip { max-width: 460px; }
    .mon-grid { grid-template-columns: 1fr; gap: 18px; }
    .mon-header { margin-bottom: 40px; }
    .mon-cta { margin-top: 40px; }
    .st-marquee-block { margin-top: 40px; }
}
@media (max-width: 640px) {
    .fv-card { padding: 22px 18px 18px; }
    .fv-card h3 { font-size: 1.1rem; }
    .oc-list li { font-size: 0.78rem; }
    .rv-face { padding: 18px 16px; }
    .rv-inner { min-height: 285px; }
    .mon-card { padding: 24px 20px 20px; }
    .mon-cta-line { font-size: 1rem; }
    .st-caption { font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
    .st-track, .radar-sweep, .radar-dot::after, .oc-dot, .ad-slot::after, .lead-plane, .st-img { animation: none !important; transition: none !important; }
    .rv-inner { transition: none; }
}

.scr-demo {
    background: #101012;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 26px 24px 20px;
    display: grid;
    grid-template-columns: 84px 1fr 1.35fr;
    gap: 16px;
    align-items: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.scr-source { position: relative; }
.scr-map {
    width: 84px; height: 84px; border-radius: 16px;
    background: linear-gradient(135deg, #17372b, #0e2018);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80; font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
}
.scr-pin {
    position: absolute; top: -10px; right: -8px;
    color: #E65A48; font-size: 1.25rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    animation: scr-bounce 2.2s ease-in-out infinite;
}
@keyframes scr-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.scr-beam { position: relative; height: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 1px; }
.scr-packet {
    position: absolute; top: -3px; left: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: #E65A48;
    box-shadow: 0 0 10px rgba(230, 90, 72, 0.9);
    animation: scr-travel 2.1s linear infinite;
}
.scr-packet.k2 { animation-delay: 0.7s; }
.scr-packet.k3 { animation-delay: 1.4s; }
@keyframes scr-travel {
    0% { left: -4%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.scr-result { display: flex; flex-direction: column; gap: 8px; }
.scr-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px; padding: 8px 11px;
    opacity: 0; transform: translateX(14px);
    animation: scr-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.scr-row i:first-child { color: #E65A48; width: 15px; text-align: center; font-size: 0.8rem; }
.scr-row.sr1 { animation-delay: 0.3s; }
.scr-row.sr2 { animation-delay: 0.75s; }
.scr-row.sr3 { animation-delay: 1.2s; }
.scr-row.sr4 { animation-delay: 1.65s; }
.scr-row.sr5 { animation-delay: 2.1s; }
@keyframes scr-in {
    to { opacity: 1; transform: translateX(0); }
}
.scr-fill { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.scr-fill.f44 { width: 44%; }
.scr-fill.f50 { width: 50%; }
.scr-fill.f56 { width: 56%; }
.scr-fill.f62 { width: 62%; }
.scr-fill.f70 { width: 70%; }
.scr-check {
    margin-left: auto;
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: rgba(74, 222, 128, 0.15); color: #4ade80;
    font-size: 0.6rem;
    display: flex; align-items: center; justify-content: center;
    transform: scale(0);
    animation: scr-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.scr-row.sr1 .scr-check { animation-delay: 0.65s; }
.scr-row.sr2 .scr-check { animation-delay: 1.1s; }
.scr-row.sr3 .scr-check { animation-delay: 1.55s; }
.scr-row.sr4 .scr-check { animation-delay: 2s; }
.scr-row.sr5 .scr-check { animation-delay: 2.45s; }
@keyframes scr-pop {
    to { transform: scale(1); }
}
.scr-counter {
    grid-column: 1 / -1;
    margin-top: 4px; padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    font-family: var(--font-mono); font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.6);
}
.scr-counter b { color: #4ade80; font-size: 1rem; margin-right: 4px; }

.fv-pop {
    background: #fbfbfa; border: 1px solid #eee; border-radius: 14px;
    padding: 18px; margin-top: 18px;
    flex: 1; display: flex; flex-direction: column;
}
.fv-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.fv-pop-now {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 800;
    background: rgba(230, 90, 72, 0.1); color: var(--accent-deep);
    padding: 4px 11px; border-radius: 999px;
}
.fv-pop-bars { display: flex; align-items: flex-end; gap: 5px; flex: 1; min-height: 96px; }
.pop-bar {
    flex: 1; height: 6%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #f3b4aa, #eda092);
    transition: height 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--pd, 0s);
}
.fv-card.active .pop-bar { height: var(--h, 40%); }
.pop-bar.pop-now {
    background: linear-gradient(180deg, #E65A48, #C94733);
    box-shadow: 0 6px 16px rgba(230, 90, 72, 0.35);
    position: relative;
}
.pop-bar.pop-now::after {
    content: ""; position: absolute; top: -7px; left: 50%;
    width: 7px; height: 7px; border-radius: 50%;
    transform: translateX(-50%);
    background: var(--accent-deep);
    animation: oc-blink 1.4s ease-in-out infinite;
}
.fv-pop-axis {
    display: flex; justify-content: space-between;
    margin-top: 8px;
    font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-light);
}
.fv-card .rv-flip { max-width: 100%; margin-top: auto; }
.fv-card .rv-inner { min-height: 218px; }
.fv-card .rv-face { padding: 18px 20px; box-shadow: 0 14px 36px rgba(29, 29, 31, 0.09); }

.mon-admin { margin-top: 54px; display: flex; flex-direction: column; align-items: center; }
.mon-admin-window {
    width: 100%; max-width: 660px;
    background: #17171a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.mon-admin-titlebar {
    display: flex; gap: 6px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mon-admin-titlebar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.mon-admin-titlebar span:first-child { background: rgba(230, 90, 72, 0.7); }
.mon-admin-body { display: flex; min-height: 168px; }
.mon-admin-side {
    width: 168px; flex-shrink: 0;
    background: rgba(0, 0, 0, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px 10px;
    display: flex; flex-direction: column; gap: 7px;
}
.mas-logo {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(135deg, #E65A48, #C94733);
    color: #fff; font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.mas-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.74rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    padding: 7px 9px; border-radius: 8px;
}
.mas-item i { width: 14px; text-align: center; font-size: 0.7rem; }
.mas-item.mas-active { background: rgba(230, 90, 72, 0.14); color: #fff; }
.mas-item.mas-active i { color: #E65A48; }
.mas-badge {
    margin-left: auto;
    min-width: 17px; height: 17px; border-radius: 999px;
    background: #E65A48; color: #fff;
    font-size: 0.62rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    animation: mas-pulse 1.6s ease-in-out infinite;
}
@keyframes mas-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 90, 72, 0.5); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(230, 90, 72, 0); }
}
.mas-ghost .mas-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); }
.mon-admin-main { flex: 1; padding: 16px 18px; position: relative; }
.mar-head {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}
.mar-row {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 12px 14px;
    opacity: 0; transform: translateY(10px);
    animation: mar-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards, mar-approve 0.01s linear 4.6s forwards;
}
@keyframes mar-enter {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes mar-approve {
    to { border-color: rgba(74, 222, 128, 0.55); background: rgba(74, 222, 128, 0.08); }
}
.mar-avatar {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(230, 90, 72, 0.15); color: #E65A48;
    display: flex; align-items: center; justify-content: center;
}
.mar-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mar-info b { color: #fff; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mar-plan { font-size: 0.7rem; color: #f0b849; display: inline-flex; align-items: center; gap: 5px; }
.mar-actions { margin-left: auto; display: flex; gap: 8px; animation: mar-hide 0.3s ease 4.6s forwards; }
@keyframes mar-hide {
    to { opacity: 0; visibility: hidden; }
}
.mar-btn {
    font-size: 0.72rem; font-weight: 700;
    padding: 6px 13px; border-radius: 8px;
    white-space: nowrap;
}
.mar-reject { color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); }
.mar-accept { background: #E65A48; color: #fff; animation: mar-click 0.35s ease 4.25s; }
@keyframes mar-click {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.88); box-shadow: 0 0 0 8px rgba(230, 90, 72, 0.25); }
}
.mar-done {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%) scale(0);
    display: inline-flex; align-items: center; gap: 6px;
    color: #4ade80; font-size: 0.78rem; font-weight: 800;
    animation: mar-done-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 4.85s forwards;
}
@keyframes mar-done-pop {
    to { transform: translateY(-50%) scale(1); }
}
.mar-cursor {
    position: absolute;
    right: 116px; bottom: -14px;
    color: #fff; font-size: 1rem;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
    opacity: 0;
    animation: mar-cursor-go 2.2s ease-in-out 2.4s forwards;
}
@keyframes mar-cursor-go {
    0% { opacity: 0; transform: translate(30px, 34px); }
    25% { opacity: 1; }
    80% { opacity: 1; transform: translate(0, 0); }
    88% { transform: translate(0, 0) scale(0.85); }
    100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
.mon-admin-caption {
    margin: 18px 0 0;
    font-size: 0.92rem; color: rgba(255, 255, 255, 0.55);
    text-align: center;
}
.mon-chip-ads { background: #E65A48; color: #fff; box-shadow: 0 8px 20px rgba(230, 90, 72, 0.35); }
.ads-bar { display: flex; gap: 5px; margin-bottom: 10px; }
.ads-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.ad-line-accent { background: rgba(230, 90, 72, 0.55); }

@media (max-width: 900px) {
    .scr-demo { grid-template-columns: 64px 1fr; }
    .scr-map { width: 64px; height: 64px; font-size: 1.2rem; }
    .scr-beam { display: none; }
    .scr-result { grid-column: 1 / -1; }
    .mon-admin-side { width: 52px; padding: 12px 8px; }
    .mas-item { justify-content: center; padding: 7px 4px; }
    .mas-item.mas-active { position: relative; }
    .mas-item span:not(.mas-bar), .mas-item b { display: none; }
    .mas-ghost .mas-bar { display: none; }
    .mas-active i { margin: 0; }
    .st-caption { padding-right: 130px; }
}
@media (max-width: 640px) {
    .mar-actions { position: static; }
    .mar-row { flex-wrap: wrap; }
    .mar-done { right: 10px; }
    .mar-cursor { right: 70px; }
    .fv-pop-bars { height: 74px; }
    .st-caption { padding-right: 0; margin-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
    .scr-packet, .scr-pin, .scr-row, .scr-check, .mas-badge, .mar-row, .mar-actions, .mar-accept, .mar-done, .mar-cursor, .pop-bar.pop-now::after { animation: none !important; }
    .scr-row, .scr-check, .mar-row { opacity: 1; transform: none; }
    .mar-done { transform: translateY(-50%) scale(1); }
}

.mode-panel .mode-title .mode-blog-word {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: none;
    color: var(--accent-deep);
}

.llm-card { position: relative; }
.llm-reco {
    position: absolute; top: 12px; right: 12px;
    font-size: 0.6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--accent-deep);
    background: rgba(230, 90, 72, 0.1);
    border: 1px solid rgba(230, 90, 72, 0.25);
    padding: 3px 8px; border-radius: 999px;
}
.st-cost {
    margin-top: 5px;
    font-family: var(--font-mono); font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; gap: 8px;
}
@media (max-width: 900px) {
    .fv-rel-cols { width: 100%; }
}
@media (max-width: 640px) {
    .st-cost { margin-bottom: 90px; }
    .st-caption { margin-bottom: 0; }
}

.fv-pop-days { display: flex; gap: 5px; margin-bottom: 14px; }
.pop-day {
    flex: 1; min-width: 0;
    border: 1px solid #eee; background: #fff;
    border-radius: 8px; padding: 6px 0;
    font-family: inherit; font-size: 0.72rem; font-weight: 700;
    color: var(--text-light); cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.pop-day:hover { border-color: rgba(230, 90, 72, 0.4); color: var(--accent-deep); }
.pop-day-on {
    background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
    box-shadow: 0 6px 14px rgba(230, 90, 72, 0.25);
}
.fv-pop-insights { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pop-ins {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; color: var(--text-light);
    background: #fff; border: 1px solid #eee;
    padding: 5px 10px; border-radius: 999px;
}
.pop-ins i { color: var(--accent-deep); font-size: 0.68rem; }
.pop-ins b { color: var(--text); font-variant-numeric: tabular-nums; }
.js-pop:not(.pop-es-hoy) .fv-pop-now { display: none; }
.rv-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; flex: 1; width: 100%; }
.rv-stack > .rv-flip { flex: 1; display: flex; }
.rv-stack > .rv-flip > .rv-inner { flex: 1; }
.fv-card .rv-stack .rv-flip { margin-top: 0; }
.fv-card .rv-stack .rv-inner { min-height: 186px; }
.rv-avatar-2 { background: linear-gradient(135deg, #3a6ea5, #2c5580); }
.reveal-right.active .ri5 { transition-delay: 1.05s; }
.reveal-right.active .ri6 { transition-delay: 1.25s; }
@media (max-width: 900px) {
    .fv-card .rv-stack .rv-inner { min-height: 214px; }
}
@media (max-width: 640px) {
    .pop-day { font-size: 0.66rem; }
    .fv-card .rv-stack .rv-inner { min-height: 240px; }
}

.engine-col .engine-feat-card { min-height: 0; height: 100%; }
@media (max-width: 768px) {
    .engine-col .engine-feat-card { min-height: 0; }
}

.cf-hero {
    position: relative;
    overflow: hidden;
    background: #faf9f7;
    padding: 90px 0 70px;
}
.cf-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.cf-glow-a { width: 440px; height: 440px; background: rgba(230, 90, 72, 0.12); top: -140px; right: -120px; }
.cf-glow-b { width: 380px; height: 380px; background: rgba(240, 184, 73, 0.1); bottom: -140px; left: -110px; }
.cf-hero-head { max-width: 780px; margin: 0 auto; }
.cf-hero-head > .fv-badge { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.cf-hero-lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.cf-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cf-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #ececec;
    padding: 8px 16px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 700; color: var(--text);
    box-shadow: 0 8px 22px rgba(29, 29, 31, 0.06);
}
.cf-chip i { color: var(--accent-deep); }
.cf-nav {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
    margin-top: 40px;
    height: auto;
}
.cf-nav-item {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid #ececec;
    padding: 9px 16px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 700; color: var(--text);
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s;
}
.cf-nav-item b {
    font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem;
    color: var(--accent-deep);
}
.cf-nav-item:hover {
    transform: translateY(-2px);
    border-color: rgba(230, 90, 72, 0.45);
    box-shadow: 0 10px 24px rgba(230, 90, 72, 0.12);
    color: var(--text);
}
.cf-nav-ico { display: none; }
@media (min-width: 981px) {
    .cf-nav {
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px;
        max-width: 1080px; margin: 50px auto 0; position: relative;
    }
    .cf-nav::before {
        content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 2px;
        background: repeating-linear-gradient(90deg, rgba(230, 90, 72, 0.45) 0 8px, transparent 8px 16px);
    }
    .cf-nav-item {
        position: relative; flex-direction: column; gap: 10px;
        padding: 18px 10px 16px; border-radius: 18px; text-align: center;
        box-shadow: 0 10px 26px rgba(29, 29, 31, 0.05);
    }
    .cf-nav-ico {
        display: flex; align-items: center; justify-content: center;
        width: 56px; height: 56px; border-radius: 16px;
        background: linear-gradient(135deg, #E65A48, #C94733);
        color: #fff; font-size: 1.3rem;
        box-shadow: 0 12px 26px rgba(230, 90, 72, 0.28);
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .cf-nav-item:hover .cf-nav-ico { transform: scale(1.08) rotate(-4deg); }
    .cf-nav-item span { font-size: 0.9rem; line-height: 1.25; }
}

.cf-steps { background: #fff; padding: 80px 0 90px; }
.cf-steps-inner { max-width: 900px; display: flex; flex-direction: column; gap: 0; }
.cf-step { display: grid; grid-template-columns: 64px 1fr; gap: 26px; }
.cf-step-rail { display: flex; flex-direction: column; align-items: center; }
.cf-step-num {
    width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #E65A48, #C94733);
    color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
    box-shadow: 0 12px 26px rgba(230, 90, 72, 0.3);
    transform: scale(0.6); opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.4s ease 0.1s;
}
.cf-step.active .cf-step-num { transform: scale(1); opacity: 1; }
.cf-step-line {
    flex: 1; width: 2px; margin: 10px 0;
    background: linear-gradient(180deg, rgba(230, 90, 72, 0.45), rgba(230, 90, 72, 0.08));
    transform: scaleY(0); transform-origin: top;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.cf-step.active .cf-step-line { transform: scaleY(1); }
.cf-step-line-last { background: linear-gradient(180deg, rgba(230, 90, 72, 0.35), transparent); }
.cf-step-card {
    background: #fff; border: 1px solid #ececec; border-radius: 20px;
    padding: 34px 36px;
    box-shadow: 0 18px 50px rgba(29, 29, 31, 0.07);
    margin-bottom: 34px;
    min-width: 0;
}
.cf-step-title { font-size: 1.55rem; margin: 4px 0 12px; }
.cf-step-lead { color: var(--text-light); font-size: 0.98rem; line-height: 1.6; margin: 0 0 24px; }
.cf-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center; margin-bottom: 24px; }
.cf-split-txt { min-width: 0; }
.cf-split-visual { min-width: 0; }

.cf-install {
    background: #101012; border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; padding: 18px;
    position: relative;
}
.cf-install-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cf-install-ic {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #E65A48, #C94733);
    color: #fff; display: flex; align-items: center; justify-content: center;
}
.cf-install-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cf-os {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75); font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
}
.cf-install-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.cf-install-bar span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #E65A48, #f0b849);
    border-radius: 4px;
}
.cf-step.active .cf-install-bar span { animation: cf-fill 4.5s ease-in-out infinite; }
@keyframes cf-fill {
    0% { width: 0; }
    55%, 78% { width: 100%; }
    92%, 100% { width: 100%; opacity: 0; }
}
.cf-install-check {
    position: absolute; right: 14px; bottom: 12px;
    color: #4ade80; font-size: 1.15rem;
    opacity: 0; transform: scale(0.4);
}
.cf-step.active .cf-install-check { animation: cf-check-pop 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes cf-check-pop {
    0%, 54% { opacity: 0; transform: scale(0.4); }
    62%, 88% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(0.4); }
}

.cf-opts { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }
.cf-opt {
    position: relative;
    background: #fbfbfa; border: 1px solid #eee; border-radius: 16px;
    padding: 22px;
}
.cf-opt-reco { background: #fff; border-color: rgba(230, 90, 72, 0.35); box-shadow: 0 14px 36px rgba(230, 90, 72, 0.08); }
.cf-opt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cf-opt-head i { color: var(--accent-deep); }
.cf-opt-head h3 { margin: 0; font-size: 1.05rem; }
.cf-opt p { color: var(--text-light); font-size: 0.88rem; line-height: 1.55; margin: 0 0 14px; }
.cf-key {
    display: flex; align-items: center; gap: 9px;
    background: #101012; border-radius: 10px;
    padding: 10px 12px;
    font-family: var(--font-mono); font-size: 0.74rem; color: #d8d8dc;
}
.cf-key i { color: #f0b849; font-size: 0.7rem; }
.cf-key-mask { flex: 1; letter-spacing: 1px; overflow: hidden; white-space: nowrap; }
.cf-key-ok {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: rgba(74, 222, 128, 0.15); color: #4ade80; font-size: 0.6rem;
    display: flex; align-items: center; justify-content: center;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s;
}
.cf-step.active .cf-key-ok { transform: scale(1); }
.cf-step.active .cf-opt .hud-bar-fill { width: 78%; }
.cf-step.active .cf-opt .hud-lane { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); }
.cf-step.active .cf-opt .hud-lane:nth-child(2) { transition-delay: 0.9s; }
.cf-step.active .cf-opt .hud-lane:nth-child(3) { transition-delay: 1.15s; }
.cf-step.active .cf-opt .hud-lane:nth-child(4) { transition-delay: 1.4s; }
.cf-step.active .cf-opt .hud-lane:nth-child(5) { transition-delay: 1.65s; }

.cf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cf-mode {
    background: #fbfbfa; border: 1px solid #eee; border-radius: 16px;
    padding: 22px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
}
.cf-mode:hover { transform: translateY(-4px); border-color: rgba(230, 90, 72, 0.35); box-shadow: 0 16px 38px rgba(29, 29, 31, 0.08); }
.cf-mode-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cf-mode-head i { color: var(--accent-deep); }
.cf-mode-head h3 { margin: 0; font-size: 1.05rem; }
.cf-mode p { color: var(--text-light); font-size: 0.88rem; line-height: 1.55; margin: 0 0 14px; }
.cf-code { margin: 0; }
.cf-code code {
    opacity: 0; transform: translateX(-8px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-step.active .cf-code code:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.3s; }
.cf-step.active .cf-code code:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.5s; }
.cf-step.active .cf-code code:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.7s; }

.cf-phases {
    background: #101012; border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; padding: 20px;
}
.cf-phase {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px; padding: 11px 14px; margin-bottom: 9px;
    color: #e8e8ec; font-size: 0.88rem; font-weight: 600;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-step.active .cf-phase { opacity: 1; transform: none; }
.cf-step.active .cp1 { transition-delay: 0.25s; }
.cf-step.active .cp2 { transition-delay: 0.55s; }
.cf-step.active .cp3 { transition-delay: 0.85s; }
.cf-phase-ic { color: var(--accent-deep); width: 18px; text-align: center; }
.cf-phase-txt { flex: 1; min-width: 0; }
.cf-phase-check {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: rgba(74, 222, 128, 0.15); color: #4ade80; font-size: 0.62rem;
    display: flex; align-items: center; justify-content: center;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cf-step.active .cp1 .cf-phase-check { transform: scale(1); transition-delay: 0.8s; }
.cf-step.active .cp2 .cf-phase-check { transform: scale(1); transition-delay: 1.25s; }
.cf-step.active .cp3 .cf-phase-check { transform: scale(1); transition-delay: 1.7s; }
.cf-progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: 14px 0 12px; }
.cf-progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #E65A48, #f0b849);
    border-radius: 3px;
    transition: width 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.cf-step.active .cf-progress span { width: 100%; }
.cf-counter { font-family: var(--font-mono); font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); }
.cf-counter b { color: #4ade80; font-size: 1rem; margin-right: 4px; }

.cf-pub {
    display: flex; align-items: center; gap: 14px;
    background: #101012; border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; padding: 22px 20px;
    position: relative;
    margin-bottom: 20px;
}
.cf-pub-node {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px; padding: 12px 14px;
    width: 34%;
}
.cf-pub-ic {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(230, 90, 72, 0.16); color: #E65A48;
    display: flex; align-items: center; justify-content: center;
}
.cf-pub-wp .cf-pub-ic { background: rgba(74, 222, 128, 0.13); color: #4ade80; }
.cf-pub-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-pub-path { flex: 1; border-top: 2px dashed rgba(255, 255, 255, 0.2); }
.cf-plane {
    position: absolute; left: 38%; top: 42%;
    color: #f0b849; font-size: 1rem; opacity: 0;
    filter: drop-shadow(0 0 8px rgba(240, 184, 73, 0.6));
}
.cf-step.active .cf-plane { animation: lead-fly 2.8s ease-in-out 0.6s infinite; }
.cf-pub-chip {
    position: absolute; right: 16px; bottom: -12px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #4ade80; color: #0f2417;
    font-size: 0.72rem; font-weight: 800;
    padding: 5px 12px; border-radius: 999px;
    box-shadow: 0 10px 24px rgba(74, 222, 128, 0.35);
    opacity: 0; transform: translateY(8px) scale(0.9);
    transition: opacity 0.5s ease 1.4s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s;
}
.cf-step.active .cf-pub-chip { opacity: 1; transform: none; }

.cf-manual { border: 1px solid #ececec; border-radius: 14px; background: #fbfbfa; }
.cf-manual summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    padding: 15px 18px;
    font-weight: 700; font-size: 0.92rem; color: var(--text);
}
.cf-manual summary::-webkit-details-marker { display: none; }
.cf-manual summary > i:first-child { color: var(--accent-deep); }
.cf-manual-arrow { margin-left: auto; font-size: 0.72rem; color: var(--text-light); transition: transform 0.3s ease; }
.cf-manual[open] .cf-manual-arrow { transform: rotate(180deg); }
.cf-manual-body { padding: 2px 20px 18px; }
.cf-manual-body > p { color: var(--text-light); font-size: 0.9rem; margin: 0 0 12px; }
.cf-manual .import-steps { margin: 0; }

.cf-cta {
    position: relative; overflow: hidden;
    background: #0f0f10; color: #fff;
    padding: 90px 0;
}
.cf-cta-title { color: #fff; }
.cf-cta-lead { color: rgba(255, 255, 255, 0.62); max-width: 640px; margin: 0 auto; }
.cf-cta-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; }
.cf-cta-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff; font-size: 0.85rem; font-weight: 600;
    padding: 8px 16px; border-radius: 999px;
}
.cf-cta-chip i { color: #f0b849; }
.cf-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.cf-btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 15px 30px; border-radius: 999px; font-weight: 700;
    transition: border-color 0.3s, background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); color: #fff; transform: translateY(-3px); }

@media (max-width: 900px) {
    .cf-hero { padding: 70px 0 50px; }
    .cf-step { grid-template-columns: 44px 1fr; gap: 16px; }
    .cf-step-num { width: 40px; height: 40px; border-radius: 12px; font-size: 0.8rem; }
    .cf-step-card { padding: 24px 20px; margin-bottom: 24px; }
    .cf-split { grid-template-columns: 1fr; gap: 18px; }
    .cf-opts { grid-template-columns: 1fr; }
    .cf-modes { grid-template-columns: 1fr; }
    .cf-pub { flex-wrap: wrap; }
    .cf-pub-node { width: 100%; }
    .cf-pub-path { display: none; }
    .cf-plane { display: none; }
    .cf-nav-item span { display: none; }
    .cf-nav-item b { font-size: 0.8rem; }
    .cf-cta { padding: 70px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-install-bar span, .cf-install-check, .cf-plane { animation: none !important; }
    .cf-step-num, .cf-step-line, .cf-phase, .cf-phase-check, .cf-code code, .cf-key-ok, .cf-progress span, .cf-pub-chip { transition: none !important; opacity: 1 !important; transform: none !important; width: auto; }
}

.cf-split { align-items: start; }
.cf-split-visual { position: relative; z-index: 0; }
.cf-split-txt { position: relative; z-index: 1; }
.cf-install { position: relative; overflow: hidden; }

.cf-creds { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.cf-cred {
    display: flex; align-items: center; gap: 10px;
    background: #fbfbfa; border: 1px solid #eee; border-radius: 11px;
    padding: 10px 14px;
}
.cf-cred-k {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-light);
}
.cf-cred-v { font-family: var(--font-mono); font-size: 0.86rem; color: var(--text); font-weight: 600; }
.cf-warn {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff6ed; border: 1px solid #f6d9b8; border-radius: 11px;
    padding: 12px 14px; margin: 0 0 22px;
    font-size: 0.88rem; line-height: 1.55; color: #7a4b18;
}
.cf-warn i { color: #d97e15; margin-top: 2px; flex-shrink: 0; }
.cf-warn-plural { margin: 20px 0 0; }
.cf-note { font-size: 0.86rem; color: var(--text-light); margin: 12px 0 0; line-height: 1.55; }
.cf-tip {
    display: flex; align-items: flex-start; gap: 9px;
    background: #fff; border: 1px dashed rgba(230, 90, 72, 0.35); border-radius: 10px;
    padding: 10px 12px; margin: 0 0 14px !important;
    font-size: 0.82rem !important; line-height: 1.5; color: var(--text) !important;
}
.cf-tip i { color: var(--accent-deep); margin-top: 2px; flex-shrink: 0; }

.cf-lic, .cf-app {
    background: #17171a; border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px; overflow: hidden;
}
.cf-lic { display: flex; }
.cf-lic-menu {
    width: 172px; flex-shrink: 0;
    background: rgba(0, 0, 0, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.cf-lic-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.73rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    padding: 7px 9px; border-radius: 8px;
    white-space: nowrap; overflow: hidden;
}
.cf-lic-item i { width: 14px; text-align: center; font-size: 0.7rem; }
.cf-lic-ico { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; }
.cf-lic-on { background: rgba(230, 90, 72, 0.16); color: #fff; }
.cf-lic-body { flex: 1; padding: 16px 18px; min-width: 0; }
.cf-lic-label {
    display: block; margin-bottom: 8px;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.45);
}
.cf-lic-input {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px; padding: 10px 12px;
}
.cf-lic-code { flex: 1; font-family: var(--font-mono); font-size: 0.78rem; color: #d8d8dc; letter-spacing: 0.5px; min-width: 0; overflow: hidden; }
.cf-lic-ok {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: rgba(74, 222, 128, 0.15); color: #4ade80; font-size: 0.62rem;
    display: flex; align-items: center; justify-content: center;
    transform: scale(0);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
}
.cf-step.active .cf-lic-ok { transform: scale(1); }

.cf-app-chrome { display: flex; gap: 6px; padding: 11px 14px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cf-app-chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.cf-app-chrome span:first-child { background: rgba(230, 90, 72, 0.75); }
.cf-app-body { display: flex; }
.cf-app-side {
    width: 150px; flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 8px;
    display: flex; flex-direction: column; gap: 5px;
}
.cf-app-tab {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.73rem; font-weight: 600; color: rgba(255, 255, 255, 0.45);
    padding: 7px 9px; border-radius: 8px; white-space: nowrap;
}
.cf-app-tab i { width: 14px; text-align: center; font-size: 0.7rem; }
.cf-app-on { background: rgba(230, 90, 72, 0.16); color: #fff; }
.cf-app-on i { color: #E65A48; }
.cf-app-main { flex: 1; padding: 16px 18px; min-width: 0; }
.cf-app-state {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 12px;
    font-size: 0.76rem; font-weight: 700; color: #4ade80;
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.5s ease 1.15s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.15s;
}
.cf-step.active .cf-app-state { opacity: 1; transform: none; }

.cf-steps-inner .step-downloads { margin: 0; }

@media (max-width: 900px) {
    .cf-lic { flex-direction: column; }
    .cf-lic-menu { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .cf-lic-item { font-size: 0.68rem; padding: 6px 8px; }
    .cf-app-side { width: 118px; }
    .cf-app-tab { font-size: 0.68rem; }
}

@media (max-width: 780px) {
    .cf-hero { padding: 54px 0 40px; }
    .cf-hero-lead { font-size: 0.98rem; }
    .cf-chips { gap: 8px; margin-top: 18px; }
    .cf-chip { font-size: 0.76rem; padding: 7px 13px; }
    .cf-nav {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        margin: 28px -20px 0; padding: 4px 20px 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cf-nav::-webkit-scrollbar { display: none; }
    .cf-nav-item { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 14px; }
    .cf-nav-item span { display: inline; font-size: 0.78rem; }

    .cf-steps { padding: 46px 0 56px; }
    .cf-steps-inner { max-width: 100%; }
    .cf-step { display: block; position: relative; padding-left: 0; }
    .cf-step-rail { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 12px; }
    .cf-step-num { width: 38px; height: 38px; border-radius: 11px; font-size: 0.78rem; }
    .cf-step-line { width: auto; height: 2px; flex: 1; margin: 0; transform: scaleX(0); transform-origin: left; }
    .cf-step.active .cf-step-line { transform: scaleX(1); }
    .cf-step-card { padding: 22px 18px; margin-bottom: 26px; border-radius: 16px; }
    .cf-step-title { font-size: 1.28rem; }
    .cf-step-lead { font-size: 0.92rem; }

    .cf-opt, .cf-mode { padding: 18px 16px; }
    .cf-opt-head h3, .cf-mode-head h3 { font-size: 0.98rem; }
    .cf-creds { gap: 8px; }
    .cf-cred { flex: 1 1 100%; justify-content: space-between; }
    .cf-lic-body, .cf-app-main { padding: 14px; }
    .cf-lic-code { font-size: 0.72rem; }
    .cf-phases { padding: 16px 14px; }
    .cf-phase { font-size: 0.82rem; padding: 10px 12px; gap: 10px; }
    .cf-pub { padding: 18px 16px; gap: 12px; }
    .cf-manual summary { padding: 13px 15px; font-size: 0.86rem; }
    .cf-manual-body { padding: 2px 16px 16px; }
    .cf-cta { padding: 56px 0; }
    .cf-cta-title { font-size: 1.75rem; }
    .cf-cta-chips { gap: 8px; margin: 20px 0 26px; }
    .cf-cta-chip { font-size: 0.78rem; padding: 7px 13px; }
    .cf-cta-btns { flex-direction: column; align-items: stretch; }
    .cf-cta-btns .btn { justify-content: center; width: 100%; }
    .cf-steps-inner .import-steps { padding-left: 20px; }
}

@media (max-width: 480px) {
    .cf-step-card { padding: 18px 15px; }
    .cf-cred-v { font-size: 0.8rem; }
    .cf-lic-menu { gap: 3px; }
    .cf-lic-item span, .cf-app-tab { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-lic-ok, .cf-app-state { transition: none !important; opacity: 1 !important; transform: none !important; }
}

.engine-feat-card.is-floating { animation: none; }

.engine-layout { align-items: stretch; }
.engine-layout > .engine-center-visual { align-self: center; }

.cf-warn, .cf-tip { display: block; position: relative; padding-left: 40px; }
.cf-warn > i, .cf-tip > i { position: absolute; left: 15px; top: 14px; margin-top: 0; }
.cf-tip { padding-left: 36px; }
.cf-tip > i { left: 12px; top: 12px; }

.cf-lic, .cf-app { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.16); }
.cf-lic-menu, .cf-app-side { background: #3a3a3c; border-right-color: rgba(255, 255, 255, 0.1); }
.cf-app-chrome { background: #3a3a3c; border-bottom-color: rgba(255, 255, 255, 0.1); }
.cf-lic-input { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.17); }
.cf-lic-code { color: #e3e3e6; }

@media (max-width: 768px) {
    .artist-ant-wrapper { position: static; width: 170px; margin: 18px auto 0; }
    .st-caption { padding-right: 0; margin-bottom: 0; }
    .st-cost { margin-bottom: 0; }
}

.cf-lic-code { white-space: nowrap; overflow-wrap: normal; }

@media (max-width: 780px) {
    .cf-app-body { flex-direction: column; }
    .cf-app-side {
        width: 100%; flex-direction: row; flex-wrap: wrap;
        border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}

.sk-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #faf9f7 40%, #f5f3ef 100%);
    padding-top: 96px;
    padding-bottom: 104px;
}
.sk-aura {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
}
.sk-aura-a { width: 520px; height: 520px; top: -170px; left: -180px; background: rgba(230, 90, 72, 0.14); }
.sk-aura-b { width: 460px; height: 460px; bottom: -190px; right: -160px; background: rgba(29, 29, 31, 0.08); }

.sk-header { max-width: 780px; margin: 0 auto 52px; text-align: center; }
.sk-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.3px;
    color: var(--accent-deep);
    background: rgba(230, 90, 72, 0.09);
    border: 1px solid rgba(230, 90, 72, 0.22);
    padding: 7px 16px; border-radius: 999px; margin-bottom: 20px;
}
.sk-header .lead { margin-top: 16px; }

.sk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 30px;
    align-items: start;
}

.sk-stage {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(29, 29, 31, 0.28);
}
.sk-stage-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 16px;
    background: #f6f6f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.sk-tl { width: 10px; height: 10px; border-radius: 50%; background: #d6d6da; flex-shrink: 0; }
.sk-tl:first-child { background: #E65A48; }
.sk-url {
    flex: 1; min-width: 0;
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem; color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-url i { font-size: 0.62rem; margin-right: 5px; opacity: 0.6; }
.sk-stage-tag {
    flex-shrink: 0;
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--accent-deep);
    background: rgba(230, 90, 72, 0.1);
    border-radius: 999px; padding: 4px 11px;
}

.sk-canvas {
    --sk-brand: #E65A48;
    position: relative;
    padding: var(--sk-pad, 24px);
    background-color: var(--sk-page-bg, #ffffff);
    background-image: var(--sk-page-img, none);
    background-size: var(--sk-page-size, auto);
    border: var(--sk-page-border, 0 solid transparent);
    border-radius: var(--sk-page-radius, 0);
    color: var(--sk-body, #444);
    font-family: var(--sk-body-font, var(--font-body));
    transition: background-color .5s ease, border-color .5s ease, border-radius .5s ease, color .5s ease;
    min-height: 520px;
}
.sk-canvas.is-morphing .sk-ficha { transform: scale(0.985); opacity: 0.72; }

.sk-sheen {
    position: absolute; inset: 0; pointer-events: none; z-index: 5;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
    opacity: 0; transform: translateX(-30%);
}
.sk-canvas.is-morphing .sk-sheen { animation: skSheen 0.62s ease-out; }
@keyframes skSheen {
    0% { opacity: 0; transform: translateX(-35%); }
    45% { opacity: 1; }
    100% { opacity: 0; transform: translateX(35%); }
}

.sk-ficha {
    background: var(--sk-card-bg, #fff);
    border: var(--sk-card-border, 1px solid #124e78);
    border-radius: var(--sk-card-radius, 0);
    box-shadow: var(--sk-card-shadow, 3px 3px 0.4rem 0.1px var(--sk-brand));
    padding: 22px;
    transform: var(--sk-card-tilt, none);
    transition: background-color .5s ease, border-color .5s ease, border-width .5s ease, border-radius .5s ease, box-shadow .5s ease, transform .38s cubic-bezier(.16,1,.3,1), opacity .38s ease;
    position: relative;
}
.sk-ficha::before {
    content: '';
    position: absolute; top: -14px; left: 50%;
    width: 148px; height: 34px;
    background: var(--sk-tape, transparent);
    transform: translateX(-50%) rotate(-1.4deg);
    opacity: var(--sk-tape-on, 0);
    transition: opacity .5s ease;
    pointer-events: none;
}

.sk-ficha-title {
    font-family: var(--sk-title-font, var(--font-display)) !important;
    font-size: var(--sk-title-size, 1.45rem);
    font-weight: var(--sk-title-weight, 700);
    text-transform: var(--sk-title-transform, none);
    letter-spacing: var(--sk-title-spacing, normal);
    text-align: var(--sk-title-align, left);
    color: var(--sk-ink, #1d1d1f);
    background: var(--sk-title-bg, transparent);
    display: var(--sk-title-display, block);
    padding: var(--sk-title-pad, 0 0 12px 0);
    border-bottom: var(--sk-title-rule, 2px solid rgba(0, 0, 0, 0.08));
    margin: 0 0 18px !important;
    line-height: 1.25;
    transition: color .5s ease, border-color .5s ease, letter-spacing .5s ease;
    -webkit-background-clip: var(--sk-title-clip, border-box);
    background-clip: var(--sk-title-clip, border-box);
    -webkit-text-fill-color: var(--sk-title-fill, currentColor);
}
.sk-num { opacity: 0.55; font-weight: inherit; }

.sk-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sk-col-img img {
    display: block; width: 100%; height: 232px; object-fit: cover; object-position: center 42%;
    border-radius: var(--sk-img-radius, 0);
    border: var(--sk-img-border, none);
    border-bottom: var(--sk-img-rule, var(--sk-img-border, none));
    filter: var(--sk-img-filter, none);
    clip-path: var(--sk-img-clip, none);
    box-shadow: var(--sk-img-shadow, none);
    transition: border-radius .5s ease, filter .5s ease, border-color .5s ease;
}

.sk-svc { margin-bottom: 13px; }
.sk-svc:last-child { margin-bottom: 0; }
.sk-svc-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--sk-title-font, var(--font-display));
    font-weight: var(--sk-svc-weight, 700);
    font-size: 0.92rem;
    text-transform: var(--sk-svc-transform, none);
    letter-spacing: var(--sk-svc-spacing, normal);
    color: var(--sk-accent, var(--sk-brand));
    margin-bottom: 3px;
    transition: color .5s ease;
}
.sk-svc-head i { font-size: 0.85rem; width: 18px; text-align: center; }
.sk-svc-body {
    display: block;
    font-size: 0.9rem; line-height: 1.5;
    color: var(--sk-body, #444);
    transition: color .5s ease;
}
.sk-open { color: var(--sk-ok, #2f9e5c); font-weight: 700; }
.sk-stars { color: var(--sk-star, #f0b849); letter-spacing: 1px; }
.sk-revs { color: var(--sk-muted, #8a8a8f); font-size: 0.82rem; }

.sk-desc {
    margin: 20px 0 0;
    font-size: 0.92rem; line-height: 1.65;
    color: var(--sk-body, #444);
    transition: color .5s ease;
}

.sk-spoilers { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.sk-spoiler {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    font-size: 0.86rem; font-weight: 600;
    font-family: var(--sk-body-font, var(--font-body));
    color: var(--sk-ink, #1d1d1f);
    background: var(--sk-spoiler-bg, rgba(0, 0, 0, 0.03));
    border: var(--sk-spoiler-border, 1px solid rgba(0, 0, 0, 0.06));
    border-radius: var(--sk-spoiler-radius, 6px);
    transition: all .5s ease;
}
.sk-spoiler i { font-size: 0.68rem; opacity: 0.55; }

.sk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.sk-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 16px;
    text-align: center;
    font-family: var(--sk-btn-font, var(--font-display));
    font-weight: var(--sk-btn-weight, 700);
    font-size: 0.88rem;
    text-transform: var(--sk-btn-transform, none);
    letter-spacing: var(--sk-btn-spacing, normal);
    color: var(--sk-btn-color, #ffffff);
    background: var(--sk-btn-bg, var(--sk-brand));
    border: var(--sk-btn-border, none);
    border-radius: var(--sk-btn-radius, 4px);
    box-shadow: var(--sk-btn-shadow, none);
    transform: var(--sk-btn-tilt, none);
    transition: all .5s ease;
}
.sk-btn i { font-size: 0.85rem; }

.sk-picker {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 20px 50px -28px rgba(29, 29, 31, 0.3);
    position: sticky;
    top: 100px;
}
.sk-picker-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 13px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.sk-picker-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-size: 0.84rem; font-weight: 700; color: var(--text);
}
.sk-picker-title i { color: var(--accent-deep); font-size: 0.82rem; }
.sk-picker-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-light); }
.sk-picker-count b { color: var(--accent-deep); }

.sk-list {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 430px; overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
}
.sk-list::-webkit-scrollbar { width: 5px; }
.sk-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); border-radius: 99px; }

.sk-opt {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    padding: 9px 11px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.86rem; font-weight: 600;
    color: var(--text);
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.sk-opt:hover { background: rgba(0, 0, 0, 0.035); transform: translateX(2px); }
.sk-opt.is-active {
    background: rgba(230, 90, 72, 0.08);
    border-color: rgba(230, 90, 72, 0.28);
}
.sk-opt.is-active .sk-opt-name { color: var(--accent-deep); font-weight: 800; }
.sk-chip {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 8px;
    background-color: var(--sk-page-bg, #fff);
    background-image: var(--sk-page-img, none);
    background-size: var(--sk-page-size, auto);
    border: 1px solid rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}
.sk-chip::before {
    content: '';
    position: absolute; left: 4px; top: 4px; right: 4px; bottom: 9px;
    border-radius: 3px;
    background: var(--sk-card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.16);
}
.sk-chip::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 6px;
    background: var(--sk-accent, #E65A48);
}
.sk-picker-foot {
    margin: 14px 0 0;
    font-size: 0.78rem; line-height: 1.5;
    color: var(--text-light);
    display: flex; align-items: flex-start; gap: 8px;
}
.sk-picker-foot i { color: var(--accent-deep); margin-top: 3px; flex-shrink: 0; }

.sk-skin[data-skin="minimal"] {
    --sk-brand: #E65A48;
    --sk-page-bg: #ffffff; --sk-pad: 24px;
    --sk-card-bg: #ffffff; --sk-card-border: 1px solid #124e78; --sk-card-radius: 0;
    --sk-card-shadow: 3px 3px 0.4rem 0.1px var(--sk-brand, #E65A48);
    --sk-ink: #1d1d1f; --sk-body: #4b4b50; --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #8a8a8f;
    --sk-title-font: 'Jost', 'Helvetica Neue', system-ui, sans-serif;
    --sk-title-rule: 2px solid rgba(0, 0, 0, 0.08);
    --sk-btn-radius: 4px;
}
.sk-skin[data-skin="modern"] {
    --sk-brand: #4F46E5;
    --sk-page-bg: #f8f9fc; --sk-page-radius: 20px; --sk-pad: 24px;
    --sk-card-bg: #ffffff; --sk-card-border: 1px solid rgba(0,0,0,0.04); --sk-card-radius: 24px;
    --sk-card-shadow: 0 10px 25px -5px rgba(0,0,0,0.06);
    --sk-ink: #111111; --sk-body: #4b5563; --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #9ca3af;
    --sk-title-font: 'Inter', 'Segoe UI', system-ui, sans-serif; --sk-title-weight: 800; --sk-title-spacing: -0.02em;
    --sk-title-rule: 2px solid #f3f4f6;
    --sk-body-font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --sk-img-radius: 16px;
    --sk-btn-radius: 100px; --sk-btn-weight: 600;
    --sk-btn-shadow: 0 4px 10px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 70%);
    --sk-spoiler-radius: 14px;
}
.sk-skin[data-skin="bold"] {
    --sk-brand: #E6402E;
    --sk-page-bg: #ffffff; --sk-pad: 24px;
    --sk-card-bg: #ffffff; --sk-card-border: none; --sk-card-radius: 20px;
    --sk-card-shadow: 0 10px 30px rgba(0,0,0,0.09);
    --sk-ink: color-mix(in srgb, var(--sk-brand, #E65A48), black 30%); --sk-body: #444;
    --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #8a8a8f;
    --sk-title-font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --sk-title-weight: 800; --sk-title-size: 1.55rem;
    --sk-title-bg: linear-gradient(90deg, var(--sk-brand, #E65A48) 0%, color-mix(in srgb, var(--sk-brand, #E65A48), black 35%) 100%);
    --sk-title-clip: text; --sk-title-fill: transparent;
    --sk-title-rule: 2px dashed color-mix(in srgb, var(--sk-brand, #E65A48), transparent 80%);
    --sk-svc-weight: 800; --sk-svc-transform: uppercase; --sk-svc-spacing: 0.5px;
    --sk-btn-radius: 12px; --sk-btn-weight: 800; --sk-btn-transform: uppercase;
    --sk-btn-shadow: 0 6px 0 color-mix(in srgb, var(--sk-brand, #E65A48), black 30%);
    --sk-spoiler-radius: 12px;
}
.sk-skin[data-skin="swiss"] {
    --sk-brand: #D62828;
    --sk-page-bg: #ffffff; --sk-pad: 28px; --sk-page-border: 6px solid var(--sk-brand, #E65A48); --sk-page-radius: 0;
    --sk-card-bg: #ffffff; --sk-card-border: 1px solid #d8d8d8; --sk-card-radius: 0; --sk-card-shadow: none;
    --sk-ink: #111111; --sk-body: #3d3d3d; --sk-accent: #111111; --sk-muted: #6b6b6b;
    --sk-title-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --sk-title-weight: 700; --sk-title-spacing: -0.8px;
    --sk-title-rule: 2px solid #111111;
    --sk-body-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sk-img-radius: 0;
    --sk-btn-bg: #111111; --sk-btn-color: #ffffff; --sk-btn-border: 1px solid #111111; --sk-btn-radius: 0; --sk-btn-weight: 700;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #fafafa; --sk-spoiler-border: 1px solid #d8d8d8;
}
.sk-skin[data-skin="elegant"] {
    --sk-brand: #8A6552;
    --sk-page-bg: #ffffff; --sk-pad: 30px;
    --sk-card-bg: #ffffff; --sk-card-border: 1px solid #f0f0f0; --sk-card-radius: 2px; --sk-card-shadow: none;
    --sk-ink: color-mix(in srgb, var(--sk-brand, #E65A48), black 10%); --sk-body: #4a4a4a;
    --sk-accent: color-mix(in srgb, var(--sk-brand, #E65A48), black 45%); --sk-muted: #999;
    --sk-title-font: Georgia, 'Times New Roman', serif; --sk-title-weight: 400; --sk-title-size: 1.72rem; --sk-title-align: center;
    --sk-title-rule: 1px solid color-mix(in srgb, var(--sk-brand, #E65A48), transparent 80%);
    --sk-body-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sk-svc-transform: uppercase; --sk-svc-spacing: 2px; --sk-svc-weight: 600;
    --sk-img-radius: 2px; --sk-img-filter: grayscale(20%);
    --sk-btn-bg: transparent; --sk-btn-color: var(--sk-brand, #E65A48);
    --sk-btn-border: 1px solid var(--sk-brand, #E65A48); --sk-btn-radius: 2px;
    --sk-btn-transform: uppercase; --sk-btn-spacing: 1px; --sk-btn-weight: 600;
    --sk-spoiler-radius: 2px; --sk-spoiler-bg: #fcfcfc;
}
.sk-skin[data-skin="gazette"] {
    --sk-brand: #8C1D18;
    --sk-page-bg: #f9f6ee; --sk-pad: 28px; --sk-page-border: 1px solid #d9d2c3; --sk-page-radius: 0;
    --sk-card-bg: #fffdf7; --sk-card-border: 1px solid #d9d2c3; --sk-card-radius: 0; --sk-card-shadow: none;
    --sk-ink: #1d1a15; --sk-body: #4c463c; --sk-accent: #1d1a15; --sk-muted: #7d766a;
    --sk-title-font: 'Oswald', 'Arial Narrow', 'Segoe UI Semibold', sans-serif;
    --sk-title-weight: 600; --sk-title-transform: uppercase; --sk-title-spacing: 2px;
    --sk-title-rule: 3px double #1d1a15;
    --sk-body-font: Georgia, 'Times New Roman', serif;
    --sk-svc-transform: uppercase; --sk-svc-spacing: 1.6px;
    --sk-img-radius: 0; --sk-img-filter: sepia(0.14);
    --sk-btn-bg: transparent; --sk-btn-color: #1d1a15; --sk-btn-border: 1px solid #1d1a15; --sk-btn-radius: 0;
    --sk-btn-font: 'Oswald', 'Arial Narrow', sans-serif; --sk-btn-transform: uppercase; --sk-btn-spacing: 1px;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #f6f2e8; --sk-spoiler-border: 1px solid #d9d2c3;
}
.sk-skin[data-skin="ink"] {
    --sk-brand: #9E3B32;
    --sk-page-bg: #faf8f3; --sk-pad: 34px;
    --sk-card-bg: #ffffff; --sk-card-border: 1px solid #cbc4b4; --sk-card-radius: 0; --sk-card-shadow: none;
    --sk-ink: #1d1d1b; --sk-body: #54514b; --sk-accent: #1d1d1b; --sk-muted: #74706a;
    --sk-title-font: 'Songti SC', Georgia, 'Times New Roman', serif;
    --sk-title-weight: 400; --sk-title-spacing: 3px;
    --sk-title-rule: 1px solid #1d1d1b;
    --sk-svc-spacing: 2px; --sk-svc-weight: 400;
    --sk-img-radius: 0;
    --sk-btn-bg: transparent; --sk-btn-color: #1d1d1b; --sk-btn-border: 1px solid #1d1d1b; --sk-btn-radius: 0;
    --sk-btn-font: 'Songti SC', Georgia, serif; --sk-btn-weight: 400; --sk-btn-spacing: 2px;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #f6f3ec; --sk-spoiler-border: 1px solid #cbc4b4;
}
.sk-skin[data-skin="kraft"] {
    --sk-brand: #A5642B;
    --sk-page-bg: #c3a37c; --sk-pad: 28px; --sk-page-border: 2px dashed #8a6b48;
    --sk-card-bg: #d9bf9c; --sk-card-border: 1px dashed #8a6b48; --sk-card-radius: 2px; --sk-card-shadow: none;
    --sk-ink: #43301c; --sk-body: #5d452c; --sk-accent: #43301c; --sk-muted: #6f573c;
    --sk-title-font: 'Courier New', Courier, monospace; --sk-title-weight: 700;
    --sk-title-transform: uppercase; --sk-title-spacing: 1px;
    --sk-title-rule: 2px dashed #8a6b48;
    --sk-svc-transform: uppercase; --sk-svc-spacing: 1px;
    --sk-img-radius: 2px; --sk-img-filter: sepia(0.2);
    --sk-btn-bg: #43301c; --sk-btn-color: #f2e5d2; --sk-btn-border: 2px solid #43301c; --sk-btn-radius: 2px;
    --sk-btn-font: 'Courier New', monospace; --sk-btn-weight: 700; --sk-btn-transform: uppercase;
    --sk-spoiler-radius: 2px; --sk-spoiler-bg: #e3cdae; --sk-spoiler-border: 1px dashed #8a6b48;
    --sk-star: #8a6b48;
}
.sk-skin[data-skin="riso"] {
    --sk-brand: #F0483C;
    --sk-page-bg: #f6f1e4; --sk-pad: 28px;
    --sk-card-bg: #fcf8ee; --sk-card-border: 1px solid #ddd3bd; --sk-card-radius: 0; --sk-card-shadow: none;
    --sk-ink: #262119; --sk-body: #4e4738;
    --sk-accent: color-mix(in srgb, var(--sk-brand, #E65A48), #1f3fa8 62%); --sk-muted: #6a6152;
    --sk-title-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --sk-title-weight: 800;
    --sk-title-transform: uppercase; --sk-title-spacing: 0.6px;
    --sk-title-rule: 2px solid color-mix(in srgb, var(--sk-brand, #E65A48), #1f3fa8 62%);
    --sk-svc-transform: uppercase; --sk-svc-spacing: 0.6px; --sk-svc-weight: 800;
    --sk-img-radius: 0;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #fff;
    --sk-btn-border: 2px solid color-mix(in srgb, var(--sk-brand, #E65A48), #1f3fa8 62%); --sk-btn-radius: 0;
    --sk-btn-font: 'Archivo', 'Helvetica Neue', sans-serif; --sk-btn-weight: 700;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #f2ecdd; --sk-spoiler-border: 1px solid #ddd3bd;
}
.sk-skin[data-skin="mosaic"] {
    --sk-brand: #2A8C82;
    --sk-page-bg: #ccd2d7; --sk-pad: 26px;
    --sk-page-img: linear-gradient(#aeb6bd 2px, transparent 2px), linear-gradient(90deg, #aeb6bd 2px, transparent 2px);
    --sk-page-size: 26px 26px;
    --sk-card-bg: #f8f4ec; --sk-card-border: 3px solid #ffffff; --sk-card-radius: 3px;
    --sk-card-shadow: 0 2px 0 #99a2ab;
    --sk-ink: color-mix(in srgb, var(--sk-brand, #E65A48), #14343f 55%); --sk-body: #4c5560;
    --sk-accent: color-mix(in srgb, var(--sk-brand, #E65A48), #14343f 55%); --sk-muted: #566069;
    --sk-title-weight: 700;
    --sk-title-rule: 3px solid var(--sk-brand, #E65A48);
    --sk-img-radius: 3px;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #fff; --sk-btn-border: 3px solid #ffffff;
    --sk-btn-radius: 3px; --sk-btn-shadow: 0 2px 0 #99a2ab; --sk-btn-weight: 700;
    --sk-spoiler-radius: 3px; --sk-spoiler-bg: #ffffff; --sk-spoiler-border: 2px solid #e4e0d7;
}
.sk-skin[data-skin="comic"] {
    --sk-brand: #E01B24;
    --sk-page-bg: #fdf5e0; --sk-pad: 26px; --sk-page-border: 4px solid #111111;
    --sk-card-bg: #ffffff; --sk-card-border: 3px solid #111111; --sk-card-radius: 0;
    --sk-card-shadow: 4px 4px 0 #111111;
    --sk-ink: #111111; --sk-body: #2f2f2f; --sk-accent: #111111; --sk-muted: #55504a;
    --sk-title-font: 'Bangers', Impact, Haettenschweiler, 'Arial Black', sans-serif;
    --sk-title-weight: 700; --sk-title-transform: uppercase; --sk-title-spacing: 1.4px; --sk-title-size: 1.7rem;
    --sk-title-rule: 3px solid #111111;
    --sk-body-font: 'Segoe UI', 'Comic Sans MS', 'Helvetica Neue', sans-serif;
    --sk-img-radius: 0; --sk-img-border: 3px solid #111111;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #fff; --sk-btn-border: 3px solid #111111;
    --sk-btn-radius: 0; --sk-btn-shadow: 4px 4px 0 #111111;
    --sk-btn-font: 'Bangers', Impact, 'Arial Black', sans-serif; --sk-btn-transform: uppercase; --sk-btn-spacing: 1px;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #fff8e6; --sk-spoiler-border: 2px solid #111111;
}
.sk-skin[data-skin="bauhaus"] {
    --sk-brand: #E1261C;
    --sk-page-bg: #f2efe8; --sk-pad: 28px;
    --sk-card-bg: #ffffff; --sk-card-border: 2px solid #14120f; --sk-card-radius: 0; --sk-card-shadow: none;
    --sk-ink: #14120f; --sk-body: #3b382f; --sk-accent: color-mix(in srgb, var(--sk-brand, #E65A48), #1a4fd6 62%); --sk-muted: #5f5b51;
    --sk-title-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --sk-title-weight: 700; --sk-title-spacing: -0.4px;
    --sk-title-rule: 6px solid var(--sk-brand, #E65A48);
    --sk-img-radius: 0;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #fff; --sk-btn-border: 2px solid #14120f; --sk-btn-radius: 0; --sk-btn-weight: 700;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: color-mix(in srgb, var(--sk-brand, #E65A48), #ffffff 88%); --sk-spoiler-border: 2px solid #14120f;
}
.sk-skin[data-skin="transit"] {
    --sk-brand: #0B72B9;
    --sk-page-bg: #eef1f4; --sk-page-radius: 12px; --sk-pad: 24px;
    --sk-card-bg: #ffffff; --sk-card-border: 1px solid #e5e9ee; --sk-card-radius: 14px;
    --sk-card-shadow: 0 2px 6px rgba(23,28,36,0.06);
    --sk-ink: #171c24; --sk-body: #3f4a58; --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #77828f;
    --sk-title-font: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --sk-title-weight: 800;
    --sk-title-rule: 3px solid var(--sk-brand, #E65A48);
    --sk-svc-weight: 800;
    --sk-img-radius: 10px;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #fff; --sk-btn-radius: 999px; --sk-btn-weight: 700;
    --sk-btn-shadow: 0 4px 10px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 75%);
    --sk-spoiler-radius: 12px; --sk-spoiler-bg: #f5f7f9; --sk-spoiler-border: 1px solid #e5e9ee;
}
.sk-skin[data-skin="organic"] {
    --sk-brand: #4E8A5B;
    --sk-page-bg: #fdfdfc; --sk-page-radius: 30px; --sk-pad: 24px;
    --sk-card-bg: #ffffff; --sk-card-border: none; --sk-card-radius: 40px 15px 40px 15px;
    --sk-card-shadow: 0 10px 30px rgba(0,0,0,0.05);
    --sk-ink: color-mix(in srgb, var(--sk-brand, #E65A48), #2c2c2c 80%); --sk-body: #5d5d5d;
    --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #9a9a9a;
    --sk-title-weight: 800; --sk-title-align: center; --sk-title-size: 1.55rem;
    --sk-title-rule: 2px solid color-mix(in srgb, var(--sk-brand, #E65A48), white 88%);
    --sk-img-radius: 30px 10px 30px 10px;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-radius: 30px 10px 30px 10px; --sk-btn-weight: 700;
    --sk-btn-shadow: 0 8px 20px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 88%);
    --sk-spoiler-radius: 20px 8px 20px 8px; --sk-spoiler-bg: color-mix(in srgb, var(--sk-brand, #E65A48), white 94%);
    --sk-spoiler-border: none;
}
.sk-skin[data-skin="clay"] {
    --sk-brand: #7C6BD1;
    --sk-page-bg: color-mix(in srgb, var(--sk-brand, #E65A48), #eceaf3 90%); --sk-page-radius: 30px; --sk-pad: 26px;
    --sk-card-bg: color-mix(in srgb, var(--sk-brand, #E65A48), #ffffff 95%);
    --sk-card-border: 1px solid transparent; --sk-card-radius: 24px;
    --sk-card-shadow: 8px 8px 16px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 76%), -6px -6px 14px rgba(255,255,255,0.9);
    --sk-ink: color-mix(in srgb, var(--sk-brand, #E65A48), #2f2a45 78%);
    --sk-body: color-mix(in srgb, var(--sk-brand, #E65A48), #575070 72%);
    --sk-accent: color-mix(in srgb, var(--sk-brand, #E65A48), #2f2a45 78%);
    --sk-muted: color-mix(in srgb, var(--sk-brand, #E65A48), #625b7a 72%);
    --sk-title-font: 'Nunito', 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif; --sk-title-weight: 800;
    --sk-title-rule: 2px solid color-mix(in srgb, var(--sk-brand, #E65A48), #ffffff 78%);
    --sk-body-font: 'Nunito', 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif;
    --sk-img-radius: 16px;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-radius: 999px; --sk-btn-weight: 700;
    --sk-btn-shadow: inset -2px -2px 5px rgba(0,0,0,0.12), 6px 6px 12px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 68%);
    --sk-spoiler-radius: 18px;
    --sk-spoiler-bg: color-mix(in srgb, var(--sk-brand, #E65A48), #ffffff 92%);
    --sk-spoiler-border: none;
}
.sk-skin[data-skin="glass"] {
    --sk-brand: #3B82F6;
    --sk-page-bg: #dfe7f5; --sk-page-radius: 34px; --sk-pad: 28px;
    --sk-page-img: radial-gradient(circle at 18% 22%, rgba(230,90,72,0.32) 0%, transparent 46%), radial-gradient(circle at 82% 78%, rgba(90,140,235,0.34) 0%, transparent 48%);
    --sk-card-bg: rgba(255,255,255,0.42); --sk-card-border: 1px solid rgba(255,255,255,0.9); --sk-card-radius: 30px;
    --sk-card-shadow: 10px 10px 30px rgba(0,0,0,0.05), inset 0 0 20px rgba(255,255,255,0.5);
    --sk-ink: color-mix(in srgb, var(--sk-brand, #E65A48), black 18%); --sk-body: #3f4a5c;
    --sk-accent: color-mix(in srgb, var(--sk-brand, #E65A48), black 12%); --sk-muted: #6c7789;
    --sk-title-weight: 800; --sk-title-align: center;
    --sk-title-rule: 2px solid rgba(255,255,255,0.75);
    --sk-img-radius: 20px; --sk-img-shadow: 0 5px 15px rgba(0,0,0,0.08);
    --sk-btn-bg: radial-gradient(circle at 30% 20%, #fff 0%, #f0f0f0 20%, #e6e6e6 100%);
    --sk-btn-color: #444; --sk-btn-border: 1px solid #fff; --sk-btn-radius: 30px; --sk-btn-transform: uppercase;
    --sk-btn-shadow: inset 5px 5px 10px #fff, 5px 10px 20px rgba(0,0,0,0.07);
    --sk-spoiler-radius: 20px; --sk-spoiler-bg: rgba(255,255,255,0.5); --sk-spoiler-border: 1px solid rgba(255,255,255,0.9);
}
.sk-skin[data-skin="glass"] .sk-ficha { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sk-skin[data-skin="retro"] {
    --sk-brand: #E4572E;
    --sk-page-bg: #f4f4f0; --sk-pad: 22px; --sk-page-border: 2px solid #1a1a1a;
    --sk-card-bg: #ffffff; --sk-card-border: 2px solid #1a1a1a; --sk-card-radius: 0;
    --sk-card-shadow: 4px 4px 0 #1a1a1a;
    --sk-ink: #1a1a1a; --sk-body: #333; --sk-accent: #1a1a1a; --sk-muted: #6b6b6b;
    --sk-title-font: 'Courier New', Courier, monospace; --sk-title-weight: 800; --sk-title-transform: uppercase;
    --sk-title-rule: 2px dashed #000;
    --sk-body-font: Verdana, Geneva, sans-serif;
    --sk-svc-transform: uppercase; --sk-svc-weight: 800;
    --sk-img-radius: 0; --sk-img-rule: 2px solid #1a1a1a; --sk-img-filter: contrast(110%) saturate(110%);
    --sk-btn-bg: #ffffff; --sk-btn-color: #1a1a1a; --sk-btn-border: 2px solid #1a1a1a; --sk-btn-radius: 0;
    --sk-btn-font: 'Courier New', monospace; --sk-btn-weight: 800; --sk-btn-transform: uppercase;
    --sk-btn-shadow: 4px 4px 0 #1a1a1a;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #f4f4f0; --sk-spoiler-border: 2px solid #1a1a1a;
}
.sk-skin[data-skin="sketch"] {
    --sk-brand: #3B7DD8;
    --sk-page-bg: #fffef0; --sk-pad: 28px;
    --sk-card-bg: #ffffff; --sk-card-border: 2px solid #2b2b2b;
    --sk-card-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
    --sk-card-shadow: 5px 5px 0 rgba(0,0,0,0.12);
    --sk-ink: #2b2b2b; --sk-body: #4a4a4a; --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #86867e;
    --sk-title-font: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', cursive; --sk-title-weight: 700; --sk-title-size: 1.75rem;
    --sk-title-bg: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--sk-brand, #E65A48), transparent 70%) 62%);
    --sk-title-display: inline-block; --sk-title-pad: 0 10px 4px; --sk-title-rule: none;
    --sk-body-font: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;
    --sk-img-radius: 2px; --sk-img-border: 2px solid #2b2b2b; --sk-img-filter: sepia(10%);
    --sk-btn-bg: #ffffff; --sk-btn-color: #2b2b2b; --sk-btn-border: 2px solid #2b2b2b;
    --sk-btn-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --sk-btn-font: 'Patrick Hand', 'Comic Sans MS', cursive; --sk-btn-shadow: 3px 3px 0 #2b2b2b;
    --sk-spoiler-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --sk-spoiler-bg: #fffef0; --sk-spoiler-border: 2px solid #2b2b2b;
}
.sk-skin[data-skin="collage"] {
    --sk-brand: #E8452B;
    --sk-page-bg: #ece7dd; --sk-pad: 34px 22px;
    --sk-page-img: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px); --sk-page-size: 7px 7px;
    --sk-card-bg: #fdfdfd; --sk-card-border: none; --sk-card-radius: 0;
    --sk-card-shadow: 5px 5px 15px rgba(0,0,0,0.16);
    --sk-card-tilt: rotate(-0.5deg);
    --sk-tape: rgba(241, 230, 175, 0.72); --sk-tape-on: 1;
    --sk-ink: #000000; --sk-body: #3a3a3a; --sk-accent: #111; --sk-muted: #7b7b7b;
    --sk-title-font: 'Courier New', Courier, monospace; --sk-title-weight: 900; --sk-title-size: 1.4rem;
    --sk-title-bg: #ffec00; --sk-title-display: inline-block; --sk-title-pad: 5px 15px;
    --sk-title-rule: 1px solid #000;
    --sk-img-clip: polygon(1% 1%, 98% 2%, 100% 98%, 2% 99%); --sk-img-filter: sepia(15%);
    --sk-btn-bg: #222222; --sk-btn-color: #fff; --sk-btn-border: 1px solid #000; --sk-btn-radius: 0;
    --sk-btn-font: Impact, Haettenschweiler, 'Arial Black', sans-serif; --sk-btn-transform: uppercase; --sk-btn-spacing: 0.5px;
    --sk-btn-shadow: 5px 5px 0 var(--sk-brand, #E65A48); --sk-btn-tilt: rotate(-0.5deg);
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #f6f3ea; --sk-spoiler-border: 1px dashed #999;
}
.sk-skin[data-skin="midnight"] {
    --sk-brand: #6366F1;
    --sk-page-bg: #0f172a; --sk-page-radius: 12px; --sk-pad: 32px;
    --sk-card-bg: #1e293b; --sk-card-border: 1px solid rgba(255,255,255,0.1); --sk-card-radius: 12px;
    --sk-card-shadow: 0 10px 20px rgba(0,0,0,0.3);
    --sk-ink: #ffffff; --sk-body: #cbd5e1; --sk-accent: #a5b4fc; --sk-muted: #94a3b8;
    --sk-title-font: 'Inter', 'Roboto', 'Segoe UI', system-ui, sans-serif; --sk-title-weight: 700;
    --sk-title-rule: 1px solid rgba(255,255,255,0.12);
    --sk-body-font: 'Inter', 'Roboto', 'Segoe UI', system-ui, sans-serif;
    --sk-img-radius: 8px;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #fff; --sk-btn-radius: 8px; --sk-btn-weight: 600;
    --sk-spoiler-radius: 10px; --sk-spoiler-bg: rgba(255,255,255,0.05); --sk-spoiler-border: 1px solid rgba(255,255,255,0.1);
    --sk-ok: #4ade80;
}
.sk-skin[data-skin="blueprint"] {
    --sk-brand: #4FA3F7;
    --sk-page-bg: #0d2b4e; --sk-pad: 30px; --sk-page-border: 1px solid rgba(146,197,247,0.55);
    --sk-page-img: linear-gradient(rgba(146,197,247,0.34) 1px, transparent 1px), linear-gradient(90deg, rgba(146,197,247,0.34) 1px, transparent 1px), linear-gradient(rgba(146,197,247,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(146,197,247,0.16) 1px, transparent 1px);
    --sk-page-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    --sk-card-bg: #123457; --sk-card-border: 1px solid rgba(146,197,247,0.55); --sk-card-radius: 0; --sk-card-shadow: none;
    --sk-ink: #eef6ff; --sk-body: #c6dcf1;
    --sk-accent: color-mix(in srgb, var(--sk-brand, #E65A48), #cfe6ff 58%); --sk-muted: #87abd0;
    --sk-title-font: Consolas, 'Courier New', monospace; --sk-title-weight: 700;
    --sk-title-transform: uppercase; --sk-title-spacing: 1.5px;
    --sk-title-rule: 1px dashed rgba(146,197,247,0.55);
    --sk-svc-transform: uppercase; --sk-svc-spacing: 1.2px;
    --sk-img-radius: 0; --sk-img-filter: saturate(0.75) brightness(0.92);
    --sk-btn-bg: transparent; --sk-btn-color: color-mix(in srgb, var(--sk-brand, #E65A48), #cfe6ff 58%);
    --sk-btn-border: 1px solid rgba(146,197,247,0.55); --sk-btn-radius: 0;
    --sk-btn-font: Consolas, 'Courier New', monospace; --sk-btn-transform: uppercase; --sk-btn-spacing: 1px;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #17416b; --sk-spoiler-border: 1px dashed rgba(146,197,247,0.4);
    --sk-ok: #7ee2a8;
}
.sk-skin[data-skin="chrome"] {
    --sk-brand: #7AA2FF;
    --sk-page-bg: #0b1030; --sk-pad: 28px; --sk-page-border: 1px solid #3b478a;
    --sk-page-img: linear-gradient(rgba(90,110,220,0.16) 1px, transparent 1px); --sk-page-size: 100% 14px;
    --sk-card-bg: #171f4a; --sk-card-border: 1px solid #3b478a; --sk-card-radius: 10px;
    --sk-card-shadow: 0 4px 14px rgba(0,0,0,0.4);
    --sk-ink: #f2f5ff; --sk-body: #c3cbe8; --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #8f9ac4;
    --sk-title-font: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --sk-title-weight: 800; --sk-title-spacing: -0.3px;
    --sk-title-rule: 2px solid var(--sk-brand, #E65A48);
    --sk-img-radius: 8px;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #fff;
    --sk-btn-color: #0b1030;
    --sk-btn-border: 1px solid rgba(255,255,255,0.55); --sk-btn-radius: 999px; --sk-btn-weight: 800;
    --sk-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -6px 12px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.5);
    --sk-spoiler-radius: 8px; --sk-spoiler-bg: #212b5e; --sk-spoiler-border: 1px solid #3b478a;
    --sk-ok: #6ee7a8;
}
.sk-skin[data-skin="arcade"] {
    --sk-brand: #FF4FD8;
    --sk-page-bg: #12101c; --sk-pad: 26px; --sk-page-border: 3px solid #3d3557;
    --sk-page-img: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px); --sk-page-size: 3px 3px;
    --sk-card-bg: #211c31; --sk-card-border: 2px solid #3d3557; --sk-card-radius: 0;
    --sk-card-shadow: 4px 4px 0 rgba(0,0,0,0.45);
    --sk-ink: #f2eeff; --sk-body: #cdc5e6; --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #8f86ad;
    --sk-title-font: 'Courier New', Courier, monospace; --sk-title-weight: 700;
    --sk-title-transform: uppercase; --sk-title-spacing: 1.5px;
    --sk-title-rule: 3px solid var(--sk-brand, #E65A48);
    --sk-body-font: 'Courier New', Courier, monospace;
    --sk-svc-transform: uppercase; --sk-svc-spacing: 1.2px;
    --sk-img-radius: 0;
    --sk-btn-bg: var(--sk-brand, #E65A48); --sk-btn-color: #12101c; --sk-btn-border: 3px solid #12101c; --sk-btn-radius: 0;
    --sk-btn-font: 'Courier New', monospace; --sk-btn-weight: 700; --sk-btn-transform: uppercase;
    --sk-btn-shadow: 4px 4px 0 #3d3557;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #2c2542; --sk-spoiler-border: 2px dashed #3d3557;
    --sk-ok: #7df5a8;
}
.sk-skin[data-skin="luxury"] {
    --sk-brand: #D4AF37;
    --sk-page-bg: #080808; --sk-pad: 32px; --sk-page-border: 1px solid #d4af37;
    --sk-card-bg: #121212; --sk-card-border: 1px solid rgba(212,175,55,0.4); --sk-card-radius: 0;
    --sk-card-shadow: 0 10px 30px rgba(0,0,0,0.8);
    --sk-ink: #d4af37; --sk-body: #b0b0b0; --sk-accent: #d4af37; --sk-muted: #8a8a8a;
    --sk-title-font: 'Playfair Display', Didot, 'Bodoni MT', 'Times New Roman', serif;
    --sk-title-weight: 400; --sk-title-size: 1.75rem; --sk-title-align: center;
    --sk-title-bg: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    --sk-title-clip: text; --sk-title-fill: transparent;
    --sk-title-rule: 1px solid rgba(212,175,55,0.3);
    --sk-body-font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sk-svc-transform: uppercase; --sk-svc-spacing: 2px; --sk-svc-weight: 400;
    --sk-img-radius: 0; --sk-img-filter: sepia(20%) grayscale(50%); --sk-img-rule: 2px solid #d4af37;
    --sk-btn-bg: transparent; --sk-btn-color: #d4af37; --sk-btn-border: 1px solid #d4af37; --sk-btn-radius: 0;
    --sk-btn-transform: uppercase; --sk-btn-spacing: 2px; --sk-btn-weight: 500;
    --sk-spoiler-radius: 0; --sk-spoiler-bg: #1a1a1a; --sk-spoiler-border: 1px solid rgba(212,175,55,0.28);
    --sk-star: #d4af37; --sk-ok: #c9b06a;
}
.sk-skin[data-skin="neon"] {
    --sk-brand: #22F0C4;
    --sk-page-bg: #0a0a0a; --sk-pad: 22px; --sk-page-border: 1px solid #333;
    --sk-card-bg: #0d0d0d; --sk-card-border: 1px solid #333; --sk-card-radius: 8px; --sk-card-shadow: none;
    --sk-ink: var(--sk-brand, #E65A48); --sk-body: #ddd; --sk-accent: var(--sk-brand, #E65A48); --sk-muted: #7a7a7a;
    --sk-title-font: 'Courier New', Courier, monospace; --sk-title-weight: 800; --sk-title-transform: uppercase;
    --sk-title-rule: 1px solid var(--sk-brand, #E65A48);
    --sk-body-font: 'Courier New', Courier, monospace;
    --sk-svc-transform: uppercase; --sk-svc-spacing: 1px; --sk-svc-weight: 800;
    --sk-img-radius: 0; --sk-img-border: 1px solid var(--sk-brand, #E65A48);
    --sk-img-shadow: 0 0 8px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 55%);
    --sk-btn-bg: #000; --sk-btn-color: var(--sk-brand, #E65A48);
    --sk-btn-border: 2px solid var(--sk-brand, #E65A48); --sk-btn-radius: 4px;
    --sk-btn-font: 'Courier New', monospace; --sk-btn-weight: 800; --sk-btn-transform: uppercase;
    --sk-btn-shadow: 0 0 10px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 70%);
    --sk-spoiler-radius: 4px; --sk-spoiler-bg: #000; --sk-spoiler-border: 1px solid #333;
    --sk-ok: #4ade80;
}
.sk-skin[data-skin="neon"] .sk-ficha-title,
.sk-skin[data-skin="neon"] .sk-svc-head { text-shadow: 0 0 6px color-mix(in srgb, var(--sk-brand, #E65A48), transparent 45%); }

@media (max-width: 1080px) {
    .sk-layout { grid-template-columns: 1fr; gap: 22px; }
    .sk-picker { position: static; }
    .sk-list { max-height: none; flex-direction: row; flex-wrap: wrap; overflow: visible; }
    .sk-opt { width: auto; flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.08); }
}
@media (max-width: 780px) {
    .sk-section { padding-top: 64px; padding-bottom: 70px; }
    .sk-header { margin-bottom: 32px; }
    .sk-header .custom-h2 { font-size: 1.85rem; line-height: 1.2; }
    .sk-canvas { min-height: 0; padding: var(--sk-pad-m, 16px); }
    .sk-skin { --sk-pad-m: 16px; }
    .sk-ficha { padding: 16px; }
    .sk-ficha-title { font-size: calc(var(--sk-title-size, 1.45rem) * 0.82); }
    .sk-cols { grid-template-columns: 1fr; gap: 16px; }
    .sk-col-img img { height: 176px; }
    .sk-btns { grid-template-columns: 1fr; }
    .sk-stage-tag { display: none; }
    .sk-url { font-size: 0.64rem; }
    .sk-picker { padding: 14px; }
    .sk-opt { font-size: 0.8rem; gap: 8px; }
    .sk-chip { width: 22px; height: 22px; }
    .sk-chip::after { width: 11px; height: 11px; }
    .sk-desc { font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-canvas, .sk-ficha, .sk-ficha-title, .sk-btn, .sk-spoiler, .sk-col-img img { transition: none !important; }
    .sk-canvas.is-morphing .sk-ficha { transform: none; opacity: 1; }
    .sk-sheen { display: none; }
}

.sk-score { font-weight: 800; font-size: 1.04em; color: var(--sk-ink, #1d1d1f); transition: color .5s ease; }

@media (max-width: 780px) {
    .sk-layout { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
    .sk-picker { display: contents; }

    .sk-picker-head {
        order: 1;
        margin: 0; padding: 0 2px 2px;
        border-bottom: none;
    }
    .sk-picker-title { font-size: 0.8rem; }

    .sk-list {
        order: 2;
        display: flex; flex-direction: row; flex-wrap: nowrap;
        gap: 8px;
        max-height: none;
        min-width: 0;
        overflow-x: auto; overflow-y: hidden;
        margin: 0 -20px; padding: 3px 20px 9px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-behavior: auto;
        will-change: scroll-position;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    }
    .sk-list::-webkit-scrollbar { display: none; }

    .sk-opt {
        flex: 0 0 auto;
        white-space: nowrap;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.09);
        box-shadow: 0 1px 2px rgba(29, 29, 31, 0.05);
        padding: 8px 13px 8px 9px;
    }
    .sk-opt:hover { transform: none; background: #ffffff; }
    .sk-opt.is-active {
        background: rgba(230, 90, 72, 0.09);
        border-color: rgba(230, 90, 72, 0.38);
    }

    .sk-stage { order: 3; }
    .sk-picker-foot { order: 4; margin: 2px 2px 0; }
}

.cart-notification { pointer-events: none; }
.cart-notification.active { pointer-events: auto; }

@media (max-width: 780px) {
    .blog-slide-content { padding-left: 0 !important; padding-right: 0 !important; }
    .sticky-visual { padding-left: 0 !important; padding-right: 0 !important; }
    .feature-card-sticky {
        padding: 24px 20px !important;
        max-width: none;
        border-radius: 22px;
    }
    .feature-card-sticky > div { width: 100%; }
    .feature-desc-sticky { font-size: 0.95rem; line-height: 1.55; }

    #globalMap {
        position: relative;
        left: auto;
        right: auto;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* =========================================
   PAGINAS DE ERROR Y BUSQUEDA VACIA
   ========================================= */

/* Vive dentro de .directory-container, asi que hereda el color y la tipografia
   de la estetica que tenga puesta la web: una sola plantilla para las 25. */
.dai-error {
    max-width: 46rem;
    margin: clamp(2rem, 8vw, 5rem) auto;
    padding: 0 1.2rem;
    text-align: center;
}

.dai-error-ico img {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: cover;
}

.dai-error-emoji { font-size: 3.4rem; line-height: 1; display: block; }

.dai-error-cod {
    margin: .9rem 0 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    opacity: .45;
}

.dai-error-tit {
    margin: .5rem 0 .7rem;
    font-size: clamp(1.45rem, 4vw, 2.1rem);
    line-height: 1.2;
}

.dai-error-txt {
    margin: 0 auto 1.6rem;
    max-width: 34rem;
    line-height: 1.65;
    opacity: .8;
}

.dai-error-q { white-space: nowrap; }

.dai-error-btn {
    display: inline-block;
    padding: .72rem 1.5rem;
    border-radius: 9px;
    background: var(--main-color, var(--directorai-color));
    color: var(--dai-on-brand, #fff);
    text-decoration: none;
    font-weight: 600;
    transition: filter .2s ease, transform .2s ease;
}
.dai-error-btn:hover { filter: brightness(.92); transform: translateY(-1px); }

.dai-error-sug { margin-top: 2.6rem; }

.dai-error-sug-tit {
    margin: 0 0 .8rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .55;
}

.dai-error-sug-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.dai-error-sug-lista a {
    display: inline-block;
    padding: .42rem .9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--main-color, var(--directorai-color)), transparent 72%);
    background: color-mix(in srgb, var(--main-color, var(--directorai-color)), transparent 94%);
    color: inherit;
    text-decoration: none;
    font-size: .92rem;
    transition: background .2s ease, border-color .2s ease;
}
.dai-error-sug-lista a:hover {
    background: color-mix(in srgb, var(--main-color, var(--directorai-color)), transparent 85%);
    border-color: color-mix(in srgb, var(--main-color, var(--directorai-color)), transparent 55%);
}

.pay-section { background: linear-gradient(180deg, #faf9f7 0%, #f4f2ee 100%); position: relative; overflow: hidden; }
.pay-dots {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(29, 29, 31, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.pay-aura { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.pay-aura-violet { width: 560px; height: 560px; background: rgba(99, 91, 255, 0.16); top: 80px; left: -180px; animation: pay-drift 16s ease-in-out infinite alternate; }
.pay-aura-coral { width: 520px; height: 520px; background: rgba(230, 90, 72, 0.14); top: 520px; right: -160px; animation: pay-drift 19s ease-in-out infinite alternate-reverse; }
@keyframes pay-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 40px) scale(1.12); }
}

.pay-header { text-align: center; max-width: 820px; margin: 0 auto 64px; }
.pay-header > .pay-badge { display: block; width: fit-content; margin: 0 auto 20px; }
.pay-badge {
    background: rgba(230, 90, 72, 0.13);
    border: 1px solid rgba(230, 90, 72, 0.34);
    color: var(--accent-deep);
    padding: 6px 16px; border-radius: 20px;
    font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
}
.pay-badge i { color: #635BFF; margin-right: 4px; }
.pay-badge .fa-paypal { color: #003087; }
.pay-grad {
    background: linear-gradient(100deg, #E65A48 0%, #f0b849 38%, #635BFF 72%, #E65A48 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; padding-bottom: 0.14em; line-height: 1.18;
    animation: pay-shine 7s linear infinite;
}
@keyframes pay-shine {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}
.pay-section p.lead.pay-lead { max-width: 760px; font-size: 1.28rem; line-height: 1.6; margin-bottom: 0; }

.pay-stage {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 380px) minmax(90px, 1fr) minmax(0, 470px);
    align-items: center; gap: 0;
    max-width: 1080px; margin: 0 auto 90px;
}

.pay-checkout {
    position: relative; z-index: 2;
    background: #fff; border: 1px solid #ebeaf2; border-radius: 22px;
    padding: 22px 22px 16px;
    box-shadow: 0 30px 80px rgba(29, 29, 31, 0.13), 0 2px 6px rgba(29, 29, 31, 0.04);
    transform: perspective(1400px) rotateY(7deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pay-checkout:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.pay-co-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.pay-co-merchant { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.92rem; color: #1d1d1f; min-width: 0; }
.pay-co-merchant .js-pay-biz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-co-logo {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #E65A48, #C94733); color: #fff; font-size: 0.8rem;
}
.pay-co-secure { font-size: 0.7rem; font-weight: 600; color: #15803d; background: #ecfdf3; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.pay-co-secure i { font-size: 0.62rem; margin-right: 3px; }
.pay-co-product { display: block; font-size: 0.8rem; color: #6E6E73; margin-bottom: 2px; }
.pay-co-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.pay-co-price b { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.pay-co-period { color: #6E6E73; font-size: 0.9rem; }
.pay-co-plans {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: #f4f4f7; border-radius: 12px; padding: 4px; margin-bottom: 14px;
}
.pay-co-plan {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px;
    min-height: 40px; padding: 6px 8px; border-radius: 9px;
    font-size: 0.78rem; font-weight: 600; color: #6E6E73; text-align: center; line-height: 1.2;
    transition: color 0.35s, background 0.35s, box-shadow 0.35s;
}
.pay-co-plan em { font-style: normal; font-size: 0.64rem; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 1px 6px; }
.pay-co-plan.is-on { color: #1d1d1f; background: #fff; box-shadow: 0 2px 8px rgba(29, 29, 31, 0.1); }
.pay-co-wallets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pay-co-wallet {
    display: flex; align-items: center; justify-content: center;
    height: 38px; border-radius: 9px; border: 1px solid #dcdce3; background: #fff;
    font-size: 1.9rem; color: #1d1d1f;
}
.pay-co-wallet-dark { background: #000; border-color: #000; color: #fff; }
.pay-co-wallet-paypal { background: #ffc439; border-color: #ffc439; }
.pay-pp { display: block; flex-shrink: 0; }
.pay-co-wallet .pay-pp { width: 54px; height: 17px; }
.pay-co-or { position: relative; text-align: center; margin-bottom: 12px; }
.pay-co-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #ebebef; }
.pay-co-or span { position: relative; background: #fff; padding: 0 10px; font-size: 0.72rem; color: #8e8e93; }
.pay-co-card {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid #dcdce3; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
    color: #8e8e93; font-size: 0.9rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.pay-stage.is-typing .pay-co-card { border-color: #635BFF; box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16); }
.pay-co-number { font-family: var(--font-mono); font-size: 0.84rem; color: #1d1d1f; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; }
.pay-co-caret { width: 1.5px; height: 16px; background: #635BFF; opacity: 0; }
.pay-stage.is-typing .pay-co-caret { animation: pay-caret 0.8s steps(1) infinite; }
@keyframes pay-caret {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.pay-co-brands { margin-left: auto; display: inline-flex; gap: 5px; font-size: 1.3rem; }
.pay-co-brands .fa-cc-visa { color: #1a1f71; }
.pay-co-brands .fa-cc-mastercard { color: #eb001b; }
.pay-co-btn {
    position: relative; overflow: hidden;
    height: 46px; border-radius: 11px;
    background: linear-gradient(135deg, #635BFF, #7a73ff);
    color: #fff; font-weight: 700; font-size: 0.95rem;
    box-shadow: 0 10px 24px rgba(99, 91, 255, 0.32);
    transition: background 0.4s, box-shadow 0.4s, transform 0.2s;
}
.pay-co-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: pay-sweep 3.2s ease-in-out infinite;
}
@keyframes pay-sweep {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}
.pay-co-btn > span {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: opacity 0.3s, transform 0.3s;
}
.pay-co-btn b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-co-btn-busy, .pay-co-btn-done { opacity: 0; transform: translateY(12px); }
.pay-co-btn-busy i { animation: pay-spin 0.8s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
.pay-stage.is-pressed .pay-co-btn { transform: scale(0.97); }
.pay-stage.is-busy .pay-co-btn-idle { opacity: 0; transform: translateY(-12px); }
.pay-stage.is-busy .pay-co-btn-busy { opacity: 1; transform: none; }
.pay-stage.is-paid .pay-co-btn { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 10px 24px rgba(22, 163, 74, 0.35); }
.pay-stage.is-paid .pay-co-btn-idle, .pay-stage.is-paid .pay-co-btn-busy { opacity: 0; transform: translateY(-12px); }
.pay-stage.is-paid .pay-co-btn-done { opacity: 1; transform: none; }
.pay-stage.is-paid .pay-co-btn-done i { animation: pay-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pay-pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
.pay-co-foot { display: flex; justify-content: center; align-items: center; gap: 14px; color: #b5b5bd; font-size: 2rem; line-height: 1; margin-top: 8px; height: 26px; overflow: hidden; }
.pay-co-foot .pay-pp { width: 54px; height: 17px; }
.pay-co-foot .pay-pp path { fill: currentColor; }
.pay-coins { position: absolute; left: 50%; bottom: 62px; width: 0; height: 0; pointer-events: none; }
.pay-coins i {
    position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3c4, #f0b849 55%, #d9922a);
    box-shadow: 0 2px 6px rgba(217, 146, 42, 0.45);
    opacity: 0;
}
.pay-stage.is-paid .pay-coins i { animation: pay-coin 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.pay-coins i:nth-child(1) { --x: -120px; --y: -90px; --r: -140deg; }
.pay-coins i:nth-child(2) { --x: -70px; --y: -150px; --r: 90deg; animation-delay: 0.04s; }
.pay-coins i:nth-child(3) { --x: -15px; --y: -175px; --r: 200deg; animation-delay: 0.08s; }
.pay-coins i:nth-child(4) { --x: 45px; --y: -160px; --r: -80deg; animation-delay: 0.02s; }
.pay-coins i:nth-child(5) { --x: 105px; --y: -110px; --r: 160deg; animation-delay: 0.06s; }
.pay-coins i:nth-child(6) { --x: 140px; --y: -40px; --r: -200deg; animation-delay: 0.1s; }
.pay-coins i:nth-child(7) { --x: -150px; --y: -30px; --r: 120deg; animation-delay: 0.12s; }
.pay-coins i:nth-child(8) { --x: -40px; --y: -120px; --r: -60deg; animation-delay: 0.14s; width: 12px; height: 12px; }
.pay-coins i:nth-child(9) { --x: 80px; --y: -200px; --r: 60deg; animation-delay: 0.16s; width: 13px; height: 13px; }
.pay-coins i:nth-child(10) { --x: 10px; --y: -95px; --r: -120deg; animation-delay: 0.18s; width: 11px; height: 11px; }
@keyframes pay-coin {
    0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0); }
    15% { opacity: 1; }
    70% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
    100% { opacity: 0; transform: translate(calc(var(--x) * 1.08), calc(var(--y) + 40px)) scale(0.8) rotate(var(--r)); }
}

.pay-flow { position: relative; height: 100%; min-height: 60px; display: flex; align-items: center; }
.pay-flow-line {
    position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; transform: translateY(-50%);
    background-image: linear-gradient(90deg, rgba(99, 91, 255, 0.55) 50%, transparent 50%);
    background-size: 14px 2px;
    animation: pay-dash 1.1s linear infinite;
}
@keyframes pay-dash { to { background-position: 14px 0; } }
.pay-flow-coin {
    position: absolute; left: 0; top: 50%; z-index: 3;
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #fff3c4, #f0b849 55%, #d9922a);
    color: #7a4a0c; font-size: 0.95rem;
    box-shadow: 0 0 0 6px rgba(240, 184, 73, 0.22), 0 10px 26px rgba(217, 146, 42, 0.5);
    opacity: 0;
}
.pay-stage.is-flowing .pay-flow-coin { animation: pay-travel 1s cubic-bezier(0.55, 0, 0.3, 1) forwards; }
@keyframes pay-travel {
    0% { left: 0; opacity: 0; transform: scale(0.4); }
    18% { opacity: 1; transform: scale(1.1); }
    82% { opacity: 1; transform: scale(1); }
    100% { left: 100%; opacity: 0; transform: scale(0.5); }
}

.pay-dash {
    position: relative; z-index: 2;
    background: linear-gradient(160deg, #17171a 0%, #0f0f10 100%);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px;
    padding: 22px 24px 20px; color: #fff; overflow: hidden;
    box-shadow: 0 34px 90px rgba(15, 15, 16, 0.32);
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pay-dash:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.pay-dash::before {
    content: ""; position: absolute; width: 320px; height: 320px; top: -160px; right: -120px; border-radius: 50%;
    background: rgba(99, 91, 255, 0.28); filter: blur(70px); pointer-events: none;
}
.pay-dash-head { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pay-dash-brand { font-size: 2.6rem; line-height: 1; height: 30px; overflow: hidden; color: #fff; display: inline-flex; align-items: center; gap: 14px; }
.pay-dash-brand .pay-pp { width: 69px; height: 22px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
.pay-dash-brand .pay-pp path { fill: #fff; }
.pay-dash-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #4ade80; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 999px; padding: 4px 10px;
}
.pay-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: pay-live 1.6s ease-in-out infinite; }
@keyframes pay-live {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
}
.pay-section p.pay-dash-label { position: relative; margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.pay-dash-total {
    position: relative; margin: 2px 0 12px;
    font-family: var(--font-display); font-size: 2.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(115deg, #f0b849, #ffe6a8 55%, #f0b849);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    transition: transform 0.3s;
}
.pay-stage.is-counting .pay-dash-total { transform: scale(1.04); }
.pay-chart { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-bottom: 14px; }
.pay-chart i {
    flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, rgba(122, 115, 255, 0.95), rgba(99, 91, 255, 0.25));
    transform-origin: bottom; transform: scaleY(0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.pay-stage.active .pay-chart i { transform: scaleY(1); }
.pay-chart i:nth-child(2) { transition-delay: 0.04s; }
.pay-chart i:nth-child(3) { transition-delay: 0.08s; }
.pay-chart i:nth-child(4) { transition-delay: 0.12s; }
.pay-chart i:nth-child(5) { transition-delay: 0.16s; }
.pay-chart i:nth-child(6) { transition-delay: 0.2s; }
.pay-chart i:nth-child(7) { transition-delay: 0.24s; }
.pay-chart i:nth-child(8) { transition-delay: 0.28s; }
.pay-chart i:nth-child(9) { transition-delay: 0.32s; }
.pay-chart i:nth-child(10) { transition-delay: 0.36s; }
.pay-chart i:nth-child(11) { transition-delay: 0.4s; }
.pay-chart i.pay-chart-now { transition-delay: 0.44s; background: linear-gradient(180deg, #ffe6a8, #f0b849 60%, rgba(240, 184, 73, 0.35)); box-shadow: 0 0 18px rgba(240, 184, 73, 0.45); }
.pay-stage.is-counting .pay-chart-now { animation: pay-bump 0.6s ease-out; }
@keyframes pay-bump {
    0% { transform: scaleY(1); }
    40% { transform: scaleY(1.12); }
    100% { transform: scaleY(1); }
}
.pay-dash-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pay-stat {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px; padding: 8px 10px; min-width: 0;
}
.pay-stat-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); line-height: 1.25; }
.pay-stat b { font-size: 1rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.pay-stat b.pay-stat-on { color: #4ade80; font-size: 1.25rem; }
.pay-section .pay-feed { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pay-section .pay-feed li.pay-feed-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px; padding: 8px 10px; margin: 0;
    color: #fff; font-size: 0.8rem; line-height: 1.3;
}
.pay-section .pay-feed li.pay-feed-row::before { display: none; }
.pay-feed-icon {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(230, 90, 72, 0.18); color: #ff8f7e; font-size: 0.72rem;
}
.pay-feed-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pay-feed-info b { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-feed-info span { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-feed-amount { font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-section .pay-feed li.pay-feed-new { animation: pay-row-in 0.7s cubic-bezier(0.16, 1, 0.3, 1); border-color: rgba(240, 184, 73, 0.45); background: rgba(240, 184, 73, 0.1); }
@keyframes pay-row-in {
    0% { opacity: 0; transform: translateY(-14px) scale(0.97); max-height: 0; }
    100% { opacity: 1; transform: none; max-height: 60px; }
}
.pay-toast {
    position: absolute; right: 16px; top: 16px; z-index: 4;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #1d1d1f; border-radius: 12px; padding: 9px 13px;
    font-size: 0.8rem; font-weight: 600; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    opacity: 0; transform: translateY(-16px) scale(0.95); pointer-events: none;
    transition: opacity 0.35s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pay-toast i { color: #16a34a; }
.pay-stage.is-toast .pay-toast { opacity: 1; transform: none; }

.pay-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 70px; }
.pay-steps-track { position: absolute; left: 12.5%; right: 12.5%; top: 25px; height: 3px; border-radius: 3px; background: rgba(29, 29, 31, 0.08); overflow: hidden; }
.pay-steps-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #E65A48, #f0b849, #635BFF); transform-origin: left; transform: scaleX(0); transition: transform 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.pay-steps.active .pay-steps-fill { transform: scaleX(1); }
.pay-step { position: relative; text-align: center; padding: 0 6px; }
.pay-step-num {
    position: relative; z-index: 1;
    width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid rgba(29, 29, 31, 0.1);
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: #1d1d1f;
    box-shadow: 0 8px 22px rgba(29, 29, 31, 0.08);
    transition: border-color 0.4s, box-shadow 0.4s, color 0.4s, transform 0.4s;
}
.pay-step.is-current .pay-step-num { border-color: #E65A48; color: #E65A48; transform: scale(1.08); box-shadow: 0 0 0 7px rgba(230, 90, 72, 0.14), 0 10px 26px rgba(230, 90, 72, 0.25); }
.pay-step-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(230, 90, 72, 0.14), rgba(240, 184, 73, 0.16));
    color: var(--accent-deep); font-size: 1rem;
}
.pay-section .pay-step h3 { font-size: 1.12rem !important; margin: 0 0 8px !important; color: #1d1d1f; }
.pay-section .pay-step p { font-size: 0.9rem; line-height: 1.55; color: var(--text-light); margin: 0; }

.pay-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 70px; }
.pay-feat {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid #ececec; border-radius: 20px;
    padding: 26px 24px 24px;
    box-shadow: 0 18px 50px rgba(29, 29, 31, 0.06);
}
.pay-feat::after {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(240, 184, 73, 0.14), transparent);
    transition: left 0.9s ease;
}
.pay-feat:hover::after { left: 130%; }
.pay-feat-icon {
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #E65A48, #C94733); color: #fff; font-size: 1.1rem;
    box-shadow: 0 10px 22px rgba(230, 90, 72, 0.28);
}
.pay-feat:nth-child(3n+2) .pay-feat-icon { background: linear-gradient(135deg, #f0b849, #e8a63a); box-shadow: 0 10px 22px rgba(232, 166, 58, 0.3); }
.pay-feat:nth-child(3n) .pay-feat-icon { background: linear-gradient(135deg, #7a73ff, #635BFF); box-shadow: 0 10px 22px rgba(99, 91, 255, 0.28); }
.pay-section .pay-feat h3 { font-size: 1.14rem !important; margin: 0 0 8px !important; color: #1d1d1f; }
.pay-section .pay-feat p { font-size: 0.92rem; line-height: 1.58; color: var(--text-light); margin: 0; }

.pay-calc {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
    background: linear-gradient(150deg, #17171a 0%, #0f0f10 60%, #141019 100%);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px;
    padding: 46px 48px; color: #fff;
    box-shadow: 0 40px 100px rgba(15, 15, 16, 0.28);
}
.pay-calc-glow { position: absolute; width: 520px; height: 520px; right: -140px; bottom: -260px; border-radius: 50%; background: rgba(240, 184, 73, 0.16); filter: blur(90px); pointer-events: none; }
.pay-calc-inputs, .pay-calc-result { position: relative; }
.pay-section .pay-calc h3 { color: #fff; font-size: 1.8rem !important; margin: 0 0 8px !important; }
.pay-section p.pay-calc-intro { color: rgba(255, 255, 255, 0.6); font-size: 1rem; line-height: 1.55; margin: 0 0 26px; }
.pay-range { display: block; margin-bottom: 20px; cursor: pointer; }
.pay-range-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); }
.pay-range-top b { font-family: var(--font-display); font-size: 1.15rem; color: #ffe6a8; font-variant-numeric: tabular-nums; }
.pay-section .pay-calc .pay-range input[type="range"] {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; height: 8px; min-height: 0; border-radius: 999px; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none;
    background-color: transparent;
    background-image: linear-gradient(90deg, #E65A48, #f0b849), linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
    background-size: var(--p, 50%) 100%, 100% 100%;
    background-repeat: no-repeat;
}
.pay-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 5px solid #f0b849;
    box-shadow: 0 0 0 6px rgba(240, 184, 73, 0.18), 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s;
}
.pay-range input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 5px solid #f0b849;
    box-shadow: 0 0 0 6px rgba(240, 184, 73, 0.18), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.pay-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.pay-section .pay-calc .pay-range input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(240, 184, 73, 0.5); }
.pay-calc-result {
    text-align: center;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px; padding: 30px 26px 28px;
}
.pay-calc-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.pay-calc-month, .pay-calc-year {
    display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(115deg, #f0b849, #ffe6a8 55%, #f0b849);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pay-calc-month { font-size: 2.4rem; margin: 4px 0 14px; }
.pay-calc-year { font-size: 3.6rem; margin: 4px 0 8px; }
.pay-section p.pay-calc-note { font-size: 0.74rem; color: rgba(255, 255, 255, 0.4); margin: 0 0 18px; }
.pay-section p.pay-calc-cta-line { font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 0 0 20px; }
.pay-calc .mon-btn { margin: 0 auto; }

@media (max-width: 1080px) {
    .pay-stage { grid-template-columns: minmax(0, 360px) minmax(60px, 1fr) minmax(0, 430px); }
}
@media (max-width: 900px) {
    .pay-header { margin-bottom: 44px; }
    .pay-stage { grid-template-columns: 1fr; justify-items: center; margin-bottom: 64px; }
    .pay-checkout, .pay-dash { width: 100%; max-width: 440px; min-width: 0; transform: none; }
    .pay-checkout:hover, .pay-dash:hover { transform: none; }
    .pay-flow { width: 100%; height: 76px; min-height: 76px; justify-content: center; }
    .pay-flow-line {
        left: 50%; right: auto; top: -8px; bottom: -8px; width: 2px; height: auto; transform: translateX(-50%);
        background-image: linear-gradient(180deg, rgba(99, 91, 255, 0.55) 50%, transparent 50%);
        background-size: 2px 14px;
        animation-name: pay-dash-v;
    }
    .pay-flow-coin { left: 50%; top: 0; margin: -19px 0 0 -19px; }
    .pay-stage.is-flowing .pay-flow-coin { animation-name: pay-travel-v; }
    .pay-steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
    .pay-steps-track { display: none; }
    .pay-features { grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 56px; }
    .pay-calc { grid-template-columns: 1fr; gap: 28px; padding: 34px 28px; }
}
@keyframes pay-dash-v { to { background-position: 0 14px; } }
@keyframes pay-travel-v {
    0% { top: 0; opacity: 0; transform: scale(0.4); }
    18% { opacity: 1; transform: scale(1.1); }
    82% { opacity: 1; transform: scale(1); }
    100% { top: 100%; opacity: 0; transform: scale(0.5); }
}
@media (max-width: 640px) {
    .pay-section { padding: 72px 0; }
    .pay-section p.lead.pay-lead { font-size: 1.05rem; }
    .pay-checkout { padding: 18px 16px 12px; border-radius: 18px; }
    .pay-dash { padding: 18px 16px 16px; border-radius: 18px; }
    .pay-co-price b { font-size: 1.8rem; }
    .pay-dash-total { font-size: 2.2rem; }
    .pay-steps { grid-template-columns: 1fr; row-gap: 26px; }
    .pay-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; text-align: left; align-items: start; }
    .pay-step-num { grid-row: span 3; margin: 0; }
    .pay-step-icon { display: none; }
    .pay-features { grid-template-columns: 1fr; gap: 14px; margin-bottom: 48px; }
    .pay-feat { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: start; padding: 18px 16px; border-radius: 16px; }
    .pay-feat-icon { grid-row: span 2; margin-bottom: 0; }
    .pay-steps { margin-bottom: 48px; }
    .pay-calc { padding: 28px 20px; border-radius: 22px; }
    .pay-section .pay-calc h3 { font-size: 1.45rem !important; }
    .pay-calc-month { font-size: 2rem; }
    .pay-calc-year { font-size: 2.7rem; }
    .pay-toast { right: 10px; top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .pay-aura, .pay-grad, .pay-co-btn::after, .pay-flow-line, .pay-live-dot { animation: none; }
    .pay-checkout, .pay-dash { transform: none; }
    .pay-chart i, .pay-steps-fill { transition: none; transform: none; }
}

.pricing-card {
    scroll-margin-top: 110px;
}
.pricing-card.dai-plan-destacado {
    animation: daiPlanDestacado 2.4s cubic-bezier(0.16, 1, 0.3, 1) 1;
}
@keyframes daiPlanDestacado {
    0% { box-shadow: 0 0 0 0 rgba(230, 90, 72, 0.55); }
    60% { box-shadow: 0 0 0 22px rgba(230, 90, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 90, 72, 0); }
}
.mode-panel .mode-plan-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    vertical-align: top;
    box-shadow: 0 8px 18px -8px rgba(29, 29, 31, 0.5);
}
.mode-panel .mode-plan-pill i {
    color: var(--accent);
    font-size: 0.7rem;
}
.mode-panel.mode-blog .mode-plan-pill {
    margin-left: 0;
}
.mode-panel.mode-blog .mode-blog-cab {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.mode-panel.mode-blog .mode-blog-cab .mode-blog-iconbox,
.mode-panel.mode-blog .mode-blog-cab .mode-plan-pill {
    margin: 0;
}
@media (min-width: 769px) {
    .mode-panel.mode-blog .blog-slide-content {
        padding-top: 84px;
    }
}
@media (max-width: 768px) {
    .mode-panel.mode-blog .mode-blog-cab {
        justify-content: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pricing-card.dai-plan-destacado { animation: none; }
}
:lang(en) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Hi,'; }
:lang(fr) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Bonjour,'; }
:lang(de) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Hallo,'; }
:lang(pt) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Olá,'; }
:lang(it) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Ciao,'; }
:lang(nl) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Hoi,'; }
:lang(ca) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Hola,'; }
:lang(el) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Γεια σας,'; }
:lang(ru) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 Здравствуйте,'; }
:lang(ja) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 こんにちは、'; }
:lang(zh) .woocommerce-MyAccount-content > p:first-of-type::before { content: '👋 你好，'; }
.woocommerce-MyAccount-content > p:first-of-type::before { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .woocommerce-account .woocommerce { padding: 0; }
    .woocommerce-MyAccount-content { padding: 22px 14px; }
    .license-box-wrapper { padding: 20px 12px; }
    .license-item { min-width: 0; width: 100%; }
    .license-display {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 0.95rem;
        letter-spacing: 0;
        padding: 10px 12px;
        white-space: nowrap;
    }
}
.agentic-section .kw-lab-lista, .agentic-section .serp-src-card ul { margin-left: 0; padding-left: 0; }
.agentic-section .kw-lab-lista li, .agentic-section .serp-src-card li { margin: 0; }
.kw-lab {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 64px;
    align-items: center;
    margin-top: 120px;
}
.kw-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #F08778;
    border: 1px solid rgba(240, 135, 120, 0.45);
    background: rgba(230, 90, 72, 0.12);
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.kw-lab-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.12;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 18px;
}
.kw-grad {
    background: linear-gradient(90deg, #F08778 0%, #E65A48 55%, #ffb199 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kw-lab-lead { color: #D2D2D7; font-size: 1.05rem; line-height: 1.6; margin: 0 0 22px; }
.kw-lab-lista { list-style: none; margin: 0; padding: 0; }
.agentic-section .kw-lab-lista li {
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #e5e7eb;
    font-size: 0.97rem;
    line-height: 1.5;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.agentic-section .kw-lab-lista li:last-child { border-bottom: 0; }
.kw-lab-lista i {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(230, 90, 72, 0.16);
    color: #F08778;
    font-size: 0.85rem;
}

.serp-src { margin-top: 120px; }
.serp-src-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
}
.serp-src-lead { color: #D2D2D7; font-size: 1.05rem; max-width: 680px; margin: 0 auto 40px; line-height: 1.6; }
.serp-src-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.serp-src-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.serp-src-card::before {
    content: "";
    position: absolute;
    inset: -40% -40% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 90, 72, 0.35), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.serp-src-card:hover {
    transform: translateY(-6px);
    border-color: rgba(240, 135, 120, 0.55);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}
.serp-src-card:hover::before { opacity: 1; }
.serp-src-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.serp-src-nombre { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #ffffff; }
.serp-src-etiqueta {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1d1d1f;
    background: #F08778;
    padding: 4px 10px;
    border-radius: 999px;
}
.serp-src-card ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.agentic-section .serp-src-card li { list-style: none; display: flex; gap: 10px; color: #e5e7eb; font-size: 0.92rem; line-height: 1.45; padding: 5px 0; }
.serp-src-card li i { color: #F08778; margin-top: 4px; font-size: 0.8rem; }
.serp-src-precio {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #F08778;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px;
}

@media (max-width: 1100px) {
    .kw-lab { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
    .serp-src-grid { grid-template-columns: 1fr; }
    .kw-lab, .serp-src { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .serp-src-card { transition: none !important; }
}

.agentic-section .ag-cab { margin-bottom: 56px; }
.agentic-section .ag-cab .lead { margin-bottom: 0; }
.ag-demo { position: relative; perspective: 1800px; }
.ag-marco {
    position: relative;
    border-radius: 26px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transform-origin: 50% 0;
    transform: rotateX(12deg) scale(0.96);
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.ag-demo.active .ag-marco { transform: none; }
.ag-marco::before {
    content: "";
    position: absolute;
    top: 45%;
    left: var(--ag-luz, 17%);
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 90, 72, 0.26) 0%, rgba(230, 90, 72, 0) 65%);
    transform: translate(-50%, -50%);
    transition: left 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}
.ag-demo[data-paso="1"] .ag-marco { --ag-luz: 50%; }
.ag-demo[data-paso="2"] .ag-marco { --ag-luz: 83%; }

.ag-barra {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 2px 4px 18px;
}
.ag-puntos { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.ag-puntos i { display: block; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.ag-puntos i:nth-child(1) { background: #ff5f57; }
.ag-puntos i:nth-child(2) { background: #febc2e; }
.ag-puntos i:nth-child(3) { background: #28c840; }
.ag-pasos { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.agentic-section button.ag-paso {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 12px 6px 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.55) !important;
    cursor: pointer;
    transition: color 0.4s ease, background 0.4s ease;
}
.agentic-section button.ag-paso:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.06); opacity: 1; }
.agentic-section button.ag-paso:focus-visible { outline: 2px solid #F08778; outline-offset: 2px; }
.agentic-section button.ag-paso.is-on { color: #ffffff !important; }
.ag-paso-n {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ag-paso.is-hecho .ag-paso-n { background: rgba(230, 90, 72, 0.18); border-color: rgba(240, 135, 120, 0.6); color: #F08778; }
.ag-paso.is-on .ag-paso-n {
    background: #E65A48;
    border-color: #E65A48;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(230, 90, 72, 0.18), 0 0 26px rgba(230, 90, 72, 0.6);
}
.ag-paso-linea { position: relative; flex: 0 1 90px; height: 10px; }
.ag-paso-linea::before,
.ag-paso-linea i { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px; }
.ag-paso-linea::before { background: rgba(255, 255, 255, 0.12); }
.ag-paso-linea i {
    display: block;
    background: linear-gradient(90deg, #C94733, #F08778);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.ag-paso-linea.is-llena i { transform: scaleX(1); }
.ag-paso-linea::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px 2px #F08778;
    opacity: 0;
}
.ag-paso-linea.is-chispa::after { animation: agChispa 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes agChispa {
    0% { left: 0; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.agentic-section button.ag-otra {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, border-color 0.3s ease;
}
.agentic-section button.ag-otra:hover { color: #ffffff !important; border-color: rgba(240, 135, 120, 0.7); transform: rotate(-200deg); opacity: 1; }
.agentic-section button.ag-otra:focus-visible { outline: 2px solid #F08778; outline-offset: 2px; }
.ag-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.ag-paneles {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.ag-nodo {
    position: absolute;
    z-index: 3;
    top: 214px;
    left: calc(33.333% - 17px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1f;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, opacity 0.45s ease;
}
.ag-demo.is-reinicio .ag-nodo { opacity: 0; }
.ag-nodo + .ag-nodo { left: calc(66.666% - 11px); }
.ag-nodo.is-llena { background: #E65A48; border-color: #F08778; color: #ffffff; box-shadow: 0 0 18px rgba(230, 90, 72, 0.55); }
.ag-nodo.is-chispa { animation: agNodo 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes agNodo {
    0% { transform: scale(1); }
    45% { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(230, 90, 72, 0.22), 0 0 30px rgba(230, 90, 72, 0.8); }
    100% { transform: scale(1); }
}
.ag-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.ag-demo.is-js .ag-panel:not(.is-on):not(.is-hecho) { opacity: 0.55; filter: saturate(0.25) brightness(0.5); transform: scale(0.985); }
.ag-tarjeta {
    position: relative;
    flex: 1;
    min-height: 456px;
    border-radius: 18px;
    padding: 16px;
    overflow: hidden;
    transition: box-shadow 0.6s ease, opacity 0.45s ease;
}
.ag-demo.is-reinicio .ag-tarjeta { opacity: 0; }
.ag-panel.is-on .ag-tarjeta { box-shadow: 0 0 0 1px rgba(240, 135, 120, 0.55), 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 50px rgba(230, 90, 72, 0.2); }
.agentic-section p.ag-pie { margin: 0; padding: 0 4px; min-height: 3em; font-size: 0.86rem; line-height: 1.5; color: #a1a1aa; transition: color 0.5s ease; }
.agentic-section .ag-panel.is-on p.ag-pie,
.agentic-section .ag-panel.is-hecho p.ag-pie { color: #e5e7eb; }

.ag-serp { background: #ffffff; color: #1d1d1f; }
.ag-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.ag-panel.is-on .ag-busca { border-color: #f6c7be; box-shadow: 0 6px 18px rgba(230, 90, 72, 0.14); }
.ag-g {
    font-size: 1.05rem;
    background: conic-gradient(from -40deg, #ea4335 0deg 95deg, #4285f4 95deg 185deg, #34a853 185deg 275deg, #fbbc05 275deg 360deg);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ag-q { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ag-lupa { color: #94a3b8; font-size: 0.85rem; transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ag-busca.is-buscando .ag-lupa { color: #E65A48; transform: scale(1.3); }
.ag-fuentes { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 2px; }
.ag-serp .ag-fuentes,
.ag-serp .ag-bloque { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.ag-panel.is-res .ag-serp .ag-fuentes,
.ag-panel.is-res .ag-serp .ag-bloque { opacity: 1; transform: none; }
.ag-panel.is-res .ag-serp .ag-bloque:nth-child(3) { transition-delay: 0.08s; }
.ag-panel.is-res .ag-serp .ag-bloque:nth-child(4) { transition-delay: 0.16s; }
.ag-panel.is-res .ag-serp .ag-bloque:nth-child(5) { transition-delay: 0.24s; }
.ag-fuentes span {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.ag-fuentes span.is-on { background: #E65A48; color: #ffffff; box-shadow: 0 4px 12px rgba(230, 90, 72, 0.35); }
.ag-bloque { border-top: 1px solid #f1f5f9; padding: 10px 0 6px; }
.ag-rotulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.ag-ia .ag-rotulo { color: #C94733; }
.ag-ia-caja { position: relative; min-height: 86px; padding: 9px 11px; border-radius: 10px; background: linear-gradient(135deg, #fff5f3 0%, #fdf2f8 100%); }
.ag-esq { position: absolute; top: 12px; left: 11px; right: 11px; display: flex; flex-direction: column; gap: 9px; opacity: 0; transition: opacity 0.35s ease; }
.ag-esq i { display: block; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #f6d9d3 0%, #fffaf9 50%, #f6d9d3 100%); background-size: 200% 100%; }
.ag-esq i:nth-child(2) { width: 88%; }
.ag-esq i:nth-child(3) { width: 62%; }
.ag-panel.is-res:not(.is-ia) .ag-esq { opacity: 1; }
.ag-panel.is-res:not(.is-ia) .ag-esq i { animation: agBrillo 1.1s linear infinite; }
@keyframes agBrillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ag-ia-t { display: block; font-size: 0.78rem; line-height: 1.5; color: #1d1d1f; opacity: 0; filter: blur(6px); transition: opacity 0.8s ease, filter 0.8s ease; }
.ag-panel.is-ia .ag-ia-t { opacity: 1; filter: none; }
.ag-paa span,
.ag-res span { display: block; opacity: 0; transform: translateX(-8px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.ag-paa span {
    position: relative;
    padding: 6px 18px 6px 0;
    border-bottom: 1px dashed #eef2f7;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ag-paa span:last-child { border-bottom: 0; }
.ag-paa span::after {
    content: "\f078";
    position: absolute;
    right: 2px;
    top: 7px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.58rem;
    color: #94a3b8;
}
.ag-res span { position: relative; padding: 5px 0 5px 22px; }
.ag-res b { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 0.62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background 0.4s ease, color 0.4s ease; }
.ag-res em { display: block; font-style: normal; font-size: 0.78rem; font-weight: 600; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-res span::after { content: ""; display: block; height: 5px; width: 74%; margin-top: 5px; border-radius: 4px; background: #eef1f5; }
.ag-res span:nth-child(2)::after { width: 62%; }
.ag-res span:nth-child(3)::after { width: 68%; }
.ag-paa span.is-in,
.ag-res span.is-in { opacity: 1; transform: none; }
.ag-res span.is-copia b { background: #E65A48; color: #ffffff; }
.ag-res span.is-copia em { color: #C94733; }

.ag-lee { display: flex; flex-direction: column; background: #121214; border: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; }
.ag-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ag-doc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    aspect-ratio: 3 / 4;
    padding: 24px 9px 9px;
    border-radius: 10px;
    background: #1c1c1f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.5s ease;
}
.ag-doc.is-in { opacity: 1; transform: none; }
.ag-doc > i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.ag-doc > i.ag-doc-tit { height: 8px; width: 82%; margin-bottom: 3px; background: rgba(255, 255, 255, 0.3); }
.ag-doc > i.ag-doc-corta { width: 56%; }
.ag-doc-n { position: absolute; top: 6px; left: 9px; font-size: 0.62rem; font-weight: 700; color: #9ca3af; }
.ag-doc-h2 {
    margin-top: auto;
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(230, 90, 72, 0.16);
    color: #F08778;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ag-doc-ok {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #22c55e;
    color: #ffffff;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ag-doc.is-leido { border-color: rgba(74, 222, 128, 0.35); }
.ag-doc.is-leido .ag-doc-h2,
.ag-doc.is-leido .ag-doc-ok { opacity: 1; transform: none; }
.ag-doc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 34%;
    background: linear-gradient(180deg, rgba(240, 135, 120, 0) 0%, rgba(240, 135, 120, 0.32) 75%, #F08778 100%);
    box-shadow: 0 3px 12px rgba(240, 135, 120, 0.55);
    transform: translateY(-100%);
    opacity: 0;
}
.ag-doc.is-leyendo::after { animation: agEscaneo 1s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
@keyframes agEscaneo {
    0% { transform: translateY(-100%); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(300%); opacity: 0; }
}
.ag-lee .ag-rotulo { color: #9ca3af; }
.ag-temas { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; min-height: 66px; margin-bottom: 16px; }
.ag-temas span {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e5e7eb;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    filter: blur(4px);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease;
}
.ag-temas span.is-in { opacity: 1; transform: none; filter: none; }
.ag-lee .ag-rotulo-falta { color: #F08778; }
.ag-falta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(230, 90, 72, 0.28) 0%, rgba(240, 135, 120, 0.1) 100%);
    border: 1px solid rgba(240, 135, 120, 0.6);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
}
.ag-falta span::before { content: "+"; font-size: 1rem; line-height: 1; color: #F08778; }
.ag-falta span.is-in { opacity: 1; transform: none; box-shadow: 0 0 0 4px rgba(230, 90, 72, 0.12), 0 0 28px rgba(230, 90, 72, 0.45); }
.ag-cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ag-cifra { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-cifra b { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1; color: #ffffff; }
.ag-cifra-t { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-demo.is-vivo .ag-falta span.is-in { animation: agLatido 2.6s ease-in-out 0.7s infinite; }
@keyframes agLatido {
    50% { box-shadow: 0 0 0 8px rgba(230, 90, 72, 0.05), 0 0 38px rgba(230, 90, 72, 0.65); }
}

.ag-art { display: flex; flex-direction: column; padding: 0; background: #ffffff; color: #1d1d1f; }
.ag-img { position: relative; flex: 0 0 auto; height: 112px; overflow: hidden; background: #2b141a; }
.ag-img-arte {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter: blur(16px) saturate(0.3);
    transform: scale(1.18);
    transition: opacity 0.9s ease, filter 1.7s ease, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-panel.is-img .ag-img-arte { opacity: 1; filter: none; transform: none; }
.ag-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-100%);
}
.ag-panel.is-gen .ag-img::after { animation: agBarrido 1.5s ease-in-out; }
@keyframes agBarrido { to { transform: translateX(100%); } }
.ag-img-tag {
    position: absolute;
    left: 10px;
    bottom: 9px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 700;
}
.ag-h1 { margin: 14px 16px 6px; min-height: 2.6em; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: #1d1d1f; }
.ag-intro { margin: 0 16px 12px; min-height: 4.5em; font-size: 0.76rem; line-height: 1.5; color: #4b4b50; }
.ag-h2s { margin: 0 16px; }
.ag-h2 { margin-bottom: 10px; opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.ag-h2 b { display: block; font-size: 0.78rem; font-weight: 700; line-height: 1.35; color: #1d1d1f; }
.ag-h2 b::before {
    content: "H2";
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #fff1ee;
    color: #C94733;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    vertical-align: 1px;
}
.ag-h2 i { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: #eef0f4; transform: scaleX(0); transform-origin: left center; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s; }
.ag-h2 i + i { width: 72%; transition-delay: 0.3s; }
.ag-h2.is-in { opacity: 1; transform: none; }
.ag-h2.is-in i { transform: scaleX(1); }
.ag-art-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: auto 16px 14px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.ag-panel.is-fin .ag-art-pie { opacity: 1; transform: none; }
.ag-pub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; font-size: 0.7rem; line-height: 1.35; color: #4b4b50; }
.ag-pub i { color: #C94733; }
.ag-pub b { font-weight: 700; color: #1d1d1f; }
.ag-nota { position: relative; flex: 0 0 52px; width: 52px; height: 52px; }
.ag-nota svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ag-nota-fondo { fill: none; stroke: #eef0f4; stroke-width: 3.4; }
.ag-nota-arco { fill: none; stroke: #22c55e; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ag-panel.is-fin .ag-nota-arco { stroke-dashoffset: 2; }
.ag-nota b { position: absolute; left: 0; right: 0; top: 13px; text-align: center; font-size: 0.92rem; font-weight: 800; line-height: 1; color: #1d1d1f; }
.ag-nota small { position: absolute; left: 0; right: 0; top: 30px; text-align: center; font-size: 0.48rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; color: #22c55e; }

.ag-resto { visibility: hidden; }
.ag-caret { margin: 0 -1px; border-left: 2px solid #E65A48; animation: agCaret 1s steps(1) infinite; }
.ag-caret.is-fuera { border-left-color: transparent; animation: none; }
@keyframes agCaret { 50% { opacity: 0; } }

.kwd {
    position: relative;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.kwd-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.kwd-luz {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3);
    border-radius: 10px;
    background: linear-gradient(135deg, #E65A48 0%, #C94733 100%);
    box-shadow: 0 6px 18px rgba(230, 90, 72, 0.45);
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.kwd[data-modo="1"] .kwd-luz { transform: translateX(100%); }
.kwd[data-modo="2"] .kwd-luz { transform: translateX(200%); }
.agentic-section button.kwd-tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 10px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer;
    transition: color 0.35s ease;
}
.agentic-section button.kwd-tab:hover { color: #ffffff !important; opacity: 1; }
.agentic-section button.kwd-tab.is-on { color: #ffffff !important; }
.agentic-section button.kwd-tab:focus-visible { outline: 2px solid #F08778; outline-offset: 2px; }
.kwd-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.kwd-campo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 7px 11px;
    border-radius: 10px;
    background: #ffffff;
    transition: opacity 0.4s ease, box-shadow 0.4s ease;
}
.kwd-campo-k { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; }
.kwd-campo-v { min-height: 1.35em; font-size: 0.86rem; font-weight: 600; line-height: 1.35; color: #1d1d1f; white-space: nowrap; overflow: hidden; }
.kwd-campo.is-off { opacity: 0.3; }
.kwd-campo.is-on { box-shadow: 0 0 0 2px rgba(240, 135, 120, 0.85); }
.kwd-progreso { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kwd-boton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #1d1d1f;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.4s ease;
}
.kwd-boton svg { display: block; flex: 0 0 15px; width: 15px; height: 15px; color: #E65A48; }
.kwd-boton.is-pulsa { transform: scale(0.93); box-shadow: 0 0 0 6px rgba(230, 90, 72, 0.3); }
.kwd-barra { position: relative; flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.kwd-barra i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #C94733, #E65A48, #F08778);
    box-shadow: 0 0 14px rgba(230, 90, 72, 0.6);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kwd-progreso b { min-width: 3.2em; text-align: right; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: #F08778; }
.kwd-estado { min-height: 1.45em; margin-bottom: 12px; font-size: 0.82rem; line-height: 1.45; color: #D2D2D7; transition: color 0.4s ease; }
.kwd-estado.is-fin { color: #4ade80; font-weight: 700; }
.kwd-filas { display: grid; gap: 7px; }
.kwd-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 116px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.45s ease, border-color 0.45s ease;
}
.kwd-fila.is-in { opacity: 1; transform: none; }
.kwd-k { min-width: 0; font-size: 0.85rem; line-height: 1.35; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.4s ease; }
.kwd-v { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-mono); font-size: 0.74rem; color: #D2D2D7; }
.kwd-v i {
    display: block;
    flex: 0 0 auto;
    width: calc(var(--v, 10) * 0.5px);
    min-width: 4px;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, #E65A48, #F08778);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.kwd-fila.is-in .kwd-v i { transform: scaleX(1); }
.kwd-chip {
    justify-self: end;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kwd-fila.is-hecho .kwd-chip { opacity: 1; transform: none; }
.kwd-fila[data-e="ok"] .kwd-chip { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.kwd-fila[data-e="mismo"] .kwd-chip { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.kwd-fila[data-e="no"] .kwd-chip { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.kwd-fila[data-e="no"].is-hecho { background: rgba(248, 113, 113, 0.05); }
.kwd-fila[data-e="no"].is-hecho .kwd-k { color: #9ca3af; text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.8); }
.kwd-fila[data-e="mismo"].is-hecho { margin-left: 18px; background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.22); }
.kwd-fila[data-e="mismo"].is-hecho .kwd-k::before { content: "\21B3\00a0"; color: #fbbf24; }
.serp-src-nombre { display: inline-flex; align-items: center; gap: 9px; }
.serp-src-logo { display: block; flex: 0 0 22px; width: 22px; height: 22px; color: #F08778; }

@media (max-width: 1080px) {
    .ag-nodo { display: none; }
    .ag-puntos { display: none; }
    .ag-pasos { justify-content: space-between; gap: 6px; }
    .agentic-section button.ag-paso { flex-direction: column; gap: 6px; padding: 4px 2px; font-size: 0.76rem; text-align: center; max-width: 130px; }
    .ag-paso-linea { flex: 1 1 18px; align-self: flex-start; margin-top: 10px; }
    .ag-marco { max-width: 560px; margin: 0 auto; }
    .ag-marco::before { left: 50%; }
    .ag-demo.is-js .ag-paneles { grid-template-columns: minmax(0, 1fr); }
    .ag-demo.is-js .ag-panel { grid-area: 1 / 1; }
    .ag-demo.is-js .ag-panel { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s; }
    .ag-demo.is-js .ag-panel:not(.is-on) { opacity: 0; visibility: hidden; transform: translateX(-26px); filter: none; pointer-events: none; }
    .ag-demo.is-js .ag-panel.is-on { transition: opacity 0.6s ease 0.15s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, visibility 0s; }
    .ag-demo.is-js .ag-panel.is-on ~ .ag-panel { transform: translateX(26px); }
    .ag-tarjeta { min-height: 432px; }
}
@media (max-width: 640px) {
    .agentic-section .ag-cab { margin-bottom: 40px; }
    .ag-marco { padding: 12px; border-radius: 20px; }
    .ag-barra { gap: 8px; padding: 0 0 12px; }
    .ag-pasos { gap: 4px; }
    .agentic-section button.ag-paso { gap: 5px; font-size: 0.68rem; max-width: 92px; }
    .ag-tarjeta:not(.ag-art) { padding: 14px; }
    .ag-paa span { white-space: normal; }
    .kwd { padding: 12px; }
    .agentic-section button.kwd-tab { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 0.7rem; }
    .kwd-boton-t { display: none; }
    .kwd-boton { padding: 7px 9px; }
    .kwd-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; padding: 8px 10px; }
    .kwd-v { grid-column: 1; grid-row: 2; }
    .kwd-chip { grid-column: 2; grid-row: 1 / span 2; }
    .kwd-fila[data-e="mismo"].is-hecho { margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .ag-marco, .ag-demo.active .ag-marco { transform: none; transition: none; }
    .ag-marco::before { transition: none; }
    .ag-demo *, .ag-demo *::before, .ag-demo *::after, .kwd *, .kwd *::before, .kwd *::after { transition: none !important; animation: none !important; }
}