/* ─── Tokens y tema auto ─────────────────────────────────────────── */
:root{
  color-scheme: light dark;
  /* LIGHT */
  --bg:#ffffff;
  --bg-grad1:#ffffff;
  --bg-grad2:#ffffff;
  --card:#ffffff;
  --surface:#f7f8fb;
  --text:#0b0c0f;
  --muted:#4b5563;
  --primary:#e54646;
  --primary-hover:#d63b3b;
  --border:#e5e7eb;
  --ok:#16a34a;
  --error:#dc2626;
  --warn:#d97706;
  --link:#1d4ed8;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --bg-grad1:#000000;
    --bg-grad2:#000000;
    --card:#12141a;
    --surface:#161922;
    --text:#e7e9ee;
    --muted:#9aa3af;
    --primary:#e54646;
    --primary-hover:#f05a5a;
    --border:#242938;
    --ok:#16a34a;
    --error:#ef4444;
    --warn:#f59e0b;
    --link:#93b4ff;
  }
}

/* ─── Reset / base ───────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  background:
    radial-gradient(1200px 700px at 10% -10%, var(--bg-grad1) 0%, transparent 60%),
    radial-gradient(1200px 700px at 110% 10%, var(--bg-grad2) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }
.muted{ color:var(--muted) }
.small{ font-size:.9rem }
h1{ text-align:left; 
  font-size: 2.5rem ;}

/* ─── Layout ─────────────────────────────────────────────────────── */
.container{ width:100%; max-width:1100px; margin:0 auto; padding:16px }
.header{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:10px }
.row{ display:flex; gap:16px; flex-wrap:wrap }
.spacer{ height:8px }

/* ─── Logo marca (nuevo) ─────────────────────────────────────────── */
/* El contenedor del <picture> ocupa el 100% del ancho disponible
   y redondea bordes. overflow:hidden asegura que el redondeado "corte" la imagen. */
.brand-logo{
  display:block;
  width:100%;
  border-radius:12px;
  overflow:hidden;
}

/* La imagen usa todo el ancho del contenedor, mantiene proporción y hereda el redondeado */
.brand-logo__img{
  display:block;
  width:100%;
  height:auto;           /* evita deformación */
  object-fit:contain;    /* si el contenedor forzara altura, no recorta */
  border-radius:inherit; /* mantiene el redondeado del contenedor */
}

/* Si quieres que el título crezca y el logo pueda usar todo el ancho en una appbar flex */
.appbar__title{ flex:1; }

/* ─── Scan layout (nuevo) ───────────────────────────────────────── */
.scan{ width:100%; max-width:1100px; margin:0 auto;}
.scan__header{
  margin: 4px 0 12px;
  text-align: center;   /* 👈 centramos el título */
}
.scan__grid{ display:grid; grid-template-columns: 2fr 1fr; gap:16px; margin-top: 0.5rem; }
@media (max-width: 900px){ .scan__grid{ grid-template-columns:1fr } }

/* Viewer */
.viewer{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--border);
  border-radius:14px;
  background: linear-gradient(180deg, var(--surface), var(--card));
  overflow:hidden;
}
.viewer__reader{
  position:absolute; inset:0;
}
.viewer__reader video{ width:100%; height:100%; object-fit:cover; display:block }
.viewer__placeholder{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:8px;
}
.viewer__placeholder.is-hidden{ display:none }
.viewer__overlay{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.25) inset;
  border:2px dashed rgba(255,255,255,.35);
  border-radius:10px;
  margin:6%;
}
.viewer__controls{ margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }

/* Reader (id para compatibilidad previa) */
#reader{ width:100%; height:100% }

/* Grid responsive anteriores */
.row > .card{ flex:1; min-width:280px }
.row > .card:nth-child(2){ min-width:320px; flex:2 }

/* Controles */
.controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
select, input{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
  outline:none;
}
select:focus, input:focus{ border-color:var(--primary) }

button, .btn{
  padding:9px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--primary);
  color:white;
  cursor:pointer;
  transition:transform .04s ease, background .18s ease, opacity .18s ease;
}
button:hover, .btn:hover{ background:var(--primary-hover) }
button:active, .btn:active{ transform:translateY(1px) }
button[disabled]{ opacity:.6; cursor:not-allowed }

/* Variantes de botón */
.btn-primary{ background:var(--primary); color:#fff; border:1px solid transparent; padding:10px 14px; border-radius:10px; cursor:pointer }
.btn-block{ width:100% }
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover{ background: color-mix(in srgb, var(--text) 4%, transparent) }

/* Alert (nuevo) */
.alert{
  display:flex; gap:10px; align-items:flex-start;
  border-radius:12px; padding:12px 14px; line-height:1.35;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  border:1px solid var(--border);
}
.alert__icon{ font-size:20px; line-height:1 }
.alert__text{ flex:1 }
.alert--ok{ background: color-mix(in srgb, var(--ok) 15%, transparent); border-color: color-mix(in srgb, var(--ok) 60%, transparent) }
.alert--warn{ background: color-mix(in srgb, var(--warn) 15%, transparent); border-color: color-mix(in srgb, var(--warn) 60%, transparent) }
.alert--error{ background: color-mix(in srgb, var(--error) 15%, transparent); border-color: color-mix(in srgb, var(--error) 60%, transparent) }

/* Resultados */
#result.ok{
  border:1px solid color-mix(in srgb, var(--ok) 60%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  padding:10px; border-radius:10px
}
#result.error{
  border:1px solid color-mix(in srgb, var(--error) 60%, transparent);
  background: color-mix(in srgb, var(--error) 12%, transparent);
  padding:10px; border-radius:10px
}

