/* V1 editorial system — shell (header, primary nav, Explorar dialog, footer).
   Ported from lab/diseno-home-v1/css/shell.css. Scoped to html.v1 pages;
   these pages replace the legacy .site-header/.site-nav/.nav-toggle markup
   entirely, so there is no collision with styles.css on unmigrated pages. */
html.v1 .site-header{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--surface-page) 97%,transparent);border-bottom:1px solid transparent;transition:border-color var(--motion-state) var(--ease-standard),background var(--motion-state) var(--ease-standard)}
html.v1 .site-header[data-scrolled="true"]{border-color:var(--color-border);background:var(--surface-page)}
html.v1 .site-header__inner{min-height:76px;max-width:var(--layout-max);margin:auto;padding-inline:var(--page-gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,3rem);row-gap:.4rem;transition:min-height var(--motion-state) var(--ease-standard)}
html.v1 .site-header[data-scrolled="true"] .site-header__inner{min-height:56px}
/* .brand__name is still used by the footer's <strong class="brand__name">;
   the header no longer carries a brand link at all (LRB's thin utility bar
   has no repeated logo — the masthead further down the page is the only
   place the name appears). */
html.v1 .brand__name{font-weight:600;font-size:.95rem;letter-spacing:-.01em}
html.v1 .site-header__actions{display:flex;align-items:center;gap:.6rem}
html.v1 .header-search{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .9rem .3rem .7rem;border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--color-muted);font-size:.92rem;font-weight:500;cursor:pointer;transition:background var(--motion-state) var(--ease-standard),color var(--motion-state) var(--ease-standard)}
html.v1 .header-search svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;flex:0 0 auto}
html.v1 .header-search:hover,html.v1 .header-search:focus-visible{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 5%,transparent)}
html.v1 .header-buy{display:inline-flex;align-items:center;min-height:44px;padding:.3rem 1.15rem;border:1px solid var(--color-accent-strong);border-radius:var(--radius-control);background:var(--color-accent-strong);color:#fff;font-size:.88rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background var(--motion-state) var(--ease-standard),border-color var(--motion-state) var(--ease-standard)}
html.v1 .header-buy:hover,html.v1 .header-buy:focus-visible{background:var(--dp-ink);border-color:var(--dp-ink)}
html.v1 .explore-trigger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border:1px solid var(--color-border);border-radius:var(--radius-control);background:transparent;color:inherit;cursor:pointer;transition:background var(--motion-state) var(--ease-standard),border-color var(--motion-state) var(--ease-standard)}
html.v1 .explore-trigger svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
html.v1 .explore-trigger:hover{background:color-mix(in srgb,var(--color-text) 5%,transparent);border-color:color-mix(in srgb,var(--color-text) 36%,var(--surface-page))}
/* Only ever rendered inside the header's <noscript> (see build-site-shell.py):
   with JS enabled the browser never parses noscript content into real
   elements, so this never competes visually with the hamburger menu — it
   exists purely as the no-JS navigation fallback. */
html.v1 .primary-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;max-width:var(--layout-max);margin:0 auto;padding:.6rem var(--page-gutter);border-top:1px solid var(--color-border)}
html.v1 .primary-nav a{min-height:44px;display:inline-flex;align-items:center;font-size:.88rem;font-weight:500}
/* Explorar as a lateral drawer (LRB's hamburger → side menu), not a centered
   modal: fixed to the right edge, full height, sliding in on open. Closing
   stays instant (dialog.close() hides synchronously, no JS delay added for
   an exit transition) — opening is the state that reads as "a menu sliding
   in", which is what was asked for. @starting-style is progressive
   enhancement: without support the panel just appears, still fully usable. */
