/* ===============================
   BRAND SYSTEM — Gestoría Vehicular Jalisco
   Sistema de diseño centralizado.
   Paleta: azul petróleo + rojo de velocidad + blanco.
   Versión: 1.0
   =============================== */

/* ---------------------------------------------------------------
   A. VARIABLES DE MARCA (:root)
   --------------------------------------------------------------- */
:root {
    /* Colores principales */
    --gv-blue: #006C99;
    --gv-blue-deep: #005A8D;
    --gv-accent: #00A7D7;
    --gv-red: #E10E22;
    --gv-red-dark: #A80717;
    --gv-navy: #041827;
    --gv-dark: #071C2F;
    --gv-light: #F4F8FB;
    --gv-ice: #EAF4F8;
    --gv-steel: #315E78;
    --gv-white: #FFFFFF;

    /* Layout */
    --gv-radius: 1.25rem;

    /* Sombras */
    --gv-shadow-sm: 0 4px 20px -8px rgba(4, 24, 39, 0.12);
    --gv-shadow-md: 0 8px 40px -16px rgba(4, 24, 39, 0.22);
    --gv-shadow-lg: 0 20px 60px -24px rgba(4, 24, 39, 0.35);
    --gv-shadow-blue: 0 12px 40px -12px rgba(0, 108, 153, 0.55);
    --gv-shadow-red: 0 12px 40px -20px rgba(225, 14, 34, 0.30);

    /* Transiciones */
    --gv-transition: cubic-bezier(.2, .8, .2, 1);
    --gv-transition-fast: 0.2s cubic-bezier(.2, .8, .2, 1);
    --gv-transition-med: 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------
   B. BASE GLOBAL
   --------------------------------------------------------------- */
html,
body,
button,
input,
textarea,
select {
    font-family: "Google Sans", "Product Sans", "Plus Jakarta Sans", "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at top left, rgba(0, 108, 153, 0.12), transparent 34rem),
        radial-gradient(circle at top right, rgba(225, 14, 34, 0.10), transparent 30rem),
        linear-gradient(180deg, var(--gv-light) 0%, #ffffff 52%, var(--gv-ice) 100%);
    color: #12202d;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

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

/* ---------------------------------------------------------------
   C. HEADER
   --------------------------------------------------------------- */
header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 108, 153, 0.12) !important;
    box-shadow: 0 4px 30px -8px rgba(4, 24, 39, 0.18) !important;
}

/* ---------------------------------------------------------------
   D. LOGO EN HEADER
   --------------------------------------------------------------- */
.brand-logo-shell {
    background: linear-gradient(145deg, #02111f, var(--gv-dark));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 24px -8px rgba(0, 108, 153, 0.55);
    border-radius: 0.75rem;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-img {
    filter: drop-shadow(0 2px 8px rgba(0, 108, 153, 0.3));
    height: 2.5rem;
    width: auto;
}

/* ---------------------------------------------------------------
   E. NAV LINKS
   --------------------------------------------------------------- */
.nav-link {
    position: relative;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gv-blue), var(--gv-red));
    transition: width .25s ease;
}

.nav-link:hover::after,
.active-nav::after {
    width: 100%;
}

/* ---------------------------------------------------------------
   F. HERO SECTION
   --------------------------------------------------------------- */
#page-home > div:first-child {
    position: relative;
    background:
        radial-gradient(circle at 82% 20%, rgba(225, 14, 34, .28), transparent 28%),
        radial-gradient(circle at 18% 8%, rgba(0, 167, 215, .22), transparent 28%),
        linear-gradient(135deg, #041827 0%, #071C2F 50%, #005A8D 100%) !important;
    overflow: hidden;
}

#page-home > div:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .09;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 44px);
    mask-image: linear-gradient(135deg, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* ---------------------------------------------------------------
   G. TIPOGRAFÍA DE TÍTULOS
   --------------------------------------------------------------- */
#page-home h2,
.page-view h2,
h3,
h4 {
    letter-spacing: -0.045em;
}

#page-home h2 span {
    color: white !important;
    text-shadow: 0 0 32px rgba(225, 14, 34, 0.5);
    position: relative;
    display: inline-block;
}

#page-home h2 span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .06em;
    height: .16em;
    z-index: -1;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gv-red), rgba(225, 14, 34, .12));
}

/* ---------------------------------------------------------------
   H. BOTONES PRINCIPALES
   --------------------------------------------------------------- */
button,
a {
    transition-timing-function: cubic-bezier(.2, .8, .2, 1) !important;
}

