/* ===================================================================
   ESTÉTICA — Hoja de estilos principal
   Centro de estética: uñas, cejas y pestañas
   -------------------------------------------------------------------
   ÍNDICE
   1.  Variables (paleta, tipografía, espaciado) — PERSONALIZABLE
   2.  Reset y base
   3.  Tipografía y utilidades
   4.  Botones
   5.  Header / navegación
   6.  Hero (con vídeo de fondo)
   7.  Bloques de categorías (Uñas / Cejas / Pestañas)
   8.  Servicios (tarjetas + acordeones)
   9.  Sobre nosotras
   10. Galería
   11. Reservas / Contacto
   12. Footer
   13. Botón flotante WhatsApp + chatbot
   14. Banner de cookies
   15. Animaciones al hacer scroll
   16. Media queries (mobile-first)
=================================================================== */

/* ============================================================
   1. VARIABLES — Edita aquí los colores, fuentes y tamaños.
   La paleta completa es personalizable desde este bloque.
   ============================================================ */
:root {
  /* --- Paleta de color (ROSA DEL LOGO: #ffd8de) --- */
  --brand-pink:          #ffd8de; /* rosa exacto del logo Glow */
  --color-bg:            #ffd8de; /* fondo principal = rosa del logo */
  --color-surface:       #ffffff; /* tarjetas y superficies */
  --color-nude:          #f7c2cb; /* rosa medio */
  --color-nude-soft:     #ffe9ed; /* rosa suave (secciones alternas .bg-alt) */
  --color-rose:          #f4aab9; /* rosa empolvado */
  --color-rose-soft:     #ffeef1; /* rosa muy suave */
  --color-gold:          #e07f95; /* acento rosa intenso (antes dorado) */
  --color-gold-dark:     #cb6178; /* rosa fuerte (hover / detalles) */
  --color-ink:           #3a2a30; /* plomo cálido elegante (texto principal) */
  --color-text:          #5b4a50; /* texto de cuerpo */
  --color-muted:         #9c828b; /* texto secundario */
  --color-line:          #f6cdd6; /* bordes y líneas sutiles */

  /* --- Tipografía --- */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:  "Jost", "Montserrat", "Segoe UI", system-ui, sans-serif;

  /* --- Tamaños / espaciado --- */
  --maxw: 1200px;
  --radius: 16px;
  --radius-sm: 10px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --shadow-sm: 0 4px 16px rgba(43, 38, 34, .06);
  --shadow-md: 0 12px 40px rgba(43, 38, 34, .10);
  --transition: .35s cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2. RESET Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1rem;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Mejora accesibilidad: foco visible */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   3. TIPOGRAFÍA Y UTILIDADES
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--color-ink); font-weight: 600; line-height: 1.12; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

.section { padding-block: var(--section-y); }

.section-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head .eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 1rem;
}
.section-head h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.section-head p { color: var(--color-muted); margin-top: .9rem; }

.bg-alt { background: var(--color-nude-soft); }

/* Pequeña línea decorativa dorada */
.divider { width: 56px; height: 2px; background: var(--color-gold); margin: 1.1rem auto 0; border: none; }

/* ============================================================
   4. BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 2rem;
  font-family: var(--font-sans);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--color-ink); color: #fff; }
.btn-primary:hover { background: var(--color-gold-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--color-gold); color: #fff; }
.btn-gold:hover { background: var(--color-gold-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: #fff; }
.btn-light { background: rgba(255,255,255,.92); color: var(--color-ink); }
.btn-light:hover { background: #fff; transform: translateY(-2px); }

/* ============================================================
   5. HEADER / NAVEGACIÓN
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: var(--transition);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
}
.brand { display: inline-flex; align-items: center; }
/* Logo de Glow: imagen cuadrada con fondo rosa → se muestra como insignia redondeada */
.brand-logo { height: 52px; width: auto; display: block; border-radius: 12px; transition: var(--transition); }
.footer-logo { height: 72px; border-radius: 16px; }

.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; transition: var(--transition); }
.nav-links a:hover { color: var(--color-gold); }

/* Header con fondo al hacer scroll (clase añadida por JS) */
.site-header.scrolled { background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }
.site-header.scrolled .brand,
.site-header.scrolled .nav-links a { color: var(--color-ink); }
.site-header.scrolled .nav-links a:hover { color: var(--color-gold-dark); }
.site-header.scrolled .nav-toggle span { background: var(--color-ink); }

/* Botón hamburguesa (móvil) */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 110; }
.nav-toggle span { width: 26px; height: 2px; background: #fff; transition: var(--transition); }

/* ============================================================
   6. HERO — Vídeo de presentación a pantalla completa
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
/* Capa de vídeo de fondo */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Velo oscuro sobre el vídeo para legibilidad del texto */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,38,34,.45) 0%, rgba(43,38,34,.25) 40%, rgba(43,38,34,.55) 100%);
  z-index: -1;
}
.hero-content { max-width: 760px; padding-inline: 1.2rem; animation: fadeUp 1.2s ease both; }
.hero-content .eyebrow {
  font-size: .8rem; letter-spacing: .35em; text-transform: uppercase; color: var(--color-rose-soft); margin-bottom: 1.2rem; display: inline-block;
}
.hero-content h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); font-weight: 500; line-height: 1.05; color: #fff; }
.hero-content p { font-size: clamp(1rem, 2.4vw, 1.25rem); margin: 1.4rem auto 2.2rem; max-width: 540px; color: rgba(255,255,255,.92); }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Indicador de scroll */
.scroll-cue { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 1; color: #fff; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85; animation: bob 2s ease-in-out infinite; }

/* ============================================================
   7. BLOQUES DE CATEGORÍAS (Uñas / Cejas / Pestañas)
   ============================================================ */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.pillar {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.pillar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(43,38,34,.75) 100%); }
