/* ==========================================================================
   1. Estilos Generales y Variables de Color (Modo Claro por defecto)
   ========================================================================== */
:root {
    /* Colores Principales RDN */
    --azul-rdn: #1E5B78;
    --azul-claro: #4F90B2;
    
    /* Paleta de Grises */
    --gris-muy-claro: #f8f9fa;
    --gris-claro-bordes: #ededed;
    --gris-claro-texto-footer: #C7C7C7;
    --gris-medio-texto-pasos: #666C72;
    --gris-oscuro-parrafos: #555;
    --negro-texto-principal: #333333;

    /* Colores Base (Modo Claro) */
    --color-fondo-principal: #FFFFFF;
    --color-texto-principal: var(--negro-texto-principal);
    --color-enlace: var(--azul-rdn);
    --color-enlace-hover: var(--azul-claro);
    --color-titulo-principal: var(--azul-rdn); 
    --color-titulo-hero-cta: #FFFFFF; 

    /* Colores de Componentes (Modo Claro) */
    --fondo-tarjeta: #fdfdfd;
    --fondo-tarjeta-alterna: var(--gris-muy-claro);
    --borde-tarjeta: var(--gris-claro-bordes);
    
    /* Sombras (Modo Claro) */
    --sombra-tarjeta-servicio: 0 4px 12px rgba(0,0,0,0.06);
    --sombra-tarjeta-servicio-hover: 0 8px 20px rgba(0,0,0,0.09);
    --sombra-tarjeta-paso: 0 3px 10px rgba(0,0,0,0.05);
    --sombra-tarjeta-testimonio: 0 4px 15px rgba(0,0,0,0.07);
    --sombra-item-razon: 0 2px 5px rgba(0,0,0,0.05);
    --sombra-formulario: 0 6px 25px rgba(0,0,0,0.09);
    --sombra-detalles-contacto: 0 5px 15px rgba(0,0,0,0.07);
    --sombra-header-scrolled: 0 2px 8px rgba(0,0,0,0.1);
    --sombra-boton-hero: 0 5px 15px rgba(0,0,0,0.2);
    --sombra-boton-hero-hover: 0 7px 20px rgba(0,0,0,0.25);

    /* Tipografías */
    --fuente-principal: 'Open Sans', sans-serif; 
    --fuente-titulos: 'Eurostile Bold', 'Arial Narrow Bold', 'Franklin Gothic Medium', 'Arial', sans-serif;

    /* Otros */
    --padding-seccion: 60px 0;
    --border-radius-general: 5px;
}

/* ==========================================================================
   2. Reseteo básico y estilos generales del cuerpo
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    line-height: 1.7;
    background-color: var(--color-fondo-principal);
    color: var(--color-texto-principal);
    font-size: 16px; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    color: var(--color-titulo-principal);
    text-transform: uppercase; 
    line-height: 1.3;
}

h1 { font-size: 2.8em; margin-bottom: 0.6em; }
h2 { font-size: 2.2em; margin-bottom: 0.8em; }
h3 { 
    font-size: 1.5em; 
    margin-bottom: 0.6em; 
    text-transform: none; 
}

p {
    margin-bottom: 1em;
    font-size: 1.05em; 
    color: var(--gris-oscuro-parrafos);
}

a {
    color: var(--color-enlace);
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}
a:hover {
    color: var(--color-enlace-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 90%;
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 15px; 
}

/* ==========================================================================
   3. Componente: Site Header (Encabezado del Sitio)
   ========================================================================== */
.site-header {
    background-color: transparent; 
    padding: 15px 0; 
    position: absolute; 
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; 
}

.site-header--scrolled {
    background-color: var(--color-fondo-principal);
    position: fixed;
    padding: 10px 0;
    box-shadow: var(--sombra-header-scrolled);
}

.site-header--alt {
    background-color: var(--color-fondo-principal);
    position: relative;
    padding: 25px 0;
    box-shadow: var(--sombra-header-scrolled);
}

.site-header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header__logo { /* CAMBIO 1: Ajuste de tamaño del logo */
    height: auto;
    max-height: 80px; /* Tamaño base unificado */
    transition: max-height 0.4s ease;
}

.site-header--scrolled .site-header__logo { /* CAMBIO 1: Ajuste al hacer scroll */
    max-height: 60px;
}

