@font-face {
  font-family: "Instrument Sans";
  src: url("/fuentes/InstrumentSans-v3.woff2") format("woff2");
  font-weight: 400 600;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --negro: #000;
  --blanco: #fff;
  --fondo: #e8e8e4;
  --gris: #55554f;
  --borde: #d4d4cf;
  --acento: #ff4a1c; 
  --acento-rgb: 255 74 28; 
  --texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pagina: min(100% - 2rem, 78rem);
  --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 12px 32px rgb(0 0 0 / .08);
  --sombra-fuerte: 0 2px 6px rgb(0 0 0 / .08), 0 30px 70px rgb(0 0 0 / .16);
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--negro);
  font: 400 1.0625rem/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; }
::selection { background: var(--negro); color: var(--blanco); }
:focus { outline: 2px solid transparent; }
:focus-visible { outline: 2px solid var(--negro); outline-offset: 3px; }
.tipos :focus-visible, .final :focus-visible, .vitrina :focus-visible { outline-color: var(--blanco); }
p, li { text-wrap: pretty; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: 0 1.25rem;
  border: 0; border-radius: 999px;
  background: var(--acento); color: var(--negro);
  font: 600 1rem/1 var(--texto); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
@media (hover: hover) { .boton:hover { background: var(--negro); color: var(--blanco); } }
.boton:active { background: var(--negro); color: var(--blanco); }
.boton-chico { min-height: 2.75rem; padding: 0 1.1rem; font-size: .9375rem; }
.boton-contorno { background: transparent; box-shadow: inset 0 0 0 1.5px var(--negro); }
.boton-grande { min-height: 3.5rem; padding: 0 2rem; font-size: 1.125rem; }


.cabecera {
  width: var(--pagina); margin: 0 auto; padding-block: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo { display: block; width: 164px; height: auto; }
.cabecera .boton { display: none; }
@media (min-width: 40rem) { .cabecera .boton { display: inline-flex; } }
@media (min-width: 64rem) { .logo { width: 176px; } }

.barra-fija {
  position: fixed; inset: 0 0 auto; z-index: 20;
  background: rgb(232 232 228 / .88);
  -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px);
  box-shadow: 0 1px 0 rgb(0 0 0 / .06);
  transform: translateY(-110%);
  transition: transform .35s var(--curva);
}
.barra-fija.visible { transform: none; }
.barra-fija-adentro {
  width: var(--pagina); margin: 0 auto; height: 3.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo-chico { display: none; width: 160px; height: auto; }
.barra-fija .boton { flex: 1; }
@media (min-width: 40rem) { .logo-chico { display: block; } .barra-fija .boton { flex: none; } }


.hero {
  width: var(--pagina); margin: 0 auto; padding-block: .5rem 3rem;
  display: grid; gap: 2rem;
}
@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
    padding-block: 1rem 4rem;
  }
  .hero-texto { padding-top: 1.5rem; }
}
@media (min-width: 80rem) { .hero { align-items: center; } .hero-texto { padding-top: 0; } }


