/* ============================================================
   GLAM & NAILS — Estilos
   Paleta y medidas centralizadas en :root
   ============================================================ */

:root {
  /* Marca */
  --rosa:        #D9587A;
  --rosa-oscuro: #B8395C;
  --rosa-medio:  #E48AA3;
  --rosa-suave:  #FADDE5;
  --rosa-nube:   #FDEFF3;
  --crema:       #FEF7F9;

  --tinta:       #33242B;
  --tinta-suave: #6E5A62;
  --gris:        #9C8890;
  --linea:       #F2DDE4;
  --blanco:      #FFFFFF;

  --verde-wa:    #25D366;
  --dorado:      #F0A93B;

  /* Medidas */
  --ancho: 460px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-full: 999px;

  --tabbar-h: 62px;
  --topbar-h: 56px;

  --sombra-sm: 0 1px 3px rgba(126, 60, 82, .07);
  --sombra-md: 0 4px 16px rgba(126, 60, 82, .10);
  --sombra-lg: 0 10px 34px rgba(126, 60, 82, .16);

  --fuente: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fuente-display: "Cormorant Garamond", "Didot", Georgia, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente);
  color: var(--tinta);
  background: #EFE2E7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Marco tipo teléfono (en escritorio) ---------- */
.phone {
  position: relative;
  max-width: var(--ancho);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--crema);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 560px) {
  body { padding: 24px 0; background: #EFE2E7; }
  .phone {
    min-height: calc(100dvh - 48px);
    border-radius: 30px;
    box-shadow: var(--sombra-lg);
  }
}

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 6px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.topbar--hero {
  background: transparent;
  border-bottom: 0;
  margin-bottom: calc(var(--topbar-h) * -1);
}
.topbar__titulo {
  flex: 1;
  text-align: center;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.topbar__logo {
  flex: 1;
  text-align: center;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--blanco);
  text-shadow: 0 2px 14px rgba(50, 12, 26, .5);
}
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  flex: 0 0 40px;
  transition: background .15s;
}
.icon-btn:active { background: rgba(217, 88, 122, .12); }
.topbar--hero .icon-btn { color: var(--blanco); filter: drop-shadow(0 1px 6px rgba(50,12,26,.5)); }

/* ============================================================
   PANTALLA
   ============================================================ */
.screen {
  flex: 1;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  animation: aparecer .28s ease both;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.seccion { padding: 18px 16px 4px; }
.seccion__titulo {
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 12px;
}

/* ============================================================
   IMÁGENES (con degradado de respaldo si la foto no existe)
   ============================================================ */
.media {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(140deg, var(--g1, #F6DCE4), var(--g2, #E3B9C8));
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative; z-index: 1;
}
.media::after {
  content: "✦";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, .75);
}

/* ============================================================
   PORTADA (INICIO)
   ============================================================ */
.hero {
  position: relative;
  min-height: 76dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 24px 30px;
  color: var(--blanco);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  --g1: #7A3149; --g2: #35131F;
}
.hero__media::after { font-size: 3rem; color: rgba(255,255,255,.16); }
/* El velo no es decorativo: sostiene la legibilidad del eslogan.
   Con una foto de salón clara, un degradado suave dejaba el texto
   blanco flotando sobre paredes y espejos. Se oscurece desde el 50%,
   que es donde empieza el bloque de texto, sin tapar la foto arriba. */
.hero__velo {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    rgba(52,15,28,.58)  0%,
    rgba(52,15,28,.18) 26%,
    rgba(45,12,25,.58) 50%,
    rgba(42,11,23,.86) 74%,
    rgba(40,10,22,.95) 100%);
}
.hero__cont { position: relative; z-index: 3; }
.hero__eslogan {
  font-size: 1.72rem;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(40, 10, 22, .5);
}
.hero__eslogan em {
  display: block;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.95rem;
  color: #FFD9E4;
}
.hero__sub {
  margin-top: 8px;
  font-size: .94rem;
  color: rgba(255, 255, 255, .88);
  letter-spacing: .01em;
}
.hero__acciones { margin-top: 22px; display: grid; gap: 11px; }
.hero__redes { margin-top: 24px; text-align: center; }
.hero__redes span {
  display: block;
  font-size: .82rem;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 11px;
}
.redes { display: flex; justify-content: center; gap: 14px; }
.red {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  color: var(--blanco);
  transition: transform .15s, background .15s;
}
.red:active { transform: scale(.94); background: rgba(255,255,255,.26); }

/* ---------- Botones ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.btn:active { transform: scale(.975); }
.btn--rosa {
  background: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-oscuro) 100%);
  color: var(--blanco);
  box-shadow: 0 6px 20px rgba(184, 57, 92, .38);
}
.btn--claro {
  background: var(--rosa-nube);
  color: var(--rosa-oscuro);
}
.btn--bloque { width: 100%; }
.btn svg { flex: 0 0 auto; }

/* ============================================================
   PESTAÑAS DE CATEGORÍA
   ============================================================ */
.cats {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 1 0 auto;
  min-width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 8px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  color: var(--gris);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  transition: all .18s;
}
.cat[aria-selected="true"] {
  background: var(--rosa-nube);
  border-color: var(--rosa-suave);
  color: var(--rosa-oscuro);
}

/* ============================================================
   LISTA DE SERVICIOS
   ============================================================ */
.servicios { padding: 0 16px; }
.servicio {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--linea);
}
.servicio:last-child { border-bottom: 0; }
.servicio:active { opacity: .6; }
.servicio__media {
  flex: 0 0 62px;
  width: 62px; height: 62px;
  border-radius: 13px;
}
.servicio__media::after { font-size: 1rem; }
.servicio__info { flex: 1; min-width: 0; }
.servicio__nombre {
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.servicio__meta { font-size: .8rem; color: var(--gris); }
.servicio__precio {
  flex: 0 0 auto;
  font-size: .9rem;
  font-weight: 700;
  color: var(--tinta);
  text-align: right;
}
.servicio__precio small {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--gris);
}
.servicio__chevron { flex: 0 0 auto; color: var(--gris); }

