/* =====================================
BASE GENERAL
===================================== */

.section {
   padding: 80px 0;
}

.section-gray {
   background: #f4f7fb;
}

.section-white {
   background: #ffffff;
}

.container {
   width: 1180px;
   margin: auto;
}


/* =====================================
TIPOGRAFÍA GLOBAL
===================================== */

h2 {
   font-size: 40px;
   color: #0a2a66;
   text-align: center;
   margin-bottom: 18px;
}

h3 {
   font-size: 22px;
   color: #0a2a66;
   margin-bottom: 10px;
}

p {
   font-size: 17px;
   line-height: 1.8;
}


/* =====================================
HEADER SECCIÓN CENTRADO
===================================== */

.section-header-center {
   text-align: center;
   max-width: 720px;
   margin: auto auto 40px auto;
}


/* =====================================
HERO SLIDER PROFESIONAL
===================================== */

.hero--slider {
   height: 760px;
   margin-top: -140px;
   position: relative;
   overflow: hidden;
}

.slider {
   position: relative;
   height: 100%;
}

.slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: .7s ease;
}

.slide.is-active {
   opacity: 1;
   z-index: 2;
}

.slide__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(110deg,
         rgba(10, 42, 102, .75),
         rgba(10, 42, 102, .45));
}

.slide__content {
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
}

.slide__content h1 {
   font-size: 60px;
   margin-bottom: 15px;
   color: white;
}

.slide__content h2 {
   font-size: 50px;
   margin-bottom: 15px;
   color: white;
}

.slide__subtitle {
   max-width: 680px;
   margin-bottom: 18px;
   color: white;
}

.slide__lead {
   letter-spacing: .25em;
   font-size: 12px;
   margin-bottom: 30px;
   color: white;
}

.slide__actions {
   display: flex;
   gap: 12px;
}


/* =====================================
BOTONES HERO
===================================== */

.btn {
   padding: 14px 44px;
   border-radius: 40px;
   letter-spacing: .12em;
   text-decoration: none;
   transition: .35s;
}

.btn--primary {
   background: linear-gradient(135deg,
         #0a2a66,
         #034078);
   color: white;
   box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
}

.btn--primary:hover {
   transform: translateY(-4px);
   box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.btn--ghost {
   border: 2px solid white;
   color: white;
}

.btn--ghost:hover {
   background: white;
   color: #0a2a66;
   transform: translateY(-4px);
}


/* =====================================
FLECHAS HERO
===================================== */

.slider-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 48px;
   color: white;
   background: none;
   border: none;
   cursor: pointer;
   transition: .3s;
   z-index: 5;
}

.slider-btn--prev {
   left: 35px;
}

.slider-btn--next {
   right: 35px;
}

.slider-btn:hover {
   transform: translateY(-50%) scale(1.25);
}


/* =====================================
QUIÉNES SOMOS
===================================== */

.two-columns {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

.two-columns img {
   width: 100%;
   border-radius: 18px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}


/* =====================================
MISIÓN VISIÓN
===================================== */

.mission-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
}

.mission-grid article {
   background: white;
   padding: 45px;
   border-radius: 18px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
   transition: .35s;
}

.mission-grid article:hover {
   transform: translateY(-6px);
   box-shadow: 0 26px 70px rgba(0, 0, 0, .15);
}


/* =====================================
SERVICIOS
===================================== */

.services-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 35px;
   margin-top: 35px;
}

.service-card {
   background: white;
   padding: 45px;
   border-radius: 18px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
   transition: .35s;
   text-decoration: none;
   display: block;
}

.service-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 26px 70px rgba(0, 0, 0, .15);
}

.service-card span {
   display: inline-block;
   margin-top: 16px;
   letter-spacing: .2em;
   font-size: 12px;
   color: #034078;
}


/* =====================================================
ESTRUCTURA ORGÁNICA — SLIDER PROFESIONAL CENTRADO
3 tarjetas visibles exactas
===================================================== */

.estructura-section {

padding: 60px 0 90px 0;

background: #ffffff;

position: relative;
overflow: hidden;

}


/* =====================================================
WRAPPER GENERAL
===================================================== */

.estructura-slider-wrapper {

display: flex;

align-items: center;

justify-content: center;

position: relative;

width: 100%;

}


/* =====================================================
VIEWPORT (CENTRADO ABSOLUTO)
===================================================== */

.estructura-viewport {

width: 920px;

max-width: 100%;

margin-left: auto;
margin-right: auto;

overflow: hidden;

position: relative;

display: block;

}


/* =====================================================
FADE LATERAL SUAVE
===================================================== */

