@charset "UTF-8";
/* =========================================================
   RIU RAU RENTALS — SERVICIOS (página madre, solo propietarios)

   Movimiento propio de la página: una RETÍCULA DE PLANO que respira. No es la
   aurora de la portada, ni las curvas de nivel del listado (orgánicas), ni las
   franjas de luz de «Sobre nosotros». Es ortogonal y medida, porque esta es la
   página de quien tiene una casa y está echando cuentas.

   Mobile-first. El bloque de escritorio va al final, a partir de 900px.
   ========================================================= */

.page-servicios {
  --hair:   rgba(58, 46, 18, .13);
  --hair-n: rgba(255, 238, 207, .17);
  --txt-n:  rgba(255, 238, 207, .78);
}

.v-wrap {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================================================
   0 · EL FONDO — la retícula
   Dos mallas a distinta escala y velocidad: la de delante marca el módulo y la
   de detrás da profundidad. Se mueven con translate3d (GPU), nunca con
   background-position, que repinta en cada fotograma.
   ========================================================= */
.v-plano {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Se apaga hacia abajo: la zona noche es opaca y no debe verse asomar. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 52%, rgba(0, 0, 0, 0) 88%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 52%, rgba(0, 0, 0, 0) 88%);
}
.v-plano-malla,
.v-plano-cotas {
  position: absolute;
  inset: -30%;
  will-change: transform, opacity;
}
/* Malla fina: el módulo pequeño. */
.v-plano-malla {
  background-image:
    repeating-linear-gradient(0deg,  rgba(146, 93, 0, .07) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, rgba(146, 93, 0, .07) 0 1px, transparent 1px 100%);
  background-size: 46px 46px;
  animation: vDeriva 150s linear infinite, vRespira 26s ease-in-out infinite alternate;
}
/* Malla gruesa: el módulo grande, más tenue y más lenta. Dos velocidades es lo
   que hace que se lea como profundidad y no como un papel cuadriculado. */
.v-plano-cotas {
  background-image:
    repeating-linear-gradient(0deg,  rgba(146, 93, 0, .055) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, rgba(146, 93, 0, .055) 0 1px, transparent 1px 100%);
  background-size: 230px 230px;
  animation: vDerivaLenta 210s linear infinite, vRespira 34s ease-in-out infinite alternate-reverse;
}
@keyframes vDeriva      { to { transform: translate3d(46px, 46px, 0); } }
@keyframes vDerivaLenta { to { transform: translate3d(-230px, 115px, 0); } }
@keyframes vRespira     { from { opacity: .55; } to { opacity: 1; } }

/* =========================================================
   1 · LA PREGUNTA
   Sin foto de portada a propósito: esta página no cuenta una historia, plantea
   una decisión. Y las páginas de servicio de hoy no tienen ni una foto propia
   que merezca abrir (regla de la casa: si no hay foto buena, no se pone una
   cualquiera).
   ========================================================= */
.v-head {
  padding-top: calc(var(--header-h) + clamp(34px, 11vw, 74px));
  padding-bottom: clamp(30px, 8vw, 54px);
}
.v-h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.45rem, 10.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--mostaza);
}
.v-entrada {
  margin: 22px 0 0;
  max-width: 34ch;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--tinta-soft);
}

/* Frase de apoyo junto al título de sección: en escritorio ocupa la columna
   derecha, que si no se queda vacía al lado de un título grande. */
.v-apoyo {
  margin: 18px 0 0;
  max-width: 38ch;
  font-size: .96rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--tinta-soft);
}

/* Títulos de sección. */
.v-h2 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.85rem, 7.4vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.016em;
  color: var(--tinta);
}
.v-h2--n { color: var(--crema); }
.kicker--n { color: rgba(255, 238, 207, .62); }
.kicker--n .kicker-line { background: rgba(255, 238, 207, .38); }

/* =========================================================
   2 · LAS CUATRO VÍAS
   Filas, no tarjetas: sin caja, sin sombra y sin icono. Manda la tipografía.
   ========================================================= */
.v-esc {
  padding-top: clamp(26px, 8vw, 52px);
  padding-bottom: clamp(40px, 11vw, 78px);
}

.v-lista {
  list-style: none;
  margin: clamp(26px, 7vw, 44px) 0 0;
  padding: 0;
}
.v-via {
  position: relative;
  padding: clamp(26px, 7vw, 38px) 0;
  border-top: 1px solid var(--hair);
}
.v-via:last-child { border-bottom: 1px solid var(--hair); }

