/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER DE CONTACTO — compartido por TODAS las rutas.

   Vivía dentro de index.html y por eso «Contacto» desde cualquier otra página
   mandaba al home. Ahora el panel es un componente: `contacto.js` lo inyecta y
   lo gobierna, y este archivo trae su estilo. La pieza es la misma, no una
   copia: el home dejó de tenerla en línea.

   Los cuatro tokens de abajo sólo existían en el :root del home; fuera de él
   —por ejemplo en las páginas de estudio, que usan estudio.css— hay que
   declararlos o el panel sale transparente y sin sombra. Son los mismos
   valores, así que en el home no cambia nada.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --panel:#000000;
  --fab-core:#141619;
  --sombra:rgba(0,0,0,.9);
  --sombra-fab:rgba(0,0,0,.8);
  /* El acento azul de la marca: en el home viene del :root de la página. */
  --azul:#0a5cff;
  --azul-rgb:10 92 255;
}

/* Modo claro: vivía en index.html y por lo tanto el panel salía sin acento
   fuera del home. */
html[data-mode="light"] .dm-chip.on{background:var(--azul);border-color:var(--azul);color:#ffffff;}
html[data-mode="light"] .dm-card.on{border-color:var(--azul);}
html[data-mode="light"] .dm-card.on b{color:var(--azul);}
html[data-mode="light"] .dm-card.on .dm-tick{background:var(--azul);border-color:var(--azul);}
html[data-mode="light"] .dm-card.on .dm-tick::after{border-color:#ffffff;}
html[data-mode="light"] .dm-panel.onb .dm-prog-b i{background:var(--azul);}
html[data-mode="light"] .dm-send{color:#ffffff;background:var(--azul);border-color:var(--azul);}
html[data-mode="light"] .dm-send:hover{box-shadow:0 12px 32px -12px rgb(var(--azul-rgb)/.5);}

/* ── Drawer de misión ────────────────────────────────────────────────
   Se abre desde la derecha al pulsar INICIAR MISIÓN. Formulario preciso
   con estética de estación; al enviar arma el mensaje y abre WhatsApp. */
.dm-ov{
  position:fixed;inset:0;z-index:1600;
  background:rgb(var(--bg-rgb)/.68);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
}
body.dm-open .dm-ov{opacity:1;visibility:visible;}
.dm-panel{
  position:absolute;top:0;right:0;height:100%;width:min(480px,94vw);
  background:var(--panel);border-left:1px solid var(--edge-2);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(102%);transition:transform .5s cubic-bezier(.5,.02,.15,1);
  box-shadow:-40px 0 80px -40px var(--sombra);
}
body.dm-open .dm-panel{transform:translateX(0);}
.dm-grid{
  position:absolute;inset:0;opacity:.045;pointer-events:none;
  background-image:linear-gradient(rgb(var(--ink-rgb)/.5) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--ink-rgb)/.5) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000 20%,transparent 100%);
  mask-image:radial-gradient(90% 70% at 50% 0%,#000 20%,transparent 100%);
}
.dm-bk{position:absolute;width:16px;height:16px;border:1px solid rgb(var(--ink-rgb)/.3);pointer-events:none;z-index:2;}
.dm-bk.tl{top:18px;left:18px;border-right:0;border-bottom:0;}
.dm-bk.br{bottom:18px;right:18px;border-left:0;border-top:0;}
.dm-head{
  position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:34px 34px 22px;
}
.dm-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--ink-3);margin-bottom:12px;}
.dm-title{font-family:var(--sans);font-weight:300;font-size:23px;letter-spacing:-.01em;color:var(--ink);line-height:1.15;}
.dm-title b{font-weight:600;}
.dm-close{width:34px;height:34px;position:relative;flex:none;color:var(--ink-2);transition:color .25s ease;}
.dm-close:hover{color:var(--ink);}
.dm-close::before,.dm-close::after{content:'';position:absolute;left:8px;top:16px;width:18px;height:1.5px;background:currentColor;}
.dm-close::before{transform:rotate(45deg);}.dm-close::after{transform:rotate(-45deg);}
.dm-body{position:relative;z-index:2;flex:1;overflow-y:auto;padding:6px 34px 20px;}
.dm-body::-webkit-scrollbar{width:5px;}
.dm-body::-webkit-scrollbar-thumb{background:var(--edge-2);}
.dm-group{margin-bottom:24px;}
.dm-label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--ink-3);margin-bottom:12px;}
.dm-label .req{color:var(--ink-dim);}
.dm-chips{display:flex;flex-wrap:wrap;gap:8px;}
.dm-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-2);
  padding:9px 13px;border:1px solid var(--edge-2);border-radius:2px;cursor:pointer;
  transition:color .25s ease,border-color .25s ease,background .25s ease;user-select:none;
}
.dm-chip:hover{border-color:var(--ink-3);color:var(--ink);}
.dm-chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.dm-field{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--edge-2);
  padding:10px 2px;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:300;
  transition:border-color .3s ease;
}
.dm-field::placeholder{color:var(--ink-dim);}
.dm-field:focus{outline:0;border-bottom-color:var(--ink);}
textarea.dm-field{resize:none;min-height:76px;line-height:1.5;}
.dm-row{display:flex;gap:16px;}
.dm-row>.dm-group{flex:1;}
.dm-err{border-bottom-color:#e8556e!important;}
.dm-foot{position:relative;z-index:2;padding:18px 34px calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--edge);}
.dm-send{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--bg);
  background:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:16px;cursor:pointer;
  position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .3s ease;
}
.dm-send:hover{transform:translateY(-2px);box-shadow:0 12px 32px -12px rgb(var(--ink-rgb)/.5);}
.dm-send svg{width:16px;height:16px;}
.dm-note{margin-top:14px;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--ink-dim);text-align:center;}

