/* Vitrina de LactyKarne.
   Todo se mide en --u (1 % del ancho de la columna): la composición es la misma en cualquier
   teléfono, solo a otra escala. Ningún tamaño se escribe en rem ni en px sueltos.
   Los efectos los mueve vitrina.js con el progreso del scroll; aquí no hay animaciones
   disparadas por clase. */

:root {
  --crema: #F6EEDC;
  --cuajada: #FBF6EA;
  --mantequilla: #E7BF5B;
  --corteza: #B9743A;
  --tierra: #6A4630;
  --espiga: #7A8450;
  --carne: #8E3A2E;
  --carbon: #1E1914;
  --estraza: #C6A06F;
  --estraza-reves: #EBD4AC;

  --u: min(1vw, 5.2px);
  --columna: calc(var(--u) * 100);
  /* La escena mide el alto grande (barras escondidas) y el texto vive en el alto chico
     (barras a la vista): así la barra de URL nunca tapa un titular ni recoloca nada. */
  --lvh: 100vh;
  --svh: 100vh;
  --rasgo: calc(var(--u) * 5);

  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .24  0 0 0 0 .16  0 0 0 0 .09  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibras: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .7 -.18'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
@supports (height: 100lvh) {
  :root { --lvh: 100lvh; --svh: 100svh; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #15110D; -webkit-text-size-adjust: 100%; }
body {
  background: #15110D;
  color: var(--crema);
  font-family: "Karla", system-ui, sans-serif;
  overflow-x: clip;
}
img { display: block; }
a { color: inherit; }

.pagina {
  width: var(--columna);
  margin: 0 auto;
  background: var(--carbon);
  position: relative;
}

/* ---------- La sección: un tramo largo con su escena pegada ---------- */
.seccion { position: relative; height: calc(var(--lvh) * 3); }
.escena {
  position: sticky;
  top: 0;
  height: var(--lvh);
  overflow: hidden;
}
/* Desde la segunda, cada sección entra con el borde de papel rasgado encima de la anterior.
   El rasgado queda por encima de la pantalla mientras la escena está pegada. */
.con-rasgo { margin-top: calc(var(--rasgo) * -1); z-index: 1; }
.con-rasgo .escena {
  top: calc(var(--rasgo) * -1);
  height: calc(var(--lvh) + var(--rasgo));
  -webkit-mask: var(--borde-rasgado) top / 100% var(--rasgo) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--rasgo) + 1px) no-repeat;
  mask: var(--borde-rasgado) top / 100% var(--rasgo) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--rasgo) + 1px) no-repeat;
}
.s2 { z-index: 2; } .s3 { z-index: 3; } .s4 { z-index: 4; } .s5 { z-index: 5; } .pie { z-index: 6; }
:root {
  --borde-rasgado: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0 10 L0 6.2 L2.1 4.9 L3.6 6.6 L5.9 3.8 L7.4 5.1 L9.8 2.9 L11.6 4.6 L13.2 3.1 L15.9 5.8 L17.7 3.4 L19.4 4.2 L21.8 2.2 L23.5 4.9 L25.9 3.6 L27.4 6.1 L29.8 4.0 L31.6 2.6 L33.9 4.4 L35.2 3.0 L37.8 5.2 L39.6 3.3 L41.9 4.8 L43.3 2.4 L45.8 3.9 L47.6 6.0 L49.1 4.1 L51.7 2.7 L53.4 4.6 L55.8 3.2 L57.3 5.4 L59.9 3.7 L61.5 2.3 L63.8 4.5 L65.4 3.5 L67.9 5.9 L69.6 3.9 L71.2 2.8 L73.7 4.7 L75.5 3.1 L77.8 5.0 L79.3 3.6 L81.9 2.5 L83.6 4.3 L85.1 3.3 L87.7 5.6 L89.4 3.8 L91.8 2.9 L93.5 4.9 L95.9 3.4 L97.6 5.3 L100 3.9 L100 10 Z' fill='black'/></svg>");
}
.lienzo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--lvh);
}
.foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.velo { position: absolute; inset: 0; pointer-events: none; }
.marco {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 9) calc(var(--u) * 6) calc(var(--u) * 24);
  text-align: center;
  z-index: 5;
}

