/* Protocollo Zero demo — visual layer.
   Direction: a record sleeve. Cobalt, pure black, white, one yellow for "coming soon".
   One loud element (the 3D record in the hero); everything else stays quiet.
   The inline CSS in server.py is only a minimal fallback. */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --cobalt: #2b3dff;
  --cobalt-dark: #1a27c7;
  --yellow: #ffd400;
  --grey: #eceef2;
  --line: #c9ced8;
  --muted: #555a63;
  --ok: #157a46;
  --error: #c4241a;
  --display: Futura, "Futura PT", "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); -webkit-font-smoothing: antialiased; }
main { max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; }
a { color: var(--cobalt); text-underline-offset: 3px; }
a:hover { color: var(--cobalt-dark); }
p { line-height: 1.6; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
h3 { font-size: 19px; font-weight: 700; }

/* Header */
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; }
.brand-wrap { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-wrap > span:last-child { display: flex; flex-direction: column; }
.logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; }
.brand { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1; }
.tag { font-size: 12px; color: var(--muted); margin-top: 4px; }
nav { display: flex; gap: 22px; }
nav a { color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; padding: 6px 0; }
nav a:hover { color: var(--cobalt); }

/* Hero: the sleeve (also used by privacy and message pages as .hero) */
.sleeve, .hero {
  position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
  margin-top: 8px; padding: clamp(32px, 6vw, 72px); border-radius: 20px;
  background: var(--cobalt); color: #fff; transform-origin: 50% 100%;
}
.hero { grid-template-columns: 1fr; }
.sleeve h1, .hero h1 { margin: 0 0 22px; font-size: clamp(48px, 7vw, 92px); font-weight: 700; line-height: .95; letter-spacing: -.035em; }
.hero h1 { font-size: clamp(38px, 5vw, 64px); margin-top: 10px; }
.sleeve .lead, .hero .lead, .hero-copy > p { font-size: clamp(16px, 1.5vw, 19px); color: #e4e7ff; max-width: 50ch; margin: 0 0 12px; }
.eyebrow { font-size: 14px; font-weight: 600; color: #c9cfff; }
.panel .eyebrow { color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.free { font-size: 15px; color: #e4e7ff; }

/* The record: Arturo is the cover, the disc slides out behind it */
.record {
  --rx: 0deg; --ry: 0deg;
  position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; justify-self: start;
  transform-style: preserve-3d; transform: perspective(1000px) rotateX(var(--rx)) rotateY(calc(var(--ry) - 12deg));
  transition: transform .3s ease-out;
}
.cover { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 4px; background: #fbf5ea; box-shadow: 0 30px 50px #00000059; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #ffffff38 0%, transparent 30%); pointer-events: none; }
.disc {
  position: absolute; inset: 4%; z-index: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, #000 0 2px, #1b1b1b 2px 3px);
  box-shadow: 0 20px 40px #0006; transform: translateX(32%); transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent 0 8%, #ffffff26 13%, transparent 20% 50%, #ffffff1a 58%, transparent 66%); animation: spin 5s linear infinite; }
.disc-label { position: absolute; inset: 34%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; }
.disc-label small { display: block; font-size: 9px; font-weight: 500; margin-top: 4px; }
.record:hover .disc { transform: translateX(44%); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Arturo */
.arturo-note { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 28px 0 0; transform-origin: 50% 0; }
.arturo-note img { flex: none; width: 60px; height: 60px; border-radius: 50%; background: #fbf5ea; object-fit: cover; }
.arturo-note figcaption { font-size: 16px; line-height: 1.55; color: #22252b; }

/* How it works: a tracklist (it is a real sequence) */
.tracklist { margin-top: 72px; transform-origin: 50% 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.swipe { display: none; font-size: 13px; color: var(--muted); }
.tracks { position: relative; list-style: none; margin: 0; padding: 0; }
.tracks li { display: grid; grid-template-columns: 56px 220px 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tracks li:last-child { border-bottom: 0; }
.tracks p { margin: 0; color: #2c3038; }
.side { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--cobalt); }
.fine { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* Choice of the month */
.bonus { position: relative; margin-top: 56px; padding: 30px 32px; border-radius: 20px; background: var(--grey); transform-origin: 50% 0; }
.bonus h2 { font-size: 28px; }
.bonus p { margin: 10px 0 0; max-width: 72ch; color: #2c3038; }
.bonus .status { position: absolute; top: -14px; right: 28px; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 700; transform: rotate(3deg); }

/* Form */
.panel { margin-top: 56px; padding: clamp(22px, 4.5vw, 56px); background: var(--grey); border-radius: 20px; transform-origin: 50% 0; }
.form-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.form-head p { margin: 0; color: var(--muted); font-size: 14px; }
fieldset.step { border: 0; margin: 0; padding: 32px 0 8px; min-width: 0; transform-origin: 50% 0; }
fieldset.step + fieldset.step { border-top: 1px solid var(--line); }
fieldset.step legend { display: flex; align-items: baseline; gap: 12px; float: left; width: 100%; padding: 0; margin-bottom: 20px; font-family: var(--display); font-size: 24px; font-weight: 700; }
fieldset.step legend + * { clear: both; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.field { margin: 0 0 22px; min-width: 0; }
.field[hidden] { display: none; }
label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 8px; }
input, select, textarea {
  width: 100%; min-height: 50px; padding: 13px 14px; border-radius: 10px; border: 1px solid #b9bfca;
  background: #fff; color: var(--ink); font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
textarea { resize: vertical; min-height: 120px; }
::placeholder { color: #8a909b; }
input:hover, select:hover, textarea:hover { border-color: #7d8492; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px #2b3dff33; }
button:focus-visible, a:focus-visible, .option:focus-within, .drop:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 1.5; margin: 0; cursor: pointer; }
.check input, .option input { width: 20px; height: 20px; min-height: 0; min-width: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--cobalt); }
.rep { padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--cobalt); }

/* File drop zone */
.drop { position: relative; display: flex; align-items: center; gap: 18px; margin: 0; padding: 24px; border: 1.5px dashed #9aa1ad; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s; }
.drop:hover, .drop.is-over { border-color: var(--cobalt); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.drop-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--cobalt); color: #fff; font-size: 22px; }
.drop-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-weight: 400; }
.drop-text strong { font-size: 16px; overflow-wrap: anywhere; }
.drop-text span { color: var(--muted); font-size: 13px; }
.drop.has-file { border-style: solid; border-color: var(--ok); }
.drop.has-file .drop-icon { background: var(--ok); }
.drop.is-error { border-style: solid; border-color: var(--error); }
.drop.is-error .drop-text span { color: var(--error); }

/* Consents */
.quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: #fff; }
.quick > div:first-child { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 220px; }
.quick span { color: var(--muted); font-size: 13px; }
.quick-actions { display: flex; gap: 10px; }
.ghost { white-space: nowrap; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ghost:hover { background: var(--ink); color: #fff; }
.consent { margin-top: 16px; padding: 22px; border-radius: 14px; background: #fff; }
.consent h3 { font-size: 20px; }
.consent-q { margin: 6px 0 12px; font-size: 16px; }
.consent-text { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; color: #2c3038; font-size: 13.5px; line-height: 1.6; background: var(--grey); }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; cursor: pointer; border: 1.5px solid #b9bfca; border-radius: 12px; background: #fff; transition: border-color .15s, background .15s, color .15s; }
.option:hover { border-color: var(--ink); }
.option:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt); color: #fff; }
.option:has(input:checked) input { accent-color: #fff; }
.option:has(input:checked) small { color: #dfe3ff; }
.option span { display: flex; flex-direction: column; gap: 2px; }
.option strong { font-size: 15px; }
.option small { color: var(--muted); font-size: 13px; font-weight: 400; }

.submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.submit .hint { margin: 0; flex: 1; min-width: 220px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 30px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; touch-action: manipulation;
}
.button:hover { background: #262626; color: #fff; }
.button:active { transform: scale(.98); }
.sleeve .button, .hero .button { background: #fff; color: var(--ink); }
.sleeve .button:hover, .hero .button:hover { background: var(--yellow); color: var(--ink); }
.submit .button { background: var(--cobalt); }
.submit .button:hover { background: var(--cobalt-dark); }

/* Messages and privacy */
.panel h1 { font-size: clamp(34px, 4.5vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -.03em; margin: 8px 0 14px; }
.panel.error { background: #fdecea; }
.panel.error .eyebrow { color: var(--error); }
.success { border-left: 4px solid var(--ok); padding: 12px 16px; background: #157a4614; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: var(--yellow); font-size: 14px; font-weight: 600; }
.prose { margin-top: 22px; background: #fff; padding: 0; }
.prose h2 { font-size: 24px; margin: 44px 0 12px; }
.prose p, .prose li { color: #2c3038; max-width: 76ch; }
.prose ul { padding-left: 20px; }
.prose li { margin: 8px 0; line-height: 1.6; }
.summary { padding: 24px 28px; border-radius: 16px; background: var(--grey); }
.summary h2 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
th { font-size: 13px; color: var(--muted); font-weight: 600; }
td:first-child { width: 55%; color: var(--ink); }
td { color: #2c3038; }

/* Responsive */
@media (max-width: 900px) {
  .sleeve { grid-template-columns: 1fr; }
  .record { width: min(64%, 300px); margin: 6px 0 0; }
  .tracks li { grid-template-columns: 48px 180px 1fr; }
}
@media (max-width: 760px) {
  main { padding: 0 16px 64px; }
  .tag { display: none; }
  .brand { font-size: 18px; white-space: nowrap; }
  .logo { width: 34px; height: 34px; font-size: 12px; }
  nav { gap: 16px; }
  nav a { font-size: 14px; white-space: nowrap; }
  .sleeve { padding: 30px 22px 44px; border-radius: 16px; gap: 30px; }
  .sleeve h1 { font-size: clamp(46px, 13vw, 64px); }
  .record { width: 66%; }
  .tracklist { margin-top: 56px; }
  .swipe { display: inline; }
  /* Horizontal 3D carousel: the script tilts the side cards */
  .tracks { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 15% 30px; margin: 0 -16px; scrollbar-width: none; }
  .tracks::-webkit-scrollbar { display: none; }
  .tracks li { flex: 0 0 70%; display: block; scroll-snap-align: center; padding: 24px; border: 0; border-radius: 18px; background: var(--grey); }
  .tracks li:last-child { border: 0; }
  .tracks h3 { margin: 10px 0 8px; font-size: 22px; }
  .bonus { padding: 26px 22px; border-radius: 16px; }
  .bonus .status { right: 18px; }
  .grid, .options { grid-template-columns: 1fr; }
  .panel { padding: 22px 18px; border-radius: 16px; }
  .consent { padding: 16px; }
  .drop { padding: 18px; }
  .quick-actions { width: 100%; }
  .ghost { flex: 1; }
  .submit .button { width: 100%; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  td { border: 0; padding: 4px 0; width: auto !important; }
  td:first-child { font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .disc::before { animation: none; }
  *, .button { transition: none !important; }
}

/* Contacts (every page) */
.contacts { margin-top: 72px; }
.contacts h2 { margin-bottom: 18px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 28px; border-radius: 20px; background: var(--grey); }
.contact-card h3 { font-size: 22px; }
.contact-card p { margin: 0; color: #2c3038; }
.contact-card .contact-mail { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.contact-card .button { margin-top: 8px; }
.contact-ig { background: var(--ink); }
.contact-ig h3, .contact-ig .contact-mail { color: #fff; }
.contact-ig p { color: #d5d7dc; }
.contact-ig .button { background: var(--yellow); color: var(--ink); }
.contact-ig .button:hover { background: #fff; color: var(--ink); }
@media (max-width: 760px) {
  .contacts { margin-top: 56px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 22px; }
  .contact-card .contact-mail { font-size: 17px; overflow-wrap: normal; }
  .contact-card .button { width: 100%; }
}

/* Narrow phones: keep three menu links on one line */
@media (max-width: 430px) {
  header { gap: 10px; }
  .brand-wrap { gap: 8px; }
  .brand-wrap > span:last-child { display: none; }
  .logo { width: 36px; height: 36px; font-size: 12px; }
  nav { gap: 12px; }
  nav a { font-size: 13px; }
}