/* LRB-inspired header refinement — original implementation for David Porto.
   Reference observed 2026-08-24: https://www.lrb.co.uk/
   Pattern only: persistent editorial masthead + compact utility header.
   No third-party code copied. */

:root{
  --dp-lrb-utility-h:50px;
  --dp-lrb-nav-h:40px;
}

/* Utility bar: left = assistant/home/menu, right = buy. */
html.v1 .site-header{z-index:calc(var(--z-header) + 3);background:var(--surface-page);border-bottom:1px solid var(--color-border)}
html.v1 .site-header__inner,
html.v1 .site-header[data-scrolled="true"] .site-header__inner{min-height:var(--dp-lrb-utility-h);padding-block:0;gap:.28rem}
html.v1 .site-header__left{display:flex;align-items:center;gap:.08rem;min-width:0}
html.v1 .site-header__actions{margin-left:auto;display:flex;align-items:center;gap:.25rem}
html.v1 .header-search,
html.v1 .header-home,
html.v1 .header-sitemap,
html.v1 .explore-trigger{min-height:44px}
html.v1 .header-search{font-size:.8rem;padding-inline:.55rem .72rem}
/* #0a4d9f is the exact blue baked into the header wordmark image's own
   "ESCRITOR" text/rule (assets/david-porto-diaz-escritor-banner-cropped.png,
   sampled from its solid stroke pixels) -- author request to match Asistente,
   the search icon, and Comprar to that same tone instead of the generic
   #0075b8 accent blue. */
