@font-face {
  font-family: 'Helvetica LT Std Cond Blk';
  src: url('../font/HelveticaLTStd-BlkCond.otf')  format("opentype"),
       local('Helvetica LT Std Cond Blk');
}
@font-face {
  font-family: 'Helvetica LT Std Cond Light';
  src: url('../font/HelveticaLTStd-LightCond.otf')  format("opentype"),
       local('Helvetica LT Std Cond Light');
}
@font-face {
  /* Nombre que usarás en la propiedad font-family */
  font-family: 'Fillguy';
  /* Asegúrate de que la ruta y el nombre del archivo coincidan exactamente con tu descarga */
  src: url('../font/Fillguy.ttf') format('truetype'),
       /* Esto es opcional, sirve si la fuente está instalada localmente */
       local('Fillguy');
  /* Propiedades de estilo estándar */
  font-weight: normal;
  font-style: normal;
}
* {
  font-family: "Helvetica LT Std Cond Light";
  font-weight: lighter;
  margin:0px;
}
:root{
  --bubble-bg: rgba(255,255,255,0.85);
  --bubble-active-bg: #ffffff;
  --bubble-color: #222;
}
html{
  	background-color: #fff;
	/*background-image: url(../img/mobile/home/Tierra_madre_mate.png);*/
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    z-index: auto;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
}
html,body{
	margin: 0px !important;
	padding:0px;
	height: calc(100% - 50px);
	width: 100%;
}
body.active{
	position:fixed;
	margin: 0px !important;
	padding:0px;
	background:#fff;
	height:100%;
}
div{
}
.desktop .mobile{
	position:relative;
	height: 100%;
	width: 100%;
	/*margin-bottom: 100px;*/
}
.mobile.slider {
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  touch-action:pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing:antialiased;
}
/* HEADER */
.mobile header{
	position: fixed;
	background-color: transparent;
	height:70px; /* Ajustado para el logo */
	width:100%;
	top:0;
	margin:0;
	box-sizing: border-box;
    padding: 15px;
	/*box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.1);*/
	text-align: left;
	/* CORRECCIÓN DE Z-INDEX: 1700 para mantener el logo nítido sobre el menú */
	z-index: 1700;
}
header.active{
    background-color: transparent !important;
	position: fixed;
	height:100px;
	width:100%;
	top:0;
	margin:0;
	/* CORRECCIÓN DE BLUR: Eliminado para mantener el logo nítido */
	/* filter: blur(15px); */
	box-sizing: border-box;
    padding: 15px;
	/*box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.1);*/
	text-align: left;
	/* Aseguramos el mismo z-index alto */
	z-index: 1700;
}
header.active #contact-icon {
    /* OCULTARLOS INSTANTÁNEAMENTE AL ABRIR */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out 0s, visibility 0s linear 0.3s; /* Sin retraso (0s) al ocultarse */
}
.mobile header.active #mobile-contact-icon,
.mobile header.active #contact-icon-bar-light,
.mobile header.active #contact-icon-bar-dark {
    opacity: 0 !important;
    visibility: hidden !important;
}
.desktop header{
	position: fixed;
	background-color: transparent;
	transition: background-color 0.4s ease-in-out;
	height:120px; /* Ajustado para el logo */
	width:100%;
	top:0;
	margin:0;
	box-sizing: border-box;
    padding: 10px;
	/*box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.1);*/
	text-align: left;
	/* CORRECCIÓN DE Z-INDEX: 1700 para mantener el logo nítido sobre el menú */
	z-index: 1700;
}
.desktop header:hover,
.desktop header.is-hovered
{
    background-color:#fff !important;
}
.desktop #left-header {
    cursor: pointer;
    display: flex;
}
.desktop header.is-hovered #hamburger-dark {
    transition: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.desktop header.is-hovered #contact-icon-bar-dark
{
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important; /* CLAVE: Corregido a 'flex' para evitar que los iconos se apilen */
    visibility: visible !important;
    z-index: 1701 !important;
}
.desktop header.is-hovered #desktop-logo-dark
{
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important; /* Mantenemos 'block' para la imagen del logo */
    visibility: visible !important;
    z-index: 1701 !important;
    transform: translateX(-50px) !important;
}
.desktop header.is-hovered #hamburger-light,
.desktop header.is-hovered #desktop-logo-light,
.desktop header.is-hovered #contact-icon-bar-light
{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* ----------------------------------------------------------- */
/* LÍNEA DIVISORIA INFERIOR (id='line') */
/* ----------------------------------------------------------- */
#line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    border-bottom: 0.1px solid #ffffff;
}
.mobile header.active #line {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out;
}
body.active #line {
    display: none;
}
/* HAMBURGUESA */
.mobile #hamburger {
  width: 24px;
  height: 24px; /* Aseguramos altura para el área de clic */
  margin: 0px auto;
  cursor: pointer;
  position: fixed;
  top: 15px; /* Ajuste fino */
  left: 16px;
  z-index: 3000; /* Lo subimos al máximo para que nada lo tape */
  background-color: transparent;
}
.desktop #hamburger {
  width: 24px;
  height: 24px;
  margin: 30px auto;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 25px;
  z-index: 3000;
  background-color: transparent;
}
.desktop #hamburger-dark {
    pointer-events: none;
}
.desktop #hamburger-light {
    pointer-events: none;
}
.desktop header:hover #hamburger-light {
    display: none !important;
}
/* Cuando se hace hover en el header (dentro de .desktop): MOSTRAR Negro */
.desktop header:hover #hamburger-dark {
    display: flex !important;
}
#hamburger:hover span:nth-child(1) {
  top: 14px;
  -webkit-transition: .20s ease-in-out;
  -moz-transition: .20s ease-in-out;
  -o-transition: .20s ease-in-out;
  transition: .20s ease-in-out;
}
#hamburger:hover span:nth-child(3) {
  top: 30px; /* Ajustado al nuevo espaciado */
  -webkit-transition: .16s ease-in-out;
  -moz-transition: .16s ease-in-out;
  -o-transition: .16s ease-in-out;
  transition: .16s ease-in-out;
}
#hamburger span {
  z-index: 3;
  display: block;
  position: absolute;
  /* LÍNEAS: Ahora de 2px de grosor */
  height: 2px;
  width: 100%;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .20s ease-in-out;
  -moz-transition: .20s ease-in-out;
  -o-transition: .20s ease-in-out;
  transition: .25s ease-in-out;
}
#hamburger span {
  background: #fff;
  transition: background 0.4s ease-in-out;
}
header.dark-icons #hamburger span,
.desktop header.is-hovered #hamburger span {
  background: #1E1E1E !important;
}
/* POSICIONAMIENTO DE LÍNEAS (Más espaciadas) */
#hamburger span:nth-child(1) {
  top: 14px; /* Línea superior */
}
#hamburger span:nth-child(2) {
  top: 22px; /* Centro (14 + 2 + 6px de espacio) */
}
#hamburger span:nth-child(3) {
  top: 30px; /* Inferior (22 + 2 + 6px de espacio) */
}
/* ESTADO ABIERTO (La "X") */
#hamburger.open span:nth-child(1) {
  top: 22px; /* Centrar la 'X' verticalmente */
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  background-color: #fff;
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
  left: -30px;
  -webkit-transition: .16s ease-in-out;
  -moz-transition: .16s ease-in-out;
  -o-transition: .16s ease-in-out;
  transition: .16s ease-in-out;
}
#hamburger.open span:nth-child(3) {
  top: 22px; /* Centrar la 'X' verticalmente */
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  background-color: #fff;
}
header.dark-header #hamburger span {
    background: #2c2c2e !important;
}
#hamburger-dark, #hamburger-light,
#desktop-logo-dark, #desktop-logo-light,
#contact-icon-bar-dark, #contact-icon-bar-light {
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;
}
/* LOGOS */
.mobile #mobile-logo-icon {
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0.5s linear;
}
.mobile #mobile-brand-icon {
    opacity: 1;
    transition: opacity 0.5s ease-in-out, visibility 0.5s linear;
}
.desktop #mobile-logo-icon {
    display: none;
}
.desktop #mobile-brand-icon {
    display: none;
}
.mobile #desktop-logo {
    display: none;
}
.mobile header.active #mobile-logo-icon {
    display: block !important;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* Transición solo de Opacidad, para que aparezca suave */
}
.mobile header.active #mobile-brand-icon {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s; /* El 0.5s de delay para ocultar visibility es la clave */
}
#brand-icon-light,
#brand-icon-dark {
    /* Mantener el flujo normal del documento */
    display: block;
}
/* Ocultar la versión oscura por defecto */
#brand-icon-dark {
    display: none;
}
body.active .mobile header.active #mobile-logo-icon {
    visibility: hidden !important;
    opacity: 0 !important;
}
body.active .mobile header.active #mobile-brand-icon {
    visibility: visible !important;
    opacity: 1 !important;
}
.desktop header #desktop-logo {
    position: absolute;
    margin-left: 4%;
    left: 0%;
    top: 50%;
    transform: translate(0%, -50%);
}
.desktop header #desktop-logo-light {
    display: block;
}
.desktop header #desktop-logo-dark {
    display: none;
}
.desktop header #desktop-logo-dark {
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateX(0);
}
.desktop header:hover #desktop-logo-light {
    display:none;
}
.desktop header:hover #desktop-logo-dark {
    display: block;
}
/* ICONOS */
.mobile #mobile-contact-icon {
    /* Permitir la transición */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out 0.2s, visibility 0s linear 0.2s; /* Tiempo de aparición más un retraso */
}
.mobile #desktop-contact-icon {
    display: none;
}
.mobile header.dark-header #contact-icon-bar a svg path {
    stroke: #2c2c2e !important;
    fill: #2c2c2e !important;
}
.mobile header.dark-header #contact-icon-bar a svg circle {
    stroke: #2c2c2e !important;
    /* La excepción para el relleno del círculo de Instagram (si está en blanco originalmente) */
    fill: #2c2c2e !important;
}
.mobile #contact-icon-bar {
    position: absolute;
    top: 25px; /* Ajuste vertical para centrar iconos de 20px */
    right: 15px; /* Margen derecho */
    z-index: 1700;
    /* Layout: Usa Flexbox para alinear y espaciar los iconos */
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio de 12px entre cada icono */
}
/* Estilo para los iconos dentro de la barra */
.mobile #contact-icon-bar a {
    display: flex; /* Asegura que el icono SVG se centre en el enlace */
    line-height: 0;
    transition: opacity 0.2s;
}
.mobile #contact-icon-bar a:hover {
    opacity: 0.8;
}
/* Meto luz y oscuridad*/
.mobile #contact-icon-bar-light {
    position: absolute;
    top: 25px; /* Ajuste vertical para centrar iconos de 20px */
    right: 15px; /* Margen derecho */
    z-index: 1700;
    /* Layout: Usa Flexbox para alinear y espaciar los iconos */
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio de 12px entre cada icono */
}
.mobile #contact-icon-bar-dark {
    position: absolute;
    top: 25px; /* Ajuste vertical para centrar iconos de 20px */
    right: 15px; /* Margen derecho */
    z-index: 1700;
    /* Layout: Usa Flexbox para alinear y espaciar los iconos */
    display: none;
    align-items: center;
    gap: 12px; /* Espacio de 12px entre cada icono */
}
.desktop #mobile-contact-icon {
    display: none;
}
.desktop header #desktop-contact-icon {
   position: absolute;
    right: 0%;
    top: 40%;
    transform: translateY(-50%);
}
.desktop header #contact-icon-bar {
    position: absolute;
    right: 15px;
    z-index: 1700;
    display: flex;
    align-items: center;
    color: #ffffff;
    gap: 12px;
}
.desktop header #contact-icon-bar-light {
    position: absolute;
    display: flex;
    right: 15px; /* Margen derecho */
    z-index: 1700;
    opacity: 1;
    pointer-events: auto;
    align-items: center;
    gap: 12px;
}
.desktop header #contact-icon-bar-dark {
    position: absolute;
    display: flex;
    right: 15px;
    z-index: 1700;
    opacity: 0;
    pointer-events: none;
    align-items: center;
    color: #1E1E1E;
    gap: 12px;
}
.desktop #contact-icon-bar-dark a,
.desktop #contact-icon-bar-light a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    white-space: nowrap;
    text-decoration: none;
}
.desktop header:hover #contact-icon-bar-light {
    opacity: 0;
    pointer-events: none;
}
/* Cuando se hace hover en el header (dentro de .desktop): MOSTRAR Negro */
.desktop header:hover #contact-icon-bar-dark {
    opacity: 1;
    pointer-events: auto; /* Activamos el click en el icono negro */
    display: flex !important;
}
/* MENU DESPLEGABLE IZQUIERDA */
/* ========================================= */
/* ESTILOS PARA MENÚ DESKTOP (POP-UP SLIDE DESDE LA IZQUIERDA) */
/* ========================================= */
.mobile #menu-desktop {
    display: none;
}
/* Solo aplica en la vista de escritorio */
.desktop #menu-desktop {
    /* Propiedades de posición y tamaño */
    position: fixed;
    top: 0;
    left: 0; /* <-- CAMBIO CLAVE: Posicionado en el borde izquierdo */
    width: 310px; /* Define el ancho del pop-up */
    height: 100vh;
    z-index: 1600;
    background-color: #ffffff;
    /* GSAP controlará la propiedad 'transform' para el deslizamiento */
}
/* Estilos del contenido interno del menú */
.desktop #menu-desktop #menu {
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: left; /* <-- Alineación de texto a la izquierda, más natural */
}
/* El resto de estilos internos son los mismos */
.desktop #menu-desktop ul {
    list-style: none;
    margin-top: 150px;
}
.desktop #menu-desktop ul li {
    font-size: 1.5em;
    margin-bottom: 15px;
}
.desktop #menu-desktop ul li a {
    text-decoration: none;
    color: #1E1E1E;
    display: block;
    padding: 5px 0;
}
.desktop #menu-desktop ul li a:hover {
    color: #6c6c70;
}
/* CONTENIDO PRINCIPAL */
#main_content{
	margin-top:0px;
	height:100%;
	/* AÑADIR ESTA LÍNEA */
    transition: filter 0.5s ease-in-out;
}
#main_content.active{
    margin-top:0px;
	height:100%;
	/* Esto desenfoca el contenido, no el header */
	filter: blur(15px);
}
/* ========================================= */
/* LOGO FIJO CENTRADO EN TODAS LAS SLIDES */
/* ========================================= */
#central-slide-logo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    opacity: 1;
    /* z-index */
    z-index: 1000;
    pointer-events: none;
}
#central-slide-text {
    /* POSICIONAMIENTO FIJO Y ANCHO COMPLETO */
    position: fixed;
    height: 100%;
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    width: 100%;       /* Ocupar todo el ancho disponible */
    left: 0;           /* Anclar al borde izquierdo */
    transform: none;   /* Eliminar cualquier traslación de centrado anterior */
    display: flex;             /* Habilitar Flexbox */
    flex-direction: column;    /* Apilar elementos verticalmente */
      /* Centrar horizontalmente los elementos hijos */
    align-items: flex-start;
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-weight: bold;
    font-size: 25vw;
    line-height: 1;
    white-space: nowrap;
    color: #fff;       /* Color del texto sobre el fondo del slide */
}
#left-slide-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5% 10px 10px 6%;
    width: auto;
    max-width: 90%;
    box-sizing: border-box;
}
.mobile #left-slide-banner-chapter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 50px;
    margin-bottom: 30px;
    width: auto;
    max-width: 90%;
    box-sizing: border-box;
    gap: 0px;
}
.desktop #left-slide-banner-chapter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 100px;
    margin-bottom: 30px;
    width: auto;
    max-width: 90%;
    box-sizing: border-box;
    gap: 0px;
}
#cursos-intro-section {
    position: relative;
    width: 100%;
    height: 60vh;
    box-sizing: border-box;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.1)), url('../img/mobile/cursos_continuados/main_cursos_continuados.webp');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    padding-top: 70px;
    padding-bottom: 50px;
}
#finde-intro-section {
    position: relative;
    width: 100%;
    height: 60vh;
    box-sizing: border-box;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.1)), url('../img/mobile/fin_semana/main_finde.webp');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    padding-top: 70px;
    padding-bottom: 50px;
}
#body-chapter {
}
.mobile #body-chapter-text {
    width: 90%;
    margin-left: 10%;
    margin-top: -100px;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.desktop #body-chapter-text {
    width: 83%;
    margin-left: 17%;
    padding-right: 20% !important;
    margin-top: -100px;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
