/*==================================================
  RESET & BASE
==================================================*/
*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    font-family:'Rubik',sans-serif;
    background:#f4f7f8;
    color:#333333;
    line-height:1.6;
    overflow-x:hidden;
}

/*==================================================
  CSS VARIABLES – PALETA COMPLEMENTARIA
==================================================*/
:root{
    /* Colores principales */
    --clr-primary:#00bfa5;
    --clr-primary-dark:#00917b;
    --clr-accent:#ff6f3c;
    --clr-accent-dark:#c45027;
    --clr-bg:#f4f7f8;
    --clr-bg-dark:#1e1e1e;
    --clr-text:#333333;
    --clr-text-light:#ffffff;
    /* Gradientes */
    --gradient-primary:linear-gradient(135deg,#00bfa5 0%,#00917b 100%);
    --gradient-accent:linear-gradient(135deg,#ff6f3c 0%,#c45027 100%);
    /* Sombras */
    --shadow-md:0 4px 10px rgba(0,0,0,.1);
    --shadow-lg:0 8px 20px rgba(0,0,0,.15);
    /* Animación */
    --transition:.3s ease;
}

/*==================================================
  TIPOGRAFÍA
==================================================*/
h1,h2,h3,h4,h5,h6{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    color:var(--clr-text);
    text-align:center;
    line-height:1.25;
    text-shadow:1px 1px 3px rgba(0,0,0,.05);
}

p,li,blockquote{
    font-weight:400;
    font-size:1rem;
    color:var(--clr-text);
}

.section-title{
    font-size:2.25rem;
    margin-bottom:2rem;
    position:relative;
}

.section-title::after{
    content:'';
    width:60px;
    height:4px;
    background:var(--clr-accent);
    display:block;
    margin:1rem auto 0;
    border-radius:2px;
}

/*==================================================
  UTILIDADES
==================================================*/
.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

.is-two-thirds{
    width:66.666%;
}

.text-center{
    text-align:center;
}

.mt-2{margin-top:2rem;}
.mb-2{margin-bottom:2rem;}
/*==================================================
  HEADER
==================================================*/
.main-header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:9000;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
    box-shadow:var(--shadow-md);
}

.main-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.75rem 0;
}

.logo{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    font-size:1.25rem;
    color:var(--clr-primary-dark);
    text-decoration:none;
}

.desktop-nav a,
.mobile-nav a{
    margin-left:1.25rem;
    font-weight:600;
    text-decoration:none;
    color:var(--clr-text);
    position:relative;
}

.desktop-nav a::after,
.mobile-nav a::after{
    content:'';
    position:absolute;
    width:0%;
    height:2px;
    left:0;
    bottom:-4px;
    background:var(--clr-primary);
    transition:width var(--transition);
}

.desktop-nav a:hover::after,
.mobile-nav a:hover::after{width:100%;}

.desktop-nav{
    display:flex;
}

.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
}

.burger span{
    width:24px;
    height:3px;
    background:var(--clr-text);
    border-radius:2px;
}

.mobile-nav{
    position:fixed;
    top:60px;
    right:-100%;
    background:var(--clr-bg);
    width:70%;
    height:calc(100% - 60px);
    display:flex;
    flex-direction:column;
    padding:2rem 1.5rem;
    transition:right var(--transition);
    box-shadow:var(--shadow-lg);
}

.mobile-nav.open{right:0;}

/*==================================================
  HERO
==================================================*/
.hero{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:140px 0 120px;
    position:relative;
    color:var(--clr-text-light);
}

