/* styles.css */
body {
    font-family: 'Lato', sans-serif;
}

header {
    background-color: #d3d3d3;
    padding: 10px 0;
}
body#empresasen-alemania header {
  background-color: white;
  padding: 10px 0;
}
.logo {
    height: auto;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    padding: 5px 10px;
}

nav ul li a:hover {
    color: #007bff;
}
a:hover {
     color:#d43835;
}
a {
    color:#000000;
}

.btn-outline-primary {
    border: 1px solid grey !important; /* Contorno negro */
    color: #ffffff !important; /* Texto en negro */
    background-color: grey !important; /* Fondo gris */
    font-weight: 400;
    border-radius: 20px;
    font-size: 0.7rem;
    transition: all 0.3s ease; /* Suaviza la transición */
}

/* Hover: Cambia color de texto y fondo */
.btn-outline-primary:hover {
    background-color: #000000 !important; /* Fondo negro */
    color: #ffffff !important; /* Texto en blanco */
}

/* Estilos responsivos para móviles */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
    }
    
    nav ul li {
        justify-content: center;
        width: 100%;
    }
}

#portada{
    background-color: #d3d3d3;
}
/* =================== INICIO: Personalización del enlace =================== */
.link-general {
    font-weight: bold;  /* 🔹 Texto en negrita */
    text-decoration: none;  /* 🔹 Sin subrayado */
    transition: color 0.3s ease-in-out;  /* 🔹 Efecto suave al pasar el mouse */
    text-decoration: underline;  /* 🔥 Subrayado solo en hover */
}

.link-general:hover {
   font-weight: 600;
}
.link-general-home {
    font-weight: bold;  /* 🔹 Texto en negrita */
    text-decoration: none;  /* 🔹 Sin subrayado */
    color: white;
    transition: color 0.3s ease-in-out;  /* 🔹 Efecto suave al pasar el mouse */
    text-decoration: underline;  /* 🔥 Subrayado solo en hover */
}

.link-general-home:hover {
   font-weight: 600;
}


/* =================== FIN: Personalización del enlace =================== */
/* =================== INICIO SECCIÓN DESCRIPCIÓN =================== */
.descripcion-section {
    width: 100%;
}

