/* =========================================================
   Farol Development — website. Colours and type from BRAND.md.
   «Liquid glass» like the TalkTumble app: translucent layers with
   blur, a rim of light, soft colour drifting behind. No build step.
   Every animation stops with «reduce motion».
   ========================================================= */
:root {
  --navy: #14285A; --coral: #FF8A5B; --pink: #F0476B; --green: #11845B; --sky: #5AC8FA;
  --bg: #F2F2F7; --ink: #1C1C1E; --muted: #5E5E64; --line: rgba(60, 60, 67, .14); --accent: #007AFF;
  --title: var(--navy);
  --glass: rgba(255, 255, 255, .55); --glass-strong: rgba(255, 255, 255, .78); --glass-card: rgba(255, 255, 255, .68); --glass-menu: rgba(246, 246, 250, .95);
  --rim-hi: rgba(255, 255, 255, .95); --rim-lo: rgba(255, 255, 255, .25);
  --inner: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 1px rgba(255, 255, 255, .3);
  --shadow: 0 10px 34px rgba(20, 40, 90, .10), 0 2px 6px rgba(20, 40, 90, .05);
  --blur: saturate(180%) blur(22px);
  --grad: linear-gradient(135deg, var(--coral), var(--pink));
  --display: ui-rounded, "SF Pro Rounded", Nunito, "Arial Rounded MT Bold", system-ui, sans-serif;
  color-scheme: light;
}
/* Dark: <html data-theme="dark">, set in the <head> (system theme by default; the ☀️/🌙 switch remembers a choice). */
:root[data-theme="dark"] {
    --bg: #05070D; --ink: #F2F2F7; --muted: #A1A1A8; --line: rgba(255, 255, 255, .12); --accent: #0A84FF; --title: #E6ECFF;
    --glass: rgba(40, 42, 52, .5); --glass-strong: rgba(30, 32, 40, .78); --glass-card: rgba(32, 34, 44, .72); --glass-menu: rgba(22, 24, 32, .95);
    --rim-hi: rgba(255, 255, 255, .38); --rim-lo: rgba(255, 255, 255, .05);
    --inner: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 1px rgba(255, 255, 255, .04);
    --shadow: 0 10px 34px rgba(0, 0, 0, .5);
    color-scheme: dark;
}
.only-dark { display: none; }
:root[data-theme="dark"] .only-dark { display: revert; }
:root[data-theme="dark"] .only-light { display: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); }
img { max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; border-radius: 10px; }
[data-lang="en"] .pt, [data-lang="pt"] .en { display: none !important; }

/* ---------- Glass: translucent layer + rim of light (masked gradient ring) ---------- */
.glass { position: relative; background: var(--glass-card); box-shadow: var(--inner), var(--shadow); }
/* Real blur only on the floating header (2026-10-30: blur on every card over the moving background made Safari flicker on scroll). */
.bar.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--rim-hi), var(--rim-lo) 40%, var(--rim-lo) 60%, var(--rim-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- Background: drifting colour ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; transform: translateZ(0); contain: strict; }
.aurora span { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; opacity: .28; }
.aurora span:nth-child(1) { left: -25vmax; top: -32vmax; background: radial-gradient(closest-side, var(--coral), transparent); }
.aurora span:nth-child(2) { right: -32vmax; top: 8vh; background: radial-gradient(closest-side, var(--sky), transparent); opacity: .22; }
.aurora span:nth-child(3) { left: 8vw; bottom: -48vmax; background: radial-gradient(closest-side, #AF52DE, transparent); opacity: .16; }
/* (2026-10-30, performance: the colour no longer drifts — it looked the same and cost a repaint every frame.) */
:root[data-theme="dark"] .aurora span { opacity: .18; } :root[data-theme="dark"] .aurora span:nth-child(2) { opacity: .14; }
@keyframes drift-a { to { transform: translate(12vmax, 10vmax) scale(1.1); } }
@keyframes drift-b { to { transform: translate(-14vmax, 8vmax) scale(.9); } }
@keyframes drift-c { to { transform: translate(10vmax, -10vmax) scale(1.15); } }
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); will-change: transform; }

