/* =====================================================================
   TEMA LULÚ — web de clientas
   Fondo cálido, tarjetas de vidrio nude, títulos editoriales,
   pasos circulares, filas de categorías y barra inferior flotante.
   ===================================================================== */

:root {
  --rosa:          #C9AA8E;
  --rosa-hover:    #B8977A;
  --rosa-dark:     #39251D;
  --rosa-light:    #EAD9CD;
  --rosa-suave:    #EAD9CD;
  --crema:         #FAF4EE;
  --verde:         #887365;
  --verde-dark:    #6B5547;
  --verde-light:   #EAD9CD;
  --pistacho:      #D8C2B1;
  --pistacho-dark: #39251D;
  --pistacho-light:#F3E8DD;
  --gris-light:    #F7EFE6;
  --gris:          #E7D8CA;
  --gris-medium:   #B6A394;
  --gris-dark:     #8A786D;
  --texto:         #39251D;
  --charcoal:      #39251D;
  --charcoal-light:#6B5547;
  --rose-ref:      #C9AA8E;
  --rose-deep:     #6F5242;
  --bg-ref:        #FAF4EE;
  --sombra:        0 10px 40px rgba(57, 37, 29, .10);
  --sombra-hover:  0 16px 50px rgba(57, 37, 29, .16);
  --radio:         18px;
  --radio-lg:      28px;
  --font:          var(--sans);
  --font-display:  var(--serif);
}

/* ---------- Fondo: luz cálida, sin estampados ---------- */
body {
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(201, 170, 142, .55), transparent 62%),
    radial-gradient(900px 560px at 100% 8%, rgba(216, 194, 177, .75), transparent 58%),
    radial-gradient(900px 600px at 50% 110%, rgba(201, 170, 142, .35), transparent 60%),
    linear-gradient(180deg, #F4E7DA 0%, #FAF4EE 38%, #F1E2D4 100%);
  background-attachment: fixed;
  color: var(--choc);
  font-size: 14.5px;
}
.hero-landing { background: transparent; }
.hero-landing::before, .hero-landing::after { display: none; }
.turno-blob-mid, .turno-blob-sm { display: none; }

/* ---------- Barra superior de vidrio ---------- */
.client-nav {
  background: rgba(250, 244, 238, .80);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 1px 0 var(--linea), 0 10px 30px rgba(57, 37, 29, .06);
  height: 72px;
}
.client-nav-brand img { border: 1px solid var(--linea-fuerte); box-shadow: 0 0 0 4px rgba(201, 170, 142, .18); }
.client-nav-brand-text .brand-name { color: var(--choc); font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: .08em; }
.client-nav-brand-text .brand-sub { color: var(--vison); letter-spacing: .28em; font-size: 9px; }
.client-nav-links a {
  color: var(--txt-2);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.client-nav-links a:hover, .client-nav-links a.active { background: var(--nude); color: var(--choc); }
.client-nav-links a.btn-nav-cta { background: var(--choc) !important; color: var(--marfil) !important; border-color: var(--choc) !important; }

/* ---------- Titulares editoriales ---------- */
.hero-badge { background: var(--vidrio); color: var(--vison); border: 1px solid var(--linea); border-radius: var(--r-pill);
  letter-spacing: .22em; font-size: 10.5px; font-weight: 600; }
.hero-h1, .hero-h1 em { font-family: var(--serif); color: var(--choc); font-weight: 500; letter-spacing: .005em; }
.hero-h1 em { color: var(--vison); font-style: italic; }
.hero-sub { color: var(--txt-2); }
.hero-microcopy { color: var(--txt-2); letter-spacing: .08em; }
.page-header h1, .page-title h1 { font-family: var(--serif); color: var(--choc); font-weight: 600; text-transform: none; letter-spacing: .005em; }
.container h1, .container h2 { color: var(--choc); }

/* Enlaces rápidos (reemplazan a Servicios y Gift Card en la barra inferior del celular) */
.hero-links-movil { display: none; }

/* Redes: contacto sobrio en vez de colores de marca */
.hero-landing a[href*="instagram.com"], .hero-landing a[href*="wa.me"] {
  background: var(--vidrio) !important; color: var(--choc) !important;
  border: 1px solid var(--linea-fuerte) !important; box-shadow: none !important;
  letter-spacing: .06em;
}

/* ---------- Botones del cliente (píldora) ---------- */
.btn-verde { background: var(--vison); color: var(--marfil); }
.btn-rosa-dark { background: var(--choc); color: var(--marfil); }
.btn-white { background: var(--crema); color: var(--choc); }
.btn-rosa { background: var(--choc); color: var(--marfil); box-shadow: 0 8px 24px rgba(57, 37, 29, .22); }
.btn-rosa:hover { background: var(--choc-2); color: var(--marfil); box-shadow: 0 12px 30px rgba(57, 37, 29, .28); }
.btn-block { width: 100%; }

/* ---------- Tarjetas de vidrio ---------- */
.card {
  background: var(--vidrio);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .6);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.card-header { border-bottom: 1px solid var(--linea); position: relative; }
.card-header h2 {
  font-family: var(--serif); font-size: 1.75rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--choc); line-height: 1.1;
}
.card > p:first-of-type, #sec-turno .card > p { color: var(--txt-2); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }

