/* ------------------------------
   RESET MODERNO
------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  background: none;
}

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

ul,
ol {
  list-style: none;
}

/* ============================================================
   REGALOFAMILIAR — CSS FOUNDATION
   ============================================================ */

:root {
  /* Colors */
  --color-white: #f8fafc;
  --color-bg: #eff6ff;
  --color-surface: #F8FAFC;

  --color-primary: #3370d4;
  --color-primary-light: #387deb;

  --color-text: #0f172a;
  --color-muted: #475569;

  --color-success: #0b7a55;
  --color-success-light: #13d493;

  --color-danger: #ef4444;
  /* /Colors */

  /* Typography */
  --font-title: "Roboto", sans-serif;
  --font-body: "Inter", sans-serif;

  --fs-hero: 3rem; /* 64px */
  --fs-h1: 2.5rem; /* 40px */
  --fs-h2: 2rem; /* 32px */
  --fs-h3: 1.5rem; /* 24px */
  --fs-title: 1.125rem; /* 18px */
  --fs-body: 1rem; /* 16px */
  --fs-small: 0.875rem; /* 14px */
  --fs-label: 0.75rem; /* 12px */
  /* /Typography */

  /* Layout */
  --container: 984px;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.02);
  --shadow-linear: linear-gradient(180deg, var(--color-surface) 10%, var(--color-bg) 100%);
  --shadow-box: 0 4px 0px rgba(15, 23, 42, 0.04);

  /* Transitions */
  --transition: 220ms ease;
}

/* ------------------------------
   TIPOGRAFÍA BASE
------------------------------ */
h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.5rem, 6vw, var(--fs-hero));
}

h2 {
  font-size: clamp(2rem, 4vw, var(--fs-h1));
}

h3 {
  font-size: var(--fs-h3);
}

p {
  color: var(--color-muted);
}

/* ------------------------------
   UTILIDADES GENERALES
------------------------------ */
.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.is-hidden {
  display: none !important;
}

/* ============================================================
   / REGALOFAMILIAR — CSS FOUNDATION
   ============================================================ */

/* ============================================================
   PIN SCREEN
   ============================================================ */

.pin {
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 2rem;

  background:
    radial-gradient(circle at top, rgba(56, 125, 235, 0.18), transparent 40%),
    #0f172a;
}

.pin__card {
  width: 100%;
  max-width: 340px;

  padding: 3rem;

  border-radius: var(--radius-lg);

  background: rgba(30, 41, 59, 0.92);

  border: 2px solid rgba(19, 212, 147, 0.25);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(12px);
}

.pin__logo {
  width: 84px;
  height: 84px;

  margin-inline: auto;
  margin-bottom: 1.5rem;

  border-radius: 50%;

  overflow: hidden;

  background: white;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.pin__logo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.pin__title {
  margin-bottom: 1.5rem;

  text-align: center;

  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--color-white);
}

.pin__dots {
  display: flex;
  justify-content: center;
  gap: 0.875rem;

  margin-bottom: 1rem;
}

.pin__dot {
  width: 14px;
  height: 14px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  transition: var(--transition);
}

.pin__error {
  min-height: 20px;

  margin-bottom: 1rem;

  text-align: center;

  font-size: var(--fs-small);
  font-weight: 600;

  color: #fca5a5;
  opacity: 0;
  visibility: hidden;
}

.pin__dot--active {
  background: var(--color-success-light);
  transform: scale(1.1);
}

.pin__error--visible {
  opacity: 1;
  visibility: visible;
}

.pin__keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 0.875rem;
}

.pin__key {
  aspect-ratio: 1;

  border-radius: 1rem;

  background: var(--color-primary);

  color: var(--color-white);

  font-size: 1.25rem;
  font-weight: 700;

  transition: var(--transition);
}

.pin__key:hover {
  background: var(--color-primary-light);

  transform: translateY(-2px);
}

.pin__key:active {
  transform: scale(0.96);
  background-color: #dce8ff;
}

.pin__key--delete {
  background: var(--color-primary);
  color: var(--color-bg);
}

.pin__key--delete:hover {
 transform: scale(0.96);
}

.pin__key--extra {
  color: var(--color-white);
}

.pin__key--extra:hover {
  background: var(--color-primary-light);
}

/*  --------------------- APP / PIN ------------------------- */


/* --------------------- HOME ------------------------  */

.app {
  min-height: 100vh;
  background: var(--color-bg);
}

/* -------------------  HEADER ---------------- */

