/* Acrocode: hierarchy and reading surfaces. No new visual libraries. */
@media screen {
  :root { --text-muted: #9aaebc; --content-width: 1160px; }
  body.animated-grid { animation: none; }
  /* Keep the space scene visible; reading surfaces live on the cards. */
  #tron-canvas { opacity: .9 !important; }
  .container { max-width: var(--content-width); padding-inline: clamp(20px, 3.5vw, 40px); }
  .section { padding-block: clamp(48px, 6vw, 80px); background: rgba(5, 12, 18, .18); border-color: rgba(151, 190, 208, .1); }
  .section:nth-of-type(even) { background: rgba(9, 18, 25, .28); }
  .section[id] { scroll-margin-top: 88px; }
  .hero { padding: clamp(64px, 8vw, 104px) 0 48px; }
  .hero::before { opacity: .45; }
  .hero h1 { max-width: 860px; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.2; letter-spacing: .005em; margin-bottom: 24px; text-wrap: balance; }
  .hero-subtitle { max-width: 64ch; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: #c1d2dc; margin-bottom: 30px; }
  .hero-tag { margin-bottom: 24px; padding: 7px 0; background: none; border: 0; letter-spacing: .07em; font-size: 10px; flex-wrap: wrap; }
  .hero-actions { gap: 12px; margin-bottom: 36px; flex-wrap: wrap; }
  .hero-stats { gap: 0; padding-top: 24px; border-color: rgba(151, 190, 208, .15); }
  .hero-stats .stat { padding: 14px 24px; background: rgba(5, 12, 18, .75); border: 0; box-shadow: none; text-align: left; }
  .hero-stats .stat + .stat { border-left: 1px solid rgba(151, 190, 208, .15); }
  .hero-stats .stat::before, .hero-stats .stat::after { display: none; }
  .hero-stats .stat-number { font-size: clamp(23px, 2.4vw, 30px); text-shadow: none; line-height: 1.3; margin-bottom: 9px; }
  .hero-stats .stat-label { font-family: var(--font-body); font-size: 13px; line-height: 1.6; letter-spacing: .01em; text-transform: none; color: #aebfcc; max-width: 29ch; }
  .section-label { font-size: 10px; letter-spacing: .09em; margin-bottom: 16px; text-shadow: none; border-color: var(--cyan-deep); }
  .section-title { max-width: 850px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; letter-spacing: .005em; text-wrap: balance; }
  .section-sub { max-width: 70ch; font: 16px/1.75 var(--font-body); color: #aabfcd; margin-top: 12px; margin-bottom: 32px; }
  .section h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.25; max-width: 940px; text-wrap: balance; }
  .section h1 + p, .section h1 ~ p { line-height: 1.75; max-width: 72ch; }
  .hero .pulse-glow, .section .pulse-glow { animation: none; text-shadow: 0 0 18px rgba(0, 217, 255, .08); }
  .btn { min-height: 44px; padding: 13px 23px; border-width: 1px; border-radius: 6px; letter-spacing: .045em; transition: background .18s, border-color .18s, color .18s; }
  .btn-primary { box-shadow: none; }
  .btn-primary:hover, .btn-ghost:hover { box-shadow: none; }
  .btn-ghost { background: rgba(8, 17, 24, .7); border-color: #304653; }
  :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--cyan-primary); outline-offset: 4px; }
  .card, .service-card, .process-step, .post-card, .project-card, .client-card {
    border-color: #233641; border-radius: 10px; background: rgba(10, 21, 29, .96);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  }
  .card:hover, .service-card:hover, .process-step:hover, .post-card:hover, .project-card:hover, .client-card:hover {
    border-color: #417083; box-shadow: none; transform: translateY(-2px);
  }
  .service-card.hud-corners::before, .service-card.hud-corners::after,
  .process-step.hud-corners::before, .process-step.hud-corners::after,
  .resource-card.hud-corners::before, .resource-card.hud-corners::after,
  .post-card::before, .project-card::before { display: none; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
  .service-card { padding: 28px; gap: 14px; }
  .service-icon { width: 40px; height: 40px; border: 0; border-radius: 8px; text-shadow: none; font-size: 20px; }
  .service-card h3 { font-family: var(--font-body); font-size: 22px; text-transform: none; letter-spacing: 0; min-height: 0; }
  .service-card p { font-size: 15px; line-height: 1.75; min-height: 0; flex-grow: 1; }
  .service-card .service-list { font-family: var(--font-body); font-size: 14px; gap: 5px; margin-top: 4px; }
  .process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .process-step { padding: 24px 20px; }
  .process-step .step-number { font-size: 24px; text-shadow: none; margin-bottom: 18px; }
  .process-step h4 { font-family: var(--font-body); font-size: 18px; line-height: 1.4; text-transform: none; letter-spacing: 0; }
  .process-step p { font-size: 14px; line-height: 1.7; }
  .client-card h3, .post-card h3, .resource-card h3 { font-family: var(--font-body); font-size: 20px; line-height: 1.35; text-transform: none; letter-spacing: 0; }
  .client-card-desc, .post-card-content p { line-height: 1.7; color: #b2c2ce; }
  .client-card-body, .post-card-content { padding: 24px; }
  .posts-grid, .resources-grid, .clients-grid:not(.clients-grid--carousel) { gap: 24px; }
  .resources-controls { padding: 18px; background: #0b1922; border: 1px solid #233641; border-radius: 10px; gap: 12px; }
  .form-control, input[type="search"] { border-radius: 6px; }
  .cta-final { padding: 64px 20px; background: rgba(4, 12, 19, .22); }
  .cta-final .section-title { margin-inline: auto; max-width: 800px; }
  .cta-final p { color: #b8ccd8; font-size: 17px; }
  .reveal-item { transition-duration: .45s; transform: translateY(18px); }
  .reveal-item.from-left, .reveal-item.from-right, .reveal-item.zoom { transform: translateY(18px); }
  .reveal-item.in-view { transform: none; will-change: auto; }
  .vignette-overlay { background: radial-gradient(ellipse 90% 80% at 70% 32%, transparent 45%, rgba(0, 5, 10, .2)); }

  /* Primary destinations stay visible; exploration is a native disclosure. */
  .site-navigation { min-height: 72px; padding: 12px max(24px, calc((100vw - 1260px) / 2)); gap: 24px; background: #08151e; border-bottom: 1px solid rgba(156, 219, 239, .24); box-shadow: inset 0 1px 0 rgba(221, 248, 255, .08), 0 5px 20px rgba(0, 0, 0, .2); }
  .site-navigation-spacer { height: 72px; }
  .site-navigation::after { opacity: .22; }
  .nav-logo { white-space: nowrap; font-size: 16px; gap: 0 !important; }
  .nav-links { gap: 18px; margin: 0; }
  .nav-links a, .nav-explore > summary { font-family: var(--font-body); font-size: 14px; letter-spacing: .025em; text-transform: none; font-weight: 500; color: #bfced8; }
  .nav-links a:hover, .nav-links a.active { text-shadow: none; }
  .nav-links a::after { height: 1px; box-shadow: none; }
  .nav-links .nav-contact-link { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 15px; border: 1px solid #387387; border-radius: 6px; color: var(--cyan-ice); }
  .nav-links .nav-contact-link::after { display: none; }
  .nav-search { margin-left: 0 !important; }
  .nav-search form { height: 40px; border-radius: 6px; border-color: #233641; }
  .nav-search input { width: 100px; }
  .nav-search button { min-width: 38px; border-left: 0; }
  .nav-links .nav-admin-link { opacity: .85; }
  .nav-explore { position: relative; }
  .nav-explore > summary { cursor: pointer; list-style: none; padding: 10px 0; display: flex; align-items: center; gap: 8px; }
  .nav-explore > summary::-webkit-details-marker { display: none; }
  .nav-explore > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
  .nav-explore[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
  .nav-explore[open] > summary, .nav-explore.has-active-link > summary { color: var(--cyan-primary); }
  .nav-explore-links { position: absolute; top: calc(100% + 10px); left: -20px; min-width: 205px; padding: 9px; list-style: none; background: #0c1923; border: 1px solid #304957; border-radius: 10px; box-shadow: 0 14px 35px rgba(0,0,0,.35); }
  .nav-explore-links a { display: block; padding: 11px 12px; border-radius: 5px; white-space: nowrap; }
  .nav-explore-links a:hover, .nav-explore-links a.active { background: #132e3b; }
  .nav-explore-links a::after { display: none; }
  .mobile-menu-btn { display: none; }
  /* Sólo existen en la versión móvil (ver el bloque de 1080px). */
  .nav-float-btn, .nav-backdrop { display: none; }
}
/* Glass is reserved for navigation and the compact resource toolbar. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen {
    .site-navigation {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .site-navigation::before {
      content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: linear-gradient(115deg, rgba(168, 228, 249, .07), transparent 55%), rgba(5, 16, 24, .68);
      backdrop-filter: blur(12px) saturate(115%);
      -webkit-backdrop-filter: blur(12px) saturate(115%);
    }
    .nav-explore-links {
      background: linear-gradient(135deg, rgba(168, 228, 249, .06), transparent 65%), rgba(9, 24, 34, .88);
      border-color: rgba(156, 219, 239, .26);
      box-shadow: inset 0 1px 0 rgba(221, 248, 255, .08), 0 14px 35px rgba(0, 0, 0, .28);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .resources-controls {
      background: linear-gradient(115deg, rgba(168, 228, 249, .04), transparent 55%), rgba(9, 24, 34, .82);
      border-color: rgba(156, 219, 239, .2);
      box-shadow: inset 0 1px 0 rgba(221, 248, 255, .06);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
  }
  @media screen and (max-width: 1080px) {
    .site-navigation::before { background-color: rgba(5, 16, 24, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .nav-explore-links { backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
}
@media screen and (prefers-reduced-transparency: reduce) {
  .site-navigation, .nav-explore-links, .resources-controls { background: #0b1922; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-navigation::before { display: none; }
}
@media screen and (min-width: 800px) {
  .resources-grid:has(> .resource-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 641px) and (max-width: 768px) {
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; max-width: none; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-stats .stat { padding-inline: 12px; }
}
@media screen and (max-width: 1080px) {
  .site-navigation { --nav-pad: 24px; flex-wrap: wrap; padding: 12px var(--nav-pad); min-height: 64px; gap: 0; }
  .site-navigation-spacer { height: 64px; }
  .mobile-menu-btn { display: block !important; margin-left: auto; min-height: 40px; min-width: 44px; }

  /* Panel del menú: fondo sólido de borde a borde, para que no se lea encima de la página. */
  .nav-links {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    width: calc(100% + var(--nav-pad) * 2); flex: 0 0 auto;
    margin: 12px calc(var(--nav-pad) * -1) 0; padding: 14px var(--nav-pad) 18px;
    max-height: calc(100dvh - 92px); overflow-y: auto;
    background: #061219; border-top: 1px solid #1d3340;
  }
  .nav-links.mobile-open { display: flex !important; }
  .nav-links > li { width: 100%; border: 0; text-align: left; }

  /* Cada destino es una fila alta y con estado propio; el activo lleva barra lateral. */
  .nav-links li > a:not(.nav-admin-link), .nav-explore > summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 12px 14px; border-radius: 8px;
    font-size: 15px; letter-spacing: .015em; color: #cddfea;
  }
  .nav-links li > a:not(.nav-admin-link)::after { display: none; }
  .nav-links li > a.active { color: var(--cyan-primary); background: #0e2a38; box-shadow: inset 3px 0 0 var(--cyan-primary); }
  .nav-links li > a:not(.nav-admin-link):hover, .nav-explore > summary:hover { background: #0e2331; }

  /* Explorar: sección desplegable con sus destinos colgando de una guía vertical. */
  .nav-explore > summary { justify-content: space-between; }
  .nav-explore > summary::after { margin: 0; }
  .nav-explore[open] > summary { background: #0e2331; }
  .nav-explore-links {
    position: static; min-width: 0; margin: 2px 0 6px 14px; padding: 2px 0 2px 12px;
    background: none; border: 0; border-left: 1px solid #1f3d4c; border-radius: 0; box-shadow: none;
  }
  .nav-explore-links li { border: 0; }
  .nav-explore-links a { white-space: normal; }

  /* Contacto cierra la lista como acción principal. */
  .nav-links .nav-contact-link {
    justify-content: center; margin: 14px 0 2px; border: 0; border-radius: 8px;
    background: #65d7f2; color: #06131b !important; font-weight: 700;
  }
  .nav-links .nav-contact-link:hover { background: #83e3f8; color: #06131b !important; }

  /* Buscar encabeza el panel; el acceso al portal queda al final y discreto. */
  .nav-search { order: -1; margin: 0 0 10px !important; padding-top: 0; }
  .nav-search form { width: 100%; height: 46px; }
  .nav-search input { width: 100%; min-width: 0; flex: 1; font-size: 16px; }
  .nav-search button { min-width: 46px; }
  .nav-admin-item { order: 3; margin-top: 12px; padding-top: 12px; border-top: 1px solid #172d39; }
  .nav-admin-label { display: inline; margin-left: 8px; }
  .nav-links .nav-admin-link {
    display: flex; align-items: center; min-height: 44px; padding: 10px 14px;
    border: 0; border-radius: 8px; color: #90b4c6 !important; font-size: 13px; opacity: 1;
  }
  .nav-links .nav-admin-link:hover { background: #0e2331; color: #bfe6f4 !important; }

  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(3, 10, 16, .74); }
  body.nav-mobile-open { overflow: hidden; }

  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
  .container { padding-inline: 20px; }
  .hero { padding: 48px 0 32px; }
  .hero h1 { font-size: clamp(29px, 8vw, 36px); }
  .hero-tag { line-height: 1.8; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { max-width: none; width: 100%; padding: 13px 18px; }
  .hero-stats { grid-template-columns: 1fr; padding-top: 12px; }
  .hero-stats .stat { padding: 18px 0; }
  .hero-stats .stat + .stat { border-left: 0; border-top: 1px solid #233641; }
  .hero-stats .stat-label { max-width: none; }
  .services-grid, .process-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .service-card, .process-step { padding: 24px; }
  .section { padding-block: 48px; }
  .section-title { font-size: 24px; }
  .site-navigation { padding-inline: 20px; }
  .nav-logo { font-size: 15px; }
}

/* PAGE CLARITY EXTENSION */
/* Page-specific reading surfaces override legacy inline presentation only. */
@media screen {
  input[type="number"] { color-scheme: dark; }
  input[type="number"]::-webkit-inner-spin-button { opacity: .8; cursor: pointer; }
  input[type="number"]:hover::-webkit-inner-spin-button,
  input[type="number"]:focus::-webkit-inner-spin-button { opacity: 1; }
  /* A decorative DOS prompt: stays outside the value and placeholder. */
  input:is(:not([type]), [type="text"], [type="email"], [type="search"], [type="tel"], [type="url"], [type="password"], [type="number"]):not([readonly]),
  textarea:not([readonly]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M3 3 8 8 3 13' fill='none' stroke='%235bd3f0' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 14px 16px !important;
    padding-left: 36px !important;
    caret-color: #5bd3f0;
  }
  textarea:not([readonly]) { background-position: 13px 15px !important; }
  /* The interactive console already supplies its full prompt. */
  #terminal-input { background-image: none !important; padding-left: 0 !important; }
  .post-card-image { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .post-card-image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
  .clarity-blog .posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clarity-blog .post-card { min-width: 0; }
  .clarity-blog .post-card-content { padding: 22px; }
  .clarity-blog .post-card h3 { font-size: 20px; line-height: 1.4; }
  .clarity-blog form input { min-width: 0; }
  .nav-search form { border-radius: 8px; overflow: hidden; }
  .nav-search form:focus-within { border-color: var(--cyan-primary); box-shadow: 0 0 0 1px rgba(95, 216, 247, .3); }
  .nav-search input, .nav-search input:focus, .nav-search input:focus-visible { outline: none; outline-offset: 0; border: 0; border-radius: 0; box-shadow: none; height: 100%; background: transparent; }
  .nav-search button:focus-visible { outline-offset: -5px; border-radius: 6px; }
  .clarity-page { padding-top: 60px; animation: none; opacity: 1; transform: none; }
  .clarity-page [hidden], .cv-section-nav[hidden] { display: none !important; }
  .clarity-page > .container > div:has(> h1) { margin-bottom: 32px !important; }
  .clarity-page h1 + p { font: 17px/1.7 var(--font-body) !important; color: #b2c6d3 !important; margin-top: 16px !important; max-width: 72ch; }
  .clarity-page .form-control, .home-newsletter .form-control { min-height: 46px; font: 16px var(--font-body); background: #08121b; border-color: #354b5b; color: #e4f0f7; }
  .clarity-page .form-control::placeholder, .home-newsletter .form-control::placeholder { color: #91a7b7; opacity: 1; }
  .clarity-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .clarity-field label, .faq-tools > label, .search-panel > label, .home-newsletter-form > label { display: block; font: 500 14px/1.5 var(--font-body) !important; color: #c1d3df !important; }
  .catalog-status { font: 14px/1.6 var(--font-body); color: #a7bdcb; margin: 14px 0 20px; }
  .clarity-reset { font: 500 14px var(--font-body); text-transform: none; letter-spacing: 0; min-height: 44px; }
  .clarity-page .card.hud-corners::before, .clarity-page .card.hud-corners::after,
  .home-newsletter.hud-corners::before, .home-newsletter.hud-corners::after { display: none; }

  /* Newsletter: one quiet card and a clearly labelled form. */
  .home-newsletter.card { max-width: none !important; margin-top: 48px !important; padding: 32px !important; background: rgba(10, 23, 32, .96) !important; border: 1px solid #2c4657 !important; border-radius: 12px; box-shadow: none !important; }
  .home-newsletter.card:hover { transform: none; }
  .home-newsletter-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr) !important; gap: 40px !important; align-items: start !important; }
  .home-newsletter-copy h3 { font: 600 clamp(24px, 2.5vw, 30px)/1.3 var(--font-body) !important; letter-spacing: 0; text-transform: none; }
  .home-newsletter-copy p { color: #afc4d2 !important; line-height: 1.75 !important; max-width: 44ch; }
  .home-newsletter-form { gap: 10px !important; }
  .home-newsletter-form-wrap > p { font: 13px/1.6 var(--font-body) !important; color: #a7bdcb !important; }
  .home-newsletter-form .btn { margin-top: 6px; }

  /* About: profile, section shortcuts and a calm reading column. */
  .clarity-about .about-hero { border: 1px solid #2c4657; border-radius: 12px; padding: 32px; gap: 32px; background: rgba(10, 23, 32, .94); backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: 24px; }
  .clarity-about .about-hero::before, .clarity-about .about-hero::after, .clarity-about .about-avatar::after { display: none; }
  .clarity-about .about-avatar img { border-width: 2px; box-shadow: none; }
  .clarity-about .about-hero h1 { margin-bottom: 12px; text-align: left; }
  .clarity-about .about-hero-role { font: 500 17px/1.5 var(--font-body); text-transform: none; letter-spacing: 0; margin-block: 14px; }
  .clarity-about .chip { font: 13px/1.5 var(--font-body); border: 0; padding: 4px 0; background: none; }
  .clarity-about .about-chips { column-gap: 18px; row-gap: 4px; }
  .clarity-about .about-toggle { border-radius: 8px; padding: 4px; gap: 4px; border-color: #2c4657; margin-bottom: 28px; }
  .clarity-about .about-toggle button { font: 500 14px var(--font-body); text-transform: none; letter-spacing: 0; border: 0; border-radius: 5px; min-height: 44px; padding: 10px 16px; }
  .clarity-about .about-toggle button.active { background: #173b4c; color: #a8eaff; box-shadow: none; }
  .clarity-about .about-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; }
  .clarity-about .about-grid > div { min-width: 0; }
  .clarity-about #traditional-cv-view { gap: 20px !important; margin-top: 20px !important; }
  .clarity-about #traditional-cv-view > .card, .clarity-about .about-sidebar-sticky > .card, .clarity-about #terminal-card, .clarity-about #terminal-shortcuts { background: rgba(10, 23, 32, .96) !important; border: 1px solid #2c404f !important; box-shadow: none !important; border-radius: 12px !important; padding: 28px !important; }
  .clarity-about #terminal-card { padding: 0 !important; overflow: hidden; }
  .clarity-about #traditional-cv-view > .card { scroll-margin-top: 96px; }
  .clarity-about #traditional-cv-view > .card:hover, .clarity-about .about-sidebar-sticky .card:hover { transform: none !important; }
  .clarity-about #traditional-cv-view > .card > h3 { font: 600 23px/1.35 var(--font-body) !important; text-transform: none; letter-spacing: 0; color: #e4f0f7 !important; border: 0 !important; padding-bottom: 0 !important; margin-bottom: 20px !important; }
  .clarity-about #traditional-cv-view > .card > h3 i { color: #73cee9; font-size: 18px; }
  .clarity-about #traditional-cv-view :is(p, li) { font: 16px/1.8 var(--font-body) !important; color: #bed0dc; }
  .clarity-about #traditional-cv-view .cv-html-content h3 { font: 600 18px/1.5 var(--font-body) !important; text-transform: none; letter-spacing: 0; }
  .cv-section-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .cv-section-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; background: #101f2a; border: 1px solid #294353; border-radius: 6px; font: 14px var(--font-body); color: #bfdae8; }
  .cv-section-nav a:hover { background: #173b4c; }
  .clarity-about .about-sidebar-sticky { top: 96px; }
  .clarity-about .social-grid a { border-radius: 6px; box-shadow: none; }
  .clarity-about .footer-heading { font: 600 16px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }

  /* Resource directory: search first, compact recommendations, calmer actions. */
  .clarity-resources .resources-controls { display: flex; flex-direction: column; align-items: stretch; padding: 24px; gap: 16px; margin-bottom: 30px; }
  .clarity-resources #resources-search { width: 100%; min-width: 0; }
  .clarity-resources .resources-chips { gap: 8px; }
  .clarity-resources .resources-chips .btn { min-height: 40px; padding: 8px 12px; font: 500 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; border-radius: 6px; }
  .clarity-resources .resources-controls .clarity-reset { align-self: flex-start; }
  .clarity-resources .resource-featured { margin-bottom: 32px !important; }
  .clarity-resources .resource-featured .resources-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px; }
  .clarity-resources .resource-card { padding: 22px; gap: 12px; min-width: 0; border-radius: 12px; }
  .clarity-resources .resource-card-head { align-items: flex-start; }
  .clarity-resources .resource-card h3 { font: 600 20px/1.4 var(--font-body); }
  .clarity-resources .resource-featured .resource-card { padding: 18px; }
  .clarity-resources .resource-featured h3 { font-size: 17px; }
  .clarity-resources .resource-card .tag { align-self: flex-start; max-width: 100%; white-space: normal; border: 0; padding: 0; background: none; color: #91b8cd; font: 12px/1.5 var(--font-body); text-transform: none; letter-spacing: 0; }
  .clarity-resources .resource-card-desc { color: #afc4d2; font: 15px/1.7 var(--font-body); }
  .clarity-resources .resource-featured .resource-card-desc { font-size: 14px; }
  .clarity-resources .resource-card > .btn { padding: 10px 0; background: none; border: 0; color: #7bd8f3; font: 600 14px var(--font-body); text-transform: none; letter-spacing: 0; min-height: 44px; }
  .clarity-resources .resource-card > .btn:hover { color: #dcf8ff; text-decoration: underline; }
  .clarity-resources #resources-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

  /* FAQ: a searchable list with quiet dividers and readable answers. */
  .clarity-faq > .container { max-width: 960px !important; }
  .faq-tools { margin-bottom: 28px; }
  .faq-tools input { margin-top: 8px; width: 100%; }
  .faq-tools .catalog-status { margin-bottom: 8px; }
  .clarity-faq .faq-list { gap: 12px; }
  .clarity-faq .faq-item { background: rgba(10, 23, 32, .96); border: 1px solid #294150; border-radius: 10px; box-shadow: none; }
  .clarity-faq .faq-item::before, .clarity-faq .faq-item::after { display: none; }
  .clarity-faq .faq-item[open] { background: #102431; border-color: #47748a; }
  .clarity-faq .faq-question { padding: 22px 24px; gap: 16px; font: 600 18px/1.5 var(--font-body); color: #d8e8f1; text-transform: none; letter-spacing: 0; }
  .clarity-faq .faq-num { font-size: 12px; color: #739bae; min-width: 20px; }
  .clarity-faq .faq-chevron { font-size: 12px; }
  .clarity-faq .faq-answer { padding: 0 56px 24px 60px; }
  .clarity-faq .faq-answer p { font: 16px/1.8 var(--font-body); color: #bed0dc; }
  .clarity-faq > .container > .text-center { margin-top: 32px !important; padding: 28px; background: rgba(10, 23, 32, .94); border: 1px solid #294150; border-radius: 12px; }

  /* Radar: a focused dashboard with compact metrics and clear table controls. */
  .clarity-radar .radar-tabs { display: inline-flex !important; border: 1px solid #2b4657 !important; border-radius: 9px; padding: 5px !important; gap: 5px !important; background: #0b1c27; margin-bottom: 26px !important; }
  .clarity-radar .radar-tabs .btn { min-height: 44px; font: 500 15px/1.4 var(--font-body) !important; padding: 11px 18px !important; text-transform: none; letter-spacing: 0; }
  .clarity-radar .arena-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: rgba(10, 23, 32, .95); border: 1px solid #294150; border-radius: 10px; margin: 20px 0 24px; }
  .clarity-radar .arena-stats .stat { padding: 20px; text-align: left; background: none; border: 0; box-shadow: none; }
  .clarity-radar .arena-stats .stat + .stat { border-left: 1px solid #294150; }
  .clarity-radar .arena-stats .stat::before, .clarity-radar .arena-stats .stat::after { display: none; }
  .clarity-radar .arena-stats .stat-number { font-size: 27px; text-shadow: none; margin-bottom: 8px; }
  .clarity-radar .arena-stats .stat-label { font: 14px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; color: #a9c0cd; }
  .clarity-radar .arena-controls { grid-template-columns: 2fr 1fr 1fr; padding: 22px; gap: 16px; background: rgba(10, 23, 32, .96); border: 1px solid #294150; border-radius: 10px; }
  .clarity-radar .arena-controls:has(#aa-search) { grid-template-columns: 2fr 1fr; }
  .clarity-radar .arena-controls .form-control { width: 100%; min-width: 0; }
  .radar-selection { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0; font: 14px/1.5 var(--font-body); color: #b4d0df; }
  .radar-selection .btn { font: 500 14px var(--font-body); text-transform: none; letter-spacing: 0; }
  .clarity-radar .arena-table-wrap { border-radius: 10px; max-height: min(62vh, 580px); background: #0b1822; }
  .clarity-radar .arena-table-wrap:hover { transform: none; border-color: #294150; }
  .clarity-radar .arena-table { min-width: 820px; }
  .clarity-radar .arena-table th { background: #142a38; font: 600 13px/1.5 var(--font-body); text-transform: none; letter-spacing: 0; color: #c6e5f4; padding: 16px; border-color: #294150; }
  .clarity-radar .arena-table td { padding: 16px; border-color: #1c303e; }
  .clarity-radar .arena-table tbody tr:nth-child(even) { background: rgba(36, 68, 85, .13); }
  .clarity-radar .arena-table tbody tr:hover { background: #142f3e; }
  .clarity-radar .arena-table tbody tr.row-selected { background: #153d4e; }
  .clarity-radar .arena-table .tag { border: 0; border-radius: 4px; background: #18303e; text-transform: none; letter-spacing: 0; }
  .clarity-radar .arena-check { width: 20px; height: 20px; }
  .clarity-radar #arena-compare { scroll-margin-top: 96px; }
  .clarity-radar .arena-compare-card, .clarity-radar .aa-chart-card, .clarity-radar .arena-legend { background: rgba(10, 23, 32, .97); border: 1px solid #294150; border-radius: 10px; box-shadow: none; padding: 24px; }
  .clarity-radar .arena-compare-card::before, .clarity-radar .arena-compare-card::after { display: none; }
  .clarity-radar .arena-compare-card h4, .clarity-radar .aa-chart-card h3, .clarity-radar > .container > section h3 { font: 600 21px/1.4 var(--font-body) !important; text-transform: none; letter-spacing: 0; }
  .clarity-radar .arena-remove { min-width: 36px; min-height: 36px; }
  .clarity-radar .aa-charts { gap: 20px; margin-bottom: 28px; }
  .clarity-radar .aa-chart-sub, .clarity-radar .arena-legend-item p { font: 14px/1.7 var(--font-body); color: #afc4d2; }
  .clarity-radar > .container > section.card { background: rgba(10, 23, 32, .96) !important; border-color: #294150 !important; padding: 28px !important; }

  /* Search: one form, scan-friendly results and one empty state. */
  .clarity-search > .container { max-width: 1040px; }
  .clarity-search .search-panel { background: rgba(10, 23, 32, .96) !important; padding: 24px !important; margin-bottom: 32px !important; border-color: #294150 !important; }
  .clarity-search .search-panel:hover { transform: none; }
  .clarity-search .search-panel form { margin-top: 10px; }
  .clarity-search .search-panel input { min-width: 0; }
  .clarity-search > .container > h3 { font: 600 22px/1.5 var(--font-body) !important; color: #d9edf8 !important; border-color: #294150 !important; text-transform: none; letter-spacing: 0; }
  .clarity-search .posts-grid, .clarity-search .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .clarity-search .post-card-content { padding: 24px !important; }
  .clarity-search .post-card h4, .clarity-search .project-card h3 { font: 600 22px/1.4 var(--font-body) !important; text-transform: none; letter-spacing: 0; }
  .clarity-search .post-card p, .clarity-search .project-card p { font: 15px/1.75 var(--font-body) !important; }
  .clarity-search .search-empty { padding: 40px !important; border-color: #294150 !important; background: rgba(10, 23, 32, .96); box-shadow: none !important; }
  .clarity-search .search-empty i { font-size: 30px !important; text-shadow: none !important; color: #7cb6cf !important; }
  .clarity-search .search-empty h3 { font: 600 25px/1.4 var(--font-body) !important; text-transform: none; }
  .clarity-search .search-empty p { font: 16px/1.7 var(--font-body); max-width: 54ch; margin-inline: auto; }
}
/* Article topics and sharing controls match the site's softer surfaces. */
@media screen {
  .blog-single-main, .blog-single-sidebar { min-width: 0; }
  .blog-single-main { border: 1px solid #8cb8cc29; border-radius: 14px; background: #0a1620f2; box-shadow: 0 12px 28px #0003; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .blog-single-main h1 { font-size: clamp(28px, 3.3vw, 44px) !important; line-height: 1.25 !important; text-shadow: none !important; letter-spacing: -.01em; }
  .blog-single-main .blog-content { color: #bdceda; font-size: 17px; line-height: 1.85; }
  .blog-single-main .blog-content :is(h2,h3,h4) { font-family: var(--font-body); text-transform: none; letter-spacing: 0; line-height: 1.35; color: #e1f4ff; }
  .blog-single-main .blog-content img { border-radius: 10px; max-width: 100%; height: auto; }
  .blog-single-main .blog-content pre { border-radius: 10px; background: #08111c; }
  .blog-single-main .blog-content blockquote { border-left: 2px solid #5cd4f0; border-radius: 0 10px 10px 0; background: #85cde809; padding: 18px 22px; color: #b9d7e5; font-style: normal; }
  .blog-single-main .blog-content table { display: block; overflow-x: auto; border: 1px solid #8cb8cc33; border-radius: 10px; background: #0d1f2b; box-shadow: none; font: 14px/1.6 var(--font-body); }
  .blog-single-main .blog-content table th { background: #193342; color: #b5e9f8; text-transform: none; letter-spacing: 0; }
  .blog-single-main .blog-content table :is(th,td) { padding: 12px 14px; border-color: #8cb8cc26; min-width: 145px; overflow-wrap: normal; word-break: normal; }
  .blog-single-sidebar { border-left: 0; padding-left: 0; }
  .blog-single-sidebar .card { background: #0c1924ed !important; border: 1px solid #8cb8cc29 !important; border-radius: 12px; padding: 24px !important; box-shadow: none; }
  .blog-single-sidebar h4 { font: 600 18px/1.4 var(--font-body) !important; text-transform: none; text-shadow: none; letter-spacing: 0; border-color: #8cb8cc26 !important; }
  .blog-single-sidebar p { line-height: 1.7 !important; }
  .blog-single-main { overflow-wrap: anywhere; }
  .blog-single-main .blog-content pre { max-width: 100%; }
  :is(a, button).btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; text-align: center; vertical-align: middle; line-height: 1.4;
    max-width: 100%; white-space: normal;
  }
  :is(a, button).btn > :is(i, svg) { flex-shrink: 0; margin-inline: 0 !important; }
  .blog-single-sidebar :is(a, button).btn { width: 100%; min-height: 44px; padding: 11px 14px !important; }
  .nav-search button, #acro-chat-send { display: inline-flex; align-items: center; justify-content: center; }
  .blog-single-main .read-more { align-items: center; gap: 8px; }
  a.post-category-badge {
    min-height: 30px; max-width: 100%; padding: 6px 10px; gap: 7px;
    border-radius: 7px; border: 1px solid hsl(var(--post-category-hue) 44% 65% / .25);
    background: hsl(var(--post-category-hue) 40% 55% / .09);
    color: hsl(var(--post-category-hue) 55% 78%);
    font: 600 12px/1.4 var(--font-body); letter-spacing: .01em; text-transform: none;
    white-space: normal; overflow-wrap: anywhere; box-shadow: none;
  }
  a.post-category-badge:hover { background: hsl(var(--post-category-hue) 44% 60% / .16); box-shadow: none; transform: none; }
  .blog-single-main > div:has(> a.tag) { gap: 8px !important; padding-top: 22px !important; border-color: #8cb8cc26 !important; }
  .blog-single-main > div:has(> a.tag) > .monospace,
  .post-share-actions > .monospace { flex-basis: 100%; grid-column: 1 / -1; margin-bottom: 4px; font: 600 12px/1.5 var(--font-body) !important; letter-spacing: .03em; color: #a6bfcc !important; }
  .blog-single-main > div > a.tag {
    display: inline-flex; align-items: center; min-height: 32px; max-width: 100%;
    padding: 6px 12px; border-radius: 18px; border: 1px solid #82bbd32e;
    background: #8bc7df09; color: #b6dce9; font: 500 12px/1.5 var(--font-body) !important;
    letter-spacing: .01em; text-transform: none; overflow-wrap: anywhere;
    transition: background .18s ease, border-color .18s ease;
  }
  .blog-single-main > div > a.tag:hover { background: #1b3644; border-color: #61d3ef70; color: #e1f8ff; }
  .blog-single-main > .post-share-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 22px; margin-top: 24px; border-color: #8cb8cc26; }
  .post-share-actions .post-share-link {
    justify-content: center; min-height: 42px; min-width: 0; padding: 10px 12px; gap: 9px;
    border: 1px solid #8cb8cc30; border-radius: 9px; background: #0e1e2bcc;
    color: #cbdde7; font: 600 13px/1.4 var(--font-body); letter-spacing: 0;
    text-transform: none; box-shadow: none; transform: none;
  }
  .post-share-actions .post-share-link i { color: color-mix(in srgb, var(--share-brand) 70%, #c6efff); }
  .post-share-actions .post-share-link:hover { background: #193341; border-color: #5dd4f070; color: #e2f8ff; box-shadow: none; transform: none; }
  .post-share-actions #copy-post-link { background: #143240; border-color: #69d4f040; color: #9ee6f8; }
  .post-share-actions .post-share-link:focus-visible,
  .blog-single-main > div > a.tag:focus-visible { outline: 2px solid #61dfff; outline-offset: 3px; }
}
@media (max-width: 640px) {
  .blog-single-layout { grid-template-columns: minmax(0, 1fr); }
  .blog-single-main > .post-share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .post-share-actions .post-share-link { min-height: 44px; }
}
/* Public dialogs share the site's reading surfaces and restrained glass. */
@media screen {
  .client-modal, #cv-viewer-modal { z-index: 12000; padding: 24px; }
  .client-modal .client-modal-backdrop, #cv-viewer-modal .cv-viewer-modal__backdrop {
    background: rgba(2, 8, 13, .66);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .client-modal .client-modal-card, #cv-viewer-modal .cv-viewer-modal__panel, #acro-chat-panel {
    border: 1px solid rgba(104, 189, 217, .35);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(18, 34, 45, .96), rgba(7, 15, 23, .96));
    box-shadow: 0 24px 80px #0009, 0 0 24px #00d9ff0c, inset 0 1px 0 #c1eeff0d;
    color: #c1d2dc;
  }
  .client-modal .client-modal-card::before, .client-modal .client-modal-card::after { display: none; }
  .client-modal .client-modal-card { grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); }
  .client-modal .client-modal-logo { padding: 36px; border-color: #9bbdce26; }
  .client-modal .client-modal-logo.has-brand-bg { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .client-modal .client-modal-logo-status { border-radius: 20px; padding: 7px 10px; background: #07121acc; border: 1px solid #8cb8cc33; font-size: 10px; letter-spacing: .03em; }
  .client-modal .client-modal-body { padding: 34px 32px; scrollbar-color: #416477 #08111a; }
  .client-modal .client-modal-body h2 { margin-top: 16px; margin-bottom: 18px; font: 650 clamp(23px, 2.5vw, 30px)/1.3 var(--font-body); color: #edf8ff; text-transform: none; letter-spacing: -.01em; text-shadow: none; }
  .client-modal .client-modal-kicker { padding-right: 34px; gap: 8px; }
  .client-modal .client-modal-eyebrow { font-size: 10px; letter-spacing: .08em; }
  .client-modal .client-modal-pill { padding: 5px 9px; border-radius: 6px; font-size: 10px; letter-spacing: .02em; }
  .client-modal .client-modal-desc { font: 16px/1.75 var(--font-body); color: #bdceda; }
  .client-modal .client-modal-section { margin-top: 24px; padding-top: 22px; border-color: #9bbdce26; }
  .client-modal .client-modal-section h3 { letter-spacing: .06em; font-size: 11px; text-shadow: none; }
  .client-modal .client-modal-actions { margin-top: 24px; gap: 10px; }
  .client-modal .client-modal-actions .btn { border-radius: 8px; min-height: 44px; padding: 11px 16px; text-transform: none; font: 600 14px/1.4 var(--font-body); letter-spacing: 0; }
  .client-modal .client-modal-social { width: 42px; height: 42px; border-radius: 9px; }
  .client-modal .client-modal-testimonial { border: 1px solid #8ab7c726; border-left: 2px solid #5ed3f0; border-radius: 10px; background: #82c6df08; padding: 20px; }
  .client-modal .client-modal-testimonial blockquote { font: 15px/1.8 var(--font-body); color: #bdceda; }
  .client-modal .client-modal-testimonial figcaption { color: #9aafbf; }
  .client-modal .client-modal-close, #cv-viewer-modal [aria-label="Cerrar visor"], #acro-chat-close {
    width: 40px; height: 40px; min-width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #8cb8cc40; border-radius: 10px; background: #0b1926e8; color: #8cdff4; box-shadow: none;
  }
  .client-modal .client-modal-close:hover, #cv-viewer-modal [aria-label="Cerrar visor"]:hover, #acro-chat-close:hover { background: #173241; border-color: #5ad6f0; color: #e3faff; }
  .client-modal .client-modal-close:focus-visible, #cv-viewer-modal .btn:focus-visible, #acro-chat-close:focus-visible { outline: 2px solid #61dfff; outline-offset: 3px; }
  #cv-viewer-modal .cv-viewer-modal__header, #acro-chat-panel .acro-chat-header { padding: 14px 18px; gap: 12px; background: #aadfff06; border-bottom: 1px solid #8cb8cc26; }
  #cv-viewer-modal .cv-viewer-modal__header strong { font: 600 16px/1.4 var(--font-body); color: #e1f5ff; }
  #cv-viewer-modal .cv-viewer-modal__header .btn { margin: 0; border-radius: 9px; min-height: 40px; }
  #cv-viewer-modal .cv-viewer-modal__panel { height: min(88dvh, 940px); }
  #acro-chat-panel { overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  #acro-chat-panel .acro-chat-header { padding: 12px 14px; }
  #acro-chat-panel .acro-chat-title-sub { color: #a2bbc8; }
  #acro-chat-panel .acro-chat-messages { padding: 18px 16px; scrollbar-width: thin; scrollbar-color: #416477 #08111a; }
  #acro-chat-panel .acro-chat-msg { border-radius: 12px; padding: 12px 14px; font: 14px/1.65 var(--font-body); }
  #acro-chat-panel .acro-chat-msg.assistant { background: #20334180; color: #cddce5; border: 1px solid #9bbdce16; }
  #acro-chat-panel .acro-chat-msg.user { background: #103a4b; color: #def6ff; border: 1px solid #5cd8f230; }
  #acro-chat-panel .acro-chat-form { padding: 12px; gap: 8px; border-top: 1px solid #8cb8cc26; background: #060e1680; }
  #acro-chat-input, #acro-chat-send { border-radius: 9px; min-height: 42px; }
}
@media (max-width: 768px) {
  .client-modal { padding: 12px; }
  .client-modal .client-modal-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); border-radius: 14px; }
  .client-modal .client-modal-logo { min-height: 150px; padding: 44px 60px 20px; }
  .client-modal .client-modal-logo img { max-height: 94px; }
  .client-modal .client-modal-logo-status { top: 12px; left: 12px; max-width: calc(100% - 76px); }
  .client-modal .client-modal-body { padding: 22px; }
  .client-modal .client-modal-body h2 { margin-right: 0; }
  .client-modal .client-modal-kicker { padding-right: 0; }
  .client-modal .client-modal-close { top: 10px; right: 10px; }
  .client-modal .client-modal-backdrop, #cv-viewer-modal .cv-viewer-modal__backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  #acro-chat-panel { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
@media (max-width: 640px) {
  #cv-viewer-modal { padding: 10px; }
  #cv-viewer-modal .cv-viewer-modal__panel { height: calc(100dvh - 20px); border-radius: 12px; }
  #cv-viewer-modal .cv-viewer-modal__header { padding: 10px; gap: 8px; flex-wrap: wrap; }
  #cv-viewer-modal .cv-viewer-modal__header > div { margin-left: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  .client-modal .client-modal-backdrop, #cv-viewer-modal .cv-viewer-modal__backdrop { background: #030910e8; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .client-modal .client-modal-card, #cv-viewer-modal .cv-viewer-modal__panel, #acro-chat-panel { background: #0b1721; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* The dock remains useful and illuminated while Acrobot is in the panel. */
:root { --acro-float-edge: 25px; --acro-float-size: 46px; --acro-float-gap: 10px; }
#acro-chat-launcher { right: var(--acro-float-edge); bottom: var(--acro-float-edge); }
#scroll-to-top, #acro-chat-toggle {
  width: var(--acro-float-size); height: var(--acro-float-size);
  box-sizing: border-box; padding: 0; flex-shrink: 0;
}
#scroll-to-top { right: var(--acro-float-edge); bottom: var(--acro-float-edge); }
body.has-chat-launcher #scroll-to-top { bottom: calc(var(--acro-float-edge) + var(--acro-float-size) + var(--acro-float-gap)); }
@media (max-width: 768px) {
  :root { --acro-float-edge: 20px; --acro-float-size: 40px; }
  #acro-chat-toggle .acrobot-face { width: 30px; height: 30px; font-size: 30px; }
}
/* En móvil se suma el menú flotante a la columna: chat abajo, menú en medio, subir arriba.
   El chat y el menú se ven siempre; el de subir sigue apareciendo sólo al bajar. */
@media screen and (max-width: 1080px) {
  .nav-float-btn {
    position: fixed; right: var(--acro-float-edge); bottom: var(--acro-float-edge);
    display: flex; align-items: center; justify-content: center;
    width: var(--acro-float-size); height: var(--acro-float-size);
    padding: 0; border: 2px solid var(--cyan-primary, #00d9ff); border-radius: 50%;
    background: rgba(10, 10, 15, .85); color: var(--cyan-primary, #00d9ff);
    font-size: 16px; line-height: 1; cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 217, 255, .15);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    transition: background .25s, color .25s;
  }
  .nav-float-btn:hover, .nav-float-btn.is-open { background: var(--cyan-primary, #00d9ff); color: #050508; }
  #scroll-to-top { bottom: calc(var(--acro-float-edge) + var(--acro-float-size) + var(--acro-float-gap)); }
  body.has-chat-launcher .nav-float-btn {
    bottom: calc(var(--acro-float-edge) + var(--acro-float-size) + var(--acro-float-gap));
  }
  body.has-chat-launcher #scroll-to-top {
    bottom: calc(var(--acro-float-edge) + 2 * (var(--acro-float-size) + var(--acro-float-gap)));
  }
}
#acro-chat-toggle.acrobot-flight-ready { position: relative; inset: auto; transform: none; }
#acro-chat-toggle.acrobot-flight-ready.is-open > .acrobot-face,
#acro-chat-toggle.acrobot-in-flight > .acrobot-face,
#acro-chat-title .acrobot-in-flight { opacity: 0; }
.acrobot-flight-copy { position: fixed; z-index: 10002; pointer-events: none; transform-origin: top left; color: var(--cyan-primary, #00d9ff); filter: drop-shadow(0 0 7px #00d9ff88); }
.acrobot-flight-copy svg { width: 100%; height: 100%; display: block; }
.acrobot-dock { position: absolute; inset: 7px; border-radius: 50%; opacity: 0; transition: opacity .25s ease; pointer-events: none; background: radial-gradient(circle, #00d9ff30, #00d9ff08 65%, transparent 70%); }
.acrobot-dock::before { content: ''; position: absolute; inset: 0; border: 1px solid #00d9ff70; border-radius: 50%; box-shadow: 0 0 8px #00d9ff55, inset 0 0 8px #00d9ff33; }
.acrobot-dock::after { content: ''; position: absolute; width: 7px; height: 7px; left: calc(50% - 4px); top: calc(50% - 6px); border-right: 2px solid var(--cyan-primary, #00d9ff); border-bottom: 2px solid var(--cyan-primary, #00d9ff); transform: rotate(45deg); }
#acro-chat-toggle.is-open .acrobot-dock,
#acro-chat-toggle.acrobot-in-flight .acrobot-dock { opacity: 1; }
#acro-chat-toggle.is-open .acrobot-dock::before { animation: acrobotDockArrival .8s ease-out; }
@keyframes acrobotDockArrival { from { transform: scale(.65); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .acrobot-dock { transition: none; } #acro-chat-toggle.is-open .acrobot-dock::before { animation: none; } }
@media screen and (max-width: 1000px) {
  .clarity-blog .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clarity-about .about-grid { grid-template-columns: minmax(0, 1fr); }
  .clarity-about .about-sidebar-sticky { position: static; }
  .clarity-resources .resource-featured .resources-grid, .clarity-resources #resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .clarity-radar .aa-charts { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 640px) {
  .clarity-blog .posts-grid { grid-template-columns: minmax(0, 1fr); }
  .home-newsletter.card { padding: 22px !important; }
  .home-newsletter-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .clarity-about .about-hero { flex-direction: column; align-items: flex-start; padding: 24px; gap: 24px; text-align: left; }
  .clarity-about .about-avatar { width: 104px; height: 104px; }
  .clarity-about .about-hero h1 { font-size: 30px; }
  .clarity-about .about-chips, .clarity-about .about-hero-actions { justify-content: flex-start; }
  .clarity-about .about-toggle { width: 100%; }
  .clarity-about .about-toggle button { padding: 10px; font-size: 13px; flex: 1; justify-content: center; }
  .clarity-about #traditional-cv-view > .card, .clarity-about .about-sidebar-sticky > .card { padding: 22px !important; }
  .clarity-resources .resources-controls { padding: 18px; }
  .clarity-resources .resource-featured .resources-grid, .clarity-resources #resources-grid,
  .clarity-search .posts-grid, .clarity-search .projects-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .clarity-faq .faq-question { padding: 18px; gap: 12px; font-size: 17px; }
  .clarity-faq .faq-answer { padding: 0 18px 22px; }
  .clarity-radar .radar-tabs { display: flex !important; }
  .clarity-radar .radar-tabs .btn { width: 100%; text-align: center; justify-content: center; }
  .clarity-radar .arena-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clarity-radar .arena-stats .stat { padding: 16px; }
  .clarity-radar .arena-stats .stat:nth-child(3) { border-left: 0; }
  .clarity-radar .arena-stats .stat:nth-child(n+3) { border-top: 1px solid #294150; }
  .clarity-radar .arena-controls, .clarity-radar .arena-controls:has(#aa-search) { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .clarity-radar .arena-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .clarity-search .search-panel { padding: 18px !important; }
  .clarity-search .search-panel button { padding: 12px 18px !important; }
  .clarity-search .search-empty { padding: 26px !important; }
}

/* Share controls follow the portal's glass surface and restrained accents. */
@media screen {
  .blog-single-main > .post-share-actions {
    padding: 20px; margin-top: 24px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    border: 1px solid #8dcee02e; border-radius: 14px;
    background: linear-gradient(125deg, #12324440, #0a1721b8);
  }
  .post-share-actions > .monospace { margin-bottom: 5px; color: #9ab8c6 !important; }
  .post-share-actions > .monospace i { color: #74d6ed; margin-right: 5px; }
  .post-share-actions .post-share-link,
  .post-share-actions #copy-post-link {
    min-height: 56px; min-width: 0; padding: 10px 12px; gap: 10px;
    display: flex; align-items: center; justify-content: flex-start;
    border: 1px solid #87b9cb38; border-radius: 10px;
    background: #102331b8; color: #cbdde7;
    font: 600 13px/1.4 var(--font-body); text-align: left;
    white-space: normal; letter-spacing: 0;
    box-shadow: inset 0 1px 0 #e4faff05; transform: none;
    transition: background .18s, border-color .18s, color .18s;
  }
  .post-share-actions .post-share-link i,
  .post-share-actions .post-share-link .share-icon {
    flex: 0 0 30px; width: 30px; height: 30px; margin: 0;
    display: grid; place-items: center; border-radius: 8px;
    background: color-mix(in srgb, var(--share-brand) 12%, #112531);
    color: color-mix(in srgb, var(--share-brand) 60%, #d5f5ff);
    font-size: 16px; line-height: 1;
  }
  .post-share-actions .share-icon svg { width: 15px; height: 15px; }
  .post-share-actions #copy-post-link { background: #15303d; border-color: #69d4f055; color: #b9f0fb; }
  .post-share-actions .post-share-link:hover,
  .post-share-actions #copy-post-link:hover {
    background: #1b3848; border-color: #72dff2a6; color: #e9faff;
    box-shadow: none; transform: none;
  }
  .post-share-actions .post-share-link:active { background: #244757; }
  .post-share-actions .post-share-link:focus-visible { outline: 2px solid #7ee9fb; outline-offset: 3px; }
  .post-share-actions .post-share-link:has(.fa-check) { background: #12352d; border-color: #65d5ac80; color: #b9f4dd; }
  .post-share-actions .post-share-link .fa-check { background: #65d5ac18; color: #8ce8c6; }
}
@media (max-width: 640px) {
  .blog-single-main > .post-share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; }
  .post-share-actions .post-share-link,
  .post-share-actions #copy-post-link { padding: 9px 10px; gap: 8px; font-size: 12px; }
}
@media (max-width: 360px) {
  .blog-single-main > .post-share-actions { padding: 10px; }
  .post-share-actions .post-share-link,
  .post-share-actions #copy-post-link { padding: 8px; gap: 6px; }
  .post-share-actions .post-share-link i,
  .post-share-actions .post-share-link .share-icon { flex-basis: 24px; width: 24px; height: 28px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .post-share-actions .post-share-link { transition: none; } }

/* Category chips share the same calm glass treatment as the public cards.
   Their colour still comes from the category configured in administration. */
@media screen {
  .client-card-category,
  .client-modal .client-modal-pill--category,
  a.post-category-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    min-height: 30px;
    max-width: 100%;
    margin: 0 0 11px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 42%, #8dcee038);
    border-radius: 7px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 14%, #102331c9), #0b1923d9);
    color: color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 65%, #d8f7ff);
    box-shadow: inset 0 1px 0 rgba(232, 251, 255, .05);
    font: 600 11px/1.35 var(--font-body);
    letter-spacing: .01em;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
  }
  .client-card-category,
  .client-modal .client-modal-pill--category { --category-chip-color: var(--client-category-color, var(--cyan-primary)); }
  .client-modal .client-modal-pill--category { margin: 0; }
  a.post-category-badge { --category-chip-color: hsl(var(--post-category-hue) 62% 62%); }
  .client-card-category::before,
  .client-modal .client-modal-pill--category::before,
  a.post-category-badge::before {
    content: '\f02b';
    flex: 0 0 18px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 5px;
    background: color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 16%, transparent);
    color: color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 70%, #e3fbff);
    font: 900 9px/1 "Font Awesome 6 Free";
  }
  a.post-category-badge > i { display: none; }
  .client-card-category:hover,
  .client-modal .client-modal-pill--category:hover,
  a.post-category-badge:hover {
    border-color: color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 65%, #8dcee04d);
    background: linear-gradient(135deg, color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 22%, #173342), #0d1f2b);
    box-shadow: none;
    color: color-mix(in srgb, var(--category-chip-color, var(--cyan-primary)) 72%, #ecfcff);
    transform: none;
  }
  .post-category-row { margin-bottom: 12px; }
  a.post-category-badge:focus-visible { outline: 2px solid #7ee9fb; outline-offset: 3px; }
}

/* A shared control treatment for contact links and public social links. */
@media screen {
  .site-footer .footer-socials,
  .client-modal .client-modal-socials { display: flex; flex-wrap: wrap; gap: 8px; }
  .site-footer .footer-socials a,
  .site-footer .footer-socials a[data-platform],
  .client-modal .client-modal-social,
  .client-modal .client-modal-social[data-platform],
  .clients-carousel-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #87b9cb38;
    border-radius: 9px;
    background: #102331b8;
    color: #9edbe9;
    font-size: 17px;
    line-height: 1;
    box-shadow: none;
    text-shadow: none;
    transition: color .18s, background .18s, border-color .18s;
  }
  .site-footer .footer-socials a::before,
  .site-footer .footer-socials a::after,
  .client-modal .client-modal-social::before,
  .client-modal .client-modal-social::after { content: none; }
  .site-footer .footer-socials a:hover,
  .site-footer .footer-socials a[data-platform]:hover,
  .client-modal .client-modal-social:hover,
  .client-modal .client-modal-social[data-platform]:hover,
  .clients-carousel-controls button:not(:disabled):hover {
    color: #d9f9ff;
    background: #153141;
    border-color: #72dff2a6;
    box-shadow: none;
    transform: none;
  }
  .client-modal .client-modal-social:focus-visible,
  .clients-carousel-controls button:focus-visible {
    outline: 2px solid #7ee9fb;
    outline-offset: 3px;
  }

  /* El footer deja todas las redes en una sola fila y reparte entre ellas todo el
     ancho de la columna: crecen o se encogen por igual según cuántas cuentas haya.
     Cada botón es su propio contenedor de consulta para que el icono escale con el
     tamaño final del botón. */
  .site-footer .footer-socials {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(4px, .6vw, 8px);
  }
  .site-footer .footer-socials a,
  .site-footer .footer-socials a[data-platform] {
    flex: 1 1 44px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    /* Siempre cuadrados: si sobra ancho crece el espacio entre botones, no el botón. */
    aspect-ratio: 1;
    max-width: 64px;
    container-type: inline-size;
  }
  .site-footer .footer-socials a > i,
  .site-footer .footer-socials a > svg { font-size: max(8px, min(17px, 40cqw)); }

  /* Red anunciada pero todavía sin cuenta: sin enlace, apagada y con aviso al pasar el cursor. */
  .site-footer .footer-socials a.social-soon,
  .clarity-about .social-grid a.social-soon {
    position: relative;
    cursor: default;
    opacity: .5;
    filter: saturate(.5);
  }
  .site-footer .footer-socials a.social-soon:hover,
  .clarity-about .social-grid a.social-soon:hover { opacity: .75; }
  .site-footer .footer-socials a.social-soon::after,
  .clarity-about .social-grid a.social-soon::after {
    content: 'Próximamente';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 9px;
    border: 1px solid #2f5666;
    border-radius: 6px;
    background: #0b1b26;
    color: #cdeaf6;
    font: 500 11px/1.2 var(--font-body);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s;
  }
  .site-footer .footer-socials a.social-soon:hover::after,
  .clarity-about .social-grid a.social-soon:hover::after { opacity: 1; }
  /* Si cierra la fila, el aviso se alinea al borde para no salirse de la tarjeta. */
  .site-footer .footer-socials a.social-soon:last-child::after,
  .clarity-about .social-grid a.social-soon:last-child::after { left: auto; right: 0; transform: none; }

  /* Scroll by one card, then normalize onto an identical copy for a seamless loop. */
  .clients-grid--carousel {
    overflow: visible;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .clients-grid--carousel::before,
  .clients-grid--carousel::after { display: none; }
  .clients-carousel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }
  .clients-carousel-toolbar p { margin: 0; color: #d2e8f1; font: 600 14px/1.5 var(--font-body); }
  .clients-carousel-toolbar p span { display: block; color: #91aab8; font-size: 12px; font-weight: 400; }
  .clients-carousel-controls { display: flex; flex: 0 0 auto; gap: 8px; }
  .clients-carousel-controls button { cursor: pointer; }
  .clients-carousel-controls button:disabled { opacity: .35; cursor: default; }
  .clients-grid--carousel > .clients-carousel-track {
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
    /* Evita que el redondeo de tres columnas recorte el borde derecho. */
    padding: 4px 4px 16px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-end: 4px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: auto;
    background: transparent;
    will-change: auto;
    transform: none;
  }
  .clients-grid--carousel > .clients-carousel-track.is-dragging { scroll-snap-type: none; }
  .clients-grid--carousel > .clients-carousel-track::-webkit-scrollbar { display: none; }
  .clients-grid--carousel .client-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    scroll-snap-align: start;
    scroll-margin: 4px;
    border-radius: 14px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .clients-grid--carousel .client-card:hover { transform: none; box-shadow: inset 0 0 0 1px #72dff22e; }
  .clients-grid--carousel .client-card:focus-visible { outline: 2px solid #7ee9fb; outline-offset: -3px; }
  .clients-grid--carousel .client-card-logo { height: auto; aspect-ratio: 16 / 9; }
  .clients-grid--carousel .client-card-body {
    display: grid;
    grid-template-rows: 18px 30px 54px 70px 48px 38px;
    gap: 10px;
    padding: 22px;
  }
  .clients-grid--carousel .client-card-label { grid-row: 1; margin: 0; }
  .clients-grid--carousel .client-card-category { grid-row: 2; justify-self: start; margin: 0; }
  .clients-grid--carousel .client-card h3 {
    grid-row: 3;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .clients-grid--carousel .client-card-desc {
    grid-row: 4;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.65;
  }
  .clients-grid--carousel .client-card-quote { grid-row: 5; align-self: start; margin: 0; }
  .clients-grid--carousel .client-card-cta { grid-row: 6; align-self: stretch; margin: 0; }
}
@media (max-width: 1000px) {
  .clients-grid--carousel .client-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  .clients-grid--carousel > .clients-carousel-track { gap: 14px; }
  .clients-grid--carousel .client-card { flex-basis: 88%; }
  .clients-grid--carousel .client-card-body { padding: 18px; }
  .clients-carousel-toolbar { gap: 10px; }
  .clients-carousel-toolbar p { font-size: 13px; }
  .clients-carousel-toolbar p span { max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-socials a,
  .client-modal .client-modal-social,
  .clients-carousel-controls button { transition: none; }
}

/* Social links use their platform colour while keeping one compact control system. */
@media screen {
  .site-footer .footer-socials a[data-platform],
  .client-modal .client-modal-social[data-platform],
  .clarity-about .social-grid a[data-platform] {
    --social-brand: var(--brand, var(--cyan-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: color-mix(in srgb, var(--social-brand) 58%, #487081);
    background: color-mix(in srgb, var(--social-brand) 13%, #0c1d29);
    color: color-mix(in srgb, var(--social-brand) 82%, #e8f9ff);
    box-shadow: inset 0 1px 0 #e4faff08;
    text-shadow: none;
  }
  .site-footer .footer-socials a[data-platform]:hover,
  .client-modal .client-modal-social[data-platform]:hover,
  .clarity-about .social-grid a[data-platform]:hover {
    border-color: var(--social-brand);
    background: color-mix(in srgb, var(--social-brand) 23%, #102536);
    color: color-mix(in srgb, var(--social-brand) 90%, #fff);
    box-shadow: 0 0 14px color-mix(in srgb, var(--social-brand) 32%, transparent);
    transform: translateY(-1px);
  }
  .site-footer .footer-socials a[data-platform]:focus-visible,
  .client-modal .client-modal-social[data-platform]:focus-visible,
  .clarity-about .social-grid a[data-platform]:focus-visible,
  .post-share-actions .post-share-link:focus-visible {
    outline: 2px solid var(--social-brand, var(--share-brand, var(--cyan-primary)));
    outline-offset: 3px;
  }

  .client-modal .client-modal-social[data-platform="email"] { --social-brand: #57d8f7; }
  .site-footer .footer-socials a[data-platform="rss"] { --social-brand: #f58a39; }
  .post-share-actions .post-share-link[data-platform="copy"] { --share-brand: #57d8f7; }

  /* La barra lateral repite el trato del footer: una sola fila que reparte todo el ancho. */
  .clarity-about .social-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(4px, .6vw, 8px);
  }
  .clarity-about .social-grid a {
    flex: 1 1 34px;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 1;
    max-width: 48px;
    margin: 0;
    border-radius: 8px;
    container-type: inline-size;
  }
  .clarity-about .social-grid a > i,
  .clarity-about .social-grid a > svg { font-size: max(8px, min(15px, 40cqw)); }
  .clarity-about .social-grid a[data-platform="github"] { --social-brand: var(--brand-github); }
  .clarity-about .social-grid a[data-platform="linkedin"] { --social-brand: var(--brand-linkedin); }
  .clarity-about .social-grid a[data-platform="x"] { --social-brand: var(--brand-x); }
  .clarity-about .social-grid a[data-platform="instagram"] { --social-brand: var(--brand-instagram); }
  .clarity-about .social-grid a[data-platform="youtube"] { --social-brand: var(--brand-youtube); }
  .clarity-about .social-grid a[data-platform="facebook"] { --social-brand: var(--brand-facebook); }
  .clarity-about .social-grid a[data-platform="tiktok"] { --social-brand: var(--brand-tiktok); }
  .clarity-about .social-grid a[data-platform="twitch"] { --social-brand: var(--brand-twitch); }
  .clarity-about .social-grid a[data-platform="discord"] { --social-brand: var(--brand-discord); }
  .clarity-about .social-grid a[data-platform="spotify"] { --social-brand: var(--brand-spotify); }
  .clarity-about .social-grid a[data-platform="threads"] { --social-brand: var(--brand-threads); }
  .clarity-about .social-grid a[data-platform="medium"] { --social-brand: var(--brand-medium); }
  .clarity-about .social-grid a[data-platform="pinterest"] { --social-brand: var(--brand-pinterest); }
  .clarity-about .social-grid a[data-platform="linktree"] { --social-brand: var(--brand-linktree); }

  .blog-single-main > .post-share-actions.post-share-actions--intro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 24px;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid #8dcee024;
    border-bottom: 1px solid #8dcee024;
    border-radius: 0;
    background: transparent;
  }
  .post-share-actions--intro .post-share-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    color: #a9c6d2;
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .post-share-actions--intro .post-share-title i { color: #71dced; }
  .post-share-actions .post-share-link,
  .post-share-actions #copy-post-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--share-brand) 58%, #487081);
    border-radius: 9px;
    background: color-mix(in srgb, var(--share-brand) 13%, #0c1d29);
    color: color-mix(in srgb, var(--share-brand) 82%, #e8f9ff);
    font-size: 17px;
    line-height: 1;
    box-shadow: inset 0 1px 0 #e4faff08;
    transform: none;
  }
  .post-share-actions .post-share-link i,
  .post-share-actions .post-share-link .share-icon,
  .post-share-actions .post-share-link > .social-x-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: currentColor;
    font-size: 17px;
  }
  .post-share-actions .post-share-link:hover,
  .post-share-actions #copy-post-link:hover {
    border-color: var(--share-brand);
    background: color-mix(in srgb, var(--share-brand) 23%, #102536);
    color: color-mix(in srgb, var(--share-brand) 90%, #fff);
    box-shadow: 0 0 14px color-mix(in srgb, var(--share-brand) 32%, transparent);
    transform: translateY(-1px);
  }
  .post-share-actions .post-share-link:has(.fa-check) {
    --share-brand: #65d5ac;
    background: color-mix(in srgb, var(--share-brand) 22%, #102536);
    border-color: var(--share-brand);
    color: #c8f7e2;
  }
}
@media (max-width: 640px) {
  .blog-single-main > .post-share-actions.post-share-actions--intro { gap: 7px; margin-bottom: 20px; }
  .post-share-actions--intro .post-share-title { flex-basis: 100%; }
  .post-share-actions .post-share-link,
  .post-share-actions #copy-post-link { flex-basis: 40px; width: 40px; height: 40px; min-height: 40px; }
}

/* Newsletter preferences: same calm visual hierarchy as the public sections. */
.clarity-unsubscribe {
  display: grid;
  align-items: center;
  min-height: min(650px, calc(100vh - 132px));
  padding-block: clamp(48px, 8vh, 86px) !important;
  border-bottom: 0 !important;
}
.unsubscribe-container { width: min(100%, 720px); }
.unsubscribe-panel {
  position: relative;
  padding: clamp(28px, 5vw, 48px);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 38, 52, .96), rgba(7, 18, 27, .98));
  border: 1px solid #34596b;
  border-radius: 16px;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(194, 243, 255, .08);
}
.unsubscribe-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 2px;
  background: linear-gradient(90deg, #55d7f5, transparent);
}
.unsubscribe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border: 1px solid #3f8298;
  border-radius: 13px;
  background: #123343;
  color: #76def4;
  font-size: 20px;
}
.unsubscribe-icon--success { border-color: #3b8667; background: #12352c; color: #71dfad; }
.unsubscribe-label { margin-bottom: 10px; }
.unsubscribe-eyebrow {
  margin: 0 0 9px;
  color: #7bd8f3;
  font: 600 12px/1.35 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.unsubscribe-panel h1 {
  max-width: 20ch;
  margin: 0;
  color: #eefaff;
  font: 600 clamp(28px, 4vw, 40px)/1.18 var(--font-body);
  letter-spacing: -.025em;
  text-transform: none;
  text-shadow: none;
}
.unsubscribe-copy {
  max-width: 54ch;
  margin: 16px 0 0;
  color: #b5cad5;
  font: 16px/1.7 var(--font-body);
}
.unsubscribe-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 22px 0 0;
  padding: 10px 13px;
  overflow-wrap: anywhere;
  color: #d5edf6;
  font: 500 14px/1.45 var(--font-body);
  background: rgba(6, 16, 24, .58);
  border: 1px solid #2e5060;
  border-radius: 8px;
}
.unsubscribe-email i { color: #62d4ef; }
.unsubscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
}
.unsubscribe-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 17px;
  border-radius: 8px;
  font: 600 14px/1.3 var(--font-body);
  letter-spacing: .01em;
  text-transform: none;
}
.unsubscribe-actions .btn-ghost { color: #bad1dc; border-color: #375869; background: transparent; }
.unsubscribe-actions .btn-ghost:hover { color: #effaff; border-color: #5e9eb4; background: #112d3d; }
@media (max-width: 600px) {
  .clarity-unsubscribe { min-height: calc(100vh - 112px); padding-block: 32px !important; }
  .unsubscribe-panel { border-radius: 12px; }
  .unsubscribe-actions .btn { width: 100%; }
  .unsubscribe-email { width: 100%; }
}