/* ============================================================
   Generación Cloud — Página de detalle de servicio (servicio.php)
   Componentes propios y exclusivos de esta página, para NO repetir
   el diseño que ya vive en la portada (el panel tipo terminal de
   "Por qué Generación Cloud"). Se apoya en las variables de style.css.
   ============================================================ */

/* ------------------------------------------------------------
   "Qué incluye" — ficha técnica en tarjetas (reemplaza al panel
   terminal de la portada). Número marca de agua, chip de ícono,
   barra de acento superior que se dibuja al pasar el cursor y
   marco de esquina que la distingue del resto del sitio.
   ------------------------------------------------------------ */
.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.spec {
  position: relative;
  padding: 2.4rem 2rem 2.1rem;
  border: 1px solid var(--borde);
  border-radius: 18px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.006) 62%);
  overflow: hidden;
  isolation: isolate;
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 400ms ease, box-shadow 400ms ease;
}

/* Barra de acento que se dibuja de izquierda a derecha en hover */
.spec::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blanco), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Marco de esquina inferior derecha (detalle "técnico") */
.spec::after {
  content: '';
  position: absolute; right: 14px; bottom: 14px;
  width: 22px; height: 22px;
  border-right: 1px solid var(--borde-claro);
  border-bottom: 1px solid var(--borde-claro);
  opacity: 0.5;
  transition: opacity 400ms ease, width 400ms ease, height 400ms ease;
}

.spec:hover {
  transform: translateY(-6px);
  border-color: var(--borde-claro);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.spec:hover::before { transform: scaleX(1); }
.spec:hover::after { opacity: 1; width: 30px; height: 30px; }

/* Número grande de fondo (marca de agua) */
.spec__num {
  position: absolute; top: 0.4rem; right: 1.3rem;
  z-index: -1;
  font-family: var(--fuente-mono);
  font-weight: 700; font-size: 4.6rem; line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.045);
  transition: color 400ms ease;
}
.spec:hover .spec__num { color: rgba(255, 255, 255, 0.08); }

.spec__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border: 1px solid var(--borde-claro);
  border-radius: 13px;
  background: var(--negro-profundo);
  margin-bottom: 1.4rem;
}
.spec__icono svg { width: 24px; height: 24px; stroke: var(--blanco-suave); }

.spec__titulo { font-size: 1.1rem; margin-bottom: 0.6rem; }
.spec__texto {
  color: var(--gris-400);
  font-weight: 300; font-size: 0.93rem; line-height: 1.62;
  max-width: 34ch;
}

@media (max-width: 900px) {
  .specs { grid-template-columns: 1fr; gap: 1rem; }
  .spec { padding: 1.8rem 1.6rem; }
  .spec__num { font-size: 3.8rem; }
}

/* ------------------------------------------------------------
   Escenario de imágenes — envuelve las galerías reutilizadas de
   galeria.php y las presenta mejor en el contexto de una sola
   página de servicio: menos aire muerto, un "piso" de luz bajo
   las tarjetas flotantes y un marco sutil que ancla la escena.
   Solo afecta a servicio.php (las clases viven bajo .servicio-showcase),
   galeria.php queda intacta.
   ------------------------------------------------------------ */
.servicio-showcase { position: relative; }

/* Marco/escenario detrás de las tarjetas */
.servicio-showcase .galeria-seccion__interior {
  position: relative;
}
.servicio-showcase .fan-galeria,
.servicio-showcase .pila-tickets {
  position: relative;
  margin-top: 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 255, 255, 0.03), transparent 60%),
    var(--negro-profundo);
}

/* Menos altura muerta que en la galería completa */
.servicio-showcase .fan-galeria { padding: 2.2rem 0 2.6rem; }
.servicio-showcase .fan-galeria__pista { height: 340px; }
.servicio-showcase .pila-tickets { padding: 2.2rem 0 2.6rem; }
.servicio-showcase .pila-tickets__pista { height: 360px; }

/* "Piso" de luz elíptico bajo las tarjetas flotantes, para que se
   sientan apoyadas en una escena y no perdidas en el vacío */
.servicio-showcase .fan-galeria::after,
.servicio-showcase .pila-tickets::after {
  content: '';
  position: absolute; left: 50%; bottom: 1.9rem;
  transform: translateX(-50%);
  width: min(540px, 78%); height: 46px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12), transparent 72%);
  filter: blur(7px);
  z-index: 0;
  pointer-events: none;
}
/* Las tarjetas van por encima del piso de luz */
.servicio-showcase .fan-tarjeta,
.servicio-showcase .ticket-tarjeta { z-index: 1; }

/* Franja "marquee" de Pay y malla de Web: enmarcado suave, sin tocar
   sus alturas (no tienen aire muerto vertical) */
.servicio-showcase .marquee-pay,
.servicio-showcase .malla-web {
  position: relative;
  margin-top: 0.5rem;
}
.servicio-showcase .malla-web {
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 1.6rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.03), transparent 60%),
    var(--negro-profundo);
}

/* Pie de escena: leyenda monoespaciada bajo la galería */
.servicio-showcase__pie {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 1.4rem;
  font-family: var(--fuente-mono);
  font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--gris-500);
}
.servicio-showcase__pie::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--borde-claro);
}

@media (max-width: 768px) {
  .servicio-showcase .fan-galeria__pista { height: 300px; }
  .servicio-showcase .pila-tickets__pista { height: 320px; }
  .servicio-showcase .malla-web { padding: 1rem; }
}