/* --- VARIABLES IPX --- */
:root {
    --primary: #224076;    /* Azul IPX */
    --primary-dark: #1a325e;
    --secondary: #29426A;  /* Azul Soporte */
    --gold: #FDCC02;       /* Dorado IPX */
    --gold-hover: #e6b800;
    --text: #3F434A;       /* Gris Carbón */
    --bg-light: #D7DADD;   /* Gris Claro */
    --white: #FFFFFF;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: #f9f9f9;
    line-height: 1.6;
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--primary); font-weight: 700; }
a { text-decoration: none; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.mt-2 { margin-top: 10px; }

/* UTILIDADES */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 60px 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }

/* --- BOTONES --- */
.btn { display: inline-block; padding: 12px 28px; border-radius: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem; }

/* Botón de CONVERSIÓN (Dorado) */
.btn-gold { 
    background: var(--gold); 
    color: var(--primary); 
}
.btn-gold:hover { background: var(--gold-hover); transform: translateY(-2px); }

/* Botón Secundario (Outline) */
.btn-outline { 
    border: 2px solid var(--white); 
    color: var(--white); 
    margin-left: 10px; 
}
.btn-outline:hover { background: var(--white); color: var(--primary); }

.btn-text { color: var(--secondary); font-weight: bold; font-size: 0.9rem; }
.btn-text:hover { color: var(--gold); }

/* --- TOP BAR --- */
.top-bar { background: var(--primary-dark); color: #ccc; padding: 10px 0; font-size: 0.85rem; }
.top-bar a { color: #fff; margin-right: 20px; }
.top-bar i { color: var(--gold); margin-right: 5px; }

/* --- HEADER --- */
header { background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 90px; }
.logo img { max-height: 70px; width: auto; } /* Ajuste de logo */

.nav-links a { color: var(--primary); margin-left: 25px; font-weight: 600; font-size: 1rem; }
.nav-links a:hover, .nav-links a.active { color: var(--gold-hover); }
.nav-links .btn-nav { background: var(--primary); color: white; padding: 10px 20px; border-radius: 4px; }
.nav-links .btn-nav:hover { background: var(--secondary); color: white; }

.hamburger { display: none; font-size: 1.8rem; cursor: pointer; color: var(--primary); }

/* --- HERO SLIDER --- */
.hero { 
    position: relative; 
    height: 85vh; 
    min-height: 600px;
    display: flex; 
    align-items: center; 
    color: var(--white); 
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.slide.active { opacity: 1; }

.hero-overlay { 
    position: absolute; top:0; left:0; width:100%; height:100%; 
    background: linear-gradient(120deg, rgba(34,64,118,0.55) 0%, rgba(34,64,118,0.35) 45%, rgba(253,204,2,0.18) 100%); /* Degradado cinematografico (claro) */
    z-index: 2; 
}

.hero-content { position: relative; z-index: 3; max-width: 950px; padding: 22px 0; }
.hero h1 { font-size: 3.5rem; line-height: 1.2; margin-bottom: 20px; color: var(--white); }
.hero .highlight { color: var(--gold); }
.hero p { font-size: 1.3rem; margin-bottom: 35px; font-weight: 300; }

/* --- OFFICIAL BAR --- */
.official-bar { background: var(--bg-light); color: var(--text); padding: 15px 0; text-align: center; border-bottom: 1px solid #ccc; font-size: 0.9rem; }
.official-bar i { color: var(--primary); }

/* --- CARDS & SECTIONS --- */
.feature-card { background: var(--white); padding: 40px 30px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; border-bottom: 4px solid var(--gold); transition: 0.3s; }
.feature-card:hover { transform: translateY(-5px); }
.feature-card .icon { font-size: 3rem; color: var(--primary); margin-bottom: 20px; }

.section-title { text-align: center; margin-bottom: 50px; font-size: 2.5rem; color: var(--primary); position: relative; display: inline-block; width: 100%; }
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--gold); margin: 15px auto 0; }

.program-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: transform 0.3s; border: 1px solid #eee; }
.program-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); }
.card-img { height: 220px; background-size: cover; background-position: center; }
.card-body { padding: 25px; position: relative; }

