/* =========================================================
   OMNIA — BASE
   Tokens, reset ligero y utilidades comunes a todas las
   plantillas del theme. Cada plantilla añade su propia hoja
   encima (single-portfolio.css, etc.).

   Los valores salen de los ajustes globales de Elementor
   para que el resultado sea idéntico al maquetado actual.
   ========================================================= */

:root {
  /* Colores globales (Elementor: Principal / Secundario / Texto / Énfasis) */
  --omnia-primary: #2a2aca;
  --omnia-secondary: #ffffff;
  --omnia-text: #ffffff;
  --omnia-accent: #fb4601;

  /* Colores personalizados */
  --omnia-black: #000000;
  --omnia-grey: #bebebe;
  --omnia-grey-dark: #292929;
  --omnia-blue: #0000ff;
  --omnia-pink: #f68ecd;
  --omnia-yellow: #f7bd01;

  /* Derivados de uso frecuente */
  --omnia-muted: #b4b4b4;
  --omnia-surface: #101010;
  --omnia-surface-2: #1a1a1a;
  --omnia-line: rgba(255, 255, 255, 0.2);
  --omnia-line-soft: rgba(255, 255, 255, 0.1);
  --omnia-primary-hover: #1c1c9b;

  /* Tipografía
     H1 .......... Blauer 80 Medium Uppercase
     Títulos ..... Matter 20 SemiBold
     Texto ....... Matter 16 Regular */
  --omnia-font-display: "Blauer", "Matter", ui-sans-serif, system-ui, sans-serif;
  --omnia-font-body: "Matter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --omnia-fw-regular: 400;
  --omnia-fw-medium: 500;
  --omnia-fw-semibold: 600;

  --omnia-fs-xs: 0.75rem;
  --omnia-fs-sm: 0.875rem;
  --omnia-fs-base: 1rem;
  --omnia-fs-md: 1.25rem;
  --omnia-fs-lg: 1.5rem;
  --omnia-fs-xl: 2rem;
  --omnia-fs-2xl: 2.5rem;
  --omnia-fs-3xl: 4rem;

  /* Espaciado */
  --omnia-space-1: 0.25rem;
  --omnia-space-2: 0.5rem;
  --omnia-space-3: 0.75rem;
  --omnia-space-4: 1rem;
  --omnia-space-5: 1.5rem;
  --omnia-space-6: 2rem;
  --omnia-space-7: 3rem;
  --omnia-space-8: 4rem;
  --omnia-space-9: 6rem;

  /* Layout (Elementor: container 1340px) */
  --omnia-container: 1340px;
  --omnia-gutter: 1.25rem;
  --omnia-radius-sm: 4px;
  --omnia-radius: 8px;
  --omnia-radius-lg: 16px;

  --omnia-transition: 0.3s ease;
}

/* ---------- BLAUER ----------
   Solo para el H1.

   Cada src lista primero el archivo del theme y después el de la biblioteca de
   medios. El navegador usa el primero que encuentre, así que funciona igual
   antes y después de copiar las fuentes a /assets/fonts/. Cuando estén todas
   copiadas, se pueden borrar las rutas de /uploads/.

   OJO: de Blauer solo hay subido el peso regular. El H1 pide Medium; con el
   rango 400 500 se resuelve al regular en vez de dejar que el navegador
   engorde el trazo, que a 80 px se nota. Si conseguís el archivo Medium,
   descomentad el segundo bloque. */
@font-face {
  font-family: "Blauer";
  src: url("../fonts/Blauer-Regular.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/BlauerNue-Regular.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/BlauerNue-Regular.woff") format("woff");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blauer";
  src: url("../fonts/Blauer-Italic.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/BlauerNue-Regular_Italic.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/BlauerNue-Regular_Italic.woff") format("woff");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

/* Peso Medium real de Blauer. Descomentar cuando exista el archivo y cambiar
   el rango del bloque de arriba a font-weight: 400.
@font-face {
  font-family: "Blauer";
  src: url("../fonts/Blauer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------- MATTER ----------
   Títulos y texto corrido.
   Los TTF de la biblioteca funcionan, pero pesan. Al copiar los woff2 a
   /assets/fonts/ el navegador los prefiere y deja de pedir los TTF. */
@font-face {
  font-family: "Matter";
  src: url("../fonts/Matter-Regular.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/Matter-Regular_9_11zon.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("../fonts/Matter-Medium.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/Matter-Medium_7_11zon.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("../fonts/Matter-SemiBold.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/Matter-SemiBold_11_11zon.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("../fonts/Matter-Bold.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/Matter-Bold_1_11zon.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("../fonts/Matter-Italic.woff2") format("woff2"),
       url("/wp-content/uploads/2025/12/Matter-RegularItalic_10_11zon.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Breakpoints activos en Elementor: mobile 767 / tablet 1024 / laptop 1366 */

.omnia-container {
  width: 100%;
  max-width: var(--omnia-container);
  margin-inline: auto;
  padding-inline: var(--omnia-gutter);
}

.omnia-section { padding-block: clamp(3rem, 7vw, var(--omnia-space-9)); }

.omnia-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Etiqueta con la insignia de Omnia ("· Contacta con nosotros") */
.omnia-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--omnia-space-3);
  margin: 0 0 var(--omnia-space-5);
  font-size: var(--omnia-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
}

.omnia-eyebrow__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 7px 9px;
  border-radius: var(--omnia-radius-sm);
  background: var(--omnia-primary);
  color: #fff;
  overflow: hidden;
}

/* Sin esto el SVG sale a su tamaño intrínseco y se come la pantalla. */
.omnia-eyebrow__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Flecha diagonal de los botones, replicada sin SVG */
.omnia-arrow {
  display: inline-block;
  width: 11px;
  height: 10px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 100%, 8% 88%, 78% 18%, 0 18%, 0 0, 100% 0, 100% 100%, 82% 100%, 82% 26%, 12% 96%);
}

.omnia-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--omnia-space-3);
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--omnia-line);
  border-radius: var(--omnia-radius);
  background: transparent;
  color: var(--omnia-text);
  font-family: var(--omnia-font-body);
  font-size: var(--omnia-fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--omnia-transition), color var(--omnia-transition), border-color var(--omnia-transition);
}
.omnia-btn:hover,
.omnia-btn:focus-visible { background: #fff; border-color: #fff; color: #000; }

.omnia-btn--solid { background: var(--omnia-primary); border-color: var(--omnia-primary); }
.omnia-btn--solid:hover { background: var(--omnia-accent); border-color: var(--omnia-accent); color: #fff; }

/* Aparición al hacer scroll (activada desde JS con IntersectionObserver) */
[data-omnia-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-omnia-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-omnia-reveal] { opacity: 1; transform: none; transition: none; }
}