:root{
  /* Marca */
  --green-950:#04210f;
  --green-900:#063d1c;
  --green-800:#075524;
  --green-700:#0a6b2e;
  --green-600:#0f8540;
  --green-500:#19a653;
  --green-200:#bfe9cf;
  --green-100:#e7f6ed;
  --green-50:#f4faf6;

  /* Acentos funcionales */
  --blue:#1d64c9;   --blue-bg:#ebf2fc;
  --amber:#b8650a;  --amber-bg:#fdf3e4;
  --red:#c42626;    --red-bg:#fdeeee;
  --violet:#5b3fd6; --violet-bg:#f1edfd;
  --teal:#0f766e;   --teal-bg:#e8f6f4;

  /* Neutros */
  --ink:#0f1d15;
  --ink-2:#1f3027;
  --muted:#46564c;
  --subtle:#66756c;
  --line:#e2eae5;
  --line-strong:#cfdcd4;
  --surface:#ffffff;
  --surface-2:#f7faf8;
  --canvas:#f2f6f3;

  /* Tipografía */
  --font:'Plus Jakarta Sans','Segoe UI',Roboto,Arial,sans-serif;

  /* Radios (jerarquía: panel > tarjeta > control > chip) */
  --r-panel:22px;
  --r-card:14px;
  --r-ctrl:10px;
  --r-pill:999px;

  /* Sombras */
  --sh-panel:0 30px 60px -20px rgba(6,40,20,.22),0 12px 24px -12px rgba(6,40,20,.12),0 0 0 1px rgba(6,40,20,.04);
  --sh-card:0 1px 2px rgba(6,40,20,.05),0 6px 16px -8px rgba(6,40,20,.12);
  --sh-float:0 12px 32px -12px rgba(6,40,20,.22),0 2px 6px rgba(6,40,20,.06);

  /* Logo del encabezado: ajuste aquí si el PNG trae mucho margen transparente */
  --brand-logo-scale:3.3;

  --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
h1,h2,h3,p{margin:0}
img{max-width:100%}

body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 100% -10%,rgba(25,166,83,.10),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,rgba(29,100,201,.07),transparent 60%),
    var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-synthesis:none;
  font-optical-sizing:auto;
}

#app{position:relative;width:100%;height:100%;overflow:hidden}

/* Retícula sutil de fondo en lugar de manchas animadas */
#app::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(10,107,46,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,107,46,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
}
.ambient{display:none}

/* ============================================================
   BARRA SUPERIOR: marca · narración · controles
   ============================================================ */
.top-brand,.voice-controls,.controls{
  position:absolute;z-index:60;top:16px;height:56px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(207,220,212,.9);
  border-radius:16px;
  box-shadow:var(--sh-float);
}

