/*!
 * Roberto Aguayo — portada · estilos
 * 1) @font-face  2) CSS del diseño original (sin cambios)  3) Ajustes de producción
 */

/* 1 · Fuentes (las latin-ext se cargan de Google solo si aparece un carácter de ese rango, igual que el original) */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4ET-DNl0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/dm-sans-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjgn7MsNo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zsTjmbI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2 · Diseño original */
body{margin:0;font-family:'DM Sans',system-ui,sans-serif;background:#0B0B09;color:#0D0D0A;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
::selection{background:#C4673A;color:#fff}
a{color:#C4673A;text-decoration:none}a:hover{color:#E08A5C}
button{font-family:inherit;cursor:pointer}
input[type=range]{accent-color:#C4673A;width:100%;height:28px;cursor:pointer}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}

/* glass */
.glass{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.025));-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 40px 90px -40px rgba(0,0,0,.75)}
.glass-light{background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.34));-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 70px -36px rgba(80,50,30,.35)}
.spec{position:relative;overflow:hidden;--mx:50%;--my:0%}
.spec::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.16),transparent 45%);opacity:0;transition:opacity .4s}
.spec:hover::after{opacity:1}
.tilt{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;transform-style:preserve-3d;will-change:transform}
.mag{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,border-color .25s}

/* orbs */
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:ra-drift 18s ease-in-out infinite alternate}
@keyframes ra-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.12)}100%{transform:translate(-40px,30px) scale(.94)}}

