/* ========================================================================== Doisol — Infografías de las guías (/guias/*.html) Ningún componente de aquí escribe un color a mano: todos leen `--linea`, que se resuelve desde . La regla 3 de ARQUITECTURA.md aplica igual en esta carpeta. ========================================================================== */ /* --- Cabecera de la guía -------------------------------------------------- */ .guia-cabecera { position: relative; padding-block: var(--s-10) var(--s-9); background: var(--linea); color: var(--blanco); overflow: hidden; } /* La textura corporativa va en pseudo-elemento y con opacidad baja: es atmósfera, no contenido. Si la imagen no carga, la cabecera sigue siendo una superficie de color legible. */ .guia-cabecera::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 88% 0%, rgba(255, 255, 255, 0.14), transparent 62%); pointer-events: none; } .guia-cabecera > .contenedor { position: relative; z-index: var(--z-base); } .guia-migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: var(--s-5); } .guia-migas a { text-decoration: none; } .guia-migas a:hover { color: var(--blanco); text-decoration: underline; } .guia-migas li::after { content: '·'; margin-left: var(--s-2); } .guia-migas li:last-child::after { content: ''; } .guia-cabecera h1 { max-width: 20ch; } .guia-cabecera__lema { margin-top: var(--s-5); font-size: var(--t-md); line-height: 1.45; color: rgba(255, 255, 255, 0.88); max-width: 52ch; } .guia-ficha { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: var(--t-sm); color: rgba(255, 255, 255, 0.82); } .guia-ficha strong { display: block; font-family: var(--fuente-display); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: var(--s-1); } /* --- Tesis: la frase que resume la guía ---------------------------------- */ .guia-tesis { border-left: 4px solid var(--linea); padding-left: var(--s-6); max-width: 46ch; } .guia-tesis p { font-family: var(--fuente-display); font-size: var(--t-lg); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; text-wrap: balance; } /* --- El flujo: etapas del proceso ---------------------------------------- */ .guia-flujo { display: grid; gap: var(--s-3); margin-top: var(--s-7); counter-reset: etapa; } @media (min-width: 56rem) { .guia-flujo { grid-auto-flow: column; grid-auto-columns: 1fr; } } .guia-etapa { position: relative; padding: var(--s-5); background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--linea); border-radius: var(--r-lg); counter-increment: etapa; } .guia-etapa::before { content: counter(etapa); display: block; font-family: var(--fuente-display); font-size: var(--t-md); font-weight: 700; color: var(--linea); margin-bottom: var(--s-2); } .guia-etapa h3 { font-size: var(--t-base); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: var(--s-2); } .guia-etapa p { font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.55; } /* --- Retos / pasos: tarjetas largas -------------------------------------- */ .guia-bloques { display: grid; gap: var(--s-4); margin-top: var(--s-7); } @media (min-width: 48rem) { .guia-bloques { grid-template-columns: repeat(2, 1fr); } .guia-bloques--destacado > :first-child { grid-column: 1 / -1; } } .guia-bloque { padding: var(--s-6); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); } .guia-bloque__rotulo { display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--linea); margin-bottom: var(--s-3); } .guia-bloque h3 { margin-bottom: var(--s-3); } .guia-bloque p + p { margin-top: var(--s-3); } .guia-bloque p { color: var(--tinta-suave); } /* --- Lista de comprobación ----------------------------------------------- */ .guia-chequeo { display: grid; gap: var(--s-3); margin-top: var(--s-6); max-width: var(--ancho-texto); } .guia-chequeo li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; padding-bottom: var(--s-3); border-bottom: 1px solid var(--borde); } /* La marca es un cuadrado con el color de línea, no un emoji ni un icono externo: cero dependencias, y hereda el color de la página. */ .guia-chequeo li::before { content: ''; width: 0.75rem; height: 0.75rem; margin-top: 0.45em; background: var(--linea); border-radius: var(--r-sm); } .superficie-color .guia-chequeo li, .superficie-profunda .guia-chequeo li { border-bottom-color: rgba(255, 255, 255, 0.24); } .superficie-color .guia-chequeo li::before, .superficie-profunda .guia-chequeo li::before { background: var(--blanco); } /* --- Comparativa antes / después ----------------------------------------- */ .guia-contraste { display: grid; gap: 2px; margin-top: var(--s-7); background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-lg); overflow: hidden; } @media (min-width: 48rem) { .guia-contraste { grid-template-columns: 1fr 1fr; } } .guia-contraste > div { padding: var(--s-6); background: var(--blanco); } .guia-contraste h3 { font-size: var(--t-md); margin-bottom: var(--s-4); } .guia-contraste--hoy h3 { color: var(--tinta-suave); } .guia-contraste--con h3 { color: var(--linea); } .guia-contraste ul { display: grid; gap: var(--s-3); } .guia-contraste li { font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.55; } /* --- Cierre de la guía ---------------------------------------------------- */ .guia-cierre__interior { display: grid; gap: var(--s-6); align-items: center; } @media (min-width: 56rem) { .guia-cierre__interior { grid-template-columns: 1.2fr auto; } } .guia-acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* --- Nota de origen ------------------------------------------------------- */ .guia-origen { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--tinta-suave); max-width: 60ch; } /* ========================================================================== Bloque añadido para la guía «Retos de transformación digital frente a la IA» (agosto de 2026). Todo lo de aquí es reutilizable por las demás guías. Las tres reglas que gobiernan este bloque: 1. Ningún componente escribe un color a mano: todos leen `--linea`. 2. Ninguna animación deja su contenido invisible en reposo. Cada `@keyframes` de aquí arranca y termina en el estado legible; lo que se mueve es `transform` u `opacity` sobre algo que ya se lee. Es la regla que salió del peor bug del proyecto (doce bloques en `opacity: 0` para siempre). 3. Los iconos son SVG en el DOM, no imágenes ni fuentes de iconos: heredan `currentColor`, así que cambian con la línea de la página y no añaden ninguna petición de red. ========================================================================== */ /* --- Índice de la guía --------------------------------------------------- Lista de anclas al principio. Sin JavaScript sigue siendo una lista de enlaces internos que funcionan. */ .guia-indice { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); } .guia-indice a { display: inline-block; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); font-weight: 500; text-decoration: none; color: var(--tinta-suave); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-pill); transition: color var(--dur-rapida) var(--ease-out), border-color var(--dur-rapida) var(--ease-out), transform var(--dur-rapida) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .guia-indice a:hover { color: var(--linea); border-color: var(--linea); transform: translateY(-2px); } } .guia-indice a:active { transform: scale(0.97); } /* --- Franja de cifras ---------------------------------------------------- El valor va escrito en el HTML. El script solo lo cuenta desde un número menor; si no corre, la cifra real ya está en la página. Por eso el `data-cifra` es un espejo del texto, no su origen. */ .guia-cifras { display: grid; gap: var(--s-4); margin-top: var(--s-7); } @media (min-width: 40rem) { .guia-cifras { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .guia-cifras { grid-template-columns: repeat(4, 1fr); } } .guia-cifra { padding: var(--s-5); background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--linea); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s-2); } .guia-cifra__valor { font-family: var(--fuente-display); font-size: var(--t-xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--linea); /* Las cifras cambian de ancho al contar. Sin esto, la tarjeta salta. */ font-variant-numeric: tabular-nums; } .guia-cifra__texto { font-size: var(--t-sm); line-height: 1.5; color: var(--tinta); } .guia-cifra__fuente { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--borde); font-size: var(--t-xs); line-height: 1.45; color: var(--tinta-suave); } .guia-cifra__fuente a { color: var(--linea); } /* --- Iconos SVG animados ------------------------------------------------- Todos con el mismo lienzo de 48 y `currentColor`. El trazo nunca se dibuja con `stroke-dashoffset` desde cero: eso deja el icono invisible en reposo, que es exactamente lo que la regla 2 prohíbe. */ .guia-icono { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; color: var(--linea); } .guia-icono svg { width: 100%; height: 100%; overflow: visible; } .guia-icono [data-trazo] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .guia-icono [data-relleno] { fill: currentColor; stroke: none; } /* Los seis gestos. Ninguno parte de opacidad 0 ni de escala 0. */ @keyframes gui-latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } } @keyframes gui-deriva { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -2px); } } @keyframes gui-desencaje { 0%, 100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(4px) rotate(-3deg); } } @keyframes gui-abanico { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -3px); } } @keyframes gui-onda { 0% { transform: scale(0.55); opacity: 0.85; } 100% { transform: scale(1.5); opacity: 0.08; } } @keyframes gui-asoma { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } } /* El gesto solo corre cuando el bloque ya entró: así el movimiento acompaña la lectura en vez de agitarse fuera de pantalla. Sin `es-visible` el icono está completo y quieto, que es un estado válido. */ .es-visible .guia-icono [data-gesto='latido'] { transform-box: fill-box; transform-origin: center; animation: gui-latido 2.4s var(--ease-in-out) infinite; } .es-visible .guia-icono [data-gesto='deriva'] { animation: gui-deriva 3.2s var(--ease-in-out) infinite; } .es-visible .guia-icono [data-gesto='desencaje'] { transform-box: fill-box; transform-origin: center; animation: gui-desencaje 3s var(--ease-in-out) infinite; } .es-visible .guia-icono [data-gesto='abanico'] { animation: gui-abanico 3.4s var(--ease-in-out) infinite; } .es-visible .guia-icono [data-gesto='onda'] { transform-box: fill-box; transform-origin: center; animation: gui-onda 2.8s var(--ease-out) infinite; } .es-visible .guia-icono [data-gesto='asoma'] { animation: gui-asoma 3.6s var(--ease-in-out) infinite; } /* El desfase entre los elementos de un mismo icono. Misma especificidad que las reglas de arriba y más abajo en el archivo: con menos especificidad, el `animation` en forma corta ganaría y devolvería el retraso a cero. */ .es-visible .guia-icono [data-retraso='1'] { animation-delay: 0.2s; } .es-visible .guia-icono [data-retraso='2'] { animation-delay: 0.4s; } .es-visible .guia-icono [data-retraso='3'] { animation-delay: 0.6s; } /* --- Cabeza del bloque de reto ------------------------------------------- */ .guia-bloque__cabeza { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); } .guia-bloque__cabeza > div { min-width: 0; } .guia-bloque__cabeza h3 { margin-bottom: 0; } .guia-bloque__cabeza .guia-bloque__rotulo { margin-bottom: var(--s-2); } /* --- Evidencia con fuente ------------------------------------------------ Va dentro del reto. La cifra y quién la publicó viajan juntas; separarlas es como no tenerlas. */ .guia-evidencia { margin-top: var(--s-4); padding: var(--s-4); background: var(--blanco); border-left: 3px solid var(--linea); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--t-sm); line-height: 1.55; } .guia-evidencia strong { font-family: var(--fuente-display); color: var(--linea); } .guia-evidencia cite { display: block; margin-top: var(--s-2); font-size: var(--t-xs); font-style: normal; color: var(--tinta-suave); } .guia-evidencia a { color: var(--linea); } /* --- Nota de matiz ------------------------------------------------------- Para cuando un dato muy citado dice menos de lo que parece. El borde punteado es el mismo recurso que `.pendiente`: marca «leer con cuidado» sin inventar un quinto color. */ .guia-nota { margin-top: var(--s-4); padding: var(--s-4); border: 1px dashed var(--azul-claro); border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-suave); } .guia-nota__rotulo { display: block; font-family: var(--fuente-texto); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta); margin-bottom: var(--s-2); } .guia-nota a { color: var(--linea); } /* Sobre el morado, el texto de 15 px no baja de un alfa de 0,90: medido, con 0,86 el contraste es 4,42:1 y no llega al mínimo de 4,5:1. Con 0,92 queda en 4,80:1. El blanco puro daría 5,34:1, pero entonces la nota pesaría igual que el cuerpo y perdería su papel de acotación. */ .superficie-color .guia-nota, .superficie-profunda .guia-nota { border-color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.92); } .superficie-color .guia-nota__rotulo, .superficie-profunda .guia-nota__rotulo, .superficie-color .guia-nota a, .superficie-profunda .guia-nota a { color: var(--blanco); } /* --- Casos documentados -------------------------------------------------- */ .guia-casos { display: grid; gap: var(--s-4); margin-top: var(--s-7); } @media (min-width: 52rem) { .guia-casos { grid-template-columns: repeat(3, 1fr); } } .guia-caso { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg); transition: transform var(--dur-media) var(--ease-out), border-color var(--dur-media) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .guia-caso:hover { transform: translateY(-4px); border-color: var(--linea); } } .guia-caso__marca { font-family: var(--fuente-display); font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; color: var(--linea); } .guia-caso__que { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); } .guia-caso p { font-size: var(--t-sm); line-height: 1.55; color: var(--tinta); } .guia-caso__cifra { font-family: var(--fuente-display); font-weight: 700; color: var(--linea); } .guia-caso__pie { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--borde); font-size: var(--t-xs); color: var(--tinta-suave); } .guia-caso__pie a { color: var(--linea); } /* --- Línea de tiempo regulatoria ---------------------------------------- */ .guia-tiempo { display: grid; gap: 0; margin-top: var(--s-7); max-width: 72ch; } .guia-tiempo__hito { position: relative; padding: 0 0 var(--s-6) var(--s-7); border-left: 2px solid rgba(255, 255, 255, 0.28); } .guia-tiempo__hito:last-child { border-left-color: transparent; padding-bottom: 0; } /* El punto se dibuja encima de la línea, así que la línea puede seguir siendo un simple borde. */ .guia-tiempo__hito::before { content: ''; position: absolute; left: -0.4375rem; top: 0.35em; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--blanco); } .guia-tiempo__fecha { display: block; font-family: var(--fuente-display); font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blanco); margin-bottom: var(--s-2); } /* Mismo cálculo que la nota: 0,86 medía 4,42:1 sobre el morado. */ .guia-tiempo__hito p { font-size: var(--t-sm); line-height: 1.6; color: rgba(255, 255, 255, 0.92); } .guia-tiempo__hito p + p { margin-top: var(--s-2); } .guia-tiempo__hito a { color: var(--blanco); } /* Un hito que todavía no es norma se marca como pendiente, no se presenta como vigente. */ .guia-tiempo__hito[data-estado='proyecto']::before { background: transparent; box-shadow: inset 0 0 0 2px var(--blanco); } /* --- Figuras ------------------------------------------------------------- El diagrama es SVG en el DOM: escala sin perder filo y se anima. El pie explica qué muestra, para quien llegue por lector de pantalla. */ .guia-figura { margin-top: var(--s-7); } .guia-figura__lienzo { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--s-5); overflow: hidden; } .guia-figura__lienzo svg { width: 100%; height: auto; display: block; } /* El diagrama pinta todo con `currentColor`, así que el color de línea entra una sola vez, aquí. Ningún trazo ni relleno del SVG lleva un hex escrito a mano: es la regla 3 de ARQUITECTURA.md aplicada al vector. */ .guia-diagrama { color: var(--linea); } .guia-figura__pie { margin-top: var(--s-3); font-size: var(--t-xs); line-height: 1.5; color: var(--tinta-suave); max-width: 64ch; } .guia-figura__pie a { color: var(--linea); } /* Las barras de la figura de la brecha. Respiran; nunca desaparecen. */ @keyframes gui-respira { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } } .es-visible .guia-diagrama [data-barra] { transform-box: fill-box; transform-origin: bottom; animation: gui-respira 4s var(--ease-in-out) infinite; } .es-visible .guia-diagrama [data-llega] { animation: none; } /* --- Banda de atmósfera -------------------------------------------------- La imagen va como `background-image`, no como ``. Si el archivo no está, queda la superficie de color: nunca el icono de imagen rota. La altura la fija el aspect-ratio, así que tampoco hay salto de layout. */ .guia-atmosfera { /* `width: 100%` explícito y no `auto`: con `aspect-ratio` y `min-height` juntos, Chromium deriva el ancho de la altura mínima y el bloque se sale del contenedor. Medido a 375 px: 481 px de ancho contra 335 disponibles. Es la cuarta vez que aparece desplazamiento horizontal en este proyecto y la primera por esta causa. */ width: 100%; aspect-ratio: 16 / 5; min-height: 9rem; margin-top: var(--s-7); border: 1px solid var(--borde); border-radius: var(--r-lg); background-color: var(--superficie); background-repeat: no-repeat; background-position: center 35%; background-size: cover; } /* --- Conclusión ---------------------------------------------------------- */ .guia-conclusion { display: grid; gap: var(--s-5); max-width: 68ch; } .guia-conclusion p { font-size: var(--t-md); line-height: 1.5; } .guia-conclusion p:first-child { font-family: var(--fuente-display); font-size: var(--t-lg); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; text-wrap: balance; } .guia-conclusion ol { display: grid; gap: var(--s-3); counter-reset: cierre; } .guia-conclusion li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: baseline; counter-increment: cierre; font-size: var(--t-base); line-height: 1.55; } .guia-conclusion li::before { content: counter(cierre); font-family: var(--fuente-display); font-weight: 700; color: var(--linea); } /* --- Cierre: el botón de LinkedIn --------------------------------------- `.boton--blanco` sobre superficie saturada, como manda el sistema. El glifo va dentro del enlace como SVG y hereda `currentColor`. */ .boton__icono { flex: 0 0 auto; width: 1.25em; height: 1.25em; fill: currentColor; } /* 0,78 medía 3,95:1 sobre el morado. Es la sección de conversión: aquí el texto tiene que leerse a la primera. */ .guia-cierre__nota { margin-top: var(--s-5); font-size: var(--t-sm); color: rgba(255, 255, 255, 0.92); max-width: 46ch; } /* --- Fuentes ------------------------------------------------------------- */ .guia-fuentes { margin-top: var(--s-6); display: grid; gap: var(--s-3); max-width: 82ch; } .guia-fuentes li { font-size: var(--t-sm); line-height: 1.5; padding-bottom: var(--s-3); border-bottom: 1px solid var(--borde); } .guia-fuentes li:last-child { border-bottom: 0; } .guia-fuentes a { color: var(--linea); word-break: break-word; } .guia-fuentes span { display: block; font-size: var(--t-xs); color: var(--tinta-suave); margin-top: var(--s-1); } /* --- Movimiento reducido ------------------------------------------------- Alternativa completa, no una versión rápida: se cae todo el movimiento y queda el estado final, que ya era el estado en reposo. */ @media (prefers-reduced-motion: reduce) { .es-visible .guia-icono [data-gesto], .es-visible .guia-diagrama [data-barra] { animation: none !important; } .guia-icono [data-gesto='onda'] { opacity: 0.35; } .guia-indice a:hover, .guia-caso:hover { transform: none; } }