/* Tipografías Geist y Geist Mono (licencia SIL OFL: assets/fonts/LICENSE-Geist-OFL.txt).
   Se sirven desde este mismo sitio y no desde Google Fonts: así no se envía la
   dirección IP de quien visita Kanlane a Google solo por cargar una fuente. */
@font-face{
  font-family:'Geist';
  src:url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ----------
   Estilo «cristal limpio»: base neutra, un solo acento y cristal solo en la barra
   lateral, la barra de cada vista y lo que se superpone (ficha, diálogos, menús).
   Los nombres de siempre se mantienen (los plugins dependen de ellos); los nuevos
   son --glass*, --sheet, --overlay, --wash, --hue-a/b, --surface-solid, --late y --today. */
:root{
  /* Acento y velo del fondo: los sobreescribe Ajustes (SettingsView.applyAccent). Por defecto, Grafito. */
  --acc-solid-l:#18181B; --acc-ink-l:#FFFFFF; --acc-text-l:#18181B; --acc-soft-l:rgba(23,24,28,0.07);
  --acc-solid-d:#F4F4F5; --acc-ink-d:#0A0A0C; --acc-text-d:#F4F4F5; --acc-soft-d:rgba(255,255,255,0.09);
  --hue-a:#71717A; --hue-b:#71717A;

  --font:'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --bg:#F4F5F7;
  /* Intensidad del velo de color de las dos esquinas del fondo. */
  --wash:.18;
  --sidebar:rgba(255,255,255,0.62);
  --surface:#FFFFFF;
  /* Igual que --surface pero siempre opaca: para lo que tapa contenido al desplazarse. */
  --surface-solid:#FFFFFF;
  --surface-2:rgba(23,24,28,0.055);
  --surface-3:rgba(23,24,28,0.09);
  --hover:rgba(23,24,28,0.045);
  --ink:#17181C;
  --ink-soft:#5D6068;
  --ink-faint:#686C76;
  --line:rgba(23,24,28,0.08);
  --line-strong:rgba(23,24,28,0.14);

  /* Cristal: barra lateral y barra de vista. */
  --glass:rgba(255,255,255,0.62);
  --glass-line:rgba(255,255,255,0.9);
  --glass-shadow:0 1px 2px rgba(20,22,40,0.04), 0 12px 32px -12px rgba(20,22,40,0.12);
  --glass-blur:blur(24px) saturate(1.4);
  /* Ficha de tarea, diálogos y menús, y el velo de detrás. */
  --sheet:rgba(255,255,255,0.82);
  --sheet-blur:blur(32px) saturate(1.5);
  --overlay:rgba(230,232,238,0.55);
  --seg-on:#FFFFFF;

  --accent:var(--acc-text-l);
  --accent-solid:var(--acc-solid-l);
  --accent-ink:var(--acc-ink-l);
  --accent-soft:var(--acc-soft-l);
  --focus:var(--accent-soft);
  --focus:color-mix(in srgb, var(--accent-solid) 24%, transparent);

  --st-pend:#686C76;  --st-pend-bg:rgba(23,24,28,0.055);
  --st-proc:#2563EB;  --st-proc-bg:rgba(37,99,235,0.09);
  --st-wait:#92580A;  --st-wait-bg:rgba(202,138,4,0.12);
  --st-done:#147A3A;  --st-done-bg:rgba(22,163,74,0.1);
  --danger:#D32222;   --danger-bg:rgba(220,38,38,0.08);
  --meet:#6D4AE0;     --meet-bg:rgba(124,58,237,0.09);
  /* Fechas: vencida y hoy (la hecha usa --st-done). */
  --late:#C2410C;     --late-bg:rgba(234,88,12,0.1);
  --today:#92580A;    --today-bg:rgba(202,138,4,0.12);
  /* Anillo de estado de cada columna (igual en claro y oscuro). */
  --dot-pend:#9498A2; --dot-proc:#3B82F6; --dot-wait:#F59E0B; --dot-done:#22C55E; --dot-red:#EF4444; --dot-violet:#A855F7;

  --shadow-sm:0 1px 2px rgba(20,22,40,0.05);
  --shadow:0 2px 4px rgba(20,22,40,0.05), 0 10px 22px -12px rgba(20,22,40,0.2);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.5);
  --shadow-pop:0 16px 36px -12px rgba(20,22,40,0.28);
  --shadow-drag:0 18px 36px -12px rgba(20,22,40,0.3), 0 0 0 1px rgba(23,24,28,0.06);
  /* etiqueta, control, tarjeta, panel; el cristal y la ficha salen del panel. */
  --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:14px;
  --r-glass:calc(var(--r-xl) + 2px);
  --r-sheet:calc(var(--r-xl) + 4px);
  /* Etiquetas de cliente: el tono (--h) sale del cliente. */
  --chip-s:46%; --chip-bg-l:95%; --chip-fg-l:32%; --chip-dot-l:52%;
  /* Avatares: iniciales oscuras sobre un pastel. */
  --av-l:86%; --av-s:78%;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* Tema oscuro: por sistema (si no se ha elegido claro) o elegido en Ajustes. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0C;
    --wash:.16;
    --sidebar:rgba(255,255,255,0.04);
    --surface:rgba(255,255,255,0.045);
    --surface-solid:#17171B;
    --surface-2:rgba(255,255,255,0.07);
    --surface-3:rgba(255,255,255,0.11);
    --hover:rgba(255,255,255,0.05);
    --ink:#EDEDF0;
    --ink-soft:#A0A3AD;
    --ink-faint:#8B8F99;
    --line:rgba(255,255,255,0.075);
    --line-strong:rgba(255,255,255,0.14);
    --glass:rgba(255,255,255,0.04);
    --glass-line:rgba(255,255,255,0.08);
    --glass-shadow:0 12px 32px -12px rgba(0,0,0,0.6);
    --sheet:rgba(22,22,27,0.78);
    --overlay:rgba(4,4,6,0.6);
    --seg-on:rgba(255,255,255,0.11);
    --accent:var(--acc-text-d);
    --accent-solid:var(--acc-solid-d);
    --accent-ink:var(--acc-ink-d);
    --accent-soft:var(--acc-soft-d);
    --st-pend:#A0A3AD;  --st-pend-bg:rgba(255,255,255,0.07);
    --st-proc:#7AA9FF;  --st-proc-bg:rgba(96,165,250,0.13);
    --st-wait:#FBBF24;  --st-wait-bg:rgba(251,191,36,0.12);
    --st-done:#4ADE80;  --st-done-bg:rgba(74,222,128,0.11);
    --danger:#F87171;   --danger-bg:rgba(248,113,113,0.13);
    --meet:#B9A5FF;     --meet-bg:rgba(167,139,250,0.14);
    --late:#FB923C;     --late-bg:rgba(251,146,60,0.13);
    --today:#FBBF24;    --today-bg:rgba(251,191,36,0.12);
    --shadow-sm:none;
    --shadow:0 12px 26px -14px #000;
    --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.7);
    --shadow-pop:0 18px 40px -12px rgba(0,0,0,0.7);
    --shadow-drag:0 20px 40px -12px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
    --chip-s:38%; --chip-bg-l:17%; --chip-fg-l:78%; --chip-dot-l:62%;
    --av-l:82%; --av-s:70%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0C;
  --wash:.16;
  --sidebar:rgba(255,255,255,0.04);
  --surface:rgba(255,255,255,0.045);
  --surface-solid:#17171B;
  --surface-2:rgba(255,255,255,0.07);
  --surface-3:rgba(255,255,255,0.11);
  --hover:rgba(255,255,255,0.05);
  --ink:#EDEDF0;
  --ink-soft:#A0A3AD;
  --ink-faint:#8B8F99;
  --line:rgba(255,255,255,0.075);
  --line-strong:rgba(255,255,255,0.14);
  --glass:rgba(255,255,255,0.04);
  --glass-line:rgba(255,255,255,0.08);
  --glass-shadow:0 12px 32px -12px rgba(0,0,0,0.6);
  --sheet:rgba(22,22,27,0.78);
  --overlay:rgba(4,4,6,0.6);
  --seg-on:rgba(255,255,255,0.11);
  --accent:var(--acc-text-d);
  --accent-solid:var(--acc-solid-d);
  --accent-ink:var(--acc-ink-d);
  --accent-soft:var(--acc-soft-d);
  --st-pend:#A0A3AD;  --st-pend-bg:rgba(255,255,255,0.07);
  --st-proc:#7AA9FF;  --st-proc-bg:rgba(96,165,250,0.13);
  --st-wait:#FBBF24;  --st-wait-bg:rgba(251,191,36,0.12);
  --st-done:#4ADE80;  --st-done-bg:rgba(74,222,128,0.11);
  --danger:#F87171;   --danger-bg:rgba(248,113,113,0.13);
  --meet:#B9A5FF;     --meet-bg:rgba(167,139,250,0.14);
  --late:#FB923C;     --late-bg:rgba(251,146,60,0.13);
  --today:#FBBF24;    --today-bg:rgba(251,191,36,0.12);
  --shadow-sm:none;
  --shadow:0 12px 26px -14px #000;
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,0.7);
  --shadow-pop:0 18px 40px -12px rgba(0,0,0,0.7);
  --shadow-drag:0 20px 40px -12px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
  --chip-s:38%; --chip-bg-l:17%; --chip-fg-l:78%; --chip-dot-l:62%;
  --av-l:82%; --av-s:70%;
  color-scheme:dark;
}

