/* ============================= */
/* RESET Y VARIABLES */
/* ============================= */

body {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
}

h1, h2, h3,
button, a {
  font-family: "Quicksand", sans-serif;
}

h1, h2, h3 {
  font-weight: 700;
}

button, a {
  font-weight: 600;
}

:root {
  --primary-red: #e62017;
  --primary-yellow: #ffcc00;
  --dark: #111;
  --light: #fff;
  --gray: #f5f5f5;
  --transition: 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* =========================================
   NAVBAR MINDFULL
========================================= */

.mindfull-navbar {
    width: 100%;
	background-color: #539ed5;

    position: absolute;
    top: 0;
    left: 0;

    z-index: 1000;

    padding: 25px 40px;

    box-sizing: border-box;
}


/* =========================================
   CONTENEDOR
========================================= */

.mindfull-nav-container {

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* =========================================
   LOGO
========================================= */

.Tuboleta-logo {
    display: flex;
    align-items: center;
}

.Tuboleta-logo a {
    display: block;
}

.Tuboleta-logo img {

    display: block;

    width: 180px;
    height: auto;

    max-width: 100%;
}


/* =========================================
   NAVEGACIÓN DESKTOP
========================================= */

.mindfull-nav {

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}


/* =========================================
   CUADROS DEL NAVBAR
========================================= */

.mindfull-nav-box {

    min-width: 150px;
    height: 55px;

    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 8px;

    color: #ffffff;

    background: rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition: all 0.3s ease;
}


/* TEXTO */

.mindfull-nav-box span {

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 1px;

    text-align: center;

    white-space: nowrap;
}


/* HOVER */

.mindfull-nav-box:hover {

    background: #ffffff;

    color: #000000;

    transform: translateY(-2px);
}


/* =========================================
   BOTÓN HAMBURGUESA
========================================= */

.mindfull-menu-toggle {

    display: none;

    width: 45px;
    height: 45px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 7px;

    background: rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    transition: all 0.3s ease;
}


/* LÍNEAS */

.mindfull-menu-toggle span {

    display: block;

    width: 22px;
    height: 2px;

    background: #ffffff;

    border-radius: 2px;

    transition: all 0.3s ease;
}


/* HOVER */

.mindfull-menu-toggle:hover {

    background: #ffffff;
}

.mindfull-menu-toggle:hover span {

    background: #000000;
}


/* =========================================
   ANIMACIÓN HAMBURGUESA → X
========================================= */

.mindfull-menu-toggle.active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);
}

.mindfull-menu-toggle.active span:nth-child(2) {

    opacity: 0;
}

.mindfull-menu-toggle.active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================
   HERO
========================================= */

