@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap');

/*
  ======================================================
  PERSONALIZA TODO DESDE AQUÍ
  ======================================================
  1) Cambia colores en las variables de abajo.
  2) Cambia tipografía en --font-sans.
  3) Ajusta tamaños de logo si lo necesitas.
  4) Los logos, favicon, video y nombre del sitio se cambian en site-config.js
*/

:root {
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Modo claro */
  --bg-light: #ffffff;
  --bg-2-light: #f6f7f8;
  --fg-light: #121212;
  --muted-light: #5f6773;
  --card-light: #ffffff;
  --ink-light: #111111;
  --brand-light: #1F3D3B;
  --brand-600-light: #C9A227;
  --brand-700-light: #C9A227;
  --ring-light: rgba(150, 140, 140, .28);
  --shadow-light: 0 10px 18px rgba(0, 0, 0, .08);

  /* Modo oscuro */
  --bg-dark: #0f1115;
  --bg-2-dark: #0b0d11;
  --fg-dark: #f4f6f8;
  --muted-dark: #aab0b6;
  --card-dark: #12151b;
  --ink-dark: #f8f9fa;
  --brand-dark: #b9aaaa;
  --brand-600-dark: #968c8c;
  --brand-700-dark: #746c5b;
  --ring-dark: rgba(185, 170, 170, .28);
  --shadow-dark: 0 10px 20px rgba(0, 0, 0, .35);

  /* Ajustes globales */
  --header-h: 100px;
  --logo-height: 100px;
  --logo-height-mobile: 74px;
  --logo-height-sticky: 84px;
  --aux-logo-height: 50px;
  --aux-logo-height-mobile: 34px;

  --header-bg-light: rgba(255, 255, 255, .78);
  --header-border-light: rgba(18, 18, 18, .08);
  --header-bg-dark: rgba(15, 17, 21, .78);
  --header-border-dark: rgba(255, 255, 255, .08);

  --nav-link-color-light: var(--fg-light);
  --nav-link-color-dark: var(--fg-dark);
  --nav-active-color-light: var(--fg-light);
  --nav-active-color-dark: var(--fg-dark);
  --nav-indicator-bg-light: color-mix(in oklab, var(--card-light), var(--brand-light) 18%);
  --nav-indicator-bg-dark: color-mix(in oklab, var(--card-dark), var(--brand-dark) 18%);
  --nav-indicator-border-light: rgba(17, 17, 17, .06);
  --nav-indicator-border-dark: rgba(255, 255, 255, .08);
  --nav-indicator-shadow-light: 0 12px 24px rgba(0, 0, 0, .10);
  --nav-indicator-shadow-dark: 0 12px 24px rgba(0, 0, 0, .28);

  --btn-primary-text: #ffffff;
  --hero-video-filter: none;

  /* Sinónimos para componentes existentes */
  --trial-accent-1: #22d3ee;
  --trial-accent-2: #a78bfa;
  --trial-accent-3: #fb7185;
}

html[data-theme="light"],
html[data-theme="Light"],
:root {
  --bg: var(--bg-light);
  --bg-2: var(--bg-2-light);
  --fg: var(--fg-light);
  --muted: var(--muted-light);
  --card: var(--card-light);
  --ink: var(--ink-light);
  --brand: var(--brand-light);
  --brand-600: var(--brand-600-light);
  --brand-700: var(--brand-700-light);
  --ring: var(--ring-light);
  --shadow: var(--shadow-light);
  --header-bg: var(--header-bg-light);
  --header-border: var(--header-border-light);
  --nav-link-color: var(--nav-link-color-light);
  --nav-active-color: var(--nav-active-color-light);
  --nav-indicator-bg: var(--nav-indicator-bg-light);
  --nav-indicator-border: var(--nav-indicator-border-light);
  --nav-indicator-shadow: var(--nav-indicator-shadow-light);
}

