/* =====================================================================
   ENSUTEX — TOKENS PREMIUM v2 (F1 · 13-jul-2026)
   Capa exclusiva para las páginas fuera del home mientras index.html
   permanece congelado por instrucción de Carlos.
   ===================================================================== */

:root {
  /* Escenas y texto — valores canónicos del prompt maestro. */
  --ens-scene-dark: #0B0B0D;
  --ens-scene-light: #FDFBFF;
  --ens-red: #E20613;
  --ens-sky: #87CEEB;
  --ens-text-dark-muted: #C7C9CE;
  --ens-text-light-muted: #3F4147;

  /* Familias separadas de la escala para no confundir intención y tamaño. */
  --ens-font-display-family: 'Readex Pro', system-ui, -apple-system, sans-serif;
  --ens-font-body-family: 'Readex Pro', system-ui, -apple-system, sans-serif;

  /* Escala obligatoria. No añadir tamaños de exhibición fuera de estos tokens. */
  --font-display: clamp(2.25rem, 4.5vw, 4rem);
  --font-h2: clamp(1.75rem, 3vw, 2.75rem);
  --font-h3: clamp(1.25rem, 2vw, 1.75rem);
  --font-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --font-body: 1rem;
  --font-label: .75rem;

  /* Alias de compatibilidad para la capa existente. */
  --fs-h1: var(--font-display);
  --fs-h2: var(--font-h2);
  --fs-h3: var(--font-h3);
  --fs-body: var(--font-body);
  --fs-sm: var(--font-label);
  --fs-xs: var(--font-label);
  --fs-kicker: var(--font-label);

  --space-section-sm: clamp(3rem, 6vw, 5rem);
  --space-section-md: clamp(4.5rem, 8vw, 7rem);
  --space-section-lg: clamp(6rem, 10vw, 9rem);
  --ens-media-radius: 20px;
  --ens-motion-ease: cubic-bezier(0.34, 1.35, 0.64, 1);

  /* Compatibilidad de superficie para los componentes ya existentes. */
  --surface: var(--ens-scene-light);
  --surface-strong: var(--ens-scene-dark);
  --inverse-surface: var(--ens-scene-dark);
  --text-primary: #111113;
  --text-secondary: var(--ens-text-light-muted);
  --text-inverse: #FDFBFF;
  --text-inverse-muted: var(--ens-text-dark-muted);
  --brand-red: var(--ens-red);
  --brand-blue: var(--ens-sky);
}

body,
.font-body {
  font-family: var(--ens-font-body-family);
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--ens-font-display-family);
}

.ens-skip-link {
  position: fixed;
  z-index: 200;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: #fff;
  background: #0b0b0d;
  border-radius: .625rem;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease-out;
}

.ens-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--ens-sky);
  outline-offset: 3px;
}

/* Patrón reutilizable: integra media del mismo fondo o enmarca lo distinto. */
.ens-media-frame {
  overflow: hidden;
  border-radius: var(--ens-media-radius);
}

.ens-media-frame--dark {
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.ens-media-frame--light {
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 16px 48px rgba(10, 15, 30, .10);
}

/* Un único lenguaje de entrada para títulos secundarios y bajadas. */
.ens-title-fade-up {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity .65s ease,
    transform .85s var(--ens-motion-ease),
    filter .85s ease;
}

.ens-title-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .ens-title-fade-up {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* En anchos intermedios la firma no debe competir con las rutas principales. */
@media (min-width: 768px) and (max-width: 1120px) {
  .ensutex-site-nav .ensutex-brand-text {
    display: none !important;
  }

  .ensutex-site-nav .ensutex-nav-menu {
    gap: .72rem !important;
  }

  .ensutex-site-nav .ensutex-nav-cta {
    min-width: auto;
    padding-inline: .82rem;
  }
}

/* Consentimiento legible, compacto y fuera del flujo de conversión en móvil. */
.ensutex-consent {
  position: fixed !important;
  z-index: 120 !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  left: max(16px, env(safe-area-inset-left)) !important;
  right: auto !important;
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: 360px !important;
  margin: 0 !important;
  padding: .9rem !important;
  border-radius: 16px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .7rem !important;
}

.ensutex-consent__copy strong {
  font-size: .875rem;
}

.ensutex-consent__copy p {
  font-size: .78rem;
  line-height: 1.35;
}

.ensutex-consent__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: .5rem !important;
}

.ensutex-consent__actions button {
  min-height: 42px;
  padding-inline: .65rem !important;
}

.ensutex-consent__actions button[data-consent="all"] {
  background: var(--ens-sky-strong, #1fb8d0) !important;
  border-color: var(--ens-sky-strong, #1fb8d0) !important;
  color: #041014 !important;
}

@media (max-width: 430px) {
  .ensutex-consent__copy p {
    margin-bottom: .1rem !important;
  }
}

/* Alternativas retail: el contraste sostiene la lectura comparativa en móvil. */
.alternativas-retail-page .bg-zinc-100.text-zinc-500 {
  color: #52525b !important;
}

.alternativas-retail-page .bg-white .text-zinc-400 {
  color: #52525b !important;
}

.alternativas-retail-page .bg-white .text-red-500 {
  color: #b91c1c !important;
}

.alternativas-retail-page footer,
.alternativas-retail-page footer a {
  color: #e4e4e7 !important;
}

/* Privacidad: enlaces distinguibles y texto legal con contraste AA. */
.privacy-page .policy-section p,
.privacy-page .policy-section ol li {
  color: #333 !important;
}

.privacy-page .policy-section a[href^="mailto:"] {
  color: #a5000c !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .16em;
}

.privacy-page .contact-info a[href^="mailto:"] {
  color: #fff !important;
  text-decoration: none;
}

.privacy-page a[aria-current="page"] {
  color: #ff6570 !important;
}

/* En pantallas compactas los CTAs de contexto mandan: Asu no los cubre. */
@media (max-width: 1023px) {
  body[data-ens-page="catalog"] .floating-widgets,
  body[data-ens-page="catalog"] #chatbot-panel,
  .blog-editorial-body .floating-widgets,
  .blog-editorial-body #chatbot-panel {
    display: none !important;
  }
}

/* Shared type system for pages that use the premium token layer. */
body,
button,
input,
select,
textarea,
.ensutex-site-nav {
  font-family: 'Readex Pro', system-ui, -apple-system, sans-serif;
}