/* Auremont · Fundición — el muestrario de una fundición de sitios web */

:root {
  --black: #0a0a0b;
  --ghost: #151517;
  --lead: #2c2c30;
  --lead-2: #4a4a50;
  --pewter: #8f8c86;
  --silver: #d7d4ce;
  --white: #f5f2eb;
  --molten: #e9a23b;
  --hot: #ffd89a;

  --f-display: "Imbue", "Bodoni 72", Didot, "Times New Roman", serif;
  --f-ui: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --max: 1360px;
  --gutter: clamp(16px, 4vw, 56px);
  --cg: clamp(14px, 1.8vw, 28px);
  --head: 64px;
  --band: clamp(96px, 11vw, 184px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-pour: cubic-bezier(.62, .04, .34, 1);

  color-scheme: dark;
  interpolate-size: allow-keywords;
}

/* El nivel del metal fundido dentro del molde */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
/* Dónde cae la luz sobre el metal pulido */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: -25%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
/* El difuminado dorado de la palabra de portada, en un solo sitio */
:root {
  /* Tres capas bastan: las dos pegadas a la letra hacen el difuminado dorado y
     la tercera la asienta. La luz lejana ya la pone el aura del fondo. */
  --brillo:
    0 0 .038em rgb(255 203 121 / .58),
    0 0 .11em rgb(233 162 59 / .34),
    0 0 34px rgb(255 232 194 / .26);
}
/* Hacia dónde se inclina la luz de la portada cuando el cursor la recorre */
@property --ax { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --ay { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 20px); scrollbar-color: var(--lead-2) var(--black); }
body {
  margin: 0; background: var(--black); color: var(--silver);
  font: 400 1.0625rem/1.65 var(--f-ui); font-kerning: normal;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
main { overflow-x: clip; }
::selection { background: var(--molten); color: var(--black); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--lead-2); border: 2px solid var(--black); border-radius: 10px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: var(--lead-2); transition: text-decoration-color .2s ease, color .2s ease; }
a:hover { text-decoration-color: var(--molten); }
button, input, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--molten); }
button { padding: 0; border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, figure, dl, dd, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
ol, ul { padding: 0; list-style: none; }
cite { font-style: normal; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: fixed; top: 10px; left: var(--gutter); z-index: 120; padding: 12px 18px; background: var(--white); color: var(--black); font-weight: 600; text-decoration: none; translate: 0 -160%; transition: translate .3s var(--ease-out); }
.skip:focus { translate: 0 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }

/* ---------- Voces ---------- */
.t-display { font: 500 clamp(2.6rem, 1.1rem + 4.4vw, 5.25rem)/.98 var(--f-display); color: var(--white); text-wrap: balance; }
.t-head { font: 500 clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem)/1 var(--f-display); color: var(--white); text-wrap: balance; }
.t-sub { font: 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.18 var(--f-display); color: var(--white); text-wrap: pretty; }
.lede { font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem); line-height: 1.6; color: var(--silver); max-width: 46ch; text-wrap: pretty; }
.note { font-size: .9375rem; line-height: 1.6; color: var(--pewter); max-width: 46ch; text-wrap: pretty; }
.label { font: 600 .75rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--pewter); }
.link-u { text-decoration-color: var(--lead-2); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 1.5em;
  font: 600 .9375rem/1 var(--f-ui); letter-spacing: .01em; border-radius: 2px; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, scale .16s var(--ease-out);
}
.btn:active { scale: .97; }
.btn-ink { position: relative; isolation: isolate; overflow: hidden; background: var(--molten); color: var(--black); box-shadow: inset 0 1px 0 rgb(255 232 196 / .45); transform: perspective(700px) rotateX(var(--by, 0deg)) rotateY(var(--bx, 0deg)); transition: transform .45s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease, scale .16s var(--ease-out); }
.btn-ink::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgb(255 246 228 / .6) 50%, transparent 70%); translate: -130% 0; pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-ink:hover::after { translate: 130% 0; transition: translate .85s var(--ease-out); }
}
.btn-ink:hover { background: color-mix(in oklab, var(--molten) 80%, var(--hot)); }
.btn-line { border: 1px solid var(--lead-2); color: var(--white); }
.btn-line:hover { border-color: var(--molten); }
.btn-sm { min-height: 44px; padding: 0 1.1em; font-size: .875rem; }

/* ---------- Barra superior ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--head); border-bottom: 1px solid transparent; transition: background-color .35s ease, border-color .35s ease; }
.bar.is-set { background: rgb(10 10 11 / .6); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-bottom-color: rgb(245 242 235 / .08); }
.bar-in { height: 100%; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 40px); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--white); text-decoration: none; }
.brand .mark { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.brand .word { width: 108px; height: auto; fill: none; stroke: currentColor; stroke-width: 2.1; overflow: visible; }
.bar-nav { position: relative; display: flex; gap: clamp(18px, 2.2vw, 36px); }
.bar-nav a { position: relative; padding-block: 10px; font-size: .9375rem; font-weight: 500; color: var(--pewter); text-decoration: none; }
.bar-nav a:hover, .bar-nav a[aria-current="true"] { color: var(--white); }
.nav-ink { position: absolute; left: 0; bottom: 4px; width: 1px; height: 1px; background: var(--molten); opacity: 0; transform-origin: 0 50%; transform: translateX(var(--x, 0px)) scaleX(var(--w, 0)); transition: transform .5s var(--ease-out), opacity .3s ease; pointer-events: none; }
.nav-ink.is-on { opacity: 1; }
.bar-end { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); }
.clock { display: flex; gap: .45em; font-size: .8125rem; color: var(--pewter); white-space: nowrap; }
.clock time { color: var(--silver); }
.lang { display: flex; }
.lang button { position: relative; min-width: 44px; min-height: 44px; font: 600 .8125rem/1 var(--f-ui); letter-spacing: .06em; color: var(--pewter); transition: color .2s ease; }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--white); }
.lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 11px; height: 1px; background: var(--molten); }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.menu-btn .bars { position: relative; width: 22px; height: 8px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--white); transition: translate .3s var(--ease-out), rotate .3s var(--ease-out); }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .bars::before { translate: 0 3.25px; rotate: 45deg; }
.menu-btn[aria-expanded="true"] .bars::after { translate: 0 -3.25px; rotate: -45deg; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--molten); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
}
@keyframes progress { to { transform: scaleX(1); } }

.menu { position: fixed; inset: var(--head) 0 0; z-index: 85; overflow-y: auto; padding-block: 16px 40px; background: var(--black); }
.menu[hidden] { display: none; }
.menu ol a { display: block; padding-block: 14px; border-bottom: 1px solid var(--lead); font: 500 clamp(2rem, 8vw, 2.75rem)/1.1 var(--f-display); color: var(--white); text-decoration: none; }
.menu-foot { display: grid; gap: 12px; margin-top: 28px; }

/* ---------- Muestras: letras con sus líneas de medida ---------- */
[data-showing] { position: relative; }
.bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.m-line { position: absolute; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--lead); pointer-events: none; transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 140ms), background-color .9s ease; }
.m-line.is-base { background: color-mix(in oklab, var(--molten) 62%, var(--black)); }
.m-label { transition: opacity .6s ease calc(var(--i, 0) * 140ms + .5s), color .9s ease; position: absolute; right: 0; translate: 0 calc(-100% - 6px); font: 500 .6875rem/1 var(--f-ui); letter-spacing: .04em; color: var(--pewter); white-space: nowrap; pointer-events: none; }
.m-label.is-base { translate: 0 7px; color: var(--molten); }
.showing-cap { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; font-size: .8125rem; color: var(--pewter); }
.showing-cap b { font-weight: 500; color: var(--silver); }

