:root{ /* Variables CSS globales (tema + tamaños) */
  --bg:#0b0c10; /* Color de fondo base */
  --panel:rgba(255,255,255,.06); /* Fondo de panel suave */
  --panel2:rgba(255,255,255,.10); /* Fondo de panel en hover/realce */
  --text:rgba(255,255,255,.92); /* Color de texto principal */
  --muted:rgba(255,255,255,.70); /* Color de texto secundario */
  --border:rgba(255,255,255,.12); /* Color de bordes sutiles */
  --shadow:0 20px 50px rgba(0,0,0,.45); /* Sombra estándar para tarjetas/botones */
  --header-h:100px; /* Altura del header en desktop (clave para sticky + anchors) */
}

*{ box-sizing:border-box; } /* Incluye padding/border dentro del ancho/alto de todos los elementos */
html,body{ height:100%; } /* Permite layouts que dependan del alto total */

html{ /* Ajustes globales del documento */
  scroll-padding-top:var(--header-h); /* Evita que anchors (#id) queden tapados por el header sticky */
  scroll-behavior:smooth; /* Scroll suave al navegar a anchors */
}

body{ /* Estilos base de la página */
  margin:0; /* Elimina margen por defecto */
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* Tipografías con fallback */
  color:var(--text); /* Color de texto principal */
  background: /* Fondo con gradientes + color base */
    radial-gradient(1200px 600px at 50% -10%, rgba(255,0,0,.20), transparent 60%), /* Halo rojo superior */
    radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,.10), transparent 55%), /* Halo blanco lateral */
    var(--bg); /* Color base detrás */
}

a{ color:inherit; text-decoration:none; } /* Los links heredan color y sin subrayado */
.wrap{ width:min(1100px,92vw); margin:0 auto; } /* Contenedor centrado con ancho máximo y margen lateral */

/* =========================
   HEADER
   ========================= */
.site-header{ /* Header pegajoso */
  position:sticky; /* Se pega al hacer scroll */
  top:0; /* Pegado arriba */
  z-index:50; /* Por encima del contenido */
  height:var(--header-h); /* Altura fija (importante para offsets) */
  backdrop-filter:blur(12px); /* Efecto cristal */
  background:rgba(11,12,16,.62); /* Fondo semi-transparente */
  border-bottom:1px solid var(--border); /* Línea inferior */
}

.header-inner{ /* Contenedor interior del header */
  height:var(--header-h); /* Igual que el header */
  display:flex; /* Layout flexible */
  align-items:center; /* Centrado vertical */
  justify-content:space-between; /* Logo izquierda, nav/botón derecha */
  gap:16px; /* Separación entre bloques */
  padding:0; /* Sin padding para no sumar altura */
}

/* Marca (logos) en línea y sin saltos */
.brand{ /* Contenedor de logos */
  display:flex; /* Logos en fila */
  align-items:center; /* Alineación vertical */
  gap:16px; /* Espacio entre logos */
  flex-wrap:nowrap; /* Evita que el 2º logo baje de línea */
}

.brand a{ /* Cada link de logo */
  display:inline-flex; /* Mantiene el tamaño justo y alinea contenido */
  align-items:center; /* Centra la imagen dentro */
}

/* Logo principal: controla el ancho grande y respeta altura del header */
.brand-main img{ /* Imagen del logo principal */
  display:block; /* Evita espacios/descensos raros por inline */
  width:min(350px,70vw); /* Limita ancho para que no invada el nav */
  max-height:calc(var(--header-h) - 18px); /* Nunca supera el alto útil del header */
  height:auto; /* Mantiene proporción */
}

/* Logo partner: se dimensiona por altura, no por ancho (evita que se estire) */
.brand-partner img{ /* Imagen del logo secundario */
  display:block; /* Evita espacios por inline */
  height:calc(var(--header-h) - 0px); /* Grande pero siempre cabe en header */
  width:auto; /* Mantiene proporción */
  object-fit:contain; /* Por si el recurso trae medidas raras */
}