/* motion primitives */
@keyframes ra-live{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes ra-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ra-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes ra-scroll{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes ra-letter{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ra-step{0%,8%{opacity:.35;transform:translateX(0)}14%,92%{opacity:1;transform:translateX(4px)}100%{opacity:.35;transform:translateX(0)}}
@keyframes ra-pulse-down{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes ra-orbit{to{transform:rotate(360deg)}}
@keyframes ra-ripple{0%{transform:translate(-50%,-50%) scale(.2);opacity:.7}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes ra-travel{0%{left:0%}100%{left:100%}}
@keyframes ra-shine{0%{background-position:-200% 0}100%{background-position:200% 0}}
.ra-live-dot{animation:ra-live 2s ease infinite}
.ra-in{animation:ra-in .5s cubic-bezier(.2,.7,.2,1) both}
.ra-tdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:ra-dot 1.2s ease infinite}
.ra-tdot.d2{animation-delay:.15s}.ra-tdot.d3{animation-delay:.3s}
.ra-scroll-line{animation:ra-scroll 2.2s cubic-bezier(.6,0,.4,1) infinite}
.step-a{animation:ra-step 8s ease infinite}
.orbit{animation:ra-orbit 24s linear infinite}.orbit.r2{animation-duration:38s;animation-direction:reverse}.orbit.r3{animation-duration:60s}
.ripple{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.35);border-radius:50%;animation:ra-ripple 6s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.shine-text{background:linear-gradient(100deg,#C9A97E 20%,#F4E3C6 40%,#C9A97E 60%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ra-shine 6s linear infinite}

/* hero letters */
.hl{display:inline-block;font-variation-settings:'wght' 250;will-change:font-variation-settings}
.ra-live .hl{opacity:0;transform:translateY(45%) rotate(5deg);filter:blur(10px);animation:ra-letter 1s cubic-bezier(.2,.7,.2,1) forwards}
.ra-live .hero-fade{opacity:0;animation:ra-in 1s cubic-bezier(.2,.7,.2,1) forwards}

/* reveal */
.js-reveal .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.active{opacity:1;transform:none}
.js-reveal .reveal .child{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.active .child{opacity:1;transform:none}
.js-reveal .clipr{clip-path:inset(100% 0 0 0 round 20px);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.js-reveal .reveal.active .clipr{clip-path:inset(0 0 0 0 round 20px)}

/* manifesto */
.mw{transition:opacity .25s linear}
.ra-static .mani{height:auto !important}
.ra-static .mani-in{position:relative !important;height:auto !important;padding:140px 80px !important}

/* thread */
.thread-node{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;border:1px solid rgba(196,103,58,.55);background:#0B0B09;transition:background .5s,box-shadow .5s,transform .5s;z-index:6}
.thread-node.on{background:#C4673A;box-shadow:0 0 0 5px rgba(196,103,58,.18),0 0 22px rgba(196,103,58,.8);transform:scale(1.15)}
.thread-label{position:absolute;left:16px;top:-7px;font-size:9px;font-weight:700;letter-spacing:.2em;color:rgba(196,103,58,.8);white-space:nowrap}

/* cursor */
.ra-cur,.ra-cdot{position:fixed;left:0;top:0;pointer-events:none;z-index:200;display:none}
.ra-fine .ra-cur{display:block;width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,169,126,.7);mix-blend-mode:difference;transition:width .35s,height .35s,margin .35s,background .35s,border-color .35s}
.ra-fine .ra-cur.big{width:84px;height:84px;margin:-22px 0 0 -22px;background:rgba(201,169,126,.18);border-color:rgba(201,169,126,.9)}
.ra-fine .ra-cdot{display:block;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#C9A97E}

/* footer wordmark */
.wordmark{-webkit-text-stroke:1px rgba(201,169,126,.45);color:transparent;transition:color .8s cubic-bezier(.2,.7,.2,1)}
.wordmark:hover{color:#C9A97E}

/* links */
.nav-link{transition:color .2s}.nav-link:hover{color:#FFFFFF !important}
.foot-link{transition:color .2s}.foot-link:hover{color:#C9A97E !important}
.chip{transition:background .2s,color .2s,border-color .2s}.chip:hover{background:#C4673A !important;color:#FFFFFF !important;border-color:#C4673A !important}
.faq-q{transition:color .2s}.faq-q:hover{color:#A9542C !important}

/* loader */
.loader{position:fixed;inset:0;z-index:300;background:#0B0B09;display:flex;flex-direction:column;justify-content:flex-end;padding:56px 80px;transition:transform 1s cubic-bezier(.8,0,.2,1)}
.loader.out{transform:translateY(-100%)}

@media (prefers-reduced-motion: reduce){.orb,.orbit,.ripple,.step-a,.shine-text,.ra-scroll-line{animation:none !important}}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:960px){
.sec{padding:72px 22px !important}
.g2,.g3,.g4,.gfoot,.calc-grid,.tl-grid{grid-template-columns:minmax(0,1fr) !important}
.navlinks,.deco,.ra-thread,.thread-node{display:none !important}
.hero-h{font-size:46px !important}
.h-big{font-size:36px !important}
.hero-sec{height:auto !important;min-height:100vh}
.hero-in{position:relative !important;padding:130px 22px 40px !important}
.sys-card{position:relative !important;right:auto !important;bottom:auto !important;width:100% !important;margin-top:36px}
.stats-bar{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;margin:28px 22px 32px;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.navin{padding:10px 10px 10px 20px !important}
.mq-row{font-size:64px !important}
.mani-in{padding:0 22px !important}
.mani-text{font-size:34px !important}
.cta-giant{font-size:84px !important}
.wordmark{font-size:19vw !important}
.chatpanel{width:calc(100vw - 32px) !important;height:min(560px,calc(100vh - 120px)) !important}
.chatwrap{right:16px !important;bottom:16px !important}
.nav-cta{padding:12px 16px !important;font-size:10px !important}
}

/* =====================================================================
   AJUSTES DE PRODUCCIÓN
   Todo lo de arriba es el CSS del diseño original, sin cambios.
   Lo de abajo corrige errores detectados y adapta la página a WordPress.
   Cada bloque se puede borrar por separado para volver al comportamiento
   original (ver el anexo de la guía).
   ===================================================================== */

/* A1 · Elementos que el script muestra u oculta. */
#ra-root [hidden]{display:none !important}

/* A2 · Barra de administración de WordPress (solo con sesión iniciada). */
.admin-bar .ra-header{top:50px !important}
@media (max-width:782px){.admin-bar .ra-header{top:64px !important}}

/* A3 · Hero: en portátiles (1366×768, 1440×900, 1536×864) la barra de
   cifras tapaba los dos botones. Ahora la barra va en el flujo y el hero
   crece lo necesario. En pantallas altas se ve exactamente igual. */
@media (min-width:961px){
  .hero-sec{height:auto !important;min-height:clamp(820px,100vh,1040px)}
  .hero-in{position:relative !important;inset:auto !important;min-height:inherit;display:flex;flex-direction:column;padding-bottom:36px !important}
  .hero-in > div:first-child{padding-bottom:32px}
  .stats-bar{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;margin-top:auto}
}
/* A3b · Tablet horizontal: la tarjeta "Sistema activo" no pisa los botones. */
@media (min-width:961px) and (max-width:1199px){
  .sys-card{width:300px !important;right:40px !important}
}

/* A4 · "El proceso" en móvil: el título y el texto ya no quedan debajo
   de la tarjeta 01. En escritorio se ve exactamente como el original. */
@media (max-width:960px){#proceso .g2 > .reveal:first-child{position:static !important}}

/* A5 · Calculadora: la etiqueta ya no choca con el valor. */
.calc-row{gap:16px}
.calc-row > span{white-space:nowrap}

/* A6 · Móvil: el botón del chat se reduce al círculo para no tapar
   "Ver el caso real", y la insignia de E&H ya no se corta. */
@media (max-width:960px){
  .ra-launcher-text{display:none}
  .ra-launcher{padding:8px !important}
  .ra-badge{left:12px !important}
}

/* A7 · Foto real de Roberto (cuando se configura en el Personalizador). */
.ra-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* A8 · Campo trampa anti-spam del formulario de recursos. */
.ra-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}

/* A9 · Mensaje de error del formulario de recursos. */
.ra-res-error{font-size:12px;color:#F2A27A}