/* =========================================================================
   web-erp.css — ENC-NUE-46 · Seccion comercial "Web Conectada ERP".
   -------------------------------------------------------------------------
   Scope `.v-weberp`. La pagina lleva TAMBIEN `.v-pagina3`, asi que hereda
   entera la estetica v3 (hero oscuro, botones, secciones, tarjetas de plan,
   tabla comparativa, rail y CTA) de `pagina-v3.css`. Aqui viven SOLO las
   piezas que no existian todavia en el sistema:

     A · Diagrama Web <-> ERP del hero  (.we-diag)
     B · Contraste "antes / con Cuantic" (.we-vs)
     B bis · Banda "Tienda online"      (.we-eco · ENC-NUE-47)
     C · Rejilla de 3 modalidades       (override de .p3-plans)
     D · Pasos de puesta en marcha      (.we-pasos)
     E · Casos de disponibilidad de BD  (.we-caso)
     F · Preguntas frecuentes           (.we-faq)

   Igual que en precios y contacto: todo se declara primero para el tema
   CLARO y se reescribe despues bajo `.p3-dark`, que es el tema por defecto
   de esta pagina.
   ========================================================================= */

/* Anclas del rail: compensan el header fijo al hacer scroll suave. La regla
   de `pagina-v3.css` solo cubre #comparativa (la unica ancla de precios). */
.v-weberp #diferencia,
.v-weberp #conectado,
.v-weberp #migracion,
.v-weberp #tienda,
.v-weberp #modalidades,
.v-weberp #comparativa,
.v-weberp #puesta,
.v-weberp #condiciones,
.v-weberp #preguntas { scroll-margin-top: 100px; }

/* =========================================================================
   A · DIAGRAMA "TU WEB <-> CUANTIC ERP" (columna derecha del hero)
   -------------------------------------------------------------------------
   Sustituye al video que llevan la home y precios: aqui el argumento ES la
   conexion, asi que la figura la dibuja. Dos nodos (la web arriba, el ERP
   abajo) unidos por un canal con un pulso que viaja de uno a otro, y los
   datos que circulan como pastillas. Con `prefers-reduced-motion` el pulso
   se queda quieto: la figura sigue leyendose igual.
   ========================================================================= */
.we-diag {
  position: relative;
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(69,194,240,.08);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.we-diag__nodo {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(11,21,36,.55);
  border: 1px solid rgba(255,255,255,.13);
}
.we-diag__nodo--erp {
  background: linear-gradient(150deg, rgba(0,154,217,.22), rgba(23,80,224,.14));
  border-color: rgba(69,194,240,.42);
}
.we-diag__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 12px;
  color: #45c2f0;
  background: rgba(69,194,240,.14);
  box-shadow: inset 0 0 0 1px rgba(69,194,240,.3);
}
.we-diag__ic svg { width: 22px; height: 22px; }
.we-diag__nodo--erp .we-diag__ic { color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.we-diag__txt { min-width: 0; }
.we-diag__t { display: block; font-weight: 700; color: #fff; font-size: 1.02rem; line-height: 1.25; }
.we-diag__s { display: block; font-size: .84rem; color: rgba(255,255,255,.6); margin-top: 3px; }

/* Canal central: linea vertical + pulso viajero + etiqueta */
.we-diag__canal {
  position: relative;
  height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.we-diag__linea {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(69,194,240,.15), rgba(69,194,240,.75), rgba(69,194,240,.15));
}
.we-diag__pulso {
  position: absolute; left: 50%; top: 0;
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #45c2f0;
  box-shadow: 0 0 14px 3px rgba(69,194,240,.75);
  animation: we-viaje 2.6s ease-in-out infinite;
}
@keyframes we-viaje {
  0%   { top: 2px;  opacity: 0; }
  12%  { opacity: 1; }
  46%  { top: calc(100% - 12px); opacity: 1; }
  54%  { top: calc(100% - 12px); opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 2px;  opacity: 0; }
}
.we-diag__badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #45c2f0;
  background: #0d1a2c;
  border: 1px solid rgba(69,194,240,.45);
}
.we-diag__badge svg { width: 15px; height: 15px; }

/* Pastillas de lo que circula */
.we-diag__chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.we-diag__chips li {
  font-size: .82rem; font-weight: 600;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 5px 12px;
}
.we-diag__pie { margin: 16px 0 0; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.62); }

