/* =========================================================
   5TH AVENUE
   BARBER & MASSAGE
   STYLE.CSS COMPLETO
========================================================= */

:root {
  --black: #01050b;
  --dark: #020812;
  --dark-blue: #061321;

  --blue: #008cff;
  --blue-light: #00c8ff;
  --blue-bright: #33dcff;

  --white: #ffffff;
  --text: #f5f9ff;
  --muted: #9caabd;

  --border: rgba(49, 151, 225, 0.24);
  --border-bright: rgba(0, 177, 255, 0.60);
}


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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", Arial, sans-serif;

  background:
    linear-gradient(
      180deg,
      #01060d,
      #020b14,
      #01050b
    );

  color: var(--text);

  min-height: 100vh;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}


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

.header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background:
    rgba(1, 6, 13, 0.92);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom:
    1px solid
    rgba(0, 151, 255, 0.20);

  box-shadow:
    0 5px 30px
    rgba(0, 0, 0, 0.30);
}

.nav-container {
  min-height: 88px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}


/* =========================================================
   LOGO SUPERIOR
========================================================= */

.logo-area {
  display: flex;
  align-items: center;

  flex-shrink: 0;
}

.main-logo {
  width: 105px;
  height: 76px;

  object-fit: contain;

  /*
    Si logo5.png tiene fondo negro,
    screen ayuda a esconderlo sobre
    el fondo oscuro.
  */
  mix-blend-mode: screen;

  filter:
    brightness(1.35)
    contrast(1.35)
    saturate(1.8)
    drop-shadow(
      0 0 5px
      rgba(0, 210, 255, 1)
    )
    drop-shadow(
      0 0 15px
      rgba(0, 140, 255, 0.85)
    );
}


/* =========================================================
   MENÚ
========================================================= */

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 35px;
}

.desktop-nav a {
  position: relative;

  padding:
    33px 0 28px;

  color: #cbd5e1;

  font-size: 13px;
  font-weight: 600;

  transition:
    color 0.25s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
  color: #ffffff;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 21px;

  height: 2px;

  background:
    var(--blue-light);

  box-shadow:
    0 0 8px
    var(--blue-light),
    0 0 18px
    var(--blue);
}


/* =========================================================
   BOTÓN RESERVAR HEADER
========================================================= */

.nav-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    12px 18px;

  border:
    1px solid
    #00baff;

  border-radius:
    8px;

  color:
    #ffffff;

  background:
    rgba(0, 119, 255, 0.12);

  font-size:
    12px;

  font-weight:
    700;

  box-shadow:
    0 0 10px
    rgba(0, 157, 255, 0.30),
    inset 0 0 12px
    rgba(0, 157, 255, 0.08);

  transition:
    0.25s ease;
}

.nav-book:hover {
  background:
    rgba(0, 140, 255, 0.25);

  border-color:
    #33dcff;

  box-shadow:
    0 0 12px
    rgba(0, 204, 255, 0.55),
    0 0 28px
    rgba(0, 110, 255, 0.30);
}


/* =========================================================
   MENÚ MÓVIL
========================================================= */

.menu-button {
  display: none;

  width: 44px;
  height: 40px;

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

  border-radius:
    8px;

  background:
    rgba(0, 130, 255, 0.10);

  color:
    #ffffff;

  font-size:
    20px;
}

.mobile-nav {
  display: none;

  background:
    rgba(1, 7, 15, 0.98);

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

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;

  padding:
    15px 25px;

  color:
    #cbd5e1;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.05);
}


/* =========================================================
   HERO
   AQUÍ ESTÁ TU IMAGEN fondo.png
========================================================= */

.hero {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background-image:
    url("./imagenes/fondo.png");

  background-size:
    cover;

  background-position:
    center center;

  background-repeat:
    no-repeat;

  border-bottom:
    1px solid
    rgba(0, 140, 255, 0.22);
}


