/* ==========================================================================
   pages.css — hoja compartida para páginas de contenido (servicios, blog).
   Mismo sistema de marca que la home: fondo verde bosque #0f1f10, texto
   off-white, acento lima #C7FF2E, tipografía Geist (autohospedada).
   Rutas relativas a assets/css/ (igual que deck.css).
   ========================================================================== */
@font-face{ font-family:'Geist'; src:url('../fonts/Geist-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Geist Mono'; src:url('../fonts/GeistMono-Variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

:root{
  --bg:#0f1f10; --bg-2:#0b170c; --ink:#f5f4f2; --muted:#9db09a; --muted-2:#6f8570;
  --lime:#C7FF2E; --lime-soft:rgba(199,255,46,.12);
  --line:rgba(245,244,242,.10); --line-2:rgba(245,244,242,.06); --card:rgba(245,244,242,.03);
  --disp:"Geist", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
  --maxw:1120px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--disp); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* fondo atmosférico verde bosque como la home (con profundidad, SIN cuadrícula) */
/* Fondo atmosférico. NO va fixed: se pinta sobre el documento y se repite en
   vertical con un patrón que se funde en los bordes del mosaico. Así no hay
   ninguna línea de corte —ni al hacer scroll ni en capturas de página completa. */
body{ position:relative; }
body::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(44% 30% at 12% 22%, rgba(40,90,55,.30), transparent 70%),
    radial-gradient(40% 28% at 88% 48%, rgba(30,80,50,.24), transparent 72%),
    radial-gradient(50% 32% at 26% 76%, rgba(199,255,46,.045), transparent 74%);
  background-size:100% 1700px; background-repeat:repeat-y; }
/* halo de bienvenida, solo arriba del todo */
body::after{ content:""; position:absolute; left:0; right:0; top:0; height:900px; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 60% at 50% -12%, rgba(199,255,46,.07), transparent 62%); }
/* grano: capa fija de tamaño pequeño, no puede marcar bordes */
html::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.2; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* La barra de navegación vive en assets/css/nav.css, compartida con la home.
   Estaba duplicada en las dos hojas y ese duplicado es lo que hacía que el
   menú cambiase de tamaño según la página. */

/* ---- HERO de página ---- */
.pg-hero{ padding:72px 0 40px; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--lime);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--lime); opacity:.7; }
.pg-hero h1{ font-family:var(--disp); font-weight:600; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(34px,5.6vw,60px); max-width:16ch; }
.pg-hero h1 .lime{ color:var(--lime); }
.pg-hero .lead{ color:var(--muted); font-size:clamp(17px,2vw,21px); max-width:58ch; margin-top:22px; }

/* ---- Secciones ---- */
section{ padding:44px 0; }
h2{ font-family:var(--disp); font-weight:600; letter-spacing:-.03em; line-height:1.08; font-size:clamp(26px,3.6vw,40px); }
h2 .lime{ color:var(--lime); }
.sec-lead{ color:var(--muted); font-size:clamp(16px,1.9vw,19px); max-width:62ch; margin-top:16px; }
p{ color:var(--muted); font-size:17px; max-width:64ch; }
p + p{ margin-top:16px; }
strong,b{ color:var(--ink); font-weight:600; }

/* ---- Cards "cómo lo hacemos" ---- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:32px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px; }
.card h3{ font-family:var(--disp); font-weight:600; letter-spacing:-.02em; font-size:20px; color:var(--ink); }
.card p{ font-size:15.5px; margin-top:10px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tags span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#dcecc2;
  border:1px solid var(--line); border-radius:999px; padding:6px 11px; }

/* ---- FAQ ---- */
.faq{ margin-top:28px; border-top:1px solid var(--line-2); }
.faq details{ border-bottom:1px solid var(--line-2); padding:18px 0; }
.faq summary{ font-family:var(--disp); font-weight:600; font-size:17px; color:var(--ink); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--lime); font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin-top:12px; font-size:16px; }

/* ---- CTA ---- */
.cta{ text-align:center; background:linear-gradient(180deg,rgba(199,255,46,.06),transparent); border:1px solid var(--line);
  border-radius:24px; padding:52px 28px; margin-top:20px; }
.cta h2{ max-width:20ch; margin:0 auto; }
.cta p{ margin:16px auto 0; }
.btn-lime{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; background:var(--lime); color:#0b170c;
  font-family:var(--disp); font-weight:600; font-size:16px; border-radius:999px; padding:15px 30px;
  transition:transform .16s, box-shadow .16s; }
.btn-lime:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(199,255,46,.5); }

