/* ===== Puente Orlando — Capa de tema "Pro v5.1" — Moderno & Limpio =====
   Solo refina apariencia (se carga al final). No cambia estructura ni clases.
   Identidad venezolana como acento refinado (franjas finas). */

:root{
  --azul:#0b2545;
  --azul-2:#163a6b;
  --azul-3:#2f6fd6;
  --azul-4:#5b94ea;
  --azul-claro:#eef4fc;
  --amarillo:#f2b705;
  --amarillo-2:#ffd34d;
  --rojo:#d8362a;
  --rojo-2:#e2483c;
  --verde:#1c9b54;
  --tinta:#0d1b2a;
  --gris-txt:#5a6b82;
  --linea:#e9eef5;
  --linea-2:#dde5f0;
  --panel:#ffffff;
  --radio:18px;
  --radio-s:12px;
  --radio-l:24px;
  --max:1060px;
  --sombra-xs:0 1px 2px rgba(13,27,42,.05);
  --sombra-s:0 2px 8px -2px rgba(13,27,42,.10), 0 1px 2px rgba(13,27,42,.04);
  --sombra:0 6px 22px -10px rgba(13,27,42,.16), 0 2px 6px -2px rgba(13,27,42,.06);
  --sombra-l:0 20px 50px -22px rgba(13,27,42,.34), 0 4px 12px -6px rgba(13,27,42,.10);
  --ring:0 0 0 4px rgba(47,111,214,.16);
  --tricolor:linear-gradient(90deg,#ffcc00 0 33.33%,#1a4fa0 33.33% 66.66%,#d8362a 66.66%);
}

/* ---------- Base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  color:var(--tinta);
  letter-spacing:-.011em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(1200px 560px at 6% -10%, rgba(47,111,214,.08), transparent 60%),
    radial-gradient(1000px 520px at 100% -6%, rgba(242,183,5,.06), transparent 55%),
    linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%) fixed !important;
}
::selection{ background:rgba(47,111,214,.18); }
a{ color:var(--azul-3); }
.muted,.text-muted{ color:var(--gris-txt) !important; }
.container{ max-width:var(--max); padding:10px 16px 44px; }

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{ color:#0c1c30; letter-spacing:-.02em; }
.card h2{ font-weight:800; }
.card h3{ font-weight:800; color:#13263d; }
.eyebrow{ letter-spacing:.32em; font-weight:800; color:var(--azul-3); opacity:.92; }
.display{ color:var(--azul); letter-spacing:-.02em; }

/* ---------- TOPBAR ---------- */
.topbar{
  background:linear-gradient(120deg,#0a2143 0%, #123764 52%, #1a4f93 100%);
  border-bottom:none;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 28px -14px rgba(11,37,69,.5);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--tricolor); opacity:.9;
}
.topbar-inner{ padding:13px 16px; }
.topbar .brand{ font-weight:800; letter-spacing:-.01em; font-size:1.06rem; }
.topbar .brand small{ opacity:.74; font-weight:500; letter-spacing:0; }
.topbar .flag{ box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 4px 10px rgba(0,0,0,.22); }
.btn-back{
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16); border-radius:11px; font-weight:600;
  transition:background .15s, transform .1s;
}
.btn-back:hover{ background:rgba(255,255,255,.22); }
.btn-back:active{ transform:scale(.96); }

