/* Estilos propios de index.php — lo compartido está en main.css */

.hero { position: relative; height: 90vh; min-height: 560px; overflow: hidden; display: flex; align-items: center; }

.hero-video-wrap { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #193d73 0%, #1d4785 25%, #225199 50%, #1a3e78 75%, #193d73 100%); background-size: 400% 400%; animation: gradMove 12s ease infinite; }

@keyframes gradMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.hero-video-wrap iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 177.78vh; height: 100vh; min-width: 100%; min-height: 56.25vw; pointer-events: none; border: none; }

.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 105deg, rgba(17,30,80,.88) 0%, rgba(17,30,80,.75) 45%, rgba(17,30,80,.25) 70%, transparent 100% ); }

.hero-diagonal { position: absolute; right: 0; bottom: 0; z-index: 2; width: 38%; height: 100%; background: linear-gradient(135deg, transparent 48%, rgba(138,184,58,.18) 48%); pointer-events: none; }

.hero-content { position: relative; z-index: 3; max-width: 700px; padding: 0 2rem 0 3.5rem; color: white; }

.hero-eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--lime); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }

.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 3px; background: var(--lime); border-radius: 2px; }

.hero-content h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 900; line-height: 1.1; margin-bottom: 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.3); }

.hero-content h1 em { font-style: normal; color: var(--lime); }

.hero-content p { font-size: 1.05rem; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 2rem; max-width: 480px; }

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-hero-primary { background: var(--navy); color: white; padding: .8rem 1.8rem; border-radius: 8px; font-weight: 700; font-size: .95rem; border: 2px solid rgba(255,255,255,.3); transition: background .18s, transform .15s; display: inline-flex; align-items: center; gap: .45rem; }

.btn-hero-primary:hover { background: var(--navy-mid); transform: translateY(-2px); }

.btn-hero-sec { background: transparent; color: white; padding: .78rem 1.6rem; border-radius: 8px; font-weight: 600; font-size: .95rem; border: 2px solid rgba(255,255,255,.5); transition: background .18s; display: inline-flex; align-items: center; gap: .45rem; }

.btn-hero-sec:hover { background: rgba(255,255,255,.12); border-color: white; }

.scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,.5); font-size: .75rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; animation: bounce 2s infinite; }

.scroll-arrow { font-size: 1.2rem; }

@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

.section { padding: 5rem 2rem; }

.section-label { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }

.section-label::before { content: ''; display: block; width: 28px; height: 3px; background: var(--blue); border-radius: 2px; }

.section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--gray-900); line-height: 1.2; margin-bottom: .75rem; }

.section-title em { font-style: normal; color: var(--navy); }

.section-sub { font-size: .95rem; color: var(--gray-600); line-height: 1.75; max-width: 580px; }

.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.welcome-body p { font-size: .97rem; color: var(--gray-600); line-height: 1.8; margin-bottom: 1rem; }

.btn-outlined { display: inline-flex; align-items: center; gap: .4rem; border: 2px solid var(--navy); color: var(--navy); padding: .65rem 1.4rem; border-radius: 8px; font-weight: 700; margin-top: .5rem; transition: background .18s, color .18s; }

.btn-outlined:hover { background: var(--navy); color: white; }

.video-frame { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.18); background: #0c1635; }

.video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; }

.stats-strip { background: var(--navy); padding: 2.5rem 2rem; }

.stats-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.stat-item { text-align: center; color: white; }

.stat-num { font-size: 2.5rem; font-weight: 900; color: var(--lime); line-height: 1; }

.stat-lbl { font-size: .78rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .07em; margin-top: .35rem; }

.especialidades { background: var(--gray-50); }

.tab-nav { display: flex; gap: .5rem; margin: 2rem 0 2.5rem; border-bottom: 2px solid var(--gray-200); }

.tab-btn { padding: .7rem 1.4rem; border-radius: 8px 8px 0 0; font-size: .88rem; font-weight: 700; cursor: pointer; border: none; background: transparent; color: var(--gray-600); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .18s, border-color .18s; }

.tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); }

.tab-panel { display: none; }

.tab-panel.active { display: block; }

.esp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }

.esp-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); transition: transform .22s, box-shadow .22s; display: flex; flex-direction: column; }

.esp-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,.13); }

.esp-img { height: 190px; position: relative; overflow: hidden; background: var(--gray-200); }

.esp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }

.esp-card:hover .esp-img img { transform: scale(1.06); }

.esp-badge { position: absolute; top: .75rem; left: .75rem; background: var(--navy); color: white; font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .22rem .6rem; border-radius: 4px; }

.esp-badge.nocturna { background: var(--green); }

.esp-body { padding: 1.2rem 1.4rem; flex: 1; display: flex; flex-direction: column; }

