
/* Course pages. La navegación usa exclusivamente styles.css para conservar
   exactamente el mismo tamaño, espaciado, tipografía y botones del Home. */
.detail-hero{padding:55px 0;background:linear-gradient(120deg,#f8fdff,#eef7ff)}
.detail-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}
.detail-kicker{text-transform:uppercase;color:#078f9d;font-size:12px;font-weight:800;letter-spacing:1.2px}
.detail-hero h1{font-size:clamp(42px,5vw,66px);line-height:.96;color:#103f69;margin:12px 0}.detail-hero h1 span{color:#6729c5}
.detail-hero p{color:#607585;line-height:1.7}.detail-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.detail-chips span{background:#fff;border:1px solid #dce9ee;border-radius:10px;padding:9px 11px;font-size:11px;font-weight:700}.detail-chips i{color:#07969f}
.detail-image{border-radius:28px;overflow:hidden;box-shadow:0 20px 50px rgba(0,55,90,.18)}.detail-image img{width:100%;height:480px;object-fit:cover}
.detail-benefits{padding:45px 0}.four-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.four-grid article{padding:22px;border:1px solid #e0ebef;border-radius:17px;box-shadow:0 8px 24px rgba(0,55,90,.07)}.four-grid i{font-size:27px;color:#0b929d}.four-grid h3{font-size:15px;color:#103f69}.four-grid p{font-size:12px;color:#617786;line-height:1.6}
.syllabus{padding:65px 0;background:#f5f9fc}.section-title{text-align:center;max-width:760px;margin:0 auto 35px}.section-title span{color:#0b929d;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:1.3px}.section-title h2{font-size:31px;color:#103f69}
.topic-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.topic-card{background:#fff;border-radius:17px;padding:22px;border:1px solid #dfeaf0;box-shadow:0 8px 22px rgba(0,55,90,.06)}.topic-card h3{color:#14537d;margin-top:0}.topic-card li{font-size:12px;line-height:1.7;color:#536b7b;margin-bottom:5px}
.cert-section{padding:65px 0;background:linear-gradient(120deg,#073a65,#0b7790,#6328c4);color:#fff}.cert-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:45px;align-items:center}.cert-kicker{color:#78e3e5;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:1.2px}.cert-grid h2{font-size:33px}.cert-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;padding-left:20px}.cert-list li{font-size:12px;line-height:1.55}.cert-note{font-size:11px;background:rgba(255,255,255,.09);padding:12px;border-radius:10px}.cert-visual{text-align:center;padding:32px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);border-radius:23px}.cert-visual>i{font-size:55px;color:#75e5d7}
.price-row{display:flex;gap:12px;margin:20px 0}.price-row>div{background:#fff;border:1px solid #dbe8ed;border-radius:14px;padding:12px 16px;display:flex;flex-direction:column}.price-row small{font-size:10px;text-transform:uppercase;color:#667c8b}.price-row b{font-size:25px;color:#6330b8}.price-row em{font-size:11px;font-style:normal}
.enroll-section{padding:65px 0;background:#fff}.enroll-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center}.enroll-grid h2{font-size:32px;color:#103f69;margin:6px 0}.enroll-grid p{color:#607585}.course-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#f5f9fb;border:1px solid #dce8ed;padding:24px;border-radius:20px}.course-form input,.course-form select,.course-form textarea{padding:13px;border:1px solid #ccdde3;border-radius:10px;font:inherit;background:#fff}.course-form textarea,.course-form button{grid-column:1/-1}
@media(max-width:900px){.detail-hero-grid,.cert-grid,.enroll-grid{grid-template-columns:1fr}.four-grid{grid-template-columns:1fr 1fr}.topic-groups{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.detail-hero h1{font-size:39px}.detail-image img{height:330px}.four-grid,.topic-groups{grid-template-columns:1fr}.cert-list{grid-template-columns:1fr}.course-form{grid-template-columns:1fr}.course-form>*{grid-column:1!important}.price-row{flex-direction:column}}

/* V6.2 - formularios uniformes: reglas de compatibilidad */
.enroll-section .course-form{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:16px!important;
}
.enroll-section .course-form .field{
  display:flex!important;
  flex-direction:column!important;
}
.enroll-section .course-form .full-field,
.enroll-section .course-form .full-submit{
  grid-column:1/-1!important;
}
@media(max-width:900px){
  .enroll-section .course-form{
    grid-template-columns:1fr!important;
  }
  .enroll-section .course-form .field,
  .enroll-section .course-form .full-field,
  .enroll-section .course-form .full-submit{
    grid-column:1!important;
  }
}


/* ======================================================
   V6.3 — Las 3 cabeceras de curso usan la misma estructura
   ====================================================== */

.uniform-course-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.uniform-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:24px 0!important;
}

.uniform-chips span{
  min-height:40px;
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  padding:9px 13px!important;
  background:#fff!important;
  border:1px solid #d9e7ed!important;
  border-radius:12px!important;
  box-shadow:0 5px 14px rgba(10,61,91,.06);
  color:#173d5d;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap;
}

.uniform-chips i{
  color:#0796a1!important;
}

.uniform-info-card{
  width:340px;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 22px;
  margin:0 0 20px;
  border-radius:20px;
  color:#fff;
  box-shadow:0 14px 30px rgba(40,55,120,.16);
}

.uniform-info-card small{
  display:block;
  margin-bottom:3px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
}

.uniform-info-card strong{
  display:block;
  font-size:34px;
  line-height:1.05;
}

.uniform-info-card strong em{
  font-size:14px;
  font-style:normal;
  font-weight:800;
}

.uniform-info-card p{
  margin:7px 0 0!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:1.35!important;
}

.podologia-info-card{
  background:linear-gradient(120deg,#157bad,#6b2fc8)!important;
}

.therapy-info-card{
  background:linear-gradient(120deg,#136ac3,#355ac7)!important;
}

.massage-info-card{
  background:linear-gradient(120deg,#078ca0,#17aa8b)!important;
}

.uniform-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:14px!important;
  margin-top:0!important;
}

.uniform-actions .btn{
  min-height:48px;
  padding:12px 20px!important;
  border-radius:10px!important;
  font-size:14px!important;
  font-weight:800!important;
}

.syllabus-btn{
  background:#173f69!important;
  color:#fff!important;
}

.uniform-actions .wa-btn{
  background:#0daf68!important;
}

.detail-hero-grid{
  align-items:center!important;
}

/* Eliminar estilos anteriores disparejos de Masoterapia */
.price-row{
  display:none!important;
}

@media(max-width:900px){
  .uniform-info-card{
    width:min(100%,340px);
  }
}

@media(max-width:560px){
  .uniform-chips{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .uniform-chips span{
    justify-content:flex-start;
    white-space:normal;
  }

  .uniform-info-card{
    width:100%;
  }

  .uniform-actions{
    width:100%;
  }

  .uniform-actions .btn{
    flex:1 1 100%;
    width:100%;
    justify-content:center;
  }
}

/* V6.4 - Heroes de cursos con imágenes HD */
.detail-image img.course-detail-hd{
  width:100%!important;
  height:480px!important;
  object-fit:cover!important;
  object-position:center!important;
}
.pod-hero-image img.course-detail-hd{
  width:100%!important;
  height:560px!important;
  object-fit:cover!important;
  object-position:center!important;
}
@media(max-width:900px){
  .detail-image img.course-detail-hd{height:420px!important}
  .pod-hero-image img.course-detail-hd{height:470px!important}
}
@media(max-width:560px){
  .detail-image img.course-detail-hd,
  .pod-hero-image img.course-detail-hd{height:330px!important}
}

/* V6.5 - imagen aprobada en Podología */
.pod-hero-image img.approved-pod-image{
  width:100%!important;
  height:560px!important;
  object-fit:cover!important;
  object-position:center!important;
}
@media(max-width:900px){
  .pod-hero-image img.approved-pod-image{height:470px!important}
}
@media(max-width:560px){
  .pod-hero-image img.approved-pod-image{height:340px!important}
}
