/* =============================================================================
   CICO 2.0 — Hoja de estilos global
   Consejo Nacional de la Empresa Privada (CoNEP)

   ORGANIZACIÓN
     1. Tokens (variables)
     2. Base / tipografía
     3. Layout (contenedores)
     4. GLOBAL — Header y navegación
     5. GLOBAL — Footer
     6. GLOBAL — Botón subir
     7. GLOBAL — Utilidades reusables (títulos de sección, tarjetas)
     8. HOME — Hero carousel
     9. HOME — Tarjetas de indicadores (KPI)
    10. HOME — ¿Quiénes Somos?
    11. HOME — Componentes
    12. HOME — Misión / Visión / Valores
    13. Responsive y accesibilidad

   Los bloques marcados GLOBAL aplican a todas las páginas del sitio.
   Los bloques marcados HOME solo se usan en index.html — se pueden mover a
   una hoja aparte si el archivo crece demasiado.
   ========================================================================== */


/* =============================================================================
   1. TOKENS
   Cambiar el color dominante del sitio = cambiar --cico-primary
   ========================================================================== */
:root{
  /* Paleta institucional */
  --cico-deep:        #003B5C;  /* azul petróleo                    */
  --cico-navy:        #003286;  /* títulos y cifras de las tarjetas  */
  --cico-primary:     #0096C7;  /* azul medio — color principal      */
  --cico-institution: #0077B6;
  --cico-cyan:        #00B4D8;
  --cico-turquoise:   #00D4E8;
  --cico-accent:      #CC700E;  /* naranja de los enlaces "Ver más"  */
  --cico-accent-dark: #A85500;
  --cico-footer:      #034870;
  --cico-heading:     #0B4A8F;

  /* Neutros */
  --cico-body:   #3F4650;
  --cico-muted:  #6B7280;
  --cico-line:   #E6EAF0;
  --cico-line-2: #CFE3F0;

  /* Tipografía */
  --ff-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Medidas */
  --container:     1200px;
  --header-height: 96px;
  --gutter:        16px;
  --gutter-fluid:  clamp(16px, 2.6vw, 44px);

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(16,24,40,.04);
  --shadow-md: 0 10px 26px rgba(0,59,92,.10);
  --shadow-lg: 0 8px 26px rgba(0,0,0,.18);
}


/* =============================================================================
   2. BASE / TIPOGRAFÍA
   ========================================================================== */
*{ -webkit-font-smoothing:antialiased; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-height);
}