/*
  CAPA OSCURA.
  Esto hace que la imagen no parezca
  simplemente una foto pegada.
*/

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

      rgba(0, 3, 8, 0.98) 0%,

      rgba(0, 5, 12, 0.95) 22%,

      rgba(0, 8, 18, 0.82) 45%,

      rgba(0, 13, 30, 0.57) 68%,

      rgba(0, 8, 20, 0.45) 100%
    ),

    linear-gradient(
      180deg,

      rgba(0, 0, 0, 0.15) 0%,

      rgba(0, 10, 25, 0.04) 45%,

      rgba(0, 3, 10, 0.85) 100%
    );
}


/*
  EFECTO AZUL SOBRE LA FOTO
*/

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    radial-gradient(
      circle at 72% 48%,

      rgba(0, 170, 255, 0.22) 0%,

      rgba(0, 102, 255, 0.11) 27%,

      transparent 54%
    ),

    radial-gradient(
      circle at 92% 10%,

      rgba(0, 174, 255, 0.14),

      transparent 32%
    ),

    radial-gradient(
      circle at 50% 100%,

      rgba(0, 73, 255, 0.08),

      transparent 40%
    );
}


/* =========================================================
   CONTENIDO HERO
========================================================= */

.hero-container {
  position: relative;

  z-index: 5;

  display: grid;

  grid-template-columns:
    1.15fr 0.85fr;

  align-items: center;

  gap: 50px;

  padding:
    80px 0;
}

.hero-content {
  position: relative;

  z-index: 6;

  max-width:
    690px;
}


/* =========================================================
   TEXTO PEQUEÑO SUPERIOR
========================================================= */

.eyebrow {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom:
    18px;

  color:
    #d4dfeb;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.22em;

  text-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.9);
}

.eyebrow span {
  width: 40px;
  height: 2px;

  background:
    var(--blue-light);

  box-shadow:
    0 0 8px
    var(--blue-light),
    0 0 18px
    var(--blue);
}


/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

.hero h1 {
  max-width:
    760px;

  margin-bottom:
    20px;

  color:
    #ffffff;

  font-size:
    clamp(
      40px,
      5vw,
      68px
    );

  font-weight:
    900;

  line-height:
    1.02;

  letter-spacing:
    -0.045em;

  text-shadow:
    0 3px 8px
    rgba(0, 0, 0, 0.95),
    0 8px 25px
    rgba(0, 0, 0, 0.75);
}

.hero h1 strong {
  color:
    #009cff;

  text-shadow:
    0 0 5px
    #0077ff,
    0 0 12px
    rgba(0, 174, 255, 0.85),
    0 0 26px
    rgba(0, 102, 255, 0.60);
}


/* =========================================================
   DESCRIPCIÓN HERO
========================================================= */

.hero-description {
  max-width:
    620px;

  margin-bottom:
    30px;

  color:
    rgba(235, 245, 255, 0.88);

  font-size:
    15px;

  line-height:
    1.8;

  text-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.95);
}


/* =========================================================
   BOTONES
========================================================= */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-bottom:
    38px;
}

.button {
  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    0 22px;

  border-radius:
    8px;

  font-size:
    12px;

  font-weight:
    700;

  transition:
    0.25s ease;
}

.primary-button {
  color:
    #ffffff;

  border:
    1px solid
    #21d1ff;

  background:
    linear-gradient(
      180deg,
      #079cff,
      #0061dc
    );

  box-shadow:
    0 0 8px
    rgba(0, 204, 255, 0.75),

    0 0 20px
    rgba(0, 140, 255, 0.55),

    0 0 40px
    rgba(0, 85, 255, 0.25),

    inset 0 1px 0
    rgba(255, 255, 255, 0.35);
}

.primary-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 0 12px
    rgba(0, 220, 255, 0.90),

    0 0 28px
    rgba(0, 140, 255, 0.70),

    0 0 50px
    rgba(0, 85, 255, 0.35);
}