/* ---------- Letra ---------- */
.titular {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "opsz" 96;
  font-weight: 600;
  font-size: calc(var(--u) * 9.1);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--cuajada);
  text-wrap: balance;
}
.titular .renglon { display: block; white-space: nowrap; }
.subtitulo {
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 4.1);
  line-height: 1.42;
  color: rgba(246, 238, 220, .9);
  max-width: calc(var(--u) * 84);
}
.subtitulo p { text-wrap: balance; }
.subtitulo p + p { margin-top: calc(var(--u) * 2.2); }

/* ---------- 1 · El gancho ---------- */
.s1 .lienzo { background: var(--carbon); }
.foto-noche { filter: saturate(.9); }
.velo-s1 {
  background:
    linear-gradient(to bottom, var(--carbon) 0%, rgba(30, 25, 20, .9) 34%, rgba(30, 25, 20, .45) 66%, rgba(30, 25, 20, .7) 100%);
}
.lampara {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 38% at 50% 72%, rgba(231, 191, 91, .34), rgba(231, 191, 91, 0) 70%);
  opacity: .35;
  pointer-events: none;
}
.s1 .marco { padding-top: calc(var(--u) * 7); }
.logo { width: calc(var(--u) * 62); height: auto; margin-bottom: calc(var(--u) * 7); }
.mesa { position: relative; flex: 1; width: 100%; }
.sena {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.sena-flecha {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  background: var(--mantequilla);
  outline: calc(var(--u) * 1.6) solid rgba(231, 191, 91, .3);
  position: relative;
  animation: respira 1.6s ease-in-out infinite;
}
.sena-flecha::after {
  content: "";
  position: absolute;
  left: 50%; top: 44%;
  width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6);
  border-right: calc(var(--u) * 1.1) solid var(--carbon);
  border-bottom: calc(var(--u) * 1.1) solid var(--carbon);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* El único reloj propio de la página: la seña de «baja» respira mientras nadie ha bajado.
   Su presencia la decide el scroll (vitrina.js la apaga en cuanto se mueve). */
@keyframes respira {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--u) * 1.6)); }
}
@media (prefers-reduced-motion: reduce) { .sena-flecha { animation: none; } }

.paquete {
  position: absolute;
  left: 50%; top: 57%;
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 54);
  margin: calc(var(--u) * -27) 0 0 calc(var(--u) * -40);
  perspective: calc(var(--u) * 260);
  opacity: 0;
  will-change: transform, opacity;
}
.papel, .solapa {
  position: absolute;
  background-color: var(--estraza);
  background-image: var(--fibras), var(--grano), linear-gradient(160deg, rgba(255, 240, 210, .18), rgba(80, 50, 25, .14));
}
.papel { inset: 0; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, .45)); }
.capa { position: absolute; will-change: transform, opacity; opacity: 0; }
.capa img { width: 100%; height: auto; }
.capa-1 { left: calc(var(--u) * 1); top: calc(var(--u) * 4); width: calc(var(--u) * 41); }
.capa-2 { left: calc(var(--u) * 37); top: calc(var(--u) * 13); width: calc(var(--u) * 42); }
.capa-3 { left: calc(var(--u) * 11); top: calc(var(--u) * 31); width: calc(var(--u) * 22); }
.solapa { left: 0; right: 0; height: 54%; backface-visibility: hidden; }
.solapa-arriba {
  top: 0;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  background-image: var(--fibras), var(--grano), linear-gradient(to bottom, rgba(70, 40, 20, .28), rgba(255, 240, 210, .12) 70%, rgba(70, 40, 20, .18));
}
.solapa-abajo {
  bottom: 0;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  background-image: var(--fibras), var(--grano), linear-gradient(to top, rgba(70, 40, 20, .3), rgba(255, 240, 210, .1) 70%, rgba(70, 40, 20, .22));
}
.cordel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cordel path {
  fill: none;
  stroke: #EAD9B4;
  stroke-width: 1;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.nota-paquete {
  position: absolute;
  left: calc(var(--u) * 4); top: calc(var(--u) * 6);
  width: calc(var(--u) * 40);
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: calc(var(--u) * 6.4);
  line-height: 1.02;
  color: #3A2618;
  text-align: left;
  transform: rotate(-4deg);
  clip-path: inset(0 100% 0 0);
}
.etiqueta {
  position: absolute;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: calc(var(--u) * 6);
  line-height: 1;
  color: var(--mantequilla);
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1.6) rgba(0, 0, 0, .6);
}
.etiqueta-1 { left: calc(var(--u) * -2); top: calc(var(--u) * -9); transform: rotate(-5deg); }
.etiqueta-2 { right: calc(var(--u) * -2); top: calc(var(--u) * -9); transform: rotate(4deg); }
.etiqueta-3 { left: calc(var(--u) * 4); bottom: calc(var(--u) * -10); transform: rotate(-3deg); }

