*{
margin:0;
padding:0;
box-sizing:border-box
}

body{
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
color:#333
}

/* TOPBAR */
.topbar{
position:sticky;
top:0;
background:linear-gradient(90deg,#fde9f1,#fff);
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 25px;
box-shadow:0 4px 15px rgba(0,0,0,.08);
z-index:100
}

.logo{max-height:60px}

/* =========================
   MENU DESKTOP (GLASS)
========================= */
.menu{
    display:flex;
    align-items:center;
    gap:22px;
    font-family:'Playfair Display',serif;
}

/* Links */
.menu a,
.submenu button{
    background:none;
    border:none;
    font-size:17px;
    font-style:italic;
    color:#2f2f2f;
    cursor:pointer;
    position:relative;
    text-decoration:none;
    letter-spacing:.6px;

    /* ACENTOS PERFECTOS */
    font-kerning: normal;
    font-feature-settings: "liga","kern";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Sombra elegante */
    text-shadow:1px 1px 3px rgba(0,0,0,.18);
}

/* Subrayado */
.menu a::after,
.submenu button::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:2px;
    background:#f2a1bd;
    transition:.4s ease;
}

.menu a:hover::after,
.submenu button:hover::after{
    width:100%;
}

/* =========================
   SUBMENU DESKTOP
========================= */
.submenu{
    position:relative;
}

.submenu-content{
    position:absolute;
    top:38px;
    left:0;
    background:rgba(255,255,255,.85);

    /* GLASS EFFECT */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius:16px;
    box-shadow:0 20px 45px rgba(0,0,0,.22);
    display:none;
    flex-direction:column;
    min-width:180px;
    overflow:hidden;
}

.submenu-content a{
    padding:14px 22px;
    font-family:'Poppins',sans-serif;
    font-style:normal;
    font-size:14px;
    color:#333;
    text-shadow:none;
}

.submenu-content a:hover{
    background:#fde9f1;
}

/* Mostrar submenu */
.submenu:hover .submenu-content,
.submenu:focus-within .submenu-content{
    display:flex;
}

/* =========================
   MENU MOBILE PREMIUM (GLASS)
========================= */
.menu-icon{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#f2a1bd;
    text-shadow:1px 1px 4px rgba(0,0,0,.25);
}

#menu-toggle{
    display:none;
}

@media(max-width:768px){

.menu{
    position:absolute;
    top:80px;
    right:20px;

    /* GLASS MOBILE */
    background:rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-radius:22px;
    padding:26px 26px 22px;
    width:250px;
    display:none;
    flex-direction:column;
    gap:20px;
    box-shadow:0 22px 50px rgba(0,0,0,.28);
    animation:menuFade .45s ease;
}

/* Animación entrada */
@keyframes menuFade{
    from{
        opacity:0;
        transform:translateY(-14px) scale(.97);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

#menu-toggle:checked ~ .menu{
    display:flex;
}

/* Submenu móvil */
.submenu-content{
    position:static;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
    margin-left:12px;
    padding-left:12px;
}

.submenu-content a{
    padding:8px 0;
    font-size:14px;
}

/* Desactivar hover móvil */
.submenu:hover .submenu-content{
    display:none;
}
/* Submenu activo (mobile) */
.submenu.active .submenu-content{
    display:flex;
}


.menu-icon{
    display:block;
}

}



/* SLIDER */
/* SLIDER */
.hero-slider{
    position:relative;
    height:90vh;
    overflow:hidden;
}

.slides{
    position:relative;
    width:100%;
    height:100%;
}

.slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1.0s ease;
}

.slide.active{ opacity:1; }

.slide1{
    background-image: url('img/Slide1.jpg');
}

.slide2{
    background-image: url('img/Slide2.jpg');
}

.slide3{
    background-image: url('img/Slide3.jpg');
}



.hero-text{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.6);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    z-index:2;
}

/* DOTS */
.dots{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:3;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;
    opacity:.6;
    cursor:pointer;
}

.dot.active{
    background:#f2a1bd;
    opacity:1;
}

/* SECTIONS */
.info,.servicios,.contacto{
padding:80px 20px;
text-align:center
}

.servicios-lista{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap
}

.servicios-lista span{
padding:12px 28px;
border:1px solid #f2a1bd;
border-radius:30px
}