@media (prefers-reduced-motion: reduce) {
  .we-diag__pulso { animation: none; top: 50%; margin-top: -5px; }
}

/* =========================================================================
   A bis · PUNTOS FUERTES DEL HERO A 2x2 — ENC-NUE-49
   -------------------------------------------------------------------------
   `.p3-trust` de `pagina-v3.css` es un flex de una fila pensado para 3 items
   cortos. Naiara sube a 4 y dos de ellos son frases largas ("Ampliaciones a
   medida segun tus necesidades"), asi que en la columna izquierda del hero se
   partian de forma irregular. Aqui pasan a rejilla 2x2, que reparte los
   cuatro en dos filas iguales, y a una sola columna en movil (mismo
   comportamiento que ya tenia `.p3-trust` por debajo de 640px).
   ========================================================================= */
.v-weberp .p3-trust--2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
  align-items: start;
}
.v-weberp .p3-trust--2x2 .p3-trust__item { align-items: flex-start; line-height: 1.4; }
.v-weberp .p3-trust--2x2 .p3-trust__ic { margin-top: 1px; }
@media (max-width: 1100px) and (min-width: 861px) {
  /* Con el hero ya a dos columnas, la izquierda se estrecha antes que el
     viewport: se pasa a lista vertical un poco antes que en movil. */
  .v-weberp .p3-trust--2x2 { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .v-weberp .p3-trust--2x2 { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================================
   B · CONTRASTE "ANTES / CON CUANTIC"
   Dos columnas enfrentadas: el escenario habitual (web y ERP por separado)
   frente al escenario conectado. El primero se pinta apagado y el segundo
   con el acento de marca, para que la lectura sea inmediata.
   ========================================================================= */
.we-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 860px) { .we-vs { grid-template-columns: 1fr; } }

.we-vs__col {
  border-radius: 18px;
  padding: clamp(24px, 2.6vw, 32px);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow);
}
.we-vs__col--bien {
  background: linear-gradient(160deg, rgba(0,154,217,.07), rgba(23,80,224,.05));
  border-color: rgba(0,154,217,.3);
}
.we-vs__tag {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted-2); background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.we-vs__col--bien .we-vs__tag { color: #fff; background: var(--p3-cian); border-color: var(--p3-cian); }
.we-vs__tit { margin: 0 0 16px; font-size: 1.22rem; font-weight: 700; color: var(--c-primary); line-height: 1.3; }
.we-vs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.we-vs__list li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.55; color: var(--c-muted); }
.we-vs__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px;
  border-radius: 50%; font-weight: 700; font-size: 1rem; line-height: 1;
  color: var(--c-muted-2); background: var(--c-bg-soft);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.we-vs__col--bien .we-vs__ic { color: #fff; background: var(--p3-cian); box-shadow: none; }
.we-vs__ic svg { width: 13px; height: 13px; }
.we-vs__cierre {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px dashed var(--c-line);
  font-weight: 600; color: var(--c-primary); line-height: 1.5;
}
.we-vs__col--bien .we-vs__cierre { border-top-color: rgba(0,154,217,.35); }

/* ENC-NUE-49 · Los puntos pasan a formato "titulillo: explicacion". El
   fragmento en negrita es el gancho, asi que se destaca en color; el resto de
   la frase se queda en el gris de lectura. Las listas quedan alineadas arriba
   porque el `.we-vs__col` es flex en columna con el cierre pegado abajo. */
.we-vs__col { display: flex; flex-direction: column; }
.we-vs__list { flex: 1 1 auto; align-content: start; }
.we-vs__list strong { color: var(--c-primary); font-weight: 700; }
.we-vs__col--bien .we-vs__list strong { color: var(--p3-cian); }
.we-vs__tag { align-self: flex-start; }

/* El titular del giro comercial es largo (dos frases). Se le da algo mas de
   ancho y un cuerpo ligeramente menor para que no ocupe cuatro lineas. */
.v-weberp #diferencia .p3-sec-head { max-width: 78ch; }
.v-weberp #diferencia .p3-sec-title { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.22; }

/* =========================================================================
   B ter · AVISO DEL HERO "¿Aun no usas Cuantic?" — ENC-NUE-51
   -------------------------------------------------------------------------
   Va pegado al H1, antes del subtitulo, y es un ENLACE al bloque #migracion.
   Vive siempre sobre el hero oscuro (lo es en los dos temas), asi que los
   colores van fijos. Pastilla de contorno cian con la flecha al final, que se
   desplaza en el hover para que se lea como "sigue por aqui".
   ========================================================================= */
.we-aviso {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 22px; padding: 11px 16px;
  border-radius: 12px; max-width: 62ch;
  font-size: .96rem; line-height: 1.45;
  color: rgba(255,255,255,.86);
  background: rgba(69,194,240,.10);
  border: 1px solid rgba(69,194,240,.38);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.we-aviso strong { color: var(--p3-cian2); font-weight: 700; }
.we-aviso__ic {
  display: inline-flex; flex: 0 0 auto;
  width: 20px; height: 20px; color: var(--p3-cian2);
  transition: transform var(--t);
}
.we-aviso__ic svg { width: 20px; height: 20px; }
.we-aviso:hover { background: rgba(69,194,240,.17); border-color: rgba(69,194,240,.62); color: #fff; }
.we-aviso:hover .we-aviso__ic { transform: translateX(4px); }
.we-aviso:focus-visible { outline: 3px solid var(--p3-cian2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .we-aviso, .we-aviso__ic { transition: none; }
  .we-aviso:hover .we-aviso__ic { transform: none; }
}

/* =========================================================================
   B quater · BLOQUE "PLAN MIGRACION + WEB" (#migracion) — ENC-NUE-51
   -------------------------------------------------------------------------
   Responde la objecion del visitante que NO es cliente del ERP. Se coloca
   justo despues de "Que se conecta" —cuando ya ha entendido el valor de la
   conexion y le asalta la duda— y antes de hablar de dinero. Formalmente es
   una tarjeta con contorno cian y tres pasos numerados en fila: se distingue
   de la banda oscura de #tienda (que va justo despues) y de las tarjetas
   blancas de "Puesta en marcha", para que no parezca lo mismo dos veces.
   ========================================================================= */
.we-migra {
  position: relative; overflow: hidden;
  border-radius: 22px;
  padding: clamp(28px, 4vw, 52px);
  background: linear-gradient(160deg, rgba(0,154,217,.09), rgba(23,80,224,.05));
  border: 1px solid rgba(0,154,217,.32);
  box-shadow: var(--shadow);
}
.we-migra__glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  filter: blur(90px); opacity: .30; pointer-events: none;
  background: radial-gradient(circle, rgba(0,154,217,.5), transparent 62%);
  top: -220px; left: -140px;
}
.we-migra__inner { position: relative; }
.we-migra__head { max-width: 72ch; margin: 0 0 clamp(26px, 3vw, 38px); }
.we-migra__tit {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.7vw, 2.1rem); line-height: 1.18;
  letter-spacing: -.02em; font-weight: 700; color: var(--c-primary);
}
.we-migra__sub { margin: 0; color: var(--c-muted); font-size: 1.05rem; line-height: 1.65; }

.we-migra__pasos {
  list-style: none; margin: 0 0 clamp(26px, 3vw, 34px); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
@media (max-width: 900px) { .we-migra__pasos { grid-template-columns: 1fr; gap: 20px; } }
.we-migra__paso { display: flex; gap: 16px; align-items: flex-start; }
.we-migra__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  font-weight: 700; font-size: 1.02rem; color: #fff;
  background: linear-gradient(160deg, var(--p3-cian), var(--p3-cobalto));
  box-shadow: 0 10px 22px -12px rgba(0,154,217,.9);
}
.we-migra__txt h3 { margin: 0 0 7px; font-size: 1.04rem; font-weight: 700; color: var(--c-primary); line-height: 1.32; }
.we-migra__txt p  { margin: 0; color: var(--c-muted); line-height: 1.62; font-size: .95rem; }
.we-migra__txt strong { color: var(--p3-cian); font-weight: 700; }
.we-migra__cta { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 640px) {
  .we-migra { border-radius: 0; margin-inline: calc(var(--gutter) * -1); }
}

/* =========================================================================
   B bis · BANDA "TIENDA ONLINE" (#tienda) — ENC-NUE-47
   -------------------------------------------------------------------------
   Naiara da el titular paralelo al del hero ("No es solo una tienda web. Es
   una extension de tu ERP online.") y el claim que releva a "Sincronizacion
   nativa" ("Conexion en tiempo real con tus datos"). Los dos necesitaban un
   sitio con peso propio: una banda OSCURA a lo ancho, con el mismo gradiente
   navy del hero y del CTA final. Al ser oscura en los dos temas hace de
   respiro entre la seccion clara de "Que se conecta" y las tarjetas de
   precio, y repite en el cuerpo de la pagina el gesto tipografico del H1
   (linea 1 en peso medio, linea 2 en cian).
   ========================================================================= */
.we-eco {
  position: relative; overflow: hidden;
  border-radius: 22px;
  padding: clamp(32px, 4.6vw, 58px);
  color: #fff;
  background: linear-gradient(160deg, var(--p3-navy1), var(--p3-navy2) 55%, var(--p3-navy3));
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.6);
}
.we-eco__glow {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  filter: blur(90px); opacity: .42; pointer-events: none;
  background: radial-gradient(circle, rgba(0,154,217,.55), transparent 62%);
  top: -210px; right: -120px;
}
.we-eco__inner { position: relative; }
.we-eco__tit {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 3.1vw, 2.4rem); line-height: 1.12;
  letter-spacing: -.02em; max-width: 20ch;
}
.we-eco__l1, .we-eco__l2 { display: block; }
.we-eco__l1 { font-weight: 500; color: rgba(255,255,255,.92); }
.we-eco__l2 { font-weight: 700; }
/* ENC-NUE-50 · el titular nuevo ("Tu tienda online vendiendo a todas horas,
   integrada directamente con tu ERP") es bastante mas largo que el anterior:
   con 20ch caia en cinco lineas. */
.we-eco__tit--ancho { max-width: 42ch; }
.we-eco__sub {
  margin: 0 0 28px; max-width: 66ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.62;
  color: rgba(255,255,255,.82);
}
.we-eco__sub strong { color: #fff; font-weight: 700; }

/* Los tres puntos: lo mismo que ya dice la pagina, dicho para la tienda. */
.we-eco__puntos {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
@media (max-width: 900px) { .we-eco__puntos { grid-template-columns: 1fr; gap: 18px; } }
.we-eco__puntos li { display: flex; gap: 14px; align-items: flex-start; }
.we-eco__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  color: var(--p3-cian2); background: rgba(69,194,240,.14);
  box-shadow: inset 0 0 0 1px rgba(69,194,240,.3);
}
.we-eco__ic svg { width: 20px; height: 20px; }
.we-eco__txt { font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.76); }
.we-eco__txt strong { display: block; margin-bottom: 4px; color: #fff; font-size: 1rem; font-weight: 700; }
.we-eco__cta { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 640px) {
  /* Igual que .p3-cta: a pantalla estrecha la banda va a sangre. */
  .we-eco { border-radius: 0; margin-inline: calc(var(--gutter) * -1); }
}

/* =========================================================================
   C · MODALIDADES — la rejilla de planes de v3, a TRES columnas
   `pagina-v3.css` reparte `.p3-plans` en 4 columnas (las 4 versiones del
   ERP). Aqui las modalidades son 3, asi que se redefine el reparto sin
   tocar la hoja comun.
   ========================================================================= */
.v-weberp .p3-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .v-weberp .p3-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .v-weberp .p3-plans { grid-template-columns: 1fr; } }

/* Los nombres comerciales son largos y desiguales ("Página Web" frente a
   "Página Web + Tienda Online", que ocupa dos lineas): sin altura minima, el
   precio de cada tarjeta caia a una altura distinta y la comparacion visual
   se perdia. Con esto los tres precios quedan a la misma linea. */
.v-weberp .p3-plan__head { min-height: 92px; align-items: flex-start; align-content: flex-start; }
@media (max-width: 720px) { .v-weberp .p3-plan__head { min-height: 0; } }

/* ENC-NUE-50 · Los nombres crecen otra vez ("Portal B2B & Gran Catálogo",
   "Ecosistema Web & Shop") y en la tarjeta destacada el rotulo llegaba a
   meterse debajo de la pastilla "LA MÁS ELEGIDA", que mide ~113px y solo
   tenia 90px reservados en `pagina-v3.css`. Se reserva sitio de verdad y se
   baja un punto el cuerpo del nombre para que quepan en dos lineas. */
.v-weberp .p3-plan__name { font-size: 1.14rem; line-height: 1.25; }
.v-weberp .p3-plan--featured .p3-plan__head { padding-right: 128px; }

/* Desglose del precio (390 alojamiento + 600 tienda online...). Explica de
   donde sale la cifra: quita la sensacion de precio opaco. */
.we-desglose {
  margin: 10px 0 0; font-size: .82rem; line-height: 1.45;
  color: var(--c-muted-2);
}
.we-desglose strong { color: var(--p3-cian); font-weight: 700; }

/* La seccion "Que se conecta" son 6 tarjetas: con el `auto-fit` de
   `.p3-cards` caian 4 + 2 en escritorio (fila coja). Se fijan 3 columnas
   para que queden dos filas iguales de 3. */
.we-conecta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .we-conecta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .we-conecta { grid-template-columns: 1fr; } }

