/* ===========================================
   GRADIENTE UTN — Estilos base v2
   Identidad real: fondo oscuro + celeste/rosa
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap');

:root {
  --celeste: #18BFE3;
  --celeste-claro: #6BE0F5;
  --rosa: #FF009E;
  --azul-oscuro: #0a0a0a;
  --azul-medio: #161616;
  --fondo: #000000;
  --fondo-card: #121212;
  --texto-claro: #f5f7fa;
  --texto-mutado: #9aa3ad;
  --borde: #2a2a2a;
  --radio: 10px;
  --sombra: 0 6px 18px rgba(0, 0, 0, 0.5);

  --gradiente-fondo: linear-gradient(135deg, var(--azul-oscuro), var(--celeste) 140%);
  --gradiente-texto: linear-gradient(90deg, var(--celeste), #6be8ff);
}

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

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto-claro);
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- HEADER / NAV ---------- */
header {
  background: var(--azul-oscuro);
  border-bottom: 1px solid var(--borde);
  position: relative;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  font-weight: 900;
  text-decoration: none;
  color: var(--texto-claro);
  text-transform: lowercase;
}

.logo img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.logo .triangulo {
  color: var(--celeste);
  font-size: 1.5rem;
  line-height: 1;
  transform: scaleX(1.1);
}

nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

nav a {
  color: var(--texto-mutado);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}

nav a:hover {
  color: var(--celeste);
  border-bottom: 2px solid var(--celeste);
}

nav a.activo {
  color: var(--rosa);
  border-bottom: 2px solid var(--rosa);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--texto-claro);
  font-size: 1.6rem;
  cursor: pointer;
}

/* ---------- CONTENIDO ---------- */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

main > h1 {
  font-size: 2rem;
  margin-bottom: 0.6rem;
  position: relative;
  padding-left: 0.9rem;
  border-left: 4px solid var(--celeste);
}

main > h1::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rosa);
  margin-left: 0.5rem;
  vertical-align: middle;
}

main > p {
  color: var(--texto-mutado);
  max-width: 640px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  text-align: center;
  padding: 4.5rem 2.5rem;
  border-radius: calc(var(--radio) + 6px);
  background:
    radial-gradient(circle at 18% 20%, rgba(24, 191, 227, 0.14), transparent 55%),
    radial-gradient(circle at 84% 78%, rgba(255, 0, 158, 0.10), transparent 50%),
    var(--fondo-card);
  border: 1px solid var(--borde);
  color: var(--texto-claro);
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

/* Marco superior en degradé celeste → rosa: firma de marca, discreta y formal */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--celeste) 0%, var(--celeste-claro) 45%, var(--rosa) 100%);
}

/* Punto rosa decorativo, eco del isotipo */
.hero::after {
  content: "";
  position: absolute;
  bottom: 2.2rem;
  right: 3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rosa);
  opacity: 0.65;
}

.hero img.hero-logo {
  height: 92px;
  width: auto;
  max-width: 90%;
  flex-shrink: 0;
}

.hero-texto p.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--celeste);
  margin-bottom: 0.35rem;
}

.hero-texto p.hero-subtitulo {
  font-size: 1.05rem;
  color: var(--texto-mutado);
  max-width: 460px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .hero {
    padding: 3rem 1.5rem;
  }
  .hero img.hero-logo {
    height: 68px;
  }
  .hero::after {
    display: none;
  }
}

/* ---------- TARJETAS (cards) ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

/* Variante centrada: para grids con cantidad fija de tarjetas (como la home),
   donde no queremos que la última fila quede pegada a la izquierda si sobra espacio */
.grid-cards-centrado {
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  justify-content: center;
}

/* ---------- SECCIÓN "ÚLTIMAS NOVEDADES" EN LA HOME ---------- */
.seccion-inicio {
  margin-bottom: 3rem;
}

.seccion-inicio-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.seccion-inicio-encabezado h2 {
  font-size: 1.5rem;
  color: var(--texto-claro);
}

.ver-todas {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--celeste);
  text-decoration: none;
  white-space: nowrap;
}

.ver-todas:hover {
  color: var(--rosa);
}

