/* ═══════════════════════════════════════════════════════════
   css_home.css  |  Estilos exclusivos del HOME nuevo
   GlobalTech / Sistema Prisma ERP
   Guardar en: css/css_home.css
═══════════════════════════════════════════════════════════ */

/* ── CONTENEDOR ─────────────────────────────────────────── */
.hn-container{max-width:1160px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);box-sizing:border-box;}
*, *::before, *::after { box-sizing: border-box; }

/* ── GRADIENTE DE TEXTO ──────────────────────────────────── */
.hn-gradient{
    background:linear-gradient(135deg,#0052cc 0%,#00c896 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ── BADGES ─────────────────────────────────────────────── */
.hn-badge,.hn-sbadge{
    display:inline-block;background:#e8f0ff;color:#0052cc;
    font-size:.72rem;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;padding:.3rem .85rem;
    border-radius:9999px;margin-bottom:1rem;
}

/* ════════════════════════════════════════════════════════════
   HERO & LAPTOP VISUAL
════════════════════════════════════════════════════════════ */
.hn-hero{
    position:relative;background:#f7f9fc;
    padding:4.5rem 0 3rem;overflow:hidden;
}
.hn-hero-bg{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 70% 60% at 80% 40%,rgba(0,82,204,.06) 0%,transparent 70%),
               radial-gradient(ellipse 50% 50% at 10% 80%,rgba(0,200,150,.05) 0%,transparent 60%);
}
.hn-hero .hn-container{
    display:grid;grid-template-columns:1fr 1fr;
    gap:3rem;align-items:center;
}
.hn-hero-title{
    font-family:'Plus Jakarta Sans','Inter',sans-serif;
    font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:800;
    color:#0a0e1a;line-height:1.15;margin-bottom:1rem;
}
.hn-hero-sub{
    font-size:1rem;color:#4b5568;line-height:1.7;
    max-width:500px;margin-bottom:1.75rem;
}
.hn-hero-sub strong{color:#0a0e1a;}
.hn-hero-actions{display:flex;gap:.875rem;flex-wrap:wrap;margin-bottom:2rem;}

/* Botones */
.hn-btn-primary{
    display:inline-flex;align-items:center;gap:.5rem;
    background:#0052cc;color:#fff;font-weight:700;
    font-size:.9rem;padding:.8rem 1.6rem;border-radius:.5rem;
    transition:background .18s,transform .18s,box-shadow .18s;
    text-decoration:none;
}
.hn-btn-primary:hover{
    background:#003e99;transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,82,204,.35);
}
.hn-btn-ghost{
    display:inline-flex;align-items:center;gap:.625rem;
    color:#0a0e1a;font-weight:600;font-size:.9rem;
    padding:.8rem 1.4rem;border-radius:.5rem;
    border:1.5px solid #dde3ef;transition:border-color .18s,background .18s;
    text-decoration:none;
}
.hn-btn-ghost:hover{border-color:#0052cc;background:#e8f0ff;color:#0052cc;}

/* Stats */
.hn-hero-stats{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;}
.hn-stat strong{display:block;font-size:1.4rem;font-weight:800;color:#0052cc;}
.hn-stat span{font-size:.78rem;color:#9ca3af;font-weight:500;}
.hn-stat-div{width:1px;height:36px;background:#dde3ef;}

/* Contenedor Visual de la sección derecha */
.hn-hero-visual{position:relative;padding:1.5rem;display:flex;justify-content:center;align-items:center;}

/* ── NUEVO INTERFAZ DE LAPTOP MOCKUP ─────────────────────── */
.hn-laptop-mockup {
    position:relative;
    width:100%;
    max-width:580px;
    cursor:pointer;
    filter:drop-shadow(0 20px 40px rgba(10,14,26,0.12));
    transition:transform .3s ease;
    z-index:1;
}
.hn-laptop-mockup:hover {
    transform:scale(1.02);
}
.hn-laptop-mockup img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}

/* Capa Superpuesta de Play sobre la Laptop */
.hn-play-overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(10,14,26,0);
    transition:background .3s ease;
}
.hn-laptop-mockup:hover .hn-play-overlay {
    background:rgba(10,14,26,0.15);
}

/* Botón de Play Pulsante */
.hn-play-btn-large {
    width:68px;
    height:68px;
    background:#0052cc;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 28px rgba(0,82,204,0.4);
    position:relative;
    transition:transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background .25s;
}
.hn-play-btn-large svg {
    margin-left:4px; /* Centrado óptico del triángulo de play */
}
.hn-laptop-mockup:hover .hn-play-btn-large {
    transform:scale(1.12);
    background:#00c896;
    box-shadow:0 12px 28px rgba(0,200,150,0.4);
}

/* Efecto onda expansiva de play */
.hn-play-btn-large::before {
    content:'';
    position:absolute;
    inset:-4px;
    border:2px solid #0052cc;
    border-radius:50%;
    opacity:0.6;
    animation:hnPulseWave 2s infinite;
    transition:border-color .25s;
}
.hn-laptop-mockup:hover .hn-play-btn-large::before {
    border-color:#00c896;
}

@keyframes hnPulseWave {
    0% { transform:scale(1); opacity:0.8; }
    100% { transform:scale(1.5); opacity:0; }
}

/* Tarjetas flotantes */
.hn-float-card{
    position:absolute;background:#fff;border:1px solid #e5e9f0;
    border-radius:.75rem;padding:.75rem 1rem;
    display:flex;align-items:center;gap:.75rem;
    box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:.8rem;
    animation:hnFloat 3.5s ease-in-out infinite alternate;
}
.hn-fc-1{bottom:1.5rem;left:-2rem;animation-delay:0s;z-index:2;}
.hn-fc-2{top:1.5rem;right:-1rem;animation-delay:1.7s;z-index:2;}
.hn-float-card strong{display:block;font-weight:700;color:#0a0e1a;font-size:.82rem;}
.hn-float-card span{color:#9ca3af;font-size:.75rem;}
.hn-fc-icon{font-size:1.4rem;flex-shrink:0;}

@keyframes hnFloat{
    from{transform:translateY(0)}
    to{transform:translateY(-10px)}
}

/* ════════════════════════════════════════════════════════════
   MODAL PARA EL VIDEO DE YOUTUBE
════════════════════════════════════════════════════════════ */
.hn-modal-overlay {
    position:fixed;
    inset:0;
    background:rgba(10,14,26,0.85);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
    padding:1rem;
}
.hn-modal-overlay.show-modal {
    opacity:1;
    pointer-events:all;
}
.hn-modal-content {
    position:relative;
    width:100%;
    max-width:860px;
    background:#0a0e1a;
    border-radius:1rem;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 32px 64px rgba(0,0,0,0.5);
    transform:scale(0.9);
    transition:transform .35s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.hn-modal-overlay.show-modal .hn-modal-content {
    transform:scale(1);
}
.hn-modal-close {
    position:absolute;
    top:12px;
    right:16px;
    background:rgba(255,255,255,0.1);
    color:#fff;
    border:none;
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    transition:background .2s, transform .2s;
}
.hn-modal-close:hover {
    background:#ff5f57;
    transform:rotate(90deg);
}
.hn-video-container {
    position:relative;
    width:100%;
    padding-top:56.25%; /* Relación de Aspecto 16:9 */
}
.hn-video-container iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* ════════════════════════════════════════════════════════════
   SECCIÓN MÓDULOS DEMO INTERACTIVA
════════════════════════════════════════════════════════════ */
.hn-modulos{padding:5rem 0;}
.hn-section-head{text-align:center;max-width:620px;margin:0 auto 3rem;}
.hn-section-head h2{
    font-family:'Plus Jakarta Sans','Inter',sans-serif;
    font-size:clamp(1.4rem,3vw,2rem);font-weight:800;
    color:#0a0e1a;margin-bottom:.625rem;
}
.hn-section-head p{font-size:.95rem;color:#4b5568;}

/* Layout: tabs izquierda + visor derecha */
.hn-demo-layout{
    display:grid;grid-template-columns:280px 1fr;
    gap:1.5rem;align-items:start;
}

/* Tabs / lista de módulos */
.hn-mod-tabs{display:flex;flex-direction:column;gap:.375rem;}
.hn-mod-tab{
    display:flex;align-items:center;gap:.75rem;
    background:#fff;border:1px solid #e5e9f0;
    border-radius:.625rem;padding:.75rem 1rem;
    text-align:left;cursor:pointer;
    font-family:'Inter','Segoe UI',sans-serif;
    transition:all .18s;
}
.hn-mod-tab:hover{border-color:#0052cc;background:#e8f0ff;}
.hn-mod-tab.active{border-color:#0052cc;background:#0052cc;color:#fff;}
.hn-tab-icon{font-size:1.1rem;flex-shrink:0;}
.hn-tab-info{flex:1;display:flex;flex-direction:column;gap:.1rem;}
.hn-tab-info strong{font-size:.825rem;font-weight:700;}
.hn-tab-info span{font-size:.72rem;opacity:.7;}
.hn-mod-tab.active .hn-tab-info span{opacity:.85;}
.hn-tab-arr{flex-shrink:0;opacity:.4;}
.hn-mod-tab.active .hn-tab-arr{opacity:.8;}

/* Visor de pantalla interactivo */
.hn-mod-viewer{
    background:#fff;border:1px solid #e5e9f0;
    border-radius:1.25rem;overflow:hidden;
    box-shadow:0 16px 48px rgba(0,0,0,.1);
}
.hn-viewer-head{
    background:#f3f4f6;border-bottom:1px solid #e5e9f0;
    padding:.6rem 1.25rem;display:flex;align-items:center;gap:.75rem;
}
.hn-vdots{display:flex;gap:.35rem;}
.hn-dot{display:inline-block;width:10px;height:10px;border-radius:50%;}
.hn-dot.r{background:#ff5f57;}
.hn-dot.y{background:#febc2e;}
.hn-dot.g{background:#28c840;}
.hn-vurl{font-size:.75rem;color:#9ca3af;flex:1;text-align:center;}

/* Pantalla con transición de imagen */
.hn-viewer-screen{
    position:relative;aspect-ratio:16/9;
    background:#0a0e1a;overflow:hidden;
}
.hn-vimg{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:top;
    opacity:0;transition:opacity .35s;
}
.hn-vimg.vis{opacity:1;}

/* Loader spinner */
.hn-vloader{
    position:absolute;inset:0;display:flex;
    align-items:center;justify-content:center;
    background:rgba(10,14,26,.55);
    opacity:0;pointer-events:none;transition:opacity .2s;
}
.hn-vloader.show{opacity:1;}
.hn-vspin{
    width:30px;height:30px;
    border:3px solid rgba(255,255,255,.15);
    border-top-color:#00c896;border-radius:50%;
    animation:hnSpin .7s linear infinite;
}
@keyframes hnSpin{to{transform:rotate(360deg)}}

/* Pie del visor */
.hn-viewer-foot{
    padding:.875rem 1.25rem;
    display:flex;align-items:center;
    justify-content:space-between;
    border-top:1px solid #f0f2f7;
}
.hn-viewer-cta{
    background:#0052cc;color:#fff;
    font-size:.8rem;font-weight:700;
    padding:.4rem 1rem;border-radius:.4rem;
    transition:background .18s;
    text-decoration:none;
}
.hn-viewer-cta:hover{background:#003e99;}
.hn-viewer-hint{font-size:.75rem;color:#9ca3af;}

/* CTA debajo de la demo */
.hn-demo-bottom{
    text-align:center;margin-top:2.5rem;padding-top:2rem;
    border-top:1px solid #e5e9f0;
    display:flex;align-items:center;
    justify-content:center;gap:1.25rem;flex-wrap:wrap;
}
.hn-demo-bottom p{color:#4b5568;font-size:.95rem;}

/* ════════════════════════════════════════════════════════════
   BENEFICIOS / MÉTRICAS
════════════════════════════════════════════════════════════ */
.hn-beneficios{background:#0052cc;padding:3.5rem 0;}
.hn-bene-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:1px;background:rgba(255,255,255,.15);
    border-radius:.75rem;overflow:hidden;
}
.hn-bene-card{
    background:#0052cc;padding:2rem 1.5rem;
    text-align:center;transition:background .18s;
}
.hn-bene-card:hover{background:#003e99;}
.hn-bene-num{
    font-family:'Plus Jakarta Sans','Inter',sans-serif;
    font-size:clamp(2rem,4vw,3rem);font-weight:900;
    color:#00c896;line-height:1;margin-bottom:.625rem;
}
.hn-bene-card p{font-size:.85rem;color:rgba(255,255,255,.8);line-height:1.55;}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE MÓVILES Y TABLETS
════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
    .hn-hero .hn-container{grid-template-columns:1fr;text-align:center;}
    .hn-hero-sub{margin-inline:auto;}
    .hn-hero-actions{justify-content:center;}
    .hn-hero-stats{justify-content:center;}
    .hn-hero-visual{margin-top:1rem;}
    .hn-demo-layout{grid-template-columns:220px 1fr;}
    .hn-fc-1{left:0;}
    .hn-fc-2{right:0;}
}
@media(max-width:768px){
    .hn-demo-layout{grid-template-columns:1fr;gap:1rem;}
    .hn-mod-tabs{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:.5rem;
    }
    .hn-tab-info span,.hn-tab-arr{display:none;}
    .hn-mod-tab{padding:.6rem .875rem;}
    .hn-bene-grid{grid-template-columns:repeat(2,1fr);}
    .hn-play-btn-large { width:56px; height:56px; }
}
@media(max-width:480px){
    .hn-hero{padding:3rem 0 2rem;}
    .hn-modulos{padding:3rem 0;}
    .hn-bene-grid{grid-template-columns:1fr;}
    .hn-viewer-foot{flex-direction:column;gap:.5rem;text-align:center;}
    .hn-fc-1,.hn-fc-2{display:none;} /* Se ocultan en pantallas muy pequeñas para evitar cortes de layout */
    .hn-modal-content { border-radius:.5rem; }
}