/* === fuentes === */
/* ARCHIVO GENERADO: no editar a mano.
   design/descargar-fuentes.py trae las tipografias de Google y las
   deja servidas desde aqui. Pedirlas a Google manda la IP de quien
   visita antes de que haya consentido nada. */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-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;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-500-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: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-600-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: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/comfortaa-700-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: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-400-italic-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: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-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;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-500-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: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-600-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: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://peakative.com/wp-content/themes/peakative/assets/fonts/figtree-700-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;
}

/* --- Respaldos con las mismas medidas ------------------------------------
   Mientras la tipografia real se descarga se pinta con la del sistema. Si
   esa ocupa distinto, al llegar la buena el texto se recoloca y todo lo de
   debajo salta: eso es el desplazamiento acumulado que penaliza Google.

   Estos respaldos estiran Arial hasta ocupar lo mismo que la fuente real,
   asi que el cambio no mueve nada. Los numeros salen de las metricas de
   cada archivo, no de una estimacion. ARCHIVO GENERADO. */
@font-face{font-family:'Comfortaa respaldo';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:109.49%;ascent-override:80.47%;descent-override:21.37%;line-gap-override:0%;}
@font-face{font-family:'Figtree respaldo';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:101.98%;ascent-override:93.15%;descent-override:24.51%;line-gap-override:0%;}

/* === tokens === */
/* ==========================================================================
   Peakative Design System — tokens
   Copia verbatim de _ds/peakative-design-system-e39a518b/tokens/*.css
   NO editar a mano: si cambia el design system, se regenera este archivo.
   ========================================================================== */

/* Las tipografias se sirven desde el propio sitio (assets/css/fuentes.css):
   pedirlas a Google manda la IP de quien visita a un tercero antes de que
   haya consentido nada, y una tipografia no se puede dejar a consentimiento
   porque la pagina la necesita para verse. */

/* --- colors.css --- */
:root{
--white:#FFFFFF;--paper:#F4F6F5;--paper-2:#EAEEEC;--line:#DFE5E3;--line-2:#C6D0CD;

--ink-900:#0F1A18;--ink-700:#2C3A37;--ink-500:#5B6B67;--ink-300:#9AA8A4;

--teal-900:#0D2129;--teal-800:#17323C;--teal-700:#264653;--teal-600:#37606F;--teal-500:#517E8E;--teal-300:#9CBAC4;--teal-200:#C4D8DE;--teal-100:#E2EDF0;

--pop-700:#0A7259;--pop-600:#12B48C;--pop-500:#1ED6A6;--pop-400:#39E8BC;--pop-300:#7CF2D4;--pop-100:#D9FBF2;

--sun-700:#8A6516;--sun-100:#FBEFD6;--rust-700:#93382A;--rust-100:#FBE4E0;

--brand-primary:var(--teal-700);--brand-dark:var(--teal-900);--brand-pop:var(--pop-400);--brand-pop-strong:var(--pop-700);
--surface-page:var(--white);--surface-paper:var(--paper);--surface-card:var(--white);--surface-dark:var(--teal-700);--surface-dark-deep:var(--teal-900);--surface-pop:var(--pop-400);
--text-primary:var(--ink-900);--text-secondary:var(--ink-700);--text-muted:var(--ink-500);--text-inverse:var(--white);--text-on-dark-muted:var(--teal-200);--text-on-pop:var(--teal-900);--text-brand:var(--teal-700);--text-accent:var(--pop-700);
--border-subtle:var(--line);--border-default:var(--line-2);--border-on-dark:rgba(255,255,255,0.16);--border-on-pop:rgba(13,33,41,0.22);--border-focus:var(--teal-700);
--status-success-fg:#146B52;--status-success-bg:var(--pop-100);--status-warning-fg:var(--sun-700);--status-warning-bg:var(--sun-100);--status-danger-fg:var(--rust-700);--status-danger-bg:var(--rust-100);--status-info-fg:var(--teal-700);--status-info-bg:var(--teal-100);
}

/* --- typography.css --- */
:root{
--font-display:'Comfortaa','Comfortaa respaldo',ui-rounded,system-ui,sans-serif;
--font-body:'Figtree','Figtree respaldo',ui-sans-serif,system-ui,sans-serif;

--text-display-xl:clamp(2.75rem,5.4vw,4.25rem);
--text-display-lg:clamp(2.25rem,4.2vw,3.25rem);
--text-display-md:clamp(1.75rem,3vw,2.5rem);
--text-heading-lg:1.75rem;--text-heading-md:1.3125rem;--text-heading-sm:1.0625rem;
--text-body-lg:1.125rem;--text-body-md:1rem;--text-body-sm:0.9375rem;--text-label:0.8125rem;--text-caption:0.75rem;

--leading-tight:1.12;--leading-snug:1.28;--leading-normal:1.6;--leading-relaxed:1.72;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--tracking-tight:-0.015em;--tracking-normal:0;--tracking-wide:0.12em;
}

/* --- spacing.css --- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;

--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:30px;--radius-full:999px;

--shadow-sm:0 1px 2px rgba(15,26,24,0.05);
--shadow-md:0 10px 28px rgba(15,26,24,0.07);
--shadow-lg:0 24px 60px rgba(15,26,24,0.12);
--shadow-card-hover:0 18px 44px rgba(15,26,24,0.11);
--shadow-pop:0 14px 34px rgba(18,180,140,0.28);

--ease-standard:cubic-bezier(.4,0,.2,1);
--duration-fast:140ms;
--duration-normal:260ms;
--duration-photo:500ms;

--pattern-dots:radial-gradient(currentColor 1.6px, transparent 1.6px);
--pattern-dots-size:16px 16px;
--pattern-diagonal:repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 9px);
--pattern-gears:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23A9CBC4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='34' cy='34' r='15'/%3E%3Ccircle cx='34' cy='34' r='6'/%3E%3Cpath d='M34 12v7M34 49v7M12 34h7M49 34h7M18.5 18.5l5 5M44.5 44.5l5 5M49.5 18.5l-5 5M23.5 44.5l-5 5'/%3E%3Ccircle cx='90' cy='88' r='22'/%3E%3Ccircle cx='90' cy='88' r='9'/%3E%3Cpath d='M90 58v9M90 109v9M60 88h9M111 88h9M69 67l6 6M105 103l6 6M111 67l-6 6M75 103l-6 6'/%3E%3C/g%3E%3C/svg%3E");

--clip-blade-r:polygon(0 0, 100% 6%, 100% 100%, 0 94%);
--clip-blade-l:polygon(0 6%, 100% 0, 100% 94%, 0 100%);
--radius-arch:999px 999px var(--radius-lg) var(--radius-lg);

--container-max:1240px;
}

/* === base === */
/* Peakative DS — tokens/base.css (verbatim) + puentes minimos para WordPress */

/* Un elemento con [hidden] no se ve, aunque su clase traiga display. */
[hidden]{display:none !important}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--leading-normal);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);margin:0;color:var(--text-primary)}
a{color:var(--text-brand);text-decoration:none}
a:hover{color:var(--brand-pop-strong)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Copiado de tokens/base.css del design system. En las capturas PNG del
   diseno el hero sale a color porque se exportaron con el cursor encima: el
   resto de fotos de esas mismas capturas estan en gris. */
.pk-photo{filter:grayscale(1) contrast(1.06);transition:filter var(--duration-photo) var(--ease-standard)}
.pk-photo:hover,.pk-photo:focus-within{filter:grayscale(0) contrast(1)}
.pk-lift{transition:transform var(--duration-normal) var(--ease-standard),box-shadow var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}
.pk-lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:var(--line-2)}
.pk-lift-dark{transition:transform var(--duration-normal) var(--ease-standard),background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}
.pk-lift-dark:hover{transform:translateY(-5px);background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.3)}
.pk-arrow span{display:inline-block;transition:transform var(--duration-normal) var(--ease-standard)}
.pk-arrow:hover span{transform:translate(3px,-3px)}
.pk-underline{position:relative;display:inline-block;padding-bottom:2px}
.pk-underline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform var(--duration-normal) var(--ease-standard)}
.pk-underline:hover::after{transform-origin:left;transform:scaleX(0)}
.pk-dots{color:var(--line-2);background-image:var(--pattern-dots);background-size:var(--pattern-dots-size)}
@keyframes pk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pk-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.pk-lift:hover,.pk-lift-dark:hover{transform:none}}

/* La banda vive en blocks.css: fondo, contenedor y ritmo vertical. Aqui hubo
   un puente provisional que ademas ponia padding-block:96px, con lo que cada
   banda sumaba ese relleno al suyo propio y el sitio salia mucho mas alto que
   el diseno. */

/* Skip link (accesibilidad del DS) */
.pk-skip{position:absolute;left:var(--space-5);top:calc(-1 * var(--space-10));z-index:100;background:var(--surface-dark);color:var(--text-inverse);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-weight:var(--weight-semibold);transition:top var(--duration-normal) var(--ease-standard)}
.pk-skip:focus{top:var(--space-5);color:var(--text-inverse)}

/* === components === */
/* ==========================================================================
   Peakative — componentes del design system, portados a CSS
   Equivalencias 1:1 con _ds_bundle.js (Button, Kicker, Photo, Stamp,
   Marquee, Card, Reveal). Los valores salen de los tokens, nunca literales.
   ========================================================================== */

/* --- Kicker: etiqueta de seccion con su marca de dos arcos ---------------- */
/* El rotulo se compone igual sea span o titulo: sin esto, la regla de
   h1-h4 le impone su interlineado y sale mas apretado que en el diseno. */
.pk-kicker{margin:0;line-height:var(--leading-normal);display:inline-flex;width:fit-content;max-width:100%;align-self:flex-start;align-items:center;gap:10px;font-family:var(--font-body);font-size:var(--text-label);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-primary);justify-content:flex-start}
.pk-kicker--center{align-self:center;justify-content:center}
.pk-kicker--dark{color:var(--white)}
.pk-kicker__mark{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.pk-kicker__mark i{display:block;width:7px;height:15px;font-style:normal}
.pk-kicker__mark i:first-child{background:var(--brand-primary);border-radius:999px 999px 2px 2px}
.pk-kicker__mark i:last-child{background:var(--pop-600);border-radius:2px 2px 999px 999px}
.pk-kicker--dark .pk-kicker__mark i:first-child{background:var(--brand-pop)}
.pk-kicker--dark .pk-kicker__mark i:last-child{background:var(--white)}

/* --- Button -------------------------------------------------------------- */
.pk-btn{font-family:var(--font-body);font-weight:600;border-radius:var(--radius-full);padding:15px 26px;font-size:var(--text-body-sm);display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;cursor:pointer;transition:background var(--duration-normal) var(--ease-standard),color var(--duration-normal),border-color var(--duration-normal),box-shadow var(--duration-normal);line-height:1.2;white-space:nowrap;text-decoration:none}
.pk-btn--sm{padding:11px 20px;font-size:var(--text-body-sm)}
.pk-btn--lg{padding:18px 32px;font-size:var(--text-body-md)}
.pk-btn--dark{background:var(--brand-primary);color:var(--white)}
.pk-btn--dark:hover{background:var(--teal-800);color:var(--white)}
.pk-btn--pop{background:var(--brand-pop);color:var(--text-on-pop);box-shadow:var(--shadow-pop)}
.pk-btn--pop:hover{background:var(--pop-500);color:var(--text-on-pop)}
.pk-btn--white{background:var(--white);color:var(--text-primary);border-color:var(--border-subtle)}
.pk-btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-default)}
.pk-btn--outline-inverse{background:transparent;color:var(--white);border-color:var(--border-on-dark)}
.pk-btn--link,.pk-btn--link-inverse{background:transparent;padding:0;border-radius:0;border:none;white-space:normal}
.pk-btn--link{color:var(--text-primary)}
.pk-btn--link-inverse{color:var(--white)}
.pk-btn--link:hover{color:var(--text-accent)}
.pk-btn--link-inverse:hover{color:var(--brand-pop)}
.pk-btn[disabled]{cursor:not-allowed;opacity:.45}

/* --- Photo: B/N en reposo, color en hover o foco ------------------------- */
.pk-figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-2)}
.pk-figure > img{width:100%;height:100%;object-fit:cover;object-position:var(--pk-foto-encuadre,center)}
.pk-figure--clip-blade-r{border-radius:0;clip-path:var(--clip-blade-r)}
.pk-figure--clip-blade-l{border-radius:0;clip-path:var(--clip-blade-l)}

/* --- Card ---------------------------------------------------------------- */
.pk-card{border-radius:var(--radius-lg);padding:26px;font-family:var(--font-body);background:var(--surface-card);border:1px solid var(--border-subtle)}
.pk-card--paper{background:var(--surface-paper)}
.pk-card--pop{background:var(--surface-pop);color:var(--text-on-pop);border-color:transparent}
.pk-card--dark{background:var(--surface-dark-deep);color:var(--text-inverse);border-color:transparent}
.pk-card--dark-soft{background:rgba(255,255,255,0.06);color:var(--text-inverse);border:1px solid var(--border-on-dark)}

