/* ==========================================================================
   NEARVISUAL — CELULAR (< 1024px)
   Se carga con media="(max-width: 1023.98px)": nada de esto toca escritorio.

   La jerarquía sale de Candy Art y Dulcería Carlitos: portadas oscuras con
   las esquinas de abajo redondeadas, un lienzo claro debajo y tarjetas
   blancas encima. El negro y el cian de NearVisual hacen de complemento:
   el negro en portadas, barra y pie; el cian en lo que se toca.

   Orden:
     1. Fichas de color (claro, zonas oscuras y tema B/N)
     2. Esqueleto: lienzo, secciones, sin barra superior vieja
     3. Barra de abajo, franja compacta y hojas
     4. Portadas (inicio y secciones)
     5. Bloques del inicio
     6. Componentes compartidos con escritorio, re-vestidos
     7. Servicios, extras y proyectos
     8. Cómo y cuánto, contacto, pie y avisos
   ========================================================================== */

/* ═══════════════════ 1. FICHAS DE COLOR ═══════════════════ */
body.nv-app {
    /* Jerarquía: lienzo gris frío, tarjetas blancas encima, bandas y cabeceras
       negras, y el cian solo en lo que se toca. Dentro de lo blanco los huecos
       van en --m-hueco. */
    --m-lienzo: #E2E8EB;
    --m-hueco: #EFF3F5;
    --m-papel: #FFFFFF;
    --m-tinta: #0C1114;
    --m-tinta-2: #475761;
    --m-tinta-3: #7F8F99;
    --m-linea: #DDE5E9;

    --m-acento: #00E5FF;          /* rellenos: botones, chips activos */
    --m-sobre-acento: #031014;    /* texto encima del acento */
    --m-acento-hondo: #00798C;    /* texto e iconos sobre blanco */
    --m-acento-luz: #C2F3FB;
    --m-acento-boton: #00C8E6;    /* botones secundarios: se ven como botón */
    --m-acento-bruma: #F0FCFE;

    --m-noche: #0B0E10;
    --m-panel: linear-gradient(160deg, #1A1E21 0%, #0D1012 55%, #070809 100%);

    /* Sombras teñidas del mismo cian del lienzo, suaves y amplias: el relieve
       de las tarjetas (tipo clay) sin gris sucio. */
    --m-sombra-0: 0 1px 2px rgba(12, 22, 28, .06), 0 8px 22px rgba(12, 22, 28, .09);
    --m-sombra: 0 14px 34px rgba(12, 22, 28, .18);
    --m-sombra-acento: 0 10px 22px rgba(0, 170, 200, .28);

    --m-r-xl: 28px;
    --m-r-lg: 22px;
    --m-r-md: 16px;

    --m-arriba: env(safe-area-inset-top, 0px);
    --m-abajo: env(safe-area-inset-bottom, 0px);

    /* Las fichas que usan los componentes compartidos, ahora en claro */
    --nv-ink: var(--m-tinta);
    --nv-ink-90: rgba(12, 17, 20, .9);
    --nv-ink-75: rgba(12, 17, 20, .75);
    --nv-ink-60: rgba(12, 17, 20, .6);
    --nv-ink-45: rgba(12, 17, 20, .46);
    --nv-ink-30: rgba(12, 17, 20, .32);
    --nv-text-dim: #6B7B85;
    --text-primary: var(--m-tinta);
    --text-secondary: var(--m-tinta-2);
    --nv-line: var(--m-linea);
    --nv-line-cyan: rgba(0, 121, 140, .32);
    --nv-surface: var(--m-papel);
    --nv-surface-flat: var(--m-papel);
    --nv-surface-soft: var(--m-papel);
    --nv-text-shadow: none;
    --nv-glow: transparent;
    --nv-glow-strong: transparent;
    --nv-tinte-1: rgba(0, 121, 140, .06);
    --nv-tinte-2: rgba(0, 121, 140, .10);
    --nv-tinte-3: rgba(0, 121, 140, .18);
    --nv-halo: transparent;
    --nv-halo-fuerte: transparent;
    --cyan-accent: var(--m-acento-hondo);
    --cyan-dark: var(--m-acento-hondo);
    --cyan-glow: #00B8D4;
    --bg-main: var(--m-sobre-acento);
    --bg-card: var(--m-papel);
    --clay-surface-start: var(--m-papel);
    --clay-surface-end: var(--m-papel);

    background: var(--m-lienzo) !important;
    color: var(--m-tinta);
}

/* Zonas oscuras: portadas, bandas, pie. Dentro vuelve el tema oscuro. */
body.nv-app .m-oscuro,
body.nv-app .nv-view-foot,
body.nv-app .nv-next,
body.nv-app .nv-plan.featured,
body.nv-app .m-barra,
body.nv-app .m-compacta {
    --m-tinta: #F7F8F8;
    --m-tinta-2: rgba(247, 248, 248, .72);
    --m-tinta-3: rgba(247, 248, 248, .5);
    --m-linea: rgba(255, 255, 255, .12);
    --m-acento-hondo: #00E5FF;
    --nv-ink: #F7F8F8;
    --nv-ink-90: rgba(247, 248, 248, .9);
    --nv-ink-75: rgba(247, 248, 248, .75);
    --nv-ink-60: rgba(247, 248, 248, .6);
    --nv-ink-45: rgba(247, 248, 248, .46);
    --nv-ink-30: rgba(247, 248, 248, .32);
    --nv-text-dim: rgba(247, 248, 248, .56);
    --text-primary: #F7F8F8;
    --text-secondary: rgba(247, 248, 248, .7);
    --nv-line: rgba(255, 255, 255, .12);
    --cyan-accent: #00E5FF;
    --nv-tinte-2: rgba(255, 255, 255, .1);
    color: var(--m-tinta);
}

/* Tema B/N: el acento deja de ser cian y pasa a ser tinta. */
html[data-tema="byn"] body.nv-app {
    --m-lienzo: #D9DDDF;
    --m-hueco: #EEF0F1;
    --m-acento-boton: #111416;
    --m-acento: #111416;
    --m-sobre-acento: #FFFFFF;
    --m-acento-hondo: #111416;
    --m-acento-luz: #E9ECEE;
    --m-acento-bruma: #F4F6F7;
    --m-sombra-acento: 0 10px 22px rgba(0, 0, 0, .22);
    --m-panel: linear-gradient(160deg, #1A1C1E 0%, #0D0E0F 55%, #050505 100%);
    --cyan-accent: #111416;
    --nv-line-cyan: rgba(0, 0, 0, .3);
    --nv-tinte-1: rgba(0, 0, 0, .05);
    --nv-tinte-2: rgba(0, 0, 0, .08);
    --nv-tinte-3: rgba(0, 0, 0, .14);
}
html[data-tema="byn"] body.nv-app .m-oscuro,
html[data-tema="byn"] body.nv-app .nv-view-foot,
html[data-tema="byn"] body.nv-app .nv-next,
html[data-tema="byn"] body.nv-app .nv-plan.featured,
html[data-tema="byn"] body.nv-app .m-barra,
html[data-tema="byn"] body.nv-app .m-compacta {
    --m-acento: #F2F2F2;
    --m-sobre-acento: #111416;
    --m-acento-hondo: #F2F2F2;
    --cyan-accent: #F2F2F2;
}

/* ═══════════════════ 2. ESQUELETO ═══════════════════ */
/* En el celular el texto va siempre en el tamaño grande (ya no se elige). */
html:has(body.nv-app) { background: var(--m-lienzo, #E2E8EB); font-size: 18px; }
html.nv-app { background: var(--m-lienzo, #E2E8EB); font-size: 18px; }
html.m-quieta, html.m-quieta body { overflow: hidden; }

body.nv-app {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    -webkit-tap-highlight-color: transparent;
}

/* La foto de fondo, la lluvia y la barra superior vieja no van aquí */
body.nv-app .nv-main::before,
body.nv-app .nv-sakura,
body.nv-app .nv-topnav,
body.nv-app .nv-mob-head { display: none !important; }

body.nv-app .nv-view {
    padding: 0 16px 0;
    color: var(--m-tinta);
}
body.nv-app .nv-view-head.m-absorbida { display: none; }

/* La portada de escritorio y las puertas: en el teléfono las sustituye la
   portada de app, con los mismos destinos. */
body.nv-app #v-inicio .nv-home,
body.nv-app #v-inicio .nv-block-doors { display: none; }

/* Sin sombras de texto ni halos de la versión oscura */
body.nv-app .nv-view * { text-shadow: none !important; }

/* Tipografía de títulos */
body.nv-app .nv-view h2,
body.nv-app .nv-view h3,
body.nv-app .nv-view h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--m-tinta);
    letter-spacing: -0.01em;
}
body.nv-app .nv-view h2 { font-size: 1.4rem; line-height: 1.15; }
body.nv-app .nv-lead { color: var(--m-tinta-2); }

/* Nada que haga zoom al enfocar en iOS: 16px en todos los campos */
body.nv-app input,
body.nv-app select,
body.nv-app textarea { font-size: 16px !important; }

/* Todo lo que se toca responde al dedo */
body.nv-app button,
body.nv-app a,
body.nv-app [data-view] { touch-action: manipulation; }

.m-oscuro .nv-hero-ascii .nv-ascii-a,
.m-oscuro .nv-hero-ascii .nv-ascii-b { text-shadow: none !important; }

/* ═══════════════════ 3. BARRA, FRANJA Y HOJAS ═══════════════════ */

/* ── Barra de abajo ── */
.m-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 56px;
    padding: 6px 6px calc(6px + var(--m-abajo));
    border-radius: 24px 24px 0 0;
    background: var(--m-noche);
    box-shadow: 0 -8px 26px rgba(5, 8, 10, .28);
    transform: translateZ(0);
    backface-visibility: hidden;
    transform-origin: 50% 100%;
    transition: background-color .35s ease, box-shadow .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}
/* Se desliza hacia abajo, sin encogerse de golpe (js/movil.js decide cuándo,
   ya bien entrado el pie y con margen para que no parpadee). */
.m-barra--oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .m-barra { transition: background-color .35s ease, opacity .2s ease; } }

.m-barra-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: rgba(247, 248, 248, .78);
    cursor: pointer;
    transition: color .3s ease;
}
.m-barra-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    font-size: 1.06rem;
    transition: background-color .2s ease, transform .3s var(--nv-spring);
}
.m-barra-txt { font-size: 12px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.m-barra-item.activo,
.m-barra-item[aria-expanded="true"] { color: #fff; font-weight: 800; }
.m-barra-item.activo .m-barra-ico,
.m-barra-item[aria-expanded="true"] .m-barra-ico { background: rgba(0, 229, 255, .16); color: var(--m-acento); }
.m-barra-item:active .m-barra-ico { transform: scale(.9); }

/* El logo de Inicio: blanco sobre la barra oscura, oscuro sobre la clara */
.m-barra-logo { display: block; width: 22px; height: 22px; object-fit: contain; opacity: .6; transition: opacity .3s ease, filter .3s ease; }
.m-barra-item.activo .m-barra-logo { opacity: 1; }
.m-barra--clara .m-barra-logo { filter: invert(1); }

/* Sobre una zona oscura la barra se aclara para no fundirse con ella */
.m-barra--clara { background: var(--m-papel, #fff); box-shadow: 0 -8px 26px rgba(12, 17, 20, .14); }
.m-barra--clara .m-barra-item { color: #56656E; }
.m-barra--clara .m-barra-item.activo,
.m-barra--clara .m-barra-item[aria-expanded="true"] { color: #0C1114; }
.m-barra--clara .m-barra-item.activo .m-barra-ico,
.m-barra--clara .m-barra-item[aria-expanded="true"] .m-barra-ico { background: #D6F8FD; color: #00798C; }
html[data-tema="byn"] .m-barra--clara .m-barra-item.activo .m-barra-ico { background: #E9ECEE; color: #111416; }

/* ── Franja compacta ── */
.m-compacta {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(var(--m-arriba) + 8px) 10px 10px;
    border-radius: 0 0 22px 22px;
    background: var(--m-noche);
    box-shadow: 0 10px 26px rgba(5, 8, 10, .25);
    transform: translateY(-110%);
    transition: transform .34s var(--nv-spring);
    pointer-events: none;
}
.m-compacta.visible { transform: none; pointer-events: auto; }
.m-compacta .m-redondo { width: 40px; height: 40px; flex: 0 0 40px; }
.m-compacta-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.m-compacta-titulo {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-compacta-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--m-acento);
    color: var(--m-sobre-acento);
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Botón redondo (volver, WhatsApp) ── */
.m-redondo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .09);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform .15s ease, background-color .2s ease;
}
.m-redondo:active { transform: scale(.92); background: rgba(255, 255, 255, .16); }

/* ── Botones ── */
.m-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
}
.m-boton:active { transform: scale(.97); }
.m-boton-claro { background: #fff; color: #0C1114; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.m-boton-fantasma { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42); }
.m-boton-wa { background: #1FA855; color: #fff; box-shadow: 0 8px 18px rgba(31, 168, 85, .28); }
.m-boton-suave { background: var(--m-acento-boton); color: #02262C; box-shadow: 0 6px 14px rgba(0, 170, 200, .28); }
.m-boton-suave i { color: inherit; }
html[data-tema="byn"] .m-boton-suave { color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.m-boton-acento { background: var(--m-acento); color: var(--m-sobre-acento); box-shadow: var(--m-sombra-acento); }
.m-boton-bloque { display: flex; width: 100%; }

/* ── Hojas ── */
.m-hoja,
.m-info {
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .36s;
}
.m-info { z-index: 1250; }
.m-hoja.abierta,
.m-info.abierta { visibility: visible; pointer-events: auto; transition: visibility 0s; }

.m-hoja-fondo {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 10, .55);
    opacity: 0;
    transition: opacity .3s ease;
}
.abierta > .m-hoja-fondo { opacity: 1; }

.m-hoja-panel,
.m-info-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px 28px 0 0;
    transform: translateY(105%);
    transition: transform .36s var(--nv-spring);
    outline: none;
    overscroll-behavior: contain;
}
.abierta > .m-hoja-panel,
.abierta > .m-info-panel { transform: none; }

.m-hoja-panel {
    display: grid;
    gap: 12px;
    padding: 10px 16px calc(18px + var(--m-abajo));
    background: var(--m-lienzo);
}
.m-hoja-agarre {
    justify-self: center;
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto 2px;
    border-radius: 3px;
    background: #C7D1D6;
}

.m-hoja-reja {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.m-hoja-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 4px 12px;
    border: 0;
    border-radius: 20px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: var(--m-tinta);
    cursor: pointer;
    transition: transform .15s ease;
}
.m-hoja-item:active { transform: scale(.95); }
.m-hoja-item .nv-op-est { font: inherit; color: inherit; background: none; padding: 0; text-transform: none; letter-spacing: 0; }

/* El «tono»: cuadrito de color con el icono dentro */
.m-tono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 16px;
    background: var(--m-acento-luz);
    color: var(--m-acento-hondo);
    font-size: 1.08rem;
}
.m-tono-flag { font-size: 1.35rem; }

.m-ajustes {
    display: grid;
    padding: 2px 14px;
    border-radius: 20px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
}
.m-ajuste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
}
.m-ajuste + .m-ajuste { border-top: 1px solid var(--m-linea); }
.m-ajuste > span { font-family: var(--font-heading); font-size: .9rem; font-weight: 800; color: var(--m-tinta); }
.m-seg {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--m-hueco);
}
.m-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 800;
    color: var(--m-tinta-3);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.m-seg button[aria-checked="true"] { background: var(--m-papel); color: var(--m-tinta); box-shadow: var(--m-sombra-0); }
.m-seg .nv-tema-mu { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }

/* Entrada escalonada: la hoja sube y su contenido la sigue */
.m-hoja-item, .m-ajustes, .m-hoja-panel > .m-boton {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .4s var(--nv-spring);
}
.m-hoja.abierta .m-hoja-item,
.m-hoja.abierta .m-ajustes,
.m-hoja.abierta .m-hoja-panel > .m-boton { opacity: 1; transform: none; }
.m-hoja.abierta .m-hoja-item:nth-child(1) { transition-delay: .05s; }
.m-hoja.abierta .m-hoja-item:nth-child(2) { transition-delay: .08s; }
.m-hoja.abierta .m-hoja-item:nth-child(3) { transition-delay: .11s; }
.m-hoja.abierta .m-hoja-item:nth-child(4) { transition-delay: .14s; }
.m-hoja.abierta .m-hoja-item:nth-child(5) { transition-delay: .17s; }
.m-hoja.abierta .m-hoja-item:nth-child(6) { transition-delay: .2s; }
.m-hoja.abierta .m-ajustes { transition-delay: .23s; }
.m-hoja.abierta .m-hoja-panel > .m-boton { transition-delay: .26s; }

/* ── Hoja de información ── */
.m-info-panel {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    background: var(--m-papel);
}
.m-info-top {
    position: relative;
    flex-shrink: 0;
    padding: 10px 64px 14px 20px;
    border-radius: 28px 28px 0 0;
    background: var(--m-noche);
}
.m-info-top .m-hoja-agarre { background: rgba(255, 255, 255, .28); }
.m-info-titulo {
    margin: 8px 0 0;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}
.m-info-cerrar {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}
.m-info-cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px calc(24px + var(--m-abajo));
    color: var(--m-tinta-2);
    font-size: .94rem;
    line-height: 1.55;
}
.m-info-cuerpo > p { margin: 0 0 12px; }
.m-info-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 14px;
    background: var(--m-hueco);
}
.m-info-filas { list-style: none; display: grid; gap: 8px; margin: 14px 0 18px; padding: 0; }
.m-info-filas li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--m-hueco);
}
.m-info-filas b { font-size: .78rem; font-weight: 700; color: var(--m-tinta-3); flex-shrink: 0; }
.m-info-filas span { font-weight: 800; color: var(--m-tinta); text-align: right; }
.m-info-sub {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--m-acento-hondo);
}
.m-info-pasos { list-style: none; counter-reset: paso; display: grid; gap: 10px; margin: 0 0 20px; padding: 0; }
.m-info-pasos li { counter-increment: paso; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--m-tinta); }
.m-info-pasos li::before {
    content: counter(paso);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--m-acento);
    color: var(--m-sobre-acento);
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 800;
}

