/* ======================================================
   NeoBelleza — style.css
   Diseño Futurista + Curved Grids + Parallax
   ====================================================== */

/* ---------- VARIABLES GLOBALES ---------- */
:root{
    /* Paleta “Triada” */
    --color-primary:#E7B9C0;     /* Azul Vibrante */
    --color-secondary:#FAF6F3;   /* Amarillo Solar */
    --color-tertiary:#D6A756;    /* Verde Lima */
    --color-accent:#F45D01;      /* Naranja Enérgico */

    --color-dark:#111111;
    --color-mid:#333333;
    --color-light:#FAF6F3;
    --color-muted:#888888;

    --radius:8px;
    --shadow:0 4px 14px rgba(0,0,0,0.12);

    --transition:all .3s ease;
}

/* ---------- BASE ---------- */
html{
    scroll-behavior:smooth;
    box-sizing:border-box;
}
*,*:before,*:after{box-sizing:inherit;}

body{
    font-family:'Open Sans',sans-serif;
    color:var(--color-mid);
    background:var(--color-light);
    margin:0;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Raleway',sans-serif;
    font-weight:600;
    margin:0 0 .75rem 0;
    color:var(--color-dark);
    text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}
p{margin:0 0 1.25rem;}
.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* ---------- COMPONENTES ---------- */
.section{padding:4rem 0;}
.section-title{
    text-align:center;
    font-size:2.25rem;
    margin-bottom:2rem;
    position:relative;
}
.section-title:after{
    content:'';
    width:60px;
    height:4px;
    background:var(--color-primary);
    display:block;
    margin:1rem auto 0;
    border-radius:2px;
}

/* BOTONES GLOBALES */
.btn,
button,
input[type='submit']{
    display:inline-block;
    background:var(--color-primary);
    color:#fff;
    padding:.75rem 1.75rem;
    border:none;
    border-radius:var(--radius);
    font-family:'Raleway',sans-serif;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--color-accent);
    transform:translateY(-3px);
}

/* ENLACES */
a{color:var(--color-primary);text-decoration:none;transition:var(--transition);}
a:hover{color:var(--color-accent);}

/* ---------- HEADER & NAV ---------- */
.header{
    position:fixed;
    top:0;left:0;width:100%;
    background:rgba(17,17,17,0.9);
    backdrop-filter:blur(10px);
    z-index:9000;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.75rem 0;
}
.logo a{color:#fff;font-size:1.5rem;font-weight:800;}
.main-nav ul{
    list-style:none;
    display:flex;
    gap:1.5rem;
    margin:0;padding:0;
}
.main-nav a{color:#fff;font-weight:600;font-size:.9375rem;}
.main-nav a:hover{color:var(--color-secondary);}
.burger{
    display:none;
    flex-direction:column;
    gap:.25rem;
    background:none;border:none;cursor:pointer;
}
.burger span{
    display:block;
    width:22px;height:2px;
    background:#fff;border-radius:2px;
}

/* ---------- HERO ---------- */
.hero{
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:#FFFFFF;
    text-align:center;
    padding:8rem 0 6rem;
    position:relative;
}
.hero:before{ /* dramatiza overlay extra */
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.4));
}
.hero-content{
    position:relative;
    max-width:800px;
    margin:0 auto;
}
.hero-title{font-size:3rem;margin-bottom:1rem;}
.hero-text{font-size:1.125rem;margin-bottom:2rem;}

/* ---------- CURVED GRID (Servicios / Equipo) ---------- */
.curved-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:2rem;
    clip-path:polygon(0 0,100% 3%,100% 97%,0 100%);
    padding:2rem 0;
}

/* ---------- CARD UNIVERSAL ---------- */
.card{
    background:rgba(255,255,255,0.9);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
    transition:var(--transition);
}
.card:hover{transform:translateY(-6px);}
.card-image{width:100%;height:260px;overflow:hidden;}
.card-image img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ---------- TIMELINE ---------- */
.timeline{border-left:3px solid var(--color-primary);padding-left:1.5rem;}
.timeline-event{position:relative;margin-bottom:2rem;}
.timeline-date{
    position:absolute;left:-2.8rem;top:0;
    background:var(--color-primary);
    color:#fff;
    border-radius:50%;
    width:2.5rem;height:1.5rem;
    font-size:.75rem;
    display:flex;align-items:center;justify-content:center;
}

