/* ============================================================
   SERVICIOS PAGE — TODO ESTÁ PENSADO
   Apertura editorial silenciosa que vende la filosofía del
   servicio. Marca: negro profundo, marfil, dorado tenue.
   Cormorant Garamond + Inter. Mucho espacio negativo.
   Regla: un solo gesto gráfico (la línea dorada del detalle).

   Composición: HERO en dos grandes áreas en rejilla editorial.
   1) IZQUIERDA — identificación (SERVICIOS / 01 · SERVICIOS),
      declaración principal en dos líneas, la promesa de la
      estancia y la firma itálica dorada. El titular gobierna;
      la línea itálica funciona como acento, no como segundo
      titular. Al pie, cierre editorial con los servicios
      esenciales en tipografía mínima.
   2) DERECHA — pieza visual protagonista con lectura
      arquitectónica (interior con luz de ventana) y referencia
      editorial en la esquina inferior de la imagen.

   SECCIÓN 02 — lista editorial de servicios en filas horizontales
   (número dorado / nombre versalitas / descripción gris cálido),
   titular asimétrico a la izquierda con interludio fotográfico
   vertical y cierre itálico dorado "Lo esencial está cuidado.".

   SECCIÓN 03 — experiencia: cambio de ritmo hacia lo visual.
   Titular emocional y composición asimétrica de revista con dos
   piezas fotográficas verticales (principal centro/derecha ~47%,
   secundaria izquierda más pequeña y descendida), pies editoriales
   discretos y cierre itálico dorado "Cada detalle tiene un
   propósito.".

   SECCIÓN 04 — para quién: cuatro perfiles como piezas
   tipográficas independientes (nunca cards ni tabla) en una
   composición irregular con descensos y sangrías propios, pieza
   fotográfica vertical a la derecha (~33%) y cierre a dos voces.

   SECCIÓN 05 — cartago: el relato sale al exterior. Fotografía
   panorámica de gran formato con el bloque editorial de la ciudad
   a la derecha y descendido, referencias como líneas tipográficas
   finas (sin distancias no confirmadas) y frase de campaña a dos
   voces. Sin mapa: eso vive en contacto/ubicación.

   SECCIÓN 06 — reserva (cierre): último capítulo, la intención
   se vuelve acción sin agresión. Titular amplio ligeramente
   desplazado del centro con acento itálico dorado, un solo botón
   con borde dorado (hover: fondo dorado sutil, texto oscuro,
   flecha que avanza), enlace discreto de contacto y pieza
   fotográfica vertical muy integrada al negro detrás del texto.
   Detalles mínimos en los extremos inferiores. En tablet/móvil
   todo baja a una columna centrada.

   Entrada: cada elemento [data-sr] se revela escalonadamente con
   la clase .is-loaded que inyecta el script inline de la página.
   Los elementos son visibles por defecto; la animación solo
   embellece el arranque, nunca los oculta si el script falla.

   Seguridad horizontal:
   - Nunca width:100vw en internos.
   - Elementos absolutos contenidos por paddings.
   - overflow-x:clip como protección adicional.
   ============================================================ */

.srv-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  background-color: var(--color-black-absolute);
  overflow: hidden;
  overflow-x: clip;
}

/* --- Fondo: base negra + presencia cálida + textura papel + grano --- */

.srv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-black-absolute);
  background-image:
    radial-gradient(
      ellipse 55% 42% at 30% 62%,
      rgba(196, 168, 110, 0.04) 0%,
      rgba(196, 168, 110, 0.015) 42%,
      transparent 72%
    );
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.srv-hero.is-loaded .srv-hero__bg {
  opacity: 1;
}

/* Textura papel — casi imperceptible */
.srv-hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.003) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px;
  pointer-events: none;
}

/* Grano fino — cinematográfico */
.srv-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ===========================
   CONTENIDO — flujo editorial
   =========================== */

.srv-hero__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-container);
  min-height: 100svh;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + 44px) var(--grid-page-margin) clamp(112px, 13vh, 136px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --- Identificador editorial: SERVICIOS (superior izquierda) --- */

.srv-hero__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: clamp(32px, 4.5vh, 48px);
}

/* --- Numeración de publicación editorial (superior derecha) --- */

.srv-hero__index {
  position: absolute;
  top: calc(var(--navbar-height) + 44px);
  right: var(--grid-page-margin);
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* ===========================
   REJILLA — dos áreas editoriales
   =========================== */

.srv-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(48px, 6vw, 96px);
  width: 100%;
  margin-top: clamp(40px, 7vh, 64px);
}

/* ===========================
   COLUMNA IZQUIERDA — la promesa
   =========================== */

.srv-hero__content {
  max-width: 700px;
  padding-top: clamp(20px, 4vh, 40px);
}

/* Titular — reducido para equilibrar el peso visual de la
   columna. Dos líneas, la segunda como acento itálico. */
.srv-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.3vw, 3.6rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.srv-hero__title-line {
  display: block;
}

/* Acento, no segundo titular: ligeramente más pequeño y con un
   dorado desaturado. Se desplaza suavemente hacia el marco como
   continuidad del fotolibro. */
.srv-hero__title-line--em {
  margin-top: 0.12em;
  margin-left: clamp(1rem, 2.5vw, 2.75rem);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.45rem, 3.4vw, 2.9rem);
  color: #C0AE83;
}

.srv-hero__lede {
  margin-top: clamp(28px, 4.5vh, 44px);
  max-width: 460px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: var(--color-gray-warm);
}

/* --- Detalle editorial: firma. Línea dorada + frase en serif
   itálica. Mucho aire respecto al párrafo. --- */

.srv-hero__detail {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-top: clamp(56px, 9vh, 88px);
}

.srv-hero__detail-mark {
  flex: none;
  width: 36px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.85;
}

.srv-hero__detail-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: 0.01em;
  color: rgba(246, 242, 235, 0.92);
}

/* --- Cierre editorial al pie del hero: servicios esenciales en
   una línea tipográfica mínima. margin-top:auto lo ancla abajo y
   resuelve el espacio negro sobrante sin romper el aire. --- */

.srv-hero__foot {
  width: 100%;
  margin-top: auto;
  padding-top: clamp(28px, 4vh, 38px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.srv-hero__foot-label {
  flex: none;
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.38);
}

.srv-hero__foot-items {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.66);
  text-align: right;
}

/* ===========================
   COLUMNA DERECHA — pieza visual
   =========================== */

.srv-hero__frame {
  position: relative;
  width: clamp(300px, 30vw, 460px);
  margin-top: clamp(28px, 5vh, 48px);
}

/* Envoltorio clicable — toda la superficie invita a entrar */
.srv-hero__image-link {
  display: block;
  position: relative;
  text-decoration: none;
}

/* Superficie fotográfica — placeholder con lectura arquitectónica
   clara: pared cálida iluminada, ventana de piso a techo con
   montantes verticales y traviesa, luz de día diagonal y piso en
   sombra. Se percibe "alojamiento" sin dejar de ser oscura y
   elegante.
   @FOTO: para poner la fotografía real, sustituye las capas de
   background-image por url('../img/servicios-hero.jpg'); conserva
   el haz de luz (::before) y el grano (::after) si quieres
   atmósfera. La foto debe ser arquitectónica/interior real de
   Diana & Sans — vertical 4/5, oscura pero con suficiente
   contraste para que se lean materia, luz y volumen. */
.srv-hero__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #16120F;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 4px),
    radial-gradient(135% 125% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, transparent 37.6%, rgba(26, 20, 15, 0.55) 38%, rgba(26, 20, 15, 0.55) calc(38% + 2px), transparent calc(38% + 2px)),
    repeating-linear-gradient(90deg, rgba(26, 20, 15, 0.55) 0 2px, transparent 2px 62px),
    linear-gradient(0deg, rgba(31, 24, 18, 0.55) 0%, transparent 22%),
    linear-gradient(115deg, rgba(228, 198, 140, 0.34) 0%, rgba(214, 182, 124, 0.16) 32%, transparent 58%),
    radial-gradient(92% 68% at 30% 24%, rgba(230, 200, 142, 0.22) 0%, transparent 64%),
    linear-gradient(168deg, #4A3E32 0%, #33291F 46%, #181310 100%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.88) contrast(1.06) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transform: scale(1.04);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.srv-hero.is-loaded .srv-hero__image {
  transform: scale(1);
}

