, pero la cifra se lee primero. Se invierte la
* presentacion, no la estructura.
*/
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
/*
* El filete separador va a la IZQUIERDA y con aire por los dos lados. Con
* border-right y sin padding-left, el texto de la columna siguiente queda
* pegado al filete y las tres cifras se leen como un bloque apelmazado.
*/
min-width: 0;
padding: 1rem .75rem 0;
border-left: 1px solid var(--np-line-soft);
margin: 0;
}
.np-figure:first-child{
padding-left: 0;
border-left: 0;
}
.np-figure__n{
font-family: var(--np-display);
font-weight: 700;
font-size: clamp(1.75rem, 6vw, 2.5rem);
line-height: .92;
letter-spacing: -.02em;
display: block;
font-variant-numeric: tabular-nums;
margin: 0;
}
/*
* En movil la etiqueta baja de cuerpo e interletrado para caber entera.
*
* NO se usa overflow-wrap: break-word: partia "CONSTRUYENDO" como
* "CONSTRUYEND / O" y una palabra rota a mitad delata descuido antes que
* cualquier otra cosa. Se ajusta el tipo hasta que cabe, no el texto.
*/
.np-figure__t{
display: block;
margin: .5rem 0 0;
font-size: .625rem;
letter-spacing: .06em;
}
.np-figure__n + .np-figure__t,
.np-figure__t{
margin-inline-start: 0;
}
/* ==========================================================================
9. Slider de obra
--------------------------------------------------------------------------
No es un slider de hero convencional de los que prohibe el §77: el titular
y las cifras no se mueven. Lo que rota es la ficha de una obra entregada,
de modo que cada vuelta anade evidencia en lugar de repetir un mensaje.
La primera diapositiva se ve por CSS, no por JavaScript: si el script no
llega, queda una ficha estatica completa y nunca un hueco (§35).
========================================================================== */
.np-deck{
position: relative;
background: var(--np-night);
color: var(--np-night-ink);
display: flex;
flex-direction: column;
}
/*
* Las diapositivas se apilan en la MISMA celda de una rejilla, no con
* position:absolute.
*
* Con posicionamiento absoluto habia que devolver la activa al flujo para que
* ocupara el ancho, y al hacerlo dejaba de llenar el contenedor: se encogia al
* ancho de su texto. Apiladas en grid-area 1/1, todas ocupan la celda entera
* siempre, la altura la marca la mas alta y no hace falta tocar el positioning
* al cambiar de ficha.
*/
.np-deck__stage{
flex: 1;
display: grid;
min-height: 0;
}
/*
* En movil, foto arriba y ficha debajo, cada una con su altura. En escritorio
* (responsive.css, lg) la ficha pasa a ir SOBRE la foto: con la ficha debajo,
* la foto se quedaba con lo que sobraba del panel —unos 630x280, un 2,3:1
* que obligaba a recortar cualquier edificio alto—. En movil no se superpone
* porque a 375px de ancho la ficha taparia casi toda la foto.
*/
.np-slide{
grid-area: 1 / 1;
display: grid;
grid-template-rows: auto auto;
min-width: 0;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity var(--np-speed) var(--np-ease);
}
.np-slide.is-active{
opacity: 1;
visibility: visible;
}
/*
* En movil la foto marca su propia altura a 4:3. En escritorio (responsive.css)
* la proporcion se libera y la foto llena la altura del panel, que fija el
* texto del hero.
*/
.np-slide__media{
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background:
repeating-linear-gradient(135deg, rgba(var(--np-brand-rgb), .045) 0 12px, transparent 12px 24px),
radial-gradient(120% 90% at 20% 0%, #2A2723 0%, var(--np-night) 70%);
}
.np-slide__media img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* El trazo de la marca como filigrana, no como logotipo.
*
* Conserva su proporcion. Estirandolo a una altura fija deja de leerse como
* perfil de cubierta y pasa a parecer un garabato: la forma solo significa
* algo con su relacion de aspecto original.
*/
.np-slide__roof{
position: absolute;
left: -8%;
top: 22%;
width: 116%;
height: auto;
opacity: .13;
color: var(--np-brand);
}
.np-slide__ph{
position: absolute;
left: 1.25rem;
top: 1rem;
color: rgba(242, 239, 233, .42);
margin: 0;
}
/* Ficha tecnica: tabla real, no lista de iconos (§24 y §56). */
.np-sheet{
border-top: 1px solid var(--np-night-line);
padding: 1.25rem 1.25rem 1rem;
}
.np-sheet__client{
font-family: var(--np-display);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.05;
letter-spacing: -.012em;
color: var(--np-night-ink);
margin: 0 0 .1875rem;
}
.np-sheet__place{
color: var(--np-night-muted);
margin-bottom: .875rem;
}
.np-sheet__rows{
margin: 0;
}
.np-sheet__row{
padding: .4375rem 0;
border-top: 1px solid var(--np-night-line);
}
.np-sheet__row dt{
font-family: var(--np-mono);
font-size: .625rem;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--np-night-muted);
margin: 0;
}
.np-sheet__row dd{
margin: 0;
font-family: var(--np-display);
font-weight: 700;
font-size: 1rem;
font-variant-numeric: tabular-nums;
}
/* Controles */
.np-deck__ctrl{
padding: 0 1.25rem 1.25rem;
}
.np-dot{
width: 1.375rem;
height: 3px;
padding: 0;
border: 0;
cursor: pointer;
background: rgba(242, 239, 233, .26);
transition: background var(--np-speed) var(--np-ease);
}
.np-dot[aria-current="true"]{
background: var(--np-brand);
}
.np-dot:hover{
background: rgba(var(--np-brand-rgb), .65);
}
.np-arrow{
width: 2.25rem;
height: 2rem;
border: 1px solid var(--np-night-line);
background: transparent;
color: var(--np-night-ink);
cursor: pointer;
display: grid;
place-items: center;
transition: border-color var(--np-speed) var(--np-ease), color var(--np-speed) var(--np-ease);
}
.np-arrow:hover{
border-color: var(--np-brand);
color: var(--np-brand);
}
.np-arrow svg{
width: .9375rem;
height: .625rem;
}
/* ==========================================================================
10. Pie
========================================================================== */
.np-footer{
background: var(--np-night);
color: var(--np-night-ink);
padding: 3rem 0 2rem;
}
.np-footer a{
color: var(--np-night-ink);
text-decoration: none;
}
.np-footer a:hover{
color: var(--np-brand);
text-decoration: underline;
}
.np-footer__top{
padding-bottom: 2rem;
border-bottom: 1px solid var(--np-night-line);
}
.np-footer__brand svg,
.np-footer__brand img{
height: 2.5rem;
width: auto;
}
.np-footer__descriptor{
color: var(--np-night-muted);
max-width: 34ch;
margin: 1.25rem 0 0;
}
.np-footer__title{
font-family: var(--np-mono);
font-size: .6875rem;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--np-night-muted);
margin: 0 0 .875rem;
}
.np-footer__bottom{
padding-top: 1.5rem;
}
.np-footer__copy{
color: var(--np-night-muted);
font-size: .875rem;
margin: 0;
}
.np-footer__legal{
font-size: .875rem;
}
/* ==========================================================================
12. Franja "Por donde empezar" — cuatro puertas
--------------------------------------------------------------------------
Cuatro filas a todo el ancho. Se descarto la retícula de cuatro columnas
porque a 1.248 px cada columna cae a 270 px y el titular se parte; y porque
en movil —donde NAPISA convierte cinco veces mas: 3,02 % de CTR frente a
0,59 % en escritorio— una fila completa es un objetivo tactil de borde a
borde, mientras que una columna estrecha no lo es.
Sin numeracion delante: cuatro necesidades son opciones paralelas, no una
secuencia.
========================================================================== */
/*
* Sobre hueso, no sobre blanco.
*
* El hero tiene su columna de texto en blanco y esta franja tambien lo estaba:
* dos superficies identicas separadas por un filete de rgba casi invisible se
* leen como una sola franja larga. El cambio de tono da el corte que el filete
* no daba.
*
* Ritmo resultante de la home, sin dos superficies iguales seguidas:
* cabecera oscura · hero blanco+oscuro · puertas hueso ·
* respuesta oscura · clientes blanco · pie oscuro
*/
.np-band{
background: var(--np-ground);
padding: 3.25rem 0 3.5rem;
}
.np-band__kicker{
color: var(--np-brand-ink);
margin-bottom: 1rem;
}
.np-band__h{
max-width: 20ch;
margin-bottom: .75rem;
}
.np-band__lede{
color: var(--np-muted);
max-width: 62ch;
margin: 0 0 2.25rem;
}
.np-doors{
border-top: 1px solid var(--np-ink);
}
/*
* La fila entera es el enlace. isolation: isolate crea el contexto de apilado
* para que el fondo del ::before pueda ir detras del texto sin escaparse por
* debajo de la seccion.
*/
.np-door{
position: relative;
isolation: isolate;
/*
* Mobile-first: la cifra cae DEBAJO del texto y la flecha ocupa las dos
* filas. En 375 px, texto y cifra en la misma linea dejan al titular sin
* medida y lo parten en cuatro.
*/
display: grid;
grid-template-columns: minmax(0, 1fr) 1.25rem;
grid-template-areas:
"texto flecha"
"cifra flecha";
gap: .875rem 1.125rem;
align-items: center;
padding: 1.375rem 0;
border-bottom: 1px solid var(--np-line-soft);
color: inherit;
text-decoration: none;
}
/*
* Fondo que se despliega desde la izquierda.
*
* Solo desborda por la IZQUIERDA, lo justo para dar sitio al filete de marca.
* Por la derecha termina exactamente donde terminan los filetes de la fila:
* si tambien desbordara, el fondo sobresaldria de las lineas y el canto se
* veria descuadrado.
*/
.np-door::before{
content: "";
position: absolute;
inset: 0 0 0 calc(var(--np-gutter) * -0.6);
z-index: -1;
background: rgba(var(--np-brand-rgb), .06);
transform: scaleX(0);
transform-origin: left center;
transition: transform 340ms var(--np-ease);
}
/* Filete de marca que crece en el canto izquierdo. */
.np-door::after{
content: "";
position: absolute;
left: calc(var(--np-gutter) * -0.6);
top: 0;
bottom: 0;
width: 2px;
background: var(--np-brand);
transform: scaleY(0);
transform-origin: center;
transition: transform 280ms var(--np-ease);
}
.np-door__h{
font-size: clamp(1.4rem, 2.6vw, 2rem);
line-height: 1.04;
margin: 0 0 .3125rem;
}
.np-door__p{
display: block;
font-size: .9375rem;
color: var(--np-muted);
max-width: 58ch;
}
.np-door__t,
.np-door__m{
display: block;
transition: transform 340ms var(--np-ease);
}
.np-door__t{ grid-area: texto; }
.np-door__m{ grid-area: cifra; }
.np-door__n{
display: block;
font-family: var(--np-display);
font-weight: 700;
font-size: clamp(1.5rem, 3vw, 1.9rem);
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
transition: color 280ms var(--np-ease);
}
.np-door__u{
display: block;
margin-top: .375rem;
}
.np-door__arrow{
grid-area: flecha;
width: 1.25rem;
height: .6875rem;
color: var(--np-muted);
transition: transform 340ms var(--np-ease), color 280ms var(--np-ease);
}
/*
* Un unico gesto —desplazamiento hacia la derecha— dicho en cuatro sitios: el
* fondo se despliega, el filete crece, el texto avanza y la flecha sale. No
* son cuatro efectos: es el mismo, y por eso no se lee como adorno.
*
* El foco recibe el mismo trato que el raton y en todos los dispositivos: quien
* navega con teclado tiene derecho a la misma informacion.
*/
.np-door:focus-visible::before{ transform: scaleX(1); }
.np-door:focus-visible::after{ transform: scaleY(1); }
.np-door:focus-visible .np-door__t{ transform: translateX(.5rem); }
.np-door:focus-visible .np-door__arrow{ transform: translateX(.375rem); color: var(--np-brand-ink); }
.np-door:focus-visible .np-door__n{ color: var(--np-brand-ink); }
/*
* El movimiento solo donde hay puntero real. En tactil no existe el hover y
* dejarlo suelto produce filas que se quedan "encendidas" tras el toque.
*/
@media (hover: hover){
.np-door:hover::before{ transform: scaleX(1); }
.np-door:hover::after{ transform: scaleY(1); }
.np-door:hover .np-door__t{ transform: translateX(.5rem); }
.np-door:hover .np-door__arrow{ transform: translateX(.375rem); color: var(--np-brand-ink); }
.np-door:hover .np-door__n{ color: var(--np-brand-ink); }
}
/* ==========================================================================
13. Franja "Respuesta destacada"
--------------------------------------------------------------------------
Sobre Process Black. El ritmo de la home alterna: cabecera oscura, hero
claro con panel oscuro, cuatro puertas en claro, esta franja en oscuro.
El §60 pide reservar el oscuro para bloques con peso, y este lo tiene: es la
unica franja que ataca el problema medido —posicion 1 con un CTR del
0,09 %— porque la respuesta se da hoy por encima del enlace.
========================================================================== */
.np-answer{
background: var(--np-night);
color: var(--np-night-ink);
padding: 3.5rem 0 3.75rem;
}
.np-answer__kicker{
color: var(--np-brand);
margin-bottom: 1.25rem;
}
.np-answer__h{
color: var(--np-night-ink);
max-width: 20ch;
margin-bottom: 1.25rem;
}
/*
* La respuesta directa va marcada con el filete de marca y en cuerpo mayor: es
* el fragmento que un motor de respuesta puede citar entero, y tiene que
* distinguirse del desarrollo que viene detras (§49).
*/
.np-answer__lead{
font-family: var(--np-display);
font-weight: 700;
font-size: clamp(1.2rem, 2.4vw, 1.6rem);
line-height: 1.28;
letter-spacing: -.012em;
color: var(--np-night-ink);
border-left: 3px solid var(--np-brand);
padding-left: 1.25rem;
margin: 0 0 1.125rem;
}
.np-answer__p{
color: var(--np-night-muted);
max-width: 58ch;
margin: 0;
}
.np-answer__list{
border-top: 1px solid var(--np-night-line);
}
.np-answer__item{
padding: 1rem 0;
border-bottom: 1px solid var(--np-night-line);
}
.np-answer__q{
font-size: 1.0625rem;
line-height: 1.3;
color: var(--np-night-ink);
margin: 0 0 .375rem;
}
.np-answer__a{
font-size: .9375rem;
color: var(--np-night-muted);
margin: 0;
max-width: 56ch;
}
/* ==========================================================================
14. Franja "Clientes y certificaciones"
--------------------------------------------------------------------------
Cierra la respuesta destacada. Mientras no haya autorizacion para publicar
los logotipos, el nombre va en texto: es informacion igual de indexable y no
compromete la marca de un tercero.
========================================================================== */
.np-proof{
background: var(--np-surface);
padding: 3.25rem 0 3.5rem;
border-bottom: 1px solid var(--np-line);
}
.np-proof__kicker{
color: var(--np-brand-ink);
margin-bottom: 1rem;
}
.np-proof__h{
max-width: 24ch;
margin-bottom: 1.75rem;
}
/* La retícula es .row/.row-cols de Bootstrap; aquí solo los filetes. */
.np-clients{
border-top: 1px solid var(--np-ink);
border-left: 1px solid var(--np-line-soft);
}
.np-clients li{
aspect-ratio: 5 / 3;
display: grid;
place-items: center;
padding: .875rem;
border-right: 1px solid var(--np-line-soft);
border-bottom: 1px solid var(--np-line-soft);
}
.np-clients span{
font-family: var(--np-display);
font-weight: 700;
font-size: 1rem;
line-height: 1.1;
color: var(--np-muted);
text-align: center;
}
.np-certs{
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--np-line-soft);
}
.np-cert{
align-items: start;
}
/* El sello no encoge: sin esto flex se lo come cuando el texto es largo. */
.np-cert__mark{
flex: 0 0 3.5rem;
}
/* Marca provisional: el sello real de AENOR hay que pedirlo. */
.np-cert__mark{
aspect-ratio: 1;
display: grid;
place-items: center;
border: 1px solid var(--np-line);
font-family: var(--np-mono);
font-size: .5rem;
letter-spacing: .08em;
line-height: 1.35;
color: var(--np-muted);
text-align: center;
}
.np-cert__h{
font-size: 1.0625rem;
line-height: 1.2;
margin: 0 0 .25rem;
}
.np-cert__p{
display: block;
font-size: .875rem;
color: var(--np-muted);
}
/* ==========================================================================
15. Franja "Obra entregada"
--------------------------------------------------------------------------
Sobre hueso: la franja de clientes es blanca y el pie es oscuro, asi que
este tono corta con las dos sin repetir superficie contigua.
La franja de clientes da el logotipo —credito superficial— y esta da el
expediente: cliente, superficie, sector y modalidad. Es la escalada que
.github/docs/COMPETENCIA.md §4.2 senala como la brecha mas clara del sector.
========================================================================== */
.np-works{
background: var(--np-ground);
padding: 3.25rem 0 3.5rem;
}
.np-works__kicker{
color: var(--np-brand-ink);
margin-bottom: 1rem;
}
.np-works__h{
max-width: 22ch;
margin-bottom: .75rem;
}
.np-works__lede{
color: var(--np-muted);
max-width: 60ch;
margin: 0 0 2rem;
}
.np-work{
display: flex;
flex-direction: column;
min-width: 0;
color: inherit;
text-decoration: none;
}
.np-work__media{
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background:
repeating-linear-gradient(135deg, rgba(var(--np-brand-rgb), .045) 0 12px, transparent 12px 24px),
radial-gradient(120% 90% at 20% 0%, #2A2723 0%, var(--np-night) 70%);
}
.np-work__media img{
width: 100%;
height: 100%;
object-fit: cover;
/*
* El zoom del §22 va en la IMAGEN, no en la tarjeta: escalando el
* contenedor se moverian tambien el titular y la ficha, y el dato tiene
* que quedarse quieto para poder leerse.
*/
transition: transform 520ms var(--np-ease);
}
.np-work__roof{
position: absolute;
left: -8%;
bottom: 14%;
width: 116%;
height: auto;
opacity: .13;
color: var(--np-brand);
}
.np-work__ph{
position: absolute;
left: .875rem;
bottom: .75rem;
color: rgba(242, 239, 233, .42);
}
.np-work__h{
font-size: 1.35rem;
line-height: 1.06;
margin: 1rem 0 .1875rem;
transition: color var(--np-speed) var(--np-ease);
}
.np-work__loc{
display: block;
margin-bottom: .75rem;
}
/* Ficha tecnica: tabla real, no lista de iconos (§24 y §56). */
.np-work__rows{
margin: 0;
border-top: 1px solid var(--np-line-soft);
}
.np-work__rows > div{
padding: .375rem 0;
border-bottom: 1px solid var(--np-line-soft);
}
.np-work__rows dt{
font-family: var(--np-mono);
font-size: .59375rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--np-muted);
margin: 0;
}
.np-work__rows dd{
margin: 0;
font-family: var(--np-display);
font-weight: 700;
font-size: .9375rem;
font-variant-numeric: tabular-nums;
}
@media (hover: hover){
.np-work:hover .np-work__media img{ transform: scale(1.03); }
.np-work:hover .np-work__h{ color: var(--np-brand-ink); }
}
.np-work:focus-visible .np-work__media img{ transform: scale(1.03); }
.np-work:focus-visible .np-work__h{ color: var(--np-brand-ink); }
.np-works__more{
display: inline-flex;
align-items: center;
gap: .625rem;
margin-top: 1.75rem;
font-family: var(--np-mono);
font-size: .65625rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--np-brand-ink);
text-decoration: none;
border-bottom: 2px solid var(--np-brand);
padding-bottom: .1875rem;
transition: gap var(--np-speed) var(--np-ease);
}
.np-works__more:hover{
color: var(--np-brand-ink);
gap: .9375rem;
}
.np-works__more svg{
width: 1.125rem;
height: .625rem;
flex: none;
}
/* ==========================================================================
16. Formulario
--------------------------------------------------------------------------
Los componentes son los de Bootstrap: .form-label, .form-control,
.form-select, .form-text, .form-check e .invalid-feedback, con la validacion
de .needs-validation / .was-validated.
Aqui NO se sustituye ninguno: solo se les da identidad reasignando las
variables del propio Bootstrap. El radio y el anillo de foco por defecto no
son motivo para escribir un componente paralelo — son dos variables.
========================================================================== */
:root{
/* Sin esquinas redondeadas en toda la interfaz (§62). */
--bs-border-radius: 0;
--bs-border-radius-sm: 0;
--bs-border-radius-lg: 0;
--bs-border-radius-xl: 0;
/* El anillo de foco, en el acento accesible y sin difuminado. */
--bs-focus-ring-width: 2px;
--bs-focus-ring-opacity: 1;
--bs-focus-ring-blur: 0;
--bs-focus-ring-color: var(--np-brand-ink);
/* Estados de validacion en la paleta del proyecto. */
--bs-form-invalid-color: #A8321A;
--bs-form-invalid-border-color: #A8321A;
--bs-form-valid-color: var(--np-brand-ink);
--bs-form-valid-border-color: var(--np-brand);
}
.form-label{
font-family: var(--np-mono);
font-size: .625rem;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--np-muted);
margin-bottom: .375rem;
}
.np-opcional{
text-transform: none;
letter-spacing: .02em;
opacity: .75;
}
/*
* Alto minimo comun a input y select: un