/* ===========================================================================
   CÓDIGO DE RIQUEZA · v2 (Figma 147-37 desktop / 147-774 responsive)
   ---------------------------------------------------------------------------
   Esta hoja va SIEMPRE después de cdr.css y solo reescribe lo que cambia en el
   rediseño. La estructura, el JS y los formularios son los mismos que la v1:
   así un arreglo en el flujo de registro vale para las dos versiones.

   Lo que cambia, según el Figma:
     1. El titular pasa de un degradado rojo→blanco a tres colores planos:
        rojo #ff2a3a, blanco y azul #5c7dfd.
     2. Los campos del formulario son grises (#2b2b2b al 80%) con el borde solo
        abajo, en vez de transparentes con borde completo.
     3. En el hero va únicamente el logo de CÓDIGO DE RIQUEZA.
     4. La foto de cabecera de móvil es propia, no la de escritorio recortada.
   ========================================================================== */

/* ------------------------------------------------------------------ TITULAR */
/* Sin background-clip: cada tramo lleva su color. Esto además evita el problema
   de la v1, donde el degradado se repintaba en cada línea del párrafo. */
.v2 .hero-title{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:#fff;
}
.v2 .hero-title .t-rojo{color:#ff2a3a;-webkit-text-fill-color:#ff2a3a}
.v2 .hero-title .t-blanco{color:#fff;-webkit-text-fill-color:#fff}
.v2 .hero-title .t-azul{color:#5c7dfd;-webkit-text-fill-color:#5c7dfd}

/* --------------------------------------------------------------- LOGO SOLO */
.v2 .hero-logos .l-cdr img{width:180px}

/* -------------------------------------------------------------- FORMULARIO */
/* Figma: fondo rgba(43,43,43,.8), desenfoque 6px, borde INFERIOR blanco de
   0.5px y esquinas de 50px. El alto exacto del diseño es 45.53px. */
.v2 .cm-form input[type=text],
.v2 .cm-form input[type=email],
.v2 .cm-form input[type=tel],
.v2 .cm-phone{
  background:rgba(43,43,43,.8);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:0;
  border-bottom:.5px solid #fff;
  border-radius:50px;
  min-height:45.53px;
}
/* el bloque del teléfono ya pinta el borde, así que el input de dentro no lleva
   ninguno (si no, se ve una cápsula dentro de otra) */
.v2 .cm-form .cm-phone input{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  min-height:0;
}
.v2 .cm-form input::placeholder{color:rgba(255,255,255,.8)}
.v2 .cm-form select{color:#fff}

/* ------------------------------------------------------------------ BOTÓN */
/* Figma: cápsula con borde rojo y, dentro, el degradado del botón. */
.v2 .cm-form .btn-red,
.v2 .hero-form .btn-red{
  border:1px solid #ff2a3a;
  background:linear-gradient(217.95deg,#560f15 26.73%,#ff2a3a 94.84%);
  filter:drop-shadow(0 -1px 6.3px #cb1927);
  color:#dadada;
}

/* ------------------------------------------------------------------ MÓVIL */
@media (max-width:760px){
  /* la ceja baja de 52 a 49px */
  .v2 .topbar{min-height:49px}

  /* La cabecera de móvil es una imagen propia (860x1548) pensada para vertical:
     ocupa todo el ancho y el contenido arranca por debajo de la foto, no
     encima. Por eso se quitan el recorte y la máscara de la v1. */
  .v2 .hero-bg{
    position:absolute;inset:auto;top:0;left:0;
    width:100%;height:auto;object-fit:cover;transform:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .v2 .hero::after{
    background:linear-gradient(180deg,transparent 28%,rgba(2,4,10,.55) 38%,#02040a 48%);
  }
  /* El Figma arranca el bloque a 250px de la foto, pero ahi el formulario y el
     aviso de "sin spam" quedaban rozando el borde del primer pantallazo. A
     190px todo el bloque entra con aire de sobra y los logos siguen cayendo en
     la zona ya oscurecida de la foto, asi que no tapan a Sebas. */
  .v2 .hero .wrap{padding-top:190px}
  .v2 .hero{padding-bottom:60px}
  .v2 .hero-col{gap:18px}

  .v2 .hero-logos .l-cdr img{width:150px}
  /* El titular tiene que caber en CUATRO líneas para que el formulario entre en
     el primer pantallazo. A 20px (el valor del Figma) se va a cinco: la fuente
     real pinta más ancho que la maqueta. Atándolo al ancho de la pantalla
     (4.07vw) se queda en cuatro líneas de 360 a 430px, que es el rango de los
     móviles; el tope de 17.5px evita que crezca en pantallas más anchas. */
  .v2 .hero-title,
  .v2.form-inline .hero-title{font-size:clamp(13px,4.07vw,17.5px);text-align:center}

  /* la fila de datos: iconos de 15px y texto de 9px */
  .v2 .hero-meta{font-size:9px;gap:10px}
  .v2 .hero-meta img{width:15px;height:15px}
}

/* --------------------------------------------------------------- ESCRITORIO */
@media (min-width:761px){
  /* El Figma pone el titular a 30px, pero con la fuente real se va a cinco
     líneas en la columna de 590px; a 27px entra en las cuatro del diseño. */
  .v2 .hero-title{font-size:27px}
  .v2 .hero-meta{font-size:11px}
  .v2 .hero-meta img{width:20px;height:20px}
}

/* El hero del Figma mide 872px de alto y está pensado para pantallas de
   1080px. En un portátil, con la barra del navegador, quedan unos 780px
   visibles y el botón de registro caía por debajo del corte. Estas dos reglas
   aprietan el hero según el alto REAL de la ventana, que es lo que manda aquí,
   no el ancho. */
/* La foto de cabecera va CENTRADA. La v1 la ancla a la derecha
   (object-position:center right), que con esta imagen la descuadra: se ve
   desplazada hacia ese lado. La del Figma ya está compuesta con margen a los
   lados para que al recortar no se coma a Sebas. */
@media (min-width:761px){
  .v2 .hero-bg{object-position:center center}
}

@media (min-width:761px) and (max-height:900px){
  .v2 .hero{min-height:0;padding-top:100px;padding-bottom:100px}
}
@media (min-width:761px) and (max-height:800px){
  .v2 .hero{padding-top:70px;padding-bottom:70px}
  .v2 .hero-col{gap:24px}
}

/* --------------------------------------------------- GALERÍA EN MOVIMIENTO */
/* Las dos filas se desplazan solas, una hacia cada lado, en escritorio y en
   móvil. Cada fila lleva el mismo juego de fotos dos veces (lo pone el JS), y
   la animación recorre exactamente un juego: al terminar, la imagen es la misma
   que al empezar, así que el salto no se ve.

   El desplazamiento es `-50% - 10px` y no `-50%` por el hueco entre los dos
   juegos: el track mide 2·juego + 20px de separación, de modo que medio track
   se queda 10px corto de un juego entero. */
.v2 .galeria-fila{overflow:hidden;margin-bottom:20px}
.v2 .galeria-fila:last-child{margin-bottom:0}
.v2 .gal-track{
  --gal-hueco:10px;               /* la mitad de la separación entre juegos */
  display:flex;gap:20px;width:max-content;
  animation:gal-mq 60s linear infinite;
  will-change:transform;
}
.v2 .gal-track.rev{animation-direction:reverse}
.v2 .gal-set{display:flex;gap:20px}
@keyframes gal-mq{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--gal-hueco)))}
}
/* al pasar el ratón se detiene, para poder mirar una foto */
.v2 .galeria:hover .gal-track{animation-play-state:paused}

@media (max-width:760px){
  /* en móvil la v1 se arrastraba con el dedo; aquí va sola, así que no hace
     falta el scroll y además estorbaría a la animación */
  .v2 .galeria-fila{overflow:hidden;gap:12px;margin-bottom:12px}
  .v2 .gal-track{--gal-hueco:6px;gap:12px;animation-duration:38s}
  .v2 .gal-set{gap:12px}
}

/* quien pida menos movimiento en su sistema ve las filas quietas */
@media (prefers-reduced-motion:reduce){
  .v2 .gal-track{animation:none}
}

/* ------------------------------------------- TÍTULOS SIN DEGRADADO (v2) */
/* En la v2 no hay degradados de rojo a blanco en el texto: lo resaltado va en
   rojo plano. Afecta a los títulos de sección y al de "Tu momento es ahora";
   el del hero ya se resuelve arriba, con sus tres tramos de color. */
.v2 .h2 .ac,
.v2 .momento h2 .ac{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:var(--rojo);
  color:var(--rojo);
}