/* ---------------- Reset + base ---------------- */
* { box-sizing: border-box; margin:0; padding:0; }
:root{
    --magenta:#ff00c8;
    --lila:#d6b3ff;
    --plateado:#f2f2f2;
    --bg:#f5dfff;
    --dark-bg:#120018;
    --glass: rgba(255,255,255,0.12);
}

html,body{ height:100%; scroll-behavior:smooth; font-family: 'Arial', sans-serif; background:var(--bg); color:#111; }

/* ---------- LOADER ---------- */
.loader{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, #fff0, rgba(255,0,200,0.06));
    z-index:9999; backdrop-filter: blur(2px);
}
.loader-inner{ text-align:center; animation:loader-fade 0.7s ease 1s forwards; opacity:0; }
.spinner{
    width:72px; height:72px; border-radius:50%; border:6px solid rgba(255,255,255,0.25);
    border-top-color: var(--magenta); animation:spin 1s linear infinite; margin:0 auto 12px;
    box-shadow:0 0 18px var(--magenta);
}
.brand{ font-weight:800; color:var(--magenta); letter-spacing:1px; font-size:18px; text-shadow:0 0 10px rgba(255,0,200,0.2); }

/* loader hide animation */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes loader-fade{ to{ opacity:1; transform:translateY(0);} }

/* ---------- HEADER ---------- */
header{
    position:sticky; top:0; z-index:50;
    background: linear-gradient(90deg, var(--magenta), #b829ff, var(--lila));
    padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
    box-shadow: 0 6px 18px rgba(255,0,200,0.12);
}
.logo{ color:white; font-weight:800; font-size:20px; text-shadow:0 0 8px rgba(0,0,0,0.15); }
.nav{ display:flex; gap:12px; align-items:center; }

/* nav links desktop */
.nav-links{ list-style:none; display:flex; gap:28px; align-items:center; }
.nav-links a{ color:white; text-decoration:none; font-weight:700; padding:8px 10px; border-radius:8px; transition:all .18s; }
.nav-links a:hover{ background: rgba(255,255,255,0.12); color:var(--plateado); transform:translateY(-2px); }

/* dark button */
.dark-btn{ background:white; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:18px; }

/* hamburger */
.hamburger{ display:none; flex-direction:column; gap:5px; background:transparent; border:none; cursor:pointer; padding:6px; }
.hamburger span{ width:26px; height:3px; background:white; border-radius:3px; display:block; transition:all .25s; }

/* ---------- HERO ---------- */
.hero{ padding:90px 20px 60px; text-align:center; }
.hero h2{ font-size:36px; color:#0d0d0d; margin-bottom:10px; }
.subtitle{ color:#222; opacity:0.85; }

/* ---------- SECTION TITLE ---------- */
.section{ padding:50px 20px; }
.section-title{ font-size:30px; color:var(--magenta); text-align:center; margin-bottom:18px; text-shadow:0 0 6px rgba(255,0,200,0.12); }

/* ---------- ABOUT ---------- */
.about-grid{
    width:100%; max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns: 120px 1fr 120px; align-items:center; gap:18px;
}
.star-photo{ width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.star-photo img{ width:100%; height:100%; object-fit:cover; clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
); border-radius:6px; box-shadow:0 6px 18px rgba(255,0,200,0.12); }

/* portrait + text column */
.about-main{ display:flex; gap:18px; align-items:center; }
.portrait{ width:220px; height:220px; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(255,0,200,0.12); border:4px solid rgba(255,255,255,0.6); }
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }

/* about text column */
.about-text{ display:flex; flex-direction:column; gap:12px; }
.text-box{ background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7)); padding:16px; border-radius:10px; max-width:680px; box-shadow:0 6px 18px rgba(255,0,200,0.06); }
.contact-box{ background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(214,179,255,0.55)); padding:12px; border-radius:10px; width:220px; box-shadow:0 6px 18px rgba(255,0,200,0.06); }
.contact-box a{ color:#1b0033; font-weight:700; text-decoration:none; }

/* ---------- GALLERY ---------- */
.gallery{
    max-width:1200px; margin: 0 auto; display:grid;
    grid-template-columns: repeat(3, 1fr); gap:20px;
}
.gallery-item{ background:white; border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:0 6px 18px rgba(255,0,200,0.08); transition:transform .2s, box-shadow .2s; }
.gallery-item img{ width:100%; height:220px; object-fit:cover; display:block; }
.gallery-item figcaption{ padding:12px; font-weight:700; text-align:center; color:#111; }

/* hover */
.gallery-item:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(255,0,200,0.18); }

/* ---------- SERVICES ---------- */
.services-grid{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; max-width:1000px; margin:0 auto; }
.service-card{ width:280px; padding:18px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(214,179,255,0.35)); box-shadow:0 10px 25px rgba(255,0,200,0.06); border:1px solid rgba(255,255,255,0.6); transition:transform .18s; text-align:center; }
.service-card h4{ color:var(--magenta); margin-bottom:8px; }
.service-card:hover{ transform:translateY(-6px); }

/* ---------- CONTACT CTA ---------- */
.contact-cta{ text-align:center; padding:18px; background:linear-gradient(90deg, rgba(255,255,255,0.9), rgba(214,179,255,0.25)); border-radius:10px; max-width:800px; margin:0 auto; box-shadow:0 8px 22px rgba(255,0,200,0.06); }

