/* ============================================
  STYLES.CSS - Estilos de componentes y secciones
  =================================================================
  Propósito: Hoja de estilos principal que define la apariencia visual
  de todas las secciones y componentes de la página es-home
  
  Características técnicas:
  - Enfoque Mobile-first: Base diseñado para 480px, luego se adapta a pantallas más grandes
  - Sistema de diseño: Utiliza variables CSS definidas en variables.css
  - Pixel Perfect: Alineación precisa según diseño en ./design/0-es-Home-1920px.jpg
  
  Dependencias:
  - reset.css: Normalización de estilos base
  - variables.css: Variables CSS (colores, espaciados, tipografías)
  - global.css: Estilos globales yutilidades base
  
  Orden de carga: Este archivo debe cargarse después de los archivos
  de variables y reset para sobrescribir estilos base
  ============================================ */

/* Importación de dependencias en orden específico */
@import url("reset.css");
@import url("variables.css");
@import url("global.css");

/* ============================================
  SISTEMA BASE DE SECCIONES
  ============================================ */
.section {
  width: 100%;
  position: relative;
  padding: var(--spacing-64px) 0;
}

.section__inner {
  width: min(70%, var(--breakpoint-large, 1380px));
  max-width: 1380px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section--light {
  background-color: var(--color-blanco);
  color: var(--color-ebano);
}

.section--warm {
  background-color: var(--color-cream-light);
  color: var(--color-ebano);
}

.section--dark {
  background-color: var(--color-ebano);
  color: var(--color-crema);
}

.section--gradient {
  background: linear-gradient(135deg, var(--color-ambar) 0%, #e07410 100%);
  color: var(--color-blanco);
}

/* ============================================
  GRID SYSTEM
  ============================================ */
.grid {
  display: grid;
  position: relative;  
  z-index: 2;
  max-width: 100%;
  /*max-width
  : 1380px;*/
  margin: 0 auto;
  width: 100%;
  align-items: center;
}

@media (max-width: 768px) {
  .grid {
    gap: var(--spacing-24px);
  }
}

.grid--2cols,
.grid--3cols,
.grid--4cols {
  display: grid;
  gap: 56x; /* Ajusta según tu diseño */
  align-items: stretch; /* Esto obliga a todas las cards a medir lo mismo de alto */
}

@media (min-width: 768px) {
  .grid--2cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--2cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid--compact {
  gap: var(--spacing-24px);
}

@media (min-width: 768px) {
  .grid--compact {
    gap: var(--spacing-32px);
  }
}

.grid--spacious {
  gap: var(--spacing-48px);
}

@media (min-width: 768px) {
  .grid--spacious {
    gap: var(--spacing-56px);
  }
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ============================================
  SISTEMA DE BOTONES (.btn)
  ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24px) var(--spacing-32px);
  font-family: var(--font-primary);
  /*font-size: var(--font-size-14);*/
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: 22px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-base {
  height: 3rem;
  /* O usar una variable nueva como --btn-height */
  width: 16rem;
  /* Permitir que el ancho se ajuste al contenido */
  padding: 0 var(--spacing-32px);
  /* Remover padding vertical */
  line-height: 56px;
  /* Igualar a la altura */
  font-size: var(--font-size-16);
}

.btn--primary {
  background-color: var(--color-ambar);
  color: var(--color-blanco);
  border-color: var(--color-ambar);
}

.btn--primary:hover {
  background-color: #e07410;
  border-color: #e07410;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-blanco);
  border-color: var(--color-blanco);
}

.btn--secondary:hover {
  background-color: var(--color-blanco);
  color: var(--color-ebano);
}

.btn--dark {
  background-color: var(--color-ebano);
  color: var(--color-blanco);
  border-color: var(--color-ebano);
}

.btn--dark:hover {
  background-color: var(--color-crema);
  color: var(--color-ebano);
  border-color: var(--color-crema);
}

.btn--light {
  background-color: transparent;
  border-color: var(--color-ebano);
  color: var(--color-ebano);
  border-color: var(--color-blanco);
}

.btn--light:hover {
  background-color: var(--color-ebano);
  color: var(--color-cream-light);
  border-color: var(--color-ebano);
}

.btn--small {
  padding: 0.5rem var(--spacing-24px);
  font-size: var(--font-size-14);
}

.btn--large {
  padding: var(--spacing-24px) var(--spacing-48px);
  font-size: var(--font-size-18);
}

.ml-sm {
  margin-left: var(--spacing-16px);
}

.mt-lg {
  margin-top: var(--spacing-32px);
}

/* ============================================
  SECTION HEADER
  ============================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-56px);
}

.section-header__uptitle {
  display: inline-block;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ambar);
  margin-bottom: var(--spacing-16px);
}

.section-header__title {
  /*  display: flex;                /* Activa Flexbox para alinear hijos en línea */
  /*  align-items: center;  
 Tus estilos originales */
  font-size: var(--font-size-68);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-24px);
  color: var(--color-ebano);
}

.section-header__subtitle34 {
  font-size: var(--font-size-34);
  line-height: var(--line-height-relaxed);
  max-width: 1280px;
  margin: 0 auto;
  color: var(--color-terrosa);
}

.section-header__description {
  /*font-size: var(--font-size-28);*/
  line-height: var(--line-height-relaxed);
  max-width: 1280px;
  margin: 0 auto;
  color: var(--color-terrosa);
}

.section-header__description28 {
  font-size: var(--font-size-28);
  line-height: var(--line-height-relaxed);
  max-width: 1280px;
  margin: 0 auto;
  color: var(--color-terrosa);
}

.section-header__parraph24 {
  font-size: var(--font-size-24);
  line-height: var(--line-height-relaxed);
  max-width: 970px;
  margin: 0 auto;
  color: var(--color-terrosa);
}

@media (max-width: 768px) {
  .section-header__title {
    font-size: var(--font-size-30);
  }

  .section-header__description {
    font-size: var(--font-size-16);
  }
}

/* ============================================
  HERO SECTION
  ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero--with-bg {
  min-height: 100vh;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__overlay--gradient {
  background: linear-gradient(
    135deg,
    rgba(27, 27, 27, 0.85) 0%,
    rgba(27, 27, 27, 0.7) 100%
  );
}


.hero__badge {
  display: inline-flex;
  align-items: center;
  background-color: rgba(248, 132, 16, 0.15);
  color: var(--color-ambar);
  padding: var(--spacing-8px) var(--spacing-24px);
  border-radius: 50px;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-32px);
  border: 1px solid rgba(248, 132, 16, 0.3);
}

/* Hero fijo 400px */
.hero--fixed-400 {
  height: 440px;
  min-height: 440px;
}

/*======= HERO =========*/
/*.hero__content {
  max-width: 1440px;
  padding: var(--spacing-64px) var(--spacing-32px);
}*/
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1440px;
  padding: var(--spacing-56px) var(--spacing-32px);
}

