/* ==========================================================================
   Dreza × Dreamlum
   Dreza (app de reclutamiento de Dreamlum) dentro de la identidad NEO:
   - el sitio sigue oscuro y neón (Dreamlum),
   - las secciones "papel" usan la paleta de la app Dreza (beige, violeta, lima)
     con el borde neón de Dreamlum, para que se note que es un producto de la casa.
   Lo usan dreza.html y la banda #dreza del inicio.
   ========================================================================== */
:root {
  --dz: #8b74ff;              /* violeta Dreza aclarado para fondo oscuro */
  --dz-paper: #F3ECDF;
  --dz-paper-2: #FBF7F0;
  --dz-ink: #1D1A16;
  --dz-ink-2: #4A433A;
  --dz-muted: #5E564B;
  --dz-line: #E2D8C6;
  --dz-violet: #4B2BD6;
  --dz-violet-2: #2F1A94;
  --dz-violet-soft: #ECE6FF;
  --dz-lime: #C6F432;
  --dz-lime-ink: #2C3A00;
  --dz-neon: linear-gradient(100deg, #b026ff, #2f6bff 45%, #00e0ff 70%, #c6f432);
}

/* ---------- Marca ---------- */
.dz-mark { margin: 0 0 1.4rem; font: 800 clamp(2.2rem, 4.4vw, 3.2rem)/1 var(--display); letter-spacing: -.05em; color: var(--dz-paper); }
.dz-mark span { color: var(--dz); }
.dz-mark small { margin-left: .7rem; font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.dz-word { font: inherit; letter-spacing: -.05em; }
.dz-word span { color: var(--dz); }

/* ---------- Portada: texto + teléfono con la app ---------- */
.dz-hero .o1 { background: radial-gradient(circle, rgba(139, 116, 255, .38), transparent 65%); }
.dz-hero .o2 { background: radial-gradient(circle, rgba(198, 244, 50, .14), transparent 65%); }
.dz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dz-hero h1 { max-width: 12ch; }
.dz-hero .lead { max-width: 56ch; }
.dz-phone { position: relative; justify-self: center; width: min(100%, 380px); padding: 14px; border-radius: 48px; background: linear-gradient(160deg, #1b1830, #0b0a12); box-shadow: 0 0 0 1px rgba(139, 116, 255, .35), 0 50px 120px -30px rgba(139, 116, 255, .55), 0 0 80px -20px rgba(198, 244, 50, .25); }
.dz-phone::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: var(--dz-neon); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; pointer-events: none; }
.dz-phone-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 10px; font: 600 .72rem/1 var(--sans); color: var(--dz-ink); }
.dz-phone-screen { border-radius: 36px; overflow: hidden; background: var(--dz-paper); }
.dz-phone-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 4px; }
.dz-phone-head .dz-word { font: 800 1.35rem/1 var(--display); color: var(--dz-ink); }
.dz-phone-head .dz-word span { color: var(--dz-violet); }
.dz-phone-head small { font: 500 .6rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dz-muted); }

