/* marca.css - Re-skin Estudio G&Q */

:root {
    --primary: #046bd2;
    --primary-hover: #045cb4;
    --bg-dark: #FFFFFF; /* was dark, now white */
    --bg-darker: #F0F5FA; /* for footer/sections */
    --bg-card: #FFFFFF;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #D1D5DB;
    --whatsapp: #25D366;
    --whatsapp-laboral: #25D366;
    --whatsapp-prev: #128C7E;
    --warning: #f59e0b;
    --accent: #066aab;
}

body {
    background-color: var(--bg-dark) !important;
    color: var(--text-main) !important;
    background-image: none !important;
}

header {
    background: #111111 !important;
    border-bottom: none !important;
}
.nav-container a.logo {
    padding: 0.5rem 0;
}
header .btn-outline {
    border-color: rgba(255,255,255,0.3) !important;
    color: white !important;
}
header .btn-outline:hover {
    background: rgba(255,255,255,0.1) !important;
}
nav a {
    color: #94a3b8 !important; 
}
nav a:hover {
    color: #fff !important;
}

h1 {
    background: none !important;
    -webkit-text-fill-color: var(--text-main) !important;
    color: var(--text-main) !important;
}
article h1, article h2, article h3, .section-title, .contacto-info h3, .footer-col h4, .related-guides h3, .faq-item h3 {
    color: var(--text-main) !important;
}
article p, article li {
    color: var(--text-muted) !important;
}