/* Sin backdrop-filter el cristal no desenfoca: se sube la opacidad para que el texto siga leyéndose. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,0.94);--sheet:#FFFFFF;--overlay:rgba(230,232,238,0.88);}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){--glass:#131316;--sheet:#17171B;--overlay:rgba(4,4,6,0.88);}
  }
  :root[data-theme="dark"]{--glass:#131316;--sheet:#17171B;--overlay:rgba(4,4,6,0.88);}
}

/* ---------- Páginas de captación (alternativa-a-…, gestor-de-…, crm-…, y sus pares en /en/) ----------
   Estilo «cristal limpio», el mismo de la portada y la aplicación (tokens.css): base neutra con un
   velo de color, cristal solo en la barra de navegación y superficies sólidas con borde fino para
   el contenido. Tema claro u oscuro según el sistema. Sin rayas laterales. HTML sin JavaScript. */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:92px;}
.seo-page{
  --hue-a:#3B82F6;
  --hue-b:#6366F1;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.seo-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60% 70% at 0% 0%, color-mix(in srgb, var(--hue-a) calc(var(--wash) * 100%), transparent) 0, transparent 70%),
    radial-gradient(55% 65% at 100% 100%, color-mix(in srgb, var(--hue-b) calc(var(--wash) * 70%), transparent) 0, transparent 70%);
}
.seo-page a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--ink-faint);}
.seo-page a:hover{text-decoration-color:currentColor;}
.seo-page :focus-visible{outline:2px solid var(--accent-solid);outline-offset:3px;border-radius:6px;}
.seo-page ::selection{background:color-mix(in srgb, var(--accent-solid) 22%, transparent);}
.seo-page h1,.seo-page h2,.seo-page h3,.seo-page p{margin:0;}
.seo-wrap{width:min(1080px, 100% - 40px);margin-inline:auto;}

