/* ==========================================================================
   Portada nueva de Flowvex — cabecera y heroe
   Medidas copiadas de la referencia (payloadcms.com moldeado), a 1440 px:
     rejilla de 16 columnas de 82 px, margen lateral 64 px, ancho util 1312 px
     cabecera 76 px de alto
     heroe: fila de 675 px, texto centrado, franja de 224 px
   Nada de aqui es codigo ajeno: son numeros medidos y reglas escritas aqui.
   ========================================================================== */

:root {
  --gutter: 64px;
  --col: calc((100vw - var(--gutter) * 2) / 16);
  --tinta: #f3f3f3;
  --tinta-suave: rgba(243, 243, 243, .62);
  --linea: rgba(255, 255, 255, .125);
  --fondo: #050505;
  --vino: #7A1E34;
  --vino-hondo: #4A0D1D;
  /* color de la pantalla de entrada de Flowvex (el de la app: app/css/app.css
     usa #24070D; el valor bueno es este) */
  --entrada: #25080B;
  --entrada-sombra: rgba(37, 8, 11, .62);
  --sans: "Plus Jakarta Sans", -apple-system, "system-ui", "Segoe UI", sans-serif;
  --titular: "Space Grotesk", -apple-system, "system-ui", "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tinta-tenue: rgba(243, 243, 243, .34);
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ========================== FONDO ========================================
   El video de fondo de la referencia (1440x900, object-fit cover, entrada de
   opacidad en 2 s). Es el suyo, esta en la carpeta; ver aviso de licencia.
   ========================================================================= */

.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  animation: aparece 2s ease-in-out both;
}

