/* Paleta violeta (--ma-violet-*) en css/brand-tokens.css (global). */
#hero-animation {
  margin: 0;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(61,26,110,0.94) 0%, rgba(109,40,217,0.88) 100%),
    url("../../img/front-pages/backgrounds/hero-software.d15ab44851cf.jpg") center/cover no-repeat;
  color: #fff;
  position: relative;
  overflow: hidden;
}
#hero-animation::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: rgba(167,139,250,0.12);
  top: -150px; right: -100px;
  pointer-events: none;
}
#hero-animation::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(167,139,250,0.08);
  bottom: -80px; left: 10%;
  pointer-events: none;
}

.hero-banner {
  position: relative;
  padding: 64px 0 48px;
  overflow: hidden;
}

.landing-hero { background: none !important; border-radius: 0 !important; padding-top: 0 !important; }
.landing-hero::after { display: none !important; }

.hero-banner-title {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 1rem;
}
.hero-banner-title span {
  color: var(--ma-violet-300);
}
.hero-banner-subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.75rem;
  max-width: 520px;
}

/* Botones del hero (sobre fondo oscuro) */
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  color: var(--ma-violet-700);
  padding: 13px 28px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(109,40,217,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primary:hover {
  color: var(--ma-violet-900);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(109,40,217,0.4);
}
.btn-hero-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  color: #fff;
  padding: 13px 28px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid rgba(255,255,255,0.5);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.btn-hero-secondary:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}
.hero-banner-content .btn { margin-top: 0; }

.hero-microcopy {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
}

.hero-microcopy i { vertical-align: middle; }

/* Mockup de la app en el hero (card 3D + badges flotantes) */
.hero-mockup-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
}
.hero-visual { position: relative; }
.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(30,19,51,.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* Safari < 18 solo entiende la versión con prefijo */
  transform: perspective(1400px) rotateY(-8deg) rotateX(3deg);
  transition: transform .5s ease;
}
.hero-card:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.hero-card img { border-radius: 14px; width: 100%; display: block; }
.hero-float {
  position: absolute;
  background: #fff;
  color: var(--ma-violet-900);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 14px 40px rgba(75,42,156,.16);
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: hero-bob 4s ease-in-out infinite;
}
.hero-float .ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--ma-violet-50);
  color: var(--ma-violet-700);
  flex-shrink: 0;
}
.hero-float .ic svg { width: 20px; height: 20px; }
.hero-float.f1 { top: -18px; left: -26px; }
.hero-float.f2 { bottom: 24px; right: -22px; animation-delay: 1.4s; }
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-float { animation: none; }
  .hero-card { transform: none; }
}

/* Strip de integraciones */
.landing-integrations {
  background: var(--ma-violet-50);
  border-bottom: 1px solid #e5e0f5;
  padding: 18px 0;
}
.landing-integrations .integ-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
}
.landing-integrations .integ-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3D1A6E;
  background: #fff;
  border: 1px solid #d8d0f0;
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}
.landing-integrations .integ-chip i { font-size: 1rem; }

/* Funcionalidades (mock mock-funcionalidades-como-funciona.html): filas compactas */
#landingFeatures {
  background: var(--ma-violet-50) !important;
}
.feature-row-ma {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(109,40,217,0.09);
  box-shadow: 0 2px 10px rgba(109,40,217,0.05);
  transition: box-shadow 0.2s, transform 0.2s;
  height: 100%;
}
.feature-row-ma:hover {
  box-shadow: 0 6px 20px rgba(109,40,217,0.13);
  transform: translateY(-2px);
}
.feature-icon-sm-ma {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: #EDE9FE;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  color: var(--ma-violet-700);
  margin-top: 1px;
}
.feature-row-title-ma { font-size: 0.9rem; font-weight: 700; color: #1E1B2E; margin-bottom: 3px; line-height: 1.3; }
.feature-row-desc-ma { font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
/* Slider de funcionalidades (mobile) */
/* overflow:hidden (default de Swiper) para que el wrapper no desborde el viewport
   en móvil; el contenedor (~92vw) es más ancho que el slide (80vw), así que el
   card siguiente igual asoma sin generar scroll horizontal. */
.feature-swiper-ma { padding-bottom: 40px !important; overflow: hidden !important; }
.feature-swiper-ma .swiper-slide { width: 80vw !important; height: auto; }
.feature-swiper-pagination-ma { bottom: 4px !important; }
.feature-swiper-pagination-ma .swiper-pagination-bullet { background: var(--ma-violet-500); opacity: 0.35; }
.feature-swiper-pagination-ma .swiper-pagination-bullet-active { background: var(--ma-violet-700); opacity: 1; }
/* Separador entre secciones */
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(109,40,217,0.12), transparent); margin: 0; }