/* ---------- Cabecera: barra flotante de cristal ---------- */
.seo-header{position:sticky;top:12px;z-index:50;padding:12px 12px 0;}
.seo-header-in{display:flex;align-items:center;gap:8px;width:min(1120px, 100%);min-height:56px;padding:8px 10px 8px 16px;border-radius:var(--r-glass);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);}
.seo-brand{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:-0.02em;text-decoration:none;}
.seo-page a.seo-brand{color:var(--ink);}
.seo-brand::before{content:"";width:28px;height:28px;border-radius:8px;background:url("/assets/img/favicon.svg") center/cover no-repeat;}
.seo-header-in .seo-nav{display:flex;align-items:center;gap:8px;margin-left:auto;}
.seo-nav a{display:inline-flex;align-items:center;height:32px;padding:0 11px;font-size:14px;border-radius:8px;text-decoration:none;white-space:nowrap;transition:color .12s ease,background-color .12s ease,opacity .15s ease;}
.seo-page .seo-nav a{color:var(--ink-soft);}
.seo-page .seo-nav a:hover{color:var(--ink);background:var(--hover);}
/* El último enlace es «Crear cuenta»: botón principal. */
.seo-page .seo-nav a:last-child{height:36px;padding:0 14px;font-weight:550;border-radius:var(--r-md);color:var(--accent-ink);background:var(--accent-solid);}
.seo-page .seo-nav a:last-child:hover{color:var(--accent-ink);background:var(--accent-solid);opacity:.88;}