/* ---------- Header: a floating glass capsule, the same on every page ---------- */
header { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; padding: 0 12px; }
.bar { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 10px 0 14px; border-radius: 999px; transition: background .3s ease; }
header.scrolled .bar { background: var(--glass-strong); }
.brand { min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--title); font: 800 1.08rem/1 var(--display); white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
nav { display: flex; gap: 4px; align-items: center; }
.links { display: flex; gap: 2px; }
.links a { color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: background .2s ease; }
.links a:hover, .links a[aria-current="page"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.lang { display: inline-flex; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 3px; margin-left: 6px; }
.lang button { border: 0; background: none; color: var(--ink); font: 700 .78rem/1 inherit; padding: 7px 10px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--accent); background: var(--glass-strong); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.theme-btn { width: 40px; height: 40px; margin-left: 6px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.05rem;
  background: color-mix(in srgb, var(--ink) 8%, transparent); display: inline-grid; place-items: center; }
.theme-btn .moon, :root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: inline; }
.links .lang-menu { display: none; }   /* PT/EN moves into the menu on small screens (it overlapped the name on iPhone) */
.menu-btn { display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); cursor: pointer; font-size: 1.2rem; }

/* ---------- Hero ---------- */
.hero { min-height: min(82vh, 780px); padding: 130px 0 50px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pink); padding: 7px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font: 800 clamp(2.4rem, 5.6vw, 4rem)/1.03 var(--display); letter-spacing: -.035em; color: var(--title); margin: 0 0 18px; }
.grad { background-image: linear-gradient(90deg, var(--coral), var(--pink), var(--coral)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero p.lead { font-size: 1.18rem; color: var(--muted); margin: 0 0 28px; max-width: 34em; }
.hero-art { position: relative; justify-self: center; width: min(360px, 72vw); }
.hero-art img { width: 100%; display: block; filter: drop-shadow(0 30px 50px rgba(20, 40, 90, .3)); animation: float 7s ease-in-out infinite; will-change: transform; }
.hero-art::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 45%, transparent), transparent 70%); animation: halo 5s ease-in-out infinite; will-change: transform, opacity; }
@keyframes halo { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
/* The lighthouse in the hero is inline SVG: its own light sweeps and the lamp glows (the original effect, owner's
   choice), on the GPU, and it pauses when the hero is off screen (site.js) or with reduced motion. */
.farol-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 50px rgba(20, 40, 90, .3)); animation: float 7s ease-in-out infinite; will-change: transform; }
.farol-svg .f-beam { transform-box: view-box; transform-origin: 512px 322px; animation: farol-sweep 6s ease-in-out infinite; will-change: transform, opacity; }
.farol-svg .f-b2 { animation-delay: -3s; }
.farol-svg .f-lamp { animation: farol-glow 3s ease-in-out infinite; }
@keyframes farol-sweep { 0%, 100% { opacity: .35; transform: rotate(-4deg); } 50% { opacity: 1; transform: rotate(4deg); } }
@keyframes farol-glow { 0%, 100% { fill: #FFD9A0; } 50% { fill: #FFF1C9; } }
.hero-art.paused, .hero-art.paused * { animation-play-state: paused !important; }
.hero-art.tumble img { animation: tumble 8s ease-in-out infinite; }
@keyframes tumble { 0%, 100% { transform: translateY(0) rotate(-3deg); } 25% { transform: translateY(-10px) rotate(2deg); } 50% { transform: translateY(-4px) rotate(4deg); } 75% { transform: translateY(-12px) rotate(-1deg); } }
.hero > div > * { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero > div > *:nth-child(2) { animation-delay: .08s; } .hero > div > *:nth-child(3) { animation-delay: .16s; }
.hero > div > *:nth-child(4) { animation-delay: .24s; } .hero > div > *:nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.scroll-hint { display: flex; justify-content: center; margin-top: -30px; padding-bottom: 20px; }
.scroll-hint span { width: 26px; height: 42px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); position: relative; }
.scroll-hint span::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ink); opacity: .5; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: .6; } 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- Buttons: glossy capsules with a sweep of light ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-size: 1rem; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(240, 71, 107, .34), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-primary::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); }
.btn-primary:hover::before { animation: sweep .9s ease-out; }
@keyframes sweep { from { left: -60%; } to { left: 130%; } }
.btn-glass { color: var(--ink); }
.btn-glass:hover { background: var(--glass-strong); }

/* ---------- Sections and cards ---------- */
section { padding: 56px 0; }
#sobre, #contacto, #ajuda, #funcionalidades { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.section-head { margin-bottom: 26px; }
.section-head .eyebrow { margin-bottom: 10px; }
h2 { font: 800 clamp(1.8rem, 3.6vw, 2.5rem)/1.1 var(--display); letter-spacing: -.025em; color: var(--title); margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.card { border-radius: 26px; padding: 26px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.card.glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--coral) 18%, transparent), transparent 45%); }
@media (hover: hover) { .card.glass:hover::before { opacity: 1; } }
.card:hover { transform: translateY(-4px); }
.card h3 { font: 800 1.22rem/1.2 var(--display); margin: 0 0 8px; color: var(--title); }
.card p { margin: 0; color: var(--muted); }
.icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 14px; }
.tag { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); margin-bottom: 8px; }

