/* ======================================================
   GOUT · NOSOTROS.CSS
   ====================================================== */

/* ======================================================
   1) HERO INSTITUCIONAL
   ====================================================== */
.about-hero {
  padding: 150px 0 120px;
  background:
    radial-gradient(130% 130% at 0% 0%,
      var(--color-primary) 0%,
      var(--color-primary-deep) 72%);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.about-hero-title {
  margin-bottom: 24px;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.25rem);
  color: var(--color-white);
}

.about-hero-title b { color: var(--color-secondary); }

.about-hero-copy {
  padding-left: 40px;
  border-left: 2px solid rgba(235, 255, 140, .22);
}

.about-hero-copy p {
  color: var(--color-on-dark-muted);
  font-size: 1.06rem;
  line-height: 1.75;
}

.about-hero-copy p + p { margin-top: 18px; }
.about-hero-copy strong { color: var(--color-on-dark); font-weight: 700; }

/* ======================================================
   2) PRESENCIA REGIONAL
   ====================================================== */
.region-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.region-copy { max-width: 560px; }
.region-copy strong { color: var(--color-ink); font-weight: 700; }
.region-actions { margin-top: 32px; }

.region-map {
  display: flex;
  justify-content: center;
}

.region-map img {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* ======================================================
   PRESENCIA · MAPA MUNDIAL INTERACTIVO
   ====================================================== */
.gmap { position: relative; margin-top: 56px; }

.gmap-canvas {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: radial-gradient(120% 130% at 18% 12%, var(--color-primary) 0%, var(--color-primary-deep) 70%);
  box-shadow: var(--shadow-lg);
}

.gmap-base { display: block; width: 100%; height: auto; }

.gmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.gmap-arc {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: .4;
  stroke-opacity: .22;
  stroke-dasharray: 2 3;
  animation: gmapDash 22s linear infinite;
}

.gmap-arc.is-lit { stroke-opacity: .9; stroke-width: .65; }

@keyframes gmapDash { to { stroke-dashoffset: -120; } }

.gmap-point { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); }

.gmap-trigger {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
}

.gmap-dot {
  position: relative; width: 11px; height: 11px; border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.5);
}

.gmap-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: gmapPulse 2.6s var(--ease) infinite;
}

@keyframes gmapPulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.8); opacity: 0;  }
  100% { transform: scale(2.8); opacity: 0;  }
}

.gmap-point--ops .gmap-dot {
  width: 13px; height: 13px; background: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(235,255,140,.2), 0 0 16px rgba(235,255,140,.55);
}

.gmap-point--hq .gmap-dot {
  width: 17px; height: 17px; background: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(235,255,140,.26), 0 0 22px rgba(235,255,140,.75);
}

.gmap-point--hq .gmap-dot::after { animation-duration: 2.2s; }

.gmap-card {
  position: absolute; left: 50%; bottom: calc(50% + 18px);
  width: 230px; transform: translate(-50%, 8px);
  padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(0,37,35,.94);
  border: 1px solid rgba(235,255,140,.22);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 5;
}

.gmap-point:hover, .gmap-point:focus-within, .gmap-point.is-active { z-index: 10; }