/* ---------- 2 · El diario ---------- */
.s2 .lienzo { background: var(--carbon); }
.foto-quesos { object-position: 34% 50%; }
.velo-arriba {
  background: linear-gradient(to bottom, var(--carbon) 0%, rgba(30, 25, 20, .92) 26%, rgba(30, 25, 20, .55) 44%, rgba(30, 25, 20, 0) 62%);
}
.hebras { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; }
.hebra-sombra { fill: none; stroke: rgba(60, 40, 20, .55); stroke-linecap: round; }
.hebra { fill: none; stroke: #F3E5C2; stroke-linecap: round; }
.hebra-brillo { fill: none; stroke: rgba(255, 252, 240, .8); stroke-linecap: round; }
.hebra-nombre {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "opsz" 24;
  font-style: italic;
  font-weight: 600;
  fill: var(--tierra);
}

/* ---------- 3 · El domingo ---------- */
.s3 .lienzo { background: var(--carbon); }
.foto-carnes { object-position: 50% 62%; }
.luz { position: absolute; inset: 0; pointer-events: none; }
.luz-tarde { background: linear-gradient(200deg, rgba(231, 191, 91, .38), rgba(185, 116, 58, .12) 60%, rgba(0, 0, 0, 0)); mix-blend-mode: soft-light; }
.luz-brasa {
  background:
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(255, 110, 40, .45), rgba(142, 58, 46, 0) 70%),
    linear-gradient(to bottom, rgba(20, 8, 4, .35), rgba(90, 25, 12, .45));
  opacity: 0;
}
.brasas { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.brasa {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  background: #FFB060;
  will-change: transform;
}
.hoja, .hoja-sombra { position: absolute; inset: 0; pointer-events: none; }
/* La sombra va en el contenedor: si fuera en la hoja, su propio recorte se la comería. */
.hoja-sombra { filter: drop-shadow(0 0 calc(var(--u) * 2.4) rgba(0, 0, 0, .55)); }
.hoja-plana {
  background-color: var(--estraza);
  background-image: var(--fibras), var(--grano), linear-gradient(170deg, rgba(255, 240, 210, .16), rgba(70, 40, 20, .2));
}
.sello {
  position: absolute;
  left: 50%; top: 60%;
  width: calc(var(--u) * 64);
  margin-left: calc(var(--u) * -32);
  transform: rotate(-9deg);
  filter: brightness(0);
  opacity: .32;
  mix-blend-mode: multiply;
}
.hoja-doblez {
  background-color: var(--estraza-reves);
  background-image: var(--grano), linear-gradient(135deg, rgba(255, 248, 230, .5) 0%, rgba(255, 248, 230, .1) calc(var(--pliegue, 50%) - 16%), rgba(70, 40, 20, .42) var(--pliegue, 50%));
}
.pizarron {
  position: absolute;
  left: calc(var(--u) * 6);
  top: calc(var(--svh) - var(--u) * 82);
  width: calc(var(--u) * 68);
  padding: calc(var(--u) * 3.6) calc(var(--u) * 5) calc(var(--u) * 4);
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%),
    #23282A;
  border: calc(var(--u) * 1.6) solid #7B4E2C;
  border-radius: calc(var(--u) * 1);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .55), inset 0 0 calc(var(--u) * 4) rgba(0, 0, 0, .5);
  text-align: left;
  z-index: 6;
  opacity: 0;
  will-change: transform, opacity;
}
.pizarron-renglon {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: calc(var(--u) * 5.6);
  line-height: 1.12;
  color: #F2EBDD;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

/* ---------- 4 · La confianza ---------- */
.s4 .lienzo {
  background-color: var(--crema);
  background-image: var(--grano);
}
.s4 .titular { color: var(--tierra); }
.s4 .subtitulo { color: rgba(106, 70, 48, .92); }
.foto-mesa {
  top: auto;
  height: 52%;
  object-position: 50% 70%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
}
.mapa { position: relative; flex: 1; width: calc(100% + var(--u) * 12); margin: calc(var(--u) * 2) calc(var(--u) * -6) 0; }
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.calle { fill: none; stroke: rgba(185, 116, 58, .38); stroke-linecap: round; }
.avenida { fill: none; stroke: rgba(122, 132, 80, .28); stroke-linecap: round; }
.manzana { fill: rgba(185, 116, 58, .07); }
.ruta-base { fill: none; stroke: var(--carne); stroke-linecap: round; stroke-linejoin: round; }
.parada-punto { fill: var(--carne); stroke: var(--cuajada); }
.parada {
  position: absolute;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: calc(var(--u) * 5.2);
  line-height: 1;
  color: var(--carne);
  white-space: nowrap;
  opacity: 0;
  padding: calc(var(--u) * .4) calc(var(--u) * 1.6) calc(var(--u) * .8);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(251, 246, 234, .88);
}
.parada:empty { display: none; }
.parada-1 { white-space: normal; text-align: right; max-width: calc(var(--u) * 24); }
.notas { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.nota {
  position: absolute;
  width: calc(var(--u) * 37);
  padding: calc(var(--u) * 3.8) calc(var(--u) * 3.4) calc(var(--u) * 3);
  background-color: var(--cuajada);
  background-image: var(--grano);
  box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, .22), 0 calc(var(--u) * .3) calc(var(--u) * .6) rgba(0, 0, 0, .12);
  text-align: left;
  opacity: 0;
  will-change: transform, opacity;
}
.nota::before {
  content: "";
  position: absolute;
  left: 50%; top: calc(var(--u) * -2.2);
  width: calc(var(--u) * 16); height: calc(var(--u) * 5);
  margin-left: calc(var(--u) * -8);
  background: rgba(231, 191, 91, .72);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.nota blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "opsz" 20;
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--u) * 3.5);
  line-height: 1.22;
  color: var(--carbon);
}
.nota figcaption {
  margin-top: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 2.9);
  font-weight: 700;
  color: var(--tierra);
}
.nota-estrellas { display: block; color: var(--corteza); letter-spacing: .12em; font-size: calc(var(--u) * 3.2); margin-bottom: calc(var(--u) * 1); }

