:root {
    --color-fondo: #e4e4e4;
    --color-principal: #c79c60;
    --color-secundario: #686868;
    --color-blanco: #ffffff;
    --color-negro: #000000;

    --fuente-principal: 'Open Sans', sans-serif;
    --fuente-logo: 'Damion', cursive;
    --fuente-hero: 'Hero', sans-serif;

    --sombra-box: 0px 0px 30px rgba(0, 0, 0, 0.08);

    --radio-borde: 10px;

}



html,
body {
    overflow-x: hidden;
    /* Previene scroll horizontal */
    font-family: var(--fuente-hero);
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Hero';
    src: url('../fonts/HeroLight-Bold.woff2') format('woff2'),
        url('../fonts/HeroLight-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* -----------------------------------------------------------------------------------
                                            HEADER Y WELLCOME AREA GENERAL
--------------------------------------------------------------------------------------*/

.mi-navbar {
    font-family: var(--fuente-hero);
    background-color: var(--color-negro);
    padding: 1rem 0;
}

.mi-navbar .container-fluid {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centra horizontalmente todo */
    gap: 2rem;
}

.mi-navbar .navbar-collapse {
    flex-grow: 0;
    /* Evita que empuje el contenido */
}

.mi-navbar .navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.mi-navbar .nav-link {
    color: var(--color-blanco);
    transition: color 0.3s ease;
    background-color: transparent;
}

.mi-navbar .nav-link:hover,
.mi-navbar .nav-link:focus {
    color: var(--color-principal) !important;
    background-color: transparent !important;
    text-decoration: underline;
}

.mi-navbar .nav-link.active,
.mi-navbar .nav-link.active:hover,
.mi-navbar .nav-link.active:focus {
    color: var(--color-principal) !important;
    font-weight: bold;
    border-bottom: 2px solid var(--color-principal);
    background-color: transparent !important;
    text-decoration: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* -------------------------------WELCOME AREA-----------------------------------------------------*/


/* contenedor general */
.welcome-container {
    position: relative;
    /* Hace que los elementos hijos con position: absolute se posicionen relativos a este contenedor */
    width: 100%;
    height: 100vh;
    /* La altura será igual a la altura de la pantalla */
    overflow: hidden;
    /* Asegura que no haya contenido que se salga del contenedor */
}

/* contenedor imagen */
.welcome-container img {
    width: 100%;
    height: 100%;
    /* La imagen ocupará toda la altura del contenedor */
    object-fit: cover;
    /* Asegura que la imagen se recorte proporcionalmente para llenar el contenedor */
    display: block;
    /* Elimina el espacio extra debajo de la imagen */
}

/* capa (overlay) oscura encima de la imagen */
.welcome-container::before {
    content: "";
    /* Necesario para que ::before se renderice */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* capa para oscurecer la imagen */
    z-index: 1;
    /* Coloca la capa (overlay) oscura encima de la imagen */
}

/* estilo lineas */
.linea {
    display: inline-block;
    width: 50px;
    /* Ajusta el ancho de la línea */
    height: 5px;
    /* Ajusta el grosor de la línea */
    background-color: var(--color-blanco);
    /* Color de la línea */
    margin: 0 10px;
    /* Espaciado entre la línea y el texto */
    vertical-align: middle;
    /* Alinea la línea con el texto */
    border-radius: 50px;
    /* Hace que los bordes sean redondeados */
}

/* -----------------------------------------------------------------------------------
                                            HEADER Y WELLCOME AREA GENERAL
--------------------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------------
                                            HOME PAGE AREA
--------------------------------------------------------------------------------------*/

/* Asegúrate de que el contenedor tenga position: relative */
.welcome-container {
    position: relative;
}

/* Centramos todo el texto */
.welcome-container .texto-central-welcome {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
}

/* h1 y h2 limpios */
.welcome-container .texto-central-welcome h1,
.welcome-container .texto-central-welcome h2 {
    margin: 0;
    font-weight: 200;
    letter-spacing: 2px;
}

/* Tamaños y ajustes opcionales */
.welcome-container .texto-central-welcome h1 {
    color: var(--color-blanco);
    font-family: damion;
    font-size: 3.5rem;
}

.welcome-container .texto-central-welcome h2 {
    color: var(--color-principal);
    text-transform: uppercase;
    font-family: serif-medium;
    font-size: 4rem;
}

/* -------------------------------- */
/* estilo welcome to */



/* ---------------estilo quiero ser barista-------------------------------------------*/
.container-barista {
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-barista {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.barista-cabecera {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 130px;
}

.barista-cabecera h2 {
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    /* Previene saltos de línea */
    margin: 0;
}

.linea-barista {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

.container-texto-barista p {
    padding-bottom: 20px;
    padding-top: 15px;
    /* Espacio superior */
    max-width: 750px;
    justify-content: start;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    text-align: start;
    color: var(--color-secundario);
}

.container-texto-barista ul {
    margin-top: -13px;
    margin-bottom: 20px;
    padding: 0;
    /* Mantén el relleno eliminado si no lo necesitas */
    list-style: disc;
    /* Asegúrate de que los puntos estén visibles */
    list-style-position: inside;
    /* Coloca los puntos dentro del contenedor */
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Espacio entre los elementos de la lista */
}

.container-texto-barista li {
    margin: 1px 0;
    /* Reduce el espacio vertical entre los elementos */
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    /* Ajusta el tamaño del texto */
    font-weight: 100;
    text-align: start;
    /* Alinea el texto al inicio */
    color: var(--color-secundario);
    /* Color del texto */
}

.container-texto-barista li::marker {
    color: var(--color-principal);
    /* Cambia el color de los puntos */
}

.container-texto-barista a {
    background-image: url('/img/boton.png');
    background-size: cover;
    /* Asegúrate de que la imagen cubra todo el botón */
    background-position: center;
    /* Centra la imagen dentro del botón */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    display: flex;
    justify-content: center;
    /* Centra el contenido horizontalmente */
    align-items: center;
    /* Centra el contenido verticalmente */
    margin-top: 20px;
    /* Espacio superior */
    width: 223px;
    /* Ancho del botón */
    height: 50px;
    /* Alto del botón */
    text-decoration: none;
    /* Elimina el subrayado del enlace */
    color: var(--color-principal);
    /* Color del texto */
    font-family: 'Open Sans', sans-serif;
    /* Fuente del texto */
    font-size: 16px;
    /* Tamaño del texto */
    text-align: center;
    /* Centra el texto */
    text-transform: uppercase;
    /* Convierte el texto a mayúsculas */
    font-weight: 600;
    /* Peso del texto */
    border-radius: 15px;
    /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Sombra suave */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Transición suave */
    background-color: transparent;
    /* Asegúrate de que no haya un color de fondo adicional */
}

.container-texto-barista a:hover {
    transform: translateY(-3px);
    /* Eleva ligeramente el botón al pasar el mouse */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}

/* --------------- fin estilo quiero ser barista-------------------------------------------*/



/* ---------------estilo mas escuelas-------------------------------------------*/

/* Estilo caja titulo */

.container-titulo-escuelas {
    padding-top: 0px;
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-escuelas {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.escuelas-cabecera {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 130px;
}

.escuelas-cabecera h2 {
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    /* Previene saltos de línea */
    margin: 0;
}

.linea-escuelas {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

/* Estilo cajas escuelas */

.contenedor-escuelas {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 60px;
    padding: 40px 0;
    /* opcional */
    max-width: 1200px;
    margin: 0 auto;
}

.escuela {
    flex: 1;
    background-color: var(--color-blanco);
    border-radius: 20px;
    padding: 20px 20px 50px;
    /* más alto por arriba y abajo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* sombra sutil */
    text-align: center;
}

.contenedor-escuelas h3 {
    font-size: 23px;
    /* Tamaño del texto */
    font-weight: 400;
    /* Peso de la fuente */
    text-align: center;
    /* Centra el texto */
    color: var(--color-principal);
    /* Color del texto */
}

.contenedor-escuelas hr {
    align-items: center;
    /* Centra el elemento */
    width: 230px;
    /* Ancho de la línea */
    border: 0;
    /* Elimina el borde predeterminado */
    height: 1px;
    /* Grosor de la línea */
    border-bottom: 1px solid #eee;
    /* Color de la línea */
    margin: 0 auto;
    /* Espacio superior e inferior */
}

.contenedor-escuelas p {
    max-width: 210px;
    /* Ancho máximo del texto */
    margin: 22px auto 0 auto;
    /* Agrega un margen superior de 10px */
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    /* Ajusta el tamaño del texto */
    font-weight: 100;
    text-align: center;
    /* Alinea el texto al centro */
    color: var(--color-secundario);
    /* Color del texto */
}

.contenedor-escuelas img {
    padding-bottom: 50px;
    /* Espacio inferior */
    border-radius: 10px;
    /* Bordes redondeados */
    width: 100%;
    /* Ajusta el ancho para que ocupe todo el contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    object-fit: cover;
    /* Asegura que la imagen se ajuste al contenedor sin deformarse */
}

.escuela:hover {
    transform: translateY(-5px);
    /* Eleva ligeramente el contenedor al pasar el mouse */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}

/* ---------------fin estilo mas escuelas-------------------------------------------*/



/* ---------------Carrusel reseñas-------------------------------------------*/

.container-texto-reseñas {
    padding-top: -200px;
    max-width: 950px;
    margin: 0 auto;
}

.reseñas-cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 130px;
    flex-wrap: nowrap;
}

.reseñas-cabecera h2 {
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    margin: 0;
}

.linea-reseñas {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}




/* ---------------------------CARRUSEL ALUMNOS---------------------------------------- */
.reseñas {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.reseñas-container {
    padding: 2vw 10vw;
    display: flex;
    overflow-x: auto;
    /* scroll-behavior: smooth; */
}

.reseñas-card {
    flex: 0 0 auto;
    width: 250px;
    height: 450px;
    margin-right: 40px;
    position: relative;
}

.reseñas-imagenes {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.reseñas-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reseñas-info {
    max-width: 125px;
    position: absolute;
    bottom: 160px;
    /* Ajusta este valor para bajar el texto */
    left: 50%;
    /* Centra horizontalmente */
    transform: translateX(-50%);
    /* Ajusta para centrar correctamente */
    padding: 0;
    /* Elimina el padding */
    background: none;
    /* Elimina el fondo gris */
    color: rgb(171, 170, 170);
    /* Mantén el color del texto */
    text-align: center;
    /* Centra el texto */
    box-sizing: border-box;
}

.reseñas-info h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.reseñas-info p {
    margin: 5px 0 0;
    font-size: 12px;
}

.botones-pre-next {
    position: absolute;
    max-width: 1000px;
    width: 100%;
}

.pre-btn,
.nxt-btn {
    position: absolute;
    top: 55%;
    transform: translateY(350%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
    color: var(--color-blanco);
    font-size: 24px;
}

.pre-btn {
    left: -10px;
}

.nxt-btn {
    right: 10px;
}

/* ---------------------------FOOTER (GENERAL)---------------------------------------- */

/* Estilo general del footer */
.footer-container {
    overflow-x: hidden;
    position: relative;
    display: flex;
    /* Activa Flexbox */
    justify-content: center;
    align-items: flex;
    /* Alinea las cajas al inicio verticalmente */
    background-color: #444749;
    /* Color de fondo */
    padding: 50px;
    /* Espacio interno */
    font-family: 'Open Sans', sans-serif;
    /* Fuente del texto */
}

/* Estilo de las caja boxs */
.footer-container .box1,
.box2,
.box3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    margin: 0 0px;
}

/* Estilo de los títulos */
.footer-container h3 {
    padding-bottom: 1px;
    /* Espacio inferior */
    margin: 0;
    /* Elimina cualquier margen superior e inferior */
    color: var(--color-blanco);
    font-size: 18px;
    /* Ajusta el tamaño del texto */
    font-weight: bold;
    /* Aplica negrita para destacar */
    text-align: left;
    /* Alinea el texto al margen izquierdo */
}

/* Estilo de los p en box 1 */
.box1 p {
    margin: 0;
    /* Elimina cualquier margen superior e inferior */
    padding: 0;
    /* Elimina cualquier padding */
    color: rgb(127, 126, 126);
    font-size: 10px;
    /* Ajusta el tamaño del texto */
    text-align: left;
    /* Alinea el texto al margen izquierdo */
}

/* Estilo de los p en box2 */
.box2 p {
    margin-top: 15px;
    /* Espacio superior */
    margin-bottom: 0px;
    line-height: 15px;
    color: rgb(127, 126, 126);
    font-size: 12px;
    /* Ajusta el tamaño del texto */
    text-align: left;
    /* Alinea el texto al margen izquierdo */
}

/* Estilo de los p en box3 */
.box3 p {
    padding-top: 15px;
    margin: 0;
    /* Elimina cualquier margen superior e inferior */
    padding-bottom: 15px;
    /* Espacio inferior */
    color: rgb(127, 126, 126);
    font-size: 12px;
    /* Ajusta el tamaño del texto */
    text-align: left;
    /* Alinea el texto al margen izquierdo */
}

/* Estilo del formulario en la caja 3 */
.footer-container .box3 form {
    border: 3px var(--color-blanco);
    position: relative;
    width: fit-content;
}

.footer-container .box3 form input {
    border: 3px var(--color-blanco);
    background-color: #686868;
    padding-right: 20px;
    /* espacio para el botón */
    padding-left: 10px;
    height: 40px;
    font-size: 16px;
}

.footer-container .box3 form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    cursor: pointer;
    padding: 0 10px;
}

.footer-container .box3 form button {
    background-color: #686868;
    /* Fondo dorado */
    color: var(--color-blanco);
    /* Texto blanco */
}

.footer-container .box3 form button:hover {
    background-color: #444749;
    /* Fondo más oscuro al pasar el mouse */
}

/* Contenedor de los íconos sociales */
.social-icons {
    padding-bottom: 18px;
    /* Espacio inferior */
    display: flex;
    /* Activa Flexbox */
    justify-content: start;
    /* Centra los íconos horizontalmente */
    gap: 20px;
    /* Espacio entre los íconos */
    margin-top: 20px;
    /* Espacio superior */
}

/* Estilo de los enlaces de los íconos */
.social-icons a {
    display: flex;
    justify-content: center;
    /* Centra el ícono dentro del círculo */
    align-items: center;
    /* Centra el ícono verticalmente */
    width: 50px;
    /* Ancho del círculo */
    height: 50px;
    /* Alto del círculo */
    background-color: #555555;
    /* Fondo oscuro del círculo */
    color: var(--color-blanco);
    /* Color del logo */
    font-size: 24px;
    /* Tamaño del ícono */
    border-radius: 50%;
    /* Hace que el fondo sea redondo */
    text-decoration: none;
    /* Elimina el subrayado */
    transition: transform 0.3s ease, background-color 0.3s ease;
    /* Transición suave */
}


/* Efecto hover para los íconos */
.social-icons a:hover {
    transform: scale(1.1);
    /* Aumenta ligeramente el tamaño al pasar el mouse */
    background-color: #555555;
    /* Cambia el color del fondo al pasar el mouse */
}


/* -----------------------------------------------------------------------------------
                                            FIN HOME PAGE AREA
--------------------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------------
                                            NOSOTROS
--------------------------------------------------------------------------------------*/
/* ------------nosotros----------------------------- */
.container-nosotros {
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-nosotros {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.nosotros-cabecera {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 130px;
}

.nosotros-cabecera h2 {
    padding-bottom: 0px;
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    /* Previene saltos de línea */
    margin: 0;
}


.linea-nosotros {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

.container-texto-nosotros p {
    padding-bottom: 20px;
    padding-top: 15px;
    /* Espacio superior */
    max-width: 750px;
    justify-content: start;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    text-align: start;
    color: var(--color-secundario);
}

.container-texto-nosotros img {
    margin-top: 20px;
    /* Espacio superior */
    margin-left: 20px;
    /* Espacio entre la imagen y el texto */
    width: 300px;
    /* Ancho de la imagen */
    height: auto;
    /* Mantiene la proporción de la imagen */
    float: right;
    /* Hace que la imagen flote a la derecha */
    margin-right: 0px;
    /* Espacio entre la imagen y el texto */
    display: flex;
    justify-content: flex-end;
    /* Alinea la imagen a la derecha */
}

.contenido-quehacemos .img-flotante {
    float: none;
    display: block;
    margin: 0 auto 1rem;
}

.contenido-nosotros {
    margin-bottom: -50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    /* espacio entre texto e imagen */
}

.contenido-nosotros p {
    flex: 1;
    margin: 0;
}

.contenido-nosotros img {
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* sombra sutil */
    width: 300px;
    height: auto;
    object-fit: cover;
}

.contenido-nosotros img:hover {
    transform: translateY(-5px);
    /* Eleva ligeramente el contenedor al pasar el mouse */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}

/* ------------quehacemosquehacemos----------------------------- */
.container-quehacemos {
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-quehacemos {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.quehacemos-cabecera {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 130px;
}

.quehacemos-cabecera h2 {
    margin-top: 50px;
    padding-bottom: 0px;
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    /* Previene saltos de línea */
    margin: 0;
}

.linea-quehacemos {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

.container-texto-quehacemos p {
    padding-bottom: 20px;
    padding-top: 15px;
    /* Espacio superior */
    max-width: 750px;
    justify-content: start;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    text-align: start;
    color: var(--color-secundario);
}


.contenido-quehacemos {
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    /* espacio entre texto e imagen */
}

.contenido-quehacemos p {
    flex: 1;
    margin: 0;
}

strong {
    font-weight: bold !important;
    color: var(--color-negro);
}

.contenido-quehacemos img {
    margin-left: 0px;
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* sombra sutil */
    width: 300px;
    height: auto;
    object-fit: cover;
}

.contenido-quehacemos img:hover {
    transform: translateY(-5px);
    /* Eleva ligeramente el contenedor al pasar el mouse */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}

/* -----------------------------------------------------------------------------------
                                            FIN NOSOTROS
--------------------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------------
                                            EMPRESAS
--------------------------------------------------------------------------------------*/
/* ------------quieres montar una cafeteria----------------------------- */

.container-cafeteria {
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-cafeteria {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

/* Cabecera con línea y título */
.cafeteria-cabecera {
    display: flex;
    align-items: center;
    /* Centra verticalmente h2 y línea */
    justify-content: start;
    gap: 20px;
    padding-top: 130px;
}

.cafeteria-cabecera h2 {
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    margin: 0;
}

.linea-cafeteria {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

/* Contenido principal */
.contenido-cafeteria {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.texto-cafeteria {
    flex: 1;
    min-width: 280px;
}

.texto-cafeteria p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    color: var(--color-secundario);
    margin-bottom: 15px;
    text-align: start;
}

.texto-cafeteria ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.texto-cafeteria li {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    color: var(--color-secundario);
    margin-bottom: 10px;
}

/* Imagen */
.contenido-cafeteria img {
    width: 300px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    transition: all 0.3s ease;
}

.contenido-cafeteria img:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.container-texto-cafeteria li::marker {
    color: var(--color-principal);
    /* Cambia el color de los puntos */
}

/* ------------nuestro cafe----------------------------- */
.container-nuestrocafe {
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-nuestrocafe {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.nuestrocafe-cabecera {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 130px;
}

.nuestrocafe-cabecera h2 {
    margin-top: 50px;
    padding-bottom: 0px;
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    /* Previene saltos de línea */
    margin: 0;
}

.linea-nuestrocafe {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

.container-texto-nuestrocafe p {
    padding-bottom: 20px;
    padding-top: 15px;
    /* Espacio superior */
    max-width: 750px;
    justify-content: start;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    text-align: start;
    color: var(--color-secundario);
}


.contenido-nuestrocafe {
    margin-top: 22px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    /* espacio entre texto e imagen */
}

.contenido-nuestrocafe p {
    flex: 1;
    margin: 0;
}

strong {
    font-weight: bold !important;
    color: var(--color-negro);
}

.contenido-nuestrocafe img {
    margin-left: 0px;
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* sombra sutil */
    width: 300px;
    height: auto;
    object-fit: cover;
}

.contenido-nuestrocafe img:hover {
    transform: translateY(-5px);
    /* Eleva ligeramente el contenedor al pasar el mouse */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}


/* -----------------------------------------------------------------------------------
                                            FIN EMPRESAS
--------------------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------------
                                            FORMACION
--------------------------------------------------------------------------------------*/
/* Estilo caja titulo */

.container-titulo-formacion {
    padding-top: 0px;
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-formacion {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.formacion-cabecera {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 130px;
}

.formacion-cabecera h2 {
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    /* Previene saltos de línea */
    margin: 0;
}

.linea-formacion {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

/* Estilo cajas escuelas */

.contenedor-formacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* o center si prefieres centrado */
    gap: 30px;
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}


.formacion {
    height: 450px;
    /* Altura de la caja */
    flex: 0 1 calc(33.333% - 20px);
    /* 3 por fila contando el gap */
    background-color: var(--color-blanco);
    border-radius: 20px;
    padding: 20px 20px 50px;
    /* más alto por arriba y abajo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* sombra sutil */
    padding: 10px;
    text-align: center;

}

.formacion img {
    width: 100%;
    height: auto;
}

.contenedor-formacion h3 {
    font-size: 23px;
    /* Tamaño del texto */
    font-weight: 400;
    /* Peso de la fuente */
    text-align: center;
    /* Centra el texto */
    color: var(--color-principal);
    /* Color del texto */
}

.contenedor-formacion hr {
    align-items: center;
    /* Centra el elemento */
    width: 230px;
    /* Ancho de la línea */
    border: 0;
    /* Elimina el borde predeterminado */
    height: 1px;
    /* Grosor de la línea */
    border-bottom: 1px solid #eee;
    /* Color de la línea */
    margin: 0 auto;
    /* Espacio superior e inferior */
}

.contenedor-formacion p {
    max-width: 210px;
    /* Ancho máximo del texto */
    margin: 22px auto 0 auto;
    /* Agrega un margen superior de 10px */
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    /* Ajusta el tamaño del texto */
    font-weight: 100;
    text-align: center;
    /* Alinea el texto al centro */
    color: var(--color-secundario);
    /* Color del texto */
}

.contenedor-formacion img {
    padding-bottom: 50px;
    /* Espacio inferior */
    border-radius: 10px;
    /* Bordes redondeados */
    width: 100%;
    /* Ajusta el ancho para que ocupe todo el contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    object-fit: cover;
    /* Asegura que la imagen se ajuste al contenedor sin deformarse */
}

.formacion:hover {
    transform: translateY(-5px);
    /* Eleva ligeramente el contenedor al pasar el mouse */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}

/* ---------------------- */

.container-perspectivas {
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

.container-texto-perspectivas {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.perspectivas-cabecera {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 130px;
}

.perspectivas-cabecera h2 {
    margin-top: 50px;
    padding-bottom: 0px;
    font-size: 30px;
    color: var(--color-principal);
    white-space: nowrap;
    /* Previene saltos de línea */
    margin: 0;
}

.linea-perspectivas {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

.container-texto-perspectivas p {
    padding-bottom: 20px;
    padding-top: 15px;
    /* Espacio superior */
    max-width: 750px;
    justify-content: start;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    text-align: start;
    color: var(--color-secundario);
}


.container-texto-perspectivas li {
    max-width: 750px;
    justify-content: start;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 100;
    text-align: start;
    color: var(--color-secundario);
}


.contenido-perspectivas {
    margin-top: 22px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    /* espacio entre texto e imagen */
}

.contenido-perspectivas p {
    flex: 1;
    margin: 0;
}




strong {
    font-weight: bold !important;
    color: var(--color-negro);
}

.contenido-perspectivas img {
    margin-left: 0px;
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* sombra sutil */
    width: 450px;
    height: auto;
    object-fit: cover;
}

.contenido-perspectivas img:hover {
    transform: translateY(-5px);
    /* Eleva ligeramente el contenedor al pasar el mouse */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
}

.container-texto-perspectivas li::marker {
    color: var(--color-principal);
    /* Cambia el color de los puntos */
}





/* -----------------------------------------------------------------------------------
                                            FIN FORMACION
--------------------------------------------------------------------------------------*/


/* -----------------------------------------------------------------------------------
                                            CONTACTO
--------------------------------------------------------------------------------------*/
/* ---------------Contenido formulario----------------------------- */
/* -----------------------------------------------------------------------------------
                                            CONTACTO
--------------------------------------------------------------------------------------*/

/* Contenedor general */
.container-contacto {
    background-color: var(--color-fondo);
    width: 100%;
    height: auto;
}

/* Cabecera Contacto */
.contacto-cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 50px;
    margin-bottom: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.contacto-cabecera h2 {
    white-space: nowrap;
    margin: 0;
    font-size: 30px;
    color: var(--color-principal);
}

.linea-contacto {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-principal);
}

/* Contenido contacto: texto y formulario lado a lado */
.contenido-contacto {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    padding-bottom: 100px;
    align-items: stretch;
    /* hijos se estiran en altura */

}

/* Texto contacto */
.contenido-contacto p {
    padding-right: 90px;
    margin: 0;
    padding-top: 60px;
    font-size: 1.5rem;
    color: var(--color-principal);
    font-weight: 600;
    line-height: 1.2;
    font-family: var(--fuente-hero);
    text-transform: uppercase;
    text-align: center;
    order: 1;
    flex: 0 0 50%;
}

/* Formulario */
.contacto-form {
    max-width: 600px;
    padding-right: 20px;
    order: 2;
    flex: 0 0 50%;
    height: 100%;
    /* para estirarse */
    display: flex;
    flex-direction: column;
}

.contacto-form button {
    display: block;
    margin: 0 auto;
}

/* Inputs y textarea */
.contacto-form input,
.contacto-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid var(--color-principal);
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* Botón */
.boton-enviar {
    margin-top: 30px;
    width: 223px;
    height: 50px;
    background-image: url('/img/boton.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    color: var(--color-principal);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    align-self: flex-start;
}

.boton-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Contenido ubicación: texto a la izquierda, mapa a la derecha */
.contenido-ubicacion {
    padding-bottom: 100px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 300px;
    align-items: stretch;
    /* hijos se estiran en altura */
}

/* Texto ubicación alineado a la izquierda */
.ubicacion-texto {
    flex: 0 0 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 0 40px;
    text-align: left;
}

.ubicacion-texto p {
    padding-left: 30px;
    text-align: center;
    line-height: 0.6;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-principal);
    font-weight: 600;
    font-family: var(--fuente-hero);
    text-transform: uppercase;
    max-width: 600px;
    padding-bottom: 18px;
}

/* Mapa con borde marrón que se ajusta */
.ubicacion-mapa {
    border: 1px solid var(--color-principal);
    flex: 0 0 50%;
    height: 100%;
    /* que tome toda la altura del contenedor */
}

.ubicacion-mapa iframe {
    width: 100% !important;
    height: 100%;
    min-height: 250px;
    display: block;
    pointer-events: auto;
}

/* -----------------------------------------------------------------------------------
                                    VERSION RESPONSIVE tablet (iPad Pro)
--------------------------------------------------------------------------------------*/

@media screen and (min-width: 769px) and (max-width: 1024px) and (max-height: 1366px) {


    /* -------------HOME-----------------WELLCOME AREA------------------------------tablet (iPad Pro)--*/
    .mi-navbar .container-fluid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .mi-navbar .navbar-nav {
        flex-direction: column !important;
        align-items: center;
        gap: 1rem;
        padding-top: 1rem;
        background-color: var(--color-negro);
        width: 100%;
    }

    .navbar-collapse {
        display: none !important;
    }

    .navbar-collapse.show {
        display: block !important;
    }

    .texto-central-welcome {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 90%;
    }

    .welcome-container {
        height: 50vh;
    }


    .texto-central-welcome h1 {
        font-size: 4rem !important;
        margin: 0.5rem !important;
    }

    .texto-central-welcome h2 {
        font-size: 4.5rem !important;
        margin: 0 !important;
    }

    /* -------------HOME-----------------QUIERO SER BARISTA------------------------------tablet (iPad Pro)--*/

    .container-texto-barista {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 90%;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .linea-barista {
        display: none;
    }

    .barista-cabecera h2 {
        text-align: center;
        max-width: 100%;
        white-space: normal;
    }

    .container-texto-barista ul {
        list-style-position: inside;
        padding-left: 0;
        margin-left: 0;
    }

    .container-texto-barista li {
        padding-left: 0;
        text-indent: 1em;
    }


    /* -------------HOME-----------------MAS ESCUELAS------------------------------tablet (iPad Pro)--*/


    .escuelas-cabecera {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 90%;
        margin: 0 auto;
    }

    .escuelas-cabecera h2 {
        max-width: 90%;
        text-align: center;
        white-space: normal;
    }

    .contenedor-escuelas {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 55%;
        gap: 30px;
        margin: 0 auto;
        padding: 3rem 1rem;
    }

    /* -------------HOME-----------------RESEÑAS------------------------------tablet (iPad Pro)--*/

    .reseñas-container {
        width: 100%;
        position: relative;
    }

    .reseñas-cabecera {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .reseñas-cabecera h2 {
        max-width: 90%;
        text-align: center;
        white-space: normal;
        padding-bottom: 50px;
    }

    .linea-escuelas,
    .linea-reseñas {
        display: none;
    }

    .pre-btn {
        left: 0;
    }

    .nxt-btn {
        right: 0;
    }

    /* -------------HOME-----------------FOOTER------------------------------tablet (iPad Pro)--*/

    .footer-container {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        /* Espacio entre cajas */
    }

    .footer-container .box2 h3 {
        margin-bottom: 5px;
    }


    /* -------------SOBRE NOSOTROS-----------------SOBRE NOSOTROS------------------------------tablet (iPad Pro)--*/

    .contenido-nosotros img {
        width: 80% !important;
        max-width: 50% !important;
        height: auto !important;
    }

    .nosotros-cabecera {
        align-items: center;
        text-align: left;
    }

    .nosotros-cabecera h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        text-align: left;
    }

    .linea-nosotros {
        display: none;
    }



    /* -------------SOBRE NOSOTROS-----------------QUE HACEMOS------------------------------tablet (iPad Pro)--*/

    .contenido-quehacemos img {
        width: 80% !important;
        max-width: 50% !important;
        height: auto !important;
    }

    .quehacemos-cabecera {
        flex-direction: column;
        align-items: right;
    }

    .quehacemos-cabecera h2 {
        width: 100%;
        font-size: 1.8rem;
        font-size: 1.8rem;
        margin-bottom: 20px;
        text-align: right;
        padding-right: 226px;
    }

    .contenido-quehacemos p {
        width: 100%;
        text-align: justify;
    }

    .linea-quehacemos {
        display: none;
    }


    /* -------------EMPRESAS-----------------QUIERO MONTAR UNA CAFETERIA------------------------------tablet (iPad Pro)--*/

    .contenido-cafeteria img {
        width: 80% !important;
        max-width: 50% !important;
        height: auto !important;
    }

    .cafeteria-cabecera {
        align-items: center;
        text-align: left;
    }

    .cafeteria-cabecera h2 {
        font-size: 1.8rem;
        text-align: left;
    }


    .linea-cafeteria {
        display: none;
    }



    /* -------------EMPRESAS-------------------- NUESTRO CAFE------------------------------tablet (iPad Pro)--*/

    .contenido-nuestrocafe img {
        width: 80% !important;
        max-width: 50% !important;
        height: auto !important;
    }

    .nuestrocafe-cabecera {
        align-items: center;
        text-align: right;
    }

    .nuestrocafe-cabecera h2 {
        padding-right: 250px;
        width: 100%;
        font-size: 1.8rem;
        text-align: right;
    }

    .linea-nuestrocafe {
        display: none;
    }

    /* -------------FORMACIONES--------------------FORMACIONES------------------------------tablet (iPad Pro)--*/

    .formacion-cabecera {
        text-align: center;
        padding-bottom: 20px;
        margin: 0 auto;
    }

    .formacion-cabecera h2 {
        font-size: 1.8rem;
        margin: 0 auto;
        display: inline-block;
    }


    .container-texto-escuelas {
        margin: 0 auto;
        padding: 0 1rem;
    }

    .linea-formacion {
        display: none;
    }

    .contenedor-formacion {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px;
        max-width: 850px;
        margin: 0 auto;
        padding: 0;
    }

    .formacion {
        flex: 1 1 calc(50% - 25px);
        /* dos columnas con espacio entre ellas */
        max-width: calc(100% - 25px);
        height: auto;
        padding: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .contenedor-formacion p {
        padding-bottom: 40px;
        max-width: 400px;
        width: 80%;
    }

    /* -------------FORMACIONES--------------------PERSPECTIVAS------------------------------tablet (iPad Pro)--*/

    .container-perspectivas {
        flex-direction: column;
    }

    .perspectivas-cabecera {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .perspectivas-cabecera h2 {
        padding-bottom: 10px;
        font-size: 1.8rem;
        text-align: center;
    }

    .linea-perspectivas {
        display: none;
    }

    .contenido-perspectivas {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 30px;
        /* <-- el espacio entre texto e imagen */
        max-width: 1000px;
        text-align: left;
        margin: 0 auto;
        padding: 0rem;
        padding-bottom: 120px;
    }

    .contenido-perspectivas img {
        width: 50%;
        height: auto;
        display: block;
    }

    .texto-perspectivas {
        width: 50%;
    }


    /* ----------CONTACTO-----------FORMULARIO -----------------------tablet (iPad Pro)---*/

    .contenido-contacto {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 50px; /* espacio fijo */
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 2rem 4.3rem;
        box-sizing: border-box;
      }
    
      .contenido-contacto p {
        width: 100%;
        font-size: 1.5rem;
        text-align: center;
        line-height: 1.5;
        padding: 0;
        margin: 0;
      }
    
      .contacto-form {
        width: 30%;
        padding: 0;
        box-sizing: border-box;
      }
    
      .contacto-form .form-group {
        margin-bottom: 1.2rem;
      }
    
      .contacto-form button {
        margin-top: 0.5rem;
      }
    
      .contenido-ubicacion {
        margin-top: 3rem; /* espacio entre formulario y mapa */
      }

     /* ----------CONTACTO-----------UBICACION -----------------------tablet (iPad Pro)---*/

      .contenido-ubicacion {
        max-width: 1000px;
        padding: 0 1rem;
        box-sizing: border-box;
      }
    
      .ubicacion-texto {
        width: 50%;
        padding: 0;
        text-align: center;
        font-size: 1.1rem;
        line-height: 1.4;
        display: inline-block;
        vertical-align: top;
      }
    
      .ubicacion-mapa {
        margin: 0 auto;
        width: 100%;
        align-items: center;
        max-width: 435px;
        display: inline-block;
        vertical-align: top;
        border: 1px solid #c79c60;
        box-sizing: border-box;
        height: 300px;
        padding-bottom: 23rem;
      }
    
      .ubicacion-mapa iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
      }

      /* * --------------------desabilita el hover -----------------------tablet (iPad Pro)---*/ */

    *:hover:not(.pre-btn):not(.nxt-btn):not(.reseñas-info):not(.texto-central-welcome h2) {
        transform: none !important;
        filter: none !important;
        transition: none !important;
        box-shadow: none !important;
    }
}

/* -----------------------------------------------------------------------------------
                                FIN VERSION RESPONSIVE tablet (iPad Pro)
--------------------------------------------------------------------------------------*/




/* -----------------------------------------------------------------------------------
                                        VERSION RESPONSIVE tablet (iPad)
--------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) and (max-height: 1024px) {

    /* --------------------------------------WELLCOME AREA------------------------------tablet (iPad)--*/

    .mi-navbar .navbar-nav {
        flex-direction: column !important;
        width: 100%;
    }

    .navbar-collapse {
        display: none !important;
    }

    .navbar-collapse.show {
        display: block !important;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .welcome-container {
        height: 70vh;
    }

    .texto-central-welcome {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 90%;
    }

    .texto-central-welcome h1 {
        font-size: 3rem;
        margin: 0.5rem 0;
    }

    .texto-central-welcome h2 {
        font-size: 1.5rem;
        margin: 0;
    }

    /* -----------HOME---------------Seccion Quiero ser barista-------------------------tablet (iPad)-*/

    .container-texto-barista {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .container-texto-barista p {
        width: 80%;
        max-width: 550px;
    }

    .linea-barista {
        display: none;
    }



    /* -----------HOME---------------Seccion Mas Escuelas------------------------tablet (iPad)--*/

    .container-texto-escuelas {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .container-texto-escuelas p {
        max-width: 550px;
    }

    .escuelas-cabecera {
        max-width: 700px;
        margin: 0 auto;
    }

    .escuelas-cabecera h2 {
        white-space: normal;
    }

    .reseñas-cabecera {
        max-width: 700px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .linea-escuelas {
        display: none;
    }

    .contenedor-escuelas {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        /* o center si quieres centrar verticalmente también */
        gap: 20px;
    }

    .escuela {
        width: 80%;
        max-width: 400px;
        text-align: center;
        margin: 0 auto;
        flex: 1 1 100%;
    }

    /* -----------HOME---------------Seccion Reseñas-----------------------tablet (iPad)---*/


    .reseñas-cabecera {
        max-width: 700px;
        margin: 0 auto;
    }

    .reseñas-cabecera h2 {
        padding-top: 50px;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .linea-reseñas {
        display: none;
    }

    .pre-btn {
        left: 0px;
    }

    .nxt-btn {
        right: 0px;
    }

    /* -----------HOME---------------Seccion Fotter-----------------------tablet (iPad)---*/

    .footer-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* reparte el espacio */
        align-items: flex-start;
        gap: 20px;
    }

    .footer-container .box1,
    .footer-container .box2,
    .footer-container .box3 {
        flex: 1;
    }

    .footer-container .box2 h3 {
        margin-bottom: 20px;
    }

    /* ----------NOSOTROS---------------Seccion Nosotros-----------------------tablet (iPad)---*/

    .contenido-nosotros img {
        padding-top: 20px !important;
        float: none;
        display: block;
        width: 55%;
        max-width: 600px;
        height: auto;
        margin: 0 auto;
    }

    .contenido-nosotros {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contenido-nosotros p {
        order: 2;
        text-align: justify;
        max-width: 75% !important;

    }

    .nosotros-cabecera h2 {
        margin: 0 auto;
        font-size: 1.8rem;
    }

    .linea-nosotros {
        display: none;
    }


    /* ----------NOSOTROS---------------Seccion Que hacemos?-----------------------tablet (iPad)---*/

    .contenido-quehacemos img {
        padding-top: 20px !important;
        float: none;
        display: block;
        width: 55%;
        max-width: 600px;
        height: auto;
        margin: 0 auto;
    }

    .contenido-quehacemos {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .quehacemos-cabecera h2 {
        margin: 0 auto;
        font-size: 1.8rem;
    }

    .contenido-quehacemos p {
        order: 2;
        text-align: justify;
        max-width: 75% !important;
    }

    .linea-quehacemos {
        display: none;
    }





    /* ----------NOSOTROS---------------Seccion Quiero montar una cafeteria-----------------------tablet (iPad)---*/

    .contenido-cafeteria {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contenido-cafeteria img {
        order: 1;
        width: 87%;
        max-width: 400px;
        height: auto;
        margin-bottom: 1rem;
    }

    .texto-cafeteria {
        order: 2;
        width: 75%;
        max-width: 600px;
        text-align: justify;
        /* o left si prefieres */

    }

    .texto-cafeteria p,
    .texto-cafeteria ul {
        font-size: 1rem;
        line-height: 1.6;
        padding: 0;
    }

    .cafeteria-cabecera h2 {
        font-size: 1.8rem;
        max-width: 250px;
        white-space: normal;
        margin: 0 auto;
        text-align: center;
    }

    .linea-cafeteria {
        display: none;
    }

    /* ----------NOSOTROS---------------Seccion Nuestro cafe-----------------------tablet (iPad)---*/

    .container-texto-nuestrocafe {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
        text-align: center;
    }

    .contenido-nuestrocafe {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contenido-nuestrocafe p {
        order: 1;
        width: 72%;
        max-width: 600px;
        margin: 0 auto;
        padding: 0;
        line-height: 1.6;
    }

    .contenido-nuestrocafe img {
        order: 1;
        float: none;
        display: block;
        width: 90%;
        max-width: 400px;
        height: auto;
        margin: 0 auto;
        border-radius: 8px;
    }

    .nuestrocafe-cabecera h2 {
        font-size: 1.8rem;
        max-width: 250px;
        white-space: normal;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 10px;
    }

    .linea-nuestrocafe {
        display: none;
    }

    /* ----------FOOTER---------------Seccion Footer-----------------------tablet (iPad)---*/

    .footer-container {
        display: flex;
        flex-direction: row;
        /* ✅ Pone los box en línea */
        justify-content: space-between;
        /* ✅ Reparte el espacio */
        align-items: flex-start;
        padding-left: 50px;
        /* más razonable en tablet */
        padding-right: 50px;
        gap: 20px;
    }

    .footer-container .box1,
    .footer-container .box2,
    .footer-container .box3 {
        flex: 1;
        min-width: 0;
        /* Evita desbordamiento si el texto es largo */
    }

    .footer-container .box2 h3,
    .footer-container .box3 h3 {
        margin-top: 25px;
        margin-bottom: 0.5rem;
    }

    .footer-container .box2 p {
        margin-bottom: 0.3rem;
    }

    .footer-container .box3 p {
        margin-top: 0;
        margin-bottom: 0.6rem;
    }


    /* ----------FORMACION-----------Seccion Formaciones-----------------------tablet (iPad)---*/



    .formacion-cabecera {
        padding-bottom: 0;
    }

    .contenedor-formacion {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 90%;
        max-width: 800px;
        margin: 0 auto;
        padding: 1rem;
    }

    .formacion p {
        max-width: 300px;
    }

    .formacion {
        flex: 1 1 calc(50% - 5px);
        height: 500px;
        width: 70%;
        max-width: 400px;
        box-sizing: border-box;
        padding: 1rem;
        text-align: center;
    }

    /* ----------FORMACION-----------Seccion Perspectiva-----------------------tablet (iPad)---*/

    .linea-perspectivas {
        display: none;
    }

    .contenido-perspectivas {
        margin: 0 auto;
        flex-direction: column;
    }

    .contenido-perspectivas img {
        padding-top: 10px;
        margin: 0 auto;
        width: 100%;
        max-width: 400px;
        margin-bottom: 1.5rem;
    }

    .texto-perspectivas {
        width: 76%;
        max-width: 600px;
        margin: 0 auto;
        text-align: justify;
    }


    .perspectivas-cabecera h2 {
        padding-bottom: 10px;
        text-align: center;
        margin: 0 auto;
        white-space: normal;
        font-size: 1.8rem;
    }

    .texto-perspectivas li {
        margin-bottom: 0.75rem;
    }

    /* ----------CONTACTO-----------Seccion Formulario-----------------------tablet (iPad)---*/
    
    .linea-contacto{
        display: none;
    }

    .contacto-cabecera{
        justify-content: center;
        margin: 0 auto;
        align-items: center;
        margin-bottom: 3rem;
    }

    .contenido-contacto {
        flex-direction: column;
        width: 100vw;
        /* ✅ Ocupa todo el ancho del viewport */
        max-width: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .contacto-form .form-group {
        margin-bottom: 1rem;
    }

    .contacto-form button {
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .contacto-form {
        width: 76vw;
        /* ✅ Igual que el mapa */
        max-width: none;
        margin: 0 auto;
        padding: 1rem;
        /* ✅ Espaciado interno */
        box-sizing: border-box;
    }

    .contenido-contacto p {
        width: 100%;
        padding: 0 1rem;
        margin: 0 auto 1rem;
        text-align: center;
    }

    .ubicacion-texto{
        margin-bottom: 1rem;
    }


    /* ----------CONTACTO-----------Seccion Ubicacion-----------------------tablet (iPad)---*/


    .contenido-ubicacion {
        flex-direction: column;
        width: 73%;
        max-width: 600px;
    }

    .ubicacion-mapa {
        width: 99%;
        max-width: 800px;
        padding: 0 0rem;
        margin: 0 auto;
        border: 1px solid #c79c60;
    }

    .contenido-ubicacion p {
        width: 100%;
        max-width: 380px;
        padding: 20 1.5rem;
        margin: 0 auto;
    }


    /* ----------CONTACTO-----------desabilita el hover -----------------------tablet (iPad)---*/


    *:hover:not(.pre-btn):not(.nxt-btn):not(.reseñas-info):not(.texto-central-welcome h2) {
        transform: none !important;
        filter: none !important;
        transition: none !important;
        box-shadow: none !important;
    }


}

/* -----------------------------------------------------------------------------------
                                    FIN VERSION RESPONSIVE tablet (iPad)
--------------------------------------------------------------------------------------*/



/* -----------------------------------------------------------------------------------
                                            VERSION RESPONSIVE mobile (Iphone 12 pro)
--------------------------------------------------------------------------------------*/
/* Responsive para móvil */
@media screen and (max-width: 390px) and (max-height: 844px) {


    /* -------------HOME-----------------WELLCOME AREA------------------------------(Iphone 12 pro)--*/
    .texto-central-welcome h1 {
        font-size: 3rem !important;
        margin: 0.5rem !important;
    }

    .texto-central-welcome h2 {
        font-size: 3.5rem !important;
        margin: 0 !important;
    }

    /* -----------HOME---------------Seccion Quiero ser barista------------------------(Iphone 12 pro)--*/
    .container-texto-barista {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        padding: 0 1rem;
        margin: 0 auto;
    }

    .container-texto-barista h2 {
        white-space: normal;
        max-width: 250px;
        /* Ajusta según el diseño */
        text-align: center;
        margin: 0 auto 1rem auto;
    }

    .container-texto-barista img {
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

    .container-texto-barista p,
    .container-texto-barista ul {
        width: 100%;
        font-size: 1rem;
        line-height: 1.6;
        padding: 0;
        margin-bottom: 1rem;
    }

    .container-texto-barista {
        padding-bottom: 30px;
    }

    .container-texto-barista ul {
        list-style-position: inside;
        /* alinea el punto con el texto */
    }

    .container-texto-barista li {
        margin-bottom: 0.5rem;
        padding-left: 0;
    }

    .container-texto-barista a {
        display: block;
        margin: 0 auto;
        padding: 0.75rem 1.5rem;
        text-align: center;
    }


    /* -------------HOME--------------Seccion Mas Escuelas-----------------------(Iphone 12 pro)---*/

    .contenedor-escuelas {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    /* -------------HOME--------------Seccion Alumnos-----------------------------(Iphone 12 pro)-*/
    .reseñas-cabecera h2 {
        padding-top: 50px;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    /* -------------HOME--------------Seccion Footer-------------------------------(Iphone 12 pro)-*/

    .footer-container {
        padding-right: 50px;
        padding-left: 50px;
        margin-top: 2rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-container .box1,
    .footer-container .box2,
    .footer-container .box3 {
        align-items: center;
    }

    /* -------NOSOTROS--------------Seccion Nosotros----------------------------(Iphone 12 pro)-*/

    .contenido-nosotros {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contenido-nosotros img {
        width: 88% !important;
        max-width: 350px !important;
        height: auto !important;
    }

    .texto-nosotros {
        width: 100% !important;
        text-align: center;
    }

    .contenido-nosotros p {
        order: 2;
        width: 89% !important;
        max-width: 350px !important;
    }

    .nosotros-cabecera {
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 0.5rem;

    }

    .quehacemos-nosotros h2 {
        padding-top: 50px;
        margin: 0 auto;
    }

    .linea-nosotros {
        display: none;
    }


    /* -------NOSOTROS--------------Seccion Que hacemos----------------------------(Iphone 12 pro)-*/

    .container-texto-quehacemos {
        max-width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* centra contenido horizontalmente */
    }

    .contenido-quehacemos {
        display: flex;
        flex-direction: column;
        /* columna: imagen arriba, texto abajo */
        align-items: center;
    }

    .contenido-quehacemos img {
        width: 89% !important;
        max-width: 350px !important;
        height: auto !important;
    }

    .contenido-quehacemos p {
        order: 2;
        width: 90% !important;
        max-width: 350px !important;
        padding-bottom: 50px !important;
    }

    .quehacemos-cabecera {
        padding: 1rem;
        justify-content: center !important;
        text-align: center !important;
    }

    .quehacemos-cabecera h2 {
        padding-top: 50px;
        margin: 0 auto;
    }

    .linea-quehacemos {
        display: none;
    }


    /* -------EMPRESAS--------------Seccion Quiero montar una cafeteria--------------------------(Iphone 12 pro)--*/

    .contenido-cafeteria {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contenido-cafeteria img {
        order: 1;
        width: 87%;
        max-width: 400px;
        height: auto;
        margin-bottom: 1rem;
    }

    .texto-cafeteria {
        order: 2;
        width: 87%;
        max-width: 400px;
        text-align: justify;
        /* o left si prefieres */

    }

    .texto-cafeteria p,
    .texto-cafeteria ul {
        font-size: 1rem;
        line-height: 1.6;
        padding: 0;
    }

    .cafeteria-cabecera h2 {
        font-size: 1.8rem;
        max-width: 250px;
        white-space: normal;
        margin: 0 auto;
        text-align: center;
    }

    .linea-cafeteria {
        display: none;
    }


    /* -------EMPRESAS--------------Seccion Nuestro Cafe--------------------------(Iphone 12 pro)---*/

    .container-texto-nuestrocafe {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
        text-align: center;
    }

    .contenido-nuestrocafe {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contenido-nuestrocafe p {
        order: 1;
        width: 80%;
        max-width: 400px;
        margin: 0 auto 1rem auto;
        padding: 0;
        line-height: 1.6;
    }

    .contenido-nuestrocafe img {
        order: 1;
        float: none;
        display: block;
        width: 90%;
        max-width: 310px;
        height: auto;
        margin: 0 auto;
        border-radius: 8px;
    }

    .nuestrocafe-cabecera h2 {
        font-size: 1.8rem;
        max-width: 250px;
        white-space: normal;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 10px;
    }

    .linea-nuestrocafe {
        display: none;
    }

    /* -------FORMACION--------------Seccion Formacion-------------------------(Iphone 12 pro)----*/

    .container-texto-escuelas {
        max-width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
        text-align: center;
    }

    .formacion {
        width: 100%;
        height: auto;
        max-width: 320px;
        text-align: center;
    }

    .formacion img {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 295px !important;
        height: auto !important;
        margin: 0 auto;
        border-radius: 8px;
    }

    .formacion p {
        padding-top: 10px;
        max-width: 220px !important;
        width: 90% !important;
        margin: 0 auto;
        padding-top: 18px;
        padding-bottom: 50px;
    }

    .escuelas-cabecera h2 {
        font-size: 1.8rem;
    }





    /* -------FORMACION--------------Seccion Perspectivas Laborales------------------(Iphone 12 pro)---*/

    .container-texto-perspectivas {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
        text-align: justify;
    }

    .contenido-perspectivas {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .contenido-perspectivas img {
        width: 80% !important;
        max-width: 380px !important;
        height: auto !important;
        display: block !important;
        border-radius: 8px !important;
    }

    .texto-perspectivas {
        width: 100%;
        max-width: 89%;
        padding: 0 1rem;
        margin: 0 auto;
    }

    .texto-perspectivas p,
    .texto-perspectivas ul {
        line-height: 1.6;
    }

    .texto-perspectivas li {
        margin-bottom: 0.5rem;
    }

    .perspectivas-cabecera h2 {
        margin: 0 auto;
        font-size: 1.8rem;
    }

    .linea-perspectivas {
        display: none;
    }

    /* -------contacto--------------Seccion contacto---------------------------------(Iphone 12 pro)--*/

    .container-contacto {
        margin: 0;
        padding: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }


    .container-texto-contacto,
    .contenido-contacto,
    .contenido-ubicacion {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: 1rem;
        gap: 1.5rem;
    }

    /* Centrado del texto p */
    .contenido-contacto p {
        margin: 0 auto;
        padding: 0 1rem;
        line-height: 1.4;
        font-size: 1.1rem;
        margin-bottom: 1rem;
        text-align: center;
        width: 100%;
    }

    .contacto-form {
        width: 98%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .contacto-form input,
    .contacto-form textarea {
        max-width: 700px;
        width: 100%;
        margin-bottom: 1rem;
        font-size: 1rem;
        box-sizing: border-box;
    }

    .contacto-form button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        cursor: pointer;
        width: 100%;
        max-width: 223px;
        margin: 0 auto;
    }

    .contenido-contacto {
        font-size: 1.8rem;
    }

    /* -------contacto--------------Seccion Ubicacion-------------------------------(Iphone 12 pro)----*/


    .wrapper-ubicacion {
        width: 100vw;
        /* ✅ 100% del ancho del dispositivo */
        margin: 0;
        padding: 1rem 0;
        box-sizing: border-box;
    }

    .ubicacion-texto p {
        font-size: 1.1rem;
        line-height: 1.4;
        text-align: center;
        margin: 0 auto 1rem;
        padding: 0 1rem;
        /* ✅ margen visual en los lados */
    }

    .ubicacion-mapa {
        width: 82vw;
        /* ✅ ocupa toda la pantalla */
        margin: 0;
        border: 1px solid #c79c60;
        box-sizing: border-box;
    }

    .ubicacion-mapa iframe {
        width: 100%;
        height: 300px;
        display: block;
        border: none;
    }

    .contacto-cabecera{
        margin-bottom: 1rem;
    }






    /* ----------CONTACTO-----------desabilita el hover -----------------------(Iphone 12 pro)--*/


    *:hover:not(.pre-btn):not(.nxt-btn):not(.reseñas-info):not(.texto-central-welcome h2) {
        transform: none !important;
        filter: none !important;
        transition: none !important;
        box-shadow: none !important;
    }


}



/* -----------------------------------------------------------------------------------
                                         FIN VERSION RESPONSIVE mobile (Iphone 12 pro)
--------------------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------------
                                            FIN VERSION RESPONSIVE
--------------------------------------------------------------------------------------*/