/* ==========================================================================
   MC&H Networks — hoja de estilos del sitio
   Derivada de docs/index-prototipo.html (home aprobado). Los valores vienen
   de tokens.css: no escribir hex ni familias tipográficas literales aquí.
   ==========================================================================
   ÍNDICE
   01. Reset y base
   02. Accesibilidad
   03. Fondo de página (plano — sin textura decorativa)
   04. Rail de dirección IPv6 (elemento de firma)
   05. Cabecera y navegación
   06. Layout de sección
   07. Componentes comunes
   08. Hero
   09. Servicios
   10. Bloque IPv6
   11. Sección "El reto" (estadísticas de adopción)
   12. Componentes de datos y proceso (ipv6.html)
   13. Revelado al hacer scroll
   14. Blog
   15. Formularios y contacto
   16. Pie de página
   17. Movimiento reducido
   ========================================================================== */


/* == 01. Reset y base ===================================================== */

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

html{scroll-behavior:smooth;scroll-padding-top:96px;}

body{
  background:var(--ink);
  color:var(--mist);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

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

ul,ol{list-style:none;}


/* == 02. Accesibilidad ==================================================== */

/* Foco visible en todo elemento interactivo. Nunca eliminar sin reemplazo. */
:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}

/* Salto al contenido: primer tabulable de cada página. */
.skip-link{
  position:absolute;left:var(--sp-4);top:-100px;
  z-index:calc(var(--z-nav) + 10);
  background:var(--amber);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-small);font-weight:700;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--sp-4);}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}


/* == 03. Fondo de página ==================================================
   Plano, --ink sólido, sin textura decorativa persistente.
   Decisión cerrada (CLAUDE.md §4): se probaron y descartaron el fondo de
   red de nodos conectados, el barrido tipo radar y el glow ambiental.
   No reintroducir ninguno. La sensación de página moderna la construyen el
   revelado al scroll y los diagramas/estadísticas reales como contenido. */


/* == 04. Rail de dirección IPv6 ===========================================
   Elemento de firma. Los grupos hex se declaran por página en el marcado
   (`data-t` apunta al id de la sección); este bloque solo los presenta. */

.rail{
  position:fixed;
  right:28px;top:50%;
  transform:translateY(-50%);
  z-index:var(--z-indicator);
  display:flex;flex-direction:column;gap:18px;
  font-family:var(--mono);
  font-size:var(--fs-micro);
}
.rail .grp{
  display:flex;align-items:center;gap:var(--sp-2);
  color:var(--mist-dim);
  transition:color .4s var(--ease);
}
.rail .grp .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--slate-line);
  flex-shrink:0;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.rail .grp:hover{color:var(--mist);}
.rail .grp.active{color:var(--cyan);}
.rail .grp.active .dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.rail .sep{color:var(--slate-line);}

@media (max-width:900px){.rail{display:none;}}


/* == 05. Cabecera y navegación ============================================ */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-4);
  padding:22px clamp(20px,5vw,64px);
  /* Fallback primero para navegadores anteriores a color-mix (pre-2023);
     la segunda declaración deriva del token y lo sigue si --ink cambia. */
  background:linear-gradient(to bottom, rgba(15,20,40,.95), rgba(15,20,40,0));
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 95%, transparent),
    color-mix(in srgb, var(--ink) 0%, transparent));
}

.site-header .logo{display:flex;align-items:center;}
.site-header .logo img{height:34px;width:auto;}

.site-nav{
  display:flex;gap:32px;
  font-family:var(--mono);font-size:.82rem;
  color:var(--mist-dim);
}
.site-nav a{white-space:nowrap;transition:color var(--dur) var(--ease);}
.site-nav a:hover{color:var(--amber);}
/* Enlace activo del nav. Selector por presencia del atributo, no por su
   valor: "page" es la página actual y "true" una hija de esa sección
   (p. ej. ipv6.html bajo Servicios). Ambas se destacan igual. */
.site-nav a[aria-current]{color:var(--mist);border-bottom:1px solid var(--amber);padding-bottom:2px;}

/* Se aprieta el espaciado antes de llegar al menú móvil. */
@media (max-width:1024px){
  .site-nav{gap:20px;font-size:.78rem;}
}