.top-brand{
  left:20px;
  display:flex;align-items:center;gap:12px;
  padding:0 18px 0 14px;
}
.brand-logo{
  width:156px;height:46px;flex:0 0 auto;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.brand-logo img{
  width:100%;height:100%;object-fit:contain;
  transform:scale(var(--brand-logo-scale));
  transform-origin:center;
  image-rendering:-webkit-optimize-contrast;
}
.top-brand > div{
  display:flex;flex-direction:column;justify-content:center;
  padding-left:12px;border-left:1px solid var(--line);min-width:0;
}
.top-brand strong{font-size:14px;font-weight:800;color:var(--green-900);letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.top-brand span{margin-top:3px;font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}

/* Narración */
.voice-controls{
  left:0;right:0;margin:0 auto;width:fit-content;
  display:flex;align-items:center;gap:8px;padding:0 10px;
}
.voice-chip{
  height:36px;padding:0 12px;border-radius:var(--r-ctrl);
  background:var(--green-100);color:var(--green-800);
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:7px;white-space:nowrap
}
.voice-select,.voice-rate{
  height:36px;border:1px solid var(--line-strong);border-radius:var(--r-ctrl);
  background:#fff;color:var(--ink-2);font:600 12px var(--font);padding:0 10px;outline:none;cursor:pointer
}
.voice-select{max-width:220px}
.voice-rate{width:84px}
.voice-select:focus-visible,.voice-rate:focus-visible{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(25,166,83,.18)}
.voice-status{display:inline-flex;align-items:center;gap:7px;padding:0 4px;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.voice-wave{width:8px;height:8px;border-radius:50%;background:var(--green-500)}
.voice-wave.speaking{animation:voicePulse .8s ease-in-out infinite alternate}
@keyframes voicePulse{from{box-shadow:0 0 0 0 rgba(25,166,83,.45)}to{box-shadow:0 0 0 7px rgba(25,166,83,0)}}

/* Controles */
.controls{right:20px;display:flex;align-items:center;gap:2px;padding:0 8px}
.ctrl{
  width:38px;height:38px;border:0;border-radius:var(--r-ctrl);
  background:transparent;color:var(--ink-2);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s
}
.ctrl:hover{background:var(--green-100);color:var(--green-800)}
.ctrl:focus-visible{outline:2px solid var(--green-600);outline-offset:1px}
#playBtn{background:var(--green-700);color:#fff}
#playBtn:hover{background:var(--green-800)}
.counter{min-width:54px;text-align:center;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;border-left:1px solid var(--line);margin-left:6px;padding-left:8px}

/* Pie: etiqueta de escena + progreso */
.scene-label{
  position:absolute;z-index:55;left:24px;bottom:30px;
  font-size:12px;font-weight:700;color:var(--muted);
  display:flex;align-items:center;gap:8px
}
.scene-label::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--green-600)}
.progress{position:absolute;z-index:60;left:24px;right:24px;bottom:18px;height:3px;background:rgba(10,107,46,.10);border-radius:var(--r-pill);overflow:hidden}
.progress>span{display:block;height:100%;width:0;background:var(--green-600);border-radius:var(--r-pill);transition:width .3s linear}

/* ============================================================
   ESCENAS
   ============================================================ */
.scene{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:96px 56px 64px;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility .6s;
}
.scene.active{opacity:1;visibility:visible;z-index:10}
.scene.leaving{opacity:0}
.scene-inner{width:min(1360px,94vw);height:min(720px,80vh);position:relative}

/* Etiqueta de sección */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 10px;border-radius:var(--r-pill);
  background:var(--green-100);color:var(--green-800);
  font-size:12px;font-weight:700;letter-spacing:0
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green-500)}

