/* ===============================
   Ulta Beauty – style.css
   Creativo · UI Volumétrico
   =============================== */

/* ---------- Variables de Tema ---------- */
:root{
    /* Paleta Separada-Complementaria */
    --color-primary:#FF6F61;           /* Coral vibrante */
    --color-primary-dark:#D85E53;

    --color-secondary:#6C63FF;         /* Violeta intenso */
    --color-secondary-dark:#5952D1;

    --color-accent:#00C9A7;            /* Verde agua */
    --color-accent-dark:#00A489;

    --color-neutral-100:#FFFFFF;
    --color-neutral-900:#1F1F1F;

    --gradient-primary:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
    --gradient-secondary:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-accent) 100%);

    --radius-lg:1rem;
    --shadow-lg:0 10px 25px rgba(0,0,0,.15);

    --transition-fast:.25s ease;
}

/* ---------- Tipografía ---------- */
body{
    font-family:'Open Sans',sans-serif;
    color:var(--color-neutral-900);
    line-height:1.6;
    background-color:#fafafa;
    scroll-behavior:smooth;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Raleway',sans-serif;
    font-weight:700;
    color:var(--color-neutral-900);
    text-align:center;
    margin-bottom:.5em;
}
.section h2{
    font-size:2rem;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
}

/* ---------- Utilidades ---------- */
.text-center{text-align:center;}
.flex-center{display:flex;justify-content:center;align-items:center;}
.mt-6{margin-top:3rem;}
.btn,
button,
input[type='submit']{
    background:var(--color-primary);
    color:var(--color-neutral-100);
    border:none;
    padding:.75rem 2rem;
    border-radius:var(--radius-lg);
    cursor:pointer;
    font-family:'Raleway',sans-serif;
    font-weight:600;
    transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
    display:inline-block;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--color-primary-dark);
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.btn:active,
button:active,
input[type='submit']:active{
    transform:translateY(0);
    box-shadow:none;
}
.read-more{
    color:var(--color-secondary);
    font-weight:600;
    position:relative;
}
.read-more::after{
    content:'→';
    margin-left:.25rem;
    transition:margin-left var(--transition-fast);
}
.read-more:hover::after{margin-left:.5rem;}

/* ---------- Navbar Fijo ---------- */
.navbar.is-fixed-top{
    backdrop-filter:blur(10px);
    background:rgba(255,255,255,.9);
    border-bottom:1px solid rgba(0,0,0,.05);
    transition:background var(--transition-fast);
}
.navbar-item.is-active{color:var(--color-primary)!important;}

/* ---------- Hero ---------- */
#hero{
    position:relative;
}
#hero .hero-body{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
#hero .title,
#hero .subtitle{color:#FFFFFF;}
/* Suavizar transiciones para overlay si cambia */
#hero::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));
    z-index:-1;
}

/* ---------- Secciones Generales ---------- */
.section{
    padding:3.5rem 1.5rem;
}
.section.has-background-light{
    background-color:#F6F7FB;
}

/* ---------- Cards ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    background:var(--color-neutral-100);
    transition:transform var(--transition-fast),box-shadow var(--transition-fast);
}
.card:hover,
.item:hover,
.testimonial:hover,
.product-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.card-image,
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ---------- Timeline (Bulma Override) ---------- */
.timeline.is-centered .timeline-item{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:1rem;
}

/* ---------- Accordion ---------- */
.accordion .message{
    cursor:pointer;
    transition:box-shadow var(--transition-fast);
}
.accordion .message:hover{box-shadow:0 6px 15px rgba(0,0,0,.12);}
.accordion .message-body{
    line-height:1.5;
}

/* ---------- Switch ---------- */
.switch.is-rounded{
    accent-color:var(--color-secondary);
}

/* ---------- Recursos (enlaces) ---------- */
#resources a{
    color:var(--color-secondary-dark);
    font-weight:600;
}
#resources a:hover{color:var(--color-secondary);}

/* ---------- Métodos Glassmorph ---------- */
.glass{
    background:rgba(255,255,255,.3);
    backdrop-filter:blur(12px);
    border-radius:var(--radius-lg);
    border:1px solid rgba(255,255,255,.4);
}

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

/* ---------- Scroll Animations Placeholder ---------- */
[data-motion]{
    opacity:0;
    transform:translateY(50px);
    will-change:opacity,transform;
    transition:opacity .6s ease-out,transform .6s ease-out;
}

/* ---------- Éxito Page ---------- */
.success-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-align:center;
}

/* ---------- Privacy & Terms ---------- */
.legal-page{
    padding-top:100px;
}

/* ---------- Footer ---------- */
footer.footer{
    padding:3rem 1.5rem;
    background:var(--color-neutral-900);
    color:#CCCCCC;
}
footer .title{
    color:#FFFFFF;
    font-size:1.25rem;
}
footer a{
    color:#CCCCCC;
    transition:color var(--transition-fast);
}
footer a:hover{color:var(--color-primary);}
/* Social text styles */
.social-link{
    font-weight:600;
}
.social-link:hover{text-decoration:underline;}

/* ---------- Botones flotantes / micro-UX ---------- */
.floating-btn{
    position:fixed;
    bottom:1.5rem;
    right:1.5rem;
    background:var(--gradient-primary);
    color:#fff;
    width:56px;
    height:56px;
    border-radius:50%;
    box-shadow:var(--shadow-lg);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:900;
    transition:transform var(--transition-fast);
}
.floating-btn:hover{transform:scale(1.05);}

/* ---------- Adaptabilidad ---------- */
@media(max-width:768px){
    .card-image,
    .image-container{height:200px;}
}

/* ---------- Formularios ---------- */
input,textarea{
    border-radius:.5rem;
}
input:focus,textarea:focus{
    border-color:var(--color-secondary);
    box-shadow:0 0 0 .125em rgba(108,99,255,.25);
}

/* ---------- Enlaces de navegación activos ---------- */
.navbar-start .navbar-item:hover,
.navbar-end .navbar-item:hover{
    color:var(--color-primary)!important;
}