/* =========================================================
   CLUB AMANDA — Design system
   Tema único: oscuro. Un acento: degradado rojo > coral > naranjo > amarillo.
   Radios: 0 en bloques, pill solo en botones/tags.
   ========================================================= */

:root{
  --bg: #0b0b0c;
  --bg-alt: #141414;
  --bg-alt-2: #1a1a1a;
  --fg: #f6f4f0;
  --fg-dim: #b6b2ab;
  --fg-faint: #7c7973;
  --line: rgba(246,244,240,.14);
  --line-soft: rgba(246,244,240,.08);

  --grad: linear-gradient(90deg, #e01553 0%, #f0472f 32%, #f68a2e 62%, #fbc531 100%);
  --grad-diag: linear-gradient(135deg, #e01553 0%, #f0472f 34%, #f68a2e 64%, #fbc531 100%);
  --grad-soft: linear-gradient(135deg, rgba(224,21,83,.35), rgba(246,138,46,.25));

  --font-display: 'Cabinet Grotesk', 'General Sans', sans-serif;
  --font-body: 'General Sans', -apple-system, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 76px;

  --container: 1360px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

html{
  overflow-x: hidden;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

p{ margin:0; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--fg); color:var(--bg); padding:.8em 1.2em; z-index:999;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* grain overlay, fixed, cheap */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.section-head{
  max-width: 640px;
  padding: 0 var(--pad, 6vw);
  margin: 0 0 3rem;
}
.section-head h2{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.section-head p{ margin-top:1rem; color: var(--fg-dim); font-size:1.05rem; max-width:46ch; }

.eyebrow{
  font-family: var(--font-body);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 .9rem;
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding: 1em 1.8em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight:600;
  font-size:.95rem;
  white-space:nowrap;
  border:1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.btn:active{ transform: scale(.97); }

.btn--gradient{
  background: var(--grad);
  color:#100404;
}
.btn--gradient:hover{ box-shadow: 0 10px 30px rgba(240,71,47,.35); transform: translateY(-2px); }

.btn--ghost{
  border-color: var(--line);
  color: var(--fg);
  background: rgba(255,255,255,.02);
}
.btn--ghost:hover{ border-color: rgba(246,244,240,.4); }

.btn--sm{ padding:.7em 1.3em; font-size:.85rem; }
.btn--lg{ padding:1.15em 2.4em; font-size:1.02rem; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: linear-gradient(to bottom, rgba(11,11,12,.85), rgba(11,11,12,0));
  backdrop-filter: blur(6px);
}
.nav__inner{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding: 0 6vw;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
}
.nav__logo{
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:.02em;
}
.nav__links{
  display:flex; gap:2.2rem;
  font-size:.92rem; font-weight:500; color: var(--fg-dim);
}
.nav__links a{ transition: color .25s; }
.nav__links a:hover{ color: var(--fg); }

.nav__actions{ display:flex; align-items:center; gap:1rem; }
.nav__burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:.4rem;
}
.nav__burger span{ width:22px; height:2px; background:var(--fg); transition: transform .3s var(--ease), opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height: 100dvh;
  display:flex; align-items:flex-end;
  padding: 6rem 6vw 4.5rem;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(11,11,12,.96) 0%, rgba(11,11,12,.55) 42%, rgba(11,11,12,.15) 68%, rgba(11,11,12,.55) 100%);
}
.hero__wash{
  position:absolute; inset:0;
  background: var(--grad-diag);
  mix-blend-mode: color-dodge;
  opacity:.16;
}
.hero__content{
  position:relative; z-index:1;
  max-width: 760px;
}
.hero__tag{
  font-weight:600; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg-dim);
  margin: 0 0 1.2rem;
}
.hero__title{
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  max-width: 15ch;
}
.hero__sub{
  margin: 1.4rem 0 2.2rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--fg-dim);
}
.hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow:hidden;
  padding: 1.6rem 0;
  background: var(--bg-alt);
}
.marquee__track{
  display:flex; align-items:center;
  gap: 1.6rem;
  width:max-content;
  animation: marquee 34s linear infinite;
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  white-space:nowrap;
}
.marquee__track span:nth-child(odd){ color: var(--fg); }
.marquee__track span:nth-child(even){
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:.8em;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}

/* =========================================================
   WHY (editorial split, asymmetric)
   ========================================================= */
.why{ padding: 8rem 6vw; }
.why__grid{
  max-width: var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 4vw;
  align-items:center;
}
.why__text h2{ font-size: clamp(2.2rem, 4.2vw, 3.4rem); max-width:13ch; }
.why__text p{ margin-top:1.6rem; color: var(--fg-dim); font-size:1.08rem; max-width:42ch; }
.why__media{ position:relative; }
.why__media img{
  width:100%; aspect-ratio: 4/5; object-fit:cover;
  margin-right: -6vw;
}

/* =========================================================
   BENTO — motivos
   ========================================================= */
.motivos{ padding: 7rem 0; }
.bento{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 6vw;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 1.1rem;
}
.bento__item{
  position:relative;
  overflow:hidden;
  background: var(--bg-alt);
  display:flex; align-items:flex-end;
}
.bento__item img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .8s var(--ease);
}
.bento__item:hover img{ transform: scale(1.06); }
.bento__item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%);
}
.bento__label{
  position:relative; z-index:1;
  padding: 1.4rem;
  font-family: var(--font-display); font-weight:700;
  font-size:1.15rem;
}
.bento__label--big{ font-size: clamp(1.3rem,2vw,1.7rem); line-height:1.15; }

