/* ───────────────────────── ROOT THEME ───────────────────────── */
:root{
    /* Triadic palette */
    --clr-primary:#ff6b6b;           /* Rojo coral */
    --clr-primary-dark:#d95a5a;

    --clr-secondary:#4ecdc4;         /* Turquesa */
    --clr-secondary-dark:#35a9a1;

    --clr-tertiary:#556270;          /* Pizarra */
    --clr-tertiary-dark:#39424e;

    --clr-light:#ffffff;
    --clr-dark:#1a1a1a;

    --radius-sm:4px;
    --radius-md:12px;

    --shadow-sm:0 2px 6px rgba(0,0,0,.1);
    --shadow-md:0 4px 15px rgba(0,0,0,.15);

    --transition-fast:.25s ease;
    --transition-slow:.6s cubic-bezier(.25,.1,.25,1);

    --font-heading:'Raleway',sans-serif;
    --font-body:'Open Sans',sans-serif;
}

/* ───────────────────────── GLOBAL RESETS  ───────────────────────── */
html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    color:var(--clr-dark);
    background:var(--clr-light);
    line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    margin:0 0 .75em;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
.section-title{
    font-size:clamp(1.8rem,4vw,2.7rem);
    font-weight:800;
    color:var(--clr-tertiary-dark);
    position:relative;
    margin-bottom:2rem;
}
p{margin-bottom:1rem;}
a{color:var(--clr-primary);text-decoration:none;transition:color var(--transition-fast);}
a:hover,a:focus{color:var(--clr-secondary-dark);}

/* ───────────────────────── LAYOUT HELPERS ───────────────────────── */
.brutal-grid{
    /*display:grid;*/
    /*grid-template-columns[minmax(1rem,1fr)] minmax(auto,1300px) [end] minmax(1rem,1fr);*/
}
.brutal-grid>*{
    grid-column:2;
}
.is-two-thirds{
    width:100%;
    max-width:66%;
    margin:0 auto;
}
@media(max-width:768px){
    .is-two-thirds{max-width:90%;}
}

/* ───────────────────────── NAVIGATION ───────────────────────── */
.site-header{
    position:sticky;top:0;z-index:999;
    background:var(--clr-light);
    box-shadow:var(--shadow-sm);
    display:flex;align-items:center;
    padding:.75rem 1.25rem;
}
.logo-link{font-weight:800;font-size:1.4rem;color:var(--clr-dark);}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;}
.main-nav a{font-weight:600;}
/* Burger */
.nav-toggle{display:none;}
.nav-toggle-label{display:none;}
@media (max-width:900px){
    .nav-toggle-label{
        display:block;
        width:28px;height:21px;cursor:pointer;margin-left:auto;
    }
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after{
        content:'';display:block;width:100%;height:3px;
        background:var(--clr-dark);border-radius:2px;
        transition:transform .3s ease;
    }
    .nav-toggle-label span::before{transform:translateY(-8px);}
    .nav-toggle-label span::after{transform:translateY(5px);}
    .main-nav{position:fixed;inset:0 0 auto auto;top:56px;right:-100%;background:var(--clr-light);
              flex-direction:column;align-items:flex-start;padding:1.5rem;transition:right var(--transition-fast);}
    .main-nav ul{flex-direction:column;gap:1rem;}
    .nav-toggle:checked + .nav-toggle-label span{transform:rotate(45deg);}
    .nav-toggle:checked + .nav-toggle-label span::before{transform:rotate(90deg);}
    .nav-toggle:checked + .nav-toggle-label span::after{opacity:0;}
    .nav-toggle:checked ~ .main-nav{right:0;}
}

/* ───────────────────────── BUTTONS ───────────────────────── */
.btn,
button,
input[type='submit']{
    background:var(--clr-primary);
    color:var(--clr-light);
    border:none;
    padding:.75rem 1.6rem;
    font-family:var(--font-heading);
    font-weight:700;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:background var(--transition-fast),transform var(--transition-fast);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-secondary);
    transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}

/* ───────────────────────── HERO ───────────────────────── */
.hero-section{
    min-height:75vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--clr-light);
    text-align:center;
    position:relative;
    background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
    clip-path:ellipse(150% 100% at 50% 0%); /* Искривленная сетка */
}
.hero-title{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;}
.hero-subtitle{font-size:clamp(1.1rem,2.5vw,1.4rem);max-width:600px;margin:0 auto 2rem;}
.hero-btn{font-size:1rem;}