/* ---------- Projects: the app on real phones ---------- */
.project { overflow: visible; display: grid; grid-template-columns: 1fr 1.25fr; gap: 36px; align-items: center; padding: 34px; }
.project .title { display: flex; align-items: center; gap: 14px; font: 800 1.8rem/1 var(--display); color: var(--title); margin: 6px 0 14px; }
.project .title img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 8px 20px rgba(240, 71, 107, .3); }
.project p { margin-bottom: 20px; }
.phones { display: flex; gap: 20px; justify-content: center; align-items: flex-end; perspective: 1200px; }
.phone { width: 210px; flex: none; border-radius: 38px; padding: 7px; background: #0E0E10;
  box-shadow: 0 30px 60px rgba(20, 40, 90, .25), inset 0 0 0 1.5px #2C2C30; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
/* The screen: room for the island at the top and the home bar at the bottom, so the app's own bars (title, tab bar)
   never touch the rounded corners and the screenshot reads as a whole iPhone screen. */
.phone .screen { position: relative; overflow: hidden; border-radius: 31px; background: #F2F2F7; padding: 10% 0 7%; }
.phone .screen::before { content: ''; position: absolute; top: 2.6%; left: 50%; width: 30%; height: 3.4%; margin-left: -15%; border-radius: 999px; background: #000; z-index: 1; }
.phone .screen::after { content: ''; position: absolute; bottom: 2.2%; left: 50%; width: 34%; height: .9%; margin-left: -17%; border-radius: 999px; background: #1C1C1E; opacity: .85; }
.phone img { display: block; width: 100%; height: auto; }
.phones .phone:nth-child(1) { transform: rotateY(14deg) translateY(10px); }
.phones .phone:nth-child(2) { transform: translateY(-20px); z-index: 1; }
.phones .phone:nth-child(3) { transform: rotateY(-14deg) translateY(10px); }
.phones:hover .phone { transform: none; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gallery figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.gallery .phone { width: 100%; max-width: 230px; }
.gallery figure:hover .phone { transform: translateY(-8px) rotate(-1deg); }
.gallery figcaption { color: var(--muted); font-size: .95rem; max-width: 240px; }

/* ---------- Footer ---------- */
footer { margin: 40px 12px 16px; }
footer .inner { max-width: 1080px; margin: 0 auto; border-radius: 26px; padding: 26px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px;
  color: var(--muted); font-size: .9rem; }
footer .brand { font-size: 1rem; }
footer a { color: var(--muted); }

/* ---------- Appearing on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 100px; min-height: 0; }
  .hero-art { width: 190px; justify-self: center; grid-row: 1; margin: 10px 0 18px; }
  .scroll-hint { display: none; }
  .project { grid-template-columns: 1fr; padding: 24px; }
  .phones .phone { width: 140px; border-radius: 28px; padding: 5px; } .phones .phone .screen { border-radius: 23px; }
  .phones .phone:nth-child(3) { display: none; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; }
  .gallery figure { scroll-snap-align: center; flex: 0 0 72%; }
  .menu-btn { display: inline-grid; place-items: center; }
  .links { position: absolute; top: 70px; right: 12px; left: 12px; flex-direction: column; gap: 2px; padding: 10px; border-radius: 22px;
    background: var(--glass-menu); -webkit-backdrop-filter: saturate(160%) blur(30px); backdrop-filter: saturate(160%) blur(30px); box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
  .links a { padding: 12px 14px; font-size: 1rem; }
  nav > .lang-bar { display: none; }
  .links .lang-menu { display: inline-flex; align-self: flex-start; margin: 8px 8px 4px; }
  .links .lang-menu button { padding: 9px 14px; font-size: .9rem; }
  .bar { padding: 0 8px 0 12px; gap: 8px; }
  .brand { font-size: 1rem; }
  header.open .links { opacity: 1; transform: none; pointer-events: auto; }
}

@media (max-width: 400px) {
  .project { padding: 20px 16px; } .project > * { min-width: 0; }
  .phones { gap: 12px; } .phones .phone { width: 46%; max-width: 140px; }
  .project .title { font-size: 1.5rem; }
}
@media (max-width: 360px) { .brand { font-size: .9rem; gap: 8px; } .brand img { width: 30px; height: 30px; } .theme-btn, .menu-btn { width: 38px; height: 38px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) { :root { --glass: var(--bg); --glass-strong: var(--bg); } }