@charset "UTF-8";
/* =========================================================
   RIU RAU RENTALS — CONTACTO

   Movimiento propio de la página: LA SEÑAL. Anillos concéntricos muy tenues
   que salen de un punto y se apagan, una y otra vez, despacio. No es la aurora
   de la portada, ni las curvas de nivel del listado, ni las franjas de luz de
   «Sobre nosotros», ni la retícula de Servicios.

   Por qué esa forma y no otra: es EL MISMO CÍRCULO que marca la zona de cada
   casa en el mapa de su ficha. Aquí marca dónde estamos nosotros. La misma
   figura con otro significado es lo que hace que esta página sea de la familia
   sin ser una copia de ninguna.

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

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

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

/* =========================================================
   0 · EL FONDO — la señal
   Cinco anillos desfasados sobre el mismo centro. Se animan con transform y
   opacity (GPU); nunca con width/height, que obligan a recalcular la caja en
   cada fotograma. Muy lentos y muy tenues a propósito: si se nota que algo se
   mueve, está mal.
   ========================================================= */
.k-senal {
  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, .78) 46%, rgba(0, 0, 0, 0) 82%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .78) 46%, rgba(0, 0, 0, 0) 82%);
}
/* El punto del que sale todo: arriba y a la derecha, fuera de la columna de
   texto, para que los anillos crucen la página en diagonal y no por detrás de
   lo que se está leyendo. */
.k-anillo {
  position: absolute;
  top: 6%;
  left: 78%;
  width: 78vmax;
  height: 78vmax;
  margin: -39vmax 0 0 -39vmax;
  border: 1px solid rgba(146, 93, 0, .5);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.06);
  will-change: transform, opacity;
  animation: kSenal 26s linear infinite;
}
.k-anillo:nth-child(2) { animation-delay: -5.2s; }
.k-anillo:nth-child(3) { animation-delay: -10.4s; }
.k-anillo:nth-child(4) { animation-delay: -15.6s; }
.k-anillo:nth-child(5) { animation-delay: -20.8s; }

@keyframes kSenal {
  0%   { transform: scale(.06); opacity: 0; }
  14%  { opacity: .3; }
  70%  { opacity: .12; }
  100% { transform: scale(1); opacity: 0; }
}

/* El centro, fijo: el punto desde el que se emite. Es el mismo mostaza del
   círculo del mapa. */
.k-foco {
  position: absolute;
  top: 6%;
  left: 78%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(146, 93, 0, .34);
}

/* =========================================================
   1 · LA CABECERA
   ========================================================= */
.k-head {
  padding-top: calc(var(--header-h) + clamp(34px, 11vw, 74px));
  padding-bottom: clamp(26px, 7vw, 46px);
}
.k-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);
}
.k-entrada {
  margin: 22px 0 0;
  max-width: 34ch;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--tinta-soft);
}

/* Títulos de sección. */
.k-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);
}
.k-h2--n   { color: var(--crema); }
.kicker--n { color: rgba(255, 238, 207, .95); }

/* La flecha, el único icono de estas páginas junto al volver. */
.k-flecha {
  display: inline-block;
  width: 16px; height: 9px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .5s var(--ease-out);
}

/* =========================================================
   2 · LAS TRES VÍAS
   Sin cajas ni iconos: hairline arriba, el dato en Playfair y el enlace en
   versalitas. Es la doctrina de la casa desde el rediseño de la ficha.
   ========================================================= */
.k-vias { padding-bottom: clamp(44px, 12vw, 78px); }

.k-via-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.k-via {
  position: relative;
  padding: clamp(24px, 6vw, 34px) 0;
  border-top: 1px solid var(--hair);
}
.k-via:last-child { border-bottom: 1px solid var(--hair); }

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

/* El enlace cubre la fila entera: se pulsa en cualquier parte. */
.k-via-todo {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.k-via-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mostaza-soft);
}
.k-via-t {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.65rem, 6.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--tinta);
  width: fit-content;
}
/* El dato de contacto en mono: es un número, no una frase. */
.k-via-v {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--mostaza);
  word-break: break-word;
}
/* Una vía con varias acciones (dos números y el WhatsApp) no puede usar la
   capa que cubre la fila entera: cada dato es su propio enlace. El subrayado
   fino los distingue de un dato que solo se lee. */
