/*
Theme Name: Red Capacita AGS
Theme URI: https://redcapacita.com
Author: Red Capacita AGS
Author URI: https://redcapacita.com
Description: Tema a la medida para Red Capacita AGS. Rejilla modular, objetos de plano (esquinas cuadradas, filete de 1px y marcas de registro), fotografia en duotono azul institucional. Respaldado por CLEA y Salud Laboral.
Version: 2.16.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: red-capacita
*/

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  --navy:#00205B; --blue:#1B5AA0; --accent:#0082D4; --lblue:#93BAF2; --green:#22A21C;
  --gold:#E8B923; --gold-ink:#7A5B00;
  --paper:#F2F3F5; --surface:#E9EAEC; --ink:#1D1F20;
  --line:rgba(29,31,32,.16); --line-strong:rgba(29,31,32,.28);
  --muted:rgba(29,31,32,.58);
  --line-d:rgba(255,255,255,.20); --muted-d:#B9C9E8;
  --fh:"Barlow Condensed",system-ui,sans-serif;
  --fb:"Barlow",system-ui,-apple-system,sans-serif;
  --fm:ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--fh);font-weight:600;line-height:1.06;letter-spacing:-.01em;margin:0;text-wrap:balance;}
p{margin:0;}
img{display:block;max-width:100%;}
figure{margin:0;}
a{color:var(--blue);text-decoration:none;text-underline-offset:3px;}
a:hover{color:var(--navy);text-decoration:underline;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:rgba(0,130,212,.24);}

/* ── Layout ─────────────────────────────────────────────── */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.sec{padding:var(--s16) 0;position:relative;}
@media(min-width:900px){.sec{padding:104px 0;}}
.sec-alt{background:var(--surface);}
.sec-dark{background:var(--navy);color:#fff;}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff;}
.rule{height:1px;background:var(--line);border:0;margin:0;}
.center{text-align:center;}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12);align-items:start;}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);}
.narrow{max-width:820px;}
/* !important a propósito: el hero y "El problema" traen su propio
   grid-template-columns escrito en línea (style="...") con proporciones
   distintas a 50/50 (p. ej. 1.25fr .75fr) — un estilo en línea le gana
   a cualquier regla normal de hoja de estilos sin importar el @media, así
   que sin !important esas dos secciones nunca se apilaban en celular.
   OJO: usar "minmax(0,1fr)" y no un "1fr" a secas — un "1fr" suelto tiene
   mínimo automático "auto" (= el ancho mínimo de su contenido), así que si
   adentro hay algo que no se achica (p. ej. la barra fija de 140px del
   Diagnóstico) la columna crece más allá de la pantalla y provoca scroll
   horizontal en celulares angostos (320px). "minmax(0,1fr)" fuerza el
   mínimo a 0 y elimina ese desbordamiento. */
@media(max-width:900px){.g2,.g3{grid-template-columns:minmax(0,1fr)!important;gap:var(--s8)!important;}}