.secondary-button {
  color:
    #ffffff;

  border:
    1px solid
    #71849a;

  background:
    rgba(2, 12, 24, 0.68);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.secondary-button:hover {
  border-color:
    var(--blue-light);

  background:
    rgba(0, 100, 200, 0.16);

  box-shadow:
    0 0 18px
    rgba(0, 157, 255, 0.25);
}


/* =========================================================
   CARACTERÍSTICAS HERO
========================================================= */

.hero-features {
  display: flex;
  flex-wrap: wrap;

  gap:
    28px;
}

.feature {
  display: flex;
  align-items: center;

  gap:
    8px;

  color:
    #e1e8f0;

  font-size:
    11px;

  font-weight:
    600;

  text-shadow:
    0 2px 7px
    rgba(0, 0, 0, 0.9);
}

.feature-icon {
  color:
    var(--blue-light);

  font-size:
    20px;

  text-shadow:
    0 0 8px
    var(--blue-light),
    0 0 16px
    var(--blue);
}


/* =========================================================
   LOGO GRANDE DEL HERO
========================================================= */

.hero-brand {
  position: relative;

  z-index: 6;

  min-height:
    420px;

  display: flex;
  align-items: center;
  justify-content: center;
}


/*
  RESPLANDOR DETRÁS DEL LOGO
*/

.hero-brand::before {
  content: "";

  position: absolute;

  width:
    420px;

  height:
    420px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,

      rgba(0, 174, 255, 0.24) 0%,

      rgba(0, 102, 255, 0.11) 35%,

      transparent 70%
    );

  filter:
    blur(25px);

  z-index:
    -1;
}

.hero-brand img {
  position:
    relative;

  z-index:
    2;

  width:
    min(420px, 100%);

  max-height:
    430px;

  object-fit:
    contain;

  mix-blend-mode:
    screen;

  filter:
    brightness(1.4)
    contrast(1.4)
    saturate(1.9)

    drop-shadow(
      0 0 5px
      rgba(0, 210, 255, 1)
    )

    drop-shadow(
      0 0 15px
      rgba(0, 157, 255, 0.95)
    )

    drop-shadow(
      0 0 35px
      rgba(0, 89, 255, 0.70)
    );
}


/* =========================================================
   SECCIONES
========================================================= */

.section {
  padding:
    80px 0;
}

.section-heading {
  display: flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    35px;
}

.small-title {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #91a3b9;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}

.section-heading h2 {
  font-size:
    32px;

  font-weight:
    800;
}

.section-heading h2 span {
  color:
    var(--blue);

  text-shadow:
    0 0 12px
    rgba(0, 140, 255, 0.35);
}

.section-heading > p {
  max-width:
    340px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;
}


/* =========================================================
   SERVICIOS
========================================================= */

.services-section {
  position:
    relative;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(0, 89, 255, 0.06),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #020b14,
      #01070e
    );

  border-bottom:
    1px solid
    rgba(0, 130, 255, 0.12);
}

.service-category {
  margin-top:
    25px;
}

.massage-category {
  margin-top:
    60px;
}

.category-heading {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  margin-bottom:
    18px;
}

.category-icon {
  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

  color:
    var(--blue-light);

  background:
    rgba(0, 124, 255, 0.08);

  box-shadow:
    0 0 15px
    rgba(0, 124, 255, 0.15);
}

.category-heading span {
  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}

.category-heading h3 {
  margin-top:
    2px;

  font-size:
    18px;
}


/* =========================================================
   TARJETAS SERVICIOS
========================================================= */

.service-grid {
  display:
    grid;

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

  gap:
    14px;
}

.service-card {
  position:
    relative;

  min-height:
    230px;

  padding:
    22px;

  overflow:
    hidden;

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

  border-radius:
    10px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 25, 43, 0.96),
      rgba(2, 12, 22, 0.97)
    );

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.16);

  transition:
    0.25s ease;
}

.service-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    80px;

  height:
    1px;

  background:
    var(--blue-light);

  box-shadow:
    0 0 10px
    var(--blue);
}

.service-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(0, 174, 255, 0.55);

  box-shadow:
    0 15px 38px
    rgba(0, 0, 0, 0.38),

    0 0 24px
    rgba(0, 130, 255, 0.11);
}

.service-icon {
  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    17px;

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

  border-radius:
    50%;

  color:
    var(--blue-light);

  background:
    rgba(0, 130, 255, 0.08);

  font-size:
    20px;

  box-shadow:
    0 0 15px
    rgba(0, 157, 255, 0.15);
}