/* Navegación superior (desktop) */
.top-nav{ /* Contenedor de enlaces del menú */
  display:flex; /* Links en fila */
  gap:10px; /* Separación */
  align-items:center; /* Centrado vertical */
}

.nav-link{ /* Estilo de cada link */
  padding:10px 12px; /* Área clicable */
  border:1px solid transparent; /* Borde “invisible” para no saltar al hover */
  border-radius:999px; /* Forma píldora */
  color:var(--muted); /* Texto secundario */
  font-weight:600; /* Negrita media */
  letter-spacing:.2px; /* Ligero espaciado */
  transition:transform .15s ease, background .15s ease, border-color .15s ease; /* Animaciones suaves */
}

.nav-link:hover{ /* Hover del link */
  background:var(--panel); /* Fondo suave */
  border-color:var(--border); /* Borde visible */
  transform:translateY(-1px); /* Pequeño “lift” */
  color:var(--text); /* Texto principal */
}

/* Botón hamburguesa (móvil) */
.menu-btn{ /* Botón del menú */
  display:none; /* Oculto en desktop */
  width:44px; /* Ancho */
  height:40px; /* Alto */
  border-radius:12px; /* Bordes redondeados */
  border:1px solid var(--border); /* Borde */
  background:var(--panel); /* Fondo */
  box-shadow:var(--shadow); /* Sombra */
  cursor:pointer; /* Cursor de click */
}

.menu-btn span{ /* Líneas de la hamburguesa */
  display:block; /* Cada línea ocupa su bloque */
  height:2px; /* Grosor */
  margin:6px 10px; /* Separación y margen lateral */
  background:rgba(255,255,255,.85); /* Color */
  border-radius:999px; /* Puntas redondeadas */
}

/* =========================
   HERO
   ========================= */
.hero{ padding:26px 0 10px; } /* Espacio vertical del bloque hero */

.hero h1{ /* Título principal */
  margin:0 0 8px; /* Espacios */
  font-size:clamp(22px,3.2vw,36px); /* Responsivo entre 22 y 36 */
  font-weight:800; /* Muy bold */
}

.hero p{ /* Texto del hero */
  margin:0; /* Sin margen superior */
  color:var(--muted); /* Texto secundario */
  line-height:1.55; /* Interlineado cómodo */
  max-width:70ch; /* Ancho máximo legible */
}

/* =========================
   GRID / PORTALES
   ========================= */
.grid-section{ padding:18px 0 44px; } /* Espacio del bloque */

.grid-head{ /* Cabecera de la sección */
  display:flex; /* Layout en línea */
  align-items:baseline; /* Alinea por línea base (título + meta) */
  justify-content:space-between; /* Izq título, der meta */
  gap:16px; /* Separación */
  margin:18px 0 14px; /* Márgenes */
}

.grid-head h2{ /* Título de sección */
  margin:0; /* Sin margen */
  font-size:18px; /* Tamaño */
  letter-spacing:.2px; /* Espaciado */
}

.page-meta{ /* Texto “Página X de Y” */
  color:var(--muted); /* Secundario */
  font-size:13px; /* Tamaño pequeño */
}

.covers-grid{ /* Grid de tarjetas */
  display:grid; /* CSS Grid */
  grid-template-columns:repeat(4,minmax(0,1fr)); /* 4 columnas */
  gap:14px; /* Separación */
}

.cover-card{ /* Tarjeta de cada portal */
  background:var(--panel); /* Fondo */
  border:1px solid var(--border); /* Borde */
  border-radius:18px; /* Redondeo */
  overflow:hidden; /* Recorta imagen dentro */
  box-shadow:0 10px 26px rgba(0,0,0,.35); /* Sombra */
  transition:transform .15s ease, background .15s ease; /* Hover suave */
}

.cover-card:hover{ /* Hover de tarjeta */
  transform:translateY(-2px); /* Elevación */
  background:var(--panel2); /* Fondo más intenso */
}

.cover-img{ /* Contenedor de imagen cuadrada */
  width:100%; /* Ocupa ancho */
  aspect-ratio:1/1; /* Mantiene cuadrado */
  overflow:hidden; /* Recorta excedente */
  background:rgba(255,255,255,.06); /* Fondo por si tarda en cargar */
}