/* ---------- FOOTER ---------- */
footer{ text-align:center; padding:28px 16px; margin-top:30px; background: linear-gradient(to right, #d600ff, #b829ff, #c7a7ff); color:white; }

/* ---------- LIGHTBOX ---------- */
.lightbox{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9998;
    background: rgba(10,3,10,0.6);
}
.lightbox.show{ display:flex; animation:lb-in .2s ease; }
@keyframes lb-in{ from{ opacity:0; transform:scale(.98);} to{ opacity:1; transform:scale(1);} }

.lb-content{ max-width:88%; max-height:82%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.lb-content img{ max-width:100%; max-height:72vh; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,0.45); }
.lb-caption{ color:white; font-weight:700; text-align:center; }

.lb-close, .lb-prev, .lb-next{
    position:fixed; background:transparent; border:none; color:white; font-size:28px; cursor:pointer; padding:10px;
}
.lb-close{ top:24px; right:28px; font-size:22px; background:linear-gradient(90deg,#fff2,#ff00c8aa); border-radius:8px; color:#1a0026; }
.lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lb-next{ right:18px; top:50%; transform:translateY(-50%); }

/* ---------- DARK MODE ---------- */
body.dark{ background:var(--dark-bg); color:#eee; }
body.dark header{ background:linear-gradient(90deg,#610087,#3b0066,#2a003d); }
body.dark .text-box, body.dark .contact-box, body.dark .service-card, body.dark .gallery-item{ background:#2a002f; color:#eee; border:1px solid rgba(255,255,255,0.04); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
    .gallery{ grid-template-columns: repeat(2,1fr); }
    .about-grid{ grid-template-columns: 80px 1fr 80px; }
    .portrait{ width:160px; height:160px; }
    .star-photo{ width:80px; height:80px; }
    .contact-box{ width:180px; }
    .nav-links{ display:none; position:absolute; right:0; top:64px; background:linear-gradient(180deg, rgba(43,0,66,0.98), rgba(43,0,66,0.95)); width:240px; flex-direction:column; padding:18px; gap:12px; border-bottom-left-radius:8px; border-top-left-radius:8px; }
    .nav-links.show{ display:flex; }
    .hamburger{ display:flex; }
}

@media (max-width:640px){
    .gallery{ grid-template-columns: 1fr; }
    .about-grid{ grid-template-columns: 1fr; gap:12px; text-align:center; }
    .about-text{ align-items:center; }
    .contact-box{ width:100%; }
}
/* ---------------- PARCHE FORZADO: MODO OSCURO (pegar al final del CSS) ---------------- */

/* fondo global */
body.dark {
  background: #120018 !important;
  color: #eaeaea !important;
}

/* header / nav */
body.dark header {
  background: linear-gradient(90deg,#2b003d 0%, #36003f 50%, #210025 100%) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}
body.dark .nav-links,
body.dark .nav-links a {
  background: transparent !important;
  color: #f3d6ff !important;
}

/* secciones: forzamos fondo oscuro homogéneo para evitar franjas claras */
body.dark .section,
body.dark main > section {
  background: linear-gradient(180deg, rgba(10,4,10,0.95), rgba(20,2,20,0.96)) !important;
  color: #e9dff9 !important;
}

/* hero (si tiene imagen o color separado) */
body.dark .hero {
  background: linear-gradient(180deg, rgba(18,0,24,0.98), rgba(36,0,44,0.95)) !important;
}

/* cajas y tarjetas (about, contact, services) */
body.dark .text-box,
body.dark .contact-box,
body.dark .service-card,
body.dark .contact-cta {
  background: linear-gradient(180deg, rgba(34,4,30,0.9), rgba(22,2,26,0.9)) !important;
  color: #f2e6ff !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6) !important;
}

/* portrait and star frames border */
body.dark .portrait,
body.dark .star-photo img {
  box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* gallery items */
body.dark .gallery-item {
  background: linear-gradient(180deg, rgba(25,2,25,0.96), rgba(18,1,18,0.96)) !important;
  color: #f3d6ff !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
}
body.dark .gallery-item figcaption {
  color: #f0d9ff !important;
}

/* lightbox */
body.dark .lightbox {
  background: rgba(0,0,0,0.85) !important;
}
body.dark .lb-content img {
  box-shadow: 0 18px 60px rgba(0,0,0,0.9) !important;
}

/* loader */
body.dark .loader {
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.85)) !important;
}
body.dark .spinner {
  border-top-color: #ff7bff !important;
  box-shadow: 0 0 24px #ff00c8 !important;
}

/* footer */
body.dark footer {
  background: linear-gradient(90deg, #3b0050, #2a003d, #150014) !important;
  color: #f6e6ff !important;
}

/* nav mobile background */
body.dark .nav-links {
  background: linear-gradient(180deg, rgba(12,4,12,0.98), rgba(22,4,22,0.98)) !important;
}

/* small adjustments to keep contrasts */
body.dark a { color: #ffd6ff !important; }
body.dark .logo { color: #ff8dff !important; }

/* Ensure no leftover light backgrounds (last resort) */
body.dark * {
  background-image: none !important;
  background-color: inherit !important;
}