/* Marrow Calendar — web. La misma voz que la app: una sola tipografía (Jost),
   negro cálido, dorado apagado y mucho aire. */
:root{
  --bg:    #111110;
  --bg2:   #171614;
  --card:  #1b1a17;
  --ink:   #efece4;
  --ink2:  #a09d95;
  --ink3:  #6a6760;
  --gold:  #d1b06e;
  --gold2: #e6cb92;
  --rule:  rgba(239,236,228,.12);
  --sans:  'Jost', 'Futura', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body{ overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 36px; }

/* ---------- cabecera ---------- */
header.top{ padding-top:30px; padding-bottom:6px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ width:28px; height:28px; border-radius:7px; }
.brand span{ font-weight:500; font-size:20px; letter-spacing:.01em; }
.lang-switch{ font-size:13px; letter-spacing:.06em; color:var(--ink3); }
.lang-switch a:hover{ color:var(--gold); }
.lang-switch .current{ color:var(--ink); font-weight:600; }

/* ---------- tipografía de sección ---------- */
.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px;
}
h1,h2,h3{ font-weight:500; margin:0; letter-spacing:-.012em; text-wrap:balance; }
h1{ font-size:clamp(2.5rem, 4.6vw + .6rem, 4.3rem); line-height:1.04; font-weight:500; letter-spacing:-.022em; }
h1 em, h2 em{ font-style:normal; color:var(--gold); }
h2{ font-size:clamp(1.9rem, 2.4vw + 1rem, 2.9rem); line-height:1.1; }
h3{ font-size:1.15rem; line-height:1.3; }
.lede{ color:var(--ink2); font-size:1.12rem; line-height:1.65; max-width:520px; margin:18px 0 0; font-weight:300; }

section{ padding:104px 0; }
section + section{ border-top:1px solid var(--rule); }
.sec-head{ max-width:640px; margin:0 0 56px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- botón ---------- */
.cta{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:15px 28px; border-radius:15px;
  background:linear-gradient(180deg, var(--gold2), var(--gold)); color:#1b160c;
  box-shadow:0 12px 36px -12px rgba(209,176,110,.5);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(209,176,110,.62); }
.cta .k1{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(27,22,12,.62); }
.cta .k2{ font-size:18px; font-weight:600; }
.note{ margin:16px 0 0; font-size:13.5px; color:var(--ink3); letter-spacing:.02em; }

/* ---------- móvil (marco) ---------- */
.phone{
  position:relative; width:var(--w, 260px); flex:none;
  padding:5px; border-radius:calc(var(--w, 260px) * .165);
  background:#0a0a09;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone img{ width:100%; border-radius:calc(var(--w, 260px) * .145); }

/* ---------- héroe ---------- */
.hero{ padding:54px 0 96px; }
.hero-grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:48px; align-items:center; }
.hero .sub{ color:var(--ink2); font-size:1.28rem; font-weight:300; margin:22px 0 38px; max-width:440px; line-height:1.5; }
.hero-art{ position:relative; display:flex; justify-content:center; min-height:560px; }
.hero-art::before{
  content:""; position:absolute; inset:-8% -6% -4% -6%;
  background:radial-gradient(ellipse 60% 55% at 60% 42%, rgba(209,176,110,.16), transparent 70%);
  pointer-events:none;
}
.hero-art .p1{ --w:268px; position:relative; z-index:2; transform:translateX(52px); }
.hero-art .p2{ --w:236px; position:relative; z-index:1; transform:translate(-4px, 54px) rotate(-5deg); }
.hero-art .p1, .hero-art .p2{ margin:0 -26px; }

/* ---------- tres escalas ---------- */
.scales{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; align-items:start; }
.scale{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; }
.scale .phone{ --w:250px; }
.scale:nth-child(2) .phone{ --w:262px; margin-top:-18px; }
.scale h3{ margin-bottom:8px; }
.scale p{ margin:0; color:var(--ink2); font-size:.98rem; max-width:290px; font-weight:300; }

/* ---------- dato del día ---------- */
.fact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.showcase{ position:relative; max-width:380px; margin:0 auto; }
.showcase::before{
  content:""; position:absolute; inset:-60px -50px auto auto; width:300px; height:300px;
  background:radial-gradient(circle, rgba(209,176,110,.18), transparent 70%); pointer-events:none;
}
.card-peek{
  position:absolute; inset:22px -16px auto auto; width:90%; height:100%;
  background:var(--bg2); border:1px solid rgba(239,236,228,.07); border-radius:22px; transform:rotate(4deg); z-index:0;
}
.card{
  position:relative; z-index:1;
  background:radial-gradient(ellipse 280px 150px at 15% -10%, rgba(209,176,110,.1), transparent 60%), var(--card);
  border:1px solid rgba(239,236,228,.09); border-radius:22px; padding:34px 30px 28px;
  box-shadow:0 30px 64px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(239,236,228,.05);
}
.card .eyebrow-in{
  display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px;
}
.card .eyebrow-in svg{ width:14px; height:14px; }
.card .day{ font-weight:500; font-size:70px; line-height:1; margin:0; color:var(--ink); letter-spacing:-.02em; }
.card .month{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); margin:10px 0 22px; }
.card .rule{ height:1px; background:rgba(239,236,228,.12); margin:0 0 20px; }
.card .meta{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; }
.card .meta svg{ width:14px; height:14px; }
.card h4{ font-weight:500; font-size:23px; line-height:1.25; color:var(--ink); margin:0 0 10px; }
.card p.txt{ font-size:14.5px; line-height:1.6; color:var(--ink2); margin:0; font-weight:300; }