.header {
  width: 100%;
  background: var(--color-primary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.header__container {
  min-height: 72px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__brand {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-white);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header__link {
  font-size: var(--fs-small);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}

.header__link--active,
.header__link:hover {
  color: var(--color-white);
}

/* --------------  /HEADER ---------------- */

/* ------------- DASHBOARD ------------------- */

.app {
  min-height: 100vh;
  background: var(--color-bg);
}

.home {
  padding-block: 4rem 6rem;
  background: var(--color-bg);
}

.home__container {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.home__hero {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
  gap: 1.75rem;

  margin-bottom: 2.5rem;

}

.home__logo {
  width: 92px;
  height: 92px;

  border-radius: 50%;
  object-fit: cover;

  box-shadow: var(--shadow-soft);
}

.home__title {
  /*hacer un font-size con clamp y mis variables*/
  font-size: clamp(2rem, 6vw, 3rem);
  font-family: var(--font-title);
  font-weight: 800;
  /* letter-spacing: -0.05em; */
}

/* .home__subtitle {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  background: red;
} */

/*  -- BALANCE CARD (fondo) -- */

.balance-card {
  margin-top: 1.25rem;
  background: white;
  border-radius: var(--radius-md);
  padding: 2rem;

  width: var(--container);

  box-shadow: var(--shadow-soft);
}

/*  -- / BALANCE CARD (fondo) -- */

/* -- HEADER FECHA Y "CICLO" -- */

.balance-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 2rem;

  font-size: var(--fs-body);
  color: var(--color-text);
}
/* -- /HEADER FECHA Y "CICLO" -- */

/* -- BADGE AZUL -- */
.balance-card__badge {
  background: var(--color-primary);

  color: var(--color-white);

  padding: 0.2rem 1.8rem 0.2rem 1.8rem;

  border-radius: var(--radius-xl);

  font-size: var(--fs-body);
  font-weight: 600;
}
/* -- /BADGE AZUL -- */

/* -- GRID -- */
.stats-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.25rem;
}
/* -- /GRID -- */

/* -- CARDS -- */
.stat-card {
  min-height: 180px;

  background: var(--shadow-linear);
  border-radius: var(--radius-md);
  padding: 1.5rem;

  box-shadow: var(--shadow-box);

  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;

  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-3px);
}
/* -- /CARDS -- */

/* -- LABEL (titulos de cada card)--  */
.stat-card__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  font-size: var(--fs-body);
  font-weight: 600;

  color: var(--color-muted);
}
/* -- /LABEL (titulos de cada card)-- */

/* -- VALUE -- */
.stat-card__value {
  align-self: end;

  font-size: clamp(var(--fs-h3), 3vw, var(--fs-h2));
  font-weight: 900;
  line-height: 1;

  color: var(--color-primary);
}

.stat-card__value--success {
  color: var(--color-success);
  }

.stat-card__value--danger {
  color: var(--color-danger);
}
/* -- /VALUE -- */

/* TEXTOS META y EN CAJA ACTUALMETE  */
.stat-card__meta {
  color: var(--color-muted);
}
/* TEXTOS META y EN CAJA ACTUALMETE  */

/* -- LINK ver todos --  */
.stat-card__link {
  margin-top: auto;

  color: var(--color-mute);

  font-weight: 600;
}

.stat-card__link:hover {
  color: var(--color-primary);
  transition: var(--transition);
}
/* -- /LINK ver todos --  */

/* ------- PROGRESS CARD ----- */

/* --- FONDO CARD --- */
.progress-card {
  margin-top: 1.25rem;

  background: var(--shadow-linear);

  border-radius: var(--radius-md);
  padding: 2rem 2.5rem;

  box-shadow: var(--shadow-box);
}
/* --- /FONDO CARD --- */

.progress-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 2.5rem;
}

.progress-card__header span {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-success);
}

.progress-card__header strong {
  font-size: clamp(var(--fs-h3), 5vw, var(--fs-h2));
  font-weight: 900;
  line-height: 1;
  color: var(--color-success);
}

