/* Fase 6: sistema visual, navegación y responsive */
:root{--max:1240px;--content:780px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--shadow-soft:0 18px 48px rgba(23,21,25,.10);--space-section:clamp(5rem,8vw,8rem);--ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-padding-top:112px}
body{overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.nav-open{overflow:hidden}
main{overflow:clip}
p,li{max-width:72ch}
img{max-width:100%}
iframe,video{max-width:100%}
.credited-photo figcaption{padding-top:.55rem;color:var(--muted);font-size:.7rem;line-height:1.35}
.wrap{width:min(calc(100% - clamp(2.75rem,6vw,6rem)),var(--max))}
.section,.feature,.school-section,.memorial-section{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.section-head{gap:clamp(2.5rem,7vw,7rem);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section-head>p{line-height:1.75}
.lead{line-height:1.55}

/* Cabecera común */
.institutional{height:38px;font-size:.66rem}
.institutional-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:18px}
.institutional .institutional-brand{display:flex;align-items:center;gap:.5rem;margin-left:0;min-width:0;line-height:1.2;white-space:nowrap}
.institutional-brand span,.institutional-brand b,.institutional-brand .institutional-value{font-size:.68rem;letter-spacing:.075em;text-transform:none}
.institutional-brand b,.institutional-brand .institutional-value{font-weight:700;opacity:.82}
.institutional-brand .institutional-value{text-decoration:none}
.institutional-brand .institutional-value:hover,.institutional-brand .institutional-value:focus-visible{opacity:1}
.institutional .institutional-social{display:flex;align-items:center;gap:4px;margin-left:auto;flex:0 0 auto}
.institutional-social a{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;transition:opacity .16s ease,background-color .16s ease}
.institutional-social svg{display:block;width:18px;height:18px}
.institutional-social a:first-child svg{fill:none;stroke:currentColor;stroke-width:1.8}
.institutional-social a:first-child .social-dot{fill:currentColor;stroke:none}
.institutional-social a:last-child svg{fill:currentColor}
.institutional a{position:relative;transition:opacity .16s ease}
.institutional a:hover,.institutional a:focus-visible{opacity:.72}
.header{box-shadow:0 1px 0 rgba(23,21,25,.03)}
.header-in{height:84px;gap:clamp(1rem,2.5vw,2rem)}
.brand{flex:0 0 auto}
.brand img{width:158px;max-height:58px;object-fit:contain}
.nav{gap:clamp(.85rem,1.55vw,1.45rem)}
.nav>a,.nav-parent-link{display:flex;align-items:center;min-height:84px;padding:0!important;border:0!important;text-decoration:none;text-transform:uppercase;letter-spacing:.065em;font-size:.70rem;font-weight:800;transition:color .16s ease}
.nav>a::after,.nav-parent-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--wine);transform:scaleX(0);transition:transform .18s var(--ease)}
.nav>a,.nav-parent-link{position:relative}
.nav>a:hover::after,.nav>a:focus-visible::after,.nav>a.active::after,.nav-dropdown.is-current .nav-parent-link::after{transform:scaleX(1)}
.nav>a:hover,.nav>a:focus-visible,.nav>a.active,.nav-dropdown.is-current .nav-parent-link{color:var(--wine)}
.nav-dropdown{position:relative;align-self:stretch}
.nav-parent-row{height:100%;display:flex;align-items:center}
.nav-toggle{width:27px;height:44px;margin:0 0 0 2px;padding:0;border:0;background:transparent;color:currentColor;cursor:pointer}
.nav-toggle span{display:block;width:7px;height:7px;margin:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .16s ease}
.nav-submenu,details.nav-dropdown>div{display:block!important;position:absolute;z-index:40;top:calc(100% - 1px);left:-18px;min-width:290px;padding:10px 0;background:#fff;border:1px solid rgba(23,21,25,.10);border-top:3px solid var(--wine);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-soft);opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .14s ease,transform .14s var(--ease),visibility 0s linear .14s}
.nav-dropdown:hover>.nav-submenu,.nav-dropdown:focus-within>.nav-submenu,.nav-dropdown.open>.nav-submenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
.nav-submenu a,details.nav-dropdown>div a{display:block!important;min-height:0!important;padding:12px 20px!important;border:0!important;white-space:nowrap;font-size:.73rem!important;line-height:1.35;text-decoration:none;text-transform:none;letter-spacing:.015em;transition:color .14s ease,background .14s ease,padding-left .14s ease}
.nav-submenu a::after,details.nav-dropdown>div a::after{display:none!important}
.nav-submenu a:hover,.nav-submenu a:focus-visible,details.nav-dropdown>div a:hover,details.nav-dropdown>div a:focus-visible{padding-left:24px!important;color:var(--wine);background:var(--cream)}
.menu{align-items:center;gap:10px;min-width:94px;min-height:48px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.72rem;letter-spacing:.06em;cursor:pointer}
.menu-icon{width:21px;display:grid;gap:4px}
.menu-icon i{display:block;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.menu[aria-expanded="true"] .menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] .menu-icon i:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Interacción y foco */
:where(a,button):focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.button{border-radius:var(--radius-sm);transition:transform .16s var(--ease),background-color .16s ease,color .16s ease,box-shadow .16s ease}
.button:hover,.button:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,21,25,.16)}
.text-link{display:inline-flex;align-items:center;gap:.3em;text-underline-offset:5px;transition:color .16s ease,transform .16s var(--ease)}
.text-link:hover,.text-link:focus-visible{transform:translateX(3px)}

