/* Estilos para la página de inicio */

/* Variables CSS globales */
:root
{
  --primary:#C14B36;
  --bg:#FFFCF9;
  --text:#333;
  --muted:#666;
  --card:#FFFFFF;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

/* Estilos del body principal */
body
{
  font-family:'Roboto',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Header de la página de inicio */
.landing-header
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(0,0,0,.05);
}

/* Contenedor del logo */
.app-logo
{ 
  display:flex; 
  align-items:center; 
}

/* Imagen del logo */
.app-logo .logo-image
{ 
  height:36px; 
  width:auto; 
  display:block; 
}

/* Enlaces de navegación */
.landing-nav a
{
  margin:0 10px;
  color:var(--text);
  text-decoration:none;
  font-weight:500;
}

/* Hover de los enlaces de navegación */
.landing-nav a:hover
{ 
  color:var(--primary); 
}

/* Botón principal */
.primary-btn
{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition:.25s ease;
  background:var(--primary); 
  color:#fff; 
  box-shadow:var(--shadow); 
}

/* Hover del botón principal */
.primary-btn:hover
{ 
  transform:translateY(-2px); 
  filter:brightness(.95); 
}

/* Variante grande del botón principal */
.primary-btn.lg
{ 
  padding:14px 22px; 
  font-size:1.05rem; 
}

/* Variante pequeña del botón principal */
.primary-btn.sm
{ 
  padding:8px 12px; 
  font-size:.95rem; 
}

/* Ícono dentro del botón */
.primary-btn .btn-icon
{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* Ícono en botón grande */
.primary-btn.lg .btn-icon
{
  width: 28px;
  height: 28px;
}

/* Sección del hero */
.hero
{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  max-width:1100px;
  margin:32px auto 0;
  padding:24px;
  align-items:center;
}

/* Título principal del hero */
.hero-content h1
{
  font-size:2.4rem;
  line-height:1.2;
  margin:10px 0 14px;
  color:var(--primary);
}

/* Párrafo del hero */
.hero-content p
{ 
  vertical-align: center;
  color:var(--muted); 
  font-size:1.1rem; 
}

/* Botón de call-to-action del hero */
.hero-cta
{ 
  margin-top:18px; 
  display:flex; 
  gap:12px; 
  flex-wrap:wrap; 
}

/* Badges del hero */
.hero-badges
{ 
  margin-top:14px; 
  color:var(--muted); 
  display:flex; 
  gap:16px;
  flex-wrap:wrap; 
  font-size:.95rem; 
}

/* Iconos de los badges del hero */
.hero-badges i
{ 
  color:var(--primary); 
}

/* Imagen del hero */
.hero-art
{ 
  border-radius:20px; 
  background-image:url('../img/home.svg'); 
  background-size:contain; 
  background-repeat:no-repeat; 
  background-position:center;
  min-height:300px; 
  aspect-ratio:4507/5001; 
}

/* Título de sección */
.section-title
{
  font-size:1.8rem;
  font-weight:6x00;
  color:var(--primary);
  text-align:center;
  margin:40px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Ícono en título de sección */
.section-title .section-icon
{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* Sección de características */
.features
{ 
  max-width:1100px;
  margin:0 auto; 
  padding:0 24px 10px; 
}

/* Grilla de características */
.features-grid
{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

/* Tarjeta de característica */
.feature-card
{
  background:var(--card);
  border-radius:14px;
  padding:20px;
  box-shadow:var(--shadow);
}

/* Icono de característica */
.feature-icon
{ 
  font-size:1.6rem; 
  color:var(--primary);
  width: 48px;
  height: 48px;
  display: block;
}

/* Título de la tarjeta de característica */
.feature-card h3
{ 
  margin:10px 0 8px; 
}

/* Párrafo de la tarjeta de característica */
.feature-card p
{ 
  color:var(--muted); 
}

/* Lista de puntos de características */
.feature-points
{
  margin:8px 0 0;
  padding-left:20px;
  color:var(--muted);
  line-height:1.5;
  list-style:disc;
}

/* Elementos de la lista de características */
.feature-points li
{ 
  margin:6px 0; 
}

/* Descripción de características (párrafo sin sangría) */
.feature-description
{
  margin:8px 0 0;
  padding:0;
  color:var(--muted);
  line-height:1.6;
  text-align:left;
}

/* Sección de cómo funciona */
.how-it-works
{ 
  max-width:1100px; 
  margin:0 auto; 
  padding:0 24px; 
}

/* Contenedor de pasos */
.steps
{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); 
  gap:18px; 
}

/* Tarjeta de paso individual */
.step
{ 
  background:var(--card); 
  border-radius:14px; 
  padding:20px; 
  box-shadow:var(--shadow); 
}

/* Número del paso */
.step-number
{ 
  width:36px; 
  height:36px; 
  display:grid; 
  place-items:center; 
  border-radius:50%; 
  background:var(--primary); 
  color:#fff; 
  font-weight:800;
  margin-bottom:12px;
}

/* Sección de cursos del landing */
.landing-courses
{ 
  max-width:1100px; 
  margin:0 auto; 
  padding:0 24px; 
}

/* Carrusel de cursos */
.landing-courses-carousel
{ 
  position:relative; 
  overflow:hidden; 
}

/* Pista del carrusel de cursos */
.landing-courses-track
{ 
  display:flex; 
  gap:16px; 
  overflow-x:auto; 
  scroll-behavior:auto; 
  padding:6px 2px 10px; 
  cursor:grab; 
  scrollbar-width:none; 
}

/* Estado de arrastre del carrusel */
.landing-courses-track.dragging
{ 
  cursor:grabbing; 
  user-select:none; 
}

/* Ocultar scrollbar del carrusel */
.landing-courses-track::-webkit-scrollbar
{ 
  display:none; 
}

/* Tarjeta de curso del landing */
.landing-course-card
{ 
  background:var(--card); 
  border:1px solid rgba(0,0,0,.06); 
  border-radius:14px; 
  padding:0 0 14px; 
  box-shadow:var(--shadow); 
  display:flex; 
  flex-direction:column; 
  min-width:320px; 
  max-width:320px; 
}

/* Miniatura del curso */
.landing-course-card .course-thumb
{ 
  width:100%; 
  border-radius:14px 14px 0 0; 
  background:#fff; 
  display:block; 
}

/* Imagen de la miniatura del curso */
.landing-course-card .course-thumb img
{ 
  width:100%; 
  height:auto; 
  display:block; 
  background:#fff; 
}

/* Header de la tarjeta de curso */
.landing-course-card .course-card-header
{ 
  display:flex; 
  align-items:center; 
  gap:8px; 
  padding:8px 14px 0; 
}

/* Icono del header de la tarjeta */
.landing-course-card .course-card-header i
{ 
  color:var(--primary); 
  font-size:1.1rem; 
  line-height:1; 
  display:inline-flex; 
  align-items:center; 
}

/* Título del curso */
.landing-course-card .course-title
{ 
  margin:0; 
  font-size:1.05rem; 
}

/* Descripción del curso */
.landing-course-card .course-desc
{ 
  margin:0 14px; 
  color:var(--muted); 
}

/* Metadatos del curso */
.landing-course-card .course-meta
{ 
  color:var(--primary); 
  font-weight:600; 
  font-size:.9rem;
  margin:6px 14px 0; 
}

/* Media queries para móvil vertical */
@media screen and (max-width: 767px) and (orientation: portrait)
{
  /* Ocultar navbar en móvil vertical para maximizar espacio */
  .landing-nav
  {
    display: none !important;
  }
  
  /* Header compacto en móvil vertical */
  .landing-header
  {
    padding: 10px 15px;
  }
  
  /* Logo más pequeño en móvil vertical */
  .app-logo .logo-image
  {
    height: 30px;
  }
  
  /* Botón de iniciar sesión táctil */
  .header-buttons .primary-btn
  {
    padding: 12px 16px;
    font-size: 0.95rem;
    min-height: 44px;
  }
  
  /* Hero adaptado para móvil vertical */
  .hero
  {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px auto 0;
    padding: 16px;
  }
  
  /* Título del hero más pequeño */
  .hero-content h1
  {
    font-size: 2rem;
  }
  
  /* Ajuste del carrusel de cursos */
  .landing-course-card
  { 
    min-width: 280px; 
    max-width: 280px; 
  }
}

/* Media queries para móvil horizontal */
@media screen and (max-width: 767px) and (orientation: landscape)
{
  /* Ocultar navbar en móvil horizontal para maximizar altura */
  .landing-nav
  {
    display: none !important;
  }
  
  /* Header ultra compacto en móvil horizontal */
  .landing-header
  {
    padding: 8px 15px;
  }
  
  /* Logo muy pequeño en móvil horizontal */
  .app-logo .logo-image
  {
    height: 28px;
  }
  
  /* Botón compacto pero táctil */
  .header-buttons .primary-btn
  {
    padding: 8px 12px;
    font-size: 0.9rem;
    min-height: 36px;
  }
  
  /* Hero muy compacto para móvil horizontal */
  .hero
  {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px auto 0;
    padding: 12px;
  }
  
  /* Título del hero compacto */
  .hero-content h1
  {
    font-size: 1.8rem;
    margin: 8px 0 10px;
  }
  
  /* Párrafo del hero compacto */
  .hero-content p
  {
    font-size: 1rem;
  }
  
  /* Ajuste del carrusel de cursos */
  .landing-course-card
  { 
    min-width: 240px; 
    max-width: 240px; 
  }
}

/* Media queries para tablets */
@media (max-width: 900px)
{
  /* Hero */
  .hero
  { 
    grid-template-columns:1fr; 
  }
  
  /* Ajuste del logo para tablets */
  .app-logo .logo-image
  { 
    height:36px; 
  }
}

/* ====================================================================================================
   CALL TO ACTION SECTION
   ==================================================================================================== */

/* Sección CTA */
.cta-section
{
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 0 24px;
}

/* Efecto de fondo animado */
.cta-container::before
{
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 20s infinite ease-in-out;
  z-index: 0;
}

.cta-container::after
{
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 15s infinite ease-in-out reverse;
  z-index: 0;
}

@keyframes float
{
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(10px); }
}

/* Contenedor del CTA */
.cta-container
{
  width: 100%;
  padding: 50px 40px 50px;
  text-align: center;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #C14B36 0%, #E85A4F 100%);
  border-radius: 20px;
  overflow: hidden;
}

/* Icono del CTA */
.cta-icon
{
  font-size: 3rem;
  color: white;
  margin-bottom: 15px;
  animation: bounce 2s infinite;
  position: relative;
  z-index: 1;
}

/* Imagen dentro del icono del CTA */
.cta-icon img
{
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
}

@keyframes bounce
{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Título del CTA */
.cta-title
{
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin-bottom: 15px;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* Descripción del CTA */
.cta-description
{
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 25px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Contenedor de botones */
.cta-buttons
{
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Botones del CTA */
.cta-button
{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 35px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Ícono dentro del botón CTA */
.cta-button .cta-btn-icon
{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Botón primario */
.cta-button.primary
{
  background: white;
  color: #C14B36;
}

.cta-button.primary:hover
{
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background: #f8f8f8;
}

/* Botón secundario */
.cta-button.secondary
{
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid white;
  backdrop-filter: blur(10px);
}

.cta-button.secondary:hover
{
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Características destacadas */
.cta-features
{
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}

/* Característica individual */
.cta-feature
{
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
}

.cta-feature i
{
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive para CTA */
@media (max-width: 768px)
{
  .cta-section
  {
    padding: 40px 20px;
  }
  
  .cta-container
  {
    padding: 40px 24px;
    border-radius: 15px;
  }
  
  .cta-icon
  {
    font-size: 3rem;
  }
  
  .cta-title
  {
    font-size: 1.8rem;
  }
  
  .cta-description
  {
    font-size: 1rem;
  }
  
  .cta-buttons
  {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-button
  {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  .cta-features
  {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 480px)
{
  .cta-title
  {
    font-size: 1.5rem;
  }
  
  .cta-description
  {
    font-size: 0.95rem;
  }
  
  .cta-button
  {
    padding: 12px 25px;
    font-size: 1rem;
  }
}