/* =========================
   GENERAL
   ========================= */
:root{
  --cmg-gold:#c7902d;
  --cmg-black:#0b0b0d;
  --cmg-sky:#5BA3E0;
  --cmg-green:#9ac556;
}

body{ font-family:"Source Sans 3",system-ui,sans-serif; }
h1,h2,h3,.navbar-brand{ font-family:"Montserrat",system-ui,sans-serif; }

.skip-link{
  position:absolute; top:0; left:0; transform:translateY(-140%);
  padding:.5rem .75rem; background:#fff; border:1px solid rgba(0,0,0,.15);
  border-radius:.5rem; z-index:1100;
}
.skip-link:focus{ transform:translateY(.5rem); }

.icon-badge{
  width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:rgba(199,144,45,.15); color:#6b4a12; flex:0 0 auto;
}

/* =========================
   NAVBAR
   ========================= */
.site-nav{
  transition: background-color .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.site-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left: 48px;
}

.site-brand__logo{
  height:44px;
  width:auto;
  display:block;
}

.site-brand__logo1{
  height:60px;
  width: 150px;;
  margin-left: 30px;
}

.site-brand__logo--full{ display:none; }
.site-nav:not(.is-solid) .site-brand__name{ display:none; }

.site-nav.is-solid .site-brand__logo--mark{ display:none; }
.site-nav.is-solid .site-brand__logo--full{ display:block; }
.site-nav.is-solid .site-brand__name{
  display:inline;
  font-weight:800;
}

.site-nav:not(.is-solid) .site-brand__logo{
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}

@media (min-width: 992px){
  .site-nav__links{
    margin-left: auto;
    margin-right: 70px;
  }
}

.offcanvas{
  color: var(--cmg-black);
}

.site-nav:not(.is-solid) .navbar-nav .nav-link{
  color: rgba(255,255,255,.92) !important;
}

.site-nav.is-solid .navbar-nav .nav-link{
  color: var(--cmg-black) !important;
}

.site-nav.is-solid .navbar-nav .nav-link:hover,
.site-nav.is-solid .navbar-nav .nav-link:focus,
.site-nav.is-solid .navbar-nav .nav-link.active{
  color: var(--cmg-gold) !important;
}

@media (max-width: 991.98px){
  #mainNav[class*="offcanvas"]{
    background: var(--cmg-black) !important;
    color: #fff !important;
  }

  #mainNav .offcanvas-title{ color:#fff !important; }

  #mainNav .btn-close{
    filter: invert(1) grayscale(100%);
    opacity: .9;
  }

  #mainNav .nav-link{ color: rgba(255,255,255,.92) !important; }
  #mainNav .nav-link:hover,
  #mainNav .nav-link:focus,
  #mainNav .nav-link.active{
    color: var(--cmg-gold) !important;
  }
}

@media (min-width: 992px){
  #mainNav{ background: transparent !important; }
}

/* =========================
   INDEX
   ========================= */
.hero-img{ height:92vh; min-height:520px; object-fit:cover; }

.hero-captionbar{
  position:absolute; left:0; right:0; bottom:0; padding:1.25rem 0; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(11,11,13,.72) 45%, rgba(11,11,13,.90) 100%);
  z-index: 3;
}

#heroCarousel{ position: relative; }
#heroCarousel .carousel-inner{ position: relative; z-index: 0; }

.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
  pointer-events: none;
}

.hero-slogan{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  color: #fff;
  pointer-events: none;
}

.hero-title{
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.hero-subtitle{
  font-weight: 400;
  letter-spacing: .03em;
}

.hero-slogan a,
.hero-slogan button{ pointer-events: auto; }

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  z-index: 10;
}

.section-band{ display:flex; flex-direction:column; }

.section-band__label{
  background:var(--cmg-gold); color:#111; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; padding:.75rem 1rem; font-size:.8rem;
}

.section-band__title{
  background:var(--cmg-black); color:#fff; font-weight:800;
  padding:.9rem 1rem; font-size:1.1rem;
}

@media (min-width:768px){
  .section-band{ flex-direction:row; align-items:stretch; }
  .section-band__label{ min-width:180px; display:flex; align-items:center; justify-content:center; }
  .section-band__title{ flex:1; display:flex; align-items:center; }
}

