/* ==========================================================================
   Akribeia Solutions RD — hoja de estilos
   Paleta: "Muted Pastels" (modo oscuro). Base gris grafito (#2C2C2C) y texto
   claro (#E4E4E4) en toda la página; sobre esa base, tres acentos pastel
   suaves —lavanda, turquesa y rosa— se reparten uno por sección para que
   la transición entre Header/Hero → Servicios → Contacto → Footer se
   note tanto en el fondo (tintado sutil) como en los textos clave
   (títulos, énfasis, focos). Los botones de WhatsApp mantienen siempre
   su verde de marca y no participan de esta paleta.
   ========================================================================== */

/* ---------- fuentes auto-hospedadas ---------- */
/* Archivo y JetBrains Mono (SIL Open Font License 1.1 — ver
   assets/fonts/OFL-*.txt), descargadas una vez desde Google Fonts y servidas
   desde este mismo proyecto: se ven exactamente igual en cualquier sistema
   operativo, no solo en Windows (que es donde vive 'Segoe UI Black' nativa).
   Subset "latin" únicamente (cubre ES/EN/DE/FR/IT, los 5 idiomas del sitio).

   Archivo es una fuente variable: los 4 @font-face de abajo apuntan al MISMO
   archivo .woff2 y solo fijan qué instancia de peso usar — el navegador lo
   descarga una sola vez y lo reutiliza para --font-display (900) y
   --font-body (400/600/700). */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../assets/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url('../assets/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#2c2c2c;
  --surface:#3a373c;
  --surface-2:#2a2830;
  --surface-inverse:#e4e4e4;
  --ink:#e4e4e4;
  --ink-soft:#a9a6ac;
  --ink-invert:#202020;
  --steel-line:#454049;
  --steel-mid:#8e8b92;
  --shadow-lo:rgba(0,0,0,0.55);

  /* Acento por defecto (Header / Hero / Footer): lavanda */
  --accent:#b39cd0;
  --accent-soft:rgba(179,156,208,0.16);
  --accent-glow:rgba(179,156,208,0.45);

  --font-display:'Archivo','Segoe UI Black','Arial Black',Impact,'Segoe UI',sans-serif;
  --font-body:'Archivo','Segoe UI',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Consolas','SFMono-Regular',ui-monospace,Menlo,monospace;

  --maxw:1120px;
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden habilita el full-bleed de .hero::before (100vw) sin
     provocar scroll horizontal por el ancho de la scrollbar. */
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{text-wrap:balance;margin:0;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-48px;z-index:1000;
  background:var(--surface-inverse);color:var(--ink-invert);
  padding:10px 14px;font-size:.85rem;font-weight:700;
  transition:top .15s ease;
}
.skip-link:focus{top:8px;}

/* SVG sprite: invisible pero accesible a <use> */
.sprite-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ---------- shared "stamped plate" motif ---------- */
.plate{
  position:relative;
  background:var(--surface);
  border:1px solid var(--steel-line);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.22) inset,
    0 10px 24px -16px var(--shadow-lo);
}
.plate::before,.plate::after{
  content:"";
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--steel-mid), var(--steel-line) 70%);
}
.plate::before{top:5px;left:5px;}
.plate::after{bottom:5px;right:5px;}
.plate-label{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel-mid);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  padding:12px 20px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-primary{background:var(--surface-inverse);color:var(--ink-invert);}
.btn-primary:hover{opacity:.9;box-shadow:0 0 0 1px var(--accent-glow), 0 0 26px var(--accent-glow);}
/* Botones de WhatsApp: color de marca (verde WhatsApp), no el acento del sitio */
.btn-whatsapp{background:#25d366;color:#ffffff;}
.btn-whatsapp:hover{
  opacity:1;
  background:#20bd5a;
  box-shadow:0 0 0 1px rgba(37,211,102,.4), 0 0 26px rgba(37,211,102,.35);
}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--steel-line);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2);}
.btn-sm{padding:9px 14px;font-size:.82rem;}

/* ---------- eyebrow / section headings ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel-mid);
  margin:0;
}
.eyebrow-center{text-align:center;}
/* Pequeño indicador "encendido" — el único punto de color que abre la página */
.eyebrow-dot{
  display:inline-block;
  width:6px;height:6px;
  margin-right:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  vertical-align:middle;
}

/* Destello cálido de una sola vez sobre la palabra clave del hero */
.shine-text{
  color:var(--accent);
  text-shadow:0 0 0 transparent;
  animation:shineGlow 1.8s ease-out .45s 1 both;
}
@keyframes shineGlow{
  0%{color:var(--ink);text-shadow:0 0 0 transparent;}
  55%{color:var(--accent);text-shadow:0 0 24px var(--accent-glow);}
  100%{color:var(--accent);text-shadow:0 0 10px var(--accent-glow);}
}

.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(56px,8vw,96px) clamp(18px,4vw,28px);
}
/* Acento propio en turquesa (uno de los tres pastel), para que la
   transición desde el Hero (lavanda) se note en el acento de sus textos.
   Fondo intercambiado con #portafolio a pedido del usuario (2026-08-16):
   ahora usa el mismo tono que --bg (#2c2c2c, igual que Hero/Header), en
   vez del teal-oscuro propio que tenía antes. */
#servicios{
  max-width:none;
  background:#2c2c2c;
  --surface-2:#2c3b3a;
  --steel-line:#3c4a49;
  --accent:#a8dadc;
  --accent-soft:rgba(168,218,220,0.16);
  --accent-glow:rgba(168,218,220,0.45);
  /* position:relative para anclar el divisor diagonal a su borde inferior. */
  position:relative;
}
#servicios > *{max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.section-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);
  text-align:center;
  margin:6px 0 10px;
  color:var(--accent);
}
.section-lede{
  text-align:center;
  max-width:60ch;
  margin:0 auto 40px;
  color:var(--ink-soft);
  font-size:1.02rem;
}

