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

    :root {
      --bg: #FAFAFA;
      --bg-dark: #111111;
      --ink: #111111;
      --white: #FFFFFF;
      --red: #0A6CFF;
      --red-hover: #084FBF;
      --gray-surface: #EFEFEF;
      --gray-text: #444444;
      --border: #DADADA;
      --violet: #7C3AED;
      --magenta: #DB2777;
      --amber: #F59E0B;
    }

    html {
      overflow-x: hidden; scroll-behavior: smooth; }

    body {
      background-color: var(--bg);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* TYPOGRAPHY */
    h1, h2, h3, h4 {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1.05;
    }

    .label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--red);
    }

    /* LAYOUT */
    .container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
    }

    section { padding: 100px 0; }

    /* ─── HEADER ─── */
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--white);
      border-bottom: 1px solid var(--border);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .logo-wordmark {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: 18px;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: var(--ink);
    }

    .logo-wordmark--white { color: var(--white); }
    .wm-dot { color: var(--red); }

    nav {
      display: flex;
      align-items: center;
      gap: 40px;
    }

    nav a {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
      text-decoration: none;
      transition: color 0.2s;
      position: relative;
      padding-bottom: 3px;
    }

    nav a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }

    nav a:hover::after { transform: scaleX(1); }

    nav a:hover { color: var(--red); }

    .btn-header {
      background: var(--red);
      color: var(--white);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 14px;
      padding: 10px 20px;
      border: none;
      border-radius: 0;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background 0.2s;
    }

    .btn-header:hover { background: var(--red-hover); }

    .header-tel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
      text-decoration: none;
      margin-right: 18px;
      white-space: nowrap;
    }
    .header-tel:hover { color: var(--red); }

    .servicio-mas, .clientes-mas a, .caso-siguiente a, .articulo-siguiente a {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 500;
      color: var(--red);
      text-decoration: none;
    }
    .servicio-mas { display: inline-block; margin-top: 10px; font-size: 14px; }
    .servicio-mas:hover, .clientes-mas a:hover { text-decoration: underline; }
    .servicio-title a { color: inherit; text-decoration: none; }
    .servicio-title a:hover { color: var(--red); }
    .clientes-mas { margin-top: 28px; font-family: 'IBM Plex Mono', monospace; color: var(--gray-text); }
    .cliente-url--ext { opacity: .7; font-size: 13px; }
    .caso-siguiente, .articulo-siguiente {
      margin-top: 36px; padding-top: 18px;
      border-top: 1px solid var(--line, #EFEFEF);
      font-size: 15px;
    }
    .contacto-tel { display: block; margin-top: 6px; }

    .form-aviso {
      background: #FFF4F4;
      border-left: 3px solid var(--red);
      color: var(--ink);
      font-size: 14px;
      padding: 10px 14px;
      margin: 0 0 16px;
    }
    [aria-invalid="true"] { border-color: var(--red) !important; }

    /* El aviso de cookies tapaba entero el boton principal en pantallas de
       667 px de alto. Con el banner compacto deja de solaparse. */
    @media (max-height: 700px) {
      #cookie-banner { padding: 10px 14px; font-size: 13px; }
      #cookie-banner .cookie-text { margin-bottom: 6px; }
    }

    .mobile-tel {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 500;
      text-align: center;
      padding: 10px 0;
    }

    /* El enlace del logo heredaba el azul por defecto del navegador. */
    .logo { color: inherit; text-decoration: none; }

    /* HAMBURGER */
    .hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink);
      font-size: 24px;
      padding: 4px;
    }

    /* MOBILE MENU */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 64px;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--white);
      z-index: 99;
      padding: 40px 24px;
      flex-direction: column;
      gap: 32px;
    }

    .mobile-menu.open { display: flex; }

    .mobile-menu a {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: 28px;
      letter-spacing: -0.01em;
      color: var(--gray-text);
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .mobile-menu a:hover { color: var(--ink); }

    /* BUTTONS */
    .btn-primary {
      background: var(--red);
      color: var(--white);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 15px;
      padding: 14px 28px;
      border: none;
      border-radius: 0;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background 0.2s;
    }

    .btn-primary {
      transition: background 0.2s ease, transform 0.15s ease;
    }
    .btn-primary:hover { background: var(--red-hover); transform: translateY(-2px); }
    .btn-primary:active { transform: translateY(0); }

    .btn-ghost-white {
      background: transparent;
      color: var(--white);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 15px;
      padding: 13px 27px;
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 0;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
    }

    .btn-ghost-white {
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }
    .btn-ghost-white:hover {
      border-color: var(--white);
      background: var(--white);
      color: var(--ink);
      transform: translateY(-2px);
    }
    .btn-ghost-white:active { transform: translateY(0); }

    /* ─── HERO ─── */
    #hero {
      background-color: var(--bg-dark);
      padding: 120px 0 100px;
      position: relative;
      overflow: hidden;
    }

    .hero-eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 28px;
    }

    .hero-h1 {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: clamp(52px, 8vw, 108px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 28px;
      max-width: 900px;
    }

    .hero-h1 span { display: block; }

    .grad-text {
      background: linear-gradient(90deg, var(--violet) 0%, var(--magenta) 50%, var(--amber) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientShift 6s ease-in-out infinite;
    }
    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .grad-text { animation: none; }
    }

    /* Regla del sistema: el degradado violeta-magenta-ámbar aparece SOLO en dos formas,
       siempre las mismas, nunca como color de fondo ni de botón:
       1) .grad-text — el texto de énfasis narrativo (la palabra clave de un titular, una cita)
       2) una barra de 3px (scroll-progress, bordes de #manifiesto) — la "medición" visible.
       El resto de la marca (CTA, links, borders, iconografía) sigue en var(--red), el signal
       verde funcional. Esto evita que el degradado se convierta otra vez en el color por
       defecto de toda la interfaz — aparece solo donde la marca "habla", no donde "funciona". */

    .hero-sub {
      font-size: 18px;
      color: #999;
      max-width: 620px;
      margin-bottom: 44px;
      line-height: 1.7;
    }

    .hero-ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 80px;
    }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid #2a2a2a;
      max-width: 720px;
    }

    .stat-item {
      padding: 28px 32px;
      border-right: 1px solid #2a2a2a;
    }

    .stat-item:last-child { border-right: none; }

    .stat-value {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: 28px;
      letter-spacing: -0.01em;
      color: var(--white);
      margin-bottom: 6px;
    }

    .stat-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #666;
    }

    /* ─── SECTION HEADER ─── */
    .section-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 20px;
    }

    .section-h2 {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: clamp(28px, 4vw, 48px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 60px;
      max-width: 760px;
    }

    .section-h2--white { color: var(--white); }

    /* ─── ICP ─── */
    #icp { background: var(--gray-surface); }

    .icp-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 40px;
    }

    .icp-card {
      background: var(--white);
      border-top: 3px solid var(--red);
      padding: 36px;
      transition: box-shadow 0.2s;
    }

    .icp-card:hover { border-color: var(--ink); }

    .icp-number {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--red);
      margin-bottom: 16px;
    }

    .icp-card h3 {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 12px;
    }

    .icp-card p {
      font-size: 15px;
      color: var(--gray-text);
      line-height: 1.65;
    }

    .icp-cta {
      font-size: 16px;
      color: var(--gray-text);
      max-width: 680px;
      line-height: 1.7;
      border-top: 1px solid var(--border);
      padding-top: 28px;
    }

    .icp-cta strong { color: var(--ink); }

    /* ─── PILARES ─── */
    #pilares { background: var(--white); }

    .pilares-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--border);
    }

    .pilar-item {
      padding: 48px 40px;
      border-right: 1px solid var(--border);
    }

    .pilar-item:last-child { border-right: none; }

    .pilar-num {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--red);
      margin-bottom: 20px;
    }

    .pilar-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 16px;
    }

    .pilar-body {
      font-size: 15px;
      color: var(--gray-text);
      line-height: 1.7;
    }

    /* ─── MÉTODO ─── */
    #metodo { background: var(--bg-dark); }

    #metodo .section-label { color: var(--red); }

    .metodo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid #2a2a2a;
    }

    .metodo-step {
      padding: 40px 32px;
      border-right: 1px solid #2a2a2a;
      position: relative;
      overflow: hidden;
    }

    .metodo-step:last-child { border-right: none; }

    .metodo-step::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--red);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .metodo-step:hover::before { opacity: 1; }

    .metodo-num {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--red);
      margin-bottom: 16px;
    }

    .metodo-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 8px;
    }

    .metodo-sub {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.05em;
      color: #666;
      margin-bottom: 14px;
    }

    .metodo-body {
      font-size: 14px;
      color: #888;
      line-height: 1.65;
    }

    /* ─── PANEL (visual) ─── */
    #panel { background: var(--white); }

    .panel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .panel-card {
      border: 1px solid var(--border);
      background: var(--white);
    }

    .panel-card img {
      display: block;
      width: 100%;
      height: auto;
    }

    .panel-card--dark {
      border-color: #2a2a2a;
    }

    .panel-caption {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      border-top: 1px solid var(--border);
    }

    .panel-caption-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: var(--ink);
    }

    .panel-caption-sub {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--red);
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      .panel-grid { grid-template-columns: 1fr; }
    }

    /* ─── SERVICIOS ─── */
    #servicios { background: var(--white); }

    .servicios-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .servicio-card {
      background: var(--white);
      border: 1px solid var(--ink);
      padding: 44px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s;
    }

    .servicio-card:hover { border-color: var(--red); border-width: 2px; }

    /* Diamond icon for services */
    .servicio-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 20px;
      border: 1px solid var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 13px;
      color: var(--ink);
    }

    .servicio-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 14px;
    }

    .servicio-body {
      font-size: 15px;
      color: var(--gray-text);
      line-height: 1.7;
    }

    .servicio-tag {
      display: inline-block;
      margin-top: 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--red);
      padding: 4px 10px;
      border: 1px solid var(--red);
    }

    /* ─── CLIENTES ─── */
    #clientes { background: var(--bg-dark); }

    .clientes-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .cliente-card {
      background: #1a1a1a;
      border-top: 3px solid var(--red);
      padding: 44px;
    }

    .cliente-tag {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #555;
      margin-bottom: 16px;
    }

    .cliente-kpi-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 6px;
    }

    .cliente-kpi-value {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: #aaa;
      margin-bottom: 20px;
    }

    .cliente-name {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 12px;
    }

    .cliente-body {
      font-size: 15px;
      color: #777;
      line-height: 1.65;
      margin-bottom: 28px;
    }

    .cliente-stats {
      display: flex;
      border: 1px solid #2a2a2a;
      margin-bottom: 24px;
    }

    .cliente-stat {
      flex: 1;
      padding: 16px 20px;
      border-right: 1px solid #2a2a2a;
    }

    .cliente-stat:last-child { border-right: none; }

    .cliente-stat-val {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.03em;
      color: var(--white);
      margin-bottom: 4px;
    }

    .cliente-stat-lbl {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #555;
    }

    .cliente-url {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      color: #555;
      text-decoration: none;
      letter-spacing: 0.05em;
      transition: color 0.2s;
    }

    .cliente-url:hover { color: var(--red); }

    .clientes-logos { margin-top: 24px; }

    .clientes-logos-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #555;
      margin-bottom: 16px;
    }

    .cliente-logo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .cliente-logo-card {
      background: var(--white);
      border: 1px solid #2a2a2a;
      display: flex;
      flex-direction: column;
    }

    .cliente-logo-card img {
      height: 72px;
      width: 100%;
      object-fit: contain;
      padding: 20px;
      box-sizing: border-box;
    }

    .cliente-logo-caption {
      border-top: 1px solid var(--border);
      padding: 14px 20px;
    }

    .cliente-logo-name {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: var(--ink);
    }

    @media (max-width: 760px) {
      .cliente-logo-grid { grid-template-columns: 1fr; }
    }

    .cliente-logo-chip {
      display: inline-flex;
      align-items: center;
      background: var(--white);
      border: 1px solid #2a2a2a;
      padding: 10px 16px;
      margin-bottom: 24px;
    }

    .cliente-logo-chip img {
      height: 26px;
      width: auto;
      display: block;
    }

    /* ─── MANIFIESTO ─── */
    #manifiesto {
      background: var(--bg-dark);
      padding: 100px 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-image: linear-gradient(90deg, var(--violet), var(--magenta), var(--amber)) 1;
    }

    .manifiesto-inner {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }

    .manifiesto-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      margin-bottom: 40px;
      display: block;
    }

    .manifiesto-quote {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: clamp(24px, 4vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.15;
      color: var(--white);
      margin-bottom: 40px;
    }

    .manifiesto-quote .line {
      display: block;
      margin-bottom: 8px;
    }

    .manifiesto-quote .line--muted {
      opacity: 0.6;
      font-style: italic;
    }

    .manifiesto-attr {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }

    /* ─── CONTACTO ─── */
    #contacto { background: var(--gray-surface); }

    .contacto-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 80px;
      align-items: start;
    }

    .contacto-aside h3 {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 32px;
    }

    .pasos-list { list-style: none; margin-bottom: 48px; }

    .paso {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
    }

    .paso-num {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--red);
      padding-top: 2px;
      flex-shrink: 0;
    }

    .paso-text {
      font-size: 15px;
      color: var(--gray-text);
      line-height: 1.6;
    }

    .paso-text strong { color: var(--ink); }

    .contacto-email {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      color: var(--red);
      text-decoration: none;
      letter-spacing: 0.05em;
    }

    .contacto-email:hover { color: var(--red-hover); text-decoration: underline; }

    /* FORM */
    .contact-form-wrap {
      background: var(--white);
      padding: 48px;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-group label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--gray-text);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      background: var(--white);
      border: 1px solid var(--ink);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      padding: 14px 16px;
      outline: none;
      transition: border-color 0.2s;
      width: 100%;
      border-radius: 0;
      -webkit-appearance: none;
      appearance: none;
    }

    .form-group select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-color: var(--white);
      cursor: pointer;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--red);
      border-width: 2px;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder { color: #aaa; }

    .form-group textarea { resize: vertical; min-height: 120px; }

    .form-check {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .form-check input[type="checkbox"] {
      width: 16px;
      height: 16px;
      min-width: 16px;
      border: 1px solid var(--ink);
      border-radius: 0;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      margin-top: 2px;
      background: var(--white);
      transition: background 0.15s, border-color 0.15s;
    }

    .form-check input[type="checkbox"]:checked {
      background: var(--red);
      border-color: var(--red);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.707 4.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L6 10.586l6.293-6.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .form-check label {
      font-size: 13px;
      color: var(--gray-text);
      line-height: 1.5;
    }

    .form-check label a { color: var(--red); text-decoration: none; }
    .form-check label a:hover { text-decoration: underline; }

    .btn-submit {
      background: var(--red);
      color: var(--white);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 15px;
      padding: 16px 32px;
      border: none;
      border-radius: 0;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s;
      width: 100%;
      letter-spacing: 0.02em;
    }

    .btn-submit:hover { background: var(--red-hover); }

    .form-note {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gray-text);
      text-align: center;
    }

    /* ─── FOOTER ─── */
    footer {
      background: var(--ink);
      padding: 64px 0 40px;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid #222;
    }

    .footer-brand .logo-wordmark--white {
      font-size: 18px;
      display: inline-block;
      margin-top: 8px;
      margin-bottom: 16px;
    }

    .footer-desc {
      font-size: 14px;
      color: #888;
      line-height: 1.7;
      max-width: 280px;
    }

    .footer-col h4 {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #888;
      margin-bottom: 20px;
    }

    .footer-col ul { list-style: none; }

    .footer-col ul li { margin-bottom: 12px; }

    .footer-col ul li a {
      font-size: 14px;
      color: #888;
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-col ul li a:hover { color: var(--red); }

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

    .footer-legal {
      font-size: 12px;
      color: #444;
      line-height: 1.6;
    }

    .footer-legal a { color: #555; text-decoration: none; }
    .footer-legal a:hover { color: var(--red); }

    .footer-nif {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: #444;
      letter-spacing: 0.05em;
    }

    /* ─── COOKIE BANNER ─── */
    #cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background: #111;
      border-top: 1px solid #333;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .cookie-text {
      font-size: 13px;
      color: #bbb;
      flex: 1;
      min-width: 220px;
      line-height: 1.5;
    }

    .cookie-text a { color: var(--red); text-decoration: none; }

    .cookie-actions {
      display: flex;
      gap: 12px;
      flex-shrink: 0;
    }

    .btn-cookie-accept {
      background: var(--red);
      color: var(--white);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 13px;
      padding: 10px 20px;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-cookie-accept:hover { background: var(--red-hover); }

    /* Prominencia equivalente a aceptar: mismo tamano, mismo peso, mismo
       tratamiento solido. La AEPD exige que rechazar sea tan facil y tan
       visible como aceptar, asi que no puede quedar como boton secundario. */
    .btn-cookie-reject {
      background: var(--white);
      color: var(--ink);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 700;
      font-size: 13px;
      padding: 10px 20px;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-cookie-reject:hover { background: #dcdcdc; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 768px) {
      section { padding: 64px 0; }

      nav { display: none; }
      .header-tel { display: none; }
      .hamburger { display: block; }

      /* El CTA se queda en movil. Antes desaparecia y en paginas interiores
         el primer boton de conversion no llegaba hasta el 73-81 % del scroll. */
      .btn-header {
        display: inline-flex;
        font-size: 12px;
        padding: 8px 12px;
        margin-left: auto;
        margin-right: 10px;
        white-space: nowrap;
      }

      .hero-h1 { font-size: clamp(40px, 10vw, 64px); }

      .hero-stats {
        grid-template-columns: 1fr;
        max-width: 100%;
      }

      .stat-item { border-right: none; border-bottom: 1px solid #2a2a2a; }
      .stat-item:last-child { border-bottom: none; }

      .icp-grid { grid-template-columns: 1fr; }

      .pilares-grid { grid-template-columns: 1fr; }
      .pilar-item { border-right: none; border-bottom: 1px solid var(--border); }
      .pilar-item:last-child { border-bottom: none; }

      .metodo-grid { grid-template-columns: 1fr 1fr; }
      .metodo-step { border-right: none; border-bottom: 1px solid #2a2a2a; }
      .metodo-step:nth-child(odd) { border-right: 1px solid #2a2a2a; }

      .servicios-grid { grid-template-columns: 1fr; }

      .clientes-grid { grid-template-columns: 1fr; }

      /* Las fichas de cliente se desbordaban del ancho del movil: el relleno de
         44px mas los tres contadores en fila daban un ancho minimo mayor que la
         columna, y el overflow-x oculto del documento recortaba el lado derecho
         en vez de mostrar barra. */
      .cliente-card { padding: 28px 22px; min-width: 0; }
      .cliente-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
      .cliente-stat { min-width: 0; padding: 14px 12px; }

      .contacto-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .contact-form-wrap { padding: 28px 24px; }

      .form-row { grid-template-columns: 1fr; }

      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }

      .footer-brand { grid-column: 1 / -1; }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      #cookie-banner { flex-direction: column; align-items: flex-start; }

      .hero-ctas { flex-direction: column; }
    }

    @media (max-width: 480px) {
      .metodo-grid { grid-template-columns: 1fr; }
      .metodo-step { border-right: none !important; }
      .footer-top { grid-template-columns: 1fr; }
    }

    /* ─── MOVIMIENTO: progreso, cursor, stagger ─── */
    #scroll-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--violet) 0%, var(--magenta) 50%, var(--amber) 100%);
      z-index: 200;
      transition: width 0.08s linear;
    }

    #cursor-dot {
      position: fixed;
      top: 0; left: 0;
      width: 10px;
      height: 10px;
      background: var(--red);
      pointer-events: none;
      z-index: 199;
      opacity: 0;
      transform: translate(-50%, -50%);
      transition: opacity 0.2s ease, transform 0.12s ease-out;
      /* Sin mix-blend-mode: en difference el azul #0A6CFF se invertia a naranja
         sobre los fondos claros, metiendo en la pagina un acento que no esta
         en la paleta y que ademas es uno de los colores del degradado. */
    }
    #cursor-dot.is-active { opacity: 1; }
    #cursor-dot.is-hover { transform: translate(-50%, -50%) scale(2.6); }

    [data-reveal] {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      transition-delay: var(--reveal-delay, 0s);
    }
    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
      #cursor-dot { display: none; }
    }

    @media (hover: none), (pointer: coarse) {
      #cursor-dot { display: none; }
    }

    /* ─── MARQUEE TICKER ─── */
    .marquee {
      background: var(--ink);
      max-width: 100vw;
      border-top: 1px solid #2a2a2a;
      border-bottom: 1px solid #2a2a2a;
      overflow: hidden;
      white-space: nowrap;
      padding: 14px 0;
    }
    .marquee-track {
      display: inline-flex;
      animation: marqueeScroll 28s linear infinite;
    }
    .marquee-track span {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gray-text);
      padding: 0 28px;
      display: inline-flex;
      align-items: center;
      gap: 28px;
    }
    .marquee-track span::after { content: '/'; color: var(--red); }
    @keyframes marqueeScroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none; }
    }

    /* ==============================================================
       AJUSTES DE DISENO v2 - 2026-10-17 - Luna
       Sube el nivel del sistema Clinico sin tocar una palabra de copy:
       ritmo vertical, numeracion de informe, hero asimetrico, densidad
       de datos, footer y estados de foco.
       Regla del degradado intacta: solo .grad-text y barras de 3px.
       ============================================================== */

    /* 1 - RITMO VERTICAL: las secciones dejan de medir todas lo mismo */
    section { padding: clamp(84px, 9vw, 132px) 0; }
    #hero { padding: clamp(92px, 9vw, 132px) 0 clamp(76px, 7vw, 104px); }
    #panel { padding: clamp(68px, 7vw, 100px) 0; }
    #manifiesto { padding: clamp(112px, 13vw, 184px) 0; }
    #contacto { padding: clamp(92px, 10vw, 140px) 0; }
    .section-h2 { margin-bottom: clamp(36px, 4.5vw, 60px); }
    .section-label { margin-bottom: clamp(14px, 1.6vw, 20px); }

    /* filete de 1px entre secciones claras: pagina de informe */
    #pilares, #servicios { border-top: 1px solid var(--border); }

    /* 2 - NUMERACION DE INFORME en cada cabecera de seccion */
    body { counter-reset: sectionnum; }
    #icp, #pilares, #metodo, #panel, #servicios, #clientes, #contacto { counter-increment: sectionnum; }

    .section-label {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-label::before {
      content: counter(sectionnum, decimal-leading-zero);
      border: 1px solid currentColor;
      padding: 3px 7px 2px;
      font-size: 10px;
      letter-spacing: 0.1em;
      line-height: 1;
      opacity: 0.85;
    }

    /* 3 - HERO ASIMETRICO: la rejilla pasa a ser estructura, no fondo */
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
      gap: clamp(32px, 5vw, 72px);
      align-items: end;
    }

    .hero-main { min-width: 0; }

    .hero-side {
      min-width: 0;
      padding-left: clamp(20px, 2.5vw, 32px);
      border-left: 1px solid #2a2a2a;
    }

    .hero-h1 { font-size: clamp(46px, 6.4vw, 92px); max-width: none; }
    .hero-sub { max-width: 560px; margin-bottom: 40px; }
    .hero-ctas { margin-bottom: 0; }

    /* las cifras se leen como instrumento: apiladas y con indice */
    .hero-stats {
      grid-template-columns: 1fr;
      max-width: none;
      counter-reset: statnum;
    }

    .hero-side .stat-item {
      position: relative;
      counter-increment: statnum;
      border-right: none;
      border-bottom: 1px solid #2a2a2a;
      padding: 22px 24px;
    }

    .hero-side .stat-item:last-child { border-bottom: none; }

    .hero-side .stat-item::after {
      content: counter(statnum, decimal-leading-zero);
      position: absolute;
      top: 22px;
      right: 20px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--red);
    }

    .hero-side .stat-value { font-size: 24px; }

    /* 4 - CONTRASTE REAL sobre fondo oscuro (AA en textos pequenos) */
    .stat-label { color: #8f8f8f; }
    .metodo-sub { color: #8f8f8f; }
    .metodo-body { color: #9a9a9a; }
    .cliente-tag { color: #8f8f8f; }
    .cliente-body { color: #9a9a9a; }
    .cliente-stat-lbl { color: #8f8f8f; }
    .cliente-url { color: #9a9a9a; }
    .clientes-logos-label { color: #8f8f8f; }

    /* los pilares se leen como ficha tecnica, igual que el metodo */
    .pilar-item { position: relative; transition: background-color 0.2s; }
    .pilar-item:hover { background: var(--gray-surface); }
    .pilar-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--red);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .pilar-item:hover::before { opacity: 1; }

    /* 5 - FOOTER: cierra la pagina en vez de colgar de ella */
    footer {
      position: relative;
      padding: clamp(72px, 8vw, 104px) 0 40px;
    }

    /* barra de 3px: misma forma permitida que la de progreso de scroll */
    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--violet), var(--magenta), var(--amber));
    }

    .footer-top { border-bottom: 1px solid #2a2a2a; }
    .footer-col h4 { color: #9a9a9a; }
    .footer-col ul li a { color: #9a9a9a; }
    .footer-desc { color: #9a9a9a; }
    .footer-legal, .footer-nif { color: #7c7c7c; }
    .footer-legal a { color: #9a9a9a; }

    /* 6 - ESTADOS: foco visible de teclado y formulario sin saltos */
    a:focus-visible,
    button:focus-visible,
    .btn-primary:focus-visible,
    .btn-ghost-white:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 3px;
    }

    #hero a:focus-visible,
    #metodo a:focus-visible,
    #clientes a:focus-visible,
    footer a:focus-visible,
    #manifiesto a:focus-visible {
      outline-color: var(--white);
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-width: 1px;
      border-color: var(--red);
      outline: 1px solid var(--red);
      outline-offset: -2px;
    }

    .form-group input:hover,
    .form-group select:hover,
    .form-group textarea:hover { border-color: var(--red-hover); }

    .form-group input:not(:placeholder-shown):invalid,
    .form-group textarea:not(:placeholder-shown):invalid {
      border-color: #B42318;
      outline: 1px solid #B42318;
      outline-offset: -2px;
    }

    /* 7 - RESPONSIVE del hero asimetrico */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; gap: 44px; align-items: stretch; }
      .hero-side { padding-left: 0; border-left: none; }
      .hero-stats { grid-template-columns: repeat(3, 1fr); }
      .hero-side .stat-item {
        border-bottom: none;
        border-right: 1px solid #2a2a2a;
        padding: 24px 22px;
      }
      .hero-side .stat-item:last-child { border-right: none; }
      .hero-side .stat-item::after { top: 16px; right: 14px; }
    }

    /* 8 - el span anidado de NORTE. no debe romper linea: el markup
       agrupa "CON NORTE." a proposito y el selector heredado lo partia */
    .hero-h1 > span { display: block; }
    .hero-h1 span span { display: inline; }

    @media (max-width: 680px) {
      .hero-stats { grid-template-columns: 1fr; }
      .hero-side .stat-item {
        border-right: none;
        border-bottom: 1px solid #2a2a2a;
      }
      .hero-side .stat-item:last-child { border-bottom: none; }
    }

/* ─── PÁGINAS INTERNAS (añadido en la migración a Eleventy) ─── */
.pagina-cabecera {
  padding: clamp(72px, 9vw, 120px) 0 clamp(28px, 4vw, 48px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.pagina-entradilla {
  font-size: 17px;
  color: var(--gray-text);
  max-width: 680px;
  line-height: 1.7;
  margin-top: 18px;
}

.pagina-cuerpo { padding: clamp(48px, 6vw, 88px) 0; }

.pagina-cuerpo h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 40px 0 14px;
}

.pagina-cuerpo p { max-width: 680px; color: var(--gray-text); line-height: 1.75; }

.pendiente {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--border);
  padding: 14px 18px;
  display: inline-block;
}

.migas {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 24px;
}

.articulo { padding: clamp(72px, 9vw, 120px) 0; }
.articulo-fecha {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 32px;
}
.articulo-cuerpo { max-width: 680px; }
.articulo-cuerpo p { margin-bottom: 20px; line-height: 1.8; }

/* El contador de sección solo tiene sentido en la home, que es donde
   las secciones se numeran. En páginas internas se oculta. */
.pagina-cabecera .section-label::before { content: none; }

.pagina-cuerpo ul,
.pagina-cuerpo ol {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  max-width: 680px;
  border-top: 1px solid var(--border);
}

.pagina-cuerpo li { border-bottom: 1px solid var(--border); }

.pagina-cuerpo li a {
  display: block;
  padding: 16px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}

.pagina-cuerpo li a:hover,
.pagina-cuerpo li a:focus-visible { color: var(--red); padding-left: 10px; }

.pagina-cuerpo li a::after { content: ' →'; color: var(--red); }

    /* ─── AVISO DE FORMULARIO NO CONECTADO ─── */
    /* Se inyecta desde main.js cuando la clave de web3forms sigue siendo
       el marcador de posicion. Decir la verdad en vez de fingir un envio. */
    .form-aviso {
      margin-top: 24px;
      padding: 24px;
      background: var(--white);
      border: 1px solid var(--ink);
      border-top: 3px solid var(--red);
    }

    .form-aviso:focus { outline: 2px solid var(--red); outline-offset: 2px; }

    .form-aviso-titulo {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 12px;
    }

    .form-aviso p {
      font-size: 14px;
      line-height: 1.65;
      color: var(--gray-text);
      margin-bottom: 14px;
    }

    .form-aviso a { color: var(--red); font-weight: 500; }

    .form-aviso-copia {
      width: 100%;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink);
      background: var(--gray-surface);
      border: 1px solid var(--border);
      border-radius: 0;
      padding: 14px;
      resize: vertical;
      margin-bottom: 14px;
    }

    .form-aviso-copiar {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--white);
      background: var(--ink);
      border: none;
      border-radius: 0;
      padding: 11px 20px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .form-aviso-copiar:hover { background: var(--red); }

    .form-error-rgpd {
      font-size: 14px;
      line-height: 1.6;
      color: var(--red);
      font-weight: 500;
      margin: 10px 0 0;
    }

    /* ─── ENLACE DE PREFERENCIAS DE COOKIES ─── */
    /* Retirar el consentimiento tiene que ser tan facil como darlo. */
    .cookie-preferencias {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
      text-align: left;
      text-decoration: none;
    }

    .cookie-preferencias:hover { color: var(--red); }