/* --- Marquee: banda infinita, una sola vez por pagina -------------------- */
.pk-marquee{overflow:hidden;padding:22px 0;white-space:nowrap}
.pk-marquee--dark{background:var(--surface-dark);color:var(--white)}
.pk-marquee--pop{background:var(--surface-pop);color:var(--text-on-pop)}
.pk-marquee--paper{background:var(--surface-paper);color:var(--text-primary)}
.pk-marquee__run{display:inline-flex;align-items:center;gap:40px;animation:pk-marquee var(--pk-marquee-speed,34s) linear infinite;will-change:transform}
.pk-marquee__word{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:var(--tracking-tight)}
.pk-marquee__sep{font-size:20px}
.pk-marquee--dark .pk-marquee__sep{color:var(--brand-pop)}
.pk-marquee--pop .pk-marquee__sep{color:var(--teal-700)}
.pk-marquee--paper .pk-marquee__sep{color:var(--brand-pop-strong)}

/* --- Stamp: sello en rotacion con flecha que sigue al cursor ------------- */
.pk-stamp{position:relative;width:var(--pk-stamp-size,132px);height:var(--pk-stamp-size,132px);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-dark-deep);flex-shrink:0;text-decoration:none}
.pk-stamp__ring{position:absolute;inset:0;width:100%;height:100%;animation:pk-spin 24s linear infinite}
.pk-stamp__ring text{fill:var(--white);font-family:var(--font-body);font-size:8.4px;font-weight:600;letter-spacing:.14em}
.pk-stamp__dot{width:calc(var(--pk-stamp-size,132px) * .34);height:calc(var(--pk-stamp-size,132px) * .34);border-radius:50%;background:var(--brand-pop);display:inline-flex;align-items:center;justify-content:center;color:var(--teal-900);font-size:calc(var(--pk-stamp-size,132px) * .15);font-weight:700}
.pk-stamp__glyph{display:inline-block;transform:rotate(45deg);transition:transform 120ms linear}

/* --- Reveal: entrada de bloques ----------------------------------------- */
.pk-reveal{opacity:0;transform:translateY(18px);transition:opacity 640ms var(--ease-standard),transform 640ms var(--ease-standard)}
.pk-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pk-reveal{opacity:1;transform:none}}

/* --- Titular de dos clausulas: el recurso de enfasis de la marca --------- */
/* En el diseno el titular de pagina va en bold y todo lo demas en
   semibold; solo dos pantallas piden bold en un h2. */
.pk-split{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--teal-700);text-wrap:pretty}
h1.pk-split,.pk-split--bold{font-weight:var(--weight-bold)}
.pk-split--display-xl{font-size:var(--text-display-xl);line-height:var(--leading-tight)}
.pk-split--display-lg{font-size:var(--text-display-lg);line-height:var(--leading-tight)}
.pk-split--display-md{font-size:var(--text-display-md)}
.pk-split--heading-lg{font-size:var(--text-heading-lg);color:var(--ink-900)}
.pk-split--heading-md{font-size:var(--text-heading-md);font-weight:var(--weight-semibold);color:var(--ink-900)}
/* El diseno separa el titular de su kicker: 20px bajo el h1 del hero,
   22px bajo el resto. Sin esto el bloque queda pegado. */
/* El diseno separa 24px el kicker de un enunciado y 22px de un titular
   de seccion; el titular de pagina y el de particularidad van aparte. */
.pk-kicker + .pk-split{margin-top:24px}
/* Aqui no va ninguna regla para los 22px del diseno. Atados a h2 ganaban en
   especificidad a las reglas que anulan el margen dentro de una rejilla, y
   por tamano se los comen titulares que quieren 24: no hay selector que
   distinga los dos casos porque la diferencia es de instancia, no de tipo.
   Los 22px los pone el propio bloque con su atributo marginTop. */
.pk-kicker + .pk-split--display-lg{margin-top:20px}
/* El enunciado de la banda de particularidad respira mas que el resto. */
.pk-kicker + .pk-split--heading-lg{margin-top:clamp(20px,2.4vw,30px)}
.pk-split--ink{color:var(--ink-900);font-weight:var(--weight-semibold)}
.pk-split--teal800{color:var(--teal-800)}
.pk-split__b{font-weight:var(--weight-regular);color:var(--ink-500)}
.pk-split--dark{color:var(--white)}
.pk-split--dark .pk-split__b{color:var(--text-on-dark-muted)}

/* Marcador de foto: superficie plana, nunca ilustracion */
.pk-figure__slot{display:block;width:100%;height:100%;background:var(--paper-2)}

/* --- Area tactil en movil ------------------------------------------------
   El variant `link` mide 18px de alto, muy por debajo del minimo tactil.
   Se amplia el area pulsable con padding y se compensa con margen negativo,
   de modo que el texto no se mueve ni un pixel respecto al diseno.          */
@media (max-width: 767px) {
	.pk-btn--link,
	.pk-btn--link-inverse {
		padding-block: 13px;
		margin-block: -13px;
	}
}

/* === blocks === */
/* ==========================================================================
   Peakative — bloques de seccion
   El sistema de composicion del design system, en CSS:
   bandas a todo el ancho, rejillas auto-fit, recorrido, fugas, pildoras.
   ========================================================================== */

/* --- Ritmo vertical del sitio ---------------------------------------------
   Estas dos variables gobiernan el aire de TODAS las bandas. No son del
   design system: son nuestras, y existen para poder afinar el ritmo del
   sitio entero desde un solo sitio en vez de pagina por pagina.

   El diseno original usaba clamp(52px,6vw,96px) y clamp(52px,7vw,104px).
   Se han bajado a peticion del cliente porque en pantallas anchas el aire
   resultaba excesivo; a anchos medios la diferencia es minima.            */
:root{
	/* Ritmo vertical del diseno, tal cual. Estuvo reducido un 29% mientras
	   base.css sumaba otros 96px por banda: quitado aquel relleno duplicado,
	   estos son los valores que reproducen el original. */
	--pk-band-y: clamp(52px,6vw,96px);
	--pk-band-y-tall: clamp(52px,7vw,104px);
}

/* --- Band: la seccion a todo el ancho ------------------------------------ */
.pk-band{position:relative;width:100%}
.pk-band--white{background:var(--surface-page)}
.pk-band--paper{background:var(--surface-paper)}
.pk-band--dark{background:var(--surface-dark);color:var(--white)}
.pk-band--deep{background:var(--surface-dark-deep);color:var(--white)}
.pk-band--dark .pk-split,
.pk-band--deep .pk-split{color:var(--white)}
.pk-band--dark p,
.pk-band--deep p{color:var(--text-on-dark-muted)}

/* La trama va detras del contenido, nunca encima */
.pk-band__pattern{position:absolute;inset:0;pointer-events:none}
.pk-band__pattern--dots{color:var(--teal-300);background-image:var(--pattern-dots);background-size:var(--pattern-dots-size);opacity:.55;mask-image:linear-gradient(115deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0.3) 44%,transparent 68%);-webkit-mask-image:linear-gradient(115deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0.3) 44%,transparent 68%)}
.pk-band__pattern--diagonal{background-image:var(--pattern-diagonal)}
.pk-band__pattern--gears{background-image:var(--pattern-gears);background-size:150px 150px;background-repeat:repeat;opacity:.45}
/* Los puntos sobre banda oscura van en el teal medio y algo mas tenues. */
.pk-band__pattern--dots-deep{color:var(--teal-500);background-image:var(--pattern-dots);background-size:var(--pattern-dots-size);opacity:.45;mask-image:linear-gradient(115deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0.35) 40%,transparent 66%);-webkit-mask-image:linear-gradient(115deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0.35) 40%,transparent 66%)}

.pk-band__inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--pk-band-pt,var(--pk-band-y)) 24px var(--pk-band-pb,var(--pk-band-y))}
/* El hero sin miga tiene su propio ritmo en el diseno, no una fraccion
   del de las demas bandas. */
.pk-band--hero{--pk-band-pt:clamp(48px,6vw,96px);--pk-band-pb:clamp(44px,5vw,80px)}
.pk-band--tall{--pk-band-pt:var(--pk-band-y-tall);--pk-band-pb:var(--pk-band-y-tall)}
/* Banda del apilado de tarjetas: cierra con mas aire que ninguna otra,
   para que la ultima tarjeta no quede pegada a la siguiente banda. */
.pk-band--tarjetas{--pk-band-pb:clamp(72px,8vw,120px)}
.pk-band--narrow .pk-band__inner{max-width:920px}
/* Centrado a todo el ancho del contenedor: la medida de 30ch/48ch es para
   el texto alineado a la izquierda, no para esta banda. */
.is-style-lead.pk-lead--center,.is-style-prose.pk-prose--center{max-width:none;margin-inline:auto}
.pk-kicker + .is-style-lead.pk-lead--center{margin-top:28px}
.is-style-lead.pk-lead--center + .is-style-prose.pk-prose--center{margin-top:28px}
.pk-band--flush-bottom .pk-band__inner{padding-bottom:0}

/* --- Split: la rejilla auto-fit de dos columnas -------------------------- */
/* min(100%,Npx) es obligatorio: sin el, un minimo de 320px desborda un
   viewport de 360px. Es regla explicita del handoff.                        */
.pk-split-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--pk-col,300px)),1fr));gap:var(--pk-gap,clamp(32px,5vw,72px))}
.pk-split-grid--center{align-items:center}
.pk-split-grid--start{align-items:start}
.pk-split-grid--end{align-items:end}
.pk-split-grid--stretch{align-items:stretch}

/* --- Recorrido: el grafico recurrente. Tipografia, nunca tarjetas -------- */
.pk-journey{margin:clamp(36px,4vw,60px) 0 0;padding:0;list-style:none;display:grid;gap:28px 0;grid-template-columns:repeat(var(--pk-steps,6),minmax(0,1fr))}
.pk-journey__item{display:flex;flex-direction:column;gap:18px;padding-right:12px}
.pk-journey__head{display:flex;align-items:center;gap:0}
.pk-journey__disc{flex:0 0 auto;width:clamp(32px,3.4vw,46px);height:clamp(32px,3.4vw,46px);border-radius:var(--radius-full);background:var(--brand-pop);color:var(--teal-900);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:clamp(11px,1.1vw,var(--text-body-sm));font-weight:var(--weight-bold)}
.pk-journey__conn{flex:1 1 auto;height:2px;margin-left:10px;background-image:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 14px);display:block}
.pk-journey__name{font-family:var(--font-display);font-size:clamp(15px,1.5vw,var(--text-heading-md));font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-800);line-height:var(--leading-snug)}
/* Sobre banda oscura el nombre de la etapa va en blanco. */
.pk-band--dark .pk-journey__name,.pk-band--deep .pk-journey__name{color:var(--white)}
@media (max-width:900px){.pk-journey{grid-template-columns:repeat(3,minmax(0,1fr))}.pk-journey__conn{display:none}}
@media (max-width:560px){.pk-journey{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Variante compacta del Metodo: disco arriba, sin conector */
.pk-journey--stacked{margin-top:clamp(28px,3vw,44px);gap:24px}
.pk-journey--stacked .pk-journey__item{gap:14px}
.pk-journey--stacked .pk-journey__disc{width:44px;height:44px;font-size:var(--text-body-sm)}
.pk-journey--stacked .pk-journey__name{font-size:var(--text-heading-sm);line-height:var(--leading-normal)}

/* Variante de relevo: punto en vez de numero, conector continuo y la linea
   de quien se hace cargo de la etapa */
.pk-journey--handoff{gap:26px 0}
.pk-journey--handoff .pk-journey__item{gap:16px}
.pk-journey--handoff .pk-journey__disc{width:14px;height:14px}
.pk-journey--handoff .pk-journey__conn{background-image:none;background:var(--line-2)}
.pk-journey__owner{font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--ink-500);text-wrap:pretty}

/* Pie del recorrido: pelo divisor y dos columnas de texto */
.pk-journey-foot{margin-top:clamp(32px,4vw,56px);padding-top:32px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,64px)}
.pk-journey-foot p{margin:0;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-journey-foot p:last-child{color:var(--ink-900)}
.pk-journey-foot--solo{display:block;margin-top:clamp(36px,4vw,56px)}
.pk-journey-foot--solo p{max-width:60ch;font-family:var(--font-display);font-size:var(--text-heading-md);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--ink-900)}
.pk-journey-foot--suave{border-top-color:var(--border-subtle)}
.pk-journey-foot--inline{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;justify-content:space-between}
.pk-journey-foot--inline p{max-width:64ch}

/* --- Fugas: lista numerada con pelos, foto alternando lado -------------- */
.pk-leaks{margin:clamp(28px,3vw,44px) 0 0;padding:0;list-style:none;border-top:1px solid var(--border-subtle)}
.pk-leak{border-bottom:1px solid var(--border-subtle);padding:clamp(28px,4vw,52px) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,64px);align-items:center}
.pk-leak__body{display:flex;flex-direction:column;gap:22px}
.pk-leak--photo-left .pk-leak__body{order:2}
.pk-leak--photo-left .pk-figure{order:1}
.pk-leak__title-row{display:flex;gap:18px;align-items:baseline}
.pk-leak__num{font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-bold);color:var(--pop-700)}
.pk-leak__title{margin:0;max-width:22ch;font-family:var(--font-display);font-size:var(--text-heading-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--ink-900);text-wrap:pretty}
.pk-leak__flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pk-leak__dot{width:10px;height:10px;border-radius:var(--radius-full);background:var(--brand-pop);display:block}
.pk-leak__ring{width:14px;height:14px;border-radius:var(--radius-full);border:2px solid var(--pop-700);display:block}
.pk-leak__dash{width:44px;height:2px;background-image:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);display:block}
.pk-leak__from{font-family:var(--font-display);font-size:var(--text-body-md);font-weight:var(--weight-semibold);color:var(--teal-800)}
.pk-leak__to{font-family:var(--font-display);font-size:var(--text-body-md);font-weight:var(--weight-semibold);color:var(--ink-500)}
.pk-leak__word{font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--pop-700)}
.pk-leak__text{margin:0;max-width:50ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}