.lang-switch{display:inline-flex;gap:1px;padding:2px;border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;font-weight:500;flex:none;}
.lang-opt{display:grid;place-items:center;min-width:32px;height:28px;padding:0 6px;border-radius:7px;line-height:1;text-decoration:none;}
.seo-page .lang-opt{color:var(--ink-soft);}
.seo-page a.lang-opt:hover{color:var(--ink);}
.seo-page .lang-opt[aria-current="true"]{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line);}

/* ---------- Migas y portada de la página ---------- */
.seo-breadcrumb{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;padding-top:44px;font-size:13px;color:var(--ink-faint);}
.seo-page .seo-breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.seo-page .seo-breadcrumb a:hover{color:var(--ink);text-decoration:underline;}
.seo-breadcrumb span:last-child{color:var(--ink-soft);}

.seo-hero{padding:28px 0 72px;}
.seo-hero .seo-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;}
.seo-eyebrow{font-size:13px;font-weight:500;line-height:1.5;color:var(--ink-faint);}
.seo-hero h1{max-width:17ch;margin-top:18px;font-size:clamp(36px,6.2vw,72px);font-weight:600;line-height:1.03;letter-spacing:-0.045em;text-wrap:balance;}
.seo-page .seo-lead{max-width:60ch;margin-top:22px;font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--ink-soft);text-wrap:pretty;}
.seo-page .seo-updated{margin-top:16px;font-size:13.5px;color:var(--ink-faint);}
.seo-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;}
.seo-button{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;font-size:15px;font-weight:550;line-height:1;white-space:nowrap;border:1px solid transparent;border-radius:12px;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,opacity .15s ease,transform .15s ease;}
.seo-button:active{transform:translateY(1px);}
.seo-page a.seo-button{color:var(--accent-ink);background:var(--accent-solid);}
.seo-page a.seo-button:hover{opacity:.88;}
.seo-page a.seo-button.secondary{font-weight:500;color:var(--ink);background:var(--surface);border-color:var(--line-strong);}
.seo-page a.seo-button.secondary:hover{opacity:1;background:var(--hover);}

/* ---------- Contenido ---------- */
.seo-content{padding:0 0 88px;}
.seo-content h2{margin-top:88px;font-size:clamp(26px,3.6vw,40px);font-weight:600;line-height:1.1;letter-spacing:-0.035em;text-wrap:balance;}
.seo-content h2:first-child{margin-top:0;}
.seo-content h3{margin-top:28px;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-0.015em;}
.seo-content p{max-width:70ch;margin-top:14px;color:var(--ink-soft);}
.seo-content p strong,.seo-content li strong{color:var(--ink);font-weight:600;}

/* «En resumen». */
.seo-summary{padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-sheet);background:var(--surface);box-shadow:var(--shadow-sm);}
.seo-content .seo-summary h2{margin:0;font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-faint);}
.seo-content .seo-summary p{max-width:none;margin-top:8px;font-size:17px;line-height:1.6;color:var(--ink);}

/* Tarjetas de funciones. */
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:28px;}
.seo-card{padding:22px 22px 24px;border:1px solid var(--line);border-radius:var(--r-sheet);background:var(--surface);box-shadow:var(--shadow-sm);transition:border-color .15s ease;}
.seo-card:hover{border-color:var(--line-strong);}
.seo-content .seo-card h3{margin:0;font-size:16px;}
.seo-content .seo-card p{margin-top:8px;font-size:15px;line-height:1.55;}