.nav-toggle{
  display:none;
  background:none;border:1px solid var(--slate-line);
  color:var(--mist);
  font-family:var(--mono);font-size:var(--fs-micro);
  padding:9px 14px;border-radius:var(--radius-sm);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan);}

@media (max-width:760px){
  .nav-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);}
  .site-nav{
    position:absolute;top:100%;right:clamp(20px,5vw,64px);left:clamp(20px,5vw,64px);
    flex-direction:column;gap:0;
    background:var(--slate);
    border:var(--border);border-radius:var(--radius);
    padding:var(--sp-2) 0;
    font-size:var(--fs-small);
  }
  .site-nav[hidden]{display:none;}
  .site-nav a{padding:var(--sp-3) var(--sp-6);}
  .site-nav a[aria-current]{border-bottom:none;border-left:2px solid var(--amber);}
}


/* == 06. Layout de sección ================================================ */

.section{
  position:relative;z-index:1;
  padding:140px clamp(20px,5vw,64px) 100px;
  max-width:var(--maxw);margin:0 auto;
}
/* Secciones con fondo propio: el color sangra a todo el ancho y el contenido
   se sigue limitando al contenedor. */
.section--panel{background:var(--slate);max-width:none;}
.section--panel > *{max-width:var(--maxw);margin-inline:auto;}

.section-head h2{
  font-family:var(--display);font-size:var(--fs-h2);
  font-weight:700;line-height:var(--lh-head);
  margin-bottom:14px;
}
.section-head p{color:var(--mist-dim);max-width:60ch;margin-bottom:56px;}

/* Subtítulo dentro de una sección. Selector de hijo directo a propósito:
   los h3 de tarjeta (.svc, .reg-card, .phase, .post) están anidados y no
   deben heredar este tamaño. */
.section > h3{
  font-family:var(--display);font-size:var(--fs-h3);
  line-height:var(--lh-head);
  margin:var(--sp-16) 0 var(--sp-6);
}


/* == 07. Componentes comunes ============================================== */

/* Etiqueta de sección */
.tag{
  font-family:var(--mono);font-size:var(--fs-label);color:var(--amber);
  letter-spacing:var(--ls-label);
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.tag::before{content:'';width:26px;height:1px;background:var(--amber);flex-shrink:0;}
.tag--center{justify-content:center;}

/* Botones */
.btn{
  font-family:var(--mono);font-size:var(--fs-small);
  padding:14px 26px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary{background:var(--amber);color:var(--ink);font-weight:700;}
.btn-primary:hover{background:var(--amber-hover);transform:translateY(-2px);}
.btn-ghost{border-color:var(--slate-line);color:var(--mist);background:none;}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}

/* Aviso de urgencia — reservado a IPv4/plazos regulatorios */
.urgency{
  margin-top:56px;padding:18px 20px;
  border-left:2px solid var(--coral);
  background:rgba(232,96,74,.06);
  background:color-mix(in srgb, var(--coral) 6%, transparent);
  font-family:var(--mono);font-size:.82rem;color:var(--mist-dim);
  max-width:60ch;
}
.urgency b{color:var(--coral);}

/* Píldora de estado */
.pill{
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--amber);
  border:1px solid var(--amber);border-radius:20px;
  padding:4px 12px;display:inline-block;
  line-height:1.4;
}
.pill--muted{color:var(--mist-dim);border-color:var(--slate-line);}

/* Nota del equipo (el "friki de redes" contenido) */
.quip{
  font-family:var(--mono);font-size:var(--fs-small);color:var(--cyan);
  margin-top:24px;padding-top:20px;border-top:1px solid var(--slate-line);
}


/* == 08. Hero ============================================================= */

.hero{
  padding-top:180px;min-height:92vh;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-address{
  font-family:var(--mono);font-size:.85rem;color:var(--mist-dim);
  margin-bottom:28px;
}
.hero-address b{color:var(--cyan);font-weight:500;}

h1{
  font-family:var(--display);
  font-size:var(--fs-hero);
  line-height:var(--lh-tight);
  font-weight:700;
  letter-spacing:-.01em;
  max-width:15ch;
}
h1 .accent{color:var(--cyan);}

.hero-sub{
  margin-top:28px;max-width:56ch;
  font-size:var(--fs-lead);color:var(--mist-dim);
}
.hero-cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;}

