:root {
    /* Colores */
    --color-primario: #A22620;
    --color-secundario: #7b1515;
    --color-blanco: #ffffff;
    --color-negro: #000000;
    --color-gris: #727272;
    --color-gris-claro: #cccccc;
    --background-primario: #660000;
    --background-secundario: #B22222;
    --background-contenido: #a0a0a0;
    --background-menu: #2b2b2b;
    --color-acento: #A22620; /* Nueva para acentos accesibles */
    --color-hover-gradiente1: #A22620;
    --color-hover-gradiente2: #7b1515;
    
    /* Tipografía */
    --font-principal: Roboto, Montserrat, Lato, system-ui, Arial, sans-serif;
    --font-menus: Montserrat, Roboto, system-ui, Lato, Arial, sans-serif;
    --font-weight-bold: 700;
    --font-weight-normal: 400;

    /* Escala tipográfica */
    --font-size-titulo: 1.25rem; /* ~20px */
    --font-size-subtitulo: 1.125rem; /* ~18px */
    --font-size-body: 1rem; /* ~16px */
    --font-size-pequeno: 0.875rem; /* ~14px */
    --font-size-menu: 1rem; /* ~16px */

    /* Espaciados */
    --spacing-unit: 1rem;
    --spacing-half: 0.5rem;
    --margin-standard: 1rem 0;
    --margin-reduced: 0.5rem 0;
    --spacing-reduced: 0.25rem; /* Para móvil */
       
    /* Dimensiones layout */
    --ancho-contenedor: 100%;
    --altura-menu-sup: clamp(50px, 6vh, 70px); /* Responsive height */
    --altura-banner: clamp(120px, 20vh, 200px); /* Responsive banner */
    --altura-menu-inter: clamp(30px, 4vh, 35px);

    /* Sistema de efectos */
    --shadow-standard: 0 2px 4px rgba(0, 0, 0, 0.1);
    --transition-standard: 0.3s ease; /* Reducido para mejor UX */
    --border-radius: 4px;
}


/* RESET GLOBAL Y BASE STYLES */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:focus-visible {
outline: 3px solid rgba(162, 38, 32, 0.25);
outline-offset: 2px;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling para mejor UX */
}

html, body {
    width: 100%;
}

body {
    background-color: var(--background-primario);
    font-family: var(--font-principal);
    text-align: left;
    margin: 0;
    line-height: 1.6; /* Mejora legibilidad */
}

ul {
    list-style: none;
}

a {
    font-family: var(--font-menus);
    font-size: var(--font-size-menu);
    text-decoration: none;
    color: var(--color-blanco);
    transition: var(--transition-standard);
}

/* LAYOUT PRINCIPAL */
#contenedor {
    width: 100%;
    min-height: 100vh;
    background-color: var(--background-secundario);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Menú Superior */
#menusup {
    width: 100%;
    height: var(--altura-menu-sup);
    background-color: var(--color-gris);
}

.menu-superior {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-half); /* Reducido para móvil */
    padding: var(--spacing-half);
    background: var(--color-gris);
    height: 100%;
    align-items: center;
}

.menu-superior a {
    font-family: var(--font-menus);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    color: var(--color-blanco);
    text-decoration: none;
    padding: var(--spacing-half);
    white-space: nowrap; /* Evita wrap en items */
}

.menu-superior a:hover {
    background: linear-gradient(180deg, var(--color-primario) 0%, var(--color-secundario) 100%);
}

/* Menú Horizontal */
#menuinter {
    width: 100%;
    height: var(--altura-menu-inter);
    background-color: var(--color-gris);
}

#menuh {
    font-size: clamp(0.75rem, 2vw, 0.875rem); /* Responsive font */
    height: 100%;
    display: flex;
    align-items: center;
}

#menuh ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 0.1rem; /* Ligeramente aumentado */
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

#menuh li {
    flex: 1;
    min-width: clamp(80px, 12vw, 120px); /* Responsive min-width */
    display: flex;
}

#menuh a {
    display: block;
    background: var(--background-menu);
    color: var(--color-blanco);
    padding: clamp(0.5rem, 1.5vh, 0.75rem) 0.25rem;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#menuh a:hover {
    background: linear-gradient(180deg, var(--color-primario) 0%, var(--color-secundario) 100%);
}

#menuh a#primero {
    border-left: 1px solid #ACCFE8;
}

/* Banner Hero Optimizado */
#banner.banner-hero {
    width: 100%;
    min-height: var(--altura-banner);
    height: clamp(120px, 20vh, 200px);
    background-image: url('/images/puesta-en-marcha-1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.banner-img {
    display: none; /* Desactivado, usa background-image */
}

/*.banner-contenido {
    position: absolute;
    text-align: center;
    color: var(--color-blanco);
    z-index: 2;
    padding: var(--spacing-unit);
    max-width: 1200px;
    margin: 0 auto;
}

.banner-titulo {
    font-family: var(--font-principal);
    font-size: var(--font-size-body);
    margin: var(--margin-reduced);
}

.banner-subtitulo {
    font-family: var(--font-principal);
    font-size: var(--font-size-body);
    margin: var(--margin-reduced);
}*/

