/* ============================================================
   Sitioideal — Diseño «Estilo» (belleza y cuidado personal)
   Va encima de sitio.css cuando el negocio eligió este diseño (módulo Plantilla).
   Elegante, tipo revista: títulos con serifa (Playfair Display) y texto en Jost,
   portada alta con el nombre al centro, esquinas rectas, letras separadas en
   botones y menú, y la galería en mosaico (la primera foto grande).
   Colores del negocio (--c-*).
   ============================================================ */

.diseno-estilo {
    --estilo-titulos: "Playfair Display", Georgia, "Times New Roman", serif;
    --estilo-linea: color-mix(in srgb, var(--c-texto) 14%, transparent);
    font-family: "Jost", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.diseno-estilo h1,
.diseno-estilo h2,
.diseno-estilo .logo__nombre,
.diseno-estilo .catalogo__categoria,
.diseno-estilo .servicio__nombre,
.diseno-estilo .platillo__nombre,
.diseno-estilo .promocion__titulo,
.diseno-estilo .especial__titulo,
.diseno-estilo .equipo__titulo,
.diseno-estilo .persona__nombre,
.diseno-estilo .redes__titulo {
    font-family: var(--estilo-titulos);
    font-stretch: normal;
    letter-spacing: 0;
    font-weight: 600;
}

/* Detalles en mayúsculas con letras separadas */
.diseno-estilo .menu a,
.diseno-estilo .boton,
.diseno-estilo .boton-chico,
.diseno-estilo .portada__giro,
.diseno-estilo .catalogo__indice a,
.diseno-estilo .galeria__ver-mas {
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- Encabezado: fino ---------- */
.diseno-estilo .encabezado { border-bottom: 1px solid var(--estilo-linea); }
.diseno-estilo .menu a { font-size: .8rem; font-weight: 500; }

/* ---------- Botones de esquinas rectas ---------- */
.diseno-estilo .boton {
    padding: 15px 26px;
    border-radius: 2px;
    font-size: .88rem;
    font-weight: 600;
}

.diseno-estilo .boton--principal { box-shadow: none; }
.diseno-estilo .boton--secundario { border-width: 1px; background: transparent; }

.diseno-estilo .boton-chico { border-radius: 2px; font-size: .78rem; }

/* ---------- Portada alta, con el nombre al centro ---------- */
.diseno-estilo .portada {
    align-items: center;
    justify-content: center;
    min-height: min(90vh, 760px);
    text-align: center;
}

.diseno-estilo .portada--con-foto::after { background: rgba(0, 0, 0, .42); }

.diseno-estilo .portada__contenido { display: flex; flex-direction: column; align-items: center; }

.diseno-estilo .portada h1 {
    max-width: 16ch;
    font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);
    font-weight: 500;
    line-height: 1.05;
}

.diseno-estilo .portada__eslogan {
    font-family: var(--estilo-titulos);
    font-style: italic;
    font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
}

.diseno-estilo .portada__giro { font-size: .82rem; font-weight: 500; }

.diseno-estilo .portada .botones { justify-content: center; }

/* Una rayita fina entre el giro y el nombre */
.diseno-estilo .portada__giro::after {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: 14px auto 6px;
    background: currentColor;
}

/* ---------- Secciones: títulos centrados, grandes y finos ---------- */
.diseno-estilo .seccion { padding-block: 90px; }

.diseno-estilo .seccion h2 {
    margin-bottom: 34px;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: 500;
    text-align: center;
    color: var(--c-texto);
}

.diseno-estilo .seccion h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    margin: 18px auto 0;
    background: var(--c-primario);
}

.diseno-estilo .nosotros h2,
.diseno-estilo .horario h2 { text-align: left; }
.diseno-estilo .nosotros h2::after,
.diseno-estilo .horario h2::after { margin-left: 0; }

/* ---------- Tarjetas con esquinas rectas y línea fina ---------- */
.diseno-estilo .servicio,
.diseno-estilo .promocion,
.diseno-estilo .persona,
.diseno-estilo .especial__punto,
.diseno-estilo .testimonio,
.diseno-estilo .pregunta,
.diseno-estilo .sucursal,
.diseno-estilo .contacto__item,
.diseno-estilo .red {
    border: 1px solid var(--estilo-linea);
    border-radius: 2px;
    box-shadow: none;
}

.diseno-estilo .servicio__foto { aspect-ratio: 4 / 5; }
.diseno-estilo .servicio__nombre { font-size: 1.35rem; }
.diseno-estilo .servicio__precio strong { font-weight: 600; }

.diseno-estilo .destacado,
.diseno-estilo .promocion__hoy,
.diseno-estilo .promocion__dias,
.diseno-estilo .horario__etiqueta { border-radius: 2px; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }

.diseno-estilo .catalogo__indice a { border-radius: 2px; border-width: 1px; font-size: .78rem; }

.diseno-estilo .especial__marca { border-radius: 2px; }

/* ---------- Galería en mosaico: la primera foto, grande ---------- */
.diseno-estilo .galeria { gap: 6px; }
.diseno-estilo .galeria__foto { border-radius: 0; }

@media (min-width: 700px) {
    .diseno-estilo .galeria { gap: 8px; }
    .diseno-estilo .galeria > li:first-child { grid-column: span 2; grid-row: span 2; }
    /* Las de "Ver N fotos más" van todas del mismo tamaño */
    .diseno-estilo .galeria__mas .galeria > li:first-child { grid-column: auto; grid-row: auto; }
}

.diseno-estilo .galeria__ver-mas { border-radius: 2px; font-size: .8rem; }

/* ---------- Testimonios en cursiva, como cita de revista ---------- */
.diseno-estilo .testimonio__texto {
    font-family: var(--estilo-titulos);
    font-size: 1.2rem;
    font-style: italic;
}

.diseno-estilo .persona__foto,
.diseno-estilo .nosotros__foto img { border-radius: 0; }
.diseno-estilo .persona__foto { border-radius: 50%; }

/* ---------- Encabezado con muchas secciones: el nombre en un renglón y el menú en dos si hace falta ---------- */
.diseno-estilo .logo { flex: none; }
.diseno-estilo .logo__nombre { white-space: nowrap; }
.diseno-estilo .menu { flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; padding-block: 8px; }