.site-header__nav-list {
    list-style: none;
    display: flex;
    align-items: center;
}

.site-header__toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-titulo-hero-cta);
}

@media (min-width: 769px) {
    /* Garantiza que el icono del menú solo se muestre en móvil */
    .site-header__toggle {
        display: none !important;
    }
}

.site-header--scrolled .site-header__toggle,
.site-header--alt .site-header__toggle {
    color: var(--color-texto-principal);
}

.site-header__nav-item {
    margin-left: 30px;
}

.site-header__nav-link {
    color: var(--color-titulo-hero-cta); 
    font-weight: 600; 
    font-size: 0.9rem; 
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-bottom: 5px; 
    border-bottom: 2px solid transparent; 
}

.site-header__nav-link.active,
.site-header__nav-link:hover {
    color: var(--color-titulo-hero-cta); 
    border-bottom-color: rgba(255, 255, 255, 0.7); 
}

.site-header__nav-link--button {
    background-color: var(--color-titulo-hero-cta); 
    color: var(--azul-rdn); 
    padding: 10px 22px;
    border-radius: var(--border-radius-general);
    font-size: 0.85rem;
    border-bottom: none; 
    font-weight: bold;
}
.site-header__nav-link--button:hover { /* CAMBIO 3: Revisión hover botón header */
    background-color: var(--azul-claro); /* Fondo azul claro */
    color: var(--color-titulo-hero-cta); /* Texto blanco */
    border-bottom: none;
}

.site-header--scrolled .site-header__nav-link {
    color: var(--color-texto-principal); 
}
.site-header--scrolled .site-header__nav-link.active,
.site-header--scrolled .site-header__nav-link:hover {
    color: var(--color-enlace-hover); 
    border-bottom-color: var(--color-enlace-hover);
}
.site-header--scrolled .site-header__nav-link--button {
    background-color: var(--azul-rdn); 
    color: var(--color-titulo-hero-cta);
}
.site-header--scrolled .site-header__nav-link--button:hover { /* CAMBIO 3: Revisión hover botón header (scrolled) */
    background-color: var(--azul-claro);
    color: var(--color-titulo-hero-cta); /* Texto blanco sigue siendo visible */
}

.site-header--alt .site-header__nav-link {
    color: var(--color-texto-principal);
}
.site-header--alt .site-header__nav-link.active,
.site-header--alt .site-header__nav-link:hover {
    color: var(--color-enlace-hover);
    border-bottom-color: var(--color-enlace-hover);
}
.site-header--alt .site-header__nav-link--button {
    background-color: var(--azul-rdn);
    color: var(--color-titulo-hero-cta);
}
.site-header--alt .site-header__nav-link--button:hover {
    background-color: var(--azul-claro);
    color: var(--color-titulo-hero-cta);
}

/* ==========================================================================
   4. Sección: Hero (Portada Principal)
   ========================================================================== */
#hero {
    background-image: url('../images/Portada.jpg'); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh; 
    min-height: 600px; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; 
}

#hero::before { 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 40, 40, 0.6); 
    z-index: 1;
}

#hero-servicios {
    background-image: url('../images/Reparar-aire-acondicionado.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

#hero-servicios::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 40, 40, 0.6);
    z-index: 1;
}
.hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px; 
    margin: 0 auto;
    padding: 20px;
}

.hero__title { 
    font-size: 3.8em; 
    color: var(--color-titulo-hero-cta); 
    margin-bottom: 0.4em;
    line-height: 1.15;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); 
}

.hero__subtitle { 
    font-size: 1.3em;
    color: rgba(255, 255, 255, 0.95); 
    margin-bottom: 2em;
    font-weight: 300; 
}

/* ==========================================================================
   Botón Genérico
   ========================================================================== */
.button {
    display: inline-block;
    padding: 18px 42px; 
    font-family: var(--fuente-titulos); 
    font-size: 1.15em;
    font-weight: bold; 
    border-radius: var(--border-radius-general);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: center;
    border: none;
}

.button--primary {
    background-color: var(--azul-rdn); 
    color: var(--color-titulo-hero-cta); 
    box-shadow: var(--sombra-boton-hero);
}
.button--primary:hover {
    background-color: var(--azul-claro); 
    color: var(--color-titulo-hero-cta); /* Texto blanco sigue siendo visible */
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--sombra-boton-hero-hover);
}

