/*
Theme Name: CyberRed Consulting
Theme URI: https://cyberredconsulting.com/
Author: Yusef Ortiz Duarte
Author URI: https://www.linkedin.com/in/yusef-ortiz-duarte-74439512a/
Description: Tema corporativo de CyberRed Consulting. Hero extendido, frameworks animados (SOC/Red/Blue/Pentesting), iconos metalizados SVG, 7 bloques de servicios (incluye Soluciones), portal de cliente, formulario de tickets, integración con Ultimate Member y base de datos secundaria. 100% nativo sin plugins ni APIs externas.
Version: 2.1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cyberred
Tags: business, one-page, custom-colors, custom-menu
*/

/* ── Tipografía self-hosted (Space Grotesk display + Inter body) ── */
@font-face{
  font-family:"Space Grotesk";
  src:url("assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations");
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* Base oscura — coherente con #0A0A0A del logo minimal */
  --bg:#0A0A0A;
  --bg-soft:#101010;
  --card:#141414;
  --text:#F5F5F5;
  --muted:#9A9A9A;

  /* Brand exacto desde CyberRed_Logo_03_Minimal.svg */
  --red:#D81E2F;          /* gradient stop 0 */
  --red-2:#A8121F;        /* mid */
  --red-deep:#8A0815;     /* gradient stop 100 */
  --gold-dark:#B89556;    /* gold stop 0 */
  --gold:#C9A865;
  --gold-light:#E8D49A;   /* gold stop 100 */

  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --max:1200px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.55);
  --shadow-red:0 10px 30px rgba(216,30,47,.22);
  --shadow-gold:0 10px 30px rgba(184,149,86,.18);

  /* Tokens derivados (usados por componentes) — valores del tema oscuro */
  --surface-1:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.05);
  --border-soft:rgba(201,168,101,.18);
  --border-strong:rgba(201,168,101,.30);
  --header-bg:rgba(10,10,10,.88);
  --option-bg:#141414;
  --option-bg-active:#1f1f1f;
  --page-gradient:
    radial-gradient(900px 600px at 90% -10%, rgba(216,30,47,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(184,149,86,.08), transparent 60%),
    linear-gradient(180deg,var(--bg),#050505 60%,var(--bg));

  /* ── Motion tokens ──
     Las curvas nativas de CSS son flojas: no tienen el "punch" que
     hace que una animación se sienta intencional. Estas son las
     variantes fuertes. Regla: nunca ease-in en UI (arranca lento y
     la interfaz se siente pesada justo cuando el usuario mira). */
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entradas, hover, press */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* movimiento en pantalla */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* paneles y drawers */
}

/* ════════════════════════════════════════════════════
   TEMA CLARO (Task 4) — activado con [data-theme="light"]
════════════════════════════════════════════════════ */
html[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-soft:#FFFFFF;
  --card:#FFFFFF;
  --text:#1A1A1A;
  --muted:#5A5A5A;
  --gold-light:#8A6B2E;   /* dorado más oscuro para contraste sobre claro */
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --surface-1:rgba(10,10,10,.02);
  --surface-2:rgba(10,10,10,.04);
  --border-soft:rgba(0,0,0,.10);
  --border-strong:rgba(0,0,0,.16);
  --header-bg:rgba(255,255,255,.92);
  --option-bg:#FFFFFF;
  --option-bg-active:#F2F2F2;
  /* Fondo blanco neutro, sin manchas rojas ni doradas */
  --page-gradient:linear-gradient(180deg,#FFFFFF,#FAFAFA 60%,#FFFFFF);
}
/* En tema claro intercambiamos el SVG por la versión de texto oscuro
   (logo.svg). Conserva el rojo de "RED" y el dorado del diamante,
   en vez de aplastar todo a negro con un filtro. */
html[data-theme="light"] .brand-logo,
html[data-theme="light"] .hero-logo-lead,
html[data-theme="light"] .login-logo,
html[data-theme="light"] .footer-brand img{
  content:url("assets/img/logo.svg");
  opacity:1;
}

/* ════════════════════════════════════════════════════
   TEMA CLARO · correcciones de contraste y fondos
   Muchas zonas tenían el negro "quemado" (rgba(10,10,10))
   o degradados oscuros directamente en el CSS, ignorando
   las variables. Aquí se reescriben SOLO para el tema claro.
════════════════════════════════════════════════════ */

/* Hero unificado (inicio): fondo claro neutro en tema claro */
html[data-theme="light"] .hero-unified{
  background:linear-gradient(180deg,#FFFFFF,#FAFAFA);
}
html[data-theme="light"] .hero-logo-lead{
  filter:drop-shadow(0 18px 48px rgba(0,0,0,.12));
}

/* Login a pantalla completa */
html[data-theme="light"] .login-fullscreen{ background:#FFFFFF; }
html[data-theme="light"] .login-logo{
  filter:drop-shadow(0 12px 36px rgba(0,0,0,.12));
}

/* Header del sitio */
html[data-theme="light"] header.site-header{
  border-bottom-color:rgba(0,0,0,.10);
}

/* Footer: pasaba a negro y el texto gris no se leía bien */
html[data-theme="light"] footer.site-footer{
  background:#FAFAFA;
  border-top-color:rgba(0,0,0,.10);
  color:var(--muted);
}
html[data-theme="light"] .footer-inner{ border-bottom-color:rgba(0,0,0,.08); }
html[data-theme="light"] .footer-links ul a{ color:var(--muted); }
html[data-theme="light"] .footer-links ul a:hover{ color:var(--red); }

/* Menú móvil desplegable (tenía fondo casi negro) */
html[data-theme="light"] .main-nav{
  background:rgba(255,255,255,.98)!important;
  border-bottom-color:rgba(0,0,0,.10)!important;
}

/* Página de servicios: barra de subpestañas y modal quedaban en negro */
html[data-theme="light"] .svc-tabs-wrap{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(0,0,0,.10);
}
html[data-theme="light"] .svc-tab-icon svg,
html[data-theme="light"] .cr-icon{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
html[data-theme="light"] .svc-modal-box{
  background:linear-gradient(170deg,#FFFFFF 0%,#FAFAFA 100%);
  border-color:rgba(0,0,0,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.22);
}
html[data-theme="light"] .svc-modal{ background:rgba(0,0,0,.45); }
html[data-theme="light"] .svc-modal-close{
  background:rgba(0,0,0,.05); color:var(--text);
}
html[data-theme="light"] .svc-card{
  background:linear-gradient(160deg,#FFFFFF 0%,#FAFAFA 100%);
  border-color:rgba(0,0,0,.10);
}

/* Tarjetas, paneles y bloques: superficies claras en vez de blancas
   translúcidas sobre oscuro (que en claro casi no se veían) */
html[data-theme="light"] .card,
html[data-theme="light"] .tab-panel,
html[data-theme="light"] .bloque,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .soporte-info,
html[data-theme="light"] .post-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .meto-content,
html[data-theme="light"] .faq{
  background:#FFFFFF;
  border-color:rgba(0,0,0,.10);
}
html[data-theme="light"] .tabs{
  background:#F5F5F5;
  border-color:rgba(0,0,0,.10);
}
html[data-theme="light"] .svc-list li,
html[data-theme="light"] .meto-deliverables,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .trust-logos div{
  background:#F7F7F7;
  border-color:rgba(0,0,0,.10);
}

/* Bordes inferiores/separadores que usaban blanco translúcido */
html[data-theme="light"] .contact-row,
html[data-theme="light"] .post-meta,
html[data-theme="light"] .auth-divider,
html[data-theme="light"] .tab-head{
  border-color:rgba(0,0,0,.08);
}

/* ════════════════════════════════════════════════════
   Fix global de <select>/<option> (Task 3) — legible en
   Windows/Chrome en ambos temas
════════════════════════════════════════════════════ */
select option{ background:var(--option-bg); color:var(--text); }
select option:checked, select option:hover{ background:var(--option-bg-active); color:var(--gold-light); }
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15.5px,0.35vw + 0.85rem,17px);
  background:var(--page-gradient);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.6;
  letter-spacing:.01em;
  transition:background-color .3s ease, color .3s ease
}
/* Escala fluida por defecto para H3 (los contextuales mantienen su tamaño) */
h3{font-size:clamp(18px,1.2vw + 0.7rem,22px);line-height:1.25}
a{color:var(--gold-light);text-decoration:none}
a:hover{color:var(--gold);text-decoration:underline}
.wrap{max-width:var(--max);margin:auto;padding:0 20px}

/* Header */
header.site-header{
  position:sticky;top:0;
  background:var(--header-bg);
  backdrop-filter:saturate(140%) blur(10px);
  z-index:50;
  border-bottom:1px solid rgba(201,168,101,.22)
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--text)}
.brand img.brand-logo{height:54px;width:auto;display:block}
.nav a{color:var(--text);opacity:.9}
.nav nav a{transition:color .18s ease}
.nav nav a:hover{color:var(--gold-light);text-decoration:none}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:12px;
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;font-weight:700;
  border:1px solid rgba(232,212,154,.25);
  transition:box-shadow .18s var(--ease-out),
             transform .16s var(--ease-out),
             border-color .18s var(--ease-out);
  cursor:pointer
}
/* El hover va detrás de (hover:hover): en táctil el tap dispara :hover
   y el estado se queda pegado hasta que tocás otra cosa. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{
    box-shadow:var(--shadow-red);
    transform:translateY(-1px);
    text-decoration:none;
    border-color:var(--gold-light)
  }
  .btn.alt:hover{border-color:var(--gold-light);box-shadow:none}
  .btn.wa:hover{box-shadow:0 10px 24px rgba(37,211,102,.25)}
}
/* Feedback de presión: confirma que la interfaz escuchó el click. */
.btn:active{transform:scale(.97)}
.btn.alt{
  background:transparent;color:var(--text);
  border-color:rgba(232,212,154,.35)
}
.btn.wa{background:#25d366;color:#0a0a0a;border-color:transparent}

main{display:block}

/* Hero */
.hero{padding:64px 0 40px;border-bottom:1px solid rgba(201,168,101,.14)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.kicker{
  display:inline-block;
  background:rgba(216,30,47,.10);
  color:var(--gold-light);
  border:1px solid rgba(201,168,101,.35);
  padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.10em
}
h1{font-size:clamp(32px,4.6vw,56px);line-height:1.1;margin:14px 0 10px}
h1 .accent{
  background:linear-gradient(90deg,var(--red),var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-card{
  background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(17,24,39,.6));
  border:1px solid rgba(201,168,101,.18);
  padding:18px;border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.hero-media{
  aspect-ratio:4/3;border-radius:var(--radius);
  background:
    radial-gradient(900px 500px at 0% 0%,rgba(216,30,47,.22),transparent 50%),
    radial-gradient(700px 400px at 100% 100%,rgba(184,149,86,.12),transparent 50%),
    linear-gradient(180deg,#0a0a0a,#141414);
  display:grid;place-items:center;
  border:1px solid rgba(201,168,101,.22)
}
.hero-media svg{max-width:82%;height:auto;opacity:.97}

/* Trust */
.trust{padding:24px 0;color:var(--muted);font-size:14px}
.trust-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;opacity:.95;max-width:920px;margin:0 auto}
.trust-logos div{
  height:38px;border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(201,168,101,.18);
  display:grid;place-items:center;font-size:12px;letter-spacing:.06em;
  color:var(--gold-light);text-align:center;padding:0 8px
}
@media (max-width:760px){.trust-logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.trust-logos{grid-template-columns:repeat(2,1fr)}}

/* Sections */
section{padding:56px 0}
h2{font-size:clamp(26px,3vw,38px);margin:0 0 12px}
.section-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.muted{color:var(--muted)}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(201,168,101,.18);
  border-radius:var(--radius);padding:18px;
  transition:border-color .2s var(--ease-out),
             transform .2s var(--ease-out),
             box-shadow .2s var(--ease-out)
}
.card h3{margin:0 0 6px;font-size:18px;color:var(--text)}
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(201,168,101,.35);color:var(--gold-light)
}
.badge.red{border-color:rgba(216,30,47,.45);color:#FCA5A5;background:rgba(216,30,47,.10)}

/* ===== TABS de servicios ===== */
.tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:18px 0 0;padding:6px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(201,168,101,.18);
  border-radius:14px
}
.tabs .tab{
  flex:1 1 auto;min-width:140px;
  padding:12px 16px;border-radius:10px;
  background:transparent;color:var(--muted);
  border:1px solid transparent;
  font-weight:600;font-size:14px;letter-spacing:.02em;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,
             border-color .18s ease,transform .12s var(--ease-out)
}
@media (hover:hover) and (pointer:fine){
  .tabs .tab:hover{color:var(--gold-light);background:rgba(255,255,255,.03)}
}
.tabs .tab:active{transform:scale(.98)}
.tabs .tab[aria-selected="true"]{
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;
  border-color:rgba(232,212,154,.35);
  box-shadow:var(--shadow-red)
}
.tab-panel{
  margin-top:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(201,168,101,.18);
  border-radius:var(--radius);
  padding:26px;
  /* Las tabs se pulsan decenas de veces por sesión: la entrada tiene
     que ser casi imperceptible, no un fundido que se note. */
  animation:fadeTab .16s var(--ease-out)
}
.tab-panel[hidden]{display:none}
@keyframes fadeTab{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tab-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(201,168,101,.18)}
.tab-head h3{margin:0;font-size:22px;color:var(--text)}
.tab-head p{margin:4px 0 0}
.tab-head .b-icon{
  width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;flex:0 0 54px;
  background:linear-gradient(180deg,rgba(216,30,47,.22),rgba(138,8,21,.18));
  border:1px solid rgba(201,168,101,.40);
  font-weight:700;font-size:18px;color:var(--gold-light);
  letter-spacing:.02em
}
.tab-cta{margin-top:22px;display:flex;justify-content:flex-end}

/* ===== BLOQUES expandibles (servicios) ===== */
.bloques{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bloque{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(201,168,101,.18);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .22s var(--ease-out),
             box-shadow .22s var(--ease-out),
             transform .22s var(--ease-out)
}
.bloque[open]{
  border-color:rgba(216,30,47,.55);
  box-shadow:var(--shadow-red)
}
.bloque > summary{
  list-style:none;
  cursor:pointer;
  padding:20px 22px;
  display:flex;align-items:center;gap:14px;
  font-weight:700;font-size:18px;color:var(--text)
}
.bloque > summary::-webkit-details-marker{display:none}
.bloque > summary::after{
  content:"+";
  margin-left:auto;
  width:32px;height:32px;
  border-radius:999px;
  border:1px solid rgba(201,168,101,.45);
  display:inline-grid;place-items:center;
  font-weight:600;font-size:18px;color:var(--gold-light);
  transition:transform .2s var(--ease-out),
             background .2s ease,color .2s ease
}
.bloque[open] > summary::after{
  content:"−";
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;border-color:transparent
}
.bloque .b-icon{
  width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;flex:0 0 46px;
  background:linear-gradient(180deg,rgba(216,30,47,.22),rgba(138,8,21,.18));
  border:1px solid rgba(201,168,101,.40);
  font-weight:700;font-size:18px;color:var(--gold-light);
  letter-spacing:.02em
}
.bloque .b-icon svg{width:22px;height:22px;display:block}
.bloque .b-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.bloque .b-meta small{color:var(--muted);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bloque .b-body{padding:0 22px 22px}
.bloque .b-intro{color:var(--muted);margin:0 0 14px}
.subgroup{margin-top:14px}
.subgroup h4{
  margin:0 0 8px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-light);font-weight:600
}
.svc-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.svc-list li{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-left:3px solid var(--red);
  border-radius:10px;
  padding:12px 14px
}
.svc-list li strong{color:var(--text);display:block;margin-bottom:2px}
.svc-list li span.svc-desc{color:var(--muted);font-size:14px}

/* Process steps */
.steps{counter-reset:step}
.step{display:flex;gap:14px;align-items:flex-start}
.step:before{
  counter-increment:step;content:counter(step);
  width:36px;height:36px;border-radius:999px;
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;
  display:inline-grid;place-items:center;font-weight:800;
  flex:0 0 36px;
  border:1px solid rgba(232,212,154,.35)
}

/* Industries */
.pills{display:flex;flex-wrap:wrap;gap:8px}

/* CTA band */
.cta{
  background:
    linear-gradient(90deg,rgba(216,30,47,.18),rgba(184,149,86,.12));
  border:1px solid rgba(201,168,101,.40);
  padding:22px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:space-between;gap:14px
}

/* FAQ */
details.faq{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(201,168,101,.18);
  border-radius:12px;padding:14px 16px;
  transition:border-color .2s ease
}
details.faq[open]{border-color:rgba(216,30,47,.45)}
details.faq summary{cursor:pointer;font-weight:700;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{
  content:"▸";display:inline-block;margin-right:10px;
  color:var(--gold-light);transition:transform .2s var(--ease-out)
}
details.faq[open] summary::before{transform:rotate(90deg)}

/* Footer */
footer.site-footer{
  padding:36px 0;font-size:14px;color:var(--muted);
  border-top:1px solid rgba(201,168,101,.22);
  background:rgba(10,10,10,.85)
}
footer.site-footer a{color:var(--gold-light)}
footer.site-footer a:hover{color:var(--gold)}

/* Contact Form 7 dark theme adapted to brand */
.wpcf7-form p{margin:10px 0}
.wpcf7-form label{display:block;font-weight:600;margin-bottom:6px;color:var(--text)}
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form textarea,
.wpcf7-form select{
  width:100%;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,168,101,.25);
  color:var(--text);font-size:15px;
  transition:.2s border-color,.2s background
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus{
  outline:none;border-color:var(--red);
  background:rgba(255,255,255,.06)
}
.wpcf7-form textarea{min-height:120px;resize:vertical}
.wpcf7-form input[type=submit]{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:12px;
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;font-weight:700;
  border:1px solid rgba(232,212,154,.35);
  transition:box-shadow .18s var(--ease-out),transform .16s var(--ease-out);
  cursor:pointer
}
@media (hover:hover) and (pointer:fine){
  .wpcf7-form input[type=submit]:hover{
    box-shadow:var(--shadow-red);transform:translateY(-1px)
  }
}
.wpcf7-form input[type=submit]:active{transform:scale(.97)}
.wpcf7-not-valid-tip{color:var(--err);font-size:13px;margin-top:4px}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--ok);color:var(--ok);background:rgba(34,197,94,.08)
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output{
  border-color:var(--err);color:var(--err);background:rgba(239,68,68,.08)
}
.wpcf7 form .wpcf7-response-output{
  border-radius:10px;padding:10px 12px;margin-top:14px
}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .trust-logos{grid-template-columns:repeat(3,1fr)}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}
  .bloques{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid.cols-3,.grid.cols-4,.grid.cols-2{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start}
  .site-header .nav nav{display:none}
  .brand img.brand-logo{height:36px}
  .bloque > summary{font-size:16px;padding:16px 18px}
  .bloque .b-body{padding:0 18px 18px}
  .tabs .tab{flex:1 1 45%;font-size:13px;padding:10px 12px}
  .tab-panel{padding:18px}
  .tab-head h3{font-size:18px}
  .tab-head .b-icon{width:44px;height:44px;flex:0 0 44px;font-size:15px}
}

/* Hero media adaptado al logo */
.hero-media img{max-width:88%;height:auto;display:block;filter:drop-shadow(0 14px 34px rgba(216,30,47,.18))}

/* ═══════════════════════════════════════════════
   FULLSCREEN LOGO HERO
═══════════════════════════════════════════════ */
/* ── Hero unificado: logo + propuesta + CTAs, todo above the fold.
   Conserva el momento de marca (glow rojo/oro) sin esconder la acción. ── */
.hero-unified{
  min-height:clamp(480px, 78vh, 680px);
  display:flex;align-items:center;
  position:relative;
  padding:88px 0 56px;
  background:
    radial-gradient(900px 500px at 70% 0%,rgba(216,30,47,.13),transparent 55%),
    radial-gradient(600px 400px at 0% 100%,rgba(184,149,86,.09),transparent 55%),
    linear-gradient(180deg,#050505,#0A0A0A)
}
.hero-unified .wrap{width:100%}
.hero-logo-lead{
  width:min(560px,74vw);height:auto;
  margin:0 auto 22px;display:block;
  filter:drop-shadow(0 20px 52px rgba(216,30,47,.26));
  animation:heroLogoIn .9s cubic-bezier(.16,1,.3,1) both
}
@keyframes heroLogoIn{
  from{opacity:0;transform:scale(.9) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@media (max-width:640px){
  .hero-unified{min-height:auto;padding:56px 0 40px}
  .hero-logo-lead{width:min(360px,82vw);margin-bottom:16px}
  .hero-unified .hero-lead--xl{margin-top:14px}
}
.scroll-arrow{color:var(--gold-light)}

/* Intro section below hero */
.hero-intro{padding:72px 0 48px;border-bottom:1px solid rgba(201,168,101,.14)}
.hero-intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-card{text-align:center;padding:20px 14px}
.stat-num{font-size:32px;font-weight:200;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.1;margin-bottom:6px}
.stat-label{font-size:13px;line-height:1.4}

/* ═══════════════════════════════════════════════
   MARQUEE — industries & certifications
═══════════════════════════════════════════════ */
.marquee-outer{overflow:hidden;width:100%;padding:6px 0}
.marquee-outer:hover .marquee-track{animation-play-state:paused}
.marquee-track{
  display:flex;gap:10px;
  width:max-content;
  animation:marqueeLeft 40s linear infinite
}
.marquee-track--rtl{animation:marqueeRight 45s linear infinite}
@keyframes marqueeLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Industry badges */
.ind-badge{
  display:inline-flex;align-items:center;
  padding:8px 18px;border-radius:999px;
  border:1px solid rgba(201,168,101,.28);
  color:var(--gold-light);font-size:13px;font-weight:600;
  background:rgba(184,149,86,.05);
  white-space:nowrap;flex-shrink:0
}

/* ═══════════════════════════════════════════════
   LOGIN — fullscreen minimalist
═══════════════════════════════════════════════ */
.login-main{min-height:100vh;display:flex;align-items:stretch}
.login-fullscreen{
  width:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 24px;
  background:
    radial-gradient(600px 400px at 80% 10%,rgba(216,30,47,.10),transparent 55%),
    radial-gradient(400px 300px at 10% 90%,rgba(184,149,86,.07),transparent 55%)
}
.login-logo-wrap{margin-bottom:32px}
.login-logo{width:min(360px,80vw);height:auto;opacity:.95;filter:drop-shadow(0 12px 40px rgba(216,30,47,.20))}
.login-card{
  width:100%;max-width:360px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(201,168,101,.22);
  border-radius:var(--radius);padding:32px 28px
}
.login-card h1{font-size:22px;margin:0 0 20px;text-align:center}
.login-links{
  display:flex;justify-content:center;gap:10px;align-items:center;
  margin-top:16px;font-size:13px;color:var(--muted);flex-wrap:wrap
}
.login-links a{color:var(--gold-light);text-decoration:none;font-size:13px}
.mfa-note{
  display:flex;align-items:center;gap:6px;
  font-size:12px;margin-top:12px;text-align:center;justify-content:center
}
.login-footer-note{
  margin-top:24px;font-size:13px;text-align:center;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center
}
.login-footer-note a{color:var(--gold-light)}

/* ═══════════════════════════════════════════════
   REGISTRO — lead capture grid
═══════════════════════════════════════════════ */
.registro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.registro-why{min-width:0}
.why-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:16px}
.why-list li{display:flex;gap:12px;align-items:flex-start}
.why-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(216,30,47,.10);border:1px solid rgba(201,168,101,.20);
  color:var(--gold-light)
}
.why-list strong{display:block;font-size:15px;margin-bottom:4px}
.why-list .muted{font-size:13px;margin:0}
.auth-success-icon{
  width:64px;height:64px;margin:0 auto 16px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.40);
  color:#22c55e
}

/* ═══════════════════════════════════════════════
   METODOLOGÍA — steps
═══════════════════════════════════════════════ */
.metodologia-steps{display:grid;gap:0}
.meto-step{display:grid;grid-template-columns:80px 1fr;gap:0;position:relative}
.meto-step:not(:last-child)::before{
  content:'';position:absolute;left:39px;top:68px;bottom:0;
  width:2px;background:linear-gradient(180deg,rgba(201,168,101,.40),rgba(201,168,101,.05))
}
.meto-num{
  width:80px;height:80px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(216,30,47,.20),rgba(138,8,21,.14));
  border:1px solid rgba(201,168,101,.40);
  font-weight:700;font-size:22px;color:var(--gold-light);
  align-self:start;
  position:relative;z-index:1
}
.meto-content{margin:0 0 28px 24px;padding:22px}
.meto-deliverables{margin-top:14px;padding:14px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.meto-deliverables strong{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);display:block;margin-bottom:8px}
.meto-deliverables ul{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.meto-deliverables li{font-size:13px;color:var(--muted);padding-left:14px;position:relative}
.meto-deliverables li::before{content:'→';position:absolute;left:0;color:var(--red);font-size:11px}

/* ═══════════════════════════════════════════════
   MULTI-PAGE NAVIGATION — Tab style
═══════════════════════════════════════════════ */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand img.brand-logo{height:50px;width:auto;display:block}

.main-nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.nav-tab{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 11px;border-radius:10px;
  color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.01em;
  border:1px solid transparent;
  transition:color .18s ease,background .18s ease,
             border-color .18s ease,transform .12s var(--ease-out);
  text-decoration:none;
  white-space:nowrap;
}
/* En español las palabras son más largas: ajuste fino */
html[lang="es"] .nav-tab{font-size:12.5px;padding:8px 10px;letter-spacing:0}
@media(min-width:1280px){
  .nav-tab{font-size:14px;padding:8px 13px}
  html[lang="es"] .nav-tab{font-size:13px;padding:8px 11px}
}
@media (hover:hover) and (pointer:fine){
  .nav-tab:hover{color:var(--gold-light);background:rgba(255,255,255,.04);text-decoration:none}
  .nav-tab--locked:hover{opacity:.82}
}
.nav-tab:active{transform:scale(.97)}
.nav-tab.is-active{
  background:linear-gradient(180deg,rgba(216,30,47,.16),rgba(138,8,21,.10));
  color:var(--text);border-color:rgba(216,30,47,.40)
}
.nav-tab--locked{opacity:.58}
.lock-icon{width:12px;height:12px;flex-shrink:0;color:var(--muted)}

/* Auth area in nav */
.nav-auth{margin-left:6px}
.nav-login-btn{padding:9px 16px;font-size:14px}

/* User menu */
.user-menu{position:relative}
.user-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,168,101,.28);
  color:var(--gold-light);font-weight:600;font-size:14px;
  cursor:pointer;
  transition:border-color .18s ease,transform .12s var(--ease-out)
}
@media (hover:hover) and (pointer:fine){
  .user-btn:hover{border-color:rgba(201,168,101,.55)}
}
.user-btn:active{transform:scale(.97)}
.user-btn .chevron{transition:transform .2s var(--ease-out)}
.user-menu.open .chevron{transform:rotate(180deg)}
/* El dropdown entra escalando desde su disparador (arriba a la derecha),
   no desde el centro, y nunca desde scale(0): nada en el mundo real
   aparece de la nada. Se usa visibility en vez de display para que la
   transición pueda correr — el JS solo togglea la clase .open. */
.user-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:176px;background:#141414;
  border:1px solid rgba(201,168,101,.22);
  border-radius:12px;padding:6px;z-index:100;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.97) translateY(-4px);
  transform-origin:top right;
  transition:opacity .16s var(--ease-out),
             transform .16s var(--ease-out),
             visibility 0s linear .16s
}
.user-menu.open .user-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;
  transition:opacity .16s var(--ease-out),
             transform .16s var(--ease-out),
             visibility 0s
}
.user-dropdown a{
  display:block;padding:9px 12px;border-radius:8px;
  color:#F5F5F5;font-size:14px;font-weight:500;
  transition:background .15s ease,color .15s ease;text-decoration:none
}
.user-dropdown a:hover{background:rgba(255,255,255,.06);color:var(--gold-light)}
.user-dropdown a.dd-admin{color:#FF6470;font-weight:600}
.user-dropdown a.dd-admin:hover{background:rgba(216,30,47,.14);color:#FF8892}
.user-dropdown a.dd-logout:hover{background:rgba(216,30,47,.12);color:#FF8892}

/* Mobile hamburger */
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  padding:8px;background:transparent;
  border:1px solid rgba(201,168,101,.28);border-radius:10px;
  cursor:pointer
}
.nav-toggle span{
  display:block;width:22px;height:2px;
  background:var(--gold-light);border-radius:2px;
  transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer-inner{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;padding-bottom:28px;border-bottom:1px solid rgba(201,168,101,.14);margin-bottom:20px}
.footer-brand{max-width:260px}
.footer-links{display:flex;gap:40px;flex-wrap:wrap}
.footer-links ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.footer-links ul a{color:var(--muted);font-size:14px;transition:.15s color}
.footer-links ul a:hover{color:var(--gold-light)}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
.footer-social{display:flex;gap:10px;align-items:center}
.footer-social a{color:var(--gold-light);font-size:13px}

/* ═══════════════════════════════════════════════
   PAGE HERO (sub-pages)
═══════════════════════════════════════════════ */
.page-hero{
  padding:56px 0 36px;
  border-bottom:1px solid rgba(201,168,101,.14);
  background:
    radial-gradient(600px 300px at 100% 0%,rgba(216,30,47,.08),transparent 60%),
    radial-gradient(400px 200px at 0% 100%,rgba(184,149,86,.06),transparent 60%)
}

/* ═══════════════════════════════════════════════
   AUTH PAGES (login / registro)
═══════════════════════════════════════════════ */
.auth-section{
  padding:64px 0;
  min-height:calc(100vh - 120px);
  display:flex;align-items:center
}
.auth-section .wrap{width:100%}
.auth-card{
  max-width:480px;margin:0 auto;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(201,168,101,.22);
  border-radius:var(--radius);padding:38px 36px
}
.auth-logo{text-align:center;margin-bottom:22px}
.auth-card h1{font-size:26px;margin:0 0 6px;text-align:center}
.auth-card .muted{text-align:center;margin:0 0 24px;font-size:14px}
.auth-error{
  padding:12px 14px;margin-bottom:16px;border-radius:10px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);
  color:#FCA5A5;font-size:14px
}
.auth-success{
  padding:12px 14px;margin-bottom:16px;border-radius:10px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.35);
  color:#86efac;font-size:14px
}
.auth-divider{
  text-align:center;color:var(--muted);font-size:13px;
  margin:20px 0 12px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06)
}
/* WP Login form styling */
#loginform{display:grid;gap:14px}
#loginform p{margin:0;display:grid;gap:5px}
#loginform label{font-weight:600;font-size:14px;color:var(--text);display:block}
#loginform input[type=text],
#loginform input[type=password]{
  width:100%;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,168,101,.25);
  color:var(--text);font-size:15px;
  transition:.18s border-color,.18s background;
  box-sizing:border-box
}
#loginform input:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.06)}
#loginform .login-remember{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
#loginform .login-remember input{width:auto;margin:0;accent-color:var(--red)}
#loginform input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 20px;border-radius:12px;
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;font-weight:700;font-size:15px;
  border:1px solid rgba(232,212,154,.25);
  cursor:pointer;
  transition:box-shadow .18s var(--ease-out),transform .16s var(--ease-out)
}
@media (hover:hover) and (pointer:fine){
  #loginform input[type=submit]:hover{box-shadow:var(--shadow-red);transform:translateY(-1px)}
}
#loginform input[type=submit]:active{transform:scale(.97)}
/* Custom registration form */
.auth-form{display:grid;gap:14px}
.auth-form-group{display:grid;gap:5px}
.auth-form-group label{font-weight:600;font-size:14px;color:var(--text)}
.auth-form-group input,
.auth-form-group select,
.auth-form-group textarea{
  width:100%;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,168,101,.25);
  color:var(--text);font-size:15px;
  transition:.18s border-color,.18s background;
  box-sizing:border-box
}
.auth-form-group input:focus,
.auth-form-group select:focus,
.auth-form-group textarea:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.06)}
.auth-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 20px;border-radius:12px;
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;font-weight:700;font-size:15px;
  border:1px solid rgba(232,212,154,.25);
  cursor:pointer;
  transition:box-shadow .18s var(--ease-out),transform .16s var(--ease-out)
}
@media (hover:hover) and (pointer:fine){
  .auth-submit:hover{box-shadow:var(--shadow-red);transform:translateY(-1px)}
}
.auth-submit:active{transform:scale(.97)}
.auth-links{text-align:center;margin-top:18px;color:var(--muted);font-size:14px;line-height:1.8}
.auth-links a{color:var(--gold-light)}

