/* ══════════════════════════════════════════
   NAILS BY THANIA – ESTILOS
   Paleta tomada de sus flyers: rosa, negro y dorado
══════════════════════════════════════════ */
:root {
    --rosa: #e8559a;
    --rosa-oscuro: #c13a7c;
    --rosa-claro: #fbd3e6;
    --rosa-suave: #fff4f9;
    --negro: #1b1418;
    --negro-2: #2a2026;
    --dorado: #c9a46a;
    --texto: #2b1f26;
    --texto-medio: #6e5563;
    --radio: 18px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
    color: var(--texto);
    background: #fff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }

.py-section { padding: 90px 0; }
.bg-suave { background: var(--rosa-suave); }

/* ── NAVBAR ── */
.navbar {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--rosa-claro);
    padding: .6rem 0;
    transition: box-shadow .3s;
}
.navbar.scrolled { box-shadow: 0 4px 25px rgba(232, 85, 154, .15); }

.marca { text-decoration: none; line-height: 1; display: flex; align-items: center; gap: .7rem; }
.marca-texto { display: flex; flex-direction: column; }
.marca-logo { height: 62px; width: 62px; border-radius: 50%; box-shadow: 0 4px 14px rgba(27, 20, 24, .25); transition: transform .3s; }
.marca:hover .marca-logo { transform: scale(1.05) rotate(-3deg); }
.marca-nombre {
    font-family: 'Allura', cursive;
    font-size: 2.3rem;
    color: var(--negro);
}
.marca-nombre small { font-size: 1.4rem; color: var(--rosa); }
.marca-sub {
    font-size: .6rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--dorado);
    margin-top: -2px;
    padding-left: 4px;
}

.nav-link {
    font-size: .76rem !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--texto-medio) !important;
    position: relative;
    padding: .5rem .8rem !important;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--rosa);
    transform: translateX(-50%);
    transition: width .3s;
}
.nav-link:hover { color: var(--rosa) !important; }
.nav-link:hover::after { width: 70%; }

.navbar-toggler { border-color: var(--rosa); }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8559a' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── BOTONES ── */
.btn-thania, .btn-thania-outline {
    border-radius: 30px;
    font-size: .76rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    padding: .75rem 2rem;
    transition: all .3s;
}
.btn-thania {
    background: var(--rosa);
    border: 2px solid var(--rosa);
    color: #fff;
}
.btn-thania:hover, .btn-thania:focus {
    background: var(--rosa-oscuro);
    border-color: var(--rosa-oscuro);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 85, 154, .35);
}
.btn-thania-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.btn-thania-outline:hover { background: #fff; color: var(--rosa); transform: translateY(-2px); }

/* ── HERO: estilo negro y dorado, centrado, con abanico de fotos ── */
.hero {
    position: relative;
    margin-top: 76px;
    padding: 70px 0 60px;
    color: #fff;
    background: radial-gradient(ellipse at 50% 0%, #3a2a17 0%, var(--negro) 55%, #0e0a0c 100%);
    overflow: hidden;
}
/* líneas doradas finas de fondo */
.hero-lineas {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(115deg, transparent 0 60px, rgba(201, 164, 106, .05) 60px 61px),
        radial-gradient(circle at 50% 110%, rgba(232, 85, 154, .25), transparent 55%);
    pointer-events: none;
}
.hero-logo {
    width: 128px; height: 128px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(201, 164, 106, .35), 0 0 45px rgba(201, 164, 106, .35);
    margin-bottom: 1.4rem;
    animation: brillo 4s ease-in-out infinite;
}
@keyframes brillo { 50% { box-shadow: 0 0 0 1px rgba(201, 164, 106, .5), 0 0 70px rgba(201, 164, 106, .55); } }
.hero-kicker { font-size: .72rem; letter-spacing: 5px; text-transform: uppercase; color: var(--dorado); margin-bottom: 1rem; }
.hero-kicker span { font-size: .5rem; margin: 0 .5rem; vertical-align: middle; }
.hero-titulo { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.1; margin-bottom: 1rem; }
.hero-titulo em {
    background: linear-gradient(90deg, #e9cf9c, var(--dorado), #f6dfb0, var(--dorado));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-desc { font-weight: 300; color: rgba(255, 255, 255, .72); max-width: 620px; margin: 0 auto 2rem; line-height: 1.8; }

.btn-dorado {
    background: linear-gradient(135deg, #e9cf9c, var(--dorado) 55%, #a8834f);
    color: var(--negro);
    border: none;
    border-radius: 30px;
    font-size: .76rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
    padding: .8rem 2.1rem;
    white-space: nowrap;
    transition: all .3s;
}
.btn-dorado:hover { color: var(--negro); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201, 164, 106, .45); }
.btn-thania, .btn-thania-outline { white-space: nowrap; }

/* Abanico de cartas con fotos */
.abanico { display: flex; justify-content: center; align-items: flex-end; margin-top: 3.5rem; padding-bottom: 1rem; }
.carta {
    position: relative;
    width: 200px; aspect-ratio: 3 / 4;
    margin: 0 -22px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(201, 164, 106, .7);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .55);
    transition: transform .45s ease, z-index 0s;
    background: #000;
}
.carta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carta figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.6rem .6rem .6rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
    font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem;
    color: #f3dcb0;
}
.carta:nth-child(1) { transform: rotate(-14deg) translateY(30px); z-index: 1; }
.carta:nth-child(2) { transform: rotate(-7deg) translateY(8px); z-index: 2; }
.carta:nth-child(3) { transform: scale(1.08); z-index: 3; }
.carta:nth-child(4) { transform: rotate(7deg) translateY(8px); z-index: 2; }
.carta:nth-child(5) { transform: rotate(14deg) translateY(30px); z-index: 1; }
.carta:hover { transform: translateY(-18px) scale(1.1) rotate(0); z-index: 5; }
.abanico .carta { opacity: 0; animation: repartir .8s ease forwards; }
.abanico .carta:nth-child(1) { animation-delay: .2s; } .abanico .carta:nth-child(2) { animation-delay: .3s; }
.abanico .carta:nth-child(3) { animation-delay: .4s; } .abanico .carta:nth-child(4) { animation-delay: .5s; }
.abanico .carta:nth-child(5) { animation-delay: .6s; }
@keyframes repartir { from { opacity: 0; margin-top: 60px; } to { opacity: 1; margin-top: 0; } }

/* ── ENCABEZADOS ── */
.sec-tag {
    font-size: .7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--rosa);
    font-weight: 600;
    margin-bottom: .3rem;
}
.sec-title { font-size: clamp(2rem, 4vw, 2.9rem); color: var(--negro); }
.sec-title em { color: var(--rosa); }
.divisor {
    width: 60px; height: 3px;
    margin: 1rem auto 0;
    border-radius: 3px;
    background: linear-gradient(to right, var(--rosa), var(--dorado));
}
.texto-intro { color: var(--texto-medio); font-weight: 300; line-height: 1.8; margin-top: 1rem; }

/* ── NOSOTROS ── */
.nosotros-img {
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(27, 20, 24, .18);
}
.nosotros-img::after {
    content: '';
    position: absolute; inset: 12px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 12px;
    pointer-events: none;
}
.nosotros-img img { width: 100%; display: block; }

.mini-card {
    display: flex;
    gap: 1rem;
    background: #fff;
    border-radius: 14px;
    padding: 1.1rem;
    height: 100%;
    box-shadow: 0 6px 20px rgba(232, 85, 154, .08);
}
.mini-card i {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--rosa-claro);
    color: var(--rosa-oscuro);
    font-size: 1.15rem;
}
.mini-card h6 { margin: 0 0 .2rem; font-size: 1rem; }
.mini-card p { margin: 0; font-size: .85rem; color: var(--texto-medio); white-space: pre-line; }