/* ── Tipografia ─────────────────────────────────────────── */
h1{font-size:clamp(44px,6.4vw,74px);text-transform:none;}
h2{font-size:clamp(32px,3.9vw,50px);}
h3{font-size:21px;}
h4{font-size:17px;}
.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);}
.kick::before{content:"";width:22px;height:1px;background:currentColor;flex:none;}
.kick-l{color:var(--lblue);}
.lead{font-size:19px;line-height:1.62;color:var(--muted);}
.sec-dark .lead{color:#D8E4F7;}
.body{font-size:16px;line-height:1.65;color:var(--muted);}
.sec-dark .body{color:var(--muted-d);}
.small{font-size:14px;line-height:1.55;color:var(--muted);}
.sec-dark .small{color:var(--muted-d);}
.mono{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.sec-dark .mono{color:rgba(255,255,255,.55);}

/* ── Objetos enmarcados ─────────────────────────────────── */
.bp{position:relative;border:1px solid var(--line);border-radius:16px;}
.duo,.slot{border-radius:20px;}
.tag{border-radius:8px;}
.sec-dark .bp{border-color:var(--line-d);}
.card{background:transparent;padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2);}
.card h3,.card h4{margin-bottom:2px;}
.tag{display:inline-flex;align-self:flex-start;align-items:center;font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;background:rgba(0,130,212,.10);color:#1c4a75;border-radius:8px;}
.tag-g{background:rgba(34,162,30,.12);color:#186a15;}
.tag-n{background:rgba(29,31,32,.06);color:#3d4146;}
.tag-gold{background:rgba(232,185,35,.16);color:var(--gold-ink);}

/* rejilla modular con estructura visible */
.mgrid{display:grid;border:1px solid var(--line);}
.mgrid>*{padding:var(--s6);border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.mgrid-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.mgrid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.mgrid>*:nth-child(5n){border-right:0;}
.mgrid-3>*:nth-child(3n){border-right:0;}
.mgrid>*:last-child{border-right:0;}
.mgrid>*{border-bottom:0;}
.sec-dark .mgrid,.sec-dark .mgrid>*{border-color:var(--line-d);}
@media(max-width:900px){
  .mgrid-5,.mgrid-3{grid-template-columns:1fr;}
  .mgrid>*{border-right:0!important;border-bottom:1px solid var(--line);}
  .mgrid>*:last-child{border-bottom:0;}
  .sec-dark .mgrid>*{border-bottom-color:var(--line-d);}
}

/* ── Botones ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fh);font-weight:600;font-size:16px;letter-spacing:.02em;text-transform:uppercase;padding:14px 26px;border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--ink);cursor:pointer;position:relative;text-decoration:none;}
.btn:hover{text-decoration:none;}
.btn svg{display:block;flex:none;}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-p:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn-p:active{background:#001a4a;}
.btn-s{border-color:var(--line-strong);color:var(--ink);}
.btn-s:hover{background:rgba(29,31,32,.06);color:var(--ink);}
.sec-dark .btn-s,.btn-s-l{border-color:var(--line-d);color:#fff;}
.btn-s-l{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.sec-dark .btn-s:hover,.btn-s-l:hover{background:rgba(255,255,255,.10);color:#fff;}
.btn-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:600;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:#fff;}
.btn-link:hover{color:var(--lblue);text-decoration:none;}

/* ── Fotografia ─────────────────────────────────────────── */
.duo{position:relative;overflow:hidden;background:var(--surface);}
.duo img{width:100%;height:100%;object-fit:cover;}
.duo::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,32,91,.10);}
.duo.bp::after{box-shadow:none;}
.duo.bp>.tint{display:none;}
.cap{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;}
.sec-dark .cap{color:rgba(255,255,255,.55);}
/* Espacio de foto pendiente: al colocar el archivo en assets/images/ el
   marcador desaparece solo (ver rc_photo() en functions.php). */
.slot{position:relative;display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,rgba(29,31,32,.055) 0 7px,rgba(29,31,32,.02) 7px 14px);}
.slot-t{font-family:var(--fm);font-size:11px;line-height:1.7;letter-spacing:.08em;text-transform:uppercase;color:rgba(29,31,32,.52);text-align:center;padding:20px;max-width:40ch;}
.sec-dark .slot{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 7px,rgba(255,255,255,.025) 7px 14px);}
.sec-dark .slot-t{color:rgba(255,255,255,.62);}
.strip .slot-t{text-align:center;}

/* ── reCAPTCHA (Gravity Forms) ─────────────────────────────
   El badge flotante que inyecta Google (reCAPTCHA v3) se posiciona con
   "right:-186px" a propósito -- lo deja "recogido", asomando solo una
   esquinita fuera de la pantalla. En computadora no se nota, pero en
   celular esa franja invisible que sobresale por la derecha hace que el
   navegador agrande su "viewport de layout" para poder mostrarla completa,
   y ESO arrastra con él a todo lo que está fijo en pantalla (el menú de
   arriba, en nuestro caso), empujándolo y cortándolo fuera del borde
   derecho -- esto es lo que se veía roto en el celular real, no algo del
   diseño del tema. Se oculta el badge (permitido por Google siempre que
   se muestre el aviso de texto equivalente, ya agregado junto al
   formulario de contacto) para eliminar el problema de raíz. */
.grecaptcha-badge{display:none!important;}

/* ── Nav ────────────────────────────────────────────────── */
#rc-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:60;width:0;}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(242,243,245,.72);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .25s,background .25s;}
.nav.scrolled{border-bottom-color:var(--line);}
.nav .wrap{display:flex;align-items:center;gap:var(--s8);height:74px;}
.nav img{height:42px;width:auto;}
.nav-links{display:flex;align-items:center;gap:var(--s8);margin-left:auto;}
.nav-links a{font-family:var(--fh);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);}
.nav-links a:hover{color:var(--blue);text-decoration:none;}
.nav .btn{padding:11px 20px;font-size:14px;}
@media(max-width:900px){.nav-links a{display:none;}.nav-links .btn{display:inline-flex;}}

