/* ============================================================
   Sitioideal — Diseño «Esquina» (abarrotes, minisúper y tienditas) · paso 7.z.54a
   Va encima de sitio.css. Alegre y de barrio, como la tiendita de la esquina: la pared pintada de crema con su
   guardapolvo del color del negocio, el nombre rotulado con su sombra pintada del acento (Lilita One), lo escrito con
   plumón en Permanent Marker (los cartoncitos de «Hay…», los precios, los pies de foto) y el texto en Rubik,
   redondita y clara.
   La foto de portada se ve por la puerta de la tienda, con la cortina metálica a medio subir y una estrella
   fosforescente («¡Pásele!»). Los productos van parados en las repisas del anaquel, con el precio en cartoncitos
   fosforescentes (el más vendido, en una estrella); la galería, fotos pegadas en la pared con cinta canela.
   Cada título lleva abajo un brochazo del acento. El pie lleva arriba el guardapolvo.
   Los textos usan el color principal oscurecido para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/esquina/
   ============================================================ */

.diseno-esquina {
    --eq-rotulo: "Lilita One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
    --eq-plumon: "Permanent Marker", "Comic Sans MS", cursive;
    --eq-letra: "Rubik", "Nunito", system-ui, sans-serif;
    --eq-pared: color-mix(in srgb, var(--c-fondo) 35%, #FFF6E6);                    /* la pared pintada de crema */
    --eq-pared-2: color-mix(in srgb, var(--c-primario) 7%, #FFF8EE);
    --eq-blanco: #FFFFFF;
    --eq-tinta: color-mix(in srgb, var(--c-primario) 12%, #1F1B18);
    --eq-tinta-suave: color-mix(in srgb, var(--eq-tinta) 76%, transparent);
    --eq-principal: color-mix(in srgb, var(--c-primario) 85%, #000);
    --eq-principal-oscuro: color-mix(in srgb, var(--eq-principal) 72%, #000);
    --eq-suave: color-mix(in srgb, var(--c-primario) 12%, #FFFFFF);
    --eq-cinta: rgba(214, 186, 132, .82);                                             /* cinta canela */
    --eq-linea: color-mix(in srgb, var(--eq-tinta) 13%, transparent);
    --eq-linea-fuerte: color-mix(in srgb, var(--eq-tinta) 28%, transparent);
    --eq-sombra: 0 18px 30px -22px rgba(60, 40, 20, .55), 0 1px 2px rgba(60, 40, 20, .08);
    /* Los cartoncitos fosforescentes de los precios */
    --eq-fluor-1: #F4FF4F;
    --eq-fluor-2: #FF8FC7;
    --eq-fluor-3: #8DFF8A;
    --eq-fluor-4: #FFB347;
    --eq-negro: #161412;
    /* La repisa del anaquel: lámina pintada del color del negocio, con su filo de luz */
    --eq-repisa: linear-gradient(180deg, color-mix(in srgb, var(--eq-principal) 55%, #FFFFFF) 0 3px, var(--eq-principal) 3px 70%, var(--eq-principal-oscuro));
    /* El brochazo de abajo de los títulos */
    --eq-brochazo: radial-gradient(ellipse 52% 60% at 50% 50%, var(--c-acento) 96%, transparent 100%);

    /* Superficies (sitio.css) */
    --s-fondo: var(--eq-pared);
    --s-alterna: var(--eq-pared-2);
    --s-tarjeta: var(--eq-blanco);
    --s-tarjeta-alterna: var(--eq-blanco);
    --s-encabezado: var(--eq-pared);
    --s-texto: var(--eq-tinta);
    --s-titulo: var(--eq-tinta);
    --s-linea: var(--eq-linea);
    --s-linea-fuerte: var(--eq-linea-fuerte);

    background: var(--eq-pared);
    font-family: var(--eq-letra);
    font-size: 1.05rem;
}

/* Donde el navegador puede, cada color se ajusta solo lo necesario para leerse sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-esquina {
        --eq-principal: oklch(from var(--c-primario) min(l, .5) c h);
        --eq-tinta: oklch(from color-mix(in srgb, var(--c-primario) 12%, #1F1B18) min(l, .26) c h);
    }
}

/* Títulos rotulados */
.diseno-esquina h1,
.diseno-esquina h2,
.diseno-esquina h3,
.diseno-esquina h4,
.diseno-esquina .logo__nombre,
.diseno-esquina .especial__titulo,
.diseno-esquina .equipo__titulo,
.diseno-esquina .persona__nombre,
.diseno-esquina .promocion__titulo,
.diseno-esquina .servicio__nombre,
.diseno-esquina .sucursal__nombre,
.diseno-esquina .redes__titulo {
    font-family: var(--eq-rotulo);
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: .005em;
    overflow-wrap: anywhere;
}

/* ---------- Encabezado: la pared ---------- */
.diseno-esquina .encabezado {
    border-bottom: 1px solid var(--eq-linea);
    background: color-mix(in srgb, var(--eq-pared) 92%, transparent);
    backdrop-filter: saturate(1.1) blur(10px);
}
.diseno-esquina .logo__nombre { color: var(--eq-tinta); font-size: 1.5rem; }
.diseno-esquina .menu a { color: var(--eq-tinta); font-size: .95rem; font-weight: 700; }
.diseno-esquina .menu a:hover { color: var(--eq-principal); }

/* ---------- Botones: pintados, con su sombrita ---------- */
.diseno-esquina .boton {
    border-radius: 12px;
    font-family: var(--eq-letra);
    font-size: 1.02rem;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: .01em;
}
.diseno-esquina .boton--principal {
    border: 0;
    background: var(--eq-principal);
    color: #FFFFFF;
    box-shadow: 0 4px 0 var(--eq-principal-oscuro);
}
.diseno-esquina .boton--principal:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--eq-principal-oscuro); }
.diseno-esquina .boton--secundario {
    border: 2px solid var(--eq-tinta);
    background: var(--eq-blanco);
    color: var(--eq-tinta);
    box-shadow: 0 4px 0 var(--eq-linea-fuerte);
}
.diseno-esquina .boton--secundario:hover { border-color: var(--eq-principal); color: var(--eq-principal); }
.diseno-esquina .boton-chico { border-radius: 10px; }

/* ---------- Portada: la pared de la tienda con su puerta ---------- */
.eq-portada {
    position: relative;
    padding-top: clamp(34px, 5vw, 70px);
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px) 0 0 / 23px 23px,
        radial-gradient(circle at 70% 80%, rgba(120, 90, 50, .06) 0 1px, transparent 1.5px) 0 0 / 31px 31px,
        var(--eq-pared);
    color: var(--eq-tinta);
}
.eq-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 34px;
    padding-bottom: clamp(70px, 8vw, 104px);
}
@media (min-width: 900px) {
    .eq-portada__rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: end; gap: 56px; }
}

/* El giro en un letrerito pintado del acento */
.eq-giro {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 6px 16px 7px;
    border-radius: 6px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-family: var(--eq-rotulo);
    font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
    line-height: 1.15;
    transform: rotate(-2deg);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--c-acento) 70%, #000);
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
/* El nombre rotulado en la pared, con su sombra pintada */
.eq-portada__nombre {
    margin: 0 0 16px;
    color: var(--eq-principal);
    font-size: clamp(2.9rem, 1.4rem + 4.4vw, 5.2rem);
    line-height: .98;
    text-shadow: 3px 3px 0 var(--c-acento), 5px 5px 0 color-mix(in srgb, var(--eq-tinta) 25%, transparent);
    overflow-wrap: anywhere;
}
.eq-portada__nombre--medio { font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.3rem); }
.eq-portada__nombre--largo { font-size: clamp(2.1rem, 1.1rem + 2.9vw, 3.5rem); }

.eq-portada__eslogan {
    max-width: 40ch;
    margin: 0 0 26px;
    color: var(--eq-tinta-suave);
    font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem);
    line-height: 1.55;
}
.eq-portada__botones { margin-bottom: 22px; }
.diseno-esquina .estado-ahora--claro { border: 2px solid var(--eq-linea-fuerte); border-radius: 10px; background: var(--eq-blanco); box-shadow: none; }

/* Los cartoncitos de «Hay…», escritos con plumón y pegados con cinta */
.eq-carteles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
.eq-cartel {
    position: relative;
    max-width: 100%;
    padding: 10px 16px 9px;
    background: linear-gradient(180deg, #F3E4C6, #E8D3AC);
    color: var(--eq-negro);
    font-family: var(--eq-plumon);
    font-size: 1.12rem;
    line-height: 1.2;
    box-shadow: 0 8px 12px -10px rgba(70, 45, 20, .6);
    transform: rotate(-2deg);
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.eq-cartel:nth-child(2) { transform: rotate(1.5deg); }
.eq-cartel:nth-child(3) { transform: rotate(-.5deg); }
.eq-cartel::before {   /* el pedazo de cinta */
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 44px;
    height: 15px;
    margin-left: -22px;
    background: var(--eq-cinta);
    clip-path: polygon(3% 0, 97% 8%, 100% 100%, 0 90%);
}

/* La puerta de la tienda: marco pintado del color del negocio, la foto adentro y la cortina metálica a medio subir */
.eq-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 440px);
}
.eq-puerta {
    position: relative;
    padding: 16px 16px 0;
    border-radius: 8px 8px 0 0;
    background: var(--eq-principal);
    box-shadow: inset 0 0 0 3px var(--eq-principal-oscuro), 0 24px 34px -24px rgba(60, 30, 10, .7);
}
.eq-puerta__vano {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
    background: var(--eq-suave);
    box-shadow: inset 0 0 0 3px var(--eq-principal-oscuro);
}
.eq-puerta__vano picture,
.eq-puerta__vano picture img { display: block; width: 100%; height: 100%; }
.eq-puerta__vano picture img { object-fit: cover; }
/* La nota de IA abajo de la foto, lejos de la cortina */
.eq-puerta__vano > .marca-ia--foto { top: auto; bottom: 10px; }
.eq-puerta--inicial .eq-puerta__vano {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(180deg, transparent 0 64px, color-mix(in srgb, var(--eq-principal) 30%, transparent) 64px 70px),
        var(--eq-suave);
}
.eq-puerta__inicial { position: relative; top: 14%; color: var(--eq-principal); font-family: var(--eq-rotulo); font-size: clamp(5rem, 3.5rem + 5vw, 8rem); line-height: 1; }

/* La cortina metálica: lámina ondulada con su jaladera; sube al abrir la página */
.eq-cortina {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 26%;
    background:
        linear-gradient(180deg, transparent calc(100% - 14px), #6F777E calc(100% - 14px) calc(100% - 11px), #B8BFC5 calc(100% - 11px) calc(100% - 3px), #5E666D calc(100% - 3px)),
        repeating-linear-gradient(180deg, #DDE2E6 0 5px, #B3BBC2 5px 9px, #EEF1F3 9px 11px, #A3ABB2 11px 13px);
    box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .35);
    animation: eq-subir 1.6s cubic-bezier(.3, .7, .3, 1) .25s both;
}
.eq-cortina::after {   /* la jaladera */
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 46px;
    height: 10px;
    margin-left: -23px;
    border: 3px solid #555D64;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
    transform: translateY(100%);
}
@keyframes eq-subir {
    from { height: 88%; }
    to   { height: 26%; }
}
@media (prefers-reduced-motion: reduce) {
    .eq-cortina { animation: none; }
}

/* La estrella fosforescente de «¡Pásele!» */
.eq-pasele {
    position: absolute;
    right: -18px;
    bottom: 22%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 112px;
    aspect-ratio: 1;
    background: var(--eq-fluor-1);
    color: var(--eq-negro);
    font-family: var(--eq-plumon);
    font-size: 1.12rem;
    line-height: 1;
    text-align: center;
    clip-path: polygon(50% 0, 58.7% 12%, 71.7% 5%, 74.3% 19.5%, 89.1% 18.8%, 85.1% 33.1%, 98.7% 38.9%, 89% 50%, 98.7% 61.1%, 85.1% 66.9%, 89.1% 81.2%,
                       74.3% 80.5%, 71.7% 95%, 58.7% 88%, 50% 100%, 41.3% 88%, 28.3% 95%, 25.7% 80.5%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 11% 50%,
                       1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 25.7% 19.5%, 28.3% 5%, 41.3% 12%);
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25));
    transform: rotate(-12deg);
}