/* ── SERVICIOS ── */
.cat-titulo {
    font-size: 1.5rem;
    color: var(--negro);
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.cat-titulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--rosa-claro), transparent);
}
.cat-titulo i { color: var(--rosa); font-size: 1.2rem; }

.serv-card {
    background: #fff;
    border-radius: var(--radio);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #f6e3ec;
    box-shadow: 0 8px 25px rgba(27, 20, 24, .06);
    transition: transform .35s, box-shadow .35s;
}
.serv-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(232, 85, 154, .18); }

.serv-img { aspect-ratio: 4 / 5; overflow: hidden; }
.serv-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.serv-card:hover .serv-img img { transform: scale(1.07); }

.serv-body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.serv-body h5 { font-size: 1.2rem; margin-bottom: .4rem; }
.serv-body p { font-size: .87rem; color: var(--texto-medio); font-weight: 300; flex: 1; }

.btn-agendar {
    align-self: flex-start;
    font-size: .72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--rosa);
    border: 1.5px solid var(--rosa);
    border-radius: 20px;
    padding: .45rem 1.1rem;
    text-decoration: none;
    transition: all .3s;
}
.btn-agendar:hover { background: var(--rosa); color: #fff; }

.serv-icono { background: linear-gradient(160deg, var(--negro) 0%, var(--negro-2) 100%); border: none; color: #fff; }
.serv-icono .serv-body p { color: rgba(255, 255, 255, .7); }
.serv-icono .btn-agendar { align-self: center; color: var(--rosa-claro); border-color: var(--rosa-claro); }
.serv-icono .btn-agendar:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.icono-circulo {
    width: 86px; height: 86px;
    margin: 2rem auto 0;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 2.1rem;
    color: var(--dorado);
    border: 1.5px solid var(--dorado);
}

/* ── GALERÍA ── */
.filtro {
    border: 1.5px solid var(--rosa-claro);
    background: #fff;
    color: var(--texto-medio);
    border-radius: 25px;
    padding: .45rem 1.3rem;
    margin: .25rem;
    font-size: .8rem;
    letter-spacing: 1px;
    transition: all .3s;
}
.filtro:hover { border-color: var(--rosa); color: var(--rosa); }
.filtro.activo { background: var(--rosa); border-color: var(--rosa); color: #fff; }

.galeria-grid { columns: 4 220px; column-gap: 14px; }
.galeria-item {
    break-inside: avoid;
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
    animation: aparecer .5s ease;
}
.galeria-item img { width: 100%; display: block; transition: transform .5s; }
.galeria-item:hover img { transform: scale(1.05); }
.galeria-item::after {
    content: '\F52A';
    font-family: 'bootstrap-icons';
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 1.8rem;
    color: #fff;
    background: rgba(232, 85, 154, .35);
    opacity: 0;
    transition: opacity .3s;
}
.galeria-item:hover::after { opacity: 1; }
@keyframes aparecer { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Visor */
.visor-contenido { background: transparent; border: none; position: relative; align-items: center; }
.visor-contenido img { max-height: 85vh; max-width: 100%; border-radius: 12px; }
.visor-cerrar { position: absolute; top: -36px; right: 0; opacity: 1; }
.visor-nav {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .85);
    color: var(--rosa-oscuro);
    font-size: 1.2rem;
    z-index: 2;
}
.visor-prev { left: 8px; }
.visor-next { right: 8px; }

/* ── FORMULARIO ── */
.form-wrapper {
    max-width: 620px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    border: 1px solid #f6e3ec;
    box-shadow: 0 20px 60px rgba(232, 85, 154, .12);
}
.form-marca { font-family: 'Allura', cursive; font-size: 2.6rem; color: var(--rosa); line-height: 1; }
.form-label { font-size: .8rem; font-weight: 500; color: var(--texto-medio); letter-spacing: .5px; }
.form-control, .form-select { border-color: #f1d6e3; border-radius: 10px; padding: .65rem .9rem; }
.input-group-text { background: var(--rosa-suave); border-color: #f1d6e3; color: var(--rosa); border-radius: 10px 0 0 10px; }
.form-control:focus, .form-select:focus { border-color: var(--rosa); box-shadow: 0 0 0 .2rem rgba(232, 85, 154, .15); }

/* ── FOOTER ── */
.footer { background: var(--negro); color: rgba(255, 255, 255, .6); padding: 60px 0 25px; }
.footer-logo { height: 120px; width: 120px; border-radius: 50%; margin-bottom: 1rem; box-shadow: 0 0 30px rgba(201, 164, 106, .25); }
.footer-marca { font-family: 'Allura', cursive; font-size: 2.6rem; color: var(--rosa-claro); line-height: 1; margin-bottom: .6rem; }
.footer-texto { font-size: .85rem; line-height: 1.8; }
.footer-titulo { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .4rem; }
.footer-links a { color: rgba(255, 255, 255, .6); text-decoration: none; font-size: .85rem; transition: color .3s; }
.footer-links a:hover { color: var(--rosa-claro); }
.social-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    text-decoration: none;
    transition: all .3s;
}
.social-btn:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; transform: translateY(-3px); }
.footer-divisor { border-color: rgba(255, 255, 255, .1); margin: 2rem 0 1.2rem; }
.footer-copy { text-align: center; font-size: .75rem; margin: 0; }
.footer-dev {
    text-align: center;
    font-size: .78rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, .1);
}
.footer-dev a {
    color: var(--rosa-claro);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all .3s;
}
.footer-dev a:hover { color: var(--rosa); border-bottom-color: var(--rosa); }

/* ── WHATSAPP FLOTANTE ── */
.wa-flotante {
    position: fixed;
    right: 20px; bottom: 20px;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.8rem;
    z-index: 1050;
    box-shadow: 0 8px 25px rgba(37, 211, 102, .45);
    transition: transform .3s;
}
.wa-flotante:hover { color: #fff; transform: scale(1.1); }

/* ── ANIMACIÓN REVEAL ── */
.reveal { opacity: 0; transform: translateY(35px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
    .navbar-collapse { padding: 1rem 0; }
    .carta { width: 150px; margin: 0 -18px; }
}
@media (max-width: 576px) {
    .hero { padding: 45px 0 40px; }
    .hero-logo { width: 100px; height: 100px; }
    .abanico { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 2.5rem -12px 0; padding: 10px 12px 20px; scrollbar-width: none; }
    .abanico::-webkit-scrollbar { display: none; }
    .carta, .carta:nth-child(n) { flex: 0 0 62%; width: auto; margin: 0; transform: none; scroll-snap-align: center; }
    .py-section { padding: 65px 0; }
    .form-wrapper { padding: 1.6rem; }
    .marca-nombre { font-size: 1.7rem; }
    .marca-logo { height: 50px; width: 50px; }
    .galeria-grid { columns: 2; column-gap: 10px; }
    .galeria-item { margin-bottom: 10px; }
}