/* =============================================
       WEXON — TIPOGRAFÍA PERSONALIZADA
    ============================================= */

    /* Genova — Display / Títulos */
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova-Thin.otf') format('opentype');
      font-weight: 100;
      font-style: normal;
    }
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova-ThinItalic.otf') format('opentype');
      font-weight: 100;
      font-style: italic;
    }
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova-Italic.otf') format('opentype');
      font-weight: 400;
      font-style: italic;
    }
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
    }
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova-MediumItalic.otf') format('opentype');
      font-weight: 500;
      font-style: italic;
    }
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova-Black.otf') format('opentype');
      font-weight: 900;
      font-style: normal;
    }
    @font-face {
      font-family: 'Genova';
      src: url('/assets/fonts/Genova-BlackItalic.otf') format('opentype');
      font-weight: 900;
      font-style: italic;
    }

    /* Coolvetica — Body / UI */
    @font-face {
      font-family: 'Coolvetica';
      src: url('/assets/fonts/coolvetica_rg.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: 'Coolvetica';
      src: url('/assets/fonts/coolvetica_rg_it.otf') format('opentype');
      font-weight: 400;
      font-style: italic;
    }
    @font-face {
      font-family: 'Coolvetica';
      src: url('/assets/fonts/coolvetica_condensed_rg.otf') format('opentype');
      font-weight: 300;
      font-style: normal;
    }
    @font-face {
      font-family: 'Coolvetica Compressed';
      src: url('/assets/fonts/coolvetica_compressed_hv.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
    }
    @font-face {
      font-family: 'Coolvetica Crammed';
      src: url('/assets/fonts/coolvetica_crammed_rg.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }

    /* =============================================
       WEXON — VARIABLES DE IDENTIDAD
       Paleta oficial: #002848 | #1E3A53 | #005DFF | #2C313D | #F4F6F8
    ============================================= */
    :root {
      --wx-navy:       #002848;
      --wx-navy-mid:   #1E3A53;
      --wx-blue:       #005DFF;
      --wx-dark:       #2C313D;
      --wx-light:      #F4F6F8;
      --wx-white:      #FFFFFF;
      --wx-blue-light: rgba(0, 93, 255, 0.12);
      --wx-blue-glow:  rgba(0, 93, 255, 0.25);
      --font-display:  'Genova', sans-serif;
      --font-body:     'Coolvetica', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--wx-light);
      color: var(--wx-dark);
      overflow-x: hidden;
    }

    /* =============================================
       NAV
    ============================================= */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: rgba(44, 49, 61, 0.98);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0, 93, 255, 0.2);
      padding: 0 40px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    nav .nav-logo img { height: 34px; display: block; }
    nav .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }
    nav .nav-links a {
      text-decoration: none;
      color: rgba(255,255,255,0.75);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: color 0.2s;
    }
    nav .nav-links a:hover { color: var(--wx-blue); }
    nav .nav-cta {
      background: var(--wx-blue);
      color: #fff;
      border: none;
      padding: 9px 22px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.05em;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, transform 0.15s;
    }
    nav .nav-cta:hover { background: #0048cc; transform: translateY(-1px); }

    /* =============================================
       HERO
    ============================================= */
    #hero {
      min-height: 100vh;
      background: var(--wx-navy);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 100px 80px 80px;
    }
	/* Patrón de puntos conectados — isotipo Wexon */
	#hero::before {
	  content: '';
	  position: absolute;
	  top: -10%;
	  right: -5%;
	  width: 70%;
	  height: 120%;
	  background-image: url('/assets/img/patron-wexon.png');
	  background-size: 600px auto;
	  background-repeat: repeat;
	  mix-blend-mode: screen;
	  opacity: 0.18;
	  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 75% 50%, black 20%, transparent 75%);
	  mask-image: radial-gradient(ellipse 80% 80% at 75% 50%, black 20%, transparent 75%);
	  pointer-events: none;
	}
    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      max-width: 1280px;
      margin: 0 auto;
      width: 100%;
    }
    .hero-content { position: relative; z-index: 1; }
    .hero-eyebrow {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--wx-blue);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 2px;
      background: var(--wx-blue);
    }
    .hero-headline {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(32px, 4.5vw, 58px);
      line-height: 0.95;
      color: var(--wx-white);
      text-transform: uppercase;
      margin-bottom: 28px;
      letter-spacing: -0.01em;
    }
    .hero-headline .accent { color: var(--wx-blue); }
    .hero-sub {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255,255,255,0.65);
      max-width: 480px;
      margin-bottom: 40px;
    }
    .hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
    .btn-primary {
      background: var(--wx-blue);
      color: #fff;
      text-decoration: none;
      padding: 14px 32px;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: background 0.2s, transform 0.15s;
      display: inline-block;
    }
    .btn-primary:hover { background: #0048cc; transform: translateY(-2px); }
    .btn-ghost {
      border: 1px solid rgba(255,255,255,0.3);
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      padding: 14px 32px;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: border-color 0.2s, color 0.2s;
      display: inline-block;
    }
    .btn-ghost:hover { border-color: var(--wx-blue); color: var(--wx-blue); }
    
	/* Hero image placeholder */
	.hero-visual {
	  position: relative;
	  z-index: 1;
	}
	.hero-img-box {
	  width: 100%;
	  margin: 0 auto;
	  height: 65vh;  /* 80% del alto de la ventana */
	  /* O usa min-height para responsividad: */
	  /* min-height: 500px; */
	  /* height: auto; */
	  position: relative;
	  overflow: hidden;
	  border-radius: 10px;
	}
	.hero-img-box img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;  /* Asegura que cubra todo el espacio */
	  object-position: center; /* Centra la imagen */
	  display: block;
	}
    .hero-stats {
      display: flex;
      gap: 40px;
      margin-top: 56px;
      padding-top: 40px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .stat-item .stat-num {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 32px;
      color: var(--wx-blue);
      display: block;
      letter-spacing: -0.02em;
    }
    .stat-item .stat-label {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.45);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    /* =============================================
       SECCIONES GENERALES
    ============================================= */
    section { padding: 100px 80px; }
    .section-inner {
      max-width: 1280px;
      margin: 0 auto;
    }
    .section-tag {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--wx-blue);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .section-tag::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--wx-blue);
    }
    .section-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(24px, 3vw, 40px);
      text-transform: uppercase;
      line-height: 1.0;
      letter-spacing: -0.01em;
    }
    .section-title.light { color: var(--wx-white); }
    .section-title.dark { color: var(--wx-navy); }
    .section-lead {
      font-size: 16px;
      line-height: 1.75;
      max-width: 640px;
    }
    .section-lead.muted { color: rgba(255,255,255,0.65); }
    .section-lead.dark { color: #455; color: #445566; }

    /* =============================================
   02 — QUIÉNES SOMOS
	============================================= */
	#quienes {
		background: var(--wx-light);
		padding: 100px clamp(20px, 5vw, 60px) 40px; /* ← bottom de 60px a 40px */
	}
	#quienes .section-inner {
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 40px; /* ← gap de 60px a 40px */
	}

	/* Grid principal */
	.quienes-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 80px;
		align-items: center;
	}

	/* Columna izquierda */
	.quienes-left .section-tag.with-dash {
		display: inline-flex;
		align-items: center;
		gap: 14px;
		font-size: 0.74rem;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: var(--wx-blue);
		font-weight: 700;
		margin-bottom: 22px;
		font-family: var(--font-display);
	}
	.quienes-left .section-tag.with-dash::before {
		content: "";
		width: 38px;
		height: 2px;
		background: var(--wx-blue);
	}
	.quienes-title {
		font-family: var(--font-display);
		font-size: clamp(1.9rem, 3.4vw, 2.6rem);
		font-weight: 900;
		line-height: 1.05;
		margin: 0 0 26px;
		letter-spacing: -0.5px;
	}
	.quienes-title .line-1 {
		display: block;
		color: var(--wx-navy);
	}
	.quienes-title .line-2 {
		display: block;
		color: var(--wx-blue);
	}
	.quienes-left p {
		font-family: var(--font-body);
		font-size: 0.92rem;
		line-height: 1.75;
		color: #5a6a7a;
		margin: 0 0 14px;
	}

	/* Chevron cards */
	.nombre-decode {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-top: 30px;
		border-top: 1px solid #e5e9ed;
	}
	.chevron-card {
		display: flex;
		align-items: stretch;
		min-height: 66px;
		border-bottom: 1px solid #e5e9ed;
		transition: background 0.25s ease;
	}
	.chevron-card:hover {
		background: #fafbfc;
	}
	.chevron-card:hover .chev-letter {
		transform: translateX(3px);
	}
	.chev-letter {
		background: var(--wx-navy);
		color: var(--wx-white);
		min-width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-display);
		font-size: 1.45rem;
		font-weight: 900;
		flex-shrink: 0;
		letter-spacing: 1px;
		clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
		margin-right: 6px;
		transition: transform 0.3s ease;
	}
	.chev-meaning {
		padding: 12px 22px 12px 8px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		font-family: var(--font-body);
		font-size: 0.82rem;
		line-height: 1.5;
		color: #5a6a7a;
		flex: 1;
	}
	.chev-meaning strong {
		font-family: var(--font-display);
		color: var(--wx-navy);
		font-weight: 700;
		font-size: 0.9rem;
		display: block;
		margin-bottom: 2px;
	}

	/* Stats */
	.quienes-stats {
		display: flex;
		align-items: center;
		gap: 0;
		margin-top: 32px;
		padding-top: 28px;
		border-top: 2px solid var(--wx-navy);
	}
	.qs-item {
		flex: 1;
	}
	.qs-num {
		font-family: var(--font-display);
		font-size: 1.6rem;
		font-weight: 900;
		color: var(--wx-navy);
		line-height: 1;
		margin-bottom: 4px;
	}
	.qs-label {
		font-family: var(--font-body);
		font-size: 0.75rem;
		color: #7a9ab8;
		line-height: 1.4;
	}
	.qs-sep {
		width: 1px;
		height: 36px;
		background: #dde4ed;
		margin: 0 24px;
		flex-shrink: 0;
	}

	/* Columna derecha */
	.quienes-right {
		position: relative;
		min-height: 480px;
	}
	.quienes-dots {
		position: absolute;
		width: 100px;
		height: 90px;
		background-image: radial-gradient(circle, var(--wx-blue) 1.5px, transparent 2px);
		background-size: 13px 13px;
		opacity: 0.55;
		z-index: 0;
	}
	.dots-top {
		top: -10px;
		right: 20px;
	}
	.dots-bottom {
		bottom: 30px;
		left: -10px;
	}
		.quienes-img-frame {
		position: relative;
		z-index: 1;
	}
	.quienes-img-box {
		position: relative;
		width: 100%;
		/* height: 480px; */  /* ELIMINA o COMENTA esta línea */
		aspect-ratio: 1/1;  /* ¡NUEVO! Hace la imagen cuadrada (1:1) */
		overflow: hidden;
		/* ELIMINA todo el clip-path: */
		/* clip-path: polygon(50px 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px); */
		border-radius: 0px;  /* Opcional: si quieres esquinas rectas */
		background: var(--wx-navy);
		box-shadow: 0 18px 50px rgba(0, 40, 72, 0.18);
	}
	.quienes-img-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.quienes-img-badge {
		position: absolute;
		bottom: 30px;
		right: -16px;
		background: var(--wx-white);
		padding: 18px 22px;
		box-shadow: 0 12px 30px rgba(0, 40, 72, 0.20);
		display: flex;
		align-items: center;
		gap: 14px;
		z-index: 3;
		max-width: 240px;
		/* ELIMINA este clip-path también para que el badge sea normal: */
		/* clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px)); */
		border-radius: 0px;  /* Badge con esquinas rectas */
	}

	/* Barra de presencia */
	.presencia-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(0, 93, 255, 0.2);
		border-radius: 12px;
		overflow: hidden;
	}
	.presencia-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 22px 32px;
		border-right: 1px solid rgba(0, 93, 255, 0.15);
		color: var(--wx-dark);
		font-size: 0.75rem;
		font-weight: 700;
		font-family: var(--font-display);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		flex: 1;
		text-align: center;
		transition: background 0.2s ease;
	}
	.presencia-item:hover {
		background: rgba(0, 93, 255, 0.04);
	}
	.presencia-item:last-child {
		border-right: none;
	}
	.presencia-item svg {
		width: 18px;
		height: 18px;
		stroke: var(--wx-blue);
		flex-shrink: 0;
	}
	.presencia-item::after {
		content: '';
		width: 24px;
		height: 2px;
		background: var(--wx-blue);
		border-radius: 2px;
	}

	/* Responsive 980px */
	@media (max-width: 980px) {
		.quienes-grid {
			grid-template-columns: 1fr;
			gap: 50px;
		}
		.quienes-right {
			min-height: auto;
		}
		.quienes-img-box {
			height: 380px;
		}
		.presencia-bar {
			flex-wrap: wrap;
		}
		.presencia-item {
			flex: 1 1 calc(50% - 1px);
			font-size: 0.7rem;
			padding: 16px 20px;
		}
		.presencia-item:nth-child(2) {
			border-right: none;
		}
		.quienes-stats {
			gap: 0;
		}
	}

	/* Responsive 560px */
	@media (max-width: 560px) {
		#quienes {
			padding: 70px 20px 30px; /* ← bottom reducido */
		}
		.quienes-grid {
			gap: 40px;
		}
		.quienes-img-box {
			height: 300px;
		}
		.quienes-img-badge {
			right: 0;
			bottom: 16px;
			max-width: 200px;
			padding: 14px 18px;
		}
		.chev-letter {
			min-width: 60px;
			font-size: 1.3rem;
		}
		.chev-meaning {
			padding: 10px 16px 10px 8px;
			font-size: 0.78rem;
		}
		.quienes-stats {
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
		}
		.qs-sep {
			width: 36px;
			height: 1px;
			margin: 0;
		}
		.presencia-item {
			flex: 1 1 100%;
			border-right: none;
			border-bottom: 1px solid rgba(0, 93, 255, 0.15);
		}
		.presencia-item:last-child {
			border-bottom: none;
		} 
	}

	/* Misión y Visión */
	.quienes-mv {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		margin-top: 28px;
		margin-bottom: 32px;
		padding: 24px;
		background: rgba(0, 93, 255, 0.04);
		border-left: 3px solid var(--wx-blue);
		border-radius: 0 6px 6px 0;
	}
	.mv-label {
		font-family: var(--font-display);
		font-size: 0.78rem;
		font-weight: 900;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--wx-blue);
		margin-bottom: 8px;
	}
	.quienes-mv .mv-item p {
		font-family: var(--font-body);
		font-size: 0.78rem;
		line-height: 1.6;
		color: var(--wx-navy);
		margin: 0;
		font-weight: 400;
	}
	@media (max-width: 560px) {
		.quienes-mv {
			grid-template-columns: 1fr;
		}
	}

	

	/* =============================================
	   SERVICIOS Y PRODUCTOS
	============================================= */
	#servicios {
		background: var(--wx-navy);
		padding: 60px clamp(20px, 5vw, 60px) 100px; /* ← top de 100px a 60px */
	}
	#servicios .section-inner {
		max-width: 1280px;
		margin: 0 auto;
	}

	/* Header */
	.servicios-header {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 60px;
		align-items: end;
		margin-bottom: 52px;
	}
	.servicios-header-left .section-tag.with-dash {
		display: inline-flex;
		align-items: center;
		gap: 14px;
		font-size: 0.74rem;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: var(--wx-blue);
		font-weight: 700;
		margin-bottom: 22px;
		font-family: var(--font-display);
	}
	.servicios-header-left .section-tag.with-dash::before {
		content: "";
		width: 38px;
		height: 2px;
		background: var(--wx-blue);
	}
	.servicios-title {
		font-family: var(--font-display);
		font-size: clamp(2rem, 3.8vw, 3.2rem);
		font-weight: 900;
		line-height: 1.05;
		text-transform: uppercase;
		letter-spacing: -0.5px;
		margin: 0;
	}
	.servicios-title .line-1 {
		display: block;
		color: var(--wx-white);
	}
	.servicios-title .line-2 {
		display: block;
		color: var(--wx-blue);
	}
	.servicios-lead {
		font-family: var(--font-body);
		font-size: 0.95rem;
		line-height: 1.8;
		color: #7a9ab8;
		margin: 0;
		padding-bottom: 8px;
	}

	/* Grid */
	.servicios-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	/* Card base */
	.servicio-card {
		background: #1E3A53;
		border-radius: 8px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	.servicio-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
	}

	/* Imagen */
	.card-img-box {
		width: 100%;
		height: 210px;
		overflow: hidden;
		flex-shrink: 0;
	}
	.card-img-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.4s ease;
		filter: brightness(0.88);
	}
	.servicio-card:hover .card-img-box img {
		transform: scale(1.04);
	}

	/* Cuerpo */
	.card-body {
		padding: 28px 26px 30px;
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.card-num {
		font-family: var(--font-display);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 2.5px;
		text-transform: uppercase;
		color: var(--wx-blue);
		margin-bottom: 10px;
	}
	.servicio-card h3 {
		font-family: var(--font-display);
		font-size: 1.15rem;
		font-weight: 900;
		color: var(--wx-white);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		margin: 0 0 12px;
		line-height: 1.15;
	}
	.servicio-card p {
		font-family: var(--font-body);
		font-size: 0.85rem;
		line-height: 1.72;
		color: #7a9ab8;
		margin: 0 0 16px;
	}
	.servicio-card ul {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0;
		margin-top: auto;
		padding-top: 16px;
		border-top: 1px solid rgba(244, 246, 248, 0.07);
	}
	.servicio-card ul li {
		font-family: var(--font-body);
		font-size: 0.8rem;
		color: #7a9ab8;
		display: flex;
		align-items: flex-start;
		gap: 10px;
		line-height: 1.5;
	}
	.servicio-card ul li::before {
		content: "";
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--wx-blue);
		flex-shrink: 0;
		margin-top: 5px;
	}

	/* Card ancha (04) */
	.servicio-card.wide {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: stretch;
		border-radius: 8px;
		overflow: hidden;
	}
	.servicio-card.wide .card-img-box {
		width: 420px;
		min-width: 420px;
		height: auto;
		border-radius: 0;        /* ← agrega esto */
		overflow: hidden;
	}
	.servicio-card.wide .card-img-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		filter: brightness(1);   /* ← sin oscurecimiento */
		transition: transform 0.4s ease;
		border-radius: 0;        /* ← agrega esto */
	}

	/* Responsive 980px */
	@media (max-width: 980px) {
		.servicios-header {
			grid-template-columns: 1fr;
			gap: 20px;
			align-items: start;
		}
		.servicios-grid {
			grid-template-columns: repeat(2, 1fr);
		}
		.servicio-card.wide {
			flex-direction: column;
		}
		.servicio-card.wide .card-img-box {
			width: 100%;
			min-width: 0;
			height: 240px;
		}
		.servicio-card.wide ul {
			grid-template-columns: 1fr;
		}
	}

	/* Responsive 560px */
	@media (max-width: 560px) {
		#servicios {
			padding: 40px 20px 60px;
		}
		.servicios-grid {
			grid-template-columns: 1fr;
		}
		.servicio-card.wide .card-img-box {
			height: 200px;
		}
	}
   
    /* =============================================
       04 — CÓMO TRABAJAMOS
    ============================================= */
    #proceso {
    background: var(--wx-light);
    position: relative;
    overflow: hidden;
	}
	#proceso::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: url('../img/Página 6.png');
		background-repeat: repeat;
		background-size: 650px auto;
		opacity: 0.25;
		pointer-events: none;
		z-index: 0;
	}
	#proceso .section-inner {
		position: relative;
		z-index: 1;
	}
	.proceso-header {
		margin-bottom: 60px;
		max-width: 560px;
	}
	.proceso-header .section-tag {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 16px;
	}
	.proceso-header .section-tag::before {
		content: '';
		display: inline-block;
		width: 28px;
		height: 2px;
		background: var(--wx-blue);
		border-radius: 2px;
	}
	.proceso-steps {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		position: relative;
		gap: 0;
		padding-top: 20px;
	}
	.proceso-steps::before {
		content: '';
		position: absolute;
		top: 56px;
		left: 10%;
		right: 10%;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--wx-blue) 20%, var(--wx-blue) 80%, transparent);
		z-index: 0;
	}
	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0 16px;
		position: relative;
		z-index: 1;
	}
	.step-num {
		width: 72px;
		height: 72px;
		background: var(--wx-navy);
		color: var(--wx-white);
		font-family: var(--font-display);
		font-weight: 800;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		position: relative;
		border: 2px solid var(--wx-blue);
		transition: background 0.25s;
	}
	.step:hover .step-num {
		background: var(--wx-blue);
	}
	.step h4 {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--wx-navy);
		margin-bottom: 10px;
		line-height: 1.3;
	}
	.step p {
		font-size: 13px;
		line-height: 1.65;
		color: #6a7a8a;
	}
    .step-num {
      width: 72px;
      height: 72px;
      background: var(--wx-navy);
      color: var(--wx-white);
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      position: relative;
      border: 2px solid var(--wx-blue);
    }
    .step:hover .step-num {
      background: var(--wx-blue);
    }
    .step h4 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--wx-navy);
      margin-bottom: 10px;
    }
    .step p {
      font-size: 13px;
      line-height: 1.65;
      color: #6a7a8a;
    }

    /* =============================================
   05 — CAPACIDADES
	============================================= */
	#capacidades {
		background: var(--wx-navy);
		padding: 100px clamp(20px, 5vw, 60px) 40px;
		position: relative;
		overflow: hidden;
	}
	#capacidades .section-inner {
		max-width: 1280px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}
	.capacidades-grid {
		display: grid;
		grid-template-columns: 1fr 1.05fr;
		gap: 70px;
		align-items: end;
	}

	/* Columna izquierda */
	.cap-left .section-tag.with-dash {
		display: inline-flex;
		align-items: center;
		gap: 14px;
		font-size: 0.74rem;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: var(--wx-blue);
		font-weight: 700;
		margin-bottom: 22px;
		font-family: var(--font-display);
	}
	.cap-left .section-tag.with-dash::before {
		content: "";
		width: 38px;
		height: 2px;
		background: var(--wx-blue);
	}
	.cap-left .section-title.light {
		font-family: var(--font-display);
		font-size: clamp(1.9rem, 3.6vw, 2.8rem);
		font-weight: 900;
		line-height: 1.05;
		color: var(--wx-white);
		text-transform: uppercase;
		letter-spacing: -0.5px;
		margin: 0 0 22px;
		position: relative;
		padding-bottom: 18px;
	}
	.cap-left .section-title.light::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 60px;
		height: 3px;
		background: var(--wx-blue);
	}
	.cap-left .section-lead.muted {
		font-family: var(--font-body);
		font-size: 0.95rem;
		line-height: 1.75;
		color: rgba(255, 255, 255, 0.65);
		margin: 0 0 40px;
	}

	/* Cap-items con chevron */
	.cap-items {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}
	.cap-item {
		display: flex;
		align-items: flex-start;
		gap: 22px;
		padding-bottom: 22px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.cap-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	.cap-icon {
		width: 64px;
		height: 64px;
		background: var(--wx-blue);
		color: var(--wx-white);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-display);
		font-size: 1.65rem;
		font-weight: 900;
		flex-shrink: 0;
		clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
		transition: transform 0.3s ease;
	}
	.cap-item:hover .cap-icon {
		transform: translateX(4px);
	}
	.cap-content {
		flex: 1;
		padding-top: 4px;
	}
	.cap-item h4 {
		font-family: var(--font-display);
		font-size: 1rem;
		font-weight: 700;
		color: var(--wx-white);
		text-transform: uppercase;
		letter-spacing: 1.5px;
		margin: 0 0 8px;
	}
	.cap-item p {
		font-family: var(--font-body);
		font-size: 0.86rem;
		line-height: 1.65;
		color: rgba(255, 255, 255, 0.6);
		margin: 0;
	}

	/* Columna derecha — Cards 2x2 */
	.cap-right {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
	.cap-sector {
		background: rgba(0, 20, 45, 0.45);
		border: 1px solid rgba(0, 93, 255, 0.18);
		border-radius: 10px;
		padding: 30px 20px;
		transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
		cursor: default;
		position: relative;
		min-height: 230px;
	}
	.cap-sector:hover {
		border-color: var(--wx-blue);
		background: rgba(0, 30, 65, 0.65);
		box-shadow: 0 0 0 1px var(--wx-blue), 0 14px 44px rgba(0, 93, 255, 0.28);
		transform: translateY(-3px);
	}
	.cap-sector-icon {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		border: 1.5px solid var(--wx-blue);
		color: var(--wx-blue);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24px;
		background: transparent;
		transition: background 0.3s;
	}
	.cap-sector:hover .cap-sector-icon {
		background: rgba(0, 93, 255, 0.12);
	}
	.cap-sector-icon svg {
		width: 24px;
		height: 24px;
	}
	.cap-sector h5 {
		font-family: var(--font-display);
		font-size: 1.05rem;
		font-weight: 700;
		color: var(--wx-white);
		text-transform: uppercase;
		letter-spacing: 1.5px;
		margin: 0 0 14px;
	}
	.cap-sector p {
		font-family: var(--font-body);
		font-size: 0.84rem;
		line-height: 1.65;
		color: rgba(255, 255, 255, 0.6);
		margin: 0;
	}

	/* Responsive 05 */
	@media (max-width: 980px) {
		.capacidades-grid {
			grid-template-columns: 1fr;
			gap: 50px;
			align-items: start;
		}
	}
	@media (max-width: 560px) {
		#capacidades {
			padding: 70px 20px 30px;
		}
		.cap-right {
			grid-template-columns: 1fr;
		}
		.cap-icon {
			width: 54px;
			height: 54px;
			font-size: 1.35rem;
		}
		.cap-item {
			gap: 16px;
		}
		.cap-sector {
			min-height: auto;
			padding: 26px 22px;
		}
	}

	/* =============================================
	   06 — INDICADORES
	============================================= */
	#indicadores {
		background: var(--wx-navy);
		padding: 40px clamp(20px, 5vw, 60px) 90px;
		position: relative;
		overflow: hidden;
	}
	#indicadores::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url('/assets/img/patron-moleculas.png');
		background-repeat: repeat;
		background-size: 600px auto;
		opacity: 0.03;
		mix-blend-mode: screen;
		pointer-events: none;
		z-index: 0;
	}
	.indicadores-inner {
		max-width: 1280px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}

	/* Header — sin tag, solo título */
	.ind-header {
		margin-bottom: 48px;
	}
	.ind-title {
		font-family: var(--font-display);
		font-size: clamp(1.9rem, 3.6vw, 2.8rem);
		font-weight: 900;
		line-height: 1.05;
		text-transform: uppercase;
		letter-spacing: -0.5px;
		margin: 0;
	}
	.ind-title .line-1 {
		display: block;
		color: var(--wx-white);
	}
	.ind-title .line-2 {
		display: block;
		color: var(--wx-blue);
	}

	/* KPI Grid */
	.kpi-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 14px;
	}
	.kpi-block {
		background: rgba(0, 20, 45, 0.55);
		border: 1px solid rgba(0, 93, 255, 0.18);
		border-radius: 12px;
		padding: 28px 22px;
		text-align: left;
		transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, transform 0.3s;
		cursor: default;
	}
	.kpi-block:hover {
		border-color: var(--wx-blue);
		background: rgba(0, 30, 65, 0.7);
		box-shadow: 0 0 0 1px var(--wx-blue), 0 12px 36px rgba(0, 93, 255, 0.22);
		transform: translateY(-3px);
	}
	.kpi-icon {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--wx-blue);
		color: var(--wx-white);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 22px;
	}
	.kpi-icon svg {
		width: 22px;
		height: 22px;
	}
	.kpi-value {
		font-family: var(--font-display);
		font-weight: 900;
		font-size: 2rem;
		color: var(--wx-white);
		letter-spacing: -0.5px;
		line-height: 1;
		display: block;
		margin-bottom: 12px;
	}
	.kpi-label {
		font-family: var(--font-body);
		font-size: 0.7rem;
		color: rgba(255, 255, 255, 0.65);
		text-transform: uppercase;
		letter-spacing: 1.5px;
		line-height: 1.4;
		display: block;
	}

	/* Responsive 06 */
	@media (max-width: 980px) {
		.kpi-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	@media (max-width: 700px) {
		#indicadores {
			padding: 30px 20px 60px;
		}
		.kpi-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	@media (max-width: 420px) {
		.kpi-grid {
			grid-template-columns: 1fr;
		}
	}
	
    /* =============================================
   07 — COMPROMISO
	============================================= */
	#compromiso {
		background: var(--wx-light);
		padding: 100px clamp(20px, 5vw, 60px);
		position: relative;
		overflow: hidden;
	}
	#compromiso::before {
		content: "";
		position: absolute;
		top: -40px;
		right: -60px;
		width: 480px;
		height: 600px;
		background-image: url('/assets/img/patron-moleculas.png');
		background-repeat: no-repeat;
		background-position: top right;
		background-size: contain;
		opacity: 0.07;
		mix-blend-mode: multiply;
		pointer-events: none;
		z-index: 0;
	}
	#compromiso .section-inner {
		max-width: 1280px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}

	/* Header sección */
	.compromiso-header {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		gap: 60px;
		align-items: end;
		margin-bottom: 44px;
	}
	.compromiso-header-left .section-tag.with-dash {
		display: inline-flex;
		align-items: center;
		gap: 14px;
		font-size: 0.74rem;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: var(--wx-blue);
		font-weight: 700;
		margin-bottom: 22px;
	}
	.compromiso-header-left .section-tag.with-dash::before {
		content: "";
		width: 38px;
		height: 2px;
		background: var(--wx-blue);
	}
	.compromiso-title {
		font-family: var(--font-display);
		font-size: clamp(1.9rem, 3.6vw, 2.9rem);
		font-weight: 900;
		line-height: 1.05;
		text-transform: uppercase;
		letter-spacing: -0.5px;
		margin: 0;
	}
	.compromiso-title .line-1 {
		display: block;
		color: var(--wx-navy);
	}
	.compromiso-title .line-2 {
		display: block;
		color: var(--wx-blue);
	}
	.compromiso-lead {
		font-size: 0.95rem;
		line-height: 1.75;
		color: #5a6a7a;
		margin: 0;
		padding-bottom: 8px;
	}

	/* Grid */
	.compromisos-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		position: relative;
		padding-top: 32px;
	}
	.compromisos-grid::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: calc((100% - 32px) / 3);
		height: 2px;
		background: var(--wx-blue);
	}

	/* Card base */
	.compromiso-item {
		background: var(--wx-white);
		border-radius: 8px;
		padding: 28px 24px;
		position: relative;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	.compromiso-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 36px rgba(0, 40, 72, 0.10);
	}

	/* Ícono */
	.c-icon {
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: rgba(0, 93, 255, 0.09);
		color: var(--wx-blue);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
	}
	.c-icon svg {
		width: 22px;
		height: 22px;
	}

	/* Número */
	.c-num {
		font-size: 0.78rem;
		font-weight: 700;
		color: #a3afbd;
		letter-spacing: 2px;
		margin-bottom: 4px;
		line-height: 1;
	}

	/* Título card */
	.c-title {
		font-family: var(--font-display);
		font-size: 1rem;
		font-weight: 700;
		color: var(--wx-navy);
		text-transform: uppercase;
		letter-spacing: 0.6px;
		margin: 0 0 12px;
		line-height: 1.2;
	}

	/* Divider */
	.c-divider {
		width: 36px;
		height: 2px;
		background: var(--wx-blue);
		margin-bottom: 12px;
	}

	/* Texto */
	.compromiso-item p {
		font-size: 0.86rem;
		line-height: 1.7;
		color: #5a6a7a;
		margin: 0;
	}

	/* Card CTA */
	.compromiso-cta {
		background: var(--wx-navy);
		overflow: hidden;
		display: flex;
		align-items: stretch;
	}
	.cta-mol {
		position: absolute;
		right: -20px;
		top: 0;
		bottom: 0;
		width: 180px;
		height: 100%;
		opacity: 0.18;
		pointer-events: none;
	}
	.cta-inner {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
	.cta-eyebrow {
		font-size: 0.72rem;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: var(--wx-blue);
		font-weight: 700;
		margin-bottom: 16px;
	}
	.cta-title {
		font-family: var(--font-display);
		font-size: 1.3rem;
		font-weight: 900;
		color: var(--wx-white);
		text-transform: uppercase;
		letter-spacing: -0.3px;
		margin: 0 0 22px;
		line-height: 1.2;
	}
	.cta-title span {
		display: block;
	}
	.cta-link {
		color: var(--wx-blue);
		text-decoration: none;
		font-weight: 700;
		font-size: 0.88rem;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		transition: gap 0.25s ease, color 0.25s ease;
	}
	.cta-link:hover {
		gap: 12px;
		color: var(--wx-white);
	}

	/* Responsive 980px */
	@media (max-width: 980px) {
		.compromiso-header {
			grid-template-columns: 1fr;
			gap: 20px;
			align-items: start;
		}
		.compromisos-grid {
			grid-template-columns: repeat(2, 1fr);
		}
		.compromisos-grid::before {
			width: calc((100% - 16px) / 2);
		}
	}

	/* Responsive 560px */
	@media (max-width: 560px) {
		#compromiso {
			padding: 70px 20px 50px;
		}
		.compromisos-grid {
			grid-template-columns: 1fr;
			gap: 14px;
		}
		.compromisos-grid::before {
			width: 55%;
		}
		.cta-eyebrow {
			margin-bottom: 12px;
		}
	}
	
    /* =============================================
   08 — CONTACTO
	============================================= */
	#contacto {
		background: var(--wx-light);
		padding: 100px clamp(20px, 5vw, 60px);
	}
	.contacto-inner {
		max-width: 1280px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		align-items: stretch;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 20px 60px rgba(0, 40, 72, 0.12);
	}

	/* Panel izquierdo */
	.contacto-left {
		background: var(--wx-navy);
		padding: 50px 44px;
		display: flex;
		flex-direction: column;
	}
	.contacto-left .section-tag.with-dash {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		font-size: 0.72rem;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: var(--wx-blue);
		font-weight: 700;
		margin-bottom: 24px;
	}
	.contacto-left .section-tag.with-dash::before {
		content: "";
		width: 28px;
		height: 2px;
		background: var(--wx-blue);
	}
	.contacto-title {
		font-family: var(--font-display);
		font-size: clamp(1.8rem, 3vw, 2.6rem);
		font-weight: 900;
		line-height: 1.05;
		text-transform: uppercase;
		letter-spacing: -0.5px;
		margin: 0 0 22px;
		color: var(--wx-white);
	}
	.contacto-title span {
		display: block;
	}
	.contacto-title .t-blue {
		color: var(--wx-blue);
	}
	.contacto-lead {
		font-size: 0.88rem;
		line-height: 1.8;
		color: #7a9ab8;
		margin-bottom: 36px;
	}
	.contacto-divider {
		width: 100%;
		height: 1px;
		background: rgba(244, 246, 248, 0.1);
		margin-bottom: 28px;
	}

	/* Info de contacto */
	.contacto-info {
		display: flex;
		flex-direction: column;
		gap: 18px;
		margin-bottom: 36px;
	}
	.info-item {
		display: flex;
		align-items: center;
		gap: 14px;
		font-size: 0.85rem;
		color: #c2d4e8;
	}
	.info-ico {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: rgba(0, 93, 255, 0.18);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		color: var(--wx-blue);
	}
	.info-ico svg {
		width: 16px;
		height: 16px;
	}

	/* Badges de ciudades */
	.contacto-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: auto;
		padding-top: 32px;
	}
	.cbadge {
		background: rgba(0, 93, 255, 0.15);
		color: var(--wx-blue);
		font-family: var(--font-display);
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		padding: 5px 12px;
		border-radius: 3px;
	}

	/* Panel derecho — formulario */
	.contacto-right {
		background: var(--wx-white);
		padding: 50px 44px;
	}
	.form-title {
		font-family: var(--font-display);
		font-size: 1.3rem;
		font-weight: 900;
		color: var(--wx-navy);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 6px;
	}
	.form-sub {
		font-size: 0.85rem;
		color: #7a9ab8;
		margin-bottom: 28px;
	}
	.cotizacion-form {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.form-row2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		margin-bottom: 14px;
	}
	.form-field {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-bottom: 14px;
	}
	.form-field label {
		font-family: var(--font-display);
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--wx-navy);
	}
	.form-field input,
	.form-field select,
	.form-field textarea {
		background: var(--wx-light);
		border: 1.5px solid #e2e8f0;
		border-radius: 6px;
		padding: 10px 14px;
		font-size: 0.85rem;
		color: var(--wx-dark);
		outline: none;
		width: 100%;
		font-family: var(--font-body);
		transition: border-color 0.2s ease;
		appearance: none;
	}
	.form-field input:focus,
	.form-field select:focus,
	.form-field textarea:focus {
		border-color: var(--wx-blue);
	}
	.form-field input::placeholder,
	.form-field textarea::placeholder {
		color: #a0b4c8;
	}
	.form-field textarea {
		resize: vertical;
		min-height: 100px;
	}
	.form-btn {
		width: 100%;
		background: var(--wx-blue);
		border: none;
		border-radius: 6px;
		padding: 15px;
		font-family: var(--font-display);
		font-size: 0.82rem;
		font-weight: 900;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--wx-white);
		cursor: pointer;
		margin-top: 4px;
		transition: background 0.25s ease;
	}
	.form-btn:hover {
		background: #0048cc;
	}
	.form-note {
		font-size: 0.75rem;
		color: #a0b4c8;
		text-align: center;
		margin-top: 12px;
	}

	/* Responsive 980px */
	@media (max-width: 980px) {
		.contacto-inner {
			grid-template-columns: 1fr;
		}
		.contacto-left {
			padding: 44px 32px;
		}
		.contacto-badges {
			padding-top: 24px;
			margin-top: 0;
		}
		.contacto-right {
			padding: 44px 32px;
		}
	}

	/* Responsive 560px */
	@media (max-width: 560px) {
		#contacto {
			padding: 60px 20px;
		}
		.contacto-left,
		.contacto-right {
			padding: 36px 24px;
		}
		.form-row2 {
			grid-template-columns: 1fr;
		}
	}

    /* =============================================
       FOOTER
    ============================================= */
	#footer {
		background: var(--wx-navy);
		padding: 60px clamp(20px, 5vw, 60px) 0;
	}
	.ft-grid {
		max-width: 1280px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 48px;
		padding-bottom: 48px;
		border-bottom: 1px solid rgba(244, 246, 248, 0.08);
	}

	/* Columna marca */
	.ft-brand {}
	.ft-logo {
		margin-bottom: 20px;
	}
	.ft-logo img {
		height: 48px;
		width: auto;
		display: block;
	}
	.ft-desc {
		font-size: 0.84rem;
		line-height: 1.75;
		color: #7a9ab8;
		margin-bottom: 24px;
		max-width: 260px;
	}
	.ft-social {
		display: flex;
		gap: 10px;
	}
	.ft-soc {
		width: 34px;
		height: 34px;
		border-radius: 6px;
		background: rgba(0, 93, 255, 0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: var(--wx-blue);
		transition: background 0.2s;
	}
	.ft-soc:hover {
		background: rgba(0, 93, 255, 0.3);
	}
	.ft-soc svg {
		width: 15px;
		height: 15px;
	}

	/* Columnas nav / servicios / contacto */
	.ft-col {}
	.ft-line {
		width: 36px;
		height: 2px;
		background: var(--wx-blue);
		margin-bottom: 14px;
	}
	.ft-col-title {
		font-family: var(--font-display);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 2.5px;
		text-transform: uppercase;
		color: var(--wx-white);
		margin-bottom: 20px;
	}
	.ft-links {
		display: flex;
		flex-direction: column;
		gap: 11px;
	}
	.ft-links a {
		font-size: 0.84rem;
		color: #7a9ab8;
		text-decoration: none;
		transition: color 0.2s;
	}
	.ft-links a:hover {
		color: var(--wx-white);
	}

	/* Contacto items */
	.ft-contact-item {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 16px;
		font-size: 0.82rem;
		color: #7a9ab8;
		line-height: 1.55;
	}
	.ft-cico {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: rgba(0, 93, 255, 0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-top: 1px;
		color: var(--wx-blue);
	}
	.ft-cico svg {
		width: 13px;
		height: 13px;
	}

	/* Barra inferior */
	.ft-bottom {
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22px 0;
		flex-wrap: wrap;
		gap: 14px;
	}
	.ft-copy {
		font-size: 0.78rem;
		color: #3d5a72;
	}
	.ft-badges {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.ft-badge {
		background: rgba(0, 93, 255, 0.12);
		color: var(--wx-blue);
		font-family: var(--font-display);
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		padding: 4px 10px;
		border-radius: 3px;
	}

	/* Responsive 980px */
	@media (max-width: 980px) {
		.ft-grid {
			grid-template-columns: 1fr 1fr;
			gap: 36px;
		}
		.ft-brand {
			grid-column: 1 / -1;
		}
		.ft-desc {
			max-width: 100%;
		}
	}

	/* Responsive 560px */
	@media (max-width: 560px) {
		#footer {
			padding: 50px 20px 0;
		}
		.ft-grid {
			grid-template-columns: 1fr;
			gap: 28px;
		}
		.ft-brand {
			grid-column: auto;
		}
		.ft-bottom {
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
		}
	}

    /* =============================================
       RESPONSIVE
    ============================================= */
    @media (max-width: 1024px) {
      section, #hero, #indicadores, #contacto, footer {
        padding-left: 40px;
        padding-right: 40px;
      }
      .hero-grid, .quienes-grid, .capacidades-grid,
      .compromiso-header, .contacto-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .servicios-grid { grid-template-columns: 1fr 1fr; }
      .servicio-card.wide {
        grid-column: auto;
        display: block;
      }
      .servicio-card.wide .card-img-box { width: 100%; margin-bottom: 28px; }
      .proceso-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
      .proceso-steps::before { display: none; }
      .indicadores-inner { grid-template-columns: repeat(3, 1fr); }
      .compromisos-grid { grid-template-columns: 1fr 1fr; }
      nav .nav-links { display: none; }
    }
    @media (max-width: 640px) {
      section, #hero, #indicadores, #contacto, footer {
        padding-left: 24px;
        padding-right: 24px;
      }
      .servicios-grid { grid-template-columns: 1fr; }
      .compromisos-grid { grid-template-columns: 1fr; }
      .indicadores-inner { grid-template-columns: repeat(2, 1fr); }
      .cap-right { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .hero-stats { flex-wrap: wrap; gap: 24px; }
      footer { flex-direction: column; gap: 16px; text-align: center; }
    }