html[data-theme="dark"],
html[data-theme="Dark"] {
  --bg: var(--bg-dark);
  --bg-2: var(--bg-2-dark);
  --fg: var(--fg-dark);
  --muted: var(--muted-dark);
  --card: var(--card-dark);
  --ink: var(--ink-dark);
  --brand: var(--brand-dark);
  --brand-600: var(--brand-600-dark);
  --brand-700: var(--brand-700-dark);
  --ring: var(--ring-dark);
  --shadow: var(--shadow-dark);
  --header-bg: var(--header-bg-dark);
  --header-border: var(--header-border-dark);
  --nav-link-color: var(--nav-link-color-dark);
  --nav-active-color: var(--nav-active-color-dark);
  --nav-indicator-bg: var(--nav-indicator-bg-dark);
  --nav-indicator-border: var(--nav-indicator-border-dark);
  --nav-indicator-shadow: var(--nav-indicator-shadow-dark);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

.site-header {
  height: var(--header-h);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.brand__logo {
  height: var(--logo-height) !important;
  width: auto;
}

.brand__logo--sectur {
  height: var(--aux-logo-height) !important;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.nav.nav--dynamic a {
  color: var(--nav-link-color);
}

.nav.nav--dynamic a.is-active {
  color: var(--nav-active-color);
}

.nav-indicator {
  background: var(--nav-indicator-bg) !important;
  border: 1px solid var(--nav-indicator-border);
  box-shadow: var(--nav-indicator-shadow) !important;
}

.theme-btn,
.contact-card,
.cookie-banner__inner,
.modal__panel,
.site-footer,
.widget-shell,
.iframe-shell,
.hero__card,
.card,
.card-glass {
  box-shadow: var(--shadow);
}

.btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: var(--btn-primary-text);
  border-color: color-mix(in oklab, var(--brand-700), transparent 15%);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
}

.btn--ghost,
.btn--outline {
  border-color: color-mix(in oklab, var(--brand), transparent 70%);
}

.muted,
.section__head p,
.contact-card__body p,
.site-footer p,
.cookie-banner__inner p {
  color: var(--muted);
}

#heroVideo {
  filter: var(--hero-video-filter);
}

@media (max-width: 980px) {
  .brand__logo {
    height: var(--logo-height-mobile) !important;
  }

  .brand__logo--sectur {
    height: var(--aux-logo-height-mobile) !important;
  }
}


/* ===================== Fondo premium reusable ===================== */
:root {
  --font-display: var(--font-sans);
  --bg-detail-1-light: color-mix(in oklab, var(--brand-light), white 80%);
  --bg-detail-2-light: color-mix(in oklab, var(--brand-600-light), white 86%);
  --bg-detail-3-light: color-mix(in oklab, var(--brand-700-light), white 90%);
  --bg-detail-1-dark: color-mix(in oklab, var(--brand-dark), transparent 78%);
  --bg-detail-2-dark: color-mix(in oklab, var(--brand-600-dark), transparent 82%);
  --bg-detail-3-dark: color-mix(in oklab, var(--brand-700-dark), transparent 86%);
  --grid-size: 34px;
  --grid-line-light: rgba(18, 18, 18, .055);
  --grid-line-dark: rgba(255, 255, 255, .055);
  --surface-border-light: rgba(18, 18, 18, .08);
  --surface-border-dark: rgba(255, 255, 255, .10);
  --surface-glass-light: rgba(255, 255, 255, .56);
  --surface-glass-dark: rgba(18, 22, 30, .52);
  --surface-blur: 16px;
  --fx-shadow-soft: 0 18px 55px rgba(15, 23, 42, .10);
  --fx-shadow-strong: 0 24px 70px rgba(15, 23, 42, .16);
  --fx-shadow-strong-dark: 0 28px 80px rgba(0, 0, 0, .42);
  --fx-hover-lift: translateY(-6px) scale(1.01);
}

html[data-theme="light"],
html[data-theme="Light"],
:root {
  --bg-detail-1: var(--bg-detail-1-light);
  --bg-detail-2: var(--bg-detail-2-light);
  --bg-detail-3: var(--bg-detail-3-light);
  --grid-line: var(--grid-line-light);
  --surface-border: var(--surface-border-light);
  --surface-glass: var(--surface-glass-light);
  --fx-shadow-elevated: var(--fx-shadow-strong);
}

html[data-theme="dark"],
html[data-theme="Dark"] {
  --bg-detail-1: var(--bg-detail-1-dark);
  --bg-detail-2: var(--bg-detail-2-dark);
  --bg-detail-3: var(--bg-detail-3-dark);
  --grid-line: var(--grid-line-dark);
  --surface-border: var(--surface-border-dark);
  --surface-glass: var(--surface-glass-dark);
  --fx-shadow-elevated: var(--fx-shadow-strong-dark);
}

html {
  --pointer-x: 50vw;
  --pointer-y: 18vh;
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(44rem 44rem at 8% 10%, var(--bg-detail-1), transparent 62%),
    radial-gradient(36rem 36rem at 88% 14%, var(--bg-detail-2), transparent 58%),
    radial-gradient(42rem 42rem at 50% 100%, var(--bg-detail-3), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    radial-gradient(1100px 560px at 50% -8%, color-mix(in oklab, var(--brand), transparent 88%), transparent 65%),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), rgba(0, 0, 0, .38) 45%, transparent 90%);
  opacity: .95;
}

