/* ============================================================
   ENSO MEDIA — Servicios (página madre)
   El motor viene de horizontal.css; la píldora y los tokens
   compartidos, de nosotros.css. Aquí sólo las siete tarjetas,
   el índice, la ficha de detalle y el carrusel de móvil.

   El brief pide "dorado". El manual de marca no tiene oro: el
   acento cálido se resuelve con la gama de marca (#EBDB00 →
   #F3B000), igual que en Nosotros y en Cómo trabajamos.
   ============================================================ */

/* ============================================================
   1 · Hero
   ============================================================ */

.sv-hero .hero__titulo { max-width: 15ch; }

.sv-hero__trazo {
  position: absolute;
  right: -10vw;
  top: 50%;
  z-index: 1;
  width: min(80vh, 660px);
  height: auto;
  translate: 0 -50%;
  fill: var(--blanco);
  opacity: 0.07;
  pointer-events: none;
}

/* Las siete disciplinas al pie del hero. No rotan solas: el que rota
   es el scroll. Un letrero que gira con temporizador obliga a esperar
   a que vuelva a pasar, y además pide un botón de pausa (WCAG 2.2.2)
   que aquí no haría falta. */
.disciplinas {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--space-2xl) + 0.9rem);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  list-style: none;
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

.disciplinas li {
  position: relative;
  padding-left: var(--space-md);
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.45s var(--ease);
}

.disciplinas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  translate: 0 -50%;
  transform-origin: 0 50%;
  scale: 0.57 1;
  transition: scale 0.45s var(--ease);
}

.disciplinas li.is-activo { color: var(--marca); }
.disciplinas li.is-activo::before { scale: 1 1; }

/* ============================================================
   2 · Las siete tarjetas
   ============================================================ */

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

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

.sv-intro h2 { font-size: var(--fs-h2); }
.sv-intro .pill { justify-self: start; }

/* El índice hace de indicador de posición. En escritorio sustituye a
   los puntos: siete círculos mudos no dicen a dónde llevan, y aquí
   además sirven de salto directo. */
.sv-indice {
  margin-top: var(--space-2xs);
  list-style: none;
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--linea);
}

.sv-indice button {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--tinta-tenue);
  transition: color 0.3s var(--ease), translate 0.3s var(--ease);
}

.sv-indice button i {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--tinta-tenue);
  opacity: 0.7;
}

.sv-indice button:hover { color: var(--tinta); translate: var(--space-2xs) 0; }

.sv-indice li.is-activo button { color: var(--marca-tinta); }
.sv-indice li.is-activo button i { color: var(--marca-tinta); opacity: 1; }

/* --- La fila de siete --------------------------------------
   No hay carrusel dentro del carrusel: la página YA se recorre en
   horizontal, así que el mismo gesto pasa las tarjetas. Se ven tres a
   la vez en escritorio, como en el sitio actual, pero sin dos scrolls
   compitiendo por la rueda del ratón. */
.sv-fila {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 1.8vw, 1.75rem);
  list-style: none;
  height: min(var(--util), 560px);
}

.sv-tarjeta {
  flex: none;
  width: min(26vw, 360px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-3);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.sv-tarjeta:hover,
.sv-tarjeta:focus-within { border-color: var(--marca); transform: translateY(-4px); }

.sv-tarjeta__foto {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

/* Las siete fotos vienen de siete eventos distintos —azul de Free
   Fire, blanco de Audi, dorado de Buchanan's, rosa de Avon— y juntas
   parecían siete sitios. Un tratamiento común las vuelve un sistema;
   al pasar el cursor recuperan su color, que es cuando el color sí
   aporta. */
.sv-tarjeta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.62) contrast(1.06) brightness(calc(var(--foto-brillo) * 0.94));
  transition: filter 0.5s var(--ease), scale 0.6s var(--ease);
}

.sv-tarjeta:hover .sv-tarjeta__foto img,
.sv-tarjeta:focus-within .sv-tarjeta__foto img {
  filter: grayscale(0) contrast(1) brightness(var(--foto-brillo));
  scale: 1.04;
}

/* Un velo cálido de marca por encima, para que las siete compartan
   temperatura sin repintar las fotos. */
