:root {
    /* Variables de color de marca */
    --color-primary-light: #22304a;
    --color-primary-light-rgb: 34, 48, 74;
    --color-secondary-light: #4a5568;
    --color-background-light: #f7f9fb;
    --color-surface-light: #ffffff;
    --color-surface-light-rgb: 255, 255, 255;
    --color-accent-light: #3b82f6;
    --color-accent-light-rgb: 59, 130, 246;
    --color-text-light: #22304a;
    --color-text-light-rgb: 34, 48, 74;
    --color-text-muted-light: #6b7280;

    --color-primary-dark: #1a2233;
    --color-primary-dark-rgb: 26, 34, 51;
    --color-secondary-dark: #cbd5e1;
    --color-background-dark: #10141a;
    --color-surface-dark: #1a2233;
    --color-surface-dark-rgb: 26, 34, 51;
    --color-accent-dark: #60a5fa;
    --color-accent-dark-rgb: 96, 165, 250;
    --color-text-dark: #f1f5f9;
    --color-text-dark-rgb: 241, 245, 249;
    --color-text-muted-dark: #94a3b8;

    /* Fuente principal */
    --main-font-family: 'Inter', sans-serif;
}

html, body {
    background-color: var(--color-background-light);
    color: var(--color-text-light);
    font-family: var(--main-font-family);
    overflow-x: hidden;
}

.container {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

@media (min-width: 768px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.section {
    padding: 60px 0;
    overflow: hidden; 
}

@media (min-width: 768px) {
    .section {
        padding: 80px 0;
    }
}

@media (min-width: 1024px) {
    .section {
        padding: 100px 0;
    }
}

html {
    scroll-behavior: smooth;
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-accent-light);
    color: #fff;
    border-color: var(--color-accent-light);
}

.btn-primary:hover {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.btn-secondary {
    background-color: var(--color-primary-light);
    color: #fff;
    border-color: var(--color-primary-light);
}

.btn-secondary:hover {
    background-color: #1a2233;
    color: #fff;
    border-color: #1a2233;
}

@media (min-width: 768px) {
    .btn {
        padding: 0.85rem 1.8rem;
        font-size: 1rem;
    }
}

/* Animaciones de entrada */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

.slide-in-up {
    transform: translateY(50px);
}
.slide-in-down {
    transform: translateY(-50px);
}
.slide-in-left {
    transform: translateX(-80px);
}
.slide-in-right {
    transform: translateX(80px);
}
.zoom-in {
    transform: scale(0.9);
}

.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }

/* Estilos para scroll-behavior suave (se mantiene) */
html {
    scroll-behavior: smooth;
}

/* Estilos básicos para headings (Pico los maneja) */
/* h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 700; 
    line-height: 1.2;
    color: var(--color-text); 
} */

/* h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; } */

/* Ajustes responsivos para tipografía (Pico los maneja) */
/* @media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
} */

/* Asegurar que los inputs y botones hereden la fuente (Pico lo maneja) */
/* input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
} */

/* Estilos para botones generales (Mantenemos tus botones personalizados por ahora) */
/* Asegúrate que estos estilos no choquen demasiado con los de Pico para role="button" */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--pico-border-radius, 25px); /* Usa variable de Pico o tu fallback */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.95rem; /* Pico usa 1rem, ajusta si es necesario */
    text-align: center;
}

.btn-primary {
    background-color: var(--pico-primary, var(--color-primary)); /* Usa tu color primario */
    color: var(--pico-primary-inverse, var(--color-background-dark)); 
    border-color: var(--pico-primary, var(--color-primary));
}

.btn-primary:hover {
    background-color: var(--pico-primary-hover, transparent);
    color: var(--pico-primary, var(--color-primary)); /* Texto debe ser el primario al hacer hover transparente */
    /* transform: translateY(-2px); Pico no añade transform por defecto */
    /* box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.3); */
}

.btn-secondary {
    background-color: var(--pico-secondary, var(--color-accent));
    color: var(--pico-secondary-inverse, var(--color-surface));
    border-color: var(--pico-secondary, var(--color-accent));
}

.btn-secondary:hover {
    background-color: var(--pico-secondary-hover, var(--color-accent));
    color: var(--pico-secondary-inverse, var(--color-surface));
    border-color: var(--pico-secondary-hover, var(--color-accent));
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 10px rgba(var(--color-text-rgb), 0.1); */
}

/* Ajustes responsivos de tus botones, pueden mantenerse */
@media (min-width: 768px) {
    .btn {
        padding: 0.85rem 1.8rem;
        font-size: 1rem;
    }
}

/* Estilos para Animaciones de Entrada (Se mantienen) */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; /* Asegura que cualquier transform inicial se resetee */
}

/* Tipos de Animación Específicos */
.fade-in {
    /* Ya cubierto por .animate-on-scroll y .is-visible */
}

.slide-in-up {
    transform: translateY(50px);
}

.slide-in-down {
    transform: translateY(-50px);
}

.slide-in-left {
    transform: translateX(-80px);
}

.slide-in-right {
    transform: translateX(80px);
}

.zoom-in {
    transform: scale(0.9);
}

/* Aplicar con retrasos para escalonar animaciones si es necesario */
/* Ejemplo: <div class="animate-on-scroll slide-in-up delay-1"> */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }

/* Ajustes para elementos dentro de secciones que también se animan */
.section .animate-on-scroll {
  /* Puedes ajustar el umbral o la animación específica para elementos dentro de secciones */
}

.section.bg-alt1 {
  background: linear-gradient(120deg, #f7f9fb 0%, #e3eaf6 100%);
}
.section.bg-alt2 {
  background: linear-gradient(120deg, #e5e7eb 0%, #f7f9fb 100%);
}
.section.bg-dark {
  background: linear-gradient(120deg, #1a2233 0%, #22304a 100%);
  color: #fff;
}

/* Contraste para textos importantes */
.text-brand {
  color: var(--color-accent-light);
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,0.10);
}

/* Inputs de formulario Bulma + custom */
input, textarea, select {
  border: 2px solid #b5b5b5;
  border-radius: 0.6rem;
  background: #fff;
  color: #222;
  font-size: 1.08rem;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 1.5px 8px 0 rgba(30,144,255,0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: #1e90ff;
  box-shadow: 0 0 0 2px #1e90ff33;
  outline: none;
  background: #fafdff;
}
::placeholder {
  color: #888;
  opacity: 1;
}