/* ==========================================================
   TIENDA — rediseño "papelería" (header, menú, portada, footer).
   Basado en el diseño de la tienda de referencia (proyecto ecommerce):
   fondo marfil, azul noche para texto y bloques oscuros, rosa como
   acento de compra y turquesa como acento secundario; Baloo 2 para
   títulos y Work Sans para texto.

   CSS plano (sin Tailwind) a propósito: no hay que recompilar
   assets/dist/app.css. Todos los colores salen de --color-yolotl-*, así
   que las demás paletas de /admin/zonas (y los temas de temporada)
   siguen funcionando igual — la paleta "papeleria" de abajo es la que da
   exactamente los colores y fuentes de la referencia.

   OJO: las utilidades de Tailwind v4 viven en un @layer, que SIEMPRE
   pierde contra CSS sin capa como este. Por eso aquí nunca se define
   `display` en elementos que se ocultan/muestran con clases responsivas
   (hidden sm:flex, etc.) — eso lo deciden las clases del HTML.
   ========================================================== */

/* ---------- Paleta "Papelería" (seleccionable en /admin/zonas) ---------- */
[data-marca="papeleria"] {
    --color-yolotl-orange: #D6336C;
    --color-yolotl-orange-light: #E3638F;
    --color-yolotl-orange-dark: #A82753;
    --color-yolotl-red: #D6336C;
    --color-yolotl-red-light: #E3638F;
    --color-yolotl-gold: #F2A93B;
    --color-yolotl-gold-light: #F7C97E;
    --color-yolotl-noche: #2E2A47;
    --color-yolotl-cream: #FFFDF9;
    --color-yolotl-barro: #8A4B32;
    --color-yolotl-papel: #FFF1E6;
    --color-yolotl-talavera: #087F7F; /* antes #0CA0A0: blanco encima solo daba 3.2 de contraste */
    --color-yolotl-talavera-light: #3DBDBD;
    --color-yolotl-fiesta: #D6336C;
    --color-yolotl-fiesta-light: #E3638F;
    --color-yolotl-fiesta-dark: #A82753;
    --color-yolotl-ciruela: #3B3560;
    --color-yolotl-violeta: #087F7F;
    --color-yolotl-violeta-light: #3DBDBD;
    --color-yolotl-violeta-dark: #065F5F;
    --color-yolotl-arena: #EFE6F7;
    --color-yolotl-gris: #6E6785;

    --font-playfair: 'Baloo 2', 'Work Sans', sans-serif;
    --font-inter: 'Work Sans', system-ui, sans-serif;
    --font-fun: 'Baloo 2', sans-serif;
}

/* Tokens propios del rediseño, derivados de la paleta activa. */
:root {
    --st-ink: var(--color-yolotl-noche);
    --st-ink-2: var(--color-yolotl-gris);
    --st-accent: var(--color-yolotl-fiesta);
    --st-accent-dk: var(--color-yolotl-fiesta-dark);
    --st-accent-tint: color-mix(in srgb, var(--color-yolotl-fiesta) 16%, #fff);
    --st-teal: var(--color-yolotl-talavera);
    --st-teal-dk: color-mix(in srgb, var(--color-yolotl-talavera) 78%, #000);
    --st-teal-tint: color-mix(in srgb, var(--color-yolotl-talavera) 16%, #fff);
    --st-peach: color-mix(in srgb, var(--color-yolotl-papel) 75%, var(--color-yolotl-fiesta) 6%);
    --st-line: color-mix(in srgb, var(--color-yolotl-noche) 10%, transparent);
    --st-surface: #fff;
    --st-radius: 16px;
}

body {
    font-family: var(--font-inter);
    overflow-x: clip;
}

h1, h2, h3, h4 { letter-spacing: 0; }

/* ==========================================================
   HEADER
   ========================================================== */
.st-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-yolotl-cream);
    border-bottom: 1px solid var(--st-line);
}

.st-header-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
}

.st-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--st-ink);
}

.st-logo-mark {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-accent);
    font-size: 30px;
    line-height: 1;
    transition: transform .3s ease;
}
.st-logo-mark::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-teal);
}
.st-logo:hover .st-logo-mark { transform: rotate(-8deg) scale(1.06); }

.st-logo-name {
    display: block;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--st-ink);
}
.st-logo-name small {
    font-size: .62em;
    font-weight: 600;
    color: var(--st-accent);
}
/* Sin `display` propio: el HTML alterna "block lg:hidden" / "hidden lg:block". */
.st-logo-tag {
    margin-top: 4px;
    font: 600 10.5px/1.1 var(--font-inter);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--st-teal);
}

.st-status {
    align-items: center;
    gap: 6px;
    font: 600 11px/1 var(--font-inter);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.st-status.is-open  { background: color-mix(in srgb, #16a34a 12%, #fff); color: #15803d; }
.st-status.is-closed { background: color-mix(in srgb, var(--st-ink) 6%, #fff); color: var(--st-ink-2); }
.st-status i { font-size: 7px; }

/* Buscador: campo redondeado + botón cuadrado de color pegado a la derecha */
.st-search {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}
.st-search input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 18px 0 22px;
    font: 400 14px/1 var(--font-inter);
    color: var(--st-ink);
    background: #fff;
    border: 1px solid var(--st-line);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.st-search input::placeholder { color: color-mix(in srgb, var(--st-ink-2) 80%, #fff); }
.st-search input:focus { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-tint); }
.st-search button {
    width: 54px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-accent);
    color: #fff;
    font-size: 17px;
    border: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background .2s ease;
}
.st-search button:hover { background: var(--st-accent-dk); }
/* Comparte la clase .search-bar con el autocompletado de main.php
   (renderSearchSuggestions busca ese contenedor) — se anulan aquí sus
   estilos viejos de buscador redondo con ícono. */
.st-search.search-bar { max-width: none; }
.st-search.search-bar input { border-width: 1px; border-right-width: 0; }
.st-search .search-suggestions { top: 100%; }
.st-search-wrap { flex: 1; min-width: 0; max-width: 640px; }

.st-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

.st-textlink {
    font: 700 13.5px/1 var(--font-inter);
    color: var(--st-ink);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: color .2s ease;
}
.st-textlink:hover { color: var(--st-accent); }

.st-btn {
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font: 700 14px/1 var(--font-inter);
    color: #fff;
    background: var(--st-accent);
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--st-accent) 30%, transparent);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.st-btn:hover { background: var(--st-accent-dk); transform: translateY(-1px); color: #fff; }
.st-btn--square { border-radius: 4px; box-shadow: none; }
.st-btn--ghost { background: #fff; color: var(--st-accent-dk); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.st-btn--ghost:hover { background: #fff; color: var(--st-accent); }

.st-iconbtn {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: var(--st-ink);
    border: 1px solid var(--st-line);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s ease, color .2s ease;
}
.st-iconbtn:hover { border-color: var(--st-accent); color: var(--st-accent); }
.st-iconbtn .st-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--st-accent);
    color: #fff;
    font: 700 11px/1 var(--font-inter);
    box-shadow: 0 0 0 2px #fff;
}

.st-logo-tag.is-open { color: #15803d; }
.st-logo-tag.is-closed { color: var(--st-ink-2); }
.st-logo-tag.is-closed i { color: var(--color-yolotl-gold); } /* aviso, no "apagado" */
.st-logo-tag i { font-size: 6px; vertical-align: middle; margin-right: 2px; }

.st-off {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--st-accent-tint);
    color: var(--st-accent-dk);
    font: 800 10px/1 var(--font-inter);
}

.st-userbtn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: #fff;
    color: var(--st-ink);
    font: 600 13.5px/1 var(--font-inter);
    cursor: pointer;
    transition: border-color .2s ease;
}
.st-userbtn:hover { border-color: var(--st-accent); }
.st-userbtn i { font-size: 11px; color: var(--st-ink-2); }
.st-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--st-accent);
}

/* Barra móvil: acciones de invitado en una fila */
.st-mobile-actions {
    gap: 8px;
    padding-bottom: 12px;
}
.st-mobile-actions > * {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border-radius: 999px;
    font: 700 12.5px/1 var(--font-inter);
    text-decoration: none;
    border: 1px solid var(--st-line);
    background: #fff;
    color: var(--st-ink);
    cursor: pointer;
}
.st-mobile-actions > .is-accent { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }

@media (max-width: 767px) {
    .st-header-row { gap: 12px; padding: 10px 0; }
    .st-logo-name { font-size: 21px; }
    .st-search input, .st-search button { height: 44px; }
    /* El logo cede espacio (antes "Abierto ahora · …" empujaba el
       carrito fuera de la pantalla) */
    .st-logo { flex-shrink: 1; min-width: 0; }
    .st-logo > span:not(.st-logo-mark) { min-width: 0; }
    .st-logo-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .03em; }
    .st-actions { gap: 10px; }
}
/* Celular: el avatar es un círculo del tamaño del botón del carrito
   (sin la píldora con borde alrededor, que se veía como doble aro) */
@media (max-width: 639px) {
    .st-userbtn { width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; background: transparent; }
    .st-userbtn .st-avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--st-accent); }
}
@media (max-width: 359px) {
    .st-logo-tag, .st-logo-name small { display: none; }
}

/* ==========================================================
   MENÚ DE CATEGORÍAS (texto centrado, subrayado activo)
   ========================================================== */
.st-nav {
    background: var(--color-yolotl-cream);
    border-bottom: 1px solid var(--st-line);
}
.st-nav-track {
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.st-nav-track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
    .st-nav-track { justify-content: center; }
}
.st-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 14px;
    font: 600 14px/1 var(--font-inter);
    letter-spacing: .01em;
    color: var(--st-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.st-nav-link i { font-size: 13px; opacity: .55; }
.st-nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--st-accent);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.st-nav-link:hover, .st-nav-link.active { color: var(--st-accent); }
.st-nav-link:hover::after, .st-nav-link.active::after { transform: scaleX(1); }
.st-nav-link.active i, .st-nav-link:hover i { opacity: 1; }
.st-nav-link.is-ofertas { color: var(--st-accent); }
.st-nav-link.is-borrador { outline: 2px dashed #f59e0b; outline-offset: -6px; opacity: .8; }

/* ==========================================================
   UTILIDADES DE PORTADA
   ========================================================== */
/* Rompe el .container del <main> para bandas de lado a lado. */
.st-bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.st-wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}
.st-home-top { margin-top: -1.5rem; }

.st-eyebrow {
    display: inline-block;
    font: 800 11px/1 var(--font-inter);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.st-pill {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--st-accent-tint);
    color: var(--st-accent-dk);
    font: 800 11px/1 var(--font-inter);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ==========================================================
   HERO (partido: panel oscuro de texto + panel turquesa)
   ========================================================== */
.st-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--st-ink);
    overflow: hidden;
}
@media (min-width: 900px) {
    .st-hero { grid-template-columns: 1.15fr 1fr; min-height: 460px; }
}

.st-hero-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 24px;
    color: #fff;
}
@media (min-width: 900px) {
    .st-hero-main { padding: 64px 48px 64px max(24px, calc((100vw - 1180px) / 2 + 16px)); }
}
.st-hero-main .st-eyebrow { color: color-mix(in srgb, var(--st-accent) 35%, #fff); margin-bottom: 18px; }
.st-hero-title {
    font-family: var(--font-playfair);
    font-weight: 600;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    color: #fff;
    margin: 0;
}
.st-hero-big {
    display: block;
    margin-top: 10px;
    font-family: var(--font-playfair);
    font-weight: 800;
    font-size: clamp(34px, 5.4vw, 58px);
    line-height: 1.05;
    color: color-mix(in srgb, var(--st-accent) 28%, #fff);
}
.st-hero-text {
    max-width: 440px;
    margin: 20px 0 0;
    font: 400 16px/1.6 var(--font-inter);
    color: rgba(255,255,255,.82);
}
.st-hero-quote {
    max-width: 460px;
    margin: 14px 0 0;
    font: italic 500 14.5px/1.55 var(--font-inter);
    color: rgba(255,255,255,.6);
}
.st-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.st-hero-ctas .st-btn { display: inline-flex; }
.st-hero-ctas .st-btn--outline {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.35);
    box-shadow: none;
}
.st-hero-ctas .st-btn--outline:hover { background: rgba(255,255,255,.08); border-color: #fff; }

.st-hero-side {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, var(--st-teal), var(--st-teal-dk));
    overflow: hidden;
}
.st-hero-side::before,
.st-hero-side::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.st-hero-side::before { width: 340px; height: 340px; top: -110px; right: -90px; }
.st-hero-side::after { width: 200px; height: 200px; bottom: -70px; left: -40px; }
.st-hero-art { position: relative; z-index: 1; width: min(420px, 100%); height: auto; }

/* Tarjeta "Oferta del día" dentro del panel turquesa */
.st-deal {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 16px;
    align-items: center;
    width: min(420px, 100%);
    padding: 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    color: var(--st-ink);
    text-decoration: none;
}
.st-deal-img {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: cover;
    background: var(--st-peach);
}
.st-deal .st-eyebrow { color: var(--st-ink-2); font-size: 10px; }
.st-deal-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 6px 0 8px;
    font: 700 15px/1.3 var(--font-inter);
}
.st-deal-price { font: 800 22px/1 var(--font-inter); color: var(--st-accent); }
.st-deal-price del { font-size: 13px; font-weight: 400; color: var(--st-ink-2); margin-right: 6px; }
.st-deal-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 700 12.5px/1 var(--font-inter); color: var(--st-teal-dk); }

/* Slider de banners (/admin/banners) con el mismo diseño partido */
.st-slider { position: relative; overflow: hidden; background: var(--st-ink); }
.st-slides { display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.st-slide { min-width: 100%; }
/* Foto del banner COMPLETA en cualquier pantalla (antes "cover" le
   cortaba los precios y los bordes, sobre todo en el celular). Encima
   va la foto entera (::after, contain); detrás, la misma foto borrosa
   (::before) rellena lo que sobre, para que no queden franjas lisas. */
.st-slide .st-hero-side.has-img { background: var(--st-ink); padding: 0; }
.st-slide .st-hero-side.has-img::before,
.st-slide .st-hero-side.has-img::after {
    width: auto; height: auto;
    border-radius: 0;
}
.st-slide .st-hero-side.has-img::before {
    inset: -40px;
    background: var(--banner-img) center / cover no-repeat;
    filter: blur(28px) brightness(.7) saturate(1.2);
}
.st-slide .st-hero-side.has-img::after {
    inset: 0;
    background: var(--banner-img) center / contain no-repeat;
}
/* Celular y tablet (banner en una columna): la caja toma la forma de la
   imagen (1600×1000), así se ve entera y sin relleno. */
@media (max-width: 899px) {
    .st-slide .st-hero-side.has-img { min-height: 0; aspect-ratio: 16 / 10; }
}
.st-slider-nav {
    position: absolute;
    left: max(24px, calc((100vw - 1180px) / 2 + 16px));
    bottom: 22px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.st-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.st-slider-dot.on { width: 26px; background: var(--st-accent); }
.st-slider-arrow {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.3);
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-slider-arrow:hover { background: rgba(255,255,255,.1); }
/* Celular: los botones flotantes de WhatsApp (izq.) y carrito (der.) tapaban
   los puntos y flechas del slider — se centran entre los dos y las flechas
   crecen a un tamaño cómodo para el dedo. */
@media (max-width: 767px) {
    .st-slider-nav { left: 50%; transform: translateX(-50%); bottom: 26px; }
    .st-slider-arrow { width: 40px; height: 40px; }
}

/* Celular: el banner se compacta para que el mostrador (abajo) asome en la
   primera pantalla — antes el banner solo ocupaba toda la vista. */
@media (max-width: 639px) {
    .st-slider .st-hero-main { padding: 22px 20px 20px; }
    .st-slider .st-hero-main .st-eyebrow { margin-bottom: 8px; }
    .st-slider .st-hero-title { font-size: 22px; }
    .st-slider .st-hero-big { font-size: 28px; margin-top: 4px; }
    /* Título + botón bastan; la descripción larga se queda para pantallas grandes. */
    .st-slider .st-hero-text { display: none; }
    .st-slider .st-hero-ctas { margin-top: 14px; }
    .st-slider .st-hero-ctas .st-btn { padding-top: 10px; padding-bottom: 10px; }
    .st-slide .st-hero-side { min-height: 132px; padding: 0; }
    .st-slider-nav { bottom: 14px; }
}

/* ==========================================================
   EL MOSTRADOR: lo más vendido colgado como etiquetas de precio
   de papelería (esquinas cortadas, ojillo e hilo) de una varilla
   dorada, sobre un tablero rosa palo (el del logo). La franja dorada de
   arriba lo separa del banner rosa. El <li> lleva el hilo y la
   sombra; .st-etiqueta-carton lleva el recorte (clip-path recortaría
   el hilo si estuviera en el mismo elemento).
   ========================================================== */
.st-mostrador {
    /* Rosa palo del corazón del logo: queda claro entre el banner morado
       de arriba y la franja morada de temporada de abajo (antes era
       turquesa, el único color fuera de la paleta de la tienda). */
    --tablero: #FBE4EB;
    --tablero-tinta: var(--st-ink);     /* texto sobre el tablero: ≈ 12:1 */
    --varilla: var(--color-yolotl-gold);
    position: relative;
    background-color: var(--tablero);
    /* Tablero perforado: hileras de agujeros alternadas. */
    background-image:
        radial-gradient(circle, rgba(214,51,108,.13) 1.7px, transparent 2.3px),
        radial-gradient(circle, rgba(255,255,255,.75) 1.7px, transparent 2.3px);
    background-size: 22px 22px, 22px 22px;
    background-position: 0 0, 11px 11px;
    border-top: 6px solid var(--color-yolotl-gold);
    padding: 22px 0 20px;
    color: var(--tablero-tinta);
}
.st-mostrador-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.st-mostrador-head h2 {
    margin: 0;
    font: 800 24px/1.1 var(--font-playfair);
    color: var(--tablero-tinta);
}
.st-mostrador-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.st-mostrador-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--st-ink);     /* blanco sobre morado noche ≈ 13:1 */
    color: #fff;
    font: 700 12.5px/1.25 var(--font-inter);
}
.st-mostrador-pill.is-promesa { background: var(--color-yolotl-gold); color: var(--st-ink); }
.st-mostrador-flechas { display: none; gap: 8px; flex-shrink: 0; }
.st-mostrador-flechas button {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--st-ink);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(46,42,71,.18);
}
.st-mostrador-flechas button:hover { background: var(--color-yolotl-gold); color: var(--st-ink); }
.st-mostrador-flechas button:focus-visible { outline: 3px solid var(--st-ink); outline-offset: 2px; }
@media (min-width: 768px) { .st-mostrador-flechas { display: flex; } }

.st-mostrador-rail { position: relative; margin-top: 12px; }
/* La varilla dorada de la que cuelgan las etiquetas. */
.st-mostrador-rail::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 10px;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(var(--color-yolotl-gold-light), var(--color-yolotl-gold) 60%, #C98A22);
    box-shadow: 0 3px 4px rgba(0,0,0,.25);
}
.st-mostrador-track {
    --orilla: max(20px, calc((100vw - 1180px) / 2 + 16px)); /* alinea con .st-wrap */
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 34px var(--orilla) 16px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--orilla);
    scrollbar-width: none;
}
.st-mostrador-track::-webkit-scrollbar { display: none; }

.st-etiqueta {
    position: relative;
    flex: 0 0 152px;
    scroll-snap-align: start;
    transform-origin: 50% -24px;
    filter: drop-shadow(0 8px 12px rgba(46,42,71,.22));
}
/* Cada una cuelga apenas chueca, como en un mostrador de verdad. */
.st-etiqueta:nth-child(3n+1) { transform: rotate(-1.4deg); }
.st-etiqueta:nth-child(3n+2) { transform: rotate(1deg); }
.st-etiqueta:nth-child(3n)   { transform: rotate(-.4deg); }
/* El hilo, de la varilla al ojillo. */
.st-etiqueta::before {
    content: '';
    position: absolute;
    left: 50%; top: -24px;
    width: 1.5px; height: 31px;
    background: rgba(46,42,71,.45);   /* hilo oscuro: se ve sobre el rosa */
    transform: translateX(-50%);
}
.st-etiqueta-carton {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 10px 10px;
    background: #fff;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
}
/* El ojillo de la etiqueta. */
.st-etiqueta-carton::before {
    content: '';
    position: absolute;
    left: 50%; top: 5px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--st-ink);
    transform: translateX(-50%);
}
/* Medalla #1 #2 #3: el lugar real en ventas. */
.st-etiqueta-lugar {
    position: absolute;
    z-index: 1;
    top: 22px; left: 8px;
    min-width: 30px; height: 30px;
    padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--color-yolotl-gold);
    color: var(--st-ink);
    font: 800 13px/1 var(--font-playfair);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.st-etiqueta-foto {
    display: block;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.st-etiqueta-foto img { width: 100%; height: 100%; object-fit: contain; }
.st-etiqueta-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    margin-top: 8px;
    font: 600 13px/1.35 var(--font-inter);
    color: var(--st-ink);
    text-decoration: none;
}
.st-etiqueta-nombre:hover { color: var(--st-accent-dk); }
.st-etiqueta-pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}
.st-etiqueta-precio {
    display: flex;
    flex-direction: column;
    font: 800 24px/1 var(--font-playfair);
    color: var(--st-ink);
}
.st-etiqueta-precio del { font: 500 11px/1.2 var(--font-inter); color: var(--st-ink-2); }
.st-etiqueta-mas {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--st-accent);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--st-accent) 40%, transparent);
}
.st-etiqueta-mas:hover { background: var(--st-accent-dk); color: #fff; }
.st-etiqueta-mas:focus-visible,
.st-etiqueta-nombre:focus-visible,
.st-etiqueta--todo a:focus-visible { outline: 3px solid var(--st-teal); outline-offset: 2px; }
/* Última etiqueta: lleva al catálogo completo (dorada, para que se note). */
.st-etiqueta--todo .st-etiqueta-carton {
    justify-content: center;
    align-items: center;
    background: var(--color-yolotl-gold);
}
.st-etiqueta--todo .st-etiqueta-carton::before { background: var(--st-ink); }
.st-etiqueta--todo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font: 800 17px/1.25 var(--font-playfair);
    color: var(--st-ink);
    text-align: center;
    text-decoration: none;
}
.st-etiqueta--todo a i { font-size: 26px; }
/* Al agregar al carrito, la etiqueta se mece: confirma qué se agregó. */
.st-etiqueta.is-agregada { animation: st-mecer .8s ease-out; }
@keyframes st-mecer {
    0% { transform: rotate(0); }
    25% { transform: rotate(-7deg); }
    50% { transform: rotate(4deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0); }
}
@media (min-width: 768px) {
    .st-mostrador { padding: 30px 0 24px; }
    .st-mostrador-head h2 { font-size: 28px; }
    .st-etiqueta { flex-basis: 170px; }
}
/* Laptop: el mostrador queda dentro del ancho de la página y centrado,
   con un número exacto de etiquetas a la vista (sin una cortada a la
   orilla). Si hay pocas, los márgenes automáticos las centran sin
   esconder la primera al hacer scroll. */