.sv-tarjeta__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(200deg, rgba(235, 219, 0, 0.14), rgba(243, 176, 0, 0.06) 60%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.sv-tarjeta:hover .sv-tarjeta__foto::after { opacity: 0.55; }

/* Sello de marca en la esquina: el mismo trazo, en las siete */
.sv-sello {
  position: absolute;
  right: var(--space-sm);
  top: var(--space-sm);
  z-index: 2;
  width: 34px;
  height: auto;
  fill: var(--marca);
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.sv-tarjeta__cuerpo {
  flex: none;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
}

.sv-tarjeta__num {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--marca-tinta);
}

/* El nombre en la tipografía de marca con acento cálido, no en
   mayúsculas rígidas: "STREAMING" en caja alta pesa el doble y rompe
   la jerarquía que ya fija el manual. */
.sv-tarjeta__nombre {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

/* Las siete descripciones miden lo mismo: sin esto, Eventos y
   Activaciones eran tarjetas de otro tamaño que Streaming y Stands. */
.sv-tarjeta__cuerpo p {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  min-height: calc(0.92rem * 1.45 * 3);
}

.sv-mas { margin-top: var(--space-2xs); justify-self: start; }

.sv-tarjeta--nuevo .sv-sello { opacity: 1; }

/* Los puntos son el indicador de teléfono; en escritorio manda el índice */
.sv-dots { display: none; }

/* Pantallas bajas: la columna cede antes que la tarjeta.
   A 1280×720 la columna medía 572 px contra 520 de alto útil y el
   panel se desbordaba 26 px por abajo. Lo que sobraba era el
   titular y los huecos, no el índice. */
@media (min-width: 900px) and (max-height: 820px) {
  .sv-intro { width: min(23ch, 18vw); gap: var(--space-sm); }
  .sv-intro h2 { font-size: clamp(1.4rem, 2.3vw, 2rem); }
  .sv-intro .lead { font-size: 0.9rem; }
  .sv-tarjeta { width: min(24vw, 310px); }
  .sv-tarjeta__cuerpo { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .sv-tarjeta__cuerpo p { font-size: 0.86rem; min-height: calc(0.86rem * 1.45 * 3); }
  .sv-indice { margin-top: 0; }
  .sv-indice button { padding: 0.28rem 0; font-size: 0.74rem; }
  .sv-sello { width: 28px; }
}

/* ============================================================
   3 · Ficha de detalle
   Va colgada del <body>, fuera de la pista: si viviera dentro del
   panel, abrirla cambiaría el ancho del recorrido y el motor tendría
   que recalcular el pin a media navegación.
   ============================================================ */

.ficha {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  border: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  /* La visibilidad cambia de golpe al abrir y espera a la salida al
     cerrar. Con `visibility 0.35s` a secas, el estilo tardaba dos
     fotogramas en decir "visible" y el foco no podía entrar todavía. */
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

.ficha.is-abierta {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0s;
}

.ficha__caja {
  position: relative;
  width: min(920px, 100%);
  max-height: min(86svh, 640px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radio);
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  overflow: hidden;
  translate: 0 18px;
  transition: translate 0.4s var(--ease);
}

.ficha.is-abierta .ficha__caja { translate: 0 0; }

.ficha__foto { position: relative; margin: 0; min-height: 240px; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }

.ficha__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(235, 219, 0, 0.12), rgba(0, 0, 0, 0) 60%);
}

.ficha__cuerpo {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--flow-lg) var(--flow-md);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ficha__num {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--marca-tinta);
}

.ficha__titulo {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ficha__texto { color: var(--tinta-suave); font-size: var(--fs-lead); line-height: 1.55; }

.ficha__acciones {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.ficha__cerrar {
  position: absolute;
  right: var(--space-sm);
  top: var(--space-sm);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  background: var(--vidrio);
  color: var(--tinta);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.ficha__cerrar:hover { border-color: var(--marca); color: var(--marca-tinta); }

@media (prefers-reduced-motion: reduce) {
  .ficha, .ficha__caja { transition: none; }
}

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

@media (max-width: 899px) {
  .sv-hero__trazo { right: -32vw; opacity: 0.06; }

  .disciplinas {
    position: static;
    margin-top: var(--flow-md);
    gap: 0.35rem var(--space-sm);
    font-size: 0.6rem;
  }

  .disciplinas li { color: rgba(255, 255, 255, 0.5); }

  .sv-intro { width: 100%; max-width: none; }

  /* En escritorio el índice es el indicador; en teléfono lo son los
     puntos de abajo, y repetir los dos deja la misma lista dos veces. */
  .sv-indice { display: none; }

  /* Aquí sí hay carrusel: la página baja, la fila se desliza de lado.
     Son ejes distintos, así que no compiten. */
  .sv-fila {
    display: flex;
    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;
  }

  .sv-fila::-webkit-scrollbar { display: none; }

  .sv-tarjeta {
    width: 84vw;
    max-width: 340px;
    scroll-snap-align: center;
    transform: none;
  }

  .sv-tarjeta:hover { transform: none; }

  /* La foto ya no compite con el texto: arriba la imagen, abajo el
     texto sobre fondo sólido. */
  .sv-tarjeta__foto { flex: none; height: 190px; }
  .sv-tarjeta__foto img { filter: grayscale(0.45) contrast(1.04); }
  .sv-tarjeta__cuerpo { padding: var(--space-md); }
  /* También aquí las siete miden lo mismo: en el carrusel se ven una
     junto a otra al deslizar, y media línea de diferencia se nota. */
  .sv-tarjeta__cuerpo p { font-size: 0.95rem; min-height: calc(0.95rem * 1.45 * 3); }
  .sv-mas { min-height: 44px; align-items: center; }

  .sv-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: var(--flow-md);
  }

  /* 44 px de verdad: con gap de 12 px los siete no cabían en 390 y
     flex los encogía a 40. */
  .sv-dots button {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }

  /* El punto es de 9 px, pero el botón mide 44: se puede atinar */
  .sv-dots button::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--marca-tinta);
    background: transparent;
    transition: background-color 0.3s var(--ease), scale 0.3s var(--ease);
  }

  .sv-dots button[aria-current="true"]::before { background: var(--marca-tinta); scale: 1.25; }

  /* --- Ficha en teléfono: hoja de abajo hacia arriba --- */
  .ficha { padding: 0; place-items: end stretch; }

  .ficha__caja {
    width: 100%;
    max-height: 88svh;
    grid-template-columns: 1fr;
    border-radius: var(--radio) var(--radio) 0 0;
    translate: 0 40px;
  }

  .ficha__foto { height: 170px; min-height: 0; }
  .ficha__cuerpo { padding: var(--flow-md) var(--gutter) var(--flow-lg); }
  .ficha__acciones .btn { width: 100%; justify-content: center; }
}