/* Estilo playa (ver DESIGN.md): misma familia que GO SURF —café, terracota, salvia, Jost y Poppins—
   pero con fondo de arena, foto real de la costa, esquinas suaves y fotos con marco tipo polaroid. */
:root {
  --bone: #EDEFE9;
  --sand-bg: #F4ECDF;
  --cream: #FBF2E9;
  --paper: #FFFBF4;
  --sand: #E9DCC6;
  --sage: #55655A;
  --sage-d: #3D4941;
  --sea: #4E7C7A;
  --deep: #2E2418;
  --brown: #5A4833;
  --clay: #A9613C;
  --clay-d: #8E4E2E;
  --fg-2: rgba(90, 72, 51, .76);
  --fg-3: rgba(90, 72, 51, .5);
  --line-2: rgba(90, 72, 51, .3);
  --shadow: 0 14px 30px -18px rgba(90, 72, 51, .55);
  --disp: 'Jost', Futura, 'Century Gothic', sans-serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);

  /* Nombres que también usa el panel */
  --bg: var(--sand-bg);
  --panel: var(--cream);
  --line: rgba(90, 72, 51, .16);
  --text: var(--brown);
  --muted: var(--fg-2);
  --accent: var(--sage);
  --accent-ink: var(--paper);
  --warn: var(--clay);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  /* arena: grano fino encima del color */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--sand-bg);
  color: var(--brown);
  font: 300 16px/1.65 var(--sans);
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px clamp(16px, 4.5vw, 40px);
  background: rgba(244, 236, 223, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font: 300 19px/1 var(--disp); letter-spacing: .32em; text-transform: uppercase;
}
.brand svg { width: 30px; height: 30px; flex: none; color: var(--clay); }
.lang {
  min-height: 40px; padding: 0 16px; cursor: pointer; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-2);
  font: 400 12px/1 var(--disp); letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lang:hover { background: var(--brown); color: var(--paper); }

main { max-width: 1180px; margin: 0 auto; padding: 22px clamp(16px, 4.5vw, 40px) 170px; }
h1 {
  font: 300 clamp(26px, 5.4vw, 46px)/1.12 var(--disp);
  letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 8px; text-wrap: balance;
}
.sub { color: var(--fg-2); margin: 0 0 22px; max-width: 60ch; }
.label, .eyebrow {
  font: 400 12px/1.4 var(--disp); letter-spacing: .28em; text-transform: uppercase; color: var(--fg-2);
}
.label { margin: 34px 0 16px; display: flex; align-items: center; gap: 14px; }
/* línea de ola en vez de raya recta */
.label::after {
  content: ""; flex: 1; height: 8px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 4c5 0 5-3 10-3s5 6 10 6 5-6 10-6 5 3 10 3' fill='none' stroke='%23A9613C' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center;
}
.back {
  display: inline-block; padding: 8px 0; text-decoration: none; color: var(--fg-2);
  font: 400 12px/1.4 var(--disp); letter-spacing: .22em; text-transform: uppercase;
}
.back:hover { color: var(--clay); }
.empty { color: var(--fg-2); padding: 44px 0; text-align: center; grid-column: 1 / -1; list-style: none; }

/* Portada: foto real de la costa con velo de tarde y olas color arena */
.hero {
  position: relative; overflow: hidden;
  margin: -22px calc(50% - 50vw) 0; padding: clamp(56px, 10vw, 110px) clamp(16px, 4.5vw, 40px) clamp(120px, 17vw, 180px);
  background:
    linear-gradient(180deg, rgba(46, 36, 24, .52) 0%, rgba(90, 60, 36, .38) 55%, rgba(169, 97, 60, .3) 100%),
    url("/playa.jpg") center 40% / cover no-repeat,
    var(--brown);
  color: var(--paper); text-align: center;
}
.hero .eyebrow { color: rgba(255, 251, 244, .88); text-shadow: 0 1px 10px rgba(46, 36, 24, .5); }
.hero h1 { font-size: clamp(34px, 8.5vw, 76px); font-weight: 300; letter-spacing: .12em; margin: 14px auto 30px; max-width: 14ch; text-shadow: 0 2px 22px rgba(46, 36, 24, .45); }
.hero .search {
  max-width: 520px; margin: 0 auto; display: block; text-align: center;
  padding: 15px 22px; border-radius: 999px;
  background: rgba(255, 251, 244, .9); color: var(--brown); border: 0;
  box-shadow: 0 14px 34px -16px rgba(46, 36, 24, .7);
}
.hero .search::placeholder { color: var(--fg-2); }
.hero .search:focus { outline: 2px solid var(--clay); outline-offset: 3px; }
.waves { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(70px, 11vw, 120px); pointer-events: none; }
.waves svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: drift 18s linear infinite; }
.waves svg:nth-child(1) { fill: rgba(78, 124, 122, .45); animation-duration: 26s; height: 100%; }
.waves svg:nth-child(2) { fill: rgba(255, 251, 244, .45); animation-duration: 19s; animation-direction: reverse; height: 78%; }
.waves svg:nth-child(3) { fill: var(--sand-bg); animation-duration: 13s; height: 52%; }
@keyframes drift { to { transform: translateX(-50%); } }