/* El enlace cubre toda la fila: así se puede tocar en cualquier punto sin
   meter un <a> alrededor de encabezados y párrafos. */
.v-via-todo {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.v-via-n {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--mostaza);
  opacity: .5;
}
/* La voz del propietario. Es una cita, y se lee como tal. */
.v-dice {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.32rem, 5.6vw, 1.62rem);
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--mostaza);
}
/* El nombre del servicio: etiqueta, no titular. Colgado de una línea fina. */
.v-via-t {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinta);
}
.v-via-d {
  margin: 12px 0 0;
  max-width: 42ch;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--tinta-soft);
}
.v-via-mas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mostaza);
}
/* Flecha en círculo de hairline: dice «esto se pulsa» mejor que un subrayado y
   sin añadir otra línea. Mismo recurso que en la página madre de propiedades. */
.v-flecha {
  position: relative;
  width: 30px; height: 30px;
  border: 1px solid rgba(146, 93, 0, .36);
  border-radius: 50%;
  flex: none;
  transition: background-color .28s var(--ease-out), border-color .28s var(--ease-out);
}
.v-flecha::before,
.v-flecha::after {
  content: "";
  position: absolute;
  background: var(--mostaza);
  transition: background-color .28s var(--ease-out);
}
.v-flecha::before { top: 50%; left: 9px; width: 11px; height: 1px; transform: translateY(-50%); }
.v-flecha::after {
  top: 50%; right: 9px;
  width: 6px; height: 6px;
  border-top: 1px solid var(--mostaza);
  border-right: 1px solid var(--mostaza);
  background: none;
  transform: translateY(-50%) rotate(45deg);
}

/* =========================================================
   3 · QUÉ HAY DENTRO DE LA GESTIÓN
   ========================================================= */
.v-dentro { padding-bottom: clamp(60px, 16vw, 110px); }
.v-tareas { margin-top: clamp(24px, 7vw, 40px); }
.v-tarea {
  padding: clamp(20px, 5.5vw, 26px) 0;
  border-top: 1px solid var(--hair);
}
.v-tarea:last-child { border-bottom: 1px solid var(--hair); }
.v-tarea-t {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.v-tarea-d {
  margin: 9px 0 0;
  max-width: 44ch;
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--tinta-soft);
}

/* =========================================================
   4 · LA NOCHE
   Arranca transparente para no cortar la retícula de golpe (mismo criterio que
   en «Sobre nosotros» con las franjas de luz).
   ========================================================= */
.page-servicios .night {
  position: relative;
  background: linear-gradient(180deg,
    rgba(251, 243, 225, 0) 0px,
    rgba(251, 243, 225, .78) 24px,
    #E7E7D9 48px,
    #BCD2CE 72px,
    #7FAEB0 98px,
    #35838D 126px,
    #146E78 154px,
    #11626C 22%,
    #0E5560 50%,
    #0C4A55 76%,
    #0B414B 100%);
}
/* El horizonte de esta página es una LÍNEA DE COTA: la marca del plano que dice
   «esto mide esto». Cierra el registro del fondo y separa el día de la noche. */
.v-horizonte {
  position: relative;
  height: 74px;
  pointer-events: none;
}
.v-horizonte::before {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(146, 93, 0, 0),
    rgba(146, 93, 0, .34) 18%,
    rgba(146, 93, 0, .34) 82%,
    rgba(146, 93, 0, 0));
}
/* Los topes de la cota, uno a cada lado. */
.v-horizonte::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: calc(50% - 6px);
  height: 13px;
  border-left: 1px solid rgba(146, 93, 0, .26);
  border-right: 1px solid rgba(146, 93, 0, .26);
}

/* =========================================================
   5 · EL AÑO
   ========================================================= */
.v-anio { padding-bottom: clamp(52px, 13vw, 90px); }
.v-anio-txt {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.68;
  color: var(--txt-n);
}

/* Los doce meses. No hay cifras de ocupación (no se inventan): lo único que se
   marca es qué meses son sol de invierno, que es lo que la marca trabaja. */
