/*
 * Ägora — la comunidad Caliche
 * Estilos del tema. La parte central (escenas de la portada) se genera desde el prototipo.
 */

@font-face{font-family:Jost;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:#FFFFFF}

.ag-site{
  --accent:#E30613;
  --S:min(100vh,920px);
  --cs:clamp(240px,36vw,480px);
  color:#1D1D1B;
  font-family:'Century Gothic',CenturyGothic,'URW Gothic',Jost,AppleGothic,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.ag-site img{max-width:100%;height:auto}
.ag-site svg{max-width:none}
.ag-home a{text-decoration:none}
/* theme.json colorea los titulares de negro: en el tema heredan el color de su sección */
.ag-site h1,.ag-site h2,.ag-site h3{color:inherit}

/* Anclas: que la barra fija no tape el título al saltar */
.ag-site [id]{scroll-margin-top:72px}

/* Enlace de salto para teclado */
.ag-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#1D1D1B;color:#FFFFFF;padding:10px 16px;border-radius:8px;font-weight:700}
.ag-skip:focus{left:8px}

/* Foco visible */
.ag-site a:focus-visible,.ag-site button:focus-visible,.ag-site summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Barra de administración de WordPress */
.admin-bar .ag-nav{top:32px !important}
@media (max-width:782px){.admin-bar .ag-nav{top:46px !important}}

/* Menús de WordPress dentro de la navegación y el pie */
.ag-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:32px}
.ag-menu a{color:#1D1D1B;text-decoration:none}
.ag-foot-menu .ag-menu{gap:22px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ag-foot-menu .ag-menu a{color:#FFFFFF}
.ag-foot-menu .ag-menu a:hover{color:#FFFFFF !important;text-decoration:underline}

/* ===== Portada (generado desde el prototipo) ===== */
.ag-nav-links{display:flex}
@media (max-width:980px){.ag-nav-links{display:none !important}}
.ag-navl{text-decoration:none;transition:color .2s ease}
.ag-navl:hover{color:var(--accent) !important}
.ag-btn{transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s ease,color .25s ease}
.ag-btn:hover{transform:translateY(-2px)}
.ag-btn-o:hover{background:#FFFFFF !important;color:var(--accent) !important}
.ag-tile{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ag-tile:hover{transform:translateY(-6px)}
.ag-faq summary{list-style:none;cursor:pointer}
.ag-faq summary::-webkit-details-marker{display:none}
.ag-faq-ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ag-faq details[open] .ag-faq-ic{transform:rotate(45deg)}
.ag-faq summary:hover .ag-faq-q{color:var(--accent)}
@media (max-width:760px){
  .ag-sc-plaza,.ag-sc-how,.ag-sc-llegar{height:auto !important}
  .ag-sc-plaza > div,.ag-sc-how > div,.ag-sc-llegar > div{position:static !important;height:auto !important;padding:48px 0}
  .ag-sc-plaza .ag-p-caps,.ag-sc-how .ag-w-caps{display:flex !important}
  .ag-sc-plaza .ag-p-cap,.ag-sc-how .ag-w-cap,.ag-sc-llegar .ag-l-ms{opacity:1 !important;animation:none !important;transform:none !important}
  .ag-sc-how .ag-w-seg{display:none !important}
}
@media (max-width:600px){
  nav img{height:22px !important}
  .ag-nav-word{display:none !important}
  nav .ag-btn{padding:0 12px !important;font-size:11px !important;min-height:36px !important;white-space:nowrap}
}
@media (max-width:680px){
  .ag-l-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;row-gap:28px !important}
  .ag-l-track{display:none !important}
  .ag-c-grid{grid-template-columns:minmax(0,1fr) !important}
}

@keyframes agDotIn{
  0%{transform:translate(calc(var(--dx) * 1vw),calc(var(--dy) * 1vw)) scale(1);opacity:.95}
  72%{transform:translate(calc(var(--fx) * 1vw),calc(var(--fy) * 1vw)) scale(1);opacity:.95}
  100%{transform:translate(calc(var(--fx) * 1vw),calc(var(--fy) * 1vw)) scale(0);opacity:0}
}
@keyframes agLtIn{from{opacity:0;filter:blur(16px);transform:translateY(.2em) scale(1.06)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes agFadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes agFadeOut{from{opacity:1}to{opacity:0}}
@keyframes agHeroOut{from{transform:none;opacity:1}to{transform:scale(.92);opacity:.2}}
@keyframes agCvTurn{from{transform:rotate(0deg) scale(1)}to{transform:rotate(16deg) scale(1.08)}}
@keyframes agCvDrift{from{transform:rotate(-10deg) scale(1.06)}to{transform:rotate(6deg) scale(1)}}
@keyframes agSpin{from{transform:rotate(0deg)}to{transform:rotate(-240deg)}}
@keyframes agUnspin{from{transform:rotate(0deg)}to{transform:rotate(240deg)}}
@keyframes agHl{
  0%,100%{background:#FFFFFF;color:#1D1D1B;border-color:#DCDCDC}
  38%,62%{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
}
@keyframes agSegOn{0%,100%{background:#E3E3E3}30%,70%{background:var(--accent)}}
@keyframes agCapIO{
  0%{opacity:0;transform:translateY(28px)}
  30%,70%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-28px)}
}
@keyframes agDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes agPop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes agGrow{from{transform:translate(-50%,-50%) scale(.35);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes agLineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes agNumIn{from{transform:translateY(18%);opacity:0}to{transform:none;opacity:1}}
@keyframes agBigIn{from{transform:scale(.82);opacity:0}to{transform:none;opacity:1}}
@keyframes agIsoIn{from{transform:scale(.6) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  .ag-sc-hero{view-timeline-name:--ag-hero}
  .ag-sc-plaza{view-timeline-name:--ag-plaza}
  .ag-sc-llegar{view-timeline-name:--ag-llegar}
  .ag-sc-how{view-timeline-name:--ag-how}

  .ag-h-dot{animation:agDotIn linear both;animation-timeline:--ag-hero;animation-range:contain 0% contain 55%}
  .ag-h-lt{animation:agLtIn linear both;animation-timeline:--ag-hero;animation-range:contain calc(30% + var(--i) * 5%) contain calc(54% + var(--i) * 5%)}
  .ag-h-tag{animation:agFadeUp linear both;animation-timeline:--ag-hero;animation-range:contain 64% contain 82%}
  .ag-h-hint{animation:agFadeOut linear both;animation-timeline:--ag-hero;animation-range:contain 0% contain 10%}
  .ag-h-word{animation:agHeroOut linear both;animation-timeline:--ag-hero;animation-range:contain 90% exit 40%}
  .ag-cv-hero{animation:agCvTurn linear both;animation-timeline:--ag-hero;animation-range:contain 0% exit 100%}
  .ag-cv-drift{animation:agCvDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}

  .ag-p-ring{animation:agSpin linear both;animation-timeline:--ag-plaza;animation-range:contain 0% contain 100%}
  .ag-p-node-in{animation:agUnspin linear both;animation-timeline:--ag-plaza;animation-range:contain 0% contain 100%}
  .ag-p-node-dot{animation:agHl linear both;animation-timeline:--ag-plaza;animation-range:contain calc(var(--k) * 50% - 25%) contain calc(var(--k) * 50% + 25%)}
  .ag-p-caps{display:grid !important}
  .ag-p-cap{grid-area:1/1;opacity:0;animation:agCapIO linear both;animation-timeline:--ag-plaza;animation-range:contain calc(var(--k) * 50% - 25%) contain calc(var(--k) * 50% + 25%)}

  .ag-l-path{stroke-dasharray:1;animation:agDraw linear both;animation-timeline:--ag-llegar;animation-range:contain 4% contain 88%}
  .ag-l-dot{animation:agPop cubic-bezier(.3,1.6,.5,1) both;animation-timeline:--ag-llegar;animation-range:contain calc(12% + var(--k) * 21%) contain calc(18% + var(--k) * 21%)}
  .ag-l-ms{animation:agFadeUp linear both;animation-timeline:--ag-llegar;animation-range:contain calc(12% + var(--k) * 21%) contain calc(24% + var(--k) * 21%)}

  .ag-w-caps{display:grid !important}
  .ag-w-cap{grid-area:1/1;opacity:0;animation:agCapIO linear both;animation-timeline:--ag-how;animation-range:contain calc(var(--k) * 33.33% - 16.67%) contain calc(var(--k) * 33.33% + 16.67%)}
  .ag-w-seg{animation:agSegOn linear both;animation-timeline:--ag-how;animation-range:contain calc(var(--k) * 33.33% - 16.67%) contain calc(var(--k) * 33.33% + 16.67%)}

  .ag-rv{animation:agFadeUp linear both;animation-timeline:view();animation-range:entry 10% cover 32%}
  .ag-rvk{animation:agFadeUp linear both;animation-timeline:view();animation-range:entry calc(5% + var(--k) * 10%) cover calc(28% + var(--k) * 6%)}
  .ag-ln{transform-origin:left center;animation:agLineIn cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .ag-num{animation:agNumIn cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .ag-g-ring{animation:agGrow cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry calc(var(--k) * 10%) cover calc(42% + var(--k) * 6%)}
  .ag-e-word{animation:agBigIn cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 15% cover 48%}
  .ag-e-iso{animation:agIsoIn cubic-bezier(.3,1.4,.5,1) both;animation-timeline:view();animation-range:entry 10% cover 40%}
  .ag-sw-stripe{stroke-dasharray:1;animation:agDraw linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
}
}

/* =========================================================================
 * Páginas interiores
 * ====================================================================== */

.ag-page-hero{position:relative;overflow:clip;background:var(--accent);color:#FFFFFF;padding:clamp(96px,11vw,150px) 24px clamp(72px,8vw,110px)}
.ag-page-curves{position:absolute;inset:0;width:100%;height:100%}
.ag-page-hero-in{position:relative;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.ag-page-kicker{margin:0;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ag-page-title{margin:0;font-size:clamp(38px,5.4vw,76px);font-weight:700;line-height:1.04;letter-spacing:-.01em;max-width:900px;color:#FFFFFF}
.ag-page-sub{margin:0;font-size:clamp(17px,1.5vw,20px);max-width:640px;color:#FFFFFF}

.ag-content{max-width:760px;margin:0 auto;padding:clamp(64px,8vw,110px) 24px clamp(80px,9vw,130px);font-size:17px;line-height:1.7;color:#3A3A38}
.ag-content > *{margin-top:0;margin-bottom:1.2em}
.ag-content h2,.ag-content h3,.ag-content h4{color:#1D1D1B;font-weight:700;line-height:1.12;margin-top:1.8em;margin-bottom:.6em}
.ag-content h2{font-size:clamp(28px,3.2vw,40px)}
.ag-content h3{font-size:22px}
.ag-content h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ag-content > h2:first-child,.ag-content > h3:first-child{margin-top:0}
.ag-content a{color:var(--accent);text-underline-offset:3px}
.ag-content strong{color:#1D1D1B}
.ag-content ul,.ag-content ol{padding-left:1.2em}
.ag-content li{margin-bottom:.4em}
.ag-content li::marker{color:var(--accent);font-weight:700}
.ag-content img,.ag-content .wp-block-image img{border-radius:16px}
.ag-content hr,.ag-content .wp-block-separator{border:0;border-top:1px solid #E3E3E3;margin:2.4em 0}
.ag-content table{width:100%;border-collapse:collapse;font-size:15px}
.ag-content th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#1D1D1B;border-bottom:2px solid var(--accent);padding:10px 12px}
.ag-content td{border-bottom:1px solid #E3E3E3;padding:12px}
.ag-content .alignwide{max-width:1200px;margin-left:calc(50% - min(600px, 50vw - 24px));margin-right:calc(50% - min(600px, 50vw - 24px))}
.ag-content .alignfull{max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ag-content .wp-block-details{border-bottom:1px solid #E3E3E3;padding:18px 0}
.ag-content .wp-block-details summary{font-weight:700;color:#1D1D1B;cursor:pointer}
.ag-content .wp-block-details summary::marker{color:var(--accent)}
.ag-featured{display:block;width:100%;height:auto;border-radius:16px;margin-bottom:2em}
.ag-center{text-align:center}

.ag-button,.ag-content .wp-element-button,.ag-content .wp-block-button__link{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:8px;background:var(--accent);color:#FFFFFF !important;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s ease}
.ag-button:hover,.ag-content .wp-element-button:hover,.ag-content .wp-block-button__link:hover{background:#C70A13;transform:translateY(-2px)}
.ag-content .is-style-outline .wp-block-button__link{background:transparent;color:var(--accent) !important;border:1.5px solid var(--accent)}

/* Listados (novedades, archivos, búsqueda) */
.ag-list{max-width:1200px;margin:0 auto;padding:clamp(64px,8vw,110px) 24px clamp(80px,9vw,130px)}
.ag-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.ag-card{display:flex;flex-direction:column;gap:10px;padding:30px;border:1px solid #E3E3E3;border-radius:16px;color:#1D1D1B;text-decoration:none;background:#FFFFFF}
.ag-card-meta{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ag-card-title{font-size:22px;font-weight:700;line-height:1.2}
.ag-card-text{color:#5F5F5F}
.ag-empty{color:#5F5F5F;font-size:18px}
.ag-list .navigation{margin-top:40px}
.ag-list .nav-links{display:flex;gap:10px;flex-wrap:wrap}
.ag-list .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:8px;border:1px solid #E3E3E3;color:#1D1D1B;text-decoration:none;font-weight:700}
.ag-list .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#FFFFFF}

/* =========================================================================
 * Navegadores sin animaciones ligadas al scroll (Firefox, Safari antiguo):
 * aparición suave al entrar en pantalla con agora.js.
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference){
@supports not (animation-timeline: view()){
  .ag-js .ag-rv,.ag-js .ag-rvk{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k, 0) * 90ms)}
  .ag-js .ag-ln{transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
  .ag-js .ag-g-ring,.ag-js .ag-e-word,.ag-js .ag-e-iso,.ag-js .ag-num{opacity:0;transition:opacity 1s ease;transition-delay:calc(var(--k, 0) * 120ms)}
  .ag-js .is-in{opacity:1 !important}
  .ag-js .ag-rv.is-in,.ag-js .ag-rvk.is-in{transform:none}
  .ag-js .ag-ln.is-in{transform:scaleX(1)}
  /* En la portada, las letras de ÄGORA se ven sin esperar */
  .ag-js .ag-h-dot{display:none}
}
}

/* Menú en móvil: segunda fila deslizable bajo la barra */
@media (max-width:980px){
  .ag-nav .ag-nav-links{display:flex !important;position:absolute;top:64px;left:0;right:0;gap:24px;padding:12px 24px;overflow-x:auto;white-space:nowrap;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid #E6E6E6;scrollbar-width:none}
  .ag-nav .ag-nav-links::-webkit-scrollbar{display:none}
  .ag-nav .ag-menu{flex-wrap:nowrap;gap:24px}
}