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

.info-hero {
  position: relative;

  padding:
    185px 0
    115px;

  overflow: hidden;

  background:
    linear-gradient(
      125deg,
      #061d33,
      var(--primary-dark) 48%,
      var(--primary)
    );

  color: white;
}


.info-hero::before {
  content: "";

  position: absolute;

  width: 570px;
  height: 570px;

  right: -200px;
  top: -270px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,0.12);
}


.info-hero-container {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1.25fr 0.75fr;

  gap: 80px;

  align-items: center;
}


.info-hero-label {
  display: block;

  margin-bottom: 15px;

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

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.info-hero h1 {
  max-width: 850px;

  margin-bottom: 25px;

  color: white;

  font-size:
    clamp(
      3.2rem,
      7vw,
      5.8rem
    );

  line-height: 1;
}


.info-hero p {
  max-width: 650px;

  margin-bottom: 32px;

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

  line-height: 1.8;

  font-size: 1.05rem;
}


.info-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 11px;
}


.info-button-primary,
.info-button-secondary {
  min-height: 50px;

  display: inline-flex;

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

  padding: 0 22px;

  border-radius: 100px;

  font-size: 0.88rem;

  font-weight: 800;

  transition:
    transform 0.25s ease;
}


.info-button-primary:hover,
.info-button-secondary:hover {
  transform: translateY(-3px);
}


