/*
Theme Name:   Allprocar Tech Ecosystem
Theme URI:    https://allprocar.com
Description:  Tema corporativo premium para el ecosistema digital Allprocar. Optimizado para conversión, modo oscuro, rendimiento, responsive y coherencia visual con la marca.
Author:       Allprocar Tech Team
Author URI:   https://allprocar.com
Template:     hello-elementor
Version:      3.0.0
Text Domain:  allprocar-theme
Tags:         automotive, dark-mode, performance, ecosystem, marketplace
*/

/* ==========================================================================
   ALLPROCAR THEME BASE · SISTEMA GENERAL
   Objetivo: armonizar colores, escalado y comportamiento global sin romper
   plantillas específicas como .apeco-wrap, .apsp-wrap, .aplp-wrapper, etc.
   ========================================================================== */

:root {
    /* Marca */
    --ap-blue-deep: #0A1C2C;
    --ap-blue: #0055FF;
    --ap-blue-2: #0E63FF;
    --ap-cyan: #00D1FF;
    --ap-silver: #EAF0F8;
    --ap-silver-2: #C7D1DF;
    --ap-silver-3: #8F9BAE;
    --ap-white: #FFFFFF;

    /* Estados */
    --ap-green: #00C853;
    --ap-warning: #F6C400;
    --ap-red: #FF3B30;

    /* Fondos */
    --ap-bg: #030507;
    --ap-bg-2: #05080D;
    --ap-bg-3: #08101A;
    --ap-card: rgba(12, 20, 33, 0.78);
    --ap-card-solid: #0D1622;
    --ap-card-soft: rgba(255, 255, 255, 0.035);

    /* Texto */
    --ap-text: #F6F9FF;
    --ap-text-soft: #D7E0ED;
    --ap-muted: #AEB8C9;
    --ap-muted-2: #7F8B9E;

    /* Bordes y sombras */
    --ap-border: rgba(255, 255, 255, 0.10);
    --ap-border-soft: rgba(255, 255, 255, 0.06);
    --ap-border-blue: rgba(0, 209, 255, 0.24);
    --ap-glow-blue: rgba(0, 85, 255, 0.32);
    --ap-glow-cyan: rgba(0, 209, 255, 0.22);
    --ap-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
    --ap-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);

    /* Gradientes */
    --ap-gradient-blue: linear-gradient(135deg, #0055FF 0%, #00A3FF 100%);
    --ap-gradient-silver: linear-gradient(135deg, #FFFFFF 0%, #EAF0F8 22%, #AEB8C9 48%, #FFFFFF 68%, #9EAABC 100%);
    --ap-gradient-card: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));

    /* Escalado global */
    --ap-container: min(1220px, calc(100vw - 40px));
    --ap-container-wide: min(1380px, calc(100vw - 40px));
    --ap-section-y: clamp(72px, 7vw, 112px);
    --ap-section-y-compact: clamp(48px, 5vw, 82px);
    --ap-header-offset: 96px;

    /* Radius */
    --ap-radius-xs: 8px;
    --ap-radius-sm: 12px;
    --ap-radius-md: 18px;
    --ap-radius-lg: 26px;
    --ap-radius-xl: 34px;
    --ap-radius-pill: 999px;

    /* Tipografía */
    --ap-font-primary: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ap-font-display: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Movimiento */
    --ap-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ap-transition: 220ms var(--ap-ease);
    --ap-transition-slow: 420ms var(--ap-ease);
}

/* ==========================================================================
   BASE GLOBAL
   ========================================================================== */

html {
    background: var(--ap-bg);
    color-scheme: dark;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 85, 255, 0.10), transparent 26%),
        radial-gradient(circle at 82% 10%, rgba(0, 209, 255, 0.055), transparent 22%),
        linear-gradient(180deg, #030507 0%, #05080D 48%, #030507 100%);
    color: var(--ap-text);
    font-family: var(--ap-font-primary);
    font-size: clamp(15px, 0.95vw, 17px);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
    font-family: var(--ap-font-primary);
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--ap-white);
}

::selection {
    background: rgba(0, 85, 255, 0.45);
    color: #fff;
}

/* Evita flashes rojos/azules feos en mobile */
a,
button,
input,
textarea,
select,
summary,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"] {
    touch-action: manipulation;
}

button:focus,
a:focus,
summary:focus {
    outline: none;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(0, 209, 255, 0.72);
    outline-offset: 3px;
}

