/* ============================================================
   Sitioideal — Diseño «Glam» (uñas, pestañas, cejas, maquillaje, estéticas) · paso 7.g
   Va encima de sitio.css. Coqueto y suave: fondo blanco rosado con un toque del
   color del negocio, formas redondas, letra redonda (Quicksand) y el giro en
   letra manuscrita (Great Vibes); la foto de portada en una burbuja con destellos,
   los servicios en tarjetas y píldoras, la galería como historias y los
   testimonios como un chat. Los títulos usan el color principal oscurecido para
   que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/glam/
   ============================================================ */

.diseno-glam {
    --gl-letra: "Quicksand", "Nunito", "Segoe UI", system-ui, sans-serif;
    --gl-script: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
    --gl-fondo: color-mix(in srgb, var(--c-primario) 6%, #FFF7F9);
    --gl-alterna: color-mix(in srgb, var(--c-primario) 12%, #FFF3F6);
    --gl-suave: color-mix(in srgb, var(--c-primario) 14%, #fff);
    --gl-medio: color-mix(in srgb, var(--c-primario) 32%, #fff);
    --gl-titulo: color-mix(in srgb, var(--c-primario) 78%, #000);
    --gl-texto: color-mix(in srgb, var(--c-texto) 88%, #000);
    --gl-sombra: 0 24px 48px -30px color-mix(in srgb, var(--c-primario) 55%, #000);

    /* Superficies (sitio.css) */
    --s-fondo: var(--gl-fondo);
    --s-alterna: var(--gl-alterna);
    --s-tarjeta: #fff;
    --s-tarjeta-alterna: #fff;
    --s-encabezado: color-mix(in srgb, #fff 88%, transparent);
    --s-texto: var(--gl-texto);
    --s-titulo: var(--gl-titulo);
    --s-linea: color-mix(in srgb, var(--c-primario) 14%, transparent);
    --s-linea-fuerte: color-mix(in srgb, var(--c-primario) 24%, transparent);

    background: var(--gl-fondo);
    font-family: var(--gl-letra);
    font-weight: 500;
}

/* Donde el navegador puede, el principal se oscurece solo lo necesario para leerse */
@supports (color: oklch(from red l c h)) {
    .diseno-glam {
        --gl-titulo: oklch(from var(--c-primario) min(l, .46) c h);
        --gl-texto: oklch(from var(--c-texto) min(l, .32) c h);
    }
}

.gl-script {
    font-family: var(--gl-script);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.diseno-glam h1,
.diseno-glam h2,
.diseno-glam h3,
.diseno-glam h4,
.diseno-glam .logo__nombre,
.diseno-glam .boton,
.diseno-glam .menu a {
    font-family: var(--gl-letra);
    font-stretch: normal;
}

.diseno-glam strong { font-weight: 700; }

/* ---------- Encabezado: blanco, con desenfoque ---------- */
.diseno-glam .encabezado {
    border-bottom: 1px solid var(--s-linea);
    backdrop-filter: blur(12px);
}
.diseno-glam .logo__nombre { color: var(--gl-titulo); font-weight: 700; }
.diseno-glam .menu a { font-weight: 600; }
.diseno-glam .menu a:hover { color: var(--gl-titulo); }

/* ---------- Botones: píldoras ---------- */
.diseno-glam .boton {
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 700;
}

.diseno-glam .boton--principal {
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--c-primario) 80%, #000);
}

.diseno-glam .boton--secundario {
    border: 2px solid var(--gl-medio);
    background: #fff;
    color: var(--gl-titulo);
}
.diseno-glam .boton--secundario:hover { border-color: var(--gl-titulo); }

/* ---------- Portada ---------- */
.gl-portada {
    position: relative;
    padding-block: clamp(40px, 6vw, 84px);
    overflow: hidden;
    background:
        radial-gradient(45% 55% at 88% 20%, color-mix(in srgb, var(--c-acento) 30%, transparent), transparent 70%),
        radial-gradient(40% 50% at 8% 90%, color-mix(in srgb, var(--c-primario) 14%, transparent), transparent 70%),
        var(--gl-fondo);
}

.gl-portada__rejilla {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .gl-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; }
}

.gl-portada__giro {
    margin: 0 0 -6px;
    color: var(--gl-titulo);
    font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem);
    line-height: 1.1;
}

.gl-portada__nombre {
    margin: 0 0 16px;
    color: var(--gl-titulo);
    font-size: clamp(2.3rem, 1.3rem + 4vw, 4.3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.015em;
}

.gl-portada__eslogan {
    max-width: 36ch;
    margin: 0 0 28px;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
    opacity: .9;
}

.gl-portada__pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.gl-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--s-linea-fuerte);
    border-radius: 999px;
    background: #fff;
    color: var(--gl-texto);
    font-size: .95rem;
    text-decoration: none;
    box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--c-primario) 60%, #000);
}

.gl-pastilla__estrella { color: #E8A317; font-size: 1.1rem; line-height: 1; }

/* La burbuja */
.gl-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 480px);
}

/* Otra burbuja, del acento, detrás */
.gl-portada__visual::before {
    content: "";
    position: absolute;
    inset: 6% -4% -4% 8%;
    border-radius: 44% 56% 62% 38% / 42% 48% 52% 58%;
    background: color-mix(in srgb, var(--c-acento) 70%, #fff);
    opacity: .7;
}

.gl-burbuja {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 8px solid #fff;
    border-radius: 58% 42% 48% 52% / 52% 44% 56% 48%;
    background: var(--gl-suave);
    box-shadow: var(--gl-sombra);
    animation: gl-forma 14s ease-in-out infinite alternate;
}

.gl-burbuja picture,
.gl-burbuja picture img { width: 100%; height: 100%; }
.gl-burbuja picture img { object-fit: cover; }

.gl-burbuja--logo { display: grid; place-items: center; background: #fff; }
.gl-burbuja__logo { width: 62%; height: auto; }
.gl-burbuja__inicial { color: var(--gl-titulo); font-family: var(--gl-script); font-size: 9rem; line-height: 1; }

@keyframes gl-forma {
    50% { border-radius: 44% 56% 58% 42% / 46% 58% 42% 54%; }
    100% { border-radius: 52% 48% 40% 60% / 58% 42% 58% 42%; }
}

.gl-destello {
    position: absolute;
    color: var(--gl-titulo);
    animation: gl-brillar 3.6s ease-in-out infinite;
}
.gl-destello .icono { width: 100%; height: 100%; fill: currentColor; stroke-width: 1; }
.gl-destello--1 { top: 2%; left: 4%; width: 34px; height: 34px; }
.gl-destello--2 { top: 18%; right: -2%; width: 22px; height: 22px; color: color-mix(in srgb, var(--c-acento) 60%, var(--gl-titulo)); animation-delay: -1.2s; }
.gl-destello--3 { bottom: 6%; left: -2%; width: 26px; height: 26px; animation-delay: -2.4s; }

@keyframes gl-brillar {
    0%, 100% { opacity: .35; transform: scale(.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gl-burbuja,
    .gl-destello { animation: none; }
}

@media (max-width: 599.98px) {
    .gl-portada__visual { width: min(100%, 330px); }
}

/* ---------- Secciones ---------- */
.diseno-glam .seccion h2 {
    color: var(--gl-titulo);
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -.01em;
}

.gl-cabeza { margin-bottom: 30px; }
.gl-cabeza h2 { margin: 0; }
.gl-cabeza--centro { text-align: center; }

.gl-cabeza--fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 20px;
}

.gl-cabeza__script {
    margin: 0 0 -4px;
    color: color-mix(in srgb, var(--gl-titulo) 80%, var(--c-acento));
    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
    line-height: 1.1;
}

/* ---------- Precio en píldora y «Agendar» ---------- */
.gl-precio {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin: 0;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--gl-suave);
    color: var(--gl-titulo);
}
.gl-precio strong { font-size: 1.08rem; font-weight: 700; }
.gl-precio small { font-size: .85rem; font-weight: 600; opacity: .85; }

.gl-agendar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--gl-titulo);
    border-radius: 999px;
    color: var(--gl-titulo);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.gl-agendar .icono { width: 17px; height: 17px; }
.gl-agendar:hover { background: var(--gl-titulo); color: #fff; }

/* ---------- Los favoritos ---------- */
.gl-favoritos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gl-favorito {
    display: flex;
    flex: 0 1 220px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.gl-favorito__foto {
    display: grid;
    place-items: center;
    width: 180px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 50%;
    background: var(--gl-suave);
    color: var(--gl-titulo);
    box-shadow: 0 0 0 2px var(--gl-medio), var(--gl-sombra);
}
.gl-favorito__foto img { width: 100%; height: 100%; object-fit: cover; }
.gl-favorito__foto .icono { width: 54px; height: 54px; }

.gl-favorito__nombre { margin: 6px 0 0; color: var(--gl-titulo); font-size: 1.2rem; font-weight: 700; line-height: 1.25; }

@media (max-width: 599.98px) {
    .gl-favoritos { gap: 26px 14px; }
    .gl-favorito { flex-basis: calc(50% - 7px); }
    .gl-favorito__foto { width: min(100%, 140px); }
    .gl-favorito__nombre { font-size: 1.05rem; }
}

/* ---------- Servicios ---------- */
.diseno-glam .catalogo__indice a {
    border: 0;
    background: #fff;
    color: var(--gl-titulo);
    box-shadow: 0 0 0 1.5px var(--gl-medio);
}
.diseno-glam .catalogo__indice a:hover { background: var(--gl-suave); }

.gl-grupo + .gl-grupo { margin-top: 48px; }

.gl-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    color: var(--gl-titulo);
    font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem);
    font-weight: 700;
}
.gl-grupo__nombre .icono { width: 22px; height: 22px; fill: currentColor; stroke-width: 1; opacity: .7; }

.gl-grupo__descripcion { margin: 0 0 6px; opacity: .8; }

.gl-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 22px;
    margin-top: 18px;
}

.gl-tarjeta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--gl-sombra);
}

.gl-tarjeta__foto { position: relative; margin: 8px 8px 0; }
.gl-tarjeta__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }

.gl-tarjeta__favorito {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px 4px 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--gl-titulo);
    font-size: .82rem;
    font-weight: 700;
}
.gl-tarjeta__favorito .icono { width: 15px; height: 15px; fill: #E8A317; color: #E8A317; }

.gl-tarjeta__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px 20px;
}

.gl-tarjeta__nombre { margin: 0; color: var(--gl-titulo); font-size: 1.18rem; font-weight: 700; line-height: 1.25; }
.gl-tarjeta__descripcion { margin: 0; font-size: .96rem; opacity: .82; }

.gl-tarjeta__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

/* Los que no tienen foto: lista suave */
.gl-lista {
    margin: 18px 0 0;
    padding: 6px 22px;
    border-radius: 28px;
    background: #fff;
    list-style: none;
    box-shadow: var(--gl-sombra);
}

.gl-renglon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--s-linea-fuerte);
}
.gl-renglon:last-child { border-bottom: 0; }

.gl-renglon__texto { flex: 1 1 260px; min-width: 0; }
.gl-renglon__nombre { margin: 0; color: var(--gl-titulo); font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.gl-renglon__favorito .icono { width: 15px; height: 15px; fill: #E8A317; color: #E8A317; vertical-align: -2px; }
.gl-renglon__descripcion { margin: 2px 0 0; font-size: .95rem; opacity: .8; }

.gl-renglon__lado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Servicios y menú con la vista común (productos) */
.diseno-glam .servicio,
.diseno-glam .platillo__foto { border-radius: 22px; }

/* ---------- Galería: historias ---------- */
.gl-galeria__cuantas {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px;
    color: var(--gl-titulo);
    font-weight: 700;
    opacity: .8;
}
.gl-galeria__cuantas .icono { width: 18px; height: 18px; }

.gl-historias {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 6px max(20px, calc((100% - 1120px) / 2)) 22px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(20px, calc((100% - 1120px) / 2));
    scrollbar-width: thin;
    scrollbar-color: var(--gl-medio) transparent;
}
.gl-historias:focus-visible { outline: 3px solid var(--c-acento); outline-offset: -3px; }

.gl-historia { flex: none; width: clamp(180px, 22vw, 250px); scroll-snap-align: start; }

.gl-historia .galeria__foto {
    position: relative;
    display: block;
    border: 3px solid #fff;
    border-radius: 26px;
    box-shadow: 0 0 0 2px var(--gl-medio), var(--gl-sombra);
}

.gl-historia .galeria__foto img { aspect-ratio: 3 / 4; border-radius: 22px; }

.gl-historia__pie {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px 14px 14px;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- Testimonios: el chat ---------- */
.gl-chat {
    max-width: 760px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 30px;
    background: color-mix(in srgb, var(--c-primario) 7%, #FBF7F2);
    box-shadow: var(--gl-sombra);
}

.gl-chat__cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid var(--s-linea);
}

.gl-chat__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 2px solid var(--gl-medio);
    border-radius: 50%;
    background: #fff;
    color: var(--gl-titulo);
    font-weight: 700;
}
.gl-chat__avatar img { width: 80%; height: auto; }

.gl-chat__nombre { display: flex; flex-direction: column; line-height: 1.25; }
.gl-chat__nombre strong { color: var(--gl-titulo); }
.gl-chat__nombre span { font-size: .88rem; opacity: .75; }

.gl-chat__mensajes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px clamp(14px, 3vw, 28px) 28px;
}

.gl-mensaje {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 88%;
}

.gl-mensaje--derecha { flex-direction: row-reverse; align-self: flex-end; }

.gl-mensaje__iniciales {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-size: .8rem;
    font-weight: 700;
}

.gl-mensaje__burbuja {
    padding: 12px 16px 14px;
    border-radius: 22px 22px 22px 6px;
    background: #fff;
    box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .5);
}

