/* =============================================
   TRAMITES - Villa de Merlo Digital
   Layout: sidebar + topbar + contenido
============================================= */

.footer-copy,
.footer-social {
  display: none;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #f4f6fb;
  color: #1f2937;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; background: none; border: none; font-family: 'Montserrat', sans-serif; }

/* ── Variables ─────────────────────────────── */
:root {
  --blue:        #033e8c;
  --blue-dark:   #022b6b;
  --blue-light:  #0554c2;
  --cyan:        #00b3e6;
  --cyan-dark:   #0096c7;
  --light-blue:  #dbeafe;
  --pink:        #e60061;
  --pink-dark:   #b8004d;
  --white:       #ffffff;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-700:    #374151;
  --sidebar-w:   240px;
  --topbar-h:    68px;
  --header-h:    4.5rem;
  --radius:      0.625rem;
  --radius-lg:   1.125rem;
  --radius-full: 9999px;
  --shadow-sm:   0 1px 4px rgba(15,23,42,.06);
  --shadow:      0 4px 16px rgba(15,23,42,.07);
  --shadow-lg:   0 12px 32px rgba(15,23,42,.10);
  --transition:  all 0.15s ease;
}

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.tramites-app {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
/* Mobile-first: sidebar fuera de pantalla por defecto,
   se muestra con .open (menú hamburguesa); fija y visible desde 1024px */
.t-sidebar {
  position: fixed;
  top: var(--header-h); left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: var(--white);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

.t-sidebar.open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,.14);
}

.t-sidebar-logo {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.t-sidebar-logo img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.t-sidebar-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.t-sidebar-logo-text strong {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: -0.02em;
}

.t-sidebar-logo-text span {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.t-nav-label {
  padding: 1rem 1.5rem 0.25rem;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.t-nav {
  flex: 1;
  padding: 0.5rem 0.75rem 0.75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.t-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--radius);
}

.t-nav-item:hover {
  background: var(--gray-50);
  color: var(--blue);
}

.t-nav-item.active {
  background: var(--gray-50);
  color: var(--blue);
  font-weight: 600;
  box-shadow: none;
}

.t-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}

.t-sidebar-back {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  text-decoration: none;
}

.t-sidebar-back:hover {
  color: var(--blue);
  background: var(--gray-50);
}

.t-sidebar-back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   MAIN
══════════════════════════════════════════ */
/* Mobile-first: ocupa todo el ancho (sidebar oculta),
   deja lugar a la sidebar fija desde 1024px */
.t-main {
  margin-left: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  overflow-x: hidden;
  width: 100%;
}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
/* Mobile-first: padding lateral chico en móvil, completo desde 768px */
.t-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--topbar-h);
  background: transparent;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0 1rem;
  width: 100%;
  min-width: 0;
}

.t-search-title {
  display: block;
  padding: 1.5rem 1.5rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #444;
}

/* Mobile-first: visible en móvil/tablet, oculta desde 1024px (sidebar fija) */
.t-hamburger {
  display: flex;
  padding: 0.4rem;
  color: var(--blue);
  border-radius: var(--radius);
  transition: var(--transition);
  flex-shrink: 0;
}

.t-hamburger:hover { background: var(--gray-100); }
.t-hamburger svg  { width: 22px; height: 22px; stroke: currentColor; }

/* Wrapper relativo para posicionar el dropdown
   Mobile-first: ocupa todo el ancho disponible, máximo 600px desde 768px */
.t-search-wrap {
  flex: 1;
  max-width: none;
  position: relative;
}

.t-search {
  display: flex;
  align-items: center;
  background: var(--gray-50);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  padding: 0 0.875rem 0 1.1rem;
  gap: 0.625rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  width: 100%;
  box-shadow: 0 2px 10px rgba(3,62,140,.08);
}

.t-search:hover {
  background: var(--white);
  box-shadow: 0 4px 14px rgba(3,62,140,.12);
}

.t-search:focus-within {
  background: var(--white);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,179,230,.15), 0 4px 14px rgba(3,62,140,.12);
}

.t-search svg {
  width: 19px;
  height: 19px;
  stroke: var(--gray-400);
  flex-shrink: 0;
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.t-search:focus-within svg { stroke: var(--cyan-dark); transform: scale(1.05); }

.t-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-700);
  padding: 0.75rem 0;
  outline: none;
  min-width: 0;
}

.t-search input::placeholder { color: var(--gray-400); font-weight: 400; }

/* Botón X para limpiar */
.t-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gray-300);
  color: var(--gray-700);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), background 0.2s ease;
  padding: 0;
}

