/* Vid Vica — 2026 · trencadís minimal */

@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-ext-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #fbf9f4;
  --ink: #161513;
  --ink-2: #57534b;
  --line: #e6e0d2;
  --gold: #b8913f;
  --gold-2: #e9d48f;
  --blue: #1d4f86;
  --terra: #c2643d;
  --olive: #6f7d3c;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
  --pad: clamp(14px, 4vw, 56px);
  --max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 350;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; }

/* ---------- hero: trencadís mosaic, logo as the centre tile ---------- */
.hero {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(14px, 3vw, 40px) var(--pad) 0;
}
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: clamp(4px, 0.7vw, 10px);
  aspect-ratio: 1.45 / 1;
  max-height: calc(100vh - 110px);
  max-height: calc(100svh - 110px);
  min-height: 420px;
  margin: 0 auto;
}
.tile { margin: 0; overflow: hidden; position: relative; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
figure.tile:hover img { transform: scale(1.06); }

/* row 1–3 */
.t-vinedo   { grid-area: 1 / 1 / 4 / 4;    clip-path: polygon(0 4%, 97% 0, 100% 93%, 3% 100%); }
.t-gold     { grid-area: 1 / 4 / 3 / 6;    clip-path: polygon(8% 12%, 100% 0, 90% 100%, 0 86%); background: linear-gradient(125deg, #8c6a26, var(--gold-2) 45%, var(--gold) 70%, #7a5a1e); }
.t-hojas    { grid-area: 1 / 6 / 3 / 8;    clip-path: polygon(0 6%, 94% 0, 100% 100%, 6% 92%); }
.t-aretey   { grid-area: 8 / 11 / 11 / 13;   clip-path: polygon(3% 0, 100% 7%, 97% 100%, 0 92%); background: #fff; }
.t-aretey img { object-fit: contain; padding: 4% 0; }
.t-terra    { grid-area: 1 / 11 / 2 / 13;  clip-path: polygon(0 18%, 94% 0, 100% 80%, 8% 100%); background: linear-gradient(140deg, #d77b51, var(--terra) 55%, #9d4a29); }
.t-amorany  { grid-area: 2 / 11 / 8 / 13;  clip-path: polygon(6% 2%, 100% 0, 95% 100%, 0 97%); background: #fff; }
.t-amorany img { object-fit: contain; transform: scale(1.32); }
figure.t-amorany:hover img { transform: scale(1.38); }
/* middle */
.t-bodega   { grid-area: 4 / 1 / 7 / 4;    clip-path: polygon(3% 3%, 100% 0, 96% 100%, 0 96%); }
.t-logo {
  grid-area: 3 / 4 / 8 / 11;
  clip-path: polygon(1.5% 2%, 99% 0, 100% 97%, 0 100%);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.t-logo img {
  position: absolute;
  inset: clamp(10px, 2.2vw, 32px);
  width: calc(100% - 2 * clamp(10px, 2.2vw, 32px));
  height: calc(100% - 2 * clamp(10px, 2.2vw, 32px));
  object-fit: contain;
}
/* row 8–10 */
.t-soligamar { grid-area: 7 / 1 / 11 / 4;  clip-path: polygon(0 5%, 96% 0, 100% 96%, 4% 100%); background: #fff; }
.t-soligamar img { object-fit: contain; padding: 4% 2%; }
.t-cava     { grid-area: 8 / 4 / 11 / 7;   clip-path: polygon(4% 0, 100% 6%, 97% 100%, 0 94%); }
.t-linea    { grid-area: 8 / 7 / 11 / 10;  clip-path: polygon(0 4%, 95% 0, 100% 95%, 5% 100%); }
.t-blue     { grid-area: 8 / 10 / 10 / 11; clip-path: polygon(14% 0, 100% 10%, 88% 100%, 0 86%); background: linear-gradient(160deg, #2c6aad, var(--blue) 60%, #123659); }
.t-olive    { grid-area: 10 / 10 / 11 / 11; clip-path: polygon(0 10%, 100% 0, 90% 100%, 10% 90%); background: linear-gradient(150deg, #8b9a4f, var(--olive) 60%, #4f5a2a); }
.t-vinatero { grid-area: 1 / 8 / 3 / 11; clip-path: polygon(6% 0, 100% 5%, 94% 100%, 0 95%); }

/* glaze on the colour tiles, like glazed ceramic */
.t-gold::after, .t-blue::after, .t-terra::after, .t-olive::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 25% 15%, rgba(255,255,255,.45), transparent 55%);
}

@media (prefers-reduced-motion: no-preference) {
  .tile { animation: set .9s cubic-bezier(.2,.7,.2,1) both; }
  .t-logo { animation: logo 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .t-vinedo { animation-delay: .25s } .t-gold { animation-delay: .55s } .t-hojas { animation-delay: .4s }
  .t-aretey { animation-delay: .5s } .t-terra { animation-delay: .7s } .t-amorany { animation-delay: .3s }
  .t-bodega { animation-delay: .35s } .t-soligamar { animation-delay: .45s } .t-cava { animation-delay: .3s }
  .t-linea { animation-delay: .5s } .t-blue { animation-delay: .65s } .t-olive { animation-delay: .8s } .t-vinatero { animation-delay: .4s }
  @keyframes set  { from { opacity: 0; transform: translateY(14px) rotate(-1.4deg) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes logo { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
}

.place {
  text-align: center;
  margin: clamp(18px, 2.5vw, 30px) 0 0;
  font-size: 12px; font-weight: 500;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--ink-2);
}

/* phones: taller mosaic, logo stays dominant */
@media (max-width: 700px) {
  .mosaic {
    aspect-ratio: auto;
    height: auto; max-height: none; min-height: 0;
    grid-template-rows: repeat(10, 11.5vw);
  }
  .t-vinedo { grid-area: 1 / 1 / 3 / 4; }
  .t-soligamar { grid-area: 8 / 1 / 11 / 4; }

  .t-logo { grid-area: 3 / 1 / 8 / 11; }
  .t-bodega { display: none; }
  .t-gold { grid-area: 1 / 4 / 3 / 6; }
}

/* ---------- trencadís divider ---------- */
.shards { position: relative; height: 18px; max-width: var(--max); margin: clamp(48px, 7vw, 96px) auto 0; }
.shards::before {
  content: ""; position: absolute; inset: 0 var(--pad);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='18' viewBox='0 0 220 18'%3E%3Cpolygon points='2,4 30,1 34,15 4,17' fill='%23b8913f'/%3E%3Cpolygon points='38,2 52,5 50,16 36,13' fill='%231d4f86'/%3E%3Cpolygon points='56,1 96,3 92,17 58,14' fill='%23e6e0d2'/%3E%3Cpolygon points='100,5 118,1 121,15 102,17' fill='%23c2643d'/%3E%3Cpolygon points='125,2 160,4 157,16 127,15' fill='%23e6e0d2'/%3E%3Cpolygon points='164,1 178,3 176,17 166,14' fill='%236f7d3c'/%3E%3Cpolygon points='182,4 217,1 214,15 184,17' fill='%23e6e0d2'/%3E%3C/svg%3E");
  background-size: 220px 18px;
}

/* ---------- contact: just the form, on a Barcelona "panot" tile floor ---------- */
.contact {
  position: relative;
  padding: clamp(56px, 8vw, 120px) var(--pad);
  margin-top: clamp(48px, 7vw, 96px);
  isolation: isolate;
}
.contact::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-color: #f4efe3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23161513' stroke-opacity='.055' stroke-width='1'%3E%3Crect x='.5' y='.5' width='119' height='119' stroke-opacity='.035'/%3E%3Cpath d='M60 18c10 0 16 10 16 20S68 56 60 60c-8-4-16-12-16-22s6-20 16-20zM60 102c-10 0-16-10-16-20s8-18 16-22c8 4 16 12 16 22s-6 20-16 20zM18 60c0-10 10-16 20-16s18 8 22 16c-4 8-12 16-22 16S18 70 18 60zM102 60c0 10-10 16-20 16S64 68 60 60c4-8 12-16 22-16s20 6 20 16z'/%3E%3Ccircle cx='60' cy='60' r='5'/%3E%3Cpath d='M0 14a14 14 0 0 0 14-14M106 0a14 14 0 0 0 14 14M120 106a14 14 0 0 0-14 14M14 120A14 14 0 0 0 0 106'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.form {
  max-width: 720px; margin: 0 auto;
  background: var(--paper);
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 30px 60px -40px rgba(22,21,19,.35);
}
.form h2 { font-size: clamp(40px, 5vw, 60px); margin-bottom: clamp(24px, 3vw, 36px); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.opt { letter-spacing: .05em; text-transform: none; }
.field input, .field textarea {
  width: 100%; font: 400 17px/1.4 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid #cfc7b4; border-radius: 0;
  padding: 8px 0 10px; transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--terra); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin: 6px 0 28px; cursor: pointer; }
.consent input { margin-top: 4px; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 13px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  border: 0; border-radius: 999px; padding: 18px 40px;
  cursor: pointer; transition: background .25s, color .25s, transform .25s;
}
.btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-1px); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.status { min-height: 1.6em; margin: 16px 0 0; font-size: 15px; }
.status.ok { color: var(--olive); }
.status.err { color: var(--terra); }
.gdpr { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: #7a756a; }
.gdpr p { margin: 0 0 10px; }

/* ---------- legal ---------- */
.legal { max-width: 880px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--pad); }
.legal details { border-top: 1px solid var(--line); }
.legal details:last-child { border-bottom: 1px solid var(--line); }
.legal summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; font-family: var(--serif); font-size: 24px;
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 26px; transition: transform .3s; }
.legal details[open] summary::after { transform: rotate(45deg); }
.legal-body { padding: 0 0 32px; font-size: 15px; color: var(--ink-2); }
.legal-body h3 { font-size: 24px; color: var(--ink); margin: 24px 0 10px; }
.legal-body h4 { font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); margin: 24px 0 6px; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 20px; }

/* ---------- footer ---------- */
.foot {
  background: var(--ink); color: #b9b3a6;
  padding: 40px var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  font-size: 13px;
}
.foot p { margin: 0; }
.wim img { width: 170px; }