/* Islas de Tinta: landing y política. Autónoma (no usa el CSS de chavaias.es). Fuentes propias, sin servicios externos. */
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url("/islas-de-tinta/fuentes/Fredoka_600SemiBold.ttf") format("truetype")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url("/islas-de-tinta/fuentes/Nunito_600SemiBold.ttf") format("truetype")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url("/islas-de-tinta/fuentes/Nunito_800ExtraBold.ttf") format("truetype")}
:root{--azul:#1b51bb;--azul-osc:#12338a;--coral:#ff7f66;--coral-osc:#e8654c;--crema:#fff8ec;--tinta:#1d2a3a;--oro:#f4b942;--borde:#d9e2f1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:600 17px/1.6 "Nunito",system-ui,sans-serif;color:var(--tinta);background:var(--crema)}
h1,h2,h3{font-family:"Fredoka","Nunito",sans-serif;font-weight:600;line-height:1.15;margin:0 0 .5em}
a{color:var(--azul)}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
.top{background:var(--azul-osc);color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.top a{color:#fff;text-decoration:none}
.marca{display:flex;align-items:center;gap:.6rem;font:600 1.15rem "Fredoka",sans-serif}
.marca img{width:34px;height:34px;border-radius:9px}
.top nav a{margin-left:1.1rem;font-size:.95rem}
.hero{background:linear-gradient(160deg,var(--azul) 0%,#2a6ad8 100%);color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding-top:3rem;padding-bottom:3rem}
.hero h1{font-size:clamp(2.4rem,6vw,3.8rem)}
.hero h1 span{color:var(--coral)}
.hero p{font-size:1.15rem;max-width:34rem}
.hero img{width:100%;height:auto;border-radius:28px;box-shadow:0 18px 40px rgba(0,0,0,.35);border:4px solid rgba(255,255,255,.25)}
.botones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.btn{display:inline-block;font:800 1.05rem "Nunito",sans-serif;padding:.8rem 1.4rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-osc)}
.btn-coral[aria-disabled="true"]{cursor:default;opacity:.92}
.btn-claro{background:rgba(255,255,255,.16);color:#fff;border:2px solid rgba(255,255,255,.5)}
section{padding:3.2rem 0}
section h2{font-size:clamp(1.7rem,4vw,2.3rem);color:var(--azul-osc)}
.sub{max-width:40rem;margin-bottom:1.6rem}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.1rem}
.tarjeta{background:#fff;border:2px solid var(--borde);border-radius:20px;padding:1.2rem 1.3rem}
.tarjeta h3{font-size:1.25rem;color:var(--azul)}
.tarjeta p{margin:0}
.num{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--oro);color:#4a3200;font:800 1.1rem "Nunito",sans-serif;margin-bottom:.6rem}
.cifras{background:var(--azul-osc);color:#fff}
.cifras .rejilla{text-align:center;grid-template-columns:repeat(5,1fr);gap:.8rem}
.cifras strong{display:block;font:600 2.6rem "Fredoka",sans-serif;color:var(--oro)}
.cifras .rejilla>div{font-size:.98rem;line-height:1.3}
.familias{background:#eaf1fc}
.por-dentro .rejilla{align-items:start}
.por-dentro .rejilla>.tarjeta:has(>details[open]){grid-column:1/-1}
.por-dentro summary{cursor:pointer;color:var(--azul);font-weight:800;margin-top:.7rem}
.por-dentro details details summary{color:var(--tinta);margin-top:.5rem}
.por-dentro details p,.por-dentro details ul{margin:.6rem 0 0}
.por-dentro details ul{padding-left:1.2rem}
.por-dentro .ficha{margin-top:1.1rem}
.por-dentro .ficha>details>summary{margin-top:0}
.lista{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:.8rem 1.5rem}
.lista li{padding-left:1.8rem;position:relative}
.lista li::before{content:"✓";position:absolute;left:0;top:0;color:#fff;background:var(--azul);border-radius:50%;width:1.3rem;height:1.3rem;font-size:.85rem;line-height:1.3rem;text-align:center}
.prueba{background:#fff2d6}
.pie{background:var(--azul-osc);color:#dbe6fb;font-size:.92rem;padding:2rem 0}
.pie a{color:#fff}
.pie .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
.doc{max-width:46rem;margin:0 auto;padding:2rem 1.25rem 3rem;background:#fff;border-radius:0}
.doc h1{font-size:2rem;color:var(--azul-osc)}
.doc h2{font-size:1.35rem;color:var(--azul);margin-top:2rem}
.doc table{border-collapse:collapse;width:100%;font-size:.95rem}
.doc th,.doc td{border:1px solid var(--borde);padding:.5rem;text-align:left;vertical-align:top}
.doc th{background:#eef3fa}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero img{max-width:26rem;margin:0 auto}.top nav a{margin-left:.7rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Galería de capturas: móviles que "flotan" como islas sobre el mar */
.galeria{background:linear-gradient(180deg,#12338a 0%,#1b51bb 55%,#2a6ad8 100%);color:#fff;padding:3.2rem 0 0;position:relative;overflow:hidden}
.galeria h2{color:#fff}
.galeria .sub{color:#dbe6fb}
.carril-marco{position:relative}
.carril{display:flex;align-items:center;gap:2.2rem;overflow-x:auto;scroll-snap-type:x proximity;padding:2.6rem max(1.25rem,calc((100vw - 62rem)/2)) 4.5rem;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent;-webkit-overflow-scrolling:touch}
.carril:focus-visible{outline:3px solid var(--oro);outline-offset:-3px}
.movil{flex:0 0 auto;width:15rem;margin:0;scroll-snap-align:center;text-align:center}
.movil:nth-child(odd){transform:translateY(-1.1rem)}
.movil:nth-child(even){transform:translateY(1.1rem)}
.abrir{all:unset;cursor:zoom-in;display:block}
.abrir:focus-visible .marco{outline:3px solid var(--oro);outline-offset:4px}
.marco{display:block;border-radius:2.2rem;padding:.55rem;background:#0b1d4d;box-shadow:0 22px 40px rgba(0,0,0,.45),0 0 0 2px #ffffff22 inset;transition:transform .25s ease}
.abrir:hover .marco{transform:scale(1.03) rotate(-1deg)}
.marco img{display:block;width:100%;height:auto;border-radius:1.7rem;background:#2a6ad8}
.movil figcaption{margin-top:1rem;font:600 1.05rem "Fredoka","Nunito",sans-serif;color:#fff;text-wrap:balance}
.flecha{position:absolute;top:50%;translate:0 -60%;z-index:2;width:2.8rem;height:2.8rem;border-radius:50%;border:2px solid #ffffff88;background:#0b1d4dcc;color:#fff;font:800 1.7rem/1 "Nunito",sans-serif;cursor:pointer}
.flecha:hover{background:var(--coral)}
.flecha.izq{left:.6rem}.flecha.der{right:.6rem}
.ola{position:absolute;left:0;bottom:-1px;width:100%;height:3rem;display:block}
#visor{border:0;padding:0;background:transparent;max-width:min(92vw,26rem);max-height:94vh;overflow:visible}
#visor::backdrop{background:rgba(6,16,45,.85)}
#visor img{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain;border-radius:1.6rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#visor .cerrar{position:absolute;top:-.8rem;right:-.8rem;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--coral);color:#fff;font:800 1.6rem/1 "Nunito",sans-serif;cursor:pointer;z-index:1}
@media (max-width:760px){.cifras .rejilla{grid-template-columns:repeat(3,1fr)}.cifras strong{font-size:2.1rem}.movil{width:12.5rem}.flecha{display:none}.carril{gap:1.6rem}}
@media (prefers-reduced-motion:reduce){.marco{transition:none}.carril{scroll-behavior:auto}}