.vidriera { overflow: hidden; padding-block: .5rem 1rem; }
.vidriera-pista { display: flex; gap: 1rem; width: max-content; margin: 0; padding: 0 1rem; list-style: none; }
.producto {
  position: relative; flex: none; width: clamp(11rem, 9rem + 8vw, 15rem); aspect-ratio: 1;
  overflow: hidden; border-radius: 24px; background: var(--blanco);
}
.producto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.producto-chip {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: 14px;
  background: rgb(255 255 255 / .94); box-shadow: 0 6px 20px rgb(0 0 0 / .12);
  font-size: .8125rem; line-height: 1.25;
}
.producto-chip b { font-weight: 600; }
.producto:nth-child(3n + 2) .producto-chip { background: var(--acento); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vidriera-pista { animation: deslizar linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes deslizar { from { translate: 0 0; } to { translate: -35% 0; } }
.etiqueta {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0;
  color: var(--gris); font: 600 .9375rem/1.2 var(--texto);
}
.punto {
  flex: none; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 4px rgb(var(--acento-rgb) / .2);
}
.titular {
  margin: .875rem 0 1.75rem;
  font-weight: 600; font-size: clamp(2.75rem, 1.4rem + 5.2vw, 5.5rem);
  line-height: .96; letter-spacing: -.045em; text-wrap: balance;
}


.alta-caja {
  position: relative; display: grid; max-width: 36rem;
  padding: 1.25rem; border-radius: 24px;
  background: var(--blanco); box-shadow: var(--sombra);
}
@media (min-width: 40rem) { .alta-caja { padding: 1.5rem; } }

.alta, .listo { grid-area: 1 / 1; }
.listo { visibility: hidden; align-self: center; }
.ancla { position: absolute; top: 0; scroll-margin-top: 6rem; }
#listo:target ~ .alta, .alta-caja[data-estado="listo"] .alta { visibility: hidden; }
#listo:target ~ .listo, .alta-caja[data-estado="listo"] .listo { visibility: visible; }

.apoyo { margin: 0 0 1rem; font: 600 1.125rem/1.3 var(--texto); letter-spacing: -.01em; }
.campos { display: grid; gap: .875rem; }
@media (min-width: 40rem) { .campos { grid-template-columns: 1.25fr 1fr; } }
.campo label { display: block; margin-bottom: .375rem; font: 600 .9375rem/1.3 var(--texto); }
.opcional { color: var(--gris); font-weight: 400; }
input {
  width: 100%; height: 3.25rem; padding: 0 .875rem;
  border: 1px solid var(--gris); border-radius: 12px;
  background: var(--blanco); color: var(--negro); caret-color: var(--negro);
  font: 400 1rem/1 var(--texto);
}
input::placeholder { color: var(--gris); opacity: 1; }
input:focus-visible { outline: 2px solid var(--negro); outline-offset: 1px; border-color: var(--negro); }
input[aria-invalid="true"] { border: 2px solid var(--negro); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--blanco) inset; -webkit-text-fill-color: var(--negro); }
.error { margin: .45rem 0 0; font: 600 .875rem/1.35 var(--texto); }
.error:empty { display: none; }
.error::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem;
  border-radius: 50%; background: var(--acento); vertical-align: .05em;
}
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.boton-alta { width: 100%; margin-top: 1rem; min-height: 3.375rem; border-radius: 14px; font-size: 1.0625rem; }
.boton-alta[aria-disabled="true"] { cursor: progress; }
.girando {
  display: none; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
}
.alta-caja[data-estado="enviando"] .girando { display: inline-block; }
.estado-envio { margin: .75rem 0 0; font: 600 .9375rem/1.35 var(--texto); }
.estado-envio:empty { display: none; }
.estado-envio.solo-lector { position: absolute; }
.aviso-envio { display: none; }
#error-envio:target ~ .alta .aviso-envio { display: block; }
.consentimiento { margin: .875rem 0 0; color: var(--gris); font-size: .875rem; line-height: 1.45; }
.consentimiento a, .pie a { color: var(--negro); text-underline-offset: 2px; }
.consentimiento a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; }

.listo-marca {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem;
  border-radius: 16px; background: var(--acento);
}
.listo-titulo { margin: 0; font: 600 clamp(1.5rem, 1.2rem + 1vw, 1.875rem)/1.1 var(--texto); letter-spacing: -.025em; }
.listo-titulo:focus { outline: none; }
.listo-texto { margin: .5rem 0 0; color: var(--gris); }


.vitrina {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: 40rem; padding: 2.5rem 1rem 3.75rem;
  border-radius: 28px; background: var(--negro); color: var(--blanco);
}
.vitrina::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%;
  width: 38rem; height: 38rem; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(var(--acento-rgb) / .5), rgb(var(--acento-rgb) / .12) 55%, rgb(var(--acento-rgb) / 0));
}
.demo { position: relative; width: 100%; display: grid; justify-items: center; gap: 1.5rem; }

