/* ════════════════════════════════════════════════════════════════════════
   Tema del rubro JUGUETERÍA ARTESANAL (Clamacalma).
   Se carga SOLO cuando TipoNegocio == JugueteriaArtesanal (ver _Layout.cshtml),
   después de site.css. Re-tematiza todo el sitio sobreescribiendo las variables
   de paleta/tipografía que site.css define en :root — sin tocar cada componente.

   Paleta: CREMA cálida (superficies) + VERDE BOSQUE #1d6816 (acento principal:
   CTAs, títulos, navbar, pills) + MADERA (texto). Fuentes Playfair/Inter/Coiny.
   Identidad fiel al sitio standalone pero con el verde como color de marca.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Coiny';
    src: url('/tenants/clamacalma/fonts/Coiny-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body.rubro-jugueteria {
    /* Superficies — crema cálida en vez del beige panadero */
    --canvas:  #F5EBD8;
    --paper:   #FDF6EC;
    --surface: #FFFFFF;

    /* Tinta — marrón madera */
    --ink:    #3D2E1F;
    --ink-70: rgba(61, 46, 31, .70);
    --ink-50: rgba(61, 46, 31, .50);
    --ink-30: rgba(61, 46, 31, .30);
    --ink-12: rgba(61, 46, 31, .12);
    --ink-06: rgba(61, 46, 31, .06);

    /* Acentos — VERDE BOSQUE de Clamacalma (#1d6816) */
    --terra:      #1d6816;   /* acento principal (CTAs, navbar hover, chip "encargo", títulos) */
    --terra-600:  #17510f;   /* verde más oscuro (hover) */
    --olive:      #4f7a3a;   /* verde apagado (estado disponible, eyebrows/labels) */
    --wheat:      #C89F5C;   /* decorativo cálido (detalles, madera) */
    --border:     #E6D9C0;

    /* Tipografía del rubro */
    --display: "Playfair Display", Georgia, serif;
    --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Wordmark de marca en Coiny (hero + footer + logo), minúsculas como el standalone. */
body.rubro-jugueteria .cc-hero-brand,
body.rubro-jugueteria .site-footer-brand,
body.rubro-jugueteria .logo-s {
    font-family: 'Coiny', 'Playfair Display', Georgia, serif;
    text-transform: lowercase;
    letter-spacing: .04em;
}

/* ───────── Navbar propio del rubro ─────────
   El header usa las clases .site-header/.site-nav de site.css (Salvado); acá las
   re-tematizamos SOLO para juguetería: barra crema translúcida pegajosa con blur,
   wordmark verde a la izquierda, links madera→verde en hover. */
body.rubro-jugueteria .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(253, 246, 236, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ink-12);
}
body.rubro-jugueteria .logo-s {
    color: var(--terra);
    font-size: 1.6rem;
}
body.rubro-jugueteria #site-nav-menu a {
    color: var(--ink-70);
    font-weight: 500;
    transition: color .2s ease;
}
body.rubro-jugueteria #site-nav-menu a:hover {
    color: var(--terra);
}
/* CTA del header (botón "Volver"/acción) en verde. */
body.rubro-jugueteria .site-nav .cta {
    background: var(--terra);
    color: var(--paper);
}
body.rubro-jugueteria .site-nav .cta:hover {
    background: var(--terra-600);
}

/* Home: navbar TRANSPARENTE sobre la foto del hero (full-bleed). Sale del flujo
   (absolute) para que la foto arranque desde arriba de todo. Un scrim verde sutil
   sólo en la franja superior da legibilidad a los links sin tapar la foto. Las
   demás páginas (Encargar, etc.) conservan el navbar crema pegajoso de arriba. */