/* ───────────────────────── SECTIONS GENERAL ───────────────────────── */
.section{padding:4rem 0;position:relative;overflow:hidden;}
.section:nth-of-type(even){background:var(--clr-secondary);color:var(--clr-dark);}
.section:nth-of-type(even) .section-title{color:var(--clr-light);}
.white-title{color:var(--clr-light);}

/* Parallax effect for sections with bg image */
.section[style*="background-image"]{background-size:cover;background-repeat:no-repeat;background-attachment:fixed;}

/* ───────────────────────── CARDS ───────────────────────── */
.card{
    display:flex;flex-direction:column;align-items:center;
    background:var(--clr-light);border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);padding:1.5rem;margin:1rem 0;
    transition:transform var(--transition-fast),box-shadow var(--transition-fast);
    text-align:center;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card-image{width:100%;height:220px;overflow:hidden;border-radius:var(--radius-sm);}
.card-image img{width:100%;height:100%;object-fit:cover;display:block;margin:0 auto;}
.card-content h3{margin-top:1rem;font-weight:700;color:var(--clr-tertiary-dark);}
.card-content p{color:var(--clr-dark);}

/* ───────────────────────── TOGGLE ───────────────────────── */
.toggle-wrapper{margin:2rem auto;text-align:center;}
.toggle-input{appearance:none;width:50px;height:26px;background:var(--clr-tertiary-dark);border-radius:13px;position:relative;cursor:pointer;transition:background var(--transition-fast);}
.toggle-input::before{
    content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--clr-light);transition:transform var(--transition-fast);}
.toggle-input:checked{background:var(--clr-primary-dark);}
.toggle-input:checked::before{transform:translateX(24px);}
.toggle-label{display:block;margin-bottom:.5rem;font-weight:600;}

/* ───────────────────────── TESTIMONIALS ───────────────────────── */
#testimonials .card{background:rgba(255,255,255,.85);}

/* ───────────────────────── CONTACT FORM ───────────────────────── */
.contact-form{display:grid;gap:1rem;}
.field{display:flex;flex-direction:column;}
.field label{font-weight:600;margin-bottom:.3rem;color:var(--clr-light);}
.field input,.field textarea{
    padding:.65rem .9rem;border-radius:var(--radius-sm);border:none;
    font-family:var(--font-body);background:rgba(255,255,255,.9);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--clr-secondary);}

/* ───────────────────────── FOOTER ───────────────────────── */
.site-footer{
    background:var(--clr-tertiary-dark);color:var(--clr-light);padding:3rem 0;text-align:center;
}
.footer-columns{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-bottom:2rem;}
.footer-column h4{margin-bottom:.75rem;color:var(--clr-secondary);}
.footer-column ul{list-style:none;margin:0;padding:0;}
.footer-column a{color:var(--clr-light);}
.footer-column a:hover{color:var(--clr-primary);}
.credits{font-size:.85rem;color:var(--clr-secondary);}

/* Social text-as-icons */
.footer-column ul li a::before{
    content:'➜ ';font-weight:700;color:var(--clr-primary);
}

/* ───────────────────────── MODAL ───────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;}
.modal[aria-hidden="false"]{display:flex;}
.modal-content{
    background:var(--clr-light);padding:2rem;border-radius:var(--radius-md);max-width:500px;
    animation:morph 1s ease forwards;
}
.modal-close{
    position:absolute;top:1rem;right:1rem;font-size:1.5rem;cursor:pointer;
}

/* ───────────────────────── MORPHING ANIMATION ───────────────────────── */
@keyframes morph{
    0%{border-radius:10% 90% 30% 70%/10% 30% 70% 90%;}
    50%{border-radius:70% 30% 80% 20%/60% 80% 20% 40%;}
    100%{border-radius:var(--radius-md);}
}

/* ───────────────────────── LINK “LEER MÁS” ───────────────────────── */
.blog-list a{
    font-weight:700;
    display:inline-block;
    margin-top:.5rem;
    position:relative;
}
.blog-list a::after{
    content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;
    background:var(--clr-secondary);transform:scaleX(0);transform-origin:left;
    transition:transform var(--transition-fast);
}
.blog-list a:hover::after{transform:scaleX(1);}

/* ───────────────────────── PAGE SPECIFIC ───────────────────────── */
.success-page, /* add class in HTML body for success.html */
.privacy-page,
.terms-page{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;}

.success-page{min-height:100vh;background:var(--clr-secondary);color:var(--clr-dark);}
/*.privacy-page,.terms-page{padding-top:100px;}*/

/* ───────────────────────── UTILITIES ───────────────────────── */
.hidden{display:none!important;}
.parallax{background-attachment:fixed!important;}
.text-white{color:var(--clr-light)!important;}
.bg-gradient-dark{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));}
.footer{
    width: 100%;
}