/* --- Definiciones (capacidades del sistema) ----------------------------- */
.pk-defs{margin:0;display:flex;flex-direction:column}
.pk-defs__row{padding:22px 0;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 28px;align-items:baseline}
.pk-defs__term{margin:0;font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-800)}
.pk-defs__desc{margin:0;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
/* Columna de grupo: la etiqueta y su lista, separadas como en el diseno. */
.pk-grupo{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,32px)}
.pk-grupo > *{margin-block:0}

/* Apilada: el termino encima de su definicion, para columnas estrechas. */
.pk-defs--apilada{border-top:1px solid var(--line-2)}
.pk-defs--apilada .pk-defs__row{display:flex;flex-direction:column;gap:10px;padding:20px 0}
.pk-defs--apilada .pk-defs__term{font-size:var(--text-heading-sm)}
.pk-defs--apilada .pk-defs__desc{max-width:44ch}

/* --- Pildoras de sector -------------------------------------------------- */
.pk-pills{max-width:var(--container-max);margin:0 auto;padding:0 24px clamp(52px,6vw,96px);display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.pk-pill{display:inline-flex;align-items:center;padding:15px 28px;border-radius:var(--radius-full);background:var(--paper-2);color:var(--teal-800);font-family:var(--font-display);font-size:var(--text-body-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);text-decoration:none;transition:background var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-pill:hover{background:var(--teal-700);color:var(--white)}
.pk-pill--paper{background:var(--paper)}

/* --- Utilidades de texto usadas por las secciones ----------------------- */
.pk-prose{margin:26px 0 0;max-width:48ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-prose--tight{max-width:46ch}
.pk-prose--strong{color:var(--ink-900)}
.pk-prose--center{text-align:center;max-width:none}
.pk-lead{margin:24px 0 0;max-width:30ch;font-family:var(--font-display);font-size:var(--text-display-md);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--teal-700);text-wrap:pretty}
.pk-lead--center{text-align:center;max-width:none;margin-top:28px}
.pk-actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.pk-actions--tight{margin-top:28px;display:block}
.pk-stack{display:flex;flex-direction:column;gap:30px;align-items:flex-start}
.pk-stack--holgado{gap:clamp(24px,3vw,36px)}
.pk-stack--hero{gap:clamp(24px,3vw,34px)}
.pk-stack--enfoque{gap:clamp(22px,2.6vw,32px)}
.pk-stack--formulario{gap:clamp(18px,2vw,26px)}
/* Estos contenedores separan con gap. WordPress ademas mete su blockGap
   como margin-block-start entre hermanos, que se sumaba al gap: un boton
   sin margen propio quedaba 24px mas abajo que en el diseno. */
.pk-stack > *,.pk-actions > *,.pk-split-grid > *,.pk-journey-foot > *{margin-block-start:0}
/* Un parrafo que es columna entera de la rejilla no lleva el margen
   superior de la prosa: ese margen es para cuando va debajo de algo. */
.pk-split-grid > .is-style-prose,.pk-split-grid > .is-style-lead,.pk-split-grid > .pk-split{margin-top:0}
/* En el patron de servicio el kicker encabeza la banda y la rejilla va
   debajo, separada. */
.pk-kicker + .pk-split-grid{margin-top:var(--pk-split-mt,clamp(28px,3.4vw,44px))}
/* En el hero del patron de servicio la rejilla va debajo de las migas. */
.pk-crumbs + .pk-split-grid{margin-top:var(--pk-split-mt,clamp(28px,3.5vw,48px))}
/* Y ese hero reparte su relleno al reves que el de portada: menos arriba,
   porque las migas ya separan, y mas abajo. */
.pk-band--hero:has(.pk-crumbs){--pk-band-pt:clamp(44px,5vw,80px);--pk-band-pb:clamp(48px,6vw,88px)}

/* Grupo asimetrico de fotos: nunca una rejilla uniforme */
.pk-photo-pair{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:end}

/* El hero coloca el sello montado sobre el borde de la foto */
.pk-hero-media{position:relative;padding-bottom:26px}
.pk-hero-media__stamp{position:absolute;left:-24px;bottom:0}

/* --- Estilos de bloque sobre core/paragraph ----------------------------- */
.is-style-prose{margin:26px 0 0;max-width:48ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.is-style-prose-strong{margin:22px 0 0;max-width:48ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--ink-900);text-wrap:pretty}
/* Algunos parrafos secundarios del diseno van un punto mas chicos. */
.is-style-prose-sm{margin:20px 0 0;max-width:46ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-band--dark .is-style-prose-sm,.pk-band--deep .is-style-prose-sm{color:var(--text-on-dark-muted)}
.is-style-lead{margin:24px 0 0;max-width:30ch;font-family:var(--font-display);font-size:var(--text-display-md);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--teal-700);text-wrap:pretty}
.pk-band--dark .is-style-prose,.pk-band--deep .is-style-prose{color:var(--text-on-dark-muted)}
.pk-band--dark .is-style-lead,.pk-band--deep .is-style-lead{color:var(--white)}

/* Las pildoras dentro de una banda no vuelven a limitar el ancho */
.pk-band__inner .pk-pills{max-width:none;margin:clamp(52px,6vw,96px) 0 0;padding:0}
.pk-band__inner .pk-pills--tight{margin:clamp(36px,4vw,60px) 0 0}
/* Los group de WordPress no deben imponer ancho dentro de nuestras rejillas */
.pk-split-grid > .wp-block-group,.pk-band__inner > .wp-block-group{max-width:none}

/* --- Las bandas van a hueso ---------------------------------------------
   WordPress separa los bloques de primer nivel con --wp--style--block-gap.
   El ritmo del design system es de bandas contiguas, sin aire entre ellas.  */
main.wp-block-group{margin-block:0}
.wp-block-post-content > *{margin-block:0}
.wp-block-post-content > * + *{margin-block-start:0}

/* --- Nota con pelo -------------------------------------------------------- */
.pk-note{margin:36px 0 0;display:flex;align-items:center;gap:14px;color:var(--ink-500);font-size:var(--text-label);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.pk-note__rule{width:44px;height:1px;background:var(--line-2);display:block;flex:0 0 auto}
.pk-note--dark{color:var(--text-on-dark-muted)}
.pk-note--dark .pk-note__rule{background:var(--border-on-dark)}

/* --- Tarjetas de vertical ------------------------------------------------- */
.pk-verticals{margin-top:clamp(36px,4vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,4vw,64px)}
.pk-vertical{display:flex;flex-direction:column;gap:24px}
.pk-vertical__head{display:flex;align-items:baseline;gap:14px}
.pk-vertical__num{font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-bold);color:var(--pop-700)}
.pk-vertical__name{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);color:var(--teal-700);letter-spacing:var(--tracking-tight)}
.pk-vertical__title{margin:0;max-width:24ch;font-family:var(--font-display);font-size:var(--text-heading-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--ink-900);text-wrap:pretty}
.pk-vertical__body{margin:0;max-width:40ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
/* El pelo divisor solo existe cuando las dos columnas caben lado a lado */
@media (min-width:768px){
	.pk-vertical + .pk-vertical{border-left:1px solid var(--line-2);padding-left:clamp(0px,3vw,48px)}
}

/* --- Etapas del sistema --------------------------------------------------- */
.pk-steps{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;border-top:1px solid var(--border-on-dark)}
.pk-steps--light{border-top-color:var(--line-2)}
.pk-step{padding:28px 24px;display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--border-on-dark)}
.pk-steps--light .pk-step{border-left-color:var(--line-2)}
.pk-step:first-child{padding-left:0;border-left:0}
.pk-step:last-child{padding-right:0}
.pk-step__dot{width:12px;height:12px;border-radius:var(--radius-full);background:var(--brand-pop);display:block}
.pk-step__name{font-family:var(--font-display);font-size:var(--text-heading-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--white)}
.pk-steps--light .pk-step__name{color:var(--teal-800)}
.pk-step__desc{font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--text-on-dark-muted)}
.pk-steps--light .pk-step__desc{color:var(--text-secondary)}
/* Apilado: un pelo vertical no separa nada si solo hay una columna */
@media (max-width:767px){
	.pk-step{padding-inline:0;border-left:0;border-top:1px solid var(--border-on-dark)}
	.pk-steps--light .pk-step{border-top-color:var(--line-2)}
	.pk-step:first-child{border-top:0}
}

/* --- Nada se separa entre cabecera, contenido y pie ----------------------
   WordPress envuelve la plantilla en .wp-site-blocks y separa sus hijos con
   --wp--style--block-gap. Eso mete una franja blanca entre la ultima banda
   y el pie, que en el diseno van pegados.                                   */
.wp-site-blocks > * + *{margin-block-start:0}
.wp-site-blocks{padding-block:0}


/* --- Altura maxima de la foto del hero ------------------------------------
   La foto va en 4/5, asi que en pantallas anchas crece hasta ~700px y deja
   un hueco muerto encima y debajo del texto, que se centra contra ella.
   Se limita a lo que el propio diseno preveia (~520px) para que el hero no
   se estire en escritorio. En anchos medios el tope ni siquiera se alcanza. */
/* Sin tope de altura: la foto del hero llena su columna con su propia
   proporcion 4/5, como en el diseno. El tope se puso cuando cada banda
   arrastraba 96px de relleno de mas y la pagina salia larguisima. */

/* Medidas de linea del diseno. Cada banda fija la suya en ch; el 48ch de
   .is-style-prose es solo el valor mas repetido, no vale para todas. */
p.pk-w-30{max-width:30ch}
p.pk-w-42{max-width:42ch}
p.pk-w-44{max-width:44ch}
p.pk-w-46{max-width:46ch}
/* La separacion tampoco es la misma en todas: la del cuerpo que sigue a un
   titular va mas apretada en algunas bandas. */
p.pk-mt-24{margin-top:24px}
p.pk-mt-30{margin-top:clamp(20px,2.4vw,30px)}
p.pk-w-50{max-width:50ch}
p.pk-w-52{max-width:52ch}
p.pk-w-56{max-width:56ch}
p.pk-w-58{max-width:58ch}
p.pk-w-62{max-width:62ch}

/* Sello en un hero sin foto: se apoya en la esquina de la banda para no
   mover ni un pixel de la columna de texto. */
.pk-band--hero{position:relative}
.pk-hero-sello{position:absolute;top:clamp(24px,3vw,44px);right:clamp(24px,4vw,64px);z-index:1;margin:0}
@media (max-width:900px){.pk-hero-sello{display:none}}
/* Las metricas del Metodo no son enlaces ni van centradas: son una lista
   corta al pie de una columna, con el cuerpo chico. */
.pk-pills--sm{max-width:none;margin:0;padding:0;list-style:none;justify-content:flex-start;gap:12px}
.pk-band__inner .pk-pills--sm{margin:0}
.pk-pill--sm{padding:11px 20px;background:var(--paper);font-size:var(--text-body-sm)}

/* El hero del Metodo no lleva foto: la miga va pegada al titular. */
.pk-crumbs + .pk-split{margin-top:28px}
/* ...y debajo del titular arranca la rejilla de cuerpo y boton. */
.pk-split + .pk-split-grid{margin-top:var(--pk-split-mt,clamp(28px,3vw,48px))}

/* Algunos parrafos no arrancan con los 26px de .is-style-prose. */
.is-style-prose.pk-mt-24{margin-top:24px}

/* Cierre a dos extremos: el titular a la izquierda y el boton al pie de la
   derecha, como en el CTA final del Metodo. */
.pk-cta-fila{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-end;justify-content:space-between}
.pk-cta-fila > *,.pk-cta-fila .pk-actions{margin-top:0}

/* El hero de Recursos y del Articulo no tiene rejilla: un solo bloque de
   texto con la medida del diseno. */
.pk-hero-texto,.pk-band__inner > .pk-hero-texto{margin-top:clamp(26px,3.2vw,44px);max-width:64ch}
.pk-hero-texto > *{margin-block-start:0}
.pk-hero-texto .pk-split{max-width:22ch}
.pk-hero-texto .pk-split + .is-style-prose{margin-top:clamp(22px,2.6vw,32px);max-width:none}
.pk-hero-texto .is-style-prose + .is-style-nota{margin-top:18px}
.is-style-nota{margin:18px 0 0;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--ink-500);text-wrap:pretty}


/* Las pilas mandan con gap. Los estilos de parrafo se definen mas abajo que
   la regla que anula sus margenes, asi que ganaban por orden y el hueco se
   sumaba dos veces. */
.pk-stack > *,.pk-actions > *,.pk-split-grid > *,.pk-journey-foot > *,.pk-cta-fila > *{margin-block-start:0}

