/* ==========================================================================
   PIEL DE LA PÁGINA DE BIENVENIDA  ·  css/bienvenida.css

   Se carga DESPUÉS de app/css/app.css y de css/cuenta.css, y solo cambia el
   aspecto: ni una línea de lógica vive aquí. Reutiliza los mismos colores,
   tipografías y componentes de la app (--dark, --accent, .card, .btn, .pick,
   .result…) para que esta página parezca Transfint y no otro sitio.

   ⚠️ color-scheme: dark NO se quita de aquí ni de los <meta> de la página.
   Sin él, Chrome aplica su tema oscuro automático encima de una página que YA
   es oscura, invierte las tarjetas a blanco y deja el texto claro ilegible.
   ========================================================================== */

:root { color-scheme: dark; }

/* La bienvenida es una página de leer, no un formulario: columna más ancha. */
#app.bienvenida {
  max-width: 760px;
  padding: 0 16px 60px;      /* 16 px de margen lateral a 360 px de ancho */
}

/* ==========================================================================
   1 · LO PRIMERO QUE SE VE
   ========================================================================== */
.bv-hero { text-align: center; padding: 34px 0 6px; }
.bv-hero .bv-logo {
  font-family: var(--font-titulo);
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.05;
}
.bv-hero .bv-logo .st { color: var(--gold); }
.bv-hero .bv-lema {
  color: var(--text2); font-size: var(--t-md); margin-top: 10px; line-height: 1.6;
}
.bv-hero .bv-titular {
  font-family: var(--font-titulo);
  font-size: clamp(22px, 6.4vw, 32px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.22; margin: 22px 0 10px;
}
.bv-hero .bv-titular em { color: var(--accent); font-style: normal; }
.bv-hero .bv-sub { color: var(--text2); font-size: var(--t-md); line-height: 1.7; }

/* Las tres promesas de arriba. En móvil se apilan solas. */
.bv-sellos { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin: 18px 0 6px; }
.bv-sello {
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px;
  padding: 8px 14px; font-size: var(--t-xs); font-weight: 600; color: var(--text2);
}
.bv-sello b { color: var(--accent); font-weight: 700; }

/* Los botones que son enlaces no van subrayados: parecerían texto y no botón.
   Solo afecta a esta página, que es la única que carga esta hoja. */
a.btn { text-decoration: none; }

/* El botón protagonista */
.bv-cta-grande {
  font-size: var(--t-lg); font-weight: 750; padding: 19px 20px;
  box-shadow: var(--halo-accent);
  font-family: var(--font-titulo); letter-spacing: -.02em;
  text-align: center;          /* en pantallas estrechas el rótulo parte en dos */
}

/* ==========================================================================
   2 · LA CALCULADORA
   ========================================================================== */
.bv-calc { scroll-margin-top: 80px; }

.bv-paso-n {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-sm); font-weight: 700; color: var(--text2);
  margin: 20px 0 10px;
}
.bv-paso-n:first-of-type { margin-top: 4px; }
.bv-paso-n .n {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,229,160,.16); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 800;
}

/* Control de dos posiciones: «quiero enviar» / «quiero que reciba» */
.bv-seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); margin-bottom: 14px;
}
.bv-seg button {
  flex: 1; border: none; background: transparent; color: var(--text2);
  padding: 11px 8px; border-radius: 10px; cursor: pointer;
  font-size: var(--t-sm); font-weight: 650; line-height: 1.3;
  transition: background var(--rapido), color var(--rapido);
}
.bv-seg button[aria-pressed="true"] { background: rgba(0,229,160,.14); color: var(--accent); }

/* Caja del monto, con la moneda pegada a la derecha */
.bv-monto { position: relative; }
.bv-monto input { padding-right: 88px; }
.bv-monto .bv-mon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-sm); font-weight: 700; color: var(--text2);
  pointer-events: none; max-width: 76px; text-align: right; line-height: 1.2;
}

