/* ============================================================
BASE V2 - lo que comparten TODAS las paginas rediseñadas
Se carga DESPUES de estilos.css y ANTES del archivo de cada
pagina. Orden en el :
tokens.css -> estilos.css -> base-v2.css -> (home|servicio).css
-> (cortinas|proyectos).css
Todo esta bajo la clase .v2 del . Las paginas que aun no
estan rediseñadas no llevan ninguna clase en el y no
cargan este archivo, asi que no pueden verse afectadas ni por
accidente.
Clases del :
index.html v2 home
renderizacion.html v2 servicio
cortinas.html v2 servicio cortinas
proyectos.html v2 servicio proyectos
QUE ENTRA AQUI: solo las reglas que estaban IDENTICAS, caracter
por caracter, en home.css y en el que hoy es servicio.css. Son 44.
QUE NO ENTRA, aunque lo parezca:
- .hero-content y .hero h1: mismo nombre, valores distintos (el
home usa un titular mas grande y una columna mas ancha).
- .obra: en el home es una pieza de la grilla de proyectos; en
las paginas de servicio es una fila alternada. Mismo nombre,
dos componentes distintos. Meterlo aqui romperia el home.
- La regla de movil de .hero-content: su regla base se queda en
cada archivo, y como esos archivos cargan DESPUES que este,
la de movil perderia y el hero dejaria de ajustarse.
============================================================ */
/* --- Lenis (scroll suave): CSS minimo que la libreria necesita.
No lleva la clase .v2 porque actua sobre , no sobre el
contenido. Solo lo reciben las paginas que cargan este archivo. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* --- Contenedor --- */
.v2 .wrap{max-width:var(--container-max);padding-left:var(--container-padding);padding-right:var(--container-padding)}
/* --- Tipografia base --- */
.v2 h1,.v2 h2,.v2 h3{font-family:var(--font-serif);font-weight:300;letter-spacing:0}
.v2 .h-sans{font-family:var(--font-serif);font-weight:300;letter-spacing:0;line-height:var(--leading-tight)}
/* El dorado en cursiva vive solo en el H1. En H2 y H3 la cursiva se
mantiene, pero hereda el color del texto. */
.v2 h2 em,.v2 h3 em{color:inherit;font-weight:inherit}
.v2 .label{display:block;font-family:var(--font-sans);font-weight:400;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.4}
/* --- Botones: outline dorado, sin esquinas redondeadas --- */
.v2 .btn{border-radius:var(--radius);font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);padding:var(--space-2) var(--space-4);transition:background var(--transition-fast),color var(--transition-fast)}
.v2 .btn-ghost{background:transparent;color:var(--color-accent-gold);border:1px solid var(--color-accent-gold)}
.v2 .btn-ghost:hover{background:var(--color-accent-gold);color:var(--color-bg-dark)}
/* --- Navegacion: transparente sobre el hero, vidrio esmerilado al bajar.
La primera declaracion de background (solida) es el respaldo: si el
navegador no entiende color-mix, se queda con ella y la barra se ve
solida en vez de rota. La segunda la pisa donde si se entiende.
75% de opacidad y no 70%: a 70% el texto del menu sobre una foto muy
clara se queda en 4,6:1 de contraste, al filo del minimo accesible
para letra pequena (4,5:1). A 75% sube a 5,2:1 con margen. */
.v2 header{padding:var(--space-3) 0}
.v2 header.scrolled{
background:var(--color-bg-dark);
background:color-mix(in srgb, var(--color-bg-dark) 75%, transparent);
-webkit-backdrop-filter:blur(16px);
backdrop-filter:blur(16px);
padding:var(--space-2) 0;
border-bottom:1px solid var(--color-border-dark)
}
/* Navegadores sin vidrio esmerilado: fondo solido.
Se pregunta por las dos formas (con y sin prefijo -webkit-) porque
Safari durante anos solo entendio la version con prefijo. Preguntando
solo por la version sin prefijo, Safari caeria aqui y perderia el
efecto aunque si sabe hacerlo. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.v2 header.scrolled{background:var(--color-bg-dark)}
}
/* Por debajo de 1024px se desactiva: el desenfoque a pantalla completa
es caro en moviles y se nota en el scroll. Vuelve el fondo solido. */
@media(max-width:1023px){
.v2 header.scrolled{
background:var(--color-bg-dark);
-webkit-backdrop-filter:none;
backdrop-filter:none
}
}
/* ============================================================
HERO - la caja y el medio. El titular y el ancho de la columna
de texto los pone cada pagina, porque no coinciden.
============================================================ */
.v2 .hero{min-height:100svh;padding:0;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:var(--color-bg-dark)}
/* Contenedor del medio del hero. Hoy aloja un ![]()
, y para poner un
video basta con reemplazarlo por un