#body-chapter-text span {
    font-family: "Fillguy";
}
#central-slide-text svg {
    margin-top: 0px; /* Mueve el logo ligeramente hacia arriba para pegarlo a 'REGALA' */
    margin-bottom: 15px; /* Espacio de 5px entre el logo y el subtítulo */
}
.mobile #central-slide-logo{
    top: 15.5vh;
}
.mobile #central-slide-text {
    top: 12.5vh;
}
.desktop #central-slide-logo {
    top: 25.5vh;
}
.desktop #central-slide-text {
    top: 15.5vh;
}
#central-slide-logo img {
    width: 100%;
    height: auto;
    display: block;
}
#regala-title {
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-weight: bold;
    font-size: 57px;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
}
#regala-subtitle {
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-weight: bold;
    color: #fff;
    margin: 0;
    padding: 0;
}
#regala-body {
    font-family: 'Helvetica LT Std Cond Light', sans-serif;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
    text-transform: none !important;
    color: #fff;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 0;
}
/* ========================================= */
/* ESTILOS ESPECÍFICOS CURSOS CONTINUADOS (CC) */

/* 1. Layout Principal: Alineación Horizontal (Póster) */
.cc-layout-poster {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    padding-left: 6%; 
    box-sizing: border-box;
    height: auto !important; 
    flex-grow: 0 !important;
}

