/* Top10.mx - Premium theme */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700&display=swap');

:root {
  --color-bg: #080808;
  --color-surface: #0f0f0f;
  --color-surface-elevated: #161616;
  --color-text: #f5f5f0;
  --color-muted: #8a8a85;
  /* Slightly lighter than --color-muted: better contrast for long-form reading on small screens */
  --color-muted-elevated: #b8b8b0;
  --color-accent: #c9a227;
  --color-accent-soft: rgba(201, 162, 39, 0.15);
  --color-link: #d4af37;
  --color-link-hover: #e8c547;
  --color-border: #222;
  --color-border-subtle: #1a1a1a;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --max-width: 960px;
  --max-width-hub: 960px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px rgba(201, 162, 39, 0.08);
  --transition: 0.2s ease;
}

* {
  box-sizing: border-box;
}

/* Skip link - visible on focus for accessibility */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius);
  transition: top var(--transition);
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--color-link-hover);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle gradient overlay for depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(201, 162, 39, 0.06), transparent);
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

/* Header */
.site-header {
  background: rgba(12, 12, 12, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(201, 162, 39, 0.06);
  padding: 1.35rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-header .logo {
  flex-shrink: 0;
  margin-right: 1rem;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: opacity var(--transition);
  display: inline-flex;
  align-items: center;
}

.logo:hover {
  color: var(--color-text);
  opacity: 0.92;
}

.logo-img {
  display: block;
  height: 3.5rem;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.logo span {
  color: var(--color-accent);
  font-weight: 500;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.site-header nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  position: relative;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}

.site-header nav a:hover {
  color: var(--color-link);
  background: var(--color-accent-soft);
}

.site-header nav a:hover::after {
  opacity: 0;
}

.site-header nav a::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition);
  border-radius: 1px;
}

.site-header nav a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.nav-active {
  color: var(--color-accent) !important;
  background: var(--color-accent-soft);
}

.site-header nav a.nav-active::after {
  opacity: 0;
}

/* Primary nav dropdown (e.g. Destinos > Huasteca Potosina) */
.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-item > a {
  white-space: nowrap;
}

/* Arrow only when there is a real submenu (not plain “Viajes” link) */
.site-header .nav-item:has(.nav-dropdown) > a::after {
  content: '\25BE';
  display: inline-block;
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  background: none;
  font-size: 1em;
  opacity: 0.9;
  margin-left: 0.4em;
  vertical-align: 0.1em;
  transition: transform var(--transition, 0.2s ease);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -2px;
  padding-top: 6px;
  min-width: 260px;
  padding-right: 0.15rem;
  padding-bottom: 0.35rem;
  padding-left: 0.15rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  z-index: 20;
}

/* Submenu: slightly smaller type + nowrap so long destination names stay on one line */
.site-header .nav-dropdown a {
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 0.85rem;
  white-space: nowrap;
}

.nav-dropdown a {
  width: 100%;
  justify-content: flex-start;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: flex;
}

/* Hamburger button – hidden on desktop */
.nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
  background: var(--color-accent-soft);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.nav-toggle-inner {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background 0.2s;
}

.nav-toggle-inner::before,
.nav-toggle-inner::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease;
}

.nav-toggle-inner::before {
  top: -6px;
}

.nav-toggle-inner::after {
  top: 6px;
}

.site-header.is-open .nav-toggle-inner {
  background: transparent;
}

.site-header.is-open .nav-toggle-inner::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header.is-open .nav-toggle-inner::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Nav search - hidden on desktop, shown in mobile menu */
.nav-search {
  display: none;
}

/* Mobile: show hamburger, hide nav by default */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .site-header .container {
    flex-wrap: wrap;
  }

  /* Override .site-header nav so nav is hidden until hamburger opens */
  .site-header nav,
  .site-nav {
    display: none;
    width: 100%;
    order: 99;
    flex-basis: 100%;
    padding: 1.25rem 0 0.5rem;
    margin-top: 1rem;
    gap: 0;
    border-top: 1px solid var(--color-border);
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.98) 0%, rgba(8, 8, 8, 0.99) 100%);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    animation: navSlide 0.25s ease;
  }

  /* Mobile nav search */
  .site-header.is-open .nav-search {
    display: flex;
    margin: 0 0.75rem 1rem;
    padding: 0;
    gap: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
  }

  .nav-search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    background: transparent;
    border: none;
    color: var(--color-text);
    outline: none;
  }

  .nav-search-input::placeholder {
    color: var(--color-muted);
  }

  .nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: var(--color-accent);
    border: none;
    color: var(--color-bg);
    cursor: pointer;
    transition: background var(--transition);
  }

  .nav-search-btn:hover {
    background: var(--color-link-hover);
  }

  @keyframes navSlide {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .site-nav a {
    display: block;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 0 0.5rem 0.25rem;
    font-size: 1rem;
    letter-spacing: 0.03em;
    border: none;
    border-bottom: none;
    background: transparent;
    transition: background var(--transition), color var(--transition);
  }

  .site-nav a:hover {
    background: var(--color-accent-soft);
    color: var(--color-link);
  }

  .site-nav a.nav-active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }

  .site-nav a::after {
    display: none;
  }

  .site-header .nav-item:has(.nav-dropdown) > a::after {
    display: inline-block;
  }

  /* Mobile: nav-item as block so dropdown stacks; show dropdown when .nav-item.is-open */
  .site-header.is-open .nav-item {
    display: block;
    position: static;
  }

  .site-header.is-open .nav-item > a {
    display: block;
  }

  .site-header.is-open .nav-dropdown {
    position: static;
    display: none;
    flex-direction: column;
    min-width: 0;
    margin: 0 0.5rem 0.25rem;
    padding: 0 0 0 1rem;
    box-shadow: none;
    background: transparent;
    border-left: 2px solid var(--color-accent);
    border-radius: 0;
  }

  .site-header.is-open .nav-item.is-open .nav-dropdown {
    display: flex;
  }

  .site-header.is-open .nav-item.is-open > a::after {
    transform: rotate(180deg);
  }

  .site-header.is-open .nav-dropdown a {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    white-space: normal;
  }
}

/* Section nav (anchor links) */
.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.section-nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition);
}

.section-nav a:hover {
  color: var(--color-link);
}

/* Hero */
.hero {
  padding: 4rem 0 3rem;
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.hero p {
  color: var(--color-muted);
  margin: 0;
  font-size: 1.1rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Homepage featured / destacados */
.featured-block {
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.featured-block h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.35rem;
}

.featured-desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}

.featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.featured-list li {
  margin: 0;
}

.featured-list a {
  display: block;
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 0.25rem;
  transition: color var(--transition);
}

.featured-list a:hover {
  color: var(--color-link-hover);
}

.featured-line {
  display: block;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Categories and article lists */
.categories {
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
}

.categories h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
}

.categories-featured {
  border-top: none;
  padding-top: 0;
}

.category-desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: -0.5rem 0 1.5rem;
  line-height: 1.5;
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.article-list li {
  margin: 0;
}

.article-list a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

.article-list a:hover {
  background: var(--color-accent-soft);
  color: var(--color-link);
}

.category-cta {
  margin: 1.5rem 0 0;
}

.category-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--transition), gap var(--transition);
}

.category-cta a:hover {
  color: var(--color-link-hover);
  gap: 0.5rem;
}

/* Section hero (Viajes hub) */
.section-hero {
  padding: 3rem 0 2rem;
}

.section-hero .article-meta {
  margin-bottom: 0.25rem;
}

.section-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 500;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

.section-hero-desc {
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* Viajes index: section headings in accent (DESTINOS, PLAYAS, etc.) */
.page-viajes .categories h2,
.page-viajes .categories h2 a {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.page-viajes .categories h2 a:hover {
  color: var(--color-link-hover);
}

/* Hub index – same content width as rest of site */
.hub-hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--color-border);
}

.hub-hero .article-meta {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.hub-hero h1::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin-top: 1rem;
  border-radius: 2px;
}

.hub-intro {
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0 0 1.5rem;
}

.hub-intro p {
  margin: 0 0 1rem;
}

.hub-intro p:last-child {
  margin-bottom: 0;
}

.hub-intro a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

.hub-intro a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.hub-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
}

.hub-updated {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0.5rem 0 0;
  opacity: 0.9;
}

.hub-quick-links {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.hub-quick-links h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--color-text);
}

.hub-quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hub-quick-card {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-link);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hub-quick-card:hover {
  background: var(--color-bg);
  border-color: var(--color-accent);
  color: var(--color-link-hover);
}

.hub-list-all {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: 2;
  column-gap: 2rem;
}

@media (max-width: 600px) {
  .hub-list-all {
    column-count: 1;
  }
}

.hub-list-all li {
  margin: 0.35rem 0;
  break-inside: avoid;
}

.hub-list-all a {
  color: var(--color-link);
  text-decoration: none;
  font-size: 0.95rem;
}

.hub-list-all a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.zonas-map {
  margin: 0 0 2rem;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.zonas-map-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 600px) {
  .zonas-map-row {
    grid-template-columns: 1fr;
  }
}

.zonas-map-box {
  padding: 1rem;
  border-radius: var(--radius);
  text-align: center;
}

