/* Módulo «servicios»: mosaico de tarjetas (data.services) y el pack romántico (#pack).
   Mosaico: una foto grande (desayuno a la habitación), cuatro tarjetas grafito con icono y una foto pequeña
   (consigna). 3 columnas en escritorio, 2 en tableta y, en el móvil, foto, 2x2 de iconos y foto.
   Sin precios a la vista. Las tarjetas grafito llevan una luz suave que sigue al ratón (--mx, --my).
   index.html enlaza esta hoja dentro del propio bloque: sin JS se ve igual. */

#servicios { background: var(--negro, #000); color: var(--blanco, #fff); }

.mod--sv {
  --sv-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --sv-gap: clamp(10px, 1.2vw, 16px);
  color: var(--blanco, #fff);
  font-family: var(--f-text);
}

/* ---------- Mosaico ---------- */
.svb {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sv-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "desayuno desayuno recepcion"
    "desayuno desayuno parking"
    "wifi cuna consigna";
}
.svb__card[data-id="desayuno"] { grid-area: desayuno; }
.svb__card[data-id="recepcion"] { grid-area: recepcion; }
.svb__card[data-id="parking"] { grid-area: parking; }
.svb__card[data-id="wifi"] { grid-area: wifi; }
.svb__card[data-id="cuna"] { grid-area: cuna; }
.svb__card[data-id="consigna"] { grid-area: consigna; }

.svb__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: end; gap: 6px;
  min-height: clamp(210px, 17vw, 260px);
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--r-card, 24px);
  background: var(--grafito, #151515);
  border: 1px solid var(--linea-suave, rgba(255, 255, 255, 0.09));
  transition: border-color var(--d-med) var(--sv-ease), transform var(--d-med) var(--sv-ease);
}
/* Luz que sigue al ratón (servicios.js escribe --mx y --my; sin JS, arriba a la izquierda). */
.svb__card:not(.svb__card--foto)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 20%) var(--my, 0%), rgba(255, 255, 255, 0.09), transparent 60%);
  opacity: 0.6; transition: opacity var(--d-med) var(--sv-ease);
}
@media (hover: hover) {
  .svb__card:hover { border-color: rgba(255, 255, 255, 0.22); }
  .svb__card:not(.svb__card--foto):hover::before { opacity: 1; }
}
.svb__ico {
  position: absolute; top: clamp(22px, 2.2vw, 30px); left: clamp(22px, 2.2vw, 30px);
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #3a3a3a, #161616 70%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -12px rgba(0, 0, 0, 0.9);
}
.svb__ico .ico { width: 28px; height: 28px; stroke-width: 1.3; }
.svb__name {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-lg, 1.3125rem); line-height: 1.12; letter-spacing: -0.012em;
}
.svb__line { font-size: var(--t-sm, 0.9375rem); line-height: 1.45; color: var(--gris, rgba(255, 255, 255, 0.66)); max-width: 26rem; }

/* Tarjetas con foto: la foto a sangre y el texto abajo sobre un degradado. */
.svb__card--foto { border-color: transparent; background: #0d0d0d; }
.svb__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: var(--foto-filtro); transform: scale(1.001);
  transition: filter var(--d-foto, 700ms) var(--sv-ease), transform 1.4s var(--sv-ease);
}
.svb__card[data-id="desayuno"] .svb__img { object-position: 46% 40%; }
.svb__card--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0) 70%);
}
.svb__card--foto .svb__line { color: rgba(255, 255, 255, 0.82); }
.svb__card--big .svb__name { font-size: var(--t-2xl, 2.3125rem); line-height: 1.02; letter-spacing: -0.025em; }
.svb__card--big .svb__line { font-size: var(--t-md, 1.0625rem); }
@media (hover: hover) {
  .svb__card--foto:hover .svb__img { filter: var(--foto-filtro-activa); transform: scale(1.035); }
}
.svb__card--foto.is-lit .svb__img { filter: var(--foto-filtro-activa); }

/* ---------- Pack romántico ---------- */
/* Una tarjeta grande con la foto a sangre y el texto a la izquierda sobre un degradado negro. */
.pk {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: clamp(460px, 44vw, 640px);
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  border-radius: var(--r-panel, 36px);
  background: #0d0d0d;
  scroll-margin-top: calc(var(--header-h, 76px) + 24px);
}
/* Escritorio: la foto ocupa los dos tercios de la derecha y se funde con el negro por la izquierda;
   el texto va en el tercio libre y no tapa la botella. */