/* ============================================================
   DETALLE DEL SERVICIO
   ============================================================ */
.detalle__media {
  height: 260px;
  --g1: #E8C7A8; --g2: #B98D6D;
}
.detalle__media::after { font-size: 2.4rem; }
.detalle__cuerpo { padding: 20px 20px 0; }
.detalle__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.detalle__nombre {
  font-size: 1.52rem;
  font-weight: 700;
  letter-spacing: -.028em;
}
.detalle__precio {
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--rosa-oscuro);
  white-space: nowrap;
}
.detalle__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: .84rem;
  color: var(--tinta-suave);
}
.detalle__dato { display: flex; align-items: center; gap: 6px; }
.detalle__desc {
  margin-top: 14px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}
.detalle__cta { padding: 22px 20px 8px; }

/* ============================================================
   PROMOCIONES
   ============================================================ */
.promos { padding: 4px 16px; display: grid; gap: 14px; }
.promo {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sombra-md);
  background: var(--blanco);
  min-height: 186px;
  display: flex;
}
.promo__media { position: absolute; inset: 0; }
.promo__media::after { font-size: 2rem; }
.promo__velo {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(95deg, #FFFFFF 0%, rgba(255,255,255,.97) 42%, rgba(255,255,255,.72) 58%, rgba(255,255,255,0) 82%);
}
.promo__cont {
  position: relative; z-index: 3;
  padding: 16px 16px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  max-width: 70%;
}
.promo__etiqueta {
  align-self: flex-start;
  background: var(--rosa);
  color: var(--blanco);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .09em;
  padding: 4px 10px;
  border-radius: var(--r-full);
}
.promo__nombre {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.024em;
}
.promo__incluye { font-size: .84rem; color: var(--tinta-suave); line-height: 1.62; }
.promo__incluye li::before { content: "· "; color: var(--rosa-medio); font-weight: 700; }
.promo__precio {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--rosa);
  letter-spacing: -.02em;
}
.promo__btn {
  background: var(--rosa);
  color: var(--blanco);
  font-size: .8rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(184, 57, 92, .3);
  transition: transform .12s;
}
.promo__btn:active { transform: scale(.96); }

/* ============================================================
   GALERÍA
   ============================================================ */
.filtros {
  display: flex;
  gap: 8px;
  padding: 4px 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--r-full);
  background: var(--rosa-nube);
  color: var(--tinta-suave);
  font-size: .82rem;
  font-weight: 600;
  transition: all .18s;
}
.chip[aria-selected="true"] {
  background: var(--rosa);
  color: var(--blanco);
  box-shadow: 0 3px 10px rgba(184, 57, 92, .28);
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 0 16px;
}
.grid .media {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
}
.grid .media::after { font-size: 1.1rem; }

/* Visor de foto */
.visor {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(30, 8, 16, .92);
  display: grid; place-items: center;
  padding: 20px;
  animation: aparecer .2s ease both;
}
.visor .media {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  border-radius: var(--r-md);
}
.visor__cerrar {
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.16);
  color: var(--blanco);
}

/* ============================================================
   RESEÑAS
   ============================================================ */