/* Haz de luz cálida entrando por una ventana — difuso, superior
   izquierda. Refuerza la lectura de interior real. */
.srv-hero__image::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -8%;
  width: 76%;
  height: 92%;
  background: linear-gradient(118deg, rgba(232, 202, 146, 0.26) 0%, rgba(232, 202, 146, 0.07) 46%, transparent 78%);
  filter: blur(22px);
  pointer-events: none;
}

/* Grano cinematográfico sutil sobre la superficie */
.srv-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Microinteracción — zoom sutil 1.03 al pasar el cursor */
.srv-hero__image-link:hover .srv-hero__image,
.srv-hero__image-link:focus-visible .srv-hero__image {
  transform: scale(1.03);
}

.srv-hero__image-link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- Caption / referencia editorial — esquina inferior izquierda
   de la imagen, sobre un fondo oscuro. Conecta con Galería. --- */

.srv-hero__caption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* ===========================
   ENTRADA CINEMATOGRÁFICA — lenta, escalonada
   Los elementos son visibles por defecto; la animación solo se
   dispara con .is-loaded, así las etiquetas editoriales nunca
   quedan ocultas aunque el script falle.
   =========================== */

.srv-hero [data-sr] {
  opacity: 1;
  transform: none;
}

.srv-hero.is-loaded [data-sr] {
  animation-name: srvReveal;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--sr-delay, 0s);
}

.srv-hero [data-sr="0"] { --sr-delay: 0.2s; }
.srv-hero [data-sr="1"] { --sr-delay: 0.4s; }
.srv-hero [data-sr="2"] { --sr-delay: 0.6s; }
.srv-hero [data-sr="3"] { --sr-delay: 0.8s; }
.srv-hero [data-sr="4"] { --sr-delay: 1s; }
.srv-hero [data-sr="5"] { --sr-delay: 1.2s; }
.srv-hero [data-sr="6"] { --sr-delay: 1.4s; }
.srv-hero [data-sr="7"] { --sr-delay: 1.6s; }

@keyframes srvReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SECCIÓN 02 — LA LISTA EDITORIAL
   "Todo lo que necesitas, sin tener que pedirlo."
   Filas horizontales amplias: número dorado / nombre en
   versalitas / descripción en gris cálido, separadas por
   líneas finísimas que ganan presencia al pasar el cursor.
   Composición asimétrica: titular ~40% a la izquierda, lista
   ~60% a la derecha arrancando más abajo. Mucho negro entre
   bloques. La sección es larga y pausada a propósito.
   ============================================================ */

.srv-services {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Un paso más profundo que --color-black-absolute (#0A0A0A):
     la sección respira en su propia penumbra, sin ruptura visual. */
  background-color: #080808;
  overflow-x: clip;
}

.srv-services__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(128px, 17vh, 208px) var(--grid-page-margin) clamp(120px, 16vh, 192px);
}

/* --- Cabecera editorial — label e índice, mismo lenguaje que el hero --- */

.srv-services__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.srv-services__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.srv-services__index {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* --- Composición asimétrica — titular 40% / lista 60% --- */

.srv-services__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  column-gap: clamp(56px, 7vw, 112px);
  margin-top: clamp(56px, 9vh, 104px);
}

/* Columna izquierda — titular, introducción e interludio fotográfico */

.srv-services__intro {
  max-width: 520px;
}

.srv-services__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.srv-services__title-line {
  display: block;
}

/* Acento itálico dorado — tercera línea, desplazada como en el hero */
.srv-services__title-accent {
  display: block;
  margin-top: 0.22em;
  margin-left: clamp(1rem, 2.2vw, 2.25rem);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.3rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  color: #C0AE83;
}

.srv-services__lede {
  margin-top: clamp(32px, 5vh, 52px);
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: var(--color-gray-warm);
}

/* Interludio fotográfico — bloque vertical que cierra la narrativa
   del titular: Titular → descripción → foto. 15-20% más grande y
   más cerca del texto para que la columna izquierda no flote.
   @FOTO: sustituir las capas de background-image por
   url('../img/servicios-detalle.jpg'). Fotografía real de un
   detalle del apartamento de Diana & Sans — habitación, sala,
   ventana o textura arquitectónica — vertical 3/4, muy oscura,
   luz cálida de tarde y tratamiento editorial. Conservar el grano
   (::after). */
.srv-services__figure {
  margin: clamp(32px, 4.5vh, 52px) 0 0 clamp(1rem, 2.2vw, 2.25rem);
  width: clamp(170px, 15vw, 256px);
}

/* Superficie fotográfica — placeholder con lectura de interior
   real: una ventana encendida al atardecer sobre pared cálida y,
   abajo, la masa en sombra de un mueble con su canto iluminado.
   Se lee como fotografía editorial, no como rectángulo decorativo. */
.srv-services__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #100D0B;
  background-image:
    /* Viñeta editorial */
    radial-gradient(120% 110% at 50% 42%, transparent 48%, rgba(0, 0, 0, 0.66) 100%),
    /* Montante central de la ventana */
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(16, 13, 10, 0.85) 50%, transparent calc(50% + 1px)),
    /* Cristal encendido al atardecer */
    linear-gradient(168deg, rgba(240, 210, 152, 0.5) 0%, rgba(216, 184, 128, 0.26) 55%, rgba(190, 160, 108, 0.1) 100%),
    /* Canto superior del mueble — línea cálida */
    linear-gradient(180deg, transparent calc(64% - 2px), rgba(226, 194, 138, 0.28) 64%, rgba(226, 194, 138, 0.05) calc(64% + 1px), transparent calc(64% + 2px)),
    /* Masa del mueble / zona baja en sombra profunda */
    linear-gradient(180deg, transparent 65%, rgba(14, 11, 9, 0.92) 78%, rgba(9, 7, 6, 0.98) 100%),
    /* Resplandor cálido de tarde sobre la pared */
    linear-gradient(115deg, rgba(214, 184, 126, 0.24) 0%, rgba(196, 168, 110, 0.09) 38%, transparent 62%),
    /* Pared cálida en penumbra descendente */
    linear-gradient(172deg, #372C22 0%, #211A14 54%, #0F0C0A 100%);
  background-size:
    cover,
    58% 44%,
    58% 44%,
    100% 100%,
    100% 100%,
    cover,
    cover;
  background-position:
    center,
    16% 10%,
    16% 10%,
    center,
    center,
    center,
    center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(1.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Grano finísimo — cohesión con la fotografía del hero */
.srv-services__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Lista editorial — filas horizontales, nunca cards --- */

.srv-services__listwrap {
  /* Tensión visual: la lista arranca más abajo que el titular */
  margin-top: clamp(48px, 8vh, 96px);
}

.srv-services__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-divider);
}

.srv-services__row {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(150px, 230px) 1fr;
  column-gap: clamp(20px, 2.5vw, 40px);
  align-items: baseline;
  padding: clamp(36px, 5.5vh, 56px) 0;
  border-bottom: 1px solid var(--color-divider);
  transition: border-color 600ms var(--ease-out);
}

/* La línea divisoria se extiende con un trazo dorado que se dibuja
   desde la izquierda; además el hairline gana un poco de presencia. */
.srv-services__row::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 168, 110, 0.35) 0%, rgba(196, 168, 110, 0.08) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out);
  pointer-events: none;
}

