:root {
  --color-bg-dark: #1b2836;
  --color-text-light: #f4f7fb;
  --color-text-soft: #e9eff5;
  --color-text-white: #ffffff;
  --color-primary: #2c4760;
  --color-accent: #a2bfd7;
  --color-border-subtle: #283c50;
  --color-card-bg: #cedce9;
  --color-card-divider: #315373;
  --color-bg-darkest: #111;

  --container-max-width: 68.75rem;
  /* 1100px */
}

/* ==========================================================================
   Tema Claro - Sobrescribe variables para el modo claro
   ========================================================================== */
html.light-theme {
  --color-bg-dark: #f0f4f8;
  --color-text-light: #1a2332;
  --color-text-soft: #2c3e50;
  --color-text-white: #2c3e50;
  --color-primary: #2c4760;
  --color-accent: #6b8fa7;
  --color-border-subtle: #d4dce6;
  --color-card-bg: #cedce9;
  --color-card-divider: #e2e8f0;
  --color-bg-darkest: #111;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  
}
html {
    scroll-behavior: smooth;
}

/*html.light__theme{
    --color-bg-dark: #f4f7fb;
  --color-text-light: #1b2836;
  --color-text-soft: #283c50;
  --color-text-white: #ffffff;
  --color-primary: #2c4760;
  --color-accent: #a2bfd7;
  --color-border-subtle: #283c50;
  --color-card-bg: #cedce9;
  --color-card-divider: #315373;
  --color-bg-darkest: #111;
}
*/


h1,h2,h3,.sub_title_hero{
  font-family: "Merriweather", serif;
}

body {
  background-color: var(--color-bg-dark);
  font-family: "IBM Plex Sans", sans-serif;
}

#about-us,
#stages,
#contact,
#faq{
    scroll-margin-top: 5rem;
}
/*BOTON*/
.cta_button_light {
  display: inline-block;
  background-color: var(--color-text-light);
  color: var(--color-bg-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  margin-top: 0.5rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}


.cta_button_light:hover,
.cta_button_light:focus-visible {
  background-color: var(--color-border-subtle);
  transform: scale(1.02);
  color: var(--color-text-light);
}

.cta_button_light:focus-visible {
  outline: 0.125rem solid var(--color-accent);
  outline-offset: 0.125rem;
}



/* ==========================================================================
   Animaciones de aparición al hacer scroll
   ========================================================================== */

/* Estado inicial: elementos ocultos */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Estado visible: elementos animados */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Variantes de animación para diferentes secciones
   ========================================================================== */

/* Hero: animación desde abajo con un poco más de desplazamiento */
[data-animate="hero"] {
  transform: translateY(30px);
  transition-duration: 0.7s;
}

/* Cards de servicios: entrada desde abajo con delays escalonados */
[data-animate="stage-card"] {
  transform: translateY(25px);
  transition-duration: 0.6s;
}

[data-animate="stage-card"]:nth-child(1) { transition-delay: 0.05s; }
[data-animate="stage-card"]:nth-child(2) { transition-delay: 0.15s; }
[data-animate="stage-card"]:nth-child(3) { transition-delay: 0.25s; }

/* Timeline: entrada desde los lados según su posición */
[data-animate="timeline-left"] {
  transform: translateX(-20px);
  transition-duration: 0.6s;
}

[data-animate="timeline-right"] {
  transform: translateX(20px);
  transition-duration: 0.6s;
}

/* About Us: animación suave de los elementos */
[data-animate="about-title"] {
  transform: translateY(20px);
  transition-duration: 0.6s;
}

[data-animate="about-stat"] {
  transform: translateY(20px);
  transition-duration: 0.6s;
}

[data-animate="about-stat"]:nth-child(1) { transition-delay: 0.05s; }
[data-animate="about-stat"]:nth-child(2) { transition-delay: 0.10s; }
[data-animate="about-stat"]:nth-child(3) { transition-delay: 0.15s; }

[data-animate="about-founder"] {
  transform: translateY(20px);
  transition-duration: 0.6s;
}

/* FAQ: entrada suave de los grupos */
[data-animate="faq-group"] {
  transform: translateY(15px);
  transition-duration: 0.5s;
}

[data-animate="faq-group"]:nth-child(1) { transition-delay: 0.05s; }
[data-animate="faq-group"]:nth-child(2) { transition-delay: 0.10s; }
[data-animate="faq-group"]:nth-child(3) { transition-delay: 0.15s; }

/* Footer: entrada desde abajo */
[data-animate="footer-main"] {
  transform: translateY(20px);
  transition-duration: 0.6s;
}

[data-animate="footer-bottom"] {
  transform: translateY(15px);
  transition-duration: 0.5s;
  transition-delay: 0.15s;
}

/* ==========================================================================
   Soporte para prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}








/* ==========================================================================
   Toggle Switch - Estilos para el cambio de tema
   ========================================================================== */

.toggle-switch {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.toggle-switch__label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 3.5rem;
    height: 1.875rem;
}

/* Ocultar el checkbox nativo pero mantenerlo accesible */
.toggle-switch__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
}

/* Slider - Fondo del toggle */
.toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-primary);
    border: 2px solid var(--color-border-subtle);
    border-radius: 2rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* ==========================================================================
   Tema Claro - Sobrescribe variables para el modo claro
   ========================================================================== */



/* Mejora de contraste para el toggle en modo claro */
html.light-theme .toggle-switch__slider::before {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}



/* ==========================================================================
   Soporte para prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .toggle-switch__slider,
    .toggle-switch__slider::before,
    .toggle-switch__slider::after {
        transition: none !important;
    }
}






/* ==========================================================================
   Elementos que ignoran el cambio de tema
   ========================================================================== */

/* Esta clase hace que el elemento ignore el tema y use los valores oscuros siempre */
.ignore-theme {
    /* Forzar variables del modo oscuro */
    --color-bg-dark: #1b2836;
    --color-text-light: #f4f7fb;
    --color-text-soft: #e9eff5;
    --color-text-white: #ffffff;
    --color-primary: #2c4760;
    --color-accent: #a2bfd7;
    --color-border-subtle: #283c50;
    --color-card-bg: #cedce9;
    --color-card-divider: #315373;
    --color-bg-darkest: #111;
}