/* =============================================================================
   PALETA ANTERIOR — preservada como referencia (snapshot pre-iteración v3)
   Hero original con tinte azul/lila científico:
     --g2-purple-deep:    #3d1037
     --g2-magenta-deep:   #7c2d6f
     --g2-magenta:        #c44d8e
     --g2-magenta-soft:   #e879b5
     --g2-magenta-tint:   #fbeaf3
     --g2-rose-pale:      #fce4f1
     --g2-teal-deep:      #0d3b3d
     --g2-teal:           #1a6e72
     --g2-teal-soft:      #4ba3a8
     --g2-gold:           #c9a84c
   El hero usaba: linear-gradient(135deg, var(--g2-purple-deep) 0%,
     var(--g2-magenta-deep) 35%, #b1408a 70%, var(--g2-magenta) 100%)
   con radial-gradient teal de acento sutil en esquina inferior izquierda.
   Esta paleta se mantiene intacta en :root abajo. Solo el navbar fue actualizado en v3.
   ============================================================================= */

/* =============================================================================
   G2STEM — Women in STEM Hall
   UDLAP Digital Makerspace · CertHall
   Scaffolding inicial — colores y layout listos para iteración la próxima semana.
   ============================================================================= */

:root {
  /* Identity --------------------------------------------------------------- */
  --g2-magenta-deep:   #7c2d6f;
  --g2-magenta:        #c44d8e;
  --g2-magenta-soft:   #e879b5;
  --g2-magenta-tint:   #fbeaf3;

  --g2-teal-deep:      #0d3b3d;
  --g2-teal:           #1a6e72;
  --g2-teal-soft:      #4ba3a8;

  --g2-gold:           #c9a84c;

  /* Surface ---------------------------------------------------------------- */
  --g2-bg:             #faf6f0;
  --g2-surface:        #ffffff;
  --g2-surface-2:      #f4eee5;
  --g2-border:         #e6dfd1;
  --g2-border-strong:  #d6cdb9;

  /* Text ------------------------------------------------------------------- */
  --g2-text:           #1a2332;
  --g2-text-muted:     #5a6877;
  --g2-text-soft:      #8a94a3;

  /* Spacing & radius ------------------------------------------------------- */
  --g2-radius-sm:      8px;
  --g2-radius:         14px;
  --g2-radius-lg:      20px;

  --g2-shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.04),
                  0 2px 6px rgba(26, 35, 50, 0.04);
  --g2-shadow:    0 4px 16px rgba(26, 35, 50, 0.06),
                  0 12px 32px rgba(26, 35, 50, 0.08);
  --g2-shadow-lg: 0 8px 24px rgba(124, 45, 111, 0.12),
                  0 24px 64px rgba(124, 45, 111, 0.16);

  /* Motion ---------------------------------------------------------------- */
  --g2-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --g2-ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--g2-bg);
  color: var(--g2-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* =============================================================================
   HERO
   ============================================================================= */

.g2-hero {
  position: relative;
  min-height: 420px;
  padding: 28px 32px 80px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.g2-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 85% 20%,
      rgba(232, 121, 181, 0.55) 0%,
      transparent 55%),
    radial-gradient(circle at 15% 85%,
      rgba(75, 163, 168, 0.45) 0%,
      transparent 60%),
    linear-gradient(135deg, #0d3b3d 0%, #1a6e72 30%, #7c2d6f 75%, #c44d8e 100%);
}

.g2-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px,
      rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.5;
}

.g2-nav {
  max-width: 1180px;
  margin: 0 auto 60px;
}

.g2-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.875rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 200ms var(--g2-ease);
}

.g2-back:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-2px);
}

.g2-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.g2-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.813rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}

.g2-hero-badge i {
  color: var(--g2-magenta-soft);
}

.g2-hero-title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fce4f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.g2-hero-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.g2-subtitle-divider {
  color: var(--g2-magenta-soft);
  font-weight: 700;
}

.g2-subtitle-en {
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
}

/* =============================================================================
   SECTION GENERICS
   ============================================================================= */

.g2-section {
  padding: 64px 32px;
}

.g2-section-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.g2-section-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g2-magenta);
  margin-bottom: 8px;
}

.g2-section-eyebrow--light {
  color: var(--g2-magenta-soft);
}