/* Banda destacada: `pagina-v3.css` la definio solo para tema claro (la usa
   /verifactu/, que no tiene tema oscuro propio). Aqui SI hace falta. */
.we-banda { margin-top: 32px; }
.we-banda__ic {
  display: inline-flex; vertical-align: -4px; margin-right: 9px;
  width: 20px; height: 20px; color: var(--p3-cian);
}
.we-banda__ic svg { width: 20px; height: 20px; }
.p3-dark .p3-highlight {
  background: linear-gradient(160deg, rgba(0,154,217,.14), rgba(23,80,224,.09));
  border-color: rgba(69,194,240,.34);
}
.p3-dark .p3-highlight h3 { color: #fff; }
.p3-dark .p3-highlight p  { color: var(--p3-txt); }
.p3-dark .we-banda__ic { color: var(--p3-cian2); }

/* Subtitular interno de la seccion de condiciones (el segundo bloque) */
.we-subtit { margin: 44px 0 8px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.we-subsub { margin: 0 0 26px; }

/* -------------------------------------------------------------------------
   Cabecera de la comparativa. Lleva el MISMO nombre de plan que las tarjetas
   de modalidad (un solo juego de nombres en toda la web). `.we-col__s` es un
   subtitulo opcional bajo el nombre; hoy no se usa. `.p3-tabla thead th` viene
   con `white-space: nowrap`, y "Portal B2B & Gran Catálogo" es largo: en esta
   pagina las cabeceras de plan pueden partir linea.
   ------------------------------------------------------------------------- */
.v-weberp .p3-tabla thead th[data-col]:not([data-col="0"]) { white-space: normal; }
.v-weberp .p3-tabla thead th { vertical-align: bottom; }
.we-col__t { display: block; }
.we-col__s {
  display: block; margin-top: 3px;
  font-size: .76rem; font-weight: 500; letter-spacing: .01em;
  color: rgba(255,255,255,.62);
}

/* =========================================================================
   D · PUESTA EN MARCHA (4 pasos numerados)
   ========================================================================= */
.we-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: we-paso; }
@media (max-width: 980px) { .we-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .we-pasos { grid-template-columns: 1fr; } }

.we-paso {
  position: relative;
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 26px 24px 24px; box-shadow: var(--shadow);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.we-paso:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(0,154,217,.35); }
.we-paso__n {
  counter-increment: we-paso;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
  font-weight: 700; font-size: .95rem; color: #fff;
  background: linear-gradient(160deg, var(--p3-cian), var(--p3-cobalto));
}
.we-paso__n::before { content: counter(we-paso); }
.we-paso__tit { margin: 0 0 8px; font-size: 1.06rem; font-weight: 700; color: var(--c-primary); line-height: 1.3; }
.we-paso__txt { margin: 0; color: var(--c-muted); line-height: 1.6; font-size: .95rem; }

/* =========================================================================
   E · CONDICIONES · disponibilidad de la base de datos (dos casos)
   ========================================================================= */
.we-casos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .we-casos { grid-template-columns: 1fr; } }