.srv-services__row:hover {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.srv-services__row:hover::after {
  transform: scaleX(1);
}

.srv-services__num {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  color: rgba(196, 168, 110, 0.55);
  transition: color 500ms var(--ease-out);
}

.srv-services__row:hover .srv-services__num {
  color: var(--color-gold);
}

.srv-services__name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: var(--text-caption-lh);
  color: var(--color-ivory);
  transform-origin: left center;
  transition: transform 500ms var(--ease-out);
  will-change: transform;
}

.srv-services__row:hover .srv-services__name {
  transform: scale(1.025);
}

.srv-services__desc {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
  transition: transform 500ms var(--ease-out), color 500ms var(--ease-out);
  will-change: transform;
}

.srv-services__row:hover .srv-services__desc {
  transform: translateX(6px);
  color: #B4B0A9;
}

/* --- Detalle editorial de cierre — bajo la lista, alineado con el
   comienzo de las filas. La marca funciona como raya editorial "—". --- */

.srv-services__closing {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: clamp(48px, 7vh, 80px);
}

.srv-services__closing-mark {
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.85;
}

.srv-services__closing-text {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  letter-spacing: 0.01em;
  color: #C0AE83;
}

/* ===========================
   SECCIÓN 02 — ENTRADA ESCALONADA
   Visible por defecto; la animación solo corre cuando la sección
   entra en pantalla (.is-revealed via IntersectionObserver).
   =========================== */

.srv-services [data-ssr] {
  opacity: 1;
  transform: none;
}

.srv-services.is-revealed [data-ssr] {
  animation-name: srvReveal;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--ssr-delay, 0s);
}

.srv-services [data-ssr="0"] { --ssr-delay: 0s; }
.srv-services [data-ssr="1"] { --ssr-delay: 0.15s; }
.srv-services [data-ssr="2"] { --ssr-delay: 0.3s; }
.srv-services [data-ssr="3"] { --ssr-delay: 0.5s; }
.srv-services [data-ssr="4"] { --ssr-delay: 0.65s; }
.srv-services [data-ssr="5"] { --ssr-delay: 0.85s; }
.srv-services [data-ssr="6"] { --ssr-delay: 1s; }
.srv-services [data-ssr="7"] { --ssr-delay: 1.15s; }
.srv-services [data-ssr="8"] { --ssr-delay: 1.3s; }
.srv-services [data-ssr="9"] { --ssr-delay: 1.45s; }
.srv-services [data-ssr="10"] { --ssr-delay: 1.6s; }
.srv-services [data-ssr="11"] { --ssr-delay: 1.8s; }

/* ============================================================
   SECCIÓN 03 — EXPERIENCIA
   "Lo importante no siempre se ve. Pero se siente."
   Cambio de ritmo: más visual, menos información. Composición
   asimétrica de revista con dos piezas fotográficas verticales
   de distinto tamaño — principal ~47% al centro/derecha,
   secundaria ~28% más abajo y desplazada a la izquierda—
   separadas por una columna de negro. Pies editoriales
   discretos bajo cada pieza. Cierre itálico dorado.
   ============================================================ */

.srv-exp {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Mismo negro profundo que la sección anterior: continuidad total */
  background-color: #080808;
  overflow-x: clip;
}

.srv-exp__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(96px, 13vh, 152px) var(--grid-page-margin) clamp(104px, 14vh, 160px);
}

/* --- Cabecera editorial --- */

.srv-exp__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.srv-exp__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.srv-exp__index {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* --- Titular emocional --- */

.srv-exp__intro {
  margin-top: clamp(48px, 8vh, 88px);
  max-width: 720px;
}

.srv-exp__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.srv-exp__title-line {
  display: block;
}

/* Acento itálico dorado — el gesto emocional de la sección */
.srv-exp__title-accent {
  display: block;
  margin-top: 0.22em;
  margin-left: clamp(1rem, 2.2vw, 2.25rem);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.4rem, 2.9vw, 2.5rem);
  line-height: 1.2;
  color: #C0AE83;
}

.srv-exp__lede {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: var(--color-gray-warm);
}

/* --- Galería asimétrica — rejilla de 12 columnas --- */

.srv-exp__gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 2.5vw, 40px);
  align-items: start;
  margin-top: clamp(56px, 8.5vh, 104px);
}

.srv-exp__piece {
  margin: 0;
}

/* Principal — protagonista, centro/derecha, ~55% del ancho */
.srv-exp__piece--main {
  grid-column: 6 / 13;
}

/* Secundaria — izquierda, claramente más pequeña y descendida:
   el desnivel de página de revista vive en este desfase */
.srv-exp__piece--secondary {
  grid-column: 1 / 5;
  margin-top: clamp(108px, 16.5vh, 200px);
}

/* Fotografías — estructura lista para las imágenes reales:
   basta con añadir assets/img/experiencia-principal.jpg y
   experiencia-detalle.jpg (interiores reales de Diana & Sans,
   verticales, oscuras, luz cálida, sin personas, misma sesión).
   Mientras no existan se muestra este placeholder discreto; al
   añadir la foto, <img> la cubre y el overlay (::before) más el
   grano (::after) se aplican solos para conservar el lenguaje. */

.srv-exp__photo {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out);
  will-change: transform;
}

/* Imagen real — cubre el placeholder en cuanto existe el archivo */
.srv-exp__photo-img {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay negro muy sutil — unifica cualquier fotografía con el
   negro profundo de la página */
.srv-exp__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-above);
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.18) 0%, rgba(8, 8, 8, 0.04) 42%, rgba(8, 8, 8, 0.3) 100%);
  pointer-events: none;
}

.srv-exp__piece--main .srv-exp__photo {
  aspect-ratio: 3 / 4;
}

.srv-exp__piece--secondary .srv-exp__photo {
  aspect-ratio: 2 / 3;
}

/* Principal (fallback) — masa cálida de atardecer sobre la pared,
   luz difusa arriba y zona baja en sombra profunda. Sin líneas
   duras: solo masas de luz, como una fotografía desenfocada. */