/* ---------- Portada: la colada ---------- */
.cast { padding-block: calc(var(--head) + clamp(28px, 4.5vw, 64px)) var(--band); }
.cast-word { font-family: var(--f-display); font-size: var(--fit, clamp(4.5rem, 21vw, 18rem)); font-weight: 900; line-height: 1; white-space: nowrap; }
.cast-word > span:not(.m-line, .m-label) { display: block; }
.cw-ghost { color: transparent; -webkit-text-stroke: 1px var(--lead-2); }
.cw-fill, .cw-meniscus, .cw-sheen { position: absolute; left: 0; top: 0; }
.cw-fill { color: var(--white); clip-path: inset(calc(100% - var(--p)) 0 0 0); text-shadow: var(--brillo); }
.cw-meniscus { color: var(--hot); opacity: 0; clip-path: inset(calc(100% - var(--p)) 0 calc(var(--p) - 4%) 0); text-shadow: 0 0 .08em rgb(255 190 96 / .8); }
.cast-word .m-line.is-base { background: var(--lead-2); }
.cast-word .m-label.is-base { color: var(--pewter); }
.cast-word.is-cast .m-line.is-base { background: var(--molten); }
.cast-word.is-cast .m-label.is-base { color: var(--molten); }
.cast-3d { position: absolute; left: calc(50% - 50vw); top: -38%; width: 100vw; height: 176%; z-index: 1; display: block; pointer-events: none; }
.cast-word.is-3d > .m-line, .cast-word.is-3d > .m-label { z-index: 2; }
.cast-word.is-3d > .cw-ghost, .cast-word.is-3d > .cw-fill, .cast-word.is-3d > .cw-meniscus, .cast-word.is-3d > .cw-sheen { visibility: hidden; animation: none; }
.cw-sheen {
  color: var(--hot); opacity: 0; pointer-events: none; transition: opacity .45s ease;
  -webkit-mask-image: radial-gradient(1.1em 1.1em at var(--mx) var(--my), #000, transparent 72%);
  mask-image: radial-gradient(1.1em 1.1em at var(--mx) var(--my), #000, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .js .cw-fill { animation: pour 1.9s var(--ease-pour) .7s both, cool 3.6s cubic-bezier(.3, .6, .4, 1) .7s both; }
  .js .cw-meniscus { animation: pour 1.9s var(--ease-pour) .7s both, glint 2.3s ease .7s both; }
  .js .cast-word.is-cast .cw-sheen { animation: sweep 2.6s var(--ease-pour) .15s both; }
  .js .cast-word.is-polished .cw-sheen { animation: none; opacity: .45; }
  .js .cast-grid h1 { animation: set-line 1.1s var(--ease-out) .3s both; }
  .js .cast-side { animation: arrive .9s var(--ease-out) .65s both; }
}
@keyframes pour { from { --p: 0%; } to { --p: 100%; } }
@keyframes cool {
  0% { color: var(--hot); text-shadow: 0 0 .07em rgb(255 170 70 / .55); }
  38% { color: var(--molten); text-shadow: 0 0 .05em rgb(233 162 59 / .3); }
  100% { color: var(--white); text-shadow: var(--brillo); }
}
@keyframes glint { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sweep { 0% { --mx: -25%; opacity: 0; } 18%, 80% { opacity: .55; } 100% { --mx: 125%; opacity: 0; } }
@keyframes set-line { from { clip-path: inset(-10% -4% 100% -4%); translate: 0 .12em; } to { clip-path: inset(-10% -4% -30% -4%); translate: 0 0; } }
@keyframes arrive { from { opacity: 0; translate: 0 14px; } }

.cast-grid { margin-top: clamp(32px, 4vw, 56px); row-gap: 32px; align-items: start; }
.cast-grid h1 { grid-column: 1 / span 7; }
.cast-side { grid-column: 9 / span 4; display: grid; gap: 26px; padding-top: .6rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.direct-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .9375rem; color: var(--pewter); }
.direct-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- La luz de la portada: blanca con oro, siempre en movimiento ----------
   Vive anclada a la palabra, así cae en el mismo sitio en cualquier pantalla.
   Su centro queda en penumbra para que las letras se lean, y solo se mueve
   mientras la portada está a la vista. */
.cast-aura {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 118%; height: 236%;
  pointer-events: none; contain: layout style;
  translate: calc(-50% + (var(--ax) - 50%) * .07) calc(-50% + (var(--ay) - 50%) * .05);
  transition: translate .85s cubic-bezier(.22, 1, .36, 1);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 4%, rgb(0 0 0 / .26) 28%, #000 58%, #000 74%, transparent 97%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 4%, rgb(0 0 0 / .26) 28%, #000 58%, #000 74%, transparent 97%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.cast-aura span { position: absolute; inset: 0; border-radius: 50%; will-change: transform, opacity; animation-play-state: paused; }
.cast-aura.is-live span { animation-play-state: running; }
.ca-core {
  background: radial-gradient(ellipse 54% 58% at 50% 50%, rgb(255 249 236 / .38), rgb(255 228 180 / .18) 46%, transparent 76%);
  filter: blur(30px);
  animation: ca-breathe 8s ease-in-out infinite alternate;
}
.ca-gold {
  background: conic-gradient(from 0deg, rgb(233 162 59 / .42), rgb(255 216 154 / .58), rgb(255 252 244 / .4), rgb(196 132 48 / .34), rgb(255 198 118 / .5), rgb(233 162 59 / .42));
  filter: blur(46px) saturate(132%); mix-blend-mode: screen; opacity: .56;
  animation: ca-spin 26s linear infinite;
}
.ca-warm {
  background: radial-gradient(ellipse 34% 44% at 20% 46%, rgb(255 196 116 / .3), transparent 68%);
  filter: blur(38px); mix-blend-mode: screen;
  animation: ca-drift-a 17s ease-in-out infinite alternate;
}
.ca-white {
  background: radial-gradient(ellipse 30% 40% at 80% 56%, rgb(255 255 255 / .28), transparent 70%);
  filter: blur(40px); mix-blend-mode: screen;
  animation: ca-drift-b 21s ease-in-out infinite alternate;
}
@keyframes ca-breathe { from { opacity: .78; scale: .985; } to { opacity: 1; scale: 1.04; } }
@keyframes ca-spin { to { rotate: 360deg; } }
@keyframes ca-drift-a { from { translate: -5% -3%; scale: .94; } to { translate: 6% 4%; scale: 1.08; } }
@keyframes ca-drift-b { from { translate: 5% 4%; scale: 1.06; } to { translate: -6% -4%; scale: .94; } }

/* Al bajar, la luz se abre y se apaga: entrega la pantalla a las secciones siguientes */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .cast-aura { animation: aura-salida linear both; animation-timeline: view(); animation-range: exit 0% exit 92%; }
  }
}
@keyframes aura-salida { to { opacity: 0; scale: 1.24; } }

/* ---------- El relevo entre secciones ----------
   Cada sección recibe la luz que suelta la portada: primero se traza la costura
   de oro sobre su filo y después sube un resplandor que se asienta al fondo. */
.tester, .works, .studio, .services, .process, .faq, .colophon { position: relative; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .tester, .js .works, .js .contact, .js .studio, .js .services, .js .process, .js .faq, .js .colophon {
      background-image: linear-gradient(90deg, transparent, rgb(233 162 59 / .6) 22%, rgb(255 216 154 / .8) 50%, rgb(233 162 59 / .6) 78%, transparent);
      background-repeat: no-repeat; background-position: 50% 0; background-size: 0% 1px;
      animation: costura linear both; animation-timeline: view(); animation-range: entry 0% entry 58%;
    }
    .js .tester::after, .js .works::after, .js .contact::after, .js .studio::after,
    .js .services::after, .js .process::after, .js .faq::after, .js .colophon::after {
      content: ""; position: absolute; inset: 0 0 auto; height: min(48vh, 380px); z-index: -1;
      pointer-events: none; opacity: 0; will-change: opacity, transform;
      background:
        linear-gradient(to bottom, rgb(255 226 176 / .16), transparent 9%),
        radial-gradient(ellipse 58% 100% at 50% -4%, rgb(255 226 176 / .15), transparent 74%),
        radial-gradient(ellipse 22% 68% at 50% 0%, rgb(233 162 59 / .16), transparent 68%);
      animation: relevo linear both; animation-timeline: view(); animation-range: entry 0% entry 86%;
    }
  }
}
@keyframes costura { from { background-size: 0% 1px; } to { background-size: 100% 1px; } }
@keyframes relevo {
  0% { opacity: 0; translate: 0 26px; scale: .94 1; }
  52% { opacity: 1; translate: 0 0; scale: 1 1; }
  100% { opacity: .3; translate: 0 -10px; scale: 1.06 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-core, .ca-gold, .ca-warm, .ca-white { animation: none; }
}

/* ---------- Encabezados de sección ---------- */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head h2 { grid-column: 1 / span 7; }
.sec-head .note { grid-column: 9 / span 4; }

/* ---------- Probador de marca ---------- */
.tester { padding-block: var(--band); border-top: 1px solid var(--lead); }
.tester-field { display: grid; gap: 10px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.tester-field label { font-size: .875rem; font-weight: 500; color: var(--silver); }
.tester-field input {
  width: 100%; min-height: 76px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--lead-2); border-radius: 0; background: transparent;
  font: 400 clamp(1.875rem, 1.2rem + 2.2vw, 3rem)/1.2 var(--f-display); color: var(--white); transition: border-color .2s ease;
}
.tester-field input::placeholder { color: var(--pewter); opacity: 1; }
.tester-field input:hover { border-bottom-color: var(--pewter); }
.tester-field input:focus { outline: none; border-bottom-color: var(--molten); }
.styles { border-bottom: 1px solid var(--lead); }
.style {
  position: relative; display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) 44px; align-items: center; column-gap: var(--cg);
  min-height: clamp(108px, 12vw, 176px); padding-block: 18px; border-top: 1px solid var(--lead); cursor: pointer;
}
.style input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.style:has(input:focus-visible) { outline: 2px solid var(--white); outline-offset: -2px; }
.style-meta { display: grid; gap: 3px; }
.style-meta b { font-size: .9375rem; font-weight: 600; color: var(--silver); }
.style-meta span { font-size: .8125rem; color: var(--pewter); }
.style-meta .style-face { margin-top: 6px; color: var(--pewter); }
.lockup { display: flex; align-items: center; gap: .3em; min-width: 0; font-size: var(--lk, clamp(2rem, 1rem + 4.6vw, 5.5rem)); line-height: 1.12; color: var(--pewter); transition: color .3s ease; }
.lk-name { white-space: nowrap; }
.style:hover .lockup { color: var(--silver); }
.style:has(input:checked) .lockup { color: var(--white); }
.style { perspective: 900px; }
.lockup { transform-origin: 0% 62%; }
.style:has(input:checked) .lk-name, .style:has(input:checked) .lk-mono { text-shadow: .012em .012em 0 #8c8a85, .024em .024em 0 #6b6a66, .036em .036em 0 #53524e, .048em .048em 0 #3f3e3b, .06em .06em 0 #2e2e2c, .07em .09em .16em rgb(0 0 0 / .65); }
.pick { justify-self: end; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--lead-2); border-radius: 50%; transition: border-color .2s ease; }
.pick::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--molten); scale: 0; transition: scale .28s var(--ease-out); }
.style:has(input:checked) .pick { border-color: var(--molten); }
.style:has(input:checked) .pick::after { scale: 1; }