/* 2. Contenedor de Títulos (Derecha del logo) */
.cc-titles-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 0.85; 
}

/* 3. TÍTULO GRANDE (CURSOS) */
#cc-title {
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-size: clamp(45px, 12vw, 65px); 
    color: #1e1e1e;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -0.02em; 
}

/* 4. SUBTÍTULO (Continuados) */
#cc-subtitle {
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-size: clamp(40px, 10vw, 50px); 
    color: #1e1e1e;
    margin: 0;
    margin-left: 2px; 
    text-transform: none; 
}

#left-slide-banner #left-slide-banner-chapter {
    margin-top: 0 !important;
}

/* 5. LOGO VERTICAL (Izquierda) */
.cc-logo-vertical-wrapper {
    width: auto;
    height: auto; 
}

/* Estilo del SVG específico dentro de esta sección */
.cc-layout-poster #menu-logo-svg {
    transform: rotate(-90deg);
    width: 280px !important; 
    height: auto;
    fill: transparent !important; 
    stroke: #ffffff !important;   
    stroke-width: 20px;           
    display: block;
    margin: 0;
}

/* 6. TEXTO DESCRIPTIVO (Debajo del póster) */
#cc-body {
    font-family: 'Helvetica LT Std Cond Light', sans-serif;
    font-size: clamp(14px, 4vw, 20px);
    line-height: 1.3;
    color: #fff;
    margin: 0;
    margin-top: 25px;
    padding-left: 6%; 
    max-width: 85%;
}

