/* ============================================================
   TARJETAS DE VILLA, VERSION DE LUJO (11 oct 2026)

   Carlos pidio un diseno de lujo para el catalogo (/reservar/), sin
   tocar lo que dice cada villa: solo como se ve.

   SE ACTIVA SOLO con `?lujo=1` en la direccion (clase `lujo` en el body,
   ver el script al final de reservar/index.html), para poder ver lo
   actual y lo nuevo lado a lado. Nada de esto cambia el sitio en vivo
   hasta que Carlos diga "publica" y se quite la condicion.

   LAS 10 DECISIONES:
     1  Una sola foto grande por tarjeta (se esconden las 3 miniaturas)
     2  Una sola etiqueta sobre la foto: el nombre, en blanco, sobre un
        degradado suave (adios a las dos pastillas)
     3  Sin caja blanca ni sombra: la foto manda, el texto respira
     4  Titulo en una sola linea, nunca cortado a media palabra
     5  Todas las tarjetas de la misma altura (la frase se queda para la
        pagina de la villa)
     6  Sin boton turquesa gritando: la tarjeta entera es el boton
     7  El precio, a la derecha, es lo segundo mas fuerte
     8  Mas ancho y fotos mas grandes
     9  Un mismo tratamiento de color en todas las fotos
    10 Movimiento fino al pasar el mouse
   ============================================================ */

body.lujo main .wrap{max-width:1380px;padding-left:40px;padding-right:40px}
body.lujo .vs-grid{
  grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
  gap:54px 34px;padding:26px 0 90px;
}