/* Tarjeta de la app (dentro del teléfono) */
.dz-app { padding: 12px 14px 16px; color: var(--dz-ink); font-size: .88rem; }
.dz-app .dz-app-top { margin: 0 4px 10px; color: var(--dz-ink-2); font-size: .84rem; line-height: 1.45; }
.dz-app-top .dz-dot { display: inline-block; width: 9px; height: 9px; margin-right: .45rem; border-radius: 50%; background: var(--dz-violet); box-shadow: 0 0 0 4px var(--dz-violet-soft); vertical-align: 1px; }
.dz-app-top b { color: var(--dz-ink); }
.dz-job { background: #fff; border: 1px solid var(--dz-line); border-radius: 22px; padding: 16px; box-shadow: 0 10px 30px -18px rgba(29, 26, 22, .35); }
.dz-job-k { display: inline-block; font: 500 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dz-violet); background: var(--dz-violet-soft); padding: .42rem .65rem; border-radius: 999px; }
.dz-job-h { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: .85rem 0 .7rem; }
.dz-job-h b { display: block; font: 700 1.1rem/1.2 var(--display); }
.dz-job-h small { color: var(--dz-muted); font-size: .76rem; }
.dz-match { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dz-violet) 86%, var(--dz-violet-soft) 0); }
.dz-match::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.dz-match b, .dz-match i { position: relative; }
.dz-match b { font: 800 .98rem/1 var(--display); color: var(--dz-ink); }
.dz-match i { font: 500 .52rem/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--dz-muted); }
.dz-job ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .32rem; }
.dz-job li { display: flex; gap: .45rem; align-items: flex-start; color: var(--dz-ink-2); font-size: .8rem; line-height: 1.4; }
.dz-job li svg { width: 14px; height: 14px; flex: none; margin-top: .15rem; color: var(--dz-violet); }
.dz-app .dz-renta { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--dz-line); font-size: .8rem; color: var(--dz-muted); }
.dz-renta b { color: var(--dz-ink); }
.dz-app-btns { display: flex; gap: .45rem; margin-top: .85rem; }
.dz-app-btns span { flex: 1; text-align: center; padding: .62rem .6rem; border-radius: 999px; border: 1px solid var(--dz-line); font-weight: 600; font-size: .8rem; background: #fff; }
.dz-app-btns .dz-ok { background: var(--dz-lime); border-color: var(--dz-lime); color: var(--dz-lime-ink); }
.dz-phone-nav { display: flex; justify-content: space-around; padding: 10px 12px 14px; border-top: 1px solid var(--dz-line); background: var(--dz-paper-2); }
.dz-phone-nav i { width: 34px; height: 5px; border-radius: 999px; background: var(--dz-line); }
.dz-phone-nav i:first-child { background: var(--dz-violet); }

/* Estado del lanzamiento */
.dz-status { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.dz-status > span { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font-size: .84rem; color: var(--muted); }
.dz-status b { color: var(--ink); font-weight: 600; }
.dz-status .dz-live { color: var(--ink); border-color: rgba(198, 244, 50, .45); background: rgba(198, 244, 50, .08); }
.dz-live i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: dzPulse 1.6s ease-in-out infinite; }
@keyframes dzPulse { 50% { opacity: .35; } }
.dz-store svg { width: 15px; height: 15px; color: var(--dz); }

/* ---------- Papel Dreza: secciones con la paleta de la app y borde neón de Dreamlum ---------- */
.dz-paper {
  --ink: var(--dz-ink); --muted: var(--dz-muted); --dim: #8a7f70; --line: var(--dz-line); --line-2: #d5c7ae;
  --glass: #fff; --glass-2: #fff;
  --violet: var(--dz-violet); --blue: #2f55d4; --cyan: #0b7d93; --lime: #557300; --dz: var(--dz-violet);
  position: relative; isolation: isolate; color: var(--ink); background: var(--dz-paper);
  border-radius: 44px; padding: clamp(28px, 5vw, 72px);
  box-shadow: 0 50px 140px -60px rgba(139, 116, 255, .6);
}
.dz-paper::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--dz-neon); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.dz-paper .tag::before { box-shadow: none; }
.dz-paper .blk-head p, .dz-paper .lead { color: var(--dz-muted); }
.dz-paper .glass { background: #fff; border-color: var(--dz-line); box-shadow: 0 1px 0 rgba(29, 26, 22, .04), 0 18px 40px -30px rgba(29, 26, 22, .35); }
.dz-paper .glass:hover { border-color: color-mix(in srgb, var(--accent, var(--dz-violet)) 55%, transparent); }
.dz-paper .ci-n { display: inline-flex; align-self: flex-start; padding: .38rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dz-paper .ci p, .dz-paper .ci li { color: var(--dz-ink-2); }
.dz-paper .st b { -webkit-text-stroke: 1.2px color-mix(in srgb, var(--accent) 85%, transparent); }
.dz-paper .btn-lime { background: var(--dz-lime); color: var(--dz-ink); }
.dz-paper .btn-ghost { background: #fff; border-color: #d5c7ae; color: var(--dz-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dz-paper .btn-ghost:hover { border-color: var(--dz-violet); box-shadow: 0 0 0 1px var(--dz-violet); }
.dz-paper a:not(.btn) { color: var(--dz-violet); }
.dz-paper .quote { background: #fff; border-left-color: var(--dz-violet); }
.dz-paper .quote cite { color: var(--dz-muted); }
.dz-paper .dz-mark { color: var(--dz-ink); }
.dz-paper .dz-mark span, .dz-paper .dz-word span { color: var(--dz-violet); }
.dz-paper-sec { padding-block: clamp(40px, 6vw, 80px); }

/* ---------- Ficha "Qué es Dreza" ---------- */
.dz-def { padding: clamp(8px, 1.5vw, 16px) clamp(18px, 3vw, 32px); }
.dz-def dl { margin: 0; }
.dz-def dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.dz-def dl > div:last-child { border-bottom: 0; }
.dz-def dt { font: 500 .7rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dz); }
.dz-def dd { margin: 0; color: var(--ink); }
.dz-def a { color: var(--lime); }
.dz-h3 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin-top: 1rem; }

/* ---------- Funciones con IA ---------- */
.dz-group { display: flex; align-items: center; gap: .8rem; font: 600 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: clamp(28px, 4vw, 44px) 0 16px; }
.dz-group::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.dz-ai .ci-sub { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); }
.dz-lumi-tag { display: inline-flex; align-items: center; gap: .55rem; }
.dz-lumi-tag::before { display: none; }
.dz-lumi-av { width: 26px; height: 26px; display: inline-grid; }
.dz-lumi-av .lumi-av { width: 26px; height: 26px; }

/* ---------- Comparación ---------- */
.dz-vs { padding: 0; overflow-x: auto; }
.dz-vs table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .94rem; }
.dz-vs th, .dz-vs td { text-align: left; vertical-align: top; padding: 1rem clamp(14px, 2vw, 24px); border-bottom: 1px solid var(--line); }
.dz-vs tbody tr:last-child > * { border-bottom: 0; }
.dz-vs thead th { font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.dz-vs tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.dz-vs td { color: var(--muted); }
.dz-vs .dz-col { color: var(--ink); font-weight: 500; background: var(--dz-violet-soft); }
.dz-vs thead .dz-col { color: var(--dz-violet); }
@media (max-width: 640px) {
  .dz-vs table, .dz-vs tbody, .dz-vs tr, .dz-vs th, .dz-vs td { display: block; min-width: 0; width: auto; }
  .dz-vs thead { display: none; }
  .dz-vs tbody tr { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
  .dz-vs tbody tr:last-child { border-bottom: 0; }
  .dz-vs tbody th, .dz-vs td { padding: 0; border: 0; width: auto; }
  .dz-vs tbody th { margin-bottom: .6rem; }
  .dz-vs td { padding: .55rem .75rem; border-radius: 12px; }
  .dz-vs td::before { content: attr(data-l); display: block; margin-bottom: .25rem; font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
  .dz-vs td.dz-col { margin-top: .4rem; }
  .dz-vs td.dz-col::before { color: var(--dz-violet); }
}

/* ---------- Lanzamiento ---------- */
.dz-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dz-steps li { padding: clamp(22px, 2.6vw, 30px); }
.dz-steps li.is-on { border-color: rgba(139, 116, 255, .5); }
.dz-steps li:not(.is-on) { border-style: dashed; }
.dz-steps span { font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dz); }
.dz-steps li:not(.is-on) span { color: var(--lime); }
.dz-steps h3 { font-size: 1.25rem; margin-top: .9rem; }
.dz-steps p { color: var(--muted); font-size: .92rem; margin: .6rem 0 0; }
.dz-steps a { color: var(--lime); }

/* ---------- Cierre en violeta Dreza ---------- */
.dz-cta { position: relative; overflow: hidden; text-align: center; padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 64px); border-radius: 44px; color: var(--dz-paper);
  background: radial-gradient(60% 80% at 85% 10%, rgba(198, 244, 50, .22), transparent 60%), linear-gradient(135deg, var(--dz-violet), var(--dz-violet-2)); box-shadow: 0 50px 140px -50px rgba(75, 43, 214, .8); }
.dz-cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--dz-neon); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.dz-cta .tag { color: var(--dz-lime); }
.dz-cta h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); max-width: 22ch; margin: 1rem auto 0; }
.dz-cta p { color: rgba(243, 236, 223, .82); max-width: 60ch; margin: 1.2rem auto 0; }
.dz-cta .p-ctas { justify-content: center; }
.dz-cta .btn-lime { background: var(--dz-lime); color: var(--dz-ink); }
.dz-cta .btn-ghost { background: rgba(255, 255, 255, .1); border-color: rgba(243, 236, 223, .35); color: var(--dz-paper); }