@media (min-width: 1024px) {
    .st-mostrador-track {
        --orilla: 16px;
        max-width: 1180px;
        margin-inline: auto;
        /* Las orillas se desvanecen: la siguiente etiqueta asoma sin corte duro. */
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
                mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    }
    .st-etiqueta { flex-basis: calc((100% - 4 * 14px) / 5); }
    .st-etiqueta:first-child { margin-left: auto; }
    .st-etiqueta:last-child { margin-right: auto; }
}
@media (min-width: 1200px) {
    .st-etiqueta { flex-basis: calc((100% - 5 * 14px) / 6); }
}

/* ==========================================================
   KITS DE TEMPORADA (Día de Muertos): noche morada con papel
   picado arriba (banderitas de colores con agujeritos) y la
   cuenta regresiva en dorado cempasúchil. Las tarjetas son
   blancas para que el precio se lea igual que en el resto.
   ========================================================== */
.st-temporada {
    --cempasuchil: #F5A524;
    position: relative;
    background:
        radial-gradient(ellipse 60% 80% at 85% 0%, rgba(214,51,108,.35), transparent 70%),
        linear-gradient(160deg, #2E2A47, #4A2752 70%, #5A2E5E);
    color: #fff;
    padding: 0 0 26px;
}
/* Papel picado: franjas de colores, recorte en pico abajo y agujeros. */
.st-temporada-picado {
    height: 38px;
    background:
        radial-gradient(circle at 50% 42%, #3A2C4F 3.5px, transparent 4.2px) 0 0 / 22px 100%,
        repeating-linear-gradient(90deg,
            #D6336C 0 88px, #F5A524 88px 176px, #8E44AD 176px 264px, #1BA39C 264px 352px);
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% 70% no-repeat,
        conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 22px 30% repeat-x;
            mask:
        linear-gradient(#000 0 0) top / 100% 70% no-repeat,
        conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 22px 30% repeat-x;
    margin-bottom: 18px;
}
.st-temporada-grid { display: grid; gap: 20px; }
.st-temporada-intro h2 {
    margin: 0;
    font: 800 28px/1.05 var(--font-playfair);
    color: #fff;
}
.st-temporada-intro p {
    margin: 8px 0 0;
    max-width: 38ch;
    font: 500 15px/1.45 var(--font-inter);
    color: rgba(255,255,255,.85);
}
.st-temporada-reloj { margin-top: 16px; }
.st-temporada-reloj-txt { display: block; font: 600 13px/1.3 var(--font-inter); color: var(--cempasuchil); }
.st-temporada-cifras { display: flex; gap: 8px; margin-top: 8px; }
.st-temporada-cifras > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding: 8px 6px 7px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(245,165,36,.45);
    font: 600 11px/1 var(--font-inter);
    color: rgba(255,255,255,.8);
}
.st-temporada-cifras b {
    font: 800 28px/1 var(--font-playfair);
    color: var(--cempasuchil);
    font-variant-numeric: tabular-nums;
    margin-bottom: 3px;
}

.st-temporada-kits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.st-kit {
    display: grid;
    grid-template-columns: 112px 1fr;
    background: #fff;
    color: var(--st-ink);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.st-kit-foto {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    border: 0;
    background: #F7F1EA;
    cursor: pointer;
    color: var(--st-ink-2);
    font-size: 32px;
}
.st-kit-foto img { width: 100%; height: 100%; object-fit: cover; }
.st-kit-ahorro {
    position: absolute;
    left: 6px; bottom: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--cempasuchil);
    color: var(--st-ink);
    font: 800 11.5px/1 var(--font-inter);
}
.st-kit-info { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 12px 14px; }
.st-kit-info h3 { margin: 0; font: 800 18px/1.1 var(--font-playfair); }
.st-kit-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0;
    font: 500 12.5px/1.35 var(--font-inter);
    color: var(--st-ink-2);
}
.st-kit-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.st-kit-precio { display: flex; flex-direction: column; font: 800 26px/1 var(--font-playfair); }
.st-kit-precio del { font: 500 12px/1.2 var(--font-inter); color: var(--st-ink-2); }
.st-kit-agregar {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--st-accent);
    color: #fff;
    font: 700 13.5px/1 var(--font-inter);
    cursor: pointer;
}
.st-kit-agregar:hover { background: var(--st-accent-dk); }
.st-kit-agregar:focus-visible,
.st-kit-foto:focus-visible { outline: 3px solid var(--cempasuchil); outline-offset: 2px; }

/* Franja compacta: las tarjetas se quedan horizontales (foto chica a la
   izquierda) en todas las pantallas. Antes, en computadora, la foto pasaba
   a 4:3 a todo lo ancho y un solo kit ocupaba una pantalla completa. */
.st-kit-foto { min-height: 124px; }
@media (min-width: 768px) {
    .st-temporada-kits { grid-template-columns: repeat(auto-fit, minmax(270px, 360px)); }
}
@media (min-width: 1024px) {
    .st-temporada { padding-bottom: 28px; }
    .st-temporada-grid { grid-template-columns: 300px 1fr; align-items: center; gap: 28px; }
    .st-temporada-intro h2 { font-size: 30px; }
    .st-temporada-cifras > span { min-width: 54px; padding: 6px 4px; }
    .st-temporada-cifras b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .st-etiqueta.is-agregada { animation: none; }
}

/* ==========================================================
   FILTROS DEL CATÁLOGO (/products)
   - Barra fija con atajos: cada uno con SU color (turquesa = disponible,
     rosa = lo más vendido, dorado = ofertas) y un ícono en círculo. Al
     elegirlo se rellena de ese color: se ve de lejos qué está prendido.
   - Precio: un solo control segmentado ($10 | $20 | $50), no tres botones.
   - Categorías: cada una con su ícono y un tono que se alterna (--tono).
   En el celular cada fila se desliza con el dedo.
   ========================================================== */
/* Barra fija: se queda pegada bajo el encabezado al bajar (top lo pone el JS
   según el alto real del encabezado). Ocupa todo el ancho del <main>. */
.st-filtros-fija {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 -16px 12px;
    padding: 10px 0;
    background: var(--color-yolotl-cream);
    box-shadow: 0 6px 14px -10px rgba(46,42,71,.35);
}
.st-filtros-fija .st-filtros-fila { margin: 0; padding: 2px 16px; }
.st-filtros-cats { margin-bottom: 18px !important; }
.st-filtros-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px;
}
.st-filtros-fila::-webkit-scrollbar { display: none; }

/* Botón base */
.st-filtro {
    --c: var(--st-ink);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px 0 6px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: #fff;
    color: var(--st-ink);
    font: 700 14px/1 var(--font-inter);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.st-filtro:focus-visible,
.st-filtros-orden select:focus-visible { outline: 3px solid var(--st-teal); outline-offset: 2px; }
.st-filtro.is-vacio { opacity: .4; cursor: not-allowed; }

/* Conteo (pastilla pequeña) */
.st-filtro-n {
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--st-ink);
    font: 800 11.5px/1.1 var(--font-inter);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.st-filtro-n:empty { display: none; }
.st-filtro[aria-pressed="true"] .st-filtro-n { background: rgba(255,255,255,.25); color: inherit; }

/* Atajos de color: fondo tenue de su color, ícono en círculo lleno. */
.st-filtro--hoy     { --c: var(--color-yolotl-violeta); }   /* turquesa oscuro #087F7F */
.st-filtro--vendido { --c: var(--st-accent); }              /* rosa #D6336C */
.st-filtro--oferta  { --c: #B86E00; }                       /* dorado oscuro para el ícono */
.st-filtro--hoy, .st-filtro--vendido, .st-filtro--oferta {
    background: color-mix(in srgb, var(--c) 11%, #fff);
    border-color: color-mix(in srgb, var(--c) 30%, transparent);
}
.st-filtro--oferta { background: #FFF3DC; border-color: #F2C77E; }
.st-filtro-ico {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-size: 14px;
}
.st-filtro--oferta .st-filtro-ico { background: var(--color-yolotl-gold); color: var(--st-ink); }
.st-filtro--hoy:hover, .st-filtro--vendido:hover { border-color: var(--c); }
.st-filtro--oferta:hover { border-color: var(--color-yolotl-gold); }
.st-filtro--hoy[aria-pressed="true"],
.st-filtro--vendido[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.st-filtro--hoy[aria-pressed="true"] .st-filtro-ico,
.st-filtro--vendido[aria-pressed="true"] .st-filtro-ico { background: #fff; color: var(--c); }
.st-filtro--oferta[aria-pressed="true"] { background: var(--color-yolotl-gold); border-color: var(--color-yolotl-gold); color: var(--st-ink); }
.st-filtro--oferta[aria-pressed="true"] .st-filtro-ico { background: var(--st-ink); color: var(--color-yolotl-gold); }

/* Precio: control segmentado tipo regla */
.st-filtro-regla {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 3px;
    border: 1.5px solid color-mix(in srgb, var(--st-ink) 16%, transparent);
    border-radius: 999px;
    background: #fff;
}
.st-filtro-regla-ico {
    width: 30px; height: 30px; margin: 0 2px 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--st-ink);
    color: var(--color-yolotl-gold);
    font-size: 14px;
}
.st-filtro--precio {
    min-height: 36px;
    padding: 0 12px;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.st-filtro--precio:hover { background: color-mix(in srgb, var(--st-ink) 6%, #fff); }
.st-filtro--precio[aria-pressed="true"] { background: var(--st-ink); color: #fff; }

/* Categorías: ícono propio en círculo de su tono */
.st-fcat {
    --c: var(--tono, var(--st-ink));
    border-color: color-mix(in srgb, var(--st-ink) 14%, transparent);
}
.st-fcat:hover { border-color: var(--c); }
.st-fcat-ico {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
    font-size: 14px;
}
.st-fcat[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.st-fcat[aria-pressed="true"] .st-fcat-ico { background: #fff; }

/* Limpiar: acción de texto, no un filtro más */
.st-filtro--limpiar {
    padding: 0 12px;
    background: transparent;
    color: var(--st-accent-dk);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.st-filtro--limpiar[hidden] { display: none; }

/* Ordenar (junto al conteo de productos) */
.st-filtros-orden {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font: 600 13px/1 var(--font-inter);
    color: var(--st-ink-2);
}
.st-filtros-orden select {
    min-height: 40px;
    padding: 0 34px 0 12px;
    border: 1.5px solid color-mix(in srgb, var(--st-ink) 18%, transparent);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%232E2A47' d='M1.6 4.6a.75.75 0 0 1 1.06 0L8 9.94l5.34-5.34a.75.75 0 1 1 1.06 1.06l-5.87 5.87a.75.75 0 0 1-1.06 0L1.6 5.66a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--st-ink);
    font: 600 14px/1 var(--font-inter);
    appearance: none;
    cursor: pointer;
}
@media (min-width: 1024px) {
    .st-filtros-fila { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
    .st-filtros-fija { margin: 0 0 12px; }
    .st-filtros-fija .st-filtros-fila { padding: 2px 0; }
}
@media (prefers-reduced-motion: reduce) { .st-filtro { transition: none; } }

/* ==========================================================
   FRANJA PROMOCIONAL (degradado rosa -> turquesa)
   ========================================================== */
.st-strip {
    background: linear-gradient(100deg, var(--st-accent-dk) 0%, var(--st-accent) 45%, var(--st-teal) 100%);
    color: #fff;
}
.st-strip-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 16px;
}
.st-strip-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: 28px;
}
.st-strip-body { flex: 1; min-width: 0; }
.st-strip-body .st-pill { background: rgba(255,255,255,.88); color: var(--st-accent-dk); }
.st-strip-title {
    margin: 10px 0 4px;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: clamp(19px, 2.4vw, 25px);
    line-height: 1.2;
    color: #fff;
}
.st-strip-text { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.9); }
.st-strip .st-btn--ghost { display: inline-flex; flex-shrink: 0; }
@media (max-width: 767px) {
    .st-strip-row { flex-direction: column; align-items: flex-start; gap: 14px; }
    .st-strip-icon { display: none; }
}

/* ==========================================================
   BARRA DE CONFIANZA: lo que más le preocupa a quien compra por
   primera vez (cuándo llega, cómo paga, cuánto cuesta el envío),
   en una línea delgada justo arriba del banner. Reemplaza la
   sección de 4 beneficios que estaba más abajo.
   ========================================================== */
.st-confianza { background: var(--st-ink); color: #fff; }
.st-confianza ul {
    display: flex;
    gap: 22px;
    margin: 0 auto;
    padding: 9px 16px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    font: 600 13px/1.2 var(--font-inter);
    white-space: nowrap;
}
.st-confianza ul::-webkit-scrollbar { display: none; }
.st-confianza li { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.st-confianza i { color: var(--color-yolotl-gold-light); font-size: 15px; }
.st-confianza a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .st-confianza ul { justify-content: center; gap: 40px; } }
@media (max-width: 899px) { .st-confianza ul { font-size: 12px; gap: 18px; } }

/* ==========================================================
   BENEFICIOS (íconos en círculo turquesa)
   ========================================================== */
.st-benefits {
    background: #fff;
    border-bottom: 1px solid var(--st-line);
}
.st-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    padding: 40px 16px;
}
@media (min-width: 900px) {
    .st-benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.st-benefit { text-align: center; }
.st-benefit-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-teal-tint);
    color: var(--st-teal-dk);
    font-size: 21px;
}
.st-benefit h3 {
    margin: 0 0 6px;
    font: 700 14px/1.3 var(--font-inter);
    color: var(--st-ink);
}
.st-benefit p {
    margin: 0 auto;
    max-width: 230px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--st-ink-2);
}

/* ==========================================================
   SECCIONES DE PRODUCTOS
   ========================================================== */
.st-section { padding: 44px 0 8px; }
.st-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--st-line);
}
.st-sec-title {
    margin: 0;
    font-family: var(--font-playfair);
    font-weight: 600;
    /* Mismo estilo en todos los títulos de sección (antes unos iban en
       MAYÚSCULAS y otros no, según la sección). */
    font-size: clamp(21px, 2.5vw, 27px);
    letter-spacing: 0;
    text-transform: none;
    color: var(--st-ink);
}
.st-sec-sub { margin: 4px 0 0; font-size: 13px; color: var(--st-ink-2); }
.st-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 14px;
    background: var(--st-accent);
    color: #fff;
    border-radius: 2px;
    font: 600 12.5px/1 var(--font-inter);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease;
}
.st-more:hover { background: var(--st-accent-dk); color: #fff; }

.st-center-head { text-align: center; margin-bottom: 28px; }
.st-center-head .st-sec-title { text-transform: none; letter-spacing: 0; font-size: clamp(22px, 2.8vw, 30px); margin-top: 12px; }

/* ---------- Banda de OFERTAS (se distingue del resto de secciones) ---------- */
.st-offers {
    margin-top: 44px;
    padding: 44px 0 48px;
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--st-accent) 14%, transparent) 0 160px, transparent 161px),
        var(--st-accent-tint);
}
.st-duo-band + .st-offers { margin-top: 0; }
.st-offers .st-sec-head { border-bottom-color: color-mix(in srgb, var(--st-accent) 25%, transparent); }
.st-offers .st-sec-sub strong { color: var(--st-accent-dk); font-weight: 800; }
.st-offers-head { display: flex; align-items: center; gap: 14px; }
.st-offers-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-accent);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--st-accent) 35%, transparent);
}
@media (max-width: 480px) {
    .st-offers-icon { display: none; }
}

/* Sello "Hasta -X%" sobre el panel turquesa del hero */
.st-hero-sticker {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 2;
    width: 118px;
    height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-accent);
    color: #fff;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 16px 30px rgba(0,0,0,.2);
    transform: rotate(-10deg);
    transition: transform .3s ease;
}
.st-hero-sticker:hover { transform: rotate(0) scale(1.05); color: #fff; }
.st-hero-sticker small { font: 700 10.5px/1.1 var(--font-inter); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.st-hero-sticker strong { font: 800 32px/1 var(--font-playfair); margin: 2px 0; }
@media (max-width: 480px) {
    .st-hero-sticker { width: 92px; height: 92px; top: 16px; right: 16px; }
    .st-hero-sticker strong { font-size: 25px; }
}

/* Precio de oferta en la ficha de producto (antes rojo fijo) */
.st-price-now { color: var(--st-accent) !important; }
.st-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--st-accent-tint);
    color: var(--st-accent-dk);
    font: 700 13px/1 var(--font-inter);
}

/* ==========================================================
   CATEGORÍAS (tarjetas pastel con ícono en círculo blanco)
   ========================================================== */
.st-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.st-cat {
    width: 150px;
    min-height: 186px;
    padding: 24px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: var(--st-radius);
    text-decoration: none;
    color: var(--st-ink);
    transition: transform .25s ease, box-shadow .25s ease;
}
.st-cat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--st-ink) 12%, transparent); }
.st-cat:nth-child(3n+1) { background: var(--st-accent-tint); }
.st-cat:nth-child(3n+2) { background: var(--st-teal-tint); }
.st-cat:nth-child(3n)   { background: var(--st-peach); }
.st-cat-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    font-size: 26px;
    overflow: hidden;
}
.st-cat:nth-child(3n+1) .st-cat-icon { color: var(--st-accent-dk); }
.st-cat:nth-child(3n+2) .st-cat-icon { color: var(--st-teal-dk); }
.st-cat:nth-child(3n)   .st-cat-icon { color: var(--st-accent); }
.st-cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.st-cat-name { font: 700 14px/1.3 var(--font-inter); }
.st-cat-count { margin-top: 4px; font-size: 12px; color: var(--st-ink-2); }

/* Foto arriba (la de /admin/categorias) con el círculo del ícono montado
   en su borde inferior; el nombre queda sobre el mismo fondo pastel de
   siempre. Sin foto: ícono grande en un recuadro blanco translúcido. */
.st-cat { width: 172px; min-height: 0; padding: 8px 8px 16px; }
.st-cat-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--st-radius) - 6px);
    overflow: hidden;
    background: rgba(255,255,255,.55);
    font-size: 40px;
}
.st-cat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.st-cat:hover .st-cat-media img { transform: scale(1.06); }
.st-cat:nth-child(3n+1) .st-cat-media { color: var(--st-accent-dk); }
.st-cat:nth-child(3n+2) .st-cat-media { color: var(--st-teal-dk); }
.st-cat:nth-child(3n)   .st-cat-media { color: var(--st-accent); }
.st-cat .st-cat-icon { position: relative; width: 46px; height: 46px; margin: -23px 0 8px; font-size: 19px; box-shadow: 0 6px 14px rgba(0,0,0,.1); }
/* Sin foto el ícono ya está grande arriba: el círculo sobra */
.st-cat:not(.has-img) .st-cat-icon { display: none; }
.st-cat:not(.has-img) .st-cat-name { margin-top: 12px; }
.st-cat.has-img .st-cat-media > i { display: none; }
@media (max-width: 480px) {
    .st-cats { gap: 10px; }
    .st-cat { width: calc(50% - 5px); }
}
/* En el inicio, en celular: chips que se deslizan de lado (foto chica +
   nombre) en vez de tarjetas en 2 columnas, que ocupaban casi dos pantallas. */
@media (max-width: 639px) {
    .st-cats--chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        margin-inline: -16px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .st-cats--chips::-webkit-scrollbar { display: none; }
    .st-cats--chips .st-cat {
        width: auto;
        flex: none;
        flex-direction: row;
        gap: 8px;
        padding: 5px 14px 5px 5px;
        border-radius: 999px;
        scroll-snap-align: start;
    }
    .st-cats--chips .st-cat:hover { transform: none; box-shadow: none; }
    .st-cats--chips .st-cat-media { width: 34px; flex: none; border-radius: 50%; font-size: 16px; }
    .st-cats--chips .st-cat .st-cat-icon,
    .st-cats--chips .st-cat-count { display: none; }
    .st-cats--chips .st-cat-name,
    .st-cats--chips .st-cat:not(.has-img) .st-cat-name { margin: 0; font-size: 13.5px; white-space: nowrap; }
    #categoriesSection .st-center-head { margin-bottom: 14px; }
}

