/*
Theme Name: Alejandro Ruiz (hijo de GeneratePress)
Theme URI: https://alejandroruizgarcia.com
Description: Tema hijo de GeneratePress para la web personal de Alejandro Ruiz García. Web nocturna: tokens, Space Grotesk autoalojada, cosmos en canvas, tarjetas de cristal y secciones numeradas. Los bloques de la página son de GenerateBlocks y solo llevan clases ar-*; todo el estilo vive aquí.
Author: Alejandro Ruiz García
Template: generatepress
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: alejandro-ruiz
*/

/* ---------- 1. Fuente (autoalojada, subconjunto latino, licencia SIL OFL 1.1) ---------- */
@font-face{font-family:"Space Grotesk";src:url(assets/fonts/space-grotesk-latin-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial");size-adjust:104%;ascent-override:96%;descent-override:26%;line-gap-override:0%}

/* ---------- 2. Tokens ---------- */
:root{
  color-scheme:dark;
  --ar-navy:#0a0e27;--ar-deep:#050816;--ar-navy2:#121838;
  --ar-primary:#f7430b;--ar-primary2:#ff6a32;
  --ar-text:#e8eef5;--ar-mid:#aab4c8;--ar-dim:#6b78a0;
  --ar-glass:rgba(18,24,55,.5);--ar-glass2:rgba(18,24,55,.7);
  --ar-radio:16px;--ar-radio-m:14px;--ar-radio-s:12px;--ar-pildora:40px;
  --ar-maxw:1180px;--ar-pad:clamp(18px,4vw,56px);
  --ar-sec-y:clamp(54px,9vh,108px);
  --ar-font:"Space Grotesk","Space Grotesk Fallback",system-ui,sans-serif;
  --ar-soft:cubic-bezier(.22,.61,.36,1);
  /* Colores globales de GeneratePress apuntando a los tokens */
  --base:var(--ar-deep);--base-2:var(--ar-navy);--base-3:var(--ar-navy2);
  --contrast:var(--ar-text);--contrast-2:var(--ar-mid);--contrast-3:var(--ar-dim);
  --accent:var(--ar-primary);
}

/* ---------- 3. Base ---------- */
html{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  position:relative;max-width:100%;overflow-x:clip;background:var(--ar-deep);color:var(--ar-text);
  font-family:var(--ar-font);font-size:clamp(1rem,.95rem + .3vw,1.125rem);font-weight:500;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body :where(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
body :where(h1,h2,h3,p,span,a,li){overflow-wrap:break-word}
body a{color:inherit;text-decoration:none}
/* GeneratePress anima a, button e input a 100 ms: se lleva a la escala de esta web (0,3 s) */
a,button,input{transition:color .3s,background-color .3s}
:focus-visible{outline:2px solid var(--ar-primary2);outline-offset:3px}
::selection{background:var(--ar-primary);color:var(--ar-deep)}
img{max-width:100%;height:auto}
.ar-cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body .site{position:relative;z-index:1}

/* GeneratePress: página única, sin cajas ni barras laterales */
body .site.grid-container,body #page{max-width:none;margin:0;padding:0;background:transparent}
body .site .site-content{display:block;padding:0}
body .inside-article,body .site-main,body .entry-content{margin:0;padding:0;background:transparent}
body .content-area{width:100%}
body .page-header,body .entry-header{display:none}
body .entry-content:not(:first-child){margin-top:0}

/* ---------- 4. Barra superior ---------- */
body .site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;border:0;transition:background .4s,backdrop-filter .4s}
body .site-header.is-scrolled{background:rgba(5,8,22,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.admin-bar .site-header{top:32px}
body .site-header .inside-header{max-width:none;margin:0;padding:14px var(--ar-pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
body .site-branding{margin:0}
body .main-title,body .main-title a{font-family:var(--ar-font);font-size:1rem;font-weight:700;letter-spacing:.04em;line-height:1.3;color:var(--ar-text)}
body .main-navigation,body .main-navigation ul ul{background:transparent}
body .main-navigation{margin:0}
body .main-navigation .inside-navigation{padding:0}
body .main-navigation .main-nav ul li a,body .main-navigation .menu-toggle{
  font-family:var(--ar-font);font-size:1rem;font-weight:500;line-height:44px;color:var(--ar-text);padding:0 16px;background:transparent;transition:color .3s;
}
body .main-navigation .main-nav ul li:last-child a{padding-right:0}
body .main-navigation .main-nav ul li:hover>a,body .main-navigation .main-nav ul li:focus-within>a{color:var(--ar-primary2);background:transparent}
body .main-navigation .main-nav ul li[class*="current-menu-"]>a{color:var(--ar-text);background:transparent}
body .main-navigation .menu-toggle{min-height:44px;align-items:center;gap:8px}
body .main-navigation .menu-toggle:hover,body .main-navigation .menu-toggle:focus{color:var(--ar-primary2);background:transparent}
@media (max-width:768px){
  body .site-header .inside-header{flex-wrap:wrap}
  body .main-navigation.toggled .main-nav{background:rgba(5,8,22,.94);border-radius:var(--ar-radio-s)}
  body .main-navigation .main-nav ul li a{padding:0 var(--ar-pad)}
  body .main-navigation .main-nav ul li:last-child a{padding-right:var(--ar-pad)}
}

/* Puntos de navegación (los crea el script) */
.ar-dots{position:fixed;right:clamp(10px,1.6vw,24px);top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;gap:4px}
.ar-dots a{position:relative;display:block;width:24px;height:24px}
.ar-dots a::after{content:"";position:absolute;left:7px;top:7px;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .35s,transform .35s var(--ar-soft)}
.ar-dots a::before{content:attr(data-label);position:absolute;right:30px;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--ar-mid);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}
.ar-dots a:hover::before,.ar-dots a:focus-visible::before{opacity:1}
.ar-dots a:hover::after{background:var(--ar-mid)}
.ar-dots a.is-active::after{background:var(--ar-primary);transform:scale(1.5);box-shadow:0 0 10px rgba(247,67,11,.7)}
@media (max-width:920px){.ar-dots{display:none}}

/* ---------- 5. Piezas comunes ---------- */
.ar-wrap{max-width:var(--ar-maxw);margin-inline:auto;padding-inline:var(--ar-pad)}
.ar-sec{padding-block:var(--ar-sec-y)}
.ar-phead{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(22px,4vh,40px)}
.ar-n{font-size:1rem;font-weight:700;color:var(--ar-primary);letter-spacing:.1em}
.ar-h2{font-size:clamp(1.625rem,4.4vw,3.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ar-text)}
.ar-h3{font-size:1.3125rem;font-weight:700;line-height:1.25;color:var(--ar-text)}
.ar-p{font-size:clamp(1rem,2vw,1.25rem);color:var(--ar-mid);max-width:min(680px,62ch)}
.ar-card{
  background:var(--ar-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--ar-radio);
  box-shadow:0 16px 40px -24px rgba(0,0,0,.85);transition:transform .5s var(--ar-soft),box-shadow .5s;
}
.ar-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(247,67,11,.4)}

@media (max-width:920px){.ar-card,.ar-social__a,body .ar-boton--fantasma{-webkit-backdrop-filter:none;backdrop-filter:none}.ar-card{background:rgba(14,19,46,.78)}}

/* Botones: píldora, suben 3 px al pasar el puntero */
.ar-acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
body .ar-boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 22px;border-radius:var(--ar-pildora);
  font-family:var(--ar-font);font-size:1rem;font-weight:700;line-height:1.25;
  transition:transform .4s var(--ar-soft),background .4s,color .4s,box-shadow .4s;
}
/* Texto oscuro sobre el naranja: blanco sobre #f7430b da 3,65:1 y el oscuro 5,5:1 (AA) */
body .ar-boton--primario{background:var(--ar-primary);color:var(--ar-deep);box-shadow:0 10px 32px -12px rgba(247,67,11,.9)}
body .ar-boton--primario:hover,body .ar-boton--primario:focus-visible{transform:translateY(-3px);background:var(--ar-primary2);color:var(--ar-deep);box-shadow:0 16px 44px -12px rgba(247,67,11,.95)}
body .ar-boton--fantasma{background:rgba(255,255,255,.07);color:var(--ar-text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body .ar-boton--fantasma:hover,body .ar-boton--fantasma:focus-visible{transform:translateY(-3px);color:#fff;background:rgba(247,67,11,.18)}

/* ---------- 6. Cabecera: banner, avatar solapado, nombre, botones, LinkedIn ---------- */
.ar-cab{padding:0}
body .site .site-content{margin-top:max(96px,11vh)}
.ar-banner{
  position:relative;overflow:hidden;border-radius:var(--ar-radio);height:clamp(120px,21vw,300px);display:grid;place-items:center;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
  background:
    radial-gradient(1.5px 1.5px at 8% 24%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 17% 70%,#aab4c8 60%,transparent 62%),
    radial-gradient(1.5px 1.5px at 29% 38%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 37% 82%,#aab4c8 60%,transparent 62%),
    radial-gradient(2px 2px at 46% 18%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 58% 64%,#aab4c8 60%,transparent 62%),
    radial-gradient(1.5px 1.5px at 66% 30%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 74% 78%,#aab4c8 60%,transparent 62%),
    radial-gradient(2px 2px at 83% 22%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 91% 58%,#aab4c8 60%,transparent 62%),
    radial-gradient(circle at 78% 32%,rgba(247,67,11,.34),transparent 42%),
    radial-gradient(circle at 18% 78%,rgba(18,24,56,.95),transparent 55%),
    linear-gradient(135deg,var(--ar-navy2),var(--ar-navy) 55%,var(--ar-deep));
}
.ar-banner::before{content:"";position:absolute;left:50%;top:50%;width:min(86%,720px);height:62%;border:1px solid rgba(247,67,11,.35);border-radius:50%;transform:translate(-50%,-50%) rotate(-8deg)}
.ar-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,8,22,.5))}
.ar-banner__cargo{position:relative;z-index:1;margin:0;padding-inline:var(--ar-pad);text-align:center;font-size:clamp(1rem,2.6vw,1.75rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ar-text)}
.ar-perfil{
  position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,26px);
  padding:0 clamp(6px,2vw,28px);margin-top:-34px;
}
.ar-avatar{width:clamp(76px,10vw,108px);margin:0}
.ar-avatar picture{display:block}
.ar-avatar__img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;border-radius:50%;border:3px solid var(--ar-deep);background:var(--ar-navy);box-shadow:0 12px 30px -10px rgba(0,0,0,.8);object-fit:cover}
.ar-id{align-self:flex-end;padding-bottom:6px}
.ar-h1{font-size:clamp(1.625rem,4vw,2.75rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ar-text)}
.ar-lead{margin-top:6px;max-width:520px;font-size:clamp(1rem,1.5vw,1rem);color:var(--ar-mid)}
.ar-perfil>.ar-acciones{align-self:flex-end;padding-bottom:6px}
.ar-social{grid-column:1 / -1;display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ar-social__a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--ar-radio-s);color:var(--ar-mid);background:var(--ar-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .3s,background .3s,transform .3s var(--ar-soft)}
.ar-social__a:hover,.ar-social__a:focus-visible{color:#fff;background:rgba(247,67,11,.22);transform:translateY(-3px)}
.ar-ico::before,.ar-social__a::before{
  content:"";display:block;width:20px;height:20px;background-color:currentColor;
  -webkit-mask:var(--ar-ico-in) center / contain no-repeat;mask:var(--ar-ico-in) center / contain no-repeat;
}
.ar-social__a::before{grid-area:1 / 1}
:root{--ar-ico-in:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 9h3.7v11.5H4.5zM6.35 3.4a2.15 2.15 0 1 1 0 4.3 2.15 2.15 0 0 1 0-4.3zM10.4 9h3.55v1.6h.05c.5-.95 1.7-1.95 3.5-1.95 3.75 0 4.45 2.45 4.45 5.65v6.2h-3.7v-5.5c0-1.3 0-3-1.85-3s-2.15 1.45-2.15 2.9v5.6H10.4z'/%3E%3C/svg%3E")}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
@media (max-width:920px){.ar-perfil{grid-template-columns:auto 1fr;row-gap:12px}.ar-perfil>.ar-acciones{grid-column:1 / -1;justify-self:start}}
@media (max-width:560px){.ar-perfil{grid-template-columns:1fr}.ar-perfil>.ar-acciones{width:100%}.ar-perfil>.ar-acciones .ar-boton{flex:1 1 auto}}

/* ---------- 7. Rejillas de tarjetas ---------- */
.ar-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ar-rejilla .ar-card{padding:26px}
.ar-rejilla p.ar-card{font-size:1.0625rem;line-height:1.5;color:var(--ar-text)}
.ar-item{display:flex;flex-direction:column;gap:9px;min-height:180px}
.ar-item p{font-size:1rem;line-height:1.5;color:var(--ar-mid)}
@media (max-width:920px){.ar-rejilla .ar-card{padding:20px}}
@media (max-width:560px){.ar-rejilla{grid-template-columns:1fr}.ar-item{min-height:0}}
.ar-texto{display:flex;flex-direction:column;gap:18px}

/* ---------- 8. Trayectoria: filas de cristal con fecha ---------- */
.ar-filas{display:flex;flex-direction:column;gap:16px}
.ar-fila{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:clamp(14px,3vw,36px);padding:28px 30px;border-radius:var(--ar-radio-m)}
.ar-fecha{font-size:1rem;font-weight:700;letter-spacing:.04em;color:var(--ar-primary)}
.ar-fila__cuerpo{display:flex;flex-direction:column;gap:12px}
.ar-fila__cuerpo p,.ar-puntos li{font-size:1rem;line-height:1.6;color:var(--ar-mid);max-width:58ch}
.ar-puntos{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.ar-puntos li{padding-left:18px;position:relative}
.ar-puntos li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ar-primary)}
@media (max-width:560px){.ar-fila{grid-template-columns:1fr;gap:6px;padding:20px}}

/* ---------- 9. Formación, idioma y publicación ---------- */
.ar-cols{display:grid;grid-template-columns:1.25fr .8fr 1fr;gap:14px;align-items:start}
.ar-col{padding:26px;display:flex;flex-direction:column;gap:14px}
.ar-lista{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.ar-lista li{padding:16px 18px;border-radius:var(--ar-radio-s);background:rgba(255,255,255,.04);border-left:3px solid var(--ar-primary);font-size:1rem;line-height:1.5;color:var(--ar-mid)}
.ar-col p{font-size:1rem;line-height:1.5;color:var(--ar-mid)}
.ar-col .ar-pub-titulo{font-weight:700;color:var(--ar-text)}
@media (max-width:920px){.ar-cols{grid-template-columns:1fr}}

/* ---------- 10. Dónde encontrarme ---------- */
.ar-redes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ar-red{display:flex;flex-direction:column;gap:9px;padding:26px;min-height:200px;border-radius:var(--ar-radio)}
.ar-red::before{content:"";display:block;width:34px;height:34px;background-color:#fff;-webkit-mask:var(--ar-ico-in) center / contain no-repeat;mask:var(--ar-ico-in) center / contain no-repeat;transition:transform .5s var(--ar-soft)}
.ar-red:hover::before{transform:scale(1.12)}
.ar-red .ar-h3{font-size:1.3125rem}
.ar-red .ar-go{margin-top:auto;font-size:1rem;font-weight:500;color:var(--ar-primary);transition:color .3s}
.ar-red:hover .ar-go{color:var(--ar-primary2)}
.ar-red:hover{box-shadow:0 30px 60px -24px rgba(10,102,194,.5)}

/* ---------- 11. Sobre mí ---------- */
.ar-big{font-size:clamp(1.75rem,5vw,3.375rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;max-width:760px;color:var(--ar-text)}
.ar-sobre .ar-p{margin-top:18px}
.ar-sobre .ar-acciones{margin-top:26px}

/* ---------- 12. Pie ---------- */
body .site-footer,body .site-info{background:transparent}
body .site-info{display:block;padding:0;margin:0;text-align:left}
.ar-pie{max-width:var(--ar-maxw);margin-inline:auto;padding:42px var(--ar-pad) 48px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline}
.ar-pie,.ar-pie p,.ar-pie a{font-size:1rem;line-height:1.5;color:var(--ar-dim);letter-spacing:.03em}
.ar-pie a{text-decoration:underline;text-underline-offset:.25em;transition:color .3s}
.ar-pie a:hover{color:var(--ar-primary2)}
body .site-info .ar-pie p{margin:0}

/* ---------- 13. Aparición al hacer scroll: 26 px y 1,1 s como la referencia; la pone el script, el CSS no oculta nada ---------- */
[data-ar="espera"]{opacity:0;transform:translateY(26px)}
[data-ar="visto"]{opacity:1;transform:none;transition:opacity 1.1s var(--ar-soft) var(--ar-d,0ms),transform 1.1s var(--ar-soft) var(--ar-d,0ms)}
@media (prefers-reduced-motion:reduce){
  [data-ar]{opacity:1!important;transform:none!important}
  .ar-card:hover,body .ar-boton:hover,.ar-social__a:hover,.ar-red:hover::before{transform:none!important}
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  html,body{background:#fff!important;color:#000!important}
  .ar-cosmos,.ar-dots,body .site-header,.ar-banner,.ar-acciones,.ar-social{display:none!important}
  [data-ar]{opacity:1!important;transform:none!important}
  .ar-card,.ar-lista li{background:none!important;box-shadow:none!important;border:1px solid #999}
  .ar-h1,.ar-h2,.ar-h3,.ar-big,.ar-p,.ar-lead,.ar-fila__cuerpo p,.ar-puntos li,.ar-col p,.ar-lista li,.ar-fecha,.ar-n,.ar-card,.ar-pie,.ar-pie p,.ar-pie a{color:#000!important}
}