/* Encabezado de reserva: insignia de fecha + título + subtítulo */
.page-title-reserva {
  background: var(--vidrio);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .6);
  border-radius: var(--r-lg);
  padding: 18px 24px;
  gap: 20px;
  margin-bottom: 16px;
}
.date-badge {
  flex: none; width: 62px; border-radius: 12px; overflow: hidden; text-align: center;
  background: var(--crema); box-shadow: 0 6px 18px rgba(57, 37, 29, .14); border: 1px solid var(--linea);
}
.date-badge .db-mes { display: block; background: var(--vison); color: var(--marfil); font-size: 10px; font-weight: 600; letter-spacing: .22em; padding: 4px 0 3px; }
.date-badge .db-dia { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.15; padding: 4px 0 6px; color: var(--choc); }
.page-title-text h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.05; margin: 0; }
.page-sub { margin: 4px 0 0; color: var(--txt-2); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Pasos circulares ---------- */
.stepper {
  background: var(--vidrio);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .6);
  padding: 16px 14px 14px;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}
.step { flex-direction: column; gap: 7px; min-width: 0; text-align: center; }
.step-circle {
  width: 38px; height: 38px;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  background: var(--nude); color: var(--txt-2);
  border: 1px solid var(--linea);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.step.active .step-circle { background: var(--choc); color: var(--marfil); box-shadow: 0 8px 20px rgba(57, 37, 29, .30); transform: scale(1.05); }
.step.completed .step-circle { background: var(--champ); color: var(--choc); border-color: transparent; }
.step-label { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--txt-2); }
.step.active .step-label { color: var(--choc); font-weight: 600; }
.step-sep { flex: 1; height: 1px; min-width: 8px; margin-top: 19px; background: var(--linea-fuerte); border-radius: 0; }
@media (max-width: 640px) {
  .step-label, .step.active .step-label { display: block; font-size: 9.5px; letter-spacing: 0; }
  #sec-turno .step-label { font-size: 9.5px; }
  .step-circle { width: 34px; height: 34px; }
  .step-sep { margin-top: 17px; }
}

