/* ══ 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 ────────────────────
   Mismo tratamiento que la juntura de `netebu_paginas.php`, y por el
   mismo motivo medido: al 85% este filo salia a #6651CD, luma 94, entre
   un #010424 por arriba (luma 6, el final del banner de cierre) y un
   #0B0A15 por abajo (11, el fondo del pie). Quince veces mas brillante
   que lo de encima. Lo que se ve no es el color, es el escalon de luz.

   Aqui NO hace falta el fundido que lleva la juntura: arriba 6 y abajo
   11 son practicamente el mismo oscuro, asi que no hay escalon entre
   las dos secciones que coser. Solo sobraba luz en el filo.

   Al 55% su luminancia baja a unos 62, en linea con la de la juntura, y
   la mascara horizontal lo apaga en los extremos: deja de ser una raya
   de borde a borde y pasa a ser un acento centrado. */
.sec.footer .block-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--nb-grad); opacity:0.55; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%,
                                     #000 78%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%,
                             #000 78%, rgba(0,0,0,0) 100%);
}

/* ── 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}
/* ── LA ZONA QUE SE PUEDE PULSAR, SIN MOVER EL DISENO ──────────
   Medido a 390 px: estos enlaces —Nosotros, Politica de Privacidad,
   Legal, Condiciones Generales— median 16 px de alto, porque su relleno
   es `0 11px`. WCAG 2.5.8 pide 24x24 como minimo y las guias de Apple
   recomiendan 44. En un movil eso es fallar el toque y volver a
   intentarlo.

   Se agranda el AREA con un pseudoelemento, no con relleno: el relleno
   estiraria la ultima linea del pie y moveria el copyright. Asi la caja
   crece hacia fuera sin ocupar sitio en el flujo.

   `-14px` arriba y abajo lleva los 16 px a 44. `-2px` a los lados es
   todo lo que se puede dar sin que dos enlaces contiguos se pisen: hay
   22 px entre ellos (11 de relleno por lado), asi que 2+2 deja 18 de
   holgura. */
.sec.footer .btn-container ul.nav li a{position:relative}
.sec.footer .btn-container ul.nav li a::after{
  content:""; position:absolute; inset:-14px -2px; z-index:1;
}

/* El boton de subir quedaba a 3 PX del ultimo enlace legal, medido en
   las catorce paginas. Dos objetivos a esa distancia son el mismo
   objetivo para un dedo. Se separa. */
@media (max-width:767px){
  .sec.footer .back-to-top{margin-top:14px}
}

/* ── 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}
}