.mobile .cc-layout-poster {
    gap: 10px;
}
.desktop .cc-layout-poster {
    gap: 10px;
}
.mobile .cc-logo-vertical-wrapper {
    width: 30px;
}
.desktop .cc-logo-vertical-wrapper {
    width: 50px;
}
.mobile .cc-layout-poster #menu-logo-svg {
    width: 200px !important;
    stroke-width: 30px;
}
.desktop .cc-layout-poster #menu-logo-svg {
    width: 200px !important;
    stroke-width: 30px;
}
#contacto {
    align-self: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    text-align: center;
    align-self: center;
    pointer-events: auto !important;
    cursor: pointer;
    box-sizing: border-box;
    margin: auto;
    padding: 0;
    margin-top: -25px;
}
/* --- Asegurar el texto interno --- */
#contacto span {
    display: inline-block;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px); /* Desenfoca el fondo detrás */
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #fff;
    padding: 12px 35px;
    font-family: 'Helvetica LT Std Cond Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #fff;
    transition: all 0.3s ease;
}
.desktop #contacto {
    display: none;
}
#fechas {
    align-self: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    text-align: center;
    align-self: center;
    pointer-events: auto !important;
    cursor: pointer;
    box-sizing: border-box;
    margin: auto;
    padding: 0;
    margin-top: 0px;
}
/* --- Asegurar el texto interno --- */
#fechas span {
    display: inline-block;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px); /* Desenfoca el fondo detrás */
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #000;
    padding: 12px 35px;
    font-family: 'Helvetica LT Std Cond Light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #000;
    transition: all 0.3s ease;
}
/* --- CONTENEDOR (LA PISTA DE SCROLL) --- */
.media-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 75%;
    gap: 30px; /* Espacio entre tarjetas */
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    height:50%;
    width: auto; /* Ancho respecto a la pantalla */
    margin: 0 auto; /* Centrado */
    padding: 10px 25px 10px 25px;
    background-color: rgba(0, 0, 0, 0.1); /* Blanco muy transparente */
    backdrop-filter: blur(5px); /* Desenfoca el fondo detrás */
    -webkit-backdrop-filter: blur(5px);
    /* Reactivar clics */
    pointer-events: auto !important;
    /* Ocultar barra de scroll (Firefox) */
    scrollbar-width: none;
}
/* Ocultar barra de scroll (Chrome/Safari) */
.media-scroller::-webkit-scrollbar {
    display: none;
}
/* --- EFECTO IMÁN (SNAP) --- */
.snaps-inline {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 25px;
}
.snaps-inline > * {
    scroll-snap-align: center; /* Las tarjetas se pegan al centro */
}
/* --- TARJETA BASE --- */
.media-element {
    position: relative;
    box-sizing: border-box;
    padding: 25px; /* Quitamos padding para que la imagen toque los bordes */
    background: #000; /* Fondo negro por si la imagen tarda en cargar */
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden;
    height: auto;
    display: flex;
    flex-direction: column; /* Elementos uno encima de otro */
    justify-content: flex-end; /* Empuja todo el contenido al FINAL (abajo) */
    align-items: center;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}
.media-element * {
    white-space: normal !important;
}
/* --- IMAGEN DE FONDO --- */
.media-element img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen cubre todo el espacio sin deformarse */
    border-radius: 0; /* El borde lo da el padre (.media-element) */
    margin: 0;
    position: absolute; /* Se queda fija al fondo */
    top: 0;
    left: 0;
    z-index: 0;
}
/* Efecto al pasar el ratón (opcional) */
.desktop .media-element:hover {
    transform: translateY(-5px);
}
/* --- ESTILOS DEL TEXTO --- */
.media-element p {
    color: #ffffff !important;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    font-size: 14px;
    max-width: 100%;
    box-sizing: border-box;
}
/* Estilo específico para el Título */
.media-element .title {
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1;
    max-width: 100%;
}
.media-element .price {
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1;
    max-width: 100%;
}
/* --- BADGE DE PRECIO (Flotando arriba derecha) --- */
.card-price-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 5px 12px;
    border-radius: 20px;
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-size: 1.2rem;
    color: #1E1E1E;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* --- TEXTO CON DEGRADADO NEGRO (ABAJO) --- */