/* ---------- Categorías como filas con ícono ---------- */
.cat-section {
  background: rgba(252, 247, 241, .55);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  box-shadow: none;
  margin-bottom: 12px;
  overflow: hidden;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-section:hover { background: rgba(252, 247, 241, .85); box-shadow: 0 8px 24px rgba(57, 37, 29, .07); }
.cat-toggle {
  background: transparent; color: var(--choc);
  padding: 12px 18px 12px 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .24em;
  display: flex; align-items: center; gap: 0;
  min-height: 72px;
}
.cat-toggle:hover { background: transparent; }
.cat-toggle .cat-emoji { display: none; }
.cat-toggle > span:first-of-type { flex: 1; line-height: 1.5; }
.cat-ico {
  flex: none; width: 52px; height: 52px; margin-right: 18px; border-radius: 50%;
  background: var(--nude); color: var(--choc);
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-ico svg { width: 26px; height: 26px; }
.cat-toggle .arrow { font-size: 0; width: 22px; height: 22px; display: inline-block; color: var(--choc); transition: transform .3s var(--ease);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339251D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>") center/contain no-repeat; }
.cat-toggle.open .arrow { transform: rotate(90deg); }
.cat-body { padding: 4px 14px 12px; }

/* Servicios dentro de la categoría */
.service-row { border-bottom: 1px solid var(--linea); transition: background .25s var(--ease), transform .25s var(--ease); }
.service-row:hover { background: rgba(234, 217, 205, .55); }
.service-row.selected { background: rgba(201, 170, 142, .30); border-left: 3px solid var(--choc); }
.service-row-name { font-weight: 600; font-size: 12.5px; letter-spacing: .06em; color: var(--choc); }
.service-row-desc { color: var(--txt-2); }
.meta-pill { background: var(--nude); color: var(--choc); border-radius: var(--r-pill); }
.precio-lista-val { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--choc); }
.cat-list-btn {
  border-radius: var(--r-pill); background: transparent; color: var(--choc);
  border: 1px solid var(--linea-fuerte); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px; transition: background .25s var(--ease), color .25s var(--ease);
}
.cat-list-btn:hover { background: var(--nude); }
.cat-list-btn.en-carrito { background: var(--choc); color: var(--marfil); border-color: var(--choc); }

/* Buscador en píldora */
#turno-buscar-servicio, .card input.form-control[type="text"][placeholder^="Buscar"] {
  border-radius: var(--r-pill) !important; background: rgba(246, 236, 226, .9); border: 1px solid var(--linea-fuerte) !important;
  padding: 14px 20px 14px 46px !important; font-size: 14px !important;
}

/* Profesionales, horarios y fechas */
.prof-card { border: 1px solid var(--linea-fuerte); border-radius: var(--r-md); background: rgba(252, 247, 241, .6); transition: all .3s var(--ease); }
.prof-card:hover { border-color: var(--champ); background: var(--nude); box-shadow: var(--sombra); }
.prof-card.selected { border-color: var(--choc); background: rgba(201, 170, 142, .30); box-shadow: 0 0 0 1px var(--choc); }
.slot, .slots-grid button, .slot-btn {
  border-radius: var(--r-pill) !important; border: 1px solid var(--linea-fuerte);
  background: rgba(252, 247, 241, .75); color: var(--choc);
  transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.slot:hover { background: var(--nude); transform: translateY(-1px); }
.slot.selected, .slot.active { background: var(--choc) !important; color: var(--marfil) !important; border-color: var(--choc) !important; }

/* ---------- Formularios ---------- */
.form-control {
  background: rgba(246, 236, 226, .9); border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm);
  padding: 12px 16px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.form-control:focus { background: #FBF5EE; border-color: var(--champ); box-shadow: 0 0 0 4px rgba(201, 170, 142, .28); }

/* ---------- Barra inferior flotante (celulares) ---------- */
.bottom-nav { background: transparent; border: none; box-shadow: none; height: auto; pointer-events: none; }
.bottom-nav-items {
  pointer-events: auto;
  margin: 0 12px calc(12px + env(safe-area-inset-bottom));
  height: 70px; border-radius: 28px;
  background: var(--vidrio);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 16px 48px rgba(57, 37, 29, .20), inset 0 1px 0 rgba(255, 255, 255, .6);
  padding: 0 6px; position: relative;
}
.bottom-nav-item { color: var(--txt-2); font-size: 8.5px; font-weight: 600; letter-spacing: .14em; gap: 4px; padding: 8px 2px 6px; }
.bottom-nav-item .bni-icon { font-size: 0; display: inline-flex; }
.bottom-nav-item .bni-icon svg { width: 24px; height: 24px; }
.bottom-nav-item.active { color: var(--choc); }
.bottom-nav-item.active .bni-icon svg { stroke-width: 1.7; }
.bottom-nav-item .bni-centro {
  width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: var(--choc); color: var(--marfil);
  align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(57, 37, 29, .38), 0 0 0 5px rgba(250, 244, 238, .9);
  transition: transform .3s var(--ease);
}
.bottom-nav-item .bni-centro svg { width: 26px; height: 26px; }
.bottom-nav-item:active .bni-centro { transform: scale(.94); }
.bottom-nav-item#bnav-turno { color: var(--choc); }

@media (max-width: 768px) {
  .bnav-extra { display: none; }
  body { padding-bottom: 104px; }
  .client-nav { height: 64px; }
  .client-nav-brand-text .brand-name { font-size: 1.3rem; }
  .hero-landing { min-height: auto; padding: 36px 18px 28px; }
  .hero-h1 { font-size: clamp(2.3rem, 10vw, 3rem); line-height: 1.02; }
  .hero-links-movil { display: flex; gap: 10px; margin-top: 14px; }
  .hero-links-movil a {
    flex: 1; text-align: center; padding: 13px 10px; border-radius: var(--r-pill);
    border: 1px solid var(--linea-fuerte); background: var(--vidrio); color: var(--choc);
    font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  }
  .card { padding: 22px 18px; border-radius: 26px; }
  .card-header h2 { font-size: 1.55rem; }
  .page-wrap { padding: 16px 14px; }
  .page-title-reserva { padding: 14px 16px; gap: 14px; }
}
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
}

/* ---------- Secciones internas: sin círculos rosados, tarjetas de vidrio ---------- */
#sec-turno::before, #sec-servicios::before, #sec-productos::before, #sec-mis-turnos::before, #sec-login::before,
#sec-registro::before, #sec-mi-cuenta::before, #sec-beneficios::before, #sec-dashboard::before,
#sec-turno::after, #sec-servicios::after, #sec-productos::after, #sec-mis-turnos::after, #sec-login::after,
#sec-registro::after, #sec-mi-cuenta::after, #sec-beneficios::after, #sec-dashboard::after { display: none; }
#sec-turno .card, #sec-servicios .card, #sec-productos .card, #sec-mis-turnos .card,
#sec-login .card, #sec-registro .card, #sec-mi-cuenta .card {
  background: var(--vidrio);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .6);
}
#sec-turno .card > p:first-of-type { font-size: 10.5px !important; letter-spacing: .24em; text-transform: uppercase; color: var(--txt-2) !important; }
#btn-instalar-app { border-color: var(--linea-fuerte) !important; color: var(--choc) !important; background: var(--vidrio) !important; letter-spacing: .1em; }

