/* assets/css/cursos.css */

/*========================================
  VARIABLES
========================================*/
:root{
  --shadow: 0 10px 30px rgba(11,37,69,.12);
  --shadow2: 0 18px 55px rgba(11,37,69,.18);
  --radius: 16px;

  --revealDur: 1.25s;
  --revealEase: cubic-bezier(.16,1,.3,1);
  --revealDelayStep: 120ms;

  --revealDist: 42px;
}

*{ box-sizing: border-box; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}

/* ========================
   FIX GLOBAL DE PÁGINA
======================== */
.page-cursos{
  width: 100%;
  overflow-x: hidden;
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.page-bottom-spacer{
  height: clamp(1.5rem, 4vw, 3rem);
}

/*========================
  HERO
========================*/
.hero-cursos{
  position: relative;
  overflow: hidden;
  padding: clamp(3.2rem, 4.5vw, 5rem) 1.1rem 3.2rem;
  color: var(--azul-marino);
  border-bottom: 4px solid var(--amarillo-logo);
  background: linear-gradient(180deg, #fff 0%, var(--gris-claro) 100%);
}
.hero-layer{ position:absolute; inset:0; pointer-events:none; }

.hero-noise{
  opacity: .28;
  background-image: radial-gradient(rgba(11,37,69,.08) 1px, transparent 1px);
  background-size: 18px 18px;
}
.hero-blobs{
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(255,200,0,.30), transparent 70%),
    radial-gradient(500px 300px at 85% 35%, rgba(181,18,27,.22), transparent 70%),
    radial-gradient(700px 380px at 60% 110%, rgba(11,37,69,.18), transparent 70%);
}
.hero-wrap{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hero-kicker{
  display:flex;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom: .9rem;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:.38rem .7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .85rem;
  background: rgba(255,200,0,.25);
  color: var(--azul-marino);
  border: 1px solid rgba(11,37,69,.08);
}
.pill-outline{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(11,37,69,.14);
}

.hero-cursos h1{
  margin: 0.2rem 0 0.75rem;
  font-size: clamp(1.85rem, 3.2vw, 3rem);
  letter-spacing: -0.02em;
}
.hero-cursos p{
  margin: 0 auto 1.5rem;
  max-width: 760px;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  color: var(--gris-oscuro);
}

.hero-actions{
  display:flex;
  gap:.9rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom: 0;
}

/* Botones */
.cta-primary,
.cta-secondary{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: 999px;
  padding: .85rem 1.15rem;
  font-weight: 900;
  text-decoration:none;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  user-select:none;
  border: 0;
}
.cta-primary{
  background: var(--rojo-logo);
  color: var(--blanco);
  box-shadow: var(--shadow);
}
.cta-primary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  background: var(--amarillo-logo);
  color: var(--azul-marino);
}
.cta-secondary{
  background: rgba(255,255,255,.85);
  color: var(--azul-marino);
  border: 1px solid rgba(11,37,69,.14);
}
.cta-secondary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.cta-ring:hover{
  box-shadow: 0 0 0 6px rgba(255,200,0,.18), var(--shadow);
}

/*========================
  TOOLBAR
========================*/
.toolbar{
  position: sticky;
  top: 72px;
  z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,37,69,.10);
}
.toolbar-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: .75rem 1rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .85rem;
  flex-wrap: wrap;
}
.toolbar-left{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; width: 100%; }
.toolbar-right{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; width: 100%; }

.chips{ display:flex; gap:.45rem; flex-wrap:wrap; width: 100%; }
.chip{
  border: 1px solid rgba(11,37,69,.14);
  background: rgba(255,255,255,.85);
  color: var(--azul-marino);
  border-radius: 999px;
  padding: .45rem .75rem;
  font-weight: 900;
  cursor:pointer;
  transition: transform .15s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  flex: 0 0 auto;
}
.chip:hover{ transform: translateY(-1px); box-shadow: 0 10px 25px rgba(11,37,69,.10); }
.chip.active{
  background: rgba(255,200,0,.25);
  border-color: rgba(255,200,0,.55);
}

.search{ flex: 1 1 240px; min-width: 180px; width: 100%; }
.search input{
  width: 100%;
  border: 1px solid rgba(11,37,69,.16);
  border-radius: 999px;
  padding: .55rem .85rem;
  outline: none;
}
.search input:focus{ border-color: rgba(11,37,69,.4); }

.select{ flex: 0 1 220px; min-width: 190px; }
.select select{
  width: 100%;
  border: 1px solid rgba(11,37,69,.16);
  border-radius: 999px;
  padding: .55rem .85rem;
  outline: none;
  background: rgba(255,255,255,.9);
}