.cover-img img{ /* Imagen de portada */
  width:100%; /* Ajusta al contenedor */
  height:100%; /* Ajusta al contenedor */
  object-fit:cover; /* Recorta para llenar sin deformar */
  display:block; /* Evita espacios por inline */
}

.cover-title{ /* Texto del título */
  padding:6px 10px 8px; /* Espacios */
  font-weight:500; /* Peso medio */
  font-size:11px; /* Tamaño pequeño */
  line-height:1.3; /* Interlineado */
  color:rgba(255,255,255,.75); /* Color tenue */
  white-space:nowrap; /* Una sola línea */
  overflow:hidden; /* Oculta overflow */
  text-overflow:ellipsis; /* … si se corta */
}

/* =========================
   PAGER
   ========================= */
.pager{ /* Contenedor del paginador */
  margin-top:18px; /* Separación superior */
  display:flex; /* Layout flexible */
  align-items:center; /* Centrado vertical */
  justify-content:space-between; /* Botón izq, números, botón der */
  gap:12px; /* Separación */
  flex-wrap:wrap; /* Permite salto si no cabe */
}

.pager-btn{ /* Botones Anterior/Siguiente */
  padding:10px 14px; /* Área clicable */
  border-radius:999px; /* Píldora */
  border:1px solid var(--border); /* Borde */
  background:var(--panel); /* Fondo */
  font-weight:700; /* Negrita */
}

.pager-btn.disabled{ /* Estado desactivado */
  opacity:.45; /* Más tenue */
  pointer-events:none; /* No clicable */
}

.pager-numbers{ /* Contenedor de números */
  display:flex; /* En fila */
  gap:8px; /* Separación */
  align-items:center; /* Centrado */
  flex-wrap:wrap; /* Salta si no cabe */
}

.pager-num{ /* Cada número */
  min-width:38px; /* Ancho mínimo consistente */
  text-align:center; /* Centra el número */
  padding:9px 10px; /* Área clicable */
  border-radius:12px; /* Redondeo */
  border:1px solid var(--border); /* Borde */
  background:rgba(255,255,255,.04); /* Fondo leve */
  font-weight:700; /* Negrita */
}

.pager-num.active{ background:rgba(255,255,255,.12); } /* Número activo más visible */

.dots{ color:var(--muted); padding:0 2px; } /* Estilo de “…” */

/* =========================
   FOOTER
   ========================= */
.site-footer{ /* Pie de página */
  border-top:1px solid var(--border); /* Línea superior */
  background:rgba(11,12,16,.75); /* Fondo */
  backdrop-filter:blur(12px); /* Cristal */
  padding:26px 0; /* Espaciado */
}

.footer-inner{ /* Layout del footer */
  display:grid; /* Grid */
  grid-template-columns:1.2fr 1fr; /* Dos columnas: izq más ancha */
  gap:18px; /* Separación */
  align-items:start; /* Alineación arriba */
}

.footer-left h3{ margin:0 0 10px; font-size:18px; } /* Título de footer */
.muted{ color:var(--muted); } /* Clase utilitaria de texto tenue */
.mini{ font-size:12px; margin-top:14px; } /* Texto pequeño */

/* Formulario */
.contact-form{ /* Caja del formulario */
  background:var(--panel); /* Fondo */
  border:1px solid var(--border); /* Borde */
  border-radius:18px; /* Redondeo */
  padding:14px; /* Padding interno */
  box-shadow:var(--shadow); /* Sombra */
}

/* Mensajes de estado del formulario */
.form-alert{ /* Caja de alerta */
  margin-bottom:12px; /* Separación */
  padding:12px 14px; /* Padding */
  border-radius:16px; /* Redondeo */
  border:1px solid var(--border); /* Borde */
  background:rgba(255,255,255,.06); /* Fondo */
  font-weight:800; /* Bold */
  box-shadow:var(--shadow); /* Sombra */
}

.form-alert.ok{ background:rgba(0,255,150,.14); } /* Éxito */
.form-alert.bad{ background:rgba(255,60,60,.16); } /* Error */