body::after {
  background:
    radial-gradient(520px 320px at var(--pointer-x) var(--pointer-y), color-mix(in oklab, var(--brand), transparent 86%), transparent 72%),
    radial-gradient(420px 260px at calc(var(--pointer-x) + 12%) calc(var(--pointer-y) + 18%), color-mix(in oklab, var(--brand-600), transparent 92%), transparent 74%);
  opacity: .9;
  transition: opacity .35s ease;
}

html:not(.has-pointer-glow) body::after {
  display: none;
}

#particlesBg,
.particles-bg {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: siteAuroraFloat 22s ease-in-out infinite;
  }
}

@keyframes siteAuroraFloat {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0; }
  50% { background-position: 1.5% -1.2%, -1.2% 1%, 0 1.2%, 0 0; }
}

h1, h2, h3, h4, h5, h6,
.hero h1,
.section__head h2 {
  font-family: var(--font-display);
}

.site-header {
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

.nav.nav--dynamic {
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: color-mix(in oklab, var(--surface-glass), transparent 10%);
  backdrop-filter: blur(var(--surface-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(160%);
  box-shadow: var(--fx-shadow-soft);
}

.nav.nav--dynamic a,
.nav-panel__links a {
  transition: transform .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nav.nav--dynamic a:hover,
.nav-panel__links a:hover {
  transform: translateY(-1px);
}

.theme-btn,
.nav-toggle,
.sound-toggle,
.redesSociales a,
.nav-close {
  backdrop-filter: blur(var(--surface-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(160%);
  box-shadow: var(--fx-shadow-soft);
}

.hero__inner {
  position: relative;
}

.hero__inner::before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 32px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .18), transparent 72%);
  filter: blur(20px);
  z-index: -1;
}

.widget-wrap,
.magazine-wrap,
.device-frame,
.contact-card,
.iframe-wrap,
.veo-slider__viewport,
.legal-modal__dialog,
.site-footer {
  background: color-mix(in oklab, var(--surface-glass), transparent 6%);
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  box-shadow: var(--fx-shadow-soft);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}

.widget-wrap:hover,
.magazine-wrap:hover,
.device-frame:hover,
.contact-card:hover,
.iframe-wrap:hover,
.veo-slider__viewport:hover {
  transform: var(--fx-hover-lift);
  box-shadow: var(--fx-shadow-elevated);
  border-color: color-mix(in oklab, var(--brand), transparent 72%);
}

.btn,
.footer-link,
.pill,
.contact-card__actions .btn {
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, filter .22s ease;
}

.btn:hover,
.footer-link:hover,
.pill:hover,
.contact-card__actions .btn:hover,
.theme-btn:hover,
.nav-toggle:hover,
.sound-toggle:hover,
.redesSociales a:hover {
  transform: translateY(-2px);
  box-shadow: var(--fx-shadow-elevated);
}

.btn--primary,
.btn--outline,
.btn--ghost,
.trial-btn {
  position: relative;
  overflow: hidden;
}

.btn--primary::before,
.btn--outline::before,
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .18) 40%, transparent 80%);
  transform: translateX(-115%);
  transition: transform .6s ease;
}

