con
onclick. Así funcionan con teclado y un lector de pantalla anuncia cuál está
activo. Y el filtrado usa el atributo [hidden], para que el estado quede en
el DOM y sea legible por la tecnología de asistencia.
Si solo hay una categoría, la plantilla no pinta la botonera: un filtro con
un único botón es ruido.
========================================================================== */
.ne-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
margin-bottom: var(--sp-8);
}
.ne-filter__btn {
min-height: var(--tap-min);
padding: var(--sp-2) var(--sp-5);
border-radius: var(--r-pill);
border: 1px solid var(--c-border);
background: transparent;
color: var(--c-text-muted);
font-family: inherit;
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
.ne-filter__btn:hover {
color: var(--c-text);
border-color: var(--c-border-strong);
}
}
.ne-filter__btn[aria-pressed="true"] {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-text-on-accent);
}
/* La tarjeta que vuelve a entrar hace una entrada corta, para que el cambio de
la rejilla se lea como movimiento y no como un parpadeo. */
.ne-work.is-in {
animation: ne-work-in var(--dur-base) var(--ease-out) both;
}
@keyframes ne-work-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: none; }
}
/* Mensaje cuando un filtro no tiene proyectos todavía. */
.ne-filter__empty {
padding: var(--sp-10) var(--sp-4);
text-align: center;
color: var(--c-text-dim);
font-size: var(--fs-sm);
}
/* ==========================================================================
55 · VÍDEO DE FONDO DEL HERO
--------------------------------------------------------------------------
Opcional, se activa desde el Personalizador.
AVISO HONESTO SOBRE RENDIMIENTO:
un vídeo de fondo es lo más caro que se puede poner en una portada. Por eso
aquí va con cuatro frenos, todos en app.js:
1. No se carga en móvil (datos del cliente y batería).
2. No se carga con Ahorro de datos activado ni en redes 2G/3G.
3. Se pausa cuando el hero sale de pantalla.
4. Se pausa con prefers-reduced-motion (un vídeo en bucle puede provocar
mareo a personas con trastornos vestibulares).
La imagen del hero sigue siendo el LCP y se ve siempre; el vídeo entra
encima cuando ya está listo, con una transición suave.
========================================================================== */
.ne-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--dur-xslow) var(--ease-out);
pointer-events: none;
}
/* app.js pone esta clase solo cuando hay fotogramas listos (readyState >= 3).
Sin ella se vería un rectángulo negro durante la descarga. */
.ne-hero__video.is-ready { opacity: 1; }
/* Velo sobre el vídeo: sin él, el titular blanco es ilegible en los fotogramas
claros y el contraste cae por debajo de AA en mitad del bucle. */
.ne-hero__veil {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(1,4,9,0.78) 0%, rgba(1,4,9,0.62) 45%, rgba(1,4,9,0.92) 100%),
linear-gradient(90deg, rgba(1,4,9,0.85) 0%, rgba(1,4,9,0.35) 60%, transparent 100%);
}
/* ==========================================================================
56 · CANDADO HORIZONTAL · MODO APP · TAMAÑO DEL MENÚ
--------------------------------------------------------------------------
EL BUG QUE ARREGLA ESTA SECCIÓN (v2.5.1)
En un iPhone de 375 px la página se movía 26 px hacia los lados. La causa
medida en el navegador, no adivinada: el botón "Empieza por el paso 1 —
llámanos" de la sección Proceso mide 384 px por su texto largo + el
white-space:nowrap de .ne-btn, y el hueco disponible era de 341 px.
Un solo elemento ancho estira el documento entero, y a partir de ahí TODO
lo que mide 100 % pasa a medir de más: header, drawer, barra de llamada...
Por eso parecía que "toda la web" se movía.
Se arregla en tres capas, de dentro hacia fuera:
1. Ningún botón puede pasar del ancho de su contenedor (max-width:100%).
2. En pantalla estrecha, el texto largo se parte en dos líneas.
3. Candado en la raíz del documento por si algún día se cuela otra cosa.
========================================================================== */
/* --- 1. CANDADO EN LA RAÍZ ------------------------------------------------
Antes solo el tenía overflow-x:hidden. Eso no basta: cuando
es overflow:visible, el navegador PROPAGA el valor del body al viewport y
el body vuelve a comportarse como visible. En iOS Safari ese detalle deja
pasar desbordes igualmente. Poniéndolo en los dos, no hay escapatoria.
Se prefiere 'clip' a 'hidden': hidden en la raíz crea un contenedor de
scroll que rompe position:sticky en toda la página. clip recorta sin crear
ese contenedor. 'hidden' queda de respaldo para navegadores anteriores a
Safari 16 / Chrome 90. */
html,
body {
overflow-x: hidden;
}
@supports (overflow: clip) {
html,
body { overflow-x: clip; }
}
/* Nada de rebote lateral. En iPhone, ese "tirón" horizontal es justo lo que
delata que estás en una web y no en una app. */
html {
overscroll-behavior-x: none;
}
/* --- 2. MODO APP ----------------------------------------------------------
Interruptor del Personalizador → Cabecera. Con él activado:
· no hay "tirar hacia abajo para recargar";
· el scroll no se encadena a la ventana del navegador al llegar al final.
El atributo lo pone header.php en el ; overscroll-behavior del body
se propaga al viewport igual que overflow, así que con esto basta. */
body[data-ne-app] {
overscroll-behavior-y: contain;
}
/* --- 3. BOTONES A PRUEBA DE TEXTOS LARGOS --------------------------------
ESTA es la regla importante. Tú escribes los textos de los botones desde el
Personalizador; sin este tope, un texto largo en español (que casi siempre
ocupa un 20-25 % más que en inglés) vuelve a romper la web en móvil. */
.ne-btn {
max-width: 100%;
}
@media (max-width: 560px) {
/* El texto largo se parte en dos líneas en lugar de desbordar. Un botón de
dos líneas se ve perfectamente; una web que se mueve para los lados, no. */
.ne-btn {
white-space: normal;
text-wrap: balance; /* reparte las dos líneas de forma pareja */
}
.ne-btn--lg {
padding-inline: var(--sp-5);
}
}
/* --- 4. GESTOS DE iOS -----------------------------------------------------
Long-press sobre un botón abre el menú "Copiar / Buscar / Compartir" de
Safari, que en una interfaz de app no pinta nada. Se quita SOLO en los
controles: el texto del contenido sigue siendo seleccionable, que es lo
correcto y lo accesible. */
.ne-btn,
.ne-burger,
.ne-filter__btn,
.ne-drawer__link,
.ne-mobile-cta a {
-webkit-touch-callout: none;
}
/* ==========================================================================
57 · TAMAÑO DEL MENÚ HAMBURGUESA (configurable)
--------------------------------------------------------------------------
--burger-size lo inyecta inc/customizer.php desde el Personalizador.
Todo lo demás se calcula a partir de ese número: el grosor de las barras,
su separación y el desplazamiento de la animación a X.
POR QUÉ TODO CALCULADO Y NO VALORES SUELTOS:
la versión anterior tenía el translateY(7px) de la X escrito a mano. Al
agrandar el botón, las dos barras cruzaban descentradas y la X salía torcida.
Con calc() la X sale perfecta a cualquier tamaño.
========================================================================== */
.ne-burger {
/* Separación entre barras y grosor, proporcionales al botón. */
--bg-gap: calc(var(--burger-size, 44px) * 0.115);
--bg-bar: max(2px, calc(var(--burger-size, 44px) * 0.045));
width: var(--burger-size, 44px);
height: var(--burger-size, 44px);
gap: var(--bg-gap);
padding-inline: calc(var(--burger-size, 44px) * 0.2);
}
.ne-burger__bar {
height: var(--bg-bar);
}
/* La X. El desplazamiento es exactamente lo que separa el centro de una barra
del centro de la del medio: gap + grosor. */
.ne-burger[aria-expanded="true"] .ne-burger__bar:nth-child(1) {
transform: translateY(calc(var(--bg-gap) + var(--bg-bar))) rotate(45deg);
}
.ne-burger[aria-expanded="true"] .ne-burger__bar:nth-child(2) {
opacity: 0;
}
.ne-burger[aria-expanded="true"] .ne-burger__bar:nth-child(3) {
transform: translateY(calc((var(--bg-gap) + var(--bg-bar)) * -1)) rotate(-45deg);
}
/* --- Tamaño de los enlaces del menú abierto ------------------------------
--drawer-fs y --drawer-row salen del mismo sitio. El valor por defecto es
el de siempre, así que si no tocas nada el menú se ve exactamente igual. */
.ne-drawer__link {
font-size: var(--drawer-fs, clamp(1.35rem, 1.1rem + 1.6vw, 1.75rem));
min-height: var(--drawer-row, 64px);
}
/* ==========================================================================
58 · CASILLAS DEL CÓDIGO QUE CABEN SIEMPRE
--------------------------------------------------------------------------
EL BUG (v2.5.2): el ancho de cada casilla dependía del ancho de la PANTALLA
(clamp(48px, 13vw, 62px)), pero las casillas viven dentro de una tarjeta de
ancho fijo. En un ordenador cada una crecía hasta 62 px: 6 × 62 + 5 huecos
= 432 px dentro de una tarjeta de ~276 px útiles. La primera y la última
salían cortadas por el borde.
AHORA: las casillas se reparten el ancho de la TARJETA. Una rejilla con
minmax(0, 1fr) no puede desbordar por definición — cada columna es una
fracción del hueco disponible, y el 0 le permite encogerse por debajo del
ancho de su contenido.
grid-auto-flow:column en lugar de repeat(6): si algún día el código pasa a
tener 4 u 8 dígitos (NOAH_OTP_LENGTH), la rejilla se adapta sola.
========================================================================== */
.ne-otp {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--sp-2);
width: 100%;
max-width: 360px;
margin-inline: auto;
/* Convierte la fila en contenedor: las casillas pueden medir su letra en
función del ancho de la FILA (cqi), no de la pantalla. */
container-type: inline-size;
}
.ne-otp__digit {
width: 100%;
min-width: 0;
height: auto;
aspect-ratio: 5 / 6;
/* Primera línea: respaldo para Safari anterior a 16. La segunda la pisa
donde se entiende cqi, y escala la cifra con el ancho real. */
font-size: 1.5rem;
font-size: clamp(1.15rem, 9cqi, 2rem);
}
/* iPhone SE y similares: la tarjeta deja ~238 px útiles. Con 8 px entre
casillas quedaban de 33 px; con 4 px suben a ~36 × 44, la altura mínima
recomendada para tocar con el dedo. */
@media (max-width: 380px) {
.ne-otp { gap: 4px; }
}
/* ==========================================================================
59 · FASES DEL PANEL · BARRA "SIN CONEXIÓN"
========================================================================== */
/* .ne-phases es un
: sin esto el navegador pinta "1." "2." "3." "4." al
lado de cada círculo, que es lo que se veía a la izquierda de las fases. */
.ne-phases {
list-style: none;
padding: 0;
}
/* Fase actual: resaltada pero NO marcada como terminada. Antes compartía el
estilo de .is-done y llevaba una ✓, como si ya estuviera acabada. */
.ne-phase.is-current .ne-phase__dot {
border-color: var(--c-primary);
background: rgba(var(--c-primary-rgb), 0.10);
color: var(--c-primary-300);
}
.ne-phase.is-current .ne-phase__name { color: var(--c-text); }
.ne-phase__num {
font-size: 13px;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* La barra "Sin conexión" estaba escondida SOLO visualmente (subida por encima
del borde de la pantalla). Un lector de pantalla la seguía leyendo aunque
hubiera internet, y las capturas de página completa la sacaban a la vista.
visibility:hidden la quita de verdad. El retardo en la transición deja que
termine de deslizarse hacia arriba antes de desaparecer. */
.ne-offline {
visibility: hidden;
transition: transform var(--dur-base) var(--ease-out),
visibility 0s linear var(--dur-base);
}
.ne-offline.is-visible {
visibility: visible;
transition: transform var(--dur-base) var(--ease-out),
visibility 0s;
}
/* ==========================================================================
60 · INICIO v3 · CONFIANZA + COTIZACIÓN EN 30 SEGUNDOS
--------------------------------------------------------------------------
El inicio anterior hablaba de NOSOTROS ("constructores y proveedores nos
eligen…"). El cliente que llega desde Google no busca eso: busca que alguien
de fiar le arregle SU problema, sin sorpresas en el precio. Por eso el orden
de lectura ahora es:
1. Confianza, antes del titular: licencia y "hablamos español".
2. Titular con la palabra clave (Electricista + Austin/Manor) y la promesa.
3. Su problema, en sus palabras ("se me bota el breaker").
4. Llamar — o, si no quiere llamar, el formulario de al lado.
5. Tres garantías concretas.
El formulario ocupa el sitio del teléfono de muestra. El teléfono no
desaparece: sigue en su sección propia justo debajo ("Lo que nadie más te
da"), y en el Personalizador se puede volver a ponerlo aquí.
========================================================================== */
/* --- Franja de confianza ------------------------------------------------- */
.ne-hero__kicker {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin: 0 0 var(--sp-5);
padding: 0;
list-style: none;
}
.ne-hero__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px var(--sp-3);
border-radius: var(--r-pill);
border: 1px solid rgba(var(--c-success-rgb), 0.35);
background: rgba(var(--c-success-rgb), 0.10);
color: var(--c-success);
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
/* El idioma va en azul: es un argumento distinto, no una credencial. */
.ne-hero__pill--lang {
border-color: rgba(var(--c-primary-rgb), 0.40);
background: rgba(var(--c-primary-rgb), 0.12);
color: var(--c-primary-300);
}
/* --- La promesa, segunda línea del H1 ----------------------------------
Sigue dentro del (Google la lee como parte del titular), pero más
pequeña y sin mayúsculas: con las dos líneas al mismo tamaño el titular
ocupaba cinco líneas de mayúsculas y costaba leerlo. */
.ne-hero__promise {
display: block;
margin-top: var(--sp-3);
font-size: 0.5em;
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
text-transform: none;
color: var(--c-text);
}
/* --- Tres garantías bajo los botones ------------------------------------ */
.ne-hero__checks {
display: grid;
gap: var(--sp-2);
margin: var(--sp-6) 0 0;
padding: 0;
list-style: none;
}
.ne-hero__checks li {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--fs-sm);
color: var(--c-text-muted);
line-height: var(--lh-snug);
}
.ne-hero__checks svg {
flex: 0 0 auto;
margin-top: 1px;
color: var(--c-success);
}
/* --- Tarjeta de cotización ----------------------------------------------- */
.ne-quote {
position: relative;
padding: var(--sp-6);
border-radius: var(--r-xl);
border: 1px solid var(--c-border-strong);
background: rgba(10, 14, 23, 0.82);
box-shadow: var(--sh-xl), 0 0 0 1px rgba(var(--c-primary-rgb), 0.10);
/* Cristal: se lee el fondo del hero detrás, pero el formulario manda. */
-webkit-backdrop-filter: blur(var(--blur-md));
backdrop-filter: blur(var(--blur-md));
scroll-margin-top: calc(var(--h-header) + var(--sp-4));
}
/* Línea de marca arriba: la misma firma visual que las tarjetas del portal. */
.ne-quote::before {
content: "";
position: absolute;
inset: 0 var(--sp-6) auto;
height: 3px;
border-radius: 0 0 var(--r-pill) var(--r-pill);
background: var(--g-brand);
}
.ne-quote__eyebrow {
margin: 0 0 var(--sp-1);
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--c-success);
}
.ne-quote__title {
margin: 0 0 var(--sp-4);
font-size: var(--fs-xl);
line-height: var(--lh-tight);
}
/* --- Botones de tipo de trabajo (radios con forma de ficha) -------------
Son reales dentro de un