.lk-mono { flex: none; display: grid; place-items: center; width: 1.05em; height: 1.05em; font-size: .62em; line-height: 1; }
.lk-didona { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.lk-didona .lk-mono { border: 1px solid currentColor; border-radius: 50%; font-size: .5em; width: 1.7em; height: 1.7em; letter-spacing: 0; }
.lk-ancha { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-stretch: 125%; text-transform: uppercase; letter-spacing: .24em; }
.lk-ancha .lk-name { font-size: .5em; }
.lk-ancha .lk-mono { border: 1px solid currentColor; font-size: .34em; width: 2.3em; height: 2.3em; letter-spacing: 0; }
.lk-fuerte { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.lk-fuerte .lk-mono { background: currentColor; font-size: .56em; width: 1.3em; height: 1.3em; }
.lk-fuerte .lk-mono span { color: var(--black); }
.lk-calida { font-family: "Gloock", Georgia, serif; letter-spacing: -.01em; }
.lk-calida .lk-mono { border: 1px solid currentColor; border-bottom: 0; border-radius: 1em 1em 0 0; font-size: .46em; width: 1.7em; height: 1.9em; padding-top: .2em; }
.lk-name .h { animation: strike .9s var(--ease-out) both; }
.lockup.is-struck { animation: flare .9s var(--ease-out) both, sort-flip .85s var(--ease-out) both; }
@keyframes sort-flip { from { rotate: x -88deg; } }
@keyframes flare { from { color: var(--hot); text-shadow: 0 0 .12em rgb(255 180 80 / .6); } }
@keyframes strike {
  from { color: var(--hot); text-shadow: 0 0 .14em rgb(255 180 80 / .7); }
  55% { color: var(--molten); text-shadow: 0 0 .05em rgb(233 162 59 / .25); }
}
.tester-send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 3vw, 44px); }

/* ---------- Obras ---------- */
.works { padding-top: var(--band); border-top: 1px solid var(--lead); }
.work { padding-top: clamp(64px, 8vw, 136px); }
.work-name { position: relative; z-index: 1; font-size: var(--fit, clamp(3rem, 12vw, 10rem)); font-weight: 400; line-height: 1; color: var(--name-c, var(--white)); white-space: nowrap; }
.work-ghost { position: absolute; left: 0; top: 0; z-index: 0; font-size: var(--fit, clamp(3rem, 12vw, 10rem)); font-weight: 400; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--lead-2); pointer-events: none; }
.wn-izalco { --name-c: #f0b93b; font-family: "Gloock", Georgia, serif; letter-spacing: -.015em; }
.wn-obsidiana { --name-c: #ece7df; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 250; font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }
.wn-norte { --name-c: #e4572e; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: -.035em; }
.work-top { margin-top: clamp(36px, 4vw, 60px); row-gap: 28px; align-items: start; }
.work-meta { grid-column: 1 / span 4; border-bottom: 1px solid var(--lead); }
.work-meta div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding-block: 12px; border-top: 1px solid var(--lead); }
.work-meta dt { font-size: .8125rem; color: var(--pewter); }
.work-meta dd { font-size: .9375rem; line-height: 1.5; color: var(--silver); }
.work-stand { grid-column: 6 / span 7; }
.work-plate { margin-top: clamp(64px, 7vw, 112px); }
.work-body { margin-top: clamp(44px, 5vw, 80px); row-gap: 48px; align-items: start; }
.work-notes { grid-column: 1 / span 5; display: grid; gap: clamp(26px, 3vw, 40px); }
.work-note h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--white); }
.work-note p { margin-top: 8px; font-size: 1rem; line-height: 1.65; color: var(--pewter); max-width: 48ch; }
.work-phones { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg); }
.work-quote { margin-top: clamp(56px, 6vw, 96px); }
.work-quote p { max-width: 24ch; font: 400 clamp(1.875rem, 1.2rem + 2.4vw, 3.5rem)/1.1 var(--f-display); color: var(--white); text-wrap: balance; }
.work-quote footer { margin-top: 18px; font-size: .875rem; color: var(--pewter); }
.work-quote footer cite { color: var(--silver); }
.work-spec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(48px, 5vw, 80px); padding-top: 28px; border-top: 1px solid var(--lead); }
.chips { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.chip { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; letter-spacing: .02em; color: var(--pewter); font-variant-numeric: tabular-nums; }
.chip i { width: 22px; height: 22px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(245 242 235 / .14); }
.spec-type { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.glyphs { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); line-height: 1; color: var(--white); white-space: nowrap; }
.spec-type .names { font-size: .8125rem; color: var(--pewter); }

/* ---------- Láminas y la lámpara que las enciende ---------- */
.plate { position: relative; isolation: isolate; perspective: 1500px; }
.plate .canvas { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.plate .canvas::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(55% 45% at var(--gx, 50%) var(--gy, 0%), rgb(255 222 180 / .2), transparent 72%); }
.plate.is-tilting .canvas::after { opacity: 1; }
.plate::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -20%; width: 134%; height: 142%; translate: -50% 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(38% 15% at 50% 9%, rgb(255 214 160 / .22), transparent 72%),
    radial-gradient(closest-side at 50% 36%, rgb(255 214 160 / .15), rgb(255 214 160 / .04) 52%, transparent 78%);
}
.work-plate::after {
  content: ""; position: absolute; left: 50%; top: -16px; width: min(32%, 220px); height: 4px; translate: -50% 0; border-radius: 2px; opacity: .45;
  background: linear-gradient(90deg, color-mix(in oklab, var(--molten) 30%, var(--black)), var(--molten) 50%, color-mix(in oklab, var(--molten) 30%, var(--black)));
  box-shadow: 0 2px 3px rgb(0 0 0 / .55); transition: opacity .7s var(--ease-out);
}
.work-plate.is-lit::after { opacity: 1; }
.plate .canvas::before { content: ""; position: absolute; inset: 0; z-index: 2; background: #08070a; opacity: 0; pointer-events: none; }
.js .plate .canvas::before { opacity: .93; }
.js .plate.is-lit::before { animation: lamp-pool 1.35s linear forwards; }
.js .plate.is-lit .canvas::before { animation: lamp-veil 1.35s linear forwards; }
@keyframes lamp-pool { 0% { opacity: 0; } 7% { opacity: .62; } 11% { opacity: .16; } 21% { opacity: .88; } 29% { opacity: .52; } 44% { opacity: .96; } 100% { opacity: 1; } }
@keyframes lamp-veil {
  0% { opacity: .93; }
  7% { opacity: .42; }
  11% { opacity: .84; }
  21% { opacity: .16; }
  29% { opacity: .44; }
  44% { opacity: .05; }
  100% { opacity: 0; }
}
.work-plate, .work-phones .plate { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.plate .canvas {
  position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 16 / 10;
  background: #141416; border: 1px solid var(--lead); border-radius: 2px;
  box-shadow: 0 18px 32px -20px rgb(0 0 0 / .9);
}
.plate .canvas-phone { aspect-ratio: 9 / 18.6; border-radius: 12px; }
.exhibit { position: absolute; inset: 0 0 auto; width: 100%; transition: transform 7s cubic-bezier(.45, 0, .25, 1); }
.canvas.is-panning .exhibit { transform: translate3d(0, calc(var(--pan, 0px) * -1), 0); }
@media (hover: hover) and (pointer: fine) { .canvas[data-pan]:hover .exhibit { transform: translate3d(0, calc(var(--pan, 0px) * -1), 0); } }
.plate-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 14px; font-size: .8125rem; line-height: 1.55; color: var(--pewter); }
.plate-cap b { font-weight: 600; color: var(--silver); }
.pan-btn { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-left: auto; font: 600 .8125rem/1 var(--f-ui); color: var(--white); }
.pan-btn .ico { transition: rotate .35s var(--ease-out); }
.pan-btn[aria-pressed="true"] .ico { rotate: 180deg; }

/* ---------- Nota sobre los proyectos ---------- */
.disclaimer { padding-top: clamp(64px, 7vw, 112px); }
.disclaimer p { max-width: 86ch; padding-top: 24px; border-top: 1px solid var(--lead); font-size: .8125rem; line-height: 1.65; color: var(--pewter); }
.disclaimer a { color: var(--silver); }

/* ---------- Contacto ---------- */
.contact { position: relative; margin-top: var(--band); padding-block: var(--band); border-top: 1px solid var(--lead); }
.contact::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; pointer-events: none; background: radial-gradient(46% 60% at 50% 0%, rgb(233 162 59 / .07), transparent 72%); }
.contact-grid { position: relative; row-gap: 56px; align-items: start; }
.contact-intro { grid-column: 1 / span 5; }
.contact-intro .lede { margin-top: 22px; }
.direct { display: grid; gap: 24px; margin-top: clamp(36px, 4vw, 56px); }
.direct li { display: grid; gap: 4px; }
.direct-k { font-size: .8125rem; color: var(--pewter); }
.direct-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font: 400 clamp(1.75rem, 1.1rem + 2vw, 2.75rem)/1.15 var(--f-display); color: var(--white); overflow-wrap: anywhere; }
.copy-btn { display: inline-flex; align-items: center; min-height: 44px; font: 600 .8125rem/1 var(--f-ui); color: var(--pewter); text-decoration: underline; text-decoration-color: var(--lead-2); text-underline-offset: .35em; transition: color .2s ease; }
.copy-btn:hover { color: var(--white); }

