/* styles.css — estilos personalizados para 17 BARBER STUDIO */

/* Navbar personalizado similar a la imagen */
.navbar-custom { background: #0e0e0e; border-bottom: 1px solid rgba(255,255,255,0.03); }
.navbar-custom .navbar-brand img { object-fit: cover; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); }
.navbar-custom .nav-link { color: #ddd; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.navbar-custom .nav-link.active, .navbar-custom .nav-link:hover { color: #c59e40; }
.navbar-custom .navbar-nav.mx-auto { gap: 2rem; }
.navbar-custom .contact-link { color: #ddd; font-weight: 700; }
@media (max-width: 991px) {
    .navbar-custom .navbar-nav.mx-auto { margin-top: 0.5rem; gap: 1rem; }
}

/* Hero (full-bleed background + overlay) */
.hero { position: relative; color: #fff; padding: 8rem 0; min-height: 72vh; background-image: url('../img/Screenshot 2026-01-08 222132.png'); background-size: cover; background-position: center right; background-repeat: no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,0.55), rgba(11,11,11,0.55)); z-index: 0; }
.hero .container { position: relative; z-index: 1; }
.hero .hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1; text-transform: uppercase; margin-bottom: .6rem; color: #fff; }
.hero .hero-sub { font-size: 1.1rem; color: #d1d1d1; margin-bottom: 1.5rem; }
.btn-cta { background: #c59e40; border-color: #c59e40; color: #111; padding: .7rem 1.1rem; font-weight: 700; border-radius: .4rem; }
.btn-cta:hover { background: #b3882f; border-color: #b3882f; color: #fff; }
@media (min-width: 1200px) {
    .hero { padding: 10rem 0; }
    .hero .hero-title { font-size: 4.2rem; }
}
@media (max-width: 991px) {
    .hero { padding: 4rem 0; background-position: center; }
    .hero .hero-title { font-size: 2rem; }
    .hero .hero-sub { font-size: 1rem; }
}
/* keep hero-img in case it is used elsewhere */
.hero-img { display: none; }

/* Services section */
.services-section { background: #f7f8f9; }
.section-title { font-size: 1.75rem; font-weight: 800; color: #0f1720; margin-bottom: .25rem; }
.section-sub { color: #6b6b6b; margin-bottom: 1.75rem; }
.service-col { padding: 0 1.25rem; }
@media (min-width: 768px) {
    .service-col:not(:last-child) { border-right: 1px solid rgba(15,23,32,0.06); }
}
.service-card { padding: 1.25rem; background: transparent; border-radius: .6rem; transition: transform .22s, box-shadow .22s; }
.service-icon { width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; background:#fff; border:1px solid rgba(0,0,0,0.06); color:#0f1720; box-shadow: 0 8px 22px rgba(10,10,10,0.06); }
.service-icon svg { width:40px; height:40px; display:block; }
.service-icon .icon-fill { fill:#c59e40; stroke:none; }
.service-icon .icon-stroke { stroke:#c59e40; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.service-card h3 { margin-bottom:.5rem; font-weight:700; color:#111; }
.service-card p { color:#6b6b6b; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10,10,10,0.06); }


/* Page header for reservas */
.page-header { margin-top: 1rem; }
.page-title { font-size: 2rem; font-weight: 800; text-transform: none; letter-spacing: 0.04em; color: #fff; }
.page-title .text-gold { color: #c59e40; font-weight: 900; }
@media (min-width: 992px) {
    .page-title { font-size: 2.6rem; }
}

/* Reservas page visual refresh */
.reservas-page { background: linear-gradient(180deg,#fbfaf8,#f3efe8); min-height: 100vh; color: #222; }
.reservas-card { background: linear-gradient(180deg,#fff,#fcfbf9); border-radius: .9rem; padding: 1.75rem; box-shadow: 0 20px 50px rgba(16,20,24,0.08), inset 0 1px 0 rgba(255,255,255,0.6); border: 1px solid rgba(198,170,110,0.12); position: relative; overflow: hidden; }
.reservas-card::before { content: ""; position: absolute; left: 0; top: 0; height: 6px; width: 100%; background: linear-gradient(90deg,#c59e40,#b3882f); z-index: 2; }
.reservas-card .page-title { color: #0f1720; }
.reservas-card .page-title .text-gold { color: #b57f25; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.reservas-card .lead { color: #6b6b6b; margin-bottom: 1rem; }
.reservas-card .decor-sub { display:inline-block; padding: .25rem .6rem; background: rgba(197,158,64,0.08); border-radius: .4rem; color:#7a5b20; font-weight:600; margin-bottom: .8rem; font-size:.9rem; }
/* larger, full-width calendly inside card */
.calendly-widget { width: 100%; height: 920px; max-width: 100%; min-width: 300px; border-radius: .5rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 8px 30px rgba(18,18,18,0.06); }
@media (max-width: 767px) {
    .calendly-widget { height: 700px; }
    .reservas-card { padding: 1rem; }
}

/* Secondary button matching palette */
.btn-secondary-ghost { background: transparent; border: 1px solid #c59e40; color: #c59e40; font-weight: 700; padding: .55rem .9rem; border-radius: .4rem; display: inline-block; }
.btn-secondary-ghost:hover, .btn-secondary-ghost:focus { background: #c59e40; color: #111; text-decoration: none; }
.btn-secondary-ghost + .btn-ghost-space { margin-left: .5rem; }

/* Footer styles */
.site-footer { background: #0e0e0e; color: #ddd; }
.site-footer .footer-brand { font-weight: 800; letter-spacing: 0.04em; color: #fff; }
.site-footer .footer-brand-link img { border: 2px solid rgba(255,255,255,0.06); }
.site-footer .socials a { color: #c59e40; opacity: 1; transition: color .18s, transform .18s; display:inline-block; }
.site-footer .socials a .social-icon-svg { width: 22px; height: 22px; display:block; }
.site-footer .socials a:hover { color: #e0b65a; transform: translateY(-4px) scale(1.05); }
.site-footer .socials a:focus { outline: 3px solid rgba(197,158,64,0.14); outline-offset: 4px; border-radius: 6px; }
.site-footer .footer-contact { color: #f1f1f1; font-weight: 600; }
.site-footer .small { color: rgba(255,255,255,0.65); }
@media (max-width: 767px) {
    .site-footer .footer-contact, .site-footer .footer-hours { text-align: center; }
    .site-footer .text-md-end { text-align: center !important; }
}