/* ==========================================================
   BANNERS DOBLES (colección / recién llegados)
   ========================================================== */
.st-duo-band { background: color-mix(in srgb, var(--color-yolotl-papel) 55%, #fff); padding: 32px 0; margin-top: 36px; }
.st-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .st-duo { grid-template-columns: 1fr 1fr; }
}
.st-duo-card {
    position: relative;
    display: block;
    min-height: 200px;
    padding: 40px 150px 36px 40px;
    border-radius: var(--st-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform .25s ease;
}
.st-duo-card:hover { transform: translateY(-3px); }
.st-duo-card.is-light { background: var(--st-peach); color: var(--st-ink); }
.st-duo-card.is-dark { background: var(--st-teal-dk); color: #fff; }
.st-duo-card .st-eyebrow { opacity: .75; }
.st-duo-title {
    margin: 12px 0 18px;
    font-family: var(--font-playfair);
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.2;
    color: inherit;
}
.st-duo-link { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-inter); }
.st-duo-card:hover .st-duo-link i { transform: translateX(4px); }
.st-duo-link i { transition: transform .2s ease; }
.st-duo-art {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 96px;
    line-height: 1;
    opacity: .22;
}
.st-duo-card.is-light .st-duo-art { color: var(--st-accent); opacity: .3; }
@media (max-width: 480px) {
    .st-duo-card { padding: 30px 100px 28px 26px; }
    .st-duo-art { font-size: 70px; right: 18px; }
}

/* Cuadros de promoción (tarjetas_promo): sin inclinación de "nota
   adhesiva" ni cinta — el mismo lenguaje limpio del resto. */
.st-promos .sos-promo-card {
    transform: none !important;
    animation: none !important;
    border-radius: var(--st-radius) !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--st-ink) 10%, transparent) !important;
}
.st-promos .sos-tape-strip { display: none !important; }
.st-promos .sos-comic-btn { box-shadow: none !important; }

/* ==========================================================
   TESTIMONIOS
   ========================================================== */
.st-testi-band { background: var(--st-peach); padding: 64px 0; margin-top: 48px; }
.st-testi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 900px) {
    .st-testi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.st-testi {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    color: var(--st-ink);
    text-decoration: none;
    transition: transform .25s ease;
}
.st-testi:hover { transform: translateY(-3px); }
.st-testi:nth-child(2) { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.st-testi-stars { color: #F2A93B; letter-spacing: .1em; font-size: 16px; }
.st-testi-text { flex: 1; margin: 14px 0 20px; font-size: 14.5px; line-height: 1.7; }
.st-testi-who { display: flex; align-items: center; gap: 12px; }
.st-testi-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-accent-tint);
    color: var(--st-accent-dk);
    font: 700 14px/1 var(--font-inter);
}
.st-testi:nth-child(2) .st-testi-avatar { background: var(--st-accent); color: #fff; }
.st-testi-name { font: 700 14px/1.2 var(--font-inter); }
.st-testi-about { font-size: 12px; opacity: .7; margin-top: 3px; }
.st-testi:nth-child(2) .st-testi-about { color: color-mix(in srgb, var(--st-teal) 60%, #fff); opacity: 1; }

/* ==========================================================
   CUENTA GRATIS (solo invitados)
   ========================================================== */
.st-account {
    margin: 56px 0 8px;
    padding: 44px 24px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    text-align: center;
}
.st-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 32px 0;
}
@media (min-width: 900px) {
    .st-account-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.st-account-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--st-line);
    font: 600 13.5px/1.4 var(--font-inter);
    color: var(--st-ink);
}

/* ==========================================================
   FOOTER + NEWSLETTER
   ========================================================== */
.st-footer {
    margin-top: auto;
    background: var(--st-ink);
    color: color-mix(in srgb, #fff 78%, var(--st-ink));
}
.st-news {
    padding: 56px 16px 60px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.st-news h2 {
    margin: 0;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: clamp(21px, 2.6vw, 28px);
    color: #fff;
}
.st-news p { margin: 8px 0 26px; font-size: 14.5px; color: color-mix(in srgb, var(--st-accent) 22%, #cfc9e6); }
.st-news form { display: flex; max-width: 440px; margin: 0 auto; }
.st-news input {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 2px 0 0 2px;
    background: #fff;
    font: 400 14px/1 var(--font-inter);
    color: var(--st-ink);
    outline: none;
}
.st-news input:focus { box-shadow: inset 0 0 0 2px var(--st-accent); }

/* Botón flotante del carrito: color sólido de acento (antes degradado). */
.st-fab-cart {
    background: var(--st-accent) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--st-accent) 40%, transparent) !important;
}
.st-fab-cart [data-cart-count] { color: var(--st-accent) !important; }
.st-news button {
    height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 0 2px 2px 0;
    background: var(--st-accent);
    color: #fff;
    font: 700 14px/1 var(--font-inter);
    cursor: pointer;
    transition: background .2s ease;
}
.st-news button:hover { background: var(--st-accent-dk); }
.st-news small { display: block; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.45); }

.st-foot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 52px 0 40px;
}
@media (min-width: 640px) {
    .st-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .st-foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
}
.st-foot-brand .st-logo { color: #fff; }
.st-foot-brand .st-logo-name { color: #fff; font-size: 20px; }
.st-foot-brand p { margin: 16px 0 18px; max-width: 280px; font-size: 14px; line-height: 1.65; }
.st-foot-social { display: flex; gap: 10px; }
.st-foot-social a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: #fff;
    transition: background .2s ease;
}
.st-foot-social a:hover { background: var(--st-accent); }
.st-foot-h {
    margin: 0 0 18px;
    font: 700 12.5px/1 var(--font-inter);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 55%, var(--st-ink));
}
.st-foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-foot-list a, .st-foot-list li { font-size: 14px; color: inherit; text-decoration: none; transition: color .2s ease; }
.st-foot-list a:hover { color: #fff; }
.st-foot-list i { margin-right: 8px; opacity: .7; }
.st-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 0 26px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 13px;
    color: rgba(255,255,255,.6);
}
.st-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.st-pay span {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 3px;
    font: 800 10.5px/1 var(--font-inter);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

/* ==========================================================
   FICHA DE PRODUCTO (products/show.php)
   ========================================================== */
.st-pd { padding: 8px 0 24px; }
.st-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--st-ink-2);
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.st-crumbs a { color: var(--st-ink-2); text-decoration: none; }
.st-crumbs a:hover { color: var(--st-accent); }
.st-crumbs i { font-size: 10px; opacity: .6; }
.st-crumbs span { color: var(--st-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.st-pd-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
/* Escritorio: la foto ya no ocupa media pantalla (antes ~600px de alto);
   columna fija y compacta, que se queda a la vista al bajar por la info.
   Con varias fotos, miniaturas en columna a la izquierda. En celular
   nada de esto aplica (foto a lo ancho + miniaturas abajo). */
@media (min-width: 1024px) {
    .st-pd-grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 56px; align-items: start; }
    .st-gallery { position: sticky; top: 150px; max-width: 440px; }
    .st-gallery.has-thumbs {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        max-width: 500px;
    }
    .st-gallery.has-thumbs .st-thumbs {
        order: -1;
        flex-direction: column;
        margin-top: 0;
    }
    .st-gallery.has-thumbs .st-thumb { width: 64px; height: 64px; }
}

/* Galería: la foto llena su recuadro (antes quedaban franjas grises) */
.st-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--st-radius);
    overflow: hidden;
    background: var(--st-peach);
}
.st-gallery-main img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }
.st-gallery-off {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--st-accent);
    color: #fff;
    font: 800 15px/1 var(--font-inter);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--st-accent) 35%, transparent);
}
.st-gallery-fav {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 0;
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
    cursor: pointer;
    transition: transform .2s ease;
}
.st-gallery-fav:hover { transform: scale(1.08); }
.st-gallery-fav.text-pink-500 { color: var(--st-accent) !important; }
.st-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.92);
    color: var(--st-ink);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.st-gallery-arrow.is-prev { left: 14px; }
.st-gallery-arrow.is-next { right: 14px; }
.st-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.st-thumb {
    width: 76px;
    height: 76px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--st-peach);
    cursor: pointer;
    transition: border-color .2s ease;
}
.st-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* El slider de show.php marca la miniatura activa con la clase "bg-white". */
.st-thumb.bg-white, .st-thumb:hover { border-color: var(--st-accent); }

/* Información */
.st-pd-cat {
    display: inline-block;
    font: 700 11px/1 var(--font-inter);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-teal-dk);
    text-decoration: none;
}
.st-pd-title {
    margin: 10px 0 8px;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    color: var(--st-ink);
}
.st-pd-rating { font-size: 13px; color: var(--st-ink-2); }
.st-pd-rating b { color: #F2A93B; letter-spacing: .08em; font-weight: 400; }

.st-pd-price {
    margin: 20px 0;
    padding: 18px 20px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--st-line);
}
.st-pd-price.is-oferta { background: var(--st-accent-tint); border-color: color-mix(in srgb, var(--st-accent) 22%, transparent); }
.st-pd-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.st-pd-price-now { font: 800 36px/1 var(--font-inter); color: var(--st-ink); letter-spacing: -.01em; }
.st-pd-price.is-oferta .st-pd-price-now { color: var(--st-accent); }
.st-pd-price del { font-size: 17px; color: var(--st-ink-2); }
.st-pd-chip {
    padding: 5px 9px;
    border-radius: 4px;
    background: var(--st-accent);
    color: #fff;
    font: 800 12px/1 var(--font-inter);
}
.st-pd-save { margin-top: 10px; font: 700 14px/1.3 var(--font-inter); color: var(--st-accent-dk); }
.st-pd-save i { margin-right: 4px; }
.st-pd-note { margin-top: 6px; font-size: 12.5px; color: var(--st-ink-2); }

.st-pd-label { font: 700 13px/1 var(--font-inter); color: var(--st-ink); margin-bottom: 10px; }

.st-pd-buy { display: flex; gap: 12px; margin-top: 18px; }
.st-qty {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 54px;
    border: 1px solid var(--st-line);
    border-radius: 4px;
    background: #fff;
}
.st-qty button {
    width: 44px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--st-ink);
    font-size: 15px;
    cursor: pointer;
}
.st-qty button:hover { color: var(--st-accent); }
.st-qty span { min-width: 34px; text-align: center; font: 700 16px/1 var(--font-inter); color: var(--st-ink); }
.st-pd-add {
    flex: 1;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 4px;
    background: var(--st-accent);
    color: #fff;
    font: 700 16px/1 var(--font-inter);
    cursor: pointer;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--st-accent) 30%, transparent);
    transition: background .2s ease, transform .2s ease;
}
.st-pd-add:hover { background: var(--st-accent-dk); transform: translateY(-1px); }

.st-pd-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.st-pd-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    font: 600 13.5px/1 var(--font-inter);
    color: var(--st-ink);
    text-decoration: none;
    cursor: pointer;
}
.st-pd-link:hover { color: var(--st-accent); }
.st-pd-link .bi-whatsapp { color: #16a34a; }

.st-pd-perks {
    display: grid;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--st-line);
}
.st-perk { display: flex; gap: 12px; align-items: flex-start; }
.st-perk-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-teal-tint);
    color: var(--st-teal-dk);
    font-size: 16px;
}
.st-perk strong { display: block; font: 700 13.5px/1.3 var(--font-inter); color: var(--st-ink); }
.st-perk span { font-size: 12.5px; color: var(--st-ink-2); }

/* Descripción / características / tienda */
.st-pd-info { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
@media (min-width: 1024px) {
    .st-pd-info { grid-template-columns: 2fr 1fr; align-items: start; }
}
.st-card {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
}
.st-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: 19px;
    color: var(--st-ink);
}
.st-card-title i { color: var(--st-accent); font-size: 17px; }
.st-specs { display: grid; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 640px) {
    .st-specs { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
.st-spec {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--st-line);
    font-size: 14px;
    min-width: 0;
}
.st-spec-k { color: var(--st-ink-2); flex-shrink: 0; }
.st-spec-v { font-weight: 600; color: var(--st-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-store-card { background: var(--st-ink); color: rgba(255,255,255,.85); border-color: var(--st-ink); }
.st-store-card .st-card-title { color: #fff; }
.st-store-card .st-card-title i { color: color-mix(in srgb, var(--st-accent) 40%, #fff); }
.st-store-list { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 12px; font-size: 13.5px; }
.st-store-list i { width: 18px; margin-right: 8px; color: color-mix(in srgb, var(--st-teal) 55%, #fff); }
.st-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 4px;
    background: #16a34a;
    color: #fff;
    font: 700 14px/1 var(--font-inter);
    text-decoration: none;
    transition: background .2s ease;
}
.st-wa-btn:hover { background: #15803d; color: #fff; }

/* ==========================================================
   CARRITO: panel lateral (#cartModal en layouts/main.php)
   `display` solo cuando NO tiene .hidden: abrirModal()/cerrarModal()
   únicamente quitan/ponen esa clase.
   ========================================================== */
.st-drawer:not(.hidden) { display: flex; justify-content: flex-end; }
.st-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--st-ink) 55%, transparent);
    animation: stFade .25s ease;
}
.st-drawer-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    height: 100%;
    background: var(--color-yolotl-cream);
    box-shadow: -20px 0 40px rgba(0,0,0,.15);
    animation: stSlideIn .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes stFade { from { opacity: 0; } }
@keyframes stSlideIn { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .st-drawer-backdrop, .st-drawer-panel { animation: none; }
}
.st-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    background: #fff;
    border-bottom: 1px solid var(--st-line);
}
.st-drawer-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: 21px;
    color: var(--st-ink);
}
.st-drawer-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--st-accent);
    color: #fff;
    font: 700 12px/1 var(--font-inter);
}
.st-drawer-close {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--st-line);
    background: #fff;
    color: var(--st-ink);
    cursor: pointer;
}
.st-drawer-close:hover { border-color: var(--st-accent); color: var(--st-accent); }

.st-ship { padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--st-line); }
.st-ship p { margin: 0; font-size: 13px; color: var(--st-ink); }
.st-ship p i { color: var(--st-teal-dk); margin-right: 4px; }
.st-ship strong { color: var(--st-accent-dk); }
.st-ship.is-done p, .st-ship.is-done strong { color: var(--st-teal-dk); }
.st-ship-bar { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--st-line); overflow: hidden; }
.st-ship-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--st-accent), var(--st-teal)); transition: width .4s ease; }
.st-ship.is-done .st-ship-bar span { background: var(--st-teal); }

.st-drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.st-cart-empty { padding: 60px 10px; text-align: center; color: var(--st-ink-2); }
.st-cart-empty span {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-accent-tint);
    color: var(--st-accent);
    font-size: 28px;
}
.st-cart-empty p { margin: 0 0 18px; font: 600 15px/1.4 var(--font-inter); color: var(--st-ink); }

.st-cart-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--st-line);
}
.st-cart-item:last-child { border-bottom: 0; }
.st-cart-thumb {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    background: var(--st-peach);
    color: color-mix(in srgb, var(--st-ink) 25%, transparent);
    font-size: 24px;
}
.st-cart-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-cart-info { flex: 1; min-width: 0; }
.st-cart-info h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 4px;
    font: 600 14px/1.3 var(--font-inter);
    color: var(--st-ink);
}
.st-cart-var, .st-cart-unit { display: block; font-size: 12px; color: var(--st-ink-2); }
.st-cart-qty {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    border: 1px solid var(--st-line);
    border-radius: 4px;
    background: #fff;
}
.st-cart-qty button {
    width: 30px;
    height: 30px;
    border: 0;
    background: none;
    color: var(--st-ink);
    cursor: pointer;
}
.st-cart-qty button:hover { color: var(--st-accent); }
.st-cart-qty span { min-width: 26px; text-align: center; font: 700 13px/1 var(--font-inter); }
.st-cart-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.st-cart-side strong { font: 800 15px/1 var(--font-inter); color: var(--st-ink); }
.st-cart-side button { border: 0; background: none; color: var(--st-ink-2); cursor: pointer; font-size: 15px; padding: 4px; }
.st-cart-side button:hover { color: var(--st-accent); }

.st-drawer-foot {
    padding: 18px 22px 22px;
    background: #fff;
    border-top: 1px solid var(--st-line);
    box-shadow: 0 -10px 24px rgba(0,0,0,.04);
}
.st-sum-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--st-ink-2); margin-bottom: 8px; }
.st-sum-row.is-total { margin: 4px 0 16px; font: 800 20px/1 var(--font-inter); color: var(--st-ink); }
.st-sum-row.is-total span:last-child { color: var(--st-accent); }
.st-drawer-foot .st-pd-add { width: 100%; text-decoration: none; }
.st-drawer-wa { margin-top: 10px; border: 0; cursor: pointer; }
.st-drawer-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--st-ink-2); }
.st-drawer-note a { color: var(--st-accent-dk); font-weight: 700; text-decoration: underline; }
.st-drawer-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 6px;
    border: 0;
    background: none;
    font: 600 12.5px/1 var(--font-inter);
    color: var(--st-ink-2);
    cursor: pointer;
}
.st-drawer-clear:hover { color: var(--st-accent); }

/* ==========================================================
   CHECKOUT DE INVITADO (#guestCheckoutModal): mismo panel lateral
   que el carrito, en 3 pasos (datos / entrega / pago).
   ========================================================== */
.st-co:not(.hidden) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.st-co-body { padding: 16px 22px 8px; }
.st-co-error {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, #dc2626 25%, transparent);
    background: color-mix(in srgb, #dc2626 7%, #fff);
    color: #b91c1c;
    font: 600 13px/1.4 var(--font-inter);
}

/* Resumen plegable: el cliente ya vio sus productos en el carrito */
.st-co-summary { margin-bottom: 18px; border: 1px solid var(--st-line); border-radius: 12px; background: #fff; }
.st-co-summary summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    list-style: none;
    cursor: pointer;
    font: 700 14px/1.2 var(--font-inter);
    color: var(--st-ink);
}
.st-co-summary summary::-webkit-details-marker { display: none; }
.st-co-summary summary i { color: var(--st-accent); margin-right: 4px; }
.st-co-summary summary small { font-weight: 500; color: var(--st-ink-2); }
.st-co-summary summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: bootstrap-icons;
    font-size: 12px;
    color: var(--st-ink-2);
    transition: transform .2s ease;
}
.st-co-summary[open] summary::after { transform: rotate(180deg); }
.st-co-summary-total { margin-left: auto; font-weight: 800; }
#guestCheckoutSummary { max-height: 220px; overflow-y: auto; padding: 0 16px 6px; border-top: 1px solid var(--st-line); }
.st-co-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--st-line); }
.st-co-item:last-child { border-bottom: 0; }
.st-co-thumb {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--st-peach);
    color: color-mix(in srgb, var(--st-ink) 25%, transparent);
}
.st-co-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.st-co-thumb b {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--st-ink);
    color: #fff;
    font: 700 10.5px/1 var(--font-inter);
}
.st-co-name {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    color: var(--st-ink);
}
.st-co-name small { display: block; font-size: 11.5px; color: var(--st-ink-2); }
.st-co-item strong { font: 700 13.5px/1 var(--font-inter); color: var(--st-ink); }
.st-co-combo .st-co-thumb { background: var(--st-teal-tint); color: var(--st-teal-dk); font-size: 18px; }
.st-co-combo strong { color: var(--st-teal-dk); }
.st-co-combo.is-off { opacity: .6; }
.st-sum-row--ok { color: var(--st-teal-dk); font-weight: 600; }

/* Pasos */
.st-co-step { padding: 4px 0 18px; }
.st-co-step + .st-co-step { padding-top: 18px; border-top: 1px solid var(--st-line); }
.st-co-step h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: 17px;
    color: var(--st-ink);
}
.st-co-step h4 span {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-accent);
    color: #fff;
    font: 700 12px/1 var(--font-inter);
}
.st-co-field { display: block; margin-bottom: 12px; }
.st-co-field:last-child { margin-bottom: 0; }
.st-co-field.hidden { display: none; }
.st-co-field > span { display: block; margin-bottom: 6px; font: 600 12.5px/1 var(--font-inter); color: var(--st-ink); }
.st-co-field em { font-style: normal; font-weight: 500; color: var(--st-ink-2); }
.st-co-field input, .st-co-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: #fff;
    font: 400 14px/1.4 var(--font-inter);
    color: var(--st-ink);
    resize: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.st-co-field input::placeholder, .st-co-field textarea::placeholder { color: #a8a3b8; text-transform: none; }
.st-co-field input:focus, .st-co-field textarea:focus {
    outline: none;
    border-color: var(--st-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 15%, transparent);
}

/* Opciones de entrega */
.st-co-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.st-co-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 13px 14px;
    border: 1.5px solid var(--st-line);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.st-co-option i { margin-bottom: 4px; font-size: 20px; color: var(--st-ink-2); }
.st-co-option strong { font: 700 13.5px/1.2 var(--font-inter); color: var(--st-ink); }
.st-co-option small { font-size: 12px; color: var(--st-ink-2); }
.st-co-option:hover { border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-line)); }
.st-co-option.is-active { border-color: var(--st-accent); background: var(--st-accent-tint); }
.st-co-option.is-active i { color: var(--st-accent); }
.st-co-option.is-active::after {
    content: "\F26E"; /* bi-check-circle-fill */
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: bootstrap-icons;
    font-size: 16px;
    color: var(--st-accent);
}
.st-co-pickup { border-radius: 10px; overflow: hidden; border: 1px solid var(--st-line); background: #fff; }
.st-co-pickup.hidden { display: none; }
.st-co-pickup p { display: flex; gap: 8px; margin: 0; padding: 11px 13px; font-size: 12.5px; line-height: 1.4; color: var(--st-ink-2); }
.st-co-pickup p i { color: var(--st-teal-dk); }
.st-co-map { height: 140px; border-top: 1px solid var(--st-line); }

/* Pago */
.st-co-cash {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    background: var(--st-teal-tint);
}
.st-co-cash i { font-size: 24px; color: var(--st-teal-dk); }
.st-co-cash strong { display: block; font: 700 13.5px/1.3 var(--font-inter); color: var(--st-ink); }
.st-co-cash small { font-size: 12px; color: var(--st-ink-2); }
.st-co-extra { margin-top: 12px; }
.st-co-extra summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    font: 600 13px/1.3 var(--font-inter);
    color: var(--st-accent-dk);
}
.st-co-extra summary::-webkit-details-marker { display: none; }
.st-co-extra summary:hover { text-decoration: underline; }
.st-co-extra[open] summary { margin-bottom: 12px; }

