/* ===== Tokens / Reset ===== */
:root{
    --brand-500:#FF8A00;
    --brand-600:#FF6A00;
    --accent-500:#2D6CDF;
  
    --ink-900:#0F1419;
    --ink-600:#44505E;
  
    --bg-700:#0B0C0F;
    --bg-50:#0F1217;
  
    --card-stroke: rgba(255,255,255,0.18);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.35);
  
    --radius-3:18px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  
  /* Layout base: asegura footer al final */
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
    background: linear-gradient(180deg, var(--bg-700), var(--bg-50));
    color:#F7FAFC;
    line-height:1.5;
  
    display:flex;
    flex-direction:column;
    min-height:100dvh; /* soporta móviles modernos */
  }
  
  /* main empuja el footer */
  main{ flex:1 0 auto; }
  
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .container{width:min(1120px, calc(100% - 32px)); margin-inline:auto}
  :focus-visible{outline:3px solid var(--accent-500); outline-offset:3px}
  
  /* util */
  .small{font-size:12px}
  .muted{color:#AAB6C2}
  
  /* ===== Background decor ===== */
  .bg-blob{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1}
  
  /* ===== Header ===== */
  .site-header{
    position:sticky; top:0; z-index:20;
    backdrop-filter:saturate(140%) blur(8px);
    background:rgba(10,12,15,0.65);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
  .top-nav{display:flex; gap:16px; align-items:center}
  .brand img{filter:drop-shadow(0 4px 14px rgba(255,138,0,.35))}
  
  /* ===== Buttons ===== */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:12px 18px; border-radius:999px; border:1px solid transparent;
    font-weight:600; letter-spacing:.2px; transition:.2s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    min-height:56px;
  }
  .btn svg{width:20px; height:20px; flex-shrink:0}
  
  .btn--primary{color:#111; background:linear-gradient(90deg, #FFD699, var(--brand-500)); border-color: rgba(0,0,0,.05)}
  .btn--primary:hover{transform:translateY(-1px); filter:saturate(1.05)}
  .btn--secondary{background:rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color:#FFF}
  .btn--secondary:hover{background:rgba(255,255,255,.18)}
  .btn--ghost{background:transparent; border-color:rgba(255,255,255,.25); color:#FFF}
  .btn--ghost:hover{background:rgba(255,255,255,.08)}
  
  /* ===== Hero (centrado y un poco más abajo) ===== */
  .hero{
    position: relative;
    min-height: clamp(520px, 78svh, 900px);   /* altura útil para centrar */
    display: grid;
    place-items: center;                      /* centra vertical + horizontal */
    padding-block: clamp(40px, 10vh, 120px) clamp(28px, 8vh, 120px);
  }
  
  .hero-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;               /* 1 columna para mantener centrado */
    justify-items: center;
    gap: 24px;
  }
  
  .hero-copy{
    text-align: center;
    max-width: 860px;
    margin-inline: auto;
    position: relative;
    z-index: 1;                               /* sobre la imagen decorativa */
  }
  
  .hero-copy h1{
    font-size: clamp(32px, 5vw, 56px);
    margin:0 0 12px 0;
    text-wrap: balance;
  }
  .grad{
    background: linear-gradient(90deg, #FFD699, #FF9A3E 30%, var(--brand-600));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .lead{color:#D9E2EC; font-size: clamp(16px, 2.3vw, 20px); max-width:60ch}
  
  /* Por defecto (desktop) en fila */
  .cta-row{
    display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; justify-content:center;
  }
  
  /* ====== Mobile & Tablet (<= 1024px): botones en columna iguales ====== */
  @media (max-width: 1024px){
    .cta-row{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      width:min(520px, 100%);   /* mismo ancho para los tres */
      margin-inline:auto;
    }
    .cta-row .btn{
      width:100%;               /* mismo ancho */
      justify-content:center;   /* centra contenido */
    }
  }
  
  /* Imagen hero lateral (decorativa) */
  .hero-media{
    z-index: 0;
    margin-top:32px; height:240px; border-top-left-radius:24px;
    background-image: linear-gradient(180deg, rgba(255,138,0,.2), rgba(0,0,0,.2)), url('assets/img/hero.jpg');
    background-size: cover; background-position: center;
    box-shadow: var(--shadow-lg);
  }
  
  /* ===== Footer ===== */
  .site-footer{
    padding:28px 0;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.25);
    margin-top:auto;                          /* al final siempre */
  }
  .footer-grid{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap;
  }
  
  /* ===== Responsive extra ===== */
  @media (min-width: 880px){
    .hero-media{
      position:absolute; right:0; top:0;
      width:min(44vw, 720px); height:100%;
      border-top-left-radius:48px; border-bottom-left-radius:48px;
    }
    .hero{ padding-bottom: clamp(56px, 12vh, 140px); }
  }
  
  @media (max-width: 640px){
    .footer-grid{ flex-direction:column; align-items:flex-start; gap:10px; }
  }