/* El guardapolvo: la parte de abajo de la pared, pintada del color del negocio con su raya del acento */
.eq-guardapolvo {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: clamp(44px, 5vw, 62px);
    border-top: 6px solid var(--c-acento);
    background: var(--eq-principal);
    pointer-events: none;
}

@media (max-width: 899.98px) {
    .eq-portada__visual { width: min(100%, 380px); }
}
@media (max-width: 599.98px) {
    .eq-portada__visual { width: min(88%, 320px); }
    .eq-puerta { padding: 12px 12px 0; }
    .eq-pasele { right: -14px; width: 92px; font-size: .96rem; }
    .eq-cartel { font-size: 1rem; }
}

/* ---------- Títulos de sección: con su brochazo del acento abajo ---------- */
.diseno-esquina .seccion h2 {
    color: var(--eq-tinta);
    font-size: clamp(2.2rem, 1.6rem + 1.9vw, 3.1rem);
    line-height: 1.04;
}
.diseno-esquina .seccion h2::after {
    content: "";
    display: block;
    width: 96px;
    height: 12px;
    margin-top: 12px;
    border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
    background: var(--c-acento);
    transform: rotate(-2deg);
}
.diseno-esquina .seccion [style*="text-align: center"] h2::after,
.diseno-esquina .seccion .centrado h2::after { margin-inline: auto; }

