/*
 * Encabezado y menú del sitio público (estructura inspirada en edc.nyc).
 * Archivo escrito a mano: no pasa por Vite ni por el CSS público de 2025.
 * Todas las clases empiezan con "dh-" para no chocar con el resto del sitio.
 */

:root {
    --dh-alto: 68px;
    --dh-fondo: #303030;  /* mismo gris oscuro que bg-primary del sitio */
    --dh-franja: #303030;
    --dh-acento: #4e92ce;
    --dh-azul-texto: #6aaae3;  /* azul del sitio, un poco más claro para que se lea sobre el gris y las fotos */
    --dh-dorado: #d4af37;
    --dh-dorado-claro: #ffe57f;
}

@media (min-width: 1024px) {
    :root { --dh-alto: 116px; }
}

/* --dh-extra: línea adicional del encabezado cuando el submenú de la página queda a la vista
   (Región Paso del Norte, Industrias y CEC). La define el encabezado. */

/* Contenedor de la página: deja el espacio del encabezado salvo cuando va sobre una foto */
.dh-pagina { padding-top: calc(var(--dh-alto) + var(--dh-extra, 0px)); }
.dh-pagina--sobre-foto { padding-top: 0; }

/* ---------- Barra ---------- */
.dh {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: calc(var(--dh-alto) + var(--dh-extra, 0px));
    color: #fff;
    background: var(--dh-fondo);
    transition: background-color .25s ease, transform .3s ease;
}
.dh--sobre-foto { background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
/* La barra fija al subir es compacta: sin el submenú a la vista */
.dh--fijo {
    position: fixed;
    height: var(--dh-alto);
    background: var(--dh-fondo);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.dh--oculto { transform: translateY(-100%); }
.dh--abierto { background: var(--dh-fondo); }

.dh a { color: inherit; text-decoration: none; }
.dh button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dh :focus-visible { outline: 2px solid var(--dh-acento); outline-offset: 3px; }

/* Mide siempre lo mismo: el submenú a la vista cuelga debajo sin mover el logotipo ni las filas */
.dh-contenedor {
    position: relative;
    height: var(--dh-alto);
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(16px, 2.5vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 48px);
}

.dh-marca { flex-shrink: 0; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); position: relative; z-index: 2; }
.dh-logo { flex-shrink: 0; display: flex; align-items: center; }
.dh-logo img { height: 29px; width: auto; display: block; }
@media (min-width: 1024px) {
    .dh-logo img { height: 36px; }
}

/* Dar es Sembrar: su logotipo junto al de DECJ, separado por una línea */
.dh-logo-des { display: flex; align-items: center; padding-left: clamp(12px, 1.4vw, 20px); border-left: 1px solid rgba(255, 255, 255, .35); }
.dh-logo-des img { height: 28px; width: auto; display: block; }
@media (min-width: 1024px) {
    .dh-logo-des img { height: 38px; }
}
.dh-logo .dh-logo-isotipo { display: none; }
@media (max-width: 479px) {
    .dh-logo .dh-logo-completo { display: none; }
    .dh-logo .dh-logo-isotipo { display: block; }
}

/* ---------- Menú de escritorio ---------- */
.dh-escritorio { display: none; }
@media (min-width: 1024px) {
    .dh-escritorio { display: flex; flex: 1; min-width: 0; align-items: stretch; height: 100%; }
}

/* Franja gris que aparece al pasar el cursor por Región Paso del Norte, Industrias o CEC.
   Ocupa todo el ancho, como si el encabezado creciera; su altura la calcula el encabezado
   para cubrir siempre todo el submenú. */
.dh-franja {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--dh-franja);
    transition: height .28s cubic-bezier(.2, .7, .2, 1);
    z-index: 0;
}
.dh-franja--abierta { height: calc(var(--dh-alto) + 72px); }
.dh-franja--busqueda { height: var(--dh-alto); }

/* Las dos filas quedan centradas en la altura de la barra; el submenú sale debajo de la segunda */
.dh-menu {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding-top: calc((var(--dh-alto) - 62px) / 2);
}
.dh-fila {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 26px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(18px, 2.2vw, 40px);
    white-space: nowrap;
}
.dh-item { position: static; }
.dh-enlace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    padding: 2px 0 4px;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
@media (min-width: 1141px) { .dh-enlace { font-size: 14px; } }
@media (min-width: 1281px) { .dh-enlace { font-size: 15px; } }

/* Al pasar el mouse y en el apartado actual: azul del sitio, con su línea (Dar es Sembrar conserva el dorado) */
.dh-enlace:hover,
.dh-item--abierto > .dh-enlace,
.dh-item--activo > .dh-enlace { color: var(--dh-azul-texto); border-bottom-color: currentColor; }
.dh .dh-enlace--dorado { color: var(--dh-dorado); }
.dh .dh-enlace--dorado:hover { color: var(--dh-dorado-claro); }
.dh-flecha { width: 10px; height: 10px; opacity: .75; transition: transform .2s ease; }
.dh-item--abierto .dh-flecha { transform: rotate(180deg); }