.pillar:hover img { transform: scale(1.06); }
.pillar-body { position: relative; z-index: 1; padding: 1.8rem; }
.pillar-body h3 { color: #fff; font-size: 1.8rem; }
.pillar-body p { color: rgba(255,255,255,.9); font-size: .95rem; margin: .4rem 0 1rem; }

/* ============================================================
   8. SERVICIOS — Acordeones por categoría + tarjetas
   ============================================================ */
.service-group { border-bottom: 1px solid var(--color-line); }
.service-group:first-of-type { border-top: 1px solid var(--color-line); }

.service-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
}
.service-group-header h3 { font-size: clamp(1.4rem, 3.5vw, 2rem); display: flex; align-items: center; gap: .7rem; }
.service-group-header .group-icon { font-size: 1.5rem; }
.service-group-header .count { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .15em; color: var(--color-muted); text-transform: uppercase; }
.service-group-header .chevron { font-size: 1.4rem; color: var(--color-gold-dark); transition: transform var(--transition); }
.service-group[open] .chevron { transform: rotate(45deg); }

/* Contenido del acordeón */
.service-group-body { padding-bottom: 2rem; }
.service-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 1.3rem 1.4rem;
  transition: var(--transition);
}
.service-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-rose); transform: translateY(-3px); }
.service-card h4 { font-size: 1.18rem; margin-bottom: .35rem; }
.service-card .desc { font-size: .9rem; color: var(--color-muted); margin-bottom: 1rem; }
.service-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; padding-top: .8rem; border-top: 1px dashed var(--color-line); }
.service-meta .meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--color-text); }
.service-meta .price { margin-left: auto; font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-gold-dark); font-weight: 600; }

/* Subcategoría (etiqueta dentro de un grupo) */
.subcat { grid-column: 1 / -1; margin-top: .6rem; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold-dark); }
.subcat:first-child { margin-top: 0; }

/* ============================================================
   9. SOBRE NOSOTRAS
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-text .eyebrow { font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--color-gold-dark); }
.about-text h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: .8rem 0 1.1rem; }
.about-text p { margin-bottom: 1rem; }
.about-stats { display: flex; gap: 2.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.about-stats .num { font-family: var(--font-serif); font-size: 2.2rem; color: var(--color-gold-dark); }
.about-stats .label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }

/* ============================================================
   10. GALERÍA
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.gallery-grid a { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; display: block; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-grid a:hover img { transform: scale(1.08); }
.gallery-grid a::after { content: "♡"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.6rem; background: rgba(43,38,34,.35); opacity: 0; transition: var(--transition); }
.gallery-grid a:hover::after { opacity: 1; }
.gallery-cta { text-align: center; margin-top: 2rem; }

/* ============================================================
   11. RESERVAS / CONTACTO
   ============================================================ */
.booking { background: var(--color-ink); color: #fff; border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; box-shadow: var(--shadow-md); }
.booking h2 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.booking p { color: rgba(255,255,255,.85); max-width: 520px; margin: 1rem auto 1.8rem; }
.booking .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); margin-top: clamp(2.5rem, 6vw, 4rem); }

/* Formulario */
.contact-form { display: grid; gap: 1rem; }
.contact-form label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); display: block; margin-bottom: .4rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--color-gold); }
.contact-form textarea { resize: vertical; min-height: 120px; }

/* El checkbox del consentimiento no es un campo de texto. La regla de arriba le
   daba width:100% y padding, así que se estiraba a todo el ancho del formulario
   y empujaba su etiqueta fuera de la columna. */
.contact-form input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  flex: none;
  margin: 0;
  accent-color: var(--color-gold);
  cursor: pointer;
}

/* Consentimiento RGPD: la casilla en línea con su texto, y sin las mayúsculas ni
   el espaciado de las etiquetas de los campos, que son otra cosa.
   Va como .contact-form .form-consent y no como .form-consent a secas por
   especificidad: ".contact-form label" es una clase MAS un elemento, así que gana
   a una clase sola y le seguía imponiendo display:block y uppercase — el texto
   salía en mayúsculas y en su propia línea, debajo de la casilla. */
.contact-form .form-consent {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  color: var(--color-text);
}
.contact-form .form-consent span { flex: 1; }
.contact-form .form-consent a {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Información de contacto */
.contact-info { display: grid; gap: 1.4rem; align-content: start; }
.contact-info .info-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-info .info-item .ico { font-size: 1.3rem; }
.contact-info .info-item h4 { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .2rem; }
.map-embed { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-line); margin-top: .5rem; }
.map-embed iframe { width: 100%; height: 220px; border: 0; display: block; }

