/* ---------- la columna ---------- */
.desk{--canal:44px;--col:660px}
.desk-shell{width:min(100% - 40px, var(--col));margin-inline:auto}
@media(min-width:900px){.desk-shell{width:min(100% - 80px, calc(var(--col) + var(--canal)))}}

.desk-cab{display:grid;gap:14px;padding-bottom:34px}
@media(min-width:900px){.desk-cab{padding-left:calc(var(--canal) + 18px)}}
.desk-cab h2{font-size:clamp(1.85rem,4vw,2.6rem);line-height:1.1}
.desk-lede{color:var(--soft);font-size:1rem;line-height:1.7;max-width:56ch}
/* Se dice antes de empezar cuanto cuesta: cuatro preguntas y quince segundos.
   Es lo que decide si alguien empieza o se va. */
.desk-coste{font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gold-deep);margin-top:2px}
.desk-coste b{font-weight:500;color:var(--navy)}

/* ---------- un paso ---------- */
.desk-form{display:block}
/* Sin filete inferior: cada paso resuelto ya trae el suyo dorado encima de
   la respuesta, y los dos juntos iban acumulando lineas segun se avanzaba.
   Se queda solo el que separa la respuesta del Change. El aire basta para
   separar un paso del siguiente. */
.paso{border:0;padding:0;margin:0;min-width:0;display:block;
  padding-top:26px;padding-bottom:26px;
  /* Deja sitio a la cabecera fija -y a la barra de capitulos, donde la hay-
     al desplazarse a un paso. Sin esto el paso nuevo nacia debajo de ellas. */
  scroll-margin-top:calc(var(--desk-techo, 110px) + 22px)}

/* legend no acepta display:grid de forma fiable en todos los navegadores.
   El float lo convierte en un bloque de ancho completo, que es lo unico
   que necesitamos; .paso-cuerpo y .paso-resumen limpian el flotado. */
.paso legend{float:left;width:100%;padding:0;display:flex;gap:14px;align-items:baseline}
/* El numero, grande, y debajo el total en pequeno: quien empieza sabe de
   entrada cuanto le queda. El total es el de SU recorrido, no un 04 fijo:
   la ruta de coleccion tiene tres pasos y prometer cuatro seria mentir. */
.paso-n{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;font-family:"Jost";color:var(--gold-deep);
  font-variant-numeric:tabular-nums;padding-top:.18em;line-height:1}
.paso-n b{font-weight:300;font-size:1.32rem;letter-spacing:1.2px}
/* En minuscula: es una cuenta --"of 4"--, no un rotulo. En versalitas se
   leia como una etiqueta mas de la pagina. */
.paso-n i{font-style:normal;font-weight:400;font-size:.56rem;letter-spacing:1.6px;
  opacity:.72}
.desk-js .paso[data-estado="resuelto"] .paso-n b{font-size:.78rem;letter-spacing:2px}
.desk-js .paso[data-estado="resuelto"] .paso-n i{display:none}
@media(min-width:900px){.paso-n{width:var(--canal)}}
.paso-q{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(1.3rem,2.5vw,1.66rem);line-height:1.22;color:var(--navy)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.paso-cuerpo{clear:both;padding-top:20px}
/* Una casilla no dice por si sola que se pueda marcar mas de una. Va en
   cursiva y en pequeno: informa sin competir con la pregunta. */
.paso-pista{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:.98rem;color:var(--soft);margin:-4px 0 16px;line-height:1.4}
@media(min-width:900px){.paso-cuerpo{padding-left:calc(var(--canal) + 14px)}}

/* la linea del paso ya resuelto: el unico gesto fuerte del componente */
.paso-resumen{clear:both;display:none;align-items:baseline;gap:16px;
  padding-top:12px;border-top:1px solid var(--gold);margin-top:12px}
@media(min-width:900px){.paso-resumen{margin-left:calc(var(--canal) + 14px)}}
.paso-val{flex:1 1 auto;font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:1.14rem;line-height:1.4;color:var(--ink);min-width:0}
.paso-cambiar{flex:0 0 auto;font-family:"Jost";font-weight:400;font-size:.63rem;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--gold-deep);
  background:none;border:0;border-bottom:1px solid transparent;padding:2px 0;
  cursor:pointer;transition:border-color .3s ease}
.paso-cambiar:hover,.paso-cambiar:focus-visible{border-bottom-color:var(--gold-deep)}

/* Con JavaScript los pasos se abren de uno en uno. Sin el, todos visibles:
   feo, pero nadie se queda sin poder escribir. */
