* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #111; background: #fdfdfd; font-family: Arial, sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
.hero { min-height: 100svh; position: relative; overflow: hidden; font-size: clamp(1rem, 1.48vw, 1.6rem); }
.brand { position: fixed; z-index: 2; pointer-events: none; mix-blend-mode: difference; top: calc(var(--brand-top) + (2.75rem - var(--brand-top)) * var(--brand-progress, 0)); left: 50%; transform: translate(-50%, -50%); width: calc(var(--brand-width) + (clamp(7rem, 14vw, 12rem) - var(--brand-width)) * var(--brand-progress, 0)); margin: 0; --brand-top: 45svh; --brand-width: 46vw; }
.brand img { display: block; width: 100%; filter: invert(1); }
.hero.playing .brand { mix-blend-mode: normal; }
.reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .45s, transform .8s cubic-bezier(.2,.7,.2,1); background: #151515; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #0007; opacity: 0; transition: opacity .45s; pointer-events: none; }
.hero.playing { color: white; }
.hero.playing .reel, .hero.playing::before { opacity: 1; transform: none; }
.reel-nav { position: absolute; z-index: 1; inset: 50% 3.75% auto; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.reel-nav button, .contact-trigger, .close { background: none; border: 0; cursor: pointer; padding: .5rem; }
.reel-nav button { pointer-events: auto; text-transform: uppercase; }
.reel-nav button[aria-pressed=true], .reel-nav button:hover, .contact-trigger:hover, .about-link:hover { text-decoration: underline; text-underline-offset: .23em; }
.contact-trigger, .about-link { position: absolute; z-index: 1; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.contact-trigger { top: 63%; font-style: italic; --exit: var(--contact-exit, 0); }
.about-link { top: min(87%, calc(100% - var(--felt-corner) * .45 - 2.25rem)); --exit: var(--about-exit, 0); padding: .5rem; text-decoration: none; }
.about { position: relative; min-height: 100svh; display: grid; align-content: center; justify-items: start; padding: clamp(2rem, 8vw, 8rem); background: #141414; color: white; padding-bottom: max(5rem, 8vw); }
.about h2 { font-size: clamp(3rem, 11vw, 10rem); letter-spacing: -.07em; margin: 0; }
.about p { font-size: clamp(1.2rem, 2.5vw, 2.2rem); max-width: 28ch; margin-bottom: 2em; }
.hero:has(dialog[open]) .brand { visibility: hidden; }
.contact-brand { display: block; transform-origin: top left; width: min(56%, 14rem); height: auto; margin: 0 auto 1.25rem; }
dialog { width: min(92vw, 42rem); max-height: 78svh; margin: auto; inset-block-start: 10svh; padding: clamp(1rem, 4vw, 2rem); border: 1px solid #ddd; background: #fdfdfd; color: #111; font-size: 1rem; }
dialog::backdrop { background: #fdfdfdbf; }
dialog:has(#review:not([hidden]))::backdrop { background: #000b; }
.contact-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
dialog #contact-title:focus { outline: none; }
.contact-header h2 { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); }
.close { font-size: 1.75rem; line-height: 1; }
form, label, .contact-details { display: grid; gap: .65rem; }
label { gap: .3rem; display: block; }
input, textarea { display: block; width: 100%; margin-top: .25rem; padding: .55rem; color: inherit; background: white; border: 1px solid #777; border-radius: 0; }
textarea { resize: vertical; }
.contact-details { grid-template-columns: 1fr 1fr; }
.action { display: inline-block; justify-self: start; background: #111; color: white; border: 1px solid #111; padding: .65rem .9rem; text-decoration: none; cursor: pointer; }
.action:focus-visible { outline-color: #111; }
dt { font-weight: bold; }
dd { margin: .25rem 0 .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 650px) {
  .brand { --brand-top: 38svh; --brand-width: 80vw; }
  .contact-trigger { top: 51%; }
  .reel-nav { inset: 66% 12% auto; }
  .contact-details { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before { transition: none !important; }
}

.about-email { position: absolute; right: clamp(1.25rem, 5vw, 4rem); bottom: clamp(1.25rem, 4vw, 3rem); }

/* Let the words slide behind a fixed edge as they leave. */
.contact-trigger, .about-link {
  transform: translate(-50%, calc(-50% - 1.25em * var(--exit)));
  opacity: calc((1 - var(--exit)) * (1 - var(--exit)));
  --curtain-edge: calc((100% + 16px) * var(--exit) - 8px);
  mask-image: linear-gradient(to bottom,
    transparent var(--curtain-edge),
    black calc(var(--curtain-edge) + 8px));
}
.contact-trigger:focus-visible, .about-link:focus-visible {
  outline-offset: -2px;
}
.contact-trigger[inert], .about-link[inert] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .contact-trigger, .about-link {
    transform: translate(-50%, -50%);
    mask-image: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open] {
    animation: contact-panel .48s cubic-bezier(.2, .75, .24, 1);
  }
  dialog.logo-in-flight { overflow: visible; }
  dialog[open] .contact-header,
  dialog[open] form {
    animation: contact-enter .36s cubic-bezier(.22, .72, .22, 1) .08s both;
  }
  dialog[open]::backdrop {
    animation: contact-backdrop .4s ease-out;
    transition: background-color .25s ease;
  }
  #review:not([hidden]) {
    animation: contact-enter .25s ease-out both;
  }
}
@keyframes contact-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes contact-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes contact-panel {
  from { background-color: transparent; border-color: transparent; }
}

.brand a { display: block; pointer-events: auto; }
.contact-home { display: block; width: min(56%, 14rem); margin: 0 auto 1.25rem; }
.contact-home .contact-brand { width: 100%; margin: 0; }
.reel-nav a { pointer-events: auto; padding: .5rem; text-transform: uppercase; text-decoration: none; }
.reel-nav a:hover, .reel-nav a.reel-active { text-decoration: underline; text-underline-offset: .23em; }

/* Tapete de la portada */
.hero {
  color: #111;
  background:
    url("assets/tapete.svg"),
    radial-gradient(ellipse at 50% 42%, #fff 0%, #fafafa 60%, #f3f3f3 100%);
}

.hero {
  --felt-frame-inset: clamp(12px, 2.2vw, 37px);
  --felt-window-inset: calc(var(--felt-frame-inset) + 5.2px);
  --felt-corner: clamp(2.2525rem, 6.8vw, 8.16rem);
}
.felt-ornate .hero::after {
  inset: clamp(.65rem, 2.3vw, 2.25rem);
  border-image: none;
  filter: none;
  background: url("assets/marco-ornamental.svg") center / 100% 100% no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: var(--felt-frame-inset);
  pointer-events: none;
  border: 5.2px double #171717;
  border-radius: clamp(.35rem, .75vw, .65rem);
  --felt-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23171717' d='M5 0 10 5 5 10 0 5Z'/%3E%3C/svg%3E");
  background:
    var(--felt-diamond) 12px 12px / 10px 10px no-repeat,
    var(--felt-diamond) 12px calc(100% - 12px) / 10px 10px no-repeat,
    var(--felt-diamond) calc(100% - 12px) 12px / 10px 10px no-repeat,
    var(--felt-diamond) calc(100% - 12px) calc(100% - 12px) / 10px 10px no-repeat;
  background-origin: border-box;
  box-shadow: inset 0 0 0 1px #0002;
  transition: opacity .45s;
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { transition: none; }
}

/* Open the four sides of the frame without covering the felt. */
.hero::after {
  mask-image:
    linear-gradient(to right, #000 42%, transparent 42% 58%, #000 58%),
    linear-gradient(to bottom, #000 42%, transparent 42% 58%, #000 58%);
  mask-composite: intersect;
}

.hero .reel, .hero::before {
  inset: var(--felt-window-inset);
  border-radius: clamp(.2rem, .5vw, .45rem);
}
.hero .reel {
  width: calc(100% - 2 * var(--felt-window-inset));
  height: calc(100% - 2 * var(--felt-window-inset));
  transform: none;
}

/* A quiet card-back pattern behind Conócenos. */
.about { isolation: isolate; }
.about::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(.75rem, 2.2vw, 2.25rem);
  border: 3px double #ddd4c0;
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at center, #141414 20%, transparent 92%),
    repeating-linear-gradient(45deg, #ddd4c0 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, #ddd4c0 0 1px, transparent 1px 15px);
  opacity: .075;
  pointer-events: none;
}