.srv-exp__photo--main {
  background-color: #0F0C0A;
  background-image:
    /* Viñeta cinematográfica */
    radial-gradient(130% 115% at 50% 40%, transparent 46%, rgba(0, 0, 0, 0.64) 100%),
    /* Masa de luz del ventanal — borde difuso, sin montantes */
    radial-gradient(closest-side, rgba(240, 210, 152, 0.4) 0%, rgba(216, 184, 128, 0.18) 58%, transparent 85%),
    /* Resplandor interior reflejado */
    linear-gradient(105deg, rgba(210, 180, 124, 0.14) 0%, rgba(196, 168, 110, 0.05) 36%, transparent 60%),
    /* Zona baja — muebles disueltos en sombra, transición suave */
    linear-gradient(180deg, transparent 56%, rgba(222, 190, 132, 0.07) 63%, rgba(20, 15, 11, 0.38) 70%, rgba(13, 10, 8, 0.92) 80%, rgba(8, 6, 5, 0.98) 100%),
    /* Pared cálida en penumbra */
    linear-gradient(170deg, #33291F 0%, #1F1812 52%, #0D0A08 100%);
  background-size:
    cover,
    84% 52%,
    cover,
    100% 100%,
    cover;
  background-position:
    center,
    50% 16%,
    center,
    center,
    center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(1.05) brightness(1);
}

/* Secundaria (fallback) — charco cálido de lámpara arriba a la
   derecha y superficie que se funde en sombra íntima */
.srv-exp__photo--secondary {
  background-color: #0E0B09;
  background-image:
    /* Viñeta íntima */
    radial-gradient(125% 115% at 42% 36%, transparent 44%, rgba(0, 0, 0, 0.68) 100%),
    /* Charco de luz de lámpara — difuso */
    radial-gradient(closest-side, rgba(238, 208, 150, 0.36) 0%, rgba(226, 192, 134, 0.14) 55%, transparent 80%),
    /* Lavado cálido ambiente */
    linear-gradient(115deg, rgba(206, 176, 122, 0.16) 0%, rgba(196, 168, 110, 0.06) 40%, transparent 64%),
    /* Superficie disuelta en sombra, transición progresiva */
    linear-gradient(180deg, transparent 54%, rgba(224, 192, 136, 0.06) 61%, rgba(16, 12, 9, 0.42) 68%, rgba(12, 9, 7, 0.94) 78%, rgba(7, 5, 4, 0.98) 100%),
    /* Base en penumbra */
    linear-gradient(168deg, #302619 0%, #1C1610 54%, #0C0908 100%);
  background-size:
    cover,
    64% 40%,
    cover,
    100% 100%,
    cover;
  background-position:
    center,
    68% 14%,
    center,
    center,
    center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(1.05) brightness(1);
}

/* Grano finísimo — por encima de imagen, overlay y todo */
.srv-exp__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Microinteracción — zoom máximo 1.03 + un punto más de luz */
@media (hover: hover) {
  .srv-exp__piece:hover .srv-exp__photo {
    transform: scale(1.03);
    filter: saturate(0.9) contrast(1.05) brightness(1.08);
  }
}

.srv-exp__piece:hover .srv-exp__photo,
.srv-exp__piece:hover .srv-exp__meta {
  transition-duration: 600ms;
}

/* --- Pie editorial — discreto, bajo cada pieza --- */

.srv-exp__meta {
  display: block;
  margin-top: clamp(10px, 1.5vh, 16px);
  transition: transform 600ms var(--ease-out);
}

@media (hover: hover) {
  .srv-exp__piece:hover .srv-exp__meta {
    transform: translateX(6px);
  }
}

.srv-exp__num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  color: rgba(196, 168, 110, 0.65);
}

.srv-exp__phrase {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

.srv-exp__note {
  display: block;
  margin-top: var(--space-4);
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
}

/* --- Detalle editorial de cierre --- */

.srv-exp__closing {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: clamp(80px, 11vh, 128px);
}

.srv-exp__closing-mark {
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.85;
}

.srv-exp__closing-text {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  letter-spacing: 0.01em;
  color: #C0AE83;
}

/* ===========================
   SECCIÓN 03 — ENTRADA ESCALONADA
   Visible por defecto; la animación corre al entrar en pantalla.
   =========================== */

.srv-exp [data-sx] {
  opacity: 1;
  transform: none;
}

.srv-exp.is-revealed [data-sx] {
  animation-name: srvReveal;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--sx-delay, 0s);
}

.srv-exp [data-sx="0"] { --sx-delay: 0s; }
.srv-exp [data-sx="1"] { --sx-delay: 0.15s; }
.srv-exp [data-sx="2"] { --sx-delay: 0.3s; }
.srv-exp [data-sx="3"] { --sx-delay: 0.5s; }
.srv-exp [data-sx="4"] { --sx-delay: 0.65s; }
.srv-exp [data-sx="5"] { --sx-delay: 0.85s; }
.srv-exp [data-sx="6"] { --sx-delay: 1.05s; }

/* ============================================================
   SECCIÓN 04 — PARA QUIÉN
   "Hay estancias para todos. Pero algunas se sienten hechas
   para ti." Cuatro perfiles como piezas tipográficas
   independientes en una composición irregular: columnas
   desiguales (5fr/6fr), descensos y sangrías distintos por
   pieza. A la derecha, pieza fotográfica vertical (~33%)
   descendida, que gana un punto de luz cuando el cursor recorre
   los perfiles. Cierre a dos voces: serif marfil + cursiva.
   ============================================================ */

.srv-per {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: #080808;
  overflow-x: clip;
}

.srv-per__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(96px, 13vh, 152px) var(--grid-page-margin) clamp(112px, 15vh, 168px);
}

/* --- Cabecera editorial --- */

.srv-per__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.srv-per__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.srv-per__index {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* --- Titular --- */

.srv-per__intro {
  margin-top: clamp(48px, 8vh, 88px);
  max-width: 760px;
}

.srv-per__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.srv-per__title-line {
  display: block;
}

.srv-per__title-accent {
  display: block;
  margin-top: 0.22em;
  margin-left: clamp(1rem, 2.2vw, 2.25rem);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.3rem, 2.6vw, 2.25rem);
  line-height: 1.25;
  color: #C0AE83;
}

.srv-per__lede {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: var(--color-gray-warm);
}

/* --- Cuerpo — perfiles a la izquierda (~65%), foto a la derecha.
   El gap contenido y el descenso calibrado de la pieza hacen que
   la foto conviva con los perfiles 02/04 en vez de flotar sola --- */

.srv-per__body {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(52px, 8vh, 96px);
}

/* Flujo de perfiles — columnas desiguales para evitar la tabla */

.srv-per__flow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: clamp(44px, 7.5vh, 84px);
}

.srv-per__item {
  position: relative;
  border-top: 1px solid var(--color-divider);
  padding-top: clamp(24px, 4vh, 36px);
}

.srv-per__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 168, 110, 0.35) 0%, rgba(196, 168, 110, 0.08) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out);
  pointer-events: none;
}

.srv-per__item:hover::after {
  transform: scaleX(1);
}

/* Desplazamientos irregulares — composición de revista:
   02 desciende respecto a 01; 03 se sangra hacia dentro;
   04 desciende claramente más que su pareja de fila */
.srv-per__item--02 {
  margin-top: clamp(40px, 6vh, 72px);
}

.srv-per__item--03 {
  padding-left: clamp(32px, 4vw, 72px);
  margin-top: clamp(16px, 3vh, 40px);
}

.srv-per__item--04 {
  margin-top: clamp(64px, 10vh, 112px);
}

.srv-per__num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  color: rgba(196, 168, 110, 0.55);
  transition: color 500ms var(--ease-out);
}

.srv-per__item:hover .srv-per__num {
  color: var(--color-gold);
}

.srv-per__name {
  margin: var(--space-12) 0 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-ivory);
  transition: transform 500ms var(--ease-out);
  will-change: transform;
}

.srv-per__item:hover .srv-per__name {
  transform: translateX(5px);
}

.srv-per__desc {
  margin: var(--space-12) 0 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-body-light);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
  transition: color 500ms var(--ease-out);
}

.srv-per__item:hover .srv-per__desc {
  color: #B4B0A9;
}

/* --- Pieza fotográfica — vertical grande, derecha, descendida --- */

/* --- Pieza fotográfica — vertical grande, derecha.
   El descenso calibrado la sienta al lado del bloque 02/04:
   deja de ser una columna independiente y pasa a formar parte
   de la composición --- */

.srv-per__figure {
  margin: clamp(96px, 15vh, 168px) 0 0;
}

/* Estructura lista para la imagen real: basta con añadir
   assets/img/perfiles.jpg (interior de Diana & Sans —escritorio,
   sala o dormitorio—, vertical 2/3, oscura, cálida, sin personas).
   Mientras no exista se muestra este placeholder discreto; al
   añadirla, el overlay (::before) y el grano (::after) se aplican
   solos para integrarla con el negro profundo. */

.srv-per__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out);
  will-change: transform, filter;
}

.srv-per__photo-img {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.srv-per__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-above);
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.18) 0%, rgba(8, 8, 8, 0.04) 42%, rgba(8, 8, 8, 0.3) 100%);
  pointer-events: none;
}

/* Fallback — interior arquitectónico: masa de luz cálida arriba a
   la izquierda, pared en penumbra y tercio inferior disuelto en
   sombra profunda. Solo masas de luz, sin líneas duras. */