/* Botón en espera */
#guestCheckoutSubmitBtn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Vista de éxito */
.st-co-success:not(.hidden) { display: block; flex: 1; overflow-y: auto; padding: 36px 26px; text-align: center; }
.st-co-success-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-teal-tint);
    color: var(--st-teal-dk);
    font-size: 34px;
}
.st-co-success h3 { margin: 0 0 4px; font-family: var(--font-playfair); font-weight: 700; font-size: 24px; color: var(--st-ink); }
.st-co-folio { margin: 0 0 18px; font-size: 13.5px; color: var(--st-ink-2); }
.st-co-resumen {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--st-line);
    background: #fff;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--st-ink);
}
.st-co-ok { color: var(--st-teal-dk); font-weight: 600; }
.st-co-warn { color: #b45309; font-weight: 600; }
.st-co-hint { display: flex; gap: 6px; justify-content: center; margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: #b45309; }
.st-co-hint.hidden { display: none; }
/* "Confirma dónde está tu casa" (yolotlMapaPin en layouts/main.php):
   checkout con cuenta y de invitado. */
.st-pin { margin-top: 12px; border: 1px solid var(--st-line); border-radius: 14px; overflow: hidden; background: #fff; }
.st-pin.hidden { display: none; }
.st-pin-head { padding: 12px 14px 10px; }
.st-pin-head strong { display: block; font: 700 14px/1.3 var(--font-inter); color: var(--st-ink); }
.st-pin-head strong i { color: var(--st-accent); }
.st-pin-head span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--st-ink-2); }
.st-pin-map { height: 240px; width: 100%; border-top: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line); }
.st-pin-marker { width: 38px; height: 38px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--st-accent); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.st-pin-marker i { transform: rotate(45deg); color: #fff; font-size: 16px; }
.st-pin-estado { display: flex; gap: 7px; align-items: flex-start; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; }
.st-pin-estado.is-ok { background: #E8F7EE; color: #15803D; }
.st-pin-estado.is-aviso { background: #FEF4E4; color: #8A5A12; }
.st-pin-estado.is-cargando { background: var(--st-teal-tint); color: var(--st-teal-dk); }
/* "Abrir la tienda en Chrome" cuando se está dentro del navegador de Facebook/Instagram. */
.st-pin-link { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.st-pin-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.st-pin-acciones:empty { display: none; }
.st-pin-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--st-line); background: #fff; color: var(--st-ink); font: 600 13px/1 var(--font-inter); cursor: pointer; }
.st-pin-btn:hover { border-color: var(--st-accent); color: var(--st-accent); }
.st-pin-btn.is-main { flex-basis: 100%; background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
.st-pin-btn.is-main:hover { background: var(--st-accent-dk); color: #fff; }
.st-pin-btn[hidden] { display: none; }

/* "¿Guardamos tus datos para la próxima?" tras un pedido de invitado.
   Sin `display` propio para que la clase `hidden` siga funcionando. */
.st-co-cuenta { margin-top: 22px; padding: 18px 16px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--st-accent) 45%, var(--st-line)); background: color-mix(in srgb, var(--st-accent) 5%, #fff); text-align: left; }
.st-co-cuenta-title { margin: 0 0 4px; font: 700 15px/1.3 var(--font-inter); color: var(--st-ink); }
.st-co-cuenta-title i { color: var(--st-accent); margin-right: 4px; }
.st-co-cuenta-sub { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--st-ink-2); }
.st-co-cuenta .st-pd-add { width: 100%; flex: none; }
.st-co-cuenta .st-pd-add:disabled { opacity: .7; cursor: wait; transform: none; }
.st-co-cuenta-legal { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--st-ink-2); text-align: center; }
.st-co-cuenta-legal a { color: var(--st-accent-dk); font-weight: 600; }
.st-co-cuenta-ok { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--st-teal-tint); color: var(--st-teal-dk); font: 600 13.5px/1.4 var(--font-inter); }

/* ==========================================================
   "MÁNDANOS TU LISTA" (partials/lista-escolar.php)
   ========================================================== */
.st-lista { background: linear-gradient(120deg, var(--st-teal-dk), var(--st-teal)); color: #fff; padding: 34px 0; }
.st-lista-row { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 900px) { .st-lista-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.st-pill--light { background: rgba(255,255,255,.18); color: #fff; }
.st-lista h2 { margin: 12px 0 16px; font-family: var(--font-playfair); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; color: #fff; }
.st-lista h2 span { color: color-mix(in srgb, var(--color-yolotl-papel) 85%, #fff); font-weight: 600; }
.st-lista-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
@media (min-width: 640px) { .st-lista-steps { grid-template-columns: repeat(4, auto); } }
.st-lista-steps li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.st-lista-steps li::before {
    counter-increment: paso;
    content: counter(paso);
    width: 22px; height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #fff; color: var(--st-teal-dk);
    font: 800 12px/1 var(--font-inter);
}
.st-lista-steps li i { opacity: .85; }
.st-lista-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex-shrink: 0; }
@media (min-width: 900px) { .st-lista-cta { align-items: center; } }
.st-lista-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 26px; border-radius: 999px;
    background: #15803D; color: #fff; text-decoration: none;
    font: 800 16px/1 var(--font-inter);
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
    transition: transform .15s ease, background .15s ease;
}
.st-lista-btn i { font-size: 20px; }
.st-lista-btn:hover { background: #166534; color: #fff; transform: translateY(-1px); }
.st-lista-cta small { font-size: 12.5px; color: rgba(255,255,255,.85); }

/* En el inicio va entre dos secciones de productos: que respire. */
.st-home-lista { margin-top: 52px; }

/* ==========================================================
   PAQUETES EN EL INICIO: misma .pcard de producto (product-card.css);
   aquí solo lo propio del kit (foto y nombre son botones, carrusel).
   ========================================================== */
.pcard--pkg .pcard-media { width: 100%; padding: 0; border: 0; cursor: pointer; text-align: left; }
.pcard--pkg .pcard-media > img { position: relative; z-index: 1; }
.pcard--pkg .pcard-name--btn { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.pkg-carrusel-slides { position: relative; z-index: 1; display: flex; height: 100%; transition: transform .5s ease; }
.pkg-carrusel-slides img { flex: 0 0 100%; min-width: 100%; }
.pkg-carrusel-dots { position: absolute; z-index: 2; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 4px; }
.pkg-detalle-btn {
    width: 100%; margin-top: 16px; padding: 13px 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 10px; cursor: pointer;
    background: var(--st-ink); color: #fff;
    font: 700 14px/1 var(--font-inter);
    transition: background .2s ease;
}
.pkg-detalle-btn:hover { background: var(--st-accent); }

/* ==========================================================
   MI CUENTA (/user/*): menú lateral + encabezados propios, y una capa que
   pasa las tarjetas/botones/campos de Tailwind de esas páginas al mismo
   lenguaje de la tienda (tarjetas planas con borde fino, botón tinta,
   acento solo donde importa, sin degradados). El contenedor de cada página
   lleva la clase .st-acct.
   ========================================================== */
.st-acct { padding-top: 8px; padding-bottom: 32px; }

/* ---------- Menú lateral ---------- */
.st-acct-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1024px) { .st-acct-side { position: sticky; top: 96px; align-self: start; } }
.st-acct-card { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; }

.st-acct-me { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 16px; }
.st-acct-avatar { position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--st-accent-tint); color: var(--st-accent-dk); display: flex; align-items: center; justify-content: center; font: 800 18px/1 var(--font-inter); grid-row: span 1; }
.st-acct-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-acct-me-txt { min-width: 0; display: flex; flex-direction: column; }
.st-acct-me-txt strong { font: 700 15px/1.25 var(--font-inter); color: var(--st-ink); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-acct-me-txt span { font-size: 12.5px; color: var(--st-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-acct-points { grid-column: 1 / -1; margin-top: 10px; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 10px; background: var(--st-peach); color: var(--st-ink); font-size: 13px; text-decoration: none; }
.st-acct-points i { color: #D99A1E; }
.st-acct-points b { font-weight: 800; }

.st-acct-nav { padding: 6px; }
.st-acct-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.st-acct-nav ul::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .st-acct-nav ul { flex-direction: column; overflow: visible; } }
.st-acct-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: var(--st-ink); font: 600 14px/1.2 var(--font-inter); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.st-acct-nav a i { font-size: 16px; color: var(--st-ink-2); width: 18px; text-align: center; }
.st-acct-nav a:hover { background: var(--st-peach); }
.st-acct-nav a.is-active { background: var(--st-ink); color: #fff; }
.st-acct-nav a.is-active i { color: #fff; }
.st-acct-nav em { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--st-accent-tint); color: var(--st-accent-dk); font: 700 11px/1.3 var(--font-inter); font-style: normal; text-align: center; }
.st-acct-nav a.is-active em { background: rgba(255,255,255,.2); color: #fff; }
@media (max-width: 1023px) { .st-acct-nav em { margin-left: 2px; } }
.st-acct-nav-out a, .st-acct-nav-out a i { color: #B42318; }
.st-acct-nav-out a:hover { background: #FEF3F2; }
@media (min-width: 1024px) { .st-acct-nav-out { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--st-line); } }

.st-acct-ref { padding: 14px 16px; }
.st-acct-ref p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--st-ink-2); }
.st-acct-ref .st-acct-ref-t { margin-bottom: 4px; font: 700 13px/1.2 var(--font-inter); color: var(--st-teal-dk); }
.st-acct-ref-code { display: flex; gap: 6px; margin-top: 10px; }
.st-acct-ref-code code { flex: 1; padding: 8px; border: 1px dashed color-mix(in srgb, var(--st-teal) 50%, transparent); border-radius: 10px; background: var(--st-teal-tint); color: var(--st-ink); font: 800 14px/1 var(--font-inter); letter-spacing: .12em; text-align: center; }
.st-acct-ref-code button { width: 38px; border: 0; border-radius: 10px; background: #15803D; color: #fff; font-size: 17px; cursor: pointer; }

.st-acct-help { display: none; align-items: center; gap: 12px; padding: 14px 16px; color: var(--st-ink); text-decoration: none; transition: border-color .15s ease; }
@media (min-width: 1024px) { .st-acct-help { display: flex; } }
.st-acct-help:hover { border-color: #15803D; }
.st-acct-help > i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: #E8FAF0; color: #16A34A; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.st-acct-help span { font-size: 12.5px; line-height: 1.4; color: var(--st-ink-2); }
.st-acct-help strong { display: block; font-size: 13.5px; color: var(--st-ink); }

/* ---------- Encabezado de cada página ---------- */
.st-acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding: 4px 2px 18px; border-bottom: 1px solid var(--st-line); }
.st-acct-head h1 { margin: 2px 0 0; font-family: var(--font-playfair); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; color: var(--st-ink); }
.st-acct-h1 { margin: 2px 0 0; font-family: var(--font-playfair); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; color: var(--st-ink); }
/* Cabecera del detalle de pedido (antes degradado naranja/ciruela) */
.st-acct div[class*="from-yolotl-orange"][class*="via-yolotl-ciruela"] { background: var(--st-ink) !important; }
.st-acct-kicker { margin: 0; font: 700 11px/1 var(--font-inter); letter-spacing: .12em; text-transform: uppercase; color: var(--st-accent-dk); }
.st-acct-lead { margin: 8px 0 0; max-width: 520px; font-size: 14.5px; color: var(--st-ink-2); }
.st-acct-lead strong { color: var(--st-ink); }
.st-acct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.st-acct-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--st-line); font-size: 12px; font-weight: 600; color: var(--st-ink-2); }
.st-acct-tags span.is-ok { color: #15803D; border-color: #BBF7D0; background: #F0FDF4; }
.st-acct-stats { display: flex; gap: 8px; }
.st-acct-stats a { min-width: 92px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--st-line); text-align: center; text-decoration: none; transition: border-color .15s ease; }
.st-acct-stats a:hover { border-color: var(--st-ink); }
.st-acct-stats b { display: block; font: 800 18px/1.1 var(--font-inter); color: var(--st-ink); }
.st-acct-stats span { font-size: 11.5px; color: var(--st-ink-2); }
@media (max-width: 640px) { .st-acct-stats { width: 100%; } .st-acct-stats a { flex: 1; min-width: 0; } }

.st-acct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.st-acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--st-ink); border-radius: 10px; background: var(--st-ink); color: #fff; font: 700 14px/1 var(--font-inter); text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.st-acct-btn:hover { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
.st-acct-btn:disabled { opacity: .6; cursor: wait; }
.st-acct-btn--ghost { background: #fff; color: var(--st-ink); border-color: var(--st-line); }
.st-acct-btn--ghost:hover { background: #fff; color: var(--st-ink); border-color: var(--st-ink); }
form .st-acct-actions { padding-top: 6px; }
form .st-acct-actions .st-acct-btn { flex: 1; white-space: nowrap; }
/* En celular los dos botones apretados partían el texto en dos renglones */
@media (max-width: 480px) { form .st-acct-actions .st-acct-btn { flex-basis: 100%; } }

/* ---------- Celular: menú de cuenta compacto ----------
   Antes era una fila con scroll horizontal y "Mi carrito"/"Favoritos"
   quedaban cortados sin pista de que había más. Ahora es una cuadrícula
   de 3×2 con todo a la vista. "Cerrar sesión" ya está en el menú del
   avatar del encabezado, así que aquí se oculta. */
@media (max-width: 1023px) {
    .st-acct-side { gap: 10px; }
    .st-acct-me { grid-template-columns: auto 1fr auto; padding: 12px 14px; }
    .st-acct-avatar { width: 44px; height: 44px; font-size: 16px; }
    .st-acct-points { grid-column: auto; margin-top: 0; padding: 7px 10px; white-space: nowrap; font-size: 12.5px; }
    .st-acct-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; }
    .st-acct-nav a { position: relative; flex-direction: column; gap: 5px; padding: 10px 4px 9px; font-size: 12.5px; text-align: center; }
    .st-acct-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .st-acct-nav a i { font-size: 18px; width: auto; }
    .st-acct-nav em { position: absolute; top: 5px; right: calc(50% - 26px); margin: 0; min-width: 18px; padding: 1px 5px; font-size: 10px; }
    .st-acct-nav-out { display: none; }
}
/* Tableta: cabe todo en una sola fila */
@media (min-width: 640px) and (max-width: 1023px) {
    .st-acct-nav ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Tarjetas de cifras del Resumen */
.st-acct-stat { display: block; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--st-line); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.st-acct-stat:hover { border-color: var(--st-ink); transform: translateY(-2px); }
@media (max-width: 639px) {
    .st-acct section:has(> .st-acct-stat) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
    .st-acct-stat { padding: 12px 10px; text-align: center; }
    .st-acct-stat .st-acct-stat-ic, .st-acct-stat p:last-child { display: none; }
    .st-acct-stat p:first-of-type { margin-top: 0 !important; font-size: 22px !important; }
}
.st-acct .border-yolotl-orange { border-color: var(--st-ink) !important; }
.st-acct-stat-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--st-teal-tint); color: var(--st-teal-dk); display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* ---------- Capa sobre el Tailwind existente de estas páginas ---------- */
.st-acct section.bg-white,
.st-acct article.bg-white,
.st-acct div.bg-white.rounded-3xl,
.st-acct .rounded-3xl.shadow-xl,
.st-acct [class*="backdrop-blur"].rounded-3xl {
    border-radius: 16px !important;
    border: 1px solid var(--st-line) !important;
    box-shadow: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
}
.st-acct section > header.border-b,
.st-acct .border-gray-100 { border-color: var(--st-line) !important; }
.st-acct h2.font-extrabold { font-family: var(--font-playfair); font-weight: 700; color: var(--st-ink); }
/* Íconos de encabezado de tarjeta: todos en el mismo turquesa suave */
.st-acct h2 > span[class*="rounded-xl"] { background: var(--st-teal-tint) !important; }
.st-acct h2 > span[class*="rounded-xl"] i { color: var(--st-teal-dk) !important; }
/* Botones con degradado de color sólido (texto blanco) -> botón tinta de
   la tienda. Los avisos con degradado suave (from-x/10) no se tocan. */
.st-acct a[class*="bg-gradient-to-"][class*="text-white"],
.st-acct button[class*="bg-gradient-to-"][class*="text-white"] {
    background: var(--st-ink) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.st-acct a[class*="bg-gradient-to-"][class*="text-white"]:hover,
.st-acct button[class*="bg-gradient-to-"][class*="text-white"]:hover { background: var(--st-accent) !important; }
.st-acct #firstOrderBanner { background: var(--st-accent-tint) !important; border-color: color-mix(in srgb, var(--st-accent) 30%, transparent) !important; color: var(--st-ink); }
.st-acct #cartItemsContainer .text-red-600 { color: var(--st-ink) !important; }
.st-acct #total { color: var(--st-ink) !important; }
/* Carrito: lista + resumen lado a lado desde 1100px (con el menú lateral
   al lado, antes no cabían y el cupón se salía de su caja). */
@media (min-width: 1100px) {
    .st-cart-cols { flex-direction: row !important; align-items: flex-start; }
    .st-cart-items { flex: 1 1 0; min-width: 0; }
    .st-cart-sum { width: 340px; flex-shrink: 0; }
}
/* Campos */
.st-acct input[class*="border-2"],
.st-acct select[class*="border-2"],
.st-acct textarea[class*="border-2"] {
    border-width: 1px !important;
    border-radius: 10px !important;
    background: #fff !important;
}
.st-acct input[class*="border-2"]:focus,
.st-acct select[class*="border-2"]:focus,
.st-acct textarea[class*="border-2"]:focus {
    border-color: var(--st-ink) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ink) 10%, transparent);
}
/* Acentos: el "naranja" viejo pasa al acento de la tienda */
.st-acct .text-yolotl-orange { color: var(--st-accent-dk) !important; }
.st-acct .bg-yolotl-orange\/10 { background: var(--st-accent-tint) !important; }
.st-acct .border-yolotl-orange\/10 { border-color: var(--st-line) !important; }
.st-acct .bg-yolotl-orange { background: var(--st-ink) !important; }
/* Filtros/pestañas activas de "Mis pedidos" */
/* (solo la clase base, no "hover:bg-…": antes un botón de contorno
   quedaba con fondo tinta y letras rojas) */
.st-acct :is([class^="bg-yolotl-orange"], [class*=" bg-yolotl-orange"]):is([class^="text-white"], [class*=" text-white"]) { background: var(--st-ink) !important; }
/* Botones de contorno/tinte: al pasar el mouse, tinta con letras blancas */
.st-acct a[class*="hover:bg-yolotl-orange"]:hover,
.st-acct button[class*="hover:bg-yolotl-orange"]:hover { background: var(--st-ink) !important; border-color: var(--st-ink) !important; color: #fff !important; }

/* ---------- Modal "Nueva dirección" (Mis datos) ---------- */
.st-addr:not(.hidden) { display: flex; align-items: center; justify-content: center; padding: 16px; }
.st-addr-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--st-ink) 55%, transparent); }
.st-addr-panel { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.st-addr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--st-line); }
.st-addr-head h3 { margin: 0; font-family: var(--font-playfair); font-weight: 700; font-size: 21px; color: var(--st-ink); }
.st-addr-head p { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--st-teal-dk); }
.st-addr-close { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--st-line); border-radius: 50%; background: #fff; color: var(--st-ink); cursor: pointer; }
.st-addr-close:hover { border-color: var(--st-ink); }
.st-addr-form { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 22px; }
.st-addr-field { display: flex; flex-direction: column; gap: 6px; }
.st-addr-field > span { font: 700 13px/1.2 var(--font-inter); color: var(--st-ink); }
.st-addr-field > span b { color: var(--st-accent-dk); }
.st-addr-field > span em { margin-left: 4px; font-style: normal; font-weight: 500; font-size: 12px; color: var(--st-ink-2); }
.st-addr-field input, .st-addr-field textarea {
    width: 100%; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--st-ink) 18%, transparent); border-radius: 10px;
    background: #fff; font: 400 14.5px/1.4 var(--font-inter); color: var(--st-ink); resize: vertical;
}
.st-addr-field input:focus, .st-addr-field textarea:focus { outline: none; border-color: var(--st-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ink) 10%, transparent); }
.st-addr-field small { font-size: 12px; color: var(--st-ink-2); }
.st-addr-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; color: #B91C1C; font-size: 13px; font-weight: 600; }
.st-addr-alert.is-ok { background: #F0FDF4; color: #15803D; }
.st-addr-actions { display: flex; gap: 10px; padding-top: 4px; }
.st-addr-btn { flex: 1; padding: 12px 14px; border: 1px solid var(--st-ink); border-radius: 10px; background: var(--st-ink); color: #fff; font: 700 14px/1 var(--font-inter); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.st-addr-btn:hover { background: var(--st-accent); border-color: var(--st-accent); }
.st-addr-btn:disabled { opacity: .6; cursor: wait; }
.st-addr-btn--ghost { background: #fff; color: var(--st-ink); border-color: var(--st-line); }
.st-addr-btn--ghost:hover { background: #fff; border-color: var(--st-ink); }

/* "Complétalo y tu envío es gratis" (carrito lateral, cargarSugerenciasEnvio) */
.st-sug { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--st-teal-tint); }
.st-sug-title { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font: 700 13px/1.2 var(--font-inter); color: var(--st-teal-dk); }
.st-sug-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: #fff; }
.st-sug-item + .st-sug-item { margin-top: 6px; }
.st-sug-item .st-cart-thumb { width: 42px; height: 42px; flex-shrink: 0; }
.st-sug-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--st-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-sug-item strong { font-size: 13.5px; color: var(--st-ink); white-space: nowrap; }
.st-sug-item button { width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--st-ink); color: #fff; cursor: pointer; transition: background .15s ease; }
.st-sug-item button:hover { background: var(--st-accent); }

/* ==========================================================
   "CALIFICA TU COMPRA" (/opinar/{pedido}/{firma}, views/resenas/opinar.php)
   ========================================================== */
.st-op { max-width: 640px; margin: 0 auto; padding: 36px 0 56px; }
.st-op-head { text-align: center; margin-bottom: 22px; }
.st-op-head .st-sec-title { margin-top: 12px; text-transform: none; letter-spacing: 0; font-size: clamp(22px, 3vw, 28px); }
.st-op-card { background: #fff; border: 1px solid var(--st-line); border-radius: 18px; padding: 8px 20px 20px; box-shadow: 0 10px 30px color-mix(in srgb, var(--st-ink) 6%, transparent); }
.st-op-card.hidden, .st-op-head.hidden { display: none; }
.st-op-item { padding: 16px 0; border-bottom: 1px solid var(--st-line); }
.st-op-prod { display: flex; align-items: center; gap: 12px; }
.st-op-img { position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--st-peach); display: flex; align-items: center; justify-content: center; color: var(--st-ink-2); }
.st-op-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-op-name { font-weight: 600; font-size: 14.5px; color: var(--st-ink); line-height: 1.3; }
.st-op-stars { display: flex; align-items: center; gap: 4px; margin: 10px 0 8px; }
.st-op-stars button { width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 28px; line-height: 1; color: #E2DDE8; transition: transform .12s ease, color .12s ease; }
.st-op-stars button.is-on { color: #F2A93B; }
.st-op-stars button:active { transform: scale(.9); }
.st-op-label { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--st-ink-2); }
.st-op-item textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--st-line); border-radius: 10px; font: 400 14px/1.4 var(--font-inter); color: var(--st-ink); resize: vertical; }
.st-op-item textarea:focus { outline: 2px solid color-mix(in srgb, var(--st-accent) 40%, transparent); border-color: var(--st-accent); }
.st-op-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; color: #B91C1C; font-size: 13.5px; font-weight: 600; }
.st-op-error.hidden { display: none; }
.st-op-submit { width: 100%; justify-content: center; margin-top: 18px; }
.st-op-submit:disabled { opacity: .6; cursor: wait; }
.st-op-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--st-ink-2); }
.st-op-note i { color: var(--st-teal-dk); }
.st-op-empty { padding: 36px 24px; text-align: center; }
.st-op-empty > i { font-size: 40px; color: var(--st-accent); }
.st-op-empty h1 { margin: 10px 0 6px; font-family: var(--font-playfair); font-size: 24px; color: var(--st-ink); }
.st-op-empty p { margin: 0 auto 18px; max-width: 380px; font-size: 14px; color: var(--st-ink-2); }
.st-op-empty .st-btn, .st-op-empty .st-wa-btn { display: inline-flex; width: auto; }

/* "¿No lo encuentras? Te lo conseguimos" (búsqueda sin resultados en /products) */
.st-encargo {
    max-width: 460px; margin: 18px auto 0; padding: 18px 20px;
    border-radius: 14px; background: #fff; border: 1px solid var(--st-line);
    text-align: center;
}
.st-encargo p { margin: 0 0 12px; font-size: 14px; color: var(--st-ink-2); }
.st-encargo p strong { display: block; margin-bottom: 2px; color: var(--st-ink); font-size: 15.5px; }
.st-encargo .st-wa-btn { display: inline-flex; width: auto; padding: 12px 18px; }

/* ==========================================================
   MODO CAJA (/admin/pos?caja=1, app "Yolotl Caja"): solo el punto
   de venta, sin header/menú/footer/botones flotantes de la tienda.
   ========================================================== */
body.modo-caja > header,
body.modo-caja > nav.st-nav,
body.modo-caja > footer,
body.modo-caja [data-floating-fab] { display: none !important; }
body.modo-caja { background: var(--color-yolotl-cream); }
body.modo-caja > main { max-width: none; padding: 14px 18px 18px; }
.pos-caja-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--st-ink);
    color: #fff;
}
.pos-caja-brand { display: flex; align-items: center; gap: 10px; }
.pos-caja-brand strong { display: block; font-family: var(--font-playfair); font-weight: 700; font-size: 17px; line-height: 1.1; }
.pos-caja-brand small { font-size: 12px; color: rgba(255,255,255,.7); }
.pos-caja-clock { font: 800 22px/1 var(--font-inter); letter-spacing: .02em; }
.pos-caja-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pos-caja-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font: 600 13px/1 var(--font-inter);
    cursor: pointer;
}
.pos-caja-actions button:hover { background: rgba(255,255,255,.16); }
.pos-caja-conn { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; font-size: 12px; color: rgba(255,255,255,.8); }
.pos-caja-conn i { font-size: 8px; color: #22c55e; }
.pos-caja-conn.is-off i { color: #ef4444; }
@media (max-width: 900px) { .pos-caja-actions button span { display: none; } }

/* ==========================================================
   ADMIN > BANNERS: vista previa de cada tarjeta con el mismo
   acomodo que el banner del inicio (.st-hero).
   ========================================================== */
.adm-bn { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 150px; background: var(--st-ink); }
.adm-bn.is-off { filter: grayscale(.85); opacity: .75; }
.adm-bn-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 14px 16px; color: #fff; }
.adm-bn-badge {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    font: 700 10px/1.4 var(--font-inter);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.adm-bn-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-playfair); font-weight: 700; font-size: 17px; line-height: 1.2; }
.adm-bn-sub { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; color: color-mix(in srgb, var(--st-accent) 35%, #fff); }
.adm-bn-btn {
    align-self: flex-start;
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--st-accent);
    font: 700 11px/1 var(--font-inter);
}
.adm-bn-img { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--st-teal); color: rgba(255,255,255,.7); font-size: 26px; }
.adm-bn-img small { font-size: 11px; font-weight: 600; }
.adm-bn-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adm-bn-status {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font: 700 10.5px/1.3 var(--font-inter);
}
.adm-bn.is-off .adm-bn-status { background: #374151; }

/* ==========================================================
   ACCESO: login / registro / recuperar contraseña (views/auth/*)
   Son páginas independientes (no usan layouts/main.php): llevan
   <body class="st-auth"> y cargan esta hoja. Todo va bajo .st-auth para
   ganarle en especificidad a los estilos propios de cada página.
   ========================================================== */
.st-auth { background: var(--color-yolotl-cream); font-family: var(--font-inter); }
@media (min-width: 1024px) {
    .st-auth-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; }
}
.st-auth-side {
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    background: var(--st-ink);
    color: #fff;
    overflow: hidden;
}
.st-auth-side::before,
.st-auth-side::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
/* Círculos decorativos en la esquina superior derecha (lejos del texto,
   que va a la izquierda y centrado verticalmente). */
.st-auth-side::before { width: 340px; height: 340px; right: -150px; top: -150px; background: var(--st-teal); opacity: .9; }
.st-auth-side::after { width: 96px; height: 96px; right: 60px; top: 190px; background: var(--st-accent); opacity: .9; }
.st-auth-side > * { position: relative; z-index: 1; }
.st-auth-side .st-logo-name { color: #fff; }
.st-auth-side .st-eyebrow { color: color-mix(in srgb, var(--st-accent) 35%, #fff); }
.st-auth-side h1 {
    margin: 16px 0 0;
    max-width: 380px;
    font-family: var(--font-playfair);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.15;
    color: #fff;
}
.st-auth-perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; font-size: 14.5px; color: rgba(255,255,255,.85); }
.st-auth-perks i { width: 30px; height: 30px; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; }
.st-auth-copy { margin: 0; font-size: 12px; color: rgba(255,255,255,.5); }

.st-auth-card {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: 0 20px 50px color-mix(in srgb, var(--st-ink) 8%, transparent);
    padding: 36px;
}
@media (max-width: 480px) { .st-auth-card { padding: 26px 20px; } }
.st-auth-title { margin: 0; font-family: var(--font-playfair); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--st-ink); }
.st-auth-sub { margin: 6px 0 26px; font-size: 14px; color: var(--st-ink-2); }
.st-auth-sub strong { color: var(--st-accent-dk); }

.st-auth .input-yolotl {
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--st-ink) 16%, transparent);
    border-radius: 6px;
}
.st-auth .input-yolotl:focus { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-tint); }
.st-auth .btn-yolotl {
    background: var(--st-accent);
    border-radius: 4px;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--st-accent) 30%, transparent);
}
.st-auth .btn-yolotl:hover:not(:disabled) { background: var(--st-accent-dk); transform: translateY(-1px); box-shadow: 0 12px 24px color-mix(in srgb, var(--st-accent) 35%, transparent); }
.st-auth .btn-google { border-width: 1px; border-radius: 4px; }
.st-auth a.text-yolotl-orange, .st-auth .text-yolotl-orange { color: var(--st-accent) !important; }
.st-auth main .st-logo { justify-content: center; margin-bottom: 28px; }
/* En escritorio el logo ya está en el panel izquierdo. */
@media (min-width: 1024px) { .st-auth main .st-logo { display: none; } }
.st-auth-side .st-logo { align-self: flex-start; }