/* ── Onboarding móvil: el drawer se recorre en dos pasos ──────────────
   En el teléfono un formulario de once campos es una pared. Bajo 640 px el
   panel pasa a ser un recorrido: primero QUÉ —cada capacidad en su propio
   cuadro, con la simulación de esa capacidad corriendo detrás, la misma que
   usa el panel de Capacidades— y después QUIÉN.

   Todo lo que sigue nace apagado: en pantalla grande el panel es exactamente
   el de siempre y estas piezas no existen. Las enciende la clase `.onb`, que
   pone el JS sólo cuando la consulta de medios calza. */
.dm-q{display:none;}
.dm-prog{display:none;}
.dm-cards{display:none;}
/* ── Cuadros de capacidad, en TODOS los tamaños (14 sep 2026) ──
   Antes sólo el teléfono elegía el tipo de solución con un cuadro por
   capacidad y su simulación detrás; en escritorio eran chips planos. Ahora el
   panel grande usa los mismos cuadros, en dos columnas. Los chips siguen en el
   marcado como fuente del estado (el cuadro es su espejo) y se ocultan sólo
   cuando el JS ya construyó los cuadros (`.con-cuadros`): sin JS, quedan. */
.dm-panel.con-cuadros .dm-chips{display:none;}
.dm-panel.con-cuadros .dm-cards{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:96px;gap:9px;}
.dm-card{
  position:relative;overflow:hidden;
  border:1px solid var(--edge-2);border-radius:2px;background:var(--bg);
  display:flex;align-items:flex-end;padding:10px;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .35s ease,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.dm-card canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;transition:opacity .4s ease;}
.dm-card .dm-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgb(var(--bg-rgb)/.93) 8%,rgb(var(--bg-rgb)/.4) 54%,rgb(var(--bg-rgb)/0) 100%);
}
/* En claro el velo es papel sobre papel: apagaba la simulación entera. El
   trazo ya es tenue de por sí, así que el lienzo va casi opaco y el velo
   sólo cubre lo justo para que se lea el rótulo. */
