/* =============================================================================
   index.css - Carrasco TI Group
   Proposito:  Estilos de la pagina. Externalizado desde el HTML el 2026-08-25
               para poder retirar 'unsafe-inline' de style-src.
   Autor:      Desiderio Carrasco - CTG
   ============================================================================= */

  :root{
    --grafito: #1C2630;
    --acero: #5C6B78;
    --acero-soft: #69757F;
    --lienzo: #FFFFFF;
    --panel: #F6F7F8;
    --line: #DDE2E6;
    --bronce: #A67C3D;
    --bronce-deep: #8B6530;
    --bronce-tint: #FAF3E8;
    --bronce-line: rgba(166,124,61,.28);
    --good: #2E7D5B; --good-wash: #E6F2EC;
    --warn: #B23A2E; --warn-wash: #FBEAE7;
    --radius: 2px;
  }
  [hidden]{ display:none !important; }
  .sr-only-c{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  a, button, [role='button']{ touch-action: manipulation; }
  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  /* La cabecera es sticky: sin esto, al llegar por un ancla el "01 - SERVICIOS"
     queda escondido debajo del menu. 66 px de cabecera + aire editorial. */
  section[id]{ scroll-margin-top: 104px; }

  body{
    background-color: var(--lienzo);
    background-image:
      linear-gradient(rgba(92,107,120,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(92,107,120,0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    color: var(--grafito);
    font-family: 'Source Serif 4', serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; text-decoration: none; }
  img,svg{ display:block; max-width:100%; }

  .display{ font-family:'Space Grotesk', sans-serif; }
  .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:.06em; }

  .wrap{ max-width: 1120px; margin:0 auto; padding:0 28px; }

  /* Salta la navegacion en una pagina larga con cabecera fija. Invisible
     hasta recibir foco por teclado. */
  .skip-link{
    position:absolute; left:12px; top:-60px; z-index:100;
    background: var(--grafito); color: var(--lienzo);
    font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.06em;
    padding:12px 18px; min-height:44px; display:inline-flex; align-items:center;
    transition: top .15s ease;
  }
  .skip-link:focus{ top:12px; }

  :focus-visible{ outline: 2px solid var(--grafito); outline-offset: 3px; }

  /* ---------- NAV ---------- */
  header.site{
    position: sticky; top:0; z-index: 50;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    transition: padding .2s ease;
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 28px;
    max-width: 1120px; margin:0 auto;
    transition: padding .2s ease;
  }
  .brand{ display:flex; align-items:center; gap:0; }
  .brand-name{ margin-left:-5px; }
  .brand-icon{ height:35px; width:35px; flex-shrink:0; display:block; transition: height .2s ease, width .2s ease; }
  .brand-name{
    font-weight:700; font-size:1.28rem; letter-spacing:-0.01em; color: var(--grafito);
    transition: font-size .2s ease;
  }

  header.site.is-scrolled .nav{ padding: 10px 28px; }
  header.site.is-scrolled .brand-icon{ height:26px; width:26px; }
  header.site.is-scrolled .brand-name{ font-size:1.08rem; }

  .nav-links{ display:flex; align-items:center; gap: 32px; }
  .nav-links a{
    position:relative;
    font-family:'IBM Plex Mono', monospace; font-size:.84rem;
    letter-spacing:.05em; text-transform:uppercase; color: var(--acero);
    transition: color .2s ease;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px;
    background: var(--bronce); transition: right .2s ease;
  }
  .nav-cta::after{ display:none; }
  @media (hover:hover) and (pointer:fine){
    .nav-links a:hover{ color: var(--grafito); }
  }
  @media (hover:hover) and (pointer:fine){
    .nav-links a:hover::after{ right:0; }
  }
  .nav-links a.is-active{ color: var(--grafito); }
  .nav-links a.is-active::after{ right:0; }
  .nav-cta{
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--grafito); color: var(--grafito) !important;
    padding: 13px 16px; border-radius: var(--radius); line-height:1;
  }
  @media (hover:hover) and (pointer:fine){
    .nav-cta:hover{ background: var(--grafito); color: var(--lienzo) !important; }
  }

  .nav-toggle{
    display:none; width:44px; height:44px; background:none; border:none; cursor:pointer;
    align-items:center; justify-content:center; flex-direction:column; padding:0;
  }
  .nav-toggle span{ display:block; width:22px; height:2px; background:var(--grafito); margin:5px 0; }

  @media (max-width: 760px){
    .nav-links{
      position:absolute; top:100%; left:0; right:0;
      background: var(--lienzo); border-bottom:1px solid var(--line);
      flex-direction:column; align-items:flex-start; gap:0;
      max-height:0; overflow:hidden; transition: max-height .25s ease;
    }
    .nav-links.open{ max-height: 320px; }
    .nav-links a{ width:100%; padding: 16px 28px; border-bottom:1px solid var(--line); }
    .nav-cta{ margin:16px 28px; display:inline-block; }
    .nav-toggle{ display:flex; }
  }

  /* ---------- HERO ---------- */
  .hero{ position:relative; padding: 110px 0 90px; overflow:hidden; }
  .hero .wrap{ position:relative; z-index:2; }
  .eyebrow{
    color: var(--acero); font-size:.78rem; margin-bottom: 22px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:''; width:26px; height:1px; background: var(--acero); }

  h1.hero-title{
    font-weight:700; font-size: clamp(2.3rem, 5.4vw, 4.1rem);
    line-height: 1.08; max-width: 16ch; letter-spacing:-0.01em; color: var(--grafito);
  }
  .hero-title .accent{ color: var(--grafito); }

  .hero-sub{
    margin-top: 38px; max-width: 46ch; color: var(--acero);
    font-size: 1.08rem; font-style: italic;
  }

  /* Microsenal de especializacion: pocas areas, claramente seleccionadas.
     Sin iconos ni logos de fabricante — eso convertiria el hero en catalogo
     de integrador y le quitaria autoridad consultiva. */
  .hero-specialties{
    margin-top: 26px; font-size:.76rem; letter-spacing:.1em;
    text-transform:uppercase; color: var(--acero); line-height:1.9;
  }
  .hero-actions{ margin-top: 26px; display:flex; gap:16px; flex-wrap:wrap; }

  .hero-trust{
    margin-top: 22px; display:inline-flex; align-items:center; gap:9px;
    font-family:'IBM Plex Mono', monospace; font-size:.78rem; color: var(--acero);
    transition: color .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .hero-trust:hover{ color: var(--grafito); }
  }
  .hero-trust-stars{ color: var(--bronce); letter-spacing:1px; font-size:.85rem; }
  .hero-trust b{ color: var(--grafito); font-weight:600; }
  .btn{
    font-family:'IBM Plex Mono', monospace; font-size:.82rem; letter-spacing:.05em;
    padding: 14px 26px; border-radius: var(--radius); display:inline-flex; align-items:center; gap:10px;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-primary{ background: var(--bronce); color: var(--lienzo); font-weight:500; }
  @media (hover:hover) and (pointer:fine){
    .btn-primary:hover{ background: var(--bronce-deep); transform: translateY(-1px); }
  }
  .btn-ghost{ border:1px solid var(--line); color: var(--acero); }
  @media (hover:hover) and (pointer:fine){
    .btn-ghost:hover{ border-color: var(--grafito); color: var(--grafito); }
  }

  /* title block — signature element */
  .titleblock{
    margin-top: 70px; border:1px solid var(--line);
    max-width: 560px; font-family:'IBM Plex Mono', monospace; font-size:.74rem;
    color: var(--acero); background: var(--panel);
  }
  .titleblock-row{ display:flex; }
  .titleblock-row + .titleblock-row{ border-top:1px solid var(--line); }
  .titleblock-cell{ flex:1; padding: 9px 14px; border-right:1px solid var(--line); }
  .titleblock-cell:last-child{ border-right:none; }
  .titleblock-cell b{ display:block; color: var(--grafito); font-weight:500; letter-spacing:.03em; }
  .titleblock-label{ display:block; color: var(--acero-soft); text-transform:uppercase; letter-spacing:.1em; font-size:.65rem; margin-bottom:3px; }

  @media (max-width:640px){
    .titleblock-row{ flex-wrap:wrap; }
    .titleblock-cell{ flex:1 1 50%; border-bottom:1px solid var(--line); }
  }

  /* ---------- SECTION SCAFFOLD ---------- */
  section{ padding: 90px 0; border-top:1px solid var(--line); }
  #diferenciador{ padding: 110px 0; }
  #contacto{ padding: 100px 0 90px; }

  /* Descanso visual: la reja es la firma del sitio, pero en una home larga
     aparece en las seis secciones y termina siendo omnipresente. Confianza y
     Planes van sobre lienzo pleno — son las dos que mas piden calma: una
     porque es texto humano, la otra porque es una decision de compra. */
  #planes{ position:relative; background: var(--lienzo); }

  /* =========================================================================
     RITMO TONAL — 2026-08-26
     Dos anclas y el resto en silencio. Alternar franjas en cada seccion
     convertiria la home en una landing SaaS convencional; una sola ancla
     oscura y una calida marcan capitulos sin romper la calma.
       Hero claro · Servicios claro · DIFERENCIADOR grafito · Metodo claro
       · CONFIANZA calida · Planes claro · Contacto claro
     ========================================================================= */

  /* --- Ancla oscura: aqui vive el manifiesto de la marca --- */
  #diferenciador{
    position:relative;
    /* Compactado para caber en un viewport estandar sin altura fija: se
       reducen huecos y paddings, nunca la tipografia. Si no cabe (portatil
       bajo, zoom, movil) crece con naturalidad. */
    padding-block: 48px;
    background: var(--grafito);
    border-top-color: var(--grafito);
    /* La reja se mantiene, en blanco al 3 %, para no perder la firma. */
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 44px 44px;
    color: #E8ECEF;
  }
  /* Cabecera mas junta al contenido: solo en esta seccion, para que el
     manifiesto y su desarrollo se lean como un bloque. */
  #diferenciador .section-head{ margin-bottom: 30px; }
  #diferenciador .diff-fit{ margin-top: 26px; }
  #diferenciador .section-num{ color: #98A6B2; }
  #diferenciador .section-title,
  #diferenciador .diff-stat b{ color: #FFFFFF; }
  #diferenciador .section-desc,
  #diferenciador .diff-lead,
  #diferenciador .diff-quote,
  #diferenciador .diff-stat span,
  #diferenciador .diag-text,
  #diferenciador .diff-fit{ color: #B9C3CB; }
  #diferenciador .diff-fit-label,
  #diferenciador .diag-indicator{ color: #8FA0AD; }
  /* El bronce queda como unico acento, y se aclara para que rinda sobre oscuro. */
  #diferenciador .accent{ color: #C79A5C; }
  #diferenciador .diff-stat,
  #diferenciador .diff-fit{ border-color: rgba(255,255,255,.14); }

  /* --- Ancla calida: separa lo que dice CTG de lo que dicen terceros --- */
  /* La reja es identidad, pero no debe pesar igual en todas las superficies.
     En la seccion calida baja a ~40 % de su contraste base. */
  #testimonios{
    position:relative; background: #FBF8F2;
    background-image:
      linear-gradient(rgba(92,107,120,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(92,107,120,.02) 1px, transparent 1px);
    background-size: 44px 44px;
  }
  .section-head{ max-width: 640px; margin-bottom: 56px; }
  /* La cabecera empezaba a separarse mentalmente del contenido. */
  #servicios .section-head{ margin-bottom: 38px; }
  .section-num{ color: var(--acero); font-size:.78rem; margin-bottom:18px; display:block; }
  h2.section-title{ font-weight:600; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--grafito); }
  .section-desc{ margin-top: 16px; color: var(--acero); max-width: 50ch; }

  /* Sin JS todo se ve: el estado oculto solo existe si html.js esta puesto.
     Un fallo de JavaScript no puede dejar media home invisible. El recorrido
     tambien se acorta: 18px era mucho, 10 comunica orden sin espectaculo. */
  .reveal{ opacity:1; transform:none; }
  .js .reveal:not(.is-visible){ opacity:0; transform: translateY(10px); }
  .js .reveal{ transition: opacity .3s ease, transform .3s ease; }


  @media (prefers-reduced-motion: reduce){
    .reveal, .js .reveal:not(.is-visible){ opacity:1; transform:none; transition:none; }
    .js .reveal .method-num::before,
    .js .reveal .method-num::after{ transform:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
    .plan, .system-link, .system-node .system-code{ transition:none !important; transform:none !important; }
  }

  /* ---------- SERVICIOS (schematic trace) ---------- */
  /* Rejilla editorial 3+2, no tarjetas y no la lista vertical anterior: la
     timeline hacia la seccion larguisima y con el grid la linea vertical deja
     de tener sentido. Sin fondos, solo divisores finos. */
  /* Seis columnas logicas: 3 arriba a 2 cada una, 2 abajo a 3 cada una. Con
     tres columnas iguales la celda vacia de la segunda fila se leia como un
     sexto servicio que falta. */
  .systems{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; max-width:none; }
  .system-node:nth-child(-n+3){ grid-column: span 2; }
  .system-node:nth-child(n+4){ grid-column: span 3; }
  /* Divisores mas tenues que --line: con verticales, horizontal, esquineros y
     la reja del fondo habia demasiadas lineas a la vez, y el ojo veia cinco
     cajas cerradas en vez de cinco areas. Las lineas deben leerse DESPUES del
     contenido. Espaciado sobre la escala de 8: 24/32. */
  .system-node{ position:relative; padding: 24px 32px 24px 0; }
  .system-node + .system-node{ border-left:1px solid rgba(92,107,120,.14); padding-left:32px; }
  .system-node:nth-child(1),
  .system-node:nth-child(4){ border-left:none; padding-left:0; }
  .system-node:nth-child(n+4){ border-top:1px solid rgba(92,107,120,.10); padding-top:32px; }

  /* Marcador de codigo: el mismo lenguaje de dos esquinas que Metodo, pero en
     version pequena y ligada al codigo. Si el motivo apareciera con el mismo
     tamano en toda la web dejaria de ser especial. */
  .system-code{
    position:relative; display:inline-flex; align-items:center;
    margin-bottom:0; padding:5px 10px;
    color: var(--acero); font-size:.78rem;
  }
  .system-code::before,
  .system-code::after{ content:''; position:absolute; width:8px; height:8px; }
  .system-code::before{ top:0; left:0; border-top:1px solid var(--acero); border-left:1px solid var(--acero); }
  .system-code::after{ right:0; bottom:0; border-right:1px solid var(--acero); border-bottom:1px solid var(--acero); }
  .system-title{ font-size: 1.28rem; font-weight:600; margin-top:16px; margin-bottom:0; color: var(--grafito); }
  .system-desc{ margin-top:12px; color: var(--acero); max-width: 42ch; font-size:.95rem; }
  /* Responde "cuando lo necesito", no solo "que es". Una linea, nunca mas. */
  /* Una sola oracion, no un segundo bloque: en cinco servicios, el bloque
     aparte anadia altura y competia con la descripcion principal. */
  .system-when{ margin-top:16px; max-width:44ch; font-size:.9rem; line-height:1.55; color: var(--acero-soft); }

  @media (max-width: 980px){
    .systems{ grid-template-columns:repeat(2,1fr); }
    .system-node:nth-child(-n+3),
    .system-node:nth-child(n+4){ grid-column: span 1; }
    .system-node{ border-left:none; padding-left:0; }
    .system-node + .system-node{ border-left:none; padding-left:0; }
    .system-node:nth-child(2n){ border-left:1px solid var(--line); padding-left:30px; }
    .system-node:nth-child(n+3){ border-top:1px solid var(--line); }
  }
  @media (max-width: 640px){
    .systems{ grid-template-columns:1fr; }
    .system-node{ grid-column: 1 / -1 !important; }
    .system-node{ padding:24px 0; border-left:none !important; padding-left:0 !important; }
    .system-node + .system-node{ border-top:1px solid var(--line); }
    .system-node:first-child{ padding-top:0; }
    .system-desc, .system-when{ max-width:52ch; }
  }
  /* En acero, NO en bronce. Su funcion es ayudar a reconocerse, no llamar:
     con bronce el ojo leia dos CTA por modulo y el acento perdia significado.
     El bronce queda reservado a "VER SERVICIO", la unica accion del bloque. */
  .system-when-label{
    color: var(--acero); font-weight:500; font-size:.68rem;
    letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  }
  .system-link{
    display:inline-block; margin-top:24px; font-size:.76rem; letter-spacing:.06em;
    color: var(--bronce-deep); border-bottom:1px solid var(--line); padding-bottom:2px;
    transition: border-color .2s ease, transform .2s ease, color .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .system-link:hover{ border-color: var(--bronce-deep); color: var(--grafito); transform: translateX(3px); }
  }

  /* ---------- DIFERENCIADOR ---------- */
  .diff-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:start; }
  .diff-copy{ display:flex; flex-direction:column; gap:14px; }
  .diff-lead{ font-size:1.05rem; color: var(--acero-soft); max-width:54ch; }
  .diff-quote{ font-family:'Source Serif 4', serif; font-size:1.05rem; line-height:1.6; color: var(--acero-soft); max-width:54ch; }
  .diff-quote .accent{ color: var(--grafito); font-weight:600; }
  .diff-list{ display:flex; flex-direction:column; gap:13px; }
  .diff-stats{ display:flex; flex-direction:column; gap: 22px; }
  .diff-stat{ padding-top:20px; border-top:1px solid var(--line); }
  .diff-stat:first-child{ padding-top:0; border-top:none; }
  .diff-stat b{ display:block; font-family:'Space Grotesk', sans-serif; font-size:1.5rem; line-height:1.25; color: var(--grafito); }
  .diff-stat span{ display:block; color: var(--acero); font-size:.9rem; margin-top:8px; }

  @media (max-width: 800px){ .diff-grid{ grid-template-columns:1fr; gap:40px; } }

  /* ---------- TESTIMONIOS ---------- */
  /* Altura natural: forzar las tres a la misma altura ordenaba la geometria
     pero dejaba un hueco grande bajo la resena corta y las hacia parecer
     piezas fabricadas para encajar. Son de largo distinto porque son reales. */
  .testimonials{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items:start; }
  .testimonial{
    position:relative; overflow:hidden;
    border:1px solid var(--bronce-line); background: var(--bronce-tint);
    padding: 36px 28px 28px; display:flex; flex-direction:column; gap:16px;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .testimonial:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(139,101,48,.16); }
  }
  .testimonial-mark{
    position:absolute; top:6px; right:16px; font-family:'Space Grotesk', sans-serif;
    font-size:4.2rem; line-height:1; color: var(--bronce); opacity:.16; pointer-events:none;
  }
  .testimonial-stars{ color: var(--bronce); font-size: .95rem; letter-spacing: 3px; }
  .testimonial-quote{ position:relative; color: var(--grafito); font-size: .96rem; line-height:1.65; flex:1; }
  .testimonial-source{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--bronce-line); }
  .testimonial-avatar{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background: var(--bronce); color: var(--lienzo);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:.95rem;
  }
  .testimonial-who{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
  .testimonial-author{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:.9rem; color: var(--grafito); }
  .testimonial-badge{ font-family:'IBM Plex Mono', monospace; font-size:.66rem; letter-spacing:.06em; color: var(--acero-soft); text-transform:uppercase; }
  .testimonial-badge a{ color: inherit; border-bottom: 1px solid var(--bronce-line); padding-bottom:1px; transition: color .2s ease, border-color .2s ease; }
  @media (hover:hover) and (pointer:fine){
    .testimonial-badge a:hover{ color: var(--bronce-deep); border-color: var(--bronce-deep); }
  }

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

  /* Linea de encaje: cierra el diferenciador diciendo a quien NO sirve. */
  /* Franja inferior de la misma composicion, en horizontal: con la etiqueta
     encima y 56 px de aire se leia como una segunda pantalla. */
  .diff-fit{
    margin-top: 34px; padding-top: 22px; border-top:1px solid var(--line);
    display:flex; gap:20px; align-items:baseline; flex-wrap:wrap;
    max-width: none; color: var(--acero); font-size:.86rem; line-height:1.6;
  }
  .diff-fit-label{
    flex-shrink:0; font-size:.64rem; letter-spacing:.16em;
    text-transform:uppercase; color: var(--acero-soft);
  }
  .diff-fit-text{ flex:1; min-width:260px; }
  @media (max-width: 700px){
    .diff-fit{ margin-top:28px; gap:8px; }
    .diff-fit-label{ flex-basis:100%; }
  }

  /* ---------- METODO ----------
     Cuatro bloques horizontales, no la misma linea vertical que Servicios:
     deben verse emparentados pero distintos. La numeracion usa el motivo de
     dos esquinas diagonales de la identidad — no se dibuja la C, solo su
     encuadre. Asi el componente pertenece al sistema visual de la marca en
     vez de ser una lista numerada generica. */
  .method{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0 28px; }
  .method-step{ position:relative; }

  /* Linea que une conceptualmente los cuatro pasos, a la altura del modulo.
     Va de paso a paso y no cruza el numero. */
  .method-step::after{
    content:''; position:absolute; top:26px; height:1px; background: var(--line);
    left:62px; right:-28px;
  }
  .method-step:last-child::after{ display:none; }

  .method-num{
    position:relative; width:52px; height:52px;
    display:grid; place-items:center;
    font-family:'IBM Plex Mono', monospace; font-size:.8rem; letter-spacing:0;
    color: var(--bronce-deep);
  }
  /* Sin caja completa, sin circulo, sin sombra: solo las dos esquinas. */
  .method-num::before,
  .method-num::after{ content:''; position:absolute; width:16px; height:16px; }
  /* Encuadre: las esquinas entran ligeramente cerradas y se abren 5 px hasta
     su sitio. Una sola vez, sin mover el numero ni el texto. */
  .js .reveal .method-num::before{ transform: translate(5px,5px); }
  .js .reveal .method-num::after{ transform: translate(-5px,-5px); }
  .js .method-num::before,
  .js .method-num::after{ transition: transform .35s ease, border-color .2s ease; }
  .js .reveal.is-visible .method-num::before,
  .js .reveal.is-visible .method-num::after{ transform: translate(0,0); }
  .method-num::before{ top:0; left:0; border-top:1px solid var(--acero); border-left:1px solid var(--acero); }
  .method-num::after{ right:0; bottom:0; border-right:1px solid var(--acero); border-bottom:1px solid var(--acero); }

  .method-body{ margin-top:18px; }
  .method-title{ font-size:1.1rem; font-weight:600; color: var(--grafito); line-height:1.3; }
  .method-desc{ margin-top:8px; color: var(--acero); font-size:.95rem; }

  /* Confirmacion visual, sin movimiento: las esquinas pasan a bronce. */
  @media (hover:hover) and (pointer:fine){
    .method-num::before, .method-num::after{ transition: border-color .2s ease; }
    .method-step:hover .method-num::before,
    .method-step:hover .method-num::after{ border-color: var(--bronce); }
  }

  @media (max-width: 900px){
    .method{ grid-template-columns:repeat(2,1fr); gap:40px 28px; }
    .method-step:nth-child(2)::after{ display:none; }
  }
  @media (max-width: 560px){
    /* En movil vuelve a vertical: el modulo a la izquierda y el texto al lado. */
    .method{ grid-template-columns:1fr; gap:0; }
    .method-step{ display:flex; gap:18px; align-items:flex-start; padding-bottom:30px; }
    .method-step:last-child{ padding-bottom:0; }
    .method-step::after{
      top:52px; bottom:0; left:25px; right:auto; width:1px; height:auto;
    }
    .method-step:nth-child(2)::after{ display:block; }
    .method-step:last-child::after{ display:none; }
    .method-num{ width:50px; height:50px; flex-shrink:0; }
    .method-body{ margin-top:0; padding-top:2px; }
  }

  /* CTA intermedio: enlace editorial, no boton. La conversion fuerte ya vive
     en el hero, en planes y en contacto. */
  .method-cta{ margin-top:48px; }
  .method-cta a{
    display:inline-flex; align-items:center; gap:8px; min-height:44px;
    font-family:'IBM Plex Mono', monospace; font-size:.84rem; letter-spacing:.03em;
    color: var(--acero); border-bottom:1px solid var(--line);
    transition: color .2s ease, border-color .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .method-cta a:hover{ color: var(--grafito); border-color: var(--bronce); }
  }

  /* ---------- PLANES ---------- */
  .plans{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .plan{
    border:1px solid var(--line); background: var(--panel);
    padding: 32px 26px; display:flex; flex-direction:column;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .plan:hover{ transform: translateY(-3px); box-shadow: 0 8px 24px rgba(28,38,48,.09); }
  }
  /* Sin insignia "RECOMENDADO": no hay dato de popularidad que la sostenga, y
     una consultoria no deberia recomendar un plan antes del diagnostico. El
     plan sigue destacado por el borde en grafito y el fondo en lienzo, y su
     publico ya lo dice la linea "PARA EMPRESAS EN CRECIMIENTO". */
  .plan.is-featured{ border-color: var(--grafito); background: var(--lienzo); }
  /* Nota de alcance bajo el subtitulo de la seccion: mono, discreta, para que
     se lea como aclaracion y no como otra promesa comercial. */
  .section-note{
    margin-top:14px; max-width:52ch;
    font-family:'IBM Plex Mono', monospace; font-size:.74rem;
    letter-spacing:.04em; line-height:1.6; color: var(--acero-soft);
  }
  .plan-name{ font-family:'Space Grotesk', sans-serif; font-size:1.25rem; font-weight:600; color: var(--grafito); }
  .plan-for{ color: var(--acero-soft); font-size:.85rem; margin-top:6px; margin-bottom:22px; }
  .plan-list{ list-style:none; display:flex; flex-direction:column; gap:12px; flex:1; }
  .plan-list li{ color: var(--acero); font-size:.95rem; padding-left:18px; position:relative; }
  .plan-list li::before{ content:'—'; position:absolute; left:0; color: var(--acero); }
  .plan-cta{ margin-top:26px; align-self:flex-start; }

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

  /* ---------- CONTACTO ---------- */
  .contact-panel{
    display:grid; grid-template-columns: 1.1fr .9fr; gap: 0;
    border:1px solid var(--line);
  }
  .contact-copy{ padding: 48px; background: var(--lienzo); }
  .contact-form{ padding: 56px 52px; background: var(--panel); border-left:1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(28,38,48,.04); }
  .contact-copy h2{ font-weight:600; font-size: clamp(1.6rem,2.8vw,2.1rem); color: var(--grafito); }
  .contact-copy p{ margin-top:18px; color: var(--acero); max-width:42ch; }
  .contact-trust-note{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); color: var(--acero-soft); font-size:.92rem; line-height:1.6; max-width:40ch; }

  /* Iconos solo donde orientan: canal de contacto. Lineales, 16 px, acero,
     sin circulos ni fondos. En Servicios y Metodo NO se ponen: los esquineros
     y la numeracion ya son la firma, un pictograma competiria con ellos. */
  .contact-icon{
    /* inline-block explicito: hay una regla global que pone los svg en block
       y el icono caia a su propia linea, encima de la etiqueta. */
    display:inline-block; width:16px; height:16px;
    vertical-align:-3px; margin-right:7px; color: var(--acero);
  }
  .contact-field-label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em; color: var(--acero-soft); text-transform:uppercase; margin-bottom:6px; }
  .contact-field{ margin-bottom: 22px; }
  .contact-value{ font-family:'IBM Plex Mono',monospace; font-size:.95rem; color: var(--grafito); }
  .placeholder{ color: var(--acero); }

  .contact-buttons{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
  .contact-buttons .btn{ justify-content:center; width:100%; }

  .contact-tabs{ display:flex; gap:0; margin-bottom:24px; border-bottom:1px solid var(--line); }
  .contact-tab{
    font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.06em;
    padding:0 4px 12px; margin-right:22px; background:none; border:none; border-bottom:2px solid transparent;
    color:var(--acero); cursor:pointer; transition:color .2s ease, border-color .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .contact-tab:hover{ color:var(--grafito); }
  }
  .contact-tab[aria-selected="true"]{ color:var(--grafito); font-weight:600; border-bottom-color:var(--bronce); }

  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:.86rem; color:var(--grafito); margin-bottom:6px; font-weight:600; }
  .field .hint{ font-weight:400; color:var(--acero); font-size:.8rem; }
  .required-mark{ color:var(--bronce-deep); }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
    width:100%; font-family:'Source Serif 4', serif; font-size:.95rem; color:var(--grafito);
    background:var(--lienzo); border:1px solid var(--line); border-radius:var(--radius);
    padding:12px 13px; resize:vertical; min-height:44px;
    transition:border-color .2s ease;
  }
  .field textarea{ min-height:90px; }
  .field input:focus, .field textarea:focus{ border-color:var(--acero); }

  .contact-submit-row{ margin-top:20px; }
  .contact-submit-row .btn:disabled{ background:var(--line); color:var(--acero); cursor:not-allowed; transform:none; }

  #contactStatus{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.82rem; font-family:'IBM Plex Mono',monospace;
    padding:8px 12px; border-radius:var(--radius); border:1px solid transparent;
  }
  #contactStatus .status-icon{ display:flex; flex:none; }
  #contactStatus .status-icon svg{ width:16px; height:16px; }
  #contactStatus[data-state="ok"]{ background:var(--good-wash); color:var(--good); border-color:var(--good); }
  #contactStatus[data-state="warn"]{ background:var(--warn-wash); color:var(--warn); border-color:var(--warn); }

  .contact-alt{ margin-top:18px; font-size:.78rem; color:var(--acero); }
  .contact-alt a{ color:var(--grafito); border-bottom:1px solid var(--line); padding-bottom:1px; transition:border-color .2s ease; }
  @media (hover:hover) and (pointer:fine){
    .contact-alt a:hover{ border-color:var(--grafito); }
  }

  .contact-includes{ margin-top: 36px; padding-top: 28px; border-top:1px solid var(--line); }
  .contact-includes .plan-list{ margin-top:14px; }
  .contact-includes .plan-list li{ font-size:.88rem; }

  @media (max-width: 800px){
    .contact-panel{ grid-template-columns:1fr; }
    .contact-form{ border-left:none; border-top:1px solid var(--line); }
  }

  /* ---------- FOOTER ---------- */
  footer{ border-top:1px solid var(--line); padding-top: 52px; }
  .footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 20px; }
  .footer-note{ color: var(--grafito); font-size:.9rem; line-height:1.55; max-width:38ch; margin-bottom:22px; }
  .footer-social{ display:flex; gap:2px; margin-top:16px; margin-left:-10px; }
  .footer-social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; color: var(--acero); transition: color .2s ease, transform .2s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .footer-social a:hover{ color: var(--grafito); transform: translateY(-1px); }
  }
  .footer-social svg{ width:19px; height:19px; }

  .footer-brand-lockup{ display:flex; align-items:center; gap:0; margin-bottom:18px; }
  .footer-brand-icon{ height:32px; width:32px; flex-shrink:0; }
  /* Hereda del lockup en vez de fijar el color: si no, en la variante oscura
     el wordmark "ARRASCO" desaparecia y solo quedaban el icono y "| ti group". */
  .footer-brand-name{ margin-left:-4px; font-weight:700; font-size:1.24rem; letter-spacing:-0.01em; color: inherit; }

  .footer-col{ display:flex; flex-direction:column; gap:11px; }
  .footer-col-label{
    font-family:'Space Grotesk', sans-serif; font-weight:600;
    font-size:.82rem; color: var(--grafito); margin-bottom:6px;
  }
  .footer-col a{
    font-size:.8rem; color: var(--acero); transition: color .2s ease, transform .2s ease;
    display:inline-flex; align-items:center; gap:5px;
  }
  .footer-col a::after{ content:'→'; font-size:.8em; opacity:0; transition: opacity .2s ease, transform .2s ease; transform: translateX(-3px); }
  @media (hover:hover) and (pointer:fine){
    .footer-col a:hover{ color: var(--grafito); }
  }
  @media (hover:hover) and (pointer:fine){
    .footer-col a:hover::after{ opacity:1; transform: translateX(0); }
  }

  .footer-bottom{
    /* El lateral tiene que repetirse: este shorthand anula el padding de .wrap
       y sin el, en movil, el copyright queda pegado al borde de la pantalla. */
    border-top:1px solid var(--line); padding: 18px 28px 24px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  }
  .footer-bottom-left{ display:flex; flex-direction:column; gap:5px; }

  /* El lockup hereda el color: en el pie claro va grafito solido (nunca
     bronce, regla de marca); en la variante oscura, blanco roto. */
  .footer-brand-lockup{ color: var(--grafito); }

  /* ---------- VARIANTE DE PIE EN GRAFITO (prototipo) ----------
     Nunca negro puro: #1C2630 es el grafito de la marca. Se activa con
     para poder compararla contra la clara. */
  footer{
    background: var(--grafito);
    border-top-color: var(--grafito);
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 44px 44px;
  }
  .footer-brand-lockup{ color: #F2F5F7; }
  .footer-note{ color: #C6D0D8; }
  .footer-brand-name .brand-suffix{ color: #96A3AE; }
  .footer-col-label{ color: #FFFFFF; }
  .footer-col a,
  .footer-social a{ color: #AEBAC4; }
  .footer-copyright{ color: #9AA7B2; }
  .foot-copy,
  .footer-credit{ color: #8B98A4; }
  .footer-credit a{ color: #AEBAC4; border-bottom-color: rgba(255,255,255,.22); }
  .footer-bottom{ border-top-color: rgba(255,255,255,.14); }
  @media (hover:hover) and (pointer:fine){
    .footer-col a:hover,
    .footer-social a:hover,
    .footer-credit a:hover{ color: #FFFFFF; }
  }
  .footer-copyright{ font-family:'Source Serif 4', serif; font-size:.8rem; color: var(--acero); }

  /* Crédito de desarrollo. Peso visual por debajo del copyright: mono, más
     pequeño y en acero suave (4,72:1 sobre blanco, por encima del 4,5 que pide
     el texto normal). "Desarrollo" va en versalitas; el nombre conserva su
     caja de marca — MeVeo360 no se escribe ni con espacio ni en mayúsculas. */
  .footer-credit{
    font-family:'IBM Plex Mono', monospace; font-size:.68rem;
    letter-spacing:.1em; color: var(--acero-soft);
  }
  .footer-credit-label{ text-transform:uppercase; }
  .footer-credit a{ color: var(--acero); border-bottom:1px solid var(--line); transition: color .2s ease, border-color .2s ease; }
  @media (hover:hover) and (pointer:fine){
    @media (hover:hover) and (pointer:fine){
      .footer-credit a:hover{ color: var(--grafito); border-color: var(--grafito); }
    }
  }

  @media (max-width: 760px){
    .footer-grid{ grid-template-columns: 1fr 1fr; gap:36px 24px; }
    .footer-brand{ grid-column: 1 / -1; }
  }
  @media (max-width: 480px){
    .footer-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- MICRO-INTERACCIONES ---------- */
  /* La cabecera se mantiene clara: es instrumento de orientacion, no
     protagonista. Al hacer scroll gana solidez y borde, no color. */
  header.site.is-scrolled{
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(92,107,120,.24);
    box-shadow: 0 1px 18px rgba(28,38,48,.08);
  }

  .system-node .system-code{ transition: color .2s ease; }
  @media (hover:hover) and (pointer:fine){
    .system-node:hover .system-code{ color: var(--grafito); }
    .system-node:hover .system-code::before,
    .system-node:hover .system-code::after{ border-color: var(--bronce); }
  }

  .titleblock{ cursor: crosshair; }
  .diff-stat b{ transition: none; }

  /* ---------- HERO DIAGNOSTIC ---------- */
  .hero-diagnostic-label{
    display:block; margin-top:40px; margin-bottom:14px;
    font-size:.7rem; letter-spacing:.1em; color: var(--acero-soft);
  }
  .hero-diagnostic{ display:flex; flex-direction:column; gap:13px; }
  .diag-item{ display:flex; align-items:baseline; gap:13px; opacity:0; transform:translateY(9px); transition:opacity .45s ease, transform .45s ease; }
  .diag-item.is-visible{ opacity:1; transform:none; }
  .diag-indicator{ font-size:.82rem; color:var(--acero); flex-shrink:0; }
  .diag-text{ font-size:.94rem; color:var(--grafito); line-height:1.5; }
  @media(prefers-reduced-motion:reduce){ .diag-item{ opacity:1; transform:none; transition:none; } }

/* --- clases que sustituyen a los antiguos atributos style=" -------------
   Movidas aqui el 2026-08-25: una CSP por hash NO cubre los atributos
   style=", solo los bloques <style>. Ver la regla de oro, punto 6.8. */
.brand-suffix{ color:var(--acero); font-weight:400; }
.btn-block{ width:100%; justify-content:center; }
.hero-flush{ border-top:none; padding-top:90px; }
.hint-block{ margin-bottom:18px; display:block; }
.inline-flex-12{ margin-top:12px; display:inline-flex; }
.stack-16{ margin-top:16px; }
.stack-36{ margin-top:36px; }

  /* Minimo AA de WCAG 2.5.8 (24 px) para controles que no son texto en prosa.
     Estaban en 22: pasaban por la excepcion de espaciado, pero 2 px cierran la
     ambiguedad sin coste visual. El area tactil de 44 px vive mas abajo. */
  .nav-links a, .hero-trust, .system-link,
  .testimonial-badge a, .footer-col a, .footer-credit a,
  a.contact-value, .method-cta a{
    min-height:24px;
  }
  /* min-height no aplica a elementos inline: estos dos lo eran y por eso se
     quedaban en 15-16 px pese a la regla de arriba. */
  .testimonial-badge a, .footer-credit a, a.contact-value{ display:inline-flex; align-items:center; }

  /* =========================================================================
     PASS TACTIL — anadido 2026-08-26
     Auditoria a 360 / 390 / 430 px con emulacion tactil: 15 controles por
     debajo de 44 px. Movil no es "lo mismo mas estrecho": el area de toque
     se dimensiona para el dedo, no para el puntero.
     Se activa por puntero grueso Y por ancho, para cubrir tambien la ventana
     estrecha en escritorio.
     ========================================================================= */
  @media (pointer: coarse), (max-width: 760px){
    /* Lockup del header */
    .brand{ min-height:44px; display:inline-flex; align-items:center; }

    /* Enlaces del menu hamburguesa. La primera auditoria no los vio porque el
       menu estaba cerrado: hay que medirlos con el panel desplegado. */
    .nav-links a, .nav-cta{ min-height:44px; display:flex; align-items:center; }

    /* Sello de resenas del hero */
    .hero-trust{ min-height:44px; align-items:center; }

    /* "VER SERVICIO ->" de cada SYS-0X */
    .system-link{ min-height:44px; display:inline-flex; align-items:center; }

    /* "Validar en Google ->" de cada testimonio */
    .testimonial-badge a{ min-height:44px; display:inline-flex; align-items:center; }

    /* Pestanas WhatsApp / Formulario */
    .contact-tab{ min-height:44px; }

    /* Enlaces de columna del pie. El gap se anula: con 44 px de alto minimo
       ya hay separacion suficiente, y sumarle 11 px alargaba el pie sin razon. */
    .footer-col{ gap:0; }
    .footer-col a{ min-height:44px; align-items:center; }

    /* Telefono y correo: ahora son enlaces tel:/mailto:, y en movil son
       justamente donde mas se toca. inline no admite min-height. */
    a.contact-value{ min-height:44px; display:inline-flex; align-items:center; }

    /* Credito de desarrollo: crece el area de toque, no la tipografia.
       Se queda en .68rem y en acero suave — no debe parecer un CTA. */
    .footer-credit a{ min-height:44px; display:inline-flex; align-items:center; }
  }