/* El detalle de un servicio, clonado dentro de la hoja */
.m-info-cuerpo .m-detalle { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; padding: 0 !important; }
.m-info-cuerpo .m-detalle .nv-detail-col {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--m-hueco);
    border: 0;
}
.m-info-cuerpo .m-detalle h5 {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--m-acento-hondo);
}
.m-info-cuerpo .m-detalle ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.m-info-cuerpo .m-detalle li { font-size: .9rem; line-height: 1.45; color: var(--m-tinta-2); }
.m-info-cuerpo .m-detalle li b { color: var(--m-tinta); }
.m-info-cuerpo .m-detalle .nv-detail-note {
    margin: 2px 0 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--m-acento-bruma);
    font-size: .86rem;
    color: var(--m-tinta-2);
}

/* ═══════════════════ 4. PORTADAS ═══════════════════ */

/* ── Portada de sección ── */
.m-phero {
    position: relative;
    overflow: hidden;
    margin: 0 -16px 20px;
    padding: calc(var(--m-arriba) + 12px) 20px 30px;
    border-radius: 0 0 var(--m-r-xl) var(--m-r-xl);
    background: var(--m-panel);
    color: #fff;
    isolation: isolate;
}
/* El isotipo enorme y a media luz, como patrón de fondo (igual que la dama
   de Candy Art). */