.hero__title {
  font-size: var(--font-size-52);
  line-height: 1.1;
}

.hero__description {
  font-size: 1.125rem;
}

.hero__buttons {
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24px);
}

.hero__buttons .btn {
  width: 100%;
  max-width: 350px;
}

.hero__title88 {
  font-size: var(--font-size-88);
}

.hero__title72 {
  font-size: var(--font-size-72);
}

.hero__title68 {
  font-size: var(--font-size-68);
}

.hero__title-body {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-blanco);
  margin-bottom: var(--spacing-32px);
}

.hero__subtitle {
  /*font-size: var(--font-size-28);*/
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-16px);
}

.hero__title--compact {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  margin-bottom: var(--spacing-16px);
}

.hero__description24 {
  font-size: var(--font-size-24);
  line-height: var(--line-height-relaxed);
  color: var(--color-crema);
  margin-bottom: var(--spacing-48px);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero__description32 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-relaxed);
  color: var(--color-crema);
  margin-bottom: var(--spacing-48px);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero--btn {
  height: 3rem;
  /* O usar una variable nueva como --btn-height */
  width: 14rem;
  /* Permitir que el ancho se ajuste al contenido */
  padding: 0 var(--spacing-32px);
  /* Remover padding vertical */
  line-height: 56px;
  /* Igualar a la altura */
  font-size: var(--font-size-20);
}

.hero__buttons {
  display: flex;
  gap: var(--spacing-128px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-96px);
  height: var(--spacing-16px);
  /* para alinear con estadísticas */
}

.hero__stats {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-80px);
  /*flex-wrap: wrap;*/
}

.hero__stat {
  flex: 1;
  text-align: center;
}

.hero__stat-number {
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
  color: var(--color-ambar);
  line-height: 1;
  margin-bottom: var(--spacing-8px);
}

.hero__stat-label {
  font-size: var(--font-size-14);
  color: var(--color-crema);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .hero__title {
    font-size: var(--font-size-38);
  }

  .hero__description {
    font-size: var(--font-size-16);
  }

  .hero__buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero__buttons .btn {
    width: 100%;
    max-width: 300px;
  }

  .hero__stats {
    gap: var(--spacing-32px);
  }

  .hero__stat-number {
    font-size: var(--font-size-38);
  }
}

/* ============================================
  Titles y Subtitles UTILITIES
  ============================================ */
.subtitle-34 {
  font-size: var(--font-size-34);
}
.subtitle-30 {
  font-size: var(--font-size-30);
}
.subtitle-24 {
  font-size: var(--font-size-24);
}
.subtitle-20 {
  font-size: var(--font-size-20);
}
.subtitle-18 {
  font-size: var(--font-size-18);
}
.subtitle-body {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-32px);
  color: var(--color-ebano);
}

/* ============================================
  FEATURES SECTION
  ============================================ */
.features {
  padding: var(--spacing-64px) 0;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-48px);
}

.features__grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-32px);
}
.features__grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--spacing-24px);
}

.feature-badge {
  display: inline-block; /* Cambiado de inline-flex para mejor control de ancho */
  width: fit-content; /* Clave: hace que el ancho sea solo el del texto */
  min-width: 120px; /* Ancho mínimo para que todos se vean uniformes */
  text-align: center;

  background-color: rgba(248, 132, 16, 0.15);
  color: var(--color-ambar);
  padding: 6px 16px; /* Reducimos el padding para que sea menos ancho */
  border-radius: 50px;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  margin: 0 auto var(--spacing-24px) auto; /* Lo centra si el padre tiene text-align: center */
  border: 1px solid rgba(248, 132, 16, 0.3);
  white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
}