.fondo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* grano de pelicula: hecho aqui con ruido fractal, sin copiar el suyo (noise.png) */
.grano {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* la rejilla: 16 columnas sin hueco, igual que la referencia */
.rej {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================ CABECERA (76 px) ============================ */

.cab {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 76px;
  background: rgba(5, 5, 5, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cab .rej { height: 76px; align-items: center; }

.cab-logo {
  grid-column: 1 / span 4;
  justify-self: start;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
}

.cab-logo-marca { display: block; }

.cab-logo-txt {
  font: 700 17px/1 var(--sans);
  letter-spacing: -.02em;
}

.cab-menu {
  grid-column: 5 / span 8;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
}

.cab-menu a {
  display: flex;
  align-items: center;
  height: 76px;
  font: 400 16px/1 var(--sans);
  color: var(--tinta);
  text-decoration: none;
  transition: opacity .16s ease;
}

.cab-menu a:hover { opacity: .68; }

.cab-acciones {
  grid-column: 13 / span 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  height: 76px;
  padding-right: 40px;
}

.cab-entrar {
  font: 400 15px/18px var(--sans);
  color: var(--tinta);
  text-decoration: none;
  transition: opacity .16s ease;
}

.cab-entrar:hover { opacity: .68; }

.cab-cta {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--entrada);
  border-radius: 4px;
  background: var(--entrada);
  color: var(--tinta);
  font: 400 15px/18px var(--sans);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 24px var(--entrada-sombra);
  transition: box-shadow .22s ease, transform .22s ease;
}

.cab-cta:hover {
  box-shadow: 0 10px 32px rgba(37, 8, 11, .78);
  transform: translateY(-1px);
}

/* ============================== HEROE ==================================== */

.heroe {
  position: relative;
  padding: 64px 0;
}

/* las 5 lineas verticales de 1 px, en los bordes de columna (cada 4 columnas),
   con el degradado que las apaga por arriba */
.lineas {
  position: absolute;
  inset: 0;
  max-width: 1440px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 0;
}

.lineas span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(rgba(0, 0, 0, 0) 80px, var(--linea) 240px);
}

.lineas span:nth-child(1) { left: var(--gutter); }
.lineas span:nth-child(2) { left: calc(25% + var(--gutter) / 2); }
.lineas span:nth-child(3) { left: 50%; }
.lineas span:nth-child(4) { left: calc(75% - var(--gutter) / 2); }
.lineas span:nth-child(5) { right: var(--gutter); }

.heroe-fila {
  position: relative;
  z-index: 1;
  min-height: 675px;
  align-items: center;
  /* Todo el contenido del heroe (titular, botones, las dos capturas y el movil)
     bajado 60 px = 20% del alto del bloque de texto (298 px). Se hace con un
     solo desplazamiento sobre la fila entera para que la composicion no se
     desmonte, y sin tocar el alto de la fila ni las lineas verticales, que son
     medidas de la referencia. */
  transform: translateY(60px);
}

.heroe-texto {
  grid-column: 1 / span 4;
  --col: calc(100% / 4);
}

/* el titular ocupa 6 columnas aunque su columna sea de 4: es asi en la
   referencia, donde desborda la columna por la derecha (328 -> 492) */
h1 {
  margin: 0;
  width: calc(var(--col) * 6);
  font-family: var(--titular);
  font-weight: 600;
  font-size: clamp(56px, 5.28vw, 76px);
  line-height: .98;
  letter-spacing: -.028em;
  color: #fff;
  text-shadow: 0 10px 50px rgba(0, 0, 0, .8);
}

/* segunda linea del titular: degradado de la portada original */
h1 .gt {
  background: linear-gradient(102deg, #F6F1F1 0%, #F3F3F3 25%, #B7A3A8 49%, #7A1E34 75%, #4A0D1D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.heroe-botones {
  margin-top: 32px;
  width: 100%;
}

.fila-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 69px;
  border-top: 1px solid var(--linea);
  color: #fff;
  text-decoration: none;
}

/* Efecto del raton, medido en la referencia: dos capas blancas que entran,
   una desde arriba y otra desde abajo, en 0,45 s con la curva
   cubic-bezier(.165,.84,.44,1); la de abajo entra 0,15 s mas tarde. Mientras
   entran van un poco inclinadas (3 grados medidos a mitad de camino) y acaban
   rectas. El texto y la flecha pasan de blanco a negro en 0,55 s. */
.fila-capa { position: absolute; inset: 0; overflow: hidden; }

.fila-capa i {
  display: block;
  width: 100%;
  height: 100%;
  /* el relleno ya no es blanco: es el color de la pantalla de entrada */
  background: var(--entrada);
  transform: translateY(-100%) rotate(3deg);
  transition: transform .45s cubic-bezier(.165, .84, .44, 1);
}

.fila-capa:nth-child(2) i {
  transform: translateY(100%) rotate(-3deg);
  transition-delay: .15s;
}

.fila-btn:hover .fila-capa i { transform: translateY(0) rotate(0deg); }

.fila-btn-txt {
  position: relative;
  z-index: 1;
  font: 400 16px/20px var(--sans);
  transition: color .55s cubic-bezier(.165, .84, .44, 1);
}

.fila-btn-ico {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  transition: color .55s cubic-bezier(.165, .84, .44, 1);
}

.fila-btn:hover .fila-btn-txt,
.fila-btn:hover .fila-btn-ico { color: var(--tinta); }

/* ============ PANEL DEL HEROE: la pila de capturas ========================
   Medido en la referencia: la pila mide 1148x656 desde x638 (la columna 8),
   con dos ventanas de 902 px de ancho que se salen por la derecha y el borde
   de la pantalla las corta. Cada ventana lleva 5 px de marco (imagen dentro),
   radio 8, blur(32px) detras y sombra 0 0 4px rgba(0,0,0,.5) en la imagen.
   Ventana 1: +246 px a la derecha, arriba del todo, entrada 2 s con 0,5 s de
   retardo. Ventana 2: alineada a la izquierda, +39 px abajo, entrada 3 s con
   1 s de retardo. Las dos terminan su entrada y se quedan.
   ========================================================================= */

.heroe-panel {
  position: relative;
  grid-column: 8 / span 8;
  height: 656px;
  z-index: 2;
}

.pila {
  position: relative;
  width: 1148px;
  height: 656px;
}

.ventana {
  position: absolute;
  margin: 0;
  padding: 5px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 48px 64px 16px rgba(0, 0, 0, .5);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  animation: entra-arriba 2s linear .5s both;
}

.ventana img {
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .5);
}

/* la captura 1 va ENCIMA (z 1) y la 2 DEBAJO (z 0): asi esta en la referencia */
.ventana.v1 { left: 246px; top: 0; z-index: 1; }

.ventana.v2 {
  left: 0;
  top: 37px;
  z-index: 0;
  animation-duration: 3s;
  animation-delay: 1s;
}

@keyframes entra-arriba {
  from { opacity: 0; transform: translateY(64px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* El movil. Viene de "Mockup movil.png" (385x750), recortado a 372x750: se
   quitaron 6 px de fondo por la izquierda y 7 por la derecha y se dejo
   transparente todo lo de fuera del telefono (esquinas redondeadas incluidas).
   Puesto en el hueco libre de la izquierda de la captura 2: el titular acaba en
   x445, los botones en x392 y la franja empieza en y999. El movil (250x504)
   ocupa x532..782 por y379..883: pisa 144 px del borde izquierdo de la captura,
   sale 78 px por debajo de ella y deja 87 px de aire con el titular, 140 con
   los botones y 116 con la franja. Entra despues de las dos capturas (1,5 s mas
   tarde), con la misma subida de 64 px. */
.movil {
  position: absolute;
  left: -106px;
  top: 229px;
  z-index: 3;
  height: 504px;
  width: auto;
  filter: drop-shadow(0 32px 56px rgba(0, 0, 0, .55));
  animation: entra-arriba 3s linear 1.5s both;
}

/* ================== INTERCAMBIO INFINITO DE CAPTURAS =====================
   Caja de 984x654 desde x720 (la columna 9), tambien cortada por la derecha.
   Bucle de 8 s sin fin: 3,4 s cada captura y 0,64 s de cruce de opacidad.
   ========================================================================= */

.franja {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 96px auto 0;
  padding: 0 var(--gutter);
  height: 224px;
  display: flex;
  align-items: center;
}

.franja p {
  margin: 0;
  max-width: 620px;
  font: 400 16px/1.5 var(--sans);
  color: var(--tinta-suave);
}

/* ===================== SECCIONES DE ABAJO (02 a 09) ====================== */

/* Cada seccion: rail a la izquierda (4 columnas) y contenido desde la 5.
   El fondo es opaco a proposito: el video esta fijo a la ventana, y sin esto
   seguiria moviendose detras del texto de toda la pagina.
   Las cinco lineas del hero siguen bajando por toda la pagina: el patron
   repite cada 328 px, que es justo lo que las separa arriba. */
.bloque { position: relative; z-index: 1; border-top: 1px solid var(--linea); background: var(--fondo); }
.bloque::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, transparent 0 327px, rgba(255, 255, 255, .07) 327px 328px);
  background-position: 64px 0;
}
.bloque-fila {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 76px var(--gutter) 84px;
}
.etq { grid-column: 1 / span 4; padding-right: 40px; }
.etq-nom {
  display: block;
  font: 400 12px/1.4 var(--mono);
  color: var(--tinta-tenue);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.etq-txt { margin: 16px 0 0; font: 400 13px/1.6 var(--sans); color: var(--tinta-tenue); }
.cuerpo { grid-column: 5 / span 12; }

.titulo {
  margin: 0 0 16px;
  font-family: var(--titular);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -.028em;
  color: #fff;
}
.gt {
  background: linear-gradient(102deg, #F6F1F1 0%, #F3F3F3 25%, #B7A3A8 49%, #7A1E34 75%, #4A0D1D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub { margin: 0 0 40px; max-width: 60ch; font: 400 17px/1.55 var(--sans); color: var(--tinta-suave); }
.falta { margin: 26px 0 0; font: 400 12px/1.7 var(--mono); color: var(--tinta-tenue); }

/* 02 - en corto */
.datos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); }
.dato { padding: 30px 26px 0 0; border-right: 1px solid var(--linea); }
.dato:last-child { border-right: 0; }
.dato b {
  display: block;
  font-family: var(--titular);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}
.dato span { font: 400 13px/1.5 var(--sans); color: var(--tinta-tenue); }

/* 03 - el problema */
.sueltas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.suelta {
  height: 104px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: rgba(255, 255, 255, .02);
  font: 400 12px/1.3 var(--mono);
  color: var(--tinta-tenue);
}
.junta { display: flex; flex-direction: column; align-items: center; margin-top: 36px; }
.junta i { display: block; width: 1px; height: 44px; background: var(--linea); }
.junta b {
  padding: 15px 28px;
  border: 1px solid var(--entrada);
  background: rgba(37, 8, 11, .5);
  border-radius: 6px;
  font: 600 18px/1 var(--titular);
  letter-spacing: -.02em;
}

/* 04 - un dia */
.dia { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); }
.hora { padding: 24px 22px 0 0; border-right: 1px solid var(--linea); }
.hora:last-child { border-right: 0; padding-right: 0; }
.hora i {
  display: block;
  font: 400 12px/1 var(--mono);
  color: var(--tinta-tenue);
  font-style: normal;
  margin-bottom: 16px;
}
.hora strong { display: block; font: 500 16px/1.4 var(--sans); margin-bottom: 18px; }
.hora img { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 8px; }
.sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 190px;
  padding: 12px;
  background: rgba(255, 255, 255, .02);
  border: 1px dashed var(--linea);
  border-radius: 8px;
  font: 400 11px/1.5 var(--mono);
  color: var(--tinta-tenue);
}

/* 05 - modulos */
.modulos { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--linea); }
.mod { padding: 24px 22px 30px 0; border-right: 1px solid var(--linea); }
.mod:last-child { border-right: 0; padding-right: 0; }
.mod strong { display: block; font: 600 18px/1.2 var(--titular); letter-spacing: -.02em; margin-bottom: 10px; }
.mod span { display: block; font: 400 13px/1.55 var(--sans); color: var(--tinta-tenue); }

