/* ========================================
   AP Digital - Estilos 2026
   Paleta: Legal Point (Azul Profesional)

   - Pure Mint: #DAF6EF
   - Cape Cod: #0A2536
   - Obsidian: #33566D
   - Pure White: #F3FAFF

   TEMA: Dark Mode (default) / Light Mode (abogados)
   ======================================== */

/* ----------------------------------------
   Variables CSS - DARK MODE (default)
   ---------------------------------------- */
:root {
    /* Fondos dark */
    --bg-body: #0A2536;
    --bg-surface: #0d2d42;
    --bg-card: #153a54;
    --bg-elevated: #1d4a6a;

    /* Textos dark */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Bordes dark */
    --border-color: #1e3a4f;
    --border-light: #2a5069;

    /* Colores de marca (sin cambio) */
    --primary-900: #0A2536;
    --primary-800: #0d2d42;
    --primary-700: #153a54;
    --secondary-500: #33566D;
    --accent-300: #DAF6EF;
    --accent-400: #c8f0e8;
    --accent-500: #b5eadf;
    --surface-100: #F3FAFF;
    --surface-200: #dceef8;

    /* Navbar dark */
    --navbar-bg: rgba(10, 37, 54, 0.95);
    --navbar-text: #ffffff;
    --navbar-text-secondary: #94a3b8;

    /* Footer dark */
    --footer-bg: #061a28;
    --footer-border: #153a54;
}

/* ----------------------------------------
   Variables CSS - LIGHT MODE (para abogados.html)
   ---------------------------------------- */
.light-theme {
    /* Fondos light */
    --bg-body: #F3FAFF;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #e8f4fc;

    /* Textos light */
    --text-primary: #0A2536;
    --text-secondary: #33566D;
    --text-muted: #6a8a9f;

    /* Bordes light */
    --border-color: #dceef8;
    --border-light: #e8f4fc;

    /* Navbar light */
    --navbar-bg: rgba(255, 255, 255, 0.95);
    --navbar-text: #0A2536;
    --navbar-text-secondary: #33566D;

    /* Footer light */
    --footer-bg: #F3FAFF;
    --footer-border: #dceef8;
}

/* ----------------------------------------
   Estilos base que usan variables
   ---------------------------------------- */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* ----------------------------------------
   Tipografia de titulos - Montserrat
   (excepto en light-theme que usa Playfair)
   ---------------------------------------- */
.font-heading {
    font-family: 'Montserrat', sans-serif;
}

.light-theme .font-heading {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ----------------------------------------
   Dark Mode Overrides para clases Tailwind
   (Solo aplica cuando NO es light-theme)
   ---------------------------------------- */

/* Fondos */
body:not(.light-theme) .bg-white {
    background-color: var(--bg-surface) !important;
}

body:not(.light-theme) .bg-surface-50,
body:not(.light-theme) .bg-surface-100 {
    background-color: var(--bg-card) !important;
}

/* Textos */
body:not(.light-theme) .text-primary-900,
body:not(.light-theme) .text-primary-800 {
    color: var(--text-primary) !important;
}

body:not(.light-theme) .text-text-secondary,
body:not(.light-theme) .text-secondary-500 {
    color: var(--text-secondary) !important;
}

body:not(.light-theme) .text-text-muted {
    color: var(--text-muted) !important;
}

/* Bordes - usar border-light para mejor contraste */
body:not(.light-theme) .border-surface-200,
body:not(.light-theme) .border-surface-100 {
    border-color: var(--border-light) !important;
}

/* Cards y elementos con sombras */
body:not(.light-theme) .card-elegant,
body:not(.light-theme) .contact-card,
body:not(.light-theme) .blog-card,
body:not(.light-theme) .product-card {
    background-color: var(--bg-surface);
    border-color: var(--border-light);
}

body:not(.light-theme) .card-elegant:hover,
body:not(.light-theme) .contact-card:hover,
body:not(.light-theme) .blog-card:hover,
body:not(.light-theme) .product-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Quick nav sticky - mejor contraste */
body:not(.light-theme) .sticky {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-light) !important;
}

body:not(.light-theme) .sticky a {
    color: var(--text-secondary) !important;
}

body:not(.light-theme) .sticky a:hover {
    color: var(--accent-300) !important;
}

