@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/account/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/account/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/account/assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/account/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* GENERADO por build-tokens.mjs desde config/tokens.json — no editar a mano. */
:root {
  --base: #ffffff;
  --surface: #f7f9fa;
  --ink: #003048;
  --contrast: #08161c;
  --muted: #5f747e;
  --reading: #2b3f49;
  --accent: #057cb2;
  --accent-hover: #04648f;
  --accent-subtle: #edf6fa;
  --brand: #068ac6;
  --highlight: #1296db;
  --success: #77b978;
  --alert: #f37262;
  --danger: #b83227;
  --danger-subtle: #fdf1ef;
  --border: #e1e7ea;

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-caption: 0.7875rem;
  --text-body: 0.9rem;
  --text-lg: 1.125rem;
  --text-h3: 1.40625rem;
  --text-h2: 1.74375rem;
  --text-h1: 2.19375rem;
  --text-display: 2.75625rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 12px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius: 6px;
  --measure-text: 720px;
  --measure-wide: 1200px;
}

:root {
  /* Ritmo y escala fluida: decisiones de layout, no tokens de marca.
     Los colores, tipografias y espaciados los genera build-tokens.mjs. */
    --header-h:72px;
  --wrap:   1440px;
  --pad:    clamp(1rem, 4vw, 2rem);
  --rhythm: clamp(4rem, 6vw, 6rem);
  --gap:    clamp(1.5rem, 3vw, 2rem);
  --t-cap:  0.7875rem;
  --t-body: clamp(0.95625rem, 0.9rem + 0.27vw, 1.0125rem);
  --t-lead: clamp(0.95625rem, 0.855rem + 0.54vw, 1.2375rem);
  --t-h3:   clamp(1.06875rem, 0.99rem + 0.36vw, 1.2375rem);
  --t-h2:   clamp(1.4625rem, 1.08rem + 1.8vw, 2.475rem);
  --t-h1:   clamp(1.8rem, 1.26rem + 2.7vw, 3.15rem);
}

html {
      scroll-behavior: smooth;
      scroll-snap-type: y proximity;
      scroll-padding-top: var(--header-h);
    }
    main > section { scroll-snap-align: start; scroll-margin-top: var(--header-h); }
    /* Quien pidio menos movimiento no recibe ni suavizado ni saltos. */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; scroll-snap-type: none; }
    }
    *, *::before, *::after { box-sizing: border-box; }
    body { margin:0; background:var(--base); color:var(--contrast); font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:var(--t-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
    h1,h2,h3 { margin:0; font-weight:700; line-height:1.15; letter-spacing:-0.02em; text-wrap:pretty; overflow-wrap:anywhere; }
    h1 { font-size:var(--t-h1); }
    h2 { font-size:var(--t-h2); }
    h3 { font-size:var(--t-h3); font-weight:600; line-height:1.3; }
    p { margin:0; }
    a { color:var(--contrast); text-decoration:underline; text-underline-offset:3px; }
    a:hover { color:var(--accent); }
    :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

    /* Nada se sale de la pantalla en horizontal. Es la falla mas comun en movil. */
    .page { width:100%; background:var(--base); overflow-x:clip; }
    .wrap { max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }

    /* .measure junto a .wrap limita a los HIJOS, no al contenedor. Si limitara el
       contenedor, el margin:0 auto de .wrap lo centraria y el texto dejaria de
       alinear con el resto: en el blog el breadcrumb caia en 32px y el cuerpo del
       articulo en 304. Es la misma trampa que .wrap definida dos veces, pero por
       composicion en vez de por nombre. */
    .wrap.measure { max-width:var(--wrap); }
    .wrap.measure > * { max-width:var(--measure-text); }
    .sec { padding-block:var(--rhythm); }
    .sec--surface { background:var(--surface); }
    .sec--ink { background:var(--ink); color:var(--base); }

    .g2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }
    .g3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
    .g4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
    .hero { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(2rem,5vw,4rem); align-items:start; }
    .split { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(2rem,5vw,4rem); align-items:start; }

    .card { padding:clamp(1.5rem,4vw,2.5rem); border:1px solid var(--border); border-radius:var(--radius); background:var(--base); }
    .card--surface { background:var(--surface); }
    .kicker { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:var(--t-cap); color:var(--muted); letter-spacing:0.04em; }
    .lead { font-size:var(--t-lead); line-height:1.5; color:var(--muted); }
    .cap { font-size:var(--t-cap); color:var(--muted); }
    .mono { font-family:"JetBrains Mono", ui-monospace, monospace; }
    .todo { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:var(--t-cap); color:var(--muted); border:1px dashed var(--muted); border-radius:4px; padding:4px 8px; display:inline-block; }

    /* Area tactil de 44px como piso, en todo lo que se toca. */
    .btn { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:1rem 2rem; border-radius:var(--radius); background:var(--accent); color:var(--base); font-weight:600; font-size:var(--t-body); text-decoration:none; }
    .btn:hover { background:var(--accent-hover); color:var(--base); }
    .btn--sm { min-height:44px; padding:0.75rem 1.25rem; font-size:0.9rem; }
    .navlink { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; }
    .navlink:hover { color:var(--accent); }
    .footlink { display:inline-flex; align-items:center; min-height:44px; color:var(--base); text-decoration:none; }
    .footlink:hover { color:#ffffff; text-decoration:underline; }

    /* La tabla scrollea dentro de su caja, nunca la pagina. */
    table { width:100%; border-collapse:collapse; min-width:640px; }
    th { padding:1.25rem var(--pad); text-align:left; font-family:"JetBrains Mono", ui-monospace, monospace; font-size:var(--t-cap); font-weight:400; letter-spacing:0.04em; color:var(--muted); background:var(--base); }
    td { padding:1.5rem var(--pad); border-top:1px solid var(--border); vertical-align:top; width:50%; color:var(--muted); font-size:var(--t-body); }
    th + th { color:var(--contrast); }
    th + th, td + td { border-left:1px solid var(--border); }
    td + td { color:var(--contrast); background:var(--base); }

    .list { display:flex; flex-direction:column; gap:1rem; }
    .item { display:flex; gap:0.75rem; align-items:flex-start; }
    .item svg { flex-shrink:0; margin-top:0.3em; }

    .siteheader { position:sticky; top:0; z-index:20; background:var(--base); border-bottom:1px solid var(--border); }
    .skip { position:absolute; left:-9999px; }
    .skip:focus { position:static; display:inline-block; padding:1rem; background:var(--accent); color:var(--base); }

    /* El menu es <details>: HTML servido, sin JavaScript, rastreable. */
    .menu { display:none; }
    .menu > summary { list-style:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer; border:1px solid var(--border); border-radius:var(--radius); color:var(--contrast); }
    .menu > summary::-webkit-details-marker { display:none; }
    .menu[open] .ico-open, .menu:not([open]) .ico-close { display:none; }
    .menu[open] > .menu__panel { display:flex; }
    .menu__panel { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0.25rem; background:var(--base); border-bottom:1px solid var(--border); padding:0.5rem var(--pad) 1.5rem; box-shadow:0 12px 24px rgba(0,48,72,0.10); z-index:30; }
    .menu__sep { height:1px; background:var(--border); margin-block:0.5rem; }



/* GENERADO — utilidades derivadas de los tokens. */
.gap-1{gap:var(--space-1)} .p-1{padding:var(--space-1)} .px-1{padding-inline:var(--space-1)} .py-1{padding-block:var(--space-1)} .pt-1{padding-top:var(--space-1)} .pb-1{padding-bottom:var(--space-1)} .mt-1{margin-top:var(--space-1)}
.gap-2{gap:var(--space-2)} .p-2{padding:var(--space-2)} .px-2{padding-inline:var(--space-2)} .py-2{padding-block:var(--space-2)} .pt-2{padding-top:var(--space-2)} .pb-2{padding-bottom:var(--space-2)} .mt-2{margin-top:var(--space-2)}
.gap-3{gap:var(--space-3)} .p-3{padding:var(--space-3)} .px-3{padding-inline:var(--space-3)} .py-3{padding-block:var(--space-3)} .pt-3{padding-top:var(--space-3)} .pb-3{padding-bottom:var(--space-3)} .mt-3{margin-top:var(--space-3)}
.gap-4{gap:var(--space-4)} .p-4{padding:var(--space-4)} .px-4{padding-inline:var(--space-4)} .py-4{padding-block:var(--space-4)} .pt-4{padding-top:var(--space-4)} .pb-4{padding-bottom:var(--space-4)} .mt-4{margin-top:var(--space-4)}
.gap-5{gap:var(--space-5)} .p-5{padding:var(--space-5)} .px-5{padding-inline:var(--space-5)} .py-5{padding-block:var(--space-5)} .pt-5{padding-top:var(--space-5)} .pb-5{padding-bottom:var(--space-5)} .mt-5{margin-top:var(--space-5)}
.gap-6{gap:var(--space-6)} .p-6{padding:var(--space-6)} .px-6{padding-inline:var(--space-6)} .py-6{padding-block:var(--space-6)} .pt-6{padding-top:var(--space-6)} .pb-6{padding-bottom:var(--space-6)} .mt-6{margin-top:var(--space-6)}
.gap-7{gap:var(--space-7)} .p-7{padding:var(--space-7)} .px-7{padding-inline:var(--space-7)} .py-7{padding-block:var(--space-7)} .pt-7{padding-top:var(--space-7)} .pb-7{padding-bottom:var(--space-7)} .mt-7{margin-top:var(--space-7)}
.gap-8{gap:var(--space-8)} .p-8{padding:var(--space-8)} .px-8{padding-inline:var(--space-8)} .py-8{padding-block:var(--space-8)} .pt-8{padding-top:var(--space-8)} .pb-8{padding-bottom:var(--space-8)} .mt-8{margin-top:var(--space-8)}
.gap-9{gap:var(--space-9)} .p-9{padding:var(--space-9)} .px-9{padding-inline:var(--space-9)} .py-9{padding-block:var(--space-9)} .pt-9{padding-top:var(--space-9)} .pb-9{padding-bottom:var(--space-9)} .mt-9{margin-top:var(--space-9)}
.gap-10{gap:var(--space-10)} .p-10{padding:var(--space-10)} .px-10{padding-inline:var(--space-10)} .py-10{padding-block:var(--space-10)} .pt-10{padding-top:var(--space-10)} .pb-10{padding-bottom:var(--space-10)} .mt-10{margin-top:var(--space-10)}
.f{display:flex} .fc{flex-direction:column} .stack{display:flex;flex-direction:column} .row{display:flex;align-items:center}
.ic{align-items:center} .is{align-items:flex-start} .ib{align-items:baseline} .it{align-items:start}
.jb{justify-content:space-between} .jc{justify-content:center}
.flex-wrap{flex-wrap:wrap} .f0{flex-shrink:0} .grow{flex-grow:1}
.cols-1{display:grid;grid-template-columns:minmax(0,1fr)} .cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.t-cap{font-size:var(--t-cap)} .t-body{font-size:var(--t-body)} .t-lead{font-size:var(--t-lead)} .t-h3{font-size:var(--t-h3)} .t-h2{font-size:var(--t-h2)}
.fw-400{font-weight:400} .fw-600{font-weight:600} .fw-700{font-weight:700}
.lh-tight{line-height:1.2} .lh-snug{line-height:1.4} .lh-lead{line-height:1.5} .lh-body{line-height:1.6}
.center{text-align:center} .left{text-align:left} .italic{font-style:italic}
.c-base{color:var(--base)} .c-surface{color:var(--surface)} .c-ink{color:var(--ink)} .c-contrast{color:var(--contrast)} .c-muted{color:var(--muted)} .c-reading{color:var(--reading)} .c-accent{color:var(--accent)} .c-accent-hover{color:var(--accent-hover)} .c-accent-subtle{color:var(--accent-subtle)} .c-brand{color:var(--brand)} .c-highlight{color:var(--highlight)} .c-success{color:var(--success)} .c-alert{color:var(--alert)} .c-danger{color:var(--danger)} .c-danger-subtle{color:var(--danger-subtle)} .c-border{color:var(--border)}
.bg-base{background:var(--base)} .bg-surface{background:var(--surface)} .bg-ink{background:var(--ink)} .bg-contrast{background:var(--contrast)} .bg-muted{background:var(--muted)} .bg-reading{background:var(--reading)} .bg-accent{background:var(--accent)} .bg-accent-hover{background:var(--accent-hover)} .bg-accent-subtle{background:var(--accent-subtle)} .bg-brand{background:var(--brand)} .bg-highlight{background:var(--highlight)} .bg-success{background:var(--success)} .bg-alert{background:var(--alert)} .bg-danger{background:var(--danger)} .bg-danger-subtle{background:var(--danger-subtle)} .bg-border{background:var(--border)} .bg-none{background:transparent}
.rad{border-radius:var(--radius)} .circle{border-radius:50%}
.bd{border:1px solid var(--border)} .bt{border-top:1px solid var(--border)} .bb{border-bottom:1px solid var(--border)} .bl{border-left:1px solid var(--border)} .bd-none{border-color:transparent}
.bd-dash{border:1px dashed var(--muted)}
.ovh{overflow:hidden} .ovx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.measure{max-width:45rem} .w-half{width:50%} .w-full{width:100%} .vt{vertical-align:top}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:0.5rem}
.ico{flex-shrink:0;margin-top:0.2em}
.avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0}
.rel{position:relative} .m-0{margin:0} .gap-0{gap:0} .break{overflow-wrap:anywhere}
.t-h1{font-size:var(--t-h1)} .no-underline{text-decoration:none} .tap{min-width:44px}
.tight-track{letter-spacing:-0.02em} .wide-track{letter-spacing:0.04em}
.p-card{padding:clamp(1.5rem,4vw,2.5rem)} .p-row{padding:var(--space-4) var(--pad)} .p-row-lg{padding:var(--space-5) var(--pad)}
.measure-sm{max-width:40rem} .measure-lg{max-width:50rem} .measure-xl{max-width:56rem}
.br-side{border-right:1px solid var(--border)} .by{border-block:1px solid var(--border)}
.bt-light{border-top:1px solid rgba(255,255,255,0.12)}
.split-wide{display:grid;grid-template-columns:1.25fr 1fr}
.logo{height:56px;width:auto;margin-left:-23px}
.dim{opacity:0.7} .measure-xs{max-width:20rem} .hdr-h{min-height:var(--header-h)}
.py-footer{padding-block:var(--space-7) var(--space-6)} .py-hero{padding-block:var(--space-8) var(--space-9)}
.i{display:inline-block;width:20px;height:20px;flex-shrink:0;margin-top:0.15em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i--lg{width:24px;height:24px}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.i-close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}
.i-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E")}
.i-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.i-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E")}
.i-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E")}
.i-list{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 4.5 7.5 7 5'/%3E%3Cline x1='10' y1='6.5' x2='21' y2='6.5'/%3E%3Cpolyline points='3 12 4.5 13.5 7 11'/%3E%3Cline x1='10' y1='12.5' x2='21' y2='12.5'/%3E%3Cpolyline points='3 18 4.5 19.5 7 17'/%3E%3Cline x1='10' y1='18.5' x2='21' y2='18.5'/%3E%3C/svg%3E")}
.i-send{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='3' x2='10' y2='14'/%3E%3Cpolygon points='21 3 14 21 10 14 3 10 21 3'/%3E%3C/svg%3E")}
.i-zap{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 4 14 12 14 11 22 20 10 12 10 13 2'/%3E%3C/svg%3E")}
.i-cart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.4 11.2a2 2 0 0 0 2 1.6h8.1a2 2 0 0 0 2-1.5L21 7H6'/%3E%3C/svg%3E")}
.i-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E")}
.i-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.6-3.4 7.9-8 9-4.6-1.1-8-4.4-8-9V6z'/%3E%3C/svg%3E")}
.i-megaphone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h4l7 5V5l-7 5z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E")}
.i-clipboard{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1'/%3E%3Cline x1='9' y1='11' x2='15' y2='11'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3C/svg%3E")}
.i-printer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 3 18 3 18 9'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Crect x='6' y='14' width='12' height='7'/%3E%3C/svg%3E")}
.i-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.i-lock-open{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.75-1.4'/%3E%3C/svg%3E")}
.i-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='4' x2='12' y2='15'/%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='5' y1='20' x2='19' y2='20'/%3E%3C/svg%3E")}
.i-share{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E")}
.i-whatsapp{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E")}
.i-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E")}
.i-facebook{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E")}
.i-linkedin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E")}
.i-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z'/%3E%3C/svg%3E")}
.i-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E")}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tagbar{border:0;padding:0;margin:0;display:flex;gap:var(--space-3);flex-wrap:wrap}
.tag--btn{cursor:pointer;user-select:none;text-decoration:none}
.sr:checked + .tag--btn,.tag--btn[aria-current]{background:var(--accent);color:var(--base);border-color:var(--accent)}
.sr:focus-visible + .tag--btn{outline:2px solid var(--accent);outline-offset:2px}

/* Capa de componentes — escrita a mano. build-tokens.mjs la concatena tras el :root generado. */

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

body {
  margin: 0;
  background: var(--base);
  color: var(--contrast);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p  { margin: 0; max-width: var(--measure-text); }

/* El acento no se usa en enlaces de cuerpo: se revela en hover. */
a { color: var(--contrast); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-subtle); }

.mono { font-family: var(--font-mono); }
.caption { font-size: var(--text-caption); color: var(--muted); }
.lead { font-size: var(--text-lg); color: var(--muted); }
.kicker { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted); letter-spacing: 0.04em; }

.container { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-9) 0; }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: var(--base); }
.section--ink h2 { color: var(--base); }
.section--ink p { color: var(--border); }

.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

/* Un unico boton de accion. El acento vive aca y en ningun otro lado. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--space-4) var(--space-6);
  border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--base);
  font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent-hover); color: var(--base); }
.btn:active { background: var(--accent-hover); }
.btn--lg { min-height: 56px; padding: var(--space-4) var(--space-7); font-size: var(--text-lg); }
.btn--quiet { background: transparent; color: var(--contrast); border: 1px solid var(--border); }
.btn--quiet:hover { background: var(--surface); color: var(--contrast); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.card { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--base); }
.card--surface { background: var(--surface); border-color: transparent; }
.card__title { font-size: var(--text-lg); font-weight: 600; }
.card__meta { font-size: var(--text-caption); color: var(--muted); }

/* Muro de clientes. Sin carrusel: las imagenes van con width/height. Cada logo vive
   en una baldosa de proporcion fija, asi que el alto de la fila no depende de la
   imagen y cargar tarde no mueve nada. Son logos de terceros y muchos traen fondo
   blanco propio: la baldosa es blanca, y el logo va en gris hasta que se lo apunta. */
.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-4); }
.client { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; padding: var(--space-4); background: var(--base); border: 1px solid var(--border); border-radius: var(--radius); }
.client a { display: flex; width: 100%; height: 100%; }
.client img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.8; }
.client:hover img, .client:focus-within img { filter: none; opacity: 1; }
.clients-more > summary { list-style: none; cursor: pointer; }
.clients-more > summary::-webkit-details-marker { display: none; }
.clients-more[open] > summary { margin-bottom: var(--space-5); }

.quote { font-size: var(--text-h3); line-height: 1.4; font-weight: 600; max-width: 900px; }
.quote__by { display: flex; gap: var(--space-4); align-items: center; }
.quote__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* El acordeon de FAQ lleva el contenido en el HTML, no inyectado. */
.faq { display: flex; flex-direction: column; gap: var(--space-6); }
.faq__item { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq__q { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); }

/* Tabla comparativa. Scroll horizontal en movil: nunca se comprime hasta romper la lectura. */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table caption { caption-side: bottom; text-align: left; }
.table th { padding: var(--space-4) var(--space-6); text-align: left; font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 400; letter-spacing: 0.04em; color: var(--muted); background: var(--base); }
.table th + th, .table td + td { border-left: 1px solid var(--border); }
.table th + th { color: var(--contrast); }
.table td { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border); vertical-align: top; width: 50%; color: var(--muted); }
.table td + td { color: var(--contrast); background: var(--base); }

/* Lista con icono. La columna de descarte va en muted: presente, pero sin competir. */
.list { display: flex; flex-direction: column; gap: var(--space-4); }
.list__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.list__item svg { flex-shrink: 0; margin-top: 3px; }
.list--out .list__item { color: var(--muted); }
/* El check es siempre azul de acento, en toda lista de lo que se obtiene. */
.list__item .i-check { color: var(--accent); }
/* Tarjeta de urgencia ("Sin ..."): lo que pasa si no se actua. Rojo en titulo, cruz
   y borde; el texto sube a contraste pleno, no va en muted. Las exclusiones de
   alcance ("No incluye") siguen en .list--out: no son un riesgo. */
.card--danger { background: var(--danger-subtle); border-color: var(--danger); }
.list--danger .list__item .i-close { color: var(--danger); }

/* Feedback: nunca como texto. Solo fondo con texto oscuro. */
.pill { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius); font-size: var(--text-caption); color: var(--contrast); }
.pill--ok { background: var(--success); }
.pill--warn { background: var(--alert); }