body.rubro-jugueteria .site-header.cc-hero-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: linear-gradient(to bottom, rgba(18, 45, 12, .42) 0%, rgba(18, 45, 12, .12) 55%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
}
body.rubro-jugueteria .cc-hero-header #site-nav-menu a {
    color: #FDF6EC;
    text-shadow: 0 1px 8px rgba(18, 45, 12, .6);
}
body.rubro-jugueteria .cc-hero-header #site-nav-menu a:hover {
    color: #ffffff;
}
body.rubro-jugueteria .cc-hero-header .logo-s img {
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .28));
}
body.rubro-jugueteria .cc-hero-header .nav-toggle span {
    background: #FDF6EC;
}

/* ───────── Hero (foto, sin línea separadora) ───────── */
body.rubro-jugueteria .cc-hero {
    position: relative;
    /* Full-bleed: ocupa toda la primera pantalla. El navbar es absolute (fuera de
       flujo), así que el hero arranca pegado arriba → 100vh lo deja exacto, sin que
       asome la sección siguiente. dvh para que en mobile la barra dinámica del
       browser no deje el hero corto ni genere scroll fantasma; vh como fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--paper);
    overflow: hidden;
}
body.rubro-jugueteria .cc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('/tenants/clamacalma/hero/hero.jpeg') center/cover no-repeat;
    /* Foto más protagonista: saturación viva + leve realce, sin lavarla. */
    filter: saturate(1.18) contrast(1.04);
}
/* Scrim MUY liviano para que la foto se vea bien: casi transparente en el centro,
   un toque verde (#1d6816) en los bordes para integrar con la paleta, y un velo
   inferior un poco más marcado que sostiene el contraste del wordmark/CTAs. */
body.rubro-jugueteria .cc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(29, 104, 22, .04) 0%, rgba(253, 246, 236, 0) 38%, rgba(29, 104, 22, .22) 100%),
        radial-gradient(ellipse at center, rgba(253, 246, 236, .18) 0%, rgba(253, 246, 236, .02) 48%, rgba(29, 104, 22, .14) 100%);
}
body.rubro-jugueteria .cc-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 24px 20px;
}
body.rubro-jugueteria .cc-hero-brand {
    font-weight: 400;
    color: var(--terra);
    font-size: clamp(3.2rem, 11vw, 6.5rem);
    line-height: 1.12;
    margin: 0 0 14px;
    /* Halo crema + sombra sutil para que el wordmark verde se lea sobre la foto. */
    text-shadow: 0 2px 26px rgba(253, 246, 236, .95), 0 1px 3px rgba(20, 60, 14, .25);
}
/* Tagline · tratamiento B (hero v2): blanco bold con sombra verde profunda,
   sin caja. Se lee siempre sobre la foto y deja el hero más limpio. */
body.rubro-jugueteria .cc-hero-tagline {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 700;
    color: #ffffff;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    letter-spacing: .03em;
    margin: 0;
    text-shadow:
        0 1px 2px rgba(18, 45, 12, .85),
        0 2px 14px rgba(18, 45, 12, .75),
        0 4px 30px rgba(18, 45, 12, .55);
}