.g2-section-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g2-text);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.g2-icon-accent {
  color: var(--g2-magenta);
  font-size: 0.85em;
}

/* =============================================================================
   ABOUT
   ============================================================================= */

.g2-about-section {
  background: var(--g2-surface);
  border-bottom: 1px solid var(--g2-border);
}

.g2-about-inner {
  max-width: 880px;
}

.g2-about-header {
  text-align: center;
  margin-bottom: 36px;
}

.g2-about-body {
  font-size: 1.063rem;
  line-height: 1.75;
  color: var(--g2-text);
}

.g2-about-body p {
  margin-bottom: 18px;
}

.g2-about-body p:last-child {
  margin-bottom: 0;
}

.g2-about-body strong {
  color: var(--g2-magenta-deep);
  font-weight: 700;
}

/* =============================================================================
   CARRUSEL
   ============================================================================= */

.g2-carousel-section {
  background: var(--g2-bg);
}

.g2-carousel-section + .g2-carousel-section {
  padding-top: 0;
}

.g2-carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.g2-carousel-controls {
  display: flex;
  gap: 8px;
}

.g2-carousel-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g2-surface);
  border: 1px solid var(--g2-border);
  border-radius: 50%;
  color: var(--g2-text);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 180ms var(--g2-ease);
}

.g2-carousel-btn:hover {
  background: var(--g2-magenta);
  border-color: var(--g2-magenta);
  color: #fff;
  transform: scale(1.05);
}

.g2-carousel-btn:active { transform: scale(0.97); }

.g2-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--g2-border-strong) transparent;
  padding-bottom: 8px;
}

.g2-carousel::-webkit-scrollbar { height: 6px; }
.g2-carousel::-webkit-scrollbar-track { background: transparent; }
.g2-carousel::-webkit-scrollbar-thumb {
  background: var(--g2-border-strong);
  border-radius: 999px;
}

.g2-carousel-track {
  display: flex;
  gap: 16px;
  padding: 4px 0;
}

.g2-person-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--g2-surface);
  border: 1px solid var(--g2-border);
  border-radius: var(--g2-radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: all 220ms var(--g2-ease);
  cursor: default;
}

.g2-person-card:hover {
  border-color: var(--g2-magenta);
  transform: translateY(-3px);
  box-shadow: var(--g2-shadow);
}

.g2-person-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: linear-gradient(135deg,
    var(--g2-magenta-tint) 0%, var(--g2-surface-2) 100%);
  color: var(--g2-magenta-deep);
  border: 2px solid var(--g2-magenta-tint);
  transition: all 220ms var(--g2-ease);
}

.g2-person-card--instructora .g2-person-avatar {
  background: linear-gradient(135deg, #e0f2f3 0%, var(--g2-surface-2) 100%);
  color: var(--g2-teal-deep);
  border-color: #d4ecee;
}

.g2-person-card:hover .g2-person-avatar {
  transform: scale(1.05);
}

.g2-person-card--mentora:hover .g2-person-avatar {
  background: linear-gradient(135deg,
    var(--g2-magenta) 0%, var(--g2-magenta-deep) 100%);
  color: #fff;
  border-color: var(--g2-magenta);
}

.g2-person-card--instructora:hover .g2-person-avatar {
  background: linear-gradient(135deg,
    var(--g2-teal) 0%, var(--g2-teal-deep) 100%);
  color: #fff;
  border-color: var(--g2-teal);
}

.g2-person-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g2-person-name {
  font-size: 1.063rem;
  font-weight: 700;
  color: var(--g2-text);
}

.g2-person-role {
  font-size: 0.813rem;
  color: var(--g2-text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =============================================================================
   TWO-COLUMN: PROGRAMS + SIDE
   ============================================================================= */

.g2-two-col-section {
  background: var(--g2-surface);
  border-top: 1px solid var(--g2-border);
}

.g2-two-col-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}

.g2-col-header,
.g2-card-header {
  margin-bottom: 24px;
}

/* ---------- PROGRAMS LIST ---------- */

.g2-programs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.g2-program-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: start;
  padding: 20px 24px;
  background: var(--g2-surface);
  border: 1px solid var(--g2-border);
  border-radius: var(--g2-radius);
  transition: all 200ms var(--g2-ease);
}

.g2-program-item:hover {
  border-color: var(--g2-magenta);
  box-shadow: var(--g2-shadow-sm);
  transform: translateX(2px);
}

.g2-program-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg,
    var(--g2-magenta-tint) 0%, var(--g2-surface-2) 100%);
  border-radius: var(--g2-radius-sm);
  border: 1px solid var(--g2-magenta-tint);
}