.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* Obligatorio para que ocupen el alto de la fila */
  min-height: 280px; /* Evita que se colapsen si hay poco texto */
  padding: 32px;
  background-color: var(--color-blanco);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-ambar);
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: rgba(248, 132, 16, 0.1);
  border-radius: 12px;*/
  margin-bottom: var(--spacing-24px);
}

.feature-card__icon i {
  font-size: var(--font-size-72);
  /* Tamaño del icono ⭐ */
  color: var(--color-ambar);
  /*line-height: 1;*/
}

.feature-card__title {
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-16px);
  color: var(--color-ebano);
}

.feature-card__description {
display: flex;
  flex-direction: column;
  height: 100%; /* Obligatorio para que ocupen el alto de la fila */
  min-height: 280px; /* Evita que se colapsen si hay poco texto */
  padding: 32px;
  background-color: var(--color-blanco);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
}

/* --- NUEVA VARIANTE PARA CURSOS (Añadir al final del CSS) --- */

/* 1. Solo afecta a la tarjeta que tenga ambas clases */
.feature-card .card--course {
  position: relative; /* Para que el badge no se salga */
  padding-top: var(--spacing-80px); /* Espacio para el badge arriba */
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Esto obliga a todas las cards a medir lo mismo de alto */
  height: 100%; /* Para que todas midan lo mismo */
}
/* Elemento de lista limpio */
.feature-card__list {
  list-style: none !important;
  padding-left: 1.1rem;
  margin: var(--spacing-16px) 0;
  color: var(--color-terrosa);
  text-align: left;
}
/* 2. Ajuste específico para el badge en esta tarjeta */
.feature-card-badge {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 145px; /* Ancho fijo como pediste */
  margin: 0;
}

/* 3. Estilo para el botón de "Ver Detalles" */
.card--course .btn {
  margin-top: auto; /* Empuja el botón siempre al fondo de la tarjeta */
  width: 100%;
  padding: var(--spacing-12px);
  border-radius: 12px;
}

/* ============================================
  LAYOUT UNIVERSAL: DOS COLUMNAS FLEXBOX
  USO: Texto flexible (izquierda) + Imagen fija 350px (derecha)
  LUGARES DONDE SE USA:
  - Sección 3: Arquitectura (texto + diagrama)
  - Sección 4: Transformación (contenido + libro/curso)
  - Modelo página interna (split - texto + imagen)
  - Y 10+ secciones más en el sitio
  ============================================ */

.content-two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
  /* 80px */
  align-items: flex-start;
  margin-bottom: var(--spacing-56px);
}

/* COLUMNA IZQUIERDA: Texto flexible, crece según espacio */
.col-text {
  flex: 1;
  width: 100%;
}

/* COLUMNA DERECHA: Imagen fija 420px (NO crece ni se encoge) */
.col-image {
  flex: 0 0 380px;
  /*position: relative;*/
  top: 6rem;
  padding: 6px;
}

/* Imagen responsive con drop-shadow */
.image-responsive {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  filter: drop-shadow(0 0 10px #121212);
  transition: all var(--transition-normal);
}

.image-responsive:hover {
  transform: translateY(-5px) scale(1.01);
  filter: drop-shadow(0 0 20px #121212);
}

/* Pie de imagen: Descripción centrada debajo */
.caption {
  font-size: var(--font-size-14);
  color: rgba(27, 27, 27, 0.7);
  text-align: center;
  margin-top: 2rem;
  padding: 0.75rem;
  /*border-radius: 8px;*/
  line-height: 1.5;
}

/* --------------------------------------------------------------------
   FUNDAMENTOS UNIVERSALES PARA SECCIÓN 4 (Y CUALQUIER OTRA)

   - .section / .section__inner: ya existen globalmente
   - .layout-hero / .overlay: usados en hero, cta, etc.
   - El resto se usará en secciones 3, 4, página modelo, etc.
   -------------------------------------------------------------------- */

/* overlay genérico (ya definido antes, repetir si no existe) */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.overlay--gradient-ambar {
  background: linear-gradient(
    135deg,
    rgba(248, 132, 16, 0.95) 0%,
    rgba(224, 116, 16, 0.9) 100%
  );
}

/* layout-hero reutilizable (hero + cta con imagen de fondo) */
.layout-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------------------
   RESPONSIVE (repite si no está en el archivo global) */
@media (max-width: 1024px) {
  .content-two-col {
    gap: 3rem;
  }

  .col-image {
    flex: 0 0 100%;
    position: static;
  }
}

@media (max-width: 768px) {
  .content-two-col {
    flex-direction: column;
    gap: 2rem;
  }

  .col-text,
  .col-image {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------
   TIP: si ya copiaste estas clases en sección 3 no hace falta duplicarlas;
   sólo asegúrate de que estén presentes antes de los usos.
   -------------------------------------------------------------------- */

/* ============================================
  SECCIÓN DE ITEMS: Lista de tarjetas tipo pilar/item
  USO: 2 Pilares fundamentales, items de lista, etc
  LUGARES DONDE SE USA:
  - Sección 3: Pilares (1 y 2)
  - Otras secciones con listas de items
  ============================================ */

.items-section {
  margin-top: var(--spacing-56px);
}

/* Contenedor de la lista (flex column) */
.items-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32px);
  max-width: 800px;
  margin: 0 auto;
}

/* Item individual (número + texto) */
.list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-24px);
  padding: var(--spacing-32px);
  background-color: var(--color-blanco);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(27, 27, 27, 0.08);
  transition: all var(--transition-normal);
}

