/* Diseño del portal a partir del legado (legacy-assets/public/css/estilos.css y popup.css),
   responsive. Sin estilos inline ni recursos externos (CSP 'self'). */
@font-face {
  font-family: "MuseoSans300";
  src: url("../fonts/museosans_300-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "MuseoSans300", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666;
  background: #67767d url("../img/bg_Html.gif") center top repeat-y;
}
a { color: #00aaa6; }
h1, h2, h3 { margin: 0 0 .75rem; font-weight: normal; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site { max-width: 1023px; margin: 0 auto; padding: 0 25px; background: #fff; }

/* Cabecera: logo, idiomas y barra de herramientas */
.site-header { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; min-height: 145px; padding: 0 25px 15px; border-bottom: 18px solid #fff; font-size: 10px; }
.site-header__logo { margin-right: auto; }
.site-header__logo img { display: block; }
.languages { position: absolute; top: 0; right: 0; line-height: 40px; border-left: 1px solid #999; padding-left: 5px; }
.languages__option { margin-left: 10px; padding: 0; border: 0; background: none; color: #666; font: inherit; cursor: pointer; text-transform: uppercase; }
.languages__option:hover, .languages__option:focus { text-decoration: underline; }
.toolbar__list { display: flex; flex-wrap: wrap; gap: 15px; margin: 0; padding: 0; list-style: none; }
.toolbar__item a { display: flex; align-items: center; gap: 4px; color: #6a1b76; text-decoration: none; text-transform: uppercase; max-width: 9rem; }
.toolbar__item a:hover span { text-decoration: underline; }

/* Bloque principal verde con borde morado */
.site-main { background: #00aaa6; padding: 21px 25px; border-bottom: 10px solid #6a1b76; }
.columns { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.hero { flex: 1 1 440px; min-height: 325px; display: flex; flex-direction: column; color: #fff; }
.hero h1 { font-size: 30px; text-transform: uppercase; color: #fff; }
.hero__text { margin-top: auto; font-size: 14px; line-height: 20px; }
.hero--narrow { flex: 0 1 245px; min-height: 0; }
.card, .panel { background: #f2f3f5 url("../img/bg_bloqueB.png") right bottom no-repeat; padding: 15px 22px 45px; }
.card { flex: 1 1 162px; min-height: 310px; }
.panel { flex: 1 1 560px; min-height: 470px; position: relative; }
.panel--full { min-height: 0; }
.card h2, .panel__title, .panel h1 { font-size: 18px; text-transform: uppercase; color: #00aaa6; }
.card label { display: block; }

/* Botones del legado */
.button { display: inline-block; padding: 0 14px; border: 0; background: #6a1b76 url("../img/bg_boton.gif") right top no-repeat; color: #fff; font: bold 12px/23px Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.button--purple { background: #6a1b76 url("../img/bg_boton_morado.gif") right top no-repeat; line-height: 29px; }
.button:hover, .button:focus { text-decoration: underline; }

/* Contenido CMS */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: 11px; }
.breadcrumb li + li::before { content: "> "; }
.cms-body { line-height: 1.5; }
.cms-body ul { padding-left: 0; list-style: none; }
.cms-body li { background: url("../img/bullet.gif") left 5px no-repeat; padding: 0 0 8px 14px; }
.faq { margin: 0; padding-left: 2rem; }
.faq__question { font-size: 16px; color: #6a1b76; margin-top: 1rem; }
.faq__image { max-width: 100%; height: auto; }
.member { display: flex; flex-wrap: wrap; gap: 0 20px; background: #fff; padding: 10px; margin-bottom: 10px; }
.member__photo { border-right: 1px solid #00aaa6; padding-right: 10px; max-width: 120px; height: auto; }
.member h3 { flex: 1; font-size: 16px; color: #6a1b76; }

/* Pie */
.site-footer { color: #6a1b76; padding: 15px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.site-footer a { color: #6a1b76; }

/* Ventanas modales (bienvenida, FAQ, Comité) */
dialog { border: 0; padding: 20px 25px; background: #00aaa6; color: #fff; max-width: min(800px, 95vw); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.welcome { width: 340px; font-size: 14px; }
.welcome h2 { font-size: 21px; }
.modal { width: 800px; height: min(560px, 90vh); padding: 0; }
.modal__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; }
.modal__title { margin: 0; font-size: 16px; color: #fff; }
.modal__close { border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }
.modal__frame { display: block; width: 100%; height: calc(100% - 44px); border: 0; background: #00aaa6; }

/* Versión sin layout dentro de la modal (legado: popup.css) */
.layer { margin: 0; padding: 20px 25px; background: #00aaa6; color: #fff; font-size: 14px; }
.layer .panel__title { color: #6a1b76; font-size: 24px; }
.layer .faq__question { color: #6a1b76; font-size: 18px; }
.layer .cms-body a { color: #fff; }
.layer .member { color: #666; }

@media (max-width: 760px) {
  .site { padding: 0; }
  .site-header { min-height: 0; padding: 50px 12px 10px; }
  .site-main { padding: 12px; }
  .hero, .hero--narrow, .card, .panel { flex-basis: 100%; min-height: 0; }
}