/* ===========================================================
   REGALAZO — estilos compartidos
   Paleta: rojo #fe3c52 · tinta #111113 · papel #fbfaf7
   Tipografías: Montserrat (display/body) + JetBrains Mono (etiquetas)
   =========================================================== */

html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; color: #111113; background: #fbfaf7; }
::selection { background: #fe3c52; color: #fff; }

/* Utilidades tipográficas */
.mono { font-family: 'JetBrains Mono', monospace; }
.lbl  { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 500; }
.display { letter-spacing: -.035em; line-height: .92; }

/* Firma: marcas de recorte (crop marks) */
.rg-crop { position: relative; }
.rg-crop::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none; color: inherit; opacity: .28;
  background:
    linear-gradient(currentColor,currentColor) 0 0/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/1.5px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/1.5px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/1.5px 13px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/1.5px 13px no-repeat;
}
.rg-area { border: 1.5px dashed #fe3c52; border-radius: 7px; }

/* Reveal al hacer scroll */
.rg-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,.84,.34,1); }
.rg-in { opacity: 1; transform: none; }

/* Elevación / profundidad */
.rg-elev    { box-shadow: 0 2px 6px rgba(17,17,19,.05), 0 18px 40px -22px rgba(17,17,19,.20); }
.rg-elev-lg { box-shadow: 0 4px 10px rgba(17,17,19,.05), 0 34px 64px -30px rgba(17,17,19,.30); }
.rg-elev-xl { box-shadow: 0 12px 26px rgba(0,0,0,.16), 0 54px 92px -40px rgba(0,0,0,.52); }

/* Tarjetas */
.rg-card { transition: transform .4s cubic-bezier(.16,.84,.34,1), border-color .3s, box-shadow .4s;
           box-shadow: 0 1px 3px rgba(17,17,19,.04), 0 16px 36px -24px rgba(17,17,19,.18); }
.rg-card:hover { transform: translateY(-5px); border-color: rgba(17,17,19,.22);
                 box-shadow: 0 30px 60px -34px rgba(17,17,19,.40); }

/* Filas editoriales (categorías / valores) */
.rg-row { transition: padding-left .35s cubic-bezier(.16,.84,.34,1); }
.rg-row:hover { padding-left: .5rem; }
.rg-row:hover .rg-rowname { color: #fe3c52; }
.rg-row:hover .rg-rowarrow { transform: translateX(6px); color: #fe3c52; }
.rg-rowarrow { transition: transform .35s, color .3s; }
.rg-rowname { transition: color .3s; }

/* Header */
header.rg-scrolled { background: rgba(251,250,247,.82); backdrop-filter: saturate(180%) blur(14px); border-color: rgba(17,17,19,.10); }

/* Scrollbar oculto en chips */
.rg-noscroll { scrollbar-width: none; }
.rg-noscroll::-webkit-scrollbar { display: none; }

/* Drawer del cotizador */
.rg-drawer { transition: transform .45s cubic-bezier(.16,.84,.34,1); }

/* Marquees */
.rg-marquee { display: flex; width: max-content; animation: marq 34s linear infinite; }
@keyframes marq { to { transform: translateX(-50%); } }
.rg-stroke { color: transparent; -webkit-text-stroke: 1.4px #111113; }

/* Carrusel de clientes (dos filas opuestas, gris -> color en hover) */
.clients-mask { -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
                        mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.clients-track { display: flex; width: max-content; gap: 3.5rem; align-items: center; animation: marq 40s linear infinite; }
.clients-track.rev { animation-direction: reverse; animation-duration: 52s; }
.clients-mask:hover .clients-track { animation-play-state: paused; }
.client { display: inline-flex; align-items: center; gap: .55rem; height: 38px;
          filter: grayscale(1); opacity: .55; transition: filter .4s ease, opacity .4s ease; white-space: nowrap; }
.client:hover { filter: grayscale(0); opacity: 1; }
.client img { height: 38px; width: auto; flex: none; object-fit: contain; }
.client svg { height: 30px; width: auto; flex: none; }
.client .cname { font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }

/* Flotación sutil */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.rg-floaty { animation: floaty 6s ease-in-out infinite; }

/* Botón alto consistente */
.h13 { height: 3.25rem; }

/* Foco accesible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid #fe3c52; outline-offset: 2px;
}

/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rg-reveal { opacity: 1; transform: none; }
  .rg-marquee, .clients-track { animation: none !important; }
}