/* CTA único anclado abajo + indicador de scroll (hero v2 · variante B). */
body.rubro-jugueteria .cc-hero-bottom {
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
body.rubro-jugueteria .cc-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 42px;
    border-radius: 32px;
    background: var(--terra);
    color: #fff;
    font-weight: 600;
    font-size: 1.08rem;
    text-decoration: none;
    transition: .25s ease;
    box-shadow: 0 6px 24px rgba(29, 104, 22, .42), inset 0 0 0 1.5px rgba(253, 246, 236, .25);
}
body.rubro-jugueteria .cc-hero-cta:hover {
    background: var(--terra-600);
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(29, 104, 22, .5);
}
body.rubro-jugueteria .cc-hero-cta svg {
    transition: transform .25s ease;
}
body.rubro-jugueteria .cc-hero-cta:hover svg {
    transform: translateY(3px);
}
body.rubro-jugueteria .cc-scroll-cue {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(253, 246, 236, .75);
    border-radius: 14px;
    position: relative;
    opacity: .85;
}
body.rubro-jugueteria .cc-scroll-cue::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: rgba(253, 246, 236, .9);
    animation: cc-cue 1.8s ease-in-out infinite;
}
@keyframes cc-cue {
    0%, 100% { transform: translateY(0); opacity: 1; }
    60% { transform: translateY(12px); opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
    body.rubro-jugueteria .cc-scroll-cue::after { animation: none; }
}

/* ───────── Photo strip (marquee de fotos del catálogo) ─────────
   Separador firma del sitio: scroll horizontal infinito de fotos del catálogo,
   armado automáticamente (ver _PhotoStripClamacalma). Las imágenes se duplican
   en el markup (2×) y la animación traslada -50% para un loop sin costura. */
body.rubro-jugueteria .cc-strip {
    background: var(--paper);
    padding: 40px 0;
    overflow: hidden;
    border-top: 1px solid var(--ink-06);
    border-bottom: 1px solid var(--ink-06);
}
body.rubro-jugueteria .cc-strip-inner {
    display: flex;
    gap: 16px;
    width: max-content;
    /* Corre SIEMPRE a velocidad constante — sin pausa ni cambio en hover. */
    animation: cc-strip-scroll 70s linear infinite;
}
body.rubro-jugueteria .cc-strip-img {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(61, 46, 31, .10);
}
@keyframes cc-strip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (min-width: 1024px) {
    body.rubro-jugueteria .cc-strip-img {
        width: 280px;
        height: 190px;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.rubro-jugueteria .cc-strip-inner {
        animation: none;
    }
}

/* ───────── CTAs primarios del sitio en verde (mostrador, encargar, etc.) ───────── */
body.rubro-jugueteria .btn--primary,
body.rubro-jugueteria .encargar-cta .btn {
    background: var(--terra);
    color: var(--paper);
}
body.rubro-jugueteria .btn--primary:hover,
body.rubro-jugueteria .encargar-cta .btn:hover {
    background: var(--terra-600);
}

/* ───────── Info band: encabezado "Dónde encontrarnos" (rubro juguetería) ───────── */
body.rubro-jugueteria .info-band-heading {
    grid-column: 1 / -1;
    font-family: var(--display);
    color: var(--terra);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    margin: 0 0 8px;
}

/* ───────── Sección "Nuestra historia" (about, rubro juguetería) ─────────
   El verde es el de la marca y se queda. Lo que rompía era la FORMA: un bloque
   oscuro entrando a sangre completa, de un frame al otro, justo después del
   crema. Ahora el bloque se despega de los bordes, redondea esquinas y apoya
   sobre una sombra → se lee como una pieza sobre el crema, no como un tajo. */
body.rubro-jugueteria .cc-historia-band {
    background: var(--paper);
    padding: 34px 40px 44px;
}

body.rubro-jugueteria .cc-historia {
    background: var(--canvas);
    padding: 74px 0;
    max-width: 1340px;
    margin: 0 auto;
    border-radius: 34px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 26px 70px rgba(23, 63, 14, .22);
}

/* Veta de madera muy sutil: saca el "plano de pintura" del verde liso. */
body.rubro-jugueteria .cc-historia::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background: repeating-linear-gradient(94deg, rgba(0, 0, 0, .32) 0 2px, transparent 2px 9px);
    mix-blend-mode: multiply;
}

body.rubro-jugueteria .cc-historia-inner {
    position: relative;
}

/* Sellos: llenan el hueco que quedaba bajo el texto y dicen lo que diferencia
   al producto. */
.cc-sellos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px;
    max-width: 480px;
}

.cc-sello {
    background: rgba(253, 246, 236, .08);
    border: 1px solid rgba(253, 246, 236, .16);
    border-radius: 14px;
    padding: 14px 12px;
    text-align: center;
}

.cc-sello svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 8px;
    stroke: #eac98d;
}

.cc-sello span {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(253, 246, 236, .92);
    line-height: 1.35;
}