/* ---------- separadores de sección (shape dividers) ---------- */
/* Los 3 divisores del recorrido (ola / diagonal / chevron) comparten un
   mismo mecanismo, en dos capas dentro del mismo SVG:
   1) un path CERRADO, relleno con el tono de la sección siguiente — así
      el propio borde de la sección actual "se deforma" y ambos fondos se
      funden sin costura visible.
   2) el mismo trazo pero SOLO la línea (sin el cierre relleno), con stroke
      en el pastel VIVO (no el tono oscurecido de fondo) y un resplandor
      sutil — para que el corte se note como un elemento de diseño
      deliberado, no una simple costura entre dos colores oscuros.
   Cada uno se ancla absoluto al borde inferior de su sección; por eso
   #servicios, .section-contact y .site-header son position:relative. */
.section-divider{
  position:absolute;
  left:0;right:0;bottom:-1px;
  width:100%;
  display:block;
  pointer-events:none;
}
.divider-line{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
}
/* Variante "de entrada": ancla el divisor al borde SUPERIOR del contenedor en
   vez de al inferior (ver .section-divider) — para cuando la ola debe fundir
   el fondo de ARRIBA (p. ej. la franja simple donde flota el índice de
   contenidos) con el inicio de esta sección, no con su final. El path que la
   acompañe debe rellenar hacia arriba (ver ejemplo en la sección "01" de las
   páginas pilar), espejo vertical del path de un .section-divider normal. */
.section-divider-top{top:-1px;bottom:auto;}

/* ---------- header / navbar ---------- */
/* position:relative para que la ola de base (.hero-wave) se pueda anclar
   absoluta a su borde inferior. */
.site-header{background:var(--bg);position:relative;}
/* Deforma el borde inferior del Hero con el color de Servicios, fusionando
   ambos fondos en la propia costura. bottom:-1px (heredado de
   .section-divider) evita una costura de 1px por redondeo de subpíxeles. */
