/* ============================================================
   Sitioideal — Diseño «Aparador» (boutiques, ropa, zapaterías, joyerías, regalos, florerías) · paso 7.i
   Va encima de sitio.css. Como escaparate: blanco hueso, letras de revista
   (DM Serif Display) y texto en DM Sans, la portada en mosaico con las mejores
   fotos, los productos en vitrina con foto alta y la galería con la primera foto
   en grande. El color principal, oscurecido para que siempre se lea, es el de
   los títulos.
   HTML propio: app/vistas/sitio/disenos/aparador/
   ============================================================ */

.diseno-aparador {
    --ap-revista: "DM Serif Display", "Playfair Display", Georgia, serif;
    --ap-letra: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --ap-hueso: color-mix(in srgb, var(--c-fondo) 30%, #FAF8F5);
    --ap-alterna: color-mix(in srgb, var(--c-primario) 6%, #F3EFEA);
    --ap-titulo: color-mix(in srgb, var(--c-primario) 70%, #16110E);
    --ap-texto: color-mix(in srgb, var(--c-texto) 85%, #16110E);
    --ap-tinte: color-mix(in srgb, var(--c-primario) 10%, #fff);

    /* Superficies (sitio.css) */
    --s-fondo: var(--ap-hueso);
    --s-alterna: var(--ap-alterna);
    --s-tarjeta: #fff;
    --s-tarjeta-alterna: #fff;
    --s-encabezado: var(--ap-hueso);
    --s-texto: var(--ap-texto);
    --s-titulo: var(--ap-titulo);
    --s-linea: rgba(22, 17, 14, .1);
    --s-linea-fuerte: rgba(22, 17, 14, .2);

    background: var(--ap-hueso);
    font-family: var(--ap-letra);
}

@supports (color: oklch(from red l c h)) {
    .diseno-aparador {
        --ap-titulo: oklch(from var(--c-primario) min(l, .42) c h);
        --ap-texto: oklch(from var(--c-texto) min(l, .3) c h);
    }
}

.diseno-aparador h1,
.diseno-aparador h2,
.diseno-aparador h3,
.diseno-aparador .logo__nombre,
.diseno-aparador .promocion__titulo,
.diseno-aparador .persona__nombre,
.diseno-aparador .especial__titulo,
.diseno-aparador .equipo__titulo,
.diseno-aparador .sucursal__nombre,
.diseno-aparador .destacado-tarjeta__nombre {
    font-family: var(--ap-revista);
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
}

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

/* Los nombres de los productos, con letra de revista aunque sean h4 */
.diseno-aparador .ap-producto__nombre,
.diseno-aparador .ap-renglon__nombre { font-family: var(--ap-revista); font-weight: 400; letter-spacing: 0; }

/* "Lo más solicitado" (vista común), centrado */
.diseno-aparador #destacados h2 { text-align: center; }
.diseno-aparador .destacados__lista { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 280px)); justify-content: center; }
.diseno-aparador .destacado-tarjeta__foto { aspect-ratio: 3 / 4; }

/* ---------- Encabezado ---------- */
.diseno-aparador .encabezado { border-bottom: 1px solid var(--s-linea-fuerte); }
.diseno-aparador .logo__nombre { color: var(--ap-titulo); font-size: 1.5rem; }
.diseno-aparador .menu a { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.diseno-aparador .menu a:hover { color: var(--ap-titulo); }

/* ---------- Botones: rectos y de revista ---------- */
.diseno-aparador .boton { padding: 14px 26px; border-radius: 0; font-size: .88rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.diseno-aparador .boton--principal { background: var(--ap-titulo); color: #fff; box-shadow: none; }
.diseno-aparador .boton--principal:hover { filter: brightness(1.15); }
.diseno-aparador .boton--secundario { border: 1.5px solid var(--ap-titulo); background: transparent; color: var(--ap-titulo); }
.diseno-aparador .boton--secundario:hover { background: var(--ap-tinte); }

/* ---------- Portada ---------- */
.ap-portada { padding-block: clamp(36px, 5vw, 72px); }

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

@media (min-width: 900px) {
    .ap-portada__rejilla { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
}

.ap-etiqueta {
    margin: 0 0 16px;
    color: var(--ap-titulo);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.ap-portada__nombre {
    margin: 0 0 18px;
    color: var(--ap-titulo);
    font-size: clamp(2.6rem, 1.4rem + 4.8vw, 5rem);
    line-height: 1;
}

.ap-portada__eslogan {
    max-width: 32ch;
    margin: 0 0 30px;
    font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
    opacity: .85;
}

.ap-portada__estado { margin-top: 24px; border-radius: 0; }

/* El mosaico */
.ap-mosaico {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    aspect-ratio: 5 / 4;
}

.ap-mosaico--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ap-mosaico--2 { grid-template-rows: 1fr; }

.ap-mosaico__principal { grid-row: 1 / -1; overflow: hidden; background: var(--ap-tinte); }
.ap-mosaico__principal picture,
.ap-mosaico__principal picture img,
.ap-mosaico__foto { width: 100%; height: 100%; object-fit: cover; }
.ap-mosaico__foto { min-height: 0; }

.ap-mosaico__principal--logo { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--s-linea); }
.ap-mosaico__logo { width: 60%; height: auto; }
.ap-mosaico__inicial { color: var(--ap-titulo); font-family: var(--ap-revista); font-size: 9rem; line-height: 1; }

@media (max-width: 599.98px) {
    .ap-mosaico { gap: 8px; }
}

/* ---------- Secciones ---------- */
.diseno-aparador .seccion h2 {
    color: var(--ap-titulo);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
    line-height: 1.05;
}

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

.ap-antetitulo {
    margin: 0 0 8px;
    color: var(--ap-titulo);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .8;
}

/* ---------- La vitrina ---------- */
/* Centrado con márgenes automáticos: si no caben, se deslizan sin cortar el primero (7.x) */
.diseno-aparador .ap-vitrina .catalogo__indice > :first-child { margin-left: auto; }
.diseno-aparador .ap-vitrina .catalogo__indice > :last-child { margin-right: auto; }
.diseno-aparador .catalogo__indice a { border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; color: var(--ap-titulo); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.diseno-aparador .catalogo__indice a:hover { border-bottom-color: var(--ap-titulo); background: none; }

.ap-grupo + .ap-grupo { margin-top: 52px; }
.ap-grupo__nombre { margin: 0 0 4px; color: var(--ap-titulo); font-size: 1.7rem; text-align: center; }
.ap-grupo__descripcion { margin: 0 0 8px; opacity: .8; text-align: center; }

.ap-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 34px 22px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ap-producto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.ap-producto__foto { position: relative; width: 100%; overflow: hidden; background: #fff; }
.ap-producto__foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .4s ease; }
.ap-producto:hover .ap-producto__foto img { transform: scale(1.04); }

.ap-producto__etiqueta {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: #fff;
    color: var(--ap-titulo);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ap-producto__nombre { margin: 8px 0 0; color: var(--ap-titulo); font-size: 1.35rem; line-height: 1.15; }
.ap-producto__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.ap-producto__precio strong { font-size: 1.05rem; font-weight: 700; }
.ap-producto__precio small { font-size: .85rem; opacity: .75; }
.ap-producto__descripcion { margin: 0; font-size: .94rem; opacity: .8; }

.ap-quiero {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-bottom: 2px;
    border-bottom: 1.5px solid currentColor;
    color: var(--ap-titulo);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}
.ap-quiero .icono { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
    .ap-producto__foto img { transition: none; }
    .ap-producto:hover .ap-producto__foto img { transform: none; }
}

.ap-lista { max-width: 760px; margin: 26px auto 0; padding: 0; list-style: none; border-top: 1px solid var(--s-linea-fuerte); }

.ap-renglon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--s-linea-fuerte);
}

.ap-renglon__texto { flex: 1 1 240px; min-width: 0; }
.ap-renglon__nombre { margin: 0; color: var(--ap-titulo); font-family: var(--ap-revista); font-size: 1.2rem; font-weight: 400; }
.ap-renglon__descripcion { margin: 2px 0 0; font-size: .93rem; opacity: .8; }
.ap-renglon__precio { display: flex; flex-direction: column; margin: 0; text-align: right; line-height: 1.25; }
.ap-renglon__precio small { font-size: .82rem; opacity: .75; }
.ap-renglon .ap-quiero { margin-top: 0; }

/* ---------- Galería: la primera en grande ---------- */
@media (min-width: 700px) {
    .diseno-aparador #galeria > .contenedor > .galeria > li:first-child { grid-column: span 2; grid-row: span 2; }
}
.diseno-aparador .galeria__foto { border-radius: 0; }
.diseno-aparador #galeria h2,
.diseno-aparador #testimonios h2 { text-align: center; }

/* ---------- Lo demás: recto y limpio ---------- */
.diseno-aparador .promocion,
.diseno-aparador .testimonio,
.diseno-aparador .pregunta,
.diseno-aparador .contacto__item,
.diseno-aparador .sucursal,
.diseno-aparador .especial__punto,
.diseno-aparador .persona,
.diseno-aparador .destacado-tarjeta,
.diseno-aparador .mapa { border-radius: 0; }
.diseno-aparador .promocion { border: 0; }
.diseno-aparador .promocion__titulo { color: var(--ap-titulo); font-size: 1.5rem; }
.diseno-aparador .testimonio__texto { font-family: var(--ap-revista); font-size: 1.2rem; line-height: 1.45; }
.diseno-aparador .testimonio__iniciales,
.diseno-aparador .contacto__icono,
.diseno-aparador .especial__marca,
.diseno-aparador .persona__foto--iniciales { border-radius: 0; background: var(--ap-titulo); color: #fff; }
.diseno-aparador .pregunta__signo { border-radius: 0; background: var(--ap-tinte); }
.diseno-aparador .nosotros__foto img { border-radius: 0; }
.diseno-aparador .galeria__ver-mas,
.diseno-aparador .boton-chico { border-radius: 0; }
.diseno-aparador .horario__etiqueta { background: var(--ap-titulo); color: #fff; }

/* ---------- Pie y barra del celular ---------- */
.diseno-aparador .pie { background: var(--ap-titulo); color: rgba(255, 255, 255, .85); }
.diseno-aparador .barra-acciones { background: var(--ap-hueso); }
.diseno-aparador .barra-acciones__boton--principal { border-radius: 0; font-family: var(--ap-letra); }

/* ---------- Imagen generada con IA (7.j) ---------- */
/* Foto del mosaico marcada: va en su caja para que la nota quede encima */
.ap-mosaico__celda { min-height: 0; overflow: hidden; }
/* En el celular las fotos chicas del mosaico: nota más chica */
@media (max-width: 599.98px) {
    .ap-mosaico__celda > .marca-ia--foto { padding-inline: 6px; font-size: .62rem; }
}