html.v1 .header-search{color:#0a4d9f}
html.v1 .header-search span{color:#0a4d9f;font-weight:600}
html.v1 .header-search svg{color:#0a4d9f}
/* Icon sizes were inconsistent (17px on search/home/sitemap/contact, 20px on
   the hamburger) inside identically-sized 44px buttons -- unified to 18px,
   which also makes the search icon "un poquito más grande" as requested. */
html.v1 .header-search svg,
html.v1 .header-home svg,
html.v1 .header-sitemap svg,
html.v1 .header-contact svg,
html.v1 .explore-trigger svg{width:18px;height:18px}
html.v1 .header-home,
html.v1 .header-sitemap,
html.v1 .header-contact{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border:1px solid transparent;border-radius:0;color:var(--color-muted);text-decoration:none;background:transparent;transition:background var(--motion-state) var(--ease-standard),color var(--motion-state) var(--ease-standard),border-color var(--motion-state) var(--ease-standard)}
html.v1 .header-home,
html.v1 .header-sitemap,
html.v1 .header-contact{color:#050505}
html.v1 .header-home svg,
html.v1 .header-sitemap svg,
html.v1 .header-contact svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.v1 .header-home:hover,html.v1 .header-home:focus-visible,
html.v1 .header-sitemap:hover,html.v1 .header-sitemap:focus-visible,
html.v1 .header-contact:hover,html.v1 .header-contact:focus-visible{color:#254f60;background:#d7e9ef;border-color:rgba(37,79,96,.18)}
html.v1 .explore-trigger{border-radius:0;border-color:transparent}
html.v1 .explore-trigger:hover,html.v1 .explore-trigger:focus-visible{background:#d7e9ef;border-color:rgba(37,79,96,.18);color:#254f60}
html.v1 .header-buy{min-height:36px;padding:.25rem .85rem;border-radius:0;font-size:.76rem;letter-spacing:.015em;background:#0a4d9f;border-color:#0a4d9f}
html.v1 .header-buy:hover,html.v1 .header-buy:focus-visible{background:#083c7d;border-color:#083c7d}
html.v1 .site-header__left .explore-trigger{order:3}
/* Estado A only hides the hamburger on desktop Home, before any scroll
   compacts the header. Below 900px the hamburger is the only entry point
   into Explorar (the territory row and its dropdowns don't fit), so it must
   stay visible from the first paint regardless of scroll state -- this rule
   is scoped to >=900px so its :not(.lrb-compact) can't outrank the <900px
   override further down by specificity (both single-class-equivalent
   selectors, same file: source order alone isn't enough to win). */
@media (min-width:900px){
  html.v1[data-lrb-home="true"]:not(.lrb-compact) .site-header__left .explore-trigger{display:none}
}
html.v1.lrb-compact .site-header__left .explore-trigger,
html.v1[data-lrb-home="true"] .site-header[data-scrolled="true"] .site-header__left .explore-trigger,
html.v1:not([data-lrb-home="true"]) .site-header__left .explore-trigger{display:inline-flex}

/* Explore is a LEFT drawer. Modal semantics/focus handling stay in v1-shell.js. */
html.v1 .explore-dialog{inset:0 auto 0 0;border-left:0;border-right:1px solid var(--color-border);transform:translateX(-100%)}
html.v1 .explore-dialog[open]{transform:translateX(0)}
@starting-style{html.v1 .explore-dialog[open]{transform:translateX(-100%)}}

/* Home masthead + territory row behave as one persistent editorial header. */
html.v1[data-lrb-home="true"] .masthead-sticky{position:sticky;top:var(--dp-lrb-utility-h);z-index:calc(var(--z-header) + 1);background:var(--surface-page);border-bottom:1px solid var(--color-border);opacity:1;visibility:visible;transition:background 420ms var(--ease-standard),border-color 420ms var(--ease-standard),opacity 380ms var(--ease-standard),visibility 0s linear 0s}
html.v1[data-lrb-home="true"] .masthead-sticky__inner{background:var(--surface-page);transform:translateY(0);opacity:1;transition:transform 520ms var(--ease-standard),opacity 420ms var(--ease-standard)}
html.v1[data-lrb-home="true"].lrb-compact .masthead-sticky{background:transparent;border-bottom-color:transparent;opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,80ms,520ms}
html.v1[data-lrb-home="true"].lrb-compact .masthead-sticky__inner{transform:translateY(calc(-100% - .6rem));opacity:0}

/* Central supplied brand image. Text remains an accessible/failure fallback.
   The preferred asset is transparent lettering over the paper layer, so the
   surface remains warm and the text keeps a clean LRB-like presence. */
html.v1[data-lrb-home="true"] .masthead{padding:1.1rem var(--page-gutter) .5rem;gap:.1rem}
html.v1[data-lrb-home="true"] .masthead__name{display:grid;place-items:center;min-height:170px;font-size:clamp(2.35rem,1.95rem + 2vw,4rem)}
html.v1[data-lrb-home="true"] .masthead__name>a{display:contents;color:inherit;text-decoration:none}
html.v1[data-lrb-home="true"] .masthead__name-text{display:block}
html.v1[data-lrb-home="true"] .masthead__name.has-logo-image .masthead__name-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.v1[data-lrb-home="true"] .masthead__logo-image{display:block;width:min(70vw,760px);height:auto;margin:0 auto}
html.v1[data-lrb-home="true"] .masthead__kicker{display:none}
html.v1[data-lrb-home="true"] .masthead__brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(.3rem,.8vw,.55rem)}
html.v1[data-lrb-home="true"] .masthead__avatar-frame{position:relative;display:inline-flex;flex-shrink:0}
html.v1[data-lrb-home="true"] .masthead__avatar{width:clamp(52px,7vw,92px);height:clamp(52px,7vw,92px);border-radius:50%;object-fit:cover;object-position:50% 18%;display:block}
/* Decorative ring in the same double-ring/diamond-accent motif as the
   author's reference sheet ("Recursos diseño web" > frames > blue circle),
   replacing the plain 1px gray border. Originally a raster crop from that
   sheet, but the source PNG's circle was only ~95px native -- upscaling it
   (even after tightening the crop to fix the padding/gap bug) still read as
   soft/pixelated at retina sizes. Rebuilt as a plain SVG (two concentric
   circle strokes + two diamond accents) so it's crisp at any size and DPI. */
html.v1[data-lrb-home="true"] .masthead__avatar-frame::after{content:"";position:absolute;inset:-20%;background:url(/assets/masthead-avatar-frame-blue.svg) center/contain no-repeat;pointer-events:none}

/* Tight editorial section row. The clickable area stays >=40px while labels read small. */
html.v1[data-lrb-home="true"] .masthead-nav{position:relative;border-top:1px solid var(--color-border);border-bottom:0;background:var(--surface-page)}
html.v1[data-lrb-home="true"] .masthead-nav__list{max-width:var(--layout-wide);padding:0 var(--page-gutter);gap:0;flex-wrap:nowrap;align-items:stretch;overflow:visible}
html.v1[data-lrb-home="true"] .masthead-nav__item{position:relative;display:flex;align-items:stretch;border:0}
html.v1[data-lrb-home="true"] .masthead-nav__item>a{min-height:var(--dp-lrb-nav-h);padding:.1rem .52rem;font-family:var(--font-reading);font-size:.82rem;line-height:1;text-transform:none;letter-spacing:.005em;color:#37332f;border:0;white-space:nowrap;width:auto;transition:background 120ms ease,color 120ms ease}
html.v1[data-lrb-home="true"] .masthead-nav__item>a:hover,
html.v1[data-lrb-home="true"] .masthead-nav__item>a:focus-visible{color:#254f60;background:#d7e9ef;text-decoration:none}
html.v1[data-lrb-home="true"] .masthead-nav__submenu-trigger{display:inline-grid;place-items:center;width:25px;min-height:var(--dp-lrb-nav-h);padding:0;border:0;background:transparent;color:#6d6964;cursor:pointer;border-radius:0;transition:background 120ms ease,color 120ms ease}
html.v1[data-lrb-home="true"] .masthead-nav__submenu-trigger:hover,
html.v1[data-lrb-home="true"] .masthead-nav__submenu-trigger:focus-visible{background:#d7e9ef;color:#254f60}
html.v1[data-lrb-home="true"] .masthead-nav__submenu-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform var(--motion-state) var(--ease-standard)}
html.v1[data-lrb-home="true"] .masthead-nav__item.is-open .masthead-nav__submenu-trigger svg{transform:rotate(180deg)}
html.v1[data-lrb-home="true"] .masthead-nav__submenu{position:absolute;z-index:8;top:100%;left:0;min-width:238px;width:max-content;max-width:min(320px,88vw);display:grid;padding:.25rem 0;background:var(--surface-page);border:1px solid var(--color-border);box-shadow:0 12px 30px rgba(27,25,23,.12);opacity:0;visibility:hidden;transform:translateY(-2px);pointer-events:none;transition:opacity 110ms ease,transform 110ms ease,visibility 0s linear 110ms}
/* Seven-pixel interaction bridge: pointer can travel from label to submenu without closing it. */
html.v1[data-lrb-home="true"] .masthead-nav__submenu::before{content:"";position:absolute;left:-1px;right:-1px;top:-8px;height:8px}
html.v1[data-lrb-home="true"] .masthead-nav__submenu a{display:flex;align-items:center;min-height:38px;padding:.48rem .72rem;font-family:var(--font-reading);font-size:.86rem;line-height:1.18;text-transform:none;letter-spacing:0;white-space:normal;border:0;color:var(--color-text);text-decoration:none;width:auto;transition:background 110ms ease,color 110ms ease}
html.v1[data-lrb-home="true"] .masthead-nav__submenu a:first-child{color:#1d4f96;font-weight:600}
html.v1[data-lrb-home="true"] .masthead-nav__submenu a:not(:first-child){color:#6d7377}
html.v1[data-lrb-home="true"] .masthead-nav__submenu a:hover,
html.v1[data-lrb-home="true"] .masthead-nav__submenu a:focus-visible{background:#d7e9ef;color:#254f60}
html.v1[data-lrb-home="true"] .masthead-nav__item:hover>.masthead-nav__submenu,
html.v1[data-lrb-home="true"] .masthead-nav__item:focus-within>.masthead-nav__submenu,
html.v1[data-lrb-home="true"] .masthead-nav__item.is-open>.masthead-nav__submenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
html.v1[data-lrb-home="true"] .masthead-nav__preview{display:none!important}
html.v1[data-lrb-home="true"] .masthead-nav__item:nth-last-child(-n+2)>.masthead-nav__submenu{left:auto;right:0}

@media (max-width:899px){
  :root{--dp-lrb-utility-h:52px;--dp-lrb-nav-h:40px}
  html.v1 .site-header__inner,html.v1 .site-header[data-scrolled="true"] .site-header__inner{padding-block:0;min-height:var(--dp-lrb-utility-h)}
  /* At 390px with 200% text zoom, four 44px icon buttons plus .header-buy
     overflowed the viewport by a few px (qa/pro-resources-browser.mjs).
     42px keeps them well above the 24px WCAG 2.5.8 minimum tap size while
     closing that gap. */
  html.v1 .header-search{min-width:42px}
  html.v1 .header-home,html.v1 .header-sitemap,html.v1 .header-contact,html.v1 .explore-trigger{width:42px;height:42px}
  html.v1[data-lrb-home="true"] .site-header__left .explore-trigger{display:inline-flex}
  html.v1[data-lrb-home="true"] .masthead-sticky{top:var(--dp-lrb-utility-h)}
  html.v1[data-lrb-home="true"] .masthead__name{min-height:142px}
  html.v1[data-lrb-home="true"] .masthead__logo-image{width:min(76vw,560px)}
  /* Below desktop width the full territory row becomes fragile once a user
     increases text spacing. The hamburger/Explore drawer is the canonical
     navigation for this range and avoids clipped dropdowns. */
  html.v1[data-lrb-home="true"] .masthead-nav{display:none}
}

@media (max-width:639px){
  :root{--dp-lrb-utility-h:54px}
  html.v1 .site-header__inner,html.v1 .site-header[data-scrolled="true"] .site-header__inner{min-height:var(--dp-lrb-utility-h);padding-top:max(0px,env(safe-area-inset-top));padding-bottom:0}
  html.v1 .header-buy{font-size:.68rem;padding-inline:.55rem}
  html.v1[data-lrb-home="true"] .masthead{padding:.85rem var(--page-gutter) .6rem}
  html.v1[data-lrb-home="true"] .masthead__name{min-height:105px}
  html.v1[data-lrb-home="true"] .masthead__logo-image{width:min(88vw,350px)}
  /* The territory labels are intentionally removed on phone; hamburger/Explore owns global navigation. */
}

@media (prefers-reduced-motion:reduce){
  html.v1[data-lrb-home="true"] .masthead-sticky__inner,
  html.v1[data-lrb-home="true"] .masthead-nav__submenu,
  html.v1[data-lrb-home="true"] .masthead-nav__submenu-trigger svg,
  html.v1[data-lrb-home="true"] .masthead-nav__item>a{transition:none}
}

@media print{
  html.v1[data-lrb-home="true"] .masthead-sticky{position:static}
  html.v1[data-lrb-home="true"] .masthead-nav__submenu,
  html.v1[data-lrb-home="true"] .masthead-nav__submenu-trigger{display:none!important}
}