.srv-per__photo {
  background-color: #0E0B09;
  background-image:
    /* Viñeta editorial */
    radial-gradient(125% 115% at 46% 38%, transparent 46%, rgba(0, 0, 0, 0.66) 100%),
    /* Masa de luz de ventana — difusa */
    radial-gradient(closest-side, rgba(238, 208, 150, 0.34) 0%, rgba(214, 182, 124, 0.14) 58%, transparent 84%),
    /* Resplandor suave reflejado en la pared */
    linear-gradient(112deg, rgba(210, 180, 124, 0.15) 0%, rgba(196, 168, 110, 0.05) 38%, transparent 62%),
    /* Zona baja — suelo y muebles disueltos en sombra */
    linear-gradient(180deg, transparent 58%, rgba(222, 190, 132, 0.06) 65%, rgba(18, 13, 10, 0.4) 72%, rgba(11, 8, 6, 0.94) 82%, rgba(7, 5, 4, 0.98) 100%),
    /* Pared cálida descendente */
    linear-gradient(171deg, #2F261D 0%, #1D1711 54%, #0C0908 100%);
  background-size:
    cover,
    88% 42%,
    cover,
    100% 100%,
    cover;
  background-position:
    center,
    32% 16%,
    center,
    center,
    center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(1.05);
}

/* Grano finísimo — por encima de imagen y overlay */
.srv-per__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Al recorrer los perfiles, la fotografía gana un punto de luz:
   la pieza responde sin protagonismo */
@media (hover: hover) {
  .srv-per__flow:hover ~ .srv-per__figure .srv-per__photo,
  .srv-per__flow:hover + .srv-per__figure .srv-per__photo {
    transform: scale(1.015);
    filter: saturate(0.9) contrast(1.05) brightness(1.06);
  }
}

/* --- Frase final — dos voces, pequeña y elegante --- */

.srv-per__closing {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  margin-top: clamp(76px, 11.5vh, 124px);
}

.srv-per__closing-mark {
  flex: none;
  width: 28px;
  height: 1px;
  margin-top: clamp(10px, 1.4vh, 14px);
  background: var(--color-gold);
  opacity: 0.85;
}

.srv-per__closing-line {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

.srv-per__closing-accent {
  margin: var(--space-4) 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  letter-spacing: 0.01em;
  color: #C0AE83;
}

/* ===========================
   SECCIÓN 04 — ENTRADA ESCALONADA
   Visible por defecto; la animación corre al entrar en pantalla.
   =========================== */

.srv-per [data-sp] {
  opacity: 1;
  transform: none;
}

.srv-per.is-revealed [data-sp] {
  animation-name: srvReveal;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--sp-delay, 0s);
}

.srv-per [data-sp="0"] { --sp-delay: 0s; }
.srv-per [data-sp="1"] { --sp-delay: 0.15s; }
.srv-per [data-sp="2"] { --sp-delay: 0.3s; }
.srv-per [data-sp="3"] { --sp-delay: 0.5s; }
.srv-per [data-sp="4"] { --sp-delay: 0.65s; }
.srv-per [data-sp="5"] { --sp-delay: 0.8s; }
.srv-per [data-sp="6"] { --sp-delay: 0.95s; }
.srv-per [data-sp="7"] { --sp-delay: 1.1s; }
.srv-per [data-sp="8"] { --sp-delay: 0.8s; }
.srv-per [data-sp="9"] { --sp-delay: 1.35s; }

/* ============================================================
   SECCIÓN 05 — CARTAGO
   "Tu estancia también se vive afuera."
   El relato sale al exterior: fotografía panorámica de gran
   formato (~60%) con el bloque editorial de la ciudad a su
   derecha y descendido. Tres referencias como líneas
   tipográficas finas —sin distancias que no estén confirmadas—.
   Cierre de campaña a dos voces: sans versalitas + serif itálica
   dorada. Sin mapa: eso pertenece a contacto/ubicación.
   ============================================================ */

.srv-ctg {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: #080808;
  overflow-x: clip;
}

.srv-ctg__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(80px, 10.5vh, 120px) var(--grid-page-margin) clamp(88px, 11.5vh, 128px);
}

/* --- Cabecera editorial — índice izquierda, label derecha --- */

.srv-ctg__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.srv-ctg__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.srv-ctg__index {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* --- Titular --- */

.srv-ctg__intro {
  margin-top: clamp(48px, 8vh, 88px);
  max-width: 760px;
}

.srv-ctg__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.srv-ctg__title-line {
  display: block;
}

.srv-ctg__title-accent {
  display: block;
  margin-top: 0.22em;
  margin-left: clamp(1rem, 2.2vw, 2.25rem);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.25rem, 2.5vw, 2.15rem);
  line-height: 1.25;
  color: #C0AE83;
}

.srv-ctg__lede {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: var(--color-gray-warm);
}

/* --- Escena — foto panorámica + bloque editorial descendido --- */

.srv-ctg__stage {
  display: grid;
  grid-template-columns: minmax(0, 28fr) minmax(0, 18fr);
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(48px, 7.5vh, 88px);
}

/* @FOTO: assets/img/cartago.jpg — Cartago o su entorno real,
   horizontal 3/2, luz cálida de tarde, composición cinematográfica
   y tonos oscuros y tierra. Arquitectura o paisaje reconocible,
   sin personas posando ni monumentos genéricos. Este es el momento
   de realidad visual de la página: el overlay se mantiene mínimo
   a propósito. Mientras no exista el archivo se muestra un
   placeholder; overlay (::before) y grano (::after) se aplican
   solos al añadirla. */

.srv-ctg__figure {
  margin: 0;
}

.srv-ctg__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out);
  will-change: transform, filter;
}

.srv-ctg__photo-img {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay mínimo — solo lo justo para asentar la foto sobre el
   negro sin apagarla */
.srv-ctg__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-above);
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.08) 0%, rgba(8, 8, 8, 0) 45%, rgba(8, 8, 8, 0.18) 100%);
  pointer-events: none;
}

/* Fallback — atardecer sobre el valle: bruma dorada en el horizonte
   y masa oscura de tejados/vegetación disolviéndose abajo. Solo
   luz y atmósfera, sin líneas duras. */
.srv-ctg__photo {
  background-color: #0D0B09;
  background-image:
    /* Viñeta cinematográfica — contenida */
    radial-gradient(130% 110% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.55) 100%),
    /* Bruma dorada del ocaso sobre el valle */
    radial-gradient(120% 60% at 50% 30%, rgba(230, 196, 136, 0.36) 0%, rgba(196, 168, 110, 0.14) 45%, transparent 75%),
    /* Lavado cálido lateral */
    linear-gradient(100deg, rgba(206, 176, 122, 0.16) 0%, transparent 55%),
    /* Silueta del pueblo y el terreno — masa difusa */
    linear-gradient(180deg, transparent 55%, rgba(16, 12, 9, 0.5) 66%, rgba(11, 8, 6, 0.88) 78%, rgba(6, 5, 4, 0.98) 100%),
    /* Cielo a tierra — base cálida descendente */
    linear-gradient(180deg, #281F17 0%, #1A1410 45%, #0E0B09 100%);
  background-size:
    cover,
    cover,
    cover,
    100% 100%,
    cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(1.05);
}

/* Grano finísimo */
.srv-ctg__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Microinteracción — zoom contenido + un punto de luz; el bloque
   de la ciudad se acerca 4px, como girando la página hacia él */
@media (hover: hover) {
  .srv-ctg__figure:hover .srv-ctg__photo {
    transform: scale(1.028);
    filter: saturate(0.9) contrast(1.05) brightness(1.06);
  }

  .srv-ctg__figure:hover + .srv-ctg__aside {
    transform: translateX(4px);
  }
}

.srv-ctg__aside {
  transition: transform 600ms var(--ease-out);
  margin-top: clamp(24px, 4vh, 56px);
}

.srv-ctg__place {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-ivory);
}

.srv-ctg__region {
  margin: var(--space-12) 0 0;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(196, 168, 110, 0.75);
}

/* Referencias — líneas editoriales finas, sin distancias que no
   estén confirmadas: solo el nombre y un guiño dorado */
.srv-ctg__refs {
  margin: clamp(28px, 4vh, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-divider);
}

.srv-ctg__ref {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: clamp(10px, 1.6vh, 14px) 0;
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-body-regular);
  letter-spacing: 0.04em;
  color: rgba(246, 242, 235, 0.88);
}

.srv-ctg__ref::before {
  content: '';
  flex: none;
  width: 16px;
  height: 1px;
  background: rgba(196, 168, 110, 0.55);
}

