/* Meridiano Siete · homepage (Julian's pick, 28 Oct 2026, late night): the giant headline, logo and name top left,
   Contacto top right, a quiet contact form below. No effects, no JavaScript. Light by default (style.css, since 29 Oct), the toggle
   switches to dark. Generated by wow-src/home2/make_home.py. */
.home { --pad: clamp(1.25rem, 3vw, 2.75rem); }
/* sticky header (Julian, 28 Oct): fixed bar; its background fades in over the first 120 px of scroll where the browser
   supports scroll-driven animations, and is simply always on where it doesn't */
html { scroll-padding-top: 5.5rem; }
.home .toggle { position: fixed; z-index: 31; }
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--line); }
@supports (animation-timeline: scroll()) {
  .bar::before { opacity: 0; animation: bar-in linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
}
@keyframes bar-in { to { opacity: 1; } }
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 1.5rem; padding: clamp(.9rem, 2.4vh, 1.4rem) var(--pad); pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: .75rem; min-height: 44px; text-decoration: none; color: var(--head); }
.brand img { height: 2.6rem; width: auto; }
/* the stacked wordmark from the Toka page: two lines in capitals, initials in the accent colour
   (dark: #5FD0C3 on #F2EFE9 text; light: #0F766E on #1C1E24), together as tall as the logo */
.wordmark { display: flex; flex-direction: column; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.32rem; line-height: .86; letter-spacing: -0.015em; color: var(--head); padding-top: .12em; }
.wordmark em { font-style: normal; color: var(--accent); }
.bar-link { margin-left: auto; margin-right: 4.4rem; display: inline-flex; align-items: center; min-height: 44px; color: var(--head); font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .3em; }

/* headline «Bloque» (Julian's pick, 29 Oct, from 5 placements in wow-src/headline/): about half the old size, bottom left,
   sitting on «Marcas propias»; the 7 owns the space above. 100cqw is the hero's content box, so the longest line
   («para productos», 7.81em) takes 46 % of the text width */
.hero { position: relative; min-height: 100svh; overflow: hidden; color: var(--head); display: flex; align-items: flex-end; padding: 6rem var(--pad) clamp(6rem, 14svh, 8.5rem); container-type: inline-size; }
.hero h1 { position: relative; z-index: 1; margin: 0; width: 100%; font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--head);
  font-size: calc(100cqw / 17); line-height: .9; letter-spacing: -0.025em; }
.hero h1 span { display: block; }
.corner { position: absolute; z-index: 3; bottom: clamp(1rem, 3vh, 1.75rem); margin: 0; font-size: .9375rem; color: var(--muted); }
/* bottom left: the dateline (Julian, 28 Oct): capitals, wide spacing, teal dots between the items */
.corner.left { left: var(--pad); display: flex; flex-wrap: wrap; gap: .3rem 0; font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.corner.left span + span::before { content: "·"; margin: 0 1.25rem 0 1.4rem; color: var(--accent); letter-spacing: 0; }
.corner.left { align-items: center; }
.bl-wrap { display: inline-flex; align-items: center; }
.bl { display: inline-block; background: var(--head); -webkit-mask: var(--m) no-repeat center / contain; mask: var(--m) no-repeat center / contain; }
.bl.mithjem { --m: url("/img/mithjem.svg"); height: 15px; aspect-ratio: 6033 / 1130; }
/* ÍVALDA: its box holds the accent, ® and the wave, so it is taller than MITHJEM for the same letters; at 24 px its cap
   height matches MITHJEM, and the 8.8 % shift puts both letter baselines on the same line (measured at 2x, 28 Oct) */
.bl.ivalda { --m: url("/img/ivalda.svg"); height: 24px; aspect-ratio: 566.26 / 210; transform: translateY(8.8%); }
.corner.right { right: var(--pad); color: var(--head); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .3em; display: inline-flex; align-items: center; min-height: 44px; bottom: clamp(.4rem, 2vh, 1.1rem); }

/* the quiet contact form */
.quiet { padding: clamp(4rem, 12vh, 7rem) var(--pad); border-top: 1px solid var(--line); }
.quiet .inner { max-width: 46rem; margin: 0 auto; }
.quiet h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.quiet .intro { margin: .6rem 0 2.2rem; color: var(--body); max-width: 40ch; }
.quiet .contact { background: none; padding: 0; border-radius: 0; }
.quiet .contact > h2 { display: none; }
.quiet form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.quiet .field:nth-of-type(3), .quiet .field:nth-of-type(4), .quiet .check, .quiet .btn, .quiet .fine { grid-column: 1 / -1; }
.quiet label { font-size: .875rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.quiet input:not([type="checkbox"]), .quiet select, .quiet textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .7rem 0; min-height: 44px; color: var(--head); }
.quiet input:focus, .quiet select:focus, .quiet textarea:focus { box-shadow: none; border-bottom-color: var(--accent); }
.quiet select option { color: #1C1E24; }
.quiet .select::after { right: .25rem; }
.quiet textarea { min-height: 6.5rem; resize: vertical; }
.quiet .btn { justify-self: start; background: transparent; color: var(--head); border: 1px solid var(--head); border-radius: 0; padding: .8rem 1.6rem; }
.quiet .btn:hover { background: var(--head); color: var(--bg); }
.quiet .fine { font-size: .9375rem; }
.quiet .check { font-size: 1rem; font-weight: 400; color: var(--body); letter-spacing: 0; }
/* tap targets (29 Oct): the checkbox already has the whole 44 px label row; the privacy link gets 44 px of height too
   (inline padding: hit area grows, the line doesn't move) */
.quiet .check a { padding: .75rem 0; }

/* Materia 7 (Julian's pick, 28 Oct): film grain, soft studio light, only the 7 of the logo as a faint watermark */
.hero, .quiet { isolation: isolate; }
.hero::before, .quiet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/img/grain.png"); background-size: 128px; opacity: .055; mix-blend-mode: soft-light; }
.quiet { position: relative; background: var(--card); transition: background-color .25s ease; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(70% 60% at 8% 0%, color-mix(in srgb, #5FD0C3 11%, transparent), transparent 70%),
              radial-gradient(55% 55% at 100% 100%, color-mix(in srgb, #C9AE6E 9%, transparent), transparent 72%); }
.watermark { position: absolute; z-index: -1; right: -9vw; bottom: -14svh; height: 124svh; width: auto; opacity: .045; pointer-events: none; user-select: none; }
.hero h1 { z-index: 1; }

/* desktop/tablet: lift both wordmarks 1 px onto the text baseline of «MARCAS PROPIAS» */
@media (min-width: 721px) { .bl.mithjem { transform: translateY(-1px); } .bl.ivalda { transform: translateY(calc(8.8% - 1px)); } }

@media (max-width: 720px) {
  .watermark { right: -34vw; bottom: -4svh; height: 86svh; }
  .wordmark { font-size: 1.15rem; }
  .bar-link { margin-right: 4.2rem; }
  .hero { padding: 5.5rem var(--pad) 8.5rem; }
  .hero h1 { font-size: calc(100cqw / 8.1); }
  .corner.left { bottom: calc(clamp(.4rem, 2vh, 1.1rem) + 3.25rem); letter-spacing: .14em; }
  .corner.left span + span::before { margin: 0 .8rem 0 .9rem; }
  .bl.mithjem { height: 12px; }
  .bl.ivalda { height: 19px; }
  .quiet form { grid-template-columns: 1fr; }
  .quiet .field { grid-column: 1 / -1; }
  .quiet .fine { font-size: 1rem; }  /* body text ≥ 16 px on phones (Crawford QA, 29 Oct) */
}