@media(max-width: 520px){
  .toolbar{ top: 64px; }
  .select{ flex: 1 1 100%; }
}

/*========================
  GRID CURSOS
========================*/
.grid-cursos{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  margin: 1.8rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}
@media(min-width: 768px){
  .grid-cursos{ grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
}
@media(min-width: 1024px){
  .grid-cursos{ grid-template-columns: repeat(3, 1fr); }
}

.card-curso{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,37,69,.10);
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 12px 30px rgba(11,37,69,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.card-curso:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(11,37,69,.16);
  border-color: rgba(255,200,0,.55);
}

.card-media{ position: relative; height: 180px; overflow: hidden; background: var(--gris-claro); }
.card-curso img{
  width:100%; height:100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .5s ease;
}
.card-curso:hover img{ transform: scale(1.08); }

.card-glow{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,200,0,.30), transparent 60%),
              radial-gradient(circle at 80% 20%, rgba(181,18,27,.22), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}
.card-curso:hover .card-glow{ opacity: 1; }

.contenido-curso{
  padding: 1rem 1rem 1.05rem;
  display:flex;
  flex-direction:column;
  gap: .65rem;
  flex:1;
}

.topline{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap:.6rem;
}
.card-curso h3{
  margin:0;
  font-size: 1.1rem;
  color: var(--azul-marino);
  line-height: 1.25;
}

.mini-tag{
  font-weight:900;
  font-size: .75rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(255,200,0,.25);
  border: 1px solid rgba(255,200,0,.45);
  white-space: nowrap;
}
.mini-warn{
  background: rgba(181,18,27,.10);
  border-color: rgba(181,18,27,.18);
}

.etiquetas{ display:flex; gap:.5rem; flex-wrap:wrap; }
.badge{
  background: rgba(11,37,69,.08);
  color: var(--azul-marino);
  border: 1px solid rgba(11,37,69,.10);
  font-size: .78rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-weight: 900;
}
.badge-strong{
  background: rgba(255,200,0,.22);
  border-color: rgba(255,200,0,.45);
}

.card-curso p{ margin:0; color: var(--gris-oscuro); font-size: .95rem; }

.bottomline{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:.8rem;
  margin-top: .15rem;
}
.precio{ font-weight: 900; color: var(--rojo-logo); font-size: 1.05rem; }
.spots{ color: rgba(51,51,51,.85); font-weight: 850; font-size: .85rem; }

.botones-curso{
  display:flex;
  gap:.6rem;
  margin-top: .25rem;
}

.btn-detalle,
.btn-wa{
  flex:1;
  border-radius: 999px;
  padding: .7rem .85rem;
  font-weight: 900;
  border: 0;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-detalle{
  background: rgba(11,37,69,.10);
  color: var(--azul-marino);
  border: 1px solid rgba(11,37,69,.16);
}
.btn-detalle:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-wa{
  background: var(--rojo-logo);
  color: var(--blanco);
  box-shadow: 0 10px 25px rgba(181,18,27,.22);
}
.btn-wa:hover{
  transform: translateY(-2px);
  background: var(--amarillo-logo);
  color: var(--azul-marino);
  box-shadow: 0 18px 45px rgba(255,200,0,.24);
}

@media(max-width: 520px){
  .card-media{ height: 150px; }
  .botones-curso{ flex-direction: column; }
}

/*========================
  MODAL (✅ RESTAURADO Y COMPLETO)
========================*/
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:none;               /* se activa con JS */
  align-items:center;
  justify-content:center;
  z-index: 2000;
  padding: 1rem;
}
.modal{
  width: 100%;
  max-width: 820px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(11,37,69,.12);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
}

/* imagen arriba del modal */
.detalle-img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
  background: var(--gris-claro);
}

.modal-close{
  position:absolute;
  top: 10px; right: 10px;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(11,37,69,.15);
  background: rgba(255,255,255,.90);
  font-size: 1.35rem;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index: 5;
}