.k-via-v a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(146, 93, 0, .3);
  padding-bottom: 2px;
  transition: border-color .35s var(--ease-out);
}
.k-via-v--dos a {
  display: block;
  width: fit-content;
}
.k-via-v--dos a + a { margin-top: 9px; }
a.k-via-ir { text-decoration: none; }

.k-via-d {
  margin: 12px 0 0;
  max-width: 40ch;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.64;
  color: var(--tinta-soft);
}
.k-via-ir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mostaza);
}

/* Frase de apoyo junto a un 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. */
.k-apoyo {
  margin: 18px 0 0;
  max-width: 38ch;
  font-size: .96rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--tinta-soft);
}

/* =========================================================
   3 · LAS TRES PUERTAS
   ========================================================= */
.k-puertas { padding-bottom: clamp(50px, 13vw, 86px); }

.k-puerta-lista { margin-top: clamp(28px, 8vw, 46px); }

.k-puerta {
  position: relative;
  padding: clamp(26px, 7vw, 36px) 0;
  border-top: 1px solid var(--hair);
}
.k-puerta:last-child { border-bottom: 1px solid var(--hair); }
.k-puerta::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 166, 60, .9), rgba(224, 166, 60, .18));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-out);
}
.k-puerta-todo { position: absolute; inset: 0; z-index: 2; }

.k-puerta-n {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--mostaza-soft);
}
.k-puerta-t {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 6.4vw, 1.95rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--tinta);
  width: fit-content;
}
.k-puerta-d {
  margin: 12px 0 0;
  max-width: 44ch;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.64;
  color: var(--tinta-soft);
}
/* El umbral: versalitas + flecha en círculo de hairline. Es lo que dice «esto
   se pulsa» sin botón y sin depender del ratón (en el móvil no hay hover). */
.k-puerta-ir {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mostaza);
}
.k-puerta-ir .k-flecha,
.k-via-ir .k-flecha {
  width: 30px; height: 30px;
  border: 1px solid rgba(146, 93, 0, .34);
  border-radius: 50%;
  background: none;
  -webkit-mask: none; mask: none;
  position: relative;
  transition: background .45s var(--ease-out), border-color .45s var(--ease-out);
}
.k-puerta-ir .k-flecha::after,
.k-via-ir .k-flecha::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 8px;
  margin: -4px 0 0 -6.5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .5s var(--ease-out);
}

/* =========================================================
   4 · LA NOCHE
   Arranca transparente para no cortar los anillos de golpe (mismo criterio que
   en Servicios con la retícula y en «Sobre nosotros» con las franjas de luz).
   ========================================================= */
/* Las paradas van comprimidas respecto a las de Servicios (que llegaban a teal
   pleno a los 154px) porque aquí el primer texto de la noche cae mucho antes.
   MEDIDO, no calculado a ojo: con el degradado largo, el antetítulo «Escríbenos»
   caía sobre el teal pálido con un contraste de 1.38:1, o sea ilegible.
   Se comprueba con herramientas/mide-noche-contacto.js. */
.page-contacto .night {
  position: relative;
  background: linear-gradient(180deg,
    rgba(251, 243, 225, 0) 0px,
    rgba(251, 243, 225, .78) 18px,
    #E7E7D9 36px,
    #BCD2CE 54px,
    #7FAEB0 74px,
    #35838D 96px,
    #146E78 118px,
    #11626C 22%,
    #0E5560 50%,
    #0C4A55 76%,
    #0B414B 100%);
}
.page-contacto .site-footer { background: transparent; }

/* El horizonte de esta página es un ÚLTIMO ANILLO, el que ya no se cierra:
   cierra el registro del fondo y separa el día de la noche.

   Su altura NO es decorativa: es el sitio que necesita el degradado para
   ocurrir. Por debajo de ~140px el primer texto de la noche cae sobre el teal
   pálido y deja de leerse. Eso no es hueco muerto: es el cambio de registro, y
   se lee como un horizonte. */
.k-horizonte {
  position: relative;
  height: 150px;
  pointer-events: none;
  overflow: hidden;
}
.k-horizonte::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(146, 93, 0, .26);
  border-radius: 50%;
}

/* =========================================================
   5 · EL FORMULARIO
   Sobre la noche y en cristal: el mismo material del buscador del hero y del
   formulario de propietarios, para que se reconozca como «esto es de ellos».
   ========================================================= */
.k-form-sec { padding-bottom: clamp(56px, 14vw, 96px); }

.k-form-apoyo {
  margin: 18px 0 0;
  max-width: 40ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--txt-n);
}