.hero-wave{
  /* Deliberadamente más baja que el padding-bottom del .hero (clamp
     56px–96px) para que la cresta de la ola nunca tape los botones. */
  height:clamp(44px,6vw,74px);
}
.hero-wave .divider-line{
  stroke:url(#waveLineGradient);
  filter:drop-shadow(0 0 6px rgba(168,218,220,.55));
}

/* Servicios → Portafolio: ola, no diagonal. #servicios > * (más abajo)
   centra su contenido a --maxw; esta regla (ID+clase) le gana en
   especificidad para que el divisor siga ocupando el 100% del ancho, no
   solo la columna de contenido. Servicios (#2c2c2c) y Portafolio (#233030)
   son dos oscuros casi del mismo valor de luminosidad — igual que pasa
   entre Hero y Servicios (ver .hero-wave), un pliegue recto ahí casi no se
   nota, así que usamos una curva (varias inflexiones) en vez de un
   diagonal para que la costura se lea igual de bien que las demás.
   Resplandor más intenso que el de .hero-wave porque aquí además cambia
   el acento de turquesa a lavanda. */
#servicios > .divider-wave-2{max-width:none;margin:0;}
.divider-wave-2{height:clamp(50px,7vw,80px);}
.divider-wave-2 .divider-line{
  stroke-width:3.5;
  stroke:url(#waveToPortfolioGradient);
  filter:drop-shadow(0 0 9px rgba(179,156,208,.65));
}

/* Portafolio → Contacto: muesca central, igual a la de Contacto → Footer
   (ver .divider-notch) pero invertida hacia arriba — la punta entra en el
   Portafolio en vez de salir hacia la sección siguiente. Mismo color en
   relleno y línea que el panel claro de Contacto: sin acento, solo la
   silueta, igual que hace el original con el footer. */
#portafolio > .divider-notch-up{max-width:none;margin:0;}
.divider-notch-up{height:clamp(48px,6.5vw,80px);}
.divider-notch-up .divider-line{
  stroke-width:3.5;
  stroke:#eeeaee;
}

/* Contacto → Footer: muesca central (flecha/bandera). Mismo color que el
   footer (#e4e4e4, ver .site-footer) tanto en el relleno como en la línea:
   sin acento de color, solo la silueta de la muesca. */
.section-contact > .divider-notch{max-width:none;margin:0;}
.divider-notch{height:clamp(48px,6.5vw,80px);}
.divider-notch .divider-line{
  stroke-width:3.5;
  stroke:#e4e4e4;
}
.navbar{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px clamp(18px,4vw,28px);
  background:var(--surface);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
body.is-scrolled .navbar{
  border-bottom-color:var(--steel-line);
  box-shadow:0 8px 20px -18px var(--shadow-lo);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-mark{
  border-radius:50%;
  object-fit:cover;
  aspect-ratio:1 / 1;
  box-shadow:0 0 0 1px var(--steel-line);
  flex-shrink:0;
}
.brand-name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:.01em;
  color:var(--ink);
}
.brand-name-rd{color:var(--accent);}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;height:38px;
  background:transparent;
  border:1px solid var(--steel-line);
  cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.nav-toggle-bar{width:18px;height:2px;background:var(--ink);margin:0 auto;transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-menu{display:flex;align-items:center;gap:22px;}
.nav-link{
  position:relative;
  text-decoration:none;
  font-size:.92rem;
  font-weight:600;
  color:var(--ink-soft);
  transition:color .15s ease;
}
.nav-link:hover{color:var(--accent);}
/* Marca el enlace de la sección visible mientras se hace scroll (ver
   initScrollSpy en script.js) con el mismo acento de esa sección. */
.nav-link.is-active{color:var(--ink);}
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-6px;
  height:2px;
  border-radius:2px;
  background:var(--accent);
}
body[data-scroll-section="servicios"] .nav-link[href="#servicios"].is-active::after{background:#a8dadc;}
body[data-scroll-section="contacto"] .nav-link[href="#contacto"].is-active::after{background:#ffc1cc;}

/* ---------- hero ---------- */
/* position:relative + isolation:isolate crean un contexto de apilamiento
   propio para que el ::before (z-index:-1) quede SIEMPRE detrás del
   contenido del hero sin fugarse al contexto de .site-header (donde viviría
   por debajo del navbar/otras secciones). Así el fondo queda acotado al
   propio Hero, no a "toda la home". */
.hero{
  position:relative;
  isolation:isolate;
  max-width:720px;
  margin:0 auto;
  padding:clamp(40px,8vw,72px) clamp(18px,4vw,28px) clamp(56px,8vw,96px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* Imagen de fondo del Hero, a sangre completa (100vw) aunque el contenido
   del Hero esté acotado a 720px — rompe el ancho del contenedor con el
   truco left:50%/translateX(-50%). Con overlay oscuro semitransparente
   encima (gradiente doble-stop del mismo color = capa plana) para que el
   texto del hero siga destacándose sobre la foto. No toca .hero-wave: el
   SVG del divisor es un hermano posterior en el DOM y sigue pintándose por
   encima, así que la ola no se rompe. */
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-image:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    url('../imagenes/bg-hero.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero .eyebrow{margin-bottom:22px;}
/* El logo grande del Hero es clickable (vuelve a la home): el <a> solo
   envuelve la imagen, sin texto, así que se resetea su subrayado por
   defecto y se deja el propio box-shadow/radio de .hero-logo como única
   señal visual, más un leve realce al pasar el mouse o enfocar con teclado. */
.hero-logo-link{display:inline-block;text-decoration:none;border-radius:50%;transition:transform .2s ease, filter .2s ease;}
.hero-logo-link:hover,.hero-logo-link:focus-visible{transform:scale(1.03);filter:brightness(1.06);}
.hero-logo-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.hero-logo{
  width:clamp(150px,24vw,230px);
  height:clamp(150px,24vw,230px);
  border-radius:50%;
  object-fit:cover;
  margin:0 0 28px;
  box-shadow:
    0 0 0 1px var(--steel-line),
    0 24px 48px -20px var(--shadow-lo);
}
.hero-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2rem,1.5rem + 2.4vw,3rem);
  line-height:1.06;
  letter-spacing:-.01em;
}
.hero-tagline{
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);
  font-weight:600;
  margin:14px 0 0;
}
.hero-lede{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:52ch;
  margin:16px 0 30px;
}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

/* ---------- servicios ---------- */
/* 3 columnas fijas: con las 6 tarjetas de servicios actuales queda
   siempre en 3 arriba + 3 abajo, en vez de acomodarse por ancho disponible. */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width:860px){
  .grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
}
.card{
  padding:20px 20px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--steel-line);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.2) inset;
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* Dentro del panel de Servicios (ver #servicios más abajo) las tarjetas
   toman el otro tono de la pareja surface/surface-2 para no fundirse
   con el fondo del panel. */
#servicios .card{background:var(--surface-2);--icon-color:var(--steel-mid);--icon-glow:var(--accent-glow);}
#servicios .card:hover{
  border-color:var(--icon-color);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 0 24px var(--icon-glow);
}
#servicios .card:hover .icon{transform:scale(1.08);filter:brightness(1.08);}

/* Un color propio y vivo por servicio — mismo set en claro y oscuro,
   porque son chips sólidos con glifo blanco (se leen bien en ambos). */
#servicios .card:nth-child(1){--icon-color:#10b981;--icon-glow:rgba(16,185,129,.4);}   /* ventas: verde */
#servicios .card:nth-child(2){--icon-color:#3b82f6;--icon-glow:rgba(59,130,246,.4);}   /* SEO: azul */
#servicios .card:nth-child(3){--icon-color:#8b5cf6;--icon-glow:rgba(139,92,246,.4);}   /* web apps: violeta */
#servicios .card:nth-child(4){--icon-color:#f43f5e;--icon-glow:rgba(244,63,94,.4);}    /* contenido: rosa */
#servicios .card:nth-child(5){--icon-color:#06b6d4;--icon-glow:rgba(6,182,212,.4);}    /* chatbots: cian */
#servicios .card:nth-child(6){--icon-color:#f59e0b;--icon-glow:rgba(245,158,11,.4);}   /* y mucho más: ámbar */

.card .icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  background:var(--icon-color, var(--accent-soft));
  border:1px solid var(--icon-color, var(--steel-line));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform .2s ease, filter .2s ease;
}
.icon-svg{width:22px;height:22px;}
.card h3{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.05rem;
}
.card p{margin:0;color:var(--ink-soft);font-size:.94rem;}
.card-more{background:var(--accent-soft);border-style:dashed;}

/* Tarjeta-enlace (hub de servicios en el pillar): mismo componente .card,
   pero como <a> completo — clic en cualquier parte de la tarjeta, no solo en
   un botón dentro de ella. Los colores por servicio se fijan inline por
   tarjeta (--icon-color/--icon-glow), igual criterio que usa #servicios con
   sus :nth-child, pero reutilizable fuera de esa sección. */
.card-link{text-decoration:none;cursor:pointer;}
.card-link:hover{
  border-color:var(--icon-color, var(--accent));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 0 24px var(--icon-glow, var(--accent-glow));
}
.card-link:hover .icon{transform:scale(1.08);filter:brightness(1.08);}
.card-link .card-cta{
  margin-top:auto;
  padding-top:4px;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--icon-color, var(--accent));
}

/* Enlace contextual hacia automatizacion-ia-negocios.html, justo debajo de la
   grid de Servicios: enlazado interno con anchor text descriptivo (ver
   docs/manual-seo-onpage.md §8), no un botón más compitiendo con el CTA
   principal de Contacto. */
.section-more{
  text-align:center;
  margin:28px auto 0;
  max-width:60ch;
  color:var(--ink-soft);
  font-size:.95rem;
}
.section-more a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.section-more a:hover{color:var(--ink);}

/* ---------- portafolio ---------- */
/* Fondo intercambiado con #servicios a pedido del usuario (2026-08-16):
   Portafolio pasa a usar el tono teal-oscuro que antes tenía Servicios
   (#233030), mientras conserva el acento lavanda por defecto de :root
   — a propósito no se sobreescribe --accent aquí, ya no queda "de vuelta"
   en la paleta del Hero como antes (el Hero sigue en --bg, #2c2c2c). Las
   tarjetas heredan el estilo base de .card (fondo --surface), igual que
   hace #servicios con las suyas, solo que sin sobreescribir el tono. */
#portafolio{
  max-width:none;
  background:#233030;
  /* position:relative para anclar el divisor diagonal a su borde inferior. */
  position:relative;
}
#portafolio > *{max-width:var(--maxw);margin-left:auto;margin-right:auto;}

