/* ==========================================================================
   Variables de Tema (Oscuro / Claro) - Estilo Eco-Emprendedor
   ========================================================================== */
:root {
  /* Modo Oscuro (Por defecto) - Valores obtenidos del bloque original */
  --bg-main: #121212;          /* Citado de */
  --bg-content: #1E1E1E;       /* Citado de */
  --text-main: #E0E0E0;        /* Citado de */
  --text-muted: #A0A0A0;       /* Citado de */
  --color-primary: #0d3d65;    /* azul más brillante para contrastar */
  --color-primary-hover: #314569; /* Citado de */
  --color-info: #0dcaf0;    /* Cian */
  --color-secondary: #3D5A4A;  /* Citado de */
  --color-accent: #eb4d66;     /* Citado de */
  --header-bg: #121212;        /* Citado de */
  --footer-bg: #0A0A0A;        /* Citado de */
  --border-color: #333333;      /* Citado de */
  --theme-color: #FFD43B;
}

/* Selector para cambiar explícitamente al Modo Claro */
[data-theme="light"] {
  /* Modo Claro - Valores obtenidos del bloque :root original */
  --bg-main: #F4F6F4;          /* Gris muy claro con toque verdoso */
  --bg-content: #FFFFFF;       /* Citado de */
  --text-main: #333333;        /* Citado de */
  --text-muted: #666666;       /* Citado de */
  --color-primary: #02273f;    /* Verde Bosque Emprendedor */
  --color-primary-hover: #314569; /* Citado de */
  --color-info: #0dcaf0;    /* Cian */
  --color-secondary: #81B29A;  /* Verde Salvia suave */
  --color-accent: #eb4d66;     /* Tono tierra/arcilla para alertas/destaques */
  --header-bg: #1b2e23;        /* Verde muy oscuro casi negro */
  --footer-bg: #1A1A1A;        /* Citado de */
  --border-color: #E5E9E5;     /* Citado de */
  --theme-color: #666666;
}
/* ==========================================================================
   ESTILOS DEL BOTÓN DE TEMA (CLARO / OSCURO)
   ========================================================================== */

/* 1. Color por defecto (Modo Claro - Luna) */
#theme-icon {
    color: var(--theme-color); /* Luna en azul corporativo */
    font-size: 1.1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Efecto hover en modo claro */
#theme-toggle:hover #theme-icon {
    transform: rotate(-15deg); /* Pequeña animación al pasar el mouse */
}

.form-control, 
.form-select {
    background-color: var(--bg-content) !important;
    color: var(--text-main);
}
/* ==========================================================================
   6. FORMULARIOS E INPUTS
   ========================================================================== */
.form-group label {
    font-weight: 500;
    color: var(--color-primary);/*#2c3e50;*/
    font-size: 13px;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    height: auto;
    box-shadow: none;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
}

.form-control:disabled {
    background-color: var(--bg-content);
    opacity: 1;
}

.form-select {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    height: auto;
    box-shadow: none;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-select:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
}

.form-select:disabled {
    background-color: var(--bg-content);
    opacity: 1;
}

textarea.form-control { resize: vertical; }

.radio label { font-weight: 500; color: var(--text-main); }

div.required .col-form-label:before, 
div.required .form-label:before,
.required::before {
    content: "* ";
    color: #F00;
    font-weight: bold;
}

.form-switch-lg {
    font-size: 20px;
    min-height: 30px;
    line-height: 30px;
}

.form-check .form-check-input {
    margin-top: 0.25rem;
}

@media (min-width: 768px) {
    .col-form-label { text-align: right; }
}
/* ==========================================================================
   ADAPTACIÓN DE PLACEHOLDERS (MODO CLARO / OSCURO)
   ========================================================================== */

/* 1. Estilo para navegadores modernos (Chrome, Firefox, Edge, Safari) */
[data-theme="light"] .form-control::placeholder {
    color: var(--text-muted) !important; /* Se ajusta solo según el tema activo */
    opacity: 0.8; /* Un poco de transparencia para que parezca placeholder */
}

