/*
Theme Name:   Gano Digital
Theme URI:    https://gano.digital
Description:  Child theme de Royal Elementor Kit para Gano Digital. Contiene la identidad de marca, tokens de color, tipografía y overrides de componentes WooCommerce.
Author:       Gano Digital
Author URI:   https://gano.digital
Template:     royal-elementor-kit
Version:      1.0.6
License:      GNU General Public License v3 or later
Text Domain:  gano-child
Tags:         hosting, digital-services, colombia
*/

/* START: WOOCOMMERCE MEMBER PORTAL */
.woocommerce-account .woocommerce-MyAccount-navigation { background: rgba(15, 17, 21, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: var(--gano-radius-lg); padding: 20px; margin-right: 30px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 10px 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--gano-gold); font-weight: var(--gano-fw-bold); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--gano-gray-500); text-decoration: none; font-size: var(--gano-fs-base); transition: var(--gano-transition); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--gano-white); }
.woocommerce-account .woocommerce-MyAccount-content { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--gano-radius-lg); padding: 40px; color: var(--gano-gray-300); }
.gano-portal-card { background: linear-gradient(135deg, var(--gano-gold-soft), transparent); border: 1px solid var(--gano-gold-border, rgba(212, 175, 55, 0.3)); padding: 20px; border-radius: var(--gano-radius-md); margin-bottom: 20px; }
/* END: WOOCOMMERCE MEMBER PORTAL */

/* ============================================================
   TOKENS DE MARCA — GANO DIGITAL
   Editar estos valores para cambiar toda la paleta del sitio.
   ============================================================ */
:root {
    /* Colores primarios */
    --gano-blue:         #1B4FD8;   /* Azul corporativo — confianza */
    --gano-blue-dark:    #1240B0;
    --gano-blue-light:   #E8EEFB;
    --gano-green:        #00C26B;   /* Verde digital — éxito / "ganar" */
    --gano-green-dark:   #00A058;
    --gano-green-light:  #E0FAF0;

    /* Acción */
    --gano-orange:       #FF6B35;   /* CTA — contratar, comprar */
    --gano-orange-dark:  #E55520;
    --gano-orange-light: #FFF0EB;

    /* Acento premium / SOTA */
    --gano-gold:         #D4AF37;           /* Dorado — acento SOTA / Kinetic Monolith */
    --gano-gold-soft:    rgba(212, 175, 55, 0.10); /* Fondo sutil dorado */
    --gano-gold-bg:      rgba(212, 175, 55, 0.15); /* Fondo dorado para badges/chips */
    --gano-gold-border:  rgba(212, 175, 55, 0.30); /* Borde dorado estándar */

    /* Neutrales */
    --gano-dark:         #0F1923;   /* Títulos principales */
    --gano-gray-900:     #1A2535;
    --gano-gray-700:     #374151;
    --gano-gray-500:     #6B7280;
    --gano-gray-300:     #D1D5DB;
    --gano-gray-100:     #F3F4F6;
    --gano-white:        #FFFFFF;

    /* Fondos */
    --gano-bg-primary:   #FFFFFF;
    --gano-bg-alt:       #F8FAFC;
    --gano-bg-dark:      #0F1923;

    /* Semantic color system (single source of truth) */
    --gano-color-primary:            var(--gano-blue);
    --gano-color-primary-strong:     var(--gano-blue-dark);
    --gano-color-secondary:          var(--gano-green);
    --gano-color-secondary-strong:   var(--gano-green-dark);
    --gano-color-accent:             var(--gano-gold);
    --gano-color-accent-soft:        var(--gano-gold-soft);
    --gano-color-surface-dark:       var(--gano-dark-deep);
    --gano-color-surface-dark-soft:  var(--gano-card-sota);
    --gano-color-text-on-dark:       #E2E8F0;
    --gano-color-text-muted-on-dark: #94A3B8;
    --gano-color-outline-on-dark:    rgba(148, 163, 184, 0.28);

    /* Tipografía */
    --gano-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --gano-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --gano-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Tamaños de fuente */
    --gano-fs-xs:      0.75rem;              /* 12px — meta, badges */
    --gano-fs-sm:      0.875rem;             /* 14px — small / label */
    --gano-fs-base:    1rem;                 /* 16px — body */
    --gano-fs-lg:      1.125rem;             /* 18px — lead text */
    --gano-fs-xl:      1.25rem;              /* 20px — H4 */
    --gano-fs-2xl:     1.5rem;               /* 24px — H3 mín */
    --gano-fs-3xl:     1.875rem;             /* 30px — H3 máx / H2 mín */
    --gano-fs-4xl:     2.25rem;              /* 36px — H2 */
    --gano-fs-5xl:     3rem;                 /* 48px — H1 */
    --gano-fs-display: clamp(3rem, 6vw, 4.5rem); /* 48–72px — hero display */

    /* Line-heights */
    --gano-lh-tight:   1.1;     /* titulares grandes, display */
    --gano-lh-snug:    1.25;    /* H2, H3 */
    --gano-lh-base:    1.5;     /* H4, labels, small */
    --gano-lh-relaxed: 1.65;    /* body — legibilidad óptima */
    --gano-lh-loose:   1.85;    /* texto muy largo, FAQ */

    /* Font-weights */
    --gano-fw-normal:    400;
    --gano-fw-medium:    500;
    --gano-fw-semibold:  600;
    --gano-fw-bold:      700;
    --gano-fw-extrabold: 800;   /* display / hero */

    /* Letter-spacing */
    --gano-ls-tight:  -0.03em;  /* titulares grandes */
    --gano-ls-normal:  0em;
    --gano-ls-wide:    0.04em;  /* badges, etiquetas */
    --gano-ls-wider:   0.08em;  /* all-caps, overline */

    /* Tokens faltantes usados con fallback en css/*.css */
    --gano-text-primary:  var(--gano-color-text-on-dark);
    --gano-radius:        12px;
    --gano-container-sm:  800px;

    /* START: KINETIC MONOLITH — Cyber-Cold Palette (shop SOTA / dark templates) */
    --gano-purple:        #8B5CF6;               /* Violeta tech — acento Kinetic Monolith */
    --gano-purple-soft:   rgba(139, 92, 246, 0.10); /* Fondo sutil purple */
    --gano-purple-glow:   rgba(139, 92, 246, 0.50); /* Glow hover / sombras */
    --gano-indigo:        #6366F1;               /* Índigo — acento secundario SOTA */
    --gano-indigo-soft:   rgba(99, 102, 241, 0.10);  /* Fondo sutil índigo */
    --gano-border-sota:   rgba(99, 102, 241, 0.20);  /* Borde tarjetas dark */
    --gano-dark-deep:     #05080C;               /* Fondo hero SOTA (más oscuro que --gano-dark) */
    --gano-card-sota:     #0B1118;               /* Fondo de tarjetas dark mode */
    --gano-text-slate:    #94A3B8;               /* Texto body sobre fondos dark */
    /* END: KINETIC MONOLITH */

    /* Espaciado */
    --gano-radius-sm:  4px;
    --gano-radius-md:  8px;
    --gano-radius-lg:  12px;
    --gano-radius-xl:  20px;
    --gano-radius-pill:9999px;

    /* Sombras */
    --gano-shadow-sm:  0 1px 3px rgba(15,25,35,0.08);
    --gano-shadow-md:  0 4px 16px rgba(15,25,35,0.10);
    --gano-shadow-lg:  0 8px 32px rgba(15,25,35,0.14);
    --gano-shadow-xl:  0 20px 64px rgba(15,25,35,0.18);

    /* Transiciones */
    --gano-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Motion tokens (constellation / HUD base) ─────────────────
       Usar var(--motion-*) + var(--ease-*) en lugar de valores hardcode.
       prefers-reduced-motion los pone en 0s en la @media de a11y.
       ─────────────────────────────────────────────────────────── */
    --motion-fast:   150ms;   /* chips, menu items — respuesta inmediata */
    --motion-normal: 220ms;   /* transición estándar (≈ --gano-transition) */
    --motion-slow:   400ms;   /* paneles, overlays — cambios de layout    */

    --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);   /* Material Design: suave al final */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);  /* Expo out — sensación elástica   */

    /* Layout */
    --gano-container:  1200px;
    --gano-container-sm: 800px;

    /* Glass morphism tokens (Phase 6) */
    --gano-glass:       rgba(255, 255, 255, 0.05);
    --gano-glass-border: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */
body {
    font-family: var(--gano-font-body);
    font-size: var(--gano-fs-base);
    color: var(--gano-gray-700);
    line-height: var(--gano-lh-relaxed);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gano-font-heading);
    color: var(--gano-dark);
    line-height: var(--gano-lh-snug);
    font-weight: var(--gano-fw-bold);
    letter-spacing: var(--gano-ls-tight);
}

h1 { font-size: clamp(var(--gano-fs-3xl), 5vw, var(--gano-fs-5xl)); }
h2 { font-size: clamp(var(--gano-fs-2xl), 3.5vw, var(--gano-fs-4xl)); }
h3 { font-size: clamp(var(--gano-fs-xl), 2.5vw, var(--gano-fs-3xl)); }
h4 { font-size: var(--gano-fs-xl); }
h5 { font-size: var(--gano-fs-lg); }
h6 { font-size: var(--gano-fs-base); }

/* START: ESCALA TIPOGRÁFICA — Clases utilitarias
   Usar en templates PHP, Elementor (campo CSS Class) y componentes.
   Cada nivel mapea exactamente a los tokens de :root.
   ============================================================ */

/* Display — Hero / landing headline */
.gano-display {
    font-family: var(--gano-font-heading);
    font-size: var(--gano-fs-display);
    font-weight: var(--gano-fw-extrabold);
    line-height: var(--gano-lh-tight);
    letter-spacing: var(--gano-ls-tight);
    color: var(--gano-dark);
}

/* Lead — Primer párrafo / subtítulo hero */
.gano-lead {
    font-size: var(--gano-fs-lg);
    font-weight: var(--gano-fw-normal);
    line-height: var(--gano-lh-loose);
    color: var(--gano-gray-700);
}

/* Body — Texto corrido estándar (redundante pero explícito para Elementor) */
.gano-body {
    font-size: var(--gano-fs-base);
    font-weight: var(--gano-fw-normal);
    line-height: var(--gano-lh-relaxed);
    color: var(--gano-gray-700);
}

/* Small — Texto auxiliar, notas al pie */
.gano-small {
    font-size: var(--gano-fs-sm);
    line-height: var(--gano-lh-base);
    color: var(--gano-gray-500);
}

/* Caption — Pie de imagen, metadata */
.gano-caption {
    font-size: var(--gano-fs-xs);
    line-height: var(--gano-lh-base);
    color: var(--gano-gray-500);
    font-style: italic;
}

/* Overline — Etiqueta sobre títulos (ej. "SOTA v3.1", "Fase 4") */
.gano-overline {
    font-family: var(--gano-font-mono);
    font-size: var(--gano-fs-xs);
    font-weight: var(--gano-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--gano-ls-wider);
    color: var(--gano-blue);
}

/* Mono — Código inline, IDs técnicos, precios */
.gano-mono {
    font-family: var(--gano-font-mono);
    font-size: var(--gano-fs-sm);
    letter-spacing: var(--gano-ls-normal);
}

/* Variantes dark — para secciones con fondo oscuro */
.gano-on-dark .gano-display,
.gano-on-dark h1,
.gano-on-dark h2,
.gano-on-dark h3,
.gano-on-dark h4 { color: var(--gano-white); }

.gano-on-dark .gano-lead,
.gano-on-dark .gano-body,
.gano-on-dark p { color: var(--gano-text-slate); }

.gano-on-dark .gano-small,
.gano-on-dark .gano-caption { color: var(--gano-gray-500); }

.gano-on-dark .gano-overline { color: var(--gano-purple); }

/* END: ESCALA TIPOGRÁFICA */

a {
    color: var(--gano-blue);
    text-decoration: none;
    transition: var(--gano-transition);
}
a:hover {
    color: var(--gano-blue-dark);
    text-decoration: underline;
}

code, pre, kbd {
    font-family: var(--gano-font-mono);
    background: var(--gano-gray-100);
    border-radius: var(--gano-radius-sm);
    padding: 0.15em 0.4em;
    font-size: 0.9em;
}

/* ============================================================
   ACCESIBILIDAD — FOCUS VISIBLE
   Anillo de foco dorado sobre fondos oscuros (WCAG 2.4.7 / 2.4.11).
   Ratio: --gano-gold (#D4AF37) sobre --gano-bg-dark (#0F1923) ≈ 7.5:1.
   ============================================================ */
:focus-visible {
    outline: 3px solid var(--gano-gold);
    outline-offset: 3px;
    border-radius: var(--gano-radius-sm);
}

/* Suprime el outline de :focus por defecto solo donde :focus-visible existe */
:focus:not(:focus-visible) {
    outline: none;
}

/* Sobre fondos claros: anillo azul corporativo (contraste AA sobre blanco) */
.gano-bg-light :focus-visible,
.elementor-section.bg-light :focus-visible {
    outline-color: var(--gano-blue);
}

/* WCAG 2.2 — Focus Not Obscured with sticky headers */
html {
    scroll-padding-top: 96px;
}

[id] {
    scroll-margin-top: 96px;
}

/* WCAG 2.2 — minimum target size baseline */
button,
.gano-btn,
.gano-btn-primary,
.gano-btn-secondary,
.gano-catalog-mode-btn,
.gano-catalog-compare-toggle,
.gano-mobile-nav-panel a,
nav a {
    min-height: 24px;
    min-width: 24px;
}

/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
.btn-primary,
.gano-btn,
.elementor-button.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gano-blue);
    color: var(--gano-white) !important;
    border: 2px solid var(--gano-blue);
    border-radius: var(--gano-radius-md);
    padding: 0.75rem 1.75rem;
    font-family: var(--gano-font-heading);
    font-weight: 600;
    font-size: var(--gano-fs-base);
    cursor: pointer;
    transition: var(--gano-transition);
    text-decoration: none !important;
}
.btn-primary:hover,
.gano-btn:hover {
    background: var(--gano-blue-dark);
    border-color: var(--gano-blue-dark);
    transform: translateY(-2px);
    box-shadow: var(--gano-shadow-md);
}

.btn-cta,
.gano-btn-cta {
    background: var(--gano-orange);
    border-color: var(--gano-orange);
}
.btn-cta:hover,
.gano-btn-cta:hover {
    background: var(--gano-orange-dark);
    border-color: var(--gano-orange-dark);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--gano-blue);
    color: var(--gano-blue) !important;
}
.btn-outline:hover {
    background: var(--gano-blue);
    color: var(--gano-white) !important;
}

/* ============================================================
   WOOCOMMERCE — BOTONES DE COMPRA
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce .single_add_to_cart_button {
    background-color: var(--gano-orange) !important;
    color: var(--gano-white) !important;
    border-radius: var(--gano-radius-md) !important;
    font-family: var(--gano-font-heading) !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    transition: var(--gano-transition) !important;
    letter-spacing: 0.01em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: var(--gano-orange-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--gano-shadow-sm);
}

/* Precio WooCommerce */
.woocommerce .price,
.woocommerce .price .amount {
    color: var(--gano-blue) !important;
    font-family: var(--gano-font-heading);
    font-weight: 700;
}
.woocommerce .price del {
    color: var(--gano-gray-500) !important;
    font-weight: 400;
}
.woocommerce .price ins {
    text-decoration: none;
    color: var(--gano-green) !important;
}

/* Badge "En oferta" */
.woocommerce span.onsale {
    background-color: var(--gano-green) !important;
    border-radius: var(--gano-radius-pill) !important;
    font-family: var(--gano-font-heading) !important;
    font-weight: 700;
}

/* Tarjetas de producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--gano-font-heading);
    font-weight: 600;
    color: var(--gano-dark);
}
.woocommerce ul.products li.product {
    border-radius: var(--gano-radius-lg);
    box-shadow: var(--gano-shadow-sm);
    transition: var(--gano-transition);
    overflow: hidden;
}
.woocommerce ul.products li.product:hover {
    box-shadow: var(--gano-shadow-lg);
    transform: translateY(-4px);
}

/* ============================================================
   CARDS GENÉRICAS
   ============================================================ */
.gano-card {
    background: var(--gano-bg-primary);
    border-radius: var(--gano-radius-lg);
    box-shadow: var(--gano-shadow-sm);
    padding: 2rem;
    border: 1px solid var(--gano-gray-100);
    transition: var(--gano-transition);
}
.gano-card:hover {
    box-shadow: var(--gano-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--gano-blue-light);
}

