/* MaisaIT — the printed annual. Black and violet, Bricolage Grotesque.
   Tokens first; everything below refers to them. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  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 {
  --bg: #0f0a1c;
  --surface: #1a1030;
  --leaf: #3b1478;
  --leaf-2: #44198a;
  --ink: #c77dff;
  --muted: #9c8fb3;
  --accent: #c77dff;
  --accent-ink: #0f0a1c;
  --paper: #f6f3fa;
  --paper-2: #e6def2;
  --cream: #e6def2;
  --lit: #5a189a;

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(88px, 9.8vw, 150px);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(4.5rem, 9vw, 9rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 5rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; hyphens: none; letter-spacing: -0.04em; line-height: 0.95; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); }

/* masked lines: the signature move */
.ml { display: block; overflow: hidden; padding: 0.14em 0 0.12em; margin: -0.14em 0 -0.12em; }
.ml > span { display: block; }
.anim [data-ml] { visibility: hidden; }
.anim .ml > span { visibility: hidden; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; border-radius: var(--radius); transition: transform var(--t-hover) var(--ease-out), background-color var(--t-hover); will-change: transform; }
.btn:hover { background: var(--cream); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--small { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.9375rem; }
.btn--ink { background: var(--bg); color: var(--ink); }
.btn--ink:hover { background: var(--leaf); }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; transition: text-underline-offset var(--t-hover) var(--ease-out); }
.link:hover { text-underline-offset: 0.45em; }
.link--ink { color: var(--accent-ink); }

/* ---------------------------------------------------------------- header */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding: 1.25rem var(--margin); transition: background-color var(--t-ui), padding var(--t-ui) var(--ease-out); }
.top.is-solid { background: var(--bg); padding-block: 0.7rem; }
.top { transition: background-color var(--t-ui), padding var(--t-ui) var(--ease-out), transform 360ms var(--ease-out); }
.top.is-away { transform: translateY(-110%); }
.top:focus-within { transform: none; }
.top__logo { grid-column: 1 / 5; justify-self: start; display: block; }
.top__logo img { height: 3.5rem; width: auto; transition: height var(--t-ui) var(--ease-out); }
.top.is-solid .top__logo img { height: 2.75rem; }
.top__nav { grid-column: 5 / -1; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); font-size: 0.9375rem; font-weight: 500; }
.top__nav a:not(.btn) { position: relative; text-decoration: none; padding: 0.5rem 0; }
.top__nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out); }
.top__nav a:not(.btn):hover::after { transform: scaleX(1); }
.top__nav .btn { margin-left: auto; }
.menu-btn { display: none; }
.top--page + main { padding-top: 4.25rem; }