.bento__item--xl{ grid-column: span 2; grid-row: span 2; }
.bento__item--tall{ grid-row: span 2; }
.bento__item--grad{
  background: var(--grad-diag);
}
.bento__item--grad .bento__label{ color:#160705; }
.bento__item--dark{
  background: var(--bg-alt-2);
  border: 1px solid var(--line);
}

/* =========================================================
   NOCHES — typographic statement
   ========================================================= */
.noches{
  padding: 8rem 6vw;
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 4vw;
  align-items:center;
  background: var(--bg-alt);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.noches__stack{ display:flex; flex-direction:column; }
.noches__day{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing:-.02em;
}
.noches__day--grad{
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.noches__info p{ color: var(--fg-dim); font-size:1.08rem; max-width:40ch; }
.noches__note{ margin-top:1.2rem !important; color: var(--fg-faint) !important; font-size:.95rem !important; }

/* =========================================================
   PERSONALIZA — horizontal scroll snap
   ========================================================= */
.personaliza{ padding: 7rem 0; }
.scroller{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 6vw 1rem;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar{ display:none; }
.scroller__track{
  display:flex; gap:1.1rem;
  width:max-content;
}
.pcard{
  scroll-snap-align:start;
  width: min(280px, 76vw);
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  padding: 2rem 1.6rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.pcard i{
  font-size:1.6rem;
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pcard h3{ font-size:1.15rem; font-weight:700; }
.pcard p{ color: var(--fg-dim); font-size:.92rem; }

/* =========================================================
   GALERIA — masonry inmersiva
   ========================================================= */
.galeria{ padding: 7rem 0 8rem; }
.masonry{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 6vw;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.2rem;
}
.masonry__item{
  width:100%; height:100%; object-fit:cover;
}
.m1{ grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 3/4; align-self:start; }
.m2{ grid-column: 6 / 9; grid-row: 1 / 2; aspect-ratio: 4/3; margin-top: 3rem; }
.m3{ grid-column: 9 / 13; grid-row: 1 / 3; aspect-ratio: 4/5; }
.m4{ grid-column: 6 / 9; grid-row: 2 / 3; aspect-ratio: 4/5; }
.m5{ grid-column: 1 / 13; aspect-ratio: 21/9; margin-top: 1.5rem; }

/* =========================================================
   BENEFICIOS
   ========================================================= */
.beneficios{ padding: 7rem 6vw; }
.beneficios__grid{
  max-width: var(--container);
  margin: 0 auto;
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 5vw;
}
.beneficios__text h2{ font-size: clamp(2.1rem,4vw,3.2rem); max-width:12ch; margin:.8rem 0 2rem; }
.beneficios__list{ display:grid; grid-template-columns:1fr 1fr; gap: 2.4rem 2.4rem; }
.beneficios__list li{ display:flex; gap:1rem; }
.beneficios__num{
  font-family: var(--font-display); font-weight:800; font-size:1.3rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg-faint);
}
.beneficios__list h3{ font-size:1.08rem; font-weight:700; margin-bottom:.4rem; }
.beneficios__list p{ color: var(--fg-dim); font-size:.94rem; }

/* =========================================================
   FAQ — accordion
   ========================================================= */
.faq{ padding: 7rem 6vw; }
.accordion{ max-width: 780px; margin:0 auto; border-top:1px solid var(--line); }
.accordion__item{ border-bottom:1px solid var(--line); }
.accordion__trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  background:none; border:none; color:var(--fg);
  padding: 1.6rem 0;
  text-align:left;
  font-family: var(--font-body); font-weight:600; font-size:1.05rem;
}
.accordion__trigger i{ flex:none; transition: transform .35s var(--ease); color: var(--fg-dim); }
.accordion__trigger[aria-expanded="true"] i{ transform: rotate(45deg); }
.accordion__panel{
  max-height:0; overflow:hidden;
  transition: max-height .4s var(--ease), opacity .3s;
  opacity:0;
}
.accordion__panel p{ padding: 0 0 1.6rem; color: var(--fg-dim); max-width:60ch; }
.accordion__item.is-open .accordion__panel{ opacity:1; }

/* =========================================================
   FORM
   ========================================================= */
.reserva{ padding: 7rem 6vw 8rem; background: var(--bg-alt); }
.reserva .section-head{ padding:0; max-width:640px; }
.form{ max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:1.4rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; position:relative; }
.field label{ font-size:.85rem; font-weight:600; color: var(--fg-dim); }
.field input, .field select, .field textarea{
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: .9rem 1rem;
  font-size:.98rem;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--fg-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: rgba(246,244,240,.5);
}
.field select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%), linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size:5px 5px; background-repeat:no-repeat; }
.field__error{
  display:none;
  font-size:.8rem; color:#f68a2e;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{ border-color:#e01553; }
.field.is-invalid .field__error{ display:block; }

.form__success{
  display:none;
  color: var(--fg-dim); font-size:.92rem;
}
.form.is-sent .form__success{ display:block; }
.form.is-sent .btn{ opacity:.5; pointer-events:none; }

/* =========================================================
   FINAL / FOOTER
   ========================================================= */
.final{ position:relative; }
.final__media{ position:relative; height: 78vh; min-height:520px; }
.final__media img{ width:100%; height:100%; object-fit:cover; }
.final__scrim{ position:absolute; inset:0; background: linear-gradient(to top, var(--bg) 0%, rgba(11,11,12,.55) 45%, rgba(11,11,12,.25) 100%); }
.final__content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  text-align:center;
}
.final__content h2{ font-size: clamp(2.4rem, 6vw, 4.6rem); }

.final__bar{
  background: var(--bg);
  padding: 3rem 6vw;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  flex-wrap:wrap;
  border-top:1px solid var(--line-soft);
}
.final__meta{ display:flex; align-items:center; gap:1.6rem; color: var(--fg-dim); font-size:.9rem; }
.final__social{ display:flex; gap:1rem; font-size:1.15rem; }
.final__social a{ color: var(--fg-dim); transition: color .25s; }
.final__social a:hover{ color: var(--fg); }
.final__rights{ color: var(--fg-faint); font-size:.85rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .why__grid, .noches, .beneficios__grid{ grid-template-columns:1fr; }
  .why__media img{ margin-right:0; aspect-ratio: 16/9; }
  .noches{ padding-bottom: 5rem; }
  .noches__info{ margin-top:2rem; }
  .beneficios__list{ margin-top:2.5rem; }
  .bento{ grid-template-columns: repeat(2, 1fr); grid-auto-rows:200px; }
  .bento__item--xl{ grid-column: span 2; grid-row: span 1; aspect-ratio:16/9; height:auto; }
  .masonry{ grid-template-columns: repeat(2,1fr); }
  .m1{ grid-column:1/2; grid-row:auto; }
  .m2{ grid-column:2/3; grid-row:auto; margin-top:2rem; }
  .m3{ grid-column:1/2; grid-row:auto; }
  .m4{ grid-column:2/3; grid-row:auto; margin-top:0; }
  .m5{ grid-column:1/3; }
}

@media (max-width: 768px){
  :root{ --nav-h: 64px; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .nav__links{
    display:flex; flex-direction:column;
    position:fixed; top: var(--nav-h); left:0; right:0;
    background: var(--bg);
    padding: 2rem 6vw; gap:1.6rem;
    border-bottom: 1px solid var(--line);
  }

  .hero{ padding: 5.5rem 6vw 3.5rem; align-items:flex-end; }
  .hero__title{ font-size: clamp(2.2rem, 9vw, 3rem); }

  .why, .motivos, .noches, .personaliza, .galeria, .beneficios, .faq, .reserva{ padding-left:0; padding-right:0; }
  .why{ padding: 5rem 6vw; }
  .why__text h2{ max-width:none; }
  .motivos{ padding:5rem 0; }
  .bento{ padding:0 6vw; grid-template-columns:1fr; grid-auto-rows:260px; }
  .bento__item--xl{ grid-column:1; aspect-ratio:auto; }
  .noches{ padding:5rem 6vw; }
  .noches__day{ font-size: clamp(2.4rem, 14vw, 3.6rem); }
  .personaliza{ padding:5rem 0; }
  .galeria{ padding:5rem 0 6rem; }
  .masonry{ padding:0 6vw; grid-template-columns:1fr; }
  .m1,.m2,.m3,.m4,.m5{ grid-column:1; margin-top:0; }
  .beneficios{ padding:5rem 6vw; }
  .beneficios__list{ grid-template-columns:1fr; }
  .faq{ padding:5rem 6vw; }
  .reserva{ padding:5rem 6vw 6rem; }
  .form__row{ grid-template-columns:1fr; }
  .final__media{ height:62vh; min-height:420px; }
  .final__bar{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
}

@media (max-width: 480px){
  .section-head{ margin-bottom:2.2rem; }
  .why__text p, .noches__info p{ max-width:none; }
  .final__content{ gap:1.4rem; }
}