/* Marcador de dato que todavia no tenemos. Se borra al completarlo. */
.todo { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted); border: 1px dashed var(--muted); border-radius: 4px; padding: var(--space-1) var(--space-2); display: inline-block; }


/* Contenido Markdown de los articulos. Es el unico lugar donde se estilan
   etiquetas desnudas: el markdown no lleva clases, y agregarselas exigiria un
   post-proceso que no aporta nada. Todo sale de los tokens igual. */
.prose { display: flex; flex-direction: column; gap: var(--space-5); }
.prose > * { margin: 0; }
.prose h2 { font-size: var(--t-h2); margin-top: var(--space-6); }
.prose h3 { font-size: var(--t-h3); font-weight: 600; margin-top: var(--space-4); }
.prose p, .prose li { font-size: var(--t-body); line-height: 1.7; color: var(--muted); }
.prose strong { color: var(--contrast); font-weight: 600; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: var(--space-3); padding-left: var(--space-5); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
.prose pre { background: var(--surface); padding: var(--space-5); border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-5); color: var(--contrast); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); text-align: left; font-size: var(--t-body); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* Color dentro del articulo. El texto corrido sube de muted a reading: muted es
   para notas, no para leer 2.000 palabras. Los titulos van en ink, el azul del
   logo, con una marca corta de acento sobre cada H2 que ordena la lectura. Los
   enlaces del texto van en accent-hover (6,5:1), como en las apps. */
.prose p, .prose li { color: var(--reading); }
.prose h2, .prose h3 { color: var(--ink); }
.prose h2::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: var(--space-4); }
.prose a { color: var(--accent-hover); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.prose li::marker { color: var(--accent); }
.prose ol > li::marker { color: var(--accent-hover); font-weight: 600; }
.prose code { background: var(--accent-subtle); color: var(--ink); }
.prose pre { background: var(--ink); color: var(--border); }
.prose pre code { color: inherit; }
.prose thead th { background: var(--surface); color: var(--ink); font-weight: 600; border-top: 0; }
.prose tr:last-child td { border-bottom: 1px solid var(--border); }

/* Etiqueta editorial. Agrupa articulos; no es un boton ni un enlace. Va en
   pastilla celeste como en las apps: accent-hover sobre accent-subtle, porque el
   accent puro queda en 4,2:1 y la etiqueta es texto chico. */
.tag { font-size: var(--t-cap); font-weight: 600; color: var(--accent-hover); background: var(--accent-subtle); border: 1px solid transparent; border-radius: 999px; padding: 4px 12px; line-height: 1.4; }

/* Filtro del blog: pastillas blancas con borde y 44px de area tactil. La activa
   va en accent (la regla vive en build-tokens.mjs, junto a las de :has()). */
.tag--btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); font-size: var(--t-body); color: var(--contrast); background: var(--base); border-color: var(--border); transition: border-color .2s ease, background-color .2s ease; }
.tag--btn:hover { border-color: var(--accent); }

