/* =========================================================
   PÁGINA DE SERVICIOS – ON Publicidad
   Plantilla: page-servicios.php

   El reto de diseño de esta página es que seis servicios seguidos se leen
   como una lista y cansan. Se resuelve con cuatro recursos:

   1. Zigzag: la imagen alterna de lado en cada bloque (serv-block--alt).
   2. Ritmo de color: el fondo alterna entre --paper y --bg.
   3. Módulo variable: cada servicio muestra un bloque distinto bajo las
      viñetas (chips / cifras / casos), así ninguno se lee igual.
   4. Cortes: dos franjas oscuras a ancho completo (proceso y cierre) parten
      la página y le dan respiro.

   El índice pegajoso convierte el scroll largo en algo navegable.
   ========================================================= */

.serv-page {
  background: var(--paper);
  /* La página nunca desborda a lo ancho: las rejillas se reordenan y las
     etiquetas hacen wrap en lugar de forzar scroll horizontal. */
  overflow-x: clip;
}

/*
 * Sangría común de todas las secciones: 6% del ancho de la ventana.
 *
 * Antes era max-width: 1180px + padding 7%, o sea dos sangrías sumadas
 * (~133px por lado en 1280px), bastante más que el catálogo o el carrito,
 * que usan 7% de la ventana. Se quitó el max-width porque en pantallas
 * grandes reaparecía como un margen enorme (293px en 1920px).
 *
 * No hace falta un tope para cuidar la medida de lectura: los párrafos ya
 * la limitan por su cuenta (.serv-block__p y los encabezados de sección).
 */
.serv-hero__inner,
.serv-block__inner,
.serv-proceso__inner,
.serv-tecnicas__inner,
.serv-faq__inner,
.serv-cierre__inner {
  padding-inline: 6%;
}

/* ── Portada ─────────────────────────────────────────────── */
.serv-hero {
  background-color: var(--brand-dark);
  padding: 8.5em 0 3.5em;
  position: relative;
  overflow: hidden;
}

/* Halo naranjo muy tenue: da profundidad sin cargar. */
.serv-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 45em;
  height: 45em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 101, 39, 0.16), transparent 65%);
  pointer-events: none;
}

.serv-hero__inner { position: relative; z-index: 1; }

.serv-hero__title {
  color: var(--paper);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0.35em 0 0;
  max-width: 16em;
}

.serv-hero__lead {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.75;
  max-width: 44em;
  margin: 1.1em 0 0;
}

.serv-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.6em;
  list-style: none;
  padding: 0;
  margin: 2.6em 0 0;
}

.serv-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.serv-hero__stats strong {
  color: var(--brand);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
}

.serv-hero__stats span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Índice pegajoso ─────────────────────────────────────── */
.serv-nav {
  position: sticky;
  /* Justo debajo de lo que ya ocupa la parte superior de la ventana: la barra
     de navegación fija y, si la hay, la de administración (--nav-offset). */
  top: var(--nav-offset, 0px);
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--bg-2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.serv-nav__track {
  display: flex;
  /* Envuelve en lugar de desplazarse: con overflow-x el índice mostraba su
     propia barra de scroll ya en 1280px. Las etiquetas del índice son cortas
     (clave 'corto' en page-servicios.php) justamente para que quepan en una
     fila en escritorio. */
  flex-wrap: wrap;
  gap: 0.4em;
  /* Misma sangría que las secciones, para que el índice quede alineado con
     el contenido que indexa. */
  padding: 0.7em 6%;
}

.serv-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex-shrink: 0;
  padding: 0.5em 1em;
  border-radius: 50px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.serv-nav__link:hover {
  background: var(--bg-2);
  color: var(--brand-dark);
}

.serv-nav__num {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--brand);
  opacity: 0.75;
}

/* Estado activo: lo pone assets/js/servicios-nav.js según el scroll. */
.serv-nav__link.is-current {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--paper);
}
.serv-nav__link.is-current .serv-nav__num { color: var(--brand); opacity: 1; }

/* ── Bloque de servicio ──────────────────────────────────── */
.serv-block {
  background: var(--paper);
  padding: 4.5em 0;
  /* Compensa el índice pegajoso al saltar por ancla, para que el título no
     quede escondido detrás de él. */
  scroll-margin-top: 4.5em;
}

.serv-block--alt { background: var(--bg); }

.serv-block__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5em;
  align-items: start;
}

