/* -------------------------------------------------
   GLOBAL THEME VARIABLES  |  BRUTALISM + TRIAD
-------------------------------------------------*/
:root{
    /* Base Triadic Palette */
    --clr-primary: #ff0055;          /* Magenta-rojo */
    --clr-secondary: #00c2a6;        /* Verde-turquesa */
    --clr-tertiary: #0055ff;         /* Azul eléctrico */

    /* Darker Shades for Hover / Shadows */
    --clr-primary-dark: #b8003d;
    --clr-secondary-dark: #008a7a;
    --clr-tertiary-dark: #003db3;

    /* Neutrals */
    --clr-bg: #fafafa;
    --clr-bg-dark: #1a1a1a;
    --clr-text: #222222;
    --clr-text-light: #ffffff;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg,var(--clr-primary),var(--clr-secondary));
    --gradient-secondary: linear-gradient(135deg,var(--clr-secondary),var(--clr-tertiary));
    --gradient-tertiary: linear-gradient(135deg,var(--clr-tertiary),var(--clr-primary));
    
    /* Shadows */
    --shadow-strong: 0 8px 30px rgba(0,0,0,0.2);
    --shadow-soft:   0 4px 15px rgba(0,0,0,0.1);

    /* Fonts */
    --font-head: 'Archivo Black', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

/* -------------------------------------------------
   RESET & BASE
-------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-body);
    color:var(--clr-text);
    background:var(--clr-bg);
    line-height:1.6;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-head);
    line-height:1.2;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
p,li{max-width:80ch;margin-bottom:1rem}
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}
.is-two-thirds{width:100%}

/* -------------------------------------------------
   HEADER & NAVIGATION
-------------------------------------------------*/
.header{
    width:100%;
    position:fixed;
    top:0;left:0;
    background:var(--clr-bg);
    z-index:9000;
    border-bottom:4px solid var(--clr-primary);
    padding:1rem 0;
}
.logo{color:var(--clr-primary);font-size:1.8rem;letter-spacing:1px}
.nav ul{list-style:none;display:flex;gap:1rem;flex-wrap:wrap}
.nav a{
    color:var(--clr-text);
    padding:.5rem .75rem;
    border:2px solid transparent;
    transition:all .25s ease;
    font-weight:500;
}
.nav a:hover,.nav a:focus{
    border-color:var(--clr-primary);
    background:var(--clr-primary);
    color:var(--clr-text-light);
}
.burger{
    display:none;
    background:none;
    border:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}
.burger span{
    display:block;
    width:25px;
    height:3px;
    background:var(--clr-text);
    border-radius:3px;
}
/* Mobile Nav */
@media(max-width:768px){
    .nav{display:none;flex-direction:column;margin-top:1rem}
    .burger{display:flex}
    .nav.open{display:flex}
}

/* -------------------------------------------------
   GLOBAL BUTTONS
-------------------------------------------------*/
.btn,button,input[type='submit']{
    appearance:none;
    border:none;
    cursor:pointer;
    font-family:var(--font-head);
    text-transform:uppercase;
    padding:.75rem 1.5rem;
    margin:.5rem 0;
    letter-spacing:1px;
    background:var(--gradient-primary);
    color:var(--clr-text-light);
    border-radius:6px;
    transition:transform .25s ease,box-shadow .25s ease,filter .3s ease;
}
.btn-secondary{background:var(--gradient-secondary)}
.btn:hover,button:hover,input[type='submit']:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-strong);
    filter:brightness(1.1);
}

/* -------------------------------------------------
   SECTIONS
-------------------------------------------------*/
.brutal-section{
    padding:4rem 0;
    border-bottom:6px solid var(--clr-primary);
}
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    color:var(--clr-text-light);
    position:relative;
}
.parallax::before{           /* Dark overlay */
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.5);
}
.parallax > .container{position:relative;z-index:1}

/* Hero */
.hero{
    min-height:85vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-size:cover;
    background-repeat:no-repeat;
    color:var(--clr-text-light);
    text-align:center;
}
.hero-title{font-size:clamp(2.5rem,6vw,4.2rem);margin-bottom:1rem}
.hero-text{font-size:clamp(1rem,2vw,1.3rem);margin-bottom:2rem}

/* -------------------------------------------------
   CARDS & GRIDS
-------------------------------------------------*/
.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
    margin-top:2rem;
}
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--clr-bg);
    border:4px solid var(--clr-tertiary);
    box-shadow:var(--shadow-soft);
    transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-strong)}
