/* Market Fortune · EL HEAD DE LAS SUBPAGINAS, CON LA ANATOMIA DEL HOME.
Se genera; no editar a mano. Numeros copiados del hero del home, no estimados:
alto 87vh, contenido centrado, titular 58px, bajada 19,5px con tope de 62ch.
Los nombres de clase salen de MEDIR cada pagina, no de suponer que todas dicen "hero":
/precios usa .pr-hero, /charla usa .port y /reporte-ejemplo no tiene seccion de portada.
/tienda queda fuera por orden expresa de David (su hero es de compra, no de portada). */
/* la altura del home, no la pantalla entera */
body:not(.home) main > section.hero,
body:not(.home) > section.hero,
body:not(.home) main > section.pr-hero,
body:not(.home) > section.pr-hero,
body:not(.home) main > section.port,
body:not(.home) > section.port{
min-height:min(87vh,780px) !important;
display:grid;align-items:center;align-content:center}
/* el contenido, centrado como en el home */
body:not(.home) .hero > .wrap,
body:not(.home) .hero > div:not(.capa):not(.velo),
body:not(.home) .pr-hero > .wrap,
body:not(.home) .port > .caja{
text-align:center}
body:not(.home) .hero h1,
body:not(.home) .pr-hero h1,
body:not(.home) .port h1,
body:not(.home) .hoja > h1{
font-size:clamp(34px,4vw,58px) !important;
line-height:1.06 !important;
letter-spacing:-.012em !important;
text-align:center !important;
margin-inline:auto;
max-width:20ch}
body:not(.home) .hero .lead,
body:not(.home) .hero > .wrap > p,
body:not(.home) .pr-hero > p,
body:not(.home) .port .lead,
body:not(.home) .hoja > p.sub{
font-size:19.5px !important;
line-height:1.6 !important;
text-align:center !important;
max-width:62ch;
margin-inline:auto !important}
body:not(.home) .hero .mini,
body:not(.home) .hero .eyebrow,
body:not(.home) .port .mini{
display:block;text-align:center}
/* los botones del hero, centrados y juntos, como en el home */
/* el contenedor real se llama .actions. Los otros tres nombres los adivine y ninguno existia:
basta con leer la cadena de padres del boton en vez de suponerla. Se dejan los cuatro por si
alguna pagina usa otro. .acciones si existe: es el de /charla. */
body:not(.home) .hero .actions,
body:not(.home) .hero .cta,
body:not(.home) .hero .botones,
body:not(.home) .hero .acciones,
body:not(.home) .pr-hero .actions,
body:not(.home) .port .acciones{
justify-content:center !important;flex-wrap:wrap}
body:not(.home) .hero a.btn,
body:not(.home) .hero button.btn,
body:not(.home) .port a.btn{margin-inline:2px}
/* /precios no enlaza cb-page.css, asi que no tiene la maquinaria del hero: su body traia
--hero desde siempre y no habia ninguna regla que la consumiera. 780px de negro con el
titular flotando es peor que los 275px de antes: la altura del home sin el contenido del
home. Aqui va el hero completo, autosuficiente, con la misma foto, el mismo velo y el mismo
apilado que usan las demas. */
body:not(.home) .pr-hero{position:relative;overflow:hidden;background:#0b0a08;
gap:12px;padding:122px 0 58px}
body:not(.home) .pr-hero::before{content:"";position:absolute;inset:0;
background:var(--hero) 50% 44%/cover no-repeat}
body:not(.home) .pr-hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(4,22,14,.88) 0%,rgba(4,22,14,.16) 32%,rgba(11,10,8,.55) 68%,rgba(11,10,8,.97) 100%),radial-gradient(114% 84% at 50% 76%,rgba(4,22,14,.9) 0%,rgba(7,18,12,.42) 46%,rgba(11,10,8,0) 78%)}
body:not(.home) .pr-hero > *{position:relative;z-index:2}
/* /charla centraba el TEXTO dentro de una caja que seguia anclada a la izquierda: el titular se
centraba en los 1240px del contenedor y la bajada dentro de su propio bloque de 46ch pegado al
margen, asi que la portada quedo con tres centros distintos. Centrar texto no centra su caja:
con ancho maximo hace falta margin-inline auto en CADA bloque. */
body:not(.home) .port p.bajada{font-size:19.5px !important;line-height:1.6 !important;
text-align:center !important;max-width:62ch;
margin-left:auto !important;margin-right:auto !important}
body:not(.home) .port .rot,
body:not(.home) .port .pie-port{display:block;text-align:center !important;max-width:62ch;
margin-left:auto !important;margin-right:auto !important}
body:not(.home) .port .acciones{display:flex;justify-content:center !important;
flex-wrap:wrap;gap:12px}
/* /precios no enlaza cb-page.css, asi que tampoco hereda .actions ni .btn: sus dos botones
saldrian como texto pelado. Se definen aqui con los valores de la casa. Van EN EL GENERADOR y
no apilados sobre el css ya escrito, porque lo apilado se pierde en la proxima regeneracion. */
body:not(.home) .pr-hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
body:not(.home) .pr-hero .btn{display:inline-flex;align-items:center;gap:9px;
padding:14px 26px;border-radius:999px;text-decoration:none;cursor:pointer;
font-family:'EB Garamond',Georgia,serif;font-size:13.5px;letter-spacing:.09em;
text-transform:uppercase;font-weight:600;
background:linear-gradient(180deg,#e8d08a,#c7a24a);color:#2a1d05;border:1px solid #c7a24a}
body:not(.home) .pr-hero .btn.ghost{background:transparent;color:#f7f1e7;border:1px solid rgba(227,200,115,.55)}
body:not(.home) .pr-hero .btn:hover{filter:brightness(1.06)}
/* VELO SUAVE. La captura de la mesa online es un producto oscuro por diseno: bajo el velo de
siempre se apagaba a 0,42 veces la luz de la referencia y dejaba de leerse como una foto.
Aqui NO se cambia la imagen, porque esa imagen es de lo que hablan esas dos paginas: se
afloja el velo. Es seguro por medida y no por gusto, porque esa captura da 16:1 de contraste
contra el papel de marca y aun a media capa se queda muy por encima del 4,5:1 de la norma. */
body[data-velo="suave"] .hero::after{opacity:.9}
body[data-velo="suave"] .hero::before{filter:brightness(.9) saturate(1.06) contrast(1.03)}
/* ------------------------------------------------------------------------------------------
PANTALLA NEGRA TRASLUCIDA EN VEZ DE ARO. Orden de David 2026-08-28:
"el aro negro reducelo y mejor coloca una pantalla negra traslucida encima de las fotos pa
que los textos se lean mejor".
El velo de la casa era un degradado muy desigual (0,88 arriba, 0,16 al tercio, 0,97 abajo)
MAS un radial al 90% anclado en la esquina: ese es el aro. Resultado: la foto se apagaba por
los bordes y aun asi el texto caia en la zona de 0,16, la mas clara. O sea, mucho negro donde
no hacia falta y poco donde si.
Lo que va ahora es literalmente una pantalla: una capa NEGRA PLANA del 56% sobre toda la foto,
mas un aro suavisimo del 26% que solo insinua el borde. Menos negro total, mejor repartido:
la foto se ve mas y el texto se lee mejor, que era el objetivo de las dos frases.
------------------------------------------------------------------------------------------ */
.hero::after,
body:not(.home) .pr-hero::after{
background:
linear-gradient(0deg,rgba(6,12,9,.30),rgba(6,12,9,.30)),
radial-gradient(148% 104% at 50% 54%,rgba(4,10,7,0) 52%,rgba(4,10,7,.14) 100%) !important}
/* /charla lleva su foto como ![]()
dentro del markup, no como fondo: su pantalla va aparte. */
body:not(.home) .port{position:relative}
body:not(.home) .port > img.fondo{filter:none}
body:not(.home) .port::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(0deg,rgba(6,12,9,.30),rgba(6,12,9,.30)),
radial-gradient(148% 104% at 50% 54%,rgba(4,10,7,0) 52%,rgba(4,10,7,.14) 100%)}
body:not(.home) .port > .caja{position:relative;z-index:2}
/* EL BLOQUE DEL HEADER, A LA ALTURA DEL HOME. David 2026-08-28: "los botones muy abajo, creo
que hay que subir el texto" en /salas-vip-aerolineas, /ensenar-a-invertir-a-los-hijos,
/gestion-de-riesgo-y-trading y /regalo.
Medido: el home pone su titular a 189px del borde del hero y deja 289px libres debajo. Esas
paginas lo ponian a 243 y dejaban 150. La causa es un relleno ASIMETRICO (122 arriba, 58
abajo) sobre un contenedor que ademas centra: el centrado reparte el sobrante, pero el
relleno desigual ya habia empujado todo hacia abajo. Con relleno simetrico el bloque cae
solo donde cae el del home, sin numeros magicos por pagina. */
body:not(.home) main > section.hero,
body:not(.home) > section.hero,
body:not(.home) main > section.pr-hero,
body:not(.home) > section.pr-hero{
padding-top:clamp(74px,8vh,96px) !important;
padding-bottom:clamp(74px,8vh,96px) !important}
/* EL REMATE DEL TITULAR EN PINYON. Valores copiados de .escrita en /charla, no estimados:
1.34em, interlinea .82, oro de marca. Se aplica al remate DENTRO del titular de un header,
nunca a un titular entero: Pinyon es un acento, no una fuente de display. */
.hero h1 em,.hero h1 .foil,.hero h1 .escrita,
.pr-hero h1 em,.pr-hero h1 .foil,
.port h1 .escrita,.port h1 em,
.store-hero h1 em,
.hoja > h1 em{
font-family:'Pinyon Script',cursive !important;
font-style:normal !important;
font-weight:400 !important;
letter-spacing:0 !important;
font-size:1.34em !important;
line-height:.82 !important;
-webkit-font-smoothing:antialiased;
padding-bottom:.06em;
/* EL FOIL, que esta misma regla apagaba. Iba con color, -webkit-text-fill-color y
background:none, los tres en !important: la animacion corria, el degradado estaba
puesto por mf-bits.js, y la letra salia en oro plano porque estas tres lineas la
repintaban. Tres !important de PINTURA para un problema de TIPOGRAFIA. */
background-image:linear-gradient(100deg,#a8801f 0%,#c7a24a 26%,#fbeab0 45%,#fff8dd 50%,
#fbeab0 55%,#c7a24a 74%,#a8801f 100%) !important;
background-size:280% 100% !important;
animation:barrido 6.5s linear infinite}
/* Pinyon sube mucho y baja poco: el titular necesita algo mas de interlinea para no chocar. */
.hero h1:has(em),.hero h1:has(.foil),.hero h1:has(.escrita),
.pr-hero h1:has(em),.port h1:has(.escrita){line-height:1.16 !important}
/* --- la fila de oferta: el boton no parte el texto en dos --- */
.mf-oferta .accion .btn{white-space:nowrap;min-width:max-content}
@media(min-width:901px){.mf-oferta .caja{grid-template-columns:132px 1fr auto auto}}
/* --- /empresas: los tres pares que estaban pegados --- */
/* medidos en produccion a 880 y 1440: 26px, 14px y 38px de aire. El resto del sitio va bien,
asi que esto NO es una regla global de ritmo: es la correccion de una pagina. */
body[data-publico="empresas"] .mfd h2,
body[data-publico="empresas"] .mfd h3,
body[data-publico="empresas"] .mfp-precio h2{margin-top:clamp(38px,4vw,64px)}
body[data-publico="empresas"] .mfd .actions,
body[data-publico="empresas"] .mfd .acciones{margin-bottom:clamp(30px,3.4vw,52px)}
body[data-publico="empresas"] .mfd h2:first-child,
body[data-publico="empresas"] .mfd h3:first-child{margin-top:0}
/* ------------------------------------------------------------------------------------------
EL ENCUADRE DE /tienda. David 2026-08-28: "en tienda tambien esta el encuadre, textos muy
abajo".
Medido, y son dos cosas a la vez:
· el bloque arranca a 212px del borde del hero, por un relleno superior de 13vh que se suma
a los 114px de barra: el texto empieza a un tercio de la pantalla;
· el hero reserva 900px (100vh) y su contenido ocupa 451. Debajo quedan 409px de nada, y en
tableta 469. La composicion no esta "abajo": esta flotando en una caja el doble de grande.
LA COMPOSICION NO SE TOCA. David la bloqueo por escrito: buybox a la izquierda, copy a la
derecha, cabecera de pantalla completa. Aqui no se mueve ninguna de esas tres cosas. Lo que
se corrige es el AIRE: menos relleno arriba, y un tope para que en pantallas muy altas el
hero no siga estirandose por encima de lo que su contenido necesita.
------------------------------------------------------------------------------------------ */
.store-hero{padding-top:clamp(52px,6.4vh,86px) !important;
padding-bottom:clamp(44px,5vh,66px) !important;
min-height:min(100svh,830px) !important}
@media(max-width:900px){
.store-hero{min-height:auto !important;
padding-top:clamp(40px,5vh,64px) !important;
padding-bottom:clamp(40px,5vh,64px) !important}}
/* LA BARRA, OPACA DONDE NO HAY FOTO. David: "la pagina del reporte se sigue viendo la barra
transparente cuando debe ser verde oscura como las demas". La barra solo se pinta al hacer
scroll (header.fijo). Sobre una foto a sangre eso es deliberado; /reporte-ejemplo no tiene
foto sino una HOJA BLANCA, y la barra flotaba sobre blanco. Las paginas sin portada
fotografica la llevan pintada desde arriba. */
body[data-barra="opaca"] #hd{background:rgba(4,22,14,.97);
border-bottom:1px solid rgba(227,200,115,.16)}
/* VELO FUERTE para las dos portadas CLARAS. Con la pantalla al 30% que pidio David, la foto de
tarima (0,285 de luminancia, la mas clara de la fototeca) deja la bajada en 3,6:1 y el piso
de la norma son 4,5:1 para texto normal. No se le baja el velo a todo el sitio por una foto:
esa foto lleva el suyo. Es medida, no gusto. */
/* ------------------------------------------------------------------------------------------
LA TERCERA TIPOGRAFIA NO LLEGABA A LAS SECCIONES. David: "no entiendo por que los headers
si usan todas las tipografias y las demas zonas que tu has colocado no".
Medido, y no era lo que parecia. Ninguna zona usa "todas": el sitio tiene TRES caras y en
las subpaginas solo se veian dos. La tercera, Pinyon Script, aparecia unicamente en los
separadores. Los titulares de seccion YA PEDIAN Pinyon y computaban Playfair.
La causa: la variable --script esta declarada en #hd,.anuncio,.velo,.panel,.arriba, o sea
DENTRO DE LA BARRA. Un .acc que vive en un h2 de seccion nunca ve esa variable, var() no
resuelve y el font-family cae al heredado. En el home si funciona porque el home declara
sus variables aparte. Enumerando las reglas que casan con el elemento aparecia UNA SOLA, y
era la correcta: no era una pelea de especificidad, era una variable fuera de alcance.
Se declara a nivel de documento y ademas se escribe el literal, para no depender de que
ninguna otra hoja llegue primero.
------------------------------------------------------------------------------------------ */
:root{--script:"Pinyon Script",cursive}
body:not(.home) .acc{font-family:"Pinyon Script",cursive !important;
letter-spacing:0;color:var(--gold,#e3c873);line-height:.82;font-size:1.38em}
body:not(.home) .sep .rot{font-family:"Pinyon Script",cursive}
/* ------------------------------------------------------------------------------------------
EL AZUL DE LA CASA ENTRA A LA PALETA DE SECCIONES. David 2026-08-30: "no estas jugando con
los colores vinotinto y azul en las zonas, y por eso se ve monotona".
Habia --burgundy y DOS verdes que a ojo son el mismo: .section.paper computa #0c2c1e y
.section.green #06291c. Por eso una pagina con paper|green se ve igual que una con
paper|paper: no eran dos ritmos, era el mismo repetido.
El azul no se inventa: es el cobalto de Lord Bluxon (#2D5DA8) en su version profunda, para
que el papel de marca siga por encima del piso de contraste. Medido: 12,6:1.
------------------------------------------------------------------------------------------ */
:root{--azul-hondo:#0f2545;--burgundy:#5c0a18}
.section.azul{background:var(--azul-hondo)}
.section.azul h2,.section.azul h3,.section.azul p,.section.azul li{color:#f7f1e7}
.section.azul .mini{color:#9dc0f0}
.section.azul .acc{color:#e3c873}
/* y los dos verdes dejan de ser el mismo: green se hunde para que el contraste entre
secciones se note al hacer scroll, que es donde vive la sensacion de ritmo */
.section.green{background:#04180f}
/* ------------------------------------------------------------------------------------------
LAS FORMAS DE ENTRAR, CON FOTO. David 2026-08-30: "la estructura visual de las tres formas
de entrar en todas las subpaginas es precaria, no tiene imagenes, no trabaja deseo,
menciona cosas tecnicas". Tenia razon: eran dos tarjetas de texto con una lista de
departamentos. Nadie desea "marketing y obsequios institucionales".
La foto va arriba, a sangre, con el mismo redondeo de la tarjeta y una altura contenida
para que no se coma el texto: acompana, no compite.
------------------------------------------------------------------------------------------ */
.mfo .rej article{overflow:hidden;padding-top:0}
.mfo-foto{display:block;width:calc(100% + 2px);margin:-1px -1px 18px;height:clamp(128px,17vw,196px);
object-fit:cover;filter:brightness(.82) saturate(1.04)}
.mfo .rej article > .num,.mfo .rej article > h3,.mfo .rej article > .para,
.mfo .rej article > .quien,.mfo .rej article > .btn{margin-left:clamp(18px,2vw,26px);
margin-right:clamp(18px,2vw,26px)}
.mfo .rej article > a.btn,.mfo .rej article > a.btn.ghost{margin-bottom:clamp(18px,2vw,26px)}
@media(prefers-reduced-motion:reduce){.mfo-foto{filter:brightness(.86)}}
body[data-velo="fuerte"] .hero::after,
body[data-velo="fuerte"] .port::after{
background:
linear-gradient(180deg,rgba(4,10,7,.52) 0%,rgba(4,10,7,.58) 46%,rgba(4,10,7,.72) 100%)
!important}
/* Las tres variables que NO se miden en la mesa digital, marcadas en la rejilla. El texto ya
decia "la mesa digital publica 12; las tres restantes solo se leen en la velada presencial",
pero debajo pintaba quince tarjetas identicas: el lector cuenta quince y lee doce, y se queda
con lo que ve. No se quitan, porque el modelo completo es lo que hace valiosa la velada. */
.arch-card.arch-velada{position:relative;border-color:rgba(227,200,115,.42)}
.arch-card .arch-tag{display:inline-block;margin-bottom:7px;
font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:#0b0a08;background:linear-gradient(180deg,#e8d08a,#c7a24a);
padding:3px 8px;border-radius:999px;font-weight:600}
/* ------------------------------------------------------------------------------------------
EL BOTON DE COMPRAR, SIEMPRE A LA VISTA. David 2026-08-28: "en las zonas donde estan los 8
productos que el boton de comprar cotizar este fijo no solo al pasar el cursor, y que al
pasarlo igual tenga una animacion pa acompanar la que ya esta de la foto".
Estaba en opacity:0 con translateY(10px) y solo aparecia con :hover. En un telefono NO HAY
hover: el boton de comprar de los ocho productos no existia para quien entra desde el movil,
que es por donde entra casi todo el mundo. Un carril de venta invisible en la mitad del
trafico no es un detalle de diseno.
La animacion no se pierde, cambia de trabajo: ya no sirve para REVELAR el boton (que debe
estar), sino para acompanar el cruce de fotos que la tarjeta ya hace. El boton sube dos
pixeles, el oro se aviva y la flecha avanza, al mismo ritmo que la foto.
------------------------------------------------------------------------------------------ */
.p .add{opacity:1 !important;transform:none !important;
transition:transform .28s ease,filter .28s ease,box-shadow .28s ease !important}
.p:hover .add,.p:focus-within .add{opacity:1 !important;
transform:translateY(-2px) !important;filter:brightness(1.07) saturate(1.04);
box-shadow:0 12px 24px -14px rgba(0,0,0,.85)}
.p .add .fl,.p .add .arrow{transition:transform .28s ease}
.p:hover .add .fl,.p:hover .add .arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
.p .add,.p:hover .add,.p .add .fl{transition:none !important;transform:none !important}}
/* ------------------------------------------------------------------------------------------
FUERA EL REDONDEADO NEGRO. David, dos veces: "los halos negros de las fotos reducelos" y
luego "yo me refiero a el redondeado negro, disminuirlo, la foto casi no se ve, pero dejar la
imagen con una pelicula traslucida oscura encima pa que las letras se lean mejor".
Yo habia estado bajando el VELO (56% a 30%) y el problema no era el velo. Medido con la
captura real: del centro del hero a la esquina la luz cae 30 a 39 veces en las subpaginas,
contra 8,6 en el home. Eso no lo hace una capa del 30%.
La causa esta en cb-page.css: en escritorio, .hero::before va con inset:19% 15% 27% MAS una
mascara radial que desvanece la foto a nada en el 99%. O sea que la foto es un CIRCULO metido
180px hacia dentro por cada lado, y todo lo de fuera es el fondo plano de la seccion. Por eso
"la foto casi no se ve": literalmente no esta ahi.
Ahora la foto ocupa el hero entero y lo unico que la oscurece es la pelicula plana, que es
exactamente lo que David pidio. La legibilidad se vuelve a medir despues, no se supone.
------------------------------------------------------------------------------------------ */
@media(min-width:900px){
body:not(.home) .hero::before{
inset:0 !important;
-webkit-mask-image:none !important;mask-image:none !important;
background-size:cover !important;background-position:50% 44% !important}
}
/* y en el home se suaviza el mismo recurso: el aro se abre y deja de morder la foto */
.home .hero .capa.escena img{
-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 68%,rgba(0,0,0,.80) 88%,rgba(0,0,0,.45) 100%) !important;
mask-image:radial-gradient(closest-side at 50% 50%,#000 68%,rgba(0,0,0,.80) 88%,rgba(0,0,0,.45) 100%) !important}
/* ------------------------------------------------------------------------------------------
AIRE EDITORIAL ENTRE TITULAR Y CUERPO. David 2026-08-31, tres veces en el mismo mensaje:
"estas dos frases pegadas, los bloques necesitan aire", "bloque compacto sin aire carente de
lujo", "y en todas estas pasa lo mismo".
Medido a 390px con las animaciones apagadas: 116 pares por debajo de 18px en 24 paginas.
La causa no era que faltara la regla, es que la que habia (cb-page.css) SE OLVIDO DE h3 + p,
y todos los titulares de tarjeta del sitio son h3. Los 15px que si aplicaban quedaban cortos
contra un titular de 26 a 44px.
El lujo es el espacio que uno se puede permitir dejar vacio. Un bloque compacto dice lo
contrario, por bien escrito que este.
------------------------------------------------------------------------------------------ */
:root h1 + p,:root h2 + p,:root h3 + p,
:root h1 + .lead,:root h2 + .lead,:root h3 + .lead,
:root h2 + .para,:root h3 + .para,
:root h2 + .baja,:root h3 + .baja,
:root h2 + .sub,:root h3 + .sub{margin-top:clamp(19px,2.4vw,30px)}
/* el antetitulo tambien necesita separarse de su titular, o los tres renglones se leen como uno */
:root .mini + h1,:root .mini + h2,:root .mini + h3,
:root .rot + h1,:root .rot + h2,:root .rot + h3{margin-top:clamp(10px,1.2vw,15px)}
/* dos componentes traen su propio margen y ganan por especificidad, asi que se les
contesta en su terreno y no con un !important, que solo esconderia el siguiente */
:root .mfp-precio .cab .baja{margin-top:clamp(19px,2.3vw,26px)}
/* y la tarjeta de "las tres formas de entrar", donde una regla mia pisaba el margen a cero */
.mfo .rej article > h3 + .para{margin-top:clamp(18px,2vw,24px)}
/* EL HERO DE LA TIENDA NO SE TOCA. David: "buybox izquierda + copy derecha, no reinterpretar". */
.store-hero,.store-hero *{text-align:initial}
.store-hero h1{text-align:left !important;margin-inline:0 !important;max-width:none}
@media(max-width:760px){
/* El alto NO se reduce en movil. La v3 bajaba a min(80vh,620px) y dejaba las subpaginas 160px
mas cortas que el home en el telefono, que es justo donde David vio el problema. El hero del
home es la pantalla menos la cabecera, y 87vh cae a menos de 20px de eso en un telefono de
844 de alto. La bajada si baja de cuerpo, que es otra cosa. */
body:not(.home) .hero .lead,
body:not(.home) .hero > .wrap > p,
body:not(.home) .pr-hero > p,
body:not(.home) .hoja > p.sub{font-size:17.5px !important}
}
/* ------------------------------------------------------------------------------------------
EL ORO QUE SE MUEVE. David 2026-08-31: "las letras que estan doradas en los headers de cada
pagina, desde el home y los subs, no les has puesto el efecto dorado ... Nadie se quiere ir,
domina la mesa, etc., todas esas en el efecto dorado que tenemos".
VA AL FINAL DE LA HOJA A PROPOSITO. La regla .section.azul .acc vive mas arriba en
este mismo archivo y pesa lo mismo que la regla de aqui abajo (0,2,0): a igual peso gana la
ultima, asi que la posicion ES el mecanismo. Ponerlo antes obligaria a un !important, y un
!important de pintura es exactamente lo que rompio el foil de los titulares.
DONDE SI Y DONDE NO. El barrido recorta el fondo al texto: la letra se pinta con un degradado
y pierde masa. En display grande eso es material; en 11px es una letra mas fina y con menos
contraste. Por eso entra el acento de seccion (58-63px) y la frase del separador (38px), y NO
entran los antetitulos de 11px, las cifras de precio (un precio que se mueve se lee inestable)
ni el del cuerpo, que es enfasis de lectura y no escenografia.
------------------------------------------------------------------------------------------ */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
/* el remate del titular de cada header entra aqui, no en su propia regla: alli faltaba el
recorte al texto y lo aportaba por casualidad la clase que inyecta mf-bits.js, que no llega
a .escrita en /charla. Media regla prestada de otro archivo es un fallo esperando fecha. */
:root .hero h1 em,:root .hero h1 .foil,:root .hero h1 .escrita,
:root .pr-hero h1 em,:root .pr-hero h1 .foil,
:root .port h1 .escrita,:root .port h1 em,
:root .store-hero h1 em,
:root .hoja > h1 em,
:root .acc,
:root .sep .rot,
:root .section .acc{
background-image:linear-gradient(100deg,#a8801f 0%,#c7a24a 26%,#fbeab0 45%,#fff8dd 50%,
#fbeab0 55%,#c7a24a 74%,#a8801f 100%);
background-size:280% 100%;
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
animation:barrido 6.5s linear infinite}
/* el azul de seccion repintaba el acento en oro solido y lo dejaba fuera del efecto */
:root .section.azul .acc{color:transparent;-webkit-text-fill-color:transparent}
}