/* =========================
   Curso – Styles (reutilizable para Inglés/Portugués/Italiano/Quechua)
   ========================= */

:root{
  --course-color-1: #155e75;

  --course-radius:16px;
  --course-shadow:0 10px 30px rgba(31,35,40,.10);
  --container-w:1120px;
}

/* Container – si ya tienes .container global, puedes omitir esto */
.container{max-width:var(--container-w);margin:0 auto;padding-inline:1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid transparent;border-radius:999px;
  padding:.9rem 1.25rem;font-weight:700;line-height:1;
  text-decoration:none;color:var(--dark-gray);
  background:var(--white);transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{
  background:var(--secondary-red);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.btn--primary::before{
  content:'';
  position:absolute;
  top:-120%;
  left:0;
  width:100%;
  height:40%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewY(-18deg);
  transition: top .6s ease;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:0.95;
}
.btn--primary:hover{background:#651515}
.btn--primary:hover::before{top:120%}
.btn--primary:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* ---------- HERO ---------- */
.course-hero{
  position:relative;
  background:linear-gradient(120deg,var(--white) 0%,var(--white) 55%,var(--white) 100%);
  overflow:clip;border-block:1px solid var(--white);
}
.course-hero__content{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.25rem,4vw,3rem);
  align-items:center;padding:clamp(2rem,6vw,4rem) clamp(1rem,3vw,2rem);
}
.course-hero__kicker{
  display:inline-block;color:var(--accent-gold);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem
}
.course-hero__title{
  margin:.35rem 0 0;color:var(--dark-gray);font-weight:900;line-height:1.1;
  font-size:clamp(1.8rem,5vw,2.6rem)
}
.course-hero__title span{color:var(--secondary-red)}
.course-hero__subtitle{margin:.75rem 0 1.5rem;color:var(--medium-gray)}
.course-hero__image img{
  width:100%;height:auto;display:block;border-radius:var(--course-radius);
  box-shadow:var(--course-shadow)
}
/* Variantes por idioma (puedes ajustar el fondo si quieres diferenciar) */
.course-hero--ingles{background:linear-gradient(120deg,var(--white) 0%,var(--white) 45%,var(--white) 100%)}
.course-hero--portugues{background:linear-gradient(120deg,var(--white) 0%,var(--white) 45%,var(--white) 100%)}
.course-hero--italiano{background:linear-gradient(120deg,var(--white) 0%,var(--white) 45%,var(--white) 100%)}
.course-hero--quechua{background:linear-gradient(120deg,var(--white) 0%,var(--white) 45%,var(--white) 100%)}

/* Media queries para hero responsive */
@media (max-width:1200px){
  .course-hero__content{
    padding:clamp(2rem,5vw,3.5rem) 1.5rem;
  }
}
@media (max-width:768px){
  .course-hero__content{
    grid-template-columns:1fr;
    padding:2rem 1.5rem;
    gap:1.5rem;
  }
  .course-hero__text{
    text-align:center;
  }
  .course-hero__image{
    max-width:400px;
    margin:0 auto;
  }
}
@media (max-width:640px){
  .course-hero__content{
    padding:1.5rem 1.25rem;
  }
}
@media (max-width:480px){
  .course-hero__content{
    padding:1.5rem 1rem;
  }
}

/* ---------- Section Title ---------- */
.section-title{
  font-size:clamp(1.35rem,3.5vw,1.8rem);line-height:1.2;margin:0 0 1rem;color:var(--dark-gray)
}

/* ---------- ENROLL / MATRÍCULA ---------- */
.course-enroll{background:var(--white);border-block:1px solid var(--white);padding:clamp(1.75rem,4vw,2.5rem) 0}
.enroll__content{display:grid;grid-template-columns:1.1fr .9fr;gap:1.25rem;align-items:stretch}
@media (max-width:920px){.enroll__content{grid-template-columns:1fr}}
.enroll__dates{font-size:1.05rem;margin:.25rem 0 1rem;color:var(--dark-gray)}
.enroll__hint{display:inline-block;margin-left:.35rem;color:var(--medium-gray)}
.durations{background:var(--white);border:1px solid var(--white);border-radius:14px;padding:1rem;box-shadow:var(--course-shadow);height:100%;display:flex;flex-direction:column;justify-content:space-between}
.durations__title{margin:0 0 .5rem;color:var(--dark-gray);font-weight:800}
.durations__list{margin:0;padding-left:1.1rem}
.durations__list li{margin:.25rem 0}

.price-card{
  background:var(--white);border:1px solid var(--white);border-radius:14px;padding:1rem;box-shadow:var(--course-shadow);height:100%;display:flex;flex-direction:column;justify-content:space-between
}
.price-card__title{margin:0 0 .5rem;font-weight:800;color:var(--dark-gray)}
.price-card__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.price-card__list li{display:flex;justify-content:space-between;gap:.5rem}
.price-card__list span{color:var(--medium-gray)}
.price-card__list strong{color:var(--dark-gray)}
.price-card__note{margin:.75rem 0 0;color:var(--medium-gray)}

/* Center the section title and the enrollment dates horizontally (only the header row) */
.course-enroll .enroll__info > .section-title,
.course-enroll .enroll__info > .enroll__dates{
  width:100%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Center the small pill/tag inside the schedule card header */
.schedule-card__head{ display:flex; align-items:center; justify-content:center; gap:.5rem }
.schedule-card__head .tag{ margin:0 auto }

/* Make columns children stretch and ensure inner cards take full height */
.enroll__info, .enroll__aside{display:flex;flex-direction:column}

/* small visual tweak: slightly more breathing under the title */
.enroll__info .section-title{margin-bottom:.35rem}

/* ---------- SCHEDULE ---------- */
.course-schedule{background:var(--white);padding:clamp(1.75rem,4vw,2.5rem) 0}
.schedule-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.schedule-grid--single{
  grid-template-columns:1fr;
  max-width:400px;
  margin:0 auto;
}
.schedule-grid--double{
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:1024px){
  .schedule-grid{grid-template-columns:repeat(2,1fr)}
  .schedule-grid--single{grid-template-columns:1fr !important}
  .schedule-grid--double{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .schedule-grid{grid-template-columns:1fr !important}
  .schedule-grid--single{grid-template-columns:1fr !important;max-width:100%}
  .schedule-grid--double{grid-template-columns:1fr !important}
}

.schedule-card{
  border:1px solid var(--white);
  border-radius:18px;
  box-shadow:var(--course-shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .3s ease, border-top-color .3s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  background:var(--white);
  border-top:3px solid transparent;
}
.schedule-card::before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:40%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:0.95;
  z-index:1;
}
.schedule-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.schedule-card:hover::before{
  left:120%;
}
.schedule-card:active{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}
/* Colores específicos para cada tipo de programa con degradado */
.schedule-card:has(.tag:not(.tag--accent):not(.tag--muted)):hover{
  background:linear-gradient(to bottom, rgba(112,25,28,.05) 0%, var(--white) 100%);
  border-top-color:var(--secondary-red);
}
.schedule-card:has(.tag--accent):hover{
  background:linear-gradient(to bottom, rgba(172,138,0,.05) 0%, var(--white) 100%);
  border-top-color:var(--accent-gold);
}
.schedule-card:has(.tag--muted):hover{
  background:linear-gradient(to bottom, rgba(21,94,117,.05) 0%, var(--white) 100%);
  border-top-color:var(--course-color-1);
}
.schedule-card__head{padding:1rem;border-bottom:1px solid var(--white);display:flex;align-items:center;gap:.5rem}
.tag{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem;color:var(--white);background:var(--secondary-red)}
.tag--accent{background:var(--accent-gold)}
.tag--muted{background:var(--course-color-1)}
.schedule-card__body{padding:1rem}
.schedule-card__list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.schedule-card__list .label{color:var(--medium-gray)}
.schedule-card__list .value{color:var(--dark-gray);font-weight:700}
.divider{border:none;border-top:1px solid var(--white);margin:1rem 0}
.schedule-note{margin:1rem 0 0;color:var(--medium-gray);text-align:center}

/* ---------- PAYMENT ---------- */
.course-payment{background:var(--white);border-block:1px solid var(--white);padding:clamp(1.75rem,4vw,2.5rem) 0}
.payment__wrap{display:grid;gap:1rem}
.payment__head{text-align:center}
.payment__sub{color:var(--medium-gray);margin:.25rem 0 0}

.payment__items{
  display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr)
}
.payment__items--single{
  grid-template-columns:1fr;
  max-width:400px;
  margin:0 auto;
}
.payment__items--double{
  grid-template-columns:repeat(4,1fr);
}
.payment__items--double > *:nth-child(1){
  grid-column:2;
}
.payment__items--double > *:nth-child(2){
  grid-column:3;
}
@media (max-width:1024px){
  .payment__items{grid-template-columns:repeat(2,1fr)}
  .payment__items--single{grid-template-columns:1fr !important}
  .payment__items--double{grid-template-columns:repeat(2,1fr)}
  .payment__items--double > *{grid-column:auto}
}
@media (max-width:640px){
  .payment__items{grid-template-columns:1fr !important}
  .payment__items--single{grid-template-columns:1fr !important;max-width:100%}
  .payment__items--double{grid-template-columns:1fr !important}
}

.pay-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;background:var(--white);border:1px solid var(--white);border-radius:16px;
  padding:1rem;box-shadow:var(--course-shadow);text-decoration:none;color:var(--dark-gray);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease, background .3s ease, border-top-color .3s ease;
  position:relative;
  overflow:hidden;
  border-top:3px solid transparent;
}
.pay-item::before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:40%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:0.95;
}
.pay-item:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(31,35,40,.14);
}
.pay-item:hover::before{left:120%}
.pay-item:active{transform:translateY(0px);box-shadow:0 8px 20px rgba(31,35,40,.1)}

/* Colores específicos por tipo de programa */
.pay-item--regular .pay-item__price{
  color:var(--secondary-red);
}
.pay-item--regular:hover{
  border-top-color:var(--secondary-red);
  background:linear-gradient(to bottom, rgba(112,25,28,.05) 0%, var(--white) 100%);
}

.pay-item--superintensivo .pay-item__price{
  color:var(--accent-gold);
}
.pay-item--superintensivo:hover{
  border-top-color:var(--accent-gold);
  background:linear-gradient(to bottom, rgba(172,138,0,.05) 0%, var(--white) 100%);
}

.pay-item--repaso .pay-item__price{
  color:var(--course-color-1);
}
.pay-item--repaso:hover{
  border-top-color:var(--course-color-1);
  background:linear-gradient(to bottom, rgba(21,94,117,.05) 0%, var(--white) 100%);
}

.pay-item__title{font-weight:800;color:var(--dark-gray)}
.pay-item__tag{font-size:.85rem;color:var(--medium-gray)}
.pay-item__price{font-size:4.25rem;font-weight:700}