html.v1 .explore-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,92vw);max-width:none;height:100dvh;max-height:100dvh;padding:0;border:0;border-left:1px solid var(--color-border);border-radius:0;background:var(--surface-dialog);color:var(--color-text);overflow:auto;transform:translateX(100%);transition:transform var(--motion-narrative-max) var(--ease-standard)}
html.v1 .explore-dialog[open]{transform:translateX(0)}
@starting-style{html.v1 .explore-dialog[open]{transform:translateX(100%)}}
html.v1 .explore-dialog::backdrop{background:color-mix(in srgb,var(--surface-inverse) 55%,transparent)}
html.v1 .explore-dialog__shell{padding:clamp(1.25rem,4vw,2.5rem) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}
html.v1 .explore-dialog__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}
html.v1 .explore-dialog__head>div{min-width:0}
html.v1 .explore-dialog__head h2{margin:.2rem 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,4vw,2.75rem);line-height:.95;letter-spacing:-.025em;overflow-wrap:break-word}
html.v1 .icon-button{width:44px;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
html.v1 .icon-button svg{fill:none;stroke:currentColor;stroke-width:1.6}
html.v1 .explore-dialog__grid{display:grid;grid-template-columns:1fr;padding-top:.5rem}
html.v1 .explore-preview{display:none}
html.v1 .explore-list{display:grid}
html.v1 .explore-item{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--color-border)}
html.v1 .explore-item:first-child{border-top:0}
html.v1 .explore-row{grid-column:1;display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.75rem;align-items:start;min-height:52px;padding:.85rem 0;text-decoration:none}
html.v1 .explore-row__index{font-size:.7rem;color:var(--color-accent-strong);padding-top:.3rem;font-variant-numeric:tabular-nums;font-weight:700}
html.v1 .explore-row__body{display:grid;gap:.1rem;min-width:0}
html.v1 .explore-row__body strong{font-family:var(--font-ui);font-weight:800;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.15;letter-spacing:-.005em}
html.v1 .explore-row__body small{font-size:.82rem;color:var(--color-muted);line-height:1.4}
html.v1 .explore-row:hover .explore-row__body strong,html.v1 .explore-row:focus-visible .explore-row__body strong{color:var(--color-accent-strong)}
/* Expand/collapse control for territories that carry nested shortcuts --
   same disclosure pattern as .masthead-nav__submenu-trigger, adapted to a
   vertical list. */
