/* ============================================================
   ENSO MEDIA — Sub-páginas de servicio
   Una sola hoja para las siete. El motor viene de horizontal.css;
   la píldora y los tokens compartidos, de nosotros.css.

   Las siete páginas tienen la misma estructura a propósito: lo que
   cambia es el contenido, no la forma. Un visitante que ya vio
   Eventos sabe dónde está todo en Stands.
   ============================================================ */

/* ============================================================
   1 · Miga de pan
   La portada a pantalla completa salió de las siete sub-páginas: el
   cliente la llamó "espacio desperdiciado". La miga se mudó al primer
   panel de contenido, que es el que ahora abre la página.
   ============================================================ */

/* Miga de pan: dice dónde estás sin robarle peso al titular */
.miga {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* El enlace medía 75x17 px con el pulgar encima: por debajo del mínimo de
   24x24 de WCAG 2.5.8. El relleno vertical no mueve la línea porque la
   miga es flex con align-items: center. */
.miga a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 5px;
  /* Estos tres colores estaban escritos en blanco fijo, de cuando la miga
     iba sobre la portada a pantalla completa. Ahora vive en un panel que
     sigue el tema: en claro el enlace quedaba blanco sobre papel, es decir
     invisible. Van por token. */
  color: var(--tinta-tenue);
  transition: color 0.3s var(--ease);
}
.miga a:hover { color: var(--marca-tinta); }
.miga span { color: var(--marca-tinta); }
.miga i { font-style: normal; color: var(--tinta); opacity: 0.35; }

/* ============================================================
   2 · Por qué elegirnos
   ------------------------------------------------------------
   Fusión de "qué incluye" y "por qué elegirnos", con las tres
   razones dentro del texto y sólo el listado de experiencias a la
   derecha. Es literalmente lo que pidió el cliente.
   ============================================================ */

.alcance { gap: var(--flow-lg); align-items: center; }

/* La botonera del panel que abre la página, heredada de la portada */
/* Los dos botones, del mismo tamaño: es lo que pide el documento seis
   veces. En rejilla de una columna cada uno mide la columna; la flecha
   se va al extremo con `space-between` para que el texto empiece
   siempre en el mismo sitio. */
.sd-acciones {
  margin-top: var(--space-xs);
  display: grid;
  gap: var(--space-sm);
  justify-items: stretch;
  width: 100%;
}

.sd-acciones .btn { width: 100%; justify-content: space-between; }

/* El titular de una página de servicio es lo único que la separa de las
   otras seis: sube por encima de la escala de <h2>, que es lo que
   compartía con cualquier otro panel del sitio.

   El valor va escrito, no en `var(--fs-h1)`: ese token vive en base.css
   y estas páginas no la cargan —montan sobre horizontal.css—, así que
   la variable no resolvía y el navegador dejaba el titular en 16 px. */
.display--titular,
.panel :is(h1, h2).display--titular { font-size: clamp(2.1rem, 4vw, 4.2rem); }

/* --- La tarjeta que promociona el foro ---------------------------
   Va en la galería de casos de Streaming, pero no es un caso: lleva
   borde de marca para que se lea como lo que es, un enlace a otra
   sección. */
.proy-serv--promo { border: 1px solid var(--marca-tinta); }
.proy-serv--promo .link-flecha {
  margin-top: var(--space-2xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca);
}

/* --- La fotografía de «por qué elegirnos» ------------------------
   Vuelve. El documento le cuelga un enlace de Dropbox en cuatro de las
   siete páginas, así que da por hecho que está; y sin ella el panel era
   una columna de texto, una lista y medio panel vacío. */
.alcance__foto {
  flex: none;
  width: min(34vw, 560px);
  height: min(var(--util), 520px);
  border-radius: var(--radio);
  overflow: hidden;
}

.alcance__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(var(--foto-brillo) * 0.9)) saturate(0.96);
}

/* --- La ventana del reel -----------------------------------------
   Audiovisual deja de enseñar tres casos y enseña uno solo: el reel.
   Como es una pieza y no una fila, ocupa el ancho que ocupaban las
   tres juntas menos el aire. */
.reel {
  position: relative;
  flex: none;
  width: min(52vw, 780px);
  height: min(var(--util), 430px);
  border-radius: var(--radio);
  overflow: hidden;
  isolation: isolate;
}

.reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(var(--foto-brillo) * 0.72)) saturate(0.92);
}

.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 36%,
                              rgba(0, 0, 0, 0.26) 64%, rgba(0, 0, 0, 0.14) 100%);
}

.reel__pie {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: var(--space-lg);
  color: var(--blanco);
}

.reel__pie h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.reel__pie p { font-size: 0.95rem; max-width: 46ch; color: rgba(255, 255, 255, 0.78); }

/* --- La sección del foro -----------------------------------------
   Dos columnas: el texto y la fotografía. La misma anatomía que el
   resto de paneles de estas páginas, para que no parezca traída de
   otro sitio. */
.foro { gap: var(--flow-lg); align-items: center; }

.foro__intro {
  flex: none;
  width: min(34ch, 26vw);
  display: grid;
  gap: var(--space-sm);
  align-content: center;
  justify-items: start;
}

.foro__foto {
  flex: none;
  width: min(44vw, 660px);
  height: min(var(--util), 470px);
  border-radius: var(--radio);
  overflow: hidden;
}

.foro__foto img { width: 100%; height: 100%; object-fit: cover; }


/* Con la foto de ancla y la columna de razones fuera, la intro deja de
   ser una tira estrecha: es la mitad del panel. */
/* Más ancha que antes: ahora lleva dentro el listado, que tenía columna
   propia. */
.alcance__intro {
  flex: none;
  width: min(58ch, 46vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
}

.alcance__intro .pill { justify-self: start; }

/* El listado ocupa el ancho de la columna que lo contiene. La regla de
   ancho propio se fue con la columna. */
.alcance__cuerpo { width: 100%; }

/* Relaciones Públicas: aquí el panel abre la página y su columna lleva
   el titular grande, la descripción y los dos botones. El listado se
   queda fuera, en columna propia, y la del titular vuelve a su ancho de
   antes: con todo junto medía 797 px en una ventana de 900 y el titular
   se metía debajo del encabezado. */
.alcance__intro--abre { width: min(46ch, 34vw); }
.alcance__intro--abre + .alcance__cuerpo { flex: none; width: min(38ch, 28vw); }

/* Rótulo del listado. El subtítulo grande del panel pasó a ser "por qué
   elegirnos", así que la lista necesita su propia entradilla, pequeña. */
.alcance__rotulo {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.alcance__lista { list-style: none; display: grid; }

.alc {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: clamp(0.6rem, 1.9vh, 1.1rem);
  border-top: 1px solid var(--linea);
}

.alc:first-child { border-top: 0; }
.alc__num { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--marca-tinta); }
.alc h3 { font-family: var(--display); font-size: clamp(0.95rem, 1.25vw, 1.15rem); line-height: 1.2; font-weight: 400; }

/* --- El caso que se abre en un diálogo -----------------------
   El cliente lo pidió aquí —"un pop up con una descripción del
   evento, y la posibilidad de ver más fotos"— después de rechazar
   el de la página madre, que repetía el texto de la tarjeta. El
   botón sólo se dibuja si el caso trae descripción: un diálogo
   vacío es justo el que le sobraba. --- */
.caso__mas {
  margin-top: var(--space-2xs);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--marca-tinta);
  /* El área táctil mínima de WCAG 2.5.8 no la da el texto solo. */
  min-height: 44px;
  align-items: center;
}

/* La fuente del diálogo vive en el HTML —así el contenido existe sin
   JavaScript— pero no se pinta en la tarjeta. */
.caso__detalle { display: none; }

.caso-dlg {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  /* El retardo va en `visibility`, no en una transición suya: con
     `transition: visibility .35s` el estilo tarda dos fotogramas en
     decir "visible" y el foco no puede entrar. */
  transition: opacity 0.32s var(--ease), visibility 0s linear 0.32s;
}

.caso-dlg.is-abierto { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

.caso-dlg__caja {
  position: relative;
  width: min(680px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--flow-lg) var(--flow-md) var(--flow-md);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--negro-panel);
  color: var(--blanco);
  translate: 0 18px;
  transition: translate 0.42s var(--ease);
}

.caso-dlg.is-abierto .caso-dlg__caja { translate: 0 0; }

