/* Reisetipps Mexiko — responsive editorial redesign */
:root {
  color-scheme: light;
  --rm-ink: #183b38;
  --rm-muted: #5b6c67;
  --rm-green: #174f46;
  --rm-green-dark: #103b35;
  --rm-sand: #f7f5ef;
  --rm-paper: #fffefa;
  --rm-line: #e4e2d8;
  --rm-coral: #d76b50;
  --rm-radius: 16px;
  --rm-shadow: 0 12px 32px rgba(24,59,56,.08);
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin:0!important; padding:0!important; background:var(--rm-sand)!important; color:var(--rm-ink)!important; font:16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif!important; }
#sqrouterbox { width:100%!important; max-width:1600px!important; margin:0 auto!important; border:0!important; background:var(--rm-paper)!important; box-shadow:0 0 60px rgba(24,59,56,.08); overflow:clip; }
#navcontainer { display:block!important; width:100%!important; box-sizing:border-box!important; }
.sqrnavbar { display:none!important; }
.sqrnav { display:block!important; position:relative; z-index:50; width:100%!important; padding:0!important; background:var(--rm-green-dark)!important; color:#fff!important; text-transform:none!important; font:500 14px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif!important; letter-spacing:0!important; box-shadow:0 5px 18px rgba(14,49,43,.13); }
.sqrnav::before { content:"REISETIPPS  ·  MEXIKO"; display:block; max-width:1200px; margin:0 auto; padding:19px 28px 13px; color:#fff; font-size:20px; font-weight:750; letter-spacing:.035em; }
.sqrnav > ul { display:flex!important; align-items:stretch; gap:4px; max-width:1200px; margin:0 auto!important; padding:0 20px 10px!important; }
.sqrnav > ul > li { position:relative; flex:0 0 auto; }
.sqrnav > ul > li.sqrnavhome { display:none!important; }
.sqrnav a, .sqrnav li li a { display:block; padding:11px 13px!important; border-radius:9px; background:transparent!important; color:#f5faf6!important; text-decoration:none!important; font-weight:600; }
.sqrnav a:hover, .sqrnav a:focus-visible, .sqrnav .active>a { background:rgba(255,255,255,.13)!important; color:#fff!important; outline-offset:2px; }
.sqrnav li li a { padding:10px 15px!important; border-radius:0; color:var(--rm-ink)!important; }
.sqrnav li li a:hover, .sqrnav li li a:focus-visible, .sqrnav li li.active>a { background:#edf3ed!important; color:var(--rm-green-dark)!important; }
.sqrnav > ul > li > ul { display:none!important; position:absolute; z-index:60; top:100%; left:0; min-width:240px; max-height:min(72vh,560px); overflow:auto; padding:8px!important; border:1px solid var(--rm-line); border-radius:12px; background:var(--rm-paper)!important; box-shadow:var(--rm-shadow); text-transform:none; }
.sqrnav > ul > li:hover > ul, .sqrnav > ul > li:focus-within > ul, .sqrnav > ul > li.sqrnavopen > ul { display:block!important; }
.sqrnav li li { position:relative; }
.sqrnav li li ul { display:none!important; position:absolute; z-index:61; left:100%; top:0; min-width:220px; max-height:min(72vh,560px); overflow:auto; padding:8px!important; border:1px solid var(--rm-line); border-radius:12px; background:var(--rm-paper)!important; box-shadow:var(--rm-shadow); }
.sqrnav li li:hover>ul, .sqrnav li li:focus-within>ul, .sqrnav li li.sqrnavopen>ul { display:block!important; }
.sqrnav .sqrnavmore>div { width:42px!important; height:42px!important; }
.sqrsearchbar { display:block!important; position:absolute; z-index:70; top:17px; right:max(calc((100% - 1200px)/2 + 24px),24px); width:min(230px,24vw); }
.sqrsearchbar form { margin:0!important; border:0!important; border-radius:999px; background:rgba(255,255,255,.12)!important; }
.sqrsearchbar input { width:100%!important; min-height:42px; padding:10px 16px!important; border:1px solid rgba(255,255,255,.3)!important; border-radius:999px; background:rgba(255,255,255,.12)!important; color:#fff!important; font:500 14px system-ui,sans-serif!important; }
.sqrsearchbar input::placeholder { color:rgba(255,255,255,.8); }
#maincontainer { display:block!important; width:100%!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; padding:0!important; background:var(--rm-paper)!important; }
#sqreyecatcher { max-height:390px; overflow:hidden; background:#dbe8de; }
#sqreyecatcher img { display:block; width:100%!important; max-height:390px; object-fit:cover; object-position:center 48%; }
#sqrbreadcrumbs { max-width:1160px; margin:0 auto; padding:20px 28px 4px!important; background:transparent!important; color:var(--rm-muted)!important; font-size:13px!important; }
#sqrbreadcrumbs a { color:var(--rm-green)!important; text-decoration:none; }
#sqrbreadcrumbs a:hover { text-decoration:underline; }
#main { display:block!important; width:auto!important; max-width:1160px; min-width:0!important; margin:0 auto!important; padding:20px 28px 64px!important; box-sizing:border-box!important; }
#content, #sidebarleft, #sidebarright { display:block!important; float:none!important; position:static!important; width:auto!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; box-sizing:border-box!important; }
#content { color:var(--rm-ink)!important; }
.sqrallwaysboxed, .sqrdesktopboxed, .sqrmobileboxed { width:auto!important; max-width:980px; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; box-sizing:border-box!important; }
.sqrallwaysfullwidth { width:auto!important; max-width:1080px; margin:32px auto!important; padding:26px 30px!important; border:1px solid var(--rm-line); border-radius:var(--rm-radius); background:#f4f6ef; box-sizing:border-box!important; }
#main h1 { max-width:24ch; margin:8px auto 22px!important; color:var(--rm-green-dark)!important; font-size:clamp(2rem,4vw,3.4rem)!important; line-height:1.12!important; letter-spacing:-.035em; }
#main h2 { margin:2.2em auto .7em!important; color:var(--rm-green)!important; font-size:clamp(1.45rem,2.5vw,2rem)!important; line-height:1.25!important; letter-spacing:-.02em; }
#main h3 { margin:1.7em auto .55em!important; color:var(--rm-ink)!important; font-size:1.25rem!important; line-height:1.3!important; }
#main p, #main li { color:#334944; }
#main p { margin:0 0 1.1em; }
#main a:not(.ngparastickybutton) { color:#17685b; text-underline-offset:3px; }
#main a:hover { color:#a84938; }
#main img { max-width:100%; height:auto; border-radius:12px; }
#main figure { margin:1.5rem 0; }
#main figcaption { color:var(--rm-muted); font-size:.9rem; }
#main blockquote { margin:1.5rem 0; padding:1rem 1.4rem; border-left:4px solid var(--rm-coral); border-radius:0 12px 12px 0; background:#f8f1eb; }
#main table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; border-spacing:0; }
#main th, #main td { padding:.7rem .8rem; border:1px solid var(--rm-line); text-align:left; vertical-align:top; }
#main th { background:#edf3ed; color:var(--rm-green-dark); }
#main .paragraphborder_default, #main .blog-card, #main .blog-panel { border:1px solid var(--rm-line)!important; border-radius:var(--rm-radius)!important; background:#fff!important; box-shadow:var(--rm-shadow); }
#main .ngparaproslider { border-radius:var(--rm-radius); overflow:hidden; }
#main .ngparapanotext { border-radius:var(--rm-radius); }
#main .sqrallwaysfullwidth:has(.ngparapanotextgrow:empty) { display:none!important; }
#main .ngparastickybutton { border:0!important; border-radius:999px!important; background:var(--rm-green)!important; box-shadow:0 8px 24px rgba(16,59,53,.24); }
.blog-card,.blog-panel { border:1px solid var(--rm-line)!important; border-radius:var(--rm-radius)!important; padding:1.25rem!important; background:#fff!important; box-shadow:var(--rm-shadow); }
.blog-article { max-width:74ch!important; margin-inline:auto!important; line-height:1.8!important; }
.blog-recent { padding:1.25rem!important; border:1px solid var(--rm-line); border-radius:var(--rm-radius); background:#f2f5ef!important; }
.sqrcommon { padding:36px 28px 20px!important; border-top:1px solid var(--rm-line); background:#f2f4ef!important; color:var(--rm-muted)!important; font-size:14px!important; }
.sqrfootertext { max-width:1100px; margin:0 auto!important; color:var(--rm-muted)!important; }
.sqrfootertext p { margin:.4rem 0!important; line-height:1.7; }
.sqrfootertext a { color:var(--rm-green)!important; }
.ngcookiewarning { left:50%!important; right:auto!important; bottom:20px!important; width:min(720px,calc(100% - 32px))!important; padding:22px!important; transform:translateX(-50%); border:1px solid var(--rm-line); border-radius:18px!important; background:var(--rm-paper)!important; color:var(--rm-ink)!important; box-shadow:0 18px 64px rgba(13,38,34,.22)!important; }
.ngcookiewarning button, .ngcookiewarning .ngcookiewarningsettings { border:0!important; border-radius:999px!important; padding:12px 18px!important; background:var(--rm-green)!important; color:#fff!important; box-shadow:none!important; font:650 14px system-ui,sans-serif!important; text-transform:none!important; }
.ngcookiewarning button:hover { background:var(--rm-green-dark)!important; }
.skip-link { position:fixed; z-index:9999; top:8px; left:8px; padding:10px 16px; transform:translateY(-150%); border-radius:8px; background:#fff; color:var(--rm-green-dark); box-shadow:var(--rm-shadow); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid #e59559!important; outline-offset:3px!important; }
@media (max-width:900px) {
  .sqrsearchbar { top:15px; right:18px; width:200px; }
  .sqrnav::before { padding:16px 20px 12px; font-size:18px; }
  .sqrnav > ul { gap:0; padding:0 12px 8px!important; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin; }
  .sqrnav > ul > li { flex:0 0 auto; }
  .sqrnav a { padding:10px 11px!important; font-size:13px; }
  #sqreyecatcher, #sqreyecatcher img { max-height:300px; }
  #main { padding:18px 22px 48px!important; }
}
@media (max-width:620px) {
  #sqrouterbox { box-shadow:none; }
  .sqrnav::before { padding:16px 16px 60px; font-size:17px; }
  .sqrsearchbar { top:54px; left:12px; right:12px; width:auto; }
  .sqrsearchbar input { min-height:38px; }
  .sqrnav > ul { padding:0 10px 8px!important; }
  .sqrnav > ul > li > ul { position:fixed!important; top:auto!important; left:8px!important; right:8px!important; min-width:0!important; max-height:65vh!important; }
  .sqrnav li li ul { position:static!important; min-width:0!important; max-height:none!important; margin-left:12px!important; box-shadow:none!important; }
  #sqreyecatcher, #sqreyecatcher img { max-height:220px; }
  #sqrbreadcrumbs { padding:15px 18px 0!important; }
  #main { padding:14px 18px 40px!important; }
  #main h1 { font-size:2rem!important; }
  .sqrallwaysfullwidth { margin:24px 0!important; padding:20px!important; }
  .sqrcommon { padding:26px 18px!important; }
  .ngcookiewarning { bottom:8px!important; width:calc(100% - 16px)!important; padding:16px!important; }
  .ngcookiewarning button, .ngcookiewarning .ngcookiewarningsettings { padding:11px!important; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
/* Flatten the archived three-column template into one reading column. */
.sqrmain3collr, .sqrmain2coll, .sqrmain2colr { display:block!important; width:100%!important; max-width:100%!important; table-layout:auto!important; }
.sqrmain3collr>div, .sqrmain2coll>div, .sqrmain2colr>div { display:block!important; width:100%!important; max-width:100%!important; }
#sidebarleft, #sidebarright { display:none!important; }
#main .sqrallwaysboxed:has([id^="c24pp-"]), #main .sqrdesktopboxed:has([id^="c24pp-"]) { display:none!important; }
/* Prevent submenu toggles and legacy floating booking prompts from covering navigation. */
.sqrnav > ul > li.sqrnavmore > a { padding-right:48px!important; }
.sqrnav > ul > li.sqrnavmore > .sqrnavmore { right:0; }
.sqrnav > ul > li.sqrnavmore > div { right:0!important; width:42px!important; }
.ngparastickybutton { display:none!important; }
/* Keep every top-level link inside the header instead of clipping the last item. */
.sqrnav > ul { width:min(calc(100% - 40px),1500px)!important; max-width:1500px!important; box-sizing:border-box!important; flex-wrap:wrap!important; justify-content:flex-start!important; overflow:visible!important; }
.sqrnav > ul > li { flex:0 1 auto!important; }
@media (max-width:900px) {
  .sqrnav > ul { width:100%!important; max-width:100%!important; flex-wrap:nowrap!important; overflow-x:auto!important; }
}
/* Render archived image sliders as a resilient photo grid; no JS sizing race. */
#main .ngparaproslider { height:auto!important; overflow:visible!important; }
#main .ngparaproslider > ul { display:grid!important; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px; width:100%!important; height:auto!important; overflow:visible!important; position:static!important; margin:0!important; padding:0!important; }
#main .ngparaproslider > ul > li { display:flex!important; flex-direction:column; position:static!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; overflow:hidden; transform:none!important; border:1px solid var(--rm-line); border-radius:14px; background:#fff; box-shadow:var(--rm-shadow); }
#main .ngparaproslider > ul > li > img { display:block!important; width:100%!important; height:auto!important; aspect-ratio:3/2; object-fit:cover; opacity:1!important; border-radius:0!important; }
#main .ngparaproslider > ul > li > div { display:block!important; position:static!important; height:auto!important; padding:12px 14px; opacity:1!important; background:#fff; }
#main .ngparaproslider > ul > li h3 { margin:0 0 4px!important; font-size:1rem!important; }
#main .ngparaproslider > ul > li p { margin:0!important; font-size:.9rem; }
#main .ngparaprosliderprev, #main .ngparaproslidernext, #main .ngparaprosliderbullets { display:none!important; }
/* Disable CHECK24 affiliate widgets: they load a remote iframe with outbound offer links. */
.sqrallwaysboxed:has([id^="c24pp-"]), .sqrdesktopboxed:has([id^="c24pp-"]), .sqrmobileboxed:has([id^="c24pp-"]) { display:none!important; }
/* Remove legacy empty image placeholders and blank promotional panels. */
#main .ngparafloatingpictures:not(:has(img)):not(:has(iframe)):not(:has(video)) { display:none!important; height:0!important; padding:0!important; }
#main .sqrmobilefullwidth:has(.ngparafloatingpictures:not(:has(img)):not(:has(iframe)):not(:has(video))) { display:none!important; }
#main .sqrallwaysboxed:has(.ngparafloatingpictures:not(:has(img)):not(:has(iframe)):not(:has(video))) { display:none!important; }
#main .sqrallwaysfullwidth:has(.ngparapanotext) { display:none!important; }