/* Submenú: una línea justo debajo de la fila de su apartado, dentro de la franja.
   Solo se anima la opacidad, para que el encabezado pueda medir su altura en cualquier momento. */
.dh-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    width: var(--dh-sub-ancho, 100%);
    top: calc(100% + 10px);
    display: flex;
    flex-wrap: wrap;
    gap: 6px clamp(18px, 2.2vw, 36px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.dh-item--abierto > .dh-sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .25s ease .05s, transform .3s cubic-bezier(.2, .7, .2, 1) .05s;
}
.dh-sub a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0;
    color: rgba(255, 255, 255, .9);
    border-bottom: 1px solid transparent;
}
@media (min-width: 1281px) { .dh-sub a { font-size: 14px; } }
.dh-sub a:hover { color: var(--dh-azul-texto); border-bottom-color: currentColor; }
.dh-externo { width: 11px; height: 11px; opacity: .8; }

/* Submenú de la página actual (Región Paso del Norte, Industrias o CEC): a la vista y sin franja.
   Se oculta mientras otro apartado tiene su submenú abierto, y en la barra fija al subir. */
.dh-item--fijo > .dh-sub { visibility: visible; opacity: 1; transform: none; }
.dh--sobre-foto:not(.dh--fijo) .dh-item--fijo > .dh-sub a { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.dh--con-abierto .dh-item--fijo:not(.dh-item--abierto) > .dh-sub,
.dh--fijo .dh-item--fijo:not(.dh-item--abierto) > .dh-sub { visibility: hidden; opacity: 0; transition: none; }

/* Menú de sección ("¿Quiénes somos?" y Dar es Sembrar): una sola línea, a la altura del logotipo.
   En pantallas angostas, cada apartado parte su nombre en dos renglones en lugar de saltar de línea. */
.dh--seccion .dh-menu,
.dh--seccion .dh-acciones { justify-content: center; padding-top: 0; }
.dh--seccion .dh-contenedor { gap: clamp(14px, 1.6vw, 48px); }
.dh-fila--seccion { height: auto; white-space: normal; gap: clamp(16px, 1.6vw, 32px); }
.dh-fila--seccion > li { flex: 0 1 auto; }
/* Flecha para ver el menú completo, separada de los apartados por una línea */
.dh-fila--seccion > .dh-volver { flex-shrink: 0; display: flex; align-items: center; padding-right: clamp(10px, 1.1vw, 24px); border-right: 1px solid rgba(255, 255, 255, .3); }
.dh-volver .dh-enlace { gap: 4px; opacity: .85; }
.dh-volver .dh-enlace:hover { opacity: 1; }
.dh-icono-volver { width: 14px; height: 14px; }
.dh-volver-texto { display: none; }
@media (min-width: 1536px) {
    .dh-volver-texto { display: inline; }
}
.dh-fila--dorada .dh-enlace { color: var(--dh-dorado); }
.dh-fila--dorada .dh-enlace:hover { color: var(--dh-dorado-claro); }

/* Acciones de la derecha: buscar, idioma y TIEC */
.dh-acciones {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    align-self: stretch;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    padding-top: calc((var(--dh-alto) - 62px) / 2);
}
@media (min-width: 1024px) {
    .dh-acciones { display: flex; }
}
.dh-acciones-fila { height: 26px; display: flex; align-items: center; gap: 18px; }
.dh-boton-buscar { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 2px; }
.dh-boton-buscar .dh-icono { width: 16px; height: 16px; }
.dh-boton-buscar:hover { color: var(--dh-azul-texto); }
/* En el menú de sección, en pantallas medianas, Buscar queda solo con la lupa para dar aire a los apartados */
@media (max-width: 1279px) {
    .dh--seccion .dh-buscar-texto { display: none; }
}
.dh-tiec {
    display: block;
    min-width: 100px;
    height: 26px;
    padding: 5px 12px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    background: #2e8540;
}
.dh-tiec:hover { background: #276f36; }
.dh-icono { width: 18px; height: 18px; flex-shrink: 0; }

/* Cambio de idioma: interruptor tipo iOS (ES a la izquierda, EN a la derecha) */
.dh-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 0; }
.dh-switch-etq { opacity: .55; transition: opacity .2s ease; }
.dh-switch:not(.dh-switch--en) .dh-switch-etq:first-child,
.dh-switch--en .dh-switch-etq:last-child { opacity: 1; }
.dh-switch-pista {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    transition: background-color .2s ease;
    flex-shrink: 0;
}
.dh-switch-perilla {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}
.dh-switch--en .dh-switch-pista { background: var(--dh-acento); }
.dh-switch--en .dh-switch-perilla { transform: translateX(16px); }
.dh-switch:hover .dh-switch-pista { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

/* Barra de búsqueda que reemplaza al menú (escritorio) */
.dh-busqueda {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}
.dh-busqueda form { flex: 1; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, .6); }
.dh-busqueda input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 16px;
    padding: 10px 0;
    outline: none;
    box-shadow: none;
}
.dh-busqueda input::placeholder { color: rgba(255, 255, 255, .6); }
.dh-busqueda input:focus { outline: none; box-shadow: none; }