.eq-cabeza { margin-bottom: 26px; }
.eq-cabeza h2 { margin: 0 !important; }
.eq-antetitulo {
    margin: 0 0 4px;
    color: var(--eq-principal);
    font-family: var(--eq-plumon);
    font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
    line-height: 1.2;
}

/* ---------- Productos: en las repisas del anaquel ---------- */
.diseno-esquina .catalogo__indice a {
    border: 2px solid var(--eq-linea-fuerte);
    border-radius: 10px;
    background: var(--eq-blanco);
    color: var(--eq-tinta);
    font-weight: 700;
    white-space: nowrap;
}
.diseno-esquina .catalogo__indice a:hover { border-color: var(--eq-principal); color: var(--eq-principal); }

.eq-grupo + .eq-grupo { margin-top: 54px; }
/* El nombre del grupo en un letrerito pintado */
.eq-grupo__nombre {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 6px 18px 6px 8px;
    border-radius: 999px 12px 12px 999px;
    background: var(--eq-principal);
    color: #FFFFFF;
    font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
    line-height: 1.15;
    box-sizing: border-box;
}
.eq-grupo__nombre .icono {
    flex: none;
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 50%;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    stroke-width: 1.9;
    box-sizing: border-box;
}
.eq-grupo__descripcion { max-width: 64ch; margin: 0 0 4px; color: var(--eq-tinta-suave); }