/* Distancia de cada lugar de interés — aparece a la derecha de la
   línea, en marfil tenue, solo cuando hay un valor confirmado. El
   campo vacío no ocupa espacio ni muestra nada: se rellena cuando se
   conozca la distancia real. Nunca inventamos cifras. */
.srv-ctg__ref > .srv-ctg__distance {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 168, 110, 0.75);
  white-space: nowrap;
}

/* Parapente — experiencia en preparación. Se muestra con la indicación
   honesta de que la alianza está por confirmar; al confirmarse el
   proveedor, basta quitar la clase .srv-ctg__ref--pending y ajustar el
   texto de la distancia. Permanece discreto, no invitacional. */
.srv-ctg__ref--pending > .srv-ctg__distance {
  color: rgba(246, 242, 235, 0.4);
}

.srv-ctg__note {
  margin: clamp(32px, 5vh, 52px) 0 0;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-body-light);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
}

/* --- Frase de campaña — dos voces, tipografía pura --- */

.srv-ctg__closing {
  margin-top: clamp(64px, 9vh, 104px);
}

.srv-ctg__campaign {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.45);
}

.srv-ctg__campaign-accent {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: 0.02em;
  color: #C0AE83;
}

/* ===========================
   SECCIÓN 05 — ENTRADA ESCALONADA
   Visible por defecto; la animación corre al entrar en pantalla.
   =========================== */

.srv-ctg [data-cg] {
  opacity: 1;
  transform: none;
}

.srv-ctg.is-revealed [data-cg] {
  animation-name: srvReveal;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--cg-delay, 0s);
}

.srv-ctg [data-cg="0"] { --cg-delay: 0s; }
.srv-ctg [data-cg="1"] { --cg-delay: 0.15s; }
.srv-ctg [data-cg="2"] { --cg-delay: 0.3s; }
.srv-ctg [data-cg="3"] { --cg-delay: 0.5s; }
.srv-ctg [data-cg="4"] { --cg-delay: 0.65s; }
.srv-ctg [data-cg="5"] { --cg-delay: 0.85s; }
.srv-ctg [data-cg="6"] { --cg-delay: 1.05s; }

/* ============================================================
   SECCIÓN 06 — RESERVA (CIERRE)
   "Quizás este sea tu próximo lugar. Nos vemos en Cartago."
   Último capítulo: la reserva como consecuencia natural, no
   como presión. Titular amplio ligeramente desplazado del
   centro para dejar respirar a la pieza fotográfica lateral,
   muy integrada al negro. Un solo botón con borde dorado y un
   enlace discreto de contacto. Detalles mínimos abajo.
   ============================================================ */

.srv-fin {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: #080808;
  overflow-x: clip;
}

.srv-fin__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + clamp(72px, 11vh, 120px)) var(--grid-page-margin) clamp(96px, 13vh, 144px);
}

/* --- Cabecera editorial --- */

.srv-fin__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.srv-fin__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.srv-fin__index {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* --- Escenario — contenido desplazado, foto lateral detrás --- */

.srv-fin__stage {
  position: relative;
  /* El contenido manda: poco aire tras la cabecera editorial */
  margin-top: clamp(16px, 3.5vh, 52px);
}

.srv-fin__content {
  position: relative;
  z-index: var(--z-above);
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
  /* Desplaza el bloque un pelín a la izquierda del centro para
     que la pieza fotográfica lateral respire — solo escritorio */
  padding-right: clamp(0px, 14vw, 220px);
}

.srv-fin__title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.srv-fin__title-line {
  display: block;
}

.srv-fin__accent {
  margin: clamp(20px, 3vh, 32px) 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.4rem, 2.9vw, 2.5rem);
  line-height: 1.2;
  color: #C0AE83;
}

.srv-fin__lede {
  margin: clamp(24px, 4vh, 40px) auto 0;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: var(--color-gray-warm);
}

/* --- Acciones — un solo botón protagonista + enlace discreto --- */

.srv-fin__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  margin-top: clamp(40px, 6vh, 64px);
}

.srv-fin__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  padding: clamp(18px, 2.4vh, 24px) clamp(36px, 4.5vw, 60px);
  border: 1px solid rgba(196, 168, 110, 0.7);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ivory);
  transition: background-color 450ms var(--ease-out), color 450ms var(--ease-out), border-color 450ms var(--ease-out);
}

.srv-fin__cta-arrow {
  transition: transform 450ms var(--ease-out);
}

.srv-fin__cta:hover,
.srv-fin__cta:focus-visible {
  /* Dorado suave, no plano: gana presencia sin gritar */
  background-color: rgba(196, 168, 110, 0.9);
  border-color: var(--color-gold);
  color: #16130F;
}

.srv-fin__cta:hover .srv-fin__cta-arrow,
.srv-fin__cta:focus-visible .srv-fin__cta-arrow {
  transform: translateX(5px);
}

.srv-fin__cta:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.srv-fin__write {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-gray-warm);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid transparent;
  transition: color 450ms var(--ease-out), border-color 450ms var(--ease-out);
}

.srv-fin__write-arrow {
  transition: transform 450ms var(--ease-out);
}

.srv-fin__write:hover,
.srv-fin__write:focus-visible {
  color: rgba(246, 242, 235, 0.85);
  border-bottom-color: rgba(196, 168, 110, 0.35);
}

.srv-fin__write:hover .srv-fin__write-arrow,
.srv-fin__write:focus-visible .srv-fin__write-arrow {
  transform: translateX(4px);
}

.srv-fin__write:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- Pieza fotográfica lateral — detrás del contenido, fundida
   con el negro. Zoom sutil al revelarse la sección --- */

.srv-fin__figure {
  position: absolute;
  top: clamp(32px, 8vh, 96px);
  /* Se acerca al bloque central sin invadir el texto */
  right: clamp(32px, 3.5vw, 48px);
  z-index: var(--z-base);
  margin: 0;
  width: clamp(200px, 21vw, 310px);
}

.srv-fin__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transform: scale(1.04);
  transition: transform 1600ms var(--ease-out);
  will-change: transform;
}

.srv-fin.is-revealed .srv-fin__photo {
  transform: scale(1);
}

/* @FOTO: assets/img/reserva.jpg — interior real de Diana & Sans
   (dormitorio de noche, sala con luz cálida o detalle
   arquitectónico), vertical 3/4, sin personas. Última imagen
   antes del footer: tratamiento más luminoso que en secciones
   anteriores — el fundido la integra al negro sin apagarla. */

.srv-fin__photo-img {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tratamiento luminoso — fundido ligero hacia el fondo, la foto
   respira más que en el resto de la página */
.srv-fin__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-above);
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.38) 0%, rgba(8, 8, 8, 0.06) 45%, rgba(8, 8, 8, 0.16) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.2) 0%, rgba(8, 8, 8, 0.06) 40%, rgba(8, 8, 8, 0.26) 100%);
  pointer-events: none;
}

/* Fallback — interior nocturno cálido y luminoso: masa de luz
   dorada protagonista arriba, sombra solo al pie */
.srv-fin__photo {
  background-color: #12100D;
  background-image:
    radial-gradient(125% 115% at 50% 40%, transparent 52%, rgba(0, 0, 0, 0.42) 100%),
    radial-gradient(closest-side, rgba(236, 206, 148, 0.4) 0%, rgba(214, 182, 126, 0.16) 55%, transparent 80%),
    linear-gradient(180deg, transparent 66%, rgba(20, 15, 11, 0.4) 78%, rgba(10, 8, 6, 0.85) 94%),
    linear-gradient(170deg, #382C21 0%, #241B14 52%, #100C09 100%);
  background-size:
    cover,
    84% 46%,
    100% 100%,
    cover;
  background-position:
    center,
    50% 18%,
    center,
    center;
  background-repeat: no-repeat;
  filter: saturate(0.9) contrast(1.03);
}

/* Grano finísimo */
.srv-fin__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Detalles editoriales en los extremos --- */

.srv-fin__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: clamp(88px, 13vh, 152px);
  /* Aire lateral extra para que la firma no roce el borde */
  padding-right: clamp(8px, 1vw, 18px);
}