/* En los temas claros los sellos invierten contraste. */
body.rubro-jugueteria .cc-historia--crema .cc-sello,
body.rubro-jugueteria .cc-historia--salvia .cc-sello {
    background: rgba(61, 46, 31, .05);
    border-color: rgba(61, 46, 31, .14);
}

body.rubro-jugueteria .cc-historia--crema .cc-sello svg,
body.rubro-jugueteria .cc-historia--salvia .cc-sello svg {
    stroke: var(--olive);
}

body.rubro-jugueteria .cc-historia--crema .cc-sello span,
body.rubro-jugueteria .cc-historia--salvia .cc-sello span {
    color: var(--ink);
}

@media (max-width: 900px) {
    body.rubro-jugueteria .cc-historia-band { padding: 20px 16px 26px; }
    body.rubro-jugueteria .cc-historia { border-radius: 24px; }
    .cc-sellos { max-width: none; }
}
/* Contenedor propio: mismo ancho que .visitar-block (1180px) — el about queda
   más angosto que el mostrador (1680px) a propósito, lectura cómoda. */
body.rubro-jugueteria .cc-historia-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 56px;
}
body.rubro-jugueteria .cc-historia-eyebrow {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--olive);
    margin: 0 0 12px;
}
body.rubro-jugueteria .cc-historia-title {
    font-family: var(--display);
    color: var(--terra);
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.1;
    margin: 0 0 20px;
}
body.rubro-jugueteria .cc-historia-p {
    color: var(--ink-70);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 54ch;
    margin: 0 0 16px;
}
/* Media: con 1 foto, imagen sola; con 2-3, collage = principal ANCHA arriba +
   cuadradas abajo. Aspect-ratios fijos → siempre prolijo, nunca estirado. */
body.rubro-jugueteria .cc-historia-media img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(61, 46, 31, .16);
}
body.rubro-jugueteria .cc-historia-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
body.rubro-jugueteria .cc-historia-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(61, 46, 31, .16);
}
body.rubro-jugueteria .cc-historia-collage-main {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}
body.rubro-jugueteria .cc-historia-collage-side {
    aspect-ratio: 1 / 1;
}

/* ── Temas de fondo (HistoriaTema). El default del rubro es Bosque. ──
   Crema = look base (no override). Los oscuros invierten el texto. */