/* 06 - comparativa */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 16px; border-bottom: 1px solid var(--linea); }
.tabla thead th {
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-tenue);
}
.tabla thead th:last-child { color: var(--tinta); }
.tabla td { font: 400 14px/1.5 var(--sans); }
.tabla td:first-child { color: var(--tinta-suave); }
.tabla td:last-child { color: var(--tinta); }

/* 07 - precio */
.precio { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.tarjeta {
  padding: 30px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(37, 8, 11, .55), rgba(5, 5, 5, 0));
}
.tarjeta b {
  display: block;
  font-family: var(--titular);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.03em;
}
.tarjeta ul { margin: 22px 0 0; padding: 0; list-style: none; font: 400 14px/1.5 var(--sans); color: var(--tinta-suave); }
.tarjeta li { padding: 11px 0; border-top: 1px solid var(--linea); }
.cuenta { padding: 30px; border: 1px solid var(--linea); border-radius: 8px; }
.cuenta div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
  font: 400 14px/1.5 var(--sans);
  color: var(--tinta-suave);
}
.cuenta div:last-child { border-bottom: 0; color: var(--tinta); font-weight: 600; }

/* 08 - preguntas */
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer;
  padding: 20px 0;
  font: 500 16px/1.4 var(--sans);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 16px/1 var(--mono); color: var(--tinta-tenue); }
