/* ============================================================
   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 · Hero
   ============================================================ */

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

/* 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;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s var(--ease);
}
.miga a:hover { color: var(--marca); }
.miga span { color: var(--marca); }
.miga i { font-style: normal; color: rgba(255, 255, 255, 0.35); }

.sd-hero__trazo {
  position: absolute;
  right: -8vw;
  top: 50%;
  z-index: 2;
  width: min(84vh, 700px);
  height: auto;
  translate: 0 -50%;
  fill: var(--blanco);
  opacity: 0.07;
  pointer-events: none;
}

.sd-hero__acciones {
  margin-top: var(--flow-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ============================================================
   2 · Qué incluye — cinco tarjetas
   ============================================================ */

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

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

.incluye__intro h2 { font-size: clamp(1.5rem, 2.4vw, 2.5rem); }
.incluye__intro .pill { justify-self: start; }

.tipos-serv {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  list-style: none;
  height: min(var(--util), 520px);
}

.tipo-serv {
  flex: none;
  width: min(24vw, 320px);
  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);
}

.tipo-serv:hover { border-color: var(--marca); transform: translateY(-4px); }

/* Proporción fija en vez de "lo que sobre": estirada a lo alto la foto
   perdía dos tercios del encuadre. */
.tipo-serv__foto {
  position: relative;
  flex: none;
  aspect-ratio: 5 / 4;
  margin: 0;
  overflow: hidden;
}

/* Mismo tratamiento que en la página madre: las fotos vienen de
   eventos con temperatura muy distinta y juntas parecen otro sitio. */
.tipo-serv__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) contrast(1.05) brightness(calc(var(--foto-brillo) * 0.94));
  transition: filter 0.5s var(--ease), scale 0.6s var(--ease);
}

.tipo-serv:hover .tipo-serv__foto img {
  filter: grayscale(0) contrast(1) brightness(var(--foto-brillo));
  scale: 1.05;
}

.tipo-serv__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.13), rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

/* El sello de marca, igual que en la página madre */
.sd-sello {
  position: absolute;
  right: var(--space-sm);
  top: var(--space-sm);
  z-index: 2;
  width: 30px;
  height: auto;
  fill: var(--marca);
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

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

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

.tipo-serv__nombre {
  font-family: var(--display);
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tinta);
  /* Los cinco nombres miden lo mismo: sin esto, "Eventos híbridos
     (presencial + streaming)" hacía su tarjeta más corta de foto. */
  min-height: calc(1.18rem * 1.15 * 3);
}

/* La píldora no parte: en dos renglones parece un error, no una etiqueta */
.pill { white-space: nowrap; }

/* ============================================================
   3 · El proceso, en versión mini (sólo Eventos)
   ============================================================ */

.proceso-mini { gap: var(--flow-md); align-items: center; }

/* El panel se recorría casi vacío: anillo, seis renglones y media
   pantalla en negro. La fotografía ocupa ese hueco y además acorta el
   recorrido, que se sentía lento. Grande, no una miniatura. */
.sd-foto {
  flex: none;
  width: min(19.5vw, 286px);
  display: grid;
  gap: var(--space-sm);
}

.sd-foto img {
  width: 100%;
  height: clamp(210px, calc(var(--util) * 0.46), 330px);
  object-fit: cover;
  border-radius: var(--radio);
  filter: brightness(var(--foto-brillo));
}

.sd-foto figcaption {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
/* --- Fondo de marca para los paneles sin fotografía -----------------
   Resplandor cálido y trama de puntos, el mismo recurso del mapa y de
   Nosotros. Sin esto los cuatro paneles interiores eran planchas lisas.
   El contenido sube a z-index 2 para quedar por encima. --- */
.proceso-mini::before, .porque-serv::before, .proyectos-serv::before,
.proceso-mini::after,  .porque-serv::after,  .proyectos-serv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.proceso-mini::before { background: radial-gradient(50% 58% at 66% 50%, rgb(253 214 0 / 0.10) 0%, rgb(253 214 0 / 0) 66%); }
.porque-serv::before  { background: radial-gradient(52% 60% at 62% 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%); }

.proceso-mini::after, .porque-serv::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. */
.proceso-mini > *:not(.panel__folio),
.porque-serv > *:not(.panel__folio),
.proyectos-serv > *:not(.panel__folio) { position: relative; z-index: 2; }


.proceso-mini__intro {
  max-width: min(26ch, 20vw);
  flex: none;
  width: min(30ch, 24vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
  justify-items: start;
}

.proceso-mini__intro h2 { font-size: clamp(1.5rem, 2.4vw, 2.5rem); }

.reloj-mini {
  position: relative;
  flex: none;
  width: min(var(--util), 300px);
  aspect-ratio: 1;
}

.reloj-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reloj-mini__pista { fill: none; stroke: var(--linea); stroke-width: 2; }
.reloj-mini__avance { fill: none; stroke: var(--marca); stroke-width: 3; stroke-linecap: round; }

.reloj-mini__nodo {
  fill: var(--fondo);
  stroke: var(--marca-tinta);
  stroke-width: 1.5;
}

.reloj-mini__num {
  font-family: var(--display);
  font-size: 15px;
  fill: var(--marca-tinta);
  text-anchor: middle;
  dominant-baseline: central;
}

.reloj-mini__centro {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}

.reloj-mini__centro b { font-family: var(--display); font-size: 1.15rem; line-height: 1; color: var(--tinta); }
.reloj-mini__centro span { font-family: var(--display); font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--marca-tinta); }

/* Los nombres van al lado, no alrededor del círculo: en un anillo de
   340 px, seis etiquetas se encabalgan. */
.pasos-mini { flex: none; width: min(21ch, 16.5vw); list-style: none; display: grid; gap: 0; }

.paso-mini {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--linea);
  font-size: 0.92rem;
  color: var(--tinta-suave);
}

