/* ============================================================
   DATA NAUTIC — CSS personalizado
   Pegar en SiteJet > Código > pestaña CSS (UNA sola vez, es global)
   ============================================================ */

:root {
  --dn-teal: #059669; --dn-teal-l: #06d6a0;
  --dn-cyan: #0891b2; --dn-purple: #7c3aed; --dn-purple-l: #8b5cf6;
  --dn-dark: #0a0a0a; --dn-navy: #0f172a;
  --dn-text: #111827; --dn-muted: #2d3748; --dn-light: #4a5568;
  --dn-card: rgba(255,255,255,0.50); --dn-card-h: rgba(255,255,255,0.68);
  --dn-border: rgba(255,255,255,0.55);
  --dn-grad: linear-gradient(135deg,#06d6a0,#0891b2,#7c3aed);
  --dn-grad-dark: linear-gradient(135deg,#0a0a0a,#1a1a2e);
  --dn-font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  /* Mono de datos (10-09-2026) — para precios, cupos y etiquetas. Le da el
     aire técnico sin tocar la tipografía de lectura, que sigue siendo Inter.
     Requiere el <link> de JetBrains Mono en global-head.html. */
  --dn-mono: 'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Display de titulares (14-09-2026) — decisión de Matías: letras más
     llamativas que Inter en los títulos grandes. Inter sigue siendo la
     tipografía de lectura de todo el cuerpo; esta se usa SOLO en h1/h2. */
  /* Sora (14-09-2026, decisión de Matías tras comparar siete opciones sobre
     el titular real). Geométrica, abierta y hecha para productos de
     tecnología: se ve actual sin costarle nada al lector, que es lo que
     necesita un dueño de negocio evaluando si contratar.
     Va SOLO en h1/h2 — Inter sigue siendo la tipografía de lectura del
     cuerpo y JetBrains Mono la de precios y etiquetas. */
  --dn-display: 'Sora','Inter',-apple-system,sans-serif;
  --dn-s1: 0 2px 8px rgba(0,0,0,.06); --dn-s2: 0 4px 20px rgba(0,0,0,.09);
  --dn-s3: 0 8px 40px rgba(0,0,0,.12); --dn-s4: 0 16px 60px rgba(0,0,0,.15);
  --dn-r: 16px; --dn-bar: 38px; --dn-nav: 60px;
  --dnp-navy: #0A0A2E; --dnp-green: #2ECC71;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--dn-font);color:var(--dn-text);background:#f5ede6;overflow-x:hidden;line-height:1.5}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── Anclas de nav: que no queden tapadas por la barra fija ── */
#dn-inicio,#productos,#proceso,#casos-exito,#sobre-nosotros,#faq,#contacto{scroll-margin-top:calc(var(--dn-bar) + var(--dn-nav))}

/* ── Skip link ── */
.dn-skip{position:absolute;top:-100%;left:1rem;background:var(--dn-purple);color:#fff;padding:.7rem 1.5rem;border-radius:0 0 8px 8px;font-weight:700;font-size:.9rem;text-decoration:none;z-index:9999;transition:top .2s}
.dn-skip:focus{top:0}

/* ── Background animado ── */
.dn-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dn-b1,.dn-b2,.dn-b3{position:absolute}
.dn-b1{top:-30%;left:-30%;width:160%;height:160%;
  background:radial-gradient(ellipse 60% 50% at 15% 45%,rgba(245,189,130,.85) 0%,transparent 70%),
  radial-gradient(ellipse 50% 55% at 75% 25%,rgba(165,145,225,.80) 0%,transparent 65%),
  radial-gradient(ellipse 55% 45% at 80% 70%,rgba(235,155,175,.75) 0%,transparent 65%),
  radial-gradient(ellipse 40% 40% at 45% 55%,rgba(255,235,225,.60) 0%,transparent 50%);
  animation:b1 18s ease-in-out infinite}
.dn-b2{top:-20%;left:-20%;width:140%;height:140%;
  background:radial-gradient(ellipse 45% 50% at 65% 40%,rgba(185,165,240,.50) 0%,transparent 60%),
  radial-gradient(ellipse 50% 40% at 25% 65%,rgba(250,205,155,.45) 0%,transparent 55%);
  animation:b2 22s ease-in-out infinite}
.dn-b3{top:-25%;left:-25%;width:150%;height:150%;
  background:radial-gradient(ellipse 30% 30% at 30% 30%,rgba(210,190,245,.35) 0%,transparent 50%),
  radial-gradient(ellipse 25% 30% at 70% 65%,rgba(255,215,175,.30) 0%,transparent 45%);
  animation:b3 28s ease-in-out infinite}
.dn-noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@keyframes b1{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(3%,-4%) rotate(2deg) scale(1.02)}50%{transform:translate(-2%,3%) rotate(-1deg) scale(.98)}75%{transform:translate(4%,1%) rotate(1.5deg) scale(1.01)}}
@keyframes b2{0%,100%{transform:translate(0,0)}33%{transform:translate(-5%,3%) rotate(-2.5deg)}66%{transform:translate(4%,-3%) rotate(2deg)}}
@keyframes b3{0%,100%{transform:scale(1)}50%{transform:translate(3%,-2%) scale(1.05)}}

/* ── Announcement bar ── */
.dn-ann{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  height:var(--dn-bar);background:var(--dn-grad-dark);
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.85);
  padding:0 3rem;text-align:center;
  transition:transform .3s ease}
.dn-ann.gone{transform:translateY(-100%)}
.dn-ann a{color:var(--dn-teal-l);text-decoration:none;font-weight:700}
.dn-ann a:hover{text-decoration:underline}
.dn-ann-x{position:absolute;right:.8rem;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:1.1rem;padding:.2rem .4rem;line-height:1}
.dn-ann-x:hover{color:#fff}

/* ── Navbar ── */
.dn-nav{
  position:fixed;top:var(--dn-bar);left:0;right:0;z-index:1000;
  height:var(--dn-nav);padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.45);
  box-shadow:0 2px 20px rgba(0,0,0,.05);
  transition:background .3s,box-shadow .3s,top .3s}
.dn-nav.ann-gone{top:0}
.dn-nav.scrolled{background:rgba(255,255,255,.80);box-shadow:0 2px 24px rgba(0,0,0,.09)}
.dn-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0}
.dn-logo img{height:60px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.10))}
.dn-nav-ul{display:flex;align-items:center;gap:1.8rem;list-style:none}
.dn-nav-ul a{color:#1a1a2e;text-decoration:none;font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.3px;transition:color .25s;position:relative;padding-bottom:2px}
.dn-nav-ul a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#2ECC71;transform:scaleX(0);transition:transform .25s}
.dn-nav-ul a:hover,.dn-nav-ul a.active{color:#0A0A2E}
.dn-nav-ul a:hover::after,.dn-nav-ul a.active::after{transform:scaleX(1)}
.dn-nav-cta{padding:.52rem 1.4rem!important;background:var(--dn-grad-dark)!important;border-radius:50px!important;color:#fff!important;font-weight:700!important;font-size:.95rem!important;text-transform:none!important;transition:all .25s!important}
.dn-nav-cta::after{display:none!important}
.dn-nav-cta:hover{transform:translateY(-1px)!important;box-shadow:0 6px 20px rgba(0,0,0,.22)!important}
.dn-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;z-index:1002}
.dn-ham span{display:block;width:26px;height:2px;background:var(--dn-dark);border-radius:2px;transition:all .3s}
.dn-ham[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.dn-ham[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.dn-ham[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── Layout ── */
.dn-section{position:relative;z-index:1;padding:6rem 2rem}
.dn-wrap{max-width:1200px;margin:0 auto;width:100%}
.dn-center{text-align:center}
.dn-mx{margin-left:auto;margin-right:auto}

/* Badges */
.dn-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem 1.1rem;border-radius:50px;font-size:.81rem;font-weight:700;margin-bottom:1.2rem}
.dn-badge-teal{background:rgba(46,204,113,.12);color:#0A0A2E;border:1px solid rgba(46,204,113,.35)}
.dn-badge-outline{background:rgba(255,255,255,.45);color:#1a1a2e;border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(10px)}
.dn-badge-dark{background:rgba(6,214,160,.15);color:var(--dn-teal-l);border:1px solid rgba(6,214,160,.3)}

/* Headings */
.dn-h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;line-height:1.1;color:var(--dn-dark);margin-bottom:1.2rem;text-shadow:0 2px 8px rgba(0,0,0,.10)}
.dn-h2{font-family:var(--dn-display);font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:700;line-height:1.14;letter-spacing:-.022em;color:var(--dn-dark);margin-bottom:1rem}
.dn-lead{color:#111827;font-size:1.06rem;line-height:1.7;max-width:580px}
.dn-grad-text{background:var(--dn-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Glass card */
.dn-card{background:var(--dn-card);border:1px solid var(--dn-border);border-radius:var(--dn-r);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);padding:2rem;box-shadow:var(--dn-s2);transition:background .3s,box-shadow .3s,transform .3s}
.dn-card:hover{background:var(--dn-card-h);box-shadow:var(--dn-s3)}
.dn-card-accent{position:relative;overflow:hidden}
.dn-card-accent::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--dn-grad)}

/* Buttons */
.dn-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.88rem 2rem;border-radius:50px;font-family:var(--dn-font);font-size:.95rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all .25s}
.dn-btn-dark{background:var(--dn-grad-dark);color:#fff;box-shadow:0 4px 15px rgba(10,10,10,.2)}
.dn-btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(10,10,10,.28)}
.dn-btn-ghost{background:rgba(255,255,255,.55);color:var(--dn-dark);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(10px)}
.dn-btn-ghost:hover{background:rgba(255,255,255,.75);transform:translateY(-1px)}

/* ── Hero ── */
/* ⚠️ position:relative + z-index:1 NO son decorativos (14-09-2026).
   #dn-inicio era la ÚNICA sección sin ellos. Como .dn-bg y .dn-noise son
   position:fixed con z-index:0, el hero (estático) quedaba DEBAJO, y la
   capa de ruido —que tiene mix-blend-mode:overlay— se pintaba encima del
   titular y lo lavaba. Ese era el "título difuminado", no el color ni la
   sombra. Es también el motivo del !important que hubo que poner en
   privacidad.html. Si se quitan, vuelve el problema. */
#dn-inicio{position:relative;z-index:1;min-height:88vh;display:flex;align-items:center;padding-top:calc(var(--dn-bar) + var(--dn-nav) + 3.5rem);padding-bottom:2rem;padding-left:2rem;padding-right:2rem}
.dn-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.dn-loc-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem 1rem;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);border-radius:50px;font-size:.8rem;font-weight:600;color:#1a1a2e;backdrop-filter:blur(10px);margin-bottom:1.4rem}
.dn-loc-dot{width:8px;height:8px;border-radius:50%;background:var(--dn-teal);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.4)}50%{box-shadow:0 0 0 6px rgba(5,150,105,0)}}
/* 14-09-2026: se quitó el text-shadow. Sobre el fondo claro no daba profundidad,
   lavaba el texto y lo hacía ver desenfocado. */
.dn-hero-title{font-family:var(--dn-display);font-size:clamp(2.4rem,5.6vw,4.3rem);font-weight:800;line-height:1.05;letter-spacing:-.028em;color:#0A0A2E;margin-bottom:1.3rem;text-wrap:balance}
/* El degradado se mantiene, pero sin text-shadow: con el relleno transparente
   la sombra se veía como un halo sucio detrás de las letras. Colores más
   oscuros para que contraste de verdad contra el fondo claro. */
.dn-tw-text{background:linear-gradient(135deg,#047857,#0f766e,#5b21b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dn-hero-desc{color:#1a2530;font-weight:500;font-size:1.14rem;line-height:1.65;margin-bottom:2rem;max-width:560px}
.dn-hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.dn-trust{display:flex;gap:1.5rem;flex-wrap:wrap}
.dn-trust-item{display:flex;align-items:center;gap:.45rem;color:#0A0A2E;font-size:.82rem;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.06)}
.dnh-ico{flex-shrink:0;display:inline-block;vertical-align:middle}
/* Íconos de reemplazo de Font Awesome / símbolos Unicode: SVG inline propio,
   no dependen de que cargue una fuente de íconos externa (evita los
   cuadrados vacíos cuando esa fuente no carga bien en algunos navegadores) */
.dn-fico{display:inline-block;vertical-align:-2px;flex-shrink:0}
.dn-btn-ghost .dnh-ico{width:13px;height:13px}

.dn-hero-right{position:relative}

/* ── Widget de chat del Hero (habla con Diego por POST /api/v1/chat) ──
   Reemplazó el mockup ilustrativo de WhatsApp el 16-08-2026. Sin animación
   de flotar: a diferencia del mockup decorativo, acá el visitante escribe
   y lee de verdad — un card meciéndose todo el rato estorba. */
.dn-chat{background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.85);border-radius:20px;padding:1.4rem 1.4rem 1.1rem;box-shadow:var(--dn-s4);backdrop-filter:blur(24px);max-width:420px;margin:0 auto;display:flex;flex-direction:column;height:520px}
.dn-chat-head{display:flex;align-items:center;gap:.7rem;padding-bottom:1rem;margin-bottom:.9rem;border-bottom:1px solid rgba(10,10,46,.08);flex-shrink:0}
.dn-chat-avatar{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dn-chat-avatar img{width:100%;height:100%;border-radius:50%;object-fit:contain}
.dn-chat-name{font-weight:800;font-size:1rem;color:var(--dnp-navy)}
.dn-chat-status{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--dnp-green);font-weight:600}
.dn-chat-dot{width:7px;height:7px;border-radius:50%;background:var(--dnp-green)}

/* Botón de silencio del chat (W3) — margin-left:auto lo empuja a la
   derecha del encabezado sin tocar el flex existente. Área de toque de
   40×40px (dedo en celular) aunque el ícono visible sea más chico. */
.dn-chat-sonido{margin-left:auto;flex-shrink:0;width:40px;height:40px;min-width:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--dnp-navy);cursor:pointer;padding:0;transition:background .2s}
.dn-chat-sonido:hover{background:rgba(10,10,46,.08)}
.dn-chat-sonido:focus-visible{outline:2px solid var(--dnp-green);outline-offset:2px}
.dn-chat-sonido svg{width:20px;height:20px}
.dn-chat-sonido .dn-sonido-ico-off{display:none}
.dn-chat-sonido.dn-sonido-off .dn-sonido-ico-on{display:none}
.dn-chat-sonido.dn-sonido-off .dn-sonido-ico-off{display:block}

.dn-chat-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.65rem;padding-right:.2rem;scroll-behavior:smooth}
.dn-chat-body::-webkit-scrollbar{width:5px}
.dn-chat-body::-webkit-scrollbar-thumb{background:rgba(10,10,46,.15);border-radius:10px}
/* Mensajes pegados abajo, como WhatsApp (17-08-2026, punto 3.2): el margen
   automático se lleva el espacio sobrante hacia arriba del primer mensaje.
   A propósito NO es justify-content:flex-end — con eso, una conversación
   que desborde el scroll deja los primeros mensajes inalcanzables por
   arriba. El margen automático se resuelve en 0 cuando no hay espacio
   libre, así que el scroll sigue funcionando normal. */
.dn-chat-body > *:first-child{margin-top:auto}

.dn-chat-bubble{padding:.7rem 1rem;border-radius:14px;font-size:.9rem;line-height:1.5;max-width:88%;white-space:pre-wrap;word-break:break-word;animation:dnBubbleIn .15s ease-out}
.dn-chat-in{background:#f1f1f3;color:#1a1a2e;border-bottom-left-radius:4px;align-self:flex-start}
.dn-chat-out{background:#DCF8C6;color:#1a1a2e;border-bottom-right-radius:4px;align-self:flex-end}
.dn-chat-hora{display:block;text-align:right;font-size:.68rem;color:#8a8f9c;margin-top:.25rem}

@keyframes dnBubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .dn-chat-bubble{animation:none}
}

/* Mensaje de cierre (tope de 20 mensajes): texto + 2 botones, más ancho que una burbuja normal */
.dn-chat-cierre{max-width:100%}
.dn-chat-cierre p{margin-bottom:.8rem}
.dn-chat-cierre-ctas{display:flex;flex-direction:column;gap:.5rem}
.dn-chat-cta{display:flex;align-items:center;justify-content:center;text-align:center;padding:.65rem 1rem;border-radius:50px;font-family:var(--dn-font);font-size:.84rem;font-weight:700;text-decoration:none;transition:all .25s}
.dn-chat-cta-wa{border:2px solid var(--dnp-green);color:var(--dnp-navy);background:rgba(46,204,113,.08)}
.dn-chat-cta-wa:hover{background:rgba(46,204,113,.18);transform:translateY(-2px)}
.dn-chat-cta-agenda{border:2px solid var(--dnp-navy);color:#fff;background:var(--dnp-navy)}
.dn-chat-cta-agenda:hover{background:#14143f;transform:translateY(-2px)}

/* "Diego está escribiendo…" mientras se espera la respuesta de la API */
.dn-chat-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.2rem .1rem .7rem;flex-shrink:0}
.dn-chat-chip{border:1.5px solid var(--dnp-green);color:var(--dnp-navy);background:rgba(46,204,113,.08);border-radius:50px;padding:.5rem .95rem;font-family:var(--dn-font);font-size:.8rem;font-weight:600;white-space:normal;text-align:center;cursor:pointer;transition:all .2s}
.dn-chat-chip:hover:not(:disabled){background:rgba(46,204,113,.18);transform:translateY(-2px)}
.dn-chat-chip:disabled{opacity:.5;cursor:not-allowed}

.dn-chat-typing{display:flex;align-items:center;gap:.4rem;padding:.3rem .2rem .1rem;font-size:.78rem;color:#4a5568;flex-shrink:0}
.dn-chat-typing[hidden]{display:none}
.dn-chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--dnp-green);animation:dnTypingBounce 1.1s infinite ease-in-out}
.dn-chat-typing span:nth-child(2){animation-delay:.15s}
.dn-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes dnTypingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.dn-chat-form{display:flex;gap:.5rem;margin-top:.8rem;flex-shrink:0}

/* Marca de agua del chat (W4) — discreta a propósito: apagada, sin
   subrayado en reposo, ~11px. rgba(10,10,46,…) es el mismo navy de
   --dnp-navy con opacidad, escrito así porque una variable CSS que
   guarda un color hexadecimal no admite pasarle una opacidad aparte
   con rgba(var(--x),…) sin reescribirla como componentes — es el mismo
   patrón que ya usa el resto del archivo (ver .dn-ci, .dn-modal-detail,
   etc.), no un color nuevo. margin-top chico para separarla de la caja
   de texto sin comerse alto del cuerpo de mensajes, que en celular a
   pantalla completa ya es apretado. */
.dn-chat-marca{display:block;flex-shrink:0;text-align:center;margin-top:.6rem;font-size:.68rem;color:rgba(10,10,46,.42);text-decoration:none}
.dn-chat-marca:hover{text-decoration:underline}
.dn-chat-marca:focus-visible{outline:2px solid var(--dnp-green);outline-offset:2px}
.dn-chat-input{flex:1;min-width:0;border:1px solid rgba(10,10,46,.15);border-radius:50px;padding:.7rem 1.1rem;font-family:var(--dn-font);font-size:.88rem;background:#fff;color:#1a1a2e}
.dn-chat-input:focus{outline:2px solid var(--dnp-green);outline-offset:1px}
.dn-chat-input:disabled{background:rgba(0,0,0,.04);color:#8a8f9c}
.dn-chat-send{width:42px;height:42px;border-radius:50%;border:none;background:var(--dnp-navy);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background .2s,transform .2s}
.dn-chat-send svg{width:18px;height:18px}
.dn-chat-send:hover:not(:disabled){background:#14143f;transform:translateY(-1px)}
.dn-chat-send:disabled{background:rgba(10,10,46,.25);cursor:not-allowed}

/* Íconos "duotono": círculo pastel de la paleta aurora + glifo de línea en Navy (Hero y FAQ) */
.dnh-duo{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}
.dnh-duo svg{fill:none;stroke:#0A0A2E}
.dnh-peach{background:rgba(245,189,130,.35)}
.dnh-rose{background:rgba(235,155,175,.35)}
.dnh-lav{background:rgba(165,145,225,.35)}
.dnh-sky{background:rgba(143,197,232,.35)}
.dn-trust-item .dnh-duo{width:26px;height:26px}
.dn-trust-item .dnh-duo svg{width:14px;height:14px;stroke-width:2.2}

/* ── Section divider ── */
.dn-div{position:relative;z-index:1;height:1px;margin:0;background:linear-gradient(90deg,transparent,rgba(10,10,46,.22),rgba(46,204,113,.22),transparent)}

/* ── Sección Productos ── */
.dnp-section{position:relative;z-index:1;padding:3rem 2rem 6rem}
.dnp-head{max-width:680px;margin:0 auto 3.2rem;text-align:center}
.dnp-title{font-family:var(--dn-display);font-size:clamp(2rem,3.7vw,2.8rem);font-weight:700;line-height:1.14;letter-spacing:-.022em;color:var(--dnp-navy);margin-bottom:.8rem}
.dnp-intro{color:#2d3748;font-size:1.05rem;line-height:1.65}

.dnp-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:1.8rem;max-width:1120px;margin:0 auto}

.dnp-card{
  position:relative;display:flex;flex-direction:column;
  flex:1 1 300px;max-width:340px;
  background:rgba(255,255,255,.6);border:1px solid rgba(10,10,46,.08);
  border-radius:20px;padding:2.2rem 1.9rem 1.9rem;
  box-shadow:0 4px 20px rgba(10,10,46,.07);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  transition:transform .3s,box-shadow .3s;
}
.dnp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:20px 20px 0 0;background:var(--dnp-navy)}
.dnp-card.dnp-c-sky::before{background:#5FA8D3}
.dnp-card.dnp-c-mint::before{background:var(--dnp-green)}
.dnp-card.dnp-c-rose::before{background:#E895AC}
.dnp-card.dnp-c-peach::before{background:#F0B876}
.dnp-card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(10,10,46,.14)}

/* Tarjeta destacada "Sitio Web + Chatbot" (antes "Pack Emprendedor") */
.dnp-card.dnp-featured{border:2px solid #2ECC71;box-shadow:0 14px 40px rgba(46,204,113,.28);background:rgba(255,255,255,.78)}
.dnp-card.dnp-featured::before{height:6px;background:linear-gradient(90deg,#0A0A2E,#2ECC71)}
.dnp-card.dnp-featured:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(46,204,113,.34)}
.dnp-featured-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#0A0A2E;color:#fff;padding:.42rem 1.15rem;border-radius:50px;font-size:.72rem;font-weight:800;white-space:nowrap;box-shadow:0 4px 14px rgba(10,10,46,.3);z-index:2}

.dnp-card-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.dnp-card-ico{flex-shrink:0;width:60px;height:60px;border-radius:50%;background:rgba(245,189,130,.35);display:flex;align-items:center;justify-content:center}
.dnp-card-ico svg{width:30px;height:30px;stroke-width:1.8}
.dnp-card-ico.dnh-peach{background:rgba(245,189,130,.5)}
.dnp-card-ico.dnh-rose{background:rgba(235,155,175,.5)}
.dnp-card-ico.dnh-sky{background:rgba(143,197,232,.5)}
.dnp-card-ico.dnh-mint{background:rgba(46,204,113,.5)}
.dnp-card-ico.dnh-lav{background:rgba(165,145,225,.5)}
.dnp-card-head h3{font-size:1.18rem;font-weight:800;color:var(--dnp-navy);margin:0;line-height:1.25}
.dnp-card-subtitle{font-size:.8rem;font-weight:600;color:#2d3748;margin:.15rem 0 0}

.dnp-hook{font-size:1rem;font-weight:700;color:var(--dnp-navy);line-height:1.4;margin-bottom:.7rem}
.dnp-desc{color:#2d3748;font-size:.9rem;line-height:1.65;margin-bottom:1.4rem}

.dnp-checks{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.65rem;flex:1}
.dnp-checks li{display:flex;align-items:flex-start;gap:.6rem;font-size:.87rem;color:#1a1a2e;line-height:1.5}
.dnp-checks .dnp-check-ico{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(165,145,225,.35);color:#0A0A2E;display:flex;align-items:center;justify-content:center;font-size:.68rem;margin-top:.1rem}
.dnp-checks .dnp-check-ico svg{width:11px;height:11px;stroke:#0A0A2E;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dnp-c-sky .dnp-check-ico{background:rgba(143,197,232,.35)}
.dnp-c-mint .dnp-check-ico{background:rgba(46,204,113,.22)}
.dnp-c-rose .dnp-check-ico{background:rgba(235,155,175,.35)}
.dnp-c-peach .dnp-check-ico{background:rgba(245,189,130,.4)}

.dnp-price-box{border-top:1px solid rgba(10,10,46,.1);padding-top:1.2rem;margin-bottom:1.4rem}
.dnp-price-was{display:block;font-size:.85rem;color:#8a8a8a;text-decoration:line-through;margin-bottom:.2rem}
.dnp-price-main{display:block;font-size:1.28rem;font-weight:900;color:var(--dnp-navy);line-height:1.3}
.dnp-price-sub{display:block;font-size:.85rem;font-weight:600;color:var(--dnp-green);margin-top:.15rem}
.dnp-price-custom{display:block;font-size:1.5rem;font-weight:900;color:var(--dnp-green)}

.dnp-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:.9rem 1.4rem;border-radius:50px;font-family:var(--dn-font);font-size:.92rem;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:all .25s}
.dnp-btn-solid{background:var(--dnp-navy);color:#fff;box-shadow:0 4px 15px rgba(10,10,46,.22)}
.dnp-btn-solid:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(10,10,46,.3)}
.dnp-btn-outline{background:transparent;color:var(--dnp-navy);border-color:var(--dnp-navy)}
.dnp-btn-outline:hover{background:var(--dnp-navy);color:#fff;transform:translateY(-2px)}

@media (max-width:520px){
  .dnp-card{flex-basis:100%;max-width:380px}
}

/* ══════════════════════════════════════════════════════════════
   PLANES (10-09-2026) — formato de suscripción: precio grande,
   precio anual, cupo de citas incluido y nota de uso justo.
   Reemplaza la presentación de "4 productos sueltos" por tres
   planes comparables. Ver 2-ESTRATEGIA/CATALOGO.json.
   ══════════════════════════════════════════════════════════════ */
.dnp-plan-precio{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin-bottom:.15rem}
.dnp-plan-monto{font-family:var(--dn-mono);font-size:2.05rem;font-weight:700;color:var(--dnp-navy);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dnp-plan-periodo{font-family:var(--dn-mono);font-size:.82rem;font-weight:500;color:#5a6a6d;letter-spacing:.02em}
.dnp-plan-anual{display:block;font-family:var(--dn-mono);font-size:.78rem;font-weight:500;color:var(--dnp-green);margin-bottom:1rem;letter-spacing:.01em;font-variant-numeric:tabular-nums}

.dnp-cupo{border:1px solid rgba(10,10,46,.14);border-radius:8px;background:rgba(255,255,255,.55);padding:.85rem 1rem;margin-bottom:1.3rem}
.dnp-cupo-n{display:block;font-family:var(--dn-mono);font-size:1rem;font-weight:600;color:var(--dnp-navy);line-height:1.35;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dnp-cupo-t{display:block;font-size:.79rem;color:#4a5a5d;line-height:1.5;margin-top:.25rem}
.dnp-card.dnp-featured .dnp-cupo{border-color:rgba(46,204,113,.5);background:rgba(46,204,113,.09)}

/* Etiqueta de dato: mono, chica, en versalitas. Es el detalle que da el aire
   técnico sin gritar — se usa en el cupo y en el uso justo. */
.dnp-etq{display:block;font-family:var(--dn-mono);font-size:.62rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#6b7b7e;margin-bottom:.3rem}

.dnp-usojusto{font-family:var(--dn-mono);font-size:.74rem;font-weight:600;color:#3a4a5d;line-height:1.6;margin:.9rem 0 1.2rem;letter-spacing:.005em}
.dnp-confianza{font-size:.78rem;color:#2d3748;line-height:1.5;margin-bottom:1.1rem;font-weight:600}

/* Franja de implementación acompañada: va bajo las tres tarjetas */
.dnp-setup{max-width:1120px;margin:2.6rem auto 0;border:1px solid rgba(10,10,46,.12);border-radius:18px;background:rgba(255,255,255,.62);padding:1.7rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.dnp-setup-txt{flex:1;min-width:260px}
.dnp-setup h3{font-size:1.08rem;font-weight:800;color:var(--dnp-navy);margin:0 0 .35rem}
.dnp-setup p{font-size:.89rem;color:#2d3748;line-height:1.6;margin:0}
.dnp-setup-precio{text-align:right;flex-shrink:0}
.dnp-setup-precio .m{display:block;font-family:var(--dn-mono);font-size:1.35rem;font-weight:700;color:var(--dnp-navy);line-height:1.25;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dnp-setup-precio .s{display:block;font-family:var(--dn-mono);font-size:.7rem;font-weight:500;color:var(--dnp-green);letter-spacing:.09em;text-transform:uppercase;margin-top:.2rem}

/* Retícula tenue detrás de los planes: lectura de "instrumento", no de folleto.
   Es un gradiente, no una imagen — no suma peso ni una petición más. */
.dnp-section{
  background-image:
    linear-gradient(rgba(10,10,46,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,46,.035) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:center top;
}
@media (prefers-reduced-motion:no-preference){
  .dnp-card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
}
@media (max-width:640px){
  .dnp-setup{flex-direction:column;align-items:flex-start}
  .dnp-setup-precio{text-align:left}
}

/* ── Espacio entre Proceso y Casos de Éxito: reducido solo en este borde ── */
#proceso{padding-bottom:3rem}
#casos-exito{padding-top:3rem}

/* ── Proceso ── */
.dn-proc-wrap{position:relative;margin-top:3.5rem}
.dn-proc-line{position:absolute;top:30px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,#F5BD82,#A591E1,#EB9BAF);border-radius:2px;overflow:hidden}
.dn-proc-line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shimmer 2.5s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.dn-proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:2}
.dn-proc-step{text-align:center;padding:0 1rem}
/* Círculos "de vidrio": dejan ver el aurora del fondo detrás, con un leve tinte que varía según su posición */
.dn-step-circle{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;margin:0 auto 1.2rem;box-shadow:var(--dn-s2);background:rgba(255,255,255,.22);backdrop-filter:blur(10px) saturate(1.7);-webkit-backdrop-filter:blur(10px) saturate(1.7);border:1.5px solid rgba(255,255,255,.6);color:#0A0A2E}
.s1{background:rgba(245,189,130,.4)}
.s2{background:rgba(165,145,225,.35)}
.s3{background:rgba(235,155,175,.38)}
.s4{background:rgba(250,205,155,.4)}
.dn-step-circle.s1,.dn-step-circle.s2,.dn-step-circle.s3,.dn-step-circle.s4{border-color:rgba(255,255,255,.6)}
.dn-proc-card{background:var(--dn-card);border:1px solid var(--dn-border);border-radius:12px;padding:1.3rem 1rem;backdrop-filter:blur(15px)}
.dn-proc-step h4{font-size:.93rem;font-weight:800;color:var(--dn-dark);margin-bottom:.35rem}
.dn-proc-step p{color:#111827;font-size:.82rem;line-height:1.45}

/* ── Casos de éxito ── */
.dns-case-wrap{max-width:880px;margin:3rem auto 0}
.dn-result-card{overflow:hidden;border-radius:18px;box-shadow:var(--dn-s4)}
.dn-result-hd{background:linear-gradient(135deg,#F5BD82 0%,#EB9BAF 55%,#A591E1 100%);padding:1.4rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.dn-result-co{display:flex;align-items:center;gap:1rem}
.dn-result-logo{background:rgba(255,255,255,.92);border-radius:11px;padding:.7rem 1.3rem;display:flex;align-items:center;justify-content:center}
.dn-result-logo img{max-width:190px;max-height:64px;object-fit:contain}
.dn-result-name{color:#0A0A2E;font-size:1.08rem;font-weight:800}
.dn-result-sector{color:rgba(10,10,46,.65);font-size:.79rem}
.dn-done-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem 1rem;background:rgba(10,10,46,.12);border-radius:50px;font-size:.79rem;font-weight:700;color:#0A0A2E}
.dn-result-body{padding:2.5rem;background:rgba(255,255,255,.62);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.4);border-top:none}

/* Foto del equipo del proyecto junto al testimonio */
.dns-result-split{display:grid;grid-template-columns:340px 1fr;gap:1.8rem;align-items:start}
.dns-result-media{border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(10,10,46,.12)}
.dns-result-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:640px){
  .dns-result-split{grid-template-columns:1fr}
  .dns-result-media img{aspect-ratio:16/9}
}

.dn-quote{color:#1a1a2e;font-style:italic;font-size:1rem;line-height:1.8;margin-bottom:2rem;padding-left:1.5rem;border-left:3px solid #2ECC71}
.dn-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.dn-metric{background:rgba(255,255,255,.55);border:1px solid rgba(10,10,46,.08);border-radius:12px;padding:1.2rem;text-align:center}
.dn-metric i{font-size:1.4rem;display:block;margin-bottom:.45rem;color:#2ECC71}
.dn-metric h5{font-size:.87rem;font-weight:800;color:#0A0A2E;margin-bottom:.18rem}
.dn-metric p{color:var(--dn-muted);font-size:.76rem}
.dn-result-foot{display:flex;align-items:center;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.07)}
.dn-author-name{font-size:.93rem;font-weight:700;color:var(--dn-dark)}
.dn-author-role{color:var(--dn-muted);font-size:.79rem}

/* ── Sobre Data Nautic ── */
.dns-about{max-width:760px;margin:0 auto;text-align:center}
.dns-about-card{margin-top:1.6rem;padding:2.6rem 2.4rem;background:rgba(255,255,255,.55);border:1px solid rgba(10,10,46,.08);border-radius:24px;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:0 4px 24px rgba(10,10,46,.07)}
.dns-about-logo{display:block;height:124px;width:auto;margin:0 auto}
.dns-about-quote{margin:1.5rem 0 0;font-size:1.12rem;line-height:1.75;color:#1a1a2e;font-weight:500;font-style:normal}

/* Tarjetas de hitos: reservadas para hitos propios de Data Nautic más adelante.
   Sin uso por ahora (se sacaron de Sobre Data Nautic el 2026-07-12), CSS
   intacta para reutilizar cuando haya hitos que mostrar. */
.dns-milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.5rem;text-align:left}
.dns-milestone{background:rgba(255,255,255,.5);border:1px solid rgba(10,10,46,.08);border-radius:14px;padding:1.4rem;backdrop-filter:blur(15px)}
.dns-milestone-ico{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(143,197,232,.35);color:#0A0A2E;margin-bottom:.9rem}
.dns-milestone-ico svg{width:20px;height:20px;stroke:#0A0A2E}
.dns-milestone-logo{display:block;height:34px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin-bottom:.9rem}
.dns-milestone p{font-size:.87rem;line-height:1.55;color:#1a1a2e;margin:0}
.dns-milestone strong{color:#0A0A2E;font-weight:800}
@media (max-width:768px){ .dns-milestones{grid-template-columns:1fr} }

/* Franja "Nuestros Colaboradores" */
.dn-collab-lbl{color:var(--dn-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.dns-support{margin-top:2.8rem;text-align:center}
.dns-support-title{font-size:1.25rem;font-weight:800;color:#0A0A2E;margin:.3rem 0 1.8rem}
.dns-support-grid{display:flex;justify-content:center;align-items:flex-end;gap:3.5rem;flex-wrap:wrap}
.dns-support-col{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.dns-support-role{font-size:.76rem;font-weight:700;color:#2d3748;text-transform:uppercase;letter-spacing:1px;margin:0}
.dns-support-col img{max-height:44px;width:auto;object-fit:contain}

/* ── FAQ ── */
.dn-faq-list{margin-top:3rem;display:flex;flex-direction:column;gap:.8rem;max-width:800px;margin-left:auto;margin-right:auto}
.dn-faq-item{background:var(--dn-card);border:1px solid var(--dn-border);border-radius:12px;backdrop-filter:blur(15px);overflow:hidden}
.dn-faq-q{width:100%;padding:1.1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--dn-font);font-size:.96rem;font-weight:700;color:#0A0A2E;transition:color .2s}
.dn-faq-q:hover{color:#2ECC71}
.dn-faq-ico{color:#2ECC71}
.dn-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 1.5rem;color:#111827;font-size:.9rem;line-height:1.65}
.dn-faq-item.open .dn-faq-a{max-height:300px;padding:0 1.5rem 1.2rem}
.dn-faq-ico-wrap{width:26px;height:26px;margin-left:.5rem}
.dn-faq-ico-wrap svg{width:13px;height:13px;stroke-width:2.2;transition:transform .3s}
.dn-faq-item.open .dn-faq-ico-wrap svg{transform:rotate(45deg)}

/* ── Contacto ── */
.dn-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:flex-start}
.dn-ci{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid rgba(255,255,255,.45);border-radius:12px;margin-bottom:.8rem;background:rgba(255,255,255,.3);backdrop-filter:blur(10px);transition:background .3s,box-shadow .3s}
.dn-ci:hover{background:rgba(255,255,255,.5);box-shadow:var(--dn-s1)}
.dn-ci-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.dn-ci-ico svg{width:19px;height:19px;stroke:#0A0A2E;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ci-t{background:rgba(245,189,130,.35)}
.ci-p{background:rgba(165,145,225,.35)}
.ci-s{background:rgba(143,197,232,.35)}
.dn-ci-lbl{color:var(--dn-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.dn-ci-val{font-size:.9rem;font-weight:600;color:var(--dn-dark)}
.dn-ci-val a{color:inherit;text-decoration:none}
.dn-socials{display:flex;gap:.8rem;margin-top:1.5rem}
.dn-social{width:44px;height:44px;border-radius:11px;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;color:#0A0A2E;text-decoration:none;background:rgba(255,255,255,.45);backdrop-filter:blur(10px);font-size:1.08rem;transition:all .25s}
.dn-social:hover{border-color:#2ECC71;color:#2ECC71;background:rgba(255,255,255,.7);transform:translateY(-2px)}
.dn-social svg,.dn-footer-socials svg{width:18px;height:18px}

/* ── Formulario y Modal: SIN TOCAR (pendiente del próximo paso) ──
   Estas reglas siguen intactas del código original. El formulario de
   contacto se resuelve con el componente nativo de SiteJet en el
   siguiente paso, así que no se tocan colores ni nada acá todavía. */
.dn-form-card{padding:2.5rem}
.dn-form-card h3{font-size:1.4rem;font-weight:800;color:var(--dn-dark);margin-bottom:.3rem}
.dn-form-sub{color:var(--dn-muted);font-size:.87rem;margin-bottom:1.8rem}
.dn-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dn-fg{margin-bottom:1rem}
.dn-fg label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.35rem;color:#1a1a2e}
.dn-req{color:var(--dn-teal);margin-left:2px}
.dn-fg input,.dn-fg select,.dn-fg textarea{width:100%;padding:.73rem 1rem;background:rgba(255,255,255,.55);border:1.5px solid rgba(0,0,0,.09);border-radius:10px;color:var(--dn-dark);font-family:var(--dn-font);font-size:.9rem;font-weight:500;transition:border-color .25s,box-shadow .25s,background .25s;outline:none}
.dn-fg input::placeholder,.dn-fg textarea::placeholder{color:var(--dn-light)}
.dn-fg input:focus,.dn-fg select:focus,.dn-fg textarea:focus{border-color:var(--dn-purple);box-shadow:0 0 0 3px rgba(124,58,237,.1);background:rgba(255,255,255,.82)}
.dn-fg.err input,.dn-fg.err select,.dn-fg.err textarea{border-color:#ef4444}
.dn-err-msg{display:none;color:#dc2626;font-size:.76rem;font-weight:600;margin-top:.28rem}
.dn-fg.err .dn-err-msg{display:block}
.dn-fg select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-color:rgba(255,255,255,.55);padding-right:2.5rem}
.dn-fg textarea{resize:vertical;min-height:100px}
.dn-submit{width:100%;padding:1rem;background:var(--dn-grad-dark);border:none;border-radius:50px;color:#fff;font-family:var(--dn-font);font-size:1rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .25s;margin-top:.5rem;box-shadow:0 4px 15px rgba(10,10,10,.2)}
.dn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px rgba(10,10,10,.28)}
.dn-submit:disabled{opacity:.65;cursor:not-allowed}
.dn-form-note{text-align:center;margin-top:.8rem;font-size:.76rem;color:var(--dn-muted)}
.dn-form-note i{color:var(--dn-teal)}
.dn-form-note.ok{color:#1a8f4f;font-weight:600}
.dn-form-note.ok i{color:#2ECC71}
.dn-form-note.error{color:#dc2626;font-weight:600}
.dn-form-note.error i{color:#dc2626}

/* Checkbox de consentimiento (Política de Privacidad) */
.dn-consent{display:flex;margin:.2rem 0 1.1rem}
.dn-consent-label{display:flex;align-items:flex-start;gap:.6rem;font-size:.83rem;line-height:1.5;color:#1a1a2e;cursor:pointer}
.dn-consent-label input[type="checkbox"]{width:17px;height:17px;margin-top:.15rem;flex-shrink:0;accent-color:#2ECC71;cursor:pointer}
.dn-consent-label a{color:#0A0A2E;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.dn-consent-label a:hover{color:#2ECC71}

/* Honeypot antispam: oculto para personas, visible para bots que autorellenan */
.dn-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* Botón secundario "Prefiero WhatsApp" dentro del formulario */
.dns-wa-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.85rem 1.4rem;margin-top:.7rem;border-radius:50px;border:2px solid #2ECC71;color:#0A0A2E;background:rgba(46,204,113,.08);font-family:var(--dn-font);font-size:.9rem;font-weight:700;text-decoration:none;transition:all .25s}
.dns-wa-btn:hover{background:rgba(46,204,113,.18);transform:translateY(-2px)}
.dns-wa-btn svg{width:17px;height:17px;flex-shrink:0}

/* ── Modal ── */
.dn-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.dn-modal.on{opacity:1;visibility:visible}
.dn-modal-box{position:relative;background:rgba(255,255,255,.80);backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(255,255,255,.65);border-radius:24px;padding:3rem 3.5rem;max-width:520px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.15);transform:translateY(30px) scale(.95);transition:transform .4s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.dn-modal.on .dn-modal-box{transform:translateY(0) scale(1)}
.dn-modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#0A0A2E,#2ECC71)}
.dn-modal-ico{width:76px;height:76px;border-radius:50%;background:rgba(46,204,113,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;color:#2ECC71;animation:mpulse-brand 2s ease-in-out infinite}
@keyframes mpulse-brand{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.35)}50%{box-shadow:0 0 0 14px rgba(46,204,113,0)}}
.dn-modal-logo{width:180px;height:auto;margin:0 auto 1.5rem;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}
.dn-modal-h2{font-size:1.65rem;font-weight:900;color:#0A0A2E;margin-bottom:.5rem}
.dn-modal-msg{color:var(--dn-muted);font-size:.97rem;line-height:1.65;margin-bottom:1.8rem}
.dn-modal-detail{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.2rem;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.3);border-radius:10px;margin-bottom:2rem;font-size:.87rem;font-weight:600;color:#0A0A2E}
.dn-modal-detail i{color:#2ECC71}
.dn-modal-close{display:inline-flex;align-items:center;gap:.5rem;padding:.82rem 2.5rem;background:#0A0A2E;color:#fff;font-weight:700;font-size:.92rem;border-radius:50px;border:none;cursor:pointer;transition:all .25s;font-family:var(--dn-font);box-shadow:0 4px 15px rgba(10,10,10,.2)}
.dn-modal-close:hover{background:#0A0A2E;transform:translateY(-2px);box-shadow:0 8px 28px rgba(10,10,46,.3)}

/* ── Footer ── */
.dn-footer{position:relative;z-index:1;background:rgba(8,8,16,.93);backdrop-filter:blur(30px);padding:4rem 2rem 2rem;color:rgba(255,255,255,.55)}
.dn-footer-bar{height:3px;background:linear-gradient(135deg,#0A0A2E,#2ECC71);margin:-4rem -2rem 4rem}
.dn-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.dns-footer-3col{grid-template-columns:1.6fr 1fr 1fr}
@media (max-width:768px){ .dns-footer-3col{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .dns-footer-3col{grid-template-columns:1fr} }
.dns-footer-logo-badge{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);border-radius:50px;padding:.6rem 1.4rem;margin-bottom:.9rem}
.dn-footer-logo{height:46px;width:auto;filter:none;opacity:1;margin-bottom:0}
.dn-footer-tagline{padding:.55rem .8rem;border-left:3px solid #2ECC71;font-style:italic;font-size:.82rem;color:#2ECC71;font-weight:600}
.dn-footer-col h4{font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:#fff;margin-bottom:1.2rem}
.dn-footer-col a{display:block;color:rgba(255,255,255,.48);text-decoration:none;font-size:.87rem;font-weight:500;margin-bottom:.7rem;transition:color .25s}
.dn-footer-col a:hover{color:#2ECC71}
.dn-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap;gap:1rem}
.dn-footer-bottom p{font-size:.77rem}
.dn-footer-legal{display:flex;gap:1.5rem}
.dn-footer-legal a{color:rgba(255,255,255,.35);font-size:.77rem;text-decoration:none;transition:color .25s}
.dn-footer-legal a:hover{color:#2ECC71}
.dn-footer-socials{display:flex;gap:.7rem}
.dn-footer-socials a{width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);text-decoration:none;transition:all .25s}
.dn-footer-socials a:hover{border-color:#2ECC71;color:#2ECC71;background:rgba(46,204,113,.1);transform:translateY(-2px)}
.dn-footer-cookies{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.74rem;line-height:1.6;color:rgba(255,255,255,.42);text-align:center}
.dn-footer-cookies a{color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:2px}
.dn-footer-cookies a:hover{color:#2ECC71}

/* ── Botón flotante de WhatsApp (todas las páginas, inyectado por global.js) ── */
.dn-float-wa{position:fixed;right:1.4rem;bottom:1.4rem;z-index:998;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,.45);transition:transform .25s,box-shadow .25s;text-decoration:none}
.dn-float-wa:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 26px rgba(37,211,102,.55)}
.dn-float-wa svg{width:28px;height:28px}
@media (max-width:480px){
  .dn-float-wa{right:1rem;bottom:1rem;width:50px;height:50px}
  .dn-float-wa svg{width:25px;height:25px}
}

/* ── Botón flotante del chat (W1/W2, inyectado por global.js) ──
   Va justo arriba del de WhatsApp, mismo z-index (998): no se superponen
   entre sí porque están separados por posición, no por capa. Mientras el
   panel está abierto, los dos botones se ocultan (clase .dn-oculto) — ver
   dnActualizarBotonesFlotantes() en global.js. En páginas sin el chat del
   Hero (hoy: /privacy) este mismo botón es un <a>, no un <button>: lleva
   de vuelta a la portada en vez de abrir un panel — ver .dn-float-chat-link
   más abajo, no tiene animación de ocultarse porque ahí siempre se ve.
   Círculo blanco con el robot en navy (#0A0A2E) — decisión de Matías,
   21-08-2026, elegido entre 3 opciones renderizadas a tamaño real. El
   borde sutil es a propósito: un círculo blanco sin nada alrededor se
   pierde sobre las zonas más claras del fondo animado (ej. Productos). */
.dn-float-chat{position:fixed;right:1.4rem;bottom:calc(1.4rem + 56px + .8rem);z-index:998;width:56px;height:56px;border-radius:50%;background:#fff;color:#0A0A2E;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(10,10,10,.35);transition:transform .25s,box-shadow .25s,opacity .2s,visibility .2s;border:1.5px solid rgba(10,10,46,.16);cursor:pointer;padding:0;text-decoration:none}
.dn-float-chat:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 26px rgba(10,10,10,.45)}
.dn-float-chat svg{width:26px;height:26px}
.dn-float-chat.dn-oculto{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:480px){
  .dn-float-chat{right:1rem;bottom:calc(1rem + 50px + .6rem);width:50px;height:50px}
  .dn-float-chat svg{width:23px;height:23px}
}

/* ── Panel flotante del chat (W1) ──
   Es solo el marco/posición: a propósito NO lleva backdrop-filter propio
   ni fondo propio — el único desenfoque sigue siendo el que ya tiene
   .dn-chat por dentro (24px), para no encimar un blur sobre otro. El
   contenido real (#dn-chat, con todas sus burbujas) se mueve para acá
   desde el Hero al abrir, y vuelve al Hero al cerrar — nunca se duplica. */
.dn-chat-panel{position:fixed;right:1.4rem;bottom:1.4rem;z-index:1050;width:400px;max-width:calc(100vw - 2.8rem);display:none;flex-direction:column}
.dn-chat-panel.on{display:flex}
.dn-chat-panel .dn-chat{width:100%;max-width:none;margin:0}
.dn-chat-panel-close{position:absolute;top:-14px;right:-14px;z-index:1;width:32px;height:32px;border-radius:50%;background:#0A0A2E;color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);padding:0}
@media (max-width:480px),(max-height:480px){
  /* ⚠️ Esta misma condición ("(max-width:480px),(max-height:480px)") vive
     también en global.js, en DN_MEDIA_PANEL_PANTALLA_COMPLETA — decide si
     el panel bloquea el scroll del cuerpo (solo corresponde en pantalla
     completa). Si el número 480 cambia acá, hay que cambiarlo ahí también.
     Pantalla completa en celular: un panel chico queda apretado para
     escribir. 100dvh (no solo 100vh) para que el alto se ajuste cuando
     aparece el teclado — con solo 100vh el campo de texto quedaría
     tapado detrás del teclado. Los navegadores que no entienden 100dvh
     ignoran esa línea y se quedan con el 100vh de arriba.
     También por max-height (no solo max-width): un celular acostado
     (ej. 667×375) sigue siendo angosto en alto aunque sea ancho — sin
     esto, el panel volvía a la caja de escritorio (400×480) al girar
     la pantalla con el panel abierto, más alta que la pantalla acostada,
     y el encabezado del chat quedaba cortado arriba. Verificado con una
     prueba real de giro de pantalla, no asumido. */
  .dn-chat-panel{right:0;bottom:0;left:0;top:0;width:100%;max-width:100%;height:100vh;height:100dvh}
  .dn-chat-panel .dn-chat{height:100%;border-radius:0}
  .dn-chat-panel-close{top:.8rem;right:.8rem}
  /* La × del panel (arriba) y el botón de silencio (W3, empujado al borde
     derecho del encabezado) caían en el mismo rincón en pantalla completa
     — se solapaban de verdad (medido: ~670px² de superposición, no una
     sospecha). Corregido reservando espacio a la derecha del botón de
     silencio solo en este modo; en el Hero y en el panel de escritorio
     no hace falta, ahí no se tocan. */
  .dn-chat-panel .dn-chat-sonido{margin-right:2.6rem}
}

/* ── Página de Política de Privacidad ── */
.dn-legal-section{position:relative;z-index:1;padding-top:calc(var(--dn-bar) + var(--dn-nav) + 3.5rem);padding-bottom:6rem;padding-left:2rem;padding-right:2rem}
.dn-legal{max-width:760px;margin:0 auto}
.dn-legal-updated{color:#2d3748;font-size:.88rem;margin-bottom:2.4rem}
.dn-legal h1{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:900;line-height:1.15;color:#0A0A2E;margin-bottom:.6rem}
.dn-legal h2{font-size:1.28rem;font-weight:800;color:#0A0A2E;margin:2.4rem 0 .9rem}
.dn-legal h3{font-size:1.05rem;font-weight:700;color:#0A0A2E;margin:1.6rem 0 .6rem}
.dn-legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:rgba(10,10,46,.06);border-radius:5px;padding:.12em .4em}
.dn-legal p{color:#1a1a2e;font-size:.98rem;line-height:1.75;margin-bottom:1rem}
.dn-legal ul{margin:0 0 1rem 1.3rem;padding:0}
.dn-legal li{color:#1a1a2e;font-size:.98rem;line-height:1.75;margin-bottom:.5rem}
.dn-legal strong{color:#0A0A2E;font-weight:700}
.dn-legal a{color:#0A0A2E;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.dn-legal a:hover{color:#2ECC71}
.dn-legal-card{background:rgba(255,255,255,.6);border:1px solid rgba(10,10,46,.08);border-radius:16px;padding:1.6rem 1.8rem;margin-top:2.6rem}
.dn-legal-card p:last-child{margin-bottom:0}

/* ── Tabla comparativa (página /precios) ── */
.dn-cmp-wrap{overflow-x:auto;margin:1.6rem 0;border-radius:16px;border:1px solid rgba(10,10,46,.08);background:rgba(255,255,255,.6)}
.dn-cmp-table{width:100%;min-width:560px;border-collapse:collapse}
.dn-cmp-table th,.dn-cmp-table td{padding:.85rem 1.1rem;text-align:left;font-size:.88rem;line-height:1.5;color:#1a1a2e;border-bottom:1px solid rgba(10,10,46,.08);white-space:nowrap}
.dn-cmp-table th{font-weight:800;color:#0A0A2E;background:rgba(10,10,46,.04);font-size:.78rem;text-transform:uppercase;letter-spacing:.4px}
.dn-cmp-table tr:last-child td{border-bottom:none}
.dn-cmp-table td:first-child,.dn-cmp-table th:first-child{font-weight:700;white-space:normal}
.dn-cmp-us td{background:rgba(46,204,113,.07)}
.dn-cmp-source{color:#6b7280;font-size:.8rem;line-height:1.6;margin-top:.6rem}
@media (max-width:600px){ .dn-cmp-table th,.dn-cmp-table td{padding:.7rem .85rem;font-size:.82rem} }

/* ── Responsive ── */
@media(max-width:1024px){
  .dn-hero-grid,.dn-contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .dn-footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  /* El mockup viejo se ocultaba en mobile/tablet por ser solo decorativo.
     El chat es un widget funcional — debe verse y usarse también acá
     (la mayoría del tráfico de datanautic.cl es móvil). Solo se achica. */
  .dn-chat{max-width:480px;height:480px}
}
@media(max-width:768px){
  .dn-section{padding:4rem 1.2rem}
  .dn-nav{padding:0 1.2rem;height:54px}
  .dn-logo img{height:44px}
  .dn-nav-ul{display:none;position:fixed;inset:0;background:rgba(255,255,255,.97);backdrop-filter:blur(30px);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;z-index:1001}
  .dn-nav-ul.open{display:flex}
  .dn-nav-ul.open a{font-size:1.18rem;font-weight:600;color:var(--dn-dark)}
  .dn-ham{display:flex}
  .dn-proc-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
  .dn-proc-line{display:none}
  .dn-metrics{grid-template-columns:1fr}
  .dn-row{grid-template-columns:1fr}
  .dn-footer-grid{grid-template-columns:1fr}
  .dn-footer-bottom{flex-direction:column;text-align:center}
  .dn-modal-box{padding:2rem 1.8rem}
  .dn-hero-ctas{flex-direction:column}
}
@media(max-width:480px){
  .dn-logo img{height:36px}
  .dn-proc-grid{grid-template-columns:1fr}
  .dn-nav{height:48px}
  .dn-ann{font-size:.74rem}
  .dn-modal-box{padding:1.8rem 1.4rem}
  /* Subido de 440px a 480px (17-08-2026): con el saludo partido en dos
     burbujas y la hora bajo cada una (puntos 3.6 y 4 del rediseño del
     widget), a 440px la segunda burbuja del saludo quedaba cortada a
     mitad de línea y los botones de respuesta rápida se veían pegados
     encima. Verificado con Chrome headless a 340px de ancho real. */
  .dn-chat{height:480px;padding:1.1rem 1rem .9rem}
  .dn-chat-bubble{font-size:.86rem}
}
@media print{
  .dn-nav,.dn-modal,.dn-bg,.dn-noise,.dn-ann,.dn-float-chat,.dn-chat-panel{display:none}
  body{background:#fff}
}

/* ══════════════════════════════════════════════════════════════════════
   ZONA OSCURA (11-09-2026) — "clara arriba, oscura abajo".
   El hero y los planes se quedan claros (la esencia de la marca); la
   demostración y la confianza pasan a navy profundo. El contraste entre
   las dos zonas es lo que da el aire de producto, sin perder identidad.
   Decisión de Matías, 11-09-2026.
   ══════════════════════════════════════════════════════════════════════ */
.dns-dark{
  position:relative;z-index:1;
  background:#0A0A2E;
  color:rgba(255,255,255,.9);
  padding:5.5rem 2rem;
  overflow:hidden;
}
/* Resplandor y retícula: dos gradientes, cero imágenes, cero peticiones. */
.dns-dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(46,204,113,.13) 0%, transparent 70%),
    radial-gradient(45% 45% at 88% 82%, rgba(99,102,241,.14) 0%, transparent 70%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:auto, auto, 72px 72px, 72px 72px;
}
.dns-dark > *{position:relative;z-index:1}
.dns-dark .dn-h2{color:#fff;text-shadow:none}
.dns-dark .dn-lead{color:rgba(255,255,255,.66)}

/* Cintillo sobre el título: mono, versalitas, contorno tenue. */
.dns-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--dn-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.45rem 1.05rem;border-radius:50px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.72);
  margin-bottom:1.3rem;
}
.dns-eyebrow.dns-eyebrow-claro{
  border-color:rgba(10,10,46,.14);background:rgba(255,255,255,.5);color:#3a4a5d;
}

/* ── Bento ── */
.dns-bento{
  display:grid;gap:1rem;max-width:1120px;margin:3rem auto 0;
  grid-template-columns:repeat(3,1fr);
}
.dns-bento-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:1.5rem 1.6rem;
  display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .25s ease, background .25s ease;
}
.dns-bento-card:hover{border-color:rgba(46,204,113,.35);background:rgba(255,255,255,.06)}
.dns-bento-card .dns-paso{
  font-family:var(--dn-mono);font-size:.63rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:#2ECC71;
}
.dns-bento-card h3{font-size:1.06rem;font-weight:800;color:#fff;margin:0;line-height:1.3}
.dns-bento-card p{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.6);margin:0}
.dns-bento-card .dns-ico{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(46,204,113,.13);border:1px solid rgba(46,204,113,.24);margin-bottom:.2rem;
}
.dns-bento-card .dns-ico svg{width:18px;height:18px;stroke:#2ECC71;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* La tarjeta del centro lleva el mockup y ocupa las dos filas. */
.dns-bento-mock{
  grid-row:span 2;align-items:stretch;justify-content:center;
  background:rgba(255,255,255,.03);padding:1.25rem;
}
@media (max-width:900px){
  .dns-bento{grid-template-columns:1fr 1fr}
  .dns-bento-mock{grid-row:auto;grid-column:span 2;order:-1}
}
@media (max-width:620px){
  .dns-bento{grid-template-columns:1fr}
  .dns-bento-mock{grid-column:auto}
}

/* ── Chat en zona oscura ── */
.dns-dark .dn-chat{
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.14);
  margin:0;
}

/* ── Barra de confianza ── */
.dns-confianza{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:rgba(10,10,46,.1);
  border:1px solid rgba(10,10,46,.1);border-radius:14px;overflow:hidden;
}
.dns-conf-item{
  background:rgba(255,255,255,.62);padding:1.9rem 1.8rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.dns-conf-item .k{
  font-family:var(--dn-mono);font-size:.63rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:#6b7b8e;
}
.dns-conf-item .v{font-size:.97rem;font-weight:800;color:var(--dnp-navy);line-height:1.35}
.dns-conf-item .s{font-size:.79rem;color:#4a5a6d;line-height:1.5}
.dns-conf-logos{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.15rem}
.dns-conf-logos img{height:26px;width:auto;opacity:.8}

/* Título que existe para los lectores de pantalla y para la jerarquía de
   encabezados, pero que no se muestra (11-09-2026, barra de confianza). */
.dn-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Marco del chat del Hero (11-09-2026) ──
   Le da presencia de producto: una barra superior tipo ventana y una
   etiqueta de dogfooding debajo. El chat mismo no cambia de estructura. */
.dns-chat-marco{position:relative}
.dns-chat-barra{
  display:flex;align-items:center;gap:.4rem;
  padding:.55rem .9rem;border-radius:14px 14px 0 0;
  background:rgba(10,10,46,.055);border:1px solid rgba(10,10,46,.09);border-bottom:none;
}
.dns-chat-barra i{width:9px;height:9px;border-radius:50%;background:rgba(10,10,46,.16);display:block}
.dns-chat-barra i:first-child{background:rgba(46,204,113,.55)}
.dns-chat-barra span{
  margin-left:.5rem;font-family:var(--dn-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#6b7b8e;
}
.dns-chat-marco .dn-chat{border-radius:0 0 18px 18px;margin-top:0}
.dns-chat-pie{
  display:flex;align-items:flex-start;gap:.5rem;margin-top:.85rem;
  font-size:.78rem;line-height:1.5;color:#3a4a5d;
}
.dns-chat-pie svg{flex-shrink:0;width:14px;height:14px;stroke:#2ECC71;fill:none;stroke-width:2;margin-top:.15rem}
.dns-chat-pie strong{color:var(--dnp-navy);font-weight:700}

/* ══════════════════════════════════════════════════════════════════════
   HERO A UNA COLUMNA (14-09-2026) — decisión de Matías.
   El chat sale del hero y baja a su propia sección en formato barra
   horizontal. El titular queda centrado, más grande y sobre fondo
   parejo: era lo que lo hacía verse lavado en dos columnas.
   ══════════════════════════════════════════════════════════════════════ */
.dn-hero-centro{max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.dn-hero-centro .dn-hero-desc{max-width:600px;margin-left:auto;margin-right:auto;text-align:center}
.dn-hero-centro .dn-hero-ctas{justify-content:center}
.dn-hero-centro .dn-trust{justify-content:center;gap:1.1rem 1.8rem}
.dn-hero-centro .dns-eyebrow{align-self:center;margin-bottom:1.5rem}

/* ══════════════════════════════════════════════════════════════════════
   BARRA DE PROMPT (14-09-2026) — el chat en horizontal, como la caja de
   ChatGPT o Claude. Reemplaza a la sección bento "Cómo funciona".
   Reusa los mismos IDs que el chat vertical (#dn-chat, #dn-chat-body,
   #dn-chat-form...) para que global.js siga funcionando sin cambios.
   ══════════════════════════════════════════════════════════════════════ */
.dns-prompt{max-width:780px;margin:2.5rem auto 0}

/* La caja: el chat deja de ser una tarjeta con cabecera y pasa a ser una
   barra. La cabecera se oculta — el contexto lo da el título de la sección. */
.dns-prompt .dn-chat{
  background:transparent;border:none;box-shadow:none;border-radius:0;margin:0;
  display:flex;flex-direction:column;gap:0;max-height:none;
}
.dns-prompt .dn-chat-head{display:none}

/* La conversación crece hacia arriba y solo ocupa espacio cuando existe. */
.dns-prompt .dn-chat-body{
  background:transparent;padding:0 .2rem;max-height:340px;gap:.7rem;
  margin-bottom:1rem;
}
.dns-prompt .dn-chat-body:empty{display:none;margin:0}
.dns-prompt .dn-chat-typing{padding:0 .4rem .7rem;color:rgba(255,255,255,.6)}

/* El input grande, redondeado, con el botón adentro — el gesto de ChatGPT. */
.dns-prompt .dn-chat-form{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  border-radius:28px;padding:.5rem .5rem .5rem 1.4rem;
  display:flex;align-items:center;gap:.6rem;
  box-shadow:0 12px 40px -16px rgba(0,0,0,.6);
  transition:border-color .2s, background .2s;
}
.dns-prompt .dn-chat-form:focus-within{border-color:rgba(46,204,113,.5);background:rgba(255,255,255,.1)}
.dns-prompt .dn-chat-input{
  background:transparent;border:none;color:#fff;font-size:1rem;padding:.75rem 0;
}
.dns-prompt .dn-chat-input::placeholder{color:rgba(255,255,255,.42)}
.dns-prompt .dn-chat-input:focus{outline:none}
.dns-prompt .dn-chat-send{width:44px;height:44px;background:#2ECC71;color:#0A0A2E}
.dns-prompt .dn-chat-send:hover{background:#27b765}

/* Chips: van DEBAJO de la barra y centrados, como las sugerencias de Claude. */
.dns-prompt .dn-chat-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.1rem 0 0;padding:0;
}
.dns-prompt .dn-chat-chip{
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.82);border-radius:50px;padding:.55rem 1.1rem;font-size:.84rem;
}
.dns-prompt .dn-chat-chip:hover{border-color:rgba(46,204,113,.55);background:rgba(46,204,113,.13);color:#fff}

/* Burbujas sobre fondo oscuro. */
.dns-prompt .dn-chat-bubble{max-width:82%}
.dns-prompt .dn-chat-in{background:rgba(255,255,255,.09);color:rgba(255,255,255,.93)}
.dns-prompt .dn-chat-out{background:#2ECC71;color:#0A0A2E}
.dns-prompt .dn-chat-hora{color:rgba(255,255,255,.4)}
.dns-prompt .dn-chat-out .dn-chat-hora{color:rgba(10,10,46,.45)}
.dns-prompt .dn-chat-marca{color:rgba(255,255,255,.35)}

.dns-prompt-pie{
  text-align:center;margin-top:1.2rem;font-size:.8rem;line-height:1.6;
  color:rgba(255,255,255,.5);
}
.dns-prompt-pie strong{color:rgba(255,255,255,.85);font-weight:600}

/* ── Barra de confianza con logos (14-09-2026) ── */
.dns-conf-logos-fila{
  display:flex;align-items:center;justify-content:center;gap:2.8rem;flex-wrap:wrap;
  padding:1.6rem 1.5rem;
}
.dns-conf-logo{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.dns-conf-logo img{height:38px;width:auto;object-fit:contain}
.dns-conf-logo .rol{
  font-family:var(--dn-mono);font-size:.6rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#6b7b8e;
}
@media (max-width:520px){ .dns-conf-logos-fila{gap:1.8rem} .dns-conf-logo img{height:30px} }

/* ── Línea común bajo las tarjetas de planes (reemplaza la repetición) ── */
.dnp-comun{
  max-width:1120px;margin:1.8rem auto 0;text-align:center;
  font-size:.83rem;line-height:1.7;color:#3a4a5d;
}
.dnp-comun strong{color:var(--dnp-navy);font-weight:700}

/* ── Logo en el Hero (14-09-2026) ── */
/* Isotipo del hero: casi cuadrado, así que se mide por alto. Más grande que
   el logo completo que había antes, porque ahora es el único elemento gráfico
   de apertura y tiene que sostener la parte de arriba solo. */
.dn-hero-logo{height:clamp(92px,11vw,138px);width:auto;margin-bottom:1.4rem;display:block}

/* ══════════════════════════════════════════════════════════════════════
   CHAT HORIZONTAL v2 (14-09-2026) — vuelve a tener cara de chat.
   Se recupera la cabecera con Diego y su foto (en v1 se ocultaba), y la
   caja gana borde y fondo propios para leerse como una ventana de chat
   y no como un buscador suelto.
   ══════════════════════════════════════════════════════════════════════ */
.dns-prompt .dn-chat{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  padding:1.1rem 1.1rem 1.2rem;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.75);
  gap:0;
}

/* Cabecera visible: foto, nombre y estado. */
.dns-prompt .dn-chat-head{
  display:flex;align-items:center;gap:.8rem;
  padding:0 .4rem 1rem;margin-bottom:.2rem;
  border-bottom:1px solid rgba(255,255,255,.09);background:transparent;
}
.dns-prompt .dn-chat-avatar{width:44px;height:44px;flex-shrink:0;border:2px solid rgba(46,204,113,.45)}
.dns-prompt .dn-chat-name{color:#fff;font-size:.98rem}
.dns-prompt .dn-chat-status{color:#2ECC71;font-size:.78rem}
.dns-prompt .dn-chat-head .dns-head-etq{
  margin-left:auto;font-family:var(--dn-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:.3rem .7rem;white-space:nowrap;
}

/* Mensaje de bienvenida: se ve desde el primer momento, como un chat real. */
.dns-prompt .dn-chat-body{padding:1rem .4rem 0;margin-bottom:.9rem;max-height:320px}
.dns-prompt .dn-chat-body:empty{display:none;margin:0;padding:0}

.dns-prompt .dn-chat-form{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  margin-top:.2rem;box-shadow:none;
}

/* Chips arriba del input y alineados a la izquierda, como sugerencias reales. */
.dns-prompt .dn-chat-chips{justify-content:flex-start;margin:0 0 .85rem;padding:0 .2rem}

@media (max-width:560px){
  .dns-prompt .dn-chat-head .dns-head-etq{display:none}
  .dns-prompt .dn-chat-form{padding-left:1.1rem}
}

/* ── Iconos de canal en las tarjetas de plan (14-09-2026) ── */
.dnp-canales{display:flex;align-items:center;gap:.55rem;margin:0 0 1.1rem}
.dnp-canal{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,46,.055);border:1px solid rgba(10,10,46,.09);
}
.dnp-canal svg{width:17px;height:17px;display:block}
.dnp-canal-nota{
  font-family:var(--dn-mono);font-size:.62rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:#6b7b8e;margin-left:.3rem;
}

/* ── Aviso de la implementación, dentro de cada tarjeta ── */
.dnp-setup-nota{
  font-size:.78rem;line-height:1.55;color:#4a5a6d;
  background:rgba(10,10,46,.04);border-radius:8px;padding:.6rem .75rem;margin:0 0 1rem;
}
.dnp-setup-nota strong{color:var(--dnp-navy);font-weight:700}

/* ── Franja de respaldo: tres logos ── */
.dns-conf-logos-fila{gap:2.2rem}

/* ══════════════════════════════════════════════════════════════════════
   LOGOS DE RESPALDO, PAREJOS (14-09-2026)
   Los tres logos tienen proporciones muy distintas: UDD Ventures es
   ancho y bajo, CEI es ancho, Sercotec es casi cuadrado. Igualarlos
   solo por altura hacía que UDD se viera enorme y Sercotec diminuto.
   La solución es darle a cada uno la MISMA CAJA y centrar dentro con
   object-fit:contain: así ocupan el mismo peso visual sin deformarse.
   ══════════════════════════════════════════════════════════════════════ */
.dns-conf-logos-fila{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  align-items:center;justify-items:center;padding:1.9rem 1.5rem;
}
.dns-conf-logo{gap:.7rem;width:100%}
.dns-conf-logo .rol{text-align:center}
/* La caja pareja: todos los logos viven dentro de la misma superficie. */
.dns-conf-logo img{
  height:56px;width:100%;max-width:190px;object-fit:contain;object-position:center;
}
@media (max-width:620px){
  .dns-conf-logos-fila{grid-template-columns:1fr;gap:1.6rem}
  .dns-conf-logo img{height:48px}
}

/* ══════════════════════════════════════════════════════════════════════
   CHAT: centrado y con el fondo acompañando (14-09-2026)
   El chat se veía corrido a la izquierda porque .dn-chat trae
   max-width:420px y margin:0 auto, y la regla de la barra le había
   puesto margin:0 — eso mataba el "auto" que lo centraba.
   ══════════════════════════════════════════════════════════════════════ */
.dns-prompt{position:relative;max-width:680px}
/* Resplandor detrás del chat: llena los costados sin agregar elementos. */
.dns-prompt::before{
  content:'';position:absolute;z-index:0;
  left:50%;top:44%;transform:translate(-50%,-50%);
  width:150%;height:130%;pointer-events:none;
  background:
    radial-gradient(45% 42% at 50% 50%, rgba(46,204,113,.13) 0%, transparent 72%),
    radial-gradient(38% 46% at 16% 62%, rgba(99,102,241,.16) 0%, transparent 72%),
    radial-gradient(34% 40% at 86% 34%, rgba(46,204,113,.1) 0%, transparent 72%);
  filter:blur(8px);
}
.dns-prompt > *{position:relative;z-index:1}
.dns-prompt .dn-chat{
  max-width:100%;        /* anula el 420px del chat vertical */
  margin:0 auto;         /* esto es lo que lo centra — no quitar */
  height:auto;           /* el alto lo da el contenido, no un fijo de 520px */
}

/* ── Nota de implementación dentro de cada tarjeta (14-09-2026) ──
   Reemplaza a la franja grande que iba bajo las tres tarjetas: repetirla
   una vez por plan funciona mejor, porque el cobro aplica a los tres y
   ahí es donde el visitante está mirando el precio. */
.dnp-setup-nota{
  background:rgba(10,10,46,.045);border:1px solid rgba(10,10,46,.07);
  border-radius:10px;padding:.8rem .9rem;margin:0 0 1.1rem;
}
.dnp-setup-nota .dnp-etq{margin-bottom:.4rem}
.dnp-setup-nota p{margin:0;font-size:.79rem;line-height:1.6;color:#3a4a5d}
.dnp-setup-nota strong{color:var(--dnp-navy);font-weight:700}

/* Enlace al detalle de precios: la portada vende, /precios compara. */
.dnp-comun-link{
  display:inline-block;margin-top:.5rem;font-weight:700;color:var(--dnp-navy);
  text-decoration:underline;text-underline-offset:3px;font-size:.84rem;
}
.dnp-comun-link:hover{color:var(--dnp-green)}

/* ══════════════════════════════════════════════════════════════════════
   APARICIÓN DEL ISOTIPO (14-09-2026) — reemplaza al glitch.
   Se revela de izquierda a derecha con el borde degradado, como una
   pincelada, y queda quieto en el centro. Decisión de Matías.

   Cómo funciona: una máscara con un gradiente horizontal más ancha que
   el propio logo (250%). Arrancando en mask-position:100% el logo queda
   bajo la zona transparente del gradiente — invisible. Al animar hacia
   0% pasa por debajo la zona opaca y lo va descubriendo. El tramo
   difuminado del gradiente es lo que hace que el borde no sea un corte
   duro sino un degradado.
   ══════════════════════════════════════════════════════════════════════ */
@keyframes dnLogoReveal{
  from{
    -webkit-mask-position:100% 0; mask-position:100% 0;
    opacity:0; transform:translateX(-14px) scale(.985);
  }
  60%{opacity:1}
  to{
    -webkit-mask-position:0% 0; mask-position:0% 0;
    opacity:1; transform:translateX(0) scale(1);
  }
}
.dn-hero-logo{
  -webkit-mask-image:linear-gradient(90deg,#000 38%,rgba(0,0,0,.35) 52%,transparent 66%);
  mask-image:linear-gradient(90deg,#000 38%,rgba(0,0,0,.35) 52%,transparent 66%);
  -webkit-mask-size:250% 100%; mask-size:250% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:dnLogoReveal 1.5s cubic-bezier(.22,.61,.36,1) .2s both;
  will-change:mask-position,opacity,transform;
}
@media (prefers-reduced-motion:reduce){
  .dn-hero-logo{
    animation:none;
    -webkit-mask-image:none;mask-image:none;opacity:1;transform:none;
  }
}