.rating {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 16px 16px;
  padding: 16px 18px;
  background: var(--rosa-nube);
  border-radius: var(--r-md);
}
.rating__num {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.rating__estrellas { display: flex; gap: 2px; margin-bottom: 5px; }
.rating__total { font-size: .82rem; color: var(--tinta-suave); }

.resenas { padding: 0 16px; display: grid; gap: 10px; }
.resena {
  display: flex;
  gap: 11px;
  padding: 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
}
.resena__foto {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
}
.resena__foto::after { font-size: .8rem; }

/* Inicial sobre el color de la persona, cuando no hay foto */
.avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  background-image: linear-gradient(140deg, var(--g1, #F6DCE4), var(--g2, #E3B9C8));
  color: var(--tinta-avatar, var(--rosa-oscuro));
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}
.resena__cab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.resena__nombre { font-size: .88rem; font-weight: 700; }
.resena__tiempo { margin-left: auto; font-size: .74rem; color: var(--gris); }
.resena__texto { font-size: .87rem; line-height: 1.55; color: var(--tinta-suave); }
.estrellas { display: flex; gap: 1px; color: var(--dorado); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto { padding: 4px 16px; display: grid; gap: 8px; }
.fila {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  transition: background .15s;
}
.fila:active { background: var(--rosa-nube); }
.fila__icono {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--rosa-nube);
  color: var(--rosa);
}
.fila__icono--wa { background: rgba(37, 211, 102, .12); color: #1DAF52; }
.fila__icono--tel { background: rgba(59, 130, 246, .12); color: #2F7BEA; }
.fila__icono--ig { background: linear-gradient(135deg, #F9CE34, #EE2A7B, #6228D7); color: #fff; }
.fila__icono--fb { background: rgba(24, 119, 242, .12); color: #1877F2; }
.fila__txt { flex: 1; min-width: 0; display: block; }
.fila__tit { display: block; font-size: .89rem; font-weight: 700; margin-bottom: 2px; }
.fila__sub { display: block; font-size: .81rem; color: var(--tinta-suave); line-height: 1.45; }
.fila__mapa {
  flex: 0 0 54px;
  width: 54px; height: 42px;
  border-radius: var(--r-sm);
  background: #E9EEE6;
  display: grid; place-items: center;
  color: #E1443F;
  border: 1px solid var(--linea);
}
.fila__chevron { flex: 0 0 auto; color: var(--gris); }

.pie {
  padding: 26px 16px 6px;
  text-align: center;
  font-size: .74rem;
  color: var(--gris);
  line-height: 1.7;
}
.pie strong { font-family: var(--fuente-display); font-style: italic; font-size: 1.05rem; color: var(--rosa-oscuro); }

/* Firma de quien desarrolla, separada del contenido del salón */
.creditos {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: .72rem;
  color: var(--gris);
}
.creditos a {
  color: var(--rosa-oscuro);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--rosa-suave);
}
.creditos a:active { opacity: .6; }

/* ============================================================
   NAVEGACIÓN INFERIOR
   ============================================================ */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--ancho);
  z-index: 40;
  display: flex;
  height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--rosa-nube);
  border-top: 1px solid var(--linea);
}
@media (min-width: 560px) {
  .tabbar { bottom: 24px; border-radius: 0 0 30px 30px; }
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--gris);
  font-size: .66rem;
  font-weight: 600;
  transition: color .18s;
}
.tab[aria-current="page"] { color: var(--rosa); }
.tab svg { transition: transform .18s; }
.tab[aria-current="page"] svg { transform: translateY(-1px) scale(1.06); }

/* ============================================================
   MENÚ LATERAL
   ============================================================ */
/* El atributo hidden vale display:none, pero viene de la hoja del
   navegador: cualquier "display" que pongamos aquí le gana. Como
   .drawer usa display:flex, sin esta regla el menú lateral se queda
   visible siempre — un panel blanco vacío pegado a la derecha. */
.drawer[hidden],
.drawer-scrim[hidden] { display: none; }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(45, 14, 26, .5);
  animation: aparecer .2s ease both;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 70;
  width: min(300px, 82vw);
  background: var(--blanco);
  box-shadow: var(--sombra-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  animation: entrar .26s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes entrar { from { transform: translateX(100%); } to { transform: none; } }
.drawer__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.drawer__logo {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--rosa-oscuro);
}
.drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 12px;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  color: var(--tinta);
}
.drawer__link:active { background: var(--rosa-nube); }
.drawer__link svg { color: var(--rosa); }
.drawer__pie { margin-top: auto; padding-top: 16px; }

/* ============================================================
   ESTADOS: cargando, error, landing
   ============================================================ */

/* Si no hay pestañas que mostrar (landing, error), la barra se va */
.tabbar:empty { display: none; }
.topbar:empty { display: none; }

.esqueleto { animation: none; }
.esqueleto__hero {
  height: 62dvh;
  background: linear-gradient(100deg, #EADCE1 30%, #F5EAEE 50%, #EADCE1 70%);
  background-size: 300% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}
.esqueleto__linea {
  height: 14px;
  margin: 16px;
  border-radius: var(--r-full);
  background: linear-gradient(100deg, #EADCE1 30%, #F5EAEE 50%, #EADCE1 70%);
  background-size: 300% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}
@keyframes brillo {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

.aviso {
  min-height: 70dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 32px;
  text-align: center;
}
.aviso__icono {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--rosa-nube);
  color: var(--rosa);
}
.aviso__icono svg { width: 28px; height: 28px; }
.aviso__titulo {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.aviso__texto {
  font-size: .92rem;
  line-height: 1.62;
  color: var(--tinta-suave);
  max-width: 30ch;
}
.aviso .btn { padding: 0 28px; }

.landing__logo {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  letter-spacing: -.01em;
  color: var(--rosa-oscuro);
}