.glass-card, .calc-card, .servicio-card, .abogado-card, .cta-box {
    background: var(--bg-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.calc-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transform: translateY(-5px) !important;
}
.calc-card .calc-title {
    color: var(--text-main) !important;
}
.calc-card.disabled {
    background: #f8fafc !important;
}

.badge, .badge-soon {
    background: rgba(4, 107, 210, 0.1) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(4, 107, 210, 0.2) !important;
}

input, select, textarea {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(4, 107, 210, 0.2) !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none !important;
}
label {
    color: #334155 !important;
}
.checkbox-container {
    background: #f8fafc !important;
    border-color: var(--border-color) !important;
}
.checkbox-label {
    color: #334155 !important;
    font-weight: 500 !important;
}

button[type="submit"], .btn-primary, .action-btn {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: none !important;
}
button[type="submit"]:hover, .btn-primary:hover, .action-btn:hover {
    background: var(--primary-hover) !important;
    box-shadow: 0 4px 12px rgba(4, 107, 210, 0.2) !important;
}

.total-box {
    background: #F0F5FA !important;
    border: 1px solid #e2e8f0 !important;
}
.total-amount {
    color: var(--primary) !important;
}

.disclaimer-box {
    background: #fffbeb !important;
    border-color: var(--warning) !important;
    color: #b45309 !important;
}
.disclaimer-box strong {
    color: #92400e !important;
}

.warning-box {
    background: #fffbeb !important;
    border-color: var(--warning) !important;
    color: #b45309 !important;
}

.coverage-alert, .coverage {
    background: #f8fafc !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

.tabs {
    background: #f1f5f9 !important;
    border: 1px solid var(--border-color) !important;
}
.tab-btn {
    color: var(--text-muted) !important;
}
.tab-btn.active {
    background: #fff !important;
    color: var(--primary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

article strong {
    color: var(--text-main) !important;
}
th {
    background: #F0F5FA !important;
    color: var(--text-main) !important;
}
td {
    color: var(--text-muted) !important;
}

/* FIX contraste: la .ref-table conservaba el fondo OSCURO heredado del tema viejo
   (rgba(15,23,42,.4)) → sobre el fondo blanco quedaba gris, y con el td muted daba
   gris-sobre-gris (ilegible). Fondo claro + texto principal legible. */
.ref-table { background: #fff !important; }
/* table.ref-table td gana en especificidad a .info-section td (que la dejaba muted) */
table.ref-table td { color: var(--text-main) !important; }

.faq-item {
    border-color: var(--border-color) !important;
}

footer {
    background: #F0F5FA !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}
.footer-col h4 {
    color: var(--text-main) !important;
}
.footer-col a {
    color: var(--text-muted) !important;
}
.footer-col a:hover {
    color: var(--primary) !important;
}
.footer-bottom {
    border-top: 1px solid var(--border-color) !important;
}

/* Specific overrides */
.hero h1 {
    color: var(--text-main) !important;
}
.servicio-card li {
    color: var(--text-main) !important;
}
.abogado-card h3 {
    color: var(--text-main) !important;
}
.abogado-card h4 {
    color: var(--primary) !important;
}
.testimonio-card {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.testimonio-text {
    color: var(--text-main) !important;
}
.contacto-wrapper {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.contacto-info {
    background: #F0F5FA !important;
}
.contacto-info p {
    color: var(--text-main) !important;
}
.contacto-info p[style*="background"] {
    background: #fff !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* FIX contraste: .btn-outline en cards eran texto BLANCO → invisibles sobre card blanca */
.btn-outline {
    color: var(--primary) !important;
    border: 1px solid rgba(4,107,210,0.5) !important;
    background: transparent !important;
}
.btn-outline:hover { background: rgba(4,107,210,0.08) !important; }
/* pero el "Volver al inicio" del header negro debe seguir BLANCO */
header .btn-outline { color: #fff !important; border-color: rgba(255,255,255,0.35) !important; }
header .btn-outline:hover { background: rgba(255,255,255,0.12) !important; }
/* Botones WhatsApp del home quedaban azul-link por defecto → verde WhatsApp */
.btn-whatsapp-lab, .btn-whatsapp-prev {
    background: #25D366 !important;
    color: #fff !important;
    border: none !important;
}
.btn-whatsapp-lab:hover, .btn-whatsapp-prev:hover { background: #1ebe5a !important; }

/* FIX contraste: en las CALCS, los títulos de .info-section y del cuadro de resultado
   quedaban blancos (#fff hardcodeado) sobre fondo blanco. Cubrir TODOS los headings de
   contenido (el header no tiene h2-h6, solo el logo img, así que es seguro). */
h2, h3, h4, h5, h6 { color: var(--text-main) !important; }
.abogado-card h4 { color: var(--primary) !important; } /* re-afirmar acento */
.info-section p, .info-section li, .info-section td { color: var(--text-muted) !important; }
.info-section strong, #resultados strong, .total-detail { color: var(--text-main) !important; }
.total-label { color: var(--primary) !important; }

/* FIX contraste: radio de género (jubilación) mantenía fondo oscuro original */
.radio-label {
    background: #f8fafc !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
.radio-label:has(input:checked) {
    background: rgba(4,107,210,0.08) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ===== Ajustes UX (feedback 2026-08-15) ===== */
/* Logo más grande (estaba muy chico en desktop y mobile) */
.logo img { height: 48px !important; width: auto !important; }
/* Anclajes: el header fijo no debe tapar el título al saltar + scroll suave */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px !important; }
/* Menos espacio vertical entre secciones */
section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.hero { padding-top: 6rem !important; padding-bottom: 2rem !important; }
.section-title { margin-bottom: 2rem !important; }
/* Botones de las cards: sólidos azul (el outline daba bajo contraste en desktop / invisible en mobile) */
.calc-card .btn-outline { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; }
.calc-card:hover .btn-outline { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

/* Menú hamburguesa (mobile) */
.hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; }
@media (max-width: 768px) {
  .hamburger { display: block !important; }
  header nav ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #111111; flex-direction: column; gap: 0 !important; padding: .5rem 1.25rem 1rem; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 16px rgba(0,0,0,.25); }
  header nav ul.open { display: flex !important; }
  header nav ul li { padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* WhatsApp flotantes (uno por abogado) */
.wa-float { position: fixed; bottom: 20px; right: 20px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; }
.wa-float-btn { display: flex; align-items: center; gap: 9px; background: #25D366; color: #fff !important; text-decoration: none; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: background .2s, transform .2s; }
.wa-float-btn:hover { background: #1ebe5a; transform: translateY(-2px); }
.wa-float-btn svg { width: 22px; height: 22px; flex: none; }
.wa-float-btn small { display: block; font-size: .7rem; font-weight: 500; opacity: .92; }
@media (max-width: 768px) {
  .wa-float-btn span { display: none; }
  .wa-float-btn { padding: 14px; border-radius: 50%; }
}