.service-card h3 {
  margin-bottom:
    9px;

  font-size:
    15px;
}

.service-card p {
  min-height:
    62px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;
}

.service-price {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    15px;

  padding-top:
    14px;

  border-top:
    1px solid
    rgba(57, 122, 174, 0.20);

  color:
    #9dacbd;

  font-size:
    11px;
}

.service-price strong {
  color:
    var(--blue);

  font-size:
    20px;

  text-shadow:
    0 0 10px
    rgba(0, 140, 255, 0.50);
}


/* =========================================================
   RESERVACIONES
========================================================= */

.booking-section {
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(0, 110, 255, 0.05),
      transparent 30%
    ),

    #01070e;
}

.booking-layout {
  display:
    grid;

  grid-template-columns:
    0.95fr 1.05fr;

  overflow:
    hidden;

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

  border-radius:
    12px;

  background:
    rgba(3, 15, 27, 0.96);

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.25);
}

.calendar-panel,
.appointment-panel {
  padding:
    25px;
}

.calendar-panel {
  border-right:
    1px solid
    var(--border);
}

.panel-title {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    20px;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.12em;
}

.panel-title span {
  width:
    35px;

  height:
    2px;

  background:
    var(--blue);

  box-shadow:
    0 0 8px
    var(--blue);
}


/* =========================================================
   CALENDARIO
========================================================= */

.calendar-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    18px;
}

.calendar-header h3 {
  font-size:
    16px;

  text-transform:
    capitalize;
}

.calendar-arrow {
  width:
    36px;

  height:
    36px;

  border:
    1px solid
    rgba(0, 157, 255, 0.10);

  border-radius:
    8px;

  background:
    #102337;

  color:
    #ffffff;

  font-size:
    20px;

  transition:
    0.2s ease;
}

.calendar-arrow:hover {
  background:
    #173b5b;

  border-color:
    var(--blue);
}

.calendar {
  display:
    grid;

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

  gap:
    7px;
}

.calendar-weekday {
  padding:
    8px 0;

  text-align:
    center;

  color:
    #8997a9;

  font-size:
    10px;

  font-weight:
    600;
}

.calendar-day {
  aspect-ratio:
    1 / 1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    none;

  border-radius:
    50%;

  background:
    transparent;

  color:
    #e9f1fa;

  font-size:
    12px;

  transition:
    0.2s ease;
}

.calendar-day:not(.disabled):hover {
  color:
    #ffffff;

  background:
    rgba(0, 142, 255, 0.18);

  box-shadow:
    0 0 12px
    rgba(0, 157, 255, 0.25);
}

.calendar-day.selected {
  background:
    var(--blue);

  color:
    #ffffff;

  box-shadow:
    0 0 10px
    #00baff,

    0 0 22px
    rgba(0, 140, 255, 0.70);
}

.calendar-day.today {
  border:
    1px solid
    rgba(0, 191, 255, 0.70);
}

.calendar-day.disabled {
  opacity:
    0.20;

  cursor:
    default;
}

.calendar-blank {
  aspect-ratio:
    1 / 1;
}


/* =========================================================
   LEYENDA CALENDARIO
========================================================= */

.calendar-legend {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    15px;

  margin-top:
    20px;

  padding-top:
    18px;

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

  color:
    #8997a9;

  font-size:
    10px;
}

.calendar-legend span {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}

.calendar-legend i {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;
}

.available-dot {
  background:
    #00d7ff;
}

.selected-dot {
  background:
    #007eff;

  box-shadow:
    0 0 8px
    #008cff;
}

.closed-dot {
  background:
    #49596b;
}


/* =========================================================
   PANEL DE HORARIOS
========================================================= */

.appointment-title {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;

  margin-bottom:
    22px;
}

.clock-icon {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    50%;

  color:
    var(--blue-light);

  box-shadow:
    0 0 12px
    rgba(0, 157, 255, 0.20);
}

.appointment-title h3 {
  margin-bottom:
    5px;

  font-size:
    16px;
}

.appointment-title p {
  color:
    var(--muted);

  font-size:
    11px;
}


/* =========================================================
   HORARIOS
========================================================= */

