/* ============================================================ InterRed · sistema de diseño Colores tomados del logo vectorial institucional. Claro siempre: la coordinación pidió expresamente nada oscuro. ============================================================ */ :root{ --marino:#1B1F45; --azul:#1E5C9E; --rojo:#EF2E33; --amarillo:#FCCC22; --rojo-txt:#D7292E; --azul-p:#DFE8F1; --rojo-p:#FDE2E2; --amarillo-p:#FFF8E0; --verde-p:#ECEDE1; --naranjo-p:#FDE6D9; --papel:#F5F7F9; --blanco:#fff; --hueso:#ECEFF3; --suave:#4A5170; --tenue:#7A81A0; --linea:#E3E8EE; --ancho:1180px; --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Libre Franklin",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --sombra:0 1px 2px rgba(27,31,69,.05), 0 12px 32px -18px rgba(27,31,69,.28); } /* ---------- base sobre DIVI ---------- */ /** * El fondo va en , no solo en , y con el color del pie. * * Safari en iOS deja rebotar la página al llegar al final y muestra lo que hay * por debajo del documento, que es el fondo de . Con el fondo blanco eso * se ve como una franja vacía enorme después del pie —parece que la página * sigue y no hay nada—. Pintando del color del pie, el rebote muestra * una continuación del pie y se lee como parte del diseño. * * El documento no tiene contenido de más: termina exactamente donde termina el * pie. Es un comportamiento del navegador, no un desbordamiento. */ html{ background:var(--azul-p); } body, #page-container{ background:var(--blanco); } /* DIVI reserva relleno superior para su encabezado fijo. Este tema usa el suyo propio, así que ese espacio queda como una franja en blanco. */ #page-container{ padding-top:0!important; } #main-content{ background:transparent; } body{ font-family:var(--sans); color:var(--marino); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } #et-main-area{ overflow-x:clip; } .ir-w{ max-width:var(--ancho); margin:0 auto; padding:0 1.5rem; } h1,h2,h3,h4,.ir-serif{ font-family:var(--serif); font-weight:400; color:var(--marino); } h1{ font-size:clamp(2.3rem,5.4vw,4.2rem); line-height:1.03; letter-spacing:-.022em; } h2{ font-size:clamp(1.8rem,3.6vw,2.9rem); line-height:1.1; letter-spacing:-.018em; } h3{ font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.2; letter-spacing:-.01em; } p{ color:var(--suave); } a{ color:var(--azul); } a:hover{ color:var(--marino); } :focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; } .ir-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tenue); margin:0 0 .6rem; } .ir-lead{ font-family:var(--serif); font-size:clamp(1.1rem,1.9vw,1.35rem); line-height:1.5; color:var(--suave); } /* ---------- encabezado ---------- */ #ir-header{ position:sticky; top:0; z-index:900; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--linea); } /** * Tres zonas: logotipo a la izquierda, navegación al centro, idioma a la * derecha. Con el menú empujado al extremo derecho quedaba un vacío enorme * junto al logotipo y el selector pegado al último ítem, como si fueran parte * de la misma lista. */ .ir-header__in{ display:flex; align-items:center; gap:2rem; min-height:82px; } .ir-marca{ display:flex; align-items:center; gap:.55rem; text-decoration:none; flex:0 0 auto; } .ir-marca svg{ flex:0 0 auto; } /* El tamaño lo fija la clase del logotipo, no el selector de elemento: si `.ir-marca svg` fija medidas queda en (0,1,1) y le gana a `.ir-marca__logo`, que es (0,1,0). Es la misma colisión que ya pasó con el padding del héroe. */ .ir-marca__txt{ font-family:var(--serif); font-size:1.45rem; font-weight:500; color:var(--marino); letter-spacing:-.02em; line-height:1; } .ir-marca:hover .ir-marca__txt{ color:var(--azul); } .ir-nav{ margin-inline:auto; } .ir-nav > ul{ display:flex; gap:1.9rem; list-style:none; margin:0; padding:0; align-items:center; } .ir-nav a{ font-size:.86rem; font-weight:500; color:var(--marino); text-decoration:none; padding:.4rem 0; position:relative; white-space:nowrap; } .ir-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rojo); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; } .ir-nav a:hover::after, .ir-nav .current-menu-item>a::after{ transform:scaleX(1); } .ir-burger{ display:none; background:none; border:1px solid var(--linea); border-radius:4px; padding:.45rem .55rem; cursor:pointer; } .ir-burger span{ display:block; width:20px; height:2px; background:var(--marino); margin:3px 0; } /* ---------- portada ---------- */ .ir-hero{ position:relative; overflow:hidden; background:var(--blanco); } /* Capas del héroe, de atrás hacia adelante: foto → velo de color → patrón de red → símbolo → contenido. */ .ir-hero__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.8; } .ir-hero__velo{ position:absolute; inset:0; z-index:1; background:linear-gradient(155deg, rgba(255,248,224,.72) 0%, rgba(255,255,255,.64) 38%, rgba(223,232,241,.74) 100%); } /* Un refuerzo solo detrás del texto, que es donde el contraste debe cumplir. Sin esto el titular quedaría sobre lo que toque de la foto. */ .ir-hero__velo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 48%, transparent 70%); } .ir-hero__in{ position:relative; z-index:4; max-width:44rem; /* padding-block y no la forma corta: `padding: X 0 Y` anulaba el relleno lateral que .ir-w aplica sobre este mismo elemento, y el texto quedaba pegado al borde de la pantalla. */ padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3.5rem,7vw,5.5rem); } .ir-hero h1{ margin:0 0 1.1rem; text-wrap:balance; } .ir-hero .ir-lead{ margin:0 0 2rem; max-width:36rem; } .ir-hero__marca{ position:absolute; right:-4%; top:50%; transform:translateY(-50%); width:min(44%,460px); opacity:.5; z-index:3; pointer-events:none; } .ir-red-fondo{ position:absolute; inset:0; z-index:2; opacity:.5; } .ir-btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--marino); color:#fff; font-size:.92rem; font-weight:600; padding:.85rem 1.5rem; border-radius:4px; text-decoration:none; transition:background .15s ease; } .ir-btn:hover{ background:var(--azul); color:#fff; } .ir-btn--claro{ background:#fff; color:var(--marino); border:1px solid var(--linea); } .ir-btn--claro:hover{ background:var(--marino); color:#fff; } .ir-cifras{ display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:2.5rem; } .ir-cifra b{ display:block; font-family:var(--serif); font-size:2.6rem; line-height:1; color:var(--marino); font-weight:400; } .ir-cifra span{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue); } /* ---------- secciones ---------- */ .ir-sec{ padding-block:clamp(3rem,6.5vw,5.5rem); } .ir-sec--papel{ background:var(--papel); } .ir-sec--azul{ background:var(--azul-p); } .ir-sec__cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.2rem; flex-wrap:wrap; } .ir-sec__cab h2{ margin:0; max-width:20ch; text-wrap:balance; } .ir-sec__cab p{ margin:.5rem 0 0; max-width:46ch; font-size:.95rem; } .ir-grid{ display:grid; gap:1.2rem; } .ir-grid--3{ grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); } .ir-grid--4{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); } .ir-grid--2{ grid-template-columns:repeat(auto-fit,minmax(22rem,1fr)); } .ir-card{ background:#fff; border:1px solid var(--linea); border-radius:6px; padding:1.5rem; display:flex; flex-direction:column; gap:.5rem; transition:transform .18s ease, box-shadow .18s ease; } .ir-card:hover{ transform:translateY(-3px); box-shadow:var(--sombra); } .ir-card h3{ margin:0; font-size:1.15rem; } .ir-card p{ margin:0; font-size:.9rem; } .ir-card__meta{ font-size:.78rem; color:var(--tenue); margin-top:auto; padding-top:.6rem; } .ir-tag{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .5rem; border-radius:3px; background:var(--azul-p); color:#164A7E; align-self:flex-start; } .ir-tag--rojo{ background:var(--rojo-p); color:#9B2226; } .ir-tag--amarillo{ background:var(--amarillo-p); color:#5F4E10; } .ir-tag--verde{ background:var(--verde-p); color:#3B5A32; } /* ---------- integrantes ---------- */ /* Columna con el país abajo del todo: no todas las fichas traen cargo, y sin esto el país de quien no lo tiene sube una línea y la fila queda dentada. */ .ir-persona{ text-align:center; height:100%; display:flex; flex-direction:column; } .ir-persona > a{ display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit; } .ir-persona .ir-pais{ margin-top:auto; padding-top:.3rem; } .ir-persona__foto{ aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:var(--hueso); display:grid; place-items:center; margin-bottom:.85rem; position:relative; } .ir-persona__foto img{ width:100%; height:100%; object-fit:cover; display:block; } .ir-persona__ini{ font-family:var(--serif); font-size:2.6rem; color:#fff; } .ir-persona h3{ font-size:1.02rem; margin:0 0 .15rem; line-height:1.25; } .ir-persona p{ font-size:.82rem; margin:0; line-height:1.45; } .ir-persona .ir-pais{ font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--rojo-txt); } /* ---------- boletín ---------- */ .ir-bol{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:2.5rem; align-items:center; } .ir-bol__portada{ border-radius:6px; overflow:hidden; box-shadow:0 20px 50px -24px rgba(27,31,69,.5); border:1px solid var(--linea); } .ir-bol__portada img{ display:block; width:100%; height:auto; } .ir-idiomas-pdf{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; } .ir-idiomas-pdf a{ font-size:.8rem; font-weight:600; padding:.5rem .85rem; border-radius:4px; text-decoration:none; background:#fff; border:1px solid var(--linea); color:var(--marino); } .ir-idiomas-pdf a:hover{ background:var(--marino); color:#fff; border-color:var(--marino); } /* ---------- video ---------- */ .ir-video{ position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--marino); box-shadow:var(--sombra); } .ir-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* ---------- mapa de la red ---------- */ .ir-mapa{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:center; } .ir-mapa svg{ width:100%; height:auto; } .ir-mapa__nodo{ cursor:pointer; transition:r .15s ease; } .ir-paises{ list-style:none; margin:0; padding:0; columns:2; column-gap:1.5rem; } .ir-paises li{ break-inside:avoid; padding:.5rem 0; border-bottom:1px solid var(--linea); font-size:.88rem; } .ir-paises b{ display:block; color:var(--marino); font-weight:600; } .ir-paises span{ color:var(--tenue); font-size:.8rem; } /* ---------- pie ---------- */ #ir-footer{ background:var(--azul-p); border-top:4px solid var(--marino); padding:3.5rem 0 2rem; margin-top:0; } .ir-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; margin-bottom:2.5rem; } #ir-footer h4{ font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--marino); margin:0 0 .9rem; } #ir-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; } #ir-footer a{ font-size:.88rem; color:var(--suave); text-decoration:none; } #ir-footer a:hover{ color:var(--marino); text-decoration:underline; } #ir-footer p{ font-size:.86rem; margin:0 0 .6rem; } .ir-footer__marca{ display:flex; align-items:center; gap:.55rem; margin-bottom:1rem; } .ir-footer__marca svg{ flex:0 0 auto; } .ir-footer__marca span{ font-family:var(--serif); font-size:1.5rem; color:var(--marino); } .ir-footer__base{ border-top:1px solid rgba(27,31,69,.15); padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:var(--tenue); } /* ---------- responsivo ---------- */ @media (max-width:1000px){ .ir-nav{ display:none; } .ir-burger{ display:block; margin-inline-start:auto; } .ir-nav.abierto{ display:block; position:absolute; top:74px; left:0; right:0; background:#fff; border-bottom:1px solid var(--linea); padding:1rem 1.5rem; box-shadow:var(--sombra); } .ir-nav.abierto ul{ flex-direction:column; align-items:flex-start; gap:.9rem; } .ir-footer__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ .ir-hero__marca{ display:none; } .ir-bol, .ir-mapa{ grid-template-columns:1fr; } .ir-footer__grid{ grid-template-columns:1fr; gap:1.8rem; } .ir-paises{ columns:1; } .ir-cifras{ gap:1.6rem; } } @media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } } /* ---------- enlace de salto ---------- */ .ir-saltar{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--marino); color:#fff; padding:.8rem 1.2rem; font-size:.9rem; font-weight:600; text-decoration:none; border-radius:0 0 4px 0; } .ir-saltar:focus{ left:0; color:#fff; } .screen-reader-text{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .screen-reader-text:focus{ position:static!important; width:auto; height:auto; clip:auto; margin:0; background:var(--marino); color:#fff; padding:.8rem 1.2rem; } /* ============================================================ Páginas interiores ============================================================ */ /* ---------- el logotipo institucional ---------- */ /* Solo se fija el alto: el ancho lo deriva el navegador del viewBox. Fijar las dos medidas rompe la proporción en cuanto una media query cambia una sola de ellas, y el logotipo se deforma o se recorta. */ .ir-marca__logo{ height:34px; width:auto; display:block; } .ir-footer__logo{ height:34px; width:auto; max-width:100%; display:block; } .ir-footer__marca{ display:block; } @media (max-width:520px){ .ir-marca__logo{ height:27px; } } /* ---------- cabecera de página interior ---------- */ .ir-cab{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--amarillo-p) 0%,#fff 45%,var(--azul-p) 100%); } .ir-cab__in{ position:relative; z-index:2; padding-block:clamp(2.5rem,5.5vw,4rem) clamp(2rem,4vw,3rem); max-width:46rem; } .ir-cab h1{ margin:0 0 .7rem; text-wrap:balance; } .ir-cab .ir-lead{ margin:0; max-width:40rem; } /* ---------- migas ---------- */ .ir-migas{ margin-bottom:1.4rem; } .ir-migas a{ font-size:.85rem; font-weight:600; text-decoration:none; color:var(--azul); } .ir-migas a:hover{ color:var(--marino); text-decoration:underline; } /* ---------- filtros por taxonomía ---------- */ .ir-filtros{ display:flex; flex-wrap:wrap; gap:1.6rem 2.5rem; padding-bottom:1.6rem; margin-bottom:2rem; border-bottom:1px solid var(--linea); } .ir-filtros__etiqueta{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--tenue); margin-bottom:.5rem; } .ir-filtros__grupo ul{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; } .ir-filtros a{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; text-decoration:none; padding:.32rem .7rem; border-radius:1rem; background:var(--hueso); color:var(--marino); border:1px solid transparent; } .ir-filtros a span{ font-size:.7rem; color:var(--tenue); } .ir-filtros a:hover{ background:var(--azul-p); border-color:var(--azul); } .ir-filtros a[aria-current="page"]{ background:var(--marino); color:#fff; } .ir-filtros a[aria-current="page"] span{ color:rgba(255,255,255,.7); } /* ---------- tarjetas con imagen ---------- */ .ir-card{ text-decoration:none; color:inherit; overflow:hidden; } .ir-card__img{ margin:-1.5rem -1.5rem .3rem; aspect-ratio:16/10; overflow:hidden; background:var(--hueso); } .ir-card__img img{ width:100%; height:100%; object-fit:cover; display:block; } .ir-card--termino h3{ font-size:1.05rem; } /* ---------- paginación ---------- */ .ir-paginacion{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:2.5rem; } .ir-paginacion .page-numbers{ display:grid; place-items:center; min-width:2.5rem; height:2.5rem; padding:0 .6rem; border:1px solid var(--linea); border-radius:4px; text-decoration:none; font-size:.88rem; color:var(--marino); } .ir-paginacion .page-numbers:hover{ background:var(--azul-p); } .ir-paginacion .current{ background:var(--marino); color:#fff; border-color:var(--marino); } .ir-vacio{ padding:3rem 0; text-align:center; color:var(--tenue); font-size:1rem; } /* ---------- ficha de integrante ---------- */ .ir-ficha{ padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem); } .ir-ficha__grid{ display:grid; grid-template-columns:16rem minmax(0,1fr); gap:3rem; align-items:start; } .ir-ficha__foto{ aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:var(--hueso); display:grid; place-items:center; margin-bottom:1rem; } .ir-ficha__foto img{ width:100%; height:100%; object-fit:cover; display:block; } .ir-ficha__foto .ir-persona__ini{ font-size:4rem; color:#fff; } .ir-ficha__foto:not(:has(img)){ background:var(--azul); } .ir-btn--cv{ width:100%; justify-content:center; margin-bottom:1.4rem; } .ir-ficha__cuerpo h1{ margin:0 0 1rem; } .ir-ficha__bloque{ margin-top:2.8rem; padding-top:2rem; border-top:1px solid var(--linea); } .ir-ficha__bloque h2{ font-size:1.5rem; margin:0 0 1.2rem; } .ir-datos{ margin:0 0 1.4rem; padding:1.1rem 1.2rem; background:var(--papel); border-radius:5px; } .ir-datos dt{ font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--tenue); margin-bottom:.15rem; } .ir-datos dd{ margin:0 0 .85rem; font-size:.92rem; color:var(--marino); line-height:1.45; } .ir-datos dd:last-child{ margin-bottom:0; } .ir-enlaces-ext{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; } .ir-enlaces-ext a{ font-size:.86rem; font-weight:600; text-decoration:none; } .ir-enlaces-ext a:hover{ text-decoration:underline; } .ir-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.4rem; } .ir-chip{ font-size:.78rem; padding:.28rem .7rem; border-radius:1rem; text-decoration:none; background:var(--azul-p); color:#164A7E; } .ir-chip:hover{ background:var(--azul); color:#fff; } /* ---------- detalle ---------- */ .ir-detalle__grid{ display:grid; grid-template-columns:minmax(0,1fr) 17rem; gap:3rem; align-items:start; padding-block:clamp(2.5rem,5vw,3.5rem) clamp(3rem,6vw,5rem); } .ir-detalle__img{ margin:0 0 2rem; border-radius:6px; overflow:hidden; } .ir-detalle__img img{ width:100%; height:auto; display:block; } .ir-detalle__lado .ir-btn{ width:100%; justify-content:center; margin-bottom:1.2rem; } /* ---------- prosa ---------- */ .ir-prosa{ font-size:1.05rem; line-height:1.75; } .ir-prosa--ancha{ max-width:44rem; } .ir-prosa p{ margin:0 0 1.2rem; max-width:42rem; } .ir-prosa h2{ font-size:1.7rem; margin:2.2rem 0 .8rem; } .ir-prosa h3{ font-size:1.3rem; margin:1.8rem 0 .6rem; } .ir-prosa ul, .ir-prosa ol{ max-width:42rem; margin:0 0 1.2rem; padding-left:1.3rem; color:var(--suave); } .ir-prosa li{ margin-bottom:.4rem; } .ir-prosa img{ max-width:100%; height:auto; border-radius:5px; } .ir-prosa blockquote{ margin:1.6rem 0; padding:.4rem 0 .4rem 1.4rem; border-left:3px solid var(--amarillo); font-family:var(--serif); font-size:1.2rem; color:var(--marino); } @media (max-width:900px){ .ir-ficha__grid{ grid-template-columns:12rem minmax(0,1fr); gap:2rem; } .ir-detalle__grid{ grid-template-columns:1fr; gap:2rem; } } @media (max-width:600px){ .ir-ficha__grid{ grid-template-columns:1fr; } .ir-ficha__foto{ max-width:14rem; } .ir-card__img{ margin:-1.5rem -1.5rem .3rem; } } /* ============================================================ Navegación agrupada e idioma plegado ============================================================ */ /* ---------- submenús ---------- */ .ir-nav li{ position:relative; } .ir-nav .sub-menu{ position:absolute; top:calc(100% + .55rem); left:-.9rem; min-width:15rem; list-style:none; margin:0; padding:.5rem; z-index:50; background:#fff; border:1px solid var(--linea); border-radius:6px; box-shadow:var(--sombra); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease, visibility .15s; } .ir-nav li:hover>.sub-menu, .ir-nav li:focus-within>.sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } .ir-nav .sub-menu li{ display:block; } .ir-nav .sub-menu a{ display:block; padding:.5rem .8rem; border-radius:4px; font-size:.86rem; font-weight:400; white-space:normal; } .ir-nav .sub-menu a::after{ display:none; } .ir-nav .sub-menu a:hover, .ir-nav .sub-menu a:focus-visible{ background:var(--azul-p); color:var(--marino); } /* La flecha indica que hay más, sin depender solo del color. */ .ir-nav .menu-item-has-children>a::before{ content:""; position:absolute; right:-.85rem; top:50%; width:.42rem; height:.42rem; margin-top:-.32rem; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); opacity:.55; } .ir-nav .menu-item-has-children{ margin-right:.6rem; } /* ---------- idioma ---------- */ /* Una línea fina separa el idioma de la navegación: sin ella el selector se lee como un ítem más del menú. */ .ir-idioma{ position:relative; flex:0 0 auto; padding-inline-start:1.6rem; } .ir-idioma::before{ content:""; position:absolute; inset-block:.15rem; inset-inline-start:0; width:1px; background:var(--linea); } @media (max-width:1000px){ .ir-idioma{ padding-inline-start:0; } .ir-idioma::before{ display:none; } } .ir-idioma__btn{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; background:var(--hueso); border:1px solid transparent; border-radius:4px; padding:.4rem .6rem; font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--marino); } .ir-idioma__btn:hover{ background:var(--azul-p); } .ir-idioma__btn[aria-expanded="true"]{ background:var(--marino); color:#fff; } .ir-idioma__flecha{ transition:transform .15s ease; } .ir-idioma__btn[aria-expanded="true"] .ir-idioma__flecha{ transform:rotate(180deg); } .ir-idioma__lista{ position:absolute; top:calc(100% + .45rem); right:0; min-width:11rem; z-index:60; list-style:none; margin:0; padding:.4rem; background:#fff; border:1px solid var(--linea); border-radius:6px; box-shadow:var(--sombra); } .ir-idioma__lista[hidden]{ display:none; } .ir-idioma__lista a{ display:flex; align-items:baseline; gap:.55rem; padding:.45rem .6rem; border-radius:4px; text-decoration:none; font-size:.86rem; color:var(--marino); } .ir-idioma__lista a:hover{ background:var(--azul-p); } .ir-idioma__lista b{ font-size:.72rem; letter-spacing:.05em; color:var(--tenue); min-width:1.6rem; } @media (max-width:1000px){ .ir-nav.abierto .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--linea); border-radius:0; margin:.4rem 0 .4rem .3rem; padding:0 0 0 .7rem; min-width:0; } .ir-nav.abierto .menu-item-has-children>a::before{ right:auto; margin-left:.6rem; position:static; display:inline-block; } } /* ============================================================ Instituciones agrupadas por país ============================================================ */ .ir-paises-bloques{ display:flex; flex-direction:column; gap:3rem; } .ir-pais-bloque__titulo{ display:flex; align-items:baseline; gap:.9rem; margin:0 0 1.2rem; padding-bottom:.6rem; border-bottom:1px solid var(--linea); font-family:var(--serif); font-size:1.45rem; font-weight:400; color:var(--marino); } .ir-pais-bloque__titulo span{ font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--tenue); } .ir-muro{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:1.2rem; } /* La tarjeta es el

, no el enlace: dentro conviven dos destinos —el sitio de la institución y el archivo de quienes participan— y anidar un enlace dentro de otro no es HTML válido. */ .ir-muro__item{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--linea); border-radius:6px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .ir-muro__item:hover, .ir-muro__item:focus-within{ border-color:var(--azul); box-shadow:var(--sombra); transform:translateY(-2px); } .ir-muro__enlace{ display:flex; flex-direction:column; gap:.9rem; flex:1; padding:1.4rem 1.2rem; text-decoration:none; color:inherit; } .ir-muro__marca{ display:grid; place-items:center; height:4.6rem; } .ir-muro__marca img{ max-width:100%; max-height:4.6rem; width:auto; height:auto; display:block; /* Uniformidad por presentación: el archivo entregado queda intacto y al pasar el cursor cada institución recupera sus colores. */ filter:grayscale(1); opacity:.7; transition:filter .2s ease, opacity .2s ease; } .ir-muro__item:hover img, .ir-muro__item:focus-within img{ filter:grayscale(0); opacity:1; } .ir-muro__texto{ font-family:var(--serif); font-size:1.02rem; line-height:1.25; text-align:center; color:var(--tinta-suave); padding:0 .3rem; } .ir-muro__pie{ margin-top:auto; padding-top:.7rem; border-top:1px solid var(--linea-suave); } .ir-muro__pie b{ display:block; font-size:.82rem; font-weight:600; color:var(--marino); line-height:1.35; } /* En línea y no como caja aparte: así la flecha sigue a la última palabra del nombre, aunque el nombre ocupe dos renglones. */ .ir-externo{ display:inline; margin-left:.3rem; vertical-align:-1px; color:var(--tenue); transition:color .18s ease; } .ir-muro__item:hover .ir-externo, .ir-muro__item:focus-within .ir-externo{ color:var(--azul); } .ir-muro__gente{ display:block; padding:.55rem 1.2rem .9rem; margin-top:-.2rem; font-size:.72rem; color:var(--azul); text-decoration:none; } .ir-muro__gente:hover, .ir-muro__gente:focus-visible{ text-decoration:underline; } /* Las que aún no tienen logotipo no dejan un hueco: el nombre ocupa el lugar. */ .ir-muro__item--texto .ir-muro__marca{ background:var(--papel); border-radius:4px; } @media (prefers-reduced-motion:reduce){ .ir-muro__item, .ir-muro__marca img, .ir-externo{ transition:none; } } /* ---------- ANID ---------- */ .ir-anid{ margin-top:1rem; } .ir-anid p{ font-size:.74rem; margin:0 0 .45rem; color:var(--tenue); } .ir-anid img{ height:34px; width:auto; display:block; } /* ============================================================ Calendario de eventos ============================================================ */ .ir-cal{ --alto-celda:7.2rem; } .ir-cal__barra{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; padding-bottom:1.1rem; margin-bottom:1.6rem; border-bottom:1px solid var(--linea); } .ir-cal__nav{ display:flex; align-items:center; gap:.35rem; } .ir-cal__flecha, .ir-cal__hoy{ display:grid; place-items:center; height:2.3rem; cursor:pointer; font:inherit; background:#fff; border:1px solid var(--linea); border-radius:5px; color:var(--marino); } .ir-cal__flecha{ width:2.3rem; } .ir-cal__hoy{ padding:0 .85rem; font-size:.82rem; font-weight:600; } .ir-cal__flecha:hover, .ir-cal__hoy:hover{ background:var(--azul-p); border-color:var(--azul); } .ir-cal__periodo{ flex:1; margin:0; font-family:var(--serif); font-size:1.35rem; color:var(--marino); text-transform:capitalize; min-width:9rem; } .ir-cal__vistas{ display:flex; background:var(--hueso); border-radius:6px; padding:.2rem; gap:.15rem; } .ir-cal__vistas button{ padding:.42rem .9rem; border:0; border-radius:4px; cursor:pointer; font:inherit; font-size:.82rem; font-weight:600; background:transparent; color:var(--suave); } .ir-cal__vistas button:hover{ color:var(--marino); } .ir-cal__vistas button[aria-pressed="true"]{ background:#fff; color:var(--marino); box-shadow:0 1px 2px rgba(27,31,69,.12); } /* ---------- chips de evento ---------- */ .ir-cal__chip{ display:block; padding:.28rem .45rem; margin-top:.28rem; border-radius:4px; background:var(--azul-p); border-left:3px solid var(--azul); font-size:.72rem; line-height:1.3; text-decoration:none; color:var(--marino); overflow:hidden; text-overflow:ellipsis; } .ir-cal__chip b{ display:block; font-size:.66rem; font-weight:700; color:var(--azul); font-variant-numeric:tabular-nums; } .ir-cal__chip span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .ir-cal__chip:hover{ background:var(--marino); color:#fff; } .ir-cal__chip:hover b{ color:var(--amarillo); } .ir-cal__chip.es-pasado{ opacity:.5; } /* La modalidad se distingue por el borde, no solo por color: criterio 1.4.1. */ .ir-modo-borde--online{ border-left-style:dashed; border-left-color:var(--rojo-txt); background:var(--rojo-p); } .ir-modo-borde--online b{ color:var(--rojo-txt); } .ir-modo-borde--hibrido{ border-left-style:double; border-left-width:4px; border-left-color:#8A6E12; background:var(--amarillo-p); } .ir-modo-borde--hibrido b{ color:#8A6E12; } /* ---------- vista mes ---------- */ .ir-mes{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:6px; overflow:hidden; } .ir-mes__cabecera{ background:var(--papel); padding:.6rem .5rem; text-align:center; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue); } .ir-mes__dia{ background:#fff; min-height:var(--alto-celda); padding:.45rem; } .ir-mes__dia.es-fuera{ background:var(--papel); } .ir-mes__dia.es-fuera .ir-mes__num{ color:var(--tenue); opacity:.5; } .ir-mes__dia.es-hoy{ background:var(--amarillo-p); } .ir-mes__num{ font-size:.78rem; font-weight:600; color:var(--marino); font-variant-numeric:tabular-nums; } .ir-mes__dia.es-hoy .ir-mes__num{ display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; background:var(--marino); color:#fff; border-radius:50%; } /* ---------- vista semana ---------- */ .ir-semana{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:6px; overflow:hidden; } .ir-semana__dia{ background:#fff; min-height:11rem; padding:.5rem; } .ir-semana__dia.es-hoy{ background:var(--amarillo-p); } .ir-semana__cab{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.5rem; padding-bottom:.4rem; border-bottom:1px solid var(--linea-suave); } .ir-semana__cab b{ font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tenue); } .ir-semana__cab i{ font-style:normal; font-size:1.05rem; font-family:var(--serif); color:var(--marino); } /* ---------- vista agenda ---------- */ .ir-agenda{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; } .ir-agenda__dia{ display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1.2rem; align-items:start; padding:1rem 0; border-top:1px solid var(--linea); } .ir-agenda__dia:first-child{ border-top:0; } .ir-agenda__fecha{ text-align:center; padding-top:.15rem; } .ir-agenda__fecha b{ display:block; font-family:var(--serif); font-size:1.9rem; line-height:1; color:var(--marino); font-weight:400; } .ir-agenda__fecha span{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--rojo-txt); margin-top:.15rem; } .ir-agenda__fecha i{ display:block; font-style:normal; font-size:.66rem; color:var(--tenue); } .ir-agenda__eventos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; } .ir-evento{ display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:1rem; align-items:baseline; padding:.85rem 1rem; background:#fff; border:1px solid var(--linea); border-radius:6px; text-decoration:none; transition:border-color .16s ease, box-shadow .16s ease; } .ir-evento:hover{ border-color:var(--azul); box-shadow:var(--sombra); } .ir-evento--pasado{ opacity:.62; } .ir-evento__hora{ font-size:.8rem; font-weight:600; color:var(--azul); font-variant-numeric:tabular-nums; } .ir-evento__cuerpo b{ display:block; font-size:.98rem; font-weight:600; color:var(--marino); line-height:1.35; margin-bottom:.25rem; } .ir-evento__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.78rem; color:var(--tenue); } .ir-modo{ font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.14rem .45rem; border-radius:3px; background:var(--azul-p); color:#164A7E; } .ir-modo--online{ background:var(--rojo-p); color:#9B2226; } .ir-modo--hibrido{ background:var(--amarillo-p); color:#5F4E10; } @media (max-width:860px){ /* En pantallas angostas la parrilla de mes es ilegible: la agenda es la vista útil, así que las otras dos se ocultan en vez de encogerse. */ .ir-cal__vistas [data-vista="mes"], .ir-cal__vistas [data-vista="semana"]{ display:none; } .ir-mes, .ir-semana{ grid-template-columns:1fr; } .ir-mes__cabecera{ display:none; } .ir-mes__dia:not(:has(.ir-cal__chip)){ display:none; } .ir-evento{ grid-template-columns:1fr; gap:.3rem; } .ir-agenda__dia{ grid-template-columns:3.4rem minmax(0,1fr); gap:.9rem; } } @media (prefers-reduced-motion:reduce){ .ir-evento{ transition:none; } } /* ============================================================ Mapa de la Red · América en puntos ============================================================ */ /** * La figura tiene exactamente la proporción del mapa y **sin relleno**: si se * le pone padding, su caja interior deja de ser 86:110, el mapa se dibuja * centrado con franjas a los lados, y las etiquetas —que se posicionan en * porcentaje del contenedor— dejan de caer sobre su país. * * El aire para las etiquetas lo pone el contenedor de la sección, no la figura. */ .ir-mapa-red{ position:relative; margin:0 auto; width:100%; aspect-ratio:86/110; max-width:30rem; } .ir-mapa-red__fondo, .ir-mapa-red__trazo, .ir-mapa-red__etiquetas{ inset:0; } .ir-mapa{ overflow:visible; } .ir-mapa > :first-child{ padding-inline:3rem; } .ir-mapa-red__fondo, .ir-mapa-red__trazo{ position:absolute; inset:0; width:100%; height:100%; } .ir-mapa-red__fondo{ object-fit:contain; } /* Las líneas se dibujan solas al entrar en pantalla. */ .ir-mapa-red__linea{ stroke-dasharray:200; stroke-dashoffset:200; } .ir-mapa-red.es-visible .ir-mapa-red__linea{ animation:ir-trazar 1.5s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(var(--i) * .11s); } @keyframes ir-trazar{ to{ stroke-dashoffset:0; } } /* Halo latiendo, solo en los nodos. */ .ir-mapa-red__halo{ opacity:.35; transform-box:fill-box; transform-origin:center; } .ir-mapa-red.es-visible .ir-mapa-red__halo{ animation:ir-latir 3s ease-out infinite; } @keyframes ir-latir{ 0%{ transform:scale(1); opacity:.35; } 70%{ transform:scale(3.2); opacity:0; } 100%{ transform:scale(3.2); opacity:0; } } /* ---------- etiquetas ---------- */ .ir-mapa-red__etiquetas{ position:absolute; inset:0; list-style:none; margin:0; padding:0; } .ir-mapa-red__etiqueta{ position:absolute; white-space:nowrap; opacity:0; /* Solo se anima la opacidad: si la animación tocara transform pisaría la posición de cada etiqueta, que es justamente lo que la separa de las otras. */ animation:ir-aparecer .5s ease forwards; } .ir-mapa-red.es-visible .ir-mapa-red__etiqueta{ animation-delay:.7s; } @keyframes ir-aparecer{ from{ opacity:0 } to{ opacity:1 } } .ir-mapa-red__etiqueta span{ display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .55rem; border-radius:5px; background:rgba(255,255,255,.96); border:1px solid var(--linea); box-shadow:0 1px 3px rgba(27,31,69,.12); font-size:.72rem; font-weight:600; color:var(--marino); line-height:1.2; } .ir-mapa-red__etiqueta.es-sede span{ background:var(--marino); color:#fff; border-color:var(--marino); } /* La etiqueta se centra en el extremo de su línea guía. */ .ir-mapa-red__etiqueta.es-arriba{ transform:translate(-50%,-100%); } .ir-mapa-red__etiqueta.es-izq{ transform:translate(-100%,-50%); } .ir-mapa-red__etiqueta.es-der{ transform:translate(0,-50%); } .ir-mapa-red__guia{ opacity:0; } .ir-mapa-red.es-visible .ir-mapa-red__guia{ animation:ir-aparecer .5s ease .9s forwards; } @media (max-width:620px){ /* El mapa se encoge para dejar sitio a las etiquetas, pero conserva su proporción exacta: el aire lo pone el contenedor, nunca la figura. */ .ir-mapa > :first-child{ padding-inline:2.6rem; } .ir-mapa-red__etiqueta span{ font-size:.56rem; padding:.1rem .3rem; } } @media (prefers-reduced-motion:reduce){ .ir-mapa-red__linea{ stroke-dashoffset:0; animation:none; } .ir-mapa-red__halo{ animation:none; } .ir-mapa-red__etiqueta, .ir-mapa-red__guia{ opacity:1; animation:none; } } /* ============================================================ Correcciones de móvil ============================================================ */ @media (max-width:1000px){ /* La flecha del submenú arrastraba el posicionamiento del escritorio —top:50% y margen negativo— y en flujo estático se subía encima del texto. En el menú desplegado va simplemente al lado. */ .ir-nav.abierto .menu-item-has-children > a{ display:inline-flex; align-items:center; } .ir-nav.abierto .menu-item-has-children > a::before{ /* `order` es imprescindible: en un contenedor flex el ::before pasa a ser el primer ítem y la flecha salta delante del texto, pegada a la primera letra. Con order:1 se va al final, que es donde debe ir. */ order:1; position:static; margin:0 0 0 .5rem; top:auto; right:auto; width:.38rem; height:.38rem; transform:rotate(45deg) translateY(-.1em); } .ir-nav.abierto .menu-item-has-children{ margin-right:0; } } @media (max-width:760px){ /* El pie de cuatro columnas apiladas medía 915px: en una página corta el sitio quedaba siendo casi todo pie, y daba la sensación de seguir desplazándose sin contenido. Dos columnas y menos aire lo dejan en un tercio de eso. */ #ir-footer{ padding:2.2rem 0 1.4rem; } .ir-footer__grid{ grid-template-columns:1fr 1fr; gap:1.4rem 1.2rem; margin-bottom:1.5rem; } .ir-footer__grid > div:first-child{ grid-column:1 / -1; } #ir-footer h4{ margin-bottom:.5rem; font-size:.68rem; } #ir-footer ul{ gap:.3rem; } #ir-footer a{ font-size:.82rem; } .ir-footer__marca{ margin-bottom:.6rem; } #ir-footer p{ font-size:.8rem; margin-bottom:.4rem; } .ir-anid{ margin-top:.6rem; } .ir-anid img{ height:28px; } /* Cinco fichas de integrante a una columna daban 2.500px de sección. */ .ir-grid--4{ grid-template-columns:1fr 1fr; gap:.8rem; } .ir-persona h3{ font-size:.86rem; } .ir-persona p{ font-size:.74rem; } .ir-persona .ir-pais{ font-size:.62rem; } /* Menos aire vertical: en móvil el mismo padding se siente el doble. */ .ir-sec{ padding-block:2.4rem; } .ir-sec__cab{ margin-bottom:1.4rem; gap:1rem; } .ir-bol{ gap:1.4rem; } .ir-bol__portada{ max-width:14rem; margin-inline:auto; } } /* Entradilla de las páginas de texto. */ .ir-prosa .ir-destacado{ font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.5; color:var(--marino); max-width:38ch; margin-bottom:2rem; padding-left:1.1rem; border-left:3px solid var(--amarillo); } /* ============================================================ Entradas al desplazar ============================================================ La clase la pone el JavaScript, no el marcado: así, si el script no corre, todo se ve tal cual y nada queda invisible. */ .ir-anim{ opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--i,0) * 70ms); } .ir-anim.es-dentro{ opacity:1; transform:none; } /* La portada no espera al desplazamiento: entra al cargar, escalonada. */ .ir-hero__in > *{ opacity:0; animation:ir-entrar .7s cubic-bezier(.22,.61,.36,1) forwards; } .ir-hero__in > :nth-child(1){ animation-delay:.05s; } .ir-hero__in > :nth-child(2){ animation-delay:.14s; } .ir-hero__in > :nth-child(3){ animation-delay:.23s; } .ir-hero__in > :nth-child(4){ animation-delay:.32s; } .ir-hero__in > :nth-child(5){ animation-delay:.41s; } @keyframes ir-entrar{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } /* El símbolo del héroe entra más lento y desde más lejos: es el fondo. */ .ir-hero__marca{ animation:ir-entrar-marca 1.4s cubic-bezier(.22,.61,.36,1) .2s backwards; } @keyframes ir-entrar-marca{ from{ opacity:0; transform:translateY(-50%) scale(.92); } } @media (prefers-reduced-motion:reduce){ .ir-anim{ opacity:1; transform:none; transition:none; } .ir-hero__in > *, .ir-hero__marca{ opacity:1; animation:none; transform:none; } .ir-hero__marca{ transform:translateY(-50%); } } /* ============================================================ Páginas armadas con el constructor de DIVI ============================================================ */ /* DIVI trae sus propias secciones con su relleno; aquí solo se evita que la primera choque contra el encabezado de la página y que la última se pegue al pie. El resto de los espaciados los decide quien edita, desde el módulo. */ .ir-divi{ background:var(--blanco); } /* La fila de DIVI se alinea con la columna del resto del sitio —el mismo ancho y el mismo margen que .ir-w—, para que una página armada con el constructor no quede corrida respecto de las que arma el tema. El margen va explícito: con solo el ancho, DIVI la deja pegada a la izquierda. */ .ir-divi .et_pb_section{ padding:0; } .ir-divi .et_pb_row{ width:100%; max-width:var(--ancho); margin-inline:auto; padding:clamp(3rem,6.5vw,5.5rem) 1.5rem; } .ir-divi .et_pb_row.et_pb_row--sin_aire{ padding-block:0; } /* El titular de la portada ocupa el ancho completo: su fotografía sangra hasta el borde y no puede quedar dentro de la columna de texto. La clase la lleva la sección desde el constructor, así que se ve y se puede quitar. */ .ir-divi .ir-seccion-ancha > .et_pb_row{ width:100%; max-width:none; padding:0; } /* Secciones con fondo: los mismos tonos que usa el resto del sitio. Quien edite puede cambiarlos desde el fondo de la sección en DIVI. */ .ir-divi .ir-seccion-papel{ background:var(--papel); } .ir-divi .ir-seccion-azul{ background:var(--azul-p); } /* Un botón suelto tras un componente necesita su propio aire; dentro de la cabecera de sección ya lo tiene. */ .ir-divi .interred_boton{ display:block; margin-top:1.2rem; }