.m-phero::after,
.m-portada-panel::after {
    content: '';
    position: absolute;
    right: -46px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    background: #fff;
    opacity: .05;
    -webkit-mask: url('../img/near.webp') center / contain no-repeat;
    mask: url('../img/near.webp') center / contain no-repeat;
    z-index: -1;
    pointer-events: none;
}
.m-phero-fila { display: flex; align-items: center; justify-content: space-between; }
/* Con lechuza: dos columnas a la misma altura. A la izquierda la categoría
   y, debajo, la lechuza; a la derecha el título y la bajada. Sin lechuza (los
   casos) se apila como antes. */
.m-phero-txt { margin-top: 16px; }
.m-phero-par {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
}
.m-phero-lado { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m-phero-cat {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 229, 255, .14);
    font-family: var(--font-heading);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--m-acento);
}
.m-phero-par h1 { margin: 0; font-size: 1.35rem; }
#v-hago .m-phero-par h1 { font-size: 1.15rem; white-space: nowrap; }
#v-hago .m-phero-cat { font-size: .58rem; letter-spacing: .06em; }
/* Al cambiar de pastilla en Servicios */
/* Se anima la columna, no la lechuza: su propia animación (el sprite) no
   se toca. */
.m-cambia .m-phero-lado,
.m-cambia .m-phero-bajada { animation: m-cambio .42s var(--nv-spring) both; }
.m-cambia .m-phero-bajada { animation-delay: .06s; }
@keyframes m-cambio { from { opacity: 0; transform: translateY(8px); } }
body.nv-app #v-hago .nv-pane.active { animation: m-panel-entra .38s ease both; }
@keyframes m-panel-entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
    .m-cambia .m-phero-lado, .m-cambia .m-phero-bajada,
    body.nv-app #v-hago .nv-pane.active { animation: none; }
}
.m-phero-par .m-phero-bajada { margin-top: 8px; font-size: .88rem; }
.m-phero-bajada { grid-row: 3; grid-column: 2; }
.m-phero .m-ceja { color: var(--m-acento); }
.m-phero h1 {
    margin: 6px 0 0;
    font-family: var(--font-heading);
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #fff;
}
.m-phero-bajada {
    margin: 12px 0 0;
    max-width: 34ch;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(247, 248, 248, .72);
}

.m-ceja {
    margin: 0;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--m-acento-hondo);
}
.m-ceja i { margin-right: 4px; }