/* BARRA */
.progress-card__bar {
  width: 100%;
  height: 12px;

  background: rgba(19, 212, 147, 0.2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-card__bar span {
  display: block;
  width: 1%;
  height: 100%;

  background: var(--color-success);
  border-radius: inherit;
}

/* span inferiores */
.progress-card__footer {
  margin-top: 1.5rem;

  display: flex;
  justify-content: space-between;
  gap: 1rem;

  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--color-muted);
}
/* span inferiores */

/* --- RESPONSIVE TABLET & MOBILE --- */
@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  .header {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .container {
    width: min(100% - 2rem, var(--container));
  }

  /* HEADER */
  .header {
    padding: 0;
    border-radius: 0 0 1.5rem 1.5rem;
  }

  .header__container {
    min-height: 120px;
    justify-content: center;
  }

  .header__brand {
    font-size: 1.5rem;
  }

  .header__nav {
    display: none;
  }

  /* HOME */
  .home {
    padding: 3.5rem 0 4rem;    
  }

  .home__hero {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .home__logo {
    width: 112px;
    height: 112px;
  }

  .home__title {
    font-size: clamp(var(--fs-h3), 12vw, var(--fs-h2));
    line-height: 1;
    max-width: 320px;
  }

  /* FONDO CARD */
  .balance-card {
    width: 100%;
    /*Quiero que quede responsive, ahora esta muy grande tengo un max-width: var(--container); en desktop, hazlo*/

    padding: 2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
    /* /FONDO CARD */

  .balance-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  /* Este que hace ? - se puede eliminar ? */
  .balance-card__header span:first-child {
    font-size: var(--fs-body);
  }
  /* /Este que hace ? - se puede eliminar ? */

  .balance-card__badge {
    display: none;
    width: 100%;
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: var(--fs-body);
  }

  /* Grid cards */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* /Grid cards */

  /*  cards */
  .stat-card {
    min-height: 180px;
    padding: 1.5rem;
  }

  .stat-card__label {
    font-size: 1rem;
  }

  .stat-card__value {
    font-size: clamp(var(--fs-body), 11vw, var(--fs-tittle));
    word-break: break-word;
  }

  .stat-card__meta,
  .stat-card__link {
    font-size: var(--fs-body);
  }
  /*  /cards */

  /* CARD PROGRESS */
  .progress-card {
    padding: 1.5rem;
    border-radius: 1.5rem;
  }

  .progress-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .progress-card__header strong {
    font-size: 2.5rem
  }

  .progress-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 1rem;
  }
}
 /* /CARD PROGRESS */

 /* -- ESTE MEDIA NO SE PUEDE PONER EN EL DE ARRIBA PARA LIMPIAR, O DEBE ESTAR ACA? */
@media screen and (max-width: 768px) {
  

  .header__container {
    min-height: 96px;
  }

  .home {
    padding: 2rem 0 4rem;
  }

  .home__hero {
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .home__logo {
    width: 104px;
    height: 104px;
  }

  .home__title {
    font-size: clamp(2.6rem, 10vw, 3.25rem);
    font-family: var(--font-title);    
  }

  .balance-card__header {
    align-items: center;
    text-align: center;
  }

  .balance-card__header span:first-child {
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .stat-card__value {
    font-size: clamp(2.1rem, 9vw, 2.9rem);
    line-height: 1;
  }
}
 /* -- /ESTE MEDIA NO SE PUEDE PONER EN EL DE ARRIBA PARA LIMPIAR, O DEBE ESTAR ACA */

/* --------- MOBILE NAVIGATION ------ */
.mobile-nav {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-nav {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);

    width: calc(100% - 3rem);
    max-width: 340px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    padding: 0.8rem;

    background: rgba(248, 250, 252, 0.94);

    border: 1px solid rgba(15, 23, 42, 0.2);

    border-radius: 999px;

    backdrop-filter: blur(16px);

    box-shadow:
      0 10px 30px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);

    z-index: 2;
  }

  .mobile-nav__link {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--color-dark);

    font-size: 1.6rem;

    transition: all 0.25s ease;
  }

  .mobile-nav__link--active {
    background: var(--color-primary);

    color: var(--color-white);

    box-shadow: 0 8px 18px rgba(56, 125, 235, 0.35);
  }
}
/* --------- /MOBILE NAVIGATION ------ */

/* --- SECTION CUMPLEAÑOS Y REGALOS--- */
.home-lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 3rem;

  width: 100%;
  max-width: var(--container);

  margin: 4rem auto 0;
}

.home-list {
  width: 100%;
}

.home-list__title {
  margin-bottom: 3rem;

  display: flex;
  align-items: center;
  gap: 1rem;

  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-text);
}

.home-list__title i {
  color: var(--color-text);
}

.home-list__card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- ITEMS --- */
/* --- Fondo ---  */
.birthday-item,
.gift-item {
  min-height: 86px;
  
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;

  padding: 1.1rem 1.25rem;

  background: var(--shadow-linear);

  border-radius: 1.25rem;

  box-shadow: var(--shadow-box);  
}
/* --- /Fondo ---  */

.birthday-item__icon,
.gift-item__icon {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 1rem;

  font-size: 2rem;
}

.birthday-item__icon {
  color: var(--color-primary);
}

.gift-item__icon {
  color: var(--color-success);
}

.birthday-item__info,
.gift-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.birthday-item__info strong,
.gift-item__info strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
}

.birthday-item__info span,
.gift-item__info span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-muted);
}

.birthday-item__amount,
.gift-item__amount {
  padding: 0.45rem 0.9rem;

  border-radius: var(--radius-pill);

  font-size: 0.95rem;
  font-weight: 800;

  white-space: nowrap;
}

.birthday-item__amount {
  background: var(--color-primary);
  color: var(--color-white);
}

.gift-item__amount {
  background: var(--color-success);
  color: var(--color-white);
}

/* RESPONSIVE / PROXIMOS Y ENTREGADOS*/

@media screen and (max-width: 768px) {
  .home-lists {
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-top: 4rem;
    padding-bottom: 6rem;
  }

  .home-list__title {
    justify-content: center;
    text-align: center;
    font-size: var(--fs-h3);
  }

  .birthday-item,
  .gift-item {
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 0.5rem;
  }

  .birthday-item__amount,
  .gift-item__amount {
    justify-self: end;
    font-size: var(--fs-small);
    padding: 0.45rem 0.8rem;
  }
}

/* --- BTNS INFERIORES DESKTOP --- */
.home-actions {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;

  width: 100%;
  margin-top: 2rem;
}

