/* ============================================================
   DJ MATUCHO — TEMPORARY LANDING
   Brand Guidelines V2 · DAY mode · no build step, no framework
   Full site styles live untouched in styles.css (home-full.html)
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  --ivory:#F6EDE1;
  --espresso:#2A1A12;
  --coral:#E1552F;
  --sun:#F0A431;
  --ocean:#17646B;
  --soft-ink:#6B4A34;
  --divider:#DCC9B4;
  --coral-deep:#B23A18;          /* darkened Coral: keeps 4.5:1 for text & hover */
  --ivory-deep:#F1E4D4;          /* subtle sectional shade of Warm Ivory */

  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --ui:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:1180px;
  --gut:clamp(20px, 5vw, 64px);
  --radius:2px;
  --tap:48px;                    /* minimum touch target */
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* the attribute must always win */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--espresso);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.01em}
p{margin:0}
ol{margin:0;padding:0;list-style:none}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

/* ── Focus & skip link ──────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:3px;
  border-radius:var(--radius);
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--espresso);color:var(--ivory);
  padding:14px 20px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
}
.skip-link:focus{left:0}

/* ── Shared type ────────────────────────────────────────── */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ocean);
}
.dot{color:var(--coral)}
.lead{
  font-size:clamp(18px, 2.1vw, 22px);
  line-height:1.5;
  color:var(--soft-ink);
}
.lead-sm{font-size:clamp(17px, 1.7vw, 19px)}

/* Horizon line: thin rule that orders metadata */
.horizon{
  border-top:1px solid var(--divider);
  padding-top:16px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft-ink);
}

/* ── Logo lockup (official 1337 mark, V2 colours) ───────── */
.brand{display:inline-flex;align-items:center;gap:12px;padding-block:11px;text-decoration:none;color:var(--espresso)}
.mark{width:22px;height:22px;flex:none;overflow:visible}
.mark rect{fill:var(--espresso)}
.mark .bar-accent{fill:var(--coral)}
.brand-name{
  font-family:var(--display);font-size:21px;line-height:1;letter-spacing:0;white-space:nowrap;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);padding:13px 26px;
  font-family:var(--ui);font-size:14px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary{background:var(--espresso);color:var(--ivory)}
.btn-primary:hover{background:var(--coral-deep);color:var(--ivory)}
.btn-ghost{background:transparent;color:var(--espresso);border-color:var(--divider)}
.btn-ghost:hover{border-color:var(--espresso)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:44px;padding:11px 18px;font-size:12px}
.btn-lg{width:100%;padding:18px 30px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:progress}
.ico{width:17px;height:17px;flex:none}

/* ── 01 · Header ────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:20;
  background:rgba(246,237,225,.92);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--divider);
}
.head-inner{
  display:flex;align-items:center;gap:18px;
  min-height:72px;
}
.head-desc{
  margin-inline:auto 0;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft-ink);
}
.head-inner .btn{margin-left:auto}
.head-desc + .btn{margin-left:22px}

/* ── 02 · Hero ──────────────────────────────────────────── */
.hero{padding-block:clamp(56px, 11vw, 120px) 0}
.hero .eyebrow{margin-bottom:clamp(22px, 4vw, 34px)}
.hero h1{
  font-size:clamp(52px, 13.5vw, 148px);
  line-height:.94;
  letter-spacing:-.025em;
  margin-bottom:clamp(24px, 3.5vw, 40px);
}
.hero .lead{max-width:34ch}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:clamp(30px, 4vw, 44px);
}

/* Solar arc — a single, contained gesture resting on the horizon */
.hero-sun{
  display:flex;justify-content:flex-end;
  margin-top:clamp(38px, 7vw, 76px);
}
.arc{
  display:block;
  width:clamp(150px, 34vw, 380px);
  height:auto;
}
.arc-sm{width:clamp(88px, 18vw, 132px)}

.hero-meta{margin-top:0;border-top:1px solid var(--divider)}
.hero-meta span:last-child{color:var(--ocean);font-weight:600}

/* ── 03 · Types of events ───────────────────────────────── */
.events{
  background:var(--ivory-deep);
  padding-block:clamp(64px, 10vw, 128px);
  margin-top:clamp(56px, 9vw, 110px);
}
.events h2{
  font-size:clamp(36px, 6vw, 68px);
  line-height:1.02;
  margin:14px 0 clamp(36px, 5vw, 60px);
}
.ev{
  display:grid;
  grid-template-columns:56px 1fr;
  grid-template-areas:"num title" "num desc";
  column-gap:8px;
  align-items:baseline;
  padding-block:clamp(20px, 3vw, 30px);
  border-top:1px solid var(--divider);
}
.ev:last-child{border-bottom:1px solid var(--divider)}
.ev-num{
  grid-area:num;
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--ocean);
}
.ev-title{
  grid-area:title;
  font-size:clamp(28px, 4.6vw, 46px);
  line-height:1.05;
}
.ev-desc{
  grid-area:desc;
  margin-top:6px;
  color:var(--soft-ink);
  font-size:clamp(16px, 1.7vw, 18px);
  max-width:46ch;
}
.ev-desc [lang="es"]{color:var(--coral-deep)}