/* ==========================================================
   FOOTER — extras (estado, WhatsApp, cómo llegar)
   ========================================================== */
.st-foot-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font: 700 11.5px/1 var(--font-inter);
    background: rgba(255,255,255,.07);
}
.st-foot-status i { font-size: 7px; }
.st-foot-status.is-open { color: #4ade80; }
.st-foot-status.is-closed { color: rgba(255,255,255,.6); }
.st-foot-brand .st-wa-btn { width: auto; display: inline-flex; margin-top: 18px; }
.st-foot-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: color-mix(in srgb, var(--st-accent) 45%, #fff) !important;
}
.st-foot-map:hover { color: #fff !important; }
.st-news-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: color-mix(in srgb, var(--st-accent) 45%, #fff);
    font-size: 22px;
}
/* Deja libre la esquina de los botones flotantes (WhatsApp / carrito)
   para que no tapen el copyright ni los métodos de pago. */
.st-foot-bottom { padding-bottom: 96px; }
@media (min-width: 768px) {
    .st-foot-bottom { padding: 20px 88px 26px; }
}

/* ==========================================================
   CHECKOUT — PASO 1 (checkout/address.php)
   Tarjetas numeradas solas (contador CSS: si se oculta "¿A dónde?" al
   elegir recoger, la numeración se acomoda), mismo lenguaje que la
   cuenta: borde fino, tinta + acento, sin degradados.
   ========================================================== */
.st-ck { padding: 20px 0 48px; }
.st-ck [hidden] { display: none !important; }
.st-ck-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.st-ck-head { margin-bottom: 20px; }
.st-ck-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--st-ink-2); text-decoration: none; }
.st-ck-back:hover { color: var(--st-accent-dk); }
.st-ck-head h1 { margin: 10px 0 14px; font-family: var(--font-playfair); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--st-ink); }
.st-ck-steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-ck-steps li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--st-ink-2); white-space: nowrap; }
.st-ck-steps li + li::before { content: ''; width: 28px; height: 1px; background: var(--st-line); margin-right: 1px; }
.st-ck-steps b { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--st-line); font-size: 12px; }
.st-ck-steps li.is-on { color: var(--st-ink); }
.st-ck-steps li.is-on b { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }

.st-ck-alert { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: #FEF3F2; border: 1px solid #FECDCA; color: #B42318; font-size: 14px; }
.st-ck-main .st-ck-alert { margin: 0; }

.st-ck-cols { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .st-ck-cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; } }

.st-ck-main { display: flex; flex-direction: column; gap: 14px; counter-reset: ckpaso; min-width: 0; }
.st-ck-card { padding: 20px; background: #fff; border: 1px solid var(--st-line); border-radius: 16px; }
@media (max-width: 480px) { .st-ck-card { padding: 16px; } }
.st-ck-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 16px/1.25 var(--font-inter); color: var(--st-ink); }
.st-ck-h2::before { counter-increment: ckpaso; content: counter(ckpaso); width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--st-accent-tint); color: var(--st-accent-dk); font-size: 13px; font-weight: 800; }

/* Opciones de entrega */
.st-ck-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .st-ck-opts { grid-template-columns: 1fr; } }
.st-ck-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--st-line); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.st-ck-opt:hover { border-color: color-mix(in srgb, var(--st-ink) 35%, transparent); }
.st-ck-opt input { position: absolute; opacity: 0; pointer-events: none; }
.st-ck-opt-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--st-peach); color: var(--st-ink); font-size: 19px; }
.st-ck-opt span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.35; color: var(--st-ink-2); min-width: 0; }
.st-ck-opt strong { font-size: 14px; color: var(--st-ink); }
.st-ck-opt-ok { margin-left: auto; font-size: 18px; color: var(--st-ink); opacity: 0; transition: opacity .15s ease; }
.st-ck-opt:has(input:checked) { border-color: var(--st-ink); background: color-mix(in srgb, var(--st-peach) 45%, #fff); }
.st-ck-opt:has(input:checked) .st-ck-opt-ok { opacity: 1; }
.st-ck-opt:has(input:checked) .st-ck-opt-ic { background: var(--st-ink); color: #fff; }
.st-ck-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ink) 15%, transparent); }
.st-ck-store { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--st-teal-tint); font-size: 13px; color: var(--st-ink-2); }
.st-ck-store p { margin: 0; }
.st-ck-store p:first-child { margin-bottom: 4px; color: var(--st-ink); }
.st-ck-store i { color: var(--st-teal-dk); }

/* Direcciones guardadas */
.st-ck-addrs { display: flex; flex-direction: column; gap: 8px; }
.st-ck-addr { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--st-line); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.st-ck-addr:hover { border-color: color-mix(in srgb, var(--st-ink) 35%, transparent); }
.st-ck-addr input { margin-top: 3px; accent-color: var(--st-ink); width: 16px; height: 16px; flex-shrink: 0; }
.st-ck-addr span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 13px; color: var(--st-ink-2); }
.st-ck-addr strong { font-size: 14px; color: var(--st-ink); overflow-wrap: anywhere; }
.st-ck-addr em { font-style: normal; flex-basis: 100%; }
.st-ck-addr small { padding: 2px 8px; border-radius: 999px; background: var(--st-accent-tint); color: var(--st-accent-dk); font-size: 11px; font-weight: 700; }
.st-ck-addr:has(input:checked) { border-color: var(--st-ink); background: color-mix(in srgb, var(--st-peach) 45%, #fff); }
.st-ck-addr--new strong { font-weight: 600; }
.st-ck-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12.5px; color: var(--st-ink-2); text-decoration: none; }
.st-ck-link:hover { color: var(--st-accent-dk); }

/* Campos */
.st-ck-fields { display: flex; flex-direction: column; gap: 14px; }
.st-ck-addrs ~ .st-ck-fields, .st-ck-link ~ .st-ck-fields, .st-ck-fields + .st-ck-fields { margin-top: 16px; }
.st-ck-field { display: flex; flex-direction: column; gap: 6px; }
.st-ck-field > span { font-size: 13px; font-weight: 600; color: var(--st-ink); }
.st-ck-field > span b { color: var(--st-accent); }
.st-ck-field > span em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--st-ink-2); }
.st-ck-field input, .st-ck-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--st-line); border-radius: 10px; background: #fff; font: 400 15px/1.4 var(--font-inter); color: var(--st-ink); outline: none; resize: none; transition: border-color .15s ease, box-shadow .15s ease; }
.st-ck-field input:focus, .st-ck-field textarea:focus { border-color: var(--st-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ink) 10%, transparent); }
.st-ck-field small { font-size: 12px; line-height: 1.4; color: var(--st-ink-2); }
.st-ck-field.is-error input, .st-ck-field.is-error textarea { border-color: #D92D20; box-shadow: 0 0 0 3px #FEE4E2; }
.st-ck-note { margin: 0; font-size: 12.5px; color: var(--st-teal-dk); }

/* Botones */
.st-ck-actions { display: flex; gap: 10px; }
.st-ck-btn { flex: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border: 1px solid var(--st-ink); border-radius: 12px; background: var(--st-ink); color: #fff; font: 700 15px/1 var(--font-inter); text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.st-ck-btn:hover { background: var(--st-accent); border-color: var(--st-accent); color: #fff; }
.st-ck-btn:disabled { opacity: .7; cursor: wait; }
.st-ck-btn--ghost { flex: 1; background: #fff; color: var(--st-ink); border-color: var(--st-line); }
.st-ck-btn--ghost:hover { background: #fff; color: var(--st-ink); border-color: var(--st-ink); }
.st-spin { display: inline-block; animation: st-spin 1s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* Resumen */
.st-ck-sum { padding: 20px; background: #fff; border: 1px solid var(--st-line); border-radius: 16px; }
@media (min-width: 900px) { .st-ck-sum { position: sticky; top: 96px; } }
@media (max-width: 899px) { .st-ck-sum { order: -1; } }
.st-ck-sum h3 { margin: 0 0 10px; font: 700 15px/1.2 var(--font-inter); color: var(--st-ink); }
.st-ck-sum dl { margin: 0; }
.st-ck-sum dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--st-line); font-size: 14px; }
.st-ck-sum dt { color: var(--st-ink-2); }
.st-ck-sum dd { margin: 0; font-weight: 600; color: var(--st-ink); white-space: nowrap; }
.st-ck-sum .is-save dt, .st-ck-sum .is-save dd { color: #15803D; }
.st-ck-total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; font-size: 15px; font-weight: 700; color: var(--st-ink); }
.st-ck-total strong { font-size: 22px; color: var(--st-ink); }
.st-ck-sum-note { margin: 10px 0 0; font-size: 12px; color: var(--st-ink-2); }

/* ==========================================================
   CUENTA (INVITADO): un solo botón "Ingresar" + menú
   Iniciar sesión / Crear cuenta -10% / aviso de compra sin cuenta.
   "Comprar sin cuenta" ya no va en el header: es la opción por
   defecto al pagar desde el carrito ("Comprar ahora").
   El menú se abre con toggleUserMenu() (clase .open, ver main.php).
   ========================================================== */
.st-guestbtn { display: inline-flex; gap: 7px; padding: 11px 16px 11px 18px; box-shadow: none; }
.st-guestbtn-chev { font-size: 10px; opacity: .8; }
@media (max-width: 639px) {
    /* Celular: círculo del tamaño del carrito (antes era una fila extra de 3 botones) */
    .st-guestbtn { width: 44px; height: 44px; padding: 0; gap: 0; font-size: 17px; }
    .st-guestbtn span, .st-guestbtn-chev { display: none; }
}
.st-guestmenu {
    top: calc(100% + 8px);
    width: 268px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 14px;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--st-ink) 16%, transparent);
}
.st-guestmenu-login {
    display: block;
    padding: 11px;
    border-radius: 10px;
    background: var(--st-ink);
    color: #fff;
    font: 700 14px/1 var(--font-inter);
    text-align: center;
    text-decoration: none;
}
.st-guestmenu-login:hover { background: var(--st-accent); color: #fff; }
.st-guestmenu-reg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    padding: 10px 11px;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    color: var(--st-ink);
    font: 700 14px/1.2 var(--font-inter);
    text-decoration: none;
}
.st-guestmenu-reg:hover { border-color: var(--st-ink); }
.st-guestmenu-reg small { font-weight: 500; font-size: 12px; color: var(--st-ink-2); }
.st-guestmenu-note {
    display: flex;
    gap: 7px;
    margin: 10px 2px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--st-line);
    font-size: 12px;
    line-height: 1.45;
    color: var(--st-ink-2);
}
.st-guestmenu-note i { color: var(--st-teal-dk); font-size: 14px; }

/* ==========================================================
   ESCALA ÚNICA DE BOTONES (toda la tienda)
   Antes había botones de 32, 33, 38, 40, 53 y hasta 64px de alto
   (el texto se partía en dos renglones). Ahora solo hay 4 tamaños:
     44px  principal  (acción de la sección / formulario)
     38px  enlace de sección ("Ver todas")
     36px  acción dentro de una tarjeta (Ver detalle, Recibo…)
     34px  chip / filtro
   44px es el mínimo cómodo para el dedo en celular.
   ========================================================== */
.st-btn--square,
.sos-comic-btn,
.st-wa-btn,
.st-acct-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.st-btn--square, .sos-comic-btn { display: inline-flex; align-items: center; justify-content: center; }
.st-acct-btn { white-space: nowrap; }
.st-lista-btn { min-height: 48px; padding-top: 0; padding-bottom: 0; }
.st-more { min-height: 38px; padding-top: 0; padding-bottom: 0; border-radius: 4px; }
#paginationContainer button { min-width: 40px; height: 40px; border-radius: 10px; }

/* ---------- Mi cuenta: lo que viene de Tailwind ---------- */
/* Botones grandes (text-sm): mismo alto y esquina que .st-acct-btn */
.st-acct :is(a, button)[class*="rounded-full"][class*="text-sm"][class*="px-"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding-top: 0 !important; padding-bottom: 0 !important;
    border-radius: 10px !important; white-space: nowrap;
}
/* Acciones dentro de tarjetas (text-xs): 36px, esquina 10px */
.st-acct :is(a, button)[class*="rounded-full"][class*="text-xs"][class*="px-"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 0 14px !important;
    border-width: 1px !important; border-radius: 10px !important;
    font-size: 13px !important; white-space: nowrap;
}
.st-acct :is(a, button)[class*="rounded-full"][class*="text-xs"]:not([class*="border-"]) { border-color: transparent !important; border-style: solid; }
/* Chips de filtro: 34px, píldora */
.st-acct .order-filter,
.st-acct :is(a, button)[class*="rounded-full"][class*="text-xs"][data-filter] {
    min-height: 34px; padding: 0 14px !important; border-radius: 999px !important; font-size: 12.5px !important;
}
/* Botoncito "Nueva" (dirección) que medía 25px */
.st-acct button[class*="text-[0.65rem]"] { min-height: 32px; padding: 0 12px !important; font-size: 12px !important; border-radius: 999px; }

/* ---------- Pestañas segmentadas (Recientes / Historial) ---------- */
.st-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--st-peach); }
.st-seg .pedidos-tab-btn {
    flex: 1 1 0; min-width: 0; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 12px; border: 0 !important; border-radius: 9px;
    background: transparent; color: var(--st-ink-2) !important;
    font: 700 13.5px/1 var(--font-inter); white-space: nowrap; cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.st-seg .pedidos-tab-btn:hover { color: var(--st-ink) !important; }
.st-seg .pedidos-tab-btn.bg-yolotl-orange { background: #fff !important; color: var(--st-ink) !important; box-shadow: 0 1px 3px color-mix(in srgb, var(--st-ink) 16%, transparent); }
.st-seg .pedidos-tab-btn.bg-yolotl-orange i { color: var(--st-accent); }
@media (min-width: 640px) { .st-seg { display: inline-flex; } .st-seg .pedidos-tab-btn { flex: 0 0 auto; padding: 0 18px; } }
.st-seg-more { margin-left: -7px; }
@media (max-width: 639px) { .st-seg-more { display: none; } }

/* ==========================================================
   MARCO DE SECCIONES (Mi cuenta)
   Tarjeta blanca con borde fino, sombra muy suave para que se
   despegue del fondo crema, y la tarjeta de título de cada página
   con la franja de colores de la marca arriba.
   ========================================================== */
.st-acct section.bg-white,
.st-acct article.bg-white,
.st-acct div.bg-white.rounded-3xl,
.st-acct [class*="backdrop-blur"].rounded-3xl,
.st-acct-head,
.st-acct-card {
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--st-ink) 10%, transparent) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--st-ink) 5%, transparent),
                0 10px 28px -14px color-mix(in srgb, var(--st-ink) 22%, transparent) !important;
}
.st-acct article.bg-white { overflow: hidden; }
/* Tarjeta de título de la página: franja superior de la marca */
.st-acct-head,
.st-acct > div.min-w-0 > section.bg-white:first-child {
    position: relative;
    overflow: hidden;
    padding-top: 26px !important;
}
.st-acct-head::before,
.st-acct > div.min-w-0 > section.bg-white:first-child::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--st-accent) 0 40%, #F2A93B 40% 70%, var(--st-teal) 70% 100%);
}

