/* ===========================================================================
   Portfolio de herramientas — hoja de estilos de la página pública.

   Un solo archivo, sin dependencias y sin ninguna petición a dominios
   ajenos: la tipografía es la pila del sistema y los iconos van como SVG
   inline en el HTML. Ver las diez reglas en templates/public.php.
   =========================================================================== */

:root {
  /* Negro con un matiz rosado mínimo, a juego con la marca. No negro puro:
     el negro absoluto sobre pantallas OLED cansa la vista y hace que las
     tarjetas no se distingan del fondo. */
  --bg:            #0d0a0c;
  --bg-elev:       #191216;
  --card:          #171014;
  --card-hover:    #1e151a;
  --border:        #2a1d23;
  --border-strong: #3d2a33;

  --text:      #f3ebee;   /* 16.8:1 sobre --bg */
  --text-dim:  #b09aa3;   /*  7.5:1 sobre --bg: cumple WCAG AA */
  --link:      #ff5fa2;   /*  7.0:1 sobre --bg, para enlaces dentro de texto */

  /* IMPORTANTE: el texto de los botones va OSCURO sobre el degradado.
     El blanco sobre estos rosas da 3.7:1 y NO cumple AA; este negro da
     4.7:1 sobre el extremo más oscuro del degradado. No lo cambies a
     blanco sin volver a medir el contraste. */
  --on-accent: #080306;

  /* El degradado de acento llega como style inline en <html>, para que se
     pueda cambiar desde el panel sin regenerar esta hoja. Estos valores son
     el respaldo si faltara. */
  --accent-from: #e2287f;
  --accent-to:   #ff187c;
  --accent:      var(--accent-from);
  --accent-grad: linear-gradient(135deg, var(--accent-from), var(--accent-to));

  --radius:    16px;
  --radius-sm: 12px;

  --page-max: 1600px;
  --col-max:  560px;
  --card-max: 360px;
  --gutter:   16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* La barra de pestañas se desplaza dentro de sí misma: la página nunca. */
  overflow-x: hidden;
}

/* --- Idiomas ---------------------------------------------------------------
   El HTML lleva los dos idiomas; el CSS oculta el que no toca. El atributo
   data-lang de <html> lo pone el generador, así que no hay parpadeo. */
html[data-lang="es"] [data-lang="en"],
html[data-lang="en"] [data-lang="es"] { display: none !important; }

/* --- Utilidades ----------------------------------------------------------- */

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

.skip {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -140%);
  z-index: 20;
  padding: 10px 16px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: transform .15s ease;
}
.skip:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--accent-to);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Brillo muy suave detrás de la cabecera. Dos radiales y nada más. */
.glow {
  position: fixed;
  inset: 0 0 auto 0;
  height: 460px;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  background:
    radial-gradient(44% 58% at 30% 0%, var(--accent-from), transparent 72%),
    radial-gradient(44% 58% at 70% 6%, var(--accent-to),   transparent 72%);
}

/* --- Cabecera ------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 18px var(--gutter) 10px;
  text-align: center;
}
.hero-slim { padding-bottom: 4px; }

.hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  margin-bottom: 14px;
}
.hero-bar > .langsel:only-child { margin-left: auto; }

.backlink {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .9375rem;
  padding: 10px 4px;
}
.backlink:hover { color: var(--text); }

.langsel {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.lang-btn {
  appearance: none;
  min-width: 42px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-pressed="true"] {
  background: var(--accent-grad);
  color: var(--on-accent);
}

.avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 26px;
  object-fit: cover;
  /* Borde con el degradado de acento, sin envolturas extra. */
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg), var(--bg)), var(--accent-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.avatar-ph { background-image: var(--accent-grad); border-color: transparent; }

.site-name {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}

.tagline {
  margin: 10px auto 0;
  max-width: 44ch;
  color: var(--text-dim);
  font-size: 1rem;
}

.hero-links { margin: 14px 0 0; }
.ghprof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: color .15s ease, border-color .15s ease;
}
.ghprof:hover { color: var(--text); border-color: var(--border-strong); }

