/* ============================================================================ ESCRIBANÍA HORACIO VITALI Hoja propia — sin Bootstrap, sin AOS. Todo prefijado .hv-* Marca: bordó #620000 + dorado #CB9642 · Adobe Fonts (Kepler Std + Acumin Pro) ============================================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Bordó — tomado del logo (#620000) y oscurecido para profundidad */ --hv-wine: #620000; --hv-wine-soft: #7A1414; --hv-wine-deep: #3A0505; --hv-wine-ink: #260404; --hv-wine-black: #1A0303; /* Dorado — tomado del logo (degradé #B37E2B → #EBBC6A) */ --hv-gold: #CB9642; --hv-gold-light: #EBBF70; --hv-gold-deep: #B37E2B; --hv-gold-grad: linear-gradient(115deg, #B37E2B 0%, #EBBF70 46%, #CB9642 100%); /* Neutros cálidos */ --hv-white: #FEFDFD; --hv-cream: #F6EFE4; --hv-cream-dim: rgba(246, 239, 228, .74); --hv-cream-faint: rgba(246, 239, 228, .55); --hv-hairline: rgba(203, 150, 66, .30); /* Tipografías (kit Adobe Fonts ymg2lfs) */ --hv-display: "kepler-std-display", "Kepler Std", "Times New Roman", Georgia, serif; --hv-serif: "kepler-std", "Times New Roman", Georgia, serif; --hv-sans: "acumin-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Layout */ --hv-gutter: clamp(1.25rem, 4vw, 4.5rem); --hv-max: 1440px; --hv-header-h: 92px; --hv-header-h-sm: 68px; --hv-ease: cubic-bezier(.22, 1, .36, 1); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* El track existe SIEMPRE. Con overflow auto la barra aparece y desaparece, y cada vez la página se ensancha 15px y salta todo. Medido: ni scrollbar-gutter lo evita, porque el gutter no se reserva con overflow hidden. Track fijo = cero salto en cualquier estado. */ overflow-y: scroll; scrollbar-gutter: stable; /* Firefox */ scrollbar-width: thin; scrollbar-color: var(--hv-gold) #1E0404; } /* Barra de scroll de marca (WebKit / Blink) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: linear-gradient(90deg, rgba(203, 150, 66, .18) 0 1px, #1E0404 1px); } ::-webkit-scrollbar-thumb { border: 3px solid #1E0404; /* el borde del color del riel deja aire alrededor */ border-radius: 10px; background: linear-gradient(180deg, #7C5A1D 0%, #B37E2B 22%, #EBBF70 50%, #CB9642 78%, #7C5A1D 100%); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #B37E2B 0%, #E0B25E 22%, #F7E0AE 50%, #E5B96C 78%, #B37E2B 100%); } ::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, #8A1A10 0%, #B37E2B 30%, #F7E0AE 52%, #CB9642 76%, #8A1A10 100%); } ::-webkit-scrollbar-corner { background: #1E0404; } /* Sin flechitas en las puntas. OJO: headless Chrome dibuja igual un triangulito con su tema sintético de barra, así que esto no se puede verificar por captura; en Chrome real esta regla sí las saca. */ ::-webkit-scrollbar-button { display: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--hv-wine-ink); color: var(--hv-cream); font-family: var(--hv-sans); font-weight: 400; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* En , no en body: con overflow-y:scroll en html el de body ya no propaga */ html.hv-locked { overflow: hidden; /* compensa el ancho de la barra que se va, si no la página salta */ padding-right: var(--hv-sb, 0px); } img, svg, picture { display: block; max-width: 100%; } h1, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--hv-gold-light); outline-offset: 3px; border-radius: 2px; } .hv-skip { position: absolute; top: -100px; left: var(--hv-gutter); z-index: 200; padding: 12px 20px; background: var(--hv-gold); color: var(--hv-wine-deep); font: 600 13px/1 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; transition: top .25s var(--hv-ease); } .hv-skip:focus { top: 16px; } /* ---------- 3. Piezas de marca ---------- */ /* El rombo ◆ que separa "HORACIO VITALI" de "ESCRIBANÍA" en el logo */ .hv-diamond { width: 5px; height: 5px; flex: none; background: var(--hv-gold); transform: rotate(45deg); } .hv-gold-text { background: var(--hv-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hv-eyebrow { display: flex; flex: none; align-items: center; gap: 12px; font-family: var(--hv-sans); font-weight: 500; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--hv-gold-light); } .hv-rule { display: block; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--hv-hairline) 20%, var(--hv-hairline) 80%, transparent); } /* La pluma del logo, reusada como ícono vía */ .hv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .hv-quill { width: 11px; /* la pluma es 0.49 de ancho por alto */ height: 22px; flex: none; /* fill se hereda dentro del shadow tree del , así la pluma toma el color del botón que la contiene */ fill: currentColor; transition: transform .45s var(--hv-ease); } .hv-quill--sm { width: 8px; height: 16px; } /* Sobre fondo oscuro la pluma va dorada; sobre el botón dorado hereda el bordó del texto, que es lo que la deja legible. */ .hv-btn--ghost .hv-quill { color: var(--hv-gold-light); } /* Botones */ .hv-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 30px; border-radius: 2px; font-family: var(--hv-sans); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: transform .35s var(--hv-ease), box-shadow .45s var(--hv-ease), background-color .35s var(--hv-ease), border-color .35s var(--hv-ease), color .35s var(--hv-ease); } /* --- Luz que camina por el filo del botón, siempre, en loop lento --- Un cono de luz que gira detrás del botón y se recorta a un anillo de 1.5px con mask-composite. Queda como un destello que recorre el canto por dentro. */ @property --hv-ang { syntax: ""; inherits: false; initial-value: 0deg; } @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .hv-btn::before, .hv-nav__cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--hv-ang), var(--beam-hi) 0deg, var(--beam-mid) 9deg, var(--beam-lo) 24deg, transparent 48deg, transparent 312deg, var(--beam-lo) 336deg, var(--beam-mid) 351deg, var(--beam-hi) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hv-beam var(--beam-dur, 6s) linear infinite; } } @keyframes hv-beam { to { --hv-ang: 360deg; } } /* Barrido de luz: el brillo que recorre el oro al pasar el mouse */ .hv-btn::after { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 34%, rgba(255, 252, 244, .55) 47%, rgba(255, 252, 244, .75) 50%, rgba(255, 252, 244, .55) 53%, transparent 66%); transform: translateX(-135%); transition: transform .9s var(--hv-ease); } .hv-btn:hover::after, .hv-btn:focus-visible::after { transform: translateX(135%); } /* El dorado no lleva la luz caminante: contra el propio oro no se lee. Es el botón secundario y se queda con el barrido y el halo del hover. */ .hv-btn--gold::before { display: none; } .hv-btn--gold { background: var(--hv-gold-grad); color: var(--hv-wine-deep); /* Halo dorado en reposo: presente pero contenido */ box-shadow: inset 0 1px 0 rgba(255, 247, 232, .55), inset 0 0 0 1px rgba(255, 240, 214, .28), 0 10px 26px -16px rgba(203, 150, 66, .95), 0 0 22px -10px rgba(203, 150, 66, .55); } .hv-btn--gold:hover, .hv-btn--gold:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 247, 232, .8), inset 0 0 0 1px rgba(255, 240, 214, .45), 0 18px 36px -18px rgba(203, 150, 66, 1), 0 0 42px -8px rgba(235, 191, 112, .75); } /* Botón principal: fondo translúcido sobre la foto, filete dorado y la luz caminando por el canto. Sobre el bordó oscuro el destello se lee siempre. */ .hv-btn--ghost { --beam-hi: #FFF4DC; --beam-mid: rgba(235, 191, 112, .62); --beam-lo: rgba(203, 150, 66, .16); --beam-dur: 7.2s; background: rgba(26, 3, 3, .32); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); border: 1px solid rgba(203, 150, 66, .45); color: var(--hv-cream); } .hv-btn--ghost::after { opacity: .35; } .hv-btn--ghost:hover, .hv-btn--ghost:focus-visible { border-color: var(--hv-gold); background: rgba(203, 150, 66, .14); transform: translateY(-2px); box-shadow: inset 0 0 24px -12px rgba(235, 191, 112, .95), 0 0 34px -12px rgba(203, 150, 66, .8); } /* La pluma se levanta del papel */ .hv-btn:hover .hv-quill, .hv-btn:focus-visible .hv-quill, .hv-nav__cta:hover .hv-quill, .hv-nav__cta:focus-visible .hv-quill { transform: rotate(-11deg) translateY(-2px); } .hv-ico { width: 17px; height: 17px; flex: none; } /* ---------- 4. Header ---------- */ .hv-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hv-header-h); transition: height .45s var(--hv-ease), background-color .45s var(--hv-ease), box-shadow .45s var(--hv-ease), backdrop-filter .45s var(--hv-ease); } /* Velo suave para que el logo se lea sobre la foto sin barra sólida */ .hv-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 3, 3, .62), rgba(26, 3, 3, 0)); opacity: 1; transition: opacity .45s var(--hv-ease); pointer-events: none; } /* Hairline dorada inferior: sólo cuando la barra se vuelve sólida */ .hv-header::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hv-hairline) 15%, var(--hv-hairline) 85%, transparent); opacity: 0; transition: opacity .45s var(--hv-ease); } .hv-header[data-at-top="false"] { height: var(--hv-header-h-sm); background: rgba(42, 5, 5, .88); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .9); } .hv-header[data-at-top="false"]::before { opacity: 0; } .hv-header[data-at-top="false"]::after { opacity: 1; } .hv-header__inner { position: relative; height: 100%; max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .hv-logo img { height: 50px; width: auto; transition: height .45s var(--hv-ease); } .hv-header[data-at-top="false"] .hv-logo img { height: 38px; } /* Nav de escritorio */ .hv-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); } .hv-nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); } .hv-nav__list a { position: relative; display: block; padding: 6px 0; font-weight: 500; font-size: 12.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--hv-cream-dim); transition: color .3s var(--hv-ease); } .hv-nav__list a::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--hv-gold); transform: scaleX(0); transform-origin: center; transition: transform .4s var(--hv-ease); } .hv-nav__list a:hover, .hv-nav__list a:focus-visible, .hv-nav__list a.is-current { color: var(--hv-white); } .hv-nav__list a:hover::after, .hv-nav__list a:focus-visible::after, .hv-nav__list a.is-current::after { transform: scaleX(1); } .hv-nav__cta { --beam-hi: #F7DFAE; --beam-mid: rgba(235, 191, 112, .45); --beam-lo: rgba(203, 150, 66, .10); --beam-dur: 8.4s; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 1px solid rgba(203, 150, 66, .45); border-radius: 2px; font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hv-gold-light); transition: background-color .35s var(--hv-ease), color .35s var(--hv-ease), border-color .35s var(--hv-ease), box-shadow .45s var(--hv-ease); } .hv-nav__cta:hover, .hv-nav__cta:focus-visible { background: var(--hv-gold-grad); border-color: transparent; color: var(--hv-wine-deep); box-shadow: inset 0 1px 0 rgba(255, 247, 232, .7), 0 0 34px -10px rgba(235, 191, 112, .8); } /* Burger */ /* Flex con gap fijo en vez de márgenes: así el desplazamiento que cierra la X es exactamente el gap + el grosor de la línea. */ .hv-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 42px; height: 42px; margin-right: -9px; padding: 0; } .hv-burger span { display: block; width: 24px; height: 1.5px; background: var(--hv-cream); transition: transform .4s var(--hv-ease), opacity .25s var(--hv-ease); } .hv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .hv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ---------- 5. Drawer móvil ---------- */ .hv-drawer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(var(--hv-header-h-sm) + 2rem) var(--hv-gutter) 3rem; background: radial-gradient(120% 90% at 15% 0%, rgba(98, 0, 0, .95), transparent 62%), linear-gradient(160deg, var(--hv-wine-deep), var(--hv-wine-black)); opacity: 0; transition: opacity .4s var(--hv-ease); } .hv-drawer[hidden] { display: none; } .hv-drawer.is-open { opacity: 1; } .hv-drawer__nav { width: 100%; max-width: 460px; } .hv-drawer__nav ul { display: flex; flex-direction: column; gap: 4px; } .hv-drawer__nav li { opacity: 0; transform: translateY(14px); } .hv-drawer.is-open .hv-drawer__nav li, .hv-drawer.is-open .hv-drawer__foot { animation: hv-rise .6s var(--hv-ease) forwards; animation-delay: calc(var(--i) * 60ms + 100ms); } /* Acotado a los ítems de la lista: el botón y el teléfono del pie también son dentro de .hv-drawer__nav y heredaban la display a 2.2rem. */ .hv-drawer__nav ul a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(203, 150, 66, .16); font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; color: var(--hv-cream); transition: color .3s var(--hv-ease), padding-left .35s var(--hv-ease); } .hv-drawer__nav ul a:hover, .hv-drawer__nav ul a:focus-visible { color: var(--hv-gold-light); padding-left: 10px; } .hv-drawer__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 40px; opacity: 0; transform: translateY(14px); } .hv-drawer__tel { font-family: var(--hv-serif); font-size: 1.2rem; color: var(--hv-gold-light); } /* ---------- 6. Hero ---------- */ /* El fondo bordó es del hero, no de la foto: la imagen que se usa es la original sin retoque, y el degradé, el desvanecido y las ondas se arman acá. Capas, de atrás hacia adelante: fondo bordó (background del section) -3 .hv-hero__stage panel de foto a la derecha, con el canto izq. calado -2 .hv-hero__veil oscurecido sobre el empalme foto/bordó -1 .hv-waves ondas doradas, cruzan todo el pie – .hv-hero__inner el texto */ .hv-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hv-header-h) + 3.5rem) 0 4.5rem; background: radial-gradient(115% 95% at 6% 16%, #4C0909 0%, rgba(76, 9, 9, 0) 56%), linear-gradient(155deg, #3A0505 0%, #260404 54%, #180303 100%); overflow: hidden; } .hv-hero__stage { position: absolute; inset: 0 0 0 auto; z-index: -3; width: 58%; /* El canto izquierdo se funde con el bordó en vez de cortar a filo */ -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 15%, #000 44%); mask: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 15%, #000 44%); } .hv-hero__media, .hv-hero__media img { width: 100%; height: 100%; } .hv-hero__media img { object-fit: cover; object-position: 50% center; /* Revelado suave a propósito: el contrast por encima de 1 le talla cada línea de la cara en un plano frontal y cercano. Bajarlo y levantar el brillo lo deja natural sin retocarle nada. */ filter: saturate(.84) contrast(.94) brightness(1.04); } /* Vira la foto al bordó de marca y le cierra los bordes */ .hv-hero__tone { position: absolute; inset: 0; background: radial-gradient(82% 78% at 48% 30%, rgba(24, 3, 3, 0) 0%, rgba(24, 3, 3, .26) 58%, rgba(24, 3, 3, .78) 100%), linear-gradient(90deg, rgba(24, 3, 3, .80) 0%, rgba(38, 4, 4, .30) 30%, transparent 56%), linear-gradient(0deg, rgba(24, 3, 3, .70) 0%, transparent 20%); } .hv-hero__tone::after { content: ""; position: absolute; inset: 0; background: var(--hv-wine); mix-blend-mode: multiply; opacity: .26; } @media (prefers-reduced-motion: no-preference) { .hv-hero__media img { animation: hv-kenburns 2.4s var(--hv-ease) both; } } .hv-hero__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(24, 3, 3, .72) 0%, rgba(30, 4, 4, .40) 30%, rgba(38, 4, 4, .08) 48%, transparent 60%), linear-gradient(180deg, rgba(20, 3, 3, .45) 0%, transparent 22%), linear-gradient(0deg, rgba(20, 3, 3, .50) 0%, transparent 24%); } /* Ondas doradas: el mismo gesto del filete del logo. preserveAspectRatio="none" las estira a lo ancho; non-scaling-stroke evita que el trazo engorde con eso. */ .hv-waves { position: absolute; inset: auto 0 -1% 0; z-index: -1; width: 100%; height: clamp(160px, 30%, 320px); color: var(--hv-gold); pointer-events: none; /* Se apagan antes de cruzar al escribano: en el banner viven del lado bordó */ -webkit-mask: linear-gradient(90deg, #000 0%, #000 42%, transparent 78%); mask: linear-gradient(90deg, #000 0%, #000 42%, transparent 78%); } .hv-waves path { stroke-width: 1; opacity: calc(.30 - var(--w) * .045); } @media (prefers-reduced-motion: no-preference) { .hv-waves g { animation: hv-marea 26s ease-in-out infinite alternate; } } .hv-hero__inner { width: 100%; max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); } /* Sin align-items:flex-start a propósito: con shrink-to-fit los hijos que tienen max-width propio (el lead, la fila de botones) se desbordan del contenedor en pantallas angostas. Con el stretch por defecto, cada hijo hereda el ancho de la columna y su max-width sólo lo recorta. */ .hv-hero__text { display: flex; flex-direction: column; gap: 1.6rem; /* Se frena antes del borde del panel de foto (58% derecho) */ max-width: clamp(21rem, 34vw, 30rem); } .hv-hero__title { display: flex; flex-direction: column; gap: .55rem; margin: 0; font-weight: 400; } .hv-hero__name { font-family: var(--hv-display); font-weight: 300; font-size: clamp(3.1rem, 6.4vw, 5.9rem); line-height: .94; letter-spacing: -.018em; color: var(--hv-white); } .hv-hero__lead { max-width: 32rem; font-size: clamp(.95rem, 1.05vw, 1.02rem); line-height: 1.75; text-wrap: balance; /* evita que quede una palabra huérfana en la 2ª línea */ color: var(--hv-cream-dim); } .hv-hero__lead strong { font-weight: 600; color: var(--hv-cream); } .hv-hero__lead em { font-family: var(--hv-serif); font-style: italic; color: var(--hv-cream); } .hv-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: .3rem; } /* Indicador de scroll */ .hv-scroll { position: absolute; left: var(--hv-gutter); bottom: 26px; z-index: 2; width: 22px; height: 52px; display: grid; place-items: center; } .hv-scroll__line { position: relative; width: 1px; height: 100%; background: rgba(203, 150, 66, .28); overflow: hidden; } .hv-scroll__line::after { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(180deg, transparent, var(--hv-gold-light)); animation: hv-drop 2.1s var(--hv-ease) infinite; } /* ---------- 7. Animaciones ---------- */ @keyframes hv-rise { to { opacity: 1; transform: none; } } @keyframes hv-marea { to { transform: translate3d(-2.2%, 6px, 0); } } @keyframes hv-kenburns { from { transform: scale(1.07); } to { transform: scale(1); } } @keyframes hv-drop { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(250%); } } .hv-rise { opacity: 0; transform: translateY(18px); animation: hv-rise .9s var(--hv-ease) forwards; animation-delay: calc(var(--d) * 95ms + 180ms); } @media (prefers-reduced-motion: reduce) { .hv-rise, .hv-drawer.is-open .hv-drawer__nav li, .hv-drawer.is-open .hv-drawer__foot { opacity: 1; transform: none; animation: none; } .hv-scroll__line::after { animation: none; } .hv-waves g { animation: none; } .hv-btn::after { display: none; } /* el barrido de luz sin transición sería un flash */ .hv-btn::before, .hv-nav__cta::before { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; } } /* ---------- 8. Sección puente (provisoria) ---------- */ .hv-next { display: grid; place-items: center; min-height: 46svh; background: var(--hv-cream); color: rgba(38, 4, 4, .45); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; } /* ---------- 9. Responsive ---------- */ /* Pantallas altas y anchas: un poco más de aire */ @media (min-width: 1600px) { .hv-hero__text { max-width: 32rem; gap: 1.8rem; } } /* Viewports bajos: comprimir para que el hero entre sin scroll */ @media (max-height: 780px) and (min-width: 860px) { .hv-hero { padding-top: calc(var(--hv-header-h) + 1.5rem); padding-bottom: 3rem; } .hv-hero__text { gap: 1.15rem; } .hv-hero__name { font-size: clamp(2.7rem, 5vw, 4.2rem); } .hv-scroll { display: none; } } /* Tablet */ @media (max-width: 1100px) { .hv-nav__list { gap: 1rem; } .hv-nav__list a { font-size: 11.5px; letter-spacing: .13em; } .hv-hero__stage { width: 56%; } } /* 600–859: sigue apilado, pero con la foto ancha en vez del retrato */ @media (min-width: 600px) and (max-width: 859px) { .hv-hero__stage { height: min(58svh, 430px); } .hv-hero__media img { object-position: 50% 30%; } } /* Móvil: la foto pasa arriba y el texto se compone sobre el bordó */ @media (max-width: 859px) { :root { --hv-header-h: 68px; } .hv-nav { display: none; } .hv-burger { display: flex; } /* flex, no grid: el grid estira las filas y las líneas nunca llegan a cruzarse */ /* Mismo esquema que el hero de Trayectoria: texto arriba y la foto entera abajo, enmarcada. Antes la foto iba arriba recortada y se perdía el libro. */ .hv-hero { display: flex; flex-direction: column; min-height: 0; padding: calc(var(--hv-header-h) + 2.2rem) 0 3.5rem; background: linear-gradient(170deg, var(--hv-wine-deep) 0%, var(--hv-wine-ink) 55%, var(--hv-wine-black) 100%); } .hv-hero__stage { order: 3; position: relative; inset: auto; z-index: 1; width: min(calc(100% - var(--hv-gutter) * 2), 460px); height: auto; aspect-ratio: 4 / 5; margin: 2.4rem var(--hv-gutter) 0; overflow: hidden; border: 1px solid rgba(203, 150, 66, .35); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); -webkit-mask: none; mask: none; } .hv-hero__media img { object-position: 50% 50%; } /* Solo un velo suave en el pie, como en Trayectoria: la foto se ve completa */ .hv-hero__tone { background: linear-gradient(180deg, transparent 62%, rgba(26, 3, 3, .45) 100%); } .hv-hero__tone::after { opacity: .12; } .hv-hero__veil { display: none; } .hv-waves { height: 190px; opacity: .8; } /* inner y text se disuelven (display: contents) para que título, bajada y botones queden como hijos directos del hero y se ordenen alrededor de la foto: texto arriba, la foto enmarcada y los botones debajo. */ .hv-hero__inner, .hv-hero__text { display: contents; } .hv-hero__title, .hv-hero__lead, .hv-hero__cta { position: relative; z-index: 2; margin-inline: var(--hv-gutter); } /* stretch: el hero centra sus hijos; el texto va alineado a la izquierda como antes */ .hv-hero__title { order: 1; align-self: stretch; } .hv-hero__lead { order: 2; align-self: stretch; margin-top: 1.25rem; } .hv-hero__name { font-size: clamp(2.9rem, 13.5vw, 4rem); } .hv-hero__lead { font-size: .95rem; } /* mismo ancho que el marco de la foto */ .hv-hero__cta { order: 4; width: min(calc(100% - var(--hv-gutter) * 2), 460px); margin-top: 1.8rem; } .hv-hero__cta .hv-btn { flex: 1 1 auto; } .hv-scroll { display: none; } } @media (max-width: 430px) { /* "Escribanía en Paraná, Entre Ríos" tiene que entrar en un renglón: partido en dos queda colgando debajo del rombo. */ .hv-eyebrow { gap: 9px; font-size: 10.5px; letter-spacing: .16em; } } @media (max-width: 400px) { .hv-hero__cta { flex-direction: column; align-items: stretch; } } /* ============================================================================ PRELOADER — la pluma revela el logo a su paso Solo existe si el script del puso .hv-preload en : sin JS, con motion reducido o en visita repetida, este bloque nunca se muestra. ============================================================================ */ .hv-preloader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--hv-gutter); background: radial-gradient(120% 92% at 50% 42%, #4A0808 0%, #2A0606 46%, #1A0303 100%); transition: opacity .6s var(--hv-ease); } html:not(.hv-preload) .hv-preloader { display: none; } .hv-preloader.is-out { opacity: 0; pointer-events: none; } .hv-preloader__mark { position: relative; width: min(380px, 74vw); } /* La marca se descubre con una máscara que barre de izquierda a derecha. Con mask-size 220% el borde del barrido va de -10% a 110% del ancho cuando mask-position pasa de 100% a 0% — exactamente el recorrido de la pluma, así plumín y borde de revelado caen siempre en el mismo punto. */ .hv-preloader__logo { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, #000 0 47%, rgba(0,0,0,.45) 49.5%, transparent 52%); mask-image: linear-gradient(90deg, #000 0 47%, rgba(0,0,0,.45) 49.5%, transparent 52%); -webkit-mask-size: 220% 100%; mask-size: 220% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; animation: hv-revelar 1.15s cubic-bezier(.55, .03, .35, 1) .22s forwards; } /* El track ocupa el ancho de la marca, así los % del translate se miden contra la marca y no contra la pluma */ .hv-preloader__track { position: absolute; inset: 0; transform: translateX(-10%); animation: hv-escribir 1.15s cubic-bezier(.55, .03, .35, 1) .22s forwards; } /* 59% es la altura del filete dentro del logo; 7.45%/98.75% es el plumín dentro de la caja de la pluma. Con eso la punta apoya sobre la línea. */ .hv-preloader__pen { position: absolute; top: 59%; left: 0; width: 31px; height: 63px; fill: var(--hv-gold-light); transform-origin: 7.45% 98.75%; transform: translate(-7.45%, -98.75%) rotate(19deg); opacity: 0; animation: hv-pen-in .22s var(--hv-ease) forwards, hv-pen-lift .40s var(--hv-ease) 1.37s forwards; } @keyframes hv-revelar { to { -webkit-mask-position: 0 0; mask-position: 0 0; } } @keyframes hv-escribir { to { transform: translateX(110%); } } @keyframes hv-pen-in { to { opacity: 1; } } /* Levanta la pluma del papel al terminar */ @keyframes hv-pen-lift { from { opacity: 1; transform: translate(-7.45%, -98.75%) rotate(19deg); } to { opacity: 0; transform: translate(6%, -112%) rotate(34deg); } } /* ============================================================================ REVELADO AL SCROLL — reutilizable en todas las secciones Se oculta sólo si hay JS (.hv-js): sin JS todo queda visible. ============================================================================ */ .hv-js .hv-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--hv-ease), transform .9s var(--hv-ease); transition-delay: calc(var(--r, 0) * 110ms); } .hv-js .hv-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hv-js .hv-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================================ LA ESCRIBANÍA Sección de papel: después del bordó del hero, el blanco crema hace de documento. Tinta bordó, filetes dorados, capitular y sello en seco. ============================================================================ */ .hv-about { --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); --ink-faint: rgba(43, 21, 18, .55); position: relative; isolation: isolate; overflow: hidden; padding: clamp(4.5rem, 9vw, 8.5rem) 0 clamp(4rem, 8vw, 7rem); background: radial-gradient(120% 80% at 82% 0%, #FCF8EF 0%, rgba(252, 248, 239, 0) 55%), linear-gradient(178deg, var(--paper) 0%, var(--paper) 62%, var(--paper-deep) 100%); color: var(--ink-soft); } /* Filete dorado de canto, como el borde de un instrumento público */ .hv-about::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .55) 22%, rgba(203, 150, 66, .55) 78%, transparent); } /* Sello en seco: la pluma del logo, grande y casi invisible */ .hv-about__sello { position: absolute; z-index: -1; top: clamp(2rem, 5vw, 5rem); right: clamp(-3rem, -2vw, -1rem); width: clamp(240px, 30vw, 460px); opacity: .05; transform: rotate(14deg); pointer-events: none; } .hv-about__sello svg { width: 100%; height: auto; aspect-ratio: 156.2 / 318.97; fill: var(--hv-wine); } .hv-about__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(2.5rem, 6vw, 6.5rem); row-gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } /* ---- Cabecera: el planteo ---- */ .hv-about__head { grid-column: 1; } .hv-overline { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; font-family: var(--hv-sans); font-weight: 500; font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-about__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.15rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.012em; color: var(--hv-wine-deep); text-wrap: balance; } .hv-about__title em { font-style: normal; color: var(--hv-gold-deep); } .hv-about__deck { margin-top: 1.4rem; padding-left: 16px; border-left: 1px solid rgba(203, 150, 66, .5); font-family: var(--hv-serif); font-size: clamp(1.1rem, 1.3vw, 1.26rem); line-height: 1.55; color: var(--ink); } /* ---- Cuerpo: el problema ---- */ .hv-about__body { grid-column: 2; display: flex; flex-direction: column; gap: 1.3rem; } .hv-about__p { font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.75; } .hv-about__p em { font-style: italic; color: var(--ink); } /* Capitular: el gesto más de documento que hay */ .hv-about__p--capital::first-letter { float: left; margin: .06em .1em 0 0; font-family: var(--hv-display); font-weight: 300; font-size: 4em; line-height: .78; color: var(--hv-wine); } .hv-about__giro { margin-top: .4rem; font-family: var(--hv-serif); font-size: clamp(1.14rem, 1.45vw, 1.38rem); line-height: 1.58; color: var(--hv-wine-deep); } /* ---- Modo de trabajo: la solución, contada por lo que pasa ---- */ .hv-about__modo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: clamp(1rem, 3vw, 2.5rem); border-top: 1px solid rgba(43, 21, 18, .14); } .hv-about__modo li { padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.4rem, 3vw, 3rem) clamp(1.6rem, 2.6vw, 2.4rem) 0; border-bottom: 1px solid rgba(43, 21, 18, .14); } .hv-about__modo li:nth-child(odd) { padding-right: clamp(2rem, 4vw, 4rem); border-right: 1px solid rgba(43, 21, 18, .14); } .hv-about__modo li:nth-child(even) { padding-left: clamp(1.4rem, 3vw, 3rem); } .hv-about__modo li:nth-last-child(-n+2) { border-bottom: 0; } .hv-about__num { display: block; margin-bottom: .7rem; font-family: var(--hv-display); font-size: .95rem; letter-spacing: .24em; color: var(--hv-gold-deep); } .hv-about__modo h3 { margin: 0 0 .55rem; font-family: var(--hv-serif); font-weight: 600; font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.35; color: var(--hv-wine-deep); } .hv-about__modo p { font-size: 1.04rem; line-height: 1.72; } /* ---- Cierre: la persona que responde ---- */ .hv-about__firma { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; margin-top: clamp(1.5rem, 4vw, 3.5rem); max-width: 44rem; margin-inline: auto; } .hv-about__firma .hv-rule { width: 120px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .7), transparent); } .hv-about__firma-line { font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.28; color: var(--hv-wine-deep); text-wrap: balance; } .hv-about__firma-line em { font-style: normal; color: var(--hv-gold-deep); } .hv-about__firma-body { max-width: 34rem; font-family: var(--hv-serif); font-size: 1.08rem; line-height: 1.75; } .hv-about__firma-body strong { font-weight: 600; color: var(--ink); } .hv-about__firma-body em { font-style: italic; } /* Botón bordó: sobre papel, el dorado pierde contraste */ .hv-btn--wine { --beam-hi: #F7DFAE; --beam-mid: rgba(235, 191, 112, .55); --beam-lo: rgba(203, 150, 66, .14); --beam-dur: 7.8s; margin-top: .4rem; background: linear-gradient(158deg, #7A1414 0%, #620000 46%, #3A0505 100%); color: var(--hv-cream); box-shadow: inset 0 1px 0 rgba(255, 236, 205, .20), 0 12px 28px -18px rgba(58, 5, 5, .95); } .hv-btn--wine:hover, .hv-btn--wine:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 236, 205, .32), 0 20px 38px -20px rgba(58, 5, 5, 1), 0 0 30px -14px rgba(203, 150, 66, .8); } .hv-btn--wine .hv-quill { color: var(--hv-gold-light); } /* ---- Responsive ---- */ @media (max-width: 980px) { .hv-about__inner { grid-template-columns: minmax(0, 1fr); } .hv-about__head, .hv-about__body { grid-column: 1; } .hv-about__modo { grid-template-columns: minmax(0, 1fr); } .hv-about__modo li, .hv-about__modo li:nth-child(odd), .hv-about__modo li:nth-child(even) { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid rgba(43, 21, 18, .14); } .hv-about__modo li:last-child { border-bottom: 0; } } @media (max-width: 599px) { .hv-about__sello { opacity: .04; right: -18%; } .hv-about__firma { text-align: left; align-items: flex-start; } .hv-about__firma .hv-rule { background: linear-gradient(90deg, rgba(203, 150, 66, .7), transparent); } .hv-about__firma-line br { display: none; } .hv-btn--wine { width: 100%; } } /* Epígrafe: la voz del autor sostiene la columna izquierda y, de paso, demuestra que escribió sobre esto en vez de anunciarlo. */ .hv-about__cita { margin: clamp(2rem, 4vw, 3.2rem) 0 0; padding-top: 1.6rem; border-top: 1px solid rgba(203, 150, 66, .45); max-width: 30rem; } .hv-about__cita blockquote { margin: 0; font-family: var(--hv-display); font-weight: 300; font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.62rem); line-height: 1.35; color: var(--hv-wine-deep); text-wrap: balance; } /* Comilla volada, fuera de la caja de texto para no descolgar el margen */ .hv-about__cita blockquote::before { content: "«"; margin-left: -.55em; color: var(--hv-gold-deep); } .hv-about__cita blockquote::after { content: "»"; color: var(--hv-gold-deep); } .hv-about__cita figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 1.1rem; } .hv-about__cita cite { font-family: var(--hv-serif); font-style: italic; font-size: 1.06rem; color: var(--ink); } .hv-about__cita figcaption span { font-family: var(--hv-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } /* Debajo de 1200 la columna se angosta y el salto forzado deja "entender." solo: se saca el
y text-wrap:balance reparte las líneas. */ @media (max-width: 1200px) { .hv-about__title br { display: none; } } /* ============================================================================ OBRAS · franja del home + página obras.html ============================================================================ */ .hv-overline--dark { color: var(--hv-gold-light); } /* ---- Tapas: mismo trato para todas, vengan de donde vengan ---- */ .hv-tapa { display: block; width: 100%; /* height:auto es obligatorio: el atributo height="900" del se vuelve height:900px, y con ancho y alto fijos el navegador ignora aspect-ratio. Sin esto las tapas salían como tiras de 900px de alto. */ height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 240, 214, .10), 0 26px 40px -24px rgba(0, 0, 0, .85), 0 8px 14px -8px rgba(0, 0, 0, .5); transition: transform .6s var(--hv-ease), box-shadow .6s var(--hv-ease); } /* Tapa pendiente: se ve como un libro de la casa hasta tener la real */ .hv-tapa--pendiente { display: flex; flex-direction: column; justify-content: space-between; padding: 16% 12%; background: linear-gradient(160deg, #4A0A0A 0%, #2A0606 55%, #160202 100%); outline: 1px solid rgba(203, 150, 66, .38); outline-offset: -8px; color: var(--hv-cream); } .hv-tapa__autor { font: 500 clamp(8px, .72vw, 10.5px)/1.35 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-gold-light); } .hv-tapa__titulo { font-family: var(--hv-display); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.5rem); line-height: 1.12; } /* ---- Franja del home ---- */ .hv-obras { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); background: radial-gradient(90% 70% at 88% 0%, #FCF8EF 0%, rgba(252, 248, 239, 0) 58%), linear-gradient(178deg, var(--paper) 0%, var(--paper) 60%, var(--paper-deep) 100%); color: var(--ink-soft); } .hv-obras::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .45) 22%, rgba(203, 150, 66, .45) 78%, transparent); } /* Sin align-items:flex-start a propósito: con shrink-to-fit los hijos con max-width propio se desbordaban en pantallas angostas (ya pasó en el hero). */ .hv-obras__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 3.8rem); } .hv-obras__head { max-width: 44rem; } .hv-obras__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 3.3rem); line-height: 1.08; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; } .hv-obras__title em { font-style: normal; color: var(--hv-gold-deep); } .hv-obras__lead { margin-top: 1.2rem; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.7; } .hv-obras__lead em { color: var(--ink); } .hv-obras__estante { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.6rem); } .hv-obras__estante a { display: flex; flex-direction: column; gap: 8px; } .hv-obras__estante a:hover .hv-tapa, .hv-obras__estante a:focus-visible .hv-tapa { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 240, 214, .14), 0 34px 46px -24px rgba(0, 0, 0, .9), 0 0 38px -14px rgba(203, 150, 66, .45); } .hv-obras__anio { margin-top: 10px; font: 500 10.5px/1.35 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-obras__nombre { font-family: var(--hv-serif); font-size: 1.02rem; line-height: 1.35; color: var(--ink); } .hv-obras__cta { align-self: flex-start; } /* En móvil el estante se desliza con el dedo, a sangre de canto a canto */ @media (max-width: 859px) { .hv-obras__estante { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--hv-gutter) * -1); padding: 0 var(--hv-gutter) 1rem; scroll-padding-inline: var(--hv-gutter); scrollbar-width: none; } .hv-obras__estante::-webkit-scrollbar { display: none; } .hv-obras__estante li { scroll-snap-align: start; } } /* ---- Página obras.html: cabecera ---- */ .hv-pagina-hero { position: relative; padding: calc(var(--hv-header-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(3.5rem, 7vw, 6rem); background: radial-gradient(90% 90% at 10% 0%, rgba(98, 0, 0, .6), transparent 60%), linear-gradient(165deg, var(--hv-wine-deep) 0%, var(--hv-wine-ink) 60%, var(--hv-wine-black) 100%); color: var(--hv-cream-dim); } .hv-pagina-hero__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: flex; flex-direction: column; gap: 1.2rem; } .hv-migas { display: flex; gap: 10px; margin-bottom: .6rem; font: 500 11px/1 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-cream-faint); } .hv-migas a { color: var(--hv-gold-light); transition: color .3s var(--hv-ease); } .hv-migas a:hover { color: var(--hv-white); } .hv-pagina-hero__titulo { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.02; letter-spacing: -.018em; color: var(--hv-white); text-wrap: balance; } .hv-pagina-hero__lead { max-width: 38rem; font-family: var(--hv-serif); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; } /* ---- Página obras.html: un libro por fila, a ancho completo ---- */ .hv-obras-lista { --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); --ink-faint: rgba(43, 21, 18, .55); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); background: linear-gradient(178deg, var(--paper) 0%, var(--paper) 70%, var(--paper-deep) 100%); color: var(--ink-soft); } .hv-obras-lista__inner { max-width: 1180px; margin-inline: auto; padding-inline: var(--hv-gutter); } .hv-obra { display: grid; grid-template-columns: clamp(180px, 22vw, 290px) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(2.8rem, 5.5vw, 4.6rem); border-top: 1px solid rgba(203, 150, 66, .32); scroll-margin-top: calc(var(--hv-header-h-sm) + 1.5rem); } .hv-obra:first-of-type { border-top: 0; padding-top: 0; } /* La tapa acompaña mientras se lee una descripción larga */ .hv-obra__tapa { position: sticky; top: calc(var(--hv-header-h-sm) + 2rem); } .hv-obra__cuerpo { max-width: 46rem; } .hv-obra__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 11px/1.2 var(--hv-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-obra__titulo { margin: .9rem 0 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.95rem, 3.2vw, 2.9rem); line-height: 1.06; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; } .hv-obra__subtitulo { margin-top: .6rem; font-family: var(--hv-serif); font-style: italic; font-size: clamp(1.08rem, 1.3vw, 1.24rem); line-height: 1.45; text-wrap: balance; } .hv-obra__prologo { margin-top: 1rem; font: 500 11px/1.4 var(--hv-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .hv-obra__premio { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.4rem; padding: 11px 18px; border: 1px solid rgba(179, 126, 43, .55); background: linear-gradient(115deg, rgba(235, 191, 112, .18), rgba(203, 150, 66, .05)); font-family: var(--hv-serif); font-size: 1rem; line-height: 1.4; color: var(--ink); } .hv-obra__premio small { display: block; margin-top: 2px; font: 500 10.5px/1.4 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-obra__desc { margin-top: 1.4rem; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.75; } .hv-obra__ficha { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 1.4rem 0 0; font: 400 13.5px/1.4 var(--hv-sans); color: var(--ink-faint); } .hv-obra__ficha div { display: flex; align-items: baseline; gap: 8px; } .hv-obra__ficha dt { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-obra__ficha dd { margin: 0; } .hv-obra .hv-btn--wine { margin-top: 1.9rem; } @media (max-width: 859px) { .hv-obra { grid-template-columns: 1fr; row-gap: 1.8rem; } .hv-obra__tapa { position: static; width: min(62%, 240px); } } /* ---- Página obras.html: cierre ---- */ .hv-pagina-cierre { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: linear-gradient(170deg, var(--hv-wine-deep) 0%, var(--hv-wine-black) 100%); } .hv-pagina-cierre::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .45) 22%, rgba(203, 150, 66, .45) 78%, transparent); } .hv-pagina-cierre__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 2rem; } .hv-pagina-cierre__linea { font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; color: var(--hv-white); } .hv-pagina-cierre__acciones { display: flex; flex-wrap: wrap; gap: 14px; } /* >>> HERO RETRATO ========================================================== El hero deja la foto a sangre y pasa a un retrato a la derecha, en composición editorial. Foto natural, sin el virado bordó (el fondo bordó ya lo pone la sección). ============================================================================ */ .hv-hero__veil { display: none; } .hv-hero__media { display: block; overflow: hidden; } .hv-hero__media img { object-position: 50% 35%; filter: saturate(.94) contrast(1.02); } .hv-hero__tone { background: linear-gradient(180deg, transparent 68%, rgba(26, 3, 3, .32) 100%); } .hv-hero__tone::after { opacity: .06; } /* Composición editorial (elegida entre tres maquetas): texto y retrato juntos en un contenedor de 1120 px, el retrato montado sobre un bloque bordó más claro corrido abajo a la derecha, con un filo dorado al pie. */ @media (min-width: 860px) { .hv-hero__inner { max-width: 1120px; } .hv-hero__text { max-width: min(34rem, 48vw); } .hv-hero__stage { inset: auto; top: calc(50% + var(--hv-header-h) / 2 - 1rem); right: max(var(--hv-gutter), calc((100% - 1120px) / 2 + var(--hv-gutter) + 28px)); z-index: 1; width: clamp(280px, 23vw, 350px); height: auto; aspect-ratio: 4 / 5; border: 1px solid rgba(203, 150, 66, .5); transform: translateY(-50%); -webkit-mask: none; mask: none; } /* la lámina de fondo: bordó más claro, corrida 28 px */ .hv-hero__stage::before { content: ""; position: absolute; z-index: -1; inset: 28px -28px -28px 28px; background: linear-gradient(160deg, rgba(140, 27, 21, .55), rgba(74, 7, 7, .35)); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); pointer-events: none; } /* filo dorado al pie del retrato */ .hv-hero__stage::after { content: ""; position: absolute; right: -1px; bottom: -1px; left: -1px; height: 3px; background: var(--hv-gold-grad); } } /* <<< HERO RETRATO */ /* >>> ESCRIBANIA ============================================================ Sección La Escribanía (texto de Vitali). Usa el fondo, el filete y el sello de .hv-about; todo lo demás es .hv-esc__* ============================================================================ */ .hv-esc__inner { max-width: 1240px; margin-inline: auto; padding-inline: var(--hv-gutter); display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); } /* ---- 1 · Planteo ---- */ .hv-esc__planteo { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .hv-esc__head { position: sticky; top: calc(var(--hv-header-h-sm) + 2rem); } .hv-esc__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.1rem, 3.7vw, 3.3rem); line-height: 1.08; letter-spacing: -.012em; color: var(--hv-wine-deep); text-wrap: balance; } .hv-esc__title em { font-style: normal; color: var(--hv-gold-deep); } .hv-esc__deck { margin: 1.5rem 0 0; padding-left: 16px; border-left: 1px solid rgba(203, 150, 66, .55); font-family: var(--hv-serif); font-size: clamp(1.15rem, 1.45vw, 1.36rem); line-height: 1.5; color: var(--ink); } .hv-esc__texto { display: flex; flex-direction: column; gap: 1.3rem; } .hv-esc__p { margin: 0; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.75; } .hv-esc__p strong { font-weight: 500; color: var(--ink); } .hv-esc__p--capital::first-letter { float: left; margin: .06em .1em 0 0; font-family: var(--hv-display); font-weight: 300; font-size: 4em; line-height: .78; color: var(--hv-wine); } /* Las cuatro palabras de Vitali, en fila, como encabezado de acta */ .hv-esc__cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: .5rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(203, 150, 66, .5); border-bottom: 1px solid rgba(203, 150, 66, .5); } .hv-esc__cuatro li { padding: 1.1rem .7rem 1.25rem .9rem; border-left: 1px solid rgba(203, 150, 66, .3); font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.08rem, 1.3vw, 1.26rem); line-height: 1.15; color: var(--hv-wine-deep); } .hv-esc__cuatro li:first-child { padding-left: 0; border-left: 0; } .hv-esc__cuatro span { display: block; margin-bottom: .6rem; font: 500 10.5px/1 var(--hv-sans); letter-spacing: .18em; color: var(--hv-gold-deep); } /* ---- 2 · Paralelo: una tarjeta bordó sobre el papel ---- */ .hv-esc__paralelo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); border-radius: 2px; background: radial-gradient(70% 90% at 100% 0%, rgba(122, 20, 20, .55), transparent 60%), linear-gradient(160deg, #4A0707 0%, #2A0404 60%, #1A0303 100%); box-shadow: 0 50px 80px -50px rgba(58, 5, 5, .8); color: var(--hv-cream-dim); } /* Filete interior, como el marco de un diploma */ .hv-esc__paralelo::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(203, 150, 66, .28); pointer-events: none; } .hv-esc__lado { padding: clamp(2.3rem, 4.5vw, 3.8rem) clamp(1.8rem, 4vw, 3.8rem); } .hv-esc__kicker { margin: 0 0 1.1rem; font: 500 11px/1 var(--hv-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--hv-gold); } .hv-esc__acto { margin: 0; font-family: var(--hv-serif); font-size: clamp(1.05rem, 1.2vw, 1.16rem); line-height: 1.6; color: var(--hv-cream-dim); } .hv-esc__destino { margin: .6rem 0 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; color: var(--hv-white); text-wrap: balance; } .hv-esc__destino strong { font-weight: 300; color: var(--hv-gold-light); } .hv-esc__eje { position: relative; width: 1px; margin-block: 2.2rem; background: linear-gradient(180deg, transparent, rgba(203, 150, 66, .6) 25%, rgba(203, 150, 66, .6) 75%, transparent); } .hv-esc__eje .hv-diamond { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; background: var(--hv-gold-grad); box-shadow: 0 0 0 6px #300505; transform: translate(-50%, -50%) rotate(45deg); } /* ---- 3 · Inmuebles ---- */ .hv-esc__inmuebles { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hv-esc__juego { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.4rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(203, 150, 66, .5); } .hv-esc__juego li { display: flex; align-items: flex-start; gap: 10px; padding: 1.15rem 0; border-bottom: 1px solid rgba(203, 150, 66, .3); font-family: var(--hv-serif); font-size: 1.06rem; line-height: 1.35; color: var(--ink); } .hv-esc__juego li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .5em; background: var(--hv-gold-deep); transform: rotate(45deg); } /* ---- Rótulo "En síntesis" (dentro del cierre) ---- */ .hv-esc__sintesis-k { margin: 0; font: 500 11px/1 var(--hv-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--hv-gold-deep); } /* ---- 4 · Cierre: la síntesis ---- */ .hv-esc__cierre { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; } .hv-esc__cierre::before { content: ""; width: min(420px, 70%); height: 1px; margin-bottom: .8rem; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .75), transparent); } /* La frase de la firma: remate en serif, antes de la síntesis */ .hv-esc__garantia { max-width: 40rem; margin: 0 0 .8rem; font-family: var(--hv-serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.55; color: var(--ink); } .hv-esc__pluma .hv-quill { width: 16px; height: 32px; color: var(--hv-gold-deep); } .hv-esc__epigrafe { margin: 0; font-family: var(--hv-display); font-weight: 300; max-width: 52rem; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.12; letter-spacing: -.015em; color: var(--hv-wine-deep); text-wrap: balance; } .hv-esc__epigrafe em { font-style: normal; color: var(--hv-gold-deep); } .hv-esc__firma { margin: 0; font: 500 11px/1.6 var(--hv-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); } .hv-esc__cierre .hv-btn { margin-top: .5rem; } /* ---- Responsive ---- */ @media (max-width: 959px) { .hv-esc__planteo, .hv-esc__inmuebles { grid-template-columns: minmax(0, 1fr); } .hv-esc__head { position: static; } .hv-esc__paralelo { grid-template-columns: minmax(0, 1fr); } .hv-esc__eje { width: auto; height: 1px; margin: 0 2.2rem; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .6) 25%, rgba(203, 150, 66, .6) 75%, transparent); } } @media (max-width: 600px) { .hv-esc__cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hv-esc__cuatro li:nth-child(3) { padding-left: 0; border-left: 0; } .hv-esc__cuatro li:nth-child(n+3) { border-top: 1px solid rgba(203, 150, 66, .3); } .hv-esc__juego { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hv-esc__cierre .hv-btn { width: 100%; } } /* Inmuebles: párrafo → flecha → lista simple, como las cuatro palabras (la grilla cortaba el hilo) */ .hv-esc__inmuebles { grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3.5rem); } .hv-esc__flecha { width: 64px; height: 16px; fill: none; stroke: var(--hv-gold-deep); stroke-width: 1.2; } .hv-esc__inmuebles .hv-esc__juego { display: block; border: 0; } .hv-esc__inmuebles .hv-esc__juego li { position: relative; display: block; padding: .3rem 0 .3rem 1.5rem; border: 0; font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.6; } .hv-esc__inmuebles .hv-esc__juego li::before { position: absolute; left: 0; top: 1.12em; margin: 0; } @media (max-width: 959px) { .hv-esc__inmuebles { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } /* girada 90°: la caja de 64×16 queda visualmente de 16×64 */ .hv-esc__flecha { display: none; } } /* Tarjeta del paralelo: una sola tipografía por lado, centrada (pedido de Vitali) */ .hv-esc__lado { display: flex; align-items: center; justify-content: center; text-align: center; } .hv-esc__frase { max-width: 30rem; margin: 0; font-family: var(--hv-serif); font-size: clamp(1.2rem, 1.6vw, 1.42rem); line-height: 1.6; color: var(--hv-cream); text-wrap: balance; } .hv-esc__frase strong { font-weight: 400; color: var(--hv-gold-light); } /* Las cuatro palabras como lista que sigue al párrafo (pedido de Vitali: en fila se perdía el hilo) */ .hv-esc__texto .hv-esc__cuatro { display: block; margin: -.4rem 0 0; padding: 0 0 0 .2rem; border: 0; } .hv-esc__texto .hv-esc__cuatro li { position: relative; padding: .3rem 0 .3rem 1.5rem; border: 0; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.6; color: var(--ink); } .hv-esc__texto .hv-esc__cuatro li::before { content: ""; position: absolute; left: 0; top: 1.12em; width: 9px; height: 1px; background: var(--hv-gold-deep); } /* Tildes que caen uno por uno al scrollear y se dibujan (pedido de Vitali) */ .hv-esc__texto .hv-esc__cuatro li::before, .hv-esc__inmuebles .hv-esc__juego li::before { display: none; } .hv-esc__cuatro li, .hv-esc__inmuebles .hv-esc__juego li { padding-left: 1.9rem; } .hv-tilde { position: absolute; left: 0; top: .62em; width: 15px; height: 13px; fill: none; stroke: var(--hv-gold-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .hv-js .hv-esc__cuatro li.hv-reveal, .hv-js .hv-esc__juego li.hv-reveal { transform: translateY(-10px); transition-duration: .5s; transition-delay: calc(var(--r, 0) * 160ms); } .hv-js .hv-esc__cuatro li.hv-reveal.is-in, .hv-js .hv-esc__juego li.hv-reveal.is-in { transform: none; } .hv-js .hv-tilde path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease-out; transition-delay: calc(var(--r, 0) * 160ms + 280ms); } .hv-js li.is-in .hv-tilde path { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .hv-js .hv-tilde path { stroke-dashoffset: 0; transition: none; } } /* <<< ESCRIBANIA */ /* >>> TRAYECTORIA ============================================================ Franja de obras con 7 tapas + página trayectoria.html ============================================================================ */ /* ---- Franja del home: 7 tapas ---- */ .hv-obras__estante { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(1rem, 1.9vw, 2rem); } .hv-obras__premio { display: flex; align-items: center; gap: 7px; font: 500 9.5px/1.35 var(--hv-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hv-wine); } .hv-obras__premio::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--hv-gold-deep); transform: rotate(45deg); } /* Siete tapas en fila solo entran holgadas en escritorio ancho: debajo, se deslizan */ @media (max-width: 1180px) { .hv-obras__estante { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 24%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--hv-gutter) * -1); padding: 0 var(--hv-gutter) 1rem; scroll-padding-inline: var(--hv-gutter); scrollbar-width: none; } .hv-obras__estante::-webkit-scrollbar { display: none; } .hv-obras__estante li { scroll-snap-align: start; } } @media (max-width: 859px) { .hv-obras__estante { grid-auto-columns: 44%; } } /* ---- Hero de la página ---- */ .hv-tray-hero { padding-bottom: 0; } .hv-tray-hero__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; column-gap: clamp(2rem, 5vw, 5rem); } .hv-tray-hero__texto { display: flex; flex-direction: column; gap: 1.2rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); } .hv-tray-hero__foto { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(203, 150, 66, .35); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); } .hv-tray-hero__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(.96) brightness(1.02); } .hv-tray-hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(26, 3, 3, .55) 100%), linear-gradient(90deg, rgba(98, 0, 0, .16), transparent 45%); pointer-events: none; } .hv-tray-indice { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: .6rem; } .hv-tray-indice a { padding: .55rem 0; border-bottom: 1px solid rgba(203, 150, 66, .3); font: 500 11px/1 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-cream-dim); transition: color .3s var(--hv-ease), border-color .3s var(--hv-ease); } .hv-tray-indice a:hover, .hv-tray-indice a:focus-visible { color: var(--hv-gold-light); border-color: var(--hv-gold); } /* ---- Cifras ---- */ .hv-cifras__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); } .hv-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(203, 150, 66, .28); } .hv-cifras li { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.8rem) clamp(2.2rem, 4.5vw, 3.4rem); border-left: 1px solid rgba(203, 150, 66, .16); } .hv-cifras li:first-child { padding-left: 0; border-left: 0; } .hv-cifras strong { display: block; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1; color: var(--hv-gold-light); } .hv-cifras span { display: block; max-width: 16rem; margin-top: .7rem; font: 500 11px/1.5 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hv-cream-dim); } /* ---- Secciones ---- */ .hv-tray { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; } .hv-tray::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .45) 22%, rgba(203, 150, 66, .45) 78%, transparent); } .hv-tray--oscuro { background: radial-gradient(70% 55% at 100% 0%, rgba(98, 0, 0, .42), transparent 62%), linear-gradient(180deg, #210404 0%, var(--hv-wine-black) 100%); color: var(--hv-cream-dim); } .hv-tray--papel, .hv-obras-lista { --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); --ink-faint: rgba(43, 21, 18, .55); } .hv-tray--papel { background: radial-gradient(90% 70% at 88% 0%, #FCF8EF 0%, rgba(252, 248, 239, 0) 58%), linear-gradient(178deg, var(--paper) 0%, var(--paper) 60%, var(--paper-deep) 100%); color: var(--ink-soft); } .hv-tray__inner { max-width: 1240px; margin-inline: auto; padding-inline: var(--hv-gutter); } .hv-tray__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.8rem); scroll-margin-top: calc(var(--hv-header-h-sm) + 1.5rem); } .hv-tray__h2 { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.06; letter-spacing: -.013em; color: var(--hv-white); text-wrap: balance; } .hv-tray__h2 em { font-style: normal; color: var(--hv-gold-light); } .hv-tray--papel .hv-tray__h2, .hv-obras-lista .hv-tray__h2 { color: var(--ink); } .hv-tray--papel .hv-tray__h2 em, .hv-obras-lista .hv-tray__h2 em { color: var(--hv-gold-deep); } .hv-tray__lead { max-width: 40rem; margin-top: 1.2rem; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.7; } .hv-tray__h3 { margin: clamp(3rem, 6vw, 4.5rem) 0 1.4rem; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--ink, var(--hv-white)); } .hv-tray__sub { margin-top: clamp(4.5rem, 9vw, 7rem); scroll-margin-top: calc(var(--hv-header-h-sm) + 1.5rem); } .hv-obras-lista { scroll-margin-top: var(--hv-header-h-sm); } .hv-obras-lista .hv-tray__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); } /* ---- Premios José María Moreno ---- */ .hv-moreno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.4rem); } .hv-moreno__item { display: flex; flex-direction: column; border: 1px solid rgba(179, 126, 43, .35); background: #FFFCF6; box-shadow: 0 30px 60px -40px rgba(58, 5, 5, .5); } .hv-moreno__foto { margin: 0; aspect-ratio: 11 / 8; overflow: hidden; background: #2A1A12; } .hv-moreno__foto img { width: 100%; height: 100%; object-fit: cover; } .hv-moreno__cuerpo { position: relative; padding: clamp(1.6rem, 2.8vw, 2.4rem); } .hv-moreno__cuerpo::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--hv-gold-grad); } .hv-moreno__bienio { font: 500 10.5px/1 var(--hv-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-moreno__puesto { margin: .8rem 0 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.05; color: var(--ink); } .hv-moreno__obra { margin-top: .8rem; font-family: var(--hv-serif); font-style: italic; font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft); text-wrap: balance; } .hv-moreno__meta { margin-top: 1.2rem; font: 400 13px/1.5 var(--hv-sans); color: var(--ink-faint); } .hv-moreno__meta a { font-weight: 600; color: var(--hv-wine); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(98, 0, 0, .3); transition: text-decoration-color .3s var(--hv-ease); } .hv-moreno__meta a:hover { text-decoration-color: currentColor; } /* ---- Otras distinciones ---- */ .hv-dist { border-top: 1px solid rgba(179, 126, 43, .38); } .hv-dist li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid rgba(179, 126, 43, .22); } .hv-dist__anio { font-family: var(--hv-display); font-weight: 300; font-size: 1.7rem; line-height: 1; color: var(--hv-gold-deep); } .hv-dist__tipo { font-family: var(--hv-serif); font-size: 1.14rem; font-weight: 500; color: var(--ink); } .hv-dist__evento { margin-top: .25rem; font: 500 10.5px/1.6 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .hv-dist__obra { margin-top: .5rem; font-family: var(--hv-serif); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft); } .hv-dist__foto { width: 150px; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(179, 126, 43, .35); box-shadow: 0 14px 26px -18px rgba(58, 5, 5, .6); } .hv-dist__foto img { width: 100%; height: 100%; object-fit: cover; } /* ---- Formación: línea de tiempo ---- */ .hv-linea { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 2.4vw, 2.2rem); } .hv-linea::before { content: ""; position: absolute; left: 0; right: 0; top: 3.6rem; height: 1px; background: linear-gradient(90deg, rgba(203, 150, 66, .6), rgba(203, 150, 66, .12)); } .hv-linea li { position: relative; } .hv-linea li::before { content: ""; position: absolute; top: calc(3.6rem - 4px); left: 0; width: 9px; height: 9px; background: var(--hv-gold); transform: rotate(45deg); box-shadow: 0 0 0 5px #1F0404; } .hv-linea__anio { display: block; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.2rem, 3.2vw, 2.8rem); line-height: 1; color: var(--hv-gold-light); } .hv-linea h3 { margin: 2.4rem 0 0; font-family: var(--hv-serif); font-size: 1.24rem; font-weight: 500; line-height: 1.3; color: var(--hv-white); } .hv-linea__inst { margin-top: .4rem; font: 500 10.5px/1.6 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hv-gold); } .hv-linea__det { margin-top: .8rem; font-family: var(--hv-serif); font-size: .98rem; line-height: 1.6; color: var(--hv-cream-dim); } /* ---- Listas en dos columnas (docencia, cargos, artículos, ponencias) ---- */ .hv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); } .hv-lista__h { display: flex; align-items: center; gap: 10px; margin: 0 0 1.2rem; font: 500 11px/1 var(--hv-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hv-gold-light); } .hv-lista ul { border-top: 1px solid rgba(203, 150, 66, .28); } .hv-lista li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(246, 239, 228, .08); } .hv-lista__per { padding-top: .18rem; font: 500 11px/1.5 var(--hv-sans); letter-spacing: .08em; white-space: nowrap; color: var(--hv-gold); } .hv-lista__cargo { font-family: var(--hv-serif); font-size: 1.06rem; line-height: 1.45; color: var(--hv-cream); } .hv-lista__cargo--obra { font-style: italic; } .hv-lista__lugar { margin-top: .2rem; font-family: var(--hv-serif); font-size: .95rem; line-height: 1.5; color: var(--hv-cream-faint); } .hv-tray__nota { max-width: 52rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(203, 150, 66, .2); font-family: var(--hv-serif); font-style: italic; font-size: 1.04rem; line-height: 1.65; color: var(--hv-cream-dim); } /* ---- Obras: detalle del premio y obra colectiva ---- */ .hv-obra__origen { margin-top: .7rem; font-family: var(--hv-serif); font-style: italic; font-size: .98rem; color: var(--ink-faint); } .hv-colectiva { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1.6rem; align-items: center; margin-top: clamp(2.8rem, 5.5vw, 4.6rem); padding-top: 1.8rem; border-top: 1px solid rgba(179, 126, 43, .38); } .hv-obras__premio--col::before { display: none; } .hv-colectiva__et { font: 500 10.5px/1 var(--hv-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-colectiva__tit { margin-top: .8rem; font-family: var(--hv-serif); font-size: 1.14rem; line-height: 1.5; color: var(--ink); } .hv-colectiva__tit em { font-style: italic; } .hv-colectiva__meta { margin-top: .4rem; font: 400 13px/1.5 var(--hv-sans); color: var(--ink-faint); } /* ---- Responsive ---- */ @media (max-width: 959px) { .hv-tray-hero__inner { grid-template-columns: 1fr; } .hv-tray-hero__texto { padding-bottom: 2rem; } .hv-tray-hero__foto { width: min(100%, 420px); margin-bottom: 2.5rem; } .hv-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; } .hv-linea::before, .hv-linea li::before { display: none; } .hv-linea h3 { margin-top: 1rem; } } @media (max-width: 859px) { .hv-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hv-cifras li:nth-child(3) { padding-left: 0; border-left: 0; } .hv-cifras li:nth-child(n+3) { border-top: 1px solid rgba(203, 150, 66, .16); } .hv-cols { grid-template-columns: 1fr; } } @media (max-width: 759px) { .hv-moreno { grid-template-columns: 1fr; } } @media (max-width: 680px) { .hv-dist li { grid-template-columns: 3.6rem minmax(0, 1fr); } .hv-dist__foto { grid-column: 2; width: min(100%, 220px); } } @media (max-width: 560px) { .hv-linea { grid-template-columns: 1fr; } } @media (max-width: 420px) { .hv-lista li { grid-template-columns: 1fr; gap: .3rem; } } /* NAV COMPACTO · "Trayectoria y obras" es largo: entre 860 y 1100 px el menú partía en dos renglones. Se ajusta tipografía y aire para que entre en uno. */ @media (min-width: 860px) and (max-width: 1100px) { .hv-header__inner { gap: 1rem; } .hv-logo img { height: 42px; } .hv-nav { gap: 1rem; } .hv-nav__list { gap: .85rem; } .hv-nav__list a { font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; } .hv-nav__cta { padding: 9px 13px; font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; } } /* HERO INVERTIDO · en la foto él mira hacia la derecha: con la foto a la izquierda mira hacia su nombre en vez de hacia el borde de la pantalla. Solo en escritorio; en móvil la foto sigue debajo del texto. */ @media (min-width: 960px) { .hv-tray-hero__inner { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } .hv-tray-hero__foto { grid-column: 1; grid-row: 1; } .hv-tray-hero__texto { grid-column: 2; grid-row: 1; } } /* ---- Resumen del home: Trayectoria y obras (bordó) ---- */ .hv-tyo { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4.5rem, 9vw, 8rem) 0; background: radial-gradient(70% 55% at 100% 0%, rgba(98, 0, 0, .45), transparent 62%), radial-gradient(60% 50% at 0% 100%, rgba(98, 0, 0, .22), transparent 60%), linear-gradient(180deg, #210404 0%, var(--hv-wine-black) 100%); color: var(--hv-cream-dim); } .hv-tyo::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .5) 22%, rgba(203, 150, 66, .5) 78%, transparent); } .hv-tyo__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 4.8rem); } .hv-tyo__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.8rem, 6vw, 6rem); align-items: center; } .hv-tyo__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.06; letter-spacing: -.014em; color: var(--hv-white); text-wrap: balance; } .hv-tyo__title em { font-style: normal; color: var(--hv-gold-light); } .hv-tyo__lead { max-width: 38rem; margin: 1.3rem 0 0; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.7; } .hv-tyo__lead strong { font-weight: 500; color: var(--hv-white); } /* Hitos: mismo renglón año + cargo + institución que en la página completa */ .hv-tyo__hitos { margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(203, 150, 66, .22); } .hv-tyo__hitos li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1.2rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid rgba(203, 150, 66, .16); } .hv-tyo__anio { font-family: var(--hv-display); font-weight: 300; font-size: 1.45rem; line-height: 1; color: var(--hv-gold-light); } .hv-tyo__hitos strong { display: block; font-family: var(--hv-serif); font-weight: 400; font-size: 1.08rem; line-height: 1.35; color: var(--hv-white); } .hv-tyo__donde { display: block; margin-top: .3rem; font: 500 10.5px/1.45 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hv-gold); } /* Foto del diploma, enmarcada con el filete corrido de la casa */ .hv-tyo__foto { margin: 0; } .hv-tyo__marco { position: relative; display: block; } .hv-tyo__marco::before { content: ""; position: absolute; z-index: -1; inset: -14px -14px 14px 14px; border: 1px solid rgba(203, 150, 66, .28); pointer-events: none; } .hv-tyo__marco img { display: block; width: 100%; height: auto; border: 1px solid rgba(203, 150, 66, .4); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95); transition: filter .6s var(--hv-ease); } .hv-tyo__marco:hover img, .hv-tyo__marco:focus-visible img { filter: brightness(1.07); } .hv-tyo__foto figcaption { margin-top: 1rem; font: 500 11px/1.5 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-cream-faint); } .hv-tyo__foto figcaption strong { font-weight: 500; color: var(--hv-gold-light); } .hv-tyo__cifras { border-bottom: 1px solid rgba(203, 150, 66, .28); } .hv-tyo__cifras li { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); } .hv-tyo__obras { display: flex; flex-direction: column; gap: clamp(1.8rem, 3.5vw, 2.6rem); } .hv-tyo__obras-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; } .hv-tyo__h3 { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; color: var(--hv-white); } .hv-tyo__obras-head p { margin: 0; font-family: var(--hv-serif); font-size: 1.05rem; color: var(--hv-cream-dim); } /* Las tapas vienen de la franja en papel: sobre bordó cambian los textos */ .hv-tyo .hv-obras__anio { color: var(--hv-gold); } .hv-tyo .hv-obras__premio { color: var(--hv-gold-light); } .hv-tyo .hv-obras__premio::before { background: var(--hv-gold); } .hv-tyo .hv-obras__nombre { color: var(--hv-cream); } .hv-tyo__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 2.5rem; padding-top: clamp(2rem, 4vw, 2.8rem); border-top: 1px solid rgba(203, 150, 66, .22); } .hv-tyo__pie .hv-tray-indice { margin-top: 0; } @media (max-width: 959px) { .hv-tyo__top { grid-template-columns: minmax(0, 1fr); } .hv-tyo__marco::before { inset: -10px -10px 10px 10px; } } @media (max-width: 560px) { .hv-tyo__pie { flex-direction: column; align-items: stretch; } .hv-tyo__pie .hv-btn { width: 100%; } .hv-tyo__hitos li { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .9rem; } } /* <<< TRAYECTORIA */ /* >>> SERVICIOS ============================================================== Cards del home (y "Otros servicios" en cada página) + página de servicio. ============================================================================ */ /* Texto solo para lectores de pantalla ("Leer más sobre inmuebles") */ .hv-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hv-btn--sm { padding: 13px 22px; font-size: 11.5px; } /* ---- Sección ---- */ .hv-srv { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4.5rem, 9vw, 8rem) 0; background: radial-gradient(70% 55% at 100% 0%, rgba(98, 0, 0, .45), transparent 62%), radial-gradient(60% 50% at 0% 100%, rgba(98, 0, 0, .22), transparent 60%), linear-gradient(180deg, #210404 0%, var(--hv-wine-black) 100%); color: var(--hv-cream-dim); } .hv-srv::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .5) 22%, rgba(203, 150, 66, .5) 78%, transparent); } .hv-srv__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: flex; flex-direction: column; gap: clamp(2.6rem, 5vw, 4rem); } .hv-srv__head { max-width: 48rem; } .hv-srv__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.06; letter-spacing: -.014em; color: var(--hv-white); text-wrap: balance; } .hv-srv__title--sm { font-size: clamp(1.9rem, 3vw, 2.7rem); } .hv-srv__title em { font-style: normal; color: var(--hv-gold-light); } /* La frase dorada no se parte al medio (ya pasó en el hero). En móvil se libera. */ @media (min-width: 700px) { .hv-srv__title em { white-space: nowrap; } } .hv-srv__lead { max-width: 40rem; margin-top: 1.2rem; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.7; } /* ---- Grilla ---- */ .hv-srv__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); } .hv-srv__grid > li { display: flex; } /* ---- Card ---- */ .hv-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: 100%; padding: clamp(1.8rem, 2.6vw, 2.5rem); border: 1px solid rgba(203, 150, 66, .22); border-radius: 2px; background: linear-gradient(160deg, rgba(98, 0, 0, .38) 0%, rgba(42, 5, 5, .55) 52%, rgba(22, 2, 2, .78) 100%); box-shadow: inset 0 1px 0 rgba(255, 236, 205, .06), 0 24px 50px -34px rgba(0, 0, 0, .9); transition: transform .6s var(--hv-ease), border-color .5s var(--hv-ease), box-shadow .6s var(--hv-ease); } /* Filete dorado de arriba: arranca corto y se completa al pasar */ .hv-card::before { content: ""; position: absolute; z-index: 3; inset: -1px -1px auto; height: 1px; background: var(--hv-gold-grad); transform: scaleX(.16); transform-origin: left; transition: transform .8s var(--hv-ease); } /* Resplandor en la esquina que se enciende al pasar */ .hv-card::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(70% 55% at 100% 0%, rgba(235, 191, 112, .16), transparent 70%); opacity: 0; transition: opacity .7s var(--hv-ease); pointer-events: none; } /* Toda la card es clic; el botón queda como link real para teclado y lectores */ .hv-card__cubre { position: absolute; z-index: 1; inset: 0; } .hv-card__cuerpo { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; pointer-events: none; } .hv-card__cuerpo a { pointer-events: auto; } /* Numeral romano enorme, casi invisible, en la esquina de abajo */ .hv-card__marca { position: absolute; z-index: 0; right: .08em; bottom: -.2em; font-family: var(--hv-display); font-weight: 300; font-size: clamp(8rem, 11vw, 11.5rem); line-height: 1; color: var(--hv-gold); opacity: .06; pointer-events: none; transition: transform .9s var(--hv-ease), opacity .7s var(--hv-ease); } .hv-card__top { display: flex; align-items: center; gap: .9rem; } .hv-card__num { font-family: var(--hv-display); font-weight: 300; font-size: 1.35rem; line-height: 1; color: var(--hv-gold-light); } .hv-card__raya { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(203, 150, 66, .45), rgba(203, 150, 66, .08)); } .hv-card__cant { font: 500 10px/1 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-cream-faint); } .hv-card__titulo { margin: 1.7rem 0 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.65rem, 2.2vw, 2.05rem); line-height: 1.1; letter-spacing: -.01em; color: var(--hv-white); text-wrap: balance; } .hv-card__texto { margin-top: .95rem; font-family: var(--hv-serif); font-size: 1.04rem; line-height: 1.65; color: var(--hv-cream-dim); } .hv-card__claves { margin-top: 1.2rem; font: 500 10.5px/1.7 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hv-gold); } /* Cada acto es indivisible y el punto viaja pegado al siguiente: así el renglón nunca termina en un "·" colgado */ .hv-card__clave { display: inline-block; white-space: nowrap; } .hv-card__clave + .hv-card__clave::before { content: "·"; margin: 0 .55em 0 .2em; color: rgba(203, 150, 66, .5); } .hv-card__pie { margin-top: auto; padding-top: 1.9rem; } .hv-card:hover, .hv-card:focus-within { transform: translateY(-6px); border-color: rgba(203, 150, 66, .55); box-shadow: inset 0 1px 0 rgba(255, 236, 205, .1), 0 36px 60px -32px rgba(0, 0, 0, .95), 0 0 46px -22px rgba(203, 150, 66, .45); } .hv-card:hover::before, .hv-card:focus-within::before { transform: scaleX(1); } .hv-card:hover::after, .hv-card:focus-within::after { opacity: 1; } .hv-card:hover .hv-card__marca, .hv-card:focus-within .hv-card__marca { transform: translate(-8px, -8px); opacity: .1; } /* El botón reacciona aunque el mouse esté en otra parte de la card */ .hv-card:hover .hv-btn--ghost { border-color: var(--hv-gold); background: rgba(203, 150, 66, .14); } .hv-card:hover .hv-btn::after { transform: translateX(135%); } .hv-card:hover .hv-quill { transform: rotate(-11deg) translateY(-2px); } /* ---- Cierre de la sección ---- */ .hv-srv__cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2rem; padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid rgba(203, 150, 66, .2); } .hv-srv__cierre p { max-width: 34rem; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.2; color: var(--hv-white); text-wrap: balance; } .hv-srv__cierre em { font-style: normal; color: var(--hv-gold-light); } @media (max-width: 1100px) { .hv-srv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .hv-srv__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .hv-card:hover, .hv-card:focus-within { transform: none; } } /* ============================================================================ PÁGINA DE SERVICIO · servicio-*.html ============================================================================ */ .hv-srvp { --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); --ink-faint: rgba(43, 21, 18, .55); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); background: linear-gradient(178deg, var(--paper) 0%, var(--paper) 70%, var(--paper-deep) 100%); color: var(--ink-soft); } .hv-srvp__inner { max-width: 1240px; margin-inline: auto; padding-inline: var(--hv-gutter); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 3rem; align-items: start; } .hv-srvp__intro p { font-family: var(--hv-serif); font-size: clamp(1.12rem, 1.35vw, 1.28rem); line-height: 1.75; } .hv-srvp__intro p + p { margin-top: 1.1rem; } .hv-srvp__intro p:first-child::first-letter { float: left; padding: .06em .1em 0 0; font-family: var(--hv-display); font-weight: 300; font-size: 4.1em; line-height: .8; color: var(--hv-wine); } .hv-srvp__h2 { margin: clamp(2.8rem, 5vw, 4rem) 0 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.1; color: var(--ink); } .hv-srvp__actos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin-top: 1.5rem; border-top: 1px solid rgba(179, 126, 43, .38); } .hv-srvp__actos li { position: relative; padding: 1rem 0 1rem 1.4rem; border-bottom: 1px solid rgba(179, 126, 43, .22); font-family: var(--hv-serif); font-size: 1.08rem; line-height: 1.4; color: var(--ink); } .hv-srvp__actos li::before { content: ""; position: absolute; left: 1px; top: 1.72rem; width: 9px; height: 1px; background: var(--hv-gold-deep); } .hv-srvp__nota { margin-top: 1.8rem; font-family: var(--hv-serif); font-style: italic; font-size: 1.04rem; color: var(--ink-faint); } .hv-srvp__nota a { color: var(--hv-gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .hv-srvp__nota a:hover { color: var(--hv-wine); } /* Costado sin cajas: filete arriba, lista simple y el botón. Nada de sombras ni tildes. */ .hv-srvp__aside { position: sticky; top: calc(var(--hv-header-h-sm) + 2rem); display: flex; flex-direction: column; gap: 2.2rem; padding-top: 1.4rem; border-top: 2px solid var(--hv-wine); } .hv-srvp__etiqueta { margin: 0 0 .8rem; font: 500 11px/1 var(--hv-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-srvp__antes ul { margin: 0; padding: 0; list-style: none; } .hv-srvp__antes li { padding: .8rem 0; border-bottom: 1px solid rgba(179, 126, 43, .25); font-family: var(--hv-serif); font-size: 1.06rem; line-height: 1.5; color: var(--ink); } .hv-srvp__cta p { margin: 0 0 1rem; font-family: var(--hv-display); font-weight: 300; font-size: 1.55rem; line-height: 1.2; color: var(--ink); } .hv-srvp__cta .hv-btn { width: 100%; } .hv-btn .hv-ico-wa { width: 17px; height: 17px; flex: none; } @media (max-width: 900px) { .hv-srvp__inner { grid-template-columns: 1fr; } .hv-srvp__aside { position: static; } } @media (max-width: 560px) { .hv-srvp__actos { grid-template-columns: 1fr; } } /* <<< SERVICIOS */ /* >>> CONTACTO ============================================================== Home: Preguntas frecuentes (papel) + Contacto (papel) · footer de todas las páginas Orden de fondos del home: hero bordó · escribanía papel · servicios bordó · preguntas papel · trayectoria y obras bordó · contacto papel · footer bordó ============================================================================ */ /* Botón de línea bordó: el secundario sobre papel (el dorado ahí pierde contraste) */ .hv-btn--linea { background: transparent; border: 1px solid rgba(98, 0, 0, .42); color: var(--hv-wine); } .hv-btn--linea::before { display: none; } .hv-btn--linea::after { opacity: .5; } .hv-btn--linea:hover, .hv-btn--linea:focus-visible { border-color: var(--hv-wine); background: rgba(98, 0, 0, .06); transform: translateY(-2px); } /* ---- Preguntas frecuentes ---- */ .hv-faq { --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); --ink-faint: rgba(43, 21, 18, .55); position: relative; isolation: isolate; padding: clamp(4.5rem, 9vw, 8rem) 0; background: radial-gradient(90% 70% at 88% 0%, #FCF8EF 0%, rgba(252, 248, 239, 0) 58%), linear-gradient(178deg, var(--paper) 0%, var(--paper) 60%, var(--paper-deep) 100%); color: var(--ink-soft); /* deja animar block-size hasta auto al abrir cada respuesta */ interpolate-size: allow-keywords; } .hv-faq::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .55) 22%, rgba(203, 150, 66, .55) 78%, transparent); } .hv-faq__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.8rem, 6vw, 6.5rem); align-items: start; } .hv-faq__head { position: sticky; top: calc(var(--hv-header-h-sm) + 2rem); } .hv-faq__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.15rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.012em; color: var(--hv-wine-deep); text-wrap: balance; } .hv-faq__title em { font-style: normal; color: var(--hv-gold-deep); } .hv-faq__lead { max-width: 26rem; margin: 1.3rem 0 1.6rem; font-family: var(--hv-serif); font-size: clamp(1.08rem, 1.22vw, 1.19rem); line-height: 1.65; } .hv-faq__lista { border-top: 1px solid rgba(203, 150, 66, .45); } .hv-faq__item { border-bottom: 1px solid rgba(203, 150, 66, .32); } .hv-faq__item summary { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 24px; gap: 1rem; align-items: baseline; padding: 1.45rem 0; list-style: none; cursor: pointer; } .hv-faq__item summary::-webkit-details-marker { display: none; } .hv-faq__item summary:focus-visible { outline: 1px solid var(--hv-gold-deep); outline-offset: 4px; } .hv-faq__num { font: 500 11px/1 var(--hv-sans); letter-spacing: .18em; color: var(--hv-gold-deep); } .hv-faq__q { font-family: var(--hv-serif); font-size: clamp(1.2rem, 1.55vw, 1.4rem); line-height: 1.35; color: var(--ink); transition: color .3s var(--hv-ease); } .hv-faq__item summary:hover .hv-faq__q { color: var(--hv-wine); } /* "+" en un sello redondo; abierto, el sello se entinta de bordó y queda "−" */ .hv-faq__icono { position: relative; align-self: center; width: 24px; height: 24px; border: 1px solid rgba(203, 150, 66, .6); border-radius: 50%; transition: background-color .35s var(--hv-ease), border-color .35s var(--hv-ease), transform .5s var(--hv-ease); } .hv-faq__icono::before, .hv-faq__icono::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: var(--hv-wine); transform: translate(-50%, -50%); transition: transform .5s var(--hv-ease), opacity .3s var(--hv-ease), background-color .35s var(--hv-ease); } .hv-faq__icono::after { transform: translate(-50%, -50%) rotate(90deg); } .hv-faq__item[open] .hv-faq__icono { background: var(--hv-wine); border-color: var(--hv-wine); transform: rotate(180deg); } .hv-faq__item[open] .hv-faq__icono::before { background: var(--hv-gold-light); } .hv-faq__item[open] .hv-faq__icono::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .hv-faq__a { padding: 0 calc(24px + 1rem) 1.6rem calc(2.6rem + 1rem); } .hv-faq__a p { max-width: 40rem; margin: 0; font-family: var(--hv-sans); font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.72; color: var(--ink-soft); } .hv-faq__a p + p { margin-top: .8rem; } /* Apertura suave donde el navegador lo soporta; en el resto abre en seco */ @supports selector(::details-content) { .hv-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--hv-ease), content-visibility .5s allow-discrete; } .hv-faq__item[open]::details-content { block-size: auto; } } @media (max-width: 959px) { .hv-faq__inner { grid-template-columns: minmax(0, 1fr); } .hv-faq__head { position: static; } } @media (max-width: 560px) { .hv-faq__item summary { grid-template-columns: minmax(0, 1fr) 24px; } .hv-faq__num { display: none; } .hv-faq__a { padding: 0 0 1.4rem; } .hv-faq__head .hv-btn { width: 100%; } } /* ---- Contacto: papel, después del bordó de Trayectoria y obras ---- */ .hv-contacto { --paper: #F7F1E4; --paper-deep: #EFE5D2; --ink: #2B1512; --ink-soft: rgba(43, 21, 18, .76); --ink-faint: rgba(43, 21, 18, .55); position: relative; isolation: isolate; overflow: hidden; padding: clamp(4.5rem, 9vw, 8rem) 0; background: radial-gradient(80% 70% at 8% 0%, #FCF8EF 0%, rgba(252, 248, 239, 0) 58%), linear-gradient(178deg, var(--paper) 0%, var(--paper) 60%, var(--paper-deep) 100%); color: var(--ink-soft); } .hv-contacto::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .55) 22%, rgba(203, 150, 66, .55) 78%, transparent); } /* Sello en seco, el mismo gesto que en La Escribanía */ .hv-contacto__sello { position: absolute; z-index: -1; left: clamp(-4rem, -3vw, -1.5rem); bottom: -3rem; width: clamp(220px, 26vw, 400px); opacity: .05; transform: rotate(-12deg); pointer-events: none; } .hv-contacto__sello svg { width: 100%; height: auto; aspect-ratio: 156.2 / 318.97; fill: var(--hv-wine); } .hv-contacto__inner { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.8rem, 6vw, 6.5rem); align-items: center; } .hv-contacto__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(2.15rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.012em; color: var(--hv-wine-deep); text-wrap: balance; } .hv-contacto__title em { font-style: normal; color: var(--hv-gold-deep); white-space: nowrap; } .hv-contacto__lead { max-width: 34rem; margin: 1.4rem 0 0; font-family: var(--hv-sans); font-size: clamp(1.05rem, 1.2vw, 1.15rem); line-height: 1.7; } /* ---- Datos: renglones con filete, como un encabezado de escritura ---- */ .hv-contacto__datos { margin: clamp(2rem, 4vw, 2.8rem) 0 0; border-top: 1px solid rgba(203, 150, 66, .45); } .hv-contacto__dato { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .45rem 1.5rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid rgba(203, 150, 66, .32); } .hv-contacto__dato dt { display: flex; align-items: center; gap: 10px; font: 500 11px/1.4 var(--hv-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--hv-gold-deep); } .hv-contacto__dato dd { margin: 0; font-family: var(--hv-serif); font-size: clamp(1.18rem, 1.45vw, 1.34rem); line-height: 1.35; color: var(--ink); } .hv-contacto__dato small { display: block; margin-top: .2rem; font-family: var(--hv-sans); font-size: .92rem; letter-spacing: .01em; color: var(--ink-faint); } .hv-contacto__dato a { color: inherit; text-decoration: none; background: linear-gradient(var(--hv-gold-deep), var(--hv-gold-deep)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--hv-ease), color .3s var(--hv-ease); } .hv-contacto__dato a:hover, .hv-contacto__dato a:focus-visible { color: var(--hv-wine); background-size: 100% 1px; } .hv-contacto__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(2rem, 4vw, 2.6rem); } /* .hv-btn--wine trae margin-top propio: en fila desalinearía los dos botones */ .hv-contacto__acciones .hv-btn { margin-top: 0; } /* ---- Mapa: enmarcado, con un segundo filete corrido detrás ---- */ .hv-contacto__mapa { position: relative; margin: 0; } /* Va en el marco y no en el figure: así no depende de cuántas líneas ocupe el pie */ .hv-contacto__marco::before { content: ""; position: absolute; z-index: -1; inset: -14px 14px 14px -14px; border: 1px solid rgba(203, 150, 66, .5); pointer-events: none; } .hv-contacto__marco { position: relative; aspect-ratio: 5 / 4; border: 1px solid rgba(203, 150, 66, .55); background: var(--paper-deep); box-shadow: 0 40px 70px -45px rgba(58, 5, 5, .55); } .hv-contacto__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; /* En reposo el mapa entra en la paleta; al acercarse recupera el color */ filter: grayscale(.6) sepia(.25) contrast(1.02); transition: filter .8s var(--hv-ease); } .hv-contacto__mapa:hover iframe, .hv-contacto__mapa:focus-within iframe { filter: none; } @media (hover: none) { .hv-contacto__marco iframe { filter: grayscale(.2) sepia(.1); } } .hv-contacto__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 1rem; font: 500 11px/1.4 var(--hv-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); } .hv-contacto__pie a { color: var(--hv-wine); text-decoration: none; transition: color .3s var(--hv-ease); } .hv-contacto__pie a:hover, .hv-contacto__pie a:focus-visible { color: var(--hv-gold-deep); } /* ---- Formulario de contacto ---- Va como tercera celda de .hv-contacto__inner, cruzando las dos columnas. Adentro repite la misma grilla asimétrica de la sección: el texto a la izquierda, los campos a la derecha. Los campos son renglones con filete, como los datos de arriba y como un encabezado de escritura: sin cajas, sin bordes cerrados. */ .hv-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.8rem, 6vw, 6.5rem); align-items: start; margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(203, 150, 66, .35); } .hv-form__title { margin: 0; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; color: var(--hv-wine-deep); text-wrap: balance; } .hv-form__title em { font-style: normal; color: var(--hv-gold-deep); } .hv-form__lead { max-width: 30rem; margin: 1.2rem 0 0; font-family: var(--hv-sans); font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.7; } /* ---- Campos ---- */ /* OJO: cualquier regla de author que fije `display` le gana al atributo `hidden`, que el navegador implementa con un simple display:none en su hoja de usuario. Acá el formulario se oculta con form.hidden = true al enviarse, así que si alguna de estas clases declarara un display, el formulario enviado NO se iría y quedaría arriba de la pantalla de gracias. Esta regla lo blinda. */ .hv-form [hidden] { display: none !important; } .hv-form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 2.5vw, 2rem); } .hv-campo { margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: .45rem; } .hv-campo label { font-family: var(--hv-sans); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hv-wine); } .hv-campo label span { color: var(--hv-gold-deep); } .hv-campo input, .hv-campo select, .hv-campo textarea { font: 400 1rem/1.5 var(--hv-sans); color: var(--ink); background: transparent; border: 0; /* El filete es todo el borde: lo mismo que hacen los datos de arriba y el pie del hero. Una caja cerrada rompería la página. */ border-bottom: 1px solid rgba(43, 21, 18, .28); border-radius: 0; padding: .55rem 0; transition: border-color .35s var(--hv-ease), background .35s var(--hv-ease); -webkit-appearance: none; appearance: none; } .hv-campo textarea { resize: vertical; min-height: 7.5rem; } .hv-campo input::placeholder, .hv-campo textarea::placeholder { color: rgba(43, 21, 18, .38); } .hv-campo input:hover, .hv-campo select:hover, .hv-campo textarea:hover { border-bottom-color: rgba(43, 21, 18, .5); } .hv-campo input:focus, .hv-campo select:focus, .hv-campo textarea:focus { outline: 0; border-bottom-color: var(--hv-gold); background: linear-gradient(180deg, transparent 60%, rgba(203, 150, 66, .1) 100%); } /* El foco del teclado tiene que verse igual de claro que el del mouse */ .hv-campo input:focus-visible, .hv-campo select:focus-visible, .hv-campo textarea:focus-visible { outline: 2px solid var(--hv-gold); outline-offset: 3px; } /* El campo que quedó marcado como incompleto al intentar enviar */ .hv-campo.hv-campo--mal input, .hv-campo.hv-campo--mal textarea { border-bottom-color: #A32C22; } /* La flechita del select, dibujada a mano: el nativo trae la del sistema, que en Windows es azul y se sale de la paleta. */ .hv-campo select { background-image: linear-gradient(45deg, transparent 50%, var(--hv-gold-deep) 50%), linear-gradient(135deg, var(--hv-gold-deep) 50%, transparent 50%); background-position: right 6px center, right 1px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 1.6rem; cursor: pointer; } .hv-campo select:focus { background-image: linear-gradient(45deg, transparent 50%, var(--hv-gold-deep) 50%), linear-gradient(135deg, var(--hv-gold-deep) 50%, transparent 50%), linear-gradient(180deg, transparent 60%, rgba(203, 150, 66, .1) 100%); background-position: right 6px center, right 1px center, 0 0; background-size: 6px 6px, 6px 6px, 100% 100%; } /* Autofill de Chrome: pinta el campo de amarillo y se lleva puesta la sección. El inset shadow gigante es la única forma de taparlo. */ .hv-campo input:-webkit-autofill, .hv-campo textarea:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40rem var(--paper) inset; transition: background-color 9999s; } .hv-form__nota { margin: -.9rem 0 1.6rem; font: 400 13px/1.5 var(--hv-sans); color: var(--ink-faint); } .hv-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- Pie del formulario ---- */ .hv-form__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; } .hv-form__pie .hv-btn { margin-top: 0; } .hv-form__pie .hv-btn[disabled] { opacity: .6; pointer-events: none; } .hv-form__legal { flex: 1 1 14rem; margin: 0; font: 400 12.5px/1.5 var(--hv-sans); color: var(--ink-faint); } /* ---- Aviso de error ---- */ .hv-form__aviso { display: none; margin: 1.4rem 0 0; padding: .75rem 1rem; border-left: 3px solid #A32C22; background: rgba(163, 44, 34, .07); font: 400 14px/1.55 var(--hv-sans); color: #7A2019; } .hv-form__aviso.hv-visible { display: block; } /* ---- Gracias ---- */ .hv-form__gracias { align-self: center; padding: clamp(1.5rem, 3vw, 2.5rem) 0; animation: hv-form-gracias .6s var(--hv-ease) both; } @keyframes hv-form-gracias { from { opacity: 0; transform: translateY(10px); } } .hv-form__pluma { width: 34px; height: 70px; aspect-ratio: 156.2 / 318.97; fill: var(--hv-gold-deep); margin-bottom: 1.2rem; } .hv-form__gracias h3 { margin: 0 0 .7rem; font-family: var(--hv-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; color: var(--hv-wine-deep); } .hv-form__gracias p { margin: 0; max-width: 32rem; font-family: var(--hv-sans); line-height: 1.7; } .hv-form__gracias a { color: var(--hv-wine); text-decoration: none; border-bottom: 1px solid rgba(203, 150, 66, .6); } .hv-form__gracias a:hover { color: var(--hv-gold-deep); } @media (prefers-reduced-motion: reduce) { .hv-form__gracias { animation: none; } } @media (max-width: 960px) { .hv-contacto__inner { grid-template-columns: minmax(0, 1fr); } .hv-contacto__marco { aspect-ratio: 4 / 3; } .hv-form { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .hv-contacto__title em { white-space: normal; } .hv-contacto__dato { grid-template-columns: minmax(0, 1fr); } .hv-contacto__acciones .hv-btn { flex: 1 1 100%; } .hv-contacto__marco { aspect-ratio: 1 / 1; } .hv-contacto__marco::before { inset: -10px 10px 10px -10px; } .hv-form__fila { grid-template-columns: minmax(0, 1fr); } .hv-form__pie .hv-btn { flex: 1 1 100%; } } /* ---- "Ficha de cliente": acción secundaria, al lado del CTA ---- No va en .hv-nav__list a propósito. Esa lista son las secciones que uno recorre; la ficha es algo que se hace, igual que pedir turno. Y además un sexto ítem en la lista no entra: el menú horizontal vive desde 860px y ahí ya está justo. */ .hv-nav__ficha { position: relative; flex: none; margin-left: 4px; padding-right: 18px; font-family: var(--hv-sans); font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--hv-cream-dim); transition: color .3s var(--hv-ease); } /* El filete que la separa del botón de turno */ .hv-nav__ficha::after { content: ""; position: absolute; right: 8px; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: rgba(203, 150, 66, .4); } .hv-nav__ficha:hover, .hv-nav__ficha:focus-visible { color: var(--hv-gold-light); } /* Medido: con la etiqueta entera, abajo de 1340px el menú ya no entra en un renglón y se parten "La Escribanía", "Trayectoria y obras" y el botón de turno. Así que hasta ahí se acorta a "Ficha", con un pseudo-elemento: el texto completo queda igual en el DOM para el lector de pantalla. Arriba de 1340 entra la etiqueta entera. */ @media (min-width: 860px) and (max-width: 1339px) { .hv-nav__ficha { font-size: 0; padding-right: 16px; } .hv-nav__ficha::before { content: "Ficha"; font-size: 12.5px; letter-spacing: .1em; } /* El gap del menú es clamp(1.1rem, 2.2vw, 2.2rem): crece con el ancho. Por eso a 870px entraba y a 1200px no — a 1200 cada hueco mide 26px y son cinco. Acá se afloja a 1.6vw, que a 1200 devuelve unos 35px en total: lo justo que ocupa el enlace nuevo. Arriba de 1340 el gap grande entra igual y no se toca. */ .hv-nav__list { gap: clamp(1rem, 1.6vw, 1.6rem); } } /* El botón de turno tampoco: "PEDIR / TURNO" en dos pisos deforma el alto del header y descoloca el logo. Ya estaba puesto, pero sólo dentro de una media query angosta; acá vale siempre. */ .hv-nav__cta { white-space: nowrap; } /* Que un ítem del menú nunca se parta en dos renglones. Si algún día falta lugar, que se note como apretado y no como un menú de dos pisos con el logo desalineado. El desplegable de Servicios queda afuera: ese sí necesita envolver (ver .hv-nav .hv-menu a). */ .hv-nav__list > li > a { white-space: nowrap; } /* ---- El mismo enlace, en el menú móvil ---- */ .hv-drawer__ficha { display: inline-block; margin-top: 14px; font-family: var(--hv-sans); font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--hv-cream-dim); border-bottom: 1px solid rgba(203, 150, 66, .4); padding-bottom: 3px; transition: color .3s var(--hv-ease), border-color .3s var(--hv-ease); } .hv-drawer__ficha:hover, .hv-drawer__ficha:focus-visible { color: var(--hv-gold-light); border-bottom-color: var(--hv-gold-light); } /* ---- Acceso al panel, en la base del pie ---- Deliberadamente apagado: es para el escribano, no para el visitante. Se enciende al pasar por encima para que se pueda encontrar. */ .hv-footer__acceso { color: rgba(246, 239, 228, .34) !important; background: none !important; text-decoration: none; transition: color .3s var(--hv-ease); } .hv-footer__acceso:hover, .hv-footer__acceso:focus-visible { color: var(--hv-gold-light) !important; } .hv-footer__sep { margin: 0 .45rem; opacity: .4; } /* ---- Footer ---- */ .hv-footer { position: relative; background: linear-gradient(180deg, #160202 0%, #0E0101 100%); color: var(--hv-cream-faint); font-family: var(--hv-sans); } .hv-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 150, 66, .4) 22%, rgba(203, 150, 66, .4) 78%, transparent); } .hv-footer__inner { max-width: var(--hv-max); margin-inline: auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--hv-gutter) 0; } .hv-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.6rem clamp(2rem, 4vw, 4rem); padding-bottom: clamp(2.8rem, 5vw, 4rem); } .hv-footer__logo { display: inline-block; } .hv-footer__logo img { height: 54px; width: auto; } .hv-footer__bajada { max-width: 22rem; margin: 1.4rem 0 0; font-family: var(--hv-serif); font-size: 1.08rem; line-height: 1.55; color: var(--hv-cream-dim); } .hv-footer__h { display: flex; align-items: center; gap: 10px; margin: 0 0 1.25rem; font: 500 11px/1.4 var(--hv-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--hv-gold); } .hv-footer__lista { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; font-size: .96rem; line-height: 1.5; color: var(--hv-cream-dim); } .hv-footer__lista a { color: var(--hv-cream-dim); text-decoration: none; transition: color .3s var(--hv-ease); } .hv-footer__lista a:hover, .hv-footer__lista a:focus-visible { color: var(--hv-gold-light); } .hv-footer address { font-style: normal; } .hv-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding: 1.6rem 0 calc(1.6rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(203, 150, 66, .16); font-size: 12.5px; letter-spacing: .04em; color: rgba(246, 239, 228, .45); } .hv-footer__base p { margin: 0; } .hv-footer__creditos a { color: var(--hv-gold-light); text-decoration: none; background: linear-gradient(var(--hv-gold), var(--hv-gold)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--hv-ease), color .3s var(--hv-ease); } .hv-footer__creditos a:hover, .hv-footer__creditos a:focus-visible { color: var(--hv-white); background-size: 100% 1px; } @media (max-width: 1000px) { .hv-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hv-footer__marca { grid-column: 1 / -1; } } @media (max-width: 560px) { .hv-footer__top { grid-template-columns: minmax(0, 1fr); } .hv-footer__base { flex-direction: column; } } /* El botón flotante de WhatsApp no tapa los créditos al llegar al final */ .hv-footer__base { padding-right: 84px; } @media (max-width: 560px) { .hv-footer__base { padding-right: 0; padding-bottom: calc(1.6rem + 76px + env(safe-area-inset-bottom, 0px)); } } /* ---- Menú: desplegable de Servicios (escritorio) ---- */ .hv-nav__sub { position: relative; } .hv-nav__sub > a { display: flex; align-items: center; gap: 7px; } .hv-nav__chev { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .7; transition: transform .4s var(--hv-ease), opacity .3s var(--hv-ease); } .hv-nav__sub:hover .hv-nav__chev, .hv-nav__sub:focus-within .hv-nav__chev { transform: rotate(180deg); opacity: 1; } /* padding-top hace de puente: el mouse baja del link al panel sin que se cierre */ .hv-menu { position: absolute; top: 100%; left: 50%; z-index: 5; width: 350px; padding-top: 18px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .35s var(--hv-ease), transform .45s var(--hv-ease), visibility 0s linear .45s; } .hv-nav__sub:hover .hv-menu, .hv-nav__sub:focus-within .hv-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } .hv-menu__panel { position: relative; padding: 10px; border: 1px solid rgba(203, 150, 66, .32); border-radius: 3px; background: radial-gradient(90% 60% at 100% 0%, rgba(98, 0, 0, .55), transparent 70%), linear-gradient(165deg, rgba(50, 5, 5, .97), rgba(22, 3, 3, .98)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 236, 205, .08); } /* Rombo de la marca como pico del panel */ .hv-menu__panel::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-top: 1px solid rgba(203, 150, 66, .32); border-left: 1px solid rgba(203, 150, 66, .32); background: #300505; transform: translateX(-50%) rotate(45deg); } .hv-menu__lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } /* Los links del panel no heredan la tipografía de la barra */ .hv-nav .hv-menu a { padding: 0; font-size: inherit; letter-spacing: normal; text-transform: none; white-space: normal; } .hv-nav .hv-menu a::after { display: none; } .hv-nav .hv-menu__lista a { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 14px; align-items: center; gap: .4rem; padding: 12px 14px; border-radius: 2px; color: var(--hv-cream); transition: background-color .3s var(--hv-ease), color .3s var(--hv-ease); } .hv-menu__num { font: 500 10.5px/1 var(--hv-sans); letter-spacing: .12em; color: var(--hv-gold); } .hv-menu__nombre { font-family: var(--hv-serif); font-size: 1.03rem; line-height: 1.3; } .hv-menu__flecha { width: 14px; height: 10px; fill: none; stroke: var(--hv-gold-light); stroke-width: 1.3; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--hv-ease), transform .4s var(--hv-ease); } .hv-nav .hv-menu__lista a:hover, .hv-nav .hv-menu__lista a:focus-visible { background: rgba(203, 150, 66, .1); color: var(--hv-white); } .hv-nav .hv-menu a:hover .hv-menu__flecha, .hv-nav .hv-menu a:focus-visible .hv-menu__flecha { opacity: 1; transform: none; } .hv-nav .hv-menu__lista a.is-current { background: rgba(203, 150, 66, .14); } .hv-nav .hv-menu__lista a.is-current .hv-menu__nombre { color: var(--hv-gold-light); } .hv-nav .hv-menu .hv-menu__todos { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 14px 14px 6px; border-top: 1px solid rgba(203, 150, 66, .2); font: 600 10.5px/1 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-gold-light); } .hv-nav .hv-menu .hv-menu__todos .hv-menu__flecha { opacity: .8; transform: none; } .hv-nav .hv-menu .hv-menu__todos:hover { color: var(--hv-white); } /* ---- Drawer: sublista de servicios ---- */ /* Flex + margin auto en vez de grid centrado: con la sublista el menú puede ser más alto que la pantalla, y el centrado del grid cortaba el comienzo. */ .hv-drawer { display: flex; flex-direction: column; align-items: center; overflow-y: auto; overscroll-behavior: contain; } .hv-drawer__nav { margin-block: auto; } .hv-drawer__nav .hv-drawer__sub > a { border-bottom-color: transparent; } .hv-drawer__nav .hv-drawer__servicios { gap: 0; margin: -4px 0 0; padding: 0 0 12px 2px; border-bottom: 1px solid rgba(203, 150, 66, .16); } .hv-drawer__nav .hv-drawer__servicios li { opacity: 1; transform: none; } .hv-drawer.is-open .hv-drawer__servicios li { animation: none; opacity: 1; transform: none; } .hv-drawer__nav .hv-drawer__servicios a { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 0; font: 500 12.5px/1.35 var(--hv-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hv-cream-dim); } .hv-drawer__nav .hv-drawer__servicios a::before { content: ""; flex: none; width: 4px; height: 4px; background: var(--hv-gold); transform: rotate(45deg); } .hv-drawer__nav .hv-drawer__servicios a:hover, .hv-drawer__nav .hv-drawer__servicios a:focus-visible, .hv-drawer__nav .hv-drawer__servicios a.is-current { color: var(--hv-gold-light); padding-left: 6px; } /* ---- WhatsApp flotante: disco verde, glifo blanco, filete dorado de la casa ---- */ @property --hv-wa-ang { syntax: ""; inherits: false; initial-value: 0deg; } .hv-wa { position: fixed; z-index: 80; /* debajo del drawer (90), del header (100) y del preloader (300) */ right: calc(clamp(16px, 2.2vw, 30px) + env(safe-area-inset-right, 0px)); bottom: calc(clamp(16px, 2.2vw, 30px) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; -webkit-tap-highlight-color: transparent; animation: hv-wa-in .9s var(--hv-ease) 1.2s both; } html.hv-locked .hv-wa { visibility: hidden; } @keyframes hv-wa-in { from { opacity: 0; transform: translateY(18px) scale(.9); } } .hv-wa__disco { position: relative; z-index: 1; isolation: isolate; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(90% 90% at 30% 20%, rgba(255, 255, 255, .28), transparent 52%), radial-gradient(120% 120% at 30% 20%, #6BF0A6 0%, #2EDA75 45%, #1AAE5C 100%); box-shadow: inset 0 0 0 1px rgba(235, 191, 112, .6), inset 0 -8px 16px -8px rgba(4, 80, 40, .32), 0 18px 34px -16px rgba(6, 50, 26, .8), 0 0 26px -8px rgba(37, 211, 102, .55); transition: transform .45s var(--hv-ease), box-shadow .45s var(--hv-ease); } /* Halo verde que respira, lento: se nota sin llamar la atención */ .hv-wa__disco::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%; animation: hv-wa-halo 3.8s ease-out infinite; } @keyframes hv-wa-halo { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } } /* Luz que gira por el canto: blanca que se apaga en oro */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .hv-wa__disco::after { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: 50%; pointer-events: none; background: conic-gradient(from var(--hv-wa-ang), rgba(255, 255, 255, .95) 0deg, rgba(215, 255, 230, .6) 16deg, rgba(235, 191, 112, .4) 46deg, transparent 90deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hv-wa-giro 5.5s linear infinite; } } @keyframes hv-wa-giro { to { --hv-wa-ang: 360deg; } } .hv-wa__ico { width: 31px; height: 31px; filter: drop-shadow(0 1px 2px rgba(3, 70, 32, .5)); transition: transform .45s var(--hv-ease), filter .45s var(--hv-ease); } .hv-wa:hover .hv-wa__disco, .hv-wa:focus-visible .hv-wa__disco { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(235, 191, 112, .85), inset 0 -8px 16px -8px rgba(4, 60, 30, .5), 0 24px 40px -18px rgba(6, 50, 26, .85), 0 0 44px -6px rgba(37, 211, 102, .75); } .hv-wa:hover .hv-wa__ico, .hv-wa:focus-visible .hv-wa__ico { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55)); } .hv-wa:focus-visible { outline: none; } .hv-wa:focus-visible .hv-wa__disco { outline: 1px solid #6BE8A0; outline-offset: 5px; } /* Rótulo que asoma por detrás del disco al pasar el mouse */ .hv-wa__label { display: flex; align-items: center; gap: 10px; height: 48px; margin-right: -30px; padding: 0 46px 0 20px; border: 1px solid rgba(75, 222, 138, .35); border-radius: 999px; background: rgba(8, 42, 25, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9); font: 600 11px/1 var(--hv-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--hv-cream); opacity: 0; transform: translateX(14px); clip-path: inset(0 0 0 100% round 999px); pointer-events: none; transition: clip-path .55s var(--hv-ease), opacity .35s var(--hv-ease), transform .55s var(--hv-ease); } .hv-wa__label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #4BDE8A; box-shadow: 0 0 8px 1px rgba(75, 222, 138, .8); } .hv-wa:hover .hv-wa__label, .hv-wa:focus-visible .hv-wa__label { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 999px); } @media (hover: none) { .hv-wa__label { display: none; } } @media (max-width: 560px) { .hv-wa__disco { width: 56px; height: 56px; } .hv-wa__ico { width: 29px; height: 29px; } } @media (prefers-reduced-motion: reduce) { .hv-wa, .hv-wa__disco::before, .hv-wa__disco::after { animation: none; } } /* ---- Tipografía de títulos: Freight Display Pro (kit hme2kwx), en mayúsculas ---- Elegida entre maquetas (Kepler / Garamond Premier / Freight / Cormorant). :root delante sube la especificidad: estos títulos se definen en bloques que se reinyectan después de este (SERVICIOS, TRAYECTORIA) y no deben pisarlo. */ :root { --hv-display: "freight-display-pro", "kepler-std-display", Georgia, serif; } :root .hv-hero__name { font-size: clamp(2.5rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: .06em; text-transform: uppercase; } :root :is(.hv-esc__title, .hv-srv__title, .hv-faq__title, .hv-tyo__title, .hv-contacto__title, .hv-tray__h2) { font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.22; letter-spacing: .045em; text-transform: uppercase; } :root .hv-pagina-hero__titulo { font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; } @media (max-width: 859px) { :root .hv-hero__name { font-size: clamp(2.2rem, 10.5vw, 3.2rem); } } /* ---- Pasada de sobriedad (2026-09-19) ---- El hero quedó sobrio y el resto repetía los mismos recursos en cada sección. :root delante para ganarle a los bloques que se reinyectan después. */ /* 1 · La luz que camina por el canto queda solo en "Pedir un turno" del hero; los demás botones conservan el barrido al pasar el mouse. */ :root .hv-btn::before, :root .hv-nav__cta::before { animation: none; opacity: 0; } :root .hv-hero__cta .hv-btn--ghost::before { animation: hv-beam var(--beam-dur, 6s) linear infinite; opacity: 1; } /* 2 · El filete corrido es del hero: el mapa y el diploma quedan con filete simple */ :root .hv-contacto__marco::before, :root .hv-tyo__marco::before { display: none; } /* 3 · El dorado en los títulos queda en el hero y en La Escribanía */ :root :is(.hv-srv__title, .hv-faq__title, .hv-tyo__title, .hv-contacto__title, .hv-tray__h2, .hv-pagina-hero__titulo) em, :root .hv-esc__epigrafe em { color: inherit; } /* 5 · La tarjeta del paralelo, sin filete interior: el contraste con el papel alcanza */ :root .hv-esc__paralelo::before { display: none; } /* 3b · En los títulos de las páginas de servicio el "en Paraná" usa .hv-gold-text (no em): también a un solo color. El nombre de Trayectoria queda dorado. */ :root .hv-pagina-hero:not(.hv-tray-hero) .hv-pagina-hero__titulo .hv-gold-text { background: none; color: inherit; -webkit-text-fill-color: currentColor; } /* 6 · Separadores sin adorno: nada de filetes que se desvanecen en las puntas ni rombos en el medio (el usuario: "muy IA"). Líneas rectas y parejas, o nada. */ :root .hv-esc__eje { background: rgba(203, 150, 66, .3); } :root .hv-esc__eje .hv-diamond { display: none; } :root .hv-esc__cierre::before { display: none; } /* el filete de canto de cada sección: afuera, el cambio papel/bordó ya separa */ :root :is(.hv-about, .hv-srv, .hv-obras, .hv-tray, .hv-pagina-cierre, .hv-faq, .hv-contacto, .hv-tyo, .hv-footer)::before { display: none; } /* donde se tocan dos secciones del mismo color, una línea recta simple */ :root .hv-pagina-cierre, :root .hv-footer { border-top: 1px solid rgba(203, 150, 66, .16); } :root .hv-rule { background: rgba(203, 150, 66, .3); } :root .hv-header::after { background: rgba(203, 150, 66, .22); } /* 7 · Fuera los recursos de plantilla (el usuario: "sacá todo lo que parezca IA") */ /* rombos: ni antes de los sobretítulos, ni en el pico del menú, ni en la línea de tiempo */ :root .hv-diamond, :root .hv-menu__panel::before, :root .hv-linea li::before { display: none; } :root .hv-linea::before { background: rgba(203, 150, 66, .35); } /* viñetas: una raya corta, como en el índice de un libro */ :root :is(.hv-esc__juego li, .hv-srvp__actos li, .hv-obras__premio, .hv-drawer__nav .hv-drawer__servicios a)::before { width: 9px; height: 1px; transform: none; } :root .hv-srvp__actos li::before { top: 1.72rem; } :root .hv-esc__juego li::before { margin-top: .66em; } /* cards de servicios: sin la raya del encabezado ni el número romano gigante de fondo */ :root .hv-card__raya, :root .hv-card__marca { display: none; } :root .hv-card__top { justify-content: space-between; } /* sin numeraciones decorativas (01, 02…) ni el indicador de scroll */ :root .hv-esc__cuatro span, :root .hv-faq__num, :root .hv-scroll { display: none; } :root .hv-faq__item summary { grid-template-columns: minmax(0, 1fr) 24px; } :root .hv-faq__a { padding-left: 0; } /* 8 · Servicio VII (colegas): en la grilla del home ocupa el ancho completo, sin card suelta */ #servicios .hv-srv__grid > li:nth-child(7) { grid-column: 1 / -1; } #servicios .hv-srv__grid > li:nth-child(7) .hv-card__texto { max-width: 46rem; } /* 9 · Botón de música: abajo a la izquierda, frente a WhatsApp. Discreto: una píldora translúcida con cuatro barritas que se mueven solo mientras suena. */ .hv-musica { position: fixed; z-index: 80; left: calc(clamp(16px, 2.2vw, 30px) + env(safe-area-inset-left, 0px)); bottom: calc(clamp(16px, 2.2vw, 30px) + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 15px 0 14px; border: 1px solid rgba(203, 150, 66, .35); border-radius: 999px; background: rgba(26, 3, 3, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 10.5px/1 var(--hv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hv-cream-dim); cursor: pointer; opacity: .82; transition: opacity .3s var(--hv-ease), border-color .3s var(--hv-ease), color .3s var(--hv-ease); } .hv-musica:hover, .hv-musica:focus-visible, .hv-musica[aria-pressed="true"] { opacity: 1; border-color: rgba(203, 150, 66, .7); color: var(--hv-cream); } .hv-musica:focus-visible { outline: 1px solid var(--hv-gold); outline-offset: 3px; } html.hv-locked .hv-musica { visibility: hidden; } .hv-musica__barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .hv-musica__barras i { width: 2px; height: 4px; background: var(--hv-gold-light); transform-origin: bottom; } .hv-musica__barras i:nth-child(2) { height: 8px; } .hv-musica__barras i:nth-child(3) { height: 6px; } .hv-musica__barras i:nth-child(4) { height: 10px; } .hv-musica[aria-pressed="true"] .hv-musica__barras i { animation: hv-eq 1.1s ease-in-out infinite alternate; } .hv-musica[aria-pressed="true"] .hv-musica__barras i:nth-child(2) { animation-delay: -.4s; } .hv-musica[aria-pressed="true"] .hv-musica__barras i:nth-child(3) { animation-delay: -.8s; } .hv-musica[aria-pressed="true"] .hv-musica__barras i:nth-child(4) { animation-delay: -.2s; } @keyframes hv-eq { from { height: 3px; } to { height: 12px; } } @media (prefers-reduced-motion: reduce) { .hv-musica[aria-pressed="true"] .hv-musica__barras i { animation: none; } } /* en celular, solo el ícono: la píldora no compite con el contenido */ @media (max-width: 560px) { .hv-musica { width: 40px; padding: 0; justify-content: center; } .hv-musica__txt { display: none; } } /* 10 · Scroll fluido en celular. Lo que trababa: elementos fijos con desenfoque (header, WhatsApp, música) que el celular recalcula en cada cuadro del scroll, y el halo/luz de WhatsApp animando sombras (repintado continuo). */ .hv-wa__disco::before { /* halo con transform/opacity (lo mueve la GPU) en vez de animar box-shadow */ box-shadow: 0 0 0 1px rgba(37, 211, 102, .5); animation: hv-wa-halo2 3.8s ease-out infinite; } @keyframes hv-wa-halo2 { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } } @media (max-width: 859px) { :root .hv-header[data-at-top="false"] { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(38, 5, 5, .97); } :root .hv-musica { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(26, 3, 3, .9); } :root .hv-btn--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; } /* WhatsApp más chico, sin la luz que gira ni el brillo del ícono */ :root .hv-wa__disco { width: 52px; height: 52px; } :root .hv-wa__ico { width: 27px; height: 27px; filter: none; } :root .hv-wa__disco::after { animation: none; display: none; } :root .hv-wa { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } :root .hv-musica { left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } /* Aparición al scrollear: recorrido corto y rápido, sin escalonado largo */ .hv-js .hv-reveal { transform: translateY(12px); transition-duration: .55s; transition-delay: calc(var(--r, 0) * 50ms); } .hv-waves g { animation: none; } } /* <<< CONTACTO */