:root{
      --teal-1:#13c7b6;
      --teal:#10b3a3;
      --teal-2:#0c8b7f;
      --teal-deep:#06302e;
      --ink:#eafffb;
      --ink-soft:rgba(234,255,251,.72);
      --ink-faint:rgba(234,255,251,.5);
      --glass:rgba(14,26,28,.42);
      --glass-2:rgba(10,20,22,.58);
      --hair:rgba(255,255,255,.14);
      --hair-strong:rgba(255,255,255,.30);
      --shadow:0 30px 80px -28px rgba(0,0,0,.72), 0 8px 24px -12px rgba(0,0,0,.55);
      --radius:26px;
      --bg:url('/bg/1.webp');
    }

    *{box-sizing:border-box}
    /* Estado de visibilidad usado por app.js */
    .hidden{display:none !important}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Onest",system-ui,sans-serif;
      color:var(--ink);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      min-height:100dvh;
      overflow-x:hidden;
      letter-spacing:-0.01em;
    }

    /* ---------- Fondo foto + velo ---------- */
    .bg-photo{
      position:fixed; inset:0; z-index:-3;
      background-image:var(--bg);
      background-size:cover;
      background-position:center;
      transform:scale(1.06);
      animation:driftIn 1.6s cubic-bezier(.2,.7,.2,1) both, slowPan 46s ease-in-out 1.6s infinite alternate;
    }
    @keyframes driftIn{ from{opacity:0; transform:scale(1.14)} to{opacity:1; transform:scale(1.06)} }
    @keyframes slowPan{ from{transform:scale(1.06) translate3d(0,0,0)} to{transform:scale(1.1) translate3d(-1.5%,-1.5%,0)} }

    /* Scrim en capas: viñeta + degradado teal para legibilidad sin matar la foto */
    .scrim{
      position:fixed; inset:0; z-index:-2; pointer-events:none;
      background:
        radial-gradient(120% 90% at 18% 18%, rgba(6,48,46,.10) 0%, rgba(4,20,19,.62) 78%),
        linear-gradient(180deg, rgba(4,16,18,.34) 0%, rgba(3,12,14,.10) 38%, rgba(3,12,14,.46) 100%);
    }
    .scrim::after{
      content:""; position:absolute; inset:0;
      background:radial-gradient(70% 55% at 80% 8%, rgba(19,199,182,.22), transparent 60%);
      mix-blend-mode:screen;
    }

    /* ---------- Layout ---------- */
    .topbar{
      position:relative; z-index:5;
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:22px clamp(18px,4vw,44px);
    }
    .wordmark{
      display:inline-flex; align-items:center; gap:11px;
      color:var(--ink); text-decoration:none;
      font-weight:800; font-size:20px; letter-spacing:-0.03em;
      text-shadow:0 2px 14px rgba(0,0,0,.45);
    }
    .wordmark .mark{
      display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
      color:#04201e;
      background:linear-gradient(150deg, var(--teal-1), var(--teal-2));
      box-shadow:0 6px 18px -6px rgba(16,179,163,.8), inset 0 1px 0 rgba(255,255,255,.55);
    }
    .wordmark .mark svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.3))}

    .eu-badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 14px; border-radius:999px;
      font-size:13px; font-weight:600; color:var(--ink);
      background:var(--glass);
      border:1px solid var(--hair);
      backdrop-filter:blur(14px) saturate(140%);
      -webkit-backdrop-filter:blur(14px) saturate(140%);
      box-shadow:0 6px 22px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16);
    }

    .stage{
      position:relative; z-index:4;
      display:grid; place-items:center;
      padding:14px clamp(16px,4vw,32px) 28px;
      min-height:calc(100dvh - 150px);
    }

    /* ---------- Panel de cristal ---------- */
    .panel{
      width:100%; max-width:512px;
      position:relative;
      padding:30px clamp(22px,3.5vw,34px) 26px;
      border-radius:var(--radius);
      background:linear-gradient(165deg, rgba(22,38,40,.56), rgba(8,18,20,.50));
      border:1px solid var(--hair);
      backdrop-filter:blur(26px) saturate(160%);
      -webkit-backdrop-filter:blur(26px) saturate(160%);
      box-shadow:var(--shadow);
      animation:rise .8s cubic-bezier(.2,.75,.2,1) both;
      animation-delay:.15s;
    }
    /* Borde luminoso superior (capa de luz) */
    .panel::before{
      content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
      background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.02) 32%, transparent 60%, rgba(19,199,182,.35));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      pointer-events:none;
    }
    /* Glow teal suave bajo el panel */
    .panel::after{
      content:""; position:absolute; left:8%; right:8%; bottom:-26px; height:70px; z-index:-1;
      background:radial-gradient(60% 100% at 50% 0%, rgba(16,179,163,.45), transparent 70%);
      filter:blur(22px); opacity:.65; border-radius:50%;
    }
    @keyframes rise{ from{opacity:0; transform:translateY(22px) scale(.985)} to{opacity:1; transform:none} }

    .panel-head h1{
      margin:0; font-size:clamp(27px,4.4vw,33px); font-weight:800; letter-spacing:-0.035em;
      line-height:1.04;
    }
    .panel-head h1 .accent{
      background:linear-gradient(120deg, var(--teal-1), #7af0e2);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .panel-head .sub{
      margin:9px 0 0; color:var(--ink-soft); font-size:15px; font-weight:500;
    }

    form{margin-top:22px; display:flex; flex-direction:column; gap:14px}

    /* ---------- Drop zone ---------- */
    .drop{
      position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; gap:7px;
      padding:34px 20px;
      border-radius:18px;
      cursor:pointer;
      color:var(--ink);
      background:
        radial-gradient(120% 140% at 50% -10%, rgba(19,199,182,.14), transparent 60%),
        rgba(255,255,255,.04);
      border:1.6px dashed rgba(255,255,255,.28);
      transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
    }
    .drop:hover{
      border-color:rgba(19,199,182,.6);
      background:radial-gradient(120% 140% at 50% -10%, rgba(19,199,182,.20), transparent 60%), rgba(255,255,255,.06);
      box-shadow:0 14px 40px -22px rgba(16,179,163,.7);
    }
    .drop input[type=file]{display:none}
    .drop .plus{
      display:grid; place-items:center; width:54px; height:54px; border-radius:16px; margin-bottom:4px;
      color:#04201e;
      background:linear-gradient(150deg, var(--teal-1), var(--teal-2));
      box-shadow:0 12px 26px -10px rgba(16,179,163,.85), inset 0 1px 0 rgba(255,255,255,.6);
      transition:transform .55s cubic-bezier(.34,1.2,.4,1);
    }
    .drop:hover .plus{transform:translateY(-3px) rotate(90deg)}
    .drop .big{font-weight:700; font-size:16.5px; letter-spacing:-0.02em}
    .drop .small{font-size:13.5px; color:var(--ink-faint); font-weight:500}

    /* Estado al arrastrar (app.js añade .over) */
    #drop.over{
      border-color:var(--teal-1);
      border-style:solid;
      background:radial-gradient(120% 140% at 50% 0%, rgba(19,199,182,.30), rgba(255,255,255,.05) 70%);
      transform:scale(1.015);
      box-shadow:0 0 0 4px rgba(19,199,182,.22), 0 22px 50px -22px rgba(16,179,163,.9);
    }
    #drop.over .plus{transform:translateY(-3px) scale(1.06)}
    #drop.over .big::after{content:" aquí"}

    /* ---------- Fila de archivo elegido ---------- */
    .file-row{
      display:flex; align-items:center; gap:13px;
      padding:13px 14px; border-radius:15px;
      background:rgba(255,255,255,.06);
      border:1px solid var(--hair);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      animation:pop .3s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes pop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
    .file-row .file-ico{
      display:grid; place-items:center; width:40px; height:40px; border-radius:11px; flex:none;
      color:var(--teal-1);
      background:rgba(19,199,182,.14);
      border:1px solid rgba(19,199,182,.3);
    }
    .file-row .file-meta{min-width:0; flex:1}
    .file-row .name{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .file-row .meta{font-size:12.5px; color:var(--ink-faint); margin-top:2px}
    .file-row .x{
      flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
      border:1px solid var(--hair); background:rgba(255,255,255,.05);
      color:var(--ink-soft); font-size:18px; line-height:1;
      display:grid; place-items:center;
      transition:background .18s ease, color .18s ease, transform .18s ease;
    }
    .file-row .x:hover{background:rgba(255,80,80,.18); color:#ffd9d9; transform:rotate(90deg)}

    /* ---------- Opciones ---------- */
    .opts{display:grid; grid-template-columns:1fr 1.35fr; gap:12px}
    .field{display:flex; flex-direction:column; gap:6px}
    .field > label{
      font-size:12.5px; font-weight:600; color:var(--ink-soft); padding-left:2px;
    }
    .field .opt{color:var(--ink-faint); font-weight:500}

    select, .field input[type=text], .field input[type=number]{
      width:100%; font-family:inherit; font-size:14.5px; font-weight:500; color:var(--ink);
      padding:11px 13px; border-radius:13px;
      background:rgba(255,255,255,.06);
      border:1px solid var(--hair);
      backdrop-filter:blur(6px);
      transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
      outline:none;
    }
    select{
      -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:34px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9eee5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 12px center;
    }
    select option{background:#0c2422; color:#eafffb}
    .field input::placeholder{color:rgba(234,255,251,.36)}
    select:focus, .field input[type=text]:focus, .field input[type=number]:focus{
      border-color:rgba(19,199,182,.7);
      background:rgba(255,255,255,.09);
      box-shadow:0 0 0 3px rgba(19,199,182,.22);
    }
    .field input[type=number]::-webkit-inner-spin-button,
    .field input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0 }

    /* ---------- Botón principal ---------- */
    .primary{
      margin-top:4px;
      display:inline-flex; align-items:center; justify-content:center; gap:9px;
      width:100%; padding:15px 18px; border:0; border-radius:15px; cursor:pointer;
      font-family:inherit; font-weight:700; font-size:15.5px; letter-spacing:-0.01em;
      color:#04201e;
      background:linear-gradient(110deg, var(--teal-1), var(--teal) 55%, var(--teal-2));
      box-shadow:0 16px 34px -14px rgba(16,179,163,.85), inset 0 1px 0 rgba(255,255,255,.45);
      transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease;
      position:relative; overflow:hidden;
    }
    .primary::before{
      content:""; position:absolute; inset:0;
      background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
      transform:translateX(-120%);
      transition:transform .6s ease;
    }
    .primary:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 22px 46px -16px rgba(16,179,163,1)}
    .primary:hover:not(:disabled)::before{transform:translateX(120%)}
    .primary:active:not(:disabled){transform:translateY(0)}
    .primary svg{transition:transform .2s ease}
    .primary:hover:not(:disabled) svg{transform:translateX(3px)}
    .primary:disabled{
      cursor:not-allowed; filter:saturate(.25) brightness(.85); opacity:.7;
      background:rgba(255,255,255,.1); color:var(--ink-faint);
      box-shadow:none;
    }

    /* ---------- Progreso ---------- */
    #progress{display:none; margin-top:18px}
    #progress.show{display:block; animation:pop .3s ease both}
    .bar{
      height:10px; border-radius:999px; overflow:hidden;
      background:rgba(255,255,255,.1); border:1px solid var(--hair);
    }
    #barFill{
      display:block; height:100%; width:0%;
      background:linear-gradient(90deg, var(--teal-2), var(--teal-1));
      box-shadow:0 0 16px rgba(19,199,182,.7);
      transition:width .35s cubic-bezier(.3,.7,.2,1);
      border-radius:999px;
      position:relative; overflow:hidden;
    }
    #barFill::after{
      content:""; position:absolute; inset:0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
      animation:sheen 1.3s linear infinite;
    }
    @keyframes sheen{from{transform:translateX(-100%)} to{transform:translateX(100%)}}
    .pct{margin-top:9px; text-align:right; font-size:13px; font-weight:700; color:var(--teal-1)}

    /* ---------- Resultado ---------- */
    #result{display:none; margin-top:18px}
    #result.show{display:block; animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
    #result .ok{
      display:flex; align-items:center; gap:9px;
      font-weight:700; font-size:15.5px; color:#9af2e6; margin-bottom:13px;
    }
    #result .ok svg{
      flex:none; padding:5px; border-radius:9px; color:#04201e;
      background:linear-gradient(150deg, var(--teal-1), var(--teal-2));
      box-shadow:0 6px 16px -6px rgba(16,179,163,.8);
    }
    .link-box{display:flex; gap:9px}
    #link{
      flex:1; min-width:0; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink);
      padding:13px 14px; border-radius:13px;
      background:rgba(255,255,255,.06); border:1px solid var(--hair); outline:none;
    }
    #link:focus{border-color:rgba(19,199,182,.7); box-shadow:0 0 0 3px rgba(19,199,182,.2)}
    #copy{
      flex:none; padding:0 18px; border-radius:13px; cursor:pointer;
      font-family:inherit; font-weight:700; font-size:14px; color:#04201e;
      border:0; background:linear-gradient(110deg, var(--teal-1), var(--teal-2));
      box-shadow:0 10px 24px -12px rgba(16,179,163,.85), inset 0 1px 0 rgba(255,255,255,.4);
      transition:transform .16s ease, filter .16s ease;
    }
    #copy:hover{transform:translateY(-1px); filter:brightness(1.06)}
    #copy:active{transform:translateY(0)}
    #resultMeta{margin:11px 0 0; font-size:13px; color:var(--ink-faint); font-weight:500}
    .ghost{
      margin-top:14px; width:100%; padding:12px; border-radius:13px; cursor:pointer;
      font-family:inherit; font-weight:600; font-size:14.5px; color:var(--ink-soft);
      background:rgba(255,255,255,.05); border:1px solid var(--hair);
      transition:background .18s ease, color .18s ease, border-color .18s ease;
    }
    .ghost:hover{background:rgba(255,255,255,.1); color:var(--ink); border-color:var(--hair-strong)}

    /* ---------- Error ---------- */
    #error{
      margin-top:14px; padding:12px 14px; border-radius:13px;
      font-size:14px; font-weight:500; color:#ffd7d7;
      background:rgba(255,70,70,.14); border:1px solid rgba(255,90,90,.4);
      animation:pop .3s ease both;
    }

    /* ---------- Pie del panel ---------- */
    .panel-foot{
      margin:20px 0 0; padding-top:16px;
      border-top:1px solid var(--hair);
      display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
      font-size:12.5px; color:var(--ink-faint); font-weight:500; text-align:center;
    }
    .panel-foot .dot{width:4px; height:4px; border-radius:50%; background:var(--teal); opacity:.7}

    .credit{
      position:relative; z-index:4; text-align:center; margin:0; padding:0 20px 26px;
      font-size:13px; font-weight:500; color:rgba(234,255,251,.6);
      text-shadow:0 1px 10px rgba(0,0,0,.5);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:560px){
      .opts{grid-template-columns:1fr}
      .panel{padding:26px 20px 22px}
      .eu-badge span.lbl{display:none}
      .stage{min-height:auto; padding-top:6px}
      .drop{padding:28px 16px}
    }
    @media (prefers-reduced-motion:reduce){
      *{animation:none !important; transition:none !important}
    }
  

