@media (min-width:992px) {
.footer {
padding-bottom: 25px
}
}
/* --- RESPONSIVE: 2 BREAKPOINTS (>=992px escritorio / <=991px apilado) --- */
/* Pedido explícito: consolidar el responsive a solo 2 breakpoints — por
debajo de 992px, todo debe verse apilado en una sola columna, igual que
HOY se ve por debajo de 768px (no lado a lado, como se ve hoy entre
768-991px). Bootstrap activa sus columnas .col-sm-* a partir de 768px
por su propio CSS (viene del CDN, no se puede cambiar ese breakpoint
desde aquí) — así que, sin este override, entre 768px y 991px las
columnas quedarían lado a lado. Se fuerzan de vuelta a 100% de ancho
(apiladas) en todo ese rango, para que el corte quede único en 992px.
Corrección de seguimiento (reportado por el usuario): el corte se eligió
primero en 989/990px, pero el header/#size-panel (ver más abajo) siempre
estuvieron gateados en el propio 992px de Bootstrap (su breakpoint natural
sm→md) — eso dejaba un hueco real en 990-991px donde la distribución ya
se veía "de escritorio" pero el header/panel seguían en modo mobile. Se
unificó TODO a 991/992 (el breakpoint que Bootstrap ya usa internamente)
en vez de inventar un tercer valor, así no vuelve a haber huecos.
Solo se listan las clases que realmente se usan en el sitio (col-sm-4/6/8
y su offset-2), no las 12 posibles de Bootstrap. */
@media (max-width: 991px) {
.col-sm-4,
.col-sm-6,
.col-sm-8 {
width: 100%;
float: none;
}
.col-sm-offset-2 {
margin-left: 0;
}
}
/* Pedido explícito: el botón "subir arriba" con bordes redondeados (antes
border-radius:0 de theme.css) y el ícono más visible — a 11px (heredado
del font-size del botón) el icon-arrow-up quedaba diminuto dentro de un
botón de 40x40px. */
.back-to-top {
border-radius: 10px;
}
.back-to-top i {
font-size: 20px;
}
@media (max-width: 991px) {
.text-copy {
font-size: 11px;
padding-left: 15px
}
.promo-block {
padding-top: 80px !important
}
.promo-block-title {
font-size: 50px !important;
}
.promo-block-text {
font-size: 20px !important
}
}
/* Pedido explícito: "Ronal Coello" y "Tech Lead & Digital Product Manager"
más pequeños en menos de 510px (por debajo del tamaño que ya bajan a
50px/20px en el bloque de arriba, <=991px). .promo-block .title-tag (2
clases) en vez de .title-tag solo — la regla base más abajo en el
archivo (línea ~550) también es 1 clase + !important, y con igual
especificidad gana la que aparece después en el archivo; 2 clases la
supera sin depender del orden. */
@media (max-width: 510px) {
.promo-block-title {
font-size: 36px !important;
}
.promo-block-text {
font-size: 16px !important;
}
.promo-block .title-tag {
font-size: 14px !important;
}
}
.promo-block-title {
margin: 0 !important;
}
#experience .container.content-lg{
margin-top: 60px;
}
/* Pedido explícito: las 4 tarjetas de servicio de #experience quedan a la
misma altura. El tema original trae un mecanismo jQuery para esto
(.bg-color-sky-light[data-auto-height] mide la .service[data-height] más
alta de las 4 y les fija esa altura por JS al cargar) pero se verificó con
Chrome headless que en la práctica NO está igualando las 4 alturas
(266/276/286/286px medidos) — probablemente por timing: la medición corre
en document.ready, antes de que carguen las fuentes web (Hind) y con
#experience dentro de un contenedor position:fixed/opacity:0 por defecto
(nuestro mecanismo .section-active), lo que puede alterar cuándo jQuery
puede medir el alto real. En vez de depurar esa cadena de timing, se
igualan las alturas con flexbox (robusto, sin depender de mediciones en
un momento específico): la fila pasa a flex y cada columna estira su
.service a la altura del más alto automáticamente.
De paso se encontró y limpió un bug real: la 2ª tarjeta tenía un
style="visibility:hidden;height:275.797px" pegado en el HTML — residuo de
una captura de estado de WOW.js guardada por error como marcado estático
(WOW.js usa ese inline style de forma temporal, antes de animar la
entrada). Al vivir dentro de un contenedor fixed/opacity controlado por
nuestro propio JS, el trigger de scroll de WOW.js podía no dispararse
nunca y esa tarjeta quedaba invisible para siempre — se quitó el
`style` inline (ver index.html).
Los bordes redondeados solo en los extremos exteriores (primer item:
esquinas izquierdas; último: esquinas derechas) hacen que las 4 tarjetas
adyacentes se lean como un solo panel continuo — solo tiene sentido en
una fila, que con col-md-3×4 = 12 columnas ocurre únicamente desde el
breakpoint md (>=992px); por debajo cae a col-sm-6 (2 por fila, 2 filas)
y no aplica. */
@media (min-width: 992px) {
/* Pedido/bug relacionado (ver js/main.js, equalizeExperienceCardHeights):
con display:flex, la tarjeta "Desarrollador Full Stack" (única con
un en vez de un de fuente de ícono) se
quedaba 10-20px más baja que las otras 3 pese a align-items:stretch
— confirmado con Chrome headless que el bug sigue al CONTENIDO
(intercambiar el contenido entre tarjetas mueve el problema con él)
y que forzar la altura a mano SÍ funciona (no hay ningún max-height
escondido), así que es específicamente el cálculo de stretch de
flexbox el que no se aplica bien a un item con un elemento con
relación de aspecto intrínseca adentro — ni align-items:stretch
explícito, ni align-self:stretch en el item, ni fijar dimensiones
en el lo resolvían. display:grid (probado como alternativa)
tampoco sirvió: interactúa mal con el margen negativo de
.row-space-2 (el truco de gutter de Bootstrap) y hace que un item
salte a una fila implícita nueva. La igualación de alturas se
resolvió en JS (medir y aplicar la más alta a las 4, ver
js/main.js) — el flexbox de abajo queda solo para la distribución
en columnas, sin depender de su stretch para la altura. */
#experience .row-space-2 {
display: flex;
}
/* width:25%/flex-shrink:1 pisan a swiper.css: sus tarjetas ahora
también llevan la clase .swiper-slide (para funcionar como carrusel
en <=991px, ver js/main.js), y swiper.css trae una regla base
.swiper-slide{width:100%;flex-shrink:0} sin ningún media query — sin
este override, en escritorio las 4 tarjetas intentaban ocupar 100%
del ancho cada una y se desbordaban una tras otra en vez de ocupar
1/4 de la fila. Este selector (id + 2 clases + combinador) ya le
gana en especificidad a la regla de swiper.css (una sola clase). */
#experience .row-space-2 > .col-md-3 {
display: flex;
width: 25%;
flex-shrink: 1;
}
#experience .row-space-2 > .col-md-3 .service {
width: 100%;
}
#experience .row-space-2 > .col-md-3:first-child .service {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
#experience .row-space-2 > .col-md-3:last-child .service {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
}
/* Pedido explícito: los paneles blancos de #experience (.service) pasan a
fondo blanco con 0.5 de transparencia (antes #fff sólido de theme.css).
La tarjeta celeste ("Aceleración Responsable con IA", .service.bg-color-
base) no es un panel blanco — su fondo usa !important en theme.css y
sigue ganando, esta regla no la afecta. */
#experience .service {
background: rgba(255, 255, 255, 0.5);
}
/* Pedido explícito: el botón "Descarga mi CV" con fondo blanco 0.5 de
opacidad en su estado normal (antes #f3f4f5 sólido de theme.css).
Bug encontrado y corregido (reportado por el usuario: "perdió el hover
celeste que tenía antes"): el selector de abajo tiene un ID (#about),
que le gana en especificidad a .btn-default-bg:hover de theme.css (2
clases) aunque ese selector no incluya :hover — un ID siempre le gana a
cualquier cantidad de clases, así que sin una regla :hover propia, el
fondo rgba se quedaba puesto incluso en hover. Se agrega la regla :hover
explícita, con la misma especificidad (id+clase+pseudo-clase), para que
vuelva a pasar a celeste sólido igual que antes. */
#about .btn-default-bg {
background: rgba(255, 255, 255, 0.5);
}
#about .btn-default-bg:hover {
background: #17bed2;
color: #fff;
}
#work .container.content-lg{
margin-top: 20px;
width : calc(100% - 40px);
}
#contact .container.content-lg{
max-width: 770px;
padding-top: 140px !important;
}
/* Pedido explícito: logos + contacto + copy (fusionados en #contact) más
integrados, con menos espacio entre los logos y el contenido/copy — el
content-lg original de theme.css (100px arriba/abajo) se reduce en todo
este bloque. */
#contact .content-lg {
padding-top: 40px;
padding-bottom: 40px;
}
.promo-block .maw{
width : 1000px !important;
max-width: 96%;
}
@media (min-width: 992px) {
/* Pedido explícito: invertido — antes empujaba la columna de texto hacia
el centro/la foto (que estaba a la derecha); ahora que la foto pasa a
la izquierda y el texto a la derecha, el mismo empuje "hacia la foto"
se logra invirtiendo los márgenes. */
.promo-block .data-m {
margin-left: -70px;
margin-right: 70px;
}
}
.grecaptcha-badge {
display: none !important
}
@media (max-width:1070px) {
.container {
padding-left: 35px !important;
padding-right: 35px !important
}
}
.content.container {
padding-top: 20px;
padding-bottom: 20px
}
.navbar-toggle {
margin-right: -55px !important
}
.swiper-clients-img {
width: 190px !important;
max-width: 100%;
}
/* Pedido explícito: los items del carrusel de logos con ancho fijo y
separación fija — !important porque Swiper (slidesPerView numérico)
asigna width/marginRight por JS vía inline style; una regla !important
en el stylesheet gana sobre ese inline style no-important. */
.swiper-clients .swiper-slide {
width: 150px !important;
margin-right: 15px !important;
}
@media (max-width: 991px) {
.item-1 {
order: 1
}
.item-2 {
order: 0
}
.dflex {
display: flex;
flex-direction: column
}
/* Pedido explícito: la imagen de #about con max-width:380px en
responsive (en este rango sigue en flujo normal, no fixed — eso
solo aplica desde 992px, ver más abajo). Centrada porque en mobile
la columna ocupa el 100% del ancho apilada. */
#about .item-1 img.full-width {
max-width: 380px;
margin: 0 auto;
display: block;
}
.content-lg {
padding-bottom: 40px !important;
padding-top: 40px !important;
}
#about .content-lg{
padding-top: 60px !important;
padding-left: 35px !important;
padding-right: 35px !important
}
#experience .content-lg{
padding-left: 15px !important;
padding-right: 15px !important
}
#work .content-lg{
padding-left: 0 !important;
padding-right: 0px !important
}
.content-lg.image {
padding-bottom: 0 !important
}
}
/* Pedido explícito: en >=992px, la imagen de #about (about.png) queda
fixed, centrada verticalmente en la pantalla, manteniéndose a la
izquierda, VISIBLE DESDE EL INICIO (sin esperar scroll).
Corrección de enfoque (pedido explícito: "sin moverse y no espere el
scroll"): el primer intento usaba position:sticky, que solo llega a su
posición centrada DESPUÉS de scrollear hasta ese punto — antes de eso se
ve en su posición estática normal (arriba de la columna), lo cual se
percibe como "se mueve"/"espera el scroll". Se cambió a position:fixed
real, con opacidad atada a #about.section-active (mismo mecanismo
binario ya usado para el resto del contenido fijo del sitio —
hero/#experience/#work/#contact) para que aparezca ya centrada apenas la
sección se vuelve activa, sin ningún estado intermedio.
El left se calcula con el ancho real del .container de Bootstrap en cada
tier (970px en el tier md, 1100px — nuestro propio tope en #about
.container — en el lg) + 15px de su padding izquierdo, para alinear con
el borde real de la columna .item-1 sin necesitar JS. Ya no hace falta
que la fila sea flex (eso solo era necesario para darle "recorrido" a
sticky). */
@media (min-width: 992px) {
/* Bug encontrado y corregido (reportado por el usuario: "se volvió
gigante y ocupa toda la pantalla"): .full-width (theme.css) pone
width:100% — con position:static/sticky eso se resolvía contra el
ancho de la columna .item-1, pero con position:fixed el containing
block pasa a ser el viewport (no hay ningún ancestro con
transform/filter/perspective que lo cambie), así que 100% se volvía
100vw. Se fija un ancho explícito en píxeles por tier (ver los 2
media queries de abajo, mismos breakpoints que el left) en vez de
depender de un porcentaje. */
#about .item-1 img.full-width {
position: fixed;
top: 50%;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
#about.section-active .item-1 img.full-width {
opacity: 1;
transition: opacity 0.3s ease 0.4s;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#about .item-1 img.full-width {
left: calc((100vw - 970px) / 2 + 15px);
width: 297px;
}
}
@media (min-width: 1200px) {
#about .item-1 img.full-width {
left: calc((100vw - 1100px) / 2 + 15px);
width: 337px;
}
}
@media (max-width: 991px) {
.iten-contact {
width: 100% !important;
padding-bottom: 20px
}
.iten-contact h4 {
margin-bottom: 5px !important
}
}
/* Pedido explícito: el ícono de contacto (teléfono/email) queda al lado
del bloque completo (título + dato), no solo del título — .iten-contact
pasa a fila (ícono | columna con título+dato), y el ícono en gris en vez
del celeste de marca usado antes. */
.iten-contact {
display: flex;
align-items: flex-start;
}
.iten-contact .contact-icon {
font-size: 20px;
line-height: 1.4;
color: #17bed2;
}
.img-cont {
border: solid 2px #f1f1f1
}
.margin-b-10 {
margin-bottom: 10px
}
.item-port {
margin-bottom: 50px
}
h4.mb-5 {
margin-bottom: 5px !important
}
.psmall {
font-weight: bold;
margin-bottom: 15px;
display: inline-block
}
.grid-3-cols {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
align-items: stretch
}
.grid-3-cols:before,
.grid-3-cols:after {
display: none !important
}
@media (min-width:640px) {
.grid-3-cols {
grid-template-columns: repeat(2, 1fr)
}
}
@media (min-width:1024px) {
.grid-3-cols {
grid-template-columns: repeat(3, 1fr)
}
}
.grid-3-cols>* {
padding: 0 10px 0 10px;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: start
}
/* --- REFINAMIENTOS UI --- */
/* Pedido explícito: la parte "clara" de los títulos (la palabra después de
la primera, ej. "Coello" en "Ronal Coello", "de Mi" en "Acerca de Mi" —
todas marcadas con en el HTML) y los textos largos
(
) de la página se ven un poco más oscuros que el original de
theme.css. .clear-hl pasa de opacity:.4 a .6; los
pasan de #a6a7aa a
#86878b. Nada más cambia (tamaño, familia, line-height siguen igual). */
.clear-hl {
opacity: 0.6;
}
p {
color: #86878b;
}
/* Hero section: Solo centrar el texto verticalmente */
.promo-block {
padding-top: 100px !important;
padding-bottom: 0 !important;
}
/* Pedido explícito: la foto del hero con un ancho máximo de 480px. */
.promo-block-img {
width: 420px;
min-width: 420px;
}
@media (min-width: 990px) {
.promo-block .row {
display: flex;
}
/* Pedido explícito: invertir el layout del hero — la foto (2º hijo en
el HTML) pasa a la izquierda, el contenido (1º hijo) a la derecha.
Se hace con `order` (flex), sin tocar el HTML — así el orden en el
documento (y por lo tanto en mobile, donde no aplica este bloque)
queda intacto. */
.promo-block .col-sm-6:first-child {
order: 2;
}
.promo-block .image-content {
order: 1;
}
/* Pedido explícito: contenido alineado a la izquierda (antes a la
derecha, cuando el texto vivía en la columna izquierda pegada a la
foto que estaba a su derecha) — mismo criterio, ahora espejado: el
texto vive en la columna derecha y se pega a la izquierda, hacia la
foto. */
.promo-block .col-sm-6:first-child {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 460px;
text-align: left;
}
.promo-block .col-sm-6:first-child .d-flex.no-wrap {
justify-content: flex-start;
}
/* Pedido explícito: dentro de esa fila, los íconos de redes quedan del
lado de adentro del grupo (el grupo en sí ahora se pega al borde
IZQUIERDO de la columna, vía justify-content:flex-start de arriba —
esto solo reordena el contenido interno, sin cambiar cuál borde). */
.promo-block .col-sm-6:first-child .d-flex.no-wrap .list-inline {
order: 3;
}
.promo-block .col-sm-6:first-child .d-flex.no-wrap .promo-block-text.spacer {
order: 2;
}
.promo-block .col-sm-6:first-child .d-flex.no-wrap .promo-block-text:not(.spacer) {
order: 1;
}
/* Pedido explícito: el borde celeste del subtítulo (antes a la
derecha) pasa a la izquierda, siguiendo el mismo espejado del resto
del contenido. */
.promo-block .title-tag {
border-right: none;
border-left: solid #17bed2 4px;
}
.promo-block-img-wrap {
height: 460px;
}
}
.promo-block .promo-block-img {
bottom: 2px;
}
/* Pedido explícito: cerrar el hueco entre 768px y 991px. theme.css centra
el hero (text-align:center, imagen relativa y centrada en vez de
absoluta) solo por debajo de 768px (su propio breakpoint, no tocable
desde acá); nuestro layout flex/right-align de escritorio (arriba) recién
arranca en 992px; entre 768 y 991px no aplicaba ninguno de los dos y el
hero quedaba sin distribución clara. Se replica aquí el mismo centrado
de theme.css, extendido hasta 991px, para que todo el rango <992px se
vea igual. */
@media (max-width: 990px) {
.promo-block {
padding-top: 80px !important;
text-align: center;
}
.promo-block>.container{
margin-top: 10px !important;
}
.promo-block .promo-block-img-wrap {
height: auto;
width: calc(100% - 30px);
bottom: -25px;
position: absolute;
}
.promo-block .row {
height: 100%;
position: relative;
}
.promo-block .image-content{
position: absolute !important;
bottom: 0;
}
/* Selector con la misma especificidad que theme.css (.promo-block
.promo-block-img, 2 clases) — con solo .promo-block-img (1 clase)
la regla de theme.css seguía ganando y la imagen quedaba
position:absolute en este rango. */
.promo-block .promo-block-img {
position: relative;
margin-left: -100px;
margin-right: -100px;
display: inline-block;
}
/* Fix reportado por el usuario: la fila de íconos de redes (.d-flex.
no-wrap, display:flex por theme.css) no se centraba con el resto del
texto — text-align:center (arriba) solo centra contenido inline,
no el layout interno de un contenedor flex; hace falta
justify-content:center explícito.
Pedido explícito de seguimiento: "@roncreative" debe salir debajo de
los íconos (no al lado) en este rango — flex-direction:column apila
en el orden real del HTML (íconos, luego el separador "/", luego el
texto). El separador "/" solo tiene sentido como espaciador en línea
(icono / texto); apilado se vería como un "/" suelto en su propia
fila, así que se oculta acá y en su lugar el texto lleva un
margin-top para separarse de los íconos. */
.promo-block .col-sm-6:first-child .d-flex.no-wrap {
justify-content: center;
flex-direction: column;
align-items: center;
}
.promo-block .col-sm-6:first-child .d-flex.no-wrap .promo-block-text.spacer {
display: none;
}
.promo-block .col-sm-6:first-child .d-flex.no-wrap .promo-block-text:not(.spacer) {
margin-top: 10px;
}
}
.size-panel{
z-index: -1;
border-radius: 16px;
transition: border-radius 0.3s ease;
}
/* Cuando data-h de la sección activa pide más alto que la pantalla y
max-height:100vh recorta el panel (ver "PANEL DE TAMAÑO" más abajo), los
bordes redondeados se ven raros contra ese recorte recto — .panel-capped
(togglada por js/main.js comparando data-h contra window.innerHeight)
los deja rectos mientras el panel esté en ese estado. */
.size-panel.panel-capped {
border-radius: 0;
}
/* data-wf en una sección (ver HTML) fuerza el panel a 100vw con bordes
rectos mientras esa sección esté activa — independiente del ancho pedido
por data-w. js/main.js togglea esta clase leyendo el atributo de la
sección "best" (mismo patrón que .panel-capped/.panel-gray). */
.size-panel.panel-full {
width: 100vw;
max-width: 100vw;
border-radius: 0;
}
/* Sin fondo propio (pedido explícito): el header/nav vive fuera de
#size-panel (ver HTML) como capa independiente. El blanco lo aporta
únicamente #size-panel, que está detrás y sincronizado en tamaño/posición
— el nav nunca pinta su propio fondo encima del contenido. */
.header .wrap .navbar,
.header {
background: transparent !important;
background-color: transparent !important;
padding-top: 0 !important;
top: 0;
}
#body.page-on-scroll{
position: relative;
}
.header .wrap .navbar{
background-color: #fff;
z-index: 10;
}
.header.navbar-fixed-top.top-nav-collapse .wrap {
max-height: 100%;
border-radius: 16px 16px 0 0;
width: calc(100% - 4px);
transform: translateX(2px);
}
/* Pedido explícito: el backdrop-filter:blur del wrap del header solo se
aplica si la sección activa tiene el atributo data-hb (mismo patrón que
data-w/data-h/data-c/data-wf) — js/main.js togglea .header-hb leyendo ese
atributo de la sección "best".
Bug encontrado y corregido (reportado por el usuario: "en responsive
990px el wrap nunca toma el blur"): esta regla dependía únicamente de
`.top-nav-collapse`, una clase de Layout() (js/main.js original del
tema) que se agrega según `$(".navbar").offset().top>150` — un cálculo
de jQuery sobre un elemento position:fixed que no se comporta igual en
todos los anchos (en el bloque <=991px el navbar tiene top:0 en vez de
los 25px de escritorio, cambiando cuándo cruza el umbral de 150px), así
que en la práctica no disparaba de forma confiable en ese rango. Se
agrega `#body.page-on-scroll` como disparador alternativo — el mismo
mecanismo, ya probado y usado por theme.css para poner el navbar blanco
al hacer scroll (`.page-on-scroll .header .navbar{background:#fff}`),
basado solo en `scrollTop()>60` sin depender del ancho de pantalla. */
.header.navbar-fixed-top.top-nav-collapse.header-hb .wrap,
#body.page-on-scroll .header.header-hb .wrap {
backdrop-filter: blur(20px);
}
.header.navbar-fixed-top .wrap .navbar {
border-bottom: 0;
}
/* --- GEMA 3D DEL NAVBAR (Three.js, ver js/main.js) --- */
/* Pedido explícito: reemplazar el diamante de CSS puro por un objeto 3D
real (gema) renderizado con Three.js. Este div solo posiciona el