/* Inputs y forms */
body:not(.light-theme) .form-input {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body:not(.light-theme) .form-input::placeholder {
    color: var(--text-muted);
}

/* Category buttons */
body:not(.light-theme) .category-btn {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body:not(.light-theme) .category-btn.active {
    background-color: var(--accent-300);
    border-color: var(--accent-300);
    color: var(--primary-900);
}

/* FAQ accordion */
body:not(.light-theme) details[open] {
    background-color: var(--bg-card);
}

/* Botones en dark mode */
body:not(.light-theme) .btn-secondary {
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

body:not(.light-theme) .btn-secondary:hover {
    background-color: var(--bg-card) !important;
    border-color: var(--accent-300) !important;
}

body:not(.light-theme) .bg-primary-900.btn-primary,
body:not(.light-theme) .bg-primary-900.btn-primary.text-white {
    background-color: var(--accent-300) !important;
    color: var(--primary-900) !important;
}

body:not(.light-theme) .bg-primary-900.btn-primary:hover {
    background-color: var(--accent-400) !important;
    box-shadow: 0 15px 35px rgba(218, 246, 239, 0.3);
}

/* Forzar texto oscuro en botones con fondo mint */
body:not(.light-theme) .bg-accent-300.text-white,
body:not(.light-theme) .btn-primary.text-white:not(.bg-primary-900) {
    color: var(--primary-900) !important;
}

/* Hero card - mantener fondo claro */
body:not(.light-theme) .bg-white\/95 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

body:not(.light-theme) .bg-white\/95 .text-primary-800,
body:not(.light-theme) .bg-white\/95 .text-primary-900 {
    color: #0A2536 !important;
}

/* Feature icons */
body:not(.light-theme) .feature-icon {
    background-color: var(--bg-card) !important;
}

body:not(.light-theme) .card-elegant:hover .feature-icon {
    background-color: var(--accent-300) !important;
    color: var(--primary-900) !important;
}

/* Iconos - mejorar visibilidad en dark mode */
body:not(.light-theme) .text-primary-700,
body:not(.light-theme) .text-primary-800 {
    color: var(--accent-300) !important;
}

body:not(.light-theme) svg.text-secondary-500,
body:not(.light-theme) .feature-icon svg {
    color: var(--accent-400) !important;
}

/* Iconos en cards de contacto */
body:not(.light-theme) .contact-card svg {
    color: var(--accent-400) !important;
}

/* Checkmarks en listas - verde brillante */
body:not(.light-theme) .text-green-500,
body:not(.light-theme) svg.text-green-500 {
    color: #4ade80 !important;
}

/* Iconos de check en features */
body:not(.light-theme) .text-secondary-500 svg,
body:not(.light-theme) li svg.text-secondary-500 {
    color: var(--accent-300) !important;
}

/* IMPORTANTE: Botones con fondo mint - texto DEBE ser oscuro */
body:not(.light-theme) a.bg-accent-300,
body:not(.light-theme) button.bg-accent-300,
body:not(.light-theme) .bg-accent-300.btn-primary {
    color: #0A2536 !important;
}

/* ----------------------------------------
   Elegante underline para links
   ---------------------------------------- */
.link-underline {
    position: relative;
}
.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}
.link-underline:hover::after {
    width: 100%;
}

/* ----------------------------------------
   Cards con borde accent
   ---------------------------------------- */
.card-elegant {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}
.card-elegant:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -12px rgba(10, 37, 54, 0.15);
    border-left-color: var(--accent-300);
}

.card-accent {
    border-left: 3px solid var(--accent-300);
}

/* ----------------------------------------
   Botones
   ---------------------------------------- */
.btn-primary {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(10, 37, 54, 0.4);
    background: var(--primary-800);
}
.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background: var(--surface-100);
    border-color: var(--secondary-500);
}

/* ----------------------------------------
   Numeros grandes (estilo Finpay)
   ---------------------------------------- */
.stat-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-300) 0%, var(--accent-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-number-accent {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--accent-300);
}

/* Light theme: stat numbers con Playfair y colores originales */
.light-theme .stat-number {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--secondary-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.light-theme .stat-number-accent {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    color: var(--primary-900);
}

/* ----------------------------------------
   Divider mint
   ---------------------------------------- */
.divider-gold {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-300), transparent);
}