.zonas-map-norte { border-left: 4px solid #0d9488; background: rgba(13, 148, 136, 0.08); }
.zonas-map-centro { border-left: 4px solid #2563eb; background: rgba(37, 99, 235, 0.08); }
.zonas-map-sur { border-left: 4px solid #7c3aed; background: rgba(124, 58, 237, 0.08); }

.zonas-map-label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.zonas-map-dots {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.hub-subsection {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.hub-subsection:last-of-type {
  border-bottom: none;
}

.hub-subsection h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 0.5rem;
}

.hub-subsection .hub-subdesc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.hub-subsection .hub-subdesc a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

.hub-subsection .hub-subdesc a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* In-text links inside hub sections (not only muted "hub-subdesc" blocks) */
.hub-subsection a:not(.hub-card):not(.hub-quick-card):not(.cta-button) {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

.hub-subsection a:not(.hub-card):not(.hub-quick-card):not(.cta-button):hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.hub-subsection .hub-group-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
  margin: 1.5rem 0 0.5rem;
  text-transform: none;
}

.hub-subsection .hub-group-title:first-of-type {
  margin-top: 0;
}

.hub-subsection-profiles .hub-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.hub-subsection-profiles .hub-card-grid > li {
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-accent);
}

.hub-subsection-profiles .hub-profile-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.35rem;
}

.hub-subsection-profiles .hub-profile-desc {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.hub-subsection-profiles .hub-profile-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hub-subsection-profiles .hub-profile-links li {
  margin: 0.25rem 0;
}

.hub-subsection-profiles .hub-profile-links a {
  color: var(--color-link);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--transition);
}

.hub-subsection-profiles .hub-profile-links a:hover {
  color: var(--color-link-hover);
}

.hub-card-grid {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hub-card {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.hub-card:hover {
  background: var(--color-surface-elevated);
  border-color: rgba(201, 162, 39, 0.25);
  color: var(--color-link);
}

.hub-card-grid + .hub-subsection {
  margin-top: 0;
}

.hub-explore {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.hub-explore h2 {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
}

.hub-explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.hub-explore-links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--transition);
}

.hub-explore-links a:hover {
  color: var(--color-link);
}

/* CTA block */
.cta-block {
  margin: 2.75rem 0;
  padding: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
  border-left: 3px solid var(--color-accent);
}

.cta-block h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.cta-block p {
  color: var(--color-muted);
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}

.cta-block a:not(.cta-button) {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

.cta-block a:not(.cta-button):hover {
  color: var(--color-link-hover);
}

.cta-block-inline {
  margin: 1.5rem 0;
  padding: 1.25rem;
}

.cta-block-inline h2 {
  font-size: 1.1rem;
}

.cta-button {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-bg) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}

.cta-button:hover {
  background: var(--color-link-hover);
  transform: translateY(-1px);
}

/* Homepage CTA – full block with heading, description and button */
.cta-block-home {
  margin-top: 1.5rem;
}

.cta-block-home h2 {
  color: var(--color-text);
  font-size: 1.35rem;
}

.cta-block-home p {
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

/* Testimonial quotes */
.testimonial-quote {
  margin: 1.25rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}

.testimonial-quote p {
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.testimonial-quote cite {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Search */
.search-wrap {
  margin: 1rem 0 1.25rem;
}

.search-input {
  width: 100%;
  max-width: 320px;
  padding: 0.65rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 1rem;
}

.search-input::placeholder {
  color: var(--color-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Hub filters */
.hub-filters-wrap {
  padding: 0 0 0.5rem;
}

.hub-filters-wrap h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.35rem;
  text-transform: none;
}

.hub-filters-wrap .hub-subdesc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}

.hub-filters .hub-filter-all {
  margin-left: 1.25rem;
}

.hub-filters button {
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.hub-filters button:hover,
.hub-filters button.active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

/* Article TOC */
.article-toc {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.article-toc h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: var(--color-muted);
}

.article-toc ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
}

.article-toc li {
  margin: 0.35rem 0;
}

.article-toc li::before {
  content: '→ ';
  color: var(--color-accent);
}

.article-toc a {
  color: var(--color-link);
  text-decoration: none;
}

.article-toc a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Hidden gem block (featured destination callout) */
.hidden-gem-block {
  padding: 1.5rem 1.5rem 1.5rem 1.25rem !important;
  margin: 2rem 0 !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.hidden-gem-block h2 {
  font-size: 1.2rem;
  margin-top: 0;
}

.hidden-gem-block .cta-button {
  display: inline-block;
  margin-top: 0.5rem;
}

/* Article page */
.article {
  padding: 2.5rem 0 4rem;
}

.article-meta {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

.article-meta a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.article-meta a:hover {
  color: var(--color-link);
}

.article-byline {
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.article-byline a,
.article-byline a:link,
.article-byline a:visited,
.article-byline a:any-link {
  color: var(--color-link);
  text-decoration: none;
}

.article-byline a:hover {
  text-decoration: underline;
}

.hub-hero-with-bg .hub-hero-inner .article-byline,
.hub-hero-with-bg .hub-hero-inner .article-byline a,
.hub-hero-with-bg .hub-hero-inner .article-byline a:link,
.hub-hero-with-bg .hub-hero-inner .article-byline a:visited,
.hub-hero-with-bg .hub-hero-inner .article-byline a:any-link {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 12px rgba(0, 0, 0, 0.8), 0 4px 24px rgba(0, 0, 0, 0.55);
}

.article-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.article-intro {
  color: var(--color-muted);
  font-size: 1.125rem;
  line-height: 1.75;
  margin: 0 0 2.5rem;
}

.article-intro a {
  color: var(--color-link);
  text-decoration: none;
}

.article-intro a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}


.article-extra {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
}

.article-extra h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.article-extra h2:not(:first-child) {
  margin-top: 2rem;
}

.article-extra p {
  color: var(--color-muted);
  margin: 0 0 0.75rem;
  line-height: 1.75;
}

.article-extra p:last-child {
  margin-bottom: 0;
}

.article-extra a {
  color: var(--color-link);
  text-decoration: none;
}

.article-extra a:hover {
  text-decoration: underline;
}

.compare-seo-content .compare-teaser-grid a,
.compare-seo-content .compare-teaser-grid a:hover {
  text-decoration: none;
}

/* San Miguel — presupuesto bajo (long-form article layout) */
.article.article-presupuesto-bajo .article-extra--verdict {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  background: linear-gradient(165deg, rgba(201, 162, 39, 0.1) 0%, rgba(15, 15, 15, 0.98) 42%, var(--color-surface) 100%);
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.65rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.article.article-presupuesto-bajo .article-extra--verdict h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.article.article-presupuesto-bajo .article-extra--key-idea h2,
.article.article-presupuesto-bajo .article-extra--editorial h2 {
  color: var(--color-text);
}

.article.article-presupuesto-bajo .article-extra--spend p,
.article.article-presupuesto-bajo .article-extra--budget-drivers p,
.article.article-presupuesto-bajo .article-extra--lodging p {
  padding: 1rem 1.1rem 1rem 1.2rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border-left: 3px solid rgba(201, 162, 39, 0.55);
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.article.article-presupuesto-bajo .article-extra--spend p:last-child,
.article.article-presupuesto-bajo .article-extra--budget-drivers p:last-child,
.article.article-presupuesto-bajo .article-extra--lodging p:last-child {
  margin-bottom: 0;
}

.article.article-presupuesto-bajo .article-extra--structure ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  counter-reset: presupuesto-step;
}

.article.article-presupuesto-bajo .article-extra--structure ol li {
  position: relative;
  counter-increment: presupuesto-step;
  padding: 1rem 1rem 1rem 3.15rem;
  margin-bottom: 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  line-height: 1.6;
}

.article.article-presupuesto-bajo .article-extra--structure ol li::before {
  content: counter(presupuesto-step);
  position: absolute;
  left: 0.85rem;
  top: 1rem;
  width: 1.65rem;
  height: 1.65rem;
  text-align: center;
  line-height: 1.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: 50%;
}

.article.article-presupuesto-bajo .article-extra--mistakes ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.article.article-presupuesto-bajo .article-extra--mistakes ul li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.6rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-presupuesto-bajo .article-extra--mistakes ul li:last-child {
  border-bottom: none;
}

.article.article-presupuesto-bajo .article-extra--mistakes ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.75);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12);
}

.article.article-presupuesto-bajo .presupuesto-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article.article-presupuesto-bajo .presupuesto-checklist li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2.1rem;
  border-bottom: 1px dashed var(--color-border);
}

.article.article-presupuesto-bajo .presupuesto-checklist li:last-child {
  border-bottom: none;
}

.article.article-presupuesto-bajo .presupuesto-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.9;
}

.article.article-presupuesto-bajo .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article.article-presupuesto-bajo .article-extra--related ul li {
  margin: 0;
}

.article.article-presupuesto-bajo .article-extra--related ul a {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-presupuesto-bajo .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.35);
  background: var(--color-surface-elevated);
}

.article.article-presupuesto-bajo .article-extra--editorial {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.05) 0%, transparent 55%);
  border-radius: var(--radius-lg);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  .article.article-presupuesto-bajo .article-extra--verdict {
    padding: 1.35rem 1.15rem;
  }

  .article.article-presupuesto-bajo .article-extra--structure ol li {
    padding: 0.95rem 0.95rem 0.95rem 2.85rem;
  }

  .article.article-presupuesto-bajo .article-extra--structure ol li::before {
    left: 0.75rem;
  }
}

/* San Miguel — viñedos / enoturismo (long-form layout) */
.article.article-vinedos-sma .article-extra--verdict {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  background: linear-gradient(155deg, rgba(90, 120, 80, 0.14) 0%, rgba(15, 15, 15, 0.98) 45%, var(--color-surface) 100%);
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.65rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.article.article-vinedos-sma .article-extra--verdict h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.article.article-vinedos-sma .article-extra--context {
  border-left: 3px solid rgba(90, 120, 80, 0.45);
  padding-left: 1.15rem;
  margin-left: 0.15rem;
}

.article.article-vinedos-sma .article-extra--when p {
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.article.article-vinedos-sma .article-extra--when p:last-child {
  margin-bottom: 0;
}

.article.article-vinedos-sma .article-extra--by-type p {
  padding: 1rem 1.1rem 1rem 1.2rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border-left: 3px solid rgba(90, 120, 80, 0.5);
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.article.article-vinedos-sma .article-extra--by-type p:last-child {
  margin-bottom: 0;
}

.article.article-vinedos-sma .article-extra--picks p {
  padding: 1.15rem 1.15rem 1.15rem 1.25rem;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.06) 0%, var(--color-surface) 55%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.article.article-vinedos-sma .article-extra--picks p:last-child {
  margin-bottom: 0;
}

.article.article-vinedos-sma .article-extra--before-book p {
  padding: 1rem 1.1rem 1rem 1.2rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border-left: 3px solid rgba(201, 162, 39, 0.55);
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.article.article-vinedos-sma .article-extra--before-book p:last-child {
  margin-bottom: 0;
}

.article.article-vinedos-sma .article-extra--mistakes ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.article.article-vinedos-sma .article-extra--mistakes ul li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.6rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-vinedos-sma .article-extra--mistakes ul li:last-child {
  border-bottom: none;
}

.article.article-vinedos-sma .article-extra--mistakes ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(90, 120, 80, 0.85);
  box-shadow: 0 0 0 3px rgba(90, 120, 80, 0.12);
}

.article.article-vinedos-sma .article-extra--itinerary p {
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px dashed rgba(201, 162, 39, 0.25);
  margin-bottom: 0.75rem;
}

.article.article-vinedos-sma .article-extra--itinerary p:last-child {
  margin-bottom: 0;
}

.article.article-vinedos-sma .article-extra--skip {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--color-border);
}

.article.article-vinedos-sma .article-extra--editorial {
  background: linear-gradient(180deg, rgba(90, 120, 80, 0.08) 0%, transparent 55%);
  border-radius: var(--radius-lg);
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  margin-top: 0.25rem;
}

.article.article-vinedos-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article.article-vinedos-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-vinedos-sma .article-extra--related ul a {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-vinedos-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.35);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-vinedos-sma .article-extra--verdict {
    padding: 1.35rem 1.15rem;
  }

  .article.article-vinedos-sma .article-extra--picks p {
    padding: 1rem 1rem 1rem 1.1rem;
  }
}

/* San Miguel — movilidad y estacionamiento (long-form layout) */
.article.article-movilidad-sma .article-extra--verdict {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  background: linear-gradient(160deg, rgba(100, 130, 165, 0.14) 0%, rgba(15, 15, 15, 0.98) 48%, var(--color-surface) 100%);
  border: 1px solid rgba(130, 160, 190, 0.22);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.65rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.article.article-movilidad-sma .article-extra--verdict h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.article.article-movilidad-sma .article-extra--key-idea {
  border-left: 3px solid rgba(100, 130, 165, 0.5);
  padding-left: 1.15rem;
  margin-left: 0.15rem;
}

.article.article-movilidad-sma .article-extra--car-decision p {
  padding: 1rem 1.1rem 1rem 1.2rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border-left: 3px solid rgba(100, 130, 165, 0.45);
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.article.article-movilidad-sma .article-extra--car-decision p:last-child {
  margin-bottom: 0;
}

.article.article-movilidad-sma .article-extra--walking ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.article.article-movilidad-sma .article-extra--walking ul li {
  padding: 0.85rem 1rem 0.85rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 3px solid rgba(201, 162, 39, 0.45);
}

.article.article-movilidad-sma .article-extra--walking ul li:last-child {
  margin-bottom: 0;
}

.article.article-movilidad-sma .article-extra--helps-hurts p {
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.article.article-movilidad-sma .article-extra--helps-hurts p:last-child {
  margin-bottom: 0;
}

.article.article-movilidad-sma .article-extra--parking ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.article.article-movilidad-sma .article-extra--parking ul li {
  position: relative;
  padding: 0.65rem 0 0.65rem 2rem;
  border-bottom: 1px dashed var(--color-border);
}

.article.article-movilidad-sma .article-extra--parking ul li:last-child {
  border-bottom: none;
}

.article.article-movilidad-sma .article-extra--parking ul li::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.35rem;
  height: 1.35rem;
  line-height: 1.35rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-bg);
  background: rgba(100, 130, 165, 0.85);
  border-radius: 50%;
}

.article.article-movilidad-sma .article-extra--complicated {
  padding: 1.2rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.article.article-movilidad-sma .article-extra--no-car {
  background: linear-gradient(135deg, rgba(100, 130, 165, 0.07) 0%, var(--color-surface) 50%);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(130, 160, 190, 0.15);
}

.article.article-movilidad-sma .article-extra--accessibility ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.article.article-movilidad-sma .article-extra--accessibility ul li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.55rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-movilidad-sma .article-extra--accessibility ul li:last-child {
  border-bottom: none;
}

.article.article-movilidad-sma .article-extra--accessibility ul li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(100, 130, 165, 0.75);
}

.article.article-movilidad-sma .article-extra--day-plan ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  counter-reset: movilidad-step;
}

.article.article-movilidad-sma .article-extra--day-plan ol li {
  position: relative;
  counter-increment: movilidad-step;
  padding: 0.95rem 1rem 0.95rem 3rem;
  margin-bottom: 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  line-height: 1.6;
}

.article.article-movilidad-sma .article-extra--day-plan ol li::before {
  content: counter(movilidad-step);
  position: absolute;
  left: 0.85rem;
  top: 1rem;
  width: 1.65rem;
  height: 1.65rem;
  text-align: center;
  line-height: 1.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-bg);
  background: rgba(100, 130, 165, 0.9);
  border-radius: 50%;
}

.article.article-movilidad-sma .article-extra--mistakes ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.article.article-movilidad-sma .article-extra--mistakes ul li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.6rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-movilidad-sma .article-extra--mistakes ul li:last-child {
  border-bottom: none;
}

.article.article-movilidad-sma .article-extra--mistakes ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(180, 90, 90, 0.75);
  box-shadow: 0 0 0 3px rgba(180, 90, 90, 0.1);
}

.article.article-movilidad-sma .article-extra--park-all-day {
  border-left: 4px solid rgba(100, 130, 165, 0.45);
  padding-left: 1.15rem;
  margin-left: 0.1rem;
}

.article.article-movilidad-sma .article-extra--editorial {
  background: linear-gradient(180deg, rgba(100, 130, 165, 0.08) 0%, transparent 55%);
  border-radius: var(--radius-lg);
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  margin-top: 0.25rem;
}

.article.article-movilidad-sma .movilidad-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article.article-movilidad-sma .movilidad-summary-list li {
  position: relative;
  padding: 0.75rem 0.85rem 0.75rem 2.15rem;
  margin-bottom: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.article.article-movilidad-sma .movilidad-summary-list li:last-child {
  margin-bottom: 0;
}

.article.article-movilidad-sma .movilidad-summary-list li::before {
  content: '→';
  position: absolute;
  left: 0.75rem;
  top: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.95rem;
}

.article.article-movilidad-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article.article-movilidad-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-movilidad-sma .article-extra--related ul a {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-movilidad-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.35);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-movilidad-sma .article-extra--verdict {
    padding: 1.35rem 1.15rem;
  }

  .article.article-movilidad-sma .article-extra--day-plan ol li {
    padding: 0.95rem 0.95rem 0.95rem 2.85rem;
  }

  .article.article-movilidad-sma .article-extra--day-plan ol li::before {
    left: 0.75rem;
  }
}

/* San Miguel — excursiones desde SMA (day-trip layout) */
.article.article-excursiones-sma .article-extra--intro {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  background: linear-gradient(165deg, rgba(190, 120, 75, 0.1) 0%, rgba(15, 15, 15, 0.98) 42%, var(--color-surface) 100%);
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 1.65rem 1.45rem 1.5rem;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.32);
}

.article.article-excursiones-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.12rem;
}

.article.article-excursiones-sma .article-extra--overview p {
  padding: 0.85rem 0;
}

.article.article-excursiones-sma .article-extra--overview p:not(:last-child) {
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-excursiones-sma .article-extra--excursion-stop {
  padding: 1.5rem 1.35rem 1.45rem;
  margin-bottom: 0.25rem;
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.05) 0%, var(--color-surface) 38%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
}

.article.article-excursiones-sma .article-extra--excursion-stop h2 {
  font-size: 1.18rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.article.article-excursiones-sma .article-extra--selective {
  border-left: 3px solid rgba(190, 120, 75, 0.45);
  padding-left: 1.1rem;
  margin-left: 0.15rem;
}

.article.article-excursiones-sma .article-extra--by-trip p {
  padding: 1rem 1.1rem 1rem 1.15rem;
  margin-bottom: 0.65rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border-left: 3px solid rgba(201, 162, 39, 0.45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.article.article-excursiones-sma .article-extra--by-trip p:last-child {
  margin-bottom: 0;
}

.article.article-excursiones-sma .article-extra--combinations p:nth-of-type(1) {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(90, 130, 90, 0.08);
  border: 1px solid rgba(90, 130, 90, 0.2);
  margin-bottom: 0.75rem;
}

.article.article-excursiones-sma .article-extra--combinations p:nth-of-type(2) {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(160, 80, 80, 0.07);
  border: 1px solid rgba(160, 80, 80, 0.18);
  margin-bottom: 0.75rem;
}

.article.article-excursiones-sma .article-extra--combinations p:nth-of-type(3) {
  margin-bottom: 0;
  padding-top: 0.35rem;
  color: var(--color-muted);
}

.article.article-excursiones-sma .article-extra--editorial {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.07) 0%, transparent 50%);
  border-radius: var(--radius-lg);
  padding: 0.35rem 0.4rem 0.5rem;
  margin-top: 0.25rem;
}

.article.article-excursiones-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article.article-excursiones-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-excursiones-sma .article-extra--related ul a {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-excursiones-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.35);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-excursiones-sma .article-extra--intro {
    padding: 1.35rem 1.15rem;
  }

  .article.article-excursiones-sma .article-extra--excursion-stop {
    padding: 1.25rem 1.1rem;
  }
}

/* San Miguel — itinerario en 1 día */
.article.article-1dia-sma .article-extra--intro {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 1.75rem;
  background: linear-gradient(155deg, rgba(201, 162, 39, 0.12) 0%, rgba(15, 15, 15, 0.97) 45%, var(--color-surface) 100%);
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 1.65rem 1.45rem 1.5rem;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.33);
}

.article.article-1dia-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.12rem;
}