/* ---- Cross-links (otros núcleos) ---- */
.crosslinks{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.crosslinks a{ display:block; border:1px solid var(--line); border-radius:16px; padding:20px; transition:border-color .18s, background .18s; }
.crosslinks a:hover{ border-color:var(--lime); background:rgba(199,255,46,.04); }
.crosslinks .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.crosslinks .t{ display:block; margin-top:8px; font-weight:600; color:var(--ink); font-size:17px; }

/* ---- Breadcrumb ---- */
.crumbs{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding-top:96px; }
.crumbs a:hover{ color:var(--lime); }
.crumbs span{ color:var(--muted-2); }

/* ---- Barra de categorías (filtro por núcleo) ---- */
.cat-bar{ display:flex; flex-wrap:wrap; gap:9px; margin:34px 0 6px; }
.cat{ font-family:var(--disp); font-size:14px; font-weight:500; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:color .18s, background .18s, border-color .18s; }
.cat:hover{ color:var(--ink); border-color:rgba(199,255,46,.35); }
.cat.active{ color:#0b170c; background:var(--lime); border-color:var(--lime); }

/* ---- Blog listado (portadas de degradado con grano) ---- */
.posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:36px 26px; margin-top:26px; }
.post-card{ display:block; border:none; padding:0; background:none; }

/* portada: degradado de marca + grano definido + etiqueta de núcleo */
.post-cover{ --hx:20%; --hy:16%; --dx:84%; --dy:86%; --ang:150deg;
  position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; isolation:isolate; }
.post-cover .cov-label{ position:relative; z-index:3; font-family:var(--disp); font-weight:600;
  font-size:clamp(24px,2.6vw,34px); letter-spacing:-.02em; color:#fff; text-align:center;
  padding:0 18px; text-shadow:0 2px 26px rgba(0,0,0,.28); }
/* grano bien definido: ruido feTurbulence en overlay */
.post-cover::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; opacity:.58; mix-blend-mode:overlay; }
/* velo sutil abajo para que la etiqueta respire */
.post-cover::before{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.28), transparent 60%); }
.post-card:hover .post-cover{ transform:translateY(-3px); }
.post-cover{ transition:transform .2s ease; }

/* 9 PORTADAS — foto premium + velo + título.
   Antes eran degradados CSS: cumplían, pero al lado del resto de la web se
   veían simplonas y todas hermanas. Ahora cada una es una FOTO abstracta en el
   lenguaje que ya usa el fondo del cierre (cta-demo.webp): formas de vidrio,
   seda, metal o humo en verde profundo con acento lima sobre casi negro.
   Se mantiene lo que estaba bien —una por artículo, variando color y forma— y
   se sube el acabado.

   Se redefinen los MISMOS .pcN en vez de inventar clases nuevas: el marcado de
   las 9 fichas y del listado no se toca, y quien cambie una foto solo edita
   aquí. El velo va en la misma declaración, delante de la imagen: oscurece el
   centro, que es donde cae el título, sin apagar la foto en los bordes.

   Cada foto se eligió por lo que CUENTA, no al azar: cristal roto para las
   fugas, ondas que se expanden para el alcance, planos apilados para las fases
   del embudo. Medido: el blanco del título saca 4,7:1 o más en las nueve.

   ⚠️ Llevan caché inmutable de un año y versionar-assets.py NO cubre imágenes:
   si cambias una foto, súbele el ?v= a mano. */