.button--secondary { /* Para botones "Contratar" */
    background-color: var(--azul-claro);
    color: var(--color-titulo-hero-cta); 
    padding: 10px 20px;
    font-size: 0.9em;
    box-shadow: none;
}
.button--secondary:hover { /* CAMBIO 3: Revisión hover botón "Contratar" */
    background-color: var(--azul-rdn); /* Fondo azul más oscuro */
    color: var(--color-titulo-hero-cta);  /* Texto blanco sigue siendo visible */
}

/* ==========================================================================
   5. Estilos para Secciones Genéricas de Contenido
   ========================================================================== */
#quienes-somos-breve, 
#servicios, 
#nuestro-proceso,
#colaboradores,
#testimonios,
#porque-elegirnos,
#cta-final,
.page-content {
    padding: var(--padding-seccion);
}

.section-title { 
    text-align: center; 
    margin-bottom: 50px; 
    color: var(--color-titulo-principal); 
}
.page-content__title { 
    text-align: center; 
    margin-bottom: 50px;
    color: var(--color-titulo-principal); 
}

.section-intro-text {
    max-width: 750px; 
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
    text-align: left; 
    color: var(--gris-oscuro-parrafos);
}
#quienes-somos-breve .container > .section-intro-text {
    text-align: center;
}
.page-content .section-intro-text {
     text-align: center;
}

/* ==========================================================================
   6. Componente: Lista de Servicios y Tarjeta de Servicio
   ========================================================================== */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
    text-align: left;
}

.service-card {
    background-color: var(--fondo-tarjeta); 
    border: 1px solid var(--borde-tarjeta);
    border-radius: var(--border-radius-general);
    padding: 25px;
    box-shadow: var(--sombra-tarjeta-servicio);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; 
    flex-direction: column; 
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-tarjeta-servicio-hover);
}

.service-card__image {
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    border-radius: var(--border-radius-general);
    margin-bottom: 20px;
}

.service-card__title { 
    color: var(--color-titulo-principal); 
    margin-bottom: 10px;
}
.service-card__description {
    font-size: 0.95em; 
    flex-grow: 1; 
    margin-bottom: 20px; 
    color: var(--gris-oscuro-parrafos);
}
.service-card__button { 
    align-self: flex-start; 
    margin-top: auto; 
}

.service-card--view-all { /* CAMBIO 2: Ajuste tarjeta "Ver más" */
    background-color: #FFFFFF; /* Cambio solicitado: fondo blanco */
    color: var(--color-titulo-hero-cta); /* Texto en blanco */
    text-align: center;
    padding: 0; 
    position: relative; 
    overflow: hidden;
    min-height: 320px; /* Asegurar altura mínima para el centrado */
    display: flex; /* Para que el link-overlay (absoluto) pueda usar flex para centrar */
    justify-content: center;
    align-items: center;
}
.service-card--view-all:hover { /* CAMBIO 3: Ajuste hover tarjeta "Ver más" */
    background-color: var(--azul-claro);
    color: var(--color-titulo-hero-cta); /* Mantener texto y flecha en blanco */
}

.service-card__link-overlay {
    text-decoration: none;
    color: inherit; /* Hereda el color del padre (.service-card--view-all) */
    /* Quitar position absolute si el padre ya es flex y centra */
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    padding: 25px; 
}

.service-card--view-all .service-card__title { 
    /* color: inherit; Hereda de .service-card--view-all o su hover */
    font-size: 1.6em; 
    margin-bottom: 15px;
}

.service-card--view-all .service-card__description { 
    /* color: inherit; Ajustado para heredar, antes rgba(255,255,255,0.85) */
    font-size: 1em;
    margin-bottom: 20px;
}

.service-card__icon-arrow {
    font-size: 2em; 
    line-height: 1;
    display: block; 
    /* color: inherit; Hereda */
}

/* ==========================================================================
   7. Componente: Pasos del Proceso y Tarjeta de Paso
   ========================================================================== */
#nuestro-proceso {
    background-color: var(--gris-muy-claro); 
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 25px; 
}

