/* ═══════════════════════════════════════════════════════════════
   ECONEXORA — dalienta.css · la portada de marcas, en modo chat
   © EcoNexora — Jehosua Tepanecatl Caballero. Todos los derechos reservados.
   canary: ecx-css-dalienta-2026-08
   ═══════════════════════════════════════════════════════════════
   Todo prefijado `dc-`. No toca style.css, que lo comparten seis paginas.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --dc-marino:#123158; --dc-cielo:#2596BE; --dc-olivo:#99BB65;
  --dc-tinta:#16232E; --dc-gris:#5C6B78; --dc-fondo:#F4F8FB; --dc-linea:#DEE7ED;
}

.dc-body{background:var(--dc-fondo);color:var(--dc-tinta)}

/* La barra va solida: esta pagina no tiene hero oscuro debajo. */
.dc-body .navbar{background:#fff;border-bottom:1px solid var(--dc-linea);
                 backdrop-filter:none;box-shadow:0 2px 20px rgba(18,49,88,.05)}
.dc-body .nav-wordmark{color:var(--dc-marino)}
.dc-body .nav-logo{align-items:baseline;gap:8px}
.dc-body .nav-logo img{align-self:center}
.dc-por{font-size:.78rem;font-weight:600;color:var(--dc-gris)}
.dc-link{color:var(--dc-gris);text-decoration:none;font-size:.9rem;font-weight:600;
         margin-right:18px}
.dc-link:hover{color:var(--dc-cielo)}

.dc-main{max-width:760px;margin:0 auto;padding:112px 20px 60px}

/* ── El resumen ──────────────────────────────────────────────────
   Corto a proposito. El trabajo de esta pagina es UNO: generar
   curiosidad suficiente para registrarse. Lo profundo esta en
   como-funciona.html y dentro de Dalienta. */
.dc-hero{text-align:center;margin-bottom:44px}
.dc-hero h1{font-size:2.6rem;font-weight:800;letter-spacing:-1.2px;line-height:1.12;
            color:var(--dc-marino);margin:0 0 18px}
.dc-hero h1 em{font-style:normal;color:var(--dc-olivo)}
.dc-lead{font-size:1.08rem;line-height:1.72;color:var(--dc-gris);margin:0 auto 34px;
         max-width:600px}

/* ── La tesis ─────────────────────────────────────────────────────
   El unico bloque oscuro de la pagina, y es a proposito: es el momento
   en que se deja de hablar de producto. Si esto se ve igual que el resto,
   se lee como un parrafo mas y se salta. */
.dc-tesis{background:linear-gradient(160deg,var(--dc-marino),#0d2244);
          border-radius:24px;padding:44px 38px;margin:0 0 40px;text-align:center;
          box-shadow:0 22px 54px rgba(18,49,88,.16)}
.dc-tesis-insight{font-size:1.72rem;font-weight:800;line-height:1.3;color:#fff;
                  letter-spacing:-.6px;margin:0 0 22px}
.dc-tesis-insight em{font-style:normal;color:var(--dc-olivo)}
.dc-tesis-cuerpo{font-size:1.02rem;line-height:1.75;color:#CBDDEA;margin:0 auto 20px;
                 max-width:520px}
.dc-tesis-cuerpo strong{color:#fff}
.dc-tesis-cierre{font-size:1.12rem;line-height:1.6;color:#fff;margin:0 auto;
                 max-width:520px}
.dc-tesis-cierre strong{color:var(--dc-olivo)}

/* ── El legado ────────────────────────────────────────────────────
   Ni una cifra de alcance aqui, y es deliberado: el Cerebro dice que a
   las marcas se les vende legado, no visibilidad. En cuanto aparece un
   numero de impresiones, la conversacion se vuelve la de una agencia —
   y esa comparacion la perdemos, porque no somos eso. */
.dc-legado{margin:0 0 44px}
.dc-legado h2{font-size:1.42rem;font-weight:800;color:var(--dc-marino);
              letter-spacing:-.4px;text-align:center;margin:0 0 26px;line-height:1.32}
.dc-legado-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);text-align:left}
.dc-legado-grid > div{background:#fff;border:1px solid var(--dc-linea);
                      border-radius:16px;padding:22px 18px}
.dc-legado-ico{display:block;font-size:1.5rem;margin-bottom:10px}
.dc-legado-grid b{display:block;font-size:.98rem;color:var(--dc-marino);
                  margin-bottom:8px;line-height:1.4}
.dc-legado-grid p{margin:0;font-size:.88rem;line-height:1.68;color:var(--dc-gris)}
.dc-legado-grid strong{color:var(--dc-tinta)}

/* El bloque de pasos ya no abre la pagina: ahora es la respuesta al "y
   esto como se hace". Por eso pierde el margen de hero. */
.dc-hero-pasos{margin-bottom:44px}
.dc-lead-pasos{font-size:1.18rem;font-weight:700;color:var(--dc-marino);
               margin-bottom:22px}

.dc-tres{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);text-align:left;
         margin-bottom:26px}
.dc-tres > div{background:#fff;border:1px solid var(--dc-linea);border-radius:16px;
               padding:20px 18px}
.dc-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
        border-radius:50%;background:var(--dc-marino);color:#fff;font-size:.8rem;
        font-weight:800;margin-bottom:10px}
