/* =========================================================================
   FORTIA SEGURIDAD - sistema de diseno
   -------------------------------------------------------------------------
   Esta hoja contiene solo tres cosas:
     1. Las @font-face de Geist auto-hospedadas.
     2. Los tokens de diseno como variables CSS.
     3. Los pocos componentes que Elementor no expresa con sus controles.

   TODO lo demas -colores, tipografias, espaciados, tarjetas, botones,
   acordeones- se edita desde Elementor. Los colores y tipografias globales
   del kit apuntan a los mismos valores declarados aqui abajo, de modo que
   cambiar un token en Ajustes del sitio de Elementor basta para propagarlo.
   ========================================================================= */

/* 1 ------------------------------------------------------------ Tipografias */

/* Geist - latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist - latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono - latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono - latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2 ----------------------------------------------------------------- Tokens */

:root {
  /* Colores */
  --fx-brand:        #1b2a44; /* Azul marino Fortia (del logo) */
  --fx-brand-dark:   #131f33; /* Superficie oscura / hover del brand */
  --fx-brand-soft:   #eef1f6; /* Fondo tenue con tinte de marca */
  --fx-ink:          #171717; /* Titulares */
  --fx-text:         #454545; /* Cuerpo de texto */
  --fx-muted:        #6e6e6e; /* Texto secundario */
  --fx-line:         #e4e4e4; /* Lineas y bordes */
  --fx-bg:           #ffffff; /* Lienzo */
  --fx-bg-subtle:    #fafafa; /* Secciones alternas */
  --fx-on-dark:      #ffffff;
  --fx-on-dark-soft: rgba(255, 255, 255, 0.72);
  --fx-line-dark:    rgba(255, 255, 255, 0.16);
  --fx-focus:        #0068d6;

  /* Tipografias */
  --fx-font-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --fx-font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Espaciados */
  --fx-space-2xs: 4px;
  --fx-space-xs:  8px;
  --fx-space-sm:  12px;
  --fx-space-md:  16px;
  --fx-space-lg:  24px;
  --fx-space-xl:  32px;
  --fx-space-2xl: 48px;
  --fx-space-3xl: 72px;
  --fx-space-4xl: 104px;

  /* Radios */
  --fx-radius-sm:   5px;
  --fx-radius-md:   8px;
  --fx-radius-lg:   12px;
  --fx-radius-full: 9999px;

  /* Ancho de contenido. Ojo: el kit de Elementor guarda 1112, no 1160, porque
     Elementor mide el contenedor SIN los 24px de margen lateral mientras que
     este token los incluye. 1112 + 24 + 24 = 1160. */
  --fx-content-max: 1160px;

  /* Sombras: los bordes son sombras de 1px */
  --fx-shadow-border: 0 0 0 1px var(--fx-line);
  --fx-shadow-card:   0 0 0 1px var(--fx-line), 0 2px 8px rgba(0, 0, 0, 0.04);
  --fx-shadow-lift:   0 0 0 1px var(--fx-line), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 3 --------------------------------------------------------------- Base */

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Elementor no expone text-wrap; sin esto los titulares parten mal. */
h1, h2, h3, h4,
.elementor-heading-title {
  text-wrap: balance;
}

p,
.elementor-widget-text-editor p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--fx-focus);
  outline-offset: 2px;
  border-radius: var(--fx-radius-sm);
}

/* Enlace de salto al contenido: obligatorio para navegacion por teclado. */
.fx-skip-link {
  position: absolute;
  left: var(--fx-space-md);
  top: -100px;
  z-index: 100;
  padding: var(--fx-space-xs) var(--fx-space-md);
  background: var(--fx-brand);
  color: var(--fx-on-dark);
  border-radius: var(--fx-radius-md);
  font-weight: 500;
  text-decoration: none;
}

.fx-skip-link:focus {
  top: var(--fx-space-md);
  color: var(--fx-on-dark);
}

/* 4 ---------------------------------------------------------- Componentes */

/* Los iconos del sistema son de trazo, no de relleno.

   Elementor colorea los SVG aplicando `fill` con un selector muy especifico
   (.elementor-NN .elementor-element-XXXX.elementor-view-stacked ...), imposible
   de superar sin !important. Solo se fuerza el relleno: el color del icono lo
   sigue mandando el control "Color secundario" de Elementor, porque tambien
   fija `color` en el envoltorio y el trazo lo hereda con currentColor. */