/* Menú Desplegable */
/*#menu {
width: var(--ancho-sidebar);
font-size: var(--font-size-menu);
text-align: center;
}

#menu ul li.nivel1 {
width: 100%;
position: relative;
}

#menu ul li a {
display: block;
height: 30px;
padding: 7px 0;
background: var(--background-menu);
color: var(--color-blanco);
}

#menu ul li:hover > a {
background: linear-gradient(180deg, var(--color-primario) 0%, var(--color-secundario) 100%);
}

#menu ul li ul {
display: none;
position: absolute;
left: 100%;
top: 0;
z-index: 1000;
opacity: 0;
transform: translateY(-10px);
transition: opacity var(--transition-standard), transform var(--transition-standard);
}

#menu ul li:hover > ul,
#menu ul li:focus-within > ul {
display: block;
opacity: 1;
transform: translateY(0);
}

#menu ul.submenu li a {
width: var(--ancho-sidebar);
background: var(--background-menu);
}

#menu ul.submenu li a:hover {
background: linear-gradient(180deg, var(--color-hover-gradiente1) 0%, var(--color-hover-gradiente2) 100%);
}*/


/* Contenido Principal */
#contenido {
    flex: 1;
    background-color: var(--background-contenido);
    width: 100%;
    padding: clamp(0.5rem, 2vw, 1rem); /* Responsive padding */
    display: flex;
    justify-content: center;
}

/* Pie de Página */
#pie {
    width: 100%;
    padding: clamp(0.75rem, 3vw, 1rem);
    background-color: var(--color-gris);
    text-align: center;
}


/* TIPOGRAFÍA - SISTEMA DE TIPOS */
h1, .titulo-principal {
    font-family: var(--font-principal);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1.125rem, 4vw, 1.5rem); /* Responsive */
    color: var(--color-primario);
    margin: var(--margin-standard);
    line-height: 1.2;
}

h2, .subtitulo {
    font-family: var(--font-principal);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    color: var(--color-primario);
    margin: var(--margin-reduced);
}

p, .texto-base {
    font-family: var(--font-principal);
    font-weight: var(--font-weight-normal);
    font-size: clamp(0.875rem, 3vw, 1rem);
    color: var(--color-negro);
    margin: var(--margin-standard);
    line-height: 1.6;
}

.texto-justificado {
    text-align: justify;
    hyphens: auto; /* Divide palabras largas */
}

/* COMPONENTES REUTILIZABLES */
.contenedor-estandar {
    max-width: clamp(600px, 90vw, 1200px); /* Más flexible */
    margin: 0 auto;
    padding: clamp(0.5rem, 2vw, 1rem);
}

.contenedor-centrado {
    padding: var(--spacing-unit);
    max-width: clamp(400px, 85vw, 800px);
    margin: 0 auto;
    text-align: center;
}

.separador-seccion {
    border: 0;
    height: 1px;
    background-color: var(--color-primario);
    margin: var(--margin-standard);
}

/* Imágenes Optimizadas */
.imagen-centrada {
    text-align: center;
    margin: var(--margin-standard) 0;
}

.imagen-centrada img {
    max-width: clamp(200px, 80vw, 400px); /* Responsive max-width */
    height: auto;
    width: auto;
    max-height: clamp(156px, 25vw, 312px); /* Proporcional */
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* Mejora nitidez */
    border: 1px solid #ddd;
    box-shadow: var(--shadow-standard);
    border-radius: var(--border-radius);
}

.imagen-centrada p {
    margin: var(--margin-reduced) 0 0 0;
    font-size: var(--font-size-pequeno);
    color: var(--color-gris);
}


/* ELEMENTOS DE PIE DE PÁGINA */
#pie p {
    margin: 0;
    word-break: break-all; /* Para emails largos */
    line-height: 1.4;
}

#pie span {
    display: block;
    margin-bottom: 0.25rem;
}

.pie-direccion {
    max-width: clamp(300px, 80vw, 600px);
    margin: 0 auto;
    font-size: clamp(0.75rem, 2.5vw, 0.875rem);
    color: var(--color-blanco);
}

.pie-socios {
    max-width: clamp(250px, 70vw, 500px);
    margin: 0.5rem auto 0;
    font-size: clamp(0.7rem, 2.2vw, 0.8rem);
    color: var(--color-gris-claro);
}

.pie-socios a {
    color: var(--color-blanco);
    text-decoration: none;
    padding: 0 0.125rem;
}

.pie-socios a:hover {
    color: var(--color-primario);
    text-decoration: underline;
}

.pie-copyright {
    max-width: 100%;
    margin: 0.5rem auto 0;
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    color: var(--color-gris-claro);
}


