/* ==========================================================================
   Estilos propios (UX + identidad visual) sobre Beautiful Jekyll.
   Identidad "técnica cálida": tipografía de ingeniería (IBM Plex / Space
   Grotesk) con el acento rosa de la marca. Se carga con `site-css` después
   del tema, así que redefine sus variables de fuente.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Sistema tipográfico
   --------------------------------------------------------------------------- */
:root {
  --body-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-font: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------------------
   1b. Sistema de color: modo claro (por defecto) y modo oscuro
   El modo se fija con data-theme en <html> (toggle), con prefers-color-scheme
   como fallback. En oscuro se redefinen las variables del tema
   (--page-col/--text-col/--mid-col), que Beautiful Jekyll usa en body/headings,
   y las superficies propias (codigo, diagramas, tablas, etc.).
   --------------------------------------------------------------------------- */
:root {
  --rule-col: #ececec;
  --mid-col: #6b6b6b;           /* mejor contraste del meta en modo claro */
  --heading-strong: #2b2b2b;
  --content-link: #bb4a57;
  --content-link-underline: rgba(187, 74, 87, 0.55);
  --code-bg: #faf6f7;
  --code-border: #ead9dc;
  --code-accent: #CE5A67;
  --code-text: #2b2b2b;
  --code-inline-bg: #f7eef0;
  --code-inline-text: #a83a47;
  --diagram-bg: #faf6f7;
  --diagram-border: #ead9dc;
  --diagram-glow: rgba(206, 90, 103, 0.10);
  --table-head-bg: #fbe9eb;
  --table-zebra-bg: #faf6f7;
  --table-border: #e6e6e6;
  --blockquote-bg: #fbf4f5;
  --tag-bg: #f6f6f6;
  --tag-border: #e2e2e2;
  --tag-text: #595959;
  --tag-hover-bg: #ececec;
  --tag-hover-border: #d4d4d4;
  /* Tokens de sintaxis (rouge) */
  --tok-comment: #8a8f98;
  --tok-keyword: #c0404d;
  --tok-string:  #2e7d32;
  --tok-number:  #b35900;
  --tok-name:    #1f6feb;
  --tok-builtin: #8957e5;
  /* Colores por rol de los nodos de flowchart (Mermaid) */
  --mmd-attacker-bg: #fdecec; --mmd-attacker-br: #d1242f; --mmd-attacker-tx: #a4232b;
  --mmd-check-bg:    #e7f1ff; --mmd-check-br:    #1f6feb; --mmd-check-tx:    #0a4bb3;
  --mmd-bug-bg:      #fff6da; --mmd-bug-br:      #bf8700; --mmd-bug-tx:      #8a6100;
  --mmd-impact-bg:   #ffebe9; --mmd-impact-br:   #cf222e; --mmd-impact-tx:   #a0111f;
  --mmd-safe-bg:     #e6f6ec; --mmd-safe-br:     #1a7f37; --mmd-safe-tx:     #116329;
}

/* Declaraciones del modo oscuro (se repiten para el toggle y para el
   fallback por preferencia del sistema). */
:root[data-theme="dark"] {
  --page-col: #0d1117;
  --text-col: #c9d1d9;
  --mid-col: #8b949e;
  --rule-col: #30363d;
  --heading-strong: #e6edf3;
  --content-link: #ff8d9a;
  --content-link-underline: rgba(255, 141, 154, 0.5);
  --link-col: #ff8d9a;
  --code-bg: #161b22;
  --code-border: #30363d;
  --code-accent: #3fb950;
  --code-text: #c9d1d9;
  --code-inline-bg: #21262d;
  --code-inline-text: #ff9fab;
  --diagram-bg: #0d1117;
  --diagram-border: #30363d;
  --diagram-glow: rgba(63, 185, 80, 0.10);
  --table-head-bg: #161b22;
  --table-zebra-bg: #11161d;
  --table-border: #30363d;
  --blockquote-bg: #161b22;
  --tag-bg: #161b22;
  --tag-border: #30363d;
  --tag-text: #adbac7;
  --tag-hover-bg: #21262d;
  --tag-hover-border: #3fb950;
  --tok-comment: #8b949e;
  --tok-keyword: #ff9fab;
  --tok-string:  #3fb950;
  --tok-number:  #d29922;
  --tok-name:    #58a6ff;
  --tok-builtin: #d2a8ff;
  --mmd-attacker-bg: #2d0b0e; --mmd-attacker-br: #f85149; --mmd-attacker-tx: #ffa198;
  --mmd-check-bg:    #0b2530; --mmd-check-br:    #58a6ff; --mmd-check-tx:    #a5d6ff;
  --mmd-bug-bg:      #33280a; --mmd-bug-br:      #d29922; --mmd-bug-tx:      #e3b341;
  --mmd-impact-bg:   #3d0d12; --mmd-impact-br:   #f85149; --mmd-impact-tx:   #ff7b72;
  --mmd-safe-bg:     #0d2a16; --mmd-safe-br:     #3fb950; --mmd-safe-tx:     #56d364;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-col: #0d1117;
    --text-col: #c9d1d9;
    --mid-col: #8b949e;
    --rule-col: #30363d;
    --heading-strong: #e6edf3;
    --content-link: #ff8d9a;
    --content-link-underline: rgba(255, 141, 154, 0.5);
    --link-col: #ff8d9a;
    --code-bg: #161b22;
    --code-border: #30363d;
    --code-accent: #3fb950;
    --code-text: #c9d1d9;
    --code-inline-bg: #21262d;
    --code-inline-text: #ff9fab;
    --diagram-bg: #0d1117;
    --diagram-border: #30363d;
    --diagram-glow: rgba(63, 185, 80, 0.10);
    --table-head-bg: #161b22;
    --table-zebra-bg: #11161d;
    --table-border: #30363d;
    --blockquote-bg: #161b22;
    --tag-bg: #161b22;
    --tag-border: #30363d;
    --tag-text: #adbac7;
    --tag-hover-bg: #21262d;
    --tag-hover-border: #3fb950;
    --tok-comment: #8b949e;
    --tok-keyword: #ff9fab;
    --tok-string:  #3fb950;
    --tok-number:  #d29922;
    --tok-name:    #58a6ff;
    --tok-builtin: #d2a8ff;
    --mmd-attacker-bg: #2d0b0e; --mmd-attacker-br: #f85149; --mmd-attacker-tx: #ffa198;
    --mmd-check-bg:    #0b2530; --mmd-check-br:    #58a6ff; --mmd-check-tx:    #a5d6ff;
    --mmd-bug-bg:      #33280a; --mmd-bug-br:      #d29922; --mmd-bug-tx:      #e3b341;
    --mmd-impact-bg:   #3d0d12; --mmd-impact-br:   #f85149; --mmd-impact-tx:   #ff7b72;
    --mmd-safe-bg:     #0d2a16; --mmd-safe-br:     #3fb950; --mmd-safe-tx:     #56d364;
  }
}

