/*
Theme Name: Tema Jurídico Castillo
Author: Tu Nombre
Description: Tema personalizado Dark Mode (Versión 3.4 - FINAL con Título Resaltado).
Version: 3.4
*/

:root {
   --color-blanco-puro: #0a0a0a; --color-fondo-claro: #1c1c1c; --color-fondo-input: #2D2D2D;
   --color-negro-autoridad: #FFFFFF; --color-texto-general: #E6E6E6; --color-texto-menu: #FFFFFF;
   --color-dorado-acento: #FFD700; --color-gris-menu: #000000; --color-borde-sutil: #333333; --color-sombra: rgba(0, 0, 0, 0.9);
}

body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background-color: var(--color-blanco-puro); color: var(--color-texto-general); scroll-behavior: smooth; padding-top: 140px; }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }

/* HEADER Y MENÚ */
.header-fixed { background-color: #000000 !important; box-shadow: 0 2px 10px rgba(255, 215, 0, 0.1); z-index: 999999 !important; position: fixed; top: 0; width: 100%; }
.nav-main, .nav-desktop-left, .nav-desktop-right, .nav-main ul, .nav-main li { overflow: visible !important; position: relative; }

/* SUBMENÚ */
.submenu { display: none; position: absolute; top: 100%; left: 0; background-color: #1c1c1c; min-width: 240px; box-shadow: 0 10px 30px rgba(0,0,0,1); border: 1px solid #333; border-top: 3px solid #FFD700; z-index: 1000000; border-radius: 0 0 10px 10px; padding: 10px 0; }
.has-submenu:hover .submenu { display: block !important; animation: fadeIn 0.3s; }
.submenu li { display: block; margin: 0; width: 100%; }
.submenu li a { display: block; padding: 15px 20px; color: #e0e0e0 !important; font-size: 0.95rem; border-bottom: 1px solid #2a2a2a; background: #1c1c1c; text-align: left; }
.submenu li a:hover { background-color: #333; color: #FFD700 !important; padding-left: 25px; }
.dropdown-arrow { margin-left: 5px; transition: transform 0.3s; font-size: 0.8rem; }
.has-submenu:hover .dropdown-arrow { transform: rotate(180deg); }

.top-clock { color: var(--color-dorado-acento); font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 8px; letter-spacing: 1px; padding-left: 20px; }
@media (max-width: 768px) { .nav-top-left { display: none; } }

/* ESTILOS GENERALES */
.hero-section { background: linear-gradient(135deg, #000000 0%, #2c2c2c 100%) !important; color: #fff; }
h1, h2 { color: var(--color-negro-autoridad); margin-bottom: 15px; letter-spacing: 0.5px; }
h3, h4, h5 { color: var(--color-dorado-acento) !important; margin-bottom: 10px; }
p { line-height: 1.7; color: var(--color-texto-general); }
.content-section { padding: 60px 20px; text-align: center; min-height: 70vh; }
.content-section h2 { font-size: 2.5rem; text-shadow: 2px 2px 4px #000; }
.content-section .subheading { font-size: 1.2rem; color: var(--color-dorado-acento); margin-bottom: 40px; font-weight: 300; }

.tarjeta-inicio, .articulo-card, .profile-card, .form-outer-card, .card, .requisito-item, .documento-card, #requisitos div[class*="col"] { background-color: var(--color-fondo-claro) !important; color: var(--color-texto-general) !important; border: 1px solid var(--color-borde-sutil); border-radius: 8px; box-shadow: 0 4px 10px var(--color-sombra); transition: transform 0.3s ease; }
.tarjeta-inicio:hover, .articulo-card:hover, .documento-card:hover { transform: translateY(-5px); border-color: var(--color-dorado-acento); }
.card-body, .profile-description, .area-text { padding: 25px; }

input, textarea, select { background-color: var(--color-fondo-input) !important; color: #FFFFFF !important; border: 1px solid #555 !important; padding: 12px; border-radius: 5px; width: 100%; box-sizing: border-box; }
input:focus, textarea:focus { outline: none; border-color: var(--color-dorado-acento) !important; background-color: #333 !important; }

.btn-secondary, .btn-primary-split, .ver-mas { display: inline-block; background-color: transparent; color: var(--color-dorado-acento); padding: 10px 20px; border: 1px solid var(--color-dorado-acento); border-radius: 5px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; font-size: 0.9rem; }
.btn-secondary:hover, .btn-primary-split:hover, .ver-mas:hover { background-color: var(--color-dorado-acento); color: #000000; }
.btn-inicio-hero { background-color: var(--color-dorado-acento); color: #000; padding: 15px 30px; border-radius: 30px; font-weight: bold; text-decoration: none; box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }

i, .fa-solid, .fa-regular, .fa-brands { color: var(--color-dorado-acento) !important; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.page-section { display: none; }
.page-section.active { display: block; animation: fadeIn 0.6s; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.6s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page-section.tab-view-active > .container > h2, .page-section.tab-view-active > .container > .subheading { display: none; }

/* EXTRAS FESTIVOS */
.snowflake { position: fixed; top: -10px; z-index: 9999; color: #FFF; font-size: 1em; font-family: Arial; text-shadow: 0 0 1px #000; user-select: none; pointer-events: none; animation-name: snow-fall, snow-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; opacity: 0.8; }
@keyframes snow-fall { 0% { top: -10%; } 100% { top: 100%; } }
@keyframes snow-shake { 0% { transform: translateX(0px); } 50% { transform: translateX(80px); } 100% { transform: translateX(0px); } }

.countdown-container { background: linear-gradient(135deg, #1c1c1c 0%, #000 100%); border: 1px solid #FFD700; border-radius: 15px; padding: 30px; margin: 40px auto; text-align: center; max-width: 800px; box-shadow: 0 0 20px rgba(255, 215, 0, 0.15); }
.countdown-title { color: #FFD700 !important; font-size: 1.8rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
.countdown-timer { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.time-box { background-color: #2D2D2D; padding: 15px; border-radius: 10px; min-width: 90px; border-bottom: 3px solid #FFD700; }
.time-box span { display: block; font-size: 2.5rem; font-weight: bold; color: #fff; }
.time-box small { color: #ccc; font-size: 0.9rem; text-transform: uppercase; }
.festive-divider { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 215, 0, 0.75), rgba(0, 0, 0, 0)); margin: 30px 0; }
.live-clock-section { margin-top: 10px; }
.clock-label { color: #ccc; font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; }
.digital-clock { font-size: 3.5rem; font-weight: bold; color: #fff; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); font-family: 'Courier New', Courier, monospace; background-color: #111; display: inline-block; padding: 10px 30px; border-radius: 10px; border: 1px solid #333; }

/* SECCIONES EXTRA */
.why-us-section { background-color: #151515; padding: 60px 0; margin-top: 60px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.feature-item, .valor-item { padding: 30px; transition: transform 0.3s ease; text-align: center; }
.feature-item:hover, .valor-item:hover { transform: translateY(-5px); }
.feature-icon, .valor-item i { font-size: 3rem; color: #FFD700; margin-bottom: 20px; display: inline-block; }
.feature-item h4, .valor-item h3 { color: #fff; margin-bottom: 15px; font-size: 1.3rem; font-weight: 600; }
.feature-item p, .valor-item p { color: #ccc; font-size: 0.95rem; line-height: 1.6; }

.valor-item { background-color: var(--color-fondo-claro); border-radius: 15px; border: 1px solid #333; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.valor-item:hover { border-color: var(--color-dorado-acento); box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
.impact-quote { font-size: 1.3rem; color: var(--color-dorado-acento); font-style: italic; text-align: center; max-width: 800px; margin: 0 auto 50px auto; border-left: 3px solid var(--color-dorado-acento); border-right: 3px solid var(--color-dorado-acento); padding: 0 20px; }

.cta-strip { background: linear-gradient(90deg, #000 0%, #1c1c1c 100%); padding: 50px 0; margin-top: 60px; border-top: 2px solid #FFD700; text-align: center; }
.cta-content h3 { font-size: 2rem; color: #fff; margin-bottom: 10px; }
.btn-cta { display: inline-block; background-color: #FFD700; color: #000; padding: 15px 40px; border-radius: 30px; font-weight: bold; text-decoration: none; margin-top: 20px; font-size: 1.1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.btn-cta:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); background-color: #fff; }

.service-tabs { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; }
.tab-btn { background-color: transparent; border: 2px solid #FFD700; color: #FFD700; padding: 10px 25px; font-size: 1.1rem; cursor: pointer; border-radius: 30px; transition: all 0.3s ease; font-weight: bold; }
.tab-btn:hover, .tab-btn.active { background-color: #FFD700; color: #000; transform: scale(1.05); }
.service-content { display: none; animation: fadeIn 0.5s; }
.service-content.active-tab { display: block; }
.service-list-box { background-color: #1c1c1c; border: 1px solid #333; padding: 30px; border-radius: 15px; max-width: 800px; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.check-list { list-style: none; padding: 0; margin-top: 20px; text-align: left; }
.check-list li { margin-bottom: 15px; font-size: 1.1rem; color: #eee; display: flex; align-items: center; }
.check-list li i { color: #FFD700; margin-right: 15px; }

.portfolio-item { position: relative; height: 250px; border-radius: 15px; overflow: hidden; cursor: pointer; border: 1px solid #333; }
.portfolio-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.portfolio-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 20px; color: #fff; transform: translateY(100px); transition: transform 0.3s ease; }
.portfolio-item:hover .portfolio-img { transform: scale(1.1); }
.portfolio-item:hover .portfolio-overlay { transform: translateY(0); }
.portfolio-overlay h4 { color: #FFD700; margin: 0; font-size: 1.2rem; }

/* Grid Layouts */
.tarjetas-container, .valores-grid, .features-grid, .portfolio-grid { display: grid; gap: 30px; margin-top: 50px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tarjetas-container, .valores-grid, .features-grid, .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
   .tarjetas-container { grid-template-columns: repeat(3, 1fr) !important; }
   .features-grid, .portfolio-grid { grid-template-columns: repeat(4, 1fr) !important; }
   .valores-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* --- BOTÓN DE MÚSICA FLOTANTE --- */
.music-floating-btn {
   position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px;
   background-color: #1c1c1c; border: 2px solid #FFD700; border-radius: 50%;
   color: #FFD700; font-size: 1.2rem; cursor: pointer;
   z-index: 9999999; box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
   transition: all 0.3s ease; display: flex; justify-content: center; align-items: center;
}
.music-floating-btn:hover { background-color: #FFD700; color: #000; transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); }
.music-playing { animation: pulseMusic 1.5s infinite; }
@keyframes pulseMusic {
   0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
   70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
   100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* ======================================================= */
/* === CORRECCIÓN VISUAL: TÍTULO HERO "BIENVENIDO" ======= */
/* ======================================================= */
.hero-content h1 {
    color: #ffffff !important; /* Fuerza el color BLANCO PURO */
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5) !important; /* Sombra negra fuerte para contraste */
    font-weight: 800; /* Letra un poco más gruesa */
    letter-spacing: 1px;
}