html.v1 .explore-row__toggle{grid-column:2;align-self:center;width:2.1rem;height:2.1rem;display:grid;place-items:center;border:1px solid var(--color-border);border-radius:50%;background:transparent;color:var(--color-accent-strong);cursor:pointer;transition:background var(--motion-state) var(--ease-standard),border-color var(--motion-state) var(--ease-standard)}
html.v1 .explore-row__toggle svg{fill:none;stroke:currentColor;stroke-width:1.8;transition:transform var(--motion-state) var(--ease-standard)}
html.v1 .explore-row__toggle:hover,html.v1 .explore-row__toggle:focus-visible{background:#e7f5fc;border-color:var(--color-accent-strong)}
html.v1 .explore-row__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
html.v1 .explore-children{grid-column:1/-1;display:grid;gap:.15rem;margin:0 0 .85rem 2.35rem;padding-left:.85rem;border-left:2px solid #e7f5fc}
html.v1 .explore-children a{display:block;padding:.4rem 0;font-family:var(--font-reading);font-size:.92rem;color:var(--color-text);text-decoration:none;border-bottom:1px solid var(--color-border)}
html.v1 .explore-children a:last-child{border-bottom:0}
html.v1 .explore-children a:hover,html.v1 .explore-children a:focus-visible{color:var(--color-accent-strong)}
html.v1 .explore-subscribe{margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--color-border);max-width:32rem}
html.v1 .explore-subscribe .form-row{display:flex;gap:.6rem;flex-wrap:wrap}
html.v1 .explore-subscribe .form-input{flex:1;min-width:12rem}
html.v1 .explore-subscribe .form-consent{margin-top:.6rem;font-size:.8rem}
html.v1 .site-footer{border-top:1px solid var(--color-border);padding:clamp(3rem,5vw,4.5rem) var(--page-gutter);max-width:var(--layout-max);margin:auto}
html.v1 .site-footer__grid{display:grid;grid-template-columns:minmax(16rem,2.2fr) repeat(4,minmax(8rem,1fr));column-gap:clamp(2rem,4vw,4.5rem);row-gap:var(--grid-gap);align-items:start}
/* Las columnas del pie son <nav> con display:grid, asi que sus enlaces son
   grid items y arrastran min-width:auto, es decir min-content: con zoom 200%
   "Las manecillas del recuerdo" no cabe en su columna y no podia partirse.
   min-width:0 en los hijos deja que break-word haga su trabajo. A ancho
   normal no cambia nada: break-word solo parte cuando ya no cabe. */
html.v1 .site-footer__grid>*,html.v1 .site-footer__grid nav>*{min-width:0}
html.v1 .site-footer__grid>*{overflow-wrap:break-word}
html.v1 .site-footer p{color:var(--color-muted);margin:.5rem 0}
html.v1 .site-footer nav{display:grid;align-content:start;gap:.55rem}
html.v1 .site-footer h2{font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .5rem}
html.v1 .site-footer a{font-size:.88rem;text-decoration:none;min-height:32px}
html.v1 .site-footer a:hover,html.v1 .site-footer a:focus-visible{text-decoration:underline}
/* Social profiles. Lives here rather than in v1-families.css because the
   footer row is part of the shell every V1 page loads, while families is
   only on 22 of them. Footer margin is a rule, not an inline style: 28
   pages declare style-src 'self', which blocks inline style attributes. */
html.v1 .social-row{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:1.75rem}
html.v1 .social-icon{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;border:1px solid var(--color-accent-strong);border-radius:50%;color:var(--color-text);text-decoration:none;transition:background var(--motion-state) var(--ease-standard),color var(--motion-state) var(--ease-standard)}
html.v1 .social-icon svg{width:1.05rem;height:1.05rem}
html.v1 .social-icon:hover,html.v1 .social-icon:focus-visible{background:var(--color-accent-strong);color:#fff}
html.v1 .site-footer .social-row{margin-top:1rem}
html.v1 .footer-email{display:inline-block;margin-top:1rem;font-size:.88rem;color:var(--color-accent-strong);text-decoration:none;border-bottom:1px solid currentColor}
html.v1 .footer-email:hover,html.v1 .footer-email:focus-visible{color:var(--color-accent-hover)}
html.v1 .footer-legal{grid-column:1/-1;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
html.v1 .footer-legal a{font-size:.82rem}
@media (max-width:1023px){html.v1 .site-header__inner{padding-top:.55rem;padding-bottom:.55rem}html.v1 .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}html.v1 .site-footer__grid>div{grid-column:1/-1}}
@media (max-width:767px){html.v1{scroll-padding-top:88px}html.v1 .site-header__inner{padding-top:max(.5rem,env(safe-area-inset-top));padding-inline:max(var(--page-gutter),env(safe-area-inset-left)) max(var(--page-gutter),env(safe-area-inset-right));gap:.35rem}html.v1 .site-header__actions{gap:.3rem}html.v1 .header-search span{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 .header-search{padding:.3rem;min-width:44px;justify-content:center}html.v1 .header-buy{padding:.3rem .4rem;font-size:.68rem}html.v1 .site-footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem 1.25rem}html.v1 .site-footer__grid>div{grid-column:1/-1}html.v1 .explore-dialog__head{gap:1rem}html.v1 .explore-dialog__head h2{font-size:clamp(1.6rem,8vw,2.4rem);overflow-wrap:break-word;min-width:0}html.v1 .explore-row{grid-template-columns:2.2rem minmax(0,1fr);min-height:64px}html.v1 .explore-row__body strong,html.v1 .explore-row__body small{font-size:clamp(1.6rem,7vw,2rem);overflow-wrap:break-word;min-width:0}html.v1 .explore-subscribe .form-input{min-width:0}}
@media (max-width:389px){html.v1{scroll-padding-top:84px}html.v1 .site-footer__grid{grid-template-columns:1fr}html.v1 .site-footer__grid>div{grid-column:auto}}
@media (min-width:560px) and (max-width:1023px) and (max-height:520px){html.v1{scroll-padding-top:64px}html.v1 .site-header__inner{min-height:60px;padding-top:max(.3rem,env(safe-area-inset-top));padding-bottom:.3rem}}
@media print{html.v1 .site-header,html.v1 .explore-dialog,html.v1 .site-footer{display:none!important}}