@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy: #26A17B;
  --navy-2: #1F8A68;
  --gold: #F0B90B;
  --gold-dark: #D9A400;
  --paper: #FFFFFF;
  --ink: #0B1F17;
  --muted: #5B6B63;
  --green: #00D395;
  --line: #DCEFE6;
  --paypal: #003087;
  --paypal-light: #009CDE;
  --radius: 14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
}
a{color:inherit;}
button{font-family:inherit;}

/* ---------- Nav ---------- */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 6vw;flex-wrap:wrap;gap:12px;
}
.nav-actions{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}

@media (max-width:600px){
  .nav{padding:16px 5vw;}
  .nav-actions{width:100%;justify-content:flex-start;}
  .nav-actions .btn-secondary, .nav-actions a{
    font-size:0.82rem;padding:9px 12px;
  }
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Space Grotesk';font-weight:700;font-size:1.25rem;
  color:var(--navy);
}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  display:flex;align-items:center;justify-content:center;
  color:#181A20;font-weight:700;font-size:0.9rem;
}
.brand small{
  display:block;font-family:'Inter';font-weight:500;font-size:0.7rem;
  color:var(--muted);letter-spacing:0.06em;
}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;
  padding:24px 6vw 64px;align-items:start;
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .calc-card{order:-1;margin-bottom:8px;}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);color:var(--gold);
  font-size:0.78rem;font-weight:600;letter-spacing:0.04em;
  padding:7px 14px;border-radius:100px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);}

.hero h1{
  font-size:clamp(2.2rem, 4.2vw, 3.4rem);
  line-height:1.06;
  color:#2B2B2B;
}
.hero h1 .accent{color:var(--gold-dark);}

.hero p.lede{
  margin-top:20px;font-size:1.08rem;color:var(--muted);max-width:46ch;line-height:1.6;
}

.steps{
  margin-top:34px;display:flex;flex-direction:column;gap:14px;
}
.step{display:flex;gap:14px;align-items:flex-start;}
.step .num{
  width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--gold);
  font-size:0.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;
}
.step p{margin:0;color:var(--ink);font-size:0.95rem;padding-top:2px;}

/* ---------- Calculator card ---------- */
.calc-card{
  background:#fff;border-radius:20px;padding:30px;
  box-shadow:0 24px 60px -30px rgba(15,33,54,0.35);
  border:1px solid var(--line);
}
.calc-row{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;
}
.calc-row label{
  font-size:0.75rem;color:var(--muted);font-weight:600;letter-spacing:0.02em;
}
.calc-input-line{
  display:flex;align-items:center;justify-content:space-between;margin-top:6px;
}
.calc-input-line input{
  border:none;outline:none;font-family:'Space Grotesk';font-size:1.7rem;font-weight:600;
  width:60%;background:transparent;color:var(--navy);
}
.pill{
  display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);
  background:var(--paper);padding:8px 12px;border-radius:100px;font-size:0.92rem;
  white-space:nowrap;
}
.pill-paypal{
  background:linear-gradient(135deg, var(--paypal), var(--paypal-light));
  color:#fff;
}
.pill-usdt{
  background:linear-gradient(135deg, var(--navy), var(--green));
  color:#fff;
}
.rayo-usdt{
  display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;border-radius:50%;background:var(--navy);
  vertical-align:-0.15em;margin:0 2px;
}
.rayo-usdt svg{width:60%;height:60%;fill:var(--gold);}
.swap{
  text-align:center;color:var(--muted);font-size:1.1rem;margin:-4px 0;
}
.receive-value{
  font-family:'Space Grotesk';font-size:1.7rem;font-weight:600;color:var(--green);
}
.details{
  font-size:0.85rem;color:var(--muted);margin:16px 0 20px;
  display:flex;flex-direction:column;gap:6px;
}
.details .row{display:flex;justify-content:space-between;}
.details strong{color:var(--ink);}

.btn-primary{
  width:100%;padding:16px;border:none;border-radius:100px;
  background:var(--navy);color:#fff;font-size:1rem;font-weight:600;
  cursor:pointer;transition:transform .15s ease, background .15s ease;
}
.btn-primary:hover{background:var(--navy-2);transform:translateY(-1px);}
.btn-primary:disabled{opacity:0.55;cursor:not-allowed;transform:none;}

.tasa-note{
  text-align:center;font-size:0.78rem;color:var(--muted);margin-top:12px;
}

/* ---------- Sections ---------- */
.section{padding:60px 6vw;}
.section h2{font-size:1.9rem;color:var(--navy);margin-bottom:8px;}
.section .sub{color:var(--muted);margin-bottom:32px;max-width:60ch;}

