/* FIELD E4 · F01, diseño sobre el shell funcional existente.
   Referencia F01 original. Vehículos OEM no incluidos: derechos pendientes. */
body.field-shell.field-e4 {
  --e4-ink:#071d33; --e4-blue:#0b3554; --e4-gold:#efb324;
  --e4-soft:#eff3f7; background:linear-gradient(180deg,#eaf0f5 0,#f6f8fa 470px);
  color:var(--e4-ink);
}
.field-e4 .app-shell {max-width:780px; padding:0 14px;}
.field-e4 .app-shell>.topbar {display:none;}
.field-e4 .e4-header {
  position:relative; isolation:isolate; overflow:hidden; min-height:152px;
  background:linear-gradient(122deg,#062037 0%,#0a3555 65%,#143d60);
  color:white; padding:17px 16px 14px; border-radius:0 0 22px 22px;
  margin:0 -14px 15px; box-shadow:0 12px 28px rgba(4,28,50,.13);
}
.field-e4 .e4-header::before{
  content:""; position:absolute; z-index:-1; top:-30px; right:18%; width:43%;
  height:190px; transform:skewX(-32deg);
  background:linear-gradient(130deg,rgba(244,251,255,.12),rgba(255,255,255,0));
  border-left:1px solid rgba(255,255,255,.17);
}
.field-e4 .e4-header::after{
  content:"";position:absolute;right:-25px;top:0;width:17%;height:105%;
  transform:skewX(-25deg);background:rgba(0,14,33,.2);z-index:-1;
}
.field-e4 .e4-header-top,.field-e4 .e4-header-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.field-e4 .e4-brand-card{
  width:clamp(170px,52%,232px);height:74px;display:flex;align-items:center;
  justify-content:center;padding:10px 8px;background:rgba(255,255,255,.98);
  border-radius:12px;flex-shrink:0;box-shadow:0 5px 20px rgba(0,12,30,.22);
}
.field-e4 .e4-brand-card img{
  display:block;width:100%;height:auto;max-height:59px;object-fit:contain;
}
.field-e4 .e4-header-name {display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right}
.field-e4 .e4-header-name strong{
  font-size:clamp(23px,7vw,36px);line-height:1;font-weight:860;letter-spacing:.018em;
}
.field-e4 .e4-header-name span{
  color:#d2e2ec;font-size:10px;font-weight:700;letter-spacing:.08em;
}
.field-e4 .e4-header-bottom{margin-top:15px;border-top:1px solid rgba(255,255,255,.24);padding-top:12px;align-items:flex-end}
.field-e4 .e4-client{display:flex;flex-direction:column;gap:3px}
.field-e4 .e4-client-kicker{font-size:9px;letter-spacing:.12em;color:#c5d9e9;font-weight:700}
.field-e4 .e4-client strong{font-size:17px;letter-spacing:.09em}
.field-e4 .e4-origin{display:flex;gap:5px;flex-direction:column;align-items:flex-end}
.field-e4 .e4-lab-pill{color:#ffe6a1;border:1px solid rgba(239,179,36,.7);font-weight:800;
  border-radius:99px;padding:4px 8px;font-size:9px;letter-spacing:.025em}
.field-e4 #netBadge{font-size:10px;min-height:auto;background:rgba(255,255,255,.12);
  color:#fff;border-color:rgba(255,255,255,.25);padding:3px 8px}

.field-e4 .field-intro{padding:12px 2px 16px}
.field-e4 .field-intro>span{color:#41667e;letter-spacing:.12em;font-weight:800}
.field-e4 .field-intro h2{
  font-size:clamp(26px,7.3vw,37px);line-height:1.1;letter-spacing:-.045em;
  font-weight:850;color:#06243e;margin:8px 0 7px;
}
.field-e4 .field-intro p{font-size:13px;line-height:1.5;color:#5f7280}

.field-e4 .e4-equipment-hero{
  background:linear-gradient(130deg,#06192d 0%,#073052 60%,#0c3e62);
  border-radius:19px;color:#fff;position:relative;overflow:hidden;
  padding:0!important;margin:2px 0 14px;box-shadow:0 18px 30px rgba(9,30,49,.15);
}
.field-e4 .e4-equipment-hero::before{
  content:"";position:absolute;right:22%;top:-28px;width:37%;height:185%;
  transform:skewX(-27deg);background:linear-gradient(90deg,transparent,rgba(251,184,28,.16));pointer-events:none;
}
.field-e4 .e4-equipment-hero::after{
  content:"";position:absolute;right:-32px;bottom:40px;width:76px;height:210px;
  transform:skewX(-24deg);background:rgba(251,184,28,.24);pointer-events:none;
}
.field-e4 .e4-asset{
  display:flex;gap:9px;align-items:center;position:relative;z-index:1;padding:20px 18px 14px;
  min-height:170px;isolation:isolate;overflow:hidden;
}
.field-e4 .e4-asset>div{flex:1;min-width:0}
.field-e4 .e4-asset .eyebrow{font-size:10px;color:#cbdbe6;letter-spacing:.12em}
.field-e4 .e4-asset h3{color:#fff;font-size:clamp(23px,7vw,33px);line-height:1.1;letter-spacing:-.045em}
.field-e4 .e4-asset p{color:#c9d8e3;font-size:11px;line-height:1.35;max-width:210px}
.field-e4 .e4-asset-class{
  display:inline-flex;border:1px solid rgba(238,176,37,.8);border-radius:6px;
  padding:5px 7px;letter-spacing:.08em;font-size:9px;font-weight:850;color:#ffe3a4;margin-top:7px;
}
.field-e4 .e4-asset #fieldAssetIcon{
  width:clamp(90px,30vw,148px)!important;height:clamp(90px,30vw,148px)!important;
  flex:0 0 auto;filter:invert(1)!important;opacity:.88!important;
  position:relative;z-index:1;object-fit:contain;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.14);
  padding:12px;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.11);
}
.field-e4 .e4-shift-state{
  margin:0!important;padding:15px 18px!important;border-top:1px solid rgba(255,255,255,.22)!important;
  background:rgba(0,13,28,.20);position:relative;z-index:1;
}
.field-e4 .e4-shift-state .eyebrow{font-size:9px;letter-spacing:.1em}
.field-e4 .e4-shift-state h2{margin:5px 0 3px;font-size:20px;color:#fff}
.field-e4 .e4-shift-state p{line-height:1.4;font-size:12px;color:#d0dfe9}
.field-e4 .e4-shift-pill{
  display:inline-flex;padding:6px 9px;border-radius:99px;border:1px solid rgba(246,189,55,.5);
  color:#ffe29a;background:rgba(255,185,39,.09);font-size:9px;letter-spacing:.08em;font-weight:850;
}
.field-e4 .e4-shift-pill.is-active{border-color:rgba(101,224,159,.7);color:#9df2c3;background:rgba(18,128,70,.16)}
.field-e4 .e4-equipment-hero .hero-metrics{
  padding:15px 18px 17px!important;margin:0!important;
  border-top:1px solid rgba(255,255,255,.17);background:rgba(3,17,30,.24);
  position:relative;z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));
}
.field-e4 .e4-equipment-hero .hero-metrics>div{padding:0 8px;text-align:left;border-right:1px solid rgba(255,255,255,.2)}
.field-e4 .e4-equipment-hero .hero-metrics>div:first-child{padding-left:0}
.field-e4 .e4-equipment-hero .hero-metrics>div:last-child{border:0}
.field-e4 .e4-equipment-hero .hero-metrics strong{font-size:clamp(18px,5vw,25px);color:#fff}
.field-e4 .e4-equipment-hero .hero-metrics span{font-size:10px;color:#cedfea}

.field-e4 .e4-next-step{position:relative;overflow:hidden;background:#fff;padding:19px!important;
  border-radius:17px;border:1px solid #d8e3ec;box-shadow:0 7px 24px rgba(10,44,71,.055)}
.field-e4 .e4-next-step::before{
  content:"";position:absolute;top:0;left:0;height:4px;width:100%;
  background:linear-gradient(90deg,#0a3555 0 42%,#efb324 42% 72%,#e0e7ed 72%);
}
.field-e4 .e4-next-step .field-guide-top{gap:8px;flex-wrap:wrap}
.field-e4 .e4-next-step #fieldGuideTitle{color:#082b47;font-size:clamp(21px,6vw,26px)}
.field-e4 .e4-next-step .field-guide-description{color:#546c7f}
.field-e4 .e4-next-step #fieldStartShortcut,
.field-e4 .e4-next-step #fieldActionPrimary{
  background:linear-gradient(130deg,#ffcd52,#ecac16)!important;color:#081f31!important;
  border:0;border-radius:12px;min-height:56px;box-shadow:0 6px 15px rgba(205,148,22,.17);
}
.field-e4 .e4-next-step .field-quick-actions{gap:9px}
.field-e4 .e4-next-step .field-quick-secondary{border-radius:12px;min-height:54px}
.field-e4 .e4-truth-note{font-size:11px;color:#637889;margin:14px 0 0;line-height:1.5;border-top:1px solid #e0e7ed;padding-top:12px}
.field-e4 .field-sync-strip{background:#f0f5f8!important;border-radius:12px;padding:12px!important}
.field-e4 .field-bottom-nav{background:#071f35;border:1px solid #173c5a;
  box-shadow:0 -6px 22px rgba(3,25,43,.16);border-radius:15px 15px 0 0}
.field-e4 .field-bottom-nav button{color:#c2d2e0;font-size:11px}
.field-e4 .field-bottom-nav button span{display:grid;place-items:center;height:26px}
.field-e4 .field-bottom-nav button[aria-current=page]{color:#ffcb50;background:rgba(255,255,255,.065);border-color:#e9ad26;border-radius:9px 9px 0 0}
@media (min-width:540px){
  .field-e4 .e4-header{border-radius:0 0 22px 22px;padding:18px 24px}
  .field-e4 .e4-asset{min-height:195px}
  .field-e4 .e4-asset #fieldAssetIcon{width:166px!important;height:166px!important}
}
@media (max-width:365px){
 .field-e4 .e4-header-name span{font-size:8px}
 .field-e4 .e4-brand-card{width:175px}
 .field-e4 .e4-asset{padding:15px 13px}
 .field-e4 .e4-shift-state{padding:14px 13px!important}
 .field-e4 .e4-equipment-hero .hero-metrics{padding-left:13px!important;padding-right:13px!important}
}
@media(prefers-reduced-motion:reduce){.field-e4 *{animation:none!important;transition:none!important}}


/* E4 REFINERÍA · hero ilustrado original. La gráfica es conceptual, no fotografía de faena. */
.field-e4 .e4-equipment-hero{
  background:
    linear-gradient(113deg,rgba(4,17,31,.93) 0%,rgba(6,26,45,.72) 56%,rgba(7,38,60,.18) 100%),
    linear-gradient(165deg,#224866 0%,#a1b3b6 46%,#d8b27d 67%,#354654 100%);
}
.field-e4 .e4-equipment-hero:before {
  content:"";position:absolute;inset:0;transform:none;width:100%;height:100%;right:auto;top:auto;
  background:linear-gradient(146deg,transparent 0 45%,rgba(237,181,39,.20) 45% 51%,transparent 51% 100%);
  pointer-events:none;z-index:0;
}
.field-e4 .e4-equipment-hero:after{
  content:"";position:absolute;right:-14%;top:1px;bottom:auto;width:63%;height:65%;
  background:linear-gradient(175deg,rgba(229,210,166,.35),rgba(58,82,94,.06));
  clip-path:polygon(0 87%,24% 45%,38% 63%,66% 13%,100% 63%,100% 100%,0 100%);
  transform:none;z-index:0;pointer-events:none;
}
.field-e4 .e4-asset{
  display:block;min-height:244px; padding:19px 17px 19px!important;isolation:isolate;
}
.field-e4 .e4-asset>div:first-child{
  position:relative;z-index:3;max-width:66%;display:flex;flex-direction:column;align-items:flex-start;
}
.field-e4 .e4-asset .eyebrow{color:#d7e5eb;font-size:9px;letter-spacing:.10em}
.field-e4 .e4-asset h3{
  color:#fff;text-shadow:0 2px 14px rgba(0,13,29,.7);font-size:clamp(23px,6.8vw,34px);
  max-width:14ch;margin:8px 0 6px;line-height:1.03;
}
.field-e4 .e4-asset p{
  max-width:175px;color:#e2e8e8;font-size:11px;line-height:1.5;
  text-shadow:0 2px 9px rgba(0,19,35,.7);
}
.field-e4 .e4-asset-class{
  display:inline-flex;background:rgba(7,37,55,.82);border:1px solid rgba(244,179,34,.75);
  border-radius:5px;padding:6px 8px;font-size:9px;margin-top:13px;max-width:100%;
}
.field-e4 .e4-asset #fieldAssetIcon{display:none!important}
.field-e4 .e4-equipment-artwork{
  position:absolute;top:18px;right:-28px;bottom:9px;width:83%;max-width:440px;
  pointer-events:none;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;
}
.field-e4 .e4-equipment-artwork:before{
  content:"";position:absolute;right:-9%;top:13%;width:84%;height:76%;
  background:linear-gradient(110deg,transparent 2%,rgba(244,174,28,.28) 15%,rgba(244,174,28,.07) 55%,transparent 76%);
  transform:skewX(-21deg);
}
.field-e4 .e4-equipment-artwork img{
  display:block;object-fit:contain;width:100%!important;height:100%!important;
  max-height:none!important;max-width:none!important;
  filter:drop-shadow(0 12px 12px rgba(0,11,20,.60))!important;
  opacity:1!important;position:relative;z-index:1;
  margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;border-radius:0!important;box-shadow:none!important;
}
.field-e4 .e4-equipment-artwork>span{
  position:absolute;z-index:3;bottom:0;right:39px;color:#e7f0f3;
  font-size:8px;letter-spacing:.09em;white-space:nowrap;font-weight:780;
  text-shadow:0 2px 8px #001425;opacity:.88;
}
.field-e4 .e4-shift-state{background:rgba(3,15,25,.80);border-top:1px solid rgba(242,192,65,.32)!important;}
.field-e4 .e4-equipment-hero .hero-metrics{background:rgba(2,17,29,.86);}
/* Pantallas pequeñas: arte con profundidad y sin superponer los datos operacionales. */
@media(max-width:390px){
  .field-e4 .e4-asset{min-height:219px;padding:16px 13px!important}
  .field-e4 .e4-asset>div:first-child{max-width:64%}
  .field-e4 .e4-equipment-artwork{right:-43px;width:87%;top:15px;bottom:5px}
  .field-e4 .e4-asset h3{font-size:clamp(23px,7.1vw,29px)}
  .field-e4 .e4-equipment-artwork>span{font-size:7px;right:39px}
}
@media(min-width:540px){
  .field-e4 .e4-asset{min-height:285px;padding:24px!important}
  .field-e4 .e4-asset>div:first-child{max-width:49%}
  .field-e4 .e4-equipment-artwork{right:-12px;width:65%}
  .field-e4 .e4-asset h3{font-size:38px}
}


/* E4 QA VISUAL · Composición corregida desde capturas reales a 360/390/430 px. */
.field-e4 .e4-equipment-artwork{
  right:5px;width:76%;top:21px;bottom:14px;
}
.field-e4 .e4-equipment-artwork>span{
  right:12px;bottom:0;max-width:85%;font-size:8px;white-space:normal;text-align:right;
}
.field-e4 .e4-asset>div:first-child{
  padding:5px 7px 9px 0;
  background:linear-gradient(90deg,rgba(5,22,39,.88) 0%,rgba(5,22,39,.67) 59%,rgba(5,22,39,0) 100%);
  border-radius:9px;
}
@media(max-width:390px){
  .field-e4 .e4-equipment-artwork{
    right:2px;width:78%;top:17px;bottom:12px;
  }
  .field-e4 .e4-equipment-artwork>span{
    right:12px;bottom:1px;letter-spacing:.045em;
  }
}


/* E4 montaje fotográfico enviado por Dirección · privado hasta autorización de uso público. */
.field-e4 .e4-asset{min-height:260px;}
.field-e4 .e4-asset>div:first-child{
  max-width:62%;min-height:154px;justify-content:flex-start;
  background:linear-gradient(90deg,rgba(5,22,39,.95) 0%,rgba(5,22,39,.78) 66%,rgba(5,22,39,0) 100%);
}
.field-e4 .e4-equipment-artwork{
  right:0;width:84%;max-width:520px;top:15px;bottom:8px;
  align-items:flex-end;justify-content:flex-end;
}
.field-e4 .e4-equipment-artwork img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  object-position:right bottom!important;max-height:100%!important;
  filter:drop-shadow(0 13px 12px rgba(0,10,18,.68))!important;
}
.field-e4 .e4-equipment-artwork>span{
  background:rgba(4,25,40,.75);border:1px solid rgba(240,182,41,.55);
  color:#f3efe3;white-space:normal;border-radius:5px;
  max-width:93%;padding:4px 6px;font-size:8px;font-weight:850;
  bottom:5px;right:13px;
}
.field-e4 .e4-brand-card img{filter:none!important}
@media(max-width:390px){
  .field-e4 .e4-asset{min-height:240px}
  .field-e4 .e4-asset>div:first-child{max-width:65%}
  .field-e4 .e4-equipment-artwork{right:0;width:87%;top:18px;bottom:8px}
  .field-e4 .e4-equipment-artwork>span{right:9px;font-size:7px}
}
@media(min-width:540px){
  .field-e4 .e4-asset{min-height:310px}
  .field-e4 .e4-asset>div:first-child{max-width:50%}
  .field-e4 .e4-equipment-artwork{right:10px;width:72%;top:14px}
}


/* Ajuste de lectura tras inspección real de las 4 capturas OEM (390 px). */
.field-e4 .field-intro {padding-top:7px;padding-bottom:12px}
.field-e4 .field-intro h2 {font-size:clamp(33px,9vw,42px);margin:5px 0 5px}
.field-e4 .e4-asset>div:first-child{
  max-width:63%;padding:10px 14px 10px 9px;
  background:linear-gradient(90deg,rgba(3,19,34,.96) 0%,rgba(3,19,34,.89) 82%,rgba(3,19,34,0) 100%);
  border-radius:9px;
}
.field-e4 .e4-asset p {max-width:170px;line-height:1.4}
@media(max-width:390px){
  .field-e4 .e4-asset>div:first-child{max-width:66%;padding-right:12px}
  .field-e4 .field-intro h2{font-size:35px}
}

/* NARA · SOTRAMIN CLIENT BRAND: SOTRAMIN titular, Machine Ops firma tecnológica.
   Identidad SOTRAMIN sobre blanco para conservar contraste y colores originales. */
.field-e4 .e4-header{min-height:148px}
.field-e4 .e4-sotramin-card{
  display:flex;align-items:center;justify-content:center;
  width:clamp(168px,53%,238px);height:65px;max-width:58%;
  flex:0 1 auto;min-width:0;padding:8px 9px;
  border-radius:12px;background:#fff;box-shadow:0 5px 18px #00122250;
}
.field-e4 .e4-sotramin-card img{
  display:block;width:100%;height:auto;max-height:51px;object-fit:contain;
}
.field-e4 .e4-header-bottom{margin-top:12px;align-items:center}
.field-e4 .e4-client{gap:5px;min-width:0;flex:1}
.field-e4 .e4-client-kicker{font-size:9px;font-weight:850;letter-spacing:.085em}
.field-e4 .e4-client .e4-brand-card{
  width:clamp(132px,40vw,178px);height:46px;max-width:100%;flex:0 0 auto;
  padding:6px 9px;border-radius:9px;margin:0;
  background:#fff;box-shadow:0 3px 10px #02162b36;
}
.field-e4 .e4-client .e4-brand-card img{
  display:block;width:100%;height:100%;max-height:36px;object-fit:contain;
}
.field-e4 .e4-header-name{flex:0 1 auto;min-width:0}
.field-e4 .e4-header-name strong{font-size:clamp(25px,7vw,34px)}
.field-e4 .e4-header-name span{font-size:9px}
@media(max-width:390px){
 .field-e4 .e4-header{padding:13px 14px 10px}
 .field-e4 .e4-sotramin-card{width:52%;height:55px;padding:7px}
 .field-e4 .e4-header-top{gap:7px}
 .field-e4 .e4-header-name strong{font-size:26px}
 .field-e4 .e4-header-name span{font-size:7.5px;letter-spacing:.025em}
 .field-e4 .e4-header-bottom{margin-top:9px;padding-top:9px}
 .field-e4 .e4-client .e4-brand-card{width:139px;height:42px}
 .field-e4 .e4-lab-pill{font-size:8px}
}

/* 391–539 px: compensar la doble marca sin ocultar el CTA de inspección. */
@media(min-width:391px) and (max-width:539px){
 .field-e4 .e4-header{padding:12px 14px 9px;min-height:0}
 .field-e4 .e4-sotramin-card{height:52px;padding:6px}
 .field-e4 .e4-header-bottom{margin-top:8px;padding-top:8px}
 .field-e4 .e4-client .e4-brand-card{height:39px;padding:4px 8px}
 .field-e4 .field-intro p{display:none}
 .field-e4 .field-intro{padding-bottom:3px}
 .field-e4 .e4-asset:has(.e4-machine-chooser){min-height:148px}
 .field-e4 .e4-asset:has(.e4-machine-chooser)>div:first-child{min-height:106px}
}