/* ═════════════════════════════════════════════════════════════════════════
* comun.css — lo que comparten las TRES páginas
*
* La cabecera y el menú son los mismos en `/`, `/experience/` y `/resume/`,
* pero cada página carga su propia hoja (`portada.css`, `experiencia.css`,
* `resume.css`) y ninguna de las tres las carga todas. Sin un sitio común, un
* arreglo de cabecera había que escribirlo tres veces y mantenerlo tres veces.
*
* Aquí va solo eso: cabecera, menú y lo que sea de las tres. Lo propio de cada
* página se queda en su hoja.
*
* El `` de 969 px de alto. Ningún navegador
* móvil lo pinta: Safari y Chrome de Android no tienen visor de PDF
* incrustado, así que lo que se ve es un rectángulo negro de casi mil
* píxeles y debajo, nada. Se oculta en móvil y punto: los botones de
* descarga siguen ahí y hacen lo mismo.
* 2. **Todo pegado al borde.** El título y los enlaces salían en x=0, sin un
* milímetro de margen. El resto del sitio usa 16 px.
* 3. **Los tres enlaces amontonados** en dos filas desiguales, mezclando un
* enlace de texto con dos botones. Pasan a ocupar el ancho completo, uno
* por línea y en orden de uso.
* ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.pagina-cv .wp-block-file__embed {
display: none !important;
}
.pagina-cv .cv-descargas {
flex-direction: column;
align-items: stretch;
gap: .75rem;
padding: 0 16px;
}
.pagina-cv .cv-descargas a {
box-sizing: border-box;
width: 100%;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* El enlace de ver en línea, el último: en un teléfono lo que se quiere es
* el fichero, no abrirlo en una pestaña. */
.pagina-cv .cv-descargas a:not(.wp-block-file__button) {
order: 3;
}
/* El título, con el mismo margen que los botones. */
.pagina-cv #resume {
padding-left: 16px;
padding-right: 16px;
}
}
/* El botón principal de descarga, con el azul del sitio.
*
* WordPress lo pinta gris, igual que el secundario, así que los dos pesaban lo
* mismo y no se veía cuál era el que tocaba pulsar. Mismo degradado y mismo
* halo que `.pf-enlace--principal` y `.cv-boton`, con los colores sacados de la
* fotografía del hero. */
.cv-descargas .wp-block-file__button:not(.cv-otro-idioma) {
background: linear-gradient(180deg, #3a86df, #2761b4) !important;
border: 1px solid #4a90e6;
color: #fff !important;
font-weight: 600;
box-shadow: 0 8px 20px -10px rgba(47, 127, 212, .8);
}
.cv-descargas .wp-block-file__button:not(.cv-otro-idioma):hover,
.cv-descargas .wp-block-file__button:not(.cv-otro-idioma):focus-visible {
background: linear-gradient(180deg, #4a93ea, #2f6cc4) !important;
border-color: #7fb6ff;
}
/* ═════════════════════════════════════════════════════════════════════════
* La banda con la foto, arriba de /experiencia/ y /curriculum/
*
* Las dos páginas eran tipografía sobre negro y nada más: no tenían un solo
* elemento que las conectara con la portada, y se leían como un documento
* pegado, no como parte del sitio.
*
* La banda usa **la misma foto del hero**, ya cargada y en caché desde la
* portada, así que no cuesta ni una petición más. Se recorta a una franja baja
* —justo lo que en la portada no se puede hacer— porque aquí no importa que
* salga la persona: lo que se quiere es el pasillo de racks como textura.
*
* `-72px` de margen superior: la banda se mete por debajo de la cabecera del
* sitio, que es transparente sobre la foto igual que en la portada. Sin eso
* quedaría una franja negra entre el menú y la imagen.
* ═════════════════════════════════════════════════════════════════════════ */
.pg-banda {
position: relative;
/* Sin esto el padding lateral se SUMA al `width: 100vw` y la banda mide más
* que la pantalla. En /experiencia/ no se notaba porque su contenedor ya
* hereda `border-box`; en /curriculum/ la banda salía de 1648 px en una
* ventana de 1440, se desbordaba, y `cover` escalaba la foto sobre ese
* ancho falso: por eso el recorte no coincidía entre las dos páginas. */
box-sizing: border-box;
margin: 0 0 2.25rem;
/* El alto manda sobre el zoom, y no es una preferencia: la foto se escala
* al ancho de la pantalla, así que en una banda fija se ve una franja tanto
* más estrecha cuanto más ancha es la ventana. Medido:
*
* móvil 390 px -> foto a 390x262, banda 143 = 55 % del alto
* escritorio 1440 -> foto a 1440x966, banda 156 = 16 %
*
* Por eso en móvil se ve de la frente a la nuez y en escritorio solo los
* ojos. Para igualar el 55 % a 1440 la banda tendría que medir **528 px**,
* y a 1920, **704** — eso ya no es una banda, es otro hero.
*
* `24vw` acotado deja el zoom constante y la banda en un tamaño razonable:
* 307 px a 1280, 346 a 1440 y 400 a partir de 1667. Sube del 16 % al 33-36 %
* del alto de la foto, que es de la frente a la boca.
*
* Si se quiere más zoom, se sube el `24vw`. Es el único número. */
padding: 3.5rem 0 2rem;
background-image: image-set(
url("/img/hero-2528.avif") type("image/avif") 2x,
url("/img/hero-1264.avif") type("image/avif") 1x,
url("/img/hero-2528.webp") type("image/webp") 2x,
url("/img/hero-1264.webp") type("image/webp") 1x
);
background-size: cover;
/* 38 % en vertical: la franja de racks iluminados, sin la cara. Aquí la
* persona sobra —ya está en la portada— y lo que aporta es la textura. */
/* 27 % en vertical: la franja cae **a la altura de los ojos**.
*
* No es un número a ojo. La banda mide 156 px y la foto, escalada a lo
* ancho de la pantalla, 966: o sea que solo se ve el 16 % de su alto. Con
* `background-position-y: P%` la ventana visible arranca en `P x (966-156)`
* y los ojos están en el 31 % de la imagen, así que para centrarlos:
*
* P x 0,8385 + 0,0807 = 0,31 -> P = 27 %
*
* Con 38 % o 45 % la franja caía a la altura de la nariz. */
/* El encuadre de ESCRITORIO, el de siempre: 27 % deja la franja a la
* altura de los ojos. El móvil lo cambia más abajo, porque allí la foto se
* escala hacia abajo y la banda abarca el 55 % de su alto en vez del 16 %. */
background-position: center 27%;
background-repeat: no-repeat;
}
/* Un velo oscuro para que el texto se lea sobre cualquier parte de la foto, y
* para que la banda no compita con el contenido que viene debajo. */
.pg-banda::after {
content: "";
position: absolute;
inset: 0;
/* Velo UNIFORME, no en degradado.
*
* Estaba en degradado de izquierda a derecha —93 % de opacidad a la
* izquierda y 34 % a la derecha— para que el título se leyera sobre la zona
* oscura. El problema: **la cara cae justo en la parte clara**, así que todo
* el pasillo salía oscurecido y ella no. Se veía como pegada encima, con un
* efecto de recorte muy pobre.
*
* Con una opacidad igual en toda la banda, la cara se oscurece lo mismo que
* el resto y la imagen vuelve a ser una sola. El título sigue leyéndose: es
* blanco sobre un fondo al 62 %, y ahí donde cae la foto ya es oscura. */
background: rgba(10, 12, 17, .62);
}
.wp-block-kubio-section:has(> * > .pg-banda),
.wp-block-kubio-section:has(> * > * > .pg-banda) {
padding-top: 0 !important;
}
.pg-banda__contenido {
position: relative;
z-index: 1;
}
/* El título se lee por su propia sombra, no oscureciendo media foto.
*
* Antes el contraste lo daba el velo en degradado, y eso era lo que dejaba la
* cara sin oscurecer. Con el velo uniforme el texto cae sobre las luces del
* pasillo, así que necesita ayuda propia: una sombra difusa, que se nota
* mucho menos que un rectángulo oscuro y no toca la imagen. */
.pg-banda__contenido h1,
.pg-banda__contenido p {
text-shadow: 0 2px 12px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9);
}
/* La banda va a sangre: rompe el ancho del contenedor para tocar los dos
* bordes de la pantalla, que es lo que la hace parecer una banda y no una caja.
* `50vw` desde el centro es el truco estándar y no necesita saber el ancho del
* contenedor. */
.pg-banda {
width: 100vw;
margin-left: 50%;
transform: translateX(-50vw);
/* La banda arranca justo debajo del menú. En vez de subirla con un margen
* negativo fijo —64 px medidos en escritorio, que en móvil dejaban la banda
* en y=6 en /experiencia/ y en **y=-24** en /curriculum/, fuera de la
* pantalla—, se le quita el relleno superior a la sección que la contiene.
*
* `:has()` es lo que permite hacerlo sin saber en qué página estamos: cada
* una tiene su propia sección con su propio relleno. Donde no esté
* soportado, la banda cae unos píxeles más abajo y no pasa nada más. */
margin-top: 0;
padding-left: max(16px, calc(50vw - 616px));
padding-right: max(16px, calc(50vw - 616px));
}
/* En móvil se queda con `cover`: ahí la imagen se escala HACIA ABAJO (390 px de
* ancho contra 1264 de la original), así que la banda ya abarca el 55 % de su
* alto sin hacer nada. */
@media (max-width: 767px) {
.pg-banda {
background-size: cover;
/* 15 % y no 27 %: aquí la banda abarca el 55 % del alto de la foto, así
* que la ventana va del 7 % al 61 % — del nacimiento del pelo a por
* debajo de la nuez. Con 27 % empezaba en el 12 % y cortaba la frente. */
background-position: center 15%;
margin-bottom: 1.5rem;
padding-top: 2.5rem;
padding-bottom: 1.5rem;
}
}
/* En móvil la banda se sale por la derecha en /curriculum/: su contenedor
* (`.cv`) tiene 16 px de relleno lateral y el truco de `100vw` + `50%` cuenta
* desde el borde INTERIOR, así que la banda acaba desplazada y la página mide
* 422 px en una pantalla de 390.
*
* Aquí no hace falta `vw`: basta con anular el relleno del padre con márgenes
* negativos. Es aritmética local y no depende de dónde empiece el contenedor.
*/
@media (max-width: 767px) {
.pg-banda {
width: auto;
margin-left: -16px;
margin-right: -16px;
transform: none;
padding-left: 16px;
padding-right: 16px;
}
}
/* ═════════════════════════════════════════════════════════════════════════
* El nombre de la cabecera = el enlace a la portada
*
* Sustituye a la entrada «Inicio»/«Home» del menú. Es la convención de toda la
* vida —pulsar el nombre te lleva al inicio— y de paso llena el lado izquierdo
* de la barra, que estaba **vacío**: el único bloque de logo que trae Kubio
* está dentro del cajón del menú móvil, no en la cabecera.
*
* Va posicionado y no en el flujo porque la barra de Kubio alinea su contenido
* a la derecha con una cadena de contenedores flex; meterse ahí a empujar cosas
* es frágil. Anclado a la izquierda no depende de esa cadena.
*
* El margen lateral sale de la misma fórmula que la rejilla del sitio
* (1232 px centrados), para que el nombre caiga en la misma vertical que el
* texto de debajo.
* ═════════════════════════════════════════════════════════════════════════ */
/* **NO poner aquí `position: relative`.** Estuvo, para que la marca se anclara
* a la barra de navegación, y era el motivo de que el botón de menú siguiera
* descolocado en móvil: esta regla usa `#kubio` (especificidad 1,1,0) y la que
* saca la barra del flujo en móvil solo usa clases (0,3,0), así que perdía. Las
* media queries **no suman especificidad**: una regla dentro de un `@media` no
* gana por estar ahí.
*
* La marca se ancla a la cabecera, que es lo que no cambia de posicionamiento.
*/
#kubio .wp-site-blocks > .wp-block-kubio-header {
position: relative;
}
.pg-marca {
position: absolute;
left: max(16px, calc(50vw - 616px));
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 38px;
min-height: 32px;
padding: 4px 8px;
/* 50 y no 5: la barra de navegación es hermana de la marca y no crea
* contexto de apilamiento propio, así que sus descendientes —que sí llevan
* `z-index`— compiten directamente con ella y la tapaban. Comprobado con
* `elementFromPoint`: en el punto donde debía estar la marca respondía un
* contenedor de Kubio. */
z-index: 50;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 3px;
color: rgba(255, 255, 255, .85) !important;
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
line-height: 1;
text-decoration: none !important;
transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.pg-marca:hover,
.pg-marca:focus-visible {
border-color: #4a90e6;
background: rgba(47, 127, 212, .18);
color: #fff !important;
}
.pg-marca:focus-visible {
outline: 2px solid #7fb6ff;
outline-offset: 3px;
}
/* En móvil la cabecera es una sola línea de 30 px con los iconos y el botón de
* menú a la derecha. El nombre entra a la izquierda, más pequeño, y se corta
* con puntos suspensivos si no cupiera: antes que desbordar, que se lea a
* medias. */
@media (max-width: 767px) {
.pg-marca {
left: 16px;
right: auto;
max-width: 45%;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 30px;
font-size: .875rem;
}
}
/* ═════════════════════════════════════════════════════════════════════════
* MÓVIL: la cabecera, en una sola línea (las seis páginas)
*
* Kubio la parte en dos: una barra superior de 30 px con los iconos de contacto
* y, debajo, una sección de navegación de 84 px que **solo contiene el botón de
* menú**. Sobre la foto eso se veía como un símbolo flotando en medio de un
* hueco vacío, y se llevaba 114 px de alto en total.
*
* La sección de navegación se saca del flujo y se coloca a la altura de la
* barra de iconos, al final de la fila. La cabecera pasa a medir 30 px.
*
* `!important` en el ancho porque Kubio se lo fija al 100 %: sin eso, aunque
* esté posicionada, sigue ocupando toda la línea y no se puede alinear con los
* iconos.
* ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.wp-site-blocks > .wp-block-kubio-header {
height: 30px;
}
/* `#kubio` para ganarle a las reglas generadas de Kubio, que declaran este
* elemento con id + clase. */
#kubio .wp-site-blocks > .wp-block-kubio-header .wp-block-kubio-navigation-section {
position: absolute;
top: 0;
right: 0;
width: auto !important;
min-height: 0 !important;
padding: 0 !important;
/* La barra medía 52 px dentro de una cabecera de 30, así que centraba
* su contenido sobre la altura equivocada y el botón caía 10 px por
* debajo: medido, el botón en 3..47 con el centro en 25, cuando el de
* la cabecera está en 15. De ahí que se viera descolgado. */
height: 30px;
display: flex;
align-items: center;
}
/* Los iconos dejan hueco a la derecha para que la hamburguesa no se les
* monte encima: 44 px del botón más un respiro. */
.wp-site-blocks > .wp-block-kubio-header .wp-block-kubio-navigation-top-bar {
padding-right: 52px;
}
/* El botón, centrado en los 30 px de la barra. Crece hacia arriba y hacia
* abajo con margen negativo: mantiene los 44 px de zona tocable sin que la
* cabecera vuelva a crecer. */
#kubio .wp-block-kubio-menu-offscreen__iconWrapper,
#kubio button[aria-label="Mobile Menu"] {
margin: -7px 0;
}
}
/* En móvil el nombre NO va en la cabecera.
*
* Se probó y no cabe: en una barra de 30 px y 390 de ancho hay que meter el
* nombre (~110 px), cuatro iconos de contacto (120), el selector de idioma (34)
* y el botón de menú (44). Sumado con sus huecos se pasa del ancho, los iconos
* se salían y el nombre acababa montado sobre la banda de la foto.
*
* Y no hace falta: **el cajón del menú ya lleva el nombre enlazando a la
* portada**, arriba del todo. Es el bloque de logo que trae Kubio, que siempre
* estuvo ahí. En móvil se vuelve al inicio por el menú, que es donde se busca.
*/
/* En móvil el monograma **sí** aparece: dos letras caben en la barra de 30 px
* donde el nombre completo no cabía. Se ancla a la cabecera, que en móvil mide
* esos 30 px, y los iconos le dejan sitio por la izquierda. */
@media (max-width: 767px) {
.pg-marca {
left: 12px;
min-width: 34px;
min-height: 24px;
padding: 3px 6px;
font-size: 12px;
}
.wp-site-blocks > .wp-block-kubio-header .wp-block-kubio-navigation-top-bar {
padding-left: 56px;
}
}
/* El nombre que encabeza el cajón del menú, alineado con las entradas.
*
* Kubio lo centra, así que quedaba descolgado sobre «Inicio», «Experiencia» y
* «Currículum», que van alineadas a la izquierda. Medido: el nombre en x=100 y
* las entradas en x=90.
*
* Se queda como título del cajón —dice de quién es el sitio— pero ya no compite
* con las entradas: a la izquierda, en la misma vertical, y algo más apagado
* para que se lea como encabezado y no como una opción más.
*/
#kubio .wp-block-kubio-menu-offscreen__offscreen .wp-block-kubio-logo__container {
justify-content: flex-start;
padding-left: 0;
}
/* Las entradas del menú arrancan en x=90, que es el borde del contenedor del
* cajón. El bloque del nombre cuelga de un contenedor con 10 px de relleno
* propio, así que empieza en 100. Se compensan esos 10 y quedan en la misma
* vertical. (Con `padding-left: 90px` se iba a 190: el relleno se sumaba al que
* ya había en vez de sustituirlo.) */
#kubio .wp-block-kubio-menu-offscreen__offscreen
.wp-block-kubio-column__align:has(> .wp-block-kubio-logo__container) {
text-align: left;
margin-left: -10px;
}
#kubio .wp-block-kubio-menu-offscreen__offscreen .wp-block-kubio-logo__text {
font-size: 15px;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
/* ── El texto de la banda en móvil ────────────────────────────────────────
*
* Pesaba demasiado para lo que es: el título a 30 px y el subtítulo partido en
* dos líneas se comían casi toda la banda de 143 px, y encima quedaban lejos
* del borde inferior de la foto.
*
* El subtítulo baja a 13 px porque a 15 no cabe en una línea: «Administrador de
* sistemas Linux | Ciberseguridad» son 48 caracteres y el ancho útil a 390 px
* es de 358. Es el mismo techo que ya se midió para el titular de la portada.
* ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.pg-banda {
/* La altura se fija: si dependiera del texto, al reducirlo la banda se
* encogía de 143 a 108 px y con ella el recorte de la foto, que pasaba
* del 55 % al 41 % de su alto. El encuadre no puede depender de lo
* largo que sea un título. */
min-height: 143px;
box-sizing: border-box;
display: flex;
align-items: flex-end;
padding-top: 3rem;
padding-bottom: .85rem;
}
.pg-banda .xp-titulo,
.pg-banda .cv-titulo {
font-size: 1.5rem;
margin-bottom: .15rem;
}
.pg-banda .xp-subtitulo,
.pg-banda .cv-puesto {
font-size: 13px;
line-height: 1.35;
margin: 0;
}
}