/* El encabezado de cada página ahora es tarjeta (mismo marco que el resto) */
.st-acct-head { background: #fff; padding: 26px 20px 20px; }
@media (min-width: 640px) { .st-acct-head { padding: 28px 24px 22px; } }

/* ==========================================================
   SERVICIOS DE PAPELERÍA (/servicios y /servicios/{slug})
   Tarjetas con el mismo lenguaje que categorías/productos: blanco,
   borde fino, burbuja de ícono con el acento. Cotizador a la derecha.
   ========================================================== */
.st-sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.st-sv-grid--mini { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.st-sv-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid color-mix(in srgb, var(--st-ink) 10%, transparent); border-radius: 18px;
    color: var(--st-ink); text-decoration: none;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--st-ink) 5%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.st-sv-card:hover { transform: translateY(-3px); border-color: var(--st-ink); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--st-ink) 35%, transparent); color: var(--st-ink); }
.st-sv-media {
    position: relative; display: flex; align-items: center; justify-content: center; height: 120px;
    background: linear-gradient(135deg, var(--st-peach), var(--st-accent-tint));
}
.st-sv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-sv-media i {
    position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--st-accent-dk); font-size: 25px; box-shadow: 0 6px 16px color-mix(in srgb, var(--st-ink) 14%, transparent);
}
.st-sv-media.has-img i { position: absolute; left: 16px; bottom: -22px; width: 46px; height: 46px; font-size: 20px; }
.st-sv-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 16px 18px; }
.st-sv-media.has-img + .st-sv-body { padding-top: 28px; }
.st-sv-body strong { font: 700 16px/1.25 var(--font-inter); }
.st-sv-res { font-size: 13px; line-height: 1.45; color: var(--st-ink-2); }
.st-sv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--st-ink-2); }
.st-sv-price b { font-size: 15px; color: var(--st-accent-dk); }
.st-sv-time { color: var(--st-teal-dk); font-weight: 600; }
.st-sv-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 700 13.5px/1 var(--font-inter); color: var(--st-ink); }
.st-sv-card:hover .st-sv-cta i { transform: translateX(3px); }
.st-sv-cta i { transition: transform .15s ease; }

.st-sv-steps { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .st-sv-steps { grid-template-columns: repeat(3, 1fr); } }
.st-sv-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--st-teal-tint); font-size: 13.5px; line-height: 1.45; color: var(--st-ink); }
.st-sv-steps i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--st-teal-dk); font-size: 17px; }

/* ---------- Detalle + cotizador ---------- */
.st-sv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 13px; color: var(--st-ink-2); }
.st-sv-crumbs a { color: var(--st-ink-2); text-decoration: none; }
.st-sv-crumbs a:hover { color: var(--st-accent-dk); }
.st-sv-crumbs i { font-size: 10px; }
.st-sv-crumbs span { color: var(--st-ink); font-weight: 600; }
.st-sv-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .st-sv-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; } }
.st-sv-hero {
    position: relative; display: flex; align-items: center; justify-content: center; height: 180px; margin-bottom: 18px; overflow: hidden;
    border-radius: 18px; background: linear-gradient(135deg, var(--st-peach), var(--st-accent-tint));
}
.st-sv-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-sv-hero i { position: relative; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--st-accent-dk); font-size: 38px; box-shadow: 0 10px 24px color-mix(in srgb, var(--st-ink) 16%, transparent); }
.st-sv-hero.has-img i { display: none; }
.st-sv-title { margin: 4px 0 0; font-family: var(--font-playfair); font-weight: 700; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; color: var(--st-ink); }
.st-sv-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--st-ink-2); }
.st-sv-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.st-sv-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--st-line); font-size: 13px; font-weight: 600; color: var(--st-ink); }
.st-sv-facts i { color: var(--st-teal-dk); }
.st-sv-tarifas { margin-top: 24px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--st-line); }
.st-sv-tarifas h2 { margin: 0 0 10px; font: 700 15px/1.2 var(--font-inter); color: var(--st-ink); }
.st-sv-tarifas table { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-sv-tarifas th { padding: 6px 10px; text-align: left; font-size: 12px; font-weight: 600; color: var(--st-ink-2); border-bottom: 1px solid var(--st-line); }
.st-sv-tarifas td { padding: 9px 10px; border-bottom: 1px dashed var(--st-line); color: var(--st-ink); }
.st-sv-tarifas tr:last-child td { border-bottom: 0; }
.st-sv-tarifas td:last-child, .st-sv-tarifas th:last-child { text-align: right; font-weight: 700; }
.st-sv-tarifas tr.is-on td { background: var(--st-accent-tint); color: var(--st-accent-dk); }
.st-sv-tarifas tr.is-on td:first-child { border-radius: 8px 0 0 8px; }
.st-sv-tarifas tr.is-on td:last-child { border-radius: 0 8px 8px 0; }

.st-sv-form {
    display: flex; flex-direction: column; gap: 18px; padding: 22px;
    background: #fff; border: 1px solid color-mix(in srgb, var(--st-ink) 10%, transparent); border-radius: 20px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--st-ink) 5%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--st-ink) 30%, transparent);
    position: relative; overflow: hidden;
}
.st-sv-form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--st-accent) 0 40%, #F2A93B 40% 70%, var(--st-teal) 70% 100%); }
.st-sv-form-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-family: var(--font-playfair); font-weight: 700; font-size: 22px; color: var(--st-ink); }
.st-sv-form-title i { color: var(--st-accent-dk); font-size: 19px; }
.st-sv-field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.st-sv-field > label, .st-sv-field > legend { padding: 0; font: 700 13.5px/1.3 var(--font-inter); color: var(--st-ink); }
.st-sv-field em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--st-ink-2); }
.st-sv-field b { color: var(--st-accent-dk); }
.st-sv-field small { font-size: 12px; color: var(--st-ink-2); }
.st-sv-qty { display: flex; align-items: center; gap: 8px; }
.st-sv-qty button { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--st-line); border-radius: 10px; background: #fff; color: var(--st-ink); font-size: 16px; cursor: pointer; transition: border-color .15s ease; }
.st-sv-qty button:hover { border-color: var(--st-ink); }
.st-sv-qty input { width: 96px; height: 44px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--st-ink) 18%, transparent); border-radius: 10px; text-align: center; font: 700 16px/1 var(--font-inter); color: var(--st-ink); -moz-appearance: textfield; }
.st-sv-qty input::-webkit-outer-spin-button, .st-sv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-sv-qty input:focus { outline: none; border-color: var(--st-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ink) 10%, transparent); }
.st-sv-qty span { font-size: 13.5px; color: var(--st-ink-2); }
.st-sv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-sv-chip { position: relative; cursor: pointer; }
.st-sv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.st-sv-chip span {
    display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 14px;
    border: 1px solid var(--st-line); border-radius: 12px; background: #fff;
    font: 600 13.5px/1.2 var(--font-inter); color: var(--st-ink); transition: border-color .15s ease, background .15s ease;
}
.st-sv-chip span em { font-size: 11.5px; font-weight: 600; color: var(--st-accent-dk); }
.st-sv-chip:hover span { border-color: var(--st-ink); }
.st-sv-chip input:checked + span { border-color: var(--st-ink); background: var(--st-ink); color: #fff; }
.st-sv-chip input:checked + span em { color: #F9C9D6; }
.st-sv-chip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 35%, transparent); }
.st-sv-drop { position: relative; padding: 18px; border: 1.5px dashed color-mix(in srgb, var(--st-ink) 22%, transparent); border-radius: 14px; background: var(--st-cream, #FFFBF5); text-align: center; transition: border-color .15s ease, background .15s ease; }
.st-sv-drop.is-over { border-color: var(--st-accent); background: var(--st-accent-tint); }
.st-sv-drop > div > i { font-size: 28px; color: var(--st-ink-2); }
.st-sv-drop p { margin: 4px 0 2px; font-size: 13.5px; color: var(--st-ink-2); }
.st-sv-drop p button { border: 0; background: none; padding: 0; font: 700 13.5px/1 var(--font-inter); color: var(--st-accent-dk); text-decoration: underline; cursor: pointer; }
#svDropListo:not([hidden]) { display: flex; align-items: center; gap: 10px; text-align: left; }
#svDropListo > i { font-size: 24px; color: #16A34A; }
#svDropListo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--st-ink); }
#svDropListo button { width: 34px; height: 34px; border: 1px solid var(--st-line); border-radius: 50%; background: #fff; cursor: pointer; }
.st-sv-progress { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--st-line); overflow: hidden; }
.st-sv-progress span { display: block; height: 100%; width: 0; background: var(--st-teal); transition: width .2s ease; }
.st-sv-field textarea { width: 100%; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--st-ink) 18%, transparent); border-radius: 10px; font: 400 14px/1.4 var(--font-inter); color: var(--st-ink); resize: vertical; }
.st-sv-field textarea:focus { outline: none; border-color: var(--st-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ink) 10%, transparent); }
.st-sv-total { padding: 14px 16px; border-radius: 14px; background: var(--st-peach); }
.st-sv-total div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-sv-total span { font-weight: 700; color: var(--st-ink); }
.st-sv-total strong { font: 800 26px/1 var(--font-inter); color: var(--st-ink); }
.st-sv-total small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--st-ink-2); }
.st-sv-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; color: #B91C1C; font-size: 13px; font-weight: 600; }
.st-sv-error[hidden] { display: none; }
.st-sv-add { flex: none; width: 100%; }
.st-sv-add:disabled { opacity: .6; cursor: wait; }
.st-sv-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: -8px; border: 1px solid #BBF7D0; border-radius: 12px; background: #F0FDF4; color: #15803D; font: 700 14px/1 var(--font-inter); cursor: pointer; }
.st-sv-wa:hover { border-color: #16A34A; }

/* Servicio dentro del carrito (cajón y checkout) */
.st-cart-item--serv .st-cart-thumb { background: var(--st-accent-tint); }
.st-cart-item--serv .st-cart-thumb i { color: var(--st-accent-dk); }
.st-cart-file { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--st-teal-dk); font-weight: 600; }
@media (min-width: 960px) { .st-sv-form { position: sticky; top: 96px; } }
@media (min-width: 960px) { .st-sv-info { grid-column: 1; grid-row: 1; } .st-sv-form { grid-column: 2; grid-row: 1 / span 2; } .st-sv-tarifas { grid-column: 1; grid-row: 2; margin-top: 0; } }
@media (max-width: 959px) { .st-sv-tarifas { margin-top: 0; } .st-sv-hero { height: 130px; } .st-sv-hero i { width: 68px; height: 68px; font-size: 30px; } }

/* ==========================================================
   ADMIN > SERVICIOS (lista + editor de precios/opciones)
   ========================================================== */