body.rubro-jugueteria .cc-historia--bosque {
    background: linear-gradient(160deg, #173f0e 0%, #1b5212 55%, #17430f 100%);
}
body.rubro-jugueteria .cc-historia--bosque .cc-historia-eyebrow { color: #c89f5c; }
body.rubro-jugueteria .cc-historia--bosque .cc-historia-title { color: var(--paper); }
body.rubro-jugueteria .cc-historia--bosque .cc-historia-p { color: rgba(253, 246, 236, .82); }
body.rubro-jugueteria .cc-historia--bosque .cc-historia-collage img { box-shadow: 0 18px 48px rgba(0, 0, 0, .4); }

body.rubro-jugueteria .cc-historia--salvia {
    background: #e0e9d6;
}
body.rubro-jugueteria .cc-historia--salvia .cc-historia-eyebrow { color: #4f7a3a; }
body.rubro-jugueteria .cc-historia--salvia .cc-historia-title { color: var(--terra); }
body.rubro-jugueteria .cc-historia--salvia .cc-historia-p { color: rgba(61, 46, 31, .78); }

body.rubro-jugueteria .cc-historia--madera {
    background: linear-gradient(165deg, #342718 0%, #3d2e1f 60%, #302417 100%);
}
body.rubro-jugueteria .cc-historia--madera .cc-historia-eyebrow { color: #c89f5c; }
body.rubro-jugueteria .cc-historia--madera .cc-historia-title { color: var(--paper); }
body.rubro-jugueteria .cc-historia--madera .cc-historia-p { color: rgba(253, 246, 236, .78); }
body.rubro-jugueteria .cc-historia--madera .cc-historia-collage img { box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }

@media (min-width: 860px) {
    body.rubro-jugueteria .cc-historia-inner {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }
}
@media (max-width: 720px) {
    body.rubro-jugueteria .cc-historia { padding: 56px 0; }
    body.rubro-jugueteria .cc-historia-inner { padding: 0 24px; }
}

/* ═════════ CATÁLOGO EN GRILLA DE FOTOS (home juguetería) ═════════
   En panadería el mostrador es una LISTA agrupada por categoría: el cliente
   escanea nombre y precio. Acá el producto es visual — un juguete de madera se
   elige por cómo se ve — así que la foto ocupa la card entera.

   Las cards conservan la clase .prod-row (el JS del lightbox engancha por ahí),
   por eso todo esto empieza reseteando el layout de fila de site.css. */
body.rubro-jugueteria .mostrador-grid--fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 26px 22px;
    /* El grid de panadería apila secciones; este es plano. */
    max-width: 1320px;
    margin: 0 auto;
}

body.rubro-jugueteria .mostrador-grid--fotos .prod-row {
    /* Reset del layout de fila (site.css) → card en columna. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--ink-06);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 3px 14px rgba(61, 46, 31, .06);
    cursor: pointer;
    transition: transform var(--cc-dur, .26s) ease, box-shadow .26s ease;
}

body.rubro-jugueteria .mostrador-grid--fotos .prod-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(61, 46, 31, .16);
}

body.rubro-jugueteria .mostrador-grid--fotos .prod-row.off {
    opacity: .62;
}

/* La primera card va destacada a 2×2: jerarquiza el producto insignia y de paso
   cierra la grilla (17 productos en 4 columnas dejan una card sola al final). */
@media (min-width: 1100px) {
    body.rubro-jugueteria .mostrador-grid--fotos .prod-row:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
    body.rubro-jugueteria .mostrador-grid--fotos .prod-row:first-child .cc-card-media {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    body.rubro-jugueteria .mostrador-grid--fotos .prod-row:first-child .cc-card-body {
        flex: 0 0 auto;
        padding: 20px 22px 22px;
    }
    body.rubro-jugueteria .mostrador-grid--fotos .prod-row:first-child .cc-card-name {
        font-size: 1.7rem;
    }
}

.cc-card-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--canvas);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

body.rubro-jugueteria .mostrador-grid--fotos .prod-row:hover .cc-card-media img {
    transform: scale(1.05);
}

.cc-card-fallback {
    width: 46%;
    height: auto;
    color: var(--ink-30);
}

/* Contador de fotos: siempre cierto y muestra que hay mucho más para ver. */
.cc-card-fotos {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(23, 63, 14, .82);
    color: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: .74rem;
    font-weight: 600;
}

.cc-card-fotos svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.cc-card-body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cc-card-cat {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--olive);
}

.cc-card-name {
    font-size: 1.12rem;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
}

.cc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.cc-card-price {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
}

@media (max-width: 720px) {
    body.rubro-jugueteria .mostrador-grid--fotos {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }
    .cc-card-body { padding: 12px 12px 14px; }
    .cc-card-name { font-size: 1rem; }
    .cc-card-cat { font-size: .62rem; }
}

/* Chips en UNA fila que scrollea — son 17 categorías y desbordaban en dos
   líneas. Fade en el borde derecho para que se lea que hay más. */
body.rubro-jugueteria .mostrador-filter-chips--fila {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
}

body.rubro-jugueteria .mostrador-filter-chips--fila::-webkit-scrollbar {
    display: none;
}

body.rubro-jugueteria .mostrador-filter-chips--fila > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* ═════════ VISOR 3D DE PRODUCTO ═════════
   El 3D dejó de ser fondo y pasó a ser producto: Tangram, Cubo Soma y Arco iris
   son tres de los juguetes del catálogo y ya existían como modelos. El visor
   muestra qué se HACE con el juguete (el tangram se arma en pájaro, gato y
   conejo con las mismas 7 piezas), que es lo que una foto fija no cuenta.
   Aparece sólo a pedido, nunca por encima del contenido. */
.cc-card-3d {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(253, 246, 236, .94);
    color: var(--terra);
    border: 0;
    cursor: pointer;
    border-radius: 20px;
    padding: 7px 13px;
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(23, 63, 14, .26);
    transition: background .2s ease, transform .2s ease;
}

.cc-card-3d:hover {
    background: #fff;
    transform: translateY(-1px);
}

.cc-card-3d svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cc-visor3d-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(23, 63, 14, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cc-visor3d-backdrop.open {
    display: flex;
}

.cc-visor3d {
    background: var(--paper);
    border-radius: 22px;
    width: min(620px, 100%);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}

.cc-visor3d-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 12px;
}

.cc-visor3d-titulo {
    font-family: 'Coiny', 'Playfair Display', Georgia, serif;
    text-transform: lowercase;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--terra);
    letter-spacing: .01em;
    margin: 0;
}

.cc-visor3d-sub {
    font-size: .85rem;
    color: var(--ink-70);
    margin: 2px 0 0;
}

.cc-visor3d-cerrar {
    background: var(--ink-06);
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--ink-70);
    font-size: 1.1rem;
    line-height: 1;
}

.cc-visor3d-cerrar:hover {
    background: var(--ink-12);
    color: var(--ink);
}

.cc-visor3d-lienzo {
    height: 340px;
    margin: 0 22px;
    border-radius: 16px;
    position: relative;
    background: radial-gradient(circle at 50% 42%, #fff 0%, var(--canvas) 78%);
    border: 1px solid var(--border);
}

.cc-visor3d-etiqueta {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    background: rgba(23, 63, 14, .88);
    color: var(--paper);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.cc-visor3d-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 22px;
}

.cc-visor3d-precio {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.cc-visor3d-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--terra);
    color: #fff;
    border-radius: 32px;
    padding: 14px 28px;
    font-weight: 600;
    text-decoration: none;
    transition: background .22s ease, transform .22s ease;
}

.cc-visor3d-cta:hover {
    background: var(--terra-600);
    transform: translateY(-2px);
}

@media (max-width: 620px) {
    .cc-visor3d-lienzo { height: 260px; }
    .cc-card-3d { font-size: .7rem; padding: 6px 11px; }
}

/* ───────── Canales de venta (panel "Dónde encontrarnos", juguetería) ─────────
   Reemplaza la línea de texto suelta que dejaba medio panel vacío. */
.vb-canales {
    display: grid;
    gap: 10px;
    margin: 4px 0 auto;
}

.vb-canal-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: var(--paper);
    border: 1px solid var(--ink-06);
    border-radius: 14px;
    padding: 14px 16px;
}

.vb-canal-row svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    stroke: var(--terra);
}