.pc1{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/no-compra.webp?v=1") center/cover no-repeat,#0b170c; }
.pc2{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/trafico.webp?v=1") center/cover no-repeat,#0b170c; }
.pc3{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/contenidos.webp?v=1") center/cover no-repeat,#0b170c; }
.pc4{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/conversion.webp?v=1") center/cover no-repeat,#0b170c; }
.pc5{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/embudo.webp?v=1") center/cover no-repeat,#0b170c; }
.pc6{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/automatizar.webp?v=1") center/cover no-repeat,#0b170c; }
.pc7{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/agente-ia.webp?v=1") center/cover no-repeat,#0b170c; }
.pc8{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/escalar.webp?v=1") center/cover no-repeat,#0b170c; }
.pc9{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/kpis.webp?v=1") center/cover no-repeat,#0b170c; }

/* Serie del embudo de propuesta de valor (ago-2026). Mismo tratamiento que
   las nueve de arriba: foto abstracta oscura + velo, el titulo en blanco. */
.pc10{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/proveedores.webp?v=1") center/cover no-repeat,#0b170c; }
.pc11{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/por-donde-empezar.webp?v=1") center/cover no-repeat,#0b170c; }
.pc12{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/interno-o-externo.webp?v=1") center/cover no-repeat,#0b170c; }
.pc13{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/proyecto-muerto.webp?v=1") center/cover no-repeat,#0b170c; }
.pc14{ background:linear-gradient(180deg, rgba(6,16,8,.34) 0%, rgba(6,16,8,.30) 45%, rgba(6,16,8,.60) 100%),radial-gradient(72% 64% at 50% 50%, rgba(6,16,8,.46), rgba(6,16,8,0) 74%),url("/assets/blog/portadas/elegir-agencia.webp?v=1") center/cover no-repeat,#0b170c; }

.post-body{ padding:16px 2px 0; }
.post-body .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-top:12px; }
.post-body h2{ font-size:19px; margin-top:8px; letter-spacing:-.02em; line-height:1.18; }
.post-card:hover .post-body h2{ color:var(--lime); }
.post-body h2{ transition:color .18s; }
.post-body .excerpt{ font-size:15px; margin-top:8px; color:var(--muted); }

/* ---- Portada de artículo (misma estética que las tarjetas del blog) ---- */
.art-cover{ --hx:18%;--hy:18%;--dx:86%;--dy:84%;--ang:150deg;
  position:relative; width:100%; aspect-ratio:24/9; min-height:180px; border-radius:22px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; isolation:isolate; margin:6px 0 4px; }
@media(max-width:600px){ .art-cover{ aspect-ratio:16/10; min-height:0; } }
.art-cover .cov-label{ position:relative; z-index:3; font-family:var(--disp); font-weight:600;
  font-size:clamp(28px,4.6vw,50px); letter-spacing:-.03em; color:#fff; text-align:center; padding:0 24px;
  text-shadow:0 2px 30px rgba(0,0,0,.3); }
.art-cover::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; opacity:.55; mix-blend-mode:overlay; }
.art-cover::before{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.26), transparent 60%); }

/* ---- Artículo ---- */
/* Imagen dentro del cuerpo del artículo. No es decoración: los artículos que
   solo son texto corrido se abandonan antes, y Google lee el alt y el pie como
   contexto. Va a ancho de columna con height:auto —la trampa que ya nos costó
   las fichas de caso: sin él, el height del atributo estira la foto—. */
.art-fig{ margin:36px 0 0; }
.art-fig img{ width:100%; height:auto; display:block; border-radius:18px; }
.art-fig figcaption{ margin-top:12px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
/* Puntos clave: el resumen escaneable de arriba. Es lo que se lleva el que no
   va a leer los 1.500 palabras, y lo que las IA citan cuando resumen la página. */
.art-tldr{ margin:30px 0 6px; padding:24px 26px; border-radius:18px;
  border:1px solid var(--line-2); background:rgba(199,255,46,.05); }
.art-tldr h2{ font-size:15px !important; margin:0 0 12px !important; font-family:var(--mono);
  font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.art-tldr ul{ margin:0; }
.art-tldr li{ margin-top:8px; }

.article{ max-width:720px; margin:0 auto; }
.article h2{ font-size:clamp(22px,3vw,30px); margin-top:40px; }
.article h3{ font-family:var(--disp); font-weight:600; font-size:20px; color:var(--ink); margin-top:28px; letter-spacing:-.02em; }
.article p{ max-width:none; margin-top:16px; }
.article ul{ margin:16px 0 0 20px; color:var(--muted); }
.article li{ margin-top:8px; }

/* ---- FOOTER (igual que la home) ---- */
.pg-footer{ text-align:center; padding:56px 24px 40px; border-top:1px solid var(--line-2); margin-top:20px; }
.pg-footer .logo{ font-size:24px; }
.pg-footer small{ display:block; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2); }
.pg-footer .foot-links{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; font-size:14px; }
.pg-footer .foot-links a{ color:var(--muted); }
.pg-footer .foot-links a:hover{ color:var(--lime); }

@media(max-width:720px){
  .cards, .crosslinks, .crosslinks{ grid-template-columns:1fr; }
  section{ padding:36px 0; }
  .pg-hero{ padding:48px 0 28px; }
}

/* ---- Páginas legales ---- */
.legal-box{ border:1px solid rgba(199,255,46,.35); background:rgba(199,255,46,.06); border-radius:16px;
  padding:18px 20px; margin:8px 0 30px; }
.legal-box p{ margin:0; font-size:15px; color:var(--ink); max-width:none; }
.legal-box code{ font-family:var(--mono); font-size:13px; color:var(--lime); }
.article h2{ font-size:clamp(20px,2.6vw,26px); }
.legal-upd{ margin-top:40px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2); }
/* botón que reabre el aviso de cookies: se lee como un enlace del texto */
.lnk-cookies{ font:inherit; color:var(--lime); background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.lnk-cookies:hover{ opacity:.8; }