.step-card {
    text-align: center;
    padding: 25px 20px; 
    background-color: var(--color-fondo-principal); 
    border-radius: var(--border-radius-general);
    box-shadow: var(--sombra-tarjeta-paso);
}

.step-card__number {
    width: 50px;
    height: 50px;
    background-color: var(--azul-rdn);
    color: var(--color-titulo-hero-cta); 
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-family: var(--fuente-titulos);
}

.step-card__title { 
    font-size: 1.25em; 
    color: var(--color-titulo-principal); 
    margin-bottom: 10px;
    text-transform: none; 
}

.step-card__description {
    font-size: 0.9em; 
    color: var(--gris-medio-texto-pasos);
    line-height: 1.6;
}

/* ==========================================================================
   8. Componente: Logos de Colaboradores
   ========================================================================== */
#colaboradores {
    background-color: var(--gris-muy-claro); 
}

.partner-logos { /* CAMBIO 4: Más distancia entre logos */
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center;
    gap: 50px 100px; /* Aumentado el gap horizontal */
}

.partner-logos__item {
    max-height: 60px;
    text-align: center;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-logos__image {
    width: 100%;
    height: auto;
    max-width: 150px;
    max-height: 100%;
    opacity: 0.75;
    transition: opacity 0.3s ease;
    margin: 0 auto;
}
.partner-logos__image:hover {
    opacity: 1;
}

/* ==========================================================================
   9. Componente: Lista de Testimonios y Tarjeta de Testimonio
   ========================================================================== */
#testimonios {
    background-color: var(--color-fondo-principal);
}

.testimonial-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: var(--fondo-tarjeta-alterna); 
    padding: 30px; 
    border-left: 5px solid var(--azul-claro);
    border-radius: 0 var(--border-radius-general) var(--border-radius-general) 0;
    box-shadow: var(--sombra-tarjeta-testimonio);
}

.testimonial-card__text {
    font-style: italic;
    color: var(--gris-oscuro-parrafos);
    margin-bottom: 20px; 
    position: relative;
    padding-left: 30px; 
    font-size: 1em;
}
.testimonial-card__text::before { 
    content: '“';
    font-family: Georgia, serif; 
    font-size: 3em; 
    color: var(--azul-claro);
    position: absolute;
    left: -5px;
    top: -20px; 
}

.testimonial-card__author { 
    text-align: right;
    color: var(--color-titulo-principal); 
    font-size: 1em;
    font-weight: 600; 
    text-transform: none;
    margin-top: 10px;
}

/* ==========================================================================
   10. Componente: Lista de Razones
   ========================================================================== */
#porque-elegirnos {
    background-color: var(--gris-muy-claro); 
}

.reasons-list {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.reasons-list__item {
    background-color: var(--color-fondo-principal); 
    margin-bottom: 12px;
    padding: 20px 25px; 
    border-left: 6px solid var(--azul-rdn);
    font-size: 1.1em; 
    border-radius: 0 var(--border-radius-general) var(--border-radius-general) 0;
    box-shadow: var(--sombra-item-razon);
    color: var(--gris-oscuro-parrafos);
}
.reasons-list__item-highlight { 
    color: var(--azul-rdn); 
    font-weight: 600; 
}

/* ==========================================================================
   11. Sección: CTA Final
   ========================================================================== */
#cta-final {
    background-color: var(--azul-claro); 
    color: var(--color-titulo-hero-cta); 
    padding: 70px 0; 
    text-align: center;
}

.cta-final__title { 
    color: var(--color-titulo-hero-cta); 
    font-size: 2.5em; 
    margin-bottom: 25px;
}

.cta-final__text { 
    font-size: 1.2em; 
    margin-bottom: 35px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255,255,255,0.9); 
}

/* ==========================================================================
   12. Componente: Formulario
   ========================================================================== */
.form {
    max-width: 700px;
    margin: 30px auto 0 auto;
    background-color: var(--fondo-tarjeta);
    padding: 25px;
    border-radius: var(--border-radius-general);
    box-shadow: var(--sombra-formulario);
    text-align: left;
}
.form__title { 
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.8em; 
    color: var(--color-titulo-principal); 
}

.form__group {
    margin-bottom: 15px;
}

.form__row {
    display: flex;
    gap: 15px;
}

.form__row .form__group {
    flex: 1;
    margin-bottom: 15px;
}

