/* ══ Netebu · pie ══════════════════════════════════════════════ */
.sec.footer{
  --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098;
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  --nb-night:#0B0A16; --nb-night-2:#141227;
  --nb-ink:#F2F3FB; --nb-muted:#B9BEDD; --nb-faint:#8E94BC;
  --nb-line:rgba(255,255,255,0.10);
  --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif;
  --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif;
  background:var(--nb-night);
}

/* Una sola pieza oscura: antes eran tres franjas, dos de ellas blancas */
.sec.footer .footer-widgets,
.sec.footer .footer-widgets.dark,
.sec.footer .fcCode,
.sec.footer .sfooter{
  background:transparent !important;
  border:0;
}
.sec.footer .block-footer{
  background:var(--nb-night);
  position:relative;
}
/* Filo superior con el degradado de marca, muy fino */
.sec.footer .block-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--nb-grad); opacity:0.85;
}

/* ── titulos de columna ── */
.sec.footer h4,
.sec.footer .contacts_box h4{
  font-family:var(--nb-ff-d) !important;
  font-size:1.02rem !important; font-weight:600 !important;
  color:var(--nb-ink) !important;
  letter-spacing:-0.01em; margin-bottom:18px !important;
  padding-bottom:10px; position:relative; border:0 !important;
}
.sec.footer h4::after{
  content:""; position:absolute; left:0; bottom:0;
  width:30px; height:2px; border-radius:2px;
  background:var(--nb-grad);
}

/* El tema centra SOLO este titulo, con
     `.block-footer .footer-widgets .contacts_box h4{text-align:center}`,
   mientras que los otros cinco quedan a la izquierda. Mi subrayado va
   a `left:0`, asi que la linea no seguia al texto. En escritorio la
   columna mide unos 105 px y el desajuste no se apreciaba; en movil
   ocupa 360 px y la linea se queda en la otra punta.               */
.sec.footer .contacts_box h4::after{
  left:50%; transform:translateX(-50%);
}

/* El tema adorna TODO <mark> con una barrita amarilla inclinada:
     mark:after{background-color:#fedc45; position:absolute;
                top:0; right:-0.1em; width:0.2em; height:1.535em;
                transform:skew(-7deg,0)}
   Al <mark> del telefono ya se le dio fondo translucido y borde
   redondeado, asi que el adorno sobra y ademas es el mismo amarillo
   ajeno a la marca que aparece en el carrito.                      */
.sec.footer mark::after{content:none !important}

/* ── enlaces de las columnas ── */
/* OJO CON LA ESTRUCTURA, que aqui ya costo una correccion: el icono
   es HERMANO del enlace, no hijo.
       <li><i class="far fa-code mr-1"></i> <a>Hosting WEB</a></li>
   Las reglas `li a i` que habia antes no alcanzaban a ni un solo
   icono del pie: ni el color ni el ancho llegaban a aplicarse.
   Ademas son dos elementos en linea separados por un espacio, asi
   que la fila puede partirse por ahi. `fa-code` mide 640 unidades de
   ancho —el mas ancho de los cuatro del grupo Hosting, frente a las
   512 del sobre— y era justo esa fila la que se desencajaba.
   Con flex el icono no puede separarse del texto y todos ocupan la
   misma columna, sea cual sea el glifo.                          */
.sec.footer .navbar-items ul li{
  display:flex; align-items:center; gap:9px; margin-bottom:2px;
}
.sec.footer .navbar-items ul li > i,
.sec.footer .navbar-items ul li > .fa,
.sec.footer .navbar-items ul li > .fas,
.sec.footer .navbar-items ul li > .far,
.sec.footer .navbar-items ul li > .fal,
.sec.footer .navbar-items ul li > .fab,
.sec.footer .navbar-items ul li > .fad,
.sec.footer .navbar-items ul li a i{
  flex:0 0 18px; width:18px; margin:0 !important;
  text-align:center; font-size:0.95rem; line-height:1;
  color:var(--nb-violet) !important;
  transition:color 0.22s ease;
}
.sec.footer .navbar-items ul li:hover > i,
.sec.footer .navbar-items ul li:hover a i{color:var(--nb-pink) !important}
.sec.footer .navbar-items ul li > a{flex:1 1 auto; min-width:0}
.sec.footer .navbar-items ul li a,
.sec.footer .footer-navbar a{
  font-family:var(--nb-ff-b);
  color:var(--nb-muted) !important;
  font-size:0.945rem; line-height:1.5;
  transition:color 0.22s ease, transform 0.22s ease;
  display:inline-flex; align-items:center; gap:9px;
}
.sec.footer .navbar-items ul li a:hover,
.sec.footer .footer-navbar a:hover{
  color:var(--nb-ink) !important; transform:translateX(3px);
}

/* ── redes sociales: circulares, no cuadradas ── */
.sec.footer .social-icons{display:flex; gap:10px}
.sec.footer .btn-social{
  width:38px !important; height:38px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.06) !important;
  border:1px solid var(--nb-line) !important;
  transition:background 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}