/* Un parrafo que va en blanco sobre banda oscura, no en el tono apagado. */
.pk-band--dark .pk-blanco,.pk-band--deep .pk-blanco{color:var(--white)}

/* === header === */
/* ==========================================================================
   Peakative — cabecera y pie
   La cabecera es fija arriba y su altura real se mide en runtime, porque la
   navegacion envuelve cuando el idioma alarga las etiquetas.
   ========================================================================== */

/* --- Cabecera ------------------------------------------------------------ */
.pk-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--border-subtle)}
.pk-header__bar{max-width:var(--container-max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

.pk-header__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
/* 30px y no los 22 del handoff: el logotipo lleva "MARKETING AGENCY" bajo
   la palabra, y a 22px de alto esa linea queda en unos 4px y no se lee. */
.pk-header__logo{height:30px;width:auto;display:block;align-self:center}
.pk-header__rule{width:1px;height:20px;background:var(--line-2);display:block}
.pk-header__vertical{font-family:var(--font-display);font-size:var(--text-label);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--teal-700)}

/* --- Navegacion de escritorio -------------------------------------------- */
.pk-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pk-nav__link,.pk-nav__trigger{font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--ink-900);text-decoration:none;padding:9px 14px;border:0;border-radius:var(--radius-full);background:transparent;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background var(--duration-normal) var(--ease-standard)}
.pk-nav__link:hover,.pk-nav__trigger:hover{color:var(--ink-900);background:var(--paper)}
.pk-nav__trigger[aria-expanded="true"]{background:var(--paper)}
.pk-nav__caret{font-size:10px;color:var(--ink-500)}
.pk-nav__cta{margin-left:6px}

/* --- Conmutador de idioma ------------------------------------------------ */
.pk-lang{display:flex;align-items:center;gap:3px;margin-left:6px}
.pk-lang__btn{font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);padding:7px 10px;border:0;border-radius:var(--radius-full);cursor:pointer;background:transparent;color:var(--ink-500);text-decoration:none}
.pk-lang__btn.is-active{background:var(--teal-700);color:var(--white)}
.pk-lang__btn:hover{color:var(--teal-700)}
.pk-lang__btn.is-active:hover{color:var(--white)}
.pk-lang__sep{color:var(--ink-300);font-size:var(--text-caption)}

/* --- Mega menu ----------------------------------------------------------- */
.pk-mega{border-top:1px solid var(--border-subtle);background:var(--white);box-shadow:var(--shadow-md)}
.pk-mega[hidden]{display:none}
.pk-mega__inner{max-width:var(--container-max);margin:0 auto;padding:36px 24px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px}
.pk-mega__col{display:flex;flex-direction:column;gap:14px}
.pk-mega__label{font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--pop-700)}
.pk-mega__link{font-size:var(--text-body-md);color:var(--ink-900);text-decoration:none;line-height:var(--leading-snug)}
.pk-mega__link:hover{color:var(--text-accent)}

/* --- Barra y panel movil -------------------------------------------------- */
.pk-mobbar{display:none;align-items:center;gap:8px}
.pk-mobbar__toggle{width:46px;height:46px;border:1px solid var(--border-default);border-radius:var(--radius-full);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--teal-700);flex:0 0 auto}
.pk-lang--movil .pk-lang__btn{padding:9px 11px}

.pk-mob{border-top:1px solid var(--border-subtle);background:var(--white);overflow-y:auto;max-height:calc(100vh - var(--pk-header-h, 78px))}
.pk-mob[hidden]{display:none}
.pk-mob__inner{padding:8px 24px 28px;display:flex;flex-direction:column}
.pk-mob__group{border-bottom:1px solid var(--line-2)}
.pk-mob__toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;border:0;background:transparent;cursor:pointer;text-align:left;font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink-900)}
.pk-mob__sign{width:28px;height:28px;border-radius:var(--radius-full);background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:var(--text-body-md);color:var(--teal-700);flex:0 0 auto}
.pk-mob__panel{padding-bottom:14px;display:flex;flex-direction:column}
.pk-mob__panel[hidden]{display:none}
.pk-mob__label{font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--pop-700);padding:14px 0 6px}
.pk-mob__sub{padding:12px 0;font-size:var(--text-body-md);color:var(--ink-700);text-decoration:none;min-height:44px;display:flex;align-items:center}
.pk-mob__sub:hover{color:var(--text-accent)}
.pk-mob__link{border-bottom:1px solid var(--line-2);padding:18px 0;font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink-900);text-decoration:none;min-height:44px;display:flex;align-items:center}
.pk-mob__cta{padding-top:24px}

/* Punto de corte unico de la navegacion, tal como fija el design system. */
@media (max-width:899px){
	.pk-nav{display:none}
	.pk-mega{display:none}
	.pk-mobbar{display:flex}
}
@media (min-width:900px){
	.pk-mob{display:none}
}

/* --- Pie ------------------------------------------------------------------ */
.pk-footer{background:var(--surface-dark-deep);color:var(--white)}
.pk-footer a{color:var(--white);text-decoration:none}
.pk-footer__top{max-width:var(--container-max);margin:0 auto;padding:clamp(48px,6vw,80px) 24px clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:36px}
.pk-footer__brand{display:flex;flex-direction:column;gap:16px}
.pk-footer__symbol{height:30px;width:auto;max-width:none;aspect-ratio:746/710;display:block;align-self:flex-start;filter:brightness(0) invert(1)}
/* max-width:none y aspect-ratio son obligatorios: el max-width:100% de la
   base, sobre un flex en columna con align-self:flex-start, resuelve a un
   ancho de 0 y la imagen desaparece sin dar ningun error. */
.pk-footer__line{margin:0;max-width:30ch;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--teal-200)}
.pk-footer__social{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:6px}
.pk-footer__social a{width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--border-on-dark);display:flex;align-items:center;justify-content:center;color:var(--white);transition:color var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}
.pk-footer__social a:hover{border-color:var(--brand-pop);color:var(--brand-pop)}
.pk-footer__col{display:flex;flex-direction:column;gap:12px}
.pk-footer__col a{font-size:var(--text-body-sm)}
/* El titulo de la columna es un enlace a la seccion, pero se ve como el
   rotulo del diseno: hace falta ganarle en especificidad a la regla de
   arriba, que si no le impone cuerpo y color de enlace. */
/* La etiqueta se estiliza por su clase y no por ser un enlace: atado a la
   etiqueta, una columna cuyo titulo no navegaba se quedaba sin estilo y
   parecia un enlace mas de la lista. */
.pk-footer__col .pk-footer__label,
.pk-footer__hueco{font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:var(--leading-snug);color:var(--teal-300)}
/* El hueco de una columna sin titulo ocupa exactamente lo mismo que una
   etiqueta, para que sus enlaces queden a la altura de los de al lado. */
.pk-footer__hueco{display:block}
.pk-footer__col a:hover,.pk-footer__col a.pk-footer__label:hover{color:var(--brand-pop)}

/* La banda de cambio de vertical: el UNICO sitio del sitio donde se cruza
   entre Reservas y Educacion. Nunca en la cabecera ni en el mega menu. */
.pk-footer__cross{max-width:var(--container-max);margin:0 auto;padding:28px 24px;border-top:1px solid var(--border-on-dark);border-bottom:1px solid var(--border-on-dark)}
.pk-footer__cross p{margin:0;font-size:var(--text-body-sm);color:var(--teal-200)}
.pk-footer__cross a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.pk-footer__cross a:hover{color:var(--brand-pop)}

.pk-footer__legal{max-width:var(--container-max);margin:0 auto;padding:24px 24px clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
.pk-footer__legal nav{display:flex;flex-wrap:wrap;gap:24px;font-size:var(--text-body-sm)}
.pk-footer__legal nav a{color:var(--teal-200)}
.pk-footer__legal nav a:hover{color:var(--brand-pop)}
.pk-footer__copy{margin:0;font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--teal-300)}

/* --- Objetivos tactiles en movil -----------------------------------------
   El design system fija 44px como minimo. En escritorio el diseno se
   respeta al pixel; por debajo de 768px se amplia el area pulsable sin
   mover la posicion del texto.                                             */
@media (max-width:767px){
	/* 24px es el minimo de la WCAG 2.5.8 (AA); con los 12px de separacion
	   entre enlaces del pie, la distancia entre centros pasa de 24px y se
	   cumple tambien por la excepcion de espaciado. Estuvieron en 44px (el
	   objetivo AAA de la 2.5.5) y eso estiraba el pie movil 445px respecto
	   al diseno. */
	.pk-header__brand{min-height:44px}
	.pk-lang__btn{min-height:44px;display:inline-flex;align-items:center}
	.pk-footer__col a{min-height:24px;display:flex;align-items:center}
	.pk-footer__legal nav a{min-height:24px;display:flex;align-items:center}
	.pk-footer__cross a{display:inline-flex;align-items:center;min-height:24px}
}

/* --- Variantes del Selector ---------------------------------------------- */
.pk-header--selector .pk-header__logo{height:33px}
.pk-footer--selector .pk-footer__top{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;padding:clamp(40px,5vw,64px) 24px clamp(28px,3vw,40px)}
.pk-footer--selector .pk-footer__symbol{height:28px}
.pk-footer--selector .pk-footer__line{max-width:32ch}
.pk-footer__legal-inline{display:flex;flex-wrap:wrap;gap:24px;font-size:var(--text-body-sm)}
.pk-footer__legal-inline a{color:var(--white);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.pk-footer__legal-inline a:hover{color:var(--brand-pop)}
.pk-footer--selector .pk-footer__legal{border:0;padding:0 24px clamp(36px,4vw,56px);justify-content:flex-start}
@media (max-width:767px){.pk-footer__legal-inline a{min-height:24px;display:flex;align-items:center}}

/* El disparador del mega menu tambien puede ser un enlace */
a.pk-nav__trigger{text-decoration:none}
a.pk-nav__trigger:hover{color:var(--ink-900)}
/* Puente invisible entre el disparador y el panel, para que el raton pueda
   cruzar el hueco sin que el menu se cierre a medio camino */
.pk-header{--pk-mega-puente:10px}
.pk-mega{margin-top:calc(-1 * var(--pk-mega-puente));padding-top:var(--pk-mega-puente)}

/* Elementos de navegacion cuya pagina aun no esta publicada. Se pintan igual
   que los demas, porque el navbar debe verse como el diseno y esas paginas
   llegan en breve; lo unico que cambia es que no hay enlace ni cursor de
   mano. Atenuarlos habria dejado la cabecera con un aspecto que el diseno no
   tiene. */
.pk-nav__link--inerte,.pk-mega__link--inerte{cursor:default}

/* Nombre de la otra vertical cuando su pagina todavia no existe en este
   idioma: mismo aspecto, sin enlace. */
.pk-footer__cross-inerte{font-weight:inherit;color:inherit}

/* === servicio === */
/* ==========================================================================
   Peakative — patron canonico de servicio, sector e institucion
   Nueve bandas que se repiten en unas 30 pantallas. Los valores salen de
   los estilos en linea del diseno, sin reinterpretar nada.
   ========================================================================== */

/* --- Miga de navegacion --------------------------------------------------- */
.pk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--text-body-sm);color:var(--ink-500)}
/* En Legales la miga va en el cuerpo mas chico del sistema. */
.pk-crumbs--chica{font-size:var(--text-caption)}
.pk-crumbs a{color:var(--ink-500);text-decoration:none}
.pk-crumbs a:hover{color:var(--text-accent)}
.pk-crumbs [aria-current="page"]{color:var(--ink-900)}

/* --- Embudo con fuga ------------------------------------------------------ */
.pk-funnel ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pk-funnel__band{min-width:236px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--white);transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}
.pk-funnel__band:hover{background:var(--pop-100);border-color:var(--brand-pop)}
.pk-funnel__band.is-leak{border-color:var(--brand-pop);background:var(--pop-100)}
.pk-funnel__name{font-family:var(--font-display);font-size:var(--text-body-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink-900)}
.pk-funnel__leak{display:flex;align-items:center;gap:8px;font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;color:var(--ink-500)}
/* El diseno la fuerza a una sola linea. En escritorio cabe, pero en movil
   y tablet las etiquetas largas sacan la banda de la pantalla: ahi se
   deja partir. */
@media (max-width:900px){.pk-funnel__leak{white-space:normal;text-align:right}}
/* En las pantallas de servicio todas las bandas del embudo van igual. */
.pk-funnel__dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--brand-pop);display:block}
/* En las de sector la cuarta es la de la fuga y las demas se atenuan. */
.pk-funnel__band--grada .pk-funnel__dot{background:var(--pop-700)}
.pk-funnel__band--inicio .pk-funnel__dot{background:var(--line-2)}
.pk-funnel__band--fuga .pk-funnel__dot{background:var(--brand-pop)}
.pk-funnel__band--fuga .pk-funnel__leak{color:var(--pop-700)}
.pk-funnel__note{margin:18px 0 0;font-size:var(--text-caption);line-height:var(--leading-relaxed);color:var(--ink-500)}

/* --- Recorrido con iconos ------------------------------------------------- */
/* El conector asoma media baldosa por la derecha; en la ultima de cada
   fila no hay nada que conectar y se sale de la pagina. */