/* ===================== PULIDO 2026-06-06 ===================== */
/* Grano de película para textura premium */
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Tinte teal muy sutil sobre la foto (duotono) para coherencia entre fotos */
.bg-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(8,64,60,.26), rgba(4,18,22,.12) 55%, rgba(8,40,46,.20));
  mix-blend-mode:multiply;
}
/* Scrim más cinematográfico (viñeta + base oscura) */
.scrim{
  background:
    radial-gradient(130% 100% at 16% 12%, rgba(6,48,46,.06) 0%, rgba(3,15,16,.68) 82%),
    linear-gradient(180deg, rgba(3,14,16,.48) 0%, rgba(3,12,14,.12) 36%, rgba(2,10,12,.60) 100%);
}
.scrim::after{
  background:radial-gradient(78% 58% at 82% 6%, rgba(19,199,182,.20), transparent 60%);
  mix-blend-mode:screen;
}
/* Panel: sombra un punto más profunda */
.panel{ box-shadow:0 36px 92px -30px rgba(0,0,0,.80), 0 12px 30px -16px rgba(0,0,0,.62); }
.credit a{ color:inherit }

/* ---------- Página de descarga ---------- */
.panel.solo{ max-width:432px; text-align:center }
.dl-icon{ width:64px; height:64px; border-radius:18px; margin:0 auto 16px; display:grid; place-items:center; color:#04201e; background:linear-gradient(150deg,var(--teal-1),var(--teal-2)); box-shadow:0 14px 30px -12px rgba(16,179,163,.8), inset 0 1px 0 rgba(255,255,255,.5) }
.panel.solo h1{ margin:0 0 6px; font-size:clamp(22px,4vw,27px); font-weight:800; letter-spacing:-.03em; overflow-wrap:anywhere }
.sub{ color:var(--ink-soft); font-size:14.5px; margin:0 }
.pw-field{ margin:16px 0 4px; text-align:left }
.pw-field label{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink-soft) }
.pw-field input{ width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); padding:11px 13px; border-radius:13px; background:rgba(255,255,255,.06); border:1px solid var(--hair); outline:none }
.pw-field input:focus{ border-color:rgba(19,199,182,.7); box-shadow:0 0 0 3px rgba(19,199,182,.22) }
.err{ margin-top:10px; font-size:13px; color:#ffd7d7; font-weight:500 }
.report{ margin-top:16px }
.report a{ color:var(--ink-faint); font-size:12.5px; text-decoration:underline; cursor:pointer }
.report a:hover{ color:var(--ink) }
a.primary{ text-decoration:none }
#dlBtn{ margin-top:4px }

/* ---------- Páginas legales ---------- */
.legal-wrap{ position:relative; z-index:4; padding:8px clamp(16px,4vw,32px) 64px; display:flex; justify-content:center }
.legal{ width:100%; max-width:760px; background:rgba(8,16,18,.72); border:1px solid var(--hair); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); border-radius:22px; box-shadow:var(--shadow); padding:clamp(26px,4vw,46px); color:var(--ink-soft); line-height:1.7; font-size:15px }
.legal h1{ color:var(--ink); font-size:clamp(25px,4vw,33px); font-weight:800; letter-spacing:-.03em; margin:0 0 6px }
.legal .updated{ color:var(--ink-faint); font-size:13px; margin:0 0 26px }
.legal h2{ color:var(--ink); font-size:18px; font-weight:700; letter-spacing:-.02em; margin:26px 0 8px }
.legal p{ margin:0 0 12px }
.legal ul{ margin:0 0 12px; padding-left:20px }
.legal li{ margin:0 0 6px }
.legal a{ color:var(--teal-1); text-decoration:underline }
.legal strong{ color:var(--ink); font-weight:700 }
.legal-back{ margin-top:28px; padding-top:18px; border-top:1px solid var(--hair); font-size:14px }

