/* Sign-in pages: "city at night". Kept as a file: the CSP forbids inline styles.
   Everything decorative is static markup (templates/_escena.html) placed from here, and only
   transform and opacity are animated, a handful of loops in all (3 star layers, the moon
   glow, 3 window layers, 2 cars). With prefers-reduced-motion nothing moves.
   Fonts: the system stack, nothing is downloaded (the CSP and privacy rule out web fonts). */
:root {
  --u: min(calc(100vw / 390), 1.12px);   /* 1 unit of the 390 px design, capped on wide screens */
  --marco: min(100%, calc(var(--u) * 390));
  --noche:    #0a1930;   /* navy: text and the main button */
  --azul:     #1a365d;
  --accion:   #c85000;   /* orange for "doing something": white text on it reaches 4.56:1 */
  --accion-oscura: #a83f00;   /* 5.98:1 on the cream sheet */
  --crema:    #fffaf3;
  --tinta:    #0a1930;
  --apagado:  #475569;   /* 7.4:1 on the cream sheet */
  --borde-campo: #5b6b80;   /* 5:1 on cream: the edge of a field is part of reading it */
  --peligro:        #b42318;
  --peligro-suave:  #fff5f5;
  --aviso:          #9c4221;
  --aviso-suave:    #fffff0;
  --salida: cubic-bezier(0.2, 0.8, 0.2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #060d1c; }

body {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
  color: #fff;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #060d1c 0%, #0f2347 38%, #5b2a4e 66%, #ff7a2f 92%, #ffb36b 100%);
}

/* ---- Sky ---- */
.estrellas { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--u) * 300);
             overflow: hidden; pointer-events: none; }
.estrellas i { position: absolute; left: 50%; top: 0; width: 2px; height: 2px; border-radius: 50%;
               background: transparent; animation: titilar 3s ease-in-out infinite; }
.estrellas i:nth-child(2) { animation-delay: -1s; }
.estrellas i:nth-child(3) { animation-delay: -2s; }
@keyframes titilar { 50% { opacity: .15; } }

.luna { position: absolute; left: calc(50% + var(--u) * 91); top: calc(var(--u) * 70);
        width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%;
        background: #fff3d6; pointer-events: none;
        box-shadow: 0 0 calc(var(--u) * 40) calc(var(--u) * 12) rgba(255, 236, 190, .35); }
.luna::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
               box-shadow: 0 0 calc(var(--u) * 54) calc(var(--u) * 18) rgba(255, 236, 190, .45);
               opacity: 0; animation: brillo 8s ease-in-out infinite; }
@keyframes brillo { 50% { opacity: 1; } }

.cabecera { position: relative; width: var(--marco); margin: 0 auto; flex: none;
            padding: calc(var(--u) * 64) calc(var(--u) * 24) 0; }
