/* [2026-10-04] BuildGets ONE · pantalla de entrada (diseño D): banda de color con el dropzone cabalgando.
   Se usa en one-bc3.php, one-pdf.php y one-excel.php. Todo va bajo #welcomeScreen.one-e (o en clases one-e-*),
   así que no toca el resto de la página ni la pantalla de resultado, y no cambia ningún id ni ninguna lógica. */
#welcomeScreen.one-e{--c:#F97316;--d:#C2410C;--i:#7c2d12;--t:#fff1e6;--m:#fed7aa;--g:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),#F97316}
#welcomeScreen.one-e-pdf{--c:#DC2626;--d:#B91C1C;--i:#7f1d1d;--t:#fee2e2;--m:#fecaca;--g:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),#DC2626}
#welcomeScreen.one-e-xls{--c:#10B981;--d:#047857;--i:#064e3b;--t:#d1fae5;--m:#a7f3d0;--g:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),#10B981}
#welcomeScreen.one-e{background:#f6f7fb!important;padding:0 0 4rem!important;align-items:center}
#welcomeScreen.one-e>*{flex-shrink:0}
.one-e-wrap{display:flex;flex-direction:column;align-items:center;width:100%}

/* banda */
.one-e-banda{position:relative;width:100%;box-sizing:border-box;background:var(--g);padding:36px 24px 120px;overflow:hidden;text-align:center;margin:0}
.one-e-fondo{position:absolute;left:50%;top:-30px;margin-left:-190px;color:#fff;opacity:.13;pointer-events:none}
.one-e-in{position:relative;max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center}
.one-e-tag{background:#fff;color:var(--d);font-size:12px;font-weight:800;letter-spacing:.08em;padding:7px 14px;border-radius:999px;text-transform:uppercase}
.one-e-bg{font-size:40px;line-height:1;font-weight:800;letter-spacing:.1em;padding-left:.1em;color:#fff;margin-bottom:-6px}
.one-e-l{display:flex;align-items:baseline;justify-content:center;gap:.22em;font-size:clamp(52px,min(10.5vw,13vh),112px);line-height:.95;font-weight:800;letter-spacing:-.045em;white-space:nowrap}
.one-e-l .a{color:#fff;text-shadow:.055em .055em 0 var(--i)}
.one-e-l .b{color:var(--t);text-shadow:.055em .055em 0 var(--i)}
.one-e-sub{margin:0;font-size:18px;font-weight:700;color:#fff;line-height:1.35;max-width:720px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.one-e-todo{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:12px 20px;max-width:640px;box-sizing:border-box;text-align:center}
.one-e-todo b{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:#fff;text-transform:uppercase;margin-bottom:6px}
.one-e-todo span{display:block;font-size:14.5px;font-weight:700;color:#fff;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* dropzone cabalgando entre la banda y el fondo claro */
.one-e-fila{width:100%;max-width:920px;margin:-92px auto 0;padding:0 24px;box-sizing:border-box;position:relative;display:flex}
#welcomeScreen.one-e .drop-zone-large,#welcomeScreen.one-e .drop-zone{flex:1;width:100%!important;max-width:none!important;height:auto!important;margin-top:0!important;box-sizing:border-box;background:#fff!important;border:3px solid #fff!important;border-radius:30px!important;padding:14px!important;box-shadow:0 0 0 4px var(--c),0 0 0 9px #fff,0 26px 44px -20px var(--d);justify-content:stretch}
#welcomeScreen.one-e .drop-zone-large:hover,#welcomeScreen.one-e .drop-zone:hover{background:#fff!important;border-color:#fff!important}
#welcomeScreen.one-e .drop-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:2px dashed var(--m);border-radius:20px;padding:32px 24px;width:100%;box-sizing:border-box;text-align:center}
/* al arrastrar un archivo encima, el script pone fondo/borde en línea: se refleja dentro de la caja (el exterior queda blanco) */
#welcomeScreen.one-e .drop-zone-large[style*="eff6ff"] .drop-content,#welcomeScreen.one-e .drop-zone[style*="eff6ff"] .drop-content{border-color:var(--c);background:var(--t)}
#welcomeScreen.one-e .drop-content>*{margin:0!important}
#welcomeScreen.one-e .drop-content h2,#welcomeScreen.one-e .drop-content h3{font-size:1.6rem!important;font-weight:800;color:#0f172a!important;letter-spacing:-.01em}
#welcomeScreen.one-e .drop-content p{font-size:.95rem!important;font-weight:500;color:#475569!important}
#welcomeScreen.one-e .drop-content p+p{font-size:.8rem!important;color:#64748b!important}

/* cómo funciona */
.one-e-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%;max-width:920px;padding:0 24px;box-sizing:border-box;margin:24px auto 0}
.one-e-paso{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;text-align:left}
.one-e-paso i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--d);color:#fff;font-style:normal;font-size:14px;font-weight:800;line-height:40px;text-align:center}
.one-e-paso b{display:block;font-size:15px;font-weight:800;color:#0f172a}
.one-e-paso span{display:block;font-size:13px;font-weight:600;color:#475569;margin-top:3px;line-height:1.4}

@media (max-width:640px){
  .one-e-banda{padding:32px 16px 110px}
  .one-e-bg{font-size:30px}
  .one-e-sub{font-size:17px}
  .one-e-fila,.one-e-pasos{padding:0 14px}
  #welcomeScreen.one-e .drop-content{padding:30px 14px}
  #welcomeScreen.one-e .drop-content h2,#welcomeScreen.one-e .drop-content h3{font-size:1.3rem!important}
}

/* pantallas de poca altura (portátiles): todo un poco más pequeño para ver la zona de carga sin desplazarse */
@media (max-height:820px){
  .one-e-banda{padding:22px 24px 100px}
  .one-e-in{gap:8px}
  .one-e-bg{font-size:30px}
  .one-e-l{font-size:clamp(46px,min(10.5vw,11vh),92px)}
  .one-e-sub{font-size:16px}
  .one-e-todo{padding:8px 16px}
  .one-e-todo b{margin-bottom:3px}
  .one-e-todo span{font-size:13px}
  .one-e-fila{margin-top:-80px}
  #welcomeScreen.one-e .drop-content{padding:24px 20px}
}
/* [2026-10-06] Volver al inicio desde la entrada de ONE (arriba a la izquierda, sobre la banda de color) */
.one-e-inicio{position:absolute;top:16px;left:18px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.65);color:#fff;font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none}
.one-e-inicio:hover{background:rgba(255,255,255,.3)}
.one-e-inicio:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:640px){.one-e-inicio{top:10px;left:10px;padding:6px 12px 6px 8px;font-size:12px}}

/* [2026-10-11] Marca como en las tarjetas de la home: «BuildGets ONE» encima y la herramienta sola debajo,
   al mismo tamaño de siempre, con su tono claro y su sombra marcada. Solo con .one-e-marca (bc3/pdf/excel.php). */
.one-e-bg.one-e-marca{font-size:clamp(22px,min(4.3vw,5.3vh),46px);letter-spacing:-.015em;padding-left:0;margin-bottom:-2px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
#welcomeScreen.one-proc .one-e-bg.one-e-marca{font-size:16px;margin:0}