/* Card de plan de precios */
.gano-pricing-card {
    border-radius: var(--gano-radius-xl);
    padding: 2.5rem 2rem;
    text-align: center;
    border: 2px solid var(--gano-gray-100);
    transition: var(--gano-transition);
    background: var(--gano-bg-primary);
}
.gano-pricing-card.featured {
    border-color: var(--gano-blue);
    background: linear-gradient(135deg, var(--gano-blue-light) 0%, #FFFFFF 100%);
    box-shadow: var(--gano-shadow-xl);
    transform: scale(1.04);
}
.gano-pricing-card .price-tag {
    font-size: var(--gano-fs-4xl);
    font-weight: 800;
    color: var(--gano-blue);
    font-family: var(--gano-font-heading);
}
.gano-pricing-card .price-tag span {
    font-size: var(--gano-fs-lg);
    color: var(--gano-gray-500);
    font-weight: 400;
}

/* ============================================================
   BADGE / CHIP DE CATEGORÍA
   ============================================================ */
.gano-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--gano-radius-pill);
    font-size: var(--gano-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gano-badge--blue   { background: var(--gano-blue-light);  color: var(--gano-blue); }
.gano-badge--green  { background: var(--gano-green-light); color: var(--gano-green-dark); }
.gano-badge--orange { background: var(--gano-orange-light);color: var(--gano-orange-dark); }

/* ============================================================
   SECCIÓN HERO
   ============================================================ */
.gano-hero {
    background: linear-gradient(135deg, var(--gano-dark) 0%, var(--gano-gray-900) 60%, #1B3A8A 100%);
    padding: 6rem 0 5rem;
    color: var(--gano-white);
    position: relative;
    overflow: hidden;
}
.gano-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231B4FD8' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
}
.gano-hero h1 { color: var(--gano-white); }
.gano-hero p  { color: rgba(255,255,255,0.82); }

/* ============================================================
   SECCIÓN "FEATURES" — íconos + texto
   ============================================================ */
.gano-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.gano-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--gano-radius-lg);
    background: var(--gano-bg-alt);
    border: 1px solid var(--gano-gray-100);
}
.gano-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--gano-radius-md);
    background: var(--gano-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ============================================================
   TABLAS — comparativas de planes
   ============================================================ */
.wp-block-table table,
.wp-block-table table,
table.gano-table {
    border-collapse: collapse;
    width: 100%;
    border-radius: var(--gano-radius-lg);
    overflow: hidden;
    box-shadow: var(--gano-shadow-sm);
}
.wp-block-table th,
table.gano-table th {
    background: var(--gano-blue);
    color: var(--gano-white);
    padding: 1rem 1.25rem;
    font-family: var(--gano-font-heading);
    font-weight: 600;
    text-align: left;
}
.wp-block-table td,
table.gano-table td {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--gano-gray-100);
    color: var(--gano-gray-700);
}
.wp-block-table tr:nth-child(even) td,
table.gano-table tr:nth-child(even) td {
    background: var(--gano-bg-alt);
}

/* ============================================================
   HEADER / NAVEGACIÓN (overrides Royal Kit)
   ============================================================ */
.site-header,
.header-main {
    border-bottom: 1px solid var(--gano-gray-100);
    background: var(--gano-white) !important;
    box-shadow: var(--gano-shadow-sm);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.footer-main {
    background: var(--gano-dark) !important;
    color: rgba(255,255,255,0.75) !important;
}
.site-footer a,
.footer-main a {
    color: rgba(255,255,255,0.75);
}
.site-footer a:hover,
.footer-main a:hover {
    color: var(--gano-green);
}

/* ============================================================
   FORMS — inputs y contacto
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    border: 1.5px solid var(--gano-gray-300);
    border-radius: var(--gano-radius-md);
    padding: 0.625rem 0.875rem;
    font-family: var(--gano-font-body);
    font-size: var(--gano-fs-base);
    transition: var(--gano-transition);
    width: 100%;
    background: var(--gano-white);
    color: var(--gano-dark);
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--gano-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 79, 216, 0.12);
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.gano-text-blue   { color: var(--gano-blue); }
.gano-text-green  { color: var(--gano-green); }
.gano-text-orange { color: var(--gano-orange); }
.gano-text-muted  { color: var(--gano-gray-500); }
.gano-bg-alt      { background: var(--gano-bg-alt); }
.gano-bg-dark     { background: var(--gano-bg-dark); color: var(--gano-white); }
.gano-center      { text-align: center; }
.gano-section     { padding: 5rem 0; }
.gano-section-sm  { padding: 3rem 0; }

/* Gradient text */
.gano-gradient-text {
    background: linear-gradient(90deg, var(--gano-blue), var(--gano-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    h1 { font-size: var(--gano-fs-3xl); }
    h2 { font-size: var(--gano-fs-2xl); }
    .gano-hero { padding: 4rem 0 3rem; }
}

/* ============================================================
   WOOCOMMERCE — CATALOG PREMIUM UI (Wrappers injectados)
   ============================================================ */
.gano-product-card-premium {
    background: var(--gano-bg-primary);
    border: 1px solid var(--gano-gray-100);
    border-radius: var(--gano-radius-xl);
    padding: 1.5rem;
    transition: var(--gano-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.dark-mode .gano-product-card-premium {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.08);
}

.gano-product-card-premium:hover {
    transform: translateY(-5px);
    border-color: var(--gano-blue);
    box-shadow: 0 10px 30px rgba(27, 79, 216, 0.15);
}

.gano-product-card-premium::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gano-blue), var(--gano-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.gano-product-card-premium:hover::before {
    transform: scaleX(1);
}

/* ============================================================
   WOOCOMMERCE — FLUID CHECKOUT EXPERIENCIA
   ============================================================ */
body.woocommerce-checkout .woocommerce {
    max-width: 900px;
    margin: 3rem auto;
    background: var(--gano-bg-alt);
    padding: 3rem;
    border-radius: var(--gano-radius-xl);
    box-shadow: var(--gano-shadow-lg);
    border: 1px solid var(--gano-gray-100);
}

body.woocommerce-checkout #customer_details {
    margin-bottom: 2.5rem;
}

.woocommerce-checkout .col2-set .col-1, 
.woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
    margin-bottom: 1.5rem;
}

.woocommerce-checkout h3 {
    font-size: var(--gano-fs-xl);
    color: var(--gano-dark);
    border-bottom: 2px solid var(--gano-blue-light);
    padding-bottom: 0.75rem;
    margin-bottom: 1.75rem;
}

#order_review_heading {
    margin-top: 2rem;
    font-size: var(--gano-fs-xl);
}

/* Pasarela de pago modernizada */
.woocommerce-checkout #payment {
    background: var(--gano-bg-primary);
    border-radius: var(--gano-radius-lg);
    box-shadow: var(--gano-shadow-sm);
    padding: 2rem;
    border: 1px solid var(--gano-gray-100);
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--gano-gray-100);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Botón de compra gigante y confiable */
#place_order {
    width: 100%;
    font-size: var(--gano-fs-lg) !important;
    padding: 1.25rem !important;
    margin-top: 1rem;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.25);
}

#place_order:hover {
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

@media (min-width: 992px) {
    .woocommerce-checkout .col2-set {
        display: flex;
        gap: 3rem;
    }
}

/* ============================================================
   SOTA INNOVATION HUB — Mobile-First Content Pages
   ============================================================ */

.gano-sota-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    color: var(--gano-text-primary, #e8eaf0);
    font-family: 'Inter', 'Outfit', sans-serif;
    line-height: 1.75;
}

.gano-sota-page h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    background: linear-gradient(135deg, #1B4FD8, #00C26B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    line-height: 1.25;
}

.gano-sota-page h2 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: #00C26B;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.gano-sota-page p {
    font-size: 1rem;
    max-width: 65ch;
    margin-bottom: 1rem;
}

.gano-sota-page ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.gano-sota-page ul li {
    margin-bottom: 0.6rem;
    font-size: 0.97rem;
}

