/* ══════════════════════════════════════════════════════════════════
   Mio · onboarding
   Identity: #F7F4EF paper, #1C1917 ink, #B5895F wood.
   Cormorant Garamond Light + DM Sans Light. No bold anywhere: font
   weight never exceeds 400, and 400 is reserved for selected states.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Fonts ──────────────────────────────────────────────────────────
   Self-hosted rather than pulled from the Google Fonts CDN. Three
   reasons: a form that collects a name and a phone number should not
   hand every visitor's IP to a third party; an @import is render-
   blocking and serialised behind this stylesheet; and the site keeps
   working if the CDN does not.

   Only the latin and latin-ext subsets are shipped (Spanish needs
   nothing else) - cyrillic and vietnamese are dropped, which halves
   the payload to ~148 KB. DM Sans is a variable font, so one file
   covers both 300 and 400.

   Both families are SIL Open Font License 1.1; see assets/fonts/OFL.txt.
   ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/dm-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/dm-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --papel: #F7F4EF;
  --tinta: #1C1917;
  --tinta-soft: rgba(28, 25, 23, .55);
  --madera: #B5895F;
  --crema: #EDE9E1;
  --madera-clara: #D4B896;
  --arena: #D6C4A8;
  --alerta: #A85751;          /* muted terracotta, reads as an error without shouting */
  --alerta-fondo: #FBF0EE;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  padding: 0 0 60px;
}

/* ─── Header ─────────────────────────────────────────────────────── */

header {
  background: var(--tinta);
  color: var(--papel);
  padding: 32px 28px 26px;
}

header .logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 2.1rem;
  letter-spacing: .04em;
  color: var(--madera-clara);
}

header .sub {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: 6px;
}

header .intro {
  margin-top: 18px;
  font-size: .85rem;
  line-height: 1.8;
  color: rgba(247, 244, 239, .75);
  max-width: 520px;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 0;
}

/* ─── Section ────────────────────────────────────────────────────── */

.section {
  background: white;
  border: 1px solid var(--crema);
  border-radius: 10px;
  padding: 22px 20px;
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--madera);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title .step {
  background: var(--madera);
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: .7rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  flex-shrink: 0;
}

.section-note {
  font-size: .72rem;
  color: var(--tinta-soft);
  margin-bottom: 16px;
  line-height: 1.6;
  padding-left: 32px;
}

/* ─── Inputs ─────────────────────────────────────────────────────── */

label.field-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 6px;
  margin-top: 14px;
}

label.field-label:first-child { margin-top: 0; }

/* Mandatory marker. A dot rather than an asterisk: quieter, and the
   legend at the top of section 1 explains it once. */
label.field-label .req {
  color: var(--madera);
  margin-left: 4px;
  opacity: .9;
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--arena);
  border-radius: 7px;
  background: var(--papel);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: .92rem;
  color: var(--tinta);
}

textarea { resize: vertical; min-height: 70px; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--madera);
}

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ─── Validation ─────────────────────────────────────────────────── */

.field-error {
  display: none;
  font-size: .72rem;
  color: var(--alerta);
  margin-top: 5px;
  line-height: 1.5;
}

.has-error .field-error,
.field-error.visible { display: block; }

input.invalid,
textarea.invalid,
.toggle-row.invalid .toggle-btn {
  border-color: var(--alerta);
  background: var(--alerta-fondo);
}

.validation-banner {
  display: none;
  background: var(--alerta-fondo);
  border: 1px solid rgba(168, 87, 81, .3);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--alerta);
}

.validation-banner.visible { display: block; }

.validation-banner ul { margin: 8px 0 0 18px; }
.validation-banner li { margin-bottom: 3px; }

/* ─── Chips ──────────────────────────────────────────────────────── */

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 9px 16px;
  border: 1.5px solid var(--crema);
  border-radius: 20px;
  background: white;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  color: var(--tinta);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.chip.selected {
  border-color: var(--madera);
  background: var(--madera);
  color: white;
  font-weight: 400;
}

.chip-group-label {
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .5;
  margin: 16px 0 8px;
}

.chip-group-label:first-of-type { margin-top: 0; }

/* ─── Colour palette ─────────────────────────────────────────────── */

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

.color-card {
  border: 1.5px solid var(--crema);
  border-radius: 9px;
  padding: 10px 8px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}

.color-card.selected { border-color: var(--madera); background: #faf6f0; }

.swatch-row { display: flex; gap: 3px; justify-content: center; margin-bottom: 6px; }

.swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .06);
}

.color-name { font-size: .68rem; line-height: 1.3; }

/* ─── Size / quantity grids (sections 2 and 3) ───────────────────── */

.talla-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.talla-cell {
  border: 1.5px solid var(--crema);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  transition: border-color .15s, background .15s;
}

/* A cell with a quantity picks up the wood border, so a filled order
   is legible at a glance instead of needing to read every number. */
.talla-cell.filled {
  border-color: var(--madera);
  background: #faf6f0;
}

.talla-cell .talla-num {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 6px;
}

