/* Archivo iphone-ui.css /*
/* ===== TecnoIng · iPhone UI skin (glass + motion) ===== */
:root {
  --bg1: #0b0b10;
  --bg2: #0d0f14;
  --ios-blue: #0a84ff;
  --ios-blue-2: #64a8ff;
  --text: #f5f7fb;
  --muted: #aab0bd;
  --card: #0f1320cc;
  --card-strong: #101426f2;
  --glass: rgba(255, 255, 255, .06);
  --border: rgba(255, 255, 255, .08);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --radius: 18px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ===== TEMA CLARO ===== */
.light-mode {
  --bg1: #f5f7ff;
  --bg2: #eef2ff;
  --ios-blue: #007AFF;
  --ios-blue-2: #0056CC;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --card: rgba(255, 255, 255, 0.8);
  --card-strong: rgba(255, 255, 255, 0.95);
  --glass: rgba(0, 0, 0, 0.05);
  --border: rgba(0, 0, 0, 0.1);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Fondo específico para modo claro */
.light-mode body {
  background:
    radial-gradient(1200px 600px at 10% -10%, #d6e4ff 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #e1ebff 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Ajustes específicos para modo claro */
.light-mode .site-header {
  background: linear-gradient(180deg, rgba(245, 247, 255, 0.9), rgba(245, 247, 255, 0.7));
  border-bottom: 1px solid var(--border);
}

.light-mode .navbar .nav-link {
  color: #1d1d1f !important;
  opacity: 0.8;
}

.light-mode .navbar .nav-link:hover,
.light-mode .navbar .nav-link.active {
  opacity: 1;
  color: #007AFF !important;
}

.light-mode .logo-text {
  color: #1d1d1f;
}

.light-mode .logo i {
  color: #007AFF;
}

.light-mode .feature-card,
.light-mode .card,
.light-mode .testimonio-card,
.light-mode .docente-card,
.light-mode .curso-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
  color: var(--text);
}

.light-mode .section-title h2 {
  background: linear-gradient(180deg, #1d1d1f, #007AFF);
  -webkit-background-clip: text;
  background-clip: text;
}

.light-mode .sub-hero h1 {
  background: linear-gradient(180deg, #1d1d1f, #007AFF);
  -webkit-background-clip: text;
}

.light-mode .hero h1 {
  color: #1d1d1f;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.light-mode .hero p {
  color: #6e6e73;
}

.light-mode .btn-outline {
  border-color: rgba(0, 0, 0, 0.15);
  color: #1d1d1f;
}

.light-mode .btn-outline:hover {
  background: rgba(0, 0, 0, 0.05);
}

.light-mode .accordion-button {
  background: rgba(255, 255, 255, 0.6);
  color: #1d1d1f !important;
}

.light-mode .accordion-body {
  background: rgba(0, 0, 0, 0.03);
  color: #1d1d1f;
}

.light-mode footer {
  background:
    radial-gradient(800px 300px at 20% -10%, rgba(200, 210, 255, 0.5), transparent 60%),
    linear-gradient(180deg, #eef2ff, #e0e7ff);
}

.light-mode .footer-column p,
.light-mode .footer-column li,
.light-mode .footer-column a {
  color: #6e6e73;
}

.light-mode .footer-column a:hover {
  color: #007AFF;
}

/* Transición suave entre temas */
body {
  transition: background-color 0.5s ease, color 0.3s ease;
}

body * {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "Poppins", Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2042 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #11203a 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links + buttons (iOS blue) */
a {
  color: var(--ios-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.btn,
.btn-primary,
.btn-outline {
  border-radius: 14px;
  padding: .7rem 1rem;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: all .25s ease;
  backdrop-filter: saturate(140%) blur(6px);
}

.btn-sm {
  padding: .5rem .8rem;
  border-radius: 12px;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(180deg, #2a8bff, #0a6bff);
  border-color: #0a5ce0;
  color: #fff;
  box-shadow: 0 8px 20px rgba(10, 132, 255, .25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: saturate(1.1);
}

.btn-outline {
  background: transparent;
  border-color: #2d3a58;
  color: #dbe6ff;
}

.btn-outline:hover {
  background: #1b2442;
}

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding: 0 20px;
}

/* Header sticky + glass */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: saturate(140%) blur(14px);
  background: linear-gradient(180deg, rgba(7, 10, 18, .8), rgba(7, 10, 18, .5));
  border-bottom: 1px solid var(--border);
}

.site-header .navbar .nav-link {
  color: #dbe6ff !important;
  opacity: .85;
  font-weight: 500;
}

.site-header .navbar .nav-link:hover {
  opacity: 1;
}

.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.logo i {
  color: #9ab6ff;
}

.logo-text {
  font-size: 1.1rem;
  letter-spacing: .25rem;
  margin: 0;
  color: #e7ecff;
}

/* WhatsApp & CTA float */
.whatsapp-float,
.cta-float {
  position: fixed;
  z-index: 120;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.whatsapp-float {
  right: 24px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  background: #25D366;
  color: #fff;
  box-shadow: var(--shadow);
}

.whatsapp-float:hover {
  transform: translateY(-1px);
}

.cta-float {
  right: 30px;
  bottom: 100px;
}

/* Section title */
.section-title {
  text-align: center;
  margin: 60px auto 28px;
}

.section-title h2 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
  margin: .2rem auto .6rem;
  background: linear-gradient(180deg, #fff, #bcd3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title p {
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
}

/* Generic glass cards */
.feature-card,
.card,
.testimonio-card,
.docente-card,
.curso-card {
  background: linear-gradient(180deg, rgba(20, 26, 45, .85), rgba(14, 18, 32, .85));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.feature-card::after,
.card::after,
.testimonio-card::after,
.docente-card::after,
.curso-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(120deg, transparent 0 60%, rgba(255, 255, 255, .05) 70%, transparent 80%);
  pointer-events: none;
}

/* Grids */
.features-grid,
.testimonios-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-2 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Accordion (Bootstrap override → iOS glass) */
.accordion-item {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.accordion-button {
  background: rgba(255, 255, 255, .03);
  color: #eaf1ff !important;
  font-weight: 600;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.accordion-body {
  background: rgba(0, 0, 0, .15);
  color: #d8e2ff;
}

/* Testimonios */
.testimonio-card .testimonio-content {
  font-size: 1.05rem;
  color: #e8eeff;
  line-height: 1.6;
}

.testimonio-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.author-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}

.author-info h4 {
  margin: 0 0 2px 0;
}

.author-info p {
  margin: 0;
  color: var(--muted);
}

/* Equipo */
.docente-card {
  padding: 18px 18px 20px;
}

.docente-foto {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}

.docente-cred {
  color: #b7c5ff;
}

/* Policies */
.policies {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.policy-badge {
  display: inline-block;
  padding: .35rem .6rem;
  font-size: .8rem;
  border-radius: 999px;
  background: rgba(10, 132, 255, .18);
  color: #cfe1ff;
  border: 1px solid #244d8a;
}

/* Financiación */
.logos-pago {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.8rem;
  color: #cfe1ff;
}

/* Sub-hero (mini hero con parallax) */
.sub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 10vw, 96px) 0 clamp(28px, 4vw, 40px);
}

.sub-hero .container {
  position: relative;
  z-index: 2;
}

.sub-hero h1 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem);
  margin: 0 0 8px;
  letter-spacing: .3px;
  background: linear-gradient(180deg, #ffffff, #c9ddff);
  -webkit-background-clip: text;
  color: transparent;
}

.sub-hero p {
  color: #c3ccef;
  max-width: 720px;
}

/* decor */
.sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 300px at 20% -10%, rgba(99, 126, 255, .35), transparent 60%),
    radial-gradient(700px 300px at 80% -10%, rgba(100, 174, 255, .28), transparent 60%);
  z-index: 1;
}

.sub-hero::after {
  content: "";
  position: absolute;
  inset: -20% -5% auto -5%;
  height: 120%;
  background: radial-gradient(60% 60% at 50% 20%, rgba(10, 132, 255, .2), transparent 70%);
  filter: blur(40px);
  z-index: 1;
  opacity: .7;
}

/* Footer */
footer {
  position: relative;
  margin-top: 60px;
  background:
    radial-gradient(800px 300px at 20% -10%, rgba(40, 60, 120, .35), transparent 60%),
    linear-gradient(180deg, #0d1222, #0a0e1b);
  border-top: 1px solid var(--border);
}

.footer-content {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  padding: 46px 0;
}

@media (max-width: 960px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-content {
    grid-template-columns: 1fr;
  }
}

.footer-column h4 {
  margin-top: 0;
}

.footer-column p,
.footer-column li,
.footer-column a {
  color: #d6dfff;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin: 6px 0;
}

.footer-column a:hover {
  color: #fff;
}

.social-icons a {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-right: 8px;
  background: rgba(255, 255, 255, .03);
}

.social-icons a:hover {
  background: rgba(255, 255, 255, .08);
}

.review-badge {
  border: 1px solid var(--border);
}

/* Reveal on scroll */
[data-anim] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-anim].in-view {
  opacity: 1;
  transform: none;
}

/* 3D tilt hover (small) */
.tiltable {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease;
}

.tiltable .tilt-shadow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 10%, transparent, rgba(0, 0, 0, .35));
  opacity: .0;
  transition: opacity .25s;
  pointer-events: none;
}

.tiltable:hover .tilt-shadow {
  opacity: .15;
}

/* Fix Bootstrap focus outline in dark */
button:focus,
.btn:focus,
.accordion-button:focus {
  outline: none;
  box-shadow: none;
}

/* Helpers */
.muted {
  color: var(--muted);
}

/* =========================
   Nuevos estilos del index.php
   ========================= */

/* Hero con Parallax */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 96px 0;
  isolation: isolate;
}

.hero .hero-parallax {
  position: absolute;
  inset: -10% -10% -10% -10%;
  background:
    radial-gradient(600px 350px at 80% 10%, rgba(0, 122, 255, .18), transparent 60%),
    radial-gradient(700px 420px at 10% 20%, rgba(0, 122, 255, .14), transparent 60%),
    radial-gradient(500px 500px at 50% 100%, rgba(255, 255, 255, .06), transparent 60%);
  transform: translateY(0);
  z-index: -1;
  will-change: transform;
  pointer-events: none;
}

.hero-content {
  max-width: 780px;
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: .7rem;
  text-shadow: 0 2px 20px rgba(255, 255, 255, .08);
}

.hero p {
  color: #d2d2d6;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  margin-bottom: 1.2rem;
}

.hero-buttons {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Cursos Grid */
.cursos {
  padding: 10px 0 40px;
}

.cursos-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}

@media (max-width: 1199px) {
  .cursos-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 767px) {
  .cursos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.curso-card {
  grid-column: span 4;
  transform: translateY(0) scale(1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  backdrop-filter: blur(10px) saturate(130%);
}

@media (max-width: 991px) {
  .curso-card {
    grid-column: span 4;
  }
}

.curso-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

.curso-img {
  height: 190px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
}

.curso-content {
  padding: 16px;
}

.curso-content h3 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
}

.curso-content p {
  color: #d6d6da;
  margin: 0 0 .75rem;
  min-height: 48px;
}

.curso-meta {
  display: flex;
  gap: 1rem;
  color: var(--muted);
  font-size: .95rem;
  margin: .2rem 0 .6rem;
}

.cupos {
  color: #cfd0d4;
  font-weight: 600;
  margin-bottom: .8rem;
}

.curso-buttons {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.curso-tag {
  position: absolute;
  margin: .6rem;
  z-index: 2;
  background: rgba(0, 122, 255, .15);
  color: #dce9ff;
  border: 1px solid rgba(0, 122, 255, .35);
  padding: .32rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: blur(6px) saturate(140%);
}

/* Modal Temario */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 3, 5, .55);
  backdrop-filter: blur(8px) saturate(140%);
  z-index: 1000;
  padding: 20px;
  pointer-events: none;
}

.modal[style*="display: flex"],
.modal[aria-hidden="false"] {
  display: flex;
  pointer-events: auto;
}

.modal-content {
  width: min(820px, 96vw);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .05));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  color: var(--text);
  padding: 22px 22px 16px;
  transform: scale(.96) translateY(10px);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}

.modal[style*="display: flex"] .modal-content {
  transform: none;
  opacity: 1;
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 14px;
  font-size: 1.4rem;
  cursor: pointer;
  color: #d7d7db;
}

#modal-titulo {
  margin: 0 0 .6rem;
}

#modal-contenido {
  max-height: 60vh;
  overflow: auto;
  padding-right: 6px;
}

