/* .heater{
    background: url('/images/website/nav2.png');   
    background-repeat: repeat-x;
    background-size: 100% 200px;
    padding: 20px;
    
}  */
.header-logo {
    /* background: url('/images/website/nav2.png'); */
    background: url('/images/website/nav2i.png');

    background-repeat: repeat-x;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;  
    align-items: center;  
}
.sitios {
    /* background: url('/images/website/nav2.png'); */
    background: url('/images/website/nav2.png');

    background-repeat: repeat-x;
    background-size: 100% 100%;

    display: flex;
    justify-content: center;  
    align-items: center;  
}

/* Estilos personalizados */
.d-superior {
    padding: 80px;
    background: url('/images/website/directorio.png');
    /* Imagen de fondo */
    background-repeat: repeat-x;
    /* Repite la imagen verticalmente */
    background-size: 100% 100%;
    /* Ajusta el tamaño de la imagen */
}
.photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid #8D3FF7;
    object-fit: cover;
    /* Asegura que la imagen cubra completamente el círculo sin distorsionarse */
}


.name {
    color: #4512AD;
    font-weight: bold;
    font-size: 20px;
}

.position {
    color: #000001;
    font-weight: bold;
}

.email {
    color: #000001;
}

.btn-custom {
    background-color: #654397;
    color: white;
    border-radius: 20px;
    padding: 5px 10px;
    font-weight: 600;
}

/* Estilo para centrar el contenido verticalmente */
.row-center {
    display: flex;
    align-items: center;
    /* Centra verticalmente */
}

/* Espacio entre filas */
.row-gap {
    margin-bottom: 30px;
}

/***********************//*************************** Inicia codigo para el menu de navegacion********//*///************************/
/* Personaliza el icono toggler */
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(78, 0, 185, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Ajustar botón toggler */
.navbar-toggler {
border: none; /* Elimina el borde */
outline: none; /* Evita resaltar al hacer clic */
}
/* Cambiar el fondo del menú desplegable */
.dropdown-menu {
background-color: white !important; /* Color más claro al pasar el mouse */

border: none; /* Opcional: Eliminar borde */
}

/* Cambiar el color del texto de los elementos del menú */
.dropdown-menu .dropdown-item {

color: #4E00B9!important;
/* font-weight: bold; */
}

/* Cambiar el color del texto cuando el cursor pasa sobre los elementos */
.dropdown-menu .dropdown-item:hover {
background-color: #4E00B9 !important;
color: #F3D0FF !important;
}

.navbar-nav .nav-link {
    /* color:#4E00B9 !important; */
    color: white !important;
font-weight: 300!important;
}
/* .bg-teech .nav-link .fa,
.bg-teech .nav-link .tiktok-icon svg {
    transition: fill 0.5s ease, color 0.5s ease!important;
    -webkit-transition: fill 0.5s ease, color 0.5s ease!important;
    -moz-transition: fill 0.5s ease, color 0.5s ease!important;
    -ms-transition: fill 0.5s ease, color 0.5s ease!important;
    -o-transition: fill 0.5s ease, color 0.5s ease!important;
}

.bg-teech:hover .nav-link .fa,
.bg-teech:hover .nav-link .tiktok-icon svg {
    
    color: #4e00b9!important; 
    fill: #4e00b9!important; 
} */


/*=========================
   Variables y helpers modernos
   =========================== */
:root {
  --brand-1: #4E00B9;
  --brand-2: #F3D0FF;
  --ink: #0e0e11;
  --ink-2: #2b2b2f;
  --bg-soft: #ffffff;
  --glass: rgba(255,255,255,.65);
  --shadow-soft: 0 12px 32px rgba(0,0,0,.10);
  --radius-2: 12px;
  --radius-3: 16px;
  --trans-1: 140ms ease;
  --trans-2: 260ms cubic-bezier(.2,.8,.2,1);
   --nav-desktop-h: 80px; /* 72–88px suele ser lo común */
}


.shadow-soft { box-shadow: var(--shadow-soft); }
.rounded-3 { border-radius: var(--radius-3) !important; }
.glass {
  background: var(--glass);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-3);
}