.sec.footer .btn-social:hover{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  border-color:transparent !important; transform:translateY(-2px);
}
.sec.footer .btn-social .fab,
.sec.footer .btn-social .fas,
.sec.footer .btn-social i{
  color:var(--nb-muted) !important; font-size:16px !important;
}
.sec.footer .btn-social:hover .fab,
.sec.footer .btn-social:hover i{color:#fff !important}

/* ── telefono: era un <mark>, y Bootstrap los pinta de amarillo ── */
.sec.footer mark,
.sec.footer .bigger-110 mark{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid var(--nb-line);
  color:var(--nb-ink) !important;
  font-family:var(--nb-ff-d); font-weight:600; font-size:0.98rem;
  border-radius:10px; padding:9px 15px !important;
  display:inline-flex; align-items:center; gap:9px;
  transition:border-color 0.24s ease, background 0.24s ease;
}
.sec.footer a:hover mark{
  border-color:rgba(123,92,246,0.55) !important;
  background:rgba(123,92,246,0.12) !important;
}
.sec.footer mark i{color:var(--nb-blue) !important}

/* ── ALTURA TACTIL EN MOVIL ──────────────────────────────────
   MEDIDO a 390 px: el enlace del telefono daba 21 px de alto y
   "Nosotros" 16. El telefono es el peor caso: en movil ES el boton
   de llamar. La causa es que el <a> va en linea, asi que su caja es
   la de la linea de texto y no la de su contenido —el <mark>, que
   si tiene relleno—. Pasa a `inline-flex` y ya mide lo que ocupa. */
@media (max-width:767px){
  .sec.footer a.bigger-110{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .sec.footer .copyright a, .sec.footer .footer-bottom a{
    display:inline-flex; align-items:center; min-height:36px;
    padding:0 2px;
  }
}

/* ── boton de contacto: el degradado de marca, no el magenta ── */
.sec.footer .btn-contacts,
.sec.footer .btn-contacts.btn-secondary{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  border:0 !important; color:#fff !important;
  font-family:var(--nb-ff-d); font-weight:600; font-size:0.96rem;
  border-radius:11px !important; padding:13px 22px !important;
  box-shadow:0 10px 26px -12px rgba(123,92,246,0.5);
  transition:transform 0.22s ease, box-shadow 0.22s ease;
}
.sec.footer .btn-contacts:hover{
  transform:translateY(-2px); color:#fff !important;
  box-shadow:0 16px 32px -14px rgba(123,92,246,0.62);
}

/* ── nota del IVA: integrada, ya no en una franja blanca ── */
.sec.footer .fcCode{
  padding:0; margin-top:34px;
  border-top:1px solid var(--nb-line);
}
.sec.footer .fcCode .container{padding-top:20px; padding-bottom:4px}
.sec.footer .nb-nota-iva,
.sec.footer .fcCode p{
  text-align:center; margin:0;
  font-family:var(--nb-ff-b); font-size:0.865rem;
  color:var(--nb-faint) !important;
}

/* ── ultima linea: copyright y enlaces legales ── */
.sec.footer .sfooter{border-top:1px solid var(--nb-line); margin-top:18px}
.sec.footer .footer-last{padding:20px 0}
.sec.footer .footer-copyright span,
.sec.footer .footer-copyright{
  font-family:var(--nb-ff-b); font-size:0.865rem;
  color:var(--nb-faint) !important;
}
.sec.footer .btn-container ul.nav li a{
  font-family:var(--nb-ff-b); font-size:0.865rem;
  color:var(--nb-muted) !important; padding:0 11px;
  transition:color 0.22s ease;
}
.sec.footer .btn-container ul.nav li a:hover{color:var(--nb-ink) !important}

/* ── volver arriba ── */
/* Reposo discreto; el degradado entra al pasar el raton y al pulsar.
   El icono es una mascara SVG que se define en netebu_paginas.php:
   una flecha con barra encima, como la de webmail.php.            */
.sec.footer .back-to-top{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:50% !important; width:40px; height:40px;
  display:inline-flex !important; align-items:center; justify-content:center;
  transition:background 0.24s ease, border-color 0.24s ease,
             transform 0.24s ease, box-shadow 0.24s ease;
}
.sec.footer .back-to-top:hover,
.sec.footer .back-to-top:focus,
.sec.footer .back-to-top:active{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  border-color:transparent !important; transform:translateY(-3px);
  box-shadow:0 12px 28px -12px rgba(123,92,246,0.7);
}
.sec.footer .back-to-top i,
.sec.footer .back-to-top .fa,
.sec.footer .back-to-top .fas{color:var(--nb-muted) !important}
.sec.footer .back-to-top:hover i{color:#fff !important}

/* ── movil ── */
@media (max-width:991px){
  .sec.footer .contacts_box{margin-top:28px}
  .sec.footer .footer-last{flex-direction:column; gap:14px; text-align:center}
  .sec.footer .btn-container ul.nav{justify-content:center; flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .sec.footer *{transition:none !important}
}
/* ══ ENLACES RETIRADOS DEL PIE ══════════════════════════════
   Programa Amigo y Asesoria Tecnica salen del pie por decision de
   direccion.

   POR QUE SE HACE AQUI Y NO EN EL GESTOR DE MENUS: los dos son
   `mod_adminpanel_cpages` relid=137 y relid=174, y ya se les puso
   `enabled=0` —sus hermanos visibles tienen `enabled=1`—, pero el
   pie del tema NO RESPETA ese campo: siguen pintandose. Se comprobo
   ademas que no era cache (templates_c estaba vacio) ni de nginx.
   El addon va cifrado con ionCube, asi que no hay forma de tocar su
   logica. Se ocultan aqui, acotado AL PIE: en el menu superior
   siguen donde estaban, que no se pidio quitarlos de ahi.

   Si algun dia el addon respeta `enabled`, este bloque se puede
   borrar y los enlaces ya no volveran: el 0 esta puesto. */
.sec.footer li:has(> a[href*="programa_amigo"]),
.sec.footer li:has(> a[href*="asesoria_tecnica"]),
.footer-widgets li:has(> a[href*="programa_amigo"]),
.footer-widgets li:has(> a[href*="asesoria_tecnica"]),
.block-footer li:has(> a[href*="programa_amigo"]),
.block-footer li:has(> a[href*="asesoria_tecnica"]){
  display:none !important;
}
/* respaldo para navegadores sin `:has()`: se oculta el enlace, y el
   elemento vacio que queda no deja hueco */
.sec.footer a[href*="programa_amigo"],
.sec.footer a[href*="asesoria_tecnica"],
.footer-widgets a[href*="programa_amigo"],
.footer-widgets a[href*="asesoria_tecnica"],
.block-footer a[href*="programa_amigo"],
.block-footer a[href*="asesoria_tecnica"]{
  display:none !important;
}
/* ══ EL AVISO DE COOKIES ════════════════════════════════════
   Lo pinta Cookie Consent (Osano/Insites) con su tema `classic`:
   fondo azul #5384ED y boton verde #44C769, que no son de la marca.
   Estructura:
     .cc-window.cc-floating.cc-type-info.cc-theme-classic
       span.cc-message  +  a.cc-link
       .cc-compliance > a.cc-btn.cc-dismiss

   SOLO SE CAMBIA EL ASPECTO. Ni el texto ni el comportamiento se
   tocan: el mensaje esta redactado para cumplir la normativa y el
   boton sigue siendo el mismo enlace que registra el consentimiento. */
.cc-window.cc-floating,
.cc-window.cc-banner{
  background:linear-gradient(180deg, rgba(26,22,52,0.95), rgba(13,11,28,0.97)) !important;
  border:1px solid rgba(255,255,255,0.13) !important;
  border-radius:18px !important;
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.86) !important;
  color:var(--nb-on, #F2F3FB) !important;
  font-family:"Figtree",system-ui,-apple-system,sans-serif !important;
  padding:22px !important;
  position:fixed; overflow:hidden;
}
.cc-window.cc-floating{max-width:400px}
/* filo de marca arriba, como en las demas islas del sitio */
.cc-window::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
}
.cc-window .cc-message{
  color:#B9BEDD !important; font-size:0.9rem !important;
  line-height:1.62 !important; margin-bottom:14px !important;
}
.cc-window .cc-link{
  color:#A594FF !important; opacity:1 !important;
  text-decoration:underline; padding:0 !important;
  font-weight:600;
}
.cc-window .cc-link:hover{color:#C9B8FF !important}
.cc-window .cc-compliance{margin-top:4px}
/* el boton de aceptar, con el degradado de marca */
.cc-window .cc-btn,
.cc-window .cc-btn.cc-dismiss,
.cc-window .cc-btn.cc-allow{
  background:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  color:#fff !important; border:0 !important;
  border-radius:11px !important;
  font-family:"Outfit",system-ui,-apple-system,sans-serif !important;
  font-weight:700 !important; font-size:0.95rem !important;
  padding:12px 26px !important; min-width:0;
  box-shadow:0 12px 30px -12px rgba(123,92,246,0.66);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-window .cc-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px -14px rgba(123,92,246,0.80);
  color:#fff !important; text-decoration:none;
}
/* el boton secundario, cuando lo hay (rechazar / configurar) */
.cc-window .cc-btn.cc-deny,
.cc-window .cc-btn.cc-settings{
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  color:#B9BEDD !important; box-shadow:none !important;
}
.cc-window .cc-btn.cc-deny:hover,
.cc-window .cc-btn.cc-settings:hover{
  background:rgba(255,255,255,0.14) !important; color:#fff !important;
}
.cc-window :focus-visible{outline:2px solid #A594FF !important; outline-offset:2px}
@media (max-width:575px){
  .cc-window.cc-floating{
    max-width:none; left:12px !important; right:12px !important;
    bottom:12px !important; padding:18px !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .cc-window .cc-btn{transition:none}
  .cc-window .cc-btn:hover{transform:none}
}