/* ── Portada del inicio ── */
.m-portada { margin: 0 -16px; }
.m-portada-panel {
    position: relative;
    overflow: hidden;
    padding: calc(var(--m-arriba) + 12px) 20px 64px;
    background: var(--m-panel);
    color: #fff;
    isolation: isolate;
}
.m-portada-panel::after { width: 300px; height: 300px; right: -80px; bottom: 10px; opacity: .09; }
.m-portada-fila, .m-portada-centro { position: relative; z-index: 1; }
/* Lluvia de sakura (movil.js): detrás del contenido, aparece con un fundido */
.m-lluvia {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.m-lluvia.visible { opacity: 1; }
.m-portada-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.m-marca img { width: 36px; height: 36px; object-fit: contain; }
.m-marca span { display: flex; flex-direction: column; line-height: 1.1; }
.m-marca b { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 800; }
.m-marca small { font-size: .72rem; color: rgba(247, 248, 248, .6); }

.m-portada-centro { margin-top: 30px; text-align: center; }
/* NEAR y VISUAL alineados a la izquierda (NEAR empieza donde empieza la V)
   y el bloque entero centrado en la portada. */
body.nv-app .m-ascii {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: fit-content;
    margin: 0 auto;
    font-size: min(11px, calc((100vw - 72px) / 28.64));
}
/* La percha: una línea de alto cero entre las dos palabras. La lechuza cuelga
   de ella, posada sobre la L de VISUAL, en el hueco que deja NEAR. Se mide en
   ch de la misma fuente, así sigue a la letra aunque el logo se encoja. */
.m-percha {
    position: relative;
    align-self: stretch;
    height: 0;
    font-family: 'Departure Mono', ui-monospace, 'Courier New', monospace;
    font-size: inherit;
}
/* NEAR un poco más chico que VISUAL. */
body.nv-app .m-ascii .nv-ascii-a { font-size: .9em; }
/* Sentada en la A de VISUAL (columnas 30–34), delante de la R de NEAR, un
   poco más grande que en el resto del sitio. La sombra es la que proyecta:
   una silueta corrida sobre la R y una mancha bajo las patas sobre la A. */
.m-owl-portada {
    /* Un poco más chica que el resto para que la A se lea debajo. */
    --k: 2.5;
    position: absolute;
    z-index: 2;
    /* Centro del cuerpo (columna 25 del cuadro) sobre el centro de la A. */
    left: calc(32.5ch - var(--k) * 25px);
    /* Secuencia «sentada»: la base del cuerpo es la fila 32 del cuadro (7
       filas por debajo) y se apoya en el borde de la A; las patas cuelgan por
       delante de la letra. Más el hueco de 2px y el aire del renglón. */
    bottom: calc(-2px - 1.25em - var(--k) * 6px);
    /* La luz viene de la derecha: la silueta cae a la izquierda, sobre la R. */
    filter: drop-shadow(-5px 3px 4px rgba(0, 0, 0, .3));
}
.m-owl-portada::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(var(--k) * 6px - 6px);
    width: calc(var(--k) * 20px);
    height: 9px;
    margin-left: calc(var(--k) * -10px + var(--k) * 1px);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .2), transparent);
    filter: blur(2px);
    z-index: -1;
}
html[data-tema="byn"] .m-owl-portada { filter: grayscale(1) drop-shadow(-5px 3px 4px rgba(0, 0, 0, .3)); }

/* El eslogan: lo que gana el negocio y, debajo, el lema. Una sola frase en
   dos renglones. */
.m-portada-bajada {
    margin: 24px auto 0;
    max-width: 36ch;
    text-wrap: balance;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(247, 248, 248, .72);
}
/* Cada frase en su renglón también en pantallas de 320px */
.m-portada-bajada { font-size: min(.95rem, 4.3vw); }
.m-portada-bajada b { display: block; font-style: italic; font-weight: 800; color: var(--m-acento); }
.m-portada-bajada span { display: block; margin-top: 2px; color: #fff; font-weight: 700; }
.m-portada-acciones { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
/* La bandeja clara se monta sobre el panel, como en Candy Art */
.m-portada-bandeja {
    position: relative;
    margin-top: -36px;
    padding: 16px 16px 4px;
    border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
    background: var(--m-lienzo);
}

/* ═══════════════════ 5. BLOQUES DEL INICIO ═══════════════════ */
.m-accesos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.m-acceso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 4px 12px;
    border: 0;
    border-radius: 20px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--m-tinta);
    cursor: pointer;
    transition: transform .15s ease;
}
.m-acceso:active { transform: scale(.95); }

.m-seccion { margin-top: 30px; padding: 0 16px; }
.m-seccion-cabeza {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.m-seccion-cabeza h2 {
    margin: 4px 0 0;
    font-family: var(--font-heading);
    font-size: 1.35rem !important;
    font-weight: 800;
    line-height: 1.15;
    color: var(--m-tinta);
}
.m-ver-todo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: .84rem;
    font-weight: 800;
    color: var(--m-acento-hondo);
    cursor: pointer;
}
.m-ver-todo i { font-size: .72rem; }

.m-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    font-size: .64rem;
    font-weight: 800;
    color: #0C1114;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.m-chip-vivo i { font-size: .45rem; color: #1FA855; }
.m-chip-obra { background: #FFE9A8; color: #6A4A00; }

/* «Cómo empezamos» en el inicio */
body.nv-app #v-inicio .nv-block { margin-top: 30px; }

/* ═══════════════════ 6. COMPONENTES COMPARTIDOS ═══════════════════ */

/* Tarjetas: papel blanco, sin bordes ni halos */
body.nv-app .nv-view .nv-card,
body.nv-app .nv-view .nv-start-step,
body.nv-app .nv-view .nv-ben,
body.nv-app .nv-view .nv-step,
body.nv-app .nv-view .nv-acc-item,
body.nv-app .nv-view .nv-contact-row,
body.nv-app .nv-view .nv-pago {
    background: var(--m-papel) !important;
    border: 0 !important;
    border-radius: var(--m-r-lg);
    box-shadow: var(--m-sombra-0) !important;
    color: var(--m-tinta);
}
body.nv-app .nv-view .nv-card::before,
body.nv-app .nv-view .nv-card::after { display: none; }

/* Bloques y títulos de bloque */
body.nv-app .nv-block { margin-top: 30px; }
body.nv-app .nv-block-title {
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--m-acento-hondo);
    margin-bottom: 12px;
}
body.nv-app .nv-block-title::after { background: var(--m-linea); }

/* Botones de la página */
body.nv-app .nv-view .nv-btn {
    min-height: 48px;
    border-radius: 999px;
    border: 0;
    background: var(--m-papel);
    color: var(--m-tinta);
    box-shadow: var(--m-sombra-0);
    font-family: var(--font-heading);
    font-weight: 800;
}
body.nv-app .nv-view .nv-btn:hover { transform: none; }
body.nv-app .nv-view .nv-btn-primary {
    background: var(--m-acento);
    color: var(--m-sobre-acento);
    box-shadow: var(--m-sombra-acento);
}
body.nv-app .nv-view .nv-btn-primary i { color: inherit; }
body.nv-app .nv-case-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
body.nv-app .nv-case-actions .nv-btn { flex: 1 1 150px; }
body.nv-app .nv-inline-note { flex-basis: 100%; color: var(--m-tinta-3); text-align: center; }
/* En el teléfono el detalle sube en hoja: el bloque desplegable no se usa */
body.nv-app .nv-view .nv-detail { display: none; }
body.nv-app .nv-btn[data-detalle] i { transform: none !important; }
body.nv-app .nv-btn[data-detalle] i::before { content: '\f05a'; }

/* Listas con viñeta */
body.nv-app .nv-list li { color: var(--m-tinta-2); }
body.nv-app .nv-list li::before { color: var(--m-acento-hondo); }

/* Pastillas de servicios: chips como los de Carlitos */
/* El carril de pastillas corta lo que se sale de él: con 10px abajo la sombra
   de la pastilla activa quedaba mocha, como si hubiera un margen invisible.
   Se le da aire para la sombra y se devuelve con margen negativo. */