.v-meses {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin: clamp(30px, 8vw, 44px) 0 0;
  padding: 0;
  align-items: end;
  height: 128px;
}
.v-mes {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.v-mes-barra {
  width: 100%;
  border-radius: 2px 2px 0 0;
  /* Casi fantasma: julio y agosto son los más altos y no deben robar la vista. */
  background: rgba(255, 238, 207, .11);
  transform-origin: bottom;
  transform: scaleY(.28);
  transition: transform .9s var(--ease-out), background-color .9s var(--ease-out);
  height: 100%;
}
.v-mes--sol .v-mes-barra {
  background: linear-gradient(180deg, var(--oro), rgba(224, 166, 60, .62));
}
.v-mes-l {
  margin-top: 9px;
  opacity: .55;
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .08em;
  color: rgba(255, 238, 207, .5);
}
.v-mes--sol .v-mes-l { color: var(--oro); opacity: 1; }
/* Estado de reposo y entrada: las barras crecen cuando la sección entra. */
.js .v-meses .v-mes-barra { transform: scaleY(.06); }
.js .v-meses.is-in .v-mes-barra { transform: scaleY(var(--alto, .3)); }

.v-meses-pie {
  margin: 16px 0 0;
  max-width: 40ch;
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 238, 207, .56);
}

/* =========================================================
   6 · PREGUNTAS
   <details> nativo: se abre sin JS, funciona con teclado y el texto está en la
   página aunque esté plegado (cuenta para el buscador).
   ========================================================= */
.v-faq { padding-bottom: clamp(52px, 13vw, 90px); }
.v-faq-lista { margin-top: clamp(24px, 7vw, 40px); }
.v-faq-p { border-top: 1px solid var(--hair-n); }
.v-faq-p:last-child { border-bottom: 1px solid var(--hair-n); }
.v-faq-p > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.32;
  color: var(--crema);
}
.v-faq-p > summary::-webkit-details-marker { display: none; }
.v-faq-mas {
  position: absolute;
  right: 2px; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
}
.v-faq-mas::before,
.v-faq-mas::after {
  content: "";
  position: absolute;
  background: var(--oro);
  transition: transform .34s var(--ease-out), opacity .34s var(--ease-out);
}
.v-faq-mas::before { top: 6px; left: 0; width: 13px; height: 1px; }
.v-faq-mas::after  { left: 6px; top: 0; width: 1px; height: 13px; }
.v-faq-p[open] .v-faq-mas::after { transform: scaleY(0); opacity: 0; }
.v-faq-p > p {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: .94rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--txt-n);
}

/* =========================================================
   7 · EL CIERRE
   ========================================================= */
.v-cierre {
  padding-bottom: clamp(60px, 16vw, 104px);
  text-align: left;
}
.v-cierre-d {
  margin: 20px 0 0;
  max-width: 40ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.68;
  color: var(--txt-n);
}
.v-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 15px 22px;
  border-radius: 999px;
  background: var(--crema);
  color: var(--tinta);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .16s var(--ease-out);
}
.v-cta:active { transform: scale(.97); }
.v-cta .v-flecha { border-color: rgba(58, 46, 18, .3); }
.v-cta .v-flecha::before { background: var(--tinta); }
.v-cta .v-flecha::after { border-color: var(--tinta); }
.v-cierre-nota {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 238, 207, .5);
}

/* El pie va dentro de la noche, como en la ficha y en «Sobre nosotros». */
.page-servicios .site-footer { background: transparent; }

/* =========================================================
   ESCRITORIO — a partir de 900px
   No es el móvil ensanchado: cambia la composición.
   ========================================================= */