.contacto{background:#fde9f1}

/* BOTONES */
.whatsapp{
position:fixed;
bottom:30px;
right:30px;
background:#25D366;
color:white;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
text-decoration:none;
box-shadow:0 10px 20px rgba(0,0,0,.2)
}

#scrollTopBtn{
position:fixed;
bottom:100px;
right:30px;
width:45px;
height:45px;
background:#f2a1bd;
color:white;
border:none;
border-radius:50%;
display:none;
align-items:center;
justify-content:center;
font-size:20px;
cursor:pointer
}

footer{
padding:25px;
text-align:center;
font-size:13px;
color:#999
}

/* CONTACTO */
.contacto {
    background: #fde9f1;
    padding: 80px 20px;
    text-align: center;
}

.contacto h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 40px;
}

/* FORMULARIO */
.form-contacto {
    max-width: 700px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Inputs */
.form-contacto input,
.form-contacto textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

/* Textarea ocupa todo el ancho */
.form-contacto textarea {
    grid-column: 1 / -1;
    min-height: 120px;
    resize: none;
}

/* Botón */
.form-contacto button {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 14px 50px;
    background: #f2a1bd;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    cursor: pointer;
    transition: background .3s;
}

.form-contacto button:hover {
    background: #e58bab;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .form-contacto {
        grid-template-columns: 1fr;
    }
}

/* BOTÓN AGENDAR CITA */
.btn{
    margin-top: 25px;
    padding: 14px 42px;
    border-radius: 30px;
    background: #f2a1bd;
    color: white;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    display: inline-block;

    /* Animación inicial */
    opacity: 0;
    transform: translateY(15px);
    animation: btnEntrada 1s ease forwards 0.8s;

    /* Pulse elegante */
    animation-delay: 0.8s;
}

/* Hover */
.btn:hover{
    background: #e58bab;
    transform: translateY(-2px) scale(1.03);
    transition: all .3s ease;
}

/* ANIMACIÓN DE ENTRADA */
@keyframes btnEntrada {
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse sutil infinito */
@keyframes pulse {
    0%{ box-shadow: 0 0 0 0 rgba(242,161,189,.6); }
    70%{ box-shadow: 0 0 0 15px rgba(242,161,189,0); }
    100%{ box-shadow: 0 0 0 0 rgba(242,161,189,0); }
}

/* Activar pulse después de cargar */
.btn{
    animation:
        btnEntrada 1s ease forwards 0.8s,
        pulse 2.5s ease infinite 2s;
}

/* =========================
   GALERÍA – FONDO PREMIUM
========================= */
.galeria{
    position: relative;
    padding: 90px 20px;
    text-align: center;

    /* Fondo elegante */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fde9f1 50%,
        #ffffff 100%
    );
}

/* Detalle decorativo superior */
.galeria::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:60px;
    background: radial-gradient(
        circle at center,
        rgba(242,161,189,.25),
        transparent 70%
    );
}

/* Título principal */
.galeria h2{
    font-family:'Playfair Display',serif;
    font-size:2.4rem;
    margin-bottom:45px;
    color:#333;
}

/* Subtítulos (Manos, Pies, Diseños) */
.galeria h3{
    margin:50px 0 20px;
    font-family:'Playfair Display',serif;
    font-size:1.6rem;
    color:#444;
}


/* Grid */
.galeria-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
    max-width:1000px;
    margin:0 auto;
}

.galeria-grid img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:15px;
    cursor:pointer;
    transition:transform .3s, box-shadow .3s;
}

.galeria-grid img:hover{
    transform:scale(1.05);
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

/* LIGHTBOX */
.lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}


#lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:20px;
    animation:zoomIn .4s ease;
}