.list-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Número circular del item */
.list-item__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ambar);
  color: var(--color-blanco);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
}

/* Texto del item */
.list-item__text {
  font-size: var(--font-size-16);
  line-height: var(--line-height-relaxed);
  color: var(--color-ebano);
}

.list-item__text strong {
  color: var(--color-ambar);
  font-weight: var(--font-weight-semibold);
}

/* ============================================
  GRID DE TARJETAS: Grilla responsive de cards
  USO: Principios D-E-S, características, etc
  LUGARES DONDE SE USA:
  - Sección 3: Principios (3 tarjetas)
  - Sección 2: Features (3 tarjetas)
  - Modelo página interna (4 tarjetas grid)
  - Y 10+ secciones más
  ============================================ */

.cards-section {
  margin-top: var(--spacing-56px);
}

/* Grilla responsive */
.cards-grid {
  display: grid;
  gap: var(--spacing-32px);
  width: 100%;
}

/* Variante: 3 columnas en desktop, 1 en móvil */
.cards-grid--3cols {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  
}

@media (max-width: 768px) {
  .cards-grid--3cols {
    grid-template-columns: 1fr;
  }
}

/* Variante: Card de principio (usa .card base + modifier) */
.card--principle {
  padding: var(--spacing-48px);
  border-radius: 16px;
}

/* Subtítulo para secciones internas */
.section-title-48 {
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
}

.section-title-sm {
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-bold);
}
.section-title-sx {
  font-size: var(--font-size-34);
  font-weight: var(--font-weight-bold);
}

.title-48 {
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
}
.title-42 {
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-bold);
}
.title-30 {
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-bold);
}
.title-38 {
  font-size: var(--font-size-38);
  font-weight: var(--font-weight-bold);
}

.section-subtitle {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-ebano);
  margin-bottom: var(--spacing-64px);
}

.section-title-body {
  line-height: var(--line-height-relaxed);
  text-align: center;
  margin-bottom: var(--spacing-32px);
  color: var(--color-ebano);
}

.title-body {
  line-height: var(--line-height-relaxed);
  text-align: center;
  margin-bottom: var(--spacing-32px);
  color: var(--color-ebano);
}

/* ============================================
  RESPONSIVE: Colapsa a 1 columna en tablet/móvil
  USO: Todos los layouts de dos columnas
  ============================================ */

@media (max-width: 1024px) {
  .content-two-col {
    gap: 3rem;
  }

  .col-image {
    flex: 0 0 100%;
    position: static;
  }
}

@media (max-width: 768px) {
  .content-two-col {
    flex-direction: column;
    gap: 2rem;
  }

  .col-text,
  .col-image {
    flex: 1 1 100%;
  }

  .section-subtitle {
    font-size: var(--font-size-18);
    margin-bottom: var(--spacing-32px);
  }
}

/* ============================================
  ARCHITECTURE SECTION
  ============================================ */
.architecture {
  padding: var(--spacing-64px) 0;
}

.architecture__content {
  margin-bottom: var(--spacing-56px);
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 3rem;
}

.architecture__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-48px);
  align-items: start;
}

@media (min-width: 1024px) {
  .architecture__card {
    grid-template-columns: 1fr 1fr;
  }
}

.architecture__text {
  order: 2;
}

@media (min-width: 1024px) {
  .architecture__text {
    order: 1;
  }
}

.architecture__image-container {
  order: 1;
  text-align: center;
}

@media (min-width: 1024px) {
  .architecture__image-container {
    order: 2;
  }
}

.architecture__subtitle {
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-32px);
  color: var(--color-ebano);
}

.subtitle-lg {
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-32px);
  color: var(--color-ebano);
}

.architecture__image {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.architecture__caption {
  font-size: var(--font-size-14);
  color: var(--color-terrosa);
  margin-top: var(--spacing-16px);
  font-style: italic;
}

.info-box {
  background-color: var(--color-cream-light);
  padding: var(--spacing-24px);
  border-radius: 12px;
  margin-bottom: var(--spacing-24px);
  border-left: 4px solid var(--color-ambar);
}

.info-box__title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ebano);
  margin-bottom: var(--spacing-8px);
}

.info-box__text {
  font-size: var(--font-size-14);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
}

.secret-box {
  background-color: var(--color-cream-light);
  padding: var(--spacing-24px);
  border-radius: 12px;
  margin-bottom: var(--spacing-24px);
  border-left: 4px solid var(--color-ambar);
}

.secret-box__title20 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ebano);
  margin-bottom: var(--spacing-8px);
}

.secret-box__text {
  font-size: var(--font-size-18);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
}