.slide-txt-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    /* EL DEGRADADO MÁGICO */
    /* Va de transparente arriba a negro sólido abajo */
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.9) 100%);
    padding: 60px 20px 20px 20px; /* Mucho padding arriba para que el degradado suba suave */
    box-sizing: border-box;
    text-align: left; /* Texto alineado a la izquierda */
}
/* Tipografía blanca para que se lea sobre el negro */
.card-title {
    color: #fff !important;
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-size: 1.5rem;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.card-desc {
    color: #eee !important; /* Blanco un poco apagado */
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
    font-weight: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Espaciador final para mejorar el scroll en móviles */
.spacer {
    width: 5px;
}
/* --- AJUSTE PARA ESCRITORIO --- */
/* En pantallas grandes, las tarjetas pueden ser más pequeñas */
@media (min-width: 600px) {
    .media-scroller {
        overflow-x: auto;
        grid-auto-columns: 45%;
        gap: 30px;
        max-height: 30vw;
        overflow-y: hidden;
        padding-bottom: 20px;
        padding-left: 6%;
    }
    .media-element {
        height: auto;
    }
}
/* --- ESTILOS COMPARTIDOS PARA CONTENIDO OCULTO --- */
.tab-content-img,
.tab-content-txt {
    display: none; /* Oculto por defecto */
    animation: fadeEffect 0.5s;
}
/* --- CLASE PARA MOSTRAR CONTENIDO --- */
.tab-content-img.active,
.tab-content-txt.active {
    display: block; /* Visible cuando tiene la clase active */
}
/* Ajuste visual para la cabecera de tabs (ahora en el medio) */
.tabs-header {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;    /* Espacio respecto a la imagen de arriba */
    margin-bottom: 15px; /* Espacio respecto al texto de abajo */
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
/* Estilos de botones (se mantienen igual que antes) */
.tab-btn {
    background: none;
    border: none;
    font-family: 'Helvetica LT Std Cond Blk', sans-serif;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 2px solid transparent;
}
.tab-btn.active {
    color: #1E1E1E;
    border-bottom: 2px solid #1E1E1E;
}
/* La imagen sigue igual */
.tab-img {
    width: 35%;
    border-radius: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#menu{
	display:none;
}
#menu.active{
	display:block;
}
#content.active{
	filter: blur(15px);
	position:fixed;
}
#main_mobile{
	position:relative;
}
#main_brand{
	position: absolute;
	top:10%;
	max-width: 100%;
	padding-left: 10%;
	padding-right: 10%;
}
#brand{
	position: relative !important;
	margin-top:15%;
}
#gallery-header{
	position: fixed;
	margin: 28px auto;
	text-align: left;
	height:60px;
	margin-left:60px !important;
}
p {
  text-align: left;
  /* letter-spacing: 0.15em; */
}
a {
  text-decoration: none;
}
.botao {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
}
/* CORRECCIÓN: Menu Overlay por encima del Header (1500 > 1000) */
#bg-menu-mobile {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 1500;
  background-color: #1E1E1E;
  opacity:65%;
  will-change: transform;
}
/* CORRECCIÓN: Lista del menú visible sobre el fondo negro */
.mobile ul {
  width: 100%;
  margin-top:5%;
  position: fixed;
  top: 100px;
  left:0;
  /*left: 0;*/
  list-style: none;
  color: #fff;
  z-index: 1600;
}
.mobile ul li {
  font-weight:300;
  color: #fff;
  font-size: 1.4em !important;
  position: relative;
  margin-bottom: 10px;
  margin-left:5%;
  left:100%;
  cursor: pointer;
  will-change: transform;
}
.mobile ul li:hover {
  color: #fff;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
.desktop ul li:hover {
  color: #1E1E1E;
  cursor: pointer;
}
img{
	object-fit: cover;
	object-position: center center;
}
img.background {
  max-width: 100%
}
.main_content{
	margin-top:150px;
}
/* chapter-title{ */
.box-chapter,
.item-02,
.item-06,
.chapter-title{
	width:80%;
	font-size:30px;
	/* letter-spacing: 0.25em; */
    margin-right: auto;
    margin-left: auto;
	position:relative;
}
.chapter-content{
	width:80%;
	font-size:16px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 25px;
	position:relative;
}
.description{
    margin-left: auto;
    margin-right: auto;
}
.item{
	width: 80%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.box{
	margin: 10px 5px 0 0;
    background-color: #fff;
	border-style: solid;
	border-width: thin;
    padding: 8px 16px;
	/*font-size:75px; */
}
.comp{
	width: 100%;
	position: relative;
	margin-bottom: 15px;
}
.comp-x{
	display: flex;
	justify-content: center;
	border-radius: 0;
    display: block;
    background-color: rgba(255, 255, 255, 1);
    border: 4px solid rgba(255, 255, 255, 1);
	overflow: hidden;
}
.img-pers{
	margin-left: auto;
    margin-right: auto;
	border-radius: 0;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.4);
    display: block;
    background-color: rgba(255, 255, 255, 1);
    border: 8px solid rgba(255, 255, 255, 1);
	overflow: hidden;
}
/* ========================================= */
/* SEPARADOR <hr> PARA LA ÚLTIMA SLIDE */
/* ========================================= */
.section-hr {
    /* 1. Eliminar borde por defecto y altura */
    border: none;
    height: 1px; /* Definimos la altura de la línea */
    /* 2. Color y centrado */
    background-color: #2c2c2e; /* El color oscuro que solicitaste */
    /* 3. Ancho y espaciado */
    width: 45%; /* 40% del ancho del contenedor. AJUSTA ESTE VALOR */
    margin-top: 15px;
    margin-bottom: 30px;
    margin-left: auto; /* Centrado horizontal */
    margin-right: auto; /* Centrado horizontal */
}
.pre-footer{
	/*font-size:75px; */
	text-align: center;
	margin-bottom: 60px;
	bottom:0;
}
.footer{
	font-size:0.9em;
	padding:10px;
	text-align: right;
	/*background-color: #3d1c0b; */
	bottom:0;
	position:fixed;
}
/* Nuevo estilo para videos de fondo en los slides */
.slide video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Simula background-size: cover */
    object-fit: cover;
    z-index: 0; /* Asegura que esté detrás del overlay y del texto */
}
.slides.no-snap {
    scroll-snap-type: none !important;
}
/* ========================================= */
/* SLIDE BACKGROUND */
/* ========================================= */
/* --- IMÁGENES DE FONDO (Móvil por defecto) --- */
.slide-continuados {
    background-image:
                      url('../img/mobile/home/Slider/slider_continuados.webp');
}
.slide-monograficos {
    background-image:
                      url('../img/mobile/home/Slider/slider_monograficos.webp');
}
.slide-regala {
    background-image:
                      url('../img/mobile/home/Slider/slider_regala.webp');
}
.slide-bodas {
    background-image:
                      url('../img/mobile/home/Slider/slider_boda.webp');
}
/*  1. VERSIÓN MÓVIL (Por defecto) */
.slide-regala-0 {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url('../img/mobile/regala/regala_main.webp');
}
.slide-encargos {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url('../img/desktop/regala/regala_main.webp');
}

/* --- IMÁGENES DE FONDO (Desktop) --- */
@media (min-width: 768px) {
    .slide-continuados {
        background-image:
                          url('../img/desktop/home/Slider/slider_continuados.webp');
    }
    .slide-monograficos {
        background-image:
                          url('../img/desktop/home/Slider/slider_monograficos.webp');
    }
    .slide-regala {
        background-image:
                          url('../img/desktop/home/Slider/slider_regala.webp');
    }
    .slide-bodas {
        background-image:
                          url('../img/desktop/home/Slider/slider_boda.webp');
    }
    .slide-regala-0 {
          background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url('../img/desktop/regala/regala_main.webp');
    }
}

/* ========================================= */
/* SLIDE 2: TALLERES (Ejemplo) */
/* ========================================= */
.slide-talleres {
    background-image: url('../img/mobile/taller_vertical.webp');
}
@media (min-width: 501px) {
    .slide-talleres {
        background-image: url('../img/desktop/taller_horizontal.webp');
    }
}
/* =========================================
   (Botón Hamburguesa)
   ========================================= */
/* =========================================
   NUEVO: BARRA DE CONTACTO (WhatsApp, Teléfono, Email)
   ========================================= */