/* ═══════════════════════════════════════════════
   SOPORTE PAGES
═══════════════════════════════════════════════ */
.soporte-grid{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:28px;align-items:start;margin-top:32px
}
.soporte-info{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(201,168,101,.18);
  border-radius:var(--radius);padding:24px;position:sticky;top:90px
}
.soporte-info h3{margin:0 0 16px;font-size:19px}
.contact-row{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:14px;flex-wrap:wrap
}
.contact-row:last-of-type{border-bottom:none}
.contact-row strong{min-width:75px;color:var(--gold-light);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
.contact-row a{color:var(--text)}
.contact-row a:hover{color:var(--gold-light)}

/* ═══════════════════════════════════════════════
   BLOG
═══════════════════════════════════════════════ */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px;margin-top:28px
}
.post-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(201,168,101,.18);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s var(--ease-out),
             transform .2s var(--ease-out),
             box-shadow .2s var(--ease-out)
}
@media (hover:hover) and (pointer:fine){
  .post-card:hover{border-color:rgba(216,30,47,.45);transform:translateY(-3px);box-shadow:var(--shadow-red)}
}
.post-card-thumb{
  aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,rgba(216,30,47,.14),rgba(184,149,86,.08));
  display:grid;place-items:center;font-size:40px
}
.post-card-body{padding:18px;flex:1;display:flex;flex-direction:column}
.post-card-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);margin-bottom:8px}
.post-card h3{font-size:16px;margin:0 0 8px;color:var(--text);line-height:1.35}
.post-card h3 a{color:inherit;text-decoration:none}
.post-card h3 a:hover{color:var(--gold-light)}
.post-excerpt{color:var(--muted);font-size:13px;flex:1;line-height:1.6}
.post-meta{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05);font-size:12px;color:var(--muted)}
.read-more{color:var(--gold-light);font-weight:600;font-size:13px;text-decoration:none}
.read-more:hover{color:var(--gold)}
.blog-pagination{margin-top:36px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.blog-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border-radius:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(201,168,101,.18);
  color:var(--muted);font-size:14px;text-decoration:none;transition:.15s background,.15s color
}
.blog-pagination .page-numbers:hover,.blog-pagination .page-numbers.current{
  background:linear-gradient(180deg,rgba(216,30,47,.18),rgba(138,8,21,.12));
  color:var(--text);border-color:rgba(216,30,47,.40)
}
.no-posts-placeholder{text-align:center;padding:72px 20px}
.no-posts-placeholder .placeholder-icon{font-size:56px;margin-bottom:16px}
.no-posts-placeholder h2{margin:0 0 10px}
.install-steps{text-align:left;max-width:420px;margin:14px auto;padding-left:18px;color:var(--muted);font-size:14px;line-height:2}