/* Dos columnas («lo que protege» / «lo que no»). */
.seo-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;}
.seo-two>div{padding:22px 24px 24px;border:1px solid var(--line);border-radius:var(--r-sheet);background:var(--surface);box-shadow:var(--shadow-sm);}
.seo-content .seo-two h3{margin:0;font-size:16px;}
.seo-list{max-width:70ch;margin:14px 0 0;padding:0;list-style:none;color:var(--ink-soft);}
.seo-list li{position:relative;margin-top:9px;padding-left:20px;}
.seo-list li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--line-strong);}
.seo-two .seo-list{font-size:15px;line-height:1.55;}

/* Comparativa. */
.seo-compare{width:100%;margin-top:28px;border:1px solid var(--line);border-radius:var(--r-sheet);border-collapse:separate;border-spacing:0;background:var(--surface);box-shadow:var(--shadow-sm);font-size:15px;overflow:hidden;}
.seo-compare th{padding:14px 18px;font-size:13px;font-weight:500;text-align:left;color:var(--ink-faint);border-bottom:1px solid var(--line);}
.seo-compare td{padding:13px 18px;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.seo-compare tbody tr:last-child td{border-bottom:0;}
.seo-compare td:first-child{font-weight:500;color:var(--ink);}
.seo-compare th:not(:first-child),.seo-compare td:not(:first-child){text-align:center;}
.seo-compare th.is-kanlane{color:var(--ink);font-weight:600;}
.seo-compare .is-kanlane{background:var(--surface-2);}
.seo-compare .yes{color:var(--st-done);}
.seo-compare .no{color:var(--ink-faint);}
.seo-compare svg{display:inline-block;vertical-align:-3px;}
.seo-content .seo-compare-note{margin-top:12px;font-size:13.5px;color:var(--ink-faint);}
.seo-command{max-width:760px;margin:16px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-sm);overflow-x:auto;}
.seo-command code{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;}
.seo-compare-text th:not(:first-child),.seo-compare-text td:not(:first-child){text-align:left;}
.seo-compare-text td{vertical-align:top;font-size:14.5px;line-height:1.5;}
.seo-compare-text td.is-kanlane{color:var(--ink);}

/* Ficha de cliente de ejemplo. */
.seo-context{margin-top:28px;border:1px solid var(--line);border-radius:var(--r-sheet);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;}
.seo-context-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
.seo-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;font-weight:600;color:var(--accent-ink);background:var(--accent-solid);}
.seo-context-head strong{display:block;font-size:16px;line-height:1.3;}
.seo-context-head small{font-size:13px;color:var(--ink-faint);}
.seo-context-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);}
.seo-context-grid>div{min-width:0;padding:16px 18px;background:var(--surface-solid, var(--surface));overflow-wrap:anywhere;}
.seo-context-grid span{display:block;margin-bottom:6px;font-size:12.5px;color:var(--ink-faint);}
.seo-context-grid strong{font-size:14.5px;font-weight:500;line-height:1.4;}
.seo-context-grid .seo-context-mono{margin:0;font-family:var(--mono);font-size:13px;color:var(--ink-soft);}

/* Pasos numerados. */
.seo-steps{display:grid;gap:10px;max-width:760px;margin:24px 0 0;padding:0;list-style:none;counter-reset:paso;color:var(--ink-soft);}
.seo-steps li{position:relative;min-height:60px;padding:17px 20px 17px 62px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-sm);counter-increment:paso;}
.seo-steps li::before{content:counter(paso);position:absolute;left:18px;top:16px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface-2);}

/* Preguntas frecuentes. */
.seo-faq{max-width:820px;margin-top:24px;padding:4px 20px;border:1px solid var(--line);border-radius:var(--r-sheet);background:var(--surface);box-shadow:var(--shadow-sm);}
.seo-faq details + details{border-top:1px solid var(--line);}
.seo-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:16px;font-weight:550;cursor:pointer;list-style:none;}
.seo-faq summary::-webkit-details-marker{display:none;}
.seo-faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:rotate(45deg);transition:transform .2s ease;}
.seo-faq details[open] summary::after{transform:rotate(-135deg);}
.seo-content .seo-faq p{max-width:none;margin:0;padding:0 28px 20px 0;font-size:15.5px;}