.desk-js .paso[data-estado="oculto"]{display:none}
.desk-js .paso[data-estado="resuelto"] .paso-cuerpo{display:none}
.desk-js .paso[data-estado="resuelto"] .paso-resumen{display:flex}
.desk-js .paso[data-estado="resuelto"] .paso-q{font-size:1rem;color:var(--soft);
  font-family:"Jost";font-weight:400;letter-spacing:.2px}
.desk-js .paso[data-estado="activo"]{animation:desk-entra .42s ease-out both}
@keyframes desk-entra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .desk-js .paso[data-estado="activo"]{animation:none}
  .paso-cambiar,.desk-fila,.desk-lote{transition:none}
}

/* ---------- filas de opcion ---------- */
.desk-filas{display:grid;gap:0}
/* Sin filetes entre opciones: el aire y el filete dorado de la elegida bastan
   para separarlas, y asi la pregunta no parece una tabla. */
.desk-fila{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;
  align-items:start;padding:14px 4px 14px 2px;
  cursor:pointer;position:relative;min-height:54px;
  transition:background .25s ease}
.desk-fila:hover{background:var(--cream)}
.desk-fila input{margin-top:3px;accent-color:var(--navy);width:17px;height:17px;cursor:pointer}
.desk-fila-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.desk-fila-p{font-size:.99rem;color:var(--ink);line-height:1.4}
.desk-fila-s{font-size:.79rem;color:var(--soft);line-height:1.45}
/* El estado nunca es solo color: el radio nativo queda a la vista, y ademas
   se marca con un filete dorado a la izquierda. */
.desk-fila::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:var(--gold);opacity:0;transition:opacity .25s ease}
.desk-fila:has(input:checked)::before{opacity:1}
.desk-fila:has(input:checked) .desk-fila-p{color:var(--navy);font-weight:400}