/* ---------------------------------------------------------------- hero */
.hero { --rw: calc((100vw - 2 * var(--margin) - 11 * var(--gutter)) * 0.6667 + 7 * var(--gutter)); --pic-h: calc(var(--rw) * 0.625); position: relative; align-items: start; }
.hero__left { grid-column: 1 / 5; padding-top: max(30svh, 9rem); }
.hero__lede { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; max-width: 24ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.hero__right { grid-column: 5 / -1; position: relative; display: flex; flex-direction: column; padding-top: max(6.5rem, 15svh); min-height: calc(68svh + var(--pic-h)); }
.hero__title { font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.04em; font-weight: 600; }
.hero__pic { position: relative; margin: auto 0 0; }
.hero__pic img { width: 100%; height: auto; background: var(--surface); }
.led { position: absolute; width: 1.15%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); transform: translate(-50%, -50%); animation: blink 1.7s steps(1, end) infinite; }
.led--lap { width: 1.6%; background: var(--accent); animation-duration: 2.4s; }
@keyframes blink { 50% { opacity: 0.2; } }
.hero__stat { position: absolute; left: 0; top: 0; transform: translateY(-50%); width: min(260px, 62%); background: var(--accent); color: var(--accent-ink); padding: 1.1rem 1.25rem 1.2rem; }
.hero__stat b { display: block; font-size: 40px; line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
.hero__stat span { display: block; margin-top: 0.35rem; font-weight: 500; font-size: 1.0625rem; line-height: 1.25; }
.anim [data-hero-fade] { opacity: 0; }
.anim .hero__pic img { clip-path: inset(0 0 100% 0); }

/* ---------------------------------------------------------------- showcase */
.showcase { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; background: var(--surface); padding-block: clamp(2rem, 5vw, 4.5rem); margin-top: var(--section); }
.showcase__plate { display: flex; align-items: center; padding-inline: var(--margin) 1.25rem; }
.plates { position: relative; width: 100%; aspect-ratio: 1; background: var(--bg); overflow: hidden; }
.plate { width: 100%; height: 100%; object-fit: cover; }
.js .plate { position: absolute; inset: 0; visibility: hidden; }
.js .plate.is-on { visibility: visible; }
.plate:not(.is-on) ~ .plate:not(.is-on) { margin-top: 0; }
.showcase__body { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding-inline: 1.25rem var(--margin); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.9rem; }
.tabs button { font-size: 1.125rem; font-weight: 500; color: var(--muted); padding: 0.55rem 0; position: relative; transition: color var(--t-hover); min-height: 2.75rem; }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.showcase__main h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); font-weight: 700; max-width: 12ch; }
.panels { margin-top: 3rem; max-width: 34ch; }
.panels p { font-size: var(--step-body); line-height: 1.5; }
.panels .lead { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.9rem; }
.js [role="tabpanel"][hidden] { display: none; }
.js [role="tabpanel"] + [role="tabpanel"] { margin-top: 0; }
[role="tabpanel"] + [role="tabpanel"] { margin-top: 2rem; }
.cells { display: grid; grid-template-columns: 1fr 1fr; }
.cell { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 0 1rem; text-align: center; background: var(--leaf); color: var(--ink); font-weight: 600; font-size: 1.0625rem; text-decoration: none; transition: background-color var(--t-hover), color var(--t-hover); }
.cell--gold { background: var(--accent); color: var(--accent-ink); }
.cell:hover { background: var(--cream); color: var(--accent-ink); }
.cell:focus-visible { outline-offset: -6px; outline-color: var(--accent-ink); }

/* ---------------------------------------------------------------- deck (cards that fold into spines) */
.deck { padding-top: var(--section); }
.deck__stage { padding: 0 var(--margin) var(--section); }
.deck h2 { font-size: clamp(2.5rem, 4.2vw, 4rem); font-weight: 600; }
.deck__band { display: grid; gap: 12px; margin-top: 3rem; }
.card { background: var(--surface); }
.card--1 { background: var(--leaf); }
.card--2 { background: var(--leaf-2); }
.card__in { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; min-height: 16rem; height: 100%; }
.card h3 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; max-width: 18ch; }
.card p { font-size: 1rem; line-height: 1.5; max-width: 44ch; }
.card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1rem; }
.card__foot a { font-weight: 600; text-underline-offset: 0.25em; }
.deck__foot { margin-top: 1.5rem; font-size: 1.0625rem; }
.deck__foot a { font-weight: 600; }

.deck--pinned { height: 240svh; padding-top: 0; --cw: 620px; }
.deck--pinned .deck__stage { position: sticky; top: 0; height: 100svh; padding-top: 7.5rem; padding-bottom: 0; overflow: hidden; }
.deck--pinned .deck__band { display: block; position: relative; height: 420px; margin-top: 2.5rem; overflow: hidden; }
.deck--pinned .card { position: absolute; top: 0; left: 0; height: 420px; width: var(--cw); overflow: hidden; cursor: default; }
.deck--pinned .card__in { width: var(--cw); min-height: 0; }
.deck--pinned .card h3 { max-width: 18ch; }
.card__tag { display: none; }
.deck--pinned .card__tag { display: block; position: absolute; left: 2rem; top: 2rem; z-index: 1; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; opacity: 0; }
.deck--pinned .card.is-spine { cursor: pointer; }
.deck--pinned .card.is-spine:hover { filter: brightness(1.12); }
.deck--pinned .deck__foot { margin-top: 3rem; }