.hero h1,.hero p{color:#ffffff;}

.hero .btn{
    margin-top:1.5rem;
}

/* Parallax backgrounds */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

/* Dark overlay handled inline via gradient in HTML */

/*==================================================
  BOTONES GLOBALES
==================================================*/
.btn,
button,
input[type='button'],
input[type='submit']{
    display:inline-block;
    padding:.75rem 1.75rem;
    font-weight:700;
    border:none;
    border-radius:30px;
    cursor:pointer;
    transition:transform var(--transition),background var(--transition),box-shadow var(--transition);
    text-decoration:none;
    text-align:center;
}

.btn.primary{
    background:var(--gradient-primary);
    color:#ffffff;
}

.btn.secondary{
    background:var(--gradient-accent);
    color:#ffffff;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(0,0,0,.15);
}

/*==================================================
  FEATURES, SERVICES, PROJECTS, CARDS
==================================================*/
.features-grid,
.services-grid,
.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

.card{
    background:#ffffff;
    border-radius:12px;
    box-shadow:var(--shadow-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:transform var(--transition),box-shadow var(--transition);
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
}

.card-image{
    width:100%;
    height:200px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.card-content{
    padding:1.25rem;
    text-align:center;
}

.card-content h3{
    font-size:1.25rem;
    margin-bottom:.75rem;
}

/*==================================================
  METHODOLOGY & ACCOLADES
==================================================*/
.methodology p{
    max-width:800px;
    margin:0 auto 2rem;
}

.toggle-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
}

/* Switch */
.switch{
    position:relative;
    display:inline-block;
    width:50px;
    height:26px;
}
.switch input{display:none;}
.slider{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#ccc;
    border-radius:26px;
    transition:background var(--transition);
}
.slider::before{
    content:'';
    position:absolute;
    height:22px;
    width:22px;
    left:2px;
    bottom:2px;
    background:white;
    border-radius:50%;
    transition:transform var(--transition);
}
input:checked + .slider{
    background:var(--clr-primary);
}
input:checked + .slider::before{
    transform:translateX(24px);
}

/*==================================================
  TESTIMONIALS
==================================================*/
.testimonials blockquote{
    background:#ffffffcc;
    backdrop-filter:blur(4px);
    padding:1.5rem 2rem;
    border-radius:10px;
    margin:1rem auto;
    max-width:700px;
    font-style:italic;
    position:relative;
}

.testimonials blockquote::before{
    content:'“';
    font-size:3rem;
    position:absolute;
    left:-10px;
    top:-20px;
    color:var(--clr-accent);
}

/*==================================================
  CASE STUDIES
==================================================*/
.case{
    background:#ffffff;
    padding:1.5rem 2rem;
    border-radius:10px;
    margin-bottom:1.5rem;
    box-shadow:var(--shadow-md);
}

/*==================================================
  CONTACT
==================================================*/
.contact form{
    max-width:700px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.form-row label{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    font-weight:600;
}

input[type="text"],
input[type="email"],
textarea{
    padding:.75rem 1rem;
    border:2px solid #e0e0e0;
    border-radius:8px;
    font-family:'Rubik',sans-serif;
    font-size:1rem;
    transition:border-color var(--transition),box-shadow var(--transition);
}

input:focus,
textarea:focus{
    outline:none;
    border-color:var(--clr-primary);
    box-shadow:0 0 0 3px rgba(0,191,165,.2);
}

/*==================================================
  FOOTER
==================================================*/
.main-footer{
    background:var(--clr-bg-dark);
    color:#ffffff;
    padding:2rem 0;
}

.main-footer p{
    text-align:center;
    margin-bottom:1rem;
}

.footer-nav{
    text-align:center;
    margin-bottom:.75rem;
}

.footer-nav a{
    color:#ffffff;
    margin:0 .75rem;
    text-decoration:none;
    font-weight:600;
}

.footer-nav a:hover{color:var(--clr-primary);}

.social{
    text-align:center;
}

.social a{
    color:var(--clr-accent);
    font-weight:700;
    margin:0 .5rem;
    text-decoration:none;
}

.social a:hover{color:var(--clr-primary);}

/*==================================================
  ACCORDION / MODALS
==================================================*/
.modal{
    display:none;
    position:fixed;
    top:0;left:0;width:100%;height:100vh;
    background:rgba(0,0,0,.7);
    z-index:9500;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}

.modal-content{
    background:#ffffff;
    padding:2rem;
    border-radius:12px;
    max-width:600px;
    width:100%;
    text-align:center;
    box-shadow:var(--shadow-lg);
}

/*==================================================
  EXTERNAL LINKS
==================================================*/
.link-list{
    list-style:none;
    max-width:850px;
    margin:0 auto;
    padding:0;
}

.link-list li{
    margin:.75rem 0;
    text-align:center;
}

.link-list a{
    color:var(--clr-primary-dark);
    font-weight:700;
}

.link-list a:hover{
    color:var(--clr-accent-dark);
}

/*==================================================
  PARALLAX EFFECT
==================================================*/
@media (prefers-reduced-motion:no-preference){
    .parallax{
        background-attachment:fixed;
    }
}

/*==================================================
  MORPHING ANIMATION
==================================================*/
@keyframes morph{
    0%{border-radius:42% 58% 60% 40% / 55% 45% 55% 45%;}
    50%{border-radius:55% 45% 35% 65% / 50% 60% 40% 50%;}
    100%{border-radius:42% 58% 60% 40% / 55% 45% 55% 45%;}
}

.morph{
    animation:morph 8s ease-in-out infinite alternate;
}

/*==================================================
  GLOSMORPHISM HELPER
==================================================*/
.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 4px 30px rgba(0,0,0,.1);
}

/*==================================================
  SUCCESS PAGE
==================================================*/
.success-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    padding:2rem;
}

/*==================================================
  PRIVACY & TERMS PADDING
==================================================*/
.legal-page{
    padding-top:100px;
}

/*==================================================
  RESPONSIVE
==================================================*/
@media(max-width:1024px){
    h1{font-size:2rem;}
    .section-title{font-size:1.75rem;}
}

@media(max-width:768px){
    .desktop-nav{display:none;}
    .burger{display:flex;}
    .is-two-thirds{width:90%;}
}

@media(max-width:480px){
    .card-image{height:160px;}
}

/*==================================================
  READ-MORE LINKS
==================================================*/
a.read-more{
    display:inline-block;
    margin-top:.75rem;
    color:var(--clr-accent);
    font-weight:700;
    position:relative;
}

a.read-more::after{
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:0%;
    height:2px;
    background:var(--clr-accent);
    transition:width var(--transition);
}

a.read-more:hover::after{width:100%;}
.burger{
    display: none;
}