/* ComisionesFuera.es — hoja única de marca. La usan la home y las páginas generadas. */
*{margin:0;padding:0;box-sizing:border-box}
  html{overflow-x:clip;scroll-behavior:smooth}
  :root{
    --ink:#0d1b2a; --ink2:#33475b; --mut:#6b7c93; --line:#e2e8f0; --soft:#f5f8fb;
    --bg:#ffffff; --prim:#0f5c4a; --prim2:#14795f; --acc:#c8961e; --bad:#b3261e;
    --shadow:0 1px 2px rgba(13,27,42,.06),0 8px 28px rgba(13,27,42,.07);
  }
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
       color:var(--ink);background:var(--bg);line-height:1.62;-webkit-font-smoothing:antialiased}
  a{color:var(--prim);text-decoration:none} a:hover{text-decoration:underline}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  section{padding:74px 0} .soft{background:var(--soft);border-block:1px solid var(--line)}
  h1{font-size:clamp(30px,4.6vw,52px);line-height:1.12;letter-spacing:-.025em;font-weight:800}
  h2{font-size:clamp(23px,3vw,34px);line-height:1.2;letter-spacing:-.02em;font-weight:800;margin-bottom:12px}
  h3{font-size:18px;font-weight:750;margin-bottom:6px;letter-spacing:-.01em}
  p{color:var(--ink2)} .lead{font-size:18.5px;color:var(--ink2)}
  .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--prim);margin-bottom:12px}
  .mut{color:var(--mut);font-size:13.5px}

  /* cabecera */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
         backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
  .hbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0}
  .logo{font-weight:850;font-size:19px;letter-spacing:-.03em;color:var(--ink);
       display:inline-flex;align-items:center;white-space:nowrap}
  .logo .ic{margin-right:8px;font-size:17px}
  .logo b{color:var(--prim)}
  .nav{display:flex;gap:22px;align-items:center;font-size:14.5px;font-weight:600}
  .nav a{color:var(--ink2)} @media(max-width:860px){.nav{display:none}}
  .btn{display:inline-block;background:var(--prim);color:#fff;border:1px solid var(--prim);
       padding:12px 22px;border-radius:10px;font-weight:750;font-size:15px;cursor:pointer;
       transition:.15s;text-align:center}
  .btn:hover{background:var(--prim2);border-color:var(--prim2);text-decoration:none;transform:translateY(-1px)}
  .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .btn.g{background:#fff;color:var(--prim)} .btn.g:hover{background:var(--soft)}
  .btn.sm{padding:8px 15px;font-size:14px}

  /* hero */
  .hero{background:linear-gradient(168deg,#0d1b2a 0%,#0f3d34 62%,#0f5c4a 100%);color:#fff;
        margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:70px 0 0}
  .hero .wrap{max-width:1120px}
  .hero h1{color:#fff} .hero > .wrap p{color:#c9dbd5}
  .hero .panel p,.hero .panel span,.hero .panel div{color:var(--ink2)}
  .hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
  @media(max-width:900px){.hgrid{grid-template-columns:1fr;gap:30px}}
  .hero .eyebrow{color:#7fd4b8}
  .ticker{display:grid;grid-template-columns:repeat(3,auto);gap:14px 30px;margin-top:28px;
        padding-top:22px;border-top:1px solid rgba(255,255,255,.16);justify-content:start}
  @media(max-width:560px){.ticker{grid-template-columns:1fr 1fr}}
  .tk .n{font-size:26px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff}
  .tk .n.acc{color:#ffd97a} .tk .l{font-size:12px;color:#9fbdb4;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
  .hero .cierre{padding:16px 0 26px;font-size:13px;color:#8fada5}

  /* uploader */
  .panel{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(4,20,15,.30);
         padding:24px;color:var(--ink);position:relative;top:6px}
  .drop{display:block;border:2px dashed #c4d3cf;border-radius:13px;padding:30px 18px;text-align:center;
        cursor:pointer;transition:.15s;background:var(--soft)}
  .drop:hover,.drop.over{border-color:var(--prim);background:#effaf5}
  .drop .big{font-size:16.5px;font-weight:750;margin-bottom:4px}
  .drop input{display:none}
  .paso{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--prim);margin-bottom:10px}
  .barra{height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin:16px 0 8px;display:none}
  .barra i{display:block;height:100%;background:var(--prim);width:30%;animation:cor 1.15s infinite}
  @keyframes cor{0%{margin-left:-30%}100%{margin-left:100%}}
  .err{background:#fdecea;border:1px solid #f3c4c0;color:var(--bad);padding:11px 13px;
       border-radius:10px;font-size:14px;margin-top:12px;display:none}

  /* resultado */
  .cifra{font-size:clamp(38px,6.4vw,58px);font-weight:850;letter-spacing:-.03em;color:var(--prim);
         line-height:1.05;font-variant-numeric:tabular-nums}
  .rtab{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px}
  .rtab th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
           color:var(--mut);padding:7px 6px;border-bottom:1px solid var(--line)}
  .rtab td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
  .rtab td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
  .pill{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px}
  .p-a{background:#e3f5ee;color:#0f5c4a} .p-b{background:#e8eefb;color:#20458f}
  .p-c{background:#fdf2dc;color:#8a6206} .p-d{background:#eef1f4;color:#5d6b7a}
  .alerta{background:#fff8e6;border:1px solid #f0dca8;border-radius:11px;padding:13px 15px;
          font-size:14px;margin-top:16px;color:#6b5410}
  .nota{font-size:13px;color:var(--mut);margin-top:12px}

  /* rejillas */
  .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}
  @media(max-width:620px){.g3,.g4{grid-template-columns:1fr}}
  .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
  .card .num{width:32px;height:32px;border-radius:9px;background:var(--prim);color:#fff;
             display:grid;place-items:center;font-weight:850;font-size:15px;margin-bottom:11px}
  .card p{font-size:14.6px}

  .quote{border-left:3px solid var(--acc);padding:6px 0 6px 20px;margin:22px 0}
  .quote p{font-size:17px;color:var(--ink);font-style:italic}
  .quote .who{font-size:13.5px;color:var(--mut);font-style:normal;margin-top:7px}

  details{border-bottom:1px solid var(--line);padding:15px 0}
  details summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;
                  display:flex;justify-content:space-between;gap:14px;align-items:start}
  details summary::-webkit-details-marker{display:none}
  details summary:after{content:'+';color:var(--prim);font-weight:800;font-size:20px;line-height:1}
  details[open] summary:after{content:'–'}
  details p{margin-top:9px;font-size:15px}

  /* formulario */
  form label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin:12px 0 5px}
  form input,form textarea,form select{width:100%;border:1px solid var(--line);border-radius:10px;
       padding:11px 13px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
  form input:focus,form textarea:focus{outline:none;border-color:var(--prim);box-shadow:0 0 0 3px rgba(15,92,74,.10)}
  .hp{position:absolute;left:-9999px}
  .cons{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:13px;color:var(--mut)}
  .cons input{width:auto;margin-top:3px}
  .ok{background:#e3f5ee;border:1px solid #a9d9c7;color:#0f5c4a;padding:15px;border-radius:11px;
      font-size:15px;display:none}

  footer{background:#0d1b2a;color:#93a6b8;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
         padding:52px 0 26px;font-size:14px}
  footer h4{color:#fff;font-size:14px;margin-bottom:10px;letter-spacing:.04em}
  footer a{color:#c3d3e0} footer .legal{border-top:1px solid #1e3348;margin-top:30px;padding-top:18px;font-size:12.6px;color:#728aa1}

/* iconografía e ilustración */

  .recorrido{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:900px){.recorrido{grid-template-columns:1fr}}
  .paso-card{background:#fff;border:1px solid var(--line);border-radius:16px;
             overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .paso-card .ilu{background:var(--soft);border-bottom:1px solid var(--line);
                  aspect-ratio:3/2;overflow:hidden}
  .paso-card .ilu img{width:100%;height:100%;object-fit:cover;display:block}
  .paso-card .et{font-size:11.5px;font-weight:800;letter-spacing:.13em;
                 text-transform:uppercase;color:var(--prim);padding:16px 20px 0}
  .paso-card h3{padding:4px 20px 0;font-size:18px}
  .paso-card p{padding:6px 20px 20px;font-size:14.6px;flex:1}
  .ico{display:inline-flex;align-items:center;justify-content:center;
       width:42px;height:42px;border-radius:11px;background:var(--soft);
       color:var(--prim);margin-bottom:12px}
  .ico.oscuro{background:rgba(255,255,255,.12);color:#7fd4b8}
  .ilu-lado{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
  @media(max-width:900px){.ilu-lado{grid-template-columns:1fr}}
  .video-sec{background:#0d1b2a;color:#fff;padding:64px 0;
             margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .video-sec .wrap{max-width:1120px}
  .video-cab{max-width:62ch;margin-bottom:26px}
  .video-cab h2{color:#fff;margin-bottom:8px}
  .video-cab p{color:#9fbdb4;font-size:17px}
  .video-marco{border-radius:18px;overflow:hidden;background:#000;
               box-shadow:0 26px 70px rgba(0,0,0,.45);border:1px solid #1e3348}
  .video-marco video{display:block;width:100%;height:auto}

/* marcas-tipo de entidades */

  .mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px;margin:18px 0 6px}
  .mb{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
      padding:11px 14px;background:#fff;font-weight:700;font-size:14.6px;color:var(--ink);
      transition:.15s}
  .mb:hover{border-color:var(--prim);box-shadow:0 6px 20px rgba(13,27,42,.08);
            text-decoration:none;transform:translateY(-1px)}
  .mb-ic{flex:none;min-width:42px;height:42px;padding:0 7px;border-radius:9px;color:#fff;
         font-weight:850;font-size:13px;letter-spacing:.01em;display:flex;
         align-items:center;justify-content:center}
  .mb-ic.mb-logo{background:#fff;border:1px solid var(--line);padding:3px;width:42px;height:42px}
  .mb-ic.mb-logo img{width:100%;height:100%;object-fit:contain;display:block}
  .mb-tx{line-height:1.25}

  /* panel de subida */
  .panel .paso{color:var(--prim);font-weight:800}
  .pasos{list-style:none;margin:14px 0 18px;padding:0}
  .pasos li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;
            border-bottom:1px solid var(--line)}
  .pasos li:last-child{border-bottom:0}
  .pasos .n{flex:none;width:25px;height:25px;border-radius:50%;background:var(--prim);
            color:#fff !important;font-size:12.5px;font-weight:850;display:flex;
            align-items:center;justify-content:center;margin-top:2px}
  .pasos b{display:block;font-size:14.8px;color:var(--ink) !important;line-height:1.35}
  .pasos span{display:block;font-size:13.4px;color:var(--ink2) !important;line-height:1.5}
  .pasos code{background:var(--soft);border-radius:4px;padding:1px 5px;font-size:12.6px}
  .drop{display:flex;flex-direction:column;align-items:center;gap:3px}
  .drop .dico{font-size:24px;line-height:1;color:var(--prim) !important;
              width:46px;height:46px;border-radius:50%;background:#fff;
              border:1px solid var(--line);display:flex;align-items:center;
              justify-content:center;margin-bottom:7px}
  .drop .big{font-size:16.5px;font-weight:750;color:var(--ink) !important}
  .drop .chico{font-size:13.2px;color:var(--mut) !important}
  .drop:hover .dico,.drop.over .dico{border-color:var(--prim);transform:translateY(-2px)}
  .seguro{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
          background:var(--soft);border-radius:11px;padding:11px 13px}
  .seguro .lock{flex:none;font-size:15px;line-height:1.4}
  .seguro span{font-size:13px;color:var(--ink2) !important;line-height:1.55}

  /* desglose de honorarios */
  .cuentas{background:var(--soft);border:1px solid var(--line);border-radius:13px;
           padding:16px 18px;margin-top:18px}
  .c-tit{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
         color:var(--mut);margin-bottom:8px}
  .c-tab{width:100%;border-collapse:collapse;font-size:14.6px}
  .c-tab td{padding:6px 0;color:var(--ink2)}
  .c-tab td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
              white-space:nowrap;color:var(--ink)}
  .c-tab .c-tot td{border-top:1px solid var(--line);padding-top:9px;font-weight:800;
                   color:var(--ink);font-size:16.5px}
  .c-tab .c-tot td.n{color:var(--prim);font-size:19px}
  .c-nota{font-size:12.6px;color:var(--mut);margin-top:10px;line-height:1.55}