/* ---------------------------------------------------------------- casa (mosaic) */
.casa { padding-top: var(--section); }
.casa__head { row-gap: 1.25rem; margin-bottom: 3rem; align-items: start; }
.casa__head h2 { grid-column: 6 / -1; font-size: var(--step-head); }
.casa__p { grid-column: 6 / 11; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); }
.tile { aspect-ratio: 1; padding: clamp(1.25rem, 2.2vw, 2.25rem); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; transition: background-color 360ms var(--ease-out), color 360ms var(--ease-out); overflow: hidden; }
.tile h3 { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; max-width: 12ch; }
.tile p { font-size: 1.0625rem; line-height: 1.4; max-width: 28ch; }
.tile--gold { background: var(--accent); color: var(--accent-ink); }
.tile--cream { background: var(--cream); color: var(--accent-ink); }
.tile--leaf { background: var(--leaf); color: var(--ink); }
.tile--gold:hover { background: var(--leaf); color: var(--ink); }
.tile--cream:hover { background: var(--accent); }
.tile--leaf:hover { background: var(--accent); color: var(--accent-ink); }
.tile--img { padding: 0; }
.tile--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.tile--img img, .tile--img video { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.tile--img:hover img { transform: scale(1.06); }

/* ---------------------------------------------------------------- proceso (many into one) */
.proceso { padding-block: var(--section); }
.proceso__head { row-gap: 1.25rem; align-items: start; }
.proceso__head h2 { grid-column: 6 / -1; font-size: var(--step-head); }
.proceso__head p { grid-column: 6 / 11; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.proceso__fig { padding: 3.5rem var(--margin) 0; }
.sq { width: 100%; height: auto; }
.sq--v { display: none; }
.sq-a { fill: var(--muted); }
.sq-b { fill: var(--lit); }
.sq-c { fill: var(--accent); }
.sq-d { fill: var(--cream); }
.sq-e { fill: var(--lit); }
.proceso__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: 1.5rem; }
.proceso__steps h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.5rem; font-weight: 700; }
.proceso__steps p { font-size: 1rem; line-height: 1.45; max-width: 30ch; }

/* ---------------------------------------------------------------- informe (the live thing) */
.informe { background: var(--surface); padding-block: var(--section); }
.informe__head { row-gap: 1.25rem; align-items: start; }
.informe__head h2 { grid-column: 6 / -1; font-size: var(--step-head); }
.informe__head p { grid-column: 6 / 11; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.informe__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 3.5rem var(--margin) 0; align-items: start; }
.informe__form { grid-column: 1 / 7; }
.chips { border: 0; padding: 0; margin: 0 0 2.25rem; min-width: 0; }
.chips legend { padding: 0; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.8rem; letter-spacing: -0.01em; }
.chips:not(.chips--checks) { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips:not(.chips--checks) legend { width: 100%; float: left; }
.chips--checks { display: grid; gap: 0.55rem; }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; min-height: 3.25rem; padding: 0.55rem 1.1rem; border: 2px solid var(--muted); color: var(--ink); font-weight: 500; font-size: 1.0625rem; line-height: 1.25; transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), transform var(--t-press); }
.chip:hover span { border-color: var(--ink); }
.chip input:active + span { transform: scale(0.985); }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.chips--checks span::before { content: ""; flex: none; width: 1.2rem; height: 1.2rem; margin-right: 0.85rem; border: 2px solid currentColor; transition: background-color var(--t-hover); }
.chips--checks input:checked + span::before { background: var(--accent-ink); border-color: var(--accent-ink); }