@keyframes zoomIn{
    from{ transform:scale(.7); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}


.hero-text h1{
    font-family: 'Great Vibes', cursive;
    font-size: 4rem;
    font-weight: normal;
    color: #2f2f2f;

    /* Resalte elegante */
    text-shadow:
        2px 2px 6px rgba(0,0,0,.25),
        0 0 25px rgba(242,161,189,.45);

    margin-bottom: 10px;

    /* Animación suave */
    opacity: 0;
    transform: translateY(-10px);
    animation: titleEntrada 1.2s ease forwards;
}

/* Subtítulo mantiene elegancia */
.hero-text p{
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: #444;
    letter-spacing: .5px;
    margin-bottom: 25px;
}

/* Animación entrada */
@keyframes titleEntrada{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@media(max-width:768px){
    .hero-text h1{
        font-size: 2.8rem;
    }
}

/* =========================
   SECCIÓN NOSOTROS
========================= */
.nosotros{
    padding: 90px 20px;
    text-align: center;
    background: #ffffff;
}

/* Separador decorativo */
.separador{
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
}

.separador span{
    width: 90px;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent,
        #f2a1bd,
        transparent
    );
    border-radius: 10px;
}

/* Logo */
.logo-nosotros{
    width: 160px;
    margin: 0 auto 25px;
    display: block;
}

/* Título */
.nosotros h2{
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: #333;
}

/* Texto */
.nosotros p{
    max-width: 720px;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #555;

    /* JUSTIFICADO */
    text-align: justify;
    text-justify: inter-word;

    /* Mejora visual en español */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* =========================
   SECCIÓN NOSOTROS PREMIUM
========================= */
.nosotros{
    padding: 100px 20px;
    text-align: center;

    /* Fondo tipo spa */
    background:
        radial-gradient(circle at top, rgba(242,161,189,.15), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fde9f1 50%, #ffffff 100%);
}

/* =========================
   SEPARADOR DECORATIVO
========================= */
.separador{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
}

.separador span{
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f2a1bd, transparent);
    border-radius: 10px;
    transform: scaleX(0);
    transition: transform .8s ease;
}

.separador .sparkle{
    font-size: 14px;
    color: #f2a1bd;
    opacity: 0;
    transform: scale(0);
    transition: all .8s ease;
}

/* =========================
   LOGO EFECTO GRIS ? COLOR
========================= */
.logo-nosotros{
    width: 160px;
    margin: 0 auto 30px;
    display: block;

    filter: grayscale(100%);
    opacity: .85;
    transition: all .6s ease;
}

.logo-nosotros:hover{
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* =========================
   TEXTO
========================= */
.nosotros h2{
    font-family: 'Playfair Display', serif;
    font-size: 2.3rem;
    margin-bottom: 20px;
    color: #333;
}

.nosotros p{
    max-width: 720px;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #555;
}

/* =========================
   ANIMACIONES SCROLL
========================= */
.reveal{
    opacity: 0;
    transform: translateY(25px);
    transition: all .9s ease;
}

.reveal.active{
    opacity: 1;
    transform: translateY(0);
}

/* Activar separador */
.reveal.active .sparkle{
    opacity: 1;
    transform: scale(1);
}

.reveal.active span{
    transform: scaleX(1);
}

/* =========================
   ANIMACIÓN ENTRE SECCIONES
========================= */
.section-anim{
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity .9s ease,
        transform .9s ease;
    will-change: opacity, transform;
}

/* Cuando entra en pantalla */
.section-anim.visible{
    opacity: 1;
    transform: translateY(0);
}


/* =========================
   BASE ANIMACIÓN
========================= */
.section-anim{
    opacity: 0;
    transition: all 1s ease;
    will-change: opacity, transform;
}

.section-anim.visible{
    opacity: 1;
}

/* =========================
   HERO – Fade elegante
========================= */
.anim-hero{
    transform: scale(1.03);
}
.anim-hero.visible{
    transform: scale(1);
}

/* =========================
   NOSOTROS – Slide SPA
========================= */
.anim-nosotros{
    transform: translateY(50px);
}
.anim-nosotros.visible{
    transform: translateY(0);
}

/* =========================
   GALERÍA – Zoom suave
========================= */
.anim-galeria{
    opacity: 0;
    transform: translateY(30px);
}

.anim-galeria.visible{
    opacity: 1;
    transform: translateY(0);
}


/* =========================
   SERVICIOS – Slide lateral
========================= */
.anim-servicios{
    transform: translateX(-60px);
}
.anim-servicios.visible{
    transform: translateX(0);
}

/* =========================
   CONTACTO – Fade + lift
========================= */
.anim-contacto{
    transform: translateY(30px);
}
.anim-contacto.visible{
    transform: translateY(0);
}

/* =========================
   LINK ACTIVO DEL MENÚ
========================= */
.menu a.active{
    color: #f2a1bd;
}

/* Subrayado permanente en activo */
.menu a.active::after{
    width: 100%;
}

/* Opcional: efecto glow muy sutil */
.menu a.active{
    text-shadow:
        1px 1px 3px rgba(0,0,0,.15),
        0 0 8px rgba(242,161,189,.35);
}

/* =========================
   SERVICIOS – LISTA PRECIOS
========================= */
.servicios{
    padding: 90px 20px;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fde9f1 50%,
        #ffffff 100%
    );
    text-align: center;
}

.servicios h2{
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    margin-bottom: 50px;
    color: #333;
}

/* Bloques */
.servicio-bloque{
    max-width: 850px;
    margin: 0 auto 50px;
    background: rgba(255,255,255,.7);
    border-radius: 22px;
    padding: 35px 30px;
    box-shadow: 0 12px 35px rgba(0,0,0,.08);
}

.servicio-bloque h3{
    font-family: 'Playfair Display', serif;
    font-size: 1.7rem;
    margin-bottom: 25px;
    color: #444;
}

/* Lista */
.servicio-bloque ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.servicio-bloque li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(0,0,0,.15);
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
}

.servicio-bloque li:last-child{
    border-bottom: none;
}

.servicio-bloque li span{
    text-align: left;
    max-width: 70%;
}

.servicio-bloque li strong{
    color: #f2a1bd;
    font-weight: 600;
}

/* Responsive */
@media(max-width:600px){
    .servicio-bloque li{
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .servicio-bloque li strong{
        align-self: flex-end;
    }
}

/* =========================
   LIGHTBOX PRO
========================= */
.lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.lightbox img{
    max-width: 90%;
    max-height: 85%;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
    animation: zoomIn .4s ease;
}

/* Flechas */
.lightbox .nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 45px;
    color: white;
    cursor: pointer;
    padding: 10px;
    opacity: .7;
    user-select: none;
    transition: opacity .3s;
}

.lightbox .nav:hover{
    opacity: 1;
}

.lightbox .prev{ left: 30px; }
.lightbox .next{ right: 30px; }

/* Cerrar */
.lightbox .close{
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 35px;
    color: white;
    cursor: pointer;
    opacity: .8;
}

@keyframes zoomIn{
    from{ transform: scale(.85); opacity: 0; }
    to{ transform: scale(1); opacity: 1; }
}


/* =========================
   PRODUCTOS AVYNA
========================= */
.productos{
    padding: 100px 20px;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(242,161,189,.15), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fde9f1 50%, #ffffff 100%);
}

.productos h2{
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    margin-bottom: 20px;
    color: #333;
}

.productos-texto{
    max-width: 800px;
    margin: 0 auto 60px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

/* Grid */
.productos-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 30px;
    max-width: 1100px;
    margin: auto;
}

/* Card */
.producto-card{
    background: rgba(255,255,255,.85);
    border-radius: 22px;
    padding: 25px 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,.1);
    transition: transform .4s ease, box-shadow .4s ease;
}