.srv-fin__foot-left {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.35);
}

.srv-fin__legal {
  justify-content: flex-end;
  margin-top: var(--space-24);
}

@media (max-width: 768px) {
  .srv-fin__legal {
    justify-content: center;
  }
}

/* Firma de marca — mismo tratamiento tipográfico que los cierres
   de las secciones 02 y 03: hairline dorada + itálica serif */
.srv-fin__foot-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  letter-spacing: 0.01em;
  color: #C0AE83;
}

.srv-fin__foot-mark {
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.85;
}

/* --- Revelado escalonado — lento, como un último suspiro --- */

.srv-fin [data-fn] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--fn-delay, 0s),
    transform var(--dur-slow) var(--ease-out) var(--fn-delay, 0s);
}

.srv-fin.is-revealed [data-fn] {
  opacity: 1;
  transform: translateY(0);
}

.srv-fin [data-fn="0"] { --fn-delay: 0.05s; }
.srv-fin [data-fn="1"] { --fn-delay: 0.15s; }
.srv-fin [data-fn="2"] { --fn-delay: 0.25s; }
.srv-fin [data-fn="3"] { --fn-delay: 0.50s; }
.srv-fin [data-fn="4"] { --fn-delay: 0.70s; }
.srv-fin [data-fn="5"] { --fn-delay: 0.90s; }
.srv-fin [data-fn="6"] { --fn-delay: 1.00s; }
.srv-fin [data-fn="7"] { --fn-delay: 1.15s; }
.srv-fin [data-fn="8"] { --fn-delay: 1.25s; }

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .srv-hero__visual {
    padding-top: calc(var(--navbar-height) + 32px);
  }

  .srv-hero__index {
    top: calc(var(--navbar-height) + 32px);
  }

  .srv-hero__layout {
    gap: clamp(32px, 4.5vw, 48px);
  }

  .srv-hero__frame {
    width: clamp(260px, 34vw, 360px);
  }

  /* Sección 02 */
  .srv-services__inner {
    padding-top: calc(var(--navbar-height) + clamp(72px, 10vh, 112px));
    padding-bottom: clamp(96px, 12vh, 144px);
  }

  .srv-services__layout {
    column-gap: clamp(40px, 5vw, 64px);
  }

  .srv-services__figure {
    width: clamp(150px, 17vw, 208px);
  }

  .srv-services__row {
    grid-template-columns: 36px minmax(130px, 190px) 1fr;
    column-gap: var(--space-16);
  }

  /* Sección 03 */
  .srv-exp__inner {
    padding-top: calc(var(--navbar-height) + clamp(64px, 9vh, 96px));
    padding-bottom: clamp(96px, 13vh, 144px);
  }

  .srv-exp__piece--secondary {
    margin-top: clamp(80px, 13vh, 144px);
  }

  /* Sección 04 */
  .srv-per__inner {
    padding-top: calc(var(--navbar-height) + clamp(64px, 9vh, 96px));
    padding-bottom: clamp(88px, 12vh, 128px);
  }

  .srv-per__body {
    column-gap: clamp(32px, 4vw, 56px);
  }

  .srv-per__flow {
    column-gap: clamp(24px, 3vw, 48px);
  }

  .srv-per__item--03 {
    padding-left: clamp(20px, 3vw, 44px);
  }

  .srv-per__figure {
    margin-top: clamp(80px, 12vh, 136px);
  }

  /* Sección 05 */
  .srv-ctg__stage {
    column-gap: clamp(32px, 4vw, 56px);
  }

  /* Sección 06 — el desplazamiento desaparece y la foto lateral
     baja debajo del contenido, centrada */
  .srv-fin__content {
    padding-right: 0;
  }

  .srv-fin__figure {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 360px);
    margin: clamp(48px, 7vh, 64px) auto 0;
  }
}

/* ===========================
   MOBILE — ≤768px
   Composición propia: todo se apila, el titular es el protagonista.
   =========================== */

