/* =====================================================================
   Guía de Noruega — hoja de estilos del sitio público

   Sin framework. El 71 % de los clics llegan desde móvil y posicionan
   mucho mejor que escritorio, así que todo se diseña primero para una
   pantalla estrecha y se amplía después.
   ===================================================================== */

:root{
  /* Luz nórdica: neutros fríos, sesgados a azul, alto contraste. */
  --paper:#F7F9FA;
  --surface:#FFFFFF;
  --surface-2:#EEF2F5;
  --ink:#0C161F;
  --ink-2:#3A4A57;
  --ink-3:#6B7C89;
  --line:#DBE3E9;
  --line-2:#C3CFD8;

  --fjord:#0F4C63;      /* enlaces y estructura */
  --fjord-soft:#E3EDF1;
  --aurora:#1E6B4F;     /* SÓLO el bloque de respuesta directa */
  --aurora-soft:#E6F1EC;

  --radius:2px;
  --measure:66ch;
  --gap:clamp(1.25rem, 4vw, 2rem);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A1219;
    --surface:#101B24;
    --surface-2:#16242F;
    --ink:#E9EFF3;
    --ink-2:#B4C2CC;
    --ink-3:#7F8F9B;
    --line:#22323E;
    --line-2:#334553;
    --fjord:#69B4D0;
    --fjord-soft:#122C38;
    --aurora:#6BC49C;
    --aurora-soft:#122A21;
  }
}
:root[data-theme="dark"]{
  --paper:#0A1219;
  --surface:#101B24;
  --surface-2:#16242F;
  --ink:#E9EFF3;
  --ink-2:#B4C2CC;
  --ink-3:#7F8F9B;
  --line:#22323E;
  --line-2:#334553;
  --fjord:#69B4D0;
  --fjord-soft:#122C38;
  --aurora:#6BC49C;
  --aurora-soft:#122A21;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  /* Newsreader para lo que se lee; la interfaz va en Public Sans. */
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media(max-width:600px){body{font-size:18px}}

/* Todo lo que es interfaz y no texto de lectura. */
.ui,nav,header,footer,.meta,.card,.crumbs,.btn,.tag,.toc,.pager,.search{
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

a{color:var(--fjord);text-underline-offset:.16em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
a:focus-visible{outline:2px solid var(--fjord);outline-offset:3px;border-radius:1px}

img{max-width:100%;height:auto;display:block}

.wrap{width:100%;max-width:74rem;margin:0 auto;padding:0 var(--gap)}
.reading{max-width:var(--measure);margin-inline:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.6rem 1rem}

/* ---------------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------------- */
.site-head{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.site-head .bar{
  display:flex;align-items:center;gap:1rem;
  min-height:56px;padding-block:.5rem;
}
.logo{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:"Newsreader",Georgia,serif;
  font-weight:600;font-size:1.15rem;letter-spacing:-.015em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
}
.logo-marca{display:block;width:30px;height:30px;border-radius:5px;flex:none}
.logo-img{display:block;height:34px;width:auto;max-width:230px;object-fit:contain}
.logo:hover{color:var(--fjord)}
.site-nav{margin-left:auto;display:flex;gap:.25rem;flex-wrap:wrap;align-items:center}
.site-nav a{
  font-size:.82rem;padding:.4rem .6rem;text-decoration:none;color:var(--ink-2);
  border-radius:var(--radius);white-space:nowrap;
}
.site-nav a:hover{background:var(--surface-2);color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--fjord);font-weight:600}
@media(max-width:760px){
  .site-nav{
    margin-left:0;width:100%;overflow-x:auto;
    padding-bottom:.35rem;-webkit-overflow-scrolling:touch;
  }
  .site-head .bar{flex-wrap:wrap;gap:.4rem}
}

/* ---------------------------------------------------------------------
   Migas
   --------------------------------------------------------------------- */
.crumbs{font-size:.78rem;color:var(--ink-3);padding:1.1rem 0 0;line-height:1.5}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.crumbs li::after{content:"›";margin-left:.35rem;color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--fjord);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2)}

/* ---------------------------------------------------------------------
   Artículo
   --------------------------------------------------------------------- */
article{padding-block:1.5rem 3rem}

h1{
  font-weight:600;
  font-size:clamp(1.9rem,5.2vw,3rem);
  line-height:1.12;
  letter-spacing:-.021em;
  margin:.4rem 0 .9rem;
  text-wrap:balance;
}

.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .85rem;
  font-size:.8rem;color:var(--ink-3);
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem;
}
.meta a{color:var(--ink-2);text-decoration:none;font-weight:600}
.meta a:hover{color:var(--fjord);text-decoration:underline}
.meta time{font-variant-numeric:tabular-nums}
.meta .dot{color:var(--line-2)}

