*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  min-height: 100dvh;
  background-color: var(--niebla);
  color: var(--vino-hondo);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: var(--pie-alto);
}
.papel-calor,
.papel-grano,
.papel-aureolas {
  position: fixed;
  inset: -6%;
  pointer-events: none;
  z-index: 0;
}
.papel-calor {
  background:
    radial-gradient(130% 78% at 50% 108%, var(--calor-tono) 0%, transparent 68%),
    radial-gradient(90% 55% at 12% 92%, color-mix(in srgb, var(--rubor) 46%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, transparent 18%, var(--calor-tono) 100%);
  opacity: calc(.12 + var(--calor) * .5);
  will-change: opacity;
  transform: translateZ(0);
}
.papel-aureolas { overflow: hidden; }
.papel-aureolas i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.papel-aureolas i:nth-child(1) {
  width: 78vmax; height: 78vmax; left: -26vmax; top: -22vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--rubor) 34%, transparent) 0%, transparent 68%);
  animation: derivaA 52s ease-in-out infinite;
}
.papel-aureolas i:nth-child(2) {
  width: 66vmax; height: 66vmax; right: -24vmax; top: 26%;
  background: radial-gradient(circle, color-mix(in srgb, var(--calor-tono) 48%, transparent) 0%, transparent 66%);
  animation: derivaB 61s ease-in-out infinite;
}
.papel-aureolas i:nth-child(3) {
  width: 88vmax; height: 88vmax; left: 8%; bottom: -34vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--rubor) 30%, transparent) 0%, transparent 70%);
  animation: derivaC 47s ease-in-out infinite;
}
@keyframes derivaA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(11vmax, 8vmax, 0); }
  66%      { transform: translate3d(-7vmax, 13vmax, 0); }
}
@keyframes derivaB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40%      { transform: translate3d(-13vmax, -9vmax, 0); }
  70%      { transform: translate3d(-5vmax, 11vmax, 0); }
}
@keyframes derivaC {
  0%, 100% { transform: translate3d(0, 0, 0); }
  45%      { transform: translate3d(10vmax, -12vmax, 0); }
  75%      { transform: translate3d(-11vmax, -4vmax, 0); }
}
.papel-grano {
  opacity: .30;
  mix-blend-mode: multiply;
  overflow: hidden;
}
.papel-grano::before {
  content: '';
  position: absolute;
  inset: -40px;
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: granoCorre 1s steps(8, end) infinite;
}
@media (min-width: 900px) {
  .papel-grano::before { animation-duration: 2s; }
}
@keyframes granoCorre {
  0%   { transform: translate3d(  0px,   0px, 0); }
  12.5%{ transform: translate3d(-17px,   9px, 0); }
  25%  { transform: translate3d( 11px, -21px, 0); }
  37.5%{ transform: translate3d(-23px, -13px, 0); }
  50%  { transform: translate3d( 19px,  17px, 0); }
  62.5%{ transform: translate3d( -9px,  23px, 0); }
  75%  { transform: translate3d( 25px,  -7px, 0); }
  87.5%{ transform: translate3d(-15px, -25px, 0); }
  100% { transform: translate3d(  0px,   0px, 0); }
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-medio); font-family: var(--texto); font-weight: 600; letter-spacing: 0; line-height: 1.25; }
p { max-width: var(--medida); }
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .25em; }
.rotulo {
  font-family: var(--texto);
  font-size: var(--t-folio);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--vino);
}
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js .solo-sin-js { display: none; }
[hidden] { display: none !important; }
.saltar {
  position: absolute; left: .6rem; top: -100px; z-index: 90;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .6rem .9rem;
  background: var(--vino); color: var(--papel-claro);
  border-radius: var(--radio); font-size: var(--t-menor);
  transition: top .2s var(--e-neutra);
}
.saltar:focus-visible { top: .6rem; }
.filete {
  border: 0;
  height: var(--filete);
  background: currentColor;
  opacity: .28;
}

img { display: block; max-width: 100%; height: auto; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: 0; cursor: pointer; }
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vino);
  outline-offset: 3px;
  border-radius: var(--radio);
}
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7em 1.35em;
  background: var(--vino);
  color: var(--papel-claro);
  border-radius: var(--radio);
  font-size: var(--t-menor);
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--d-corta) var(--e-neutra),
              transform .16s var(--e-neutra);
}
.boton:hover  { background: var(--vino-hondo); }
.boton:active { transform: translateY(1px); background: var(--vino-hondo); }
.boton--linea {
  background: none;
  color: var(--vino);
  box-shadow: inset 0 0 0 var(--filete) var(--vino);
}
.boton--linea:hover { background: var(--vino); color: var(--papel-claro); }
.campo {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .7em .85em;
  background: color-mix(in srgb, var(--papel-claro) 70%, transparent);
  border: var(--filete) solid color-mix(in srgb, var(--vino) 34%, transparent);
  border-radius: var(--radio);
  font-size: var(--t-base);
}
.campo::placeholder { color: color-mix(in srgb, var(--vino-hondo) 65%, transparent); }
.campo:focus { border-color: var(--vino); }
textarea.campo { min-height: 96px; resize: vertical; line-height: 1.5; }
label { display: block; }