.brief { grid-column: 7 / span 6; display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-size: .875rem; font-weight: 500; color: var(--silver); }
.field legend { margin-bottom: 10px; }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid var(--lead); border-radius: 2px; background: var(--ghost); color: var(--white);
  transition: border-color .2s ease, background-color .2s ease;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--pewter); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--lead-2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--molten); background: #111113; }
.field input[aria-invalid="true"] { border-color: var(--white); }
.field-state, .form-state { font-size: .875rem; color: var(--white); }
.field-state:empty, .form-state:empty { display: none; }
.chips-in { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-in {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--lead); border-radius: 2px; font-size: .9375rem; color: var(--pewter); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.chip-in::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lead-2); transition: background-color .2s ease; }
.chip-in input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-in:hover { border-color: var(--lead-2); color: var(--silver); }
.chip-in:has(input:checked) { border-color: var(--molten); color: var(--white); background: rgb(233 162 59 / .08); }
.chip-in:has(input:checked)::before { background: var(--molten); }
.chip-in:has(input:focus-visible) { outline: 2px solid var(--white); outline-offset: 3px; }
.consent-check { display: flex; align-items: flex-start; gap: 12px; font-size: .875rem; line-height: 1.55; color: var(--silver); cursor: pointer; }
.consent-check input {
  appearance: none; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; margin-top: 1px;
  border: 1px solid var(--lead-2); border-radius: 2px; background: var(--ghost); cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.consent-check input:hover { border-color: var(--pewter); }
.consent-check input:checked { background: var(--molten); border-color: var(--molten); }
.consent-check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black); rotate: -45deg; translate: 0 -1px; }
.consent-check input[aria-invalid="true"] { border-color: var(--white); }
.consent-check a { color: var(--white); }
.form-privacy { font-size: .8125rem; line-height: 1.6; color: var(--pewter); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Estudio ---------- */
.studio { padding-block: var(--band); border-top: 1px solid var(--lead); }
.studio-grid { row-gap: 32px; }
.studio h2 { grid-column: 1 / -1; }
.statement { grid-column: 1 / span 11; margin-block: clamp(8px, 1.5vw, 20px) clamp(32px, 4vw, 64px); font: 400 clamp(2rem, 1.2rem + 2.6vw, 3.75rem)/1.1 var(--f-display); color: var(--white); text-wrap: pretty; }
.statement strong { font-weight: 600; }
.js .statement .w { color: var(--lead-2); transition: color .45s ease; }
.js .statement .w.on { color: var(--silver); }
.js .statement strong .w.on { color: var(--molten); }
.studio-body { grid-column: 6 / span 7; display: grid; gap: 18px; max-width: 64ch; }
.studio-body strong { font-weight: 600; color: var(--white); }
.signature { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: .8125rem; color: var(--pewter); }
.signature svg { width: 120px; height: auto; fill: none; stroke: var(--silver); stroke-width: 1.9; overflow: visible; }
.creed { margin-block: 14px 6px; border-bottom: 1px solid var(--lead); }
.creed div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--cg); row-gap: 6px; align-items: baseline; padding-block: 18px; border-top: 1px solid var(--lead); }
.creed dt { font-size: .875rem; font-weight: 600; color: var(--silver); }
.creed dd { font: 400 clamp(1.375rem, 1.1rem + .8vw, 1.875rem)/1.22 var(--f-display); color: var(--white); text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cg); margin-top: clamp(40px, 4.4vw, 64px); }
.facts div { padding-top: 14px; border-top: 1px solid var(--lead); }
.facts dt { font-size: .8125rem; color: var(--pewter); }
.facts dd { margin-top: 6px; color: var(--silver); }

/* ---------- Servicios ---------- */
.services { padding-block: var(--band); border-top: 1px solid var(--lead); }
.svc-list { border-bottom: 1px solid var(--lead); perspective: 1400px; }
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: var(--cg); row-gap: 10px; align-items: baseline; padding-block: clamp(24px, 2.8vw, 40px); border-top: 1px solid var(--lead); }
.svc-name { display: grid; gap: 8px; justify-items: start; transform-origin: 0% 50%; transition: transform .5s var(--ease-out); }
.svc h3 { font: var(--w, 400) clamp(1.875rem, 1.2rem + 2.4vw, 3.5rem)/1.02 var(--f-display); color: var(--silver); transition: color .3s ease, font-weight 1.3s var(--ease-out) calc(var(--i, 0) * 120ms); }
.wght { font-size: .75rem; color: var(--pewter); letter-spacing: .02em; }
.svc:nth-child(1) { --w: 300; --i: 0; }
.svc:nth-child(2) { --w: 400; --i: 1; }
.svc:nth-child(3) { --w: 500; --i: 2; }
.svc:nth-child(4) { --w: 700; --i: 3; }
.svc:nth-child(5) { --w: 850; --i: 4; }
.svc:hover h3 { color: var(--white); }
.svc:hover .svc-name { transform: rotateY(-7deg) translateZ(26px); }
.svc p { font-size: 1rem; line-height: 1.6; color: var(--pewter); }
.svc .who { font-size: .875rem; }
.svc .who b { display: block; font-size: .8125rem; font-weight: 600; color: var(--silver); }

/* ---------- Proceso ---------- */
.process { padding-block: var(--band); border-top: 1px solid var(--lead); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cg); }
.step { padding-top: 18px; border-top: 1px solid var(--lead); perspective: 700px; }
.step .n { position: relative; display: block; font: 400 clamp(4rem, 2rem + 5vw, 7.5rem)/.9 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--lead-2); transition: color .35s ease, -webkit-text-stroke-color .35s ease; }
.step .n::after { content: attr(data-n); position: absolute; left: 0; top: 0; color: var(--silver); -webkit-text-stroke: 0; clip-path: inset(calc(100% - var(--p)) -10% -12% -10%); }
.step:nth-child(2) { --i: 1; }
.step:nth-child(3) { --i: 2; }
.step:nth-child(4) { --i: 3; }
.step:nth-child(5) { --i: 4; }
.step h3 { margin-top: 18px; font-size: 1.125rem; font-weight: 600; color: var(--white); }
.step p { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--pewter); }
.proof { margin-top: clamp(40px, 4.4vw, 64px); max-width: 60ch; color: var(--pewter); }
.proof strong { font-weight: 600; color: var(--white); }
.proof [data-load] { font-variant-numeric: tabular-nums; }