.ticks{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:16px; }
.ticks li{ position:relative; padding-left:30px; color:var(--ink2); font-weight:300; }
.ticks li strong{ color:var(--ink); font-weight:500; }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.62em; width:12px; height:1.5px; background:var(--gold);
}

/* ---------- apariencias ---------- */
.themes{
  --cols:6; --gap:18px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:26px var(--gap);
}
/* Flex y no grid: con 11 apariencias, la última fila queda centrada en vez de dejar un hueco. */
.theme{ margin:0; flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.theme .shot{
  position:relative; aspect-ratio:420/512; overflow:hidden; border-radius:16px;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 48px -26px rgba(0,0,0,.8);
  transition:transform .25s ease;
}
.theme:hover .shot{ transform:translateY(-4px); }
.theme .shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.theme figcaption{ padding:12px 2px 0; }
.theme b{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:.98rem; }
.theme small{ display:block; color:var(--ink3); font-size:.82rem; margin-top:2px; font-weight:300; }
.tag{
  display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 7px 1px; border-radius:99px; border:1px solid var(--rule); color:var(--ink3);
}
.tag.plus{ color:var(--gold); border-color:rgba(209,176,110,.4); }

/* ---------- eventos ---------- */
.events-grid{ display:grid; grid-template-columns:auto 1fr; gap:84px; align-items:center; }
.events-grid .phone{ --w:272px; }
.swatches{ display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 6px; max-width:420px; }
.swatches i{ width:26px; height:26px; border-radius:50%; display:block; }
.swatches i.lock{ position:relative; opacity:.9; }
.swatches-note{ font-size:.88rem; color:var(--ink3); margin:0 0 4px; }

/* ---------- widgets ---------- */
.widgets-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.widget-stage{
  position:relative; padding:44px 36px; border-radius:26px;
  background:linear-gradient(145deg, #0e2a6b 0%, #0a5a6c 55%, #0b1d52 100%);
  display:grid; gap:26px; justify-items:center;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.8);
}
.widget-stage .row{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; width:100%; }
.widget-stage img{ filter:drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.widget-stage .w-small{ width:172px; }
.widget-stage .w-med{ width:100%; max-width:420px; }
.wlist{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:22px; }
.wlist li{ display:grid; grid-template-columns:38px 1fr; gap:14px; }
.wlist svg{ width:22px; height:22px; color:var(--gold); margin-top:3px; }
.wlist h3{ margin-bottom:3px; }
.wlist p{ margin:0; color:var(--ink2); font-size:.97rem; font-weight:300; }

/* ---------- cuenta atrás en cada apariencia ---------- */
.wc-block{ margin-top:84px; }
.h2s{ font-size:clamp(1.6rem, 1.8vw + 1rem, 2.3rem); line-height:1.15; }
.wc-block .sec-head{ margin-bottom:40px; }
.wc-strip{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px 18px; }
.wc-strip figure{ margin:0; text-align:center; }
.wc-strip img{ width:100%; height:auto; filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)); transition:transform .25s ease; }
.wc-strip figure:hover img{ transform:translateY(-4px); }
.wc-strip figcaption{ margin-top:12px; font-size:.9rem; color:var(--ink3); font-weight:300; }

