:root {
  color-scheme: light dark;

  /* ============================================================
     TOKENS DE DISEÑO — todo el "tema" del sitio vive acá arriba.
     Para cambiar el aspecto, modificá estos valores; no hace falta
     tocar nada más en el resto del archivo.
     ============================================================ */

  /* Acento: color de marca (badge RSS, links del paginador).
     Para probar otro color, reemplazá los dos hex de abajo
     (el segundo es el tono de hover, más oscuro que el primero):
       #158cba / #0f6d92  (celeste-cyan)
       #2c6e49 / #1f4e34  (verde bosque)
       #b5442a / #8f351f  (terracota) */
  --color-accent:       #158cba;
  --color-accent-hover: #0f6d92;

  /* Fondos */
  --color-bg:           #fafafa;      /* fondo de página */
  --color-surface:      hsl(0, 0%, 95%);   /* header, footer, cards */
  --color-surface-alt:  hsl(0, 0%, 94%);      /* tag-pills en reposo */
  --color-surface-hover:hsl(0, 0%, 90%);      /* tag-pills al hacer hover */
  --color-surface-input:hsl(0, 0%, 90%);   /* placeholders, img-placeholder */

  /* Texto */
  --color-text:         #333;      /* texto principal */
  --color-text-on-surface: hsl(0, 0%, 7%);   /* texto dentro de cards/links */
  --color-text-muted:   hsl(0, 0%, 30%);      /* roles, meta, footer, error-msg */
  --color-text-subtle:  #666;      /* dates, link-desc, img-placeholder */
  --color-text-faint:   hsl(0, 0%, 75%);      /* paginator-disabled */
  --color-text-inverse: #fff;      /* texto sobre fondo oscuro/acento */

  /* Bordes */
  --color-border:       hsl(0, 0%, 82%);   /* bordes generales */
  --color-border-muted: hsl(0, 0%, 86%);      /* h2, link-separator, paginator */

  /* Bevel (efecto Adwaita/elementary) — EN UNA SOLA PROPIEDAD box-shadow
     por elemento, para poder probar con/sin bevel en DevTools destildando
     una sola casilla. */
  --color-bevel-hi:     rgba(255, 255, 255, 0.8);  /* highlight arriba */
  --color-bevel-sh:     rgba(0, 0, 0, 0.2);        /* sombra abajo */

  /* Overlay de hover sobre las project-cards */
  --color-card-overlay: rgba(17, 17, 17, 0.75);

  /* Geometría */
  --radius:    0.4rem;   /* radio estándar (la mayoría de elementos) */
  --radius-sm: 0.3rem;   /* radio para elementos pequeños (paginator-current, footer a) */

  /* Sistema Lumen (borde grueso abajo) — usado si se prefiere a bevel */
  --thickness:       4px;
  --thickness-hover: 4px;
  --radius-tab: 0.4rem 0.4rem 0 0;
}


* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

h1 {
  font-size: 2rem;
  margin: 0 0 0.25rem;
}

h1 a {
  color: inherit;
  text-decoration: none;
}

h1 a:visited {
  /* color: inherit; */
}

.role {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.meta {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}

header {
  text-align: center;
  background: var(--color-surface);
  border-bottom: var(--thickness) solid var(--color-border);
  /*! padding: 1.75rem 1.25rem 1.5rem; */
}

header h1 {
  font-family: Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1.25rem 0 0.5rem 0;
}

footer {
  background: var(--color-surface);
  border-top: var(--thickness) solid var(--color-border);
  padding: 1.25rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--color-text-on-surface);
  text-decoration: underline;
}

nav {
  margin: 0.75rem 0 0 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.95rem;
}

nav a {
  text-decoration: none;
  color: var(--color-text);
  padding: 0.7rem 1rem 0.5rem 1rem;
  border-radius: var(--radius-tab);
  transition: background-color 0.15s ease;
}

nav a:hover {
  background-color: var(--color-border);
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-width: var(--thickness);
  transition: border-bottom-width 0.15s ease;
}

.project-card:hover {
  border-bottom-width: var(--thickness-hover);
}

.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius) - 0.05rem) calc(var(--radius) - 0.05rem) 0 0;
}

.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-card-overlay);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
  pointer-events: none;
}