.telefono {
  position: relative; width: 17.5rem; height: 36.25rem; padding: .5rem;
  border-radius: 2.75rem; background: var(--negro);
  box-shadow: 0 0 0 1.5px var(--gris), 0 0 0 6px rgb(255 255 255 / .05), 0 40px 80px rgb(0 0 0 / .45);
}
.pantalla {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 2.25rem; background: var(--blanco); color: var(--negro);
  font-size: .75rem; line-height: 1.35;
}
.pantalla p { margin: 0; }
.navegador {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  height: 1.9rem; margin: .65rem .9rem 0; border-radius: 999px;
  background: var(--fondo); color: var(--gris); font-size: .6875rem;
}
.candado { position: relative; display: inline-block; width: .55rem; height: .45rem; margin-top: .2rem; border-radius: .1rem; background: currentColor; }
.candado::before {
  content: ""; position: absolute; left: 50%; bottom: 80%; width: .36rem; height: .34rem; translate: -50% 0;
  border: 1.5px solid currentColor; border-bottom: 0; border-radius: .25rem .25rem 0 0;
}

.pagina {
  position: absolute; inset: 2.75rem 0 0; display: grid; align-content: start;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.pantalla[data-pagina="gracias"] .pagina-gracias,
.pantalla[data-pagina="cargando"] .pagina-cargando,
.pantalla[data-pagina="pago"] .pagina-pago,
.pantalla[data-pagina="pedido"] .pagina-pedido { opacity: 1; visibility: visible; transition: opacity .3s; }
.pantalla.fundido .pagina { opacity: 0; }
.al-toque, .al-toque * { transition: none !important; }

.tienda { padding: .5rem .9rem; border-bottom: 1px solid var(--borde); font-weight: 600; font-size: .8125rem; letter-spacing: -.01em; }
.resumen {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-bottom: 1px solid var(--borde); background: rgb(232 232 228 / .45); font-size: .6875rem;
}
.resumen b { font-size: .75rem; font-variant-numeric: tabular-nums; }
.flecha {
  display: inline-block; width: .34rem; height: .34rem; margin: 0 .15rem .15rem .4rem; vertical-align: middle;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg;
}
.hoja { display: grid; gap: .6rem; padding: .75rem .9rem 1rem; }
.caja-pagina { display: grid; gap: .15rem; padding: .6rem .7rem; border: 1px solid var(--borde); border-radius: .75rem; }
.caja-pagina > b { font-weight: 600; font-size: .75rem; }
.caja-pagina > small { color: var(--gris); font-size: .625rem; }


.gracias { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55rem; }
.gracias small { display: block; color: var(--gris); font-size: .625rem; }
.gracias b { display: block; font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.tilde { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--negro); }
.tilde::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: .36rem; height: .66rem; translate: -50% -50%; rotate: 45deg;
  border: solid var(--negro); border-width: 0 1.5px 1.5px 0;
}