/* Tipografía */
.hero-title{font-size:clamp(46px,5.4vw,84px);line-height:1.02;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.hero-title em{font-style:normal;color:var(--green-700)}
.hero-sub{margin-top:22px;max-width:36ch;font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:var(--muted);font-weight:500;text-wrap:pretty}
.stage-title{margin-top:18px;font-size:clamp(28px,2.6vw,42px);line-height:1.15;font-weight:800;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.stage-sub{margin-top:16px;max-width:44ch;font-size:16px;line-height:1.65;color:var(--muted);text-wrap:pretty}

/* Animación de entrada: una sola secuencia por escena */
.reveal{opacity:0;transform:translateY(16px)}
.active .reveal{animation:reveal .7s var(--ease) forwards}
.active .d1{animation-delay:.08s}.active .d2{animation-delay:.18s}.active .d3{animation-delay:.3s}.active .d4{animation-delay:.42s}.active .d5{animation-delay:.54s}
@keyframes reveal{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}
.pop{opacity:0;transform:translateY(12px)}
.active .pop{animation:reveal .6s var(--ease) forwards}
.active .pop:nth-child(1){animation-delay:.2s}.active .pop:nth-child(2){animation-delay:.27s}.active .pop:nth-child(3){animation-delay:.34s}
.active .pop:nth-child(4){animation-delay:.41s}.active .pop:nth-child(5){animation-delay:.48s}.active .pop:nth-child(6){animation-delay:.55s}

/* ============================================================
   PANELES
   ============================================================ */
.browser,.panel,.flow-panel,.table-panel{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:var(--sh-panel);overflow:hidden
}
.flow-panel,.table-panel{height:min(600px,100%);padding:24px}
.panel-browser{height:min(600px,100%)}

/* Navegador simulado */
.browser-bar{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.browser-dot{width:10px;height:10px;border-radius:50%}
.browser-dot.r{background:#f26b5b}.browser-dot.y{background:#f5be4f}.browser-dot.g{background:#3cc46a}
.browser-url{margin-left:10px;flex:1;max-width:520px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--subtle);font-size:12px;display:flex;align-items:center;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-url::before{content:"\f023";font-family:"Font Awesome 6 Free";font-weight:900;font-size:9px;color:var(--green-600);margin-right:8px}

.mock-page{height:calc(100% - 44px);background:var(--surface-2);display:grid;grid-template-columns:210px 1fr}
.mock-sidebar{background:#fff;border-right:1px solid var(--line);padding:16px 12px}
.mock-logo{display:flex;align-items:center;justify-content:center;padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mock-logo img{width:124px;height:52px;object-fit:contain}
.mock-menu{display:grid;gap:3px}
.mi{height:34px;border-radius:8px;padding:0 10px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.mi i{width:14px;text-align:center;color:var(--subtle)}
.mi.active{background:var(--green-100);color:var(--green-800);font-weight:700}
.mi.active i{color:var(--green-700)}
.mock-main{min-width:0}
.mock-hero{
  height:124px;padding:20px 24px;color:#fff;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(120deg,var(--green-900),var(--green-700) 60%,var(--green-600))
}
.mock-hero::after{content:"";position:absolute;right:-50px;bottom:-70px;width:200px;height:200px;border-radius:50%;border:28px solid rgba(255,255,255,.07)}
.mock-hero h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
.mock-hero p{font-size:12px;margin-top:6px;opacity:.85;max-width:420px;line-height:1.5}
.mock-hero img{width:104px;max-height:84px;object-fit:contain;position:relative;z-index:2}
.mock-content{padding:16px}
.search-bar{height:42px;border-radius:var(--r-ctrl);background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--subtle);font-size:12px;margin-bottom:14px}
.search-bar i{color:var(--green-700)}
.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.job-card{min-height:150px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-card)}
.job-card small{font-size:11px;font-weight:700;color:var(--green-700)}
.job-card b{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.job-card span{font-size:12px;color:var(--muted);line-height:1.45;flex:1}
.tag-row{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;color:var(--green-800);background:var(--green-50);border:1px solid var(--green-200);border-radius:var(--r-pill);padding:3px 8px}

/* ============================================================
   ESCENA 1 · INICIO
   ============================================================ */
.scene-intro .scene-inner{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.intro-logo{width:150px;max-height:96px;object-fit:contain;margin-bottom:24px;display:block}
.intro-copy .eyebrow{margin-bottom:18px}
.intro-actions{display:flex;gap:8px;margin-top:30px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-card)
}
.chip i{color:var(--green-700)}
.browser.hero-browser{height:min(580px,100%)}

/* ============================================================
   ESCENAS DE DOS COLUMNAS
   ============================================================ */
.scene-two-col .scene-inner{display:grid;grid-template-columns:minmax(340px,420px) 1fr;gap:56px;align-items:center}

/* Tarjetas de funciones */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature-card{
  min-height:188px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);display:flex;flex-direction:column;justify-content:space-between;gap:18px
}
.feature-card .ficon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--green-100);color:var(--green-700)}
.feature-card:nth-child(2) .ficon{background:var(--blue-bg);color:var(--blue)}
.feature-card:nth-child(3) .ficon{background:var(--amber-bg);color:var(--amber)}
.feature-card:nth-child(4) .ficon{background:var(--violet-bg);color:var(--violet)}
.feature-card:nth-child(5) .ficon{background:var(--red-bg);color:var(--red)}
.feature-card:nth-child(6) .ficon{background:var(--teal-bg);color:var(--teal)}
.feature-card h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.feature-card p{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.55}

/* Filas informativas */
.info-stack{display:grid;gap:10px;margin-top:28px}
.info-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.info-row .ico{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center}
.info-row b{font-size:14px;font-weight:700}
.info-row span{display:block;margin-top:2px;font-size:12px;color:var(--muted)}

/* Flujos (pasos secuenciales) */
.flow-panel > .eyebrow{margin-bottom:6px}
.flow-steps{display:grid;gap:0;margin-top:14px;position:relative}
.flow-step{
  position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;
  padding:14px 6px;border-bottom:1px solid var(--line)
}
.flow-step:last-child{border-bottom:0}
.flow-step:not(:last-child)::after{
  content:"";position:absolute;left:27px;top:58px;bottom:-14px;width:2px;background:var(--green-200);z-index:0
}
.flow-num{
  position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  background:#fff;border:2px solid var(--green-600);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums
}
.flow-step:last-child .flow-num{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.flow-step b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.flow-step span{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.45}
.flow-step > i{width:34px;height:34px;border-radius:9px;background:var(--surface-2);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:13px}

/* Tablas */
.table-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:15px;font-weight:700;color:var(--ink)}
.table-title i{width:34px;height:34px;border-radius:9px;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:14px}
.data-table{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.row{display:grid;grid-template-columns:1.3fr 1fr 1fr .9fr;align-items:center;min-height:50px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row:not(.head):nth-child(odd){background:var(--surface-2)}
.row.head{background:var(--green-50);min-height:40px}
.row>div{padding:10px 14px;font-size:13px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.row>div:first-child{font-weight:600;color:var(--ink)}
.row.head>div{font-size:12px;font-weight:700;color:var(--green-800)}
.state{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:var(--green-100);color:var(--green-800);white-space:nowrap}
.state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.state.warn{background:var(--amber-bg);color:var(--amber)}
.state.red{background:var(--red-bg);color:var(--red)}
.state.blue{background:var(--blue-bg);color:var(--blue)}

/* KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.kpi{padding:14px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.kpi span{display:block;font-size:12px;color:var(--muted);font-weight:600}
.kpi b{display:block;margin-top:6px;font-size:18px;font-weight:800;color:var(--green-800);letter-spacing:-.02em}

/* Tarjetas administrativas */
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.admin-card{min-height:118px;padding:18px;border:1px solid var(--line);border-radius:var(--r-card);background:#fff;display:flex;align-items:flex-start;gap:14px}
.admin-card .ai{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:16px}
.admin-card:nth-child(2) .ai{background:var(--blue-bg);color:var(--blue)}
.admin-card:nth-child(3) .ai{background:var(--red-bg);color:var(--red)}
.admin-card:nth-child(4) .ai{background:var(--violet-bg);color:var(--violet)}
.admin-card:nth-child(5) .ai{background:var(--amber-bg);color:var(--amber)}
.admin-card:nth-child(6) .ai{background:var(--teal-bg);color:var(--teal)}
.admin-card b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.admin-card span{display:block;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.5}

/* ============================================================
   ESCENA FINAL
   ============================================================ */
.scene-final .scene-inner{display:flex;align-items:center;justify-content:center}
.final-wrap{max-width:900px;margin:auto;text-align:center}
.final-logo{width:170px;max-height:118px;object-fit:contain;margin:0 auto 22px;display:block}
.final-title{margin-top:20px;font-size:clamp(46px,6vw,88px);font-weight:800;letter-spacing:-.03em;line-height:1.02;color:var(--ink)}
.final-title span{color:var(--green-700)}
.final-sub{margin:22px auto 0;max-width:46ch;color:var(--muted);font-size:19px;line-height:1.6;text-wrap:pretty}
.final-badges{margin-top:30px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.final-badges span{padding:8px 14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink-2);font-size:13px;font-weight:600;box-shadow:var(--sh-card)}

/* ============================================================
   PANTALLA DE INICIO
   ============================================================ */
.presentation-start{
  position:absolute;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(242,246,243,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.presentation-start.hidden{display:none}
.presentation-start-card{
  width:min(520px,92vw);padding:40px 36px 32px;border-radius:24px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-panel);text-align:center;position:relative;overflow:hidden
}
.presentation-start-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--green-800),var(--green-500))}
.presentation-start-logo{width:120px;max-height:90px;object-fit:contain;margin:0 auto 18px;display:block}
.presentation-start h2{color:var(--ink);font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.presentation-start p{margin:12px auto 0;max-width:40ch;color:var(--muted);font-size:14px;line-height:1.6}
.presentation-start button{
  margin-top:26px;min-height:50px;padding:0 26px;border:0;border-radius:12px;
  background:var(--green-700);color:#fff;font:700 14px var(--font);cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 10px 24px -8px rgba(10,107,46,.55);transition:background .2s,transform .2s
}
.presentation-start button:hover{background:var(--green-800);transform:translateY(-1px)}
.presentation-start button:focus-visible{outline:3px solid var(--green-200);outline-offset:2px}
.presentation-start small{display:block;margin-top:14px;color:var(--subtle);font-size:12px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .voice-chip{display:none}
  .voice-select{max-width:160px}
}
@media (max-width:950px){
  .top-brand{left:12px;top:12px;height:50px;padding:0 12px 0 6px}
  .brand-logo{width:128px;height:40px}
  .top-brand > div{display:none}
  .controls{right:12px;top:12px;height:50px}
  .voice-controls{top:auto;bottom:34px;height:auto;padding:6px;flex-wrap:wrap;justify-content:center;max-width:94vw}
  .scene-label{display:none}
  .scene{padding:80px 16px 100px}
  .scene-inner{height:auto;max-height:100%}
  .scene-intro .scene-inner,.scene-two-col .scene-inner{grid-template-columns:1fr;gap:20px}
  .scene-intro .intro-copy{display:none}
  .scene-two-col .scene-inner > div:first-child .stage-sub,
  .scene-two-col .scene-inner > div:first-child .info-stack{display:none}
  .stage-title{font-size:24px;margin-top:10px}
  .browser.hero-browser{transform:none;height:62vh}
  .flow-panel,.table-panel,.panel-browser{height:auto;max-height:62vh;overflow:auto}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .job-grid{grid-template-columns:1fr}
  .mock-page{grid-template-columns:1fr}
  .mock-sidebar{display:none}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .admin-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .reveal,.pop{opacity:1;transform:none}
}

/* ============================================================
   NITIDEZ DE TEXTO
   Al terminar las animaciones no queda ninguna transformación
   activa, así el navegador vuelve a dibujar el texto en píxel exacto.
   ============================================================ */
.active .reveal,.active .pop{animation-fill-mode:both}
.reveal,.pop,.browser,.flow-panel,.table-panel,.feature-card,.admin-card,.job-card{
  backface-visibility:visible;
  will-change:auto;
}
.top-brand,.voice-controls,.controls{
  /* El desenfoque de fondo solo afecta el fondo, no el texto */
  isolation:isolate;
}
h1,h2,h3,b,strong{-webkit-text-stroke:0}

/* ============================================================
   ENTRADA VISUAL PROFESIONAL · EMPLEARTE.COM
   Compatible con index_EMPLEARTE_CON_ENTRADA_VISUAL.html
   ============================================================ */

.presentation-start{
  position:absolute;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  overflow:hidden;

  background:
    radial-gradient(circle at 8% 12%, rgba(43,195,96,.11), transparent 23%),
    radial-gradient(circle at 89% 13%, rgba(76,124,255,.10), transparent 24%),
    radial-gradient(circle at 13% 92%, rgba(34,176,87,.08), transparent 22%),
    radial-gradient(circle at 79% 84%, rgba(113,82,255,.07), transparent 24%),
    linear-gradient(145deg,#f8fbf9 0%,#eef8f1 46%,#eef4fb 100%);
}

.presentation-start::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.20;

  background-image:
    linear-gradient(rgba(10,107,46,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,107,46,.05) 1px,transparent 1px);

  background-size:46px 46px;

  mask-image:
    radial-gradient(ellipse at 50% 42%,#000 25%,transparent 82%);

  -webkit-mask-image:
    radial-gradient(ellipse at 50% 42%,#000 25%,transparent 82%);
}

.presentation-start::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-190px;
  top:-170px;
  border-radius:50%;
  pointer-events:none;

  background:
    radial-gradient(circle,rgba(25,166,83,.14),rgba(25,166,83,0) 70%);

  filter:blur(3px);
}

.presentation-start.hidden{
  display:none;
}

.presentation-intro-wrap{
  position:relative;
  z-index:2;

  width:min(1360px,96vw);
  min-height:650px;

  display:grid;
  grid-template-columns:minmax(500px,1.05fr) minmax(500px,.95fr);
  gap:46px;
  align-items:center;
}

/* ============================================================
   COLUMNA IZQUIERDA · MENSAJE DE APERTURA
   ============================================================ */

.presentation-start-card{
  width:auto;
  padding:0;

  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;

  text-align:left;
  overflow:visible;
}

.presentation-start-card::before{
  display:none;
}

.presentation-start-logo{
  width:450px;
  max-height:192px;
  object-fit:contain;

  display:block;
  margin:0 0 20px;

  filter:
    drop-shadow(0 14px 26px rgba(6,61,28,.14))
    drop-shadow(0 4px 8px rgba(15,23,42,.05));
}

.presentation-start .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin:0;
  padding:7px 13px;

  background:rgba(255,255,255,.86);
  color:var(--green-800);

  border:1px solid rgba(207,224,214,.96);
  border-radius:var(--r-pill);

  box-shadow:0 10px 24px -14px rgba(6,61,28,.26);

  font-size:12px;
  font-weight:700;
}

.presentation-start h2{
  margin:22px 0 0;

  max-width:620px;

  color:var(--ink);

  font-size:clamp(48px,5vw,76px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.045em;

  text-wrap:balance;
}

.presentation-start p{
  margin:18px 0 0;

  max-width:620px;

  color:var(--muted);

  font-size:16px;
  line-height:1.68;
  font-weight:500;

  text-wrap:pretty;
}

.presentation-start p strong{
  color:var(--ink-2);
  font-weight:800;
}

.intro-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:28px;
}

.intro-chips .chip{
  min-height:42px;
  padding:0 14px;

  display:inline-flex;
  align-items:center;
  gap:8px;

  background:rgba(255,255,255,.92);
  color:var(--ink-2);

  border:1px solid var(--line);
  border-radius:var(--r-pill);

  box-shadow:var(--sh-card);

  font-size:12px;
  font-weight:700;

  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    border-color .22s var(--ease);
}

.intro-chips .chip i{
  color:var(--green-700);
}

@media (hover:hover) and (pointer:fine){
  .intro-chips .chip:hover{
    transform:translateY(-3px);
    border-color:var(--green-200);
    box-shadow:var(--sh-float);
  }
}

#startPresentationEntry{
  min-height:52px;
  margin-top:26px;
  padding:0 24px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border:0;
  border-radius:13px;

  background:
    linear-gradient(135deg,var(--green-700),var(--green-600));

  color:#fff;

  font:800 14px var(--font);

  cursor:pointer;

  box-shadow:
    0 14px 28px -12px rgba(10,107,46,.56),
    0 4px 10px rgba(6,61,28,.08);

  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    filter .22s ease;
}

#startPresentationEntry:hover{
  transform:translateY(-2px);
  filter:brightness(.98);

  box-shadow:
    0 18px 34px -12px rgba(10,107,46,.60),
    0 6px 12px rgba(6,61,28,.10);
}

#startPresentationEntry:disabled{
  opacity:.78;
  cursor:default;
  transform:none;
}

#entryAudioStatus{
  display:block;

  margin-top:14px;

  color:var(--subtle);

  font-size:11px;
  line-height:1.45;
  font-weight:600;
}

/* ============================================================
   COLUMNA DERECHA · VISUAL CORPORATIVO
   ============================================================ */

.presentation-intro-visual{
  position:relative;

  min-height:590px;
  padding:22px;

  overflow:hidden;

  border:1px solid rgba(205,224,213,.96);
  border-radius:30px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,252,250,.96));

  box-shadow:
    0 34px 70px -22px rgba(6,61,28,.24),
    0 14px 30px -16px rgba(15,23,42,.12),
    0 0 0 1px rgba(255,255,255,.72) inset;

  transform:
    perspective(1400px)
    rotateY(-2deg)
    rotateX(1deg);

  transform-origin:center;
}