/* ── Menú móvil (hamburguesa) ─────────────────────────────
   En escritorio (>900px) los links viven en .nav-links y el botón/panel
   de abajo permanecen ocultos. En ≤900px .nav-links esconde sus <a> de
   texto (arriba) y aquí aparece el botón de hamburguesa + el panel
   desplegable con esos mismos 4 links, para no dejar la navegación sin
   forma de acceder a las secciones en celular/tablet. */
.nav-burger{display:none;flex:none;width:40px;height:40px;padding:0;margin-left:4px;border:0;background:none;cursor:pointer;position:relative;}
.nav-burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;}
.nav-burger span:nth-child(1){top:14px;}
.nav-burger span:nth-child(2){top:19px;}
.nav-burger span:nth-child(3){top:24px;}
.nav-burger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-burger.is-open span:nth-child(2){opacity:0;}
.nav-burger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.mobile-menu{display:none;flex-direction:column;max-height:0;overflow:hidden;background:var(--paper);border-top:1px solid transparent;transition:max-height .35s cubic-bezier(.16,1,.3,1),border-color .35s;}
.mobile-menu a{padding:16px 28px;font-family:var(--fh);font-weight:600;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);}
.mobile-menu a:hover{color:var(--blue);text-decoration:none;}
@media(max-width:900px){
  .nav-burger{display:block;}
  .mobile-menu{display:flex;}
  .mobile-menu.is-open{max-height:340px;border-top-color:var(--line);}
}

/* ── Franja de aliados ──────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:780px;margin:0 auto;}
.strip>*{padding:28px var(--s4);border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;min-height:120px;}
.strip>*:last-child{border-right:0;}
.strip img{max-height:64px;width:auto;}
@media(max-width:900px){.strip{grid-template-columns:repeat(2,minmax(0,1fr));}.strip>*:nth-child(2n){border-right:0;}.strip>*{border-bottom:1px solid var(--line);}}

/* ── Barras SIDECAP ─────────────────────────────────────── */
.bar-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--line);}
.bar-track{width:140px;height:5px;background:rgba(29,31,32,.12);flex:none;border-radius:3px;overflow:hidden;}
.bar{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;}
.bar-g{background:var(--green);}

/* ── Dona "Eficiencia laboral" (sección Diagnóstico) ──────────
   Tarjeta flotante sobre la foto; el aro se llena con el scroll
   (ver main.js: ScrollTrigger con scrub sobre #diagnostico). */
.photo-stat-wrap{position:relative;}
.stat-donut{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 20px;box-shadow:0 14px 34px rgba(0,32,91,.28);}
.stat-donut-ring{position:relative;width:96px;height:96px;flex:none;}
.stat-donut-ring svg{transform:rotate(-90deg);display:block;}
.donut-track{fill:none;stroke:var(--surface);stroke-width:10;}
.donut-fill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;}
.stat-donut-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1;}
.stat-donut-num{font-family:var(--fh);font-weight:700;font-size:24px;line-height:1;color:var(--navy);}
.stat-donut-pct{font-family:var(--fh);font-weight:600;font-size:12px;line-height:1;color:var(--muted);margin-left:2px;}
.stat-donut-label{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;white-space:nowrap;}
@media(max-width:600px){
  .stat-donut{padding:12px 16px;gap:6px;}
  .stat-donut-ring{width:76px;height:76px;}
  .stat-donut-num{font-size:20px;}
}