.home-action {
  width: 100%;
  min-height: 3rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0.75rem 1rem;

  background: transparent;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);

  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: 500;
}

.home-action:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);

  transition: var(--transition);
}

.home-action i {
  font-size: 1rem;
}
/* --- / BTNS INFERIORES DESKTOP --- */

/* --- RESPONSIVE BTNS INFERIORES DESKTOP --- */
@media (max-width: 768px) {
  .home-actions {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 1rem;
    margin-top: 1rem;
  }

  .home-action {
    width: 80%;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 1rem;

    background: transparent;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);

    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: 500;
  }

  .home-action i {
    font-size: 1rem;
  }

  .home-action:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);

    transition: var(--transition);
  }
}
/* --- RESPONSIVE BTNS INFERIORES DESKTOP --- */

/* ---------------------------------------- PARTICIPANTES PAGE ---------------------------------------------- */
.participants {
  padding: 4rem 6rem;
  background: var(--color-bg);
}

.participants__container {
  width: min(100% - 2rem, 960px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.participants__hero {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.participants__logo {
  width: 5rem;
  height: 5rem;
}

.participants__title {
  font-size: clamp(2rem, 6vw, 3rem);
  font-family: var(--font-title);
  color: var(--color-text);
  font-weight: 800;
}

/* --- GRID/ Fondo --- */
.participants-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  width: 100%;
}
/* --- / GRID/ Fondo --- */

/* --- CARDS --- */
.participant-card {
  background: var(--shadow-linear);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-box);

  display: flex;
  flex-direction: column;
  gap: 2rem;

  min-width: 0;
}
/* --- /CARDS --- */

/* --- CONTENIDO CARD --- */
.participant-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
}

.participant-card__name {
  font-size: var(--fs-h2);
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: .5rem;
}

.participant-card__date {
  display: flex;
  align-items: center;
  gap: .5rem;

  font-size: var(--fs-body);
  color: var(--color-primary);

  white-space: nowrap;
}

.participant-card__date i {
  font-size: var(--fs-title);
}
/* --- /CONTENIDO CARD --- */

/*  --- STATUS ---- */
.participant-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: .3rem 1rem;
  border-radius: 999px;

  font-size: var(--fs-small);
  font-weight: 800;

  white-space: nowrap;
  flex-shrink: 0;
}

.participant-card__status--pending {
  background: var(--color-danger);
  color: var(--color-white);
}
/*  --- /STATUS ---- */

/* --- BODY --- */
.participant-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.participant-card__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;

  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-muted);
  
}

.participant-card__row strong {
  font-size: 1.25rem;
  text-align: right;
  color: var(--color-text);
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

/* --- PROGRESS ---*/
.participant-card__progress {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.participant-card__progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: var(--fs-title);
  font-weight: 800;

  color: var(--color-success);
}

.participant-card__bar {
  width: 100%;
  height: 1rem;

  background: #cfe9df;
  border-radius: 999px;

  overflow: hidden;
}

.participant-card__bar span {
  display: block;
  height: 100%;

  background: var(--color-success);
  border-radius: 999px;
}

/* --- ENLACE HISTORIAL --- */
.participant-card__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;

  padding-top: 1.5rem;
  border-top: 2px solid #d6dce5;

  font-size: var(--fs-title);
  font-weight: 700;

  color: var(--primary-color);

  transition: 0.3s;
}

.participant-card__link:hover {
  color: var(--color-primary);
}
/* --- ENLACE HISTORIAL --- */

/* --- RESPONSIVE revisarlo --- */
@media (max-width: 768px) {
  .participants {
    padding: 9rem 0 7rem;
  }

  .participants__hero {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .participants__logo {
    width: 120px;
  }

  .participants__title {
    font-size: 3.8rem;
  }

  .participant-card {
    border-radius: 2rem;
    padding: 2rem;
    gap: 2.5rem;
  }

  .participant-card__header {
    flex-direction: column;
    gap: 1.5rem;
  }

  .participant-card__name {
    font-size: 2.8rem;
  }

  .participant-card__date {
    font-size: 1.4rem;
  }

  .participant-card__status {
    align-self: flex-start;
    font-size: 1.2rem;
    padding: 0.6rem 1.2rem;
  }

  .participant-card__row {
    font-size: 1.4rem;
  }

  .participant-card__row strong {
    font-size: 1.5rem;
  }

  .participant-card__progress-head {
    font-size: 1.4rem;
  }

  .participant-card__bar {
    height: 0.9rem;
  }

  .participant-card__link {
    font-size: 1.3rem;
    padding-top: 1.5rem;
  }
}
/* --- RESPONSIVE - revisarlo --- */

/* --- PARTICIPANTES MOBILE FIX ---- */
@media (max-width: 768px) {
  .participants {
    padding: 1rem 0 7rem;
  }

  .participants__container {
    gap: 2rem;
  }

  .participants__hero {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    margin-top: 2rem;
  }

  .participants__logo {
    width: 104px;
    height: 104px;
  }

  .participants__title {
    font-size: clamp(2.6rem, 10vw, 3.25rem);
    line-height: 1;
    color: var(--color-text);

  }

  .participants-grid {
    grid-template-columns: 1fr;
  }

  .participant-card {
    width: 100%;
    padding: 2rem;
    border-radius: var(--radius-md);
    gap: 2rem;
    background: var(--shadow-linear);
  }

  .participant-card__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .participant-card__name {
    font-size: 2rem;
    margin-bottom: 0.4rem;
  }

  .participant-card__date {
    font-size: 1rem;
    gap: 0.5rem;
  }

  .participant-card__date i {
    font-size: 1.2rem;
  }

  .participant-card__status {
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
    gap: 0.35rem;
    white-space: nowrap;
  }

  .participant-card__body {
    gap: 0.8rem;
  }

  .participant-card__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    font-size: 1rem;
  }

  .participant-card__row strong {
    font-size: 1rem;
    text-align: right;
  }

  .participant-card__progress {
    gap: 0.8rem;
  }

  .participant-card__progress-head {
    font-size: 1rem;
  }

  .participant-card__bar {
    height: 0.75rem;
  }

  .participant-card__link {
    font-size: 1rem;
    padding-top: 1.2rem;
    gap: 0.6rem;
  }
}