.paso-mini:first-child { border-top: 0; }
.paso-mini b { font-family: var(--display); font-size: 0.78rem; color: var(--marca-tinta); }

/* ============================================================
   4 · Por qué elegirnos — tres tarjetas horizontales
   ============================================================ */

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

.porque-serv__intro {
  flex: none;
  width: min(30ch, 24vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
}

.porque-serv__intro h2 { font-size: clamp(1.5rem, 2.4vw, 2.5rem); }
.porque-serv__intro .pill { justify-self: start; }

/* La lista es un mazo: cada ficha se reparte desde el centro, así que
   necesita su propio contexto 3D y no puede recortar los giros. */
.razones-serv {
  flex: none;
  /* La foto de al lado creció para no salir recortada a lo alto; el
     ancho sale de aquí, que iba sobrado. */
  width: min(38vw, 540px);
  list-style: none;
  display: grid;
  gap: var(--space-md);
  transform-style: preserve-3d;
}

.razon-serv { backface-visibility: hidden; will-change: transform; }

.razon-serv {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--flow-sm) var(--flow-md);
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--fondo-3);
  transition: border-color 0.35s var(--ease);
}

.razon-serv:hover { border-color: var(--marca); }

.razon-serv__sello {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--marca-tinta);
}

.razon-serv__sello svg { width: 22px; height: auto; fill: var(--marca-tinta); }

.razon-serv__cuerpo { display: grid; gap: 3px; }

.razon-serv h3 {
  font-family: var(--display);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.15;
  color: var(--tinta);
}

.razon-serv p { font-size: 0.9rem; line-height: 1.45; color: var(--tinta-suave); }

/* ============================================================
   5 · Proyectos destacados
   ============================================================ */

.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;
}

.proyectos-serv__intro h2 { font-size: clamp(1.5rem, 2.4vw, 2.5rem); }

/* 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) {
  .incluye__intro, .porque-serv__intro, .proceso-mini__intro {
  max-width: min(26ch, 20vw); width: min(26ch, 20vw); gap: var(--space-sm); }
  .incluye__intro h2, .porque-serv__intro h2, .proceso-mini__intro h2 { font-size: clamp(1.35rem, 2.1vw, 2rem); }
  .incluye__intro .lead, .porque-serv__intro .lead, .proceso-mini__intro .lead { font-size: 0.9rem; }
  .tipo-serv { width: min(17vw, 210px); }
  .tipo-serv__cuerpo { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .razon-serv { padding: var(--space-sm) var(--space-md); }
  .razon-serv p { font-size: 0.85rem; }
  .proy-serv { width: min(22vw, 280px); }
  .reloj-mini { width: min(var(--util), 280px); }
  .paso-mini { padding: 0.35rem 0; font-size: 0.86rem; }
}

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

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

  .sd-hero__trazo { right: -30vw; opacity: 0.06; }
  .sd-hero__acciones .btn { width: 100%; justify-content: center; min-height: 50px; }

  .incluye__intro,
  .porque-serv__intro,
  .proceso-mini__intro,
  .proyectos-serv__intro,
  .razones-serv,
  .pasos-mini { 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. */
  .tipos-serv,
  .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;
  }

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

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

  .tipo-serv__foto { flex: none; height: 180px; }
  .tipo-serv__foto img { filter: grayscale(0.4) contrast(1.03); }
  .tipo-serv__nombre { min-height: 0; }

  .proy-serv { height: 380px; }

  .razones-serv { margin-top: var(--flow-lg); gap: var(--space-sm); }
  .razon-serv { padding: var(--space-md); }

  /* El anillo mini no cabe en 350 px con seis nodos legibles */
  .reloj-mini { display: none; }
  .pasos-mini { margin-top: var(--flow-md); }
  .paso-mini { padding: var(--space-sm) 0; }

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