/* ============================================
  PILARES SECTION
  ============================================ */
.pilares {
  margin-top: var(--spacing-56px);
}

.pilares__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32px);
  max-width: 800px;
  margin: 0 auto;
}

.pilar-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-24px);
  padding: var(--spacing-32px);
  background-color: var(--color-blanco);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(27, 27, 27, 0.08);
}

.pilar-item__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ambar);
  color: var(--color-blanco);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
}

.pilar-item__text {
  font-size: var(--font-size-16);
  line-height: var(--line-height-relaxed);
  color: var(--color-ebano);
}

/* ============================================
  SPLIT SECTION: Son las areas en donde hay texto 
  a la izquierda y una imagen a la derecha (o viceversa)
  USO: Sección 3 (Arquitectura), 
  Sección 4 (Transformación), 
  CONTENEDOR DIVIDIDO: Diseño flexible para organizar contenido 
  en dos columnas con separación vertical
  USO: Para layouts con texto/imagen, texto/diagrama, etc.
  FUNCIONALIDAD: Usa flexbox para alinear elementos horizontalmente
  ============================================ */
.split {
  display: flex;
  flex-direction: row; /* Para disposición horizontal */
  justify-content: space-between; /* Espacio entre columnas */
  margin-top: var(--spacing-48px); /* Espaciado superior */
}
.split-container {
  display: flex; /* Activa el modelo de caja flexible */
  align-items: center; /* Alinea verticalmente los items al centro */
  gap: 20px; /* Espacio entre elementos hijos */
}
.split--narrow {
  max-width: 1200px; /* Ancho máximo para la sección */
  margin: 0 auto; /* Centrar la sección */
}
.split-content-1 {
  flex: 1.4; /* Toma el espacio restante */
  margin: var(--spacing-20px); /* Espaciado interno */
}
.split-content {
  flex: 0.6; /* Toma el 60% del espacio */
}
.split-media {
  flex: 1; /* Permite que crezca según el contenido disponible */
}
.split__media {
  flex: 1; /* Toma el espacio restante */
  display: flex;
  justify-content: left; /* Centrar imagen */
  align-items: center; /* Centrar verticalmente */
}
.split-media img {
  max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 12px; /* Opcional: añade bordes redondeados a la imagen */
}

/* ============================================
  PRINCIPLES SECTION
  ============================================ */
.principles {
  margin-top: var(--spacing-56px);
}

.principles__title {
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--spacing-48px);
  color: var(--color-ebano);
}

.principles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-32px);
}

.principle-card {
  background-color: var(--color-blanco);
  border-radius: 16px;
  padding: var(--spacing-48px);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(27, 27, 27, 0.08);
  transition: all var(--transition-normal);
}

.principle-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-ambar);
}

.principle-card .card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-24px);
  margin-bottom: var(--spacing-24px);
}

.principle-card .card__letter {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ambar);
  color: var(--color-blanco);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  border-radius: 12px;
}

.principle-card .card__description {
  font-size: var(--font-size-20);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
  margin-bottom: var(--spacing-24px);
}

.principle-card .card__footer {
  padding-top: var(--spacing-16px);
  border-top: 1px solid rgba(27, 27, 27, 0.08);
}

.principle-card .card__tag {
  font-size: var(--font-size-12);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ambar);
  font-weight: var(--font-weight-medium);
}

/* ============================================
  TRANSFORMATION SECTION
  ============================================ */
.transformation {
  padding: var(--spacing-64px) 0;
}

.transformation__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56px);
}

.transformation__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-48px);
  align-items: center;
  background-color: var(--color-blanco);
  padding: var(--spacing-48px);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(27, 27, 27, 0.08);
}

@media (min-width: 1024px) {
  .transformation__card {
    grid-template-columns: 1fr 1fr;
    padding: var(--spacing-56px);
  }

  .transformation__card--reverse .transformation__content {
    order: 2;
  }

  .transformation__card--reverse .transformation__image-container {
    order: 1;
  }
}

.transformation__content {
  order: 2;
}

.transformation__subtitle {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-24px);
  color: var(--color-ebano);
}

.transformation__text {
  font-size: var(--font-size-16);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
  margin-bottom: var(--spacing-24px);
}

.transformation__image-container {
  order: 1;
  text-align: center;
}

@media (min-width: 1024px) {
  .transformation__content {
    order: 1;
  }

  .transformation__image-container {
    order: 2;
  }
}

.transformation__image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ============================================
  CTA SECTION
  ============================================ */
.cta {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cta--with-bg {
  min-height: 60vh;
}

.cta__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(248, 132, 16, 0.95) 0%,
    rgba(224, 116, 16, 0.9) 100%
  );
  z-index: 1;
}

.cta__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1440px;
  padding: var(--spacing-56px) var(--spacing-32px);
}

.cta__title {
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
  color: var(--color-blanco);
  margin-bottom: var(--spacing-24px);
}

.cta__title .white {
  color: var(--color-blanco);
}

.cta__description {
  font-size: var(--font-size-20);
  color: var(--color-blanco);
  margin-bottom: var(--spacing-48px);
  line-height: var(--line-height-relaxed);
}