/* ===================== DE-AI PASS 2026-06-06 ===================== */
:root{
  --teal-1:#3cae9c;
  --teal:#2a9d8f;
  --teal-2:#1f7d72;
  --ink:#eef1ef;
  --ink-soft:rgba(238,241,239,.74);
  --ink-faint:rgba(238,241,239,.5);
}
/* acento del titular SIN degradado (sólido, sobrio) */
.panel-head h1 .accent{ background:none; -webkit-text-fill-color:var(--teal-1); color:var(--teal-1) }
/* titular más rotundo (editorial) */
.panel-head h1{ font-size:clamp(28px,4.6vw,38px); line-height:1.0; letter-spacing:-.04em }
/* eyebrow / overline con línea-muelle (detalle autoral) */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 13px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-1) }
.eyebrow::before{ content:""; width:24px; height:2px; border-radius:2px; background:currentColor; opacity:.85 }
/* composición editorial: panel a la izquierda en escritorio */
.stage--left{ justify-items:start }
.stage--left .panel{ margin-left:clamp(0px,2.5vw,52px) }
@media (max-width:860px){ .stage--left{ justify-items:center } .stage--left .panel{ margin-left:0 } }
/* MENOS NEÓN: glows suaves, nada de halos teal */
.panel::after{ opacity:.30; filter:blur(28px) }
.drop .plus{ box-shadow:0 8px 18px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.38) }
.primary{ box-shadow:0 10px 22px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.26) }
.primary:hover:not(:disabled){ box-shadow:0 16px 30px -18px rgba(0,0,0,.62); transform:translateY(-1px) }
.wordmark .mark{ box-shadow:0 4px 12px -7px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28) }
#barFill{ box-shadow:none }
#result .ok svg{ box-shadow:none }
.scrim::after{ background:radial-gradient(78% 58% at 82% 6%, rgba(42,157,143,.10), transparent 62%) }
.bg-photo::after{ background:linear-gradient(135deg, rgba(10,42,40,.24), rgba(6,16,18,.14) 55%, rgba(10,34,38,.18)) }