/* ── 04 · Booking ───────────────────────────────────────── */
.booking{padding-block:clamp(64px, 10vw, 128px)}
.booking-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(36px, 5vw, 64px);
}
.booking-head h2{
  font-size:clamp(38px, 6.4vw, 76px);
  line-height:1;
  margin:14px 0 20px;
}
.booking-head .lead{max-width:36ch}

/* Form */
.form{display:flex;flex-direction:column;gap:22px}
.f-row{display:grid;grid-template-columns:1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--espresso);
}
.req{color:var(--coral-deep);margin-left:2px}
.opt{
  color:var(--soft-ink);font-weight:400;letter-spacing:.08em;text-transform:none;
  font-size:12px;margin-left:6px;
}
input,select,textarea{
  width:100%;
  min-height:var(--tap);
  padding:13px 14px;
  font-family:var(--ui);font-size:16px;   /* 16px stops iOS zoom-on-focus */
  line-height:1.4;
  color:var(--espresso);
  background:#FCF7F0;
  border:1px solid var(--divider);
  border-radius:var(--radius);
  transition:border-color .18s ease, box-shadow .18s ease;
  appearance:none;
}
textarea{min-height:132px;resize:vertical}
select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232A1A12' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
  padding-right:44px;
}
input:hover,select:hover,textarea:hover{border-color:var(--soft-ink)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--espresso);
  box-shadow:0 0 0 3px rgba(225,85,47,.22);
}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--coral);
  background:#FBEFE9;
}
.hint{font-size:13px;color:var(--soft-ink)}
.err{font-size:13px;font-weight:500;color:var(--coral-deep)}
.form-note{font-size:13px;color:var(--soft-ink)}
.form-foot{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.form-error{
  font-size:15px;color:var(--coral-deep);
  border-left:2px solid var(--coral);
  padding:12px 0 12px 14px;
}
.form-error a{color:inherit}

/* Honeypot — visually gone, never focusable, still in the DOM */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Success state */
.success{
  border-top:1px solid var(--divider);
  padding-top:clamp(28px, 4vw, 40px);
}
/* Focus is moved here after a successful send so screen readers land on it;
   it is not an interactive control, so it must not draw a focus box. */
.success:focus,.success:focus-visible{outline:none}
.success h2{font-size:clamp(44px, 8vw, 86px);line-height:1;margin:22px 0 18px}
.success-es{
  margin-top:22px;
  font-family:var(--display);
  font-size:clamp(19px, 2.4vw, 25px);
  color:var(--coral-deep);
}

/* ── 05 · Footer ────────────────────────────────────────── */
.site-foot{padding-block:clamp(48px, 7vw, 84px) clamp(34px, 4vw, 52px)}
.foot-top{align-items:center}
.foot-desc{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft-ink);
}
.foot-grid{
  display:grid;grid-template-columns:1fr;gap:6px;
  padding-block:clamp(26px, 4vw, 40px);
  font-size:16px;color:var(--soft-ink);
}
.foot-grid a{display:inline-block;padding-block:6px;text-decoration:none;border-bottom:1px solid var(--divider)}
.foot-grid a:hover{color:var(--espresso);border-color:var(--coral)}
.foot-bottom{margin-top:6px;font-size:12px}
.sig{letter-spacing:.14em;color:var(--soft-ink)}
.sig .sup{font-size:.8em;vertical-align:.35em}

/* ── Entrance animation (CSS only) ──────────────────────── */
.anim{animation:rise .7s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Breakpoints ────────────────────────────────────────── */
/* Very small phones (<=420px): keep the header on a single line */
@media (max-width:420px){
  .brand-name{font-size:18px}
  .head-inner{gap:12px;min-height:64px}
  .head-inner .btn-sm{padding:10px 13px;font-size:11px;letter-spacing:.1em}
}
@media (max-width:600px){
  .head-desc{display:none}
  .hero-actions .btn{width:100%}
  .hero .lead{max-width:100%}
  .ev{grid-template-columns:44px 1fr}
}
@media (min-width:601px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:6px 24px}
  .f-row{grid-template-columns:1fr 1fr;gap:22px 24px}
  .btn-lg{width:auto;min-width:280px}
}
@media (min-width:900px){
  .booking-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:64px}
  .booking-head{position:sticky;top:104px}
  .success{grid-column:2}
  .foot-grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .ev{grid-template-columns:88px 1fr;column-gap:0}
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .anim{opacity:1;transform:none}
}

/* ── Print ──────────────────────────────────────────────── */
@media print{
  .site-head,.hero-actions,.form{display:none}
  body{background:#fff}
}