.detalle-head{
  padding: 1.1rem 1.2rem .35rem;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.detalle-head h3{
  margin: 0;
  color: var(--azul-marino);
  font-size: 1.25rem;
  line-height: 1.2;
}
.detalle-badges{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#detalle-descripcion{
  padding: 0 1.2rem;
  margin: .25rem 0 1rem;
  color: var(--gris-oscuro);
  font-weight: 700;
  line-height: 1.55;
}

.detalle-grid{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 1rem;
  padding: 0 1.2rem 1rem;
}
@media(max-width: 860px){
  .detalle-grid{ grid-template-columns: 1fr; }
  .detalle-img{ height: 200px; }
}

.detalle-box{
  background: rgba(11,37,69,.05);
  border: 1px solid rgba(11,37,69,.10);
  border-radius: var(--radius);
  padding: .95rem .95rem;
}
.detalle-box h4{
  margin: 0 0 .6rem;
  color: var(--azul-marino);
}
.detalle-box ul{
  margin: 0;
  padding-left: 1.05rem;
}
.detalle-box li{
  margin: .25rem 0;
  color: rgba(51,51,51,.88);
  font-weight: 700;
}

.detalle-box p{
  margin: .45rem 0;
  color: rgba(51,51,51,.88);
  font-weight: 750;
}

.detalle-actions{
  padding: 1rem 1.2rem 1.2rem;
  display:flex;
  gap: .8rem;
  justify-content:flex-end;
  flex-wrap: wrap;
}
@media(max-width: 520px){
  .detalle-actions .cta-primary,
  .detalle-actions .cta-secondary{ width: 100%; }
}

/*========================
  SECTIONS
========================*/
.sec-head{ text-align:center; margin-bottom: 1rem; }
.sec-head p{ margin: .35rem auto 0; max-width: 720px; color: var(--gris-oscuro); }

.calendario{
  margin: 2rem auto;
  max-width: 1100px;
  padding: 2rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(245,245,245,.9));
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(11,37,69,.10);
  box-shadow: 0 18px 55px rgba(11,37,69,.10);
}

.lista-fechas{
  list-style:none;
  padding:0;
  margin: 1rem auto 1.25rem;
  max-width: 760px;
  display:grid;
  gap: .65rem;
}
.lista-fechas li{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,37,69,.10);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: .7rem;
  box-shadow: 0 10px 30px rgba(11,37,69,.06);
}
.fecha{ font-weight: 900; color: var(--azul-marino); white-space: nowrap; }
.curso{ color: var(--gris-oscuro); font-weight: 850; }

@media(max-width: 520px){
  .lista-fechas li{ flex-direction: column; align-items: flex-start; }
  .fecha{ width: 100%; }
  .curso{ width: 100%; }
}

/* ✅ botón centrado */
.cta-center{
  display:flex;
  justify-content:center;
  align-items:center;
  width: 100%;
  text-align:center;
}
.cta-strong{
  display:inline-flex;
  min-width: min(560px, 100%);
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  font-size: 1.05rem;
  padding: 1rem 1.25rem;
  letter-spacing: .2px;
  box-shadow: 0 18px 55px rgba(181,18,27,.25);
}
.cta-strong:hover{
  box-shadow: 0 24px 75px rgba(255,200,0,.26);
}

/* pulso */
.cta-pulse{ position: relative; }
.cta-pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 2px solid rgba(255,200,0,.55);
  opacity: 0;
  transform: scale(.98);
  animation: ctaPulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaPulse{
  0%{ opacity: 0; transform: scale(.98); }
  35%{ opacity: .55; transform: scale(1.02); }
  70%{ opacity: 0; transform: scale(1.05); }
  100%{ opacity: 0; transform: scale(1.05); }
}

/*========================
  CÓMO FUNCIONA
========================*/
.como-funciona{
  --revealDist: 22px;
  margin: 2.6rem auto;
  max-width: 1100px;
  padding: 2rem 1rem;
  width: 100%;
}
.como-funciona .sec-head{ margin-bottom: 2.2rem; }

.como-funciona .sec-head p{
  display:inline-block;
  margin: .65rem auto 0;
  padding: .62rem 1.05rem;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,37,69,.10);
  color: rgba(11,37,69,.78);
  font-weight: 900;
  box-shadow: 0 12px 35px rgba(11,37,69,.06);
}

.cf-grid{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
}

.cf-card{
  width: 100%;
  max-width: 980px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 1rem;

  background: rgba(255,255,255,.95);
  border: 1px solid rgba(11,37,69,.10);
  border-radius: 18px;
  padding: 1.15rem 1.2rem;
  box-shadow: 0 18px 55px rgba(11,37,69,.10);
}