.k-form {
  margin-top: clamp(28px, 8vw, 44px);
  padding: clamp(22px, 6vw, 34px);
  background: rgba(11, 48, 54, .42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hair-n);
  border-radius: 4px;
}

/* El campo trampa: invisible para las personas, presente para los robots.
   No se usa display:none porque algunos lo detectan. */
.k-trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.k-campo { margin-top: 22px; }
.k-campo:first-of-type { margin-top: 0; }

.k-campo label {
  display: block;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 238, 207, .66);
}
.k-opt {
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(255, 238, 207, .38);
}

/* Campos sin caja: una línea fina debajo, como el buscador del hero y el
   filtro del catálogo. */
.k-campo input,
.k-campo select,
.k-campo textarea {
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--crema);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair-n);
  border-radius: 0;
  transition: border-color .4s var(--ease-out);
  -webkit-appearance: none;
          appearance: none;
}
.k-campo textarea { resize: vertical; line-height: 1.6; }
.k-campo input:focus,
.k-campo select:focus,
.k-campo textarea:focus {
  outline: none;
  border-bottom-color: var(--oro);
}
.k-campo input::placeholder,
.k-campo textarea::placeholder { color: rgba(255, 238, 207, .3); }

/* El desplegable: la flecha se dibuja aparte porque appearance:none se lleva
   la nativa por delante. */
.k-campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%23FFEECF' stroke-opacity='.6' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
  padding-right: 24px;
  cursor: pointer;
}
.k-campo select option { color: #16323a; background: #FBF3E1; }

/* El calendario nativo: su icono viene oscuro y sobre la noche no se ve. */
.k-campo input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .5;
  cursor: pointer;
}

.k-error {
  display: none;
  margin: 8px 0 0;
  font-size: .8rem;
  font-weight: 300;
  color: #F0B9A0;
}
.k-campo.k-mal input,
.k-campo.k-mal textarea { border-bottom-color: #F0B9A0; }
.k-campo.k-mal .k-error { display: block; }

.k-fila { display: grid; gap: 22px; margin-top: 22px; }
/* Dentro de una fila separa el gap, no el margen: con `first-of-type` solo el
   primer campo se quedaba sin margen y el de al lado bajaba 22px, así que en
   escritorio las dos etiquetas de la misma fila no estaban a la misma altura. */
.k-fila > .k-campo { margin-top: 0; }

/* Entrada y salida son UN rango, no dos campos sueltos: van juntas también en
   el móvil. Además de leerse mejor, el formulario se acorta una fila entera, y
   con nueve campos eso se nota. «dd/mm/aaaa» cabe de sobra en media columna. */
.k-fila--fechas { grid-template-columns: 1fr 1fr; gap: 18px; }
.k-fila--fechas .k-campo { margin-top: 0; }
/* Las personas no son parte del rango: a su propia línea. */
.k-fila--fechas .k-campo:nth-child(3) { grid-column: 1 / -1; margin-top: 4px; }

/* --- El aviso legal --- */
.k-legal { margin-top: 28px; }
.k-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.k-check input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.k-check-caja {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--hair-n);
  border-radius: 2px;
  position: relative;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.k-check input:checked + .k-check-caja {
  background: var(--oro);
  border-color: var(--oro);
}
.k-check input:checked + .k-check-caja::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #16323a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.k-check input:focus-visible + .k-check-caja {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}
.k-check-txt {
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--txt-n);
}
.k-check-txt a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }
.k-error--legal { margin-left: 30px; }
.k-legal.k-mal .k-error--legal { display: block; }
.k-legal.k-mal .k-check-caja { border-color: #F0B9A0; }

.k-legal-nota {
  margin: 12px 0 0 30px;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 238, 207, .5);
}

/* --- El botón --- */
.k-enviar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 15px 28px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #16323a;
  background: var(--crema);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.k-enviar:disabled { opacity: .55; cursor: default; }

.k-form-error {
  margin: 18px 0 0;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.6;
  color: #F0B9A0;
}
.k-form-error a { color: var(--crema); }

/* --- El estado de éxito --- */
.k-gracias {
  margin-top: clamp(28px, 8vw, 44px);
  padding: clamp(26px, 7vw, 40px);
  background: rgba(11, 48, 54, .42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hair-n);
  border-radius: 4px;
}
.k-gracias-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}
.k-gracias-t {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  line-height: 1.12;
  color: var(--crema);
}
.k-gracias-d {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--txt-n);
}
.k-gracias-d a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   6 · DÓNDE ESTAMOS
   ========================================================= */