/* Hero reducido para páginas interiores (todo excepto el home): mismo h1,
   sin el alto de viewport completo ni la línea de terminal del home. */
.page-hero{padding-top:180px;padding-bottom:70px;}
.page-hero h1{max-width:22ch;}
/* Estado suelto sobre el h1 (p. ej. "Próximamente" en mesa-de-ayuda.html):
   .pill normalmente vive dentro de un flex con gap y no trae margen propio. */
.page-hero .pill{margin-bottom:var(--sp-4);}


/* == 09. Servicios ========================================================
   Rejilla tipo "bloques de red": el gap de 1px sobre el color de borde
   dibuja las divisiones, sin bordes redondeados. */

.services{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--slate-line);
  border:var(--border);
}
/* Cada tarjeta es un <a> completo, no un contenedor con enlace anidado. */
.svc{
  background:var(--ink);
  padding:36px 30px;
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:background var(--dur) var(--ease);
}
.svc:hover{background:var(--slate);}
.svc .num{font-family:var(--mono);font-size:.75rem;color:var(--mist-dim);}
.svc h3{font-family:var(--display);font-size:var(--fs-h3);margin:16px 0 12px;line-height:var(--lh-head);}
.svc p{color:var(--mist-dim);font-size:.95rem;margin-bottom:18px;}
.svc .pill{margin-top:auto;}
.svc.featured .num,
.svc.featured h3{color:var(--cyan);}

/* Pie de tarjeta con estado + enlace "Ver más →" (hub de servicios). En el
   teaser del home, sin este wrapper, el pill se sigue empujando abajo por
   la regla de arriba. */
.svc-foot{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;
}
.svc-more{
  font-family:var(--mono);font-size:.78rem;color:var(--mist-dim);
  transition:color var(--dur) var(--ease);
}
.svc:hover .svc-more,
.svc:focus-visible .svc-more{color:var(--amber);}
.svc.featured:hover .svc-more,
.svc.featured:focus-visible .svc-more{color:var(--cyan);}

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

/* Enlace de cierre de sección ("Ver todos los servicios →") */
.section-more{text-align:center;margin-top:34px;}
.section-more a{
  font-family:var(--mono);font-size:.85rem;color:var(--mist-dim);
  border-bottom:1px solid var(--slate-line);padding-bottom:2px;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.section-more a:hover{color:var(--cyan);border-color:var(--cyan);}


/* == 10. Bloque IPv6 ====================================================== */

.ipv6-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
@media (max-width:900px){.ipv6-grid{grid-template-columns:1fr;gap:40px;}}

.ipv6-copy h2{font-family:var(--display);font-size:var(--fs-h2);line-height:var(--lh-head);margin-bottom:20px;}
.ipv6-copy p{color:var(--mist-dim);margin-bottom:16px;max-width:56ch;}

/* Tabla de contraste IPv4/IPv6 */
.addr-block{
  font-family:var(--mono);
  background:var(--ink);
  border:var(--border);border-radius:var(--radius-lg);
  padding:28px;font-size:.85rem;
}
.addr-block .line{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:9px 0;
  border-bottom:1px solid var(--slate-line);
  color:var(--mist-dim);
}
.addr-block .line:last-child{border-bottom:none;}
.addr-block .line b{color:var(--mist);font-weight:500;text-align:right;}
.addr-block .line.ok b{color:var(--cyan);}
.addr-block .line.bad b{color:var(--coral);}


/* == 11. Sección "El reto" =================================================
   Divisor de página con fondo propio para mostrar estadísticas reales
   (adopción IPv6). Los paneles son ejemplos ilustrativos de la brecha
   regional/mundial — nunca deben leerse como "países donde operamos". */

.diagram-divider{
  position:relative;z-index:1;
  background:var(--slate);
  border-top:1px solid var(--slate-line);
  border-bottom:1px solid var(--slate-line);
  padding:90px clamp(20px,5vw,64px);
}
.dd-head{max-width:640px;margin:0 auto 50px;text-align:center;}
.dd-head h2{font-family:var(--display);font-size:1.5rem;line-height:var(--lh-head);margin-bottom:10px;}
.dd-head p{color:var(--mist-dim);font-size:.95rem;}

.dd-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--slate-line);border:var(--border);
  max-width:1000px;margin:0 auto;
}
.dd-grid-5{grid-template-columns:repeat(5,1fr);max-width:1200px;}
@media (max-width:900px){.dd-grid-5{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.dd-grid{grid-template-columns:1fr;}}

.dd-panel{background:var(--ink);padding:34px 30px 26px;}
.dd-panel .dd-label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--mist-dim);
  display:flex;align-items:center;gap:8px;margin-bottom:22px;
}
/* Variantes reservadas para comparaciones tipo IPv4/IPv6 (dos paneles). */
.dd-panel.bad .dd-label{color:var(--coral);}
.dd-panel.good .dd-label{color:var(--cyan);}
.dd-panel p{font-size:.85rem;color:var(--mist-dim);}