@media (max-width: 600px) {
    .form__row {
        flex-direction: column;
    }
}

.form__label {
    display: block;
    font-weight: 600; 
    margin-bottom: 8px;
    color: var(--color-texto-principal);
    font-size: 0.95em;
}

.form__label--checkbox {
    display: inline;
    font-weight: normal;
    margin-left: 8px; 
    font-size: 0.9em;
}

.form__input,
.form__select,
.form__textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--borde-tarjeta);
    border-radius: var(--border-radius-general);
    font-family: var(--fuente-principal);
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; 
    background-color: var(--color-fondo-principal);
    color: var(--color-texto-principal);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    outline: none;
    border-color: var(--azul-rdn);
    box-shadow: 0 0 0 3px rgba(30, 91, 120, 0.15); 
}

.form__checkbox {
    margin-right: 5px;
    vertical-align: middle;
    width: auto; 
    transform: scale(1.1); 
}

/* ==========================================================================
   13. Contenido Específico: Página de Contacto
   ========================================================================== */
.contact-details {
    margin-top: 30px;
    background-color: var(--fondo-tarjeta-alterna);
    padding: 35px;
    border-radius: var(--border-radius-general);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--sombra-detalles-contacto);
}

.contact-details__title { 
    text-align: center;
    margin-bottom: 25px;
    color: var(--color-titulo-principal); 
}

.contact-details__item { 
    font-size: 1.15em;
    margin-bottom: 18px;
    line-height: 1.8;
    color: var(--gris-oscuro-parrafos);
}

.contact-details__label { 
    color: var(--color-texto-principal);
}

.contact-details__note { 
    font-size: 0.85em;
    color: #777; 
    display: block;
    margin-top: 2px;
}

.contact-page__additional-message { 
    margin-top: 30px;
    text-align: center;
    font-style: italic;
    color: var(--gris-medio-texto-pasos);
}

/* ==========================================================================
   14. Componente: Site Footer
   ========================================================================== */
.site-footer {
    background-color: var(--negro-texto-principal); 
    color: var(--gris-claro-texto-footer); 
    text-align: center;
    padding: 40px 0; 
    margin-top: 60px; 
    font-size: 0.9em;
}

.site-footer__text p { 
    color: inherit;
    margin-bottom: 0.6em;
}

/* ==========================================================================
   15. Layout Específico: Página de Presupuesto
   ========================================================================== */
.quote-page__main-title { 
    margin-bottom: 15px; 
    color: var(--color-titulo-principal); 
}
.quote-page__intro { 
    font-size: 1.15em;
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
    color: var(--gris-medio-texto-pasos);
}
.quote-page__header { 
    text-align: center;
    margin-bottom: 40px;
}

.quote-layout {
    display: flex;
    flex-wrap: wrap; 
    gap: 40px; 
    align-items: flex-start; 
}

.quote-layout__info-column {
    flex: 0.9;
    min-width: 300px; 
    padding: 20px;
    background-color: var(--gris-muy-claro); 
    border-radius: var(--border-radius-general);
    box-shadow: var(--sombra-tarjeta-paso);
}

.quote-layout__technician-image {
    width: 100%;
    max-width: 350px;
    max-height: 400px;
    object-fit: contain;
    border-radius: var(--border-radius-general);
    margin: 0 auto 25px auto;
    box-shadow: var(--sombra-tarjeta-servicio);
}

.quote-layout__info-title { 
    color: var(--color-titulo-principal); 
    font-size: 1.6em; 
    margin-bottom: 15px;
    text-align: center;
}

.quote-layout__info-text { 
    font-size: 1em;
    color: var(--color-texto-principal);
    margin-bottom: 20px;
    line-height: 1.6;
}

.quote-layout__info-list {
    list-style: none; 
    padding-left: 0;
    margin-bottom: 0; 
}

.quote-layout__info-list-item { 
    font-size: 0.95em;
    color: var(--color-texto-principal);
    margin-bottom: 10px;
    padding-left: 25px; 
    position: relative;
}
.quote-layout__info-list-item::before { 
    content: '✔'; 
    color: var(--azul-claro);
    position: absolute;
    left: 0;
    top: 1px; 
    font-size: 1.1em;
}

.quote-layout__form-column {
    flex: 1.6;
    min-width: 320px;
}