.descripcion-bg {
    background: linear-gradient(to bottom, #d3d3d3 50%, #ffffff 50%);
    width: 100%;
    padding: 80px 0;
    position: relative; /* Permite posicionar elementos dentro */
}

/* Contenedor principal de la descripción */
.descripcion-container {
    position: relative;
    max-width: 1200px; /* Ajusta según el ancho que necesites */
    margin: 0 auto;
}

/* Caja Naranja */
.naranja {
    background-color: #ec784d;
    color: #fff;
    padding: 40px;
    /*position: relative; /* Puede ser absolute si lo deseas */
    margin-left: auto; /* Lo empuja hacia la derecha */
    width: 90%; /* Ajusta el tamaño según necesites */
}

/* Caja Roja (Ajustable a tu gusto) */
.rojo {
    background-color: #d43835;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    position: absolute;
   /*  top: 20px; Puedes modificarlo */
    top: 35%; /* Puedes modificarlo */
    width: 20%;
    /*height: 65%;*/
}

/* Tipografía y estilos del texto */
.descripcion-titulo {
    font-size: 2rem;
    font-weight: bold;
    padding-left: 20%;
    margin: 40px 0;

}

.descripcion-texto {
    font-size: 1.2rem;
    line-height: 1.6;
    padding-left: 20%;

}

.descripcion-texto-bold {
    font-size: 1.5rem;
    font-weight: 600;
}

/* Responsividad */
@media (max-width: 992px) {
    .descripcion-section {
      /*  padding: 60px 0;*/
    }

    .descripcion-bg {
        padding: 60px 0;
    }

    .descripcion-container {
        max-width: 90%;
    }

     .rojo {
        position: relative; /* Se vuelve estático en móviles */
        left: 0;
        top: 0;
        width: auto;     
        margin-bottom: 20px;
    }

    .naranja {
        width: 100%;
        }

    div.descripcion-box.naranja{

    }
    h2.descripcion-titulo{
        padding: 0 0;
        text-align: center;
    }
    p.descripcion-texto{
        padding: 0 0;

    }

}
/* =================== FIN SECCIÓN DESCRIPCIÓN =================== */
 
/* =================== INICIO SECCIÓN EMPRESAS =================== */
:root {
    --empresa-color-rojo: rgba(212, 56, 53, 0.9);
    --empresa-color-naranja: rgba(236, 120, 77, 0.9);
    --empresa-color-amarillo: rgba(237, 168, 74, 0.9);
    --empresa-color-contacto: #ffffff;
    --empresa-borde-redondeado: 35px;
    --empresa-sombra-recuadro: 0px 4px 10px rgba(0, 0, 0, 0.1);
    --empresa-padding-seccion: 80px;
    --empresa-separacion-recuadros: 60px;
}

/* Contenedor principal de la sección */
.empresa-section {
    position: relative;
    width: 100vw; /* ✅ Asegura que cubra todo el ancho de la pantalla */
    min-height: 100vh; /* ✅ Ajusta la altura al contenido */
    background: url('../imagenes/home-fondo-empresas.png') no-repeat center center; /* ✅ Imagen de fondo */
    background-size: cover; /* ✅ Cubre toda la sección */
    padding: 80px 0; /* ✅ Espaciado interno */
}

/* Imagen de fondo */
.empresa-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Contenedor de los recuadros */
.empresa-content {
    position: relative; /* ✅ Lo volvemos relativo para que se ajuste al flujo normal */
    width: 80%; /* ✅ Un poco más de ancho para mejorar en móviles */
    max-width: 1200px;
    margin: auto;
    /*padding: 40px 0; /* ✅ Espacio arriba y abajo */

}
/* =================== FILA SUPERIOR: RECUADROS DE COLORES =================== */
.empresa-row {
    display: flex;
    justify-content: center;
    gap: var(--empresa-separacion-recuadros);
    width: 100%;
    margin-top: 13%;
}

/* Estilos base para cada recuadro */
.empresa-box {
    flex: 1;
    max-width: 330px; /* Tamaño máximo del cuadrado */
    aspect-ratio: 1 / 1; /* Hace que el recuadro sea siempre cuadrado */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-weight: bold;
    text-decoration: none;
    /*border-radius: var(--empresa-borde-redondeado);*/
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: var(--empresa-sombra-recuadro);
    font-size: 1.7rem;
    font-weight: 700;
    padding: 15px;
}

/* Colores de cada recuadro */
.empresa-rojo { background-color: var(--empresa-color-rojo);  }
.empresa-naranja { background-color: var(--empresa-color-naranja)}
.empresa-amarillo { background-color: var(--empresa-color-amarillo); }

/* Animación al pasar el mouse */
.empresa-box:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* =================== FILA INFERIOR: RECUADRO DE CONTACTO =================== */
.empresa-contacto-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--empresa-separacion-recuadros) + 150px); /* Separación adicional */
}

/* Estilo del recuadro de contacto */
.empresa-contacto-box {
    background-color: var(--empresa-color-contacto);
    padding: 30px;
    border-radius: var(--empresa-borde-redondeado);
    text-align: center;
    width: 60%;
}

/* Estilos del icono de email */
.empresa-email-icon {
    width: 50px;
    margin-bottom: 10px;
}

/* Responsividad */
@media (max-width: 768px) {
    .empresa-content {
        width: 100%;
        padding: 20px;
    }

    .empresa-row {
        flex-direction: column; /* ✅ Apilar en móviles */
        align-items: center;
        gap: 15px; /* ✅ Espacio entre los recuadros */
        width: 100%;
    }

    .empresa-box {
        width: 100%; /* ✅ Ancho completo solo en móviles */
        max-width: none; /* ✅ Sin límite de ancho */
        height: auto; /* ✅ Se ajusta al contenido */
        height: auto !important;
        aspect-ratio: unset;
        padding: 20px; /* ✅ Espaciado interno */
    }

    .empresa-section {
        padding-bottom: 0px; /* ✅ Mayor espacio para evitar solapamiento con el footer */
    }

    .empresa-contacto-box {
        width: 90%;
    }
    a.empresa-box.empresa-rojo,
    a.empresa-box.empresa-naranja,    
    a.empresa-box.empresa-amarillo{
        font-size: 1.5rem;
    }
}
/* =================== FIN SECCIÓN EMPRESAS =================== */
/* =================== INICIO SECCIÓN FOOTER =================== */
.footer-section {
    background-color: #4A4A49; /* Color de fondo oscuro */
    color: #FFFFFF; /* Texto blanco */
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Enlaces de la izquierda */
.footer-links {
    flex: 1;
}

.footer-links ul {
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    list-style: none;
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #D3D3D3; /* Color más claro al pasar el mouse */
}

/* Redes sociales al centro */
.footer-social {
    flex: 1;
    text-align: center;
}

.footer-social p {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-icon img:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Espacio vacío a la derecha */
.footer-empty {
    flex: 1;
}

/* Responsividad */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        margin-bottom: 20px;
    }

    .footer-empty {
        display: none; /* Ocultamos el espacio vacío en móviles */
    }
}
/* =================== FIN SECCIÓN FOOTER =================== */
/* =================== INICIO PERSONALIZACIÓN HOVER EN ROJO =================== */