/* Banda de stats violeta */
.landing-stats-band {
  background: linear-gradient(135deg, var(--ma-violet-900) 0%, var(--ma-violet-700) 100%);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.landing-stats-band::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(167,139,250,0.1);
  top: -200px; right: -100px;
  pointer-events: none;
}
.landing-stats-band .stat-value {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--ma-violet-300);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.landing-stats-band .stat-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.landing-stats-band .stat-divider {
  width: 1px;
  background: rgba(255,255,255,0.15);
  height: 60px;
  align-self: center;
}
.hero-badge {
    display: inline-block;
    background: rgba(167, 139, 250, 0.2);
    color: var(--ma-violet-300);
    border: 1px solid rgba(167, 139, 250, 0.4);
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
/* ¿Cómo funciona? — stepper (mock mock-funcionalidades-como-funciona.html) */
.how-stepper-ma { display: flex; align-items: flex-start; }
.how-step-ma { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; }
.how-step-circle-ma {
  width: 44px; height: 44px;
  background: var(--ma-violet-700); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  position: relative; z-index: 2; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(109,40,217,0.3);
}
.how-step-connector-ma {
  position: absolute; top: 22px; left: 50%; right: -50%;
  height: 2px;
  background: linear-gradient(90deg, var(--ma-violet-500), var(--ma-violet-300));
  z-index: 1;
}
.how-step-connector-ma.last { display: none; }
.how-step-body-ma { margin-top: 14px; padding: 0 12px; }
.how-step-title-ma { font-size: 0.92rem; font-weight: 700; color: #1E1B2E; margin-bottom: 5px; line-height: 1.3; }
.how-step-desc-ma { font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
.how-cta-btn-ma {
  background: var(--ma-violet-700);
  border: none; border-radius: 10px; font-size: 1rem;
  box-shadow: 0 4px 16px rgba(109,40,217,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.how-cta-btn-ma:hover { background: var(--ma-violet-900); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(109,40,217,0.4); color: #fff; }
@media (max-width: 767.98px) {
  .how-stepper-ma { flex-direction: column; align-items: flex-start; }
  .how-step-ma { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; width: 100%; padding-bottom: 20px; }
  .how-step-connector-ma {
    position: absolute; top: 44px; left: 22px; right: auto;
    width: 2px; height: calc(100% - 44px);
    background: linear-gradient(180deg, var(--ma-violet-500), var(--ma-violet-300));
  }
  .how-step-body-ma { margin-top: 0; padding: 0; padding-top: 8px; }
}


@media (max-width: 991.98px) {
  .hero-banner { padding: 48px 0 40px; text-align: center; }
  .hero-banner-subtitle { margin-left: auto; margin-right: auto; }
  .hero-mockup-col { padding-top: 2rem; }
  .hero-card { transform: none; max-width: 460px; margin: 0 auto; }
  .hero-float.f1 { left: -6px; }
  .hero-float.f2 { right: -6px; }
  .landing-stats-band .stat-divider { display: none; }
}

@media (max-width: 575.98px) {
  .hero-banner { padding: 32px 0 36px; }
  .hero-banner-title { font-size: 2.25rem; }
  .hero-banner-subtitle { font-size: 1rem; }
  .landing-stats-band .stat-value { font-size: 2rem; }
  .landing-integrations .integ-chip { font-size: 0.75rem; padding: 3px 10px; }
  /* Badges flotantes más chicos en móvil: no deben tapar la imagen del mockup. */
  .hero-float { padding: 6px 9px; font-size: 0.68rem; gap: 6px; border-radius: 9px; }
  .hero-float .ic { width: 22px; height: 22px; border-radius: 6px; }
  .hero-float .ic svg { width: 14px; height: 14px; }
  .hero-float.f1 { top: -10px; left: 0; }
  .hero-float.f2 { bottom: 10px; right: 0; }
}

/* ====== Home B2C: vitrina de clases ====== */
.home-section{padding:56px 0;}
.home-section-alt{background:#F5F3FF;}
.home-eyebrow{font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#6D28D9;}
.home-section-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;line-height:1.2;color:#1E1B2E;letter-spacing:-.3px;margin:6px 0 6px;}
.home-section-sub{color:#4b5563;max-width:600px;margin-bottom:6px;}
/* En el teléfono toda la home baja de escala: con los tamaños de escritorio cada
   título ocupaba dos líneas grandes y entre secciones quedaba media pantalla en blanco. */
@media (max-width:575.98px){
  .home-section{padding:32px 0;}
  .home-eyebrow{font-size:.68rem;}
  .home-section-title{font-size:1.3rem;margin:4px 0;}
  .home-section-sub{font-size:.88rem;}
}

/* Sección [B]: disciplinas + Próximos eventos como franja abajo. La vitrina de
   disciplinas (.home-disc-*) vive en front_pages/css/home-disc.css, compartida
   con /clases/. */

/* Franja de eventos bajo las disciplinas: sin caja, separada por una línea, con el
   encabezado centrado. Las tarjetas (.hev-*) son la variante de la home
   (partials/_home_evento_card.html); el carrusel es el .pub-ev-swiper del grid. */
.home-eventos-strip{margin-top:40px;padding-top:32px;border-top:1px solid #ECE9F6;}
.home-eventos-head{margin-bottom:6px;}
.home-eventos-head .home-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;letter-spacing:.14em;margin:0;}
.home-eventos-head .home-eyebrow i{font-size:1.2rem;}
.home-eventos-head .home-section-sub{margin:4px 0 0;}
.hev-card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #ECE9F6;
  border-radius:18px;overflow:hidden;box-shadow:var(--bs-box-shadow);transition:transform .2s,box-shadow .2s;}
.hev-card:hover,.hev-card:focus-within{transform:translateY(-4px);box-shadow:var(--bs-box-shadow-lg);}
.hev-media{position:relative;}
.hev-media img{display:block;width:100%;aspect-ratio:5/2;object-fit:cover;}
/* Sello de fecha sobre la foto: día grande y mes abreviado. */
.hev-date{position:absolute;left:16px;top:16px;display:flex;flex-direction:column;align-items:center;
  background:rgba(124,92,191,.92);color:#fff;border-radius:12px;padding:9px 14px 8px;line-height:1;}
.hev-date strong{font-size:1.45rem;font-weight:800;}
.hev-date small{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;}
.hev-body{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 22px 20px;}
.hev-meta{display:flex;flex-wrap:wrap;gap:6px 24px;color:#5b5670;font-size:.92rem;
  padding-bottom:12px;border-bottom:1px solid #ECE9F6;margin-bottom:12px;}
.hev-meta span{display:inline-flex;align-items:center;gap:7px;}
.hev-meta i{color:#6D28D9;font-size:1.1rem;}
.hev-title{font-size:1.25rem;font-weight:700;line-height:1.3;color:#1E1B2E;margin:0 0 14px;}
.hev-org{display:flex;align-items:center;gap:10px;margin-top:auto;color:#6D28D9;font-weight:600;font-size:.92rem;}
.hev-org img,.hev-ini{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.hev-ini{display:inline-flex;align-items:center;justify-content:center;background:#E9DDFB;color:#6D28D9;font-weight:800;text-transform:uppercase;}

.home-city-wrap{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.home-city-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #E8E3F6;
  border-radius:9999px;padding:10px 16px;text-decoration:none;color:#2b2540;font-weight:600;font-size:.95rem;
  transition:border-color .15s,box-shadow .15s,transform .15s;}
.home-city-chip:hover{border-color:#A78BFA;box-shadow:0 8px 20px rgba(109,40,217,.12);transform:translateY(-2px);color:#6D28D9;}
.home-city-chip i{color:#6D28D9;}

/* Franja "Esta semana" (markup en partials/_home_esta_semana.html). */
/* Cabecera en columna: título y filtros, debajo los días. En fila, los días subían al
   lado del título cuando eran pocos (una disciplina con clases en tres días) y bajaban
   cuando eran siete, y el bloque cambiaba de forma con cada chip. */
.home-semana-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:16px;}
.home-semana-tabs{display:flex;flex-wrap:wrap;gap:8px;}
.home-semana-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;}
.home-semana-cerca{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:9999px;
  border:1.5px solid #D9D3E6;background:#fff;color:#6D28D9;font-weight:600;font-size:.9rem;}
.home-semana-cerca:hover{border-color:#A78BFA;}
.home-semana-cerca.is-activo{background:#F5F3FF;border-color:#6D28D9;}
.home-semana-comuna{width:auto;min-height:40px;border-radius:9999px;font-size:.9rem;padding-top:0;padding-bottom:0;}
.home-semana-comuna[hidden]{display:none;}
.home-semana-estado{color:#5b5670;font-size:.85rem;}
/* Chips de disciplina: en el teléfono una sola fila que se desliza, sin saltar de línea. */
.home-semana-disciplinas{display:flex;gap:8px;margin:0 0 20px;overflow-x:auto;scrollbar-width:none;}
.home-semana-disciplinas::-webkit-scrollbar{display:none;}
.home-semana-chip{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:9999px;border:1.5px solid #D9D3E6;
  background:#fff;color:#1E1B2E;font-weight:600;font-size:.9rem;transition:background .15s,border-color .15s;}
.home-semana-chip:hover{border-color:#A78BFA;}
.home-semana-chip[aria-pressed="true"]{background:#F5F3FF;border-color:#6D28D9;color:#6D28D9;}
.home-semana-nota i{color:#B45309;font-size:.85em;margin-right:2px;}
.home-semana-vacio{color:#5b5670;margin:0 0 8px;}
.home-semana-vacio a{color:#6D28D9;font-weight:600;}
.home-semana-tab{flex:0 0 auto;min-height:44px;padding:0 18px;border-radius:9999px;border:1.5px solid #D9D3E6;
  background:#fff;color:#1E1B2E;font-weight:600;font-size:.95rem;transition:background .15s,border-color .15s;}
.home-semana-tab:hover{border-color:#A78BFA;}
.home-semana-tab[aria-selected="true"]{background:#1E1B2E;border-color:#1E1B2E;color:#fff;}
.home-semana-dia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.home-semana-dia[hidden]{display:none;}
.home-semana-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #ECE9F6;border-radius:18px;padding:18px;}
.home-semana-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.home-semana-hora{font-size:1.35rem;font-weight:800;color:#1E1B2E;}
.home-semana-disc{font-size:.8rem;font-weight:600;color:#5b5670;background:#F5F3FF;border-radius:9999px;padding:4px 10px;}
.home-semana-clase{font-size:1.05rem;font-weight:700;line-height:1.3;margin:0;}
.home-semana-clase a{color:#1E1B2E;text-decoration:none;}
.home-semana-clase a:hover{color:#6D28D9;}
.home-semana-lugar{color:#5b5670;font-size:.9rem;margin:0 0 8px;}
.home-semana-lugar a{color:inherit;text-decoration:none;}
.home-semana-lugar a:hover{color:#6D28D9;text-decoration:underline;}
.home-semana-cupos{font-size:.9rem;font-weight:600;color:#B45309;margin:0 0 8px;}
.home-semana-cupos.is-llena{color:#5b5670;}
.home-semana-btn{margin-top:auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-weight:600;}
.home-semana-todas{display:inline-flex;align-items:center;gap:6px;margin-top:22px;min-height:44px;font-weight:600;color:#6D28D9;text-decoration:none;}
.home-semana-todas:hover{color:#3D1A6E;}
@media (max-width:991.98px){
  .home-semana-dia{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:575.98px){
  /* Teléfono: es lo primero de la home, así que sube y se compacta; con los tamaños de
     escritorio el título, cuatro filas de botones y una tarjeta llenaban la pantalla.
     Días y disciplinas van en una fila que se desliza cada uno. */
  .home-semana{padding-top:24px;}
  .home-semana-head{gap:10px;margin-bottom:10px;}
  .home-semana-filtros{margin-top:6px;gap:6px 10px;}
  .home-semana-cerca{min-height:34px;padding:0 12px;font-size:.8rem;}
  .home-semana-comuna{min-height:34px;font-size:.8rem;}
  .home-semana-estado{font-size:.75rem;}
  .home-semana-tabs{flex-wrap:nowrap;width:100%;gap:6px;overflow-x:auto;scrollbar-width:none;}
  .home-semana-tabs::-webkit-scrollbar{display:none;}
  .home-semana-tab{min-height:34px;padding:0 12px;font-size:.8rem;}
  .home-semana-disciplinas{gap:6px;margin-bottom:12px;}
  .home-semana-chip{min-height:30px;padding:0 11px;font-size:.78rem;}
  /* Cada horario es una fila: hora a la izquierda, botón a la derecha. */
  .home-semana-dia{grid-template-columns:minmax(0,1fr);gap:8px;}
  .home-semana-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"top clase btn" "top lugar btn" "top cupos btn";
    column-gap:12px;row-gap:1px;align-items:center;padding:10px 12px;border-radius:14px;}
  .home-semana-top{grid-area:top;flex-direction:column;align-items:flex-start;gap:0;margin:0;}
  .home-semana-hora{font-size:.98rem;}
  .home-semana-disc{background:none;padding:0;font-size:.7rem;}
  .home-semana-clase{grid-area:clase;font-size:.86rem;}
  .home-semana-lugar{grid-area:lugar;font-size:.74rem;margin:0;}
  .home-semana-cupos{grid-area:cupos;font-size:.74rem;margin:0;}
  .home-semana-btn{grid-area:btn;margin:0;min-height:36px;padding:0 12px;font-size:.8rem;border-radius:10px;}
  .home-semana-todas{margin-top:10px;min-height:40px;font-size:.86rem;}
}

/* Tarjetas de estudios (markup en partials/_home_estudios.html). */
.home-estudios-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:22px;}
.home-estudio-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ECE9F6;border-radius:20px;}
.home-estudio-cuerpo{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1;}
.home-estudio-head{display:flex;align-items:center;gap:14px;min-width:0;}
.home-estudio-titulo{min-width:0;}
.home-estudio-inicial{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:14px;background:#F1ECFA;color:#6D28D9;font-size:1.5rem;font-weight:800;}
/* "Primera clase gratis": solo sale si la clase de prueba es gratis. Verde y con regalo
   para que se distinga de la nota y la comuna. */
.home-estudio-gratis{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;margin:0;
  padding:3px 10px;border-radius:9999px;background:#ECFDF5;color:#047857;font-size:.8rem;font-weight:700;}
.home-estudio-gratis i{font-size:1rem;}
.home-estudio-nombre{font-size:1.15rem;font-weight:700;line-height:1.3;margin:0;}
.home-estudio-nombre a{color:#1E1B2E;text-decoration:none;}
.home-estudio-nombre a:hover{color:#6D28D9;}
.home-estudio-disc{color:#5b5670;font-size:.9rem;margin:0;}
.home-estudio-datos{display:flex;flex-wrap:wrap;gap:6px 16px;color:#1E1B2E;font-size:.9rem;margin:0 0 4px;}
.home-estudio-datos > span{display:inline-flex;align-items:center;gap:5px;}
.home-estudio-datos i{color:#6D28D9;}
.home-estudio-datos .home-estudio-estrella{color:#B45309;}
.home-estudio-btn{margin-top:auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-weight:600;}
@media (max-width:991.98px){
  .home-estudios-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:575.98px){
  /* En el teléfono, una tarjeta por fila y todo más chico. */
  .home-estudios-grid{grid-template-columns:minmax(0,1fr);gap:12px;}
  .home-estudio-card{border-radius:16px;}
  .home-estudio-cuerpo{padding:12px;gap:6px;}
  .home-estudio-head{gap:10px;}
  .home-estudio-inicial{width:40px;height:40px;border-radius:11px;font-size:1.15rem;}
  .home-estudio-gratis{padding:2px 8px;font-size:.72rem;}
  .home-estudio-gratis i{font-size:.9rem;}
  .home-estudio-nombre{font-size:.9rem;}
  .home-estudio-disc,.home-estudio-datos{font-size:.76rem;}
  .home-estudio-datos{margin-bottom:2px;}
  .home-estudio-btn{min-height:34px;font-size:.8rem;border-radius:10px;}
}

/* "Reservar una clase por primera vez" (partials/_home_reservar.html). */
.home-reservar{background:#1E1B2E;}
.home-reservar .home-section-title{color:#fff;}
.home-reservar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:24px;}
.home-reservar-item i{font-size:1.8rem;color:#C4B5FD;}
.home-reservar-item h3{font-size:1.1rem;font-weight:700;color:#fff;line-height:1.35;margin:12px 0 8px;}
.home-reservar-item p{color:#CFC8E0;font-size:.95rem;line-height:1.55;margin:0;}
@media (max-width:767.98px){
  .home-reservar-grid{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px;}
  .home-reservar-item i{font-size:1.4rem;}
  .home-reservar-item h3{font-size:.95rem;margin:6px 0 4px;}
  .home-reservar-item p{font-size:.84rem;}
}

/* Puente a /software para quien da clases (partials/_home_puente_software.html). */
.home-puente{border-top:1px solid #ECE9F6;padding:28px 0;}
.home-puente-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;}
.home-puente p{margin:0;color:#1E1B2E;font-size:1rem;}
.home-puente-btn{min-height:44px;display:inline-flex;align-items:center;border-radius:12px;font-weight:600;}

.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;}
.home-stat{background:#fff;border:1px solid #E8E3F6;border-radius:16px;padding:24px 18px;text-align:center;}
.home-stat .n{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:800;color:#3D1A6E;line-height:1;}
.home-stat .l{margin-top:6px;color:#6b7280;font-size:.92rem;}

@media (max-width:991.98px){
  .home-eventos-strip{margin-top:30px;padding-top:26px;}
}
/* En el teléfono las disciplinas no van (landing_page.html): los eventos quedan
   solos en su sección y no necesitan la línea que los separaba de ellas. */
@media (max-width:575.98px){
  .home-disc-eventos .home-eventos-strip{margin-top:0;padding-top:0;border-top:none;}
}
@media (max-width:575.98px){
  .hev-media img{aspect-ratio:16/9;}
  .hev-body{padding:14px 16px 16px;}
}
@media (max-width:767.98px){
  .home-stats{grid-template-columns:repeat(2,1fr);}
  /* Los dos botones de eventos, lado a lado y del mismo ancho. */
  .home-eventos-acts{width:100%;}
  .home-eventos-acts .btn{flex:1 1 0;}
}