@media (min-width: 900px) {

  .v-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: end;
    padding-top: calc(var(--header-h) + clamp(70px, 8vw, 118px));
    padding-bottom: clamp(50px, 6vw, 88px);
  }
  .v-head .kicker { grid-column: 1 / -1; }
  .v-h1 { font-size: clamp(3.4rem, 5.4vw, 5.2rem); }
  .v-entrada {
    margin: 0 0 10px;
    max-width: 40ch;
    font-size: 1.12rem;
  }

  .v-h2 { font-size: clamp(2.4rem, 3.4vw, 3.4rem); }

  /* Cabecera de sección: título a la izquierda y frase a su base, a la
     derecha. Sin esto el título grande dejaba media pantalla vacía. */
  .v-esc, .v-dentro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: end;
  }
  .v-esc > .kicker, .v-dentro > .kicker { grid-column: 1 / -1; }
  .v-esc > .v-h2, .v-dentro > .v-h2 { grid-column: 1; }
  .v-apoyo {
    grid-column: 2;
    margin: 0 0 8px;
    max-width: 40ch;
    font-size: 1.04rem;
  }
  .v-lista, .v-tareas { grid-column: 1 / -1; }

  /* --- Las vías: fila editorial, como las de propietarios de la portada --- */
  .v-via {
    display: grid;
    grid-template-columns: 76px 1fr 1.12fr 52px;
    gap: clamp(24px, 3vw, 54px);
    align-items: start;
    padding: clamp(36px, 3.4vw, 52px) 0;
  }
  .v-via-n {
    font-size: .74rem;
    padding-top: 6px;
    opacity: .42;
  }
  .v-via-txt { display: contents; }
  .v-dice {
    grid-column: 2;
    margin: 0;
    font-size: clamp(1.6rem, 2.1vw, 2.15rem);
    line-height: 1.16;
  }
  .v-via-t {
    grid-column: 2;
    margin: 18px 0 0;
    align-self: start;
  }
  .v-via-d {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: 6px 0 0;
    max-width: 46ch;
    font-size: 1.02rem;
    line-height: 1.68;
  }
  .v-via-mas {
    grid-column: 4;
    grid-row: 1 / 3;
    margin: 0;
    justify-self: end;
    /* En escritorio basta la flecha: el texto lo dice ya la fila entera. */
    font-size: 0;
    gap: 0;
  }

  /* La línea de arriba se enciende en oro al pasar, como en la portada. */
  .v-via::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--oro), rgba(224, 166, 60, .1));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease-out);
  }

  /* --- Las tareas: cuatro columnas --- */
  .v-tareas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(22px, 2.6vw, 44px);
    border-top: 1px solid var(--hair);
    padding-top: clamp(26px, 3vw, 42px);
  }
  .v-tarea { padding: 0; border: 0; }
  .v-tarea:last-child { border: 0; }
  .v-tarea-t { font-size: 1.32rem; }
  .v-tarea-d { font-size: .98rem; }

  /* --- El año: dos celdas, nada de repartir filas a mano --- */
  .v-horizonte { height: 108px; }
  .v-anio {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: center;
  }
  .v-anio-txt { margin-top: 26px; font-size: 1.06rem; }
  .v-meses { height: 230px; gap: 8px; margin: 0; }
  .v-mes-l { font-size: .6rem; margin-top: 12px; }
  .v-meses-pie { margin-top: 20px; }

  /* --- Preguntas: cabecera a un lado y la lista al otro ---
     Con auto-fit salían TRES columnas a 1680 y dejaban de leerse como una
     lista; y el título se quedaba solo con la mitad derecha vacía. */
  .v-faq {
    display: grid;
    grid-template-columns: .82fr 2fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: start;
  }
  .v-faq-lista {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(36px, 4vw, 72px);
  }
  .v-faq-p > summary { font-size: 1.1rem; }

  /* --- Cierre a dos columnas: el botón no queda colgando --- */
  .v-cierre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: start;
  }
  .v-cierre .v-h2 { grid-column: 1; grid-row: 1; }
  .v-cierre-d { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.06rem; }
  /* El boton pegado a su titulo, no al fondo de la celda: con align-items:end
     se descolgaba casi 200px del h2 y parecia otro bloque. */
  .v-cta { grid-column: 1; grid-row: 2; margin-top: 26px; font-size: .78rem; justify-self: start; align-self: start; }
  .v-cierre-nota { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
}

/* =========================================================
   HOVER — solo con ratón de verdad
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .v-via:hover::before { transform: scaleX(1); }
  .v-via:hover .v-flecha {
    background: var(--mostaza);
    border-color: var(--mostaza);
  }
  .v-via:hover .v-flecha::before { background: var(--crema); }
  .v-via:hover .v-flecha::after { border-color: var(--crema); }
  .v-cta:hover { transform: translateY(-2px); }
  .v-faq-p > summary:hover { color: #fff; }
}

/* =========================================================
   REDUCED MOTION
   Menos y más suave, no cero: se mantiene lo que ayuda a entender.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .v-plano-malla,
  .v-plano-cotas { animation: none; }
  .js .v-meses .v-mes-barra,
  .js .v-meses.is-in .v-mes-barra {
    transform: scaleY(var(--alto, .3));
    transition: none;
  }
  .v-flecha,
  .v-cta { transition: none; }
}

/* Solo para lectores de pantalla: el gráfico de los meses es visual (doce
   letras sueltas no dicen nada), así que el dato va además en una frase. */
.v-solo-voz {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}