.vb-canal-row span {
    font-size: .88rem;
    color: var(--ink-70);
    line-height: 1.5;
}

.vb-canal-row b {
    display: block;
    font-size: .94rem;
    font-weight: 600;
    color: var(--ink);
}

.vb-canal-row--destacada {
    background: rgba(29, 104, 22, .06);
    border-color: rgba(29, 104, 22, .22);
}

/* ───────── Banda de cierre (solo juguetería) ───────── */
.cc-cierre {
    background: linear-gradient(150deg, #1d6816 0%, #17510f 100%);
    padding: 60px 24px;
    text-align: center;
}

.cc-cierre-inner {
    max-width: 720px;
    margin: 0 auto;
}

.cc-cierre h2 {
    color: var(--paper);
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    margin: 0;
}

.cc-cierre h2 em {
    font-style: normal;
    color: #eac98d;
}

.cc-cierre p {
    color: rgba(253, 246, 236, .8);
    margin: 14px auto 26px;
    max-width: 46ch;
}

.cc-cierre-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cc-cierre-primary,
.cc-cierre-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 32px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform .22s ease, background .22s ease;
}

.cc-cierre-primary {
    background: var(--paper);
    color: var(--terra);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}

.cc-cierre-primary:hover {
    background: #fff;
    transform: translateY(-2px);
}