.temas-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tema-item {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .6rem .4rem;
  border-bottom: 1px dashed rgba(255, 255, 255, .08);
}

/* ícono azul alineado (aplica también si no se usa .tema-icon explícito) */
.tema-item i {
  color: var(--ios-blue);
  margin-top: .2rem;
}

/* extra: si el JS añade .tema-icon, reforzamos */
.tema-icon {
  color: var(--ios-blue);
  margin-top: .2rem;
  flex: 0 0 auto;
}

.tema-title {
  font-weight: 700;
}

.tema-desc {
  color: #d2d2d6;
  font-size: .98rem;
}

/* Inscripción */
.inscripcion {
  padding: 64px 0 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02) 60%, transparent);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.section-title--light h2 {
  color: #f7f7fa;
}

.inscripcion-container {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.inscripcion-form {
  flex: 1 1 680px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .04));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(140%);
}

.inscripcion-form h3 {
  margin: 0 0 .8rem;
}

.form-row {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

.form-group {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  color: #dadadd;
  margin: .25rem 0 .35rem;
}

.form-group input,
.form-group select {
  background: #0f1013;
  color: #f1f1f5;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: .7rem .85rem;
  outline: none;
  transition: border .2s var(--ease), box-shadow .2s var(--ease);
}

.form-group input:focus,
.form-group select:focus {
  border-color: #3c74ff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .18);
}

.file-upload-container {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

.file-upload-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .55rem .8rem;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
}

.file-name {
  color: #bfc1c7;
  font-size: .9rem;
}

#resumen-montos {
  background: rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px);
  color: #e8e8ec;
}