.pk-journey--icons{overflow-x:clip;margin:clamp(30px,3.6vw,52px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));align-items:flex-start;row-gap:var(--pk-carril-fila,clamp(24px,3vw,36px));column-gap:0}
.pk-journey__cell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0 6px;position:relative}
.pk-journey__tile{width:58px;height:58px;border-radius:var(--radius-md);background:var(--paper);border:1px solid var(--border-subtle);color:var(--pop-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-journey__cell:hover .pk-journey__tile{background:var(--teal-700);border-color:var(--teal-700);color:var(--white)}
.pk-journey__label{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--ink-900)}
.pk-journey__link{position:absolute;left:calc(50% + 35px);right:calc(-50% + 35px);top:0;height:58px;display:flex;align-items:center;justify-content:center;gap:6px}
.pk-journey__pip{flex:0 0 auto;width:6px;height:6px;border-radius:var(--radius-full);background:var(--pop-700);display:block}
.pk-journey__pip--pop{background:var(--brand-pop)}
.pk-journey__dash{flex:1 1 auto;min-width:16px;height:0;border-top:1px dashed var(--line-2);display:block}
/* Apilado: el conector solo tiene sentido si hay una etapa al lado */
@media (max-width:640px){.pk-journey__link{display:none}}

/* --- Enfoque numerado ----------------------------------------------------- */
.pk-approach{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--border-on-dark)}
.pk-approach li{border-bottom:1px solid var(--border-on-dark);display:flex;align-items:center;gap:clamp(16px,2vw,26px);padding:clamp(16px,2vw,22px) 0;transition:color var(--duration-normal) var(--ease-standard)}
/* En reposo el paso esta apagado; al pasar por encima se enciende. */
.pk-approach__disc{flex:0 0 auto;width:46px;height:46px;border-radius:var(--radius-full);background:transparent;border:1px solid var(--border-on-dark);display:flex;align-items:center;justify-content:center;color:var(--teal-200);transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-approach li:hover .pk-approach__disc,.pk-approach li.is-activo .pk-approach__disc{background:var(--brand-pop);border-color:var(--brand-pop);color:var(--teal-900)}
.pk-approach li:hover .pk-approach__num,.pk-approach li.is-activo .pk-approach__num{color:var(--brand-pop)}
.pk-approach li:hover .pk-approach__name,.pk-approach li.is-activo .pk-approach__name{color:var(--white)}
.pk-approach__num{flex:0 0 auto;font-family:var(--font-display);font-size:var(--text-caption);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);line-height:normal;color:var(--teal-300);width:26px}
.pk-approach__name{flex:1 1 auto;font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-200);line-height:normal;transition:color var(--duration-normal) var(--ease-standard)}

/* --- Listas con icono ----------------------------------------------------- */
.pk-icons{margin:0;padding:0;list-style:none}
/* Rejilla con pelos: las piezas de la solucion */
.pk-icons--grid{margin:clamp(30px,3.6vw,52px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--pk-icons-min,190px)),1fr));gap:0;border-top:1px solid var(--border-subtle);border-left:1px solid var(--border-subtle)}
/* Con el numero de columnas fijado, las piezas se reparten a partes
   iguales: un ancho minimo las sacaria de la pantalla en el movil. */
.pk-icons--grid[style*="--pk-icons-cols"]{grid-template-columns:repeat(var(--pk-icons-cols),1fr)}
.pk-icons--grid li{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 14px;border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);transition:background var(--duration-normal) var(--ease-standard)}
.pk-icons--grid li:hover{background:var(--paper)}
.pk-icons--grid span{font-size:var(--text-body-sm);line-height:var(--leading-snug);color:var(--ink-900)}
/* Dos columnas con pelo superior: las metricas */
.pk-icons--rows{margin:clamp(30px,3.6vw,52px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--pk-icons-min,260px)),1fr));gap:0 clamp(24px,4vw,64px)}
/* Donde el diseno fija el numero de columnas, las metricas se reparten a
   partes iguales: con un ancho minimo no cabrian cinco. */
.pk-icons--rows[style*="--pk-icons-cols"]{grid-template-columns:repeat(var(--pk-icons-cols),1fr)}
/* El diseno deja el numero de columnas fijo tambien en el movil, y ahi
   se sale de la pantalla. En pantalla estrecha se reparte solo. */
@media (max-width:700px){
	.pk-icons--grid[style*="--pk-icons-cols"],
	.pk-icons--rows[style*="--pk-icons-cols"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
}
.pk-icons--rows li{border-top:1px solid var(--line-2);display:flex;align-items:baseline;gap:18px;min-width:0;padding:18px 0;transition:padding var(--duration-normal) var(--ease-standard),background var(--duration-normal) var(--ease-standard)}
.pk-icons--rows li:hover{padding-left:12px;background:var(--white)}
.pk-icons--rows span{font-size:var(--text-body-md);line-height:var(--leading-snug);color:var(--ink-900)}
.pk-icons svg{flex:0 0 auto}
.pk-icons--rows svg{transform:translateY(3px)}

/* --- Encaja / todavia no -------------------------------------------------- */
.pk-fit{margin-top:clamp(28px,3.5vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0;border-top:1px solid var(--border-subtle)}
.pk-fit__col{display:flex;flex-direction:column;gap:16px}
.pk-fit__col--yes{padding:clamp(26px,3vw,38px) clamp(24px,3vw,44px) clamp(26px,3vw,38px) 0}
.pk-fit__col--no{padding:clamp(26px,3vw,38px) 0 clamp(26px,3vw,38px) clamp(24px,3vw,44px);border-left:1px solid var(--border-subtle)}
.pk-fit__label{display:flex;align-items:center;gap:10px;font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.pk-fit__col--yes .pk-fit__label{color:var(--pop-700)}
.pk-fit__col--no .pk-fit__label{color:var(--ink-500);white-space:nowrap}
.pk-fit p{margin:0;max-width:44ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);text-wrap:pretty}
.pk-fit__col--yes p{color:var(--ink-900)}
.pk-fit__col--no p{color:var(--text-secondary)}
/* Apilado: un pelo a la izquierda no separa nada en una sola columna */
@media (max-width:767px){
	.pk-fit__col--yes{padding-inline:0}
	.pk-fit__col--no{padding-inline:0;border-left:0;border-top:1px solid var(--border-subtle)}
}

/* --- Relacionados --------------------------------------------------------- */
.pk-related{margin-top:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,2.4vw,32px)}
.pk-related__card{flex:0 1 calc((100% - 2 * clamp(20px,2.4vw,32px)) / 3);min-width:260px;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none}
.pk-related__card .pk-figure{border-radius:0}
.pk-related__body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,26px)}
.pk-related__name{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-700)}
.pk-related__text{font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.pk-related__arrow{font-size:var(--text-heading-sm);color:var(--pop-700)}

/* --- Columna pegajosa del enfoque ---------------------------------------- */
/* El diseno fija la columna izquierda mientras se recorre la lista */
@media (min-width:900px){
	.pk-sticky{position:sticky;top:calc(var(--pk-header-h, 78px) + 32px);align-self:start}
}

/* La miga tambien es navegacion: en movil necesita area pulsable */
@media (max-width:767px){
	.pk-crumbs a,.pk-crumbs [aria-current="page"]{min-height:24px;display:inline-flex;align-items:center}
}

/* --- Tag ------------------------------------------------------------------ */
.pk-tag{display:inline-flex;width:fit-content;max-width:100%;align-self:flex-start;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--radius-full);font-size:var(--text-caption);font-weight:var(--weight-medium);font-family:var(--font-body);background:var(--surface-card);color:var(--text-secondary);border:1px solid var(--border-subtle)}

