/* Rosaleda 11 · 4A — «Torre claro».
   Макет из Claude Design, перенесён в обычный CSS: у них разметка строилась
   инлайновыми стилями из состояния компонента, здесь то же самое сделано
   классами и медиазапросами. Внешних шрифтов и библиотек нет намеренно —
   страница живёт на своём nginx и не должна зависеть от чужих хостов. */

:root{
  --fondo:#faf6ef; --tinte:#f2ebe0; --panel:#fffdf9;
  --tinta:#241f19; --suave:#5b5248; --gris:#8b8073; --apagado:#96897a;
  --linea:#e5dccd; --borde:#ddd2c0;
  --acento:#a8502c; --acento-suave:#f4e3d9; --acento-campo:#f7ece5;
  --wa:#1f7a4d;
}
*{box-sizing:border-box}
/* На телефоне страница не должна «болтаться»: гасим резиновый отскок и
   любой горизонтальный сдвиг. `clip` вместо `hidden` — чтобы не появлялся
   лишний контейнер прокрутки и не ломался sticky-панель на десктопе.
   Горизонтальные ленты фотографий держат жест внутри себя (contain),
   иначе смахивание по снимку тянет за собой всю страницу. */
html{-webkit-text-size-adjust:100%; overscroll-behavior:none}
body{overflow-x:clip; overscroll-behavior:none}
.tira{overscroll-behavior-x:contain}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:18px/1.55 "Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
h1,h2{margin:0; letter-spacing:-.035em; line-height:1; font-weight:800}
button{font-family:inherit}