.caso-dlg__cerrar {
  position: absolute;
  right: var(--space-sm);
  top: var(--space-sm);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: none;
  color: var(--blanco);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.caso-dlg__cerrar:hover { border-color: var(--marca); color: var(--marca); }

.caso-dlg__cuerpo { display: grid; gap: var(--space-sm); }

.caso-dlg__cliente {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marca);
}

.caso-dlg__titulo { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; }
.caso-dlg__texto { color: rgba(255, 255, 255, 0.78); font-size: 0.98rem; display: grid; gap: var(--space-xs); }
.caso-dlg__texto a { display: none; }   /* el CTA del diálogo es el de abajo */

.caso-dlg__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2xs); }
.caso-dlg__galeria:empty { display: none; }
.caso__extra { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--fondo-3); }
.caso__extra img { width: 100%; height: 100%; object-fit: cover; }

.caso-dlg .btn { justify-self: start; margin-top: var(--space-2xs); }

@media (prefers-reduced-motion: reduce) {
  .caso-dlg, .caso-dlg__caja { transition: none; }
}

.alcance::before, .proyectos-serv::before,
.alcance::after,  .proyectos-serv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.alcance::before        { background: radial-gradient(52% 60% at 58% 50%, rgb(235 219 0 / 0.11) 0%, rgb(235 219 0 / 0) 66%); }
.proyectos-serv::before { background: radial-gradient(54% 60% at 58% 50%, rgb(243 176 0 / 0.10) 0%, rgb(243 176 0 / 0) 66%); }

.alcance::after, .proyectos-serv::after {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--marca);
  opacity: 0.11;
  mask-image: radial-gradient(58% 62% at 60% 50%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(58% 62% at 60% 50%, #000 0%, transparent 74%);
}

/* El folio va absoluto: si entra en el flex suma una columna y el
   panel se pasa del ancho de pantalla. */
.alcance > *:not(.panel__folio, .deco),
.proyectos-serv > *:not(.panel__folio, .deco) { position: relative; z-index: 2; }

/* ============================================================
   2 · Casos de éxito
   ============================================================ */

.proyectos-serv { gap: var(--flow-lg); align-items: center; }

.proyectos-serv__intro {
  flex: none;
  width: min(28ch, 22vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
  justify-items: start;
}


/* La franja del premio: el reconocimiento no es una tarjeta más */
.premio-franja {
  display: grid;
  gap: 3px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radio-sm);
  border: 1px solid var(--marca-tinta);
}

.premio-franja b {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

.premio-franja span { font-size: 0.86rem; line-height: 1.35; color: var(--tinta-suave); }

.galeria-serv {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 1.8vw, 1.75rem);
  list-style: none;
  /* Más baja: con 540 px y fichas de 265 el marco quedaba en 0.51 y una
     foto de 3:2 perdía dos tercios del encuadre. */
  height: min(var(--util), 430px);
}

.proy-serv {
  position: relative;
  flex: none;
  /* La galería es una pista que se recorre: ensancharla no aprieta nada
     y devuelve a la foto una proporción que no la destroza. */
  width: min(27vw, 390px);
  border-radius: var(--radio);
  overflow: hidden;
  isolation: isolate;
}

.proy-serv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(var(--foto-brillo) * 0.72)) saturate(0.92);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}

.proy-serv:hover img { transform: scale(1.05); filter: brightness(calc(var(--foto-brillo) * 0.92)) saturate(1.04); }

.proy-serv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 34%,
                              rgba(0, 0, 0, 0.3) 62%, rgba(0, 0, 0, 0.16) 100%);
}

.proy-serv__cuerpo {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: var(--space-md);
  color: var(--blanco);
}

.proy-serv__cliente {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marca);
}

.proy-serv h3 {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.proy-serv p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.76); }

/* Pantallas bajas */
@media (min-width: 900px) and (max-height: 820px) {
  .alcance__intro {
  max-width: min(40ch, 32vw); width: min(40ch, 32vw); gap: var(--space-sm); }
  .alcance__intro h2 { font-size: clamp(1.35rem, 2.1vw, 2rem); }
  .alcance__intro .lead { font-size: 0.9rem; }
  .alc { padding-block: 0.55rem; }
  .proy-serv { width: min(22vw, 280px); }
}

/* ============================================================
   Móvil
   ============================================================ */