.k-donde { padding-bottom: clamp(50px, 13vw, 86px); }

.k-donde-d {
  margin: 18px 0 0;
  max-width: 40ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--txt-n);
}
.k-donde-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--crema);
}
.k-donde-link .k-flecha { color: var(--oro); }

.k-mapa {
  list-style: none;
  margin: clamp(28px, 8vw, 40px) 0 0;
  padding: 0;
}
.k-lugar {
  display: flex;
  flex-wrap: wrap;          /* la zona baja a su propia línea */
  align-items: baseline;
  gap: 0 14px;
  padding: 15px 0;
  border-top: 1px solid var(--hair-n);
}
.k-lugar:last-child { border-bottom: 1px solid var(--hair-n); }
.k-lugar-n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.24rem;
  color: var(--crema);
}
/* Las zonas: es lo que convierte una lista de cuatro municipios en contenido
   útil, y lo único de esta página que da palabras de sitio de verdad. */
.k-lugar-z {
  /* Con flex-basis y no con min-width: min-width:100% dentro de un flex con
     gap da 100% MÁS el gap, y se sale por la derecha. */
  flex: 0 0 100%;
  order: 3;
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 238, 207, .5);
}
.k-lugar-c {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: rgba(255, 238, 207, .55);
  white-space: nowrap;
}

/* =========================================================
   7 · PREGUNTAS
   <details> nativo: se abre sin JS, funciona con teclado y el texto está en la
   página aunque esté plegado.
   ========================================================= */
.k-faq { padding-bottom: clamp(56px, 14vw, 92px); }

.k-faq-lista { margin-top: clamp(26px, 7vw, 40px); }

.k-faq-p {
  border-top: 1px solid var(--hair-n);
  padding: 0;
}
.k-faq-p:last-child { border-bottom: 1px solid var(--hair-n); }

.k-faq-p > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--crema);
  cursor: pointer;
  list-style: none;
}
.k-faq-p > summary::-webkit-details-marker { display: none; }

/* El «+» que se convierte en «−». */
.k-faq-mas {
  flex: none;
  margin-left: auto;
  width: 15px; height: 15px;
  position: relative;
}
.k-faq-mas::before,
.k-faq-mas::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 15px; height: 1px;
  margin-top: -.5px;
  background: var(--oro);
  transition: transform .4s var(--ease-out);
}
.k-faq-mas::after { transform: rotate(90deg); }
.k-faq-p[open] .k-faq-mas::after { transform: rotate(0deg); }

.k-faq-p > p {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--txt-n);
}
.k-faq-p > p a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   HOVER — solo donde hay ratón de verdad.
   ========================================================= */
@media (hover: hover) {
  .k-via:hover::before,
  .k-puerta:hover::before { transform: scaleX(1); }

  .k-via:hover .k-via-t,
  .k-puerta:hover .k-puerta-t { color: var(--mostaza); }

  .k-via-v a:hover { border-bottom-color: var(--mostaza); }
  .k-via:hover .k-flecha,
  .k-puerta:hover .k-flecha {
    background: rgba(146, 93, 0, .1);
    border-color: rgba(146, 93, 0, .6);
  }
  .k-via:hover .k-flecha::after,
  .k-puerta:hover .k-flecha::after { transform: translateX(3px); }

  .k-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  }
  .k-donde-link:hover .k-flecha { transform: translateX(4px); }
  .k-faq-p > summary:hover { color: #fff; }
}

/* =========================================================
   ESCRITORIO — a partir de 900px.
   No es el móvil ensanchado: cada bloque se recompone para llenar el ancho con
   intención, que es la corrección que Alex ha pedido tres veces en otras
   páginas.
   ========================================================= */