.estructura-viewport::before,
.estructura-viewport::after {

content: "";

position: absolute;

top: 0;

width: 120px;

height: 100%;

z-index: 5;

pointer-events: none;

}

.estructura-viewport::before {

left: 0;

background: linear-gradient(
90deg,
#f4f7fb 0%,
transparent 100%
);

}

.estructura-viewport::after {

right: 0;

background: linear-gradient(
270deg,
#f4f7fb 0%,
transparent 100%
);

}


/* =====================================================
TRACK (CLAVE DEL CENTRADO REAL)
===================================================== */

.estructura-track {

display: flex;

align-items: center;

justify-content: center;

gap: 40px;

padding: 40px 0;

width: max-content;

margin-left: auto;
margin-right: auto;

}


/* =====================================================
TARJETAS BASE
===================================================== */

.estructura-card {

min-width: 260px;

background: white;

border-radius: 22px;

padding: 42px 28px;

text-align: center;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

box-shadow:

0 12px 28px rgba(0,0,0,.06);

transition:

transform .45s cubic-bezier(.22,.61,.36,1),

opacity .45s cubic-bezier(.22,.61,.36,1),

box-shadow .45s ease;

opacity: .45;

transform: scale(.88);

}


/* =====================================================
TARJETA ACTIVA (CENTRAL)
===================================================== */

.estructura-card.active {

opacity: 1;

transform: scale(1.12);

box-shadow:

0 35px 90px rgba(10,42,102,.18);

z-index: 3;

}


/* =====================================================
AVATAR
===================================================== */

.estructura-avatar {

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 18px;

}

.estructura-avatar img {

width: 140px;

height: 140px;

border-radius: 50%;

object-fit: cover;

border: 6px solid #f4f7fb;

transition: transform .4s ease;

}

.estructura-card.active img {

transform: scale(1.08);

}


/* =====================================================
ROL
===================================================== */

.estructura-role {

display: block;

font-size: 12px;

letter-spacing: .26em;

color: #5c677d;

margin-bottom: 10px;

text-transform: uppercase;

text-align: center;

}


/* =====================================================
NOMBRE
===================================================== */

.estructura-card h3 {

font-size: 20px;

color: #0a2a66;

margin: 0;

text-align: center;

}


/* =====================================================
BOTONES SLIDER
===================================================== */

.estructura-btn {

width: 54px;

height: 54px;

border-radius: 50%;

background: white;

border: none;

font-size: 26px;

cursor: pointer;

box-shadow:

0 12px 30px rgba(0,0,0,.08);

transition: .3s ease;

z-index: 20;

display: flex;

align-items: center;

justify-content: center;

}

.estructura-btn:hover {

transform: scale(1.18);

box-shadow:

0 30px 80px rgba(10,42,102,.22);

}

.estructura-btn.prev {

margin-right: 28px;

}

.estructura-btn.next {

margin-left: 28px;

}


/* =====================================================
RESPONSIVE TABLET
===================================================== */

@media(max-width:1024px){

.estructura-viewport{

width: 640px;

}

.estructura-card{

min-width: 230px;

}

.estructura-card.active{

transform: scale(1.05);

}

}


/* =====================================================
RESPONSIVE MOBILE
===================================================== */

@media(max-width:768px){

.estructura-viewport{

width: 320px;

}

.estructura-track{

gap: 22px;

}

.estructura-card{

opacity: 1;

transform: scale(1);

min-width: 280px;

}

.estructura-btn{

display: none;

}

}

/* =====================================
BOTONES CARRUSEL ESTRUCTURA
===================================== */

.team-prev,
.team-next {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: none;
   background: white;
   font-size: 24px;
   cursor: pointer;
   box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
   transition: .3s;
}

.team-prev:hover,
.team-next:hover {
   transform: scale(1.2);
   box-shadow: 0 26px 70px rgba(0, 0, 0, .15);
}


/* =====================================
CERTIFICACIONES
===================================== */