.carrusel-testimonios{
  position:relative;display:flex;align-items:center;gap:14px;
  max-width:1100px;margin:0 auto;
}
.carrusel-pista{
  flex:1;overflow:hidden;position:relative;min-height:170px;
  display:flex;gap:16px;padding-top:18px;
}
.carrusel-pista .testi-card{flex:1;min-width:0;}
.carrusel-flecha{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--navy);
  box-shadow:0 4px 12px -4px rgba(0,0,0,0.15);
}
.carrusel-flecha:hover{background:var(--paper);}
.carrusel-puntos{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.carrusel-punto{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;}
.carrusel-punto.activo{background:var(--navy);width:22px;border-radius:100px;}
.testi-card{
  background:var(--navy);border-radius:var(--radius);
  padding:22px;font-size:0.94rem;color:#fff;line-height:1.55;
  box-shadow:0 8px 24px -14px rgba(11,31,23,0.35);
  position:relative;
}
.testi-card.negativa{background:#B23A3A;}
.testi-card .emoji-calificacion{
  position:absolute;top:-14px;right:18px;
  width:32px;height:32px;border-radius:50%;
  background:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,0.25);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.testi-card .who{
  margin-top:14px;font-weight:600;color:var(--gold);font-size:0.85rem;
}

.footer{
  padding:30px 6vw;color:var(--muted);font-size:0.8rem;
  border-top:1px solid var(--line);
}

/* ---------- Forms (registro / pedido) ---------- */
.form-shell{
  max-width:480px;margin:40px auto;padding:0 6vw;
}
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;
  box-shadow:0 24px 60px -30px rgba(15,33,54,0.25);
}
.form-card h1{font-size:1.5rem;color:var(--navy);margin-bottom:6px;}
.form-card p.helper{color:var(--muted);font-size:0.92rem;margin-bottom:26px;text-align:justify;line-height:1.6;}

.field{margin-bottom:16px;}
.field label{display:block;font-size:0.82rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field input, .field select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:0.95rem;font-family:inherit;outline:none;background:var(--paper);
}
.field input:focus, .field select:focus{border-color:var(--gold-dark);}

.summary-box{
  background:var(--paper);border-radius:12px;padding:16px 18px;margin-bottom:22px;
  font-size:0.9rem;
}
.summary-box .row{display:flex;justify-content:space-between;padding:4px 0;}
.summary-box .row strong{color:var(--navy);}

.msg{
  border-radius:10px;padding:12px 14px;font-size:0.88rem;margin-bottom:16px;display:none;
}
.msg.error{background:#FBEAEA;color:#A33131;display:block;}
.msg.success{background:#E6F4EC;color:#1F7A4D;display:block;}

.center-note{text-align:center;font-size:0.82rem;color:var(--muted);margin-top:18px;}

/* ---------- Botón Google y separador ---------- */
.btn-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px;border:1px solid var(--line);border-radius:100px;background:#fff;
  font-size:0.94rem;font-weight:600;color:var(--ink);cursor:pointer;margin-bottom:18px;
  transition:background .15s ease;
}
.btn-google:hover{background:var(--paper);}
.or-line{
  text-align:center;position:relative;margin:18px 0;color:var(--muted);font-size:0.8rem;
}
.or-line::before, .or-line::after{
  content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--line);
}
.or-line::before{left:0;}
.or-line::after{right:0;}

/* ---------- Perfil ---------- */
.perfil-header{padding:30px 6vw 0;}
.perfil-cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:20px 6vw;
}
@media (max-width:700px){.perfil-cards{grid-template-columns:1fr;}}
.perfil-card{
  background:var(--navy);color:#fff;border-radius:16px;padding:22px;
}
.perfil-card .label{font-size:0.88rem;color:#B9C4D2;margin-bottom:10px;}
.perfil-card .value{font-family:'Space Grotesk';font-size:1.8rem;font-weight:700;}

.panel{
  margin:0 6vw 20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
}
.panel h3{font-size:1.05rem;color:var(--navy);margin-bottom:14px;}
.panel-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);
  flex-wrap:wrap;gap:10px;
}
.panel-row:last-child{border-bottom:none;}
.panel-row .who{font-size:0.9rem;color:var(--muted);}
.panel-row > div:first-child{
  min-width:0;flex:1 1 200px;overflow-wrap:break-word;word-break:break-word;
}
.panel-row > button, .panel-row > a.btn-secondary{
  flex:0 0 auto;
}

  .btn-secondary{
  padding:10px 18px;border-radius:100px;border:1px solid var(--line);
  background:#fff;font-size:0.86rem;font-weight:600;cursor:pointer;color:var(--navy);
}
.btn-secondary:hover{background:var(--paper);}

.badge{
  display:inline-block;padding:4px 10px;border-radius:100px;font-size:0.76rem;font-weight:600;
}
.badge.pendiente_wallet, .badge.pendiente_pago{background:#FCF1DC;color:#96690F;}
.badge.pago_verificado{background:#E4EEFB;color:#245A9B;}
.badge.enviado{background:#E6F4EC;color:#1F7A4D;}
.badge.cancelado{background:#FBEAEA;color:#A33131;}

.empty-state{
  text-align:center;padding:30px 10px;color:var(--muted);font-size:0.9rem;
}

/* ---------- Punto de mensajes no leídos ---------- */
.punto-no-leido{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:100px;
  background:#E03131;color:#fff;font-size:0.72rem;font-weight:700;
  vertical-align:middle;margin-left:6px;
}

/* ---------- Contador de operaciones ---------- */
.contador-box{
  margin-top:24px;padding:20px 26px;border-radius:16px;
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  display:inline-flex;align-items:center;gap:16px;
  box-shadow:0 12px 30px -12px rgba(38,161,123,0.5);
}
.contador-icono{font-size:2rem;line-height:1;}
.contador-numero{
  font-family:'Space Grotesk';font-size:2.2rem;font-weight:700;color:var(--gold);
  line-height:1;
}
.contador-texto{font-size:0.85rem;color:#fff;opacity:0.9;margin-top:2px;}