html[data-mode="light"] .dm-card canvas{opacity:.82;}
html[data-mode="light"] .dm-card .dm-velo{
  background:linear-gradient(to top,rgb(var(--bg-rgb)/.96) 14%,rgb(var(--bg-rgb)/.5) 48%,rgb(var(--bg-rgb)/0) 100%);
}
.dm-card b{
  position:relative;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.09em;line-height:1.35;color:var(--ink-2);transition:color .3s ease;
}
.dm-card i{
  position:absolute;top:9px;left:10px;font-style:normal;
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--ink-dim);
}
.dm-tick{
  position:absolute;top:8px;right:8px;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--edge-2);transition:background .28s ease,border-color .28s ease;
}
.dm-tick::after{
  content:'';position:absolute;left:4px;top:2.5px;width:4px;height:7px;
  border:solid var(--bg);border-width:0 1.4px 1.4px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .dm-card:hover{border-color:var(--ink-3);}
  .dm-card:hover canvas{opacity:.85;}
  .dm-card:hover b{color:var(--ink);}
}
.dm-card:active{transform:scale(.975);}
.dm-card.on{border-color:var(--ink);box-shadow:0 10px 26px -16px rgb(var(--ink-rgb)/.6);}
.dm-card.on canvas{opacity:1;}
.dm-card.on b{color:var(--ink);}
.dm-card.on .dm-tick{background:var(--ink);border-color:var(--ink);}
.dm-card.on .dm-tick::after{transform:rotate(45deg) scale(1);}
.dm-nav{display:block;}
.dm-back,.dm-next{display:none;}
.dm-note-1{display:none;}
.dm-eco{display:none;}
@media(max-width:560px){
  .dm-panel{width:100vw;border-left:0;}
  .dm-head{padding:30px 24px 18px;} .dm-body{padding:6px 24px 20px;} .dm-foot{padding:16px 24px calc(24px + env(safe-area-inset-bottom,0px));}
  .dm-row{flex-direction:column;gap:0;}
}
@media(max-width:640px){
  /* ── El recorrido ── */
  .dm-panel.onb .dm-step{display:none;}
  .dm-panel.onb .dm-step.act{display:block;animation:dmPaso .55s cubic-bezier(.16,1,.3,1) both;}
  @keyframes dmPaso{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  /* La pregunta del paso no se dibuja aquí: el JS la SUBE al titular, para
     que quede clavada arriba y no se vaya con el scroll. El `.dm-q` sigue en
     el marcado porque es la fuente del texto (y del ES/EN). */
  .dm-panel.onb .dm-step[data-paso="1"] .dm-label{display:none;}
  /* El último grupo del paso 2 se queda con el alto que sobre: así el
     recuadro de "qué necesitas" es grande de verdad y no una ranura. */
  .dm-panel.onb .dm-step[data-paso="2"]>.dm-group:last-child{
    flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0;
  }
  .dm-panel.onb .dm-step[data-paso="2"] textarea.dm-field{flex:1;}
  /* Eco de lo elegido en el paso 1: el recorrido tiene que recordar por dónde
     se pasó, o el segundo paso parece otro formulario. */
  .dm-panel.onb .dm-eco{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;}
  .dm-eco:empty{display:none!important;}
  .dm-eco span{
    font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--ink-2);
    padding:5px 9px;border:1px solid var(--edge-2);border-radius:2px;
  }
  /* La barra de avance: dos tramos que se llenan, no un número suelto. */
  .dm-panel.onb .dm-prog{display:flex;align-items:center;gap:8px;margin-top:16px;}
  .dm-prog-b{width:34px;height:2px;background:rgb(var(--ink-rgb)/.16);position:relative;overflow:hidden;}
  .dm-prog-b i{
    position:absolute;inset:0;background:var(--ink);
    transform:scaleX(0);transform-origin:left;
    transition:transform .55s cubic-bezier(.5,.02,.15,1);
  }
  .dm-panel.onb[data-paso="1"] .dm-prog-b.b1 i,
  .dm-panel.onb[data-paso="2"] .dm-prog-b i{transform:scaleX(1);}
  .dm-prog-n{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--ink-3);}

  /* ── Los cuadros de capacidad ──
     El estado vive en el chip de siempre; el cuadro es su espejo, así el
     mensaje de WhatsApp y la validación siguen siendo los mismos. */
  .dm-panel.onb .dm-chips{display:none;}
  /* Las ocho fichas reparten el alto que quede, en vez de traer una
     proporción fija: en un teléfono alto llenan la pantalla y en uno bajo se
     encogen hasta 92 px y recién ahí aparece el scroll. Una cuadrícula con
     `aspect-ratio` dejaba un pozo de aire abajo en el iPhone grande y se
     salía por el pie en el chico. */
  .dm-panel.onb .dm-body{display:flex;flex-direction:column;}
  .dm-panel.onb .dm-step.act{flex:1;display:flex;flex-direction:column;min-height:0;}
  .dm-panel.onb .dm-step[data-paso="1"] .dm-group{
    flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0;
  }
  .dm-panel.onb .dm-cards{
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(88px,1fr));
    gap:9px;flex:1;
  }
  /* Los estilos de los cuadros viven fuera de esta consulta (14 sep 2026):
     ahora también se usan en escritorio. Aquí sólo queda cómo reparten el alto. */

  /* ── El pie: atrás / continuar / enviar ── */
  .dm-panel.onb .dm-nav{display:flex;gap:10px;align-items:stretch;}
  .dm-panel.onb .dm-send{flex:1;}
  .dm-panel.onb[data-paso="1"] .dm-send,
  .dm-panel.onb[data-paso="1"] .dm-back{display:none;}
  .dm-panel.onb[data-paso="2"] .dm-next{display:none;}
  .dm-panel.onb[data-paso="1"] .dm-next,
  .dm-panel.onb[data-paso="2"] .dm-back{display:flex;}
  .dm-next{
    flex:1;align-items:center;justify-content:center;gap:12px;
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--bg);
    background:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:16px;cursor:pointer;
    transition:transform .25s ease,opacity .3s ease;
  }
  .dm-next:active{transform:scale(.985);}
  .dm-next svg{width:15px;height:15px;}
  .dm-back{
    width:52px;flex:none;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--edge-2);border-radius:2px;
    color:var(--ink-2);cursor:pointer;transition:border-color .25s ease,color .25s ease;
  }
  .dm-back:active{border-color:var(--ink);color:var(--ink);}
  .dm-back svg{width:16px;height:16px;}
  .dm-panel.onb[data-paso="1"] .dm-note{display:none;}
  .dm-panel.onb[data-paso="1"] .dm-note-1{display:block;}
}