.elementor-widget.fx-icon .elementor-icon svg {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pildoras de sectores. Cada una es un widget de titulo editable en Elementor;
   aqui vive solo la FORMA, para no repetirla ocho veces.

   La tipografia y el color NO se declaran aqui a proposito: los pone el widget
   con los estilos globales "Mono pequena" y "Apagado". El widget de titular de
   Elementor hereda por defecto la tipografia primaria (56px), asi que si algun
   dia una pildora aparece gigante, es que perdio su tipografia global. */
.fx-pill {
  padding: 6px 14px;
  border-radius: var(--fx-radius-full);
  box-shadow: var(--fx-shadow-border);
  background: var(--fx-bg);
}

/* Enlace con flecha de las tarjetas de servicio.

   Igual que las pildoras: la tipografia y el color los pone el widget con el
   estilo global "Enlace / boton". Aqui solo la disposicion y la flecha, que se
   dibuja con una mascara para que siga al color del texto. */
.fx-arrow-link a,
a.fx-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2xs);
  text-decoration: none;
}

.fx-arrow-link a::after,
a.fx-arrow-link::after {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fx-arrow-link a:hover::after,
a.fx-arrow-link:hover::after {
  transform: translateX(3px);
}

/* Linea de tiempo del proceso (pagina Nosotros).
   El numero y la linea de union son pseudo-elementos: Elementor no los produce.
   Cada paso es un contenedor con la clase .fx-step dentro de uno .fx-timeline. */
.fx-timeline {
  counter-reset: fx-paso;
}

.fx-step {
  counter-increment: fx-paso;
  position: relative;
  padding-left: 72px !important;
}

.fx-step::before {
  content: counter(fx-paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: var(--fx-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--fx-brand);
  background: var(--fx-brand-soft);
  border-radius: var(--fx-radius-full);
}

.fx-step::after {
  content: '';
  position: absolute;
  left: 23.5px;
  top: 56px;
  bottom: calc(-1 * var(--fx-space-xl) + 8px);
  width: 1px;
  background: var(--fx-line);
}

.fx-timeline > .fx-step:last-child::after {
  display: none;
}

/* WPForms limita el ancho de cada campo segun su tamano (60% en "medium").
   El diseno los quiere ocupando todo el ancho de la tarjeta. */
.wpforms-container .wpforms-field-medium,
.wpforms-container .wpforms-field-large,
.wpforms-container input[type='text'],
.wpforms-container input[type='email'],
.wpforms-container input[type='tel'],
.wpforms-container select,
.wpforms-container textarea {
  max-width: 100%;
  width: 100%;
}

/* Marcas de la tabla comparativa (pagina Servicios). */
.fx-yes { color: var(--fx-brand); }
.fx-no  { color: var(--fx-line); }

/* Cita destacada: el nombre va en negrita sobre su propia linea. */
.fx-quote-author strong {
  display: block;
  color: var(--fx-ink);
  font-weight: 600;
}

/* Altura minima de boton: Elementor no expone min-height en el widget. */
.fx-btn .elementor-button {
  min-height: 44px;
}

/* El CTA de la cabecera se pega al borde derecho, tanto cuando comparte fila
   con el logo como cuando la estrechez lo hace saltar a la siguiente. */
.fx-header-cta {
  margin-left: auto;
}

/* Bajo 880px la navegacion baja a su propia fila, igual que en el diseno
   original. Elementor no permite ordenar elementos flex por breakpoint, asi
   que la regla vive aqui. */
@media (max-width: 879px) {
  .fx-header-nav {
    order: 3;
    width: 100%;
  }
}

/* Linea de datos de una entrada del blog (fecha y categoria). */
.fx-post-meta {
  font-family: var(--fx-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fx-muted);
  margin: 0;
}

.fx-post-meta a {
  color: var(--fx-brand);
}

/* Cuerpo de una entrada. Elementor no compone prosa larga, asi que el ritmo
   vertical se define aqui. La medida de lectura NO: se fija con el control de
   ancho del propio widget, porque el max-width de Elementor gana a esta hoja. */
.fx-prose h2 {
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: var(--fx-space-2xl) 0 var(--fx-space-sm);
}

.fx-prose h3 {
  margin: var(--fx-space-xl) 0 var(--fx-space-xs);
}

.fx-prose p,
.fx-prose ul,
.fx-prose ol {
  margin-bottom: var(--fx-space-lg);
}

.fx-prose ul,
.fx-prose ol {
  padding-left: var(--fx-space-lg);
}

.fx-prose li {
  margin-bottom: var(--fx-space-xs);
}

.fx-prose > *:last-child {
  margin-bottom: 0;
}

/* Solo para lectores de pantalla. */
.fx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}