.mindfull-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding: 100px 40px 80px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    /* IMAGEN DE FONDO */

    background-image: url("../img/Fondo-Hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================
   CONTENIDO
========================================= */

.mindfull-section-content {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================
   LOGO CENTRAL
========================================= */

.mindfull-center-logo {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 60px;
	
	margin-top: 60px;
}


.mindfull-center-logo img {

    display: block;

    width: min(2500px, 55vw);

    height: auto;

    object-fit: contain;

    /* FLOTACIÓN */

    animation: mindfullLogoFloat 5s ease-in-out infinite;

    filter: drop-shadow(
        0 15px 25px rgba(0, 0, 0, 0.35)
    );
}


/* =========================================
   ANIMACIÓN LOGO
========================================= */

@keyframes mindfullLogoFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =========================================
   FILAS DE BOTONES
========================================= */

.mindfull-buttons-row {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================
   BOTONES
========================================= */

.mindfull-button {

    min-width: 230px;
    height: 65px;
    padding: 0 36px;
	margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    color: #6da3d6;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    border: 2px solid #b5b2d8;
    border-radius: 8px;
    background-color: #fbeca7;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}


/* HOVER */

.mindfull-button:hover {

    color: #000000;

    background: #ffffff;

    transform: translateY(-3px);

}


/* =========================================
   GALERÍA
========================================= */

.mindfull-images {

    width: 100%;

    margin-top: 55px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/* =========================================
   IMÁGENES
========================================= */

.mindfull-image-item {

    width: 70%;

    border-radius: 10px;
	
	align-content: center;
}


.mindfull-image-item img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

/* =========================================
   CINTA MINDFULL
========================================= */

.mindfull-tape {

    /* ==============================
       COLORES EDITABLES
    ============================== */

    --tape-background: #FBEEB0;
    --tape-text: #59A4E0;


    width: 100%;

    /* ALTURA DE LA CINTA */

    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--tape-background);

}


/* =========================================
   CONTENIDO
========================================= */

.mindfull-tape-content {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
    padding: 0 30px;
    box-sizing: border-box;
    color: var(--tape-text);

}


/* =========================================
   PALABRAS
========================================= */

.mindfull-tape-content span {

    flex-shrink: 0;

    color: var(--tape-text);

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 2px;

    line-height: 1;

    white-space: nowrap;

}


/* =========================================
   SEPARADOR VISUAL
========================================= */

.mindfull-tape-content span::after {

    content: "✦";

    margin-left: 55px;

    opacity: 0.8;

}

/* =========================================
   MÁS INFORMACIÓN
========================================= */

.mindfull-info {

    width: 100%;

    min-height: 700px;

    padding: 100px 40px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;


    /* ==============================
       FONDO EDITABLE
    ============================== */

    background-image: url("../img/Fondo-Mas-Informacion.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================
   CONTENEDOR GENERAL
========================================= */

.mindfull-info-container {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================
   IMAGEN SUPERIOR / TÍTULO
========================================= */

.mindfull-info-header {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 60px;
}


.mindfull-info-header img {

    display: block;

    width: min(500px, 70vw);

    height: auto;

    object-fit: contain;

    /* Pequeña flotación */

    animation: mindfullHeaderFloat 5s ease-in-out infinite;
}


/* =========================================
   ANIMACIÓN IMAGEN SUPERIOR
========================================= */

@keyframes mindfullHeaderFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =========================================
   CONTENIDO IMAGEN + TEXTO
========================================= */

.mindfull-info-content {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 40px;
}


/* =========================================
   IMAGEN
========================================= */

.mindfull-info-image {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;
}


.mindfull-info-image img {

    display: block;

    width: 100%;

    max-width: 450px;

    height: auto;

    object-fit: cover;

    border-radius: 12px;

    transition: transform 0.5s ease;
}


/* HOVER */

.mindfull-info-image img:hover {

    transform: scale(1.02);
}


/* =========================================
   TEXTO
========================================= */

.mindfull-info-text {

    color: #ac7362;

    max-width: 550px;
}


/* TÍTULO */

.mindfull-info-text h2 {

    margin: 0 0 25px;

    font-size: 42px;

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: 1px;
	
	text-align: center;
}


/* PÁRRAFOS */

.mindfull-info-text p {

    margin: 0 0 20px;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 400;
}

/* =========================================
   PRECIOS
========================================= */

.mindfull-tickets {

    position: relative;

    width: 100%;

    min-height: 800px;

    padding: 100px 40px 90px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;


    /* =====================================
       FONDO EDITABLE
    ===================================== */

    background-image: url("../img/Fondo-Precios.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================
   CONTENEDOR
========================================= */

.mindfull-tickets-container {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================
   TÍTULO
========================================= */

.mindfull-tickets-title {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 60px;
}


.mindfull-tickets-title img {

    display: block;

    width: min(500px, 65vw);

    height: auto;

    object-fit: contain;

    /* ANIMACIÓN DE FLOTACIÓN */

    animation: mindfullTicketsFloat 5s ease-in-out infinite;

    filter: drop-shadow(
        0 15px 25px rgba(0, 0, 0, 0.35)
    );
}


/* =========================================
   ANIMACIÓN TÍTULO
========================================= */

@keyframes mindfullTicketsFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-7px);

    }

    100% {

        transform: translateY(0);

    }

}


/* =========================================
   GRID DE BOLETAS
========================================= */

.mindfull-tickets-grid {

    width: 50%;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    align-items: start;
}


/* =========================================
   TARJETA
========================================= */

.mindfull-ticket {

    width: 100%;

    position: relative;
    overflow: visible;

    border-radius: 10px;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* =========================================
   IMAGEN DE BOLETA
========================================= */

.mindfull-ticket img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* =========================================
   HOVER
========================================= */

.mindfull-ticket:hover {

    z-index: 2;
    transform: translateY(-8px);
}

/* Mensaje de reconstrucción: aprovecha todo el ancho disponible en escritorio. */
.mindfull-info-text--reconstruction {
    max-width: none;
    width: 100%;
}

.mindfull-info-text--reconstruction h2 {
    font-size: clamp(28px, 3.25vw, 42px);
    text-align: center;
    white-space: nowrap;
}

.mindfull-info-text--reconstruction {
    text-align: center;
}

.mindfull-reconstruction-list {
    display: inline-block;
    margin: 0;
    padding-left: 1.25em;
    text-align: left;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
}

.mindfull-reconstruction-list li + li {
    margin-top: 6px;
}


.mindfull-ticket:hover img {

    transform: scale(1.04);
}

/* =========================================
   BOTÓN DE ENTRADAS
========================================= */

.mindfull-tickets-button {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 50px;
}


/* =========================================
   BOTÓN
========================================= */

.mindfull-buy-button {

    min-width: 220px;

    height: 58px;

    padding: 0 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    text-decoration: none;

    color: #ffffff;

    background-color: #ffb1d2;

    border: 2px solid #6dd7d1;

    border-radius: 8px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-align: center;

    transition: all 0.3s ease;
}


/* =========================================
   HOVER
========================================= */

.mindfull-buy-button:hover {

    color: #000000;

    background: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);
}

/* =========================================
   PROGRAMACIÓN
========================================= */

.mindfull-schedule {

    position: relative;

    width: 100%;

    min-height: 800px;

    padding: 100px 40px 90px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;


    /* =====================================
       FONDO EDITABLE
    ===================================== */

    background-image: url("../img/Fondo-Programacion.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================
   CONTENEDOR
========================================= */

.mindfull-schedule-container {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================
   TÍTULO CENTRAL
========================================= */

.mindfull-schedule-title {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 60px;
}


.mindfull-schedule-title img {

    display: block;

    width: min(500px, 65vw);

    height: auto;

    object-fit: contain;

    animation: mindfullScheduleFloat 5s ease-in-out infinite;
}


/* =========================================
   ANIMACIÓN DEL TÍTULO
========================================= */

@keyframes mindfullScheduleFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =========================================
   CONTENIDO 2 COLUMNAS
========================================= */

.mindfull-schedule-content {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}


/* =========================================
   IMAGEN IZQUIERDA
========================================= */

.mindfull-schedule-image {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


.mindfull-schedule-image img {

    display: block;

    width: 100%;

    max-width: 1200px;

    height: auto;

    border-radius: 12px;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* HOVER */

.mindfull-schedule-image img:hover {

    transform: scale(1.08);
}


/* =========================================
   COLUMNA DERECHA
========================================= */

.mindfull-schedule-days {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* =========================================
   DESPLEGABLE
========================================= */

.mindfull-day {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.65);

    border-radius: 8px;

    background: rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    overflow: hidden;

    transition: all 0.3s ease;
}


/* =========================================
   CABECERA DEL DÍA
========================================= */

.mindfull-day summary {

    min-height: 65px;

    padding: 0 25px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    list-style: none;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 1.5px;

    user-select: none;
}


/* QUITAR FLECHA NATIVA */

.mindfull-day summary::-webkit-details-marker {

    display: none;
}


/* =========================================
   ICONO +
========================================= */

.mindfull-day-arrow {

    font-size: 25px;

    font-weight: 300;

    line-height: 1;

    transition: transform 0.3s ease;
}


/* CAMBIAR + POR X VISUALMENTE */

.mindfull-day[open] .mindfull-day-arrow {

    transform: rotate(45deg);
}


/* =========================================
   CONTENIDO DEL DÍA
========================================= */

.mindfull-day-content {

    padding: 5px 25px 20px;
}


/* =========================================
   CADA ACTIVIDAD
========================================= */

.mindfull-schedule-item {

    display: grid;

    grid-template-columns: 110px 1fr;

    align-items: center;

    gap: 20px;

    padding: 16px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}


/* QUITAR BORDE DEL ÚLTIMO */

.mindfull-schedule-item:last-child {

    border-bottom: none;
}


/* =========================================
   HORARIO
========================================= */

.mindfull-time {

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


/* =========================================
   ACTIVIDAD
========================================= */

.mindfull-activity {

    color: #ffffff;

    font-size: 15px;

    line-height: 1.4;
}


/* =========================================
   HOVER DEL DÍA
========================================= */

.mindfull-day:hover {

    background: rgba(0, 0, 0, 0.35);

}


/* ==========================================
   SECCIÓN DONACIÓN
========================================== */

#donacion {
    position: relative;

    width: 100%;
    max-width: 100%;

    padding: 90px 20px 110px;

    box-sizing: border-box;

    overflow: hidden;

    /* =====================================
       IMAGEN DE FONDO
       CAMBIA ESTA RUTA SI ES NECESARIO
    ===================================== */

    background-image: url("../img/Fondo-Donacion.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    background-attachment: scroll;
}


/* ==========================================
   CONTENEDOR
========================================== */

.reconstruccion-container {

    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    box-sizing: border-box;

}


/* ==========================================
   IMAGEN CENTRAL
========================================== */

.reconstruccion-logo {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 50px;

}


.reconstruccion-img {

    display: block;

    width: 280px;

    max-width: 70%;

    height: auto;

    animation: minfullFloat 4s ease-in-out infinite;

    filter: drop-shadow(
        0 15px 25px rgba(0, 0, 0, 0.35)
    );

}


/* ==========================================
   ANIMACIÓN FLOTANTE
========================================== */

@keyframes minfullFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0);
    }

}


/* ==========================================
   CONTENIDO
========================================== */

.reconstruccion-content {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(180px, 250px)
        minmax(0, 620px)
        minmax(180px, 250px);

    justify-content: center;

    align-items: center;

    gap: 35px;

}


/* ==========================================
   IMÁGENES
========================================== */

.reconstruccion-image {

    width: 100%;

    max-width: 250px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35);

}


.reconstruccion-image img {

    display: block;

    width: 100%;

    height: 420px;

    object-fit: cover;

    transition: transform 0.5s ease;

}


.reconstruccion-image:hover img {

    transform: scale(1.05);

}


/* ==========================================
   TEXTO
========================================== */

.reconstruccion-text {

    width: 100%;

    max-width: 620px;

    min-width: 0;

    margin: 0 auto;

    box-sizing: border-box;

    color: #24465d;
    background: linear-gradient(135deg, rgba(255, 211, 218, 0.96), rgba(198, 226, 248, 0.96) 50%, rgba(221, 209, 255, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 24px;
    padding: 34px 38px;
    box-shadow: 0 16px 38px rgba(81, 103, 146, 0.3);

    text-align: center;

    overflow-wrap: break-word;

    word-wrap: break-word;

}


.reconstruccion-text h2 {

    width: 100%;

    max-width: 540px;

    margin: 0 auto 30px;

    padding: 0;

    box-sizing: border-box;

    color: #315f7d;
    font-size: clamp(25px, 2.6vw, 36px);

    line-height: 1.12;

    font-weight: 800;

    overflow-wrap: break-word;

}


.reconstruccion-text h2 span {

    display: block;

    margin-top: 8px;

}


/* ==========================================
   PÁRRAFOS
========================================== */

.reconstruccion-text p {

    width: 100%;

    max-width: 540px;

    margin: 0 auto 20px;

    box-sizing: border-box;

    font-size: clamp(15px, 1.2vw, 18px);

    line-height: 1.7;

    font-weight: 400;

    text-shadow: none;

    overflow-wrap: break-word;

    word-break: normal;

}


.reconstruccion-text strong {

    font-weight: 800;

}


/* ==========================================
   DESTACADOS
========================================== */

.reconstruccion-text .destacado {

    max-width: 700px;

    margin: 30px auto;

    font-size: clamp(17px, 1.5vw, 21px);

    line-height: 1.5;

}


/* ==========================================
   FRASES FINALES
========================================== */

.reconstruccion-frases {

    width: 100%;

    max-width: 700px;

    margin: 40px auto 30px;

    padding: 25px 15px;

    box-sizing: border-box;

    border-top: 1px solid rgba(255,255,255,0.35);

    border-bottom: 1px solid rgba(255,255,255,0.35);

}


.reconstruccion-frases p {

    margin: 8px auto;

    font-size: clamp(17px, 1.5vw, 21px);

    line-height: 1.4;

    font-weight: 700;

}


/* ==========================================
   CIERRE MINFULL
========================================== */

.minfull-movimiento {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 30px;

}


.minfull-movimiento strong {

    max-width: 100%;

    font-size: clamp(19px, 1.8vw, 26px);

    line-height: 1.3;

    overflow-wrap: break-word;

}

/* =========================================
   FOOTER MINDFULL
========================================= */

.mindfull-footer {

    /* =====================================
       COLOR DE FONDO EDITABLE
    ===================================== */

    --footer-background: #FBEEB0;

    width: 100%;

    background: var(--footer-background);

    box-sizing: border-box;

    padding: 30px 20px;
}


/* =========================================
   CONTENEDOR
========================================= */

.mindfull-footer-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;
}


/* =========================================
   DATOS
========================================= */

.mindfull-footer-data {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px 35px;
}


/* =========================================
   TEXTOS
========================================= */

.mindfull-footer-data p {

    margin: 0;

    color: #59A4D8;

    font-size: 13px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================
   TEXTO EN NEGRITA
========================================= */

.mindfull-footer-data strong {

    font-weight: 700;
}



/* =========================================
   RESPONSIVE - CELULARES
========================================= */

/* =========================================
   GALERÍA Y VIDEO EDITABLES
   Personaliza --galeria-fondo para cambiar el fondo de esta sección.
========================================= */
.galeria-reconstruccion {
    --galeria-fondo: linear-gradient(135deg, #f9c6c8 0%, #bfe2f6 52%, #d8c7f1 100%);
    background-image: url("../img/Fondo-Hero.png");
    padding: 80px 20px 90px;
}

.galeria-reconstruccion-inner {
    width: min(100%, 1100px);
    margin: 0 auto;
}

.galeria-titulo-flotante {
    display: block;
    width: 100%;
	max-width: 600px;
    height: auto;
    margin: 0 auto 44px;
    animation: minfullFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 12px 18px rgba(57, 70, 107, 0.2));
}

.galeria-imagenes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-bottom: 34px;
}

.galeria-imagenes img,
.galeria-video {
    display: block;
    width: 100%;
    border-radius: 22px;
}


.galeria-video {
    background: #1f405b;
    max-width: 820px;
    max-height: 620px;
    margin: 0 auto;
}

@media (max-width: 650px) {
	
	
/* =========================================
   NAVBAR
========================================= */

    .mindfull-navbar {

        padding: 15px;
    }


    /* CONTENEDOR */

    .mindfull-nav-container {

        position: relative;

        flex-wrap: wrap;

        gap: 0;
    }


    /* LOGO */

    .Tuboleta-logo {

        display: flex;

        align-items: center;
    }

    .Tuboleta-logo img {

        width: 140px;
    }


    /* HAMBURGUESA */

    .mindfull-menu-toggle {

        display: flex;

        margin-left: auto;
    }


    /* =====================================
       MENÚ MOBILE
    ===================================== */

    .mindfull-nav {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 8px;

        margin-top: 15px;

        /* Cerrado */
        max-height: 0;

        overflow: hidden;

        opacity: 0;

        transform: translateY(-10px);

        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
    }


    /* MENÚ ABIERTO */

    .mindfull-nav.active {

        max-height: 300px;

        opacity: 1;

        transform: translateY(0);
    }


    /* BOTONES */

    .mindfull-nav-box {

        width: 100%;

        min-width: 0;

        height: 48px;

        padding: 0 15px;

        border-radius: 7px;
    }


    .mindfull-nav-box span {

        font-size: 12px;

        letter-spacing: 1px;
    }
	
/* =========================================
   HERO
========================================= */
	
.mindfull-section {

        min-height: auto;

        padding: 100px 18px 50px;

        background-position: center center;
    }


    /* LOGO */

    .mindfull-center-logo {

        margin-bottom: 30px;
    }


    .mindfull-center-logo img {

        width: 350px;
    }


    /* BOTONES */

    .mindfull-buttons-row {

        width: 100%;
        gap: 5px;
    }


    .mindfull-button {

        min-width: 150px;

        width: calc(80% - 5px);

        height: 80px;

        padding: 0 10px;

        font-size: 13px;
		
		margin-bottom: 10px;
    }


    /* GALERÍA */

    .mindfull-images {

        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 30px;
		
    }
	
	.mindfull-image-item {

    width: 100%;

    border-radius: 10px;
}

/* =========================================
   CINTA MINFULL
========================================= */
	
    .mindfull-tape {

        /* UN POCO MÁS GRANDE EN MOBILE */

        height: 50px;

    }


    .mindfull-tape-content {

        gap: 35px;

        padding: 0 20px;

    }


    .mindfull-tape-content span {

        font-size: 10px;

        letter-spacing: 1.5px;

    }


    .mindfull-tape-content span::after {

        margin-left: 35px;

    }
	
/* =========================================
   MÁS INFORMACIÓN
========================================= */
	
.mindfull-info {

        min-height: auto;

        padding: 70px 20px;
    }


    /* IMAGEN SUPERIOR */

    .mindfull-info-header {

        margin-bottom: 35px;
    }


    .mindfull-info-header img {

        width: min(320px, 80vw);
    }


    /* CONTENIDO */

    .mindfull-info-content {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* IMAGEN */

    .mindfull-info-image {

        width: 100%;
    }


    .mindfull-info-image img {

        width: 100%;

        max-width: 500px;

        border-radius: 10px;
    }


    /* TEXTO */

    .mindfull-info-text {

        width: 100%;

        max-width: 100%;

        text-align: center;
    }


    .mindfull-info-text h2 {

        font-size: 30px;

        margin-bottom: 20px;
    }

    .mindfull-info-text--reconstruction h2 {
        white-space: normal;
    }


    .mindfull-info-text p {

        font-size: 15px;

        line-height: 1.6;
    }
	
/* =========================================
   PRECIOS
========================================= */
	
	 .mindfull-tickets {

        min-height: auto;

        padding: 70px 18px 50px;
    }


    /* TÍTULO */

    .mindfull-tickets-title {

        margin-bottom: 35px;
    }


    .mindfull-tickets-title img {

        width: min(320px, 80vw);
    }


    /* BOLETAS */

    .mindfull-tickets-grid {

        grid-template-columns: 1fr;

        gap: 25px;

        max-width: 380px;
    }


    .mindfull-ticket {

        width: 100%;

        border-radius: 9px;
    }
	
/* =========================================
   PROGRAMACIÓN
========================================= */
	
.mindfull-schedule {

        min-height: auto;

        padding: 70px 18px 55px;
    }


    /* TÍTULO */

    .mindfull-schedule-title {

        margin-bottom: 35px;
    }


    .mindfull-schedule-title img {

        width: min(330px, 80vw);
    }


    /* COLUMNAS → UNA COLUMNA */

    .mindfull-schedule-content {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* IMAGEN */

    .mindfull-schedule-image img {

        width: 100%;

        max-width: 500px;

        border-radius: 10px;
    }


    /* DESPLEGABLES */

    .mindfull-schedule-days {

        width: 100%;
    }


    .mindfull-day summary {

        min-height: 55px;

        padding: 0 17px;

        font-size: 13px;
    }


    .mindfull-day-content {

        padding: 0 17px 12px;
    }


    /* ACTIVIDADES */

    .mindfull-schedule-item {

        grid-template-columns: 90px 1fr;

        gap: 12px;

        padding: 14px 0;
    }


    .mindfull-time {

        font-size: 12px;
    }


    .mindfull-activity {

        font-size: 13px;
    }
	
/* =========================================
   SECCIÓN DONACIÓN
========================================= */
	
#donacion {

        padding: 70px 18px 80px;

        background-position: center center;

    }


    /* IMAGEN CENTRAL */

    .reconstruccion-logo {

        margin-bottom: 35px;

    }


    .reconstruccion-img {

        width: 220px;

        max-width: 75%;

    }


    /* CAMBIAMOS TODO A UNA SOLA COLUMNA */

    .reconstruccion-content {

        display: flex;

        flex-direction: column;

        gap: 30px;

    }


    /* TEXTO */

    .reconstruccion-text {

        width: 100%;

        padding: 26px 20px;

        order: 1;

    }

    .galeria-reconstruccion {
        padding: 56px 18px 64px;
    }

    .galeria-imagenes {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    /* PRIMERA IMAGEN */

    .image-left {

        order: 2;

        width: 100%;

        max-width: 450px;

    }


    /* SEGUNDA IMAGEN */

    .image-right {

        order: 3;

        width: 100%;

        max-width: 450px;

    }


    .reconstruccion-image img {

        width: 100%;

        height: 300px;

    }


    /* TÍTULO */

    .reconstruccion-text h2 {

        font-size: 28px;

        line-height: 1.15;

        margin-bottom: 25px;

    }


    .reconstruccion-text h2 span {

        margin-top: 7px;

    }


    /* PÁRRAFOS */

    .reconstruccion-text p {

        font-size: 16px;

        line-height: 1.65;

        margin-bottom: 18px;

    }


    .reconstruccion-text .destacado {

        font-size: 18px;

        margin: 25px 0;

    }


    /* FRASES */

    .reconstruccion-frases {

        margin: 35px auto 25px;

        padding: 20px 10px;

    }


    .reconstruccion-frases p {

        font-size: 18px;

        line-height: 1.4;

    }


    /* FRASES MINFULL */

    .minfull-movimiento {

        margin-top: 25px;

        gap: 10px;

    }


    .minfull-movimiento strong {

        font-size: 21px;

    }

	
/* =========================================
   FOOTER
========================================= */

.mindfull-footer {

        padding: 25px 15px;
    }


    .mindfull-footer-data {

        flex-direction: column;

        gap: 8px;
    }


    .mindfull-footer-data p {

        font-size: 12px;

        width: 100%;

        text-align: center;
    }

	
}