/* ==========================================================================
   SI Consulting — hoja de estilos compartida
   Paleta y tipografia del manual de marca 2018/2019.
   Fuentes: SIL Open Font License (ver assets/fonts/LICENCIAS.txt).
   ========================================================================== */

@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-300.woff2") format("woff2");
             font-weight: 300; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-400.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-600.woff2") format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/baskerville-400.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/baskerville-700.woff2") format("woff2");
             font-weight: 700; font-display: swap; }

:root {
  --verde-claro: #A9C642;
  --verde:       #24A671;
  --teal:        #017E7E;
  --azul:        #454A7A;
  --gris:        #283030;

  --bg: #ffffff;
  --banda: #f2f4f1;
  --border: #e3e6e1;
  --text: var(--gris);
  --muted: #6b7370;
  --accent: var(--teal);
  --accent-soft: #e7f1f0;
  --alerta: #8a5a1c;
  --alerta-soft: #fbf1e2;
  --pill: #eef1ed;

  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Nunito Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 6px;
  --degradado: linear-gradient(45deg, var(--verde-claro), var(--verde) 45%, var(--teal) 72%, var(--azul));
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 400 15px/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 10px; z-index: 20; background: #fff;
              padding: 8px 14px; border-radius: var(--radius); }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: 41px; line-height: 1.13; margin: 0 0 16px; }
h2 { font-size: 31px; line-height: 1.22; margin: 0 0 14px; }
h3 { font-size: 18px; line-height: 1.35; margin: 0 0 8px; }
p { margin: 0 0 14px; }
.eyebrow { color: #016a6a;   /* un punto mas oscuro que --accent: AA sobre la banda gris */ font-family: var(--sans); font-size: 12px; font-weight: 600;
           letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }
.entradilla { color: var(--muted); font-size: 15.5px; max-width: 620px; }
.seccion { padding: 62px 0; }
.seccion.banda { background: var(--banda); }
.seccion.oscura { background: var(--gris); color: #dfe4e1; }
.seccion.oscura h2, .seccion.oscura h3 { color: #fff; }
.seccion.oscura .eyebrow { color: var(--verde-claro); }

/* ---------- botones ---------- */
.btn { display: inline-block; text-decoration: none; font-size: 14.5px; font-weight: 600;
       padding: 11px 22px; border-radius: var(--radius); border: 1px solid transparent; }
.btn.solido { background: var(--teal); color: #fff; }
.btn.solido:hover { background: #016a6a; }
.btn.linea { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn.linea:hover { background: var(--accent-soft); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; }

/* ---------- navegacion ---------- */
.franja { height: 4px; background: var(--degradado); }
/* El selector de idioma, en su propia franja: dentro de .nav-in se comia 93px
   y en portugues la fila no entraba. No es sticky, para no engordar la
   cabecera fija. */
.barra-util { border-bottom: 1px solid var(--border); background: #fafbfa; }
.barra-util .wrap { display: flex; justify-content: flex-end;
                    padding-top: 5px; padding-bottom: 5px; }
.barra-util .idiomas { font-size: 12px; }
.nav { border-bottom: 1px solid var(--border); background: var(--bg);
       position: sticky; top: 0; z-index: 10; }
.nav-in { display: flex; align-items: center; gap: 20px; row-gap: 10px;
          flex-wrap: wrap; padding: 13px 0; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: none; }
.simbolo { height: 38px; width: auto; }
.palabra { font-family: var(--serif); font-size: 15.5px; letter-spacing: 0.07em;
           text-transform: uppercase; line-height: 1.1; margin: 0; }
.lema { font-family: var(--serif); font-size: 7.5px; letter-spacing: 0.17em;
        text-transform: uppercase; color: var(--muted); margin: 2px 0 0; }
.enlaces { display: flex; gap: 14px; margin-left: auto; font-size: 13.5px; }
.enlaces a { color: var(--text); text-decoration: none; padding-bottom: 3px; white-space: nowrap; }
.enlaces a:hover { color: var(--accent); }
.enlaces a[aria-current="page"] { color: var(--accent); border-bottom: 2px solid var(--accent); }
.idiomas { font-size: 13px; color: var(--muted); white-space: nowrap; }
.idiomas b { color: var(--text); font-weight: 600; }
.btn-nav { background: var(--teal); color: #fff; text-decoration: none; white-space: nowrap;
           padding: 9px 19px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; }
.btn-nav:hover { background: #016a6a; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--border);
            border-radius: var(--radius); padding: 7px 11px; cursor: pointer;
            font: inherit; font-size: 13.5px; color: var(--text); }

/* ---------- cabecera de pagina ---------- */
.hero { background: var(--banda); border-bottom: 1px solid var(--border); padding: 52px 0 50px; }
.hero-in { display: flex; gap: 46px; align-items: flex-start; flex-wrap: wrap; }
.hero-txt { flex: 1 1 500px; min-width: 0; }
.migas { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.migas a { color: var(--muted); text-decoration: none; }
.migas a:hover { color: var(--accent); }
.nota-pie-hero { font-size: 13px; color: var(--muted); margin: 22px 0 0; }

/* ---------- tarjetas ---------- */
.rejilla { display: grid; gap: 18px; }
.rejilla.c2 { grid-template-columns: repeat(2, 1fr); }
.rejilla.c3 { grid-template-columns: repeat(3, 1fr); }
.rejilla.c4 { grid-template-columns: repeat(4, 1fr); }
.tarjeta { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.tarjeta.filo { border-top: 3px solid var(--teal); }
.tarjeta.filo-verde { border-top: 3px solid var(--verde); }
.tarjeta.filo-azul { border-top: 3px solid var(--azul); }
.tarjeta .rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.13em;
                   text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.tarjeta ul { margin: 0 0 16px; padding-left: 18px; color: var(--muted); font-size: 14px; }
.tarjeta li { margin-bottom: 7px; }
.enlace-flecha { text-decoration: none; font-size: 14px; font-weight: 600; }
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha::after { content: " →"; }
.situaciones { display: grid; grid-template-columns: 1fr 2fr; gap: 44px; }
.cita { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.cita q { font-family: var(--serif); font-style: italic; display: block; margin-bottom: 10px; font-size: 15px; }
.cita p { margin: 0; color: var(--muted); font-size: 14px; }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.paso { border-top: 2px solid var(--border); padding-top: 14px; }
.paso.c1 { border-color: var(--verde-claro); }
.paso.c2 { border-color: var(--verde); }
.paso.c3 { border-color: var(--teal); }
.paso.c4 { border-color: var(--azul); }
.paso .n { font-family: var(--serif); font-size: 21px; color: var(--muted); display: block; margin-bottom: 7px; }
.paso p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- convocatorias ---------- */
.conv { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
        padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 26px; }
.conv:hover { border-color: #cbd3ce; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pill { font-size: 11.5px; padding: 3px 10px; border-radius: 3px;
        background: var(--pill); color: var(--muted); white-space: nowrap; }
.pill.origen { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pill.programa { background: #eef0f5; color: var(--azul); }
.conv-titulo { font-family: var(--serif); font-size: 16.5px; line-height: 1.4; margin: 0 0 7px; }
/* Marca el idioma del titulo oficial cuando no coincide con el de la web */
.idioma-orig { display: inline-block; font-family: var(--sans); font-size: 9.5px; font-weight: 600;
               letter-spacing: .06em; color: var(--muted); background: var(--pill);
               border-radius: 3px; padding: 1px 5px; margin-right: 7px;
               vertical-align: 2px; cursor: help; }
.conv-titulo a { color: var(--text); text-decoration: none; }
.conv-titulo a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.organismo { color: var(--muted); font-size: 13.5px; margin: 0; }

/* Traducir el titulo es opcional: el original manda y la traduccion se
   anade debajo, siempre marcada como automatica. */
.traducir { background: none; border: 0; padding: 0; margin: 0 0 6px; cursor: pointer;
            font: inherit; font-family: var(--sans); font-size: 12.5px;
            color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.traducir:hover { color: var(--teal); }
.traduccion { font-family: var(--serif); font-size: 15.5px; line-height: 1.4;
              color: var(--muted); margin: 0 0 7px; padding-left: 11px;
              border-left: 2px solid var(--border); }
.traduccion .auto { display: inline-block; font-family: var(--sans); font-size: 10.5px;
                    letter-spacing: 0.04em; text-transform: uppercase;
                    color: var(--muted); opacity: .75; margin-left: 7px; }

/* Elegibilidad: una sola eleccion, no una faceta de casillas. */
.grupo.elegibilidad label { display: block; font-family: var(--sans); font-size: 11px;
                            font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
                            color: var(--muted); margin-bottom: 7px; }
.grupo.elegibilidad select { width: 100%; padding: 7px 9px; font: inherit; font-size: 13.5px;
                             border: 1px solid var(--border); border-radius: var(--radius);
                             background: #fff; color: var(--text); }
.grupo .pista { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 8px 0 0; }
.interruptor { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px;
               cursor: pointer; line-height: 1.35; }
.interruptor input { margin-top: 2px; flex: none; }
.conv-derecha { text-align: right; display: flex; flex-direction: column; gap: 2px; min-width: 152px; }
.cierra-et { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fecha { font-family: var(--serif); font-size: 19px; line-height: 1.25; }
.restante { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.restante.urgente { color: var(--alerta); }
.restante.normal { color: var(--muted); font-weight: 400; }
.conv-derecha a { font-size: 13.5px; text-decoration: none; }
.conv-derecha a:hover { text-decoration: underline; }
.oficial::after { content: " \2197"; }

/* ---------- pie ---------- */
footer { background: var(--gris); color: #b9c1bd; padding: 44px 0 30px; font-size: 13.5px; }
.pie-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; }
.pie-logo { height: 84px; width: auto; }
footer h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
            color: #fff; margin: 0 0 12px; font-family: var(--sans); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 7px; }
footer a { color: #b9c1bd; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
.pie-legal { border-top: 1px solid #3a4341; margin-top: 32px; padding-top: 18px;
             display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }

.aviso-maqueta { background: var(--alerta-soft); color: var(--alerta); font-size: 13px;
                 padding: 9px 0; border-bottom: 1px solid #f0e0cb; }
.aviso-maqueta code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }

@media (max-width: 1220px) {
  .enlaces { position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column;
             gap: 0; border-bottom: 1px solid var(--border); padding: 6px 28px 14px; display: none; }
  .enlaces.abierto { display: flex; }
  .enlaces a { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .enlaces a:last-child { border-bottom: 0; }
  .nav-in { position: relative; }
  .menu-btn { display: block; }
  .btn-nav { margin-left: 0; }
}
@media (max-width: 980px) {
  .situaciones { grid-template-columns: 1fr; gap: 24px; }
  h1 { font-size: 33px; }
  h2 { font-size: 26px; }
  .rejilla.c3, .rejilla.c4, .numeros { grid-template-columns: repeat(2, 1fr); }
  .pie-cols { grid-template-columns: 1fr 1fr; }
  .seccion { padding: 46px 0; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  h1 { font-size: 27px; }
  h2 { font-size: 23px; }
  .rejilla.c2, .rejilla.c3, .rejilla.c4, .numeros, .pie-cols { grid-template-columns: 1fr; }
  .conv { grid-template-columns: 1fr; gap: 14px; }
  .conv-derecha { text-align: left; min-width: 0; }
  .palabra { font-size: 14px; }
  .simbolo { height: 32px; }
  .btn-nav { padding: 8px 14px; font-size: 13px; }
}


/* --- Logos de clientes -----------------------------------------------
   En gris la fila se lee como un conjunto; a color, cada logo tira para
   su lado y la seccion se vuelve un muestrario. Por eso el color se
   reserva para cuando alguien se detiene en uno.

   Los archivos vienen de dieciocho empresas distintas, con proporciones
   que no tienen nada que ver entre si. Estan igualados por AREA antes de
   entrar aqui, no por altura: un logo cuadrado puesto a la misma altura
   que uno apaisado se ve mucho mas chico de lo que pesa en la fila. */
.logos { display: grid; grid-template-columns: repeat(6, 1fr);
         gap: 20px 14px; align-items: center; justify-items: center; }
.logos img { max-width: 100%; height: auto; }

/* El gris solo donde hay raton: en un movil no existe "pasar por encima",
   asi que el color quedaria escondido para siempre. Ahi van a color. */
@media (hover: hover) {
  .logos img { filter: grayscale(1) contrast(0.9); opacity: 0.74;
               transition: filter 0.25s ease, opacity 0.25s ease; }
  .logos img:hover { filter: none; opacity: 1; }
}
@media (max-width: 860px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 440px) { .logos { grid-template-columns: repeat(2, 1fr); } }


/* --- Cabecera en pantallas estrechas ---------------------------------
   El boton de contacto sube a la fila del logo, a la izquierda del boton
   de menu. Antes no cabia y se caia a una segunda linea el solo: la
   cabecera medía 146px de una pantalla de 844, el 17%, y como ademas va
   fija, ese espacio se perdia durante toda la lectura.

   En el HTML el boton sigue estando al final, que es donde corresponde
   para quien navega con teclado o lector de pantalla. Aqui solo se cambia
   el orden en que se dibuja. */
@media (max-width: 1220px) {
  .marca { margin-right: auto; }
  .btn-nav { order: 2; margin-left: 0; }
  .menu-btn { order: 3; margin-left: 0; }
}

@media (max-width: 600px) {
  /* Tres cosas en una fila de 350px utiles: hay que apretar los huecos y
     los botones. El caso dificil es el portugues, 'Fale connosco'. */
  .nav-in { gap: 10px; }
  .btn-nav { padding: 7px 12px; font-size: 12.5px; }
  .menu-btn { padding: 6px 10px; font-size: 12.5px; }
}

/* Donde deja de entrar el nombre al lado de los dos botones. Esta medido,
   no estimado: con el nombre visible, ingles y espanol entran desde 375px;
   el portugues necesita 400 porque 'Fale connosco' es mas largo que
   'Hablemos' y que 'Talk to us'. Por debajo de su umbral se queda el
   simbolo, que es la parte reconocible de la marca, y el nombre vuelve en
   cuanto hay sitio. El enlace sigue llevando a la portada y lo que lee un
   lector de pantalla no cambia. */
@media (max-width: 374px) {
  .marca .palabra, .marca .lema { display: none; }
}
@media (max-width: 399px) {
  html[lang="pt"] .marca .palabra, html[lang="pt"] .marca .lema { display: none; }
}



/* La bajada de marca es mas ancha que el nombre que lleva encima, porque va
   muy espaciada: era ella, y no el nombre, la que empujaba la fila a partirse
   en pantallas de 375 y 390px. El espaciado de la bajada se reduce en movil
   hasta que deja de mandar en el ancho del logo. Se sigue leyendo igual: a
   ese tamano el espaciado es textura, no legibilidad. */
@media (max-width: 600px) {
  .lema { letter-spacing: 0.06em; font-size: 7px; }
}


/* Por que los huecos de la barra son 14 y 20 y no 18 y 24: el ancho util del
   sitio son 1124px fijos, no la pantalla. Con siete enlaces, el portugues
   pedia unos 1137 y la barra se partia en dos lineas a cualquier resolucion.
   Sobraban trece pixeles. Apretar los huecos es lo que menos se nota: lo
   alternativo era acortar una etiqueta, y los nombres de las secciones valen
   mas que cuatro pixeles de aire. */