/* =========================================================
   examen.css
   Estilos específicos para la página de Examen de Suficiencia
   Se apoya en variables y utilidades de style.css
   ========================================================= */

/* ---------- Utilidades locales (botones, tags y títulos) ---------- */
.section-title{
  text-align:center;
  font-size:42px;
  font-weight:700;
  color:var(--dark-gray);
  margin:0 0 26px 0;
}

.btn{
  --btn-bg: var(--primary-red);
  --btn-fg: var(--white);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:14px 22px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  background:var(--btn-bg);
  color:var(--btn-fg);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  position:relative;
  overflow:hidden;
}
.btn::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:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.btn:hover::before{ top:120% }
.btn:active{ 
  transform:translateY(0); 
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.btn:focus-visible{ outline:3px solid rgba(112,25,28,.16); outline-offset:4px }

.btn--primary{ 
  --btn-bg: var(--primary-red); 
  --btn-fg: var(--white);
}
.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--primary-red);
  border:2px solid var(--primary-red);
  box-shadow:none;
}
.btn--ghost:hover{ background:var(--primary-red); color:var(--white) }

.tag{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius:999px;
  font-weight:700;
  font-size:.85rem;
  color:var(--white);
  background:var(--primary-red);
}
.tag--extra{
  background:var(--accent-gold);
}

/* ---------- HERO ---------- */
.hero-examen{
  padding:56px 0 24px 0;
  background:var(--white);
}
.hero-examen__content{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:38px;
  align-items:center;
}
.hero-examen__kicker{
  display:block;
  font-size:1.1rem;
  font-weight:700;
  color:var(--accent-gold);
  letter-spacing:.02em;
  margin-bottom:8px;
}
.hero-examen__title{
  margin:0 0 10px 0;
}
.hero-examen__main{
  display:block;
  font-size:56px;
  line-height:1.05;
  color:var(--primary-red);
  font-weight:900;
}
.hero-examen__subtitle{
  font-size:1.125rem;
  color:var(--dark-gray);
  opacity:.9;
  margin:12px 0 20px 0;
}
.hero-examen__image picture,
.hero-examen__image img{
  width:100%;
  max-width:560px;
  margin:0 auto;
}
.hero-examen__image img{ 
  will-change:transform; 
  transition:transform .35s ease;
}
.hero-examen__image img:hover{ transform:scale(1.02) }

/* ---------- AVISO ---------- */
.notice{
  background:var(--white);
  padding:8px 0 0;
}
.notice__box{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--white)7e6;
  border:1px solid rgba(172,138,0,.25);
  color:#644f00;
  padding:14px 16px;
  border-radius:12px;
}
.notice__icon{ flex:0 0 auto }
.notice__text{ margin:0; font-size:.97rem }

/* ---------- CRONOGRAMA ---------- */
.cronograma{
  background:var(--white);
  padding:40px 0 10px;
}
.cronograma__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
@media (max-width:1100px){
  .cronograma__grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width:680px){
  .cronograma__grid{ grid-template-columns: 1fr }
}

.cronograma-card{
  border:1px solid var(--course-border);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(31,35,40,.10);
  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;
}
.cronograma-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;
}
.cronograma-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.cronograma-card:hover::before{
  left:120%;
}
.cronograma-card:active{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}
/* Colores específicos para cada tipo de examen con degradado */
.cronograma-card:has(.tag:not(.tag--extra)):hover{
  background:linear-gradient(to bottom, rgba(var(--primary-red),.05) 0%, var(--white) 100%);
  border-top-color:var(--primary-red);
}
.cronograma-card:has(.tag--extra):hover{
  background:linear-gradient(to bottom, rgba(var(--accent-gold),.05) 0%, var(--white) 100%);
  border-top-color:var(--accent-gold);
}
.cronograma-card__header{
  padding:1rem;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.cronograma-card__body{
  padding:1rem;
}
.cronograma-card__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.35rem;
}
.cronograma-card__list .label{
  color:var(--medium-gray);
}
.cronograma-card__list .value{
  color:var(--dark-gray);
  font-weight:700;
}
.cronograma-card__footer{
  padding:1rem;
  display:flex;
  justify-content:center;
}
.cronograma-card__footer .btn--primary{
  background:var(--white);
  color:var(--dark-gray);
  border:2px solid var(--course-border);
}
/* Hover según el tipo de examen */
.cronograma-card:has(.tag:not(.tag--extra)) .btn--primary:hover{
  background:var(--primary-red);
  color:var(--white);
  border-color:var(--primary-red);
}
.cronograma-card:has(.tag--extra) .btn--primary:hover{
  background:var(--accent-gold);
  color:var(--white);
  border-color:var(--accent-gold);
}