.search {
  width: 100%; padding: 15px 4px; margin-bottom: 18px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  font: 300 18px/1.3 var(--sans);
}
.search::placeholder { color: var(--fg-3); }
.search:focus { outline: none; border-bottom-color: var(--brown); }

/* Tarjetas: foto con marco blanco tipo polaroid */
.cards { display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
.cards.days { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cards.people { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.card {
  position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--paper);
  background: var(--deep); border: 8px solid var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card.day { aspect-ratio: 16 / 10; }
.card.person { aspect-ratio: 4 / 5; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46, 36, 24, .88) 0%, rgba(46, 36, 24, .28) 48%, transparent 72%); }
.card .over { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.card strong { display: block; font: 300 21px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; }
.card small { font: 400 11px/1.6 var(--disp); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 251, 244, .85); }
.card:hover, .card:focus-visible { transform: rotate(-.8deg) translateY(-3px); box-shadow: 0 22px 40px -20px rgba(90, 72, 51, .7); }
.cards li:nth-child(even) .card:hover, .cards li:nth-child(even) .card:focus-visible { transform: rotate(.8deg) translateY(-3px); }
.card:hover img, .card:focus-visible img { transform: scale(1.05); }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.clip {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 8px 0; box-shadow: var(--shadow);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.clip.on { border-color: var(--sage); box-shadow: 0 0 0 2px var(--sage), 0 18px 34px -22px rgba(61, 73, 65, .7); }
.clip video, .clip .shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--deep); border-radius: 8px; }
.clip .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px; }
.clip .num { font: 200 30px/1 var(--disp); letter-spacing: .06em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.clip.on .num { color: var(--sage); }
.clip .name { color: var(--fg-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn, .pick {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; cursor: pointer; text-decoration: none; border-radius: 999px;
  font: 500 12px/1 var(--disp); letter-spacing: .24em; text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn { background: var(--clay); color: var(--paper); border: 1px solid var(--clay); }
.btn:hover:not(:disabled) { background: var(--clay-d); border-color: var(--clay-d); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: transparent; color: var(--brown); border-color: var(--line-2); }
.btn.ghost:hover:not(:disabled) { background: var(--brown); border-color: var(--brown); color: var(--paper); }
.btn.small { min-height: 42px; padding: 0 18px; font-size: 11px; }
.pick { min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--line-2); }
.pick:hover { border-color: var(--sage); }
.pick[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: var(--paper); }

/* Barra de pago */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--brown); color: var(--paper);
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px -18px rgba(46, 36, 24, .7);
  padding: 14px clamp(16px, 4.5vw, 40px) calc(14px + env(safe-area-inset-bottom));
}
.bar .in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bar .total { flex: 1; min-width: 150px; }
.bar .total b { display: block; font: 300 24px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; }
.bar .total small { font: 400 11px/1.5 var(--disp); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 251, 244, .75); }
.bar .btn { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.bar .btn:hover:not(:disabled) { background: var(--paper); border-color: var(--paper); color: var(--brown); }
.bar .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(255, 251, 244, .6); }
.bar .btn.ghost:hover:not(:disabled) { background: var(--paper); color: var(--brown); border-color: var(--paper); }
.bar .err { color: #f6c3ab; }
.cur { display: inline-flex; border: 1px solid rgba(255, 251, 244, .45); border-radius: 999px; overflow: hidden; }
.cur button {
  background: transparent; color: rgba(255, 251, 244, .75); border: 0; padding: 0 12px; min-height: 40px; cursor: pointer;
  font: 400 11px/1 var(--disp); letter-spacing: .2em; text-transform: uppercase;
}
.cur button[aria-pressed="true"] { background: var(--paper); color: var(--brown); }

.note { background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--sea); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 22px; }
.note.warn { border-left-color: var(--clay); }
.note p { margin: 0 0 10px; }
.note p:last-child { margin: 0; }
.center { text-align: center; padding: 40px 0; }
.center .sub { margin-left: auto; margin-right: auto; }
.err { color: var(--clay-d); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* En teléfono la barra de pago va compacta: total y moneda arriba, los dos botones abajo */
@media (max-width: 640px) {
  .bar { padding-top: 10px; }
  .bar .in { gap: 8px 10px; }
  .bar .total { min-width: 0; }
  .bar .total b { font-size: 19px; white-space: nowrap; }
  .bar .total small { display: block; font-size: 10px; letter-spacing: .12em; }
  .bar .btn { flex: 1 1 0; min-height: 46px; padding: 0 10px; font-size: 11px; letter-spacing: .14em; white-space: nowrap; }
  .bar .err:empty { display: none; }
  .clip .foot { gap: 6px; }
  .clip .foot .btn, .clip .foot .pick { padding: 0 12px; letter-spacing: .12em; white-space: nowrap; }
  main { padding-bottom: 190px; }
}

/* Elegir con qué pagar (tarjeta o Mercado Pago) */
.paywith { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bar [hidden] { display: none !important; }
.paywith small { font: 400 11px/1.5 var(--disp); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 251, 244, .75); }