/* ============================================================
   12. FOOTER
   ============================================================ */
.site-footer { background: #211d19; color: rgba(255,255,255,.8); padding-block: clamp(3rem, 7vw, 4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
.site-footer h4 { color: #fff; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer .brand { color: #fff; }
.site-footer a:hover { color: var(--color-gold); }
.footer-list li { margin-bottom: .55rem; font-size: .92rem; }
.footer-social { display: flex; gap: 1rem; margin-top: 1rem; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; transition: var(--transition); }
.footer-social a:hover { background: var(--color-gold); border-color: var(--color-gold); }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; color: rgba(255,255,255,.55); }

/* ============================================================
   13. BOTÓN FLOTANTE WHATSAPP + ESPACIO CHATBOT
   ============================================================ */
/* Barra vertical de iconos fijada a la derecha */
.social-dock {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.social-dock a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
  animation: blink 1.8s ease-in-out infinite;
}
.social-dock a:hover { transform: scale(1.15); animation-play-state: paused; }
.social-dock svg { width: 22px; height: 22px; fill: #fff; }

/* Parpadeo escalonado para que titilen uno tras otro */
.social-dock a:nth-child(1) { animation-delay: 0s; }
.social-dock a:nth-child(2) { animation-delay: .3s; }
.social-dock a:nth-child(3) { animation-delay: .6s; }
.social-dock a:nth-child(4) { animation-delay: .9s; }
.social-dock a:nth-child(5) { animation-delay: 1.2s; }

/* Colores de marca de cada icono */
.s-ig  { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.s-tt  { background: #010101; }
.s-gm  { background: #ea4335; }
.s-wa  { background: #25D366; }
.s-tel { background: var(--color-gold-dark); }

/* ============================================================
   14. BANNER DE COOKIES (RGPD)
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -8px 30px rgba(43,38,34,.12);
  padding: 1.2rem;
  transform: translateY(110%);
  transition: transform .5s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-inner { max-width: var(--maxw); margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.cookie-inner p { font-size: .88rem; color: var(--color-text); }
.cookie-inner p a { color: var(--color-gold-dark); text-decoration: underline; }
.cookie-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }
.cookie-actions .btn { padding: .7rem 1.4rem; font-size: .78rem; }

/* ============================================================
   15. ANIMACIONES AL HACER SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   16. MEDIA QUERIES (mobile-first → ampliación en pantallas grandes)
   ============================================================ */

/* Iconos laterales más pequeños en móvil */
@media (max-width: 560px) {
  .social-dock { right: 8px; gap: .5rem; }
  .social-dock a { width: 40px; height: 40px; }
  .social-dock svg { width: 19px; height: 19px; }
}

/* Tablet */
@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .cookie-inner { flex-direction: row; justify-content: space-between; }
  .cookie-inner p { flex: 1; }
}

/* Escritorio */
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1.1fr 1fr; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Navegación móvil */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78%, 320px);
    flex-direction: column;
    justify-content: center;
    gap: 1.8rem;
    background: var(--color-surface);
    padding: 2rem;
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { color: var(--color-ink); font-size: 1rem; }
  /* Cuando el menú está abierto, hamburguesa en X */
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}


/* ============================================================
   14. SELECTOR DE IDIOMA
   ============================================================ */
.lang{display:flex;gap:1px;margin-left:14px;background:rgba(196,115,138,.16);padding:1px;border-radius:999px;overflow:hidden}
.lang button{background:transparent;border:0;color:#8A7A74;font:inherit;font-size:11.5px;font-weight:500;
  letter-spacing:.06em;padding:6px 10px;cursor:pointer;transition:color .2s,background .2s;line-height:1;border-radius:999px}
.lang button:hover{color:#2B2622}
.lang button.on{background:#C4738A;color:#fff}
.lang button:focus-visible{outline:2px solid #C4738A;outline-offset:2px}
@media(max-width:900px){.lang{margin-left:8px}.lang button{padding:6px 8px;font-size:11px}}

/* ---------- Aviso de demo ----------
   Barra fija arriba del todo. Glow no es un salon real y quien llegue por un
   enlace suelto tiene que saberlo antes de escribir por el formulario, que
   ahora si envia de verdad. Usa el plomo calido de la marca para que se lea
   como un aviso y no como una seccion mas de la web. */
.demo-bar {
  background: var(--color-ink);
  color: #f6e7ea;
  font-size: .84rem;
  line-height: 1.5;
  padding: .65rem 0;
  border-bottom: 1px solid var(--color-gold);
}
.demo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem .9rem;
  flex-wrap: wrap;
  text-align: center;
}
.demo-bar strong { color: #fff; font-weight: 600; }
.demo-bar a {
  color: var(--color-rose);
  font-weight: 600;
  border-bottom: 1px solid rgba(244, 170, 185, .45);
}
.demo-bar a:hover { border-color: var(--color-rose); }
.demo-tag {
  background: var(--color-gold);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 999px;
  flex: none;
}