/* 5 columnas fijas: las 10 ideas del portafolio quedan siempre en
   5 arriba + 5 abajo, igual que .grid hace con 3 columnas en Servicios. */
.grid-portfolio{grid-template-columns:repeat(5, 1fr);}
@media (max-width:1040px){
  .grid-portfolio{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:700px){
  .grid-portfolio{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:460px){
  .grid-portfolio{grid-template-columns:1fr;}
}

#portafolio .card{
  padding:18px 16px 20px;
  gap:8px;
  --icon-color:var(--steel-mid);
  --icon-glow:var(--accent-glow);
}
#portafolio .card:hover{
  border-color:var(--icon-color);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 0 24px var(--icon-glow);
}
#portafolio .card:hover .icon{transform:scale(1.08);filter:brightness(1.08);}
#portafolio .card h3{font-size:.94rem;}
#portafolio .card p{font-size:.82rem;}

/* Numerito (01-10) en vez de un ícono de línea: mismo tratamiento visual
   que .icon-svg (caja de acento con clip-path en ángulo) pero sin tener
   que dibujar 10 símbolos nuevos en el sprite. */
.icon-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:.95rem;
}

/* Categoría de cada idea (p. ej. "Data / Dashboards"), en el color propio
   de la tarjeta — mismo lenguaje que .eyebrow pero a escala de tarjeta. */
.card-tag{
  margin:0;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--icon-color, var(--steel-mid));
}

/* Enlace de una idea del portafolio que ya se construyó y está en
   producción (p. ej. Trade & Repeat) — mismo lenguaje mono que .card-tag,
   centrado al pie de la tarjeta y separado del texto con un borde
   superior; empuja hacia abajo dentro del flex column de .card aunque el
   resto de las tarjetas no tenga este elemento. Verde fijo (no el
   --icon-color propio de cada tarjeta) porque aquí el color es una señal
   de estado — "proyecto real, en vivo" — no una variación decorativa por
   idea; mismo verde ya usado en el resto de la paleta (#10b981). */
.card-project-link{
  display:block;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--steel-line);
  text-align:center;
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#10b981;
  text-decoration:none;
}
.card-project-link:hover{color:#0d9668;text-decoration:underline;}

/* Un color propio y vivo por idea, igual que hace #servicios con las suyas
   — aquí para 10 tarjetas en vez de 6. */
#portafolio .card:nth-child(1){--icon-color:#10b981;--icon-glow:rgba(16,185,129,.4);}   /* reportes: verde */
#portafolio .card:nth-child(2){--icon-color:#3b82f6;--icon-glow:rgba(59,130,246,.4);}   /* contenido: azul */
#portafolio .card:nth-child(3){--icon-color:#8b5cf6;--icon-glow:rgba(139,92,246,.4);}   /* chatbot RAG: violeta */
#portafolio .card:nth-child(4){--icon-color:#f43f5e;--icon-glow:rgba(244,63,94,.4);}    /* Trade & Repeat: rosa */
#portafolio .card:nth-child(5){--icon-color:#06b6d4;--icon-glow:rgba(6,182,212,.4);}    /* reviews: cian */
#portafolio .card:nth-child(6){--icon-color:#f59e0b;--icon-glow:rgba(245,158,11,.4);}   /* propuestas: ámbar */
#portafolio .card:nth-child(7){--icon-color:#14b8a6;--icon-glow:rgba(20,184,166,.4);}   /* reuniones: teal */
#portafolio .card:nth-child(8){--icon-color:#6366f1;--icon-glow:rgba(99,102,241,.4);}   /* agentes: índigo */
#portafolio .card:nth-child(9){--icon-color:#fb923c;--icon-glow:rgba(251,146,60,.4);}   /* landing pages: naranja */
#portafolio .card:nth-child(10){--icon-color:#ef4444;--icon-glow:rgba(239,68,68,.4);}   /* CVs: rojo */

/* Los items .reveal(-*) son visibles por defecto: la animación de aparición es
   una mejora progresiva que solo se activa si JS confirma que puede completarla
   (ver initRevealOnScroll en script.js). Así nadie se queda sin ver el contenido
   si el script tarda, falla o el navegador no soporta IntersectionObserver.
   Cada variante entra desde una dirección distinta para que el "lazyload" de
   contenido al bajar por la página se sienta vivo sin ser repetitivo; todas
   se disparan una única vez, la primera vez que el elemento entra en pantalla
   (no se repiten si el usuario vuelve a subir y bajar). */
html.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease;}
html.js-reveal .reveal.is-visible{opacity:1;transform:translateY(0);}

