/* ================================================================
   HERO
   ================================================================ */

/* Texto del hero borrado desde el panel: se saca del flujo para que no deje
   el hueco de sus márgenes. `display:none` y no `visibility` justamente para
   que no ocupe lugar.
   El !important es necesario: los 25 temas definen su propio
   `body.layout-X .hero-tag { display: … }`, que con dos clases y un elemento
   siempre le gana a una clase suelta. Como el elemento está vacío, ocultarlo
   no puede tapar contenido.
   En modo edición vuelve a mostrarse (con un cartelito de qué campo es) para
   poder hacerle doble clic y volver a escribirlo desde la misma página; si se
   ocultara siempre, el único camino de vuelta sería el panel. */
.hero-texto-vacio { display: none !important; }

body.edit-mode .hero-texto-vacio {
    display: inline-block !important;
    min-height: 1em;
    min-width: 6rem;
    opacity: 0.55;
}
body.edit-mode .hero-texto-vacio::after {
    content: 'texto vacío — doble clic para escribir';
    /* Tipografía propia: heredada del hero salía en la display del tema, a
       veces en versalitas, y a 0.7rem no se leía. */
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.hero-section {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, var(--color-primario-deep) 0%, var(--color-primario) 50%, #1f4a36 100%);
    overflow: hidden;
}


/* Grain texture overlay */

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
    mix-blend-mode: overlay;
}


/* Subtle vignette */

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.28) 100%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* La opacidad la controla el slider del admin vía --hero-overlay-opacity
       (la setea api.js). El número es sólo el default si no hay config.
       El COLOR del velo también se puede elegir (Colores por zona);
       color-mix combina los dos sin tener que pasar el hex a rgb en JS. */
    background: color-mix(in srgb,
        var(--color-zona-hero-overlay, #000000) calc(var(--hero-overlay-opacity, 0.22) * 100%),
        transparent);
    z-index: 1;
}

/* Oculto por defecto: solo un tema (ej. dietetica) lo activa con
   `display` propio en su hoja de tema. Como el mismo index.html se
   comparte entre los 19 layouts, este elemento existe en el DOM
   siempre — mantenerlo display:none por defecto es lo que le permite
   a la lógica JS de fondo de hero (api.js/editor.js) detectar si el
   layout activo realmente lo usa o si debe seguir aplicando el fondo
   sobre .hero-section como antes. */
.hero-split-media {
    display: none;
}

/* Mismo motivo que .hero-split-media arriba: estos elementos del hero
   partido (botón secundario y stats de confianza) viven en el mismo
   index.html compartido por los 19 layouts. Ocultos por defecto —
   solo dietetica.css los reactiva con `display` propio. */
.hero-cta-secondary {
    display: none;
}

.hero-trust-stats {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 1.5rem;
    max-width: 680px;
}