/* ═══════════════════════════════════════════════
   COMUNIDAD — bbPress dark theme
═══════════════════════════════════════════════ */
.bbpress-wrap{margin-top:8px}
#bbpress-forums{color:var(--text)}
#bbpress-forums li.bbp-header{background:rgba(255,255,255,.02);border-color:rgba(201,168,101,.18)}
#bbpress-forums li.bbp-body{background:transparent}
#bbpress-forums .bbp-forum-title a,
#bbpress-forums .bbp-topic-title a{color:var(--text);text-decoration:none}
#bbpress-forums .bbp-forum-title a:hover,
#bbpress-forums .bbp-topic-title a:hover{color:var(--gold-light)}
#bbpress-forums .bbp-meta,
#bbpress-forums .bbp-forum-freshness a,
#bbpress-forums .bbp-topic-meta{color:var(--muted);font-size:12px}
#bbpress-forums input,
#bbpress-forums textarea,
#bbpress-forums select{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,168,101,.25);
  color:var(--text);border-radius:10px;padding:10px 12px
}
#bbpress-forums input:focus,
#bbpress-forums textarea:focus{border-color:var(--red);outline:none}
#bbpress-forums .bbp-submit-wrapper input[type=submit],
#bbpress-forums input[type=submit]{
  background:linear-gradient(180deg,var(--red),var(--red-2));
  color:#fff;border:1px solid rgba(232,212,154,.25);
  padding:10px 20px;border-radius:10px;cursor:pointer;
  font-weight:700;transition:.18s box-shadow
}
#bbpress-forums input[type=submit]:hover{box-shadow:var(--shadow-red)}
.bbpress-install-notice.card{border-color:rgba(201,168,101,.35)}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:1100px){
  .hero-intro-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .soporte-grid{grid-template-columns:1fr}
  .soporte-info{position:static}
  .footer-links{gap:24px}
  .registro-grid{grid-template-columns:1fr}
  .registro-why{display:none}
  .form-row-2{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .nav-toggle{display:flex}
  .main-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:rgba(8,8,8,.98);
    border-bottom:1px solid rgba(201,168,101,.22);
    padding:14px 20px 18px;
    flex-direction:column;align-items:flex-start;gap:2px;
    z-index:49;backdrop-filter:blur(12px)
  }
  .main-nav.nav-open{display:flex}
  .nav-tab{width:100%;font-size:15px;padding:11px 14px}
  .nav-auth{margin-left:0;width:100%;margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
  .nav-login-btn{flex:1;justify-content:center}
  .lang-switch{align-self:flex-end;margin-top:8px}
  .header-inner{position:relative}
  .blog-grid{grid-template-columns:1fr}
  .auth-card{padding:28px 22px}
  .footer-inner{flex-direction:column;gap:24px}
  .footer-bottom{flex-direction:column;gap:8px}
  .meto-step{grid-template-columns:60px 1fr}
  .meto-num{width:60px;height:60px;font-size:18px}
  .meto-step:not(:last-child)::before{left:29px;top:52px}
  .login-card{padding:24px 20px}
  .metodologia-steps{gap:0}
  .hero-stats{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
 *  Tipografía de marca (Space Grotesk + Inter) + tokens de color coherentes
 *  Añadido 2026-07-02 — reemplaza el look "Helvetica Neue de sistema".
 * ══════════════════════════════════════════════════════════════════════════ */
:root{
  --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;

  /* Estados rearmonizados (un solo acento rojo de marca; verde/ámbar sobrios) */
  --brand-tint:#F3B8BD;
  --ok:#3E8E5A; --ok-tint:#8FD3A6; --ok-bg:rgba(62,142,90,.12);
  --warn:#C8892E; --warn-tint:#E6C077; --warn-bg:rgba(200,137,46,.12);
}

/* Títulos: la geométrica de marca */
h1,h2,h3,h4,h5,h6,.hero-title,.display{
  font-family:var(--font-display);
  letter-spacing:-.02em;
  line-height:1.1;
}
h1,.hero-title,.display{font-weight:700}

/* Badge "LIVE": verde sobrio en vez del #22c55e chillón de Tailwind */
.live-badge{
  background:var(--ok-bg);
  border-color:rgba(62,142,90,.45);
  color:var(--ok-tint);
}
.live-badge::before{
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(62,142,90,.55);
}

/* ══════════════════════════════════════════════════
   ENTRADA GENTIL entre secciones/páginas.
   Animación de MISMO documento (no cross-document): al cargar
   cada página, el contenido aparece con un fundido suave hacia
   arriba, en vez de un corte brusco. No congela la navegación
   (esta corre después de renderizar, la navegación es instantánea).
   Duración corta y curva suave para que sea amable con la vista.
══════════════════════════════════════════════════ */
@keyframes cr-page-in{
  from{ opacity:0; transform: translateY(10px); }
  to  { opacity:1; transform: none; }
}
main{
  /* Corre en cada navegación: a 550ms el sitio se sentía más lento de
     lo que carga. A 340ms con ease-out fuerte se percibe instantáneo
     y el fundido sigue evitando el corte brusco.
     Sin will-change permanente — dejaba una capa GPU viva para siempre
     por una animación que corre una vez. */
  animation: cr-page-in .34s var(--ease-out) both;
}

/* Scroll suave para los anclas internos (#servicios, #contacto…). */
html{ scroll-behavior:smooth; }

/* ── Accesibilidad — respetar prefers-reduced-motion ──
   Movimiento reducido NO es cero movimiento: se quitan los
   desplazamientos y los bucles (que marean), pero se conservan los
   fundidos de opacidad y color, que ayudan a entender qué cambió. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  main{ animation: none !important; }
  .marquee-track,
  .marquee-track--rtl{ animation: none !important; }
  .hero-logo-lead{ animation: none !important; }
  .live-badge::before{ animation: none !important; }
  .tab-panel{ animation: none !important; }

  /* Nada se desplaza ni escala: solo cambian color y opacidad. */
  .btn:hover,.btn:active,
  .tabs .tab:active,
  .nav-tab:active,
  .user-btn:active,
  .post-card:hover,
  .wpcf7-form input[type=submit]:hover,
  .wpcf7-form input[type=submit]:active,
  #loginform input[type=submit]:hover,
  #loginform input[type=submit]:active,
  .auth-submit:hover,
  .auth-submit:active{ transform: none !important; }

  .user-dropdown{ transform: none !important; }
  .user-menu.open .user-dropdown{ transform: none !important; }
}