/* Imágenes y vídeo */
.feature-grid>img,.memorial-split>img,.a4l-photo img,.a4l-material img,.history-video,.video-entry iframe{border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}
.feature-grid>img,.memorial-split>img,.a4l-photo img{outline:7px solid #fff;outline-offset:-7px}
.story,.edition,.info,.a4l-card,.diario-card-image,.related img{border-radius:var(--radius-sm);overflow:hidden}
.story img,.edition img,.a4l-card img,.diario-card img,.related img{transition:transform .28s var(--ease)}
.story:hover img,.edition:hover img,.related a:hover img{transform:scale(1.025)}
.history-video,.video-entry iframe,.video-pending{aspect-ratio:16/9;height:auto}
.video-pending{border-radius:var(--radius-md)}

/* Ritmo editorial común */
.page-hero,.school-hero,.memorial-video-hero,.a4l-hero,.article-hero{isolation:isolate}
.page-hero h1,.school-hero h1,.memorial-video-copy h1,.memorial-page-hero h1,.a4l-hero h1,.article-hero h1,.page-title h1{overflow-wrap:anywhere;text-wrap:balance}
.section h2,.feature h2,.school-heading h2,.school-details h2,.memorial-reading h2,.memorial-split h2,.memorial-rows h2,.a4l-interior-copy h2,.related>h2{text-wrap:balance}
.school-copy,.memorial-reading,.a4l-interior-copy .copy,.article-body{max-width:var(--content)}
.club-present,.history-facts,.archive-map,.school-facts,.memorial-dimensions{border-radius:var(--radius-md);overflow:hidden}
.club-present{gap:1px}
.project-links a,.utility-grid>*{border-radius:var(--radius-sm)}
.school-contact,.edition-cta,.manual{border-radius:var(--radius-sm)}
.subnav{scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.footer{padding-top:clamp(4.5rem,8vw,6.5rem)}
.footer-grid{align-items:start}
.footer-brand p{margin:.9rem 0 0;color:#d8d3d5;font-size:.76rem;font-weight:700;letter-spacing:.06em}
.footer .footer-value{display:inline!important;min-height:0!important;margin:0!important;color:inherit;text-decoration:none}
.footer .footer-value:hover,.footer .footer-value:focus-visible{color:#fff;transform:none}
.footer img{width:170px}
.footer a{transition:color .15s ease,transform .15s ease}
.footer a:hover,.footer a:focus-visible{color:#fff;transform:translateX(2px)}

@media (max-width:1100px){.nav{gap:.8rem}.nav>a,.nav-parent-link{font-size:.66rem}.brand img{width:145px}}

@media (max-width:1180px){
  html{scroll-padding-top:94px}
  .header-in{height:78px}
  .brand img{width:145px;max-height:54px}
  .menu{display:inline-flex}
  .nav{display:none;position:absolute;top:78px;left:0;right:0;max-height:calc(100dvh - 110px);overflow-y:auto;padding:18px clamp(1.4rem,5vw,3rem) 30px;background:rgba(255,255,255,.99);border-top:1px solid var(--line);box-shadow:0 22px 44px rgba(23,21,25,.16);flex-direction:column;align-items:stretch;gap:0}
  .nav.open{display:flex}
  .nav>a,.nav-parent-link{min-height:52px;font-size:.82rem;border-bottom:1px solid var(--line)!important}
  .nav>a::after,.nav-parent-link::after{display:none}
  .nav-dropdown{width:100%;align-self:auto}
  .nav-parent-row{height:auto}
  .nav-parent-link{flex:1}
  .nav-toggle{width:52px;height:52px;margin:0;border-bottom:1px solid var(--line)}
  .nav-dropdown.open .nav-toggle span{transform:translateY(2px) rotate(225deg)}
  .nav-submenu,details.nav-dropdown>div{position:static;min-width:0;max-height:0;padding:0 0 0 18px;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:none;overflow:hidden;transition:max-height .22s var(--ease),padding .22s ease}
  .nav-dropdown:hover>.nav-submenu,.nav-dropdown:focus-within>.nav-submenu{max-height:0;padding-top:0;padding-bottom:0;pointer-events:none}
  .nav-dropdown.open>.nav-submenu{max-height:520px;padding-top:6px;padding-bottom:10px;pointer-events:auto}
  .nav-submenu a,details.nav-dropdown>div a{min-height:46px!important;padding:13px 8px!important;white-space:normal;border-bottom:0!important;font-size:.79rem!important}
  .nav-submenu a:hover,.nav-submenu a:focus-visible,details.nav-dropdown>div a:hover,details.nav-dropdown>div a:focus-visible{padding-left:12px!important}
  .section-head{display:block}
  .section-head>p{margin-top:1.5rem}
  .feature-grid,.split,.school-two-col,.memorial-split,.a4l-interior-copy{gap:clamp(2.25rem,6vw,4rem)}
  .home-hero h1,.page-hero h1,.page-title h1{font-size:clamp(3.25rem,10vw,5.5rem)}
}

@media (max-width:680px){
  :root{--space-section:clamp(4.25rem,18vw,5.5rem);--radius-md:12px}
  .wrap{width:min(calc(100% - 2.5rem),var(--max))}
  .institutional{height:auto;min-height:52px}
  .institutional-inner{min-height:52px;gap:8px}
  .institutional .institutional-brand{flex:1;gap:.3rem;margin-left:0;white-space:normal;flex-wrap:wrap}
  .institutional-brand span,.institutional-brand b,.institutional-brand .institutional-value{display:inline;font-size:.59rem;letter-spacing:.045em}
  .institutional .institutional-social{gap:2px;margin-left:auto}
  .institutional-social a{width:36px;height:36px}
  .header-in{height:74px}
  .nav{top:74px;max-height:calc(100dvh - 106px);padding-left:1.25rem;padding-right:1.25rem}
  .brand img{width:132px;max-height:48px}
  .menu{min-width:92px;min-height:46px}
  .home-hero,.page-hero{min-height:500px;height:min(650px,78svh)}
  .home-hero h1,.page-hero h1,.page-title h1{font-size:clamp(2.85rem,13vw,4.4rem);line-height:.9;letter-spacing:-.06em}
  .section h2,.feature h2,.school-heading h2,.school-details h2,.memorial-reading h2,.memorial-split h2,.memorial-rows h2,.a4l-interior-copy h2,.related>h2{font-size:clamp(2.35rem,11vw,3.8rem);line-height:.94}
  .lead{font-size:1.08rem}
  .subnav{width:100%;padding-left:1.1rem;padding-right:1.1rem;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}
  .subnav a{flex:0 0 auto;white-space:nowrap;min-height:54px;display:flex;align-items:center}
  .feature-grid>img,.memorial-split>img{height:auto;min-height:0;aspect-ratio:4/3}
  .club-present article{padding:2rem 1.45rem}
  .project-links{gap:10px}
  .project-links a{min-height:126px}
  .school-hero h1,.memorial-video-copy h1,.memorial-page-hero h1,.a4l-hero h1,.article-hero h1{overflow-wrap:normal;word-break:normal;hyphens:auto}
  .school-hero h1{font-size:clamp(2.65rem,12.7vw,4rem)}
  .memorial-video-copy h1,.memorial-page-hero h1{font-size:clamp(2.55rem,11.8vw,4rem)}
  .a4l-hero h1{font-size:clamp(2.65rem,12.4vw,4.1rem)}
  .article-hero h1{font-size:clamp(2.5rem,11vw,4rem)}
  .diario-card.featured h2{font-size:clamp(2rem,9.5vw,2.8rem)}
  .article-body{width:min(calc(100% - 2.5rem),760px)}
  .article-body p{font-size:1rem;line-height:1.72}
  .footer-grid{gap:2.75rem 1.5rem}
  .footer a{min-height:40px;display:flex;align-items:center;margin:0}
  .footer-bottom{line-height:1.7}
  .contact-layout{padding-left:0;padding-right:0}
  .email{max-width:100%;font-size:clamp(1.02rem,5.1vw,1.35rem);overflow-wrap:anywhere}
}

@media (max-width:390px){.wrap{width:min(calc(100% - 2rem),var(--max))}.brand img{width:120px}.menu{min-width:86px;padding:0 8px;gap:8px}.menu-icon{width:19px}.home-hero h1,.page-hero h1,.page-title h1{font-size:clamp(2.65rem,13vw,3.65rem)}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Ajustes tipográficos de lectura: evita signos huérfanos en titulares. */
h1,h2,h3,h4{ text-wrap: balance; }