/* Zigzag: en los bloques pares la columna visual pasa a la izquierda. */
.serv-block--alt .serv-block__text  { order: 2; }
.serv-block--alt .serv-block__aside { order: 1; }

.serv-block__head {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.6em;
}

.serv-block__num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--brand);
  padding: 0.3em 0.7em;
  border: 1px solid rgba(236, 101, 39, 0.35);
  border-radius: 50px;
}

.serv-block__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.serv-block__title {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
}

.serv-block__lead {
  margin: 0.6em 0 1.2em;
  color: var(--brand);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  font-weight: 600;
  line-height: 1.6;
}

.serv-block__p {
  margin: 0 0 1em;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 40em;
}

.serv-block__sub {
  margin: 1.8em 0 0.8em;
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Viñetas */
.serv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.55em 1.5em;
}

.serv-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  color: var(--fuente);
  font-size: 0.9rem;
  line-height: 1.5;
}

.serv-list i {
  color: var(--brand);
  font-size: 0.72rem;
  margin-top: 0.35em;
  flex-shrink: 0;
}

/* ── Módulo variable ─────────────────────────────────────── */

/* Etiquetas (técnicas / materiales / líneas de caja) */
.serv-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* nunca fuerza scroll horizontal */
  gap: 0.5em;
}

.serv-chip {
  padding: 0.4em 0.9em;
  border-radius: 50px;
  background: var(--bg-2);
  border: 1px solid transparent;
  color: var(--brand-dark);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}

.serv-block--alt .serv-chip { background: var(--paper); }
.serv-chip:hover { border-color: var(--brand); }

/* Cifras del catálogo */
.serv-cifras {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1em;
}

.serv-cifras li {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 1em 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.serv-block--alt .serv-cifras li { background: var(--paper); }

.serv-cifras strong {
  color: var(--brand);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.serv-cifras span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Casos de uso */
.serv-casos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.serv-casos li {
  position: relative;
  padding-left: 1.5em;
  color: var(--fuente);
  font-size: 0.9rem;
  line-height: 1.6;
}

.serv-casos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  border: 2px solid var(--brand);
}

/* Nota al pie del módulo */
.serv-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin: 1.1em 0 0;
  padding: 0.9em 1.1em;
  border-left: 3px solid var(--brand);
  background: rgba(236, 101, 39, 0.06);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.serv-nota i { color: var(--brand); margin-top: 0.2em; flex-shrink: 0; }

/* Acciones del bloque */
.serv-block__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin-top: 2em;
}

/* .btn__ghost está pensado para fondo oscuro; aquí el fondo es claro.
   En :hover el overlay oscuro del propio botón devuelve el texto a blanco. */
.serv-btn-ghost {
  color: var(--brand-dark);
  border-color: var(--brand-dark);
}
.serv-btn-ghost:hover,
.serv-btn-ghost:active { color: var(--paper); }

/* ── Columna visual ──────────────────────────────────────── */
.serv-figure {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-2);
  aspect-ratio: 4 / 3;
}

.serv-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.serv-figure:hover img { transform: scale(1.04); }

.serv-cats {
  margin-top: 1.4em;
  background: var(--bg-2);
  border-radius: 14px;
  padding: 1.2em 1.4em;
}

.serv-block--alt .serv-cats { background: var(--paper); }

.serv-cats__title {
  margin: 0 0 0.7em;
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.serv-cats ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.serv-cats li + li { border-top: 1px solid rgba(0, 0, 0, 0.06); }

.serv-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.6em 0;
  color: var(--fuente);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}

.serv-cats a:hover {
  color: var(--brand);
  padding-left: 0.3em;
}

.serv-cats a i { font-size: 0.7rem; color: var(--brand); flex-shrink: 0; }

/* ── Franja de proceso ───────────────────────────────────── */
.serv-proceso {
  background-color: var(--brand-dark);
  padding: 4.5em 0;
}

.serv-proceso__head { max-width: 40em; margin-bottom: 2.8em; }

.serv-proceso__head h2 {
  margin: 0.35em 0 0.5em;
  color: var(--paper);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.serv-proceso__head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.75;
}

.serv-pasos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6em;
  counter-reset: paso;
}

.serv-paso {
  position: relative;
  padding: 1.6em 1.4em;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.serv-paso:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(236, 101, 39, 0.45);
  transform: translateY(-3px);
}

.serv-paso__num {
  position: absolute;
  top: -0.7em;
  left: 1.4em;
  width: 1.8em;
  height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 800;
}

