:root{
  --bg:#0f1b2e;
  --bg-2:#101c2f;
  --surface:#0d1729;
  --card:#0f1c30;
  --muted:#a7b3c7;
  --text:#e9eef7;
  --gold:#d4af37;
  --shadow: 0 20px 40px rgba(0,0,0,.35);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:linear-gradient(120deg,#0f1b2e 0%,#0c1626 100%)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,92%);margin:0 auto}
nav{position:sticky;top:0;z-index:50;background:rgba(13,23,41,.8);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
nav .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand .logo{width:36px;height:36px;display:grid;place-items:center;background:var(--gold);color:#0f1b2e;border-radius:10px;font-weight:800}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.14);transition:.2s ease;background:#0e1a2d}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--gold{background:var(--gold);color:#0b1423;border-color:transparent;font-weight:700}
.hero{padding:74px 0 40px;background:radial-gradient(1100px 540px at 20% 10%,rgba(212,175,55,.12),transparent 60%)}
.hero .grid{display:grid;grid-template-columns:1.25fr .85fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.05;margin:14px 0 18px}
.hero p{color:var(--muted);font-size:18px;line-height:1.6;max-width:60ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.portrait{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);transform:translateY(24px)}
.section{padding:72px 0}
.section h2{font-size:clamp(26px,2.6vw,32px);margin:0 0 18px;color:var(--text)}
.kicker{letter-spacing:.14em;color:var(--gold);text-transform:uppercase;font-weight:800;font-size:22px;margin-bottom:18px}
.lead{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:20px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{font-size:12px;background:rgba(255,255,255,.06);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--muted)}
.pricing{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.price{font-size:40px;font-weight:800;margin:6px 0 10px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--muted)}
.process{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.step{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:16px}
.step .num{background:var(--gold);color:#0b1423;min-width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:800}
.testimonials{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.02));border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:18px;border-radius:16px}
.faq .item{border-bottom:1px solid rgba(255,255,255,.12)}
.faq button{background:none;border:none;color:var(--text);width:100%;text-align:left;padding:18px 0;font-size:18px;font-weight:600}
.faq .answer{display:none;padding:0 0 18px;color:var(--muted)}
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:20px}
/* Fuerza el orden de columnas */
.panel-izquierda {
    grid-column: 1;
}

.panel-derecha {
    grid-column: 2;
}

/* Evita que los paneles se estiren en vertical */
.contact>.panel {
    align-self: start;
}

/* En móvil, una sola columna y orden natural */
@media (max-width:980px) {

    .panel-izquierda,
    .panel-derecha {
        grid-column: auto;
    }
}
.contact .panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
.form.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0d1729;color:var(--text)}
textarea{min-height:120px;resize:vertical}
.legal{font-size:12px;color:var(--muted)}
footer{padding:40px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.06);margin-top:54px}
.success{margin-top:14px;padding:14px;border-radius:12px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.4);color:var(--text);font-weight:600}
@media (max-width:980px){
  .hero .grid,.cards,.pricing,.process,.testi-grid,.contact{grid-template-columns:1fr}
  nav ul{display:none}
  .portrait{transform:none;margin-top:24px}
  .form .row{grid-template-columns:1fr}
}
/* === ESTILO DORADO PARA "SUERTE" === */
.suerte-definition h4 {
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.suerte-definition span {
    color: var(--gold);
}

.suerte-definition ul li strong {
    color: var(--gold);
    font-weight: 700;
}
/* === BOTÓN Y FOOTER ROY LEDESMA === */
.footer-roy.footer-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 10px;
}

.legal-btn {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: "Arial", sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.legal-btn:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--navy);
}

@media (max-width: 480px) {
    .footer-roy.footer-centered {
        flex-direction: column;
        gap: 6px;
    }
}