.project-card:hover::after {
  opacity: 1;
}

.project-card span {
  position: relative;
  z-index: 2;
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.project-card:hover span {
  color: var(--color-text-inverse);
}

video {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  margin-top: 1rem;
}

.project-images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.project-images img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

.project-images a {
  display: block;
}

.img-placeholder {
  aspect-ratio: 16 / 10;
  background: var(--color-surface-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  border-radius: var(--radius);
}

h2 {
  font-size: 1.1rem;
  border-bottom: 1px solid var(--color-border-muted);
  padding-bottom: 0.25rem;
  margin-top: 2rem;
}

h3 {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.dates {
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  margin: 0 0 0.35rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.tag-pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}

.tag-pill:hover {
  background: var(--color-surface-hover);
}

.tag-group {
  display: inline-flex;
}

.tag-pill.is-topic {
  border-radius: var(--radius) 0 0 var(--radius);
}

.tag-rss {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-text-inverse);
  background: var(--color-accent);
  padding: 0.3rem 0.7rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  transition: background-color 0.15s ease;
}

.tag-rss:hover {
  background: var(--color-accent-hover);
}

#related-posts h2 {
  border-bottom: none;
  padding-bottom: 0;
}

.paginator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.paginator a {
  color: var(--color-accent);
  text-decoration: none;
}

.paginator a:hover {
  text-decoration: underline;
}

.paginator-disabled {
  color: var(--color-text-faint);
}

.paginator-pages {
  display: flex;
  gap: 0.6rem;
}

.paginator-current {
  font-weight: 700;
}

article {
  margin-bottom: 1.25rem;
}

a {
  color: var(--color-text);
}

/* links.html */
.links-page {
  text-align: center;
}

.card-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.card-list a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem 0.5rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text-on-surface);
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-bottom-width: var(--thickness);
  transition: border-bottom-width 0.15s ease;
}

.card-list a:hover {
  border-bottom-width: var(--thickness-hover);
  background: var(--color-surface-hover);
}

.card-list .dates {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.link-list li {
  margin-bottom: 0.85rem;
}

.link-list a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-bottom-width: var(--thickness);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text-on-surface);
  transition: border-bottom-width 0.15s ease, background-color 0.15s ease;
  background: var(--color-surface);
}

.link-title {
  font-weight: 600;
}

.link-desc {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
}

.link-separator {
  border: none;
  border-top: 1px solid var(--color-border-muted);
  margin: 1rem 0;
}

.link-list a:hover {
  border-bottom-width: var(--thickness-hover);
  background-color: var(--color-surface-hover);
}

.back {
  font-size: 0.9rem;
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem;
  gap: 0.5rem;
}

.error-code {
  font-family: Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  margin: 0;
}

.error-msg {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* En modo oscuro se redefinen todos los tokens que cambian de valor.
       Los que no aparecen acá conservan su valor de modo claro. */

    /* Fondos oscuros */
    --color-bg:           hsl(0, 0%, 7%);
    --color-surface:      hsl(0, 0%, 10%);
    --color-surface-alt:  hsl(0, 0%, 14%);
    --color-surface-hover:hsl(0, 0%, 15%);
    --color-surface-input:hsl(0, 0%, 16%);

    /* Texto para modo oscuro */
    --color-text:         hsl(0, 0%, 94%);
    --color-text-on-surface: hsl(0, 0%, 88%);
    --color-text-muted:   hsl(0, 0%, 40%);
    --color-text-subtle:  hsl(0, 0%, 60%);
    --color-text-faint:   hsl(0, 0%, 30%);
    --color-text-inverse: #333;      /* texto sobre fondo oscuro/acento */

    /* Bordes */
    --color-border:       hsl(0, 0%, 20%);
    --color-border-muted: hsl(0, 0%, 25%);

    /* Bevel más sutil sobre fondo oscuro */
    --color-bevel-hi:     rgba(255, 255, 255, 0.08);
    --color-bevel-sh:     rgba(0, 0, 0, 0.5);
    /* Overlay de hover sobre las project-cards */
    --color-card-overlay: rgba(245,245,245,0.87);

    /* Acento más claro para que se lea bien sobre fondo oscuro */
    --color-accent:       #4db8e0;
    --color-accent-hover: #7cc9e8;
  }
}