@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Sora:wght@400;500;600&display=swap');

:root{
  --bg:#121014;
  --surface:#241530;
  --surface-2:#2E1B3D;
  --ink:#F5EDE4;
  --muted:#9C8CA6;
  --coral:#FF6F61;
  --teal:#3FA7A0;
  --line:rgba(245,237,228,0.12);
  --max:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Sora', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
}
p{margin:0 0 1em; color:var(--ink);}
a{color:inherit;}
.muted{color:var(--muted);}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px; width:100%;}
img{max-width:100%; height:auto; display:block;}

/* Nav */
header.site{
  position:sticky; top:0; z-index:30;
  background:rgba(18,16,20,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  gap:16px;
}
.brand{
  display:inline-flex; align-items:center;
  text-decoration:none;
  color:var(--ink);
}
.brand img{height:30px; width:auto;}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; color:var(--muted); font-size:14px;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}

.nav-cta{display:flex; align-items:center; gap:10px;}

/* Menu toggle (hamburger) - hidden on desktop */
.menu-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; padding:0;
}
.menu-toggle span{
  display:block; width:18px; height:2px; background:var(--ink);
  position:relative;
}
.menu-toggle span::before, .menu-toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
}
.menu-toggle span::before{top:-6px;}
.menu-toggle span::after{top:6px;}

.mobile-drawer{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px 24px 20px;
  border-top:1px solid var(--line);
}
.mobile-drawer a{
  text-decoration:none; color:var(--ink);
  padding:14px 4px;
  font-size:16px;
  border-bottom:1px solid var(--line);
}
.mobile-drawer a:last-child{border-bottom:none;}
header.site.open .mobile-drawer{display:flex;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  font-family:'Sora'; font-weight:600; font-size:15px;
  text-decoration:none; border:1px solid transparent;
  cursor:pointer;
  min-height:44px; /* objetivo táctil recomendado en Android */
}
.btn-primary{background:var(--coral); color:#20111A;}
.btn-ghost{border-color:var(--line); color:var(--ink);}

/* Sections */
section{padding:96px 0;}
section.tight{padding:64px 0;}

footer.site{
  border-top:1px solid var(--line);
  padding:48px 0 32px;
}
.footer-grid{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px;
}
.footer-links{display:flex; gap:24px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
.footer-links a{
  text-decoration:none; color:var(--muted); font-size:14px;
  padding:6px 0; display:inline-block; /* área táctil */
}
.footer-links a:hover{color:var(--ink);}

/* ===== Breakpoints ===== */

/* Tablet chico / móvil grande */
@media (max-width:860px){
  .wrap{padding:0 20px;}
}

@media (max-width:720px){
  .nav-links{display:none;}
  .menu-toggle{display:inline-flex;}
  section{padding:56px 0;}
  section.tight{padding:44px 0;}
}

/* Móviles Android típicos (360–412px de ancho) */
@media (max-width:480px){
  .wrap{padding:0 16px;}
  .nav{padding:12px 16px;}
  .brand img{height:26px;}
  h1{font-size:clamp(30px,8vw,38px) !important;}
  h2{font-size:clamp(22px,6vw,28px) !important;}
  .btn{width:100%; padding:14px 20px;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  section{padding:44px 0;}
  section.tight{padding:36px 0;}
  .footer-grid{flex-direction:column; align-items:flex-start; gap:20px;}
  .legal-hero{padding:48px 0 28px;}
}

/* Móviles muy angostos */
@media (max-width:360px){
  .wrap{padding:0 14px;}
}

/* Legal pages */
.legal h2{margin-top:2em; font-size:24px;}
.legal h3{font-size:18px; font-family:'Sora'; font-weight:600; color:var(--ink);}
.legal p, .legal li{color:var(--muted); font-size:15.5px;}
.legal strong{color:var(--ink);}
.legal ul{padding-left:20px;}
.legal-hero{
  padding:72px 0 40px;
  border-bottom:1px solid var(--line);
}
.updated{font-size:13px; color:var(--muted);}
.callout{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 28px;
  margin:28px 0;
}
@media (max-width:480px){
  .callout{padding:18px 20px;}
}