.esp-body h3 { font-size: .97rem; font-weight: 800; color: var(--gray-900); line-height: 1.3; margin-bottom: .5rem; }

.esp-body p { font-size: .82rem; color: var(--gray-600); line-height: 1.65; flex: 1; }

.esp-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--blue); font-size: .83rem; font-weight: 700; margin-top: 1rem; transition: gap .15s; }

.esp-link:hover { gap: .55rem; }

.aula-section { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-mid) 60%, var(--blue) 100%); padding: 5rem 2rem; position: relative; overflow: hidden; }

.aula-section::after { content: ''; position: absolute; right: -80px; top: -80px; width: 400px; height: 400px; background: rgba(255,255,255,.04); border-radius: 50%; }

.aula-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; }

.aula-lbl { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--lime); margin-bottom: .6rem; }

.aula-inner h2 { font-size: 2rem; font-weight: 900; color: white; margin-bottom: .6rem; }

.aula-inner p { color: rgba(255,255,255,.72); font-size: .97rem; line-height: 1.7; }

.btn-aula-cta { background: white; color: var(--navy); padding: .85rem 2rem; border-radius: 10px; font-weight: 800; font-size: 1rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; transition: transform .15s, box-shadow .15s; }

.btn-aula-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

.empleo { padding: 4rem 2rem; background: var(--gray-50); border-top: 1px solid var(--gray-200); }

.empleo-header { max-width: 1200px; margin: 0 auto 2rem; }

.empleo-header h2 { font-size: 1.4rem; font-weight: 800; color: var(--gray-900); margin-top: .4rem; }

.empleo-header p { font-size: .93rem; color: var(--gray-600); margin-top: .4rem; max-width: 560px; line-height: 1.65; }

.empleo-cards { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.empleo-card { background: white; border-radius: 14px; border: 1px solid var(--gray-200); padding: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .9rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; }

.empleo-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.11); transform: translateY(-3px); }

.empleo-card-head { display: flex; align-items: center; gap: .9rem; }

.empleo-card-img { width: 100%; height: 160px; border-radius: 10px; overflow: hidden; margin-bottom: .2rem; position: relative; }

.empleo-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; animation: imgFloat 6s ease-in-out infinite; }

.empleo-card:hover .empleo-card-img img { animation-play-state: paused; transform: scale(1.06); }

@keyframes imgFloat { 0% { transform: scale(1) translateY(0px); } 25% { transform: scale(1.02) translateY(-4px); } 50% { transform: scale(1.03) translateY(-7px); } 75% { transform: scale(1.02) translateY(-4px); } 100% { transform: scale(1) translateY(0px); } }

.empleo-card-img .img-badge { position: absolute; bottom: .6rem; left: .7rem; background: rgba(255,255,255,.92); border-radius: 6px; padding: .25rem .65rem; font-size: .7rem; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: .35rem; backdrop-filter: blur(4px); }

.empleo-card-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

.empleo-card-icon.fb { background: #e7f0fd; }

.empleo-card-icon.brete { background: #fffbea; }

.empleo-card-head h3 { font-size: 1rem; font-weight: 800; color: var(--gray-900); line-height: 1.3; }

.empleo-card-head span { font-size: .75rem; color: var(--gray-400); }

.empleo-card p { font-size: .86rem; color: var(--gray-600); line-height: 1.7; flex: 1; }

.empleo-card-tags { display: flex; gap: .4rem; flex-wrap: wrap; }

.etag { background: var(--blue-light); color: var(--navy); font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 20px; }

.btn-emp { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.3rem; border-radius: 8px; font-weight: 700; font-size: .85rem; transition: background .18s, color .18s, transform .15s; align-self: flex-start; }

.btn-emp.primary { background: var(--navy); color: white; }

.btn-emp.primary:hover { background: var(--navy-dark); transform: translateY(-1px); }

.btn-emp.outlined { border: 2px solid var(--navy); color: var(--navy); }

.btn-emp.outlined:hover { background: var(--navy); color: white; }

.contact-section { background: var(--gray-100); padding: 4rem 2rem; }

.contact-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; }

.cinfo { display: flex; gap: 1rem; align-items: flex-start; }

.cinfo-icon { width: 46px; height: 46px; min-width: 46px; background: var(--navy); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

.cinfo h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-400); margin-bottom: .2rem; }

.cinfo p, .cinfo a { font-size: .9rem; font-weight: 600; color: var(--gray-900); line-height: 1.4; }

.cinfo a:hover { color: var(--blue); }

@media (max-width: 960px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .aula-inner { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .hero-content { padding: 0 1.5rem; }
  .hero-content h1 { font-size: 2rem; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
}