/* Hover en enlaces del menú */
nav ul li a:hover {
    color: #d43835 !important;
}

/* Hover en botones outline */
.btn-outline-primary:hover {
    background-color: #d43835 !important;
    color: #ffffff !important;
    border-color: #d43835 !important;
}

/* Hover en enlaces del footer */
.footer-links ul li a:hover {
    color: #d43835 !important;
}

/* Hover en iconos de redes sociales */
.social-icon img:hover {
     filter: brightness(0) saturate(100%) invert(82%) sepia(40%) saturate(670%) hue-rotate(1deg) brightness(96%) contrast(94%);
    transform: scale(1.1);
    opacity: 0.8;
}
a.empresa-box:hover {
    color: #ffffff;
}

/* =================== FIN PERSONALIZACIÓN HOVER EN ROJO =================== */
/* =================== INICIO SECCIÓN EMPRESAS BANNER =================== */
.empresas-banner-section {
    position: relative;
    width: 100vw; /* Ancho completo del viewport */
    height: 60vh; /* Altura ajustable */
    overflow: hidden;
}

/* Imagen de fondo */
.banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen se ajusta sin dejar espacios en blanco */
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-banner-section {
        height: 50vh; /* Menor altura en móviles */
    }
}
/* =================== FIN SECCIÓN EMPRESAS BANNER =================== */

/* =================== INICIO SECCIÓN QUE HACE EMPRESAS =================== */
.que-hace-empresas-section {
    background-color: #d3d3d3; /* Fondo gris claro */
    padding: 60px 0;
}

/* Título principal */
.que-hace-title {
    font-size: 3.5rem;
    margin-bottom: 40px;
    color: #000; /* Color negro */
}

/* Negrita especial en el título */
.bold-text {
    font-weight: 900;
}

/* Contenedor de las columnas */
.que-hace-content {
    display: flex;
    align-items: stretch; /* Hace que todas las columnas tengan la misma altura */
    justify-content: center;
}

/* Cada columna de texto */
.que-hace-item {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #000;
    text-align: left;
    padding: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    align-items: flex-start;
}

/* Líneas divisoras entre las columnas */
.que-hace-divider {
    position: relative;
}

/* Línea separadora que cubre toda la altura */
.que-hace-divider .divider {
    position: absolute;
    left: -10px; /* Ajusta la posición de la línea */
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #fff; /* Línea blanca */
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .que-hace-content {
        flex-direction: column;
        text-align: center;
    }

    .que-hace-item {
        padding: 20px 0;
    }

    /* Oculta las líneas divisoras en móviles */
    .que-hace-divider .divider {
        display: none;
    }
}
@media (max-width: 1000px) {
    .que-hace-title{
        font-size: 2rem;
    }
}




/* =================== FIN SECCIÓN QUE HACE EMPRESAS =================== */

/* =================== INICIO SECCIÓN EMPRESAS RECUADRO =================== */
.empresas-recuadro-section {
    width: 100%;
    min-height: 200px; /* Altura mínima ajustable */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to bottom, #d3d3d3 50%, #ffffff 50%); /* Fondo dividido en gris y blanco */
    padding: 5vh 0; /* Ajuste dinámico para crecer con el contenido */
}

/* Caja central */
.empresas-recuadro-content {
    background-color: #ec784d; /* Color naranja */
    padding: 20px 40px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    max-width: 40%; /* Para que no ocupe todo el ancho en pantallas grandes */
}