/* ---------- 5 · La oferta ---------- */
.s5 .lienzo { background: var(--carbon); }
.foto-cremas { object-position: 50% 40%; }
.velo-s5 {
  background:
    linear-gradient(to bottom, rgba(30, 25, 20, .96) 0%, rgba(30, 25, 20, .82) 34%, rgba(30, 25, 20, .55) 60%, rgba(30, 25, 20, .8) 100%);
}
.aviso {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: calc(var(--u) * 7.4);
  line-height: 1;
  color: var(--mantequilla);
  margin-bottom: calc(var(--u) * 2);
  transform: rotate(-3deg);
}
.ruleta-caja {
  position: absolute;
  left: 50%;
  top: calc(var(--svh) - var(--u) * 92);
  width: calc(var(--u) * 82);
  height: calc(var(--u) * 82);
  margin-left: calc(var(--u) * -41);
  z-index: 4;
  will-change: transform;
}
.ruleta { width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, .55)); will-change: transform; }
.ruleta-aguja {
  position: absolute;
  left: 50%; top: calc(var(--u) * -3);
  width: calc(var(--u) * 9); height: calc(var(--u) * 11);
  margin-left: calc(var(--u) * -4.5);
  z-index: 2;
  filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1) rgba(0, 0, 0, .5));
}
.ruleta-aguja path { fill: var(--cuajada); stroke: var(--carne); stroke-width: 2; stroke-linejoin: round; }
.confeti { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.papelito { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.nota-confeti {
  position: absolute;
  right: calc(var(--u) * 7);
  top: calc(var(--svh) - var(--u) * 105);
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: calc(var(--u) * 8.4);
  line-height: 1;
  color: var(--mantequilla);
  transform: rotate(-6deg);
  clip-path: inset(0 100% 0 0);
  z-index: 7;
  text-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 2) rgba(0, 0, 0, .7);
}

/* ---------- Pie ---------- */
.pie {
  position: relative;
  background: var(--carbon);
  padding: calc(var(--rasgo) + var(--u) * 8) calc(var(--u) * 7) calc(var(--u) * 26);
  text-align: center;
  -webkit-mask: var(--borde-rasgado) top / 100% var(--rasgo) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--rasgo) + 1px) no-repeat;
  mask: var(--borde-rasgado) top / 100% var(--rasgo) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--rasgo) + 1px) no-repeat;
}
.pie-logo { width: calc(var(--u) * 52); height: auto; margin: 0 auto calc(var(--u) * 5); }
/* El lema ya va dibujado dentro del logo: el texto queda para lectores de pantalla. */
.pie-lema { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pie-dato { font-size: calc(var(--u) * 3.5); line-height: 1.45; color: rgba(246, 238, 220, .78); }
.pie-dato + .pie-dato { margin-top: calc(var(--u) * 1.2); }
.pie-ligas { margin-top: calc(var(--u) * 4); display: flex; justify-content: center; gap: calc(var(--u) * 6); }
.pie-ligas a {
  font-size: calc(var(--u) * 3.7);
  font-weight: 700;
  color: var(--mantequilla);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}

/* ---------- Botón fijo: vidrio mantequilla, vivo de principio a fin ---------- */
.boton-fijo {
  position: fixed;
  left: 50%;
  bottom: calc(var(--u) * 5 + env(safe-area-inset-bottom, 0px));
  width: calc(var(--u) * 74);
  height: calc(var(--u) * 14.5);
  margin-left: calc(var(--u) * -37);
  border-radius: calc(var(--u) * 8);
  background: linear-gradient(180deg, rgba(244, 214, 128, .9), rgba(231, 191, 91, .84));
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255, 246, 214, .85);
  box-shadow:
    0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(30, 25, 20, .42),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  color: var(--carbon);
  text-decoration: none;
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.boton-texto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  font-family: "Karla", system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 4.7);
  letter-spacing: .005em;
  white-space: nowrap;
}
.boton-texto::after {
  content: "";
  width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2);
  border-top: calc(var(--u) * .8) solid currentColor;
  border-right: calc(var(--u) * .8) solid currentColor;
  transform: rotate(45deg);
}
.boton-b { opacity: 0; }