:root{


    





    /* Top bar */
    --topBar-background-color: #003366;
    --topBar-text: #ffffff;
    --topBar-color-icon-fb: #ffffff;

    /* color header */
    --header-color-links: #333333;
    --header-color-links-hover: #2067af;

    /* color footer*/
    --footer-background-color: #003366;
    --footer-text: #ffffff;
    --footer-border-copyright: rgba(255, 255, 255, 0.7);

    /* Whatsapp */
    --whatsapp-button: #4CAF50;
    --whatsapp-number: #ffffff;
    --whatsapp-button-hover: #0a3866;
    --whatsapp-float: #25d366;
    --whatsapp-float-icon: #ffffff;

    /* Fuente de lettra */
    --font-letter: 'Poppins',sans-serif;

    /* Nostros css */
    --color-secondary: #0078ff;
    --color-text: #333;
    --color-white: #fff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --radius: 1rem;
}    

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-letter);
}

.temp{
    border: 1px dashed red;
}
.main-container {
    width: 60%;
    margin-right: auto; /* OPCION 1 */
    margin-left: auto;/* OPCION 1 */
    /*margin: 0 auto; /* OPCION 2*/
    /*padding: 10px 0;*/
    /*border: 1px dashed #ccc;  */    
}

body {
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Para que el footer quede abajo */
}

/* WhatsApp Float Button */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--whatsapp-float);
    color: var(--whatsapp-float-icon);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 100;
    text-decoration: none;
}

/* Escritorio pequeño - hasta 1600px */
@media (max-width: 1600px) { 
    .main-container{ 
        width: 70%;
    }
 }

/* Escritorio pequeño - hasta 1400px */
@media (max-width: 1400px) { 
    .main-container{ 
        width: 80%;
    }
 }


/* Escritorio pequeño - hasta 1200px */
@media (max-width: 1200px) { 
    .main-container{ 
        width: 85%;
    }
 }

/* Tablet landscape - hasta 1024px */
@media (max-width: 1024px) { 
    .main-container{ 
        width: 90%;
    }
 }

/* Tablet portrait - hasta 768px */
@media (max-width: 768px) { 
    .main-container{ 
        width: 90%;
        /*margin-right: 0; /* OPCION 1 */
        /*margin-left: 0;/* OPCION 1 */
        gap: 0;
        padding: 0;
    }

    .header-row{
        width: 100%;
        /*display: flex;
        justify-content: space-between;*/
    }
 }

/* Móvil grande - hasta 576px */
@media (max-width: 576px) { 
    .main-container{ 
        width: 100%;
    }
    .header-row{
        width: 100%;
        /*display: flex;
        justify-content: space-between;*/
    }
 }

/* Móvil pequeño - hasta 480px */
@media (max-width: 480px) { 
    .main-container{ 
        width: 100%;
    }
    .header-row{
        width: 100%;
        /*display: flex;
        justify-content: space-between;*/
    }
 }