.sheet { --pad: clamp(1.25rem, 2.4vw, 2.25rem); grid-column: 7 / -1; background: var(--paper); color: var(--accent-ink); padding: var(--pad); position: sticky; top: 5.5rem; transform: rotate(0.6deg); }
.sheet__top { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 1.25rem; padding: 1.4rem var(--pad) 1.2rem; background: var(--accent); }
.sheet__top h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 700; }
.sheet__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 0.6rem; font-size: 1rem; font-weight: 500; }
.sheet__rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "t s"; align-items: center; gap: 0.1rem 1rem; padding: 0.8rem 0.9rem; }
.row:nth-child(odd) { background: var(--paper-2); }
.row__name { grid-area: n; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.row__note { grid-area: t; font-size: 1rem; color: #3b1478; line-height: 1.3; }
.stamp { grid-area: s; display: inline-block; padding: 0.4rem 0.85rem; font-weight: 800; font-size: 0.9375rem; transform: rotate(-4deg); transform-origin: center; white-space: nowrap; }
.is-ok .stamp { background: var(--leaf); color: var(--paper); }
.is-bad .stamp { background: var(--accent); color: var(--accent-ink); outline: 2px solid var(--accent-ink); }
.sheet__sum { margin-top: 1.25rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.sheet__next { margin-top: 0.5rem; font-size: 1rem; line-height: 1.5; min-height: 1.5rem; }
.sheet__next a { font-weight: 600; text-underline-offset: 0.2em; }
.sheet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.4rem; }
.sheet .btn { background: var(--accent-ink); color: var(--accent); }
.sheet .btn:hover { background: var(--leaf); }


/* ---------------------------------------------------------------- nosotros */
.nosotros { padding-block: var(--section); }
.nosotros__facts { grid-column: 1 / 3; font-size: 0.9375rem; line-height: 1.4; display: grid; gap: 0.5rem; align-content: start; padding-top: 0.4rem; font-weight: 500; }
.nosotros__text { grid-column: 3 / -1; }
.nosotros__lead { font-size: clamp(1.375rem, 0.9rem + 1.5vw, 2.25rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--muted); text-wrap: pretty; }
.nosotros__lead strong, .nosotros__soft strong { color: var(--ink); font-weight: 600; }
.dropcap { float: left; width: 3.6em; height: 3.6em; margin: 0.1em 0.5em 0.1em 0; object-fit: cover; }
.nosotros__soft { margin-top: 1.5em; font-size: clamp(1.375rem, 0.9rem + 1.5vw, 2.25rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--muted); text-wrap: pretty; clear: both; }

/* ---------------------------------------------------------------- cifras (colour page) */
.cifras__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifra { min-height: clamp(15rem, 30vw, 28rem); padding: clamp(1.25rem, 2.2vw, 2.25rem); display: flex; flex-direction: column; justify-content: space-between; color: var(--accent-ink); }
.cifra--gold { background: var(--accent); }
.cifra--cream { background: var(--cream); }
.cifra b { font-size: clamp(3.25rem, 7.8vw, 8.5rem); line-height: 0.9; letter-spacing: -0.05em; font-weight: 700; white-space: nowrap; }
.cifra span { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }

/* ---------------------------------------------------------------- contacto */
.contacto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--section) var(--margin) 0; align-items: start; }
.contacto__row { display: contents; }
.contacto__text { grid-column: 1 / 6; grid-row: 1; }
.contacto__text h2 { font-size: var(--step-head); }
.contacto__sentence { margin-top: 1.5rem; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; max-width: 20ch; }
.contacto__pic { grid-column: 8 / 10; grid-row: 1; width: min(170px, 100%); aspect-ratio: 1; object-fit: cover; margin-top: 0.4rem; }
.contacto__links { grid-column: 10 / -1; grid-row: 1; font-size: 1.125rem; }
.contacto__q { font-weight: 600; margin-bottom: 1.25rem; }
.contacto__links p + p { margin-top: 0.75rem; }
.contacto__links a { text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.contacto__small { margin-top: 1.5rem; font-size: 1rem; color: var(--muted); line-height: 1.45; }
.form { grid-column: 6 / -1; grid-row: 2; margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; background: var(--surface); padding: clamp(1.25rem, 2.6vw, 2.5rem); }
.form__h { grid-column: 1 / -1; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.form label { display: grid; gap: 0.4rem; font-weight: 500; font-size: 1.0625rem; }
.form input, .form select, .form textarea { width: 100%; min-height: 3.25rem; padding: 0.7rem 1rem; background: var(--bg); border: 2px solid var(--muted); border-radius: var(--radius); color: var(--ink); font-size: 1.0625rem; transition: border-color var(--t-hover); }
.form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23c77dff' stroke-width='2.5'/%3E%3C/svg%3E"); background-position: right 1rem center; background-repeat: no-repeat; padding-right: 2.75rem; }
.form textarea { resize: vertical; min-height: 7rem; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.form__wide { grid-column: 1 / -1; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* taste-skill-ignore */
.form__send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__status { font-weight: 600; display: none; }
.form__status.show { display: block; }
.form__legal { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--muted); line-height: 1.45; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--accent); color: var(--accent-ink); padding: clamp(2.5rem, 5vw, 5rem) var(--margin) 1.75rem; margin-top: var(--section); overflow: hidden; }
.foot__name { font-size: clamp(5rem, 27vw, 30rem); line-height: 0.88; letter-spacing: -0.05em; font-weight: 700; margin-bottom: clamp(2rem, 5vw, 4.5rem); white-space: nowrap; }
.foot__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.foot__places { grid-column: 1 / 7; display: grid; gap: 0.35rem; align-content: start; }
.foot__places li { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.foot__places a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-ui); }
.foot__places a:hover { text-decoration-color: currentColor; }
.foot__links { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-content: start; font-size: 0.9375rem; }
.foot__h { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 0.75rem; }
.foot__links li + li { margin-top: 0.45rem; }
.foot__links a { text-underline-offset: 0.2em; }
.foot__end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin-top: clamp(3rem, 8vw, 6rem); font-size: 0.875rem; }
.foot__end a { font-weight: 600; }
.wa-float { position: fixed; font-size: 0.9375rem; line-height: 1.2; right: var(--margin); bottom: var(--margin); z-index: 40; background: var(--accent); color: var(--accent-ink); border: 3px solid var(--bg); padding: 0.75rem 1.1rem; font-weight: 700; text-decoration: none; transition: transform var(--t-hover) var(--ease-out); }
.wa-float:hover { transform: translateY(-3px); }

