/* --- ESTILOS GENERALES Y FONDO --- */
body, html { 
    margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; 
    background-color: #000; color: #fff; overflow-x: hidden; scroll-behavior: smooth; 
    background-image: url('assets/img/imagen-rana.jpg');
    background-size: cover; background-position: center;
    background-attachment: fixed; background-repeat: no-repeat;
}

/* --- CLASE MAESTRA PARA EFECTO CRISTAL Y BORDES REDONDOS --- */
.tarjeta-redonda, .seccion-contenido, .contacto-section {
    background: rgba(12, 12, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(9, 195, 219, 0.3);
    border-radius: 25px;
    padding: 40px;
    margin: 30px 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tarjeta-redonda:hover, .seccion-contenido:hover {
    box-shadow: 0 15px 35px rgba(9, 195, 219, 0.2);
    border-color: rgba(9, 195, 219, 0.6);
}

/* --- BARRA DE NAVEGACIÓN --- */
.navbar { 
    position: fixed; top: 0; left: 0; width: 100%; display: flex; 
    justify-content: space-between; align-items: center; padding: 20px 50px; 
    z-index: 100; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(15px); 
    border-bottom: 1px solid rgba(9, 195, 219, 0.3); box-sizing: border-box;
}
.logo { font-size: 1.5rem; font-weight: 900; text-decoration: none; background: linear-gradient(135deg, #09c3db, #0086ED); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links { display: flex; gap: 25px; }
.nav-links a { color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
.nav-links a:hover { color: #09c3db; }

/* --- SECCIÓN HERO --- */
.hero-section { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; box-sizing: border-box; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1; pointer-events: none; }

.hero-textos { 
    position: relative; 
    z-index: 2; 
    max-width: 900px;
    background: linear-gradient(rgba(12, 12, 15, 0.75), rgba(12, 12, 15, 0.85)), url('assets/img/imagenportadainicio1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.titulo-principal { font-size: 3.5rem; font-weight: 900; color: #fff; margin: 0; text-transform: uppercase; }

.hero-content {
    position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 20px 50px; padding: 30px;
}

.video-container {
    margin: 15px 0; border-radius: 12px; overflow: hidden; position: relative; z-index: 5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.video-container iframe { width: 100%; height: 250px; border: none; display: block; }

.botones-accion { display: flex; gap: 10px; margin-top: 15px; }

/* --- CONTADOR --- */
.cronometro-elegante { 
    display: flex; 
    gap: 8px; 
    margin-top: 20px; 
    justify-content: center; 
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
}
.caja-tiempo-elegante {
    background: rgba(9, 195, 219, 0.08); 
    border: 1px solid rgba(9, 195, 219, 0.35); 
    padding: 10px 12px;
    border-radius: 14px; 
    text-align: center; 
    backdrop-filter: blur(6px); 
    box-shadow: inset 0 0 10px rgba(9,195,219,0.1);
    flex: 1;
    min-width: 65px;
}
.caja-tiempo-elegante span { font-size: 1.5rem; font-weight: 900; color: #09c3db; display: block; line-height: 1.1; text-shadow: 0 0 10px rgba(9,195,219,0.4); }
.caja-tiempo-elegante small { font-size: 0.6rem; letter-spacing: 1px; color: #bbb; font-weight: bold; }

/* --- CINTA ANIMADA INFINITA --- */
.cinta-container {
    overflow: hidden; background: rgba(9, 195, 219, 0.2); padding: 12px 0; margin-top: 30px; border-top: 1px solid rgba(9,195,219,0.4); border-bottom: 1px solid rgba(9,195,219,0.4);
    position: relative; z-index: 2; width: 100%;
}
.cinta-track { 
    display: flex; 
    white-space: nowrap; 
    gap: 30px; 
    width: max-content; 
    animation: desplazarCinta 20s linear infinite; 
}
.cinta-grupo { 
    display: flex; 
    gap: 30px; 
    font-weight: bold;
    align-items: center;
}
@keyframes desplazarCinta { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-25%); } 
}

/* --- TICKETS DE EVENTOS --- */
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 400px)); gap: 20px; margin-top: 25px; justify-content: center; }
.tarjeta-ticket { 
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.95), rgba(10, 10, 12, 0.98)); backdrop-filter: blur(10px); 
    border-radius: 16px; border: 1px solid rgba(9, 195, 219, 0.35); display: flex; flex-direction: column;
    width: 100%; max-width: 380px; margin: 0 auto; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tarjeta-ticket:hover { transform: translateY(-5px); border-color: #09c3db; box-shadow: 0 12px 30px rgba(9, 195, 219, 0.25); }
.ticket-imagen { width: 100%; height: 140px; overflow: hidden; border-bottom: 1px solid rgba(9, 195, 219, 0.25); }
.ticket-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tarjeta-ticket:hover .ticket-imagen img { transform: scale(1.05); }
.ticket-info { padding: 15px 18px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.ticket-info h3 { margin: 5px 0; font-size: 1.1rem; color: #fff; }
.ticket-info p { margin: 0 0 10px 0; font-size: 0.85rem; color: #ccc; }
.etiqueta-fecha { font-size: 0.7rem; font-weight: bold; color: #09c3db; letter-spacing: 1px; text-transform: uppercase; }
.ticket-footer-flex { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.15); flex-wrap: wrap; gap: 8px; }

/* MINI CONTADOR */
.cronometro-mini-elegante { display: flex; gap: 4px; font-weight: bold; }
.cronometro-mini-elegante div { background: rgba(9, 195, 219, 0.1); border: 1px solid rgba(9, 195, 219, 0.3); padding: 3px 6px; border-radius: 6px; text-align: center; }
.cronometro-mini-elegante span { color: #09c3db; font-size: 0.8rem; }
.cronometro-mini-elegante small { font-size: 0.5rem; color: #aaa; display: block; }

/* --- CARRUSEL DE TALLERES / MÓDULOS TÁCTIL --- */
.carrusel-talleres {
    display: flex; gap: 20px; overflow-x: auto; padding: 20px 40px; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.carrusel-talleres::-webkit-scrollbar { height: 10px; }
.carrusel-talleres::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); border-radius: 10px; }
.carrusel-talleres::-webkit-scrollbar-thumb { background: #09c3db; border-radius: 10px; }

.tarjeta-taller {
    flex: 0 0 340px; scroll-snap-align: center;
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.95), rgba(15, 15, 18, 0.98));
    border: 1px solid rgba(9, 195, 219, 0.35); border-radius: 16px; padding: 25px;
    display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6); transition: transform 0.3s;
}
.tarjeta-taller:hover { transform: translateY(-5px); border-color: #09c3db; }
.tarjeta-taller h3 { color: #fff; margin-top: 0; font-size: 1.2rem; border-bottom: 1px dashed rgba(9,195,219,0.3); padding-bottom: 10px; }
.tarjeta-taller ul li { margin-bottom: 8px; }
.precio-taller { margin-top: 15px; text-align: center; border-top: 1px dashed rgba(255,255,255,0.15); padding-top: 10px; }
.precio-taller .valor { font-size: 1.1rem; font-weight: bold; color: #09c3db; display: block; }
.precio-taller .mas-mat { font-size: 0.75rem; color: #bbb; text-transform: uppercase; letter-spacing: 1px; }

.caja-resumen-item {
    background: rgba(20, 20, 25, 0.8);
    border: 1px solid rgba(9, 195, 219, 0.3);
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #fff;
}

/* --- CARRUSEL DE COLABORADORES AUTOMÁTICO E INTERACTIVO --- */
.carrusel-logos-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 20px 0;
    margin-top: 15px;
    position: relative;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.carrusel-logos-container:active {
    cursor: grabbing;
}

.carrusel-logos-container::-webkit-scrollbar {
    display: none; 
}

.carrusel-logos-track {
    display: flex;
    flex-wrap: nowrap; 
    gap: 15px;
    width: max-content;
    align-items: center;
    animation: desplazarLogos 25s linear infinite;
}

.carrusel-logos-container:hover .carrusel-logos-track,
.carrusel-logos-container.active .carrusel-logos-track {
    animation-play-state: paused;
}

@keyframes desplazarLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.logo-flotante-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: rgba(20, 20, 25, 0.85);
    border: 1px solid rgba(9, 195, 219, 0.4);
    border-radius: 50%;
    width: 75px;
    height: 75px;
    min-width: 75px;
    min-height: 75px;
    max-width: 75px;
    max-height: 75px;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    overflow: hidden;
}

.logo-flotante-item img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none; 
}

.logo-flotante-item span {
    display: none;
}

.logo-flotante-item:hover {
    transform: scale(1.05);
    border-color: #09c3db;
    box-shadow: 0 0 12px rgba(9, 195, 219, 0.6);
    background: rgba(9, 195, 219, 0.2);
}

.colaborador-panel-detalle {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 450px;
    margin: 0 auto;
}

.colaborador-panel-detalle img, 
#detalle-img {
    max-width: 450px !important;
    max-height: 450px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* --- FORMULARIO Y BOTONES --- */
.formulario-inscripcion { background: rgba(18, 18, 22, 0.95); padding: 30px; border-radius: 16px; border: 1px solid rgba(9, 195, 219, 0.3); display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.campo-grupo { display: flex; flex-direction: column; gap: 5px; }
.campo-grupo input, .campo-grupo select, .campo-grupo textarea { padding: 12px; background: #1a1a1e; border: 1px solid #333; color: #fff; border-radius: 8px; transition: border-color 0.3s, box-shadow 0.3s; }
.campo-grupo input:focus, .campo-grupo select:focus, .campo-grupo textarea:focus { border-color: #09c3db; box-shadow: 0 0 8px rgba(9,195,219,0.4); outline: none; }
.fila-whatsapp { display: flex; gap: 10px; }
.fila-whatsapp select { width: 110px; }
.fila-whatsapp input { flex: 1; }

.btn-reservar, .btn-agenda { background: #09c3db; color: #fff; padding: 12px 20px; border: none; font-weight: bold; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 8px; transition: background 0.2s, transform 0.1s, box-shadow 0.2s; text-align: center; }
.btn-reservar:hover { background: #07a6bb; box-shadow: 0 0 12px rgba(9,195,219,0.6); }
.btn-reservar:active, .btn-agenda:active { transform: scale(0.96); }
.btn-agenda { background: transparent; border: 1px solid #09c3db; color: #fff; }
.btn-agenda:hover { background: rgba(9, 195, 219, 0.15); }

.contacto-section { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; }
.contacto-info a { color: #09c3db; text-decoration: none; transition: color 0.2s; }
.contacto-info a:hover { color: #fff; text-decoration: underline; }

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
  .tarjeta-redonda, .seccion-contenido, .contacto-section { margin: 15px 12px; padding: 20px; border-radius: 16px; }
  .navbar { padding: 15px 20px; }
  .nav-links { display: none; } 
  .hero-content { margin: 15px 12px; padding: 15px; flex-direction: column; align-items: stretch; }
  .titulo-principal { font-size: 2.1rem; }
  .agenda-grid { grid-template-columns: 1fr; }
  .tarjeta-ticket { max-width: 100%; }
  .fila-whatsapp { flex-direction: column; }
  .fila-whatsapp select { width: 100%; }
  
  .logo-flotante-item {
      width: 60px;
      height: 60px;
      min-width: 60px;
      min-height: 60px;
      max-width: 60px;
      max-height: 60px;
  }
  .logo-flotante-item img {
      width: 34px !important;
      height: 34px !important;
      max-width: 34px !important;
      max-height: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;
  }
  
  .colaborador-panel-detalle {
    flex-direction: column;
    text-align: center;
  }
  
  #talleres > div:first-child { padding: 0; }
  .carrusel-talleres { padding: 20px 0; }
  .tarjeta-taller { flex: 0 0 85%; }
}