/* ==========================================================================
   Pantalla de carga — Renta Carga
   Motion graphic de ~3 s armado con las capas del logo oficial
   (assets/logo-capas/), los colores de la web y el crédito de ProcesaLab.
   Secuencia: franjas de entrada → trazos de color → logo → servicios → barrido de salida.
   ========================================================================== */

.rc-carga {
  --rc-rojo: #B5141A;
  --rc-coral: #E0322F;
  --rc-azul: #00287A;
  --rc-azul-claro: #1F4FB8;
  --rc-amarillo: #F8DC00;
  --rc-asfalto: #2B2D31;
  --rc-tinta: #141518;
  --rc-ease: cubic-bezier(.2, .8, .2, 1);
  --rc-golpe: cubic-bezier(.34, 1.56, .64, 1);

  position: fixed; inset: 0; z-index: 9999;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden;
  background: #FFFFFF;
  color: var(--rc-tinta);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.rc-cargando { overflow: hidden; }

/* ------------------------------------------------------------------ 1. franjas de entrada */
.rc-entrada { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Ancho justo para cubrir la pantalla con la inclinación de 18° (depende del alto) */
.rc-entrada i, .rc-salida i { left: -30vh; width: calc(100vw + 60vh); }
.rc-entrada i {
  position: absolute; top: -25%; bottom: -25%;
  transform: skewX(-18deg) translateX(0);
  animation: rc-entrada .62s cubic-bezier(.7, 0, .25, 1) both;
}
.rc-entrada i:nth-child(1) { background: var(--rc-azul); animation-delay: .16s; }
.rc-entrada i:nth-child(2) { background: var(--rc-coral); animation-delay: .08s; }
.rc-entrada i:nth-child(3) { background: var(--rc-amarillo); animation-delay: 0s; }
@keyframes rc-entrada { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(105%); } }

/* ------------------------------------------------------------------ 2. trazos de color */
.rc-fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.rc-fondo--v { display: none; }
@media (max-aspect-ratio: 4/5) {
  .rc-fondo--h { display: none; }
  .rc-fondo--v { display: block; }
}
.rc-trazo {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rc-trazar 1.1s cubic-bezier(.6, 0, .2, 1) both;
}
.rc-trazo--azul { stroke: var(--rc-azul); stroke-width: 34; animation-delay: .3s; }
.rc-trazo--azul2 { stroke: var(--rc-azul-claro); stroke-width: 10; animation-delay: .42s; opacity: .55; }
.rc-trazo--rojo { stroke: var(--rc-coral); stroke-width: 26; animation-delay: .38s; }
.rc-trazo--rojo2 { stroke: var(--rc-rojo); stroke-width: 8; animation-delay: .5s; opacity: .6; }
@keyframes rc-trazar { to { stroke-dashoffset: 0; } }

/* carretera con carril amarillo que no deja de correr mientras se espera */
.rc-camino { fill: none; stroke: var(--rc-asfalto); stroke-width: 54; stroke-linecap: butt; opacity: 0;
  animation: rc-fade .5s ease .55s both; }
.rc-carril {
  fill: none; stroke: var(--rc-amarillo); stroke-width: 7;
  stroke-dasharray: 42 30;
  opacity: 0;
  animation: rc-fade .5s ease .6s both, rc-avanzar .9s linear infinite;
}
.rc-orilla { fill: none; stroke: #FFFFFF; stroke-width: 3; opacity: 0; animation: rc-fade .5s ease .6s both; }
@keyframes rc-avanzar { to { stroke-dashoffset: -72; } }
@keyframes rc-fade { to { opacity: 1; } }

/* ------------------------------------------------------------------ 3. logo */
.rc-carga__centro {
  position: relative; z-index: 1;
  display: grid; place-items: center; align-content: center; gap: clamp(18px, 3.2vh, 30px);
  padding: 24px;
}
@keyframes rc-golpe { 0%, 100% { transform: none; } 40% { transform: scale(1.045); } }

.rc-logo {
  position: relative;
  width: clamp(260px, 50vw, 640px);
  aspect-ratio: 1600 / 456;
  animation: rc-golpe .5s var(--rc-golpe) 1.45s;
}
.rc-logo__capa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; max-width: none; user-select: none; pointer-events: none;
}
.rc-logo__renta { animation: rc-subir .5s var(--rc-ease) .38s both; }
.rc-logo__carga { animation: rc-derecha .5s var(--rc-ease) .48s both; }
.rc-logo__camino {
  -webkit-mask: linear-gradient(to bottom, #000 44%, transparent 56%) 0 100% / 100% 230% no-repeat;
          mask: linear-gradient(to bottom, #000 44%, transparent 56%) 0 100% / 100% 230% no-repeat;
  animation: rc-pavimentar .65s cubic-bezier(.5, 0, .25, 1) .68s both;
}
.rc-logo__flecha {
  -webkit-mask: linear-gradient(to bottom left, #000 44%, transparent 56%) 0 100% / 230% 230% no-repeat;
          mask: linear-gradient(to bottom left, #000 44%, transparent 56%) 0 100% / 230% 230% no-repeat;
  animation: rc-flecha .6s var(--rc-ease) .9s both;
}
.rc-logo__sa { animation: rc-subir .45s var(--rc-ease) 1.1s both; }
.rc-logo__lema { animation: rc-subir .45s var(--rc-ease) 1.18s both; }
.rc-logo__brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 48%, transparent 61%) -120% 0 / 60% 100% no-repeat;
  -webkit-mask: url("../assets/logo-rentacarga.webp") center / 100% 100% no-repeat;
          mask: url("../assets/logo-rentacarga.webp") center / 100% 100% no-repeat;
  animation: rc-brillo .8s ease-in-out 1.55s both;
}

@keyframes rc-subir { from { opacity: 0; transform: translateY(16%); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rc-derecha { from { opacity: 0; transform: translateX(8%); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rc-pavimentar { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes rc-flecha {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: translate(3%, -5%); }
  to   { -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: none; }
}
@keyframes rc-brillo { from { background-position: -120% 0; } to { background-position: 220% 0; } }

/* ------------------------------------------------------------------ 4. servicios */
.rc-servicios { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rc-servicios li {
  padding: 8px 16px; border-radius: 999px;
  font-size: clamp(12.5px, 1.25vw, 16px); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: #FFFFFF;
  box-shadow: 0 10px 24px -12px rgba(20, 21, 24, .5);
  animation: rc-chip .45s var(--rc-golpe) both;
}
.rc-servicios li:nth-child(1) { background: var(--rc-coral); animation-delay: 1.5s; }
.rc-servicios li:nth-child(2) { background: var(--rc-azul); animation-delay: 1.6s; }
.rc-servicios li:nth-child(3) { background: var(--rc-amarillo); color: var(--rc-tinta); animation-delay: 1.7s; }
@keyframes rc-chip { from { opacity: 0; transform: translateY(12px) scale(.7); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ crédito ProcesaLab */
.rc-carga__credito {
  position: relative; z-index: 1;
  justify-self: center;
  margin: 0 16px max(18px, env(safe-area-inset-bottom));
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font-size: 12.5px; color: #5B6068;
  animation: rc-chip .5s var(--rc-ease) 1.3s both;
}
.rc-carga .pl-logo { font-size: 15px; }

/* ------------------------------------------------------------------ 5. salida: barrido de franjas */
.rc-salida { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rc-salida i {
  position: absolute; top: -25%; bottom: -25%;
  transform: skewX(-18deg) translateX(-110%);
}
.rc-salida i:nth-child(1) { background: var(--rc-amarillo); }
.rc-salida i:nth-child(2) { background: var(--rc-coral); }
.rc-salida i:nth-child(3) { background: var(--rc-azul); }

.rc-carga.rc-sale { background: transparent; transition: background 0s linear .4s; pointer-events: none; }
.rc-carga.rc-sale > :not(.rc-salida) { visibility: hidden; transition: visibility 0s linear .4s; }
.rc-carga.rc-sale .rc-salida i { animation: rc-barrer .9s cubic-bezier(.55, 0, .35, 1) both; }
.rc-carga.rc-sale .rc-salida i:nth-child(2) { animation-delay: .07s; }
.rc-carga.rc-sale .rc-salida i:nth-child(3) { animation-delay: .14s; }
@keyframes rc-barrer {
  0%   { transform: skewX(-18deg) translateX(-110%); }
  44%, 47% { transform: skewX(-18deg) translateX(0); }
  100% { transform: skewX(-18deg) translateX(110%); }
}

/* ------------------------------------------------------------------ movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .rc-carga, .rc-carga * { animation: none !important; }
  .rc-entrada, .rc-salida, .rc-logo__brillo { display: none; }
  .rc-logo__camino, .rc-logo__flecha { -webkit-mask: none; mask: none; }
  .rc-trazo { stroke-dashoffset: 0; }
  .rc-camino, .rc-carril, .rc-orilla { opacity: 1; }
  .rc-carga { transition: opacity .4s ease; }
  .rc-carga.rc-sale { opacity: 0; background: #FFFFFF; }
  .rc-carga.rc-sale > :not(.rc-salida) { visibility: visible; }
}

@media (max-width: 640px) {
  .rc-logo { width: 80vw; }
}
.rc-fondo--v .rc-trazo--azul { stroke-width: 22; }
.rc-fondo--v .rc-trazo--azul2 { stroke-width: 7; }
.rc-fondo--v .rc-trazo--rojo { stroke-width: 17; }
.rc-fondo--v .rc-trazo--rojo2 { stroke-width: 6; }
.rc-fondo--v .rc-camino { stroke-width: 40; }
.rc-fondo--v .rc-carril { stroke-width: 5; stroke-dasharray: 30 22; }

.rc-carga .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Crédito «Diseño y desarrollo: ProcesaLab» (paquete oficial de ProcesaLab).
   No cambiar proporciones: solo font-size en .pl-logo.
   ========================================================================== */
.pl-credito a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; color: inherit; text-decoration: none; }
.pl-logo { display: inline-flex; align-items: center; gap: .46em; font-size: 11px; opacity: .78; transition: opacity .2s; }
.pl-credito a:hover .pl-logo { opacity: 1; }
.pl-credito .pl-logo img { display: block; flex: none; width: auto; max-width: none; height: 1em; }
.pl-credito .pl-logo .pl-engrane { height: 1.43em; animation: plEngrane 9s linear infinite; }
@keyframes plEngrane { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl-credito .pl-logo .pl-engrane { animation: none; } }

.rc-carga[hidden]{display:none}