/* ========================================================================= LEANDRO BÁEZ FOTOGRAFÍA — ACTUALIZACIÓN VISUAL DE LA LANDING (v2) ========================================================================= QUÉ ES ESTE ARCHIVO Es la piel nueva de la portada, y NADA MÁS que de la portada. Todo lo que hay acá adentro está encerrado en body[data-page="landing"] , que es un atributo que solo tiene index.html. El blog, los recursos, las páginas de gracias, privacidad, el 404 y las tres landings de presupuesto siguen viéndose exactamente igual que antes: este archivo ni las toca. POR QUÉ VA APARTE Y NO DENTRO DE global.css Para que revertir sea de un renglón: si algún día no te gusta, borrás la línea que lo carga en index.html y la portada vuelve al diseño anterior, sin haber tocado una coma del CSS que comparten todas las demás páginas. EL LENGUAJE VISUAL, EN CUATRO IDEAS 1. Nada redondo. Todo el sistema pasa a esquinas rectas y filetes de 2px. La única excepción a propósito son las fechas del calendario, que se quedan redondas. 2. Archivo en peso 800, muy apretada. Los titulares mandan. 3. Las grillas se separan con 2px de luz, no con aire: las tarjetas se tocan y entre ellas queda una línea fina y clara. 4. El latón (#C2A25E) sigue siendo el acento, pero ahora también corre como un brillo animado sobre las frases clave. ========================================================================= */ /* ========================================================================= 00 · TOKENS DE LA PORTADA Se redefinen sobre el : todo lo que en global.css usa var(--r-md), var(--r-pill), etc. queda recto de golpe, sin tener que reescribir cada componente uno por uno. ========================================================================= */ body[data-page="landing"]{ /* Forma: cero redondeo en todo el sistema */ --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-pill: 0px; /* Líneas: antes eran de latón al 16%; ahora son marfil y de 2px, que es lo que le da el aire de ficha técnica al conjunto. */ --line: rgba(244,241,232,.14); --line-2: rgba(244,241,232,.24); --line-ink: rgba(244,241,232,.14); /* Grises verdosos del rediseño */ --muted: #93A08F; --ink-2: #C9D0C4; /* Ritmo: un poco más ancho y con más aire lateral */ --max: 1200px; --pad: clamp(20px, 5vw, 56px); --sp: clamp(60px, 10vw, 132px); /* Color de la línea fina que se ve entre las celdas de las grillas */ --hair: rgba(244,241,232,.13); font-family:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing:-.005em; } /* ========================================================================= 01 · TIPOGRAFÍA — Archivo en todo global.css pide Fraunces o Manrope en un montón de componentes sueltos. En vez de perseguirlos uno por uno con reglas separadas, se listan todos acá y se los manda a la misma familia. ========================================================================= */ body[data-page="landing"] :is( h1, h2, h3, h4, em, .kw, .kw-glow, .eyebrow, .btn, .brand-text, .brand-text small, .folio, .footer-col h3, .trust-item strong, .cal-titulo, .plan .rango, .plan .rango-pre, .plan .rango small, .duda .n, .pq-text, .pq-mark, .pq-text-2, .vsl-beat span, .google-strip strong, .promesa-frase, .step .num, .pago strong, .toc h4, .port-filtro, .hero-svc, .card-tag, .prose blockquote, .stat strong, .testi-who strong, .pull-quote blockquote, .pull-quote cite, .todo, .cal-mes-badge ){ font-family:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; font-variation-settings:normal; } body[data-page="landing"] :is(h1,h2,h3,h4){ font-weight:800; text-wrap:balance; overflow-wrap:break-word; } body[data-page="landing"] h1{ font-size:clamp(30px,6.6vw,56px); line-height:.98; letter-spacing:-.035em; } body[data-page="landing"] h2{ font-size:clamp(31px,7.2vw,64px); line-height:1; letter-spacing:-.035em; } body[data-page="landing"] h3{ font-size:clamp(17px,2.3vw,25px); line-height:1.16; letter-spacing:-.02em; } body[data-page="landing"] h4{ font-size:clamp(15px,1.8vw,18px); line-height:1.3; letter-spacing:-.015em; } body[data-page="landing"] p{ font-size:clamp(14.5px,1.6vw,17px); line-height:1.6; } body[data-page="landing"] .lead{ color:var(--muted); line-height:1.6; } body[data-page="landing"] strong, body[data-page="landing"] b{ font-weight:800; color:var(--ink); } body[data-page="landing"] .small{ font-size:12.5px; } /* --- El brillo dorado ----------------------------------------------------- Reemplaza a la itálica de latón. Cada dentro de un titular de la portada se convierte en esto: el texto se recorta sobre un degradado. Antes corría en loop infinito (8s, para siempre, mientras la página estuviera abierta). Con ~10 frases usando este efecto en toda la landing, un brillo que nunca para deja de leerse como énfasis — pasa a ser ruido de fondo que el ojo aprende a ignorar. Ahora pasa UNA sola vez, cuando la frase entra en pantalla al scrollear (lo dispara brilloAlEntrar() en landing-v2.js agregando la clase .lbv2-shine-play), y se queda quieto en el color final — que por cómo está armado el degradado, es prácticamente el mismo tono cálido con el que arrancó. Sin JS (o con "reducir movimiento" activado) el texto se ve exactamente igual, solo que sin el pase de brillo: nunca queda roto ni en blanco. */ @keyframes lbv2-brillo{ from{ background-position:0% 50%; } to { background-position:200% 50%; } } body[data-page="landing"] :is(h1,h2,h3) em, body[data-page="landing"] :is(h1,h2,h3) .kw, body[data-page="landing"] .kw-glow, body[data-page="landing"] .brillo{ font-family:inherit; font-style:normal; font-weight:800; color:transparent; text-shadow:none; background-image:linear-gradient(100deg,#F4F1E8 0%,#DCC28A 26%,#C2A25E 50%,#DCC28A 74%,#F4F1E8 100%); background-size:220% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* Recién corre cuando entra en pantalla, y una sola vez. */ body[data-page="landing"] .lbv2-shine-play{ animation:lbv2-brillo 1.7s cubic-bezier(.23,1,.32,1) both; } /* "Pero algo te preocupa." sigue cayendo a su propio renglón, pero con el brillo en vez del color arcilla. */ body[data-page="landing"] .problema h2 em{ display:block; } @media (prefers-reduced-motion: reduce){ body[data-page="landing"] :is(h1,h2,h3) em, body[data-page="landing"] .kw-glow, body[data-page="landing"] .brillo, body[data-page="landing"] .lbv2-shine-play{ animation:none !important; background-position:50% 50%; } } /* Micro-etiqueta: 11px, peso 800, muy separada. Es la voz de "ficha técnica" que recorre toda la página. */ body[data-page="landing"] .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); gap:10px; } body[data-page="landing"] .eyebrow::before{ width:26px; height:2px; opacity:1; } /* ========================================================================= 02 · ENCABEZADO DE CAPÍTULO Antes: un numeral gigante en serif itálica. Ahora: la línea de ficha del rediseño — 01 — LA DIFERENCIA ———————— El filete de la derecha se sigue dibujando al ritmo del scroll, igual que antes (lo maneja folioScrub() en app.js con la variable --fp). ========================================================================= */ body[data-page="landing"] .sec-head:has(.folio){ max-width:none; } /* ARREGLO: esta ficha (número + nombre + filete) tiene que verse igual en TODAS las apariciones, no solo dentro de un .sec-head. El "04 — Quién te fotografía" de Sobre mí (.folio-about) no vive dentro de un .sec-head — vive suelto arriba de la foto — así que con el selector limitado a ".sec-head:has(.folio) .folio" se quedaba con el tamaño VIEJO del numeral gigante (clamp 52-84px, pensado para un solo "04" enorme) pero ahora con la etiqueta de texto larga metida adentro: "Quién te fotografía" se dibujaba a ese mismo tamaño gigante y se salía del contenedor. Por eso la regla de acá abajo lleva DOS selectores: uno sin ancestro (para .folio-about) y otro repitiendo ".sec-head:has(.folio) .folio" con la MISMA especificidad que la regla vieja de global.css que compite por el mismo elemento — si acá solo hubiera el selector simple, en cualquier folio que SÍ está dentro de un .sec-head perdería contra esa regla vieja (3 clases de peso) por tener menos peso (2 clases), y volvería el numeral gigante también ahí. No alcanza con poner esta hoja después: en CSS, a igual carga de código fuente, gana quien pesa más — no quien está más abajo en el archivo. */ body[data-page="landing"] .folio, body[data-page="landing"] .sec-head:has(.folio) .folio{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:11px; font-weight:800; font-style:normal; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); opacity:1; line-height:1.3; margin:0 0 clamp(18px,3.4vw,30px); } body[data-page="landing"] .folio-num{ flex:none; display:inline-flex; gap:.55em; } /* La rayita larga entre el número y el nombre del capítulo */ body[data-page="landing"] .folio-num::after{ content:"—"; opacity:.75; } body[data-page="landing"] .folio-label{ flex:none; white-space:nowrap; } body[data-page="landing"] .folio::after, body[data-page="landing"] .sec-head:has(.folio) .folio::after{ content:""; flex:1 0 40px; height:2px; background:currentColor; opacity:.32; margin-left:2px; transform:scaleX(var(--fp, 0)); transform-origin:left; transition:transform .1s linear; } @media (prefers-reduced-motion: reduce){ body[data-page="landing"] .folio::after, body[data-page="landing"] .sec-head:has(.folio) .folio::after{ transition:none; } } /* El antetítulo se vuelve redundante: el capítulo ya dice de qué se trata. */ body[data-page="landing"] .sec-head:has(.folio) .eyebrow{ display:none; } body[data-page="landing"] .sec-head h2{ margin:0 0 18px; max-width:19ch; } body[data-page="landing"] .sec-head .lead{ margin:0; max-width:52ch; font-size:clamp(15px,1.6vw,18px); } /* Toda la portada se alinea a la izquierda, incluso donde el HTML todavía dice "center". El centrado es lo que hacía que la página se leyera como una plantilla; la columna a la izquierda es lo que le da aire editorial. */ body[data-page="landing"] .center{ text-align:left; } body[data-page="landing"] .center .lead, body[data-page="landing"] .sec-head.center, body[data-page="landing"] .center .sec-head{ margin-left:0; margin-right:0; } /* La cinta de estadísticas es la excepción: ahí cada celda es una ficha y el número tiene que ir centrado en su casillero. */ body[data-page="landing"] .trust-inner{ text-align:center; } /* ========================================================================= 03 · BOTONES Rectángulos macizos, texto en mayúsculas apretado, sin sombras de color. El levantar-al-pasar-el-mouse se cambia por un cambio de fondo: menos "plantilla animada", más producto. ========================================================================= */ body[data-page="landing"] .btn{ border-radius:0; border-width:2px; font-size:13px; font-weight:800; letter-spacing:.06em; padding:19px 26px; box-shadow:none; /* El transform se separa del resto con su propia curva. Esta duración (220ms) es la que rige SOLTAR el botón — volver de scale(.97) a scale(1) — no apretarlo: apretar tiene su propio tiempo, más corto, declarado en .btn:active de acá abajo. Un botón que responde rápido al toque pero se asienta con un poco más de calma al soltar se siente más vivo que el mismo tiempo de ida y vuelta. */ transition:transform 220ms cubic-bezier(.23,1,.32,1), background-color .2s ease, border-color .2s ease, color .2s ease; } body[data-page="landing"] .btn-sm{ padding:12px 18px; font-size:11.5px; } body[data-page="landing"] .btn-primary{ background:var(--ink); color:var(--bg); } body[data-page="landing"] .btn-primary:hover{ background:#ffffff; box-shadow:none; } body[data-page="landing"] .btn-ghost{ background:rgba(244,241,232,.05); border-color:rgba(244,241,232,.24); color:var(--ink); } body[data-page="landing"] .btn-ghost:hover{ border-color:var(--brass); background:rgba(194,162,94,.1); color:var(--brass); box-shadow:none; } body[data-page="landing"] .btn-wa{ background:var(--wa); color:#062A12; box-shadow:none; } body[data-page="landing"] .btn-wa:hover{ background:#2FE374; box-shadow:none; } body[data-page="landing"] .btn-block{ justify-content:space-between; } body[data-page="landing"] .microcopy{ font-size:12.5px; color:var(--muted); } body[data-page="landing"] .microcopy b{ color:var(--brass); font-weight:800; } body[data-page="landing"] .btn-pulse{ animation:none; } /* Mobile first: el 99% del tráfico entra por celular, donde no existe el hover. La flecha rebota sola en bucle infinito por defecto —ese es el incentivo de scroll ahí— y recién en pantallas con mouse (media query de abajo) se apaga para dejar actuar el translateX(4px) de siempre. */ @keyframes lbv2-bounce-down{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } } body[data-page="landing"] .arrow{ display:inline-block; animation:lbv2-bounce-down 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ body[data-page="landing"] .arrow{ animation:none; } } @media (hover:hover) and (pointer:fine){ body[data-page="landing"] .btn:hover{ transform:none; } /* Corta el rebote infinito antes de aplicar el translateX: una animación corriendo pisa cualquier transform normal en cada frame, así que no alcanza con que este transform gane por cascada. Al apagarla, la transition:transform .2s ease de .btn .arrow (global.css) desliza suave desde donde haya quedado el rebote hasta el translateX(4px). */ body[data-page="landing"] .btn:hover .arrow{ animation:none; transform:translateX(4px); } } /* scale, no translateY: 1px de corrimiento casi no se nota, el achique sí se siente como que el botón respondió al toque. Acá va la mitad rápida de la asimetría: apretar tiene que sentirse instantáneo (100ms, casi en el piso de lo perceptible), soltar es el que tarda un poco más (ver .btn de arriba) — la asimetría es lo que hace que el botón se sienta escuchando, no solo animando. */ body[data-page="landing"] .btn:active{ transform:scale(.97); transition:transform 100ms cubic-bezier(.23,1,.32,1); } body[data-page="landing"] .link-soft{ border-bottom-width:2px; } /* ========================================================================= 04 · CABECERA Transparente arriba del todo y sólida apenas se scrollea, con filete de 2px. El botón de la derecha pasa a verde WhatsApp: es la acción real de la página, no tiene sentido disfrazarla de botón neutro. ========================================================================= */ body[data-page="landing"] .site-header{ background:rgba(11,23,16,0); border-bottom:2px solid rgba(244,241,232,0); backdrop-filter:none; -webkit-backdrop-filter:none; } body[data-page="landing"] .site-header.scrolled{ background:rgba(11,23,16,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:rgba(244,241,232,.16); box-shadow:none; } body[data-page="landing"] .nav{ max-width:var(--max); padding:14px var(--pad); } body[data-page="landing"] .brand img{ border-radius:0; width:32px; height:32px; } body[data-page="landing"] .brand-text{ font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1; } body[data-page="landing"] .brand-text small{ font-size:9px; font-weight:700; letter-spacing:.2em; margin-top:4px; } body[data-page="landing"] .nav-links a{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); } body[data-page="landing"] .nav-links{ gap:24px; } /* En celulares angostos la bajada de la marca se partía en dos renglones y la cabecera crecía casi al doble, comiéndose el hero. */ @media (max-width:420px){ body[data-page="landing"] .brand-text small{ font-size:8px; letter-spacing:.14em; white-space:nowrap; } body[data-page="landing"] .nav{ padding:12px var(--pad); } body[data-page="landing"] .btn-sm{ padding:12px 14px; font-size:11px; } } /* ========================================================================= 05 · HERO La fusión: Bodas y 15 Años una al lado de la otra (antes eran tres — Leandro vio el formato de 2 fotos en la tarjeta que se comparte del sitio y le pareció más profesional que el de tres), sobre la atmósfera animada del hero actual — la malla de gradientes, el grano y la firma "Leandro" de fondo. La sesión pre-XV sigue existiendo como servicio (portafolio y precios la siguen mostrando entera); lo que ya no tiene es su propia ficha grande arriba de todo. Las fichas son los MISMOS botones de siempre (.hero-svc con su data-cob), así que siguen conectadas a coberturas() en app.js: filtran el portafolio y adelantan el plan de precios. La rotación automática ahora se ve como un resaltado que va pasando de una ficha a la otra. Las fotos van SIN recortar: antes vivían en una caja de proporción fija (3:4) con object-fit:cover, que es la forma normal de "rellenar un marco" pero de paso corta lo que no entra. Leandro pidió ver la foto entera, así que la caja ya no tiene alto propio — lo pone la propia foto (ancho:100%, alto:auto) y el marco se estira a lo que haga falta. La etiqueta ("Bodas ↗") ya no vive abajo en su propia franja con línea divisoria: se metió DENTRO de la foto, sobre el degradado que ya oscurecía la base de cada imagen — así la foto se funde con el texto de abajo en vez de cortar en seco contra una franja separada. ========================================================================= */ /* En celular la cabecera ocupa su propio lugar arriba (es sticky, no flotante), así que el hero no necesita reservarle espacio: con 30px de aire ya entra todo — las tres fotos, el titular y los dos botones — en una sola pantalla. En escritorio sí se reserva, porque ahí el hero ocupa la altura completa. */ /* Sin padding arriba: las fotos tienen que empezar pegadas al borde de abajo del header, sin aire entre las dos — así lo pidió Leandro. En escritorio sí hace falta ese aire (ver el media query de acá abajo), porque ahí el texto va al costado y necesita respirar, no una foto pegada al header. */ body[data-page="landing"] .hero{ min-height:auto; display:block; padding:0 0 clamp(34px,5vh,56px); } @media (min-width:981px){ body[data-page="landing"] .hero{ min-height:calc(100svh - 74px); display:flex; align-items:center; padding-top:clamp(26px,4.5vh,44px); } } body[data-page="landing"] .hero-inner{ display:block; max-width:var(--max); padding:0 var(--pad); } /* En celular las 2 fotos van arriba y el texto abajo — eso ya andaba bien, no se toca. En escritorio es otra historia: con las fotos sin recortar apiladas ARRIBA del texto a lo ancho completo del hero, salían tan altas que el titular, la bajada y los botones quedaban empujados fuera de pantalla — "se pierde el hero". La solución no es volver a recortar las fotos: es ponerlas al costado del texto, como en el hero original, en vez de arriba. Con las 2 fotos compartiendo la mitad del ancho (en vez de las 2 juntas ocupando TODO el ancho), cada una queda bastante más angosta — y como siguen sin recortarse, también salen bastante más bajas. Ese es el efecto que arregla la altura, no un tope artificial. */ @media (min-width:981px){ body[data-page="landing"] .hero-inner{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start; gap:clamp(32px,5vw,64px); } /* El texto primero visualmente aunque en el HTML las fotos vengan antes (siguen antes en el DOM a propósito: en celular tienen que verse arriba de todo, y ahí el orden del HTML es el que manda). */ body[data-page="landing"] .hero-copy{ order:1; position:static; padding-top:0; } body[data-page="landing"] .hero-cobs{ order:2; margin:0; } } /* La firma de fondo también pasa a Archivo: ya no hay serif en la portada. */ body[data-page="landing"] .hero-wm{ font-family:'Archivo', system-ui, sans-serif; font-style:normal; font-weight:800; letter-spacing:-.06em; opacity:.07; } /* La malla de fondo del hero: la misma receta de siempre (los mismos 3 colores, en las mismas posiciones), pero sin el cuarto manchón oscuro que global.css le suma abajo a la izquierda y con el recuadro exacto de la sección en vez de desbordarla un 20% — eso lo dejaba viéndose más apagado y recortado de lo que en verdad es el degradado. Leandro vio esta versión más limpia en la tarjeta que se comparte del sitio y le gustó más que la de la web. */ body[data-page="landing"] .hero-bg{ inset:0; background: radial-gradient(46% 64% at 8% 12%, rgba(194,162,94,.4) 0%, rgba(194,162,94,0) 64%), radial-gradient(42% 56% at 92% -6%, rgba(96,138,110,.4) 0%, rgba(96,138,110,0) 62%), radial-gradient(56% 70% at 90% 100%, rgba(210,114,78,.22) 0%, rgba(210,114,78,0) 68%), linear-gradient(158deg, #12251A 0%, #0C1A12 52%, #080F0B 100%); } /* --- Las dos fichas ------------------------------------------------------ Dos columnas, también en celular: el punto del bloque es que las dos se vean juntas sin scrollear. */ body[data-page="landing"] .hero-cobs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); /* Casi nada: en la referencia las dos fotos prácticamente se tocan. Un hueco de verdad ahí (los 8-20px que había antes) se ve como dos tarjetas separadas; 2px es solo el filete mínimo para que quede una división nítida entre una foto y la otra. */ gap:2px; align-items:start; /* Negativo, a propósito: la línea "Fotógrafo de Bodas · XV años" tiene que caer DENTRO de la zona ya bien apagada de la máscara (ver .hero-tile-img más abajo), no después de que termina — así aprovecha ese degradado en vez de dejarlo vacío. En escritorio (media query de arriba) se resetea a 0: ahí las fotos van al costado del texto, no hay "debajo" que aprovechar. */ margin:0 0 -38px; /* En celular, de punta a punta: .hero-inner tiene el padding lateral que usa toda la página (var(--pad)), y hasta ahora las fotos vivían adentro de ese margen, sin tocar el borde real de la pantalla. Leandro pidió que ocupen TODO el espacio — esto les cancela el padding del padre (margen negativo del mismo ancho) y las estira para que lleguen a los dos bordes de verdad. En escritorio (media query de acá arriba) se desactiva: ahí las fotos van adentro de su propia columna, al costado del texto, no a lo ancho de toda la pantalla. */ margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); padding:0; list-style:none; /* Sin fondo propio, a propósito: antes tenía un verde sólido acá para tapar el huequito de 2px entre las dos fotos. Pero eso es justo lo contrario de "fusionarse con el fondo" — era otra capa de color inventada. Ahora ese hueco (y la base de cada foto, ver la máscara en .hero-tile-img más abajo) deja ver la malla real del hero (.hero-bg) que sigue exactamente detrás, en vez de una imitación plana. */ } body[data-page="landing"] .hero-cobs li{ display:block; min-width:0; } /* La fila de fichas lleva además la clase .hero-figure, que es de donde coberturas() (app.js) cuelga el "pausá la rotación mientras el mouse está encima". Hay que apagarle los estilos que esa clase traía de la foto grande del hero anterior. */ /* width:auto, no 100% — global.css le pone width:100% a .hero-figure (la clase vieja de la foto única del hero anterior), y con un ancho fijo en vez de "auto" el margen negativo de acá arriba corre la caja pero no la agranda: quedaba pegada al borde izquierdo pero 40px corta del derecho (exactamente el padding que se le estaba cancelando de un solo lado). Con "auto" el navegador sí estira el ancho para compensar el margen negativo en los dos lados por igual. */ body[data-page="landing"] .hero-cobs.hero-figure{ width:auto; max-width:none; justify-self:stretch; animation:none; position:relative; } body[data-page="landing"] .hero-cobs.hero-figure::before{ display:none; } body[data-page="landing"] .hero-tile{ display:block; width:100%; padding:0; margin:0; background:none; border:0; border-radius:0; text-align:left; cursor:pointer; animation:lbv2-subir .8s var(--ease) both; } body[data-page="landing"] .hero-cobs li:nth-child(1) .hero-tile{ animation-delay:.05s; } body[data-page="landing"] .hero-cobs li:nth-child(2) .hero-tile{ animation-delay:.14s; } @keyframes lbv2-subir{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } } /* El marco ya no tiene alto propio (ni aspect-ratio, ni max-height, ni overflow:hidden recortando): lo define la foto. Sigue siendo position: relative porque el degradado y la etiqueta de abajo se apoyan en él. */ /* ARREGLO DE FONDO, no un parche más: hasta acá "fundir la foto con el fondo" se venía resolviendo pintando un degradado de color ENCIMA de la foto (un ::after) que trataba de adivinar el verde del fondo y copiarlo. Por más prolijo que quedara ese degradado, seguía siendo justo lo que Leandro dijo que no quería: una capa nueva, pegada arriba de la imagen. Acá se saca esa capa del todo. En su lugar, la foto se recorta con una MÁSCARA (mask-image): la base se vuelve transparente de verdad, no "de un color parecido al fondo" — así por esa zona se ve lo que hay REALMENTE detrás, la malla de fondo del hero (.hero-bg, la misma de siempre, sin ningún color inventado). Es fusión de verdad: no hay nada dibujado encima, la foto se apaga y deja ver lo que siempre estuvo ahí. */ body[data-page="landing"] .hero-tile-img{ display:block; position:relative; width:100%; /* 220ms rige el zoom de hover (mouse, escritorio) — ver más abajo la transición propia y más corta para el toque en mobile, que es el 99% del tráfico real de esta página. */ transition:transform 220ms cubic-bezier(.23,1,.32,1); /* La curva (t³, la misma idea de antes pero ahora en la máscara): tapa de punta a punta, tan de a poco arriba que a mitad de la foto todavía deja ver un 87% de ella — recién en el último tercio se nota de verdad. Sin ningún "acá arranca" que el ojo pueda señalar. */ -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.999) 10%, rgba(0,0,0,.992) 20%, rgba(0,0,0,.97) 30%, rgba(0,0,0,.94) 40%, rgba(0,0,0,.87) 50%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.66) 70%, rgba(0,0,0,.49) 80%, rgba(0,0,0,.27) 90%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.999) 10%, rgba(0,0,0,.992) 20%, rgba(0,0,0,.97) 30%, rgba(0,0,0,.94) 40%, rgba(0,0,0,.87) 50%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.66) 70%, rgba(0,0,0,.49) 80%, rgba(0,0,0,.27) 90%, rgba(0,0,0,0) 100%); } body[data-page="landing"] .hero-tile-img picture{ display:block; width:100%; } body[data-page="landing"] .hero-tile-img img{ display:block; width:100%; height:auto; } body[data-page="landing"] .hero-tile:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; } @media (hover:hover) and (pointer:fine){ body[data-page="landing"] .hero-tile:hover .hero-tile-img{ transform:scale(1.03); } } /* Es lo que más se toca de toda la página (son las 2 fotos grandes, arriba de todo) y no tenía ninguna respuesta al apretarlas — acá abajo, no arriba del media query de hover, para que gane incluso si el mouse está encima. El scale es más chico que antes (.985, no .965): ahora la foto es mucho más alta, y el mismo achique porcentual se nota mucho más en una imagen larga que en una corta. */ /* Transición propia, más corta que el zoom de hover de arriba (110ms en vez de 220ms): en mobile esto es lo único de la ficha que el visitante llega a sentir (el hover nunca dispara sin mouse), así que el tiempo entre tocar y ver la respuesta tiene que ser casi cero. */ body[data-page="landing"] .hero-tile:active .hero-tile-img{ transform:scale(.985); transition:transform 110ms cubic-bezier(.23,1,.32,1); } /* --- El bloque de texto --------------------------------------------------- */ /* position+z-index: el bloque se mete con margen negativo sobre la cola ya apagada de la foto (ver el margen negativo de .hero-cobs, más arriba) — esto lo hace pintar ENCIMA de esa cola, no detrás. padding-top: para que la línea "Fotógrafo de Bodas · XV años" no arranque pegada al límite exacto, con un poco de aire de sobra adentro de la zona ya apagada. En escritorio (media query de arriba) nada de esto aplica: ahí el texto va al costado, no encima. */ body[data-page="landing"] .hero-copy{ position:relative; z-index:1; padding-top:18px; } /* Tipografía fluida a propósito: en vez de un font-size con techo (clamp), acá el tamaño es un porcentaje puro del ancho de pantalla (vw). Con eso, la relación entre "cuánto mide el texto" y "cuánto lugar tiene" se mantiene igual sin importar el celular — así el salto de línea SIEMPRE cae en el mismo lugar ("Dentro de 20 años," / "tus fotos van a seguir" / "emocionándote.", las mismas 3 líneas) y el renglón más largo siempre toca los dos márgenes. Un clamp con techo, en cambio, aplana el tamaño en pantallas grandes y ahí el salto se corre. El número (8.7vw) salió de probar contra el renglón más largo ("tus fotos van a seguir") en varios anchos de celular hasta que quedara justo entre los dos márgenes. */ body[data-page="landing"] .hero-copy h1{ margin:0; max-width:none; font-size:8.7vw; line-height:1; letter-spacing:-.035em; animation:fade-up .85s var(--ease) .3s both; } /* El 8.7vw de arriba está calibrado para celular, donde el título ocupa TODO el ancho de la pantalla. En escritorio el texto vive en su propia columna (más o menos la mitad del ancho total, no el 100%), así que ese mismo 8.7vw se volvería enorme — vuelve a un tamaño fijo con techo. OJO: este override tiene que ir DESPUÉS de la regla de arriba en el archivo — puesto antes (como estaba) pierde el empate de especificidad contra ella, aunque esté adentro de su propio @media: a igual peso, en CSS gana quien está más abajo en el archivo, no la condición del media query. */ @media (min-width:981px){ body[data-page="landing"] .hero-copy h1{ font-size:clamp(32px,3.6vw,54px); } } body[data-page="landing"] .hero-copy .eyebrow{ animation:fade-up .7s var(--ease) .22s both; } body[data-page="landing"] .hero-copy .lead{ /* Heredaba el line-height:1.72 del cuerpo del sitio (pensado para párrafos largos de blog) — acá son dos renglones cortos bajo un titular de 800: con ese interlineado se leía como un bloque más de texto, no como la bajada de un H1. 1.5 lo pega al titular; el margen de más lo separa del bloque de botones de abajo. */ margin:clamp(14px,2.5vw,20px) 0 0; max-width:38ch; font-size:clamp(14.5px,1.7vw,18px); line-height:1.5; color:var(--ink-2); animation:fade-up .85s var(--ease) .38s both; } /* El antetítulo deja de ser una píldora: pasa a la micro-etiqueta con filete. */ body[data-page="landing"] .eyebrow-pill{ background:none; border:0; padding:0; border-radius:0; backdrop-filter:none; white-space:normal; } body[data-page="landing"] .eyebrow-pill::before{ display:inline-block; } /* El resaltador amarillo del titular ya no aplica: la frase clave lleva el brillo del sistema nuevo. */ body[data-page="landing"] .hero-copy h1 mark{ background:none; color:inherit; padding:0; animation:none; } body[data-page="landing"] .hero-cta{ margin-top:clamp(18px,3vw,26px); gap:14px; animation:fade-up .85s var(--ease) .5s both; } /* 2px es la línea fina del sistema (la misma que separa las tarjetas de precios) — tiene sentido cuando los dos botones están lado a lado, uno pegado al otro como un solo bloque. Pero abajo, en el breakpoint donde pasan a apilarse uno arriba del otro, esos mismos 2px quedaban de gap VERTICAL entre los dos botones — casi tocándose, como si estuviera roto. Por eso el gap correcto va aparte, adentro del media query de acá abajo, y con más aire. */ body[data-page="landing"] .hero-cta .cta-line{ gap:2px; } body[data-page="landing"] .hero-wa{ border-radius:0; box-shadow:none; padding:19px 24px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; flex:0 1 auto; } body[data-page="landing"] .hero-wa:hover{ transform:none; filter:none; background:#2FE374; box-shadow:none; } body[data-page="landing"] .btn-hero-sec{ padding:17px 22px; font-size:12.5px; } /* La chapa del adelanto deja de flotar sobre una foto (ya no hay una foto grande a la que agarrarse) y pasa a ser una franja debajo del CTA. */ body[data-page="landing"] .hero-badge{ position:static; max-width:none; border-radius:0; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; flex-direction:row; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:clamp(14px,2.4vw,20px); border-top:2px solid rgba(244,241,232,.14); padding-top:14px; animation:fade-up .8s var(--ease) .6s both; } body[data-page="landing"] .hero-badge b{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); } body[data-page="landing"] .hero-badge span{ font-size:12.5px; color:var(--muted); } @media (max-width:560px){ body[data-page="landing"] .hero-cta .cta-line{ flex-direction:column; align-items:stretch; gap:10px; } body[data-page="landing"] .hero-wa, body[data-page="landing"] .hero-cta .btn{ width:100%; } /* "Ver fechas libres" SÍ necesita space-between: tiene una flecha al final que tiene que irse al borde derecho del botón. El de WhatsApp no tiene nada al final — son solo el ícono y el texto, uno al lado del otro — así que con space-between el ícono se iba pegado a la izquierda y el texto se separaba lejos hacia la derecha, con un hueco enorme en el medio en vez del gap de 10px normal entre ícono y texto. */ body[data-page="landing"] .hero-cta .btn{ justify-content:space-between; } body[data-page="landing"] .hero-wa{ justify-content:flex-start; } } /* En los celulares más angostos (iPhone SE, gama baja de 320-360px, todavía comunes) "Escribime por WhatsApp" no entraba en un renglón dentro del botón y se partía en dos — se nota justo en el CTA principal de la página. Achicar el padding lateral y la tracking un toque alcanza para que vuelva a entrar en una sola línea sin tocar el texto. */ @media (max-width:374px){ body[data-page="landing"] .hero-wa{ padding-left:16px; padding-right:16px; letter-spacing:.02em; } } /* Portátiles de pantalla baja: se aprieta el resto del hero para perder menos aire. Las fotos van al costado del texto (no arriba), así que acá ya no hace falta ningún tope de alto para ellas — el propio layout de dos columnas las mantiene razonables. */ @media (min-width:981px) and (max-height:900px){ body[data-page="landing"] .hero{ padding:clamp(80px,10vh,98px) 0 26px; } body[data-page="landing"] .hero-copy h1{ font-size:clamp(26px,3.1vw,40px); } body[data-page="landing"] .hero-copy .lead{ margin-top:10px; font-size:15px; } body[data-page="landing"] .hero-cta{ margin-top:16px; } body[data-page="landing"] .hero-badge{ margin-top:12px; padding-top:11px; } } @media (prefers-reduced-motion: reduce){ body[data-page="landing"] .hero-tile, body[data-page="landing"] .hero-tile-img img, body[data-page="landing"] .hero-badge, body[data-page="landing"] .hero-cta{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ========================================================================= 06 · GRILLAS CON FILETE La firma del rediseño: las tarjetas se tocan y entre ellas queda una línea clara de 2px. El truco es un box-shadow de 1px alrededor de cada celda; con 2px de gap, los dos bordes vecinos se juntan y forman una sola línea pareja, y el marco exterior queda de 1px. ========================================================================= */ body[data-page="landing"] :is(.dudas, .precios, .port-grid, .trust-inner){ gap:2px; } body[data-page="landing"] :is(.duda, .plan, .port-item, .trust-item){ border:0; border-radius:0; box-shadow:0 0 0 1px var(--hair); } body[data-page="landing"] :is(.duda, .plan):hover{ box-shadow:0 0 0 1px var(--hair); transform:none; } /* --- Cinta de confianza --- */ body[data-page="landing"] .trust{ border-top:2px solid var(--line-ink); border-bottom:2px solid var(--line-ink); background:transparent; } body[data-page="landing"] .trust-inner{ padding:0; max-width:calc(var(--max) - var(--pad) * 2); } body[data-page="landing"] .trust-item{ background:#0E1D14; padding:clamp(20px,3.4vw,32px) 6px; } body[data-page="landing"] .trust-item strong{ font-weight:800; font-size:clamp(28px,4.4vw,46px); letter-spacing:-.04em; color:var(--brass); /* Mismo motivo que .plan .rango: +200 / 5,0 / 2 / +1.000 son cuatro cifras de distinto largo, una al lado de la otra en la misma fila — con ancho tabular quedan alineadas al milímetro entre sí. */ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } body[data-page="landing"] .trust-item span{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--muted); margin-top:10px; } /* --- Las cuatro dudas --- */ body[data-page="landing"] .dudas{ margin-top:clamp(30px,5vw,52px); grid-template-columns:repeat(2,minmax(0,1fr)); } body[data-page="landing"] .duda{ background:var(--bg); background-image:none; padding:clamp(16px,3.4vw,36px); } body[data-page="landing"] .duda .n{ font-size:11px; font-weight:800; letter-spacing:.18em; color:var(--brass); margin-bottom:14px; } body[data-page="landing"] .duda h3{ margin-bottom:12px; } body[data-page="landing"] .duda p{ font-size:clamp(13px,1.5vw,14.5px); color:var(--muted); } @media (max-width:430px){ body[data-page="landing"] .dudas{ grid-template-columns:1fr; } } /* --- Portafolio ----------------------------------------------------------- Ya no hay filtro Todo/Bodas/15/Pre-XV acá: era redundante con las tres fichas del hero, que hacen lo mismo y encima llevan a esta grilla. Las reglas .port-filtro que había acá se sacaron junto con el HTML. */ body[data-page="landing"] .port-grid{ margin-top:2px; } body[data-page="landing"] .port-item::after{ padding:8px 12px; background:var(--bg); color:var(--brass); left:0; right:auto; bottom:0; font-size:9.5px; font-weight:800; letter-spacing:.16em; opacity:1; transform:none; } body[data-page="landing"] .port-item:hover{ box-shadow:0 0 0 1px var(--brass); } @media (hover:hover) and (pointer:fine){ body[data-page="landing"] .port-item:hover::after{ transform:none; } } /* --- Precios --- */ body[data-page="landing"] .precios{ margin-top:clamp(30px,5vw,52px); } body[data-page="landing"] .plan{ background:var(--bg); background-image:none; padding:clamp(24px,3vw,34px); border-top:0 !important; /* el filete de color por cobertura sale: acá manda la línea del sistema */ } body[data-page="landing"] .plan.destacado{ background:var(--surface); background-image:none; box-shadow:0 0 0 1px var(--hair); outline:2px solid var(--brass); outline-offset:-2px; transform:none; animation:none; } @media (min-width:900px){ body[data-page="landing"] .plan.destacado{ transform:none; } } body[data-page="landing"] .plan-flag{ border-radius:0; right:0; top:0; font-size:9.5px; font-weight:800; letter-spacing:.16em; padding:7px 12px; background:var(--brass); color:#1B1305; } body[data-page="landing"] .plan h3{ margin-bottom:10px; } body[data-page="landing"] .plan .small{ color:var(--muted); line-height:1.55; } body[data-page="landing"] .plan .rango{ font-weight:800; font-size:clamp(26px,3.6vw,40px); letter-spacing:-.04em; line-height:1; margin:clamp(20px,3vw,28px) 0 0; padding-top:18px; border-top:2px solid var(--line-ink); /* Números tabulares: sin esto, Archivo dibuja cada dígito con su propio ancho (el "1" ocupa menos que el "8"), así que "2.500.000" y "5.000.000" no alinean igual de un plan al otro pese a tener la misma cantidad de cifras — se nota sobre todo en la pila (una tarjeta debajo de la otra), donde el ojo compara los precios en vertical. Con ancho fijo por dígito, los tres precios calzan en la misma grilla invisible, que es justo el efecto de "ficha técnica" que ya tiene el resto del sistema (folios, badges, calendario). */ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } body[data-page="landing"] .plan.destacado .rango{ color:var(--brass); } body[data-page="landing"] .plan .rango-pre{ font-size:10.5px; font-weight:800; letter-spacing:.18em; color:var(--muted); margin-bottom:8px; } body[data-page="landing"] .plan .rango small{ font-size:.45em; font-weight:600; letter-spacing:0; } body[data-page="landing"] .plan ul{ margin:26px 0; gap:9px; } body[data-page="landing"] .plan ul li{ font-size:13.5px; color:var(--ink-2); } body[data-page="landing"] .plan ul li::before{ content:"-"; font-size:inherit; margin-top:0; } body[data-page="landing"] .plan.is-elegido{ transform:none; box-shadow:0 0 0 1px var(--brass); outline:2px solid var(--brass); outline-offset:-2px; } /* ========================================================================= 07 · SECCIONES SUELTAS ========================================================================= */ /* --- Comparador antes / después --- */ body[data-page="landing"] .cmp{ border:0; box-shadow:0 0 0 1px var(--hair); border-radius:0; max-width:min(430px,86vw); } body[data-page="landing"] .cmp-tag{ border:0; border-radius:0; top:0; backdrop-filter:none; font-size:9.5px; font-weight:800; letter-spacing:.16em; padding:8px 12px; text-shadow:none; } body[data-page="landing"] .cmp-tag.is-before{ left:0; background:rgba(11,23,16,.85); color:var(--ink-2); } body[data-page="landing"] .cmp-tag.is-after { right:0; background:var(--brass); color:#1B1305; } body[data-page="landing"] .cmp-handle{ background:var(--ink); box-shadow:none; } body[data-page="landing"] .cmp-knob{ border-radius:0; width:46px; height:46px; background:var(--ink); color:var(--bg); font-size:16px; font-weight:800; box-shadow:none; } /* --- Reel --- */ body[data-page="landing"] .video-frame{ border:0; border-radius:0; box-shadow:0 0 0 1px var(--hair); max-width:none; margin-top:clamp(26px,4vw,40px); } body[data-page="landing"] .video-sound{ border-radius:0; border:0; background:rgba(11,23,16,.85); font-size:10.5px; font-weight:800; letter-spacing:.14em; right:0; bottom:0; } /* --- Banda de cita --- Leandro vio esta banda en el editor del rediseño con dos acentos posibles (dorado y marfil) y eligió el marfil: se lee más limpio contra el verde de todo el resto de la página. El texto sigue siendo el mismo marrón oscuro de siempre — contra marfil contrasta incluso mejor que contra dorado. */ body[data-page="landing"] .pq-band{ background:var(--ink); } body[data-page="landing"] .pq-band .wrap{ max-width:var(--max); text-align:left; padding:0 var(--pad); } body[data-page="landing"] .pq-mark{ display:none; } body[data-page="landing"] .pq-text{ font-weight:800; font-size:clamp(34px,9.4vw,104px); line-height:.94; letter-spacing:-.045em; margin:0; max-width:16ch; color:#1B1305; text-wrap:balance; } body[data-page="landing"] .pq-text-2{ font-style:normal; font-weight:800; font-size:clamp(18px,3.4vw,30px); letter-spacing:-.02em; line-height:1.15; margin-top:20px; opacity:.72; max-width:24ch; } /* --- Exclusividad (el adelanto de esa misma noche) --- */ body[data-page="landing"] .exclusiva{ background:var(--bg-alt); background-image:none; border:0; box-shadow:0 0 0 1px var(--hair); border-radius:0; padding:clamp(28px,5vw,64px); } body[data-page="landing"] .exclusiva::before{ display:none; } body[data-page="landing"] .exclusiva h2{ max-width:15ch; } body[data-page="landing"] .exclusiva .lead{ max-width:56ch; } /* --- Sobre mí --- */ body[data-page="landing"] .about-photo{ border:0; box-shadow:0 0 0 1px var(--hair); border-radius:0; } body[data-page="landing"] .about-photo img{ filter:grayscale(1) contrast(1.06); } /* Antes flotaba con position:absolute encima de la foto, así que no le importaba a qué grid pertenecía. Ahora es un renglón más (para que el "04 — Quién te fotografía" se dibuje igual que en el resto de la página), así que necesita grid-column explícito: sin esto, en escritorio se cuela en la primera de las dos columnas de .about y empuja la foto y el texto una fila más abajo, descuadrando todo el bloque. */ body[data-page="landing"] .folio-about{ position:static; grid-column:1 / -1; margin-bottom:22px; } body[data-page="landing"] .about{ grid-template-columns:1fr; } @media (min-width:768px){ body[data-page="landing"] .about{ grid-template-columns:.85fr 1.15fr; } } /* El texto de presentación se partió en dos párrafos (era un solo bloque largo, el único de toda la página sin ningún corte visual) — acá le toca el margen que el reset del sitio le saca a todos los
, si no los dos párrafos quedan pegados como si fueran uno solo mal cortado. */ body[data-page="landing"] .about .lead + .lead{ margin-top:16px; } body[data-page="landing"] .about-list{ margin-top:clamp(24px,4vw,34px); gap:0; border-top:2px solid var(--line-ink); } body[data-page="landing"] .about-list li{ padding:16px 0; border-bottom:2px solid var(--line-ink); font-size:14.5px; line-height:1.5; color:var(--ink-2); gap:14px; align-items:center; } /* El tilde dentro de un círculo se cambia por el numeral del sistema. */ body[data-page="landing"] .about-list{ counter-reset:lbv2-about; } body[data-page="landing"] .about-list li::before{ counter-increment:lbv2-about; content:counter(lbv2-about,decimal-leading-zero); border:0; border-radius:0; width:auto; height:auto; margin-top:0; font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--brass); } /* --- Garantía --- */ body[data-page="landing"] .garantia{ border:0; box-shadow:0 0 0 1px var(--hair); border-radius:0; background:var(--bg-alt); text-align:left; } body[data-page="landing"] .garantia-sello{ border-radius:0; border:2px solid var(--line-2); width:72px; height:72px; background:none; margin:0; } /* --- Calendario ----------------------------------------------------------- Se queda el calendario de siempre: mismos datos reales de la agenda de Google, tres meses por fila también en el celular, y las fechas redondas. Lo único nuevo es la piel y que arranca plegado (ver landing-v2.js). */ body[data-page="landing"] .cal-wrap{ max-width:var(--max); padding:0 var(--pad); text-align:left; } /* Vuelta atrás del margen extra de la pasada anterior: ese ancho hace más falta ADENTRO (separando los días entre sí) que AFUERA (entre el calendario y el borde de la pantalla). En celular se achica un poco por debajo del --pad del resto del sitio (20px→14px) para liberar ese ancho y dárselo a la grilla de días. */ @media (max-width:559px){ body[data-page="landing"] .cal-wrap{ padding:0 14px; } } body[data-page="landing"] .cal-legend{ justify-content:flex-start; gap:12px 22px; margin-top:clamp(24px,4vw,34px); } body[data-page="landing"] .cal-legend i{ border-radius:0; width:12px; height:12px; border:2px solid rgba(244,241,232,.3); } body[data-page="landing"] .cal-legend i.taken{ border-color:var(--rojo); background:var(--rojo); } body[data-page="landing"] .cal-legend span{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } body[data-page="landing"] .cal-titulo{ font-weight:800; font-size:clamp(17px,4cqi,26px); letter-spacing:-.02em; margin:34px 0 4px; text-align:left; } body[data-page="landing"] .cal-sub{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-align:left; margin-bottom:18px; } /* La cabecera decorativa que venía escrita a mano en el HTML sale: el capítulo "06 — Disponibilidad" ya dice lo mismo, y repetirlo dos veces arriba del calendario era ruido. */ body[data-page="landing"] .cal-wrap > .cal-titulo, body[data-page="landing"] .cal-wrap > .cal-sub{ display:none; } /* Siempre 3 meses por fila, celular incluido — es una decisión de Leandro, no negociable por espacio. La plata está en redistribuir el ancho, no en generarlo de la nada: se le saca a los márgenes que no aportan lectura (el filete entre tarjetas de mes, el padding lateral de cada tarjeta) para dárselo al lugar que sí lo necesita — el aire ENTRE un día y el de al lado, que antes era casi cero (1px). */ body[data-page="landing"] .cal-grid{ gap:1px; /* filete mínimo entre tarjetas de mes */ grid-template-columns:repeat(3, minmax(0,1fr)); } body[data-page="landing"] .cal-mes{ background:#0E1D14; box-shadow:0 0 0 1px var(--hair); /* Padding lateral casi al mínimo (24px→4px): es plata que antes se iba en aire alrededor de CADA tarjeta (×3 meses ×2 lados = 6 veces) en vez de ir a separar los días adentro, que es lo que de verdad se necesita leer. El vertical se mantiene, no compite por el mismo ancho. */ padding:clamp(12px,2.2cqi,24px) clamp(4px,1.2cqi,24px); margin-bottom:0; } body[data-page="landing"] .cal-mes-badge{ background:none; border:0; border-radius:0; width:100%; margin:0 0 10px; color:var(--ink); text-align:left; /* Fijo, no cqi: igual que con el círculo, un valor fijo por tramo de ancho es más legible y predecible que un cálculo que da chico en celular sin que se pueda anticipar cuánto. */ font-size:13px; font-weight:800; letter-spacing:.1em; padding:0; } @media (min-width:900px){ body[data-page="landing"] .cal-mes-badge{ font-size:15px; } } /* Espaciado entre días: calibrado a mano por Leandro en el entorno de prueba interactivo (artefacto aparte, con diales en vivo y medición exacta) antes de tocar este archivo — no son números inventados acá. Celular y PC quedaron con valores distintos, como el resto del calendario. */ body[data-page="landing"] .cal-dow, body[data-page="landing"] .cal-dias{ column-gap:0; row-gap:0; } @media (min-width:900px){ body[data-page="landing"] .cal-dow, body[data-page="landing"] .cal-dias{ column-gap:4px; row-gap:0; } } body[data-page="landing"] .cal-dow span{ color:#6E7C6C; font-weight:800; font-size:12px; /* .cal-wrap pasa a text-align:left acá arriba (línea 925), pero estas letras dependen de ese text-align heredado para centrarse dentro de su columna —a diferencia de los números del calendario, que se centran con su propio flexbox y por eso no se movieron—. Sin este centrado quedan pegadas a la izquierda de cada columna y ya no coinciden con los números de abajo. */ text-align:center; } @media (min-width:900px){ body[data-page="landing"] .cal-dow span{ font-size:14px; } } /* BUG de forma (círculo ovalado): .cal-celda es un ítem de grid con aspect-ratio:1/1, pero por default un ítem de grid/flex NUNCA se achica por debajo del tamaño de su propio contenido, así el aspect-ratio pida un cuadrado o no — si el número necesita más alto del que ese cuadrado da, el navegador agranda la celda igual y el círculo sale ovalado, más ancho o alto según la letra. min-width:0 y min-height:0 apagan ese "mínimo automático": el aspect-ratio manda de verdad, siempre círculo, sea cual sea el tamaño de letra. Encontrado y corregido en el entorno de prueba antes de aplicarlo acá — probado con letra mucho más grande que el círculo y se mantuvo redondo. */ body[data-page="landing"] .cal-celda{ min-width:0; min-height:0; } body[data-page="landing"] .cal-celda i{ display:flex; align-items:center; justify-content:center; border-radius:50%; border:2px solid transparent; color:var(--ink-2); font-weight:400; line-height:1; /* Solo estos números vuelven a Manrope (la fuente que ya tenía el calendario antes del rediseño). El resto de la portada pasó a Archivo por el token de body[data-page="landing"] de más arriba en este archivo — como acá nunca se había puesto una fuente propia, los números la heredaban sin que nadie lo hubiera decidido así. El nombre del mes y los días de la semana (L M V...) se quedan en Archivo, que sí fue elegido a propósito en una pasada anterior. */ font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* El círculo mide un % de su propia celda (no un múltiplo de la letra) — nunca se pasa a la celda de al lado, así cada día reservado se lee solo, así haya varios seguidos. `width` en % (no `height`) + `aspect-ratio:1/1` para sacar el alto: un % de ANCHO contra un padre con ancho definido siempre resuelve igual en cualquier navegador. `flex-shrink:0` + `min-width:0`/`min-height:0` evitan que el contenedor lo achique o lo agrande — mide justo lo que dice medir. Todos los valores de acá (círculo, letra, y el gap de arriba) salen del entorno de prueba interactivo que armamos aparte, calibrados a mano por Leandro con medición exacta, no a ojo. */ /* height:auto es DELIBERADO, no un olvido: global.css le pone height:92% a este mismo elemento (.cal-celda i), y esa propiedad no estaba siendo pisada acá — el CSS cascadea por propiedad, no por regla completa, así que ese height viejo seguía vivo aunque esta regla venga después. Con las dos dimensiones ya definidas (width acá + height en global.css), aspect-ratio no tiene nada que calcular y se ignora del todo — eso era lo que rompía el círculo en escritorio. height:auto libera esa dimensión para que aspect-ratio sí mande. */ width:99%; height:auto; aspect-ratio:1/1; flex-shrink:0; min-width:0; min-height:0; font-size:9.5px; } @media (min-width:900px){ body[data-page="landing"] .cal-celda i{ font-size:22.5px; } } /* "Hoy" ya NO lleva círculo dorado propio: era el único anillo hueco en medio de una grilla de números sueltos y círculos rojos rellenos, y se veía como un elemento roto en vez de intencional — sobre todo el día que "hoy" coincide con una semana llena de fechas reservadas al lado. No está en la leyenda (Reservada/Disponible) y no aporta nada que el visitante necesite decidir, así que se saca. */ /* El brillo rojo de la fecha reservada se achica un poco (12px→7px de blur, 96%→90% del tamaño de la celda) para que, en celular, dos fechas reservadas seguidas (algo común: un fin de semana entero) no se fundan una con la otra. Sigue siendo la marca más fuerte del calendario — es información, no decoración de más — pero ahora cabe sin pisarse en el espacio real que tiene cada celda a 3 meses por fila. */ body[data-page="landing"] .cal-celda.tomada i{ background:var(--rojo); border-color:var(--rojo); color:#fff; font-weight:400; box-shadow:0 0 7px rgba(229,52,44,.55); } body[data-page="landing"] .cal-estado{ font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--muted); text-align:left; } body[data-page="landing"] .cal-foot{ border-radius:0; border:2px solid var(--line-ink); background:none; display:block; margin-top:2px; padding:16px 20px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } /* El botón de desplegar el resto de los meses. Lo inserta landing-v2.js recién cuando el calendario terminó de cargar de verdad. */ body[data-page="landing"] .cal-toggle{ margin-top:2px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; background:rgba(244,241,232,.05); border:2px solid rgba(244,241,232,.2); color:var(--ink); padding:19px 22px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); } body[data-page="landing"] .cal-toggle:hover{ border-color:var(--brass); background:rgba(194,162,94,.1); color:var(--brass); } /* Ease-in-out, no el ease-out del resto del sistema: la flecha no entra ni sale de pantalla, gira sobre sí misma (180°) para mostrar un cambio de estado. Un ease-out (arranca rápido, frena de a poco) es para cosas que APARECEN; un ease-in-out (acelera y después frena) es lo que hace que una rotación se sienta como una pieza mecánica girando con precisión, no como algo disparado de golpe. */ body[data-page="landing"] .cal-toggle .flecha{ font-size:16px; flex:none; transition:transform 260ms cubic-bezier(.77,0,.175,1); } body[data-page="landing"] .cal-toggle[aria-expanded="true"] .flecha{ transform:rotate(180deg); } body[data-page="landing"] .cal-mes.is-plegado{ display:none; } /* --- Testimonios --- */ body[data-page="landing"] .testi-featured-quote{ border:0; box-shadow:0 0 0 1px var(--hair); border-radius:0; background:var(--bg-alt); } body[data-page="landing"] .embed-vertical{ border:0; box-shadow:0 0 0 1px var(--hair); border-radius:0; } body[data-page="landing"] .testi-featured-quote-who{ font-size:12.5px; color:var(--muted); font-weight:600; } /* El destacado venía centrado; con toda la página alineada a la izquierda, centrarlo solo a él lo dejaba flotando fuera de la columna. */ body[data-page="landing"] .testi-featured{ justify-content:flex-start; } body[data-page="landing"] .google-strip{ border-radius:0; border:2px solid rgba(244,241,232,.2); background:none; justify-content:flex-start; text-align:left; padding:20px 22px; gap:14px 20px; margin-top:clamp(26px,4vw,38px); } body[data-page="landing"] .google-strip .stars{ font-size:17px; letter-spacing:.14em; } body[data-page="landing"] .google-strip strong{ font-size:15px; font-weight:800; letter-spacing:-.01em; } body[data-page="landing"] .google-strip a{ margin-left:auto; text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } body[data-page="landing"] .testi-wall-head{ margin-top:clamp(34px,5vw,52px); } body[data-page="landing"] .testi-item{ border:0; border-radius:0; box-shadow:0 0 0 1px var(--hair); } @media (hover:hover) and (pointer:fine){ body[data-page="landing"] .testi-item:hover{ box-shadow:0 0 0 1px var(--brass); } } body[data-page="landing"] .testi-carousel, body[data-page="landing"] .testi-carousel-track{ gap:2px; } body[data-page="landing"] .testi-slot{ gap:2px; } body[data-page="landing"] .testi-carousel{ padding:0 2px; } body[data-page="landing"] .testi-carousel-flecha{ border-radius:0; border:2px solid var(--line-2); background:rgba(11,23,16,.9); width:42px; height:42px; box-shadow:none; } /* --- Lead magnet --- */ body[data-page="landing"] .magnet{ border:0; box-shadow:0 0 0 1px var(--hair); border-radius:0; background:var(--bg-alt); padding:clamp(26px,4.4vw,52px); } body[data-page="landing"] .magnet h2{ max-width:20ch; } /* --- FAQ --- */ body[data-page="landing"] .faq{ max-width:none; margin-top:clamp(28px,4vw,44px); border-top:2px solid rgba(244,241,232,.16); } body[data-page="landing"] .faq-item{ border-bottom:2px solid rgba(244,241,232,.16); } body[data-page="landing"] .faq-q{ font-size:clamp(15px,1.9vw,19px); font-weight:800; letter-spacing:-.015em; line-height:1.3; padding:20px 0; } body[data-page="landing"] .faq-q .plus{ font-size:22px; font-weight:400; } body[data-page="landing"] .faq-a > p{ font-size:14.5px; line-height:1.65; max-width:64ch; } /* ARREGLO de un error que ya venía de antes: con la pregunta cerrada se veía igual la primera línea de la respuesta. El acordeón cierra llevando su fila a 0, pero el relleno de abajo del párrafo (22px) seguía ahí, y overflow:hidden recorta al borde del relleno, no al del texto: esos 22px dejaban pasar justo un renglón. Ahora el relleno solo existe cuando la pregunta está abierta, así que cerrada mide cero de verdad. */ body[data-page="landing"] .faq-a > p{ padding-bottom:0; } body[data-page="landing"] .faq-item.open .faq-a > p{ padding-bottom:24px; } /* --- Mapa --- */ body[data-page="landing"] .embed{ border:0; border-radius:0; border-top:2px solid var(--line-ink); border-bottom:2px solid var(--line-ink); } /* --- Cierre ------------------------------------------------------------- El bloque final pasa a un corte de color pleno, como en el rediseño: después de toda la página en verde, ese corte es lo que hace que se lea como el final y no como una sección más. Leandro probó el dorado y el marfil en el editor del rediseño y prefirió el marfil — se ve más limpio. Todo lo de adentro se recolorea para fondo claro. */ body[data-page="landing"] .cta-final{ background:var(--ink); background-image:none; color:#1B1305; padding-bottom:clamp(80px,12vw,150px); } body[data-page="landing"] .cta-final::before{ display:none; } /* El capítulo sobre latón: en latón no se leería, va en el marrón oscuro. La cadena de selectores es larga a propósito — tiene que pesar más que la regla general del capítulo, que también lleva :has(). */ body[data-page="landing"] .cta-final .sec-head:has(.folio) .folio{ color:#1B1305; opacity:.68; } body[data-page="landing"] .cta-final .sec-head:has(.folio) .folio::after{ background:#1B1305; opacity:.3; } body[data-page="landing"] .cta-final h2{ color:#1B1305; font-size:clamp(38px,10.6vw,116px); line-height:.92; letter-spacing:-.05em; max-width:13ch; } body[data-page="landing"] .cta-final h2 em{ -webkit-text-fill-color:currentColor; color:#1B1305; background:none; animation:none; opacity:.55; } body[data-page="landing"] .cta-final .lead{ color:#1B1305; opacity:.82; max-width:44ch; font-size:clamp(15px,1.7vw,19px); } body[data-page="landing"] .cta-final .btn-primary{ background:#1B1305; color:#F4F1E8; border-color:#1B1305; } body[data-page="landing"] .cta-final .btn-primary:hover{ background:#000; } body[data-page="landing"] .cta-final .microcopy{ color:#1B1305; opacity:.72; } body[data-page="landing"] .cta-final .microcopy b{ color:#1B1305; } body[data-page="landing"] .cta-final .cta-info{ color:#1B1305; border-top:2px solid rgba(27,19,5,.28); padding-top:clamp(20px,3vw,28px); margin-top:clamp(26px,4vw,38px); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } body[data-page="landing"] .cta-final .cta-info a:hover{ color:#000; } body[data-page="landing"] .cta-final .cta-info b{ color:#1B1305; } /* ========================================================================= 08 · PIE, BARRA FIJA Y BOTÓN FLOTANTE ========================================================================= */ body[data-page="landing"] .site-footer{ border-top:2px solid var(--line-ink); padding:clamp(40px,6vw,64px) 0 44px; } body[data-page="landing"] .footer-col h3{ font-size:10.5px; font-weight:800; letter-spacing:.18em; } body[data-page="landing"] .footer-bottom{ border-top:2px solid var(--line-ink); font-size:11.5px; } body[data-page="landing"] .footer-brand .brand-text{ font-size:15px; } body[data-page="landing"] .sticky-cta{ border-top:2px solid rgba(244,241,232,.16); background:rgba(11,23,16,.94); } body[data-page="landing"] .sticky-cta .sc-text strong{ font-size:13px; font-weight:800; letter-spacing:-.01em; } body[data-page="landing"] .sticky-cta .btn{ padding:14px 20px; font-size:12px; } body[data-page="landing"] .wa-float{ border-radius:0; box-shadow:none; width:54px; height:54px; } @media (hover:hover) and (pointer:fine){ body[data-page="landing"] .wa-float:hover{ transform:none; background:#2FE374; } } /* --- Visor de imágenes --- */ body[data-page="landing"] .lightbox-img{ border-radius:0; box-shadow:none; } body[data-page="landing"] :is(.lightbox-cerrar,.lightbox-nav){ border-radius:0; border:0; background:var(--ink); color:var(--bg); } body[data-page="landing"] :is(.lightbox-cerrar,.lightbox-nav):hover{ background:#fff; color:var(--bg); } /* ========================================================================= 09 · ATMÓSFERA Los halos de color por sección se mantienen (son parte del carácter de la página), pero a la mitad de intensidad: el rediseño se apoya en paneles planos y bien recortados, y un halo fuerte los ensuciaba. ========================================================================= */ body[data-page="landing"] section::before{ opacity:.55; } body[data-page="landing"] :is(.pq-band, .cta-final)::before{ opacity:1; } body[data-page="landing"] .bg-alt{ background-color:#0E1D14; } /* Franja divisoria entre secciones: sustituye al aire vacío que había antes entre bloques del mismo color. */ body[data-page="landing"] :is(#antes-despues, #reel, #sobre-mi, #precios, #faq, #testimonios){ border-top:2px solid var(--line-ink); } /* ========================================================================= 10 · TARJETAS APILADAS (estilo Mercado Pago) Las cuatro dudas y los tres planes dejan de ser una grilla y pasan a ser una pila: cada tarjeta se queda pegada arriba y la siguiente le pasa por encima, mientras la de atrás se achica y se oscurece un poco. COMO SE PRENDE: el div contenedor lleva data-lbv2-apilar en el HTML. landing-v2.js le agrega la clase .lbv2-stack (que es la que dispara TODO lo de acá abajo) y numera las tarjetas con --i. Si el JS no corre, o si el visitante pidió "reducir movimiento", la clase nunca se agrega y las dos secciones quedan exactamente como estaban: grilla normal. PARA APAGARLO: sacar data-lbv2-apilar de los dos divs del HTML. OJO con el diseño interior: acá no se toca ni un color, ni un padding, ni la línea de 1px de las tarjetas. Lo único que cambia es dónde se paran. ========================================================================= */ body[data-page="landing"] .lbv2-stack{ /* --lbv2-alto-cab: el header es sticky y mide ~74px; la tarjeta pegada tiene que quedar justo abajo, no atrás. --lbv2-paso: cuánto asoma la tarjeta anterior por arriba de la nueva. --lbv2-ancho: en escritorio la pila se centra y no ocupa todo el ancho, que es lo que le da el aire de "mazo de tarjetas". */ --lbv2-alto-cab:86px; --lbv2-paso:12px; --lbv2-ancho:100%; display:block; /* sale de la grilla de 2 o 3 columnas */ /* Aire al final para que la última tarjeta se quede un momento arriba antes de que la sección se vaya de pantalla. */ padding-bottom:clamp(20px,9vh,96px); } body[data-page="landing"] .lbv2-stack > *{ position:sticky; top:calc(var(--lbv2-alto-cab) + var(--i, 0) * var(--lbv2-paso)); margin:0 auto clamp(14px,3.4vh,32px); max-width:var(--lbv2-ancho); /* El scale lo maneja el JS cuadro por cuadro: cualquier transition o animation acá pelearía con él (y una @keyframes le gana hasta al style inline). Por eso se apagan las dos. */ transition:none; animation:none; transform-origin:50% 0; will-change:transform, filter; /* .stagger-item arranca en opacity:0 esperando el reveal de app.js. En la pila ese reveal sobra —las tarjetas ya entran de a una— y encima dejaría la primera invisible si el observer no llega a tiempo. */ opacity:1; } body[data-page="landing"] .lbv2-stack > *:last-child{ margin-bottom:0; } @media (min-width:721px){ body[data-page="landing"] .lbv2-stack{ --lbv2-ancho:660px; --lbv2-paso:14px; } } /* --- Portafolio apilado: filas completas, no fotos sueltas -------------- .port-grid con data-lbv2-apilar no apila cada foto: apila FILAS enteras (.port-row), y landing-v2.js arma esos .port-row solo, agrupando de a 2 fotos en celular y de a 3 en escritorio (data-lbv2-fila-cols="2,3" en el HTML) — acá abajo solo queda pintar esa fila como una mini-grilla que respeta ese mismo número de columnas por tamaño de pantalla. Apilar las 12 fotos sueltas (probado antes) alargaba demasiado el scroll de una sección que existe para mostrarse de un vistazo; apilando fila por fila se ve el efecto sin ese costo, y cada hoja se ve exactamente como se veía la grilla original. El portafolio también necesita ocupar TODO el ancho de la sección, no la columna angosta de 660px que usan dudas y precios (pensada para párrafos de texto) — por eso pisa --lbv2-ancho acá. Como el selector es más específico que el de la regla general de arriba, gana sin importar el orden en el archivo. */ body[data-page="landing"] .port-grid.lbv2-stack{ --lbv2-ancho:100%; } body[data-page="landing"] .port-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:var(--bg); /* mismo fondo que .port-item: no se nota costura entre hojas */ } @media (min-width:820px){ body[data-page="landing"] .port-row{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ========================================================================= 11 · MOVIMIENTO REDUCIDO ========================================================================= */ @media (prefers-reduced-motion: reduce){ body[data-page="landing"] .hero-tile-img img{ animation:none; transform:none; } body[data-page="landing"] .cal-toggle .flecha{ transition:none; } }