/* ============================================================
   IMPORTACIÓN DE LIBRERÍAS Y FUENTES EXTERNAS
   ============================================================ */

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

/* Aquí se juntan Cabin Sketch, Cormorant Garamond y DM Sans de forma óptima */
@import url("https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap");

/*ESTA ES LA FUENTE IMPORTADA*/
.cabin-sketch-regular {
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.cabin-sketch-bold {
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/* ===== VARIABLES GLOBALES ===== */
:root {
    /* Colores principales */
    --color-negro:        #161616;
    --color-blanco:       #ffffff;
    --color-gris-claro:   #f5f5f3;
    --color-gris-medio:   #888888;
    --color-dorado:       #cda216;      /* Acento Tutti Huasi */
    --color-oscuro-nav:   rgba(10, 10, 10, 0.55); /* Fondo navbar */
    --color-rojo:         #8e181d;      /*Tambien acento Tutti Huasi*/
    --color-verde:        #255638;      /*Verde de Tutti Huasi*/
    --color-celeste:      #37b1cc;      /*Celeste Tutti Huasi*/

    --imagen-navbar: url('../img/encabezado/header_encabezado_header.webp'); /* Fondo de encabezado */
    /* Tipografías IMPORTADA DE GOOGLE FONTS Cabin Sketch */
    --fuente-titulo: "Cabin Sketch", sans-serif;
    --fuente-cuerpo: "Cabin Sketch", sans-serif;

    /* Espaciados */
    --espacio-seccion: 6rem;

    /* Transiciones */
    --transicion: 0.3s ease;
}


/* ===== RESET BÁSICO ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Esto hará  Prohibir el scroll horizontal */
}

/* ===== ESTILOS GENERALES ===== */
html {
    scroll-behavior: smooth; /* Scroll suave al hacer clic en anclas */
}

body {
    font-family: var(--fuente-cuerpo);
    color: var(--color-negro);
    background-color: var(--color-blanco);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 300;
}


/* ===== TIPOGRAFÍA GLOBAL ===== */

/* Todos los títulos usan la fuente artística serif */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulo);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-negro);
}

p {
    font-family: var(--fuente-cuerpo);
    font-weight: 300;
    color: #333;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transicion);
}

img {
    max-width: 100%;
    display: block;
}


/* ===== ETIQUETA DE SECCIÓN ===== */
/* Pequeño texto en mayúsculas que aparece sobre los títulos */
.etiqueta-seccion {
    font-family: var(--fuente-cuerpo);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-dorado);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Versión clara (para fondos oscuros) */
.etiqueta-clara {
    color: rgba(255, 255, 255, 0.6);
}


/* ===== TÍTULO DE SECCIÓN REUTILIZABLE ===== */
.titulo-seccion {
    font-family: var(--fuente-titulo);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--color-negro);
    margin-bottom: 1.5rem;
}


/* ===== BOTÓN SECUNDARIO REUTILIZABLE ===== */
.btn-secundario {
    display: inline-block;
    font-family: var(--fuente-cuerpo);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-negro);
    border-bottom: 1px solid var(--color-negro);
    padding-bottom: 2px;
    transition: var(--transicion);
}

.btn-secundario:hover {
    color: var(--color-dorado);
    border-color: var(--color-dorado);
}

/* ============================================================
   COMPONENTES DE PROGRAMAS Y WHATSAPP
   ============================================================ */

/* Botón de WhatsApp con sombra verde al hover */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fuente-cuerpo);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: #25d366 !important;
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    text-shadow: 0 0 5px rgba(37, 211, 102, 0.2);
    filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.5));
    transform: translateY(-1px);
}

/* Cajas estáticas de la Sidebar */
.sidebar-info-programas {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.caja-programa {
    padding: 2.2rem;
    background: var(--color-gris-claro);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Títulos y textos de las cajas */
.caja-programa .titulo-caja {
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--color-negro);
}

.caja-programa .texto-caja {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-gris-medio);
    font-weight: 300;
    margin: 0;
}

/* ============================================================
NAVBAR / ENCABEZADO
Fondo oscuro semitransparente — flota sobre el hero
============================================================ */

/* Header: flota sobre el hero al inicio, luego sigue al usuario */
.header-principal {
    position: fixed;        /* Siempre visible al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: background 0.4s ease;
}

/* Barra de navegación */
.barra-menu {
    background: var(--color-oscuro-nav);    /* Color de respaldo si la imagen no carga */
    background-image: var(--imagen-navbar); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), var(--imagen-navbar);
}

/* Contenedor interior del navbar */
.header-container {
    width: 100%;
    padding: 0 2rem;
}

/* Logo */
.logo_tuttihuasi img {
    transition: opacity var(--transicion);
}
.logo_tuttihuasi:hover img {
    opacity: 0.8;
}

/* Links de navegación */
.nav-enlace {
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.3rem 0.75rem !important; /* 👈 padding lateral agregado */
    position: relative;
    transition: color var(--transicion) !important;
}

/* Línea animada bajo los links al pasar el mouse */
.nav-enlace::after {
    content: '';
    position: absolute;
    bottom: -1.9rem; /* 👈 mismo valor que el margin-top del dropdown */
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-dorado);
    transition: width var(--transicion);
}

.nav-enlace:hover {
    color: var(--color-blanco) !important;
}

