:root{
    --bg: #f7f6f3;
    --surface: #ffffff;
    --surface-2: #f1efeb;
    --hairline: #e6e3dd;
    --text: #18130f;
    --text-dim: #726c65;
    --accent: #e2131d;
    --accent-2: #a80d15;
    --accent-soft: rgba(226,19,29,0.18);
    --plate: #0c0c0c;
    --shadow: rgba(24,19,15,0.06);
    --shadow-lift: rgba(24,19,15,0.10);
  }

  *{ box-sizing:border-box; }

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .visually-hidden{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  html,body{
    margin:0;
    background:var(--bg);
    color:var(--text);
  }

  body{
    font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    padding:44px 20px 56px;
    display:flex;
    justify-content:center;
    -webkit-font-smoothing:antialiased;
  }

  .page{
    width:100%;
    max-width:520px;
    display:flex;
    flex-direction:column;
    gap:36px;
  }

  /* ---------- header ---------- */

  .header{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    position:relative;
    padding-top:6px;
  }

  .speedlines{
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    width:220px;
    height:80px;
    pointer-events:none;
    z-index:0;
  }

  .logo-wrap{
    position:relative;
    z-index:1;
    width:100%;
    max-width:300px;
  }

  .logo-plate{
    background:var(--plate);
    border-radius:14px;
    padding:22px 18px;
    box-shadow:0 10px 26px var(--shadow-lift);
  }

  .logo-wrap img{
    display:block;
    width:100%;
    height:auto;
  }

  .tagline{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-style:italic;
    font-size:15px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text-dim);
    margin:0;
  }

  .tagline em{
    color:var(--accent);
    font-style:italic;
  }

  .hero-desc{
    font-family:'IBM Plex Sans', sans-serif;
    font-size:13.5px;
    line-height:1.5;
    color:var(--text-dim);
    max-width:34ch;
    margin:2px 0 0;
  }

  .handle{
    font-family:'IBM Plex Sans', sans-serif;
    font-size:13px;
    color:var(--text-dim);
    margin:0;
  }

  /* ---------- section labels ---------- */

  .section{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .page > .section + .section{
    border-top:1px solid var(--hairline);
    padding-top:22px;
  }

  .section-head{
    display:flex;
    align-items:baseline;
    gap:10px;
  }

  .section-head .bar{
    width:18px;
    height:3px;
    background:var(--accent);
    flex:none;
    transform:skewX(-20deg);
  }

  .section-title{
    font-family:'Saira Condensed', sans-serif;
    font-weight:800;
    font-style:italic;
    font-size:20px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    margin:0;
  }

  .section-note{
    font-size:12.5px;
    color:var(--text-dim);
    margin:-4px 0 0;
    padding-left:28px;
  }

  /* ---------- search ---------- */

  .search-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }

  .search-icon{
    position:absolute;
    left:14px;
    width:17px;
    height:17px;
    color:var(--text-dim);
    pointer-events:none;
  }

  .search-icon svg{ width:100%; height:100%; display:block; }

  #shop-search{
    width:100%;
    background:var(--surface);
    border:1px solid var(--hairline);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:14px;
    padding:12px 14px 12px 40px;
    border-radius:4px;
    box-shadow:0 1px 3px var(--shadow);
    outline:none;
  }

  #shop-search::placeholder{ color:var(--text-dim); }

  #shop-search:focus{ border-color:var(--accent); }

  #shop-search::-webkit-search-cancel-button{ opacity:0.6; }

  .no-results{
    font-size:13px;
    color:var(--text-dim);
    text-align:center;
    padding:10px 0 2px;
  }

  /* ---------- guide text ---------- */

  .guide-details{
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:6px;
    box-shadow:0 1px 3px var(--shadow);
  }

  .guide-details summary{
    list-style:none;
    cursor:pointer;
    padding:13px 16px;
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .guide-details summary::-webkit-details-marker{ display:none; }

  .guide-details summary::after{
    content:"+";
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:600;
    font-size:16px;
    color:var(--accent);
    flex:none;
  }

  .guide-details[open] summary::after{ content:"–"; }

  .guide-details[open] summary{
    border-bottom:1px solid var(--hairline);
  }

  .guide-block{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px;
  }

  .guide-item h3{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:14.5px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--text);
    margin:0 0 3px;
  }

  .guide-item p{
    font-size:13px;
    line-height:1.55;
    color:var(--text-dim);
    margin:0;
    max-width:65ch;
  }

  .trust-note{
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-dim);
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:6px;
    padding:12px 14px;
    margin:0;
  }

  .guide-block p{
    font-size:13px;
    line-height:1.55;
    color:var(--text-dim);
    margin:0;
    max-width:65ch;
  }

  /* ---------- category groups ---------- */

  .category-group{
    display:flex;
    flex-direction:column;
    gap:9px;
    border-left:3px solid transparent;
    padding-left:14px;
    margin-left:-17px;
    scroll-margin-top:18px;
    transition:border-color 0.5s ease;
  }

  .category-group:target{
    border-color:var(--accent);
  }

  .category-title{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:16.5px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--text);
    margin:0;
    scroll-margin-top:18px;
  }

  .category-intro{
    font-size:13px;
    line-height:1.55;
    color:var(--text-dim);
    margin:0;
    max-width:65ch;
  }

  .category-intro a{ color:var(--accent); font-weight:600; }

  .compare-wrap{
    overflow-x:auto;
    border:1px solid var(--hairline);
    border-radius:6px;
    background:var(--surface);
    box-shadow:0 1px 3px var(--shadow);
  }

  .compare-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
  }

  .compare-table th, .compare-table td{
    padding:9px 12px;
    text-align:left;
  }

  .compare-table thead th{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:11px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--text-dim);
    border-bottom:1px solid var(--hairline);
    white-space:nowrap;
  }

  .compare-table tbody th{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
  }

  .compare-table tbody tr:not(:last-child) td,
  .compare-table tbody tr:not(:last-child) th{
    border-bottom:1px solid var(--hairline);
  }

  .compare-table td{
    color:var(--text-dim);
  }

  .compare-table td:last-child{
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--text);
    font-weight:600;
  }

  /* ---------- filter chips ---------- */

  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    position:sticky;
    top:0;
    z-index:5;
    background:var(--bg);
    padding:10px 0;
    border-bottom:1px solid var(--hairline);
  }

  .chip{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--text-dim);
    background:var(--surface);
    border:1px solid var(--hairline);
    padding:7px 14px;
    cursor:pointer;
    border-radius:20px;
    transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .chip:hover{ color:var(--text); border-color:#c9c4bc; }

  .chip.active{
    color:var(--bg);
    background:var(--accent);
    border-color:var(--accent);
  }

  /* ---------- product grid ---------- */

  .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
    gap:12px;
  }

  .product-card{
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--hairline);
    text-decoration:none;
    color:var(--text);
    overflow:hidden;
    border-radius:6px;
    box-shadow:0 1px 3px var(--shadow);
    transition:border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    position:relative;
  }

  .product-card:hover{ border-color:var(--accent); box-shadow:0 6px 16px var(--shadow-lift); }
  .product-card:active{ transform:scale(0.99); }

  .product-card:has(.pick-tag){
    border-color:var(--accent);
    box-shadow:0 4px 14px var(--shadow-lift);
  }

  .product-media{
    aspect-ratio:1.15/1;
    background:var(--surface-2);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  .icon-badge{
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--hairline);
    box-shadow:0 2px 6px var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .product-media .cat-tag{
    position:absolute;
    top:8px;
    left:8px;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:9.5px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text-dim);
    background:rgba(255,255,255,0.75);
    padding:3px 7px;
  }

  .product-media .pick-tag{
    position:absolute;
    top:8px;
    right:8px;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--accent);
    padding:3px 7px;
  }

  .product-media svg{
    width:24px;
    height:24px;
    color:var(--accent);
  }

  .product-body{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:11px 12px 13px;
    flex:1;
  }

  .product-name{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:14.5px;
    line-height:1.15;
    letter-spacing:0.01em;
    margin:0;
  }

  .product-spec{
    font-size:11.5px;
    line-height:1.35;
    color:var(--text-dim);
    margin:0;
    flex:1;
  }

  .product-foot{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
  }

  .product-price{
    font-size:11.5px;
    font-weight:600;
    color:var(--text);
    font-variant-numeric:tabular-nums;
  }

  .product-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:#fff;
    background:var(--accent);
    border-radius:5px;
    padding:8px 10px;
    transition:background 0.15s ease;
  }

  .product-card:hover .product-cta{ background:var(--accent-2); }

  .product-cta svg{ width:11px; height:11px; }

  .see-more-row{
    text-align:center;
  }

  .see-more{
    font-size:12.5px;
    color:var(--text-dim);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }

  .see-more:hover{
    color:var(--accent);
    border-bottom-color:var(--accent);
  }

  /* ---------- social row ---------- */

  .social-row{
    display:flex;
    gap:10px;
  }

  .social-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:6px;
    padding:14px 8px;
    text-decoration:none;
    color:var(--text);
    box-shadow:0 1px 3px var(--shadow);
    transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  }

  .social-btn:hover{
    background:var(--surface-2);
    border-color:var(--accent);
    box-shadow:0 6px 16px var(--shadow-lift);
  }

  .social-btn:active{ transform:scale(0.98); }

  .social-btn .icon{
    width:22px;
    height:22px;
    color:var(--accent);
  }

  .social-btn .icon svg{ width:100%; height:100%; display:block; }

  .social-btn .platform{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:13px;
    letter-spacing:0.02em;
    text-transform:uppercase;
  }

  /* ---------- link buttons ---------- */

  .links{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .link-btn{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-left:3px solid var(--accent);
    padding:14px 18px;
    text-decoration:none;
    color:var(--text);
    border-radius:0 6px 6px 0;
    transition:background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  }

  .link-btn:hover{
    background:var(--surface-2);
    border-left-color:var(--accent);
  }

  .link-btn:active{
    transform:scale(0.99);
  }

  .link-btn .icon{
    flex:none;
    width:22px;
    height:22px;
    color:var(--accent);
  }

  .link-btn .icon svg{
    width:100%;
    height:100%;
    display:block;
  }

  .link-btn .label-group{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px;
  }

  .link-btn .platform{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-size:16.5px;
    letter-spacing:0.02em;
    text-transform:uppercase;
  }

  .link-btn .sub{
    font-size:12.5px;
    color:var(--text-dim);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .link-btn .arrow{
    flex:none;
    width:16px;
    height:16px;
    color:var(--text-dim);
  }

  .link-btn .arrow svg{ width:100%; height:100%; display:block; }

  /* ---------- footer ---------- */

  footer{
    text-align:center;
    padding-top:8px;
  }

  footer p{
    font-family:'Saira Condensed', sans-serif;
    font-weight:700;
    font-style:italic;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-dim);
    margin:0;
  }

  footer p span{ color:var(--accent); }

  .footer-nav{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-bottom:10px;
  }

  .footer-nav a{
    font-family:'IBM Plex Sans', sans-serif;
    font-size:12px;
    font-weight:600;
    color:var(--text-dim);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }

  .footer-nav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

  .back-to-top{
    position:fixed;
    right:18px;
    bottom:18px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--plate);
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 16px var(--shadow-lift);
    cursor:pointer;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    z-index:20;
  }

  .back-to-top.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .back-to-top svg{ width:18px; height:18px; display:block; }

  @media (prefers-reduced-motion: reduce){
    .back-to-top{ transition:none; }
  }

  .footer-copy{
    font-family:'IBM Plex Sans', sans-serif;
    font-style:normal;
    font-size:11px;
    letter-spacing:0;
    text-transform:none;
    color:var(--text-dim);
    margin:6px 0 0;
    opacity:0.85;
  }

  .link-btn{ position:relative; overflow:hidden; }

  .link-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, transparent 30%, rgba(226,19,29,0.07) 45%, transparent 60%);
    transform:translateX(-120%);
    transition:transform 0.55s ease;
    pointer-events:none;
  }

  .link-btn:hover::after{
    transform:translateX(120%);
  }

  .logo-wrap{ position:relative; }

  .logo-glow{
    position:absolute;
    inset:-30% -10%;
    background:radial-gradient(closest-side, var(--accent-soft), transparent 70%);
    z-index:0;
    opacity:0.7;
  }

  .reveal{
    opacity:0;
    transform:translateY(14px);
    animation:revealUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
  }

  /* ---------- trust bar ---------- */

  .trust-bar{
    display:flex;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:8px;
    box-shadow:0 1px 3px var(--shadow);
    overflow:hidden;
  }

  .trust-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    padding:14px 6px;
    border-right:1px solid var(--hairline);
  }

  .trust-item:last-child{ border-right:none; }

  .trust-item span{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.01em;
    color:var(--text-dim);
    line-height:1.3;
  }

  .trust-icon{
    flex:none;
    width:20px;
    height:20px;
    color:var(--accent);
  }

  .trust-icon svg{ width:100%; height:100%; display:block; }

  .header.reveal{ animation-delay:0.02s; }
  .trust-bar.reveal{ animation-delay:0.08s; }
  .section.reveal:nth-of-type(1){ animation-delay:0.14s; }
  .section.reveal:nth-of-type(2){ animation-delay:0.24s; }
  .section.reveal:nth-of-type(3){ animation-delay:0.32s; }
  .section.reveal:nth-of-type(4){ animation-delay:0.38s; }
  footer.reveal{ animation-delay:0.46s; }

  @keyframes revealUp{
    to{ opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion: reduce){
    .link-btn{ transition:none; }
    .link-btn::after{ display:none; }
    .reveal{ animation:none; opacity:1; transform:none; }
  }
  /* A partir de tablet/escritorio esto deja de comportarse como una tarjeta
     de "link in bio" ampliada y pasa a ser el diseño de una web normal:
     cabecera tipo hero en dos columnas, y el catálogo usando el ancho real
     en una cuadrícula de varias columnas. Por debajo de este punto de corte
     se mantiene igual, pensado para el tráfico móvil desde redes sociales. */
  @media (min-width:820px){
    body{ padding:48px 32px 72px; }

    .page{
      max-width:1120px;
      margin:0 auto;
      gap:44px;
    }

    /* ---- cabecera tipo hero, dos columnas ---- */
    .header{
      display:grid;
      grid-template-columns:minmax(220px,320px) 1fr;
      grid-template-areas:
        "logo tagline"
        "logo desc"
        "logo handle";
      align-items:center;
      column-gap:44px;
      row-gap:8px;
      text-align:left;
      background:var(--surface);
      border:1px solid var(--hairline);
      border-radius:18px;
      padding:44px 52px;
      box-shadow:0 16px 40px rgba(24,19,15,0.07);
    }

    .speedlines{
      top:14px;
      left:44px;
      transform:none;
    }

    .logo-wrap{ grid-area:logo; max-width:none; width:100%; align-self:center; }
    .tagline{ grid-area:tagline; align-self:end; font-size:21px; }
    .hero-desc{ grid-area:desc; align-self:start; font-size:16px; max-width:52ch; margin-top:6px; }
    .handle{ grid-area:handle; align-self:start; font-size:14px; }

    /* ---- barra de confianza, franja compacta centrada ---- */
    .trust-bar{ max-width:820px; margin:0 auto; }
    .trust-item{ padding:18px 10px; }
    .trust-item span{ font-size:11.5px; }

    /* ---- síguenos: fila compacta de botones, no tarjetas gigantes ---- */
    .social-row{ justify-content:flex-start; gap:12px; }
    .social-btn{ flex:none; width:150px; padding:16px 12px; }

    /* ---- títulos y navegación de categorías ---- */
    .section-title{ font-size:23px; }
    .section-note{ font-size:13px; }

    .chip-row{ gap:10px; padding:16px 0; }
    .chip{ font-size:14px; padding:8px 16px; }

    .category-intro{ font-size:14px; max-width:80ch; }

    /* ---- catálogo: cuadrícula real de varias columnas ---- */
    .product-grid{
      grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
      gap:20px;
    }

    .compare-table{ font-size:13.5px; }
    .compare-table th, .compare-table td{ padding:11px 16px; }
  }

/* ---------- páginas de guías / artículos ---------- */

.guide-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:8px;
}