/* --- Respuesta directa ------------------------------------------------
   El único punto del diseño donde entra el verde. Que destaque no es
   decorativo: es lo primero que debe encontrar quien llega con una
   pregunta concreta, y lo que leen los motores de respuesta.          */
.answer{
  background:var(--aurora-soft);
  border-left:3px solid var(--aurora);
  padding:1.05rem 1.25rem;
  margin:0 0 1.9rem;
  border-radius:0 var(--radius) var(--radius) 0;
}
.answer p{margin:0;font-size:1.02em;line-height:1.6}
.answer .label{
  font-family:"Public Sans",system-ui,sans-serif;
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--aurora);margin-bottom:.4rem;
}

/* --- Imagen destacada ------------------------------------------------ */
.hero{margin:0 0 1.9rem}
.hero img{
  width:100%;border-radius:var(--radius);
  /* La proporción reservada evita que el texto salte al cargar. */
  aspect-ratio:16/9;object-fit:cover;background:var(--surface-2);
}
.hero figcaption{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:.76rem;color:var(--ink-3);margin-top:.5rem;line-height:1.45;
}

/* --- Índice ---------------------------------------------------------- */
.toc{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);margin:0 0 2rem;
}
.toc summary{
  padding:.8rem 1.1rem;cursor:pointer;font-weight:600;font-size:.85rem;
  letter-spacing:.02em;list-style:none;display:flex;justify-content:space-between;gap:1rem;
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"▾";color:var(--ink-3);font-size:.7rem}
.toc[open] summary::after{content:"▴"}
.toc[open] summary{border-bottom:1px solid var(--line)}
.toc ol{margin:0;padding:.7rem 1.1rem .9rem 2.1rem;font-size:.88rem;line-height:1.55}
.toc li{margin-bottom:.35rem}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--fjord);text-decoration:underline}

/* --- Cuerpo ---------------------------------------------------------- */
.body{font-size:1em}
.body > *{margin-block:0 1.3em}
.body > *:last-child{margin-bottom:0}

.body h2,.body h3,.body h4{
  font-weight:600;letter-spacing:-.014em;line-height:1.22;
  margin-top:2.4em;margin-bottom:.6em;text-wrap:balance;
  scroll-margin-top:5rem;
}
.body h2{font-size:1.5em;padding-top:.5em;border-top:1px solid var(--line)}
.body h3{font-size:1.2em}
.body h4{font-size:1.05em}
.body h2:first-child,.body h3:first-child{margin-top:0;border-top:none;padding-top:0}

.body p{hyphens:auto;overflow-wrap:break-word}
.body strong{font-weight:700}
.body ul,.body ol{padding-left:1.35em}
.body li{margin-bottom:.5em}
.body li::marker{color:var(--ink-3)}

.body blockquote{
  margin-inline:0;padding:.2em 0 .2em 1.2em;
  border-left:2px solid var(--line-2);color:var(--ink-2);font-style:italic;
}

.body img{border-radius:var(--radius);margin-block:1.6em}
.body figure{margin-inline:0}
.body figcaption{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:.76rem;color:var(--ink-3);margin-top:.5rem;text-align:center;
}

/* Aviso destacado heredado de los [su_note] y [su_box] del sitio viejo. */
.body .callout{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.25rem;
}
.body .callout > *:first-child{margin-top:0}
.body .callout > *:last-child{margin-bottom:0}
.body .callout h3{margin-top:0;font-size:1.05em}

.body mark{background:var(--fjord-soft);color:inherit;padding:.05em .18em;border-radius:1px}

.body details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.body details summary{padding:.75rem 1rem;cursor:pointer;font-weight:600;font-size:.95em}
.body details > div{padding:0 1rem 1rem}

/* Las tablas se desplazan solas; la página nunca lo hace. */
.body .table-wrap,.body table{display:block;overflow-x:auto;max-width:100%}
.body table{
  border-collapse:collapse;font-family:"Public Sans",system-ui,sans-serif;
  font-size:.88rem;line-height:1.5;
}
.body th,.body td{border:1px solid var(--line);padding:.55rem .75rem;text-align:left;vertical-align:top}
.body th{background:var(--surface-2);font-weight:600}