.certificates {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

.certificate-logos {
   display: flex;
   gap: 70px;
   justify-content: center;
}

.certificate-logos img {
   height: 110px;
   transition: .35s;
}

.certificate-logos img:hover {
   transform: scale(1.1);
}

/* ======================================================
ANIMACIONES INSTITUCIONALES SCROLL REVEAL
Sistema profesional limpio tipo centros arbitrales
====================================================== */


/* estado base oculto */

.fx-left,
.fx-right,
.fx-top,
.fx-bottom,
.fx-scale,
.fx-fade {

   opacity: 0;

   will-change: transform, opacity;

   transition:
      transform .9s cubic-bezier(.22, .61, .36, 1),
      opacity .9s cubic-bezier(.22, .61, .36, 1);

}


/* =====================================
ENTRADAS DIRECCIONALES
===================================== */


/* izquierda */

.fx-left {

   transform: translateX(-80px);

}


/* derecha */

.fx-right {

   transform: translateX(80px);

}


/* arriba */

.fx-top {

   transform: translateY(-80px);

}


/* abajo */

.fx-bottom {

   transform: translateY(80px);

}


/* =====================================
SCALE SUAVE INSTITUCIONAL
===================================== */

.fx-scale {

   transform: scale(.90);

}


/* =====================================
FADE LIMPIO
===================================== */

.fx-fade {

   transform: none;

}


/* =====================================
ESTADO ACTIVO (cuando entra en viewport)
===================================== */

.fx-visible {

   opacity: 1;

   transform: none;

}


/* =====================================
DELAYS PROFESIONALES SECUENCIALES
===================================== */

.fx-delay-1 {

   transition-delay: .12s;

}

.fx-delay-2 {

   transition-delay: .24s;

}

.fx-delay-3 {

   transition-delay: .36s;

}

.fx-delay-4 {

   transition-delay: .48s;

}

.fx-delay-5 {

   transition-delay: .60s;

}

.fx-delay-6 {

   transition-delay: .72s;

}

.fx-delay-7 {

   transition-delay: .84s;

}

.fx-delay-8 {

   transition-delay: .96s;

}


/* =====================================
OPTIMIZACIÓN PERFORMANCE
===================================== */

.fx-left,
.fx-right,
.fx-top,
.fx-bottom,
.fx-scale {

   backface-visibility: hidden;

   transform-style: preserve-3d;

}


/* =====================================
MEJORAS VISUALES PARA TARJETAS
(servicios / estructura orgánica)
===================================== */

.service-card.fx-scale.fx-visible {

   transform: scale(1);

}

.team-card.fx-bottom.fx-visible {

   transform: translateY(0);

}


/* =====================================
MEJORAS PARA TEXTO EDITORIAL
===================================== */

.fx-left.fx-visible,
.fx-right.fx-visible {

   opacity: 1;

}


/* =====================================
MEJORAS PARA CERTIFICACIONES
===================================== */

.certificate-logos.fx-right.fx-visible {

   transform: translateX(0);

}

/* ======================================================
RESPONSIVE MOBILE PROFESIONAL
Diseño institucional limpio tipo centros arbitrales
====================================================== */

@media(max-width:768px){

/* =============================
CONTENEDOR GENERAL
============================= */

.container{

width:92%;

}


/* =============================
SECCIONES
============================= */

.section{

padding:60px 0;

}


/* =============================
TIPOGRAFÍA
============================= */

h2{

font-size:28px;

line-height:1.25;

}

h3{

font-size:20px;

}

p{

font-size:16px;

line-height:1.7;

}


/* =============================
HERO SLIDER
============================= */

.hero--slider{

height:520px;

margin-top:-110px;

}

.slide__content h1{

font-size:32px;

}

.slide__content h2{

font-size:30px;

}

.slide__subtitle{

font-size:15px;

padding:0 10px;

}

.slide__lead{

font-size:11px;

letter-spacing:.18em;

}


/* botones hero stack vertical */

.slide__actions{

flex-direction:column;

align-items:center;

gap:14px;

}

.btn{

padding:14px 30px;

width:220px;

text-align:center;

}


/* ocultar flechas slider en celular */

.slider-btn{

display:none;

}


/* =============================
QUIÉNES SOMOS
============================= */

.two-columns{

grid-template-columns:1fr;

gap:30px;

text-align:center;

}

.two-columns img{

max-width:420px;

margin:auto;

}


/* =============================
MISIÓN / VISIÓN
============================= */

.mission-grid{

grid-template-columns:1fr;

gap:24px;

}

.mission-grid article{

padding:35px 28px;

}


/* =============================
SERVICIOS
============================= */

.services-grid{

grid-template-columns:1fr;

gap:22px;

}

.service-card{

padding:30px 25px;

}


/* =============================
ESTRUCTURA ORGÁNICA
============================= */

.estructura-section{

padding:40px 0 70px 0;

}

.estructura-viewport{

width:100%;

}

.estructura-track{

gap:16px;

}

.estructura-card{

min-width:260px;

padding:30px 22px;

opacity:1;

transform:scale(1);

}

.estructura-avatar img{

width:120px;

height:120px;

}

.estructura-btn{

display:none;

}


/* =============================
CERTIFICACIONES
============================= */

.certificates{

grid-template-columns:1fr;

text-align:center;

gap:35px;

}

.certificate-logos{

gap:40px;

flex-wrap:wrap;

}

.certificate-logos img{

height:80px;

}

}