/* ---------- Celular y tableta (< 1024px) ---------- */
.dh-movil-botones { margin-left: auto; display: flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) {
    .dh-movil-botones { display: none; }
}
.dh-movil-botones button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.dh-hamburguesa { position: relative; display: block; width: 22px; height: 14px; }
.dh-hamburguesa > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}
.dh-hamburguesa > span:nth-child(1) { top: 0; }
.dh-hamburguesa > span:nth-child(2) { top: 6px; }
.dh-hamburguesa > span:nth-child(3) { top: 12px; }
.dh-hamburguesa-x .dh-hamburguesa > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dh-hamburguesa-x .dh-hamburguesa > span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.dh-hamburguesa-x .dh-hamburguesa > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.dh-movil-botones .dh-icono { width: 24px; height: 24px; }

.dh-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    background: var(--dh-fondo);
    color: #fff;
    padding: 0 clamp(16px, 2.5vw, 40px) 32px;  /* mismo margen que el encabezado: el logo y la X quedan donde estaban */
}
@media (min-width: 1024px) {
    .dh-panel { display: none !important; }
}
.dh-panel-cabeza { height: var(--dh-alto); display: flex; align-items: center; justify-content: space-between; }
.dh-panel-cabeza button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.dh-panel form { display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .55); margin: 8px 0 18px; }
.dh-panel input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 16px;
    padding: 10px 0;
    outline: none;
    box-shadow: none;
}
.dh-panel input::placeholder { color: rgba(255, 255, 255, .6); }
.dh-panel input:focus { outline: none; box-shadow: none; }
.dh-panel form button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

.dh-panel-volver { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; padding: 8px 0; margin: 0 0 12px -4px; opacity: .85; }
.dh-panel-volver .dh-icono { width: 18px; height: 18px; }
.dh-panel-seccion { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.dh-panel-lista { list-style: none; margin: 0; padding: 0; }
.dh-panel-volver { --i: 0; }
.dh-panel-seccion { --i: 1; }
.dh-panel-lista > li,
.dh-panel-volver,
.dh-panel-seccion { animation: dh-subir .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms + 60ms); }
@keyframes dh-subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dh-panel-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dh-panel-fila > a { flex: 1; font-size: 22px; font-weight: 600; line-height: 1.2; padding: 12px 0; }
.dh .dh-panel-fila > a.dh-enlace--dorado { color: var(--dh-dorado); }
.dh-panel-fila > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.dh-panel-fila button { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-right: -8px; }
.dh-panel-fila .dh-icono { width: 26px; height: 26px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.dh-panel-fila button[aria-expanded="true"] .dh-icono { transform: rotate(135deg); }
/* El "+" abre los apartados deslizándolos; cerrados no se pueden enfocar (visibility) */
.dh-panel-desplegable {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
}
.dh-panel-desplegable--abierto {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1);
}
.dh-panel-sub { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid rgba(255, 255, 255, .25); }
.dh-panel-sub > li:last-child { padding-bottom: 10px; }
.dh-panel-sub a { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; padding: 8px 0; color: rgba(255, 255, 255, .88); }
.dh-panel-pie { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dh-panel-pie .dh-switch { font-size: 14px; }

body.dh-sin-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .dh, .dh-franja, .dh-sub, .dh-flecha, .dh-hamburguesa > span, .dh-panel-desplegable, .dh-panel-fila .dh-icono { transition: none !important; }
    .dh-panel-lista > li, .dh-panel-volver, .dh-panel-seccion { animation: none; }
}

/* ---------- Portada (carrusel del inicio) ----------
   Zonas de la pantalla, de arriba hacia abajo:
     0-25%   menú
     25-50%  aire
     50-75%  hora, titular, subtítulo y controles del carrusel
     75-100% los 3 botones
   La portada mide el 100% del alto de la pantalla. Si la pantalla es muy baja y el texto no cabe,
   la zona del texto crece (primero se come el aire y luego alarga la portada) en lugar de encimarse. */