/*    COMPONENTES DE NAVEGACIÓN ESPECÍFICOS */
.paginador {
    text-align: center;
    margin-top: clamp(0.5rem, 2vw, 1rem);
}

.paginador a {
    text-decoration: none;
    color: var(--color-primario);
    padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
    border: 1px solid #ccc;
    margin: 0 clamp(0.25rem, 1vw, 0.5rem);
    border-radius: var(--border-radius);
    display: inline-block;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
}

.paginador a:hover {
    background-color: #eee;
    border-color: #999;
}


/* SECCIONES ESPECÍFICAS DE CONTENIDO */
/* Clientes */
.cliente-item {
    margin-bottom: clamp(0.5rem, 2vw, 0.8rem);
    overflow: hidden;
}

.cliente-item img {
    float: right;
    margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
    max-width: clamp(100px, 25vw, 150px);
    height: auto;
}

/* Productos */
.productos-container {
    padding: var(--spacing-unit);
}

.productos-marcas {
    font-weight: var(--font-weight-bold);
    font-style: italic;
    color: var(--color-primario);
}

/* Soluciones */
.solucion-tabla {
    width: 100%;
    max-width: clamp(400px, 85vw, 500px);
    margin: 0 auto clamp(0.5rem, 2vw, 1rem) auto;
    border-collapse: collapse;
}

.solucion-tabla td {
    padding: clamp(0.5rem, 2vw, 1rem);
    vertical-align: top;
    border-bottom: 1px solid #ddd;
}

/* Página de agradecimiento */
.gracias-container {
    padding: clamp(1rem, 5vw, 2rem);
    text-align: center;
}

.gracias-mensaje {
    font-family: var(--font-principal);
    font-size: clamp(1rem, 4vw, 1.25rem);
    color: var(--color-negro);
    margin: var(--margin-standard);
    line-height: 1.4;
}

.gracias-imagen {
    margin: clamp(1rem, 4vw, 1.5rem) 0;
}

.gracias-link {
    font-family: var(--font-principal);
    font-size: var(--font-size-body);
    color: var(--color-primario);
    text-decoration: none;
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 4vw, 1.5rem);
    border: 1px solid var(--color-primario);
    border-radius: var(--border-radius);
    transition: var(--transition-standard);
    display: inline-block;
}

.gracias-link:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}


/* COMPONENTES ANIMADOS */
/* Fixes Específicos para home.php y Layout */
#bienvenida .imagen-centrada {
    margin-bottom: var(--spacing-unit); /* Espacio entre imágenes */
}

/* DISEÑO RESPONSIVO - Media Queries Optimizadas */
@media (max-width: 768px) {
    :root {
        --font-size-titulo: clamp(1rem, 5vw, 1.25rem);
        --spacing-unit: 0.75rem;
    }

    #contenido {
        padding: var(--spacing-half);
    }

    #banner.banner-hero {
        min-height: clamp(100px, 18vh, 150px);
    }

    .contenedor-estandar, 
    .pie-direccion, 
    .pie-socios, 
    .pie-copyright {
        max-width: 100%;
        padding: var(--spacing-reduced);
    }

    #pie span {
        text-align: left;
        margin-bottom: 0.25rem;
    }

    /* Menús más compactos en tablet */
    .menu-superior {
        gap: var(--spacing-reduced);
        padding: var(--spacing-reduced);
    }

    #menuh ul {
        gap: 0.05rem;
        padding: var(--spacing-reduced);
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-titulo: 1rem;
        --font-size-body: 0.875rem;
        --spacing-unit: 0.5rem;
    }

    #menusup, #menuinter {
        height: auto;
        min-height: clamp(40px, 8vh, 50px);
    }

    #bienvenida p {
        font-size: var(--font-size-pequeno);
        line-height: 1.5;
    }

    /* Footer más compacto */
    #pie {
        padding: var(--spacing-reduced);
    }

    .pie-socios {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .pie-socios a {
        padding: 0 0.125rem;
        font-size: 0.7rem;
    }
}

/* Desktop Ancho - Optimizaciones */
@media (min-width: 1024px) {
    .imagen-centrada img {
        max-width: clamp(400px, 30vw, 500px);
        max-height: clamp(312px, 25vh, 400px);
    }

    .contenedor-estandar {
        max-width: 1000px; /* Más específico para desktop */
    }

    /* Menús con mejor espaciado */
    .menu-superior {
        gap: var(--spacing-unit);
        padding: var(--spacing-unit);
    }

    #menuh li {
        min-width: 140px;
    }

    #menuh a {
        padding: 0.75rem 0.5rem;
    }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
    .contenedor-estandar {
        max-width: 1200px;
    }

    #menuh li {
        min-width: 160px;
    }
}

/* Print styles para escalabilidad */
@media print {
    body {
        background: white;
        color: black;
    }
    
    #banner {
        display: none;
    }
    
    .menu-superior, #menuinter {
        display: none;
    }
    
    #contenido {
        background: white;
        padding: 1rem;
    }
}