/* ==============================================================
   MEJORAS VISUALES - PÁGINA DE SERVICIO (ROJO/NEGRO/BLANCO)
   Estudio Jurídico San Luis
   ============================================================== */

:root {
    --color-accent-rgb: 196, 30, 58; /* Rojo #C41E3A en RGB para sombras */
}

.service-title, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary); /* Negro */
  line-height: 1.3;
}

.service-list .service-item-content a {
    color: var(--color-accent);
}

/* ==============================================================
   1. ESTRUCTURA DE COLUMNAS (CONTENIDO VS SIDEBAR NEGRO)
   ============================================================== */
.service-content {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: Uno abajo del otro */
    gap: 3rem; /* Espacio para que no se peguen en celular */
    margin-top: 2rem;
    margin-bottom: 4rem;
}

@media (min-width: 992px) {
    .service-content {
        grid-template-columns: 2fr 1fr; /* Desktop: 2 partes texto, 1 parte sidebar */
        align-items: start; /* CRÍTICO: Evita que el sidebar se estire al 100% del alto */
    }
}


/* ==============================================================
   2. MODERN HERO - SERVICIOS
   ============================================================== */

.service-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;        
    text-align: center;
    color: var(--color-text-light); /* Blanco */
    margin-bottom: var(--spacing-lg);
    padding-top: 50px;
    padding-bottom: 60px;
    overflow: hidden;
    box-sizing: border-box;
}

.hero-background-image-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;
}

.hero-background-image-container img {
    width: 100%; height: 100%;
    object-fit: cover;
    animation: zoomIn 15s infinite alternate;
}

@keyframes zoomIn {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* Overlay Negro/Gris Oscuro para contraste */
.hero-background-image-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.6) 0%, 
        rgba(15, 15, 15, 0.8) 50%,
        rgba(0, 0, 0, 0.95) 100%
    );
    z-index: 2;
}

.hero-content {
    position: relative; z-index: 3;
    padding: 2rem 1.5rem; width: 90%; max-width: 900px; margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.service-hero .service-title {
    display: inline-block;
    font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.service-hero p {
    font-size: 1rem; line-height: 1.6; color: #f0f0f0;
    margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto;
}

.btns-hero {
    display: flex; justify-content: center; flex-direction: column; gap: 1rem; width: 100%;
}

.service-hero .btn { width: 100%; }

.service-hero .btn-primary {
    background-color: var(--color-accent); /* Rojo */
    color: var(--color-text-light); /* Blanco */
    border: none; padding: 1rem 2rem; font-size: 1.1rem; border-radius: 50px;
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4);
    transition: all 0.3s ease;
}
.service-hero .btn-primary:hover {
    background-color: #a01830; /* Rojo más oscuro */
    color: white;
}

.service-hero .btn-whatsapp-hero {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px); padding: 1rem 2rem; font-size: 1.1rem;
    border-radius: 50px; margin-top: 0 !important; color: #fff;
    display: inline-flex; justify-content: center; align-items: center; gap: 10px;
    transition: all 0.3s ease;
}
.service-hero .btn-whatsapp-hero svg { fill: #fff; }
.service-hero .btn-whatsapp-hero:hover { background-color: #25d366; border-color: #25d366; }

@media (min-width: 768px) {
    .service-hero { min-height: 75vh; padding-top: 50px; padding-bottom: 50px; }
    .hero-background-image-container { border-radius: 0 0 3rem 3rem; }
    .hero-content { padding: 3.5rem 3rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .service-hero .service-title { font-size: 2.8rem; }
    .service-hero p { font-size: 1.15rem; line-height: 1.8; }
    .btns-hero { flex-direction: row; gap: 1.5rem; }
    .service-hero .btn { width: auto; }
}


/* ==============================================================
   3. GRILLA DE SERVICIOS (TARJETAS)
   ============================================================== */

.service-list { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-top: 2rem; }
@media (min-width: 768px) { .service-list { grid-template-columns: 1fr 1fr; } }

.service-item {
    background-color: var(--color-text-light); border: 1px solid var(--color-border);
    border-radius: 8px; padding: var(--spacing-md); text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-item:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); 
    border-bottom: 3px solid var(--color-accent); 
}

.service-item-icon { margin: 0 auto 1rem auto; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.service-item-icon svg { width: 45px; height: 45px; fill: var(--color-accent); stroke: var(--color-accent); }

.service-item-content h3 { color: var(--color-primary); font-size: 1.3rem; margin-bottom: 0.75rem; }
.service-item-content p { color: var(--color-secondary); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }


/* ==============================================================
   4. AUTHOR BOX (E-E-A-T) - Perfil del Abogado
   ============================================================== */

.author-box {
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
    margin-top: 3rem; padding: 2rem; background-color: var(--color-background-light);
    border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent);
    border-radius: 8px; text-align: center;
}
.author-photo {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--color-accent); box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background-color: #fff; /* Fondo blanco si la foto no carga */
}
.author-info h4 { margin-top: 0; margin-bottom: 0.5rem; color: var(--color-primary); font-size: 1.2rem;}
.author-info p { margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--color-secondary); }
.author-info p:last-child { margin-bottom: 0; }
.author-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.5rem;}
.author-badge { background-color: var(--color-primary); color: white; padding: 0.2rem 0.8rem; border-radius: 50px; font-size: 0.8rem; font-weight: bold;}
.author-badge.red { background-color: var(--color-accent); }

@media (min-width: 768px) {
    .author-box { flex-direction: row; text-align: left; }
    .author-badges { justify-content: flex-start; }
}


/* ==============================================================
   5. SIDEBAR (LA CAJA NEGRA PEGAJOSA)
   ============================================================== */

.service-sidebar {
    display: flex; flex-direction: column; gap: 1rem;
    background-color: var(--color-primary); /* Negro */
    color: var(--color-text-light); padding: 2rem; border-radius: 8px;
    text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2); 
}
.service-sidebar h3 { color: var(--color-text-light); font-size: 1.6rem; }
.service-sidebar p { color: #ccc; }
.service-sidebar .btn-primary { transform: scale(1.05); }
.service-sidebar .btn-primary:hover { 
    transform: scale(1.1) translateY(-3px); 
    background-color: var(--color-accent); 
    border-color: var(--color-accent); 
    color: white;
}

/* --- MAGIA DEL STICKY --- */
@media (min-width: 992px) { 
    /* Aplicamos el sticky a la etiqueta <aside> que envuelve la caja, 
       para que CSS Grid lo procese correctamente */
    aside { 
        position: -webkit-sticky; /* Soporte Safari */
        position: sticky; 
        top: 100px; /* Distancia desde el techo al hacer scroll */
        height: max-content; /* Se asegura de no estirarse hacia abajo */
        z-index: 10;
    } 
}