.dc-tres b{display:block;font-size:.98rem;color:var(--dc-marino);margin-bottom:6px}
.dc-tres p{margin:0;font-size:.88rem;line-height:1.6;color:var(--dc-gris)}

.dc-desde{font-size:.98rem;color:var(--dc-gris);margin:0}
.dc-desde b{color:var(--dc-olivo);font-size:1.1rem}
.dc-desde a{color:var(--dc-cielo);text-decoration:none;font-weight:700;margin-left:8px}
.dc-desde a:hover{text-decoration:underline}

/* ── El chat ─────────────────────────────────────────────────────── */
.dc-panel{background:#fff;border:1px solid var(--dc-linea);border-radius:22px;
          overflow:hidden;box-shadow:0 22px 54px rgba(18,49,88,.09)}
.dc-panel-top{display:flex;align-items:center;gap:12px;padding:16px 20px;
              border-bottom:1px solid var(--dc-linea);background:#fff}
.dc-panel-top img{width:38px;height:38px;object-fit:contain;flex-shrink:0}
.dc-panel-top strong{display:block;font-size:.98rem;color:var(--dc-marino)}
.dc-panel-top span{display:block;font-size:.8rem;color:var(--dc-gris)}

.dc-chat{padding:22px 20px;max-height:460px;min-height:280px;overflow-y:auto;
         scroll-behavior:smooth}
.dc-turno{display:flex;gap:12px;margin-bottom:18px;align-items:flex-start}
.dc-cara{width:30px;height:30px;object-fit:contain;flex-shrink:0;margin-top:2px}
.dc-burbuja{border-radius:16px;padding:14px 16px;font-size:.94rem;line-height:1.68;
            max-width:88%}
.dc-bot .dc-burbuja{background:var(--dc-fondo);color:var(--dc-tinta);
                    border-bottom-left-radius:5px}
.dc-yo{justify-content:flex-end}
.dc-yo .dc-burbuja{background:var(--dc-marino);color:#fff;border-bottom-right-radius:5px;
                   white-space:pre-wrap;word-break:break-word}
.dc-burbuja b{color:var(--dc-marino);font-weight:700}
.dc-bot .dc-burbuja b{color:var(--dc-marino)}

.dc-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dc-accion{display:inline-block;background:var(--dc-cielo);color:#fff;text-decoration:none;
           font-size:.86rem;font-weight:700;padding:9px 15px;border-radius:11px}
.dc-accion:hover{background:var(--dc-marino)}
.dc-accion:nth-child(2){background:#fff;color:var(--dc-marino);
                        border:1px solid var(--dc-linea)}
.dc-accion:nth-child(2):hover{border-color:var(--dc-cielo);background:#F0F8FC}

.dc-punto{display:inline-block;width:7px;height:7px;border-radius:50%;
          background:var(--dc-gris);opacity:.45;margin-right:4px;
          animation:dcp 1.2s infinite}
.dc-punto:nth-child(2){animation-delay:.15s}
.dc-punto:nth-child(3){animation-delay:.3s;margin-right:0}
@keyframes dcp{0%,60%,100%{transform:translateY(0);opacity:.35}
               30%{transform:translateY(-4px);opacity:.85}}

.dc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 14px}
.dc-chip{background:#fff;border:1px solid var(--dc-linea);border-radius:99px;
         padding:8px 15px;font:inherit;font-size:.85rem;color:var(--dc-marino);
         cursor:pointer;transition:border-color .15s,background .15s}
.dc-chip:hover{border-color:var(--dc-cielo);background:#F0F8FC}

.dc-entrada{display:flex;gap:10px;align-items:flex-end;padding:14px 16px;
            border-top:1px solid var(--dc-linea);background:#fff}
#dc-input{flex:1;border:1px solid var(--dc-linea);border-radius:14px;padding:12px 15px;
          font:inherit;font-size:.94rem;resize:none;max-height:140px;line-height:1.5;
          color:var(--dc-tinta);background:#fff}
#dc-input:focus{outline:0;border-color:var(--dc-cielo)}
#dc-enviar{background:var(--dc-cielo);color:#fff;border:0;border-radius:12px;
           width:44px;height:44px;font-size:1rem;cursor:pointer;flex-shrink:0}
#dc-enviar:hover{background:var(--dc-marino)}

.dc-pie{text-align:center;font-size:.9rem;color:var(--dc-gris);margin:28px 0 0}
.dc-pie a{color:var(--dc-cielo);text-decoration:none;font-weight:600}
.dc-pie a:hover{text-decoration:underline}

@media(max-width:720px){
  .dc-main{padding:96px 14px 40px}
  .dc-hero h1{font-size:1.9rem;letter-spacing:-.7px}
  .dc-lead{font-size:1rem}
  .dc-tres{grid-template-columns:1fr;gap:10px}
  .dc-tesis{padding:32px 22px;border-radius:20px}
  .dc-tesis-insight{font-size:1.32rem}
  .dc-tesis-cierre{font-size:1.02rem}
  .dc-legado h2{font-size:1.18rem}
  .dc-legado-grid{grid-template-columns:1fr;gap:10px}
  .dc-chat{max-height:none;min-height:240px}
  .dc-burbuja{max-width:100%}
  .dc-link{display:none}
}