/* =====================================================

   DUL • SI BARBER STUDIO

   Modern / Urban / Elegant

   ===================================================== */

/* ================= VARIABLES ================= */

:root {

  --burgundy: #4F0F00;

  --white: #FFFCFC;

  --black: #000000;

  --gray: #A8A1A1;

  --display: "Archivo Black", sans-serif;

  --symbol: "Bowlby One SC", sans-serif;

  --body: "Manrope", sans-serif;

  --max-width: 1200px;

}

/* ================= RESET ================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  font-family: var(--body);

  background: var(--burgundy);

  color: var(--white);

  line-height: 1.5;

}

a {

  color: inherit;

  text-decoration: none;

}

button {

  font-family: inherit;

}

/* ================= HEADER ================= */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background: var(--burgundy);

  border-bottom: 1px solid rgba(255, 252, 252, 0.15);

}

.nav-container {

  max-width: var(--max-width);

  margin: auto;

  min-height: 78px;

  padding: 0 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

/* Logo */

.nav-logo {

  display: flex;

  align-items: center;

  gap: 10px;

}

.nav-logo-number {

  font-family: var(--symbol);

  font-size: 28px;

  line-height: 1;

  transform: skewX(-7deg) scaleX(0.85);

}

.nav-logo-text {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.15em;

}

/* Navigation */

.nav {

  display: flex;

  align-items: center;

  gap: 26px;

}

.nav a {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.1em;

  transition: opacity 0.2s ease;

}

.nav a:hover {

  opacity: 0.6;

}

/* Mobile menu */

.menu-toggle {

  display: none;

  border: 0;

  background: transparent;

  cursor: pointer;

  width: 34px;

}

.menu-toggle span {

  display: block;

  height: 2px;

  margin: 6px 0;

  background: var(--white);

}

/* ================= GENERAL SECTIONS ================= */

.section {

  padding: 120px 30px;

}

.section-heading {

  max-width: var(--max-width);

  margin: 0 auto 60px;

}

.section-heading h2 {

  font-family: var(--display);

  font-size: clamp(38px, 6vw, 72px);

  line-height: 0.95;

  letter-spacing: -0.04em;

}

.eyebrow {

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;

}

.light-heading {

  color: var(--white);

}

/* ================= HOME ================= */

.hero {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 120px 30px 80px;

  background: var(--burgundy);

  overflow: hidden;

}

/* Main DUL • SI */

.hero-center {

  text-align: center;

}

.hero-center h1 {

  font-family: var(--display);

  font-size: clamp(68px, 13vw, 180px);

  line-height: 0.85;

  letter-spacing: -0.065em;

  color: var(--white);

}

.hero-center h1 span {

  font-family: var(--body);

  font-weight: 700;

  letter-spacing: 0;

}

.hero-tagline {

  margin-top: 28px;

  font-size: clamp(11px, 1.5vw, 15px);

  font-weight: 600;

  letter-spacing: 0.22em;

}

/* Small 12 mark */

.hero-mark {

  position: absolute;

  right: 40px;

  bottom: 35px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  color: var(--white);

}

.mark-number {

  font-family: var(--symbol);

  font-size: 42px;

  line-height: 0.9;

  transform:

    skewX(-8deg)

    scaleX(0.72);

}

.mark-text {

  margin-top: 5px;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.17em;

}

/* ================= SERVICES ================= */

.services-section {

  background: var(--white);

  color: var(--black);

}

/* Service cards */

.services-grid {

  max-width: var(--max-width);

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}

.service-card {

  min-height: 250px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  background: var(--white);

  border: 1px solid #e4dfdf;

}

.service-card h3 {

  font-family: var(--display);

  color: var(--burgundy);

  font-size: 25px;

  line-height: 1;

  letter-spacing: -0.025em;

}

.service-description {

  margin-top: 28px;

  font-size: 14px;

  font-weight: 600;

}

.service-spanish {

  margin-top: 8px;

  color: var(--burgundy);

  font-size: 12px;

  font-weight: 600;

}

.service-price {

  margin-top: auto;

  padding-top: 30px;

  color: var(--black);

  font-family: var(--display);

  font-size: 25px;

}

/* Special services */

.special-services {

  max-width: var(--max-width);

  margin: 70px auto 0;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

}

.special-service {

  padding: 40px;

  background: var(--burgundy);

  color: var(--white);

}

.special-service h3 {

  font-family: var(--display);

  font-size: 27px;

  line-height: 1;

}

.special-service p {

  margin-top: 14px;

  font-size: 13px;

}

.special-service .special-spanish {

  color: var(--gray);

}

.special-button {

  display: inline-block;

  margin-top: 28px;

  padding: 13px 18px;

  background: var(--white);

  color: var(--burgundy);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.08em;

  transition:

    background 0.2s ease,

    color 0.2s ease;

}

.special-button:hover {

  background: var(--black);

  color: var(--white);

}

/* ================= PROMOTIONS ================= */

.promotions-section {

  background: var(--burgundy);

}

.promotions-grid {

  max-width: var(--max-width);

  margin: auto;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

}

.promotion-card {

  padding: 50px;

  background: var(--white);

  color: var(--black);

}

.promotion-discount {

  font-family: var(--display);

  color: var(--burgundy);

  font-size: 48px;

  line-height: 1;

}

.promotion-card h3 {

  margin-top: 12px;

  font-family: var(--display);

  font-size: 25px;

}

.promotion-card > p:not(.promotion-discount) {

  margin-top: 22px;

  font-size: 14px;

  font-weight: 600;

}

.promotion-card small {

  display: block;

  margin-top: 12px;

  color: var(--gray);

  font-size: 11px;

}

/* ================= ABOUT ================= */

.about-section {

  background: var(--white);

  color: var(--black);

}

.about-content {

  max-width: 950px;

  margin: auto;

}

.about-block + .about-block {

  margin-top: 55px;

}

.about-main {

  font-size: clamp(20px, 3vw, 32px);

  font-weight: 600;

  line-height: 1.3;

}

.about-spanish {

  max-width: 850px;

  margin-top: 18px;

  color: var(--gray);

  font-size: 13px;

  line-height: 1.7;

}

/* ================= DIRECTIONS ================= */

.directions-section {

  background: var(--burgundy);

}

.directions-content {

  max-width: var(--max-width);

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}

.address {

  font-size: clamp(22px, 3vw, 35px);

  font-weight: 600;

  line-height: 1.3;

}

.outline-button {

  display: inline-block;

  padding: 17px 25px;

  border: 1px solid var(--white);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.1em;

  transition:

    background 0.2s ease,

    color 0.2s ease;

}

.outline-button:hover {

  background: var(--white);

  color: var(--burgundy);

}

/* ================= GALLERY ================= */

.gallery-section {

  background: var(--white);

  color: var(--black);

}

.gallery-empty {

  max-width: var(--max-width);

  min-height: 300px;

  margin: auto;

  border: 1px solid #ded8d8;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}

.gallery-empty p {

  font-family: var(--display);

  color: var(--burgundy);

  font-size: 28px;

}

.gallery-empty span {

  margin-top: 10px;

  color: var(--gray);

  font-size: 13px;

}

/* ================= CONTACTS ================= */

.contacts-section {

  background: var(--burgundy);

}

.contact-main-card {

  max-width: var(--max-width);

  margin: auto;

  padding: 50px;

  background: var(--white);

  color: var(--black);

}

.contact-main-card h3 {

  font-family: var(--display);

  color: var(--burgundy);

  font-size: 35px;

  line-height: 1;

}

.contact-main-card p {

  margin-top: 25px;

  font-size: 17px;

  font-weight: 600;

  line-height: 1.6;

}

.contact-map {

  display: inline-block;

  margin-top: 25px;

  padding: 13px 20px;

  background: var(--burgundy);

  color: var(--white);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.08em;

}

/* Contact details */

.contact-details {

  max-width: var(--max-width);

  margin: 18px auto 0;

  padding: 40px;

  background: var(--white);

  color: var(--black);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}

.contact-detail h3 {

  font-family: var(--display);

  color: var(--burgundy);

  font-size: 28px;

}

.contact-detail h4 {

  margin-top: 18px;

  font-size: 12px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}

.contact-detail p {

  margin-top: 8px;

  font-size: 13px;

  line-height: 1.8;

}

/* Instagram */

.instagram-button {

  min-width: 160px;

  padding: 18px 25px;

  background: var(--burgundy);

  color: var(--white);

  text-align: center;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.1em;

  transition:

    background 0.2s ease,

    color 0.2s ease;

}

.instagram-button:hover {

  background: var(--black);

}

/* ================= FOOTER ================= */

.site-footer {

  padding: 50px 30px;

  background: var(--black);

  color: var(--white);

  text-align: center;

}

.footer-brand {

  display: flex;

  flex-direction: column;

  gap: 5px;

}

.footer-brand strong {

  font-family: var(--display);

  font-size: 24px;

}

.footer-brand span {

  color: var(--gray);

  font-size: 10px;

  letter-spacing: 0.1em;

}

.site-footer p {

  margin-top: 18px;

  color: var(--gray);

  font-size: 10px;

}

/* =====================================================

   RESPONSIVE

   ===================================================== */

@media (max-width: 900px) {

  .nav {

    gap: 15px;

  }

  .nav a {

    font-size: 9px;

  }

  .services-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 700px) {

  .nav-container {

    min-height: 70px;

    padding: 0 20px;

  }

  .menu-toggle {

    display: block;

  }

  .nav {

    position: absolute;

    top: 70px;

    left: 0;

    width: 100%;

    padding: 25px 20px;

    background: var(--burgundy);

    display: none;

    flex-direction: column;

    align-items: flex-start;

    border-top: 1px solid rgba(255,255,255,0.15);

  }

  .nav.open {

    display: flex;

  }

  .nav a {

    font-size: 11px;

    padding: 8px 0;

  }

  /* Home */

  .hero {

    min-height: 100svh;

    padding: 100px 20px 70px;

  }

  .hero-center h1 {

    font-size: clamp(55px, 17vw, 100px);

  }

  .hero-tagline {

    margin-top: 20px;

    font-size: 9px;

    letter-spacing: 0.15em;

  }

  .hero-mark {

    right: 20px;

    bottom: 25px;

  }

  .mark-number {

    font-size: 30px;

  }

  /* Sections */

  .section {

    padding: 85px 20px;

  }

  .section-heading {

    margin-bottom: 40px;

  }

  /* Services */

  .services-grid {

    grid-template-columns: 1fr;

  }

  .service-card {

    min-height: 220px;

    padding: 28px;

  }

  .service-card h3 {

    font-size: 22px;

  }

  .special-services {

    grid-template-columns: 1fr;

  }

  .special-service {

    padding: 30px;

  }

  /* Promotions */

  .promotions-grid {

    grid-template-columns: 1fr;

  }

  .promotion-card {

    padding: 35px;

  }

  .promotion-discount {

    font-size: 40px;

  }

  /* Directions */

  .directions-content {

    flex-direction: column;

    align-items: flex-start;

  }

  .outline-button {

    width: 100%;

    text-align: center;

  }

  /* Contacts */

  .contact-main-card {

    padding: 35px 25px;

  }

  .contact-main-card h3 {

    font-size: 27px;

  }

  .contact-details {

    padding: 30px 25px;

    flex-direction: column;

    align-items: flex-start;

  }

  .instagram-button {

    width: 100%;

  }

}