/* Tarjeta del indice del blog. */
.post { position: relative; transition: border-color .2s ease, box-shadow .2s ease; }
.post p { margin: 0; }
.post__link { color: var(--contrast); text-decoration: none; }
.post__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgb(0 48 72 / 0.08); }
.post:hover .post__link { color: var(--accent); }
.post:has(.post__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.post__link:focus-visible { outline: none; }
.post__meta { margin-top: auto; padding-top: var(--space-2); }
.post__avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--accent); color: var(--base); font-weight: 700; letter-spacing: 0.04em; }
.post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post__by { display: flex; flex-direction: column; }
.post__author { color: var(--contrast); font-weight: 600; }
/* Etiqueta como enlace a su tema (misma ventana). En la tarjeta queda por encima
   del ::after del titulo, que cubre la tarjeta entera. Su propio ::after estira el
   area tactil a 44 px de alto sin agrandar la pastilla. */
a.tag { text-decoration: none; transition: background-color .2s ease, color .2s ease; }
a.tag:not(.tag--btn):hover { background: var(--accent-hover); color: var(--base); }
a.tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.post .tag { position: relative; z-index: 1; }
a.tag { position: relative; }
a.tag::after { content: ""; position: absolute; inset: -7px 0; }
@media (prefers-reduced-motion: reduce) { .tag--btn, .post, a.tag { transition: none; } }

/* Insignia de contenido exclusivo en la tarjeta del blog. Misma pastilla que .tag (tamano, radio,
   relleno y tipografia); solo cambia el color por nivel y lleva candado: cerrado en el HTML, abierto
   cuando cuenta.js ve una sesion cuya clase alcanza el nivel (.is-abierto, sin cambio de color).
   Contrastes: C accent-hover sobre accent-subtle 5,94:1; B ink sobre success al 18 % 12,04:1;
   A base sobre ink 13,85:1. No es un enlace: no cambia en hover. */
.tag--nivel { display: inline-flex; align-items: center; gap: var(--space-1); }
.tag--nivel .i { width: 16px; height: 16px; margin-top: 0; }
.tag--nivel-c { color: var(--accent-hover); background: var(--accent-subtle); border-color: var(--accent); }
.tag--nivel-b { color: var(--ink); background: color-mix(in srgb, var(--success) 18%, var(--base)); border-color: var(--success); }
.tag--nivel-a { color: var(--base); background: var(--ink); border-color: var(--ink); }

.blogindex__wrap { display: grid; gap: var(--space-6); }
.blogindex__intro { max-inline-size: var(--measure-text); }
.blogindex__filters { display: grid; gap: var(--space-3); }
.blogindex .tagbar { gap: var(--space-2); }
.blogindex__count { font-size: var(--t-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.blogindex__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.blogindex__card { display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; padding: 0; }
.blogindex__media { aspect-ratio: 1200 / 630; overflow: hidden; display: grid; background: var(--accent-subtle); border-start-start-radius: inherit; border-start-end-radius: inherit; }
.blogindex__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.blogindex__media--text { background: var(--accent-subtle); color: var(--contrast); }
.blogindex__plate { display: grid; align-content: center; gap: var(--space-2); padding: var(--space-5); overflow-wrap: anywhere; }
.blogindex__plate span { color: var(--accent-hover); font-size: var(--t-cap); font-weight: 600; }
.blogindex__plate strong { font-size: var(--t-h3); line-height: 1.2; }
.blogindex__card-body { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; padding: var(--space-5); }
.blogindex__card-body h2 { line-height: 1.2; overflow-wrap: anywhere; }
.blogindex__byline { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--t-cap); color: var(--muted); }
.blogindex__card-topics { margin-block-start: auto; padding-block-start: var(--space-2); }

/* Indice del articulo. El nivel activo va en acento, como el filtro activo del
   indice del blog: borde accent y texto accent-hover sobre accent-subtle. */
.toc { margin-block-end: var(--space-6); }
.toc__box { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
/* Temas del articulo, arriba del indice y dentro de la misma caja. */
.toc__tags { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.toc__tags:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.toc__title { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-cap); color: var(--muted); letter-spacing: 0.04em; cursor: pointer; list-style: none; }
.toc__title::-webkit-details-marker { display: none; }
.toc__link { display: flex; align-items: center; min-height: 44px; font-size: var(--t-cap); line-height: 1.4; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 4px; border-left: 2px solid transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.toc__link:hover { color: var(--contrast); background: var(--base); }
.toc__link--count { justify-content: space-between; gap: var(--space-3); }
.toc__count { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
.toc__link[aria-current] { color: var(--accent-hover); background: var(--accent-subtle); border-left-color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .toc__link { transition: none; } }

/* Columna lateral del articulo. En movil es una pila: indice, texto y despues la
   caja de autor -de ahi el order-, y el riel desaparece con display:contents para
   que sus hijos sean hermanos de .article-body. En escritorio vuelve a ser una
   caja propia y se pega. */
.article-grid { display: flex; flex-direction: column; gap: var(--space-6); }
.rail { display: contents; }
.authorbox { order: 1; display: flex; flex-direction: column; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); background: var(--surface); }
.authorbox__kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-cap); color: var(--muted); letter-spacing: 0.04em; margin: 0; }
.authorbox__avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--accent-subtle); color: var(--ink); font-weight: 700; font-size: var(--t-cap); letter-spacing: 0.04em; }
.authorbox__avatar img { width: 100%; height: 100%; object-fit: cover; }
.authorbox__name { color: var(--contrast); font-weight: 600; text-decoration: none; }
.authorbox__name:hover { color: var(--accent); }
.authorbox p { margin: 0; }
.authorbox__creds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.authorbox__creds a { font-size: var(--t-cap); line-height: 1.4; color: var(--muted); }

/* Agregar CookingMetrics en Google: el sitio como fuente preferida (deeplink de
   org.preferredSource en site.json; sin script de Google). Va en el pie de toda la
   web, en la lateral del articulo y en el pie de cada app, que lo toma de su copia
   de esta hoja (docs/projects.md). Imita el boton oficial: fondo blanco, borde y la
   G con sus colores, que va de fondo porque los iconos del sitio son de un color.
   Markup: <a class="gsource" href="..."><texto> <span class="gsource__g" aria-hidden="true"></span><span class="sr">Google</span></a> */
.gsource { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-4); border: 1px solid var(--muted); border-radius: 12px; background: var(--base); color: var(--contrast); font-size: var(--text-body); font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; }
.gsource:hover { background: var(--surface); border-color: var(--ink); color: var(--contrast); }
.gsource:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sobre ink (el pie) el anillo accent no llega a 3:1: va en blanco. */
.bg-ink .gsource:focus-visible { outline-color: var(--base); }
.gsource__g { flex: none; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .gsource { transition: background-color .2s ease, border-color .2s ease; } }

/* Articulo del blog en tres columnas: indice, lectura y lateral. Todo vive bajo
   .blogpost, que esta debajo del breadcrumb: no toca la cabecera, el breadcrumb ni
   la grilla de dos columnas anterior (.article-grid). Regla del sitio: los bordes
   del contenido son los del .wrap, los mismos del logo, el boton de la cabecera y
   el breadcrumb; nada se centra con un ancho propio. La lectura nunca pasa de
   720px: lo que sobra lo toman las columnas de los costados. En movil es una
   columna; la grilla por ancho esta en responsive.css. --blogpost-header es el
   alto real de la cabecera, que mide toc.js; sin script vale --header-h. */
.blogpost { --blogpost-header: var(--header-h); container: blogpost / inline-size; }
.blogpost__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.blogpost__layout > *, .blogpost__article > * { min-inline-size: 0; }
.blogpost__article { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); align-content: start; max-width: var(--measure-text); }
.blogpost__head { display: flex; flex-direction: column; gap: var(--space-4); }
.blogpost__title { font-size: var(--t-h1); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--contrast); }
.blogpost__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--t-cap); line-height: 1.6; color: var(--muted); }
.blogpost__cover { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--accent-subtle); }
.blogpost__topics { padding-block: var(--space-2); }
/* Enlaces editoriales: accent-hover con subrayado opaco; el traslucido de .prose
   queda por debajo de 3:1 contra el blanco y aca el subrayado es lo que lo marca. */
.blogpost__meta a, .blogpost__prose a, .blogpost__brand a, .blogpost__latest a, .blogpost__end a, .blogpost__more { color: var(--accent-hover); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.blogpost__meta a:hover, .blogpost__prose a:hover, .blogpost__brand a:hover, .blogpost__latest a:hover, .blogpost__end a:hover, .blogpost__more:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Indice: la caja .toc__box de siempre. El titulo del
   <details> tiene 44px y una flecha que dice si esta abierto. */
.blogpost__toc .toc__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
.blogpost__toc .toc__title::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-inline-end: var(--space-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); }
.blogpost__toc details:not([open]) > .toc__title::after { transform: rotate(-45deg); }
/* Items mas juntos que en el autodiagnostico: sin el piso de 44px, cada uno queda
   en unos 28px de alto (AA pide 24) para que el indice entero entre a la vista. */
.blogpost__toc .toc__link { min-height: 0; padding-block: 4px; overflow-wrap: break-word; }

/* Texto. Los titulos dejan aire bajo la cabecera fija al saltar desde el indice
   (el alto de la cabecera ya lo pone scroll-padding-top en html). */
.blogpost__prose { overflow-wrap: break-word; }
.blogpost__title, .blogpost__prose h2, .blogpost__prose h3 { scroll-margin-top: var(--space-5); }
.blogpost__prose h2, .blogpost__prose h3 { line-height: 1.2; }
/* Seccion para lectores con cuenta (marcador de posicion): tarjeta oscura sobre --ink con candado,
   nivel, titulo, resumen, boton y nota. Los selectores llevan .nivel para ganarle a .prose (que
   pinta h3 y enlaces para fondo claro). El salto a #bloque-N deja aire bajo la cabecera. */
.nivel { padding: var(--space-6); border: 1px solid color-mix(in srgb, var(--base) 16%, var(--ink)); border-radius: var(--radius); background: var(--ink); color: var(--base); }
.nivel__kicker { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.nivel__kicker .i { width: 16px; height: 16px; margin-top: 0; }
.prose .nivel__kicker { color: var(--base); }
.prose .nivel__nota, .prose .nivel__aviso { font-size: var(--text-caption); line-height: 1.6; color: var(--border); }
.prose .nivel__titulo { margin: 0; font-size: var(--text-h3); line-height: 1.2; color: var(--base); }
.prose .nivel__resumen, .prose .nivel__sinacceso { font-size: var(--text-lg); line-height: 1.6; color: var(--border); }
.prose .nivel strong, .prose .nivel em, .prose .nivel code { color: var(--base); }
.prose .nivel a { color: var(--base); text-decoration-color: currentColor; }
.prose .nivel a:hover { color: var(--border); }
.prose .nivel a.btn { align-self: flex-start; max-width: 100%; text-align: center; text-decoration: none; }
.prose .nivel a.btn:hover { color: var(--base); }
.nivel :focus-visible { outline-color: var(--base); }
[id^="bloque-"] { scroll-margin-top: var(--space-5); }
.blogpost__prose figcaption { font-size: var(--t-cap); line-height: 1.6; color: var(--muted); }
.blogpost__scroll { overflow-x: auto; }
.blogpost__prose td { width: auto; }

/* Columna lateral, en el orden del DOM: la caja de autor pierde el order:1 que la
   mandaba al final en la grilla anterior. */
.blogpost__side { display: flex; flex-direction: column; gap: var(--space-5); }
.blogpost__side > .authorbox { order: 0; }
.blogpost__paneltitle { font-size: var(--text-lg); font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--ink); }
.blogpost__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius); background: var(--accent-subtle); }
.blogpost__brand p { font-size: var(--text-body); line-height: 1.6; color: var(--reading); }
.blogpost__panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.blogpost__latest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.blogpost__latest li { display: flex; flex-direction: column; gap: var(--space-1); }
.blogpost__latest a { font-size: var(--text-body); line-height: 1.6; overflow-wrap: break-word; }
.blogpost__latest time { font-size: var(--t-cap); line-height: 1.6; color: var(--muted); }
/* Acciones del articulo: agregar el sitio en Google (.gsource, destacado) y el menu
   Compartir (referencia: el de la documentacion de Google). El
   menu es un <details> que se abre en el flujo, asi la lateral con scroll no lo
   recorta. */
