.menu-iconico-derecho {
  position: fixed;
  top: 0;
  right: 0;
  width: 60px; /* contraído */
  height: 100vh;
  background-color: #ffffff;
  border-left: 1px solid #ddd;
  transition: width 0.3s;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.menu-iconico-derecho:hover {
  width: 200px; /* se expande sobre el contenido */
}

.menu-iconico-derecho .logo-menu {
  padding: 1rem;
}

.menu-iconico-derecho .logo-menu img {
  width: 32px;
  height: auto;
  transition: transform 0.3s;
}

.navegacion-iconos {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  width: 100%;
  flex: 1;
}

.navegacion-iconos li {
  width: 100%;
}

.navegacion-iconos li a {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  gap: 1rem;
  text-decoration: none;
  color: #111;
  transition: background 0.3s;
}

.navegacion-iconos li:hover {
  background-color: #f0f0f0;
}

.navegacion-iconos i {
  font-size: 1.2rem;
}

.texto {
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.menu-iconico-derecho .texto {
  opacity: 0;
  transition: opacity 0.3s;
}

.menu-iconico-derecho:hover .texto {
  opacity: 1;
}

.separador {
  width: 80%;
  border: 0;
  height: 1px;
  background-color: #ccc;
  margin: 1rem auto;
}
/* ESTILOS PARA LOS BOTONES DE ACCESO DE CLIENTES */

.panel-clientes {
  margin-bottom: 1rem;
  width: 100%;
}

.panel-clientes a {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem; /* Padding para que el hover sea más amplio */
  gap: 1rem;
  text-decoration: none;
  color: #111;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
  border-radius: 4px; /* Bordes redondeados para el hover */
  margin: 0.25rem 0.5rem; /* Margen para separar los botones */
}

.panel-clientes a:hover {
  background-color: #f0f0f0;
}

.panel-separator {
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0.4rem 0.8rem;
}

/* El texto dentro de los enlaces */
.panel-clientes .texto {
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

/* Mostrar el texto cuando el menú se expande */
.menu-iconico-derecho:hover .panel-clientes .texto {
  opacity: 1;
}

@media (min-width: 768px) {
.boton-menu {
    display: none;
  }
.menu-lateral {
    display: none;
  }
  
}
@media (max-width: 768px) {

  .menu-iconico-derecho {
    display: none;
  }
}

/* Banner superior movil */
.mobile-top-banner{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.mobile-top-banner__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 6px 16px;
}
.mobile-top-banner img{
  height: 36px;
  width: auto;
}
.mobile-top-banner.is-hidden{
  transform: translateY(-120%);
  opacity: 0;
}

/* Barra inferior de iconos (movil) */
.mobile-icon-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 0 8px calc(env(safe-area-inset-bottom, 0));
  z-index: 1001;
  box-shadow: 0 -8px 20px rgba(0,0,0,0.08);
}
.mobile-icon-bar__item{
  flex: 1;
  height: 56px;
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #111;
  text-decoration: none;
  border: none;
  background: transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mobile-icon-bar__item i{
  font-size: 1.05rem;
}
.mobile-icon-bar__label{
  display: block;
  font-size: 0.56rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: currentColor;
}
.mobile-icon-bar__item:active{
  transform: translateY(1px);
}
.mobile-icon-bar__item.is-active{
  box-shadow: 0 6px 14px rgba(0,0,0,0.16);
  transform: translateY(-2px);
}
.mobile-icon-bar__item--identidad{ color:#602b69; background: rgba(96,43,105,0.12); }
.mobile-icon-bar__item--web{ color:var(--brand-primary); background: rgba(32,163,229,0.12); }
.mobile-icon-bar__item--editorial{ color:var(--brand-sky); background: rgba(233,14,91,0.12); }
.mobile-icon-bar__item--impresos{ color:var(--brand-green); background: rgba(16,185,129,0.12); }
.mobile-icon-bar__item--inv{ color:#ff8a00; background: rgba(255,138,0,0.14); }
.mobile-icon-bar__item--digital{ color:#3f7fe2; background: rgba(63,127,226,0.12); }
.mobile-icon-bar__menu{
  background: #111;
  color: #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,0.2);
}

@media (min-width: 769px){
  .mobile-top-banner,
  .mobile-icon-bar{
    display: none;
  }
}

@media (max-width: 768px){
  body{
    padding-top: 72px;
    padding-bottom: 88px;
  }
}


/* --- Mejoras Menú Móvil --- */
.menu-lateral ul li a {
  display: flex;
  align-items: center;
  gap: 15px; /* Espacio entre ícono y texto */
  font-size: 1.2rem;
  padding: 15px 20px;
}

.menu-lateral ul li i {
  width: 25px; /* Ancho fijo para alinear los íconos */
  text-align: center;
  color: #8e44ad; /* Un color púrpura de tu marca */
}

.menu-lateral hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 15px 20px;
}

.menu-lateral .cliente-links a {
    font-weight: 600; /* Destacar los links de clientes */
}


/* ====== Paleta (ajústala a tu brand) ====== */
:root{
  --brand-primary:#20a3e5;   /* azul Colorística */
  --brand-dark:#602b69;      /* morado Colorística */
  --brand-green:#10b981;
  --brand-sky:#e90e5b;
  --ink:#1a1a1a;
  --rail:#e9e4d8;            /* línea/luz del borde */
}

/* Un poco más de ancho al expandir, mejor legibilidad */
.menu-iconico-derecho{ width:64px; border-left:1px solid var(--rail); }
.menu-iconico-derecho:hover{ width:240px; }

/* Items base (desktop) */
.navegacion-iconos li a.menu-item{
  position: relative;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px 12px 14px;
  color:var(--ink); text-decoration:none;
}
.navegacion-iconos li a.menu-item .ico{ width:26px; text-align:center; font-size:1.15rem; }

/* Barra de acento al pasar/activo */
.navegacion-iconos li a.menu-item::after{
  content:""; position:absolute; top:50%; right:0; transform:translateY(-50%) scaleY(0);
  width:4px; height:70%; border-radius:999px; background:currentColor; opacity:.14;
  transition:transform .22s ease, opacity .22s ease;
}
.navegacion-iconos li:hover a.menu-item::after,
.navegacion-iconos li a.menu-item.is-active::after,
.navegacion-iconos li a.menu-item[aria-current="page"]::after{
  transform:translateY(-50%) scaleY(1); opacity:.9;
}

/* Hover suave + color en icono */
.navegacion-iconos li a.menu-item:hover{ background:#f6f6f6; }
.navegacion-iconos li.servicios  a .ico{ color:var(--brand-primary); }
.navegacion-iconos li.nosotros   a .ico{ color:var(--brand-dark); }
.navegacion-iconos li.galeria    a .ico{ color:var(--brand-sky); }
.navegacion-iconos li.contacto   a .ico{ color:var(--brand-green); }
/* La barra usa currentColor; se hereda del link */
.navegacion-iconos li.servicios  a{ color:var(--brand-primary); }
.navegacion-iconos li.nosotros   a{ color:var(--brand-dark); }
.navegacion-iconos li.galeria    a{ color:var(--brand-sky); }
.navegacion-iconos li.contacto   a{ color:var(--brand-green); }

/* Mantén el texto negro al expandir, pero con leve tinte al icono */
.menu-iconico-derecho:hover .navegacion-iconos li a{ color:var(--ink); }
.menu-iconico-derecho:hover .navegacion-iconos li.servicios a .ico{ color:var(--brand-primary); }
.menu-iconico-derecho:hover .navegacion-iconos li.nosotros  a .ico{ color:var(--brand-dark); }
.menu-iconico-derecho:hover .navegacion-iconos li.galeria   a .ico{ color:var(--brand-sky); }
.menu-iconico-derecho:hover .navegacion-iconos li.contacto  a .ico{ color:var(--brand-green); }

/* Panel de clientes pegado al fondo y bien alineado */
.navegacion-iconos{ flex:1; }       /* ya lo tienes, empuja hacia abajo el panel */
.panel-clientes{ margin-top:auto; padding:6px 0 10px; width:100%; }
.panel-clientes a.cta{
  display:flex; align-items:center; gap:12px;
  margin:4px 8px; padding:10px 12px; border-radius:10px;
  font-weight:600;
}
.panel-clientes a .ico{ width:26px; text-align:center; }

/* CTAs con color diferenciado */
.cta-portal  { background:#f4eaff; color:var(--brand-dark); }
.cta-portal .ico{ color:var(--brand-dark); }
.cta-portal:hover{ filter:brightness(0.98); }

.cta-tarjetas{ background:#e6f6ff; color:var(--brand-primary); }
.cta-tarjetas .ico{ color:var(--brand-primary); }
.cta-tarjetas:hover{ filter:brightness(0.98); }

.cta-admin{
  background: linear-gradient(135deg, #602b69, #3f1f52);
  color: #fff;
}
.cta-admin .ico{ color:#fff; }
.panel-clientes a.cta-admin,
.panel-clientes a.cta-admin span{ color:#fff; }
.cta-admin:hover{
  filter: brightness(1.08);
}

.cta-whatsapp{
  background:#e9f8ef;
  color:#0f8a4b;
}
.cta-whatsapp .ico{ color:#0f8a4b; }
.cta-whatsapp:hover{ filter:brightness(0.98); }

/* Focus visible para accesibilidad */
.menu-iconico-derecho a:focus-visible,
.menu-lateral a:focus-visible{ outline:3px solid var(--brand-primary); outline-offset:2px; border-radius:10px; }

/* ====== Móvil ====== */
.menu-lateral{
  /* si ya tienes estilos, estos suman */
  background:#fff;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
}
.menu-lateral ul li a{
  padding:10px 14px; display:flex; align-items:center; gap:12px;
  font-size:1.05rem;
}
.menu-lateral ul li i{ width:24px; text-align:center; }
/* Asegura CTA Admin en blanco en menú móvil */
.menu-lateral .cta-admin{ color:#fff; }
.menu-lateral .cta-admin i{ color:#fff; }
.menu-lateral .cta-admin span{ color:#fff; }
.menu-lateral .cta-whatsapp{ color:#0f8a4b; }
.menu-lateral .cta-whatsapp i{ color:#0f8a4b; }
.menu-lateral .cta-whatsapp span{ color:#0f8a4b; }

/* Colores por sección en móvil (iconos) */
.menu-lateral .servicios i{ color:var(--brand-primary); }
.menu-lateral .nosotros  i{ color:var(--brand-dark); }
.menu-lateral .galeria   i{ color:var(--brand-sky); }
.menu-lateral .contacto  i{ color:var(--brand-green); }

/* CTAs móviles destacadas y pegadas al fondo del panel */
.menu-lateral .cliente-links{ position:sticky; bottom:0; background:linear-gradient(#fff,#fff); padding:4px 0 6px; }
.menu-lateral .cliente-links a{ display:flex; align-items:center; gap:10px; margin:6px 12px; padding:10px; border-radius:12px; font-weight:700; font-size:1rem; }
.menu-lateral .cliente-links a.cta-portal{ background:#f4eaff; color:var(--brand-dark); }
.menu-lateral .cliente-links a.cta-tarjetas{ background:#e6f6ff; color:var(--brand-primary); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .menu-iconico-derecho, .texto, .navegacion-iconos li a.menu-item::after{ transition:none !important; }
}