.body a.button{
  display:inline-block;background:var(--fjord);color:var(--surface);
  padding:.6rem 1.1rem;border-radius:var(--radius);text-decoration:none;
  font-family:"Public Sans",system-ui,sans-serif;font-size:.9rem;font-weight:600;
}
.body a.button:hover{filter:brightness(1.12)}

/* ---------------------------------------------------------------------
   Bloques posteriores al artículo
   --------------------------------------------------------------------- */
.section{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.section > h2{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.1rem;
}

/* --- Preguntas frecuentes -------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:.95rem 1.8rem .95rem 0;cursor:pointer;font-weight:600;
  position:relative;list-style:none;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.2rem;top:.85rem;
  color:var(--ink-3);font-weight:400;font-size:1.2em;
}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{color:var(--fjord)}
.faq .answer-body{padding:0 0 1.1rem;color:var(--ink-2);font-size:.96em}
.faq .answer-body > *:first-child{margin-top:0}
.faq .answer-body > *:last-child{margin-bottom:0}

/* --- Fuentes: soporte de E-E-A-T ------------------------------------- */
.sources ol{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:.85rem;color:var(--ink-2);padding-left:1.3em;line-height:1.55;
}
.sources li{margin-bottom:.45rem}

/* --- Autor ----------------------------------------------------------- */
.author-card{
  display:flex;gap:1.1rem;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.25rem;
}
.author-card .avatar{
  width:56px;height:56px;border-radius:50%;flex:none;
  background:var(--surface-2);object-fit:cover;
}
.author-card .name{
  font-family:"Public Sans",system-ui,sans-serif;
  font-weight:700;font-size:.98rem;margin:0 0 .1rem;
}
.author-card .role{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:.78rem;color:var(--ink-3);margin:0 0 .55rem;
}
.author-card .bio{font-size:.92rem;color:var(--ink-2);margin:0;line-height:1.55}

/* --- Tarjetas -------------------------------------------------------- */
.cards{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));
}
.card{background:none}
.card a.thumb{display:block;margin-bottom:.7rem}
.card img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);background:var(--surface-2);
}
.card .placeholder{
  width:100%;aspect-ratio:16/10;border-radius:var(--radius);
  background:linear-gradient(140deg,var(--surface-2),var(--fjord-soft));
}
.card .tag{
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fjord);text-decoration:none;display:inline-block;margin-bottom:.3rem;
}
.card h3{
  font-family:"Newsreader",Georgia,serif;
  font-size:1.08rem;font-weight:600;line-height:1.3;margin:0 0 .35rem;
  letter-spacing:-.012em;text-wrap:balance;
}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--fjord)}
.card p{font-size:.88rem;color:var(--ink-2);margin:0;line-height:1.5}
.card .card-meta{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:.72rem;color:var(--ink-3);margin-top:.45rem;
}

/* --- Listado ---------------------------------------------------------- */
.page-head{padding:2rem 0 1.6rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.page-head h1{margin:0 0 .5rem}
.page-head .lede{color:var(--ink-2);font-size:1.02rem;margin:0;max-width:60ch}
.count{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:.78rem;color:var(--ink-3);margin-top:.6rem;
}

.pager{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.5rem;flex-wrap:wrap}
.pager a,.pager span{
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;color:var(--ink-2);font-size:.85rem;
}
.pager a:hover{border-color:var(--fjord);color:var(--fjord)}
.pager .on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}

/* --- Buscador -------------------------------------------------------- */
.search{display:flex;gap:.5rem;margin:1.5rem 0 2rem;max-width:34rem}
.search input{
  flex:1;padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;
  font-family:"Public Sans",system-ui,sans-serif;
}
.search input:focus{outline:2px solid var(--fjord);outline-offset:1px;border-color:transparent}
.search button{
  padding:.7rem 1.2rem;border:0;border-radius:var(--radius);
  background:var(--fjord);color:var(--surface);font:inherit;font-weight:600;
  font-size:.9rem;cursor:pointer;font-family:"Public Sans",system-ui,sans-serif;
}

/* ---------------------------------------------------------------------
   Publicidad
   El contenedor reserva su altura desde el servidor: sin esto, AdSense
   empuja el texto al llegar y arruina el CLS.
   --------------------------------------------------------------------- */
.ad-slot{
  display:block;margin:2.2rem 0;text-align:center;
  min-height:var(--ad-mh,280px);
}
@media(min-width:768px){.ad-slot{min-height:var(--ad-dh,280px)}}
.ad-label{
  font-family:"Public Sans",system-ui,sans-serif;
  display:block;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.4rem;text-align:left;
}
.ad-slot--sidebar{margin:0 0 1.5rem}