.divider-center {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-300), transparent);
    margin: 0 auto;
}

/* ----------------------------------------
   Section headers
   ---------------------------------------- */
.section-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--secondary-500);
}

/* ----------------------------------------
   FAQ Accordion
   ---------------------------------------- */
details summary::-webkit-details-marker {
    display: none;
}
details[open] summary .icon-plus {
    transform: rotate(45deg);
}
details {
    transition: all 0.3s ease;
}
details[open] {
    background: var(--surface-100);
}

/* ----------------------------------------
   Scroll offset para nav fijo
   ---------------------------------------- */
section[id] {
    scroll-margin-top: 100px;
}

/* ----------------------------------------
   Product Cards
   ---------------------------------------- */
.product-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -12px rgba(10, 37, 54, 0.15);
    border-left-color: var(--accent-300);
}

/* ----------------------------------------
   Popular badge
   ---------------------------------------- */
.popular-badge {
    background: linear-gradient(135deg, var(--accent-300) 0%, var(--accent-400) 100%);
}
.popular-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px -10px rgba(218, 246, 239, 0.5);
}

/* ----------------------------------------
   Free badge
   ---------------------------------------- */
.free-badge {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* ----------------------------------------
   Blog Cards
   ---------------------------------------- */
.blog-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -12px rgba(10, 37, 54, 0.15);
    border-left-color: var(--accent-300);
}

/* ----------------------------------------
   Category buttons
   ---------------------------------------- */
.category-btn {
    transition: all 0.2s ease;
}
.category-btn:hover {
    border-color: var(--secondary-500);
}
.category-btn.active {
    background-color: var(--primary-900);
    border-color: var(--primary-900);
    color: white;
}

/* ----------------------------------------
   Contact Cards
   ---------------------------------------- */
.contact-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}
.contact-card:hover {
    border-color: var(--surface-200);
    border-left-color: var(--accent-300);
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -12px rgba(10, 37, 54, 0.15);
}

/* ----------------------------------------
   Form Inputs
   ---------------------------------------- */
.form-input {
    transition: all 0.3s ease;
}
.form-input:focus {
    border-color: var(--secondary-500);
    box-shadow: 0 0 0 4px rgba(51, 86, 109, 0.1);
}

/* ----------------------------------------
   Custom Checkbox
   ---------------------------------------- */
.checkbox-custom:checked {
    background-color: var(--primary-900);
    border-color: var(--primary-900);
}

/* ----------------------------------------
   Feature icon hover
   ---------------------------------------- */
.feature-icon {
    transition: all 0.3s ease;
}
.card-elegant:hover .feature-icon {
    background: var(--primary-900);
    color: white;
}

/* ----------------------------------------
   Stats section
   ---------------------------------------- */
.stats-grid {
    display: grid;
    gap: 3rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
}

.stat-value {
    font-size: 5rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.light-theme .stat-value {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
}

@media (min-width: 768px) {
    .stat-value {
        font-size: 6rem;
    }
}

@media (min-width: 1024px) {
    .stat-value {
        font-size: 7rem;
    }
}

/* ----------------------------------------
   Hero gradient background
   ---------------------------------------- */
.hero-gradient {
    background: linear-gradient(135deg, #F3FAFF 0%, #e8f4fc 100%);
}

/* ----------------------------------------
   Dark section
   ---------------------------------------- */
.section-dark {
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
    color: white;
}

.section-dark .section-eyebrow {
    color: var(--accent-300);
}

/* ----------------------------------------
   Legal Content (Privacidad, Terminos)
   ---------------------------------------- */
.legal-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.light-theme .legal-content h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    color: var(--primary-900);
}

.legal-content h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--secondary-500);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-content p {
    color: var(--secondary-500);
    margin-bottom: 1rem;
    line-height: 1.8;
}

.legal-content ul {
    color: var(--secondary-500);
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
    list-style-type: disc;
}

.legal-content a {
    color: var(--primary-700);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--primary-900);
}

.legal-content strong {
    color: var(--primary-900);
}

/* ----------------------------------------
   Smooth animations
   ---------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ----------------------------------------
   Process timeline
   ---------------------------------------- */