/* ── Formulario (maqueta de respaldo) ───────────────────── */
.form-card{background:#fff;padding:var(--s8);border-radius:16px;}
.form-card label{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.f-input{
  width:100%;min-height:46px;padding:10px 12px;font-family:var(--fb);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;}
textarea.f-input{min-height:104px;resize:vertical;}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
@media(max-width:600px){.f-grid{grid-template-columns:1fr;}}

/* ── Gravity Forms ───────────────────────────────────────
   Deja los campos del formulario en su ancho por defecto (sin tocar
   "Field Width"/columnas en el editor de GF) — esta rejilla los acomoda
   sola: Nombre/Empresa y Correo/WhatsApp en pareja, y el párrafo final
   ("Qué quieres resolver") ocupa el ancho completo. */
.gform_wrapper{margin:0;}
.gform_wrapper .gform_fields{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.gform_wrapper .gfield{margin:0;}
.gform_wrapper .gfield--type-textarea{grid-column:1/-1;}
.gform_wrapper .gfield_label{display:block;font-family:var(--fm);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}

/* GF trae un aviso "* Indica campos obligatorios" pensado para lectores de
   pantalla (oculto visualmente con position:absolute + clip). Nuestro reset
   de listas/márgenes rompe ese ocultamiento en algunas versiones del tema
   Orbital de GF y el asterisco aparece "flotando" arriba del formulario.
   Lo re-ocultamos de forma explícita y a prueba de overrides. */
.gform_wrapper .gform_required_legend,
.gform_wrapper legend.gfield_required_legend,
.gform_wrapper .gform-body__required-legend,
.gform_wrapper .gform-visually-hidden{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;
}
/* El asterisco de cada campo obligatorio sí lo dejamos ver, pero forzamos
   nuestro color (el tema Orbital de GF trae uno rojo propio que a veces gana
   por especificidad). Si se decide ocultarlo del todo para igualar 1:1 la
   maqueta original, basta con cambiar esto a "display:none;". */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk{color:var(--accent) !important;}
.gform_wrapper .ginput_container{margin-top:0;}
.gform_wrapper .ginput_container input[type=text],
.gform_wrapper .ginput_container input[type=email],
.gform_wrapper .ginput_container input[type=tel],
.gform_wrapper .ginput_container textarea{
  width:100%;min-height:46px;padding:10px 12px;font-family:var(--fb);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:none;}
.gform_wrapper .ginput_container textarea{min-height:104px;resize:vertical;}
.gform_wrapper .ginput_container input:hover,.gform_wrapper .ginput_container textarea:hover{border-color:var(--line-strong);}
.gform_wrapper .ginput_container input:focus,.gform_wrapper .ginput_container textarea:focus{border-color:var(--accent);outline:none;box-shadow:none;}
.gform_wrapper .gform_footer,.gform_wrapper .gform_page_footer{margin:22px 0 0;padding:0;border-top:0;justify-content:stretch;}
.gform_wrapper .gform_button{width:100%;font-family:var(--fh);font-weight:600;font-size:16px;letter-spacing:.02em;text-transform:uppercase;padding:15px 26px;background:var(--accent);border:1px solid var(--accent);color:#fff;cursor:pointer;border-radius:16px;box-shadow:none;}
.gform_wrapper .gform_button:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.gform_wrapper .gfield_validation_message{color:#b91c1c;font-size:13px;margin-top:6px;}
.gform_wrapper .validation_error{grid-column:1/-1;border-radius:12px;font-size:14px;padding:12px 16px;margin:0 0 var(--s4);background:rgba(220,38,38,.08);color:#b91c1c;border:1px solid rgba(220,38,38,.24);}
.gform_wrapper .gform_confirmation_message{font-size:16px;color:var(--ink);line-height:1.6;}
@media(max-width:600px){.gform_wrapper .gform_fields{grid-template-columns:1fr;}}

/* ── Footer ─────────────────────────────────────────────── */
.foot{background:#00143B;color:#fff;padding:var(--s16) 0 var(--s8);}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s12);}
.foot a{color:#B9C9E8;}
.foot a:hover{color:#fff;}
.foot .mono{color:rgba(255,255,255,.5);}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#7C90B8;}
@media(max-width:900px){.foot-top{grid-template-columns:1fr;gap:var(--s8);}}

/* ── Linea de tiempo "Como funciona" ────────────────────── */
.tl{position:relative;}
.tl-rail{position:absolute;top:25px;left:10%;right:10%;height:2px;background:rgba(255,255,255,.16);overflow:hidden;}
.tl-fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#1a8a15 0%,#22A21C 45%,#4FD84A 100%);box-shadow:0 0 18px rgba(79,216,74,.45);}
.tl-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;}
.tl-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px;}
.tl-node{position:relative;z-index:1;width:52px;height:52px;flex:none;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;
  background:#052a63;border:1px solid rgba(255,255,255,.26);
  font-family:var(--fh);font-weight:600;font-size:20px;line-height:1;color:rgba(255,255,255,.62);
  transition:background .55s cubic-bezier(.16,1,.3,1),border-color .55s,color .55s,box-shadow .55s,transform .55s cubic-bezier(.16,1,.3,1);}
.tl-step h4{margin-top:24px;font-size:19px;letter-spacing:.005em;}
.tl-step .small{margin-top:12px;font-size:15px;line-height:1.55;max-width:26ch;}
.tl-step.is-on .tl-node{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 5px rgba(0,130,212,.16),0 0 26px rgba(0,130,212,.42);transform:scale(1.06);}
.tl-step.is-last.is-on .tl-node{background:var(--green);border-color:#4FD84A;
  box-shadow:0 0 0 5px rgba(34,162,30,.18),0 0 26px rgba(79,216,74,.5);}
html.rc-anim .tl-step{opacity:.34;transform:translateY(22px);filter:blur(2.5px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s cubic-bezier(.16,1,.3,1);}
html.rc-anim .tl-step.is-on{opacity:1;transform:none;filter:none;}
@media(max-width:900px){
  .tl-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px;}
  .tl-rail{display:none;}
  .tl-step .small{max-width:34ch;}
}
@media(max-width:560px){.tl-steps{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){
  html.rc-anim .tl-step{opacity:1;transform:none;filter:none;}
}

/* ── Micro-interacciones ────────────────────────────────── */
.btn{transition:background .35s cubic-bezier(.16,1,.3,1),border-color .35s,color .35s,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.btn-p{box-shadow:0 1px 2px rgba(0,32,91,.18);}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,32,91,.28);}
.btn:active{transform:translateY(0) scale(.98);}
.btn svg{transition:transform .35s cubic-bezier(.16,1,.3,1);}
.btn:hover svg{transform:translateX(3px);}
.btn-s:hover{transform:translateY(-2px);}
.card.bp,.form-card.bp{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s;}
.card.bp:hover{transform:translateY(-4px);border-color:rgba(0,130,212,.42);box-shadow:0 14px 34px rgba(0,32,91,.10);}
.sec-dark .card.bp:hover{border-color:rgba(147,188,242,.5);box-shadow:none;}
.duo img{transition:none;}
.duo:hover{border-color:rgba(0,130,212,.42);}
html.rc-anim .duo img{transform:scale(1.09);transform-origin:center;}
.nav-links a:not(.btn){position:relative;transition:color .3s;}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);}
.mgrid>*{transition:background .4s;}
.mgrid>*:hover{background:rgba(0,130,212,.05);}
.sec-dark .mgrid>*:hover{background:rgba(255,255,255,.05);}
.strip img{transition:transform .5s cubic-bezier(.16,1,.3,1);}
.strip>*:hover img{transform:scale(1.05);}

/* ── Animaciones (solo si GSAP carga) ───────────────────── */
html.rc-anim .rv{opacity:0;transform:translateY(28px);}
html.rc-anim .rv-s{opacity:0;transform:scale(.96);}
@media(prefers-reduced-motion:reduce){html.rc-anim .rv,html.rc-anim .rv-s{opacity:1;transform:none;}}

/* ── Aurora + Glassmorphism (capa de mejora, 31 ago 2026) ──
   Fondos con degradados de color suaves y en movimiento ("aurora")
   más superficies de vidrio esmerilado ("glassmorphism") en
   tarjetas clave. Usa los MISMOS colores de marca ya establecidos
   (azul=SIDECAP, verde=Salud Laboral, dorado=CLEA, este último
   tomado del escudo de CLEA para la VCard) — no una paleta nueva.
   Se aplica como acento sobre la base clara/plano-técnico ya
   existente, en las secciones donde más aporta (hero, cómo
   funciona, diagnóstico, respaldo, contacto), no en todo el sitio
   parejo, para no perder la identidad ya construida. */

/* Blobs de degradado radial (mismo patrón que #rc-blob1/2 del hero,
   ahora reutilizable en más secciones) con una deriva lenta y
   continua. Se desactiva por completo con prefers-reduced-motion:
   los blobs quedan fijos en su posición, sin animar. */
.rc-aurora{position:absolute;border-radius:50%;pointer-events:none;will-change:transform;}
@media(prefers-reduced-motion:no-preference){
  .rc-aurora-a{animation:rc-aurora-a 24s ease-in-out infinite;}
  .rc-aurora-b{animation:rc-aurora-b 28s ease-in-out infinite;}
  .rc-aurora-c{animation:rc-aurora-c 32s ease-in-out infinite;}
}
@keyframes rc-aurora-a{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-36px,28px) scale(1.08);}}
@keyframes rc-aurora-b{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(32px,-24px) scale(1.06);}}
@keyframes rc-aurora-c{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-26px,-30px) scale(1.1);}}