/* ---------------------------------------------------------------- inner pages */
.band { display: grid; grid-template-columns: repeat(4, 1fr); height: clamp(10rem, 24vw, 22rem); overflow: hidden; background: var(--surface); }
.band img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.band img:hover { transform: scale(1.04); }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1.5rem var(--margin) 0; font-size: 0.9375rem; font-weight: 500; }
.crumbs a { text-underline-offset: 0.2em; }
.svc-head, .page-head { padding-top: clamp(2.5rem, 6vw, 5rem); row-gap: 1.5rem; align-items: start; }
.svc-head__badges { grid-column: 1 / 5; display: grid; gap: 0.5rem; font-size: 1.0625rem; font-weight: 600; padding-top: 0.5rem; }
.svc-head__main { grid-column: 6 / -1; }
.svc-head h1, .page-head h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.svc-head__deck { margin-top: 2rem; font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; max-width: 26ch; }
.svc-head__lede { margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.4; max-width: 38ch; letter-spacing: -0.01em; }
.svc-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.svc-sec { padding-top: clamp(6rem, 10vw, 9rem); row-gap: 2rem; align-items: start; }
.svc-sec h2 { grid-column: 1 / 6; font-size: var(--step-head); position: sticky; top: 6rem; }
.svc-feats, .svc-aud, .svc-paras, .svc-faq { grid-column: 6 / -1; }
.svc-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2.5rem; }
.svc-feats h3 { font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 0.5rem; }
.svc-feats p { font-size: 1.0625rem; line-height: 1.5; }
.svc-aud { display: grid; gap: 0.35rem; }
.svc-aud li { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.svc-paras { display: grid; gap: 1.25rem; }
.svc-paras p { font-size: var(--step-body); line-height: 1.6; max-width: 56ch; }
.svc-faq details { background: var(--surface); padding: 0 1.4rem; margin-bottom: 0.6rem; }
.svc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; padding: 0.9rem 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; cursor: pointer; list-style: none; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; flex: none; font-size: 2rem; line-height: 1; font-weight: 500; transition: transform var(--t-ui) var(--ease-out); }
.svc-faq details[open] summary::after { transform: rotate(45deg); }
.svc-faq details p { padding: 0 0 1.4rem; max-width: 54ch; font-size: 1.0625rem; line-height: 1.55; }
.svc-rel { padding-top: var(--section); row-gap: 2rem; align-items: start; }
.svc-rel h2 { grid-column: 1 / 6; font-size: var(--step-head); }
.svc-rel ul { grid-column: 6 / -1; display: grid; }
.svc-rel a { display: block; padding: 1.4rem 0; text-decoration: none; transition: padding-left var(--t-ui) var(--ease-out), background-color var(--t-ui); }
.svc-rel a:hover { padding-left: 1.25rem; background: var(--surface); }
.svc-rel h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -0.03em; line-height: 1.1; font-weight: 600; }
.svc-rel p { margin-top: 0.4rem; font-size: 1.0625rem; max-width: 44ch; }