.oferta-envuelve { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--curva), opacity .45s .15s, margin .6s var(--curva); }
.oferta-recorte { min-height: 0; overflow: hidden; }
.oferta-envuelve.cerrada { grid-template-rows: 0fr; opacity: 0; margin-block: -.3rem; }
.oferta { display: grid; gap: .42rem; padding: .65rem; border: 1px solid var(--borde); border-radius: .75rem; }
.oferta-titulo { font-weight: 600; font-size: .78rem; }
.oferta-producto { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .7rem; }
.oferta-producto img { width: 2rem; height: 2rem; border-radius: .4rem; object-fit: cover; }
.barra {
  display: grid; grid-template-columns: .85rem 1fr auto; align-items: center; gap: .45rem;
  padding: .4rem .55rem; border: 1px solid var(--borde); border-radius: .55rem; transition: opacity .3s;
}
.radio { width: .8rem; height: .8rem; border-radius: 50%; border: 1.5px solid var(--gris); }
.barra.elegida { border-color: var(--negro); background: rgb(232 232 228 / .55); box-shadow: inset 0 0 0 1px var(--negro); }
.barra.elegida .radio { border-color: var(--negro); background: var(--negro); box-shadow: inset 0 0 0 2.5px var(--blanco); }
.barra-texto b { display: block; font-weight: 600; font-size: .68rem; }
.barra-texto small { color: var(--gris); font-size: .6rem; }
.barra-texto i, .t-barra i {
  font-style: normal; font-weight: 600; font-size: .58rem; white-space: nowrap;
  margin-left: .2rem; padding: .08rem .3rem; border-radius: .3rem; background: var(--fondo); color: var(--negro);
}
.barra-precio { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.barra-precio b { font-size: .68rem; font-weight: 600; }
.barra-precio s, .t-precio s { color: var(--gris); font-size: .6rem; }
.oferta-nota { color: var(--gris); font-size: .62rem; line-height: 1.4; }
.oferta-boton, .pagar-ahora {
  display: grid; place-items: center; min-height: 2rem; padding: 0 .75rem;
  border-radius: .5rem; background: var(--negro); color: var(--blanco);
  font-weight: 600; font-size: .68rem; white-space: nowrap; transition: scale .15s, opacity .2s;
}
.oferta-boton { justify-self: start; }

.oferta.bloqueada .barra { opacity: .45; }
.cargando { opacity: .75; }
.apretado { scale: .95; opacity: .8; }


.pagina-cargando { place-items: center; align-content: center; }
.ruedita { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--negro); border-right-color: transparent; }


.aviso-pago { display: flex; align-items: center; gap: .45rem; padding: .55rem .65rem; border: 1px solid var(--borde); border-radius: .6rem; font-weight: 600; font-size: .66rem; }
.aviso-pago .flecha { margin-left: auto; }
.info { position: relative; flex: none; width: .8rem; height: .8rem; border: 1.3px solid currentColor; border-radius: 50%; }
.info::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1.3px; height: .3rem; translate: -50% -25%;
  background: currentColor; box-shadow: 0 -.14rem 0 currentColor;
}
.filas-envio { gap: 0; padding: 0; }
.filas-envio p { display: grid; grid-template-columns: 3.4rem 1fr; align-items: center; gap: .4rem; padding: .5rem .65rem; font-size: .63rem; }
.filas-envio p + p { border-top: 1px solid var(--borde); }
.filas-envio span { color: var(--gris); }
.filas-envio b { font-weight: 600; }

.dato { display: block; height: .4rem; width: 82%; border-radius: .2rem; background: var(--borde); }
.pago-cabeza { display: grid; gap: .1rem; margin-top: .15rem; }
.pago-titulo { font-weight: 600; font-size: .875rem; letter-spacing: -.01em; }
.pago-seguro { color: var(--gris); font-size: .6rem; }
.medio { display: grid; gap: .35rem; padding: .55rem .6rem .6rem; border: 1.5px solid var(--negro); border-radius: .6rem; }
.pantalla .medio-titulo { margin-bottom: .1rem; font-weight: 600; font-size: .68rem; }
.medio-par { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }

.campo-falso { position: relative; display: block; height: 1.65rem; border: 1px solid var(--borde); border-radius: .4rem; }
.campo-falso::before {
  content: ""; position: absolute; left: .55rem; top: 50%; width: 38%; height: .3rem; translate: 0 -50%;
  border-radius: .2rem; background: var(--fondo); transition: background-color .2s, width .3s;
}
.campo-falso.lleno::before { width: 52%; background: var(--negro); }
.medio-par .campo-falso.lleno::before { width: 44%; }
.pagar-ahora { min-height: 2.3rem; font-size: .72rem; }


