/* ============================================================
   Portal de Servicios Climáticos (DMC) — Portada (Alternativa B)
   Estilos de la portada. Sin CSS inline ni interno (requisito).
   Todo el estilo inline de la maqueta migra aquí.
   Principios: color con función (con leyenda y valor numérico),
   sin degradados ni sombras ornamentales, jerarquía real,
   objetivo táctil 44px, foco visible.
   ============================================================ */

/* ---------- Base ---------- */
.dmc-body {
  font-family: var(--font-ui);
  color: var(--tinta);
  background: var(--fondo);
  margin: 0;
}
.dmc-main { padding-bottom: var(--sp-7); }

.container { max-width: 1180px; }

.dmc-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dmc-inst { font-family: var(--font-inst); font-weight: 700; }
.dmc-dato { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tinta); }

/* Foco visible en todo elemento interactivo (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: var(--foco);
  outline-offset: 2px;
}

/* Radios Alternativa B */
.btn, .card { border-radius: var(--radio); }

/* Encabezado de sección Alternativa B */
.dmc-sec {
  border-top: 3px solid var(--dmc-azul);
  padding-top: 10px;
  display: inline-block;
  font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px;
}
.dmc-sec--grande { font-size: 1.9rem; letter-spacing: -.022em; }
.dmc-sec--medio  { font-size: 1.3rem; letter-spacing: -.016em; margin-bottom: 12px; }
.dmc-sec--chico  { border-top-width: 0; padding-top: 0; font-size: 1.05rem; letter-spacing: -.012em; margin-bottom: 8px; }

.dmc-rotulo {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dmc-azul); font-weight: 700; margin: 0;
}
.dmc-eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dmc-azul); margin: 0 0 8px;
}
.dmc-sublinea { font-weight: 600; }

/* Objetivo táctil mínimo (WCAG AA) */
.dmc-navlink, .dmc-btn-sesion, .btn, .dmc-chip, .dmc-chip-plano, .dmc-chip-color,
.dmc-redlista__item, .dmc-explora__link, .dmc-estcard__link, .dmc-recurso,
.dmc-intl__link, .dmc-pub, .dmc-tema-card, .dmc-famchip, .dmc-filtrochip {
  min-height: var(--touch);
}

/* Saltar al contenido */
.skip-link {
  position: absolute; left: var(--sp-2); top: -3rem;
  background: var(--dmc-azul-oscuro); color: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radio-sm); z-index: 1050; transition: top .15s;
}
.skip-link:focus { top: var(--sp-2); }

/* ============ HEADER + NAV ============ */
.dmc-header { border-bottom: 1px solid var(--linea); background: #fff; }
.dmc-nav__row { padding-top: 6px; padding-bottom: 6px; }

.dmc-brand {
  display: inline-flex; align-items: center; gap: 18px; text-decoration: none;
  color: inherit; background: transparent; border: 0; margin-right: 1rem;
}
.dmc-brand__logo { height: 58px; width: 58px; display: block; flex: 0 0 58px; object-fit: contain; }
.dmc-brand__text, .dmc-brand__fallback { display: flex; flex-direction: column; text-align: left; }
.dmc-brand__fallback[hidden] { display: none; }
.dmc-inst { font-size: 1.14rem; color: var(--dmc-azul); line-height: 1.12; }
.dmc-brand__sub { font-size: .76rem; color: var(--tinta-suave); line-height: 1.25; }

.dmc-navlist { gap: .25rem; }
.dmc-navlink {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--tinta); font-weight: 600; text-decoration: none;
  padding: .5rem .75rem; border-bottom: 3px solid transparent;
}
.dmc-navlink:hover { color: var(--dmc-azul); }
.dmc-navlink[aria-current="page"] { color: var(--dmc-azul); border-bottom-color: var(--dmc-azul); }
/* Menú uniforme: todos los ítems con el mismo peso (sin negrita ni punto en Temas). */

.dmc-navsearch { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex: 0 0 auto; }
.dmc-navsearch__input { width: 190px; }

.dmc-navsesion { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.dmc-btn-sesion { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.dmc-ico { display: block; }

/* ============ HERO ============ */
/* Foto de fondo real de Chile (foto-12: cordillera de los Andes sobre un lago
   al atardecer). Se aplica como background decorativo vía CSS, con una capa
   navy translúcida encima para mantener el contraste AA del texto blanco.
   Aquí también puede ir, a futuro, el video translúcido que exploró el
   cliente (mismo tratamiento: capa navy .78 sobre el medio de fondo). */
.dmc-hero {
  position: relative;
  background-color: var(--dmc-azul-oscuro);
  background-image: url("../images/fotos/foto-12.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  border-bottom: 1px solid var(--linea);
}
/* Capa de video rotativo (detrás del overlay). Fallback: la imagen de fondo del hero. */
.dmc-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dmc-hero__clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.8s ease-in-out;
}
.dmc-hero__clip.is-active { opacity: 1; }
/* Overlay navy translúcido: garantiza el contraste del texto blanco (WCAG AA) */
.dmc-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: rgba(7, 61, 110, .78);
  pointer-events: none;
}
/* El contenido del hero se apoya sobre el overlay */
.dmc-hero__inner { position: relative; z-index: 2; padding: 36px 12px 32px; }
.dmc-hero__title {
  font-size: clamp(2.2rem, 4.2vw, 2.95rem); font-weight: 700; letter-spacing: -.025em;
  margin: 0 0 10px; max-width: 22ch; line-height: 1.05; text-wrap: pretty; color: #fff;
}
.dmc-hero__lede {
  color: #dceaf6; max-width: 54ch; font-size: 1.12rem; line-height: 1.5;
  margin: 0 0 22px; text-wrap: pretty;
}

/* Buscador protagónico */
/* Botones dentro del hero (fondo navy): mismo concepto outline pero en blanco,
   para que sean legibles. Transparentes con borde blanco; hover → blanco con texto azul. */
.dmc-hero .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .9);
  --bs-btn-hover-color: var(--dmc-azul);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--dmc-azul);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

.dmc-buscador-wrap { position: relative; max-width: 620px; }
.dmc-buscador__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: #fff; }
.dmc-buscador__input:focus { box-shadow: none; }
.dmc-buscador:focus-within { outline: var(--foco); outline-offset: 2px; border-radius: var(--radio); }

