/*==============================================================================
  Proyecto   : IDEAHN Soluciones 2.0
  Archivo    : hero-premium.css
  Versión    : 1.0.0
  Fecha      : 03 de Agosto de 2026
  Autor      : Carlos Del Cid Velásquez
  Arquitectura y Diseño:
               OpenAI ChatGPT 5.5

  Descripción:
      Hoja de estilos del nuevo Hero Premium de la página principal
      de IDEAHN Soluciones.

      Este componente reemplaza al Hero tradicional e incorpora:

      • Imagen corporativa tipo War Room
      • Overlay degradado para mejorar la legibilidad
      • Tipografía premium
      • Tarjetas de indicadores (Badges)
      • Botones modernos
      • Diseño Responsive
      • Animaciones suaves
      • Arquitectura independiente del Hero anterior

  Dependencias:
      • indexv1.html
      • images/hero-warroom-v2.jpg
      • Font Awesome
      • Google Fonts

  Historial de Cambios
  --------------------------------------------------------------------------
  03/08/2026  v1.0.0
      • Creación inicial del Hero Premium.
      • Primera versión del sistema de estilos.

==============================================================================*/
/*------------------------------------------------------------------------------
  HERO BACKGROUND

  Desktop:
      hero-warroom-v2.jpeg

  Mobile:
      hero-warroom-mobile.jpeg

------------------------------------------------------------------------------*/

:root{

    --hero-primary:#ffffff;
    --hero-secondary:#dbe7f3;
    --hero-accent:#3aa0ff;
    --hero-bg:#041a35;

    --hero-shadow:0 25px 60px rgba(0,0,0,.35);

}

/*============================================================*/

.hero-premium{

    position:relative;

    width:100%;

    min-height:760px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:#041a35;

}

/*============================================================*/

.hero-background{

    position:absolute;

    inset:0;

    background-image:url("../images/hero-warroom-v2.jpeg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    z-index:1;

}

/*============================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        90deg,

        rgba(4,26,53,.94) 0%,

        rgba(4,26,53,.88) 20%,

        rgba(4,26,53,.72) 42%,

        rgba(4,26,53,.38) 62%,

        rgba(4,26,53,.08) 100%

    );

}

/*============================================================*/

.hero-container{

    position:relative;

    z-index:3;

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:120px 60px;

}

/*============================================================*/

.hero-content{

    max-width:650px;

}

/*============================================================*/

.hero-premium h1{

    font-size:64px;

    line-height:1.05;

    font-weight:800;

    color:white;

    margin-bottom:32px;

    letter-spacing:-1px;

}

/*============================================================*/

.hero-subtitle{

    font-size:23px;

    line-height:1.75;

    color:var(--hero-secondary);

    margin-bottom:40px;

}

/*============================================================*/

.hero-highlight{

    color:white;

    font-weight:700;

}

/*============================================================*/

.hero-badges{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:20px;

    margin-bottom:55px;

}

/*============================================================*/

.hero-badge{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:14px;

    padding:16px 22px;

    color:white;

    font-size:15px;

    font-weight:600;

    box-shadow:var(--hero-shadow);

    transition:.30s;

}

.hero-badge:hover{

    transform:translateY(-4px);

    background:rgba(255,255,255,.12);

}

/*============================================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/*============================================================*/

.btn-premium-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    background:#0d6efd;

    color:white;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:.30s;

    box-shadow:0 18px 45px rgba(13,110,253,.35);

}

.btn-premium-primary:hover{

    background:#0b5ed7;

    transform:translateY(-3px);

}

/*============================================================*/

.btn-premium-secondary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border:2px solid rgba(255,255,255,.25);

    color:white;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:.30s;

    backdrop-filter:blur(12px);

}

.btn-premium-secondary:hover{

    background:rgba(255,255,255,.10);

}

/*============================================================*/

.hero-scroll{

    position:absolute;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

    z-index:10;

    color:white;

    opacity:.70;

    font-size:14px;

    letter-spacing:2px;

}

/*============================================================*/

@media(max-width:992px){

.hero-premium{

    min-height:680px;

}

.hero-container{

    padding:80px 30px;

}

.hero-background{

        background-image:url("../images/hero-warroom-mobile.jpeg");

        background-position:center top;

        background-size:cover;

}

.hero-premium h1{

    font-size:48px;

}

.hero-subtitle{

    font-size:20px;

}

.hero-badges{

    gap:12px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-premium-primary,

.btn-premium-secondary{

    justify-content:center;

}

}

/*============================================================*/

@media(max-width:576px){

.hero-container{

    padding:70px 22px;

}

.hero-background{

        background-image:url("../images/hero-warroom-mobile.jpeg");

        background-position:center top;

        background-size:cover;

}

.hero-premium{

    min-height:620px;

}

.hero-premium h1{

    font-size:36px;

}

.hero-subtitle{

    font-size:18px;

    line-height:1.6;

}

.hero-badge{

    width:100%;

    text-align:center;

}

}

@media (max-width:768px){

    .hero-background{

        background-image:url("../images/hero-warroom-mobile.jpeg");

        background-position:center top;

        background-size:cover;

    }

}

/*==============================================================================
  BOTÓN WHATSAPP PREMIUM
==============================================================================*/

.btn-premium-whatsapp{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    padding:18px 34px;

    background:#57d163;

    color:#ffffff;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    font-size:17px;

    border:none;

    transition:all .30s ease;

    box-shadow:0 18px 40px rgba(87,209,99,.35);

}

.btn-premium-whatsapp:hover{

    background:#47c356;

    transform:translateY(-3px);

    box-shadow:0 22px 45px rgba(87,209,99,.45);

}

.btn-premium-whatsapp i{

    font-size:22px;

}