/* Tablas */
table{ width:100%; border-collapse:collapse; margin-top:6px }
th, td{ padding:10px 8px; border-bottom:1px solid var(--border); text-align:left }
th{
  color:color-mix(in srgb, var(--text) 90%, white);
  font-weight:600;
  background: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%);
}
tbody tr:hover{ background: color-mix(in srgb, var(--text) 4%, transparent) }
.table-scroll{ overflow:auto; max-width:100% }

/* Hero / acciones (compat) */
.hero{ gap:14px; align-items:flex-start; }
.hero__icon svg{ fill:var(--primary) }
.hero__title{ margin:4px 0 }
.hero__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }

/* Forms */
.form-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.input-lg{
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:12px 12px; flex:1; min-width:220px; outline:none;
}
.input-lg:focus{ border-color:var(--primary) }
.section-title{ margin:0 0 6px }

/* Input group (nuevo) */
.input-group{ display:flex; gap:8px; align-items:stretch; margin-top:8px }
.input-group .input-lg{ flex:1 }
.input-group .btn{ flex:none }

/* Footer */
.foot{ text-align:center; margin:12px 0 8px }

/* A11y */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px) }

/* ─── Landing y otros existentes ─────────────────────────────────── */
.section{ margin:16px 0 24px }
.hero-landing{
  display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:center;
}
@media (max-width:860px){ .hero-landing{ grid-template-columns:1fr; } }

.grad-text{
  background:linear-gradient(90deg, var(--primary), #06b6d4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.cta-group{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }

.badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--muted) }
.badge-dot{ width:8px; height:8px; border-radius:999px; background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent) }

.phone-card{
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(800px 400px at 10% 10%,
              color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 60%),
              linear-gradient(180deg, var(--surface), var(--card));
  border:1px solid var(--border); border-radius:16px;
}
.phone-svg{ width:90%; max-width:520px; height:auto }

.features{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
}
@media (max-width:900px){ .features{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .features{ grid-template-columns:1fr } }

.feature{
  display:flex; gap:10px; padding:12px; border:1px solid var(--border);
  border-radius:12px; background:linear-gradient(180deg, var(--surface), var(--card));
}
.feature svg{ flex:none; width:20px; height:20px; fill:var(--primary); margin-top:4px }

.step-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
@media (max-width:800px){ .step-list{ grid-template-columns:1fr } }
.step{
  padding:12px; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(180deg, var(--surface), var(--card));
}
.step .num{
  display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--primary); color:#fff; font-size:13px; margin-right:6px;
}

.scan-illustration{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  border:0;
  background: transparent;
  padding:0;
}
@media (max-width:560px){
  .scan-illustration{ max-width:100%; margin-top:0 }
}

/* ====== Tasa dólar chip ====== */

.tasa-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 1rem 0;
}

.tasa-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;              /* estilo pill */
  background: #0b0c0f;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.9rem;
}

.tasa-card__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tasa-card__icon {
  font-size: 1.1rem;
  color: #ef4444;                    /* rojo ícono $ */
}

.tasa-card__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.tasa-card__label {
  font-weight: 500;
  color: #eee;                    /* color texto */
}

.tasa-card__date {
  font-size: 0.75rem;
  opacity: 0.75;
}

.tasa-card__date--error {
  color: #f97373;                    /* rojito para error */
}

.tasa-card__right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.tasa-card__trend {
  font-size: 0.9rem;
  color: #22c55e;                    /* verde flechita */
}

.tasa-card__value {
  font-weight: 700;
  font-size: 1.05rem;
  color: #eee;                    /* verde valor */
}

/* un pelín más compacto en móviles */
@media (max-width: 480px) {
  .tasa-card {
    width: 100%;
    padding-inline: 0.7rem;
    font-size: 0.85rem;
  }

  .tasa-card__value {
    font-size: 0.95rem;
  }
}

/* ====== Carrusel de marcas tipo anuncio de noticias ====== */

.brand-ticker {
  width: 100%;
  overflow: hidden;
  /*border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 0.35rem;
  margin-top: 0.25rem;*/
  background: #ffffff;   /* tema claro: blanco */
}

.brand-ticker__track {
  display: flex;
  align-items: center;
  /*gap: 0rem;*/
  width: max-content;
  animation: brandTicker 40s linear infinite;
}

.brand-ticker__item {
  flex: 0 0 auto;
}

.brand-ticker__img {
  height: 50px;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* Animación: se mueve de derecha a izquierda muy lento */
@keyframes brandTicker {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Opcional: en pantallas pequeñas, logos un poco más chicos */
@media (max-width: 600px) {
  .brand-ticker__img {
    height: 80px;
  }
}

/* Tema oscuro: fondo negro */
@media (prefers-color-scheme: dark) {
  .brand-ticker {
    background: #000000;
  }

  .brand-ticker__img {
    height: 80px;  /* 👈 aquí agrandas SOLO los -black, porque solo se usan en oscuro */
  }
}