/* ---------- Preguntas ---------- */
.faq { padding-block: var(--band); border-top: 1px solid var(--lead); }
.faq-grid { row-gap: 36px; align-items: start; }
.faq-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--head) + 32px); display: grid; gap: 20px; justify-items: start; }
.faq-list { grid-column: 6 / span 7; border-bottom: 1px solid var(--lead); }
.q { border-top: 1px solid var(--lead); }
.q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-block: 20px; cursor: pointer; list-style: none;
  font: 400 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.2 var(--f-display); color: var(--white);
}
.q summary::-webkit-details-marker { display: none; }
.q summary i { position: relative; flex: none; width: 16px; height: 16px; }
.q summary i::before, .q summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--molten); transition: rotate .3s var(--ease-out), background-color .3s ease; }
.q summary i::after { rotate: 90deg; }
.q[open] summary i::after { rotate: 0deg; }
.q p { max-width: 62ch; padding-bottom: 24px; color: var(--pewter); }
.q::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
.q[open]::details-content { block-size: auto; }

/* ---------- Colofón ---------- */
.colophon { padding-top: var(--band); border-top: 1px solid var(--lead); overflow: hidden; }
.colo-grid { row-gap: 40px; }
.colo-brand { grid-column: 1 / span 4; display: grid; gap: 22px; justify-items: start; }
.colo-brand .lockup-svg { width: min(100%, 300px); height: auto; }
.colo-brand p { max-width: 36ch; font-size: .9375rem; color: var(--pewter); }
.colo-col { grid-column: span 2; }
.colo-col:nth-child(2) { grid-column: 6 / span 2; }
.colo-col:nth-child(3) { grid-column: 8 / span 2; }
.colo-col:nth-child(4) { grid-column: 10 / span 3; }
.colo-col h3 { margin-bottom: 14px; font-size: .8125rem; font-weight: 600; color: var(--silver); }
.colo-col li { padding-block: 3px; font-size: .9375rem; color: var(--pewter); }
.colo-col a { text-decoration: none; }
.colo-col a:hover { color: var(--white); }
.colo-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: clamp(56px, 6vw, 96px); padding-block: 22px 8px; background: linear-gradient(var(--lead), var(--lead)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; font-size: .8125rem; color: var(--pewter); }
.colo-note a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.colo-legal { display: flex; flex-wrap: wrap; gap: 0 22px; padding-bottom: 12px; font-size: .8125rem; }
.colo-legal a, .colo-legal button { display: inline-flex; align-items: center; min-height: 44px; color: var(--pewter); text-decoration: underline; text-decoration-color: var(--lead-2); text-underline-offset: .3em; text-decoration-thickness: 1px; transition: color .2s ease; }
.colo-legal a:hover, .colo-legal button:hover { color: var(--white); }
.colo-mold { height: .74em; margin-top: clamp(24px, 3vw, 48px); overflow: hidden; font: 900 var(--fit, 21vw)/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--lead-2); white-space: nowrap; user-select: none; }
.colo-mold { position: relative; }
.colo-mold span { display: block; }
.colo-mold .mold-fill { position: absolute; left: 0; top: 0; --p: 0%; color: var(--molten); -webkit-text-stroke: 0; clip-path: inset(calc(100% - var(--p)) 0 0 0); }

/* ---------- Barra de contacto en el teléfono ---------- */
.contact-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--black); border-top: 1px solid var(--lead); translate: 0 110%; transition: translate .4s var(--ease-out);
}
.contact-bar .btn { flex: 1; }
.contact-bar.is-on { translate: 0 0; }
.has-consent .contact-bar { display: none !important; }

/* ---------- Consentimiento de cookies ---------- */
.consent {
  position: fixed; z-index: 110; left: var(--gutter); right: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 1000px; margin-inline: auto; padding: 18px 22px;
  background: var(--black); border: 1px solid var(--lead-2); border-radius: 2px;
  box-shadow: 0 -24px 48px -12px rgb(10 10 11 / .85), 0 18px 40px -20px rgb(0 0 0 / .9);
  transition: opacity .3s var(--ease-out), translate .3s var(--ease-out);
}
@starting-style { .consent { opacity: 0; translate: 0 12px; } }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.consent-copy { flex: 1 1 380px; }
.consent-title { font: 500 1.5rem/1.1 var(--f-display); color: var(--white); }
.consent-text { margin-top: 6px; font-size: .875rem; line-height: 1.55; color: var(--pewter); }
.consent-text a { color: var(--silver); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.consent-link { min-height: 44px; padding: 0 4px; font-size: .875rem; color: var(--silver); text-decoration: underline; text-decoration-color: var(--lead-2); text-underline-offset: .35em; }
.consent-link:hover { text-decoration-color: var(--molten); }

.consent-dlg {
  width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 1px solid var(--lead-2); border-radius: 2px; background: var(--black); color: var(--silver);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .95);
}
.consent-dlg::backdrop { background: rgb(10 10 11 / .78); }
.consent-dlg form { display: grid; padding: clamp(22px, 4vw, 32px); }
.consent-dlg h2 { font: 500 2rem/1.05 var(--f-display); color: var(--white); }
.c-intro { margin: 8px 0 14px; font-size: .9375rem; line-height: 1.55; color: var(--pewter); }
.c-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; border-top: 1px solid var(--lead); }
.c-row b { font-weight: 600; color: var(--white); }
.c-row label { cursor: pointer; }
.c-row p { margin-top: 4px; font-size: .875rem; line-height: 1.5; color: var(--pewter); }
.c-state { flex: none; font: 600 .6875rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--pewter); text-align: right; }
.c-switch { appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; border-radius: 99px; background: var(--lead); cursor: pointer; transition: background-color .2s ease; }
.c-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: translate .2s var(--ease-out); }
.c-switch:checked { background: var(--molten); }
.c-switch:checked::after { translate: 22px 0; }
.c-switch:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.c-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Página legal ---------- */
.legal { padding-block: calc(var(--head) + clamp(40px, 6vw, 88px)) var(--band); }
.legal-grid { row-gap: 40px; }
.legal-nav { grid-column: 1 / span 3; position: sticky; top: calc(var(--head) + 32px); align-self: start; display: grid; border-top: 1px solid var(--lead); }
.legal-nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--lead); font-size: .9375rem; color: var(--pewter); text-decoration: none; }
.legal-nav a:hover { color: var(--white); }
.legal-body { grid-column: 5 / span 8; max-width: 72ch; }
.legal-body > h1 { font: 500 clamp(2.5rem, 1.2rem + 4vw, 5rem)/1 var(--f-display); color: var(--white); text-wrap: balance; }
.legal-body .legal-intro { margin-top: 18px; font: 400 clamp(1.25rem, 1rem + .8vw, 1.625rem)/1.3 var(--f-display); color: var(--silver); }
.legal-body .legal-updated { margin-top: 14px; font-size: .8125rem; color: var(--pewter); }
.legal-body section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--lead); scroll-margin-top: calc(var(--head) + 20px); }
.legal-body h2 { font: 500 clamp(1.875rem, 1.2rem + 1.8vw, 2.75rem)/1.05 var(--f-display); color: var(--white); text-wrap: balance; }
.legal-body h3 { margin-top: 28px; font: 600 1.0625rem/1.4 var(--f-ui); color: var(--white); }
.legal-body p, .legal-body li { margin-top: 10px; font-size: 1rem; line-height: 1.72; color: var(--silver); text-wrap: pretty; }
.legal-body ul { padding-left: 1.2em; list-style: disc; }
.legal-body li::marker { color: var(--pewter); }
.legal-body strong { font-weight: 600; color: var(--white); }
.legal-body a { color: var(--white); }
.legal-body .fill { font-weight: 600; color: var(--molten); }
.legal-table-wrap { margin-top: 16px; overflow-x: auto; }
.legal-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .875rem; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lead); color: var(--silver); line-height: 1.5; }
.legal-table th { font: 600 .6875rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--pewter); }
.legal-table code { font-size: .8125rem; color: var(--white); }
.legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- Viñetas: flores tipográficas fundidas en oro ---------- */
.flor-rule { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); margin-bottom: clamp(28px, 4vw, 52px); }
.flor-rule::before, .flor-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--lead) 18%, var(--lead) 82%, transparent); }
.flor { flex: none; width: clamp(36px, 3.4vw, 46px); height: auto; color: var(--molten); opacity: .95; filter: drop-shadow(0 0 14px rgb(233 162 59 / .35)); }
/* La flor tiene cuatro pétalos iguales: girarla 90° la deja igual que al empezar,
   así el giro no tiene costura y puede seguir para siempre. Solo late mientras se la mira. */
