/* ============================================================
   pablo.html — hoja de estilos
   Generada a partir del CSS inline original de la página. El contenido de
   los bloques <style> se conserva íntegro y en el mismo orden.
   ============================================================ */


  /* ── El perfil, con el lenguaje de la casa: negro, mono para las etiquetas,
        un solo acento en oro. Nada de neón ni degradados morados: eso es la
        estética de todos los que venden humo en este nicho. ── */
  :root{
    --bg:#080808; --txt:#F4F4F4; --dim:#B4B4B4; --faint:#7A7A7A;
    --oro:#C8A24A; --linea:rgba(255,255,255,.09);
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--txt);font-family:var(--sans);
       min-height:100vh;overflow-x:hidden;position:relative;
       -webkit-font-smoothing:antialiased}
  #cielo{position:fixed;inset:0;z-index:0;pointer-events:none}
  .halo{position:fixed;left:50%;top:46%;width:min(1500px,150vw);height:min(1500px,150vw);
        transform:translate(-50%,-50%);z-index:0;pointer-events:none;
        background:radial-gradient(circle,rgba(200,162,74,.09),transparent 62%)}
  .marco{position:fixed;inset:26px;border:1px solid var(--linea);z-index:1;pointer-events:none}

  .hoja{position:relative;z-index:2;max-width:1180px;margin:0 auto;
        padding:clamp(64px,9vw,120px) clamp(26px,5vw,64px) 80px}

  .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.34em;
          color:var(--faint);text-transform:uppercase}

  .cabeza{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
          gap:clamp(30px,5vw,70px);align-items:center;
          min-height:min(74vh,660px)}

  h1{font-size:clamp(42px,7.4vw,86px);font-weight:600;line-height:.94;
     letter-spacing:-.035em;margin:26px 0 0}
  h1 span{display:block}
  .rol{font-family:var(--mono);font-size:12px;letter-spacing:.26em;
       color:var(--oro);margin-top:26px;text-transform:uppercase}
  .cita{font-size:clamp(19px,2.1vw,25px);line-height:1.45;font-weight:500;
        margin-top:30px;max-width:29ch;letter-spacing:-.012em}
  .bajo{font-size:clamp(14px,1.5vw,16.5px);line-height:1.62;color:var(--dim);
        margin-top:22px;max-width:44ch;font-weight:300}
  .tags{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;
        font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--faint)}

  /* el retrato — mientras no haya foto, el hueco se ve intencional y dice qué falta */
  .retrato{position:relative;aspect-ratio:3/4;width:100%;max-width:400px;
           justify-self:end;border:1px solid var(--linea);overflow:hidden;
           background:linear-gradient(160deg,#141414,#0a0a0a)}
  .retrato img{width:100%;height:100%;object-fit:cover;display:block;
               filter:contrast(1.06) saturate(.92)}
  .retrato .vacio{position:absolute;inset:0;display:grid;place-content:center;
                  gap:12px;text-align:center;padding:26px}
  .retrato .vacio b{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
                    color:var(--faint);font-weight:400;display:block}
  .retrato .vacio i{font-style:normal;font-size:12.5px;color:#4E4E4E;line-height:1.6;
                    display:block;max-width:22ch;margin:0 auto}
  .retrato .esq{position:absolute;width:13px;height:13px;border:1px solid rgba(200,162,74,.5)}
  .retrato .e1{top:11px;left:11px;border-right:0;border-bottom:0}
  .retrato .e2{top:11px;right:11px;border-left:0;border-bottom:0}
  .retrato .e3{bottom:11px;left:11px;border-right:0;border-top:0}
  .retrato .e4{bottom:11px;right:11px;border-left:0;border-top:0}

  /* el récord de payouts */
  .py-tot{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:18px;margin-top:32px;padding-bottom:26px;border-bottom:1px solid var(--linea)}
  .py-l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
      color:var(--faint);text-transform:uppercase}
  .py-tot b{display:block;font-family:var(--mono);font-size:clamp(26px,3.4vw,38px);
      font-weight:250;letter-spacing:-.03em;margin-top:9px;color:var(--oro)}
  .py-tab{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px}
  .py-tab th{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
      color:var(--faint);text-transform:uppercase;text-align:left;font-weight:400;
      padding:0 0 12px}
  .py-tab td{padding:10px 0;border-top:1px solid var(--linea);color:var(--dim);font-weight:300}
  .py-tab .py-f{color:var(--faint);font-family:var(--mono);font-size:12.5px}
  .py-tab .py-m{text-align:right;font-family:var(--mono);color:var(--txt)}

  /* lo que hace: cuatro columnas que se apilan solas */
  .hace{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
        gap:clamp(22px,3vw,40px);margin-top:34px}
  .hace-i h3{font-size:19px;font-weight:500;letter-spacing:-.015em}
  .hace-i h3::before{content:"";display:block;width:22px;height:2px;
        background:var(--oro);margin-bottom:13px}
  .hace-i p{font-size:14.5px;line-height:1.62;color:var(--dim);margin-top:10px;font-weight:300}

  /* la mesa, dos fotos a la par */
  .mesa-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:14px;margin-top:32px}
  .mesa-fotos figure{margin:0;border:1px solid var(--linea);overflow:hidden}
  .mesa-fotos img{width:100%;height:100%;object-fit:cover;display:block}

  /* ── el cuerpo ── */
  .seccion{margin-top:clamp(76px,10vw,130px);border-top:1px solid var(--linea);
           padding-top:clamp(32px,4vw,50px)}
  .seccion h2{font-family:var(--mono);font-size:11px;letter-spacing:.3em;
              color:var(--faint);font-weight:400;text-transform:uppercase}

  .reglas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
          gap:clamp(20px,3vw,38px);margin-top:34px}
  .regla .n{font-family:var(--mono);font-size:34px;font-weight:200;color:var(--oro);
            letter-spacing:-.04em;line-height:1}
  .regla h3{font-size:20px;font-weight:500;margin-top:13px;letter-spacing:-.015em}
  .regla p{font-size:14.5px;line-height:1.6;color:var(--dim);margin-top:9px;font-weight:300}

  .texto{font-size:clamp(15px,1.6vw,17px);line-height:1.72;color:var(--dim);
         margin-top:26px;max-width:62ch;font-weight:300}
  .texto strong{color:var(--txt);font-weight:500}
  .texto + .texto{margin-top:17px}

  .ligas{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
  .liga{display:inline-flex;align-items:center;gap:9px;
        font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
        color:var(--txt);text-decoration:none;padding:13px 20px;
        border:1px solid var(--linea);border-radius:2px;
        transition:border-color .18s,background .18s,transform .18s}
  .liga:hover{border-color:rgba(200,162,74,.55);background:rgba(200,162,74,.06);
              transform:translateY(-1px)}
  .liga.oro{border-color:rgba(200,162,74,.45);color:var(--oro)}

  .pie{margin-top:clamp(70px,9vw,110px);border-top:1px solid var(--linea);
       padding-top:26px;display:flex;justify-content:space-between;gap:18px;
       flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
       letter-spacing:.2em;color:#5A5A5A}

  @media(max-width:820px){
    .marco{inset:14px}
    .cabeza{grid-template-columns:minmax(0,1fr);min-height:0;gap:38px}
    .retrato{justify-self:start;max-width:290px}
    .cita{max-width:none} .bajo{max-width:none}
    .tags{gap:16px}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}