.blogpost__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.blogpost__actions .gsource { align-self: stretch; }
.blogpost__actions .i { margin-top: 0; }
.blogpost__sharemenu { align-self: stretch; }
.blogpost__sharebtn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--muted); border-radius: 12px; background: var(--base); color: var(--contrast); font-weight: 600; cursor: pointer; list-style: none; }
.blogpost__sharebtn::-webkit-details-marker { display: none; }
a.blogpost__sharebtn { text-decoration: none; }
/* Compartir, PDF y Markdown en una linea, debajo de .gsource. El borde y el icono van en
   accent. Con el menu abierto, Compartir ocupa la fila y los otros dos pasan debajo. */
.blogpost__tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; align-self: stretch; }
.blogpost__tools > * { flex: 1 1 auto; }
.blogpost__tools > .blogpost__sharemenu { align-self: auto; }
.blogpost__tools > .blogpost__sharemenu > .blogpost__sharebtn { display: flex; }
.blogpost__tools .blogpost__sharebtn { justify-content: center; }
.blogpost__tools > .blogpost__sharemenu[open] { flex: 1 1 100%; }
.blogpost__tools .blogpost__sharebtn { gap: 4px; padding: 0 6px; border-color: var(--accent); font-size: var(--t-cap); }
.blogpost__tools .blogpost__sharebtn .i { width: 16px; height: 16px; color: var(--accent); }
.blogpost__sharebtn:hover { background: var(--surface); }
.blogpost__sharemenu[open] > .blogpost__sharebtn { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.blogpost__share { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid var(--border); border-radius: 16px; background: var(--base); box-shadow: 0 12px 24px rgba(0,48,72,0.10); }
.blogpost__shareitem { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; padding: 0 var(--space-4); border: 0; border-radius: 12px; background: var(--surface); color: var(--contrast); font: inherit; font-size: var(--text-body); text-align: left; text-decoration: none; cursor: pointer; }
/* Prepared messages use native selection as the no-JS/clipboard-denied fallback. */
.blogpost__shareprepared { display: grid; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.blogpost__sharelabel { font-size: var(--t-cap); font-weight: 600; color: var(--ink); }
.blogpost__sharetext { box-sizing: border-box; width: 100%; min-width: 0; resize: vertical; padding: var(--space-3); border: 1px solid var(--border); border-radius: 8px; background: var(--base); color: var(--ink); font: inherit; font-size: var(--t-cap); line-height: 1.5; }
.blogpost__sharestatus, .blogpost__sharehint { display: block; margin: var(--space-2) 0 0; font-size: var(--t-cap); line-height: 1.5; color: var(--ink); }
.blogpost__sharestatus:empty { display: none; }
.blogpost__sharecopy[hidden] { display: none; }
.blogpost__shareitem:disabled { cursor: wait; }
.blogpost__shareitem:hover { background: var(--accent-subtle); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .blogpost__sharebtn, .blogpost__shareitem { transition: background-color .2s ease, border-color .2s ease; } }

/* Cierre del articulo: las fuentes, en la columna de lectura. */
.blogpost__end { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.blogpost__sources { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--t-cap); line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }

/* Fotos. El recorte lo hace object-fit y no el archivo, asi que una misma imagen
   sirve para el retrato cuadrado del heroe y para la tira apaisada. */
.shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }
.shot figcaption { margin: 0; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.talk + .talk { border-top: 1px solid var(--border); padding-top: var(--space-7); }

/* Sello de socio en el pie. El logotipo de CACE viene sobre blanco, asi que se
   sirve sobre una pastilla blanca en vez de recortarlo: es marca de un tercero y
   no se altera. */
.cacebadge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); max-width: 100%; background: #fff; border-radius: var(--radius); padding: 0.5rem 0.875rem; text-decoration: none; }
.cacebadge img { display: block; width: 93px; max-width: 100%; height: auto; }
.cacebadge span { font-size: var(--t-cap); color: var(--ink); font-weight: 600; }

/* Consentimiento. El cartel se pinta con los tokens del sitio a traves de las
   variables que expone la libreria: no se sobrescribe ni una regla suya. */
#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-bg: var(--base);
  --cc-primary-color: var(--contrast);
  --cc-secondary-color: var(--muted);
  --cc-btn-primary-bg: var(--accent);
  --cc-btn-primary-color: var(--base);
  --cc-btn-primary-border-color: var(--accent);
  --cc-btn-primary-hover-bg: var(--accent-hover);
  --cc-btn-primary-hover-color: var(--base);
  --cc-btn-primary-hover-border-color: var(--accent-hover);
  --cc-btn-secondary-bg: var(--surface);
  --cc-btn-secondary-color: var(--contrast);
  --cc-btn-secondary-border-color: var(--border);
  --cc-btn-secondary-hover-bg: var(--accent-subtle);
  --cc-btn-secondary-hover-color: var(--contrast);
  --cc-btn-secondary-hover-border-color: var(--border);
  --cc-btn-border-radius: var(--radius);
  --cc-separator-border-color: var(--border);
  --cc-link-color: var(--accent);
  --cc-toggle-on-bg: var(--accent);
  --cc-toggle-off-bg: var(--muted);
  --cc-cookie-category-block-bg: var(--surface);
  --cc-cookie-category-block-border: var(--border);
  --cc-cookie-category-block-hover-bg: var(--accent-subtle);
  --cc-cookie-category-block-hover-border: var(--border);
  --cc-footer-bg: var(--surface);
  --cc-footer-border-color: var(--border);
  --cc-footer-color: var(--muted);
}

/* Estado de cada categoria: "Siempre activas", "Hoy no se usan". Es dato, no
   adorno: dice la verdad sobre lo que el sitio carga hoy. Va con el id por delante
   porque la libreria hace `#cc-main span { all: unset }` y le gana a una clase. */
#cc-main .cc-estado { display: inline-block; margin-left: var(--space-2); padding: 2px 8px; border-radius: 999px; background: var(--accent-subtle); color: var(--ink); font-size: var(--text-caption); font-weight: 600; }

/* Aviso de que se respeto la señal del navegador. Desde enero de 2026, en
   California no alcanza con honrarla: hay que mostrar que se honro. */
.gpc-aviso { color: var(--border); margin: var(--space-3) 0 0; }

/* Submenus de la navegacion. Sin JavaScript: :hover para mouse y :focus-within
   para teclado. .submenu define su propio flex en vez de usar .stack porque la
   utilidad se genera antes y le ganaria al display:none. */
.hasmenu { position: relative; }
.submenu { position: absolute; top: 100%; left: -0.75rem; min-width: 15rem; display: none; flex-direction: column; background: var(--base); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; box-shadow: 0 12px 24px rgba(0, 48, 72, 0.10); z-index: 30; }
.hasmenu:hover > .submenu, .hasmenu:focus-within > .submenu { display: flex; }
.submenu .navlink { padding-inline: 0.75rem; white-space: nowrap; }
/* «Mi cuenta» e «Ingresar» junto al botón: una sola línea aunque la barra se angoste. */
.hdr-actions .btn--quiet { white-space: nowrap; }
/* Botones de la cabecera con la forma de las etiquetas del blog (decisión del dueño, 2026-11-12):
   pastilla de 44px, en una línea. La cuenta como .tag--btn (blanca con borde, el borde en accent al
   pasar); el CTA como la etiqueta activa (accent). Vale para el sitio, el kit de las apps y la cuenta. */
.hdr-actions .btn, .navlinks .btn, .menu__panel .btn { min-height: 44px; padding: 0 var(--space-5); border-radius: 999px; font-size: var(--t-body); line-height: 1.4; white-space: nowrap; }
.hdr-actions .btn--quiet, .menu__panel .btn--quiet { background: var(--base); color: var(--contrast); border: 1px solid var(--border); transition: border-color .2s ease; }
.hdr-actions .btn--quiet:hover, .menu__panel .btn--quiet:hover { background: var(--base); color: var(--contrast); border-color: var(--accent); }
.hdr-actions .btn:not(.btn--quiet), .navlinks .btn, .menu__panel .btn:not(.btn--quiet) { border: 1px solid var(--accent); }
@media (prefers-reduced-motion: reduce) { .hdr-actions .btn--quiet, .menu__panel .btn--quiet { transition: none; } }
.navlink--sub { padding-left: var(--space-4); font-size: var(--t-cap); }
/* Selector de idioma sobre ink (el pie). .navlink y .c-contrast son para fondo claro:
   sobre ink quedaban en 2,83:1 y 1,33:1. Los demas idiomas van en border, como el texto
   del pie, y revelan blanco con subrayado como .footlink; el actual, en base. */
.bg-ink .navlink { color: var(--border); }
.bg-ink a.navlink:hover { color: var(--base); text-decoration: underline; }
.bg-ink .navlink[aria-current] { color: var(--base); }
/* Titulos de columna del pie: .kicker (definido despues de las utilidades) le ganaba a
   .c-border y quedaban en muted, 2,83:1 sobre ink. */
.bg-ink .kicker { color: var(--border); }

/* Autodiagnostico. Los checks son HTML servido; el JS externo solo suma y persiste.
   El P0 lleva texto oscuro sobre el color de alerta: blanco sobre #f37262 no llega
   a AA. */
.score { background: var(--surface); }
.score__bar { width: 100%; height: 10px; accent-color: var(--accent); }
.check { padding: var(--space-4); background: var(--base); }
/* Campo de texto. Borde en muted (supera 3:1 como control), foco visible en acento y
   estado de error en danger: el color nunca es la unica senal, siempre hay mensaje. */
.field { width: 100%; max-width: 20rem; padding: var(--space-3) var(--space-4); font: inherit; color: var(--contrast); background: var(--base); border: 1px solid var(--muted); border-radius: var(--radius); }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field[aria-invalid="true"] { border-color: var(--danger); }
.check__row { cursor: pointer; }
.check__box { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.check__more > summary { cursor: pointer; list-style: none; color: var(--accent); }
.check__more > summary::-webkit-details-marker { display: none; }
/* Prioridad del control, en pastilla como las etiquetas y con color de significado:
   critico en danger sobre danger-subtle (5,4:1), importante en accent-hover sobre
   accent-subtle (5,9:1), menor en muted sobre surface (4,6:1). */
.sev { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.73125rem; font-weight: 600; line-height: 1.5; }
.sev--p0 { background: var(--danger-subtle); color: var(--danger); }
.sev--p1 { background: var(--accent-subtle); color: var(--accent-hover); }
.sev--p2 { background: var(--surface); color: var(--muted); }
/* Control marcado: borde accent y fondo accent-subtle, para ver de un vistazo que
   esta resuelto. */
.check:has(.check__box:checked) { border-color: var(--accent); background: var(--accent-subtle); }
/* "Como verificarlo": 44 px de alto y una flecha que gira al abrir. */
.check__more > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.check__more > summary::after { content: "▾"; transition: transform .2s ease; }
.check__more[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .check__more > summary::after { transition: none; } }
/* Avance en el riel. Medidor semicircular: un conic-gradient de media vuelta que lee
   --p (0 a 100, lo escribe selfcheck.js) recortado en anillo con una mascara radial.
   Sin SVG ni librerias. Debajo, la cuenta de puntos y el boton de imprimir. */
.gauge { --p: 0; position: relative; width: 100%; max-width: 15rem; aspect-ratio: 2 / 1; margin-inline: auto; overflow: hidden; }
.gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--accent) calc(var(--p) * 0.005turn), var(--border) 0 0.5turn, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.25rem), #000 calc(100% - 1.25rem + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.25rem), #000 calc(100% - 1.25rem + 1px)); }
.gauge__value { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: clamp(1.575rem, 1.26rem + 0.9vw, 2.025rem); font-weight: 700; line-height: 1; color: var(--ink); }
.score__num { margin: 0; text-align: center; font-weight: 600; color: var(--contrast); }
.btn .i { margin: 0 var(--space-2) 0 0; }
.toc__icon { width: 16px; height: 16px; margin-top: 0; color: var(--accent-hover); }