.btn--primary:hover::before,
.btn--outline:hover::before,
.btn--ghost:hover::before {
  transform: translateX(115%);
}

.veo-slide,
.slider__viewport,
.about__media,
.device-frame {
  overflow: hidden;
}

.veo-slide__img,
.slider__track img,
.about__media img,
.about__slider img {
  transition: transform .7s ease, filter .35s ease;
  transform-origin: center center;
}

.veo-slide:hover .veo-slide__img img,
.about__media:hover img img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.02);
}

.section__head h2 {
  letter-spacing: -.03em;
}

@media (max-width: 980px) {
  body::before {
    opacity: .72;
  }

  .widget-wrap:hover,
  .magazine-wrap:hover,
  .device-frame:hover,
  .contact-card:hover,
  .iframe-wrap:hover,
  .about__slider:hover,
  .veo-slider__viewport:hover,
  .slider__viewport:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  body::after,
  .btn,
  .footer-link,
  .pill,
  .theme-btn,
  .nav-toggle,
  .sound-toggle,
  .redesSociales a,
  .widget-wrap,
  .magazine-wrap,
  .device-frame,
  .contact-card,
  .iframe-wrap,
  .about__slider,
  .veo-slider__viewport,
  .slider__viewport,
  .veo-slide__img,
  .slider__track img,
  .about__media img,
  .about__slider img {
    animation: none !important;
    transition: none !important;
  }
}

/* Override slider surface on Nosotros page */
.about__slider,
.about__slider .slider,
.about__slider .slider__viewport {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ===================== Ajustes extra modo oscuro ===================== */
html[data-theme="light"],
html[data-theme="Light"] {
  color-scheme: light;
}

html[data-theme="dark"],
html[data-theme="Dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] .theme-btn,
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .nav-panel,
html[data-theme="dark"] .cookie-banner__inner,
html[data-theme="dark"] .legal-modal__dialog,
html[data-theme="dark"] .page-loader__inner,
html[data-theme="dark"] .magazine-toolbar,
html[data-theme="dark"] .mt-mega__menu,
html[data-theme="dark"] .mt-mega__viewer,
html[data-theme="dark"] .form,
html[data-theme="dark"] .info-block,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .site-footer {
  background-color: color-mix(in oklab, var(--card), #000 6%) !important;
  border-color: color-mix(in oklab, var(--fg), transparent 88%) !important;
}

html[data-theme="dark"] .widget-wrap,
html[data-theme="dark"] .iframe-wrap,
html[data-theme="dark"] .veo-slider__viewport,
html[data-theme="dark"] .slider__viewport,
html[data-theme="dark"] .device-frame,
html[data-theme="dark"] .mt-mega__frameWrap {
  background-color: color-mix(in oklab, var(--card), #000 10%) !important;
  border-color: color-mix(in oklab, var(--fg), transparent 88%) !important;
}

html[data-theme="dark"] .widget-frame,
html[data-theme="dark"] .magazine-frame,
html[data-theme="dark"] .iframe-wrap iframe,
html[data-theme="dark"] .mt-mega__frame {
  background-color: var(--bg-2) !important;
}

html[data-theme="dark"] .iframe-wrap iframe,
html[data-theme="dark"] .widget-frame {
  filter: brightness(.92) contrast(.98);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: color-mix(in oklab, var(--card), #000 4%) !important;
  color: var(--fg) !important;
  border-color: color-mix(in oklab, var(--fg), transparent 84%) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: color-mix(in oklab, var(--fg), transparent 50%) !important;
}

html[data-theme="dark"] option,
html[data-theme="dark"] optgroup {
  background-color: var(--card);
  color: var(--fg);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: var(--brand);
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px color-mix(in oklab, var(--card), #000 4%) inset;
  transition: background-color 99999s ease-in-out 0s;
}