.eq-productos {
    isolation: isolate;   /* las repisas van detrás de cada producto, pero encima del fondo */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 14px;
    margin: 22px 0 0;
    padding: 0 0 16px;
    list-style: none;
}
@media (min-width: 700px) {
    .eq-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 22px; }
}
@media (min-width: 1100px) {
    .eq-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.eq-producto {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--eq-linea);
    border-radius: 12px;
    background: var(--eq-blanco);
    box-shadow: 0 10px 14px -12px rgba(60, 40, 20, .5);
    color: var(--eq-tinta);
}
/* La repisa donde va parado: se junta con la de al lado */
.eq-producto::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -16px;
    left: -8px;
    z-index: -1;
    height: 14px;
    border-radius: 2px;
    background: var(--eq-repisa);
    box-shadow: 0 8px 10px -6px rgba(40, 20, 10, .45);
}
@media (min-width: 700px) {
    .eq-producto::after { right: -12px; left: -12px; }
}
.eq-producto--vendido { border-color: color-mix(in srgb, var(--c-acento) 70%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-acento) 60%, transparent), 0 10px 14px -12px rgba(60, 40, 20, .5); }

.eq-producto__marco { position: relative; margin: 8px 8px 0; }
.eq-producto__foto {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: var(--eq-suave);
}
.eq-producto__foto img { width: 100%; height: 100%; object-fit: cover; }
/* 7.z.54e: la nota de IA arriba (abajo va el cartoncito del precio); con «El más vendido», debajo de él */
.eq-producto__foto > .marca-ia--foto { top: 8px; bottom: auto; }
.eq-producto--vendido .eq-producto__foto > .marca-ia--foto { top: 42px; }
/* Sin foto: el dibujo de su grupo, como caja en el anaquel */
.eq-producto__foto--dibujo {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--c-primario) 7%, transparent) 14px 28px),
        var(--eq-suave);
    color: var(--eq-principal);
}
.eq-producto__foto--dibujo .icono {
    width: 64px;
    height: 64px;
    padding: 14px;
    border-radius: 50%;
    background: var(--eq-blanco);
    stroke-width: 1.6;
    box-shadow: 0 8px 14px -10px rgba(60, 40, 20, .5);
    box-sizing: border-box;
}

