/* Paleta real del tema "unitravel" (activo en quitoguesthouse.com), extraída de
   wp-content/themes/unitravel/css/__colors.css el 2026-10-22: coral/dorado, no
   verde (ese era el esquema de tours-unlimited-django, copiado por error). */
:root {
  --brand: #fe7259;
  --brand-dark: #e85a40;
  --accent: #fcb040;
  --ink: #4b5664;
  --ink-strong: #1d1d1d;
  --muted: #818892;
  --bg: #faf9f5;
  --card: #ffffff;
  --border: #e5e5e5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Lato", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

/* 1170px = el ancho de contenido real del tema "unitravel" (confirmado por el
   atributo sizes="(max-width: 1170px) 100vw, 1170px" de las imágenes del tema
   en el HTML en vivo). */
.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 16px;
}
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.site-header {
  background: #fff;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 12px;
}

.brand { display: inline-flex; align-items: center; }
.brand img { height: 140px; width: auto; display: block; }

.partner-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
  margin-right: auto;
  margin-left: 16px;
  padding: 8px 16px;
  border-radius: 50px;
  background: rgba(254, 114, 89, .08);
  border: 1px solid rgba(254, 114, 89, .3);
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  white-space: nowrap;
}
.partner-link i { font-size: 0.95rem; }
.partner-link:hover {
  background: rgba(254, 114, 89, .16);
  border-color: var(--brand);
  transform: translateY(-1px);
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}

.main-nav a {
  color: var(--ink-strong);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.main-nav a:hover { color: var(--brand); text-decoration: none; }

.pay-now-link {
  background: var(--brand);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 4px;
}
.pay-now-link:hover { color: #fff !important; background: var(--brand-dark); }

.dropdown { position: relative; }

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border-radius: 6px;
  overflow: hidden;
  z-index: 10;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }

.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  color: var(--ink) !important;
}

.dropdown-menu a:hover { background: var(--bg); text-decoration: none; }

main.container { padding-top: 28px; padding-bottom: 48px; min-height: 60vh; }

h1, h2, h3 { color: var(--ink-strong); text-transform: uppercase; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fde68a;
  color: #7a5b00;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover { background: var(--brand-dark); }

table.rates { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.rates th, table.rates td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }

form.contact-form label { display: block; margin-top: 12px; font-weight: 600; }
form.contact-form input, form.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
  font-family: inherit;
}