body.nv-app .nv-pills {
    margin: 0 -16px -10px;
    padding: 6px 16px 26px;
    scroll-padding: 0 16px;
}
body.nv-app .nv-pill {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
    color: var(--m-tinta-2);
    font-family: var(--font-heading);
    font-size: .84rem;
    font-weight: 700;
}
body.nv-app .nv-pill i { color: var(--m-acento-hondo); }
body.nv-app .nv-pill.active {
    background: var(--m-noche);
    color: #fff;
    box-shadow: 0 8px 18px rgba(5, 8, 10, .22);
}
body.nv-app .nv-pill.active i { color: var(--m-acento); }
html[data-tema="byn"] body.nv-app .nv-pill.active i { color: #fff; }
body.nv-app .nv-pill-pronto {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #FFE9A8;
    color: #6A4A00;
    font-size: .6rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.nv-app .nv-pane-kicker {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--m-acento-hondo);
}

/* Resumen del servicio */
body.nv-app .nv-brief h3 { font-size: 1.25rem; }
body.nv-app .nv-brief > p { color: var(--m-tinta-2); }
body.nv-app .nv-tarifas th { color: var(--m-tinta); }
body.nv-app .nv-tarifas td { color: var(--m-tinta-2); }
body.nv-app .nv-tarifas td:nth-child(2) { color: var(--m-acento-hondo); font-weight: 800; }
body.nv-app .nv-tarifas tr { border-color: var(--m-linea); }

/* Tarjetas pequeñas con icono */
body.nv-app .nv-card-ico,
body.nv-app .nv-ben > i,
body.nv-app .nv-door-row > i,
body.nv-app .nv-contact-row > i {
    background: var(--m-acento-luz) !important;
    color: var(--m-acento-hondo) !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.nv-app .nv-grid-compact .nv-card h4 { color: var(--m-tinta); }
body.nv-app .nv-card p { color: var(--m-tinta-2); }
body.nv-app .nv-card-en {
    margin-top: 8px !important;
    font-size: .7rem !important;
    font-weight: 800;
    color: var(--m-acento-hondo) !important;
}
body.nv-app .nv-price { color: var(--m-acento-hondo); }

/* Beneficios */
body.nv-app .nv-ben b { color: var(--m-tinta); }
body.nv-app .nv-ben small { color: var(--m-tinta-2); }

/* Ventana de navegador y teléfono en las capturas */
body.nv-app .nv-browser {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px var(--m-linea);
}
body.nv-app .nv-browser-bar { background: #F1F4F6; border-bottom: 1px solid var(--m-linea); }
body.nv-app .nv-browser-dot { background: #CBD5DA; }
body.nv-app .nv-browser-url { color: var(--m-tinta-3); }
body.nv-app .nv-browser-live { color: #148A45; }
body.nv-app .nv-browser-live i { color: #1FA855; }
body.nv-app .nv-browser-obra, body.nv-app .nv-browser-obra i { color: #8A6100; }
body.nv-app .nv-shots figcaption { color: var(--m-tinta-3); }
body.nv-app .nv-phone { background: var(--m-noche); box-shadow: var(--m-sombra); }

/* «Siguiente»: banda oscura, como las de «¿Buscas más?» de Carlitos */
body.nv-app .nv-next {
    margin-top: 30px;
    padding: 22px 20px;
    border: 0;
    border-radius: var(--m-r-xl);
    background: var(--m-panel);
    box-shadow: var(--m-sombra);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
body.nv-app .nv-next-lbl { color: var(--m-acento); }
body.nv-app .nv-next-txt b { color: #fff; font-family: var(--font-heading); font-size: 1.2rem; }
body.nv-app .nv-next-txt small { color: rgba(247, 248, 248, .7); }
body.nv-app .nv-next .nv-btn,
body.nv-app .nv-next .nv-btn-primary {
    background: var(--m-acento);
    color: var(--m-sobre-acento);
    box-shadow: none;
}

/* Pie: panel oscuro de lado a lado, redondeado arriba */
body.nv-app .nv-view-foot {
    margin: 34px -16px 0;
    padding: 26px 20px calc(26px + var(--m-abajo));
    border: 0;
    border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
    background: var(--m-noche);
    justify-content: center;
    text-align: center;
}
body.nv-app .nv-view-foot::before { display: none; }
body.nv-app .nv-foot-legal { justify-content: center; gap: 8px 16px; }
body.nv-app .nv-view-foot a { color: rgba(247, 248, 248, .66); }
body.nv-app .nv-social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1FA855;
    color: #fff;
    border: 0;
}
body.nv-app .nv-foot-copy { color: rgba(247, 248, 248, .42) !important; }

/* ═══════════════════ 7. SERVICIOS, EXTRAS Y PROYECTOS ═══════════════════ */

/* Proyectos: tarjeta con la captura arriba y el texto abajo */
body.nv-app .nv-case-row { padding: 10px 10px 16px !important; }
body.nv-app .nv-case-row .nv-browser { margin-bottom: 12px; }
body.nv-app .nv-case-row-txt { padding: 0 6px; }
body.nv-app .nv-case-row-txt h4 { font-size: 1.08rem; color: var(--m-tinta); }
body.nv-app .nv-case-row-txt p { font-size: .86rem; }
body.nv-app .nv-case-tag {
    margin: 0 0 4px;
    font-size: .66rem !important;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-acento-hondo) !important;
}
body.nv-app .nv-go { color: var(--m-acento-hondo); font-weight: 800; }
body.nv-app .nv-caselist-todos { display: grid; gap: 14px; }

/* Extras: fila con la foto a la izquierda, como en Carlitos */
body.nv-app .nv-svc-grid { grid-template-columns: 1fr; gap: 12px; }
body.nv-app .nv-svc-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    padding: 8px !important;
    overflow: hidden;
}
body.nv-app .nv-svc-shot {
    aspect-ratio: 1;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    align-self: start;
}
body.nv-app .nv-svc-ico { display: none; }
body.nv-app .nv-svc-body { padding: 4px 6px 4px 14px; }
body.nv-app .nv-svc-body h4 { font-size: 1rem; color: var(--m-tinta); }
body.nv-app .nv-svc-desc { margin: 3px 0 0; font-size: .8rem; line-height: 1.4; color: var(--m-tinta-2); }
body.nv-app .nv-svc-body .nv-card-foot { margin-top: 6px; padding-top: 0; border: 0; }
body.nv-app .nv-svc-body .nv-price { font-size: .9rem; font-weight: 800; }
.m-dos { display: flex; gap: 8px; margin-top: 10px; }
.m-dos .m-boton { flex: 1; min-height: 40px; padding: 0 10px; font-size: .82rem; }

/* Próximamente */
body.nv-app .nv-pronto-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.nv-app .nv-pronto-grupo { padding: 14px !important; }
body.nv-app .nv-pronto-grupo h5 {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 800;
    color: var(--m-tinta);
}
body.nv-app .nv-pronto-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
body.nv-app .nv-pronto-grupo li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--m-tinta-3); }
body.nv-app .nv-pronto-grupo li i { width: 16px; text-align: center; color: var(--m-tinta-3); }
body.nv-app .nv-pronto-idea {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    box-shadow: inset 0 0 0 1.5px var(--m-acento-luz), var(--m-sombra-0) !important;
}
body.nv-app .nv-pronto-idea p { margin: 0; font-size: .82rem; }
body.nv-app .nv-pronto-idea span { margin-top: 4px; font-size: .84rem; font-weight: 800; color: #1FA855; }

/* Avisos */
body.nv-app .nv-note {
    border: 0;
    border-left: 3px solid var(--m-acento-hondo);
    border-radius: 14px;
    background: var(--m-acento-bruma);
    color: var(--m-tinta-2);
}
body.nv-app .nv-note strong { color: var(--m-tinta); }
body.nv-app .nv-note-pronto { margin-bottom: 16px; border-left-color: #D9A21B; background: #FFF7E0; }
body.nv-app .nv-obra-nota { background: #FFF7E0; color: #6A4A00; }
body.nv-app .nv-btn-obra { background: #FFF1C4 !important; color: #6A4A00 !important; box-shadow: none !important; }

/* ═══════════════════ 8. CÓMO Y CUÁNTO, CONTACTO, AVISOS ═══════════════════ */
body.nv-app .nv-view-head-2 { margin-top: 34px; }
body.nv-app .nv-step-n,
body.nv-app .nv-route-n {
    background: var(--m-acento) !important;
    color: var(--m-sobre-acento) !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.nv-app .nv-step h4,
body.nv-app .nv-start-step b { color: var(--m-tinta); }
body.nv-app .nv-step p,
body.nv-app .nv-start-step small { color: var(--m-tinta-2); }
body.nv-app .nv-step-when { color: var(--m-acento-hondo); }

/* Planes: el destacado va en oscuro */
body.nv-app .nv-plan.featured { background: var(--m-panel) !important; box-shadow: var(--m-sombra) !important; }
body.nv-app .nv-plan-tag { background: var(--m-acento-luz); color: var(--m-acento-hondo); border: 0; }
body.nv-app .nv-plan.featured .nv-plan-tag { background: var(--m-acento); color: var(--m-sobre-acento); }
body.nv-app .nv-plan-price { color: var(--m-tinta); }
body.nv-app .nv-plan-ico li { background: var(--m-hueco); border: 0; color: var(--m-tinta-2); }
body.nv-app .nv-plan.featured .nv-plan-ico li { background: rgba(255, 255, 255, .08); }
body.nv-app .nv-plan-ico i { color: var(--m-acento-hondo); }

body.nv-app .nv-pago i { color: var(--m-tinta); }
body.nv-app .nv-pago b { color: var(--m-tinta-2); }

/* Preguntas */
body.nv-app .nv-acc { display: grid; gap: 10px; }
body.nv-app .nv-acc-head {
    min-height: 56px;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--m-tinta);
    background: none;
}
body.nv-app .nv-acc-head i { color: var(--m-acento-hondo); }
body.nv-app .nv-acc-body p { color: var(--m-tinta-2); }

/* Contacto */
body.nv-app .nv-contact-row b { color: var(--m-tinta); }
body.nv-app .nv-contact-row small { color: var(--m-tinta-2); }
body.nv-app .nv-contact-row.nv-wa > i { background: #1FA855 !important; color: #fff !important; }
body.nv-app .nv-field span { color: var(--m-tinta); font-weight: 700; }
body.nv-app .nv-field input,
body.nv-app .nv-field select,
body.nv-app .nv-field textarea {
    min-height: 50px;
    border: 1px solid var(--m-linea);
    border-radius: 14px;
    background: var(--m-hueco);
    color: var(--m-tinta);
    box-shadow: none;
}
body.nv-app .nv-field textarea { min-height: 110px; }
body.nv-app .nv-field input:focus,
body.nv-app .nv-field select:focus,
body.nv-app .nv-field textarea:focus {
    outline: none;
    border-color: var(--m-acento-hondo);
    box-shadow: 0 0 0 4px var(--m-acento-luz);
    background: #fff;
}
body.nv-app .nv-field input::placeholder,
body.nv-app .nv-field textarea::placeholder { color: var(--m-tinta-3); }
body.nv-app .nv-form-legal { color: var(--m-tinta-3); }

/* Aviso de cookies: tarjeta blanca, por encima de la barra */
body.nv-app .cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(80px + var(--m-abajo)) !important;
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--m-papel) !important;
    box-shadow: var(--m-sombra) !important;
    color: var(--m-tinta) !important;
    z-index: 1100 !important;
}
body.nv-app .cookie-banner p { color: var(--m-tinta-2) !important; }
body.nv-app .cookie-banner .fa-cookie-bite { color: var(--m-acento-hondo) !important; }
body.nv-app .cookie-banner .btn-clay {
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 800;
}
body.nv-app .cookie-banner .btn-primary { background: var(--m-acento) !important; color: var(--m-sobre-acento) !important; border: 0 !important; }
body.nv-app .cookie-banner .btn-outline { background: var(--m-hueco) !important; color: var(--m-tinta) !important; border: 0 !important; }

/* Salto al contenido */
body.nv-app .nv-skip { z-index: 3000; }

/* Menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .m-barra, .m-compacta, .m-hoja-panel, .m-info-panel,
    .m-hoja-item, .m-ajustes, .m-hoja-panel > .m-boton { transition: none !important; }
}
html[data-movimiento="no"] .m-barra,
html[data-movimiento="no"] .m-compacta,
html[data-movimiento="no"] .m-hoja-panel,
html[data-movimiento="no"] .m-info-panel { transition: none !important; }

/* Los botones de tema traen de escritorio su propia caja en columna */
body.nv-app .m-seg .nv-tema { flex-direction: row; width: auto; min-height: 0; margin: 0; border: 0; }
body.nv-app .m-seg .nv-tema small { display: none; }

/* Aviso de cookies compacto: una línea de texto y dos botones chicos */
body.nv-app .cookie-banner { padding: 12px 14px !important; gap: 10px !important; }
body.nv-app .cookie-banner .cookie-content { gap: 10px !important; }
body.nv-app .cookie-banner p { font-size: .84rem !important; line-height: 1.35 !important; margin: 0 !important; }
body.nv-app .cookie-banner .cookie-buttons { gap: 8px !important; }
body.nv-app .cookie-banner .btn-clay { min-height: 38px !important; padding: 0 16px !important; font-size: .82rem !important; }

/* ══════════════════════════════════════════
   La lechuza en el celular
   Una por sección, en su portada oscura.
   ══════════════════════════════════════════ */
/* Grande: puede comerse un poco del margen de la cabecera. */
.m-phero-owl { --k: 3; display: block; margin: -10px -14px -16px; }
/* En Servicios la portada ya lleva la lechuza del panel abierto; dentro del
   panel sería la misma dos veces en la misma pantalla. */
body.nv-app .nv-owl-stage { display: none; }

/* ══════════════════════════════════════════
   Proyectos: tarjeta apaisada con mockup
   Arriba, la vista de escritorio en una ventana de navegador y, encima, el
   celular. Todo con proporción fija y object-fit: la captura nunca se sale
   de su marco.
   ══════════════════════════════════════════ */
.m-casos { display: grid; gap: 14px; }
.m-caso {
    overflow: hidden;
    border-radius: var(--m-r-lg);
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
}
.m-caso-mas { display: none; }
.m-casos.m-abiertos .m-caso-mas,
.m-casos--todos .m-caso-mas { display: block; animation: m-aparece .4s var(--nv-spring) both; }
@keyframes m-aparece { from { opacity: 0; transform: translateY(12px); } }

.m-caso-mock {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1.02;
    overflow: hidden;
    background: #0C0F11;
}
/* Ventana de escritorio: el recuadro entero es el navegador */
.m-mock-nav {
    position: absolute;
    inset: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.m-mock-barra {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 14px;
    padding: 0 6px;
    background: #14191C;
    border-bottom: 1px solid #000;
}
.m-mock-barra i { width: 4px; height: 4px; border-radius: 50%; background: #3C474D; flex: none; }
.m-mock-barra em {
    flex: 1;
    min-width: 0;
    margin-left: 5px;
    overflow: hidden;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 6.5px;
    font-style: normal;
    line-height: 1;
    color: #93A3AB;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.m-mock-nav img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 545;
    object-fit: cover;
    object-position: top center;
}
/* Celular encima, a la derecha y bajando del borde */
.m-mock-tel {
    position: absolute;
    right: 3%;
    bottom: -20%;
    width: 24%;
    display: block;
    padding: 3px;
    border-radius: 14px;
    background: #0B0E10;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 28px rgba(0, 0, 0, .45);
}
.m-mock-tel img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 1314;
    object-fit: cover;
    object-position: top center;
    border-radius: 11px;
}
.m-caso-mock .m-mock-nav { display: flex; flex-direction: column; border-radius: 0; box-shadow: none; }
.m-caso-mock .m-mock-nav img { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; filter: brightness(.62) saturate(.9); }
/* El celular se despega del escritorio atenuado con un halo suave. */
.m-caso-mock .m-mock-tel { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 22px rgba(0, 229, 255, .32), 0 14px 26px rgba(0, 0, 0, .5); }
.m-caso-mock .m-chip { top: 22px; left: 8px; padding: 4px 9px; }
.m-caso-mock .m-chip-panel { left: auto; right: 8px; top: 22px; background: var(--m-acento); color: var(--m-sobre-acento); }
.m-caso-mock .m-chip-panel i { font-size: .6rem; }

.m-caso-txt { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.m-caso-txt small {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-acento-hondo);
}
.m-caso-txt b { font-family: var(--font-heading); font-size: 1.08rem; font-weight: 800; line-height: 1.2; color: var(--m-tinta); }
.m-caso-txt > span { font-size: .84rem; line-height: 1.4; color: var(--m-tinta-2); }

.m-ver-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 999px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
    font-family: var(--font-heading);
    font-size: .88rem;
    font-weight: 800;
    color: var(--m-tinta);
    cursor: pointer;
}
.m-ver-mas i { color: var(--m-acento-hondo); transition: transform .3s var(--nv-spring); }
.m-ver-mas[aria-expanded="true"] i { transform: rotate(180deg); }

/* La lista copiada a Servicios y a Proyectos ocupa el lugar de la vieja */
body.nv-app #sv-web .nv-caselist,
body.nv-app #v-proyectos .nv-caselist-todos { display: none; }
body.nv-app .m-casos-copia { margin: 0 0 22px; }

/* ── Mockups dentro de la hoja de Info ── */
.m-mocks { display: grid; gap: 12px; margin: 0 0 16px; }
.m-mocks figure { margin: 0; min-width: 0; }
#m-info-cuerpo .m-mock-nav img,
#m-info-cuerpo .m-mock-tel img { cursor: zoom-in; }
.m-mocks figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 7px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--m-tinta-3);
}
.m-mocks .m-mock-nav,
.m-vistas .m-mock-nav {
    position: static;
    width: 100%;
    border: 7px solid #0B0E10;
    border-bottom-width: 9px;
    border-radius: 16px;
    background: #0B0E10;
    box-shadow: var(--m-sombra-0);
}
.m-mocks .m-mock-barra,
.m-vistas .m-mock-barra { height: 18px; gap: 4px; padding: 0 8px; border-radius: 8px 8px 0 0; }
.m-mocks .m-mock-barra i,
.m-vistas .m-mock-barra i { width: 6px; height: 6px; }
.m-mocks .m-mock-barra em,
.m-vistas .m-mock-barra em { font-size: 9px; }
.m-mocks-fila { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 12px; align-items: start; }
.m-mocks .m-mock-tel { position: static; width: 100%; padding: 4px; border-radius: 20px; box-shadow: var(--m-sombra-0); }
.m-mocks .m-mock-tel img { border-radius: 16px; }
/* Botones: tres cuando hay panel (Sitio, Panel, Cotizar) */
.m-tres { gap: 6px; }
.m-tres .m-boton { padding: 0 6px; gap: 6px; font-size: .78rem; }

/* ── Hoja del panel: capturas de sus herramientas ── */
.m-vistas { display: grid; gap: 16px; margin: 4px 0 18px; }
.m-vista { margin: 0; }
.m-vista img { aspect-ratio: 1200 / 750; }
.m-vista figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: .84rem; line-height: 1.4; color: var(--m-tinta-2); }
.m-vista figcaption b { font-family: var(--font-heading); font-size: .92rem; font-weight: 800; color: var(--m-tinta); }
.m-vistas-tel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.m-vistas-tel figure { margin: 0; }
.m-vistas-tel .m-mock-tel { position: static; width: 100%; padding: 3px; border-radius: 16px; }
.m-vistas-tel .m-mock-tel img { border-radius: 13px; }
.m-vistas-tel figcaption { margin-top: 6px; font-size: .72rem; font-weight: 700; text-align: center; color: var(--m-tinta-3); }
.m-mocks-claves { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.m-mocks-claves li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--m-hueco);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--m-tinta);
}
.m-mocks-claves i { width: 16px; flex: none; text-align: center; color: var(--m-acento-hondo); }
.m-info-cuerpo .nv-bens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
.m-info-cuerpo .nv-ben {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border-radius: 14px;
    background: var(--m-hueco);
}
.m-info-cuerpo .nv-ben i { font-size: .95rem; color: var(--m-acento-hondo); margin-bottom: 3px; }
.m-info-cuerpo .nv-ben b { font-size: .82rem; line-height: 1.25; color: var(--m-tinta); }
.m-info-cuerpo .nv-ben small { font-size: .74rem; line-height: 1.35; color: var(--m-tinta-2); }
.m-info-acciones { display: grid; gap: 10px; }
.m-info-cuerpo .nv-obra-nota { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; font-size: .84rem; }
.m-boton-borde { background: var(--m-noche); color: #fff; box-shadow: 0 8px 18px rgba(5, 8, 10, .22); }

/* El resumen de un servicio dentro de la hoja */
.m-info-cuerpo .m-servicio > p { margin: 0 0 12px; }
.m-info-cuerpo .m-servicio .nv-list { margin: 0 0 16px; }
.m-info-cuerpo .m-servicio .nv-tarifas { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: .84rem; }
.m-info-cuerpo .m-servicio .nv-tarifas th,
.m-info-cuerpo .m-servicio .nv-tarifas td { padding: 10px 4px; border-bottom: 1px solid var(--m-linea); text-align: left; }
.m-info-cuerpo .m-servicio .nv-tarifas td:last-child { text-align: right; color: var(--m-tinta-3); white-space: nowrap; }
.m-info-cuerpo .m-servicio .m-detalle { margin-bottom: 16px; }

/* ══════════════════════════════════════════
   Extras del inicio: fila con la foto a la izquierda y Info / Pedir
   ══════════════════════════════════════════ */
.m-extras { display: grid; gap: 12px; }
.m-extra {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 8px;
    border-radius: 20px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
}
.m-extra img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--m-hueco); }
.m-extra-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 4px; }
.m-extra-txt b { font-family: var(--font-heading); font-size: .95rem; font-weight: 800; line-height: 1.2; color: var(--m-tinta); }
.m-extra-txt small { font-size: .84rem; font-weight: 800; color: var(--m-acento-hondo); }
.m-extra .m-dos { margin-top: 8px; }

