/* Pagina Nosotros: ajustes sobre el CSS del original (original.css). */
.about-page canvas.touch-none { opacity: 0; transition: opacity .1s ease-out; }
.about-page canvas.touch-none.is-loaded { opacity: 1; }
.about-page canvas.touch-none + * , .about-page [style*="luminosity"] { opacity: 0; transition: opacity .1s ease-out; }
.about-page [style*="luminosity"].is-loaded { opacity: .9; }
/* El carrusel Inspirar · Innovar · Impactar va justo después de la escena: la regla de arriba lo dejaba oculto. Aparece cuando la escena carga (about.js le pone opacity-100). */
.about-page canvas.touch-none + .mix-blend-difference.opacity-100 { opacity: 1; transition: opacity 1s ease-out .3s; }
/* .work-title es otra pieza en Inicio (site.css); aqui es el titulo de cada paso. */
.about-page .work-title { display: block; text-align: left; gap: 0; padding-top: 0; color: inherit; }
/* El reinicio de site.css (* { margin: 0; padding: 0; border: 0 }) no tiene capa y anula las utilidades del original,
   que si la tienen. Dentro de main se devuelve el valor a la capa del original. */
.about-page main *, .about-page main *::before, .about-page main *::after { margin: revert-layer; padding: revert-layer; border: revert-layer; }
/* Paleta de Daniel: la X de «Para quién no somos» en gris oscuro y el visto bueno en zafiro, en lugar de rojo y verde. */
.about-page main svg [stroke="#FF0000"] { stroke: #434343; }
.about-page main svg [stroke="#30D34B"] { stroke: #1B52E8; }
/* Linea de escaneo del equipo en zafiro, con centro cian (el original la hace roja). */
.about-page .ts-scan-line { background: linear-gradient(90deg, #0000 0%, #1b52e84d 15%, #1b52e8d9 40%, #3a7cff 50%, #1b52e8d9 60%, #1b52e84d 85%, #0000 100%); box-shadow: 0 0 6px 2px #1b52e833, 0 0 2px 1px #1b52e880; }
/* Seccion de Daniel: sube sobre el proceso como una cortina. Retrato con degradado zafiro (generado con IA desde fotos reales de Daniel); cubre la seccion desde arriba, como el original. La foto se pide al acercarse (about.js agrega .is-near). */
.about-page .about-founder { background-color: #03071a; background-repeat: no-repeat; background-size: cover; background-position: center top; }
.about-page .about-founder.is-near { background-image: url(/public/images/about/daniel-fundador-mobile.webp); }
@media (min-width: 48rem) { .about-page .about-founder.is-near { background-image: url(/public/images/about/daniel-fundador.webp); } }
/* En tablet vertical el nombre caia sobre el pelo: la foto baja un poco; el borde superior de la foto es casi negro y empalma con el fondo. */
@media (min-width: 48rem) and (max-width: 63.99rem) { .about-page .about-founder { background-position: center 7rem; } }
/* Desde 1280 la cara se corre un poco a la derecha para que el cargo no quede sobre el pelo; en 1920 la foto llena el ancho y no cambia. */
@media (min-width: 80rem) { .about-page .about-founder { background-position: 30% top; } }
/* Iconos de LinkedIn y ubicación en la sección de Daniel: mismo cuadro de 40 px del original. */
.about-page .about-founder .icon-link { display: inline-block; width: fit-content; transition: opacity .3s ease-in-out; }
.about-page .about-founder .icon-link:hover { opacity: .8; }

/* Frase grande de la sección de Daniel: una oración por línea, con el ancho que pida la fila. */
.about-page .about-founder [data-fadescroll] { max-width: none; }
/* En teléfono, «Antes de empezar» lleva la línea vertical con los iconos ✕ y ✓, como el original. La regla .fill-line del Inicio
   (site.css) la ocultaba en esta página. */
@media (max-width: 47.99rem) {
  .about-page .we-not-section .fill-line { display: flex; top: 0; bottom: auto; width: 1.5rem; height: 100%; }
  .about-page .we-not-section .fill-line .line { top: 0; translate: none; width: 1px; height: 100%; background: color-mix(in oklab, #272727 15%, transparent); }
  .about-page .we-not-section .fill-line svg { top: 0; translate: -50% 0; }
}
/* El reinicio de arriba (revert-layer) también anula el margen lateral de .tr__container, que en el original no tiene capa:
   el texto tocaba el borde de la pantalla. Se devuelve el del original en toda la página. */
.about-page main .tr__container { padding-inline: 1.5rem; }
@media (min-width: 48rem) { .about-page main .tr__container { padding-inline: 2.5rem; } }
/* La regla #testimonials > .tr__container del Inicio (site.css) daba alto de pantalla también al bloque de la línea final:
   quedaba una pantalla gris vacía antes del cierre. Ese bloque solo lleva la línea con cruz. */
.about-page #testimonials > .tr__container + .tr__container { min-height: 0; padding-block: 0 4rem; }

/* 2026-11-10 · Celular igual que el computador y con más aire (docs/fases/plan-daniel-movil.md). */
@media (max-width: 47.99rem) {
  /* Así avanzamos: la línea con "+" de cada paso, que solo existía desde 768 px */
  .about-page .fill-line.hidden { display: block; }
  /* Mi postura: más espacio entre grupos */
  .about-page .left-block + .right-block { margin-top: 1rem; }
  .about-page .right-block > p:first-child { margin-bottom: 3rem; }
  .about-page .right-block > p:last-child { margin-top: 2rem; }
  /* Daniel Díaz: empieza debajo de la cabecera fija; el lugar va bajo el nombre (no junto al menú) y LinkedIn con la frase,
     más abajo, sobre el azul y encima de la cara */
  .about-page .about-founder { padding-top: 7.5rem; padding-bottom: 5rem; }
  /* Pasto, Colombia a la derecha, en la fila del nombre (pedido de Daniel); ya no choca con el menú porque la sección
     empieza debajo de la cabecera */
  .about-page .about-founder .title-block > div:first-child { margin-bottom: 0; }
  /* La frase de cierre de la foto, a la derecha, con su barra también a la derecha */
  .about-page .about-founder .border-l-2 { align-self: flex-end; text-align: right; border-left-width: 0; border-right: 2px solid currentColor; padding-left: 0; padding-right: 1rem; }
  .about-page .about-founder .title-block + .grid { margin-top: 10lvh; }
  /* Antes de empezar: su borde sube limpio, con aire antes del título */
  .about-page .we-not-section > .tr__container > .grid { padding-top: 6rem; }
}
/* Cabecera sobre la foto azul de Daniel: sin mezcla de color (el logo se veía naranja). La clase la pone about.js. */
.site-header.on-photo { mix-blend-mode: normal; }