.cf-ico{
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(11,37,69,.12);
  box-shadow: 0 10px 30px rgba(11,37,69,.06);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.cf-ico img{
  max-width: 78px;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}

.cf-body{ flex: 1; text-align:left; max-width: 760px; }

.cf-body h3{
  margin: 0 0 .4rem;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  color: rgba(11,37,69,.95);
  position: relative;
  padding-left: .75rem;
}
.cf-body h3::before{
  content:"";
  position:absolute;
  left: 0;
  top: .18rem;
  width: 4px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,200,0,.95), rgba(181,18,27,.55));
  box-shadow: 0 10px 25px rgba(255,200,0,.14);
}
.cf-body p{
  margin: 0;
  color: rgba(51,51,51,.82);
  font-weight: 780;
  line-height: 1.55;
}
.cf-chips{
  margin-top: .75rem;
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}
.cf-chip{
  font-weight: 900;
  font-size: .78rem;
  color: rgba(11,37,69,.86);
  background: rgba(255,200,0,.10);
  border: 1px solid rgba(255,200,0,.22);
  border-radius: 999px;
  padding: .3rem .6rem;
}

@media(max-width: 640px){
  .cf-grid{ gap: 1.1rem; }
  .cf-card{
    flex-direction: column;
    align-items:flex-start;
    gap: .8rem;
    padding: 1.05rem;
  }
  .cf-ico{ width: 108px; height: 108px; }
  .cf-body{ max-width: 100%; }
}

/* CTA strip */
.cta-strip{
  margin-top: 1.25rem;
  background: rgba(11,37,69,.06);
  border: 1px solid rgba(11,37,69,.10);
  border-radius: calc(var(--radius) + 6px);
  padding: 1.2rem 1rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cta-strip h3{ margin:0; color: var(--azul-marino); }
.cta-strip p{ margin:.25rem 0 0; color: var(--gris-oscuro); }
@media(max-width: 520px){
  .cta-strip .cta-secondary{ width: 100%; }
}

/*========================
  FAQ
========================*/
.faq{
  margin: 2rem auto 0;
  max-width: 1100px;
  padding: 2rem 1rem;
  width: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,37,69,.10);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 55px rgba(11,37,69,.08);
}
.faq-inner{ max-width: 940px; margin: 0 auto; }
.faq h2{ text-align:center; margin: 0 0 1rem; }

.pregunta{
  width:100%;
  text-align:left;
  background: rgba(245,245,245,.9);
  border: 1px solid rgba(11,37,69,.10);
  padding: .95rem 1rem;
  margin-bottom: .6rem;
  border-radius: var(--radius);
  cursor:pointer;
  font-weight: 900;
  color: var(--azul-marino);
  position: relative;
}
.pregunta::after{
  content:"+";
  position:absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  transition: transform .25s ease;
}
.pregunta.abierta::after{
  content:"−";
  transform: translateY(-50%) rotate(180deg);
}
.respuesta{
  display:none;
  background: rgba(255,255,255,.9);
  border-left: 4px solid var(--amarillo-logo);
  padding: .85rem 1rem;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  margin: -.25rem 0 .9rem;
  color: var(--gris-oscuro);
}

/*========================
  REVEAL
========================*/
.reveal{
  opacity: 0;
  transform: translateY(var(--revealDist)) scale(.99);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition:
    opacity var(--revealDur) var(--revealEase),
    transform var(--revealDur) var(--revealEase);
}
.reveal[data-reveal="left"]{ transform: translateX(calc(var(--revealDist) * -1)) scale(.99); }
.reveal[data-reveal="right"]{ transform: translateX(var(--revealDist)) scale(.99); }
.reveal[data-reveal="down"]{ transform: translateY(calc(var(--revealDist) * -1)) scale(.99); }
.reveal[data-reveal="up"]{ transform: translateY(var(--revealDist)) scale(.99); }

/* en "Cómo funciona" todas igual */
.como-funciona .reveal{ transform: translateY(var(--revealDist)) scale(.99) !important; }
.como-funciona .reveal.is-visible{ transform: translate3d(0,0,0) scale(1) !important; }

/* Delay en cómo funciona */
.como-funciona .reveal.is-visible{ transition-delay: 0ms; }
.como-funciona .cf-card.reveal.is-visible:nth-child(1){ transition-delay: 0ms; }
.como-funciona .cf-card.reveal.is-visible:nth-child(2){ transition-delay: 140ms; }
.como-funciona .cf-card.reveal.is-visible:nth-child(3){ transition-delay: 280ms; }
.como-funciona .cf-card.reveal.is-visible:nth-child(4){ transition-delay: 420ms; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .card-curso, .cta-primary, .cta-secondary, .btn-wa, .btn-detalle{
    transition: none !important;
    animation: none !important;
  }
  .reveal{ opacity: 1; transform: none !important; }
  .cta-pulse::after{ animation: none !important; }
}