/* ---------- idiomas ---------- */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:760px; margin:0 auto; }
.chip{
  padding:11px 22px; border:1px solid var(--rule); border-radius:99px; font-size:1.02rem; font-weight:400;
  color:var(--ink); background:rgba(255,255,255,.015);
}
.chip.new{ border-color:rgba(209,176,110,.55); color:var(--gold2); }
.chip.new small{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-left:8px; color:var(--gold); }

/* ---------- plus ---------- */
.plans{ display:grid; grid-template-columns:1fr 1.15fr; gap:26px; align-items:stretch; }
.plan{
  border:1px solid var(--rule); border-radius:22px; padding:38px 36px; background:rgba(255,255,255,.012);
  display:flex; flex-direction:column;
}
.plan.plus{
  border-color:rgba(209,176,110,.38);
  background:radial-gradient(ellipse 320px 180px at 92% 0%, rgba(209,176,110,.13), transparent 65%), rgba(255,255,255,.015);
}
.plan .kicker{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); margin:0 0 10px; }
.plan.plus .kicker{ color:var(--gold); }
.plan h3{ font-size:1.7rem; margin:0 0 4px; }
.plan .price{ color:var(--ink2); font-size:.98rem; margin:0 0 26px; font-weight:300; }
.plan ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.plan li{ position:relative; padding-left:26px; color:var(--ink2); font-size:.99rem; font-weight:300; line-height:1.5; }
.plan li strong{ color:var(--ink); font-weight:500; }
.plan li::before{ content:""; position:absolute; left:2px; top:.62em; width:11px; height:1.5px; background:var(--ink3); }
.plan.plus li::before{ background:var(--gold); }

/* ---------- privacidad ---------- */
.privacy-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:18px; overflow:hidden; }
.privacy-row div{ background:var(--bg); padding:30px 28px; }
.privacy-row h3{ margin-bottom:8px; }
.privacy-row p{ margin:0; color:var(--ink2); font-size:.97rem; font-weight:300; }

/* ---------- cierre ---------- */
.closing{ text-align:center; padding:112px 0 96px; }
.closing .icon{ width:84px; height:84px; border-radius:20px; margin:0 auto 28px; box-shadow:0 24px 50px -20px rgba(0,0,0,.8); }
.closing h2{ max-width:700px; margin:0 auto 16px; }
.closing .lede{ margin:0 auto 34px; }