/* Vista previa compacta: en la home mostramos las novedades más chicas que en
   el archivo completo, para que no le ganen en peso visual al resto de las
   tarjetas de la grilla de abajo */
/* Reutiliza el mismo ancho de columna que la grilla de tarjetas de abajo,
   para que ambas filas queden alineadas en el mismo eje vertical */
#inicio-novedades.grid-cards-centrado {
  margin-top: 1.5rem;
}

#inicio-novedades .card {
  padding: 1.1rem 1.1rem 1rem;
}

#inicio-novedades .media-estandar {
  max-height: 170px;
  margin-bottom: 0.7rem;
}

#inicio-novedades .card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.3rem;
}

#inicio-novedades .card p {
  font-size: 0.85rem;
}

.card {
  background: var(--fondo-card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: var(--sombra);
  text-decoration: none;
  color: var(--texto-claro);
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  background: var(--azul-medio);
  border-color: var(--celeste);
}

/* Insignia celeste permanente en las tarjetas principales de la home:
   un círculo con flecha, en la línea de las flechitas ya usadas en el sitio
   ("Ver todas →"), en vez del marcador anterior */
.card-inicio {
  padding-right: 3.2rem;
}

.card-inicio::after {
  content: "→";
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--celeste);
  border: 1.5px solid var(--celeste);
  background: rgba(24, 191, 227, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.card-inicio:hover::after {
  background: var(--celeste);
  color: var(--azul-oscuro);
  transform: translateX(2px);
}

/* Excepción: en Espacios CEUTN las tarjetas no son "carpetas" navegables,
   son directamente la info de cada lugar */
#lista-espacios .card {
  border-top: 3px solid var(--celeste);
}

.card h3 {
  margin-bottom: 0.5rem;
  color: var(--texto-claro);
  font-size: 1.1rem;
}

.card p {
  color: var(--texto-mutado);
  font-size: 0.92rem;
  white-space: pre-line;
}

/* ---------- CARPETAS (navegables: subcarpetas de APUNTEC / Info importante) ---------- */
/* Diseño tipo carpeta real, pero prolijo: cuerpo + solapa integrada, sin emojis */
.card-folder {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(160deg, var(--fondo-card) 60%, rgba(24, 191, 227, 0.06));
  border: 1px solid var(--borde);
  border-radius: 4px 12px 12px 12px;
  box-shadow: var(--sombra);
  text-decoration: none;
  color: var(--texto-claro);
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.2s ease;
}

/* Solapa de la carpeta, integrada arriba a la izquierda en vez de flotando */
.card-folder::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 1.1rem;
  width: 34%;
  height: 7px;
  background: var(--celeste);
  border-radius: 5px 5px 0 0;
  opacity: 0.85;
  transition: background 0.2s ease;
}

.card-folder:hover {
  transform: translateY(-3px);
  background: linear-gradient(160deg, var(--azul-medio) 60%, rgba(24, 191, 227, 0.1));
  border-color: var(--celeste);
}

.card-folder:hover::before {
  background: var(--rosa);
}

.icono-carpeta {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--celeste);
  transition: color 0.2s ease;
}

.card-folder:hover .icono-carpeta {
  color: var(--celeste-claro);
}

.card-folder h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

/* Acento rosa para destacar elementos puntuales (ej: título de sección) */
.destacado {
  color: var(--rosa);
}

