/* ═══════════════════════════════════════════════════════════════════
ALTA VISIBILIDAD · capa de fotografía hero-foto.css · v1
TuSalarioTuDerecho — Innova Abogados Quindío
Va DESPUÉS de styles.css:
No toca ningún token ni ninguna regla existente. Todo lo que pisa va
detrás de una clase nueva (.hero.claro / .cta-final.con-foto), así que
cualquier hero o CTA que NO lleve esa clase se queda exactamente como
está hoy. Para volver atrás: quite la clase y quite este .
═══════════════════════════════════════════════════════════════════ */
/* ════ 1 · HERO CLARO CON FOTO ═══════════════════════════════════════
La foto es el hero. Sobre las caras no va ningún oscurecimiento: el
único degradado es blanco, aclara la franja de arriba para que el
titular se lea, y se apaga en el 34% de la altura. Todo lo demás
(bajada, sello, puertas) baja a una franja de papel bajo la foto. */
.hero.claro{background:var(--papel);color:var(--tinta);}
/* La retícula de papel y el video decorativo se apagan: la fotografía
ya es la textura, y main.js inyecta .hero-video en pantalla ancha —
si no se apaga, se monta encima de la foto. */
.hero.claro::before{display:none;}
.hero.claro .hero-video{display:none;}
/* ── el lienzo de la foto ── */
.hero-lienzo{position:relative;width:100%;height:clamp(440px,108vw,900px);overflow:hidden;background:var(--papel-2);}
.hero-lienzo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;}
.hero-lienzo .aclarado{position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;background:linear-gradient(180deg,rgba(239,235,221,.86) 0%,rgba(239,235,221,.6) 40%,rgba(239,235,221,.18) 76%,rgba(239,235,221,0) 100%);}
.hero-titulo{position:absolute;left:0;right:0;top:0;padding-top:clamp(18px,3.6vw,52px);}
@media(min-width:700px){.hero-lienzo{height:clamp(560px,72vw,900px);}}
@media(min-width:960px){
.hero-lienzo{height:900px;}
.hero-lienzo .aclarado{height:34%;}
}
/* ── el titular sobre el muro ── */
.hero.claro .hero-eyebrow{background:var(--negro);color:var(--ama);margin-bottom:clamp(10px,2vw,20px);}
/* styles.css lo tiene en clamp(44px,9.5vw,96px), pensado para un hero sin
foto. Aquí el titular comparte cuadro con las caras, así que baja de
escala en angosto para no montárseles encima. */
.hero.claro h1{color:var(--negro);font-size:clamp(33px,7.2vw,88px);}
@media(min-width:1180px){.hero.claro h1{font-size:88px;}}
/* En styles.css los tres renglones no son bloques: fluyen en línea y
parten donde alcance el ancho. Sobre el hero oscuro da igual, pero aquí
el titular tiene que caber en la franja de muro vacío, así que se
fija a tres renglones exactos. */
.hero.claro h1 .linea{display:block;width:max-content;max-width:100%;}
/* Caja negra con texto amarillo: sobre papel, el amarillo de fondo
pierde contra el fondo crema. */
.hero.claro h1 .caja{background:var(--negro);color:var(--ama);box-shadow:.09em .09em 0 rgba(18,18,18,.22);}
/* ── franja de papel bajo la foto ── */
.hero-pie{background:var(--papel);border-top:3px solid var(--negro);padding:26px 0 32px;}
@media(min-width:860px){.hero-pie{padding:34px 0 40px;}}
.hero.claro .hero-sub{color:var(--tinta);margin:0 0 4px;}
.hero.claro .hero-sub strong{background:var(--ama);color:var(--negro);padding:0 5px;font-weight:700;}
.hero.claro .hero-nota{color:var(--gris);}
/* El sello sobre papel usa el rojo de tinta, no el rojo claro que se
necesitaba contra el negro. En el HTML: class="sello sello-cae tinta" */
.hero.claro .sello{color:var(--rojo);border-color:var(--rojo);}
.hero.claro .sello::after{background-image:radial-gradient(circle at 35% 45%,rgba(18,18,18,.14) 0 .8px,transparent 1px);}
/* ── las puertas, ahora sobre papel ── */
.hero.claro .puertas-tit{color:var(--gris);}
.hero.claro .puerta{color:var(--tinta);border-color:rgba(18,18,18,.26);background:var(--blanco);}
.hero.claro .puerta span{color:var(--gris-2);}
.hero.claro .puerta:hover,.hero.claro .puerta:focus-visible{background:var(--ama);color:var(--negro);border-color:var(--negro);}
.hero.claro .puerta:hover span,.hero.claro .puerta:focus-visible span{color:rgba(20,18,12,.72);}
/* ════ 2 · TIRA DE CARAS · «¿Se reconoce en alguna?» ══════════════════
Cuatro oficios, cada uno con su caso y su página. Fila propia y
alturas iguales: metidas dentro de las puertas, la fila se estira a
la altura de la que tiene foto y las que no tienen quedan huecas. */
.caras{background:var(--papel-2);border-top:3px solid var(--negro);}
.caras-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:640px){.caras-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.caras-grid{grid-template-columns:repeat(4,1fr);gap:16px;}}
.cara{display:flex;flex-direction:column;min-width:0;background:var(--blanco);border:3px solid var(--negro);color:var(--tinta);text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 rgba(18,18,18,0);}
.cara:hover,.cara:focus-visible{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--negro);color:var(--tinta);}
/* La altura era fija —clamp(180px,26vw,236px)— y eso funcionaba en el
escritorio, donde la tarjeta va en una de cuatro columnas y queda casi
cuadrada. En el teléfono la tarjeta ocupa todo el ancho y esos mismos
180px de alto aplastaban un retrato de 720×960: object-fit:cover
recortaba frentes y barbillas. Con proporción en vez de altura, la foto
crece con la tarjeta y la cara nunca se corta.
1 columna → 4:3 · 2 columnas → 1:1 · 4 columnas → 3:4 (el retrato) */
.cara-foto{aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid var(--negro);background:var(--papel-2);}
.cara-foto>img{width:100%;height:100%;object-fit:cover;object-position:center 28%;}
@media(min-width:640px){.cara-foto{aspect-ratio:1/1;}}
@media(min-width:1080px){.cara-foto{aspect-ratio:3/4;}}
.cara-pie{display:flex;flex-direction:column;gap:7px;padding:16px 16px 18px;flex:1;}
.cara-oficio{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--rojo);}
.cara-caso{font-family:var(--cond);font-weight:700;font-size:clamp(19px,2.4vw,21px);line-height:1.14;text-transform:uppercase;letter-spacing:.4px;flex:1;overflow-wrap:break-word;}
.cara-link{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;border-bottom:3px solid var(--ama);align-self:flex-start;padding-bottom:2px;margin-top:4px;}
.cara:hover .cara-link,.cara:focus-visible .cara-link{background:var(--ama);}
/* ════ 3 · CTA FINAL SOBRE FOTO ══════════════════════════════════════
Preparado y sin usar todavía: ninguna página lleva .con-foto. Queda
listo por si más adelante se añade.
OJO — trampa de especificidad: el marco rojo que pulsa alrededor del
lo pone styles.css con `.cta-final em::after` (opacity:0 en
reposo + pulso-emergencia). NO escribir aquí `.cta-final h2 em::after`:
sube a (0,1,3), le gana al del sistema y deja la alarma encendida de
forma permanente. Aquí solo se cambia el `color`. */
.cta-final.con-foto{background:var(--negro);padding:0;}
.cta-lienzo{position:absolute;inset:0;overflow:hidden;}
.cta-lienzo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cta-lienzo .velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,18,18,.9) 0%,rgba(18,18,18,.7) 34%,rgba(18,18,18,.72) 62%,rgba(18,18,18,.92) 100%);}
.cta-lienzo .plano{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,210,0,.07) 0 2px,transparent 2px 64px),repeating-linear-gradient(90deg,rgba(255,210,0,.07) 0 2px,transparent 2px 64px);}
.cta-in{position:relative;z-index:2;padding:clamp(48px,8vw,88px) 0 clamp(52px,8vw,96px);}
.cta-final.con-foto h2{color:var(--papel);}
/* El rojo del sistema sobre negro se cae a 4:1 y no se leería. El rojo
se queda haciendo el marco que pulsa, que es donde rinde. */
.cta-final.con-foto h2 em{color:var(--ama);}
.cta-final.con-foto p{color:rgba(239,235,221,.82);}
.cta-final.con-foto .luz{background:rgba(255,255,255,.18);z-index:3;}
.cta-legal{position:relative;z-index:2;padding:0 22px 34px;font-size:13.5px;line-height:1.6;color:rgba(239,235,221,.6);text-align:center;}
/* ════ IMPRESIÓN ═════════════════════════════════════════════════════ */
@media print{
.cta-lienzo,.hero-lienzo .aclarado{display:none;}
.cta-final.con-foto{background:var(--blanco);}
.cta-final.con-foto h2,.cta-final.con-foto p,.cta-legal{color:var(--negro);}
}
/* ════ 4 · EL COMPROBANTE, DERECHO Y CENTRADO ════════════════════════
`.hero-card` nació como pieza decorativa de la portada vieja: vivía en
la columna derecha de `.hero-grid` con `justify-self:end` y un giro de
1,2° que ahí leía como un papel apoyado al descuido.
En la portada nueva ya no está en una rejilla, así que `justify-self`
no hace nada y la tarjeta se quedaba pegada a la izquierda de una
columna centrada — de ahí que se viera «tirada a un lado». Y como
ahora es el objeto principal de su sección y no un adorno lateral, el
giro sumado a la sombra de 10px la hacía ver chueca en vez de
espontánea.
Aquí se endereza y se centra. La cinta amarilla de arriba se queda:
es la que cuenta que es un papel pegado. */
.section .hero-card{transform:none;margin-left:auto;margin-right:auto;box-shadow:9px 9px 0 var(--negro);}
.section .hero-card::before{transform:translateX(-50%) rotate(-1.5deg);}
/* ════ 5 · CABECERA DE PÁGINA CON FOTO ═══════════════════════════════
Las páginas interiores eran tinta plana con una retícula tenue. Aquí
la misma cabecera recibe una fotografía detrás y un velo de tinta
encima, así que el titular en papel sigue leyéndose exactamente igual
—el contraste no baja de donde estaba— pero la página deja de ser un
rectángulo negro.
Va detrás de `.con-foto`: cualquier `.page-hero` que no la lleve se
queda como está hoy. */
.page-hero.con-foto{background:var(--negro);}
.page-hero.con-foto::before{opacity:.05;z-index:2;}
.ph-lienzo{position:absolute;inset:0;overflow:hidden;z-index:0;}
/* EL FOCO. Estas seis fotos son panorámicas 16:9 y la banda es de 3:1, así
que solo cabe la mitad de la altura: hay que decidir CUÁL mitad. Con el
34% fijo que había antes, la banda mostraba cielo y las cabezas asomaban
cortadas contra el borde de abajo — que es lo que se veía mal.
Cada foto trae el suyo en el HTML (style="--foco:62%") porque la gente no
está a la misma altura en todas: en la del blog las caras van al 44% de la
imagen y en la de contacto al 58%. El valor sitúa las caras algo por
encima del centro de la banda, que es donde no las tapa la bajada. */
.ph-lienzo>img{width:100%;height:100%;object-fit:cover;object-position:center var(--foco,62%);}
/* El velo. En angosto el texto ocupa todo el ancho, así que el velo va de
arriba abajo, más denso donde está la bajada. */
.ph-lienzo .velo{position:absolute;inset:0;pointer-events:none;opacity:var(--velo,1);
background:linear-gradient(180deg,rgba(20,18,12,.6) 0%,rgba(20,18,12,.72) 45%,rgba(20,18,12,.9) 100%);}
/* Una foto que ya viene oscura de origen —la del blog es un claroscuro
sobre fondo negro— se hunde bajo el velo entero. Esa lleva --velo en el
HTML para bajarle la fuerza sin tocar las demás. */
/* En ancho el texto se queda en la columna izquierda y la gente cabe entera
a la derecha: el velo se vuelve lateral. Oscuro donde va el titular,
despejado donde están las caras. Así el contraste del texto no baja y la
fotografía se ve de verdad en lugar de quedar bajo una capa parda. */
@media(min-width:860px){
.ph-lienzo .velo{background:linear-gradient(100deg,
rgba(20,18,12,.94) 0%,rgba(20,18,12,.9) 34%,rgba(20,18,12,.62) 60%,rgba(20,18,12,.42) 100%);}
}
.page-hero.con-foto>.wrap{position:relative;z-index:3;}
/* Deriva muy lenta de la fotografía. Veinticinco segundos por ciclo: a
esa velocidad no se percibe como movimiento sino como que la imagen
está viva. Cualquier cosa más rápida distrae de la lectura. */
@keyframes deriva{from{transform:scale(1.06) translate3d(0,0,0);}to{transform:scale(1.12) translate3d(-1.4%,-1%,0);}}
.js .ph-lienzo>img,.js .hero-lienzo>img{animation:deriva 25s ease-in-out infinite alternate;}
/* ════ 6 · ENTRADAS AL DESPLAZAR ═════════════════════════════════════
main.js ya pone `.anim` al cargar y `.en-escena` al entrar en pantalla
a todo lo que lleve [data-anima]; solo faltaba decirle qué hacer a
estas dos secciones. Las puertas y las caras entran escalonadas, que
es lo que hace que la página se sienta armada y no volcada de golpe. */
.puertas.anim .puerta,
[data-anima="caras"].anim .cara{opacity:0;transform:translateY(14px);}
.puertas.anim.en-escena .puerta,
[data-anima="caras"].anim.en-escena .cara{
animation:entra-abajo .42s cubic-bezier(.2,.8,.3,1) backwards;opacity:1;transform:none;}
@keyframes entra-abajo{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.puertas.anim.en-escena .puerta:nth-child(1){animation-delay:.02s}
.puertas.anim.en-escena .puerta:nth-child(2){animation-delay:.06s}
.puertas.anim.en-escena .puerta:nth-child(3){animation-delay:.10s}
.puertas.anim.en-escena .puerta:nth-child(4){animation-delay:.14s}
.puertas.anim.en-escena .puerta:nth-child(5){animation-delay:.18s}
.puertas.anim.en-escena .puerta:nth-child(6){animation-delay:.22s}
.puertas.anim.en-escena .puerta:nth-child(7){animation-delay:.26s}
.puertas.anim.en-escena .puerta:nth-child(8){animation-delay:.30s}
[data-anima="caras"].anim.en-escena .cara:nth-child(1){animation-delay:.04s}
[data-anima="caras"].anim.en-escena .cara:nth-child(2){animation-delay:.12s}
[data-anima="caras"].anim.en-escena .cara:nth-child(3){animation-delay:.20s}
[data-anima="caras"].anim.en-escena .cara:nth-child(4){animation-delay:.28s}
/* La regla de siempre en este sitio: sin JavaScript no se oculta nada.
Si main.js no llega, `.anim` nunca se pone y todo queda visible. */
@media(prefers-reduced-motion:reduce){
.js .ph-lienzo>img,.js .hero-lienzo>img{animation:none;}
.puertas.anim .puerta,[data-anima="caras"].anim .cara{opacity:1;transform:none;}
.puertas.anim.en-escena .puerta,[data-anima="caras"].anim.en-escena .cara{animation:none;}
}
/* ════ 7 · LA CABECERA CON FOTO NO SE COME LA PRIMERA PANTALLA ═══════
En un portátil ancho y bajo, la cabecera (446 px) más el respiro de
la sección siguiente (110 px) dejaban el formulario de la calculadora
y los canales de contacto por debajo del pliegue: se veía la foto y
nada que hacer con ella. Aquí la cabecera se compacta y la sección
que va detrás arranca antes. Lo que se recorta es el aire, no la
fotografía: la banda sigue igual de ancha. */
.page-hero.con-foto{padding:26px 0 34px;}
.page-hero.con-foto .breadcrumb{margin-bottom:12px;}
.page-hero.con-foto .page-eyebrow{margin-bottom:12px;}
.page-hero.con-foto h1{font-size:clamp(34px,5.6vw,62px);}
.page-hero.con-foto .lead{margin-top:13px;font-size:clamp(16.5px,1.7vw,18px);}
.page-hero.con-foto + .hazard + .section,
.page-hero.con-foto + .section{padding-top:clamp(44px,5vw,58px);}