.pk__media {
  position: absolute; top: 0; right: 0; bottom: 0; left: 34%; z-index: -2; margin: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); mask-image: linear-gradient(90deg, transparent, #000 26%);
}
.pk__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  filter: var(--foto-filtro);
  transition: filter 900ms var(--sv-ease), transform 1.6s var(--sv-ease);
}
.pk::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 30%);
}
@media (hover: hover) { .pk:hover .pk__media img { filter: var(--foto-filtro-activa); transform: scale(1.02); } }
.pk.is-lit .pk__media img { filter: var(--foto-filtro-activa); }

.pk__body { display: grid; justify-items: start; max-width: 32rem; padding: clamp(28px, 4.4vw, 64px); }
.pk__title {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-4xl, clamp(2.5rem, 5.6vw, 4.1875rem)); line-height: 0.98; letter-spacing: -0.03em;
}
.pk__line { margin-top: 14px; font-size: var(--t-lg, 1.3125rem); font-weight: 500; line-height: 1.35; text-wrap: balance; }
.pk__note { margin-top: 6px; font-size: var(--t-md, 1.0625rem); line-height: 1.45; color: rgba(255, 255, 255, 0.74); }
.pk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(22px, 2.6vw, 32px); }
/* WhatsApp, pequeño y secundario: una píldora fina al lado de «Reservar». */
.pk__wa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill, 999px); border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: var(--t-sm, 0.9375rem); font-weight: 500; color: var(--blanco, #fff); text-decoration: none; white-space: nowrap;
  transition: border-color var(--d-fast) var(--sv-ease), background-color var(--d-fast) var(--sv-ease);
}
.pk__wa .ico--fill { width: 17px; height: 17px; }
@media (hover: hover) { .pk__wa:hover { border-color: var(--blanco, #fff); background: rgba(0, 0, 0, 0.45); } }
.pk__wa:focus-visible { outline: 2px solid var(--blanco, #fff); outline-offset: 3px; }

/* ---------- Tableta ---------- */
@media (max-width: 999.98px) {
  .svb {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "desayuno desayuno"
      "recepcion parking"
      "wifi cuna"
      "consigna consigna";
  }
  .svb__card--big { min-height: clamp(320px, 52vw, 460px); }
  .svb__card[data-id="consigna"] { min-height: clamp(220px, 34vw, 300px); }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .mod--sv { --sv-gap: 10px; }
  .svb__card { min-height: 0; padding: 18px; gap: 4px; border-radius: 20px; }
  .svb__card:not(.svb__card--foto) { padding-top: 76px; }
  .svb__ico { top: 18px; left: 18px; width: 44px; height: 44px; }
  .svb__ico .ico { width: 21px; height: 21px; }
  .svb__name { font-size: 1.0625rem; }
  .svb__line { font-size: 0.875rem; }
  .svb__card--big { min-height: 120vw; }
  .svb__card--big .svb__name { font-size: var(--t-xl, 1.75rem); }
  .svb__card[data-id="consigna"] { min-height: 62vw; }

  /* Móvil: la foto arriba, entera, y el texto debajo sobre el grafito (no tapa la botella). */
  .pk { min-height: 0; display: block; margin-top: 3.5rem; border-radius: 28px; background: var(--grafito, #151515); }
  .pk__media { position: relative; left: auto; z-index: 0; aspect-ratio: 1 / 1; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
  .pk__media img { object-position: 52% 50%; }
  .pk::after { display: none; }
  .pk__body { position: relative; margin-top: -48px; padding: 0 22px 24px; max-width: none; }
  .pk__title { font-size: clamp(2.3rem, 10.5vw, 2.75rem); }
  .pk__line { font-size: var(--t-md, 1.0625rem); }
  .pk__note { font-size: var(--t-sm, 0.9375rem); }
  .pk__actions { width: 100%; }
  .pk__actions > .btn { flex: 1 1 100%; }
  .pk__wa { margin-inline: auto; }
}
/* Móvil en horizontal: la foto no se come la pantalla. */
@media (max-height: 500px) and (pointer: coarse) {
  .pk__media { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .svb__img, .pk__media img, .svb__card, .svb__card::before { transition: none; }
  .svb__card--foto:hover .svb__img, .pk:hover .pk__media img { transform: none; }
}