/* Cifras alineadas (la serif trae números "de texto" que se confunden) */
h1, h2, h3, .step-circle, .db-dia, .precio-lista-val, .hero-h1, .stat-value, .ticket-total { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Imágenes de servicio sin foto: marcador sobrio */
.service-row > div[style*="width:64px"] {
  font-size: 0 !important; background: var(--nude) !important; border-radius: 16px !important; position: relative;
}
.service-row > div[style*="width:64px"]::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23887365' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4l1.6 4.4L18 10l-4.4 1.600L12 16l-1.600-4.400L6 10l4.400-1.600z'/><path d='M18.500 15l.6 1.600 1.600.6-1.600.6-.6 1.600-.6-1.600-1.600-.6 1.600-.6z'/></svg>") center/46% no-repeat;
}
.service-row > img { border-radius: 16px !important; }

/* Barra inferior: etiquetas alineadas y con aire */
.bottom-nav-item { justify-content: flex-end; padding-bottom: 9px; letter-spacing: .08em; font-size: 8px; }
.bottom-nav-item .bni-centro { margin-bottom: 2px; }

/* Flecha de las categorías: el JS antiguo le pone tamaño y giro en línea */
.cat-toggle .arrow { font-size: 0 !important; }
.cat-toggle .arrow[style*="rotate(180deg)"] { transform: rotate(90deg) !important; }
.cat-toggle[style] { padding: 12px 18px 12px 12px !important; }

