/* ═══════════════════════════════════════════════════════════════════════ olorun-pages.css — extensiones compartidas de las páginas de contenido (soluciones por vertical, páginas de producto y capacidades). Se carga SIEMPRE DESPUÉS de olorun-kit.css y solo usa sus tokens: aquí no hay ni un color suelto. El kit define el sistema (rejilla, tema, botones, formulario, revelado); esto añade los patrones que las páginas largas necesitan y que el kit no traía: migas, etiquetas de estado, panel de diagrama, acordeones y matriz de funciones. Consumidores: /erp/inteligencia-artificial/ /soluciones/ /soluciones/construccion/ /soluciones/ingenieria-electrica/ ═══════════════════════════════════════════════════════════════════════ */ /* ── Accesibilidad base ───────────────────────────────────────────────── Foco visible en TODO elemento interactivo. El kit lo define solo para inputs; sin esto, navegar la página con teclado deja al usuario sin saber dónde está (WCAG 2.2 AA, 2.4.11 y 2.4.13). */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--accent);outline-offset:3px;border-radius:3px } .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-2);color:#fff; padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase} .skip:focus{left:0} /* ── Migas de pan (refleja el BreadcrumbList del JSON-LD) ─────────────── */ .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase; color:var(--text-dim);padding-top:8px} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .crumbs li::after{content:"/";margin-left:8px;color:var(--line)} .crumbs li:last-child::after{content:""} .crumbs a{color:var(--accent-ink)} .crumbs a:hover{text-decoration:underline} .crumbs [aria-current]{color:var(--text)} /* ── Etiquetas de estado ─────────────────────────────────────────────── --soon queda definido para cuando una función entre como Próximamente. */ .state{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px; letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:4px 11px; border:1px solid var(--line);background:var(--surface);color:var(--text-dim);white-space:nowrap} .state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} .state--ok{border-color:rgba(42,138,198,.4);color:var(--accent-ink)} .state--soon::before{background:var(--text-dim)} .trustline{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono); font-size:11.5px;letter-spacing:.04em;color:var(--text-dim);border:1px solid var(--line); border-radius:999px;padding:7px 15px;background:var(--surface)} .trustline svg{width:15px;height:15px;color:var(--accent);flex:none} /* ── Panel de diagrama (SVG en línea: sin peticiones, sin CLS) ────────── */ .panel{border:1px solid var(--line);border-radius:10px;background:var(--surface); box-shadow:0 30px 70px -34px var(--shadow);overflow:hidden} .panel__bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line); background:var(--bg-alt)} .panel__dot{width:9px;height:9px;border-radius:50%;background:var(--line)} .panel__t{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase; color:var(--text-dim);margin-left:6px} .panel svg{display:block;width:100%;height:auto} /* Paleta de los diagramas. Va por CLASE y no por atributo fill="#hex": un hex fijo convierte el dibujo en una isla clara dentro del panel oscuro (medido: rect #EFF4F9 sobre panel rgb(19,33,59)). Con clases, el mismo diagrama sigue al tema del visitante. */ .pv-bg{fill:var(--bg)} .pv-card{fill:var(--bg-alt);stroke:var(--line)} .pv-surface{fill:var(--surface);stroke:var(--line)} .pv-line{stroke:var(--line);fill:none} .pv-dim{fill:var(--text-dim)} .pv-ink{fill:var(--text)} .pv-num{fill:var(--accent-2)} .pv-acc{fill:var(--accent)} .pv-accink{fill:var(--accent-ink)} .pv-accline{stroke:var(--accent);fill:none} .pv-softline{stroke:var(--accent-soft);fill:none} .pv-alert{fill:var(--surface);stroke:var(--accent)} .pv-btn{fill:var(--btn)} .pv-btntx{fill:var(--btn-tx)} /* ── Fotografía de sección ──────────────────────────────────────────────── `.shot` envuelve un . El SIEMPRE lleva width/height en el marcado (reserva la caja y evita CLS) y aquí se le devuelve la fluidez con width:100%/height:auto, que es la pareja obligatoria: sin `height:auto` el alto fijo del atributo deforma la imagen al escalar el ancho. `aspect-ratio` mantiene la caja aunque la imagen aún no haya cargado. */ .shot{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden; background:var(--bg-alt);min-width:0} .shot img{display:block;width:100%;height:auto} .shot figcaption{padding:13px 17px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--text-dim);border-top:1px solid var(--line);background:var(--surface)} /* Fila de fotos. `align-items:start` evita que una tarjeta más alta estire a las demás y descuadre los pies de foto. */ .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start} .shots--2{grid-template-columns:repeat(2,1fr)} /* Foto + texto a dos columnas */ .shotside{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center} .shotside>*{min-width:0} /* ── Principios / bloques numerados ───────────────────────────────────── */ .principles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:8px;overflow:hidden} .principle{background:var(--bg);padding:28px 24px;min-width:0} .principle__n{font-family:var(--mono);font-size:12px;color:var(--accent)} .principle h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:10px 0 9px;color:var(--text)} .principle p{font-size:14.5px;color:var(--text-dim)} /* ── Flujo numerado ───────────────────────────────────────────────────── */ .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:34px;list-style:none;counter-reset:f} .flow li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:8px; padding:20px 18px;counter-increment:f;min-width:0} .flow li::before{content:counter(f);position:absolute;top:-11px;left:18px;width:22px;height:22px; border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px; display:flex;align-items:center;justify-content:center} .flow b{display:block;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--text);margin-bottom:5px} .flow span{font-size:13.5px;color:var(--text-dim)} .flow li:last-child{border-color:var(--accent)} /* ── Matriz de funciones en acordeón ──────────────────────────────────── */ .mods{display:flex;flex-direction:column;gap:18px} .mod{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden} .mod>summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center; gap:16px;flex-wrap:wrap;transition:background .2s} .mod>summary::-webkit-details-marker{display:none} .mod>summary:hover{background:var(--bg-alt)} .mod__ic{width:26px;height:26px;color:var(--accent-2);flex:none} .mod__h{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--text);letter-spacing:-.01em;flex:1;min-width:200px} .mod__n{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.04em} .mod__chev{width:18px;height:18px;color:var(--text-dim);transition:transform .25s;flex:none} .mod[open] .mod__chev{transform:rotate(180deg)} .mod__body{padding:22px 26px 26px;border-top:1px solid var(--line)} .mod__lead{font-size:15px;color:var(--text-dim);max-width:70ch;margin-bottom:20px} .feats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none} .feat{border:1px solid var(--line);border-radius:7px;padding:16px 18px;background:var(--bg);min-width:0} .feat b{display:block;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--text);margin-bottom:5px} .feat p{font-size:13.8px;color:var(--text-dim);margin-bottom:10px} .feat__meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .tag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase; color:var(--text-dim);border:1px solid var(--line);border-radius:3px;padding:3px 8px;background:var(--surface)} /* ── Bloques de capacidades en rejilla ──────────────────────────────────── `min-width:0` no es decorativo: sin él un ítem de grid no baja de su ancho de contenido mínimo y la lista interior arrastra la columna entera fuera de pantalla. El desborde NO se ve, porque el kit pone overflow-x:hidden en html y body: recorta el texto en silencio en vez de sacar barra horizontal. Medido a 360px: 421px sobre 361 de ancho. */ .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .cgrid>*{min-width:0} .cblock{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px 26px} .cblock h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--text);margin-bottom:6px} .cblock>p{font-size:14.5px;color:var(--text-dim);margin-bottom:16px} .cblock ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;min-width:0} .cblock ul li{font-size:14px;color:var(--text);padding-left:18px;position:relative;min-width:0} .cblock ul li::before{content:"\203A";position:absolute;left:0;color:var(--accent);font-family:var(--mono)} /* Variante ancha. Va por CLASE y no por style inline: un inline gana a cualquier media query y dejaba las 3 columnas fijas también en móvil. */ .cblock--full{grid-column:1/-1} .cblock--full ul{grid-template-columns:repeat(3,1fr)} /* Lista de capacidades usada como tarjeta suelta (junto a una foto, sin

). El propio