.info-button-primary {
  background: white;

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


.info-button-secondary {
  border:
    1px solid
    rgba(255,255,255,0.35);

  color: white;
}


.info-hero-card {
  min-height: 320px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 35px;

  border:
    1px solid
    rgba(255,255,255,0.15);

  border-radius: 30px;

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

  backdrop-filter: blur(10px);
}


.info-hero-card span {
  margin-bottom: 8px;

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

  font-size: 0.72rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}


.info-hero-card strong {
  color: white;

  font-family:
    "Playfair Display",
    serif;

  font-size: 2.7rem;
}


.info-hero-card p {
  margin:
    13px 0 0;

  font-size: 0.9rem;
}


/* =========================================
   CABECERAS
========================================= */

.info-section-header {
  max-width: 780px;

  margin-bottom: 50px;
}


.info-section-header > span {
  display: block;

  margin-bottom: 10px;

  color:
    var(--primary);

  font-size: 0.77rem;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.info-section-header h2 {
  margin-bottom: 15px;

  color:
    var(--primary-dark);

  font-size:
    clamp(
      2.6rem,
      5vw,
      4.2rem
    );
}


.info-section-header p {
  margin: 0;

  color:
    var(--text-light);
}


/* =========================================
   HORARIOS
========================================= */

.info-schedules {
  padding:
    120px 0;

  background:
    var(--background);
}


.schedule-grid {
  display: grid;

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

  gap: 18px;
}


.schedule-card {
  position: relative;

  min-height: 290px;

  padding: 30px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 25px;

  background: white;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.schedule-card:hover {
  transform:
    translateY(-6px);

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


.schedule-card::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  right: -65px;
  top: -65px;

  border-radius: 50%;

  background:
    rgba(16,60,104,0.04);
}


.schedule-type {
  display: block;

  color:
    var(--primary);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.schedule-card h3 {
  margin:
    10px 0 0;

  color:
    var(--primary-dark);

  font-size: 1.2rem;
}


.schedule-time {
  margin-top: 35px;
}


.schedule-time strong {
  display: block;

  margin-bottom: 7px;

  color:
    var(--primary-dark);

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.25rem
    );

  line-height: 1;
}


.schedule-time span {
  color:
    var(--text-light);

  font-size: 0.8rem;
}


.punctuality-card {
  display: flex;

  gap: 20px;

  margin-top: 35px;

  padding: 26px;

  border-radius: 20px;

  background:
    var(--primary-dark);

  color: white;
}


.punctuality-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 50%;

  background: white;

  color:
    var(--primary-dark);

  font-weight: 900;
}


.punctuality-card strong {
  display: block;

  margin-bottom: 5px;
}


.punctuality-card p {
  margin: 0;

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

  font-size: 0.88rem;
}


/* =========================================
   FECHAS CTA
========================================= */

.info-calendar-cta {
  padding:
    90px 0;

  background:
    var(--primary);
}


.info-calendar-grid {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 60px;

  align-items: center;
}


.info-calendar-cta span {
  display: block;

  margin-bottom: 8px;

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

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.info-calendar-cta h2 {
  margin-bottom: 12px;

  color: white;

  font-size:
    clamp(
      2.2rem,
      5vw,
      3.7rem
    );
}


.info-calendar-cta p {
  max-width: 650px;

  margin: 0;

  color:
    rgba(255,255,255,0.67);
}


.info-calendar-button {
  min-height: 50px;

  display: inline-flex;

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

  padding:
    0 23px;

  border-radius: 100px;

  background: white;

  color:
    var(--primary-dark);

  font-weight: 800;

  white-space: nowrap;

  transition:
    transform 0.25s ease;
}


.info-calendar-button:hover {
  transform:
    translateY(-3px);
}


/* =========================================
   DOCUMENTOS
========================================= */

.info-documents {
  padding:
    125px 0;

  background: white;
}


.document-filters {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 40px;
}


.document-filter {
  padding:
    10px 17px;

  border:
    1px solid
    var(--border);

  border-radius: 100px;

  background: white;

  color:
    var(--text);

  font-size: 0.82rem;

  font-weight: 700;

  transition:
    0.2s ease;
}


.document-filter:hover {
  border-color:
    var(--primary);

  color:
    var(--primary);
}


.document-filter.active {
  border-color:
    var(--primary);

  background:
    var(--primary);

  color: white;
}


.info-documents-grid {
  display: grid;

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

  gap: 18px;
}


.info-document-card {
  display: grid;

  grid-template-columns:
    72px 1fr;

  gap: 22px;

  padding: 28px;

  border:
    1px solid
    var(--border);

  border-radius: 23px;

  background: white;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.info-document-card:hover {
  transform:
    translateY(-5px);

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


.info-document-icon {
  width: 67px;
  height: 79px;

  display: flex;

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

  border-radius:
    10px 10px 15px 10px;

  background:
    var(--primary);

  color: white;

  font-size: 0.73rem;

  font-weight: 900;
}


.info-document-category {
  display: block;

  margin-bottom: 6px;

  color:
    var(--primary);

  font-size: 0.7rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}


.info-document-content h3 {
  margin-bottom: 8px;

  color:
    var(--primary-dark);

  font-size: 1.05rem;
}


.info-document-content p {
  margin: 0 0 18px;

  color:
    var(--text-light);

  font-size: 0.84rem;

  line-height: 1.65;
}


.info-document-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.info-document-view,
.info-document-download {
  min-height: 40px;

  display: inline-flex;

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

  padding:
    0 15px;

  border-radius: 100px;

  font-size: 0.77rem;

  font-weight: 800;

  transition:
    transform 0.2s ease;
}


.info-document-view:hover,
.info-document-download:hover {
  transform:
    translateY(-2px);
}


.info-document-view {
  border: none;

  background:
    var(--primary);

  color: white;
}


.info-document-download {
  border:
    1px solid
    var(--border);

  color:
    var(--primary);

  background: white;
}


/* =========================================
   PDF MODAL
========================================= */

.info-pdf-modal {
  position: fixed;

  inset: 0;

  z-index: 5000;

  display: none;

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

  padding: 24px;
}


.info-pdf-modal.open {
  display: flex;
}


.info-pdf-background {
  position: absolute;

  inset: 0;

  background:
    rgba(3,17,29,0.87);

  backdrop-filter:
    blur(7px);
}


.info-pdf-window {
  position: relative;

  z-index: 2;

  width:
    min(
      1200px,
      100%
    );

  height:
    min(
      850px,
      90vh
    );

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-radius: 24px;

  background: white;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,0.4);
}


.info-pdf-header {
  min-height: 80px;

  display: flex;

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

  gap: 20px;

  padding:
    15px 22px;

  border-bottom:
    1px solid
    var(--border);
}


.info-pdf-header span {
  display: block;

  margin-bottom: 3px;

  color:
    var(--text-light);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.info-pdf-header h3 {
  margin: 0;

  color:
    var(--primary-dark);

  font-size: 1rem;
}


.info-pdf-actions {
  display: flex;

  align-items: center;

  gap: 14px;
}


.info-pdf-actions a {
  color:
    var(--primary);

  font-size: 0.8rem;

  font-weight: 800;
}


.info-pdf-actions button {
  width: 42px;
  height: 42px;

  border: none;

  border-radius: 50%;

  background:
    var(--background);

  color:
    var(--primary-dark);

  font-size: 1.5rem;
}


.info-pdf-body {
  flex: 1;

  background:
    #e7ebef;
}


.info-pdf-body iframe {
  width: 100%;
  height: 100%;

  border: none;
}


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

@media (max-width: 1000px) {

  .info-hero-container {
    grid-template-columns:
      1fr;
  }


  .info-hero-card {
    display: none;
  }


  .schedule-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media (max-width: 800px) {

  .info-calendar-grid {
    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .info-documents-grid {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 600px) {

  .info-hero {
    padding:
      150px 0
      80px;
  }


  .info-schedules,
  .info-documents {
    padding:
      80px 0;
  }


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


  .schedule-card {
    min-height: 220px;
  }


  .info-document-card {
    grid-template-columns:
      55px 1fr;

    gap: 16px;

    padding: 21px;
  }


  .info-document-icon {
    width: 52px;
    height: 62px;
  }


  .document-filters {
    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: 5px;
  }


  .document-filter {
    flex-shrink: 0;
  }


  .info-pdf-modal {
    padding: 0;
  }


  .info-pdf-window {
    width: 100%;
    height: 100vh;

    border-radius: 0;
  }


  .info-pdf-actions a {
    display: none;
  }

}