/**
 * Sitioideal — Demo de un diseño (paso 7.z.35; 7.z.47d: el título del aviso siempre grueso)
 *
 * Solo en los demos (sitioideal.com.mx/demo-antojo…; Demos y app/vistas/sitio/demo.php), encima del
 * CSS del sitio y del diseño:
 *   - la barra de arriba («Demo · Diseño …» y «Quiero mi sitio así»), con los colores de Sitioideal;
 *   - la marca de agua «Información de prueba · Sitioideal», fija y repetida en diagonal, encima de
 *     todo (también dentro del visor de la galería y de la ficha) y sin estorbar los clics;
 *   - el aviso de los botones de contacto y el aviso de «contenido protegido» (demo.js);
 *   - no se puede seleccionar ni arrastrar, y al imprimir solo sale el aviso de demo.
 */

.sitio-demo {
    --demo-tinta: #172033;
    --demo-anil: #243C8F;
    --demo-cempasuchil: #F2A516;
    --demo-whatsapp: #127C3B;
    --demo-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='300' viewBox='0 0 460 300'%3E%3Cg transform='rotate(-27 230 150)' font-family='Arial,Helvetica,sans-serif' text-anchor='middle' fill='%237f7f7f' fill-opacity='.24'%3E%3Ctext x='230' y='146' font-size='25' font-weight='700' letter-spacing='1'%3EInformaci%C3%B3n de prueba%3C/text%3E%3Ctext x='230' y='174' font-size='15' font-weight='700' letter-spacing='2'%3ESITIOIDEAL %C2%B7 %C2%A9 NABORITASOFT%3C/text%3E%3C/g%3E%3C/svg%3E");
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.sitio-demo img { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ---------- Barra de arriba ---------- */
.demo-barra {
    position: relative;
    z-index: 60;
    background: var(--demo-tinta);
    color: #fff;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .92rem;
    line-height: 1.3;
}
.demo-barra__interior {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sitio-demo .demo-barra :is(p, a, strong, span) { font-family: 'Archivo', system-ui, sans-serif; font-style: normal; text-transform: none; letter-spacing: normal; }
.sitio-demo .demo-barra .demo-barra__sello { letter-spacing: .08em; text-transform: uppercase; }
.demo-barra__texto { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.demo-barra__sello {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--demo-cempasuchil);
    color: var(--demo-tinta);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.demo-barra__texto strong { font-weight: 700; }
.demo-barra__nota { color: rgba(255, 255, 255, .78); }
.demo-barra__boton {
    flex: none;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--demo-cempasuchil);
    color: var(--demo-tinta);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.demo-barra__boton:hover { background: #FFC24D; }
.demo-barra__boton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
    .demo-barra { font-size: .84rem; }
    .demo-barra__interior { padding: 7px 12px; gap: 8px; }
    .demo-barra__nota { display: none; }
    .demo-barra__boton { padding: 7px 12px; }
}

/* ---------- Marca de agua ---------- */
.demo-marca,
.sitio-demo dialog.visor::after,
.sitio-demo dialog.ficha::after {
    position: fixed;
    inset: 0;
    background-image: var(--demo-marca);
    background-repeat: repeat;
    background-size: 460px 300px;
    pointer-events: none;
}
.demo-marca { z-index: 2147483000; }
.sitio-demo dialog.visor::after,
.sitio-demo dialog.ficha::after { content: ""; z-index: 100; }

/* ---------- Aviso de los botones de contacto ---------- */
.demo-aviso {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: 26px 24px 22px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: var(--demo-tinta);
    font-family: 'Archivo', system-ui, sans-serif;
    box-shadow: 0 30px 60px -20px rgba(23, 32, 51, .55);
}
.demo-aviso::backdrop { background: rgba(23, 32, 51, .62); }
.demo-aviso__etiqueta {
    margin: 0 0 6px;
    color: var(--demo-anil);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* Con la letra de Sitioideal, aunque el diseño cambie la de sus títulos y textos.
   7.z.47d: con !important, porque algunos diseños (Tinta, Espuma, Seda…) fijan el grueso o la letra
   de todos sus títulos con !important y el título del aviso salía delgado. */
.sitio-demo .demo-aviso :is(h2, p, a, button) {
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}
.sitio-demo .demo-aviso .demo-aviso__titulo { margin: 0 0 8px; color: var(--demo-tinta); font-size: 1.35rem; font-weight: 800 !important; line-height: 1.2; }
.sitio-demo .demo-aviso .demo-aviso__etiqueta { letter-spacing: .1em; text-transform: uppercase; }
.demo-aviso__texto { margin: 0 0 12px; font-size: 1.02rem; line-height: 1.45; }
.demo-aviso__mensaje {
    position: relative;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 4px 14px 14px 14px;
    background: #DCF8C6;
    color: #111b21;
    font-size: .98rem;
    line-height: 1.4;
}
.demo-aviso__mensaje[hidden] { display: none; }
.demo-aviso__nota { margin: 0 0 18px; color: #586277; font-size: .88rem; line-height: 1.4; }
.demo-aviso__botones { display: grid; gap: 10px; }
.demo-aviso__quiero,
.demo-aviso__seguir {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.demo-aviso__quiero { border: 0; background: var(--demo-whatsapp); color: #fff; }
.demo-aviso__quiero:hover { background: #0E6630; }
.demo-aviso__seguir { border: 2px solid #D9DEE9; background: #fff; color: var(--demo-tinta); }
.demo-aviso__seguir:hover { border-color: var(--demo-anil); }
.demo-aviso__quiero:focus-visible,
.demo-aviso__seguir:focus-visible { outline: 3px solid var(--demo-cempasuchil); outline-offset: 2px; }

/* ---------- «Contenido protegido» ---------- */
.demo-protegido {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 2147483001;
    max-width: calc(100vw - 32px);
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--demo-tinta);
    color: #fff;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
    transform: translateX(-50%);
}
.demo-protegido[hidden] { display: none; }

/* ---------- Al imprimir: solo el aviso ---------- */
@media print {
    .sitio-demo > * { display: none !important; }
    .sitio-demo::before {
        content: "Demo de Sitioideal · Información de prueba · sitioideal.com.mx";
        display: block;
        padding: 40px;
        font: 700 20px 'Archivo', sans-serif;
    }
}