.hero-tag {
    display: inline-block;
    background: var(--color-hero-tag-bg);
    color: var(--color-hero-tag-text);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    padding: 0.3rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--color-hero-tag-border);
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.hero-titulo {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-zona-hero-texto, var(--color-secundario));
    line-height: 1.12;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.hero-sub {
    font-size: 1rem;
    /* 300 sobre una foto con overlay es demasiado fino: los trazos se pierden
       contra las zonas claras de la imagen. */
    font-weight: 400;
    color: var(--color-hero-subtitulo);
    /* El hero suele llevar foto: una sombra apenas perceptible garantiza que la
       bajada se lea sobre cualquier imagen sin oscurecer más el overlay. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    line-height: 1.65;
    margin-bottom: 1.8rem;
    letter-spacing: 0.01em;
}

.hero-cta {
    background-color: var(--color-acento);
    color: var(--color-texto-sobre-acento);
    border: none;
    padding: 0.82rem 2.2rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, filter 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    letter-spacing: 0.02em;
    text-transform: none;
}

.hero-cta:hover {
    filter: brightness(1.1);
}

@media (max-width: 600px) {
    .hero-section {
        min-height: 290px;
    }
    .hero-titulo {
        font-size: 2.1rem;
    }
    .hero-sub {
        font-size: 0.88rem;
    }
}


/* Hero con imagen de fondo personalizada */

.hero-section.has-hero-bg {
    background: none;
}

.hero-section.has-hero-bg::before {
    display: none;
}

.hero-section.has-hero-bg .hero-overlay {
    background: color-mix(in srgb,
        var(--color-zona-hero-overlay, #000000) calc(var(--hero-overlay-opacity, 0.22) * 100%),
        transparent);
}


/* Carrusel de imágenes integrado como fondo del hero */

.hero-section .slide-carousel-section {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.hero-section .slide-carousel {
    width: 100%;
    height: 100%;
    border-radius: 0;
    aspect-ratio: auto;
    max-height: none;
    box-shadow: none;
}

.hero-section .slide-caption {
    display: none;
}


/* ================================================================
   CARRUSEL DE CATEGORÍAS
   ================================================================ */

.cat-carousel-section {
    padding: 1.4rem 0 2rem;
    overflow: hidden;
}

.cat-carousel-section .seccion-titulo {
    padding: 0 1.2rem;
    margin-bottom: 1.1rem;
}

.cat-carousel-track-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.cat-carousel-viewport {
    flex: 1;
    /* Scroll nativo: es lo que permite arrastrar con el dedo en el teléfono.
       Con overflow:hidden y translateX el carrusel sólo respondía a las
       flechas, que en móvil son chicas y no son un gesto esperado. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0.4rem 0 0.6rem;
}
.cat-carousel-viewport::-webkit-scrollbar { display: none; }
.cat-carousel-card {
    scroll-snap-align: start;
}

.cat-carousel-track {
    display: flex;
    gap: 10px;
    padding: 0 1.2rem;
}


/* Tarjeta: foto de fondo completa + nombre superpuesto */

.cat-carousel-card {
    flex: 0 0 300px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.14);
    transition: transform 0.22s, box-shadow 0.22s;
    /* #c8bfb0 era un beige fijo, ajeno a los 24 temas. */
    background: var(--color-fondo-qty);
}

.cat-carousel-card:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}


/* Imagen de fondo */

.cat-carousel-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform 0.4s ease;
}

.cat-carousel-card:hover .cat-carousel-card-bg {
    transform: scale(1.04);
}


/* Gradiente oscuro en la parte inferior */

.cat-carousel-card-overlay {
    position: absolute;
    inset: 0;
    /* Se oscurece el pie de la tarjeta: con fotos claras el nombre en blanco
       quedaba por debajo del contraste mínimo (medido 1.82 sin foto). */
    background: linear-gradient( to bottom, transparent 30%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0.78) 100%);
}


/* Texto del nombre */

.cat-carousel-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 0.9rem 0.85rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    /* Franja propia detrás del nombre: el degradado de la tarjeta depende de
       cómo sea la foto (con una foto clara el blanco no llegaba al mínimo).
       Así el nombre se lee siempre, tenga foto clara, oscura o ninguna. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.15));
    z-index: 1;
}


/* Placeholder sin foto */

