/* ============================================================
   VARIABLES — tocá estos valores para cambiar el look del sitio
   ============================================================ */
:root {
  --bg: #eef0f3;
  --bg-accent: #e4e9f4;
  --card-bg: #ffffff;
  --card-bg-hover: #fafbff;
  --text-main: #14213d;
  --text-muted: #6b7488;
  --text-soft: #97a0b3;
  --brand: #016d84;
  --brand-teal: #14827a;
  --brand-teal-dark: #0d5f59;
  --accent: #ffb703;
  --hero-light: #24b1e2;
  --hero-dark: #016d84;
  --shadow-sm: 0 2px 8px rgba(20, 33, 61, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 33, 61, 0.10);
  --shadow-lg: 0 14px 32px rgba(20, 33, 61, 0.16);
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --max-width: 560px;
  --font-heading: "Poppins", "Inter", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 12% -10%, rgba(20, 130, 122, 0.10), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(11, 46, 107, 0.10), transparent 40%),
    var(--bg);
  color: var(--text-main);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Degradado de fondo detrás del header ---------- */
/* Parte del fondo de la página (no una tarjeta aparte): se desvanece hacia
   abajo hasta fundirse con el fondo normal, y la lluvia de adornos (.bg-decor)
   cae por encima, no por detrás. */
.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  background: linear-gradient(
    180deg,
    var(--hero-light) 0%,
    var(--hero-dark) 45%,
    rgba(1, 109, 132, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 480px) {
  .hero-gradient { height: 380px; }
}

/* ---------- Adornos de fondo (decoración animada, sutil) ---------- */
.bg-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-decor__particle {
  position: absolute;
  top: -60px;
  will-change: transform;
  animation-name: decor-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes decor-fall {
  from { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(55vh) translateX(var(--drift, 16px)) rotate(calc(var(--spin, 180deg) / 2)); }
  to   { transform: translateY(115vh) translateX(0) rotate(var(--spin, 180deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-decor__particle { animation: none; }
}

.page {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 18px 56px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* ---------- Actividades abiertas ---------- */
.activities {
  background: linear-gradient(135deg, #ffffff, #fbf7ee);
  border: 1px solid #f2dfa8;
  border-radius: var(--radius-lg);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-md);
}

.activities__title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

.activities__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activities__item a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text-main);
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.activities__item a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Cintita "Últimos cupos" en la esquina, la activa un script aparte en
   Google Sheets cuando quedan menos de 10 lugares en el formulario.
   El "wrap" es una cajita fija en la esquina que recorta la cinta
   rotada, así siempre queda prolija sin importar la altura de la tarjeta. */
.activities__ribbon-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  pointer-events: none;
}

.activities__ribbon {
  position: absolute;
  top: 15px;
  right: -23px;
  width: 104px;
  transform: rotate(45deg);
  transform-origin: center;
  background: #e63946;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.activities__date {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  padding: 6px 9px;
  border-radius: 10px;
  text-align: center;
  line-height: 1.15;
  min-width: 44px;
  text-transform: uppercase;
}

.activities__date span { display: block; }

.activities__date--undated {
  background: var(--accent);
  color: var(--text-main);
  min-width: 0;
  padding: 6px 10px;
  white-space: nowrap;
}

.activities__name {
  font-weight: 600;
  font-size: 0.94rem;
}

/* ---------- Perfil ---------- */
/* El color vive en .hero-gradient (parte del fondo); este bloque solo
   ubica el avatar/nombre/descripción por encima, sin caja ni borde propio. */
.profile__hero {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 44px 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.profile__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  border: 4px solid #ffffff;
  margin-bottom: 6px;
}

.profile__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.profile__description {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  max-width: 420px;
  line-height: 1.45;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.profile__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-teal-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  background: var(--card-bg);
  border: 1.5px solid #d7e4e2;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.profile__social:hover {
  background: var(--card-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.profile__social--outline:hover {
  background: var(--card-bg-hover);
}

/* ---------- Secciones genéricas ---------- */
.section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

/* ---------- Carrusel de grupos ---------- */
.carousel {
  position: relative;
}

.carousel__track {
  list-style: none;
  margin: 0;
  padding: 4px 2px 10px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

.group-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 168px;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--text-main);
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.group-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.group-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.group-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-card__body {
  padding: 10px 12px 12px;
}

.group-card__name {
  display: block;
  font-weight: 600;
  font-size: 0.86rem;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-card__subtitle {
  display: block;
  font-size: 0.72rem;
  color: var(--text-soft);
}

.carousel__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--brand);
  box-shadow: var(--shadow-md);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.carousel__arrow--prev { left: -6px; }
.carousel__arrow--next { right: -6px; }

.carousel__arrow:hover { background: var(--bg-accent); }

@media (max-width: 480px) {
  .carousel__arrow { display: none; }
}

/* ---------- Links en lista (LINKS IMPORTANTES) ---------- */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.link-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  color: var(--text-main);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.link-btn:hover {
  background: var(--card-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.link-btn__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
}

.link-btn__text {
  flex: 1 1 auto;
  text-align: left;
}

.link-btn__chevron {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 1rem;
}

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  color: var(--text-soft);
  font-size: 0.78rem;
  margin-top: 8px;
}

@media (max-width: 380px) {
  .profile__avatar { width: 84px; height: 84px; }
  .group-card { width: 150px; }
}