/* Botón rojo CTA */
button[class*="bg-jalisco-gold"],
a[class*="bg-jalisco-gold"] {
    background: linear-gradient(135deg, var(--gv-red) 0%, var(--gv-red-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 12px 30px -10px rgba(225, 14, 34, .65) !important;
    border: none;
}

button[class*="bg-jalisco-gold"]:hover,
a[class*="bg-jalisco-gold"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -12px rgba(225, 14, 34, .75) !important;
    filter: brightness(1.06);
}

/* Botón azul acento */
button[class*="bg-jalisco-accent"],
a[class*="bg-jalisco-accent"] {
    background: linear-gradient(135deg, var(--gv-blue) 0%, var(--gv-accent) 100%) !important;
    box-shadow: 0 10px 28px -10px rgba(0, 108, 153, .65) !important;
    color: white !important;
}

button[class*="bg-jalisco-accent"]:hover,
a[class*="bg-jalisco-accent"]:hover {
    background: linear-gradient(135deg, var(--gv-blue-deep) 0%, var(--gv-blue) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -12px rgba(0, 108, 153, .75) !important;
}

/* ---------------------------------------------------------------
   I. CARDS DE SERVICIOS
   --------------------------------------------------------------- */
#servicios .bg-white.rounded-2xl {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 108, 153, .10) !important;
    box-shadow: 0 8px 40px -20px rgba(4, 24, 39, .22) !important;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

#servicios .bg-white.rounded-2xl::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gv-blue), var(--gv-accent), var(--gv-red));
    opacity: .9;
}

#servicios .bg-white.rounded-2xl:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px -20px rgba(0, 108, 153, .38) !important;
    border-color: rgba(0, 108, 153, .22) !important;
}

/* Cards generales de sección */
.service-card,
section .rounded-2xl.border.border-slate-200,
section .rounded-2xl.border.border-slate-200\/60 {
    border-color: rgba(0, 108, 153, .11) !important;
    box-shadow: 0 20px 55px -42px rgba(4, 24, 39, .40);
}

/* ---------------------------------------------------------------
   J. PÁGINAS INTERNAS DE SERVICIO
   --------------------------------------------------------------- */
[id^="page-"] > div:first-child:not(#page-home > div:first-child):not(#page-admin > div) {
    background:
        radial-gradient(circle at 90% 0%, rgba(0, 167, 215, .14), transparent 28rem),
        radial-gradient(circle at 8% 100%, rgba(0, 108, 153, .10), transparent 20rem),
        linear-gradient(180deg, #ffffff 0%, var(--gv-ice) 100%) !important;
}

/* ---------------------------------------------------------------
   K. SECCIÓN DE CONTACTO
   --------------------------------------------------------------- */
#contacto {
    background:
        radial-gradient(circle at 15% 15%, rgba(0, 108, 153, .40), transparent 26rem),
        radial-gradient(circle at 88% 0%, rgba(225, 14, 34, .22), transparent 22rem),
        linear-gradient(135deg, #020b14 0%, var(--gv-navy) 55%, #061c31 100%) !important;
}

#contacto input:focus,
#contacto textarea:focus {
    border-color: var(--gv-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 167, 215, .18) !important;
    outline: none;
}

/* ---------------------------------------------------------------
   L. CHAT FLOTANTE
   --------------------------------------------------------------- */
.chat-glow {
    box-shadow:
        0 12px 40px -12px rgba(0, 108, 153, .55),
        0 12px 40px -20px rgba(225, 14, 34, .30) !important;
}

#chat-window {
    border: 1px solid rgba(0, 108, 153, .14) !important;
    box-shadow: 0 24px 70px -20px rgba(4, 24, 39, .45) !important;
}

.message-bubble {
    max-width: 85%;
    border-radius: 1.1rem;
}

/* ---------------------------------------------------------------
   M. FORMULARIOS EN GENERAL
   --------------------------------------------------------------- */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--gv-accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 167, 215, .16) !important;
    outline: none;
}

/* ---------------------------------------------------------------
   N. DETAILS / FAQ
   --------------------------------------------------------------- */
details {
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(0, 108, 153, .10);
    border-radius: var(--gv-radius);
    box-shadow: 0 4px 20px -8px rgba(4, 24, 39, .12);
    transition: box-shadow 0.2s ease;
}

details[open] {
    box-shadow: 0 8px 32px -10px rgba(0, 108, 153, .20);
}

details summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--gv-dark);
}

details summary::-webkit-details-marker {
    display: none;
}

/* ---------------------------------------------------------------
   O. COMPATIBILIDAD DE CLASES TAILWIND CUSTOM
   --------------------------------------------------------------- */
.bg-jalisco-dark { background-color: var(--gv-navy) !important; }
.from-jalisco-dark {
    --tw-gradient-from: var(--gv-navy) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(4 24 39 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-slate-900 { --tw-gradient-to: var(--gv-dark) var(--tw-gradient-to-position) !important; }
.bg-jalisco-blue { background-color: var(--gv-blue) !important; }
.text-jalisco-blue { color: var(--gv-blue-deep) !important; }
.border-jalisco-blue { border-color: var(--gv-blue) !important; }
.bg-jalisco-gold { background-color: var(--gv-red) !important; }
.text-jalisco-gold { color: var(--gv-red) !important; }
.border-jalisco-gold { border-color: var(--gv-red) !important; }
.bg-jalisco-accent { background-color: var(--gv-accent) !important; }
.text-jalisco-accent { color: var(--gv-blue) !important; }
.border-jalisco-accent { border-color: var(--gv-accent) !important; }

/* ---------------------------------------------------------------
   P. FOCUS VISIBLE ACCESIBLE
   --------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--gv-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Q. FOOTER
   --------------------------------------------------------------- */
footer {
    background: #020b14 !important;
    border-top: 1px solid rgba(0, 108, 153, .12) !important;
}

/* ---------------------------------------------------------------
   R. SCROLLBAR PERSONALIZADO (WEBKIT)
   --------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--gv-ice);
}

::-webkit-scrollbar-thumb {
    background: var(--gv-blue);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gv-blue-deep);
}

/* ---------------------------------------------------------------
   S. ANIMACIÓN PULSE PARA BOTÓN DE CHAT
   --------------------------------------------------------------- */
@keyframes gv-pulse {
    0%, 100% {
        box-shadow:
            0 12px 40px -12px rgba(0, 108, 153, .55),
            0 0 0 0 rgba(0, 108, 153, .4);
    }
    50% {
        box-shadow:
            0 12px 40px -12px rgba(0, 108, 153, .55),
            0 0 0 10px rgba(0, 108, 153, 0);
    }
}

#chat-toggle-btn {
    animation: gv-pulse 3s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   T. ESCALADO TIPOGRÁFICO DE LEGIBILIDAD
   Problema: el HTML usa text-xs (12px) como cuerpo de texto en
   tarjetas, FAQs y páginas internas. Mínimo legible: 14-15px.
   Solución: overrides CSS por sección sin modificar el HTML.
   --------------------------------------------------------------- */

/* --- Cards de servicios: descripciones --- */
#servicios p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}

/* --- Sección de features de confianza (Ubicación, Legalidad, etc.) --- */
.py-12.bg-white h4,
.py-12.border-b h4 {
    font-size: 0.9375rem !important;
}
.py-12.bg-white p,
.py-12.border-b p {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
}

/* --- Sección de servicios: intro y subtítulo --- */
#servicios p.text-sm,
#servicios > div > div > p {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
}

/* --- FAQ: pregunta (summary) --- */
details summary {
    font-size: 1rem !important;
}

/* --- FAQ: respuesta --- */
details p {
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    padding-bottom: 0.75rem;
}

/* --- Páginas internas: listas de requisitos --- */
.page-view:not(#page-home) ul li {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}

/* --- Páginas internas: párrafos descriptivos y alertas --- */
.page-view:not(#page-home) p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}

/* --- Sección de contacto: texto de apoyo --- */
#contacto p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}

/* --- Botones "Ver más" y CTAs secundarios en cards --- */
#servicios button {
    font-size: 0.8125rem !important;
}

/* --- Mensajes del chat --- */
#chat-messages .text-xs {
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
}

/* --- Subtítulo de la sección servicios ("¿Qué problema necesitas...") --- */
#servicios + * p,
section.py-16.bg-white p,
section.py-16.bg-slate-50 > div > div > p {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
}

/* --- Excepciones: mantener pequeño donde aplica --- */
/* Badges de sección, labels de stats y tooltips */
.uppercase.tracking-widest,
.uppercase.tracking-wider:not(button):not(a) {
    font-size: 0.6875rem !important;
    letter-spacing: 0.1em !important;
}

/* Textos de estado del panel admin */
#page-admin .text-xs {
    font-size: 0.8125rem !important;
}