.adm-sv-list { display: flex; flex-direction: column; gap: 10px; }
.adm-sv-empty { padding: 40px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--st-line); text-align: center; color: var(--st-ink-2); }
.adm-sv-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--st-ink) 10%, transparent); }
.adm-sv-card.is-off { opacity: .65; }
.adm-sv-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--st-accent-tint); color: var(--st-accent-dk); font-size: 20px; }
.adm-sv-main { flex: 1; min-width: 0; }
.adm-sv-name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 15px/1.3 var(--font-inter); color: var(--st-ink); }
.adm-sv-badge { padding: 2px 8px; border-radius: 999px; background: #DCFCE7; color: #15803D; font-size: 11px; font-weight: 700; }
.adm-sv-card.is-off .adm-sv-badge { background: #F3F4F6; color: #4B5563; }
.adm-sv-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--st-ink-2); }
.adm-sv-sub b { color: var(--st-ink); }
.adm-sv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-sv-actions a, .adm-sv-actions button { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--st-line); border-radius: 10px; background: #fff; color: var(--st-ink); font-size: 16px; cursor: pointer; text-decoration: none; }
.adm-sv-actions a:hover, .adm-sv-actions button:hover { border-color: var(--st-ink); }
.adm-sv-actions .is-on { color: #16A34A; }
.adm-sv-actions .is-danger { color: #B42318; }
@media (max-width: 639px) {
    .adm-sv-card { flex-wrap: wrap; }
    .adm-sv-actions { width: 100%; justify-content: flex-end; }
}

.adm-sv-modal:not([hidden]) { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.adm-sv-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--st-ink) 55%, transparent); }
.adm-sv-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 680px; max-height: calc(100vh - 32px); background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden; }
.adm-sv-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--st-line); }
.adm-sv-panel > header h3 { margin: 0; font-family: var(--font-playfair); font-weight: 700; font-size: 21px; color: var(--st-ink); }
.adm-sv-panel > header button { width: 36px; height: 36px; border: 1px solid var(--st-line); border-radius: 50%; background: #fff; cursor: pointer; }
.adm-sv-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 22px; }
.adm-sv-body h4 { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--st-line); font: 700 14px/1.3 var(--font-inter); color: var(--st-ink); }
.adm-sv-body h4:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.adm-sv-body h4 small { font-weight: 500; font-size: 12px; color: var(--st-ink-2); }
.adm-sv-row { display: flex; flex-wrap: wrap; gap: 12px; }
.adm-sv-row--end { align-items: flex-end; justify-content: space-between; }
.adm-sv-f { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.adm-sv-f--grow { flex: 1 1 200px; }
.adm-sv-f > span, .adm-sv-line label > span { font: 600 12.5px/1.2 var(--font-inter); color: var(--st-ink-2); }
.adm-sv-f input, .adm-sv-f select, .adm-sv-f textarea, .adm-sv-line input:not([type=checkbox]) {
    width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--st-ink) 18%, transparent); border-radius: 10px;
    background: #fff; font: 400 14px/1.3 var(--font-inter); color: var(--st-ink);
}
.adm-sv-f input:focus, .adm-sv-f select:focus, .adm-sv-f textarea:focus, .adm-sv-line input:focus { outline: none; border-color: var(--st-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ink) 10%, transparent); }
.adm-sv-hint { margin: -4px 0 0; font-size: 12px; color: var(--st-ink-2); }
.adm-sv-cobro { display: grid; gap: 8px; }
@media (min-width: 560px) { .adm-sv-cobro { grid-template-columns: 1fr 1fr; } }
.adm-sv-cobro label { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--st-line); border-radius: 12px; cursor: pointer; }
.adm-sv-cobro label:has(input:checked) { border-color: var(--st-ink); background: var(--st-peach); }
.adm-sv-cobro input { margin-top: 3px; accent-color: var(--st-ink); }
.adm-sv-cobro b { display: block; font-size: 14px; color: var(--st-ink); }
.adm-sv-cobro small { font-size: 12px; line-height: 1.4; color: var(--st-ink-2); }
.adm-sv-lines { display: flex; flex-direction: column; gap: 8px; }
.adm-sv-line { display: grid; gap: 8px; align-items: end; padding: 10px; border-radius: 12px; background: #FAF8F5; }
.adm-sv-line--tarifa { grid-template-columns: 1fr 1fr 40px; }
.adm-sv-line--opcion { grid-template-columns: 1.1fr 1.3fr .8fr auto 40px; }
@media (max-width: 559px) { .adm-sv-line--opcion { grid-template-columns: 1fr 1fr; } .adm-sv-line--opcion .adm-sv-mini { grid-column: 1; } }
.adm-sv-line label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-sv-line > button { width: 40px; height: 42px; border: 1px solid var(--st-line); border-radius: 10px; background: #fff; color: #B42318; cursor: pointer; }
.adm-sv-mini { flex-direction: row !important; align-items: center; gap: 6px !important; min-height: 42px; font-size: 12.5px; color: var(--st-ink); white-space: nowrap; }
.adm-sv-mini > span { font-weight: 500 !important; color: var(--st-ink) !important; }
.adm-sv-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px dashed color-mix(in srgb, var(--st-ink) 30%, transparent); border-radius: 10px; background: #fff; font: 700 13px/1 var(--font-inter); color: var(--st-ink); cursor: pointer; }
.adm-sv-add:hover { border-color: var(--st-ink); }
.adm-sv-preview:not(:empty) { padding: 12px 14px; border-radius: 12px; background: var(--st-teal-tint); font-size: 13px; line-height: 1.6; color: var(--st-ink); }
.adm-sv-preview b { color: var(--st-teal-dk); }
.adm-sv-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-sv-foto img { width: 80px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--st-line); }
.adm-sv-foto button { min-height: 38px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 10px; background: #fff; font: 600 13px/1 var(--font-inter); color: var(--st-ink); cursor: pointer; }
.adm-sv-foto small { font-size: 12px; color: var(--st-ink-2); }
.adm-sv-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font: 600 14px/1 var(--font-inter); color: var(--st-ink); }
.adm-sv-check input { width: 18px; height: 18px; accent-color: var(--st-ink); }
.adm-sv-alert { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; color: #B91C1C; font-size: 13px; font-weight: 600; }
.adm-sv-alert[hidden] { display: none; }
.adm-sv-panel > footer { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--st-line); }
.adm-sv-btn { flex: 1; min-height: 44px; border: 1px solid var(--st-ink); border-radius: 10px; background: var(--st-ink); color: #fff; font: 700 14px/1 var(--font-inter); cursor: pointer; }
.adm-sv-btn:hover { background: var(--st-accent); border-color: var(--st-accent); }
.adm-sv-btn:disabled { opacity: .6; cursor: wait; }
.adm-sv-btn--ghost { background: #fff; color: var(--st-ink); border-color: var(--st-line); }
.adm-sv-btn--ghost:hover { background: #fff; border-color: var(--st-ink); }

/* Servicio dentro de un pedido (detalle del cliente y del admin) */
.st-ped-serv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.st-ped-serv a, .st-ped-serv span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; }
.st-ped-serv a { background: var(--st-teal-tint); color: var(--st-teal-dk); }
.st-ped-serv a:hover { background: var(--st-teal); color: #fff; }
.st-ped-serv span { background: #FFF7E6; color: #92400E; }
/* Servicios dentro de /user/cart */
.st-cart-servicios { padding: 2px 16px 8px; }
.st-cart-servicios .st-cart-item:last-child { border-bottom: 0; }
@media (max-width: 559px) {
    .adm-sv-line--opcion { grid-template-columns: 1fr 1fr 40px; }
    .adm-sv-line--opcion > label:nth-child(2) { grid-column: span 2; }
    .adm-sv-line--opcion .adm-sv-mini { grid-column: auto; white-space: normal; }
}
/* Celular: tarjeta de servicio horizontal (ícono a la izquierda) */
@media (max-width: 639px) {
    .st-sv-grid { grid-template-columns: 1fr; gap: 10px; }
    .st-sv-card { flex-direction: row; }
    .st-sv-media { width: 92px; height: auto; min-height: 112px; flex-shrink: 0; }
    .st-sv-media i { width: 48px; height: 48px; font-size: 21px; }
    .st-sv-media.has-img i { display: none; }
    .st-sv-body, .st-sv-media.has-img + .st-sv-body { padding: 14px 14px 14px 16px; gap: 4px; }
    .st-sv-body strong { font-size: 15px; }
    .st-sv-cta { display: none; }
}
@media (min-width: 960px) { .st-sv-layout { grid-template-rows: auto 1fr; } .st-sv-tarifas { align-self: start; } }

/* ==========================================================
   TARJETA DE SERVICIO v2 — igual que la de categoría (.st-cat):
   fondo de color suave que va rotando, foto enmarcada (la sube el
   admin en Admin > Servicios) y burbuja con el ícono encima de la foto.
   Reemplaza el estilo anterior de .st-sv-card.
   ========================================================== */
.st-sv-card { padding: 8px; border: 0; border-radius: 18px; box-shadow: none; }
.st-sv-grid > .st-sv-card:nth-child(3n+1) { background: var(--st-accent-tint); }
.st-sv-grid > .st-sv-card:nth-child(3n+2) { background: var(--st-teal-tint); }
.st-sv-grid > .st-sv-card:nth-child(3n)   { background: var(--st-peach); }
.st-sv-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 14px 30px color-mix(in srgb, var(--st-ink) 12%, transparent); }
.st-sv-media { height: 150px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, #fff 55%, transparent); }
.st-sv-media img { transition: transform .5s ease; }
.st-sv-card:hover .st-sv-media img { transform: scale(1.06); }
.st-sv-media > i, .st-sv-media.has-img i {
    position: relative; left: auto; bottom: auto; display: flex;
    width: 64px; height: 64px; font-size: 28px; border-radius: 50%;
    background: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--st-ink) 12%, transparent);
}
.st-sv-grid > .st-sv-card:nth-child(3n+1) i { color: var(--st-accent-dk); }
.st-sv-grid > .st-sv-card:nth-child(3n+2) i { color: var(--st-teal-dk); }
.st-sv-grid > .st-sv-card:nth-child(3n)   i { color: var(--st-accent); }
.st-sv-card.has-img .st-sv-media > i { display: none; }
.st-sv-icon {
    position: relative; z-index: 1; width: 46px; height: 46px; margin: -23px 0 0 14px;
    display: none; align-items: center; justify-content: center; border-radius: 50%;
    background: #fff; font-size: 19px; box-shadow: 0 6px 14px rgba(0,0,0,.1);
}
.st-sv-card.has-img .st-sv-icon { display: flex; }
.st-sv-body, .st-sv-media.has-img + .st-sv-body { padding: 12px 8px 6px; }
.st-sv-card.has-img .st-sv-body { padding-top: 6px; }
.st-sv-res { color: color-mix(in srgb, var(--st-ink) 72%, transparent); }

@media (max-width: 639px) {
    .st-sv-card { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; align-items: start; }
    .st-sv-media { grid-row: 1 / span 2; width: 92px; height: 92px; min-height: 0; }
    .st-sv-media > i, .st-sv-media.has-img i { width: 48px; height: 48px; font-size: 21px; }
    .st-sv-icon, .st-sv-card.has-img .st-sv-icon { display: none; }
    .st-sv-body, .st-sv-card.has-img .st-sv-body, .st-sv-media.has-img + .st-sv-body { grid-column: 2; grid-row: 1 / span 2; padding: 4px 6px 4px 0; }
}

/* ---------- Trabajo completo (engargolado + impresión) ---------- */
.st-sv-combo { padding: 14px; border-radius: 14px; background: var(--st-teal-tint); }
.st-sv-combo legend { float: left; width: 100%; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.st-sv-combo legend i { color: var(--st-teal-dk); font-size: 18px; }
.st-sv-combo .st-sv-chips { clear: both; }
.st-sv-compopts:not([hidden]) { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--st-teal-dk) 30%, transparent); }
.st-sv-compgrupo > span { display: block; margin-bottom: 6px; font: 700 12.5px/1.2 var(--font-inter); color: var(--st-ink); }
.st-sv-chip--sm span { min-height: 38px; padding: 5px 12px; font-size: 13px; }
.st-sv-combo .st-sv-chip span em { color: var(--st-teal-dk); }
.st-sv-combo .st-sv-chip input:checked + span em { color: #A7F3D0; }
.st-cart-link { display: flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--st-accent-dk); }
.st-ped-serv em { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--st-accent-tint); color: var(--st-accent-dk); font-size: 12px; font-weight: 600; font-style: normal; }
/* Admin: casillas de "Trabajo completo" */
.adm-sv-comps { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-sv-comps label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--st-ink); cursor: pointer; }
.adm-sv-comps label:has(input:checked) { border-color: var(--st-ink); background: var(--st-peach); }
.adm-sv-comps input { width: 16px; height: 16px; accent-color: var(--st-ink); }