.we-caso {
  background: #fff; border: 1px solid var(--c-line); border-radius: 18px;
  padding: clamp(24px, 2.6vw, 30px); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.we-caso__cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.we-caso__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
  color: #fff; background: linear-gradient(160deg, var(--p3-cian), var(--p3-cobalto));
}
.we-caso__ic svg { width: 22px; height: 22px; }
.we-caso__tit { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--c-primary); line-height: 1.3; }
.we-caso__txt { margin: 0 0 16px; color: var(--c-muted); line-height: 1.65; }
.we-caso__nota {
  margin-top: auto;
  background: rgba(0,154,217,.07);
  border: 1px solid rgba(0,154,217,.22);
  border-radius: 14px; padding: 16px 18px;
}
.we-caso__nota-t { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--p3-cian); }
.we-caso__nota .p3-list li { font-size: .95rem; }

/* =========================================================================
   F · PREGUNTAS FRECUENTES (<details> nativo, sin JavaScript)
   ========================================================================= */
.we-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.we-faq__it {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.we-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-weight: 700; color: var(--c-primary); line-height: 1.4;
  transition: color var(--t), background var(--t);
}
.we-faq__q::-webkit-details-marker { display: none; }
.we-faq__q:hover { color: var(--p3-cian); }
.we-faq__q:focus-visible { outline: 3px solid var(--p3-cian); outline-offset: -3px; }
.we-faq__mas {
  position: relative; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,154,217,.12); color: var(--p3-cian);
}
.we-faq__mas::before,
.we-faq__mas::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t), opacity var(--t);
}
.we-faq__mas::before { width: 10px; height: 2px; }
.we-faq__mas::after  { width: 2px; height: 10px; }
.we-faq__it[open] .we-faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.we-faq__a { padding: 0 22px 20px; color: var(--c-muted); line-height: 1.7; }
.we-faq__a p { margin: 0 0 12px; }
.we-faq__a p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .we-faq__mas::before, .we-faq__mas::after, .we-paso { transition: none; }
}