.dd-panel .dd-value{font-family:var(--display);font-size:2rem;color:var(--mist);}
.dd-value--high{color:var(--cyan);}
.dd-value--mid{color:var(--amber);}
.dd-value--low{color:var(--coral);}

.dd-caption{
  text-align:center;color:var(--mist-dim);
  font-family:var(--mono);font-size:.8rem;margin-top:26px;
}
.dd-caption a{color:var(--cyan);}


/* == 12. Componentes de datos y proceso ====================================
   Gráfico de barras, cifra protagonista, fichas de resolución y fases del
   servicio. Construidos para ipv6.html; reutilizables en otras páginas. */

/* --- Gráfico de barras horizontales --------------------------------------
   Una sola serie (adopción IPv6 por país) con énfasis: la barra en foco va
   en --cyan y el resto en --cyan-dim. No es una paleta categórica — el color
   no identifica países, solo separa "el foco" del contexto. Cada barra lleva
   su valor como texto, así que el gráfico no depende del color para leerse
   y no necesita tooltip: no hay dato oculto que revelar. */

.bars{
  --bar-label-w:132px;
  --bar-value-w:78px;
  --ref:0%;               /* posición de la línea de referencia, por página */
  display:grid;gap:var(--sp-3);
  margin:var(--sp-8) 0 var(--sp-6);
}

/* Rótulo de la línea de referencia, alineado a la columna de la pista. */
.bars-ref{
  display:grid;
  grid-template-columns:var(--bar-label-w) 1fr var(--bar-value-w);
  gap:var(--sp-4);
  margin-bottom:var(--sp-1);
}
.bars-ref-plot{position:relative;grid-column:2;height:1.4em;}
.bars-ref-plot span{
  position:absolute;left:var(--ref);top:0;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-micro);
  color:var(--amber);
}