.presentation-intro-visual::before{
  content:"";
  position:absolute;

  width:250px;
  height:250px;

  right:-70px;
  top:-80px;

  border-radius:50%;

  background:
    radial-gradient(circle,rgba(36,191,92,.17),rgba(36,191,92,0) 70%);

  pointer-events:none;
}

.presentation-intro-visual::after{
  content:"";
  position:absolute;

  width:280px;
  height:280px;

  left:-100px;
  bottom:-110px;

  border-radius:50%;

  background:
    radial-gradient(circle,rgba(61,110,225,.10),rgba(61,110,225,0) 70%);

  pointer-events:none;
}

.intro-panel{
  position:relative;
  z-index:2;

  height:100%;

  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:16px;
}

.intro-panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  flex-wrap:wrap;
}

.intro-badge{
  min-height:34px;
  padding:0 12px;

  display:inline-flex;
  align-items:center;
  gap:8px;

  border-radius:var(--r-pill);

  background:var(--green-50);
  border:1px solid var(--green-200);

  color:var(--green-800);

  font-size:11px;
  font-weight:700;
}

/* KPIs */
.intro-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.intro-kpi{
  min-height:94px;
  padding:16px;

  border:1px solid var(--line);
  border-radius:var(--r-card);

  background:
    linear-gradient(180deg,#fff,#fbfdfc);

  box-shadow:var(--sh-card);
}

.intro-kpi small{
  display:block;

  color:var(--subtle);

  font-size:10px;
  line-height:1.2;
  font-weight:700;
}

.intro-kpi b{
  display:block;

  margin-top:7px;

  color:var(--green-800);

  font-size:28px;
  line-height:1;
  font-weight:800;

  letter-spacing:-.03em;
}

.intro-kpi span{
  display:block;

  margin-top:6px;

  color:var(--muted);

  font-size:11px;
  line-height:1.35;
  font-weight:500;
}

/* Navegador visual */
.intro-browser{
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:20px;

  background:#fff;

  box-shadow:
    0 18px 40px -20px rgba(6,61,28,.24),
    0 8px 18px -12px rgba(15,23,42,.10);
}

.intro-browser-bar{
  height:52px;
  padding:0 16px;

  display:flex;
  align-items:center;
  gap:10px;

  background:var(--surface-2);

  border-bottom:1px solid var(--line);
}

.intro-browser-dots{
  display:flex;
  gap:6px;
}

.intro-browser-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#dce7df;
}

