/* v4 · selector de idioma, etiquetas, gráfico de equipos, logos agrupados y formulario de registro */
.lsel{position:relative;font-family:"DM Mono",monospace;font-size:13px;letter-spacing:.04em}
.lsel summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 4px;border-radius:8px}
.lsel summary::-webkit-details-marker{display:none}
.lsel summary:focus-visible{outline:2px solid var(--coral-t);outline-offset:2px}
.lsel .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s}
.lsel[open] .caret{transform:rotate(180deg)}
.lsel ul{position:absolute;right:0;top:calc(100% + 6px);z-index:60;list-style:none;margin:0;padding:6px;min-width:220px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(20,18,16,.12);font-family:Figtree,system-ui,sans-serif;font-size:15px;letter-spacing:0}
.lsel ul a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit}
.lsel ul a:hover,.lsel ul a:focus-visible{background:var(--paper)}
.lsel ul a[aria-current]{font-weight:700}
.lsel ul a[aria-current]::after{content:" ✓"}
.lsel-f ul{top:auto;bottom:calc(100% + 6px)}
.lsel-f summary{color:#d9d2c5}
.lsel-m ul{list-style:none;padding:0;margin:8px 0 0}
.lsel-m li a{display:block;padding:8px 0;text-decoration:none}
.lsel-m a[aria-current]{font-weight:700}
.globe{flex:none}
.site-h nav .lsel{margin-left:6px}
@media (max-width:900px){.site-h nav .lsel-h{display:none}}
.site-f .cols{grid-template-columns:2fr repeat(4,1fr)}
@media (max-width:900px){.site-f .cols{grid-template-columns:1fr 1fr}}
.site-f .flegal{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:28px}
.site-f .fh{font-size:14px;margin:0 0 10px;color:#d9d2c5;font-weight:700}
.site-f .fdef{max-width:34ch;color:#d9d2c5}
.v4tags{list-style:none;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:8px}
.v4tags li{border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:#fff;font-size:15px}
.v4opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.v4opts div{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.v4opts b{display:block;margin-bottom:4px}
@media (max-width:760px){.v4opts{grid-template-columns:1fr}}
.v4org{margin:24px 0;display:grid;gap:12px}
.v4org .lv{border-radius:14px;padding:14px 18px}
.v4org .lv-d{background:var(--ink);color:var(--paper)}
.v4org .lv-t{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.v4org .lv-t div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.v4org .lv-b{background:var(--yellow)}
.v4org .lv-b ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.v4org .lv-b li{background:rgba(255,255,255,.6);border-radius:999px;padding:4px 12px;font-size:14px}
.v4org b{display:block}
@media (max-width:760px){.v4org .lv-t{grid-template-columns:1fr}}
.lgroups h3{margin:22px 0 10px;font-size:17px}
.v4note{font-size:14px;color:var(--mute)}
[id]{scroll-margin-top:96px}
.reg{display:grid;gap:14px;max-width:720px}
.reg .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.reg .row2{grid-template-columns:1fr}}
.reg label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.reg .opt{font-weight:400;color:var(--mute)}
.reg input[type=text],.reg input[type=email],.reg input[type=tel],.reg select,.reg textarea{width:100%;box-sizing:border-box;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.reg textarea{min-height:120px;resize:vertical}
.reg .tel{display:grid;grid-template-columns:150px 1fr;gap:8px}
.reg .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.reg .chk input{margin-top:4px}
.reg .err{color:var(--coral-t);font-size:14px;margin:4px 0 0}
.reg [aria-invalid=true]{border-color:var(--coral-t)}
.reg .count{font-size:13px;color:var(--mute);text-align:right}
.reg .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reg-intro{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.reg-ok{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.reg-status{min-height:1.4em}
/* Ejemplos de reglas, cultura y estrategia (v4 §10.2) */
.exs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0 8px}
.exb{border:1px solid var(--line,#e5e5e5);padding:16px}
.exb .exl{display:block;font-weight:600;margin-bottom:6px}
.exb p{margin:0}
@media (max-width:760px){.exs{grid-template-columns:1fr}}
/* Registro §11 */
.reg-hero .reg{max-width:720px;margin-top:20px}
.reg .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.reg label,.reg .lbl{font-weight:600}
.reg .opt{font-weight:400;opacity:.7}
.reg input:not([type=checkbox]),.reg select,.reg textarea{font:inherit;padding:10px 12px;border:1px solid #bbb;background:#fff;border-radius:0;width:100%;box-sizing:border-box}
.reg [aria-invalid=true]{border-color:#b3261e}
.reg .hint{margin:0;opacity:.8}
.reg-send{margin-top:8px}
.reg-send[disabled]{opacity:.6;cursor:progress}
.reg-ok{max-width:720px;margin-top:20px}
.reg-ok:focus{outline:none}

/* 0012: logos SVG externos en <img>, en gris para casar con los iconos monocromo */
.lg img.lgi{width:28px;height:28px;object-fit:contain;filter:grayscale(1) contrast(1.15)}
/* 0015 · v5.1 H5-04: cajas de partners en la home (6 en fila en escritorio) */
.v4pbox{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.v4pbox a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-weight:700;line-height:1.25;color:var(--ink);text-decoration:none}
.v4pbox a:hover{border-color:var(--ink)}
.v4pbox a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.v4pbox .ta{flex:none}
@media (min-width:1100px){.v4pbox{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:640px){.v4pbox{grid-template-columns:1fr 1fr}}
@media (max-width:360px){.v4pbox{grid-template-columns:1fr}}
/* 0016 · v5.1 H5-05: Yulen OS en la home, 7 cajas pequeñas (4 + 3 en escritorio, 2 en tableta, 1 en móvil) */
.v4osc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 0}
.v4osc-b{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:22px 20px 52px;color:var(--ink);text-decoration:none}
/* 0019: como las cajas de la página Yulen OS (.vbox.vlink): icono de color, título en mayúsculas, flecha gruesa, hover en papel */
.v4osc-b .ico.big{margin-bottom:16px}
.v4osc-b:hover{background:var(--paper)}
.v4osc-b:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.v4osc-b:focus-visible{outline:3px solid var(--coral-t);outline-offset:-6px}
.v4osc-b h3{margin:0;font-size:1.05rem;line-height:1.2;text-transform:uppercase}
.v4osc-b p{margin:.5em 0 0;color:#3a352f;font-size:15px;line-height:1.45}
.v4osc-b .ta{position:absolute;right:20px;bottom:16px;font-size:24px;font-weight:800;line-height:1}
@media (max-width:900px){.v4osc{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.v4osc{grid-template-columns:1fr}}
/* 0018 · v5.1 H5-07: textos del antes/después en tarjetas con icono (sin viñetas) */
.v4ba .ba-t ul.v4ba-l{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.v4ba-i{display:flex;align-items:flex-start;gap:14px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:14px 16px;margin:0!important}
.v4ba-i .ico{width:40px;height:40px;border-radius:10px;margin:0;flex:none}
.v4ba-i .ico svg{width:22px;height:22px}
.v4ba-i p{margin:0;font-size:16px;line-height:1.45;color:#2a2622}
.v4ba-off .ico{filter:grayscale(1);opacity:.55}
/* 0020 · solo la home: todas las cajas con el mismo borde, el de las cajas de la página Yulen OS (2px solid var(--ink), radio 14px) */
.v4home .card,.v4home .v4opts div,.v4home .lg,.v4home .v4osc-b,.v4home .v4pbox a,.v4home .faq details,.v4home .v4ba-i{border:2px solid var(--ink)!important;border-radius:14px!important}
.v4home .v4pbox a:hover{background:var(--paper)}
/* 0021 · v5.1 H5-06: mosaico animado de logotipos (catálogo de Composio, archivos alojados en yulen.ai), sin nombres visibles.
   Filas que se desplazan despacio en sentidos alternos, bordes difuminados y versión fija con movimiento reducido. 0028 (Gorka 28-10 6:25): sin botón de pausa ni pausa al pasar el ratón. */
.v4mz-h{margin:28px 0 4px;font-weight:800;font-size:1.25rem;line-height:1.25}
.v4mz{position:relative;margin:16px 0 0}
.v4mz-rows{display:grid;gap:12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.v4mz-r{overflow:hidden}
.v4mz-t{display:flex;width:max-content;animation:v4mz 160s linear infinite}
.v4mz-r:nth-child(even) .v4mz-t{animation-direction:reverse}
.v4mz-r:nth-child(2) .v4mz-t{animation-duration:190s}
.v4mz-r:nth-child(3) .v4mz-t{animation-duration:175s}
.v4mz-r:nth-child(4) .v4mz-t{animation-duration:205s}
.v4mz-r:nth-child(5) .v4mz-t{animation-duration:185s}
.v4mz-c{display:flex;gap:12px;padding-right:12px}
.v4mz-l{display:flex;align-items:center;justify-content:center;flex:none;width:72px;height:72px;box-sizing:border-box;background:#fff;border:2px solid var(--ink);border-radius:14px}
.v4mz-l img{width:38px;height:38px;object-fit:contain;display:block}
@keyframes v4mz{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.v4mz-r:nth-child(n+4){display:none}.v4mz-l{width:58px;height:58px;border-radius:14px}.v4mz-l img{width:30px;height:30px}.v4mz-c,.v4mz-rows{gap:10px}.v4mz-c{padding-right:10px}}
/* Movimiento reducido (accesibilidad): mosaico fijo, sin la copia del bucle; cada fila muestra lo que cabe. */
@media (prefers-reduced-motion:reduce){.v4mz-t{animation:none!important;width:auto}.v4mz-c[aria-hidden]{display:none}.v4mz-c{flex-wrap:nowrap}}
/* 0022 · Gorka 28-10 3:56: donde aparezcan las 7 piezas de Yulen OS, cajas pequeñas con icono de color (estilo 0019), no filas de texto.
   «Sigue con Yulen OS» (pie de cada solución): la recomendada sigue destacada; el resto pasa de fila a caja. Menú móvil: rejilla de cajas (revertida en 0029). */
.sn-g{grid-template-columns:repeat(4,1fr)}
.snt{border:2px solid var(--ink);border-radius:14px}
.snt:not(.rec){flex-direction:column;align-items:flex-start;gap:0;padding:20px 18px 48px;min-height:0}
.snt:not(.rec) .ico{width:52px;height:52px;border-radius:12px;margin:0 0 14px}
.snt:not(.rec) .ico svg{width:28px;height:28px}
.snt:not(.rec) b{text-transform:uppercase;font-size:1rem;line-height:1.2}
.snt:not(.rec) .ta{top:auto;bottom:14px;right:18px;transform:none;font-size:22px}
.snt.rec{border-width:2px}
.snt:hover{background:var(--paper)}
@media (max-width:900px){.sn-g{grid-template-columns:1fr 1fr}}
@media (max-width:360px){.sn-g{grid-template-columns:1fr}}
/* 0029 (Gorka 28-10 7:37): el menú móvil vuelve a enlaces de texto en la sección Yulen OS, igual que el resto de secciones (se retira la rejilla de cajas de 0022 solo en el menú). */
/* 0023 · Gorka 28-10 3:56: sin viñetas. Puntos de /para/ en cajas con icono; «Es tuyo» de contexto en tarjetas con icono. */
.v4pt{display:grid;gap:10px;margin:16px 0 0}
.v4pt-i{display:flex;align-items:flex-start;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px 14px}
.v4pt-i .ico{width:36px;height:36px;border-radius:10px;margin:0;flex:none}
.v4pt-i .ico svg{width:20px;height:20px}
.v4pt-i p{margin:0;font-size:15px;line-height:1.45;color:#2a2622}
.v4keep{margin:16px 0 28px}
.v4keep .card{border:2px solid var(--ink);border-radius:14px}
.v4keep .card p{margin:0}
/* 0024 · Gorka 28-10 3:56: partners más visuales — tarjetas con icono, textos sueltos en caja con icono, pasos en cajas en una fila. */
.v4bx .card,.v4bx .v4ibox,.v4bx .faq details,.v4bx .v4sb>li{border:2px solid var(--ink)!important;border-radius:14px!important}
.v4ic .card .ico{margin-bottom:14px}
.v4ibox{display:flex;align-items:flex-start;gap:18px;background:#fff;padding:22px 24px;margin:18px 0 0;max-width:900px}
.v4ibox .ico{margin:0;flex:none}
.v4ibox p{margin:0}
.v4sb{gap:12px!important}
.v4sb>li{background:#fff;padding:18px 18px 20px!important}
.flow3.stp.v4sb>li::after,.flow3.stp.v4sb>li:not(:last-child)::after{display:none!important}
.v4sb.n4{grid-template-columns:repeat(4,1fr)}
.v4sb.n5{grid-template-columns:repeat(5,1fr)}
.v4sb h3{margin:12px 0 6px}
@media (max-width:900px){.v4sb.n4,.v4sb.n5{grid-template-columns:1fr 1fr!important}.v4sb>li{padding:18px!important;min-height:0}.v4sb .sn{position:static!important}}
@media (max-width:560px){.v4sb.n4,.v4sb.n5{grid-template-columns:1fr!important}}
.v4osc.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.v4osc.c3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.v4osc.c3{grid-template-columns:1fr}}
.v4pbox a .ico{width:32px;height:32px;border-radius:9px;margin:0;flex:none}
.v4pbox a .ico svg{width:18px;height:18px}
.v4pbox a{justify-content:flex-start}
.v4pbox a .ta{margin-left:auto}
/* 0024: cajas de partners de la home con icono: icono arriba, texto, flecha abajo (como las cajas Yulen OS) */
.v4pbox a{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.v4pbox a .ta{align-self:flex-end;margin-top:auto}
/* 0025 (Gorka 28-10 4:21): cajas de partners de la home con icono grande, rejilla ordenada a 390 / 768 / 1440 */
.v4home .v4pbox a{padding:20px;gap:12px;background:#fff}
.v4pbox a .ico.big{width:56px;height:56px;border-radius:14px;margin:0;flex:none}
.v4pbox a .ico.big svg{width:30px;height:30px}
.v4pbox .v4pb-n{font-weight:800;font-size:1.08rem;line-height:1.2}
.v4pbox .v4pb-l{font-weight:400;hyphens:manual;overflow-wrap:normal;font-size:.92rem;line-height:1.45;color:var(--ink)}
.v4pbox .ta{font-size:1.25rem;font-weight:800}
/* B (recomendada): 3 + 3 en escritorio, 2 columnas en tableta, 1 en móvil */
.v4pbox-b{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:900px){.v4pbox-b{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){.v4pbox-b{grid-template-columns:1fr!important}.v4pbox-b a{display:grid!important;grid-template-columns:56px 1fr auto;column-gap:14px;row-gap:4px;align-items:center}.v4pbox-b a .ico{grid-row:1/3}.v4pbox-b .v4pb-n{align-self:end}.v4pbox-b .v4pb-l{grid-column:2;align-self:start}.v4pbox-b .ta{grid-column:3;grid-row:1/3;align-self:center!important;margin:0!important}}
/* A: 6 en fila en escritorio, 3 en tableta, 2 en móvil; contenido centrado */
.v4pbox-a{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.v4pbox-a a{align-items:center!important;text-align:center}
.v4pbox-a .ta{align-self:center!important}
@media (max-width:1099px){.v4pbox-a{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){.v4pbox-a{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* 0027 (Gorka 28-10 6:01): antes/después más compacto, mismo funcionamiento, elementos y textos (solo tamaño).
   Escritorio: bloque más estrecho. Tableta/móvil (diseño vertical de ≤860px): escena con ancho máximo y, en móvil, proporción más baja. */
@media (min-width:861px){.v4ba{max-width:880px}}
@media (max-width:860px){.v4ba .bas{max-width:440px;margin-left:auto;margin-right:auto}}
@media (max-width:560px){.v4ba .bas{aspect-ratio:5/9}}
/* 0027: icono de emprendedores / pymes al lado del título (home #para-quien, /para/, /para/emprendedores/, /para/pymes/) */
.v4th{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.v4th>h3{margin:0!important;min-width:0}
.v4th>.ico{flex:none;margin:0!important}
.gcard .v4th>.ico.big,.v4th-k>.ico.big{width:48px;height:48px;border-radius:12px}
.gcard .v4th>.ico.big svg,.v4th-k>.ico.big svg{width:26px;height:26px}
.v4th-k{margin:0 0 18px}
.v4th-k>span:not(.ico){font:700 1.15rem/1.2 Figtree,sans-serif;color:var(--ink)}
/* 0027: «PYMEs» tal cual aunque el título vaya en mayúsculas por CSS */
.v4pym{text-transform:none!important;font:inherit;letter-spacing:inherit}
/* 0028 (Gorka 28-10 6:25): cierre de la home. Sin logo encima; «Yulen» del titular es el logo, a la altura del texto, y
   «[logo] coordina el trabajo.» en una sola línea en todos los anchos (nowrap + tamaño que cabe a 390). */
.v4cl-n{white-space:nowrap}
.v4cl-l{display:inline-block;height:1.02em;width:auto;vertical-align:-.25em;margin:0 .04em 0 0}
/* El tramo mide ~15 em en ES y ~16 em en EN: el tamaño es el del h2 hasta que el tramo deja de caber en el ancho útil (100vw − 44px en móvil) */
.v4home .close h2.v4cl-h{font-size:min(clamp(1.8rem,1.2rem + 2vw,3rem),calc((100vw - 44px)/16.6))}
html[lang^="es"] .v4home .close h2.v4cl-h{font-size:min(clamp(1.8rem,1.2rem + 2vw,3rem),calc((100vw - 44px)/15.6))}
/* 0029 (Gorka 28-10 7:37): dos rejillas de tarjetas seguidas (p. ej. /para/pymes/ «Continuidad y seguimiento» → «Incorporaciones») quedaban pegadas: mismo hueco que entre tarjetas (20px) */
.grid+.grid{margin-top:20px}
.treeg .grid+.grid{margin-top:12px}
/* 0029: cierre con el logo dentro del h2 en todas las páginas; el tramo [logo] + palabra siguiente no se parte */
/* 0030 (Gorka 28-10 8:37): «las cajas rebosan el contenedor» en el formulario de registro. Causa: el form usa la clase .reg, que en
   site.css es el panel de registro de producción (borde, overflow:hidden, sombra coral y sin relleno), y .chk, que en v2.css es una
   lista de chips (flex-wrap:wrap). Aquí se anulan solo para el formulario: caja de 2px negro y radio 14 con relleno, sin sombra. */
form.reg{background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:none;overflow:visible;padding:clamp(16px,4.5vw,28px);box-sizing:border-box;min-width:0}
form.reg>*,.reg .row2>*,.reg .fld,.reg .tel>*{min-width:0}
.reg .tel{grid-template-columns:minmax(64px,96px) minmax(0,1fr)}
.reg .chk{flex-wrap:nowrap;list-style:none;padding:0;margin:0}
.reg .chk input{flex:none;width:18px;height:18px;margin:3px 0 0}
.reg .chk label{flex:1 1 auto;min-width:0;margin:0}
.reg-ts{max-width:100%}
/* 0032 (Josué 28-10 8:57): la marca no se parte nunca con guion (v2.css pone hyphens:auto en h1 y h2 bajo 400 px).
   .yb = marca en negrita; .yn = «Yulen» como texto en títulos (lo envuelve build/v4/steps/97_yulen_sin_corte.py). */
.yb,.yn{-webkit-hyphens:manual;hyphens:manual}