.t-search-clear:hover { background: var(--pink); color: white; transform: scale(1.1) rotate(90deg); }
.t-search-clear svg   { width: 11px; height: 11px; stroke: currentColor; }

/* ── Dropdown de resultados ── */
.t-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px rgba(3,62,140,.16);
  z-index: 200;
  overflow: hidden;
  animation: ddIn 0.2s cubic-bezier(0.22,1,0.36,1);
}

.t-search-dropdown.open { display: block; }

@keyframes ddIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.t-dd-header {
  padding: 0.55rem 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.t-dd-item {
  --accent: var(--blue);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.7rem 1rem;
  margin: 0.25rem;
  border-radius: 0.75rem;
  width: calc(100% - 0.5rem);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  outline: none;
}

.t-dd-item:hover,
.t-dd-item:focus {
  background: var(--gray-50);
  transform: translateX(2px);
}

/* Acento de color por categoría, igual que las tarjetas de trámites */
.t-dd-item--gabinete            { --accent: var(--blue); }
.t-dd-item--ambiente             { --accent: #059669; }
.t-dd-item--comunicacion         { --accent: #db2777; }
.t-dd-item--cultura              { --accent: #7c3aed; }
.t-dd-item--desarrollo-humano    { --accent: #0891b2; }
.t-dd-item--gobierno             { --accent: #d97706; }
.t-dd-item--finanzas             { --accent: #ea580c; }
.t-dd-item--ordenamiento         { --accent: #4338ca; }
.t-dd-item--servicios-publicos   { --accent: #475569; }
.t-dd-item--turismo              { --accent: #e11d48; }

.t-dd-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.t-dd-item:hover .t-dd-icon,
.t-dd-item:focus .t-dd-icon {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #000));
  transform: scale(1.06);
}

.t-dd-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  transition: stroke 0.15s ease;
}

.t-dd-item:hover .t-dd-icon svg,
.t-dd-item:focus .t-dd-icon svg { stroke: white; }

.t-dd-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.t-dd-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-dd-desc {
  font-size: 0.72rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-dd-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 1rem;
  font-size: 0.82rem;
  color: var(--gray-400);
}

.t-dd-empty svg { width: 18px; height: 18px; stroke: var(--gray-300); flex-shrink: 0; }

/* Card seleccionada desde el dropdown */
.t-card-selected {
  animation: cardPulse 1.8s ease forwards;
}

@keyframes cardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,179,230,.5); border-color: var(--cyan); }
  40%  { box-shadow: 0 0 0 8px rgba(0,179,230,.0); border-color: var(--cyan); }
  100% { box-shadow: none; border-color: var(--gray-200); }
}

.t-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile-first: oculto en móvil, visible desde 768px */
.t-lang {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
  transition: var(--transition);
}

.t-lang:hover { border-color: var(--blue); color: var(--blue); }
.t-lang svg   { width: 13px; height: 13px; stroke: currentColor; }

.t-btn-login {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: 0 4px 14px rgba(3,62,140,.22);
  transition: var(--transition);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.t-btn-login:hover { box-shadow: 0 6px 18px rgba(3,62,140,.32); transform: translateY(-1px); }
.t-btn-login svg   { width: 16px; height: 16px; stroke: currentColor; }

/* Mobile-first: oculta el texto del botón de login en móvil pequeño, se muestra desde 480px */
.t-btn-login .t-btn-text { display: none; }

/* ══════════════════════════════════════════
   CONTENT
══════════════════════════════════════════ */
/* Mobile-first: padding/gap reducidos en móvil, completos desde 768px */
.t-content {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════
   CAROUSEL
══════════════════════════════════════════ */
.t-carousel {
  display: none; /* Activar cuando haya banners para comunicar */
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  user-select: none;
}

.t-slides-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Mobile-first: slide en columna y compacto en móvil,
   vuelve a fila desde 768px y recupera tamaño completo desde 1024px */
.t-slide {
  min-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 3rem;
  display: flex;
  gap: 0.75rem;
  min-height: 190px;
  position: relative;
  overflow: hidden;
}

/* Decoraciones de fondo */
.t-slide::before,
.t-slide::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.t-slide::before {
  width: 340px; height: 340px;
  top: -110px; right: -60px;
  background: rgba(255,255,255,0.06);
}

.t-slide::after {
  width: 200px; height: 200px;
  bottom: -60px; left: 32%;
  background: rgba(255,255,255,0.04);
}

.t-slide-1 { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 55%, var(--cyan) 100%); }
.t-slide-2 { background: linear-gradient(135deg, var(--pink) 0%, var(--blue) 55%, var(--blue-dark) 100%); }
.t-slide-3 { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 50%, var(--cyan-dark) 100%); }

.t-slide-logo {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Mobile-first: logo/ícono del slide chicos en móvil,
   crecen en 768px y recuperan tamaño completo desde 1024px */
.t-slide-logo img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 16px rgba(255,255,255,0.25));
}

.t-slide-logo-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Mobile-first: ícono chico en móvil, tamaño completo desde 1024px */
.t-slide-logo-icon svg {
  width: 28px;
  height: 28px;
  stroke: white;
}

.t-slide-brand {
  display: flex;
  flex-direction: column;
  color: white;
}

.t-slide-brand strong {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.t-slide-brand span {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

.t-slide-text {
  position: relative;
  color: white;
}

.t-slide-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

/* Mobile-first: título del slide más chico en móvil,
   crece en 480px/768px y recupera tamaño completo desde 1024px */
.t-slide-text h2 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.t-slide-text p {
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

/* Controles del carrusel
   Mobile-first: ocultos en móvil chico, visibles desde 768px */
.t-carousel-prev,
.t-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}

.t-carousel-prev:hover,
.t-carousel-next:hover { background: rgba(255,255,255,0.28); }

.t-carousel-prev { left: 1rem; }
.t-carousel-next { right: 1rem; }

.t-carousel-prev svg,
.t-carousel-next svg { width: 18px; height: 18px; stroke: white; }

/* Dots */
.t-carousel-dots {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.t-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.t-carousel-dot.active {
  background: white;
  width: 22px;
}

/* ══════════════════════════════════════════
   SECCIONES
══════════════════════════════════════════ */
.t-section { display: flex; flex-direction: column; gap: 1rem; }

.t-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}

/* Mobile-first: título más chico en móvil, completo desde 768px */
.t-section-title {
  position: relative;
  padding-left: 0.9rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--blue);  
}

.t-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}

.t-section-title span { color: var(--gray-700); }

.t-btn-ver-todo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--blue);
  color: var(--white);
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.38rem 1rem;
  border-radius: var(--radius-full);
  transition: var(--transition);
  margin-left: auto;
}

.t-btn-ver-todo:hover { background: var(--blue-light); }
.t-btn-ver-todo svg   { width: 12px; height: 12px; stroke: currentColor; }

/* ══════════════════════════════════════════
   SERVICE CARDS
══════════════════════════════════════════ */
/* Mobile-first: 2 columnas y gap chico en móvil, 4 columnas desde 1024px */
.t-service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
  width: 100%;
  min-width: 0;
}

.t-service-card {
  position: relative;
  background: linear-gradient(150deg, #0554c2 0%, #033e8c 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(3,62,140,.35);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
  overflow: hidden;
}

.t-service-card::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.t-service-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 18px 36px -8px rgba(3,62,140,.4);
}

.t-service-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.t-service-card:hover .t-service-card-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* Variantes de color */
.t-service-card--blue { background: linear-gradient(150deg, #7c3aed 0%, #5b21b6 100%); box-shadow: 0 8px 20px -8px rgba(91,33,182,.4); }
.t-service-card--blue:hover { box-shadow: 0 18px 36px -8px rgba(91,33,182,.45); }
.t-service-card--alt  { background: linear-gradient(150deg, #ee7b00 0%, #c25f00 100%); box-shadow: 0 8px 20px -8px rgba(194,95,0,.4); }
.t-service-card--alt:hover  { box-shadow: 0 18px 36px -8px rgba(194,95,0,.45); }
.t-service-card--cyan { background: linear-gradient(150deg, var(--pink) 0%, var(--pink-dark) 100%); box-shadow: 0 8px 20px -8px rgba(184,0,77,.4); }
.t-service-card--cyan:hover { box-shadow: 0 18px 36px -8px rgba(184,0,77,.45); }

.t-service-card-icon svg { width: 24px; height: 24px; stroke: white; }

.t-service-card-label {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.t-service-card-sub {
  font-size: 0.7rem;
  opacity: 0.78;
  font-weight: 500;
}

.t-badge-nuevo {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  background: var(--cyan);
  color: white;
  font-size: 0.57rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════
   FILTRO (desplegable)
══════════════════════════════════════════ */
.t-filters {
  display: flex;
}

.t-filter-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
}

.t-filter-select-icon {
  position: absolute;
  left: 1rem;
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  pointer-events: none;
  z-index: 1;
}

.t-filter-select-chevron {
  position: absolute;
  right: 0.9rem;
  width: 14px;
  height: 14px;
  stroke: var(--gray-400);
  pointer-events: none;
  transition: transform 0.25s ease, stroke 0.25s ease;
}

.t-filter-select-wrap:hover .t-filter-select-chevron,
.t-filter-select:focus + .t-filter-select-chevron {
  stroke: var(--cyan-dark);
}

.t-filter-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.7rem 2.5rem 0.7rem 2.7rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: 0 2px 8px rgba(3,62,140,.06);
}

.t-filter-select:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.t-filter-select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,179,230,.15);
}

/* ══════════════════════════════════════════
   TRAMITE CARDS
══════════════════════════════════════════ */
/* Mobile-first: 1 columna en móvil, 2 desde 768px y 4 desde 1024px */
.t-tramite-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  width: 100%;
  min-width: 0;
}

.t-tramite-card {
  --accent: var(--blue);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  color: inherit;
}

/* Acento de color por categoría */
.t-tramite-card[data-category="gabinete"]            { --accent: var(--blue); }
.t-tramite-card[data-category="ambiente"]             { --accent: #059669; }
.t-tramite-card[data-category="comunicacion"]         { --accent: #db2777; }
.t-tramite-card[data-category="cultura"]              { --accent: #7c3aed; }
.t-tramite-card[data-category="desarrollo-humano"]    { --accent: #0891b2; }
.t-tramite-card[data-category="gobierno"]             { --accent: #d97706; }
.t-tramite-card[data-category="finanzas"]             { --accent: #ea580c; }
.t-tramite-card[data-category="ordenamiento"]         { --accent: #4338ca; }
.t-tramite-card[data-category="servicios-publicos"]   { --accent: #475569; }
.t-tramite-card[data-category="turismo"]              { --accent: #e11d48; }

.t-tramite-card:hover {
  box-shadow: 0 16px 32px -8px rgba(15,23,42,.14);
  transform: translateY(-4px) scale(1.01);
}

/* Icono */
.t-tramite-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}

.t-tramite-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--white);
  transition: var(--transition);
}

/* Texto */
.t-tramite-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.t-tramite-desc {
  font-size: 11px;
  color: var(--gray-500);
  line-height: 1.5;
  margin-top: 0.2rem;
}

/* Footer de la card */
.t-tramite-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
}

.t-tramite-cat {
  display: none;
  font-size: 0.58rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--light-blue);
  color: var(--blue);
}

.t-tramite-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.t-tramite-card:hover .t-tramite-arrow {
  transform: translateX(3px);
}

.t-tramite-arrow svg {
  width: 12px;
  height: 12px;
  stroke: var(--blue);
  transition: var(--transition);
}

/* Contador de resultados */
.t-results-count {
  display: inline-flex;
  align-items: center;
  background: var(--light-blue);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

/* Highlight de búsqueda */
.t-highlight {
  background: #fef08a;
  color: #713f12;
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

/* Sin resultados */
.t-no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem;
  color: var(--gray-400);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  gap: 0.75rem;
}

.t-no-results svg {
  width: 42px;
  height: 42px;
  stroke: var(--gray-300);
}

/* ══════════════════════════════════════════
   MODAL LOGIN / REGISTRO
══════════════════════════════════════════ */
.t-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,43,107,0.5);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.t-modal-overlay.show { display: flex; }

/* Mobile-first: padding chico en móvil, completo desde 480px */
.t-modal {
  background: var(--white);
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 60px rgba(2,43,107,.22);
  position: relative;
  animation: modalIn 0.25s cubic-bezier(.4,0,.2,1);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.t-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gray-100);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray-500);
  transition: var(--transition);
}

.t-modal-close:hover { background: var(--gray-200); }
.t-modal-close svg   { width: 15px; height: 15px; stroke: currentColor; }

.t-modal-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.t-modal-header img {
  width: 50px;
  margin: 0 auto 0.75rem;
}

.t-modal-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: -0.02em;
}

.t-modal-header p {
  font-size: 0.76rem;
  color: var(--gray-500);
  margin-top: 0.2rem;
}

/* Tabs */
.t-modal-tabs {
  display: flex;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 1.5rem;
}

.t-modal-tab {
  flex: 1;
  padding: 0.6rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  background: none;
  font-family: inherit;
  transition: var(--transition);
}

.t-modal-tab:hover { color: var(--blue); }

.t-modal-tab.active {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

.t-modal-panel { display: none; flex-direction: column; gap: 0.875rem; }
.t-modal-panel.active { display: flex; }

/* Formulario */
.t-form-group { display: flex; flex-direction: column; gap: 0.35rem; }

.t-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-700);
}

.t-form-input {
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--gray-700);
  outline: none;
  transition: var(--transition);
}

.t-form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(3,62,140,.1);
}

.t-form-input::placeholder { color: var(--gray-400); }

.t-form-submit {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(184,0,77,.25);
  transition: var(--transition);
  margin-top: 0.25rem;
}

.t-form-submit:hover { box-shadow: 0 6px 18px rgba(184,0,77,.35); transform: translateY(-1px); }

.t-form-hint {
  text-align: center;
  font-size: 0.74rem;
  color: var(--gray-500);
}

.t-form-hint button {
  color: var(--blue);
  font-weight: 600;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════
   OVERLAY MÓVIL
══════════════════════════════════════════ */
.t-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 99;
  backdrop-filter: blur(2px);
}

.t-overlay.show { display: block; }

/* ══════════════════════════════════════════
   RESPONSIVE (MOBILE FIRST)
   Los estilos base (fuera de cualquier @media) están
   pensados para el móvil más chico (< 480px): sidebar
   oculta, grillas en 1-2 columnas, textos y paddings
   reducidos. A partir de acá se agregan mejoras
   progresivas para pantallas más grandes, manteniendo
   el diseño de escritorio original desde 1024px.
══════════════════════════════════════════ */

/* =============================================
   480px — Móvil grande
   Recupera el texto del botón de login, el padding
   completo del modal y agranda levemente títulos.
============================================= */
@media (min-width: 480px) {
  .t-btn-login .t-btn-text { display: inline; }
  .t-modal { padding: 2rem; }
  .t-slide-text h2 { font-size: 1.4rem; }
  .t-section-title { font-size: 1.1rem; }
}

/* =============================================
   768px — Tablet
   El slide del carrusel vuelve a layout horizontal,
   se muestran selector de idioma y controles del
   carrusel, y las grillas de trámites/servicios pasan
   a 2 columnas. Topbar y contenido recuperan paddings.
============================================= */
@media (min-width: 768px) {
  .t-topbar { padding: 0 1.5rem; }

  .t-content { padding: 1.75rem; gap: 2rem; }

  .t-section-title { font-size: 15px; }

  .t-lang { display: flex; }

  .t-search-wrap { max-width: 600px; }

  .t-slide {
    flex-direction: row;
    align-items: center;
    padding: 1.75rem 2rem 3rem;
    gap: 1.25rem;
    min-height: 200px;
  }

  .t-slide-text h2 { font-size: 1.5rem; }

  .t-slide-logo img,
  .t-slide-logo-icon { width: 58px; height: 58px; }

  .t-carousel-prev,
  .t-carousel-next { display: flex; }

  .t-tramite-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   1024px — Escritorio
   Sidebar fija y visible, oculta la hamburguesa,
   y las grillas de servicios/trámites y el carrusel
   recuperan su tamaño completo de escritorio.
============================================= */
@media (min-width: 768px) {
  :root { --header-h: 5rem; }
}

@media (min-width: 1024px) {
  .t-sidebar {
    position: static;
    top: auto;
    height: auto;
    min-height: calc(100vh - var(--header-h));
    transform: none;
    box-shadow: 2px 0 12px rgba(0,0,0,.06);
  }
  .t-main {
    width: calc(100% - var(--sidebar-w));
  }
  .t-hamburger { display: none; }

  .t-service-cards { grid-template-columns: repeat(4, 1fr); }
  .t-tramite-grid  { grid-template-columns: repeat(4, 1fr); }

  .t-slide {
    padding: 2.75rem 4rem 4rem;
    gap: 2.5rem;
  }

  .t-slide-text h2 { font-size: 26px; }

  .t-slide-logo img { width: 100px; height: 100px; }
  .t-slide-logo-icon { width: 76px; height: 76px; }
  .t-slide-logo-icon svg { width: 38px; height: 38px; }

  .site-footer {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
  }
}

/* ══════════════════════════════════════════
   FOOTER (ajuste para layout con sidebar fija)
══════════════════════════════════════════ */
/* Mobile-first: footer ocupa todo el ancho en móvil/tablet,
   deja lugar a la sidebar fija desde 1024px */
.site-footer {
  margin-left: 0;
  width: 100%;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}

.site-footer .footer-bottom-inner {
  padding: 0 1.75rem;
}