/* Texto dentro del recuadro */
.empresas-recuadro-text {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-recuadro-section {
        min-height: 150px; /* Reduce altura mínima en móviles */
        padding: 3vh 0;
    }

    .empresas-recuadro-content {
        padding: 15px 30px;
        max-width: 90%; /* Mayor ancho en móviles */
    }

    .empresas-recuadro-text {
        font-size: 1.2rem;
    }
}
/* =================== FIN SECCIÓN EMPRESAS RECUADRO =================== */
/* =================== INICIO SECCIÓN EMPRESAS PARA KIEN =================== */
.empresas-para-kien-section {
    padding: 120px 0; /* Espaciado interno */
}

/* Imagen */
.empresas-para-kien-img {
    width: 80%; /* Ajusta el tamaño de la imagen */
    max-width: 300px;
}

/* Título */
.empresas-para-kien-title {
    font-size: 3.5rem;
    color: #000;
}

/* Resaltar "conTAKTbezirk" en negrita */
.bold-text {
    font-weight: 900;
}

/* Texto del párrafo */
.empresas-para-kien-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
}

/* Destacar parte del texto en rojo */
.highlight-text {
    color: #d43835;
    font-weight: bold;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-para-kien-section {
        text-align: center;
    }

    .empresas-para-kien-img {
        width: 50%; /* Reduce la imagen en móviles */
        max-width: 200px;
        margin-bottom: 20px;
    }

    .empresas-para-kien-title {
        font-size: 1.5rem;
    }

    .empresas-para-kien-text {
        font-size: 1rem;
    }
}
/* =================== FIN SECCIÓN EMPRESAS PARA KIEN =================== */

/* =================== INICIO SECCIÓN EMPRESAS DOS RECUADROS =================== */