/* llll */

.participant-card__status--success {
  background: var(--color-success);
  color: white;
}

.text-success {
  color: var(--color-success) !important; /*Que es eso de important*/
}

/*  --- PARTICIPANTS SEARCH --- */

.participants-search {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 1rem;

  padding: 1rem 1.25rem;

  background: linear-gradient(180deg, #f9f9f9 0%, #eff6ff 100%);
  border-radius: var(--radius-md);

  box-shadow: var(--shadow-box);
}

.participants-search i {
  font-size: 1.4rem;
  color: var(--color-primary);
}

.participants-search input {
  width: 100%;

  border: 0;
  outline: 0;
  background: transparent;

  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
}

.participants-search input::placeholder {
  color: var(--color-muted);
}

/* BOTONES INFERIORES */

.page-actions {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;

  width: 100%;
  margin-top: 2rem;
}

.page-action {
  width: 100%;
  min-height: 3rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0.75rem 1rem;

  background: transparent;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);

  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: 500;
}

.page-action:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);

  transition: var(--transition);
}

/* RESPONSIVE BTNS INFERIORES PARTICIPANTES*/
@media (max-width: 768px) {
  .page-actions {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 1rem;
    margin-top: 1rem;
    padding-bottom: 3rem;
  }

  .page-action {
    width: 80%;
    margin: 0 auto;
    /* height: 3rem; */

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 1rem;

    background: transparent;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);

    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: 500;
  }

  .page-action i {
    font-size: 1rem;
  }
}
/* RESPONSIVE BTNS INFERIORES PARTICIPANTES*/

/* --- CALENDARIO PAGE --- */

.calendar {
  padding: 4rem 6rem;
  background: var(--color-bg);
}

.calendar__container {
  width: min(100% - 2rem, 960px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.calendar__hero {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.calendar__logo {
  width: 5rem;
  height: 5rem;
  /* border-radius: 50%; */
}

.calendar__title {
  font-size: clamp(2rem, 6vw, 3rem);
  font-family: var(--font-title);
  color: var(--color-text);
  font-weight: 800;
}

.calendar__subtitle {
  margin-top: 0.5rem;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-text);
}

/* GRID MESES */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.month-card {
  min-height: 220px;
  padding: 1.5rem;

  background: var(--shadow-linear);

  border: 1.5px solid transparent;
  border-radius: 1.5rem;

  box-shadow: var(--shadow-box);
}


.month-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.month-card__header h2 {
  font-size: var(--fs-h3);
}

.month-card__header span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text);
}

.month-card__badge {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;

  background: var(--color-success);
  color: white !important;

  font-size: 0.75rem !important;
}

.month-card__empty {
  min-height: 130px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  color: var(--color-muted);
  text-align: center;
  font-weight: 600;
}

.month-card__empty i {
  font-size: 2rem;
  color: var(--color-primary);
}

/* MOBILE CALENDARIO */

@media (max-width: 768px) {
  .calendar {
    padding: 2rem 0 7rem;
  }

  .calendar__container {
    gap: 3rem;
  }

  .calendar__hero {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .calendar__logo {
    width: 120px;
    height: 120px;
  }

  .calendar__title {
    font-size: clamp(3rem, 11vw, 4rem);
  }

  .calendar__subtitle {
    font-size: 1rem;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .month-card {
    min-height: 230px;
    padding: 1.75rem;
    border-radius: 1.6rem;
  }
}

.month-card__header span,
.month-card__empty i,
.month-card__empty p {
  color: var(--color-muted);
}
/* ---- /MOBILE CALENDARIO -----  */


/* ---- CALENDAR MONTH CONTENT ----- */
.month-card {
  display: flex;
  flex-direction: column;
}

.month-card__list {
  margin-top: auto;

  display: flex;
  flex-direction: column;
  gap: .5rem;

  padding-top: 1.5rem;
}

.month-card__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-muted);
}