/* 2. Soporte específico para Firefox (que requiere opacidad 1 por defecto) */
[data-theme="light"] .form-control::-moz-placeholder {
    opacity: 1;
}

/* 3. Ajuste opcional para mayor visibilidad en Modo Oscuro */
.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.5; /* En modo oscuro, a veces conviene bajar un poco la opacidad */
}
/* ==========================================================================
   ALINEACIÓN INDEPENDIENTE DE PLACEHOLDERS
   ========================================================================== */

/* Fuerza al texto de ayuda a la izquierda incluso si el input tiene .text-end */
.form-control.text-end::placeholder {
    text-align: left !important;
}

/* Soporte para navegadores específicos */
.form-control.text-end::-webkit-input-placeholder {
    text-align: left !important;
}

.form-control.text-end::-moz-placeholder {
    text-align: left !important;
}

/* Opcional: Agregar un pequeño margen a la izquierda para que no pegue al borde */
.form-control.text-end::placeholder {
    padding-left: 5px;
}

/* ==========================================================================
   Base y Tipografía
   ========================================================================== */
body {
  /*font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;*/
  font-weight: 400;
  color: var(--text-main);
  background-color: var(--bg-main);
  font-size: 14px; /* Un poco más grande para mejor lectura */
  line-height: 1.6;
  width: 100%;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-main);
  font-weight: 500;
  margin-bottom: 15px;
}

h1 { font-size: 33px; }
h2 { font-size: 27px; }
h3 { font-size: 21px; }
h4 { font-size: 15px; }
footer h5 { font-size: 14px; }
h6 { font-size: 12px; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

button:focus {
  outline: none !important;
}

p {
  color: var(--text-muted);
}

legend {
  font-size: 18px;
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
}

label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: var(--color-accent);
  font-weight: bold;
}

/* ==========================================================================
   Estructura Principal
   ========================================================================== */
#content {
  min-height: 600px;
  background-color: var(--bg-content);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}

/* Top Bar */
#top {
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
  margin: 0 0 20px 0;
  min-height: 44px;
}

#top .nav > .list-inline > .list-inline-item, 
#top .nav > .list-inline .list-inline-item > a {
  color: var(--text-muted);
}

#top a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

#top a:hover {
  color: var(--color-primary-hover);
}

#top ul > li {
  background-color: var(--bg-content);
}

/* Corregir el fondo del contenedor del dropdown */
#top .dropdown-menu {
  background-color: var(--bg-content);
  border: 1px solid var(--border-color);
}

/* Opcional: Mejorar el efecto hover de los enlaces dentro del dropdown para que no se pongan blancos/grises por defecto */
#top .dropdown-menu .dropdown-item:hover,
#top .dropdown-menu .dropdown-item:focus {
  background-color: var(--bg-content);
  color: var(--color-primary-hover);
}

/* Logo */
#logo {
  margin: 0 0 10px 0;
}
#logo img {
  max-width: 200px;
}

/* Hacer que las miniaturas de Bootstrap respeten el tema oscuro y claro */
.img-thumbnail {
  background-color: var(--bg-content) !important; /* Cambia al fondo oscuro o claro según el tema */
  border-color: var(--border-color) !important;    /* Usa el color de borde de tu paleta */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Menú Principal */
#menu {
  background-color: var(--header-bg);
  border: none;
  min-height: 50px;
  border-radius: 6px;
  margin-bottom: 30px;
}

#menu .navbar-nav > li > a {
  color: var(--text-main);
  padding: 15px 20px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: background-color 0.2s;
}

#menu .navbar-nav > li > a:hover {
  background-color: var(--color-primary);
  border-radius: 4px;
}

#menu .dropdown-menu {
  background-color: var(--bg-content);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#menu .dropdown-inner a {
  color: var(--text-main);
  padding: 10px 20px;
}

