/* ---------------------------------------------------------------------------
   Written by the rebuild. Everything above this file is the site's own
   stylesheet, byte-identical from the capture.

   Three jobs, and nothing else:
     1. the hero, which the archive drove from JavaScript that is now gone
     2. the plan's H2 block, styled to match the sections around it
     3. a responsive layer -- the original has ONE media query and is unusable
        on a phone, and the audit measures that rather than assuming it
--------------------------------------------------------------------------- */
/* The hero. `.headerimg` is `position:absolute; height:690px` and the whole
   header -- nav, weather chip, hero button, the "Reservas 67 2105.1600" band --
   is designed to sit ON TOP of it: `.header__row` is rgba(0,0,0,.7) and
   `.header__tel` is rgba(0,0,0,.8), translucent bars over a photograph.

   The stylesheet gives neither a z-index, because on the live site the JS that
   set the backgrounds also owned the stacking. Restore the intended order:
   photograph behind, translucent header in front. Without this the absolutely
   positioned div paints over everything in the first 690px and the hero button
   and the Reservas band disappear -- which is exactly what happened the first
   time this was built. */
#headerimgs { z-index: 0; }
.headerimg { z-index: 0; }
.header__lang, .header__row, .header__weather, .header__hero, .header__tel {
    position: relative; z-index: 1;
}
#headerimg1 { background-image: url(/assets/images/1.jpg); }

/* The room carousel. bxSlider's JavaScript wrapped these `.img-slide` divs in
   a viewport and set inline widths and a transform, so three photographs sat
   side by side; the markup itself carries no layout at all. With the script
   gone they stacked vertically and the homepage grew from 3,528px to 8,185px
   -- the same photographs, the wrong shape.

   This reproduces what the slider produced, in CSS: three across at desktop
   width, the rest reachable by scrolling the strip. It needs no script, it
   keeps working when one fails to load, and on a phone it is a swipe rather
   than a carousel with 44px arrows nobody can hit. */
.slide-home {
    display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 1.5em;
}
.slide-home .img-slide {
    flex: 0 0 calc((100% - 8px) / 3); scroll-snap-align: start; min-width: 0;
}
.slide-home .img-slide img { width: 100%; height: auto; display: block; }

.skip {
    position: absolute; left: 0; top: -60px; z-index: 100;
    background: #3d2c00; color: #fff; padding: 10px 16px;
}
.skip:focus { top: 0; }

a.skip { display: inline-flex; align-items: center; min-height: 44px; }

.rp-plan { padding: 3em 0 1em; }
.rp-sec { margin: 0 0 2.5em; }
.rp-sec h2 {
    font-family: "aleolight", Georgia, serif; color: #3d2c00;
    border-bottom: 1px solid #e6dcc4; padding-bottom: .35em; margin-bottom: .8em;
}
.rp-sec ul { padding-left: 1.2em; }
.rp-sec li { margin: .25em 0; }
.rp-sec a { color: #9f6700; }
.rp-rooms { list-style: none; padding-left: 0; }
.rp-rooms li { margin: .4em 0; }
.also ul { list-style: none; padding-left: 0; }
.also li { display: inline-block; margin: 0 1.2em .4em 0; }

/* --- the responsive layer ---------------------------------------------------
   The original stylesheet has a single `@media (max-width:767px)` rule and a
   fixed 1170px container, so on a 320px phone every page scrolled sideways.
   Scoped to <=900px so the desktop rendering it was measured against cannot
   move. */
@media (max-width: 900px) {
    body { overflow-x: hidden; }

    /* --- tap targets, measured rather than assumed ---------------------------
       These were written OUTSIDE this media query, so they applied at every
       width: the desktop footer grew from 302px to 504px, the nav from 63px to
       104px, and short links in the plan list rendered staggered because
       min-width:44px + justify-content:center re-centres them. The comment two
       lines up said "scoped to <=900px so the desktop rendering cannot move".
       It was not scoped, and the desktop rendering moved. */
    a.tap, .header__nav a, .nav-small a, footer a, .rp-sec a, .box-map a,
    .header__tel a, .assign-planet a {
        display: inline-flex; align-items: center; min-height: 44px;
    }
    /* min-WIDTH too, and on the same selector list. Splitting it left the
       footer's social icons at 33x44 and 42x44 -- tall enough, too narrow --
       which is the axis nobody checks. */
    a.tap, .header__nav a, .nav-small a, .header__tel a, .assign-planet a,
    footer a img, footer a {
        min-width: 44px; justify-content: center;
    }
    footer a:not(:has(img)) { justify-content: flex-start; }
    .container { width: auto !important; max-width: 100%;
                 padding-left: 16px; padding-right: 16px; }
    .headerimg, #headerimgs { height: 300px; }
    .header__hero { padding: 2.5em 0; font-size: 1.15em; }
    .header__brand img { max-width: 200px; height: auto; }
    .header__nav { float: none !important; text-align: center; }
    .header__nav ul { padding-left: 0; }
    .header__nav li { float: none !important; display: inline-block; }
    .header__nav a, .nav-small a {
        display: inline-flex; align-items: center; min-height: 44px;
        padding: 6px 10px;
    }
    .header__tel, .header__weather { float: none !important; text-align: center; }
    .row { margin-left: 0; margin-right: 0; }
    [class^="col-"], [class*=" col-"] { width: 100% !important; float: none !important;
                                        padding-left: 0; padding-right: 0; }
    .gallery-img img, .img-slide img, img { max-width: 100%; height: auto; }
    .box-map { max-width: 100%; }
    .slide-home .img-slide { flex-basis: 82%; }
    footer a { display: inline-flex; align-items: center; min-height: 44px; }
    h1 { font-size: 1.7em; }
    h2 { font-size: 1.3em; }
    body, p, li, td { font-size: 15px; }
    small, .small { font-size: 12px; }
    input, select, textarea, button { font-size: 16px; min-height: 44px; }
    a { overflow-wrap: anywhere; }
}