.month-card__list strong {
  color: var(--color-text);
}

.month-card__total {
  margin-top: 1rem;
  padding-top: 1rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top: 1px solid #94a3b8;

  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-muted);
}

.month-card__total span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.month-card__total strong {
  color: var(--color-text);
}

/* MOBIL TARJETAS CUMPLEAÑOS  */
@media (max-width: 768px) {
  .month-card__list li {
    font-size: 0.95rem;
  }

  .month-card__total {
    font-size: 0.95rem;
  }
}

.month-card--upcoming {
  grid-column: 1 / -1;
}
/* MOBILE TARJETAS CUMPLEAÑOS */

/* --- BTNS CALENDAR  ---  */
.calendar-actions {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;

  width: 100%;
  margin-top: 2rem;
}

.calendar-action {
  width: 100%;
  min-height: 3rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0.75rem 1rem;

  background: transparent;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);

  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: 500;
}

.calendar-action:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);

  transition: var(--transition);
}

.calendar-action i {
  font-size: 1rem;
}
/* --- RESPONSIVE BTNS --- */
@media (max-width: 768px) {
  .calendar-actions {
    display: flex;
    flex-direction: column;

    width: 100%;
    gap: 1rem;
    margin-top: .5rem;
    margin-bottom: 3rem;
  }

  .calendar-action {
    width: 80%;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 1rem;

    background: transparent;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);

    color: var(--color-text);
    font-size: var(--font-body);
    font-weight: 500;
  }

  .calendar-action:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);

    transition: var(--transition);
  }
}
/* --- /RESPONSIVE BTNS --- */

/* ---- MESES ACTIVOS ----*/
.month-card--active {
  border-color: var(--color-success-light);
  /* box-shadow: 0 18px 45px rgba(19, 212, 147, 0.18); */
}

.month-card--active .month-card__header h2,
.month-card--active .month-card__header span,
.month-card--active .month-card__empty i,
.month-card--active .month-card__empty p {
  color: var(--color-primary);
}

.month-card--active .month-card__badge {
  background: var(--color-success);
  color: var(--color-white);
}

/* ---- /MESES ACTIVOS ----*/


/* ------------------------------------ POPUP ---------------------------------------------- */

/* ---- FONDO  --- */
.payment-modal {
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 2rem;

  z-index: 999;
}

.payment-modal.is-hidden {
  display: none;
}

/*  ----- OVERLAY ---- */

.payment-modal__overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(4px);
}

/* ---- CONTENT ---- */

.payment-modal__content {
  position: relative;

  width: 100%;
  max-width: 1100px;
  max-height: 90vh;

  overflow-y: auto;

  border-radius: 3rem;

  background: var(--color-white);

  /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); */

  z-index: 2;
}

/* --- PopUp HEADER ---  */

.payment-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 4rem;

  background: var(--primary-color);

  color: var(--color-white);
}

.payment-modal__name {
  font-size: var(--fs-h2);
  font-weight: 800;

  margin-bottom: 1rem;
}

.payment-modal__date {
  display: flex;
  align-items: center;
  gap: .5rem;

  font-size: var(--fs-body);
}

.payment-modal__close {
  width: 10rem;
  height: 10rem;

  border: none;
  border-radius: 50%;

  background: transparent;
  color: var(--color-white);

  font-size: 4rem;

  cursor: pointer;

  transition: var(--transition);
}

.payment-modal__close:hover {
  transform: rotate(90deg);
}

/*  --- SUMMARY ----  */

.payment-modal__summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;
  padding: 3rem 4rem;

  border-bottom: 1px solid #d8dee8;
}

.payment-modal__summary article {
  display: flex;
  flex-direction: column;
  gap: .5rem;

  text-align: center;
  
}

.payment-modal__summary span {
  font-size: var(--fs-body);
  font-weight: 600;

  color: var(--color-muted);

  text-transform: uppercase;
}

/* =========================
   PILLS
========================= */

.pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;

  padding: 1rem 2rem;

  border-radius: 999px;

  font-size: var(--fs-body);
  font-weight: 700;
}

.pill--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.pill--success {
  background: var(--color-success);
  color: var(--color-white);
}

.pill--danger {
  background: var(--color-danger);
  color: var(--color-white);
}

/* ------------------ TABLA ---------------- */

.payment-table {
  padding: 3rem 4rem 4rem;
}

.payment-table__head,
.payment-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;

  align-items: center;

  padding: 1.8rem 0;
  
}

.payment-table__head {
  font-size: var(--fs-body);
  font-weight: 800;

  color: var(--dark-color);

  border-bottom: 2px solid #d8dee8;
  
}

.payment-table__row {
  font-size: 1.6rem;

  color: #4b5568;

  border-bottom: 1px solid #e3e8f0;
  
}

.payment-table__row--paid {
  color: var(--dark-color);
}