.pedido-numero { font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.aviso-gracias {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .5rem;
  padding: .6rem .65rem; border-radius: .6rem; background: var(--fondo); font-size: .66rem; line-height: 1.4;
}
.tilde-chica { width: 1rem; height: 1rem; border-width: 1.3px; }
.tilde-chica::after { width: .22rem; height: .42rem; border-width: 0 1.3px 1.3px 0; }
.pedido { gap: .55rem; }
.item { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: .55rem; border-radius: .55rem; transition: box-shadow .45s; }
.miniatura { position: relative; display: block; }
.miniatura img { display: block; width: 2.4rem; height: 2.4rem; border-radius: .5rem; object-fit: cover; box-shadow: 0 0 0 1px var(--borde); }
.cantidad {
  position: absolute; top: -.35rem; right: -.35rem; display: grid; place-items: center;
  min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--negro); color: var(--blanco); font-weight: 600; font-size: .58rem;
}
.item-texto b { display: block; font-weight: 600; font-size: .68rem; }
.item-texto small { color: var(--gris); font-size: .6rem; }
.item-precio { font-weight: 600; font-size: .68rem; font-variant-numeric: tabular-nums; }

.item-nuevo.marcado { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--acento); }
.cuenta { display: flex; justify-content: space-between; color: var(--gris); font-size: .65rem; font-variant-numeric: tabular-nums; }
.item + .cuenta { padding-top: .5rem; border-top: 1px solid var(--borde); }
.cuenta-total { padding-top: .3rem; color: var(--negro); font-weight: 600; font-size: .78rem; }
.cuenta-total b { font-weight: 600; }

.dedo {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border-radius: 50%;
  background: rgb(var(--acento-rgb) / .22); box-shadow: 0 0 0 2px var(--acento);
  opacity: 0; translate: var(--x, 50%) var(--y, 50%);
  transition: translate .75s cubic-bezier(.6, 0, .2, 1), opacity .3s, scale .15s;
}
.dedo.visible { opacity: 1; }
.dedo.toca { scale: .78; }

.rotulos { display: grid; gap: .5rem; width: min(100%, 22rem); margin: 0; padding: 0; list-style: none; }
.rotulo {
  display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .85rem;
  border-radius: 1rem; background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .78);
  font-size: .875rem; line-height: 1.35;
  transition: background-color .35s, color .35s, scale .35s var(--curva);
}
.rotulo-n {
  flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: rgb(255 255 255 / .14); color: var(--blanco); font-weight: 600; font-size: .75rem;
  transition: background-color .35s;
}
.rotulo.activo { background: var(--acento); color: var(--negro); }
.rotulo.activo .rotulo-n { background: var(--negro); }
.ejemplo { margin: 0; color: rgb(255 255 255 / .6); font-size: .75rem; }
.demo-pausa {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 4;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: var(--blanco); cursor: pointer;
}
.demo-pausa[hidden] { display: none; }
.demo-pausa::before, .demo-pausa::after { content: ""; width: .25rem; height: .85rem; border-radius: .1rem; background: currentColor; grid-area: 1 / 1; translate: -.2rem 0; }
.demo-pausa::after { translate: .2rem 0; }
.demo-pausa[aria-pressed="true"]::before { width: 0; height: 0; border-radius: 0; background: none; translate: .1rem 0; border-style: solid; border-width: .5rem 0 .5rem .8rem; border-color: transparent transparent transparent currentColor; }
.demo-pausa[aria-pressed="true"]::after { display: none; }
@media (hover: hover) { .demo-pausa:hover { background: rgb(255 255 255 / .22); } }