/* ---------- lotes ---------- */
.desk-lotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:700px){.desk-lotes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.desk-lote{display:flex;flex-direction:column;gap:5px;padding:14px 13px;
  border:1px solid var(--rule);background:var(--paper);cursor:pointer;min-height:48px;
  transition:border-color .25s ease,background .25s ease}
.desk-lote:hover{border-color:var(--gold-deep)}
.desk-lote:has(input:checked){border-color:var(--navy);background:var(--hi)}
.desk-lote-c{display:flex;align-items:center;gap:9px}
.desk-lote input{accent-color:var(--navy);width:16px;height:16px;cursor:pointer}
.desk-lote-n{font-family:"Jost";font-weight:500;font-size:1rem;color:var(--navy);letter-spacing:.6px}
.desk-lote-d{font-size:.71rem;color:var(--soft);line-height:1.45}
/* El precio: peso ligero y color de cuerpo, no dorado ni negrita gruesa.
   Aqui informa a quien ya esta eligiendo; no es un reclamo. */
.desk-lote-p{display:inline-block;margin-top:3px;font-weight:400;
  font-size:.76rem;color:var(--navy);letter-spacing:.2px}

/* ---------- el plano ----------
   Geometria y tipografia de la ficha tecnica, sin retocar: viewBox en las
   mismas coordenadas, escala unica de 8,46 px/m, y las clases cq-* con sus
   tamanos aprobados. Aqui solo se anaden el precio y la casilla.
   El dibujo va ENCIMA y no recibe raton; las etiquetas van debajo y son las
   que pintan el relleno de cada lote, para que el texto del SVG no quede
   tapado al marcar. */
.desk-plano{margin:16px 0 0;max-width:540px}
.desk-plano-campo{position:relative;aspect-ratio:884/661}
.desk-p-dibujo{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2;overflow:visible}

/* Cada lote es una etiqueta colocada sobre su propio poligono. El relleno lo
   pone ella; el SVG deja .cq-lot sin relleno para no taparla. */
.desk-p-lote{position:absolute;margin:0;cursor:pointer;z-index:1;
  background:var(--paper);
  transition:background .25s ease}
.desk-p-lote[data-diagonal]{clip-path:polygon(0 0,33.31% 0,100% 100%,0 100%)}
.desk-p-lote:hover{background:var(--hi,#f0e6d4)}
.desk-p-lote:has(input:checked){background:var(--hi,#f0e6d4)}
.desk-p-lote input{position:absolute;transform:translate(-50%,-50%);
  width:17px;height:17px;margin:0;z-index:3;
  accent-color:var(--navy);cursor:pointer}
.desk-p-lote:has(input:focus-visible){outline:2px solid var(--gold);
  outline-offset:-2px}
/* El rotulo esta en el SVG; este duplicado existe solo para los lectores de
   pantalla, que del dibujo -aria-hidden- no leen nada. */
.desk-p-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* Trazos y rotulos del plano. Mismos valores que la ficha tecnica; lo unico
   que cambia es .cq-lot, que aqui no rellena. */
.desk-p-dibujo .cq-lot{fill:none;stroke:var(--navy);stroke-width:1.5}
.desk-p-dibujo .cq-num{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:44px;font-weight:400;fill:var(--navy);text-anchor:middle;
  letter-spacing:.02em;
  /* Sin esto Cormorant saca cifras de estilo antiguo y los numeros saltan. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1}
.desk-p-dibujo .cq-area{font-family:"Jost",sans-serif;font-size:16px;
  font-weight:300;fill:var(--soft);text-anchor:middle;
  font-variant-numeric:lining-nums tabular-nums}
/* El precio por metro: mismo peso discreto que tenian las medidas. Va debajo
   del precio y con el forma el segundo grupo -el CUANTO-, separado por aire
   del primero -el QUE: numero y superficie-. Es el dato que de verdad compara
   los cuatro entre si. */
.desk-p-dibujo .cq-m2{font-family:"Jost",sans-serif;font-size:14px;
  font-weight:300;fill:var(--soft);text-anchor:middle;letter-spacing:.04em;
  font-variant-numeric:lining-nums tabular-nums}
/* El precio, en el peso y el color del cuerpo: informa a quien ya esta
   eligiendo, no es un reclamo, y nunca es el elemento mayor del bloque. */
.desk-p-dibujo .cq-precio{font-family:"Jost",sans-serif;font-size:17px;
  font-weight:400;fill:var(--navy);text-anchor:middle;
  font-variant-numeric:lining-nums tabular-nums}
.desk-p-dibujo .cq-fr{font-family:"Jost",sans-serif;font-size:17px;
  font-weight:400;fill:var(--navy);text-anchor:middle;
  font-variant-numeric:tabular-nums}
.desk-p-dibujo .cq-road{fill:var(--navy)}
.desk-p-dibujo .cq-road-t{font-family:"Jost",sans-serif;font-size:15px;
  font-weight:400;fill:var(--cream);letter-spacing:.2em;
  text-transform:uppercase}
.desk-p-dibujo .cq-beach-t{font-family:"Jost",sans-serif;font-size:15px;
  font-weight:500;fill:var(--cream);letter-spacing:.14em;
  text-transform:uppercase}
.desk-p-dibujo .cq-arw{fill:none;stroke:var(--cream);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.desk-p-dibujo .cq-dim,.desk-p-dibujo .cq-tick{stroke:var(--navy);
  stroke-width:1;stroke-opacity:.5}

/* En estrecho el texto del SVG encoge con el dibujo, asi que hay que subirlo
   en unidades de viewBox. Es lo mismo que hace la ficha tecnica en su propio
   @media, solo que aqui el plano es mas chico y hace falta mas. */
/* El pie solo aparece cuando los rotulos salen de la banda. */
.desk-plano-pie{display:none;margin:7px 0 0;
  font-family:"Jost",sans-serif;font-size:.62rem;font-weight:400;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--soft)}

@media(max-width:620px){
  .desk-p-dibujo .cq-num{font-size:58px}
  .desk-p-dibujo .cq-area{font-size:26px}
  .desk-p-dibujo .cq-precio{font-size:28px}
  .desk-p-dibujo .cq-fr{font-size:24px}
  .desk-p-dibujo .cq-m2{font-size:22px}
  /* Los dos rotulos de la calle bajan al pie, que si reparte el ancho. */
  .desk-p-dibujo .cq-road-t,.desk-p-dibujo .cq-beach-t{display:none}
  .desk-plano-pie{display:flex;justify-content:space-between;gap:12px}
}
@media(max-width:430px){
  /* Se va el precio por metro, no la superficie: compara, pero a esta medida
     ya no se lee, y lo que hay que reconocer de un vistazo es que se compra
     y cuanto cuesta. */
  .desk-p-dibujo .cq-m2{display:none}
  .desk-p-dibujo .cq-num{font-size:64px}
  .desk-p-dibujo .cq-area{font-size:30px}
  .desk-p-dibujo .cq-precio{font-size:32px}
  .desk-plano-pie{font-size:.56rem;letter-spacing:1.1px}
}
@media (prefers-reduced-motion:reduce){
  .desk-p-lote{transition:none}
}

.desk-lotes-mas{display:grid;grid-template-columns:1fr;gap:0;margin-top:12px}

/* ---------- campos ---------- */
.desk-campos{display:grid;gap:20px}
.desk-par{display:grid;gap:20px}
@media(min-width:640px){.desk-par{grid-template-columns:1fr 1fr}}
.desk-campo{display:flex;flex-direction:column;gap:7px;font-size:.72rem;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--soft);min-width:0}
.desk-campo input,.desk-campo textarea,.desk-campo select{
  font-family:"Jost";font-weight:300;font-size:1rem;color:var(--ink);
  border:0;border-bottom:1px solid var(--rule);background:transparent;
  padding:9px 2px;border-radius:0;width:100%;
  transition:border-color .25s ease}
.desk-campo input:focus,.desk-campo textarea:focus{outline:0;border-bottom-color:var(--gold-deep)}
.desk-campo input:focus-visible,.desk-campo textarea:focus-visible{
  outline:2px solid var(--gold-deep);outline-offset:3px}
/* El area de texto si se dibuja como una caja: con solo un filete abajo no
   se veia donde escribir hasta pulsarla, y ademas ocupaba de mas. */
.desk-campo textarea{resize:vertical;min-height:64px;line-height:1.55;
  border:1px solid var(--rule);background:var(--cream);padding:10px 12px}
.desk-campo textarea:focus,.desk-campo textarea:focus-visible{border-color:var(--gold-deep)}
.desk-opt{text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--soft);opacity:.8}
/* El rotulo de un bloque que no es <label>: mismo aspecto, sin mentir al
   lector de pantalla, que ya tiene su etiqueta en cada control. */
.desk-rot{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--soft)}
/* La columna del prefijo va acotada: con `auto`, el nombre de pais mas largo
   mandaba sobre la fila y al numero le quedaban 119 px. */
.desk-tel-fila{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);
  gap:12px;align-items:end}
.desk-tel-fila select{width:100%}
.desk-tel-fila select{border:0;border-bottom:1px solid var(--rule);background:transparent;
  font-family:"Jost";font-weight:300;font-size:1rem;color:var(--ink);
  padding:9px 2px;border-radius:0;cursor:pointer}
.desk-tel-fila select:focus{outline:0;border-bottom-color:var(--gold-deep)}
.desk-tel-fila select:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.desk-err{font-size:.76rem;color:#a4442f;letter-spacing:0;text-transform:none;display:none;margin:0}
[data-mal] .desk-err{display:block}
.desk-campo[data-mal] input,.desk-campo[data-mal] textarea{border-bottom-color:#a4442f}

/* ---------- que pasa despues ---------- */
.desk-luego{background:var(--navy);color:#e7ded0;padding:22px 24px;margin-top:20px;
  display:grid;gap:14px}
/* Sin sangrado propio: viven dentro de .paso-cuerpo, que ya lo aplica.
   Con el suyo se sangraban dos veces y quedaban desplazados a la derecha
   respecto de los campos del mismo paso. */
.desk-luego-t{font-family:"Jost";font-weight:400;font-size:.63rem;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--gold);margin:0}
.desk-luego ol{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:l}
.desk-luego li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;
  font-size:.93rem;line-height:1.6;color:#c9d3e0;counter-increment:l}
.desk-luego li::before{content:"0" counter(l);font-size:.66rem;color:var(--gold);
  padding-top:.42em;font-variant-numeric:tabular-nums}

/* ---------- cierre ---------- */
.desk-cierre{padding-top:26px;display:grid;gap:18px}
.desk-check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;
  align-items:start;font-size:.87rem;line-height:1.55;color:var(--ink);cursor:pointer}
.desk-check input{margin-top:4px;accent-color:var(--navy);width:17px;height:17px}
.desk-check + .desk-err{margin-left:32px}
.desk-cf{min-height:4px}
.desk-cf:not(:empty){min-height:70px}
.desk-enviar{justify-self:start;font-family:"Jost";font-weight:400;font-size:.72rem;
  letter-spacing:3px;text-transform:uppercase;padding:15px 34px;
  border:1px solid var(--navy);background:var(--navy);color:var(--cream);cursor:pointer;
  transition:background .3s ease,color .3s ease}
.desk-enviar:hover:not(:disabled),.desk-enviar:focus-visible:not(:disabled){
  background:transparent;color:var(--navy)}
.desk-enviar:disabled{opacity:.55;cursor:default}
/* El avance de paso no debe competir con el envio real: mismo lenguaje,
   pero en contorno, no macizo. Solo hay un boton lleno en toda la pieza. */
/* Sobre crema, un boton transparente desaparecia. Va en blanco, que lo
   despega del fondo sin robarle presencia al envio, que sigue siendo el
   unico macizo. */
.desk-sigue{justify-self:start;margin-top:24px;font-family:"Jost";font-weight:400;
  font-size:.68rem;letter-spacing:2.6px;text-transform:uppercase;padding:13px 28px;
  border:1px solid var(--rule);background:var(--paper);color:var(--navy);cursor:pointer;
  transition:border-color .3s ease,box-shadow .3s ease}
.desk-sigue:hover,.desk-sigue:focus-visible{border-color:var(--navy);
  box-shadow:0 1px 8px rgba(12,29,53,.08)}
.desk-msg{margin:0;font-size:.91rem;line-height:1.6;padding:13px 17px;border-left:2px solid}
.desk-msg.ok{border-color:var(--gold-deep);background:rgba(201,169,110,.14);color:var(--ink)}
.desk-msg.mal{border-color:#a4442f;background:rgba(164,68,47,.09);color:#7d2f1f}

/* ---------- contacto directo ---------- */
/* Sin filete de separacion y sin subrayados: dos vias, cada una con su icono
   y su palabra. Lo que se pulsa se reconoce por el icono, no por una raya. */
.desk-directo{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
@media(min-width:900px){.desk-directo{margin-left:calc(var(--canal) + 14px)}}
.desk-directo-t{font-size:.82rem;color:var(--soft);margin-right:4px}
/* Dos columnas iguales: "WhatsApp" y "Email" tienen distinto largo y a ancho
   libre salian de tamanos distintos, que es lo que se veia mal. */
.desk-vias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;width:min(100%,318px)}
/* Los dos no pesan igual a proposito: WhatsApp va solido porque es el canal
   que de verdad usan, y el correo con borde. Dos bloques navy juntos compiten
   y ninguno manda.
   Al pasar por encima, el relleno SE MUEVE al que tiene el cursor y el otro se
   queda con el borde: asi el solido siempre marca donde estas, en vez de que
   el destacado se quede fijo en uno mientras apuntas al otro. */
.desk-directo a{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.86rem;letter-spacing:.4px;text-decoration:none;
  padding:10px 14px;border:1px solid var(--navy);
  color:var(--navy);background:var(--paper);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,
             box-shadow .3s ease}
.desk-directo a svg{color:currentColor}
/* Estado de reposo: WhatsApp solido. */
.desk-vias a[data-via="whatsapp"]{background:var(--navy);color:var(--cream)}
/* Con el cursor en el correo, se intercambian. */
.desk-vias:hover a[data-via="whatsapp"]{background:var(--paper);color:var(--navy)}
.desk-vias a[data-via="email"]:hover,
.desk-vias a[data-via="email"]:focus-visible{background:var(--navy);color:var(--cream)}
/* Y si el cursor vuelve a WhatsApp, el relleno vuelve con el. */
.desk-vias a[data-via="whatsapp"]:hover,
.desk-vias a[data-via="whatsapp"]:focus-visible{background:var(--navy);color:var(--cream)}
.desk-directo a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.desk-directo svg{width:17px;height:17px;flex:0 0 auto}

/* En movil la salida directa sube: mucha gente prefiere escribir por WhatsApp
   antes que recorrer cuatro pasos, y negarsela no convierte, hace que se vaya. */
.desk-directo-alto{display:none}
@media(max-width:640px){
  .desk-directo-alto{display:flex;margin-top:0;margin-bottom:8px;
    padding-top:18px;border-top:1px solid var(--rule)}
  /* ...y el de abajo se retira. Son la MISMA salida puesta dos veces para
     poder elegir donde cae; faltaba esconder la que no toca, asi que por
     debajo de 640 px se veian las dos, una encima de otra. */
  .desk-directo-bajo{display:none}
}
/* Un solo componente para dos paginas. La landing lo usa en modo lotes; en
   /private-enquiries/, que cuelga del menu, en modo general: alli no se
   pregunta por un lote sino por que producto, con presupuesto y plazo.
   La conmutacion es por CSS y no por JavaScript para que no se vea un
   instante la entradilla equivocada al cargar. */
.solo-general{display:none}
body[data-desk="general"] .solo-lotes{display:none}
body[data-desk="general"] .solo-general{display:block}
/* El aviso de la pagina de reservas: se dice donde esta la disponibilidad de
   verdad en vez de dejar que la descubran despues. Va sobre crema, con filete
   dorado a la izquierda, que es el gesto de la casa para una nota. */
.desk-reserva{margin:22px 0 0;padding:13px 16px;background:var(--cream);
  border-left:2px solid var(--gold);font-size:.9rem;line-height:1.6;color:var(--ink)}
.desk-reserva a{color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--gold-deep);padding-bottom:1px}
.desk-reserva a:hover{border-bottom-width:2px}

.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}