/* Las secciones que llevan blobs de aurora necesitan recortar lo
   que se sale de su borde (igual que ya hacía el hero con su propio
   overflow:hidden en línea). */
#que-es,#como-funciona,#diagnostico,#respaldo,#contacto{overflow:hidden;}

/* Vidrio esmerilado: superficie translúcida con desenfoque de
   fondo, para tarjetas que flotan sobre las zonas con aurora (el
   panel del hero, la dona de "Eficiencia laboral", las tarjetas de
   CLEA/Salud Laboral, el formulario de contacto). Con una versión
   de reserva sin blur para navegadores que no soportan
   backdrop-filter. Al ir después de esas reglas en la hoja, esta
   clase gana sobre sus fondos sólidos originales sin tocarlos. */
/* Nota de contraste: los textos "mono"/"muted" del tema usan negro a
   baja opacidad (pensado para fondo blanco sólido) — si el vidrio se
   deja demasiado transparente sobre un fondo aurora saturado (p. ej.
   detrás del formulario de contacto), ese texto pierde legibilidad.
   Por eso el vidrio se queda casi opaco (90%+): se nota el desenfoque
   y una insinuación de color detrás, pero el contraste del texto no
   se sacrifica. */
.glass{background:rgba(255,255,255,.90);border-color:rgba(255,255,255,.7);box-shadow:0 10px 40px rgba(0,32,91,.14),inset 0 1px 0 rgba(255,255,255,.5);}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass{background:rgba(255,255,255,.88);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);}
}
.sec-dark .glass{border-color:rgba(255,255,255,.24);box-shadow:0 10px 40px rgba(0,10,30,.5),inset 0 1px 0 rgba(255,255,255,.18);}

