/* ============================================================
   Cryphora — estilos compartidos de paquetes y cotizadores
   Generado a partir del CSS que estaba repetido en 5 paginas.
   Al vivir en un archivo aparte, el navegador lo cachea una vez.
   ============================================================ */
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.campo select,.campo input{
      background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
      color:var(--ink);font-family:var(--font-body);font-size:1rem;padding:13px 14px;
      transition:border-color .25s;min-height:48px;
    }
.campo select:focus,.campo input:focus{outline:none;border-color:var(--silver-3)}
.modal-bg.open{opacity:1;pointer-events:auto}
.modal{
      background:var(--card-2);border:1px solid var(--line-strong);border-radius:20px;
      max-width:560px;width:100%;padding:34px 32px;position:relative;
      max-height:88vh;overflow-y:auto;
      box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 60px -24px var(--glow);
      transform:translateY(24px) scale(.97);transition:transform .32s var(--ease-out);
    }
.modal-bg:not(.open) .modal{transition-duration:.22s}
.modal-bg.open .modal{transform:none}
.modal h3{font-family:var(--font-display);font-size:1.45rem;font-weight:700;letter-spacing:-.01em;padding-right:44px}
.modal > p{color:var(--ink-soft);font-size:.97rem;margin:8px 0 20px}
.modal-close{
      position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:10px;
      background:transparent;border:1px solid var(--line-strong);cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:border-color .25s var(--ease-out),transform .25s var(--ease-out);
    }