/* Admin > Pedido: "Avisar al cliente" por WhatsApp */
.adm-aviso-paso { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.adm-aviso-paso + .adm-aviso-paso { padding-top: 12px; border-top: 1px dashed var(--st-line); }
.adm-aviso-t { margin: 0; font: 700 12.5px/1.2 var(--font-inter); color: var(--st-ink); }
.adm-aviso-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-aviso-chips label { cursor: pointer; }
.adm-aviso-chips input { position: absolute; opacity: 0; pointer-events: none; }
.adm-aviso-chips span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 999px; background: #fff; font: 600 12.5px/1 var(--font-inter); color: var(--st-ink); }
.adm-aviso-chips input:checked + span { border-color: var(--st-ink); background: var(--st-ink); color: #fff; }
.adm-aviso-otro { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--st-ink) 18%, transparent); border-radius: 10px; font: 400 14px/1.3 var(--font-inter); }
.adm-aviso-otro[hidden] { display: none; }
.adm-aviso-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid #16A34A; border-radius: 10px; background: #16A34A; color: #fff; font: 700 14px/1 var(--font-inter); cursor: pointer; }
.adm-aviso-btn:hover { background: #15803D; border-color: #15803D; }
.adm-aviso-btn--ghost { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.adm-aviso-btn--ghost:hover { background: #DCFCE7; color: #15803D; }
.adm-aviso-nota { margin: 0; font-size: 11.5px; color: var(--st-ink-2); }

/* Admin > Navegación: agregar rápido y destino de cada sección */
.adm-nav-sug { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--st-line); }
.adm-nav-sug-t { margin: 0 0 8px; font: 600 12.5px/1.3 var(--font-inter); color: var(--st-ink-2); }
.adm-nav-sug-t .bi { color: #F59E0B; }
.adm-nav-sug-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-nav-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px dashed color-mix(in srgb, var(--st-ink) 25%, transparent); border-radius: 999px; background: #fff; font: 600 12.5px/1 var(--font-inter); color: var(--st-ink); cursor: pointer; }
.adm-nav-chip:hover { border-style: solid; border-color: var(--st-ink); }
.adm-nav-chip-mas { font-size: 11px; opacity: .55; }
.adm-nav-dest { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #F1F5F9; font: 700 10.5px/1.4 var(--font-inter); color: #64748B; text-transform: uppercase; letter-spacing: .03em; }
.adm-nav-roto { display: inline-flex; align-items: flex-start; gap: 6px; font: 600 12.5px/1.35 var(--font-inter); color: #B45309; }

/* Ficha de producto: la foto se ve completa y el recuadro toma su forma
   (lo ajusta el JS entre 3:4 y 4:3); lo que sobra, la foto difuminada. */
.st-gallery-main { transition: aspect-ratio .35s ease; }
.st-gallery-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.st-gallery-slide::before { content: ""; position: absolute; inset: -24px; background: var(--st-slide-bg) center / cover no-repeat; filter: blur(22px) saturate(1.1); opacity: .55; }
.st-gallery-main .st-gallery-slide img { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* Ficha de producto: muchas fotos → las miniaturas se desplazan
   (abajo en celular, en columna a la izquierda en escritorio). */
.st-thumbs { overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.st-thumb { flex-shrink: 0; }
@media (min-width: 1024px) {
    .st-gallery.has-thumbs .st-thumbs { height: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; padding: 0 2px 0 0; }
}

/* Admin > Producto: galería de fotos sin límite */
.adm-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-bottom: 10px; }
.adm-galeria.hidden { display: none; }
.adm-galeria-item { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #F8FAFC; border: 2px solid #E5E7EB; }
.adm-galeria-item:first-child { border-color: var(--st-accent, #D6336C); }
.adm-galeria-item img { width: 100%; height: 100%; object-fit: cover; }
.adm-galeria-item.is-subiendo img { opacity: .45; }
.adm-galeria-principal, .adm-galeria-num { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; font: 700 10px/1.5 var(--font-inter); }
.adm-galeria-principal { background: var(--st-accent, #D6336C); color: #fff; }
.adm-galeria-num { background: rgba(255,255,255,.92); color: #475569; }
.adm-galeria-cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #475569; }
.adm-galeria-acciones { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(15,23,42,.6)); }
.adm-galeria-acciones button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.95); color: #334155; font-size: 12px; }
.adm-galeria-acciones button:hover { background: #fff; color: var(--st-accent, #D6336C); }
.adm-galeria-acciones button:disabled { opacity: .35; cursor: default; }
.adm-galeria-acciones button.is-quitar { color: #DC2626; }
.adm-galeria-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border: 2px dashed #D1D5DB; border-radius: 14px; background: #F9FAFB; text-align: center; transition: border-color .15s, background .15s; }
.adm-galeria-drop.is-over { border-color: var(--st-accent, #D6336C); background: #FFF1F5; }
.adm-galeria-drop > .bi { font-size: 26px; color: #9CA3AF; }
.adm-galeria-drop p { margin: 0; font-size: 12.5px; color: #6B7280; }
.adm-galeria-drop .adm-galeria-nota { font-size: 11px; color: #9CA3AF; }

/* Inicio: accesos directos (útiles, lista escolar, impresiones) */
.st-atajos { padding: 18px 0 4px; }
.st-atajos-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.st-atajo { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid var(--st-line); border-radius: 16px; background: #fff; color: var(--st-ink); text-decoration: none; box-shadow: 0 6px 18px -14px rgba(46,40,73,.5); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.st-atajo:hover { transform: translateY(-2px); border-color: var(--st-accent); box-shadow: 0 10px 22px -14px rgba(46,40,73,.55); }
.st-atajo-ico { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--st-accent-tint); color: var(--st-accent); font-size: 21px; }
.st-atajo-txt { display: flex; flex-direction: column; min-width: 0; }
.st-atajo-txt strong { font: 700 15px/1.2 var(--font-inter); }
.st-atajo-txt small { margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--st-ink-2); }
.st-atajo-go { margin-left: auto; color: var(--st-ink-2); font-size: 14px; }
@media (max-width: 639px) {
    .st-atajos { padding-top: 14px; }
    .st-atajos-grid { gap: 8px; }
    .st-atajo { flex-direction: column; justify-content: center; gap: 6px; min-height: 0; padding: 12px 6px; text-align: center; border-radius: 14px; }
    .st-atajo-ico { width: 40px; height: 40px; font-size: 19px; }
    .st-atajo-txt strong { font-size: 13px; }
    .st-atajo-txt small, .st-atajo-go { display: none; }
}

/* Carrito: lo que gana con el pedido (puntos / cuenta) */
.st-puntos { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 9px 11px; border-radius: 10px; background: #FFF7E6; border: 1px solid #FDE3A7; font-size: 12.5px; line-height: 1.4; color: #7C4A03; }
.st-puntos.hidden { display: none; }
.st-puntos .bi { color: #D97706; font-size: 15px; margin-top: 1px; }
.st-puntos a { font-weight: 700; color: var(--st-accent); text-decoration: underline; }

/* /regreso-a-clases: pasos, y "Ahorra todavía más" (cupón, referidos, servicios) */
.st-rc-pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: -6px 0 24px; font: 600 13px/1.3 var(--font-inter); color: var(--st-ink-2); }
.st-rc-pasos span { display: inline-flex; align-items: center; gap: 6px; }
.st-rc-pasos .bi { color: var(--st-accent); font-size: 16px; }
.st-rc-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.st-rc-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--st-line); border-radius: 16px; background: #fff; }
.st-rc-ico { width: 46px; height: 46px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--st-accent-tint); color: var(--st-accent); font-size: 21px; }
.st-rc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.st-rc-body h3 { margin: 0; font: 700 16px/1.25 var(--font-inter); color: var(--st-ink); }
.st-rc-body p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--st-ink-2); }
.st-rc-body a { color: var(--st-accent); font-weight: 600; }
.st-rc-small { font-size: 12px !important; }
.st-rc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; text-decoration: none; }
.st-rc-cupon { border: 1.5px dashed color-mix(in srgb, var(--st-accent) 45%, transparent); background: color-mix(in srgb, var(--st-accent) 4%, #fff); }
.st-rc-code { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--st-ink); border-radius: 10px; background: #fff; font: 800 16px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--st-ink); cursor: pointer; }
.st-rc-code .bi { font-size: 15px; color: var(--st-ink-2); }
.st-rc-code:hover, .st-rc-code.is-copiado { border-color: var(--st-accent); color: var(--st-accent); }
.st-rc-code.is-copiado .bi { color: #16A34A; }
.st-rc-quedan { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #FFF1E6; color: #C2410C; font: 700 12px/1.2 var(--font-inter); }

/* Admin > Paquetes: tipo (paquete / kit escolar) */
.adm-tipo-opt { cursor: pointer; }
.adm-tipo-opt input { position: absolute; opacity: 0; pointer-events: none; }
.adm-tipo-opt span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border: 2px solid #E5E7EB; border-radius: 12px; background: #F9FAFB; font-size: 13px; color: #374151; }
.adm-tipo-opt span .bi { font-size: 18px; color: #9CA3AF; }
.adm-tipo-opt small { font-size: 11px; color: #9CA3AF; line-height: 1.3; }
.adm-tipo-opt input:checked + span { border-color: var(--st-accent, #D6336C); background: #FFF1F5; }
.adm-tipo-opt input:checked + span .bi { color: var(--st-accent, #D6336C); }
.adm-tipo-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: #E0F2F1; color: #0F766E; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* ==========================================================
   NEGOCIOS AMIGOS (anuncios del administrador, home)
   Banda con fondo suave; tarjetas centradas con foto 16:9 completa,
   WhatsApp y "Cómo llegar". En celular se deslizan de lado.
   ========================================================== */
.st-amigos {
    position: relative;
    margin-top: 48px;
    padding: 60px 0 64px;
    background:
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--st-teal) 12%, transparent) 0 140px, transparent 141px),
        radial-gradient(circle at 94% 88%, color-mix(in srgb, var(--st-accent) 9%, #fff) 0 160px, transparent 161px),
        var(--st-teal-tint);
}
.st-amigos .st-center-head { margin-bottom: 32px; }
.st-amigos .st-pill { background: #fff; color: var(--st-teal-dk); box-shadow: 0 6px 16px -10px rgba(0,0,0,.25); }
.st-amigos .st-sec-sub { font-size: 14px; margin-top: 8px; }

.st-amigos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.st-amigos-grid.is-pocos { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; }

.st-amigo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--st-line);
    box-shadow: 0 14px 34px -24px rgba(24, 20, 48, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}
.st-amigo:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(24, 20, 48, .5); }

.st-amigo-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--st-teal), color-mix(in srgb, var(--st-teal) 45%, var(--st-accent)));
}
.st-amigo-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.st-amigo:hover .st-amigo-media img { transform: scale(1.05); }
.st-amigo-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(15, 12, 30, .35), transparent); pointer-events: none; }
.st-amigo-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 54px; }
.st-amigo-tag {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 999px;
    background: rgba(255,255,255,.95); color: var(--st-teal-dk);
    font: 800 10.5px/1 var(--font-inter); letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.3);
}

.st-amigo-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 18px 20px 20px; }
.st-amigo-name { margin: 0; font: 700 21px/1.15 var(--font-fun); color: var(--st-ink); overflow-wrap: anywhere; }
.st-amigo-desc { margin: -4px 0 0; font-size: 14px; line-height: 1.55; color: var(--st-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-amigo-info { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed var(--st-line); font-size: 13.5px; color: var(--st-ink); }
.st-amigo-info li { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.st-amigo-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; background: var(--st-teal-tint); color: var(--st-teal-dk); font-size: 14px; }

.st-amigo-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.st-amigo-wa {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border-radius: 999px;
    background: #15803D; color: #fff; font: 700 14px/1 var(--font-inter); text-decoration: none;
    box-shadow: 0 10px 20px -12px rgba(37, 211, 102, .9);
    transition: background .15s ease, transform .15s ease;
}
.st-amigo-wa:hover { background: #1EBE5A; transform: translateY(-1px); color: #fff; }
.st-amigo-wa .bi { font-size: 17px; }
.st-amigo-map {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 2px solid var(--st-line); color: var(--st-ink); font: 700 13.5px/1 var(--font-inter); text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.st-amigo-map:hover { border-color: var(--st-teal); color: var(--st-teal-dk); }
.st-amigo-actions .st-amigo-wa + .st-amigo-map span { display: none; }
.st-amigo-actions .st-amigo-wa + .st-amigo-map { width: 44px; padding: 0; flex-shrink: 0; }

/* Celular: tarjetas que se deslizan de lado (se asoma la siguiente). */
@media (max-width: 639px) {
    .st-amigos { padding: 44px 0 48px; }
    .st-amigos-grid, .st-amigos-grid.is-pocos {
        display: flex; gap: 14px; justify-content: flex-start;
        overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 -16px; padding: 4px 16px 14px;
        scrollbar-width: none;
    }
    .st-amigos-grid::-webkit-scrollbar { display: none; }
    .st-amigo { flex: 0 0 84%; scroll-snap-align: start; }
    .st-amigos-grid { scroll-padding-left: 16px; }
    .st-amigo-wa-largo { display: none; }
    .st-amigos-grid > .st-amigo:only-child { flex-basis: 100%; }
}

/* Carrito sin cuenta: elegir entrega antes de pagar (ver #cartEntrega en
   layouts/main.php). Recoger = gratis; domicilio cobra envío bajo el mínimo. */
.st-entrega { margin-bottom: 12px; padding: 12px; border-radius: 14px; background: #FAF9FB; border: 1px solid var(--st-line); }
.st-entrega[hidden] { display: none; }
.st-entrega-title { margin: 0 0 8px; font: 700 13.5px/1.3 var(--font-inter); color: var(--st-ink); }
.st-entrega-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-entrega-opts button {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    min-height: 54px; padding: 8px 10px; border-radius: 12px;
    border: 2px solid var(--st-line); background: #fff;
    text-align: left; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.st-entrega-opts button > .bi { font-size: 20px; color: var(--st-ink-2); flex-shrink: 0; }
.st-entrega-opts button span { display: flex; flex-direction: column; min-width: 0; }
.st-entrega-opts strong { font: 700 13px/1.2 var(--font-inter); color: var(--st-ink); }
.st-entrega-opts small { margin-top: 2px; font-size: 11.5px; line-height: 1.25; color: var(--st-ink-2); }
.st-entrega-opts button:hover { border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-line)); }
.st-entrega-opts button.is-active { border-color: var(--st-accent); background: var(--st-accent-tint); }
.st-entrega-opts button.is-active > .bi { color: var(--st-accent); }
.st-entrega-opts button[data-entrega="recoger"] small { color: #15803D; font-weight: 700; }
.st-entrega-opts button.is-active::after {
    content: "\F26E"; /* bi-check-circle-fill */
    position: absolute; top: -7px; right: -7px;
    font: 16px/1 bootstrap-icons; color: var(--st-accent);
    background: #fff; border-radius: 50%;
}
.st-entrega-error { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 600 12.5px/1.3 var(--font-inter); color: #DC2626; }
.st-entrega-error[hidden] { display: none; }
.st-entrega.is-falta { border-color: #FCA5A5; background: #FEF2F2; animation: st-entrega-sacude .4s ease; }
@keyframes st-entrega-sacude {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}
.st-drawer-foot .st-pd-add .bi-cash-coin { font-size: 17px; }
@media (max-width: 359px) {
    .st-entrega-opts { grid-template-columns: 1fr; }
}

/* Checkout sin cuenta: entrega ya elegida en el carrito (con "Cambiar"). */
.st-co-options[hidden], .st-co-elegida[hidden] { display: none; }
.st-co-elegida { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--st-accent); background: var(--st-accent-tint); }
.st-co-elegida > .bi { font-size: 22px; color: var(--st-accent); flex-shrink: 0; }
.st-co-elegida > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-co-elegida strong { font: 700 14px/1.2 var(--font-inter); color: var(--st-ink); }
.st-co-elegida small { margin-top: 2px; font-size: 12.5px; color: var(--st-ink-2); }
.st-co-elegida button { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--st-line); background: #fff; color: var(--st-accent-dk); font: 700 12.5px/1 var(--font-inter); cursor: pointer; }
.st-co-elegida button:hover { border-color: var(--st-accent); }

/* Admin > Servicios: opciones agrupadas (Tamaño, Arillo...) con
   "Disponible" y "Pide un dato". Ver admin/servicios/index.php. */
.adm-svg-list { display: flex; flex-direction: column; gap: 12px; }
.adm-svg { border: 1px solid var(--st-line); border-radius: 14px; background: #fff; overflow: hidden; }
.adm-svg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #F5F2EE; border-bottom: 1px solid var(--st-line); }
.adm-svg-head > .bi { color: var(--st-ink-2); }
.adm-svg-head .g-nombre { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 2px solid transparent; border-radius: 10px; background: #fff; font: 700 14.5px/1 var(--font-inter); color: var(--st-ink); }
.adm-svg-head .g-nombre:focus { outline: none; border-color: var(--st-ink); }
.adm-svg-x, .adm-svo-x { flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--st-line); border-radius: 10px; background: #fff; color: #B42318; cursor: pointer; }
.adm-svg-x:hover, .adm-svo-x:hover { border-color: #B42318; }
.adm-svg-ops { display: flex; flex-direction: column; }
.adm-svo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) auto auto 38px;
    gap: 6px 10px; align-items: end;
    padding: 10px 12px; border-bottom: 1px dashed var(--st-line);
}
.adm-svo label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-svo label > span { font: 600 12px/1.2 var(--font-inter); color: var(--st-ink-2); }
.adm-svo label > span em { font-style: normal; font-weight: 500; opacity: .8; }
.adm-svo input:not([type=checkbox]) { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--st-line); border-radius: 10px; background: #FAF8F5; font: 500 14px/1 var(--font-inter); color: var(--st-ink); }
.adm-svo input:not([type=checkbox]):focus { outline: none; border-color: var(--st-ink); background: #fff; }
.adm-svo .adm-sv-mini { min-height: 40px; }
.adm-svo-dato { grid-column: 1 / -1; }
.adm-svo-dato input { height: 36px !important; font-size: 13px !important; }
.adm-svo.is-off { background: #F7F7F8; }
.adm-svo.is-off .adm-svo-nom input { text-decoration: line-through; color: var(--st-ink-2); }

/* Interruptor "Disponible" */
.adm-svo-switch { flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 40px; cursor: pointer; white-space: nowrap; }
.adm-svo-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adm-svo-switch i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #D4D2DA; transition: background .15s ease; flex-shrink: 0; }
.adm-svo-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.adm-svo-switch input:checked + i { background: #16A34A; }
.adm-svo-switch input:checked + i::after { transform: translateX(16px); }
.adm-svo-switch input:focus-visible + i { outline: 2px solid var(--st-ink); outline-offset: 2px; }
.adm-svo-switch > span { font: 600 12.5px/1 var(--font-inter) !important; color: var(--st-ink) !important; }
.adm-svo.is-off .adm-svo-switch > span { color: var(--st-ink-2) !important; }
.adm-svg-add { display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 12px; min-height: 34px; padding: 0 12px; border: 1px dashed color-mix(in srgb, var(--st-ink) 30%, transparent); border-radius: 10px; background: #fff; font: 700 12.5px/1 var(--font-inter); color: var(--st-ink); cursor: pointer; }
.adm-svg-add:hover { border-color: var(--st-ink); }
@media (max-width: 639px) {
    .adm-svo { grid-template-columns: minmax(0, 1fr) auto 38px; grid-template-areas: 'nom nom x' 'pre mini mini' 'sw sw sw' 'dato dato dato'; }
    .adm-svo-nom { grid-area: nom; }
    .adm-svo-precio { grid-area: pre; }
    .adm-svo .adm-sv-mini { grid-area: mini; }
    .adm-svo-switch { grid-area: sw; }
    .adm-svo-x { grid-area: x; }
    .adm-svo-dato { grid-area: dato; }
}

/* Tienda: campo que pide una opción del servicio (ej. el correo del PDF). */
.st-sv-dato { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--st-teal-tint); }
.st-sv-dato[hidden] { display: none; }
.st-sv-dato > span { font: 700 13px/1.2 var(--font-inter); color: var(--st-ink); }
.st-sv-dato > span b { color: var(--st-accent); }
.st-sv-dato input { width: 100%; height: 44px; padding: 0 14px; border: 2px solid #fff; border-radius: 10px; background: #fff; font: 500 14.5px/1 var(--font-inter); color: var(--st-ink); }
.st-sv-dato input:focus { outline: none; border-color: var(--st-teal); }

.adm-svo-dato[hidden], .adm-svo-dato-btn[hidden] { display: none !important; }
.adm-svo-dato-btn { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; font: 600 12.5px/1.2 var(--font-inter); color: var(--st-ink-2); cursor: pointer; }
.adm-svo-dato-btn:hover { color: var(--st-ink); text-decoration: underline; }
@media (max-width: 639px) { .adm-svo { grid-template-areas: 'nom nom x' 'pre mini mini' 'sw sw sw' 'dbtn dbtn dbtn' 'dato dato dato'; } .adm-svo-dato-btn { grid-area: dbtn; } }
.st-sv-dato input { border: 1px solid color-mix(in srgb, var(--st-teal) 45%, transparent); }

/* Arreglo: al tocar "Disponible" el modal se ponía en blanco. La casilla
   oculta (position:absolute) tomaba como referencia el panel del modal,
   quedaba fuera de la zona con scroll y, al enfocarla, el navegador
   desplazaba el panel entero. Ahora vive dentro del propio interruptor y
   el panel no se puede desplazar (overflow: clip). */
.adm-svo-switch { position: relative; }
.adm-svo-switch input { top: 0; left: 0; margin: 0; pointer-events: none; }
.adm-sv-panel { overflow: clip; }

/* ==========================================================
   PÁGINA "NOSOTROS" (/about) — textos y fotos desde /admin/nosotros.
   Lo memorable es la fachada: la foto de la tienda con su rótulo
   pintado encima (como el letrero de la entrada). Las demás fotos
   cuelgan de la misma varilla dorada del mostrador del inicio.
   ========================================================== */
.ns-hero { padding: 28px 0 36px; }
.ns-hero-grid { display: grid; gap: 26px; align-items: center; }
.ns-hero-txt h1 {
    margin: 0;
    font: 800 clamp(30px, 6.4vw, 50px)/1.04 var(--font-playfair);
    color: var(--st-ink);
    letter-spacing: -.01em;
    text-wrap: balance;
}
.ns-intro { margin: 14px 0 0; max-width: 46ch; font: 400 17px/1.55 var(--font-inter); color: var(--st-ink-2); }
.ns-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ns-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    font: 700 14.5px/1 var(--font-inter);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.ns-btn:hover { transform: translateY(-1px); }
.ns-btn:focus-visible { outline: 3px solid var(--color-yolotl-gold); outline-offset: 2px; }
.ns-btn--main { background: var(--st-ink); color: #fff; }
.ns-btn--main:hover { background: #1f1c33; color: #fff; }
.ns-btn--wa { background: #1FAF55; color: #fff; }
.ns-btn--wa:hover { background: #178a43; color: #fff; }
.ns-btn--claro { background: #fff; color: var(--st-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st-ink) 18%, transparent); }

/* La fachada + rótulo */
.ns-fachada { position: relative; margin: 0 0 22px; }
.ns-fachada img {
    display: block; width: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 22px 40px -22px rgba(46,42,71,.55);
}
.ns-fachada.is-vacia {
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    border-radius: 22px;
    background:
        radial-gradient(circle, rgba(255,255,255,.12) 1.7px, transparent 2.3px) 0 0 / 22px 22px,
        #087F7F;
    color: rgba(255,255,255,.85);
    font-size: 72px;
}
.ns-rotulo {
    position: absolute;
    left: 16px; bottom: -22px;
    max-width: calc(100% - 32px);
    padding: 12px 18px 11px;
    background: #FFF8EC;
    border: 3px solid var(--st-ink);
    border-radius: 12px;
    box-shadow: 5px 5px 0 var(--color-yolotl-gold);
    transform: rotate(-1.5deg);
}
.ns-rotulo strong { display: block; font: 800 22px/1 var(--font-playfair); color: var(--st-ink); }
.ns-rotulo strong span { font-size: 15px; color: var(--st-accent); }
.ns-rotulo-estado { display: block; margin-top: 6px; font: 600 12.5px/1.2 var(--font-inter); color: var(--st-ink-2); }
.ns-rotulo-estado i { font-size: 7px; vertical-align: middle; margin-right: 3px; color: var(--color-yolotl-gold); }
.ns-rotulo-estado.is-abierta i { color: #16a34a; }

/* Pared de fotos */
.ns-pared {
    position: relative;
    margin-top: 18px;
    padding: 28px 0 26px;
    /* Mismo tablero rosa palo que el mostrador del inicio. */
    background-color: #FBE4EB;
    background-image:
        radial-gradient(circle, rgba(214,51,108,.13) 1.7px, transparent 2.3px),
        radial-gradient(circle, rgba(255,255,255,.75) 1.7px, transparent 2.3px);
    background-size: 22px 22px, 22px 22px;
    background-position: 0 0, 11px 11px;
    border-top: 6px solid var(--color-yolotl-gold);
    color: var(--st-ink);
}
.ns-pared h2 { margin: 0; font: 800 26px/1.1 var(--font-playfair); color: var(--st-ink); }
.ns-pared-fotos {
    --orilla: max(20px, calc((100vw - 1180px) / 2 + 16px));
    position: relative;
    display: flex; gap: 18px;
    margin: 0; padding: 40px var(--orilla) 12px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--orilla);
    scrollbar-width: none;
}
.ns-pared-fotos::-webkit-scrollbar { display: none; }
/* La varilla (fuera del carril que se desliza, para que no se mueva con él) */
.ns-pared-rail { position: relative; }
.ns-pared-rail::before {
    content: '';
    position: absolute; left: 0; right: 0;
    top: 20px; height: 5px;
    background: linear-gradient(var(--color-yolotl-gold-light), var(--color-yolotl-gold) 60%, #C98A22);
    box-shadow: 0 3px 4px rgba(0,0,0,.25);
}
.ns-pared-fotos { z-index: 1; }
.ns-foto {
    position: relative; z-index: 1;
    flex: 0 0 min(72vw, 260px);
    scroll-snap-align: start;
    transform-origin: 50% -20px;
}
.ns-foto:nth-child(3n+1) { transform: rotate(-1.6deg); }
.ns-foto:nth-child(3n+2) { transform: rotate(1.2deg); }
.ns-foto:nth-child(3n)   { transform: rotate(-.5deg); }
/* La pinza que la detiene */
.ns-foto::before {
    content: '';
    position: absolute; z-index: 2;
    left: 50%; top: -14px;
    width: 14px; height: 26px;
    border-radius: 3px;
    background: linear-gradient(#E8E2D6, #BFB6A4);
    transform: translateX(-50%);
    box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.ns-foto figure {
    margin: 0;
    padding: 10px 10px 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 22px -8px rgba(0,0,0,.45);
}
.ns-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.ns-foto figcaption { margin-top: 9px; font: 600 13.5px/1.3 var(--font-inter); color: var(--st-ink); text-align: center; }

/* Historia y razones */
.ns-historia { display: grid; gap: 28px; padding-top: 44px; padding-bottom: 44px; }
.ns-historia h2, .ns-visita h2 { margin: 0 0 12px; font: 800 28px/1.1 var(--font-playfair); color: var(--st-ink); }
.ns-historia-txt p { margin: 0 0 14px; max-width: 62ch; font: 400 16.5px/1.7 var(--font-inter); color: var(--st-ink-2); }
.ns-razones { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; align-content: start; }
.ns-razones li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--st-ink) 8%, transparent), 0 10px 24px -18px rgba(46,42,71,.5);
}
.ns-razon-ico {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--st-teal-tint);
    color: #087F7F;
    font-size: 20px;
}
.ns-razones h3 { margin: 2px 0 0; font: 700 16px/1.25 var(--font-inter); color: var(--st-ink); }
.ns-razones p { margin: 4px 0 0; font: 400 14px/1.5 var(--font-inter); color: var(--st-ink-2); }

/* Visítanos */
.ns-visita { padding: 40px 0 48px; background: #fff; border-top: 1px solid color-mix(in srgb, var(--st-ink) 8%, transparent); }
.ns-visita-grid { display: grid; gap: 24px; }
.ns-dir, .ns-tel { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font: 500 15.5px/1.45 var(--font-inter); color: var(--st-ink); }
.ns-dir i, .ns-tel i { color: var(--st-accent); margin-top: 2px; }
.ns-tel a { color: inherit; font-weight: 700; text-decoration: none; }
.ns-horario { width: 100%; max-width: 380px; margin: 0 0 14px; border-collapse: collapse; font: 400 15px/1.4 var(--font-inter); }
.ns-horario caption { text-align: left; margin-bottom: 4px; font: 700 13px/1 var(--font-inter); color: var(--st-ink-2); }
.ns-horario th, .ns-horario td { padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--st-ink) 15%, transparent); text-align: left; font-weight: 500; color: var(--st-ink); }
.ns-horario td { text-align: right; font-variant-numeric: tabular-nums; }
.ns-horario tr.is-hoy th, .ns-horario tr.is-hoy td { font-weight: 700; }
.ns-horario th span { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--color-yolotl-gold); font: 700 11px/1.3 var(--font-inter); color: var(--st-ink); }
.ns-mapa { min-height: 280px; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 28px -18px rgba(46,42,71,.5); }
.ns-mapa iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; }

@media (min-width: 900px) {
    .ns-hero { padding: 48px 0 56px; }
    .ns-hero-grid { grid-template-columns: 1fr 1.15fr; gap: 48px; }
    .ns-fachada { margin-bottom: 0; }
    .ns-rotulo { left: -22px; bottom: 28px; }
    .ns-pared-fotos { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 52px; }
    .ns-foto { flex-basis: 240px; }
    .ns-historia { grid-template-columns: 1.3fr 1fr; gap: 56px; padding-top: 64px; padding-bottom: 64px; }
    .ns-visita-grid { grid-template-columns: 1fr 1.2fr; align-items: stretch; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .ns-btn { transition: none; }
    .ns-btn:hover { transform: none; }
}

/* ==========================================================
   PULIDO DEL INICIO (oct 2026)
   ========================================================== */
/* "Precio por metro" bajo el precio en la página del producto. */
.st-pd-unidad { margin-top: 4px; font: 600 12.5px/1.2 var(--font-inter); color: var(--st-ink-2); }

/* Sugerencias del buscador del encabezado: foto, nombre, precio por unidad
   y "También busqué" con los sinónimos usados (/admin/sinonimos). */
.st-sug {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(46, 42, 71, .18);
    overflow: hidden;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}
.st-sug-tambien {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    padding: 9px 14px;
    background: var(--color-yolotl-cream, #FFF8EC);
    border-bottom: 1px solid var(--st-line);
    font: 500 12.5px/1.3 var(--font-inter);
    color: var(--st-ink-2);
}
.st-sug-tambien span {
    padding: 2px 9px; border-radius: 999px;
    background: #fff; border: 1px solid #F1D9A8;
    color: #8A5A0B; font-weight: 600; font-size: 12px;
}
.st-sug-item {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--st-line);
    color: var(--st-ink); text-decoration: none;
}
.st-sug-item:hover, .st-sug-item:focus-visible { background: #FBE4EB; outline: none; }
.st-sug-foto { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #F4F0F7; }
.st-sug-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-sug-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-sug-nom { font: 600 14px/1.25 var(--font-inter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-sug-sub { font: 500 11.5px/1.2 var(--font-inter); color: var(--st-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-sug-precio { text-align: right; font: 800 17px/1 var(--font-playfair); white-space: nowrap; }
.st-sug-precio small { display: block; margin-top: 2px; font: 500 10.5px var(--font-inter); color: var(--st-ink-2); }
.st-sug-todos {
    display: block; padding: 11px; text-align: center;
    font: 700 13.5px var(--font-inter); color: var(--st-accent-dk, #B02457);
    background: #FCFAFD; text-decoration: none;
}
.st-sug-todos:hover { background: #FBE4EB; }
.st-sug-vacio { padding: 18px 16px; text-align: center; font: 400 13.5px/1.45 var(--font-inter); color: var(--st-ink-2); }
.st-sug-vacio b { display: block; color: var(--st-ink); font-size: 14.5px; margin-bottom: 4px; }
.st-sug-vacio a { color: var(--st-accent-dk, #B02457); text-decoration: underline; }
/* El buscador del celular le ponía relleno y esquinas a cada renglón. */
.search-bar .st-sug.search-suggestions { padding: 0; }
.search-bar .st-sug .st-sug-item { border-radius: 0; }

/* Unidad de venta en las etiquetas del mostrador ("$10 / metro"). */
.st-etiqueta-monto { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.st-etiqueta-unidad { font: 500 11px/1 var(--font-inter); opacity: .65; }

/* Kits de temporada con 3 o más: el título y el reloj arriba en una
   fila, y los kits en 3 columnas parejas (antes quedaban 2 + 1 con hueco). */
@media (min-width: 1024px) {
    .st-temporada-grid:has(.st-temporada-kits > li:nth-child(3)) { grid-template-columns: 1fr; gap: 22px; }
    .st-temporada-grid:has(.st-temporada-kits > li:nth-child(3)) .st-temporada-intro {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 40px;
        align-items: end;
    }
    .st-temporada-grid:has(.st-temporada-kits > li:nth-child(3)) .st-temporada-intro > :not(.st-temporada-reloj) { grid-column: 1; }
    .st-temporada-grid:has(.st-temporada-kits > li:nth-child(3)) .st-temporada-reloj { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
    .st-temporada-grid:has(.st-temporada-kits > li:nth-child(3)) .st-temporada-kits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pared de fotos de Nosotros: filas parejas según cuántas fotos haya
   (con 5 quedaban 4 + 1 sola abajo). */
@media (min-width: 900px) {
    .ns-pared-fotos:has(> .ns-foto:nth-child(5):last-child) .ns-foto { flex-basis: min(240px, calc((100% - 40px) / 3)); }
    .ns-pared-fotos:has(> .ns-foto:nth-child(6):last-child) .ns-foto,
    .ns-pared-fotos:has(> .ns-foto:nth-child(9):last-child) .ns-foto { flex-basis: min(280px, calc((100% - 3 * 18px) / 3)); }
}
@media (min-width: 1200px) {
    .ns-pared-fotos:has(> .ns-foto:nth-child(5):last-child) .ns-foto { flex-basis: min(220px, calc((100% - 80px) / 5)); }
}

/* "Ver más" / "Ver todas" en texto normal, como el resto de botones. */
.st-more { text-transform: none; letter-spacing: 0; font-size: 13.5px; }

/* Promociones de hoy: en celular y tablet, fila deslizable de tarjetas
   compactas (antes eran 3 bloques apilados de ~330px cada uno). */
@media (max-width: 1023px) {
    .st-promos-grid {
        display: flex !important;
        gap: 12px !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        margin: 0 -16px;
        padding: 4px 16px 18px;
        scrollbar-width: none;
    }
    .st-promos-grid::-webkit-scrollbar { display: none; }
    .st-promos-grid > .sos-promo-card {
        flex: 0 0 min(78%, 320px);
        scroll-snap-align: start;
        padding: 18px !important;
    }
    .st-promos-grid .sos-promo-card > span:first-of-type:not(.sos-tape-strip) { width: 40px; height: 40px; font-size: 20px; margin-bottom: 8px; }
    .st-promos-grid .sos-promo-card h3 { font-size: 17px; }
    .st-promos-grid .sos-comic-btn { margin-top: 14px; }
}

/* Ofertas del día con menos de 4 productos: tarjetas del mismo ancho,
   centradas (antes quedaba un hueco a la derecha). */
@media (min-width: 900px) {
    #ofertasContainer:has(> .pcard:nth-child(3):last-child) { grid-template-columns: repeat(3, calc((100% - 72px) / 4)) !important; justify-content: center; }
    #ofertasContainer:has(> .pcard:nth-child(2):last-child) { grid-template-columns: repeat(2, calc((100% - 72px) / 4)) !important; justify-content: center; }
    #ofertasContainer:has(> .pcard:only-child) { grid-template-columns: calc((100% - 72px) / 4) !important; justify-content: center; }
}