.bar-row{
  display:grid;
  grid-template-columns:var(--bar-label-w) 1fr var(--bar-value-w);
  gap:var(--sp-4);
  align-items:center;
}
.bar-label{
  font-family:var(--mono);font-size:var(--fs-small);
  color:var(--mist-dim);
}
.bar-value{
  font-family:var(--mono);font-size:var(--fs-small);
  color:var(--mist-dim);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Pista completa = 100% de usuarios. El vacío a la derecha de cada barra
   es el mensaje de la sección, así que la escala no se recorta. */
.bar-track{
  position:relative;
  height:22px;
  background:var(--slate);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.bar-fill{
  display:block;height:100%;
  background:var(--cyan-dim);
  /* Extremo del dato redondeado, base anclada en cero. */
  border-radius:0 var(--radius) var(--radius) 0;
}
/* Línea de referencia (promedio mundial): la dibuja cada pista, de modo que
   al apilarse las filas se lee como una sola vertical continua. */
.bar-track::after{
  content:'';position:absolute;top:0;bottom:0;left:var(--ref);
  width:1px;background:var(--amber);opacity:.75;
}

.bar-row.is-emphasis .bar-label,
.bar-row.is-emphasis .bar-value{color:var(--mist);}
.bar-row.is-emphasis .bar-fill{background:var(--cyan);}

/* En pantalla angosta la etiqueta y el valor comparten la primera fila y la
   pista pasa a ocupar la segunda completa. Se colocan las tres celdas de
   forma explícita: dejarlo al autoflow empujaría el valor a una fila propia. */
@media (max-width:600px){
  .bar-row{grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4);}
  .bar-label{grid-area:1 / 1 / 2 / 2;}
  .bar-value{grid-area:1 / 2 / 2 / 3;}
  .bar-track{grid-area:2 / 1 / 3 / 3;}
  .bars-ref{display:none;}   /* el promedio mundial queda en la nota de fuente */
}

.bars-source{
  font-family:var(--mono);font-size:var(--fs-micro);
  color:var(--mist-dim);
  margin-top:var(--sp-4);
}
.bars-source a{color:var(--cyan);}

/* --- Cifra protagonista ---------------------------------------------------
   Un solo número que carga una sección entera. No es un gráfico: es el dato
   en sí, así que va en tipografía, no en marcas. */

.stat-hero{
  border-left:2px solid var(--coral);
  background:rgba(232,96,74,.06);
  background:color-mix(in srgb, var(--coral) 6%, transparent);
  padding:var(--sp-8) var(--sp-8) var(--sp-6);
  max-width:60ch;
}
.stat-hero-value{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3rem,8vw,4.5rem);
  line-height:1;color:var(--coral);
  margin-bottom:var(--sp-3);
}
.stat-hero-body{font-size:var(--fs-lead);color:var(--mist);}
.stat-hero-body b{color:var(--coral);font-weight:700;}
.stat-hero-note{
  font-family:var(--mono);font-size:var(--fs-micro);
  color:var(--mist-dim);margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:1px solid var(--slate-line);
}

/* --- Fichas de resolución ------------------------------------------------- */

.reg-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--slate-line);border:var(--border);
  margin-bottom:var(--sp-12);
}
@media (max-width:800px){.reg-grid{grid-template-columns:1fr;}}

.reg-card{background:var(--ink);padding:34px 30px;}
.reg-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4);
}
.reg-num{font-family:var(--mono);font-size:var(--fs-micro);color:var(--amber);letter-spacing:var(--ls-label);}
.reg-card h3{font-family:var(--display);font-size:var(--fs-h3);line-height:var(--lh-head);margin-bottom:var(--sp-4);}
.reg-card > p{color:var(--mist-dim);font-size:.95rem;margin-bottom:var(--sp-4);}
.reg-card strong{color:var(--mist);font-weight:600;}
.reg-card em{color:var(--mist);font-style:italic;}

/* Estado del plazo: nunca solo color — siempre acompañado del texto. */
.reg-status{
  font-family:var(--mono);font-size:var(--fs-micro);
  border:1px solid var(--slate-line);border-radius:20px;
  padding:4px 12px;color:var(--mist-dim);white-space:nowrap;
}
.reg-status--expired{color:var(--coral);border-color:var(--coral);}

.reg-facts{font-size:.9rem;border-top:1px solid var(--slate-line);padding-top:var(--sp-4);}
.reg-facts div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:7px 0;}
.reg-facts dt{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mist-dim);}
.reg-facts dd{color:var(--mist);text-align:right;font-size:.9rem;}
.reg-facts dd.is-expired{color:var(--coral);}

/* --- Fases del servicio --------------------------------------------------- */

.phases{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--slate-line);border:var(--border);
}
@media (max-width:800px){.phases{grid-template-columns:1fr;}}

.phase{background:var(--ink);padding:40px 30px;}
.phase-num{
  font-family:var(--display);font-weight:700;
  font-size:2.5rem;line-height:1;color:var(--cyan);
  margin-bottom:var(--sp-4);
}
/* h4 a propósito: cada fase ahora anida bajo el h3 "Ejecución" — un nivel
   más adentro que cuando esta rejilla colgaba directo del h2 de sección. */
.phase h4{font-family:var(--display);font-size:var(--fs-h3);line-height:var(--lh-head);}
.phase p{color:var(--mist-dim);font-size:.95rem;margin-top:var(--sp-3);}

