/* Mapa de apellidos del mundo - grafica moderna, con i colori di sempre.
   La pagina parla la lingua della mappa: carta bianca, contorni neri, grigio dei distretti,
   rosso dei cerchi. Il rosso si usa solo per azioni e dati.
   Carattere: Archivo (font/, licenza OFL), con assi di peso e larghezza.
   Le pagine usano layout.inc.php; app2.php usa ancora style.css. */

@font-face{font-family:"Archivo"; src:url(/font/archivo-latin-wdth-normal.woff2) format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;}
@font-face{font-family:"Archivo"; src:url(/font/archivo-latin-wght-italic.woff2) format("woff2"); font-weight:100 900; font-style:italic; font-display:swap;}

:root{
  --carta:#ffffff;      /* fondo, come la mappa */
  --inchiostro:#000000; /* testo e contorni */
  --grafite:#666666;    /* il grigio dei confini dei distretti: testo secondario */
  --rosso:#cc0000;      /* il rosso dei cerchi: link, pulsanti, dati */
  --rosso-2:#a30000;    /* pulsanti al passaggio del mouse */
  --nebbia:#f2f2f2;     /* superfici e passaggio del mouse */
  --linea:#d9d9d9;      /* righe sottili */
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:5.5rem;}
body{margin:0; background:var(--carta); color:var(--inchiostro); font-family:var(--font); font-size:1.0625rem; line-height:1.55; -webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:var(--rosso); text-underline-offset:.2em; text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--inchiostro); outline-offset:2px; border-radius:2px;}
::selection{background:var(--rosso); color:#fff;}
.wrap{width:100%; max-width:1160px; margin:0 auto; padding:0 20px;}
.vai-contenuto{position:absolute; left:12px; top:-60px; z-index:100; background:var(--inchiostro); color:#fff; padding:.6em 1em;}
.vai-contenuto:focus{top:12px;}
.nascosto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- testata ---------- */
.top{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:2px solid var(--inchiostro);}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:6px 28px; min-height:64px;}
.marchio{display:inline-flex; align-items:center; gap:10px; margin-right:auto; padding:10px 0; color:var(--inchiostro); text-decoration:none; font-weight:750; font-stretch:112%; font-size:1.2rem; letter-spacing:-.01em; line-height:1.1;}
.marchio:hover{text-decoration:none;}
/* il marchio: tre cerchi della legenda della mappa, dal piu' piccolo al piu' grande */
.marchio svg{width:38px; height:27px; flex:none; overflow:visible;}
.marchio circle{fill:rgba(204,0,0,.16); stroke:var(--rosso); stroke-width:1.6;}
.nav{display:flex; gap:4px 22px; overflow-x:auto; scrollbar-width:none; max-width:100%;}
.nav::-webkit-scrollbar{display:none;}
.nav a{color:var(--inchiostro); text-decoration:none; white-space:nowrap; padding:10px 0; font-size:.98rem; font-weight:500;}
.nav a:hover{color:var(--rosso);}
.nav a[aria-current]{color:var(--rosso); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.4em;}
/* lingue: la lingua attiva come le etichette della mappa (bianco su nero) */
.lingue{display:flex; gap:2px;}
.lingue a{display:inline-block; min-width:2.1em; padding:.2em .35em; text-align:center; color:var(--inchiostro); text-decoration:none; font-size:.82rem; font-weight:650; letter-spacing:.03em; line-height:1.4;}
.lingue a:hover{color:var(--rosso);}
.lingue a[aria-current]{background:var(--inchiostro); color:#fff;}
/* telefoni: le lingue in un menu a tendina, per non occupare una riga */
.lingue-mob{display:none; position:relative;}
.lingue-mob summary{display:flex; align-items:center; gap:5px; padding:.2em .45em; background:var(--inchiostro); color:#fff; font-size:.8rem; font-weight:650; letter-spacing:.03em; cursor:pointer; list-style:none;}
.lingue-mob summary::-webkit-details-marker{display:none;}
.lingue-mob summary::after{content:""; border:4px solid transparent; border-top-color:currentColor; margin-top:4px;}
.lingue-mob[open] summary::after{border-top-color:transparent; border-bottom-color:currentColor; margin:0 0 4px;}
.lingue-mob ul{position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:10.5em; margin:0; padding:4px 0; list-style:none; background:var(--carta); border:2px solid var(--inchiostro);}
.lingue-mob a{display:block; padding:.5em .9em; color:var(--inchiostro); text-decoration:none; font-weight:500;}
.lingue-mob a:hover{background:var(--nebbia);}
.lingue-mob a[aria-current]{color:var(--rosso); font-weight:700;}

/* ---------- ricerca ---------- */
.cerca{display:flex; width:100%; max-width:520px; border:2px solid var(--inchiostro); border-radius:4px; background:var(--carta);}
.cerca:focus-within{box-shadow:0 0 0 4px rgba(204,0,0,.22);}
.cerca input[type=text]{flex:1; min-width:0; border:0; border-radius:2px 0 0 2px; background:transparent; color:var(--inchiostro); font:inherit; font-size:1.15rem; font-weight:500; padding:.62em .85em; outline:0; text-transform:uppercase; letter-spacing:.02em;}
.cerca input[type=text]::placeholder{color:var(--grafite); text-transform:none; letter-spacing:0; font-weight:400;}
.cerca button{flex:none; border:0; border-left:2px solid var(--inchiostro); border-radius:0 1px 1px 0; background:var(--rosso); color:#fff; font:inherit; font-weight:700; font-size:1.02rem; padding:0 1.4em; cursor:pointer;}
.cerca button:hover{background:var(--rosso-2);}
.cerca button:focus-visible{outline-offset:-5px; outline-color:#fff;}

.prova{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:1.25rem 0 0; font-size:.95rem;}
.prova span{color:var(--grafite); margin-right:4px;}
.prova a{display:inline-block; padding:.22em .7em; border:1px solid var(--linea); border-radius:4px; color:var(--inchiostro); text-decoration:none; font-weight:600;}
.prova a:hover{border-color:var(--inchiostro); color:var(--rosso);}

/* ---------- home ---------- */
.apertura{padding:clamp(36px,6vw,80px) 0 clamp(36px,5vw,64px);}
.apertura .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center;}
@media (min-width:960px){ .apertura .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px;} }
.titolo{margin:0 0 .45em; font-weight:800; font-stretch:112%; font-size:clamp(2rem,4vw,3.5rem); line-height:1.02; letter-spacing:-.015em; text-wrap:balance; overflow-wrap:break-word; hyphens:auto;}
.sottotitolo{margin:0 0 1.6rem; max-width:44ch; font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.55; color:#333;}

.vetrina{margin:0; width:min(100%,600px); justify-self:center;}
.vetrina[style*="--r"]{width:min(100%, 600px, calc((100vh - 150px) * var(--r)));}   /* mappe alte (Irlanda, Paesi Bassi, Regno Unito): tutta nello schermo */
@media (min-width:960px){ .vetrina{justify-self:end;} }
.tavola{position:relative; border:1px solid var(--inchiostro); background:var(--carta);}
.tavola img{display:block; width:100%; height:auto;}
.vetrina figcaption{margin:.55rem 0 0; font-size:.85rem; color:var(--grafite);}
/* l'unico movimento della pagina: i cerchi compaiono uno dopo l'altro, una volta sola */
.punti i{position:absolute; left:var(--x); top:var(--y); width:var(--s); aspect-ratio:1; border-radius:50%; background:rgba(204,0,0,.2); border:1.5px solid var(--rosso); transform:translate(-50%,-50%); animation:punto .55s cubic-bezier(.2,.9,.3,1.25) both; animation-delay:calc(var(--i) * 40ms + 250ms);}
@keyframes punto{from{opacity:0; transform:translate(-50%,-50%) scale(.2);} to{opacity:1; transform:translate(-50%,-50%) scale(1);}}
@media (prefers-reduced-motion:reduce){ .punti i{animation:none;} }

.percorsi{padding:0 0 clamp(40px,6vw,72px);}
.percorsi ul{display:grid; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; border-top:2px solid var(--inchiostro);}
@media (min-width:760px){ .percorsi ul{grid-template-columns:repeat(3,minmax(0,1fr));} .percorsi li + li{border-left:1px solid var(--linea);} }
.percorsi li{border-bottom:1px solid var(--linea);}
@media (min-width:760px){ .percorsi li{border-bottom:0;} }
.percorsi a{display:block; height:100%; padding:20px 24px 22px 0; color:inherit; text-decoration:none;}
@media (min-width:760px){ .percorsi li + li a{padding-left:24px;} }
.percorsi strong{display:block; margin-bottom:.35em; font-weight:750; font-stretch:110%; font-size:1.3rem; line-height:1.2;}
.percorsi a:hover strong{color:var(--rosso);}
.percorsi span{display:block; max-width:40ch; color:var(--grafite); font-size:.98rem;}

/* ---------- pagina della mappa ---------- */
.intesta{padding:clamp(24px,4vw,44px) 0 10px;}
.intesta .wrap{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 48px;}
.intesta .cerca{width:auto; min-width:0; flex:1 1 340px; max-width:460px;}
.h1{margin:0; font-weight:400; max-width:100%; min-width:0;}
.h1-pre{display:block; margin-bottom:.15em; font-size:clamp(1rem,1.6vw,1.2rem); font-weight:500; color:var(--grafite);}
/* il cognome e' composto come un toponimo sulla carta: largo e nero.
   --n = numero di lettere: i cognomi lunghi rimpiccioliscono quanto basta per stare su una riga */
.h1-nome{display:block; font-weight:800; font-stretch:125%; font-size:clamp(1.4rem,calc(min(1120px,100vw - 40px) / (var(--n,8) * 1.02)),5.4rem); line-height:1.02; letter-spacing:.01em; text-transform:uppercase; overflow-wrap:anywhere;}

.risultato{padding:18px 0 44px;}
.risultato .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start;}
@media (min-width:960px){ .risultato .wrap{grid-template-columns:minmax(0,620px) minmax(0,1fr); gap:56px;} .lato{position:sticky; top:96px;} }
.scheda{margin:0;}
.mappa-box{position:relative; border:1px solid var(--inchiostro); background:var(--carta); overflow:hidden;}
.mappa{position:absolute; top:0; left:0; width:100%; height:auto;}
.spaziatore{display:block; width:100%; max-width:100%;}
.lato h2{margin:0 0 .5em; font-weight:750; font-stretch:110%; font-size:1.45rem; line-height:1.2;}
.lato p{margin:0 0 1em; max-width:46ch;}
.lato .nota{padding-top:14px; border-top:1px solid var(--linea); font-size:.95rem; color:var(--grafite);}
.lato .prova{margin-top:0;}

/* condivisione */
.condividi{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.condividi a,.condividi button{display:inline-flex; background:transparent; font-family:inherit; cursor:pointer; align-items:center; gap:8px; padding:.5em .95em; border:1px solid var(--inchiostro); border-radius:4px; color:var(--inchiostro); text-decoration:none; font-weight:600; font-size:.95rem; line-height:1.3;}
.condividi a:hover,.condividi button:hover{background:var(--inchiostro); color:#fff;}
.condividi button:disabled{opacity:.55; cursor:progress;}
.condividi-msg{flex-basis:100%; margin:4px 0 0; font-size:.92rem; color:var(--grafite);}
.condividi-msg:empty{display:none;}
.condividi svg{width:17px; height:17px; fill:currentColor; flex:none;}
.condividi-pagina{padding:0 0 clamp(32px,5vw,52px);}
.condividi-pagina .condividi{margin-top:0;}

/* testo sul cognome (1de/, 2de/) */
.approfondimento{padding:28px 0 52px; border-top:1px solid var(--linea);}
.testo{max-width:68ch; font-size:1.1rem; line-height:1.7;}
.testo h2{margin:0 0 .6em; font-size:1rem; font-weight:600; color:var(--grafite);}
.testo h3{margin:1.8em 0 .5em; font-weight:750; font-stretch:110%; font-size:1.45rem; line-height:1.25;}
.testo p{margin:0 0 1em;}

/* ---------- pagine di testo ---------- */
.pagina{padding:clamp(28px,5vw,56px) 0 clamp(36px,5vw,60px);}
.prosa{max-width:72ch; font-size:1.08rem; line-height:1.7; overflow-wrap:break-word;}
.prosa::after{content:""; display:block; clear:both;}
.prosa h1{margin:0 0 .6em; font-weight:800; font-stretch:112%; font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.08; letter-spacing:-.01em; text-wrap:balance;}
.prosa h2{margin:1.9em 0 .5em; font-weight:750; font-stretch:108%; font-size:clamp(1.3rem,2.4vw,1.6rem); line-height:1.25;}
.prosa h3{margin:1.5em 0 .4em; font-weight:700; font-size:1.15rem; line-height:1.3;}
.prosa p{margin:0 0 1em;}
.prosa ul,.prosa ol{margin:.6em 0 1.4em; padding-left:1.3em;}
.prosa li{padding:.12em 0 .12em .3em;}
.prosa li::marker{color:var(--rosso);}
.prosa b,.prosa strong{font-weight:700;}
/* "Cookies policy" sopra il titolo e titolo in grassetto della privacy */
.prosa > h2:first-child{margin:0 0 .3em; font-size:1rem; font-weight:600; font-stretch:100%; color:var(--grafite);}
.prosa > strong:first-child{display:block; margin:0 0 .6em; font-weight:800; font-stretch:112%; font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.08;}
.prosa img{float:right; width:min(260px,34%); height:auto; margin:.4em 0 1.2em 2rem; border:1px solid var(--inchiostro);}

/* classifica dei cognomi */
#clasificacion-apellidos{width:100%; clear:both; border-collapse:collapse; margin:1.6em 0 1em; font-size:1rem; line-height:1.4;}
#clasificacion-apellidos th{padding:.5em .7em; text-align:left; font-weight:600; font-size:.88rem; color:var(--grafite); border-bottom:2px solid var(--inchiostro);}
#clasificacion-apellidos th:nth-child(n+3){text-align:right;}
#clasificacion-apellidos td{padding:.6em .7em; border-bottom:1px solid var(--linea); vertical-align:baseline;}
#clasificacion-apellidos td:first-child{width:4.5em; color:var(--grafite); font-variant-numeric:tabular-nums;}
#clasificacion-apellidos td:nth-child(2) a{color:var(--inchiostro); font-weight:700; font-stretch:108%; text-decoration:none; letter-spacing:.01em;}
#clasificacion-apellidos td:nth-child(2) a:hover{color:var(--rosso); text-decoration:underline;}
#clasificacion-apellidos td:nth-child(n+3){text-align:right; font-variant-numeric:tabular-nums;}
#clasificacion-apellidos tr:hover td{background:var(--nebbia);}
/* riga finale: "cento precedenti / successivi" */
#clasificacion-apellidos td[colspan]{padding:1.2em 0 0; border-bottom:0; text-align:left; background:transparent !important;}
#clasificacion-apellidos td[colspan] a{display:inline-block; margin:0 8px 8px 0; padding:.5em 1.1em; border:2px solid var(--inchiostro); border-radius:4px; color:var(--inchiostro); font-weight:650; text-decoration:none;}
#clasificacion-apellidos td[colspan] a:hover{background:var(--inchiostro); color:#fff;}

/* ---------- altre mappe e piede ---------- */
.sorelle{padding:32px 0 36px; border-top:1px solid var(--linea);}
.sorelle h2{margin:0 0 .8em; font-weight:700; font-size:1.1rem;}
.sorelle ul{display:flex; flex-wrap:wrap; gap:6px 20px; margin:0; padding:0; list-style:none;}
.sorelle a{color:var(--inchiostro); text-decoration:none; border-bottom:1px solid var(--linea); padding:2px 0; font-size:.98rem;}
.sorelle a:hover{color:var(--rosso); border-color:var(--rosso);}
.piede{padding:22px 0 40px; border-top:2px solid var(--inchiostro); font-size:.9rem; color:var(--grafite);}
.piede p{margin:0 0 .5em;}
.piede ul{display:flex; flex-wrap:wrap; gap:4px 22px; margin:0; padding:0; list-style:none;}
.piede a{color:var(--inchiostro);}
.piede a:hover{color:var(--rosso);}

/* ---------- telefoni: mappa intera nello schermo, testata compatta ---------- */
@media (max-width:600px){
  html{scroll-padding-top:1rem;}
  .wrap{padding:0 12px;}
  .top{position:static; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .top .wrap{min-height:0; gap:0 14px;}
  .marchio{font-size:1.02rem; padding:8px 0 2px; gap:8px; flex:1 1 0; min-width:0;}
  .marchio svg{width:30px; height:21px;}
  .lingue{display:none;}
  .lingue-mob{display:block; margin-top:6px;}
  .nav{order:3; width:100%; gap:0 15px;}
  .nav a{padding:6px 0 8px; font-size:.9rem;}
  .apertura{padding:22px 0 30px;}
  .apertura .wrap{gap:26px;}
  .vetrina{width:100%;}
  .intesta{padding:10px 0 4px;}
  .intesta .wrap{gap:8px;}
  .h1-pre{font-size:.92rem; margin:0;}
  .h1-nome{font-size:clamp(.9rem,calc((100vw - 24px) / (var(--n,8) * .98)),2.4rem); line-height:1.08;}
  .intesta .cerca{flex:1 1 100%; max-width:none;}
  .intesta .cerca input[type=text]{font-size:1rem; padding:.42em .7em;}
  .intesta .cerca button{font-size:.92rem; padding:0 1.1em;}
  .risultato{padding:8px 0 28px;}
  .risultato .wrap{gap:20px;}
  /* larghezza della mappa limitata dall'altezza dello schermo (--r = larghezza/altezza della mappa, sulla figura) */
  .scheda{margin:0 auto; width:100%; max-width:max(280px, calc((100vh - 200px) * var(--r, 1))); max-width:max(280px, calc((100svh - 200px) * var(--r, 1)));}
  .pagina{padding:20px 0 32px;}
  .prosa{font-size:1.02rem; line-height:1.65;}
  .prosa > img,.prosa > h1 + img{display:none;}
  .prosa h1,.prosa > strong:first-child{font-size:clamp(1.6rem,7.5vw,2.2rem);}
  #clasificacion-apellidos td,#clasificacion-apellidos th{padding-left:.4em; padding-right:.4em;}
  #clasificacion-apellidos td:first-child{width:3em;}
  /* classifica a 4 colonne: testo piu' piccolo perche' stia nello schermo */
  #clasificacion-apellidos{font-size:.9rem; table-layout:auto;}
  #clasificacion-apellidos th{font-size:.74rem; padding-left:.3em; padding-right:.3em; hyphens:auto;}
  #clasificacion-apellidos td{padding-left:.3em; padding-right:.3em;}
  #clasificacion-apellidos td:first-child{width:2.4em;}
  #clasificacion-apellidos td:nth-child(2){overflow-wrap:anywhere;}
}

/* ---------- portale: elenco dei paesi ---------- */
.portale .titolo{margin:0 0 .3em;}
.portale .sottotitolo{max-width:44em; margin:0 0 2rem;}
.paesi{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; margin:0; padding:0; list-style:none;}
.paesi a{display:flex; flex-direction:column; gap:10px; height:100%; padding:14px 14px 12px; border:1px solid var(--linea); color:var(--inchiostro); text-decoration:none; font-weight:650; line-height:1.25; transition:border-color .15s, transform .15s;}
.paesi a:hover{border-color:var(--inchiostro); transform:translateY(-2px);}
.paese-img{display:flex; align-items:center; justify-content:center; aspect-ratio:1; background:#fff;}
.paese-img img{max-width:100%; max-height:100%; object-fit:contain;}
@media (max-width:600px){ .paesi{grid-template-columns:repeat(2, 1fr); gap:10px;} .paesi a{padding:10px; font-size:.92rem;} }
/* portale di mapadeapellidos.com: tre paesi, poi il testo di presentazione */
.portale .paesi{grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:780px; margin:1.6rem 0 2.6rem;}
.portale-testo{max-width:46em;}
@media (max-width:600px){ .portale .paesi{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;} .portale .paesi a{padding:8px; font-size:.82rem;} }
/* cinque lingue e menu lungo: su computer le lingue vanno nel menu a tendina, come sul telefono */
.top.molte-lingue .lingue{display:none;}
.top.molte-lingue .lingue-mob{display:block;}
@media (min-width:601px){ .top.molte-lingue .wrap{gap:6px 18px;} .top.molte-lingue .nav{gap:4px 16px;} .top.molte-lingue .nav a{font-size:.94rem;} }