/* ==========================================================================
   site.css - ajuste del tema Weebly (theme.css) para este sitio.
   Se carga DESPUÉS de theme.css. Conserva la estructura del tema
   (#container > #header + #main[#navigation, #right > #banner + #content])
   y la hace adaptable a móvil. Reproduce los "design options" de Weebly:
   Lato, enlaces #626262 / hover #00b5e3, menú 14px.
   ========================================================================== */
:root{--azul:#3387a2;--acento:#00b5e3;--texto:#626262;--es:#8a8a8a;--verde:#91e05c}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Lato,Arial,Helvetica,sans-serif;font-size:14px;line-height:1.6;color:#626262;background:#fff}
a{color:#626262;text-decoration:underline}
a:hover{color:#00b5e3}
img{max-width:100%;height:auto}

/* contenido: neutraliza el relleno de p/h* del tema para conservar el diseño de cada página */
:where(#content) p,:where(#content) h1,:where(#content) h2,:where(#content) h3,:where(#content) h4{padding:0}
:where(#content) h1{line-height:1.2}
:where(#content) ul{list-style:revert}

/* estructura */
#container{width:960px;max-width:100%;margin:0 auto;padding:0}
#header{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:auto;padding:14px 0}
#logo{padding:0}
#logo a{display:block;line-height:0}
#logo img{display:block;max-width:100%;height:auto}
#header-right{padding:0}
.social{display:flex;align-items:center}
.wsite-social{display:inline-flex;align-items:center}
.wsite-social-item{display:inline-block;flex:none;width:23px;height:23px;margin:0 0 0 3px;background-repeat:no-repeat;text-decoration:none}
#main{display:flex;align-items:flex-start;border:1px solid #999}
#navigation{float:none;flex:0 0 205px;width:205px;padding:25px 0 20px}
#right{flex:1;min-width:0;align-self:stretch;border-left:1px solid #ccc}
#content{float:none;clear:none;width:auto;padding:20px 21px 30px;border:0;min-height:350px}
#banner,.wsite-header{float:none;clear:both;display:block;width:100%;background-size:cover;background-position:center}
.tall-header-page #banner{height:236px;background-image:url(../theme/banner-tall.jpg)}
.short-header-page #banner{height:136px;background-image:url(../theme/banner-short.jpg)}
main#content.tall-header-page,main#content.short-header-page{}  /* la clase de <main> no aplica estilos de banner */

/* menú (misma marca para el sitio estático y para wp_nav_menu) */
#navigation ul{margin:0;padding:0;list-style:none}
#navigation li{position:relative}
#navigation li a{display:block;font-family:Lato,Arial,sans-serif;font-size:14px;line-height:1.2;color:#999;padding:8px 15px;text-decoration:none;background:none}
#navigation li:hover>a,#navigation li.current-menu-item>a,#navigation li.current-menu-ancestor>a{color:#333;background:url(../theme/nav-active-arrow.png) right center no-repeat}
#navigation .sub-menu{display:none;margin:0 0 4px}
#navigation li.current-menu-ancestor>.sub-menu,
#navigation li.menu-item-has-children:hover>.sub-menu,
#navigation li.menu-item-has-children:focus-within>.sub-menu{display:block}
#navigation .sub-menu li a{font-size:12px;padding:6px 15px}
#navigation .sub-menu li:hover>a,#navigation .sub-menu li.current-menu-item>a{background-position:right center}

/* incrustaciones (iframes de Weebly "Custom HTML") aún sin código: se ocultan al visitante */
.embed:not(:has(iframe)),.pan:not(:has(iframe)){display:none}

/* enlaces a archivos (PDF/ZIP) que se resuelven en site.js */
a[data-remote]{cursor:pointer}

/* móvil */
@media (max-width:1000px){
  #container{width:100%;padding:0 10px}
}
@media (max-width:760px){
  #header{flex-direction:column;align-items:flex-start}
  #logo img{width:100%;max-width:420px}
  #main{flex-direction:column}
  #navigation{flex:none;width:100%;padding:8px 0;text-align:left}
  #navigation li:hover>a,#navigation li.current-menu-item>a,#navigation li.current-menu-ancestor>a{background-position:right 10px center}
  #right{width:100%;border-left:0;border-top:1px solid #ccc;align-self:auto}
  #content{padding:18px 14px 26px}
}