@media (max-width: 899px) {
  .alcance::before, .proyectos-serv::before,
  .alcance::after,  .proyectos-serv::after { display: none; }

  .sd-acciones .btn { width: 100%; justify-content: center; min-height: 50px; }

  /* Sin recorrido lateral, el reel y el foro son bloques normales. */
  .reel { width: 100%; height: 60vw; }
  .alcance__foto { width: 100%; height: 62vw; }
  .foro__intro { width: 100%; }
  .foro__foto { width: 100%; height: 62vw; }
  .display--titular, .panel :is(h1, h2).display--titular { font-size: var(--fs-h2); }

  .alcance__intro,
  .alcance__cuerpo,
  .proyectos-serv__intro { width: 100%; max-width: none; }

  /* Carrusel de lado, como en la página madre: la página baja y la
     fila se desliza. Son ejes distintos y no compiten. */
  .galeria-serv {
    height: auto;
    margin-top: var(--flow-lg);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .galeria-serv::-webkit-scrollbar { display: none; }

  .proy-serv { width: 82vw; max-width: 330px; scroll-snap-align: center; transform: none; }

  .proy-serv { height: 380px; }

  .alcance__cuerpo { margin-top: var(--flow-lg); }

  .premio-franja { margin-top: var(--space-sm); }
}

/* ------------------------------------------------------------
   La tarjeta de proyecto lleva a su página
   El enlace vive en el <h3> y se estira sobre la tarjeta entera con
   un ::after. Un solo enlace, con nombre accesible real, y toda la
   ficha clicable —que es lo que pidió el cliente—.
   ------------------------------------------------------------ */
.proy-serv { position: relative; }

.proy-serv__ir { color: inherit; text-decoration: none; }

.proy-serv__ir::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.proy-serv__ver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marca-tinta);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease), gap 0.3s var(--ease);
}

.proy-serv:hover .proy-serv__ver,
.proy-serv:focus-within .proy-serv__ver { opacity: 1; gap: var(--space-xs); }