/* ---------- CARDS ---------- */
.card{
  background:var(--panel);
  border-radius:var(--radio);
  border:1px solid var(--linea);
  box-shadow:var(--sombra-s);
  padding:20px;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover{ box-shadow:var(--sombra); }
.container > .card, .container > .flyer-hero{ animation:pvfade .42s cubic-bezier(.2,.7,.2,1) both; }
.card + .card{ margin-top:14px; }

/* ---------- BOTONES ---------- */
.btn{
  border-radius:var(--radio-s);
  font-weight:700; letter-spacing:-.01em;
  transition:filter .15s, transform .12s, box-shadow .22s, background .15s;
}
.btn:active{ transform:scale(.975); }
.btn-primary{ background:linear-gradient(135deg,#1a4f93,#2f6fd6); box-shadow:0 12px 26px -12px rgba(26,79,147,.62); }
.btn-primary:hover{ filter:brightness(1.05); box-shadow:0 16px 32px -12px rgba(26,79,147,.7); }
.btn-verde{ background:linear-gradient(135deg,#15864a,#1fb061); box-shadow:0 12px 26px -14px rgba(28,155,84,.6); }
.btn-rojo{ background:linear-gradient(135deg,#b62a1f,#e2483c); box-shadow:0 12px 26px -14px rgba(216,54,42,.55); }
.btn-amarillo{ background:linear-gradient(135deg,#e7a600,#ffd34d); color:#3a2c00; box-shadow:0 12px 26px -14px rgba(242,183,5,.5); }
.btn-ghost{ background:#fff; border:1.5px solid var(--linea-2); color:var(--azul-3); font-weight:700; box-shadow:var(--sombra-xs); }
.btn-ghost:hover{ background:var(--azul-claro); border-color:#bcd2ef; }
.btn-sm{ border-radius:10px; }
.btn-block{ width:100%; }

/* ---------- INPUTS ---------- */
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],input[type=search],select,textarea{
  border:1.5px solid var(--linea-2); border-radius:12px; padding:13px 14px;
  background:#fff; color:var(--tinta); font-family:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder,textarea::placeholder{ color:#9fb0c4; }
input:focus,select:focus,textarea:focus{ border-color:var(--azul-3); box-shadow:var(--ring); outline:none; }
.field label{ color:#2a3a52; font-weight:700; letter-spacing:-.005em; }

/* ---------- BADGES / CHIPS / PILLS ---------- */
.badge{ padding:4px 12px; font-weight:800; letter-spacing:.01em; border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.chip{ border:1px solid var(--linea-2); border-radius:999px; padding:8px 13px; background:#fff; font-weight:600; transition:.15s; box-shadow:var(--sombra-xs); }
.chip:hover{ border-color:#bcd2ef; background:#fafcff; }
.pill-row{ gap:8px; }

/* ---------- ALERTS / TABS / STAT ---------- */
.alert{ border-radius:14px; border-width:1px; box-shadow:var(--sombra-xs); }
.tab{ border-radius:999px; font-weight:700; }
.tab.active{ background:linear-gradient(135deg,#1a4f93,#2f6fd6); box-shadow:0 10px 20px -10px rgba(26,79,147,.6); color:#fff; }
.stat{ border-radius:14px; box-shadow:var(--sombra-s); border:1px solid var(--linea); }
.goal{ border-radius:var(--radio); box-shadow:var(--sombra-l); }

/* ---------- MODAL / TOAST ---------- */
#modal-root .overlay{ background:rgba(11,27,46,.52); backdrop-filter:blur(6px); }
#modal-root .modal{ border-radius:22px; box-shadow:var(--sombra-l); border:1px solid var(--linea); animation:pvpop .24s cubic-bezier(.2,.7,.2,1) both; }
#modal-root .modal-head{ border-bottom:1px solid var(--linea); }
.toast{ border-radius:14px; box-shadow:var(--sombra-l); backdrop-filter:blur(6px); }

/* ---------- FOOTER ---------- */
.foot{ background:linear-gradient(120deg,#0a2143,#123764); border-top:none; position:relative; }
.foot::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--tricolor); }

/* ---------- Spinner ---------- */
.spinner{ border-color:rgba(47,111,214,.18); border-top-color:var(--azul-3); }

/* ============================================================
   ===== REDISEÑO INICIO (cambios visibles) =====
   ============================================================ */

/* HERO: la bandera baja al pie como franja decorativa; el texto va sobre fondo limpio */
.flyer-hero{
  position:relative; overflow:hidden;
  padding:16px 22px 96px !important;
  background:
    radial-gradient(680px 240px at 50% -40px, #ffffff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#ffffff 0%, #f3f8fe 100%) !important;
  border:1px solid var(--linea) !important;
  border-radius:26px !important;
  box-shadow:var(--sombra-l), 0 2px 0 rgba(255,255,255,.7) inset !important;
}
.flyer-hero .wave-svg{
  top:auto !important; bottom:-1px !important;
  left:-3% !important; width:106% !important; height:96px !important;
  opacity:.95 !important;
  filter:saturate(1.06) drop-shadow(0 -6px 14px rgba(12,43,86,.12)) !important;
  z-index:1 !important;
}
.flyer-hero .fh-inner{ position:relative; z-index:3; }
.flyer-hero .eyebrow{ font-size:.78rem; letter-spacing:.34em; margin-bottom:6px; color:var(--azul-3); }
.flyer-hero .display{ font-size:2.7rem !important; line-height:1.02; margin:2px 0 4px; color:var(--azul); }
.flyer-hero .ribbon{
  margin-top:14px; padding:10px 24px; font-size:.82rem; border-radius:999px;
  background:linear-gradient(135deg,#c0291d,#e2483c);
  box-shadow:0 10px 24px -8px rgba(216,54,42,.5); letter-spacing:.08em;
}
.flyer-hero .sub{
  color:#34455d !important; font-weight:600 !important; opacity:1 !important;
  max-width:520px; margin:14px auto 0 !important; font-size:1rem; line-height:1.5;
}
@media(min-width:680px){ .flyer-hero .display{ font-size:3.1rem !important; } }

/* Contador premium */
#reg_counter{
  border-radius:var(--radio-l) !important;
  background:linear-gradient(135deg,#0b2545 0%, #1a4f93 55%, #2f6fd6 120%) !important;
  box-shadow:0 26px 56px -24px rgba(26,79,147,.72), 0 1px 0 rgba(255,255,255,.14) inset !important;
  position:relative; overflow:hidden; border:none !important;
  margin-top:14px !important; padding:22px 20px !important;
}
#reg_counter::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(460px 180px at 86% -34%, rgba(242,183,5,.30), transparent 60%);
  pointer-events:none;
}
#reg_counter::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--tricolor); opacity:.85;
}
#reg_num{ letter-spacing:-.03em; text-shadow:0 6px 22px rgba(0,0,0,.28); }

/* GRID de acciones tipo app */
.home-actions{ display:grid !important; grid-template-columns:1fr; gap:12px !important; margin-top:10px; }
@media(min-width:720px){ .home-actions{ grid-template-columns:1fr 1fr; } }

/* Tarjetas de acción: más premium y “app”, no genéricas */
.flyer-card{
  display:flex !important; align-items:center; gap:15px;
  padding:18px 18px !important; min-height:84px;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid var(--linea) !important;
  box-shadow:var(--sombra-s) !important;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
  animation:pvfade .46s cubic-bezier(.2,.7,.2,1) both;
}
.flyer-card::after{ width:4px !important; background:var(--tricolor) !important; opacity:.9; }
.flyer-card .num{ display:none !important; }
.flyer-card .ic{
  width:52px !important; height:52px !important; border-radius:15px !important;
  font-size:1.5rem !important; flex:0 0 auto;
  box-shadow:0 12px 24px -10px rgba(11,37,69,.42), 0 0 0 4px rgba(255,255,255,.7) !important;
}
.flyer-card .tx{ padding-right:6px !important; }
.flyer-card .tx .t{ font-size:1.1rem !important; color:var(--azul) !important; letter-spacing:-.01em; margin-bottom:2px; }
.flyer-card .tx .d{ font-size:.9rem !important; color:var(--gris-txt) !important; line-height:1.4; }
.flyer-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-l) !important; border-color:#cfdcef !important; }
.flyer-card:active{ transform:translateY(-1px) scale(.995); }

/* Tagline final */
.tagline{ font-size:1.7rem; margin-top:24px; color:var(--azul); }

/* ---------- Animaciones ---------- */
@keyframes pvfade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes pvpop{ from{ opacity:0; transform:scale(.96) translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .container > .card,.container > .flyer-hero,.flyer-card,#modal-root .modal{ animation:none; }
}

/* ---------- Scrollbar (desktop) ---------- */
@media(min-width:760px){
  *::-webkit-scrollbar{ height:10px; width:10px; }
  *::-webkit-scrollbar-thumb{ background:#cdd8e6; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
  *::-webkit-scrollbar-thumb:hover{ background:#aebfd6; background-clip:content-box; }
}

/* ---------- Impresión ---------- */
@media print{ *{ animation:none !important; } body{ background:#fff !important; } .no-print{ display:none !important; } }