#menu .dropdown-inner a:hover {
  color: var(--text-main);
  background-color: var(--color-primary);
}

/* Breadcrumb */
.breadcrumb {
  margin: 0 0 20px 0;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-content);
  border-radius: 4px;
}
.breadcrumb > li.breadcrumb-item > a {
  color: var(--color-primary);
}

/* ==========================================================================
   Botones (Flat Design, sin degradados)
   ========================================================================== */
.btn {
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--color-primary-hover);
  color: var(--color-accent);
}

.btn-success {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-warning, .btn-info, .btn-danger {
  /* Se unifican para mantener la paleta limpia si se llegan a usar en formularios */
  background-color: var(--color-accent);
  color: #ffffff;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 20px;
  background-color: var(--footer-bg);
  color: #aaaaaa;
}

footer hr {
  border-color: #333333;
}

footer a {
  color: #cccccc;
}

footer a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

footer h5 {
  color: #ffffff;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Cookie Banner Minimalista */
#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  z-index: 9999;
  background: var(--footer-bg);
  border-top: 2px solid var(--color-primary);
}
#cookie div {
  font-size: 14px;
  color: #FFFFFF;
}
.text-primary {
  color: var(--color-primary) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}
.text-accent    {
  color: var(--color-accent) !important;
}
.text-light    {
  color: var(--text-main) !important;
}
[data-theme="light"] .text-white  {
  color: var(--text-main) !important;
}

/********************* Cards ***************/
.card {
    background: var(--c-white);
    color: var(--c-primary-old);
    border-left: 4px solid var(--simecon-blue);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.card-highlight {
    background: linear-gradient(135deg, var(--simecon-blue) 0%, #1a4a7d 100%);
    border-left: 4px solid var(--simecon-brown);
}
/* ==========================================================================
   Slider Tipo "Streaming" (Rollo Fotográfico)
   ========================================================================== */
.streaming-slider-wrapper {
  position: relative;
  padding: 0 50px; /* Espacio para los botones laterales */
}

/* La pista por donde corren las tarjetas */
.streaming-track {
  display: flex;
  gap: 20px; /* Espacio entre tarjetas */
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Fuerza a que las tarjetas se alineen perfectamente */
  scroll-behavior: smooth; /* Deslizamiento suave nativo */
  padding-bottom: 15px; /* Espacio para la sombra de las tarjetas */
  
  /* Ocultar barra de scroll para un look más limpio (Opcional pero recomendado) */
  -ms-overflow-style: none;  /* IE y Edge */
  scrollbar-width: none;  /* Firefox */
}

.streaming-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari y Opera */
}

/* Cada tarjeta individual */
.streaming-card {
  /* Matemáticas: 25% de ancho para mostrar 4 exactos, menos el gap */
  flex: 0 0 calc(25% - 15px); 
  scroll-snap-align: start; /* Al hacer scroll, la tarjeta siempre queda al inicio */
}

/* Botones redondos laterales */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--bg-content);
  color: var(--color-accent);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slider-btn:hover {
  background-color: var(--color-accent);
  color: var(--bg-content);
  transform: translateY(-50%) scale(1.1);
}

.slider-btn-left {
  left: 0;
}

.slider-btn-right {
  right: 0;
}

/* ===== Diseño Responsivo (¡Muy importante!) ===== */
@media (max-width: 1200px) {
  .streaming-card { flex: 0 0 calc(33.333% - 14px); } /* Mostrar 3 en pantallas medianas */
}

@media (max-width: 991px) {
  .streaming-card { flex: 0 0 calc(50% - 10px); } /* Mostrar 2 en tablets */
}

@media (max-width: 767px) {
  .streaming-slider-wrapper { padding: 0; } /* Quitamos padding porque en móvil se usa el dedo */
  .streaming-card { flex: 0 0 calc(85%); } /* Mostrar 1 y un pedacito de la siguiente para invitar a deslizar */
  .slider-btn { display: none; } /* Ocultamos botones en móviles, los usuarios prefieren deslizar (swipe) */
}
/* ==========================================
    HERO SECTION Y ANIMACIÓN DE NODOS (WEBGL)
    ========================================== */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0; /* Fondo */
  opacity: 0.6;
}