/* ==========================================================================
   TIPOGRAFÍA GENERAL
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ap-text);
    font-family: var(--ap-font-display);
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 1.02;
    margin: 0 0 1rem;
    text-wrap: balance;
}

h1 {
    font-size: clamp(42px, 6.2vw, 86px);
}

h2 {
    font-size: clamp(32px, 4.4vw, 60px);
}

h3 {
    font-size: clamp(22px, 2.3vw, 32px);
    letter-spacing: -0.035em;
}

h4 {
    font-size: clamp(18px, 1.6vw, 24px);
    letter-spacing: -0.025em;
}

p {
    color: var(--ap-muted);
    margin: 0 0 1rem;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.72;
}

strong,
b {
    color: var(--ap-text);
    font-weight: 800;
}

small {
    color: var(--ap-muted-2);
}

/* ==========================================================================
   CONTENEDORES Y SECCIONES
   ========================================================================== */

.ap-container,
.ap-shell,
.ap-section-inner {
    width: var(--ap-container);
    margin-inline: auto;
}

.ap-container-wide {
    width: var(--ap-container-wide);
    margin-inline: auto;
}

.ap-section {
    padding-block: var(--ap-section-y);
    position: relative;
}

.ap-section-compact {
    padding-block: var(--ap-section-y-compact);
}

[id] {
    scroll-margin-top: var(--ap-header-offset);
}

/* Full bleed seguro para plantillas propias */
.ap-full-bleed,
.apeco-wrap,
.apsp-wrap,
.aplp-wrapper,
.apaut-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ==========================================================================
   UTILIDADES VISUALES
   ========================================================================== */

.ap-eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    color: var(--ap-cyan);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

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

.ap-text-blue {
    color: var(--ap-blue-2);
}

.ap-lead {
    max-width: 850px;
    color: var(--ap-text-soft);
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.72;
}

.ap-muted {
    color: var(--ap-muted);
}

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

.ap-center .ap-lead,
.ap-center p {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.ap-btn-primary,
.ap-btn-secondary,
.ap-btn-ghost,
.wp-block-button__link,
.elementor-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    border-radius: var(--ap-radius-sm);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none !important;
    transition: transform var(--ap-transition), background var(--ap-transition), border-color var(--ap-transition), box-shadow var(--ap-transition), color var(--ap-transition);
}

.ap-btn-primary,
.wp-block-button__link,
.elementor-button {
    background: var(--ap-gradient-blue) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 14px 34px rgba(0, 85, 255, 0.24);
}

.ap-btn-primary:hover,
.wp-block-button__link:hover,
.elementor-button:hover {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(0, 85, 255, 0.34);
}

.ap-btn-secondary {
    background: rgba(255, 255, 255, 0.035);
    color: var(--ap-text) !important;
    border: 1px solid var(--ap-border);
}

.ap-btn-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 209, 255, 0.34);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.ap-btn-ghost {
    background: transparent;
    color: var(--ap-text-soft) !important;
    border: 1px solid transparent;
}

.ap-btn-ghost:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--ap-border-soft);
}

/* Neutraliza sombras rojas heredadas en botones, FAQ y acordeones */
button:active,
button:hover,
button:focus,
.ap-btn-primary:active,
.ap-btn-secondary:active,
.ap-btn-ghost:active,
.elementor-button:active,
.elementor-tab-title:active,
.elementor-accordion-title:active,
summary:active {
    box-shadow: none;
}

/* ==========================================================================
   TARJETAS Y GLASS PREMIUM
   ========================================================================== */

.ap-card,
.ap-card-glass {
    background: var(--ap-gradient-card);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow-soft);
    padding: clamp(22px, 2.2vw, 32px);
    transition: transform var(--ap-transition), border-color var(--ap-transition), background var(--ap-transition), box-shadow var(--ap-transition);
}

