/* =============== TOKENS / VARIABLES (opcional) =============== */
:root{
  --brand:#198754;
  --brand-700:#14532d;
  --ink:#0f172a;

  /* Cambia aquí si tu archivo real es VENTAS.png */
  --hero-img: url('../img/banner/BANNER\ 4.png');

  /* Proporción exacta del banner 2048x738 */
  --hero-aspect-w: 2048;
  --hero-aspect-h: 738;
}

/* === Fondo general y animación del cuerpo === */
body {
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
  animation: bodyFade 1.5s ease;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@keyframes bodyFade { 0%{opacity:0} 100%{opacity:1} }

/* === Encabezado interno === */
#inner-headline {
  background: linear-gradient(to right, #e9ecef, #f8f9fa);
  border-bottom: 2px solid #dee2e6;
  animation: slideDown 1.2s ease;
}
@keyframes slideDown { 0%{opacity:0; transform:translateY(-30px)} 100%{opacity:1; transform:translateY(0)} }
#inner-headline h2 { font-weight:700; font-size:2rem; color:#343a40; }

/* === Carrusel === */
#aboutCarousel .carousel-item img{
  object-fit:cover;
  height:350px;
  border-radius:12px;
  animation:fadeSlideIn 1.2s ease-in-out both;
}
@keyframes fadeSlideIn { 0%{opacity:0; transform:translateY(30px)} 100%{opacity:1; transform:translateY(0)} }

/* === Tarjetas del equipo === */
.team-card{
  transition:transform .3s ease, box-shadow .3s ease;
  border-radius:12px; overflow:hidden; background:#fff;
  animation:zoomInCard .8s ease-in-out;
}
.team-card:hover{ transform:translateY(-5px) scale(1.02); box-shadow:0 12px 30px rgba(0,0,0,.2); }
@keyframes zoomInCard { from{opacity:0; transform:scale(.95)} to{opacity:1; transform:scale(1)} }
.team-card h5{ font-weight:700; font-size:1.2rem; color:#2e2e2e; }
.team-card h6{ font-weight:500; font-size:1rem; color:#777; margin-bottom:.5rem; }
.team-card .card-text a{ color:#2d6a4f; text-decoration:none; transition:color .3s ease; }
.team-card .card-text a:hover{ color:#1b4332; text-decoration:underline; }

/* === Breadcrumb === */
#inner-headline .breadcrumb-item a{ color:#6c757d; transition:color .3s ease; }
#inner-headline .breadcrumb-item a:hover{ color:#198754; }

/* === Encabezados de sección === */
section h2{
  font-size:2rem; margin-bottom:1rem; color:#2c3e50; position:relative;
}
section h2::after{
  content:""; display:block; width:60px; height:3px; background-color:#198754;
  margin:10px auto 0; border-radius:2px; animation:growLine 1s ease-in-out;
}
@keyframes growLine { from{width:0} to{width:60px} }

/* =========================================================
   HERO SECTION — SIN RECORTES usando aspect-ratio
========================================================= */
.hero-section{
  position:relative;
  display:block;
  isolation:isolate;

  aspect-ratio: var(--hero-aspect-w) / var(--hero-aspect-h);
  width:100%;
  height:auto;
  max-height: 720px;         /* techo desktop (ajustable) */
  min-height: 260px;         /* piso mobile */

  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  color:#fff;

  /* Menos aire para que el contenido quede más cerca */
  padding: clamp(1rem, 2.5vw, 2.5rem) 1rem;
  margin-bottom: clamp(0rem, 1vw, .5rem);
}

/* Overlay (si lo usas para oscurecer) */
.hero-section .overlay{ position:absolute; inset:0; z-index:0; }
.hero-section .z-1{ z-index:1; position:relative; }

/* Animaciones texto en hero */
.hero-section h3.section-title{ animation:fadeInTop 1s ease-in-out both; }
.hero-section p{ animation:fadeInTop 1.4s ease-in-out both; max-width:700px; margin:0 auto; }
@keyframes fadeInTop { from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:translateY(0)} }

/* Ajuste mobile: permite crecer */
@media (max-width: 420px){
  .hero-section{ max-height:none; }
}

/* === Utilidades === */
.texto-justificado{ text-align:justify; }
.divider{ width:60px; height:4px; background:#fff; border-radius:2px; animation:growLine 1.2s ease-in-out both; }

/* === Mapa SVG (si aplica) === */
.container path{ fill:#237a29; stroke:#ffffff; stroke-width:2px; }
.container :hover{ fill:#ff0310; stroke:#ffffff; stroke-width:2px; }

/* =========================================================
   MISION / VISION — PNG transparente y cero “fondos blancos”
========================================================= */

/* 1) Si tus archivos ya tienen canal alpha → esto asegura transparencia */
.img-alpha{
  display:block;
  width:100%;
  height:auto;
  background: transparent !important;     /* por si traen color inline */
  object-fit: contain;
  image-rendering: auto;
}

/* 2) Si el PNG todavía trae blanco “horneado”, aplica esta clase extra
      para simular transparencia sobre fondos claros/medios. */
.img-remove-white{
  mix-blend-mode: multiply;                /* el blanco se “integra” */
  /* opcional: afina contraste si la imagen queda lavada */
  /* filter: contrast(1.05) brightness(1.02); */
}

/* 3) Compactar aire alrededor de las imágenes y títulos */
.block-tight { margin-bottom: .75rem !important; }
.title-tight { margin-top: .25rem !important; margin-bottom: .5rem !important; }
.text-tight  { margin-top: .25rem !important; }

/* 4) Reduce el espacio entre hero y el primer bloque */
#about{
  padding-top: clamp(0.75rem, 2vw, 1.25rem) !important;
  margin-top: 0 !important;
}

/* 5) Quita sombra y bordes en los contenedores de imagen si hay PNG transparente */
.media-frame{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}