/* ════════════════════════════════════════════════════════════════════════════
Sempra Home — la hoja de estilos del sitio
UNA sola hoja para todas las páginas. La alternativa era partirla en
«compartido» y «portada», pero el corte no existe: los tokens, la barra y la
inversión clara conviven intercalados con lo que sólo tiene sentido sobre el
recorrido. Partirla habría sido inventar una frontera y después pelearse con
ella en cada página nueva.
Una página sin recorrido carga reglas que no usa, y a cambio la hoja se
cachea una sola vez para todo el sitio.
Orden:
1. Tokens y base
2. Tipografía del recorrido
3. La marca y la barra
4. La firma en el cielo · sólo portada
6. Lenis
7. Las secciones claras + la inversión de la barra
8. La obertura · sólo portada
9. Entradas
════════════════════════════════════════════════════════════════════════════ */
/* Roboto Slab para los titulares, Inter para todo lo demás. Elegidas por Facundo
el 1-9-2026 probándolas en el sitio con el interruptor, no en un muestrario.
Las dos self-hosteadas, subconjunto latino: 82 KB entre ambas, contra los
278 KB que pesaba Newsreader. No van por el CDN de Google — el resto del sitio
no depende de terceros para renderizar, y la tipografía es lo primero que se
ve: si el CDN no contesta, la página entera entra en su fuente de reserva.
ROBOTO SLAB NO TIENE ITÁLICA. El navegador la finge inclinando la redonda, y a
126 px —el tamaño de la firma en el cielo— eso se ve como un error. Así que la
itálica, que era la voz de la marca, se reemplaza por PESO Y EL NARANJA. Está
resuelto abajo, regla por regla, y no con un `font-style:italic` que el
navegador tendría que inventar. */
@font-face{
font-family:'Roboto Slab';
src:url('assets/font/roboto-slab.woff2') format('woff2');
font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Inter';
src:url('assets/font/inter.woff2') format('woff2');
font-weight:100 900; font-style:normal; font-display:swap;
}
/* El engine setea sus tokens sobre .sw-root, así que un :root solo queda sombreado
por herencia — hay que apuntar a los dos (ver Gotchas de la skill). */
:root, .sw-root{
--sw-bg:#231F1C; /* carbón cálido, un punto más profundo que el video */
--sw-ink:#F4EFE6; /* hueso */
--sw-ink-soft:#BFB3A2;
--sw-accent:#EE5A24; /* naranja Sempra — OJO: el engine la PISA por escena */
/* El naranja de la marca, aparte y a salvo. `--sw-accent` es una variable de
ESCENA: el engine la reescribe en cada tramo con el color de ese plano, asi que
lo que se cuelgue de ella cambia de color al scrollear. Sirve para el copy, que
acompaña la imagen; no sirve para la marca, que tiene que ser siempre la misma.
La obertura salia dorada -#C08A4E, el acento de la vereda- en vez de naranja. */
--sempra:#EE5A24;
--sw-font-display:'Roboto Slab','Georgia',serif;
--sw-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--hueso-10:rgba(244,239,230,.10);
--hueso-22:rgba(244,239,230,.22);
--hueso-55:rgba(244,239,230,.55);
/* ---- EL MOVIMIENTO, en tres tiempos y una curva -------------------------
Había veinticuatro transiciones con nueve combinaciones de duración y
curva: `.3s ease`, `.35s ease`, `.4s ease`, `.42s ease`, `.5s ease` y
cuatro variantes con la cúbica. Ninguna estaba mal sola; juntas hacen que
el sitio responda distinto según dónde toques, y eso se siente aunque no
se sepa por qué.
La curva es la que ya usaba el sitio en sus mejores momentos: sale rápido y
se acomoda largo. Es lo que hace que algo se sienta que RESPONDE en vez de
que arranque. La simétrica del navegador (`ease`) tarda lo mismo en salir
que en llegar y por eso se siente floja.
Los tres tiempos van por TAMAÑO, no por importancia: cuanto más grande es
lo que se mueve, más tarda. Un color a 500 ms se siente roto; una foto a
160 ms se siente un corte. */
--sal-rapido:170ms; /* un color, una opacidad: la respuesta al dedo */
--sal-medio:290ms; /* un borde, una tarjeta, un fondo */
--sal-lento:520ms; /* una foto, un panel, algo que ocupa media pantalla */
--curva:cubic-bezier(.16,1,.3,1); /* la de siempre, para lo que se mueve */
--curva-corta:cubic-bezier(.33,1,.68,1); /* menos dramática, para cambios chicos */
}
html,body{margin:0;background:var(--sw-bg);}
/* ---------- tipografía ---------- */
.sw-root .sw-copy__title{
font-weight:400;
font-size:clamp(2.4rem,5.3vw,4.3rem);
line-height:.99;
letter-spacing:-.02em;
text-wrap:balance;
margin-top:0;
}
/* El énfasis gira la frase que sostiene la página; no es decoración. Era una
itálica y Roboto Slab no tiene, así que ahora lo dice el naranja de la marca
con un peso arriba. Sobre video en movimiento el color además se lee mejor que
una inclinación, que a esa escala se pierde. */
.sw-root .sw-copy__title em{
font-style:normal; font-weight:700; color:var(--sempra);
}
.sw-root .sw-copy__body{
margin-top:20px;
font-size:clamp(1rem,1.2vw,1.12rem);
line-height:1.6;
max-width:38ch;
color:rgba(244,239,230,.82);
}
.sw-root .sw-brand__name{
font-family:var(--sw-font-display);
font-weight:500; font-size:1.16rem;
letter-spacing:.012em;
}
/* El contador 01/06 se esconde. Lo reemplazaba el plano, y el plano lo sacó
Facundo el 1-9-2026, así que hoy el recorrido va SIN NINGÚN indicador de
avance — a propósito. Si alguna vez hace falta uno, este es el barato: se
borra esta regla y vuelve solo. */
.sw-root .sw-copy__num{display:none;}
/* ---------- marca ---------- */
/* El engine define .sw-btn--primary como texto blanco sobre var(--sw-ink), lo que
asume un tema claro. En tema oscuro ink es hueso y el botón queda blanco sobre
blanco. Lo pasamos al acento con texto oscuro: 4,85:1, AA. */
.sw-root .sw-btn--primary{ background:var(--sw-accent); color:#241D17; font-weight:600; }
.sw-root .sw-btn{ transition:transform var(--sal-lento) var(--curva), box-shadow var(--sal-lento) var(--curva); }
.sw-root .sw-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,0,0,.75); }
.sw-root .sw-btn--ghost{ color:var(--sw-ink); border-color:var(--hueso-22); }
.sw-root .sw-btn--ghost:hover{ transform:translateY(-2px); border-color:var(--hueso-55); }
.sw-root .sw-topcta{
background:transparent; color:var(--sw-ink);
border:1px solid var(--hueso-22);
font-variant-numeric:tabular-nums; letter-spacing:.02em;
transition:border-color var(--sal-medio) var(--curva), background var(--sal-medio) var(--curva);
}
.sw-root .sw-topcta:hover{ border-color:var(--hueso-55); background:rgba(244,239,230,.06); }
.sw-root .sw-brand__mark{
background:none; box-shadow:none; border-radius:0;
width:25px; height:25px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 11.1 12 3.6l9.4 7.5' fill='none' stroke='%23EE5A24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12.9V20.4h14V12.9' fill='none' stroke='%23EE5A24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size:contain; background-repeat:no-repeat; background-position:center;
}
/* El riel de puntos del engine, escondido. Misma historia que el contador: lo
reemplazaba el plano. Volver a prenderlo es `nav: true` en la config. */
.sw-root .sw-route{display:none;}
/* La barra del engine queda vacía: la cabecera del sitio vive en el marcado. */
.sw-root .sw-topbar{ display:none; }
/* ---------- la cabecera del sitio ----------
Flota sobre video de brillo impredecible: en la escena de la vereda el cielo es
casi blanco y el número de teléfono desaparecía. Un velo degradado lo sostiene
sin ensuciar la imagen. */
.cabecera{
position:fixed; top:0; left:0; right:0; z-index:50;
display:flex; align-items:center; justify-content:space-between;
gap:clamp(16px,3vw,48px);
padding:clamp(14px,2.4vw,26px) clamp(18px,5vw,64px);
pointer-events:none;
background:linear-gradient(180deg,rgba(18,15,13,.62) 0%,rgba(18,15,13,.32) 52%,transparent 100%);
}
.cabecera > *{ pointer-events:auto; }
.cabecera__marca{
display:flex; align-items:center; gap:10px;
text-decoration:none; color:var(--sw-ink);
/* Estuvo apagada durante la obertura porque duplicaba el nombre gigante del
centro. Ese nombre ya no está —lo dice el telón y no se repite—, así que
ahora es el único lugar donde se lee la marca mientras la obertura está
puesta, y tiene que estar desde el primer cuadro. */
}
.cabecera__marca svg{ width:25px; height:25px; color:var(--sempra); flex:none; }
.cabecera__marca span{
font-family:var(--sw-font-display);
font-weight:500; font-size:1.16rem;
letter-spacing:.012em;
white-space:nowrap;
}
.cabecera__nav{ display:flex; gap:clamp(14px,2.2vw,34px); }
.cabecera__nav a{
position:relative;
text-decoration:none; color:rgba(244,239,230,.78);
font-size:.9rem; letter-spacing:.01em; white-space:nowrap;
transition:color var(--sal-rapido) var(--curva-corta);
}
.cabecera__nav a:hover{ color:var(--sw-ink); }
/* El subrayado crece desde el centro. Va en un ::after y no en text-decoration
porque asi se puede animar el ancho sin mover la linea de base del texto. */
.cabecera__nav a::after{
content:""; position:absolute; left:50%; bottom:-6px;
width:0; height:1px; background:var(--sempra);
transform:translateX(-50%);
transition:width var(--sal-medio) var(--curva);
}
.cabecera__nav a:hover::after{ width:100%; }
/* El teléfono ya no vive en la barra. Facundo lo sacó el 1-9-2026. Sigue en el
pie de las seis páginas, en las tres salidas de `contacto.html` y en la tarjeta
de cada ficha: no se perdió, dejó de estar encima de todo. */
/* ---------- la firma en el cielo ---------- */
.firma{
position:fixed; z-index:25; pointer-events:none;
left:50%; transform:translateX(-50%);
top:clamp(56px,9vh,120px);
width:min(58vw,760px);
}
.firma__svg{ display:block; width:100%; height:auto; overflow:visible; }
/* La salida cuelga del sello, centrada bajo la plaza. Va REDONDEADA y no
cuadrada como el resto de los botones del sitio: es la misma llamada que abre
la obertura —mismo rótulo, mismo destino— y son las dos puntas del recorrido,
que tiene su propio idioma. La opacidad y los `pointer-events` los maneja
`firma.js`, atados al avance del scroll. */
.firma__salida{ margin:clamp(14px,2.4vh,28px) 0 0; text-align:center; }
/* `.firma__boton` solo no alcanza: `.boton{border-radius:0}` tiene la misma
especificidad y se declara 1400 lineas mas abajo. */
.firma .firma__boton{ border-radius:999px; opacity:0; pointer-events:none; }
/* La firma va EN LA MISMA LETRA DE LA PÁGINA, no en una caligráfica. Allura y
Pinyon son escritura inglesa: otra tradición, otro idioma. Por lindas que sean,
al lado de un titular de la página se ven pegadas de otra pieza. Esta es
literalmente la misma letra que el «acá.» del titular, y por eso pertenece.
De paso no pesa: ya estaba cargada.
Era la itálica de Newsreader. Roboto Slab no tiene itálica, así que la firma
pasó a la redonda con un peso arriba, y baja de 126 a 118 px: la egipcia es
bastante más ancha y a 126 no entraba en el ancho de la firma. */
.firma__txt{
font-family:var(--sw-font-display); font-style:normal; font-weight:500;
font-size:118px; letter-spacing:-.018em;
fill:var(--sw-accent);
}
/* La regla y el rombo son de grabador: van en tinta, no en el naranja. Así el
acento queda reservado para la firma sola y el bloque se lee como un sello. */
.firma__regla line{
stroke:rgba(36,29,23,.5); stroke-width:1.6; stroke-linecap:round;
}
.firma__regla rect{ fill:rgba(36,29,23,.62); transform-box:fill-box; transform-origin:center; }
/* El eslogan es la voz de la página, no una nota al pie: va al tamaño en que se
lee de un vistazo.
Y va en TINTA, no en hueso. Aparece recién sobre el final, cuando la cámara ya
salió y el cuadro es cielo claro: medido, hueso da 1,41:1 y tinta 10,29:1. El
resto de la página es texto claro sobre imagen oscura; acá el fondo se da
vuelta y el texto tiene que seguirlo. El halo claro es un seguro por si el
cielo se oscurece en algún punto del tramo, no un contorno. */
.firma__slogan{
font-family:var(--sw-font-display); font-style:normal; font-size:40px;
fill:#241D17; letter-spacing:.004em;
paint-order:stroke; stroke:rgba(248,244,236,.4); stroke-width:3px; stroke-linejoin:round;
}
/* El pie del sello: la plaza. Caja alta muy espaciada, chica, para que sostenga
el bloque sin pelearle al eslogan. */
.firma__plaza{
font-family:var(--sw-font-body); font-size:19px; font-weight:600;
fill:#241D17; letter-spacing:.32em; text-transform:uppercase;
paint-order:stroke; stroke:rgba(248,244,236,.35); stroke-width:2.5px; stroke-linejoin:round;
}
@media (max-width:860px){
/* En teléfono la firma necesita todo el ancho y arrancar más abajo. */
.firma{ width:86vw; top:clamp(80px,11vh,132px); }
.firma__txt{ font-size:142px; }
.firma__slogan{ font-size:46px; }
.firma__plaza{ font-size:23px; letter-spacing:.26em; }
}
/* ---- Lenis ----------------------------------------------------------------
Lo minimo que el suavizador necesita. El `height:auto` importa: el engine
estira el track a 9,3 pantallas (0,9 de obertura + 7,37 de recorrido + 1) y sin
esto Lenis recorta el alto del documento y el recorrido termina antes de la
ultima escena. */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
/* ---- La presentacion ------------------------------------------------------
Cerraba la landing y ahora ABRE `vender.html`. La landing termina en el
recorrido: a quien vino a mirar casas, el recorrido ya le dijo todo. A quien
esta por dejar su casa en manos de alguien, en cambio, esto es lo primero que
necesita — antes de hablar de precio, como se va a mostrar.
Ya no lleva z-index: existia para taparle el ultimo cuadro al recorrido, que
queda fijo abajo, y en `vender` no hay ningun escenario que tapar. */
.presenta{
position:relative;
color:#2E241E;
box-sizing:border-box;
--lado:clamp(20px,5vw,64px);
/* UNA pantalla, no una y media. `svh` y no `vh`: en el teléfono `vh` mide contra
la ventana con la barra del navegador retraída, así que una sección de 100vh
empieza recortada y hay que scrollear para ver el final de algo que se supone
que entra entero. */
min-height:100svh;
display:grid; grid-template-rows:auto 1fr auto;
padding:clamp(92px,12vh,140px) var(--lado) clamp(26px,3.5vh,44px);
/* El dibujo ocupa la pantalla entera, apoyado abajo. `100% auto` y no `cover`:
con `cover` manda el alto y los pinos de las puntas se van de cuadro. Así llega
borde a borde sin recortar nada, y lo que queda arriba es color plano — que es
exactamente el papel del archivo (252,250,244), así que no se ve el empalme.
El degradado no tapa nada: ahí el dibujo ya es papel. Está para que el titular
apoye sobre algo parejo aunque el archivo cambie. */
background-color:#FCFAF4;
background-image:
linear-gradient(180deg,#FCFAF4 0%, rgba(252,250,244,.72) 16%, rgba(252,250,244,0) 38%),
url('assets/casa-elevacion.webp');
background-size:auto, 100% auto;
background-position:center, center bottom;
background-repeat:no-repeat, no-repeat;
overflow:hidden;
}
/* Abriendo `vender` la sección ya tiene arriba la barra fija con su propio
espacio reservado por `.pagina`. Sumarle los 140 px que llevaba en la landing
—donde nacía a media página y necesitaba aire propio— deja el titular a media
pantalla del borde, y la pantalla entera de `min-height` se va abajo del
pliegue por esa misma cuenta. */
.pagina .presenta{
padding-top:clamp(24px,4vh,52px);
min-height:calc(100svh - clamp(76px,10vh,104px));
/* El papel limpio de arriba llega más abajo que en la landing: ahí sostenía
un titular y acá sostiene el titular, la bajada y el botón. Con el
degradado corto, «presentamos como se debe» caía sobre el techo dibujado. */
background-image:
linear-gradient(180deg,#FCFAF4 0%, rgba(252,250,244,.86) 30%, rgba(252,250,244,0) 56%),
url('assets/casa-elevacion.webp');
}
@media (max-width:700px){
.pagina .presenta{
background-image:
linear-gradient(180deg,#FCFAF4 0%, rgba(252,250,244,.86) 34%, rgba(252,250,244,0) 60%),
url('assets/casa-elevacion-movil.webp');
}
}
@media (max-width:700px){
.presenta{
background-image:
linear-gradient(180deg,#FCFAF4 0%, rgba(252,250,244,.72) 22%, rgba(252,250,244,0) 48%),
url('assets/casa-elevacion-movil.webp');
/* En vertical, a todo el ancho el dibujo es una franja de 220 px en una pantalla
de 660: no tiene presencia y sobra un hueco enorme en el medio. Se escala al
42 % del alto y se recorta por los lados — la casa del centro es lo que
importa, los pinos de las puntas se pueden perder. */
background-size:auto, auto 42%;
padding-bottom:clamp(18px,2.5vh,28px);
}
}
/* El texto va centrado sobre el papel limpio de arriba, no sobre el dibujo. */
.presenta__centro{
grid-row:1;
position:relative; z-index:1; /* por encima del dibujo */
max-width:1120px; margin:0 auto; text-align:center; align-self:start;
}
.presenta__titulo{
/* 15em sobre su propio cuerpo. Era 11em, medido para partir «No publicamos
casas.» / «Las presentamos.», el titulo que tenia esta seccion cuando vivia
en la landing. Ese titulo ya no existe: con «¿Cuanto vale tu propiedad?» el
11em lo partia en dos en escritorio, y la bajada y el boton bajaban 70 px
hasta caer sobre el volumen de listones de la acuarela — el texto chico
arriba del dibujo se leia peor. A 15em entra en un renglon en escritorio y
notebook; en el telefono lo sigue partiendo el ancho de la pantalla, y ahi
`text-wrap:balance` deja «¿Cuanto vale / tu propiedad?».
La medida va en em y no en px para que acompanie al clamp del cuerpo. */
max-width:15em; margin-inline:auto;
margin-top:clamp(28px,4vw,46px); margin-bottom:0;
font-family:var(--sw-font-display); font-weight:400;
font-size:clamp(2.2rem,5.4vw,4.2rem);
line-height:1.02; letter-spacing:-.022em;
text-wrap:balance;
}
.presenta__titulo em{ font-style:normal; font-weight:700; color:var(--sempra); }
/* La bajada y el botón viven solo en `vender`, donde esta sección es la portada
de la página y tiene que ofrecer el paso siguiente. En la landing la sección
cerraba y no pedía nada. */
.presenta__bajada{
margin:clamp(18px,2.4vw,26px) auto 0; max-width:56ch;
font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.55;
color:rgba(46,36,30,.72);
}
.presenta__salida{ margin:clamp(22px,3vw,32px) 0 0; }
.presenta__cifras{
grid-row:3;
position:relative; z-index:1;
display:grid; grid-template-columns:repeat(3,1fr);
/* Las cifras se apoyan abajo de todo, sobre el pie del dibujo. El filete las
separa sin cortar el papel: va translucido, no opaco. */
align-self:end;
margin:0; padding:0;
border-top:1px solid rgba(46,36,30,.14);
}
/* column-reverse: el numero se ve arriba, pero en el marcado el termino es la
ETIQUETA y el numero su definicion. Asi un lector de pantalla dice "Años en
Yerba Buena: 15" y no "15: años en Yerba Buena", que no significa nada. */
.presenta__cifras > div{
display:flex; flex-direction:column-reverse; align-items:center; gap:7px;
padding:clamp(24px,3.4vw,38px) 12px 0;
}
.presenta__cifras > div + div{ border-left:1px solid rgba(46,36,30,.12); }
.presenta__cifras dd{
margin:0;
font-family:var(--sw-font-display); font-weight:400;
font-size:clamp(2.1rem,4vw,3.1rem); line-height:1; letter-spacing:-.02em;
}
.presenta__cifras dt{
font-family:var(--sw-font-body);
font-size:clamp(.76rem,1vw,.88rem); color:rgba(46,36,30,.6);
}
/* En vertical las cifras siguen en TRES COLUMNAS. Apiladas medían 330 px de alto y
caían justo encima de la casa: «15» y «12» quedaban ilegibles sobre el dibujo. En
una fila miden 90 y se apoyan abajo de todo, que es donde el papel está limpio. */
@media (max-width:640px){
.presenta__cifras > div{ padding:clamp(14px,3.5vw,22px) 4px 0; gap:3px; }
.presenta__cifras dd{ font-size:clamp(1.5rem,7vw,2.1rem); }
.presenta__cifras dt{ font-size:clamp(.62rem,2.6vw,.72rem); line-height:1.25; }
}
/* Los marcadores NO llevan marca visible: Facundo la saco. El atributo se queda y
`verificar-despliegue.js` sigue fallando mientras exista, asi que un texto o una
cifra de relleno no se puede publicar igual — solo que ahora no se ve. */
/* La barra es tinta clara con un velo oscuro, hecha para flotar sobre el video.
Sobre la seccion crema el telefono desaparecia. Se invierte mientras la seccion
la esta tapando. */
/* Mas opaco que el velo oscuro y llegando mas abajo. Sobre video da igual que el
degradado se abra pronto -la imagen ya es ruido-, pero sobre la seccion crema
el titular se leia NITIDO a traves de la barra, cruzado con el nombre de la
marca. Los primeros dos tercios van solidos. */
html[data-claro] .cabecera{
background:linear-gradient(180deg,#FCFAF4 0%,#FCFAF4 46%,rgba(252,250,244,.72) 74%,rgba(252,250,244,0) 100%);
}
html[data-claro] .cabecera__marca{ color:#2E241E; }
html[data-claro] .cabecera__nav a{ color:rgba(46,36,30,.72); }
html[data-claro] .cabecera__nav a:hover{ color:#2E241E; }
/* ---- La obertura ----------------------------------------------------------
`--sw-intro` la escribe el engine: 0 puesta, 1 ida del todo.
La opacidad va al CUADRADO y no lineal por una razón concreta: así llega a 0
justo cuando el engine pone `data-intro-ido`, y no antes. Con una curva más
rápida —del tipo `1 - s*1.3`— la obertura se ve apagada desde el 77% pero el
atributo recién entra en el 100%, y en ese hueco el botón sigue ahí,
invisible, robándose el puntero. Al cuadrado ya está en 0,04 a los dos
tercios: se fue a la vista, pero el clic se apaga en el mismo punto exacto. */
.obertura{
--s:var(--sw-intro,0);
position:fixed; inset:0; z-index:30;
display:grid; place-items:center;
padding:0 clamp(20px,5vw,64px);
text-align:center;
pointer-events:none;
opacity:calc((1 - var(--s)) * (1 - var(--s)));
transform:translateY(calc(var(--s) * -4.5vh));
}
.sw-root[data-intro-ido] .obertura{ visibility:hidden; }
/* El primer cuadro es la vereda a contraluz: el cielo queda casi blanco y la
marca se perdía contra él. El velo la sostiene sin apagar la casa. */
.obertura::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(115% 75% at 50% 44%, rgba(35,31,28,.74) 0%, rgba(35,31,28,.44) 46%, transparent 78%),
linear-gradient(180deg, rgba(35,31,28,.5) 0%, transparent 26%, transparent 72%, rgba(35,31,28,.55) 100%);
}
.obertura__centro{ position:relative; }
.obertura__marca{
width:clamp(42px,5vw,64px); height:auto; display:block; margin:0 auto;
color:var(--sempra);
filter:drop-shadow(0 3px 18px rgba(35,31,28,.7));
}
.obertura__nombre{
/* Era «Sempra Home» a 8 rem: dos palabras cortas aguantan ese cuerpo. Ahora es
una frase de cinco, y al mismo tamaño ocuparía cuatro renglones y taparía la
casa, que es lo único que tiene que ganar el primer segundo. */
margin:clamp(16px,2.2vw,26px) auto 0;
font-family:var(--sw-font-display); font-weight:400;
font-size:clamp(2.2rem,6.6vw,5.2rem);
line-height:1.02; letter-spacing:-.025em;
/* El corte va a mano, con un , y no con `balance`: dejándolo automático
partía en tres renglones y el «en» quedaba colgando al final del segundo. */
color:var(--sw-ink);
text-shadow:0 4px 44px rgba(35,31,28,.62);
}
/* La misma itálica que gira las frases del recorrido y firma el cierre: una sola
familia y un solo gesto en toda la página. */
.obertura__nombre em{ font-style:normal; font-weight:700; color:var(--sempra); }
/* En teléfono el corte a mano no sirve: «Propiedades de categoría» no entra en
350 px a ningún cuerpo que valga la pena, así que igual parte, y el lo
partía en un segundo renglón de una sola palabra. Se suelta el corte y se
dejan tres renglones parejos.
OJO: el del marcado va con un espacio a cada lado. Apagándolo sin esos
espacios las dos palabras se pegan y queda «categoríaen». */
@media (max-width:640px){
.obertura__nombre br{ display:none; }
.obertura__nombre{ text-wrap:balance; }
}
.obertura__salida{ margin:clamp(26px,3.4vw,42px) 0 0; }
.obertura__salida .sw-btn{ pointer-events:auto; }
/* Misma razon que la casita: el boton de la marca va en el naranja de la marca. */
.obertura__salida .sw-btn--primary{ background:var(--sempra); }
/* La marca de la barra duplicaba el nombre gigante del centro. Entra recién
cuando la obertura se está yendo. El teléfono NO: es la conversión y se queda
puesto desde el primer cuadro. */
/* ---- La entrada del hero, escalonada -------------------------------------
Al aterrizar aparecian de golpe la barra, el titulo, la bajada y las tres
etiquetas. Es mucha informacion junta y tapa lo unico que tiene que ganar el
primer segundo, que es la casa. Ahora entra la imagen sola y el texto se
escribe encima, de arriba hacia abajo.
El engine maneja la opacidad de `.sw-copy` con el scroll, asi que la entrada
va en los HIJOS: si la pusieramos en el contenedor, las dos cuentas pelearian
por la misma propiedad y el texto parpadearia al primer movimiento. */
@keyframes sempra-entra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
.cabecera,
.obertura__centro > *{
/* `backwards`, no `both`. Con `both` el estado final queda aplicado COMO
VALOR DE ANIMACION y el navegador lo informa `matrix(1,0,0,1,0,0)`: una
transformacion que no mueve nada pero que convierte al elemento en bloque
contenedor de sus hijos `position:fixed`. El panel del menu, que es hijo
de la barra y pide `inset:0`, quedaba encerrado en los 72 px de alto de
la barra en vez de tomar la pantalla.
Con `backwards` el elemento vuelve a su estilo base al terminar -opacidad
1 y sin transformacion, que es exactamente donde termina la animacion-,
asi que se ve igual y suelta el bloque contenedor. */
animation:sempra-entra .85s cubic-bezier(.22,1,.36,1) backwards;
}
.cabecera { animation-delay:.30s }
.obertura__marca { animation-delay:.45s }
.obertura__nombre { animation-delay:.62s }
.obertura__salida { animation-delay:.88s }
}
/* El titular del recorrido ya NO necesita escalonado propio: no aparece al
aterrizar sino cuando la obertura se está yendo, y ese cruce lo maneja el
engine (`paso`). Dos entradas encima de la misma copy se pisaban. */
/* ════════════════════════════════════════════════════════════════════════════
FASE 0 — LO COMPARTIDO POR LAS OCHO PÁGINAS
════════════════════════════════════════════════════════════════════════════ */
/* ---------- el menú en teléfono --------------------------------------------
Hasta acá, abajo de 900 px la navegación se escondía y no había nada en su
lugar: el sitio no se podía navegar desde un teléfono.
Lo que SÍ se queda es el teléfono. El primer intento lo escondió para hacerle
lugar al botón, y eso pisaba una decisión que ya estaba tomada y escrita más
arriba en este mismo archivo: es la conversión, va puesto. El lugar sale de
otro lado — en teléfono la marca se queda con la casita sola. El nombre
completo ya está gigante en el centro de la obertura, repetirlo a 11 px al
lado no agrega nada. */
.cabecera__menu{
display:none;
width:44px; height:44px; /* 44 es el mínimo que se toca sin errar */
padding:0; margin:0; flex:none;
background:transparent; border:0; cursor:pointer;
flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
position:relative; z-index:2; /* por encima del panel */
}
.cabecera__menu span{
display:block; height:1.5px; background:var(--sw-ink);
border-radius:0;
transition:width var(--sal-medio) var(--curva),
transform var(--sal-medio) var(--curva),
opacity var(--sal-rapido) var(--curva-corta);
}
/* Trazos de largo distinto: tres iguales es el ícono de todo el mundo, y este es
el único lugar de la barra donde se puede tener voz sin estorbar. */
.cabecera__menu span:nth-child(1){ width:22px; }
.cabecera__menu span:nth-child(2){ width:16px; }
.cabecera__menu span:nth-child(3){ width:19px; }
html[data-claro] .cabecera__menu span{ background:#2E241E; }
/* Los tres trazos se vuelven cruz: el del medio se va y los otros se juntan. */
html[data-menu] .cabecera__menu span{ width:22px; }
html[data-menu] .cabecera__menu span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
html[data-menu] .cabecera__menu span:nth-child(2){ opacity:0; transform:scaleX(.2); }
html[data-menu] .cabecera__menu span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width:900px){
.cabecera__menu{ display:flex; }
.cabecera{ gap:12px; }
/* El nombre VUELVE. Se había escondido para hacerle lugar al teléfono al lado
del botón; Facundo sacó el teléfono de la barra, así que el lugar está y una
barra con una casita suelta y un botón a 300 px de distancia se ve vacía. */
.cabecera__marca{ position:relative; z-index:2; }
/* El apilado va declarado, no heredado del orden del marcado: el panel tiene
que quedar DEBAJO de la marca, el teléfono y el botón, que son lo único que
sigue siendo tocable con el menú abierto. Un z-index negativo acá no sirve
-lo mandaría atrás del propio fondo de la barra- y dejarlo en automático lo
pone encima, porque el