/* Fondo de la sección con imagen */
.empresas-dos-recuadros-section {
    position: relative;
    width: 100%;
    height: auto;
    background: url("../imagenes/empresas-que-nos-hace-diferentes.jpg") no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

/* Contenedor principal del recuadro naranja */
.empresas-dos-recuadros-content {
    position: relative;
    background-color: rgba(224, 113, 77, 0.9); /* Naranja con transparencia */
    color: #fff;
    padding: 40px;
    max-width: 800px;
    text-align: left;
}

/* Título en el recuadro naranja */
.empresas-dos-recuadros-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

/* Párrafo en el recuadro naranja */
.empresas-dos-recuadros-text {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 85%
}

/* Recuadro rojo sobre el naranja */
.empresas-dos-recuadros-highlight {
    position: absolute;
    top: 30%;
    right: -20%;
    background-color: rgba(212, 56, 53, 0.95); /* Rojo */
    color: #fff;
    padding: 20px;
    font-weight: bold;
    text-align: center;
    width: 250px;
    font-size: 1.5rem;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 1200px) {
    .empresas-dos-recuadros-content {
        padding: 30px;
        max-width: 90%;
        text-align: center; /* Centrar todo en móviles */
          margin: auto;
    }

    .empresas-dos-recuadros-title {
        font-size: 1.5rem;
    }

    .empresas-dos-recuadros-text {
        font-size: 1rem;
    }

    .empresas-dos-recuadros-highlight {
        position: relative;
        top: 20px;
        right: 0;
        width: 90%;
        margin: auto;
    }
}
/* =================== FIN SECCIÓN EMPRESAS DOS RECUADROS =================== */

/* =================== INICIO SECCIÓN EMPRESAS QUE HARÁN =================== */
.empresas-que-haran-section {
    padding: 160px 0; /* Espaciado superior e inferior */
}

/* Imagen */
.empresas-que-haran-img {
    width: 100%; /* Ajusta el tamaño de la imagen */
    max-width: 350px;
}

/* Título principal */
.empresas-que-haran-title {
    font-size: 3.5rem;
    color: #000;
    padding-bottom: 40px;
}

/* Párrafos */
.empresas-que-haran-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

/* Texto resaltado debajo */
.empresas-que-haran-highlight {
    color: #ec784d; /* Naranja */
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 40px;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-que-haran-section {
        text-align: center; /* Centrar todo en móviles */
    }

    .empresas-que-haran-img {
        width: 70%; /* Ajuste de tamaño en móviles */
        max-width: 250px;
        margin-bottom: 20px;
    }

    .empresas-que-haran-title {
        font-size: 1.5rem;
    }

    .empresas-que-haran-text {
        font-size: 1rem;
    }

    .empresas-que-haran-highlight {
        font-size: 1.2rem;
    }
}
/* =================== FIN SECCIÓN EMPRESAS QUE HARÁN =================== */

/* =================== INICIO SECCIÓN EMPRESAS POR QUÉ NECESITAMOS =================== */
.empresas-porque-necesitamos-section {
    background-color: #d3d3d3; /* Fondo gris */
    padding: 60px 0;
}

/* Subtítulo */
.empresas-porque-necesitamos-subtitle {
    color: #e0714d; /* Naranja */
    font-size: 2rem;
    font-weight: bold;
    margin: auto;
    margin-bottom: 30px;
    width: 65%;
}

/* Título */
.empresas-porque-necesitamos-title {
    font-size: 3.5rem;
    color: #000;
    margin: auto;
    margin-bottom: 20px;
    width: 54%;
}

/* Línea vertical separada del título */
.empresas-linea-vertical-separada {
    width: 4px;
    height: 40px;
    background-color: #e0714d;
    margin: 0 auto 20px auto;
}

/* Contenedor de los recuadros */
.empresas-porque-necesitamos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Estilos base de los recuadros */
.empresas-porque-necesitamos-box {
    background-color: #fff;
    padding: 25px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 350px;
}

/* Base naranja de cada recuadro */
.empresas-porque-necesitamos-box::after {
    content: "";
    width: 100%;
    height: 10px;
    background-color: #e0714d; /* Naranja */
    position: absolute;
    bottom: 0;
    left: 0;
}

/* =================== LÍNEAS CONECTANDO LOS RECUADROS =================== */
/* Línea horizontal unida a los recuadros */
.empresas-linea {
    width: 50px;
    height: 4px;
    background-color: #e0714d; /* Naranja */
    display: flex;
    align-items: center;
    margin: 0; /* Eliminar separación */
    position: relative;
    top: -5px; /* Ajustar para que no se separe */
}

/* Línea vertical en el recuadro central */
.empresas-linea-vertical {
    width: 4px;
    height: 50px;
    background-color: #e0714d;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-porque-necesitamos-container {
        flex-direction: column;
    }

    .empresas-porque-necesitamos-box {
        max-width: 90%;
        margin-bottom: 20px;
    }

    /* Ocultar líneas en móviles */
    .empresas-linea,
    .empresas-linea-vertical,
    .empresas-linea-vertical-separada {
        display: none;
    }
}
@media (max-width: 1400px) {
    .empresas-porque-necesitamos-box {
        width: 80%; /* ✅ Hace que los recuadros cubran el 80% del ancho */
        max-width: none; /* ✅ Elimina la restricción de ancho */
        height: auto; /* ✅ La altura se ajusta al contenido */
        margin-bottom: 20px; /* ✅ Agrega separación extra entre recuadros */
    }
}
@media (max-width: 1400px) {
    .empresas-linea,
    .empresas-linea-vertical,
    .empresas-linea-vertical-separada {
        display: none !important; /* ✅ Oculta todas las líneas */
    }
    .empresas-porque-necesitamos-title {
    font-size: 2.5rem;
    margin: auto;
    width: 80%;
    margin-bottom: 30px;
}
.empresas-porque-necesitamos-subtitle {
    font-size: 2rem;
    width: 80%;
}
}
@media (max-width: 768px) {
    .empresas-porque-necesitamos-container {
        flex-direction: column; /* ✅ Apila los recuadros en móviles */
        align-items: center;
        gap: 20px; /* ✅ Agrega separación entre los recuadros */
    }

    .empresas-porque-necesitamos-box {
        width: 90%; /* ✅ En móviles, los recuadros ocupan más ancho */
    }
}
/* =================== FIN SECCIÓN EMPRESAS POR QUÉ NECESITAMOS =================== */

/* =================== INICIO SECCIÓN EMPRESAS CUÁNTO CUESTA =================== */
.empresas-cuanto-cuesta-section {
    background-color: #d3d3d3; /* Fondo gris */
    padding: 60px 0;
}

.empresas-cuanto-cuesta-section-mexico {
    padding: 60px 0;
}

/* Imagen */
.empresas-cuanto-cuesta-img {
    width: 80%;
    max-width: 300px;
}

/* Título */
.empresas-cuanto-cuesta-title {
    font-size: 3.5rem;
    color: #000;
    margin-bottom: 30px;
}

/* Subtítulo */
.empresas-cuanto-cuesta-subtitle {
    font-size: 2rem;
    color: #000;
    margin-bottom: 15px;
    width: 80%;
}

