/* ═══════════════════════════════════════════════════════════════
   lamosquita.net
   Mobile first. Escalones: base (móvil) · 768 · 1024 · 1280
   ═══════════════════════════════════════════════════════════════ */

/* ── Tipografías ──────────────────────────────────────────────────
   D-DIN PRO © 2017 Datto Inc. — https://www.datto.com/fonts/d-din
   JetBrains Mono © 2020 The JetBrains Mono Project Authors
   Ambas bajo SIL Open Font License 1.1. Copia de las licencias en
   assets/fonts/OFL-D-DIN-PRO.txt y assets/fonts/OFL-JetBrainsMono.txt
   ──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "D-DIN PRO";
  src: url("../fonts/D-DIN-PRO-400-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "D-DIN PRO";
  src: url("../fonts/D-DIN-PRO-700-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Variables ────────────────────────────────────────────────── */
:root {
  --rojo:   #c20d0e;
  --texto:  #111;
  --fondo:  #fff;
  --caja:   #000;
  --caja-texto: #e8e8e8;
  --caja-enlace: #9b9b9b;

  --mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --t-lista:  0.95rem;
  --t-titulo: 0.95rem;
  --ancho-logo: 17rem;   /* anchura del logotipo completo */
  --t-pie:    0.72rem;
  --t-caja:   0.8rem;

  --interlineado: 1.45;
  --sangria: 30%;      /* indentación de los bloques en móvil */
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(14px, 4.267vw, 19px); }   /* escalado proporcional en móvil */
body {
  margin: 0;
  font-family: "D-DIN PRO", "DIN Alternate", Arial, Helvetica, sans-serif;
  font-size: var(--t-lista);
  line-height: var(--interlineado);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Rejilla general (móvil: una columna) ─────────────────────── */
.lienzo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "prof"
    "logo"
    "derecha"
    "social"
    "viejas"
    "pie";
  gap: 2.4rem 0;
  padding: 2.6rem 4% 1.6rem;
}

.bloque--profesionales { grid-area: prof; }
.logotipo              { grid-area: logo; }
.columna-derecha       { grid-area: derecha; }
.bloque--sociales      { grid-area: social; }
.antiguas              { grid-area: viejas; }
.pie                   { grid-area: pie; }

/* ── Bloques de enlaces ───────────────────────────────────────── */
.bloque { position: relative; }
/* En móvil los bloques se ciñen a su texto: así las moscas orbitan
   alrededor de la lista y no de todo el ancho de la pantalla. */
.bloque--profesionales,
.bloque--sociales,
.columna-derecha {
  margin-left: var(--sangria);
  width: max-content;
  max-width: calc(100% - var(--sangria));
}

.titulo {
  color: var(--rojo);
  font-weight: 700;
  font-size: var(--t-titulo);
  line-height: var(--interlineado);
}
.enlaces a {
  color: var(--texto);
  text-decoration: none;
  transition: color .18s ease;
}
.enlaces a:hover,
.enlaces a:focus-visible { color: var(--rojo); }

.columna-derecha > .bloque + .bloque { margin-top: 1.4rem; }

/* ── Logotipo ─────────────────────────────────────────────────────
   Los dos SVG comparten viewBox, así que superpuestos reconstruyen
   el logotipo original y la mosca puede moverse por su cuenta. */
.logotipo {
  display: flex;
  justify-content: center;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}
