/* AADI: tipografía institucional y fotografía de un mismo oficio en dos épocas. */
:root{--titulo:'Manrope','Segoe UI',sans-serif;--cuerpo:'Manrope','Segoe UI',sans-serif;--azul:#346ac1;--azul-oscuro:#183b7a;--azul-profundo:#193e70;--azul-enlace:#245aab;--azul-claro:#e8f0fb;--azul-suave:#eff5fc;--oro:#d5ac48;--oro-oscuro:#8a6a16;--oro-sobre-navy:#e8c979;--gris-texto:#414f62;--gris-medio:#59697c;--gris-linea:#dae3ed;--gris-fondo:#f3f7fc;--titulo-color:#193e70}
html{scroll-padding-top:112px}body{font-size:17px;font-weight:400;line-height:1.75}button,input{font:inherit}button{color:inherit}a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a{transition:color .2s,background-color .2s,border-color .2s}a:hover{text-decoration:none}h1,h2,h3,h4{font-weight:800;letter-spacing:-.04em}h2{font-size:clamp(32px,3vw,42px);line-height:1.18}h3{font-size:24px;line-height:1.3}p{text-wrap:pretty}.wrap{max-width:1380px;padding-inline:54px}section{padding:88px 0}.k{font-size:13px;letter-spacing:.075em;font-weight:700}.lead{font-size:18px;line-height:1.75}.sec-head{align-items:center;margin-bottom:34px;gap:20px}.more{font-size:15px;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:28px;font-size:15px;padding:13px 25px;font-weight:700;line-height:1.4;white-space:normal}.btn.sec{color:var(--azul-profundo);border-color:#9eb7d5;background:#ffffff70}.skip-link{position:fixed;top:12px;left:20px;z-index:100;padding:12px 20px;border-radius:12px;background:#fff;transform:translateY(-160%)}.skip-link:focus{transform:none}:focus-visible{outline:3px solid var(--oro-oscuro);outline-offset:5px}
.servicios-azul :focus-visible,.asociarme :focus-visible,.mem.destacado:focus-visible,.mem.destacado :focus-visible,footer :focus-visible{outline-color:var(--oro-sobre-navy)}
/* Navegación */
.top{background:#fffffff5;backdrop-filter:blur(12px);border-color:#e7edf5;z-index:50}.top .wrap{height:94px;gap:20px}.logo{flex-shrink:0}.logo img{width:192px;height:auto}.top .acciones{margin-left:10px;flex-shrink:0}.top .acciones .btn{font-size:14px;padding:12px 21px;min-height:46px}.top .acciones .btn:after{content:'↗';margin-left:14px;font-size:19px}.disparador{font-size:14px;font-weight:600;padding:22px 11px;border-bottom-width:2px}.disparador svg{width:9px}.panel{padding:26px;border:1px solid var(--gris-linea);border-radius:18px;box-shadow:0 18px 40px #17345a14}.panel.dos .panel-in{min-width:490px;gap:32px}.panel a{font-size:14px;white-space:normal;padding:8px 0;line-height:1.45}.panel a .n{font-size:12px;line-height:1.5;margin-top:4px}.panel-in h4{font-size:12px;letter-spacing:.06em}.panel .destacado{font-size:14px;border-radius:12px}.grupo:hover .panel{display:none}.grupo .panel[data-abierto=true]{display:block}.burger{border:0;border-radius:50%;background:#edf3fb;width:44px;height:44px;flex-shrink:0}.burger i{transition:transform .2s,opacity .2s}


/* Sistema compartido: identidad existente y ritmo Refero. */
:root {
  --surface: #fff;
  --surface-soft: #f2f6fb;
  --surface-media: #e7eef7;
  --border: #d7e1ed;
  --text: #414f62;
  --text-muted: #55677d;
  --brand: #193e70;
  --action: #2e62b4;
  --on-brand: #fff;
  --on-brand-muted: #d3e0f2;
  --radius-card: 20px;
  --radius-media: 12px;
  --radius-section: 32px;
  --card-padding: 24px;
  --grid-gap: 24px;
  --page-gutter: 54px;
  --section-space: 80px;
  --gris-medio: var(--text-muted);
  --gris-linea: var(--border);
  --gris-fondo: var(--surface-soft);
  --azul-suave: var(--surface-soft);
  --azul-claro: var(--surface-media);
  --azul-enlace: var(--action);
}
.wrap { padding-inline: var(--page-gutter); }
section { padding-block: var(--section-space); }
h2 { font-size: clamp(30px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -.035em; }
h2, h3 { text-wrap: balance; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.sec-head { align-items: baseline; gap: 16px 24px; margin-bottom: 32px; }
.sec-head a.more, .more { font-size: 14px; line-height: 1.5; font-weight: 700; }
.sec-head a.more { flex-shrink: 0; }
.k { font-size: 12px; line-height: 1.6; letter-spacing: .065em; color: var(--action); }
.lead { color: var(--text-muted); }
.btn.sec { background: var(--surface); }
:where(.cards3, .memoria, .pubs, .comunidad, .accesos, .ov, .video) > * { min-width: 0; }
.card p, .mem p, .pub p, .box p { font-size: 16px; line-height: 1.65; color: var(--text-muted); }
.card a.more, .mem a.more, .pub a.more, .box a.more,
.mem > a, .pub a { font-size: 14px; line-height: 1.5; font-weight: 700; }
:where(.card, .mem, .pub, .box) a:not(.pill):hover,
.sec-head a.more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Accesos: las ocho tarjetas comparten su estructura y altura. */
.servicios-azul { position: relative; background: var(--brand); padding-block: 56px; border-radius: var(--radius-section) var(--radius-section) 0 0; margin-top: -1px; }
/* The rounded top corners clip to nothing outside their own curve; without a square
   fill behind them, that curve reveals the page background (white) instead of the
   panel's own navy, showing as a pale gap against the hero photo above. */
.servicios-azul::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: var(--radius-section); background: var(--brand); }
.panel:not(.dos) .panel-in { min-width: 200px; }
.servicios-azul h2 { font-size: 30px; }
.servicios-azul .sec-head a.more { color: var(--on-brand-muted); }
.accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-auto-rows: 1fr; }
.acceso { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 8px; text-align: left; padding: var(--card-padding); border: 1px solid #ffffff26; border-radius: var(--radius-card); background: #ffffff08; }
.acceso .ico { grid-row: 1 / 3; width: 36px; height: 36px; margin: 0; border-radius: 10px; background: #ffffff0c; }
.acceso .ico svg { width: 22px; height: 22px; stroke: var(--oro-sobre-navy); stroke-width: 1.6; }
.acceso b { margin: 0; min-height: 2.8em; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: -.015em; }
.acceso > span:last-child { font-size: 14px; line-height: 1.55; color: var(--on-brand-muted); }
.acceso:hover { transform: none; background: #ffffff14; border-color: #ffffff66; }
.acceso:hover .ico { background: #ffffff14; }

/* Canal: un mismo tratamiento para video, miniaturas y sus pies. */
.media-placeholder { display: flex; align-items: center; justify-content: center; background: var(--surface-media); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }
.video { grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: stretch; }
.channel-heading { align-items: start; margin-bottom: 12px; }
.channel-heading h2 { margin-top: 6px; }
.channel-heading .more { padding-top: 4px; }
.channel-intro { max-width: 760px; margin: 0 0 32px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.interview-feature { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.player.media-placeholder, .player.interview-photo { aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.player.interview-photo { display: block; overflow: hidden; background: var(--surface-media); }
.player.interview-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.player.interview-photo > .play { position: absolute; inset: 0; margin: auto; background: #fffffff2; box-shadow: 0 2px 12px #102a4b26; }
.player .play { width: 60px; height: 60px; padding-left: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--action); box-shadow: none; font-size: 19px; cursor: pointer; }
.player .play:hover { background: var(--surface-soft); }
.interview-caption { display: grid; flex: 1; align-content: center; grid-template-columns: 1fr; gap: 8px; padding: var(--card-padding); }
.interview-caption h3 { font-size: 23px; text-wrap: pretty; }
.interview-caption span { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.interview-caption small { font-size: 13px; color: var(--text-muted); }
.lista { display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; }
.lista a { grid-template-columns: 156px minmax(0, 1fr); gap: 20px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.lista a:hover { background: var(--surface-soft); box-shadow: none; }
.lista .th { display: grid; place-items: center; width: 156px; aspect-ratio: 4 / 3; border-radius: var(--radius-media); overflow: hidden; background: var(--surface-media); color: var(--action); }
.lista .th img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lista .th svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.lista b { font-size: 18px; font-weight: 800; line-height: 1.4; margin-bottom: 6px; letter-spacing: -.015em; }
.lista span, .lista small { display: block; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.lista small { font-size: 13px; }

/* Oficina Virtual: contenido y recursos alineados por arriba. */
#oficina-virtual { background: var(--surface-soft); border-radius: var(--radius-section) var(--radius-section) 0 0; }
.ov { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ov h2 { max-width: 600px; }
.ov .lead { font-size: 18px; margin-bottom: 24px; }
.ov .funciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 28px; }
.ov .fn { grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.ov .fn:first-child { padding-top: 0; }
.ov .fn svg { width: 26px; height: 26px; margin-top: 2px; stroke: var(--action); stroke-width: 1.65; }
.ov .fn b { font-size: 18px; line-height: 1.4; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.ov .fn span { display: block; font-size: 15px; line-height: 1.65; }
.tutorial { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: none; }
.tutorial .cuerpo { padding: var(--card-padding); }
.tutorial .vid { display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-media); overflow: hidden; margin-bottom: 16px; }
.tutorial-preview { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--surface-media); border-bottom: 1px solid var(--border); }
.tutorial-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tutorial .vid .play { position: absolute; inset: 0; width: 60px; height: 60px; margin: auto; background: #fffffff2; color: var(--action); border: 1px solid var(--border); box-shadow: 0 2px 12px #102a4b26; font-size: 19px; padding-left: 4px; }
.tutorial .vid .pie { position: static; background: none; padding: 18px 20px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.tutorial .vid .pie b { color: var(--brand); font-size: 17px; font-weight: 800; line-height: 1.4; margin-bottom: 6px; }
.tutorial .doc { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px; padding: 20px 0; border-color: var(--border); }
.tutorial .doc:last-child { padding-bottom: 0; border-bottom: 0; }
.tutorial .doc svg { width: 24px; height: 30px; stroke: var(--action); stroke-width: 1.5; }
.tutorial .doc b { font-size: 16px; line-height: 1.45; font-weight: 700; letter-spacing: -.015em; }
.tutorial .doc span { display: block; font-size: 14px; line-height: 1.6; margin-top: 4px; }
.tutorial .doc em { font-size: 12px; border: 0; border-radius: 6px; background: var(--surface-media); color: var(--action); padding: 5px 8px; }

/* Editorial: filas compartidas, sin recortar títulos o descripciones. */
.cards3, .memoria, .pubs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.cards3 { grid-template-rows: auto auto auto 1fr auto; }
.card { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.news-media { position: relative; aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; overflow: hidden; min-height: 0; }
.news-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.news-media img[src$="marcelo-herrera-noticia.jpg"] { object-position: center top; }
.card .body { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 12px; padding: var(--card-padding); }
.card .k { font-size: 12px; line-height: 1.6; letter-spacing: .04em; }
.card h3 { font-size: 24px; line-height: 1.3; }
.card p { margin: 0; }
.card a.more { margin-top: 8px; align-self: end; }

/* La guía tiene su propio campo; no queda pegada a Novedades. */
#interpretes { padding-block: 64px; background: var(--surface-soft); border-block: 1px solid var(--border); }
.interp { text-align: center; }
.interp h2 { margin: 6px 0 12px; }
.interp .lead { max-width: none; font-size: 18px; margin: 0 auto; text-wrap: pretty; }
.interp .buscar { max-width: 760px; margin: 28px auto 0; border: 1px solid #9aafc9; border-radius: 30px; min-height: 58px; }
.buscar input { padding: 15px 24px; font-size: 16px; background: transparent; }
.buscar button { font-size: 15px; padding-inline: 28px; border-radius: 30px; background: var(--action); }
.buscar button:hover { background: var(--brand); }
.buscar:focus-within { outline: 3px solid var(--oro-oscuro); outline-offset: 4px; }
.search-feedback { font-size: 15px; color: var(--brand); margin-top: 24px; }
.search-feedback:empty { display: none; }
.directory-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 24px 0; text-align: left; }
.directory-results a { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-card); padding: var(--card-padding); height: 100%; color: var(--brand); }
.directory-results a:hover { border-color: var(--action); }
.directory-results strong { font-size: 16px; }
.directory-results span { font-size: 14px; margin-top: 6px; color: var(--text-muted); }
.directory-results a:after { content: 'Ver contacto en AADI ↗'; font-size: 13px; padding-top: 16px; margin-top: auto; }
.directory-note { font-size: 13px; color: var(--text-muted); }

#memoria { background: var(--surface); border-radius: 0; }
.memoria { grid-template-rows: auto auto 1fr auto; }
.mem { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 16px; padding: var(--card-padding); border: 1px solid var(--border); border-radius: var(--radius-card); min-height: 0; }
.mem.blanco { background: var(--surface-soft); border-color: var(--border); }
.mem.destacado { background: var(--brand); border-color: var(--brand); }
.mem-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.mem .k { font-size: 12px; line-height: 1.6; }
.mem.destacado .k { color: #efd184; }
.mem.destacado p { color: var(--on-brand-muted); }
.mem .anio { flex-shrink: 0; font-size: 38px; line-height: 1; letter-spacing: -.05em; color: var(--action); }
.mem h3 { font-size: 24px; line-height: 1.3; }
.mem p { margin: 0; }
.mem > a { align-self: end; padding-top: 8px; margin: 0; }

/* Colección Testimonios: cubiertas completas y desplazamiento manual. */
#testimonios { background: var(--surface-soft); border-block: 1px solid var(--border); }
.testimonials-heading { align-items: end; }
.testimonials-heading h2 { margin-top: 6px; }
.testimonials-intro { max-width: 760px; margin: -12px 0 28px; color: var(--text-muted); font-size: 17px; }
.testimonials-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; list-style: none; margin: 0; padding: 6px 0 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #9aafc9 var(--surface-media); }
.testimonials-track > li { min-width: 0; scroll-snap-align: start; }
.testimony-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); color: var(--brand); }
.testimony-card:hover { border-color: var(--action); }
.testimony-card:focus-visible { outline-offset: -4px; }
.testimony-cover { display: grid; place-items: center; height: 292px; padding: 24px; background: var(--surface-media); border-bottom: 1px solid var(--border); }
.testimony-cover img { display: block; width: 100%; height: 244px; object-fit: contain; }
.testimony-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px; }
.testimony-body h3 { font-size: 21px; line-height: 1.35; text-wrap: pretty; }
.testimony-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.testimony-author { padding-top: 2px; }
.testimony-body .more { margin-top: auto; padding-top: 8px; }
.testimony-card:hover .more { text-decoration: underline; text-underline-offset: 4px; }
.testimonials-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.testimonials-controls[hidden] { display: none; }
.testimonials-controls [role="status"] { min-width: 76px; margin-right: 8px; font-size: 14px; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.testimonials-controls button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--brand); cursor: pointer; }
.testimonials-controls button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.testimonials-controls button:hover { border-color: var(--action); background: var(--surface-media); }
.testimonials-controls button[aria-disabled="true"] { opacity: .4; cursor: default; }
@media (max-width: 1200px) { .testimonials-track { grid-auto-columns: calc((100% - 48px) / 3); } }
@media (max-width: 900px) { .testimonials-track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 600px) {
  .testimonials-heading { flex-wrap: wrap; align-items: start; }
  .testimonials-intro { margin-top: 0; font-size: 16px; }
  .testimonials-track { grid-auto-columns: 85%; gap: 16px; scroll-snap-type: x proximity; }
  .testimony-cover { height: 280px; padding: 20px; }
  .testimony-cover img { height: 240px; }
  .testimony-body { padding: 20px; }
}

#publicaciones { background: var(--surface); border-bottom: 1px solid var(--border); }
.pubs { grid-template-rows: auto auto 1fr auto; }
.pub { display: grid; grid-row: span 4; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: subgrid; column-gap: 20px; row-gap: 12px; padding: var(--card-padding); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); align-items: start; }
.pub > div:last-child { display: contents; }
.cover-placeholder, .actual-cover { grid-column: 1; grid-row: 1 / 3; width: 80px; height: 112px; border-radius: 3px; font-size: 12px; }
.actual-cover { display: block; object-fit: contain; object-position: top center; background: var(--surface); border-radius: 3px; }
.pub .k { grid-column: 2; align-self: end; }
.pub h3 { grid-column: 2; font-size: 23px; line-height: 1.3; margin: 0; }
.pub p { grid-column: 1 / -1; margin: 8px 0 0; }
.pub a { grid-column: 1 / -1; align-self: end; padding-top: 8px; }

#comunidad { padding-block: var(--section-space); }
.comunidad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); grid-template-rows: auto repeat(4, 1fr) auto; }
.comunidad .box { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: 0; padding: var(--card-padding); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.comunidad h3 { font-size: 24px; line-height: 1.3; margin: 0; padding-bottom: 24px; }
.box ul { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.box li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 12px; padding: 20px 0; font-size: 15px; border-top: 1px solid var(--border); }
.box li:first-child { border-top: 1px solid var(--border); }
.box li b { font-weight: 600; line-height: 1.5; }
.box li small { display: block; font-size: 13px; line-height: 1.6; margin-top: 6px; }
.pill { font-size: 12px; line-height: 1.4; border-radius: 6px; padding: 5px 8px; }
.pill.a { color: var(--action); background: var(--surface-media); }
.pill.b { color: #286144; background: #e5f1e9; }
.pill.g { color: var(--text-muted); background: var(--surface-soft); }
.comunidad .box li a.pill { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.box .more { align-self: end; margin: 0; padding-top: 16px; border-top: 1px solid var(--border); }

.asociarme { background: var(--brand); padding-block: 56px; border-radius: var(--radius-section) var(--radius-section) 0 0; }
.asociarme .wrap { grid-template-columns: 1.6fr 1fr; gap: 48px; }
.asociarme h2 { font-size: 36px; margin-bottom: 16px; }
.asociarme p { font-size: 17px; line-height: 1.75; color: var(--on-brand-muted); }
.asociarme .btn { border-radius: 28px; font-size: 15px; padding: 15px 26px; }
footer { background: #153359; color: var(--on-brand-muted); font-size: 14px; }
footer .cols { grid-template-columns: 1.65fr repeat(4, minmax(0, 1fr)); gap: 32px; padding: 64px var(--page-gutter) 56px; }
footer h3 { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 16px; }
footer a { color: var(--on-brand-muted); font-size: 13px; padding: 5px 0; line-height: 1.65; }
footer p { font-size: 14px; line-height: 1.85; }
footer .logo-f { width: 190px; height: auto; filter: grayscale(1) brightness(0) invert(1); background: none; padding: 0; border-radius: 0; margin-bottom: 24px; }
footer .gestora { border-color: #ffffff26; font-size: 13px; line-height: 1.8; margin-top: 24px; padding-top: 20px; }
footer .gestora a { font-size: 13px; }
footer .zoc { background: #102a4b; font-size: 12px; padding-block: 20px; }
footer .zoc a { font-size: 12px; }
/* Hover: el menú pasa al azul de acción; el footer, al dorado, sin subrayado. */
.top .grupo:hover .disparador, .top .disparador[aria-expanded="true"], .top .disparador.simple:hover { color: var(--action); border-bottom-color: var(--action); }
.top .grupo:hover .disparador svg, .top .disparador[aria-expanded="true"] svg { stroke: var(--action); }
.top .panel a:hover { color: var(--action); }
footer a:hover, footer .gestora a:hover, footer .zoc a:hover { color: var(--oro-sobre-navy); text-decoration: none; }
dialog { width: min(560px, calc(100% - 36px)); padding: 40px; border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--text); box-shadow: 0 24px 80px #0d243630; }
dialog::backdrop { background: #142b4260; backdrop-filter: blur(4px); }
dialog h2 { font-size: 30px; margin: 14px 0 20px; }
dialog p { font-size: 16px; line-height: 1.8; }
.dialog-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 30px; width: 44px; height: 44px; cursor: pointer; }
.dialog-back { display: block; font-size: 14px; padding: 20px 0 0; border: 0; background: none; color: var(--action); cursor: pointer; }

/* Cortes compartidos para mantener legibilidad y alineación. */
@media (min-width: 1600px) { .wrap { max-width: 1440px; } }
@media (max-width: 1200px) {
  :root { --page-gutter: 36px; --card-padding: 24px; --section-space: 72px; }
  .top .wrap { gap: 10px; }
  .logo img { width: 170px; }
  .disparador { padding-inline: 8px; font-size: 13px; }
  .top .acciones .btn { padding-inline: 16px; font-size: 13px; }
  .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov { gap: 32px; }
  .lista a { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
  .lista .th { width: 112px; }
  .card h3, .mem h3 { font-size: 22px; }
  .pub { grid-template-columns: 64px minmax(0, 1fr); gap: 12px 16px; }
  .cover-placeholder, .actual-cover { width: 64px; height: 96px; font-size: 10px; }
  .pub h3 { font-size: 21px; }
}
@media (max-width: 1120px) {
  .top .wrap { height: 82px; }
  .top .acciones { margin-left: auto; }
  .burger { display: block; margin-left: 5px; }
  .top nav.menu { position: fixed; left: 0; right: 0; top: 82px; bottom: 0; background: #fff; border-bottom: 1px solid var(--border); overflow-y: auto; padding: 12px var(--page-gutter) 26px; box-shadow: 0 20px 30px #122f4810; }
  .top nav.menu.is-open { display: block; }
  html.menu-open { overflow: hidden; }
  /* .top's backdrop-filter makes it the containing block for its fixed-position
     descendants, so nav.menu's own position:fixed resolves against .top's box,
     not the viewport. Give .top the full viewport while the sheet is open so
     nav.menu's top/bottom actually reach from the header to the screen edge. */
  html.menu-open .top { position: fixed; inset: 0; }
  .grupo { display: block; }
  .disparador { width: 100%; padding: 16px 0; font-size: 16px; justify-content: space-between; border-bottom: 1px solid var(--border); }
  .disparador.simple { display: block; }
  .panel { position: static; border: 0; box-shadow: none; background: var(--surface-soft); padding: 22px; margin-bottom: 8px; }
  .panel.dos .panel-in { min-width: 0; gap: 30px; }
  .panel a { font-size: 14px; }
  .burger[aria-expanded=true] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded=true] i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded=true] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .comunidad { grid-template-columns: 1fr; grid-template-rows: none; }
  .comunidad .box { grid-row: auto; display: flex; flex-direction: column; }
  .box ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .box .more { align-self: stretch; }
  footer .cols { grid-template-columns: 1.5fr 1fr 1fr; }
  footer .cols > div:first-child { grid-row: span 2; }
}
@media (min-width: 901px) and (max-width: 1050px) {
  .pub { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 20px; }
  .cover-placeholder, .actual-cover { width: 52px; height: 80px; }
}
@media (max-width: 900px) {
  .video, .ov { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; }
  .lista a { grid-template-columns: 1fr; gap: 16px; align-content: start; }
  .lista .th { width: 100%; aspect-ratio: 4 / 3; }
  .cards3, .memoria, .pubs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .card, .mem, .pub { grid-row: auto; }
  .card { grid-template-rows: auto 1fr; }
  .card .body { grid-row: auto; grid-template-rows: auto auto 1fr auto; }
  .card h3, .mem h3 { font-size: 24px; }
  .mem { grid-template-rows: auto auto 1fr auto; }
  .pub { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 8px 24px; }
  .cover-placeholder, .actual-cover { width: 88px; height: 128px; grid-row: 1 / 5; font-size: 11px; }
  .pub h3 { font-size: 24px; }
  .pub p, .pub a { grid-column: 2; }
  .pub p { margin: 0; }
  .directory-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asociarme .wrap { grid-template-columns: 1fr; gap: 24px; }
  .asociarme .acciones { justify-content: flex-start; }
}
@media (max-width: 600px) {
  :root { --page-gutter: 24px; --section-space: 56px; --card-padding: 24px; --radius-section: 24px; }
  h2 { font-size: 30px; }
  .sec-head { margin-bottom: 24px; gap: 12px; }
  .sec-head a.more { flex-shrink: 1; }
  .top .wrap { gap: 10px; }
  .logo img { width: 155px; }
  .top .acciones .btn { font-size: 12px; padding: 11px 15px; min-height: 44px; }
  .top .acciones .btn:after { display: none; }
  .servicios-azul { padding-block: 40px; }
  .servicios-azul h2 { font-size: 28px; }
  .accesos { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .acceso { padding: 20px; }
  .acceso b { min-height: 0; }
  .interview-caption { grid-template-columns: 1fr; gap: 4px; }
  .interview-caption h3 { grid-row: auto; margin-bottom: 6px; }
  .lista { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 1fr; gap: 12px; }
  .lista a { grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
  .lista .th { width: 104px; aspect-ratio: 4 / 3; }
  .lista b { font-size: 17px; }
  .lista span { font-size: 13px; }
  .channel-heading { flex-wrap: wrap; }
  .channel-intro { font-size: 17px; }
  .tutorial .doc { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; }
  .tutorial .doc span { font-size: 13px; }
  .tutorial .vid .pie { padding: 16px; }
  .box ul { display: block; }
  .box li { font-size: 15px; }
  .comunidad h3 { font-size: 24px; }
  #interpretes { padding-block: 48px; }
  .interp .lead { font-size: 17px; }
  .buscar input { padding-inline: 18px; font-size: 15px; }
  .buscar button { padding-inline: 20px; font-size: 14px; }
  .asociarme { padding-block: 48px; }
  .asociarme h2 { font-size: 32px; }
  footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-block: 48px; }
  footer .cols > div:first-child { grid-column: 1 / -1; grid-row: auto; max-width: 500px; }
  .panel.dos .panel-in { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 420px) {
  :root { --page-gutter: 20px; --card-padding: 20px; }
  .top .wrap { height: 76px; gap: 7px; }
  .logo img { width: 130px; }
  .top .acciones .btn { font-size: 12px; padding: 10px 12px; }
  .burger { width: 40px; height: 40px; margin-left: 0; }
  .top nav.menu { top: 76px; }
  .tutorial .doc { gap: 8px; grid-template-columns: 22px minmax(0, 1fr) auto; }
  .tutorial .doc b { font-size: 15px; }
  .tutorial .doc em { padding-inline: 6px; }
  .pub { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
  .cover-placeholder, .actual-cover { width: 64px; height: 96px; grid-row: 1 / 3; font-size: 10px; }
  .pub h3 { font-size: 22px; }
  .pub p, .pub a { grid-column: 1 / -1; }
  .pub p { margin-top: 8px; }
  .directory-results { grid-template-columns: 1fr; }
  .buscar input { font-size: 14px; padding-inline: 14px; }
  .buscar button { padding-inline: 18px; }
  dialog { padding: 28px; }
  dialog h2 { font-size: 27px; }
}
@media (max-width: 360px) {
  .lista a { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .lista .th { width: 88px; }
  .top .wrap { padding-inline: 16px; gap: 5px; }
  .logo img { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
}


/* Un mismo oficio, distintas épocas. El texto y la imagen comparten el lienzo. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#f8f7f3;padding:72px 0 52px}
.hero-art{position:absolute;inset:0 0 0 auto;z-index:-2;display:block;width:min(100%,2040px);height:100%;pointer-events:none}
.hero-frame{position:absolute;inset:0;display:block;opacity:0;overflow:hidden}
.hero-frame.is-current{opacity:1}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center;transform-origin:75% 50%}
.hero-motion{position:absolute;right:max(28px,calc((100vw - 1440px)/2));bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 13px;border:1px solid #ffffff80;border-radius:24px;background:#f8f7f3e8;color:#193e70;font:600 12px var(--cuerpo);cursor:pointer;box-shadow:0 2px 12px #1423310a}
.hero-motion[hidden]{display:none}
.hero-motion:hover{background:#fff}
.hero-motion:focus-visible{outline:3px solid var(--oro-oscuro);outline-offset:4px}
.hero-motion svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-motion .play-symbol,.hero-motion.is-paused .pause-symbol{display:none}
.hero-motion.is-paused .play-symbol{display:block;fill:currentColor;stroke:none}
.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#f8f7f3 0%,#f8f7f3b8 26%,#f8f7f338 43%,transparent 57%)}
.hero .wrap{display:block;position:relative}
.hero-copy{width:49%;max-width:610px}
.hero .slogan{display:flex;align-items:center;gap:12px;font-family:var(--cuerpo);font-size:26px;font-weight:700;font-variant-caps:all-small-caps;letter-spacing:.065em;text-transform:none;color:var(--oro-oscuro);margin-bottom:22px}
.hero h1{font-size:clamp(46px,4.05vw,62px);font-weight:800;line-height:1.1;letter-spacing:-.05em;text-wrap:balance;margin-bottom:23px;color:#193e70}
.hero p{font-size:18px;line-height:1.75;max-width:490px;color:#4d6077;margin-bottom:28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{font-size:14px;padding:13px 23px;min-height:50px}
.hero .btn.sec{background:#f8f7f380;border-color:#a4b5ca}
.hero .datos{display:flex;width:48%;max-width:560px;gap:38px;margin-top:42px;padding-top:26px;border-top:1px solid #c9ced380}
.hero .datos div{font-size:12px;line-height:1.5;color:#5a687a}
.hero .datos b{font-size:29px;font-weight:800;line-height:1.15;letter-spacing:-.04em;color:#193e70;margin-bottom:7px}
@media(min-width:1600px){.hero{padding-block:84px 62px}.hero-copy{max-width:635px}.hero h1{font-size:64px}.hero-art{width:min(100%,2140px)}.hero:after{background:linear-gradient(90deg,#f8f7f3 0%,#f8f7f3c9 32%,#f8f7f333 48%,transparent 61%)}}
@media(min-width:901px) and (max-width:1200px){.hero{padding-block:60px 46px}.hero-copy{width:51%}.hero h1{font-size:46px}.hero p{font-size:17px;max-width:420px}.hero .btn{font-size:13px;padding-inline:17px}.hero .datos{width:51%;gap:28px}.hero-art{width:100%}.hero-art img{object-position:60% center}.hero:after{background:linear-gradient(90deg,#f8f7f3 0%,#f8f7f3de 30%,#f8f7f385 45%,transparent 65%)}}
@media(max-width:900px){.hero{padding:50px 0 44px;background:#f8f7f3}.hero-art,.hero:after{display:none}.hero-copy{width:100%;max-width:740px}.hero h1{font-size:clamp(38px,6.5vw,54px);max-width:740px}.hero p{max-width:650px;font-size:18px}.hero .datos{width:100%;max-width:570px;margin-top:34px;padding-top:25px;gap:38px}.hero .datos b{font-size:29px}}
@media(max-width:560px){.hero{padding:36px 0}.hero .slogan{font-size:23px;margin-bottom:20px}.hero h1{font-size:38px;line-height:1.12;margin-bottom:22px}.hero p{font-size:16px;line-height:1.75;margin-bottom:25px}.hero .cta{gap:9px}.hero .btn{font-size:13px;padding-inline:17px;min-height:48px}.hero .datos{justify-content:space-between;gap:16px;margin-top:31px;padding-top:23px}.hero .datos div{font-size:12px}.hero .datos b{font-size:27px}}
@media(max-width:360px){.hero h1{font-size:35px}.hero .btn{padding-inline:13px;font-size:12px}.hero .datos{gap:12px}.hero .datos b{font-size:25px}.hero .datos div{font-size:12px}}