/* "Como verificarlo": pasos numerados y, cuando hay ilustracion, una segunda columna
   con la imagen (WebP; 1200x900 de origen). En movil, una sola columna. */
.howto { display: grid; gap: var(--space-4); }
.howto--media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.howto__steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.howto__steps li { font-size: var(--t-cap); line-height: 1.55; color: var(--reading); padding-left: var(--space-1); }
.howto__steps li::marker { color: var(--accent-hover); font-weight: 700; }
.howto__media { margin: 0; }
.howto__media img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }
.howto__media--pending { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn--ghost:hover { background: var(--accent-subtle); color: var(--accent-hover); }
[hidden] { display: none !important; }

/* Paginas: el mismo lenguaje que el blog (tarjetas, lectura, enlaces, titulos).
   Tarjeta con enlace: el titulo es el enlace y su ::after cubre la tarjeta; el CTA
   descriptivo va al pie, por encima de esa capa, en accent-hover con flecha. */
.card--link { position: relative; transition: border-color .2s ease, box-shadow .2s ease; }
.card--link:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgb(0 48 72 / 0.08); }
.card__link { color: var(--contrast); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link:hover .card__link { color: var(--accent); }
.card--link:has(.card__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.card__link:focus-visible { outline: none; }
.card__foot { margin-top: auto; padding-top: var(--space-2); }
.card__cta { position: relative; z-index: 1; font-weight: 600; color: var(--accent-hover); text-decoration: none; }
.card__cta::after { content: "\00a0→"; }
.card__cta:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .card--link { transition: none; } }

/* Titulos de seccion en ink, el azul del logo, salvo en la franja ink. La marca
   de acento sobre el H2 queda para las secciones de lectura larga (bloque prose),
   como en los articulos. */
.sec:not(.sec--ink) h2 { color: var(--ink); }
.h-mark::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: var(--space-4); }

/* Enlaces dentro del texto: accent-hover con subrayado suave, como en los articulos.
   Solo en parrafos, listas y celdas; no en botones, tarjetas, menu, pie ni breadcrumb,
   y no sobre la franja ink, donde accent-hover no llega al contraste. El articulo
   del blog (.blogpost) define sus propios enlaces: esta regla, por especificidad,
   le pisaba el subrayado opaco y pintaba de azul las filas del menu Compartir. */
main .sec:not(.sec--ink) :is(p, li, td, .list__item) a:not(.btn):not(.card__cta):not(.blogpost *) { color: var(--accent-hover); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration-thickness: 1px; }
main .sec:not(.sec--ink) :is(p, li, td, .list__item) a:not(.btn):not(.card__cta):not(.blogpost *):hover { color: var(--ink); text-decoration-color: var(--accent); }

/* Tablas: encabezado como en los articulos (surface + ink) y celdas en reading. */
.table th, .table th + th { background: var(--surface); color: var(--ink); }
.table td { color: var(--reading); }

/* Cifras destacadas: numero grande en accent sobre una baldosa surface sin borde,
   con la etiqueta en contraste debajo. accent sobre surface da 4,39:1, valido solo
   para texto grande: el numero lo es, la etiqueta no lleva acento. Cada cifra tiene
   que poder respaldarse en el propio sitio (ver eeat-contenido). */
.sec.sec--flush { padding-top: 0; }
.stat { background: var(--surface); border-radius: var(--radius); padding: var(--space-6); }
.stat__value { margin: 0; font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.15rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
.stat__label { margin: 0; font-weight: 600; line-height: 1.4; color: var(--contrast); }

/* Icono en circulo: el icono en accent-hover sobre accent-subtle. Sobre una
   superficie tintada o gris, el circulo pasa a blanco para que se despegue. */
.icon-dot { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-subtle); color: var(--accent-hover); }
.icon-dot .i { margin-top: 0; }
.stat .icon-dot, .callout .icon-dot { background: var(--base); }

/* Tarjeta con tinte de marca: lo que dice CookingMetrics en primera persona (una
   invitacion, una nota) va sobre accent-subtle, como la voz de la marca en las
   apps; el contenido neutro sigue en blanco o surface. Texto en ink y reading. */
.callout { display: flex; gap: var(--space-5); align-items: flex-start; background: var(--accent-subtle); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.callout p { margin: 0; }
.callout .btn--ghost { color: var(--accent-hover); border-color: var(--accent-hover); }
.callout .btn--ghost:hover { background: var(--base); color: var(--ink); }
/* Logos de los asistentes de IA (aiLogos en site/blocks.mjs): archivos oficiales sin
   colorear. La variante oscura es para la pastilla. */
.ai-logos { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.ai-logos img { display: block; width: 22px; height: 22px; }
/* El Blossom oficial trae su espacio libre dentro del archivo (la marca ocupa la mitad):
   se dibuja al doble para igualar el tamano visible, sin agrandar la fila. */
.ai-logos .ai-logos__openai { width: 44px; height: 44px; margin: -11px -7px; }
.ai-logos__name { font-size: var(--text-caption); font-weight: 600; line-height: 1; color: var(--ink); }
.ai-logos--dark .ai-logos__name { color: var(--base); }
.callout > .ai-logos { padding-top: var(--space-2); }
/* Al llegar por #asistente (la pastilla del hero), el recuadro entra entero debajo de
   la cabecera, con los logos, y queda resaltado. */
.callout h2:target { scroll-margin-top: 5rem; }
.callout:has(h2:target) { box-shadow: 0 0 0 3px var(--accent); }
/* Pastilla para copiar la instruccion en un asistente de IA (agentButton en
   site/blocks.mjs): texto a la izquierda, logos a la derecha. Es una accion secundaria:
   va en contrast, no en el accent del CTA principal. */
.agent-btn { display: inline-flex; align-items: center; gap: var(--space-4); max-width: 100%; min-height: 48px; padding: var(--space-2) var(--space-5); border-radius: 999px; background: var(--contrast); color: var(--base); font-weight: 600; text-decoration: none; }
.agent-btn:hover { background: var(--ink); color: var(--base); }
.agent-btn__label { line-height: 1.3; }
/* Instruccion para copiar en un asistente de IA: el mismo bloque de codigo que el
   articulo (ink sobre border), pero sin desborde lateral: la URL corta donde haga falta. */
.callout__prompt { margin: 0; background: var(--ink); color: var(--border); padding: var(--space-4) var(--space-5); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--text-caption); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Proteccion de textos al imprimir: la pagina no sale, sale el aviso. El texto
   viene del manifiesto por idioma (langs.*.t.printBlocked) en data-print del
   <body>; la hoja no lleva copy. Disuade, no protege: ver site/assets/protect.js. */
@media print {
  body > * { display: none !important; }
  body::before { content: attr(data-print); display: block; max-width: 36rem; padding: 2rem; white-space: pre-line; font: 400 1.125rem/1.6 var(--font-sans); color: #000; }
  /* Excepcion: el informe del autodiagnostico, que se imprime solo desde su boton. */
  body.is-printing-report::before { content: none; display: none; }
  body.is-printing-report > .print-report { display: block !important; }
}

/* Informe imprimible del autodiagnostico: diapositivas A4 apaisadas. Fuera de la
   impresion no se ve. print-color-adjust conserva fondos y el medidor en el PDF. */
@page { size: A4 landscape; margin: 0; }
.print-report { display: none; font-family: var(--font-sans); color: var(--contrast); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-report p { margin: 0; max-width: none; }
.pr-slide { position: relative; box-sizing: border-box; width: 297mm; height: 209mm; padding: 16mm 18mm 14mm; display: flex; flex-direction: column; gap: 6mm; overflow: hidden; break-after: page; background: var(--base); }
.pr-slide:last-child { break-after: auto; }
.pr-slide::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3mm; background: var(--accent); }
.pr-logo { width: 48mm; height: auto; }
.pr-kicker { font-family: var(--font-mono); font-size: 8.5pt; letter-spacing: 0.04em; color: var(--muted); }
.pr-title { font-size: 24pt; font-weight: 700; line-height: 1.15; color: var(--ink); }
.pr-meta { font-size: 10pt; color: var(--muted); }
.pr-cover__body { display: grid; grid-template-columns: 70mm minmax(0, 1fr); gap: 12mm; align-items: center; margin-top: 4mm; }
.pr-score { display: flex; flex-direction: column; gap: 3mm; text-align: center; }
.pr-score .gauge { max-width: 70mm; }
.pr-score .gauge__value { font-size: 26pt; }
.pr-score__num { font-weight: 600; font-size: 11pt; }
.pr-score__note { font-size: 9pt; color: var(--danger); }
.pr-fams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
.pr-fam { display: flex; align-items: center; gap: 3mm; padding: 4mm; border-radius: var(--radius); background: var(--surface); }
.pr-fam__name { flex: 1; font-size: 10.5pt; font-weight: 600; color: var(--ink); }
.pr-fam__count { font-size: 11pt; font-weight: 700; color: var(--accent-hover); font-variant-numeric: tabular-nums; }
.pr-head { display: flex; align-items: center; gap: 4mm; }
.pr-head__title { font-size: 18pt; font-weight: 700; color: var(--ink); }
.pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5mm; }
.pr-card { display: flex; flex-direction: column; gap: 1.5mm; padding: 3.5mm 4mm; border: 0.3mm solid var(--border); border-radius: var(--radius); break-inside: avoid; }
.pr-card--ok { border-color: var(--accent); background: var(--accent-subtle); }
.pr-chips { display: flex; gap: 2mm; flex-wrap: wrap; }
.pr-status { display: inline-block; padding: 0.3mm 2.5mm; border-radius: 999px; font-size: 8pt; font-weight: 600; }
.pr-status--ok { background: var(--success); color: var(--contrast); }
.pr-status--pending { background: var(--surface); color: var(--muted); }
.pr-card .sev { font-size: 8pt; }
.pr-card__title { font-size: 10pt; font-weight: 600; line-height: 1.3; color: var(--contrast); }
.pr-card__where { font-size: 8.5pt; line-height: 1.35; color: var(--muted); }
.pr-end { gap: 7mm; }
.pr-cta { display: flex; flex-direction: column; gap: 4mm; padding: 10mm 12mm; border-radius: var(--radius); background: var(--accent-subtle); }
.pr-cta__text { font-size: 12pt; line-height: 1.5; color: var(--reading); max-width: 200mm; }
.pr-btn { align-self: flex-start; padding: 3.5mm 7mm; border-radius: var(--radius); background: var(--accent); color: var(--base); font-size: 12pt; font-weight: 600; text-decoration: none; }
.pr-cta__url { font-size: 9pt; color: var(--accent-hover); }
.pr-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; }
.pr-links .pr-kicker { grid-column: 1 / -1; }
.pr-link { display: flex; flex-direction: column; gap: 1mm; padding: 4mm; border: 0.3mm solid var(--border); border-radius: var(--radius); text-decoration: none; }
.pr-link__label { font-size: 10.5pt; font-weight: 600; color: var(--ink); }
.pr-link__url { font-size: 8.5pt; color: var(--accent-hover); }
.pr-note { font-size: 8.5pt; color: var(--muted); }
.pr-foot { position: absolute; left: 18mm; right: 18mm; bottom: 7mm; display: flex; justify-content: space-between; font-size: 8pt; color: var(--muted); }

/* Seccion exclusiva ya abierta: sigue destacada con un recuadro de guiones, el candado abierto,
   «Contenido exclusivo» y el nivel de acceso de la persona. */
.nivel-abierto { padding: var(--space-6); border: 2px dashed var(--accent); border-radius: var(--radius); }
.nivel-abierto__tag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.nivel-abierto__tag .i { width: 16px; height: 16px; margin-top: 0; }
.nivel-abierto__nota { padding: var(--space-1) var(--space-3); border-radius: var(--radius); background: var(--accent); color: var(--base); letter-spacing: 0.02em; text-transform: none; }
.nivel-abierto__cuerpo > :first-child { margin-top: 0; }
.nivel-abierto__cuerpo > * + * { margin-top: var(--space-4); }

/* Indice: las secciones exclusivas llevan candado; cerrada en gris oscuro, abierta en gris suave. */
.toc__link--zona { align-items: center; gap: var(--space-2); margin-block: 3px; font-weight: 600; color: var(--contrast); background: color-mix(in srgb, var(--accent) 14%, var(--base)); border-left: 3px solid var(--accent); }
.toc__link--zona:hover { color: var(--contrast); background: color-mix(in srgb, var(--accent) 22%, var(--base)); border-left-color: var(--accent); }
.toc__link--zona .i { width: 14px; height: 14px; color: var(--accent); }
.toc__link--zona.toc__link--abierta { font-weight: 500; color: var(--muted); background: var(--accent-subtle); border-left-style: dashed; }

/* Deslizador para ingresar desde una zona exclusiva: la perilla con el candado se arrastra hasta
   el final; el candado se abre y se abre la ventana de ingreso. */
.deslizar { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; max-width: 32rem; min-height: 52px; padding: 4px; border-radius: 999px; background: var(--accent); color: var(--base); user-select: none; touch-action: pan-y; }
.deslizar__texto { padding: 0 var(--space-6) 0 calc(44px + var(--space-4)); font-weight: 600; text-align: center; line-height: 1.3; }
.deslizar__perilla { position: absolute; left: 4px; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--base); color: var(--accent); cursor: grab; transition: transform .25s ease; touch-action: none; }
.deslizar--arrastrando .deslizar__perilla { transition: none; cursor: grabbing; }
.deslizar__perilla .i { width: 20px; height: 20px; margin-top: 0; }
.deslizar__perilla:focus-visible { outline: 2px solid var(--base); outline-offset: 2px; }
.deslizar--abierto { background: var(--accent-hover, var(--accent)); }