/* ══════════════════════════════════════════
   Por qué NearVisual
   ══════════════════════════════════════════ */
.m-razones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-razon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 20px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
}
.m-razon .m-tono { width: 40px; height: 40px; flex-basis: 40px; border-radius: 14px; font-size: .95rem; margin-bottom: 6px; }
.m-razon b { font-family: var(--font-heading); font-size: .88rem; font-weight: 800; line-height: 1.2; color: var(--m-tinta); }
.m-razon small { font-size: .76rem; line-height: 1.4; color: var(--m-tinta-2); }

/* ══════════════════════════════════════════
   Desfile de Lechuzín: pregunta, todos sus oficios y su lluvia
   ══════════════════════════════════════════ */
.m-desfile {
    position: relative;
    overflow: hidden;
    margin: 30px 0 0;
    padding: 26px 0 24px;
    background: var(--m-panel);
    text-align: center;
    isolation: isolate;
}
.m-desfile > *:not(.m-lluvia) { position: relative; z-index: 1; }
.m-desfile-cabeza { padding: 0 20px; }
.m-desfile .m-ceja { color: var(--m-acento); }
.m-desfile h2 {
    margin: 6px 0 0;
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
}
/* Primero las lechuzas; debajo la pregunta y el botón. */
.m-desfile > .m-boton { margin-top: 14px; }
.m-desfile-marco { margin: 0 0 18px; overflow: hidden; }
.m-desfile-riel { display: flex; width: max-content; animation: m-desfile 46s linear infinite; }
.m-desfile-tanda { display: flex; gap: 4px; padding-right: 4px; }
.m-desfile-item { display: flex; flex-direction: column; align-items: center; width: 144px; margin: 0; }
.m-desfile-item .nv-owl { --k: 3; }
.m-desfile-item figcaption {
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-heading);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
    color: #0C1114;
}
@keyframes m-desfile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .m-desfile-riel { animation: none; } }
html[data-movimiento="no"] .m-desfile-riel { animation: none; }