/* Botón "Volver" y botones flotantes */
#btn-nav-back {
  background: var(--vidrio) !important; color: var(--choc) !important; border: 1px solid var(--linea-fuerte) !important;
  border-radius: var(--r-pill) !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase;
  backdrop-filter: blur(14px); box-shadow: var(--sombra) !important;
}
@media (max-width: 768px) {
  #sec-servicios .page-wrap, #sec-productos .page-wrap, #sec-mis-turnos .page-wrap,
  #sec-beneficios .app-shell, #sec-mi-cuenta .page-wrap { padding-top: 58px; }
}

/* Elementos flotantes: por encima de la barra inferior, mismo lenguaje */
@media (max-width: 768px) {
  #servicios-reservar-bar { bottom: 104px !important; }
  #float-cart-btn { bottom: 108px !important; }
  #btn-abrir-carrito-productos { bottom: 108px !important; }
  #pwa-install-banner { bottom: 104px !important; }
}
#servicios-reservar-bar button, #servicios-reservar-bar a, #float-cart-btn > *, #btn-abrir-carrito-productos {
  background: var(--choc) !important; color: var(--marfil) !important; border: 1px solid rgba(250, 244, 238, .25) !important;
  border-radius: var(--r-pill) !important; letter-spacing: .14em; box-shadow: 0 14px 34px rgba(57, 37, 29, .30) !important;
}

/* Botones flotantes de pasos ("Siguiente", "Continuar"): mismo lenguaje que el resto */
.fab-turno {
  background: var(--choc) !important; color: var(--marfil) !important; border: 1px solid rgba(250, 244, 238, .25) !important;
  border-radius: var(--r-pill) !important; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(57, 37, 29, .32) !important;
}
@media (max-width: 768px) {
  #fab-turno { display: none !important; }   /* el botón central de la barra inferior ya reserva */
  .fab-turno { bottom: 106px !important; }
}
.page-title-icon, .page-header-icon { filter: grayscale(1) sepia(.45) brightness(.62); }

/* Emojis decorativos de títulos y etiquetas: tono monocromático de la paleta */
[class*="title-icon"], [class*="header-icon"], [class*="empty-icon"], [class*="step-icon"], [class*="stat-icon"] { filter: grayscale(1) sepia(.45) brightness(.62); }
.form-label { filter: grayscale(1) sepia(.5) saturate(1.1) brightness(.96); }
@media (max-width: 768px) {
  #sec-registro .page-wrap, #sec-login .page-wrap { padding-top: 58px; }
}

/* ---------- Logotipo en la web de clientas ---------- */
.client-nav-brand img { height: 50px !important; width: auto !important; max-width: 150px; border-radius: 0 !important; border: none !important; box-shadow: none !important; object-fit: contain; }
.client-nav-brand-text { display: none; }
img[src*="logo-negocio"], img[src="/logo.svg"] { border-radius: 0 !important; box-shadow: none !important; }
.hero-landing img[src*="logo"] { max-width: 280px !important; padding: 0 !important; background: transparent !important; }

/* ---------- Barra inferior: el botón central queda exactamente en el medio ---------- */
.bottom-nav-items { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bottom-nav-item { min-width: 0; padding-left: 0; padding-right: 0; font-size: 7.5px; letter-spacing: .05em; }
.bottom-nav-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }