/* ---------------------------------------------------------------------
   Ficha de fonda — material visual: prensa con foto, video, publicaciones.

   Criterio de diseño, porque la crítica fue "se ve todo muy cuadrado":
   el bloque de contenido deja de ser una caja con borde y pasa a ser
   material que se lee. Se apoya en tres gestos y nada más:

     1. La foto manda. Ocupa el lado izquierdo de la tarjeta de prensa y
        el 100% de la de video; el borde desaparece y lo que sostiene la
        tarjeta es la sombra, no una línea.
     2. Movimiento lateral en vez de rejillas. Las tiras se deslizan con
        el dedo y tienen los bordes difuminados, así se ve que hay más
        contenido sin necesidad de un botón que lo diga.
     3. El coral aparece SOLO al pasar el mouse y en el botón de play.
        Es el color de la marca y pierde fuerza si está en todas partes.

   Todo usa las variables de styles.css: no se introduce ni un color
   nuevo. Y nada de acá toca el marcado que sostiene el SEO.
   --------------------------------------------------------------------- */

/* ============================================================ tira lateral
   Contenedor deslizable con anclaje. El difuminado de los costados es
   una máscara, no un degradado encima: así funciona sobre cualquier
   fondo y no tapa el contenido al hacer foco con el teclado.            */
.mv-tira {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mv-tira::-webkit-scrollbar { display: none; }

@media (min-width: 720px) {
  .mv-tira {
    margin-inline: 0;
    padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
  }
  /* Al llegar al final se quita la máscara, si no el último elemento
     queda difuminado para siempre y parece un error. */
  .mv-tira.es-final {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.mv-tira > ul,
.mv-tira > div {
  display: flex;
  gap: .9rem;
  list-style: none;
  margin: 0;
  padding: .25rem 0 .5rem;
}
.mv-tira > ul > *,
.mv-tira > div > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ================================================================ prensa
   Tarjeta editorial: foto a la izquierda, texto a la derecha. Sin borde
   dibujado — la separa del fondo una sombra muy baja.                   */
.mv-prensa-grid {
  display: grid;
  gap: .7rem;
  margin-top: .9rem;
}
@media (min-width: 900px) {
  .mv-prensa-grid { grid-template-columns: repeat(2, 1fr); }
  /* La primera nota va a lo ancho: casi siempre es la mejor foto y así
     la sección abre con una imagen grande en vez de dos medianas. */
  .mv-prensa-grid > .mv-prensa:first-child { grid-column: 1 / -1; }
  .mv-prensa-grid > .mv-prensa:first-child .mv-prensa-foto { flex-basis: 42%; }
  .mv-prensa-grid > .mv-prensa:first-child .mv-prensa-titulo { font-size: var(--t-lg); }
}

.mv-prensa {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--papel);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 36, 90, .06), 0 6px 18px -12px rgba(20, 36, 90, .3);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.mv-prensa:hover,
.mv-prensa:focus-visible {
  box-shadow: 0 2px 4px rgba(20, 36, 90, .08), 0 16px 34px -16px rgba(20, 36, 90, .42);
  transform: translateY(-2px);
}

.mv-prensa-foto {
  flex: 0 0 34%;
  position: relative;
  overflow: hidden;
  background: var(--cal-2);
  min-height: 100%;
}
.mv-prensa-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.mv-prensa:hover .mv-prensa-foto img { transform: scale(1.045); }
.mv-prensa.es-sin-foto .mv-prensa-foto { display: none; }

.mv-prensa-txt {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1rem 1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.mv-prensa-medio {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--dato);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rojo-osc);
}
.mv-prensa-fecha {
  color: var(--texto-3);
  padding-left: .45rem;
  border-left: 1px solid var(--borde);
  text-transform: none;
  letter-spacing: 0;
}
.mv-prensa-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.25;
  color: var(--texto);
  text-wrap: balance;
  /* dos líneas como máximo: si no, una tarjeta con titular largo
     desalinea toda la fila */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mv-prensa:hover .mv-prensa-titulo { color: var(--rojo-osc); }
.mv-prensa-bajada {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--texto-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mv-prensa-ir {
  margin-top: auto;
  padding-top: .4rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-3);
}
.mv-prensa:hover .mv-prensa-ir { color: var(--rojo); }
.mv-prensa-ir span { display: inline-block; transition: transform .25s var(--ease); }
.mv-prensa:hover .mv-prensa-ir span { transform: translateX(3px); }

@media (max-width: 560px) {
  .mv-prensa { flex-direction: column; }
  .mv-prensa-foto { flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 9; }
  .mv-prensa-grid > .mv-prensa:first-child .mv-prensa-foto { flex-basis: auto; }
}

/* ================================================================= video
   Fachada: miniatura + botón. El reproductor se inyecta al hacer clic,
   así la página no arrastra un megabyte de YouTube por cada video.      */
.mv-videos { margin: 0; }
.mv-video { width: min(19rem, 78vw); }

.mv-video-boton {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--tinta);
  cursor: pointer;
  box-shadow: 0 6px 18px -12px rgba(20, 36, 90, .45);
}
.mv-video-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* la miniatura de YouTube trae franjas negras arriba y abajo: se
     amplía un poco para recortarlas */
  transform: scale(1.34);
  transition: transform .5s var(--ease), filter .3s var(--ease);
}
.mv-video-boton:hover .mv-video-foto,
.mv-video-boton:focus-visible .mv-video-foto { transform: scale(1.4); }

.mv-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
.mv-video-play svg {
  background: var(--rojo);
  border-radius: 50%;
  padding: .85rem .8rem .85rem .95rem;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease), background .2s var(--ease);
}
.mv-video-boton:hover .mv-video-play svg,
.mv-video-boton:focus-visible .mv-video-play svg {
  transform: scale(1.09);
  background: var(--rojo-osc);
}

/* cuando ya se pulsó, el iframe reemplaza al botón */
.mv-video-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.mv-video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mv-video-tit {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto);
  margin: .55rem 0 .1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mv-video-pie { font-size: var(--t-xs); color: var(--texto-3); margin: 0; }
.mv-video-pie a { color: var(--texto-3); text-decoration: underline; text-underline-offset: 2px; }
.mv-video-pie a:hover { color: var(--rojo); }

.mv-canal { margin-top: .9rem; }
.mv-canal a { color: var(--rojo-osc); font-weight: 600; text-decoration: none; }
.mv-canal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================= publicaciones IG
   Tres destacadas arriba en cuadrado, el resto en tira.                  */
.mv-posts-dest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  margin: .9rem 0 .7rem;
}
@media (max-width: 620px) { .mv-posts-dest { grid-template-columns: repeat(3, 1fr); gap: .45rem; } }

.mv-posts { margin: 0; }
.mv-posts .mv-post { width: min(11rem, 40vw); }

.mv-post {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--cal-2);
  aspect-ratio: 1 / 1;
  text-decoration: none;
  color: var(--texto-inv);
  box-shadow: 0 6px 18px -14px rgba(20, 36, 90, .5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mv-post:hover,
.mv-post:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(20, 36, 90, .55);
}
.mv-post-foto { position: absolute; inset: 0; }
.mv-post-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s var(--ease);
}
.mv-post:hover .mv-post-foto img { transform: scale(1.06); }

/* velo inferior para que el texto se lea sobre cualquier foto */
.mv-post::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(20, 36, 90, .82));
  pointer-events: none;
}
.mv-post-pie,
.mv-post-txt { position: relative; z-index: 1; }
.mv-post-pie {
  position: absolute;
  top: .55rem; left: .55rem; right: .55rem;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--dato); font-size: .62rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.mv-post-red { display: inline-flex; }
.mv-post-txt {
  position: absolute;
  left: .65rem; right: .65rem; bottom: .6rem;
  font-size: var(--t-xs);
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mv-post.es-destacada .mv-post-txt { -webkit-line-clamp: 4; }

/* Sin foto la tarjeta no puede ser blanca sobre blanco: se vuelve una
   nota de color con el texto en tinta. */
.mv-post.es-sin-foto { background: var(--cal-2); color: var(--texto); }
.mv-post.es-sin-foto::after { display: none; }
.mv-post.es-sin-foto .mv-post-foto { display: none; }
.mv-post.es-sin-foto .mv-post-pie { color: var(--texto-3); text-shadow: none; }
.mv-post.es-sin-foto .mv-post-txt { color: var(--texto); position: static; padding: 2rem .8rem .8rem; }

/* ============================================================ movimiento */
@media (prefers-reduced-motion: reduce) {
  .mv-prensa, .mv-prensa-foto img, .mv-video-foto, .mv-video-play svg,
  .mv-post, .mv-post-foto img, .mv-prensa-ir span {
    transition: none !important;
  }
  .mv-prensa:hover, .mv-post:hover { transform: none; }
  .mv-tira { scroll-behavior: auto; }
}

/* ================================================================ teclado */
.mv-prensa:focus-visible,
.mv-post:focus-visible,
.mv-video-boton:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

/* ============================================================== galeria
   Fotos del recinto, de Wikimedia Commons. El credito NO es opcional: la
   licencia CC obliga a nombrar al autor, asi que el pie es parte de la
   pieza y no un adorno que se pueda esconder al pasar el mouse.

   Rejilla de 2x2 en escritorio y 2 columnas en movil. La primera foto va
   al doble de ancho porque casi siempre es la vista general del lugar. */
.mv-galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
  margin-top: .9rem;
}
@media (min-width: 760px) {
  .mv-galeria { grid-template-columns: repeat(4, 1fr); }
  .mv-galeria .mv-foto:first-child { grid-column: span 2; grid-row: span 2; }
}

.mv-foto {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--cal-2);
  position: relative;
  box-shadow: 0 1px 2px rgba(20,36,90,.06), 0 6px 18px -14px rgba(20,36,90,.45);
}
.mv-foto a { display: block; height: 100%; }
.mv-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
  transition: transform .55s var(--ease);
}
.mv-galeria .mv-foto:first-child img { aspect-ratio: 1 / 1; }
.mv-foto:hover img { transform: scale(1.05); }

.mv-foto-pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .55rem .45rem;
  font-size: .62rem;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(20,36,90,.86));
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv-foto a:focus-visible { outline: 3px solid var(--rojo); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .mv-foto img, .qhc-boton, .qhc-boton span { transition: none !important; }
  .mv-foto:hover img, .qhc-boton:hover { transform: none; }
}

/* ================================================= control de desborde
   Un elemento de rejilla o de flex trae de fabrica min-width:auto, o sea
   "nunca me encojas por debajo de mi contenido". Con imagenes que
   declaran width="960" eso significa que cada columna exige 960 px y la
   ficha entera se ensancha: medido, el cuerpo pasaba de 862 px a 1896 px
   en una ventana de 1265 y aparecia barra horizontal en toda la pagina.

   La correccion son dos reglas: minmax(0, 1fr) en vez de 1fr, para que la
   columna pueda ser mas angosta que su contenido, y min-width:0 en los
   contenedores que arrastran el problema hacia arriba.                 */
.ficha-cuerpo-principal { min-width: 0; }

.mv-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) {
  .mv-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mv-foto { min-width: 0; }

.mv-prensa-grid { min-width: 0; }
@media (min-width: 900px) {
  .mv-prensa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mv-prensa, .mv-prensa-txt { min-width: 0; }

.mv-tira { min-width: 0; max-width: 100%; }
.mv-posts-dest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qhc { min-width: 0; }

/* ================================================ comida, bebida, musica
   Tres tarjetas en vez de tres filas de pastillas grises. Cada grupo
   toma un color del sistema y sus iconos heredan ese color con
   currentColor, asi la seccion se recorre de un vistazo.

   Los colores NO son decorativos: comida va en trigo (el mimbre de la
   ramada), bebida en coral (el acento de la marca) y musica en tinta.
   Tres familias distintas, tres pesos visuales distintos.              */
.cm-grid {
  display: grid;
  gap: .7rem;
  margin-top: .9rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.cm-grupo {
  min-width: 0;
  padding: .9rem 1rem 1rem;
  border-radius: var(--r);
  background: var(--papel);
  border: 1px solid var(--borde-2);
  border-top: 3px solid var(--cm-color, var(--borde));
}
.cm-comida      { --cm-color: var(--trigo);  background: linear-gradient(180deg, var(--trigo-suave) 0%, var(--papel) 46%); }
.cm-bebestibles { --cm-color: var(--rojo);   background: linear-gradient(180deg, var(--rojo-suave)  0%, var(--papel) 46%); }
.cm-musica      { --cm-color: var(--tinta);  background: linear-gradient(180deg, var(--azul-suave)  0%, var(--papel) 46%); }

.cm-titulo {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--texto);
}
.cm-n {
  font-family: var(--dato);
  font-size: .66rem;
  font-weight: 500;
  color: var(--texto-3);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--borde-2);
  border-radius: 999px;
  padding: .05rem .4rem;
  font-variant-numeric: tabular-nums;
}

.cm-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.cm-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--texto-2);
  min-width: 0;
}
.cm-item > span { min-width: 0; }
/* El icono toma el color del grupo; el texto se queda en gris de lectura.
   Al reves (icono gris, texto de color) el color se comeria la palabra,
   que es lo que hay que leer. */