@media (max-width: 768px) {
  .srv-hero {
    min-height: 100svh;
    overflow-x: clip;
  }

  .srv-hero__visual {
    min-height: 100svh;
    padding: calc(var(--navbar-height) + 20px) clamp(20px, 6vw, 24px) 48px;
  }

  .srv-hero__index {
    position: absolute;
    top: calc(var(--navbar-height) + 20px);
    right: clamp(20px, 6vw, 24px);
  }

  .srv-hero__overline {
    margin-bottom: clamp(24px, 4vh, 32px);
  }

  .srv-hero__layout {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: clamp(32px, 6vh, 48px);
  }

  .srv-hero__content {
    max-width: 100%;
    padding-top: 0;
  }

  .srv-hero__title {
    width: 100%;
    font-size: clamp(1.7rem, 8vw, 2.3rem);
    line-height: 1.08;
  }

  .srv-hero__title-line--em {
    margin-top: 0.12em;
    margin-left: clamp(1rem, 5vw, 1.8rem);
    font-size: clamp(1.4rem, 6.4vw, 1.95rem);
  }

  .srv-hero__lede {
    margin-top: clamp(24px, 4vh, 32px);
    max-width: 100%;
  }

  .srv-hero__detail {
    margin-top: clamp(48px, 8vh, 64px);
  }

  .srv-hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .srv-hero__foot-items {
    text-align: left;
  }

  .srv-hero__frame {
    width: 100%;
    margin-top: clamp(48px, 8vh, 64px);
  }

  .srv-hero__image {
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .srv-hero__caption {
    left: 16px;
    bottom: 14px;
  }

  /* Sección 02 — una sola columna, filas verticales, sin cards */
  .srv-services__inner {
    padding-top: calc(var(--navbar-height) + clamp(56px, 9vh, 88px));
    padding-bottom: clamp(80px, 12vh, 112px);
  }

  .srv-services__head {
    flex-direction: column;
    gap: var(--space-12);
  }

  .srv-services__layout {
    grid-template-columns: 1fr;
    margin-top: clamp(40px, 6vh, 56px);
  }

  .srv-services__intro {
    max-width: 100%;
  }

  .srv-services__title {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }

  .srv-services__title-accent {
    margin-left: clamp(0.75rem, 4.5vw, 1.5rem);
    font-size: clamp(1.2rem, 5.5vw, 1.6rem);
  }

  .srv-services__lede {
    margin-top: clamp(24px, 4vh, 32px);
    max-width: 100%;
  }

  .srv-services__figure {
    margin-left: clamp(0.75rem, 4.5vw, 1.5rem);
    width: clamp(144px, 40vw, 192px);
  }

  .srv-services__listwrap {
    margin-top: clamp(56px, 9vh, 80px);
  }

  /* Fila vertical: número y nombre arriba, descripción debajo,
     el número ancla la lectura en la columna izquierda */
  .srv-services__row {
    grid-template-columns: minmax(36px, auto) 1fr;
    grid-template-areas:
      'num name'
      'num desc';
    row-gap: var(--space-16);
    padding: clamp(32px, 5vh, 44px) 0;
  }

  .srv-services__num {
    grid-area: num;
    align-self: start;
    padding-top: 3px;
  }

  .srv-services__name {
    grid-area: name;
  }

  .srv-services__desc {
    grid-area: desc;
    max-width: 52ch;
  }

  .srv-services__closing {
    margin-top: clamp(72px, 11vh, 104px);
  }

  /* Sección 03 — una sola columna: titular → principal → secundaria */
  .srv-exp__inner {
    padding-top: calc(var(--navbar-height) + clamp(56px, 9vh, 88px));
    padding-bottom: clamp(88px, 13vh, 120px);
  }

  .srv-exp__head {
    flex-direction: column;
    gap: var(--space-12);
  }

  .srv-exp__intro {
    margin-top: clamp(40px, 6vh, 56px);
    max-width: 100%;
  }

  .srv-exp__title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .srv-exp__title-accent {
    margin-left: clamp(0.75rem, 4.5vw, 1.5rem);
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
  }

  .srv-exp__lede {
    margin-top: clamp(24px, 4vh, 32px);
    max-width: 100%;
  }

  .srv-exp__gallery {
    grid-template-columns: 1fr;
    margin-top: clamp(48px, 7vh, 64px);
  }

  .srv-exp__piece--main,
  .srv-exp__piece--secondary {
    grid-column: 1 / -1;
  }

  /* La secundaria conserva su carácter: más estrecha y descendida,
     nunca convertida en card ni centrada */
  .srv-exp__piece--secondary {
    width: min(100%, 380px);
    margin-top: clamp(56px, 9vh, 80px);
  }

  .srv-exp__closing {
    margin-top: clamp(64px, 10vh, 88px);
  }

  /* Sección 04 — una sola columna: titular → foto → perfiles */
  .srv-per__inner {
    padding-top: calc(var(--navbar-height) + clamp(56px, 9vh, 88px));
    padding-bottom: clamp(80px, 12vh, 112px);
  }

  .srv-per__head {
    flex-direction: column;
    gap: var(--space-12);
  }

  .srv-per__intro {
    margin-top: clamp(40px, 6vh, 56px);
    max-width: 100%;
  }

  .srv-per__title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .srv-per__title-accent {
    margin-left: clamp(0.75rem, 4.5vw, 1.5rem);
    font-size: clamp(1.2rem, 5.5vw, 1.7rem);
  }

  .srv-per__lede {
    margin-top: clamp(24px, 4vh, 32px);
    max-width: 100%;
  }

  .srv-per__body {
    display: flex;
    flex-direction: column;
    margin-top: clamp(48px, 7vh, 64px);
  }

  /* La fotografía sube: queda entre el texto introductorio y los
     perfiles, como pide la jerarquía móvil */
  .srv-per__figure {
    order: -1;
    width: min(100%, 460px);
    margin-top: 0;
  }

  .srv-per__flow {
    grid-template-columns: 1fr;
    row-gap: clamp(48px, 8vh, 72px);
    margin-top: clamp(56px, 9vh, 80px);
  }

  /* En línea vertical desaparecen los desniveles: jerarquía limpia */
  .srv-per__item--02,
  .srv-per__item--03,
  .srv-per__item--04 {
    margin-top: 0;
  }

  .srv-per__item--03 {
    padding-left: 0;
  }

  .srv-per__desc {
    max-width: 52ch;
  }

  .srv-per__closing {
    margin-top: clamp(72px, 11vh, 104px);
  }

  /* Sección 05 — una sola columna: titular → foto → ciudad → frase */
  .srv-ctg__inner {
    padding-top: calc(var(--navbar-height) + clamp(56px, 9vh, 88px));
    padding-bottom: clamp(80px, 12vh, 112px);
  }

  .srv-ctg__head {
    flex-direction: column;
    gap: var(--space-12);
  }

  .srv-ctg__intro {
    margin-top: clamp(40px, 6vh, 56px);
    max-width: 100%;
  }

  .srv-ctg__title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .srv-ctg__title-accent {
    margin-left: clamp(0.75rem, 4.5vw, 1.5rem);
    font-size: clamp(1.15rem, 5vw, 1.6rem);
  }

  .srv-ctg__lede {
    margin-top: clamp(24px, 4vh, 32px);
    max-width: 100%;
  }

  .srv-ctg__stage {
    grid-template-columns: 1fr;
    margin-top: clamp(48px, 7vh, 64px);
  }

  .srv-ctg__aside {
    margin-top: clamp(32px, 5vh, 48px);
  }

  /* Puntos de interés en móvil: el texto largo envuelve sin cortar
     y la distancia, si aparece, baja a una línea propia */
  .srv-ctg__ref {
    flex-wrap: wrap;
    row-gap: var(--space-4);
    column-gap: var(--space-16);
  }

  .srv-ctg__ref > .srv-ctg__distance {
    margin-left: 0;
    white-space: normal;
  }

  .srv-ctg__closing {
    margin-top: clamp(64px, 10vh, 96px);
  }

  /* Sección 06 — una sola columna: titular → lede → botón →
     enlace → foto → detalles. El botón, siempre a la vista */
  .srv-fin__inner {
    padding-top: calc(var(--navbar-height) + clamp(56px, 9vh, 88px));
    padding-bottom: clamp(80px, 12vh, 112px);
  }

  .srv-fin__head {
    flex-direction: column;
    gap: var(--space-12);
  }

  .srv-fin__stage {
    margin-top: clamp(28px, 4.5vh, 44px);
  }

  .srv-fin__title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .srv-fin__accent {
    margin-top: var(--space-16);
    font-size: clamp(1.15rem, 5vw, 1.6rem);
  }

  .srv-fin__lede {
    margin-top: clamp(20px, 3.5vh, 28px);
    max-width: 100%;
  }

  .srv-fin__actions {
    margin-top: clamp(32px, 5vh, 44px);
    width: 100%;
  }

  .srv-fin__cta {
    width: min(100%, 320px);
    justify-content: center;
    padding: clamp(16px, 2.2vh, 20px) var(--space-24);
    letter-spacing: 0.22em;
  }

  .srv-fin__figure {
    width: min(100%, 300px);
    margin-top: clamp(40px, 6vh, 56px);
  }

  .srv-fin__foot {
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    margin-top: clamp(48px, 8vh, 72px);
    text-align: center;
  }
}

/* ===========================
   SMALL MOBILE — ≤480px
   =========================== */

@media (max-width: 480px) {
  .srv-hero__visual {
    padding-left: clamp(20px, 6.25vw, 24px);
    padding-right: clamp(20px, 6.25vw, 24px);
  }

  .srv-hero__index {
    font-size: 0.4375rem;
  }
}

/* ===========================
   REDUCED MOTION
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .srv-hero [data-sr] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .srv-hero__image,
  .srv-hero__image-link:hover .srv-hero__image,
  .srv-hero__image-link:focus-visible .srv-hero__image {
    transform: none !important;
    transition: none !important;
  }

  .srv-services [data-ssr] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .srv-services__row::after,
  .srv-services__row,
  .srv-services__num,
  .srv-services__name,
  .srv-services__desc {
    transition: none !important;
  }

  .srv-services__row:hover .srv-services__name,
  .srv-services__row:hover .srv-services__desc {
    transform: none !important;
  }

  .srv-exp [data-sx] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .srv-exp__photo,
  .srv-exp__meta {
    transition: none !important;
  }

  .srv-exp__piece:hover .srv-exp__photo {
    transform: none !important;
    filter: saturate(0.88) contrast(1.05) brightness(1) !important;
  }

  .srv-exp__piece:hover .srv-exp__meta {
    transform: none !important;
  }

  .srv-per [data-sp] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .srv-per__item::after,
  .srv-per__num,
  .srv-per__name,
  .srv-per__desc,
  .srv-per__photo {
    transition: none !important;
  }

  .srv-per__item:hover .srv-per__name {
    transform: none !important;
  }

  .srv-per__flow:hover ~ .srv-per__figure .srv-per__photo,
  .srv-per__flow:hover + .srv-per__figure .srv-per__photo {
    transform: none !important;
    filter: saturate(0.88) contrast(1.05) !important;
  }

  .srv-ctg [data-cg] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .srv-ctg__photo,
  .srv-ctg__aside {
    transition: none !important;
  }

  .srv-ctg__figure:hover .srv-ctg__photo {
    transform: none !important;
    filter: saturate(0.88) contrast(1.05) !important;
  }

  .srv-ctg__figure:hover + .srv-ctg__aside {
    transform: none !important;
  }

  .srv-fin [data-fn] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .srv-fin__photo,
  .srv-fin__cta,
  .srv-fin__cta-arrow,
  .srv-fin__write,
  .srv-fin__write-arrow {
    transition: none !important;
  }

  .srv-fin__photo {
    transform: none !important;
  }
}