.article.article-1dia-sma .article-extra--strategy {
  border-left: 3px solid rgba(201, 162, 39, 0.4);
  padding-left: 1.1rem;
  padding-top: 2.5rem;
  margin-left: 0.15rem;
}

.article.article-1dia-sma .article-extra--timeline {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.3rem 1.4rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.article.article-1dia-sma .article-extra--timeline h2 {
  margin-top: 0;
}

.article.article-1dia-sma .article-extra--timeline h3 {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 1.35rem 0 0.6rem;
  padding: 0.5rem 0.85rem;
  background: rgba(201, 162, 39, 0.09);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.45;
}

.article.article-1dia-sma .article-extra--timeline h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-1dia-sma .article-extra--routes {
  padding: 1.2rem 1.25rem 1.3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, var(--color-surface) 35%);
}

.article.article-1dia-sma .article-extra--routes h2 {
  margin-top: 0;
}

.article.article-1dia-sma .article-extra--routes h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-1dia-sma .article-extra--routes h3:first-of-type {
  margin-top: 0.75rem;
}

.article.article-1dia-sma .article-extra--arrival h2 {
  margin-bottom: 0.75rem;
}

.article.article-1dia-sma .article-extra--arrival h3 {
  font-size: 1rem;
  margin: 1.15rem 0 0.5rem;
  color: var(--color-accent);
}

.article.article-1dia-sma .article-extra--arrival h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-1dia-sma .article-extra--arrival > p:last-child {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-subtle);
}

.article.article-1dia-sma .article-extra--skip {
  background: rgba(160, 80, 70, 0.06);
  border: 1px solid rgba(160, 80, 70, 0.15);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.25rem;
}

.article.article-1dia-sma .article-extra--driving,
.article.article-1dia-sma .article-extra--no-car {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}

.article.article-1dia-sma .article-extra--profiles p {
  padding: 0.85rem 1rem;
  margin-bottom: 0.55rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border-left: 3px solid rgba(100, 130, 165, 0.45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.article.article-1dia-sma .article-extra--profiles p:last-child {
  margin-bottom: 0;
}

.article.article-1dia-sma .article-extra--stay-night {
  border-left: 3px solid rgba(201, 162, 39, 0.45);
  padding-left: 1.1rem;
  margin-left: 0.15rem;
}

.article.article-1dia-sma .article-extra--editorial {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.07) 0%, transparent 52%);
  border-radius: var(--radius-lg);
  padding: 0.35rem 0.4rem 0.5rem;
  margin-top: 0.25rem;
}

.article.article-1dia-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article.article-1dia-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-1dia-sma .article-extra--related ul a {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-1dia-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.35);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-1dia-sma .article-extra--intro {
    padding: 1.35rem 1.15rem;
    margin-bottom: 1.5rem;
  }

  .article.article-1dia-sma .article-extra--timeline {
    padding: 1.15rem 1.1rem;
  }

  .article.article-1dia-sma .article-extra--timeline h3 {
    font-size: 0.78rem;
  }
}

