/* =========================
      VARIABLES & GLOBALS
========================= */
:root {
    /* MONOCHROME SCALE */
    --clr-50: #ffffff;
    --clr-100: #f0f0f0;
    --clr-200: #d9d9d9;
    --clr-300: #bfbfbf;
    --clr-400: #8c8c8c;
    --clr-500: #595959;
    --clr-600: #3d3d3d;
    --clr-700: #262626;
    --clr-800: #1a1a1a;
    --clr-900: #0d0d0d;

    /* ACCENT (DISCRETE DENTRO DE LA ESCALA) */
    --accent-400: #707070;
    --accent-500: #4a4a4a;
    --accent-600: #2e2e2e;

    /* GRADIENT */
    --gradient-start: var(--clr-600);
    --gradient-end: var(--clr-800);

    /* TYPOGRAFÍA */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Work Sans', sans-serif;

    /* TRANSICIONES */
    --tr-fast: 0.15s ease-out;
    --tr-medium: 0.3s ease-out;
}

/* =========================
          BASICS
========================= */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--clr-600);
    background-color: var(--clr-50);
    line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--clr-700);
    text-align: center;
    margin-bottom: 0.75em;
}

/* =========================
          NAVBAR
========================= */
.navbar.is-transparent {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.3) 100%
    );
    backdrop-filter: blur(6px);
}
.navbar-item,
.navbar-burger {
    color: var(--clr-100);
    transition: color var(--tr-fast);
}
.navbar-item:hover,
.navbar-burger:hover {
    color: var(--clr-50);
}

/* =========================
           HERO
========================= */
.hero {
    position: relative;
    overflow: hidden;
}
.hero .title,
.hero .subtitle {
    color: var(--clr-50); /* WHITE TEXT */
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
#hero-particles,
#workshop-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* =========================
        UTILIDADES
========================= */
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================
         BUTTONS
========================= */
button,
input[type='submit'],
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    background: var(--accent-500);
    color: var(--clr-50);
    border: none;
    border-radius: 4px;
    padding: 0.75em 1.5em;
    cursor: pointer;
    transition: background var(--tr-fast), transform var(--tr-fast);
}
button:hover,
input[type='submit']:hover,
.btn:hover {
    background: var(--accent-600);
    transform: translateY(-2px);
}
button:active,
input[type='submit']:active,
.btn:active {
    transform: translateY(0);
}

/* =========================
         LINKS
========================= */
a {
    color: var(--accent-500);
    text-decoration: none;
    transition: color var(--tr-fast);
}
a:hover {
    color: var(--accent-600);
}
a.read-more {
    font-weight: 600;
    position: relative;
}
a.read-more::after {
    content: '→';
    margin-left: 0.25rem;
    transition: transform var(--tr-fast);
}
a.read-more:hover::after {
    transform: translateX(4px);
}

/* =========================
       SLIDER / CARDS
========================= */
.slider {
    position: relative;
    overflow: hidden;
}
.slides {
    display: flex;
    gap: 1.5rem;
    transition: transform var(--tr-medium);
}
.slide {
    min-width: 100%;
}
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--clr-50);
    border: 1px solid var(--clr-200);
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    height: 100%;
    transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.card-image,
.image-container {
    width: 100%;
    height: 240px;
    overflow: hidden;
}
.card-image img,
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
}
.card-content {
    padding: 1.25rem;
}

/* =========================
          ACCORDION
========================= */
.accordion-content {
    display: none;
    border-top: 1px solid var(--clr-200);
    padding-top: 1rem;
}
.card.is-active .accordion-content {
    display: block;
}
.accordion-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--clr-500);
    transition: transform var(--tr-fast);
}
.card.is-active .accordion-trigger {
    transform: rotate(45deg);
}

/* =========================
       SECTION SPECIFIC
========================= */
.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.section.has-background-light {
    background-color: var(--clr-100);
}
.section .title {
    margin-bottom: 2rem;
}

/* =========================
      CONTACT FORM
========================= */
#contactForm .field:not(:last-child) {
    margin-bottom: 1.25rem;
}
#contactForm .input,
#contactForm .textarea {
    border-color: var(--clr-200);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
#contactForm .input:focus,
#contactForm .textarea:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

/* =========================
           FOOTER
========================= */
.footer {
    padding: 3rem 1.5rem;
}
.footer a {
    color: var(--clr-100);
    margin: 0 0.35rem;
    transition: color var(--tr-fast);
}
.footer a:hover {
    color: var(--clr-50);
}
.social-link {
    font-weight: 600;
}

/* =========================
         SUCCESS PAGE
========================= */
.page-success {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg,var(--clr-700),var(--clr-800));
    color: var(--clr-100);
}

/* =========================
      LEGAL PAGES PADDING
========================= */
.page-legal {
    padding-top: 100px;
}

/* =========================
     COOKIE POPUP OVERRIDE
========================= */
#cookie-popup {
    font-size: 0.95rem;
}
#cookie-popup button {
    margin-left: 1rem;
}

/* =========================
      MEDIA QUERIES
========================= */
@media (min-width: 769px) {
    .slide { min-width: 50%; }
    .card-image,
    .image-container { height: 280px; }
}

@media (min-width: 1024px) {
    .slide { min-width: 33.333%; }
}

/* =========================
     ANIMACIÓN DE PARTÍCULAS
========================= */
/* Canvas posicionado en HTML, solo aseguramos z-index */
canvas.particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.columns.is-multiline {
  justify-content: center;
}