/* =========================================================================
   G · TEMA OSCURO (el de serie en esta pagina)
   ========================================================================= */
.p3-dark .we-vs__col { background: var(--p3-surface); border-color: var(--p3-line-d); box-shadow: 0 18px 44px -22px rgba(0,0,0,.85); }
.p3-dark .we-vs__col--bien { background: linear-gradient(160deg, rgba(0,154,217,.16), rgba(23,80,224,.10)); border-color: rgba(69,194,240,.4); }
.p3-dark .we-vs__tag { color: var(--p3-txt-2); background: rgba(255,255,255,.05); border-color: var(--p3-line-d); }
.p3-dark .we-vs__col--bien .we-vs__tag { color: #06131f; background: var(--p3-cian2); border-color: var(--p3-cian2); }
.p3-dark .we-vs__tit { color: #fff; }
.p3-dark .we-vs__list li { color: var(--p3-txt-2); }
.p3-dark .we-vs__col--bien .we-vs__list li { color: var(--p3-txt); }
.p3-dark .we-vs__ic { color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--p3-line-d); }
.p3-dark .we-vs__col--bien .we-vs__ic { color: #06131f; background: var(--p3-cian2); box-shadow: none; }
.p3-dark .we-vs__cierre { color: #fff; border-top-color: var(--p3-line-d); }
.p3-dark .we-vs__col--bien .we-vs__cierre { border-top-color: rgba(69,194,240,.4); }
.p3-dark .we-vs__list strong { color: #fff; }
.p3-dark .we-vs__col--bien .we-vs__list strong { color: var(--p3-cian2); }

/* `.p3-card` es la tarjeta generica de `pagina-v3.css` y tampoco tenia tema
   oscuro (se quedaba BLANCA sobre el fondo navy, rompiendo la coherencia con
   `.p3-serv` y `.p3-mod` de precios). Se le da aqui el mismo tratamiento. */
.p3-dark .p3-card { background: var(--p3-surface); border-color: var(--p3-line-d); box-shadow: 0 14px 34px -20px rgba(0,0,0,.8); }
.p3-dark .p3-card:hover { border-color: rgba(69,194,240,.45); box-shadow: 0 20px 44px -18px rgba(0,0,0,.9); }
.p3-dark .p3-card h3 { color: #fff; }
.p3-dark .p3-card p  { color: var(--p3-txt-2); }

/* ENC-NUE-51 · Plan Migración + Web en tema oscuro */
.p3-dark .we-migra {
  background: linear-gradient(160deg, rgba(0,154,217,.15), rgba(23,80,224,.09));
  border-color: rgba(69,194,240,.36);
  box-shadow: 0 22px 54px -28px rgba(0,0,0,.85);
}
.p3-dark .we-migra__tit { color: #fff; }
.p3-dark .we-migra__sub { color: var(--p3-txt); }
.p3-dark .we-migra__txt h3 { color: #fff; }
.p3-dark .we-migra__txt p  { color: var(--p3-txt-2); }
.p3-dark .we-migra__txt strong { color: var(--p3-cian2); }

.p3-dark .we-desglose { color: var(--p3-txt-2); }
.p3-dark .we-desglose strong { color: var(--p3-cian2); }

.p3-dark .we-paso { background: var(--p3-surface); border-color: var(--p3-line-d); box-shadow: 0 14px 34px -20px rgba(0,0,0,.8); }
.p3-dark .we-paso:hover { border-color: rgba(69,194,240,.45); box-shadow: 0 20px 44px -18px rgba(0,0,0,.9); }
.p3-dark .we-paso__tit { color: #fff; }
.p3-dark .we-paso__txt { color: var(--p3-txt-2); }

.p3-dark .we-caso { background: var(--p3-surface); border-color: var(--p3-line-d); box-shadow: 0 18px 44px -22px rgba(0,0,0,.85); }
.p3-dark .we-caso__tit { color: #fff; }
.p3-dark .we-caso__txt { color: var(--p3-txt-2); }
.p3-dark .we-caso__nota { background: rgba(69,194,240,.09); border-color: rgba(69,194,240,.3); }
.p3-dark .we-caso__nota-t { color: var(--p3-cian2); }
.p3-dark .we-caso__nota .p3-list li { color: var(--p3-txt); }
.p3-dark .we-caso__nota .p3-list .p3-ic { color: var(--p3-cian2); }

.p3-dark .we-faq__it { background: var(--p3-surface); border-color: var(--p3-line-d); box-shadow: 0 14px 34px -20px rgba(0,0,0,.8); }
.p3-dark .we-faq__q { color: #fff; }
.p3-dark .we-faq__q:hover { color: var(--p3-cian2); }
.p3-dark .we-faq__mas { color: var(--p3-cian2); background: rgba(69,194,240,.14); }
.p3-dark .we-faq__a { color: var(--p3-txt-2); }
.p3-dark .we-faq__a strong { color: #fff; }

/* Listas de check dentro de bloques oscuros propios */
.p3-dark .we-caso .p3-list strong { color: #fff; }