@media (min-width: 80rem) {
  .vitrina { padding: 2.5rem 2rem 2.5rem 2.25rem; }
  .demo {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto;
    grid-template-areas: "rotulos telefono" "ejemplo telefono";
    align-items: center; justify-items: stretch; gap: 0 2rem;
  }
  .telefono { grid-area: telefono; }
  .rotulos { grid-area: rotulos; width: auto; gap: .75rem; }
  .rotulo { padding: .85rem 1rem; font-size: .9375rem; }
  .rotulo.activo { scale: 1.03; }
  .ejemplo { grid-area: ejemplo; align-self: end; }
}


.antetitulo {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem;
  color: var(--gris); font: 600 .9375rem/1.2 var(--texto);
}
.antetitulo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acento); }
.como, .panel { width: var(--pagina); margin: 0 auto; padding-block: 4.5rem; }
.como-titulo, .tipos-titulo, .panel-titulo {
  margin: 0; font: 600 clamp(1.75rem, 1.15rem + 2.2vw, 2.875rem)/1.1 var(--texto);
  letter-spacing: -.035em; text-wrap: balance;
}
.como-titulo { max-width: 22em; margin-bottom: 2.75rem; }
.pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.paso { display: grid; align-content: start; gap: 1.25rem; padding: .75rem .75rem 1.5rem; border-radius: 24px; background: var(--blanco); }

.paso-dibujo { display: grid; place-items: center; min-height: 15.5rem; padding-block: 1rem; border-radius: 18px; background: var(--fondo); }

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .paso { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 1.75rem; padding-right: 1.75rem; }
}

@media (min-width: 64rem) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .pasos { grid-template-rows: auto auto; }
    .paso { grid-row: span 2; grid-template-rows: subgrid; }
  }
}
.paso-texto { margin: 0; padding-inline: .5rem; font-size: 1.0625rem; line-height: 1.45; }
.mini {
  display: grid; gap: .55rem; width: min(86%, 20rem); padding: .9rem;
  border-radius: 16px; background: var(--blanco); box-shadow: var(--sombra);
  font-size: .8125rem; line-height: 1.3;
}
.mini p { margin: 0; }
.mini-cabeza { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55rem; }
.mini-chico { display: block; color: var(--gris); font-size: .6875rem; }
.mini-titulo { display: block; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.mini-oferta { display: grid; gap: .45rem; padding: .55rem; border: 1px solid var(--borde); border-radius: 10px; }
.mini-oferta-titulo { font-weight: 600; font-size: .75rem; }
.mini-barra {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .35rem .45rem;
  border-radius: 8px; background: rgb(232 232 228 / .55); box-shadow: inset 0 0 0 1.5px var(--negro);
}
.mini-barra img { display: block; width: 2.4rem; height: 2.4rem; border-radius: 8px; object-fit: cover; }
.mini-barra b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-barra small { color: var(--gris); }
.mini-boton {
  display: grid; place-items: center; min-height: 2rem; padding: 0 .6rem; border-radius: 6px;
  background: var(--negro); color: var(--blanco); font-weight: 600; font-size: .75rem;
}
.mini-oferta .mini-boton { justify-self: start; min-height: 1.8rem; font-size: .6875rem; }
.mini-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; border-radius: 8px; }
.mini-item b { font-weight: 600; }
.mini-item > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-item-nuevo { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--acento); }
.mini-fila { display: flex; justify-content: space-between; gap: .5rem; padding-top: .45rem; border-top: 1px solid var(--borde); color: var(--gris); font-variant-numeric: tabular-nums; }
.mini-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .875rem; }
.mini-total b { font-variant-numeric: tabular-nums; }
.mini-aviso { display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; border: 1px solid var(--borde); border-radius: 8px; font-weight: 600; font-size: .75rem; }
.mini-medios { display: grid; gap: .3rem; }
.mini-medios i { display: flex; align-items: center; gap: .45rem; height: 1.55rem; padding: 0 .55rem; border: 1px solid var(--borde); border-radius: 6px; }
.mini-medios i::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--gris); }
.mini-medios i::after { content: ""; width: 45%; height: .3rem; border-radius: .2rem; background: var(--fondo); }
.mini-medios i:first-child { border-color: var(--negro); }
.mini-medios i:first-child::before { border-color: var(--negro); background: var(--negro); box-shadow: inset 0 0 0 2px var(--blanco); }