@keyframes flor-gira { to { rotate: 90deg; } }
@keyframes flor-rescoldo {
  0%, 100% { opacity: .92; filter: drop-shadow(0 0 14px rgb(233 162 59 / .35)); }
  50% { opacity: 1; filter: drop-shadow(0 0 26px rgb(255 216 154 / .68)) drop-shadow(0 0 6px rgb(255 240 210 / .5)); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .flor-sm { animation: flor-gira 34s linear calc(var(--fi, 0) * -8s) infinite, flor-rescoldo 5.4s ease-in-out calc(var(--fi, 0) * .8s) infinite; }
  .js .flor-rule.is-in .flor { animation: flor-gira 34s linear 1.3s infinite, flor-rescoldo 5.4s ease-in-out calc(1.3s + var(--fi, 0) * .8s) infinite; }
  .js .flor { animation-play-state: paused; }
  .js .flor.is-viva { animation-play-state: running; }
}
.js .flor-rule .flor { opacity: 0; rotate: -28deg; scale: .7; transition: opacity .9s var(--ease-out), rotate 1.1s var(--ease-out), scale 1.1s var(--ease-out); }
.js .flor-rule.is-in .flor { opacity: .92; rotate: 0deg; scale: 1; }
.flor-rule.is-end { margin-block: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 36px); }
.flor-inline { width: 20px; margin: 0 2px -4px; opacity: .85; }
.direct-links { align-items: center; }
.contact-intro .flor-sm { margin-top: clamp(28px, 3.4vw, 44px); margin-bottom: -8px; }
.colo-brand .flor-sm { margin-bottom: -6px; }
.menu-foot .flor-sm { margin: 0 auto 6px; }
.legal-body .flor-rule { margin-bottom: clamp(22px, 3vw, 36px); }
.flor-sm { width: 32px; height: auto; margin-bottom: 16px; color: var(--molten); opacity: .9; filter: drop-shadow(0 0 14px rgb(233 162 59 / .35)); }
.work-quote .flor-sm { margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) {
  .js .flor-rule .flor { opacity: .92; rotate: 0deg; scale: 1; transition: none; }
}

/* ---------- Atmósfera: el negro toma el color de lo que estás viendo ---------- */
@property --t1 { syntax: "<color>"; inherits: true; initial-value: rgb(233 162 59 / .1); }
@property --t2 { syntax: "<color>"; inherits: true; initial-value: rgb(233 162 59 / .04); }
.atmos::after {
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.atmos {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(85% 65% at 88% -8%, var(--t1), transparent 70%),
    radial-gradient(75% 60% at -5% 108%, var(--t2), transparent 72%);
  transition: --t1 1.4s ease, --t2 1.4s ease;
}
body[data-tint="inicio"] { --t1: rgb(233 162 59 / .1); --t2: rgb(233 162 59 / .04); }
body[data-tint="acabado"] { --t1: color-mix(in oklab, var(--finish, #dcd8d0) 30%, transparent); --t2: color-mix(in oklab, var(--finish, #dcd8d0) 16%, transparent); }
body[data-tint="probador"] { --t1: rgb(255 216 154 / .09); --t2: rgb(233 162 59 / .07); }
body[data-tint="izalco"] { --t1: rgb(240 185 59 / .28); --t2: rgb(194 59 34 / .24); }
body[data-tint="obsidiana"] { --t1: rgb(236 231 223 / .17); --t2: rgb(142 150 168 / .2); }
body[data-tint="norte"] { --t1: rgb(228 87 46 / .27); --t2: rgb(214 211 205 / .1); }
body[data-tint="contacto"] { --t1: rgb(233 162 59 / .17); --t2: rgb(255 216 154 / .07); }
body[data-tint="estudio"] { --t1: rgb(245 242 235 / .07); --t2: rgb(233 162 59 / .07); }

/* ---------- Míralo de cerca: una A de metal en escena fija ---------- */
.look { position: relative; padding-block: var(--band); border-top: 1px solid var(--lead); }
.look-in { display: grid; gap: clamp(28px, 4vw, 48px); }
.look-head { max-width: 34rem; display: grid; gap: 14px; }
.look-canvas { position: relative; display: grid; place-items: center; height: min(62vh, 600px); }
.look-canvas::before { content: ""; position: absolute; left: 50%; top: var(--lamp-y, 14%); width: min(18vw, 190px); height: 4px; translate: -50% 0; border-radius: 2px; background: linear-gradient(90deg, color-mix(in oklab, var(--molten) 30%, var(--black)), var(--molten) 50%, color-mix(in oklab, var(--molten) 30%, var(--black))); box-shadow: 0 2px 3px rgb(0 0 0 / .55); z-index: 1; }
.look-canvas::after { content: ""; position: absolute; left: 50%; top: calc(var(--lamp-y, 14%) - 14px); width: min(70vw, 760px); height: 76%; translate: -50% 0; pointer-events: none; background: radial-gradient(30% 10% at 50% 4%, rgb(255 214 160 / .28), transparent 72%), radial-gradient(closest-side at 50% 44%, rgb(255 214 160 / .13), rgb(255 214 160 / .03) 55%, transparent 80%); }
.look:not(.has-webgl) .look-canvas::before { display: none; }
.look-3d { z-index: 1; position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.look.is-grabbing .look-3d { cursor: grabbing; }
.look-fallback { font: 900 min(50vh, 40vw)/1 var(--f-display); color: var(--silver); }
.look-rule { position: absolute; left: 0; right: 0; height: 1px; background: var(--lead); opacity: 0; transition: opacity .6s ease; }
.look.has-webgl .look-rule { opacity: 1; }
.look-rule.is-cap { top: var(--cap-y, 22%); }
.look-rule.is-base { top: var(--base-y, 78%); background: color-mix(in oklab, var(--molten) 62%, var(--black)); }
.look-rule i { position: absolute; right: max(var(--gutter), calc(50% - var(--max) / 2 + var(--gutter))); bottom: 6px; font: 500 .6875rem/1 var(--f-ui); font-style: normal; letter-spacing: .04em; color: var(--pewter); }
.look-rule.is-base i { bottom: auto; top: 7px; color: var(--molten); }
.look-spec { display: none; }
.look.has-webgl .look-spec { display: grid; gap: 10px; }
.look-spec div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-width: 13rem; padding-bottom: 8px; border-bottom: 1px solid var(--lead); }
.look-spec dt { font-size: .75rem; letter-spacing: .04em; color: var(--pewter); }
.look-spec dd { font-size: .8125rem; font-weight: 600; color: var(--silver); font-variant-numeric: tabular-nums; }
.look.has-webgl .look-fallback { display: none; }
.callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--cg); }
.callout { padding-top: 16px; border-top: 1px solid var(--lead); }
.callout h3 { font: 500 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.1 var(--f-display); color: var(--white); }
.callout p { margin-top: 8px; max-width: 34ch; font-size: .9375rem; line-height: 1.6; color: var(--pewter); }
.finish { display: none; }
.look.has-webgl .finish { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.finish-opts { display: flex; gap: 2px; padding: 4px 8px; border-radius: 999px; background: rgb(21 21 23 / .62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgb(245 242 235 / .1); }
.swatch { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.swatch::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .55), transparent 42%), var(--sw); box-shadow: inset 0 -3px 6px rgb(0 0 0 / .35); transition: scale .25s var(--ease-out); }
.swatch::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid transparent; transition: border-color .2s ease; }
.swatch:hover::before { scale: 1.08; }
.swatch:active::before { scale: .9; transition-duration: .1s; }
.swatch:has(input:checked)::after { border-color: var(--white); }
.swatch:has(input:focus-visible)::after { border-color: var(--molten); }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.finish-name { font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--silver); }

