/* ───────────────────────── pimon-links ─────────────────────────
   El mismo sistema que pimon.dev y Pimon3D (grafito, Bricolage + Public Sans, radios
   cortos). El acento de ESTA página es el verde de la faceta personal; cada tarjeta va
   teñida del color de su web.

   Esta página puede permitirse más juego que las otras dos: no vende nada por sí misma,
   es la tarjeta de presentación. El pingüino se mueve, las tarjetas tienen color y hay
   textura de fondo. Lo que NO cambia: sin degradados que mezclen colores. Los resplandores
   detrás de los pingüinos son de UN color y están para recortar su silueta, no de adorno. */

@font-face { font-family: "Bricolage Grotesque"; src: url("fuentes/bricolage-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fuentes/public-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fuentes/public-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --fondo: #131317;
  --tarjeta: #1b1b21;
  --hundido: #0e0e11;
  --borde: #26262e;
  --borde-fuerte: #34343f;
  --tinta: #f4f4f6;
  --tinta-media: #a8a8b3;
  --tinta-suave: #6e6e7a;

  /* La faceta personal: verde. */
  --acento: #4ade80;

  --display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --radio: 12px;
  --paso: 0.16s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--fondo);
  /* Un punteado muy suave, como papel cuadriculado: da textura sin llamar la atención. */
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--tinta);
  font-family: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.pagina { width: min(100% - 2rem, 30rem); margin: 0 auto; padding: 1.5rem 0 2rem; display: grid; gap: 1.6rem; }

/* ── arriba: yo ── */
.cabeza { text-align: center; }

.escena { position: relative; width: 230px; height: 250px; margin: 0 auto; }
/* El halo verde detrás: el cuerpo del pingüino es grafito como el fondo y sin algo que lo
   recorte se pierde la silueta. */
.escena::before {
  content: ''; position: absolute; left: 50%; top: 52%; width: 290px; height: 290px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.38), rgba(74, 222, 128, 0.12) 55%, transparent 72%);
}

.pinguino {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pinguino img {
  display: block; width: 175px; height: auto;
  transform-origin: 50% 100%;
  /* Respira: un balanceo lento para que se note que está vivo. */
  animation: respira 3.2s ease-in-out infinite;
}
.pinguino.salta img { animation: salta 0.55s cubic-bezier(.3, .7, .4, 1); }
.pinguino.meneo img { animation: meneo 0.6s ease-in-out; }
/* Cansado: se desinfla despacio y se queda así hasta que despierta (forwards). */
.pinguino.cansado img { animation: cansado 0.9s ease-in-out forwards; }
.pinguino.cansado { cursor: default; }

@keyframes respira {
  0%, 100% { transform: scale(1, 1) rotate(0); }
  50%      { transform: scale(1.015, 0.985) rotate(-1deg); }
}
@keyframes salta {
  0%   { transform: scale(1.08, 0.9); }
  35%  { transform: translateY(-38px) scale(0.95, 1.06) rotate(-4deg); }
  70%  { transform: translateY(0) scale(1.06, 0.93); }
  100% { transform: none; }
}
@keyframes cansado {
  0%   { transform: none; }
  40%  { transform: scale(1.04, 0.94) rotate(3deg); }
  100% { transform: scale(1.06, 0.9) rotate(7deg) translateY(4px); }
}
@keyframes meneo {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* El bocadillo: aparece encima, con su piquito, y se va solo. */
.bocadillo {
  position: absolute; left: 50%; top: -6px; z-index: 2;
  margin: 0; max-width: 240px; width: max-content;
  padding: 0.5rem 0.85rem;
  background: var(--tinta); color: #131317;
  border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; line-height: 1.35;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 6px) scale(0.96);
  transition: opacity .18s ease, transform .18s ease;
}
.bocadillo::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--tinta);
}
.bocadillo.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Los corazones que salen cuando le coge cariño. */
.corazones { position: absolute; inset: 0; pointer-events: none; }
.corazones span {
  position: absolute; bottom: 45%; font-size: 1.3rem; color: var(--acento);
  animation: sube 1.4s ease-out forwards;
}
/* Las zetas de la siesta: más lentas y en gris, flotando hacia un lado. */
.corazones .zeta {
  bottom: 70%; font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  color: var(--tinta-media); animation: zeta 2.4s ease-out forwards;
}
@keyframes zeta {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.7); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(26px, -70px) scale(1.3); }
}
@keyframes sube {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-110px) scale(1.2); }
}

h1 { margin: 0.4rem 0 0; font-family: var(--display); font-weight: 700; font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; }
.cabeza__lema { margin: 0.55rem auto 0; max-width: 26ch; color: var(--tinta-media); font-size: 1.05rem; }

.cabeza__redes { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

/* ── una tarjeta por negocio ── */
.faceta {
  --color: var(--acento);
  position: relative;
  /* Teñida de su color, muy poco: se nota de quién es sin gritar. */
  background: color-mix(in srgb, var(--color) 8%, var(--tarjeta));
  border: 1px solid color-mix(in srgb, var(--color) 28%, var(--borde));
  border-radius: var(--radio);
  transition: transform var(--paso) ease, border-color var(--paso) ease;
}
.faceta:hover { border-color: color-mix(in srgb, var(--color) 55%, var(--borde)); }
.faceta--dev { --color: #60a5fa; }
.faceta--3d  { --color: #2dd4bf; }

.faceta__web { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 0.9rem 1rem 1.2rem; }
.faceta__texto { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.faceta__dominio { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color); }
.faceta__texto b { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.15; }
.faceta__frase { font-size: 0.9rem; color: var(--tinta-media); }

/* El pingüino de cada negocio, asomando por arriba del borde de la tarjeta. Lleva un disco
   del color de su web detrás, por lo mismo que el grande: que no se pierda en lo oscuro. */
.faceta__pinguino {
  flex: none; width: 96px; height: 96px; object-fit: contain;
  margin: -2.2rem 0 -0.4rem;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--color) 45%, transparent));
  transition: transform .25s cubic-bezier(.3, .7, .4, 1);
  transform-origin: 50% 100%;
}
.faceta__web:hover .faceta__pinguino { transform: translateY(-4px) rotate(-4deg); }

.faceta__redes {
  list-style: none; margin: 0; padding: 0.7rem 1.2rem 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--color) 25%, var(--borde));
}

/* Las pastillas de redes, las mismas arriba y en las tarjetas. */
.faceta__redes a,
.cabeza__redes a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  background: var(--hundido);
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; color: var(--tinta-media);
  transition: color var(--paso) ease, border-color var(--paso) ease;
}
.faceta__redes a:hover { color: var(--tinta); border-color: var(--color); }
.cabeza__redes a:hover { color: var(--tinta); border-color: var(--acento); }
.faceta__redes svg,
.cabeza__redes svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--color, var(--acento)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.pie { text-align: center; font-size: 0.8rem; color: var(--tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}