.tipos {
  margin-inline: .5rem; padding-block: 4.5rem; border-radius: 32px;
  background: var(--negro); color: var(--blanco);
}
.tipos-cabeza { width: var(--pagina); margin: 0 auto 2.5rem; }
.tipos .antetitulo { color: var(--blanco); }
.tipos-titulo { max-width: 20em; }
.tipos-bajada { margin: .875rem 0 0; color: rgb(255 255 255 / .72); font-size: 1.125rem; }
.tarjetas { display: grid; gap: 1.5rem 1rem; width: var(--pagina); margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 40rem) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta { display: grid; grid-template-rows: auto auto 1fr; gap: .5rem; }
.tarjeta-oferta {
  display: grid; align-content: start; gap: .5rem; min-height: 15.5rem; padding: .9rem; margin-bottom: .5rem;
  border-radius: 20px; background: var(--blanco); color: var(--negro); font-size: .8125rem;
  transition: translate .35s var(--curva), box-shadow .35s;
}
@media (hover: hover) { .tarjeta:hover .tarjeta-oferta { translate: 0 -4px; box-shadow: 0 18px 40px rgb(var(--acento-rgb) / .28); } }
.t-titulo { margin: 0; font-weight: 600; font-size: .875rem; }
.t-producto { display: flex; align-items: center; gap: .55rem; font-size: .78rem; }
.t-producto img, .t-casilla img { display: block; width: 2.5rem; height: 2.5rem; border-radius: .5rem; object-fit: cover; }
.t-barra, .t-casilla {
  display: grid; grid-template-columns: .9rem 1fr auto; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: .6rem;
}
.t-barra b, .t-casilla b { display: block; font-weight: 600; font-size: .78rem; }
.t-barra small, .t-casilla small { color: var(--gris); font-size: .7rem; }
.t-precio { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.t-radio { width: .85rem; height: .85rem; border-radius: 50%; border: 1.5px solid var(--gris); }
.t-elegida { border-color: var(--negro); background: rgb(232 232 228 / .5); box-shadow: inset 0 0 0 1px var(--negro); }
.t-elegida .t-radio { border-color: var(--negro); background: var(--negro); box-shadow: inset 0 0 0 2.5px var(--blanco); }
.t-casilla { grid-template-columns: .9rem 2rem 1fr; }
.t-casilla img { width: 2rem; height: 2rem; }
.t-check { position: relative; width: .9rem; height: .9rem; border-radius: .2rem; background: var(--negro); }
.t-check::after { content: ""; position: absolute; left: .29rem; top: .12rem; width: .25rem; height: .5rem; border: solid var(--blanco); border-width: 0 2px 2px 0; rotate: 45deg; }
.t-muestras { display: flex; align-items: center; gap: .4rem; color: var(--gris); }
.t-muestras small { font-size: .7rem; margin-left: .2rem; }

.m { width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--borde), inset 0 0 0 2px var(--blanco); background: url("/img/medias.webp") no-repeat; background-size: 1400%; }
.m1 { background-position: 18% 22%; }
.m2 { background-position: 72% 47%; }
.m3 { background-position: 22% 82%; }
.tarjeta-nombre { margin: 0; font: 600 1.0625rem/1.25 var(--texto); letter-spacing: -.01em; }
.tarjeta-texto { margin: 0; color: rgb(255 255 255 / .72); font-size: .9375rem; line-height: 1.45; }