/* --- Barra de pestañas -----------------------------------------------------
   El contenedor es el que se desplaza. .tabs usa width:max-content con
   márgenes automáticos: así se centra cuando caben todas y NO recorta la
   primera pestaña cuando no caben (el fallo clásico de justify-content). */

.tabscroll {
  position: relative;
  z-index: 1;
  margin: 6px 0 22px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabscroll::-webkit-scrollbar { display: none; }

.tabs {
  display: flex;
  gap: 8px;
  width: max-content;
  max-width: none;
  margin: 0 auto;
  padding: 2px var(--gutter);
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--text); border-color: var(--border-strong); }
.tab[aria-selected="true"] {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
}

/* --- Contenido ------------------------------------------------------------ */

main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
}

.section-heading {
  display: none;            /* manda la barra de pestañas… */
  margin: 28px 0 14px;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
/* …salvo sin JavaScript, donde el <noscript> del <head> lo vuelve a mostrar. */

.empty { color: var(--text-dim); text-align: center; margin: 40px 0; }

/* Móvil: una columna. */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  max-width: var(--col-max);
  margin: 0 auto;
}

/* De tablet para arriba: flexbox en vez de rejilla.
   Caben las tarjetas que caben (ancho mínimo 280 px), nunca un número fijo,
   pero cuando la última fila queda incompleta —tres tarjetas en una fila de
   cuatro, o una sola suelta— las tarjetas se CENTRAN en lugar de quedarse
   pegadas a la izquierda dejando un hueco. Eso es lo que no hace
   grid-template-columns, que siempre deja la pista vacía a la derecha.
   El max-width evita que dos tarjetas sueltas se estiren hasta deformarse. */
@media (min-width: 640px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    max-width: none;
    gap: 20px;
  }
  .card {
    flex: 1 1 280px;
    max-width: var(--card-max);
  }
}
@media (min-width: 1024px) {
  main { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1440px) {
  main { padding-left: 48px; padding-right: 48px; }
}

/* --- Tarjeta -------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  animation: card-in .4s ease both;
  animation-delay: var(--delay, 0s);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.card:hover {
  transform: translateY(-2px);
  background: var(--card-hover);
  border-color: var(--accent);
  box-shadow: 0 10px 30px -14px var(--accent);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.shot {
  margin: 0;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px;
}

.card-title {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -.01em;
}
.card-title .icon {
  margin-right: .45em;
  font-size: 1.15em;
  line-height: 1;
}

.desc {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: .9375rem;
  /* Una o dos líneas; si sobra, elipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.btn .ico { flex: none; }

.btn-primary {
  flex: 1 1 auto;
  background: var(--accent-grad);
  color: var(--on-accent);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-dim);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-dim);
  background: rgba(255, 255, 255, .04);
}

/* --- Páginas legales ------------------------------------------------------ */

.legal-title {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.75rem);
  letter-spacing: -.02em;
}

.prose {
  max-width: 68ch;
  padding-bottom: 32px;
}
.prose h2 {
  margin: 30px 0 10px;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--text);
}
.prose h3 { margin: 22px 0 8px; font-size: .9375rem; }
.prose p, .prose li { color: var(--text-dim); font-size: .9375rem; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); }
.prose a { color: var(--link); }
.prose a:hover { text-decoration: none; }
.prose .updated {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .8125rem;
}

/* --- Pie ------------------------------------------------------------------ */

.foot {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 22px var(--gutter) 34px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-dim);
  font-size: .8125rem;
}
.foot-line { margin: 0 0 6px; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.foot-links a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 2px;
}
.foot-links a:hover { color: var(--text); text-decoration: underline; }

/* --- Movimiento reducido --------------------------------------------------
   Obligatorio: desactiva TODAS las animaciones, incluida la del cambio de
   pestaña. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}