.cta__buttons {
  display: flex;
  gap: var(--spacing-24px);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta__title {
    font-size: var(--font-size-30);
  }

  .cta__description {
    font-size: var(--font-size-16);
  }

  .cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta__buttons .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* ============================================
  CARDS SYSTEM
  ============================================ */
.card {
  background-color: var(--color-blanco);
  border-radius: 12px;
  padding: var(--spacing-32px);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(27, 27, 27, 0.08);
  transition: all var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-ambar);
}

.card--numbered {
  position: relative;
  padding-left: calc(var(--spacing-32px) + 40px);
}

.card__number {
  position: absolute;
  left: var(--spacing-24px);
  top: var(--spacing-24px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ambar);
  color: var(--color-blanco);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
}

.card-i-center {
  text-align: center;
}

.card__icon-big {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-24px);
}

.card__icon i {
  font-size: var(--font-size-68);
  color: var(--color-ambar);
}

.card__content {
  padding: var(--spacing-24px) 0;
}

.card__title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-16px);
  color: var(--color-ebano);
}

.card-description {
  font-size: var(--font-size-18);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
  margin-bottom: var(--spacing-24px);
}

.card-description24 {
  font-size: var(--font-size-24);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
  margin-bottom: var(--spacing-48px);
}

.card--horizontal {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .card--horizontal {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-32px);
  }

  .card--horizontal .card__content {
    flex: 1;
  }
}

/* ============================================
  BADGES
  ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-8px) var(--spacing-16px);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px;
}

.badge--primary {
  background-color: rgba(248, 132, 16, 0.15);
  color: var(--color-ambar);
}

.badge--secondary {
  background-color: rgba(27, 27, 27, 0.1);
  color: var(--color-ebano);
}

/* ============================================
  SEPARATOR
  ============================================ */
.separator {
  width: 100%;
  height: 3px;
  background-color: rgba(254, 115, 0, 0.1);
  margin: var(--spacing-32px) 0;
}

/* ============================================
  GLASSMORPHISM
  ============================================ */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

/* =========================================================
  CONTENEDOR NARROW UNIVERSAL
  USO:
  - CTA final (sección 05)
  - Headers centrados en hero/cta/landings
  FUNCIÓN:
  - Limita ancho del texto para mayor legibilidad
  - Añade padding interno consistente con layouts hero/cta
   ========================================================= */
.content-narrow {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--spacing-56px) var(--spacing-32px);
}

/* ============================================
  LINEA VERTICAL DECORATIVA: Línea vertical delgada para separar 
  contenido o decorar secciones
  USO: Sección 3 (entre texto y diagrama), Sección 4 (entre texto y libro/curso), etc. 
  AMBAR COLOR: #f88410
  ============================================ */
.vertical-line {
  width: 3px;
  min-height: 150px; /* Altura mínima */
  background-color: #f88410;
  margin: 0 20px; /* Espaciado horizontal */
}

/* ============================================
  COMPORTAMIENTO IMAGENES   
  Clases para controlar el tamaño, alineación y estilo de las imágenes
  USO: Imágenes dentro de secciones, artículos, etc.
  FUNCIONALIDAD: Permite imágenes a pantalla completa,
   alineadas a la izquierda/derecha/centro
  ============================================ */
.img-full {
  margin-top: var(--spacing-96px);
  /*margin-bottom: var(--spacing-24px);*/
  /*margin-top: mt-48px;*/
  max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor 
  max-width:-webkit-fill-available;*/
  height: auto; /* Mantiene la proporción de la imagen 
  height:-webkit-fill-available;*/
  max-height: 370px; /* Ajusta la altura máxima según sea necesario 
  max-height:-webkit-fill-available;*/
  object-fit: -webkit-fill-available; /* Asegura que la imagen se ajuste al contenedor sin distorsionarse */
}

.img-left {
  float: left;
  margin-right: var(--spacing-16px);
}

.img-right {
  float: right;
  margin-left: var(--spacing-16px);
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
  BACK TO TOP
  ============================================ */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--color-ambar);
  color: var(--color-blanco);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: var(--z-backtop);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: #e07410;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.back-to-top::after {
  content: "\f062";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* ============================================
  ANIMACIONES
  ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

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

  50% {
    opacity: 0.5;
  }
}

