@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/classic/fonts/Roboto.woff2) format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/classic/fonts/RobotoSlab.woff2) format('woff2'); }
/* Classic look: the old GuiajandoV02 WordPress design, rebuilt without WordPress. */
:root { --red: #de1f0d; --btn: #ca261e; --grey: #f2f2f2; --text: rgba(0,0,0,.87); --muted: #666; --slab: "Roboto Slab", Georgia, serif; --sans: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html { background: var(--grey); }
body { margin: 0 0 0 40px; font: 400 16px/25px var(--sans); color: var(--muted); background: var(--grey); }
a { color: var(--red); }
img { max-width: 100%; height: auto; }

#strip { position: fixed; left: 0; top: 0; bottom: 0; width: 40px; background: #222; z-index: 10; }
#strip a { display: flex; align-items: center; justify-content: center; height: 40px; border-bottom: 1px solid #333; }
#strip svg { width: 16px; height: 16px; fill: #777; }
#strip a:hover svg { fill: #fff; }

header#top, #tabs, #page, #colophon { max-width: 1200px; margin: 0 auto; }
header#top { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0 0; min-height: 113px; }
#logo { flex-shrink: 0; }
#logo img { display: block; width: auto; height: 90px; }
#logo span { font: 700 28px/90px var(--slab); color: var(--text); text-decoration: none; }
.ad { text-align: center; }
.ad.mobile { display: none; }
#mbar, #guide-close { display: none; }

#tabs { display: flex; gap: 0; padding-top: 0; }
#tabs a { position: relative; flex: 0 1 240px; display: block; height: 40px; margin-top: 0; padding: 0 24px 0 5px; font: 700 16px/40px var(--sans); color: #fff; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
#tabs a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); border-radius: 10px 10px 0 0; box-shadow: inset 0 -3px 3px rgba(0,0,0,.05); transform: perspective(5px) rotateX(.93deg) translateZ(-1px); transform-origin: 0 0; }
#tabs a.current { color: var(--red); }
#tabs a.current::after { background: #fff; box-shadow: none; }
#tabs a span { position: relative; top: 4px; }

#page { display: grid; grid-template-columns: 200px 620px 300px; column-gap: 40px; justify-content: space-between; background: #fff; padding: 20px 0 40px; }

#guide { padding-left: 16px; }
.guide-title { margin: 0 0 14px; font: 400 26px/28px var(--slab); color: var(--text); }
.guide-title svg { width: 22px; height: 22px; fill: var(--text); vertical-align: -2px; transform: rotate(45deg); }
#guide ul { list-style: none; margin: 0; padding: 0; }
#guide > ul:not(.plan) > li { position: relative; margin: 0 0 7.6px; padding-left: 20px; font: 700 15.2px/18.24px var(--sans); }
#guide > ul:not(.plan) > li::before, #guide li li::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 12px; background: #aaa; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2a23.9 23.9 0 0133.9 0L441 239a23.9 23.9 0 010 33.9L246.6 467.3a23.9 23.9 0 01-33.9 0l-22.2-22.2a24 24 0 01.4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2a23.9 23.9 0 01-.4-34.3z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2a23.9 23.9 0 0133.9 0L441 239a23.9 23.9 0 010 33.9L246.6 467.3a23.9 23.9 0 01-33.9 0l-22.2-22.2a24 24 0 01.4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2a23.9 23.9 0 01-.4-34.3z'/%3E%3C/svg%3E") center/contain no-repeat; }
#guide li a { color: var(--red); text-decoration: none; }
#guide li.current > a { color: var(--text); font-size: 16px; }
#guide li.current::before { background: var(--text); }
#guide li ul { margin: 7px 0 0; }
#guide li li { position: relative; margin: 0 0 6px; padding-left: 16px; font: 700 14.44px/17.33px var(--sans); }
#guide li li::before { width: 8px; height: 10px; top: 4px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.5 273L91.1 467.3a24 24 0 01-33.9 0l-22.7-22.7a24 24 0 010-33.9L188.5 256 34.5 101.3a24 24 0 010-33.9l22.7-22.7a24 24 0 0133.9 0L285.5 239a24 24 0 010 34z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.5 273L91.1 467.3a24 24 0 01-33.9 0l-22.7-22.7a24 24 0 010-33.9L188.5 256 34.5 101.3a24 24 0 010-33.9l22.7-22.7a24 24 0 0133.9 0L285.5 239a24 24 0 010 34z'/%3E%3C/svg%3E"); }
#guide li li.current > a { font-size: 15px; }
.plan-title { margin: 30px 0 4px -16px; font: 700 16px/25px var(--sans); color: var(--muted); }
#guide ul.plan li { margin: 0 0 4px 20px; font: 400 15px/21px var(--slab); }
#guide ul.plan li svg { width: 15px; height: 15px; fill: var(--muted); vertical-align: -2px; margin-right: 4px; }

#breadcrumbs { margin: 0 0 3px; padding-top: 6px; font: 400 15px/20px var(--sans); color: var(--text); }
#breadcrumbs a { font-weight: 700; font-style: italic; color: var(--red); }
#breadcrumbs span { font-style: normal; }
#main h1 { margin: 0; font: 400 45px/48px var(--slab); color: rgba(0,0,0,.54); }
.entry { font: 400 15px/20px var(--slab); color: var(--text); }
.entry p { margin: 0 0 12px; }
.entry a { font-weight: 700; color: var(--red); }
.entry strong, .entry b { color: var(--text); }
.entry h2 { margin: 12.5px 0 12px; padding-top: 8px; font: 400 34px/40px var(--slab); color: rgba(0,0,0,.54); }
.entry h3 { margin: 12.5px 0 12px; padding-top: 16px; font: 400 30px/32px var(--slab); color: var(--text); }
.entry h4 { margin: 12px 0 8px; font: 700 20px/26px var(--slab); color: var(--text); }
.entry ul, .entry ol { padding-left: 25px; font-size: 16px; line-height: 25px; color: var(--muted); }
.entry hr { margin: 25px 0; border: 0; border-top: 2px solid #eee; }
.entry img { display: block; }
.entry .wp-caption, .entry .aligncenter { margin: 0 auto 25px; max-width: 100%; }
.entry .wp-caption-text, .entry figcaption { margin: 0 0 3px; padding-top: 6px; font: 400 12px/20px var(--slab); color: #999; }
.entry .alignleft { float: left; margin: 4px 20px 10px 0; }
.entry .alignright { float: right; margin: 4px 0 10px 20px; }
.entry table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.entry td, .entry th { border: 1px solid #e5e5e5; padding: 6px 8px; vertical-align: top; }
.entry iframe { max-width: 100%; }
.entry p > a[style], .entry .boton, .entry a.button { display: inline-block; padding: 5px 15px; border-radius: 5px; background: var(--btn); color: #fff !important; text-decoration: none; box-shadow: 0 2px 0 #8c1a14; }
.entry::after { content: ""; display: table; clear: both; }

#sidebar .booking { position: sticky; top: 20px; padding: 16px; background: #eaeaea; font: 13px/1.2 Arial, Helvetica, sans-serif; color: #000; }
.booking-title { margin: 0 0 16px; font-size: 19px; color: #003580; }
.booking label { display: block; margin-bottom: 12px; color: #000; }
.booking input[type=text], .booking input[type=date] { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 0; background: #fff; font: 13px Arial, sans-serif; color: #003580; }
.booking .dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.booking .dates input { min-width: 0; padding: 10px 6px; }
.booking button { display: block; margin: 4px 0 18px auto; padding: 8px 20px; border: 0; background: #ed1c24; color: #fff; font: 700 18px Arial, sans-serif; cursor: pointer; box-shadow: 0 2px 2px rgba(0,0,0,.3); }
.booking-logo { margin: 0; text-align: right; font: 700 22px Arial, sans-serif; letter-spacing: -.5px; color: #003580; }

#colophon { background: #fff; }
.ad-footer { padding: 25px 0; }
#colophon .info { display: flex; align-items: flex-start; gap: 20px; padding: 12px 15px 18px; background: var(--grey); font: 400 12px/20px var(--sans); color: #aaa; }
#colophon .contacts { flex: 1; }
#colophon .contacts p { margin: 0; }
#colophon .info > p { margin: 0; padding-top: 6px; font-size: 15px; color: var(--text); order: 0; }
#colophon .info img { order: 1; width: 90px; height: 90px; }
#colophon a { font-weight: 700; color: var(--red); text-decoration: none; }

@media (max-width: 1240px) {
  header#top, #tabs, #page, #colophon { margin: 0 16px; }
  #page { grid-template-columns: 200px minmax(0, 1fr) 260px; column-gap: 24px; }
}
/* the 728px header and 970px footer units don't fit below this: use the responsive mobile unit */
@media (max-width: 1040px) {
  .ad.desktop { display: none; }
  .ad.mobile { display: block; flex: 1; min-width: 0; margin-left: 20px; }
}
@media (max-width: 960px) {
  #page { grid-template-columns: 180px minmax(0, 1fr); }
  #sidebar { grid-column: 2; }
}
@media (max-width: 760px) {
  body { margin: 0; }
  #strip { display: none; }
  /* dark top bar like the old WordPress mobile theme: menu button + guide name, stays on top */
  #mbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; height: 48px; padding: 0 12px 0 0; background: #222; }
  #menu-btn { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 0; border-right: 1px solid #333; background: none; color: #fff; font: 700 15px var(--sans); cursor: pointer; }
  #menu-btn svg { width: 22px; height: 22px; fill: var(--red); }
  #mbar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 17px var(--slab); color: #ddd; text-decoration: none; }
  header#top, #tabs, #page, #colophon { margin: 0; }
  header#top { flex-direction: column; align-items: center; min-height: 0; padding: 12px 16px 0; }
  #logo img { height: 64px; width: auto; }
  .ad.mobile { width: 100%; margin: 10px 0 0; }
  /* main menu: a flat red band of pills instead of the desktop folder tabs */
  #tabs { flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; padding: 12px; background: var(--red); }
  #tabs a { flex: 0 1 auto; height: auto; padding: 7px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font: 700 14px/18px var(--sans); }
  #tabs a::after { display: none; }
  #tabs a span { top: 0; }
  #tabs a.current { background: #fff; border-color: #fff; color: var(--red); }
  #page { display: flex; flex-direction: column; padding: 16px 16px 30px; }
  #main { order: 1; }
  #sidebar { order: 2; margin-top: 30px; }
  #sidebar .booking { position: static; }
  /* the guide menu becomes a drawer opened from #menu-btn */
  #guide { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(85vw, 330px); padding: 20px 20px 40px; overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: 2px 0 16px rgba(0,0,0,.25); transform: translateX(-105%); transition: transform .25s ease; visibility: hidden; }
  .menu-open #guide { transform: none; visibility: visible; }
  .menu-open { overflow: hidden; }
  .menu-open::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45); }
  #guide-close { display: block; position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; font: 400 30px/40px var(--sans); color: var(--muted); cursor: pointer; }
  .guide-title { padding-right: 40px; }
  #guide > ul:not(.plan) > li { margin-bottom: 0; font-size: 16px; line-height: 20px; }
  #guide li a { display: block; padding: 8px 0; }
  #guide li li { margin-bottom: 0; }
  #guide > ul:not(.plan) > li::before { top: 12px; }
  #guide li li::before { top: 13px; }
  #guide ul.plan li { display: flex; align-items: center; gap: 4px; }
  .plan-title { margin-left: 0; }
  #main h1 { font-size: 34px; line-height: 38px; }
  .entry h2 { font-size: 27px; line-height: 32px; }
  .entry h3 { font-size: 23px; line-height: 27px; }
  .entry .alignleft, .entry .alignright { float: none; margin: 0 auto 16px; }
  #colophon .info { flex-wrap: wrap; }
}