/* Demo incrustada: ventana con marco. */
.seo-demo{display:block;width:100%;max-width:100%;height:min(680px,80vh);margin-top:28px;border:1px solid var(--line-strong);border-radius:22px;background:var(--bg);box-shadow:var(--shadow-lg);}

/* «También te puede interesar». */
.seo-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:24px 0 0;padding:0;list-style:none;}
.seo-related a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-size:15.5px;font-weight:500;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-sm);text-decoration:none;transition:border-color .15s ease;}
.seo-page .seo-related a{color:var(--ink);}
.seo-related a::after{content:"";flex:none;width:7px;height:7px;margin-right:3px;border-top:1.6px solid var(--ink-faint);border-right:1.6px solid var(--ink-faint);transform:rotate(45deg);transition:border-color .15s ease;}
.seo-related a:hover{border-color:var(--line-strong);}
.seo-related a:hover::after{border-color:var(--ink);}

/* ---------- Pie ---------- */
.seo-footer{padding:24px 0 32px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-faint);}
.seo-footer .seo-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;}
.seo-page .seo-footer a{color:var(--ink-soft);text-decoration:none;}
.seo-page .seo-footer a:hover{color:var(--ink);}
.seo-footer a:first-of-type{margin-left:auto;}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width:760px){
  .seo-context-grid{grid-template-columns:1fr 1fr;}
  .seo-two{grid-template-columns:1fr;}
  .seo-compare th,.seo-compare td{padding:12px 12px;}
  .seo-compare{font-size:14.5px;}
}
@media (max-width:700px){
  .seo-wrap{width:calc(100% - 32px);}
  .seo-header{top:8px;padding:8px 8px 0;}
  .seo-header-in{width:100%;min-height:52px;padding:7px 8px 7px 12px;}
  .seo-page .seo-nav a:not(:last-child){display:none;}
  .seo-page .seo-nav a:last-child{height:34px;padding:0 12px;}
  .seo-breadcrumb{padding-top:30px;}
  .seo-hero{padding:22px 0 56px;}
  .seo-actions{width:100%;}
  .seo-button{flex:1 1 auto;}
  .seo-content{padding-bottom:64px;}
  .seo-content h2{margin-top:64px;}
  .seo-content h2:first-child{margin-top:0;}
  .seo-summary{padding:20px;}
  .seo-faq{padding:2px 16px;}
  .seo-demo{border-radius:16px;}
  .seo-footer a:first-of-type{margin-left:0;}
  .seo-footer .seo-wrap>:first-child{width:100%;}

  /* La comparativa con texto pasa a una ficha por fila. */
  .seo-compare-text{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;}
  .seo-compare-text thead{display:none;}
  .seo-compare-text,.seo-compare-text tbody,.seo-compare-text tr,.seo-compare-text td{display:block;width:100%;}
  .seo-compare-text tr{margin-top:10px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);}
  .seo-compare-text td{padding:4px 0;border:0;}
  .seo-compare-text td:first-child{padding-bottom:8px;font-weight:600;}
  .seo-compare-text td[data-label]::before{content:attr(data-label) ": ";font-weight:500;color:var(--ink-faint);}
  .seo-compare-text td.is-kanlane{margin-top:4px;padding:8px 10px;border-radius:8px;}
}
@media (max-width:420px){
  .seo-context-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .seo-page *{transition:none!important;}
}
/* A 320 px «Create account» no cabe junto a la marca y el idioma: se aprieta la barra. */
@media (max-width:360px){
  .seo-header-in{gap:4px;padding-left:10px;}
  .seo-brand{gap:7px;font-size:15px;}
  .seo-brand::before{width:24px;height:24px;border-radius:7px;}
  .seo-header-in .seo-nav{gap:4px;}
  .seo-page .seo-nav a:last-child{padding:0 9px;font-size:13px;}
  .lang-opt{min-width:28px;padding:0 4px;}
}