/* --- Tarjetas de servicio que se apilan ---------------------------------- */
.pk-svcs{margin-top:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:clamp(120px,18vh,220px)}
.pk-svc{position:sticky;top:var(--pk-svc-top,110px);transform-origin:top center;will-change:transform;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:clamp(26px,3.2vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,3vw,48px);align-items:center}
.pk-svc__body{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);align-items:flex-start}
.pk-svc__tile{width:56px;height:56px;border-radius:var(--radius-md);background:var(--paper);color:var(--pop-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pk-svc__name{margin:0;max-width:20ch;font-family:var(--font-display);font-size:var(--text-display-md);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--teal-700);text-wrap:pretty}
.pk-svc__text{margin:0;max-width:44ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-svc .pk-figure{border-radius:var(--radius-md)}
/* En movil el apilado no aporta y complica el scroll */
@media (max-width:767px){
	.pk-svcs{gap:clamp(28px,6vw,48px)}
	.pk-svc{position:static}
}
@media (prefers-reduced-motion:reduce){.pk-svc{position:static}}

/* --- Tarjetas de fuga ----------------------------------------------------- */
.pk-leakcards{margin:clamp(28px,3.4vw,48px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(18px,2.2vw,28px)}
.pk-leakcard{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);padding:clamp(24px,3vw,32px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--white)}
.pk-leakcard:hover{border-color:var(--brand-pop)}
.pk-leakcard__head{display:flex;align-items:center;gap:12px}
.pk-leakcard__disc{width:44px;height:44px;border-radius:var(--radius-full);background:var(--paper);color:var(--pop-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-leakcard:hover .pk-leakcard__disc{background:var(--brand-pop);color:var(--teal-900)}
.pk-leakcard__tag{font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-500)}
.pk-leakcard__bars{display:flex;flex-direction:column;gap:9px;width:100%}
.pk-leakcard__bar{height:10px;border-radius:var(--radius-full);display:block}
.pk-leakcard__bar--a{background:var(--brand-pop)}
.pk-leakcard__bar--b{background:var(--paper-2);transition:width var(--duration-normal) var(--ease-standard)}
.pk-leakcard p{margin:0;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--ink-900);text-wrap:pretty}
.pk-leakcards__note{margin:clamp(28px,3.4vw,44px) 0 0;font-size:var(--text-caption);line-height:var(--leading-relaxed);color:var(--ink-500)}

/* --- Superficies claras dentro de una banda oscura ------------------------
   Las reglas de banda oscura (.pk-band--dark h2, .pk-band--dark p) tienen
   mas especificidad que las de la tarjeta, asi que el texto de una tarjeta
   blanca heredaba color blanco y desaparecia. Cualquier superficie clara
   sobre banda oscura tiene que recuperar sus propios colores.              */
.pk-band--dark .pk-svc .pk-svc__name,
.pk-band--deep .pk-svc .pk-svc__name{color:var(--teal-700)}
.pk-band--dark .pk-svc p,
.pk-band--deep .pk-svc p{color:var(--text-secondary)}
.pk-band--dark .pk-svc .pk-btn--link,
.pk-band--deep .pk-svc .pk-btn--link{color:var(--text-primary)}
.pk-band--dark .pk-svc .pk-tag,
.pk-band--deep .pk-svc .pk-tag{color:var(--text-secondary)}

/* El parrafo que cierra el carril de etapas es mas ancho que la prosa
   normal y va mas separado: asi esta en el diseno. */
.is-style-prose.pk-prose--rail{max-width:62ch;margin-top:clamp(32px,4vw,52px)}

/* Carril de etapas: cada celda es una columna alineada a la izquierda, con
   el conector superpuesto a la altura de la baldosa. Medidas copiadas del
   diseno. */
.pk-journey__cell--fin .pk-journey__tile{background:var(--brand-pop);border-color:var(--brand-pop);color:var(--teal-900)}
.pk-journey__cell--fin .pk-journey__label{color:var(--teal-700)}

/* Carril estrecho: baldosa de 58px, celda centrada. Es el tratamiento por
   defecto. */
.pk-journey--icons .pk-journey__col{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pk-journey--icons .pk-journey__label{font-size:var(--text-heading-sm)}

/* Carril ancho: baldosa de 72px alineada a la izquierda y conector encima,
   con desplazamiento lateral si no caben. Lo usan solo algunas pantallas. */
.pk-journey--ancho{padding:0 0 8px;display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto}
.pk-journey--ancho .pk-journey__cell{display:flex;flex:1 1 0;min-width:216px;align-items:flex-start;gap:0;position:relative}
.pk-journey--ancho .pk-journey__col{flex:1 1 auto;align-items:flex-start;gap:16px;text-align:left}
.pk-journey--ancho .pk-journey__tile{width:72px;height:72px}
.pk-journey--ancho .pk-journey__label{font-size:var(--text-heading-md)}
.pk-journey--ancho .pk-journey__link{position:absolute;left:82px;right:10px;top:0;height:72px;display:flex;align-items:center;justify-content:center;gap:8px}
.pk-journey--ancho .pk-journey__pip{flex:0 0 auto;width:6px;height:6px;border-radius:var(--radius-full);background:var(--pop-700);display:block}
.pk-journey--ancho .pk-journey__pip--pop{background:var(--brand-pop)}
.pk-journey--ancho .pk-journey__dash{flex:1 1 auto;min-width:16px;height:0;border-top:1px dashed var(--line-2);display:block}

/* Baldosa rellena de las tarjetas pares del hub. */
.pk-svc__tile--lleno{background:var(--brand-pop);color:var(--teal-900)}

/* Carril compacto: envuelve en varias filas, con baldosa pequena, celda a la
   izquierda y etiqueta reducida. Es el de las paginas de sector. */
.pk-journey--compacto{display:flex;flex-wrap:wrap;column-gap:0;row-gap:var(--pk-carril-fila,clamp(24px,3vw,34px))}
/* Carril de factores: como el ancho, pero cada baldosa lleva una segunda
   linea y la fila se reparte con flex en vez de rejilla. */
.pk-journey--factores{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0}
.pk-journey--factores .pk-journey__cell{display:flex;flex:1 1 200px;align-items:flex-start;gap:0;position:relative}
.pk-journey--factores .pk-journey__col{flex:1 1 auto;align-items:flex-start;gap:16px;text-align:left}
.pk-journey--factores .pk-journey__tile{width:72px;height:72px}
.pk-journey--factores .pk-journey__texto{display:flex;flex-direction:column;gap:8px;padding-right:clamp(12px,2vw,28px)}
.pk-journey--factores .pk-journey__label{font-size:var(--text-heading-md)}
.pk-journey--factores .pk-journey__sub{font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-journey--factores .pk-journey__cell--fin .pk-journey__texto{padding-right:0}
.pk-journey--factores .pk-journey__link{position:absolute;left:82px;right:10px;top:0;height:72px;display:flex;align-items:center;justify-content:center;gap:8px}

.pk-journey--compacto .pk-journey__cell{display:flex;flex:1 1 132px;min-width:132px;align-items:flex-start;gap:0;position:relative}
.pk-journey--compacto .pk-journey__col{flex:1 1 auto;min-width:0;align-items:flex-start;gap:14px;padding-right:24px;text-align:left}
.pk-journey--compacto .pk-journey__label{font-size:clamp(13px,1.15vw,15px)}
.pk-journey--compacto .pk-journey__link{position:absolute;left:68px;right:10px;top:0;height:58px;display:flex;align-items:center;justify-content:center;gap:8px}
.pk-journey--compacto .pk-journey__pip{flex:0 0 auto;width:6px;height:6px;border-radius:var(--radius-full);background:var(--pop-700);display:block}
.pk-journey--compacto .pk-journey__pip--pop{background:var(--brand-pop)}
.pk-journey--compacto .pk-journey__dash{flex:1 1 auto;min-width:16px;height:0;border-top:1px dashed var(--line-2);display:block}

/* Par de columnas de la particularidad: mismas medidas que el contraste pero
   con las dos etiquetas del mismo color y sin glifos. */
.pk-fit--par{margin-top:clamp(26px,3vw,40px)}
.pk-fit--par .pk-fit__col--yes{padding:24px 32px 24px 0}
.pk-fit--par .pk-fit__col--no{padding:24px 0 24px 32px}
.pk-fit--par .pk-fit__col{gap:12px}
.pk-fit--par .pk-fit__label{color:var(--pop-700)}
.pk-fit--par p{color:var(--ink-900)}
@media (max-width:767px){
	.pk-fit--par .pk-fit__col--yes,.pk-fit--par .pk-fit__col--no{padding-inline:0}
}

/* --- Metodo: etapas y arco ---------------------------------------------- */
.pk-etapas{margin:clamp(28px,3vw,44px) 0 0;padding:0;list-style:none;border-top:1px solid var(--border-subtle)}
.pk-etapa{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,56px);align-items:center;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--border-subtle)}
/* Dos columnas y alternancia solo cuando hay sitio. En una sola columna la
   etapa se lee de arriba abajo: numero, nombre y texto, siempre igual. */
@media (min-width:700px){
	.pk-etapa{grid-template-columns:1fr 1fr}
	.pk-etapa--invertida .pk-etapa__medio{order:2}
}
.pk-etapa__medio{display:flex;justify-content:center}
.pk-etapa__disco{position:relative;width:clamp(150px,17vw,200px);height:clamp(150px,17vw,200px);border-radius:var(--radius-full);border:2px dashed var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--teal-700);background:transparent;transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-etapa__disco:hover{background:var(--brand-pop);border-color:var(--pop-700);color:var(--teal-900)}
.pk-etapa__icono{width:58px;height:58px}
.pk-etapa__num{position:absolute;top:-6px;left:-6px;width:44px;height:44px;border-radius:var(--radius-full);background:var(--brand-pop);color:var(--teal-900);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:var(--weight-bold)}
.pk-etapa__texto{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pk-etapa__nombre{padding:9px 24px;border-radius:var(--radius-full);background:var(--teal-700);color:var(--white);font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
.pk-etapa__cuerpo,.pk-etapa__extra{margin:0;max-width:52ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);text-wrap:pretty}
.pk-etapa__cuerpo{color:var(--ink-900)}
.pk-etapa__extra{color:var(--text-secondary)}

.pk-arco{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.pk-arco__tramo{display:flex;align-items:center;gap:12px}
.pk-arco__punto{width:12px;height:12px;border-radius:var(--radius-full);background:var(--brand-pop);display:block}
.pk-arco__nombre{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--white)}

/* --- Metodo: reparto de responsabilidades y grafico ---------------------- */
/* Dos columnas sueltas: sin pelo arriba, sin division y con hueco entre
   ellas. La medida de linea tambien es un poco mas larga. */
.pk-fit--suelto{margin-top:clamp(26px,3vw,40px);gap:clamp(24px,4vw,64px);border-top:0}
.pk-fit--suelto .pk-fit__col--yes,.pk-fit--suelto .pk-fit__col--no{padding:0;border-left:0}
.pk-fit--suelto p{max-width:46ch}

.pk-fit--reparto{margin-top:clamp(28px,3vw,44px);border-top-color:var(--line-2)}
.pk-fit--reparto .pk-fit__col{gap:14px}
.pk-fit--reparto .pk-fit__col--yes{padding:28px 32px 28px 0}
.pk-fit--reparto .pk-fit__col--no{padding:28px 0 28px 32px;border-left-color:var(--line-2)}
.pk-fit--reparto .pk-fit__label{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);text-transform:none}
.pk-fit--reparto .pk-fit__col--yes .pk-fit__label{color:var(--teal-800)}
.pk-fit--reparto .pk-fit__col--no .pk-fit__label{color:var(--ink-500);white-space:normal}
.pk-fit--reparto p{max-width:42ch;font-size:var(--text-body-md);color:var(--text-secondary)}
@media (max-width:900px){
	.pk-fit--reparto .pk-fit__col--yes,.pk-fit--reparto .pk-fit__col--no{padding-inline:0}
	.pk-fit--reparto .pk-fit__col--no{border-top-color:var(--line-2)}
}

.pk-grafico{position:relative;align-self:stretch;min-height:220px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--paper)}
.pk-grafico svg{position:absolute;top:24px;left:24px;width:calc(100% - 48px);height:calc(100% - 48px);display:block}
.pk-grafico__barras rect{transition:fill var(--duration-normal) var(--ease-standard)}
.pk-grafico__barras rect:hover{fill:var(--pop-700)}

/* El pie del arco lleva su propia regla y una medida mas larga. */
.pk-arco + .is-style-prose{margin-top:clamp(32px,4vw,52px);padding-top:32px;border-top:1px solid var(--border-on-dark);max-width:56ch}

/* --- Carril en arco --------------------------------------------------------
   Una pantalla dibuja el recorrido con una columna por etapa, baldosa chica y
   nombre corto debajo, en vez de la rejilla auto-ajustable del resto.        */
.pk-journey--arco{grid-template-columns:repeat(var(--pk-carril-cols,8),minmax(0,1fr));row-gap:var(--pk-carril-fila,clamp(24px,3vw,34px))}
.pk-journey--arco .pk-journey__cell{gap:12px;padding:0 4px}
.pk-journey--arco .pk-journey__col{gap:12px}
.pk-journey--arco .pk-journey__tile{width:44px;height:44px}
.pk-journey--arco .pk-journey__label{font-size:var(--text-body-sm)}
.pk-journey--arco .pk-journey__link{left:calc(50% + 27px);right:calc(-50% + 27px);height:44px;gap:4px}
.pk-journey--arco .pk-journey__pip{width:5px;height:5px}
.pk-journey--arco .pk-journey__dash{min-width:6px}
@media (max-width:860px){.pk-journey--arco{grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr))}}

/* El carril del hub es el mismo que el de las paginas de servicio, con la
   etiqueta un punto mas chica y su propio respiro a la derecha. */
.pk-journey--hub .pk-journey__label{font-size:var(--text-body-md);padding-right:12px}

/* === recursos === */
/* --- Biblioteca de recursos ---------------------------------------------
   Portada de la biblioteca: cabecera con la cuenta, chips de tema, recurso
   destacado, rejilla de fichas y pie.                                      */

.pk-recursos__cabecera{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px}
.pk-recursos__cuenta{font-size:var(--text-body-sm);color:var(--ink-500)}

.pk-chips{margin-top:clamp(20px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:10px}
/* El chip del diseno es un boton: su interlineado es el normal del
   elemento, no el del cuerpo del texto. */
.pk-chip{display:inline-flex;align-items:center;line-height:normal;font-family:var(--font-body);font-size:var(--text-body-sm);padding:9px 17px;border:1px solid var(--line-2);border-radius:var(--radius-full);background:var(--white);color:var(--ink-900);text-decoration:none;cursor:pointer;transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-chip:hover{border-color:var(--teal-700);color:var(--teal-800)}
.pk-chip--activo{background:var(--teal-700);border-color:var(--teal-700);color:var(--white)}

/* --- Recurso destacado --------------------------------------------------- */
.pk-destacado{margin-top:clamp(30px,3.6vw,52px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,3.4vw,56px);align-items:center;padding:clamp(22px,2.6vw,32px);border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--white)}
.pk-destacado__texto{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pk-destacado__marca{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--pop-700);font-weight:var(--weight-semibold)}
.pk-destacado__raya{width:20px;height:1px;background:var(--line-2);display:block}
.pk-destacado__ficha{padding:3px 9px;border:1px dashed var(--line-2);border-radius:var(--radius-full);color:var(--ink-500);font-weight:var(--weight-regular);text-transform:none;letter-spacing:normal;white-space:nowrap}
.pk-destacado__titulo{margin:0;max-width:28ch;font-family:var(--font-display);font-size:var(--text-heading-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--ink-900);text-wrap:pretty}
.pk-destacado__titulo a{color:inherit;text-decoration:none}
.pk-destacado__titulo a:hover{color:var(--teal-700)}
.pk-destacado__cuerpo{margin:0;max-width:46ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-destacado__pronto{font-size:var(--text-body-md);font-weight:var(--weight-semibold);color:var(--pop-700)}

/* --- Rejilla de fichas ---------------------------------------------------- */
.pk-recursos{margin:clamp(24px,3vw,40px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(20px,2.4vw,30px)}
.pk-recursos__celda{display:flex}
.pk-recurso{display:flex;flex-direction:column;gap:16px;width:100%;padding-bottom:20px;border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--white);overflow:hidden;text-decoration:none;transition:transform var(--duration-normal) var(--ease-standard),box-shadow var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}
a.pk-recurso:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--brand-pop)}
.pk-recurso__meta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 20px;font-size:var(--text-caption);color:var(--ink-500)}
.pk-recurso__tema{letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--pop-700);font-weight:var(--weight-semibold)}
.pk-recurso__ficha{padding:3px 9px;border:1px dashed var(--line-2);border-radius:var(--radius-full);color:var(--ink-500);white-space:nowrap}
.pk-recurso__titulo{padding:0 20px;font-family:var(--font-display);font-size:var(--text-heading-sm);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--ink-900);text-wrap:pretty}
.pk-recurso__cuerpo{padding:0 20px;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-recurso__pronto{margin-top:auto;padding:0 20px;font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--pop-700)}

/* --- Pie de la biblioteca -------------------------------------------------- */
.pk-recursos__pie{margin-top:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding-top:24px;border-top:1px solid var(--line-2)}
.pk-recursos__pie p{margin:0;max-width:52ch;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--ink-500)}

/* --- Criterios sobre banda oscura ------------------------------------------ */
.pk-criterios{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-self:center}
.pk-criterio{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--border-on-dark);border-radius:var(--radius-full);font-size:var(--text-body-sm);color:var(--white);transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-criterio:hover{background:var(--brand-pop);border-color:var(--brand-pop);color:var(--teal-900)}

/* El titular de la banda de contenido reciente es un parrafo, no un h2. */
/* Sobre banda oscura los parrafos van atenuados; este no: en el diseno
   es un titular y va en blanco. */
.pk-band--dark .pk-recientes{margin:0;max-width:34ch;font-family:var(--font-display);font-size:var(--text-heading-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--white);text-wrap:pretty}

/* --- Articulo de la biblioteca -------------------------------------------
   La portada, el cuerpo con su indice pegajoso y el cierre. Las medidas son
   las de la pantalla del diseno.                                           */