/* ---------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------- */
.site-foot{
  border-top:1px solid var(--line);background:var(--surface);
  margin-top:4rem;padding:2.5rem 0 3rem;
  font-family:"Public Sans",system-ui,sans-serif;font-size:.85rem;color:var(--ink-2);
}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.site-foot h2{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .7rem;
}
.site-foot ul{list-style:none;margin:0;padding:0;line-height:1.9}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--fjord);text-decoration:underline}
.colophon{
  margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-3);line-height:1.6;
}
.disclosure{max-width:60ch;margin:.5rem 0 0}

.empty-state{padding:3rem 0;color:var(--ink-3);text-align:center}

/* ---------- rótulo de sección ---------- */
.eyebrow{
  font-family:"Public Sans",system-ui,sans-serif;font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.1rem;
}

/* ---------- «Por dónde empezar» ----------
   Rejilla propia, distinta de .cards: aquí manda la imagen y el número de
   guías. Con sólo texto la portada parecía un índice y no invitaba a entrar
   en ninguna sección. */
.secciones{
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));
}

.seccion{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);transition:border-color .15s,transform .15s;
}
.seccion:hover{border-color:var(--fjord);transform:translateY(-2px)}
.seccion:focus-visible{outline:2px solid var(--fjord);outline-offset:2px}

.seccion-img{position:relative;display:block;background:var(--surface-2)}
.seccion-img img,.seccion-img .placeholder{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
}
.seccion-img .placeholder{
  background:linear-gradient(140deg,var(--fjord-soft),var(--surface-2));
}
/* Velo inferior para que el número se lea sobre cualquier foto. */
.seccion-img::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top,rgba(10,20,28,.72),transparent);
}
.seccion-n{
  position:absolute;left:.6rem;bottom:.5rem;z-index:1;
  font-family:"Public Sans",system-ui,sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.06em;color:#fff;
}

.seccion-txt{display:block;padding:.7rem .8rem .85rem}
.seccion-txt strong{
  display:block;font-family:"Newsreader",Georgia,serif;font-size:1.08rem;
  font-weight:600;line-height:1.25;color:var(--ink);
}
.seccion:hover .seccion-txt strong{color:var(--fjord)}
.seccion-desc{
  display:block;margin-top:.3rem;font-size:.82rem;line-height:1.45;color:var(--ink-3);
}

@media (prefers-reduced-motion:reduce){
  .seccion,.seccion:hover{transition:none;transform:none}
}

/* ---------- compartir ----------
   Enlaces normales, sin scripts de terceros. Los colores de marca sólo en
   el borde y el texto: rellenar seis botones de color compite con el
   contenido y envejece muy rápido. */
.compartir{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin:2.2rem 0;padding:1rem 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.compartir-t{
  font-family:"Public Sans",system-ui,sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:.35rem;
}
.cbtn{
  font-family:"Public Sans",system-ui,sans-serif;font-size:.8rem;font-weight:600;
  padding:.4rem .75rem;border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--ink-2);text-decoration:none;background:var(--surface);cursor:pointer;
  line-height:1.4;transition:border-color .15s,color .15s;
}
.cbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.cbtn.wa:hover{border-color:#25D366;color:#128C4A}
.cbtn.fb:hover{border-color:#1877F2;color:#1877F2}
.cbtn.tw:hover{border-color:var(--ink);color:var(--ink)}
.cbtn.tg:hover{border-color:#229ED9;color:#1B7FAD}
.cbtn.copiar.hecho{border-color:var(--aurora);color:var(--aurora)}

/* ---------- anterior y siguiente ---------- */
.vecinos{
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:2.4rem 0;
}
.vecino{
  display:block;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:inherit;background:var(--surface);
  transition:border-color .15s;
}
.vecino:hover{border-color:var(--fjord)}
.vecino.sig{text-align:right}
.vecino-t{
  display:block;font-family:"Public Sans",system-ui,sans-serif;font-size:.68rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.25rem;
}
.vecino.ant .vecino-t::before{content:"← "}
.vecino.sig .vecino-t::after{content:" →"}
.vecino-n{
  display:block;font-family:"Newsreader",Georgia,serif;font-size:1rem;
  font-weight:600;line-height:1.3;color:var(--ink);
}
.vecino:hover .vecino-n{color:var(--fjord)}

@media (max-width:600px){
  .vecinos{grid-template-columns:1fr}
  .vecino.sig{text-align:left}
}