/* The logo on a light plate: its navy would disappear on the night sky. */
.logo-placa { display: inline-block; margin: 0 0 calc(var(--u) * 14); padding: calc(var(--u) * 9) calc(var(--u) * 16);
              background: #f7f8fa; border: 1px solid rgba(255, 255, 255, .55); border-radius: calc(var(--u) * 18);
              box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
.logo-placa img { display: block; height: max(44px, calc(var(--u) * 54)); width: auto; }
.marca-nombre { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .32em;
                text-transform: uppercase; color: #ffd9bd; }
.lema-grande { margin: 0; max-width: calc(var(--u) * 280); font-size: max(34px, calc(var(--u) * 44));
               font-weight: 800; line-height: .98; letter-spacing: -0.02em; text-wrap: balance; }
.lema-chico { margin: 8px 0 0; max-width: calc(var(--u) * 280); text-wrap: balance; font-size: 15px; line-height: 1.35; color: #d6deeb; }

/* ---- City ---- */
.ciudad { position: relative; flex: 1 1 calc(var(--u) * 150); min-height: calc(var(--u) * 80);
          overflow: hidden; pointer-events: none; }
.ciudad i { position: absolute; }
.lejos i, .cerca i { bottom: 0; }
.lejos i { background: #172440; opacity: .9; }
.cerca i { border-radius: 2px 2px 0 0; background-color: #0a1222;
           background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 6),
             rgba(255, 200, 120, .22) calc(var(--u) * 6) calc(var(--u) * 10), transparent calc(var(--u) * 10) calc(var(--u) * 16)); }
.luces i { left: 50%; bottom: 0; width: calc(var(--u) * 4); height: calc(var(--u) * 5);
           background: transparent; animation: encender 4s steps(1) infinite; }
.luces i:nth-child(2) { animation-duration: 5.5s; animation-delay: -1.7s; }
.luces i:nth-child(3) { animation-duration: 3.2s; animation-delay: -2.4s; }
@keyframes encender { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .1; } }
.calle { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 10); background: #05080f; }
.auto { left: 0; bottom: calc(var(--u) * 3); width: calc(var(--u) * 40); height: 3px; border-radius: 2px;
        background: linear-gradient(90deg, transparent, #ffe7b0);
        transform: translateX(-12vw); animation: ir 5s linear infinite; }
.auto.rojo { background: linear-gradient(90deg, #ff4d4d, transparent);
             transform: translateX(112vw); animation: volver 6.5s linear infinite; }
@keyframes ir { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
@keyframes volver { from { transform: translateX(112vw); } to { transform: translateX(-12vw); } }
@media (max-width: 437px) {
  .lejos i:nth-child(n+9), .cerca i:nth-child(n+8) { display: none; }
}

/* ---- Sheet ---- */
.hoja { position: relative; flex: none; width: var(--marco); margin: 0 auto;
        padding: 26px 22px max(22px, env(safe-area-inset-bottom));
        background: var(--crema); color: var(--tinta); border-radius: 28px 28px 0 0;
        transform: translateY(40px); opacity: 0; animation: subir .9s .2s var(--salida) forwards; }
@keyframes subir { to { transform: none; opacity: 1; } }

.hoja p { margin: 0 0 12px; line-height: 1.45; }
.hoja a { color: var(--azul); font-weight: 700; }
.hoja a:hover { color: var(--accion-oscura); }
.volver { display: inline-flex; align-items: center; min-height: 44px; }
form { width: 100%; margin: 0; }
.campo { margin-bottom: 14px; }

label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
        font-size: 14px; font-weight: 600; color: var(--tinta); }

input[type="text"], input[type="password"] {
  width: 100%; height: 52px; padding: 0 14px;
  font: inherit; font-size: 16px;           /* 16px: iOS does not zoom on focus */
  color: var(--tinta); background: #fff;
  border: 2px solid var(--borde-campo); border-radius: 12px;
  transition: border-color .2s var(--salida), box-shadow .2s var(--salida);
}
input::placeholder { color: #64748b; font-weight: 400; }
input:focus, input:focus-visible { outline: none; border-color: var(--accion);
                                    box-shadow: 0 0 0 4px rgba(194, 65, 12, .18); }

.con-boton { position: relative; }
.con-boton input { padding-right: 56px; }
.ver { position: absolute; top: 0; right: 0; width: 52px; height: 52px; display: grid; place-items: center;
       background: none; border: 0; border-radius: 12px; color: var(--apagado); cursor: pointer; }
.ver:hover { color: var(--accion-oscura); }
.ver:focus-visible { outline: none; color: var(--accion-oscura); box-shadow: 0 0 0 3.5px rgba(194, 65, 12, .25); }
.ver svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
           stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ver .tachado { display: none; }
.ver[aria-pressed="true"] .abierto { display: none; }
.ver[aria-pressed="true"] .tachado { display: block; }

.entrar { width: 100%; min-height: 54px; margin-top: 6px; border: 0; border-radius: 12px;
          font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: var(--noche); cursor: pointer;
          transition: background-color .2s var(--salida); }
.entrar:hover { background: var(--azul); }
.entrar:active { background: #000; }
.entrar:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(194, 65, 12, .35); }

.aviso { margin: 0 0 14px; padding: 12px 16px; font-size: 14px; font-weight: 600;
         border-radius: 10px; border-left: 4px solid; }
.aviso-danger  { color: var(--peligro); background: var(--peligro-suave); border-color: var(--peligro); }
.aviso-warning { color: var(--aviso);   background: var(--aviso-suave);   border-color: var(--aviso); }
.aviso-success, .aviso-info { color: var(--azul); background: #ebf8ff; border-color: var(--azul); }

.lema { display: inline-flex; align-items: center; margin: 0 0 14px; padding: 6px 14px;
        font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
        color: #fff; background: var(--noche); border-radius: 4px; border-left: 4px solid #ff6b00; }

.pie { display: flex; align-items: center; justify-content: space-between; margin-top: 12px;
       font-size: 14px; color: var(--apagado); }
.pie span { font-weight: 700; }
.pie form { width: auto; }
.pie button.lang-switch[type="submit"] {
  min-width: 44px; min-height: 44px; margin: 0; padding: 4px 8px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--accion-oscura);
  background: none; border: 0; cursor: pointer; }
.pie button.lang-switch[type="submit"]:hover { text-decoration: underline; }
.pie button.lang-switch[type="submit"]:focus-visible { outline: 2px solid var(--accion-oscura); border-radius: 6px; }

/* ---- Low screens ----
   The page is header + city + sheet. The city used to ask for 230 units whatever the screen, so on a phone
   with the browser bar showing (about 780 px of 904) the sheet started at 570 and its button and footer fell
   below the fold. Now the city is the part that gives way (it is anchored to the bottom and clipped on top,
   so the skyline stays) and the header tightens by height. On tall screens nothing changes: the city grows
   to fill. If it still does not fit, the page scrolls (nothing here is overflow: hidden on html or body). */
@media (max-height: 880px) {
  .cabecera { padding-top: calc(var(--u) * 30); }
  .logo-placa { margin-bottom: calc(var(--u) * 10); padding: calc(var(--u) * 6) calc(var(--u) * 12); }
  .logo-placa img { height: max(34px, calc(var(--u) * 40)); }
  .lema-grande { font-size: max(30px, calc(var(--u) * 38)); }
  .hoja { padding-top: 20px; }
  .campo { margin-bottom: 10px; }
}
@media (max-height: 680px) {
  .cabecera { padding-top: calc(var(--u) * 18); }
  .lema-chico { display: none; }
  .ciudad { min-height: calc(var(--u) * 56); }
  .luna { top: calc(var(--u) * 28); width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
  input[type="text"], input[type="password"], .ver { height: 48px; }
  .ver { width: 48px; }
  .entrar { min-height: 50px; }
}
/* The line under the form (macro legal_footer in _macros.html, ORDER 41): who made the system, the year, the terms.
   casa.css, which has the same classes for the inside, is not loaded here. */
.legal-footer { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #e6dccb; text-align: center;
                font-size: 12.5px; line-height: 1.5; color: var(--apagado); }
.legal-footer p { margin: 0; }
.legal-footer a { color: var(--azul); font-weight: 600; text-decoration: underline; }
@media (max-width: 360px) { .hoja { padding-left: 18px; padding-right: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .estrellas i, .luna::after, .luces i, .auto, .hoja { animation: none !important; }
  .hoja { transform: none; opacity: 1; }
  .luna::after { opacity: .5; }
  .auto { transform: translateX(30vw); }
  .auto.rojo { transform: translateX(70vw); }
  * { transition-duration: .01ms !important; }
}

/* ---- Placement of the scene (generated: buildings, lit windows and stars from the design) ---- */
.lejos i:nth-child(1) { left: calc(50% + var(--u) * -195); width: calc(var(--u) * 60); height: calc(var(--u) * 120); }
.lejos i:nth-child(2) { left: calc(50% + var(--u) * -145); width: calc(var(--u) * 44); height: calc(var(--u) * 160); }
.lejos i:nth-child(3) { left: calc(50% + var(--u) * -105); width: calc(var(--u) * 70); height: calc(var(--u) * 110); }
.lejos i:nth-child(4) { left: calc(50% + var(--u) * -45); width: calc(var(--u) * 40); height: calc(var(--u) * 180); }
.lejos i:nth-child(5) { left: calc(50% + var(--u) * -10); width: calc(var(--u) * 64); height: calc(var(--u) * 135); }
.lejos i:nth-child(6) { left: calc(50% + var(--u) * 50); width: calc(var(--u) * 50); height: calc(var(--u) * 170); }
.lejos i:nth-child(7) { left: calc(50% + var(--u) * 95); width: calc(var(--u) * 56); height: calc(var(--u) * 125); }
.lejos i:nth-child(8) { left: calc(50% + var(--u) * 145); width: calc(var(--u) * 60); height: calc(var(--u) * 150); }
.lejos i:nth-child(9) { left: calc(50% + var(--u) * -585); width: calc(var(--u) * 60); height: calc(var(--u) * 120); }
.lejos i:nth-child(10) { left: calc(50% + var(--u) * -535); width: calc(var(--u) * 44); height: calc(var(--u) * 160); }
.lejos i:nth-child(11) { left: calc(50% + var(--u) * -495); width: calc(var(--u) * 70); height: calc(var(--u) * 110); }
.lejos i:nth-child(12) { left: calc(50% + var(--u) * -435); width: calc(var(--u) * 40); height: calc(var(--u) * 180); }
.lejos i:nth-child(13) { left: calc(50% + var(--u) * -400); width: calc(var(--u) * 64); height: calc(var(--u) * 135); }
.lejos i:nth-child(14) { left: calc(50% + var(--u) * -340); width: calc(var(--u) * 50); height: calc(var(--u) * 170); }
.lejos i:nth-child(15) { left: calc(50% + var(--u) * -295); width: calc(var(--u) * 56); height: calc(var(--u) * 125); }
.lejos i:nth-child(16) { left: calc(50% + var(--u) * -245); width: calc(var(--u) * 60); height: calc(var(--u) * 150); }
.lejos i:nth-child(17) { left: calc(50% + var(--u) * 195); width: calc(var(--u) * 60); height: calc(var(--u) * 120); }
.lejos i:nth-child(18) { left: calc(50% + var(--u) * 245); width: calc(var(--u) * 44); height: calc(var(--u) * 160); }
.lejos i:nth-child(19) { left: calc(50% + var(--u) * 285); width: calc(var(--u) * 70); height: calc(var(--u) * 110); }
.lejos i:nth-child(20) { left: calc(50% + var(--u) * 345); width: calc(var(--u) * 40); height: calc(var(--u) * 180); }
.lejos i:nth-child(21) { left: calc(50% + var(--u) * 380); width: calc(var(--u) * 64); height: calc(var(--u) * 135); }
.lejos i:nth-child(22) { left: calc(50% + var(--u) * 440); width: calc(var(--u) * 50); height: calc(var(--u) * 170); }
.lejos i:nth-child(23) { left: calc(50% + var(--u) * 485); width: calc(var(--u) * 56); height: calc(var(--u) * 125); }
.lejos i:nth-child(24) { left: calc(50% + var(--u) * 535); width: calc(var(--u) * 60); height: calc(var(--u) * 150); }
.cerca i:nth-child(1) { left: calc(50% + var(--u) * -205); width: calc(var(--u) * 70); height: calc(var(--u) * 140); }
.cerca i:nth-child(2) { left: calc(50% + var(--u) * -140); width: calc(var(--u) * 48); height: calc(var(--u) * 205); }
.cerca i:nth-child(3) { left: calc(50% + var(--u) * -95); width: calc(var(--u) * 82); height: calc(var(--u) * 120); }
.cerca i:nth-child(4) { left: calc(50% + var(--u) * -17); width: calc(var(--u) * 56); height: calc(var(--u) * 225); }
.cerca i:nth-child(5) { left: calc(50% + var(--u) * 35); width: calc(var(--u) * 72); height: calc(var(--u) * 150); }
.cerca i:nth-child(6) { left: calc(50% + var(--u) * 103); width: calc(var(--u) * 50); height: calc(var(--u) * 190); }
.cerca i:nth-child(7) { left: calc(50% + var(--u) * 148); width: calc(var(--u) * 60); height: calc(var(--u) * 130); }
.cerca i:nth-child(8) { left: calc(50% + var(--u) * -595); width: calc(var(--u) * 70); height: calc(var(--u) * 140); }
.cerca i:nth-child(9) { left: calc(50% + var(--u) * -530); width: calc(var(--u) * 48); height: calc(var(--u) * 205); }
.cerca i:nth-child(10) { left: calc(50% + var(--u) * -485); width: calc(var(--u) * 82); height: calc(var(--u) * 120); }
.cerca i:nth-child(11) { left: calc(50% + var(--u) * -407); width: calc(var(--u) * 56); height: calc(var(--u) * 225); }
.cerca i:nth-child(12) { left: calc(50% + var(--u) * -355); width: calc(var(--u) * 72); height: calc(var(--u) * 150); }
.cerca i:nth-child(13) { left: calc(50% + var(--u) * -287); width: calc(var(--u) * 50); height: calc(var(--u) * 190); }
.cerca i:nth-child(14) { left: calc(50% + var(--u) * -242); width: calc(var(--u) * 60); height: calc(var(--u) * 130); }
.cerca i:nth-child(15) { left: calc(50% + var(--u) * 185); width: calc(var(--u) * 70); height: calc(var(--u) * 140); }
.cerca i:nth-child(16) { left: calc(50% + var(--u) * 250); width: calc(var(--u) * 48); height: calc(var(--u) * 205); }
.cerca i:nth-child(17) { left: calc(50% + var(--u) * 295); width: calc(var(--u) * 82); height: calc(var(--u) * 120); }
.cerca i:nth-child(18) { left: calc(50% + var(--u) * 373); width: calc(var(--u) * 56); height: calc(var(--u) * 225); }
.cerca i:nth-child(19) { left: calc(50% + var(--u) * 425); width: calc(var(--u) * 72); height: calc(var(--u) * 150); }
.cerca i:nth-child(20) { left: calc(50% + var(--u) * 493); width: calc(var(--u) * 50); height: calc(var(--u) * 190); }
.cerca i:nth-child(21) { left: calc(50% + var(--u) * 538); width: calc(var(--u) * 60); height: calc(var(--u) * 130); }
.luces i:nth-child(1) { box-shadow:
    calc(var(--u) * -182) calc(var(--u) * -20) 0 #ffe2a8,
    calc(var(--u) * -572) calc(var(--u) * -20) 0 #ffe2a8,
    calc(var(--u) * 208) calc(var(--u) * -20) 0 #ffe2a8,
    calc(var(--u) * 22) calc(var(--u) * -107) 0 #ffe2a8,
    calc(var(--u) * -368) calc(var(--u) * -107) 0 #ffe2a8,
    calc(var(--u) * 412) calc(var(--u) * -107) 0 #ffe2a8,
    calc(var(--u) * 198) calc(var(--u) * -108) 0 #ffe2a8,
    calc(var(--u) * -192) calc(var(--u) * -108) 0 #ffe2a8,
    calc(var(--u) * 588) calc(var(--u) * -108) 0 #ffe2a8,
    calc(var(--u) * -72) calc(var(--u) * -88) 0 #ffcf7a,
    calc(var(--u) * -462) calc(var(--u) * -88) 0 #ffcf7a,
    calc(var(--u) * 318) calc(var(--u) * -88) 0 #ffcf7a,
    calc(var(--u) * 124) calc(var(--u) * -114) 0 #ffcf7a,
    calc(var(--u) * -266) calc(var(--u) * -114) 0 #ffcf7a,
    calc(var(--u) * 514) calc(var(--u) * -114) 0 #ffcf7a,
    calc(var(--u) * -127) calc(var(--u) * -31) 0 #ffe2a8,
    calc(var(--u) * -517) calc(var(--u) * -31) 0 #ffe2a8,
    calc(var(--u) * 263) calc(var(--u) * -31) 0 #ffe2a8,
    calc(var(--u) * 96) calc(var(--u) * -98) 0 #ffcf7a,
    calc(var(--u) * -294) calc(var(--u) * -98) 0 #ffcf7a,
    calc(var(--u) * 486) calc(var(--u) * -98) 0 #ffcf7a,
    calc(var(--u) * -168) calc(var(--u) * -49) 0 #ffcf7a,
    calc(var(--u) * -558) calc(var(--u) * -49) 0 #ffcf7a,
    calc(var(--u) * 222) calc(var(--u) * -49) 0 #ffcf7a;
  }
.luces i:nth-child(2) { box-shadow:
    calc(var(--u) * -101) calc(var(--u) * -174) 0 #ffcf7a,
    calc(var(--u) * -491) calc(var(--u) * -174) 0 #ffcf7a,
    calc(var(--u) * 289) calc(var(--u) * -174) 0 #ffcf7a,
    calc(var(--u) * 81) calc(var(--u) * -23) 0 #ffcf7a,
    calc(var(--u) * -309) calc(var(--u) * -23) 0 #ffcf7a,
    calc(var(--u) * 471) calc(var(--u) * -23) 0 #ffcf7a,
    calc(var(--u) * -175) calc(var(--u) * -30) 0 #ffcf7a,
    calc(var(--u) * -565) calc(var(--u) * -30) 0 #ffcf7a,
    calc(var(--u) * 215) calc(var(--u) * -30) 0 #ffcf7a,
    calc(var(--u) * 25) calc(var(--u) * -156) 0 #ffcf7a,
    calc(var(--u) * -365) calc(var(--u) * -156) 0 #ffcf7a,
    calc(var(--u) * 415) calc(var(--u) * -156) 0 #ffcf7a,
    calc(var(--u) * 178) calc(var(--u) * -83) 0 #ffe2a8,
    calc(var(--u) * -212) calc(var(--u) * -83) 0 #ffe2a8,
    calc(var(--u) * 568) calc(var(--u) * -83) 0 #ffe2a8,
    calc(var(--u) * -76) calc(var(--u) * -39) 0 #ffcf7a,
    calc(var(--u) * -466) calc(var(--u) * -39) 0 #ffcf7a,
    calc(var(--u) * 314) calc(var(--u) * -39) 0 #ffcf7a,
    calc(var(--u) * 127) calc(var(--u) * -118) 0 #ffcf7a,
    calc(var(--u) * -263) calc(var(--u) * -118) 0 #ffcf7a,
    calc(var(--u) * 517) calc(var(--u) * -118) 0 #ffcf7a;
  }
.luces i:nth-child(3) { box-shadow:
    calc(var(--u) * -35) calc(var(--u) * -56) 0 #ffe2a8,
    calc(var(--u) * -425) calc(var(--u) * -56) 0 #ffe2a8,
    calc(var(--u) * 355) calc(var(--u) * -56) 0 #ffe2a8,
    calc(var(--u) * 111) calc(var(--u) * -109) 0 #ffcf7a,
    calc(var(--u) * -279) calc(var(--u) * -109) 0 #ffcf7a,
    calc(var(--u) * 501) calc(var(--u) * -109) 0 #ffcf7a,
    calc(var(--u) * -113) calc(var(--u) * -123) 0 #ffcf7a,
    calc(var(--u) * -503) calc(var(--u) * -123) 0 #ffcf7a,
    calc(var(--u) * 277) calc(var(--u) * -123) 0 #ffcf7a,
    calc(var(--u) * 81) calc(var(--u) * -97) 0 #ffcf7a,
    calc(var(--u) * -309) calc(var(--u) * -97) 0 #ffcf7a,
    calc(var(--u) * 471) calc(var(--u) * -97) 0 #ffcf7a,
    calc(var(--u) * -158) calc(var(--u) * -120) 0 #ffcf7a,
    calc(var(--u) * -548) calc(var(--u) * -120) 0 #ffcf7a,
    calc(var(--u) * 232) calc(var(--u) * -120) 0 #ffcf7a,
    calc(var(--u) * 23) calc(var(--u) * -85) 0 #ffe2a8,
    calc(var(--u) * -367) calc(var(--u) * -85) 0 #ffe2a8,
    calc(var(--u) * 413) calc(var(--u) * -85) 0 #ffe2a8,
    calc(var(--u) * 199) calc(var(--u) * -19) 0 #ffcf7a,
    calc(var(--u) * -191) calc(var(--u) * -19) 0 #ffcf7a,
    calc(var(--u) * 589) calc(var(--u) * -19) 0 #ffcf7a;
  }
.estrellas i:nth-child(1) { box-shadow:
    calc(var(--u) * 259) calc(var(--u) * 38.96) 0 rgba(255,255,255,0.67),
    calc(var(--u) * -350.27) calc(var(--u) * 122.89) 0 rgba(255,255,255,0.83),
    calc(var(--u) * -14.18) calc(var(--u) * 203.89) 0 rgba(255,255,255,0.73),
    calc(var(--u) * -368.44) calc(var(--u) * 213.93) 0 rgba(255,255,255,0.97),
    calc(var(--u) * 309.56) calc(var(--u) * 90.12) 0 rgba(255,255,255,0.43),
    calc(var(--u) * 138.63) calc(var(--u) * 171.63) 0 rgba(255,255,255,0.46),
    calc(var(--u) * -193.49) calc(var(--u) * 64.59) 0 rgba(255,255,255,0.54),
    calc(var(--u) * -267.71) calc(var(--u) * 147.72) 0 rgba(255,255,255,0.41),
    calc(var(--u) * 242.22) calc(var(--u) * 203.18) 0 rgba(255,255,255,0.41),
    calc(var(--u) * -363.92) calc(var(--u) * 46.76) 0 rgba(255,255,255,0.56),
    calc(var(--u) * 77.72) calc(var(--u) * 124.85) 0 rgba(255,255,255,0.82),
    calc(var(--u) * -357.79) calc(var(--u) * 134.51) 0 rgba(255,255,255,0.68),
    calc(var(--u) * -202.84) calc(var(--u) * 203.95) 0 rgba(255,255,255,0.41),
    calc(var(--u) * -245.26) calc(var(--u) * 169.73) 0 rgba(255,255,255,0.52),
    calc(var(--u) * 228.68) calc(var(--u) * 89.08) 0 rgba(255,255,255,0.71),
    calc(var(--u) * 30.66) calc(var(--u) * 180.8) 0 rgba(255,255,255,0.72),
    calc(var(--u) * -348.49) calc(var(--u) * 72.89) 0 rgba(255,255,255,0.68),
    calc(var(--u) * -328.48) calc(var(--u) * 253.13) 0 rgba(255,255,255,0.63),
    calc(var(--u) * 60.07) calc(var(--u) * 136.51) 0 rgba(255,255,255,0.51),
    calc(var(--u) * -239.32) calc(var(--u) * 183.09) 0 rgba(255,255,255,0.55);
  }
.estrellas i:nth-child(2) { box-shadow:
    calc(var(--u) * -321.99) calc(var(--u) * 22.17) 0 rgba(255,255,255,0.40),
    calc(var(--u) * 296.29) calc(var(--u) * 151.69) 0 rgba(255,255,255,0.90),
    calc(var(--u) * -42.79) calc(var(--u) * 51.89) 0 rgba(255,255,255,0.79),
    calc(var(--u) * 167.07) calc(var(--u) * 156.61) 0 rgba(255,255,255,0.75),
    calc(var(--u) * 37.1) calc(var(--u) * 98.78) 0 rgba(255,255,255,0.80),
    calc(var(--u) * 342.84) calc(var(--u) * 9.29) 0 rgba(255,255,255,0.73),
    calc(var(--u) * -351.74) calc(var(--u) * 54.8) 0 rgba(255,255,255,0.91),
    calc(var(--u) * -320.79) calc(var(--u) * 89.02) 0 rgba(255,255,255,0.84),
    calc(var(--u) * -214.04) calc(var(--u) * 54.95) 0 rgba(255,255,255,0.41),
    calc(var(--u) * -387.04) calc(var(--u) * 176.25) 0 rgba(255,255,255,0.90),
    calc(var(--u) * -379.13) calc(var(--u) * 52.18) 0 rgba(255,255,255,0.56),
    calc(var(--u) * -190.73) calc(var(--u) * 19.08) 0 rgba(255,255,255,0.61),
    calc(var(--u) * 152.28) calc(var(--u) * 50.4) 0 rgba(255,255,255,0.93),
    calc(var(--u) * -37.18) calc(var(--u) * 194.52) 0 rgba(255,255,255,0.68),
    calc(var(--u) * -375.94) calc(var(--u) * 186.71) 0 rgba(255,255,255,0.49),
    calc(var(--u) * -233.79) calc(var(--u) * 101.73) 0 rgba(255,255,255,0.68),
    calc(var(--u) * 9.1) calc(var(--u) * 237.67) 0 rgba(255,255,255,0.87),
    calc(var(--u) * 23.52) calc(var(--u) * 149.05) 0 rgba(255,255,255,0.89),
    calc(var(--u) * -32.9) calc(var(--u) * 204.74) 0 rgba(255,255,255,0.61),
    calc(var(--u) * -98.38) calc(var(--u) * 126.22) 0 rgba(255,255,255,0.80);
  }
.estrellas i:nth-child(3) { box-shadow:
    calc(var(--u) * -133.13) calc(var(--u) * 139.51) 0 rgba(255,255,255,0.42),
    calc(var(--u) * -310.53) calc(var(--u) * 120.7) 0 rgba(255,255,255,0.94),
    calc(var(--u) * -388.89) calc(var(--u) * 98.87) 0 rgba(255,255,255,0.81),
    calc(var(--u) * 255.85) calc(var(--u) * 46.23) 0 rgba(255,255,255,0.56),
    calc(var(--u) * 117.04) calc(var(--u) * 65.03) 0 rgba(255,255,255,0.50),
    calc(var(--u) * 61.94) calc(var(--u) * 210.8) 0 rgba(255,255,255,0.89),
    calc(var(--u) * 126.13) calc(var(--u) * 192.03) 0 rgba(255,255,255,0.42),
    calc(var(--u) * 37.13) calc(var(--u) * 190.56) 0 rgba(255,255,255,0.76),
    calc(var(--u) * 264.56) calc(var(--u) * 4.52) 0 rgba(255,255,255,0.43),
    calc(var(--u) * 181.84) calc(var(--u) * 204.41) 0 rgba(255,255,255,0.55),
    calc(var(--u) * -376.89) calc(var(--u) * 165.55) 0 rgba(255,255,255,0.52),
    calc(var(--u) * 250.21) calc(var(--u) * 51.13) 0 rgba(255,255,255,0.88),
    calc(var(--u) * -181.59) calc(var(--u) * 177.66) 0 rgba(255,255,255,0.73),
    calc(var(--u) * -124.3) calc(var(--u) * 5.33) 0 rgba(255,255,255,0.44),
    calc(var(--u) * 295.89) calc(var(--u) * 5.8) 0 rgba(255,255,255,0.45),
    calc(var(--u) * -36.96) calc(var(--u) * 192.33) 0 rgba(255,255,255,0.75),
    calc(var(--u) * -278.12) calc(var(--u) * 120.32) 0 rgba(255,255,255,0.52),
    calc(var(--u) * -26.33) calc(var(--u) * 82.98) 0 rgba(255,255,255,0.76),
    calc(var(--u) * 216.67) calc(var(--u) * 231.82) 0 rgba(255,255,255,0.63),
    calc(var(--u) * 246.8) calc(var(--u) * 175.01) 0 rgba(255,255,255,0.42);
  }