/* Hook Box */
.gano-hook-box {
    background: rgba(27, 79, 216, 0.10);
    border-left: 4px solid #1B4FD8;
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.gano-hook-box p {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
    color: #c5cfe8;
}

/* Glassmorphism 2.0 — Kinetic Monolith High Refraction */
.gano-glass-panel, 
.sota-single-container .sota-layout aside > div {
    background: rgba(15, 25, 35, 0.7) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

/* Organic Noise Overlay: Vivid & Analog Texture */
.gano-glass-panel::after,
.sota-single-container .sota-layout aside > div::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    filter: url(#gano-organic-noise);
    opacity: 0.15;
    pointer-events: none;
}

/* Luminous Ghost Borders: Editorial-grade precision */
.gano-ghost-border {
    position: relative;
}
.gano-ghost-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(212,175,55,0.4), transparent, rgba(27,79,216,0.4)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

/* Vivid Gradients: The "Kinetic Monolith" Palette */
.gano-vivid-gradient {
    background: linear-gradient(135deg, #1B4FD8 0%, #00C26B 50%, #FF6B35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pulse Animations: Signature SOTA Indicator */
@keyframes gano-pulse-vivid {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.gano-sota-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gano-gold-bg);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gano-gold);
    padding: 6px 16px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.gano-sota-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--gano-gold);
    border-radius: 50%;
    animation: gano-pulse-vivid 2s infinite;
}

/* Hover Mastery: Magnetic Interaction Smoothness */
.gano-buy-button {
    transition:
        transform     var(--motion-slow, 400ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
        box-shadow    var(--motion-slow, 400ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
        background    var(--motion-slow, 400ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)) !important;
    text-transform: uppercase;
    font-weight: 900 !important;
    letter-spacing: 0.05em;
}

/* Quote / Share Box */
.gano-quote-box {
    background: rgba(0, 194, 107, 0.08);
    border: 1px solid rgba(0, 194, 107, 0.3);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    position: relative;
}

.gano-quote-box::before {
    content: '💬';
    position: absolute;
    top: -14px;
    left: 20px;
    font-size: 1.4rem;
    background: var(--gano-bg-primary, #0F1923);
    padding: 0 8px;
}

.gano-quote-box p {
    font-style: italic;
    font-size: 1rem;
    color: #b6f5d4;
    margin: 0;
}

/* CTA Box */
.gano-cta-box {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ─ CANONICAL BUTTON DEFINITION ─ Single source of truth for .gano-btn-primary
   Decisión Q7 confirmada: naranja sólido #FF6B35, border-radius: 8px
   Usado en CTAs, páginas SOTA, y llamadas a acción comerciales.
   ────────────────────────────────────────────────────────────────── */
.gano-btn-primary {
    display: inline-block;
    background: var(--gano-orange);
    color: var(--gano-white) !important;
    font-weight: var(--gano-fw-bold);
    font-size: var(--gano-fs-base);
    padding: 0.85rem 2rem;
    border-radius: var(--gano-radius-md);
    border: none;
    text-decoration: none !important;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    transition:
        background  var(--motion-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
        transform   var(--motion-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow  var(--motion-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
    cursor: pointer;
}

.gano-btn-primary:hover {
    background: var(--gano-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
    color: var(--gano-white) !important;
}

/* Sticky Mobile CTA — individual pages can use JS to activate */
.gano-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0.75rem 1rem;
    background: rgba(15, 25, 35, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(27, 79, 216, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.gano-sticky-cta .gano-btn-primary {
    padding: 0.7rem 1.6rem;
    font-size: 0.92rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .gano-sota-page {
        padding: 1.25rem 1rem 5rem;
    }

    .gano-sota-page h1 {
        font-size: 1.5rem;
    }

    .gano-hook-box,
    .gano-quote-box {
        padding: 0.85rem 1rem;
    }

    .gano-quote-box p,
    .gano-hook-box p {
        font-size: 0.94rem;
    }

    .gano-btn-primary {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   PHASE 6: PREMIUM SHOP & CATALOG (ANIMATED)
   ========================================================================== */
/* Variables shop consolidadas en :root global — eliminar bloque duplicado */

.gano-shop-header {
    background: radial-gradient(circle at top, #1a1e26 0%, #0f1115 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.gano-shop-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    padding: 80px 5%;
    background: var(--gano-bg-dark);
    max-width: 1400px;
    margin: 0 auto;
}

.gano-product-card {
    background: var(--gano-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--gano-glass-border);
    border-radius: 24px;
    padding: 45px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.gano-product-card:hover {
    transform: translateY(-20px);
    border-color: var(--gano-gold);
    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.15);
}

.gano-product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.5s;
}

.gano-product-card:hover::after {
    opacity: 1;
}

.gano-product-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: var(--gano-gold);
    color: var(--gano-dark);
    padding: 6px 18px;
    border-radius: var(--gano-radius-pill);
    font-size: var(--gano-fs-xs);
    font-weight: var(--gano-fw-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--gano-ls-wide);
    box-shadow: var(--gano-shadow-md);
}

.gano-product-title {
    font-size: var(--gano-fs-4xl) !important;
    font-weight: var(--gano-fw-extrabold) !important;
    margin-bottom: 15px !important;
    color: var(--gano-gold) !important;
    letter-spacing: -0.03em !important;
}

.gano-product-price {
    font-size: clamp(2.4rem, 5vw, 3rem);
    font-weight: var(--gano-fw-extrabold);
    margin: 25px 0;
    color: var(--gano-white);
    font-family: var(--gano-font-heading);
}

.gano-product-price span {
    font-size: var(--gano-fs-sm);
    font-weight: var(--gano-fw-medium);
    color: var(--gano-gray-500);
    margin-left: 5px;
}

.gano-product-specs {
    list-style: none !important;
    padding: 0 !important;
    margin: 35px 0 !important;
    flex-grow: 1;
}

.gano-product-specs li {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 15px !important;
    display: flex;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

.gano-product-specs li span {
    color: var(--gano-gold);
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    background: rgba(212, 175, 55, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

.gano-buy-button {
    background: var(--gano-gold) !important;
    color: #000 !important;
    text-align: center;
    padding: 18px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px !important;
    margin-top: 20px;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);
}

.gano-buy-button:hover {
    background: #fff !important;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(255,255,255,0.1);
}

.gano-price-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    color: #888;
    font-weight: 600;
}

.gano-price-toggle span.active {
    color: var(--gano-gold);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 34px;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #222;
    transition: .4s;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.1);
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px; width: 24px;
    left: 4px; bottom: 4px;
    background-color: var(--gano-gold);
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

input:checked + .slider:before { transform: translateX(30px); }
input:checked + .slider { background-color: var(--gano-gold-soft); border-color: var(--gano-gold); }

/* ============================================================
   GODADDY RESELLER STORE — UNIFIED UI
   ============================================================ */
.rstore-product-header .rstore-pricing {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin: 15px 0;
}

.rstore-add-to-cart-form button.rstore-add-to-cart {
    background: linear-gradient(135deg, var(--gano-blue, #1B4FD8), var(--gano-blue-dark, #1240B0)) !important;
    color: #fff !important;
    width: 100%;
    padding: 12px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    border: none !important;
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.2s ease !important;
    cursor: pointer;
    margin-top: 12px;
    font-size: 0.875rem;
}

.rstore-add-to-cart-form button.rstore-add-to-cart:hover {
    background: linear-gradient(135deg, var(--gano-blue-dark, #1240B0), var(--gano-blue, #1B4FD8)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 79, 216, 0.25);
}

.rstore-product-summary .gano-product-specs {
    margin: 20px 0 !important;
}

/* ============================================================
   HOMEPAGE / ELEMENTOR — utilidades (Abril 2026)
   Aplicar en Elementor: sección o contenedor → Avanzado → Clases CSS
   Copy de referencia: memory/content/homepage-copy-2026-04.md
   ============================================================ */

/* Contenedor con contexto de apilamiento (evita que ilustración tape texto) */
.gano-el-stack {
    position: relative;
    isolation: isolate;
}

/* Columna o bloque de texto por encima del fondo/ilustración */
.gano-el-layer-top {
    position: relative;
    z-index: 2;
}

/* Ilustración, shape o fondo decorativo detrás del copy */
.gano-el-layer-base {
    position: relative;
    z-index: 0;
}

/* Tarjeta tipo pilar (4 bloques homepage) */
.gano-pilares-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
    width: 100%;
}

.gano-el-pillar {
    height: 100%;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: var(--gano-radius-lg);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(27, 79, 216, 0.12);
    box-shadow: var(--gano-shadow-md);
    transition: var(--gano-transition);
}

.gano-el-pillar:hover {
    border-color: rgba(27, 79, 216, 0.28);
    box-shadow: var(--gano-shadow-lg);
    transform: translateY(-2px);
}

.gano-el-pillar h3,
.gano-el-pillar .elementor-heading-title {
    color: var(--gano-white);
    font-family: var(--gano-font-heading);
    font-size: var(--gano-fs-lg);
    margin-bottom: 0.5rem;
}

.gano-el-pillar p,
.gano-el-pillar .elementor-widget-text-editor {
    color: var(--gano-gray-300);
    font-size: var(--gano-fs-sm);
    line-height: 1.6;
}

.gano-el-pillar .gano-pillar-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    color: var(--gano-blue);
    flex-shrink: 0;
}

/* Bloque “socio tecnológico”: lectura cómoda */
.gano-el-prose-narrow {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.gano-el-prose-narrow p {
    line-height: 1.7;
}

/* Estilos para el shortcode [gano_socio_tecnologico] */
.gano-socio-block__titulo {
    font-family: var(--gano-font-heading);
    color: var(--gano-dark);
    font-size: clamp(var(--gano-fs-2xl), 3vw, var(--gano-fs-4xl));
    line-height: 1.2;
    margin-bottom: 1rem;
}

.gano-socio-block__parrafo {
    color: var(--gano-gray-700);
    font-size: var(--gano-fs-lg);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.gano-socio-block__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gano-socio-block__bullets li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--gano-gray-700);
    font-size: var(--gano-fs-base);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.gano-socio-block__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--gano-blue);
}

.gano-socio-block__cta-link {
    margin-top: 1.25rem;
}

.gano-socio-block__cta-link a {
    color: var(--gano-blue);
    font-size: var(--gano-fs-base);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.gano-socio-block__cta-link a:hover,
.gano-socio-block__cta-link a:focus-visible {
    border-bottom-color: var(--gano-blue);
}

/* Franja de métricas (números cortos, sin inflar cifras) */
.gano-el-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(1rem, 4vw, 2.5rem);
}

.gano-el-metric {
    text-align: center;
    min-width: 7rem;
    padding: 0.5rem 0.75rem;
}

/* Separador visual entre métricas en pantallas anchas */
@media (min-width: 640px) {
    .gano-el-metric + .gano-el-metric {
        border-left: 1px solid var(--gano-gray-300);
        padding-left: clamp(1rem, 4vw, 2.5rem);
    }
}

.gano-el-metric strong,
.gano-el-metric .elementor-heading-title {
    display: block;
    font-family: var(--gano-font-heading);
    color: var(--gano-blue);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    letter-spacing: -0.02em;
}

.gano-el-metric span,
.gano-el-metric .elementor-widget-text-editor {
    display: block;
    font-size: var(--gano-fs-xs);
    color: var(--gano-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}

/* CTA final: fila de ítems con icono (Font Awesome real, clase gano-el-cta-icons) */
.gano-el-cta-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2rem;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gano-el-cta-icons .elementor-icon,
.gano-el-cta-icons i {
    color: var(--gano-orange);
    font-size: 1.75rem;
    line-height: 1;
}

/* Ítem individual: icono + etiqueta en columna */
.gano-el-cta-icons__item,
.gano-el-cta-icons li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    min-width: 5.5rem;
    list-style: none;
}

/* Enlace accesible que envuelve icono + etiqueta */
.gano-el-cta-icons__item a,
.gano-el-cta-icons li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    transition: color var(--gano-transition, 0.22s ease);
}

.gano-el-cta-icons__item a:hover,
.gano-el-cta-icons__item a:hover i,
.gano-el-cta-icons li a:hover,
.gano-el-cta-icons li a:hover i {
    color: var(--gano-orange);
}

.gano-el-cta-icons__item a:focus-visible,
.gano-el-cta-icons li a:focus-visible {
    outline: 2px solid var(--gano-orange);
    outline-offset: 3px;
}

/* Etiqueta de texto bajo el icono */
.gano-el-cta-icons__label {
    font-size: var(--gano-fs-xs, 0.75rem);
    font-weight: 600;
    color: var(--gano-gray-500, #6b7280);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Hero: halo legible detrás del titular sobre fondos oscuros o con textura */
.gano-el-hero-readability .elementor-heading-title {
    text-shadow:
        0 2px 10px rgba(15, 25, 35, 0.55),
        0 1px 3px  rgba(15, 25, 35, 0.35);
}

/* Microcopy bajo los CTAs del hero: p.ej. "NVMe · Monitoreo proactivo · Facturación en COP" */
.gano-el-hero-microcopy {
    font-size: var(--gano-fs-xs);
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}

.gano-el-hero-microcopy .elementor-widget-text-editor,
.gano-el-hero-microcopy p {
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .gano-el-pillar {
        transition: none;
    }
    .gano-el-pillar:hover {
        transform: none;
    }
}

/* ============================================================
   ESCALA TIPOGRÁFICA — CLASES UTILITARIAS (oleada 3)
   Usar en Elementor → Avanzado → Clases CSS.
   Documentadas en memory/content/visual-tokens-wave3.md.
   ============================================================ */

/* Display: hero principal, secciones de impacto máximo */
.gano-text-display {
    font-family: var(--gano-font-heading);
    font-size: var(--gano-fs-display);
    line-height: var(--gano-lh-tight);
    font-weight: var(--gano-fw-extrabold);
    letter-spacing: var(--gano-ls-tight);
}

/* H1 semántico para widgets Heading de Elementor */
.gano-text-h1 {
    font-family: var(--gano-font-heading);
    font-size: clamp(var(--gano-fs-3xl), 5vw, var(--gano-fs-5xl));
    line-height: var(--gano-lh-tight);
    font-weight: var(--gano-fw-bold);
    letter-spacing: var(--gano-ls-tight);
}

/* Acento dorado — solo texto corto de énfasis; no usar para párrafos */
.gano-text-gold {
    color: var(--gano-gold);
}

/* Sección oscura tipo SOTA/Bastión */
.gano-dark-section {
    background: var(--gano-bg-dark);
    color: #FFFFFF;
}

/* Asegurar que los titulares dentro de secciones oscuras usen dorado como acento */
.gano-dark-section h1,
.gano-dark-section h2,
.gano-dark-section h3 {
    color: #FFFFFF;
}

.gano-dark-section .gano-text-gold {
    color: var(--gano-gold);
}

/* ============================================================
   ACCESIBILIDAD — WCAG 2.1 AA
   Focus-visible, skip link y contraste de enlace.
   Compatible con CSP del MU plugin gano-security.php
   ============================================================ */

/* Skip-to-content: visible solo al enfocar con teclado (WCAG 2.4.1) */
.gano-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 99999;
    padding: 0.75rem 1.5rem;
    background-color: var(--gano-blue);
    color: #ffffff;
    font-family: var(--gano-font-body);
    font-size: var(--gano-fs-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--gano-radius-md) var(--gano-radius-md);
    outline: 3px solid var(--gano-gold, #D4AF37);
    outline-offset: 2px;
    transition: top var(--motion-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.gano-skip-link:focus,
.gano-skip-link:focus-visible {
    top: 0;
}

/* Indicadores de foco para navegación por teclado (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid var(--gano-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Elimina el outline del navegador solo donde hay alternativa visible (:focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Botones y CTAs: foco con halo dorado para destacar sobre fondos oscuros */
.btn-primary:focus-visible,
.gano-btn:focus-visible,
.btn-outline:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.elementor-button:focus-visible {
    outline: 3px solid var(--gano-gold, #D4AF37);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.28);
}

/* Inputs y controles de formulario */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--gano-blue);
    outline-offset: 2px;
    border-color: var(--gano-blue);
    box-shadow: 0 0 0 3px rgba(27, 79, 216, 0.18);
}

/* Contraste de enlaces */
.gano-bg-dark a,
.elementor-section.e-con--dark a {
    color: var(--gano-blue-light, #E8EEFB);
}

.gano-bg-dark a:focus-visible,
.elementor-section.e-con--dark a:focus-visible {
    outline-color: var(--gano-gold, #D4AF37);
}

#gano-main-content {
    outline: none;
}

.gano-a11y-anchor {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    pointer-events: none;
}

/* =============================================================================
   NAVEGACIÓN — CTA "Elegir plan →" en header (cd-content-005)
   Aplica cuando el ítem de menú tiene la CSS class "gano-menu-cta" en wp-admin.
   ============================================================================= */

.gano-menu-cta > a,
.gano-menu-cta > a:visited {
    background: var(--gano-orange, #E85D04);
    color: #fff !important;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition:
        opacity    var(--motion-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
        background var(--motion-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
    display: inline-block;
}

.gano-menu-cta > a:hover,
.gano-menu-cta > a:focus {
    opacity: 0.88;
    background: var(--gano-orange, #E85D04);
}

.gano-menu-cta > a:focus-visible {
    outline: 3px solid var(--gano-gold, #D4AF37);
    outline-offset: 3px;
}

/* Separador visual antes del ítem "Comparar todos" en el dropdown de Ecosistemas */
.menu-separator > a {
    border-top: 1px solid #e2e8f0;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
}

/* =============================================================================
   FOOTER LEGAL — Barra inferior de trust (cd-content-005)
   Generada por shortcode [gano_footer_legal] o wp_nav_menu location 'footer'.
   ============================================================================= */

.gano-footer-legal {
    background: #0f172a;
    color: #94a3b8;
    padding: 1.5rem 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.75;
}

.gano-footer-legal__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.gano-footer-legal__nav li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color var(--motion-fast, 150ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.gano-footer-legal__nav li a:hover {
    color: #e2e8f0;
    text-decoration: underline;
}

.gano-footer-legal__copy {
    margin: 0;
    color: #64748b;
}

.gano-footer-legal__copy a {
    color: #94a3b8;
    text-decoration: none;
}

@media (max-width: 600px) {
    .gano-footer-legal__nav {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gano-skip-link {
        transition: none;
    }

    /* ── Apagar tokens de motion para constellation / HUD base ─────
       Cubre .chip, .panel y cualquier componente que use var(--motion-*).
       Los valores quedan en 0s en lugar de eliminarse para no romper
       propiedades que dependan del fallback.
       Nota: --ease-out y --ease-spring no se modifican porque las funciones
       de timing son irrelevantes cuando la duración es 0s.
       ─────────────────────────────────────────────────────────── */
    :root {
        --motion-fast:   0s;
        --motion-normal: 0s;
        --motion-slow:   0s;
    }

    /* Garantía adicional: apagar transiciones y animaciones de los
       componentes principales que no estén cubiertos por los tokens */
    .gano-buy-button,
    .gano-btn-primary,
    .gano-menu-cta > a,
    .gano-footer-legal__nav li a {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Contacto — avisos de error (formulario nativo)
   -------------------------------------------------------------------------- */
.gano-form-notice--error {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    color: #fecaca;
    font-size: 0.9375rem;
}

.gano-form-notice--error p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   WooCommerce — carrito vacío (microcopy §4a)
   -------------------------------------------------------------------------- */
.gano-empty-cart {
    max-width: 28rem;
    margin: 2rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
}

.gano-empty-cart p {
    margin: 0 0 0.75rem;
    line-height: 1.55;
}

.gano-empty-cart p:first-child strong {
    font-size: 1.125rem;
    color: var(--gano-text-heading, #0f172a);
}

.gano-empty-cart .gano-btn {
    display: inline-block;
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Constellation 3D Hero — contenedor y canvas
   Ref: js/gano-constellation.js
   -------------------------------------------------------------------------- */
.gano-constellation-wrap {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: var(--gano-radius-xl);
    background: radial-gradient(ellipse at center, var(--gano-gray-900) 0%, var(--gano-dark) 100%);
}

.gano-constellation-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.gano-constellation-canvas:active {
    cursor: grabbing;
}

/* Panel de información de nodo — visible al hacer click */
#gano-constellation-panel {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    padding: 0.4rem 0.875rem;
    background: rgba(15, 25, 35, 0.88);
    border: 1px solid var(--gano-gold-border);
    border-radius: var(--gano-radius-md);
    color: var(--gano-gold);
    font-family: var(--gano-font-mono);
    font-size: var(--gano-fs-xs);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    transition: opacity 0.2s ease;
}

/* prefers-reduced-motion: el JS ya desactiva autoRotate/twinkle/scanlines.
   El CSS asegura además que las transiciones del panel sean instantáneas
   y que no haya animaciones CSS asociadas al wrapper. */
@media (prefers-reduced-motion: reduce) {
    .gano-constellation-wrap,
    .gano-constellation-canvas {
        animation: none;
    }
    #gano-constellation-panel {
        transition: none;
    }
}

/* ============================================================
   START: HERO OVERLAY + DOMAIN SEARCH FIX
   Oleada 7 — Legibilidad del Hero y paleta de sección de dominio.

   Instrucciones Elementor:
   1. Sección hero → Avanzado → Clases CSS → agregar "gano-hero-overlay"
   2. Sección búsqueda de dominio → Avanzado → Clases CSS → agregar "gano-domain-section"
   3. Widget H1 del hero → Avanzado → Clases CSS → agregar "gano-el-hero-readability"
   ============================================================ */

/* — Hero overlay: gradiente oscuro sobre cualquier imagen de fondo — */
.gano-hero-overlay {
    position: relative;
    isolation: isolate;
}

.gano-hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(5, 8, 12, 0.88) 0%,
        rgba(5, 8, 12, 0.70) 55%,
        rgba(27, 79, 216, 0.25) 100%
    );
}

/* El contenedor de Elementor queda sobre el overlay */
.gano-hero-overlay > .elementor-container,
.gano-hero-overlay > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* — Text-shadow fuerte: legible sobre cualquier imagen oscura o texturizada — */
.gano-el-hero-readability .elementor-heading-title,
.gano-el-hero-readability h1,
.gano-el-hero-readability h2 {
    text-shadow:
        0 2px 24px rgba(5, 8, 12, 0.92),
        0 4px 48px rgba(5, 8, 12, 0.75),
        0 1px 4px  rgba(5, 8, 12, 0.98);
}

/* — Sección búsqueda de dominios: elimina fondo lavanda del plugin/Elementor — */
.gano-domain-section,
.gano-domain-section.elementor-section,
.gano-domain-section.e-con {
    background-color: var(--gano-dark-deep, #05080C) !important;
    background-image: none !important;
}

/* Selector de respaldo: aplica si la sección contiene el widget del plugin */
.elementor-section:has(.rstore-domain-search),
.e-con:has(.rstore-domain-search) {
    background-color: var(--gano-dark-deep, #05080C) !important;
    background-image: none !important;
}

/* Inputs y CTA del buscador de dominios heredan paleta de marca */
.rstore-domain-search {
    background: transparent !important;
    color: var(--gano-text, #E2E8F0);
}

.rstore-domain-search input[type="text"],
.rstore-domain-search .rstore-search-input {
    background: var(--gano-card-sota, #0B1118) !important;
    border-color: var(--gano-border-sota, rgba(99,102,241,0.20)) !important;
    color: var(--gano-text, #E2E8F0) !important;
}

.rstore-domain-search input[type="text"]::placeholder,
.rstore-domain-search .rstore-search-input::placeholder {
    color: var(--gano-text-slate, #94A3B8) !important;
}

.rstore-domain-search .rstore-search-btn,
.rstore-domain-search button[type="submit"] {
    background: var(--gano-orange, #EA580C) !important;
    border-color: var(--gano-orange, #EA580C) !important;
    color: #ffffff !important;
}

.rstore-domain-search .rstore-search-btn:hover,
.rstore-domain-section button[type="submit"]:hover {
    background: var(--gano-orange-hover, #C2410C) !important;
    border-color: var(--gano-orange-hover, #C2410C) !important;
}

/* — Monolith: figura geométrica del hero (GSAP ya maneja la rotación) — */
.gano-monolith {
    aspect-ratio: 2 / 3;
    width: clamp(160px, 28vw, 320px);
    background: linear-gradient(
        180deg,
        var(--gano-indigo-soft, rgba(99,102,241,0.10)) 0%,
        var(--gano-purple-soft, rgba(139,92,246,0.10)) 100%
    );
    border: 1px solid var(--gano-border-sota, rgba(99,102,241,0.20));
    border-radius: var(--gano-radius-lg, 16px);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    will-change: transform;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .gano-monolith {
        animation: none !important;
        transform: none !important;
    }
}

/* END: HERO OVERLAY + DOMAIN SEARCH FIX */

/* ==========================================================================
   SOTA DESIGN SYSTEM V1 — Sitewide reusable components
   ========================================================================== */

.gano-sota-surface {
    background: var(--gano-dark, #0f1923);
    color: var(--gano-white, #fff);
}

.gano-sota-section {
    padding: clamp(3rem, 6vw, 6rem) 1.5rem;
}

.gano-sota-container {
    max-width: 1200px;
    margin: 0 auto;
}

.gano-sota-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--gano-radius-pill);
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.09);
    color: var(--gano-gold);
    font-size: var(--gano-fs-xs);
    letter-spacing: var(--gano-ls-wider);
    text-transform: uppercase;
    font-weight: var(--gano-fw-bold);
}

.gano-sota-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 9rem) 1.5rem clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gano-sota-hero__bg {
    position: absolute;
    inset: -10% -5%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 28%, rgba(27, 79, 216, 0.26), transparent 46%),
        radial-gradient(circle at 82% 68%, rgba(0, 194, 107, 0.2), transparent 44%),
        radial-gradient(circle at 55% 50%, rgba(212, 175, 55, 0.12), transparent 52%);
}

.gano-sota-hero__content {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.gano-sota-hero__title {
    font-family: var(--gano-font-heading);
    font-size: clamp(2.2rem, 7.2vw, 5.8rem);
    line-height: var(--gano-lh-tight);
    margin: 1rem 0;
    color: var(--gano-white);
}

.gano-sota-hero__title--accent {
    background: linear-gradient(90deg, var(--gano-gold), var(--gano-blue), var(--gano-green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gano-sota-hero__sub {
    max-width: 760px;
    margin: 0 auto 1.75rem;
    color: var(--gano-gray-300);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: var(--gano-lh-relaxed);
}

.gano-sota-hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.gano-sota-glass-card {
    background: rgba(19, 27, 46, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--gano-radius-lg);
    box-shadow: var(--gano-shadow-lg);
}

.gano-sota-status-strip {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 1.5rem;
    background: rgba(15, 25, 35, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.gano-sota-status-strip__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
}

.gano-sota-status-strip__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gano-sota-status-strip__label {
    color: var(--gano-gray-500);
    font-size: var(--gano-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--gano-ls-wide);
}

.gano-sota-status-strip__value {
    color: var(--gano-white);
    font-family: var(--gano-font-heading);
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    font-weight: var(--gano-fw-bold);
}

.gano-sota-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.gano-sota-card {
    position: relative;
    padding: 1.3rem;
    border-radius: var(--gano-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(23, 31, 51, 0.68);
    transition: var(--gano-transition);
}

.gano-sota-card:hover {
    border-color: rgba(212, 175, 55, 0.42);
    transform: translateY(-3px);
}

.gano-sota-card__title {
    color: var(--gano-white);
    font-family: var(--gano-font-heading);
    font-size: var(--gano-fs-lg);
    margin: 0 0 0.45rem;
}

.gano-sota-card__desc {
    color: var(--gano-gray-300);
    font-size: var(--gano-fs-sm);
    line-height: var(--gano-lh-relaxed);
    margin: 0;
}

.gano-sota-quiz-shell {
    background: rgba(23, 31, 51, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--gano-radius-lg);
    padding: clamp(1rem, 3vw, 2rem);
}

.gano-sota-quiz-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.13);
    border-radius: var(--gano-radius-pill);
    overflow: hidden;
}

.gano-sota-quiz-progress__fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--gano-blue), var(--gano-gold));
    transition: width var(--gano-transition);
}

.gano-sota-muted {
    color: var(--gano-gray-500);
}

@media (max-width: 992px) {
    .gano-sota-hero {
        padding-top: 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gano-sota-card,
    .gano-sota-quiz-progress__fill {
        transition: none;
    }
}

/* ==========================================================================
   Dark sections — contenedor base para secciones con fondo oscuro
   Usado en: nosotros, contacto, ecosistemas, comenzar-aqui, dashboard
   ========================================================================== */
.gano-dark-section {
    background: var(--gano-bg-dark);
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Nosotros template
   ========================================================================== */
.gano-trust-hero {
    padding: 5rem 1.5rem 4rem;
    text-align: center;
}

.gano-trust-hero h1 {
    font-size: var(--gano-fs-4xl);
    font-weight: var(--gano-fw-bold);
    line-height: var(--gano-lh-tight);
    max-width: 720px;
    margin: 0.75rem auto 1rem;
}

.gano-trust-hero__sub {
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--gano-lh-relaxed);
}

.gano-trust-section {
    padding: 4rem 1.5rem;
}

.gano-trust-section--alt {
    background: var(--gano-bg-alt);
}

.gano-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.gano-trust-disclaimer {
    background: #f1f5f9;
    border-left: 4px solid var(--gano-blue);
    padding: 1.25rem 1.5rem;
    border-radius: 0 var(--gano-radius-md) var(--gano-radius-md) 0;
    line-height: var(--gano-lh-relaxed);
}

.gano-trust-disclaimer p {
    margin: 0 0 0.75rem;
}

.gano-trust-disclaimer p:last-child {
    margin: 0;
}

.gano-nosotros__icon {
    font-size: 1.75rem;
}

.gano-nosotros__legal-links {
    margin-top: 1.5rem;
}

.gano-nosotros__pending {
    color: var(--gano-gray-500);
    font-style: italic;
}

.gano-nosotros__cta {
    text-align: center;
    padding: 4rem 1.5rem;
}

.gano-nosotros__cta-copy {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.5rem;
}

.gano-nosotros__cta-link {
    color: var(--gano-white);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .gano-trust-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SEO Landing template
   ========================================================================== */
.gano-seo-landing {
    font-family: var(--gano-font-body);
}

.gano-landing-hero {
    padding: 60px 20px;
    text-align: center;
    background: var(--gano-dark);
    color: var(--gano-white);
}

.gano-landing-h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: var(--gano-fw-bold);
    margin: 0 0 1rem;
}

.gano-landing-intro {
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto 2rem;
    opacity: 0.85;
}

/* Definición de .gano-btn-primary consolidada en línea 981 (CSS Foundation) */

.gano-btn-secondary {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: 2px solid currentColor;
    border-radius: var(--gano-radius-md);
    text-decoration: none;
    font-weight: var(--gano-fw-semibold);
    margin-top: 0.5rem;
}

.gano-landing-pricing,
.gano-landing-trust,
.gano-landing-content {
    padding: 60px 20px;
}

.gano-landing-pricing {
    background: #f8f8f8;
}

.gano-landing-pricing h2,
.gano-landing-trust h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.gano-pricing-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2.5rem;
}

.gano-seo-landing .gano-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.gano-seo-landing .gano-plan-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--gano-radius-lg);
    padding: 1.5rem;
    text-align: center;
}

.gano-seo-landing .gano-plan-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.gano-seo-landing .gano-plan-price {
    font-size: 1.5rem;
    font-weight: var(--gano-fw-bold);
    color: #0a0a0a;
    margin-bottom: 0.5rem;
}

.gano-seo-landing .gano-plan-period {
    font-size: 0.85rem;
    font-weight: var(--gano-fw-normal);
    color: #666;
}

.gano-seo-landing .gano-plan-desc {
    font-size: 0.9rem;
    color: #555;
    margin: 0.75rem 0;
}

.gano-trust-list {
    max-width: 700px;
    margin: 0 auto;
    padding-left: 1.2rem;
    line-height: 2;
}

@media (prefers-color-scheme: dark) {
    .gano-seo-landing .gano-plan-card {
        background: #1a1a1a;
        border-color: #333;
        color: #eee;
    }

    .gano-landing-pricing {
        background: #111;
    }
}

/* ==========================================================================
   Diagnostico digital template
   ========================================================================== */
.gano-diagnostico__step {
    margin: 0.9rem 0 0.65rem;
    font-size: var(--gano-fs-sm);
}

.gano-diagnostico__question {
    margin: 0 0 1rem;
    color: var(--gano-white);
    font-size: clamp(1.3rem, 2.8vw, 2.1rem);
    line-height: var(--gano-lh-tight);
}

.gano-diagnostico__answers {
    display: grid;
    gap: 0.75rem;
}

.gano-diagnostico__answer-btn {
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    color: var(--gano-white);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--gano-radius-md);
    padding: 0.9rem 1rem;
    font: inherit;
    cursor: pointer;
    transition: var(--gano-transition);
}

.gano-diagnostico__answer-btn:hover {
    border-color: rgba(212, 175, 55, 0.45);
    transform: translateY(-1px);
}

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

.gano-diagnostico__result {
    margin-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.1rem;
}

.gano-diagnostico__result h3 {
    margin: 0 0 0.45rem;
    color: var(--gano-gold);
    font-size: var(--gano-fs-xl);
}

.gano-diagnostico__result p {
    margin: 0 0 1rem;
    color: var(--gano-gray-300);
}

.gano-btn-outline {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--gano-white);
    text-decoration: none;
    font-weight: var(--gano-fw-semibold);
    border-radius: var(--gano-radius-md);
    padding: 0.65rem 1rem;
}

.gano-ecosistemas__cta-final {
    text-align: center;
    padding: 5rem 1.5rem;
}

/* ==========================================================================
   SOTA Hub template
   ========================================================================== */
.sota-hub-body {
    min-height: 60vh;
}

.sota-hub-empty {
    color: var(--gano-gray-500);
    text-align: center;
    padding: 60px 0;
    font-size: 1.1rem;
}

.sota-hub-category {
    margin-bottom: 60px;
}

.sota-hub-category__title {
    color: var(--gano-gold);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: var(--gano-ls-wider);
    font-weight: var(--gano-fw-bold);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.sota-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.sota-hub-card {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sota-hub-card--draft {
    border-color: rgba(255, 255, 255, 0.06);
}

.sota-hub-card__draft-label {
    font-size: 0.7rem;
    font-weight: var(--gano-fw-bold);
    text-transform: uppercase;
    color: var(--gano-gray-500);
    letter-spacing: var(--gano-ls-wider);
}

.sota-hub-card__thumb {
    border-radius: var(--gano-radius-md);
    overflow: hidden;
    height: 140px;
}

.sota-hub-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sota-hub-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sota-hub-card__title {
    font-size: 1.05rem;
    font-weight: var(--gano-fw-bold);
    color: var(--gano-white);
    margin: 0;
    line-height: 1.35;
}

.sota-hub-card--draft .sota-hub-card__title {
    color: var(--gano-gray-500);
}

.sota-hub-card__excerpt {
    font-size: 0.9rem;
    color: var(--gano-gray-300);
    margin: 0;
    line-height: var(--gano-lh-relaxed);
}

.sota-hub-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gano-gold);
    font-weight: var(--gano-fw-bold);
    font-size: 0.85rem;
    text-decoration: none;
    letter-spacing: 0.04em;
}

.sota-hub-card__pending {
    color: #475569;
    font-size: 0.8rem;
}

.sota-hub-cta {
    margin-top: 80px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    padding: 50px;
    text-align: center;
}

.sota-hub-cta h3 {
    color: var(--gano-white);
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0 0 12px;
}

.sota-hub-cta p {
    color: var(--gano-gray-300);
    margin: 0 0 30px;
}

/* START: CONTACTO PAGE */
.gano-form-notice--error {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: var(--gano-radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    color: #fecaca;
    font-size: var(--gano-fs-base);
}

.gano-form-notice--error p { margin: 0; }

.gano-form-notice--success {
    background: rgba(0, 194, 107, 0.10);
    border: 1px solid rgba(0, 194, 107, 0.30);
    border-radius: var(--gano-radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--gano-green);
    font-size: var(--gano-fs-base);
}

.gano-form-notice--success p { margin: 0; }

.gano-contacto__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 3rem;
    align-items: start;
}

.gano-contacto__info {
    background: var(--gano-bg-alt);
    border-radius: var(--gano-radius-lg);
    padding: 2rem;
}

.gano-contacto__item { margin-bottom: 1.25rem; }

.gano-contacto__item strong {
    display: block;
    font-size: var(--gano-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gano-gray-500);
    margin-bottom: 0.25rem;
}

.gano-contacto__item a {
    color: var(--gano-blue);
    text-decoration: none;
    font-weight: var(--gano-fw-semibold);
}

.gano-contacto__item a:hover { text-decoration: underline; }

.gano-contacto__divider {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid #e2e8f0;
}

.gano-contacto__cta-link {
    font-size: var(--gano-fs-sm);
    color: #64748b;
    margin: 0;
}

.gano-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gano-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gano-form__group label {
    font-size: var(--gano-fs-sm);
    font-weight: var(--gano-fw-semibold);
}

.gano-form__optional {
    font-weight: var(--gano-fw-normal);
    color: #94a3b8;
}

.gano-form__group input,
.gano-form__group select,
.gano-form__group textarea {
    padding: 0.625rem 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--gano-radius-md);
    font-size: var(--gano-fs-base);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.gano-form__group input:focus,
.gano-form__group select:focus,
.gano-form__group textarea:focus {
    outline: 3px solid var(--gano-blue);
    outline-offset: 2px;
    border-color: var(--gano-blue);
}

.gano-form__privacy {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

@media (max-width: 768px) {
    .gano-contacto__layout { grid-template-columns: 1fr; }
}
/* END: CONTACTO PAGE */

/* START: HERO IMAGE FALLBACK */
.gano-hero-overlay {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.gano-hero-overlay:not([style*="background-image"]),
.elementor-element.gano-hero-overlay:not([style*="background-image"]) {
    background-image: url("assets/images/hero-datacenter.jpg");
}
/* END: HERO IMAGE FALLBACK */

/* START: HERO BLOCK SHORTCODE — [gano_hero] */
.gano-hero-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(4rem, 8vw, 6rem) 0;
}

.gano-hero-block__copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gano-hero-block__sub {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: var(--gano-lh-body, 1.6);
    max-width: 52ch;
}

.gano-hero-block__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.gano-hero-block__img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gano-hero-block__img-el {
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--gano-radius-lg, 12px);
    object-fit: cover;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

/* Hero CTA row para front-page.php */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.hero-microcopy {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.03em;
}

/* Botón secundario del hero */
.btn-gano--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--gano-white, #ffffff);
    padding: 0.75rem 1.5rem;
    border-radius: var(--gano-radius-sm, 6px);
    font-weight: 600;
    transition: border-color 0.2s, background 0.2s;
    text-decoration: none;
}

.btn-gano--secondary:hover,
.btn-gano--secondary:focus-visible {
    border-color: var(--gano-green, #00C26B);
    background: rgba(0, 194, 107, 0.08);
    outline: 2px solid var(--gano-green, #00C26B);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .gano-hero-block {
        grid-template-columns: 1fr;
    }

    .gano-hero-block__img {
        order: -1;
    }

    .gano-hero-block__img-el {
        max-height: 280px;
        object-position: center top;
    }
}
/* END: HERO BLOCK SHORTCODE */

/* START: SKELETON LOADERS — Wave 3 UX */
@keyframes gano-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.gano-skeleton {
    background: linear-gradient(
        90deg,
        var(--gano-gray-100) 25%,
        rgba(255, 255, 255, 0.6) 50%,
        var(--gano-gray-100) 75%
    );
    background-size: 800px 100%;
    animation: gano-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--gano-radius-sm);
}

.gano-on-dark .gano-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 800px 100%;
}

.gano-skeleton--text    { height: var(--gano-fs-base); margin-bottom: 0.5rem; }
.gano-skeleton--heading { height: var(--gano-fs-4xl);  margin-bottom: 1rem; }
.gano-skeleton--image   { height: 240px; width: 100%; }
.gano-skeleton--card    { height: 320px; width: 100%; border-radius: var(--gano-radius-lg); }
.gano-skeleton--avatar  { height: 48px; width: 48px; border-radius: var(--gano-radius-pill); }
.gano-skeleton--btn     { height: 44px; width: 140px; border-radius: var(--gano-radius-md); }

.gano-skeleton[hidden],
.is-loaded .gano-skeleton { display: none; }

@media (prefers-reduced-motion: reduce) {
    .gano-skeleton { animation: none; }
}
/* END: SKELETON LOADERS */

/* START: LOGO DISPLAY */
.gano-logo {
    max-width: 100%;
    height: auto;
    display: block;
    transition: filter var(--motion-fast) cubic-bezier(0.4, 0, 0.2, 1);
}

.gano-logo--light {
    /* Light mode colors */
}

.gano-logo--dark {
    /* Dark mode colors */
    filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.1));
}

.gano-logo--sm {
    height: 32px;
}

.gano-logo--md {
    height: 48px;
}

.gano-logo--lg {
    height: 64px;
}

/* Logo Mark */
.gano-logo-mark {
    display: block;
    max-width: 100%;
    height: auto;
}

.gano-logo-mark--sm {
    height: 24px;
}

.gano-logo-mark--md {
    height: 32px;
}

.gano-logo-mark--lg {
    height: 48px;
}

/* Header Logo */
.site-header .gano-logo {
    max-height: 64px;
}

/* Footer Logo */
.site-footer .gano-logo {
    max-height: 48px;
}

@media (prefers-reduced-motion: reduce) {
    .gano-logo {
        transition: none;
    }
}
/* END: LOGO DISPLAY */