:root{
  --deep:#0a1730;
  --deep-2:#111b35;
  --night:#070d1a;
  --sea:#11959a;
  --turquoise:#36b5b0;
  --sun:#f0a51f;
  --orange:#e4672d;
  --red:#c93d35;
  --magenta:#c14578;
  --violet:#56358f;
  --warm:#10182b;
  --soft:#17223a;
  --card:#17243c;
  --card-2:#1b2944;
  --ink:#f2eee6;
  --muted:#c3c8d2;
  --line:#33415e;
  --shadow:0 22px 60px rgba(0,0,0,.34)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--warm);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;background-image:radial-gradient(circle at 10% 2%,rgba(193,69,120,.10),transparent 28rem),radial-gradient(circle at 88% 20%,rgba(17,149,154,.08),transparent 26rem)}
body.dark{--warm:#080f1e;--soft:#0e182a;--card:#111d32;--card-2:#15233a;--ink:#faf5eb;--line:#283854;background-color:var(--warm)}
a{color:inherit}
button,input,select,textarea{font:inherit}
::selection{background:var(--sun);color:var(--night)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--sun);color:var(--night);padding:.6rem;z-index:9}

.site-header{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:14px 5%;background:rgba(7,13,26,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(240,165,31,.24);box-shadow:0 8px 30px rgba(0,0,0,.18)}
.dark .site-header{background:rgba(5,10,20,.96)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:14px;color:#fff;letter-spacing:.01em}
.brand img{width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(240,165,31,.18))}
.brand small{display:block;font-size:9px;letter-spacing:.15em;font-weight:650;color:var(--turquoise)}
nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:750}
nav a{text-decoration:none;padding:6px 3px;color:#e8e9ec}
nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:5px}
.language-links{display:flex;gap:5px;border-left:1px solid var(--line);padding-left:10px}
.language-links a{font-size:11px}
.zip{background:var(--sun);color:var(--night)!important;padding:8px 10px!important;border-radius:7px;box-shadow:0 5px 16px rgba(240,165,31,.16)}
.site-header nav button,.menu{border:1px solid #52607a;background:#111b30;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}
.site-header nav button:hover,.menu:hover{border-color:var(--sun)}
.menu{display:none}

.hero{min-height:660px;padding:90px 8%;display:grid;grid-template-columns:1.05fr .95fr;gap:7%;align-items:center;background:linear-gradient(125deg,#0b1324 0%,#15192f 45%,#102b35 100%);position:relative;overflow:hidden;border-bottom:1px solid rgba(240,165,31,.15)}
.hero::before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:var(--magenta);opacity:.08;right:-130px;top:-170px;filter:blur(8px)}
.hero::after{content:"";position:absolute;width:300px;height:300px;background:var(--orange);opacity:.05;left:-120px;bottom:-130px;transform:rotate(28deg)}
.dark .hero{background:linear-gradient(125deg,#060c18,#10152a 48%,#0b202b)}
.hero>div{position:relative;z-index:1}
.eyebrow{color:var(--sun);font-weight:900;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.hero h1,.page-hero h1,.language-gateway h1{font-size:clamp(3.2rem,7vw,7rem);line-height:.96;letter-spacing:-.065em;max-width:850px;margin:22px 0;color:#fff;text-wrap:balance}
h1,h2,h3{color:#fff}
.lead{font-size:1.2rem;max-width:700px;color:#f0ede6}
.hero p:not(.eyebrow):not(.lead){color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.button{display:inline-block;border:1px solid transparent;border-radius:8px;padding:13px 18px;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;text-decoration:none;font-weight:900;cursor:pointer;box-shadow:0 10px 28px rgba(201,61,53,.20);transition:.2s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,61,53,.28)}
.button.secondary{background:transparent;color:#fff;border-color:#66718a;box-shadow:none}
.button.secondary:hover{border-color:var(--sun);background:rgba(240,165,31,.07)}

.coast{height:500px;border-radius:22px 64px 24px 78px;position:relative;overflow:hidden;background:#0b1628;box-shadow:18px 18px 0 var(--sun),var(--shadow);border:1px solid rgba(255,255,255,.08);transform:rotate(.4deg)}
.coast::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,23,48,.05),rgba(10,23,48,.22) 55%,rgba(9,13,25,.72));pointer-events:none}
.coast img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.06) brightness(.78)}
.coast p{position:absolute;z-index:1;bottom:5%;left:8%;right:8%;background:rgba(8,15,30,.78);border-left:4px solid var(--sun);color:#fff;padding:8px 12px;font-weight:800;font-size:12px;backdrop-filter:blur(8px)}

.intro,.content,.origin,section:not(.hero):not(.page-hero){padding:85px 8%;max-width:1300px;margin:auto}
.intro,.content{position:relative}
h2{font-size:clamp(2.2rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.05em;margin:12px 0 36px;color:#fff;text-wrap:balance}
.grid,.tool-grid,.price-grid,.article-grid{display:grid;gap:18px}
.three{grid-template-columns:repeat(3,1fr)}
.grid article,.tool,.price-grid article,.article-grid article{background:linear-gradient(155deg,var(--card),var(--card-2));border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 12px 35px rgba(0,0,0,.14);position:relative;overflow:hidden}
.grid article::before,.tool::before,.price-grid article::before,.article-grid article::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--sun),var(--orange),var(--magenta),var(--sea))}
.grid article:hover,.tool:hover,.price-grid article:hover,.article-grid article:hover{border-color:#536482;transform:translateY(-2px);transition:.2s ease}
.grid article b,.article-grid span{color:var(--sun)}
.grid article h3,.tool h2,.price-grid h3,.article-grid h3{font-size:1.35rem;color:#fff}
.grid article p,.tool p,.price-grid p,.article-grid p{color:var(--muted)}
.grid article a{font-weight:900;color:var(--turquoise)}
.origin{max-width:none!important;background:linear-gradient(115deg,#21122f,#3a172f 45%,#182744);color:#fff;border-top:1px solid rgba(240,165,31,.15);border-bottom:1px solid rgba(17,149,154,.22)}
.origin h2{color:#fff}

.page-hero{padding:100px 8%;background:linear-gradient(125deg,#0b1324 0%,#23152f 55%,#122c36 100%);border-bottom:1px solid rgba(240,165,31,.18);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--sea);opacity:.06;right:-80px;top:-120px}
.dark .page-hero{background:linear-gradient(125deg,#060c18,#1a1025 58%,#0a2028)}
.page-hero h1{color:#fff;max-width:1000px;position:relative;z-index:1}
.page-hero .lead,.page-hero .eyebrow{position:relative;z-index:1}
.content{max-width:1250px}
.content h2{font-size:clamp(2rem,4vw,3.6rem)}
.section-lead{font-size:1.2rem;max-width:800px;color:var(--muted)}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{border-top:1px solid var(--line);padding:14px 0;font-weight:700;color:#e8e7e2}
.check-list li::before{content:'✓';color:var(--sun);font-weight:900;margin-right:10px}
.tool-grid{grid-template-columns:repeat(3,1fr)}
.tool h2{font-size:1.4rem;margin-bottom:8px}
.tool label{display:block;margin:10px 0;color:#e5e7eb}
.tool select{max-width:100%;padding:7px;border:1px solid var(--line);border-radius:6px;background:#0b1426;color:#fff}
.tool strong{display:block;margin-top:15px;color:var(--sun)}
.password{display:flex;gap:8px;align-items:center;margin-top:18px}
.password output{overflow-wrap:anywhere;border:1px dashed #65728d;padding:8px;flex:1;background:#0c1628;color:#fff}
.price-grid{grid-template-columns:repeat(3,1fr)}
.price-grid strong{font-size:2.3rem;color:var(--sun)}
.article-grid{grid-template-columns:repeat(2,1fr)}
.article-grid article{min-height:180px}
.article-grid h3{margin-top:8px}
.faq{max-width:850px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:900;cursor:pointer;color:#fff}
.faq p{margin-bottom:0;color:var(--muted)}

form{max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
form input,form select,form textarea{width:100%;border:1px solid #3c4b67;border-radius:8px;padding:13px;background:#0d1729;color:#fff;outline:none}
form input:focus,form select:focus,form textarea:focus{border-color:var(--sun);box-shadow:0 0 0 3px rgba(240,165,31,.10)}
form textarea{grid-column:1/-1;min-height:140px}
form label{grid-column:1/-1}
form .button{justify-self:start}
.notice{grid-column:1/-1;font-size:13px;color:#f6b94f}

.language-gateway{min-height:75vh;padding:120px 8%;background:linear-gradient(125deg,#0b1324,#26172f 52%,#102b35)}
.language-cards{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.language-cards a{display:flex;flex-direction:column;gap:4px;min-width:130px;padding:24px;background:linear-gradient(155deg,var(--card),var(--card-2));border:1px solid var(--line);border-radius:14px;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.language-cards a:hover{border-color:var(--sun);transform:translateY(-3px)}
.language-cards b{font-size:1.7rem;color:var(--sun)}
.language-cards span{color:var(--muted)}

footer{background:#060c18;color:#fff;padding:35px 8%;display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center;border-top:1px solid rgba(240,165,31,.18)}
footer .brand{color:#fff}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer-links a{font-size:12px;text-decoration:none;color:#c9cdd7;border-bottom:1px solid #40516d;padding-bottom:2px}
.footer-links a:hover{color:#fff;border-color:var(--sun)}
footer p{color:#9ca5b6}

/* Fauvist Catalan accents: saturated warm/cool contrasts, kept subordinate to readability */
main{background:linear-gradient(180deg,rgba(86,53,143,.025),transparent 22%,rgba(17,149,154,.018) 70%,transparent)}

/* 2026-08-21: force permanent dark Catalan/Fauvist theme on every page */
html, body {
  background-color:#070d1a !important;
  color:#f2eee6 !important;
  min-height:100%;
}
body {
  --warm:#080f1e;
  --soft:#0e182a;
  --card:#111d32;
  --card-2:#15233a;
  --ink:#faf5eb;
  --muted:#c3c8d2;
  --line:#283854;
  background-image:radial-gradient(circle at 10% 2%,rgba(193,69,120,.12),transparent 28rem),radial-gradient(circle at 88% 20%,rgba(17,149,154,.10),transparent 26rem) !important;
}
main, .intro, .content, section:not(.hero):not(.page-hero):not(.origin) {
  background-color:transparent !important;
  color:var(--ink) !important;
}