/* ---------- PROGRESS ---------- */
.progress-wrapper{margin-top:2rem;}
progress{
    width:100%;
    height:1rem;
    appearance:none;
}
progress::-webkit-progress-bar{
    background:#e0e0e0;border-radius:var(--radius);
}
progress::-webkit-progress-value{
    background:var(--color-tertiary);
    border-radius:var(--radius);
}

/* ---------- VISIÓN ---------- */
.vision{
    background-size:cover;background-repeat:no-repeat;
    background-attachment:fixed;
    color:var(--color-dark);
    clip-path:polygon(0 2%,100% 0,100% 98%,0 100%);
}
.vision p{max-width:800px;margin:0 auto;font-size:1.125rem;}

/* ---------- PARTNERS ---------- */
.partners{
    text-align:center;color:#fff;
    background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
}
.partners-logos{
    display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;margin:2rem 0;
}
.partners img{filter:brightness(0) invert(1);}

/* ---------- EXTERNAL LINKS ---------- */
.external-links{list-style:none;padding:0;}
.external-links li{margin-bottom:.75rem;}
.external-links a{font-weight:600;}

/* ---------- CONTACTO ---------- */
.contact-form{
    max-width:600px;margin:0 auto;display:grid;gap:1rem;
}
.form-group{display:flex;flex-direction:column;}
input,textarea{
    padding:.75rem 1rem;
    border:1px solid #ccc;border-radius:var(--radius);
    font-family:'Open Sans',sans-serif;
}
input:focus,textarea:focus{outline:none;border-color:var(--color-primary);}
.contact-form .btn-primary{justify-self:flex-start;}

/* ---------- MODAL ---------- */
.modal{
    position:fixed;top:0;left:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,0.8);
    opacity:0;pointer-events:none;
    transition:var(--transition);
    z-index:10000;
}
.modal.is-visible{opacity:1;pointer-events:auto;}
.modal-content{
    background:#fff;color:var(--color-dark);padding:2rem;
    border-radius:var(--radius);text-align:center;
    max-width:400px;width:90%;
}

/* ---------- FOOTER ---------- */
.footer{
    background:#111;color:#ccc;padding:2rem 0;text-align:center;
}
.footer a{color:var(--color-secondary);font-weight:600;}
.footer a:hover{color:var(--color-tertiary);}
.footer-inner{display:flex;flex-direction:column;gap:1rem;}

/* ---------- LEER MÁS LINK ---------- */
.read-more{
    display:inline-block;
    color:var(--color-primary);
    font-weight:700;
    position:relative;
}
.read-more:after{
    content:'→';margin-left:.25rem;transition:var(--transition);
}
.read-more:hover{color:var(--color-accent);}
.read-more:hover:after{transform:translateX(4px);}

/* ---------- PARALLAX SECTIONS ---------- */
.hero, .vision, .partners{
    background-attachment:fixed;
    background-position:center;
}

/* ---------- GLAZMORPHISM CARDS (Case Studies) ---------- */
.case-study{
    backdrop-filter:blur(8px);
    background:rgba(255,255,255,0.75);
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:992px){
    .main-nav{position:absolute;top:100%;right:0;background:#111;width:240px;flex-direction:column;align-items:flex-start;padding:1rem;transform:translateX(100%);transition:var(--transition);}
    .main-nav.is-open{transform:translateX(0);}
    .main-nav ul{flex-direction:column;gap:1rem;}
}
@media(max-width:576px){
    .hero-title{font-size:2.25rem;}
    .section{padding:3rem 0;}
}

/* ---------- PAGES ESPECÍFICAS ---------- */
.success-page{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
}
.legal-page{padding-top:100px;} /* privacy & terms */

/* ---------- UTILITY ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.hidden{display:none!important;}
/* ====================================================== */

textarea {
  resize: none;
}

.about section > img {
  height: 300px;
  object-fit: cover;
}