/* Con WebGL y movimiento: la escena se fija y el scroll la cuenta */
.look.is-scroll3d { height: 340vh; padding: 0; }
.look.is-scroll3d .look-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.look.is-scroll3d .look-in { position: static; display: block; height: 100%; }
.look.is-scroll3d .look-canvas { position: absolute; inset: 0; height: auto; }
.look.is-scroll3d .look-head, .look.is-scroll3d .callout { --edge: max(var(--gutter), calc(50% - var(--max) / 2 + var(--gutter))); }
.look.is-scroll3d .look-head { position: absolute; z-index: 2; top: calc(var(--head) + clamp(16px, 4vh, 44px)); left: var(--edge); pointer-events: none; }
.look.is-scroll3d .callouts { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
.look.is-scroll3d .callout {
  position: absolute; top: 52%; width: min(22rem, 30vw); padding: 0; border: 0;
  opacity: 0; translate: 0 calc(-50% + 22px); filter: blur(8px);
  transition: opacity .6s var(--ease-out), translate .9s var(--ease-out), filter .6s var(--ease-out);
}
.look.is-scroll3d .callout:nth-child(odd) { left: var(--edge); }
.look.is-scroll3d .callout:nth-child(even) { right: var(--edge); }
.look.is-scroll3d .callout h3 { font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); }
.look.is-scroll3d .callout p { font-size: 1.0625rem; color: var(--silver); }
.look[data-step="1"] .callout:nth-child(1), .look[data-step="2"] .callout:nth-child(2),
.look[data-step="3"] .callout:nth-child(3), .look[data-step="4"] .callout:nth-child(4),
.look[data-step="5"] .callout:nth-child(5) { opacity: 1; translate: 0 -50%; filter: blur(0); }
.look.is-scroll3d .finish { position: absolute; z-index: 3; left: 50%; bottom: clamp(20px, 5vh, 52px); translate: -50% 0; }
.look.is-scroll3d .look-spec { position: absolute; z-index: 2; left: max(var(--gutter), calc(50% - var(--max) / 2 + var(--gutter))); bottom: clamp(20px, 5vh, 52px); pointer-events: none; }
@media (max-width: 720px) {
  .look.is-scroll3d { height: 300vh; }
  .look.is-scroll3d .finish { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .look.is-scroll3d .callout { top: auto; bottom: calc(86px + env(safe-area-inset-bottom) + 92px); left: var(--gutter); right: var(--gutter); width: auto; translate: 0 18px; }
  .look.is-scroll3d .callout:nth-child(even) { left: var(--gutter); }
  .look[data-step="1"] .callout:nth-child(1), .look[data-step="2"] .callout:nth-child(2),
  .look[data-step="3"] .callout:nth-child(3), .look[data-step="4"] .callout:nth-child(4),
  .look[data-step="5"] .callout:nth-child(5) { translate: 0 0; }
  .look.is-scroll3d .look-spec { position: static; margin-top: 18px; }
  .look.has-webgl .look-spec { display: none; }
  .look-rule i { display: none; }
  .look-rule i { right: var(--gutter); }
  .look.is-scroll3d .callout h3 { font-size: 1.75rem; }
  .look.is-scroll3d .callout p { font-size: .9375rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar.is-set, .finish-opts { background: var(--black); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Movimiento: medir, fundir, pulir ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-showing]:not(.is-drawn) .m-line { transform: scaleX(0); }
  .js [data-showing]:not(.is-drawn) .m-label { opacity: 0; }
  .js .work-name { --p: 0%; clip-path: inset(calc(100% - var(--p)) -3% -35% -3%); }
  .js .is-drawn > .work-name { animation: pour 1.8s var(--ease-pour) .55s both, cool-white 3.2s cubic-bezier(.3, .6, .4, 1) .55s both; }
  .js .steps .n::after { --p: 0%; }
  .js .steps.is-in .n { animation: sort-turn 1.05s var(--ease-out) calc(var(--i, 0) * 170ms) both; }
  .js .steps.is-in .n::after { animation: pour 1.3s var(--ease-pour) calc(var(--i, 0) * 170ms + .1s) both, cool 2.8s cubic-bezier(.3, .6, .4, 1) calc(var(--i, 0) * 170ms + .1s) both; }
  .js .svc-list:not(.is-in) h3 { font-weight: 100; }
  .js .colo-mold.is-in .mold-fill { animation: pour 2.4s var(--ease-pour) both, mold-glow 3s ease both; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .colo-mold .mold-fill { animation: mold-pour linear both; animation-timeline: view(); animation-range: entry 5% entry 100%; }
  }
}
@keyframes sort-turn { from { rotate: y -100deg; } }
/* Profundidad ligada al scroll: láminas que se levantan de la mesa, teléfonos a distinta altura,
   títulos que se ponen de pie y el molde final que se endereza mientras se llena */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work > .wrap { perspective: 1800px; }
    .js .work-plate { transform-origin: 50% 100%; animation: plate-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .js .work-phones { perspective: 1200px; }
    .js .work-phones .plate:nth-child(1) { animation: phone-float-a linear both; animation-timeline: view(); animation-range: entry 25% cover 65%; }
    .js .work-phones .plate:nth-child(2) { animation: phone-float-b linear both; animation-timeline: view(); animation-range: entry 25% cover 65%; }
    .sec-head, .studio-grid, .faq-head, .contact-intro { perspective: 900px; }
    .js .sec-head h2, .js .studio h2, .js .faq-head h2, .js .contact-intro h2 { transform-origin: 50% 100%; animation: stand-up linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
    .colophon > .wrap:last-child { perspective: 1200px; }
    .js .colo-mold { transform-origin: 50% 100%; animation: mold-stand linear both; animation-timeline: view(); animation-range: entry 5% entry 100%; }
  }
}
@keyframes plate-rise { from { rotate: x 24deg; translate: 0 90px; scale: .93; } to { rotate: x 0deg; translate: 0 0; scale: 1; } }
@keyframes phone-float-a { from { translate: 0 70px; rotate: y 16deg; } to { translate: 0 -30px; rotate: y -6deg; } }
@keyframes phone-float-b { from { translate: 0 140px; rotate: y -16deg; } to { translate: 0 -10px; rotate: y 6deg; } }
@keyframes stand-up { from { rotate: x 80deg; opacity: 0; } to { rotate: x 0deg; opacity: 1; } }
@keyframes mold-stand { from { rotate: x 64deg; } to { rotate: x 0deg; } }
@keyframes cool-white {
  0% { color: var(--hot); text-shadow: 0 0 .07em rgb(255 170 70 / .55); }
  38% { color: var(--molten); text-shadow: 0 0 .05em rgb(233 162 59 / .3); }
  100% { color: var(--name-c, var(--white)); text-shadow: 0 0 0 rgb(233 162 59 / 0); }
}
@keyframes mold-pour { 0% { --p: 0%; color: var(--hot); } 100% { --p: 100%; color: var(--molten); } }
@keyframes mold-glow { from { color: var(--hot); } }


/* ---------- Pantalla inicial: la luz que presenta el logo ----------
   El logo no cambia: solo la luz que lo rodea. Aura viva, gradientes que
   giran y se tiñen despacio, un reflejo que cruza, y salida hacia la web. */
.splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(120% 95% at 50% 46%, #191309 0%, #100c07 46%, var(--black) 78%);
  animation: splash-bg .5s ease both, splash-auto .8s cubic-bezier(.16, 1, .3, 1) 3.4s forwards;
}
@keyframes splash-auto { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.splash[hidden] { display: none; }
html.is-splash { overflow: hidden; }
html.is-splash body { overflow: hidden; }
.splash-stage { position: relative; display: grid; place-items: center; width: min(86vw, 560px); aspect-ratio: 1; }
.aura { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; will-change: transform, opacity, filter; }

/* El núcleo: la chispa que aparece primero y luego respira */
.a-core {
  background: radial-gradient(circle at 50% 50%, rgb(255 251 243 / .1) 0%, rgb(255 243 220 / .16) 16%, rgb(255 216 154 / .34) 38%, rgb(233 162 59 / .26) 52%, rgb(185 118 42 / .1) 64%, transparent 78%);
  filter: blur(20px);
  animation: core-in .6s cubic-bezier(.16, 1, .3, 1) .08s both, core-breathe 3.6s ease-in-out 1.1s infinite alternate;
}
/* El anillo recorre todo el oro de la casa: bronce, oro fundido, oro caliente y blanco hueso */
.a-ring {
  background: conic-gradient(from 0deg, #b9762a, #e9a23b, #ffd89a, #fff6e4, #f5f2eb, #ffd89a, #e9a23b, #c4842f, #b9762a);
  filter: blur(38px) saturate(124%); mix-blend-mode: screen; opacity: 0;
  -webkit-mask-image: radial-gradient(circle, transparent 32%, rgb(0 0 0 / .3) 45%, #000 59%, #000 69%, transparent 82%);
  mask-image: radial-gradient(circle, transparent 32%, rgb(0 0 0 / .3) 45%, #000 59%, #000 69%, transparent 82%);
  animation: ring-in .9s cubic-bezier(.16, 1, .3, 1) .24s both, ring-spin 15s linear infinite;
}
/* Dos masas de color que se desplazan y cambian de tono, como energía alrededor */
.a-blob1 {
  --b: 58px;
  background: radial-gradient(circle at 30% 34%, rgb(255 190 104 / .34), rgb(233 162 59 / .12) 42%, transparent 60%);
  filter: blur(var(--b)); mix-blend-mode: screen; opacity: 0;
  animation: blob-in 1s ease .3s both, drift-a 12s ease-in-out 1s infinite alternate, hue-a 16s ease-in-out 1s infinite;
}
.a-blob2 {
  --b: 64px;
  background: radial-gradient(circle at 72% 68%, rgb(255 238 208 / .3), rgb(255 216 154 / .11) 44%, transparent 62%);
  filter: blur(var(--b)); mix-blend-mode: screen; opacity: 0;
  animation: blob-in 1.1s ease .42s both, drift-b 14s ease-in-out 1.1s infinite alternate, hue-b 21s ease-in-out 1.1s infinite;
}
/* El reflejo que cruza el logo, como luz sobre cristal */
.a-sweep {
  background: linear-gradient(104deg, transparent 40%, rgb(255 247 232 / .44) 50%, transparent 60%);
  filter: blur(12px); mix-blend-mode: overlay; border-radius: 0;
  animation: sweep 4.6s cubic-bezier(.45, 0, .25, 1) 1.15s infinite;
}

.splash-logo::before {
  content: ""; position: absolute; inset: -62% -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(64% 58% at 50% 50%, rgb(9 7 4 / .82), rgb(9 7 4 / .66) 40%, rgb(9 7 4 / .3) 68%, transparent 90%);
  filter: blur(28px);
}
.splash-logo {
  position: relative; z-index: 2; width: min(66vw, 350px);
  filter: drop-shadow(0 0 30px rgb(255 214 160 / .4));
  animation: logo-in .74s cubic-bezier(.16, 1, .3, 1) .5s both;
}
.splash-logo svg { width: 100%; height: auto; }

@keyframes splash-bg { from { opacity: 0; } }
@keyframes core-in { from { opacity: 0; scale: .12; } to { opacity: 1; scale: 1; } }
@keyframes core-breathe { from { scale: 1; opacity: .92; } to { scale: 1.08; opacity: 1; } }
@keyframes ring-in { from { opacity: 0; scale: .5; } to { opacity: .46; scale: 1; } }
@keyframes ring-spin { to { rotate: 360deg; } }
@keyframes blob-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift-a { from { translate: -6% -4%; scale: .92; } to { translate: 7% 5%; scale: 1.1; } }
@keyframes drift-b { from { translate: 6% 5%; scale: 1.08; } to { translate: -7% -6%; scale: .94; } }
@keyframes hue-a {
  from, to { filter: blur(var(--b)) hue-rotate(-13deg) saturate(112%); }
  50% { filter: blur(var(--b)) hue-rotate(11deg) saturate(94%); }
}
@keyframes hue-b {
  from, to { filter: blur(var(--b)) hue-rotate(9deg) saturate(104%); }
  50% { filter: blur(var(--b)) hue-rotate(-10deg) saturate(118%); }
}
@keyframes sweep { 0% { translate: -130% 0; } 24%, 100% { translate: 130% 0; } }
@keyframes logo-in {
  from { opacity: 0; scale: .94; filter: blur(16px) drop-shadow(0 0 30px rgb(255 214 160 / .4)); }
  to { opacity: 1; scale: 1; filter: blur(0) drop-shadow(0 0 30px rgb(255 214 160 / .4)); }
}

/* Salida: la luz se abre, el logo se disuelve y aparece la web */
.splash.is-out { animation: splash-out .72s cubic-bezier(.16, 1, .3, 1) forwards; pointer-events: none; }
.splash.is-out .splash-stage { animation: stage-out .72s cubic-bezier(.16, 1, .3, 1) forwards; }
.splash.is-out .splash-logo { animation: logo-out .66s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes splash-out { to { opacity: 0; } }
@keyframes stage-out { to { scale: 1.18; opacity: 0; } }
@keyframes logo-out { to { scale: 1.06; opacity: 0; filter: blur(8px) drop-shadow(0 0 30px rgb(255 214 160 / 0)); } }

@media (max-width: 720px) {
  .splash-stage { width: min(96vw, 420px); }
  .splash-logo { width: min(74vw, 300px); }
  .a-ring { filter: blur(30px) saturate(124%); }
  .a-blob1 { --b: 44px; }
  .a-blob2 { --b: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash, .a-core, .a-ring, .a-blob1, .a-blob2, .splash-logo { animation: none; }
  .a-sweep { display: none; }
  .a-ring { opacity: .4; }
  .a-blob1, .a-blob2 { opacity: 1; }
  .splash.is-out { animation: splash-out .4s ease forwards; }
  .splash.is-out .splash-stage, .splash.is-out .splash-logo { animation: none; }
}

/* Mientras la pantalla inicial está puesta, la portada espera su turno */
html.is-splash .cw-fill, html.is-splash .cw-meniscus, html.is-splash .cw-sheen,
html.is-splash .cast-grid h1, html.is-splash .cast-side { animation-play-state: paused; }


/* ---------- Paso entre páginas: un fundido corto en vez de un salto ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Menú del teléfono: entra como un material, no como una lista ---------- */
.menu { background: rgb(10 10 11 / .82); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); }
.menu ol a { transform-origin: 0% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) ol li { animation: menu-item .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
  .menu:not([hidden]) .menu-foot { animation: menu-item .5s cubic-bezier(.16, 1, .3, 1) .42s both; }
}
@keyframes menu-item { from { opacity: 0; translate: 0 16px; filter: blur(6px); } }
@media (prefers-reduced-transparency: reduce) { .menu { background: var(--black); backdrop-filter: none; } }

/* ---------- Notas de cada obra: se componen una tras otra al llegar ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .work-note { animation: note-in linear both; animation-timeline: view(); animation-range: entry 8% entry 62%; }
  }
}
@keyframes note-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Formulario: el campo enfocado se enciende, y las fichas responden al toque ---------- */
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgb(233 162 59 / .16); }
.chip-in:active { scale: .97; }
.swatch:active::before { scale: .88; }
.copy-btn:active, .pan-btn:active { scale: .96; }
.field input, .field textarea, .chip-in, .swatch::before, .copy-btn, .pan-btn { transition-property: border-color, background-color, color, box-shadow, scale; transition-duration: .2s; transition-timing-function: var(--ease-out); }

/* ---------- Página no encontrada ---------- */
.perdido { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 18px; padding-block: var(--band); }
.perdido-marca { width: min(300px, 70vw); }
.perdido .flor-rule { width: min(420px, 100%); margin-block: 10px 6px; }
.perdido h1 { max-width: 16ch; }
.perdido .lede { max-width: 48ch; }
.perdido .actions { margin-top: 14px; }

/* ---------- Adaptación ---------- */
@media (max-width: 1100px) {
  .clock { display: none; }
  .cast-grid h1, .cast-side, .sec-head h2, .sec-head .note, .work-meta, .work-stand, .work-notes, .work-phones,
  .contact-intro, .brief, .studio h2, .studio-body, .faq-head, .faq-list { grid-column: 1 / -1; }
  .cast-side { max-width: 640px; }
  .faq-head { position: static; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .colo-brand { grid-column: 1 / -1; }
  .colo-col, .colo-col:nth-child(n) { grid-column: span 4; }
  .legal-nav { grid-column: 1 / -1; position: static; }
  .legal-body { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bar-nav, .bar-wa { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 720px) {
  :root { --head: 58px; --band: clamp(68px, 16vw, 92px); }
  .m-label { display: none; }
  .style { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 14px; }
  .style .lockup { grid-column: 1 / -1; grid-row: 2; }
  .style .pick { grid-column: 2; grid-row: 1; }
  /* El teléfono tiene que seguir pareciendo un teléfono: si la lámina ocupa todo
     el ancho, su contenido sale más grande que el de la página que lo enseña. */
  .work-phones { grid-template-columns: 1fr; max-width: none; row-gap: 40px; }
  .work-phones .plate .canvas-phone { width: min(100%, 264px); margin-inline: auto; }
  .work-phones .plate:has(.canvas-phone)::before { width: 264px; left: 50%; }
  .work-phones .plate:has(.canvas-phone) .plate-cap { max-width: 34ch; }
  /* Las láminas de escritorio ganan los márgenes: a este tamaño cada píxel cuenta */
  .work-plate .canvas, .work-phones .plate .canvas:not(.canvas-phone) {
    width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1);
    border-inline: 0; border-radius: 0;
  }
  .work-plate::after { width: 120px; }
  /* Menos aire muerto entre bloques */
  .work-plate { margin-top: 48px; }
  .work-body { margin-top: 42px; row-gap: 38px; }
  .work-quote { margin-top: 52px; }
  .work-spec { margin-top: 44px; row-gap: 16px; }
  .work-top { margin-top: 30px; }
  .sec-head { margin-bottom: 34px; }
  .svc { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .colo-col, .colo-col:nth-child(n) { grid-column: 1 / -1; }
  .contact-bar { display: flex; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.legal-page { padding-bottom: 0; }
}
@media (max-width: 560px) {
  .legal-page .brand .word { display: none; }
}
@media (max-width: 480px) {
  .glyphs { font-size: 2rem; }
}
@media (max-width: 640px) {
  .legal-table { min-width: 0; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table, .legal-table tbody, .legal-table tr { display: block; }
  .legal-table tr { padding-block: 14px; border-bottom: 1px solid var(--lead); }
  .legal-table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 4px 0; border: 0; }
  .legal-table td::before { content: attr(data-label); font: 600 .625rem/1.9 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--pewter); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .plate .canvas::before { opacity: 0; animation: none; }
  .js .plate::before { opacity: 1; animation: none; }
  .exhibit { transition: none; }
  .lk-name .h, .lockup.is-struck, .steps.is-in .n { animation: none; }
  .btn-ink, .svc:hover .svc-name { transform: none; }
  .plate .canvas { transform: none; }
  .colo-mold .mold-fill { display: none; }
  .nav-ink { transition: none; }
  .consent { transition: none; }
  .q::details-content { transition: none; }
}
@media (prefers-contrast: more) {
  :root { --pewter: #bdb9b2; --lead: #55555b; --lead-2: #7a7a80; }
}