/* ---- STATUS ---- */

.payment-status {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  padding: 0.8rem 1.6rem;

  border-radius: 999px;

  font-size: var(--fs-body);
  font-weight: 700;

  width: fit-content;
}

.payment-status--paid {
  background: var(--color-success);
  color: var(--color-white);
}

.payment-status--next {
  background: #e5e7eb;
  color: #9ca3af;
}

/* ---- PAYMENT MODAL FIX ---- */

.payment-modal {
  align-items: center;
  padding: 2rem;
}

.payment-modal__content {
  max-width: 880px;
  max-height: 88vh;
  border-radius: 1.6rem;
  overflow: hidden;
}

.payment-modal__header {
  padding: 2rem 2.5rem;
  background: var(--color-primary);
  color: var(--color-white);
}

.payment-modal__name {
  font-size: 2rem;
  margin-bottom: 0.4rem;
  color: var(--color-white);
}

.payment-modal__date {
  font-size: 1rem;
  color: var(--color-white);
}

.payment-modal__close {
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
}

.payment-modal__summary {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.5rem 2rem;
}

.payment-modal__summary span {
  font-size: var(--fs-label);
}

.pill {
  padding: 0.2rem 1rem;
  font-size: var(--fs-body);
}

.payment-table {
  padding: 1rem 4rem;
  overflow-y: auto;
  max-height: 48vh;
}

.payment-table__head,
.payment-table__row {
  padding: .8rem;
  grid-template-columns: 1.3fr 1.5fr 1.8fr .5fr;
}

.payment-table__head {
  font-size: var(--fs-small);
}

.payment-table__row {
  font-size: var(--fs-body);
}

.payment-status {
  padding: 0.1rem 1rem;
  font-size: var(--fs-small);
}

/* ------- PAYMENT MODAL MOBILE ------- */

@media (max-width: 768px) {
  .payment-modal {
    padding: 1rem;
    align-items: center;
  }

  .payment-modal__content {
    width: 100%;
    max-height: 86vh;
    border-radius: 1.4rem;
  }

  .payment-modal__header {
    padding: 1.5rem;
  }

  .payment-modal__name {
    font-size: var(--fs-h2);
    color: var(--color-white);
  }

  .payment-modal__date {
    font-size: var(--fs-body);
    color: var(--color-white);
  }

  .payment-modal__close {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.8rem;
  }

  .payment-modal__summary {
    grid-template-columns: 1fr 1fr;
    padding: 1.25rem;
    gap: 1rem;
  }

  .payment-modal__summary span {
    font-size: 0.75rem;
  }

  .pill {
    font-size: var(--fs-small);
    padding: .2rem 0.4rem;
  }

  .payment-table {
    padding: .2rem 1.5rem;
    overflow-x: hidden;
    max-height: 42vh;
  }

  .payment-table__head,
  .payment-table__row {
    min-width: 0;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: .5rem;
    padding: 0.9rem 0;
  }

  .payment-table__head span:nth-child(2),
  .payment-table__row span:nth-child(2) {
    display: none;
  }

  .payment-table__head {
    font-size: var(--fs-label);
  }

  .payment-table__row {
    font-size: var(--fs-small);
  }

  .payment-status {
    width: 100%;
    justify-content: center;
    padding: 0.2rem 0.4rem;
    font-size: var(--fs-label);
  }
}

body.modal-open .header {
  display: none;
}

body.modal-open .mobile-nav {
  display: none;
}

/* --------------------------  /POPUP -----------------------------  */

/* SCROLL */

body.modal-open {
  overflow: hidden;
  width: 100%;
}

/* SCROLL */

/* PROXIMOS CUMPLEAÑOS 2027 */

/* .month-card__item--next {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: .5rem 2rem;
}

.month-card__next-badge {
  margin-left: 1rem;

  padding: 0.1rem 1rem;

  border-radius: var(--radius-sm);

  background: var(--color-primary);
  color: var(--color-white);

  font-size: var(--fs-label);
  font-weight: 700;
} */
/* /PROXIMOS CUMPLEAÑOS 2027 */

/* -----------------------  INFORMACION.HTML --------------------------------  */
/* .info {
  padding: 4rem 6rem;
}

.info__container {
  width: min(100% - 2rem, 960px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* --- HERO --- */

/* .info-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  
  padding: 4rem;
  background: white;
  border-radius: 3rem;
  box-shadow: var(--shadow-md); 
} */

/* .info-hero__logo {
  width: 100%;
  max-width: 140px;

 justify-self: center;
}

.info-hero__eyebrow {
  margin-bottom: 1rem;

  color: var(--primary-color);

  font-size: var(--fs-label);
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-hero__title {
  margin-bottom: 1.5rem;

  color: var(--color-text);

  font-size: clamp(var(--fs-title), 6vw, var(--fs-hero));
  font-weight: 800;
}

.info-hero__text {
  max-width: 70rem;

  color: #4b5568;

  font-size: 1.7rem;
  line-height: 1.7;
} */