.nav-enlace:hover::after {
    width: 100%;
}

/* Dropdown menu */
.menu-dropdown {
    background: var(--color-negro) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    min-width: 200px;
}

/* Items del dropdown */
.item-dropdown {
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.82rem !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.6rem 1.2rem !important;
    letter-spacing: 0.04em;
    transition: background var(--transicion) !important;
}

.item-dropdown:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-blanco) !important;
}

/* Botón Donar */
.btn-donar {
    font-family: var(--fuente-cuerpo) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    font-weight: 500 !important;
    color: var(--color-negro) !important;
    background: var(--color-dorado) !important;
    border: none !important;
    padding: 0.45rem 1.2rem !important;
    border-radius: 0 !important;
    transition: background var(--transicion) !important;
}

.btn-donar:hover {
    background: #e6b818 !important;
    color: var(--color-negro) !important;
}

/* Botones icono (modo oscuro / idioma) */
.btn-icono {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 0.85rem !important;
    transition: border-color var(--transicion) !important;
}

.btn-icono:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: var(--color-blanco) !important;
}

/* ===== DROPDOWN AL HOVER (Programas y Talleres) ===== */
.carreras-hover {
    position: relative;/* 👈 extiende el área hover hacia abajo */
}

.carreras-hover:hover .dropdown-menu {
    display: block;
    margin-top: 1.9rem; /* 👈 ya no necesita margin, el padding del padre lo separa */
}

/* Línea dorada: se mantiene también cuando el dropdown está abierto */
.carreras-hover:hover .nav-enlace::after {
    width: 100%;
}
/* Flecha del dropdown — transición suave */
.carreras-hover .bi-chevron-down {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Al pasar el mouse: flecha girada y color dorado */
.carreras-hover:hover .bi-chevron-down {
    transform: rotate(180deg);
    color: var(--color-dorado);
}

/* ============================================================
CORRECCIONES EXCLUSIVAS PARA MÓVILES (Navbar)
============================================================ */

@media (max-width: 991.98px) {
    /* 1. Permitimos que el contenedor salte de línea */
    .header-container {
        flex-wrap: wrap !important;
    }

    /* 2. Forzamos que el menú desplegable ocupe todo el ancho debajo del logo */
    .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        text-align: center; /* Centra los links */
        padding-top: 1rem;
    }

    /* 3. Estilos de la lista de navegación */
    .navbar-nav {
        margin-bottom: 1.5rem !important;
        padding-left: 0;
    }

    .nav-item {
        width: 100%;
        margin: 10px 0;
    }

    /* 4. Quitamos el borde dorado (línea animada) en móviles */
    .nav-enlace::after {
        display: none !important;
    }

    /* 5. Ajuste de los botones de acción */
    .nav-botones {
        flex-direction: row; /* Mantiene los botones en línea */
        justify-content: center; /* Los centra debajo de los links */
        width: 100%;
        padding-bottom: 1.5rem;
        gap: 1rem !important;
    }

    /* Aseguramos que el botón de hamburguesa no se mueva */
    .navbar-toggler {
        margin-left: auto;
    }
}

/* ============================================================
FOOTER
Fondo oscuro, texto blanco apagado
============================================================ */

.footer-tutti {
    background: var(--color-negro);
    color: rgba(255, 255, 255, 0.6);
}

/* Logo del footer */
.footer-logo {
    max-width: 180px;
    opacity: 0.9;
}

/* Iconos de redes sociales */
.footer-redes {
    display: flex;
    gap: 1rem;
}

.footer-redes a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    transition: color var(--transicion);
}

.footer-redes a:hover {
    color: var(--color-dorado);
}

/* Info de contacto */
.footer-contacto p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.2rem;
}

/* Títulos de columna */
.footer-titulo-col {
    font-family: var(--fuente-cuerpo);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Links del footer */
.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    transition: color var(--transicion);
    text-decoration: none;
    font-family: var(--fuente-cuerpo);
}

.footer-links a:hover {
    color: var(--color-dorado);
}

/* Botón Informes */
.btn-informes {
    font-family: var(--fuente-cuerpo);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-negro);
    background: var(--color-dorado);
    padding: 0.5rem 1.5rem;
    border-radius: 0;
    transition: background var(--transicion);
    text-decoration: none;
}

.btn-informes:hover {
    background: #e6b818;
    color: var(--color-negro);
}

/* Links legales */
.footer-legal a {
    font-size: 0.8rem;
}

/* Línea divisoria */
.footer-hr {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Copyright */
.footer-copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

@media (max-width: 998.98px){
    .footer-tutti {
        display: flex;
        flex-direction: column; /* Apila los elementos uno debajo de otro */
        justify-content: center; /* Centra verticalmente (si hay altura definida) */
        align-items: center;    /* Centra horizontalmente */
        text-align: center;     /* Asegura que el texto interno también se centre */
    }

    .footer-logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* 2. Centrar el contenedor de Redes Sociales */
    .footer-redes {
        display: flex;         /* Convertimos el div de redes en flex */
        justify-content: center; /* Centramos los iconos horizontalmente */
        gap: 1rem;            /* Espaciado entre iconos */
        width: 100%;
        margin-bottom: 1rem;
    }

    .footer-tutti .col-lg-4, 
    .footer-tutti .col-lg-2, 
    .footer-tutti .col-lg-3 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }
}