/* ===================== MULTI-ARCHIVO (Oleada 2) ===================== */
.file-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px }
.file-list .file-row{ margin-top:0 }
.file-total{ font-size:12.5px; color:var(--ink-faint); font-weight:600; text-align:right; padding:2px 2px 0 }
/* página de descarga: lista de archivos */
.dl-files{ display:flex; flex-direction:column; gap:8px; margin:14px 0 6px; text-align:left }
.dl-file{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; background:rgba(255,255,255,.06); border:1px solid var(--hair) }
.dl-file .file-ico{ flex:none; color:var(--teal-1); display:grid; place-items:center }
.dl-file .file-meta{ min-width:0; flex:1 }
.dl-file .name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dl-file .meta{ font-size:12px; color:var(--ink-faint) }
.dl-file .dlone{ flex:none; cursor:pointer; border:1px solid var(--hair); background:rgba(255,255,255,.05); color:var(--ink); border-radius:9px; padding:6px 11px; font-size:12.5px; font-weight:600; font-family:inherit; transition:border-color .15s }
.dl-file .dlone:hover{ border-color:var(--teal-1) }
.dl-sender{ font-size:14px; color:var(--ink-soft); margin:0 0 4px }
.dl-sender b{ color:var(--ink) }
.dl-message{ font-size:13.5px; color:var(--ink-faint); font-style:italic; margin:2px 0 8px }

