/* LaPoint · oferta de dominio y SSL en el portal (v1, 9-nov-2026, paquete dominios-ssl-oferta).
   Archivo aparte: no cambia lapoint.css. Usa los colores y letras de la marca (tokens --lp-* de lapoint.css,
   con valor de respaldo por si el orden de carga cambia). Interruptor: clase lp-dom-on / lp-dom-off en <html>. */

/* interruptor: sin la clase (JavaScript apagado) se ve lo de «Muy pronto», que no tiene botones que dependan de nada */
html:not(.lp-dom-on) .lp-of-solo-on{display:none!important}
html.lp-dom-on .lp-of-solo-off{display:none!important}

.lp-of-oculto{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.lp-of-chip{display:inline-block; padding:3px 10px; border-radius:99px; background:var(--lp-cyan,#0AD8E2); color:var(--lp-noche,#05202F);
  font:600 11px/1.2 var(--lp-f-texto,'Roboto',Arial,sans-serif); letter-spacing:.05em; text-transform:uppercase; vertical-align:1px; white-space:nowrap}

/* ── 1 · Tarjeta del panel principal ── */
body.tpl_nextgen #wrapper .lp-of-tarjeta{position:relative; display:flex; gap:18px; align-items:flex-start; box-sizing:border-box; margin:6px 0 22px;
  padding:22px 56px 22px 22px; border-radius:22px; background:var(--lp-noche,#05202F); color:var(--lp-sobre-noche,#E6F2F7);
  box-shadow:var(--lp-sombra,0 22px 46px -32px rgba(5,32,47,.34)); clear:both}
.lp-of-ic{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(10,216,226,.14); color:var(--lp-cyan,#0AD8E2)}
.lp-of-ic svg{width:23px; height:23px}
.lp-of-cuerpo{flex:1 1 auto; min-width:0}
/* el título necesita 3 id: lapoint.css pinta todo h4 de #cont en tinta oscura con !important */
body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-t,body.tpl_nextgen #wrapper #cont #lp-of-tarjeta h4.lp-of-t{margin:2px 0 6px; font:400 1.3rem/1.2 var(--lp-f-titulo,'Manrope',Arial,sans-serif); letter-spacing:-.02em; color:#fff!important; text-shadow:none!important}
body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-txt{margin:0 0 14px; max-width:62ch; font:400 15px/1.5 var(--lp-f-texto,'Roboto',Arial,sans-serif); color:var(--lp-sobre-noche-2,#A9C4D2)}
body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-txt b{color:#fff; font-weight:500}
body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-pronto{margin:0 0 14px; font:400 15px/1.5 var(--lp-f-texto,'Roboto',Arial,sans-serif); color:var(--lp-sobre-noche,#E6F2F7)}
.lp-of-acc{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-link{font:500 14.5px/1.3 var(--lp-f-texto,'Roboto',Arial,sans-serif); color:var(--lp-cyan-suave,#A8F4F8)!important; text-decoration:underline!important; text-underline-offset:3px; border:0!important; padding:0!important; background:none!important; box-shadow:none!important}
body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-link:hover{color:#fff!important}
body.tpl_nextgen #wrapper .lp-of-tarjeta .btn.btn-primary{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px!important; border:0!important;
  border-radius:999px!important; background:var(--lp-cyan,#0AD8E2)!important; background-image:none!important; color:var(--lp-noche,#05202F)!important;
  font:500 15px/1 var(--lp-f-texto,'Roboto',Arial,sans-serif)!important; text-shadow:none!important; box-shadow:none!important}
body.tpl_nextgen #wrapper .lp-of-tarjeta .btn.btn-primary:hover{background:var(--lp-cyan-suave,#A8F4F8)!important}
.lp-of-cerrar{position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--lp-sobre-noche-2,#A9C4D2);
  font:300 24px/1 var(--lp-f-texto,'Roboto',Arial,sans-serif); cursor:pointer}
.lp-of-cerrar:hover,.lp-of-cerrar:focus-visible{background:rgba(168,244,248,.12); color:#fff}

/* buscador (panel y carrito): campo, terminación y botón en una fila; en celular el botón baja a lo ancho */
body.tpl_nextgen #wrapper .lp-of-bus{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; max-width:620px}
body.tpl_nextgen #wrapper .lp-of-bus input{flex:1 1 180px; min-width:0; width:auto!important; height:44px!important; box-sizing:border-box; margin:0!important; padding:0 16px!important;
  border:1px solid var(--lp-linea,#BCCFDB)!important; border-radius:999px!important; background:#fff!important; color:var(--lp-tinta,#05202F)!important;
  font:400 16px/1.2 var(--lp-f-texto,'Roboto',Arial,sans-serif)!important; box-shadow:none!important}
body.tpl_nextgen #wrapper .lp-of-bus input:focus{border-color:var(--lp-cyan,#0AD8E2)!important; outline:2px solid rgba(10,216,226,.35); outline-offset:1px}
body.tpl_nextgen #wrapper .lp-of-bus select{flex:none; width:auto!important; height:44px!important; box-sizing:border-box; margin:0!important; padding:0 12px!important;
  border:1px solid var(--lp-linea,#BCCFDB)!important; border-radius:999px!important; background:var(--lp-papel-2,#F3F7FA)!important; color:var(--lp-tinta,#05202F)!important;
  font:500 15px/1 var(--lp-f-texto,'Roboto',Arial,sans-serif)!important; box-shadow:none!important}
body.tpl_nextgen #wrapper .lp-of-bus .btn{flex:none; height:44px; padding:0 22px!important; border-radius:999px!important}
body.tpl_nextgen #wrapper .lp-of-err{flex:1 1 100%; margin:2px 4px 0; font:400 13.5px/1.4 var(--lp-f-texto,'Roboto',Arial,sans-serif); color:#FFD27A}

/* ── 2 · Menú lateral: «Dominios y SSL» ── */
body.tpl_nextgen #wrapper #mainmenu .lp-of-menu .lp-of-chip{margin-left:6px; padding:2px 8px; font-size:10px}
body.tpl_nextgen #wrapper #mainmenu .lp-of-menu .lp-of-nota{padding:6px 12px 8px; font:400 12.5px/1.4 var(--lp-f-texto,'Roboto',Arial,sans-serif); color:var(--lp-sobre-noche-2,#A9C4D2); list-style:none}
body.tpl_nextgen #wrapper #mainmenu .lp-dom-menu-simple>a{display:flex!important; align-items:center; justify-content:space-between; gap:8px}
body.tpl_nextgen #wrapper #mainmenu .lp-dom-menu-simple .lp-of-chip{font-size:10px; padding:2px 8px}

/* ── 3 · Carrito: tarjeta debajo del resumen de compra ── */
body.tpl_nextgen #wrapper .lp-of-carrito{display:flex; gap:16px; align-items:flex-start; box-sizing:border-box; margin:14px 0 18px; padding:20px 22px;
  border:1px solid var(--lp-cyan,#0AD8E2); border-radius:20px; background:var(--lp-papel,#fff); color:var(--lp-tinta,#05202F); clear:both}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-ic{background:rgba(10,216,226,.16); color:var(--lp-enlace,#08729F); width:42px; height:42px}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-t{margin:0 0 4px; font:400 1.15rem/1.25 var(--lp-f-titulo,'Manrope',Arial,sans-serif); letter-spacing:-.015em; color:var(--lp-tinta,#05202F)}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-txt{margin:0 0 12px; max-width:64ch; font:400 14.5px/1.5 var(--lp-f-texto,'Roboto',Arial,sans-serif); color:var(--lp-tinta-2,#274A5E)}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-txt a{color:var(--lp-enlace,#08729F)!important; font-weight:500; text-decoration:underline; text-underline-offset:3px}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-nota{margin:0; font:400 13px/1.45 var(--lp-f-texto,'Roboto',Arial,sans-serif); color:var(--lp-tinta-3,#3A5A6D)}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-bus .btn{border:1px solid var(--lp-noche,#05202F)!important; background:var(--lp-noche,#05202F)!important; background-image:none!important;
  color:#fff!important; font:500 15px/1 var(--lp-f-texto,'Roboto',Arial,sans-serif)!important; text-shadow:none!important; box-shadow:none!important}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-bus a.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none!important}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-bus .btn:hover{background:var(--lp-placa-2,#0A3F5C)!important}
body.tpl_nextgen #wrapper .lp-of-carrito .lp-of-err{color:var(--lp-error,#A8261C)}
/* en el resumen, el tema ordena las cajas con «order» (lapoint.css, bloque del carrito): la tarjeta va justo después
   del resumen (mismo order que el resumen y después en el HTML), antes de los datos del cliente */
body.tpl_nextgen #wrapper #cart #cont>.lp-of-carrito{order:1}
/* apagado: una sola franja baja, para no distraer la compra */
body.tpl_nextgen #wrapper .lp-of-carrito.lp-of-carrito-pronto{align-items:center; padding:14px 18px; border-color:var(--lp-linea,#BCCFDB); background:var(--lp-papel-2,#F3F7FA)}
body.tpl_nextgen #wrapper .lp-of-carrito.lp-of-carrito-pronto .lp-of-ic{width:36px; height:36px}
body.tpl_nextgen #wrapper .lp-of-carrito.lp-of-carrito-pronto .lp-of-t{font-size:1rem; margin-bottom:2px}
body.tpl_nextgen #wrapper .lp-of-carrito.lp-of-carrito-pronto .lp-of-txt{margin:0; font-size:14px}

@media (max-width:640px){
  body.tpl_nextgen #wrapper .lp-of-tarjeta{flex-direction:column; gap:12px; padding:18px 18px 20px}
  body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-ic{width:40px; height:40px}
  body.tpl_nextgen #wrapper .lp-of-tarjeta .lp-of-t{padding-right:34px}
  body.tpl_nextgen #wrapper .lp-of-bus .btn{flex:1 1 100%}
  body.tpl_nextgen #wrapper .lp-of-tarjeta .btn.btn-primary{width:100%}
  body.tpl_nextgen #wrapper .lp-of-carrito{flex-direction:column; gap:10px; padding:16px}
  body.tpl_nextgen #wrapper .lp-of-carrito.lp-of-carrito-pronto{flex-direction:row; align-items:flex-start}
}