/* ══════════════════════════════════════════
   Formas de pago
   ══════════════════════════════════════════ */
.m-pagos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.m-pagos li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 2px 10px;
    border-radius: 16px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
    font-size: .64rem;
    font-weight: 800;
    text-align: center;
    color: var(--m-tinta-2);
}
.m-pagos i { font-size: 1.35rem; color: var(--m-tinta); }
.m-pagos-nota {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--m-acento-bruma);
    font-size: .84rem;
    font-weight: 700;
    color: var(--m-tinta-2);
}
.m-pagos-nota i { color: var(--m-acento-hondo); }

/* ══════════════════════════════════════════
   Dónde trabajo: mapa ilustrado, no de Google
   ══════════════════════════════════════════ */
.m-zona {
    overflow: hidden;
    border-radius: var(--m-r-lg);
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
}
.m-zona-mapa {
    position: relative;
    height: 170px;
    overflow: hidden;
    background:
        linear-gradient(rgba(0, 121, 140, .07) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(0, 121, 140, .07) 1px, transparent 1px) 0 0 / 22px 22px,
        radial-gradient(70% 90% at 50% 55%, var(--m-acento-bruma), var(--m-hueco));
}
.m-zona-onda {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    border: 2px solid var(--m-acento-hondo);
    opacity: 0;
    animation: m-onda 3.6s ease-out infinite;
}
.m-zona-onda:nth-child(2) { animation-delay: 1.2s; }
.m-zona-onda:nth-child(3) { animation-delay: 2.4s; }
@keyframes m-onda {
    0% { transform: scale(.4); opacity: .55; }
    100% { transform: scale(4.2); opacity: 0; }
}
.m-zona-pin {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -100%);
    font-size: 2rem;
    color: var(--m-acento-hondo);
    filter: drop-shadow(0 6px 8px rgba(0, 121, 140, .3));
}
.m-zona-nombre {
    position: absolute;
    left: 50%;
    top: calc(55% + 8px);
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--m-papel);
    box-shadow: var(--m-sombra-0);
    font-family: var(--font-heading);
    font-size: .74rem;
    font-weight: 800;
    color: var(--m-tinta);
}
.m-zona-owl { --k: 2; position: absolute; right: 6px; top: 4px; }
.m-zona-owl-lap { right: auto; left: 6px; top: auto; bottom: 2px; }
.m-zona-txt { padding: 16px; }
.m-zona-txt p { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; color: var(--m-tinta-2); }
.m-zona-lista { list-style: none; display: grid; gap: 8px; margin: 0 0 16px; padding: 0; }
.m-zona-lista li { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 700; color: var(--m-tinta); }
.m-zona-lista i { width: 18px; flex: none; text-align: center; color: var(--m-acento-hondo); }
@media (prefers-reduced-motion: reduce) { .m-zona-onda { animation: none; } }
html[data-movimiento="no"] .m-zona-onda { animation: none; }
.m-info-cuerpo .m-caso-hoja > p:first-child { margin: 0 0 14px; }

