/******************************
  SOBRE-NOSOTROS (page CSS)
******************************/

/* Hero específico de la página */
.hero-about{ 
  position: relative; min-height: 60vh; padding-top: 80px; 
  background: var(--gc-gradient-reverse);
  display: flex; align-items: center; overflow: hidden;
}
.hero-about-overlay{
  position:absolute; inset:0; background: radial-gradient( circle at 20% 10%, rgba(255,255,255,.12), transparent 40% ),
                                         radial-gradient( circle at 80% 90%, rgba(255,255,255,.08), transparent 40% );
}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before{ color: rgba(255,255,255,.7); }
.breadcrumb-custom .breadcrumb-item a{ color:#fff; text-decoration:none; }
.breadcrumb-custom .breadcrumb-item.active{ color: #E0F7FA; }

/* Sección About */
.section-about .about-bullets li{ margin:.5rem 0; color:#555; }
.section-about .about-bullets i{ color: var(--gc-primary); margin-right:.5rem; }
.section-about .about-image{ height:100%; }
.section-about .about-image img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 1632 / 640; display:block; }

/* Cards Misión/Visión/Valores */
.value-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:1.5rem; 
  box-shadow:0 6px 20px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease;
}
.value-card:hover{ transform: translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,.12); }
.value-card .icon{ 
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; 
  background: var(--gc-gradient); color:#fff; font-size:1.4rem; margin-bottom:1rem;
}
.value-card h5{ font-weight:700; }

/* Timeline */
.timeline{ position: relative; margin-left: 1rem; padding-left: 2rem; }
.timeline::before{
  content:''; position:absolute; left:1rem; top:0; bottom:0; width:3px; background: linear-gradient(180deg, var(--gc-primary), var(--gc-secondary)); border-radius:3px;
}
.timeline-item{ position: relative; padding: 1rem 0 1rem 1rem; }
.timeline-marker{
  position:absolute; left:-.1rem; top:1.2rem; transform: translateX(-50%);
  background:#fff; color:var(--gc-secondary); border:3px solid var(--gc-secondary); 
  width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.timeline-content{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:1rem 1.25rem; box-shadow:0 6px 20px rgba(0,0,0,.05); }
.timeline-content h6{ margin-bottom:.25rem; }

/* Team */
.team-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:1rem; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.team-card .avatar{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; }
.team-card .social a{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background: var(--gc-light); color:#333; margin:0 .15rem; transition: all .2s ease; }
.team-card .social a:hover{ background: var(--gc-primary); color:#fff; }

/* FAQ */
.faq-accordion .accordion-item{ border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; margin-bottom: .75rem; }
.faq-accordion .accordion-button{ font-weight:600; }
.faq-accordion .accordion-button:focus{ box-shadow:none; }
.faq-accordion .accordion-button:not(.collapsed){ background:#F0FBFD; color:#004D56; }

/* CTA sección toma estilos globales .cta-section */

/* Utilidades */
.bg-white-10{ background: rgba(255,255,255,.1) !important; border-radius: 18px; }

/* Responsive */
@media (max-width: 992px){
  .timeline-marker{ left: 0; }
  .timeline::before{ left: .3rem; }
}

/* ===== CTA buttons (sobre-nosotros) ===== */
.cta-section .btn {
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Botón lleno (Tienda) */
.cta-section .btn-light {
  background: #fff;
  color: var(--gc-secondary);
  border: 2px solid #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.cta-section .btn-light:hover,
.cta-section .btn-light:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
  color: var(--gc-secondary-dark);
}

/* Botón contorno (Contacto) — para usar con .btn-modern.btn-modern-outline */
.cta-section .btn-modern-outline{
  color:#fff;                                /* texto/ícono blancos */
  border:2px solid rgba(255,255,255,.95);
  background: rgba(0,0,0,.18);               /* leve fondo para legibilidad */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.cta-section .btn-modern-outline:hover,
.cta-section .btn-modern-outline:focus{
  background:#fff;                            /* invierte en hover/focus */
  color: var(--gc-secondary);
  border-color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

/* Si en algún momento usas .btn-outline-light también quedará bien */
.cta-section .btn-outline-light {
  color: #fff;
  border: 2px solid rgba(255,255,255,.95);
  background: transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.cta-section .btn-outline-light:hover,
.cta-section .btn-outline-light:focus {
  background: #fff;
  color: var(--gc-secondary);
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

/* Icono dentro del botón — usa currentColor */
.cta-section .btn i,
.cta-section .btn-modern-outline i,
.cta-section .btn-outline-light i {
  color: inherit;
  transform: translateY(1px);
}

/* Accesibilidad: menos movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .cta-section .btn { transition: none; }
  .cta-section .btn:hover,
  .cta-section .btn:focus { transform: none; }
}

/* === CTA con fondo azul y botones que invierten === */

/* Fondo (usa tus colores de la web) */
.cta-section{
  background: var(--gc-gradient) !important;   /* gradiente azul */
  color: #fff !important;
}
.cta-section h2,
.cta-section p{
  color:#fff !important;
}

/* Base de botones en CTA */
.cta-section .btn{
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Ambos botones (btn-light y btn-outline-light) se ven iguales: texto/blanco + contorno, fondo transparente */
.cta-section .btn-light,
.cta-section .btn-outline-light{
  color:#fff !important;
  background: transparent !important;
  border:2px solid rgba(255,255,255,.95) !important;
}

/* Hover: invierte (fondo blanco + texto azul) */
.cta-section .btn-light:hover,
.cta-section .btn-light:focus,
.cta-section .btn-outline-light:hover,
.cta-section .btn-outline-light:focus{
  background:#fff !important;
  color: var(--gc-secondary) !important;
  border-color:#fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

/* El icono hereda el color del texto (también invierte) */
.cta-section .btn i{
  color: inherit;
  transform: translateY(1px);
}

/* Variante: si prefieres fondo azul sólido en vez de gradiente, añade 'cta--solid' a la sección */
.cta-section.cta--solid{
  background: var(--gc-secondary) !important;
}