.ap-card:hover,
.ap-card-glass:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 209, 255, 0.22);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .ap-card-glass {
        background: rgba(12, 20, 33, 0.72);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

input,
textarea,
select {
    width: 100%;
    background: rgba(255, 255, 255, 0.045);
    color: var(--ap-text);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color var(--ap-transition), box-shadow var(--ap-transition), background var(--ap-transition);
}

input::placeholder,
textarea::placeholder {
    color: rgba(174, 184, 201, 0.68);
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(0, 209, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 4px rgba(0, 209, 255, 0.08);
    outline: none;
}

/* ==========================================================================
   GRIDS Y HELPERS RESPONSIVE
   ========================================================================== */

.ap-grid-2,
.ap-grid-3,
.ap-grid-4 {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
}

.ap-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   COMPATIBILIDAD CON PLANTILLAS ALLPROCAR EXISTENTES
   Solo variables y armonía visual. No pisa layouts internos.
   ========================================================================== */

.apeco-wrap,
.apsp-wrap,
.aplp-wrapper,
.apaut-wrap {
    --apeco-bg: var(--ap-bg);
    --apeco-blue: var(--ap-blue);
    --apeco-blue-2: var(--ap-blue-2);
    --apeco-cyan: var(--ap-cyan);
    --apeco-silver: var(--ap-silver);
    --apeco-silver-2: var(--ap-silver-2);
    --apeco-muted: var(--ap-muted);

    --apsp-bg: var(--ap-bg);
    --apsp-blue: var(--ap-blue);
    --apsp-blue-2: var(--ap-blue-2);
    --apsp-cyan: var(--ap-cyan);
    --apsp-silver: var(--ap-silver);
    --apsp-muted: var(--ap-muted);

    --aplp-bg: var(--ap-bg);
    --aplp-blue: var(--ap-blue);
    --aplp-blue-2: var(--ap-blue-2);
    --aplp-cyan: var(--ap-cyan);
    --aplp-text: var(--ap-text);
    --aplp-muted: var(--ap-muted);

    font-family: var(--ap-font-primary);
}

/* Evita que Elementor/Hello meta blancos o fondos claros en páginas oscuras */
.site-main,
#content,
.elementor,
.elementor-section,
.elementor-widget-wrap {
    color: var(--ap-text);
}

/* ==========================================================================
   BREAKPOINTS DE ESCALADO
   ========================================================================== */

@media (max-width: 1280px) {
    :root {
        --ap-container: min(1180px, calc(100vw - 36px));
        --ap-container-wide: min(1280px, calc(100vw - 36px));
    }
}

@media (max-width: 1024px) {
    :root {
        --ap-container: min(100vw - 32px, 960px);
        --ap-container-wide: min(100vw - 32px, 960px);
        --ap-section-y: clamp(64px, 8vw, 92px);
    }

    .ap-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    h1 { font-size: clamp(38px, 8vw, 72px); }
    h2 { font-size: clamp(30px, 6vw, 52px); }
}

@media (max-width: 767px) {
    :root {
        --ap-container: min(100vw - 24px, 720px);
        --ap-container-wide: min(100vw - 24px, 720px);
        --ap-section-y: clamp(56px, 12vw, 78px);
        --ap-section-y-compact: clamp(38px, 9vw, 60px);
        --ap-header-offset: 78px;
    }

    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(34px, 11vw, 56px);
        letter-spacing: -0.05em;
    }

    h2 {
        font-size: clamp(28px, 9vw, 42px);
        letter-spacing: -0.045em;
    }

    h3 {
        font-size: clamp(21px, 6vw, 30px);
    }

    p,
    .ap-lead {
        font-size: 16px;
        line-height: 1.68;
    }

    .ap-grid-2,
    .ap-grid-3,
    .ap-grid-4 {
        grid-template-columns: 1fr;
    }

    .ap-btn-primary,
    .ap-btn-secondary,
    .ap-btn-ghost,
    .wp-block-button__link,
    .elementor-button {
        min-height: 52px;
        width: 100%;
        padding-inline: 20px;
    }

    .ap-card,
    .ap-card-glass {
        border-radius: var(--ap-radius-md);
        padding: 22px;
    }
}

@media (max-width: 390px) {
    :root {
        --ap-container: min(100vw - 20px, 390px);
        --ap-container-wide: min(100vw - 20px, 390px);
    }

    h1 { font-size: clamp(32px, 12vw, 46px); }
    h2 { font-size: clamp(26px, 10vw, 38px); }

    .ap-card,
    .ap-card-glass {
        padding: 19px;
    }
}

/* ==========================================================================
   PERFORMANCE Y ACCESIBILIDAD
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .ap-card:hover,
    .ap-card-glass:hover,
    .ap-btn-primary:hover,
    .ap-btn-secondary:hover,
    .wp-block-button__link:hover,
    .elementor-button:hover {
        transform: none;
    }
}