/* ============================================================
   MODERNO — capa 3D, logo, cinta, grano y micro-interacciones
   Se carga DESPUES de los otros css, asi puede ajustar lo anterior.
   ============================================================ */

/* ==================== LIENZO 3D DE LA PORTADA ==================== */

#hero-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1400ms ease;
  pointer-events: none;
}

#hero-3d.listo { opacity: 1; }

/* Velo entre los lingotes y el texto, para que el titulo se lea siempre */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(8, 8, 10, 0.94) 0%, rgba(8, 8, 10, 0.78) 38%, rgba(8, 8, 10, 0.15) 68%, transparent 100%),
    linear-gradient(0deg, var(--negro) 2%, transparent 32%);
}

.hero__inner { z-index: 2; }
.hero__scroll { z-index: 3; }

@media (max-width: 900px) {
  /* En celular el texto ocupa todo: el velo tapa mas para no competir */
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(8, 8, 10, 0.86) 0%, rgba(8, 8, 10, 0.62) 45%, rgba(8, 8, 10, 0.9) 100%),
      linear-gradient(0deg, var(--negro) 2%, transparent 30%);
  }
}

/* ==================== EL PRECIO EN LA PORTADA ====================
   Es lo primero que se ve. Publicar el valor de entrada, sin obligar
   a nadie a ir al local para enterarse, es la senal de confianza mas
   fuerte que tiene el negocio: por eso ocupa este lugar.
=================================================================== */

.hero__cotiz {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 1.35rem 1.9rem 1.2rem;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(212, 175, 55, 0.16), transparent 70%),
    rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  min-height: 150px;
}

.hero__cotiz p { margin: 0; }

.hero__cotiz-cargando {
  color: var(--texto-tenue);
  font-size: 0.9rem;
  padding-block: 2.4rem;
}

.hero__cotiz-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 0.55rem !important;
}

.hero__cotiz-linea {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.7rem !important;
}

.hero__cotiz-concepto {
  font-family: var(--font-titulo);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--texto);
  line-height: 1;
}

.hero__cotiz-monto {
  font-family: var(--font-titulo);
  font-size: clamp(2.9rem, 6.4vw, 4.4rem);
  font-weight: 600;
  line-height: 0.95;
  background: var(--oro-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--oro);
}

.hero__cotiz-consultar {
  font-family: var(--font-titulo);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  color: var(--oro-claro);
  line-height: 1.1;
}

.hero__cotiz-pie {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.hero__aviso {
  max-width: 560px;
  margin-bottom: 2.2rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(212, 175, 55, 0.4);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

@media (max-width: 640px) {
  .hero__cotiz {
    display: block;
    width: 100%;
    padding: 1.15rem 1.25rem 1rem;
  }
}

/* ==================== GRANO ====================
   Una capa de ruido casi imperceptible sobre todo el sitio.
   Rompe el degradado plano y le saca el aspecto "plantilla".
   Es un SVG inline: no descarga ninguna imagen.
================================================== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ==================== LOGO ====================
   Si existe assets/img/logo.png, ui.js muestra la imagen y esconde
   la marca tipografica. Si no, queda la tipografica.
================================================ */

.logo__img {
  height: 54px;
  width: auto;
  display: block;
  transition: height var(--trans);

  /* El logo viene en JPG con fondo negro (no tiene transparencia).
     Con "lighten" los pixeles negros dejan pasar el fondo del sitio.
     El problema es que el negro del JPG no es negro puro (la compresion
     lo deja en un gris muy oscuro), asi que quedaba un recuadro visible.
     El "contrast" empuja esos grises a negro real antes de mezclar.

     Con un PNG de fondo transparente nada de esto haria falta. */
  mix-blend-mode: lighten;
  filter: contrast(1.35) brightness(0.96);
}

/* Mientras no se sepa si el archivo existe, la imagen va oculta.
   Sin esta regla, el "display: block" de arriba le gana al atributo
   hidden y se ve el icono de imagen rota. */
.logo__img[hidden] { display: none; }

.header.compacto .logo__img { height: 42px; }

.logo--con-imagen .logo__marca,
.logo--con-imagen .logo__texto { display: none; }

.footer .logo__img { height: 88px; }

@media (max-width: 640px) {
  .logo__img { height: 38px; }
  .header.compacto .logo__img { height: 32px; }
}

/* ==================== CINTA DE CIUDADES ==================== */

.cinta {
  overflow: hidden;
  padding-block: clamp(1.6rem, 4vw, 2.6rem);
  border-block: 1px solid var(--borde-suave);
  background: var(--negro);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.cinta__pista {
  display: flex;
  width: max-content;
  animation: correr 34s linear infinite;
}

.cinta__grupo {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  flex: none;
}

.cinta__grupo span {
  font-family: var(--font-titulo);
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, 0.55);
  white-space: nowrap;
  transition: -webkit-text-stroke-color var(--trans), color var(--trans);
}

.cinta:hover .cinta__grupo span {
  -webkit-text-stroke-color: rgba(212, 175, 55, 0.9);
}

.cinta__grupo i {
  font-style: normal;
  font-size: 0.65rem;
  color: var(--oro);
  opacity: 0.55;
}

@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cinta:hover .cinta__pista { animation-play-state: paused; }

/* ==================== BRILLO QUE SIGUE AL CURSOR ====================
   ui.js escribe --mx / --my con la posicion del mouse dentro de la
   tarjeta. Acá solo se pinta el resplandor.
====================================================================== */

.card,
.paso {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.card::before,
.paso::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms ease;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(212, 175, 55, 0.14),
    transparent 68%
  );
}

.card:hover::before,
.paso:hover::before { opacity: 1; }

/* ==================== TITULOS MAS ACTUALES ==================== */

h1, h2 { letter-spacing: -0.015em; }

.hero h1 {
  font-size: clamp(2.9rem, 7.2vw, 5.6rem);
  line-height: 1.02;
}

/* La etiqueta de seccion, sin los guioncitos a los costados:
   se cambia por un punto, que envejece mucho menos. */
.etiqueta::before,
.etiqueta::after { display: none; }

.etiqueta {
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.05);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.etiqueta::before {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--oro);
  flex: none;
}

/* ==================== BOTONES ==================== */

.btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}

/* Reflejo que cruza el boton dorado al pasar el mouse */
.btn--oro::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transition: transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn--oro:hover::after { transform: translateX(120%) skewX(-18deg); }

.btn--oro > * { position: relative; z-index: 1; }

/* ==================== EL PRECIO ==================== */

/* El numero grande, respirando muy despacio */
.hero__cotiz-monto {
  animation: respirar 5.5s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0)); }
  50%      { filter: drop-shadow(0 6px 26px rgba(212, 175, 55, 0.32)); }
}

/* ==================== TARJETAS Y BORDES ==================== */

.card,
.paso,
.local,
.locales__mapa,
.nosotros__visual { border-radius: 14px; }

.card:hover,
.paso:hover { border-color: rgba(212, 175, 55, 0.32); }

/* ==================== REVEAL MAS FINO ==================== */

.reveal {
  transform: translateY(22px);
  filter: blur(6px);
  transition:
    opacity 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 800ms ease;
}

.reveal.visible { filter: none; }

/* En pantallas bajas el "Deslizá" se le monta a los numeros */
@media (max-height: 780px) {
  .hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; }
  .cinta__pista { animation: none; }
  .hero__cotiz-monto { animation: none; }
  body::after { display: none; }
}