/* ============================================================ THE GARNISH BAR — estilos base ============================================================ */ /* ---- Fuentes ---- Beaufort (serif display) y Weather Sunday (script) son fuentes demo de uso personal (archivos fuente: assets/fonts/, convertidos a woff2 en /fonts/). ANTES DE PRODUCCIÓN: confirmar licencia de uso comercial con los diseñadores/foundries correspondientes. Manrope se importa directo desde Google Fonts (ver en el de cada página) — no requiere @font-face propio. Sistema tipográfico (sin excepciones): - Beaufort → h1/h2/h3, nav, botones, cualquier UI que no sea texto corrido. - Weather Sunday → acento inline sobre palabras/frases sueltas dentro de un título o bloque de texto. Nunca una capa de contenido aparte. - Manrope → texto corrido: párrafos, descripciones, precios. ------------------------------------------------------------- */ @font-face { font-family: 'Beaufort'; src: url('/fonts/Beaufort.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Beaufort'; src: url('/fonts/Beaufort-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Beaufort'; src: url('/fonts/Beaufort-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Weather Sunday'; src: url('/fonts/WeatherSunday.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---- Variables de marca ---- */ :root { --color-bg: #202616; --color-bg-alt: #0a0a0a; --color-text: #dbdbdb; --color-accent: #bd9c55; --color-border: rgba(189, 156, 85, 0.35); --font-display: 'Beaufort', Georgia, 'Times New Roman', serif; --font-script: 'Weather Sunday', 'Brush Script MT', cursive; --font-text: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container-max: 1320px; --gutter: 1.5rem; --section-pad-y: 5rem; } @media (min-width: 900px) { :root { --gutter: 3rem; --section-pad-y: 8rem; } } /* ---- Reset básico ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { position: relative; margin: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-text); font-weight: 500; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---- Grano sobre el fondo ---- Dos capas independientes detrás del contenido: color base (#202616) -> textura 1015 -> grano fino -> contenido. ::before = assets/textures/1015-tile.jpg (recorte de la textura provista), viene en negativo (fondo blanco con rayones grises) -> filter:invert(1) + mix-blend-mode:screen para que el negro no aporte nada y solo el rayado sume brillo. Opacity muy baja (0.05) -- antes estaba en 0.12 y se notaba el patrón, tiene que ser casi imperceptible. ::after = assets/textures/fine-grain.png, ruido fino generado (no un patrón reconocible), sin invert porque ya nace oscuro con motas claras. Ambas position:absolute (no fixed) + body en position:relative -> cubren toda la altura del documento y scrollean normal con la página. z-index:-1 en las dos para que pinten por encima del color base de body pero por detrás de todo el contenido real, sin importar el orden en el DOM. */ body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("/assets/textures/1015-tile.jpg"); background-repeat: repeat; background-size: 800px 800px; filter: invert(1); mix-blend-mode: screen; opacity: 0.05; } body::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("/assets/textures/fine-grain.png"); background-repeat: repeat; background-size: 120px 120px; mix-blend-mode: screen; opacity: 0.06; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } /* Beaufort: todos los encabezados y elementos de UI que no son texto corrido */ h1, h2, h3, .nav__menu a, .btn, .site-footer__links a, .site-footer__social a { font-family: var(--font-display); } /* Los títulos pesan más que el resto de la UI en Beaufort */ h1, h2, h3 { font-weight: 700; } /* Profundidad sutil solo en títulos (h1/h2, no h3/párrafos/botones/nav) -- un solo punto central en vez de repetirlo por selector. Sin offset: es un resplandor difuso centrado detrás del texto, no una sombra proyectada -- por eso el blur es grande y la opacidad se banca ser bastante más marcada que un text-shadow "normal". El acento en Weather Sunday necesita un poco más de blur y opacidad (trazo más fino y color dorado sobre fondo oscuro) para leerse igual de "levantado" que el texto claro de al lado. */ h1, h2 { text-shadow: 0 0 40px rgba(0, 0, 0, 0.72); } h1 .accent-script, h2 .accent-script { text-shadow: 0 0 45px rgba(0, 0, 0, 0.78); } /* Excepción: títulos que caen directo sobre un fondo --color-bg-alt (#0a0a0a, casi negro) -- una sombra negra ahí es indistinguible del propio fondo, así que para estos casos puntuales se tiñe la sombra con el dorado de marca (rgb de --color-accent) en vez de negro, para que el aura de profundidad siga siendo perceptible. */ .pillars .section-title, .carta-hero__title, .contact-block__subtitle { text-shadow: 0 0 40px rgba(189, 156, 85, 0.48); } .pillars .section-title .accent-script, .carta-hero__title .accent-script { text-shadow: 0 0 45px rgba(189, 156, 85, 0.54); } /* Weather Sunday: acento inline sobre palabras sueltas dentro de un título/bloque */ .accent-script { font-family: var(--font-script); color: var(--color-accent); font-size: 1.35em; font-weight: 400; line-height: 1; display: inline-block; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } /* ---- Botones ---- */ .btn { display: inline-block; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.9em 2em; border: 1px solid var(--color-accent); transition: background-color 0.25s ease, color 0.25s ease; } .btn--accent { background: var(--color-accent); color: var(--color-bg); } .btn--accent:hover { background: transparent; color: var(--color-accent); } .btn--outline { background: transparent; color: var(--color-text); margin-top: 2.5rem; } .btn--outline:hover { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } /* ============================================================ NAV ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; transition: background-color 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav__logo { display: flex; align-items: center; } .nav__logo img { height: 48px; width: auto; display: block; } .nav__menu { display: none; align-items: center; gap: 2.25rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } .nav__menu a { opacity: 0.9; } .nav__menu a:hover { opacity: 1; color: var(--color-accent); } .nav__menu a[aria-current="page"] { opacity: 1; color: var(--color-accent); } .nav__cta { border: 1px solid var(--color-accent); padding: 0.6em 1.4em; color: var(--color-accent) !important; } .nav__cta:hover { background: var(--color-accent); color: var(--color-bg) !important; } .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; } .nav__toggle span { display: block; height: 1px; background: var(--color-text); width: 100%; } @media (min-width: 900px) { .nav__toggle { display: none; } .nav__menu { display: flex; } } /* mobile menu overlay */ @media (max-width: 899px) { .nav__menu { position: fixed; inset: 0; top: 76px; background: var(--color-bg); flex-direction: column; justify-content: center; gap: 2rem; font-size: 1.1rem; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .nav__menu.is-open { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; } .nav__cta { align-self: flex-start; } } /* ============================================================ 1. HERO ============================================================ */ .hero { position: relative; height: 100vh; min-height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero__carousel { position: absolute; inset: 0; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--color-bg); opacity: 0; animation: heroCrossfade 30s infinite; } .hero__bg:nth-child(1) { animation-delay: 0s; } .hero__bg:nth-child(2) { animation-delay: 6s; } .hero__bg:nth-child(3) { animation-delay: 12s; } .hero__bg:nth-child(4) { animation-delay: 18s; } .hero__bg:nth-child(5) { animation-delay: 24s; } @keyframes heroCrossfade { 0%, 100% { opacity: 0; } 5% { opacity: 1; } 15% { opacity: 1; } 20% { opacity: 0; } } .hero__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.86); } .hero__content { position: relative; z-index: 1; } .hero__logo { width: 280px; max-width: 70vw; height: auto; } @media (min-width: 900px) { .hero__logo { width: 380px; max-width: 40vw; } } .hero__scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 1; width: 1px; height: 48px; } .hero__scroll span { display: block; width: 1px; height: 100%; background: var(--color-accent); animation: scrollLine 2s ease-in-out infinite; transform-origin: top; } @keyframes scrollLine { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ============================================================ 2. INTRO ============================================================ */ .intro { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); } .intro__inner { max-width: 720px; text-align: center; margin: 0 auto; } .intro__title { font-size: 2rem; letter-spacing: 0.02em; margin-bottom: 1.5rem; } .intro__title .accent-script { font-size: 1.8225em; margin-top: -3.68rem; transform: translateX(-0.25em); } .intro__text { font-size: 0.85rem; opacity: 0.9; margin-bottom: 2.5rem; } @media (min-width: 900px) { .intro__title { font-size: 2.75rem; } .intro__title .accent-script { margin-top: -5.06rem; } .intro__text { font-size: 0.95rem; } } /* ============================================================ 3a. PILLARS ============================================================ */ .pillars { position: relative; overflow: hidden; padding-top: calc((var(--section-pad-y) + 60px) * 0.55); padding-bottom: calc((var(--section-pad-y) + 60px) * 0.55); background: var(--color-bg-alt); } /* Mismo esquema de grano que body::before/::after, mismo asset y misma opacidad -- solo cambia el color base debajo (--color-bg-alt en vez de --color-bg), así que necesita su propia copia local en vez de heredar la del body (esta sección pinta por encima del grano global). */ .pillars::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/1015-tile.jpg"); background-repeat: repeat; background-size: 800px 800px; filter: invert(1); mix-blend-mode: screen; opacity: 0.05; } .pillars::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/fine-grain.png"); background-repeat: repeat; background-size: 120px 120px; mix-blend-mode: screen; opacity: 0.06; } .pillars > .container { position: relative; z-index: 1; } .pillars__intro { text-align: center; max-width: 620px; margin: 0 auto 3rem; } .pillars__grid { display: grid; grid-template-columns: 1fr; gap: 28px; } .pillar { position: relative; background: var(--color-bg-alt); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .pillar__media { height: 320px; background-size: cover; background-position: center; background-color: rgba(219, 219, 219, 0.05); } .pillar__body { position: relative; padding: 2rem; flex: 1; background: color-mix(in srgb, var(--color-bg-alt) 90%, white 10%); } .pillar__body::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/1015-tile.jpg"); background-repeat: repeat; background-size: 800px 800px; filter: invert(1); mix-blend-mode: screen; opacity: 0.14; } .pillar__title { position: relative; z-index: 1; font-size: 1.55rem; margin-bottom: 0.75rem; } .pillar__text { position: relative; z-index: 1; font-size: 0.85rem; opacity: 0.85; } @media (min-width: 900px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } .pillar__text { font-size: 0.95rem; } } /* ============================================================ 3b. HIGHLIGHTS ============================================================ */ .highlights { padding-top: calc(var(--section-pad-y) - 15px); padding-bottom: var(--section-pad-y); text-align: center; } .section-title { font-size: 2.1rem; line-height: 0.93; } .section-title .accent-script { font-size: 1.8em; margin-left: 0.075em; } .highlights__grid { display: grid; grid-template-columns: 1fr; gap: 28px; text-align: left; margin-top: 4rem; } @media (max-width: 899px) { .highlights__grid { margin-top: 3rem; } } .highlight { position: relative; background: var(--color-bg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .highlight__media { height: 260px; background-size: cover; background-position: center; background-color: rgba(219, 219, 219, 0.05); } .highlight__body { position: relative; padding: 1.75rem; /* Verde botella dentro de la misma familia que --color-bg (#202616, H~82° S~27% L~12%): mismo hue, con saturación y luminosidad subidas con moderación (S~34% L~16%, bajadas ~12% desde el primer intento #313f1c) para que se note como card sin volverse un verde llamativo ni un gris desaturado. */ background: #2b361a; } .highlight__body::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/1015-tile.jpg"); background-repeat: repeat; background-size: 800px 800px; filter: invert(1); mix-blend-mode: screen; opacity: 0.14; } .highlight__title { position: relative; z-index: 1; font-size: 1.45rem; margin-bottom: 0.6rem; } .highlight__text { position: relative; z-index: 1; font-size: 0.85rem; opacity: 0.85; } @media (min-width: 900px) { .highlights__grid { grid-template-columns: repeat(2, 1fr); } .highlight--large { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; } .highlight--large .highlight__media { height: 100%; } .highlight--large .highlight__body { display: flex; flex-direction: column; justify-content: center; padding: 3rem; } .highlight__title { font-size: 1.5rem; } .highlight__text { font-size: 0.95rem; } .section-title { font-size: 2.75rem; } .highlights .section-title { white-space: nowrap; } .highlights .section-title br { display: none; } } /* ============================================================ 3c. AGENDA TEASER ============================================================ */ .agenda { position: relative; padding: var(--section-pad-y) 0; text-align: center; overflow: hidden; background: var(--color-bg-alt); } /* Mismo esquema de grano que .pillars::before/::after: mismos assets, misma opacidad, copia local porque el color base debajo es --color-bg-alt en vez de --color-bg. */ .agenda::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/1015-tile.jpg"); background-repeat: repeat; background-size: 800px 800px; filter: invert(1); mix-blend-mode: screen; opacity: 0.05; } .agenda::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/fine-grain.png"); background-repeat: repeat; background-size: 120px 120px; mix-blend-mode: screen; opacity: 0.06; } .agenda__inner { position: relative; z-index: 1; margin: 0 auto; } .agenda__title { font-size: 2.2rem; line-height: 0.28125; margin-bottom: 1.25rem; } .agenda__title .accent-script { font-size: 1.8em; } .agenda__text { font-size: 0.85rem; opacity: 0.9; margin-bottom: 0; max-width: 620px; margin-left: auto; margin-right: auto; } @media (min-width: 900px) { .agenda__title { font-size: 2.75rem; white-space: nowrap; } .agenda__title br { display: none; } .agenda__text { font-size: 0.95rem; } } /* ============================================================ 4. CTA FINAL ============================================================ */ .cta-final { padding: 7rem 0; text-align: center; } .cta-final__title { font-size: 2.1rem; line-height: 0.28125; margin-bottom: 0.75rem; } .cta-final__title .accent-script { font-size: 1.8em; position: relative; } .cta-final__title .accent-dot { position: absolute; left: 100%; } .cta-final__text { font-size: 0.85rem; opacity: 0.9; margin-bottom: 2rem; } @media (min-width: 900px) { .cta-final__title { font-size: 2.75rem; } .cta-final__text { font-size: 0.95rem; } } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--color-border); padding: 3.5rem 0 1.5rem; font-size: 0.9rem; } .site-footer__inner { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; } .site-footer__logo { height: 44px; width: auto; display: block; margin-bottom: 0.75rem; } .site-footer__links { display: flex; flex-direction: column; gap: 0.5rem; } .site-footer__links a:hover, .site-footer__social a:hover { color: var(--color-accent); } .site-footer__bottom { border-top: 1px solid var(--color-border); padding-top: 1.25rem; opacity: 0.6; font-size: 0.8rem; } @media (min-width: 900px) { .site-footer__inner { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ Reveal-on-scroll (JS toggles .is-visible) ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ Botón flotante de WhatsApp (fijo, todas las páginas) ============================================================ */ .whatsapp-float { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .whatsapp-float:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); } .whatsapp-float svg { width: 28px; height: 28px; fill: #ffffff; } @media (min-width: 900px) { .whatsapp-float { right: 32px; bottom: 32px; } } /* ============================================================ Botón de audio ambiente (fijo, esquina inferior izquierda, todas las páginas -- el WhatsApp ya ocupa la derecha) ============================================================ */ .ambient-audio { position: fixed; left: 20px; bottom: 20px; z-index: 999; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(189, 156, 85, 0.35); background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.25s ease; } .ambient-audio:hover, .ambient-audio:focus-visible { border-color: rgba(189, 156, 85, 0.6); } /* El glow pulsante vive en un ::after ya con el box-shadow fijo -- solo se anima su opacity (nunca el box-shadow en sí), para que el "pulso" sea liviano: un compositor-only fade, no un recálculo de sombra en cada frame. */ .ambient-audio::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 10px 2px rgba(189, 156, 85, 0.45); opacity: 0; pointer-events: none; } .ambient-audio.is-playing::after { animation: ambient-audio-glow 2.4s ease-in-out infinite; } @keyframes ambient-audio-glow { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.55; } } .ambient-audio__icon { width: 18px; height: 18px; overflow: visible; } .ambient-audio__bar { fill: var(--color-accent); transform-box: fill-box; transform-origin: center; transition: transform 0.4s ease; } .ambient-audio__tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font-family: var(--font-text); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--color-text); background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: 0.35em 0.75em; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .ambient-audio:hover .ambient-audio__tooltip, .ambient-audio:focus-visible .ambient-audio__tooltip { opacity: 1; transform: translate(-50%, 0); } @media (min-width: 900px) { .ambient-audio { left: 32px; bottom: 32px; } } /* ---- Ondas de fondo reactivas al audio ambiente ---- z-index:1 (no 0): .hero, .pillars y .agenda son position:relative sin z-index propio, así que sin este empujón quedan en el mismo nivel de apilamiento que este canvas y lo tapan (su fondo opaco gana por venir después en el DOM). Con z-index:1 el canvas -- que al ser position:fixed arma su propio stacking context igual -- pasa a un nivel por encima de CUALQUIER sección sin z-index explícito, sin importar el orden en el documento. Sigue muy por debajo del header (100) y los botones flotantes (999), y por delante de la textura de grano de body::before/ ::after (z-index:-1). Nunca intercepta clicks/scroll. */ .ambient-waves { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; will-change: transform; } @media (prefers-reduced-motion: reduce) { .ambient-waves { display: none; } } /* ---- Marco art deco (línea + esquina, ensamblado en partes) ---- Usa ÚNICAMENTE los dos assets del proyecto: assets/images/art-line.svg (línea doble fina) y assets/images/art-ornament.svg (ornamento de esquina). Las 4 esquinas y los 4 lados son elementos reales (no variantes de archivo): la rotación de la línea vertical y de las 3 esquinas restantes se hace con transform: rotate() en tiempo de render sobre el mismo SVG, nunca con una copia rotada del archivo. Los lados quedan acortados (inset = tamaño de esquina) para que la línea termine ANTES del ornamento en vez de cruzarlo, y el ornamento tiene z-index mayor para quedar siempre por encima. El marco se aplica a la TARJETA COMPLETA (.pillar / .highlight, que ya tienen position:relative más arriba) -- foto + título + descripción son un solo recuadro de punta a punta, no un marco separado solo en la foto. Tarjetas contiguas quedan con gap:0 y cada una dibuja sus propios 4 lados: al no haber separación entre cajas, el borde compartido de dos tarjetas vecinas cae exactamente en el mismo píxel (mismo asset, mismo grosor) y se ve como una única línea, no duplicada. */ .pf-corner { position: absolute; width: 34px; height: 34px; background-image: url("/assets/images/art-ornament.svg"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; z-index: 2; } .pf-corner--tl { top: 0; left: 0; } .pf-corner--tr { top: 0; right: 0; transform: rotate(90deg); } .pf-corner--br { bottom: 0; right: 0; transform: rotate(180deg); } .pf-corner--bl { bottom: 0; left: 0; transform: rotate(270deg); } .pf-edge { position: absolute; pointer-events: none; z-index: 1; } .pf-edge--top, .pf-edge--bottom { left: 34px; right: 34px; height: 4px; background-image: url("/assets/images/art-line.svg"); background-repeat: repeat-x; background-size: 150px 4px; } .pf-edge--top { top: 0; } .pf-edge--bottom { bottom: 0; } .pf-edge--left, .pf-edge--right { top: 34px; bottom: 34px; width: 4px; overflow: hidden; } .pf-edge--left { left: 0; } .pf-edge--right { right: 0; } .pf-edge--left::before, .pf-edge--right::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2000px; height: 4px; transform: translate(-50%, -50%) rotate(90deg); background-image: url("/assets/images/art-line.svg"); background-repeat: repeat-x; background-size: 150px 4px; } /* ---- Marco art deco: estado inicial "sin dibujar" ---- js/main.js (GSAP + ScrollTrigger) recorta cada .pf-edge con clip-path desde el estado 100% oculto hasta 0% (revelado) para simular el trazo de un lado por vez, en sentido tl→tr→br→bl→tl. Cada .pf-corner arranca invisible y se hace visible recién cuando el trazo llega a esa esquina. Este estado inicial también es el que el timeline restaura (progress 0) al salir la card de pantalla, para que vuelva a dibujarse limpia. */ .pf-corner { opacity: 0; } .pf-edge--top { clip-path: inset(0 100% 0 0); } .pf-edge--right { clip-path: inset(0 0 100% 0); } .pf-edge--bottom { clip-path: inset(0 0 0 100%); } .pf-edge--left { clip-path: inset(100% 0 0 0); } /* ============================================================ SEPARADORES: línea dorada que se dibuja al scroll (index.html) Vive ENTRE secciones (no dentro), mismo ancho que .container. El trazo (.section-divider__path) arranca oculto vía stroke-dashoffset calculado en js/main.js (path.getTotalLength()) y GSAP ScrollTrigger lo revela en scrub al entrar en viewport. El glow (.section-divider__glow) es un círculo con blur SVG que main.js reposiciona por transform sobre la cabeza del trazo -- nunca se anima width/height/top/left, solo stroke-dashoffset (la técnica del propio trazo) y transform/opacity (el glow). Si prefers-reduced-motion, la media query de abajo fuerza el trazo completo y oculta el glow sin esperar a que corra el JS. ============================================================ */ .section-divider { padding: 2.5rem 0; pointer-events: none; } .section-divider__svg { display: block; width: 100%; height: auto; overflow: visible; } .section-divider__path { fill: none; stroke: var(--color-accent); stroke-width: 2; will-change: stroke-dashoffset; } .section-divider__glow { fill: var(--color-accent); opacity: 0; will-change: transform, opacity; } @media (min-width: 900px) { .section-divider { padding: 3.5rem 0; } } @media (prefers-reduced-motion: reduce) { .section-divider__path { stroke-dashoffset: 0 !important; } .section-divider__glow { display: none; } } /* ============================================================ PÁGINA: CARTA (carta.html) Sección única full-width. Fondo: mismo verde con grano que el resto del sitio (--color-bg + textura, heredado de body::before/ ::after, sin overlay ni foto propia). El marco art deco (.pf-edge/.pf-corner) envuelve un recuadro en --color-bg-alt con su propia copia local de la textura 1015 (mismo criterio que .pillars::before, pero con más opacidad para que se lea como superficie propia) + drop shadow para que flote sobre el fondo. ============================================================ */ .carta-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--section-pad-y) var(--gutter); } .carta-hero__frame { position: relative; z-index: 1; max-width: 620px; width: 100%; margin: 0 auto; padding: 3rem 2rem; text-align: center; background: var(--color-bg-alt); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .carta-hero__frame::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/1015-tile.jpg"); background-repeat: repeat; background-size: 800px 800px; filter: invert(1); mix-blend-mode: screen; opacity: 0.14; } .carta-hero__title { position: relative; z-index: 1; font-size: 2.2rem; line-height: 0.93; margin-bottom: 1.25rem; } .carta-hero__text { position: relative; z-index: 1; font-size: 0.85rem; opacity: 0.9; margin-bottom: 2rem; } .carta-hero__frame .btn { position: relative; z-index: 1; } @media (min-width: 900px) { .carta-hero__title { font-size: 2.75rem; } .carta-hero__text { font-size: 0.95rem; } .carta-hero__frame { padding: 4rem; } } /* ============================================================ PÁGINA: CONTACTO (contacto.html) 3 bloques full-width apilados, verde/negro/verde. Los bloques verdes no tienen background propio (heredan --color-bg + grano de body::before/::after, igual que .intro/.cta-final). El bloque negro reutiliza --color-bg-alt + la misma copia local de textura que .pillars (mismos assets, misma opacidad). ============================================================ */ .eyebrow { display: block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.75rem; } .contact-block { padding: var(--section-pad-y) 0; text-align: center; } /* Bloque 1 queda pegado al header fijo con solo --section-pad-y -- ajuste puntual de este bloque, no de la variable global. */ #consultas { padding-top: calc(var(--section-pad-y) + 25.6px); } .contact-block__inner { max-width: 620px; margin: 0 auto; } .contact-block__inner--wide { max-width: 720px; } .contact-block__title { font-size: 2.2rem; line-height: 0.93; margin-bottom: 1.25rem; } .contact-block__subtitle { font-size: 1.55rem; line-height: 1.2; margin-bottom: 1.25rem; } .contact-block__text { font-size: 0.85rem; opacity: 0.9; margin-bottom: 2rem; } .contact-block__hours { font-size: 0.85rem; opacity: 0.9; margin-bottom: 2rem; } .contact-block__map { border: 1px solid var(--color-border); overflow: hidden; margin-bottom: 2rem; } .contact-block__map iframe { display: block; width: 100%; height: 320px; border: 0; } .contact-block--alt { position: relative; overflow: hidden; background: var(--color-bg-alt); } .contact-block--alt::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/1015-tile.jpg"); background-repeat: repeat; background-size: 800px 800px; filter: invert(1); mix-blend-mode: screen; opacity: 0.05; } .contact-block--alt::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/assets/textures/fine-grain.png"); background-repeat: repeat; background-size: 120px 120px; mix-blend-mode: screen; opacity: 0.06; } .contact-block--alt > .contact-block__inner { position: relative; z-index: 1; } .btn--icon { display: inline-flex; align-items: center; gap: 0.6em; } .btn--icon svg { width: 1.1em; height: 1.1em; fill: currentColor; flex-shrink: 0; } @media (min-width: 900px) { .contact-block__title { font-size: 2.75rem; } .contact-block__subtitle { font-size: 1.75rem; } .contact-block__text { font-size: 0.95rem; } .contact-block__hours { font-size: 0.95rem; } .contact-block__map iframe { height: 400px; } } /* ============================================================ HOME (index.html) -- mobile: unificar font-size de todos los h2 de sección (highlights, pilares, eventos, reservas) al valor que se dejó para el título de 3 pilares (10% menos que el 2.1rem original). Va al final del archivo a propósito: .agenda__title y .cta-final__title tienen su font-size base más abajo en el documento que .section-title, así que esta regla necesita quedar después de las tres para ganarles en la cascada (misma especificidad, gana quien está más abajo). Desktop no se toca -- cada una mantiene su propio override en su media query de 900px. No incluye .intro__title (h1 del hero): queda intocable. ============================================================ */ @media (max-width: 899px) { .section-title, .agenda__title, .cta-final__title { font-size: 1.89rem; } }