.brand-gradient {
  background-image: linear-gradient(135deg, var(--brand-1), #7a2bf3);
  border-color: transparent !important;
}
.brand-gradient:hover { filter: brightness(.95); }



/* ===========================
   HERO / CAROUSEL
   =========================== */
.hero { position: relative; min-height: 420px; }
.hero__slide {
  background-position: center;
  background-size: cover;
  min-height: 420px;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%);
}
.hero .carousel-caption {
  left: 2rem; right: 2rem; bottom: 2rem;
  text-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.hero__title {
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 1.2vw, 2rem);
  color: #fff;
  margin: 0 0 .25rem;
}
.hero__subtitle { color: #e9e9ef; margin-bottom: .5rem; }
.hero__control { transition: transform var(--trans-1); }
.hero__control:hover { transform: scale(1.04); }

/* Botón fantasma claro sobre imágenes */
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background var(--trans-1), transform var(--trans-1);
}
.btn-ghost--light:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }

/* ===========================
   QUICK LINKS
   =========================== */
.quick-links { grid-template-columns: 1fr; }
.link-card {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: .75rem;
  align-items: center; padding: .55rem .75rem;
  background: #fff; border: 1px solid #efeff7; border-radius: var(--radius-2);
  color: var(--ink); text-decoration: none;
  transition: transform var(--trans-2), box-shadow var(--trans-2), border-color var(--trans-2);
}
.link-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(78,0,185,.2);
}
.link-card__icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 12px; color: #fff; background: var(--brand-1) !important;
}
.link-card__icon .fa { font-size: 22px; }
.link-card__text { font-weight: 600; line-height: 1.2; }

/* ===========================
   LINK-ROW en tarjeta de notificación
   =========================== */
.link-row .icon-tile {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 10px; background: var(--brand-1); color: #fff; flex: 0 0 auto;
}
.link-row .icon-tile .fa { font-size: 18px; }

/* ===========================
   SITE CARDS (Sitios de interés)
   =========================== */