/* ---------- Banda Dreza en el inicio ---------- */
.dz-band { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.dz-band h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); margin-top: 1rem; }
.dz-band h2 em { font-style: normal; color: var(--dz-violet); }
.dz-band p { color: var(--dz-ink-2); margin: 1rem 0 0; }
.dz-band .dz-status > span { background: #fff; border-color: var(--dz-line); color: var(--dz-ink-2); }
.dz-band .dz-status b { color: var(--dz-ink); }
.dz-band .dz-status .dz-live { background: var(--dz-lime); border-color: var(--dz-lime); color: var(--dz-lime-ink); }
.dz-band .dz-live i { background: var(--dz-lime-ink); box-shadow: none; }
.dz-band .checks li { color: var(--dz-ink-2); }
.dz-band .checks b { color: var(--dz-ink); }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .dz-hero-grid { grid-template-columns: 1fr; }
  .dz-phone { margin-top: 8px; }
}
@media (max-width: 860px) {
  .dz-band { grid-template-columns: 1fr; }
  .dz-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dz-paper, .dz-cta { border-radius: 28px; }
  .dz-paper { padding: 26px 18px; }
  .dz-def dl > div { grid-template-columns: 1fr; gap: .3rem; }
  .dz-phone { width: min(100%, 340px); border-radius: 42px; }
}
@media (prefers-reduced-motion: reduce) { .dz-live i { animation: none; } }

/* Cinco principios: 3 arriba y 2 más anchos abajo, sin huecos */
@media (min-width: 961px) {
  .cgrid.dz-five { grid-template-columns: repeat(6, 1fr); }
  .cgrid.dz-five > * { grid-column: span 2; }
  .cgrid.dz-five > :nth-child(n+4) { grid-column: span 3; }
}