/* San Miguel — 4 días (estilo ligero) */
.article.article-4dias-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-4dias-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-4dias-sma .article-extra--strategy,
.article.article-4dias-sma .article-extra--lodging {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-4dias-sma .article-extra--day h2 {
  font-size: 1.12rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-4dias-sma .article-extra--variants h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  margin: 1.25rem 0 0.5rem;
}

.article.article-4dias-sma .article-extra--variants h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-4dias-sma .article-extra--flex,
.article.article-4dias-sma .article-extra--spend {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-4dias-sma .article-extra--skip {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-4dias-sma .article-extra--editorial {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-4dias-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-4dias-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-4dias-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-4dias-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-4dias-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-4dias-sma .article-extra--flex,
  .article.article-4dias-sma .article-extra--spend,
  .article.article-4dias-sma .article-extra--skip {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — 2 o 3 días (estilo ligero, alineado a 4 días) */
.article.article-2o3dias-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-2o3dias-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-2o3dias-sma .article-extra--why,
.article.article-2o3dias-sma .article-extra--nights2-yes,
.article.article-2o3dias-sma .article-extra--nights2-no,
.article.article-2o3dias-sma .article-extra--nights3 {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-2o3dias-sma .article-extra--nights2-yes ul,
.article.article-2o3dias-sma .article-extra--nights3 ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-2o3dias-sma .article-extra--feel h2,
.article.article-2o3dias-sma .article-extra--plan-2 h2,
.article.article-2o3dias-sma .article-extra--plan-3 h2 {
  font-size: 1.12rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-2o3dias-sma .article-extra--feel h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  margin: 1.25rem 0 0.5rem;
}

.article.article-2o3dias-sma .article-extra--feel h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-2o3dias-sma .article-extra--outings h3,
.article.article-2o3dias-sma .article-extra--profiles h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-2o3dias-sma .article-extra--outings h3:first-of-type,
.article.article-2o3dias-sma .article-extra--profiles h3:first-of-type {
  margin-top: 0.5rem;
}

.article.article-2o3dias-sma .article-extra--mistake {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-2o3dias-sma .article-extra--booking {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-2o3dias-sma .article-extra--final {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-2o3dias-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-2o3dias-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-2o3dias-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-2o3dias-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-2o3dias-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-2o3dias-sma .article-extra--mistake,
  .article.article-2o3dias-sma .article-extra--booking {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — fin de semana (estilo ligero) */
.article.article-finsem-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-finsem-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-finsem-sma .article-extra--fits {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-finsem-sma .article-extra--fits ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-finsem-sma .article-extra--block h2 {
  font-size: 1.12rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-finsem-sma .article-extra--sat-pm h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-finsem-sma .article-extra--sat-pm h3:first-of-type {
  margin-top: 0.5rem;
}

.article.article-finsem-sma .article-extra--profiles h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-finsem-sma .article-extra--profiles h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-finsem-sma .article-extra--booking {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-finsem-sma .article-extra--booking ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-finsem-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-finsem-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-finsem-sma .article-extra--final {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-finsem-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-finsem-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-finsem-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-finsem-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-finsem-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-finsem-sma .article-extra--booking,
  .article.article-finsem-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — mejor época (estilo ligero) */
.article.article-epoca-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-epoca-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-epoca-sma .article-extra--context {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-epoca-sma .article-extra--season h2 {
  font-size: 1.12rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-epoca-sma .article-extra--heavy {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.1);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-epoca-sma .article-extra--heavy ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-epoca-sma .article-extra--reader {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-epoca-sma .article-extra--prices {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-epoca-sma .article-extra--calendar h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-epoca-sma .article-extra--calendar h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-epoca-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-epoca-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-epoca-sma .article-extra--final {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-epoca-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-epoca-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-epoca-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-epoca-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-epoca-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-epoca-sma .article-extra--heavy,
  .article.article-epoca-sma .article-extra--reader,
  .article.article-epoca-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — centro vs zonas tranquilas (estilo ligero) */
.article.article-zonas-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-zonas-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-zonas-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-zonas-sma .article-extra--context {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-zonas-sma .article-extra--center {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.32);
}

.article.article-zonas-sma .article-extra--quiet {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(100, 130, 165, 0.38);
}

.article.article-zonas-sma .article-extra--who-center,
.article.article-zonas-sma .article-extra--who-quiet {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-zonas-sma .article-extra--map {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-zonas-sma .article-extra--duration h2 {
  font-size: 1.12rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-zonas-sma .article-extra--duration p strong:first-child {
  color: var(--color-accent);
}

.article.article-zonas-sma .article-extra--value,
.article.article-zonas-sma .article-extra--car,
.article.article-zonas-sma .article-extra--rest {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.18);
}

.article.article-zonas-sma .article-extra--checklist {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-zonas-sma .article-extra--checklist ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-zonas-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-zonas-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-zonas-sma .article-extra--editorial {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-zonas-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-zonas-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-zonas-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-zonas-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-zonas-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-zonas-sma .article-extra--who-center,
  .article.article-zonas-sma .article-extra--who-quiet,
  .article.article-zonas-sma .article-extra--map,
  .article.article-zonas-sma .article-extra--checklist,
  .article.article-zonas-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — con niños (estilo ligero) */
.article.article-ninos-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-ninos-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-ninos-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-ninos-sma .article-extra--context {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-ninos-sma .article-extra--age {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-ninos-sma .article-extra--age p strong:first-child {
  color: var(--color-accent);
}

.article.article-ninos-sma .article-extra--works {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.28);
}

.article.article-ninos-sma .article-extra--friction {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-ninos-sma .article-extra--mobility {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(100, 130, 165, 0.38);
}

.article.article-ninos-sma .article-extra--hotel {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.2);
}

.article.article-ninos-sma .article-extra--itinerary h2 {
  font-size: 1.12rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-ninos-sma .article-extra--itinerary p strong:first-child {
  color: var(--color-accent);
}

.article.article-ninos-sma .article-extra--plans {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-ninos-sma .article-extra--plans p strong:first-child {
  color: var(--color-accent);
}

.article.article-ninos-sma .article-extra--food {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.18);
}

.article.article-ninos-sma .article-extra--weather {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-ninos-sma .article-extra--caveat {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.1);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-ninos-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-ninos-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-ninos-sma .article-extra--editorial {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-ninos-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-ninos-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-ninos-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-ninos-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-ninos-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-ninos-sma .article-extra--age,
  .article.article-ninos-sma .article-extra--friction,
  .article.article-ninos-sma .article-extra--plans,
  .article.article-ninos-sma .article-extra--weather,
  .article.article-ninos-sma .article-extra--caveat,
  .article.article-ninos-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — rooftops (estilo ligero) */
.article.article-rooftops-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-rooftops-sma .article-extra + .article-faq,
.article.article-rooftops-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-rooftops-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-rooftops-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-rooftops-sma .article-extra--context {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-rooftops-sma .article-extra--picks {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-rooftops-sma .article-extra--picks h2 {
  margin-top: 0;
}

.article.article-rooftops-sma .article-extra--picks h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-rooftops-sma .article-extra--picks h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-rooftops-sma .article-extra--choose,
.article.article-rooftops-sma .article-extra--timing {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-rooftops-sma .article-extra--disappoint {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.1);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-rooftops-sma .article-extra--disappoint p strong:first-child {
  color: var(--color-accent);
}

.article.article-rooftops-sma .article-extra--trip {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-rooftops-sma .article-extra--trip p strong:first-child {
  color: var(--color-accent);
}

.article.article-rooftops-sma .article-extra--editorial {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-rooftops-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-rooftops-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-rooftops-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-rooftops-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-rooftops-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-rooftops-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-rooftops-sma .article-extra--picks {
    padding: 1rem 1.05rem;
  }

  .article.article-rooftops-sma .article-extra--disappoint,
  .article.article-rooftops-sma .article-extra--trip {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — en pareja (estilo ligero) */
.article.article-pareja-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-pareja-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-pareja-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-pareja-sma .article-extra--nights,
.article.article-pareja-sma .article-extra--tone,
.article.article-pareja-sma .article-extra--hotel,
.article.article-pareja-sma .article-extra--centro {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-pareja-sma .article-extra--spend {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-pareja-sma .article-extra--spend h2 {
  margin-top: 0;
}

.article.article-pareja-sma .article-extra--spend ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-pareja-sma .article-extra--spend ul li strong {
  color: var(--color-accent);
}

.article.article-pareja-sma .article-extra--overload {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.1);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-pareja-sma .article-extra--plan2,
.article.article-pareja-sma .article-extra--plan3 {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-pareja-sma .article-extra--plan2 h2,
.article.article-pareja-sma .article-extra--plan3 h2 {
  margin-top: 0;
}

.article.article-pareja-sma .article-extra--plan2 p strong:first-child,
.article.article-pareja-sma .article-extra--plan3 p strong:first-child {
  color: var(--color-accent);
}

.article.article-pareja-sma .article-extra--activities {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-pareja-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-pareja-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-pareja-sma .article-extra--mistakes ul li strong {
  color: var(--color-accent);
}

.article.article-pareja-sma .article-extra--profiles,
.article.article-pareja-sma .article-extra--no-car {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-pareja-sma .article-extra--editorial {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-pareja-sma .article-extra--faq {
  padding: 1.25rem 1.2rem 1.3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-pareja-sma .article-extra--faq h2 {
  margin-top: 0;
  font-size: 1.08rem;
}

.article.article-pareja-sma .article-extra--faq p strong {
  color: var(--color-accent);
}

.article.article-pareja-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-pareja-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-pareja-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-pareja-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-pareja-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-pareja-sma .article-extra--spend {
    padding: 1rem 1.05rem;
  }

  .article.article-pareja-sma .article-extra--overload,
  .article.article-pareja-sma .article-extra--plan2,
  .article.article-pareja-sma .article-extra--plan3,
  .article.article-pareja-sma .article-extra--mistakes,
  .article.article-pareja-sma .article-extra--profiles,
  .article.article-pareja-sma .article-extra--no-car,
  .article.article-pareja-sma .article-extra--faq {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — desde CDMX, Querétaro y León (estilo ligero) */
.article.article-desde-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-desde-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-desde-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-desde-sma .article-extra--quick,
.article.article-desde-sma .article-extra--modes {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-desde-sma .article-extra--quick h2,
.article.article-desde-sma .article-extra--modes h2 {
  margin-top: 0;
}

.article.article-desde-sma .article-extra--quick h3,
.article.article-desde-sma .article-extra--modes h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-desde-sma .article-extra--quick h3:first-of-type,
.article.article-desde-sma .article-extra--modes h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-desde-sma .article-extra--qro,
.article.article-desde-sma .article-extra--cdmx,
.article.article-desde-sma .article-extra--friday {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-desde-sma .article-extra--leon {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(100, 130, 165, 0.38);
}

.article.article-desde-sma .article-extra--by-trip {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-desde-sma .article-extra--by-trip h2 {
  margin-top: 0;
}

.article.article-desde-sma .article-extra--by-trip h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-desde-sma .article-extra--by-trip h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-desde-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-desde-sma .article-extra--mistakes p strong:first-child {
  color: var(--color-accent);
}

.article.article-desde-sma .article-extra--editorial {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.3);
}

.article.article-desde-sma .article-extra--related p {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

.article.article-desde-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-desde-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-desde-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-desde-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-desde-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-desde-sma .article-extra--quick,
  .article.article-desde-sma .article-extra--modes,
  .article.article-desde-sma .article-extra--by-trip {
    padding: 1rem 1.05rem;
  }

  .article.article-desde-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — restaurantes románticos (estilo ligero) */
.article.article-romanticos-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-romanticos-sma .article-extra + .article-faq,
.article.article-romanticos-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-romanticos-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-romanticos-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-romanticos-sma .article-extra--picks {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-romanticos-sma .article-extra--picks h2 {
  margin-top: 0;
}

.article.article-romanticos-sma .article-extra--picks h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-romanticos-sma .article-extra--picks h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-romanticos-sma .article-extra--choose,
.article.article-romanticos-sma .article-extra--strategy {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-romanticos-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-romanticos-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-romanticos-sma .article-extra--mistakes ul li strong {
  color: var(--color-accent);
}

.article.article-romanticos-sma .article-extra--combo {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-romanticos-sma .article-extra--combo p strong:first-child {
  color: var(--color-accent);
}

.article.article-romanticos-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-romanticos-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-romanticos-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-romanticos-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-romanticos-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-romanticos-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-romanticos-sma .article-extra--picks {
    padding: 1rem 1.05rem;
  }

  .article.article-romanticos-sma .article-extra--combo,
  .article.article-romanticos-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — dónde comer (estilo ligero) */
.article.article-comer-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-comer-sma .article-extra + .article-faq,
.article.article-comer-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-comer-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-comer-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-comer-sma .article-extra--scope {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-comer-sma .article-extra--picks {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-comer-sma .article-extra--picks h2 {
  margin-top: 0;
}

.article.article-comer-sma .article-extra--picks h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-comer-sma .article-extra--picks h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-comer-sma .article-extra--timing {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-comer-sma .article-extra--timing h2 {
  margin-top: 0;
}

.article.article-comer-sma .article-extra--timing h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-comer-sma .article-extra--timing h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-comer-sma .article-extra--pitfall {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.1);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-comer-sma .article-extra--plan {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-comer-sma .article-extra--plan p strong:first-child {
  color: var(--color-accent);
}

.article.article-comer-sma .article-extra--book {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-comer-sma .article-extra--book h2 {
  margin-top: 0;
}

.article.article-comer-sma .article-extra--book ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-comer-sma .article-extra--book ul li strong {
  color: var(--color-accent);
}

.article.article-comer-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-comer-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-comer-sma .article-extra--mistakes ul li strong {
  color: var(--color-accent);
}

.article.article-comer-sma .article-extra--complement {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.26);
}

.article.article-comer-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-comer-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-comer-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-comer-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-comer-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-comer-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-comer-sma .article-extra--picks {
    padding: 1rem 1.05rem;
  }

  .article.article-comer-sma .article-extra--timing,
  .article.article-comer-sma .article-extra--pitfall,
  .article.article-comer-sma .article-extra--plan,
  .article.article-comer-sma .article-extra--book,
  .article.article-comer-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — desayunos (estilo ligero) */
.article.article-desayunos-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-desayunos-sma .article-extra + .article-faq,
.article.article-desayunos-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-desayunos-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-desayunos-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-desayunos-sma .article-extra--scope {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.22);
}

.article.article-desayunos-sma .article-extra--picks {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-desayunos-sma .article-extra--picks h2 {
  margin-top: 0;
}

.article.article-desayunos-sma .article-extra--picks h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-desayunos-sma .article-extra--picks h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-desayunos-sma .article-extra--choose {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-desayunos-sma .article-extra--choose p strong:first-child {
  color: var(--color-accent);
}

.article.article-desayunos-sma .article-extra--formats {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-desayunos-sma .article-extra--formats h2 {
  margin-top: 0;
}

.article.article-desayunos-sma .article-extra--formats p strong:first-child {
  color: var(--color-accent);
}

.article.article-desayunos-sma .article-extra--plan {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-desayunos-sma .article-extra--plan p strong:first-child {
  color: var(--color-accent);
}

.article.article-desayunos-sma .article-extra--book {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-desayunos-sma .article-extra--book h2 {
  margin-top: 0;
}

.article.article-desayunos-sma .article-extra--book p strong:first-child {
  color: var(--color-accent);
}

.article.article-desayunos-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-desayunos-sma .article-extra--mistakes ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-desayunos-sma .article-extra--mistakes ul li strong {
  color: var(--color-accent);
}

.article.article-desayunos-sma .article-extra--complement {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.26);
}

.article.article-desayunos-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-desayunos-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-desayunos-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-desayunos-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-desayunos-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-desayunos-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-desayunos-sma .article-extra--picks {
    padding: 1rem 1.05rem;
  }

  .article.article-desayunos-sma .article-extra--formats,
  .article.article-desayunos-sma .article-extra--plan,
  .article.article-desayunos-sma .article-extra--book,
  .article.article-desayunos-sma .article-extra--mistakes {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — qué hacer (guía general, estilo ligero) */
.article.article-quehacer-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-quehacer-sma .article-extra + .article-faq,
.article.article-quehacer-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-quehacer-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-quehacer-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-quehacer-sma .article-extra--firstvisit {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-quehacer-sma .article-extra--firstvisit h2 {
  margin-top: 0;
}

.article.article-quehacer-sma .article-extra--firstvisit ol {
  margin: 0.75rem 0 1rem;
  padding-left: 1.35rem;
}

.article.article-quehacer-sma .article-extra--firstvisit ol li {
  margin: 0.35rem 0;
  padding-left: 0.15rem;
}

.article.article-quehacer-sma .article-extra--firstvisit ol li strong {
  color: var(--color-accent);
}

.article.article-quehacer-sma .article-extra--picks {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-quehacer-sma .article-extra--picks h2 {
  margin-top: 0;
}

.article.article-quehacer-sma .article-extra--picks h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-quehacer-sma .article-extra--picks h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-quehacer-sma .article-extra--days,
.article.article-quehacer-sma .article-extra--by-trip {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-quehacer-sma .article-extra--days h2,
.article.article-quehacer-sma .article-extra--by-trip h2 {
  margin-top: 0;
}

.article.article-quehacer-sma .article-extra--days h3,
.article.article-quehacer-sma .article-extra--by-trip h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-quehacer-sma .article-extra--days h3:first-of-type,
.article.article-quehacer-sma .article-extra--by-trip h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-quehacer-sma .article-extra--skip {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-quehacer-sma .article-extra--skip ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-quehacer-sma .article-extra--mistakes {
  padding: 1rem 1.05rem 1rem 1rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-quehacer-sma .article-extra--mistakes p strong:first-child {
  color: var(--color-accent);
}

.article.article-quehacer-sma .article-extra--formula {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-quehacer-sma .article-extra--formula h2 {
  margin-top: 0;
}

.article.article-quehacer-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-quehacer-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-quehacer-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-quehacer-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-quehacer-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-quehacer-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-quehacer-sma .article-extra--firstvisit,
  .article.article-quehacer-sma .article-extra--picks {
    padding: 1rem 1.05rem;
  }

  .article.article-quehacer-sma .article-extra--days,
  .article.article-quehacer-sma .article-extra--by-trip,
  .article.article-quehacer-sma .article-extra--skip,
  .article.article-quehacer-sma .article-extra--mistakes,
  .article.article-quehacer-sma .article-extra--formula,
  .article.article-quehacer-sma .article-faq {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — dónde hospedarse (estilo ligero) */
.article.article-hospedaje-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-hospedaje-sma .article-extra + .article-faq,
.article.article-hospedaje-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-hospedaje-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-hospedaje-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-hospedaje-sma .article-extra--zones {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-hospedaje-sma .article-extra--zones h2 {
  margin-top: 0;
}

.article.article-hospedaje-sma .article-extra--zones h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-hospedaje-sma .article-extra--zones h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-hospedaje-sma .article-extra--quick {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-hospedaje-sma .article-extra--quick h2 {
  margin-top: 0;
}

.article.article-hospedaje-sma .article-extra--quick ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-hospedaje-sma .article-extra--quick ul li strong {
  color: var(--color-accent);
}

.article.article-hospedaje-sma .article-extra--picks {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-hospedaje-sma .article-extra--picks h2 {
  margin-top: 0;
}

.article.article-hospedaje-sma .article-extra--choose {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-hospedaje-sma .article-extra--choose h2 {
  margin-top: 0;
}

.article.article-hospedaje-sma .article-extra--choose ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-hospedaje-sma .article-extra--choose ul li strong {
  color: var(--color-accent);
}

.article.article-hospedaje-sma .article-extra--worth {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.1);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-hospedaje-sma .article-extra--worth h2 {
  margin-top: 0;
}

.article.article-hospedaje-sma .article-extra--worth p strong:first-child {
  color: var(--color-accent);
}

.article.article-hospedaje-sma .article-extra--budget {
  padding: 1rem 1.05rem 1rem 1rem;
  border-left: 2px solid rgba(201, 162, 39, 0.26);
}

.article.article-hospedaje-sma .article-extra--budget p strong {
  color: var(--color-accent);
}

.article.article-hospedaje-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-hospedaje-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-hospedaje-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-hospedaje-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-hospedaje-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-hospedaje-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-hospedaje-sma .article-extra--zones,
  .article.article-hospedaje-sma .article-extra--quick,
  .article.article-hospedaje-sma .article-extra--choose,
  .article.article-hospedaje-sma .article-extra--worth,
  .article.article-hospedaje-sma .article-extra--budget,
  .article.article-hospedaje-sma .article-faq {
    padding: 0.9rem 0.95rem;
  }

  .article.article-hospedaje-sma .article-extra--picks {
    padding: 1rem 1.05rem;
  }
}

/* San Miguel — si llueve */
.article.article-si-llueve-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-si-llueve-sma .article-extra + .article-faq,
.article.article-si-llueve-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-si-llueve-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(130, 165, 195, 0.55);
  background: linear-gradient(135deg, rgba(130, 165, 195, 0.09) 0%, rgba(201, 162, 39, 0.04) 100%);
}

.article.article-si-llueve-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-si-llueve-sma .article-extra--works {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-si-llueve-sma .article-extra--works h2 {
  margin-top: 0;
}

.article.article-si-llueve-sma .article-extra--works h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 1.35rem 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.article.article-si-llueve-sma .article-extra--works h3:first-of-type {
  margin-top: 0.35rem;
}

.article.article-si-llueve-sma .article-extra--avoid {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-si-llueve-sma .article-extra--avoid h2 {
  margin-top: 0;
}

.article.article-si-llueve-sma .article-extra--avoid ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-si-llueve-sma .article-extra--avoid ul li strong {
  color: var(--color-accent);
}

.article.article-si-llueve-sma .article-extra--rain,
.article.article-si-llueve-sma .article-extra--by-trip {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-si-llueve-sma .article-extra--rain h2,
.article.article-si-llueve-sma .article-extra--by-trip h2 {
  margin-top: 0;
}

.article.article-si-llueve-sma .article-extra--rain h3,
.article.article-si-llueve-sma .article-extra--by-trip h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 1.2rem 0 0.45rem;
}

.article.article-si-llueve-sma .article-extra--rain h3:first-of-type,
.article.article-si-llueve-sma .article-extra--by-trip h3:first-of-type {
  margin-top: 0.75rem;
}

.article.article-si-llueve-sma .article-extra--charco {
  padding: 1rem 1.05rem 1rem 1rem;
  border-left: 2px solid rgba(130, 165, 195, 0.35);
  background: rgba(130, 165, 195, 0.045);
}

.article.article-si-llueve-sma .article-extra--charco h2 {
  margin-top: 0;
}

.article.article-si-llueve-sma .article-extra--itinerary {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-si-llueve-sma .article-extra--itinerary h2 {
  margin-top: 0;
}

.article.article-si-llueve-sma .article-extra--itinerary p strong:first-child {
  color: var(--color-accent);
}

.article.article-si-llueve-sma .article-extra--gear {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-si-llueve-sma .article-extra--gear h2 {
  margin-top: 0;
}

.article.article-si-llueve-sma .article-extra--editorial {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-si-llueve-sma .article-extra--editorial h2 {
  margin-top: 0;
}

.article.article-si-llueve-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-si-llueve-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-si-llueve-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-si-llueve-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-si-llueve-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-si-llueve-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-si-llueve-sma .article-extra--works,
  .article.article-si-llueve-sma .article-extra--avoid,
  .article.article-si-llueve-sma .article-extra--rain,
  .article.article-si-llueve-sma .article-extra--charco,
  .article.article-si-llueve-sma .article-extra--itinerary,
  .article.article-si-llueve-sma .article-extra--by-trip,
  .article.article-si-llueve-sma .article-extra--gear,
  .article.article-si-llueve-sma .article-extra--editorial,
  .article.article-si-llueve-sma .article-faq {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — sin carro */
.article.article-sin-carro-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-sin-carro-sma .article-extra + .article-faq,
.article.article-sin-carro-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-sin-carro-sma .article-extra--verdict {
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-sin-carro-sma .article-extra--verdict h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-sin-carro-sma .article-extra--why {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-sin-carro-sma .article-extra--why h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--trip-type {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-sin-carro-sma .article-extra--trip-type h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--trip-type ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}

.article.article-sin-carro-sma .article-extra--hotel {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-sin-carro-sma .article-extra--hotel h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--hotel ul li strong {
  color: var(--color-accent);
}

.article.article-sin-carro-sma .article-extra--arrival {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-sin-carro-sma .article-extra--arrival h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--arrival ul li strong {
  color: var(--color-accent);
}

.article.article-sin-carro-sma .article-extra--moving {
  padding: 1rem 1.05rem 1rem 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-sin-carro-sma .article-extra--moving h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--plans {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-sin-carro-sma .article-extra--plans h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--miss-car {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-sin-carro-sma .article-extra--miss-car h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--miss-car ul li strong {
  color: var(--color-accent);
}

.article.article-sin-carro-sma .article-extra--itinerary {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-sin-carro-sma .article-extra--itinerary h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--itinerary p strong:first-child {
  color: var(--color-accent);
}

.article.article-sin-carro-sma .article-extra--mistakes {
  padding: 1rem 1.05rem 1rem 0.95rem;
  border-left: 2px solid rgba(201, 162, 39, 0.26);
}

.article.article-sin-carro-sma .article-extra--mistakes h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--profiles {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-sin-carro-sma .article-extra--profiles h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-extra--profiles p strong:first-child {
  color: var(--color-accent);
}

.article.article-sin-carro-sma .article-extra--editorial {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-sin-carro-sma .article-extra--editorial h2 {
  margin-top: 0;
}

.article.article-sin-carro-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-sin-carro-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-sin-carro-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-sin-carro-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-sin-carro-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-sin-carro-sma .article-extra--verdict {
    padding: 1.05rem 1rem;
  }

  .article.article-sin-carro-sma .article-extra--why,
  .article.article-sin-carro-sma .article-extra--trip-type,
  .article.article-sin-carro-sma .article-extra--hotel,
  .article.article-sin-carro-sma .article-extra--arrival,
  .article.article-sin-carro-sma .article-extra--moving,
  .article.article-sin-carro-sma .article-extra--plans,
  .article.article-sin-carro-sma .article-extra--miss-car,
  .article.article-sin-carro-sma .article-extra--itinerary,
  .article.article-sin-carro-sma .article-extra--mistakes,
  .article.article-sin-carro-sma .article-extra--profiles,
  .article.article-sin-carro-sma .article-extra--editorial,
  .article.article-sin-carro-sma .article-faq {
    padding: 0.9rem 0.95rem;
  }

  .article.article-sin-carro-sma .article-extra--hotel {
    padding: 1rem 1.05rem;
  }
}

/* San Miguel — Fábrica La Aurora (¿vale la pena?) */
.article.article-fabrica-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-fabrica-sma .article-extra + .article-faq,
.article.article-fabrica-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-fabrica-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-fabrica-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-fabrica-sma .article-extra--what {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-fabrica-sma .article-extra--what h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--why {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-fabrica-sma .article-extra--why h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--when-yes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-fabrica-sma .article-extra--when-yes h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--when-yes ul li strong {
  color: var(--color-accent);
}

.article.article-fabrica-sma .article-extra--when-no {
  padding: 1rem 1.05rem 1rem 1rem;
  border-left: 2px solid rgba(160, 80, 70, 0.22);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-fabrica-sma .article-extra--when-no h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--time,
.article.article-fabrica-sma .article-extra--by-trip {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-fabrica-sma .article-extra--time h2,
.article.article-fabrica-sma .article-extra--by-trip h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--by-trip p strong:first-child {
  color: var(--color-accent);
}

.article.article-fabrica-sma .article-extra--pareja {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-fabrica-sma .article-extra--pareja h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--contexts {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(130, 165, 195, 0.2);
  background: rgba(130, 165, 195, 0.045);
}

.article.article-fabrica-sma .article-extra--contexts h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--contexts p strong:first-child {
  color: var(--color-accent);
}

.article.article-fabrica-sma .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-fabrica-sma .article-extra--mistakes h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--mistakes ul li strong {
  color: var(--color-accent);
}

.article.article-fabrica-sma .article-extra--compare {
  padding: 1rem 1.05rem 1rem 0.95rem;
  border-left: 2px solid rgba(201, 162, 39, 0.28);
}

.article.article-fabrica-sma .article-extra--compare h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-extra--compare p strong:first-child {
  color: var(--color-accent);
}

.article.article-fabrica-sma .article-extra--editorial {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-fabrica-sma .article-extra--editorial h2 {
  margin-top: 0;
}

.article.article-fabrica-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-fabrica-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-fabrica-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-fabrica-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-fabrica-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-fabrica-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-fabrica-sma .article-extra--what,
  .article.article-fabrica-sma .article-extra--why,
  .article.article-fabrica-sma .article-extra--when-yes,
  .article.article-fabrica-sma .article-extra--when-no,
  .article.article-fabrica-sma .article-extra--time,
  .article.article-fabrica-sma .article-extra--by-trip,
  .article.article-fabrica-sma .article-extra--pareja,
  .article.article-fabrica-sma .article-extra--contexts,
  .article.article-fabrica-sma .article-extra--mistakes,
  .article.article-fabrica-sma .article-extra--compare,
  .article.article-fabrica-sma .article-extra--editorial,
  .article.article-fabrica-sma .article-faq {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — Atotonilco desde San Miguel */
.article.article-atotonilco-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-atotonilco-sma .article-extra + .article-faq,
.article.article-atotonilco-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-atotonilco-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(120, 75, 90, 0.45);
  background: linear-gradient(135deg, rgba(120, 75, 90, 0.07) 0%, rgba(201, 162, 39, 0.04) 100%);
}

.article.article-atotonilco-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-atotonilco-sma .article-extra--special {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-atotonilco-sma .article-extra--special h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--expect {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-atotonilco-sma .article-extra--expect h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--time {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-atotonilco-sma .article-extra--time h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--when-yes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-atotonilco-sma .article-extra--when-yes h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--when-yes p strong:first-child {
  color: var(--color-accent);
}

.article.article-atotonilco-sma .article-extra--when-no {
  padding: 1rem 1.05rem 1rem 1rem;
  border-left: 2px solid rgba(160, 80, 70, 0.22);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-atotonilco-sma .article-extra--when-no h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--for-yes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.03);
}

.article.article-atotonilco-sma .article-extra--for-yes h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--for-no {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-atotonilco-sma .article-extra--for-no h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--itinerary {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-atotonilco-sma .article-extra--itinerary h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--itinerary h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 1.2rem 0 0.45rem;
}

.article.article-atotonilco-sma .article-extra--itinerary h3:first-of-type {
  margin-top: 0.75rem;
}

.article.article-atotonilco-sma .article-extra--logistics {
  padding: 1rem 1.05rem 1rem 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-atotonilco-sma .article-extra--logistics h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--combine {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-atotonilco-sma .article-extra--combine h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--avoid-combo {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.04);
}

.article.article-atotonilco-sma .article-extra--avoid-combo h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--accessibility {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-atotonilco-sma .article-extra--accessibility h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-extra--editorial {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-atotonilco-sma .article-extra--editorial h2 {
  margin-top: 0;
}

.article.article-atotonilco-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
}

.article.article-atotonilco-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-atotonilco-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-atotonilco-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-atotonilco-sma .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-atotonilco-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-atotonilco-sma .article-extra--special,
  .article.article-atotonilco-sma .article-extra--expect,
  .article.article-atotonilco-sma .article-extra--time,
  .article.article-atotonilco-sma .article-extra--when-yes,
  .article.article-atotonilco-sma .article-extra--when-no,
  .article.article-atotonilco-sma .article-extra--for-yes,
  .article.article-atotonilco-sma .article-extra--for-no,
  .article.article-atotonilco-sma .article-extra--itinerary,
  .article.article-atotonilco-sma .article-extra--logistics,
  .article.article-atotonilco-sma .article-extra--combine,
  .article.article-atotonilco-sma .article-extra--avoid-combo,
  .article.article-atotonilco-sma .article-extra--accessibility,
  .article.article-atotonilco-sma .article-extra--editorial,
  .article.article-atotonilco-sma .article-faq {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — El Charco del Ingenio */
.article.article-charco-sma .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-charco-sma .article-extra + .article-faq,
.article.article-charco-sma .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-charco-sma .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(74, 115, 90, 0.5);
  background: linear-gradient(135deg, rgba(74, 115, 90, 0.09) 0%, rgba(201, 162, 39, 0.05) 100%);
}

.article.article-charco-sma .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-charco-sma .article-extra--what {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--color-surface) 40%);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.article.article-charco-sma .article-extra--what h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--why {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(74, 115, 90, 0.045);
}

.article.article-charco-sma .article-extra--why h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--who {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-charco-sma .article-extra--who h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--when-no {
  padding: 1rem 1.05rem 1rem 1rem;
  border-left: 2px solid rgba(160, 80, 70, 0.22);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-charco-sma .article-extra--when-no h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--expect {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-charco-sma .article-extra--expect h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--time {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-charco-sma .article-extra--time h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--timing {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.03);
}

.article.article-charco-sma .article-extra--timing h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--accessibility {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-charco-sma .article-extra--accessibility h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--no-car {
  padding: 1rem 1.05rem 1rem 0.9rem;
  border-left: 2px solid rgba(74, 115, 90, 0.35);
  background: rgba(74, 115, 90, 0.045);
}

.article.article-charco-sma .article-extra--no-car h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--practical {
  padding: 1rem 1.05rem 1rem 0.9rem;
  border-left: 2px solid rgba(201, 162, 39, 0.24);
}

.article.article-charco-sma .article-extra--practical h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--itinerary {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-charco-sma .article-extra--itinerary h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--itinerary p strong:first-child {
  color: var(--color-accent);
}

.article.article-charco-sma .article-extra--compare {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-charco-sma .article-extra--compare h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-extra--editorial {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(74, 115, 90, 0.06) 0%, rgba(201, 162, 39, 0.04) 100%);
}

.article.article-charco-sma .article-extra--editorial h2 {
  margin-top: 0;
}

.article.article-charco-sma .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(74, 115, 90, 0.045);
}

.article.article-charco-sma .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-charco-sma .article-extra--related ul li {
  margin: 0;
}

.article.article-charco-sma .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-charco-sma .article-extra--related ul a:hover {
  border-color: rgba(74, 115, 90, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-charco-sma .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-charco-sma .article-extra--what,
  .article.article-charco-sma .article-extra--why,
  .article.article-charco-sma .article-extra--who,
  .article.article-charco-sma .article-extra--when-no,
  .article.article-charco-sma .article-extra--expect,
  .article.article-charco-sma .article-extra--time,
  .article.article-charco-sma .article-extra--timing,
  .article.article-charco-sma .article-extra--accessibility,
  .article.article-charco-sma .article-extra--no-car,
  .article.article-charco-sma .article-extra--practical,
  .article.article-charco-sma .article-extra--itinerary,
  .article.article-charco-sma .article-extra--compare,
  .article.article-charco-sma .article-extra--editorial,
  .article.article-charco-sma .article-faq {
    padding: 0.9rem 0.95rem;
  }
}

/* San Miguel — presupuesto medio o alto */
.article.article-presupuesto-medio .article-extra + .article-extra {
  margin-top: 1.25rem;
}

.article.article-presupuesto-medio .article-extra + .article-faq,
.article.article-presupuesto-medio .article-faq + .article-extra {
  margin-top: 1.25rem;
}

.article.article-presupuesto-medio .article-extra--intro {
  border-top: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(201, 162, 39, 0.55);
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(140, 110, 70, 0.05) 100%);
}

.article.article-presupuesto-medio .article-extra--intro h2 {
  margin-top: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
}

.article.article-presupuesto-medio .article-extra--diff {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-presupuesto-medio .article-extra--diff h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--diff p strong:first-child {
  color: var(--color-accent);
}

.article.article-presupuesto-medio .article-extra--worth {
  padding: 1rem 1.05rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.04);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.article.article-presupuesto-medio .article-extra--worth h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--worth h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 1.15rem 0 0.45rem;
}

.article.article-presupuesto-medio .article-extra--worth h3:first-of-type {
  margin-top: 0.75rem;
}

.article.article-presupuesto-medio .article-extra--less {
  padding: 1rem 1.05rem 1rem 1rem;
  border-radius: var(--radius);
  border-left: 2px solid rgba(160, 100, 70, 0.22);
  background: rgba(160, 100, 70, 0.04);
}

.article.article-presupuesto-medio .article-extra--less h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--less ul li strong {
  color: var(--color-accent);
}

.article.article-presupuesto-medio .article-extra--medium {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-presupuesto-medio .article-extra--medium h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--medium ul li strong {
  color: var(--color-accent);
}

.article.article-presupuesto-medio .article-extra--high {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.article.article-presupuesto-medio .article-extra--high h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--hotel-styles {
  padding: 1rem 1.05rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-presupuesto-medio .article-extra--hotel-styles h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--hotel-styles h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 1.1rem 0 0.45rem;
}

.article.article-presupuesto-medio .article-extra--hotel-styles h3:first-of-type {
  margin-top: 0.65rem;
}

.article.article-presupuesto-medio .article-extra--hotels-read {
  padding: 1rem 1.05rem 1rem 0.95rem;
  border-left: 2px solid rgba(201, 162, 39, 0.28);
  background: rgba(201, 162, 39, 0.03);
}

.article.article-presupuesto-medio .article-extra--hotels-read h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--hotels-read p strong:first-child {
  color: var(--color-accent);
}

.article.article-presupuesto-medio .article-extra--food {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.03);
}

.article.article-presupuesto-medio .article-extra--food h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--food ul li strong {
  color: var(--color-accent);
}

.article.article-presupuesto-medio .article-extra--location {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.article.article-presupuesto-medio .article-extra--location h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--location p strong:first-child {
  color: var(--color-accent);
}

.article.article-presupuesto-medio .article-extra--scenarios {
  padding: 1rem 1.05rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.035);
}

.article.article-presupuesto-medio .article-extra--scenarios h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--scenarios h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 1.1rem 0 0.45rem;
}

.article.article-presupuesto-medio .article-extra--scenarios h3:first-of-type {
  margin-top: 0.65rem;
}

.article.article-presupuesto-medio .article-extra--mistakes {
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(160, 80, 70, 0.12);
  background: rgba(160, 80, 70, 0.035);
}

.article.article-presupuesto-medio .article-extra--mistakes h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-extra--mistakes ul li strong {
  color: var(--color-accent);
}

.article.article-presupuesto-medio .article-extra--editorial {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.07) 0%, rgba(140, 110, 70, 0.04) 100%);
}

.article.article-presupuesto-medio .article-extra--editorial h2 {
  margin-top: 0;
}

.article.article-presupuesto-medio .article-faq {
  margin-top: 1.25rem;
  padding: 1.25rem 1.2rem 1.3rem;
  border-top: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(201, 162, 39, 0.045);
}

.article.article-presupuesto-medio .article-extra--related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article.article-presupuesto-medio .article-extra--related ul li {
  margin: 0;
}

.article.article-presupuesto-medio .article-extra--related ul a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.article.article-presupuesto-medio .article-extra--related ul a:hover {
  border-color: rgba(201, 162, 39, 0.28);
  background: var(--color-surface-elevated);
}

@media (max-width: 768px) {
  .article.article-presupuesto-medio .article-extra--intro {
    padding: 1.05rem 1rem;
    margin-bottom: 1.1rem;
  }

  .article.article-presupuesto-medio .article-extra--diff,
  .article.article-presupuesto-medio .article-extra--worth,
  .article.article-presupuesto-medio .article-extra--less,
  .article.article-presupuesto-medio .article-extra--medium,
  .article.article-presupuesto-medio .article-extra--high,
  .article.article-presupuesto-medio .article-extra--hotel-styles,
  .article.article-presupuesto-medio .article-extra--hotels-read,
  .article.article-presupuesto-medio .article-extra--food,
  .article.article-presupuesto-medio .article-extra--location,
  .article.article-presupuesto-medio .article-extra--scenarios,
  .article.article-presupuesto-medio .article-extra--mistakes,
  .article.article-presupuesto-medio .article-extra--editorial,
  .article.article-presupuesto-medio .article-faq {
    padding: 0.9rem 0.95rem;
  }
}

/* Mobile: article body + meta + breadcrumbs — readability (contrast & tap targets) */
@media (max-width: 768px) {
  .article .article-intro,
  .article-extra p,
  .article-extra li,
  .top10-list > li p {
    color: var(--color-muted-elevated);
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.75;
  }

  .article .article-intro {
    font-size: 1.1875rem;
  }

  .article .article-meta,
  .article .article-meta a {
    color: #a8a8a2;
    font-size: 0.9375rem;
  }

  /* Mobile Chrome/Safari: UA :link/:visited can override a { color } — keep byline on theme */
  .article .article-byline,
  .article .article-byline a,
  .article .article-byline a:link,
  .article .article-byline a:visited,
  .article .article-byline a:any-link {
    color: var(--color-link);
  }

  .breadcrumb {
    font-size: 0.875rem;
    color: #a8a8a2;
  }

  .breadcrumb a {
    color: #a8a8a2;
  }

  .breadcrumb .breadcrumb-sep {
    color: #a8a8a2;
  }

  .article .cta-block p,
  .article .cta-block-inline p {
    color: var(--color-muted-elevated);
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.75;
  }

  .article .article-toc h3 {
    color: #a8a8a2;
    font-size: 1.0625rem;
  }

  .article .article-toc li {
    font-size: 1.0625rem;
  }

  .article .article-related h2 {
    font-size: 0.875rem;
    color: #a8a8a2;
  }

  .article .article-related .article-list a {
    font-size: 1.0625rem;
  }
}

/* Article comparison tables (Top 10 destinos) */
.article-comparison .table-wrapper {
  overflow-x: auto;
}

.article-comparison table {
  width: 100%;
  border-collapse: collapse;
}

.article-comparison th,
.article-comparison td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
}

.article-comparison th {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.article-comparison td {
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .article-comparison th,
  .article-comparison td {
    font-size: 1rem;
  }
}

/* Article FAQ */
.article-faq {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.article-faq h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 1.25rem;
}


/* Article related */
.article-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.article-related h2 {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
}

.article-related .article-list a {
  padding: 0.6rem 0;
  font-size: 0.95rem;
}

/* Real de Catorce premium theme (article pages) */
body.real-de-catorce-page .article-extra,
body.real-de-catorce-page .article-faq {
  border-top: none;
  padding-top: 0;
  margin-top: 2.25rem;
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%),
              var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 2rem 1.5rem;
}

body.real-de-catorce-page .article-faq {
  margin-top: 2.75rem;
}

body.real-de-catorce-page .article-related {
  border-top: none;
  padding-top: 1.75rem;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.14) 0%, rgba(201, 162, 39, 0.04) 35%, rgba(255, 255, 255, 0.01) 100%),
              var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-md);
}

body.real-de-catorce-page .article-related h2 {
  color: var(--color-accent);
}

body.real-de-catorce-page .article-intro {
  margin-bottom: 2rem;
}

/* Back link */
.back-link {
  margin-top: 2.5rem;
}

.back-link a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color var(--transition);
}

.back-link a:hover {
  color: var(--color-link);
}

@media (max-width: 768px) {
  .back-link a {
    color: var(--color-muted-elevated);
    font-size: 1rem;
  }
}

/* Share buttons */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
}

.share-label {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-right: 0.25rem;
  flex-basis: 100%;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  min-height: 2.75rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.share-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-muted);
  color: var(--color-link-hover);
}

.share-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.share-whatsapp:hover { border-color: #25D366; color: #25D366; }
.share-twitter:hover { border-color: #1DA1F2; color: #1DA1F2; }
.share-copy.copied {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* Footer */
.site-footer {
  margin-top: 4rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
  text-align: center;
}

.site-footer a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer a:hover {
  color: var(--color-link);
}

.site-footer p {
  margin: 0.35rem 0;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.25rem;
  margin-top: 0.75rem;
}

.site-footer .footer-links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition);
}

.site-footer .footer-links a:hover {
  color: var(--color-link);
}

/* Rich footer (index2 / home v2) */
.site-footer-rich .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
}

.site-footer-rich .footer-copy {
  margin: 0;
}

.site-footer-rich .footer-links {
  margin: 0;
  gap: 0 1rem;
}

.site-footer-rich .footer-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.site-footer-rich .footer-social-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.site-footer-rich .footer-social-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
}

.site-footer-rich .footer-social-link:hover {
  color: var(--color-link-hover);
}

.site-footer-rich .footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border-radius: var(--radius);
  transition: color 0.2s ease, background 0.2s ease;
}

.site-footer-rich .footer-social-icon:hover {
  background: var(--color-accent-soft);
}

.site-footer-rich .footer-social-icon svg {
  display: block;
}

@media (max-width: 600px) {
  .site-footer-rich .container {
    flex-direction: column;
  }

  .site-footer-rich .footer-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Minimal footer – no nav duplication */
.site-footer-minimal .container {
  text-align: center;
}

.site-footer-minimal .footer-copy {
  margin: 0 0 0.5rem;
}

.site-footer-minimal .footer-legal {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.site-footer-minimal .footer-legal a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer-minimal .footer-legal a:hover {
  color: var(--color-link);
}

.site-footer-minimal .footer-sep {
  margin: 0 0.5rem;
  opacity: 0.6;
}

.site-footer-minimal .footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.site-footer-minimal .footer-social-link {
  color: var(--color-accent);
  transition: color 0.2s ease, background 0.2s ease;
}

.site-footer-minimal .footer-social-link:hover {
  color: var(--color-link-hover);
}

.site-footer-minimal .footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border-radius: var(--radius);
  transition: color 0.2s ease, background 0.2s ease;
}

.site-footer-minimal .footer-social-icon:hover {
  background: var(--color-accent-soft);
}

.site-footer-minimal .footer-social-icon svg {
  display: block;
}

.site-footer-minimal .footer-disclosure {
  margin: 0 auto;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 480px;
}

.site-footer-minimal .footer-disclosure a {
  color: var(--color-accent);
}

/* Legal / Aviso de privacidad */
.page-legal .article-header h1 {
  margin-bottom: 0.5rem;
}

.legal-block {
  margin: 2rem 0;
}

.legal-block h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.legal-block p,
.legal-block ul {
  color: var(--color-muted);
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-block ul {
  padding-left: 1.5rem;
}

.legal-block a.link-accent,
a.link-accent {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-block a.link-accent:hover,
a.link-accent:hover {
  color: var(--color-link-hover);
  border-bottom-color: var(--color-accent);
}

.legal-block li {
  margin: 0.25rem 0;
}

/* Premium refinements */
::selection {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Subtle scrollbar (webkit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* Mobile: share buttons */
@media (max-width: 768px) {
  .share-buttons {
    gap: 0.75rem;
  }

  .share-label {
    flex-basis: 100%;
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
    color: #a8a8a2;
  }

  .share-btn {
    flex: 0 0 auto;
    min-width: 5rem;
    min-height: 2.75rem;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========== HOMEPAGE WOW ========== */
.page-home .hero-home {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem 4.5rem;
  text-align: center;
  overflow: hidden;
}

.page-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-bg);
}

.page-home .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,0.35) 0%, rgba(8,8,8,0.6) 100%);
  z-index: 1;
}


.page-home .hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width-hub);
}

.page-home .hero-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin: 0 0 0.75rem;
  opacity: 0;
  animation: homeFadeUp 0.6s ease 0.1s forwards;
}

.page-home .hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--color-text);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 2px 12px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.4);
  opacity: 0;
  animation: homeFadeUp 0.6s ease 0.2s forwards;
}

.page-home .hero-title::after {
  content: '';
  display: block;
  width: 4rem;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin: 1rem auto 0;
  border-radius: 2px;
  opacity: 0;
  animation: homeFadeUp 0.5s ease 0.5s forwards;
}

.page-home .hero-tagline {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.02em;
  margin: 0 auto 0.5rem;
  opacity: 0;
  animation: homeFadeUp 0.6s ease 0.28s forwards;
}

.page-home .hero-desc {
  color: var(--color-muted);
  font-size: 1.1rem;
  max-width: 420px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
  opacity: 0;
  animation: homeFadeUp 0.6s ease 0.35s forwards;
}

.page-home .hero-cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  opacity: 0;
  animation: homeFadeUp 0.6s ease 0.5s forwards;
}

.page-home .hero-cta:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(201,162,39,0.35);
}

@keyframes homeFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Home CTA block – gradient border + badge */
.cta-block-home-wow {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              linear-gradient(135deg, var(--color-accent), rgba(201,162,39,0.3), var(--color-accent)) border-box;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(201,162,39,0.08);
}

.cta-block-home-wow .cta-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}

/* Featured cards grid */
.featured-cards .featured-heading {
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.featured-card {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-accent);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.featured-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,162,39,0.35);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,162,39,0.1);
}

.featured-card .featured-num {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent);
  opacity: 0.35;
  line-height: 1;
}

.featured-card .featured-card-link {
  display: block;
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  padding-right: 2rem;
  transition: color 0.2s ease;
}

.featured-card .featured-card-link:hover {
  color: var(--color-link-hover);
}

.featured-card .featured-line {
  display: block;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Home search – pill style */
.search-wrap-home {
  margin: 1.25rem 0 1.5rem;
}

.search-box-home {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-box-home:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--color-accent-soft);
}

.search-input-home {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0.9rem 1.25rem;
  font-size: 1.05rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.search-input-home::placeholder {
  color: var(--color-muted);
}

.search-input-home:focus {
  outline: none;
  box-shadow: none;
}

.search-btn-home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.1rem;
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  cursor: pointer;
  transition: background 0.2s;
}

.search-btn-home:hover {
  background: var(--color-link-hover);
}

/* Section nav pills */
.section-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 0 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.section-nav-pills a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.section-nav-pills a:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-link);
}

/* Article list home – row hover + subtle stagger */
.article-list-home li {
  animation: homeFadeUp 0.4s ease backwards;
}

.article-list-home li:nth-child(1) { animation-delay: 0.02s; }
.article-list-home li:nth-child(2) { animation-delay: 0.04s; }
.article-list-home li:nth-child(3) { animation-delay: 0.06s; }
.article-list-home li:nth-child(4) { animation-delay: 0.08s; }
.article-list-home li:nth-child(5) { animation-delay: 0.1s; }
.article-list-home li:nth-child(6) { animation-delay: 0.12s; }
.article-list-home li:nth-child(7) { animation-delay: 0.14s; }
.article-list-home li:nth-child(8) { animation-delay: 0.16s; }
.article-list-home li:nth-child(9) { animation-delay: 0.18s; }
.article-list-home li:nth-child(10) { animation-delay: 0.2s; }
.article-list-home li:nth-child(n+11) { animation-delay: 0.22s; }

.article-list-home a {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.article-list-home a:hover {
  background: var(--color-accent-soft);
  border-color: rgba(201,162,39,0.2);
  padding-left: 1.35rem;
}

/* Home: Viajes section with search + list */
.home-viajes-cta {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--color-border);
}

.home-viajes-cta h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.5rem;
}

.home-viajes-desc {
  color: var(--color-muted);
  font-size: 1rem;
  margin: 0 0 1rem;
}

.home-viajes-cta .search-wrap-home {
  margin-bottom: 1.25rem;
}

.home-viajes-cta .category-cta {
  margin: 1.5rem 0 0;
}

/* Home: Compara destinos block */
.home-compare-block {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--color-border);
}

.home-compare-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.home-compare-desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.home-compare-form {
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
}

.home-compare-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.home-compare-field {
  flex: 1;
  min-width: 160px;
}

.home-compare-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.home-compare-field select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
  text-align: left;
  text-align-last: left;
}

.home-compare-field select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.home-compare-btn {
  padding: 0.65rem 1.25rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.home-compare-btn:hover {
  background: var(--color-link-hover);
}

.home-compare-result {
  display: none;
  overflow-x: auto;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 0;
}

.home-compare-result.visible {
  display: block;
}

.home-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.home-compare-table th,
.home-compare-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  font-size: 0.9rem;
}

.home-compare-table th {
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-muted);
  width: 20%;
}

.home-compare-table .dest-name {
  font-weight: 700;
  color: var(--color-accent);
}

.home-compare-cta {
  padding: 1rem;
  text-align: center;
}

.home-compare-cta a {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0.5rem 0.5rem 0;
}

.home-compare-cta a:hover {
  background: var(--color-link-hover);
}

/* Home compare: mobile */
@media (max-width: 640px) {
  .home-compare-block {
    padding: 1.5rem 0 2rem;
  }

  .home-compare-form {
    padding: 1rem;
  }

  .home-compare-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .home-compare-field:nth-child(3) {
    display: none;
  }

  .home-compare-field {
    min-width: 0;
  }

  .home-compare-field select {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    min-height: 48px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8a85' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
  }

  .home-compare-btn {
    width: 100%;
    padding: 0.9rem 1.25rem;
    min-height: 48px;
    font-size: 1rem;
  }

  .home-compare-result {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    -webkit-overflow-scrolling: touch;
  }

  .home-compare-table th,
  .home-compare-table td {
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
  }

  .home-compare-table th:first-child {
    min-width: 110px;
    font-size: 0.8rem;
  }

  .home-compare-table .dest-name {
    font-size: 0.95rem;
  }

  .home-compare-cta {
    padding: 1rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .home-compare-cta a {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 0.75rem 1rem;
    text-align: center;
  }
}

/* Home v2: stats strip */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  padding: 1.25rem 1rem;
  margin: 1rem 0 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.home-stat {
  font-size: 0.95rem;
  color: var(--color-muted);
}

.home-stat strong {
  color: var(--color-accent);
  font-weight: 600;
  margin-right: 0.2rem;
}

/* Home v2: revenue strip (affiliate / useful links) */
.home-revenue-strip {
  padding: 1.5rem 0;
  margin: 0 0 1rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.home-revenue-intro {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.home-revenue-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}

.home-revenue-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-revenue-link:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-link);
}

/* Ad slot placeholder – replace with real ad code */
.ad-slot {
  min-height: 50px;
  margin: 1rem 0;
}

.ad-slot-home {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* Footer disclosure */
.footer-disclosure {
  width: 100%;
  flex-basis: 100%;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.footer-disclosure a {
  color: var(--color-accent);
}

/* Home v2: trust line */
.home-trust-line {
  text-align: center;
  font-size: 1rem;
  color: var(--color-muted);
  margin: 1rem 0 1.5rem;
  padding: 0.5rem 0;
}

/* Home v2: Guías para empezar */
.home-empezar {
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.home-empezar-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.35rem;
}

.home-empezar-desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

.home-empezar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.home-empezar-list a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-empezar-list a:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-link);
}

/* Home v2: testimonials – quote style, no cards */
.home-testimonials {
  margin: 2.5rem 0;
  padding: 2.5rem 1rem;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.03) 0%, transparent 100%);
}

.home-testimonials-heading {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 2rem;
  text-align: center;
}

.home-testimonials-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.home-testimonial {
  margin: 0;
  padding: 0;
  position: relative;
}

.home-testimonial::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 0;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.35;
}

.home-testimonial-text {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text);
  font-style: italic;
  margin: 0 0 1rem;
  padding-top: 1.5rem;
}

.home-testimonial-cite {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--color-muted);
  display: block;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle);
}

.home-testimonials-divider {
  display: none;
}

@media (max-width: 768px) {
  .home-testimonials-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Home v2: Actualizado 2026 */
.home-updated {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Home v2: final CTA */
.home-cta-final {
  text-align: center;
  padding: 2.5rem 1.5rem;
  margin: 2rem 0 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.98) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.home-cta-final-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.home-cta-final-desc {
  color: var(--color-muted);
  font-size: 1rem;
  margin: 0 0 1.25rem;
}

.cta-button-large {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  font-size: 1.05rem;
}

/* Home v2: Explorar por tema */
.home-explore-themes {
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
}

.home-explore-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.35rem;
}

.home-explore-desc {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}

.theme-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.theme-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.theme-card:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 162, 39, 0.4);
  background: var(--color-surface-elevated);
  color: var(--color-link);
}

.theme-card-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.theme-card:hover .theme-card-title {
  color: var(--color-link);
}

.theme-card-desc {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.theme-card:hover .theme-card-desc {
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .theme-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .theme-cards {
    grid-template-columns: 1fr;
  }
}

/* Home v2: search lead line */
.home-search-lead {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}

/* Home v2: Por qué Top10.mx */
.home-how {
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.home-how-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1.25rem;
}

.home-how-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 1rem;
  text-align: center;
}

.home-how-subheading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1.5rem 0 1.5rem;
}

.home-how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
  text-align: left;
  margin-bottom: 2rem;
}

.home-how-item {
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

.home-how-item-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
  text-transform: none;
  letter-spacing: 0;
}

.home-how-item-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

.home-how-footer {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
}

@media (max-width: 600px) {
  .home-how-grid {
    grid-template-columns: 1fr;
  }
}

/* Back to top – gold ring when visible */
.page-home .back-to-top.is-visible {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 20px rgba(201,162,39,0.25);
}

@media (max-width: 768px) {
  .page-home .hero-home {
    min-height: 38vh;
    padding: 3rem 1rem 3.5rem;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-card .featured-num {
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.25rem;
  }
}

/* ========== HUB HERO WITH BACKGROUND IMAGE ========== */
.hub-hero-with-bg {
  position: relative;
  min-height: 36vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hub-hero-with-bg .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-bg);
}

.hub-hero-with-bg .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-hero-with-bg .hero-overlay {
  position: absolute;
  inset: 0;
  /* Stronger scrim: light/warm hero photos (e.g. Real de Catorce at dawn) need more than a light wash */
  background:
    radial-gradient(ellipse 95% 85% at 50% 30%, rgba(0, 0, 0, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.62) 0%, rgba(8, 8, 8, 0.42) 45%, rgba(6, 6, 6, 0.78) 100%);
  z-index: 1;
}

.hub-hero-with-bg .hub-hero-inner,
.hub-hero-with-bg .container.hub-hero-inner {
  position: relative;
  z-index: 2;
}

/* Viajes hub: hero section with image */
.page-viajes-wow .hub-hero-viajes.hub-hero-with-bg {
  padding: 4rem 0 3rem;
}

.page-viajes-wow .hub-hero-viajes .hub-hero-inner {
  width: 100%;
}

/* Sub-hub pages: article.hub-hero with image */
.hub-page-wow .hub-hero-with-bg {
  padding: 0;
  min-height: 38vh;
}

.hub-page-wow .hub-hero-with-bg .hub-hero-inner {
  padding: 3.5rem 1.5rem 2.5rem;
}

.hub-hero-with-bg .hub-hero-inner h1,
.hub-hero-with-bg .hub-hero-inner .section-hero-desc,
.page-viajes-wow .hub-hero-with-bg .hub-hero-intro h1 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.85), 0 4px 32px rgba(0, 0, 0, 0.55);
}

/* Hub intro uses --color-muted elsewhere; on photo heroes mid-gray fails WCAG on bright areas */
.hub-hero-with-bg .hub-hero-inner .hub-intro,
.hub-hero-with-bg .hub-hero-inner .hub-intro p {
  color: rgba(248, 248, 244, 0.96);
}

.hub-hero-with-bg .hub-hero-inner .article-meta,
.hub-hero-with-bg .hub-hero-inner .article-meta a {
  color: rgba(255, 255, 255, 0.92);
}

.hub-hero-with-bg .hub-hero-inner .hub-stat {
  color: rgba(255, 255, 255, 0.9);
}

.hub-hero-with-bg .hub-hero-inner .article-meta a,
.hub-hero-with-bg .hub-hero-inner .hub-intro,
.hub-hero-with-bg .hub-hero-inner .hub-stat,
.page-viajes-wow .hub-hero-with-bg .hub-hero-intro .hub-hero-label,
.page-viajes-wow .hub-hero-with-bg .hub-hero-intro .section-hero-desc,
.page-viajes-wow .hub-hero-with-bg .hub-hero-intro .hub-hero-cta {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 12px rgba(0, 0, 0, 0.8), 0 4px 24px rgba(0, 0, 0, 0.55);
}

/* Antes de ir: links on hero image must be high contrast */
.hub-hero-with-bg .hub-hero-inner .hub-antes-de-ir {
  color: var(--color-text);
  margin-top: 1rem;
}

.hub-hero-with-bg .hub-hero-inner .hub-antes-de-ir ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.hub-hero-with-bg .hub-hero-inner .hub-antes-de-ir li {
  margin-bottom: 0.35rem;
}

.hub-hero-with-bg .hub-hero-inner .hub-antes-de-ir a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.5);
}

.hub-hero-with-bg .hub-hero-inner .hub-antes-de-ir a:hover {
  color: var(--color-link-hover);
}

/* ========== VIAJES HUB (main) WOW ========== */
.page-viajes-wow .hub-hero-viajes {
  background: var(--color-bg);
  padding: 3.5rem 0 2.5rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border);
}

.page-viajes-wow .hub-hero-viajes:not(.hub-hero-with-bg) {
  background: linear-gradient(180deg, rgba(15,15,15,0.97) 0%, var(--color-bg) 100%),
              radial-gradient(ellipse 90% 50% at 50% 0%, rgba(201,162,39,0.12) 0%, transparent 55%);
}

.page-viajes-wow .hub-hero-intro {
  text-align: center;
  padding: 0;
}

.page-viajes-wow .hub-hero-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
  opacity: 0;
  animation: homeFadeUp 0.5s ease 0.1s forwards;
}

.page-viajes-wow .hub-hero-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  opacity: 0;
  animation: homeFadeUp 0.5s ease 0.2s forwards;
}

.page-viajes-wow .hub-hero-intro h1::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin: 0.75rem auto 0;
  border-radius: 2px;
  opacity: 0;
  animation: homeFadeUp 0.4s ease 0.4s forwards;
}

.page-viajes-wow .section-hero-desc {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: homeFadeUp 0.5s ease 0.3s forwards;
}

.page-viajes-wow .hub-hero-cta {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 1rem;
  opacity: 0;
  animation: homeFadeUp 0.5s ease 0.45s forwards;
}

.page-viajes-wow .cta-block-hub-wow {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              linear-gradient(135deg, var(--color-accent), rgba(201,162,39,0.25), var(--color-accent)) border-box;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(201,162,39,0.06);
}

.page-viajes-wow .cta-block-hub-wow .cta-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}

.page-viajes-wow .search-wrap-hub {
  margin: 1.25rem 0 1.5rem;
}

.search-results-wrap {
  margin-top: 0.5rem;
}

.search-no-results {
  color: var(--color-muted);
  font-size: 1rem;
  padding: 2rem 0;
  margin: 0;
}

.page-viajes-wow .search-box-hub {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-viajes-wow .search-box-hub:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--color-accent-soft);
}

.page-viajes-wow .search-input-hub {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0.85rem 1.25rem;
  font-size: 1.05rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-viajes-wow .search-input-hub::placeholder {
  color: var(--color-muted);
}

.page-viajes-wow .search-input-hub:focus {
  outline: none;
  box-shadow: none;
}

.page-viajes-wow .search-btn-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.1rem;
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  cursor: pointer;
  transition: background 0.2s;
}

.page-viajes-wow .search-btn-hub:hover {
  background: var(--color-link-hover);
}

.page-viajes-wow .categories-hub-wow {
  padding: 2.25rem 0;
  border-top: 1px solid var(--color-border);
}

.page-viajes-wow .categories-hub-wow:first-of-type {
  border-top: none;
  padding-top: 0;
}

.page-viajes-wow .categories-hub-wow h2 a {
  position: relative;
  padding-bottom: 0.5rem;
}

.page-viajes-wow .categories-hub-wow h2 a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  opacity: 0.7;
}

.page-viajes-wow .categories-hub-wow .article-list li {
  animation: homeFadeUp 0.35s ease backwards;
}

.page-viajes-wow .categories-hub-wow .article-list li:nth-child(1) { animation-delay: 0.02s; }
.page-viajes-wow .categories-hub-wow .article-list li:nth-child(2) { animation-delay: 0.04s; }
.page-viajes-wow .categories-hub-wow .article-list li:nth-child(3) { animation-delay: 0.06s; }
.page-viajes-wow .categories-hub-wow .article-list li:nth-child(4) { animation-delay: 0.08s; }
.page-viajes-wow .categories-hub-wow .article-list li:nth-child(5) { animation-delay: 0.1s; }
.page-viajes-wow .categories-hub-wow .article-list li:nth-child(n+6) { animation-delay: 0.12s; }

.page-viajes-wow .categories-hub-wow .article-list a {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.page-viajes-wow .categories-hub-wow .article-list a:hover {
  background: var(--color-accent-soft);
  border-color: rgba(201,162,39,0.2);
  padding-left: 1.25rem;
}

/* ========== SUB-HUB PAGES (Destinos, Playas, etc.) WOW ========== */
.hub-page-wow .hub-hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(15,15,15,0.98) 0%, var(--color-bg) 100%),
              radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201,162,39,0.08) 0%, transparent 50%);
}

.hub-page-wow .hub-hero .article-meta {
  opacity: 0;
  animation: homeFadeUp 0.45s ease 0.05s forwards;
}

.hub-page-wow .hub-hero h1 {
  opacity: 0;
  animation: homeFadeUp 0.5s ease 0.15s forwards;
}

.hub-page-wow .hub-hero h1::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin-top: 1rem;
  border-radius: 2px;
  opacity: 0;
  animation: homeFadeUp 0.4s ease 0.35s forwards;
}

.hub-page-wow .hub-intro {
  opacity: 0;
  animation: homeFadeUp 0.5s ease 0.25s forwards;
}

.hub-page-wow .hub-stat {
  opacity: 0;
  animation: homeFadeUp 0.45s ease 0.4s forwards;
}

.hub-page-wow .cta-block-hub-wow {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              linear-gradient(135deg, var(--color-accent), rgba(201,162,39,0.25), var(--color-accent)) border-box;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(201,162,39,0.06);
}

.hub-page-wow .cta-block-hub-wow .cta-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}

.hub-page-wow .hub-filters-wrap h2 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.hub-page-wow .hub-filters-wrap .hub-subdesc {
  margin: 0 0 0.75rem;
}

.hub-page-wow .hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}

.hub-page-wow .hub-filters .hub-filter-all {
  margin-left: 1.25rem;
}

.hub-page-wow .hub-filters button {
  padding: 0.55rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hub-page-wow .hub-filters button:hover,
.hub-page-wow .hub-filters button.active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-link);
}

.hub-page-wow .hub-subsection {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.hub-page-wow .hub-subsection:last-of-type {
  border-bottom: none;
}

.hub-page-wow .hub-subsection h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border);
}

/* Keep WOW hub inline links on-brand (avoid default blue). */
.hub-page-wow .hub-intro a,
.hub-page-wow .hub-subsection a:not(.hub-card):not(.hub-quick-card):not(.cta-button),
.hub-page-wow .hub-list-all a {
  color: var(--color-accent);
}

.hub-page-wow .hub-intro a:hover,
.hub-page-wow .hub-subsection a:not(.hub-card):not(.hub-quick-card):not(.cta-button):hover,
.hub-page-wow .hub-list-all a:hover {
  color: #e5be5a;
}

.hub-page-wow .hub-card-grid {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hub-page-wow .hub-card {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 500;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  animation: homeFadeUp 0.4s ease backwards;
}

.hub-page-wow .hub-card-grid li:nth-child(1) .hub-card { animation-delay: 0.02s; }
.hub-page-wow .hub-card-grid li:nth-child(2) .hub-card { animation-delay: 0.04s; }
.hub-page-wow .hub-card-grid li:nth-child(3) .hub-card { animation-delay: 0.06s; }
.hub-page-wow .hub-card-grid li:nth-child(4) .hub-card { animation-delay: 0.08s; }
.hub-page-wow .hub-card-grid li:nth-child(5) .hub-card { animation-delay: 0.1s; }
.hub-page-wow .hub-card-grid li:nth-child(6) .hub-card { animation-delay: 0.12s; }
.hub-page-wow .hub-card-grid li:nth-child(7) .hub-card { animation-delay: 0.14s; }
.hub-page-wow .hub-card-grid li:nth-child(8) .hub-card { animation-delay: 0.16s; }
.hub-page-wow .hub-card-grid li:nth-child(n+9) .hub-card { animation-delay: 0.18s; }

.hub-page-wow .hub-card:hover {
  transform: translateY(-3px);
  background: var(--color-surface-elevated);
  border-color: rgba(201,162,39,0.3);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(201,162,39,0.08);
  color: var(--color-link);
}

.hub-page-wow .hub-explore {
  margin-top: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.hub-page-wow .hub-explore h2 {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
}

.hub-page-wow .hub-explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hub-page-wow .hub-explore-links a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hub-page-wow .hub-explore-links a:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-link);
}

/* Credentials / stats grid */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.credential-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.credential-card:hover {
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: var(--shadow-glow);
}

.credential-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.2;
}

.credential-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.35rem;
  line-height: 1.3;
}

/* ========== ENHANCED TABLES ========== */
.article table,
.article-extra table,
.top10-list table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.95rem;
}

.article table thead,
.article-extra table thead,
.top10-list table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.article table th,
.article-extra table th,
.top10-list table th {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--color-accent);
  white-space: nowrap;
}

.article table td,
.article-extra table td,
.top10-list table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  vertical-align: top;
}

.article table tbody tr:last-child td,
.article-extra table tbody tr:last-child td,
.top10-list table tbody tr:last-child td {
  border-bottom: none;
}

.article table tbody tr:nth-child(even),
.article-extra table tbody tr:nth-child(even),
.top10-list table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.article table tbody tr,
.article-extra table tbody tr,
.top10-list table tbody tr {
  transition: background 0.15s ease;
}

.article table tbody tr:hover,
.article-extra table tbody tr:hover,
.top10-list table tbody tr:hover {
  background: var(--color-accent-soft);
}

.article table a,
.article-extra table a,
.top10-list table a {
  color: var(--color-link);
  text-decoration: none;
}

.article table a:hover,
.article-extra table a:hover,
.top10-list table a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .article table,
  .article-extra table,
  .top10-list table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article table th,
  .article-extra table th,
  .article table td,
  .article-extra table td {
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
  }

  .top10-list table th,
  .top10-list table td {
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
  }
}

/* ========== ENHANCED TOP 10 LIST (replaces default numbered list) ========== */
.top10-list {
  list-style: none !important;
  counter-reset: top10-counter;
  padding: 0;
  margin: 0 0 2.5rem;
}

.top10-list > li {
  position: relative;
  counter-increment: top10-counter;
  padding: 1.75rem 1.5rem 1.75rem 4.5rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  line-height: 1.75;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.top10-list > li:hover {
  border-color: rgba(201, 162, 39, 0.35);
  box-shadow: var(--shadow-glow);
}

.top10-list > li::before {
  content: counter(top10-counter);
  position: absolute;
  left: 1rem;
  top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: linear-gradient(135deg, var(--color-accent), #a88520);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.3);
}

.top10-list > li > strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.top10-list > li p {
  margin: 0.75rem 0;
  color: var(--color-muted);
}

.top10-list > li ul,
.top10-list > li ol {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.top10-list a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.top10-list a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .top10-list > li {
    padding: 1.25rem 1rem 1.25rem 3.75rem;
  }
  
  .top10-list > li::before {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    left: 0.75rem;
    top: 1.25rem;
  }
}

/* ========== BREADCRUMBS (minimal text style) ========== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb a:hover {
  color: var(--color-link);
}

.breadcrumb .breadcrumb-sep {
  color: var(--color-muted);
  opacity: 0.6;
  user-select: none;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
  cursor: default;
}

/* ========== HUB: Primera vez en 3 pasos (Huasteca) ========== */
.hub-primera-vez-pasos {
  margin: 1.5rem 0 2rem;
  counter-reset: hub-paso;
}
.hub-primera-vez-pasos .hub-paso {
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.5rem;
}
.hub-primera-vez-pasos .hub-paso:last-child {
  margin-bottom: 0;
}
.hub-primera-vez-pasos .hub-paso::before {
  counter-increment: hub-paso;
  content: counter(hub-paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-primera-vez-pasos .hub-paso h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: 600;
}
.hub-primera-vez-pasos .hub-paso p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.hub-primera-vez-pasos .hub-paso a {
  color: var(--color-link);
}
.hub-primera-vez-pasos .hub-paso a:hover {
  text-decoration: underline;
}

/* ========== ENHANCED BACK TO TOP (smooth animation + arrow icon) ========== */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  text-decoration: none;
  font-size: 0;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.9);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.back-to-top::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c9a227' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 15l7-7 7 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease;
}

.back-to-top:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(201, 162, 39, 0.35);
  transform: translateY(-2px) scale(1);
}

.back-to-top:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230d0d0d' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 15l7-7 7 7'/%3E%3C/svg%3E");
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: translateY(0) scale(0.95);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    right: max(1rem, env(safe-area-inset-right, 1rem));
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    -webkit-tap-highlight-color: transparent;
  }
  
  .back-to-top::before {
    width: 1.4rem;
    height: 1.4rem;
  }
}

/* ========== ENHANCED FAQ ACCORDION ========== */
/* Oaxaca and some guides use .article-extra--faq; most articles use .article-faq */
.article-faq .faq-list,
.article-extra--faq .faq-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-faq .faq-item,
.article-extra--faq .faq-item {
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.article-faq .faq-item:hover,
.article-extra--faq .faq-item:hover {
  border-color: rgba(201, 162, 39, 0.3);
}

.article-faq .faq-item.is-open,
.article-extra--faq .faq-item.is-open {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.article-faq .faq-question,
.article-extra--faq .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.article-faq .faq-question:hover,
.article-extra--faq .faq-question:hover {
  background: rgba(255, 255, 255, 0.02);
}

.article-faq .faq-item.is-open .faq-question,
.article-extra--faq .faq-item.is-open .faq-question {
  color: var(--color-accent);
}

.article-faq .faq-icon,
.article-extra--faq .faq-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50%;
  transition: transform 0.25s ease, background 0.2s ease;
  line-height: 1;
}

.article-faq .faq-item.is-open .faq-icon,
.article-extra--faq .faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}

.article-faq .faq-answer,
.article-extra--faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.article-faq .faq-item.is-open .faq-answer,
.article-extra--faq .faq-item.is-open .faq-answer {
  max-height: 600px;
  padding: 0 1.25rem 1.25rem;
}

.article-faq .faq-answer a,
.article-extra--faq .faq-answer a {
  color: var(--color-link);
  text-decoration: none;
}

.article-faq .faq-answer a:hover,
.article-extra--faq .faq-answer a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* FAQ mobile — must follow base .faq-answer so color/size aren’t overridden */
@media (max-width: 768px) {
  .article-faq h2,
  .article-extra--faq h2 {
    font-size: 1.3rem;
  }

  .article-faq .faq-question,
  .article-extra--faq .faq-question {
    font-size: 1.0625rem;
    padding: 1.1rem 1.25rem;
    min-height: 3rem;
  }

  .article-faq .faq-answer,
  .article-faq .faq-answer p,
  .article-faq .faq-answer li,
  .article-extra--faq .faq-answer,
  .article-extra--faq .faq-answer p,
  .article-extra--faq .faq-answer li {
    color: var(--color-muted-elevated);
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.75;
  }

  .article-faq .faq-icon,
  .article-extra--faq .faq-icon {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 1.15rem;
  }
}


/* ========== PLAYAS ARTICLE HERO ========== */
.article-hero-media {
  margin: 0 0 1.5rem;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 42px rgba(9, 16, 28, 0.18);
  background: #dfe8ef;
}

.article-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.article-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 34, 0.04) 0%, rgba(10, 18, 28, 0.18) 100%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .article-hero-media {
    margin-bottom: 1.125rem;
    border-radius: 18px;
  }

  .article-hero-media img {
    aspect-ratio: 16 / 9;
  }
}
/* =============================================================== */
/* Quick Answer box — added to top of articles via add_quick_answers.py
   Promotes the first FAQ answer to be visible immediately, helping
   featured snippets and reducing bounce rate. */
/* =============================================================== */

.quick-answer {
  background: linear-gradient(165deg, rgba(201, 162, 39, 0.07) 0%, var(--color-surface) 60%);
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin: 0 0 2.5rem;
}

.quick-answer-label {
  display: inline-block;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
  padding: 0;
}

.quick-answer-question {
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 0.55rem;
}

.quick-answer-text {
  color: var(--color-text);
  opacity: 0.9;
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 600px) {
  .quick-answer {
    padding: 1.1rem 1.15rem;
    margin-bottom: 2rem;
  }
  .quick-answer-question {
    font-size: 1rem;
  }
  .quick-answer-text {
    font-size: 0.93rem;
  }
}
/* =============================================================== */
/* "Fin de semana desde [ciudad]" landing pages
   Generated by build_weekend_pages.py — pages live under
   viajes/fin-de-semana-desde/. */
/* =============================================================== */

/* --- Hub: list of origin cities --- */
.weekend-origins {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.5rem 0;
}
@media (min-width: 720px) {
  .weekend-origins {
    grid-template-columns: 1fr 1fr;
  }
}

.weekend-origin-card {
  background: var(--color-surface);
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.weekend-origin-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
}
.weekend-origin-card h2 a {
  color: var(--color-text);
  text-decoration: none;
}
.weekend-origin-card h2 a:hover {
  color: var(--color-accent);
}
.weekend-origin-meta {
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
  letter-spacing: 0.02em;
}
.weekend-origin-context {
  color: var(--color-text);
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.weekend-origin-link {
  display: inline-block;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.weekend-origin-link:hover {
  color: var(--color-link-hover);
}

/* --- Origin page: section per time bucket --- */
.weekend-section {
  margin: 2.5rem 0 3rem;
}
.weekend-section h2 {
  color: var(--color-accent);
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
.weekend-section-intro {
  color: var(--color-text);
  opacity: 0.85;
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.weekend-summary {
  background: rgba(201, 162, 39, 0.05);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.9rem 1.15rem;
  margin: 0 0 2rem;
  color: var(--color-text);
  opacity: 0.9;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- Destination cards on origin pages --- */
.weekend-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 760px) {
  .weekend-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.weekend-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border, rgba(255,255,255,0.06));
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
}
.weekend-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.weekend-card-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--color-text);
}
.weekend-card-time {
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.weekend-card-tipo {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0 0 0.7rem;
  font-style: italic;
}
.weekend-card-destacado,
.weekend-card-ideal {
  color: var(--color-text);
  opacity: 0.88;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 0.55rem;
}
.weekend-card-destacado strong,
.weekend-card-ideal strong {
  color: var(--color-accent);
  font-weight: 600;
}
.weekend-card-meta {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0.3rem 0 0.85rem;
}
.weekend-card-meta strong {
  color: var(--color-text);
  font-weight: 600;
}
.weekend-card-link {
  margin-top: auto;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding-top: 0.5rem;
}
.weekend-card-link:hover {
  color: var(--color-link-hover);
}

/* --- CTA block on viajes hub --- */
.cta-block-weekend {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.08) 0%, var(--color-surface) 70%);
  border: 1px solid rgba(201, 162, 39, 0.20);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
}
.cta-block-weekend h2 {
  color: var(--color-accent);
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
}
.cta-block-weekend p {
  color: var(--color-text);
  opacity: 0.88;
  margin: 0 0 1rem;
  line-height: 1.55;
}
.cta-block-weekend .cta-block-link {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.cta-block-weekend .cta-block-link:hover {
  background: var(--color-accent-hover, #e8c547);
}

/* --- Aside on destinos hub --- */
.destinos-cta-weekend {
  background: rgba(201, 162, 39, 0.05);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.95rem 1.2rem;
  margin: 1.5rem 0;
}
.destinos-cta-weekend p {
  margin: 0;
  color: var(--color-text);
  opacity: 0.9;
  font-size: 0.95rem;
  line-height: 1.55;
}
.destinos-cta-weekend a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.destinos-cta-weekend a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
/* =============================================================== */
/* Fixes para "Fin de semana desde [ciudad]" — append after the
   weekend page styles in styles.css */
/* =============================================================== */

/* ---------- Fix 1: CTA button text invisible ----------
   The site has existing .cta-block styles that override our color.
   Use !important to win specificity. */
.cta-block-weekend a.cta-block-link,
.cta-block.cta-block-weekend .cta-block-link,
.cta-block-weekend .cta-block-link:link,
.cta-block-weekend .cta-block-link:visited {
  color: #080808 !important;
  background: #c9a227 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.cta-block-weekend a.cta-block-link:hover,
.cta-block.cta-block-weekend .cta-block-link:hover {
  color: #080808 !important;
  background: #e8c547 !important;
}
.cta-block.cta-block-weekend .category-cta.cta-after-weekend {
  margin-top: 1rem;
}

/* ---------- Fix 2: bottom-of-page links unstyled ----------
   The weekend pages use <ul><li><a> and a <p> with inline links inside
   .article-related. Site CSS only styles .article-related .article-list a,
   not the bare ul/li/p children. */

/* "Otras ciudades de origen" list */
.article-related ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0.6rem 0 1.5rem;
}
.article-related ul li {
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.article-related ul li::marker {
  color: var(--color-muted);
}
.article-related ul li a,
.article-related ul li a:link,
.article-related ul li a:visited {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 500;
}
.article-related ul li a:hover {
  color: #e8c547;
  text-decoration: underline;
}

/* Tools links paragraph (Quiz · Comparar · Calcular) */
.article-related-tools {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}
.article-related-tools a,
.article-related-tools a:link,
.article-related-tools a:visited {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.article-related-tools a:hover {
  color: #e8c547;
  text-decoration: underline;
}

/* The intro paragraph "Otras ciudades de origen:" */
.article-related > p {
  color: var(--color-text);
  opacity: 0.9;
  margin: 0.5rem 0 0.4rem;
  font-size: 0.95rem;
}
/* =============================================================== */
/* Mobile nav scroll fix
   When dropdowns open in the hamburger menu and the menu becomes
   taller than the viewport, items at the bottom were unreachable
   because the nav has no max-height/scroll. This adds vertical
   scrolling to the open menu, capped at viewport height minus the
   header. */
/* =============================================================== */

@media (max-width: 768px) {
  .site-header.is-open .site-nav {
    /* Cap height so items below the fold remain reachable via scroll */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    /* Hint the browser to enable smooth scroll on iOS */
    -webkit-overflow-scrolling: touch;
    /* Sticky enough to stay accessible while the page is scrolled below it */
    overscroll-behavior: contain;
  }

  /* Slim, theme-matching scrollbar so it doesn't break visual style */
  .site-header.is-open .site-nav::-webkit-scrollbar {
    width: 6px;
  }
  .site-header.is-open .site-nav::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.4);
    border-radius: 3px;
  }
  .site-header.is-open .site-nav::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ---------- Travel tools hub, homepage tools, article CTAs ---------- */
.tool-hub-card-grid {
  list-style: none;
  margin: 2rem 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tool-hub-page .tool-hub-card {
  margin: 0;
  padding: 1.35rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tool-hub-card-title {
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.35;
  color: var(--color-text);
}
.tool-hub-card-desc {
  margin: 0;
  flex: 1;
  color: var(--color-muted);
  font-size: 0.97rem;
  line-height: 1.55;
}
.tool-hub-card .cta-button {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.home-tools-section {
  margin: 2rem 0 2.25rem;
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.home-tools-heading {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
.home-tools-desc {
  margin: 0 0 1.25rem;
  color: var(--color-muted);
  max-width: 52rem;
  line-height: 1.6;
}
.home-tools-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.home-tools-grid li {
  margin: 0;
}
.home-tool-card {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.home-tool-card:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
}
.home-tool-card strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: var(--color-accent);
}
.home-tool-card span {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.45;
}
.home-tools-more {
  margin: 1rem 0 0;
  font-size: 0.95rem;
}
.home-tools-more a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.home-tools-more a:hover {
  text-decoration: underline;
}

.article-tool-cta {
  margin: 1.75rem 0;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}
.article-tool-cta-title {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.article-tool-cta-text {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.97rem;
  line-height: 1.55;
}
.article-tool-cta .cta-button {
  display: inline-block;
}

.compare-seo-content {
  max-width: 900px;
  margin: 2.5rem auto 0;
  padding: 0 1rem;
}
.compare-seo-content h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}
.compare-seo-content h3 {
  font-size: 1.08rem;
  margin: 1.25rem 0 0.5rem;
}
.compare-seo-content p {
  line-height: 1.65;
  color: var(--color-text);
}
.compare-teaser-grid {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.compare-teaser-grid a {
  display: block;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  text-decoration: none;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
}
.compare-teaser-grid a:hover {
  border-color: var(--color-accent);
}
.compare-teaser-soon {
  display: block;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  font-size: 0.93rem;
}
.compare-teaser-soon span {
  display: block;
  font-size: 0.8rem;
  margin-top: 0.35rem;
  font-weight: 500;
  color: var(--color-muted);
  opacity: 0.85;
}

.comparativa-page .veredicto-box {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface-elevated);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.comparativa-page .comparativa-tool-links {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.comparativa-page .comparativa-tool-links a {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent);
}
.comparativa-page .comparativa-tool-links a:hover {
  border-color: var(--color-accent);
}