/* ==========================================================================
   15.1  Contenido Específico: Página de Servicios
   ========================================================================== */
.service-section--gray {
    background-color: var(--gris-muy-claro);
}

/* ==========================================================================
   16. Media query para pantallas más pequeñas
   ========================================================================== */
@media (max-width: 768px) {
    .site-header__logo {
        max-height: 55px;
    }
    .site-header--scrolled .site-header__logo {
        max-height: 50px;
    }

    .site-header__toggle {
        display: block;
    }
    .site-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        background-color: var(--color-fondo-principal);
        box-shadow: var(--sombra-header-scrolled);
    }
    .site-header__nav.open {
        display: block;
    }
    .site-header__nav-list {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px;
    }
    .site-header__nav-item {
        margin: 10px 0;
    }
    .site-header__nav-link {
        color: var(--color-texto-principal);
        display: block;
        padding: 5px 0;
    }
    .desktop-only {
        display: none;
    }

    .quote-layout {
        gap: 30px; 
    }
    .quote-layout__info-column {
        margin-bottom: 30px; 
        padding: 15px;
    }
    .quote-layout__info-title {
        font-size: 1.4em;
    }
    
    .hero__title { 
        font-size: 2.5em;
    }
    .hero__subtitle {
        font-size: 1.1em;
    }

    .site-header__nav-item {
        margin-left: 10px; 
    }
    .site-header__nav-link {
        font-size: 0.75rem; 
        letter-spacing: 0.5px;
    }
    .site-header__nav-link--button {
        padding: 8px 12px; 
        font-size: 0.7rem;
    }

    h1 { font-size: 2.0em; } 
    h2 { font-size: 1.7em; }
    h3 { font-size: 1.25em; } 

    .service-list {
        grid-template-columns: 1fr; 
    }
    .service-card--view-all {
        min-height: auto; /* Permitir que la altura se ajuste en móvil */
        padding: 30px 25px; /* Añadir padding si el link overlay no es absoluto */
    }
    .step-card { 
        padding: 20px 15px;
    }
    .step-card__title {
        font-size: 1.15em;
    }
     .process-steps {
        grid-template-columns: 1fr;
    }

    .partner-logos {
        gap: 30px 50px; /* Reducir gap en móvil */
    }
    .partner-logos__item {
        flex: 0 0 calc(50% - 25px);
        max-height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cta-final__title {
        font-size: 1.8em; 
    }
    .cta-final__text {
        font-size: 0.95em;
    }
    .button--primary { 
        padding: 14px 28px; 
        font-size: 0.95em;
    }
    .form {
        padding: 20px;
    }
}