.community{background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;height:70vh;width:100%;position:relative;}
.community::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);}
.community>*{position:relative;z-index:1;}
.community__title{color: #fff;}
.community__subtitle{color: #fff;}
@media (max-width:991px){.community{background-attachment:scroll;height:60vh;}}

.sustainability{background: #C5DBEC;}
.sustainability__media{position:relative;}
.sustainability__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(248,249,250,0) 52%, rgba(248,249,250,.30) 84%, rgba(248,249,250,1) 100%);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);}

.corp-callout{padding-left:38px;}

.summary-shell{position:relative;overflow:hidden;}
.summary-shell__content{position:relative;z-index:2;}
.summary-shell__edge{position:absolute;top:0;bottom:0;width:160px;height:100%;object-fit:cover;pointer-events:none;z-index:1;}
.summary-shell__edge--left{left:0;}
.summary-shell__edge--right{right:0;}
@media (max-width:991px){.summary-shell__edge{display:none;}}

/* =========================
   FOOTER
   ========================= */
@media (max-width: 991.98px){
  #site-footer{ text-align: center; }
  #site-footer .d-flex{ justify-content: center; }
  #site-footer img{ display:block; margin: .5rem auto 0; }
}

/* =========================
   ABOUT (NOSOTROS)
   ========================= */
.cm-hero{position:relative;min-height:52vh;background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;align-items:end;padding:64px 0;}
.cm-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,11,13,.20) 0%, rgba(11,11,13,.55) 55%, rgba(11,11,13,.80) 100%);}
.cm-hero__content{position:relative;z-index:1;color:#fff;max-width:820px;padding-bottom:10px;}
.cm-hero__title{font-weight:800;letter-spacing:.01em;margin:0 0 10px 0;}
.cm-hero__lead{margin:0;color:rgba(255,255,255,.86);line-height:1.6;}

/* Tabs centradas + línea divisoria */
.cm-tabs__list{
  display:flex;
  justify-content:center;
  gap:.75rem;
  background:#fff;
  border-bottom:0; /* quita la línea default del nav-tabs */
}

.cm-tabs__divider{
  margin:0;
  height:3px;
  background:rgba(0,0,0,.25);
  border:0;
  margin-top:6px;
}

.cm-tabs__list .nav-link{
  border:0;
  border-radius:999px;
  padding:.55rem 1rem;
  font-weight:800;
  color:rgba(11,11,13,.72);
  background:transparent;
}

.cm-tabs__list .nav-link.active{
  background:rgba(199,144,45,.16);
  color:var(--cmg-black);
  box-shadow:inset 0 0 0 1px rgba(199,144,45,.35);
}

.about-gold-claim{color:var(--cmg-gold);font-weight:800;text-align:center;line-height:1.15;margin:0 auto 10px auto;max-width:980px;animation:aboutPop .8s ease both;}
@keyframes aboutPop{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.about-disclosure{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.06);}
.about-disclosure__summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;cursor:pointer;font-weight:800;}
.about-disclosure__summary::-webkit-details-marker{display:none;}
.about-disclosure__title{font-size:1rem;}
.about-disclosure__chev{transition:transform .25s ease;}
.about-disclosure[open] .about-disclosure__chev{transform:rotate(180deg);}
.about-disclosure__media{width:100%;background:#f4f6f8;}
.about-disclosure__img{width:100%;height:220px;object-fit:cover;display:block;}
.about-disclosure__body{padding:14px 16px;}

/* Contenido general dentro de cada tab */
.about-pane{max-width:1120px;margin:0 auto;padding:10px 0 0 0;}

/* Intro Potencial */
.potential-intro{max-width:980px;margin:0 auto 1.25rem auto;}
.potential-intro__title{font-weight:900;letter-spacing:.01em;margin:0 0 .35rem 0;text-align:center;}
.potential-intro__quote{color:var(--cmg-gold);font-weight:900;font-size:1.15rem;line-height:1.35;margin:0;text-align:center;animation:potentialPop .8s ease both;}
@keyframes potentialPop{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
/* Grid de 3 cards */
.potential-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
@media (max-width:991px){.potential-grid{grid-template-columns:1fr;}}

/* Card */
.potential-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.06);}
.potential-card__media{position:relative;background:#f4f6f8;}
.potential-card__img{width:100%;height:240px;object-fit:cover;display:block;}
.potential-card__toggle{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.95);box-shadow:0 10px 26px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;}
.potential-card__toggle i{font-size:1.2rem;color:var(--cmg-black);}
.potential-card__head{padding:1rem 1rem .85rem 1rem;}
.potential-card__title{font-weight:900;font-size:1.05rem;margin:0 0 .25rem 0;}
.potential-card__sub{margin:0;color:rgba(11,11,13,.72);}
.potential-card__body{padding:0 1rem 1rem 1rem;color:rgba(11,11,13,.74);}

