/* ============================================================
   Sitioideal — Diseño «Seda» (spas, masajes y faciales) · paso 7.x
   Va encima de sitio.css. Elegante y en calma: fondo marfil y piedra, línea fina dorada
   (mezclada con el color del negocio), títulos en letra de revista (Prata; 7.z.49a) y texto
   en Jost, las cursivas en Bodoni Moda, letras chicas espaciadas en mayúsculas, la foto de portada en un arco alto con
   su marco desplazado, y los servicios como carta de tratamientos con la duración y el
   precio unidos por puntos. Los títulos usan el color principal oscurecido (tinta).
   HTML propio: app/vistas/sitio/disenos/seda/
   ============================================================ */

.diseno-seda {
    /* 7.z.49a: antes Bodoni Moda, que en grande tenía trazos tan finos que no se leía («Mirra» parecía «Nirra»).
       Prata tiene un solo grueso (400); Bodoni Moda se queda solo para las cursivas, que sí se leen. */
    --sd-titulos: "Prata", "Didot", "Bodoni 72", Georgia, serif;
    --sd-cursiva: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
    --sd-letra: "Jost", "Futura", "Segoe UI", system-ui, sans-serif;
    --sd-marfil: color-mix(in srgb, var(--c-fondo) 20%, #FAF6F0);
    --sd-piedra: color-mix(in srgb, var(--c-primario) 7%, #F1EAE0);
    --sd-oro: color-mix(in srgb, var(--c-primario) 28%, #B8976E);
    --sd-oro-texto: color-mix(in srgb, var(--c-primario) 25%, #7A5C3A);
    --sd-tinta: color-mix(in srgb, var(--c-primario) 40%, #2A2522);
    --sd-texto: color-mix(in srgb, var(--c-texto) 70%, #3B3531);
    --sd-sombra: 0 40px 60px -42px rgba(42, 37, 34, .65);

    /* Superficies (sitio.css) */
    --s-fondo: var(--sd-marfil);
    --s-alterna: var(--sd-piedra);
    --s-tarjeta: #FFFDFA;
    --s-tarjeta-alterna: #FFFDFA;
    --s-encabezado: var(--sd-marfil);
    --s-texto: var(--sd-texto);
    --s-titulo: var(--sd-tinta);
    --s-linea: rgba(42, 37, 34, .1);
    --s-linea-fuerte: rgba(42, 37, 34, .18);

    background: var(--sd-marfil);
    font-family: var(--sd-letra);
    font-size: 1.04rem;
    line-height: 1.7;
}

/* La tinta y el dorado de los textos: nunca tan claros que no se lean */
@supports (color: oklch(from red l c h)) {
    .diseno-seda {
        --sd-tinta: oklch(from color-mix(in srgb, var(--c-primario) 40%, #2A2522) min(l, .33) c h);
        --sd-oro-texto: oklch(from color-mix(in srgb, var(--c-primario) 25%, #7A5C3A) min(l, .48) c h);
        --sd-texto: oklch(from color-mix(in srgb, var(--c-texto) 70%, #3B3531) min(l, .36) c h);
    }
}

.diseno-seda h1,
.diseno-seda h2,
.diseno-seda h3,
.diseno-seda .logo__nombre,
.diseno-seda .especial__titulo,
.diseno-seda .equipo__titulo,
.diseno-seda .persona__nombre,
.diseno-seda .promocion__titulo,
.diseno-seda .servicio__nombre,
.diseno-seda .sucursal__nombre,
.diseno-seda .redes__titulo {
    font-family: var(--sd-titulos);
    font-stretch: normal;
    font-weight: 400;   /* 7.z.49a: Prata solo tiene 400 */
    font-synthesis: none;   /* 7.z.49a: sin negritas ni cursivas falsas */
    letter-spacing: -.01em;
}

/* 7.z.49a: las cursivas, en Bodoni Moda de trazo firme (tamaño óptico de texto) */
.sd-portada__eslogan,
.diseno-seda .sd-grupo__nombre,
.diseno-seda .testimonio__texto {
    font-family: var(--sd-cursiva) !important;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 11;
}

.diseno-seda h4,
.diseno-seda .boton,
.diseno-seda .menu a { font-family: var(--sd-letra); font-stretch: normal; }

/* ---------- Encabezado ---------- */
.diseno-seda .encabezado { border-bottom: 1px solid var(--s-linea); }
.diseno-seda .logo__nombre { color: var(--sd-tinta); font-size: 1.35rem; }
.diseno-seda .menu { gap: 4px 20px; }
.diseno-seda .menu a {
    color: var(--sd-tinta);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.diseno-seda .menu a:hover { color: var(--sd-oro-texto); }

/* ---------- Botones: rectos y finos ---------- */
.diseno-seda .boton {
    padding: 15px 28px;
    border-radius: 2px;
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.diseno-seda .boton--principal { border-color: transparent; background: var(--sd-tinta); color: #FFFDFA; }
.diseno-seda .boton--principal:hover { background: color-mix(in srgb, var(--sd-tinta) 85%, #000); }
.diseno-seda .boton--secundario { border: 1px solid var(--sd-oro); background: transparent; color: var(--sd-tinta); }
.diseno-seda .boton--secundario:hover { background: var(--sd-piedra); }
.diseno-seda .boton-chico { border-radius: 2px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Portada ---------- */
.sd-portada {
    position: relative;
    padding-block: clamp(48px, 7vw, 104px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--sd-marfil), var(--sd-piedra));
}

.sd-portada__rejilla {
    display: grid;
    gap: 52px;
    align-items: center;
}

@media (min-width: 900px) {
    .sd-portada__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; }
}

.sd-etiqueta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--sd-oro-texto);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.sd-etiqueta::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--sd-oro); }

.sd-portada__nombre {
    margin: 0 0 20px;
    color: var(--sd-tinta);
    font-size: clamp(2.7rem, 1.5rem + 5vw, 5.4rem);
    font-weight: 400 !important;
    line-height: 1.02;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.sd-portada__eslogan {
    max-width: 32ch;
    margin: 0 0 34px;
    font-family: var(--sd-titulos);
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    font-style: italic;
    line-height: 1.45;
}

.sd-portada__estado { margin-top: 28px; }
.diseno-seda .estado-ahora--claro { border: 1px solid var(--s-linea); border-radius: 2px; box-shadow: none; }

/* El arco y su marco */
.sd-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 410px);
    aspect-ratio: 4 / 5;
}

.sd-arco,
.sd-marco {
    position: absolute;
    inset: 0;
    border-radius: 999px 999px 4px 4px;
}

.sd-marco { border: 1px solid var(--sd-oro); transform: translate(18px, 18px); }

.sd-arco { overflow: hidden; background: var(--sd-piedra); box-shadow: var(--sd-sombra); }
.sd-arco picture,
.sd-arco picture img { width: 100%; height: 100%; }
.sd-arco picture img { object-fit: cover; }

.sd-arco--logo { display: grid; place-items: center; background: #FFFDFA; }
.sd-arco__logo { width: 60%; height: auto; }
.sd-arco__inicial { color: var(--sd-tinta); font-family: var(--sd-titulos); font-size: 9rem; line-height: 1; }

.sd-loto {
    position: absolute;
    left: -28px;
    bottom: 14%;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border: 1px solid var(--sd-oro);
    border-radius: 50%;
    background: #FFFDFA;
    color: var(--sd-oro-texto);
    box-shadow: 0 18px 30px -20px rgba(42, 37, 34, .6);
}
.sd-loto .icono { width: 40px; height: 40px; stroke-width: 1.4; }

@media (max-width: 599.98px) {
    .sd-portada__visual { width: min(100% - 24px, 310px); }
    .sd-marco { transform: translate(12px, 12px); }
    .sd-loto { left: -14px; width: 66px; height: 66px; }
    .sd-loto .icono { width: 30px; height: 30px; }
}

/* ---------- Secciones ---------- */
.diseno-seda .seccion { padding-block: clamp(64px, 8vw, 104px); }

.diseno-seda .seccion h2 {
    color: var(--sd-tinta);
    font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem);
    font-weight: 400;
}

.sd-cabeza { margin-bottom: 36px; text-align: center; }
.sd-cabeza h2 { margin: 0 !important; }
.sd-antetitulo {
    margin: 0 0 8px;
    color: var(--sd-oro-texto);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
}

/* ---------- Carta de tratamientos ---------- */
/* Centrado con márgenes automáticos: si no caben, se deslizan sin cortar el primero */
.diseno-seda .sd-tratamientos .catalogo__indice > :first-child { margin-left: auto; }
.diseno-seda .sd-tratamientos .catalogo__indice > :last-child { margin-right: auto; }
.diseno-seda .catalogo__indice a {
    border: 1px solid var(--s-linea-fuerte);
    border-radius: 2px;
    background: transparent;
    color: var(--sd-tinta);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.diseno-seda .catalogo__indice a:hover { background: var(--sd-piedra); }

.sd-grupo { max-width: 1060px; margin-inline: auto; }
.sd-grupo + .sd-grupo { margin-top: 52px; }

.sd-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 6px;
    color: var(--sd-tinta);
    font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
    font-style: italic;
    font-weight: 400 !important;
}
.sd-grupo__nombre::after { content: ""; flex: 1; height: 1px; background: var(--sd-oro); opacity: .7; }

.sd-grupo__descripcion { margin: 0 0 6px; }

.sd-lista { display: grid; column-gap: 64px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
    .sd-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sd-tratamiento {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--s-linea);
}

.sd-tratamiento__foto {
    flex: none;
    width: 72px;
    height: 96px;
    border-radius: 999px 999px 3px 3px;
    object-fit: cover;
}

.sd-tratamiento__texto { flex: 1; min-width: 0; }
.sd-tratamiento__fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }   /* 7.z.24: si no caben, el precio baja */

.sd-tratamiento__nombre {
    margin: 0;
    color: var(--sd-tinta);
    font-family: var(--sd-titulos) !important;
    font-size: 1.28rem;
    font-weight: 400;   /* 7.z.49a */
    line-height: 1.25;
}

.sd-tratamiento__puntos { flex: 1; min-width: 14px; border-bottom: 1px dotted var(--sd-oro); transform: translateY(-5px); }

.sd-tratamiento__precio {
    flex: none;
    max-width: 100%;
    margin-left: auto;   /* 7.z.24 */
    color: var(--sd-tinta);
    font-family: var(--sd-titulos);
    font-size: 1.2rem;
    font-weight: 400;   /* 7.z.49a */
    white-space: nowrap;
}

.sd-tratamiento__descripcion { margin: 4px 0 0; font-size: .98rem; }

.sd-tratamiento__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
}

.sd-tratamiento__datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0;
    color: var(--sd-oro-texto);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sd-duracion,
.sd-tratamiento__favorito { display: inline-flex; align-items: center; gap: 6px; }
.sd-duracion .icono { width: 15px; height: 15px; }
.sd-tratamiento__favorito .icono { width: 13px; height: 13px; fill: currentColor; }

.sd-reservar {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 0 6px;
    border-bottom: 1px solid var(--sd-oro);
    color: var(--sd-tinta);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
    transition: gap .2s ease;
}
.sd-reservar .icono { width: 15px; height: 15px; }
.sd-reservar:hover { gap: 10px; }

@media (max-width: 599.98px) {
    .sd-tratamiento { flex-wrap: wrap; gap: 12px 14px; }
    .sd-tratamiento__foto { width: 60px; height: 80px; }
    .sd-tratamiento__texto { flex-basis: calc(100% - 74px); }
    .sd-tratamiento:not(:has(.sd-tratamiento__foto)) .sd-tratamiento__texto { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-reservar { transition: none; }
}

/* ---------- Lo demás: fino y sereno ---------- */
.diseno-seda .promocion,
.diseno-seda .testimonio,
.diseno-seda .pregunta,
.diseno-seda .contacto__item,
.diseno-seda .sucursal,
.diseno-seda .especial__punto,
.diseno-seda .persona,
.diseno-seda .servicio { border: 1px solid var(--s-linea); border-radius: 4px; box-shadow: none; }
.diseno-seda .promocion__foto { border-radius: 4px 4px 0 0; }
.diseno-seda .testimonio__texto { font-family: var(--sd-titulos); font-size: 1.16rem; font-style: italic; line-height: 1.55; }
.diseno-seda .testimonio > .icono { color: var(--sd-oro); opacity: .7; }
.diseno-seda .testimonio__iniciales,
.diseno-seda .contacto__icono,
.diseno-seda .especial__marca,
.diseno-seda .persona__foto--iniciales,
.diseno-seda .pregunta__signo { background: var(--sd-piedra); color: var(--sd-tinta); }
.diseno-seda .contacto__icono { border-radius: 50%; }
.diseno-seda .nosotros__foto img { border-radius: 999px 999px 4px 4px; }
.diseno-seda .nosotros__desde { border-radius: 2px; background: var(--sd-piedra); color: var(--sd-tinta); }
.diseno-seda .galeria__foto { border-radius: 999px 999px 4px 4px; }
.diseno-seda .galeria__ver-mas { border-radius: 2px; }
.diseno-seda .mapa { border: 1px solid var(--s-linea); border-radius: 4px; }
.diseno-seda .horario__hoy th,
.diseno-seda .horario__hoy td { background: var(--sd-piedra); }
.diseno-seda .horario__hoy th { box-shadow: inset 2px 0 0 var(--sd-oro); }
.diseno-seda .horario__etiqueta { border-radius: 2px; background: var(--sd-tinta); color: #FFFDFA; }

.diseno-seda .pie { background: var(--sd-tinta); color: rgba(255, 253, 250, .84); }
.diseno-seda .barra-acciones { background: color-mix(in srgb, var(--sd-marfil) 94%, transparent); backdrop-filter: blur(10px); }
.diseno-seda .barra-acciones__boton--principal { border-radius: 2px; background: var(--sd-tinta); color: #FFFDFA; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Imagen generada con IA (7.j) ---------- */
/* La galería en arco: la nota abajo, donde la foto es recta */
.diseno-seda .galeria__foto > .marca-ia--foto { bottom: 10px; }