/* Variante oscura del vidrio: para tarjetas de fondo oscuro que llevan
   texto BLANCO (p. ej. el panel de datos del hero) — no puede usar
   ".glass" (blanco casi opaco) porque el texto quedaría invisible.
   OJO: no se hereda automáticamente por estar dentro de ".sec-dark"
   porque el formulario de contacto también vive en una sección
   oscura pero SÍ necesita el vidrio blanco (su texto es tinta oscura,
   pensado para fondo claro) — por eso es una clase aparte, que se
   agrega a mano solo donde el contenido es texto blanco. */
.glass-dark{background:rgba(6,18,42,.48);border-color:rgba(255,255,255,.18);box-shadow:0 10px 40px rgba(0,10,30,.45),inset 0 1px 0 rgba(255,255,255,.10);}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass-dark{background:rgba(6,18,42,.36);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);}
}

/* ── Páginas legales (Aviso de privacidad / Términos / Cookies) ──
   Usadas por page-aviso-de-privacidad.php, page-terminos-y-condiciones.php
   y page-politica-de-cookies.php. */
.legal-page{padding:160px 0 120px;}
.legal-page .legal-wrap{max-width:800px;margin:0 auto;padding:0 28px;}
.legal-page h1{font-family:var(--fh);font-weight:700;font-size:clamp(32px,4.4vw,48px);margin:0 0 8px;color:var(--ink);}
.legal-page .legal-updated{font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 48px;}
.legal-page h2{font-family:var(--fh);font-weight:600;font-size:24px;margin:48px 0 16px;color:var(--navy);}
.legal-page p{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 16px;}
.legal-page ul,.legal-page ol{margin:0 0 16px;padding-left:22px;}
.legal-page ol ul,.legal-page ul ul,.legal-page ol ol{margin-top:8px;}
.legal-page li{font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:8px;}
.legal-page ol.alpha{list-style-type:lower-alpha;}
.legal-page h3{font-family:var(--fh);font-weight:600;font-size:19px;margin:32px 0 12px;color:var(--ink);}
.legal-page strong{color:var(--ink);}
.legal-page .legal-note{margin-top:56px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:14px;line-height:1.6;color:var(--muted);}