/* --- Rejilla de bloques genérica ------------------------------------------
   Para 2-3 ítems del mismo peso que NO son pasos en orden (a diferencia de
   .phases, que numera con romanos porque ahí sí hay una secuencia
   confirmada). Áreas de trabajo, alcance de un servicio, etc. */

.block-grid{
  display:grid;gap:1px;background:var(--slate-line);border:var(--border);
}
.block-grid--2{grid-template-columns:repeat(2,1fr);}
.block-grid--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:800px){
  .block-grid--2,.block-grid--3{grid-template-columns:1fr;}
}

.block-item{background:var(--ink);padding:34px 30px;}
.block-item .num{font-family:var(--mono);font-size:.75rem;color:var(--mist-dim);margin-bottom:var(--sp-4);}
.block-item h3{font-family:var(--display);font-size:var(--fs-h3);line-height:var(--lh-head);margin-bottom:var(--sp-3);}
.block-item p{color:var(--mist-dim);font-size:.95rem;}


/* == 13. Revelado al hacer scroll ==========================================
   Mejora progresiva real: sin JS, `.reveal` es simplemente visible desde el
   inicio (no depende de que el observer llegue a ejecutarse). El estado
   oculto solo se activa bajo `.js`, clase que pone un script mínimo en la
   cabecera de cada página antes del primer render. */

.reveal{opacity:1;transform:none;}
.js .reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in-view{opacity:1;transform:translateY(0);}


/* == 14. Blog ============================================================= */

/* auto-fit en vez de repeat(3,1fr): a diferencia del resto de rejillas del
   sitio (.services, .phases, .reg-grid...), que siempre tienen un número
   fijo de ítems, esta crece con el tiempo — hoy 2 artículos, más adelante
   más. Con auto-fit nunca queda una columna vacía cuando hay menos de 3,
   y no hace falta tocar el CSS cada vez que se publica un post. Se
   contrae a una columna sola por debajo de ~600px sin media query aparte. */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:28px;
}

.post{
  position:relative;
  border:var(--border);border-radius:var(--radius-lg);
  padding:26px;
  transition:border-color var(--dur) var(--ease);
}
.post:hover,
.post:focus-within{border-color:var(--cyan);}
.post .kicker{
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--amber);
  letter-spacing:var(--ls-label);
  margin-bottom:12px;
}
.post h3,.post h4{font-family:var(--display);font-size:1.05rem;margin-bottom:10px;line-height:var(--lh-head);}
.post p{font-size:.88rem;color:var(--mist-dim);}
.post time{display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--mist-dim);margin-bottom:12px;}
/* Toda la tarjeta es zona de clic sin anidar enlaces. */
.post .post-link::after{content:'';position:absolute;inset:0;}

/* Encabezado de artículo (blog/[slug].html): kicker + fecha, luego h1.
   Sin .page-hero a propósito — no necesita su padding-bottom ni su
   margen de pill, y el artículo sigue directo con .prose debajo. */
.article-head{padding-top:180px;margin-bottom:var(--sp-8);}
.article-head h1{max-width:32ch;}
.article-meta{
  display:flex;align-items:center;gap:var(--sp-3);
  font-family:var(--mono);font-size:var(--fs-label);
  margin-bottom:var(--sp-4);
}
.article-meta .kicker{color:var(--amber);letter-spacing:var(--ls-label);}
.article-meta .sep{color:var(--slate-line);}
.article-meta time{color:var(--mist-dim);}