.panel { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .panel { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 4rem; } }
.panel-titulo { margin-bottom: 1.75rem; }
.funciones { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.funciones li { display: grid; grid-template-columns: .55rem 1fr; gap: .8rem; font-size: 1.0625rem; line-height: 1.45; }
.funciones li::before { content: ""; width: .55rem; height: .55rem; margin-top: .55em; border-radius: 50%; background: var(--acento); }
.panel-captura { margin: 0; overflow: hidden; border-radius: 18px; background: var(--blanco); box-shadow: var(--sombra-fuerte); }
.ventana { display: flex; gap: .4rem; padding: .75rem .9rem; border-bottom: 1px solid var(--borde); }
.ventana i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--borde); }
.panel-captura img { display: block; width: 100%; height: auto; }

.final {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: .5rem; padding: 5rem 1.25rem; border-radius: 32px;
  background: var(--negro); color: var(--blanco); text-align: center;
}
.final::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 60rem; height: 34rem; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(var(--acento-rgb) / .55), rgb(var(--acento-rgb) / 0));
}
.isotipo { display: block; }
.isotipo-final { margin: 0 auto; }
.final-titulo { max-width: 15em; margin: 1.25rem auto 2rem; font: 600 clamp(2rem, 1.3rem + 3vw, 3.75rem)/1.04 var(--texto); letter-spacing: -.04em; text-wrap: balance; }
@media (hover: hover) { .final .boton:hover { background: var(--blanco); color: var(--negro); } }

.pie { width: var(--pagina); margin: 0 auto; padding-block: 3.5rem 4rem; color: var(--gris); font-size: .9375rem; line-height: 1.55; }
.pie p { max-width: 46rem; margin: 0 0 .75rem; }
.pie h2 { margin: 0 0 .5rem; color: var(--negro); font: 600 1rem/1.3 var(--texto); }
.logo-pie { display: block; width: 164px; height: auto; margin-top: 2rem; }


body { position: relative; isolation: isolate; }
.fondo-grilla {
  position: absolute; inset: 0 0 auto; z-index: -1; height: min(100svh, 60rem); overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 75% at 24% 34%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 75% at 24% 34%, #000 30%, transparent 78%);
}
.final-grilla {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000 20%, transparent 80%);
}
.grilla { display: block; width: 100%; height: 100%; }
.grilla-linea { stroke: rgb(0 0 0 / .07); }
.grilla-cuadro { fill: var(--acento); opacity: 0; }
.grilla-cuadro.quieto { opacity: .16; }
.final-grilla .grilla-linea { stroke: rgb(255 255 255 / .07); }


.aurora {
  background-image: linear-gradient(135deg, #e63b12, #d61f69, #c2410c, #e63b12);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.aurora::selection { -webkit-text-fill-color: var(--blanco); }


.con-trazo { position: relative; isolation: isolate; }
.trazo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trazo-linea { stroke: rgb(var(--acento-rgb) / .34); stroke-linecap: round; }
.trazo-subrayado { z-index: 0; }
.trazo-subrayado .trazo-linea { stroke: var(--acento); stroke-width: 3; }


@media (prefers-reduced-motion: no-preference) {
  .alta-caja[data-estado="enviando"] .girando, .ruedita { animation: girar .8s linear infinite; }
  .revelar { transition: opacity .8s var(--curva), translate .8s var(--curva); }
  .revelar.por-ver { opacity: 0; translate: 0 1.75rem; }
  .vitrina::before { animation: respirar 7s ease-in-out infinite alternate; }
  .aurora { animation: aurora 6s ease-in-out 4 alternate both; }
}
@keyframes aurora { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes girar { to { rotate: 1turn; } }
@keyframes respirar { from { scale: .92; opacity: .85; } to { scale: 1.06; opacity: 1; } }

@media (forced-colors: active) {
  .alta-caja, .paso, .mini, .tarjeta-oferta, .panel-captura, .vitrina, .final, .tipos { border: 1px solid CanvasText; }
  .vitrina::before, .final::before, .fondo-grilla, .final-grilla, .trazo { display: none; }
  .aurora { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}