@media (min-width: 900px) {

  .k-head {
    padding-top: calc(var(--header-h) + clamp(60px, 9vw, 112px));
    padding-bottom: clamp(44px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: end;
  }
  .k-head .kicker { grid-column: 1 / -1; }
  .k-h1 { font-size: clamp(3.1rem, 5vw, 4.6rem); }
  .k-entrada { margin: 0 0 8px; font-size: 1.12rem; max-width: 40ch; }

  .k-h2 { font-size: clamp(2.1rem, 3.2vw, 2.9rem); }

  /* --- Las vías: tres columnas, que es como se comparan de un vistazo --- */
  .k-vias { padding-bottom: clamp(70px, 8vw, 118px); }
  .k-via-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 clamp(30px, 3.4vw, 60px);
  }
  .k-via {
    padding: 30px 0 34px;
    border-bottom: 1px solid var(--hair);
    /* Los tres enlaces, a la misma altura. Con min-height en la descripción
       había que acertar el número de líneas: en cuanto una tiene dos y las
       otras tres, el enlace de esa columna sube y se ve. Con el enlace empujado
       abajo da igual lo que mida cada texto. */
    display: flex;
    flex-direction: column;
  }
  .k-via-ir { margin-top: auto; padding-top: 18px; }
  .k-via-t { font-size: clamp(1.75rem, 2.3vw, 2.1rem); }

  /* --- Las puertas: cabecera a un lado, las tres al otro --- */
  .k-puerta-cab {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: end;
  }
  .k-puerta-cab .kicker { grid-column: 1 / -1; }
  .k-apoyo { margin: 0 0 6px; font-size: 1.02rem; }
  .k-puerta-lista { margin-top: clamp(30px, 4vw, 54px); }
  /* El horizonte ya aporta 190px de aire: aquí no hace falta tanto. */
  .k-puertas { padding-bottom: clamp(40px, 5vw, 70px); }
  .k-puerta {
    display: grid;
    grid-template-columns: 62px 1fr 1.05fr 44px;
    align-items: start;
    gap: 0 clamp(20px, 2.4vw, 40px);
    padding: 30px 0;
  }
  .k-puerta-n { grid-column: 1; margin-top: 8px; }
  .k-puerta-t { grid-column: 2; margin-top: 0; font-size: clamp(1.5rem, 1.9vw, 1.85rem); }
  .k-puerta-d { grid-column: 3; margin-top: 0; font-size: .95rem; }
  .k-puerta-ir {
    grid-column: 4;
    margin-top: 0;
    justify-self: end;
    /* En escritorio manda la flecha: el texto ya lo dice el título. */
    font-size: 0;
    letter-spacing: 0;
    gap: 0;
  }

  /* --- El formulario: cabecera a la izquierda, campos a la derecha --- */
  .k-form-sec {
    display: grid;
    grid-template-columns: .82fr 2fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: start;
    padding-bottom: clamp(70px, 9vw, 118px);
  }
  .k-form-cab { position: sticky; top: calc(var(--header-h) + 30px); }
  .k-form { margin-top: 0; padding: clamp(34px, 3.2vw, 52px); }
  .k-gracias { margin-top: 0; padding: clamp(40px, 4vw, 60px); }

  .k-fila { grid-template-columns: 1fr 1fr; gap: 26px clamp(26px, 3vw, 46px); }
  .k-fila--fechas { grid-template-columns: 1fr 1fr .7fr; gap: 26px clamp(26px, 3vw, 46px); }
  .k-fila--fechas .k-campo:nth-child(3) { grid-column: auto; margin-top: 0; }

  /* --- Dónde estamos --- */
  .k-donde {
    display: grid;
    grid-template-columns: .95fr 1.2fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: start;
    padding-bottom: clamp(70px, 9vw, 118px);
  }
  .k-mapa { margin-top: 0; }
  .k-lugar { padding: 20px 0; }
  .k-lugar-n { font-size: 1.5rem; }

  /* --- Preguntas: cabecera a un lado y la lista al otro, a dos columnas ---
     Con auto-fit salían tres a 1680 y dejaban de leerse como una lista. */
  .k-faq {
    display: grid;
    grid-template-columns: .82fr 2fr;
    gap: clamp(40px, 5vw, 92px);
    align-items: start;
    padding-bottom: clamp(80px, 10vw, 130px);
  }
  .k-faq-lista {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(36px, 4vw, 72px);
  }
  .k-faq-p > summary { font-size: 1.1rem; }

  .k-horizonte { height: 190px; }
}

@media (min-width: 1440px) {
  .k-h1 { font-size: clamp(4.2rem, 4.6vw, 5.2rem); }
  .k-entrada { font-size: 1.2rem; }
  .k-via-d, .k-puerta-d { font-size: 1rem; }
}

/* =========================================================
   MOVIMIENTO REDUCIDO — se para todo lo que se mueve solo. El plegado de las
   preguntas se queda: eso es contenido, no movimiento.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .k-anillo { animation: none; opacity: .1; transform: scale(.55); }
  .k-via::before,
  .k-puerta::before { transition: none; }
  .k-flecha { transition: none; }
}