#cc-main{background:transparent;color:var(--cc-primary-color);font-family:var(--cc-font-family);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.15;position:relative;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;position:fixed;z-index:var(--cc-z-index)}#cc-main :after,#cc-main :before,#cc-main a,#cc-main button,#cc-main div,#cc-main h2,#cc-main input,#cc-main p,#cc-main span{all:unset;box-sizing:border-box}#cc-main .pm__badge,#cc-main button{all:initial;box-sizing:border-box;color:unset;visibility:unset}#cc-main .pm__badge,#cc-main a,#cc-main button,#cc-main input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}#cc-main table,#cc-main tbody,#cc-main td,#cc-main th,#cc-main thead,#cc-main tr{all:revert;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}:root{--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--cc-modal-border-radius:.5rem;--cc-btn-border-radius:.4rem;--cc-modal-transition-duration:.25s;--cc-link-color:var(--cc-btn-primary-bg);--cc-modal-margin:1rem;--cc-z-index:2147483647;--cc-bg:#fff;--cc-primary-color:#2c2f31;--cc-secondary-color:#5e6266;--cc-btn-primary-bg:#30363c;--cc-btn-primary-color:#fff;--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#000;--cc-btn-primary-hover-color:#fff;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#eaeff2;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#d4dae0;--cc-btn-secondary-hover-color:#000;--cc-btn-secondary-hover-border-color:#d4dae0;--cc-separator-border-color:#f0f4f7;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#667481;--cc-toggle-on-knob-bg:#fff;--cc-toggle-off-knob-bg:var(--cc-toggle-on-knob-bg);--cc-toggle-enabled-icon-color:var(--cc-bg);--cc-toggle-disabled-icon-color:var(--cc-bg);--cc-toggle-readonly-bg:#d5dee2;--cc-toggle-readonly-knob-bg:#fff;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:var(--cc-cookie-category-block-bg);--cc-cookie-category-block-bg:#f0f4f7;--cc-cookie-category-block-border:#f0f4f7;--cc-cookie-category-block-hover-bg:#e9eff4;--cc-cookie-category-block-hover-border:#e9eff4;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:#dee4e9;--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:var(--cc-btn-secondary-bg);--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#e4eaed;--cc-pm-toggle-border-radius:4em}#cc-main.cc--rtl{direction:rtl}#cc-main .cm__title,#cc-main a,#cc-main b,#cc-main em,#cc-main strong{font-weight:600}#cc-main button>span{pointer-events:none}#cc-main .cc__link,#cc-main a{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;font-weight:600;position:relative;transition:background-size .25s,color .25s ease}#cc-main .cc__link:hover,#cc-main a:hover{background-size:100% 1px;color:var(--cc-primary-color)}#cc-main .cc__link{color:var(--cc-link-color)}#cc-main .cm__desc,#cc-main .pm__body{overscroll-behavior:auto contain;scrollbar-width:thin}@media screen and (min-width:640px){#cc-main ::-webkit-scrollbar,#cc-main ::-webkit-scrollbar-thumb,#cc-main ::-webkit-scrollbar-track{all:revert}#cc-main ::-webkit-scrollbar-thumb{-webkit-background-clip:padding-box;background-clip:padding-box;background:var(--cc-toggle-readonly-bg);border:.25rem solid var(--cc-bg);border-radius:1rem}#cc-main ::-webkit-scrollbar-thumb:hover{background:var(--cc-toggle-off-bg)}#cc-main ::-webkit-scrollbar{background:transparent;width:12px}}html.disable--interaction.show--consent,html.disable--interaction.show--consent body{height:auto!important;overflow:hidden!important}@media (prefers-reduced-motion){#cc-main{--cc-modal-transition-duration:0s}}.cc--darkmode{--cc-bg:#161a1c;--cc-primary-color:#ebf3f6;--cc-secondary-color:#aebbc5;--cc-btn-primary-bg:#c2d0e0;--cc-btn-primary-color:var(--cc-bg);--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#98a7b6;--cc-btn-primary-hover-color:#000;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#242c31;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#353d43;--cc-btn-secondary-hover-color:#fff;--cc-btn-secondary-hover-border-color:var(--cc-btn-secondary-hover-bg);--cc-separator-border-color:#222a30;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#525f6b;--cc-toggle-on-knob-bg:var(--cc-btn-primary-color);--cc-toggle-off-knob-bg:var(--cc-btn-primary-color);--cc-toggle-enabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-disabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-readonly-bg:#343e45;--cc-toggle-readonly-knob-bg:#5f6b72;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:#1e2428;--cc-cookie-category-block-bg:#1e2428;--cc-cookie-category-block-border:var(--cc-section-category-border);--cc-cookie-category-block-hover-bg:#242c31;--cc-cookie-category-block-hover-border:#232a2f;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:var(--cc-toggle-readonly-bg);--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:#0c0e0f;--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#060809}.cc--darkmode #cc-main{color-scheme:dark}#cc-main .cm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;max-width:24rem;opacity:0;overflow:hidden;position:fixed;transform:translateY(1.6em);visibility:hidden;z-index:1}#cc-main .cm--top{top:var(--cc-modal-margin)}#cc-main .cm--middle{top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .cm--bottom{bottom:var(--cc-modal-margin)}#cc-main .cm--center{left:var(--cc-modal-margin);margin:0 auto;right:var(--cc-modal-margin);width:unset}#cc-main .cm--left{left:var(--cc-modal-margin);margin-right:var(--cc-modal-margin)}#cc-main .cm--right{margin-left:var(--cc-modal-margin);right:var(--cc-modal-margin)}#cc-main .cm__body{display:flex;flex-direction:column;justify-content:space-between;position:relative}#cc-main .cm__btns,#cc-main .cm__links{padding:1rem 1.3rem;width:unset}#cc-main .cm__texts{display:flex;flex:1;flex-direction:column;justify-content:center;padding:1rem 0 0}#cc-main .cm__desc,#cc-main .cm__title{padding:0 1.3rem}#cc-main .cm__title{font-size:1.05em}#cc-main .cm__title+.cm__desc{margin-top:1.1em}#cc-main .cm__desc{color:var(--cc-secondary-color);font-size:.9em;line-height:1.5;max-height:40vh;overflow-x:visible;overflow-y:auto;padding-bottom:1em}#cc-main .cm__btns{border-top:1px solid var(--cc-separator-border-color);display:flex;flex-direction:column;justify-content:center}#cc-main .cm__btn-group{display:grid;grid-auto-columns:minmax(0,1fr)}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin-top:.375rem}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .cm--inline .cm__btn+.cm__btn{margin-left:.375rem;margin-top:0}#cc-main .cm--inline.cm--flip .cm__btn+.cm__btn{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--inline.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-right:0}#cc-main .cm--wide .cm__btn+.cm__btn,#cc-main .cm--wide .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--wide.cm--flip .cm__btn+.cm__btn,#cc-main .cm--wide.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-right:.375rem}#cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven,#cc-main .cm--wide .cm__btn-group--uneven{display:flex;flex:1;justify-content:space-between}#cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven,#cc-main .cm--wide.cm--flip .cm__btn-group--uneven{flex-direction:row-reverse}#cc-main .cm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);font-size:.82em;font-weight:600;min-height:42px;padding:.5em 1em;text-align:center}#cc-main .cm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .cm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close{border-radius:0;border-bottom-left-radius:var(--cc-btn-border-radius);border-right:none;border-top:none;display:none;font-size:1em;height:42px;min-width:auto!important;overflow:hidden;padding:0!important;position:absolute;right:0;top:0;width:42px}#cc-main .cm__btn--close svg{stroke:var(--cc-btn-primary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .cm__btn--close:hover svg{stroke:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--close.cm__btn--secondary svg{stroke:var(--cc-btn-secondary-color)}#cc-main .cm__btn--close.cm__btn--secondary:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close+.cm__texts .cm__title{padding-right:3rem}#cc-main .cm--inline .cm__btn-group{grid-auto-flow:column}#cc-main .cm__footer{background:var(--cc-footer-bg);border-top:1px solid var(--cc-footer-border-color);color:var(--cc-footer-color);padding:.4em 0 .5em}#cc-main .cm__links{display:flex;flex-direction:row;padding-bottom:0;padding-top:0}#cc-main .cm__link-group{display:flex;flex-direction:row;font-size:.8em;width:100%}#cc-main .cm__link-group>*+*{margin-left:1.3rem}#cc-main .cm--flip .cm__btn:last-child{grid-row:1}#cc-main .cm--inline.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--box .cm__btn--close{display:block}#cc-main .cm--box.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--box.cm--wide{max-width:36em}#cc-main .cm--box.cm--wide .cm__btns{flex-direction:row;justify-content:space-between}#cc-main .cm--box.cm--wide .cm__btn-group{grid-auto-flow:column}#cc-main .cm--box.cm--wide .cm__btn{min-width:120px;padding-left:1.8em;padding-right:1.8em}#cc-main .cm--box.cm--wide.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--cloud{max-width:54em;width:unset}#cc-main .cm--cloud .cm__body{flex-direction:row}#cc-main .cm--cloud .cm__texts{flex:1}#cc-main .cm--cloud .cm__desc{max-height:9.4em}#cc-main .cm--cloud .cm__btns{border-left:1px solid var(--cc-separator-border-color);border-top:none;max-width:23em}#cc-main .cm--cloud .cm__btn-group{flex-direction:column}#cc-main .cm--cloud .cm__btn{min-width:19em}#cc-main .cm--cloud.cm--flip .cm__btn-group,#cc-main .cm--cloud.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--cloud.cm--inline .cm__btn-group{flex-direction:row}#cc-main .cm--cloud.cm--inline .cm__btn{min-width:10em}#cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group{flex-direction:row-reverse}#cc-main .cm--bar{border-radius:0;left:0;margin:0;max-width:unset;opacity:1;right:0;transform:translateY(0);width:100vw;--cc-modal-transition-duration:.35s}#cc-main .cm--bar.cm--top{top:0;transform:translateY(-100%)}#cc-main .cm--bar.cm--bottom{bottom:0;transform:translateY(100%)}#cc-main .cm--bar .cm__body,#cc-main .cm--bar .cm__links{margin:0 auto;max-width:55em;width:100%}#cc-main .cm--bar .cm__body{padding:.5em 0 .9em}#cc-main .cm--bar .cm__btns{border-top:none;flex-direction:row;justify-content:space-between}#cc-main .cm--bar .cm__btn-group{grid-auto-flow:column}#cc-main .cm--bar:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--bar .cm__btn{min-width:120px;padding-left:2em;padding-right:2em}#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--bar.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--bar.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--bar.cm--inline .cm__body,#cc-main .cm--bar.cm--inline .cm__links{max-width:74em}#cc-main .cm--bar.cm--inline .cm__body{flex-direction:row;padding:0}#cc-main .cm--bar.cm--inline .cm__btns{flex-direction:column;justify-content:center;max-width:23em}#cc-main .cm--bar.cm--inline.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cc--anim .cm,#cc-main .cc--anim.cm-wrapper:before{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}#cc-main .cc--anim .cm__btn,#cc-main .cc--anim .cm__close{transition:background-color .15s ease,border-color .15s ease,color .15s ease}.disable--interaction #cc-main .cm-wrapper:before{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:0}.show--consent #cc-main .cc--anim .cm{opacity:1;transform:translateY(0);visibility:visible!important}.show--consent #cc-main .cc--anim .cm--middle{transform:translateY(-50%)}.show--consent #cc-main .cc--anim .cm--bar{transform:translateY(0)}.show--consent #cc-main .cc--anim.cm-wrapper:before{opacity:1;visibility:visible}#cc-main.cc--rtl .cm__btn--close{border-bottom-left-radius:unset;border-bottom-right-radius:var(--cc-btn-border-radius);left:0;right:unset}#cc-main.cc--rtl .cm__btn--close+.cm__texts .cm__title{padding-left:3rem!important;padding-right:1.3rem}#cc-main.cc--rtl .cm--inline .cm__btn+.cm__btn{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm--inline.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group+.cm__btn-group,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group+.cm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm__link-group>*+*{margin-left:0;margin-right:1.3rem}@media screen and (max-width:640px){#cc-main{--cc-modal-margin:.5em}#cc-main .cm{max-width:none!important;width:auto!important}#cc-main .cm__body{flex-direction:column!important;padding:0!important}#cc-main .cm__btns,#cc-main .cm__desc,#cc-main .cm__links,#cc-main .cm__title{padding-left:1.1rem!important;padding-right:1.1rem!important}#cc-main .cm__btns{border-left:none!important;border-top:1px solid var(--cc-separator-border-color)!important;flex-direction:column!important;max-width:none!important;min-width:auto!important}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin:.375rem 0 0!important}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .cm__btn-group{display:flex!important;flex-direction:column!important;min-width:auto!important}#cc-main .cm__btn{flex:auto!important}#cc-main .cm__link-group{justify-content:center!important}#cc-main .cm--flip .cm__btn-group,#cc-main .cm--flip .cm__btns{flex-direction:column-reverse!important}}#cc-main .pm-wrapper{position:relative;z-index:2}#cc-main .pm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;opacity:0;overflow:hidden;position:fixed;visibility:hidden;width:100%;width:unset;z-index:1}#cc-main svg{fill:none;width:100%}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:1em 1.4em}#cc-main .pm__header{align-items:center;border-bottom:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__title{align-items:center;display:flex;flex:1;font-weight:600;margin-right:2em}#cc-main .pm__close-btn{background:var(--cc-btn-secondary-bg);border:1px solid var(--cc-btn-secondary-border-color);border-radius:var(--cc-btn-border-radius);height:40px;position:relative;transition:all .15s ease;width:40px}#cc-main .pm__close-btn span{display:flex;height:100%;width:100%}#cc-main .pm__close-btn svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .pm__close-btn:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color)}#cc-main .pm__close-btn:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .pm__body{flex:1;overflow-y:auto;overflow-y:overlay}#cc-main .pm__section,#cc-main .pm__section--toggle{border-radius:var(--cc-btn-border-radius);display:flex;flex-direction:column;margin-bottom:.5em}#cc-main .pm__section--toggle .pm__section-desc-wrapper{border:1px solid var(--cc-cookie-category-block-border);border-radius:var(--cc-btn-border-radius);border-top:none;border-top-left-radius:0;border-top-right-radius:0;display:none;margin-top:0!important;overflow:hidden}#cc-main .pm__section{border:1px solid var(--cc-separator-border-color);padding:1em;transition:background-color .25s ease,border-color .25s ease}#cc-main .pm__section:first-child{border:none;margin-bottom:2em;margin-top:0;padding:0;transition:none}#cc-main .pm__section:not(:first-child):hover{background:var(--cc-cookie-category-block-bg);border-color:var(--cc-cookie-category-block-border)}#cc-main .pm__section-toggles+.pm__section{margin-top:2em}#cc-main .pm__section--toggle{background:var(--cc-cookie-category-block-bg);border-top:none;margin-bottom:.375rem}#cc-main .pm__section--toggle .pm__section-title{align-items:center;background:var(--cc-cookie-category-block-bg);border:1px solid var(--cc-cookie-category-block-border);display:flex;justify-content:space-between;min-height:58px;padding:1.1em 5.4em 1.1em 1.2em;position:relative;transition:background-color .25s ease,border-color .25s ease;width:100%}#cc-main .pm__section--toggle .pm__section-title:hover{background:var(--cc-cookie-category-block-hover-bg);border-color:var(--cc-cookie-category-block-hover-border)}#cc-main .pm__section--toggle .pm__section-desc{margin-top:0;padding:1em}#cc-main .pm__section--toggle.is-expanded{--cc-cookie-category-block-bg:var(--cc-cookie-category-expanded-block-bg);--cc-cookie-category-block-border:var(--cc-cookie-category-expanded-block-hover-bg)}#cc-main .pm__section--toggle.is-expanded .pm__section-title{border-bottom-left-radius:0;border-bottom-right-radius:0}#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg{transform:scale(.5) rotate(180deg)}#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper{display:flex}#cc-main .pm__section--expandable .pm__section-title{cursor:pointer;padding-left:3.4em}#cc-main .pm__section--expandable .pm__section-arrow{background:var(--cc-toggle-readonly-bg);border-radius:100%;display:flex;height:20px;justify-content:center;left:18px;pointer-events:none;position:absolute;width:20px}#cc-main .pm__section--expandable .pm__section-arrow svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5)}#cc-main .pm__section-title-wrapper{align-items:center;display:flex;position:relative}#cc-main .pm__section-title-wrapper+.pm__section-desc-wrapper{margin-top:.85em}#cc-main .pm__section-title{border-radius:var(--cc-btn-border-radius);font-size:.95em;font-weight:600}#cc-main .pm__badge{align-items:center;background:var(--cc-btn-secondary-bg);border-radius:5em;color:var(--cc-secondary-color);display:flex;flex:none;font-size:.8em;font-weight:600;height:23px;justify-content:center;margin-left:1em;min-width:23px;overflow:hidden;padding:0 .6em 1px;position:relative;text-align:center;white-space:nowrap;width:auto}#cc-main .pm__service-counter{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);padding:0;width:23px}#cc-main .pm__service-counter[data-counterlabel]{padding:0 .6em 1px;width:auto}#cc-main .section__toggle,#cc-main .section__toggle-wrapper,#cc-main .toggle__icon,#cc-main .toggle__label{border-radius:var(--cc-pm-toggle-border-radius);height:23px;transform:translateZ(0);width:50px}#cc-main .section__toggle-wrapper{cursor:pointer;position:absolute;right:18px;z-index:1}#cc-main .toggle-service{height:19px;position:relative;right:0;width:42px}#cc-main .toggle-service .section__toggle,#cc-main .toggle-service .toggle__icon,#cc-main .toggle-service .toggle__label{height:19px;width:42px}#cc-main .toggle-service .toggle__icon{position:relative}#cc-main .toggle-service .toggle__icon-circle{height:19px;width:19px}#cc-main .toggle-service .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(23px)}#cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after{display:none!important}#cc-main .section__toggle{border:0;cursor:pointer;display:block;left:0;margin:0;position:absolute;top:0}#cc-main .section__toggle:disabled{cursor:not-allowed}#cc-main .toggle__icon{background:var(--cc-toggle-off-bg);box-shadow:0 0 0 1px var(--cc-toggle-off-bg);display:flex;flex-direction:row;pointer-events:none;position:absolute;transition:all .25s ease}#cc-main .toggle__icon-circle{background:var(--cc-toggle-off-knob-bg);border:none;border-radius:var(--cc-pm-toggle-border-radius);box-shadow:0 1px 2px rgba(24,32,3,.36);display:block;height:23px;left:0;position:absolute;top:0;transition:transform .25s ease,background-color .25s ease;width:23px}#cc-main .toggle__icon-off,#cc-main .toggle__icon-on{height:100%;position:absolute;transition:opacity .15s ease;width:100%}#cc-main .toggle__icon-on{opacity:0;transform:rotate(45deg)}#cc-main .toggle__icon-on svg{stroke:var(--cc-toggle-on-bg);transform:scale(.55) rotate(-45deg)}#cc-main .toggle__icon-off{opacity:1}#cc-main .toggle__icon-off svg{stroke:var(--cc-toggle-off-bg);transform:scale(.55)}#cc-main .section__toggle:checked~.toggle__icon{background:var(--cc-toggle-on-bg);box-shadow:0 0 0 1px var(--cc-toggle-on-bg)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-circle{background-color:var(--cc-toggle-on-knob-bg);transform:translateX(27px)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-on{opacity:1}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-off{opacity:0}#cc-main .section__toggle:checked:disabled~.toggle__icon{background:var(--cc-toggle-readonly-bg);box-shadow:0 0 0 1px var(--cc-toggle-readonly-bg)}#cc-main .section__toggle:checked:disabled~.toggle__icon .toggle__icon-circle{background:var(--cc-toggle-readonly-knob-bg);box-shadow:none}#cc-main .section__toggle:checked:disabled~.toggle__icon svg{stroke:var(--cc-toggle-readonly-knob-icon-color)}#cc-main .toggle__label{opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;z-index:-1}#cc-main .pm__section-desc-wrapper{color:var(--cc-secondary-color);display:flex;flex-direction:column;font-size:.9em}#cc-main .pm__section-desc-wrapper>:not(:last-child){border-bottom:1px solid var(--cc-cookie-category-block-border)}#cc-main .pm__section-services{display:flex;flex-direction:column}#cc-main .pm__service{align-items:center;display:flex;justify-content:space-between;padding:.4em 1.2em;position:relative;transition:background-color .15s ease}#cc-main .pm__service:hover{background-color:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__service-header{align-items:center;display:flex;margin-right:1em;width:100%}#cc-main .pm__service-icon{border:2px solid;border-radius:100%;height:8px;margin-left:6px;margin-right:20px;margin-top:1px;min-width:8px}#cc-main .pm__service-title{font-size:.95em;width:100%;word-break:break-word}#cc-main .pm__section-desc{line-height:1.5em}#cc-main .pm__section-table{border-collapse:collapse;font-size:.9em;margin:0;overflow:hidden;padding:0;text-align:left;width:100%}#cc-main .pm__table-caption{text-align:left}#cc-main .pm__table-caption,#cc-main .pm__table-head>tr{border-bottom:1px dashed var(--cc-separator-border-color);color:var(--cc-primary-color);font-weight:600}#cc-main .pm__table-tr{transition:background-color .15s ease}#cc-main .pm__table-tr:hover{background:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th{padding:.625em .625em .625em 1.2em;vertical-align:top}#cc-main .pm__footer{border-top:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__btn-group{display:flex}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin-left:.375rem}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main .pm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);flex:auto;font-size:.82em;font-weight:600;min-height:42px;min-width:110px;padding:.5em 1.5em;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#cc-main .pm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .pm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .pm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .pm--box{height:calc(100% - 2em);left:var(--cc-modal-margin);margin:0 auto;max-height:37.5em;max-width:43em;right:var(--cc-modal-margin);top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .pm--box.pm--flip .pm__btn-group,#cc-main .pm--box.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm--bar{border-radius:0;bottom:0;height:100%;margin:0;max-height:none;max-width:29em;opacity:1;top:0;width:100%;--cc-modal-transition-duration:.35s}#cc-main .pm--bar .pm__section-table,#cc-main .pm--bar .pm__table-body,#cc-main .pm--bar .pm__table-td,#cc-main .pm--bar .pm__table-th,#cc-main .pm--bar .pm__table-tr{display:block}#cc-main .pm--bar .pm__table-head{display:none}#cc-main .pm--bar .pm__table-caption{display:block}#cc-main .pm--bar .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm--bar .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm--bar .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm--bar .pm__table-td>div{flex:3}#cc-main .pm--bar:not(.pm--wide) .pm__body,#cc-main .pm--bar:not(.pm--wide) .pm__footer,#cc-main .pm--bar:not(.pm--wide) .pm__header{padding:1em 1.3em}#cc-main .pm--bar:not(.pm--wide) .pm__btn-group,#cc-main .pm--bar:not(.pm--wide) .pm__footer{flex-direction:column}#cc-main .pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin:.375rem 0 0}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer{flex-direction:column-reverse}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .pm--bar:not(.pm--wide) .pm__badge{display:none}#cc-main .pm--bar.pm--left{left:0;transform:translateX(-100%)}#cc-main .pm--bar.pm--right{right:0;transform:translateX(100%)}#cc-main .pm--bar.pm--wide{max-width:35em}#cc-main .pm--bar.pm--wide .pm__body,#cc-main .pm--bar.pm--wide .pm__footer,#cc-main .pm--bar.pm--wide .pm__header{padding:1em 1.4em}#cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group,#cc-main .pm--bar.pm--wide.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm-overlay{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:1}#cc-main .cc--anim .pm,#cc-main .cc--anim .pm-overlay{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}.show--preferences #cc-main .cc--anim .pm{opacity:1;visibility:visible!important}.show--preferences #cc-main .cc--anim .pm--box{transform:translateY(-50%)}.show--preferences #cc-main .cc--anim .pm--bar{transform:translateX(0)}.show--preferences #cc-main .cc--anim .pm-overlay{opacity:1;visibility:visible}#cc-main.cc--rtl .pm__service-header{margin-left:1em;margin-right:0}#cc-main.cc--rtl .pm__section-arrow{left:unset;right:18px}#cc-main.cc--rtl .section__toggle-wrapper{left:18px;right:unset;transform-origin:left}#cc-main.cc--rtl .toggle-service{left:0}#cc-main.cc--rtl .pm__service-icon{margin-left:20px;margin-right:5px}#cc-main.cc--rtl .pm__section--toggle .pm__section-title{padding-left:5.4em;padding-right:1.2em}#cc-main.cc--rtl .pm__section--expandable .pm__section-title{padding-right:3.4em}#cc-main.cc--rtl .pm__badge{margin-left:unset;margin-right:1em}#cc-main.cc--rtl .toggle__icon-circle{transform:translateX(27px)}#cc-main.cc--rtl .toggle-service .toggle__icon-circle{transform:translateX(23px)}#cc-main.cc--rtl .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(0)}#cc-main.cc--rtl .pm__table-td,#cc-main.cc--rtl .pm__table-th{padding-left:unset;padding-right:1.2em;text-align:right}#cc-main.cc--rtl .pm__table-td{padding-left:unset;padding-right:1.2em}#cc-main.cc--rtl .pm__table-td:before{padding-left:2em;padding-right:unset}#cc-main.cc--rtl .pm__btn+.pm__btn,#cc-main.cc--rtl .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .pm--flip .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip .pm__btn-group+.pm__btn-group{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin-left:0}@media screen and (max-width:640px){#cc-main .pm{border-radius:0;bottom:0;height:auto;left:0;max-height:100%;max-width:none!important;right:0;top:0;transform:translateY(1.6em)}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:.9em!important}#cc-main .pm__badge{display:none}#cc-main .pm__section-table,#cc-main .pm__table-body,#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th,#cc-main .pm__table-tr{display:block}#cc-main .pm__table-head{display:none}#cc-main .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm__table-td>div{flex:3}#cc-main .pm__btn-group,#cc-main .pm__footer{flex-direction:column!important}#cc-main .pm__btn-group{display:flex!important}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin:.375rem 0 0!important}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .pm--flip .pm__btn-group,#cc-main .pm--flip .pm__footer{flex-direction:column-reverse!important}.show--preferences #cc-main .cc--anim .pm{transform:translateY(0)!important}}