.tira{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tira::-webkit-scrollbar{display:none}
.tira>*{scroll-snap-align:start; flex:none}
.oculta-barra{scrollbar-width:none}
.oculta-barra::-webkit-scrollbar{display:none}

/* ---------- primera pantalla ---------- */
.nav{position:absolute; top:0; left:0; right:0; z-index:20; display:flex;
  align-items:center; justify-content:space-between; padding:26px 56px}
.marca{font-weight:800; font-size:12px; letter-spacing:.2em; text-transform:uppercase}
.idiomas{display:flex; gap:8px; font-weight:700; font-size:12px; letter-spacing:.1em}
.idiomas span{cursor:pointer; color:rgba(36,31,25,.5)}
.idiomas span.on{color:var(--acento)}
.idiomas .barra{opacity:.35; cursor:default; color:rgba(36,31,25,.5)}

.hero{position:relative; height:100vh; min-height:720px; overflow:hidden; background:var(--fondo)}
.hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Нижняя половина завесы плотнее, чем в макете: подпись и плашки лежат прямо
   на фотографии, и на светлых кадрах тонкий текст по ней читался плохо. */
.velo{position:absolute; inset:0; background:linear-gradient(to bottom,
  rgba(250,246,239,.88) 0%, rgba(250,246,239,.2) 13%, rgba(250,246,239,0) 30%,
  rgba(250,246,239,.62) 54%, rgba(250,246,239,.96) 76%, #faf6ef 100%)}
.hero-txt{position:absolute; left:56px; right:56px; bottom:80px; max-width:720px}
.hero h1{font-size:clamp(38px,4.2vw,60px); line-height:.98; letter-spacing:-.032em; text-wrap:balance}
.hero-sub{margin:18px 0 0; font-size:19.5px; line-height:1.55; font-weight:400;
  color:#3f382f; max-width:560px}
/* Плашки идут одной строкой и не переносятся. На узком экране четыре штуки
   в 375 px честно не помещаются, поэтому строка прокручивается вбок —
   но остаётся одной строкой, а не расползается на две. */
.fichas{display:flex; flex-wrap:nowrap; gap:8px; margin-top:22px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding-bottom:2px}
.fichas::-webkit-scrollbar{display:none}
.fichas span{flex:none; white-space:nowrap; padding:8px 14px; border:1px solid #d7c9b4;
  border-radius:100px; background:rgba(255,253,249,.88); font-size:13px;
  font-weight:500; color:#3b342c}
.scroll-hint{position:absolute; left:56px; bottom:30px; display:flex; align-items:center;
  gap:10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris)}
.scroll-hint .linea{display:block; width:1px; height:28px; background:rgba(36,31,25,.28)}

/* ---------- disposición ---------- */
.cuerpo{display:grid; grid-template-columns:minmax(0,1fr) 400px; align-items:start}
.columna{min-width:0}
.sec{background:var(--fondo); padding:88px 64px 24px 56px}
.sec-tinte{background:var(--tinte); padding:72px 64px}
.sec-galeria{background:var(--fondo); padding:56px 0 32px}
h2{font-size:33px; margin-bottom:6px}
.parrafo{margin:16px 0 28px; font-size:19px; line-height:1.62; font-weight:300;
  color:var(--suave); max-width:680px; text-wrap:pretty}

/* ---------- promesas ---------- */
.promesa{padding:32px 0; border-top:1px solid var(--linea);
  display:grid; grid-template-columns:120px minmax(0,1fr); gap:32px}
.promesa .num{font-weight:800; font-size:33px; line-height:1; letter-spacing:-.04em; color:var(--acento)}
.promesa .tit{font-weight:700; font-size:23px; line-height:1.15; letter-spacing:-.025em; margin-bottom:10px}
.promesa .txt{font-size:17.5px; line-height:1.6; font-weight:300; color:var(--suave);
  max-width:600px; text-wrap:pretty}

/* ---------- galería ---------- */
.titulo-fila{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:0 56px 16px}
.ver-todas{flex:none; padding:10px 18px; border:1px solid var(--borde); border-radius:100px;
  background:var(--panel); color:var(--tinta); font-size:12.5px; font-weight:600; cursor:pointer}
#tira{gap:6px; padding:0 56px}
#tira figure{margin:0; width:400px}
#tira img{width:400px; height:500px; object-fit:cover; background:#eae1d4;
  cursor:zoom-in; border-radius:2px}
#tira figcaption{font-size:11px; font-weight:500; line-height:1.3; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris); padding:12px 2px 0}

/* ---------- pasos ---------- */
.pasos{display:grid; grid-template-columns:1fr 1fr; gap:0 56px; max-width:900px}
.paso{display:grid; grid-template-columns:32px 1fr; gap:14px; padding:16px 0;
  border-top:1px solid #e0d5c3}
.paso .num{font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--acento)}
.paso .txt{font-size:17px; line-height:1.55; font-weight:300; color:#443c33}
.wa-linea{display:inline-block; margin-top:26px; font-size:15.5px; font-weight:500;
  color:var(--wa); text-decoration:none; border-bottom:1px solid rgba(31,122,77,.35);
  padding-bottom:2px}

/* ---------- equipamiento ---------- */
.equipo{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:0 28px; max-width:900px}
.equipo div{display:flex; gap:10px; align-items:baseline; padding:8px 0;
  font-size:15.5px; font-weight:300; color:#443c33}
.equipo i{font-style:normal; color:var(--acento); font-size:11px}

/* ---------- mapa ---------- */
.mapa{position:relative; height:380px; max-width:640px; background:var(--panel);
  border:1px solid var(--linea); border-radius:12px; overflow:hidden}
.anillo{position:absolute; left:50%; top:50%; border-radius:50%}
.a1{width:32%; padding-bottom:32%; margin:-16% 0 0 -16%; border:1px solid #e0d5c3}
.a2{width:56%; padding-bottom:56%; margin:-28% 0 0 -28%; border:1px solid #e6ddce}
.a3{width:80%; padding-bottom:80%; margin:-40% 0 0 -40%; border:1px solid #ebe4d8}
.centro{position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px;
  background:var(--acento); border-radius:50%; box-shadow:0 0 0 7px rgba(168,80,44,.14)}
.punto{position:absolute; transform:translateY(-50%); display:flex; flex-direction:column;
  max-width:130px}
.punto b{display:block; width:5px; height:5px; background:var(--tinta); border-radius:50%;
  margin-bottom:5px}
.punto .nom{display:block; font-size:11px; line-height:1.25; font-weight:400; color:#3b342c}
.punto .min{display:block; font-size:10px; line-height:1.2; letter-spacing:.06em; color:var(--apagado)}
.lista-barrio{max-width:640px; margin-top:32px}
.lista-barrio div{display:flex; align-items:baseline; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--linea)}
.lista-barrio .nom{flex:1; font-size:15.5px; font-weight:300; color:#443c33}
.lista-barrio .min{font-size:13px; letter-spacing:.04em; color:var(--apagado)}

/* ---------- pie ---------- */
.pie{background:var(--fondo); padding:72px 56px 64px; border-top:1px solid var(--linea)}
.pie-marca{font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:12px}
.wa-pie{font-size:13.5px; font-weight:600; color:var(--wa); text-decoration:none}
.pie-txt{font-size:13.5px; font-weight:300; line-height:1.7; color:var(--gris); margin-top:14px}

/* ---------- panel de reserva ---------- */
.panel-wrap{position:sticky; top:0; height:100vh; display:flex; align-items:center;
  padding:0 56px 0 0}
.panel{width:100%; background:var(--panel); border:1px solid var(--linea); border-radius:18px;
  padding:26px; max-height:92vh; overflow-y:auto;
  box-shadow:0 1px 2px rgba(36,31,25,.04),0 16px 40px rgba(36,31,25,.07)}
.panel-tit{font-weight:800; font-size:21px; letter-spacing:-.025em; margin-bottom:4px}
.panel-sub{font-size:13px; font-weight:300; color:var(--gris); margin-bottom:20px}

.campos{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--borde);
  border-radius:10px; overflow:hidden}
.campo{padding:12px 14px; background:var(--panel); border:0; text-align:left;
  color:var(--tinta); cursor:pointer}
.campo+.campo{border-left:1px solid var(--borde)}
.campo.activo{background:var(--acento-campo)}
.campo small{display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--apagado); margin-bottom:4px}
.campo b{font-weight:600; font-size:15px}

.mes-nav{display:flex; align-items:center; justify-content:space-between; margin:18px 0 12px}
.mes-nav strong{font-weight:800; font-size:17px; letter-spacing:-.02em; text-transform:capitalize}
.redondo{width:36px; height:36px; border-radius:50%; border:1px solid var(--borde);
  background:var(--panel); color:var(--tinta); font-size:16px; line-height:1; cursor:pointer}
.redondo:disabled{opacity:.35; cursor:default}

.dow{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:6px}
.dow span{text-align:center; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--apagado)}
.dias{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.dia{aspect-ratio:1/1.06; min-height:40px; border:1px solid transparent; background:transparent;
  border-radius:7px; cursor:pointer; padding:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; color:var(--tinta)}
.dia .n{font-size:14.5px; line-height:1}
.dia .p{font-size:10px; line-height:1; color:var(--apagado)}
.dia:disabled{color:#c6bcac; cursor:default}
.dia.ocupado .n{text-decoration:line-through; text-decoration-thickness:1px}
.dia.hueco{background:transparent; cursor:default}

/* Свободные даты — белые плитки с тонкой рамкой. Раньше и свободные, и
   занятые были прозрачными и отличались только цветом цифры: с телефона
   разница почти не читалась. */
.dia.libre{background:#fff; border-color:#ece3d5; box-shadow:0 1px 1px rgba(36,31,25,.03)}
.dia.libre .n{font-weight:500}
.dia.libre .p{color:#8a7f70; font-weight:500}
.dia.libre:hover{background:var(--acento-campo); border-color:#e6cfc2}

.dia.medio{background:var(--acento-suave); border-color:transparent; border-radius:0; box-shadow:none}
.dia.punta{background:var(--acento); border-color:var(--acento); color:#fff; box-shadow:none}
.dia.punta .n{font-weight:600}
.dia.punta .p{color:rgba(255,255,255,.82)}
.dia.ini{border-radius:7px 0 0 7px}
.dia.fin{border-radius:0 7px 7px 0}

.aviso{font-size:14px; font-weight:400; line-height:1.45; color:#6f6459; margin:12px 0 0}
/* Сообщения, из-за которых бронь не складывается — минимальный срок и занятые
   ночи, — раньше выглядели как та же серая подсказка, что и «выберите выезд».
   Гость их не замечал и повторял тот же клик. */
.aviso.alerta{font-weight:500; font-size:14.5px; color:var(--acento);
  background:var(--acento-suave); border-radius:9px; padding:11px 13px; margin-top:13px}
.huespedes{display:grid; gap:8px; margin:14px 0 0}
.fila-huesped{display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border:1px solid var(--linea); border-radius:8px; background:var(--panel)}
.fila-huesped>span{font-size:14px; font-weight:300; color:#443c33}
.contador{display:flex; align-items:center; gap:14px}
.contador .redondo{width:30px; height:30px}
.contador output{min-width:14px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums}

.desglose{margin:16px 0 0}
.desglose .linea{display:flex; justify-content:space-between; padding:6px 0;
  font-size:13.5px; font-weight:300; color:#7a7065}
.desglose .total{display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--linea); margin-top:8px; padding-top:12px}
.desglose .total span{font-size:14px; color:#443c33}
.desglose .total b{font-weight:800; font-size:24px; letter-spacing:-.03em}

.cta{display:block; width:100%; margin-top:16px; padding:16px; border:0; border-radius:100px;
  background:var(--acento); color:#fff; font-weight:700; font-size:15.5px; text-align:center;
  text-decoration:none; cursor:pointer}
.cta.apagado{background:#e2d8c8; color:var(--apagado); cursor:default}
.wa-boton{display:block; width:100%; margin-top:10px; padding:14px; border:1px solid var(--wa);
  border-radius:100px; background:transparent; color:var(--wa); font-weight:600; font-size:14.5px;
  text-align:center; text-decoration:none}
.nota-panel{text-align:center; font-size:11.5px; font-weight:300; color:var(--apagado); margin:12px 0 0}

/* ---------- barra y hoja del móvil ---------- */
.barra{position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  align-items:center; gap:10px; padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  background:rgba(250,246,239,.94); backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid var(--linea)}
.barra-txt{min-width:0; flex:1}
.barra-tit{font-weight:700; font-size:14.5px; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.barra-sub{font-size:11px; font-weight:300; color:var(--gris); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.wa-barra{flex:none; display:flex; align-items:center; justify-content:center; min-height:46px;
  padding:0 15px; border:1px solid var(--wa); border-radius:100px; color:var(--wa);
  font-weight:600; font-size:13.5px; text-decoration:none; white-space:nowrap}
.barra-boton{flex:none; min-height:46px; padding:0 20px; border:0; border-radius:100px;
  background:var(--acento); color:#fff; font-weight:700; font-size:14.5px; cursor:pointer;
  white-space:nowrap}

.sheet-fondo{position:fixed; inset:0; z-index:50; background:rgba(36,31,25,.38); display:none}
.sheet-fondo.abierto{display:block}
.sheet{position:fixed; left:0; right:0; bottom:0; background:var(--panel);
  border-radius:22px 22px 0 0; padding:10px 20px 24px; max-height:92vh; overflow-y:auto;
  overscroll-behavior:contain; box-shadow:0 -18px 50px rgba(36,31,25,.16)}
.asa{width:38px; height:4px; background:#e0d5c3; border-radius:2px; margin:0 auto 18px}

/* ---------- visor ---------- */
.visor{position:fixed; inset:0; z-index:60; background:var(--fondo);
  flex-direction:column; display:none}
.visor.abierto{display:flex}
.visor-cab{display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; flex:none}
.visor-cuenta{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7a7065}
.visor-cerrar{width:40px; height:40px; border-radius:50%; border:1px solid var(--borde);
  background:var(--panel); color:var(--tinta); font-size:17px; cursor:pointer}
.visor-tira{flex:1; gap:0; align-items:center; overscroll-behavior:contain}
.visor-tira .slide{width:100vw; height:100%; display:flex; align-items:center;
  justify-content:center; padding:0 48px}
.visor-tira img{max-width:100%; max-height:100%; object-fit:contain; margin:0 auto; border-radius:2px}
.visor-pie{text-align:center; padding:14px 18px 26px; font-size:12.5px; font-weight:300;
  color:var(--apagado); flex:none}
/* Стрелки листания. На телефоне их нет: там снимки перелистываются пальцем,
   а кнопки только закрывали бы кадр. */
.visor-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:50px; height:50px; border-radius:50%; border:1px solid var(--borde);
  background:rgba(255,253,249,.94); color:var(--tinta); font-size:22px; line-height:1;
  cursor:pointer; box-shadow:0 2px 12px rgba(36,31,25,.10)}
.visor-nav:hover{background:#fff; border-color:var(--acento); color:var(--acento)}
.visor-nav.ant{left:16px}
.visor-nav.sig{right:16px}

/* ---------- móvil ---------- */
@media (max-width:899px){
  body{padding-bottom:96px}
  .nav{padding:20px 22px}
  .hero{height:100svh; min-height:640px}
  .hero-txt{left:22px; right:22px; bottom:96px; max-width:none}
  .hero h1{font-size:clamp(30px,8.4vw,40px)}
  .hero-sub{font-size:17px; font-weight:400; max-width:360px}
  /* На телефоне плашки ужимаем, чтобы влезало как можно больше без переноса. */
  .fichas{gap:6px; margin-top:18px}
  .fichas span{padding:7px 11px; font-size:12px}
  .scroll-hint{display:none}

  .cuerpo{display:block}
  .panel-wrap{display:none}
  .sec{padding:48px 22px 12px}
  .sec-tinte{padding:44px 22px}
  .sec-galeria{padding:40px 0 20px}
  h2{font-size:26px}
  .parrafo{font-size:16.5px}

  .promesa{display:block; padding:26px 0}
  .promesa .num{font-size:26px; margin-bottom:10px}
  .promesa .tit{font-size:20px}
  .promesa .txt{font-size:16px}
  .paso .txt{font-size:16px}
  .equipo div{font-size:15px}
  .lista-barrio .nom{font-size:15px}

  .titulo-fila{padding:0 22px 16px}
  #tira{gap:4px; padding:0 22px}
  #tira figure, #tira img{width:300px}
  #tira img{height:375px}

  .pasos{display:block}
  .equipo{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .mapa{height:300px}
  .punto{max-width:98px}
  .lista-barrio{margin-top:24px}
  .pie{padding:44px 22px 40px}

  .barra{display:flex}
  .visor-tira .slide{padding:0 14px}
  .visor-nav{display:none}
}