) sin clase, y #header.cr-nav (que lleva el
cristal en su ::before) se va con el scroll (medido a -7105px, fuera de pantalla).
El clon quedaba 100% transparente -> el título del hero se veía a través.
Verificado en el DOM real de staging. Solución: el MISMO cristal en el elemento
que de verdad se queda pegado. Blocksy pone data-sticky="yes:..." SOLO cuando
está fijado -> arriba (sin "yes") transparente sobre el hero; al bajar, glass. */
[data-sticky] { background: transparent !important; }
[data-sticky] [data-row] { background: transparent !important; }
[data-sticky] [data-row] > .ct-container { background: transparent !important; }
[data-sticky*="yes"] { isolation: isolate; }
[data-sticky*="yes"]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--cr-glass-light);
-webkit-backdrop-filter: blur(var(--cr-blur)) saturate(180%);
backdrop-filter: blur(var(--cr-blur)) saturate(180%);
box-shadow: 0 1px 0 var(--cr-hair-light);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
[data-sticky*="yes"]::before { background: var(--cr-offwhite); }
}
/* ===== Menú móvil (panel "Fuera del lienzo" de Blocksy) · cristal oscuro =====
v5 DEFINITIVO (staging 2026-07-10). CAUSA RAÍZ de los "bloques/franjas": el panel
off-canvas de Blocksy NO es una sola caja, son varias anidadas y cada una pintaba
distinto:
· #offcanvas .ct-panel -> contenedor a pantalla completa
· .ct-panel-inner -> la CAJA visible que se desliza (derecha)
· .ct-panel-actions -> barra superior con el botón cerrar (X) <-- la "subfranja" clara
· .ct-panel-content(-inner) -> el cuerpo con el menú
· .ct-panel-overlay / .ct-overlay -> el VELO (izquierda)
Antes el frost caía solo en algunas -> cada trozo un tono -> franjas.
SOLUCIÓN: UN único cristal (tinte + blur) en la CAJA (.ct-panel-inner) y en el
VELO, con el MISMO valor; y TODO lo de dentro (barra del cierre y cuerpo)
TRANSPARENTE y sin blur para que no apile un segundo tono. Resultado: una sola
lámina de cristal uniforme, sin franjas ni cuadrados.
Tinte controlado aquí (no en el Customizer) para no depender de qué sub-elemento
colorea Blocksy. En el Customizer, "Fondo del panel" (las 2 capas, los 3
dispositivos) debe quedar TRANSPARENTE para no sumar un segundo tinte. */
/* La CAJA visible + el VELO = el ÚNICO cristal, mismo valor -> sin costura. */
#offcanvas .ct-panel-inner,
.ct-panel-inner,
.ct-header-panel .ct-panel-inner,
.ct-panel-overlay,
.ct-overlay {
background: var(--cr-glass-dark) !important;
-webkit-backdrop-filter: blur(var(--cr-blur)) saturate(180%);
backdrop-filter: blur(var(--cr-blur)) saturate(180%);
}
/* TODO lo de dentro de la caja: transparente y sin blur propio (hereda el cristal
de .ct-panel-inner). Esto MATA la franja superior del botón cerrar y cualquier
segundo tono. NO afecta al botón CTA (.cr-mobile-cta), que se estiliza aparte. */
#offcanvas .ct-panel-actions,
.ct-panel-actions,
#offcanvas .ct-panel-content,
.ct-panel-content,
#offcanvas .ct-panel-content-inner,
.ct-panel-content-inner,
.ct-header-panel .ct-panel-content {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Sin backdrop-filter (navegadores viejos): caja y velo sólidos para legibilidad. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.ct-panel-inner, .ct-panel-overlay, .ct-overlay { background: var(--cr-petroleo-deep) !important; }
}
/* CTA "Solicitar sesión estratégica" DENTRO del panel móvil: en escritorio es un
botón (no un ítem de menú); en el menú móvil viaja como enlace más dentro del
mismo WP Menu y perdía esa jerarquía. Se destaca como el resto de CTAs sobre
petróleo (mismo glass que .cr-cta--dark, reutilizado, no duplicado a mano).
REQUIERE 1 paso en WordPress: Apariencia > Menús > editar el ítem "Solicitar
sesión estratégica" del menú móvil > "Clases CSS (opcional)" (activar en
Opciones de pantalla si no se ve) > escribir: cr-mobile-cta
WordPress añade esa clase al ; el selector de abajo apunta al interno. */
.ct-panel li.cr-mobile-cta,
.ct-panel-content li.cr-mobile-cta {
margin-top: var(--cr-space-3);
padding-top: var(--cr-space-3);
border-top: 1px solid var(--cr-hair-dark);
}
.ct-panel li.cr-mobile-cta > a,
.ct-panel-content li.cr-mobile-cta > a {
display: inline-block;
font-family: var(--cr-font);
font-weight: var(--cr-fw-medium) !important;
font-size: .9rem;
letter-spacing: .01em;
padding: 14px 30px;
border: 1px solid var(--cr-hair-dark);
border-radius: var(--cr-r-pill);
background: rgba(255, 255, 255, .10);
color: var(--cr-offwhite) !important;
-webkit-backdrop-filter: blur(var(--cr-blur)) saturate(180%);
backdrop-filter: blur(var(--cr-blur)) saturate(180%);
transition: background-color var(--cr-dur-fast) var(--cr-ease),
border-color var(--cr-dur-fast) var(--cr-ease);
}
.ct-panel li.cr-mobile-cta > a:hover,
.ct-panel li.cr-mobile-cta > a:focus-visible,
.ct-panel-content li.cr-mobile-cta > a:hover,
.ct-panel-content li.cr-mobile-cta > a:focus-visible {
background: rgba(255, 255, 255, .18);
border-color: var(--cr-verde);
}
/* CTA REAL del panel móvil (v6, 2026-07-11): en staging el botón del panel no es un
ítem de menú (cr-mobile-cta, arriba) sino el elemento CTA del Header Builder
(.ct-header-cta .ct-button), que Blocksy pinta en petróleo #003B46: invisible
sobre el cristal petróleo del panel. GHOST blanco (decisión Juanan 2026-07-11):
borde fino blanco + texto blanco, relleno verde al pulsar (coherente con el CTA
del footer sobre fondo oscuro). */
#offcanvas .ct-header-cta .ct-button {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, .55) !important;
color: var(--cr-blanco) !important;
}
#offcanvas .ct-header-cta .ct-button:hover,
#offcanvas .ct-header-cta .ct-button:focus-visible {
background: var(--cr-verde) !important;
border-color: var(--cr-verde) !important;
color: var(--cr-blanco) !important;
}
/* Iconos sociales del panel móvil (v6, 2026-07-11): Blocksy los coloreaba en
petróleo sobre el cristal oscuro (casi invisibles, detectado en revisión).
Blanco suave + verde al tocar. Los SVG de Blocksy usan fill: currentColor. */
#offcanvas .ct-social-box a {
color: var(--cr-offwhite) !important;
fill: currentColor;
}
#offcanvas .ct-social-box a:hover,
#offcanvas .ct-social-box a:focus-visible { color: var(--cr-verde-hover) !important; }
.cr-nav__menu { display: flex; align-items: center; gap: var(--cr-space-4); }
.cr-nav__menu a {
font-family: var(--cr-font);
font-weight: var(--cr-fw-medium);
font-size: .9rem;
color: var(--cr-petroleo);
text-decoration: none;
transition: color var(--cr-dur-fast) var(--cr-ease);
}
.cr-nav__menu a:hover { color: var(--cr-verde); }
/* ===== Fix menú sticky (2026-07-15) =====
Blocksy, al hacer scroll (sticky activo, [data-sticky*="yes"]), pinta TODOS los
enlaces del menú con var(--theme-palette-color-2) (verde), y deja de distinguirse
en qué página estás. En reposo (arriba) Blocksy ya lo hace bien (actual verde,
resto petróleo); esto solo corrige el estado STICKY: por defecto petróleo y SOLO
la página actual en verde. !important para ganar a la regla generada por Blocksy. */
[data-sticky*="yes"] [data-id="menu"] > ul > li > a { color: var(--cr-petroleo) !important; }
[data-sticky*="yes"] [data-id="menu"] > ul > li.current-menu-item > a,
[data-sticky*="yes"] [data-id="menu"] > ul > li.current_page_item > a,
[data-sticky*="yes"] [data-id="menu"] > ul > li.current-menu-ancestor > a { color: var(--cr-verde) !important; }
[data-sticky*="yes"] [data-id="menu"] > ul > li > a:hover,
[data-sticky*="yes"] [data-id="menu"] > ul > li > a:focus-visible { color: var(--cr-verde) !important; }
/* ===== Tarjetas (familia homogenea) ===== */
.cr-card {
background: var(--cr-blanco);
border: 1px solid var(--cr-hair-light);
border-radius: var(--cr-r-lg);
padding: var(--cr-space-4);
transition: scale var(--cr-dur) var(--cr-ease);
}
/* Hover unificado estilo Apple (2026-07-11): SOLO escala sutil. Va en la propiedad
individual 'scale' (no en 'transform') para componerse con el transform de entrada
de reveal/stagger sin pisarse. Sin elevacion, sin sombra, sin borde. Gated a
punteros con hover: en tactil no queda hover "pegado". --cr-card-hover-scale=1.015
(=1 en reduced-motion, ya en tokens.css). */
@media (hover: hover) and (pointer: fine) {
.cr-card:hover { scale: var(--cr-card-hover-scale); }
}
.cr-card--ondark { background: var(--cr-petroleo-600); border-color: var(--cr-hair-dark); }
/* ===== Badge (Hallmarks: capa avanzada opcional) ===== */
.cr-badge {
display: inline-block;
font-family: var(--cr-font);
font-weight: var(--cr-fw-bold);
font-size: .625rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cr-verde);
border: 1px solid var(--cr-verde);
border-radius: var(--cr-r-pill);
padding: 4px 12px;
}
/* ===== Banda de posicionamiento ===== */
.cr-band {
background: var(--cr-petroleo);
color: var(--cr-offwhite);
padding: var(--cr-space-6) var(--cr-space-5);
text-align: center;
}
/* ===== Mapa vertical + cursor unico de lectura ===== */
.cr-map { position: relative; max-width: 720px; margin: 0 auto; padding-left: var(--cr-space-6); }
.cr-map__spine { position: absolute; left: 14px; top: 0; bottom: 0; width: 1px; background: var(--cr-hair-dark); }
.cr-map__cursor {
position: absolute;
left: 9px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--cr-verde);
transform: translateY(-50%);
/* El movimiento del cursor lo suaviza el lerp de app.js (rAF). Sin transition en
top para no duplicar la animacion ni introducir lag. */
z-index: var(--cr-z-cursor);
}
.cr-map__card { margin: var(--cr-space-4) 0; transition: opacity var(--cr-dur) var(--cr-ease); }
/* v2 (staging 2026-07-10): al pasar las tarjetas derivadas de fondo transparente a
solido (ronda 1), quedo a la vista que el padding base de .cr-card (24px) era
escaso para una caja visible: el contenido tocaba los bordes. Aire generoso,
escritorio y movil. */
.cr-map__card { padding: clamp(28px, 3.4vw, 42px); }
.cr-map__card.is-dim { opacity: .45; }
.cr-map__card.is-active { opacity: 1; }
/* ===== Slots visuales (placeholder; no bloquea publicar; sin stock) ===== */
.cr-slot {
border: 1.5px dashed var(--cr-verde);
border-radius: var(--cr-r-md);
background: var(--cr-tint-verde);
padding: var(--cr-space-4);
text-align: center;
color: var(--cr-petroleo-600);
}
.cr-slot--portrait { border-color: var(--cr-petroleo); background: var(--cr-tint-petroleo); }
.cr-slot__label {
font-family: var(--cr-font);
font-weight: var(--cr-fw-bold);
font-size: .625rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cr-petroleo-600);
}
/* ===== Footer =====
Decision A: footer construido con Blocksy Footer Builder. Estos estilos son
REFERENCIA: se portan al footer real anadiendo la clase cr-footer a su contenedor.
Ver README. */
.cr-footer {
background: var(--cr-petroleo-deep);
color: var(--cr-teal-soft);
padding: var(--cr-space-7) var(--cr-space-5) var(--cr-space-4);
}
.cr-footer__inner { max-width: var(--cr-maxw); margin: 0 auto; }
.cr-footer__bar {
margin-top: var(--cr-space-6);
border-top: 1px solid var(--cr-hair-dark);
padding-top: var(--cr-space-3);
display: flex;
flex-wrap: wrap;
gap: var(--cr-space-2) var(--cr-space-4);
justify-content: space-between;
align-items: center;
}
.cr-footer a { color: var(--cr-teal-soft); text-decoration: none; transition: color var(--cr-dur-fast) var(--cr-ease); }
.cr-footer a:hover,
.cr-footer a:focus-visible { color: var(--cr-verde-hover); }
/* EXCEPCION (2026-07-10): los BOTONES del footer no son enlaces de lista; en hover
el fondo se pone verde y el texto debe ser BLANCO (la regla de arriba ganaba por
especificidad y lo dejaba verde sobre verde: invisible). */
.cr-footer a.cr-cta:hover,
.cr-footer a.cr-cta:focus-visible { color: var(--cr-blanco); }
/* ===== Reveal (entrada) ===== */
.cr-reveal {
opacity: 0;
transform: translateY(20px); /* recorrido editorial (era 16px) */
transition: opacity var(--cr-dur-slow) var(--cr-ease),
transform var(--cr-dur-slow) var(--cr-ease);
}
.cr-reveal.is-visible { opacity: 1; transform: none; }
/* Imagenes con fundido al cargar: evita el "pop" del retrato que llega despues de
que la tarjeta ya se ha revelado (fotos remotas). app.js (initImgFade) anade
.is-loaded al cargar; si el JS no corre, el ![]()
![]()