/* contigo · sito — la lingua della tavola.
 * Noche, Luna, Arena; España e Reino Unido; Fraunces per i titoli, Kalam per
 * il corsivo, il sistema per il corpo. Niente barra bianca: la testa vive
 * dentro l'hero scuro. Niente icone in scena: solo testo e gli schermi veri. */

/* ── i caratteri, self-hostati ──────────────────────────────────────────
 * Gli stessi file dell'app, in public/fuentes/. Niente Google Fonts: nessun
 * preconnect, nessuna richiesta fuori dall'origine. Inter non si scarica più:
 * il corpo del testo usa lo stack di sistema. */
@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sacramento";
  src: url("/fuentes/sacramento-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("/fuentes/kalam-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  color-scheme:dark;
  /* Una notte sola, dall'inizio alla fine: le sezioni cambiano quota
   * (superfici, fili, tinte), mai emisfero. */
  --noche:#0b0b0c; --luna:#f4f2ee; --arena:#d9cfc4; --carta:#151518;
  --filo:#26262b; --inchiostro:#f4f2ee; --fioco:#a5a5ad; --gris:#8e8e8e;
  --rojo:#e05252; --amarillo:#f6c43b; --azul:#7c96f4; --verde:#5fb570;
  --rojo-t:#261110; --azul-t:#121a30;
  /* impeccable-disable-next-line overused-font -- Fraunces e' la tavola di design scelta dall'utente */
  --titolo:"Fraunces",Georgia,serif;
  --corsivo:"Kalam","Comic Sans MS",cursive;
  --firma:"Sacramento","Snell Roundhand","Brush Script MT",cursive;
  --corpo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:20px; --tocco:cubic-bezier(.25,1,.5,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noche);color:var(--inchiostro);
  font:400 17px/1.6 var(--corpo);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}

/* Sette lingue, un testo visibile: si spengono tutte e si riaccende quella
 * scelta. `revert` invece di `inline`: cosi' un testo dentro un blocco resta
 * un blocco. */
.es,.en,.it,.hr,.uk,.de,.fr{display:none}
html[data-l="es"] .es,
html[data-l="en"] .en,
html[data-l="it"] .it,
html[data-l="hr"] .hr,
html[data-l="uk"] .uk,
html[data-l="de"] .de,
html[data-l="fr"] .fr{display:revert}

/* ── la testa vive nell'hero: nessuna barra, nessun fondo ── */
.testa{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;
  align-items:center;justify-content:space-between;
  padding:22px clamp(18px,5vw,64px);color:var(--luna)}
.marchio{display:flex;align-items:center;gap:10px;
  font:400 38px/1.1 var(--firma);color:var(--luna)}
/* Il segno accanto al nome: vetro, non un bollino. Il bordo chiaro in alto e
   l'ombra sotto sono il riflesso e il peso, e bastano a farlo sembrare una
   cosa spessa invece che un'immagine incollata. */
.marchio__segno{width:34px;height:34px;border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -1px 0 rgba(0,0,0,.45),
             0 4px 14px rgba(0,0,0,.5)}
/* ── la lingua, in alto a destra ───────────────────────────────────────────
 *
 * Sette bandiere in fila stavano addosso al marchio e lo schiacciavano. Adesso
 * se ne vede UNA, quella accesa, con due appena accennate dietro: bastano a
 * far capire che lì si cambia lingua, che è tutto quello che devono dire. Le
 * altre si aprono in un pannello opaco, che sta sopra la pagina e non sposta
 * niente. */
.lingue{position:relative}
.lingue__ora{display:flex;align-items:center;gap:6px;
  border:1px solid rgba(247,247,245,.24);border-radius:999px;
  background:transparent;padding:6px 12px 6px 10px;cursor:pointer;
  color:var(--luna);font:inherit;line-height:1}
.lingue__ora:hover{border-color:rgba(247,247,245,.5)}
.lingue__viva{font-size:19px;line-height:1}
/* L'eco: le altre lingue sbiadite e strette, che dicono «ce ne sono altre»
   senza chiedere di leggerle. */
.lingue__eco{font-size:13px;line-height:1;letter-spacing:-4px;padding-right:4px;
  filter:saturate(.25);opacity:.5}