/* Acciones (Perfil + Reporte) */
.potential-actions{margin-top:1.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;}
@media (max-width:991px){.potential-actions{grid-template-columns:1fr;}}
.potential-actions__item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border-radius:18px;background:rgba(199,144,45,.08);border:1px solid rgba(199,144,45,.18);}
.potential-actions__item i{width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(199,144,45,.15);color:#6b4a12;flex:0 0 auto;}
.potential-actions__title{font-weight:900;color:var(--cmg-black);margin-bottom:.1rem;}
.potential-actions__text{color:rgba(11,11,13,.72);margin-right:auto;}

/* Si tu navbar es más alto/bajo, ajusta este top */
@media (max-width:991px){#aboutTabs{top:0;}}

/* ===== ABOUT / PROYECCIÓN: decor triángulos ===== */
.about-projection{position:relative;overflow:visible;} /* <-- antes estaba hidden */
.about-projection__content{position:relative;z-index:2;}
.about-projection__tri{
  position:absolute;
  right:-200px;             /* más afuera (ajusta) */
  width:300px;              /* un poquito más grande */
  height:auto;
  opacity:.95;
  pointer-events:none;
  transform:rotate(-90deg);
  z-index:1;                /* detrás del texto, pero visible */
}
/* Para que el texto no se choque con los triángulos */
@media (min-width:992px){
  .about-projection{padding-right:220px;}
}
/* Tus posiciones */
.about-projection__tri--1{ top:80px; }
.about-projection__tri--2{ top:290px; }
.about-projection__tri--3{ top:500px; }
@media (max-width:991.98px){.about-projection__tri{display:none;}}

.about-block__title{font-weight:900;margin:0 0 12px 0;position:relative;display:inline-block;color:var(--cmg-black);}
.about-block__title::after{content:"";display:block;height:6px;width:54px;background:var(--cmg-gold);margin-top:10px;border-radius:99px;}
.about-block__text{margin:0;color:#667085;line-height:1.75;max-width:900px;}

.about-values{margin:0;padding-left:18px;color:#667085;line-height:1.9;}
.about-values__k{font-weight:900;color:var(--cmg-gold);}
.about-values__v{color:#667085;}

/* imagen abajo + cuadro a la derecha */
.projection-snapshot{position:relative;border-radius:22px;overflow:hidden;min-height:360px;background-position:center;background-repeat:no-repeat;background-size:cover;}
.projection-snapshot::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.10) 75%, rgba(0,0,0,.22) 100%);}
.projection-snapshot__card{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:min(440px, calc(100% - 44px));background:#fff;border-radius:18px;padding:18px 18px;box-shadow:0 14px 30px rgba(0,0,0,.12);}
.projection-snapshot__title{margin:0 0 10px 0;font-weight:900;color:var(--cmg-black);}
.projection-snapshot__list{margin:0;padding-left:18px;color:#475467;line-height:1.8;}

@media (max-width:991px){
  .projection-snapshot{min-height:auto;}
  .projection-snapshot__card{position:static;transform:none;margin:16px;}
}

/* ===== ABOUT / DIRECCIÓN: decor triángulos ===== */
.about-direction{position:relative;overflow:hidden;padding:44px 0;}
.about-direction__content{position:relative;z-index:2;}
.about-direction__tri{position:absolute;z-index:1;pointer-events:none;opacity:.95;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.08));}

/* ===== ABOUT / DIRECCIÓN: decor triángulos ===== */
.about-direction{position:relative;overflow:hidden;padding:24px 0;}
.about-direction__content{position:relative;z-index:2;}
.about-direction__tri{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.95;
  height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.08));
}