/* «El más vendido», pintado del acento */
.eq-producto__vendido {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    max-width: calc(100% - 16px);
    padding: 4px 10px 5px;
    border-radius: 6px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-family: var(--eq-rotulo);
    font-size: .92rem;
    line-height: 1.1;
    transform: rotate(-3deg);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--c-acento) 70%, #000);
    box-sizing: border-box;
}

/* El precio escrito con plumón en un cartoncito fosforescente */
.eq-precio {
    position: absolute;
    right: -6px;
    bottom: -14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 6px 12px 7px;
    background: var(--eq-fluor-1);
    color: var(--eq-negro);
    line-height: 1;
    box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .45);
    transform: rotate(3deg);
}
.eq-precio--2 { background: var(--eq-fluor-2); transform: rotate(-2deg); }
.eq-precio--3 { background: var(--eq-fluor-3); transform: rotate(2deg); }
.eq-precio--4 { background: var(--eq-fluor-4); transform: rotate(-3deg); }
.eq-precio small { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eq-precio strong { font-family: var(--eq-plumon); font-size: 1.45rem; font-weight: 400; white-space: nowrap; font-variant-numeric: lining-nums; }
/* El más vendido: en una estrella */
.eq-precio--estrella {
    right: -16px;
    bottom: -26px;
    justify-content: center;
    width: 98px;
    aspect-ratio: 1;
    padding: 0;
    background: var(--eq-fluor-1);
    clip-path: polygon(50% 0, 58.7% 12%, 71.7% 5%, 74.3% 19.5%, 89.1% 18.8%, 85.1% 33.1%, 98.7% 38.9%, 89% 50%, 98.7% 61.1%, 85.1% 66.9%, 89.1% 81.2%,
                       74.3% 80.5%, 71.7% 95%, 58.7% 88%, 50% 100%, 41.3% 88%, 28.3% 95%, 25.7% 80.5%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 11% 50%,
                       1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 25.7% 19.5%, 28.3% 5%, 41.3% 12%);
    box-shadow: none;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3));
    transform: rotate(-8deg);
}
.eq-precio--estrella strong { font-size: 1.35rem; }