.time-slots {
  display:
    grid;

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

  gap:
    9px;

  min-height:
    130px;

  margin-bottom:
    25px;
}

.empty-state {
  grid-column:
    1 / -1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    25px;

  text-align:
    center;

  color:
    #7f8da0;
}

.empty-icon {
  margin-bottom:
    10px;

  color:
    var(--blue);

  font-size:
    30px;
}

.empty-state p {
  max-width:
    260px;

  font-size:
    11px;

  line-height:
    1.6;
}

.time-slot {
  height:
    42px;

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

  border-radius:
    7px;

  background:
    rgba(5, 22, 38, 0.75);

  color:
    #b9c7d8;

  font-size:
    11px;

  font-weight:
    600;

  transition:
    0.2s ease;
}

.time-slot:hover {
  border-color:
    var(--blue);

  color:
    #ffffff;

  background:
    rgba(0, 126, 255, 0.10);
}

.time-slot.selected {
  background:
    rgba(0, 126, 255, 0.25);

  border-color:
    #00baff;

  color:
    #ffffff;

  box-shadow:
    0 0 12px
    rgba(0, 157, 255, 0.30);
}

.time-slot.booked {
  opacity:
    0.25;

  cursor:
    not-allowed;

  text-decoration:
    line-through;
}


/* =========================================================
   FORMULARIO
========================================================= */

.booking-form {
  padding-top:
    22px;

  border-top:
    1px solid
    var(--border);
}

.form-row {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}

.input-group {
  margin-bottom:
    14px;
}

.input-group label {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #9aabba;

  font-size:
    10px;

  font-weight:
    600;
}

.input-group input,
.input-group select {
  width:
    100%;

  height:
    45px;

  padding:
    0 13px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    rgba(1, 9, 18, 0.90);

  color:
    #ffffff;

  transition:
    0.2s ease;
}

.input-group input::placeholder {
  color:
    #536579;
}

.input-group input:focus,
.input-group select:focus {
  border-color:
    var(--blue);

  box-shadow:
    0 0 0 2px
    rgba(0, 140, 255, 0.08),

    0 0 12px
    rgba(0, 140, 255, 0.08);
}

.input-group option,
.input-group optgroup {
  background:
    #071625;

  color:
    #ffffff;
}

.booking-button {
  width:
    100%;

  margin-top:
    5px;
}

.booking-button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;

  transform:
    none;

  box-shadow:
    none;
}

.booking-note {
  margin-top:
    10px;

  text-align:
    center;

  color:
    #66788c;

  font-size:
    9px;
}

.booking-message {
  display:
    none;

  margin-top:
    15px;

  padding:
    12px;

  border:
    1px solid
    rgba(0, 204, 255, 0.35);

  border-radius:
    7px;

  background:
    rgba(0, 140, 255, 0.10);

  color:
    #bfeeff;

  font-size:
    11px;
}


/* =========================================================
   CONTACTO
========================================================= */

.contact-section {
  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(0, 120, 255, 0.05),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #020b14,
      #01060c
    );

  border-top:
    1px solid
    rgba(0, 130, 255, 0.10);
}

.contact-grid {
  display:
    grid;

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

  gap:
    14px;

  margin-bottom:
    20px;
}

.contact-card {
  min-height:
    130px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    15px;

  padding:
    20px;

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

  border-radius:
    10px;

  background:
    rgba(4, 18, 31, 0.85);

  transition:
    0.25s ease;
}

.contact-card:hover {
  border-color:
    rgba(0, 174, 255, 0.45);

  transform:
    translateY(-3px);

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.25);
}

.contact-icon {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    50%;

  color:
    var(--blue-light);

  box-shadow:
    0 0 10px
    rgba(0, 157, 255, 0.18);
}

.contact-card span {
  color:
    #71869d;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.15em;
}

.contact-card h3 {
  margin-top:
    6px;

  font-size:
    13px;
}