/* izquierda (arriba/medio) */
.about-direction__tri--a{left:-10px; top:30px;  width:170px; transform:rotate(180deg);}
.about-direction__tri--b{left:90px;  top:130px; width:120px; transform:rotate(90deg);}
.about-direction__tri--c{left:220px; top:260px; width:150px; transform:rotate(-90deg);}
.about-direction__tri--g{left:40px;  top:420px; width:130px; transform:rotate(180deg);}
/* derecha (bien pegados al borde, como fondo) */
.about-direction__tri--d{right:-30px; top:40px;  width:210px; transform:rotate(45deg);}
.about-direction__tri--e{right:-20px; top:220px; width:150px; transform:rotate(0deg);}
.about-direction__tri--f{right:140px; top:340px; width:180px; transform:rotate(180deg);}
.about-direction__tri--h{right:-35px; top:520px; width:140px; transform:rotate(90deg);}
.about-direction__tri--i{right:260px; top:120px; width:120px; transform:rotate(-90deg);}
.about-direction__wrap{max-width:1200px;margin-inline:auto;}

/* Centrar el bloque de Dirección y las cards en mobile */
.about-direction__content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 991.98px){
  .about-person{
    max-width: 420px;     /* ancho cómodo */
    margin: 0 auto;       /* centra la card */
  }
}

/* =========================
   OPERATIONS (BUMERAN)
   ========================= */
/* --- 1. Estilos Base (Colores y Tamaños) --- */
.ops-img {
  width: 100%;
  object-fit: cover;
  min-height: 400px; /* Asegura altura decente */
}

.ops-card-title {
  background-color: var(--cmg-green); /* El verde de tu marca */
  color: white;
  display: inline-block; /* Para que el fondo se ajuste al texto */
  padding: 0.5rem 2.5rem;
  font-weight: 700;
  position: relative;
  z-index: 10; /* Asegura que esté encima de todo */
  margin-bottom: 0; /* Pegado a la caja blanca */
}

.ops-card-body {
  background-color: white;
  padding: 2.5rem;
  position: relative;
  z-index: 5; 
}

/* --- 2. Lógica de Superposición (Overlap) --- */

/* PANTALLAS GRANDES (PC): El texto se mueve a la izquierda */
@media (min-width: 992px) {
  .ops-overlap-group {
    margin-left: -80px; /* Aquí ocurre la magia */
  }
}

/* PANTALLAS PEQUEÑAS (Móvil/Tablet): El texto sube un poco */
@media (max-width: 991px) {
  .ops-overlap-group {
    margin-top: -40px;
    padding: 0 1rem; /* Un poco de margen a los lados */
  }
  .ops-card-body {
    padding: 1.5rem; /* Menos padding en móvil */
  }
}

/* ======= LABORATORIO HIGHLIGHT OPERATIONS===== */
/* ===== Banner Laboratorio Ajustado ===== */

.lab-highlight .lab-card {
  background: linear-gradient(90deg, #c7902d 0%, #d9a441 100%);
  border: none;
}

/* Título en negro */
.lab-highlight h3 {
  color: #ffffff;
  font-weight: 700;
}

/* Párrafo en negro */
.lab-highlight p {
  color: #0b0b0d !important;
}

/* Badge invertido */
.lab-highlight .badge {
  background-color: #0b0b0d !important; 
  color: #ffffff !important;           
  font-weight: 600;
}

.lab-detail {
  background-color: #f8f9fa;
}

.lab-detail h3 {
  font-weight: 700;
  color: #0b0b0d;
}

.lab-detail .badge {
  background-color: #0b0b0d !important;
  color: #ffffff !important;
}

.lab-detail ul li {
  margin-bottom: 0.5rem;
}

.lab-detail ul li::marker {
  color: #c7902d;
}

/* ===== OPERATIONS: decor triángulos ===== */
.operations-direction{
  position:relative;
  overflow:hidden;
  padding:24px 0;
}

.operations-direction__content{
  position:relative;
  z-index:2;
}

.operations-direction__tri{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.95;
  height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.08));
}