/* ── FAB de misión (móvil): núcleo orbital vivo dentro de un botón ── */
.fab{
  display:block;position:fixed;z-index:1200;
  right:calc(24px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--fab-core),var(--bg) 70%);
  border:1px solid var(--edge-2);
  box-shadow:0 12px 30px -10px var(--sombra-fab);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none;
  /* aparece al scrollear: se entiende como el mismo INICIAR MISIÓN */
  opacity:0;transform:translateY(18px) scale(.82);pointer-events:none;
  transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1),filter .3s ease,border-color .3s ease;
}
.fab.show{opacity:1;transform:none;pointer-events:auto;}
/* estado activo/hover: invertido para que resalte y se note el toque */
.fab:hover,.fab:active{filter:invert(1);border-color:var(--ink);}
.fab.show:active{transform:scale(.93);}
.fab canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;}
/* halo que pulsa para que se lea como acción viva */
.fab::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgb(var(--ink-rgb)/.5);
  animation:fabPulse 2.8s ease-out infinite;pointer-events:none;
}
@keyframes fabPulse{
  0%{transform:scale(1);opacity:.5;}
  70%{transform:scale(1.35);opacity:0;}
  100%{opacity:0;}
}
body.dm-open .fab,body.menu-open .fab{opacity:0;pointer-events:none;}