.dh-portada {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background: #0f172a;
}
.dh-portada-contenido {
    position: relative;
    z-index: 20;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 clamp(16px, 2.5vw, 40px);  /* mismo margen que el encabezado: logo, texto y botones alineados */
    display: grid;
    grid-template-rows: minmax(var(--dh-alto), 1fr) minmax(0, 1fr) minmax(25vh, auto) minmax(25vh, auto);
    grid-template-rows: minmax(var(--dh-alto), 1fr) minmax(0, 1fr) minmax(25svh, auto) minmax(25svh, auto);
}
.dh-portada-texto {
    grid-row: 3;
    align-self: end;
    padding-bottom: clamp(16px, 3vh, 32px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .35);  /* se lee también sobre fotos claras */
}

.dh-reloj {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 clamp(10px, 1.8vh, 18px);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.dh-reloj svg { width: 16px; height: 16px; flex-shrink: 0; }
.dh-reloj-dato { display: inline-flex; flex-wrap: wrap; gap: 0 6px; animation: dh-aparecer .5s ease; }
.dh-reloj-fuente { opacity: .7; font-weight: 400; }
@media (max-width: 639px) {
    /* En celular el dato va en su propia línea, alineado con la hora */
    .dh-reloj-dato { flex-basis: 100%; padding-left: 24px; }
    .dh-reloj-dato > [aria-hidden] { display: none; }
}
@keyframes dh-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* Titulares: crecen con el ancho y con el alto de la pantalla, sin pasar de 44 px.
   Ocupan hasta el 75% del ancho antes de saltar de línea (en celular, todo el ancho). */
.dh-portada-titulares { display: grid; }
.dh-portada-titulares > * { grid-area: 1 / 1; }
.dh-portada-titulo {
    margin: 0;
    max-width: 75%;
    font-size: clamp(26px, min(2.6vw, 4.4vh), 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-wrap: pretty;
    color: #fff;
}
@media (max-width: 767px) {
    .dh-portada-titulo { max-width: none; }
}
.dh-portada-subtitulo {
    margin: .7em 0 0;
    max-width: 44em;
    font-size: clamp(15px, min(1.2vw, 2.1vh), 18px);
    line-height: 1.5;
    color: rgba(226, 232, 240, .92);
}

.dh-portada-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(12px, 2.2vh, 24px);
}
.dh-puntos { display: flex; align-items: center; gap: 8px; }
.dh-punto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}
.dh-punto:hover { background: rgba(255, 255, 255, .8); }
.dh-punto--activo, .dh-punto--activo:hover { width: 26px; background: #fff; }
.dh-flechas { display: flex; gap: 8px; }
.dh-flechas button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background-color .2s ease;
}
.dh-flechas button:hover { background: var(--dh-acento); border-color: var(--dh-acento); }
.dh-flechas svg { width: 18px; height: 18px; }
.dh-portada :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.dh-foto-boton {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .6s ease;
}
.dh-foto-boton--activa { opacity: 1; }

/* Los 3 botones: siempre dentro del 25% inferior */
.dh-botones {
    grid-row: 4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    align-self: end;
    list-style: none;
    margin: 0;
    padding: 0 0 clamp(16px, 4vh, 48px);
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .dh-botones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
.dh-boton {
    display: block;
    height: 100%;
    padding: 12px 4px;
    border-top: 1px solid rgba(255, 255, 255, .7);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease;
}
@media (min-width: 768px) {
    .dh-boton { padding: 14px 16px 18px; font-size: 16px; }
}
.dh-boton:hover,
.dh-boton:focus-visible {
    background: var(--dh-acento);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .dh-foto-boton, .dh-boton, .dh-reloj-dato, .dh-punto { transition: none; animation: none; }
}

/* ---------- Portadas de las demás páginas ----------
   Como la del inicio, la foto o el carrusel ocupa todo el alto de la pantalla (Dar es Sembrar,
   Región Paso del Norte, CEC y 40 años). Si la página tiene barra, ocupa lo que queda debajo.
   En pantallas muy bajas (celular acostado) no baja de 480 px para que el texto no se encime. */
.dh-portada-pagina {
    min-height: 100vh;
    min-height: max(480px, 100svh);
}
.dh-pagina:not(.dh-pagina--sobre-foto) .dh-portada-pagina {
    min-height: calc(100vh - var(--dh-alto) - var(--dh-extra, 0px));
    min-height: max(400px, calc(100svh - var(--dh-alto) - var(--dh-extra, 0px)));
}
/* Contenido centrado en el espacio que deja libre el menú */
.dh-portada-centro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--dh-alto) + var(--dh-extra, 0px));
}
/* Páginas que empiezan con contenido sobre la foto (Industrias): el contenido arranca debajo del menú */
.dh-bajo-encabezado { padding-top: calc(var(--dh-alto) + var(--dh-extra, 0px)); padding-bottom: 48px; }
/* Texto al pie de la foto, con aire respecto al borde */
.dh-portada-pie { bottom: clamp(32px, 9vh, 104px); }