/* Overrides responsive. Van AL FINAL de la hoja a proposito.
   Las utilidades tienen la misma especificidad (0,1,0) que estos selectores, asi
   que si fueran antes, .f{display:flex} le ganaria a .navlinks{display:none} y el
   menu no se ocultaria en movil. Paso exactamente eso en v0.11.0. */

@media (max-width: 900px) {
.cols-2, .cols-3, .cols-4, .hero, .split, .split-wide, .shots { grid-template-columns:1fr; }
/* El pie es lo unico que usa .g4. A 375px daba columnas de 68px con las palabras
   partidas, y el sello de socio se salia de su pastilla. */
.g3, .g4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.navlinks, .hdr-actions { display:none; }
.menu { display:block; }
/* Cifras en movil: una baldosa baja por cifra, icono a la izquierda y numero con su
   etiqueta al lado. Apiladas a lo alto, tres cifras ocupaban mas de una pantalla. */
.stat { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--space-4); row-gap:var(--space-1); align-items:center; padding:var(--space-5); }
.stat .icon-dot { grid-row:span 2; }
.stat__value { font-size:2.025rem; }
/* La tarjeta con tinte apila el icono sobre el texto: al costado le quitaba un
   tercio del ancho al parrafo. */
.callout { flex-direction:column; gap:var(--space-4); }
/* "Como verificarlo" en una sola columna: los pasos y despues la ilustracion. */
.howto--media { grid-template-columns:1fr; }
table { min-width:520px; }
}