/* ==========================================================================
   DARK MODE STYLES (Modo Oscuro)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Colores Principales RDN */
        /* --azul-rdn: #1E5B78; */
        /* --azul-claro: #5FADD2; */ 
        
        /* Paleta de Grises - Modo Oscuro */
        --gris-muy-claro: #2a2a2a; 
        --gris-claro-bordes: #444; 
        --gris-claro-texto-footer: #a0aab8; 
        --gris-medio-texto-pasos: #b0bccf; 
        --gris-oscuro-parrafos: #c0c5d0; 
        --negro-texto-principal: #121212; 

        /* Colores Base - Modo Oscuro */
        --color-fondo-principal: #1e1e1e; 
        --color-texto-principal: #e0e7ef; 
        --color-enlace: var(--azul-claro); 
        --color-enlace-hover: #9ed8f5; 
        --color-titulo-principal: var(--azul-claro); /* Títulos generales en azul claro */
        --color-titulo-hero-cta: #FFFFFF; /* Blanco (o el texto principal claro del modo oscuro) */

        /* Colores de Componentes - Modo Oscuro */
        --fondo-tarjeta: #2c2c2e; 
        --fondo-tarjeta-alterna: #252527; 
        --borde-tarjeta: #505055;
        
        /* Sombras (Modo Oscuro) */
        --sombra-tarjeta-servicio: 0 2px 8px rgba(0,0,0,0.4);
        --sombra-tarjeta-servicio-hover: 0 4px 12px rgba(0,0,0,0.5);
        --sombra-tarjeta-paso: 0 1px 5px rgba(0,0,0,0.35);
        --sombra-tarjeta-testimonio: 0 2px 10px rgba(0,0,0,0.4);
        --sombra-item-razon: 0 1px 4px rgba(0,0,0,0.3);
        --sombra-formulario: 0 3px 15px rgba(0,0,0,0.45);
        --sombra-detalles-contacto: 0 2px 10px rgba(0,0,0,0.4);
        --sombra-header-scrolled: 0 1px 5px rgba(0,0,0,0.6); 
        --sombra-boton-hero: 0 3px 10px rgba(0,0,0,0.5);
        --sombra-boton-hero-hover: 0 5px 15px rgba(0,0,0,0.6);
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--color-titulo-principal); 
    }
    
    .hero__title,
    .cta-final__title,
    .service-card--view-all .service-card__title { /* Asegurar que estos títulos mantengan su color específico también en dark mode si es necesario */
        color: var(--color-titulo-hero-cta); 
    }
    .site-header__nav-link--button { /* Botón del header en modo transparente */
        background-color: var(--color-titulo-hero-cta); /* Fondo claro */
        color: var(--azul-rdn); /* Texto oscuro */
    }
     .site-header__nav-link--button:hover {
        background-color: rgba(220, 220, 230, 0.85); /* Un poco más oscuro */
        color: var(--azul-rdn);
    }

    .site-header--scrolled {
        background-color: #181818; 
        border-bottom: 1px solid var(--borde-tarjeta); 
    }
    /* El color de los links en .site-header--scrolled .site-header__nav-link ya usa var(--color-texto-principal) */
    /* El color de los links active/hover en .site-header--scrolled usa var(--color-enlace-hover) */
    .site-header--scrolled .site-header__nav-link--button {
        background-color: var(--azul-rdn); 
        color: var(--color-titulo-hero-cta); 
    }
    .site-header--scrolled .site-header__nav-link--button:hover {
        background-color: var(--azul-claro);
    }

    .site-header--alt {
        background-color: #181818;
        position: relative;
        padding: 25px 0;
        box-shadow: var(--sombra-header-scrolled);
    }
    .site-header--alt .site-header__nav-link {
        color: var(--color-texto-principal);
    }
    .site-header--alt .site-header__nav-link.active,
    .site-header--alt .site-header__nav-link:hover {
        color: var(--color-enlace-hover);
        border-bottom-color: var(--color-enlace-hover);
    }
    .site-header--alt .site-header__nav-link--button {
        background-color: var(--azul-rdn);
        color: var(--color-titulo-hero-cta);
    }
    .site-header--alt .site-header__nav-link--button:hover {
        background-color: var(--azul-claro);
    }
    
    .partner-logos__image { 
        opacity: 0.85;
        /* filter: brightness(0) invert(1); */
    }

    .form__input,
    .form__select,
    .form__textarea {
        background-color: #2d2d30; 
        color: var(--color-texto-principal); 
        border: 1px solid var(--borde-tarjeta); 
    }
    .form__input:focus,
    .form__select:focus,
    .form__textarea:focus {
        border-color: var(--azul-claro); 
        box-shadow: 0 0 0 2px var(--azul-claro); 
    }
   
    .form__input::placeholder,
    .form__textarea::placeholder {
        color: var(--gris-medio-texto-pasos);
    }
    .form__input::-webkit-input-placeholder,
    .form__textarea::-webkit-input-placeholder {
        color: var(--gris-medio-texto-pasos);
    }
    .form__input::-moz-placeholder,
    .form__textarea::-moz-placeholder {
        color: var(--gris-medio-texto-pasos);
        opacity: 1; 
    }
    .form__input:-ms-input-placeholder,
    .form__textarea:-ms-input-placeholder {
        color: var(--gris-medio-texto-pasos);
    }
    .form__input::-ms-input-placeholder,
    .form__textarea::-ms-input-placeholder {
        color: var(--gris-medio-texto-pasos);
    }
    .service-card--view-all { /* CAMBIO 2 y 3 para Dark Mode */
        background-color: #FFFFFF; /* Fondo blanco también en dark mode */
        color: var(--color-titulo-hero-cta); /* Texto en blanco */
    }
    .service-card--view-all:hover {
        background-color: var(--azul-claro);
        color: var(--color-titulo-hero-cta); /* Mantener texto y flecha en blanco */
    }
}