.pk-art__portada{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,64px);align-items:center}
.pk-art__texto{max-width:60ch;display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
.pk-art__marca{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:var(--text-caption)}
.pk-art__tema{letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--pop-700);font-weight:var(--weight-semibold)}
.pk-art__ficha{padding:3px 9px;border:1px dashed var(--line-2);border-radius:var(--radius-full);color:var(--ink-500);white-space:nowrap}
.pk-art__titulo{margin:0;font-family:var(--font-display);font-size:var(--text-display-md);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:var(--weight-bold);color:var(--teal-700);text-wrap:pretty}
.pk-art__entradilla{margin:0;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-art__firma{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:6px;border-top:1px solid var(--border-subtle);font-size:var(--text-body-sm);color:var(--ink-500)}
.pk-art__autor{color:var(--ink-900)}

/* --- Cuerpo e indice ------------------------------------------------------ */
.pk-art__cuerpo{display:flex;flex-wrap:wrap;gap:clamp(32px,4vw,72px);align-items:start}
.pk-art__indice{position:sticky;top:calc(var(--header-h) + 16px);flex:0 1 240px;align-self:flex-start;display:flex;flex-direction:column;gap:14px}
.pk-art__indice ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.pk-art__indice li{border-bottom:1px solid var(--line-2)}
.pk-art__indice a{display:flex;align-items:baseline;gap:12px;padding:13px 0;font-size:var(--text-body-sm);line-height:var(--leading-snug);color:var(--ink-900);text-decoration:none;transition:padding var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-art__indice a:hover{padding-left:10px;color:var(--pop-700)}
.pk-art__n{font-family:var(--font-display);font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--pop-700)}

/* El contenido de la entrada llega envuelto en su propio div, asi que la
   pila es ese div y no el <article>. El diseno separa 20px lo que va dentro
   de una seccion y el doble entre secciones: de ahi el margen extra que
   arrastra cada H2. */
.pk-art__largo{flex:1 1 480px;min-width:0;display:flex;flex-direction:column}
.pk-art__largo > .wp-block-post-content{display:flex;flex-direction:column;gap:20px}
.pk-art__largo > .wp-block-post-content > *{margin-block:0}
.pk-art__largo > .wp-block-post-content > h2 ~ h2,
.pk-art__largo > .wp-block-post-content > * ~ h2{margin-block-start:clamp(6px,1.4vw,20px)}
.pk-art__largo > .wp-block-post-content > .pk-art__llamada{margin-block-start:clamp(6px,1.4vw,20px)}
.pk-art__largo > .wp-block-post-content > .pk-art__etapas{margin-block-start:6px}
.pk-art__largo h2{margin:0;font-family:var(--font-display);font-size:var(--text-heading-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--teal-800);scroll-margin-top:calc(var(--header-h) + 24px)}
.pk-art__largo p{margin:0;max-width:66ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
/* La entradilla del cuerpo, en display y en tinta. */
.pk-art__largo p.is-style-lead-articulo{max-width:66ch;font-family:var(--font-display);font-size:var(--text-heading-md);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--ink-900)}

.pk-art__largo blockquote{margin:0;padding:clamp(20px,2.4vw,28px);border-left:2px solid var(--brand-pop);background:var(--white);font-family:var(--font-display);font-size:var(--text-heading-sm);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--ink-900);max-width:56ch;text-wrap:pretty}
.pk-art__largo blockquote p{margin:0;max-width:none;font:inherit;color:inherit;line-height:inherit}

.pk-art__largo ol.pk-art__etapas{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}
.pk-art__etapas li{display:flex;align-items:center;gap:10px;padding:16px 14px 16px 0;border-top:1px solid var(--line-2);font-family:var(--font-display);font-size:var(--text-body-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-800)}
.pk-art__etapas li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:var(--radius-full);background:var(--brand-pop);display:block}

/* --- Tabla de senales ----------------------------------------------------- */
.pk-art__tabla{width:100%;overflow-x:auto;margin:0}
.pk-art__largo table{border-collapse:collapse;min-width:420px;width:100%;background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius-md);overflow:hidden}
/* WordPress pone pelo en las cuatro caras de cada celda y uno de 3px bajo
   la cabecera; el diseno solo lleva el de abajo de cada celda, de 1px, y
   los sobrantes sumaban dos pixeles de alto a la tabla. */
.pk-art__largo th,.pk-art__largo td{text-align:left;padding:14px 18px;border:0}
.pk-art__largo thead,.pk-art__largo tbody,.pk-art__largo tr{border:0}
.pk-art__largo thead th{border-bottom:1px solid var(--line-2);font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-500);font-weight:var(--weight-semibold)}
.pk-art__largo tbody tr{transition:background var(--duration-normal) var(--ease-standard)}
.pk-art__largo tbody tr:hover{background:var(--paper)}
.pk-art__largo tbody th{border-bottom:1px solid var(--border-subtle);font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--teal-800);white-space:nowrap}
.pk-art__largo tbody td{border-bottom:1px solid var(--border-subtle);font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--ink-900)}
.pk-art__largo tbody td:last-child{color:var(--text-secondary)}

/* --- Llamada dentro del cuerpo -------------------------------------------- */
.pk-art__llamada{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:clamp(20px,2.4vw,26px);border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--white)}
.pk-art__llamada p{margin:0;flex:1 1 280px;max-width:none;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--ink-900);text-wrap:pretty}
.pk-art__llamada .pk-actions{margin-top:0}

/* --- Cierre --------------------------------------------------------------- */
.pk-art__cierre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,72px);align-items:start}
.pk-art__cierre-texto{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px)}
/* Como el de Recursos: sobre banda oscura este parrafo es un titular y va
   en blanco, no atenuado. */
.pk-band--dark .pk-art__cierre-titulo{margin:0;max-width:44ch;font-family:var(--font-display);font-size:var(--text-heading-lg);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--white);text-wrap:pretty}
.pk-art__cierre-cuerpo{margin:0;max-width:48ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-on-dark-muted);text-wrap:pretty}

.pk-recursos--relacionados{margin-top:clamp(28px,3.4vw,48px)}
.pk-stack--cierre{gap:22px}

@media (max-width:900px){
	.pk-art__indice{position:static;flex-basis:100%}
}

/* --- Preguntas frecuentes -------------------------------------------------
   Cada pregunta abre su respuesta. Sin JavaScript los paneles salen
   abiertos: se lee igual y el buscador ve el texto entero. */
.pk-faq{margin:clamp(36px,4vw,56px) 0 0;border-top:1px solid var(--border-subtle)}
.pk-faq__titulo{margin:clamp(28px,3vw,40px) 0 8px;font-family:var(--font-display);font-size:var(--text-display-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--ink-900)}
.pk-faq__item{border-bottom:1px solid var(--border-subtle)}
.pk-faq__pregunta{margin:0}
.pk-faq__boton{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border:0;background:transparent;cursor:pointer;text-align:left;font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--ink-900);text-wrap:pretty}
.pk-faq__boton:hover{color:var(--text-accent)}
.pk-faq__boton:focus-visible{outline:2px solid var(--teal-700);outline-offset:3px;border-radius:var(--radius-sm)}
/* El signo es un mas que se convierte en menos al abrir. */
.pk-faq__signo{position:relative;width:30px;height:30px;flex:0 0 auto;border-radius:var(--radius-full);background:var(--paper);transition:background var(--duration-normal) var(--ease-standard)}
.pk-faq__signo::before,.pk-faq__signo::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;background:var(--teal-700);transform:translate(-50%,-50%);transition:transform var(--duration-normal) var(--ease-standard)}
.pk-faq__signo::after{transform:translate(-50%,-50%) rotate(90deg)}
.pk-faq__boton:hover .pk-faq__signo{background:var(--brand-pop)}
.pk-faq__boton[aria-expanded="true"] .pk-faq__signo::after{transform:translate(-50%,-50%) rotate(0deg)}
.pk-faq__panel{padding:0 0 22px;max-width:68ch}
.pk-faq__panel[hidden]{display:none}
.pk-faq__panel p{margin:0 0 14px;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--ink-700);text-wrap:pretty}
.pk-faq__panel p:last-child{margin-bottom:0}
.pk-faq__panel a{color:var(--text-accent);text-underline-offset:3px}

@media (max-width:600px){
	.pk-faq__boton{padding:18px 0;font-size:var(--text-body-lg)}
	.pk-faq__panel{padding-bottom:18px}
}

/* === contacto === */

/* --- Contacto -------------------------------------------------------------
   La ficha de la izquierda y la tarjeta del formulario. Las medidas son las
   de la pantalla del diseno.                                               */

.pk-contacto__redes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:6px}
.pk-contacto__redes a{width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--border-on-dark);display:flex;align-items:center;justify-content:center;color:var(--white);transition:color var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}
.pk-contacto__redes a:hover{border-color:var(--brand-pop);color:var(--brand-pop)}
.pk-contacto__redes svg{fill:currentColor}

.pk-contacto__correo{display:flex;align-items:center;gap:14px;padding-top:4px}
.pk-contacto__sobre{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--border-on-dark);display:flex;align-items:center;justify-content:center;color:var(--white)}
.pk-contacto__correo a{font-size:var(--text-body-md);color:var(--white);text-decoration:none;border-bottom:1px solid var(--border-on-dark);padding-bottom:2px}
.pk-contacto__correo a:hover{border-bottom-color:var(--brand-pop)}

.pk-contacto__hilo{display:flex;align-items:center;gap:0;padding-top:6px}
.pk-contacto__hilo span{width:13px;height:13px;border-radius:var(--radius-full);background:var(--brand-pop);display:block}
.pk-contacto__hilo i{width:clamp(48px,6vw,96px);height:1px;background:var(--border-on-dark);display:block}

/* La miga sobre banda oscura cambia de tono. */
.pk-band--dark .pk-crumbs{color:var(--teal-200)}
.pk-band--dark .pk-crumbs a{color:var(--teal-200)}
.pk-band--dark .pk-crumbs a:hover{color:var(--brand-pop)}
.pk-band--dark .pk-crumbs [aria-current="page"]{color:var(--white)}

/* --- Tarjeta del formulario ------------------------------------------------ */
.pk-form{width:100%;box-sizing:border-box;padding:clamp(28px,3.2vw,44px);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-lg)}
.pk-form form{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,24px)}
.pk-form__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(16px,2vw,22px)}

.pk-campo{display:flex;flex-direction:column;gap:7px;font-family:var(--font-body);width:100%}
.pk-campo__etiqueta,.pk-campo--area label{font-size:var(--text-label);font-weight:600;color:var(--text-secondary)}
.pk-campo__opcional{font-weight:400;color:var(--text-muted)}
.pk-campo input{padding:13px 16px;border-radius:var(--radius-md);border:1px solid var(--border-default);font-size:var(--text-body-sm);font-family:var(--font-body);background:var(--surface-card);color:var(--text-primary);outline:none;width:100%;box-sizing:border-box}
.pk-campo input:focus-visible,.pk-campo--area textarea:focus-visible{border-color:var(--teal-700);box-shadow:0 0 0 3px var(--pop-100)}
.pk-campo--mal input,.pk-campo--mal textarea{border-color:var(--status-danger-fg)}
.pk-campo__pista{font-size:var(--text-caption);color:var(--text-muted)}
.pk-campo__error{font-size:var(--text-caption);color:var(--status-danger-fg)}

.pk-campo--area{display:flex;flex-direction:column;gap:8px}
.pk-campo--area textarea{width:100%;box-sizing:border-box;padding:13px 16px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--white);color:var(--ink-900);font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--leading-relaxed);resize:vertical}
.pk-campo--area .pk-campo__error{font-size:var(--text-body-sm)}