@media (max-width: 560px) {
.btn { width:100%; }
.g2, .g3, .g4 { grid-template-columns:1fr; }
}

@media (max-width: 768px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.section { padding: var(--space-8) 0; }
.container { padding: 0 var(--space-5); }
}

@media (min-width: 640px) {
  .blogindex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  .blogindex__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blogindex__card--featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr; }
  .blogindex__card--featured .blogindex__media { align-self: center; border-start-end-radius: 0; border-end-start-radius: inherit; }
  .blogindex__card--featured .blogindex__card-body { justify-content: center; gap: var(--space-4); padding: var(--space-6); }
  .blogindex__card--featured h2 { font-size: var(--t-h2); }
  .blogindex__card--featured .blogindex__card-topics { margin-block-start: 0; }
}

/* El indice pasa a columna pegajosa a la derecha. El cuerpo queda en la columna 1
   para que siga alineado con el logo, la cabecera y el pie. El cuerpo crece hasta
   50rem (algo mas que la medida de 45rem del resto del sitio) y la lateral hasta
   28rem; space-between empuja la lateral contra el borde derecho del .wrap, en
   linea con el boton de la cabecera, y el sobrante queda entre las dos. */
@media (min-width: 1100px) {
.article-grid { display:grid; grid-template-columns:minmax(0,50rem) clamp(16rem,31vw,28rem); justify-content:space-between; gap:clamp(2.5rem,4vw,4rem); align-items:start; }
.article-grid > .article-body, .article-body .prose p { max-width:none; }
.article-grid > .rail { display:flex; flex-direction:column; gap:var(--space-5); grid-column:2; grid-row:1; position:sticky; top:calc(var(--header-h) + 1.5rem); }
.rail > .toc { margin-block-end:0; }
.article-grid > .article-body { grid-column:1; grid-row:1; }
}

/* Articulo del blog (.blogpost). Umbrales propios, separados del 1100 de la grilla
   anterior: a partir de 901px la lateral pasa a la derecha y a partir de 1280px el
   indice ocupa su columna a la izquierda. La grilla llena el .wrap de borde a
   borde: el indice arranca donde el logo y el breadcrumb, y la lateral termina
   donde el boton de la cabecera. La lectura queda en 720px como maximo y los
   costados crecen con lo que sobra (minimos de 14rem y 17rem, o 16rem en dos
   columnas). La lectura necesita 30rem: si la letra agrandada o un contenedor
   angosto no la dejan, la consulta de contenedor baja un nivel aunque la ventana
   sea ancha (48rem = 30 + 16 + hueco; 65rem = 30 + 14 + 17 + dos huecos). */
@media (min-width: 901px) {
  @container blogpost (min-width: 48rem) {
    .blogpost__layout { grid-template-columns: minmax(0,var(--measure-text)) minmax(16rem,1fr); }
  }
}
@media (min-width: 1280px) {
  @container blogpost (min-width: 65rem) {
    .blogpost__layout { grid-template-columns: minmax(14rem,1fr) minmax(0,var(--measure-text)) minmax(17rem,1fr); }
    /* El articulo toma las dos primeras columnas de la grilla externa (subgrid):
       indice y lectura usan las mismas pistas y el mismo hueco. Sin subgrid queda
       un indice de 14rem. */
    .blogpost__article { grid-column: 1 / 3; max-width: none; grid-template-columns: 14rem minmax(0,1fr); grid-template-columns: subgrid; grid-template-rows: auto auto auto; }
    .blogpost__side { grid-column: 3; }
    .blogpost__article > * { grid-column: 2; }
    .blogpost__article > .blogpost__head { grid-column: 1 / -1; grid-row: 1; }
    .blogpost__prose { grid-row: 2; }
    .blogpost__end { grid-row: 3; }
    /* El riel ocupa las filas de lectura; la caja se pega dentro de el, asi que viaja a
       lo largo de todo el articulo y no estira la fila de la cabecera. */
    .blogpost__article > .blogpost__rail { grid-column: 1; grid-row: 2 / 4; }
  }
}
/* Pegajosos solo en pantallas con altura: a 600px o menos (apaisado, zoom) quedan
   en el flujo. El indice y la lateral se pegan bajo la cabecera y, si no entran,
   scrollean dentro de su caja. */
@media (min-width: 901px) and (min-height: 601px) {
  @container blogpost (min-width: 48rem) {
    /* Sin barra visible: con barras fijas (Windows, mouse) le restaba su ancho y
       el borde derecho dejaba de coincidir con el de la cabecera. Sigue
       scrolleando con la rueda, el tacto y el teclado. */
    .blogpost__side { position: sticky; top: calc(var(--blogpost-header) + var(--space-5)); max-height: calc(100vh - var(--blogpost-header) - 2 * var(--space-5)); overflow-y: auto; scrollbar-width: none; }
    .blogpost__side::-webkit-scrollbar { display: none; }
  }
}
@media (min-width: 1280px) and (min-height: 601px) {
  @container blogpost (min-width: 65rem) {
    .blogpost__toc { position: sticky; top: calc(var(--blogpost-header) + var(--space-5)); max-height: calc(100vh - var(--blogpost-header) - 2 * var(--space-5)); overflow-y: auto; }
  }
}