.g2-program-badge i {
  color: var(--g2-magenta-deep);
  font-size: 1.125rem;
}

.g2-program-name {
  font-weight: 700;
  font-size: 0.938rem;
  color: var(--g2-text);
  letter-spacing: -0.01em;
}

.g2-program-description {
  font-size: 0.938rem;
  color: var(--g2-text-muted);
  line-height: 1.65;
}

/* ---------- SIDE COLUMN ---------- */

.g2-col--side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 24px;
}

.g2-card {
  background: var(--g2-surface);
  border: 1px solid var(--g2-border);
  border-radius: var(--g2-radius);
  padding: 28px;
}

/* Divulgación con tratamiento dark para destacar */
.g2-divulgacion-card {
  background: linear-gradient(155deg,
    var(--g2-teal-deep) 0%, #0a2a2c 100%);
  border-color: var(--g2-teal-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.g2-divulgacion-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle,
    rgba(196, 77, 142, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.g2-divulgacion-card .g2-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.g2-divulgacion-card .g2-icon-accent {
  color: var(--g2-magenta-soft);
}

.g2-divulgacion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
}

.g2-divulgacion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--g2-radius-sm);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 180ms var(--g2-ease);
}

.g2-divulgacion-item:hover {
  background: rgba(196, 77, 142, 0.18);
  border-color: var(--g2-magenta-soft);
  color: #fff;
  transform: translateY(-2px);
}

.g2-divulgacion-item i {
  font-size: 1.125rem;
  color: var(--g2-magenta-soft);
}

/* ---------- EVENTS ---------- */

.g2-events-card .g2-card-header {
  margin-bottom: 16px;
}

.g2-events-card .g2-card-header + .g2-events-grid {
  margin-bottom: 8px;
}

.g2-events-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--g2-text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.g2-events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.g2-events-grid--past {
  grid-template-columns: 1fr 1fr;
}

.g2-event-mini {
  background: var(--g2-surface-2);
  border: 1px solid var(--g2-border);
  border-radius: var(--g2-radius-sm);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  transition: all 180ms var(--g2-ease);
}

.g2-event-mini:hover {
  border-color: var(--g2-magenta);
  transform: translateY(-2px);
  background: var(--g2-magenta-tint);
}

.g2-event-mini i {
  font-size: 1.25rem;
  color: var(--g2-magenta);
}

.g2-event-mini--past i {
  color: var(--g2-text-soft);
}

.g2-event-mini-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g2-event-mini-title {
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--g2-text);
  line-height: 1.3;
}

.g2-event-mini-date {
  font-size: 0.688rem;
  color: var(--g2-text-soft);
  font-weight: 500;
}

.g2-events-divider {
  border: none;
  height: 1px;
  background: var(--g2-border);
  margin: 24px 0 20px;
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.g2-footer {
  padding: 32px 24px;
  text-align: center;
  background: var(--g2-bg);
  border-top: 1px solid var(--g2-border);
  font-size: 0.875rem;
  color: var(--g2-text-muted);
}

.g2-footer a {
  color: var(--g2-magenta);
  font-weight: 500;
}

.g2-footer a:hover { text-decoration: underline; }

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

@media (max-width: 968px) {
  .g2-two-col-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .g2-col--side {
    position: static;
  }
}

@media (max-width: 720px) {
  .g2-section { padding: 48px 20px; }
  .g2-hero { padding: 24px 20px 64px; min-height: 360px; }

  .g2-program-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .g2-program-badge {
    align-self: start;
  }

  .g2-divulgacion-grid,
  .g2-events-grid,
  .g2-events-grid--past {
    grid-template-columns: 1fr 1fr;
  }

  .g2-carousel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .g2-person-card {
    flex: 0 0 180px;
    padding: 20px 16px;
  }

  .g2-person-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
  }
}