/* ----- MOBILE ---- */

/* @media (max-width: 768px) {
  .info {
    padding: 2rem 0 10rem;
    
  }

  .info-hero {
   
    grid-template-columns: 1fr;
    text-align: center;
    padding: 3rem 2rem;
    gap: 2rem;
  }

  .info-hero__title {
    font-size: 3rem;
    
  }

  .info-hero__text {
    font-size: 1.5rem;
  }
} */

/* --- INFORMACION.HTML ---  */

/* .info {
  padding: 4rem 6rem;
  background: var(--color-bg);
}

.info__container {

  width: min(100% - 2rem, 960px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 2rem;
}


.info-hero {
  display: flex;
  align-items: center;
  gap: 2rem;

  padding: 3rem;

  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-box);
}

.info-hero__logo {
  width: 100%;
  max-width: 110px;
}

.info-hero__eyebrow { */
  /* margin-bottom: 0.5rem; */

  /* color: var(--color-primary);

  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
} */

/* .info-hero__title {
  margin-bottom: 0.8rem;

  font-size: clamp(var(--fs-title), 6vw, var(--fs-hero));
  color: var(--color-text);
  font-weight: 800;
} */

/* .info-hero__text {
  max-width: 640px;

  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.5;
} */

/* .info-section {
  display: flex;
  align-items: center;

  padding: 3rem;
  gap: 2rem;

  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-box);
}

.info-section__icon,
.rule-card i,
.benefit-card i {

  width: 100%;
  max-width: 110px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem;

  border-radius: 100%;

  background: var(--color-bg);
  color: var(--primary-color);

  font-size: 2rem;
}

.info-section__title {
  margin-bottom: 0.8rem;

  color: var(--color-text);

  font-size: var(--fs-h2);
  font-weight: 600;
}

.info-section__text {
  color: #4b5568;

  font-size: 1rem;
  line-height: 1.6;
}

.info-section__text + .info-section__text {
  margin-top: 1rem;
} */

/* RULES */

/* .info-rules,
.info-benefits,
.info-tips {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-rules__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.rule-card {
  padding: 2rem;

  background: white;
  border-radius: 1.6rem;
  box-shadow: var(--shadow-sm);
}

.rule-card i {
  margin-bottom: 1.4rem;
}

.rule-card h3,
.benefit-card h3,
.tip-card h3 {
  margin-bottom: 0.6rem;

  color: var(--dark-color);

  font-size: 1.2rem;
  font-weight: 800;
}

.rule-card p,
.benefit-card p,
.tip-card p {
  color: #4b5568;

  font-size: 0.95rem;
  line-height: 1.55;
} */

/* BENEFITS */

/* .info-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.benefit-card {
  padding: 2rem;

  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  border-radius: 1.6rem;
  box-shadow: var(--shadow-sm);

  text-align: center;
}

.benefit-card i {
  margin: 0 auto 1.4rem;

  border-radius: 50%;

  background: rgba(19, 212, 147, 0.14);
  color: var(--color-success);
} */

/* TIPS */

/* .info-tips__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tip-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;

  padding: 1.5rem 2rem;

  background: white;
  border-radius: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.tip-card span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.5rem;
  height: 3.5rem;

  border-radius: 50%;

  background: var(--primary-color);
  color: white;

  font-size: 0.9rem;
  font-weight: 900;
} */

/* FOOTER */

/* .info-footer {
  padding-top: 2rem;
}

.info-footer__content {
  padding: 4rem 2rem;

  background: linear-gradient(135deg, #3370d4, #1d4fa8);

  border-radius: 2.4rem;

  text-align: center;

  color: white;
}

.info-footer__content i {
  display: inline-block;

  margin-bottom: 1.5rem;

  font-size: 3.2rem;

  color: white;
}

.info-footer__content h2 {
  margin-bottom: 1.5rem;

  font-size: 2.4rem;
  font-weight: 800;

  color: white;
}

.info-footer__content p {
  max-width: 700px;

  margin: 0 auto 3rem;

  color: rgba(255, 255, 255, 0.92);

  font-size: 1.1rem;
  line-height: 1.8;
}

.info-footer__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;

  flex-wrap: wrap;
}

.info-footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;

  padding: 1rem 1.5rem;

  border-radius: 1rem;

  background: white;
  color: #3370d4;

  font-size: 0.95rem;
  font-weight: 700;

  text-decoration: none;

  transition: transform 0.2s ease;
}

.info-footer__button:hover {
  transform: translateY(-2px);
} */

/* MOBILE */

/* @media (max-width: 768px) {
  .info-footer__content {
    padding: 3rem 1.5rem;
  }

  .info-footer__content h2 {
    font-size: 2rem;
  }

  .info-footer__content p {
    font-size: 1rem;
  }

  .info-footer__actions {
    flex-direction: column;
  }

  .info-footer__button {
    width: 100%;
  }
} */

.header__brand {
  display: inline-flex;
  align-items: center;
}

.header__logo {
  width: 12rem;
  height: auto;
  display: block;
}