.eq-producto__cuerpo { flex: 1; padding: 20px 14px 0; }
.eq-producto__nombre { margin: 0 0 4px; color: var(--eq-tinta); font-family: var(--eq-letra) !important; font-size: 1.08rem !important; font-weight: 700 !important; line-height: 1.25; overflow-wrap: anywhere; }
.eq-producto__descripcion { margin: 0; color: var(--eq-tinta-suave); font-size: .92rem; line-height: 1.45; }
.eq-producto__nota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 4px 10px 4px 7px;
    border-radius: 8px;
    background: var(--eq-suave);
    color: var(--eq-principal);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.3;
    box-sizing: border-box;
}
.eq-producto__nota .icono { flex: none; width: 16px; height: 16px; }
.diseno-esquina .eq-producto .ficha-ver { margin-top: 8px; color: var(--eq-principal); }

.eq-pedir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 10px 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--eq-principal);
    color: #FFFFFF;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--eq-principal-oscuro);
    white-space: nowrap;
}
.eq-pedir .icono { width: 17px; height: 17px; }
.eq-pedir:hover { background: var(--eq-principal-oscuro); }

@media (max-width: 599.98px) {
    .eq-producto__cuerpo { padding: 18px 10px 0; }
    .eq-producto__nombre { font-size: 1rem !important; }
    .eq-producto__descripcion { font-size: .86rem; }
    .eq-precio { right: -4px; padding: 5px 9px 6px; }
    .eq-precio strong { font-size: 1.22rem; }
    .eq-precio--estrella { right: -8px; width: 84px; }
    .eq-precio--estrella strong { font-size: 1.12rem; }
    .eq-producto__vendido { font-size: .8rem; }
    /* 7.z.54e: la nota de IA en un renglón; con «El más vendido», la estrella del precio un poco más chica para que no la toque */
    .eq-producto__foto > .marca-ia--foto { padding: 2px 6px; font-size: .62rem; }
    .eq-producto--vendido .eq-producto__foto > .marca-ia--foto { top: 37px; }
    .eq-producto--vendido:has(.marca-ia) .eq-precio--estrella { bottom: -28px; width: 72px; }
    .eq-producto--vendido:has(.marca-ia) .eq-precio--estrella strong { font-size: 1rem; }
}

/* ---------- Galería: fotos pegadas en la pared con cinta canela ---------- */
.eq-fotos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 16px;
    margin: 0;
    padding: 10px 0 0;
    list-style: none;
}
@media (min-width: 700px) {
    .eq-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 26px; }
}
@media (min-width: 1000px) {
    .eq-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeria__mas > .eq-fotos { margin-top: 26px; }

.eq-foto { position: relative; transform: rotate(-1.6deg); }
.eq-foto:nth-child(2n) { transform: rotate(1.4deg); }
.eq-foto:nth-child(3n) { transform: rotate(-.6deg); }
.eq-foto::before {   /* el pedazo de cinta canela */
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 2;
    width: 70px;
    height: 22px;
    margin-left: -35px;
    background: var(--eq-cinta);
    clip-path: polygon(2% 6%, 98% 0, 100% 92%, 0 100%);
    pointer-events: none;
}
.diseno-esquina .eq-foto__enlace {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    padding: 9px 9px 12px;
    border-radius: 2px;
    background: var(--eq-blanco);
    color: var(--eq-negro);
    text-decoration: none;
    box-shadow: var(--eq-sombra);
}
.diseno-esquina .eq-foto__enlace img { aspect-ratio: auto; transform: none; }
.eq-foto__imagen {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--eq-suave);
}
.eq-foto__imagen img { width: 100%; height: 100%; object-fit: cover; transition: scale .35s ease; }
.eq-foto__enlace:hover .eq-foto__imagen img { scale: 1.04; }
.eq-foto__pie {
    color: var(--eq-negro);
    font-family: var(--eq-plumon);
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}
@media (max-width: 599.98px) {
    .diseno-esquina .eq-foto__enlace { padding: 6px 6px 9px; }
    .eq-foto__pie { font-size: .92rem; }
    .eq-foto::before { width: 54px; margin-left: -27px; }
}
@media (prefers-reduced-motion: reduce) {
    .eq-foto__imagen img { transition: none; }
    .eq-foto__enlace:hover .eq-foto__imagen img { scale: none; }
}
.diseno-esquina .galeria__ver-mas { border-radius: 10px; }