.serv-paso > i {
  display: block;
  color: var(--brand);
  font-size: 1.4rem;
  margin: 0.5em 0 0.7em;
}

.serv-paso h3 {
  margin: 0 0 0.4em;
  color: var(--paper);
  font-size: 1rem;
  font-weight: 700;
}

.serv-paso p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem;
  line-height: 1.65;
}

/* ── Técnicas ────────────────────────────────────────────── */
.serv-tecnicas {
  background: var(--paper);
  padding: 4.5em 0;
  scroll-margin-top: 4.5em;
}

.serv-tecnicas__head { max-width: 42em; margin-bottom: 2.6em; }

.serv-tecnicas__head h2 {
  margin: 0.35em 0 0.5em;
  color: var(--brand-dark);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.serv-tecnicas__head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.serv-tec-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6em;
}

.serv-tec {
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.serv-tec:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.serv-tec__img {
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  overflow: hidden;
}

.serv-tec__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.serv-tec h3 {
  margin: 1em 1.2em 0.4em;
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 700;
}

.serv-tec p {
  margin: 0 1.2em 1.4em;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.65;
}

.serv-tecnicas__pie {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin: 2.2em 0 0;
  padding: 1.1em 1.3em;
  background: var(--bg);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.serv-tecnicas__pie i { color: var(--brand); margin-top: 0.2em; flex-shrink: 0; }

/* ── Preguntas frecuentes ────────────────────────────────── */
.serv-faq {
  background: var(--bg);
  padding: 4.5em 0;
}

.serv-faq__head { max-width: 40em; margin-bottom: 2em; }

.serv-faq__head h2 {
  margin: 0.35em 0 0;
  color: var(--brand-dark);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.serv-faq__mas { margin: 1.6em 0 0; }

/* Enlace con aspecto de texto sobre un <button> (abre el modal de FAQs). */
.serv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: gap 0.2s;
}

.serv-link:hover { gap: 0.8em; }

/* ── Cierre ──────────────────────────────────────────────── */
.serv-cierre {
  background-color: var(--brand-dark);
  padding: 4.5em 0;
  text-align: center;
}

.serv-cierre h2 {
  margin: 0 0 0.5em;
  color: var(--paper);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
}

.serv-cierre p {
  margin: 0 auto;
  max-width: 38em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.75;
}

.serv-cierre__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9em;
  margin-top: 2em;
}

/* ── Responsive ──────────────────────────────────────────── */
/* La columna visual acompaña a un texto bastante más alto; fijarla evita el
   hueco muerto que quedaba a su derecha en los bloques largos. */
@media (min-width: 1024px) {
  .serv-block__aside {
    position: sticky;
    top: 5.5em;
  }
}

@media (max-width: 1023px) {
  .serv-block__inner {
    grid-template-columns: 1fr;
    gap: 2.2em;
  }

  /* Con las etiquetas envueltas en varias filas, un índice pegajoso se comería
     media pantalla: aquí se queda como menú de salto al inicio de la página. */
  .serv-nav { position: static; }

  /*
   * En una sola columna el zigzag no aporta. La columna visual se disuelve
   * (display: contents) para poder intercalar sus dos piezas en el orden que
   * tiene sentido leyendo de arriba abajo:
   *
   *   foto → título y explicación → categorías del catálogo
   *
   * Sin esto, al llegar desde un enlace del pie se veían la foto y la caja de
   * categorías antes del título del servicio que se acababa de pulsar.
   */
  .serv-block__aside,
  .serv-block--alt .serv-block__aside { display: contents; }

  .serv-figure     { order: 1; }
  .serv-block__text,
  .serv-block--alt .serv-block__text { order: 2; }
  .serv-cats       { order: 3; margin-top: 0; }
}

@media (max-width: 599px) {
  .serv-hero { padding: 7em 0 2.5em; }
  .serv-hero__stats { gap: 1.6em; }

  .serv-block,
  .serv-proceso,
  .serv-tecnicas,
  .serv-faq,
  .serv-cierre { padding: 3em 0; }

  .serv-nav__track { padding-inline: 5%; }

  .serv-hero__inner,
  .serv-block__inner,
  .serv-proceso__inner,
  .serv-tecnicas__inner,
  .serv-faq__inner,
  .serv-cierre__inner { padding-inline: 5%; }

  .serv-block__cta .btn_,
  .serv-cierre__cta .btn_ { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .serv-figure img,
  .serv-tec,
  .serv-paso { transition: none; }
  .serv-figure:hover img { transform: none; }
}