/* Etiqueta tipo "pill" en rosa, para categorías (APUNTEC, Info importante) */
.tag {
  display: inline-block;
  background: rgba(255, 0, 158, 0.15);
  color: var(--rosa);
  border: 1px solid rgba(255, 0, 158, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

/* ---------- FORMULARIOS ---------- */
label {
  color: var(--texto-mutado);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

input, textarea {
  background: var(--fondo-card) !important;
  border: 1px solid var(--borde) !important;
  color: var(--texto-claro) !important;
  font-family: 'Poppins', sans-serif;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--celeste) !important;
}

button[type="submit"] {
  background: var(--celeste) !important;
  border-bottom: 3px solid var(--rosa) !important;
  font-family: 'Poppins', sans-serif;
}

button[type="submit"]:hover {
  filter: brightness(1.1);
}

/* ---------- MURAL DE FOTOS (carrusel continuo, Sumate) ---------- */
.mural-contenedor {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--celeste);
  padding: 1rem;
  background: var(--fondo-card);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.mural-pista {
  display: flex;
  width: max-content;
  animation: mural-desplazamiento 38s linear infinite;
}

.mural-contenedor:hover .mural-pista {
  animation-play-state: paused;
}

.mural-foto {
  flex-shrink: 0;
  width: 300px;
  height: 400px;
  object-fit: cover;
  margin-right: 1.1rem;
  border-radius: 10px;
  background: var(--azul-medio);
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
}

@keyframes mural-desplazamiento {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 700px) {
  .mural-foto {
    width: 220px;
    height: 290px;
    margin-right: 0.8rem;
  }
  .mural-contenedor {
    padding: 0.7rem;
  }
}

/* Si el usuario prefiere menos movimiento, respetamos esa preferencia */
@media (prefers-reduced-motion: reduce) {
  .mural-pista {
    animation: none;
    overflow-x: auto;
  }
}

/* ---------- FAQ (acordeón) ---------- */
.faq-item {
  background: var(--fondo-card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.faq-pregunta {
  width: 100%;
  background: none;
  border: none;
  color: var(--texto-claro);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-icono {
  color: var(--celeste);
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item.abierta .faq-icono {
  transform: rotate(45deg); /* el "+" se convierte visualmente en "x" */
  color: var(--rosa);
}

.faq-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 1.3rem;
}

.faq-item.abierta .faq-respuesta {
  max-height: 400px;
  padding: 0 1.3rem 1.1rem;
}

.faq-respuesta p {
  color: var(--texto-mutado);
  font-size: 0.92rem;
}

/* Ítems que NO son carpetas (archivos, links sueltos): siempre el mismo diseño,
   con borde izquierdo de acento y un ícono prolijo en vez de emoji */
.card-item {
  border-left: 3px solid var(--celeste);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.card-item:hover {
  border-left-color: var(--rosa);
}

.card-item .icono-item {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--celeste);
  transition: color 0.2s ease;
}

.card-item:hover .icono-item {
  color: var(--rosa);
}

.card-item .card-item-texto {
  flex: 1;
  min-width: 0;
}

.card-item h3 {
  font-size: 1.02rem;
}

/* ---------- BUSCADOR (APUNTEC) ---------- */
.input-buscador {
  width: 100%;
  max-width: 420px;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--fondo-card);
  color: var(--texto-claro);
  font-family: inherit;
  font-size: 0.95rem;
}

.input-buscador:focus {
  outline: none;
  border-color: var(--celeste);
}

.input-buscador::placeholder {
  color: var(--texto-mutado);
}

/* Campo trampa (honeypot): invisible y fuera de la navegación por teclado
   para una persona real, pero un bot que autocompleta formularios sí lo ve
   y lo llena. No usamos display:none porque algunos bots lo detectan y lo
   saltean; con posicionamiento fuera de pantalla es más efectivo. */
.campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.resultado-busqueda-subtitulo {
  display: block;
  font-size: 0.78rem;
  color: var(--texto-mutado);
  font-weight: 400;
  margin-top: 0.15rem;
}

/* ---------- SELECTOR DE CARPETAS (explorador visual) ---------- */
[data-selector-carpetas] {
  position: relative;
}

.boton-selector-carpeta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--fondo-card);
  color: var(--texto-claro);
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.boton-selector-carpeta:hover {
  border-color: var(--celeste);
}

.panel-selector-carpeta {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--fondo-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.9rem;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}

/* Sin esto, el atributo "hidden" no alcanza a ganarle a "display: flex" de
   arriba (misma prioridad, y gana la regla más específica) — con esto sí,
   así el panel realmente desaparece cuando se cierra. */
.panel-selector-carpeta[hidden] {
  display: none;
}

#migas-selector-carpeta {
  min-height: 1rem;
}

#migas-selector-carpeta a {
  color: var(--celeste);
  text-decoration: none;
}

#migas-selector-carpeta a:hover {
  color: var(--rosa);
}

