/* Presentación de la portada. La fotografía se edita en portal/centro.html. */
:root { --alto-cabecera: 96px; --ancho-menu: 230px; color-scheme: light; }
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--alto-cabecera) minmax(0, 1fr); overflow: hidden; font-family: 'Segoe UI', Arial, sans-serif; background: #e7e2d6; color: #123f4c; }
[hidden] { display: none !important; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #103f59; outline-offset: 3px; }
.saltar { position: absolute; top: -100px; left: 24px; z-index: 5; padding: 12px; background: #fff; color: #123f4c; }
.saltar:focus { top: 12px; }
.cabecera { display: grid; grid-template-columns: var(--ancho-menu) minmax(0, 1fr); align-items: center; padding: 10px 0; background: #60cbd1; border-bottom: 1px solid #4ab9c2; }
.cabecera h1 { grid-column: 2; justify-self: center; margin: 0; line-height: 1.1; }
.marca { display: block; color: #000; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 48px; letter-spacing: -1.8px; text-decoration: none; }
.marca span { font-style: italic; }
.distribucion { display: grid; grid-template-columns: var(--ancho-menu) minmax(0, 1fr); min-height: 0; }
.lateral { min-width: 0; overflow: auto; padding: 16px 20px 22px; background: #60cbd1; border-right: 1px solid #4ab9c2; scrollbar-width: thin; }
.lateral nav { overflow: hidden; background: linear-gradient(180deg, #146779 0%, #0c4f61 100%); border: 1px solid #327e91; border-radius: 12px; box-shadow: 0 5px 15px #12416126; font-family: Arial, Helvetica, sans-serif; }
.navhead { padding: 10px 12px; background: #10475a; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .065em; border-bottom: 1px solid #679fac; }
.menu { list-style: none; margin: 0; padding: 0; }
.lateral nav a { display: flex; align-items: center; gap: 6px; min-height: 27px; margin: 0; padding: 5px 10px; color: #f3f8ff; border-bottom: 1px solid #ffffff1c; font-size: 12px; line-height: 1.2; text-decoration: none; transition: background .15s ease, color .15s ease; }
.lateral nav a:hover, .lateral nav a:focus-visible { background: #177f9e; color: #fff; }
.lateral nav a.activo { background: #0b7899; box-shadow: inset 4px 0 #91e5ed; color: #fff; font-weight: 700; }
.lateral nav a:focus-visible { outline: 2px solid #b7f3ff; outline-offset: -2px; }
.navico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; color: #adeaf2; font-size: 14px; line-height: 1; }
.lateral nav a:hover .navico, .lateral nav a.activo .navico { color: #fff; }
.menu-utilidades a:last-child { border-bottom: 0; }
.principal { min-width: 0; min-height: 0; background: #e7e2d6; }
.principal:focus { outline: none; }
#contenido-central { display: block; width: 100%; height: 100%; border: 0; background: #e7e2d6; }
/* Permiten abrir las dos rutas antiguas de cabecera y menú por separado. */
body.menu-autonomo { display: block; height: auto; overflow: auto; background: #60cbd1; }
body.menu-autonomo .lateral { min-height: 100vh; border: 0; }
body.titulo-autonomo { display: block; height: auto; overflow: auto; background: #60cbd1; }
.titulo-autonomo .cabecera { display: flex; justify-content: center; min-height: 96px; }
@media (min-width: 761px) { .lateral nav a { min-height: 24px; padding: 3px 9px; } .lateral nav .enlace-inicio { min-height: 30px; } }
@media (max-width: 800px) { :root { --alto-cabecera: 76px; --ancho-menu: 160px; } .marca { font-size: 38px; } .lateral { padding-right: 10px; padding-left: 10px; } }
@media (max-width: 450px) { :root { --ancho-menu: 142px; } .marca { font-size: 34px; } .lateral { padding-right: 7px; padding-left: 7px; } }
@media (prefers-reduced-motion: reduce) { .lateral nav a { transition: none; } }