:root{
	--bg:#0b0b10;
	--card:#12121a;
	--elev:#191926;
	--text:#e9e9ef;
	--muted:#a1a1b3;
	--border:#222236;
	--accent:#ff3ea5;
	--accent-2:#9c27b0;
	--link:#ff9ecf; /* soft pink for navbar links */
	--link-hover:#ffc2de;
	--ok:#2ecc71;
	--err:#ff4d6d;
	--shadow:0 10px 30px rgba(0,0,0,.35);
	/* Shared header height for alignment (reduced ~20%) */
	--header-h: clamp(75px, 15vw, 128px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:radial-gradient(1200px 600px at 20% -20%, rgba(255,62,165,.15), transparent 60%),radial-gradient(800px 400px at 100% 10%, rgba(156,39,176,.12), transparent 60%),var(--bg);color:var(--text)}

/* Header / Navbar */
header{background:linear-gradient(180deg, rgba(20,20,30,.85), rgba(20,20,30,.6));backdrop-filter:saturate(120%) blur(6px);position:sticky;top:0;border-bottom:1px solid var(--border);z-index:10}
.navbar{display:grid;grid-template-columns:55% 45%;align-items:center;gap:12px;padding:8px 20px;min-height:var(--header-h)}
.navbar .brand{display:block;text-decoration:none;justify-self:start;width:100%}
.navbar .brand img{width:100%;height:var(--header-h);object-fit:cover;display:block;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
/* No brand text now; keep span styles unused */
.navbar ul{list-style:none;display:flex;gap:14px;margin:0;padding:0;justify-content:flex-end;align-items:center}
.navbar a:not(.btn){color:var(--link);text-decoration:none;opacity:.95;padding:10px 12px;border-radius:8px;text-shadow:0 1px 6px rgba(255,62,165,.15);transition:color .15s ease, background .15s ease, box-shadow .15s ease}
.navbar a:not(.btn):hover{opacity:1;color:#fff;background:rgba(255,158,207,.16);box-shadow:0 0 0 2px rgba(255,62,165,.2) inset}
.navbar a:not(.btn):focus{outline:none;box-shadow:0 0 0 3px rgba(255,62,165,.25)}

/* Layout */
.container{max-width:1024px;margin:24px auto;padding:0 20px}
.section{margin:24px 0}
.hero{padding:28px 0;text-align:center}
.hero h1{font-size:2.4rem;margin:0 0 10px}
.hero .brand-title{font-family:'Great Vibes', cursive;font-size:clamp(2.4rem, 5.6vw, 3.6rem);line-height:1.1;color:var(--accent);letter-spacing:.5px;text-shadow:0 2px 10px rgba(255,62,165,.25)}
.hero p{color:var(--muted);margin:0 0 16px;font-size:clamp(0.95rem, 1.6vw, 1.1rem);line-height:1.4}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.hero .actions{justify-content:center}

/* Home side galleries */
.home-grid{display:grid;grid-template-columns:20% minmax(0, 60%) 20%;gap:16px;align-items:start;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.side-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;position:sticky;top:var(--header-h);overflow:hidden}
.side-gallery .slot{aspect-ratio:1/1;border-radius:14px;border:1px solid var(--border);overflow:hidden;background:linear-gradient(180deg,var(--card),var(--elev));box-shadow:var(--shadow)}
.side-gallery .slot img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .4s ease;will-change:opacity}

@media (max-width: 1024px){
	.home-grid{grid-template-columns:1fr}
	.side-gallery{display:none}
}

@media (max-width:640px){
	/* Stack navbar vertically on mobile to avoid overlap */
	.navbar{display:flex; flex-direction:column; align-items:stretch; gap:8px; min-height:auto; padding:8px 0}
	.navbar .brand{align-self:stretch; width:100%; margin:0 0 8px 0; order:0}
	.navbar .brand span{font-size:1.5rem}
	.navbar .brand img{width:100%; height:clamp(84px, 24vw, 128px); object-fit:cover; display:block; border-radius:0}
	.navbar ul{justify-content:center; flex-wrap:wrap; gap:10px; order:1}
	/* Ensure nav buttons stay pink gradient on mobile */
	.navbar .btn{background:linear-gradient(180deg,var(--accent),#ff2a9b)}
	/* Avoid horizontal overflow on mobile */
	.home-grid{width:auto; margin-left:0; margin-right:0}
	/* Prefer mobile carousel over side galleries */
	.side-gallery{display:none}
}

/* Mobile carousel removed */
/* Mobile-only carousel (visible on phones and small tablets) */
.home-carousel-mobile{display:none}
.mobile-carousel-section{display:none}
@media (max-width:1024px){
	.mobile-carousel-section{display:block}
	.home-carousel-mobile{display:flex; gap:8px; padding:8px 0; justify-content:space-between; overflow-x:hidden}
	/* Exactly 3 squares fit the container width without overflow */
	.home-carousel-mobile .cell{flex:0 0 auto; width:calc((100% - 16px)/3); aspect-ratio:1/1; border-radius:12px; border:1px solid var(--border); overflow:hidden; background:linear-gradient(180deg,var(--card),var(--elev)); box-shadow:var(--shadow)}
	.home-carousel-mobile .cell img{width:100%; height:100%; object-fit:cover; display:block}
}

/* Responsive: tablets and phones */
@media (max-width: 768px){
	.container{padding:0 14px}
	.hero{padding:22px 0}
	.hero h1{font-size:2rem}
	.hero .brand-title{font-size:3rem}
	.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
	.tiles{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
	.card img{height:160px}
	.inline{flex-direction:column}
	.inline .btn{width:100%}
}

@media (max-width: 480px){
	.hero h1{font-size:1.8rem}
	.hero .brand-title{font-size:2.6rem}
	.tiles{grid-template-columns:repeat(2,1fr);gap:12px}
	.grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.tile .tile-label{font-size:.95rem}
	.card img{height:140px}
	.btn{min-height:44px}
}

/* Calendar responsive */
@media (max-width: 640px){
	.cal-grid{grid-template-columns:repeat(3,1fr)}
	.cal-day{min-height:60px}
}
@media (max-width: 420px){
	.cal-grid{grid-template-columns:repeat(2,1fr)}
	.cal-day{min-height:64px}
}

/* Home promise heading */
.promise-title{margin:6px 0 12px;text-align:center;font-size:clamp(1.4rem, 2.4vw, 1.8rem);font-weight:800;letter-spacing:.6px;color:var(--link)}
.promise-body{max-width:560px;margin:0 auto;text-align:justify;line-height:1.5;font-size:clamp(0.94rem, 1.6vw, 1.06rem)}

/* Shrink-to-content card for promise block */
.promise-card{padding:18px;display:table;margin:0 auto;width:auto;text-align:left}

@media (max-width:640px){
	.promise-body{max-width:100%;font-size:.96rem;line-height:1.45}
    .promise-card{display:block}
}

/* Cards & Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:12px 0}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;text-decoration:none;color:var(--text);transition:transform .15s ease, box-shadow .2s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,62,165,.18)}
.tile::before{content:"";display:block;width:100%;aspect-ratio:1/1;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card),var(--elev));box-shadow:var(--shadow)}
.tile .tile-label{margin-top:8px;text-align:center;font-weight:700;color:var(--accent)}
.tile-label-pink{color:var(--accent)}

/* Category-specific tile backgrounds */
.tile-manos::before{background-image:url("/static/unas%20manos/fotos/425767841_777361097573635_844924179659325447_n.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}
.tile-pies::before{background-image:url("/static/unas%20manos/fotos/369760314_658713916251593_4404096115237203468_n.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}
.tile-waxing::before{background-image:url("/static/unas%20manos/fotos/waxing.jpeg");background-size:cover;background-position:center;background-repeat:no-repeat}
.card{background:linear-gradient(180deg,var(--card),var(--elev));border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card h4{margin:12px 14px 6px;font-size:clamp(1rem, 2vw, 1.2rem)}
.card p{margin:0 14px 14px;color:var(--muted);font-size:clamp(0.95rem, 1.6vw, 1.08rem);line-height:1.5}

.pill{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,62,165,.15);color:var(--text);border:1px solid rgba(255,62,165,.35)}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-day{background:var(--elev);border:1px solid var(--border);border-radius:10px;min-height:54px;display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;cursor:pointer}
.cal-day:hover{border-color:rgba(255,62,165,.6)}
.cal-day a{color:var(--text);text-decoration:none}
.cal-day.muted{opacity:.45}
.cal-day.selected{border-color:rgba(255,62,165,.6);box-shadow:0 0 0 3px rgba(255,62,165,.2) inset}
.cal-day.today{border-color:#2ecc71}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;min-height:40px;line-height:1;font-weight:600;font-size:.95rem;border-radius:10px;background:linear-gradient(180deg,var(--accent),#ff2a9b);color:#fff;text-decoration:none;border:0;cursor:pointer;box-shadow:0 8px 18px rgba(255,62,165,.3);transition:transform .15s ease,filter .2s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.secondary{background:linear-gradient(180deg,var(--accent-2),#7e1ea3);box-shadow:0 8px 18px rgba(156,39,176,.28)}
.inline{display:flex;gap:10px;align-items:flex-end}

/* Ensure bright white text for all buttons, including navbar links */
.btn, .btn:link, .btn:visited{color:#fff; opacity:1}
.navbar .btn{color:#fff}
.navbar .btn:hover, .navbar .btn:focus{color:#fff}
button.btn{-webkit-appearance:none;appearance:none}
.navbar form{margin:0}
.navbar li{display:flex;align-items:center}

/* Forms */
form{margin-top:8px}
label{display:block;margin:12px 0 6px;color:var(--muted)}
input,textarea,select{width:100%;padding:12px 14px;background:var(--elev);color:var(--text);border:1px solid var(--border);border-radius:10px;outline:none;transition:border-color .15s ease, box-shadow .15s ease}
input::placeholder,textarea::placeholder{color:#8b8ba1}
input:focus,textarea:focus,select:focus{border-color:rgba(255,62,165,.6);box-shadow:0 0 0 3px rgba(255,62,165,.2)}
.form-card{background:linear-gradient(180deg,var(--card),var(--elev));border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}

/* Messages */
.msg{padding:10px 12px;border-radius:10px;margin-bottom:12px;border:1px solid var(--border)}
.msg.success{background:rgba(46,204,113,.12);color:#2ecc71;border-color:rgba(46,204,113,.4)}
.msg.error{background:rgba(255,77,109,.12);color:var(--err);border-color:rgba(255,77,109,.45)}

/* Footer */
footer{border-top:1px solid var(--border);margin-top:24px;padding:16px;text-align:center;color:var(--muted)}