.intro-browser-dots span:nth-child(1){background:#ef7568}
.intro-browser-dots span:nth-child(2){background:#efc25c}
.intro-browser-dots span:nth-child(3){background:#55c67a}

.intro-search{
  flex:1;

  height:34px;
  padding:0 13px;

  display:flex;
  align-items:center;

  border:1px solid var(--line);
  border-radius:9px;

  background:#fff;

  color:var(--subtle);

  font-size:11px;
  font-weight:600;
}

.intro-browser-content{
  padding:16px;

  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
}

/* Tarjeta principal de oportunidad */
.intro-job-card{
  min-height:230px;
  padding:22px;

  position:relative;
  overflow:hidden;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      var(--green-900),
      var(--green-700) 58%,
      var(--green-600)
    );

  color:#fff;

  box-shadow:
    0 22px 46px -20px rgba(6,61,28,.56);
}

.intro-job-card::before{
  content:"";
  position:absolute;

  width:190px;
  height:190px;

  right:-70px;
  top:-70px;

  border-radius:50%;

  border:28px solid rgba(255,255,255,.05);
}

.intro-job-card::after{
  content:"";
  position:absolute;

  width:150px;
  height:150px;

  right:-40px;
  bottom:-55px;

  border-radius:50%;

  background:
    radial-gradient(circle,rgba(255,255,255,.13),rgba(255,255,255,0) 72%);
}

.intro-job-card h3{
  position:relative;
  z-index:2;

  margin:0;

  max-width:12ch;

  font-size:30px;
  line-height:1.04;
  font-weight:800;

  letter-spacing:-.035em;
}

.intro-job-card p{
  position:relative;
  z-index:2;

  margin:14px 0 0;

  max-width:34ch;

  color:rgba(255,255,255,.84);

  font-size:12px;
  line-height:1.55;
}

.intro-job-tags{
  position:relative;
  z-index:2;

  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:20px;
}

.intro-job-tags span{
  min-height:28px;
  padding:0 9px;

  display:inline-flex;
  align-items:center;

  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);

  background:rgba(255,255,255,.12);

  color:#fff;

  font-size:10px;
  font-weight:700;
}

/* Tarjetas laterales */
.intro-side-stack{
  display:grid;
  gap:10px;
}

.intro-mini-card{
  min-height:102px;
  padding:14px;

  border:1px solid var(--line);
  border-radius:15px;

  background:
    linear-gradient(180deg,#fff,#fbfdfc);

  box-shadow:var(--sh-card);

  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    border-color .22s var(--ease);
}

.intro-mini-card .row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.intro-mini-card .icon{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:var(--green-100);
  color:var(--green-700);

  font-size:16px;
}

.intro-mini-card strong{
  display:block;

  margin-top:10px;

  color:var(--ink);

  font-size:13px;
  line-height:1.2;
  font-weight:700;
}

.intro-mini-card p{
  margin:6px 0 0;

  color:var(--muted);

  font-size:11px;
  line-height:1.45;
}

@media (hover:hover) and (pointer:fine){
  .intro-mini-card:hover{
    transform:translateY(-4px);
    border-color:var(--green-200);
    box-shadow:var(--sh-float);
  }
}

/* Footer de beneficios */
.intro-visual-footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.intro-footer-pill{
  min-height:40px;
  padding:0 10px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  border:1px solid var(--line);
  border-radius:11px;

  background:var(--surface-2);

  color:var(--ink-2);

  font-size:10px;
  line-height:1.2;
  font-weight:700;
}

/* ============================================================
   MOVIMIENTO DE ENTRADA
   ============================================================ */

.presentation-start:not(.hidden) .presentation-start-card{
  animation:introCopyIn .85s var(--ease) both;
}

.presentation-start:not(.hidden) .presentation-intro-visual{
  animation:introVisualIn 1s .08s var(--ease) both;
}

.presentation-start:not(.hidden) .intro-kpi{
  animation:introCardIn .65s var(--ease) both;
}

.presentation-start:not(.hidden) .intro-kpi:nth-child(1){animation-delay:.22s}
.presentation-start:not(.hidden) .intro-kpi:nth-child(2){animation-delay:.30s}
.presentation-start:not(.hidden) .intro-kpi:nth-child(3){animation-delay:.38s}

.presentation-start:not(.hidden) .intro-mini-card{
  animation:introCardIn .65s var(--ease) both;
}

.presentation-start:not(.hidden) .intro-mini-card:nth-child(1){animation-delay:.46s}
.presentation-start:not(.hidden) .intro-mini-card:nth-child(2){animation-delay:.54s}
.presentation-start:not(.hidden) .intro-mini-card:nth-child(3){animation-delay:.62s}

@keyframes introCopyIn{
  from{
    opacity:0;
    transform:translate3d(-24px,18px,0);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes introVisualIn{
  from{
    opacity:0;
    transform:
      perspective(1400px)
      translate3d(36px,20px,0)
      rotateY(-7deg)
      rotateX(3deg)
      scale(.97);
  }
  to{
    opacity:1;
    transform:
      perspective(1400px)
      rotateY(-2deg)
      rotateX(1deg)
      scale(1);
  }
}

@keyframes introCardIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(.98);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* ============================================================
   RESPONSIVE DE LA INTRODUCCIÓN
   ============================================================ */

@media(max-width:1180px){
  .presentation-intro-wrap{
    grid-template-columns:1fr;
    gap:28px;
    min-height:auto;
  }

  .presentation-start{
    align-items:flex-start;
    overflow:auto;
  }

  .presentation-start h2{
    max-width:none;
  }

  .presentation-intro-visual{
    min-height:560px;
    transform:none;
  }
}

@media(max-width:760px){
  .presentation-start{
    padding:20px 14px 32px;
  }

  .presentation-intro-wrap{
    width:100%;
    gap:22px;
  }

  .presentation-start-logo{
    width:180px;
    max-height:78px;
  }

  .presentation-start h2{
    font-size:42px;
  }

  .presentation-start p{
    font-size:14px;
  }

  .intro-kpis{
    grid-template-columns:1fr;
  }

  .intro-browser-content{
    grid-template-columns:1fr;
  }

  .intro-visual-footer{
    grid-template-columns:repeat(2,1fr);
  }

  .presentation-intro-visual{
    min-height:auto;
    padding:14px;
    border-radius:22px;
  }
}


/* ============================================================
   REFUERZO FINAL · LOGO DE ENTRADA AL DOBLE
   ============================================================ */
.presentation-start-logo{
  width:450px !important;
  max-height:192px !important;
  object-fit:contain !important;
  margin:18px 0 28px 24px !important;
  transform-origin:left center !important;
}

@media(max-width:760px){
  .presentation-start-logo{
    width:320px !important;
    max-height:140px !important;
    margin:14px auto 22px !important;
  }
}