/* Sugerencias (combobox / listbox) */
.dmc-buscador__sugerencias {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  list-style: none; margin: 0; padding: var(--sp-2);
  background: #fff; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  max-height: 340px; overflow: auto;
}
.dmc-sug { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radio-sm); cursor: pointer; }
.dmc-sug[aria-selected="true"], .dmc-sug:hover { background: var(--fondo-alt); }
.dmc-sug__tipo { font-size: .72rem; color: #fff; background: var(--dmc-celeste); padding: 2px var(--sp-2); border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.dmc-sug__label { color: var(--tinta); }
.dmc-sug__label mark { background: #fff2cf; color: inherit; padding: 0; }
.dmc-sug--vacio { color: var(--tinta-suave); padding: var(--sp-3); }

/* Chips de ejemplo */
.dmc-ejemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dmc-ejemplos__rotulo { font-size: .85rem; color: #dceaf6; }
.dmc-chip {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.5);
  --bs-btn-hover-color: var(--dmc-azul-oscuro); --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}

/* Tarjeta "Estado actual de la red" */
.dmc-redcard { border: 1px solid var(--linea); background: #fff; color: var(--tinta); border-radius: var(--radio); overflow: hidden; }
.dmc-redcard__head { position: relative; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.dmc-redcard__titulo { font-size: 1.02rem; font-weight: 700; margin: 0 0 2px; padding-right: 34px; }
.dmc-redcard__sub { font-size: .8rem; color: var(--tinta-dato); margin: 0; }
/* Botón ✕ para ocultar la tarjeta de estado de la red */
.dmc-redcard__cerrar {
  position: absolute; top: 6px; right: 6px;
  width: var(--touch); height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--tinta-suave); cursor: pointer; border-radius: var(--radio-sm);
}
.dmc-redcard__cerrar:hover { background: var(--fondo-alt); color: var(--tinta); }
/* Botón para volver a mostrarla (aparece sobre el video, en la columna del hero) */
.dmc-redcard__mostrar {
  display: inline-flex; align-items: center; min-height: var(--touch);
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px; padding: 0 var(--sp-4); font: inherit; font-weight: 600; cursor: pointer;
}
.dmc-redcard__mostrar:hover { background: rgba(255,255,255,.24); }

.dmc-franja { padding: 16px 18px 8px; }
.dmc-franja__svg { display: block; }
.dmc-franja__pie { font-size: .78rem; color: var(--tinta-dato); margin: 6px 0 0; }

.dmc-redlista { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; padding: 4px 18px 10px; }
.dmc-redlista__item {
  display: grid; grid-template-columns: auto 7rem auto; column-gap: 8px; justify-content: start; align-items: center;
  padding: 7px 0; color: var(--tinta); text-decoration: none;
}
.dmc-redlista__item .dmc-punto { grid-row: 1 / 3; align-self: center; }
.dmc-redlista__item .dmc-sublinea { grid-column: 2; grid-row: 1; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.dmc-redlista__est { grid-column: 2; grid-row: 2; font-size: .74rem; color: var(--tinta-dato); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-redlista__item .dmc-dato { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 1.35rem; font-weight: 700; margin-left: 6px; }
.dmc-redlista__item:hover .dmc-sublinea { text-decoration: underline; }

/* Punto de color por temperatura (coloreado en portada.js según data-temp) */
.dmc-punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 12px; background: var(--dmc-celeste); }
.dmc-punto.tramo-1 { background: var(--temp-1); } .dmc-punto.tramo-2 { background: var(--temp-2); }
.dmc-punto.tramo-3 { background: var(--temp-3); } .dmc-punto.tramo-4 { background: var(--temp-4); }
.dmc-punto.tramo-5 { background: var(--temp-5); } .dmc-punto.tramo-6 { background: var(--temp-6); }

/* Escala de temperatura (leyenda) */
.dmc-escala {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 18px 14px; border-top: 1px solid var(--linea);
}
.dmc-escala__rotulo { font-size: .74rem; color: var(--tinta-dato); }
.dmc-escala__item { display: flex; align-items: center; gap: 4px; }
.dmc-escala__sw { width: 11px; height: 11px; display: inline-block; }
.dmc-escala__item .dmc-mono { font-size: .72rem; color: var(--tinta-dato); }
.sw-1 { background: var(--temp-1); } .sw-2 { background: var(--temp-2); } .sw-3 { background: var(--temp-3); }
.sw-4 { background: var(--temp-4); } .sw-5 { background: var(--temp-5); } .sw-6 { background: var(--temp-6); }

/* ============ Franjas de chips ============ */
.dmc-franja-chips { border-bottom: 1px solid var(--linea); background: #fff; }
.dmc-franja-chips__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px; }
.dmc-chip-plano {
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
  font-size: .86rem; padding: 0 12px; text-decoration: none;
  display: inline-flex; align-items: center;
}
.dmc-chip-plano:hover { border-color: var(--dmc-azul); color: var(--dmc-azul); }

/* Menús desplegables del nav (construidos por nav.js) */
.dmc-navlist .dropdown-menu { font-size: .92rem; border-color: var(--linea); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(11,83,148,.12); padding: 6px; margin-top: 6px; }
.dmc-navlist .dropdown-item { border-radius: 6px; padding: 7px 12px; color: var(--tinta); white-space: normal; }
.dmc-navlist .dropdown-item:hover, .dmc-navlist .dropdown-item:focus { background: var(--fondo-alt); color: var(--dmc-azul); }
.dmc-navlist .dropdown-item:active { background: var(--dmc-azul); color: #fff; }
.dmc-navlink--control { display: inline-flex; align-items: center; }
.dmc-ico-candado { width: 13px; height: 13px; margin-left: 5px; opacity: .75; }
.dmc-chip-color {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
  font-size: .86rem; padding: 0 12px; text-decoration: none;
}
.dmc-chip-color:hover { border-color: var(--dmc-azul); color: var(--dmc-azul); }
.dmc-punto--fijo { width: 9px; height: 9px; flex: 0 0 9px; }
.dmc-vertodos-inline { margin-left: auto; color: var(--dmc-azul); font-weight: 600; }

/* Colores de tema (ejemplo — validar con inventario de temas) */
.dmc-c-1 { --tema-color: #0B5394; } .dmc-c-2  { --tema-color: #b7791f; }
.dmc-c-3 { --tema-color: #2b8cbe; } .dmc-c-4  { --tema-color: #d95f3b; }
.dmc-c-5 { --tema-color: #e0a106; } .dmc-c-6  { --tema-color: #3a7fb5; }
.dmc-c-7 { --tema-color: #4a8c4a; } .dmc-c-8  { --tema-color: #7a5ca8; }
.dmc-c-9 { --tema-color: #c0562e; } .dmc-c-10 { --tema-color: #2f8f8f; }
.dmc-c-11 { --tema-color: #5a6b7a; } .dmc-c-12 { --tema-color: #d08a1e; }
.dmc-c-13 { --tema-color: #2b8cbe; } .dmc-c-14 { --tema-color: #5aa469; }
.dmc-c-15 { --tema-color: #b7791f; } .dmc-c-16 { --tema-color: #7a5ca8; }
.dmc-punto.dmc-c-1 { background: #0B5394; } .dmc-punto.dmc-c-2 { background: #b7791f; }
.dmc-punto.dmc-c-3 { background: #2b8cbe; } .dmc-punto.dmc-c-4 { background: #d95f3b; }
.dmc-punto.dmc-c-5 { background: #e0a106; } .dmc-punto.dmc-c-6 { background: #3a7fb5; }

/* ============ Bloques con contenedor ============ */
.dmc-bloque { padding: 36px 12px 0; }
.dmc-bloque--sinpad { padding-left: 0; padding-right: 0; }
.dmc-bloque__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.dmc-bloque__head--fin { margin-bottom: 8px; }
.dmc-bloque__nota { color: var(--tinta-dato); margin: 0; max-width: 64ch; }
.dmc-bloque__nota--grande { margin: 0 0 20px; max-width: 60ch; font-size: 1.02rem; }
.dmc-bloque__nota--neg { margin: -8px 0 12px; }

/* ============ Explorar los productos ============ */
.dmc-explora { border: 1px solid var(--linea); background: #fff; border-radius: var(--radio); overflow: hidden; }
.dmc-explora__filtros { padding: 16px 18px; }
.dmc-explora__rotulo {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-dato); margin: 18px 0 8px;
}
.dmc-explora__rotulo:first-child { margin-top: 0; }
.dmc-explora__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.dmc-famchip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta); padding: 0 12px;
}
.dmc-famchip span:not(.dmc-famchip__n) { font-size: .86rem; }
.dmc-famchip__n { font-size: .78rem; color: var(--tinta-dato); }
.dmc-famchip:hover, .dmc-famchip[aria-pressed="true"] { border-color: var(--dmc-azul); color: var(--dmc-azul); background: var(--fondo-alt); }

.dmc-filtrochip { border: 1px solid var(--linea); background: #fff; color: var(--tinta); font-size: .86rem; padding: 0 14px; }
.dmc-filtrochip:hover, .dmc-filtrochip[aria-pressed="true"] { border-color: var(--dmc-azul); color: var(--dmc-azul); background: var(--fondo-alt); }

.dmc-explora__result { padding: 16px 18px; background: var(--fondo-alt); border-left: 1px solid var(--linea); }
.dmc-explora__contador { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.dmc-explora__cuenta { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.dmc-explora__n { font-size: 2rem; line-height: 1; }
.dmc-explora__texto { color: var(--tinta-dato); }
.dmc-explora__lista { margin: 12px 0 0; }
.dmc-explora__li { border-top: 1px solid var(--linea); }
.dmc-explora__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 2px; color: var(--tinta); text-decoration: none;
}
.dmc-explora__link:hover .dmc-explora__nombre { text-decoration: underline; }
.dmc-explora__nombre { display: block; font-weight: 600; font-size: .94rem; line-height: 1.25; }
.dmc-explora__tec { display: block; font-size: .78rem; color: var(--tinta-dato); line-height: 1.25; }
.dmc-explora__flecha { color: var(--dmc-azul); font-weight: 600; flex: 0 0 auto; }
.dmc-explora__cta { margin-top: 14px; }

/* ============ Carrusel de destacados ============ */
.dmc-carrusel { border: 1px solid var(--linea); background: #fff; border-radius: var(--radio); overflow: hidden; }
.dmc-carrusel__foto { display: block; width: 100%; height: 100%; min-height: 230px; max-height: 330px; object-fit: cover; background: var(--fondo-alt); }
.dmc-carrusel__texto { display: flex; flex-direction: column; padding: 24px 26px 22px; }
.dmc-carrusel__titulo { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; max-width: 30ch; line-height: 1.18; text-wrap: pretty; }
.dmc-carrusel__cuerpo { color: var(--tinta-dato); margin: 0 0 14px; max-width: 48ch; text-wrap: pretty; }
.dmc-carrusel__pie { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: auto; }
.dmc-spark { flex: 1 1 120px; min-width: 110px; }
.dmc-spark__svg { display: block; }
.dmc-spark__pie { display: block; font-size: .74rem; color: var(--tinta-dato); margin-top: 4px; line-height: 1.3; }
.dmc-carrusel__controles { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; border-top: 1px solid var(--linea); padding: 8px 14px; background: var(--fondo-alt); }
.dmc-carrusel__nav { display: flex; gap: 6px; }

/* ============ Consultas frecuentes ============ */
.dmc-tarjeta-frec {
  background: #fff; border: 1px solid var(--linea);
  text-decoration: none; color: var(--tinta);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dmc-tarjeta-frec:hover { border-color: var(--c, var(--dmc-azul)); box-shadow: 0 6px 18px rgba(11,83,148,.10); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .dmc-tarjeta-frec { transition: none; } .dmc-tarjeta-frec:hover { transform: none; } }
.dmc-tarjeta-frec .card-body { gap: 8px; }
.dmc-tarjeta-frec__titulo { font-weight: 700; font-size: 1.12rem; margin: 0; line-height: 1.24; text-wrap: pretty; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dmc-tarjeta-frec__tec { font-size: .85rem; color: var(--tinta-dato); margin: 0; }
.dmc-tarjeta-frec__toques { font-size: .74rem; color: var(--tinta-dato); margin: 0; }
.dmc-tarjeta-frec__abrir { color: var(--c, var(--dmc-azul)); font-weight: 600; font-size: 1.05rem; flex: none; }
/* color propio por tarjeta (se manifiesta en hover y en "Abrir →") */
.dmc-frec-1 { --c: var(--temp-5); } .dmc-frec-2 { --c: var(--dmc-celeste); }
.dmc-frec-3 { --c: #b7791f; } .dmc-frec-4 { --c: #3d8a8a; }

/* ============ Estaciones (fondo gris) ============ */
.dmc-estaciones { background: var(--fondo-alt); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin-top: 44px; }
.dmc-estaciones .dmc-bloque { padding: 34px 12px; }

.dmc-mapacard, .dmc-estcard { border: 1px solid var(--linea); background: #fff; padding: 16px 18px; border-radius: var(--radio); display: flex; flex-direction: column; }
.dmc-mapacard__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.dmc-mapacard__titulo { font-size: 1rem; font-weight: 700; margin: 0; }
.dmc-mapacard__conteo { font-size: .74rem; color: var(--tinta-dato); }
.dmc-mapacard__svgwrap { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; }
.dmc-mapacard__svg { display: block; border: 1px solid var(--linea); background: var(--fondo-alt); }
.dmc-mapacard__chile { display: block; width: auto; max-width: 100%; max-height: 460px; height: auto; }
.dmc-mapacard__ctrls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

.dmc-estcard__label { font-weight: 600; font-size: .9rem; }
.dmc-estcard__rotulo {
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dmc-azul); margin: 18px 0 0;
}
.dmc-estcard__lista { margin: 6px 0 0; flex: 1 1 auto; }
.dmc-estcard__li { border-top: 1px solid var(--linea); }
.dmc-estcard__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; color: var(--tinta); text-decoration: none; }
.dmc-estcard__ident { display: flex; align-items: center; gap: 8px; }
.dmc-estcard__nombre { display: block; font-size: .92rem; line-height: 1.2; }
.dmc-estcard__region { display: block; font-size: .74rem; color: var(--tinta-dato); line-height: 1.2; }
.dmc-estcard__link:hover .dmc-estcard__nombre { text-decoration: underline; }
.dmc-estcard__link .dmc-dato { font-size: 1.25rem; white-space: nowrap; }
.dmc-estcard__pie { font-size: .76rem; color: var(--tinta-dato); margin: 10px 0 0; }

/* ============ Temas ============ */
.dmc-tema-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--linea);
  background: #fff; color: var(--tinta); font-weight: 600; font-size: .92rem; line-height: 1.25;
  text-decoration: none; text-wrap: pretty; border-radius: var(--radio);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dmc-tema-card:hover { border-color: var(--tema-color, var(--dmc-azul)); box-shadow: 0 6px 18px rgba(11,83,148,.10); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .dmc-tema-card { transition: none; } .dmc-tema-card:hover { transform: none; } }
/* Foto superior de la tarjeta de tema: recorte uniforme, alto fijo como la maqueta */
.dmc-tema-card__foto {
  display: block; width: 100%; height: 92px; object-fit: cover;
  background: var(--fondo-alt);
}
.dmc-tema-card__txt { display: block; padding: 10px 12px 4px; }
.dmc-tema-card__desc { display: block; padding: 0 12px 12px; font-size: .8rem; font-weight: 400; color: var(--tinta-suave); line-height: 1.35; }

/* ============ Datos y recursos ============ */
.dmc-recurso {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: 100%;
  border: 1px solid var(--linea); background: #fff; padding: 11px 13px;
  text-decoration: none; color: var(--tinta); border-radius: var(--radio);
}
.dmc-recurso:hover { background: var(--fondo-alt); border-color: var(--dmc-azul); }
.dmc-recurso__nom { font-weight: 600; font-size: .94rem; line-height: 1.2; }
.dmc-recurso__det { font-size: .78rem; color: var(--tinta-dato); line-height: 1.3; }

/* ============ Referencias internacionales ============ */
.dmc-intl { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dmc-intl__link { font-size: .88rem; color: var(--dmc-azul); }

/* ============ Publicaciones ============ */
.dmc-pub { display: block; border-top: 1px solid var(--linea); padding: 11px 2px; color: var(--tinta); text-decoration: none; }
.dmc-pub:hover .dmc-pub__titulo { text-decoration: underline; }
.dmc-pub__titulo { display: block; font-weight: 600; }
.dmc-pub__meta { display: block; font-size: .82rem; color: var(--tinta-dato); }

/* ============ Pie ============ */
.dmc-footer { background: var(--dmc-azul-oscuro); color: #dbe7f3; padding-block: var(--sp-6); margin-top: var(--sp-7); }
.dmc-footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); align-items: start; }
.dmc-footer__inst { font-size: 1.15rem; color: #fff; margin: 0 0 var(--sp-1); }
.dmc-footer__sub { margin: 0; color: #a9cbe8; }
.dmc-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.dmc-footer__links a { color: #dbe7f3; text-decoration: none; }
.dmc-footer__links a:hover { color: #fff; text-decoration: underline; }
.dmc-footer__legal { color: #a9cbe8; font-size: .85rem; margin: 0; }

/* ============ Responsivo ============ */
@media (max-width: 992px) {
  .dmc-navsearch__input { width: 150px; }
}
@media (max-width: 991.98px) {
  .dmc-navlist { padding-block: var(--sp-2); }
  .dmc-navsearch { margin: var(--sp-2) 0; }
  .dmc-navsesion { margin-left: 0; }
}
@media (max-width: 768px) {
  .dmc-footer__grid { grid-template-columns: 1fr; }
  .dmc-redlista { grid-template-columns: 1fr; }
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .carousel-item { transition: none !important; }
  /* Sin parallax: la foto de fondo del hero se desplaza con la página */
  .dmc-hero { background-attachment: scroll; }
  /* Sin movimiento: se oculta el video y queda la imagen de fondo del hero */
  .dmc-hero__media { display: none; }
}

/* ============ Impresión (hoja de estilo pedida en Bases) ============ */
@media print {
  .dmc-noprint, .dmc-hero__media,
  .dmc-navsearch, .dmc-navsesion, .dmc-toggler,
  .dmc-buscador__sugerencias, .dmc-carrusel__controles,
  .dmc-mapacard__ctrls, .dmc-ejemplos { display: none !important; }
  .dmc-body { color: #000; }
  .dmc-hero, .dmc-header, .dmc-footer { background: #fff !important; color: #000 !important; }
  .dmc-hero__title, .dmc-hero__lede, .dmc-buscador__label,
  .dmc-footer__inst, .dmc-footer__sub, .dmc-footer__legal, .dmc-footer__links a { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .dmc-explora, .dmc-redcard, .dmc-carrusel, .dmc-mapacard, .dmc-estcard { border-color: #999 !important; }
}