@media (max-width: 460px) {
  .g2-divulgacion-grid {
    grid-template-columns: 1fr;
  }

  .g2-events-grid,
  .g2-events-grid--past {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   NAVBAR BRANDING + STRIP DECORATIVO — v4
   El hero original fue absorbido por el navbar. El branding (título + subtítulos
   bilingües) vive ahora centrado en el navbar verde DMS, con el logo DMS a la
   derecha y el back button a la izquierda. El strip decorativo conecta el navbar
   con el contenido magenta del hall.
   ============================================================================= */

.g2-event-header {
  position: relative;
  /* Anular los bordes verdes heredados de hall_styles.css:459-460
     (border 3px todos los lados + border-bottom 4px). Conservar el
     border-bottom-{left,right}-radius: 15px de hall_styles.css:457-458
     para mantener las esquinas inferiores redondeadas. */
  border: none !important;
}

.g2-event-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--g2-teal-deep) 0%,
    var(--g2-teal) 12%,
    var(--g2-teal-soft) 28%,
    #8a4d9a 50%,
    var(--g2-magenta-soft) 72%,
    #f5e6d3 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ---------- Branding centrado al navbar (absolute) ---------- */

/* El branding usa position: absolute para centrarse al ancho REAL del navbar
   (no al espacio entre back-btn y logo). Los padding-laterales del .nav-section
   reservan espacio físico para el back-btn izq y el logo der, evitando overlap. */

.g2-event-header .nav-section {
  position: relative;
  /* Reservar espacio: back-btn ~200px izq, logo ~120px der, + 16px de aire */
  padding-right: 16px;
}

.g2-event-header-branding {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  pointer-events: none;
  /* max-width controla cuánto puede crecer sin invadir el back-btn o logo */
  max-width: calc(100% - 380px);
  z-index: 1;
}

.g2-event-header-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  background: linear-gradient(
    90deg,
    var(--g2-teal-soft) 0%,
    var(--g2-magenta-soft) 60%,
    #f5e6d3 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.g2-event-header-subtitle {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.g2-event-header-subtitle-es {
  color: rgba(255, 255, 255, 0.92);
}

.g2-event-header-subtitle-divider {
  color: var(--g2-magenta-soft);
  margin: 0 6px;
  font-weight: 700;
}

.g2-event-header-subtitle-en {
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Logo DMS pegado a la derecha ---------- */

/* Override de hall_styles.css:1605-1610 — el logo NO debe expandirse a flex:1
   (que lo deja flotando en el centro). Debe ser shrink-only para que
   `justify-content: space-between` del .nav-section lo empuje al borde derecho.
   Especificidad 0,3,0,1 supera la regla base de hall_styles (0,1,0,0). */
.g2-event-header .event-nav-logo.g2-event-nav-logo-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}

/* ==========================================================================
   v5.4 — Ocultar logo DMS en cualquier viewport NO-desktop.
   Cambia el rango (601-1100 → 0-1200) y agrega selectores+props redundantes
   para garantizar que pegue contra cualquier regla heredada de hall_styles.css.
   ========================================================================== */
@media (max-width: 1200px) {
  .g2-event-header .event-nav-logo,
  .g2-event-header .g2-event-nav-logo-right,
  .g2-event-header .event-nav-logo.g2-event-nav-logo-right,
  .g2-event-header .nav-section .event-nav-logo,
  header.g2-event-header .event-nav-logo,
  header.event-header.g2-event-header .event-nav-logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Responsive — pantallas medianas: ocultar inglés, branding más chico */
@media (max-width: 1024px) {
  .g2-event-header-branding {
    max-width: calc(100% - 340px);
  }
  .g2-event-header-subtitle-en,
  .g2-event-header-subtitle-divider {
    display: none;
  }
  .g2-event-header-title {
    font-size: 1.3rem;
  }
}

/* Responsive — tablet: branding aún más comprimido */
@media (max-width: 768px) {
  .g2-event-header-branding {
    max-width: calc(100% - 280px);
  }
  .g2-event-header-title {
    font-size: 1.1rem;
  }
  .g2-event-header-subtitle {
    font-size: 0.7rem;
  }
}

/* Mobile (<600px): ocultar el branding G2STEM completo.
   El navbar mobile muestra solo: [back-btn izq] + [logo DMS der]. */
@media (max-width: 600px) {
  .g2-event-header-branding {
    display: none !important;
  }
}