:root{--bg:#e5d79b;--card:#151823;--muted:#8a94a7;--txt:#596559;--acc:#7c3aed;--acc2:#22c55e}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#fefbef, #fefbef);color:var(--txt)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;gap:16px;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:38px;height:38px}
.brand-name{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted)}
.search-wrap{flex:1;display:flex;gap:8px;align-items:center}
.search{position:relative;flex:1}
.search input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid #f2f0e3;background:#f4f1e2;color:#1f2937; outline:none}
.autocomplete{position:absolute;left:0;right:0;top:44px;background:#0d1020;border:1px solid #23283a;border-radius:14px;max-height:260px;overflow:auto;display:none;z-index:20}
.autocomplete a{display:block;padding:10px 12px;border-bottom:1px solid #1a1f33;color:#e5e7f9}
.autocomplete a:last-child{border-bottom:none}
.autocomplete a:hover{background:#151b31}
.social, .lang{display:flex;gap:10px;align-items:center}
.flag{width:24px;height:24px;border-radius:50%;overflow:hidden;border:1px solid #2a2f45}
.main-hero{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:center;padding:30px 0}
.hero-card{background:linear-gradient(180deg,#fff7da,#fff7da);border:1px solid #fdf7df;border-radius:22px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cta{display:flex;gap:10px;margin-top:14px}
.button{padding:12px 16px;border-radius:12px;border:1px solid #2e3354;background:#151a30;color:#eef2ff;font-weight:600}
.button.primary{background:linear-gradient(180deg,#7c3aed,#5b21b6);border-color:#5a2ab0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
.card{background:linear-gradient(180deg,#eef4e8,#eef4e8); border:1px solid #edf0e5;border-radius:18px;padding:18px;transition:transform .06s ease}
.card:hover{transform:translateY(-2px); background:linear-gradient(180deg,#fff7da,#fff7da); border:1px solid #fff4d8;}  
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px}
.footer{margin-top:40px;padding:28px 0;border-top:1px solid #222846;color:#aab0c6}
.footer .links{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid #f4f1e2;background:#eef4e8;color:#010200;font-size:12px}
@media(max-width:960px){.main-hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
@media (max-width: 720px){
  .header{flex-wrap: wrap; gap: 10px}
  .brand-sub{display:none}
  .search-wrap{order:3; width:100%} /* buscador a una fila completa */
  .social, .lang{margin-left:auto}   /* empuja iconos a la derecha */
}