/* Árbol de Lilith · shared look (colors measured on her 2026 posts: ../../../cosa.json → estilo).
   Every product may use it; none has to. Paper, watercolor, serif with rose italics. Slow and warm. */

:root {
  --crema: #F6EDE2;
  --pergamino: #F2E4D7;
  --papel: #FBF6EF;
  --rubor: #EACAB9;
  --arena: #DEC1B3;
  --malva: #B68D84;
  --arcilla: #A17264;
  --rosa: #94594F;        /* her italic accent, darkened to read on cream */
  --corteza: #5D4233;
  --tinta: #3E2C22;
  --noche: #231C12;
  --lila: #B7A3C4;
  --ciruela: #6E4E7A;
  --ok: #5E7550;
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Jost", "Avenir Next", system-ui, sans-serif;
  --r: 18px;
  --sombra: 0 1px 2px rgba(62, 44, 34, .06), 0 8px 28px rgba(62, 44, 34, .10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--crema); color: var(--tinta);
  font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--rosa); }

.serif { font-family: var(--serif); }
em, .it { font-family: var(--serif); font-style: italic; color: var(--rosa); }
.versal { font: 500 11.5px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--arcilla); }

/* watercolor wash behind a section */
.acuarela { position: relative; isolation: isolate; }
.acuarela::before {
  content: ""; position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 25% 30%, rgba(183, 163, 196, .35), transparent 70%),
    radial-gradient(45% 40% at 75% 40%, rgba(234, 202, 185, .55), transparent 70%),
    radial-gradient(50% 35% at 50% 85%, rgba(161, 114, 100, .18), transparent 70%);
  filter: blur(6px);
}

/* chips like her posters: date · time · place · cupos */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(182, 141, 132, .16); color: var(--corteza); font-size: 13.5px; line-height: 1.2;
}
.chip svg { width: 16px; height: 16px; flex: none; stroke: var(--arcilla); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 54px; padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--corteza); color: var(--crema); font: 500 16.5px/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; transition: transform .12s ease, background .2s ease;
}
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn.suave { background: transparent; color: var(--corteza); box-shadow: inset 0 0 0 1.5px rgba(93, 66, 51, .35); }
.btn.arena { background: var(--arena); color: var(--tinta); }
.btn small { font-size: 13px; opacity: .8; font-weight: 400; }
.nota { font-size: 13.5px; color: var(--arcilla); text-align: center; margin: 10px 0 0; }

.campo { display: block; margin: 0 0 14px; }
.campo span { display: block; font-size: 13px; color: var(--arcilla); margin: 0 0 6px; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(93, 66, 51, .18);
  background: var(--papel); font-size: 17px; outline: none;
}
.campo input:focus, .campo textarea:focus { border-color: var(--malva); }
.campo textarea { min-height: 140px; resize: vertical; font-family: var(--serif); font-size: 20px; line-height: 1.45; }