.talla-cell input[type="number"] {
  padding: 7px 4px;
  text-align: center;
  font-size: .88rem;
  -moz-appearance: textfield;
}

.talla-cell input[type="number"]::-webkit-outer-spin-button,
.talla-cell input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Running total under each quantity grid. */
.talla-total {
  font-size: .74rem;
  color: var(--tinta-soft);
  margin-top: 10px;
  text-align: right;
  letter-spacing: .03em;
}

.talla-total strong { font-weight: 400; color: var(--madera); }

/* ─── Yes/no toggle ──────────────────────────────────────────────── */

.toggle-row { display: flex; gap: 8px; }

.toggle-btn {
  flex: 1;
  padding: 11px;
  border: 1.5px solid var(--crema);
  border-radius: 8px;
  background: white;
  text-align: center;
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
}

.toggle-btn.selected {
  border-color: var(--madera);
  background: #faf6f0;
  font-weight: 400;
}

.conditional-field { display: none; margin-top: 12px; }
.conditional-field.visible { display: block; }

.onsite-note {
  background: var(--crema);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: .76rem;
  color: var(--tinta-soft);
  line-height: 1.6;
  margin-top: 10px;
}

/* ─── Summary block ──────────────────────────────────────────────── */

.resumen-block {
  background: var(--tinta);
  color: var(--papel);
  border-radius: 10px;
  padding: 22px 20px;
  margin-top: 8px;
}

.resumen-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--madera-clara);
  margin-bottom: 12px;
}

.copy-area {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 16px;
  font-size: .82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: 'DM Sans', sans-serif;
  color: var(--papel);
  max-height: 340px;
  overflow-y: auto;
}

/* ─── Buttons ────────────────────────────────────────────────────── */

.btn-primary,
.btn-send,
.btn-secondary {
  width: 100%;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}

.btn-primary {
  padding: 14px;
  background: var(--madera);
  color: white;
  border: none;
  font-size: .88rem;
  margin-top: 14px;
}

.btn-primary:hover { background: #a07850; }

/* Send is visually the terminal action: filled paper on ink. */
.btn-send {
  padding: 14px;
  background: var(--papel);
  color: var(--tinta);
  border: 1.5px solid var(--papel);
  font-size: .88rem;
  margin-top: 10px;
}

.btn-send:hover:not(:disabled) { background: white; }

.btn-send:disabled {
  background: transparent;
  color: rgba(247, 244, 239, .35);
  border-color: rgba(247, 244, 239, .18);
  cursor: not-allowed;
}

.btn-secondary {
  padding: 13px;
  background: transparent;
  color: var(--papel);
  border: 1.5px solid rgba(247, 244, 239, .25);
  font-size: .85rem;
  margin-top: 10px;
}

.btn-secondary:hover { border-color: rgba(247, 244, 239, .5); }

/* Explains why the send button is still locked. */
.send-hint {
  font-size: .72rem;
  color: rgba(247, 244, 239, .5);
  margin-top: 10px;
  line-height: 1.6;
  text-align: center;
}

.send-error {
  display: none;
  background: rgba(168, 87, 81, .18);
  border: 1px solid rgba(168, 87, 81, .45);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: .78rem;
  line-height: 1.6;
  color: #F0C9C5;
}

.send-error.visible { display: block; }

.footer-note {
  text-align: center;
  font-size: .7rem;
  color: var(--tinta-soft);
  margin-top: 28px;
  letter-spacing: .04em;
}

/* ─── Thank-you / error pages ────────────────────────────────────── */

.centered-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}

.centered-page .mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 2.6rem;
  color: var(--madera);
  letter-spacing: .04em;
}

.centered-page .mark-sub {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-soft);
  margin-top: 6px;
  margin-bottom: 40px;
}

.centered-page .mensaje {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--tinta);
  max-width: 460px;
  margin: 0 auto;
}

.ticket-line {
  margin-top: 32px;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-soft);
}

.ticket-no {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 18px;
  border: 1px solid var(--arena);
  border-radius: 20px;
  background: white;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--tinta);
}

.centered-page .cierre {
  margin-top: 44px;
  font-size: .78rem;
  line-height: 1.8;
  color: var(--tinta-soft);
}

.centered-page a { color: var(--madera); text-decoration: none; }
.centered-page a:hover { text-decoration: underline; }

/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 460px) {
  .row-2 { grid-template-columns: 1fr; }
  .talla-grid { grid-template-columns: repeat(3, 1fr); }
  .centered-page { padding: 48px 20px; }
  .centered-page .mensaje { font-size: 1.3rem; }

  /* Quantity boxes are the most-tapped control on the form and sit in a
     dense grid. Taller padding brings them to a comfortable thumb target
     on a phone, which is where this form is actually filled in. */
  .talla-cell input[type="number"] { padding: 11px 4px; }
}

@media print {
  header .intro { color: rgba(247, 244, 239, .9); }
  .btn-primary, .btn-secondary, .btn-send, .send-hint { display: none; }
}