/* Párrafo */
.empresas-cuanto-cuesta-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #000;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-cuanto-cuesta-section {
        text-align: center;
    }

    .empresas-cuanto-cuesta-img {
        width: 60%;
        max-width: 250px;
        margin-bottom: 20px;
    }

    .empresas-cuanto-cuesta-title {
        font-size: 1.8rem;
    }

    .empresas-cuanto-cuesta-subtitle {
        font-size: 1.2rem;
        margin: auto;
        margin-bottom: 20px;
    }

    .empresas-cuanto-cuesta-text {
        font-size: 1rem;
    }
}
/* =================== FIN SECCIÓN EMPRESAS CUÁNTO CUESTA =================== */
/* =================== INICIO SECCIÓN EMPRESAS COLABORADORES =================== */
.empresas-colaboradores-section {
    padding: 60px 0;
}

/* Texto grande a la izquierda */
.empresas-colaboradores-title {
    font-size: 2.3rem;
    color: #000;
    text-align: right;
    width: 62%;
    margin-left: 35%;
}

/* Contenido de la derecha */
.empresas-colaboradores-content {
    text-align: left;
}

/* Párrafos */
.empresas-colaboradores-paragraph {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #000;
    margin-bottom: 15px;
}

/* Subtítulo */
.empresas-colaboradores-subtitle {
    font-size: 1.8rem;
    font-weight: bold;
    color: #000;
    margin-top: 30px;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 1200px) {
    .empresas-colaboradores-section {
        text-align: center;
    }

    .empresas-colaboradores-title {
        font-size: 1.5rem;
        text-align: center;
        margin: auto;
        margin-bottom: 20px;
    }

    .empresas-colaboradores-content {
        text-align: center;
    }

    .empresas-colaboradores-paragraph {
        font-size: 1rem;
    }

    .empresas-colaboradores-subtitle {
        font-size: 1.2rem;
    }
}

/* =================== FIN SECCIÓN EMPRESAS COLABORADORES =================== */
/* =================== INICIO SECCIÓN EMPRESAS CONTACTANOS =================== */
.empresas-contactanos-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

