/* ============================================================
   06-HOME.CSS — Hero Section, Calendario
   dimonix.gg
   ============================================================ */

/* ── 1. HERO SECTION ── */
.hero-section {
    position: relative;
    width: 100%; flex: 1;
    margin-top: var(--header-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: url('../../img/fondo.webp') center/cover no-repeat;
    z-index: 1;
}

/* ── 2. HERO SPLIT CONTAINER ── */
.hero-split-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: clamp(1200px, 90vw, 2400px);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 80px);
    padding-left:  clamp(20px, 6vw, 110px);
    padding-right: clamp(20px, 4vw, 90px);
}

/* ── 3. COLUMNA IZQUIERDA ── */
.hero-split-left { flex: 1; max-width: 650px; text-align: left; }

.hero-title {
    font-size: clamp(2.8rem, 7vw, 7rem);
    line-height: 0.95;
    margin-bottom: 25px;
    color: #fff;
    text-shadow: 0 0 50px rgba(46, 15, 215, 0.3);
    letter-spacing: -14px;
}

.hero-title span {
    display: inline-block;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.anim-text-top   { animation: slideInDown 0.8s forwards 0.2s; color: #fff !important; }
.anim-text-left  { animation: slideInLeft  0.8s forwards 0.4s; margin-left: 15px; color: #fff !important; }
.anim-text-right { animation: slideInRight 1.0s forwards 0.6s; color: var(--brand-primary); display: block !important; }

.hero-subtitle  { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 40px; max-width: 90%; line-height: 1.5; }
.hero-buttons   { display: flex; gap: 20px; justify-content: flex-start; }

/* ── 4. COLUMNA DERECHA (VÍDEO / CALENDARIO) ── */
.hero-split-right {
    flex: 1.6;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    min-width: 0;
}
.hero-split-right .calendar-container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: clamp(520px, 58vh, 760px);
    display: flex;
    flex-direction: column;
}
.cal-grid { flex: 1 1 auto; min-height: 0; }

/* ── 5. VÍDEO WRAPPER ── */
.video-wrapper {
    position: relative;
    width: 100%; max-width: 900px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(46, 15, 215, 0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: perspective(1000px) rotateY(-5deg);
    transition: var(--transition);
}
.video-wrapper:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
    border-color: var(--brand-primary);
}
.video-wrapper video { width: 100%; height: auto; display: block; object-fit: cover; }
.video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(46,15,215,0.2), transparent);
    pointer-events: none;
}
.video-controls { position: absolute; bottom: 20px; right: 20px; z-index: 10; display: flex; gap: 10px; }
.video-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    transition: var(--transition);
}
.video-btn:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); transform: scale(1.1); }

/* ── 6. RESPONSIVE HOME ── */

/* 4K (≥ 3840px) */
@media (min-width: 3840px) {
    .hero-split-container { max-width: 3600px; padding-left: 8vw; padding-right: 6vw; }
    .hero-title           { font-size: 10rem; letter-spacing: -20px; }
    .hero-subtitle        { font-size: 2.5rem; }
    .hero-split-right .calendar-container { min-height: clamp(800px, 62vh, 1200px); }
    .video-btn            { width: 60px; height: 60px; font-size: 1.4rem; }
}

/* 2K / QHD (≥ 1921px) */
@media (min-width: 1921px) {
    .hero-split-container { max-width: 3000px; padding-left: clamp(40px, 7vw, 140px); padding-right: clamp(40px, 5vw, 120px); }
    .hero-split-right     { flex: 1.9; }
    .hero-title           { font-size: 8rem; }
    .hero-subtitle        { font-size: 1.8rem; max-width: 800px; }
    .hero-split-right .calendar-container { min-height: clamp(620px, 60vh, 920px); }
    .video-wrapper        { max-width: 1600px; }
    .video-btn            { width: 50px; height: 50px; font-size: 1.2rem; }
}

/* iPad Pro horizontal / laptop (1181-1400px) */
@media (max-width: 1400px) and (min-width: 1181px) {
    .hero-title { font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -8px; }
}

/* Tablet apilado (≤ 1200px) */
@media (max-width: 1200px) {
    .hero-section         { min-height: 80vh; flex: none; margin-top: var(--header-height); }
    .hero-split-container { flex-direction: column; padding: 40px 20px; text-align: center; }
    .hero-split-left      { max-width: 100%; text-align: center; order: 2; }
    .hero-buttons         { justify-content: center; }
    .hero-split-right     { width: 100%; order: 1; }
    .hero-split-right .calendar-container { min-height: 620px; }
    .video-wrapper        { transform: none; }
    .hero-title           { letter-spacing: -7px; line-height: 1.1; }
}

/* iPad Air / iPad mini vertical (768-912px) */
@media (max-width: 912px) and (min-width: 768px) {
    .hero-title    { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -5px; }
    .hero-subtitle { font-size: 1rem; }
    .hero-split-right .calendar-container { min-height: 500px; }
}

/* Móvil grande (≤ 767px) */
@media (max-width: 767px) {
    .hero-title    { font-size: clamp(2.2rem, 8vw, 3rem); letter-spacing: -4px; }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 25px; }
    .hero-buttons  { flex-wrap: wrap; gap: 12px; }
    .hero-split-right .calendar-container { min-height: 440px; }
}

/* iPhone SE / muy pequeño (≤ 375px) */
@media (max-width: 375px) {
    .hero-title    { font-size: 2rem; letter-spacing: -3px; }
    .hero-subtitle { font-size: 0.9rem; }
}