.gl-mensaje--derecha .gl-mensaje__burbuja {
    border-radius: 22px 22px 6px 22px;
    background: color-mix(in srgb, var(--c-primario) 16%, #fff);
}

.gl-mensaje__autor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 2px; }
.gl-mensaje__autor strong { color: var(--gl-titulo); font-size: .95rem; }
.gl-mensaje__autor span { font-size: .82rem; opacity: .7; }

.gl-mensaje__estrellas { margin: 0 0 4px; letter-spacing: 2px; line-height: 1; }
.gl-mensaje__llenas { color: #E8A317; }
.gl-mensaje__vacias { color: rgba(0, 0, 0, .15); }

.gl-mensaje__texto { margin: 0; line-height: 1.5; }
.gl-mensaje__texto p { margin: 0 0 .5em; }
.gl-mensaje__texto p:last-child { margin: 0; }

.gl-chat__mas { display: flex; flex-direction: column; gap: 16px; }
.gl-chat__mas[open] { margin-top: 0; }
.gl-chat__mas .galeria__ver-mas { margin-top: 4px; }

/* ---------- Lo demás: redondo y suave ---------- */
.diseno-glam .galeria__ver-mas,
.diseno-glam .boton-chico { border-radius: 999px; }
.diseno-glam .boton-chico { border-color: var(--gl-medio); color: var(--gl-titulo); }
.diseno-glam .boton-chico--principal { border-color: var(--c-primario); color: var(--c-sobre-primario); }
.diseno-glam .galeria__ver-mas { border-color: var(--gl-medio); color: var(--gl-titulo); }
.diseno-glam .promocion,
.diseno-glam .testimonio,
.diseno-glam .pregunta,
.diseno-glam .contacto__item,
.diseno-glam .sucursal { border-radius: 26px; }
.diseno-glam .promocion { border: 0; box-shadow: var(--gl-sombra); }
.diseno-glam .promocion__titulo { color: var(--gl-titulo); font-weight: 700; }
.diseno-glam .pregunta { border: 0; box-shadow: 0 10px 26px -20px color-mix(in srgb, var(--c-primario) 60%, #000); }
.diseno-glam .contacto__icono { border-radius: 50%; }
.diseno-glam .mapa { border-radius: 26px; }
.diseno-glam .nosotros__foto img { border-radius: 38% 62% 52% 48% / 44% 40% 60% 56%; }
.diseno-glam .persona__foto { border: 3px solid #fff; box-shadow: 0 0 0 2px var(--gl-medio); }
.diseno-glam .horario__tabla { border-radius: 22px; }
.diseno-glam .horario__etiqueta { background: var(--c-primario); color: var(--c-sobre-primario); }
.diseno-glam .red { border-radius: 999px; }

/* ---------- Pie y barra del celular ---------- */
.diseno-glam .pie { border-radius: 32px 32px 0 0; }
.diseno-glam .barra-acciones { background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(10px); }
.diseno-glam .barra-acciones__boton--principal { border-radius: 999px; font-family: var(--gl-letra); }

/* ---------- Imagen generada con IA (7.j) ---------- */
/* El pie de la foto sube para dejar ver la nota */
.gl-historia .galeria__foto:has(> .marca-ia) .gl-historia__pie { padding-bottom: 38px; }
/* La burbuja es redondeada: la nota sube un poco para no cortarse */
.gl-burbuja > .marca-ia--foto { bottom: 9%; }