/* bottom sheet */
.velo { position: fixed; inset: 0; background: rgba(35, 28, 18, .42); z-index: 40; opacity: 0; transition: opacity .25s; }
.velo.on { opacity: 1; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 92vh; overflow: auto;
  background: var(--papel); border-radius: 26px 26px 0 0; padding: 10px 22px calc(26px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  max-width: 560px; margin: 0 auto; box-shadow: 0 -10px 40px rgba(35, 28, 18, .18);
}
.hoja.on { transform: none; }
.hoja .asa { width: 42px; height: 5px; border-radius: 9px; background: rgba(93, 66, 51, .2); margin: 4px auto 16px; }
.hoja h2 { font: 500 30px/1.1 var(--serif); margin: 0 0 6px; color: var(--tinta); }
.hoja p.lead { margin: 0 0 18px; color: var(--corteza); }
.hoja .cerrar { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(93, 66, 51, .08); cursor: pointer; font-size: 20px; line-height: 1; }

/* the fake WhatsApp message with the demo code */
.wa {
  display: flex; gap: 10px; align-items: flex-start; background: #E7F6DE; border-radius: 14px; padding: 10px 12px;
  margin: 0 0 14px; font-size: 14px; color: #1f3a17; box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
.wa b { letter-spacing: .12em; }
.wa .demo { font-size: 11px; opacity: .65; display: block; margin-top: 2px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.seg button {
  padding: 12px 10px; border-radius: 14px; border: 1.5px solid rgba(93, 66, 51, .18); background: var(--papel); cursor: pointer; text-align: left;
}
.seg button b { display: block; font-weight: 500; }
.seg button small { color: var(--arcilla); font-size: 12.5px; }
.seg button.on { border-color: var(--corteza); background: var(--pergamino); }
.seg button[disabled] { opacity: .45; }

.estado { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.estado.asegurado { background: rgba(94, 117, 80, .14); color: var(--ok); }
.estado.reservado { background: rgba(182, 141, 132, .2); color: var(--rosa); }
.estado.espera { background: rgba(110, 78, 122, .12); color: var(--ciruela); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0;
  background: var(--tinta); color: var(--crema); padding: 12px 18px; border-radius: 999px; font-size: 14.5px; z-index: 60;
  transition: all .25s; max-width: calc(100% - 32px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* "you're trying a challenger" ribbon (the niche, not the product) */
.probando {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px; background: var(--ciruela); color: #fff; font-size: 13px;
}
.probando a { color: #fff; font-weight: 500; }

.cargando { opacity: .5; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* places: mine + gifted ones, in the "Quiero ir" sheet */
.lugares { border-radius: 16px; background: var(--pergamino); padding: 6px 14px 12px; margin: 0 0 14px; }
.lugar-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid rgba(93, 66, 51, .1); cursor: pointer; }
.lugar-fila input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--corteza); margin: 0; }
.lugar-fila .quien { flex: 1; font-weight: 500; min-width: 120px; }
.regalo { padding: 10px 0 4px; border-bottom: 1px solid rgba(93, 66, 51, .1); display: grid; gap: 8px; }
.regalo input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(93, 66, 51, .18); background: var(--papel); font-size: 16px; outline: none; }
.regalo input:focus { border-color: var(--malva); }
.regalo-top { display: flex; justify-content: space-between; align-items: center; }
.quitar { border: 0; background: rgba(93, 66, 51, .08); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; }
.mas-regalo { display: block; width: 100%; margin-top: 10px; padding: 11px; border: 1.5px dashed rgba(93, 66, 51, .3); border-radius: 12px; background: none; color: var(--rosa); font-size: 15px; cursor: pointer; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 12px; color: var(--corteza); }
.total b { font: 500 28px/1 var(--serif); color: var(--tinta); }
.regalos-listos { margin: 14px 0 0; padding: 10px 14px; border-radius: 16px; background: var(--pergamino); }
.regalos-listos .lugar-fila { cursor: default; }
.regalos-listos .lugar-fila:last-child { border-bottom: 0; }
.mini-wa { border: 0; background: #DCF3D2; color: #1f3a17; border-radius: 999px; padding: 6px 12px; font-size: 13px; text-decoration: none; cursor: pointer; }
.campo-t { font-size: 13px; color: var(--arcilla); margin: 0 0 6px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.opciones button { border: 1.5px solid rgba(93, 66, 51, .18); background: var(--papel); border-radius: 999px; padding: 9px 14px; font-size: 14.5px; cursor: pointer; }
.opciones button.on { border-color: var(--corteza); background: var(--pergamino); }
.hoja .regalo { border: 0; padding: 0 0 14px; }

/* the 1:1 hour card, used by products */
.hora { position: relative; overflow: hidden; border-radius: var(--r); padding: 22px 20px 20px; background: var(--noche); color: var(--crema); }
.hora::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,28,18,.62), rgba(35,28,18,.9)), url(/comun/sendero.jpg) center / cover; z-index: 0; }
.hora > * { position: relative; }
.hora .versal { color: var(--rubor); }
.hora h3 { font: 500 30px/1.1 var(--serif); margin: 6px 0 8px; }
.hora p { margin: 0 0 14px; opacity: .92; }
.hora .precio { font: 500 34px/1 var(--serif); margin: 0 0 14px; }
.hora .precio small { font: 400 14px var(--sans); opacity: .8; }