/* ---------- REQUISITOS ---------- */
.requisitos{
  background:var(--white);
  padding:40px 0 10px;
}
.requisitos__content{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:30px;
  align-items:center;
}
.checklist{
  list-style:none;
  display:grid;
  gap:14px;
  margin:12px 0 0 0;
  padding:0;
}

.checklist li{
  position:relative;
  padding-left:34px;
  font-size:1.05rem;
}

.checklist li::before{
  content:'';
  position:absolute;
  left:0; top:2px;
  width:22px; height:22px;
  border-radius:6px;
  background:linear-gradient(135deg,var(--primary-red), var(--secondary-red));
  box-shadow:0 2px 8px rgba(112,25,28,.25);
}

.checklist li::after{
  content:'';
  position:absolute;
  left:6px; top:9px;
  width:10px; height:6px;
  border:2px solid var(--white);
  border-top:none; border-right:none;
  transform:rotate(-45deg);
}

/* ---------- MEDIO DE PAGO ---------- */
.pago{
  background:var(--white);
  border-block:1px solid var(--course-border);
  padding:clamp(1.75rem,4vw,2.5rem) 0;
}
.pago__wrap{
  display:grid;
  gap:1rem;
}
.pago__head{
  text-align:center;
}
.pago__sub{
  color:var(--medium-gray);
  margin:.25rem 0 0;
}

.pago__items{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(3,1fr);
}
.pago__items--single{
  grid-template-columns:1fr;
  max-width:400px;
  margin:0 auto;
}
.pago__items--double{
  grid-template-columns:repeat(4,1fr);
}
.pago__items--double > *:nth-child(1){
  grid-column:2;
}
.pago__items--double > *:nth-child(2){
  grid-column:3;
}

.pago-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  background:var(--white);
  border:1px solid var(--course-border);
  border-radius:16px;
  padding:1rem;
  box-shadow:0 10px 30px rgba(31,35,40,.10);
  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;
}
.pago-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;
}
.pago-item:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(31,35,40,.14);
}
.pago-item:hover::before{
  left:120%;
}
.pago-item:active{
  transform:translateY(0px);
  box-shadow:0 8px 20px rgba(31,35,40,.1);
}

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

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

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

/* ---------- Responsivo ---------- */
@media (max-width: 1100px){
  .hero-examen__content{ grid-template-columns: 1fr; text-align:center }
  .hero-examen__main{ font-size:44px }
  .requisitos__content{ grid-template-columns: 1fr; text-align:center }
  .pago__items{ grid-template-columns: repeat(2, 1fr) }
  .pago__items--single{ grid-template-columns: 1fr; max-width:400px }
  .pago__items--double{ grid-template-columns: repeat(2, 1fr) }
  .pago__items--double > *{ grid-column:auto }
}
@media (max-width: 640px){
  .hero-examen{ padding:40px 0 10px }
  .hero-examen__main{ font-size:36px }
  .notice__box{ flex-direction:row }
  .pago__items{ grid-template-columns: 1fr }
  .pago__items--single{ grid-template-columns: 1fr; max-width:100% }
  .pago__items--double{ grid-template-columns: 1fr }
}

/* ---------- Preferencias de movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .btn, .cronograma-card, .pago-item, .hero-examen__image img{
    transition:none !important;
  }
}