.modal-close:hover{border-color:var(--silver-2);transform:rotate(90deg)}
.modal-close svg{width:16px;height:16px;stroke:var(--ink)}
.md-plan .pre{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.md-plan .monto{font-family:var(--font-display);font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.md-plan .per{color:var(--ink-soft);font-size:.9rem}
.md-plan .extra{color:var(--ink-soft);font-size:.86rem;margin-top:8px;padding-top:9px;border-top:1px solid var(--line)}
.md-plan .pesos{color:var(--silver-3);font-size:.8rem;margin-top:5px}
.campo.mal input{border-color:rgba(220,90,90,.75)}
.cot-error{
      margin-top:14px;padding:12px 15px;border-radius:11px;font-size:.9rem;
      background:rgba(220,90,90,.10);border:1px solid rgba(220,90,90,.35);color:#F0B4B4;
    }
.cot-acciones .btn{flex:1 1 150px;justify-content:center}
.cf-panel{
      background:linear-gradient(180deg,#15171d 0%,var(--card) 70%);
      border:1px solid var(--line);border-radius:20px;padding:28px 26px;
    }
.cf-paso:last-child{margin-bottom:0}
.cf-paso h3{
      font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
      display:flex;align-items:center;gap:10px;margin-bottom:6px;
    }
.cf-num{
      width:25px;height:25px;border-radius:8px;flex-shrink:0;
      background:var(--bg-2);border:1px solid var(--line-strong);
      display:inline-flex;align-items:center;justify-content:center;
      font-size:.8rem;font-weight:700;color:var(--silver-2);
    }
.cf-paso > p{color:var(--ink-soft);font-size:.88rem;margin:0 0 14px 35px}
.cf-campos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-left:35px}
.cf-num-ctl button{
      width:46px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--line);
      color:var(--ink);font-size:1.25rem;cursor:pointer;line-height:1;
      transition:border-color .25s,background .25s;
    }
.cf-num-ctl button:hover{border-color:var(--silver-3);background:#1a1d24}
.cf-num-ctl button:first-child{border-radius:11px 0 0 11px}
.cf-num-ctl button:last-child{border-radius:0 11px 11px 0}
.cf-num-ctl input::-webkit-outer-spin-button,
    .cf-num-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cf-extra{
      display:flex;align-items:center;gap:12px;cursor:pointer;
      background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
      padding:13px 15px;transition:border-color .25s,background .25s;
    }
.cf-extra:hover{border-color:var(--line-strong)}
.cf-extra input{width:19px;height:19px;flex-shrink:0;accent-color:#c9d2dc;cursor:pointer;min-height:0}
.cf-extra .txt{flex:1;font-size:.94rem;line-height:1.35}
.cf-extra .pre{color:var(--silver-2);font-size:.9rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.cf-tot{
      background:linear-gradient(180deg,#191c24 0%,#111318 100%);
      border:1px solid var(--line-strong);border-radius:20px;padding:26px 24px;
      box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
    }
.cf-tot h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:16px}
.cf-lineas{display:grid;gap:9px;margin-bottom:18px;min-height:40px}
.cf-lin{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--ink-soft)}
.cf-lin b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-vacio{color:var(--silver-3);font-size:.9rem;font-style:italic}
.cf-sep{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.cf-fila{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.cf-etq{color:var(--ink-soft);font-size:.9rem}
.cf-peq{color:var(--silver-3);font-size:.8rem;margin-top:6px}
.cf-tot .btn{width:100%;justify-content:center;margin-top:16px}
.cf-nota{color:var(--silver-3);font-size:.8rem;line-height:1.5;margin-top:14px}
/* ---- lo que va incluido por defecto ---- */
    .inc-band{
      background:linear-gradient(180deg,#15171d 0%,var(--card) 70%);
      border:1px solid var(--line);border-radius:20px;padding:30px 28px;margin-bottom:24px;
    }
.inc-titulo{
      font-family:var(--font-display);font-size:1.12rem;font-weight:700;
      letter-spacing:-.01em;margin-bottom:18px;
    }
.inc-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.inc-lista li{display:flex;gap:11px;align-items:flex-start}
.inc-lista svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;stroke:var(--silver-2)}
.inc-lista b{display:block;font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.35}
.inc-lista em{display:block;font-style:normal;color:var(--ink-soft);font-size:.86rem;line-height:1.45;margin-top:3px}
.inc-pie{
      margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
      color:var(--silver-2);font-size:.88rem;font-weight:500;
    }
.cot-volver{
      display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);
      font-size:.92rem;font-weight:500;margin-bottom:18px;transition:color .25s;
    }
.cot-volver:hover{color:var(--ink)}
.cot-volver svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ================= configurador del servicio ================= */
    .conf-band{
      border-top:1px solid var(--line);background:var(--bg-2);
      padding:70px 0 80px;position:relative;
    }
.conf-head{text-align:center;max-width:620px;margin:0 auto 38px}
.conf-head .eyebrow{justify-content:center}
.conf-head h2{
      font-family:var(--font-display);font-size:clamp(1.6rem,3.6vw,2.3rem);
      font-weight:700;letter-spacing:-.02em;margin:10px 0 10px;
    }
.conf-head p{color:var(--ink-soft);font-size:1.02rem}
.cf-grid{display:grid;gap:22px;grid-template-columns:1.35fr .95fr;align-items:start}
.cf-paso{margin-bottom:28px}
.cf-num-ctl{display:flex;align-items:stretch}
.cf-num-ctl input{border-radius:0;border-left:0;border-right:0;text-align:center;-moz-appearance:textfield}
/* ficha explicativa de lo elegido */
    .cf-detalle{margin:0 0 26px 35px}
.cf-ficha{
      background:rgba(190,205,220,.05);border:1px solid var(--line);
      border-radius:13px;padding:15px 17px;
    }
.cf-ficha-t{font-family:var(--font-display);font-weight:700;font-size:.98rem;margin-bottom:6px}
.cf-ficha p{color:var(--ink-soft);font-size:.89rem;line-height:1.5;margin:0}
.cf-ficha-m{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;color:var(--silver-2);font-size:.84rem;font-weight:600}
.cf-extras{display:grid;gap:10px;margin-left:35px}
.cf-resumen{position:sticky;top:96px}
.cf-big{font-family:var(--font-display);font-size:1.7rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* recuadro de envio (mismo patron que la portada) */
    .modal-bg{
      position:fixed;inset:0;z-index:200;
      background:rgba(4,5,7,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      display:flex;align-items:center;justify-content:center;padding:24px;
      opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out);
    }
.modal-bg:not(.open){transition-duration:.2s}
.md-plan{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.md-plan .nom{font-family:var(--font-display);font-size:1.05rem;font-weight:700}
.cot-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cot-acciones{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
/* ---- tabla de capacidades de la licencia ---- */
.cf-caps{display:grid;gap:7px;margin:14px 0 12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cap{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.89rem;color:var(--ink-soft)}
.cap .si{color:#4ADE80;font-weight:700;font-size:1rem}
.cap .no{color:#7E8A98;font-weight:700;font-size:1rem}
.cap .lim{color:#E3B341;font-weight:600;font-size:.8rem}
/* ---- caja del dominio ---- */
.cf-dom{margin-left:35px;margin-top:14px;display:grid;gap:10px}
.cf-ayuda{color:var(--ink-soft);font-size:.86rem;line-height:1.55;margin:0}
.cf-ayuda b{color:var(--silver-2)}

/* --- ajustes por tamano de pantalla (van al final para poder sobrescribir) --- */

/* ---- contadores por tipo de equipo (cotizador de dispositivos) ---- */
.cf-equipos{display:flex;flex-direction:column;gap:10px}
.cf-eq{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  background:rgba(255,255,255,.02);
}
.cf-eq-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cf-eq-txt b{font-size:.95rem;line-height:1.25}
.cf-eq-txt span{font-size:.8rem;opacity:.62;line-height:1.3}
/* la etiqueta guia al lector de pantalla, no ocupa sitio en la tarjeta */
.cf-eq .campo{margin:0;flex-shrink:0}
.cf-eq .campo label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media(max-width:900px){.cf-grid{grid-template-columns:1fr}}
@media(max-width:560px){.cf-campos,.cf-paso > p{margin-left:0}}
@media(max-width:560px){.cf-extras{margin-left:0}}
@media(max-width:900px){.cf-resumen{position:static}}
@media(max-width:560px){.cf-detalle{margin-left:0}}
@media(max-width:680px){
      .conf-band{padding:48px 0 56px}
      .cf-panel{padding:24px 20px}
      .modal{padding:28px 22px}
      .modal-bg{padding:14px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,5,7,.92)}
    }
@media(max-width:560px){.cf-dom{margin-left:0}}

@media(max-width:560px){
  /* en el telefono el contador baja debajo del nombre y se estira:
     asi los botones + y - quedan grandes y no hay que apuntar */
  .cf-eq{flex-direction:column;align-items:stretch;gap:10px}
  .cf-eq .campo{width:100%}
  .cf-eq .cf-num-ctl{width:100%}
}

@media(max-width:680px){
  /* el boton de cerrar la cotizacion medía 37 px: por debajo del minimo */
  .modal-close{box-sizing:border-box;min-width:46px;min-height:46px}
}