.logotipo__caja {
  position: relative;
  display: block;
  width: var(--ancho-logo, 16.2rem);
  aspect-ratio: 252.05 / 183.66;
}
.logotipo__texto,
.mosca--logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── old sites ────────────────────────────────────────────────── */
.antiguas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  padding-left: calc(var(--sangria) - 4%);
}
.antiguas__mosquero {
  position: relative;
  width: 6.2rem;
  height: 5.2rem;
  order: 1;
}
.antiguas__mosca { position: absolute; top: 0; left: 0; width: 6.2rem; }
.antiguas__mas {
  position: absolute;
  right: -.7rem; bottom: 0;
  padding: .1rem .2rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--mono);
  font-size: .82rem; font-weight: 700;
  color: var(--rojo);
  z-index: 3;
}
.antiguas__caja {
  order: 2;
  background: var(--caja);
  color: var(--caja-texto);
  font-family: var(--mono);
  font-size: var(--t-caja);
  line-height: 1.55;
  padding: .5rem .9rem .6rem;
}
.antiguas__caja[hidden] { display: none; }
.antiguas__titulo { color: #fff; }
.antiguas__caja .enlaces a { color: var(--caja-enlace); }
.antiguas__caja .enlaces a:hover { color: #fff; }

/* ── Pie ──────────────────────────────────────────────────────── */
.pie {
  text-align: center;
  font-size: var(--t-pie);
  color: #222;
  margin-top: 1.2rem;
}
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { color: var(--rojo); }

/* ── Moscas ───────────────────────────────────────────────────────
   El contenedor .mosquero marca el terreno de vuelo: siempre un
   poco mayor que el bloque al que acompaña. */
.mosquero {
  position: absolute;
  inset: -2.6rem -1.6rem;
  pointer-events: none;
  z-index: 2;
}
.mosca {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  transform-origin: 50% 50%;
}
.mosca--1 { width: 3.0rem; }   /* professional websites */
/* Las cuatro de social networks, a ojo del mismo tamaño aparente:
   los anchos difieren un poco porque sus proporciones difieren. */
.mosca--2 { width: 1.70rem; }
.mosca--3 { width: 1.55rem; }
.mosca--4 { width: 1.70rem; }
.mosca--5 { width: 1.75rem; }
.mosca--6 { width: 6rem;   }   /* old sites */

/* ── Animaciones de entrada ───────────────────────────────────── */
@keyframes aparece {
  from { opacity: 0; transform: translateY(.6rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes persiana {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.bloque--profesionales,
.logotipo,
.bloque--sociales,
.antiguas,
.pie {
  opacity: 0;
  animation: aparece .7s ease-out var(--retardo, 0s) forwards;
}
.logotipo              { --retardo: .05s; }
.bloque--profesionales { --retardo: .35s; }
.bloque--sociales      { --retardo: .55s; }
.antiguas              { --retardo: .75s; }
.pie                   { --retardo: .95s; }

/* Los dos bloques de la derecha, con su línea roja, bajan juntos
   como una persiana. */
.persiana {
  animation: persiana 1.15s cubic-bezier(.22,.61,.36,1) .1s both;
}

/* ═══ 768 px · tablet vertical ══════════════════════════════════ */
@media (min-width: 768px) {
  html { font-size: 16px; }
  :root {
    --sangria: 0;
    --t-lista: .8rem;
    --t-titulo: .8rem;
    --t-caja: .72rem;
    --t-pie: .66rem;
  }

  .lienzo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
      "prof   logo    derecha"
      "social logo    derecha"
      "social viejas  derecha"
      "pie    pie     pie";
    align-items: start;
    column-gap: 2rem;
    row-gap: 0;
    padding: 3.6rem 5% 2rem 11%;
  }

  .bloque--profesionales,
  .bloque--sociales,
  .columna-derecha { margin-left: 0; width: auto; max-width: none; }

  /* la línea roja continua de los dos bloques de la persiana */
  .columna-derecha { position: relative; padding-left: 1rem; }
  .columna-derecha::before {
    content: "";
    position: absolute; left: 0; top: .15em; bottom: .15em;
    width: 2px; background: var(--rojo);
  }

  /* el logotipo puede desbordar su columna: es el centro visual */
  .logotipo {
    margin-top: 5rem;
    overflow: visible;
    margin-left: -8rem;   /* el logotipo se sale de su columna hacia la izquierda */
  }
  :root { --ancho-logo: 13rem; }

  .bloque--sociales { margin-top: 26rem; }

  .antiguas {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-top: 16rem;
    padding-left: 0;
    width: max-content;
    margin-inline: auto;
  }
  .antiguas__mosquero { order: 0; }
  .antiguas__caja { order: 0; margin-left: .8rem; }
  .antiguas__mas { right: -.2rem; bottom: .1rem; }
  .pie { margin-top: 5.5rem; }
}

/* ═══ 1024 px · tablet apaisada ═════════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    --t-lista: .875rem;
    --t-titulo: .875rem;
    --t-caja: .78rem;
    --t-pie: .7rem;
  }

  .lienzo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: 2.4rem;
    padding: 3.6rem 6% 2rem 8%;
  }
  .logotipo { margin-top: 3.2rem; margin-left: 0; }
  :root { --ancho-logo: 15rem; }
  .bloque--sociales { margin-top: 7rem; }

  /* la caja negra pasa a la derecha de la mosca */
  .antiguas {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.1rem;
    margin-top: 5.5rem;
  }
  .antiguas__caja { margin-left: 0; align-self: center; }

}

/* ═══ 1280 px · escritorio ══════════════════════════════════════ */
@media (min-width: 1280px) {
  :root { --t-lista: .95rem; --t-titulo: .95rem; --t-caja: .8rem; --t-pie: .72rem; }

  .lienzo {
    max-width: 1280px;
    margin-inline: auto;
    padding: 4.9rem 10.6rem 2.4rem 10.3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: 2.5rem;
  }
  .logotipo { margin-top: 3.2rem; }
  :root { --ancho-logo: 16.2rem; }
  .bloque--sociales { margin-top: 7rem; }
  .antiguas { margin-top: 6rem; }
}

/* ── Movimiento reducido: las moscas no paran, sólo se calman ─── */
@media (prefers-reduced-motion: reduce) {
  .bloque--profesionales, .logotipo, .bloque--sociales,
  .antiguas, .pie, .persiana {
    animation-duration: .01ms;
    animation-delay: 0s;
  }
}

/* ═══ Página de texto (aviso legal) ═════════════════════════════ */
.lienzo-texto {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 5% 2rem;
}
.volver {
  display: inline-block;
  color: var(--rojo);
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 2rem;
}
.titulo--pagina { font-size: 1.6rem; margin-bottom: 1.2rem; }
.texto p { margin-bottom: 1em; }
.texto a { color: var(--rojo); }
.pie--texto { margin-top: 3rem; text-align: left; }