.hero-content {
  position: relative;
  z-index: 1; /* Sobre el fondo animado */
}

/* ==========================================
    GLASSMORPHISM FORM (Captación)
    ========================================== */
.glass-form {
  background: rgba(30, 30, 30, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .glass-form {
  background: rgba(28, 28, 71, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
 
}

.form-control {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 12px 16px;
}

.form-control:focus {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: var(--color-info);
  color: var(--text-main);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--text-muted);
}

.btn-accent {
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-accent:hover {
  background-color: #ff5b75;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(235, 77, 102, 0.3);
  color: #fff;
}

/* ==========================================
    ESCALERA DE VALOR (Tarjetas)
    ========================================== */
.value-card {
  background-color: var(--bg-content);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  height: 100%;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-info);
}

.badge-level {
  background-color: rgba(13, 202, 240, 0.1);
  color: var(--color-info);
  border: 1px solid var(--color-info);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.badge-core {
  background-color: rgba(255, 212, 59, 0.1);
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
}

/* ==========================================
    TABLAS
    ========================================== */
.table-dark-custom {
  --bs-table-bg: var(--bg-content);
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.table-dark-custom thead th {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-info);
  font-weight: 600;
  padding: 18px;
}

.table-dark-custom tbody td {
  padding: 18px;
  vertical-align: middle;
}
/* 1. Base: En celulares (pantallas pequeñas), muestra 1 video (100% de ancho) */
.streaming-card {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 15px; /* Crea el espacio/separación entre tarjetas */
}

/* 2. Tablets: A partir de 768px, muestra 2 videos (50% de ancho) */
@media (min-width: 768px) {
  .streaming-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 3. Escritorio: A partir de 992px (Laptops/Monitores), muestra 3 videos (33.33% de ancho) */
@media (min-width: 992px) {
  .streaming-card {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* Opcional: Si tienes pantallas ultra anchas (TVs o monitores enormes) y sigues queriendo solo 3, lo dejamos así. Si quisieras 4 en ultra-anchas, agregarías un @media (min-width: 1400px) con 25% */
.contact-hero {
    /* Reemplaza con la ruta real de tu primera imagen (la ancha) */
    background-image: url('https://alejandropages.com/home/image/catalog/fondo3.jpg'); 
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    min-height: 80vh; /* Altura generosa */
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
  }

  /* Efecto de cristal elegante para el formulario */
  .glass-form-card {
    background: rgba(20, 30, 25, 0.65); /* Tono oscuro sutilmente verdoso/negro */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  }

  /* Estilizando los inputs para que no desentonen */
  .glass-input {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
  }
  .glass-input:focus {
    border-color: var(--color-info) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25) !important;
  }
  .glass-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  .glass-icon-box {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: none !important;
    color: var(--color-info) !important;
  }
  /* =========================================
   1. MODO OSCURO (Valores por defecto)
========================================= */
:root {
  /* Fondos sólidos para tapar las partículas */
  --bg-band-1: #1e2329; /* Gris oscuro elegante */
  --bg-band-2: #161a1f; /* Un tono un poco más profundo */
  
  /* Color del texto para contraste */
  --text-band: #e1e4e8; /* Texto casi blanco */
}

/* =========================================
   2. MODO CLARO (Cuando se activa el switch)
========================================= */
[data-theme="light"] {
  /* Fondos luminosos y limpios */
  --bg-band-1: #f8f9fa; /* Gris clarito (estilo Bootstrap bg-light) */
  --bg-band-2: #ffffff; /* Blanco puro */
  
  /* Color del texto para contraste */
  --text-band: #212529; /* Texto oscuro/gris carbón */
}

/* =========================================
   3. CLASES UTILITARIAS PARA LAS SECCIONES
========================================= */
.section-band-1 {
  background-color: var(--bg-band-1);
  color: var(--text-band);
  transition: background-color 0.4s ease, color 0.4s ease; /* Transición suave al cambiar de tema */
}

.section-band-2 {
  background-color: var(--bg-band-2);
  color: var(--text-band);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.section-band-3 {
  background-color: var(--color-primary);
  color: var(--text-main);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.section-bg-image {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://alejandropages.com/home/image/catalog/fondo3.jpg'); 
  
  /* 2. Ajustes para que la imagen cubra todo perfecto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 3. (Opcional) Efecto Parallax elegante */
  min-height: 60vh; /* Obliga a la sección a medir al menos el 60% del alto de la pantalla del usuario */
  
  /* Usamos Flexbox para que el texto corto se quede perfectamente centrado en medio de esa foto grande */
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .section-bg-image {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://alejandropages.com/home/image/catalog/fondo3.jpg'); 

}
.section-bg-image1 {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(77, 77, 77, 0.7), rgba(77, 77, 77, 0.7)), url('https://alejandropages.com/home/image/catalog/fondo-contacto.jpg'); 
  
  /* 2. Ajustes para que la imagen cubra todo perfecto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 3. (Opcional) Efecto Parallax elegante */
  min-height: 30vh; /* Obliga a la sección a medir al menos el 60% del alto de la pantalla del usuario */
  
  /* Usamos Flexbox para que el texto corto se quede perfectamente centrado en medio de esa foto grande */
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .section-bg-image1 {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://alejandropages.com/home/image/catalog/fondo-contacto.jpg'); 

}
.section-bg-image2 {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(77, 77, 77, 0.7), rgba(0, 0, 0, 0.7)), url('https://alejandropages.com/home/image/catalog/cursos.jpg'); 
  
  /* 2. Ajustes para que la imagen cubra todo perfecto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 3. (Opcional) Efecto Parallax elegante */
  min-height: 40vh; /* Obliga a la sección a medir al menos el 60% del alto de la pantalla del usuario */
  
  /* Usamos Flexbox para que el texto corto se quede perfectamente centrado en medio de esa foto grande */
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .section-bg-image2 {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://alejandropages.com/home/image/catalog/cursos.jpg'); 

}
.section-bg-image3 {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://alejandropages.com/home/image/catalog/portada.jpg'); 
  
  /* 2. Ajustes para que la imagen cubra todo perfecto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 3. (Opcional) Efecto Parallax elegante */
  min-height: 40vh; /* Obliga a la sección a medir al menos el 60% del alto de la pantalla del usuario */
  
  /* Usamos Flexbox para que el texto corto se quede perfectamente centrado en medio de esa foto grande */
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .section-bg-image3 {
  /* 1. El gradiente oscuro + La ruta de tu imagen */
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://alejandropages.com/home/image/catalog/portada.jpg'); 

}
.img-card-style {
  /*max-width: 100%;
  height: auto;
  border-radius: 12px; /* Esquinas ligeramente más redondeadas */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra elegante y difusa */
  /*border: 1px solid var(--border-color); /* Borde usando los colores de tu tema */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Para que se mueva al pasar el mouse */
}

/* Efecto hover interactivo */
.img-card-style:hover {
  transform: translateY(-5px); /* Se levanta un poco */
  box-shadow: 0 15px 35px rgba(0,0,0,0.3); /* La sombra se hace más grande */
}
.img-pop-style {
  /*max-width: 100%;
  height: auto;
  border-radius: 12px; /* Esquinas ligeramente más redondeadas */
  /*box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra elegante y difusa */
  /*border: 1px solid var(--border-color); /* Borde usando los colores de tu tema */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Para que se mueva al pasar el mouse */
}

/* Efecto hover interactivo */
.img-pop-style:hover {
  transform: translateY(-5px); /* Se levanta un poco */
  box-shadow: 0 15px 35px rgba(0,0,0,0.3); /* La sombra se hace más grande */
}