ul.messages { list-style: none; padding: 0; }
ul.messages .message { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
ul.messages .success { background: #d1fae5; color: #065f46; }
ul.messages .error { background: #fee2e2; color: #991b1b; }

.site-footer {
  background: var(--ink-strong);
  color: #cfd2d6;
  padding: 24px 0;
  margin-top: 40px;
}

.site-footer a { color: var(--accent); }
.footer-link-tree-btn { display: inline-block; margin-top: 12px; }

.contact-link-tree-cta { text-align: center; margin: 24px 0 40px; }
.contact-link-tree-cta .btn { padding: 14px 32px; font-size: 1.1rem; }

.review-flag { color: #b45309; font-size: 0.85rem; }

/* Sección "Also a member of": todos los logos comparten el mismo alto y el mismo
   centro vertical; el ancho sale del aspect ratio de cada imagen. Cambiar --logo-h
   ajusta el alto de todos a la vez. */
.members { margin-top: 40px; --logo-h: 170px; background: #fff; padding: 20px; border-radius: 8px; }
.members-title { color: var(--muted); font-size: 1.1rem; margin-bottom: 12px; }
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 32px;
}
.logo-row a { display: flex; align-items: center; }
.logo-row img { height: var(--logo-h); width: auto; max-width: 100%; object-fit: contain; }
.logo-row a[href] img { cursor: pointer; }
@media (max-width: 720px) {
  .logo-row img { height: auto; max-height: 110px; }
}

/* ============================================================
   Home — réplica 1:1 de la estructura real de quitoguesthouse.com
   (tema "unitravel", página ID 91), extraída vía WP-CLI + lectura
   directa del HTML/CSS en vivo el 2026-10-22. Mismo orden de
   secciones, mismos textos, mismas imágenes, mismos colores de
   fondo que el WPBakery original. El slider ([rev_slider_vc]) y
   los testimonios ([trx_sc_testimonials]) están rotos en el sitio
   real también (shortcode crudo sin renderizar) -- no se migran,
   porque no hay nada real que migrar.
   ============================================================ */

.whatsapp-btn { background: #25d366; }
.whatsapp-btn:hover { background: #1eb457; }
.whatsapp-btn.small { padding: 6px 16px; font-size: .9rem; }

.script-heading {
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink-strong);
  font-size: 1.857rem;
  margin: 0;
  padding: 50px 0;
}

/* Fila "About The Quito Guest House": 2 columnas, izquierda con los 4
   bloques ícono+texto y la lista EXCLUSIVE SERVICES, derecha una foto
   decorativa a sangre (oculta en mobile, como en el original). */
.about-row { display: grid; grid-template-columns: 6fr 6fr; gap: 0; margin-bottom: 60px; }
.about-row .about-photo {
  background-size: cover;
  background-position: center;
}
@media (max-width: 900px) { .about-row { grid-template-columns: 1fr; } .about-row .about-photo { display: none; } }

.icon-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-bottom: 20px; }
@media (max-width: 600px) { .icon-pairs { grid-template-columns: 1fr; } }
.icon-pair h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; margin: 0 0 8px; text-transform: none;
}
.icon-pair h3 i { color: var(--brand); font-size: 1.3rem; }
.icon-pair p { color: var(--ink); margin: 0 0 24px; }

.exclusive-services-label { text-align: center; text-decoration: underline; margin: 10px 0 14px; font-weight: 700; }
.exclusive-services-list { list-style: disc; padding-left: 22px; margin: 0; text-transform: uppercase; font-size: .92rem; }
.exclusive-services-list li { margin-bottom: 8px; }

/* Fila carrusel (izq) + "Our rooms and communal areas" (der), fondo gris
   claro como el original (#f8f8f8). */
.carousel-row {
  background: #f8f8f8;
  padding: 40px 0;
  margin-bottom: 0;
}
.carousel-row .row-inner { display: grid; grid-template-columns: 6fr 6fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .carousel-row .row-inner { grid-template-columns: 1fr; } }

.photo-carousel { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; background: #000; }
.photo-carousel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
.photo-carousel img.active { opacity: 1; }
.photo-carousel .carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.85); border: none; width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; font-size: 1.1rem; color: var(--ink-strong);
  z-index: 2;
}
.photo-carousel .carousel-arrow.prev { left: 10px; }
.photo-carousel .carousel-arrow.next { right: 10px; }

.room-icon-list { list-style: none; padding: 0; margin: 10px 0 0; }
.room-icon-list li { padding-left: 24px; position: relative; margin-bottom: 8px; }
.room-icon-list li::before { content: "✓"; color: var(--brand); position: absolute; left: 0; font-weight: 700; }

/* Fila "Discover Quito and surroundings": fondo navy (#212a42) como el
   original, texto blanco, ícono+texto a la izquierda, foto a sangre a la
   derecha (oculta en mobile). */
.discover-band { background: #212a42; color: #fff; padding: 50px 0; }
.discover-band .row-inner { display: grid; grid-template-columns: 6fr 6fr; gap: 40px; align-items: stretch; }
@media (max-width: 900px) { .discover-band .row-inner { grid-template-columns: 1fr; } }
.discover-band h3 { color: #fff; text-align: left; margin: 0 0 10px; }
.discover-band .intro { color: #fff; font-weight: 400; margin-bottom: 24px; }
.discover-item { display: flex; gap: 16px; margin-bottom: 22px; }
.discover-item img { width: 50px; height: 50px; flex: none; }
.discover-item h6 { color: #fff; margin: 0 0 6px; text-transform: uppercase; font-size: .95rem; }
.discover-item p { color: #d8dce3; margin: 0; font-size: .92rem; }
.discover-band .discover-photo {
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  min-height: 320px;
}
@media (max-width: 900px) { .discover-band .discover-photo { display: none; } }

/* Pestañas de detalle de tour (Itinerario/Incluye/No incluye/Precios),
   réplica del widget de pestañas del sitio original. Solo CSS, sin JS:
   un radio oculto por pestaña + :checked selecciona su panel. */
.tabset { margin-bottom: 24px; }
.tabset .tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tabset .tab-labels {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.tabset .tab-labels label {
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tabset .tab-panel { display: none; }
.tabset .tab-panel ul { margin: 0; padding-left: 20px; }

/* Habitaciones: precio, selector de ocupacion/estadia larga, calendario. */
.room-price { font-size: 1.3rem; font-weight: 700; color: var(--brand-dark); }
.room-price .unit { font-size: 0.9rem; font-weight: 400; color: var(--muted); }

.booking-form fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.booking-form legend { font-weight: 700; color: var(--brand-dark); padding: 0 4px; }
.booking-form label.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-weight: 400;
  cursor: pointer;
}
.booking-form input[type="date"],
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
  font-family: inherit;
}
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .date-row { grid-template-columns: 1fr; } }

.blocked-dates-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 6px;
}

.checkout-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.checkout-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.checkout-summary dt { color: var(--muted); }
.checkout-summary dd { margin: 0; font-weight: 600; }
.checkout-total { font-size: 1.4rem; color: var(--brand-dark); }

#paypal-error { color: #991b1b; margin-top: 10px; display: none; }

/* ============================================================
   Banda de título de página (header "Rooms" / "Contáctanos" + breadcrumb
   Home > X), presente en todas las páginas internas del tema real (no en
   el home). */
.page-title-band { background: #f3f4f1; padding: 40px 0; margin-bottom: 40px; text-align: center; }
.page-title-band h1 { margin: 0 0 8px; }
.page-title-band .breadcrumbs { color: var(--muted); font-size: .9rem; }
.page-title-band .breadcrumbs a { color: var(--muted); }
.page-title-band .breadcrumbs .current { color: var(--brand); }

/* Página Rooms: réplica de las filas alternadas foto/texto del WPBakery
   real (imagen - texto - imagen - texto), con "Price per night for one
   person / for couple" y botón "See Room N". */
.room-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 50px; }
.room-row.reverse > :first-child { order: 2; }
.room-row img { width: 100%; border-radius: 4px; display: block; }
.room-row .room-copy h2 { text-align: left; margin-bottom: 14px; }
.room-row .room-copy .room-intro { color: var(--ink); margin-bottom: 14px; }
.room-row .room-copy .room-prices p { margin: 4px 0; }
.room-row .room-copy .room-prices .price { color: var(--accent); font-weight: 700; }
.room-row .room-copy .btn { margin-top: 10px; }
@media (max-width: 800px) {
  .room-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .room-row.reverse > :first-child { order: 0; }
}

.longstay-band { background: var(--brand); color: #fff; padding: 50px 0; margin: 10px 0 50px; }
.longstay-band.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.longstay-band h2 { color: var(--accent); text-align: center; }
.longstay-band .intro { color: #fff; text-align: center; margin-bottom: 30px; }
.longstay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 700px) { .longstay-grid { grid-template-columns: 1fr 1fr; } }
.longstay-grid a { display: block; }
.longstay-grid img { width: 100%; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); display: block; }
.longstay-grid .longstay-label { color: #fff; text-align: center; font-size: .85rem; margin-top: 6px; }

.contact-cta-band { text-align: center; padding: 30px 0 10px; }

/* Contacto: botones directos (como el link-tree de tours-unlimited-django)
   en vez de formulario -- el sitio real tampoco tiene formulario, solo
   WhatsApp/email + mapa. */
.email-btn { background: var(--ink-strong); }
.email-btn:hover { background: #000; }

/* Sección de contacto estilo "Linktree" real (2026-10-27): foto de fondo +
   degradado de marca a pantalla completa, avatar circular y botones pill
   flotantes con efecto vidrio -- inspirado en el diseño de referencia de
   linktree.com. El background-image va inline en el template (ver nota de
   DJANGO_URL_PREFIX sobre rutas /static/ en CSS), acá solo el degradado. */
.link-tree-section {
  position: relative;
  padding: 64px 16px 76px;
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.link-tree-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(254, 114, 89, .90), rgba(29, 29, 29, .88));
  z-index: 0;
}
.link-tree-section > * { position: relative; z-index: 1; }
.link-tree-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, .95);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  margin: 0 auto 18px;
  display: block;
}
.link-tree-handle {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.link-tree-tagline {
  margin: 6px 0 30px;
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.link-tree {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}
.link-tree-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 50px;
  padding: 14px 22px;
  text-decoration: none;
  color: var(--ink-strong);
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.link-tree-btn:hover {
  transform: translateY(-3px) scale(1.015);
  background: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}
.link-tree-btn .lt-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
}
.link-tree-btn.whatsapp .lt-icon { background: #25d366; }
.link-tree-btn.facebook .lt-icon { background: #1877f2; }
.link-tree-btn.instagram .lt-icon {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.link-tree-btn.email .lt-icon { background: var(--ink-strong); }
.link-tree-btn.sister .lt-icon { background: var(--brand); }

.map-embed { margin: 30px 0 0; border-radius: 6px; overflow: hidden; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* Blog: 2 posts reales (los únicos que no eran spam/duplicados en la
   auditoría WP-CLI), tarjeta con foto (si tiene) + meta + "Learn more",
   como el tema real. */
.blog-list { display: flex; flex-direction: column; gap: 30px; max-width: 760px; margin: 0 auto; }
.blog-card { display: flex; gap: 20px; align-items: flex-start; }
.blog-card-thumb { flex: none; width: 220px; display: block; border-radius: 6px; overflow: hidden; }
.blog-card-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.blog-card-body h3 { margin: 0 0 6px; text-align: left; }
.blog-card-meta { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.more-link { color: var(--brand); font-weight: 700; text-decoration: none; }
.more-link:hover { text-decoration: underline; }
@media (max-width: 600px) { .blog-card { flex-direction: column; } .blog-card-thumb { width: 100%; } }

.blog-post-body { max-width: 760px; margin: 0 auto; }
.blog-post-body p, .blog-post-body div { margin-bottom: 1em; }
.blog-post-body ul { padding-left: 22px; }

/* Documento embebido (PDF del post "The Quito Guest House Team"), como el
   visor de Google Docs que usa el plugin "Embed Any Document" en el sitio
   real -- antes esto era solo un link de texto, perdía el preview. */
.ead-preview { margin: 20px 0; }
.ead-iframe { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--border); border-radius: 6px; display: block; }
.embed_download { text-align: center; margin-top: 10px; }
.embed_download a { color: var(--brand); font-weight: 700; text-decoration: none; }
.embed_download a:hover { text-decoration: underline; }

/* Spanish Programs: 3 íconos circulares centrados, como el real. */
.icon-card-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; text-align: center; margin: 20px 0; }
.icon-card i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 70px; border-radius: 50%; background: #f1f1ef;
  color: var(--brand); font-size: 1.8rem; margin-bottom: 12px;
}
.icon-card p { margin: 0; }
.icon-card a { color: var(--ink-strong); text-decoration: none; }

/* Online Classes: banda con imagen de fondo real (tecno.png) y texto blanco. */
.online-band {
  background-size: cover;
  background-position: center;
  background-color: #1d1d1d;
  color: #fff;
  padding: 50px 0;
  margin-bottom: 10px;
  text-align: center;
}
.online-band h2 { color: var(--accent); }
.online-band p { color: #fff; }
.online-band .online-price { color: var(--accent); font-weight: 700; margin: 20px 0; }