/* ========================================= */
/* 1. DEFINICIÓN DE LÍNEA GRÁFICA (VARIABLES)*/
/* ========================================= */
:root {
    --theme-color: #02466c;       /* Azul oscuro (para H2 y acentos) */
    --title-color: #191825;       /* Negro/Gris muy oscuro (para H1) */
    --body-color: #74757B;        /* Gris principal para el cuerpo de texto */
    --smoke-color: #F7F7F7;       
    --light-gray: #F9F9F9;        /* Fondo body (8%) */
    --white-color: #ffffff;
    --yellow-color: #FFB539;      /* Amarillo/Naranja (Acento, Botón) */
    --black-color2: #080E1C;      /* Color del footer */
}

/* ========================================= */
/* 2. CONFIGURACIÓN DEL LIENZO (600x1350px) */
/* ========================================= */
body {
    background-color: var(--light-gray); 
    display: flex; 
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding: 20px 0; 
}

#afiche-canvas {
    width: 600px;
    height: 1350px; 
    overflow: hidden; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); 
    background-color: var(--white-color);
    position: relative; 
}

/* ========================================= */
/* 3. SECCIÓN INTERACTIVA (CABINA Y VOLANTE) */
/* ========================================= */
#interactive-cab-container {
    height: 600px; 
    width: 100%;
    position: relative;
    overflow: hidden;
    background-image: url("../img/icon/cabina.png"); 
    background-size: cover;
    background-position: center 30%; 
    perspective: 1000px;
    cursor: grab;
}

/* Volante y Claxon se mantienen... */
#steering-wheel { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 300px; height: 300px; z-index: 10; cursor: grab; transform-origin: 50% 50%; }
#wheel-img { width: 100%; height: 100%; display: block; user-select: none; margin: 0; }
#claxon-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: 30%; border-radius: 50%; cursor: pointer; z-index: 12; }
#rotation-indicator { /* Indicador de pulsación */
    position: absolute; bottom: 125px; left: 50%; transform: translateX(-50%); width: 25px;
    height: 25px; background-color: var(--yellow-color); border-radius: 50%; z-index: 15;
    pointer-events: none; box-shadow: 0 0 0 0 rgba(255, 181, 57, 0.7); animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 181, 57, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 181, 57, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 181, 57, 0); }
}

/* ========================================= */
/* 4. SECCIÓN DE CONTENIDO ENRIQUECIDO */
/* ========================================= */
#content-section {
    min-height: 700px;
    width: 100%;
    padding-top: 10px;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 10px; /* Reducción de padding inferior para el botón */
    box-sizing: border-box;
    background-color: var(--white-color);
    text-align: center;
    z-index: 20;
}

/* --- CORRECCIÓN 1: TIPOGRAFÍA DE TITULARES --- */
h1 { 
    font-family: 'Raleway', sans-serif;
    font-size: 1.8em; 
    color: var(--theme-color); /* Color oscuro */
    margin-bottom: 8px; 
    line-height: 1.2;
    font-weight: 700;
}
h2 { 
    font-family: 'Roboto', sans-serif; /* Corregido a Roboto */
    font-size: 1.1em;
    color: var(--title-color); /* Color azul del tema */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px; 
}
a {
	color:aliceblue;
}
/* --- Estilos de Columnas --- */
#service-columns { display: flex; justify-content: space-between; text-align: left; margin-top: 30px; margin-bottom: 30px; padding: 0 5px; }
.service-col { width: 30%; padding: 15px 10px; background-color: var(--white-color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); }
.col-title { font-family: 'Raleway', sans-serif; font-size: 0.9em; color: var(--theme-color); font-weight: 700; margin-bottom: 10px; line-height: 1.2; }
.service-col ul { list-style: none; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 0.8em; color: var(--body-color); }
.service-col ul li { margin-bottom: 8px; line-height: 1.4; }

/* Párrafo Final y CTA (CORRECCIÓN 2: Espacio para que el botón no se corte) */
#content-section p { 
    font-family: 'Roboto', sans-serif; font-size: 0.95em; color: var(--body-color); max-width: 540px; 
    margin: 0 auto 15px auto; /* Reducido de 25px a 15px */
    line-height: 1.5; text-align: center; 
}
.cta-button { 
    background-color: var(--theme-color); color: var(--white-color); padding: 10px 25px; 
    font-size: 1.0em; border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); 
    font-family: 'Raleway', sans-serif; font-weight: bold; text-decoration: none; 
    border-radius: 4px; display: inline-block; transition: all 0.2s ease-in-out; 
    margin-bottom: 15px; /* Reducido de 15px a 15px para evitar overflow */
}


/* ========================================= */
/* 5. FOOTER AÑADIDO */
/* ========================================= */
#footer-copy {
    width: 100%;
    height: 50px; 
    background-color: var(--black-color2); 
    color: var(--body-color);
    font-family: 'Roboto', sans-serif;
    font-size: 0.75em;
    padding: 15px 0;
    box-sizing: border-box;
    text-align: center;
    z-index: 30;
    position: absolute; 
    bottom: 0; 
}