/* La tarjeta: sin caja */
body.lujo .vs-tarj{
  background:transparent;box-shadow:none;border:0;border-radius:0;overflow:visible;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
body.lujo .vs-tarj:hover{transform:translateY(-4px)}

/* La foto: grande, una sola, esquinas redondas parejas */
body.lujo .vs-foto{
  margin:0;aspect-ratio:5/4;border-radius:22px;background:#e9eef0;
  box-shadow:0 22px 44px -26px rgba(11,12,13,.55);
}
body.lujo .vs-minis{display:none !important}
body.lujo .vs-foto img.vs-g{
  filter:saturate(1.06) contrast(1.03) brightness(.99);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s;
}
body.lujo .vs-tarj:hover .vs-foto img.vs-g{transform:scale(1.05)}
/* El degradado que sostiene el nombre */
body.lujo .vs-foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,12,16,.62),rgba(6,12,16,0));
}
/* Una sola etiqueta: el nombre, en blanco, sin pastilla */
body.lujo .vs-vnum{
  z-index:2;left:22px;bottom:18px;top:auto;
  background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;color:#fff;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
/* Sin "See full listing": la tarjeta entera lleva a la villa */
body.lujo .vs-ver{display:none !important}

/* Los sellos de fechas (disponible, ocupada...): discretos, arriba */
body.lujo .vs-sello{z-index:2;top:16px;left:16px;right:auto;bottom:auto}

/* El texto: tres filas limpias */
body.lujo .vs-cuerpo{
  padding:18px 4px 0;display:grid;grid-template-columns:1fr auto;
  column-gap:18px;row-gap:2px;align-items:end;
}
body.lujo .com-fila{grid-column:1 / -1;order:1;margin:0}
body.lujo .vs-fila{grid-column:1 / -1;order:1;margin:0;justify-content:flex-start}
body.lujo .vs-fila .vs-lugar,body.lujo .com-fila .vs-lugar{
  text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#8a959a;
}
body.lujo .vs-com{display:none}                 /* "Community:" sobra en las 45 */
body.lujo .com-mas{display:none !important}     /* "Learn more" tambien */
body.lujo .vs-cuerpo h3{
  grid-column:1 / -1;order:2;margin:6px 0 10px;
  font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.25;color:#0b0c0d;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.lujo .vs-sub{display:none}                 /* la frase vive en la pagina de la villa */
body.lujo .vs-datos{
  order:3;margin:0;gap:18px;font-size:13px;color:#7b868b;align-self:center;
}
body.lujo .vs-datos svg{width:17px;height:17px;opacity:.7}
body.lujo .vs-datos li{gap:6px}
body.lujo .vs-precio{
  order:4;margin:0;padding:0;text-align:right;font-size:11.5px;color:#8a959a;
  letter-spacing:.04em;line-height:1.15;
}
body.lujo .vs-precio b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;color:#0b0c0d;margin:1px 0}
body.lujo .vs-precio b.vs-cons{font-size:14px;font-weight:500;color:#0b0c0d}
/* Sin boton: la tarjeta es el boton */
body.lujo .bk-ahora{display:none !important}

/* Telefono: una columna, la foto a todo lo ancho */
@media (max-width:760px){
  body.lujo main .wrap{padding-left:18px;padding-right:18px}
  body.lujo .vs-grid{grid-template-columns:1fr;gap:38px}
  body.lujo .vs-foto{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  body.lujo .vs-tarj,body.lujo .vs-foto img.vs-g{transition:none}
  body.lujo .vs-tarj:hover{transform:none}
  body.lujo .vs-tarj:hover .vs-foto img.vs-g{transform:none}
}

/* El mosaico (foto + miniaturas) dejaba la foto grande en el 73% de arriba:
   en la version de lujo la foto ocupa TODO el recuadro. */
body.lujo .vs-foto.vs-mos{display:block;aspect-ratio:5/4;background:#e9eef0;border-radius:22px}
body.lujo .vs-foto.vs-mos > img.vs-g{position:absolute;inset:0;width:100%;height:100%;border-radius:22px}
body.lujo .vs-foto.vs-mos .vs-vnum{bottom:18px}
body.lujo a.vs-tarj:hover .vs-foto.vs-mos > img.vs-g{transform:scale(1.05)}

/* ============================================================
   LA SELECCION: SOLO 3 VILLAS AL ENTRAR (11 oct 2026)
   Ver el bloque "LA SELECCION" en villas-sitio.js. Con la seleccion
   puesta, la tarjeta puede ser mas grande (son solo 3) y una flecha
   lleva el ojo al buscador.
   ============================================================ */
body.lujo.vs-seleccion .vs-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 36px;padding:30px 0 20px;
}
@media (max-width:1000px){ body.lujo.vs-seleccion .vs-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ body.lujo.vs-seleccion .vs-grid{grid-template-columns:1fr} }
body.lujo.vs-seleccion .vs-cuenta{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#10b2c2;font-weight:600;
}
/* El buscador "llama": un resplandor suave que invita a usarlo */
body.lujo.vs-seleccion .vs-barra{
  animation:vsLlama 2.8s ease-in-out infinite;
}
@keyframes vsLlama{
  0%,100%{box-shadow:0 0 0 0 rgba(16,178,194,0)}
  50%{box-shadow:0 0 0 7px rgba(16,178,194,.16)}
}
/* La guia de abajo: texto + "Ver todas" */
body.lujo .vs-guia{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:8px 0 70px;padding:22px 28px;border-radius:20px;
  background:linear-gradient(135deg,rgba(16,178,194,.10),rgba(16,178,194,.03));
}
body.lujo .vs-guia[hidden]{display:none}
body.lujo .vs-guia-txt{font-size:15px;line-height:1.5;color:#3b474c;max-width:640px}
body.lujo .vs-guia-txt b{color:#0b0c0d;font-weight:600}
body.lujo .vs-guia-txt::before{
  content:"\2191";display:inline-grid;place-items:center;width:26px;height:26px;margin-right:12px;
  border-radius:50%;background:#10b2c2;color:#fff;font-weight:700;font-size:15px;
  animation:vsArriba 1.6s ease-in-out infinite;
}
@keyframes vsArriba{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
body.lujo .vs-guia-todas{
  font:inherit;font-size:14px;font-weight:600;color:#0b0c0d;background:#fff;border:0;cursor:pointer;
  padding:12px 22px;border-radius:999px;box-shadow:0 8px 22px -12px rgba(11,12,13,.45);
  transition:transform .3s,box-shadow .3s,color .3s;
}
body.lujo .vs-guia-todas:hover{transform:translateY(-2px);color:#0a8c99;box-shadow:0 14px 28px -14px rgba(11,12,13,.5)}
body.lujo .vs-guia-vuelta{justify-content:center;background:none;margin-bottom:60px}
@media (prefers-reduced-motion:reduce){
  body.lujo.vs-seleccion .vs-barra,body.lujo .vs-guia-txt::before{animation:none}
}
body.lujo .vs-guia-txt{display:flex;align-items:flex-start;gap:14px}
body.lujo .vs-guia-txt::before{flex:none;margin-right:0}

/* Sin numero de villa en la tarjeta (Carlos, 11 oct 2026): *"los numeros
   de la villa no son necesarios"*. Es un dato del equipo, no del huesped.
   Sin la etiqueta, el degradado de abajo ya no hace falta: la foto queda
   limpia. El numero sigue en la pagina de la villa y en el enlace. */
body.lujo .vs-vnum{display:none !important}
body.lujo .vs-foto::after{display:none}

/* ============================================================
   "VER VILLA" Y LA FRASE CORTA (11 oct 2026)

   Carlos: cuando el cliente escoge 2 habitaciones y salen las villas,
   cada una debe tener algo como "Ver" para abrirla y de ahi reservar.
   Por eso vuelve un unico llamado, discreto: una pastilla blanca
   "Ver villa" con flecha, abajo a la derecha de la foto. Va a la pagina
   de la villa, que es donde se escogen fechas y se reserva.
   La frase corta solo sale en las 3 tarjetas grandes de la seleccion.
   ============================================================ */
body.lujo .vs-ver{
  display:inline-flex !important;position:absolute;right:16px;bottom:16px;z-index:2;
  align-items:center;gap:10px;padding:7px 7px 7px 18px;border-radius:999px;
  background:rgba(255,255,255,.96);color:#0b0c0d;font-size:13px;font-weight:600;letter-spacing:.01em;
  border:0;box-shadow:0 12px 26px -12px rgba(0,0,0,.55);backdrop-filter:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
body.lujo .vs-ver i{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#10b2c2;color:#fff;border:0;box-shadow:none;
}
body.lujo .vs-ver svg{width:14px;height:14px;color:#fff;stroke-width:2.4;animation:none;filter:none}
body.lujo .vs-tarj:hover .vs-ver{transform:translateY(-3px);box-shadow:0 18px 32px -14px rgba(0,0,0,.6)}
body.lujo .vs-tarj:hover .vs-ver i{background:#0a8c99}
body.lujo .vs-foto.vs-mos .vs-ver{bottom:16px}

body.lujo .vs-frase{
  grid-column:1 / -1;order:3;margin:-4px 0 12px;font-size:14.5px;font-weight:300;
  color:#5d6a70;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.lujo .vs-datos{order:4}
body.lujo .vs-precio{order:5}

/* ============================================================
   LA FICHA DE LA VILLA, VERSION DE LUJO (11 oct 2026)
   Ver refinarLujo() en villas-sitio.js. Solo con ?lujo=1.
   ============================================================ */

/* 1. La tira de datos */
body.lujo .vd-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;
  margin:6px 0 34px;
}
body.lujo .vd-fact{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:16px 18px;border-radius:18px;background:#f4f8f9;
}
body.lujo .vd-fact-i{display:block;width:24px;height:24px;color:#10b2c2;margin-bottom:6px}
body.lujo .vd-fact-i svg{width:24px;height:24px;stroke:currentColor;fill:none}
body.lujo .vd-fact b{font-size:24px;font-weight:600;letter-spacing:-.02em;color:#0b0c0d;line-height:1.05}
body.lujo .vd-fact span:last-child{font-size:12.5px;color:#6b777c;letter-spacing:.02em}

/* 2. Textos largos: cortos con "Leer mas" */
body.lujo .vd-clamp{
  max-height:9.4em;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent);
}
body.lujo .vd-clamp.vd-clamp-abierto{max-height:none;-webkit-mask-image:none;mask-image:none}
body.lujo .vd-leer{
  display:inline-block;margin:6px 0 0;padding:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:#0a8c99;text-decoration:underline;text-underline-offset:4px;
}
body.lujo .vd-leer:hover{color:#10b2c2}

/* 3. Comodidades: solo las 12 que mas pesan */
body.lujo .vd-amen-todas .vd-oculta{display:none !important}
body.lujo #vdMasCom{margin-top:22px}

/* 4. La comunidad vende */
body.lujo .vd-comu-am{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:22px 0 8px;
}
body.lujo .vd-comu-it{
  display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;background:#f4f8f9;
}
body.lujo .vd-comu-ic{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#fff;color:#10b2c2;box-shadow:0 8px 20px -12px rgba(11,12,13,.4);
}
body.lujo .vd-comu-ic svg{width:21px;height:21px;stroke:currentColor;fill:none}
body.lujo .vd-comu-it b{display:block;font-size:15px;font-weight:600;color:#0b0c0d;margin-bottom:3px}
body.lujo .vd-comu-it span:last-child{font-size:13.5px;line-height:1.5;color:#5d6a70;font-weight:300}
body.lujo .vd-comu-h{margin:26px 0 12px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#10b2c2}
body.lujo .vd-comu-di{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
body.lujo .vd-comu-d{display:flex;align-items:baseline;gap:12px;padding:12px 4px}
body.lujo .vd-comu-d b{flex:none;min-width:62px;font-size:19px;font-weight:600;color:#0b0c0d;letter-spacing:-.01em}
body.lujo .vd-comu-d span{font-size:13.5px;color:#5d6a70;line-height:1.4}

/* 5. La invitacion a invertir, al final y discreta */
body.lujo .inv-banda.inv-final{margin:48px auto 10px;display:flex;width:max-content;max-width:100%}

@media (max-width:640px){
  body.lujo .vd-facts{grid-template-columns:repeat(2,1fr)}
}
body.lujo .vd-comu-it{text-align:left}
body.lujo .vd-comu-it > div{text-align:left;flex:1}
body.lujo .vd-comu-d{text-align:left}

/* ============================================================
   DESCRIPCION MINIMA Y REGLAS EN FICHAS (11 oct 2026)
   Carlos: "las reglas de la casa en fichas, que convierta mas; el About,
   The property y todo eso desaparece, ya lo mostramos en fichas; solo un
   espacio para una minima descripcion del listing".
   Nota: el 8 oct pidio las reglas "escritas, no con iconos"; esta es la
   orden mas nueva. Si las reglas se escriben en el calendario
   (`normas.extra`), las fichas salen de ese mismo texto.
   ============================================================ */
body.lujo .vd-resumen{margin:6px 0 30px}
body.lujo .vd-resumen .vd-texto{font-size:17px;line-height:1.65;color:#2f3a3f;font-weight:300;max-width:640px}
body.lujo .vd-resumen .vd-texto p{margin:0 0 12px}
body.lujo .vd-resumen .vd-clamp{max-height:5.1em}

body.lujo .vd-reglas-g{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:18px;
}
body.lujo .vd-regla{
  display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:18px;background:#f4f8f9;
  text-align:left;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
body.lujo .vd-regla:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(11,12,13,.5)}
body.lujo .vd-regla-i{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fff;color:#10b2c2;box-shadow:0 8px 20px -12px rgba(11,12,13,.4);
}
body.lujo .vd-regla-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.lujo .vd-regla b{display:block;font-size:15px;font-weight:600;color:#0b0c0d;line-height:1.3;margin-bottom:3px}
body.lujo .vd-regla span:last-child{font-size:13.5px;color:#5d6a70;font-weight:300;line-height:1.4}

/* ============================================================
   LAS COMODIDADES, DESTACADAS (11 oct 2026)
   Carlos: "la gente no lee, quitemos ese texto; lo que deben saber ya lo
   tienen en fichas; las comodidades mas importantes son las que vamos a
   destacar". Suben justo debajo de la tira de datos, en fichas mas
   grandes (4 por renglon), y el resto vive en "Mostrar las N".
   ============================================================ */
body.lujo .vd-amen{margin-top:0}
body.lujo .vd-amen > h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:6px}
body.lujo .vd-amen-sub{margin-bottom:22px}
body.lujo .vd-amen-todas{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;gap:12px !important;
}
body.lujo .vd-amen-todas li:not(.vd-oculta){
  display:flex !important;flex-direction:column;align-items:flex-start;gap:12px;
  padding:18px 18px 16px !important;border-radius:18px !important;
  background:#f4f8f9 !important;border:0 !important;box-shadow:none !important;
  font-size:14.5px !important;font-weight:500;color:#0b0c0d;line-height:1.3;min-height:104px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
body.lujo .vd-amen-todas li:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(11,12,13,.5) !important}
body.lujo .vd-amen-todas .vd-amen-ck{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#fff !important;color:#10b2c2;box-shadow:0 8px 20px -12px rgba(11,12,13,.4);
}
body.lujo .vd-amen-todas .vd-amen-ck svg{width:22px;height:22px}
@media (max-width:640px){ body.lujo .vd-amen-todas{grid-template-columns:repeat(2,1fr) !important} }

/* Dos niveles (11 oct): las 4 primeras comodidades, las que distinguen a la
   villa, en ficha GRANDE; las demas, en ficha chica de una sola linea. */
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(-n+4){
  min-height:150px;padding:22px 20px 20px !important;font-size:17px !important;font-weight:600;
  background:linear-gradient(160deg,#e6f6f8,#f4f8f9) !important;
}
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(-n+4) .vd-amen-ck{width:54px;height:54px}
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(-n+4) .vd-amen-ck svg{width:27px;height:27px}
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n+5){
  flex-direction:row !important;align-items:center;gap:12px;min-height:0 !important;
  padding:12px 14px !important;font-size:14px !important;font-weight:500;
}
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n+5) .vd-amen-ck{width:32px;height:32px}
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n+5) .vd-amen-ck svg{width:17px;height:17px}

/* La frase sensorial: en negro y super corta (Carlos, 11 oct) */
body.lujo .vd-cab .vd-subt{color:#0b0c0d;font-style:normal;font-weight:400}
body.lujo .vs-frase{color:#0b0c0d;font-weight:400;font-size:15px}

/* ============================================================
   CONSISTENCIA: TODAS LAS FICHAS DEL MISMO TAMANO (11 oct 2026)
   Carlos: "las fichas deben tener consistencia, todo del mismo tamano".
   Se quita el diseno de dos niveles (4 grandes + 8 chicas). Dentro de cada
   bloque, todas las fichas miden igual de ancho y de alto; lo destacado se
   dice con el ORDEN (las que mas pesan primero), no con otro tamano.
   ============================================================ */
body.lujo .vd-amen-todas{grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-auto-rows:1fr}
body.lujo .vd-amen-todas li:not(.vd-oculta),
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(-n+4),
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n+5){
  flex-direction:column !important;align-items:flex-start !important;gap:12px !important;
  min-height:112px !important;padding:18px !important;font-size:14.5px !important;font-weight:500 !important;
  background:#f4f8f9 !important;
}
body.lujo .vd-amen-todas li:not(.vd-oculta) .vd-amen-ck,
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(-n+4) .vd-amen-ck,
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n+5) .vd-amen-ck{width:42px !important;height:42px !important}
body.lujo .vd-amen-todas li:not(.vd-oculta) .vd-amen-ck svg,
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(-n+4) .vd-amen-ck svg,
body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n+5) .vd-amen-ck svg{width:22px !important;height:22px !important}

body.lujo .vd-reglas-g{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr}
body.lujo .vd-regla{min-height:112px;flex-direction:column;align-items:flex-start;gap:12px}
body.lujo .vd-comu-am{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
body.lujo .vd-comu-it{min-height:112px}
body.lujo .vd-facts{grid-template-columns:repeat(5,minmax(0,1fr))}

@media (max-width:900px){
  body.lujo .vd-amen-todas,body.lujo .vd-reglas-g{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.lujo .vd-comu-am{grid-template-columns:1fr}
  body.lujo .vd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Entre bloques tambien: comodidades y reglas, la misma altura */
body.lujo .vd-amen-todas{grid-auto-rows:128px !important}
body.lujo .vd-reglas-g{grid-auto-rows:128px}
body.lujo .vd-amen-todas li:not(.vd-oculta),body.lujo .vd-regla{min-height:128px !important;height:128px}

/* Tira de datos: 4 iguales; las camas van debajo de las habitaciones (11 oct) */
body.lujo .vd-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
body.lujo .vd-fact small{display:block;margin-top:2px;font-size:12px;color:#5d6a70;font-weight:400;text-transform:capitalize}

/* ============================================================
   EL GANCHO: la tira bajo las fotos con mas flow (11 oct 2026)
   Carlos: "lo que esta debajo de las fotos, 3 bed etc, le podemos dar mas
   flow, ese es el gancho". Numeros grandes, icono en circulo turquesa,
   tarjetas blancas con sombra suave, entrada escalonada y los numeros
   que suben contando. Mismo tamano las 4. Sin rayas.
   ============================================================ */
body.lujo .vd-facts{gap:14px;margin:26px 0 8px}
body.lujo .vd-fact{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;
  min-height:150px;padding:20px 22px;border:0;border-radius:18px;background:#fff;
  box-shadow:0 1px 2px rgba(11,12,13,.04),0 10px 30px -12px rgba(16,178,194,.30);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
  opacity:0;transform:translateY(14px);animation:vdFactIn .7s cubic-bezier(.2,.7,.2,1) forwards;
}
body.lujo .vd-fact:nth-child(2){animation-delay:.08s}
body.lujo .vd-fact:nth-child(3){animation-delay:.16s}
body.lujo .vd-fact:nth-child(4){animation-delay:.24s}
body.lujo .vd-fact:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(11,12,13,.05),0 18px 36px -12px rgba(16,178,194,.45)}
body.lujo .vd-fact-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#10b2c2;color:#fff;margin:0 0 auto}
body.lujo .vd-fact-i svg{width:22px;height:22px;stroke:#fff}
body.lujo .vd-fact b{font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1;color:#0b0c0d;margin-top:14px;font-variant-numeric:tabular-nums}
body.lujo .vd-fact > span:not(.vd-fact-i){font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#0b0c0d}
body.lujo .vd-fact small{font-size:12.5px;letter-spacing:0;text-transform:none;color:#5d6a70}
@keyframes vdFactIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.lujo .vd-fact{animation:none;opacity:1;transform:none;transition:none}}
@media (max-width:900px){body.lujo .vd-fact{min-height:132px}body.lujo .vd-fact b{font-size:38px}}
body.lujo .vd-fact b.vd-fact-t{font-size:24px;line-height:1.1;letter-spacing:-.02em;text-transform:capitalize;margin-top:14px}
/* Alineado: las 4 con la misma estructura (icono, valor, etiqueta, linea de apoyo) */
body.lujo .vd-fact{justify-content:flex-start}
body.lujo .vd-fact b{display:flex;align-items:flex-end;height:46px;margin-top:22px}
body.lujo .vd-fact b.vd-fact-t{font-size:34px;text-transform:none}
body.lujo .vd-fact small{display:block;min-height:16px;margin-top:2px}
body.lujo .vd-facts{grid-template-columns:repeat(5,minmax(0,1fr))}
body.lujo .vd-fact b.vd-fact-t{font-size:26px;letter-spacing:-.02em}
@media (max-width:900px){body.lujo .vd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.lujo .vd-fact{min-height:0;padding:18px 20px}
body.lujo .vd-fact-i{margin:0}
body.lujo .vd-fact b{margin-top:16px}

/* ============================================================
   TELEFONO PRIMERO (Carlos, 11 oct: "el 99% ve en telefono")
   La tira de datos en 2 columnas, tarjetas bajitas: icono a la izquierda,
   valor y etiqueta a la derecha. La quinta ocupa todo el ancho.
   ============================================================ */
@media (max-width:700px){
  body.lujo .vd-facts{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px;margin:18px 0 6px}
  body.lujo .vd-fact{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;align-content:center;align-items:center;min-height:84px;padding:14px;border-radius:16px}
  body.lujo .vd-fact:nth-child(5){grid-column:1/-1}
  body.lujo .vd-fact-i{grid-row:1/4;width:40px;height:40px;margin:0}
  body.lujo .vd-fact-i svg{width:20px;height:20px}
  body.lujo .vd-fact b{height:auto;margin:0;font-size:28px;line-height:1.05}
  body.lujo .vd-fact b.vd-fact-t{font-size:20px;line-height:1.1}
  body.lujo .vd-fact > span:not(.vd-fact-i){font-size:11px;letter-spacing:.07em}
  body.lujo .vd-fact small{min-height:0;margin:0;font-size:11.5px}
  body.lujo .vd-fact small:empty,body.lujo .vd-fact small:not(:has(*)):where(:-webkit-any(:empty)){display:none}
}
/* Telefono: comodidades y reglas en 2 columnas, fichas bajitas con el icono a la izquierda, todas iguales */
@media (max-width:700px){
  body.lujo .vd-amen-todas{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:68px !important;gap:10px !important}
  body.lujo .vd-amen-todas li:not(.vd-oculta){flex-direction:row !important;align-items:center !important;gap:10px !important;height:68px !important;min-height:68px !important;padding:10px 12px !important;font-size:13px !important;line-height:1.2}
  body.lujo .vd-amen-todas li:not(.vd-oculta) .vd-amen-ck{flex:0 0 36px;width:36px !important;height:36px !important}
  body.lujo .vd-amen-todas li:not(.vd-oculta) .vd-amen-ck svg{width:18px !important;height:18px !important}
  body.lujo .vd-reglas-g{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:76px !important;gap:10px}
  body.lujo .vd-regla{flex-direction:row !important;align-items:center !important;gap:10px !important;height:76px !important;min-height:76px !important;padding:10px 12px !important}
  body.lujo .vd-regla b{font-size:13px;line-height:1.2}
  body.lujo .vd-regla span{font-size:12px}
}
/* Telefono (ajuste): ganar a las reglas por posicion y dejar que el texto mande la altura; las de un mismo renglon igualan con 1fr */
@media (max-width:700px){
  body.lujo .vd-amen-todas{grid-auto-rows:minmax(64px,1fr) !important}
  body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n){flex-direction:row !important;align-items:center !important;gap:10px !important;height:auto !important;min-height:64px !important;padding:10px 12px !important;font-size:13px !important;line-height:1.25 !important}
  body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n) .vd-amen-ck{flex:0 0 36px;width:36px !important;height:36px !important}
  body.lujo .vd-amen-todas li:not(.vd-oculta):nth-child(n) .vd-amen-ck svg{width:18px !important;height:18px !important}
  body.lujo .vd-reglas-g{grid-auto-rows:minmax(76px,1fr) !important}
  body.lujo .vd-regla{height:auto !important;min-height:76px !important;overflow:visible}
}
@media (max-width:700px){ body.lujo .vd-regla b,body.lujo .vd-regla span{line-height:1.25 !important} body.lujo .vd-regla > div{display:grid;gap:2px} }