.card-image .image-container{
    width:100%;
    height:200px;
    overflow:hidden;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
.card-content{padding:1.5rem}

/* -------------------------------------------------
   ACCORDION
-------------------------------------------------*/
.accordion-item{border:2px solid var(--clr-secondary);margin-bottom:1rem}
.accordion-header{
    width:100%;text-align:left;
    background:var(--clr-secondary);
    color:var(--clr-text-light);
    padding:.75rem 1rem;
    cursor:pointer;
    font-family:var(--font-head);
    border:none;
}
.accordion-body{display:none;padding:1rem;background:var(--clr-bg-dark);color:var(--clr-text-light)}
.accordion-item.active .accordion-body{display:block}

/* -------------------------------------------------
   EVENTS
-------------------------------------------------*/
.event-list{list-style:none;margin-top:2rem}
.event-list li{
    background:var(--clr-tertiary);
    border-left:8px solid var(--clr-secondary);
    color:var(--clr-text-light);
    padding:1rem;
    margin-bottom:1.5rem;
    box-shadow:var(--shadow-soft);
}

/* -------------------------------------------------
   PRICING
-------------------------------------------------*/
.price{font-size:2rem;font-family:var(--font-head);margin:1rem 0;color:var(--clr-primary-dark)}

/* -------------------------------------------------
   CONTACT FORM
-------------------------------------------------*/
form{display:flex;flex-direction:column;gap:1rem}
.form-group{display:flex;flex-direction:column}
input,textarea{
    padding:.75rem 1rem;
    border:2px solid var(--clr-tertiary);
    border-radius:4px;
    font-family:var(--font-body);
    resize:vertical;
}
input:focus,textarea:focus{outline:none;border-color:var(--clr-secondary-dark)}

/* -------------------------------------------------
   FOOTER
-------------------------------------------------*/
.footer{
    background:var(--clr-bg-dark);
    color:var(--clr-text-light);
    padding:3rem 0;
    border-top:6px solid var(--clr-secondary);
    text-align:center;
}
.footer-nav ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.footer-nav a{
    color:var(--clr-text-light);
    font-weight:500;
    padding:.25rem .5rem;
    border-bottom:2px solid transparent;
    transition:border-color .25s ease;
}
.footer-nav a:hover{border-color:var(--clr-primary)}
.social a{
    color:var(--clr-secondary);
    margin:0 .5rem;
    font-weight:600;
    text-decoration:none;
    position:relative;
}
.social a::after{
    content:'';
    position:absolute;left:0;bottom:-3px;
    width:0;height:2px;background:var(--clr-secondary);
    transition:width .25s ease;
}
.social a:hover::after{width:100%}

/* -------------------------------------------------
   SUCCESS PAGE
-------------------------------------------------*/
.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-tertiary);
    color:var(--clr-text-light);
    text-align:center;
}

/* -------------------------------------------------
   PRIVACY & TERMS PAGES
-------------------------------------------------*/
.page-privacy,.page-terms{padding-top:100px}

/* -------------------------------------------------
   LINKS & "READ MORE"
-------------------------------------------------*/
a{color:var(--clr-tertiary-dark);text-decoration:none}
a:hover{text-decoration:underline}
.read-more{
    display:inline-block;
    margin-top:1rem;
    font-weight:600;
    color:var(--clr-primary);
    position:relative;
}
.read-more::after{
    content:'➜';
    margin-left:.25rem;
    transition:transform .2s ease;
}
.read-more:hover::after{transform:translateX(3px)}

/* -------------------------------------------------
   SCROLL REVEAL PLACEHOLDER CLASSES
-------------------------------------------------*/
/*[data-sr]{opacity:0;transform:translateY(40px);transition:opacity .6s ease-out,transform .6s ease-out}*/
/*[data-sr.revealed]{opacity:1;transform:translateY(0)}*/

/* -------------------------------------------------
   PARALLAX IMAGE CLASS (for fallback)
-------------------------------------------------*/
@media(max-width:1024px){
    .parallax{background-attachment:scroll}
}

/* -------------------------------------------------
   COOKIE POPUP ENHANCEMENT
-------------------------------------------------*/
#cookiePopup .btn-secondary{
    font-size:.9rem;
    padding:.5rem 1rem;
    background:var(--clr-secondary);
}

/* -------------------------------------------------
   UTILITY CLASSES
-------------------------------------------------*/
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}
.hide{display:none!important}
p{
        color: black;
}
img{
    width: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    nav, .burger{
        display: none;
    }

}