.faq details[open] summary::after { content: "-"; }
.faq p { margin: 0 0 22px; max-width: 66ch; font: 400 15px/1.6 var(--sans); color: var(--tinta-suave); }

/* 09 - cierre y pie */
.cierre-tit { font-size: 64px; margin-bottom: 32px; }
.cierre-botones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cierre-botones .cab-cta { height: auto; padding: 13px 20px; font-size: 15px; }
.pie { position: relative; z-index: 1; border-top: 1px solid var(--linea); }
.pie .rej { padding: 36px var(--gutter) 64px; }
.pie-logo { grid-column: 1 / span 4; font: 600 15px/1 var(--sans); }
.pie-col { grid-column: span 4; }
.pie-col a { display: block; padding: 6px 0; font: 400 13px/1.4 var(--sans); color: var(--tinta-tenue); text-decoration: none; }
.pie-col a:hover { opacity: .68; }
.pie-col a:first-child { color: var(--tinta-suave); }
.pie-legal { grid-column: span 4; text-align: right; font: 400 13px/1.6 var(--sans); color: var(--tinta-tenue); }

/* ============================== MOVIL ==================================== */

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  .cab-menu { display: none; }

  .cab-logo { grid-column: 1 / span 8; }

  .cab-acciones { grid-column: 9 / span 8; justify-content: flex-end; gap: 14px; padding-right: 0; }

  .lineas span:nth-child(2), .lineas span:nth-child(4) { display: none; }

  .heroe { padding: 28px 0 40px; }

  .heroe-fila { min-height: 0; display: block; }

  h1 { width: auto; font-family: var(--titular); font-weight: 600; font-size: 44px; line-height: .95; letter-spacing: -.028em; }

  .heroe-botones { margin-top: 26px; width: 100%; max-width: none; }

  .heroe-panel { display: none; }

  .intercambio { display: none; }

  .franja { margin-top: 28px; height: auto; }

  .franja p { font-size: 15px; }

  .bloque-fila { grid-template-columns: 1fr; gap: 26px; padding: 48px var(--gutter) 56px; }

  .etq, .cuerpo { grid-column: 1 / -1; padding-right: 0; }

  .titulo { font-size: 30px; }

  .cierre-tit { font-size: 38px; }

  .datos, .sueltas, .dia, .modulos { grid-template-columns: 1fr 1fr; }

  .hora img, .sin-foto { height: 150px; }

  .precio { grid-template-columns: 1fr; }

  .tabla th, .tabla td { padding: 12px 8px; font-size: 13px; }

  .pie .rej { grid-template-columns: 1fr 1fr; gap: 22px; padding: 30px var(--gutter) 48px; }

  .pie-logo, .pie-col, .pie-legal { grid-column: auto; text-align: left; }
}