.animate {
  animation-duration: 0.6s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

.animate--fadeInUp {
  animation-name: fadeInUp;
}

.animate--fadeInDown {
  animation-name: fadeInDown;
}

.animate--fadeIn {
  animation-name: fadeIn;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

.delay-4 {
  animation-delay: 0.4s;
}

.delay-5 {
  animation-delay: 0.5s;
}

.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--color-crema);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

[data-reveal].revealed,
[data-reveal].animated {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

[data-stagger].revealed > *:nth-child(1),
[data-stagger].animated > *:nth-child(1) {
  transition-delay: 0.1s;
}

[data-stagger].revealed > *:nth-child(2),
[data-stagger].animated > *:nth-child(2) {
  transition-delay: 0.2s;
}

[data-stagger].revealed > *:nth-child(3),
[data-stagger].animated > *:nth-child(3) {
  transition-delay: 0.3s;
}

[data-stagger].revealed > *:nth-child(4),
[data-stagger].animated > *:nth-child(4) {
  transition-delay: 0.4s;
}

[data-stagger].revealed > *:nth-child(5),
[data-stagger].animated > *:nth-child(5) {
  transition-delay: 0.5s;
}

[data-stagger].revealed > *:nth-child(6),
[data-stagger].animated > *:nth-child(6) {
  transition-delay: 0.6s;
}

[data-stagger].revealed > *,
[data-stagger].animated > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
  UTILIDADES PARA IMÁGENES Y BADGES
  ============================================ */
img[alt*="Badge"] {
  transition: all var(--transition-normal);
  filter: drop-shadow(0 4px 8px rgba(27, 27, 27, 0.15));
}

img[alt*="Badge"]:hover {
  filter: drop-shadow(0 8px 16px rgba(248, 132, 16, 0.3));
  transform: scale(1.02);
}

/* ============================================
  MEDIA QUERIES ADICIONALES
  ============================================ */
@media (max-width: 480px) {
  .section {
    padding: var(--spacing-48px) 0;
  }

  .section__inner {
    width: 92%;
  }

  .hero__content {
    padding: var(--spacing-48px) var(--spacing-24px);
  }

  .hero__title {
    font-size: var(--font-size-30);
  }

  .features__grid,
  .principles__grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .principle-card,
  .transformation__card,
  .pilar-item {
    padding: var(--spacing-24px);
  }
}

@media (min-width: 481px) and (max-width: 1023px) {
  .hero__title {
    font-size: var(--font-size-48);
  }

  .section-header__title {
    font-size: var(--font-size-34);
  }
}

@media (min-width: 1440px) {
  .section {
    padding: var(--spacing-64px) 0;
  }

  .hero__content {
    padding: var(--spacing-64px) 0;
  }

  .section-header {
    margin-bottom: var(--spacing-64px);
  }
}



/* FEATURES - 1 COLUMNA (visible change) */
.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32px);
}

.feature-card {
  padding: var(--spacing-32px);
}

/* ARCHITECTURE - 1 COLUMNA */
.architecture__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-48px);
}

.architecture__text {
  order: 1;
}

.architecture__image-container {
  order: 2;
}

.architecture__subtitle {
  font-size: var(--font-size-24);
}

.subtitle-lg {
  font-size: var(--font-size-38);
  margin-bottom: var(--spacing-48px);
}

.info-box {
  padding: var(--spacing-32px);
  margin-bottom: var(--spacing-32px);
}

.info-box__title {
  font-size: var(--font-size-16);
}

/* PILARES - 1 COLUMNA */
.pilares__list {
  max-width: 100%;
}

/* PRINCIPLES - 1 COLUMNA (visible change) */
.principles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32px);
}

.principle-card {
  padding: var(--spacing-32px);
}

/* TRANSFORMATION - 1 COLUMNA */
.transformation__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32px);
  padding: var(--spacing-32px);
}

.transformation__content {
  order: 1;
}

.transformation__image-container {
  order: 2;
}

/* CTA */
.cta__inner {
  max-width: 700px;
}

.cta__title {
  font-size: 2.5rem;
}

.cta__description {
  font-size: 1rem;
}

.cta__buttons {
  flex-direction: column;
  align-items: center;
}

.cta__buttons .btn {
  width: 100%;
  max-width: 300px;
}

/* ============================================
  GENERIC CONTENT HELPERS
  ============================================ */

.lead {
  font-size: var(--font-size-18);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
  margin-bottom: var(--spacing-16px);
}

.lead--light {
  color: var(--color-crema);
}

.text-block {
  max-width: 1380px;
  /*margin: 0 auto;*/
  text-align: center;
}

.text-block p {
  margin-bottom: var(--spacing-16px);
}

.text-block p:last-child {
  margin-bottom: 0;
}

.highlight-strip {
  display: inline-block;
  background: rgba(248, 132, 16, 0.12);
  color: var(--color-ambar);
  padding: 0.5rem 2rem;
  border-radius: 999px;
  font-size: var(--font-size-30);
  letter-spacing: 0.02em;
  margin: 0 auto var(--spacing-48px) auto;
}

.cards-grid--4cols {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card--outlined {
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(27, 27, 27, 0.12);
  width: 100%;
}

.card--outlined:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-ambar);
}

.card__icon {
  /*background-color: rgba(248, 132, 16, 0.1);
  border-radius: 0;*/
  width: 98px;
  height: 98px;
  margin: 0 auto var(--spacing-16px);

  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 16px;
}

.title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12px);
}

.title-row__icon {
  width: 22px;
  height: 22px;
  display: inline-block;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-48px);
  align-items: center;
}

.split--narrow {
  grid-template-columns: 1.1fr 0.9fr;
}

.split__media {
  text-align: center;
}

.list-plain {
  list-style: disc;
  padding-left: 1.1rem;
  margin: var(--spacing-16px) 0;
  color: var(--color-terrosa);
  text-align: left;
}

.list-plain li {
  margin-bottom: 0.5rem;
}

.definition-list {
  display: grid;
  gap: var(--spacing-24px);
}

.definition-item__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  color: var(--color-ambar);
  margin-bottom: var(--spacing-8px);
}