.cc-cierre-ghost {
    color: var(--paper);
    box-shadow: inset 0 0 0 1.5px rgba(253, 246, 236, .5);
}

.cc-cierre-ghost:hover {
    background: rgba(253, 246, 236, .12);
    transform: translateY(-2px);
}

/* ───────── Barra de filtro del mostrador (home juguetería) ─────────
   site.css le pone top: 67px/60px para colgarla debajo del .site-header sticky
   de Salvado. En la home de juguetería el navbar es absolute sobre el hero (no
   sticky), así que ese offset deja una franja vacía por la que se ven pasar las
   cards. Acá pega arriba de todo. */
body.rubro-jugueteria .mostrador-filter {
    top: 0;
    background: rgba(253, 246, 236, .94); /* crema del rubro, no el beige panadero */
}

/* ───────── (ex) Lluvia 3D de fondo ─────────
   Dada de baja el 2026-07-30: el canvas fijo pintaba POR ENCIMA del contenido
   (bloques cruzando el título del catálogo y las fotos de producto). En una
   tienda donde lo que vende es la foto del juguete, el fondo no puede competir
   con el producto. El 3D pasó a la ficha — ver .cc-visor3d más abajo.

   Las secciones siguen elevadas sobre el fondo: es inofensivo y evita sorpresas
   de apilado con el modal y el toast. */