.cat-carousel-card-placeholder {
    position: absolute;
    inset: 0;
    /* Velo semitransparente: deja ver la textura del banner genérico que hay
       detrás y a la vez le da a la tarjeta el color del tema, con la inicial
       blanca legible encima. */
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--color-primario-deep, #1a3a2a) 88%, transparent),
        color-mix(in srgb, var(--color-primario, #2d6a4f) 82%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    /* Es la inicial de la categoría, no un emoji: tipografía del tema y
       tamaño grande para que funcione como marca de la tarjeta. */
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
}


/* Flechas */

.cat-carousel-arrow {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
    z-index: 2;
    margin: 0 6px;
    color: var(--color-primario, #2d6a4f);
    flex-shrink: 0;
    align-self: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cat-carousel-arrow:hover {
    background: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.cat-carousel-arrow:disabled {
    opacity: 0.30;
    cursor: default;
    transform: none;
}

@media (max-width: 600px) {
    /* Antes: tarjetas de 220px fijos en un viewport de 375 → se veía 1,7
       tarjetas y la segunda quedaba cortada al medio. Ahora entran dos
       completas (con un pequeño asomo de la siguiente) y el deslizamiento
       encaja en cada tarjeta. */
    .cat-carousel-viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .cat-carousel-viewport::-webkit-scrollbar { display: none; }
    .cat-carousel-track {
        transform: none !important;
        gap: 8px;
        padding: 0 var(--padding-lateral);
    }
    .cat-carousel-card {
        flex: 0 0 calc((100% - 2.5rem - 8px) / 2);
        height: 150px;
        scroll-snap-align: start;
    }
    .cat-carousel-card-label {
        font-size: 0.74rem;
        padding: 0.7rem 0.5rem 0.6rem;
        letter-spacing: 0.03em;
    }
}


/* Indicador de arrastre: en el teléfono las flechas no se muestran y la barra
   de scroll está oculta, así que no había ninguna señal de que el carrusel
   siguiera hacia el costado. */
.cat-carousel-progress {
    display: none;
    height: 3px;
    border-radius: 99px;
    background: var(--color-gris-claro, rgba(0,0,0,.1));
    margin: 0.7rem var(--padding-lateral) 0;
    overflow: hidden;
}
.cat-carousel-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primario-legible, var(--color-primario, #666));
    transition: transform .12s linear;
    transform-origin: left center;
}
@media (max-width: 900px) {
    .cat-carousel-progress { display: block; }
}

/* ================================================================
   STRIP INFO
   ================================================================ */

.strip-info {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    background: rgba(0,0,0,0.02);
    border-top: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.strip-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.85rem 1.8rem;
    flex: 1;
    min-width: 150px;
    max-width: 300px;
    border-right: 1px solid rgba(0,0,0,0.07);
}
.strip-item:last-of-type { border-right: none; }

.strip-icon {
    display: none;
}

.strip-item strong {
    display: block;
    font-size: 0.83rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    letter-spacing: 0.005em;
}

.strip-item span {
    display: block;
    font-size: 0.71rem;
    font-weight: 400;
    color: #666;
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* Subtítulo sin cargar: se tapa para no dejar un renglón en blanco que
   descuadre la fila, pero en modo edición vuelve — si no, los dos primeros
   ítems (que salen vacíos mientras no haya pedido mínimo ni días de entrega)
   no tenían dónde hacer doble clic y el único camino era el panel. */
.strip-item span.strip-texto-vacio { display: none; }
body.edit-mode .strip-item span.strip-texto-vacio {
    display: block;
    min-height: 1em;
    min-width: 7rem;
    opacity: 0.55;
}
body.edit-mode .strip-item span.strip-texto-vacio::after {
    content: 'sin texto — doble clic para escribir';
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.strip-sep {
    width: 1px;
    height: 30px;
    background: var(--color-gris-claro);
    flex-shrink: 0;
}

@media (max-width: 1000px) {
    .quick-cat-pills {
        display: none;
    }
    #category-buttons {
        padding: 0.5rem 0.8rem;
        /* Antes: space-evenly. Este archivo carga DESPUÉS de header.css, así
           que ganaba el empate de especificidad y en el rango 601–1000px
           (tablets) reintroducía el bug de nav cortado de los dos lados
           cuando hay más links que ancho. `safe center` = centrado si entra,
           alineado al inicio si desborda. */
        justify-content: center;
        justify-content: safe center;
    }
    .strip-sep {
        display: none;
    }
}

/* El strip pasa a 2×2 recién a 760px. Antes lo hacía a 1000px y, como cada
   .strip-item tiene max-width:300px, en una tablet de 900px quedaban dos
   columnas de 437px con el contenido de 300px y un hueco al costado. Entre 761
   y 1000px los 4 ítems entran cómodos en una fila (~225px cada uno). */
@media (max-width: 760px) {
    /* Grilla de 2×2 (no scroll horizontal): las props de flex que había acá
       quedaban muertas junto a display:grid y confundían. */
    .strip-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .strip-item {
        min-width: 0;
        max-width: none;
        padding: 0.8rem 1rem;
    }
}


/* ================================================================
   CATEGORÍAS VISUALES
   ================================================================ */

.categorias-visuales {
    padding: 1.8rem var(--padding-lateral) 1rem;
    max-width: var(--ancho-contenido);
    margin: 0 auto;
}

.seccion-titulo {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    /* #888 daba contraste 3.3 sobre el fondo claro en los 24 temas: es un label
       chico (0.68rem), necesita 4.5. El token sigue al fondo del tema. */
    color: var(--color-texto-pagina-suave);
    text-align: left;
    margin-bottom: 1.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Grilla pareja de tarjetas anchas, no una fila de bloques de colores: las
   columnas se acomodan solas al ancho disponible y todas las tarjetas miden
   igual, aunque el nombre sea largo. */
.categoria-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 0.7rem;
    justify-content: center;
}
.categoria-cards-grid > .cat-visual-card {
    max-width: 100%;
}

/* Dos columnas: miniatura | texto. El alto pasa de ~150px a ~62px. Se arma
   con grid-areas para no tener que envolver nombre y contador en un div
   nuevo desde el JS. */
.cat-visual-card {
    background: var(--color-secundario);
    /* Derivado del primario del tema y no un negro fijo: sobre los temas
       oscuros un rgba(0,0,0,…) desaparece y la tarjeta queda sin contorno. */
    border: 1px solid color-mix(in srgb, var(--color-primario) 14%, transparent);
    border-radius: 12px;
    padding: 0.9rem 0.7rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    /* Columna: foto arriba, nombre y contador debajo. Antes eran dos columnas
       (miniatura | texto) y los nombres largos no entraban — pasa seguido,
       porque un producto puede estar en varias categorías a la vez y el nombre
       queda como "Snacks Saludables, Proteico, Celiaco, Sin Azucar". */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;            /* todas las de una fila, del mismo alto */
    box-sizing: border-box;
    overflow: hidden;        /* red de contención: nada se sale de la tarjeta */
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.cat-visual-card:hover {
    border-color: var(--color-primario);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

/* !important necesario: casi todos los temas definen su propio
   `body.layout-X .cat-visual-card { border: ... }` — ese selector siempre
   tiene un punto más de especificidad que este (el `body.layout-X` extra),
   así que sin !important el estado activo queda invisible en cualquier
   tema, no solo en mobile. */
.cat-visual-card.active-cat {
    border-color: var(--color-primario) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px var(--color-primario) !important;
}

.cat-visual-card.active-cat .cat-visual-nombre {
    color: var(--color-primario) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* La miniatura ocupa las dos filas de la izquierda. Es una foto de un producto
   real de la categoría; si no hay ninguna con imagen, el mismo recuadro lleva
   el emoji o la inicial sobre el color de la categoría. */
.cat-visual-emoji {
    width: 3.1rem;
    height: 3.1rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 1.25rem;
    line-height: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.cat-visual-foto {
    object-fit: cover;
    background: var(--color-gris-claro, #f1f1f1);
}

.cat-visual-inicial {
    font-size: 1rem;
    font-weight: 700;
}

.cat-visual-nombre {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-primario);
    line-height: 1.3;
    letter-spacing: 0.005em;
    /* Hasta tres líneas y corta con puntos suspensivos; el nombre completo
       queda en el `title` de la tarjeta (ver renderCategoryCards). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;   /* una categoría de una palabra larga tampoco desborda */
    max-width: 100%;
}

/* Celda "+": abre las categorías que no entraron. Se dibuja como una tarjeta
   más (misma caja, mismo alto) pero en tono apagado, para que se lea como
   acción y no como una categoría. */
.cat-visual-mas .cat-visual-mas-signo {
    background: color-mix(in srgb, var(--color-primario) 10%, transparent);
    color: var(--color-primario);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}
.cat-visual-mas .cat-visual-nombre { color: var(--color-primario); }
.cat-visual-mas:hover .cat-visual-mas-signo {
    background: color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.cat-visual-count {
    margin-top: auto;          /* pegado abajo: los contadores alinean entre tarjetas */
    font-size: 0.68rem;
    /* --color-gris-medio (#BEB5A4) quedaba casi invisible sobre las tarjetas. */
    color: var(--color-texto-suave);
    letter-spacing: 0.02em;
    line-height: 1.35;
    opacity: 0.75;
}

@media (max-width: 500px) {
    .categoria-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }
    .cat-visual-card {
        padding: 0.7rem 0.5rem;
        gap: 0.4rem;
        border-radius: 10px;
    }
    .cat-visual-emoji {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.2rem;
    }
    .cat-visual-nombre { font-size: 0.78rem; }
    .cat-visual-count  { font-size: 0.65rem; }
}



/* ── Video de fondo del hero ───────────────────────────────────────────────────
   Un video no puede ir en `background-image`, que es como pintan el hero los 16
   temas base y mayorista-figma: va como <video> real. Dos formas, según cómo el
   tema muestre su foto.

   1) Temas de FONDO: el video tapa el contenedor entero, por DEBAJO del velo y
      del texto. `z-index: 0` y no `-1`: con -1 se va detrás del fondo del propio
      .hero-section y no se ve. El velo y el grano son `z-index: 1` y
      .hero-content es 2, así que los tres siguen quedando arriba. */
.hero-video-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;   /* que no se coma el clic del botón del hero */
}

/* El contenedor tiene que ser el marco de referencia del `inset: 0`. .hero-section
   ya es relative, pero .hero-split-media y los heroes de tema no siempre. */
.con-hero-video { position: relative; overflow: hidden; }

/* 2) Temas figma con <img>: el video se inserta como HERMANO de la foto y con
      sus mismas clases, así hereda la caja que el tema ya definió (grilla,
      aspect-ratio, border-radius) sin medir nada en JS. La foto se esconde,
      pero sigue en el DOM: es la que tiene el `data-edit-key` con el que el
      editor visual la cambia. */
.hero-foto-con-video { display: none; }

/* En modo edición la foto vuelve a la vista aunque haya video, si no el doble
   clic para cambiarla no tiene dónde caer — el mismo criterio que los textos
   vacíos, que se muestran con su cartelito en vez de desaparecer. */
body.edit-mode .hero-foto-con-video {
    display: block;
    outline: 2px dashed rgba(255, 255, 255, .6);
    outline-offset: -2px;
}

/* Sin JS (o con el video todavía cargando) no queda un hueco negro: el poster
   ocupa la misma caja. `object-fit` acá también, porque un <video> sin la regla
   estira el poster en vez de recortarlo. */
video.hero-video { display: block; object-fit: cover; background: transparent; }