html.js-reveal .reveal-up{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
html.js-reveal .reveal-up.is-visible{opacity:1;transform:translateY(0);}

html.js-reveal .reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .6s ease, transform .6s ease;}
html.js-reveal .reveal-left.is-visible{opacity:1;transform:translateX(0);}

html.js-reveal .reveal-right{opacity:0;transform:translateX(28px);transition:opacity .6s ease, transform .6s ease;}
html.js-reveal .reveal-right.is-visible{opacity:1;transform:translateX(0);}

html.js-reveal .reveal-scale{opacity:0;transform:scale(.88);transition:opacity .5s ease, transform .5s ease;}
html.js-reveal .reveal-scale.is-visible{opacity:1;transform:scale(1);}

@media (prefers-reduced-motion:reduce){
  html.js-reveal .reveal,
  html.js-reveal .reveal-up,
  html.js-reveal .reveal-left,
  html.js-reveal .reveal-right,
  html.js-reveal .reveal-scale{opacity:1;transform:none;}
}

/* ---------- barra de progreso de scroll ---------- */
/* Se rellena con el avance de lectura y cambia de color según la sección
   activa (lavanda / turquesa / rosa), reforzando en tiempo real la misma
   transición de paleta entre secciones. */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0%;
  background:var(--accent);
  z-index:200;
  transition:background-color .3s ease;
  pointer-events:none;
}
body[data-scroll-section="servicios"] .scroll-progress{background:#a8dadc;}
body[data-scroll-section="contacto"] .scroll-progress{background:#ffc1cc;}
@media (prefers-reduced-motion:reduce){
  .scroll-progress{transition:none;}
}

/* ---------- contacto: panel claro (el único de la paleta sin usar) ---------- */
/* El fondo oscuro-con-tinte-rosa quedaba demasiado apagado — apenas se leía
   como "rosa". Turquesa ya es de Servicios y lavanda ya es de Hero/Footer,
   así que reusar cualquiera de los dos apagaría la transición justo ahí.
   #E4E4E4 es el único color de la paleta que no se había usado como fondo:
   una sección clara en medio de un sitio todo oscuro es, literalmente, lo
   más "llamativo" que se puede lograr sin repetir a una vecina. El rosa no
   desaparece — se conserva como acento (badge, foco de campos, resplandor
   de los divisores); solo el texto pasa a --accent:#2c2c2c (también de la
   paleta) porque el rosa pastel original no tiene contraste suficiente
   para leerse como texto sobre un fondo tan claro. */
.section-contact{
  max-width:none;
  padding-top:clamp(64px,9vw,120px);
  padding-bottom:clamp(64px,9vw,120px);
  background:linear-gradient(175deg, #eeeaee 0%, #ddd8de 100%);
  color:var(--ink);
  --surface:#f5f2f5;
  --surface-2:#e3dfe4;
  --ink:#221f24;
  --ink-soft:#5c5760;
  --steel-line:#c9c3ca;
  --steel-mid:#8d8790;
  --accent:#2c2c2c;
  --accent-soft:rgba(255,193,204,0.35);
  --accent-glow:rgba(255,193,204,0.55);
  /* position:relative para anclar la muesca a su borde inferior. */
  position:relative;
}
.section-contact > *{max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.contact-statement{
  position:relative;
  text-align:center;
  max-width:48ch;
  margin:0 auto 32px;
  font-size:clamp(1.1rem,1rem + .6vw,1.35rem);
  font-weight:600;
  font-style:italic;
  line-height:1.45;
}
.contact-statement em{
  color:var(--accent);
  font-style:italic;
  font-weight:700;
}
.contact-statement::before{
  content:"\201C";
  position:absolute;
  left:50%;
  top:-.6em;
  transform:translateX(-50%);
  font-family:var(--font-display);
  font-size:4rem;
  line-height:1;
  color:var(--accent);
  opacity:.45;
  pointer-events:none;
}
.badge-tag{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:fit-content;
  margin:0 auto 44px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#ffffff;
  border:1px solid #2c2c2c;
  background:#2c2c2c;
  padding:7px 14px;
  border-radius:999px;
}
.form-subtitle{
  grid-column:1 / -1;
  margin:-6px 0 4px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.form-subtitle em{color:var(--accent);font-style:italic;font-weight:600;}

/* El formulario es ahora el único contenido de la sección: ocupa todo el
   ancho disponible (hasta --maxw) y organiza los campos en dos columnas
   para aprovechar el espacio en vez de estirar cada input por separado. */
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
  padding:36px clamp(24px,4vw,48px) 40px;
  /* Un poco más claro que el panel de la sección: los campos, un poco
     más oscuros que esto (--surface-2), quedan "encastrados" — más pulido
     que un gris plano. */
  background:linear-gradient(160deg, #f5f2f5 0%, #e6e2e7 100%);
}
.field-wide,.contact-form .plate-label{grid-column:1 / -1;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--steel-line);
  padding:12px 14px;
  resize:vertical;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* Sin borde ni resplandor al enfocar (los navegadores tratan los campos de
   texto como :focus-visible incluso con click de mouse, así que había que
   quitarlo de las dos pseudo-clases, no solo de :focus). */
.field input:focus,.field select:focus,.field textarea:focus,
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;
}
.field input:invalid.touched,.field textarea:invalid.touched{border-color:#c05a4c;}
.contact-form .btn-primary{
  justify-self:stretch;
  justify-content:center;
  padding-top:14px;
  padding-bottom:14px;
}
.form-note{
  min-height:1.2em;
  font-size:.85rem;
  color:var(--ink-soft);
  margin:0;
}
.form-note.is-success{color:#5fb37d;}
.form-note.is-error{color:#e08072;}
/* Sobre el panel claro de Contacto, esas mismas tonalidades bajan a un
   contraste de ~2:1 contra el fondo — muy por debajo del mínimo de
   accesibilidad (4.5:1). Mismos colores, más oscuros, solo aquí. */
.section-contact .form-note.is-success{color:#276b44;}
.section-contact .form-note.is-error{color:#a8433a;}

@media (max-width:600px){
  .contact-form{grid-template-columns:1fr;}
}

/* ---------- footer ---------- */
/* Panel claro #e4e4e4 en todo el sitio (a pedido del usuario, 2026-08-16 —
   antes solo la home lo tenía así vía body.is-home; guías y páginas legales
   se quedaban con un footer oscuro #2c2c2c). Como el resto de la paleta del
   sitio está pensada para fondo oscuro, se sobreescriben las variables
   localmente aquí, igual que hace .section-contact con su propio panel
   claro. */
.site-footer{
  background:#e4e4e4;
  color:var(--ink);
  --ink:#221f24;
  --ink-soft:#5c5760;
  --steel-line:#c9c3ca;
  --steel-mid:#726d76;
  --accent:#2c2c2c;
  border-top:1px solid var(--steel-line);
  padding:clamp(36px,6vw,52px) clamp(18px,4vw,28px) 26px;
}
.footer-top{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:22px;
  border-bottom:1px dashed var(--steel-line);
}
.footer-social{display:flex;gap:18px;flex-wrap:wrap;}
.footer-social a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:.88rem;color:var(--ink-soft);transition:color .15s ease;}
.footer-social a:hover{color:var(--accent);}
.icon-svg-sm{width:16px;height:16px;flex-shrink:0;}
.hashtags{
  max-width:var(--maxw);
  margin:20px auto 0;
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--steel-mid);
  text-align:center;
  line-height:1.9;
  word-spacing:5px;
}
.footer-bottom{
  max-width:var(--maxw);
  margin:18px auto 0;
  text-align:center;
  font-size:.8rem;
  color:var(--steel-mid);
}
.footer-legal{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
}
.footer-legal a,.link-btn{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:.8rem;color:var(--steel-mid);
  text-decoration:underline;text-underline-offset:2px;
  transition:color .15s ease;
}
.footer-legal a:hover,.link-btn:hover{color:var(--accent);}
.footer-legal a:focus-visible,.link-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- back to top ---------- */
/* box-shadow con --steel-line (siempre la variable raíz, ya que este botón
   vive fuera de .site-footer/.section-contact en el DOM): da un anillo
   sutil que separa el botón del fondo cuando ambos son claros — antes
   invisible contra .site-footer, ahora que el footer también es #e4e4e4. */
.to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  background:var(--surface-inverse);
  color:var(--ink-invert);
  border:none;
  cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 10px 24px -14px var(--shadow-lo), 0 0 0 1px var(--steel-line);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:90;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- responsive nav ---------- */
@media (max-width:760px){
  .nav-toggle{display:flex;}
  .nav-menu{
    position:absolute;
    top:100%;
    left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--surface);
    border-bottom:1px solid var(--steel-line);
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .nav-menu.is-open{max-height:340px;overflow-y:auto;}
  .nav-menu .nav-link,.nav-menu .btn{
    margin:10px 20px;
  }
  .nav-menu .lang-switch{margin:10px 20px;}
  .nav-menu .lang-switch summary{width:fit-content;}
}

/* ---------- aviso de cookies ---------- */
/* Reutiliza el motivo de "placa troquelada" (.plate) del resto del sitio
   en vez de inventar un panel nuevo. Mientras está visible, escondemos
   .to-top (ver js/cookie-consent.js -> body.cookie-banner-visible) para
   que no se solapen en móvil, donde el aviso ocupa casi todo el ancho. */
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:20px;
  z-index:200;
  width:min(680px, calc(100% - 32px));
  padding:20px 22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  animation:cookie-in .35s ease both;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner-text{
  margin:0;
  flex:1 1 320px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.cookie-banner-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.cookie-banner-text a:hover{color:var(--ink);}
.cookie-banner-actions{display:flex;gap:10px;flex:0 0 auto;}
body.cookie-banner-visible .to-top{display:none;}

@keyframes cookie-in{
  from{opacity:0;transform:translate(-50%,16px);}
  to{opacity:1;transform:translate(-50%,0);}
}

@media (max-width:560px){
  .cookie-banner{flex-direction:column;align-items:stretch;}
  .cookie-banner-actions{justify-content:flex-end;}
}

/* ---------- selector de idioma ---------- */
/* <details>/<summary> nativo: sin JS, accesible por teclado desde el
   principio. Vive dentro de .nav-menu (así hereda el colapso a hamburguesa
   en móvil) o suelto en .legal-header en las páginas legales. */
.lang-switch{position:relative;}
.lang-switch summary{
  display:inline-flex;align-items:center;gap:6px;
  list-style:none;cursor:pointer;user-select:none;
  padding:9px 12px;
  font-family:var(--font-body);font-weight:700;font-size:.82rem;
  color:var(--ink);border:1px solid var(--steel-line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:border-color .15s ease,color .15s ease;
}
.lang-switch summary::-webkit-details-marker{display:none;}
.lang-switch summary::after{
  content:"";width:6px;height:6px;margin-left:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease;
}
.lang-switch[open] summary::after{transform:rotate(-135deg);}
.lang-switch summary:hover{border-color:var(--accent);color:var(--accent);}
.lang-switch summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.icon-globe{width:15px;height:15px;flex-shrink:0;}

.lang-switch-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:120;
  list-style:none;margin:0;padding:6px;min-width:150px;
  background:var(--surface);border:1px solid var(--steel-line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 14px 30px -16px var(--shadow-lo);
}
.lang-switch-menu li+li{margin-top:2px;}
.lang-switch-menu a{
  display:block;padding:8px 10px;font-size:.86rem;text-decoration:none;color:var(--ink-soft);
  transition:background .15s ease,color .15s ease;
}
.lang-switch-menu a:hover,.lang-switch-menu a:focus-visible{background:var(--accent-soft);color:var(--ink);}
.legal-header .lang-switch-menu{right:0;}

/* ---------- páginas legales (privacidad / cookies) ---------- */
.legal-header{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px clamp(18px,4vw,28px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--steel-line);
}
.legal-header-actions{display:flex;align-items:center;gap:10px;}
.legal-main{
  max-width:760px;
  margin:0 auto;
  padding:28px clamp(18px,4vw,28px) 80px;
}
.legal-main h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);
  margin-bottom:6px;
}
.legal-updated{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--steel-mid);
  margin:0 0 32px;
}
.legal-main h2{
  font-family:var(--font-display);
  font-size:1.2rem;
  margin:36px 0 12px;
  color:var(--ink);
}
.legal-main h2:first-of-type{margin-top:8px;}
.legal-main p,.legal-main li{color:var(--ink-soft);line-height:1.7;}
.legal-main p{margin:0 0 14px;}
.legal-main ul{margin:0 0 14px;padding-left:1.2em;}
.legal-main li{margin-bottom:6px;}
.legal-main a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.legal-main a:hover{color:var(--ink);}

/* ==========================================================================
   automatizacion-ia-negocios.html (pillar) + sus 5 guías de servicio
   (automatizacion-ventas-inteligencia-artificial.html, etc.) — arquitectura
   pillar + clúster, ~22,000 palabras repartidas en 6 páginas. Reutiliza la
   misma paleta/tipografía/motivo "plate" del resto del sitio; lo nuevo aquí son
   clases (no IDs) para los 3 paneles de color, pensadas para repetirse
   muchas veces en una sola página larga en vez de una única vez como hacen
   #servicios/#portafolio/.section-contact en index.html.
   ========================================================================== */

/* Panel oscuro (acento lavanda por defecto — mismo tono que Hero/Portafolio) */
.section-panel-dark{
  max-width:none;
  background:#2c2c2c;
  position:relative;
}
/* :not(.section-divider) para que el SVG del separador, anclado absoluto al
   100% del ancho, no quede encogido por el centrado a --maxw del contenido. */
.section-panel-dark > *:not(.section-divider){max-width:var(--maxw);margin-left:auto;margin-right:auto;}

/* Panel turquesa (mismo tratamiento que #servicios en index.html, como clase) */
.section-panel-teal{
  max-width:none;
  background:#233030;
  --surface-2:#2c3b3a;
  --steel-line:#3c4a49;
  --accent:#a8dadc;
  --accent-soft:rgba(168,218,220,0.16);
  --accent-glow:rgba(168,218,220,0.45);
  position:relative;
}
.section-panel-teal > *:not(.section-divider){max-width:var(--maxw);margin-left:auto;margin-right:auto;}

/* Panel claro (mismo tratamiento que .section-contact en index.html, como clase) */
.section-panel-light{
  max-width:none;
  background:linear-gradient(175deg, #eeeaee 0%, #ddd8de 100%);
  color:var(--ink);
  --surface:#f5f2f5;
  --surface-2:#e3dfe4;
  --ink:#221f24;
  --ink-soft:#5c5760;
  --steel-line:#c9c3ca;
  --steel-mid:#8d8790;
  --accent:#2c2c2c;
  --accent-soft:rgba(255,193,204,0.35);
  --accent-glow:rgba(255,193,204,0.55);
  position:relative;
}
.section-panel-light > *:not(.section-divider){max-width:var(--maxw);margin-left:auto;margin-right:auto;}

/* ==========================================================================
   blog.html + sus posts — reutiliza el mismo componente .card/.card-link
   que ya arma la grid "Guías" de index.html (ícono con --icon-color propio,
   h3, p, .card-cta). .blog-grid apila verticalmente: 1 post destacado (el
   más reciente publicado, banner horizontal ancho) + una grid secundaria de
   4 columnas por fila debajo — así, al sumar posts nuevos, la sección crece
   de a filas horizontales en vez de una columna angosta cada vez más larga
   (rediseño 2026-08-16, reemplaza el layout "1 grande a la izquierda + 2×2
   a la derecha" original). */
.blog-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.blog-grid-secondary{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
/* Variante ancha de .card-link, apilada verticalmente igual que una card
   normal, solo que de ancho completo: .blog-featured-header agrupa
   ícono + eyebrow "Destacado" lado a lado como encabezado; debajo,
   en el orden normal de .card (column), va el título, el excerpt y el
   CTA "Leer más" (ver blog.html/en/blog.html markup). */
.blog-featured{
  align-items:center;
  text-align:center;
  gap:14px;
  padding:36px 34px;
}
.blog-featured-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.blog-featured .icon{width:56px;height:56px;flex-shrink:0;}
.blog-featured .icon-svg{width:28px;height:28px;}
.blog-featured h3{font-size:1.4rem;line-height:1.16;max-width:640px;}
.blog-featured p{font-size:1rem;max-width:640px;}
/* Etiqueta "Destacado"/"Featured", mismo lenguaje que .card-tag de
   Portafolio pero reutilizada aquí sobre el post grande. */
.blog-eyebrow{
  margin:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--icon-color, var(--accent));
}
@media (max-width:860px){
  .blog-grid-secondary{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .blog-grid-secondary{grid-template-columns:1fr;}
}

/* Banner destacado de cada post individual (no hay librería de fotos en el
   proyecto, así que en vez de fabricar/tomar una imagen de stock, se usa el
   mismo lenguaje de chip ícono+color que .card/.blog-grid ya establecen —
   solo que ampliado, como sustituto de la "imagen destacada" del checklist
   SEO. --icon-color/--icon-glow se fijan inline en el <section> del post,
   mismo criterio que usan las tarjetas). */
.blog-post-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;height:96px;
  margin:0 auto 28px;
  color:#fff;
  background:var(--icon-color, var(--accent));
  border:1px solid var(--icon-color, var(--accent));
  box-shadow:0 0 32px var(--icon-glow, var(--accent-glow));
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.blog-post-banner .icon-svg{width:48px;height:48px;}

/* Tabla dentro de .longform (checklist SEO: "al menos 1 tabla" por
   artículo) — mismos tokens de color que el resto del sitio, sin depender
   de un componente nuevo. overflow-x:auto en el wrapper evita que una
   tabla ancha rompa el layout en mobile. */
.longform-table-wrap{overflow-x:auto;margin:0 0 20px;}
.longform-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
.longform-table th,.longform-table td{
  padding:10px 14px;
  text-align:left;
  border-bottom:1px solid var(--steel-line);
}
.longform-table th{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent);
}
.longform-table td{color:var(--ink-soft);}
.longform-table tr:last-child td{border-bottom:none;}

/* Lista dentro de .longform (checklist SEO: "al menos 1 lista"), y enlaces
   salientes a fuentes externas citadas en el cuerpo — mismo trato visual
   que el resto de los enlaces de .longform, sin distinguirse por color. */
.longform ul{margin:0 0 20px;padding-left:1.3em;color:var(--ink-soft);}
.longform ul li{margin-bottom:8px;line-height:1.6;}
.longform ul li::marker{color:var(--accent);}

/* Separadores reutilizables: misma altura/forma que .hero-wave / .divider-wave-2 /
   .divider-notch-up / .divider-notch de index.html; aquí como clases de forma
   (altura) + clases de color de trazo, para poder recombinarlas en cualquier
   transición sin depender de un ID de sección concreto. El fill (qué color
   "entra") se fija inline en cada <svg>, igual que hace index.html. */
.divider-wave{height:clamp(48px,7vw,80px);}
.divider-notch-up{height:clamp(48px,6.5vw,80px);}
.divider-notch{height:clamp(48px,6.5vw,80px);}
/* .divider-line (compuesto, no la clase sola): .divider-notch y
   .divider-notch-up ya traen su propia regla ".divider-notch .divider-line"
   / ".divider-notch-up .divider-line" con 2 clases de especificidad — una
   ".divider-stroke-X" sola (1 clase) nunca le ganaría. Encadenada junto a
   ".divider-line" iguala esa especificidad y gana por ir después en la hoja. */
.divider-line.divider-stroke-teal{stroke:#a8dadc;filter:drop-shadow(0 0 8px rgba(168,218,220,.55));}
.divider-line.divider-stroke-lavender{stroke:#b39cd0;filter:drop-shadow(0 0 8px rgba(179,156,208,.55));}
.divider-line.divider-stroke-light{stroke:#eeeaee;}
.divider-line.divider-stroke-dark{stroke:#2c2c2c;}
.divider-line.divider-stroke-footer{stroke:#e4e4e4;}

/* Índice de contenidos, justo debajo del Hero: usa el motivo "plate" ya
   existente (mismo que el formulario de contacto y el aviso de cookies) en
   vez de inventar un contenedor nuevo. */
.toc{max-width:640px;margin:40px auto;padding:24px clamp(20px,4vw,32px);}
.toc-title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel-mid);
}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.toc-list a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 4px;
  text-decoration:none;
  font-size:.92rem;
  font-weight:600;
  color:var(--ink-soft);
  border-bottom:1px dashed var(--steel-line);
  transition:color .15s ease,border-color .15s ease;
}
.toc-list a:hover,.toc-list a:focus-visible{color:var(--accent);border-color:var(--accent);}
.toc-num{font-family:var(--font-mono);color:var(--steel-mid);font-size:.78rem;flex-shrink:0;}

/* Cuerpo del script de venta: columna de lectura angosta, párrafos cortos
   (3 frases) y justificados, con separación entre H3 internos de cada
   sección para que un bloque de ~1,300 palabras siga siendo escaneable. */
.longform{max-width:70ch;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.longform h3{
  margin:18px 0 2px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.08rem;
  color:var(--ink);
}
.longform p{
  margin:0;
  text-align:justify;
  -webkit-hyphens:auto;
  hyphens:auto;
  color:var(--ink-soft);
  line-height:1.75;
}
.longform p strong{color:var(--ink);}
.longform ul{margin:4px 0;padding-left:1.3em;color:var(--ink-soft);}
.longform li{margin-bottom:6px;line-height:1.6;text-align:justify;}
.longform li::marker{color:var(--accent);}

/* Icono pequeño delante de cada H3 de servicio — reutiliza el sprite y la
   caja .icon ya definidos para las tarjetas de Servicios. */
.longform-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  margin-right:8px;
  vertical-align:-8px;
  color:#fff;
  background:var(--icon-color, var(--accent));
  border:1px solid var(--icon-color, var(--accent));
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.longform-icon svg{width:16px;height:16px;}

/* Preguntas frecuentes: acordeón nativo <details>/<summary>, mismo criterio
   de accesibilidad sin JS que .lang-switch. */
.faq-list{max-width:70ch;margin:0 auto;display:grid;gap:10px;}
.faq-item{
  background:var(--surface);
  border:1px solid var(--steel-line);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 20px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:1.3rem;
  color:var(--accent);
  transition:transform .15s ease;
  flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.faq-item .faq-answer{
  margin:0;
  padding:0 20px 18px;
  color:var(--ink-soft);
  text-align:justify;
  line-height:1.7;
}

/* CTA final: mismo botón primario/whatsapp del Hero, centrado, con el par
   primario+outline igual que .hero-actions. */
.longform-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px;}