/* ============================================================
   checkin-online.es — tema de ARTÍCULO (guías/legales) DARK
   Casa con la plantilla de artículo (.nav/.hero/article/.info-box/
   .faq-sec/.btn-primary/.cta-block/footer). Acento por variable
   --accent (azul por defecto; dorado en hotel/albergue).
   ============================================================ */
:root{
  --accent:#37D6FF; --accent-2:#8B5CFF; --accent-deep:#0A87BE;
  --ink-950:#04060D; --ink-900:#070B15; --ink-800:#0B1120;
  --bg:#070B15; --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.16);
  --tx:#EFF2FB; --tx-body:rgba(226,232,244,.76); --tx-mut:rgba(226,232,244,.5);
  --f-display:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  --f-body:'Manrope','Manrope Fallback',system-ui,sans-serif;
  --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-md:0 16px 40px -14px rgba(0,0,0,.7);
  --g-brand:linear-gradient(115deg,var(--accent),var(--accent-2));
  /* alias legacy que usan algunas páginas */
  --gd-400:var(--accent); --gd-500:var(--accent); --gd-600:var(--accent-deep); --gd-700:var(--accent-deep);
  --ink-50:var(--surface); --ink-200:var(--line-2); --ink-500:var(--tx-mut); --ink-600:var(--tx-body); --ink-700:var(--tx-body); --ink-800:var(--tx-body); --ink-900:#fff;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--ink-900)}
body{margin:0; padding:0; font-family:var(--f-body); color:var(--tx-body); background:var(--bg); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:radial-gradient(40% 40% at 85% -2%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),radial-gradient(42% 42% at 6% 8%,rgba(255,106,76,.18),transparent 60%),radial-gradient(46% 46% at 80% 100%,rgba(139,92,255,.16),transparent 62%);
  filter:blur(30px)}
img,video,svg{display:block; max-width:100%; height:auto}
a{color:var(--accent); text-decoration:underline; text-underline-offset:3px} a:hover{color:#fff}
strong{color:#fff}

.container,.nav-inner{width:min(820px,calc(100vw - 2.5rem)); margin-inline:auto}

/* NAV */
.nav{background:rgba(10,16,32,.6); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line); padding:.85rem 0; position:sticky; top:0; z-index:50}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.nav-brand{display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-family:var(--f-display); font-weight:700; font-size:1.02rem}
.nav-brand img{height:38px; width:auto}
.btn-back{color:#fff; background:rgba(255,255,255,.08); border:1px solid var(--line-2); padding:.55rem 1rem; border-radius:var(--r-pill); text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:.88rem; transition:background .2s}
.btn-back:hover{background:rgba(255,255,255,.16); color:#fff}

/* HERO */
.hero{position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(120deg,var(--ink-800),var(--ink-950)); color:#fff; padding:4rem 0 3.5rem; border-bottom:1px solid var(--line)}
.hero::after{content:""; position:absolute; inset:-40% -10% -10% -10%; z-index:-1; pointer-events:none; background:radial-gradient(40% 60% at 12% 0,color-mix(in srgb,var(--accent) 45%,transparent),transparent 60%),radial-gradient(40% 60% at 90% 20%,rgba(139,92,255,.4),transparent 62%); filter:blur(24px)}
.hero .crumbs{font-size:.85rem; color:var(--tx-mut); margin:0 0 .9rem}
.hero .crumbs a{color:var(--tx-body)}
.hero h1{font-family:var(--f-display); font-weight:800; font-size:clamp(1.95rem,1.5rem+1.9vw,2.8rem); letter-spacing:-.035em; margin:0; color:#fff; line-height:1.08}
.hero p{color:rgba(255,255,255,.82); margin:.85rem 0 0; font-size:1.06rem; max-width:640px}

/* ARTICLE */
main{padding:3rem 0 4rem}
article h2{font-family:var(--f-display); color:#fff; font-size:1.5rem; letter-spacing:-.02em; margin:2.5rem 0 .9rem; padding-bottom:.5rem; border-bottom:1px solid var(--line)}
article h2:first-of-type{margin-top:0}
article h3{font-family:var(--f-display); color:#fff; font-size:1.15rem; margin:1.6rem 0 .5rem}
article p{margin:0 0 .95rem; color:var(--tx-body)}
article ul,article ol{margin:0 0 1rem; padding-left:1.5rem; color:var(--tx-body)}
article li{margin-bottom:.4rem}
article li::marker{color:var(--accent)}
article a{color:var(--accent)}
article table{width:100%; border-collapse:collapse; margin:0 0 1.25rem; font-size:.93rem; border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden}
article th,article td{border:1px solid var(--line); padding:.7rem .8rem; text-align:left; vertical-align:top; color:var(--tx-body)}
article th{background:var(--surface-2); font-family:var(--f-display); color:#fff; font-size:.9rem}
article figure{margin:1.75rem 0}
article figure img{width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--line-2); box-shadow:var(--sh-md)}
article figcaption{font-size:.85rem; color:var(--tx-mut); margin-top:.5rem; text-align:center}

.info-box{background:var(--surface); border:1px solid var(--line-2); border-left:3px solid var(--accent); border-radius:var(--r-md); padding:1.25rem 1.4rem; margin:1.25rem 0 1.6rem; backdrop-filter:blur(8px)}
.info-box p{margin:.3rem 0; color:var(--tx-body)}
.faq-sec details{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:.2rem 1.2rem; margin-bottom:.65rem}
.faq-sec details[open]{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.faq-sec summary{cursor:pointer; font-family:var(--f-display); font-weight:700; color:#fff; padding:.85rem 0; list-style:none}
.faq-sec summary::-webkit-details-marker{display:none}
.faq-sec summary::after{content:"+"; float:right; color:var(--accent); font-size:1.3rem; line-height:1}
.faq-sec details[open] summary::after{content:"–"}
.faq-sec details p{padding:0 0 .9rem; margin:0}
.meta-updated{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--tx-mut); font-size:.92rem}

.cta-block,.cta-inline{margin:2.5rem 0 0; text-align:center; border-radius:var(--r-lg); padding:2rem 1.5rem; position:relative; overflow:hidden}
.cta-block{background:var(--surface); border:1px solid var(--line-2); backdrop-filter:blur(10px)}
.cta-inline{margin:1.75rem 0 2rem; background:linear-gradient(120deg,rgba(255,106,76,.14),color-mix(in srgb,var(--accent) 16%,transparent)); border:1px solid var(--line-2); padding:1.5rem 1.4rem}
.cta-block p,.cta-inline p{max-width:560px; margin:0 auto 1.25rem; color:var(--tx-body)} .cta-inline p{margin-bottom:1rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}
.btn-primary{display:inline-flex; align-items:center; gap:.5rem; background:var(--g-brand); color:#04121b; padding:.95rem 1.6rem; border-radius:var(--r-pill); font-family:var(--f-display); font-weight:700; text-decoration:none; box-shadow:0 16px 40px -14px color-mix(in srgb,var(--accent) 60%,transparent); transition:transform .2s, box-shadow .3s}
.btn-primary:hover{transform:translateY(-2px); color:#04121b; box-shadow:0 24px 54px -14px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn-outline{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.04); color:var(--tx); border:1.5px solid var(--line-2); padding:.95rem 1.6rem; border-radius:var(--r-pill); font-family:var(--f-display); font-weight:700; text-decoration:none; transition:transform .2s, border-color .2s}
.btn-outline:hover{transform:translateY(-2px); border-color:var(--accent); color:#fff}
.related{margin-top:2.5rem} .related h2{border-bottom:none; margin-bottom:.5rem} .related a{display:block; margin-bottom:.5rem; color:var(--accent)}

footer{background:var(--ink-950); color:var(--tx-mut); padding:2rem 0; font-size:.88rem; text-align:center; border-top:1px solid var(--line)}
footer a{color:var(--tx-body)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none !important}}