/* ===================== BRANDING DEL REMITENTE (Oleada 2) ===================== */
.dl-logo{ max-width:160px; max-height:66px; object-fit:contain; display:block; margin:0 auto 14px; border-radius:10px }
/* ===== PERSONALIZAR — burbuja flotante que sale del botón hacia la derecha ===== */
.brand{ position:relative; margin-top:2px }

/* Disparador tipo pastilla */
.brand-trigger{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--ink-soft); background:rgba(255,255,255,.05);
  border:1px solid var(--hair); border-radius:999px; padding:9px 15px;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s cubic-bezier(.34,1.4,.5,1);
}
.brand-trigger__ico{ flex:none; color:var(--teal-1); transition:color .2s ease }
.brand-trigger .opt{ color:var(--ink-faint); font-weight:500 }
.brand-trigger:hover{ color:var(--ink); border-color:rgba(60,174,156,.4) }
.brand-trigger:active{ transform:scale(.97) }
.brand-trigger:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(60,174,156,.32) }
body.personalizando .brand-trigger{ color:#04201e; background:linear-gradient(150deg,var(--teal-1),var(--teal-2)); border-color:transparent; box-shadow:0 6px 16px -8px rgba(16,179,163,.6) }
body.personalizando .brand-trigger__ico{ color:#04201e }

/* La burbuja (desktop: vuela a la derecha del panel) */
/* Flota JUNTO al panel (left/top los fija el JS); sin fondo atenuado, el resto sigue clicable */
.brand-pop{
  position:fixed; z-index:35; left:0; top:50%;
  width:min(344px,92vw); max-height:86vh; overflow-y:auto;
  padding:18px 18px 7px; border-radius:26px;
  /* SÓLIDA y ELEVADA: superficie más clara + borde vivo + halo, para separarla de fondos oscuros */
  background:linear-gradient(165deg, #24393b, #15282b);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(154,242,230,.07), 0 28px 74px -20px rgba(0,0,0,.92), 0 10px 26px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
  transform-origin:left center; transform:translateY(-50%) scale(.82);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s ease, transform .3s ease, visibility 0s linear .3s;
}
/* Al abrir: espera ~.24s a que lleguen las burbujas, luego aparece con rebote desde el lado del botón */
body.personalizando .brand-pop{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(-50%) scale(1);
  transition:transform .42s cubic-bezier(.34,1.6,.5,1), visibility 0s linear 0s;
}
.brand-pop__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px }
.brand-pop__title{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.01em }
.brand-pop__close{
  display:grid; place-items:center; width:28px; height:28px; border-radius:9px; cursor:pointer; color:var(--ink-soft);
  background:rgba(255,255,255,.06); border:1px solid var(--hair); transition:background .15s ease, color .15s ease;
}
.brand-pop__close:hover{ color:var(--ink); background:rgba(255,255,255,.1) }
.brand-pop .field{ margin:0 0 12px }

/* Burbujitas que salen del botón antes de aparecer el panel */
.brand-bubble{
  position:fixed; z-index:36; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 34% 30%, rgba(190,255,247,.95), rgba(60,174,156,.6) 55%, rgba(16,179,163,.12));
  box-shadow:0 0 12px rgba(16,179,163,.55);
}

/* Fila de progreso con botón de cancelar la subida */
.progress .prow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px }
.cancel-up{
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--ink-soft); background:transparent; border:1px solid var(--hair);
  border-radius:9px; padding:5px 13px; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.cancel-up:hover{ color:#ffd7d7; border-color:rgba(255,140,140,.45); background:rgba(255,80,80,.09) }

/* ===================== PREVIEW + VER (Oleada 2) ===================== */
.dl-preview{ width:100%; max-height:360px; object-fit:contain; display:block; margin:10px 0 4px; border-radius:12px; border:1px solid var(--hair); background:rgba(0,0,0,.22) }
iframe.dl-preview{ height:380px; background:#fff }
.dl-file .view{ background:rgba(60,174,156,.14); border-color:rgba(60,174,156,.35); color:var(--teal-1) }

/* Botón del input de archivo (logo) consistente con el tema */
.brand-pop input[type=file]{ color:var(--ink-soft); font-size:13px; width:100%; padding:9px 0 }
.brand-pop input[type=file]::file-selector-button{
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--ink); background:rgba(255,255,255,.07); border:1px solid var(--hair);
  border-radius:10px; padding:8px 13px; margin-right:11px;
  transition:border-color .15s ease, background .15s ease;
}
.brand-pop input[type=file]::file-selector-button:hover{ border-color:var(--teal-1); background:rgba(255,255,255,.11) }

/* ===================== UX: caduca pills, slider, miniaturas, QR (Oleada 2) ===================== */
.opts{ display:flex; flex-direction:column; gap:13px }
.segmented{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); background:rgba(255,255,255,.05); border:1px solid var(--hair); border-radius:13px; padding:4px; isolation:isolate }
/* Indicador que se DESLIZA bajo la pastilla activa (no aparece de golpe) */
.segmented::before{ content:""; position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3); border-radius:10px; background:linear-gradient(150deg,var(--teal-1),var(--teal-2)); box-shadow:0 6px 16px -8px rgba(16,179,163,.7); transform:translateX(calc(var(--seg,1) * 100%)); transition:transform .38s cubic-bezier(.34,1.35,.5,1) }
.segmented button{ position:relative; z-index:1; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); background:transparent; border:0; border-radius:10px; padding:9px 6px; cursor:pointer; transition:color .3s ease }
.segmented button:hover{ color:var(--ink) }
.segmented button.on{ color:#04201e }
@media (prefers-reduced-motion: reduce){ .segmented::before{ transition:none } }
.field input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; outline:none; cursor:pointer; margin:10px 0 2px; background:linear-gradient(90deg, var(--teal-1) var(--p,0%), rgba(255,255,255,.12) var(--p,0%)) }
.field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#eafffb; border:3px solid var(--teal); box-shadow:0 2px 8px rgba(0,0,0,.45); cursor:pointer; transition:transform .12s ease }
.field input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18) }
.field input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#eafffb; border:3px solid var(--teal); cursor:pointer }
.field input[type=range]::-moz-range-track{ height:8px; border-radius:999px; background:rgba(255,255,255,.12) }
.field input[type=range]::-moz-range-progress{ height:8px; border-radius:999px; background:var(--teal-1) }
.file-row .file-thumb{ width:40px; height:40px; flex:none; border-radius:11px; object-fit:cover; border:1px solid var(--hair) }
.qr-wrap{ display:flex; justify-content:center; margin:14px 0 2px }
.qr{ width:150px; height:150px; border-radius:14px; background:#fff; padding:9px; box-shadow:0 8px 24px -12px rgba(0,0,0,.5); animation:rise .4s ease both }