/* =============================================================================
   ACTEGA.CSS — Línea de soluciones ACTEGA
   Extraído del <style> embebido. Los tokens viven en tokens.css.
   ========================================================================== */

/* ==========================================
     migracion de pag FLEXO
     ========================================== */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--paper);
      color: var(--graphite);
      line-height: 1.6;
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ---------- HEADER MODIFICADO ---------- */
    header.site-header {
      background: var(--white);
      border-bottom: 1px solid var(--line);
      padding: 16px 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      flex-wrap: wrap;
      /* Permite que se acomode en celulares */
      gap: 16px;
    }

    /* Distribución en 3 espacios en la misma línea */
    .nav-item {
      display: flex;
      align-items: center;
      flex: 1;
      /* Hace que los 3 espacios midan lo mismo */
    }

    .nav-item.left {
      justify-content: flex-start;
    }

    .nav-item.center {
      justify-content: center;
    }

    .nav-item.right {
      justify-content: flex-end;
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border: 1px solid var(--steel);
      color: var(--ink);
      text-decoration: none;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      font-weight: 600;
      border-radius: 4px;
      transition: all 0.25s ease;
    }

    .btn-ghost:hover {
      background: var(--steel);
      color: var(--white);
    }

    .btn-ghost svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    /* ---------- RESTO DEL CSS ---------- */
    .hero-subpage {
      background: var(--ink);
      color: var(--white);
      padding: 64px 0;
      border-bottom: 4px solid var(--orange);
    }

    .hero-subpage h1 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-size: 48px;
      font-weight: 900;
      margin-bottom: 12px;
      line-height: 1.05;
    }

    /* ==========================================
     CENEFA ENCABEZADO NEÓN (#tecnologias .cenefa-tech-neon)
     ========================================== */
  .cenefa-tech-neon {
    width: 100%;
    min-height: 260px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #38296E;
    background: linear-gradient(to right, var(--ink) 0%, var(--ink) 45%, rgba(30,16,84,0) 80%), 
                url('../assets/actega-14.webp') right center / auto 100% no-repeat, 
                var(--ink);
  }

  .cenefa-tech-neon .wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .cenefa-tech-content {
    max-width: 50%;
  }

  .cenefa-tech-content h2 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    color: var(--white);
    line-height: 1.05;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .cenefa-tech-content p {
    font-size: 15px;
    color: rgba(251, 250, 246, 0.88);
    line-height: 1.55;
  }

  @media (max-width: 860px) {
    .cenefa-tech-neon {
      min-height: 320px;
      align-items: flex-start;
      padding-top: 30px;
      background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 50%, rgba(30,16,84,0) 85%), 
                  url('../assets/actega-14.webp') right bottom / auto 65% no-repeat, 
                  var(--ink);
    }
    .cenefa-tech-content {
      max-width: 100%;
    }
  }

  /* ==========================================
     LAYOUT ESCALONADO HORIZONTAL (.productos-escalera)
     ========================================== */
  .productos-escalera {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    margin-top: 40px;
  }

  /* 1. Asegurar que las dos columnas (imagen y texto) midan lo mismo */
  .pcard-horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch !important;
    width: 85%;
    max-width: 900px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .pcard-horizontal:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(30, 16, 84, 0.12);
  }

  /* Efecto Escalera con nth-child */
  .pcard-horizontal:nth-child(1) {
    align-self: flex-start;
  }

  .pcard-horizontal:nth-child(2) {
    align-self: center;
  }

  .pcard-horizontal:nth-child(3) {
    align-self: flex-end;
  }

  /* 2. El contenedor de la imagen debe ser relativo y perder cualquier altura fija */
  .pcard-horizontal .pcard-image-box {
    width: 40%;
    height: auto !important;
    min-height: 100%;
    position: relative !important;
    background: var(--ink);
    overflow: hidden;
  }

  /* 3. Truco infalible: Imagen anclada a las 4 esquinas */
  .pcard-horizontal .pcard-image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
  }

  .pcard-horizontal:hover .pcard-image-box img {
    transform: scale(1.05);
  }

  /* Contenedor de Texto (60% de ancho) */
  .pcard-body {
    width: 60%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .pcard-body .eyebrow-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    display: block;
  }

  .pcard-body h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 26px;
    color: var(--ink-2);
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .pcard-body p {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .pcard-body .tech-list {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
  }

  .pcard-body .tech-list li {
    font-size: 13px;
    color: var(--graphite);
    margin-bottom: 6px;
    padding-left: 18px;
    position: relative;
  }

  .pcard-body .tech-list li::before {
    content: "•";
    color: var(--orange);
    font-weight: bold;
    position: absolute;
    left: 0;
  }

  /* Responsivo para móviles */
  @media (max-width: 860px) {
    .productos-escalera {
      gap: 32px;
    }

    .pcard-horizontal {
      flex-direction: column;
      width: 100%;
      align-self: center !important;
    }

    .pcard-image-box {
      width: 100%;
      height: 200px;
      min-height: 200px;
    }

    .pcard-body {
      width: 100%;
      padding: 24px;
    }
  }

    .hero-subpage p {
      font-size: 18px;
      color: var(--paper-2);
      max-width: 720px;
    }

    .solutions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 32px;
      margin: 48px 0 64px;
    }

    .card-solution {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      transition: transform 0.3s ease;
    }

    .card-solution:hover {
      transform: translateY(-4px);
    }

    .card-solution img {
      width: 100%;
      height: 320px;
      object-fit: cover;
    }

    .card-body {
      padding: 24px;
    }

    .card-body h3 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-size: 24px;
      color: var(--ink-2);
      margin-bottom: 8px;
    }

    .card-body p {
      font-size: 14px;
      color: #444;
      margin-bottom: 16px;
    }

    .tech-list {
      list-style: none;
      padding-left: 0;
    }

    .tech-list li {
      font-size: 13px;
      padding: 6px 0;
      border-bottom: 1px dashed var(--line);
      color: var(--graphite);
    }

    .tech-list li::before {
      content: "✓ ";
      color: var(--orange);
      font-weight: bold;
    }

    footer {
      background: var(--ink);
      color: var(--paper-2);
      text-align: center;
      padding: 32px 0;
      font-size: 13px;
      border-top: 1px solid var(--line);
    }

    /* Ajuste para móviles */
    @media (max-width: 860px) {
      .nav-item.center {
        order: -1;
        flex: 100%;
        justify-content: center;
        margin-bottom: 12px;
      }

      .nav-item.left,
      .nav-item.right {
        flex: initial;
      }
    }






    /* ==========================================
     SISTEMA DE DISEÑO / VARIABLES DE RAÍZ
     ========================================== */
    :root {
      --ink: #1E1054;
      --ink-2: #281A66;
      --paper: #ECEAE1;
      --paper-2: #DFDCCC;
      --steel: #2E5C8C;
      --orange: #E2571C;
      --graphite: #1B1B18;
      --line: #C6C2AE;
      --white: #FBFAF6;
    }

    /* Reset & Fundamentos */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--paper);
      color: var(--graphite);
      font-family: 'Inter', sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* Tipografías Específicas */
    h1,
    h2,
    h3,
    .display {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.01em;
    }

    .mono {
      font-family: 'IBM Plex Mono', monospace;
    }

    .eyebrow,
    .tech-data,
    label.tech-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* Contenedores Base */
    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 28px;
    }

    /* Barra Superior Informativa */
    .topbar {
      background: var(--ink);
      color: #C6BFE6;
      font-size: 11px;
      letter-spacing: 0.06em;
      border-bottom: 1px solid #38296E;
    }

    .topbar .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 8px;
      padding-bottom: 8px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .topbar-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
    }

    .topbar-badge span.dot {
      width: 7px;
      height: 7px;
      background: var(--orange);
      border-radius: 50%;
      display: inline-block;
    }

    .topbar-contact a {
      color: #E7E3F5;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .topbar-contact a:hover {
      color: var(--orange);
    }

    /* ---------- Header ---------- */
    header.site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }

    nav.minimal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      gap: 20px;
    }

    /* Botón Regresar al Inicio (.btn-ghost con borde --steel y texto --ink) */
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: 1.5px solid var(--steel);
      color: var(--ink);
      padding: 9px 18px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 600;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
    }

    .btn-ghost:hover {
      background: var(--steel);
      color: var(--white);
      border-color: var(--steel);
      transform: translateX(-3px);
      box-shadow: 0 4px 12px rgba(46, 92, 140, 0.2);
    }

    .btn-ghost svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: transform 0.2s ease;
    }

    .btn-ghost:hover svg {
      transform: translateX(-2px);
    }



    /* Brand Branding Title / Logo */

    .brand-block {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .daka-logo-img {
      height: 50px;
      /* <-- Aquí controlas el tamaño del logo */
      width: auto;
      display: block;
    }

    .daka-logo-text {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900;
      font-size: 30px;
      color: var(--ink);
      letter-spacing: 0.04em;
      line-height: 1;
    }

    .brand-divider {
      width: 1px;
      height: 24px;
      background: var(--line);
    }

    .actega-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--white);
      border: 1px solid var(--line);
      padding: 5px 12px;
      border-radius: 3px;
    }

    .actega-badge span.accent-dot {
      width: 8px;
      height: 8px;
      background: var(--orange);
      border-radius: 50%;
    }

    .actega-badge-text {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--graphite);
      letter-spacing: 0.12em;
    }

    /* Buttons General System */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 26px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      border-radius: 2px;
      border: 1px solid transparent;
      cursor: pointer;
      text-transform: uppercase;
      transition: all 0.25s ease;
      font-family: 'Inter', sans-serif;
    }

    .btn-orange {
      background: var(--orange);
      color: var(--white);
      border-color: var(--orange);
      box-shadow: 0 4px 14px rgba(226, 87, 28, 0.3);
    }

    .btn-orange:hover {
      background: #c74712;
      border-color: #c74712;
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(226, 87, 28, 0.4);
    }

    .btn-ink {
      background: var(--ink);
      color: var(--white);
      border-color: var(--ink);
    }

    .btn-ink:hover {
      background: var(--ink-2);
      transform: translateY(-2px);
    }

    /* ---------- Hero Section ---------- */
    .hero-actega {
      position: relative;
      padding: 80px 0 80px;
      background-color: var(--ink);
      /* Fondo azul sólido para rellenar */
      overflow: hidden;
    }

    /* Capa de imagen de fondo y degradado azul */
    .hero-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .hero-media::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../assets/actega-01.webp");
      background-size: contain;
      background-position: right center;
      background-repeat: no-repeat;
    }

    .hero-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 50%, rgba(30, 16, 84, 0) 80%);
    }

    .hero-actega .wrap {
      position: relative;
      z-index: 2;
    }

    /* Confinamiento de texto a la izquierda para no tapar la imagen */
    .hero-content {
      max-width: 50%;
    }

    .hero-eyebrow-box {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      background: rgba(226, 87, 28, 0.15);
      backdrop-filter: blur(8px);
      padding: 6px 14px;
      border-radius: 2px;
      border-left: 3px solid var(--orange);
    }

    .hero-eyebrow-box span {
      color: var(--orange);
      font-weight: 600;
    }

    .hero-actega h1 {
      font-size: clamp(32px, 4vw, 54px);
      line-height: 0.96;
      color: var(--white);
      margin-bottom: 20px;
    }

    .hero-actega h1 span.highlight {
      color: var(--orange);
      position: relative;
      display: inline-block;
    }

    .hero-actega h1 span.highlight::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 4px;
      background: var(--orange);
      opacity: 0.85;
    }

    .hero-subtitle {
      font-size: 17px;
      color: rgba(251, 250, 246, 0.85);
      max-width: 100%;
      margin-bottom: 32px;
      line-height: 1.6;
      font-weight: 400;
    }

    /* Micro Stats Bar fusionado en cristal oscuro */
    .hero-stats-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
      max-width: 900px;
    }

    .stat-card {
      background: rgba(23, 12, 66, 0.65);
      /* Azul translúcido */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-top: 2px solid var(--orange);
      border-radius: 4px;
      padding: 20px 24px;
    }

    .stat-card .val {
      font-family: 'Big Shoulders Display', sans-serif;
      font-size: 32px;
      font-weight: 900;
      color: var(--white);
      line-height: 1;
      margin-bottom: 4px;
    }

    .stat-card .val span.orange {
      color: var(--orange);
    }

    .stat-card .lbl {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: rgba(251, 250, 246, 0.7);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ---------- Section Shell ---------- */
    section.sec-padding {
      padding: 80px 0;
    }

    .sec-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 44px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 20px;
      flex-wrap: wrap;
    }

    .sec-head-title-box {
      display: flex;
      align-items: baseline;
      gap: 16px;
    }

    .sec-head-idx {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      color: var(--orange);
      font-weight: 600;
    }

    .sec-head h2 {
      font-size: clamp(26px, 3.5vw, 38px);
      color: var(--ink);
      line-height: 1;
    }

    .sec-head-desc {
      font-size: 14.5px;
      color: #4A4A43;
      max-width: 460px;
    }

    /* ---------- Grid de Soluciones (Tarjetas de Producto) ---------- */
    .solutions-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    /* Tarjeta de Producto (.pcard) */
    .pcard {
      background: var(--white);
      border: 1px solid var(--line);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    /* Franja superior (pseudo-elemento ::before) en color --orange */
    .pcard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: var(--orange);
      z-index: 2;
    }

    /* Hover de la tarjeta especificado en los requerimientos */
    .pcard:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 30px -18px rgba(16, 20, 40, 0.4);
      border-color: var(--orange);
    }

    /* Imagen / Placeholder del Producto */
    .pcard-image-box {
      position: relative;
      width: 100%;
      height: 200px;
      background: var(--paper-2);
      overflow: hidden;
      border-bottom: 1px solid var(--line);
    }

    .pcard-image-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .pcard:hover .pcard-image-box img {
      transform: scale(1.06);
    }

    .pcard-chip {
      position: absolute;
      top: 12px;
      right: 12px;
      background: var(--ink);
      color: var(--white);
      padding: 4px 10px;
      border-radius: 2px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .pcard-body {
      padding: 28px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .pcard .plabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--orange);
      margin-bottom: 8px;
      display: block;
      font-weight: 600;
      text-transform: uppercase;
    }

    .pcard h3 {
      font-size: 28px;
      color: var(--ink);
      margin-bottom: 12px;
      line-height: 1.05;
    }

    .pcard p.pdesc {
      font-size: 14px;
      color: #42423B;
      margin-bottom: 20px;
      line-height: 1.55;
      flex-grow: 0;
    }

    /* Lista de características técnicas usando 'IBM Plex Mono' */
    .pcard-features-heading {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--steel);
      text-transform: uppercase;
      margin-bottom: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .pcard-features-heading::after {
      content: "";
      flex-grow: 1;
      height: 1px;
      background: var(--paper-2);
    }

    .pcard ul.ptech-list {
      list-style: none;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.05em;
      color: #2A2A26;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .pcard ul.ptech-list li {
      padding: 7px 0;
      border-top: 1px solid var(--paper-2);
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.4;
    }

    .pcard ul.ptech-list li:first-child {
      border-top: none;
    }

    .pcard ul.ptech-list li::before {
      content: "→";
      color: var(--orange);
      font-weight: bold;
      flex-shrink: 0;
    }

    .pcard-footer-btn {
      margin-top: auto;
    }

    .btn-card-action {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--paper);
      border: 1px solid var(--line);
      color: var(--ink);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-card-action:hover {
      background: var(--ink);
      color: var(--white);
      border-color: var(--ink);
    }

    /* ---------- Sección de Especificaciones Técnicas ---------- */
    .specs-section {
      background: var(--paper-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .specs-grid-layout {
      display: grid;
      grid-template-columns: 0.9fr 1.4fr;
      gap: 56px;
      align-items: start;
    }

    .specs-intro h3 {
      font-size: 32px;
      color: var(--ink);
      margin-bottom: 16px;
    }

    .specs-intro p {
      font-size: 15px;
      color: #3A3A34;
      margin-bottom: 24px;
      line-height: 1.6;
    }

    /* Lista de Definiciones (.field-list) del Sistema de Diseño */
    .field-list dl {
      display: grid;
      grid-template-columns: 140px 1fr;
      row-gap: 20px;
      column-gap: 20px;
      background: var(--white);
      padding: 32px;
      border: 1px solid var(--line);
      border-radius: 2px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    }

    .field-list dt {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--steel);
      text-transform: uppercase;
      padding-top: 3px;
      font-weight: 600;
    }

    .field-list dd {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.5;
    }

    .field-list dd span.tag {
      display: inline-block;
      background: var(--paper-2);
      color: var(--graphite);
      padding: 2px 8px;
      border-radius: 2px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.08em;
      margin-right: 6px;
      margin-bottom: 4px;
      font-weight: 500;
    }

    /* Tabla de Matriz Técnica Resumida */
    .specs-table-wrapper {
      margin-top: 40px;
      background: var(--white);
      border: 1px solid var(--line);
      overflow-x: auto;
    }

    .specs-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 13.5px;
    }

    .specs-table th {
      background: var(--ink);
      color: var(--white);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 14px 18px;
      font-weight: 600;
      border-right: 1px solid #38296E;
    }

    .specs-table th:last-child {
      border-right: none;
    }

    .specs-table td {
      padding: 14px 18px;
      border-bottom: 1px solid var(--paper-2);
      border-right: 1px solid var(--paper-2);
      color: var(--graphite);
    }

    .specs-table td:last-child {
      border-right: none;
    }

    .specs-table tr:last-child td {
      border-bottom: none;
    }

    .specs-table tr:hover td {
      background: #F5F3EB;
    }

    .specs-table .code-cell {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      color: var(--orange);
    }

    /* ---------- Footer CTA ---------- */
    .footer-cta-block {
      background: var(--ink);
      color: var(--white);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }

    .footer-cta-block::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--orange);
    }

    .cta-content-box {
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: 40px;
      align-items: center;
    }

    .cta-text-side h2 {
      font-size: clamp(32px, 4.5vw, 54px);
      color: var(--white);
      line-height: 0.98;
      margin-bottom: 16px;
    }

    .cta-text-side h2 span {
      color: var(--orange);
    }

    .cta-text-side p {
      font-size: 16px;
      color: #C6BFE6;
      max-width: 580px;
      line-height: 1.6;
    }

    .cta-button-side {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 16px;
    }

    .cta-note {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: #9086C4;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* Footnote & Copyright Bar */
    footer.site-footer {
      background: var(--ink-2);
      color: #9086C4;
      padding: 24px 0;
      border-top: 1px solid #38296E;
      font-size: 12px;
    }

    footer.site-footer .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    footer.site-footer a {
      color: #C6BFE6;
      transition: color 0.2s ease;
    }

    footer.site-footer a:hover {
      color: var(--orange);
    }

    /* Barra de Progreso Superior al Scrollear */
    #scrollbar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: var(--orange);
      z-index: 300;
      transition: width 0.08s linear;
    }

    /* Botón Flotante Volver Arriba */
    #backTop {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--ink);
      border: 2px solid #5C4E96;
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
      transition: all 0.3s ease;
      z-index: 90;
    }

    #backTop.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    #backTop:hover {
      background: var(--orange);
      border-color: var(--orange);
    }

    /* Modal de Descarga Ficha Técnica */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(16, 10, 40, 0.75);
      backdrop-filter: blur(4px);
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-card {
      background: var(--white);
      border: 1px solid var(--line);
      max-width: 520px;
      width: 100%;
      padding: 36px;
      position: relative;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
      transform: translateY(20px);
      transition: transform 0.3s ease;
    }

    .modal-overlay.active .modal-card {
      transform: translateY(0);
    }

    .modal-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: var(--orange);
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 24px;
      color: var(--graphite);
      cursor: pointer;
      line-height: 1;
    }

    .modal-card h3 {
      font-size: 28px;
      color: var(--ink);
      margin-bottom: 8px;
    }

    .modal-card p {
      font-size: 14px;
      color: #4A4A43;
      margin-bottom: 24px;
    }

    .modal-form-group {
      margin-bottom: 16px;
    }

    .modal-form-group label {
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--steel);
      text-transform: uppercase;
      margin-bottom: 6px;
      letter-spacing: 0.08em;
    }

    .modal-form-group input {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--line);
      background: var(--paper);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      border-radius: 2px;
      outline: none;
    }

    .modal-form-group input:focus {
      border-color: var(--orange);
      background: var(--white);
    }

    /* ---------- Sección Especializada ACTEGA---------- */
    .kelstar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .kelstar-card {
      background: var(--white);
      border: 1px solid var(--line);
      padding: 28px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      display: flex;
      flex-direction: column;
    }

    .kelstar-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--steel);
      transition: background 0.25s ease;
    }

    .kelstar-card:hover::before {
      background: var(--orange);
    }

    .kelstar-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px -14px rgba(30, 16, 84, 0.25);
      border-color: var(--orange);
    }

    .kelstar-tag {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.1em;
      color: var(--steel);
      text-transform: uppercase;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .kelstar-card h4 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-weight: 900;
      font-size: 22px;
      color: var(--ink);
      text-transform: uppercase;
      margin-bottom: 12px;
      line-height: 1.1;
    }

    .kelstar-card p {
      font-size: 14px;
      color: #3F3F38;
      line-height: 1.6;
    }

    /* ==========================================
     ETIQUETAS INTERACTIVAS / ACCESOS DIRECTOS (#tecnologias)
     ========================================== */
    .tech-access-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 40px;
      margin-top: 40px;
    }

    .tech-access-card {
      display: flex;
      flex-direction: column;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 4px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .tech-access-card.tech-card-flexo:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 30px rgba(30, 16, 84, 0.1);
      border-color: var(--orange);
    }

    .tech-access-card.tech-card-offset:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 30px rgba(30, 16, 84, 0.1);
      border-color: var(--steel);
    }

    .tech-access-media {
      width: 100%;
      overflow: hidden;
      background: var(--paper-2);
    }

    .tech-card-flexo .tech-access-media img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      display: block;
      border-bottom: 4px solid var(--orange);
      transition: transform 0.4s ease;
    }

    .tech-card-offset .tech-access-media img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      display: block;
      border-bottom: 4px solid var(--steel);
      transition: transform 0.4s ease;
    }

    .tech-access-card:hover .tech-access-media img {
      transform: scale(1.04);
    }

    .tech-access-body {
      padding: 24px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .tech-access-body h3 {
      font-family: 'Big Shoulders Display', sans-serif;
      font-size: 28px;
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 10px;
      line-height: 1.1;
    }

    .tech-access-body p.pdesc {
      font-size: 14px;
      color: #42423B;
      line-height: 1.55;
      margin-bottom: 20px;
    }

    .tech-access-btn {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: auto;
    }

    /* Estilos Específicos para Carrusel Offset */
    .offset-carousel {
      border-color: var(--line);
    }

    .offset-nav-btn:hover {
      background: var(--steel) !important;
      border-color: var(--steel) !important;
      color: var(--white) !important;
    }

    .offset-dot.active {
      background: var(--steel) !important;
      width: 24px;
      border-radius: 10px;
    }

    .offset-block-row {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 36px;
      align-items: center;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 32px;
      box-shadow: 0 4px 16px rgba(30, 16, 84, 0.04);
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .offset-block-row::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--steel);
    }

    .offset-block-row:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -16px rgba(46, 92, 140, 0.25);
      border-color: var(--steel);
    }

    .offset-block-row.reverse {
      grid-template-columns: 0.9fr 1.1fr;
    }

    .offset-row-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .offset-row-content .plabel {
      color: var(--steel);
      font-weight: 600;
      margin-bottom: 8px;
      display: block;
    }

    .offset-row-content h3 {
      font-size: 28px;
      color: var(--ink-2);
      margin-bottom: 12px;
      line-height: 1.08;
      font-weight: 900;
    }

    .offset-row-content p.pdesc {
      font-size: 14.5px;
      color: #42423B;
      line-height: 1.6;
      margin-bottom: 18px;
    }

    .offset-row-media {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 3px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .offset-row-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .offset-block-row:hover .offset-row-media img {
      transform: scale(1.05);
    }

    /* ==========================================
     SECCIÓN DE CONTACTO MINIMALISTA
     ========================================== */
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 40px;
      align-items: start;
      margin-top: 24px;
    }

    .contact-info-side {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 36px 30px;
      position: relative;
      border-left: 4px solid var(--ink);
    }

    .contact-info-item {
      margin-bottom: 24px;
    }

    .contact-info-item:last-child {
      margin-bottom: 0;
    }

    .contact-info-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--steel);
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .contact-info-value {
      font-size: 15px;
      color: var(--ink);
      font-weight: 600;
      line-height: 1.4;
    }

    .contact-form-side {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 36px 30px;
      box-shadow: 0 4px 16px rgba(30, 16, 84, 0.04);
    }

    .contact-form-group {
      margin-bottom: 18px;
    }

    .contact-form-group label {
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--steel);
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .contact-form-group input,
    .contact-form-group textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--line);
      background: var(--paper);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--graphite);
      border-radius: 2px;
      outline: none;
      transition: border-color 0.25s ease, background 0.25s ease;
    }

    .contact-form-group input:focus,
    .contact-form-group textarea:focus {
      border-color: var(--orange);
      background: var(--white);
    }

    /* ==========================================
     REQUISITOS TÉCNICOS RESPONSIVOS
     ========================================== */
    @media (max-width: 860px) {




      .solutions-grid,
      .kelstar-grid {
        grid-template-columns: 1fr !important;
      }




      .offset-block-row,
      .offset-block-row.reverse {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 24px !important;
      }

      .offset-block-row.reverse .offset-row-content {
        order: 2;
      }

      .offset-block-row.reverse .offset-row-media {
        order: 1;
      }

      .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }

      .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 36px;
      }

      .specs-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 32px;
      }

      .cta-content-box {
        grid-template-columns: 1fr !important;
        gap: 28px;
      }

      .cta-button-side {
        align-items: flex-start;
      }

      .hero-stats-bar {
        grid-template-columns: 1fr;
      }

      .field-list dl {
        grid-template-columns: 110px 1fr;
        padding: 20px;
      }

      .hero-content {
        max-width: 100%;
      }

      .hero-actega {
        padding-bottom: 240px;
      }

      .hero-media::before {
        background-position: bottom center;
        background-size: contain;
      }

      .hero-media::after {
        background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, rgba(30, 16, 84, 0) 100%);
      }

      nav.minimal-nav {
        flex-wrap: wrap;
      }
    }

    /* ==========================================
     HEADER PRINCIPAL CON CENEFA INTEGRADA (.main-nav)
     ========================================== */
    header.site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 4px 16px rgba(30, 16, 84, 0.06);
      backdrop-filter: blur(8px);
    }

    nav.main-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 12px 0;
    }

    .cenefa-links {
      display: flex;
      gap: 24px;
      align-items: center;
    }

    .cenefa-links a {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--graphite);
      text-decoration: none;
      letter-spacing: 0.05em;
      transition: color 0.25s ease;
      flex-shrink: 0;
    }

    .cenefa-links a:hover {
      color: var(--orange);
    }

    @media (max-width: 980px) {
      nav.main-nav {
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .brand-block {
        order: 1;
      }

      .btn-ghost {
        order: 2;
      }

      .cenefa-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 8px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
    }

/* ◄ ELIMINADO: bloque .cenefa-tech-completa / .cenefa-texto-izq / .cenefa-imagen-der.
   Ninguna página cargaba estas clases desde actega.css (especiales.html usa las
   suyas propias en especiales.css) y su background apuntaba a
   assets/actega_hero_banner.jpg, un archivo que no existe en el proyecto. */

/* ---------- Banner full width (aportado en la iteración del colega) ---------- */
.banner-full-width{
  width:100%; height:50vh; min-height:400px; max-height:600px;
  overflow:hidden; margin:0; padding:0; display:block;
}
.banner-full-width img{
  width:100%; height:100%;
  object-fit:cover; object-position:center center; display:block;
}

/* =============================================================================
   UTILIDADES
   Sustituyen a los atributos style= que estaban repartidos por el HTML.
   Mismas declaraciones: el render no cambia, pero ahora son reutilizables.
   ========================================================================== */
.u-btn-block{width:100%; border-radius:50px;}
.u-btn-block-flex{width:100%; justify-content:center; margin-top:10px;}
.u-brand-link{text-decoration:none; display:flex; align-items:center; gap:12px;}
.u-logo-lg{height:70px; width:auto; object-fit:contain;}
.u-logo-sm{height:35px; width:auto;}
.u-form-note{font-size:14px; color:#555; margin-bottom:20px;}
.u-label-note{font-size:13px; color:#555; font-weight:normal;}
.u-wordmark{font-family:'Big Shoulders Display',sans-serif; font-size:30px; font-weight:900; color:var(--ink);}
.u-form-title{font-family:'Big Shoulders Display',sans-serif; font-size:26px; color:var(--ink); margin-bottom:6px;}
.u-sec-title{font-family:'Big Shoulders Display',sans-serif; color:var(--ink);}
.u-row{display:flex; gap:20px;}
.u-accent{color:var(--orange);}
.u-ink{color:var(--ink);}
.u-mb6{margin-bottom:6px;}
.u-bg-paper{background:var(--paper);}
.u-bg-paper2{background:var(--paper-2); width:100%; clear:both;}
.u-bg-white-top{background:var(--white); border-top:1px solid var(--line);}
.btn-sm{padding:8px 16px;}
.btn-md{padding:10px 20px;}

/* ==========================================
   SECCIÓN: CONTROL DE CALIDAD (LAYOUT HORIZONTAL)
   ========================================== */
.process-horizontal-list {
  display: flex;
  flex-direction: column;
  gap: 32px; /* Separación vertical entre cada fila */
}

.process-h-card {
  display: grid;
  /* Proporción basada en el boceto: Imagen grande (2.5), Info pequeña (1) */
  grid-template-columns: 2.5fr 1fr; 
  gap: 24px;
  align-items: stretch; /* Asegura que ambas cajas midan lo mismo de alto */
  
  /* Animación de entrada al scrollear */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.process-h-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--white); /* Se cambia a blanco puro para fundirse con la sección */
}

.process-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0; /* Se elimina el padding para que la imagen aproveche el 100% del espacio */
  display: block;
}

.process-info {
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.process-info h3 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.1;
  text-transform: uppercase;
}

.process-info p {
  font-size: 14.5px;
  color: #42423B;
  line-height: 1.55;
}

/* Responsivo para móviles (se apilan uno sobre otro) */
@media (max-width: 860px) {
  .process-h-card {
    grid-template-columns: 1fr;
  }
  .process-media {
    /* Se conserva la proporcion 3:2 tambien apilado: sin altura fija, la
       imagen sigue entera en pantallas estrechas. */
    aspect-ratio: 3 / 2;
  }
  /* Un elemento de rejilla no baja de su ancho minimo de contenido salvo que se
     le indique. Sin esto la tarjeta media 330 px dentro de un viewport de 320. */
  .process-h-card > * {
    min-width: 0;
  }
}

/* Pantallas muy estrechas: «CONSIDERACIONES» en Big Shoulders 28 px mide unos
   280 px y no cabe en los ~214 px utiles de un movil de 320 px, de modo que
   empujaba toda la tarjeta fuera del viewport. Solo por debajo de 420 px se
   reduce el cuerpo del titulo y se permite partir palabras muy largas. */
@media (max-width: 420px) {
  .process-info {
    padding: 24px 18px;
  }
  .process-info h3 {
    font-size: 21px;
    overflow-wrap: break-word;
  }
}