.cm-i { flex-shrink: 0; color: var(--cm-color); }

@media (prefers-reduced-motion: reduce) {
  .qhc-boton, .qhc-boton span, .qhc-etq { transition: none !important; }
  .qhc-boton:hover { transform: none; }
}

/* ====================================== credito de la foto de portada
   La licencia CC obliga a nombrar al autor, asi que esta linea no se
   puede esconder. Va abajo a la derecha de la portada, en un tamano que
   no compite con el titulo pero que se lee si uno la busca.           */
.ficha-hero-credito {
  position: absolute;
  right: clamp(.8rem, 3vw, 1.6rem);
  bottom: .5rem;
  z-index: 2;
  margin: 0;
  font-size: .62rem;
  line-height: 1.2;
  max-width: 60%;
  text-align: right;
  pointer-events: auto;
}
.ficha-hero-credito a {
  color: rgba(247, 243, 234, .5);
  text-decoration: none;
}
.ficha-hero-credito a:hover,
.ficha-hero-credito a:focus-visible { color: rgba(247, 243, 234, .9); text-decoration: underline; }

/* La portada ya es position:relative en styles.css; si algun dia deja de
   serlo, el credito se iria al cuerpo de la pagina. Se fija aca por si
   acaso, que cuesta una linea. */
.ficha-hero { position: relative; }

/* La foto de Commons se pide a su tamano y puede tener cualquier forma:
   se recorta al centro para que el encuadre no dependa del archivo. */
.ficha-hero-foto { background-size: cover; background-position: center; }

@media (max-width: 560px) {
  .ficha-hero-credito { font-size: .58rem; max-width: 78%; }
}

/* ================================================ índice de la ficha
   La ficha paso de 900 a 1.600 palabras. Sin un indice, quien entra
   buscando el precio tiene que barrer toda la pagina con el pulgar.

   Decisiones:
   - En escritorio se queda pegado al hacer scroll, dentro de su columna.
     En celular NO: ahi un elemento fijo se come la pantalla, que es
     justo lo que sobra. En celular es una tira que se desliza.
   - Son anclas normales, sin JavaScript: se pueden copiar, compartir y
     Google las lee como estructura de la pagina.                       */
.idx {
  margin: 0 0 1.4rem;
  padding: .85rem 1rem .9rem;
  border-radius: var(--r);
  background: var(--cal-2);
  border: 1px solid var(--borde-2);
  min-width: 0;
}
.idx-t {
  margin: 0 0 .55rem;
  font-family: var(--dato);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.idx-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .45rem;
}
.idx-l a {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--papel);
  border: 1px solid var(--borde);
  font-size: var(--t-xs);
  color: var(--texto-2);
  text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.idx-l a:hover { border-color: var(--rojo); color: var(--rojo); }
.idx-l a:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }

/* En celular se convierte en tira deslizable: ocupa una linea en vez de
   cinco, y se recorre con el dedo igual que el resto del sitio. */