/* Badges */
.badge { position: absolute; top: -15px; left: 25px; padding: 6px 12px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; border-radius: 4px; color: white; }
.badge-blue { background: var(--primary); }
.badge-gold { background: var(--gold); color: var(--primary); }
.badge-dark { background: #000; }

/* --- CTA & FOOTER --- */
.cta-banner { 
    background: var(--primary); 
    color: var(--white); 
    padding: 80px 0; 
    text-align: center; 
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
.cta-banner h2 { color: var(--white); margin-bottom: 15px; }

footer { background: #1a1d23; color: #aaa; padding-top: 60px; font-size: 0.95rem; }
footer h4 { color: var(--white); margin-bottom: 20px; font-size: 1.1rem; }
footer ul li { margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 10px; }
footer ul li:last-child { border: none; }
footer a { color: #ccc; }
footer a:hover { color: var(--gold); }
.social-icons a { display: inline-block; margin-right: 15px; font-size: 1.5rem; color: var(--white); }
.social-icons a:hover { color: var(--gold); }
.bottom-bar { text-align: center; padding: 25px 0; border-top: 1px solid #333; margin-top: 50px; background: #111; font-size: 0.85rem; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .hamburger { display: block; }
    .nav-links { display: none; position: absolute; top: 90px; left: 0; width: 100%; background: var(--white); flex-direction: column; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
    .nav-links.active { display: flex; }
    .hero h1 { font-size: 2.2rem; }
    .desktop-only { display: none; }
    .official-bar { font-size: 0.8rem; }
}
/* --- WHATSAPP FLOTANTE (sube leads, no magia negra) --- */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.whatsapp-float i{ font-size: 1.25rem; }
.whatsapp-float:hover{ transform: translateY(-2px); filter: brightness(0.98); }

/* --- LANDINGS --- */
.landing-hero{ height: 70vh; min-height: 520px; }
.landing-hero .hero-content p{ max-width: 62ch; }

.form-card{
  background: var(--white);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(34,64,118,0.08);
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full{ grid-column: 1 / -1; }
label{ display:block; font-weight: 700; margin-bottom: 6px; color: var(--primary); }
input, select, textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.14);
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
}
input:focus, select:focus, textarea:focus{ border-color: rgba(34,64,118,0.55); box-shadow: 0 0 0 4px rgba(34,64,118,0.12); }
.small-note{ font-size: 0.9rem; color: rgba(63,67,74,0.85); }
.privacy{ display:flex; gap:10px; align-items:flex-start; }
.privacy input{ width:auto; margin-top: 4px; }

@media (max-width: 820px){
  .landing-hero{ height: auto; padding: 40px 0; }
  .form-grid{ grid-template-columns: 1fr; }
}

/* WhatsApp Direct banner */
.wa-direct{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow);
  background: #f6f8ff;
  margin: 24px 0 34px;
}
.wa-direct__bg{
  position:absolute; inset:0;
  background-image: var(--wa-bg);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
}
.wa-direct__overlay{
  position:absolute; inset:0;
  /* Cinematic pero clarito: blanco -> transparente -> blanco */
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 35%, rgba(255,255,255,.25) 60%, rgba(255,255,255,.92) 100%),
    linear-gradient(180deg, rgba(12,18,38,.08) 0%, rgba(12,18,38,.00) 55%, rgba(12,18,38,.06) 100%);
}
.wa-direct__content{
  position: relative;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
}
.wa-direct__title{margin:0 0 6px; font-size: 1.15rem;}
.wa-direct__copy{margin:0; color: var(--muted); line-height:1.55;}
.wa-direct__cta{
  display:flex;
  flex-direction: column;
  gap:10px;
  align-items: flex-start;
}
.wa-direct__pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 10px 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 999px;
  color: var(--muted);
  font-size: .95rem;
}
@media (max-width: 860px){
  .wa-direct__content{grid-template-columns: 1fr;}
  .wa-direct__cta{align-items: stretch;}
}

/* Video testimonials */
.video-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.video-card{
  background: var(--card);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.video-card iframe, .video-card video{display:block; width:100%; aspect-ratio: 16/9; border:0;}
.video-card .meta{padding: 12px 14px; color: var(--muted); font-size: .95rem;}
@media (max-width: 860px){
  .video-grid{grid-template-columns: 1fr;}
}

/* --- Landing upgrades: callout + videos --- */
.section.callout{position:relative; overflow:hidden; padding:72px 0;}
.callout-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05);}
.section.callout:before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(13,32,72,.78), rgba(13,32,72,.45) 55%, rgba(245,179,0,.22));}
.callout-inner{position:relative;}
.callout-card{max-width:860px; background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:28px; box-shadow:0 18px 50px rgba(0,0,0,.18);}
.video-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:18px;}
.video-item{grid-column:span 6; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.08);}
.video-frame{position:relative; width:100%; padding-top:56.25%; background:#000;}
.video-frame iframe, .video-frame video{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-meta{padding:10px 14px; font-size:.95rem; color:#25324a;}
@media (max-width: 900px){
  .video-item{grid-column:span 12;}
  .section.callout{padding:56px 0;}
}