.pk-form__aviso{margin:0;font-size:var(--text-body-sm);color:var(--status-danger-fg)}
.pk-form__pie{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.pk-form__nota{font-size:var(--text-body-sm);color:var(--ink-500)}
/* La trampa para robots no se ve ni se tabula, pero existe en el marcado. */
.pk-form__trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.pk-form__trampa input{width:1px;height:0;padding:0;border:0}

/* --- Acuse de recibo ------------------------------------------------------- */
.pk-form__acuse{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pk-form__visto{width:52px;height:52px;border-radius:var(--radius-full);background:var(--brand-pop);color:var(--teal-900);display:flex;align-items:center;justify-content:center}
.pk-form__titulo{font-family:var(--font-display);font-size:var(--text-heading-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-700)}
.pk-form__cuerpo{margin:0;max-width:44ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-form__eta{margin:0;display:flex;align-items:center;gap:12px;font-size:var(--text-body-sm);color:var(--ink-500)}
.pk-form__eta span{width:9px;height:9px;border-radius:var(--radius-full);background:var(--brand-pop);display:block;flex:0 0 auto}
.pk-form__otra{width:100%;padding-top:18px;border-top:1px solid var(--border-subtle)}

/* El permiso para recibir comunicaciones. Va sin marcar y separado del
   resto: es otra cosa que enviar el mensaje. */
.pk-form__permiso{display:flex;align-items:flex-start;gap:12px;margin-top:22px;cursor:pointer}
.pk-form__permiso input{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px;accent-color:var(--teal-700)}
.pk-form__permiso span{font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}

/* En pantallas de dedo la casilla crece hasta el minimo tactil. */
@media (max-width:768px){
	.pk-form__permiso input{width:24px;height:24px;margin-top:0}
}

/* === firma === */
/* ==========================================================================
   Sobre Peakative y Legales.
   Son las dos pantallas transversales: no pertenecen a una vertical y no
   siguen el patron canonico, asi que sus piezas viven aqui y no en las hojas
   de servicio o de recursos.
   ========================================================================== */

/* --- La firma: proposito, vision y mision --------------------------------- */
.pk-firma{margin:clamp(28px,3vw,44px) 0 0;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.pk-firma__fila{padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:minmax(160px,0.55fr) minmax(0,1.45fr);gap:clamp(16px,3vw,48px);align-items:baseline}
.pk-firma__termino{margin:0;display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-800)}
.pk-firma__termino svg{flex:0 0 auto}
.pk-firma__cuerpo{margin:0;max-width:62ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--ink-900);text-wrap:pretty}
@media (max-width:640px){
	.pk-firma__fila{grid-template-columns:1fr;gap:14px}
}

/* --- Piezas sueltas de un recorrido fragmentado --------------------------- */
.pk-piezas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--border-subtle)}
.pk-piezas li{padding:18px 0;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:16px}
.pk-piezas li svg{flex:0 0 auto}
.pk-piezas span{font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink-900)}
.pk-piezas-nota{margin:0;max-width:48ch;display:flex;align-items:flex-start;gap:14px;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--ink-900);text-wrap:pretty}
.pk-piezas-nota::before{content:"";flex:0 0 auto;margin-top:6px;width:14px;height:14px;border-radius:var(--radius-full);border:2px solid var(--pop-700);display:block}
/* La columna de la derecha respira mas que un apilado normal. */
.pk-firma-col{display:flex;flex-direction:column;gap:clamp(26px,3vw,36px)}
.pk-firma-col > *{margin-block:0}
/* La misma columna, algo mas apretada: la de Legales. */
.pk-col-32{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,32px)}
.pk-col-32 > *{margin-block:0}
.pk-col-22{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.pk-col-22 > *{margin-block:0}

/* --- Lo que Peakative es y lo que no es ---------------------------------- */
.pk-espejo{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0;border-top:1px solid var(--line-2)}
.pk-espejo__col{display:flex;flex-direction:column;gap:16px}
.pk-espejo__col--si{padding:32px 40px 32px 0}
.pk-espejo__col--no{padding:32px 0 32px 40px;border-left:1px solid var(--line-2)}
.pk-espejo__rotulo{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-800)}
.pk-espejo__col--no .pk-espejo__rotulo{color:var(--ink-500)}
.pk-espejo p{margin:0;max-width:42ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--ink-900);text-wrap:pretty}
.pk-espejo__col--no p{color:var(--text-secondary)}
@media (max-width:640px){
	.pk-espejo__col--si{padding-right:0}
	.pk-espejo__col--no{padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
}

/* --- Conmutador de vertical ---------------------------------------------- */
.pk-verticales__cabecera{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.pk-verticales__grupo{display:flex;gap:4px;padding:4px;border-radius:var(--radius-full);border:1px solid var(--border-on-dark)}
.pk-verticales__tab{font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);padding:9px 20px;border:0;border-radius:var(--radius-full);cursor:pointer;background:transparent;color:var(--teal-200);transition:background var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-verticales__tab[aria-pressed="true"]{background:var(--brand-pop);color:var(--teal-900)}
.pk-verticales__panel[hidden]{display:none}
.pk-verticales__cuerpo{margin:clamp(36px,4vw,56px) 0 0;padding-top:32px;border-top:1px solid var(--border-on-dark);max-width:62ch;font-size:var(--text-body-lg);line-height:var(--leading-relaxed);color:var(--text-on-dark-muted);text-wrap:pretty}
/* El recorrido de esta banda es el del relevo, pero sobre fondo oscuro. */
.pk-band--dark .pk-journey--handoff{margin:clamp(32px,4vw,56px) 0 0}
.pk-band--dark .pk-journey--handoff .pk-journey__disc{width:13px;height:13px}
.pk-band--dark .pk-journey--handoff .pk-journey__conn{background:var(--teal-500)}

/* --- Principios ---------------------------------------------------------- */
.pk-principios{margin:clamp(28px,3vw,44px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(16px,2vw,24px)}
.pk-principios li{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.4vw,30px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--white);transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}
.pk-principios li:hover{background:var(--paper);border-color:var(--line-2)}
.pk-principios__alto{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pk-principios__num{font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--pop-700)}
.pk-principios__nombre{font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink-900);line-height:var(--leading-snug)}

/* --- Valores ------------------------------------------------------------- */
.pk-valores{margin:clamp(28px,3vw,44px) 0 0;display:flex;flex-direction:column}
.pk-valores__fila{padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--line-2);display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(16px,3vw,56px);align-items:baseline}
.pk-valores__nombre{margin:0;font-family:var(--font-display);font-size:clamp(24px,3vw,var(--text-display-md));font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-700);line-height:var(--leading-snug)}
.pk-valores__cuerpo{margin:0;max-width:46ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
@media (max-width:640px){
	.pk-valores__fila{grid-template-columns:1fr;gap:12px}
}

/* --- Pie de una banda oscura con un solo enlace --------------------------- */
.pk-firma-pie{margin-top:clamp(32px,4vw,56px);padding-top:32px;border-top:1px solid var(--border-on-dark)}
.pk-firma-pie .pk-actions{margin-top:0}

/* --- Legales: tres documentos con su indice ------------------------------ */
.pk-legal__tabs{margin-top:clamp(28px,3.2vw,42px);display:flex;flex-wrap:wrap;gap:10px}
/* Son enlaces, no botones: sin esto la caja de linea del enlace suma seis
   pixeles sobre la altura que tiene el boton en el diseno. */
.pk-legal__tab{display:inline-flex;align-items:center;line-height:normal;text-decoration:none;font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);padding:11px 20px;border:1px solid var(--border-default);border-radius:var(--radius-full);cursor:pointer;background:transparent;color:var(--ink-900);transition:background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard)}
.pk-legal__tab[aria-current="page"]{background:var(--teal-700);border-color:var(--teal-700);color:var(--white)}
.pk-legal[hidden]{display:none}
.pk-legal{display:flex;flex-wrap:wrap;gap:clamp(32px,4vw,72px);align-items:start}
.pk-legal__indice{position:sticky;top:calc(var(--header-h) + 16px);flex:0 1 240px;align-self:flex-start;display:flex;flex-direction:column;gap:14px}
.pk-legal__indice ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.pk-legal__indice li{border-bottom:1px solid var(--line-2)}
.pk-legal__indice a{display:flex;align-items:baseline;gap:12px;padding:13px 0;color:var(--ink-900);text-decoration:none;transition:color var(--duration-normal) var(--ease-standard),padding-left var(--duration-normal) var(--ease-standard)}
/* El cuerpo va en el nombre, no en el enlace: el numero conserva el
   interlineado del texto corrido, como en el diseno. */
.pk-legal__indice a > span:last-child{font-size:var(--text-body-sm);line-height:var(--leading-snug)}
.pk-legal__indice a:hover{color:var(--text-accent);padding-left:8px}
.pk-legal__num{flex:0 0 auto;font-family:var(--font-display);font-size:var(--text-caption);font-weight:var(--weight-bold);color:var(--pop-700);width:22px}
.pk-legal__doc{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)}
.pk-legal__cabecera{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.pk-legal__cabecera h2{margin:0;font-family:var(--font-display);font-size:var(--text-display-md);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--teal-800)}
.pk-legal__ambito{font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-500)}
.pk-legal__aviso{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,28px);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--white)}
.pk-legal__aviso-rotulo{display:flex;align-items:center;gap:11px;font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--pop-700)}
.pk-legal__aviso p{margin:0;max-width:62ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--ink-900);text-wrap:pretty}
.pk-legal__partes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-2)}
.pk-legal__partes li{scroll-margin-top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line-2)}
.pk-legal__titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.pk-legal__titulo .pk-legal__num{width:auto}
.pk-legal__nombre{font-family:var(--font-display);font-size:var(--text-heading-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink-900)}
.pk-legal__falta{max-width:62ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
/* Renglones en gris: el documento aun no esta escrito y el diseno lo dice
   ensenando el hueco que ocupara. */
.pk-legal__renglones{display:flex;flex-direction:column;gap:7px;max-width:62ch}
.pk-legal__renglones span{height:9px;border-radius:var(--radius-full);background:var(--paper-2);display:block}
.pk-legal__renglones span:nth-child(1){width:100%}
.pk-legal__renglones span:nth-child(2){width:86%}
.pk-legal__renglones span:nth-child(3){width:64%}

/* --- Lo que hace falta para cerrarlos ------------------------------------ */
.pk-requisitos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 clamp(24px,3vw,48px)}
.pk-requisitos li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-top:1px solid var(--border-on-dark)}
.pk-requisitos li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:var(--radius-full);background:var(--brand-pop);display:block;transform:translateY(-2px)}
.pk-requisitos span{font-size:var(--text-body-sm);line-height:var(--leading-snug);color:var(--white)}

/* ==========================================================================
   Aviso de cookies.
   Va anclado abajo y no tapa la pagina: no es un muro, se puede seguir
   leyendo mientras se decide. Aceptar y rechazar son del mismo tamano.
   ========================================================================== */
.pk-cookies{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:16px;display:flex;justify-content:center;pointer-events:none}
.pk-cookies[hidden]{display:none}
.pk-cookies__caja{pointer-events:auto;width:min(100%,720px);display:flex;flex-direction:column;gap:16px;padding:clamp(18px,2.2vw,26px);border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--white);box-shadow:0 18px 48px rgba(13,33,41,.16)}
.pk-cookies__titulo{margin:0;font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-800)}
.pk-cookies__cuerpo{margin:8px 0 0;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-cookies__cuerpo a{color:var(--text-accent)}
.pk-cookies__botones{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pk-cookies__mas{margin-left:auto;padding:6px 2px;min-height:24px;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}
.pk-cookies__mas:hover{color:var(--teal-700)}
.pk-cookies__panel{display:flex;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid var(--line-2)}
.pk-cookies__panel[hidden]{display:none}
.pk-cookies__cat{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.pk-cookies__cat input{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px;accent-color:var(--teal-700)}
.pk-cookies__cat input:disabled{cursor:not-allowed}
.pk-cookies__cat-texto{display:flex;flex-direction:column;gap:3px}
.pk-cookies__cat-titulo{font-family:var(--font-display);font-size:var(--text-body-md);font-weight:var(--weight-semibold);color:var(--ink-900)}
.pk-cookies__cat-cuerpo{font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
@media (max-width:560px){
	.pk-cookies{padding:12px}
	.pk-cookies__botones{gap:10px}
	.pk-cookies__botones .pk-btn{flex:1 1 100%;justify-content:center}
	.pk-cookies__mas{margin-left:0;width:100%;text-align:center}
}

/* La tabla de la pagina de cookies: que instala cada categoria. */
.pk-cookies-tabla{margin-top:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px);align-items:flex-start}
.pk-cookies__ficha{width:100%;padding:clamp(20px,2.4vw,28px);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--white)}
.pk-cookies__ficha h2{margin:0;font-family:var(--font-display);font-size:var(--text-heading-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--teal-800)}
.pk-cookies__ficha > p{margin:10px 0 0;max-width:62ch;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.pk-cookies__ficha ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.pk-cookies__ficha li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.pk-cookies__nombre{font-family:var(--font-display);font-size:var(--text-body-md);font-weight:var(--weight-semibold);color:var(--ink-900)}
.pk-cookies__quien{font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-500)}
.pk-cookies__para{max-width:62ch;font-size:var(--text-body-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}

/* Igual que en el formulario: en movil la casilla llega al minimo tactil. */
@media (max-width:768px){
	.pk-cookies__cat input{width:24px;height:24px;margin-top:0}
}

/* El texto de un apartado ya escrito, donde antes iban los renglones. */
.pk-legal__cuerpo{max-width:62ch;display:flex;flex-direction:column;gap:12px}
.pk-legal__cuerpo p{margin:0;font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--ink-700);text-wrap:pretty}

/* === movil === */
/* ==========================================================================
   Peakative — ajustes de movil
   Va la ultima de todas a proposito: son correcciones sobre lo que ya han
   dicho las hojas de componentes, y desde antes no ganarian.
   ========================================================================== */

/* --- Legibilidad en movil ------------------------------------------------
   El diseno usa 12px para rotulos, etiquetas y notas al pie. En pantalla
   grande y a distancia de brazo se lee; en un telefono en la mano, no.

   Se sube el token, no cada clase: los quince componentes que lo usan
   —etiquetas, notas del embudo, numeros de apartado, fichas— heredan el
   cambio sin tener que ir persiguiendolos uno a uno. Solo por debajo de
   600px: en escritorio se queda exactamente como el handoff lo dejo. */
@media (max-width:600px){
	:root{--text-caption:0.8125rem}
	/* El disco del recorrido escala con el ancho y en movil se queda en
	   11px. El circulo mide 32px: 13px de numero caben de sobra. */
	.pk-journey__disc,
	.pk-journey--stacked .pk-journey__disc{font-size:13px}
}

/* --- Sombras sobre fondo oscuro -------------------------------------------
   La tarjeta del formulario lleva del handoff una sombra pensada para fondo
   claro: 0 24px 60px de un gris muy oscuro. Sobre la banda oscura no sugiere
   elevacion —el fondo ya es mas oscuro que la sombra— y lo unico que hace es
   apagar las rayas del patron alrededor de la tarjeta, que se lee como un
   halo rectangular.

   Se cambia por una sombra corta y honesta: separa la tarjeta del fondo sin
   ensuciar el patron. En fondo claro la sombra original se queda como esta. */
.pk-band--dark .pk-form,
.pk-band--deep .pk-form{box-shadow:0 8px 24px rgba(6,18,22,.22)}