/* ------------------------------------------- */
/* ESTILOS PARA MAPA EN CONTACTO (ESCALA DE GRISES) */
/* ------------------------------------------- */
/* Estilo para el contenedor del mapa */
.map-container{
    border-radius: 5px;
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    border: 1px solid #ccc; /* Borde sutil */
}
.map-container iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/* Aplicar el filtro de escala de grises al iframe con el ID 'mapa-contacto' */
#mapa-contacto {
    display: block;
}
img.icon_footer{
	height: 100px;
}
.feature.map {
  height: 100%;
}
.feature.map iframe {
  height: 100%;
  width: 100%;
  border: 0;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(99%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}
/* Slider CSS - Keep this as is for other sliders you might have, but the main slider is now Scroll Snap */
.slick-list,
.slick-slider,
.slick-track {
	position: relative;
	display: block;
	width:  calc(100%);
}
/* ... (Rest of Slick CSS omitted for brevity, but keep in file) ... */
/* =========================================
   NUEVA LÓGICA DE SCROLL SNAP (REELS/TIKTOK)
   ========================================= */
.slides {
  position:relative;
  height:100vh;
  height:100dvh; /* Altura móvil dinámica */
  width:100%;
  filter: saturate(0.8) ;
    transition: filter 0.4s ease;
  /* Activar Scroll Snap Vertical */
  overflow-y: scroll;
  /* 🚨 CAMBIO CLAVE: El !important anula la manipulación del JS 🚨 */
  scroll-snap-type: y mandatory !important;
  scroll-behavior: auto !important;
  /* Ocultar barra de scroll nativa pero mantener funcionalidad */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
.slides::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
/* Estilos de cada Slide */
.slide {
  position:relative;
  width:100%;
  height:100vh;
  /* Puntos de anclaje */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:24% 6% 8% 6%;
  box-sizing:border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Overlay oscuro para legibilidad */
.slide::before{
  content:"";
  position:absolute;
  inset:0;
  /*background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.12) 100%);*/
  z-index:1;
  pointer-events:none;
}
.desktop .video-mobile-container {
    display: none;
}
.mobile .video-desktop-container {
    display: none;
}
/* ---------------------------------------------------------------------------------- */
/* --- REGLA UNIVERSAL: Dimensionamiento y Centrado (Mobile y Desktop) --- */
/* ---------------------------------------------------------------------------------- */
.video-mobile-container video,
.video-desktop-container video {
    /* 1. CLAVE: Ocupar el 100% del contenedor (que ya tiene 100% altura/ancho) */
    width: 100%;
    height: 100%;
    /* 2. CLAVE: Usar object-fit: cover para escalar, centrar y recortar (si es necesario) */
    object-fit: cover;
    /* 3. Posicionamiento limpio (sin las viejas traslaciones del -50%) */
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    /* Asegurar z-index si es necesario */
    z-index: 0;
}
/* ========================================= */
/* ESTILOS PARA LA ÚLTIMA SLIDE (FONDO BLANCO) */
/* ========================================= */
/* 1. Establece un fondo blanco sólido y elimina cualquier imagen/color de fondo genérico en la última slide. */
.slide:last-of-type {
    background-color: white !important;
    background-image: none !important;
}
/* 2. Anula el degradado oscuro (linear-gradient) que aplica el pseudo-elemento ::before en la última slide. */
.slide:last-of-type::before {
    background-image: none !important;
}
/* Contenido interno del slide */
.mobile .slide-inner{
  position:relative;
  z-index:2;
  color:#fff;
  max-width:86%;
  text-align:left;
  bottom: 7.5vh;
  bottom: 7.5dvh;
  padding: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.desktop .slide .slide-inner{
    display: none;
}
/* Clase activada por JS cuando el slide es visible */
.slide-inner.visible {
  opacity: 1;
  transform: translateY(0);
}
.slide-inner h2{
  margin:0 0 6px 0;
  font-size:26px;
  letter-spacing:0.02em;
  font-weight:700;
}
.slide-inner p{
  margin:0;
  font-size:14px;
  line-height:1.3;
  opacity:0.95;
}
.final-menu-slide {
    /* Clave para organizar el logo, el menú y empujar el footer */
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 20px 20px 80px 20px; /* Deja espacio al footer */
    /* El background ya está en el HTML por si acaso */
}
/* El contenido interno debe estirarse para empujar el footer */
.final-menu-slide .slide-inner {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 0 !important;
    width: 100%;
    margin: 0;
    z-index: 1701;
}
.mobile .final-menu-slide .slide-inner {
    width: 100% !important;
}
.desktop .final-menu-slide .slide-inner {
    width: auto !important;
}
.slide-footer {
    /* Para que el footer se mantenga fijo abajo del slide */
    position: absolute;
    bottom: 0;
    left: 0;
    /* ... el resto de estilos ... */
}
/* =========================================
   (Bubbles y Nuevo Título Vertical)
   ========================================= */
/* Centrado vertical para que el título tenga espacio fijo arriba */
.mobile #scroll-indicator{
  position:fixed;
  right:16px;
  top:75%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  /* Espacio entre las bolitas */
  gap: 12px;
  z-index:1100;
  pointer-events:auto;
  align-items: center; /* Centrar horizontalmente el título y las bolitas */
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
  opacity: 1; /* Por defecto, visible */
  visibility: visible;
}
/* Reemplaza la regla de .desktop #scroll-indicator */
.desktop #scroll-indicator{
  position:fixed;
  left: 50%;
  bottom:10%;
  transform:translate(-50%, -50%); /* Centra el contenedor en X y Y */
  display:flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  z-index:1100;
  pointer-events:auto;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
  opacity: 1;
  visibility: visible;
}
/* Estilos para la transición suave del indicador de scroll */
#scroll-indicator {
    /* CLAVE 1: Define la duración de la transición para 'opacity' y 'visibility' */
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
    opacity: 1; /* Por defecto, visible */
    visibility: visible;
}
/* CLAVE 2: Clase que se añade cuando el indicador debe ocultarse */
#scroll-indicator.hidden {
    opacity: 0;
    visibility: hidden; /* Importante para que no se pueda hacer clic */
}
/** * Solución de alineación definitiva.
 * Usamos transform-origin para alinear el inicio del texto (la "izquierda")
 * con el punto de anclaje (top: 0).
 */