/* ---------- Lo demás: tarjetas blancas, de esquinas suaves ---------- */
.diseno-esquina .testimonio,
.diseno-esquina .promocion,
.diseno-esquina .pregunta,
.diseno-esquina .contacto__item,
.diseno-esquina .sucursal,
.diseno-esquina .especial__punto,
.diseno-esquina .persona,
.diseno-esquina .servicio,
.diseno-esquina .destacado-tarjeta { border-color: var(--eq-linea); border-radius: 14px; box-shadow: var(--eq-sombra); }
.diseno-esquina .promocion__foto { border-radius: 10px; }
.diseno-esquina .promocion__hoy { border-radius: 6px; background: var(--c-acento); color: var(--c-sobre-acento); }
.diseno-esquina .testimonio__texto { font-size: 1.04rem; line-height: 1.6; }
.diseno-esquina .testimonio__nombre { font-family: var(--eq-plumon); font-size: 1.1rem; font-weight: 400; }
.diseno-esquina .testimonio > .icono { color: var(--eq-principal); opacity: .3; }
.diseno-esquina .testimonio__iniciales,
.diseno-esquina .contacto__icono,
.diseno-esquina .especial__marca,
.diseno-esquina .persona__foto--iniciales,
.diseno-esquina .pregunta__signo { background: var(--eq-suave); color: var(--eq-principal); }
/* La foto de Nosotros pegada en la pared */
.diseno-esquina .nosotros__foto img { border: 9px solid var(--eq-blanco); border-radius: 2px; box-shadow: var(--eq-sombra); transform: rotate(-1deg); }
.diseno-esquina .nosotros__desde { border: 2px solid var(--eq-linea); border-radius: 10px; background: var(--eq-blanco); color: var(--eq-tinta); }
.diseno-esquina .nosotros__desde strong,
.diseno-esquina .nosotros__desde .icono { color: var(--eq-principal); }
.diseno-esquina .mapa { border: 1px solid var(--eq-linea); border-radius: 14px; box-shadow: var(--eq-sombra); }
.diseno-esquina .red { border-color: var(--eq-linea-fuerte); border-radius: 10px; }
.diseno-esquina .red:hover { background: var(--eq-pared-2); }

/* El horario en una tarjeta, con el día de hoy marcado */
.diseno-esquina .horario__tabla { overflow: hidden; border: 1px solid var(--eq-linea); border-collapse: separate; border-spacing: 0; border-radius: 14px; background: var(--eq-blanco); }
.diseno-esquina .horario__tabla th,
.diseno-esquina .horario__tabla td { padding-inline: 18px; border-bottom-color: var(--eq-linea); }
.diseno-esquina .horario__tabla td { font-variant-numeric: tabular-nums; }
.diseno-esquina .horario__tabla tr:last-child th,
.diseno-esquina .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-esquina .horario__hoy th,
.diseno-esquina .horario__hoy td { background: var(--eq-pared-2); }
.diseno-esquina .horario__etiqueta { border-radius: 6px; background: var(--eq-principal); color: #FFFFFF; }

/* ---------- Pie con el guardapolvo arriba y barra del celular ---------- */
.diseno-esquina .pie { position: relative; margin-top: 26px; border-top: 8px solid var(--c-acento); background: var(--eq-tinta); color: rgba(255, 246, 230, .86); }
.diseno-esquina .pie::before {
    content: "";
    position: absolute;
    top: -22px;
    right: 0;
    left: 0;
    height: 14px;
    background: var(--eq-principal);
    pointer-events: none;
}
.diseno-esquina .barra-acciones { background: color-mix(in srgb, var(--eq-pared) 96%, transparent); backdrop-filter: blur(10px); }
.diseno-esquina .barra-acciones__boton--principal { border-radius: 12px; font-weight: 700; }