/* =========================================================
     EasyTax — Design tokens (ver DESIGN.md, Parte 0 y D)
     ========================================================= */
  :root{
    --blue:        #1D5BA4;
    --blue-light:  #4183C4;
    --blue-deep:   #00599D;
    --blue-soft:   #D9E2F3;
    --blue-mist:   #EDF3FA;
    --orange:      #F19921;
    --orange-hover:#DC9248;
    --orange-soft: #FFF4DE;
    --ink:         #111827;
    --ink-soft:    #595959;
    --line:        #D9E2F3;
    --line-strong: #A9C0DE;
    --white:       #FFFFFF;
    --bg-page:     #E8EEEE;
    --hero-bg:     #0b1730;
    --hero-bg-light:  #F6F8FC;
    --hero-text:      #12213F;
    --hero-text-soft: #5B6A8A;
    --header-h:    76px;
    --font: 'Montserrat', Arial, Helvetica, sans-serif;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:var(--font);
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }
  :focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

  .wrap{ max-width:1180px; margin:0 auto; padding-inline:40px; }
  @media (max-width:720px){ .wrap{ padding-inline:20px; } }

  /* =========================================================
     HEADER
     ========================================================= */
  .site-header{
    position:sticky; top:0; z-index:200;
    background:var(--blue);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .site-header .wrap{
    height:var(--header-h);
    display:flex; align-items:center; gap:32px;
  }

  .logo{ flex:0 0 auto; display:flex; align-items:center; }
  .logo img{ height:28px; width:auto; }

  .nav-primary{
    flex:1 1 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px;
    min-width:0;
  }
  .nav-list{
    list-style:none; margin:0; padding:0;
    display:flex; align-items:center; gap:8px;
  }
  .nav-list > li{ position:relative; }

  .nav-link{
    appearance:none; background:none; border:0; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 14px;
    font:600 14.5px/1 var(--font);
    color:rgba(255,255,255,.92);
    border-radius:8px;
    transition:color .15s ease, background-color .15s ease;
  }
  .nav-link:hover,
  .nav-link:focus-visible,
  .has-dropdown.is-open > .nav-link{
    color:var(--white);
    background:rgba(255,255,255,.08);
  }
  .nav-link .chevron{
    width:10px; height:10px;
    transition:transform .18s ease;
  }
  .has-dropdown.is-open > .nav-link .chevron{ transform:rotate(180deg); }

  /* ---- Mega-menú "Soluciones" ---- */
  .dropdown-panel{
    position:absolute; left:0; top:calc(100% + 10px);
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 16px 40px rgba(0,89,157,.16);
    padding:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 36px;
    min-width:560px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .has-dropdown:hover > .dropdown-panel,
  .has-dropdown.is-open > .dropdown-panel,
  .dropdown-panel:hover{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .dropdown-col{ display:flex; flex-direction:column; }
  .dropdown-heading{
    margin:4px 10px 8px;
    font-size:11px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--blue-deep);
  }
  .dropdown-col:last-child .dropdown-heading{ color:var(--orange-hover); }
  .dropdown-subheading{
    margin:10px 10px 6px;
    padding-top:10px;
    border-top:1px solid var(--line);
    font-size:10px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .dropdown-item{
    display:flex; flex-direction:column; gap:2px;
    padding:9px 10px;
    border-radius:9px;
    color:var(--ink);
  }
  .dropdown-item:hover,
  .dropdown-item:focus-visible{ background:var(--blue-mist); }
  .dropdown-item .item-name-row{ display:flex; align-items:center; gap:8px; }
  .dropdown-item .item-name{ font-size:14px; font-weight:700; }
  .dropdown-item .item-desc{ font-size:12.5px; color:var(--ink-soft); }
  .item-badge{
    font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--blue-deep); background:var(--blue-mist);
    border:1px solid var(--line);
    padding:2px 7px; border-radius:999px;
    white-space:nowrap;
  }
  .dropdown-item.is-soon{ cursor:default; }
  .dropdown-item.is-soon:hover{ background:transparent; }
  .dropdown-item.is-soon .item-name{ color:var(--ink-soft); }

  .nav-actions{
    flex:0 0 auto;
    display:flex; align-items:center; gap:18px;
  }
  .link-login{
    font:600 14px/1 var(--font);
    color:rgba(255,255,255,.9);
    padding:8px 4px;
    border-bottom:1px solid transparent;
  }
  .link-login:hover{ color:var(--white); border-color:rgba(255,255,255,.6); }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    font:700 14px/1 var(--font);
    padding:12px 22px;
    border-radius:999px;
    border:1.5px solid transparent;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-cta{ background:var(--orange); color:var(--ink); }
  .btn-cta:hover{ color:var(--white); }
  .btn-ghost{ border-color:var(--line-strong); color:var(--blue); }
  .btn-ghost:hover{ background:var(--blue-mist); border-color:var(--blue); }

  .menu-toggle{
    display:none;
    width:40px; height:40px;
    align-items:center; justify-content:center;
    background:none; border:0; border-radius:8px; cursor:pointer;
    color:var(--white);
  }
  .menu-toggle:hover{ background:rgba(255,255,255,.1); }

  /* ---- Mobile nav ---- */
  @media (max-width:960px){
    .nav-primary{
      display:block;
      position:fixed; inset:var(--header-h) 0 0 0;
      background:var(--blue);
      padding:12px 20px 28px;
      overflow-y:auto;
      transform:translateY(-8px);
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .18s ease, transform .18s ease, visibility .18s;
    }
    body.nav-open .nav-primary{
      opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
    }
    .nav-list{ flex-direction:column; align-items:stretch; gap:2px; }
    .nav-link{ width:100%; justify-content:space-between; padding:14px 12px; font-size:16px; }
    .dropdown-panel{
      position:static; display:none; grid-template-columns:1fr;
      opacity:1; visibility:visible; transform:none; box-shadow:none;
      border:0; border-radius:0; margin:4px 0 8px; padding:4px 0 4px 12px;
      background:transparent;
    }
    .has-dropdown.is-open .dropdown-panel{ display:grid; }
    .dropdown-heading{ color:rgba(255,255,255,.65); margin-top:10px; }
    .dropdown-col:last-child .dropdown-heading{ color:rgba(255,255,255,.65); }
    .dropdown-subheading{ color:rgba(255,255,255,.5); border-top-color:rgba(255,255,255,.15); }
    .dropdown-item{ color:var(--white); }
    .dropdown-item .item-desc{ color:rgba(255,255,255,.6); }
    .dropdown-item:hover{ background:rgba(255,255,255,.08); }
    .item-badge{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.25); }
    .dropdown-item.is-soon .item-name{ color:rgba(255,255,255,.65); }

    .nav-actions{
      flex-direction:column; align-items:stretch; gap:12px;
      margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15);
    }
    .link-login{ text-align:center; padding:10px; }
    .btn{ width:100%; }

    .menu-toggle{ display:inline-flex; }
  }


  /* =========================================================
     FOOTER
     ========================================================= */
  .site-footer{
    background:var(--blue);
    color:rgba(255,255,255,.8);
    padding:72px 0 40px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:40px;
  }
  .footer-col-brand .footer-logo{ display:inline-flex; margin-bottom:20px; }
  .footer-col-brand .footer-logo img{ height:26px; width:auto; }
  .footer-col-brand .tagline{
    font-size:14px; line-height:1.6;
    color:rgba(255,255,255,.75);
    max-width:280px;
    margin:0 0 24px;
  }
  .footer-cta{ margin-bottom:26px; }
  .footer-copyright{ font-size:12.5px; color:rgba(255,255,255,.5); margin:0 0 6px; }
  .footer-legal{ font-size:12.5px; color:rgba(255,255,255,.65); text-decoration:underline; }
  .footer-legal:hover{ color:var(--white); }

  .footer-heading{
    margin:0 0 20px;
    font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--white);
  }
  .footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
  .footer-links a{ font-size:14px; color:rgba(255,255,255,.78); }
  .footer-links a:hover{ color:var(--white); text-decoration:underline; }

  .footer-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.78); }
  .footer-contact svg{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:var(--orange); }
  .footer-contact a{ color:inherit; }
  .footer-contact a:hover{ color:var(--white); text-decoration:underline; }

  .footer-extra-links{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .footer-extra-links li{ display:flex; align-items:center; gap:9px; }
  .footer-extra-links svg{ flex:0 0 auto; width:15px; height:15px; color:var(--orange); }
  .footer-extra-links a{ font-weight:700; color:rgba(255,255,255,.92); }
  .footer-extra-links a:hover{ color:var(--white); text-decoration:underline; }

  @media (max-width:900px){
    .footer-grid{ grid-template-columns:1fr 1fr; row-gap:44px; }
    .footer-col-brand{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    .site-footer{ padding:56px 0 32px; }
    .footer-grid{ grid-template-columns:1fr; gap:36px; }
    .footer-col-brand .tagline{ max-width:none; }
  }