.contact-card p {
  margin-top:
    5px;

  color:
    #9aabba;

  font-size:
    11px;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-button {
  width:
    100%;

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

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

  border-radius:
    8px;

  background:
    rgba(0, 126, 255, 0.10);

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    700;

  box-shadow:
    0 0 15px
    rgba(0, 157, 255, 0.12);

  transition:
    0.25s ease;
}

.whatsapp-button:hover {
  background:
    rgba(0, 126, 255, 0.20);

  border-color:
    var(--blue-light);

  box-shadow:
    0 0 22px
    rgba(0, 157, 255, 0.28);
}


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

footer {
  padding:
    22px 0;

  border-top:
    1px solid
    rgba(0, 140, 255, 0.14);

  background:
    #01050a;
}

.footer-content {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #75869a;

  font-size:
    10px;
}

.footer-content strong {
  color:
    var(--blue);

  text-shadow:
    0 0 8px
    rgba(0, 140, 255, 0.30);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .desktop-nav {
    gap:
      20px;
  }

  .service-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .hero-container {
    grid-template-columns:
      1fr 1fr;
  }

  .hero-brand img {
    width:
      340px;
  }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 800px) {

  .desktop-nav,
  .nav-book {
    display:
      none;
  }

  .menu-button {
    display:
      block;
  }

  .nav-container {
    min-height:
      75px;
  }

  .main-logo {
    width:
      90px;

    height:
      64px;
  }


  /* FOTO EN CELULAR */

  .hero {
    min-height:
      auto;

    background-position:
      65% center;
  }


  /*
    En móvil dejamos ver más la fotografía
    pero conservamos el contraste.
  */

  .hero::before {
    background:

      linear-gradient(
        180deg,

        rgba(0, 4, 10, 0.68) 0%,

        rgba(0, 5, 14, 0.73) 35%,

        rgba(0, 5, 14, 0.84) 65%,

        rgba(0, 4, 12, 0.98) 100%
      );
  }

  .hero::after {
    background:

      radial-gradient(
        circle at 65% 45%,

        rgba(0, 170, 255, 0.20),

        transparent 50%
      );
  }

  .hero-container {
    grid-template-columns:
      1fr;

    padding:
      60px 0 45px;
  }

  .hero-content {
    margin:
      0 auto;

    text-align:
      center;
  }

  .eyebrow {
    justify-content:
      center;
  }

  .hero-description {
    margin-left:
      auto;

    margin-right:
      auto;
  }

  .hero-buttons {
    justify-content:
      center;
  }

  .hero-features {
    justify-content:
      center;
  }

  .hero-brand {
    min-height:
      270px;
  }

  .hero-brand::before {
    width:
      300px;

    height:
      300px;
  }

  .hero-brand img {
    width:
      280px;
  }


  /* RESERVACIONES */

  .booking-layout {
    grid-template-columns:
      1fr;
  }

  .calendar-panel {
    border-right:
      none;

    border-bottom:
      1px solid
      var(--border);
  }


  /* CONTACTO */

  .contact-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

  .container {
    width:
      calc(100% - 28px);
  }

  .section {
    padding:
      60px 0;
  }

  .section-heading {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      10px;
  }

  .section-heading h2 {
    font-size:
      27px;
  }

  .service-grid {
    grid-template-columns:
      1fr;
  }

  .hero h1 {
    font-size:
      39px;
  }

  .hero-description {
    font-size:
      13px;
  }

  .hero-buttons {
    flex-direction:
      column;

    width:
      100%;
  }

  .hero-buttons .button {
    width:
      100%;
  }

  .hero-features {
    gap:
      14px;
  }

  .feature {
    font-size:
      9px;
  }

  .hero-brand {
    min-height:
      220px;
  }

  .hero-brand img {
    width:
      235px;
  }

  .calendar-panel,
  .appointment-panel {
    padding:
      17px;
  }

  .time-slots {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns:
      1fr;
  }

  .footer-content {
    flex-direction:
      column;

    text-align:
      center;
  }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 430px) {

  .hero {
    background-position:
      62% center;
  }

  .hero h1 {
    font-size:
      34px;
  }

  .hero-brand img {
    width:
      210px;
  }

  .hero-brand {
    min-height:
      200px;
  }

  .time-slots {
    grid-template-columns:
      repeat(2, 1fr);
  }

}