/*.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

//////////

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}



*/

      body {
            margin: 0;
            height: 100vh;
            background-color: #13232d;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: "Roboto Condensed", sans-serif;
            color: white;
            text-align: center;
        }

        .logo {
            max-width: 250px;
            width: 100%;
            height: auto;
        }

        .message {
            margin-top: 20px;
            font-size: 24px;
            padding: 0px 20px 0px 20px; /* Espacio a los lados */
            box-sizing: border-box; /* Para que el padding no afecte al ancho total */
        }

        .icon-container {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 20px;
        }

        .icon {
            font-size: 40px;
            color: white;
            transition: color 0.3s;
        }

        .icon:hover {
            color: #61a2ba; /* Efecto hover para WhatsApp */
        }

        .email:hover {
            color: #61a2ba; /* Efecto hover para E-mail */
        }

        /* Ajustes responsivos */
        @media (max-width: 600px) {

            .icon {
                font-size: 30px; /* Reducción de tamaño de iconos en pantallas pequeñas */
            }

            .icon-container {
                gap: 20px; /* Menos separación entre iconos en pantallas pequeñas */
            }
        }