.lingue__lista{position:absolute;top:calc(100% + 10px);right:0;z-index:20;
  display:grid;gap:2px;min-width:190px;padding:6px;
  border:1px solid rgba(247,247,245,.18);border-radius:16px;
  background:#141414;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.lingue__lista[hidden]{display:none}
.lingua{display:flex;align-items:center;gap:10px;width:100%;
  border:0;border-radius:11px;background:transparent;
  color:rgba(247,247,245,.72);font:inherit;font-size:15px;line-height:1.2;
  padding:9px 12px;text-align:left;cursor:pointer}
.lingua span{font-size:17px;filter:saturate(.75)}
.lingua:hover{background:rgba(247,247,245,.08);color:var(--luna)}
.lingua[aria-current="true"]{background:rgba(247,247,245,.14);color:var(--luna)}
.lingua[aria-current="true"] span{filter:none}
.lingua[aria-current="true"]{background:rgba(247,247,245,.14);color:var(--luna)}
@media (prefers-reduced-motion:reduce){.lingua{transition:none}}

/* ── hero: solo testo, e uno schermo vero ── */
.hero{position:relative;background:var(--noche);color:var(--luna)}
.hero__dentro{max-width:1240px;margin:0 auto;
  padding:clamp(96px,14vw,150px) clamp(18px,5vw,64px) 0;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,340px);
  gap:clamp(28px,5vw,72px);align-items:end}