.row{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; } /* Bloque label+campo */
label{ font-size:13px; color:rgba(255,255,255,.84); font-weight:700; } /* Labels del form */

input,textarea{ /* Campos del formulario */
  border-radius:14px; /* Redondeo */
  border:1px solid rgba(255,255,255,.12); /* Borde suave */
  background:rgba(0,0,0,.25); /* Fondo oscuro */
  color:var(--text); /* Texto */
  padding:11px 12px; /* Padding */
  outline:none; /* Quita outline por defecto */
}

textarea{ min-height:110px; resize:vertical; } /* Alto mínimo y redimensionado vertical */

/* Botón genérico */
.btn{ /* Botón principal */
  width:100%; /* Ocupa ancho del contenedor */
  border-radius:14px; /* Redondeo */
  border:1px solid rgba(255,255,255,.14); /* Borde */
  background:rgba(255,0,0,.20); /* Fondo rojo suave */
  color:rgba(255,255,255,.92); /* Texto */
  font-weight:800; /* Bold */
  padding:12px 14px; /* Padding */
  cursor:pointer; /* Cursor */
  transition:transform .15s ease, background .15s ease; /* Hover suave */
}

.btn:hover{ /* Hover del botón */
  transform:translateY(-1px); /* Lift */
  background:rgba(255,0,0,.28); /* Más intenso */
}

/* Notices (si los usas) */
.notice{ /* Caja de aviso */
  margin-top:12px; /* Separación */
  padding:10px 12px; /* Padding */
  border-radius:14px; /* Redondeo */
  border:1px solid var(--border); /* Borde */
  font-weight:700; /* Negrita */
  font-size:13px; /* Tamaño */
}

.notice.ok{ background:rgba(0,255,150,.12); } /* Aviso OK */
.notice.bad{ background:rgba(255,60,60,.14); } /* Aviso error */

/* Honeypot anti-spam */
.hp{ position:absolute; left:-9999px; opacity:0; } /* Oculta el campo trampa */

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:980px){ /* Tablet / pantallas medianas */
  .covers-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* 3 columnas */
}

@media (max-width:720px){ /* Móvil */
  :root{ --header-h:88px; } /* Header más bajo en móvil */

  .covers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* 2 columnas */
  .footer-inner{ grid-template-columns:1fr; } /* Footer en una columna */
  .menu-btn{ display:block; } /* Muestra botón hamburguesa */

  .top-nav{ /* Menú desplegable */
    position:absolute; /* Flotante */
    right:4vw; /* Separación derecha */
    top:var(--header-h); /* Justo debajo del header */
    flex-direction:column; /* Links en columna */
    align-items:stretch; /* Links a ancho completo */
    gap:6px; /* Separación */
    padding:10px; /* Padding */
    border-radius:16px; /* Redondeo */
    border:1px solid var(--border); /* Borde */
    background:rgba(11,12,16,.90); /* Fondo */
    box-shadow:var(--shadow); /* Sombra */
    display:none; /* Oculto por defecto */
    min-width:210px; /* Ancho mínimo */
  }

  .top-nav.open{ display:flex; } /* Se abre cuando JS agrega la clase */
}
/* En móvil: ocultar logo YouUseIt */
@media (max-width: 720px){
  .brand-partner{
    display:none !important;
  }
}
/* Card mosaico 2x2 dentro del cuadro 1:1 */
.cover-card--mosaic {
  display: flex;            /* para que el título quede abajo */
  flex-direction: column;
  text-decoration: none;    /* por si tu .cover-card trae estilos */
}

.cover-img--mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;                 /* ajusta a gusto */
  width: 100%;
  aspect-ratio: 1 / 1;      /* mantiene el cuadro 1:1 */
  overflow: hidden;
}

.mosaic-tile {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;      /* opcional */
  overflow: hidden;
}

.mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .15s ease;
}

.mosaic-tile:hover img {
  transform: scale(1.03);
}
.brand .brand-partner img.logo-small{
  height: 32px !important;
  width: auto !important;
  max-height: 32px !important;
  display: block;
}