.process-step {
    position: relative;
}

.process-step::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 4rem;
    bottom: -2rem;
    width: 2px;
    background: var(--surface-200);
}

.process-step:last-child::before {
    display: none;
}

.process-number {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    background: var(--accent-300);
    color: var(--primary-900);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.light-theme .process-number {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    background: var(--primary-900);
    color: white;
}

@media (min-width: 768px) {
    .process-number {
        width: 6rem;
        height: 6rem;
        font-size: 3rem;
    }
}

/* ----------------------------------------
   Process number highlighted (paso final)
   ---------------------------------------- */
.process-number-highlight {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    background: var(--accent-300);
    color: var(--primary-900);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    line-height: 1;
    box-shadow: 0 10px 25px rgba(218, 246, 239, 0.5);
}

.light-theme .process-number-highlight {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
}

@media (min-width: 768px) {
    .process-number-highlight {
        width: 6rem;
        height: 6rem;
        font-size: 3rem;
    }
}

/* ----------------------------------------
   Accent button (mint background)
   ---------------------------------------- */
.btn-accent {
    background: var(--accent-300);
    color: var(--primary-900);
}
.btn-accent:hover {
    background: var(--accent-400);
}

/* ----------------------------------------
   DARK MODE - Correcciones adicionales
   ---------------------------------------- */

/* Bordes más visibles en dark mode */
body:not(.light-theme) .border-surface-200,
body:not(.light-theme) .border-surface-100,
body:not(.light-theme) .border-surface-300 {
    border-color: #3d6a8a !important;
}

/* Bordes con transparencia - hacerlos visibles */
body:not(.light-theme) [class*="border-accent-300\/"] {
    border-color: rgba(218, 246, 239, 0.4) !important;
}

/* Texto secondary-500 más claro en dark mode */
body:not(.light-theme) .text-secondary-500,
body:not(.light-theme) span.text-secondary-500,
body:not(.light-theme) p.text-secondary-500 {
    color: #7dd3fc !important;
}

/* Badges y etiquetas - más visibles */
body:not(.light-theme) .bg-secondary-500\/10,
body:not(.light-theme) .bg-secondary-100 {
    background-color: rgba(125, 211, 252, 0.15) !important;
}

/* Inputs genéricos en dark mode */
body:not(.light-theme) input:not([type="checkbox"]):not([type="radio"]),
body:not(.light-theme) textarea,
body:not(.light-theme) select {
    background-color: var(--bg-card) !important;
    border-color: #3d6a8a !important;
    color: var(--text-primary) !important;
}

body:not(.light-theme) input::placeholder,
body:not(.light-theme) textarea::placeholder {
    color: #94a3b8 !important;
}

/* Focus en inputs */
body:not(.light-theme) input:focus,
body:not(.light-theme) textarea:focus,
body:not(.light-theme) select:focus {
    border-color: var(--accent-300) !important;
    box-shadow: 0 0 0 3px rgba(218, 246, 239, 0.2) !important;
}

/* Labels en formularios */
body:not(.light-theme) label {
    color: var(--text-primary) !important;
}

/* Números en círculos (ej: pasos en "Qué esperar") */
body:not(.light-theme) .bg-surface-100.rounded-full {
    background-color: var(--accent-300) !important;
    color: var(--primary-900) !important;
}

/* Cards con borde accent - asegurar visibilidad */
body:not(.light-theme) .border-accent-300 {
    border-color: var(--accent-300) !important;
}

/* Separadores y dividers */
body:not(.light-theme) .border-b.border-surface-200,
body:not(.light-theme) .border-t.border-surface-200,
body:not(.light-theme) .divide-surface-200 > * {
    border-color: #3d6a8a !important;
}

/* Newsletter input */
body:not(.light-theme) .bg-surface-100[type="email"],
body:not(.light-theme) input[type="email"].bg-surface-100 {
    background-color: var(--bg-card) !important;
    border-color: #3d6a8a !important;
}

/* Hover en cards - borde más visible */
body:not(.light-theme) .card-elegant:hover,
body:not(.light-theme) .blog-card:hover,
body:not(.light-theme) .product-card:hover,
body:not(.light-theme) .contact-card:hover {
    border-color: var(--accent-300) !important;
}