/* izquierda */
.operations-direction__tri--a{left:-10px; top:30px;  width:170px; transform:rotate(180deg);}
.operations-direction__tri--b{left:90px;  top:130px; width:120px; transform:rotate(90deg);}
.operations-direction__tri--c{left:220px; top:260px; width:150px; transform:rotate(-90deg);}
.operations-direction__tri--g{left:40px;  top:420px; width:130px; transform:rotate(180deg);}

/* derecha */
.operations-direction__tri--d{right:-30px; top:40px;  width:210px; transform:rotate(45deg);}
.operations-direction__tri--e{right:-20px; top:220px; width:150px; transform:rotate(0deg);}
.operations-direction__tri--f{right:450px; top:120px; width:130px; transform:rotate(180deg);}
.operations-direction__tri--h{right: 950px; top:40px; width:140px; transform:rotate(90deg);}
.operations-direction__tri--i{right:260px; top:120px; width:120px; transform:rotate(-90deg);}
/*community*/
/* Triángulos extra para la sección de Comunidad (fondo más largo) */
.operations-direction__tri--j { left: -40px; top: 45%; width: 180px; transform: rotate(75deg);}
.operations-direction__tri--k { right: -50px; top: 60%; width: 200px; transform: rotate(-45deg);}
.operations-direction__tri--l { left: 450px; bottom: 10%; width: 140px; transform: rotate(180deg);}
.operations-direction__tri--m { right: 120px; bottom: 5%; width: 160px; transform: rotate(20deg);}
.operations-direction__tri--n { left: 45%; bottom: -20px; width: 220px; transform: rotate(-10deg); opacity: 0.6}

/*sustainability*/
/* GESTIÓN INSTITUCIONAL*/
.gi-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Aumenta este valor para más separación (ej. 3rem) */
  padding: 1rem 0; /* Un poco de aire arriba y abajo */
}
.gi-card {
  background: #ffffff; /* Fondo blanco limpio */
  border-width: 2px;
  border-style: solid;
  border-radius: 24px;
  transition: all 0.3s ease-in-out;
  overflow: hidden; /* Asegura que el contenido respete las esquinas redondeadas */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra base muy sutil */
}
.gi-media {
  width: 0;
  overflow: hidden;
  transition: all .5s ease;
}
.gi-media img {
  height: 100%;
  object-fit: cover;
}
.gi-card.active .gi-media {
  width: 40%;
}
.gi-card .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 2rem; /* Un poco más de espacio interno */
}
.gi-toggle {
  position: static;
  background: none;
  border: 0;
  font-size: 26px;
  cursor: pointer;
  color: var(--gi-accent, var(--cmg-gold));
  transition: transform 0.3s ease; /* Animación para la flecha */
}
.gi-card:hover .gi-toggle {
    transform: translateX(5px); /* Mueve la flechita al pasar el mouse */
}
.gi-card--prod { border-color: var(--cmg-sky); }
.gi-card--prod .card-title { color: var(--cmg-sky); }
.gi-card--grow { border-color: var(--cmg-gold); }
.gi-card--grow .card-title { color: var(--cmg-gold); }
.gi-card--sus { border-color: var(--cmg-green); }
.gi-card--sus .card-title { color: var(--cmg-green); }
.gi-card:hover { transform: translateY(-7px); /* Levanta la tarjeta */}
.gi-card--prod:hover { box-shadow: 0 15px 30px rgba(0, 180, 255, 0.25); }
.gi-card--grow:hover { box-shadow: 0 15px 30px rgba(218, 165, 32, 0.25);}
.gi-card--sus:hover {box-shadow: 0 15px 30px rgba(40, 167, 69, 0.25);}

.cm-title-underlined {
  position: relative;
  margin-bottom: 1.5rem; 
}

.cm-title-underlined::after {
  content: "";
  display: block; 
  width: 60px;    
  height: 5px;    
  background-color: var(--cmg-gold, #c7902d); 
  margin-top: 0.5rem; 
  border-radius: 50px; /* Esto hace que los bordes sean redondeados como una pastilla */
}