body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#020b18;
color:white;
}


/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 40px;
background:rgba(5,10,20,0.8);
backdrop-filter: blur(12px);
border-bottom:1px solid rgba(0,229,255,0.3);
position:sticky;
top:0;
z-index:100;
}

.logo img{
height:70px;
}

.menu{
display:flex;
gap:30px;
list-style:none;
}

.menu a{
text-decoration:none;
color:white;
font-weight:500;
}


/* HERO */

.tramites-hero{
    height: 100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background: 
        linear-gradient(rgba(2,11,24,0.7), rgba(2,11,24,0.9)),
        url('guia.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tramites-hero h1{
font-size:40px;
margin-bottom:10px;
}

.tramites-hero p{
color:#9fb3c8;
}



/* GRID TRAMITES */
/* CAJÓN PRINCIPAL (opcional: si quieres un fondo/borde alrededor de todo) */
.tramites-grid {
  max-width: 1200px;         /* ancho máximo del cajón */
  margin: 28px auto;         /* centrado horizontal y separación */
  padding: 22px;             /* espacio interior del cajón */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  display: flex;             /* <-- hace que las tarjetas queden en fila */
  gap: 18px;                 /* espacio entre tarjetas */
  align-items: stretch;      /* mismas alturas */
  justify-content: space-between;
  flex-wrap: wrap;           /* permite bajar a la siguiente fila si no caben */
  box-sizing: border-box;
}

/* TARJETA: ocupa espacio proporcional (3 por fila en escritorio) */
.tramite-card {
  flex: 0 0 calc(33.333% - 12px);  /* 3 tarjetas por fila (ajusta si quieres 2 o 4) */
  min-width: 240px;                /* evita que se encojan demasiado */
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 12px;
  text-align: left;
  transition: transform 0.25s, background 0.25s;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Ajustes internos */
.tramite-card h3 { margin: 0 0 10px 0; font-size:18px; }
.tramite-card p { color:#9fb3c8; margin:0 0 16px 0; flex-grow:1; }
.tramite-card button {
  background: linear-gradient(90deg,#00e0c6,#00bfa5);
  color:#02131f;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  align-self:flex-start;
}

/* Hover */
.tramite-card:hover {
  transform: translateY(-6px);
  background: rgba(17,37,60,0.9);
  border-color: rgba(0,224,198,0.12);
}

/* RESPONSIVE: 2 por fila en tablets, 1 por fila en móvil */
@media (max-width:1000px) {
  .tramite-card { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width:640px) {
  .tramite-card { flex: 0 0 100%; max-width: 100%; }
  .tramites-grid { padding: 14px; margin: 16px; }
}