.gmap-point:hover .gmap-card,
.gmap-point:focus-within .gmap-card,
.gmap-point.is-active .gmap-card {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

.gmap-card-tag {
  display: inline-block; font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 10px;
  background: rgba(235,255,140,.14); color: var(--color-secondary);
}

.gmap-card-tag.is-hq { background: var(--color-secondary); color: var(--color-primary-deep); }

.gmap-card strong { display: block; font-size: 1.05rem; color: #fff; line-height: 1.2; }
.gmap-card-country { display: block; font-size: .82rem; color: var(--color-secondary); margin-bottom: 8px; }
.gmap-card-addr { display: block; font-size: .84rem; line-height: 1.45; color: var(--color-on-dark-muted); }

.gmap-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; margin-top: 28px; }
.gmap-legend li { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600; color: var(--color-text); }
.gmap-legend .lg-dot { width: 12px; height: 12px; border-radius: 50%; }
.lg-hq   { background: var(--color-secondary-pink); box-shadow: 0 0 0 3px rgba(0,74,72,.15); }
.lg-ops  { background: var(--color-secondary-deep); }
.lg-pres { background: var(--color-primary); }

/* === MAPA · posiciones de marcadores (desktop) === */
.gmap-point[data-city="ar"] { left: 33.78%; top: 83.52%; }
.gmap-point[data-city="co"] { left: 29.42%; top: 55.84%; }
.gmap-point[data-city="pe"] { left: 28.60%; top: 67.64%; }
.gmap-point[data-city="mx"] { left: 22.46%; top: 45.47%; }
.gmap-point[data-city="cl"] { left: 30.37%; top: 82.71%; }
.gmap-point[data-city="uy"] { left: 35.40%; top: 84.40%; }
.gmap-point[data-city="es"] { left: 48.97%; top: 30.69%; }

.gmap-lines--mobile { display: none; }

/* === MOBILE (≤ 768px) === */
@media (max-width: 768px) {
  .gmap { margin-top: 36px; }

  .gmap-lines--desktop { display: none; }
  .gmap-lines--mobile  { display: block; }

  .gmap-point[data-city="ar"] { left: 46.10%; top: 79.26%; }
  .gmap-point[data-city="co"] { left: 34.73%; top: 42.86%; }
  .gmap-point[data-city="pe"] { left: 32.58%; top: 58.38%; }
  .gmap-point[data-city="mx"] { left: 16.57%; top: 29.23%; }
  .gmap-point[data-city="cl"] { left: 37.20%; top: 78.19%; }
  .gmap-point[data-city="uy"] { left: 48.71%; top: 80.14%; }
  .gmap-point[data-city="es"] { left: 85.72%; top: 9.80%; }

  .gmap-point[data-city="mx"] .gmap-card { left: 50%; right: auto; bottom: calc(50% + 16px); transform: translate(0, 8px); }
  .gmap-point[data-city="mx"]:hover .gmap-card,
  .gmap-point[data-city="mx"]:focus-within .gmap-card,
  .gmap-point[data-city="mx"].is-active .gmap-card { transform: translate(0, 0); }

  .gmap-point[data-city="es"] .gmap-card { left: auto; right: 50%; bottom: auto; top: calc(50% + 16px); transform: translate(0, -8px); }
  .gmap-point[data-city="es"]:hover .gmap-card,
  .gmap-point[data-city="es"]:focus-within .gmap-card,
  .gmap-point[data-city="es"].is-active .gmap-card { transform: translate(0, 0); }

  .gmap-trigger { width: 30px; height: 30px; }
  .gmap-dot { width: 9px; height: 9px; }
  .gmap-point--ops .gmap-dot { width: 11px; height: 11px; }
  .gmap-point--hq .gmap-dot  { width: 14px; height: 14px; }
  .gmap-card { width: 200px; }
  .gmap-legend { gap: 10px 18px; font-size: .82rem; }
}

/* ======================================================
   3) ESENCIA & DIFERENCIAL (grilla de 2 cards)
   ====================================================== */
.essence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* ======================================================
   4) MODELO DE GESTIÓN INTELIGENTE
   ====================================================== */
.gestion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.gestion-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.gestion-media img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
}

.gestion-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 52px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(130% 120% at 100% 0%,
      var(--color-primary) 0%,
      var(--color-primary-deep) 75%);
  box-shadow: var(--shadow-lg);
}

.gestion-card h2 { color: var(--color-white); margin: 4px 0 16px; }
.gestion-card p { color: var(--color-on-dark-muted); line-height: 1.75; }
.gestion-card p + p { margin-top: 16px; }

/* ======================================================
   CULTURA · centrado de pills (ajuste puntual del componente)
   ====================================================== */
.culture-points { justify-content: center; }

/* ======================================================
   5) CIERRE · CONTACTO DIRECTO
   ====================================================== */
.about-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 18px;
  justify-content: center;
  margin-top: 40px;
}

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

/* ---------- TABLET (≤ 992px) ---------- */
@media (max-width: 992px) {
  .about-hero { padding: 120px 0 88px; }

  .about-hero-grid,
  .region-grid,
  .gestion-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-hero-copy {
    padding-left: 0;
    border-left: none;
  }

  .gestion-media img { min-height: 320px; }
}

/* ---------- MOBILE (≤ 768px) ---------- */
@media (max-width: 768px) {
  .about-hero { padding: 96px 0 72px; }

  .essence-grid { grid-template-columns: 1fr; gap: 16px; }

  .gestion-card { padding: 40px 28px; }

  .about-cta-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}