/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1762221732
Updated: 2025-11-04 02:02:12
*/

/* ===== Single post Nord Metric ===== */

/* Fuente en todo el módulo */
.nm-single, .nm-single * { font-family: 'Inter', system-ui, sans-serif; }

/* Layout */
.nm-container{max-width:1100px;margin:0 auto;padding:24px}
.nm-row{display:grid;grid-template-columns:1fr 320px;gap:32px}
@media (max-width:1024px){ .nm-row{grid-template-columns:1fr} }

/* Breadcrumbs */
.nm-bc{margin:8px 0 14px;color:#9eabb2;font-size:14px}
.nm-bc a{color:#9ee5d3;text-decoration:none}
.nm-bc a:hover{text-decoration:underline}
.nm-bc span{margin:0 6px}

/* Título + meta (Inter 44/400 y 16/400 donde aplique) */
.nm-title{font-size:44px;font-weight:400;line-height:1.15;margin:4px 0 8px;color:#fff}
.nm-meta{display:flex;flex-wrap:wrap;gap:8px;color:#9eabb2;font-size:14px}
.nm-dot{opacity:.6}

/* Imagen destacada */
.nm-featured img{width:100%;height:auto;border-radius:12px;display:block}

/* Contenido */
.nm-entry{color:#dfe7ea;font-size:16px;line-height:1.75}
.nm-entry h2,.nm-entry h3{color:#fff;margin:28px 0 12px}
.nm-entry p{margin:0 0 16px}
.nm-entry a{color:#9ee5d3;text-decoration:underline;text-underline-offset:2px}
.nm-entry a:hover{color:#b7f0e1}
.nm-entry img{max-width:100%;height:auto;border-radius:8px}
.nm-entry figure{margin:18px 0}
.nm-entry figcaption{color:#9eabb2;font-size:13px;margin-top:6px;text-align:center}
.nm-entry blockquote{
  margin:18px 0;padding:14px 18px;border-left:3px solid #2fc1a7;
  background:#111315;border-radius:8px;color:#cfe3df
}
.nm-entry ul, .nm-entry ol{padding-left:22px;margin:8px 0 16px}
.nm-entry li{margin:6px 0}

/* Tablas y código */
.nm-entry table{width:100%;border-collapse:collapse;margin:16px 0;border:1px solid rgba(255,255,255,.08)}
.nm-entry th,.nm-entry td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.nm-entry th{background:#0f1213;color:#e7eef0;text-align:left}
.nm-entry pre,.nm-entry code{
  background:#0f1213;border:1px solid rgba(255,255,255,.08);border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nm-entry pre{padding:14px;overflow:auto}

.nm-entry { overflow: visible; }

/* Autor */
.nm-author {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: start;
  gap: 36px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 12px;
  margin-top: 60px;
  width: 100%;
  box-sizing: border-box;
}
.nm-author-avatar { display:flex; justify-content:center; align-items:flex-start; margin-right:15px; }
.nm-author-avatar img{
  width:120px!important; height:120px!important; border-radius:50%;
  object-fit:cover; border:2px solid #6AB79A; flex-shrink:0;
}
.nm-author-info h3{font-size:20px;font-weight:600;margin-bottom:10px;color:#fff}
.nm-author-info p{font-size:16px;line-height:1.6;margin:0;color:#d3d3d3}

@media (max-width:768px){
  .nm-author{grid-template-columns:1fr;text-align:center;padding:32px 24px}
  .nm-author-avatar{justify-content:center;margin-right:0}
  .nm-author-avatar img{width:100px!important;height:100px!important}
}

/* Navegación prev/next */
.nm-post-nav{display:flex;justify-content:space-between;gap:16px;margin:28px 0 12px}
.nm-post-nav a{color:#9ee5d3;text-decoration:none}
.nm-post-nav a:hover{text-decoration:underline}

/* ==== Layout general del Blog ==== */
.nm-blog-wrapper{
  display:grid;
  grid-template-columns:3fr 1.1fr;
  gap:60px;
  max-width:1280px;
  margin:0 auto;
  padding:60px 20px;
  align-items:start;
}

/* ==== Grid de posts ==== */
.nm-post-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px;
  align-items:start;
}

/* ==== Cards ==== */
.nm-post-card{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  overflow:hidden;
  transition:all .25s ease;
  display:flex;                /* para altura consistente */
  flex-direction:column;
  height:100%;
}
.nm-post-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.1)}
.nm-post-thumb img{width:100%;height:230px;object-fit:cover;display:block}
.nm-post-content{padding:20px;flex:1} /* empuja meta al fondo */

.nm-post-cat{
  display:inline-block;background:#6AB79A;color:#000;
  font-size:14px;padding:4px 10px;border-radius:6px;margin-bottom:10px;
}
.nm-post-content h2{font-size:20px;font-weight:600;line-height:1.4;margin-bottom:10px}
.nm-post-content h2 a{color:#fff;text-decoration:none}
.nm-post-content p{color:#c5c5c5;font-size:15px;margin-bottom:16px}

.nm-author{display:flex;align-items:center;gap:8px;font-size:14px;color:#aaa}

.nm-sidebar{
  background:transparent;padding:0;align-self:start;
  position:sticky;top:120px;height:fit-content;
}
.nm-sidebar .widget{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;padding:24px;margin-bottom:28px;
}
@media (max-width:1100px){
  .nm-blog-wrapper{grid-template-columns:1fr}
  .nm-post-grid{grid-template-columns:1fr}
  .nm-sidebar{position:relative;top:auto;margin-top:40px}
}

.nm-sidebar .widget h2,
.nm-sidebar .widgettitle{font-size:18px;font-weight:600;color:#fff;margin-bottom:16px}
.nm-sidebar .widget ul{list-style:none;padding-left:0;margin:0}
.nm-sidebar .widget ul li{margin-bottom:10px;line-height:1.6}
.nm-sidebar .widget a{color:#c7c7c7;text-decoration:none}
.nm-sidebar .widget a:hover{color:#6ab79a}

/* Formulario de comentarios */
.comment-respond{margin-top:24px}
.comment-respond label{color:#e7eef0}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond textarea{
  width:100%;background:#0f1213;color:#e7eef0;border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:12px 14px
}
.comment-respond textarea{min-height:160px}
.comment-respond input[type="submit"]{
  background:#111315;color:#fff;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:12px 18px;cursor:pointer
}
.comment-respond input[type="submit"]:hover{
  background:#171b1d;box-shadow:0 8px 18px rgba(0,0,0,.25)
}

/* Ajustes móviles generales */
@media (max-width:767px){
  .nm-container{padding:18px}
  .nm-title{font-size:34px}
}

/* ===== Blog Grid (variación) ===== */
.nm-blog-grid { padding:60px 0 }
.nm-container{max-width:1100px;margin:0 auto;padding:0 20px}
.nm-blog-title{font-size:44px;font-weight:400;color:#fff;margin-bottom:40px}

.nm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
@media (max-width:768px){.nm-grid{grid-template-columns:1fr}}

.nm-card{
  background:#0f1213;border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;overflow:hidden;transition:.3s;display:flex;flex-direction:column;justify-content:space-between
}
.nm-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.nm-thumb img{width:100%;height:220px;object-fit:cover;display:block}

.nm-cat{
  background:#6AB79A;color:#111;font-size:13px;font-weight:500;
  padding:6px 10px;border-radius:6px;display:inline-block;margin:14px 18px 10px;text-transform:capitalize
}
.nm-cat:hover{background:#7fc9aa;color:#000}

.nm-post-title{font-size:20px;line-height:1.3;font-weight:600;color:#fff;margin:0 20px 10px}
.nm-post-title a{color:inherit;text-decoration:none}
.nm-post-title a:hover{color:#9ee5d3}

.nm-excerpt{color:#c9d3d7;font-size:15px;line-height:1.6;margin:0 20px 20px}

.nm-author-meta{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,0.05);padding:15px 20px;color:#9eabb2}
.nm-author-meta img{border-radius:50%}
.nm-author-meta span{font-size:14px}

/* Paginación */
.nm-pagination{text-align:center;margin-top:40px}
.nm-pagination a,.nm-pagination span{
  display:inline-block;color:#9ee5d3;background:#0f1213;border:1px solid rgba(255,255,255,0.1);
  padding:8px 14px;margin:0 4px;border-radius:6px
}
.nm-pagination a:hover,.nm-pagination .current{background:#2fc1a7;color:#fff;border-color:#2fc1a7}

/* Quita cualquier scroll lateral */
html, body { overflow-x:hidden!important }

/* Seguridad de ancho */
.nm-blog-grid,.nm-container,.nm-card{max-width:100%;box-sizing:border-box;overflow-x:hidden}

/* ===== HERO DEL ARTÍCULO ===== */
.nm-post-hero{
  background-size:cover;background-position:center;position:relative;color:#fff;text-align:center;
  padding:120px 20px 100px;margin-bottom:60px
}
.nm-post-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.7))}
.nm-post-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.nm-post-title-hero{font-family:"Inter",sans-serif;font-size:44px;font-weight:400;line-height:1.25;margin-bottom:20px}
.nm-post-meta{font-size:15px;color:rgba(255,255,255,.85)}
.nm-post-meta .nm-dot{margin:0 6px;opacity:.5}
.nm-post-meta a{color:#fff;text-decoration:none}
.nm-post-meta a:hover{text-decoration:underline}

/* ===== CONTENIDO ===== */
.nm-single-wrapper{
  display:grid;grid-template-columns:2fr 1fr;gap:48px;max-width:1100px;margin:0 auto;padding:0 20px
}
.nm-article{color:#e4e7eb;font-size:17px;line-height:1.8}

@media (max-width:900px){
  .nm-single-wrapper{grid-template-columns:1fr;padding:40px 20px}
  .nm-post-title-hero{font-size:32px}
}

/* ===== HERO DEL BLOG ===== */
.nm-blog-hero{
  text-align:center;padding:100px 20px 60px;background-color:#0e1014;
  background-image:url('http://neweb.nordmetric.com/wp-content/uploads/2025/11/bg-world.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;position:relative;overflow:hidden
}
.nm-blog-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
.nm-blog-hero-inner{position:relative;z-index:2}
.nm-blog-hero h1{font-family:"Inter",sans-serif;font-size:44px;font-weight:400;margin-bottom:12px}
.nm-blog-hero p{font-size:17px;color:rgba(255,255,255,.9)}

/* ===== BLOG WRAPPER ===== */
.nm-blog-wrapper{display:grid;grid-template-columns:3fr 1fr;gap:60px;max-width:1280px;margin:0 auto;padding:60px 20px;align-items:start}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .nm-blog-wrapper{grid-template-columns:1fr}
  .nm-post-grid{grid-template-columns:1fr}
  .nm-blog-hero h1{font-size:32px}
}

/* ==== Sidebar visual ==== */
.nm-sidebar .widgettitle{font-weight:600;font-size:18px;margin-bottom:16px}
.nm-sidebar ul{list-style:none;padding:0;margin:0}
.nm-sidebar li{margin-bottom:10px}
.nm-sidebar a{color:#dcdcdc;text-decoration:none}
.nm-sidebar a:hover{color:#6AB79A}

/* Avatares redondos en meta */
.nm-post-meta .avatar{
  border-radius:50%!important;object-fit:cover;width:36px;height:36px;border:1.5px solid #6AB79A;margin-right:8px;vertical-align:middle
}

/* ====== FIX iOS (acotado, no afecta desktop) ====== */
html{box-sizing:border-box;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}

/* Permitir que hijos en grid/flex puedan encoger (clave en iOS) */
.nm-blog-wrapper,
.nm-post-grid,
.nm-single-wrapper,
.nm-row,.nm-col,.nm-content,.nm-sidebar,
.nm-post-card,.nm-post-content,.nm-entry,.nm-article{min-width:0;min-height:0}

/* Efectos que no generen overflow fantasma */
.nm-post-card,.nm-card{overflow:hidden;will-change:transform}

/* Seguridad para textos muy largos */
.nm-entry,.nm-post-card,.nm-sidebar,.nm-blog-wrapper{word-break:break-word;overflow-wrap:anywhere}

/* Reordenar imagen arriba del nombre en mobile */
@media (max-width:768px){
  .nm-author{display:flex;flex-direction:column;align-items:center;text-align:center}
  .nm-author-avatar{order:-2;margin-bottom:16px;margin-right:0}
  .nm-author-avatar img{width:110px!important;height:110px!important;border-radius:50%;border:2px solid #6AB79A;object-fit:cover}
  .nm-author-info{text-align:center}
  .nm-author-info h3{order:-1;margin-top:0;margin-bottom:10px}
  .nm-author-info p{font-size:15px;line-height:1.6}
}

/* iOS-only refinements */
@supports (-webkit-touch-callout: none) {
  /* Contenedores al 100% solo en iOS (evita desbordes sin tocar desktop) */
  .nm-blog-hero,
  .nm-blog-hero-inner,
  .nm-container,
  .nm-blog-wrapper,
  .nm-post-grid,
  .nm-post-card,
  .nm-entry,
  .nm-sidebar,
  .nm-single-wrapper,
  .nm-article {
    width:100%!important;
    max-width:100%!important;
    margin-left:0;margin-right:0;
  }

  /* Medios responsivos */
  .nm-entry img,
  .nm-entry iframe,
  .nm-entry video,
  .nm-post-thumb,
  .nm-post-thumb img {
    display:block;max-width:100%!important;width:100%;height:auto!important;
  }

  /* Evita scroll lateral fantasma */
  html,body{overflow-x:hidden}

  /* Quita sticky del sidebar en iOS móvil */
  @media (max-width:768px){
    .nm-sidebar{position:static!important;top:auto!important}
  }
}

/* ===========================
   PROCESO SEO – CABECERA
   =========================== */

.nm-proceso-seo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.nm-proceso-head {
  display: flex;
  flex-direction: column;   /* texto arriba, línea abajo */
  align-items: flex-start;
  gap: 32px;
}

.nm-proceso-head-left h2 {
  font-size: 40px;
  font-weight: 400;
  margin: 0 0 16px;
}

.nm-proceso-head-left p {
  margin: 0;
  color: #c8d0d5;
  max-width: 420px;
}

/* LINEA DE PASOS */

/* fila de pasos + línea base */
/* Pon los círculos por encima */
.nm-proceso-line-inner {
  display: flex;
  align-items: center;
  gap: 80px;           /* <--- distancia entre pasos */
  position: relative;
}

.nm-step-circle {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid #6AB79A;
  background: #0f1213;
  box-shadow: 0 0 0 0 rgba(106,183,154,0.45);
  transition: all .25s ease;
}

/* Tramo de línea hacia el siguiente paso */
.nm-step-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;          /* sale desde el borde derecho del círculo */
  width: 150px;         /* <--- IGUAL que el gap de arriba */
  height: 2px;
  background: #6AB79A;
  transform: translateY(-50%);
  z-index: -1;
}

/* El último círculo NO dibuja línea hacia la derecha */
.nm-step-trigger:last-child .nm-step-circle::after {
  content: none;
}


/* contenedor de la línea */
.nm-proceso-line {
  width: 88%;
}

/* Aseguramos que el trigger sea relativo */
.nm-step-trigger {
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #c8d1d5;
}

/* Círculo por encima de la línea */
.nm-step-circle {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid #6AB79A;
  background: #0f1213;
  box-shadow: 0 0 0 0 rgba(106,183,154,0.45);
  transition: all .25s ease;
  margin:10px;
}

/* Hover y activo como ya lo tenías */
.nm-step-trigger:hover .nm-step-circle:not(.is-active) {
  box-shadow: 0 0 14px rgba(106,183,154,0.5);
}

.nm-step-trigger.is-active .nm-step-circle {
  background: #6AB79A;
  box-shadow: 0 0 12px rgba(106,183,154,0.85);
}




/* botones sin fondo raro en hover/focus */
.nm-step-trigger {
  background: transparent !important;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #c8d1d5;
  padding: 0;
}

.nm-step-trigger:hover,
.nm-step-trigger:focus,
.nm-step-trigger:focus-visible,
.nm-step-trigger:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

/* círculo base */
.nm-step-circle {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid #6AB79A;
  background: #0f1213;              /* fondo oscuro plano */
  box-shadow: 0 0 0 0 rgba(106,183,154,0.45);
  transition: all .25s ease;
  position: relative;
  z-index: 1;                        /* por delante de la línea */
}

/* círculo ACTIVO: solo glow, sin relleno verde */
.nm-step-trigger.is-active .nm-step-circle {
  background: #71C1A4;              /* mismo fondo que el resto */
  box-shadow: 0 0 12px rgba(106,183,154,0.7);
}

.nm-step-trigger.is-active {
  color: #ffffff;
  font-weight: 500;
}

/* hover */

.nm-step-trigger:hover .nm-step-circle {
  box-shadow: 0 0 0 6px rgba(106, 183, 154, 0.18);
}

/* etiquetas */
.nm-step-label {
  font-size: 13px;
  max-width: 140px;
  text-align: center;
}

/* --- MOBILE --- */
@media (max-width: 900px) {
  .nm-proceso-head {
    align-items: flex-start;
  }

  .nm-proceso-line-inner {
    gap: 24px;
    overflow-x: auto;
  }

  .nm-step-circle::after {
	overflow-x: auto;
    padding: 0 12px;
  }
}

/* ===========================
   PANELES DE CONTENIDO
   =========================== */

.nm-proceso-panels {
  margin-top: 56px;
}

.nm-step-panel {
  max-width: 1200px;
  margin: 0 auto 0;
}

.nm-step-panel.is-active {
  display: block;
}

@keyframes nmFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nm-step-header {
  margin-bottom: 32px;
}

.nm-step-header h3 {
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 10px;
}

.nm-step-header p {
  margin: 0;
  color: #c8d0d5;
  max-width: 600px;
}

/* =========================================
   MÓDULO 1 – "Qué incluye una Auditoría SEO"
   ========================================= */

.nm-mod-que-incluye {
  position: relative;
  padding: 56px 48px 52px;
  z-index: 1;             /* para que el contenido quede por encima del fondo */
  background: transparent;/* el color lo dará el ::before */
}

/* Fondo full-width sin romper el layout */
.nm-mod-que-incluye::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #101417;
  z-index: -1;
}

/* Mantener el contenido centrado dentro del fondo */
.nm-mod-que-incluye .nm-mod-header,
.nm-mod-que-incluye .nm-mod-grid {
  max-width: 1200px;
  margin: 0 auto;
}


/* Título y descripción del módulo */
.nm-mod-que-incluye .nm-mod-header h4 {
  margin: 0 0 10px;
}

.nm-mod-que-incluye .nm-mod-header p {
  margin: 0;
  color: #c9d3d7;
  max-width: 720px;
  line-height: 1.7;
}

/* Grid de 3 columnas en desktop */
.nm-mod-que-incluye .nm-mod-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* Tarjetas sólo para este módulo (no tocamos otros) */
.nm-mod-que-incluye .nm-mod-card {
  background: #050708;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 26px 24px 24px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}

/* ===========================
   ICONOS – estilo tipo Figma
   (sin esfera, sin glow)
   =========================== */

.nm-mod-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px; /* CUADRADO SUAVE */
  background: #71C1A4; /* Verde suave transparente */
  border: 1px solid rgba(110, 220, 180, 0.35); /* Borde verde suave */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.nm-mod-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: none; /* eliminar brillo heredado */
}

/* ===========================
   TARJETAS – borde estilo Figma
   =========================== */

.nm-mod-card {
  background: #0D1113;
  border-radius: 14px;
  border: 1px solid rgba(110, 220, 180, 0.08); /* Borde verde MUY sutil */
  padding: 26px 24px;
  transition: border-color .25s ease, background .25s ease;
}

.nm-mod-card:hover {
  border-color: rgba(110, 220, 180, 0.25); /* hover similar al figma */
  background: #101517;
}



/* Título + texto de cada tarjeta */
.nm-mod-que-incluye .nm-mod-card h5 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
}

.nm-mod-que-incluye .nm-mod-card p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: #d1d8dd;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .nm-mod-que-incluye {
    padding: 40px 24px 44px;
  }

  .nm-mod-que-incluye .nm-mod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .nm-proceso-panels {
    margin-top: 40px;
  }

  .nm-step-panel {
    max-width: 100%;
    margin-inline: 0;
  }

  .nm-mod-que-incluye {
    padding: 32px 20px 36px;
    border-radius: 20px;
  }

  .nm-mod-que-incluye .nm-mod-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* ===========================
   MÓDULO 2 – Oportunidades / Problemas
   =========================== */

/* Contenedor de la sección (texto + dos cajas) */
.nm-mod-opportunities {
  position: relative;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 40px 0 50px;
  background-color: transparent !important;   /* ← el fondo a ancho completo va aquí */
}

.nm-mod-opportunities::before {
  content: "";
  position: absolute;

  /* esquina superior derecha */
  top: -96px;   /* deja este valor si el alto ya te cuadra, o ajústalo un poco */
  right: -400px;     /* aquí está la clave: lo pegamos al borde derecho del viewport */

  width: 484px;
  height: 484px;
  background-image: url('https://neweb.nordmetric.com/wp-content/uploads/2025/11/bg-proceso-oportunidades.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  pointer-events: none;
  z-index: -1;
}

.nm-mod-opportunities .nm-mod-header p {
  max-width: 720px;
}

.nm-mod-opportunities .nm-mod-header {
  max-width: 720px;   /* antes eran 760px */
  margin: 0 auto 32px;
}



/* Título + párrafo dentro de esta sección */
.nm-mod-opportunities .nm-mod-header {
  max-width: 760px;
  margin: 0 auto 32px;
}

/* Grid de las dos tarjetas */
.nm-mod-opportunities .nm-mod-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 900px) {
  .nm-mod-opportunities .nm-mod-columns {
    grid-template-columns: 1fr;
  }
}

/* Cada columna como tarjeta */
.nm-mod-opportunities .nm-mod-col {
  background: rgba(5, 8, 10, 0.96);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 26px 20px;
}

/* Título de cada tarjeta */
.nm-mod-opportunities .nm-mod-col h5 {
  margin: 0 0 14px;
  font-size: 16px;
}

/* Lista dentro de cada tarjeta */
.nm-mod-opportunities .nm-mod-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #d1d8dd;
}

/* Cada ítem con check + línea divisoria */
.nm-mod-opportunities .nm-mod-col li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Quitamos la línea del primero */
.nm-mod-opportunities .nm-mod-col li:first-child {
  border-top: none;
}

/* Check verde (puedes cambiar el símbolo si quieres) */
.nm-mod-opportunities .nm-mod-col li::before {
  content: "✔";
  font-size: 13px;
  line-height: 1.4;
  color: #6ab79a;
  margin-top: 1px;
}

/* Que título + texto + columnas respeten el mismo ancho centrado
   que el contenido anterior (ajusta 1100px si tu .nm-container usa otro). */
.nm-mod-opportunities .nm-mod-header,
.nm-mod-opportunities .nm-mod-columns {
  max-width: 1100px;      /* usa el mismo valor que tu .nm-container */
  margin: 0 auto;
}

/* Limpiar restos de estilos antiguos para este módulo */
.nm-mod-opportunities {
  background-image: none !important;
}

.nm-mod-opportunities {
  position: relative;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 40px 0 50px;
  background-color: #0f1013;  /* fondo de la franja */
  overflow: visible;          /* muy importante para que el patrón pueda salir del contenedor */
}


/* ===========================
   MÓDULO 3 – Herramientas
   =========================== */

/* Strip a ancho completo */
.nm-mod-tools {
  position: relative;
  padding: 70px 0 90px;
  background: transparent;           /* quitamos el fondo encajonado */
}

/* Fondo full-width, centrado respecto al viewport */
.nm-mod-tools::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                      /* se estira al ancho del viewport */
  height: 100%;
  background-color: #101417;         /* color de la franja */
  z-index: -1;
}

/* Contenido interno (título + texto + grid) ya va dentro de .nm-container,
   así que no tocamos esa parte. */

/* Grid */
.nm-mod-tools .nm-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 900px) {
  .nm-mod-tools .nm-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjetas */
.nm-tool-card {
  background: #0f1013;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 26px 18px 22px;
  text-align: center;
}

/* Caja del logo */
.nm-tool-logo {
  width: 120px;
  height: 80px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: #151f1e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nm-tool-logo img {
  max-width: 64px;
  max-height: 64px;
}

/* Títulos y texto */
.nm-tool-card h5 {
  margin: 0 0 10px;
  font-size: 16px;
}

.nm-tool-card p {
  margin: 0;
  color: #d1d8dd;
  font-size: 14px;
  line-height: 1.7;
}



@media (max-width: 900px) {
  .nm-mod-tools .nm-tools-grid {
    grid-template-columns: 1fr;
  }
}

.nm-tool-card {
  background: #0f1214;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 26px 18px 22px;
  text-align: center;
}

.nm-tool-logo {
  margin-bottom: 16px;
}

.nm-tool-logo img {
  max-width: 60px;
  max-height: 60px;
}

.nm-tool-card h5 {
  margin: 0 0 10px;
  font-size: 16px;
}

.nm-tool-card p {
  margin: 0;
  color: #d1d8dd;
  font-size: 14px;
  line-height: 1.7;
}

/* ===========================
   MÓDULO 4 – Beneficios
   =========================== */

.nm-mod-benefits {
  margin: 80px 0 100px;
}

/* Título + descripción arriba, como en los otros módulos */
.nm-mod-benefits .nm-mod-header {
  max-width: 740px;
  margin: 0 0 32px;
}

.nm-mod-benefits .nm-mod-header p {
  max-width: 740px;
}

/* Layout dos columnas: recuadro + imagen */
.nm-benefits-inner {
  display: flex;
  gap: 40px;
  align-items: stretch;   /* hace que la caja y la imagen tengan la misma altura visual */
}

/* Recuadro de la izquierda */
.nm-benefits-box {
  flex: 1 1 0;
  background: #050809;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 30px 30px;
}

/* Pregunta dentro del recuadro */
.nm-benefits-question {
  font-size: 24px;
  margin: 0 0 24px;
}

/* Lista de beneficios */
.nm-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada ítem: icono (check) + contenido + separador */
.nm-benefits-list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 30px;
}

.nm-benefits-list li:first-child {
  border-top: none;
}

/* Check circular verde */
.nm-benefits-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #6ab79a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nm-benefits-icon::before {
  content: "✔";
  font-size: 11px;
  color: #050809;
}

/* Texto del beneficio */
.nm-benefits-content strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.nm-benefits-content p {
  margin: 0;
  font-size: 14px;
  color: #d1d8dd;
  line-height: 1.7;
}

/* Imagen de la derecha */
.nm-benefits-image {
  flex: 0 0 535px;         /* ancho de Figma */
  border-radius: 18px;
  overflow: hidden;        /* por si recortamos ligeramente */
}

/* Coincide altura visual con el recuadro, sin scrolls raros */
.nm-benefits-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive (stack en mobile) */
@media (max-width: 900px) {
  .nm-benefits-inner {
    flex-direction: column;
  }

  .nm-benefits-image {
    flex: 0 0 auto;
    height: auto;
  }

  .nm-benefits-image img {
    height: auto;
  }
}



/* ===========================
   NAVEGACIÓN ANTERIOR / SIGUIENTE
   =========================== */

/* Estilo base (por si algún media query no aplica) */
.nm-proceso-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.nm-proceso-nav button {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0f1213;
  color: #ffffff;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 14px;
}

/* Desktop: ocultar navegación */
@media (min-width: 901px) {
  .nm-proceso-nav {
    display: none;
  }
}

/* Mobile: mostrar como bolitas con flecha */
@media (max-width: 900px) {
  .nm-proceso-nav {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 24px;
  }

  .nm-proceso-nav button {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #0f1213;
    color: #ffffff;
    cursor: pointer;
    font-size: 0;              /* oculta el texto “Paso anterior / Siguiente paso” */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nm-proceso-nav button[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .nm-proceso-nav button:not([disabled]):hover {
    background: #2fc1a7;
    border-color: #2fc1a7;
    color: #000;
  }

  .nm-step-prev::before {
    content: "←";
    font-size: 20px;
  }

  .nm-step-next::before {
    content: "→";
    font-size: 20px;
  }
}



/* ===========================
   RESPONSIVE GENERAL
   =========================== */

@media (max-width: 900px) {
  .nm-proceso-seo {
    padding: 60px 16px;
  }

  .nm-proceso-head {
    flex-direction: column;
    gap: 24px;
  }

  /* Línea de tiempo: scroll horizontal sin aplastar los pasos */
  .nm-proceso-line {
    width: 100%;
    overflow-x: auto;
  }

  .nm-proceso-line-inner {
    flex-wrap: nowrap;
    gap: 24px;
    min-width: max-content;   /* ancho = suma de todos los pasos */
    padding-bottom: 10px;
  }

  .nm-step-trigger {
    flex: 0 0 auto;           /* que no se encojan */
  }

  .nm-step-label {
    white-space: nowrap;
  }
}



/* ===========================
   TITULOS DE MÓDULO (H4)
   =========================== */

.nm-mod h4 {
  font-family: "Inter Display", sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
  color: #fff;
  max-width: 720px
}

.nm-mod p {
  max-width: 720px
}

/* --- WRAPPER GENERAL --- */
.nm-form {
  background: #0f1316;
  padding: 40px;
  border-radius: 16px;
  border: 1px solid #1f272e;
  max-width: 900px;
  margin: auto;
  color: #fff;
  font-family: sans-serif;
}

/* --- FILAS --- */
.nm-row-form {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

/* --- COLUMNAS --- */
.nm-col-form {
  flex: 1;
}

.nm-col-form-full {
  flex: 100%;
}

/* --- LABELS --- */
.nm-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

/* --- INPUTS + TEXTAREA --- */
.nm-form input[type="text"],
.nm-form input[type="email"],
.nm-form input[type="tel"],
.nm-form textarea {
  width: 100%;
  background: #1a1f23;
  border: 1px solid #2b333a;
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 16px;
}

.nm-form textarea {
  min-height: 140px;
}

.nm-form ::placeholder {
  color: #7d858c;
}

/* --- SUBMIT --- */
.nm-submit-form input[type="submit"] {
  width: 100%;
  background: #4af7b3;
  color: #000;
  font-weight: 600;
  border: none;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.25s ease;
}

.nm-submit-form input[type="submit"]:hover {
  background: #42e5a3;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .nm-row-form {
    flex-direction: column;
  }
}

/* Navegación al final del panel (desktop + mobile) */
.nm-proceso-nav-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}

.nm-proceso-nav-bottom button {
  flex: 1 1 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0f1213;
  color: #ffffff;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
}

.nm-proceso-nav-bottom button[disabled] {
  opacity: 0.4;
  cursor: default;
}

.nm-proceso-nav-bottom button:not([disabled]):hover {
  background: #2fc1a7;
  border-color: #2fc1a7;
  color: #000;
}

/* Evita que .nm-proceso-nav aparezca dentro o debajo de los paneles */
.nm-proceso-panels .nm-proceso-nav {
    display: none !important;
}

#block-8 > div > ul > li:nth-child(1),#block-8 > div > ul > li:nth-child(2),#block-8 > div > ul > li:nth-child(3),#block-8 > div > ul > li:nth-child(4){margin-bottom:30px}

.wp-block-latest-posts__post-author{color:white}

.nm-lang-switcher {
  display: flex;
  align-items: right;
  gap: 10px;
  font-size: 14px;
}

.nm-lang-switcher a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #cfd7dd;
  opacity: .7;
  transition: opacity .2s ease;
}

.nm-lang-switcher a:hover {
  opacity: 1;
}

.nm-lang-switcher img {
  display: block;
  width: 18px;
  height: auto;
  opacity: .8;
  transition: opacity .2s ease, filter .2s ease;
}

.nm-lang-switcher .divider {
  color: #ffffff55;
  font-size: 14px;
}

/* 🔥 Subrayar solo el idioma activo */
body.lang-es-pe .nm-lang-switcher .lang-es .nm-lang-text,
body.lang-es .nm-lang-switcher .lang-es .nm-lang-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}

body.lang-en-us .nm-lang-switcher .lang-en .nm-lang-text,
body.lang-en .nm-lang-switcher .lang-en .nm-lang-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}