body.rubro-jugueteria > header,
body.rubro-jugueteria > main,
body.rubro-jugueteria > footer,
body.rubro-jugueteria > section,
body.rubro-jugueteria > .cc-strip {
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA UNIFICADA DE LA HOME (va al FINAL a propósito)

   El sitio venía con TRES tipografías mezcladas: Coiny en el wordmark del hero,
   Playfair (la serif heredada de Salvado) en títulos y bajadas, e Inter en el
   cuerpo. En juguetería queda en DOS y sólo dos:

     · Coiny  → todo lo que es título o nombre (la voz del hero, continuada).
     · Inter  → todo lo que se lee en párrafo, incluidos precios y bajadas.

   Playfair no se usa más en esta home. Este bloque tiene que ir al final del
   archivo: site.css define las mismas propiedades con igual especificidad, así
   que lo que decide es el orden de aparición. (Antes estaba arriba y perdía
   contra la regla original de .cc-historia-title — por eso "Nuestra historia"
   seguía en serif.)

   Sin text-shadow: el halo crema del wordmark funciona sobre la FOTO del hero,
   pero copiado a texto claro sobre verde se convierte en un glow feo, y sobre
   crema plano no aporta nada.
   ════════════════════════════════════════════════════════════════════════════ */

body.rubro-jugueteria .mostrador-head h2,
body.rubro-jugueteria .encargar-cta-head h2,
body.rubro-jugueteria .visitar-head h2,
body.rubro-jugueteria .cc-cierre h2,
body.rubro-jugueteria .cc-historia-title,
body.rubro-jugueteria .site-footer h2,
body.rubro-jugueteria .prod-modal-title,
body.rubro-jugueteria .cc-card-name,
body.rubro-jugueteria .vb-status-text,
body.rubro-jugueteria .encargar-cta-steps h3,
body.rubro-jugueteria .cc-visor3d-titulo {
    font-family: 'Coiny', 'Playfair Display', Georgia, serif;
    text-transform: lowercase;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .01em;
    text-shadow: none;
    /* Coiny ya es ancha y redonda: el tracking negativo de la serif la apelmaza. */
    font-variation-settings: normal;
}

/* Coiny no tiene itálica → el énfasis pasa de cursiva a color. */
body.rubro-jugueteria .mostrador-head h2 em,
body.rubro-jugueteria .encargar-cta-head h2 em,
body.rubro-jugueteria .visitar-head h2 em,
body.rubro-jugueteria .site-footer h2 em {
    font-style: normal;
    color: var(--terra);
    font-variation-settings: normal;
}

/* Sobre fondo verde el acento no puede ser verde: va en madera clara. */
body.rubro-jugueteria .cc-cierre h2 em,
body.rubro-jugueteria .cc-historia-title em {
    font-style: normal;
    color: #eac98d;
    font-variation-settings: normal;
}

/* Párrafos y bajadas que venían en Playfair → Inter, que es la de lectura. */
body.rubro-jugueteria .mostrador-head .intro,
body.rubro-jugueteria .mostrador-foot p,
body.rubro-jugueteria .encargar-cta-lede,
body.rubro-jugueteria .prod-modal-price,
body.rubro-jugueteria .prod-modal-desc,
body.rubro-jugueteria .info-item p {
    font-family: var(--sans);
    font-variation-settings: normal;
}

body.rubro-jugueteria .mostrador-head .intro em,
body.rubro-jugueteria .mostrador-foot p em {
    font-style: normal;
    font-weight: 600;
    color: var(--terra);
}

/* ── Encabezado del catálogo ──────────────────────────────────────────────
   site.css lo arma a 2 columnas sólo por encima de 960px y con un título de
   hasta 96px; abajo de ese ancho el título quedaba solo, chiquito respecto del
   hueco, y dejaba media pantalla en blanco a la derecha. Acá: el título baja de
   escala (Coiny pesa más que la serif al mismo cuerpo) y las dos columnas
   aguantan hasta 780px, así la bajada ocupa el lado derecho en vez del vacío. */
body.rubro-jugueteria .mostrador-head {
    grid-template-columns: 1.05fr 1fr;
    gap: 44px;
    align-items: end;
}

body.rubro-jugueteria .mostrador-head h2 {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.02;
}

body.rubro-jugueteria .mostrador-head .intro {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 46ch;
}

@media (max-width: 780px) {
    body.rubro-jugueteria .mostrador-head {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    body.rubro-jugueteria .mostrador-head h2 {
        font-size: clamp(2.1rem, 8vw, 2.8rem);
    }
}

/* Los otros encabezados de sección: misma escala, sin el tracking de la serif. */
body.rubro-jugueteria .encargar-cta-head h2,
body.rubro-jugueteria .visitar-head h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.08;
}

body.rubro-jugueteria .cc-historia-title {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.16;
}

/* ───────── Chip de estado en la card (juguetería) ─────────
   El de panadería es un rectángulo verde macizo con texto blanco en mono: en una
   fila de lista funciona como semáforo, pero sobre una card de foto grande grita
   más que el producto. Acá va como pastilla suave: verde tenue de fondo, verde de
   marca en el texto, sin bordes duros. */
body.rubro-jugueteria .mostrador-grid--fotos .chip {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
}

body.rubro-jugueteria .mostrador-grid--fotos .chip.enc {
    background: rgba(79, 122, 58, .12);
    color: var(--terra);
}

body.rubro-jugueteria .mostrador-grid--fotos .chip.agot-hoy {
    background: rgba(200, 159, 92, .18);
    color: #8a6420;
}

body.rubro-jugueteria .mostrador-grid--fotos .chip.hoy {
    background: rgba(79, 122, 58, .16);
    color: var(--terra);
}

body.rubro-jugueteria .mostrador-grid--fotos .chip.off {
    background: var(--ink-06);
    color: var(--ink-50);
    border: 0;
}

/* El chip del lightbox, con el mismo tratamiento que el de la card: pastilla
   redondeada en Inter, no rectángulo mono. (El texto lo pone site.js; sólo
   cambiamos la forma para que las dos vistas del mismo producto coincidan.) */
body.rubro-jugueteria .prod-modal-chip {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: 5px 12px;
    border-radius: 20px;
}

body.rubro-jugueteria .prod-modal-chip[data-state="enc"] {
    background: rgba(79, 122, 58, .12);
    color: var(--terra);
}