/* Ubicación */
.ubicacion {
  padding: 70px 0;
}

.mapa-embed {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.mapa-embed iframe {
  filter: saturate(1.05) contrast(1.05);
}

/* Animaciones Reveal mejoradas */
.reveal {
  opacity: 0;
  transform: translateY(14px) scale(.98);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .65s ease-out, transform .75s var(--ease), filter .6s;
}

/* Animaciones Hero específicas */
.hero-title {
  opacity: 0;
  transform: translateX(-32px);
}

.hero-title.is-in {
  animation: heroSlideIn .8s var(--ease) forwards;
}

@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-subtitle {
  min-height: 1.2em;
  position: relative;
}

.hero-subtitle.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #fff;
  margin-left: 3px;
  animation: caretBlink .8s steps(1) infinite;
  vertical-align: -2px;
}

@keyframes caretBlink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.hero-buttons .hero-btn {
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

.hero-buttons .hero-btn.is-in {
  animation: dropBounce .8s var(--ease) forwards;
}

@keyframes dropBounce {
  0% { opacity: 0; transform: translateY(-26px) scale(.98); }
  60% { opacity: 1; transform: translateY(6px); }
  80% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in { transition: none; }
  .hero .hero-parallax { transform: none !important; }
  .hero-title,
  .hero-buttons .hero-btn { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-subtitle.typing::after { display: none !important; }
}

/* ======= OVERRIDE · Cursos (FULL WIDTH 4/2/1) ======= */

/* Full width real para la sección de cursos */
.cursos .container-fluid{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Acolchonado solo del título y la grilla */
.cursos .section-title{
  padding-left:16px;
  padding-right:16px;
}

/* Forzar GRID 4/2/1 (móvil 1, tablet 2, desktop 4) */
.cursos .cursos-grid{
  display: grid !important;
  grid-template-columns: 1fr; /* móvil */
  gap: 22px;
  width: 100%;
  padding-left:16px;
  padding-right:16px;
}

/* TABLET */
@media (min-width:576px){
  .cursos .cursos-grid{ grid-template-columns: repeat(2,1fr); }
}

/* DESKTOP */
@media (min-width:992px){
  .cursos .cursos-grid{ grid-template-columns: repeat(4,1fr); }
}

/* Anular el span artificial que forzaba 3/2/1 */
.cursos .cursos-grid > .curso-card{
  grid-column: auto !important;
  min-width: 0;
}