/* sobre.css - "About": la unica seccion de la web que no son fotos. Ya no hay apartado de contacto (peticion de Alicia: "quitamos el CONTACT y dejamos solo ABOUT"), asi que aqui esta todo. VA EN DOS COLUMNAS, copiando el esquema de cristobalascencio.com que pidio Alicia: - IZQUIERDA, QUIETA: su retrato, su nombre, su correo y la presentacion, que se cierra invitando a encargos y clases. - DERECHA, LA QUE SE MUEVE: el CV completo. Se desplaza SOLO ESA COLUMNA -con la rueda, arrastrando o con sus dos flechas-, nunca la pagina. LA PAGINA NO SE DESPLAZA (v5.45): la seccion mide justo la pantalla. Si se desplazara, el retrato se meteria por debajo de la barra fija y se cruzaria con el icono de inicio, que quedaba muy feo. Por eso tambien se esconde el pie aqui: no cabe sin devolverle el desplazamiento a la pagina. */ #sobre { /* No hace falta el alto entero de --nav (esa altura la necesita la barra cuando lleva el nombre, y aqui el nombre no esta): basta con que el contenido arranque justo por debajo de los iconos (empiezan a 20px y miden var(--nav)-48 de alto en cada breakpoint -60px en escritorio, 48px en movil-, con 20px de margen antes). Se calcula a partir de --nav, que YA cambia solo con el ancho (92px en movil, ver responsive.css), en vez de repetir un numero fijo distinto en cada media query -eso hacia que un telefono en horizontal, con ancho de escritorio pero muy poca altura, heredara el hueco de escritorio (88px) sin necesitarlo, comiendose una parte enorme de su pantalla (aviso de Alicia, 10-08-2026: "en horizontal no se ve la informacion"). Alicia pidio BAJAR la foto y alinear con ella el CV, asi que las dos columnas empiezan a la misma altura. */ padding-top: calc(var(--nav) - 20px); height: 100vh; height: 100dvh; /* en moviles, descontando la barra del navegador */ overflow: hidden; } /* MOVIL, EN LAS DOS ORIENTACIONES: "cabe en una pantalla, sin desplazarse" funciona bien en escritorio, donde sobra alto de sobra, pero en un telefono -sobre todo en horizontal, donde la pantalla es muy baja- ese diseño se rompe: el hueco real para la presentacion y el CV se queda tan pequeño que su scroll INTERNO (antes en las dos cajas) se queda con solo dos o tres lineas visibles, y el difuminado de abajo (pensado para insinuar "sigue mas texto") se come la mayor parte de lo poco que cabe: da la sensacion de que falta informacion, aunque tecnicamente se pudiera hacer scroll dentro de esa cajita (aviso de Alicia, 10-08-2026: "se ve horrible... no se ve la informacion", "mucho peor en horizontal"). La solucion aqui no es ajustar tamaños -ya se probo con varias alturas de telefono y sigue fallando en cuanto la pantalla es mas baja de lo previsto-, es dejar de forzar que quepa en una pantalla: en movil (los dos criterios de abajo cubren un telefono ancho en horizontal, que no entra por ancho, y uno estrecho en vertical) la PAGINA VUELVE A PODER DESPLAZARSE, como el resto de secciones, y cada bloque crece lo que necesite. Se pierde el "todo cabe siempre" pero se gana que TODO EL TEXTO se vea siempre, sin cajitas con scroll escondido dentro de otro scroll. */ body.sin-marca .pie { display: none; } .sobre-wrap { max-width: 1440px; height: 100%; margin: 0 auto; padding: 6px var(--pad) 40px; display: grid; /* DOS COLUMNAS Y DOS FILAS. El retrato se queda solo en la fila de arriba (columna izquierda) y todo lo demas va en la de abajo, con lo que EL CV EMPIEZA EXACTAMENTE A LA ALTURA DEL NOMBRE, que es lo que pidio Alicia en su croquis. Hacerlo con la rejilla y no con un margen a ojo lo mantiene alineado aunque el retrato cambie de tamaño (mengua con la altura de la ventana). */ /* LA IZQUIERDA PESA MAS QUE LA DERECHA (peticion de Alicia): su presentacion se lleva la mitad larga y el CV se queda mas estrecho. Antes era justo al reves (33% / 67%). */ grid-template-columns: minmax(290px, 48%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); /* El pasillo entre las dos columnas, mas ancho de lo que era (iba en 36-80px): Alicia pidio estrechar un pelin la izquierda para que las dos se separen mas. Aun asi la izquierda sigue siendo la que pesa. */ column-gap: clamp(44px, 6vw, 100px); min-height: 0; /* deja que las dos columnas se encojan */ } .sobre-foto { grid-column: 1; grid-row: 1; } .sobre-izq { grid-column: 1; grid-row: 2; } /* El CV ocupa las DOS filas: arranca arriba, a la altura del retrato, y llega hasta abajo, para que quepan mas lineas a la vista. Antes empezaba a la altura del nombre; Alicia quiere probar las dos. */ .sobre-der { grid-column: 2; grid-row: 1 / -1; } /* ---- COLUMNA IZQUIERDA (quieta) ---- */ /* ESTA COLUMNA NO SE MUEVE. Antes se desplazaba por dentro cuando no cabia, y al hacerlo el retrato se iba hacia arriba y se veia a medias: justo lo que Alicia no queria. Ahora el retrato, el nombre y el correo se quedan clavados, y lo unico que puede desplazarse -si la ventana fuera muy baja- es la presentacion. */ .sobre-izq { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .sobre-nombre { flex-shrink: 0; } /* El retrato ya viene recortado en circulo sobre blanco; el border-radius solo asegura que siga siendo redondo si algun dia manda una foto cuadrada */ .sobre-foto { position: relative; /* Mas pequeño de lo que llego a estar (Alicia pidio reducirlo), y alineado a la izquierda con el nombre y el texto de debajo. Mengua con la ventana (el tope en vh) para que en pantallas bajas la presentacion siga cabiendo y esta columna no tenga que desplazarse. */ width: min(clamp(140px, 56%, 240px), 27vh); aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; background: var(--fondo-foto); overflow: hidden; margin-bottom: clamp(14px, 2.4vh, 26px); } .sobre-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; } /* Fundido al cargar (clase "cargada" via JS) */ .sobre-foto img:not(.cargada) { opacity: 0; } .sobre-nombre { font-family: var(--titulo); font-weight: 400; /* Este tamaño es el de partida: View.ajustarNombreAlRetrato lo recalcula para que el nombre mida EXACTAMENTE lo que el diametro del retrato (peticion de Alicia). En una sola linea, que es de lo que va el ajuste. */ font-size: clamp(17px, 1.35vw, 20px); white-space: nowrap; line-height: 1.35; /* MAS OSCURO QUE EL RESTO DE LA WEB (peticion de Alicia, 24-08-2026: "mi nombre bajo mi foto lo vamos a poner de un gris mas oscuro"). Ya iba en var(--negro), que es el tono mas oscuro de la paleta (#4a4a4a), asi que hace falta un valor propio: este es el unico sitio de la web que baja de ahi. Sigue sin ser negro puro, que es el criterio de toda la paleta (ver base.css). */ color: #2f2f2f; } /* DE DONDE ES Y DE CUANDO, en el sitio que ocupaba su correo hasta el 15-08-2026 (ver el porque en index.php). Mismo tamaño y sitio que tenia aquel, pero en gris y sin subrayado: es un dato, no un enlace. */ .sobre-lugar { flex-shrink: 0; margin-top: 10px; font-size: 13px; color: var(--gris); } /* SUS DOS PERFILES, debajo (peticion de Alicia, 15-08-2026: "un icono de IG y otro de LK"). Iconos de linea, del mismo negro y el mismo grosor de trazo que el resto de mandos de la web, para que no canten al lado de una pagina tan sobria. */ .sobre-redes { flex-shrink: 0; display: flex; gap: 14px; margin-top: 14px; } .sobre-red { display: block; color: var(--negro); transition: opacity .2s ease; } .sobre-red svg { width: 21px; height: 21px; display: block; } /* El aclarado, solo con raton de verdad: en tactil se quedaria pegado tras tocar y el icono se veria a medio apagar (mismo motivo y misma solucion que en .nav-icon, ver nav.css). */ @media (hover: hover) and (pointer: fine) { .sobre-red:hover { opacity: .55; } } /* La presentacion tampoco se mueve. El interlineado y los huecos se aprietan un poco en pantallas bajas -a la vez que mengua el retrato- para que quepa sin desplazarse. El overflow-y sigue puesto como ultimo recurso: en una ventana absurdamente baja es preferible que se pueda desplazar el texto a que se pierda por debajo. */ .sobre-bio { margin-top: clamp(14px, 2.4vh, 26px); min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; /* Se desvanece por abajo, igual que el CV: con el texto largo que mando el 29-07-2026 la presentacion ya no cabe entera en pantalla, y asi se ve que sigue en vez de parecer cortada. El retrato, quieto igualmente. El relleno de abajo va emparejado con el degradado, o la ultima linea del texto se quedaria dentro y sin poder leerse. */ padding-bottom: 28px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%); } .sobre-bio::-webkit-scrollbar { display: none; } .sobre-bio p { /* Del mismo negro que su nombre, no del gris de los subtextos (peticion de Alicia). EL PESO ES LO QUE DE VERDAD SE NOTA: todo el sitio va en Inter Light (300) y a 13px eso se lee lavado aunque el color sea oscuro. Con 400 el texto pesa lo mismo que su nombre, que es lo que ella pedia. El resto de la web se queda en 300. */ color: var(--negro); font-size: 13px; font-weight: 400; /* En px, no en proporcion: dentro de clamp() no se pueden mezclar un numero suelto y vh. 24px sobre 13px es el 1.85 de siempre */ line-height: clamp(20px, 2.6vh, 24px); /* JUSTIFICADO (peticion de Alicia, 25-08-2026, con un ejemplo ya maquetado): los dos bordes rectos, como una columna de libro, en vez de alineado solo a la izquierda. El ultimo renglon se queda pegado a la izquierda por defecto, que es lo normal. Va con guionado: sin el, justificar una columna estrecha abre huecos enormes entre palabras. Necesita saber el idioma del texto, y la pagina ya declara lang="en" (ver index.php). */ text-align: justify; -webkit-hyphens: auto; hyphens: auto; /* SIN VIUDAS. En el ordenador de Juan no salian, pero en el de Alicia -otra resolucion, otro ancho de columna- la ultima linea se quedaba con una sola palabra. "pretty" hace que el navegador reparta las ultimas lineas para evitarlo; los que no lo entienden lo ignoran, y para esos esta el espacio duro que mete View._sinViudas. */ text-wrap: pretty; } /* SIN HUECO ENTRE PARRAFOS (peticion de Alicia, 24-08-2026: "quitamos espacios entre parrafos... vamos a intentar que, al menos en version pc, se vea entero"). Los parrafos siguen existiendo -cada uno empieza en su linea-, solo que ya no se separan. */ .sobre-bio p + p { margin-top: 0; } /* AQUI HUBO UN APAÑO PARA PC (24-08-2026) que juntaba los parrafos del resumen en un solo bloque, porque el texto de entonces venia en cuatro y no cabia entero sin desplazar. Se retiro el 25-08: el texto nuevo que mando Alicia YA VIENE EN UN SOLO PARRAFO (ver "bio" en js/model.js), asi que el apaño sobraba. */ /* ---- COLUMNA DERECHA: EL CV (la que se mueve) ---- */ /* Arranca a la misma altura que el retrato (peticion de Alicia: "el CV de la derecha estaria alineado con mi foto, no tan arriba"). No hace falta bajarlo para esquivar el icono del menu porque toda la seccion empieza ya por debajo de los iconos. */ .sobre-der { position: relative; min-height: 0; } .sobre-cv { height: 100%; overflow-y: auto; /* Hueco a la derecha SOLO PARA EL TITULO, no para todo el cuerpo. Antes eran 46px en toda la caja, cuando las flechas vivian en un pasillo a media altura; desde que van arriba a la derecha (ver .cv-flechas) solo tienen que convivir con la linea del titulo, que reserva su propio hueco, y el CV puede usar todo el ancho -el mismo razonamiento que ya se aplico en movil y tablet-. */ padding-right: 0; /* Sin barra de desplazamiento: la sustituyen las dos flechas (peticion de Alicia: algo mas comedido que la barra de la web de referencia). Se sigue moviendo con la rueda, arrastrando y con el teclado. */ scrollbar-width: none; -ms-overflow-style: none; /* Se desvanece SOLO POR ABAJO, para que se note que el CV sigue. Arriba no lleva nada: Alicia queria ver el texto entero desde el principio, sin que la primera linea saliera cortada. EL RELLENO DE ABAJO ES IMPRESCINDIBLE y va emparejado con los 30px del degradado: sin el, al llegar al final del CV la ultima linea caia dentro del desvanecido y no habia forma de leerla. Con el, lo que se desvanece ahi es hueco vacio. */ /* EL DESVANECIDO, MAS POTENTE (24-08-2026): "que el degradado blanco de abajo sea un pelin mas potente para que quede claro que hay dos opciones, ir hacia abajo para leer mas o a la derecha". Pasa de 30px en rampa recta a los mismos 72px en varios tramos que ya llevan movil y tablet; alli el motivo fue el mismo y esta explicado a fondo en el bloque de movil vertical. El relleno de abajo va emparejado y siempre un poco mayor, para que la ultima linea del CV quede por encima del degradado. */ padding-bottom: 76px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), rgba(0,0,0,.82) calc(100% - 54px), rgba(0,0,0,.5) calc(100% - 36px), rgba(0,0,0,.2) calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), rgba(0,0,0,.82) calc(100% - 54px), rgba(0,0,0,.5) calc(100% - 36px), rgba(0,0,0,.2) calc(100% - 18px), transparent 100%); } .sobre-cv::-webkit-scrollbar { display: none; } .sobre-cv:focus-visible { outline: 1px solid var(--gris-claro); outline-offset: 6px; } /* UN APARTADO CADA VEZ, como el pase de fotos: los demas no se pintan siquiera, para que "cuando el lector este en el apartado 1 solo vea el apartado 1" (peticion de Alicia). Lo cambian las flechas, ver View.mostrarApartadoCV en js/view.js. */ .cv-bloque { display: none; } .cv-bloque.activo { display: block; animation: cv-entrar .35s ease both; } @keyframes cv-entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .cv-titulo { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; /* en negrita (peticion de Alicia) */ color: var(--negro); padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--gris-claro); } .cv-subtitulo { font-family: var(--titulo); font-weight: 400; font-size: 14px; color: var(--negro); margin: 24px 0 12px; } .cv-bloque > .cv-subtitulo:first-of-type { margin-top: 0; } /* Cada entrada: lo que es (en negro) y, debajo, donde y cuando (mas clarito), como en el curriculum que mando. Alguna lleva varias lineas de detalle (el doctorado). */ .cv-item + .cv-item { margin-top: 15px; } .cv-donde + .cv-donde { margin-top: 6px; } .cv-que { font-size: 13px; line-height: 1.55; color: var(--negro); /* Como en su presentacion: lo que hace que se vean oscuros es el PESO, no el color (todo el sitio va en Inter Light, 300, y a 13px se lee lavado). Con 400 el titulo de cada entrada se despega de su linea de detalle, que sigue en 300 y en gris. */ font-weight: 400; } .cv-donde { font-size: 12.5px; line-height: 1.55; color: var(--gris); margin-top: 1px; } /* JUSTIFICADO, IGUAL QUE EL RESUMEN DE LA IZQUIERDA (peticion de Alicia, 26-08-2026: "¿se puede poner que el CV expandido tambien este alineado justificado, y no a la izquierda?"). Se aplica a las dos lineas de cada entrada -lo que es y donde/cuando-, que son las unicas que llegan a ocupar varios renglones. Con guionado por lo mismo que alli: en una columna estrecha, justificar sin el abre huecos enormes entre palabras. */ .cv-que, .cv-donde { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* Los nombres que Alicia quiere destacar (ver "cvNegritas" en js/model.js). En el mismo gris de su linea, solo con mas peso: se distinguen sin cantar. */ /* Las negritas y cursivas que Alicia marca linea a linea en el CV (**negrita** y *cursiva* en js/model.js) */ .cv-que strong, .cv-donde strong { font-weight: 600; color: inherit; } .cv-que em, .cv-donde em { font-style: italic; } /* LAS FLECHAS: en el pasillo de la derecha, a media altura. Discretas, del mismo gris clarito que las del pase de fotos. Se apagan al llegar arriba o abajo del todo, y si el CV cupiera entero no se ven. */ /* ARRIBA A LA DERECHA, superpuestas al titulo del apartado (peticion de Alicia, 24-08-2026: "vamos a poner las flechitas del CV expandido arriba a la derecha, como esta en las otras versiones"). Hasta ahora escritorio era el unico sitio donde seguian en un pasillo a media altura; movil y tablet ya las llevaban asi desde la v5.92. Como en aquellas: el titulo se queda fijo arriba (position:sticky, ver .cv-titulo) para que esta esquina coincida SIEMPRE con el titulo visible, se haya desplazado el CV o no. */ /* A LA ALTURA DEL RENGLON DEL TITULO, no colgando por debajo (aviso de Juan, 24-08-2026: "queda horrible, tiene que quedar a la altura del texto"). Al subirlas aqui se habian quedado con el tamaño grande de escritorio -botones de 34px frente a un titulo de 10,5px-, asi que se salian por debajo y aterrizaban sobre la raya de subrayado. La fila se hace TAN ALTA COMO EL RENGLON del titulo y se centra en el con "align-items", en vez de ir ajustando un "top" a ojo: asi sigue cuadrando aunque cambie el tamaño del titulo. */ .cv-flechas { position: absolute; top: 0; right: 0; height: 1.4em; /* el renglon de .cv-titulo */ font-size: 10.5px; /* la medida del titulo, para ese "em" */ z-index: 3; display: flex; flex-direction: row; align-items: center; gap: 4px; } /* El titulo, fijo arriba mientras se desplaza el CV, y con hueco a su derecha para que las flechas no le pasen por encima */ .cv-titulo { position: sticky; top: 0; z-index: 2; background: var(--fondo); padding-right: 110px; } .cv-flechas.oculto { display: none; } .cv-flecha { background: none; border: none; /* Botones pequeños: tienen que caber en el renglon del titulo del apartado, junto al que van (ver .cv-flechas). Movil y tablet ya los achicaban por esto mismo; desde que en escritorio tambien van ahi (24-08-2026), la medida vale para todos. */ padding: 2px; /* GRIS OSCURO. Han ido bajando de tono a peticion suya: nacieron en var(--gris-claro) (#ccc), pasaron a var(--gris) (#777) el 22-08 y, al verlas en PC, pidio "flechas con numeros 1/5 mas oscuras" (25-08). Se quedan en el mismo tono que su nombre del About, que es el mas oscuro de la web. */ color: #2f2f2f; cursor: pointer; transition: color .2s ease, opacity .25s ease; } /* Solo se oscurece con raton de verdad (v5.91): en tactil, el ":hover" de abajo se quedaba pegado tras tocar -en vez de desaparecer al levantar el dedo, como pasaria con un raton- y una de las dos flechas se veia negra todo el rato (aviso de Alicia, 12-08-2026: "ahora hay una que se queda negro cuando clicas"; mismo motivo que el micro-zoom del mosaico, ver trabajos.css). */ @media (hover: hover) and (pointer: fine) { .cv-flecha:hover { color: var(--negro); } } .cv-flecha:focus-visible { outline: 1px solid var(--negro); outline-offset: 3px; } /* Girados un cuarto de vuelta: la V de "arriba" se convierte en flecha-izquierda y la de "abajo" en flecha-derecha, con una sola regla y sin dibujos nuevos. */ .cv-flecha svg { width: 15px; height: 15px; display: block; transform: rotate(-90deg); } .cv-flecha.apagada { opacity: .28; pointer-events: none; } /* El contador de apartados (1/4), entre las dos flechas. Mismo cambio que las flechas: un gris mas oscuro (peticion de Alicia, 22-08-2026). Aqui pasa de var(--gris) a var(--negro), que es el gris oscuro de los titulos, no un negro puro. */ .cv-contador { /* UN PUNTO MAS GRANDE Y MAS OSCURO (peticion de Alicia, 27-08-2026: "el 1/5 en version PC sigue viendose poco nitido; en negrita no quisiera ponerlo, supongo que con oscurecerlo es suficiente"). Se respeta lo de no ponerlo en negrita. Pero el color ya estaba en el tono mas oscuro de la web, asi que oscurecer mas era ir a negro puro, que la paleta evita a proposito; lo que si le faltaba era TAMAÑO: a 9px, un texto con tanto interletraje se lee lavado por fino, no por claro. Sube a 10,5px y se aprieta un poco el interletraje, que es lo que de verdad le da nitidez. */ font-size: 10.5px; letter-spacing: .06em; color: #2f2f2f; text-align: center; padding: 2px 0; } /* ============================================================ MOVIL, EN LAS DOS ORIENTACIONES (v5.71): la pagina vuelve a poder desplazarse aqui. "Cabe en una pantalla, sin desplazarse" (v5.45) funciona en escritorio, donde sobra alto de sobra, pero en un telefono -sobre todo en horizontal, donde la pantalla es muy baja- ese diseño se rompe: el hueco real para la presentacion y el CV se queda tan pequeño que su scroll INTERNO (dos cajitas separadas, cada una con su propio gesto) se queda con solo dos o tres lineas visibles, y el difuminado de abajo (pensado para insinuar "sigue mas texto") se come la mayor parte de lo poco que cabe: dentro de una cajita tan pequeña, DA LA SENSACION DE QUE FALTA INFORMACION aunque tecnicamente se pudiera hacer scroll (aviso de Alicia, 10-08-2026: "se ve horrible... no se ve la informacion", "mucho peor en horizontal"). Los dos criterios del media query cubren las dos formas en que un telefono se sale de lo previsto: max-width para uno normal en vertical, y max-height+landscape para uno ancho en horizontal (que por ancho pasaria por escritorio sin este segundo criterio: la mayoria de moviles en horizontal miden mas de 768px de ancho). AQUI SE QUITAN LOS DOS SCROLL INTERNOS (presentacion y CV) Y SU DIFUMINADO: cada bloque crece lo que necesite y es la PAGINA la que se desplaza, como en el resto de secciones. El CV seguia enseñando "un apartado cada vez" con sus flechas (eso SI seguia funcionando bien y Alicia lo pidio expresamente), pero las flechas dejan de ir centradas en vertical -no tendria sentido con una caja de alto libre- y pasan a una fila fija, pegada debajo del texto. */ /* Desde el 25-08-2026 esto cubre TAMBIEN a cualquier tablet en vertical (tercer criterio): Juan pidio que se vieran como la suya, en una sola columna. Ver el comentario largo en responsive.css. */ @media (max-width: 768px), (max-height: 480px) and (orientation: landscape), (hover: none) and (min-width: 600px) and (orientation: portrait) { /* El contenido arranca por debajo de la barra ENTERA (no a mitad de ella como en escritorio): aqui la barra tapa de verdad, ver la regla de nav de abajo, asi que si el contenido empezara antes su primera linea nunca llegaria a verse. */ #sobre { height: auto; min-height: 100dvh; overflow: visible; padding-top: var(--nav); } /* LA BARRA, OPACA AQUI (v5.74). El About la dejaba transparente -body.sin-marca en nav.css- porque en su diseño original la pagina no se desplazaba: nada podia pasar por detras de los iconos. Desde que si se desplaza en movil (v5.71), el texto del CV pasa por detras y se cruza con ellos. El halo blanco de los iconos (v5.73) los hace legibles, pero el TEXTO se sigue viendo pasar por detras y eso es lo que Alicia sigue viendo como un solape (10-08-2026: "los he subido y siguen solapando"). Con la barra opaca el texto desaparece limpiamente debajo, como en cualquier web con cabecera fija. Solo en movil: en escritorio el About sigue sin desplazarse y alli la barra transparente ("lienzo en blanco") se queda como estaba, que es lo que ella pidio en su dia. El !important es necesario: nav.css trae DOS reglas que ponen el fondo transparente (body.sin-marca y body.bajado, esta ultima al desplazarse) y las dos tienen mas especificidad que este selector de un solo elemento. */ body.sin-marca nav { background: var(--fondo) !important; } /* El pie de pagina (copyright + firma) NO debe salir en el About, ni en movil ni en escritorio (peticion de Alicia, 10-08-2026): aunque aqui ya sobra sitio para el pie -la pagina se desplaza-, se deja oculto igual que en escritorio, con la misma regla base de arriba (body.sin-marca .pie { display:none }). Nada que hacer aqui. */ .sobre-wrap { height: auto; grid-template-rows: auto auto auto; } .sobre-izq { overflow: visible; } .sobre-bio { overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; } .sobre-der { min-height: 0; } .sobre-cv { height: auto; overflow: visible; padding-right: 0; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; } /* Las flechas, ya no centradas a media altura de una caja libre: una fila fija debajo del apartado del CV, con el contador en medio -el mismo patron de "prev / 1de4 / next" de un carrusel movil. Esto es lo que queda para MOVIL EN HORIZONTAL (y como base para vertical, que lo afina mas abajo): la pagina entera crece con el apartado activo, sin caja de alto fijo. */ .cv-flechas { position: static; /* Anula el "translateY(-50%)" de escritorio (pensado para centrar la fila cuando iba position:absolute + top:50%): con position:static ese "top" ya no pinta nada, pero el transform en si seguia aplicandose iguid -un despiste, "-50%" de su propio alto, aqui unos 17px de mas separando la fila del CV-. */ transform: none; flex-direction: row; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; } } /* ============================================================ MOVIL EN VERTICAL, EL CV VUELVE A TENER ALTO FIJO Y FLECHAS IZQUIERDA/DERECHA (v5.90). Alicia probo el diseño de la v5.71 (la pagina entera crece con el apartado del CV activo) y aviso de un efecto secundario: al cambiar de apartado con las flechas, como cada uno mide distinto, LA PAGINA ENTERA DABA UN SALTO hacia arriba o abajo -su presentacion, quieta arriba, se desplazaba de sitio igualmente porque todo el documento cambiaba de alto-. Pidio expresamente lo contrario: "el texto se quede fijo arriba... evitar los saltos", con las flechas del CV YENDO DE IZQUIERDA A DERECHA en vez de arriba/abajo -asi no compite con el gesto de scroll vertical, que sigue sirviendo para leer un apartado largo-. La solucion es un HIBRIDO, no una vuelta completa a como estaba antes de la v5.71 (aquello fallaba en TELEFONOS EN HORIZONTAL, no en vertical, asi que aqui no hace falta tocar ese caso -sigue arriba, en el bloque de "las dos orientaciones"-): - .sobre-cv recupera un ALTO FIJO (en vh) con scroll INTERNO y su difuminado de abajo, como en escritorio: asi cambiar de apartado nunca cambia el alto de la pagina, solo lo que se ve DENTRO de esa caja. La presentacion de arriba, en su sitio, siempre. - Las flechas se mueven ARRIBA del CV (con "order", sin tocar el HTML) en vez de debajo: "junto al primer apartado... ya a la derecha se vea 1/5", visibles sin hacer scroll. - Los iconos, los MISMOS SVG de arriba/abajo (no hacen falta unos nuevos): un giro de 90 grados convierte la V de "arriba" en flecha-izquierda y la de "abajo" en flecha-derecha a la vez, con una sola regla. Se activa por "orientation:portrait" ademas del ancho, para no pisar el otro bloque en un telefono en horizontal (esos siguen igual que en la v5.71, con la pagina creciendo entera). */ /* Vale igual para una tablet en vertical (segundo criterio, 25-08-2026) */ @media (max-width: 768px) and (orientation: portrait), (hover: none) and (min-width: 600px) and (orientation: portrait) { /* HUECO BLANCO AL FINAL DE LA SECCION, para que el degradado del CV se vea como tal y no pegado al borde de la pantalla (ver el comentario de .sobre-cv, aqui debajo). VA CON "#sobre" DELANTE Y NO A SECAS, que es lo unico raro de esta regla: responsive.css se carga DESPUES que este archivo y alli el wrap lleva el padding en atajo -"padding: 6px 22px 22px"-, que a igualdad de especificidad gana por ir despues y se llevaba por delante este valor (medido: salia 22px en vez de 96). Con el id delante la especificidad sube y manda esta, sin tener que tocar aquella regla -que tambien vale para movil en horizontal, donde este hueco no hace falta-. */ #sobre .sobre-wrap { padding-bottom: 96px; } /* DEGRADADO FIJO AL BORDE DE LA PANTALLA. Aqui el About se desplaza como pagina, y en un movil no cabe entero: la presentacion ocupa casi toda la primera pantalla y el CV empieza justo debajo del borde. Alicia avisaba de que "no se ve el degradado" y de que "si aparece cuando deslizo con el dedo": lo que ella percibia cortado NO era la caja del CV -esa tiene su propio desvanecido, pero su borde inferior cae fuera de pantalla-, era el BORDE DE LA PANTALLA. Acortar la caja del CV no podia arreglarlo, y conviene dejarlo escrito para no volver a intentarlo: en su movil el CV arranca en el pixel 863 de una pantalla de 915, o sea que le quedan 52px visibles; para que el degradado de la caja entrara habria que dejarla en 52px, menos de lo que mide el propio degradado. Asi que se marca donde de verdad se corta. Mismo recurso y mismo motivo que en legal y privacy (ver el final de legal.css). Sin pointer-events, que por debajo se sigue desplazando. */ #sobre.active::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .75) 55%, var(--fondo) 100%); pointer-events: none; z-index: 5; } .sobre-der { /* v5.91 metia aqui un margin-top de 22px para separar el bloque flechas+CV del resumen ("que se note que las flechitas son para el CV"). Se quito en v5.92 al superponer las flechas sobre el titulo del CV -esa asociacion ya quedaba clara sin alejarlas del resumen-, dejando solo el gap de la rejilla (14px). Alicia pidio despues (14-08-2026) "un poco mas de espacio" entre los dos: no es por claridad de a quien pertenecen las flechas (eso ya lo resuelve la superposicion), es solo un respiro visual mayor entre bloques. */ /* Alicia volvio a pedir "un pelin mas" de aire aqui (21-08-2026): de los 12px anteriores (26px de hueco total, sumando el gap de 14px de la rejilla) a estos 20px (34px en total). */ margin-top: 20px; display: block; position: relative; /* ancla a las flechas, que van position:absolute */ } /* EL CV DEJA HUECO BLANCO POR DEBAJO (23-08-2026). Alicia pidio el degradado del punto 3 y despues aviso de que "no esta". SI estaba, pero no habia forma de verlo: con la caja a 44vh, su borde inferior -donde vive el degradado- caia 267px POR DEBAJO del borde de la pantalla al entrar en About, y al bajar del todo quedaba justo pegado a el, con lo que no se leia como un desvanecido sino como "la pantalla corta el texto", que es exactamente lo contrario de lo que ella queria transmitir. Se arregla por partida doble: la caja se recorta un poco (40vh) y la seccion reserva hueco de sobra por debajo (ver el padding-bottom del wrap, mas abajo), de modo que al llegar al final de la pagina SIEMPRE quede blanco despues del degradado. Asi se ve que el texto se desvanece a proposito. */ .sobre-cv { /* CAJA MAS CORTA (Alicia, 28-08-2026): "hay que acortar la caja de texto del CV expandido para que, sin necesidad de moverte con el dedo por la pagina, ya se vea el degradado y se intuya que el texto sigue". De 40vh a 30vh. OJO CON LO QUE ESTO ARREGLA Y LO QUE NO: acorta la caja, con lo que su borde inferior -donde vive el degradado- sube y entra en pantalla bastante antes. Pero el CV NO empieza donde la pantalla acaba: en un movil de 844px de alto arranca en el 881, o sea ya por debajo del pliegue, porque encima lleva la foto, el nombre y una presentacion de 515px. Mientras esa presentacion siga entera, ningun tamaño de esta caja la hace visible sin desplazar la pagina; lo unico que se puede hacer -y es lo que se hace- es que haga falta desplazar bastante menos. */ height: 30vh; overflow-y: auto; /* YA NO lleva padding-right grande: eso era para que NINGUN texto -tambien el cuerpo del CV- pasara por debajo de las flechas, pensado para cuando estas SI se desplazaban con el resto (v5.92). Desde que el titulo es fijo (ver .cv-titulo, mas abajo) las flechas solo tienen que convivir con ESA linea -que ya reserva su propio hueco-, y el cuerpo del CV puede usar todo el ancho (Alicia, 12-08-2026: "podemos ampliar mas hacia la derecha el texto y no ponerlo acortado como esta ahora"). */ /* EL DESVANECIDO DE ABAJO. Alicia pidio "un pelin de degradado hacia blanco... para que una persona, cuando lo este leyendo, sepa que tiene dos opciones: hacer scroll hacia abajo, o seguir con las flechitas". Ha ido creciendo: 22px al principio, 40 despues, y estos 72 ahora (23-08-2026), porque seguia sin apreciarse -"se ve una sola fila, la final" (Juan)-. EL PROBLEMA ERA EL TAMAÑO FRENTE AL INTERLINEADO: con 40px sobre renglones de ~20px solo entraban dos lineas en el degradado, y como la rampa empieza opaca, en la practica solo la ultima se veia tocada. Con 72px caen tres o cuatro renglones dentro. Y VA EN VARIOS TRAMOS, no en una rampa recta: una rampa lineal se pasa la primera mitad casi opaca, asi que el desvanecido no se empieza a notar hasta muy abajo. Con estos pasos intermedios el texto se va apagando de forma pareja desde el principio del degradado, que es lo que hace que se lea como un desvanecido y no como un corte. EL RELLENO DE ABAJO VA EMPAREJADO y siempre un poco mayor (76 frente a 72): es lo que hace que, al llegar al final del CV, la ultima linea de texto quede POR ENCIMA del desvanecido y se lea entera -lo que se difumina ahi es hueco vacio-. SI SE TOCA UNO, HAY QUE TOCAR EL OTRO. */ padding-bottom: 76px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), rgba(0,0,0,.82) calc(100% - 54px), rgba(0,0,0,.5) calc(100% - 36px), rgba(0,0,0,.2) calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), rgba(0,0,0,.82) calc(100% - 54px), rgba(0,0,0,.5) calc(100% - 36px), rgba(0,0,0,.2) calc(100% - 18px), transparent 100%); } /* EL TITULO DEL APARTADO, FIJO ARRIBA MIENTRAS SE HACE SCROLL (v5.94, peticion de Alicia: "tiene que ser fijo, siempre tiene que estar a la vista... sin que tape el titulo del apartado"). Antes el titulo era el primer elemento DENTRO del scroll, asi que en un apartado largo (p.ej. "Professional experience", con muchos clientes) desaparecia hacia arriba en cuanto se empezaba a leer. "position: sticky" lo deja fijo en la parte de arriba de su propio contenedor con scroll (.sobre-cv) sin tener que sacarlo del HTML de cada apartado ni duplicarlo: sigue siendo el primer hijo de .cv-bloque, solo que ahora "se pega" al llegar arriba en vez de seguir desplazandose con el resto. Necesita fondo solido (el mismo blanco de la pagina): sin el, el texto que va quedando debajo se veria pasar a traves suyo. El padding-right es SOLO para esta linea (ya no para todo el cuerpo): las flechas, ancladas al lado, necesitan que el titulo no les pase por debajo, pero el resto del CV no tiene por que estrecharse tambien. */ .cv-titulo { position: sticky; top: 0; z-index: 2; background: var(--fondo); padding-right: 100px; } /* LAS FLECHAS, SUPERPUESTAS A LA ALTURA DEL TITULO DEL APARTADO (v5.92): Alicia probo la v5.91 (una fila aparte, pegada encima del CV) y seguia sin convencerle -"todavia como volando"-, pidiendo que fueran "justo encima de la linea que subraya el primer apartado". Asi que en vez de una fila en el flujo normal, van ancladas (position:absolute) a la esquina superior derecha de .sobre-der. Con el titulo ahora fijo (sticky, ver arriba) esa esquina coincide SIEMPRE con el titulo visible, se haya hecho scroll o no. */ .cv-flechas { position: absolute; top: -18px; right: 0; z-index: 3; flex-direction: row; align-items: center; gap: 4px; } /* Botones mas pequeños SOLO AQUI: con el tamaño normal (34px) la fila se iba muy por debajo del renglon del titulo, aunque estuviera ariba del todo (ver "top" de arriba); asi caben en la misma altura de texto que "PROFESSIONAL EXPERIENCE" (Alicia, 12-08-2026: "debe aparecer en la misma linea... no por debajo"). */ .cv-flecha { padding: 2px; } .cv-flecha svg { width: 14px; height: 14px; transform: rotate(-90deg); } .cv-contador { font-size: 9px; } } /* ============================================================ MOVIL EN HORIZONTAL: dos columnas fijas, cada una con SU PROPIO scroll interno, y el titulo+flechas del CV fijos arriba (v5.97). Peticion de Alicia, 11-08-2026: "a la izquierda se quede fijo el texto... el CV de la derecha se pueda ver de arriba a abajo, pero cuando quieras pasar de apartado tengas arriba a la derecha (junto a EXPERIENCIA) las flechitas... asi el lector puede desplazarse de arriba a abajo y de izquierda a derecha en el CV". Esto es CASI escritorio (dos columnas, cada una con scroll propio si no cabe, como ya hacia .sobre-bio ahi) pero con el titulo+flechas del CV superpuestos y fijos, igual que en movil vertical (ver el bloque de arriba, "orientation:portrait"): se reutiliza la misma idea (position:sticky + flechas ancladas), solo que aqui las dos columnas siguen una al lado de la otra en vez de apiladas. OJO: esto pisa a proposito partes del bloque "MOVIL, EN LAS DOS ORIENTACIONES" de mas arriba (v5.71) -que para este mismo telefono en horizontal dejaba crecer la pagina entera y desplazarse ella sola-. Aquella solucion evitaba "la informacion se esconde" en pantallas muy bajas, pero Alicia ha pedido aqui explicitamente el planteamiento de dos columnas con scroll propio, so this vuelve a activarlo -con la ventaja de que el titulo del CV ya no roba sitio dentro del scroll, gracias al sticky, asi que hay mas hueco util que en la v5.70-. */ @media (max-height: 480px) and (orientation: landscape) { /* LA BARRA Y SUS ICONOS TAMBIEN SE ACHICAN AQUI (v5.99). No basta con recortar el hueco que le deja el contenido (el padding-top de #sobre, mas abajo): la barra es "position:fixed", mide var(--nav) de alto y en el About de movil lleva FONDO OPACO (ver el bloque de arriba, v5.74). Si el contenido sube por encima de esa altura, la barra le pasa por delante y lo tapa: eso es lo que hacia que "no se vea ni la foto de Alicia ni el titulo del apartado del curriculum" (Alicia, 13-08-2026, tras la v5.98, que solo habia tocado el padding). OJO CON LOS ICONOS, que es la trampa de este caso: un movil EN HORIZONTAL mide mas de 768px de ancho (812 el de Alicia), asi que NO entra en el @media de movil de nav.css/responsive.css y se queda con los tamaños de ESCRITORIO -iconos de 60px, --nav de 108px-. Por eso hay que achicarlos aqui expresamente: si no, no caben en una barra recortada y se salen por debajo, volviendo a tapar el contenido. */ body.sin-marca nav { height: 56px; padding-top: 6px; } body.sin-marca .nav-icon { width: 44px; height: 44px; } body.sin-marca .nav-icon svg { width: 26px; height: 26px; } #sobre { height: 100dvh; min-height: 0; overflow: hidden; /* Mismo alto que la barra de aqui arriba: el contenido arranca justo donde ella termina, sin hueco de sobra ni solape. Antes heredaba "padding-top: var(--nav)" del bloque general (v5.71): 92-108px en una pantalla con apenas ~200px utiles de alto -el navegador del movil se come el resto con su barra y sus pestañas- dejaban casi todo lo demas sin sitio ("muchisimo hueco en blanco por encima... apenas veo una linea [del resumen]", Alicia, 13-08-2026, con foto de su movil). */ padding-top: 56px; } .sobre-wrap { height: 100%; grid-template-rows: auto minmax(0, 1fr); } .sobre-izq { overflow: hidden; } /* La foto, mas pequeña SOLO AQUI: con su formula normal (27vh) se comia mas de un tercio del poco alto disponible en horizontal (101px de 375), dejando el resumen con sitio para dos lineas antes de necesitar scroll -la misma sensacion de "falta informacion" que ya se aviso en su dia, aunque aqui la solucion no es quitar el scroll (Alicia lo pidio esta vez), sino dejarle mas hueco util. */ .sobre-foto { width: min(72px, 16vh); margin-bottom: 6px; } /* La presentacion, con su propio scroll interno y desvanecido si no cabe entera -como en escritorio-, para que la foto/nombre/correo nunca se muevan de sitio (Alicia: "a la izquierda se quede fijo el texto"). */ /* LOS DOS DEGRADADOS, MAS AMPLIOS Y EN VARIOS TRAMOS (23-08-2026). Alicia avisa de que en el resumen (izquierda) SI se nota que el texto sigue, pero en el CV expandido (derecha) no se aprecia nada. Los dos llevaban el mismo valor (18px, una rampa recta): el mismo problema que ya se corrigio en movil vertical y tablet -con el interlineado de esta web (~19px), 18px apenas cubre un renglon, y una rampa recta se pasa la primera mitad casi opaca, asi que en la practica no se notaba en ninguno de los dos. Que en el resumen se llegara a percibir y en el CV no es cuestion de que el CV, al tener mucho mas texto, necesita scroll casi siempre -y por eso su degradado (igual de debil) se ve mas veces, aunque tan flojo como el otro-. Se ensanchan los dos IGUAL, a 36px en varios pasos (la mitad del degradado de movil vertical/tablet, ver mas abajo en este archivo: aqui el alto disponible es mucho menor -esta seccion mide como mucho ~480px de alto- y un degradado tan largo como aquel se comeria una parte enorme de lo poco que hay para leer). */ .sobre-bio { overflow-y: auto; padding-bottom: 40px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), rgba(0,0,0,.82) calc(100% - 27px), rgba(0,0,0,.5) calc(100% - 18px), rgba(0,0,0,.2) calc(100% - 9px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), rgba(0,0,0,.82) calc(100% - 27px), rgba(0,0,0,.5) calc(100% - 18px), rgba(0,0,0,.2) calc(100% - 9px), transparent 100%); } .sobre-der { min-height: 0; } .sobre-cv { height: 100%; overflow-y: auto; padding-bottom: 40px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), rgba(0,0,0,.82) calc(100% - 27px), rgba(0,0,0,.5) calc(100% - 18px), rgba(0,0,0,.2) calc(100% - 9px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), rgba(0,0,0,.82) calc(100% - 27px), rgba(0,0,0,.5) calc(100% - 18px), rgba(0,0,0,.2) calc(100% - 9px), transparent 100%); } .cv-titulo { position: sticky; top: 0; z-index: 2; background: var(--fondo); padding-right: 90px; } .cv-flechas { position: absolute; top: -16px; right: 0; z-index: 3; flex-direction: row; align-items: center; gap: 4px; } .cv-flecha { padding: 2px; } .cv-flecha svg { width: 13px; height: 13px; transform: rotate(-90deg); } .cv-contador { font-size: 9px; } } /* ============================================================ TABLET (v6.0). Hasta ahora una tablet caia en el diseño de ESCRITORIO: todas las reglas de movil van por ANCHO (max-width:768) y una tablet mide mas -820, 1024...-, asi que se quedaba con el About que no se desplaza, la presentacion con scroll interno y las flechas del CV a media altura. Alicia pidio para tablet lo mismo que ya tenia en movil (13-08-2026): "que el resumen de mi CV se viera a golpe de vista, sin tener que hacer scroll encima" y "que las flechitas y el numero 1/5 estuvieran a la derecha junto a EXPERIENCIA, por lo mismo que en movil". COMO SE RECONOCE UNA TABLET, que es lo unico delicado de este bloque: no por el ancho (se confunde con un escritorio) sino por el PUNTERO -"hover:none" = se toca con el dedo, no hay raton que pueda posarse-, ademas de ser ancha (min-width:769, para no pisar el movil) y no muy baja (min-height:481, para no pisar el movil EN HORIZONTAL, que ya tiene su propio bloque mas arriba y es tambien tactil y ancho). Se mantienen LAS DOS COLUMNAS -aqui sobra ancho para ellas, no hay por que apilarlas como en un telefono- y el CV va en caja con titulo fijo y flechas arriba a la derecha. LA PAGINA YA NO SE DESPLAZA AQUI (22-08-2026). La v6.0 dejo que se desplazara, y de ahi salieron dos quejas de Alicia que son el mismo problema visto dos veces: al bajar, la barra fija -opaca en esta seccion- le tapaba el retrato "como una franja blanca que lo va cortando" (21-08); y al tocar en cualquier punto, la pagina se deslizaba sola y esa misma franja acababa tapando el retrato y el titulo del CV (22-08). LO SEGUNDO LO PROVOCA EL NAVEGADOR, no la web: .sobre-cv lleva tabindex (para poder recorrerlo con el teclado), asi que al tocarlo recibe el foco y el navegador desplaza la pagina para enseñarlo entero. Por eso pasaba "al clicar en cualquier punto". Con la seccion clavada al alto de la pantalla no hay nada que desplazar y las dos quejas desaparecen de raiz, en vez de irse apañando una a una. Es ademas como funciona en escritorio desde la v5.45, y lo que buscaba el diseño original de esta seccion. La presentacion recupera su scroll interno DE SEGURIDAD, como en escritorio: con los tamaños del final de este bloque cabe entera en cualquier tablet normal -que es lo que Alicia pidio en la v6.0, "que el resumen se vea a golpe de vista"-, pero si alguna fuera muy baja es preferible poder desplazar ese texto a que se corte. */ /* SOLO EN HORIZONTAL desde el 25-08-2026 ("a 2 columnas solo en horizontal", Juan): en vertical una tablet es alta y estrecha, y dos columnas dejaban el CV en una tira muy angosta, asi que ahi pasa a una sola columna como el movil (ver responsive.css). */ @media (hover: none) and (min-width: 769px) and (min-height: 481px) and (orientation: landscape) { #sobre { height: 100vh; height: 100dvh; overflow: hidden; /* EL MISMO HUECO QUE EN ESCRITORIO, no el alto entero de la barra (23-08-2026). Se podia recortar en cuanto la seccion dejo de desplazarse: los iconos ocupan de 20px a 80px y aqui el contenido arranca en 88px (--nav vale 108 en tablet), asi que sigue quedando POR DEBAJO de ellos sin necesidad de reservarles la barra entera. Son 20px de mas para el resumen, que es lo que hace falta para que quepa de un vistazo -ver el bloque del final-. Ya NO hace falta la barra opaca que habia aqui (v6.0): existia porque el texto le pasaba por detras al desplazarse, y ahora no se desplaza nada. Quitarla ademas devuelve el "lienzo en blanco" que Alicia pidio en su dia para el About. */ padding-top: calc(var(--nav) - 20px); } /* LAS DOS COLUMNAS, IGUALES (peticion de Alicia, 22-08-2026: "mi CV expandido, a la derecha, sale mas corta la caja de texto que la de la izquierda... me gustaria que ocupe como el resumen"). En el resto de la web la izquierda pesa mas (48%), que es como lo pidio en su dia; en tablet, con bastante menos ancho, esa diferencia se notaba de mas. */ .sobre-wrap { height: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* LA PRESENTACION, DE UN GOLPE DE VISTA Y SIN DIFUMINAR (peticion de Alicia, 23-08-2026: "el efecto difuminado... me referia a tenerlo en el CV expandido, el bloque de la derecha; el de la izquierda, el resumen, quisiera recuperarlo verlo de un simple golpe de vista"). El difuminado es la señal de "aqui hay mas texto, sigue bajando", y en el resumen sobra justamente porque no debe haber mas texto que ver: tiene que caber entero. CONSERVA EL "overflow-y: auto" DE ESCRITORIO A PROPOSITO, como red de seguridad: con los tamaños del final de este bloque cabe entero en una tablet normal, pero si alguna fuera mas baja de lo previsto es preferible que ese texto se pueda desplazar a que se corte -la seccion entera va en "overflow: hidden"-. Mientras quepa, "auto" no enseña barra ni desplaza nada: se ve exactamente igual que si no lo llevara. */ /* EL RESUMEN, CON SU DEGRADADO DE VUELTA (25-08-2026). El 23-08 se le quito a peticion suya -"el difuminado me referia a tenerlo en el CV expandido; el resumen quisiera verlo de un simple golpe de vista"-, dando por hecho que con los tamaños de este bloque cabria entero y no haria falta. En su tablet no cabe: "el texto del resumen no se ve con degradado para indicar que continua (el del CV expandido si)". O sea que si se desplaza, y sin la señal no habia forma de saberlo. Se le pone el mismo degradado de 36px en tramos que ya llevan las dos columnas en movil horizontal, no el de 72 de PC: aqui la columna es bastante mas baja y uno tan largo se comeria buena parte de lo que hay para leer. NO SE VE SI EL TEXTO CABE: lo que se difumina entonces es el hueco vacio del relleno de abajo. Solo aparece cuando de verdad sobra texto, que es justo lo que ella queria saber. */ .sobre-bio { padding-bottom: 40px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), rgba(0,0,0,.82) calc(100% - 27px), rgba(0,0,0,.5) calc(100% - 18px), rgba(0,0,0,.2) calc(100% - 9px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), rgba(0,0,0,.82) calc(100% - 27px), rgba(0,0,0,.5) calc(100% - 18px), rgba(0,0,0,.2) calc(100% - 9px), transparent 100%); } .sobre-der { position: relative; } /* El CV ocupa todo el alto de su columna. Antes iba en 52vh, una medida pensada para cuando la pagina se desplazaba; ahora que no lo hace, puede llegar hasta abajo y se ven mas lineas de golpe. SU DIFUMINADO, EL MISMO QUE EN MOVIL VERTICAL (23-08-2026): 72px en varios tramos. Es AQUI donde Alicia lo queria -este es "el CV expandido"-, y los 22px que tenia no se leian como un desvanecido sino como un corte; ver el comentario largo del bloque de movil vertical, donde esta explicado por que hacen falta ese tamaño y esos tramos. El relleno de abajo va emparejado y siempre un poco mayor, para que la ultima linea del CV quede por encima del degradado y se pueda leer entera. */ .sobre-cv { height: 100%; overflow-y: auto; padding-right: 0; padding-bottom: 76px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), rgba(0,0,0,.82) calc(100% - 54px), rgba(0,0,0,.5) calc(100% - 36px), rgba(0,0,0,.2) calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), rgba(0,0,0,.82) calc(100% - 54px), rgba(0,0,0,.5) calc(100% - 36px), rgba(0,0,0,.2) calc(100% - 18px), transparent 100%); } /* Titulo fijo y flechas a su derecha, igual que en movil (ver el bloque de "orientation:portrait" mas arriba, donde esta explicado el porque de cada pieza). */ .cv-titulo { position: sticky; top: 0; z-index: 2; background: var(--fondo); padding-right: 100px; } .cv-flechas { position: absolute; top: 0; right: 0; z-index: 3; /* Anula el "translateY(-50%)" de escritorio (ver la regla base): con position:absolute ese transform SIGUE aplicandose y subia la fila media altura suya, descuadrandola del titulo. En movil no hacia falta repetirlo porque aquellos bloques ya lo anulan; una tablet no entra en ninguno de ellos. */ transform: none; flex-direction: row; align-items: center; gap: 4px; } .cv-flecha { padding: 2px; } .cv-flecha svg { width: 14px; height: 14px; transform: rotate(-90deg); } .cv-contador { font-size: 9px; } /* EL RETRATO Y EL RESUMEN, MAS CONTENIDOS QUE EN ESCRITORIO. Sus medidas de base van en clamp() pensando en una ventana de ordenador; en una tablet, mas estrecha, el resumen ocupaba tantas lineas que dejaba de caber de un vistazo y tenia que desplazarse por dentro. Con esto entra entero, que es lo que Alicia pidio en la v6.0 ("que el resumen de mi CV se viera a golpe de vista, sin tener que hacer scroll encima"), y de paso es lo que permite que la seccion quepa en la pantalla sin desplazarse -ver el comentario largo del principio de este bloque-. */ .sobre-foto { width: min(clamp(110px, 38%, 168px), 17vh); margin-bottom: 12px; } .sobre-lugar { margin-top: 8px; } .sobre-redes { margin-top: 10px; } .sobre-bio { margin-top: 12px; } /* EL TAMAÑO DEL RESUMEN, ATADO AL ALTO DE LA PANTALLA (23-08-2026). Antes era un 12,5px fijo y Alicia aviso de que en su tablet el resumen volvia a necesitar scroll: con una medida fija, que quepa o no depende de la tablet que sea, y hay bastante variedad de alturas. Con vh el texto se ajusta solo -mas pequeño en una tablet baja, sin pasar de 12,5px en una alta-, que es lo unico que hace que "se vea de un golpe de vista" se cumpla en todas y no solo en las que se probaron. Los topes del clamp evitan los dos extremos: nunca por debajo de 11px (ilegible) ni por encima de 12,5 (no cabria). */ .sobre-bio p { font-size: clamp(11px, 1.15vh, 12.5px); line-height: 1.5; } .sobre-bio p + p { margin-top: 0; } /* EL CV, DEL MISMO TAMAÑO QUE EL RESUMEN (peticion de Alicia, 24-08-2026: "el CV expandido tiene una tipografia mayor que la del resumen de mi CV; prefiero el tamaño de la izquierda"). El resumen de aqui arriba se achica con el alto de la pantalla, y el CV se habia quedado con los 13px de escritorio, asi que en tablet la columna de la derecha cantaba al lado de la izquierda. Se le da la MISMA formula, no un numero fijo, para que las dos sigan yendo acompasadas en cualquier tablet. */ .cv-que { font-size: clamp(11px, 1.15vh, 12.5px); } .cv-donde { font-size: clamp(10.5px, 1.1vh, 12px); } } /* ============================================================ LAS FLECHAS Y EL CONTADOR DEL CV, MAS MARCADOS EN LAS PANTALLAS PEQUEÑAS (23-08-2026). En la v7.3 se les puso un gris mas oscuro a todos por igual y Alicia aviso de que el cambio se notaba en el ordenador -"genial"- pero no en movil ni en tablet. EL MOTIVO NO ES EL COLOR, ES EL GROSOR: en esas tres versiones las flechas se dibujan a 13-14px en vez de a 22px, y como el trazo del SVG va en unidades de su viewBox (1,3 sobre 24), al encogerlas el trazo real baja a ~0,75px. Un trazo de menos de un pixel el navegador lo pinta difuminado entre pixeles, y eso se ve GRIS por mucho que el color sea oscuro. Por eso aqui se fija el grosor en pixeles de pantalla (stroke-width en CSS gana al atributo del SVG) ademas de subir el color al mas oscuro de la web. Un solo bloque con los tres criterios de siempre -movil (los dos sentidos), movil en horizontal y tablet- en vez de repetir lo mismo dentro de cada uno de ellos. Va al final del archivo a proposito: tiene la misma especificidad que las reglas de esos bloques, asi que necesita ir despues para ganarles. */ @media (max-width: 768px), (max-height: 480px) and (orientation: landscape), (hover: none) and (min-width: 769px) and (min-height: 481px) { .cv-flecha { color: var(--negro); } .cv-flecha svg { stroke-width: 2; } /* Del mismo tono que las flechas, que ya van en #2f2f2f (peticion de Alicia, 26-08-2026: "los numeros 1/5 oscurecerlos igual que las flechas"). Antes se quedaba en var(--negro), un punto mas claro. */ .cv-contador { font-size: 10px; color: #2f2f2f; font-weight: 500; } } /* ============================================================ TABLET EN VERTICAL: TODO EN UNA PANTALLA (25-08-2026). Aqui el About va en UNA COLUMNA, como en el movil (lo pidio Juan al ver la suya), pero con una diferencia importante: EN EL MOVIL LA PAGINA SE DESPLAZA y en una tablet no hace falta, porque sobra alto. POR QUE IMPORTA: el CV es una caja con su degradado abajo, la señal de "sigue el texto". Con la pagina desplazandose, esa caja empieza tan abajo que su borde inferior -donde vive el degradado- queda por debajo de lo que se ve al entrar. Medido en una tablet de 768x1024: se salia unos 60px. De ahi el aviso de Juan, dos veces: "no se ve el degradado, hay que hacer scroll para que se vea algo". LA SOLUCION NO ES UN NUMERO A OJO: la seccion se clava al alto de la pantalla y la fila del CV se lleva "lo que sobre" (el 1fr de la rejilla). Asi el CV termina SIEMPRE dentro de la pantalla, mida lo que mida la tablet y ocupe lo que ocupe el resumen, sin tener que acertar ninguna altura. El minmax(0,...) es imprescindible: sin el, una fila de rejilla no baja de lo que ocupa su contenido y el CV volveria a desbordar. */ @media (hover: none) and (min-width: 600px) and (orientation: portrait) { #sobre { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } .sobre-wrap { height: 100%; grid-template-rows: auto auto minmax(0, 1fr); } .sobre-der { min-height: 0; } /* El CV ocupa el hueco que le deja el resto, ni mas ni menos */ .sobre-cv { height: 100%; } /* Y el resumen recupera su red de seguridad: si en alguna tablet muy baja no cupiera, es preferible que se pueda desplazar por dentro a que se corte (la seccion va en overflow:hidden). */ .sobre-izq { overflow: hidden; } .sobre-bio { overflow-y: auto; } }