@media (max-width: 620px) {
  .idx {
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
    border-left: 0; border-right: 0;
    padding-inline: var(--gutter);
  }
  .idx-l {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .2rem;
  }
  .idx-l::-webkit-scrollbar { display: none; }
  .idx-l li { flex: 0 0 auto; }
}

/* El ancla no puede quedar tapada por la barra superior pegada. */
.bloque-ficha[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

@media (prefers-reduced-motion: reduce) { .idx-l a { transition: none; } }

/* ========================================================= quehacerchile
   Cierre de la ficha: el pase al otro sitio de la casa.

   Por qué CLARO y no oscuro, que es como estaba:
   el logo de QuéHacer Chile es azul marino y rojo sobre transparente —
   casi los mismos colores de FondasChile. Sobre fondo oscuro habría que
   usar su versión de noche, que es más pálida y se lee peor. Sobre papel
   el logo se ve como es, que es de lo que se trata cuando el objetivo es
   que la marca se reconozca.

   El riesgo de un bloque claro es que se lea como anuncio. Se evita con
   tres cosas que un anuncio no tiene: el hilo tricolor de la casa arriba,
   la etiqueta "También nuestro", y cifras reales por categoría.        */
.qhc {
  margin: 2.4rem 0 .5rem;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--borde);
  box-shadow: 0 2px 4px rgba(20, 36, 90, .05), 0 18px 40px -24px rgba(20, 36, 90, .35);
  min-width: 0;
  position: relative;
}
/* hilo tricolor: el mismo gesto de guirnalda que usa todo el sitio */
.qhc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tinta) 0%, var(--tinta) 33%, #fff 33%, #fff 66%, var(--rojo) 66%);
}

.qhc-cab {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding: 1.5rem clamp(1.1rem, 4vw, 2rem) 0;
}
/* El logo manda: es lo primero que se ve y lo que hace reconocible la
   marca. Se declara alto fijo y ancho automático para que no se deforme. */
.qhc-logo {
  height: 46px;
  width: auto;
  max-width: 60%;
  display: block;
}
.qhc-marca {
  margin: 0;
  font-family: var(--dato);
  font-size: .64rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--texto-3);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .25rem .7rem;
  white-space: nowrap;
}

.qhc-t {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-xl);
  line-height: 1.12;
  margin: .9rem 0 .55rem;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  color: var(--tinta);
  text-wrap: balance;
}
.qhc-p {
  margin: 0 0 1.1rem;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  max-width: 60ch;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--texto-2);
}
.qhc-p strong { color: var(--rojo-osc); font-weight: 800; }

.qhc-sub {
  margin: 0 0 .55rem;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  font-family: var(--dato);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Las categorías con su número son el corazón del bloque: convierten
   "hay panoramas", que no dice nada, en ocho puertas con volumen. */
.qhc-etqs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  margin-bottom: 1.3rem;
}
.qhc-etq {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .5rem .4rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--cal);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-2);
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.qhc-etq:hover, .qhc-etq:focus-visible {
  border-color: var(--tinta);
  background: var(--papel);
  color: var(--tinta);
}
.qhc-n {
  font-family: var(--dato);
  font-size: .66rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--texto-inv);
  background: var(--tinta);
  border-radius: 999px;
  padding: .1rem .42rem;
}
.qhc-etq:hover .qhc-n { background: var(--rojo); }

/* La acción va sobre una franja tinta al pie: separa el "mira lo que hay"
   del "anda para allá", y le da al bloque un cierre con peso. */
.qhc-accion {
  margin: 0;
  padding: 1.05rem clamp(1.1rem, 4vw, 2rem);
  background: var(--tinta);
}
.qhc-boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.4rem;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.qhc-boton span { transition: transform .2s var(--ease); }
.qhc-boton:hover { background: var(--rojo-osc); transform: translateY(-1px); }
.qhc-boton:hover span { transform: translateX(3px); }
.qhc-boton:focus-visible, .qhc-etq:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

@media (max-width: 520px) {
  .qhc-logo { height: 38px; max-width: 72%; }
  .qhc-t { font-size: var(--t-lg); }
  .qhc-p { font-size: var(--t-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .qhc-boton, .qhc-boton span, .qhc-etq { transition: none !important; }
  .qhc-boton:hover { transform: none; }
}