#lista-selector-carpeta {
  overflow-y: auto;
  flex: 1;
}

.fila-carpeta-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.4rem;
  border-radius: 6px;
  transition: background 0.12s ease;
}

.fila-carpeta-selector:hover {
  background: var(--azul-medio);
}

.fila-carpeta-selector .icono-carpeta {
  width: 18px;
  height: 18px;
  color: var(--celeste);
  flex-shrink: 0;
}

.nombre-fila-carpeta {
  flex: 1;
  cursor: pointer;
  font-size: 0.9rem;
}

.entrar-fila-carpeta {
  font-size: 0.75rem;
  color: var(--texto-mutado);
  cursor: pointer;
  white-space: nowrap;
}

.btn-usar-carpeta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  background: var(--celeste);
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-usar-carpeta:hover {
  background: var(--celeste-claro);
}

/* ---------- IMÁGENES ESTANDARIZADAS (novedades / espacios CEUTN) ---------- */
/* Formato vertical fijo siempre (también en mobile): cualquier foto que se suba
   se acomoda sola, recortada al centro. El max-height es un techo de seguridad
   para que, aunque la tarjeta se estire mucho en pantallas anchas, la foto no
   se vuelva gigante. */
.media-estandar {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  margin-bottom: 0.9rem;
  display: block;
  background: var(--azul-medio);
}

/* Grillas de fotos (Novedades / Espacios CEUTN): a diferencia de las carpetas,
   acá NO queremos que las tarjetas se estiren para llenar todo el ancho de
   pantalla en PC, porque eso agranda la foto de más. Las mantenemos en un
   ancho prolijo, como en la home. */
.grid-cards-media {
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
}

/* ---------- BREADCRUMB (navegación de carpetas) ---------- */
#breadcrumb a, #breadcrumb-apuntec a {
  color: var(--celeste);
  text-decoration: none;
  font-weight: 600;
}

#breadcrumb a:hover, #breadcrumb-apuntec a:hover {
  text-decoration: underline;
}

/* ---------- SKELETON LOADING ---------- */
.skeleton-card {
  background: var(--fondo-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  height: 110px;
  position: relative;
  overflow: hidden;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(24, 191, 227, 0.08), transparent);
  animation: skeleton-brillo 1.4s infinite;
}

@keyframes skeleton-brillo {
  to { left: 150%; }
}

/* ---------- FOOTER ---------- */
footer {
  padding: 2.8rem 1.5rem 1.6rem;
  color: var(--texto-mutado);
  font-size: 0.85rem;
  border-top: 1px solid var(--borde);
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--celeste), var(--rosa));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.footer-marca {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-marca img {
  height: 34px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  align-self: flex-start;
}

.footer-marca p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--texto-mutado);
  max-width: 240px;
}

.footer-titulo {
  color: var(--texto-claro);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-nav a {
  color: var(--texto-mutado);
  text-decoration: none;
  font-size: 0.87rem;
  transition: color 0.15s ease, padding-left 0.15s ease;
  width: fit-content;
}

.footer-nav a:hover {
  color: var(--celeste);
  padding-left: 0.25rem;
}

.footer-base {
  max-width: 1000px;
  margin: 2.2rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borde);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.78rem;
}

#footer-redes {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#footer-redes a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--texto-mutado);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.87rem;
  transition: color 0.15s ease, padding-left 0.15s ease;
  width: fit-content;
}

#footer-redes a:hover {
  color: var(--celeste);
  padding-left: 0.25rem;
}

#footer-redes a:nth-child(3n+2):hover {
  color: var(--rosa);
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-items: center;
  }
  .footer-marca {
    align-items: center;
    text-align: center;
  }
  .footer-marca img {
    align-self: center;
  }
  .footer-marca p {
    max-width: none;
  }
  .footer-titulo {
    text-align: center;
  }
  .footer-nav {
    align-items: center;
  }
  .footer-base {
    justify-content: center;
    text-align: center;
  }
  #footer-redes {
    align-items: center;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  nav {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  nav.abierto {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .hero h1 {
    font-size: 2rem;
  }
}