.proy-serv__ir:focus-visible::after {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Las referencias de proyecto, en grande
   ------------------------------------------------------------
   Derek pidió más impacto y menos limitación, con la forma en que
   Matraka presenta sus proyectos como referencia. Lo que allí manda
   es la fotografía: pieza grande, texto encima de la imagen y nada
   más. Aquí la ficha pasa de 390 a 520 px y de 430 a 620 de alto, el
   título sube de tamaño y desaparece la nota, que competía con él.
   ------------------------------------------------------------ */
.galeria-serv { height: min(var(--util), 620px); }

.proy-serv { width: min(32vw, 520px); }

.proy-serv h3 {
  font-size: clamp(1.35rem, 1.9vw, 2rem);
  line-height: 1.06;
}

.proy-serv__cuerpo { padding: var(--space-lg); gap: var(--space-2xs); }

/* La invitación aparece al acercarse, como en la referencia: en reposo
   sólo se ve la fotografía y el nombre. */
.proy-serv__cuerpo::after {
  content: "Ver el proyecto";
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.proy-serv:hover .proy-serv__cuerpo::after,
.proy-serv:focus-within .proy-serv__cuerpo::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .proy-serv__cuerpo::after { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 899px) {
  .galeria-serv { height: auto; }
  .proy-serv { width: 100%; height: 62vw; }
  .proy-serv__cuerpo { padding: var(--space-md); }
}

/* La columna de texto medía 700 px de alto —más que la caja del panel a
   827 de ventana— y al centrarse se salía por arriba: la miga acababa
   debajo del logotipo. A 22 vw el titular caía en cuatro líneas y los
   dos botones se apilaban. Ensanchada, el titular ocupa dos o tres
   líneas y los botones entran en una fila. */
.proyectos-serv__intro {
  width: min(38ch, 28vw);
  gap: var(--space-md);
}

.proyectos-serv__intro .lead { font-size: 1rem; }

/* Nueve píxeles más de holgura: a 827 de ventana la columna quedaba
   justo por debajo del header y la miga se le metía encima. */
.proyectos-serv__intro { gap: var(--space-sm); }
.proyectos-serv__intro .premio-franja { padding-block: var(--space-xs); }

/* Pantallas bajas: la columna todavía se metía seis píxeles bajo el
   header a 800 de alto. */
@media (min-width: 900px) and (max-height: 820px) {
  .proyectos-serv__intro { gap: var(--space-xs); }
  .proyectos-serv__intro .lead { font-size: 0.92rem; }
  .galeria-serv { height: min(var(--util), 540px); }
  .proy-serv { width: min(30vw, 460px); }
  .proy-serv h3 { font-size: clamp(1.15rem, 1.6vw, 1.6rem); }
}

/* Portátiles de 720: la caja del panel baja a 520 px y la columna no
   cabe. Se recorta el reparto vertical del panel —el header y los
   flotantes no necesitan los 200 px que reserva por defecto— y se
   aprieta la columna. */
@media (min-width: 900px) and (max-height: 760px) {
  .proyectos-serv { padding-block: 76px 84px; }
  .proyectos-serv__intro .premio-franja { display: none; }
  .proyectos-serv__intro .lead { font-size: 0.88rem; }
  .galeria-serv { height: min(var(--util), 470px); }
  .proy-serv { width: min(28vw, 400px); }
}


/* --- Abrir el vídeo -----------------------------------------------
   El botón va encima del vídeo, no debajo del pie: en la ventana del
   reel el pie ya lleva tres líneas de texto y un cuarto renglón lo
   convertía en un párrafo. Aquí es lo que es, un play.

   Se apoya en `.reel::after`, el velo que ya oscurece la ventana, así
   que no necesita fondo propio más allá del disco. */
.media-abrir {
  position: absolute;
  z-index: 3;
  inset: auto auto var(--space-lg) var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanco);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.media-abrir__disco {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--marca);
  color: #101010;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.28s var(--ease);
}

.media-abrir__disco svg { width: 1.15rem; height: 1.15rem; margin-left: 2px; }
.media-abrir:hover .media-abrir__disco,
.media-abrir:focus-visible .media-abrir__disco { transform: scale(1.08); }
.media-abrir:focus-visible { outline: 2px solid var(--marca); outline-offset: 6px; border-radius: 4px; }

/* El pie del reel sube para dejarle sitio al botón. */
.reel .media-abrir { bottom: auto; top: var(--space-lg); left: var(--space-lg); }

/* La ventana del foro, ahora en vídeo. Misma caja que la fotografía
   que había: el panel no cambia de proporciones. */
.foro__foto--video { position: relative; overflow: hidden; border-radius: var(--radio); }
.foro__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(var(--foto-brillo) * 0.82));
}
.foro__foto--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 46%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* --- El diálogo del vídeo ---------------------------------------- */
.vdlg {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

.vdlg.is-abierto { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

.vdlg__caja {
  position: relative;
  width: min(1180px, 100%);
  translate: 0 14px;
  transition: translate 0.34s var(--ease);
}

.vdlg.is-abierto .vdlg__caja { translate: 0 0; }

.vdlg__video {
  display: block;
  width: 100%;
  max-height: 82vh;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  background: #000;
  outline: none;
}

.vdlg__cerrar {
  position: absolute;
  top: -3.1rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.vdlg__cerrar:hover { background: rgba(255, 255, 255, 0.16); }
.vdlg__cerrar:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

@media (max-width: 899px) {
  .media-abrir__texto { display: none; }
  .media-abrir__disco { width: 2.8rem; height: 2.8rem; }
  .vdlg__cerrar { top: -2.9rem; }
}


/* --- El panel de casos ------------------------------------------
   La misma anatomía que el resto de paneles de estas páginas: una
   columna de texto y, al lado, la fila de tarjetas que se recorre con
   el propio movimiento horizontal. */
.casos { display: flex; align-items: center; gap: var(--gutter); }

.casos__intro {
  flex: none;
  width: min(34ch, 26vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
}

.casos__intro .pill { justify-self: start; }

.casos__fila {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.caso {
  position: relative;
  flex: none;
  width: min(30vw, 460px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-2);
}

.caso__portada {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(var(--foto-brillo));
}

.caso__cuerpo {
  display: grid;
  gap: 6px;
  padding: var(--space-md);
  align-content: start;
}

.caso__cuerpo h3 {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* La sede y el año: el dato que la web nueva no tenía y el viejo sí. */
.caso__sede { font-size: 0.86rem; color: var(--tinta-suave); }

/* Dentro de la ventana el fondo es negro y `--tinta-suave` se pierde
   contra él: la línea de la sede quedaba casi invisible bajo el
   titular. Ahí toma el blanco atenuado del propio diálogo. */
.caso-dlg .caso__sede { color: rgba(255, 255, 255, 0.72); margin-bottom: var(--space-sm); }

.caso__mas { margin-top: 4px; justify-self: start; }

/* El botón cubre la tarjeta entera: la ventana se abre pulsando en
   cualquier parte, no sólo en el renglón. */
.caso__mas::after { content: ""; position: absolute; inset: 0; }

.caso__detalle { display: none; }

.caso__puntos { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.caso__puntos li { font-size: 0.95rem; line-height: 1.5; }
.caso__puntos li::marker { color: var(--marca); }

@media (max-width: 899px) {
  .casos { flex-direction: column; align-items: stretch; }
  .casos__intro { width: 100%; max-width: none; }
  .casos__fila { flex-direction: column; }
  .caso { width: 100%; }
}


/* Un caso cuya galería es un clip y no una tira de fotos: el de Huawei.
   Ocupa el ancho entero del hueco de la galería, en vez de compartirlo
   con hermanos que no existen. */
.caso__extra--video { grid-column: 1 / -1; width: 100%; }
.caso__extra--video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radio);
  background: #000;
}


/* --- La columna cuando el panel de casos abre la página --------------
   Lleva el titular, la descripción completa de enso.com.mx (hasta tres
   párrafos), la franja del premio y los dos botones, y el panel mide una
   pantalla exacta. Medido: sin esto desbordaba en 31 de 45 combinaciones
   de página y ventana, y el titular se metía debajo del encabezado.

   El ancho no lleva tope en `ch`: con `min(34ch, …)` la columna se
   quedaba en 340 px en cualquier monitor y los párrafos pasaban de tres
   renglones a cinco. El tamaño del texto se mide contra el alto de la
   ventana, porque el panel no puede crecer. */
.casos__intro--abre {
  width: min(30vw, 460px);
  gap: clamp(0.45rem, 1.15svh, 1.15rem);
}

.casos__intro--abre h1 {
  font-size: clamp(1.6rem, min(4.6svh, 3.2vw), 3.4rem);
  line-height: 1.02;
}

.casos__intro--abre .lead {
  font-size: clamp(0.78rem, min(1.75svh, 1.1vw), 1.0625rem);
  line-height: 1.42;
}

.casos__intro--abre .premio-franja {
  padding: clamp(0.3rem, 0.9svh, 0.7rem) var(--space-sm);
}

/* Los dos botones, en fila. Apilados y a todo el ancho ocupaban 124 px
   de una columna que ya iba justa; uno al lado del otro, 56. */
.casos__intro--abre .sd-acciones {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-xs);
  margin-top: 0;
}

.casos__intro--abre .sd-acciones .btn {
  justify-content: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-sm);
  font-size: clamp(0.62rem, 1.3svh, 0.76rem);
}

/* En ventanas bajas el panel afloja su relleno: arriba lo justo para
   librar el encabezado (mide 101 px), abajo mucho menos. */
@media (min-width: 900px) and (max-height: 820px) {
  .panel.casos { padding-top: 110px; padding-bottom: 72px; }
}

@media (max-width: 899px) {
  /* Sin recorrido lateral el panel deja de tener alto fijo: el texto
     vuelve a su tamaño normal y la columna, a todo el ancho. */
  .casos__intro--abre { width: 100%; gap: var(--flow-sm); }
  .casos__intro--abre h1 { font-size: var(--fs-h1); }
  .casos__intro--abre .lead { font-size: 1rem; line-height: 1.55; }

  /* Y los botones se apilan otra vez. En fila, con la pantalla
     estrecha, «Ver todos nuestros clientes» partía en tres renglones y
     los dos quedaban de distinto alto. Aquí no hace falta ahorrar: la
     página baja todo lo que necesite. */
  .casos__intro--abre .sd-acciones {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--space-sm);
  }
  .casos__intro--abre .sd-acciones .btn {
    justify-content: space-between;
    padding-inline: var(--space-md);
    font-size: var(--fs-micro);
  }
}