body{
  font-family:var(--ff-body);
  color:var(--cico-body);
  background:#fff;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6,
.display-font{ font-family:var(--ff-display); }


/* =============================================================================
   3. LAYOUT
   .container-cico  → contenido con ancho máximo (secciones del cuerpo)
   .container-fluid-cico → ancho completo con margen lateral fluido (header)
   ========================================================================== */
.container-cico{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.container-fluid-cico{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:var(--gutter-fluid);
}


/* =============================================================================
   4. GLOBAL — HEADER Y NAVEGACIÓN
   El header ocupa todo el ancho: el logo CICO se ancla al borde izquierdo y el
   de CoNEP al derecho, sin quedar atados al contenedor del contenido.
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:1040;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

.site-header .navbar{ padding-block:.85rem; }

.brand-cico img{ height:52px; width:auto; display:block; }
.brand-conep img{ height:50px; width:auto; display:block; }

.nav-cico .nav-link{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:.98rem;
  color:var(--cico-navy);
  padding:.35rem .62rem;
  white-space:nowrap;
  transition:color .18s ease;
}
.nav-cico .nav-link:hover,
.nav-cico .nav-link:focus,
.nav-cico .nav-link.active{ color:var(--cico-primary); }

.navbar-toggler{ border-color:var(--cico-line); }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(0,150,199,.25); }


/* =============================================================================
   5. GLOBAL — FOOTER
   ========================================================================== */
.site-footer{
  background:var(--cico-footer);
  color:#fff;
  padding:40px 0 34px;
}

.footer-logos img{ width:100%; max-width:390px; height:auto; }

.footer-org{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.16rem;
  line-height:1.3;
  color:#fff;
  margin-bottom:.7rem;
}

.footer-address{
  font-size:.95rem;
  line-height:1.5;
  color:#DCE7EE;
  margin-bottom:0;
}
.footer-address a{ color:#DCE7EE; text-decoration:none; }
.footer-address a:hover{ color:#fff; text-decoration:underline; }

.footer-social-title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:1.02rem;
  color:#fff;
  margin-bottom:.85rem;
}

.social-link{
  width:44px; height:44px;
  border-radius:50%;
  background:#F1F4F6;
  color:var(--cico-footer);
  display:inline-grid; place-items:center;
  font-size:1.08rem;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social-link:hover{
  background:var(--cico-primary);
  color:#fff;
  transform:translateY(-3px);
}


/* =============================================================================
   6. GLOBAL — BOTÓN SUBIR AL INICIO
   ========================================================================== */
.back-to-top{
  position:fixed;
  right:26px; bottom:26px;
  z-index:1050;
  width:52px; height:52px;
  border-radius:50%;
  border:2px solid #fff;
  background:var(--cico-footer);
  color:#fff;
  display:grid; place-items:center;
  font-size:1.15rem;
  cursor:pointer;
  opacity:0; visibility:hidden;
  transform:translateY(12px);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--cico-primary); }


/* =============================================================================
   7. GLOBAL — UTILIDADES REUSABLES
   Para las páginas internas (PIB, IMAE, etc.)
   ========================================================================== */
.section{ padding:62px 0 66px; }
.section-dark{ background:#000; color:#fff; }

.section-title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.72rem;
  color:var(--cico-heading);
  text-align:center;
  margin-bottom:1.1rem;
}

.section-lead{
  text-align:center;
  max-width:820px;
  margin:0 auto 46px;
  color:var(--cico-muted);
  font-size:1.02rem;
  line-height:1.5;
}

.card-cico{
  height:100%;
  background:#fff;
  border:1px solid var(--cico-line);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card-cico:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
  border-color:var(--cico-line-2);
}

.link-more{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:.92rem;
  color:var(--cico-accent);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.link-more i{ transition:transform .2s ease; }
.link-more:hover{ color:var(--cico-accent-dark); }
.link-more:hover i{ transform:translateX(4px); }

/* --- Botón CICO --------------------------------------------------------
   .btn-cico          → sólido, azul medio (color principal)
   .btn-cico.is-ghost → contorno, para acciones secundarias
   ---------------------------------------------------------------------- */
.btn-cico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.6rem 1.35rem;
  border:2px solid var(--cico-primary);
  border-radius:999px;
  background:var(--cico-primary);
  color:#fff;
  font-family:var(--ff-display);
  font-weight:600;
  font-size:.92rem;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease,
             transform .2s ease, box-shadow .2s ease;
}
.btn-cico:hover,
.btn-cico:focus-visible{
  background:var(--cico-institution);
  border-color:var(--cico-institution);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,119,182,.28);
}
.btn-cico:active{ transform:translateY(0); box-shadow:none; }
.btn-cico:focus-visible{ outline:3px solid rgba(0,150,199,.35); outline-offset:2px; }

.btn-cico i{ font-size:.86em; }

/* Variante secundaria: mismo azul, sin relleno */
.btn-cico.is-ghost{
  background:transparent;
  color:var(--cico-primary);
}
.btn-cico.is-ghost:hover,
.btn-cico.is-ghost:focus-visible{
  background:var(--cico-primary);
  color:#fff;
}

.btn-cico.is-sm{ padding:.45rem 1rem; font-size:.85rem; }


/* =============================================================================
   8. HOME — HERO CAROUSEL
   ========================================================================== */
.hero{ padding:26px 0 30px; }

.hero-carousel{
  border-radius:16px;
  overflow:hidden;
  background:#001830;
}

.hero-carousel .carousel-item img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

/* Proporción del mockup en escritorio; se abre en pantallas chicas para que
   el logo del reel siga siendo legible. */
.hero-carousel .ratio-hero{ aspect-ratio:1175 / 257; }

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{
  width:auto;
  opacity:1;
  padding-inline:14px;
}

.hero-ctrl{
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:grid; place-items:center;
  font-size:.95rem;
  transition:background .2s ease, transform .2s ease;
}
.hero-carousel .carousel-control-prev:hover .hero-ctrl,
.hero-carousel .carousel-control-next:hover .hero-ctrl{
  background:var(--cico-primary);
  transform:scale(1.08);
}

.hero-carousel .carousel-indicators{ margin-bottom:.7rem; }
.hero-carousel .carousel-indicators [data-bs-target]{
  width:9px; height:9px;
  border-radius:50%;
  border:0;
  background:#B9C2CC;
  opacity:1;
  margin-inline:5px;
}
.hero-carousel .carousel-indicators .active{ background:#fff; }


/* =============================================================================
   9. HOME — TARJETAS DE INDICADORES (KPI)
   ========================================================================== */
.kpi-section{ padding-bottom:56px; }

.kpi-card{
  height:100%;
  background:#fff;
  border:1px solid var(--cico-line);
  border-radius:12px;
  padding:22px 18px 16px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.kpi-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
  border-color:var(--cico-line-2);
}

.kpi-title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1rem;
  line-height:1.3;
  color:var(--cico-navy);
  text-align:center;
  margin-bottom:16px;
}

.kpi-values{
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex:1 1 auto;
}
.kpi-item{ flex:1 1 0; text-align:center; padding-inline:8px; }
.kpi-item + .kpi-item{ border-left:1px solid var(--cico-line); }

.kpi-num{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:1.85rem;
  line-height:1.15;
  letter-spacing:-.5px;
  color:var(--cico-navy);
}

.kpi-label{
  font-size:.82rem;
  line-height:1.3;
  color:var(--cico-navy);
  margin-top:6px;
}

.kpi-more{
  align-self:center;
  justify-content:center;
  margin-top:18px;
}


/* =============================================================================
   10. HOME — ¿QUIÉNES SOMOS?
   ========================================================================== */
.about{ background:#000; color:#fff; padding:58px 0; }

.about-img{
  width:100%; height:100%;
  min-height:240px;
  object-fit:cover;
  display:block;
}

.about h2{
  font-weight:600;
  font-size:1.7rem;
  color:var(--cico-turquoise);
  margin-bottom:1.1rem;
}

.about p{
  font-size:1.02rem;
  line-height:1.55;
  color:#F2F4F6;
  margin-bottom:1.1rem;
}
.about p:last-child{ margin-bottom:0; }


/* =============================================================================
   11. HOME — COMPONENTES
   ========================================================================== */
.components{ padding:62px 0 66px; }

.component-item{ text-align:center; padding-inline:14px; }

.component-item img{
  height:88px; width:auto;
  object-fit:contain;
  margin-bottom:20px;
}

.component-item h3{
  font-weight:600;
  font-size:1.22rem;
  color:var(--cico-heading);
  margin-bottom:.7rem;
}

.component-item p{
  font-size:.97rem;
  line-height:1.45;
  color:var(--cico-body);
  max-width:330px;
  margin-inline:auto;
  margin-bottom:0;
}


/* =============================================================================
   12. HOME — MISIÓN / VISIÓN / VALORES
   ========================================================================== */
.mvv{
  position:relative;
  padding:58px 0 62px;
  background:url('../img/mvv-bg.jpg') center/cover no-repeat;
}
.mvv::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,
              rgba(0,110,175,.90) 0%,
              rgba(0,64,110,.90) 45%,
              rgba(0,26,48,.92) 100%);
}
.mvv > *{ position:relative; z-index:1; }

.mvv-card{
  height:100%;
  background:#fff;
  border-radius:4px;
  padding:26px 24px 28px;
  box-shadow:var(--shadow-lg);
}

.mvv-card h3{
  font-weight:600;
  font-size:1.32rem;
  color:var(--cico-heading);
  text-align:center;
  margin-bottom:1rem;
}

.mvv-card p{
  font-size:.97rem;
  line-height:1.45;
  color:var(--cico-body);
  text-align:center;
  text-wrap:pretty;
  margin-bottom:0;
}

.mvv-list{ list-style:none; padding-left:.2rem; margin:0; }
.mvv-list li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.62rem;
  font-size:.97rem;
  line-height:1.4;
  color:var(--cico-body);
}
.mvv-list li::before{
  content:'▪';
  position:absolute; left:.25rem; top:-.05rem;
  color:var(--cico-body);
}
.mvv-list li:last-child{ margin-bottom:0; }


/* =============================================================================
   13. RESPONSIVE Y ACCESIBILIDAD
   ========================================================================== */
@media (max-width:1399.98px){
  .nav-cico .nav-link{ font-size:.9rem; padding:.35rem .45rem; }
}

@media (max-width:1199.98px){
  .site-header .navbar-collapse{ padding-block:.5rem 1rem; }
}

@media (max-width:991.98px){
  .hero-carousel .ratio-hero{ aspect-ratio:16 / 7; }
}

@media (max-width:575.98px){
  :root{ --header-height:84px; }
  .hero-carousel .ratio-hero{ aspect-ratio:4 / 3; }
  .kpi-num{ font-size:1.6rem; }
  .about h2,
  .section-title,
  .components .section-title{ font-size:1.45rem; }
  .back-to-top{ right:16px; bottom:16px; width:46px; height:46px; }
  .brand-cico img{ height:44px; }
  .brand-conep img{ height:42px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}