body {
  background-color: var(--page-col);
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 1.0625rem;      /* ~17px */
  letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6,
.post-title, .navbar .navbar-brand {
  letter-spacing: -0.015em;  /* Space Grotesk respira mejor un poco más ceñida */
}

/* ---------------------------------------------------------------------------
   2. Lectura del cuerpo del post
   --------------------------------------------------------------------------- */
.blog-post {
  line-height: 1.75;
}
.blog-post p {
  margin-bottom: 1.15rem;
}

/* Lectura: el contenido del post llena la columna responsive que ya provee
   el tema (col-xl-8 / col-lg-10, centrada), asi acompana el tamano de
   pantalla. Solo acotamos la medida del extracto del feed. */
.post-entry {
  max-width: 42rem;
}
.blog-post h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.blog-post h4 {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
  color: var(--heading-strong);
}

/* Links del contenido: color un punto más oscuro que el acento de los
   títulos (mejor contraste AA sobre blanco) y subrayado más visible. */
.blog-post a {
  color: var(--content-link);
  text-decoration: none;
  border-bottom: 1px solid var(--content-link-underline);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-post a:hover,
.blog-post a:focus {
  border-bottom-color: var(--hover-col);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   3. Tipografía monoespaciada para código
   --------------------------------------------------------------------------- */
code, pre, .blog-post code, .blog-post pre {
  font-family: var(--mono-font);
}
/* Solo el código EN LÍNEA lleva fondo/acento; el código dentro de bloques
   `pre` queda transparente para no verse "seleccionado". */
.blog-post :not(pre) > code {
  color: var(--code-inline-text);
  background-color: var(--code-inline-bg);
  font-size: 0.9em;
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}
.blog-post pre {
  border-radius: 0.5rem;
  font-size: 0.86rem;
}
/* Bloque de código como panel de terminal (estetica ethical hacking),
   adaptado al modo claro/oscuro con las variables de superficie. */
.blog-post .highlight > pre,
.blog-post pre.highlight {
  background: var(--code-bg);
  background-image: none;
  border: 1px solid var(--code-border);
  border-left: 0.35rem solid var(--code-accent);
  color: var(--code-text);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  max-width: 100%;
  overflow-x: auto;
}
.blog-post pre code {
  background-color: transparent;
  color: var(--code-text);
}
/* Tokens de sintaxis (rouge) por variables: cambian con el modo. */
.blog-post .highlight .c,  .blog-post .highlight .cm, .blog-post .highlight .c1,
.blog-post .highlight .cs, .blog-post .highlight .cd, .blog-post .highlight .cp {
  color: var(--tok-comment); font-style: italic;
}
.blog-post .highlight .k,  .blog-post .highlight .kc, .blog-post .highlight .kd,
.blog-post .highlight .kn, .blog-post .highlight .kp, .blog-post .highlight .kr,
.blog-post .highlight .kt, .blog-post .highlight .o,  .blog-post .highlight .ow {
  color: var(--tok-keyword); font-weight: 600;
}
.blog-post .highlight .s,  .blog-post .highlight .sb, .blog-post .highlight .sc,
.blog-post .highlight .sd, .blog-post .highlight .s1, .blog-post .highlight .s2,
.blog-post .highlight .se, .blog-post .highlight .sh, .blog-post .highlight .si,
.blog-post .highlight .sx, .blog-post .highlight .sr, .blog-post .highlight .ss,
.blog-post .highlight .dl {
  color: var(--tok-string);
}
.blog-post .highlight .m,  .blog-post .highlight .mf, .blog-post .highlight .mh,
.blog-post .highlight .mi, .blog-post .highlight .mo, .blog-post .highlight .il {
  color: var(--tok-number);
}
.blog-post .highlight .nf, .blog-post .highlight .na, .blog-post .highlight .nc,
.blog-post .highlight .nn, .blog-post .highlight .nt, .blog-post .highlight .nd,
.blog-post .highlight .nv, .blog-post .highlight .vg, .blog-post .highlight .vi,
.blog-post .highlight .vc, .blog-post .highlight .no, .blog-post .highlight .nl {
  color: var(--tok-name);
}
.blog-post .highlight .nb, .blog-post .highlight .bp, .blog-post .highlight .ne {
  color: var(--tok-builtin);
}

/* ---------------------------------------------------------------------------
   4. Tablas: encabezado con acento de marca, zebra suave, scroll en móvil
   --------------------------------------------------------------------------- */
.blog-post table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--table-border);
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 1.5rem 0;
  width: 100%;
  font-size: 0.97rem;
}
.blog-post table tr th {
  background-color: var(--table-head-bg);
  border: none;
  border-bottom: 2px solid var(--link-col);
  color: var(--text-col);
  font-family: var(--header-font);
  font-weight: 600;
}
.blog-post table tr td {
  border: none;
  border-bottom: 1px solid var(--rule-col);
}
.blog-post table tr:nth-child(2n) {
  background-color: var(--table-zebra-bg);
}
@media (max-width: 768px) {
  .blog-post table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------------
   5. Citas
   --------------------------------------------------------------------------- */
.blog-post blockquote {
  border-left: 0.25rem solid var(--link-col);
  background-color: var(--blockquote-bg);
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.75rem 1.25rem;
  color: var(--text-col);
}

/* ---------------------------------------------------------------------------
   6. Imágenes y diagramas Mermaid
   --------------------------------------------------------------------------- */
.blog-post img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
/* Diagramas enmarcados como un panel de terminal, adaptado al modo. */
.blog-post .mermaid {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
  padding: 1.25rem;
  overflow-x: auto;
  background-color: var(--diagram-bg);
  border: 1px solid var(--diagram-border);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px var(--diagram-glow);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.blog-post .mermaid svg {
  max-width: 100%;
  height: auto;
}
/* Colores por rol de los nodos de flowchart (definidos con `class` en el
   diagrama). Se aplican por CSS para que sigan el modo claro/oscuro; el
   !important vence al <style> interno que Mermaid inyecta con id. */
.blog-post .mermaid g.node.attacker > rect,
.blog-post .mermaid g.node.attacker > polygon,
.blog-post .mermaid g.node.attacker > path {
  fill: var(--mmd-attacker-bg) !important;
  stroke: var(--mmd-attacker-br) !important;
}
.blog-post .mermaid g.node.attacker .nodeLabel {
  color: var(--mmd-attacker-tx) !important;
}
.blog-post .mermaid g.node.check > rect,
.blog-post .mermaid g.node.check > polygon,
.blog-post .mermaid g.node.check > path {
  fill: var(--mmd-check-bg) !important;
  stroke: var(--mmd-check-br) !important;
}
.blog-post .mermaid g.node.check .nodeLabel {
  color: var(--mmd-check-tx) !important;
}
.blog-post .mermaid g.node.bug > rect,
.blog-post .mermaid g.node.bug > polygon,
.blog-post .mermaid g.node.bug > path {
  fill: var(--mmd-bug-bg) !important;
  stroke: var(--mmd-bug-br) !important;
}
.blog-post .mermaid g.node.bug .nodeLabel {
  color: var(--mmd-bug-tx) !important;
}
.blog-post .mermaid g.node.impact > rect,
.blog-post .mermaid g.node.impact > polygon,
.blog-post .mermaid g.node.impact > path {
  fill: var(--mmd-impact-bg) !important;
  stroke: var(--mmd-impact-br) !important;
}
.blog-post .mermaid g.node.impact .nodeLabel {
  color: var(--mmd-impact-tx) !important;
}
.blog-post .mermaid g.node.safe > rect,
.blog-post .mermaid g.node.safe > polygon,
.blog-post .mermaid g.node.safe > path {
  fill: var(--mmd-safe-bg) !important;
  stroke: var(--mmd-safe-br) !important;
}
.blog-post .mermaid g.node.safe .nodeLabel {
  color: var(--mmd-safe-tx) !important;
}
/* La punta de flecha hereda el color de su propia arista. Asi, una arista
   resaltada con `linkStyle` (p. ej. en rojo) tiene la punta del mismo color,
   en vez del color por defecto del marcador compartido. Va tras @supports para
   que en navegadores sin context-stroke quede el comportamiento por defecto. */
@supports (fill: context-stroke) {
  .blog-post .mermaid marker path,
  .blog-post .mermaid marker polygon {
    fill: context-stroke !important;
  }
}

/* ---------------------------------------------------------------------------
   7. Encabezado del post: título display + regla de acento
   --------------------------------------------------------------------------- */
.intro-header .page-heading h1,
.intro-header .post-heading h1 {
  font-weight: 700;
}
/* Mas presencia del titulo del header (brillante en oscuro). No afecta a
   los headers con imagen de portada, que llevan texto blanco. */
.intro-header:not(.big-img) .page-heading h1,
.intro-header:not(.big-img) .post-heading h1 {
  color: var(--heading-strong);
}
.intro-header .post-heading {
  border-bottom: 3px solid var(--link-col);
  padding-bottom: 1rem;
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   8. Feed (home): lista editorial, no tarjetas
   --------------------------------------------------------------------------- */
.posts-list .post-preview {
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule-col);
}
.posts-list .post-preview:first-child {
  border-top: none;
}
.posts-list .post-title {
  font-weight: 700;
  transition: color 0.15s ease;
}
.posts-list .post-preview a:hover .post-title,
.posts-list .post-preview a:focus .post-title {
  color: var(--link-col);
}
.post-meta {
  color: var(--mid-col);
  font-size: 0.9rem;
}
.post-read-more {
  font-weight: 600;
  color: var(--link-col);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   9. Tags como "pill"
   --------------------------------------------------------------------------- */
/* Gris neutro: el rosa queda reservado para títulos y links de contenido */
.blog-tags a {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  margin: 0.15rem 0.2rem 0.15rem 0;
  font-size: 0.82rem;
  border: 1px solid var(--tag-border);
  border-radius: 999px;
  color: var(--tag-text);
  background-color: var(--tag-bg);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-tags a:hover,
.blog-tags a:focus {
  background-color: var(--tag-hover-bg);
  border-color: var(--tag-hover-border);
  color: var(--text-col);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   10. Navbar: marca con carácter y links con acento al pasar
   --------------------------------------------------------------------------- */
.navbar .navbar-brand {
  font-weight: 600;
}
.navbar .nav-link {
  position: relative;
  transition: color 0.15s ease;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.35rem;
  height: 2px;
  background-color: var(--hover-col);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
   11. Botones de paginación entre posts
   --------------------------------------------------------------------------- */
.pagination.blog-pager .page-item .page-link {
  border-radius: 999px;
  border-color: var(--link-col);
  color: var(--link-col);
  font-family: var(--header-font);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pagination.blog-pager .page-item .page-link:hover,
.pagination.blog-pager .page-item .page-link:focus {
  background-color: var(--link-col);
  border-color: var(--link-col);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   12. Accesibilidad y movimiento
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--hover-col);
  outline-offset: 2px;
}
.blog-post hr {
  border: 0;
  border-top: 1px solid var(--rule-col);
  margin: 2rem 0;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------------------
   13. Recomendaciones / testimonios (pagina Recomendaciones)
   --------------------------------------------------------------------------- */
.recommendations {
  display: grid;
  gap: 1.25rem;
  margin: 1.75rem 0;
}
.recommendation {
  margin: 0;
  background-color: var(--blockquote-bg);
  border: 1px solid var(--rule-col);
  border-left: 0.25rem solid var(--link-col);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.1rem 1.35rem;
  color: var(--text-col);
}
.recommendation p {
  margin: 0 0 0.75rem;
  line-height: 1.7;
}
.recommendation p:last-of-type {
  margin-bottom: 1rem;
}
/* El tema pinta cualquier <footer> con el fondo negro del pie del sitio;
   lo neutralizamos para que la ficha del autor use el fondo de la tarjeta. */
.recommendation footer {
  font-size: 0.9rem;
  line-height: 1.45;
  border-top: 1px solid var(--rule-col);
  margin: 0;
  padding: 0.75rem 0 0;
  background: transparent;
  color: var(--text-col);
  text-align: left;
}
.recommendation .rec-name {
  display: block;
  font-family: var(--header-font);
  font-weight: 700;
  color: var(--heading-strong);
}
.recommendation .rec-title {
  display: block;
  color: var(--text-col);
}
.recommendation .rec-rel {
  display: block;
  margin-top: 0.15rem;
  color: var(--mid-col);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   14. Interruptor de modo claro/oscuro (boton flotante)
   --------------------------------------------------------------------------- */
#theme-toggle {
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  z-index: 1050;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--code-border);
  background-color: var(--code-bg);
  color: var(--text-col);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.2s ease;
}
#theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--code-accent);
}
@media (prefers-reduced-motion: reduce) {
  #theme-toggle,
  body,
  .blog-post .mermaid { transition: none; }
}

/* ---------------------------------------------------------------------------
   15. Botones de accion (CTA) reutilizables
   --------------------------------------------------------------------------- */
.cta-primary,
.cta-ghost {
  display: inline-block;
  font-family: var(--header-font);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--link-col);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cta-primary {
  background-color: var(--link-col);
  color: #fff;
}
.cta-primary:hover,
.cta-primary:focus {
  background-color: var(--hover-col);
  border-color: var(--hover-col);
  color: #fff;
  text-decoration: none;
}
.cta-ghost {
  background-color: transparent;
  color: var(--link-col);
}
.cta-ghost:hover,
.cta-ghost:focus {
  background-color: var(--link-col);
  color: #fff;
  text-decoration: none;
}

/* Etiqueta de seccion con regla de acento */
.section-label {
  display: inline-block;
  font-family: var(--header-font);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--link-col);
}

/* ---------------------------------------------------------------------------
   16. Home: hero de presentacion y lectura destacada
   --------------------------------------------------------------------------- */
.home-hero {
  margin: 0 0 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule-col);
}
.hero-role {
  font-family: var(--header-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--heading-strong);
  margin-bottom: 0.3rem;
}
.hero-proof {
  color: var(--mid-col);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.hero-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 44rem;
  color: var(--text-col);
  margin-bottom: 1.25rem;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}
.home-featured {
  margin-bottom: 2.5rem;
}
.featured-list {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}
@media (min-width: 640px) {
  .featured-list {
    grid-template-columns: 1fr 1fr;
  }
}
.featured-list li {
  border: 1px solid var(--rule-col);
  border-left: 3px solid var(--link-col);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.9rem 1.1rem;
  background-color: var(--blockquote-bg);
}
.featured-list a {
  display: block;
  font-family: var(--header-font);
  font-weight: 600;
  color: var(--link-col);
  text-decoration: none;
  margin-bottom: 0.25rem;
}
.featured-list a:hover,
.featured-list a:focus {
  color: var(--hover-col);
}
.featured-list span {
  color: var(--mid-col);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
   17. Experiencia: areas (skills), linea de tiempo y proyectos
   --------------------------------------------------------------------------- */
.skills {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1rem 0 1.5rem;
}
.skill-group {
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .skill-group {
    grid-template-columns: 8.5rem 1fr;
    align-items: start;
  }
}
.skill-label {
  margin: 0;
  padding-top: 0.35rem;
  font-family: var(--header-font);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mid-col);
}
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}
.skill-tags li {
  font-size: 0.82rem;
  white-space: nowrap;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--tag-border);
  background-color: var(--tag-bg);
  color: var(--tag-text);
}
.timeline {
  margin: 1.25rem 0 0;
  padding: 0;
}
.timeline-item {
  position: relative;
  padding: 0 0 1.5rem 1.4rem;
  border-left: 2px solid var(--rule-col);
}
.timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -0.42rem;
  top: 0.3rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background-color: var(--link-col);
  box-shadow: 0 0 0 3px var(--page-col);
}
.tl-role {
  margin: 0 0 0.2rem;
  font-family: var(--header-font);
  font-weight: 600;
  color: var(--heading-strong);
}
.tl-meta {
  margin: 0 0 0.4rem;
  color: var(--mid-col);
  font-size: 0.9rem;
}
.tl-desc {
  margin: 0;
}
.projects {
  display: grid;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
@media (min-width: 720px) {
  .projects {
    grid-template-columns: 1fr 1fr;
  }
}
.project {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-col);
  border-radius: 0.5rem;
  padding: 1.1rem 1.25rem;
  background-color: var(--blockquote-bg);
}
.project-title {
  margin: 0 0 0.25rem;
  font-family: var(--header-font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--heading-strong);
}
.project-meta {
  margin: 0 0 0.6rem;
  color: var(--mid-col);
  font-size: 0.88rem;
}
.project-desc {
  margin: 0 0 1rem;
  flex-grow: 1;
}
.project-link {
  align-self: flex-start;
  font-family: var(--header-font);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--link-col);
  text-decoration: none;
  border: 1px solid var(--link-col);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.project-link:hover,
.project-link:focus {
  background-color: var(--link-col);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   18. Pagina Trabajemos juntos (contacto)
   --------------------------------------------------------------------------- */
.contact-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0 0.75rem;
}
.contact-note {
  color: var(--mid-col);
  font-size: 0.95rem;
}
.page-cta {
  margin-top: 1.5rem;
}
/* Testimonios en redonda; la cursiva venia del blockquote del tema */
.recommendation { font-style: normal; }