/* El resultado, en grande */
.bv-result { margin: 18px 0 4px; padding: 22px 18px; }
.bv-result .rv { font-size: clamp(28px, 9vw, 44px); }
.bv-result .bv-linea-det {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--t-sm); color: var(--text2); line-height: 1.7;
}
.bv-result.bv-espera { background: rgba(255,255,255,.035); border-color: var(--border); }
.bv-result .bv-dest { margin-top: 12px; justify-content: center; }

/* Aviso de tasa alta: un incentivo, no una advertencia */
.bv-premio {
  margin-top: 12px; background: rgba(245,197,24,.1);
  border: 1px solid rgba(245,197,24,.3); border-radius: var(--radius-xs);
  padding: 12px 14px; font-size: var(--t-sm); color: #FFE9A8; line-height: 1.6;
}

/* ==========================================================================
   3 · LAS EXPLICACIONES
   ========================================================================== */
.bv-seccion { margin-top: 42px; }
.bv-seccion > h2 {
  font-size: clamp(20px, 5.6vw, 26px); font-weight: 800;
  letter-spacing: -.03em; margin-bottom: 8px;
}
.bv-seccion > .bv-entradilla {
  color: var(--text2); font-size: var(--t-md); line-height: 1.75; margin-bottom: 18px;
}

/* Acordeón: se despliega al tocarlo, sin librerías */
.bv-ac {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 11px; overflow: hidden;
}
.bv-ac > summary {
  cursor: pointer; list-style: none; padding: 17px 16px;
  display: flex; align-items: center; gap: 13px;
  font-size: var(--t-md); font-weight: 650; letter-spacing: -.01em;
}
.bv-ac > summary::-webkit-details-marker { display: none; }
.bv-ac > summary .ic {
  font-size: 22px; width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(255,255,255,.05); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.bv-ac > summary .tx { flex: 1; min-width: 0; }
.bv-ac > summary .tx .sb {
  display: block; font-size: var(--t-sm); color: var(--text2);
  font-weight: 450; margin-top: 3px; line-height: 1.55;
}
.bv-ac > summary .fl {
  color: var(--text3); font-size: 13px; flex-shrink: 0;
  transition: transform var(--medio);
}
.bv-ac[open] > summary .fl { transform: rotate(180deg); }
.bv-ac[open] > summary { border-bottom: 1px solid var(--border2); }
.bv-ac .bv-cuerpo { padding: 16px; font-size: var(--t-sm); color: var(--text2); line-height: 1.8; }
.bv-ac .bv-cuerpo p + p { margin-top: 12px; }
.bv-ac .bv-cuerpo strong { color: #fff; font-weight: 650; }
.bv-ac .bv-cuerpo ul { margin: 10px 0 0 18px; }
.bv-ac .bv-cuerpo li { margin-bottom: 8px; }

/* ---------- las tres tarjetas de dólares, que se voltean al tocarlas ------ */
.bv-flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; }
@media (max-width: 520px) { .bv-flips { grid-template-columns: 1fr; } }

.bv-flip { perspective: 900px; background: none; border: none; padding: 0; cursor: pointer; }
.bv-flip-in {
  display: block;                 /* es un <span>: sin esto el min-height no aplica */
  position: relative; transform-style: preserve-3d;
  transition: transform .55s var(--curva); min-height: 156px;
}
.bv-flip[aria-pressed="true"] .bv-flip-in { transform: rotateY(180deg); }
.bv-flip-cara {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface2); padding: 15px 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 7px;
}
.bv-flip-cara.detras { transform: rotateY(180deg); background: rgba(0,229,160,.08); border-color: rgba(0,229,160,.32); }
.bv-flip .nm { font-size: var(--t-sm); font-weight: 750; letter-spacing: -.01em; line-height: 1.3; }
.bv-flip .de { font-size: var(--t-xs); color: var(--text2); line-height: 1.6; }
.bv-flip .gira { font-size: 10.5px; color: var(--text3); margin-top: 2px; }

/* ---------- la línea de tiempo del pedido, dibujada en SVG --------------- */
.bv-linea { margin: 6px 0 2px; }
/* El dibujo se limita a 360 px aunque la columna sea ancha: si creciera con la
   pantalla, en escritorio los rótulos quedarían gigantes y separadísimos. */
