/* ==========================================================================
   CSS PARA PÁGINA LEGALES
   ========================================================================== */



html {
    scroll-behavior: smooth;
}

body {
    background-color: #f4f4f4; /* Un gris muy claro para diferenciar la página legal */
}

/* Efecto de sombra al pasar el ratón por los títulos (opcional) */
.contenedor-legales h2:hover {
    padding-left: 20px;
    transition: 0.3s;
}

.contenedor-legales h1 {
    font-size: 2.2rem;     /* Tamaño del texto */
    color: #2d3436;        /* Color del texto */
    margin-bottom: 40px;   /* Espacio debajo del título */
    text-align: center;    /* Centrado */
    text-transform: uppercase; /* Lo pone todo en mayúsculas */
}


.btn-volver-flotante {
    position: fixed !important;
    top: 30px !important; /* Lo ponemos arriba a la izquierda */
    left: 30px !important;
    z-index: 9999 !important;
    
    /* Mismo tamaño y forma que el de WhatsApp */
    width: 60px !important;
    height: 60px !important;
    background-color: #555555 !important; /* Color gris oscuro para diferenciar */
    color: white !important;
    border-radius: 50% !important;
    
    /* Centrado del icono */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 24px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    transition: transform 0.3s ease !important;
}

.btn-volver-flotante:hover {
    transform: scale(1.1) !important;
    background-color: #fb8500 !important; /* Cambia a naranja al pasar el mouse */
}



   /* 1. Contenedor principal para que el texto sea legible y no ocupe todo el ancho */
.contenedor-legales {
    max-width: 850px;
    margin: 100px auto 60px auto; /* Centrado y con margen superior para el header */
    padding: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 2. Estilos para los Títulos */
.contenedor-legales h1 {
    font-size: 2.2rem;
    color: #2d3436;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contenedor-legales h2 {
    font-size: 1.6rem;
    color: #fb8500; /* Usando tu naranja corporativo */
    margin-top: 45px;
    margin-bottom: 20px;
    border-left: 5px solid #fb8500; /* Detalle de diseño elegante */
    padding-left: 15px;
}

/* 3. Estilos para los párrafos y listas */
.contenedor-legales p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #636e72;
    margin-bottom: 20px;
    text-align: justify; /* Justificado para dar orden */
}

/* 4. Aseguramos que se vea bien en móviles */
@media (max-width: 768px) {
    .contenedor-legales {
        margin: 60px 15px;
        padding: 20px;
    }
    .contenedor-legales h1 { font-size: 1.6rem; }
}