/* ============================================================
   apARTment Madrid — Landing
   Sistema de "lienzo escalable": el diseño original de Figma mide
   1920px de ancho. Todo se posiciona en % (igual que en Figma) dentro
   de un escenario con relación de aspecto fija, y las tipografías usan
   unidades cqw (1cqw = 1% del ancho del escenario = 19.2px a tamaño real),
   de modo que TODO escala de forma proporcional y exacta a cualquier ancho.
   ============================================================ */

:root{
  --black:#000;
  --white:#fff;
  --red:#d41010;        /* acento principal */
  --red-dark:#890000;   /* botón EN */
  --wine:#8e1f12;       /* fechas de reseñas */
  --gray:#6f6f6f;       /* "rooms" */
  --gray-light:#a2a2a2; /* números 02-04 */
  --gray-dark:#2b2b2b;  /* campos de fecha */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#fff;color:#000;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:none;}
a{color:inherit;text-decoration:none;}

/* ---------- Escenario escalable ---------- */
.stage{position:relative;width:100%;max-width:1920px;margin:0 auto;
  aspect-ratio:1920/4559;container-type:inline-size;overflow:hidden;background:#fff;
  isolation:isolate;} /* sin esto, los decorados con z-index:-1 caen detrás del fondo blanco */
.abs{position:absolute;}
.fill{position:absolute;inset:0;width:100%;height:100%;}
.fill.cover{object-fit:cover;}
.fill.contain{object-fit:contain;}

/* ---------- Caja de texto (centra vertical, como Figma) ---------- */
.t{display:flex;flex-direction:column;justify-content:center;line-height:1.05;}
.t.center{text-align:center;}
.t.right{text-align:right;}
.lh1{line-height:1;}
.nowrap{white-space:nowrap;}

/* ---------- Pesos ---------- */
.eb{font-weight:800;} .b{font-weight:700;} .rg{font-weight:400;}
.lt{font-weight:300;} .xl{font-weight:200;}

/* ---------- Colores ---------- */
.c-red{color:var(--red);} .c-wine{color:var(--wine);}
.c-gray{color:var(--gray);} .c-graylight{color:var(--gray-light);}
.c-white{color:#fff;} .c-black{color:#000;}

/* ---------- Escala tipográfica (cqw = px/19.2) ---------- */
.s170{font-size:8.854cqw;letter-spacing:-0.354cqw;line-height:1;}
.s151{font-size:7.865cqw;letter-spacing:-0.315cqw;line-height:1;}
.s130{font-size:6.771cqw;letter-spacing:-0.271cqw;line-height:1;}
.s100{font-size:5.208cqw;letter-spacing:-0.208cqw;line-height:1;}
.s49{font-size:2.552cqw;letter-spacing:-0.102cqw;}
.s40{font-size:2.083cqw;letter-spacing:-0.083cqw;}
.s35{font-size:1.823cqw;}
.s32{font-size:1.667cqw;}
.s26{font-size:1.354cqw;}
.s21{font-size:1.094cqw;}
.s20{font-size:1.042cqw;letter-spacing:-0.042cqw;}
.s19{font-size:0.99cqw;}
.s15{font-size:0.781cqw;letter-spacing:-0.031cqw;}
.ls84{letter-spacing:-0.0438cqw;}   /* textos de 21px con tracking -0.84 */
.lsd{letter-spacing:-0.0542cqw;}    /* fechas 26px tracking -1.04 */

/* ---------- Botones de la barra de navegación ---------- */
.btn{display:flex;align-items:center;justify-content:center;border-radius:0.26cqw;}
.btn-en{background:var(--red-dark);color:#fff;}
.btn-reservar{background:#000;color:#fff;}
.btn-en:hover{background:#a30000;}
.btn-reservar:hover{background:#222;}
.navlink{display:flex;align-items:center;justify-content:center;transition:opacity .15s;}
.navlink:hover{opacity:.55;}

/* ---------- Barra de reserva ---------- */
.bookbar{background:#000;border-radius:0.26cqw;}
.bookfield{background:var(--gray-dark);border-radius:0.21cqw;display:flex;align-items:center;
  padding:0 1.04cqw;color:#fff;}
.bookfield label{font-weight:200;font-size:0.78cqw;opacity:.6;margin-right:.6cqw;}
.bookbtn{background:#fff;color:#000;border-radius:0.21cqw;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background .15s;}
.bookbtn:hover{background:#eee;}

/* ---------- Reseñas: línea separadora bajo el nombre ---------- */
.review .rule{height:1px;background:#000;opacity:.85;width:100%;margin:.5cqw 0 .9cqw;}
.review p{line-height:1.25;}
.review .head{display:flex;align-items:baseline;gap:.7cqw;}

/* ---------- Botones de redes sociales (columna derecha) ---------- */
.social{background:#000;border-radius:.5cqw;display:flex;align-items:center;justify-content:center;
  transition:opacity .15s;}
.social:hover{opacity:.8;}
.social img{width:48%;height:48%;object-fit:contain;}

/* ---------- Footer ---------- */
.poi{display:flex;align-items:center;gap:.6cqw;}
.poi .pin{width:1.0cqw;height:1.5cqw;}
/* Caja #WEAREARTLOVERS: esquinas rectas, ancho según contenido (la línea nunca pisa el texto) */
.hashtag-box{background:#000;border-radius:0;display:flex;align-items:center;padding:0 1.6cqw;
  width:max-content !important;right:auto !important;white-space:nowrap;}

/* ============================================================
   ACCESIBILIDAD GLOBAL
   ============================================================ */
.skip-link{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:.6rem 1rem;z-index:1000;}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.slider:focus-visible{
  outline:3px solid var(--red);outline-offset:2px;}
body.no-scroll{overflow:hidden;}

/* ---------- Logos de valoración (Booking / Airbnb) bajo el hero ---------- */
.rating-logo{color:#3a3a3a;line-height:1;align-items:flex-start;}
.rating-logo.right{align-items:flex-end;}
.rating-logo .bk-word{font-weight:800;font-size:0.96cqw;letter-spacing:-0.035cqw;color:#3a3a3a;}
.rating-logo .ab-lockup{display:inline-flex;align-items:center;gap:0.35em;font-size:0.96cqw;}
.rating-logo .ab-belo{height:1.15em;width:1.15em;flex:0 0 auto;display:block;}
.rating-logo .ab-word{font-weight:700;font-size:1em;letter-spacing:-0.025cqw;color:#3a3a3a;}

/* ============================================================
   CABECERA MÓVIL (topbar + hamburguesa) — compartida
   Oculta en escritorio; visible por debajo de 768px.
   ============================================================ */
.m-topbar,.m-layout,.m-nav{display:none;}
.m-burger{display:none;}

@media (max-width:768px){
  /* En móvil ocultamos el "lienzo escalable" y mostramos el layout apilado. */
  .stage{display:none !important;}
  .m-topbar{display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:500;background:#fff;border-bottom:1px solid #eee;
    padding:.6rem 1rem;gap:.6rem;}
  .m-topbar .m-logo img{height:38px;width:auto;display:block;}
  .m-topbar .m-actions{display:flex;align-items:center;gap:.5rem;}
  .m-reservar{background:#000;color:#fff;font-weight:800;font-size:.8rem;letter-spacing:-.02em;
    padding:0 .9rem;height:40px;display:flex;align-items:center;border-radius:4px;}
  .m-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;background:transparent;border:0;cursor:pointer;padding:8px;}
  .m-burger span{display:block;height:3px;width:100%;background:#000;border-radius:2px;transition:.25s;}
  .m-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .m-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .m-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* Panel de navegación desplegable */
  .m-nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:#000;color:#fff;
    transform:translateX(100%);transition:transform .28s ease;z-index:600;
    padding:5rem 1.6rem 2rem;display:flex;flex-direction:column;gap:.4rem;}
  .m-nav.is-open{transform:translateX(0);}
  .m-nav a{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;padding:.85rem 0;
    border-bottom:1px solid rgba(255,255,255,.15);min-height:44px;display:flex;align-items:center;}
  .m-nav .m-lang{display:flex;gap:.6rem;border-bottom:0;padding-top:1rem;}
  .m-nav .m-lang a{border:1px solid #fff;border-radius:4px;padding:.4rem 1rem;font-size:1rem;}
  .m-nav .m-lang a.active{background:#fff;color:#000;}
  .m-nav .m-reservar-full{background:var(--red);color:#fff;border-radius:4px;justify-content:center;
    margin-top:1rem;border-bottom:0;}

  .m-layout{display:block;}
}

/* ============================================================
   LAYOUT MÓVIL — LANDING (single column, editorial)
   ============================================================ */
.m-section{padding:2.4rem 1.2rem;}
.m-section h2{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:1.2rem;}
.m-section h2 .sub{color:var(--gray);font-size:1.3rem;display:inline-block;margin-left:.3rem;}

/* Hero */
.m-hero{padding:1.4rem 1.2rem 2rem;}
.m-hero .m-hero-img{width:100%;border-radius:6px;overflow:hidden;margin-bottom:1.2rem;}
.m-hero .m-hero-img img{width:100%;height:auto;display:block;}
.m-hero .m-eyebrow{font-weight:700;font-size:1rem;margin-bottom:.4rem;}
.m-hero h1{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:1rem;}
.m-ratings{display:flex;gap:1.4rem;flex-wrap:wrap;}
.m-rating{display:flex;flex-direction:column;}
.m-rating .num{color:var(--red);font-weight:800;font-size:1.8rem;line-height:1;}
.m-rating .lbl{font-weight:300;font-size:.82rem;color:#333;}
.m-rating .m-brand{margin-top:.5rem;display:inline-flex;align-items:center;gap:.32rem;
  color:#3a3a3a;font-weight:700;font-size:.95rem;letter-spacing:-.01em;line-height:1;}
.m-rating .m-brand-bk{font-weight:800;letter-spacing:-.02em;}
.m-belo{width:.95rem;height:.95rem;flex:0 0 auto;display:block;}

/* Barra de reserva (Avirato) — móvil */
.m-book{background:#000;color:#fff;border-radius:8px;padding:1.2rem;display:flex;flex-direction:column;gap:.7rem;}
.m-book label{font-size:.75rem;font-weight:200;opacity:.7;}
.m-book .m-field{background:var(--gray-dark);border-radius:5px;min-height:48px;display:flex;align-items:center;
  padding:0 1rem;font-weight:700;}
.m-book .m-book-btn{background:#fff;color:#000;border-radius:5px;min-height:48px;display:flex;
  align-items:center;justify-content:center;font-weight:800;letter-spacing:-.02em;}

/* Tarjetas de habitaciones — móvil */
.m-rooms{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.m-room-card{display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#f6f6f6;border-radius:8px;padding:1.2rem .8rem;}
.m-room-card img{width:84px;height:auto;margin-bottom:.6rem;}
.m-room-card .num{font-size:1.6rem;font-weight:800;line-height:1;}
.m-room-card .name{font-size:1rem;font-weight:700;}

/* Reseñas — móvil */
.m-review{border-top:2px solid #000;padding:1.1rem 0;}
.m-review .r-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;}
.m-review .r-name{font-weight:700;font-size:1.3rem;}
.m-review .r-date{color:var(--wine);font-weight:700;font-size:.85rem;}
.m-review .r-title{font-weight:700;margin:.4rem 0 .2rem;}
.m-review .r-body{font-weight:400;line-height:1.4;color:#222;}
.m-review .r-src{font-weight:200;margin-top:.3rem;font-size:.9rem;}

/* Contacto / mapa — móvil */
.m-contact .m-map{width:100%;border-radius:8px;overflow:hidden;margin-top:1rem;}
.m-contact .m-map img{width:100%;height:auto;display:block;}
.m-contact .m-cdata{margin-top:1.2rem;line-height:1.7;}
.m-contact .m-cdata a{display:inline-block;}

/* Ubicación — móvil */
.m-loc .m-redtag{color:var(--red);font-weight:800;font-size:1.5rem;margin-bottom:1rem;}
.m-loc .m-loc-imgs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;}
.m-loc .m-loc-imgs img{width:100%;height:auto;border-radius:4px;display:block;}

/* Footer — móvil */
.m-footer{background:#000;color:#fff;padding:2.2rem 1.2rem;}
.m-footer .m-hash{font-size:1.4rem;margin-bottom:1.4rem;}
.m-footer .m-hash .b{font-weight:700;}
.m-footer .m-poi{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.4rem;}
.m-footer .m-poi span{font-weight:700;}
.m-footer .m-fdata{line-height:1.8;font-weight:300;border-top:1px solid rgba(255,255,255,.2);padding-top:1.2rem;}
.m-footer .m-fdata a{display:block;}
.m-footer .m-legal{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.82rem;}
.m-footer .m-legal a{text-decoration:underline;opacity:.85;}
.m-footer .m-vut{margin-top:1rem;font-size:.78rem;opacity:.7;}

/* ============================================================
   PIE LEGAL EN ESCRITORIO (enlaces + VUT) — franja bajo el stage
   ============================================================ */
.legalbar{max-width:1920px;margin:0 auto;background:#000;color:#fff;
  padding:1rem clamp(1rem,4vw,4rem);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  align-items:center;justify-content:center;font-size:.8rem;}
.legalbar a{text-decoration:underline;opacity:.85;}
.legalbar a:hover{opacity:1;}
.legalbar .vut{opacity:.7;}
@media (max-width:768px){.legalbar{display:none;}}

/* ============================================================
   ANIMACIONES — aparición al hacer scroll + micro-interacciones
   Sutiles, sin librerías. Respetan prefers-reduced-motion.
   El JS (main.js) añade .is-visible cuando el elemento entra en pantalla.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* Aparición con desplazamiento suave */
  .reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);}
  .reveal:not(.is-visible){opacity:0 !important;transform:translateY(2.2cqw);}
  .reveal-left:not(.is-visible){transform:translateX(-3cqw);}
  .reveal-right:not(.is-visible){transform:translateX(3cqw);}

  /* "Dibujado" de izquierda a derecha: para garabatos, líneas y textos a mano alzada.
     Usa clip-path, así no interfiere con transform/rotate inline. */
  .reveal-draw{transition:opacity .5s ease,clip-path 1.3s cubic-bezier(.45,0,.2,1);}
  .reveal-draw:not(.is-visible){opacity:0 !important;clip-path:inset(-15% 100% -15% -5%);}
  .reveal-draw.is-visible{clip-path:inset(-15% -5% -15% -5%);}

  /* Retardos en cascada (tarjetas, fotos en fila…) */
  .reveal.d1,.reveal-draw.d1{transition-delay:.1s;}
  .reveal.d2,.reveal-draw.d2{transition-delay:.22s;}
  .reveal.d3,.reveal-draw.d3{transition-delay:.34s;}

  /* Micro-interacciones de botones */
  .btn-reservar,.btn-en,.bookbtn,.reserve-btn{transition:transform .22s ease,background .15s ease;}
  .btn-reservar:hover,.btn-en:hover,.bookbtn:hover,.reserve-btn:hover{transform:translateY(-0.12cqw);}
  .social{transition:opacity .15s,transform .25s ease;}
  .social:hover{transform:scale(1.07);}

  /* Fotos de ubicación: elevación sutil al pasar el ratón */
  .loc-img{transition:transform .35s ease,box-shadow .35s ease;}
  .loc-img:hover{transform:translateY(-0.35cqw);box-shadow:0 0.6cqw 1.6cqw rgba(0,0,0,.28);}
}

/* ---------- Números de habitación (landing): gris → negro al pasar el ratón ---------- */
.room-group{display:contents;}
.room-group img{transition:transform .4s cubic-bezier(.22,.61,.36,1);}
.room-group:hover img{transform:scale(1.045);}
.room-num{color:var(--gray-light);transition:color .3s ease;}
.room-group:hover .room-num{color:#000;}

/* =========================================================
   MOTOR DE RESERVAS AVIRATO — Modal (lo abre la barra negra)
   La barra visible (.bookbar / .m-book) NO cambia de aspecto;
   solo actúa como disparador de este modal.
   ========================================================= */
/* Cursor "mano" en los disparadores para que se note que son clicables */
.bookfield,.m-field{cursor:pointer;}

.av-modal{position:fixed;inset:0;z-index:2000;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.av-modal.is-open{display:flex;}
.av-modal__panel{position:relative;background:#fff;border-radius:16px;
  width:100%;max-width:560px;max-height:92vh;overflow:auto;
  padding:30px 28px 32px;box-shadow:0 24px 70px rgba(0,0,0,.4);
  animation:avPop .22s ease;}
@keyframes avPop{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
.av-modal__title{font-family:'Inter',sans-serif;font-weight:800;font-size:1.5rem;
  color:#111;margin:0 0 4px;letter-spacing:-.01em;}
.av-modal__sub{font-family:'Inter',sans-serif;font-weight:300;font-size:.95rem;
  color:#555;margin:0 0 22px;line-height:1.4;}
.av-modal__close{position:absolute;top:12px;right:14px;width:38px;height:38px;
  border:0;background:transparent;font-size:1.9rem;line-height:1;color:#999;
  cursor:pointer;border-radius:9px;transition:background .15s,color .15s;}
.av-modal__close:hover{background:#f1f1f3;color:#111;}

/* Ajustes finos del widget de Avirato dentro del modal */
.av-modal .datesel-embed-container{width:100%;}
.av-modal .datesel-row.row-dates .datesel-field{flex:1 1 140px;}
.av-modal .datesel-btn{height:50px;font-size:1rem;letter-spacing:.04em;}

@media (max-width:600px){
  .av-modal__panel{padding:26px 18px 24px;border-radius:14px;}
  .av-modal__title{font-size:1.3rem;}
}