.bv-linea svg { width: 100%; max-width: 360px; height: auto; display: block;
  margin: 0 auto; overflow: visible; }

.bv-linea .riel { stroke: rgba(255,255,255,.14); stroke-width: 3; stroke-linecap: round; }
/* 352 es el largo exacto del riel del SVG (de y=24 a y=376). Si se cambian
   esas coordenadas, hay que cambiar también este número o la línea se
   dibujaría a medias. */
.bv-linea .avance {
  stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 352; stroke-dashoffset: 352;
}
.bv-linea .hito { opacity: .25; }
.bv-linea .hito circle { fill: var(--surface2); stroke: rgba(255,255,255,.2); stroke-width: 2; }
.bv-linea .hito text { fill: var(--text2); font-size: 11px; font-family: var(--font-texto); font-weight: 600; }
.bv-linea .hito .glifo { font-size: 15px; }

/* Al entrar en pantalla, el pedido avanza solo: se ve lo que va a pasar. */
.bv-linea.anima .avance { animation: bv-avanzar 3.4s var(--curva) forwards; }
.bv-linea.anima .hito   { animation: bv-encender .45s ease forwards; }
.bv-linea.anima .hito.h1 { animation-delay: .25s; }
.bv-linea.anima .hito.h2 { animation-delay: .95s; }
.bv-linea.anima .hito.h3 { animation-delay: 1.65s; }
.bv-linea.anima .hito.h4 { animation-delay: 2.35s; }
.bv-linea.anima .hito.h5 { animation-delay: 3.05s; }

@keyframes bv-avanzar { to { stroke-dashoffset: 0; } }
@keyframes bv-encender { to { opacity: 1; } }

/* Ya cumplida (o sin animación): el recorrido entero, quieto. */
.bv-linea.completa .avance { stroke-dashoffset: 0; }
.bv-linea.completa .hito   { opacity: 1; }

.bv-linea .hito.h5 circle { fill: rgba(0,229,160,.18); stroke: var(--accent); }
.bv-linea .hito.h5 text   { fill: var(--accent); }

/* Quien pide que nada se mueva, no ve nada moverse. */
@media (prefers-reduced-motion: reduce) {
  .bv-linea .avance { stroke-dashoffset: 0 !important; animation: none !important; }
  .bv-linea .hito   { opacity: 1 !important; animation: none !important; }
  .bv-flip-in { transition: none; }
  .bv-ac > summary .fl { transition: none; }
}

/* ---------- la lista de pasos, numerada ---------------------------------- */
.bv-pasos { counter-reset: bvp; margin-top: 6px; }
.bv-pasos .bv-p {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--border2);
}
.bv-pasos .bv-p:last-child { border-bottom: none; }
.bv-pasos .bv-p .num {
  counter-increment: bvp; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,229,160,.14); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo); font-weight: 800; font-size: var(--t-sm);
}
.bv-pasos .bv-p .num::before { content: counter(bvp); }
.bv-pasos .bv-p .tx { flex: 1; min-width: 0; }
.bv-pasos .bv-p .tt { font-size: var(--t-md); font-weight: 650; letter-spacing: -.01em; }
.bv-pasos .bv-p .dd { font-size: var(--t-sm); color: var(--text2); line-height: 1.7; margin-top: 4px; }
.bv-pasos .bv-p .dd strong { color: #fff; font-weight: 650; }

/* ---------- los extras, en rejilla --------------------------------------- */
.bv-extras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px) { .bv-extras { grid-template-columns: 1fr; } }
.bv-extra {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 15px 14px;
}
.bv-extra .e { font-size: 24px; }
.bv-extra .t { font-size: var(--t-md); font-weight: 650; margin: 7px 0 5px; letter-spacing: -.01em; }
.bv-extra .d { font-size: var(--t-sm); color: var(--text2); line-height: 1.65; }

/* ==========================================================================
   4 · CONTACTO Y RESEÑAS
   ========================================================================== */