/* Recuadro gris con bordes redondeados */
.empresas-contactanos-box {
    background-color: #e5e5e5; /* Gris claro */
    padding: 40px;
    border-radius: 30px;
    max-width: 800px;
    width: 100%;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ícono de sobre */
.empresas-contactanos-icon img {
    width: 60px;
    margin-bottom: 15px;
}

/* Título */
.empresas-contactanos-title {
    font-size: 2rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
}

/* Texto explicativo */
.empresas-contactanos-text {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 15px;
}

/* Información de contacto */
.empresas-contactanos-info p {
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 5px;
}

/* Enlaces de correo */
.empresas-contactanos-info a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

.empresas-contactanos-info a:hover {
    color: #e0714d; /* Naranja */
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-contactanos-box {
        padding: 30px;
    }

    .empresas-contactanos-title {
        font-size: 1.8rem;
    }

    .empresas-contactanos-text {
        font-size: 1rem;
    }

    .empresas-contactanos-info p {
        font-size: 1rem;
    }

    .empresas-contactanos-icon img {
        width: 50px;
    }
}
/* =================== FIN SECCIÓN EMPRESAS CONTACTANOS =================== */

/* =================== INICIO SECCIÓN EMPRESAS DE MEX PORTADA =================== */
.empresas-de-mex-portada-section {
    background: url('../imagenes/empresas-de-mexico-top.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 500px; /* Ajusta según diseño */
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .empresas-de-mex-portada-section {
        height: 350px; /* Reducir altura en móviles */
    }
}
/* =================== FIN SECCIÓN EMPRESAS DE MEX PORTADA =================== */
/* =================== INICIO SECCIÓN CANDIDATOS =================== */
.candidatos-section {
    background: url('../imagenes/candidatos-top.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 500px; /* Ajusta la altura según diseño */
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .candidatos-section {
        height: 350px; /* Reducir altura en móviles */
    }
}
/* =================== FIN SECCIÓN CANDIDATOS =================== */

/* =================== INICIO SECCIÓN CANDIDATOS AYUDA =================== */
.candidatos-ayuda-section {
    background-color: #e5e5e5; /* Fondo gris claro */
    padding: 60px 0;
}

/* Título */
.candidatos-ayuda-title {
    font-size: 3.5rem;
    color: #000;
    margin-bottom: 50px;
}

/* Imagen */
.candidatos-ayuda-icon img {
    margin-bottom: 20px;
}

/* Párrafo */
.candidatos-ayuda-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 30px auto 30px;
}

/* Subtítulo */
.candidatos-ayuda-subtitle {
    font-size: 1.8rem;
    font-weight: bold;
    color: #000;
    margin-top: 20px;
}

.empresas-contactanos-box-ayuda {
    padding: 40px;
    border-radius: 30px;
    max-width: 800px;
    width: 100%;
    text-align: center;
}


/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .candidatos-ayuda-title {
        font-size: 2rem;
    }

    .candidatos-ayuda-icon img {
        width: 60px;
    }

    .candidatos-ayuda-text {
        font-size: 1rem;
        max-width: 90%;
    }

    .candidatos-ayuda-subtitle {
        font-size: 1.2rem;
    }
}
/* =================== FIN SECCIÓN CANDIDATOS AYUDA =================== */




/* =================== INICIO SECCIÓN SobreconTAKT =================== */
.SobreconTAKT-section {
    background: url('../imagenes/portada-sobre-contakt.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 700px; /* Ajusta la altura según diseño */
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .SobreconTAKT-section {
        height: 350px; /* Reducir altura en móviles */
    }
}
/* =================== FIN SECCIÓN SobreconTAKT =================== */


/* =================== INICIO SECCIÓN SOBRE CONTAKT LOGOS =================== */
.sobre-contakt-logos-section {
    padding: 40px 0;
}

/* Estilo del logo principal */
.sobre-contakt-logo.principal {
    height: 120px;
    width: auto;
    max-width: 571px; /* Tamaño exacto de Bezirk Göthe Zentrum */
    margin-bottom: 20px;
    margin: auto;
}

/* Estilo de los logotipos secundarios con tamaños exactos */
.sobre-contakt-logo {
    height: 120px;
    width: auto; /* Mantener proporción */
    display: block;
}

/* Tamaños personalizados para cada logo basado en su ancho real */
.sobre-contakt-logo.iik {
    max-width: 128px;
}
.sobre-contakt-logo.helios {
    max-width: 292px;
}
.sobre-contakt-logo.goethe {
    max-width: 227px;
}
.sobre-contakt-logo.ahk {
    max-width: 433px;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 992px) {
    .sobre-contakt-logo {
        height: 100px;
    }
}

@media (max-width: 768px) {
    .sobre-contakt-logo {
        height: 90px;
    }
}

@media (max-width: 576px) {
    .sobre-contakt-logo {
        height: 80px;
    }
}
/* =================== FIN SECCIÓN SOBRE CONTAKT LOGOS =================== */
/* =================== INICIO SECCIÓN SOBRE CONTAKT VIDEOS =================== */
.sobre-contakt-videos-section {
    padding: 40px 0;
}

/* Estilo de los títulos */
.sobre-contakt-titulo {
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 3.5rem;
}

/* Contenedor responsivo para los videos */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background-color: white; /* 🔹 Fondo blanco */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; 
}

.video-container-vertical {
    position: relative;
    width: 100%; /* 📌 Ocupa todo el ancho disponible */
    max-width: 720px; /* 📌 Máximo 720px de ancho */
    height: auto; /* 📌 Permite que el alto se ajuste automáticamente */
    max-height: 500px; /* 📌 Máximo 500px de alto */
    margin: 0 auto; /* 📌 Centra el video */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 📌 Evita desbordamientos */
}

.video-container-vertical video.custom-video {
    width: auto; /* 📌 Ajusta el ancho automáticamente */
    height: 100%; /* 📌 Mantiene el alto dentro del límite */
    max-height: 500px; /* 📌 Límite máximo de 500px */
    object-fit: contain; /* 📌 Mantiene la proporción del video */
}


/* Enlaces de subtítulos debajo del primer video */
.sobre-contakt-enlace {
    color: #c45c2c;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.sobre-contakt-enlace:hover {
    text-decoration: underline;
}

/* Estilo del separador */
.sobre-contakt-separador {
    width: 50%;
    border-top: 2px solid #000;
    margin: 30px auto;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .sobre-contakt-titulo {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .sobre-contakt-titulo {
        font-size: 2.5rem;
    }
}
/* =================== FIN SECCIÓN SOBRE CONTAKT VIDEOS =================== */