.site-card {
  position: relative; display: grid; place-items: center;
  min-height: 140px; border-radius: var(--radius-3);
  padding: 1rem; background: #fff; border: 1px solid #efeff7;
  transition: transform var(--trans-2), box-shadow var(--trans-2), border-color var(--trans-2);
  text-align: center; color: var(--ink);
}
.site-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: rgba(78,0,185,.25); }
.site-card__img { max-width: 70%; height: auto; }
.site-card--icon { gap: .5rem; }
.site-card--icon .fa { font-size: 34px; color: #fff; }
.relevantes { padding: 1.25rem; border-radius: var(--radius-3); background: linear-gradient(180deg, var(--brand-1), #6b24df); color: #fff; }
.relevantes .site-card { background: rgba(255,255,255,.92); }

/* ===== PARTNERS GRID (uniforme, proporcional y responsive) ===== */
.container-partner {
  
  width: 98%;          /* ocupa 90% del ancho */
  margin: 0 auto;      /* lo centra */
  padding: 6px 10px;  /* menos padding = menos altura */
  
}
.partners-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

.partner{
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #efeff7;
  border-radius:var(--radius-2);
  padding:12px;
  transition:transform var(--trans-2), box-shadow var(--trans-2), border-color var(--trans-2);

  /* Uniformar alto de tarjeta sin forzar imagen */
  aspect-ratio: 16 / 9;           /* altura consistente entre logos */
  overflow:hidden;
}

.partner:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(78,0,185,.18);
}

/* Imágenes proporcionales y centradas */
.partner img{
  max-width:90%;
  max-height:70%;
  width:auto;                /* evita estirar horizontal */
  height:auto;               /* evita estirar vertical */
  object-fit:contain;        /* respeta proporciones dentro de la tarjeta */
  display:block;
  filter:saturate(1.05) contrast(1.02);
}

/* ===========================
   UTILIDADES
   =========================== */
.ratio { position: relative; width: 100%; }
.ratio::before { display:block; content:""; }
.ratio-16x9::before { padding-top: 56.25%; }
.ratio > iframe, .ratio > video, .ratio > img {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.g-3 { gap: 1rem !important; }
.gx-3 { --bs-gutter-x: 1rem; } /* Para Bootstrap 4, simulamos separaciones laterales */

/* ===========================
   ACCESIBILIDAD
   =========================== */
.stretch-link::after { /* ya tenías un estilo similar; reforzamos accesibilidad */
  position:absolute; inset:0; content:""; background:transparent;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ===========================
   MODAL
   =========================== */
#avisoModal .modal-content { border: 0; border-radius: var(--radius-3); }
#avisoModal .modal-header { border: 0; }
#avisoModal .btn-outline-danger { border-width: 1px; }


/* ===========================
   Container interno
   =========================== */
.container-interno {
  margin-top:10px!important;
  margin: 0 auto;      /* lo centra */
  background-color: #F00090; /* fondo magenta */
  width: 98%;          /* ocupa 90% del ancho */
  padding: clamp(16px, 3vw, 32px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  height: 250px!important;              /* altura fija */
  border-radius: 12px;
}
.container-interno h3 {
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 12px ;
  margin-top: 0px ;
}
/* ===========================
   Partner interno
   =========================== */
.partner-interno {
  display: flex;
  justify-content: center !important;  
  align-items: center;
  border-radius: 12px;
  padding: 10px;
  /* transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
}

.partner-interno img {
  max-width: 26%;
  height: auto;
  margin-bottom: 0;
  display: block;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: saturate(1.05) contrast(1.02);
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Hover */
/* .partner-interno:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
 */
.partner-interno:hover img {
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.05);
}

/* ===========================
   Comunicacion – contenedor transparente
   =========================== */


.relevantes-clean {
  background: rgba(255,255,255,0.06);
  background: #5D0FCC;
  border-radius: 14px;
  padding: clamp(16px, 3vw, 28px);
 
  color: #fff;
  width: 100%;         /* ocupa todo el ancho */
  max-width: 98%;   /* opcional: limita ancho máximo */
  margin: 0 auto;      /* centrado */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.section-title { color: #fff; font-weight: 800; letter-spacing: .2px; }

/* ===========================
   Grid
   =========================== */
.sites-grid {
  display: grid;
  gap: clamp(12px, 2.2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 1rem;
}

/* ===========================
   Tarjeta ligera (sin fondo)
   =========================== */
.site-lite {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  justify-items: center;
  gap: .6rem;
  padding: clamp(14px, 2.2vw, 18px);
  text-decoration: none;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: transparent;               /* << sin fondo blanco */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.site-lite:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
  border-color: rgba(243, 208, 255, 0.5); /* guiño a brand-2 */
}

.site-lite:focus-visible {
  outline: 2px solid #F3D0FF;
  outline-offset: 3px;
  border-radius: 12px;
}

/* Ícono en cápsula, sin fondo de tarjeta */
.site-lite__icon {
  display: inline-grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 12px;
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  color: #fff;
  box-shadow: 0 10px 24px rgba(78,0,185,.35);
  transition: transform .22s ease, filter .22s ease;
}
.site-lite__icon .fa { font-size: 22px; line-height: 1; }

.site-lite:hover .site-lite__icon { transform: translateY(-2px); filter: brightness(1.03); }

/* Texto */
.site-lite__text {
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}



/* ===== Centrado del bloque ===== */
.integrado-wrap {
  width: 100%;
  margin: 0 auto;
  margin-top: 1.5rem!important;
}

/* ===== Igualar alturas entre carousel y jurisdiccional ===== */

.integrado { row-gap: 1rem; }
.integrado .carousel,
/* La columna derecha toma la misma altura visual que el carrusel */
.integrado .jurisdiccional {

  display: flex;
  flex-direction: column!important;
  height: 100%;
}




/* Overlays y controles del hero */
.hero-slide { position: relative; }
.hero-slide::before {
  content:"";
  position: absolute; inset: 0;
  /* background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.55) 100%); */
}
.hero-control { transition: transform .15s ease; }
.hero-control:hover { transform: scale(1.05); }



/* ===== Jurisdiccional: tarjetas clickable ===== */
/* La lista ocupa toda la altura y reparte las tarjetas verticalmente */
.jl-list {
  margin-top:20px;
  display: flex;                 /* <-- en lugar de grid */
  flex-direction: column;
  justify-content: space-between;/* reparte el espacio para que “respire” */
  height: 100%;                  /* iguala altura con el carrusel */
  gap: 5;                        /* sin gap; el espacio lo da space-between */
  margin: 0;                     /* limpia márgenes extra */
  padding: 0;
  background:transparent!important;
}

/* Tarjeta clickable con bordes redondeados y borde sutil */
.jl-item {
  display: grid;
  margin-bottom:10px;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  text-decoration: none;
  color: #fff;
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  /* borde visible con fondo oscuro */
  border-radius: 16px;                       /* <-- bordes redondeados */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Efecto hover accesible */
.jl-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  border-color: rgba(243, 208, 255, 0.55); /* guiño a tu brand-2 */
}

/* Foco visible para teclado */
.jl-item:focus-visible {
  outline: 2px solid #F3D0FF;
  outline-offset: 3px;
  border-radius: 16px;
}

/* Ícono cápsula */
.jl-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 12px;
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  color: #fff;
  box-shadow: 0 8px 22px rgba(78,0,185,.25);
}
.jl-icon .fa { font-size: 22px; line-height: 1; }

/* Texto */
.jl-text { font-weight: 700; line-height: 1.25; }

/* ========= TEECH APP (sección) ========= */
.teechapp .ratio { position: relative; width: 100%; }
.teechapp .ratio::before { content: ""; display: block; }
.teechapp .ratio-16x9::before { padding-top: 56.25%; }
.teechapp .ratio > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Espaciados y ajustes visuales */
.teechapp .btn.brand-gradient {
  border-radius: 999px;
  padding: .6rem 1rem;
  font-weight: 600;
}
.teechapp .shadow-soft { box-shadow: var(--shadow-soft); }

/* Evita traslapes en responsive y da respiro con las secciones adyacentes */
#teechapp { margin-bottom: 2rem; }

/* --- El modal debe permitir overlay relativo --- */
#avisoModal .modal-content {
  position: relative; /* el contenedor padre para posicionar los botones */
}

/* --- Footer convertido en overlay centrado --- */
#avisoModal .modal-footer.modal-actions-overlay {
  position: absolute;
  top: 13%;
  /*centradovertical*/left: 50%;
  /*centradohorizontal*/transform: translate(-50%, -50%);
  width: auto;
  background: transparent;
  /*sinfondo*/border: none;
  /*quitalalíneadelfooter*/display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 5;
  /*sobrelaimagenocontenido*/pointer-events: none;
      
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/* Los botones sí permiten interacción */
#avisoModal .modal-footer.modal-actions-overlay .btn {
  pointer-events: auto;
}

/* Botón con gradiente */
.btn-brand {
  background-image: linear-gradient(180deg, var(--brand-1, #4E00B9), #6b24df);
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(78, 0, 185, 0.28);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.btn-brand:hover,
.btn-brand:focus {
  filter: brightness(1.05);
  transform: translateY(-2px);
}


/* ===== Footer institucional ===== */
.footer-brand {
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  color: #fff;
}

/* Contenedor y grid */
.footer-container {
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 32px 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

.footer-col { min-width: 0; }

/* Logo */
.footer-logo-link { display: inline-block; text-decoration: none; }
.footer-logo {
  max-width: 230px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.15));
}
.footer-meta {
  margin-top: 10px;
  font-size: 0.95rem;
  opacity: .9;
}

/* Encabezados y texto */
.footer-heading {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 .5rem;
}
.footer-address,
.footer-text {
  margin: 0 0 .25rem;
  line-height: 1.5;
  font-size: 0.975rem;
}

/* Enlaces */
.footer-link {
  color: #F3D0FF;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.footer-link:hover,
.footer-link:focus {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  outline: none;
}

/* Mapa */
.footer-map {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 180px; /* ajusta si lo quieres más alto */
  border: 0;
}

/* Franja inferior */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.25);
  margin-top: 6px;
  padding: 10px 0 14px;
  text-align: center;
}
.footer-copy {
  margin: 0;
  font-size: 0.9rem;
  opacity: .9;
}

/* Accesibilidad foco visible */
.footer-brand a:focus-visible {
  outline: 2px solid #F3D0FF;
  outline-offset: 2px;
  border-radius: 6px;
}


/* ===========================
   TEECH App – Grid proporcional
   =========================== */

/* Variables para controlar proporciones fácilmente */
:root {
  /* proporción de columnas principales (izq/dcha) en md+ */
  --teechapp-left-span: 6;   /* de 12 */
  --teechapp-right-span: 6;  /* de 12 */

  /* proporción interna del bloque de notificación (video/texto) en md+ */
  --ytb-left-fr: 7;          /* 7 partes */
  --ytb-right-fr: 5;         /* 5 partes */
}

/* Contenedor de la sección en grid */
.teechapp-grid {
  display: block;
  gap: 16px;
}



/* Subgrid interno para notificación */
.ytb-grid {
  display: grid;
  gap: 14px;
}

/* Tira horizontal de videos */
.ytb-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.ytb-strip::-webkit-scrollbar { height: 8px; }
.ytb-strip::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 10px;
}

.ytb-card {
  display: flex;
  flex-direction: column;
}

/* Texto al costado */
.ytb-grid-right,
.ytb-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Branding título e icono */
.ytb-title {
  background: #0b0146;
  font-weight: 700;
}
.ytb-icon {
  background: #0b0146;
  border-radius: 12px;
}

/* Ratio helper (por si no traes el de Bootstrap 5) */
.ratio { position: relative; width: 100%; }
.ratio::before { content: ""; display: block; }
.ratio-16x9::before { padding-top: 56.25%; }
.ratio > iframe,
.ratio > video,
.ratio > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sombra suave utilitaria */
.shadow-soft {
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.02);
  border-radius: 12px;
}

/* Botón con gradiente */
.brand-gradient {
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  border: 0;
  border-radius: 999px;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
}


/* ==========================
   HEADER superior (logo + premio + redes)
   ========================== */
.header-wrap { position: relative; }

/* Franja morada con imagen (ya usabas nav2i.png) */
.header-logo {
  background: url('/images/website/nav2i.png') repeat-x 0 0 / 100% 100%;
}
.header-logo__img {
  width: clamp(200px, 24vw, 320px);
  height: auto;
  display: block;
}
.header-award__img {
  width: clamp(60px, 9vw, 100px);
  height: auto;
  display: block;
}

/* Barra de redes (desktop) */
.header-social { background: #4E00B9; color: #fff; }
.header-social .container { padding-top: 6px; padding-bottom: 6px; }
.header-social__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px);
  justify-content: center; align-items: center;
}
.header-social .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; color: #fff !important; text-decoration: none;
  border-radius: 8px; transition: background .15s ease;
}
.header-social .nav-link:hover { background: rgba(255,255,255,.1); }
.header-social .tiktok-icon { width: 28px; height: 28px; display: inline-block; }

/* ==========================
   NAV pegajoso (desktop)
   ========================== */
.navbar-teech {
  background: #4E00B9 !important;
  font-size: 16px !important;
}
/* Flanqueo de nav con imágenes (desktop) */
.navbar-teech .container {
  position: relative;
}

.nav-aside img {
  display: block;
  height: 60px;      /* ajusta si quieres más alto */
  width: 160px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

/* Orden en desktop: logo izq, menú centro, premio der */
@media (min-width: 992px) {
  .navbar-teech .navbar-collapse { order: 2; }
  .navbar-teech .nav-left { order: 1; margin-right: 16px; }
  .navbar-teech .nav-right { order: 3; margin-left: 16px; }
}

/* El menú no “empuja” a los laterales */
.navbar-teech .navbar-collapse {
  flex-grow: 0;
}

/* Sticky solo en desktop (si no lo tienes ya) */
@media (min-width: 992px) {
  .sticky-desktop {
    position: sticky;
    top: 0;
    z-index: 1030; /* encima del carousel */
  }
}


/* En pantallas pequeñas: evita separaciones gigantes y usa gap regular */
/* Responsive finos */
/* Desde tablets hacia abajo: deja de forzar altura fija */
@media (max-width: 1199.98px) {
  .comunicacion-wrap{
    height: auto !important;
    min-height: 0;
  }
  
}
/* Subgrid notificación en lg+ (7/5 por defecto) */
@media (min-width: 992px) {
  .ytb-grid {
    grid-template-columns: minmax(0, calc(var(--ytb-left-fr) * 1fr))
                           minmax(0, calc(var(--ytb-right-fr) * 1fr));
  }
  .sticky-desktop {
    position: sticky;
    top: 0;
    z-index: 1030;          /* por encima del contenido */
    will-change: transform;
    box-shadow: none;
  }
  /* Sombra al desplazar (si agregas la clase .is-scrolled al body con JS) */
  .is-scrolled #siteNav { box-shadow: 0 8px 24px rgba(0,0,0,.14); }
}
/* Ajusta la grilla para que no crezca demasiado en filas y evite overflow */
@media (max-width: 991.98px) {
  .sites-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }
  #teechapp .ratio-16x9::before { padding-top: 56.25%; } /* estable */
  .partners-grid{ gap:14px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  .partner{ aspect-ratio: 16 / 10; }   /* un poco más alto en tablet */
  .partner img{ max-height:72%; }
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
  .ytb-hsplit {
    grid-template-columns: 1fr; /* se apilan: videos arriba, texto abajo */
  }
 
  .ytb-strip {
    grid-auto-columns: minmax(240px, 85%);
  }
}
/* Grid principal (md+) */
@media (min-width: 768px) {
  .teechapp-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  .teechapp-grid .ta-left {
    grid-column: span var(--teechapp-left-span);
  }
  .teechapp-grid .ta-right {
    grid-column: span var(--teechapp-right-span);
  }
  .ytb-grid {
    grid-template-columns: 1fr;
  }
}
/* En móviles medianos: columnas más estrechas y separación extra antes de "Sitio" */
@media (max-width: 767.98px) {
  .comunicacion-wrap { height: auto !important; }
  .sites-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
  }
   #teechapp .btn.brand-gradient { width: 100%; text-align: center; }
  /* separa visualmente las secciones para evitar sensación de traslape */
  #comunicacion-, .comunicacion-wrap { margin-bottom: 20px; }
}

/* En móviles chicos */
@media (max-width: 575.98px) {
  .comunicacion-wrap {
    height: auto !important;
    padding: 16px 12px;
  }
  .partner-interno {
    padding: 12px;
  }
  .partner-interno img {
    max-width: 80%;
  }
  .sites-grid {
    /* dos columnas estables en pantallas angostas */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .site-lite__icon { width: 48px; height: 48px; }
    #teechapp { margin-top: 1rem; }
  #teechapp .ratio-16x9::before { padding-top: 56.25%; } /* mantiene aspecto */
  .partners-grid{ gap:12px; grid-template-columns:repeat(2, 1fr); } /* 2 por fila en móvil */
  .partner{ aspect-ratio: 4 / 3; }     /* más alto para logos apaisados */
  .partner img{ max-height:75%; }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 0;
  }
  .footer-map { max-width: 100%; }
  .footer-logo { max-width: 200px; }
  #avisoModal .modal-footer.modal-actions-overlay {
    flex-wrap: wrap;
    gap: 8px;
  }
   .ytb-strip {
    grid-auto-columns: minmax(220px, 90%);
  }
}
/* Botón gradiente (abre modal) */
.btn-brand{
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  color:#fff !important;
  border:0;
  width:auto;
  box-shadow:0 8px 20px rgba(78,0,185,.28);
}
.btn-brand:hover{ filter:brightness(1.05); }

/* Modal redes */
.social-modal{ border:0; border-radius:16px; overflow:hidden; }
.social-modal .modal-header .modal-title{ font-weight:800; color:#0b0146; }

/* Grid de botones */
.social-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (min-width:576px){ .social-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:992px){ .social-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* Botón estilo tarjeta */
.social-btn{
  display:flex; align-items:center; gap:10px;
  padding:.75rem .9rem;
  border:1px solid #efeff7; border-radius:12px;
  background:#fff; color:#222 !important; text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.social-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(78,0,185,.25);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Cápsula de icono */
.social-btn .icon{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  background:#4E00B9; color:#fff;
  box-shadow:0 8px 22px rgba(78,0,185,.18);
}
.social-btn .icon .fa{ font-size:20px; }
.social-btn .tiktok-icon{ width:20px; height:20px; display:block; fill:currentColor; }

/* Por si quieres forzar oculto via CSS (además del d-none): */
.header-social__list{ display:none; }


/** Propuesta /* ===== MODAL DE REDES – refinado ===== */
.social-modal{
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

/* Encabezado del modal: tipografía y separación */
.social-modal .modal-header{
  padding: 18px 22px 10px;
  border: 0;
  background:
    radial-gradient(1200px 140px at 50% -60px, rgba(78,0,185,.08), transparent),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0));
}
.social-modal .modal-header .modal-title{
  font-weight: 800;
  font-size: 1.05rem;
  color: #0b0146;
  letter-spacing: .2px;
  margin: 0;
}
.social-modal .modal-header .close{
  outline: none;
  text-shadow: none;
  opacity: .6;
  transition: opacity .15s ease, transform .15s ease;
}
.social-modal .modal-header .close:hover{
  opacity: .9; transform: scale(1.06);
}

/* Cuerpo del modal: más aire y consistencia */
.social-modal .modal-body{
  padding: 6px 18px 18px;
}

/* Pie del modal: limpio y centrado */
.social-modal .modal-footer{
  border: 0;
  padding: 10px 18px 18px;
  justify-content: center;
}

/* ===== GRID de botones ===== */
.social-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: start;
}
@media (min-width: 576px){
  .social-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .social-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ===== Botón-tarjeta de red ===== */
.social-btn{
  display: flex; align-items: center; gap: 12px;
  padding: .85rem 1rem;
  border: 1px solid #eef0f7;
  border-radius: 14px;
  background: #fff;
  color: #1b1b21 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}
.social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(78,0,185,.24);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  background: #ffffff;
}
.social-btn:active{
  transform: translateY(0);
}
.social-btn:focus-visible{
  outline: 2px solid #F3D0FF;
  outline-offset: 3px;
  border-radius: 14px;
}

/* Cápsula del icono */
.social-btn .icon{
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  color: #fff;
  box-shadow: 0 10px 26px rgba(78,0,185,.28);
  flex: 0 0 auto;
}
.social-btn .icon .fa{
  font-size: 20px; line-height: 1;
}

/* SVG de TikTok integrado al mismo sistema */
.social-btn .tiktok-icon{
  width: 22px; height: 22px; display: block; fill: currentColor;
}

/* ===== Botón que abre el modal (consistencia visual) ===== */
.btn-brand{
  background-image: linear-gradient(135deg, #4E00B9, #7a2bf3);
  color:#fff !important;
  border:0;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(78,0,185,.28);
  transition: filter .15s ease, transform .15s ease;
}
.btn-brand:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn-brand:focus-visible{ outline: 2px solid #F3D0FF; outline-offset: 2px; }

/* ===== Mantener oculto el <ul> de la barra (solo modal muestra redes) ===== */
.header-social__list{ display: none; }

/* ===== Ajustes menores ya existentes, respetados ===== */
.navbar-teech{
  background: #4E00B9 !important;
  font-size: 16px !important;
}
.navbar-teech .navbar-collapse{ flex-grow: 0; }
.nav-aside img{
  display:block; height:60px; width:160px; object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}
@media (min-width: 992px){
  .sticky-desktop{ position: sticky; top: 0; z-index: 1030; box-shadow: none; }
}
 
.header-social .fa-brands,
.header-social .fab {
  display: inline-block;
  line-height: 1;
}