.hero__testo{display:flex;flex-direction:column;gap:24px;padding-bottom:clamp(48px,7vw,88px)}
.hero h1{font:400 clamp(40px,6.4vw,66px)/1.05 var(--titolo);letter-spacing:-.015em;margin:0}
.hero__mano{font:400 clamp(20px,2.6vw,26px) var(--corsivo);color:var(--arena);margin:0}
.hero__lede{max-width:46ch;margin:0;font-size:clamp(16px,1.9vw,18px);color:#b9b9b9}
.hero__azioni{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.cta{display:inline-block;padding:16px 32px;border-radius:999px;background:var(--amarillo);
  color:#241a00;font-weight:700;font-size:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s var(--tocco)}
.cta:active{transform:scale(.96)}
.cta-testo{color:var(--gris);text-decoration:underline;text-underline-offset:4px}
.hero__tel{align-self:end}
.hero__tel img{display:block;width:100%;height:auto;border-radius:28px 28px 0 0;
  border:6px solid #1f1f22;border-bottom:0}
@media(max-width:760px){
  .hero__dentro{grid-template-columns:1fr}
  .hero__tel{max-width:300px;margin:0 auto;width:100%}
}

/* ── i blocchi ── */
.blocco{padding:clamp(56px,8vw,96px) clamp(18px,5vw,64px);max-width:1240px;margin:0 auto}
.blocco h2{font:400 clamp(30px,4.2vw,42px)/1.3 var(--titolo);letter-spacing:-.01em;margin:0 0 16px}
.spiega{max-width:56ch;color:var(--fioco);font-size:16.5px}

/* ── i telefoni con le annotazioni a mano ── */
.fila-telefoni{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);
  gap:36px;overflow-x:auto;padding:30px 16px 16px;scroll-padding-inline:16px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.tel{margin:0;scroll-snap-align:center}
.tel img{display:block;width:100%;height:auto;border-radius:30px;border:6px solid #1f1f22}
.tel figcaption{margin-top:12px;font:400 17px/1.4 var(--corsivo);color:var(--fioco)}
.tel--ella figcaption{color:var(--azul)}
.tel--el figcaption{color:var(--rojo)}

/* ── i tre passi ── */
.blocco--chiaro{background:transparent;max-width:none;border-block:1px solid var(--filo)}
.blocco--chiaro h2,.blocco--chiaro .passi{max-width:1112px;margin-inline:auto}
.blocco--chiaro h2{margin-bottom:24px}
.passi{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.passo{background:var(--carta);border:1px solid var(--filo);border-radius:var(--r);padding:26px}
.passo__n{font:400 34px var(--titolo);color:var(--gris)}
.passo h3{font:400 22px var(--titolo);margin:10px 0 8px}
.passo p{margin:0;color:var(--fioco);font-size:15px;line-height:1.55}

/* ── la matrice delle lingue ── */
.idiomas__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.curso{border:1px solid var(--filo);border-radius:var(--r);padding:18px 20px;background:var(--carta)}
.curso--prep{opacity:.64;border-style:dashed}
.curso__cima{display:flex;align-items:center;justify-content:space-between;gap:10px}
.curso__idioma{font:400 19px var(--titolo);color:var(--inchiostro)}
.curso__estado{flex:none;font:600 10.5px var(--corpo);text-transform:uppercase;
  letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.curso--listo .curso__estado{background:#0f2417;color:var(--verde)}
.curso--prep .curso__estado{background:#221f14;color:var(--amarillo)}
.curso__nome{margin:9px 0 0;color:var(--fioco);font-size:14px;line-height:1.4}
.curso__cifra{margin:8px 0 0;color:var(--gris);font-size:12.5px}
.curso__falta{margin:8px 0 0;color:var(--gris);font-size:12.5px;font-style:italic}

/* ── il video di lancio ── */
.video{margin:28px 0 0;max-width:1000px}
.video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--carta);
  border:1px solid var(--filo);border-radius:var(--r)}
.idiomas__grid--uno{grid-template-columns:minmax(210px,320px);margin:24px 0 20px}

/* ── la chiusura sulla notte ── */
.blocco--scuro{background:transparent;color:var(--inchiostro);max-width:none;text-align:center;border-top:1px solid var(--filo)}
.blocco--scuro .spiega{margin-inline:auto}

.precio{margin-top:18px;font-size:14px;color:var(--gris)}
.cta--grande{margin-top:26px;font-size:18px;padding:18px 42px}
.piede{margin:48px 0 0;font:400 19px var(--corsivo);color:var(--arena)}
.pie{margin:14px 0 0;font:400 13px var(--corpo);color:var(--gris)}
.pie a{color:var(--gris);text-decoration:underline;text-underline-offset:3px;margin-left:.6em}
.pie a:hover{color:var(--luna)}
.pie--prueba{margin-top:18px}
.pie--prueba a{margin-left:0}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Su schermo stretto le sette bandiere e il marchio arrivavano a toccarsi.
   Sta in fondo apposta: messo piu' su, la regola `.lingua` che viene dopo
   rimetteva il corpo a 17px e la media query non si vedeva. */
@media (max-width:420px){
  .lingue__lista{min-width:170px}
}

/* ── il vetro, dove si tocca ───────────────────────────────────────────────
 *
 * Liquid glass non è un fondo semitrasparente: è un materiale che rifrange
 * quello che ha dietro e riflette la luce che ha davanti. Tre cose insieme,
 * e senza una delle tre torna a sembrare plastica:
 *
 *   la RIFRAZIONE   `backdrop-filter` con blur E saturate: il vetro piega la
 *                   luce e ne alza il colore, non la sbiadisce soltanto.
 *   il RIFLESSO     un filo chiaro sul bordo alto e uno scuro sul bordo basso:
 *                   è il bordo dello spessore preso dalla luce.
 *   la LUCE PROPRIA una striscia diagonale, appena visibile, che scorre sul
 *                   corpo. È quella che dice «questo oggetto ha un volume».
 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lingue__ora,
  .lingue__lista{
    -webkit-backdrop-filter:blur(22px) saturate(1.7);
    backdrop-filter:blur(22px) saturate(1.7);
  }
  .lingue__ora{background:rgba(247,247,245,.06)}
  .lingue__lista{background:rgba(20,20,20,.62)}
}

.lingue__ora,
.lingue__lista{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.35);
}

/* Il bottone principale è giallo pieno: lì il vetro sarebbe una perdita di
   contrasto. Gli si dà lo spessore, non la trasparenza: un riflesso in alto,
   un'ombra propria sotto, e una lucentezza che passa sopra al tocco. */
.cta{position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -2px 0 rgba(0,0,0,.10),
             0 10px 26px rgba(0,0,0,.35)}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.55) 47%,
    rgba(255,255,255,0) 60%);
  transform:translateX(-120%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.cta:hover::after,
.cta:focus-visible::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){
  .cta::after{transition:none;display:none}
}

/* ── la seconda fila di telefoni (l'app per iPhone) ── */
#pantallas h3.sub{font:400 clamp(24px,3vw,30px)/1.3 var(--titolo);margin:56px 0 10px}