#active-title-display {
    /* Posicionamiento y Rotación */
    position: absolute;
    top: -25px; /* Anclamos al centro vertical de la primera burbuja (el tope del contenedor) */
    left: 50%; /* Alineamos al centro horizontal de la columna */
    /* AJUSTES CLAVE */
    /* 1. Define el punto de rotación en la esquina inferior izquierda. */
    transform-origin: 0% 100%;
    /* 2. Rota 270 grados.
       3. Mueve -5px hacia la izquierda (eje Y rotado). Esto es el AJUSTE FINAL.
    */
    transform: rotate(270deg) translate(0, 7.5px);
    /* Estilo del texto */
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    /* Transición de aparición/desaparición */
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none; /* No bloquear clicks */
}
/* El JavaScript añade y quita esta clase para mostrar el título */
#active-title-display.visible {
    opacity: 1;
}
.mobile .bubble{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  /* ESTADO INACTIVO: Solo el punto pequeño */
  background:rgba(255, 255, 255, 0.4);
  width:6px;
  height:6px;
  border-radius:50%;
  font-size:0;
  line-height:0;
  padding:0;
  overflow: visible;
  white-space:nowrap;
  box-shadow: none;
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  opacity:1;
  cursor: pointer;
  position: relative;
}
.mobile .bubble.active{
  /* ESTADO ACTIVO: Punto blanco y destacado */
  background:#ffffff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}
/* IMPORTANTE: Eliminamos los ::after que causaban problemas */
.bubble::after, .bubble.active::after {
    content: none !important;
}
/* Keyframe de ejemplo (puedes dejarlo, no interfiere) */
@keyframes slideIn {
  from {
    -webkit-filter: blur(15px);
            filter: blur(15px);
  }
  to {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@keyframes slideOut {
  from {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  to {
    -webkit-filter: blur(15px);
            filter: blur(15px);
  }
}
/* BUBBLE ESCRITORIO */
.desktop .bubble {
  display: inline-block;
  width: auto; /* Permite que el ancho se ajuste al contenido */
  height: auto; /* Permite que la altura se ajuste al contenido */
  border: 0;
  padding: 0 10px;
  position: relative;
  color: transparent;
  background: transparent;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
}
/* Ocultar el título vertical que ya no se necesita en desktop */
.desktop #active-title-display {
    display: none !important;
}
.mobile .bubble .title-text {
    display: none !important;
}
.desktop .bubble.active{
  background: transparent;
}
/* Modifica la regla de .desktop .bubble .title-text */
.desktop .bubble .title-text {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: block;
  right: auto;
  width: auto;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.2em;
  font-weight: 300;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;
}
.desktop .bubble.active .title-text {
  opacity: 1; /* Texto completamente visible en la burbuja activa */
  font-weight: bold;
}
/* =========================================
   NUEVO: POP-UP DE CONTACTO
   ========================================= */
/* Overlay principal (Oculto por defecto) */
#contact-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* CORRECCIÓN DE ALTURA */
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente */
    z-index: 2500; /* Asegurarse de que esté por encima de todo (2500 > 2000) */
    display: none; /* Iniciar oculto */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
/* Contenedor del contenido (La "hoja" blanca) */
#contact-popup-content {
    position: absolute;
    top: 0;
    right: 0;
    /* CORRECCIÓN DE ANCHO */
    width: 85%; /* REDUCIDO para que no sea 'gigantesco' */
    /* CORRECCIÓN DE ALTURA */
    height: 100dvh; /* Usa Dynamic Viewport Height */
    background-color: #ffffff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    /* Iniciar fuera de la pantalla para animación */
    transform: translateX(100%);
    transition: transform 0.4s ease-out;
    padding: 20px;
    padding-top: 100px; /* Espacio para la X de cierre */
    overflow-y: auto;
}
/* Clase para mostrar el Pop-up */
#contact-popup-overlay.open {
    display: block;
    opacity: 1;
}
#contact-popup-overlay.open #contact-popup-content {
    transform: translateX(0); /* Desplazar hacia dentro */
}
/* Estilos para el botón de cierre (Reutilizando la lógica de la hamburguesa 'open') */
.hamburger-close {
  /* Posicionamiento y Z-Index */
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 16px; /* Ajustado para que el botón esté fijo en la pantalla */
  width: 24px;
  height: 44px; /* Área de click más grande */
  background-color: transparent;
  z-index: 2600; /* Por encima del contenido */
}
.hamburger-close span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #222; /* El fondo es blanco, así que las líneas son negras */
  border-radius: 5px;
  opacity: 1;
  left: 0;
  /* Animación de las líneas para formar la X (Igual que #hamburger.open) */
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  /* CLAVE: Reutilizar el estado 'open' del menú */
  top: 21px;
}
/* Línea 1: Rotada para ser la primera parte de la X */
.hamburger-close span:nth-child(1) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
/* Línea 2: Oculta (La línea central de la hamburguesa) */
.hamburger-close span:nth-child(2) {
    opacity: 0;
}
/* Línea 3: Rotada para ser la segunda parte de la X */
.hamburger-close span:nth-child(3) {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
/* Estilo del contenido interno */
.popup-inner-content {
    color: #222;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
}
/* **CLAVE: RESET DE ESTILOS GLOBALES DE MENÚ** */
/* 1. Resetear el UL dentro del pop-up (Sobrescribir position: fixed, left: 0) */
.popup-inner-content ul {
    width: auto;
    position: relative;
    top: auto;
    left: auto;
    margin-top: 0;
    padding: 0;
    list-style: none;
    z-index: auto;
    color: #222 !important;
}
/* 2. Resetear el LI dentro del pop-up (Sobrescribir left: 100%) */
/* FIX: Aumentada la especificidad con el ID del contenedor y se añade !important a 'left' */
#contact-popup-content .popup-inner-content ul li {
    font-size: 1.2em !important;
    position: relative;
    margin-bottom: 20px;
    margin-left: 0;
    left: 0 !important; /* <--- ¡CAMBIO CLAVE! Esto soluciona la superposición de estilos. */
    cursor: pointer;
    will-change: auto;
    color: #222 !important;
    transition: none; /* Añadido para anular cualquier transición del menú global */
}
/* 3. Asegurar que los enlaces y otros elementos de texto sean negros */
.popup-inner-content ul li a {
    color: #222 !important;
    text-decoration: none;
}
.popup-inner-content p, .popup-inner-content h2 {
    color: #222 !important;
}
/* pruebas */
/* @import bourbon;   <-- Eliminado */
.content {
  height: auto; /* Esto crea el espacio de scroll necesario */
}
.wrapper {
  /* +display(flex) */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* +justify-content(center) */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* +align-items(center) */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* +size(100% 100vh) */
  width: 100%;
  height: 100vh;
  /* +position(fixed, 0px null null 0px) */
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: null; /* Opcional, pero se suele omitir */
  right: null;  /* Opcional, pero se suele omitir */
}body
.box-chapter {
  /* +flex(none) */
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  /* +size(100px) */
  height: 100px;
  line-height: 100px;
  text-align: left;
  font-size: 25px;
  color: #fff;
  background: #ff8330;
  will-change: transform;
}
/* Manejo de nth-of-type (Anidamiento de Sass a CSS) */
.mobile .box-chapter:nth-of-type(1) {
  background: #ffffff;
  width: 10%;
  height: 200px !important;
  margin-top: 35vh;
}
.desktop .box-chapter:nth-of-type(1) {
  background: #ffffff;
  width: 17%;
  height: 200px !important;
  margin-top: 35vh;
}
.mobile .box-chapter:nth-of-type(2) {
  background: #ffffff;
  color: #000;
  width: 90%;
  margin-top: 15vh;
  margin-left: -1px;
  padding-left: 20px;
  box-sizing: border-box;
}
.desktop .box-chapter:nth-of-type(2) {
  background: #ffffff;
  color: #000;
  width: 83%;
  margin-top: 15vh;
  margin-left: -1px;
  padding-left: 20px;
  box-sizing: border-box;
}
.box-chapter:nth-of-type(3) {
  background: #30FFFF;
}
.box-chapter:nth-of-type(4) {
  background: #B3FF30;
}
.box-chapter:nth-of-type(6) {
  background: #1BE059;
}
/*pruebas 2*/
#arrow{
    margin-top: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.item {
  box-sizing: border-box;
  width: 200px;
  margin: 25px auto;
  text-align: left;
  color: #1e1e1e;
}
.item-x {
    width: 70%;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 35px;
    padding: 3%;
}
.item-x span {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    white-space: nowrap;
    color: #1e1e1e;
}
.mobile .item-xx {
	background-image: url(../img/mobile/cursos_continuados/escultura_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 200px;
    margin-left:auto;
    margin-right: auto;
}
.desktop .item-xx {
	background-image: url(../img/mobile/cursos_continuados/escultura_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 60%;
    height: 400px;
    margin-left:auto;
    margin-right: auto;
}
.item-xxx {
    width: auto;
    border:0;
    background-color: #D4A995;
    font-size: 25px;
    white-space: nowrap;
    box-sizing: border-box;
    margin-top: 15vh;
    margin-bottom: 25px;
    padding: 3%;
}
.mobile .item-00 {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    margin-left: calc(10% + 20px);
    margin-bottom: 0;
    width: 75%;
    padding-top: 35px;
    border-bottom: black 1px solid;
}
.desktop .item-00 {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    margin-left: calc(20%);
    margin-bottom: 0;
    width: 60%;
    padding-top: 35px;
    border-bottom: black 1px solid;
}
.mobile .item-01 {
    font-family: "Helvetica LT Std Cond Light";
    font-weight: lighter;
    text-align: left;
    width: 90%;
    height: auto !important;
    margin-left: 10%;
    margin-top:0;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.desktop .item-01 {
    font-family: "Helvetica LT Std Cond Light";
    font-weight: lighter;
    text-align: left;
    width: 60%;
    height: auto !important;
    margin-left: 20%;
    margin-top:0;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.mobile .item-02 {
	background-image: url(../img/mobile/cursos_continuados/escultura_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 80%;
    height: 200px;
    margin-left:0;
    margin-right: auto;
    margin-top:20px;
}
.desktop .item-02 {
	background-image: url(../img/mobile/cursos_continuados/escultura_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 60%;
    height: 400px;
    margin-left:0;
    margin-right: auto;
    margin-top:20px;
}
.mobile .item-03 {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    width: 75%;
    margin-left: calc(10% + 20px);
    margin-bottom: 0;
    border-bottom: black 1px solid;
}
.desktop .item-03 {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    width: 60%;
    margin-left: calc(20%);
    margin-bottom: 0;
    border-bottom: black 1px solid;
}
.mobile .item-04 {
    font-family: "Helvetica LT Std Cond Light";
    font-weight: lighter;
    text-align: left;
    width: 90%;
    height: auto !important;
    margin-left: 10%;
    margin-top:0;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.desktop .item-04 {
    font-family: "Helvetica LT Std Cond Light";
    font-weight: lighter;
    text-align: left;
    width: 60%;
    height: auto !important;
    margin-left: 20%;
    margin-top:0;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.mobile .item-05 {
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 200px;
    margin-top:20px;
}
.desktop .item-05 {
	background-image: url(../img/mobile/cursos_continuados/escultura_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 400px;
    margin-top:20px;
}
.mobile .item-06 {
    background-image: url(../img/mobile/cursos_continuados/modelado_chapter_01.webp);
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: center;
    background-size: cover;
    width: 60%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: 200px;
    margin-right: 5%;
}
.desktop .item-06 {
    background-image: url(../img/mobile/cursos_continuados/modelado_chapter_01.webp);
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: center;
    background-size: cover;
    width: 40%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: 400px;
    margin-right: 10%;
}
.mobile .item-07 {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    width: 75%;
    white-space: nowrap;
    margin-left: calc(10% + 20px);
    margin-bottom: 0;
    border-bottom: black 1px solid;
}
.desktop .item-07 {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    width: 60%;
    white-space: nowrap;
    margin-left: calc(20%);
    margin-bottom: 0;
    border-bottom: black 1px solid;
}
.mobile .item-08 {
    font-family: "Helvetica LT Std Cond Light";
    font-weight: lighter;
    text-align: left;
    width: 90%;
    height: auto !important;
    margin-left: 10%;
    margin-top:0;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.desktop .item-08 {
    font-family: "Helvetica LT Std Cond Light";
    font-weight: lighter;
    text-align: left;
    width: 60%;
    height: auto !important;
    margin-left: 20%;
    margin-top:0;
    position: relative;
    z-index: 100;
    color: #222;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.mobile .item-09 {
    background-image: url(../img/mobile/cursos_continuados/torno_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 70%;
    height: 200px;
    margin-left:0;
    margin-top:20px;
}
.desktop .item-09 {
    background-image: url(../img/mobile/cursos_continuados/torno_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 400px;
    margin-left:0;
    margin-top:20px;
}
.mobile .item-10 {
    background-image: url(../img/mobile/cursos_continuados/modelado_chapter_01.webp);
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: center;
    background-size: cover;
    width: 60%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: 200px;
}
.desktop .item-10 {
    background-image: url(../img/mobile/cursos_continuados/modelado_chapter_01.webp);
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: center;
    background-size: cover;
    width: 40%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: 400px;
}
.item-11 {
    background-color: #D4A995;
    width: 100%;
    height: auto;
    padding: 25px;
    margin-top: 10vh;
}
.mobile .item-11 span {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    white-space: nowrap;
    color: #1e1e1e;
}
.desktop .item-11 span {
    font-family: "Fillguy";
    font-weight: lighter;
    font-size: 25px;
    white-space: nowrap;
    color: #1e1e1e;
    margin-left: 20%;
}
.mobile .item-12 .top-logo-container {
    width: 100%;
    text-align: center;
    padding: 20% 0 0 0;
}
.desktop .item-12 .top-logo-container {
    width: 100%;
    text-align: center;
    padding: 7.5% 0 0 0;
}
.mobile #horario {
    width: 100%;
    background-color: #ffffffb0;
    color: #1e1e1e;
    padding: 10px;
    box-sizing: border-box;
    border: #1e1e1e 0px solid;
    margin-left: auto;
    margin-right: auto;
}
.desktop #horario {
    width: 60%;
    background-color: #ffffffb0;
    color: #1e1e1e;
    padding: 10px;
    box-sizing: border-box;
    border: #1e1e1e 0px solid;
    margin-left: auto;
    margin-right: auto;
}
.item-12 {
    background-color: #fff;
    width: 100%;
    height: 90vh;
}
/* Fin de semana */
.mobile .item-13 {
	background-image: url(../img/mobile/fin_semana/escultura_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 200px;
    margin-top:20px;
}
.desktop .item-13 {
	background-image: url(../img/fin_semana/cursos_continuados/escultura_chapter_01.webp);
	background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: initial;
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 400px;
    margin-top:20px;
}