/* Extras del sitio de Mariangel que no vienen en el bundle del sistema de diseño */

.logros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: var(--space-4);
}
.logro-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.logro-item.tall { grid-row: span 2; }
.logro-item.wide { grid-column: span 2; }
.logro-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.logro-item:hover img { transform: scale(1.06); }
.logro-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: linear-gradient(0deg, oklch(0.15 0.05 262 / 0.82) 0%, oklch(0.15 0.05 262 / 0) 100%);
  color: var(--blanco);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

/* botón flotante de WhatsApp */
.wa-float {
  position: fixed;
  bottom: 22px; right: 22px;
  width: 58px; height: 58px;
  border-radius: 999px;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px oklch(0.65 0.19 150 / 0.45);
  z-index: 90;
  animation: wa-pulse 2.4s ease-in-out infinite;
}
.wa-float img { width: 28px; height: 28px; }
@keyframes wa-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (max-width: 900px) {
  .logros-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .logro-item.wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .logros-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .logro-item.tall { grid-row: span 1; }
}

/* ===== Header responsive ===== */
.mobile-toggle { display: none; }
.mobile-nav-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--blanco);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

/* ===== Layout responsive (secciones armadas con CSS grid inline) =====
   Un !important en hoja de estilos SÍ gana sobre un style inline sin !important,
   así que estas reglas pueden sobrescribir los grid-template-columns fijados en JSX. */
@media (max-width: 860px) {
  .desktop-nav-group { display: none !important; }
  .mobile-toggle { display: flex !important; align-items: center; justify-content: center; }

  .r-grid,
  .r-grid-sm,
  .r-grid-form { grid-template-columns: 1fr !important; }

  .r-grid-plans { grid-template-columns: 1fr 1fr !important; }
  .r-grid-videos { grid-template-columns: 1fr 1fr !important; }

  .r-reverse > *:first-child { order: 2; }
  .r-reverse > *:last-child { order: 1; }

  .r-table-wrap { overflow-x: auto; }
  .r-cmp-row { min-width: 560px; }

  .hero-bg-panel { display: none; }
}

@media (max-width: 460px) {
  .r-grid-plans,
  .r-grid-sm,
  .r-grid-videos { grid-template-columns: 1fr !important; }
}

/* ===== Disparadores de la galería (foto de héroe + avatar del header) ===== */
.gallery-trigger { transition: opacity .15s ease, transform .15s ease; }
.gallery-trigger:hover { opacity: .9; transform: scale(1.015); }

.gallery-badge {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--blanco);
  color: var(--azul-vivo);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gallery-badge:hover { background: var(--azul-vivo); color: var(--blanco); }

/* ===== Modal de galería ===== */
.gallery-modal {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.12 0.03 262 / 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.gallery-close {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 44px; height: 44px; border-radius: 999px;
  background: oklch(1 0 0 / 0.12); border: none; color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gallery-close:hover { background: oklch(1 0 0 / 0.22); }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: oklch(1 0 0 / 0.12); border: none; color: var(--blanco);
  width: 52px; height: 52px; border-radius: 999px;
  font-size: 30px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.gallery-arrow.left { left: var(--space-4); }
.gallery-arrow.right { right: var(--space-4); }
.gallery-arrow:hover { background: oklch(1 0 0 / 0.22); }
.gallery-figure {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  width: min(760px, 78vw);
  min-width: 0;
}
.gallery-figure img {
  display: block;
  width: 100%; max-height: 68vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}
.gallery-figure figcaption {
  color: var(--blanco);
  font-size: var(--fs-small);
  text-align: center;
  display: flex; align-items: center; gap: var(--space-3);
}
.gallery-count { color: oklch(1 0 0 / 0.6); }

@media (max-width: 640px) {
  .gallery-modal { padding: var(--space-4); }
  .gallery-arrow { width: 40px; height: 40px; font-size: 22px; }
  .gallery-arrow.left { left: var(--space-2); }
  .gallery-arrow.right { right: var(--space-2); }
  .gallery-figure { max-width: 88vw; }
}

/* ===== Enlace del logo SURA (header y footer) con burbuja de confirmación ===== */
.sura-logo-link {
  position: relative;
  display: inline-flex;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.sura-logo-tooltip {
  position: absolute;
  background: var(--azul-sura);
  color: var(--blanco);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 30;
}
.sura-logo-tooltip::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
}
.sura-logo-tooltip.down { top: calc(100% + 10px); right: 0; }
.sura-logo-tooltip.down::after { bottom: 100%; right: 14px; border-bottom-color: var(--azul-sura); }
.sura-logo-tooltip.up { bottom: calc(100% + 10px); left: 0; }
.sura-logo-tooltip.up::after { top: 100%; left: 14px; border-top-color: var(--azul-sura); }

.sura-logo-link:hover .sura-logo-tooltip,
.sura-logo-link:focus-visible .sura-logo-tooltip {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 640px) {
  .sura-logo-tooltip { white-space: normal; max-width: 220px; }
}

/* ===== Ilustración de la sección Preguntas Frecuentes ===== */
.faq-illustration {
  position: relative;
  display: flex;
  justify-content: center;
}
.faq-illustration img {
  width: 100%;
  max-width: 320px;
}
.faq-question-mark {
  position: absolute;
  top: 2%;
  left: 61%;
  transform: translateX(-50%) rotate(-8deg);
  font-family: var(--font-core);
  font-size: clamp(48px, 9vw, 72px);
  font-weight: var(--fw-extrabold);
  color: var(--amarillo-alegre);
  -webkit-text-stroke: 3px var(--azul-sura);
  paint-order: stroke fill;
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 860px) {
  .faq-illustration { margin-top: var(--space-8); }
  .faq-illustration img { max-width: 240px; }
}

/* ===== Imagen de banner a sangre (misma altura que el banner) ===== */
.hero-bleed-img { display: none; }

@media (min-width: 861px) {
  .hero-bleed-img {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    max-width: 46%;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
  }
  .hero-inline-hide-desktop { display: none; }
}

/* ===== Desvanecido en los bordes para integrar la imagen con el fondo del banner,
   sin depender de que el color coincida al pixel (compresión JPG, viñetas, etc.) ===== */
.hero-img-blend {
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 78%, transparent 100%);
}