/* Base de marca DASTAN X-TECH (compartida por las 8 demos del muestrario).
   Colores, tipografía y piezas comunes sacados de dastanxtech.com. */
@import url("fuentes/fuentes.css");
:root {
  --fondo: #0a090e; --fondo-2: #07050a; --panel: #131019; --borde: #24202d; --borde-fuerte: #322c3d;
  --texto: #ece9f2; --suave: #b3acc2; --violeta: #a855f7; --violeta-claro: #c084fc; --violeta-oscuro: #7c3aed;
  --turquesa: #2dd4bf; --whatsapp: #25d366; --claro: #faf9fc; --lavanda: #ece6f8; --tinta: #16121d;
  --degradado: linear-gradient(90deg, #BA45FF 0%, #8B7FE0 50%, #34DCAB 100%);
  --f-texto: 'Geist', system-ui, sans-serif; --f-mono: 'Geist Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Títulos: interlineado propio (sin esto heredan el 1.6 del cuerpo y las líneas quedan muy separadas).
   Cada estilo lo ajusta en su propio <style>, que va después y manda. */
h1, h2, h3 { line-height: 1.12; }
body { background: var(--fondo); color: var(--texto); font-family: var(--f-texto); font-weight: 400; font-size: 17px; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
/* Texto en degradado: SIN sombra (la sombra se ve a través del texto transparente y lo apaga).
   Sobre fondo oscuro, tonos claros; sobre fondo claro, tonos oscuros. Todos ≥ 4:1. */
.grad { background: var(--grad-luz); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
:root { --grad-luz: linear-gradient(90deg, #D9A3FF 0%, #ABA4F5 50%, #5EF0C6 100%); --grad-tinta: linear-gradient(90deg, #7E22CE 0%, #5B4FC4 50%, #0D8A73 100%); }
[data-estilo="editorial"] .grad, [data-estilo="minimal-premium"] .grad { background-image: var(--grad-tinta); }
/* franjas oscuras dentro de las páginas claras */
[data-estilo="editorial"] .final .grad, [data-tema="oscuro"] .grad { background-image: var(--grad-luz); }
.mono { font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.eti { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--violeta-claro); }

/* Cabecera */
.dx-nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 48px); transition: background .4s; }
.dx-nav.is-scrolled { background: rgba(10, 9, 14, .55); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 1px 0 var(--borde); }
.dx-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: .02em; font-size: 16px; }
.dx-marca img { width: 34px; height: 34px; }
.dx-links { display: flex; gap: 26px; font-size: 15px; font-weight: 500; }
.dx-links a { text-decoration: none; color: var(--suave); }
.dx-links a:hover { color: var(--texto); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn--wa { background: var(--whatsapp); color: #06280f; }
.btn--turquesa { background: var(--turquesa); color: #062420; box-shadow: 0 10px 30px rgba(45, 212, 191, .25); }
.btn--borde { border: 1.5px solid var(--borde-fuerte); color: var(--texto); }
.btn svg { width: 18px; height: 18px; }

/* Pie */
.dx-pie { position: relative; z-index: 1; border-top: 1px solid var(--borde); padding: 40px clamp(16px, 5vw, 64px) 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px 32px; background: var(--fondo-2); font-size: 15px; color: var(--suave); }
.dx-pie b { display: block; color: var(--texto); font-size: 16px; margin-bottom: 8px; }
.dx-pie a { text-decoration: none; display: block; margin-bottom: 6px; }
.dx-pie a:hover { color: var(--texto); }

.dx-nav { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }

/* Ventana de navegador: así se enseña el trabajo (capturas de webs) sin que su texto
   choque con el nuestro. */
/* Imagen fundida: sin marco ni barra de navegador; sus bordes se disuelven en el fondo.
   (Antes "ventana": parecía una captura pegada.) */
.ventana { position: relative; border-radius: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
.ventana img { width: 100%; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect; }
.telefono { border-radius: 28px; overflow: hidden; border: 6px solid #1f1a28; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); background: #000; }
.telefono img { width: 100%; display: block; }
.resplandor { position: absolute; border-radius: 50%; pointer-events: none; filter: none; }

/* Equipo: dos fotos con nombre y cargo */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duo figure { margin: 0; }
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.duo figcaption { font-family: var(--f-texto); font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: 10px; font-size: 15px; color: var(--suave); line-height: 1.35; }
.duo figcaption b { display: block; color: inherit; font-size: 16px; font-weight: 700; }
.avatares { display: flex; gap: 10px; }
.avatares img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--borde-fuerte); }

.volver { position: fixed; left: 12px; bottom: 12px; z-index: 60; background: #fff; color: #111; font: 600 12px/1 system-ui; padding: 9px 12px; border-radius: 999px; text-decoration: none; box-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
@media (max-width: 820px) {
  .dx-links { display: none; }
  .dx-pie { grid-template-columns: 1fr; }
}