.cta { background: var(--accent); color: var(--accent-ink); padding-block: var(--section); margin-top: var(--section); }
.cta__in { align-items: start; row-gap: 2rem; }
.cta h2 { grid-column: 1 / 7; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); }
.cta__r { grid-column: 8 / -1; }
.cta__r > p:first-child { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 2rem; }

.page-head h1 { grid-column: 6 / -1; font-size: clamp(2.75rem, 8vw, 7.5rem); }
.page-head__lede { grid-column: 6 / 11; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.list { padding-top: var(--section); row-gap: 2rem; align-items: start; }
.list h2 { grid-column: 1 / 6; font-size: var(--step-head); position: sticky; top: 6rem; }
.list__rows { grid-column: 6 / -1; display: grid; }
.list__rows li > a, .list__rows li > div { display: block; padding: 1.5rem 0; text-decoration: none; transition: padding-left var(--t-ui) var(--ease-out), background-color var(--t-ui); }
.list__rows li > a:hover { padding-left: 1.25rem; background: var(--surface); }
.list__rows h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -0.03em; line-height: 1.1; font-weight: 600; }
.list__rows p { margin-top: 0.5rem; max-width: 46ch; font-size: 1.0625rem; }
.list__rows .link { display: inline-block; margin-top: 0.75rem; }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 1000px) {
  .hero { display: flex; flex-direction: column; padding-top: 6.25rem; }
  .hero__right { display: contents; }
  .hero__title { order: 1; font-size: 15vw; line-height: 0.88; }
  .hero__left { order: 2; padding-top: 1.75rem; }
  .hero__pic { order: 3; margin-top: 8rem; }
  .hero__lede { font-size: 1.125rem; max-width: 30ch; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__stat { width: 60%; }
  .hero__stat b { font-size: 34px; }
  .hero { margin-inline: 0; padding-inline: var(--margin); }
  .hero__pic { margin-inline: calc(-1 * var(--margin)); }
  .hero__pic img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
  .led { display: none; }
  .hero__stat { left: var(--margin); }

  .top { grid-template-columns: 1fr auto; }
  .top__logo { grid-column: 1; }
  .top__logo img { height: 2.25rem; }
  .menu-btn { display: block; grid-column: 2; font-weight: 600; font-size: 1.0625rem; min-height: 2.75rem; padding: 0 0.25rem; }
  .js .top__nav { position: fixed; inset: 0; z-index: -1; background: var(--bg); flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem; padding: 6rem var(--margin) 3rem; font-size: clamp(2rem, 9vw, 3rem); font-weight: 600; letter-spacing: -0.04em; transform: translateY(-100%); visibility: hidden; transition: transform 500ms var(--ease-expo), visibility 0s linear 500ms; }
  .js .top.is-open .top__nav { transform: none; visibility: visible; transition-delay: 0s; }
  .top__nav .btn { margin: 1.5rem 0 0; font-size: 1.0625rem; min-height: 3.25rem; }
  .top.is-open { background: var(--bg); }
  .top__nav { grid-column: 1 / -1; flex-wrap: wrap; }
  .top { flex-wrap: wrap; }

  .showcase { grid-template-columns: 1fr; padding-block: 1rem 2rem; }
  .showcase__plate { padding: var(--margin); }
  .showcase__body { padding: 1rem var(--margin) 0; }
  .cells { grid-template-columns: 1fr; gap: 0.5rem; }
  .cell { min-height: 60px; }
  .showcase__main h2 { font-size: 2rem; }
  .panels { margin-top: 1.5rem; }

  .casa__head h2, .casa__p, .proceso__head h2, .proceso__head p, .informe__head h2, .informe__head p { grid-column: 1 / -1; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .tile { aspect-ratio: auto; min-height: 15rem; }
  .tile--img { aspect-ratio: 1; min-height: 0; }
  .tile--wide { aspect-ratio: 2 / 1; order: -1; }
  .proceso__fig { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 1.25rem; padding-top: 2.5rem; }
  .sq--h { display: none; }
  .sq--v { display: block; }
  .proceso__steps { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); margin-top: 0; gap: 0; }
  .proceso__steps li { align-self: center; padding-block: 0.5rem; }
  .proceso__steps h3 { font-size: 1.25rem; }
  .proceso__steps p { font-size: 1rem; }
  .informe__body { display: block; padding-top: 2.5rem; }
  .sheet { position: static; transform: none; margin-top: 1.5rem; }
  .nosotros__facts { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, 1fr); font-size: 0.8125rem; margin-top: 2rem; }
  .nosotros__text { grid-column: 1 / -1; }
  .nosotros__lead { font-size: 1.375rem; line-height: 1.25; }
  .nosotros__soft { font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; }
  .dropcap { width: 4em; height: 4em; }
  .cifras__grid { grid-template-columns: 1fr 1fr; }
  .cifra { min-height: 13rem; flex-direction: column-reverse; }
  .contacto { display: block; }
  .contacto__row { display: block; }
  .contacto__pic { width: 96px; float: left; margin: 1.5rem 1rem 0 0; }
  .contacto__links { margin-top: 1.5rem; overflow: hidden; }
  .form { margin-top: 2rem; grid-template-columns: 1fr; clear: both; }
  .foot__places, .foot__links { grid-column: 1 / -1; }
  .foot__links { grid-template-columns: 1fr 1fr; }
  .foot__name { font-size: 26vw; }
  .band { grid-template-columns: 1fr 1fr; height: 15rem; }
  .band img:nth-child(n + 3) { display: none; }
  .svc-head__badges, .svc-head__main, .svc-sec h2, .svc-feats, .svc-aud, .svc-paras, .svc-faq, .svc-rel h2, .svc-rel ul, .cta h2, .cta__r, .page-head h1, .page-head__lede, .list h2, .list__rows { grid-column: 1 / -1; }
  .svc-head__badges { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 1rem; grid-row: 2; margin-top: 0.5rem; }
  .svc-head__main { grid-row: 1; }
  .svc-sec h2, .list h2 { position: static; }
  .svc-feats { grid-template-columns: 1fr; gap: 1.75rem; }
  .svc-head h1 { font-size: clamp(2.5rem, 10.5vw, 4rem); }
}

@media (max-width: 560px) {
  .wa-float { padding: 0.55rem 0.8rem; font-size: 0.875rem; bottom: 0.75rem; }
  .tile h3 { font-size: 1.375rem; }
  .tile p { font-size: 1rem; }
  .chips--checks span { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 1000px) and (min-width: 561px) {
  .svc-aud { grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem; }
}