.definition-item__text {
  font-size: var(--font-size-16);
  line-height: var(--line-height-relaxed);
  color: var(--color-terrosa);
}

.stack-media {
  display: grid;
  gap: var(--spacing-24px);
}

.stack-media img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1024px) {
  .split,
  .split--narrow {
    grid-template-columns: 1fr;
  }

  .split__media {
    order: 2;
  }
}
@media print {
  .animate,
  [data-reveal],
  [data-stagger] {
    opacity: 1 !important;
    transform: none !important;
  }

  .back-to-top {
    display: none;
  }

  .hero--with-bg {
    background: none !important;
  }

  .hero__overlay {
    display: none;
  }
}

.color--warm {
  background-color: var(--color-cream-light);
}

/* ============================================================
   SECCIÓN: PROFILE - ELEMENTOS DE TARJETA DE PERFIL
   USO: Tarjetas de perfil en secciones de equipo, testimonios, etc.
   FUNCIONALIDAD: Estilos específicos para imágenes de perfil, títulos y descripciones dentro de
   ============================================================ */

.profile-container {
  width: 150px; /* Ajusta el tamaño a tu gusto */
  height: 150px;
  overflow: hidden; /* Corta lo que salga del círculo */
  border-radius: 50%; /* Esto hace la magia del círculo */
  border: 3px solid #fff; /* Opcional: un borde como en las historias */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Evita que la imagen se estire o deforme */
}

/* --- ELEMENTO: Imagen --- */
.profile-card__image {
  width: 330px; /* N3: La imagen ocupa todo el ancho de la tarjeta. */
  height: 330px; /* N3: Se define una altura fija para la imagen. */
  object-fit: cover; /* N3: Asegura que la imagen cubra el espacio sin deformarse. */
  display: block; /* N3: Elimina cualquier espacio extra debajo de la imagen. */
}

.profile-card__titles {
  /*font-size: var(--font-size-20);*/
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-16px);
}

.profile-card__description {
  font-size: var(--font-size-16);
  line-height: var(--line-height-relaxed);
  color: var(--color-ebano);
}

/* ====================================================
Configuración General de las tarjetas para los BLOG ECCOx
==================================================== */
/*body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9f9f9;
    color: #1f1e1a;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}*/

.blog-header {
  text-align: center;
  margin-bottom: 40px;
}

.blog-header h1 span {
  color: var(--color-ambar); /* Color naranja de ECCOx */
}

/* Contenedor de las tarjetas */
.blog-container {
  display: flex;
  justify-content: center;
  gap: 70px; /* Espacio entre tarjetas */
  flex-wrap: wrap; /* Para que sean responsivas */
  max-width: 1180px;
  margin: 0 auto;
}

/* Estilo de la Tarjeta */
.card {
  background: #fff;
  width: 450px;
  border-radius: 8px;
  overflow: hidden; /* Para que la imagen no se salga de las esquinas redondeadas */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px); /* Efecto al pasar el mouse */
}

/* Imagen principal del post */
.card-image {
  position: relative;
  height: 220px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Título interno (como el de Gamification) */
.overlay-title {
  position: absolute;
  bottom: 0;
  background: rgba(44, 62, 80, 0.8);
  color: white;
  width: 100%;
  padding: 10px;
  font-weight: bold;
}

/* Contenido de texto */
.card-content {
  padding: 12px;
}

.card-title {
  font-size: 1.1rem;
  color: var(--color-ambar);
  margin-bottom: 15px;
}

.card-excerpt {
  font-size: 0.9rem;
  color: #666;
}

.read-more {
  display: inline-block;
  color: var(--color-ambar);
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
}

/* --- SECCIÓN DEL AUTOR (La foto circular) --- */
.author-section {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.profile-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%; /* Hace el círculo perfecto */
  overflow: hidden; /* Recorta la imagen sobrante */
  margin-right: 15px;
  border: 2px solid #eee;
}

.profile-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Evita que la cara se vea estirada */
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Espacio opcional entre fecha y nombre */
}

.author-name {
  margin: 0;
  font-weight: bold;
  font-size: var(--font-size-14);
}
.date {
  font-size: var(--font-size-12);
  color: var(--color-terrosa);
  margin-left: 5px; /* Separación del icono */
}

/* --- ESTILOS PÁGINA PRÓXIMAMENTE --- */

.hero--full-page {
  min-height: 100vh; /* Ocupa toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

.coming-soon-form {
  background: rgba(255, 255, 255, 0.05); /* Fondo muy sutil */
  padding: 40px;
  border-radius: 24px;
  backdrop-filter: blur(10px); /* Efecto de cristal esmerilado */
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 900px;
  margin-inline: auto;
}

/* Grilla del formulario */
.form-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr; /* Móvil: 1 columna */
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(3, 1fr); /* PC: 3 columnas iguales */
  }
}

/* Estilo de los Inputs (Reutilizando tu estética) */
.form-input {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid transparent;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-ebano);
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-ambar);
  box-shadow: 0 0 15px rgba(248, 132, 16, 0.3);
}

.form-input::placeholder {
  color: #888;
}

/* Ajuste de botón */
.coming-soon-form .btn {
  width: auto;
  min-width: 280px;
}