/* ══════════════════════════════════════════
   Contacto del inicio (como en Candy Art y Carlitos)
   ══════════════════════════════════════════ */
.m-contacto { margin: 30px 0 0; }
.m-contacto-panel {
    position: relative;
    overflow: hidden;
    padding: 24px 20px 64px;
    border-radius: var(--m-r-xl);
    background: var(--m-panel);
    text-align: center;
    isolation: isolate;
}
.m-contacto-arte { position: relative; width: 120px; height: 104px; margin: 0 auto 12px; }
.m-contacto-arte img { position: relative; width: 84px; height: 86px; margin: 10px auto 0; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 229, 255, .3)); }
.m-burbuja { position: absolute; border-radius: 50%; z-index: -1; }
.m-burbuja-cian { width: 70px; height: 70px; left: -4px; top: 18px; background: rgba(0, 229, 255, .35); filter: blur(2px); }
.m-burbuja-clara { width: 44px; height: 44px; right: 0; top: 0; background: rgba(255, 255, 255, .18); }
.m-contacto-panel h2 { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: #fff; }
.m-contacto-panel p { margin: 8px auto 0; max-width: 30ch; font-size: .92rem; line-height: 1.5; color: rgba(247, 248, 248, .72); }
.m-contacto-tarjetas { position: relative; display: grid; gap: 12px; margin: -44px 12px 0; }
.m-contacto-tarjeta {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: var(--m-r-lg);
    background: var(--m-papel);
    box-shadow: var(--m-sombra);
}
.m-contacto-tarjeta h3 { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--m-tinta); }
.m-contacto-tarjeta > p { margin: -6px 0 2px; font-size: .86rem; color: var(--m-tinta-2); }
.m-campo { display: grid; gap: 6px; }
.m-campo span { font-size: .8rem; font-weight: 800; color: var(--m-tinta); }
.m-campo input,
.m-campo textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--m-hueco);
    font: inherit;
    color: var(--m-tinta);
}
.m-campo textarea { min-height: 96px; resize: vertical; }
.m-campo input:focus,
.m-campo textarea:focus { outline: none; border-color: var(--m-acento-hondo); background: #fff; box-shadow: 0 0 0 4px var(--m-acento-luz); }
.m-contacto-legal { margin: 0; font-size: .74rem; text-align: center; color: var(--m-tinta-3); }

/* ══════════════════════════════════════════
   Hoja «Más»: franja negra arriba, como las de Info
   ══════════════════════════════════════════ */
.m-hoja-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -10px -16px 2px;
    padding: 16px 16px 14px;
    border-radius: 28px 28px 0 0;
    background: var(--m-noche);
    color: #fff;
}
.m-hoja-top img { width: 26px; height: 26px; object-fit: contain; }
.m-hoja-top b { flex: 1; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 800; }
.m-hoja-top .m-info-cerrar { position: static; }

/* ══════════════════════════════════════════
   Énfasis en los bloques de texto largos
   ══════════════════════════════════════════ */
.m-info-cuerpo p b,
.m-zona-txt p b { font-weight: 800; color: var(--m-tinta); }
.m-info-cuerpo p .m-clave,
.m-zona-txt p .m-clave { color: var(--m-acento-hondo); }
.m-contacto-panel p b { font-weight: 800; color: #fff; }
.m-contacto-panel p .m-clave { color: var(--m-acento); }

/* ══════════════════════════════════════════
   Visor de imágenes (hojas de Info)
   ══════════════════════════════════════════ */
.m-visor {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: rgba(5, 8, 10, .94);
    opacity: 0;
    transition: opacity .22s ease;
}
.m-visor.abierto { opacity: 1; }
.m-visor[hidden] { display: none; }
.m-visor-cerrar {
    position: absolute;
    top: calc(var(--m-arriba) + 12px);
    right: 12px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.1rem;
}
.m-visor-marco {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    align-items: safe center;
    justify-content: center;
    padding: calc(var(--m-arriba) + 68px) 12px calc(24px + var(--m-abajo));
}
.m-visor img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    transform: scale(.96);
    transition: transform .28s var(--nv-spring);
}
.m-visor.abierto img { transform: none; }
.m-visor-tel img { width: auto; max-width: 100%; max-height: none; }
.m-visor-tel .m-visor-marco { align-items: flex-start; }

/* Hablemos: la sección ya está dentro del lienzo con su margen */
.m-hablemos > .m-seccion { padding: 0; }

/* En el teléfono la portada va sin la N gigante de fondo. */
@media (max-width: 1023.98px) {
    .m-portada-panel::after { display: none; }
}