.guide-logo{ display:block; width:120px; flex:none; }
.guide-logo img{ display:block; width:100%; height:auto; border-radius:8px; }

.guide-back{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.guide-back:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.guide-crumbs{
  font-size:12px;
  color:var(--text-dim);
  margin:0;
}
.guide-crumbs a{ color:var(--text-dim); }
.guide-crumbs a:hover{ color:var(--accent); }

.guide-hero{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.guide-kicker{
  font-family:'Saira Condensed', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}

.guide-h1{
  font-family:'Saira Condensed', sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:28px;
  line-height:1.15;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0;
}

.guide-dek{
  font-size:15px;
  line-height:1.55;
  color:var(--text-dim);
  margin:0;
  max-width:70ch;
}

.guide-meta{
  font-size:12px;
  color:var(--text-dim);
  margin:0;
}

article.guide-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:14.5px;
  line-height:1.65;
}

article.guide-body h2{
  font-family:'Saira Condensed', sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:22px 0 0;
}

article.guide-body h3{
  font-family:'Saira Condensed', sans-serif;
  font-weight:700;
  font-size:15.5px;
  letter-spacing:0.01em;
  margin:6px 0 0;
}

article.guide-body p{ margin:0; max-width:75ch; }
article.guide-body ul, article.guide-body ol{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; max-width:75ch; }
article.guide-body li{ line-height:1.55; }
article.guide-body a{ color:var(--accent); font-weight:600; }
article.guide-body strong{ color:var(--text); }

.callout{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;
  padding:14px 18px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-dim);
}
.callout strong{ color:var(--text); }

.related-block{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:8px;
}

.related-title{
  font-family:'Saira Condensed', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin:0;
}

.guide-nav-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

@media (min-width:820px){
  .guide-topbar{ padding-bottom:4px; }
  .guide-h1{ font-size:36px; }
  .guide-dek{ font-size:16.5px; max-width:65ch; }
  article.guide-body{ font-size:15.5px; }
  article.guide-body h2{ font-size:22px; margin-top:30px; }
  .guide-nav-grid{ grid-template-columns:1fr 1fr; }
}