.bv-contacto .bv-wa {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 15px 16px; margin-bottom: 10px;
  text-decoration: none; color: inherit;
}
.bv-contacto .bv-wa .ic {
  font-size: 22px; width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(37,211,102,.14); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.bv-contacto .bv-wa .nm { display: block; font-size: var(--t-md); font-weight: 700; letter-spacing: -.01em; }
.bv-contacto .bv-wa .sb { display: block; font-size: var(--t-sm); color: var(--text2); margin-top: 3px; line-height: 1.5; }

.bv-redes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
@media (max-width: 420px) { .bv-redes { grid-template-columns: 1fr; } }
.bv-red {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 14px;
  font-size: var(--t-sm); font-weight: 600;
}
.bv-red .e { font-size: 20px; flex-shrink: 0; }
.bv-red span.s { display: block; color: var(--text2); font-weight: 450; font-size: var(--t-xs); margin-top: 3px; }

/* El marco de las reseñas de Google. Va en su propio iframe a propósito:
   suelto, Trustindex cuela su hoja de estilos y descuadra la página entera. */
#bv-resenas-caja { min-height: 200px; }
#bv-resenas-caja iframe {
  width: 100%; height: 430px; border: 0;
  border-radius: var(--radius-sm); background: #111840; display: block;
}

/* ==========================================================================
   5 · LA LLAMADA FINAL
   ========================================================================== */
.bv-final {
  text-align: center; margin-top: 42px;
  background: linear-gradient(135deg, rgba(0,229,160,.12) 0%, rgba(0,42,143,.2) 100%);
  border: 1.5px solid rgba(0,229,160,.28);
}
.bv-final h2 { font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; letter-spacing: -.03em; }
.bv-final p { color: var(--text2); font-size: var(--t-md); line-height: 1.75; margin: 10px 0 18px; }

/* ==========================================================================
   6 · DETALLES DE PANTALLA PEQUEÑA Y HORIZONTAL
   ========================================================================== */
@media (max-width: 380px) {
  #app.bienvenida { padding-left: 16px; padding-right: 16px; }
  .bv-monto input { padding-right: 76px; }
  .bv-ac > summary { padding: 15px 13px; gap: 10px; }
  .bv-ac > summary .ic { width: 38px; height: 38px; font-size: 20px; }
}

/* Con el móvil en horizontal la pantalla es baja: se recorta el aire de arriba
   para que la calculadora siga cabiendo sin desplazarse. */
@media (max-height: 460px) and (orientation: landscape) {
  .bv-hero { padding-top: 16px; }
  .bv-seccion { margin-top: 28px; }
}


/* ==========================================================================
   ═══ DIRECCIÓN BANDERA ═══  (versión 17.0)
   La portada ya hereda los colores, los radios y la tipografía de app.css.
   Aquí van solo sus bloques propios.
   ========================================================================== */

/* El título de cada sección lleva el filo rojo, igual que las cabeceras de
   la app: es lo que hace que las dos se reconozcan como la misma casa. */
.bv-seccion > h2 {
  padding-left: 13px;
  border-left: 4px solid var(--red);
}

/* Los dibujos de la línea de tiempo van con el trazo del texto, no rellenos. */
.bv-linea .hito .glifo { stroke: var(--text2); fill: none; }
.bv-linea .hito.h5 .glifo { stroke: var(--accent); }

/* Los iconos de «y además» y de las redes: el dibujo manda su propio tamaño,
   así que la caja solo tiene que centrarlo y darle color. */
.bv-extra .e { display: flex; color: var(--info); font-size: 0; }
.bv-red .e   { display: flex; align-items: center; color: var(--text2); font-size: 0; }

/* Las fichas heredan el material nuevo: azul de bandera y un filete, sin borde. */
.bv-extra {
  background: var(--surface);
  border: none;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* El botón grande de la calculadora es el azul de la bandera con filo de oro,
   como el botón principal de la app. Antes era el degradado verde. */
.bv-cta-grande {
  background: var(--blue);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--gold);
}
.bv-cta-grande:hover { background: #0036B4; }

/* El resultado de la calculadora, con la estrella de la marca. */
.bv-result { position: relative; }
.bv-result::before {
  content: '★'; position: absolute; top: 9px; right: 13px;
  color: var(--gold); font-size: 13px; line-height: 1; opacity: .9;
}