.producto-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 25px 45px rgba(0,0,0,.18);
}

.producto-card img{
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-bottom: 20px;
}

.producto-card h3{
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
}

.producto-card p{
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    color: #666;
}
/* =========================
   ANIMACIÓN DE ENTRADA
========================= */
#page-loader{
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeOut 1.2s ease forwards;
    animation-delay: 1.4s;
}

/* Texto animado */
.loader-logo{
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #f2a1bd;
    animation: logoPulse 1.2s ease infinite;
}

/* Animaciones */
@keyframes logoPulse{
    0%{ transform: scale(1); opacity: .8; }
    50%{ transform: scale(1.05); opacity: 1; }
    100%{ transform: scale(1); opacity: .8; }
}

@keyframes fadeOut{
    to{
        opacity: 0;
        visibility: hidden;
    }
}


.mensaje-exito{
    margin-top: 20px;
    color: #f2a1bd;
    font-family: 'Poppins', sans-serif;
}


/* =========================
   MENSAJE TEMPORAL
========================= */
.mensaje-exito{
    display: none;
    margin-top: 25px;
    padding: 15px 25px;
    background: linear-gradient(135deg,#f2a1bd,#f7b6cc);
    color: white;
    font-family: 'Poppins', sans-serif;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    animation: fadeInUp .4s ease;
}

/* Animación */
@keyframes fadeInUp{
    from{
        opacity: 0;
        transform: translateY(10px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================
   TELÉFONO FORMULARIO
========================= */
.telefono-grupo{
    display: grid;
    grid-template-columns: 1.1fr .9fr 2fr;
    gap: 9px;
}

.telefono-grupo select,
.telefono-grupo input{
    padding: 12px 14px;      /* menos padding horizontal */
    border-radius: 14px;     /* menos redondeado */
    border: 1px solid #ddd;
    font-family: 'Poppins', sans-serif;
    font-size: .85rem;
    text-align: center;      /* centra números para mejor lectura */
}

/* Que el número largo no quede centrado raro */
.telefono-grupo input[name="numero"]{
    text-align: left;
}

/* Responsive */
@media(max-width:480px){
    .telefono-grupo{
        grid-template-columns: 1fr;
    }

    .telefono-grupo select,
    .telefono-grupo input{
        text-align: left;
    }
}

@media (max-width: 768px){
    .section-anim{
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}