/* Cuerpo de artículo */
.prose{max-width:var(--maxw-prose);}
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre{margin-bottom:var(--sp-6);}
.prose h2{font-family:var(--display);font-size:var(--fs-h2);line-height:var(--lh-head);margin:var(--sp-12) 0 var(--sp-4);}
.prose h3{font-family:var(--display);font-size:var(--fs-h3);margin:var(--sp-8) 0 var(--sp-3);}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(92,173,162,.4);}
.prose a{border-bottom-color:color-mix(in srgb, var(--cyan) 40%, transparent);}
.prose a:hover{border-bottom-color:var(--cyan);}
.prose strong{color:var(--mist);}
.prose ul{list-style:none;}
.prose ul li{position:relative;padding-left:var(--sp-6);margin-bottom:var(--sp-3);color:var(--mist-dim);}
.prose ul li::before{content:'::';position:absolute;left:0;font-family:var(--mono);color:var(--cyan);}
.prose ol{counter-reset:step;}
.prose ol li{position:relative;padding-left:var(--sp-8);margin-bottom:var(--sp-3);color:var(--mist-dim);counter-increment:step;}
.prose ol li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;font-family:var(--mono);font-size:var(--fs-small);color:var(--amber);}
.prose blockquote{
  border-left:2px solid var(--slate-line);
  padding-left:var(--sp-6);color:var(--mist-dim);
}
.prose pre{
  font-family:var(--mono);font-size:var(--fs-small);
  background:var(--slate);border:var(--border);border-radius:var(--radius);
  padding:var(--sp-4);overflow-x:auto;
}
.prose code{font-family:var(--mono);font-size:.9em;color:var(--cyan);}
.prose pre code{color:var(--mist);}

/* Frase de cierre fija de cada artículo (banco en docs/) */
.closing-line{
  font-family:var(--display);font-size:var(--fs-h3);color:var(--cyan);
  line-height:var(--lh-head);
  margin:var(--sp-12) 0;padding:var(--sp-6) 0;
  border-top:1px solid var(--slate-line);
  border-bottom:1px solid var(--slate-line);
  max-width:var(--maxw-prose);
}


/* == 15. Formularios y contacto =========================================== */

.form{max-width:52ch;display:grid;gap:var(--sp-6);text-align:left;}
.field{display:grid;gap:var(--sp-2);}
.field label{
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--mist-dim);
  letter-spacing:var(--ls-label);text-transform:uppercase;
}
.field input,
.field textarea{
  font-family:var(--body);font-size:var(--fs-body);
  color:var(--mist);
  background:var(--slate);
  border:var(--border);border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4);
  width:100%;
  transition:border-color var(--dur) var(--ease);
}
.field input:hover,
.field textarea:hover{border-color:var(--mist-dim);}
.field input:focus,
.field textarea:focus{border-color:var(--cyan);}
.field textarea{resize:vertical;min-height:150px;}
.field input::placeholder,
.field textarea::placeholder{color:var(--mist-dim);opacity:.6;}

.contact-center{text-align:center;padding-bottom:160px;}
.contact-center h2{font-family:var(--display);font-size:var(--fs-h2-lg);line-height:var(--lh-head);margin-bottom:18px;}
.contact-center p{color:var(--mist-dim);max-width:50ch;margin:0 auto 36px;}
.contact-center .form{margin-inline:auto;}

/* Página de contacto: nota bajo el mailto directo, y separador antes del
   formulario (dos caminos hacia el mismo correo, no un flujo secuencial).
   Selector calificado con .contact-center a propósito: sin eso, la regla
   genérica ".contact-center p" (más específica por combinar clase+tag)
   gana y el margin-top de acá queda sin efecto. */
.contact-note{font-size:var(--fs-small);margin-top:var(--sp-4);}
.contact-center .contact-note{font-size:var(--fs-small);margin-top:var(--sp-4);}
.contact-center .contact-divider{margin-top:var(--sp-16);}

/* Los enlaces sueltos dentro de texto corrido necesitan color propio: la
   regla global `a{color:inherit}` los dejaría indistinguibles del párrafo. */
.contact-note a{color:var(--cyan);border-bottom:1px solid var(--slate-line);}
.contact-note a:hover{border-bottom-color:var(--cyan);}

/* Dirección IPv6 completa: cierre visual de página */
.final-addr{
  font-family:var(--mono);color:var(--cyan);font-size:.9rem;
  margin-top:50px;letter-spacing:.03em;
}


/* == 16. Pie de página ==================================================== */

.site-footer{
  position:relative;z-index:1;
  padding:30px clamp(20px,5vw,64px);
  border-top:1px solid var(--slate-line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--mono);font-size:.75rem;color:var(--mist-dim);
}
.site-footer a:hover{color:var(--amber);}


/* == 17. Movimiento reducido ==============================================
   Se respeta la preferencia del sistema: sin scroll suave y sin transiciones. */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .btn-primary:hover{transform:none;}
}