/* ---------- pie ---------- */
.follow{ margin-top:22px; font-size:15px; color:var(--ink3); }
.follow a{ color:var(--gold); border-bottom:1px solid rgba(201,169,105,.45); }
.follow a:hover{ border-bottom-color:var(--gold); }
footer{ border-top:1px solid var(--rule); padding:26px 0 34px; font-size:13px; color:var(--ink3); }
footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer a{ color:var(--ink3); border-bottom:1px solid rgba(106,103,96,.4); }
footer a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .wc-strip{ grid-template-columns:repeat(3, 1fr); }
  .themes{ --cols:4; }
  .events-grid{ gap:56px; }
  .fact-grid, .widgets-grid{ gap:48px; }
}
@media (max-width:860px){
  body{ font-size:16.5px; }
  .wrap{ padding:0 22px; }
  section{ padding:72px 0; }
  .hero{ padding:28px 0 64px; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .hero .sub, .lede{ margin-left:auto; margin-right:auto; }
  .cta{ align-items:center; }
  .hero-art{ order:-1; min-height:0; padding-bottom:40px; }
  .hero-art .p1{ --w:190px; transform:translateX(24px); }
  .hero-art .p2{ --w:166px; transform:translate(0, 34px) rotate(-5deg); }
  .showcase{ max-width:330px; }
  .card-peek{ inset:22px -8px auto auto; }
  .sec-head{ margin-bottom:40px; }
  .scales{ grid-template-columns:1fr; gap:56px; }
  .scale:nth-child(2) .phone{ margin-top:0; --w:250px; }
  .fact-grid, .events-grid, .widgets-grid, .plans{ grid-template-columns:1fr; gap:44px; }
  .events-grid{ justify-items:center; }
  .events-grid > div:last-child{ justify-self:stretch; }
  .themes{ --cols:2; --gap:14px; gap:22px var(--gap); }
  .privacy-row{ grid-template-columns:1fr; }
  .plan{ padding:30px 26px; }
  .closing{ padding:76px 0 64px; }
  footer .wrap{ justify-content:center; text-align:center; }
}
@media (max-width:420px){
  .widget-stage{ padding:30px 18px; }
  .widget-stage .w-small{ width:140px; }
}

/* ---------- páginas de texto (soporte, privacidad, aviso legal) ---------- */
.doc{ max-width:780px; padding-top:48px; padding-bottom:84px; }
.doc .eyebrow{ margin:0 0 14px; }
.doc h1{ font-size:clamp(2rem, 3vw + 1rem, 3rem); line-height:1.1; margin:0 0 18px; }
.doc h2{ font-size:1.32rem; line-height:1.3; margin:44px 0 12px; letter-spacing:-.005em; }
.doc p, .doc li{ color:var(--ink2); font-weight:300; font-size:1.02rem; }
.doc p{ margin:0 0 16px; }
.doc strong{ color:var(--ink); font-weight:500; }
.doc a{ color:var(--gold); border-bottom:1px solid rgba(209,176,110,.35); }
.doc a:hover{ border-bottom-color:var(--gold); }
.doc ul{ padding-left:20px; margin:0 0 18px; }
.doc li{ margin-bottom:8px; }
.doc code{ font-size:.88em; background:rgba(255,255,255,.06); padding:1px 6px; border-radius:5px; color:var(--ink); }
.doc .lede{ max-width:none; margin:0 0 32px; font-size:1.12rem; }
.doc .dates{ color:var(--ink3); font-size:.88rem; margin:0 0 26px; }
.doc .faq{ padding:24px 0; border-top:1px solid var(--rule); }
.doc .faq:first-of-type{ margin-top:12px; }
.doc .faq h2{ margin:0 0 8px; font-size:1.18rem; }
.doc .faq p{ margin:0; }
.doc .tldr{
  border:1px solid rgba(209,176,110,.3); border-radius:16px; padding:24px 26px 12px; margin:0 0 20px;
  background:radial-gradient(ellipse 300px 160px at 95% 0%, rgba(209,176,110,.1), transparent 65%), rgba(255,255,255,.012);
}
.doc .tldr p{ font-size:.98rem; }
.doc .contact-card, .doc .id-card{
  border:1px solid var(--rule); border-radius:16px; padding:24px 26px; margin:26px 0 0; background:rgba(255,255,255,.015);
}
.doc .contact-card h2{ margin:0 0 8px; font-size:1.18rem; }
.doc .contact-card p{ margin:0 0 6px; }
.doc .contact-card .name{ color:var(--ink); font-weight:500; }
.doc .id-card dl{ display:grid; grid-template-columns:140px 1fr; gap:10px 20px; margin:0; }
.doc .id-card dt{ color:var(--ink3); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding-top:3px; }
.doc .id-card dd{ margin:0; color:var(--ink); font-weight:400; }
.doc table{ width:100%; border-collapse:collapse; margin:16px 0 22px; font-size:.92rem; }
.doc th{ text-align:left; color:var(--ink3); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:0 14px 10px 0; border-bottom:1px solid var(--rule); }
.doc td{ vertical-align:top; padding:13px 14px 13px 0; border-bottom:1px solid var(--rule); color:var(--ink2); font-weight:300; }
@media (max-width:640px){
  .doc{ padding-top:28px; }
  .doc table, .doc tbody, .doc tr, .doc td, .doc th{ display:block; width:100%; }
  .doc tr:first-child{ display:none; }
  .doc tr{ padding:12px 0; border-bottom:1px solid var(--rule); }
  .doc td{ border:0; padding:3px 0; }
  .doc td:first-child{ color:var(--ink); font-weight:400; }
  .doc .id-card dl{ grid-template-columns:1fr; gap:2px 0; }
  .doc .id-card dd{ margin-bottom:12px; }
}