/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* Typography matches the live site: Roboto everywhere (headings use 500),
     body 16px / 1.7. The colours below are the live text colours. */
  --font-body: var(--font-roboto), Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);

  --navy: #002c6a;
  --navy-deep: #001a40;
  --accent: #1f5fd6;
  --accent-soft: #eaf1fd;
  --danger: #b00000;

  --heading: #10202b;
  --text: #2c4358;
  --muted: #4b586c;
  --nav-strong: #08233f;
  --footer-text: #e7e5e4;
  --footer-muted: #989898;
  --line: #e6e9ef;
  --surface: #f6f7f9;
  --white: #fff;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 26, 64, 0.06), 0 8px 24px rgba(0, 26, 64, 0.08);

  --container: 1180px;
  --gutter: 20px;
  --header-h: 76px;
  --nav-gap: 4px;
  --nav-pad-x: 12px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

/* mailto links (EmailLink.tsx, Privacidad): accent colour, underline on
   hover/focus, and long addresses wrap instead of overflowing on phones */
.email-link,
.prose a.email-link {
  min-width: 0;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.email-link:hover,
.email-link:focus-visible,
.prose a.email-link:hover,
.prose a.email-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* In Privacidad the address sits in <strong>, as on live */
.prose a.email-link {
  font-weight: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.spacer-100 {
  height: 88px;
}

.spacer-70 {
  height: 72px;
}

.logo {
  display: block;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Same width and gutters as .container, so the logo and the menu line up
   with the page content below. */
.site-header__inner {
  width: 100%;
  max-width: var(--container);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
  margin-right: 16px;
}

.site-header__logo .logo {
  width: auto;
  height: 58px;
}

/* Both navs use the same gap as the header row, so the seven items read as
   one evenly spaced group. The auto margins centre that group in the space
   right of the logo (they collapse to 0 when the row is tight). */
.primary-nav,
.dropdown-nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--nav-gap);
}

.primary-nav {
  margin-left: auto;
}

.dropdown-nav {
  margin-right: auto;
}

/* All seven menu items (the plain links and the dropdown buttons) share one
   look: bold navy, like the region/topic menus on live. Keep every font and
   box property here so the links and buttons can't drift apart again. */
.primary-nav a,
.dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--nav-pad-x);
  white-space: nowrap;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--nav-strong);
  transition:
    background-color 0.15s,
    color 0.15s;
}

/* Hover, keyboard focus, open dropdown and current page all look the same
   for links and buttons. (next/link doesn't set aria-current by itself;
   the selector is ready for when the header marks the current page.) */
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"],
.dropdown__trigger:hover,
.dropdown__trigger:focus-visible,
.dropdown.is-open .dropdown__trigger {
  background: var(--surface);
  color: var(--accent);
}

.dropdown {
  position: relative;
}

.dropdown__caret {
  font-size: 11px;
  transition: transform 0.2s;
}

.dropdown.is-open .dropdown__caret {
  transform: rotate(180deg);
}

.dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  min-width: 220px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.15s,
    transform 0.15s,
    visibility 0s linear 0.15s;
}

/* Bridge the gap so the panel doesn't close while the pointer moves to it */
.dropdown__panel::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto;
  height: 12px;
}

.dropdown.is-open .dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (hover: hover) {
  .dropdown:hover .dropdown__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .dropdown:hover .dropdown__trigger {
    background: var(--surface);
    color: var(--accent);
  }
}

.dropdown:last-child .dropdown__panel {
  left: auto;
  right: 0;
}

.dropdown__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--nav-strong);
  white-space: nowrap;
}

.dropdown__panel li:first-child a {
  font-weight: 700;
}

.dropdown__panel a:hover,
.dropdown__panel a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---- Phone menu (button + drop-down panel) ---- */
.mobile-nav {
  display: none;
  margin-left: auto;
}

.mobile-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--heading);
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.mobile-nav__toggle.is-open,
.mobile-nav__toggle:hover {
  background: var(--surface);
}

.mobile-nav__icon {
  display: grid;
  gap: 4px;
  width: 18px;
}

.mobile-nav__icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

.mobile-nav__toggle.is-open .mobile-nav__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-nav__toggle.is-open .mobile-nav__icon span:nth-child(2) {
  opacity: 0;
}

.mobile-nav__toggle.is-open .mobile-nav__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 20px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px rgba(0, 26, 64, 0.12);
  animation: menu-in 0.18s ease-out;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.mobile-nav__list > li + li {
  border-top: 1px solid var(--line);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--heading);
  text-align: left;
}

.mobile-nav__chevron {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}

.mobile-nav__section[aria-expanded="true"] {
  color: var(--accent);
}

.mobile-nav__section[aria-expanded="true"] .mobile-nav__chevron {
  transform: rotate(-135deg) translate(-2px, -1px);
}

.mobile-nav__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px 16px;
}

.mobile-nav__sub a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  color: var(--heading);
}

.mobile-nav__sub li:first-child a {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   Tags / badges
   ========================================================================== */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 18.2px;
  transition: background-color 0.15s;
}

.badge:hover {
  background: var(--navy);
}

.badge--topic {
  background: var(--surface);
  color: var(--muted);
}

.badge--topic:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ==========================================================================
   Home: latest news + filters
   ========================================================================== */
.main {
  padding-top: 48px;
}

.latest__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--heading);
}

.latest__subtitle {
  margin-top: 6px;
  color: var(--muted);
}

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

.latest__clear:hover {
  text-decoration: underline;
}

/* Filtered view: "<N> artículos  [Chile ✕] [Economía ✕]  Quitar filtros" */
.latest__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.latest__filters .latest__clear {
  font-size: 14px;
}

.latest__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 11px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.latest__chip-x {
  font-size: 10px;
  color: var(--muted);
}

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

.latest__chip:hover .latest__chip-x {
  color: inherit;
}

.latest__empty {
  margin-top: 32px;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  color: var(--muted);
}

.latest__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 28px;
  margin-top: 32px;
}

.news-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.news-card__media > a {
  display: block;
  height: 100%;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-card:hover .news-card__media img {
  transform: scale(1.03);
}

.news-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.news-card__tags:empty {
  display: none;
}

.news-card__title {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--heading);
}

.news-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}

.news-card__title a:hover {
  color: var(--accent);
}

.news-card__excerpt {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__date,
.article__date {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.calendar-icon {
  flex-shrink: 0;
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

.load-more__btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color 0.15s;
}

.load-more__btn:hover {
  background: var(--accent);
}

/* ==========================================================================
   Home: Latino America section + sidebar
   ========================================================================== */
.section-block__title {
  margin-bottom: 28px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--heading);
}

.section-block__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.section-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow 0.2s;
}

.section-card:hover {
  box-shadow: var(--shadow);
}

.section-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}

.section-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-card__body {
  flex: 1;
  padding: 16px 16px 0;
}

.section-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.section-card__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--heading);
}

.section-card__title a:hover {
  color: var(--accent);
}

.section-card__date {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.pill {
  align-self: flex-start;
  margin: 14px 16px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}

.pill::after {
  content: " →";
  transition: margin 0.15s;
}

.pill:hover::after {
  margin-left: 4px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  font-size: 15px;
}

.pagination__slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pagination__item {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--heading);
  transition:
    border-color 0.15s,
    color 0.15s;
}

a.pagination__item:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination__item.is-current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.pagination__gap {
  color: var(--muted);
}

.widget + .widget,
.banner-slot + .widget {
  margin-top: 36px;
}

.widget__title {
  margin-bottom: 14px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--heading);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  color: var(--heading);
  transition:
    background-color 0.15s,
    color 0.15s;
}

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

.banner-slot {
  position: relative;
  display: block;
  aspect-ratio: 300 / 220;
  margin-top: 36px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}

.banner-slot__image {
  object-fit: cover;
}

/* ==========================================================================
   Article + static pages
   ========================================================================== */
.article-page {
  padding: 40px var(--gutter) 88px;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
}

.article {
  max-width: 760px;
  margin: 0 auto;
}

.post-tiles {
  display: grid;
  gap: 30px;
}

.article-sidebar .widget + .widget {
  margin-top: 56px;
}

.link-list {
  display: grid;
  gap: 10px;
}

.link-list__item {
  display: block;
  padding: 10px 20px;
  border-radius: 4px;
  background: #eaf0f7;
  font-size: 16px;
  font-weight: 500;
  color: var(--heading);
  transition:
    background-color 0.15s,
    color 0.15s;
}

.link-list__item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.post-tile {
  position: relative;
  aspect-ratio: 317 / 250;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy-deep);
}

.post-tile__media {
  position: absolute;
  inset: 0;
}

.post-tile__media img {
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-tile:hover .post-tile__media img {
  transform: scale(1.03);
}

.post-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Covers have their headline printed near the bottom; the fade hides it under our own title. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.8) 65%, rgba(0, 0, 0, 0.97) 85%);
}

/* Body sits over the image; only its links take clicks, the rest falls through to the image link. */
.post-tile__body {
  position: absolute;
  inset: auto 0 0;
  padding: 0 20px 18px;
  color: #fff;
  pointer-events: none;
}

.post-tile__body a {
  pointer-events: auto;
}

.post-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.badge--tile {
  border-radius: 3px;
  background: #6cb2f5;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

.post-tile__title {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
}

.post-tile__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-tile__title a:hover {
  text-decoration: underline;
}

.post-tile__date {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
}

.article__crumbs {
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.article__crumbs a:hover {
  color: var(--accent);
}

.article__title {
  margin-top: 14px;
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 500;
  line-height: 1.14;
  color: var(--heading);
}

/* Plain WordPress pages (Privacidad) have a smaller title on live */
.article__title--page {
  font-size: 28px;
  line-height: 1.71;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.article__meta .article__date {
  margin-top: 0;
}

.article__author {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.article__author a {
  font-weight: 500;
  color: var(--heading);
  transition: color 0.15s;
}

.article__author a:hover {
  color: var(--accent);
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.article__hero {
  margin: 28px auto 0;
  max-width: 560px;
}

.article__hero img {
  width: 100%;
  border-radius: var(--radius);
}

.prose {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: break-word;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: 1.8em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--heading);
}

.prose h2 {
  font-size: 28px;
}

.prose h3 {
  font-size: 22px;
}

.prose h4 {
  font-size: 18px;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose ul {
  list-style: disc;
}

.prose li {
  line-height: 1.5;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose figure {
  margin: 2em 0;
}

/* Body images keep their ratio; tall portrait shots are capped so they don't
   fill several screens (landscape images are unaffected). */
.prose img {
  width: auto;
  height: auto;
  max-height: min(640px, 80vh);
  margin: 0 auto;
  border-radius: var(--radius);
}

.prose video,
.prose iframe {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
}

/* A broken hotlinked asset in one post (the host blocks embedding). */
.prose figure:has(> img[src^="https://discord.com/assets/"]) {
  display: none;
}

.prose p:empty {
  display: none;
}

.prose hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Nested WordPress blocks */
.prose p + p {
  margin-top: 1.1em;
}

.prose .ultp-image {
  max-width: min(420px, 100%);
}

.prose figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #1c1917;
  text-align: center;
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--heading);
  font-style: italic;
}

.prose .wp-block-table {
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* WordPress "fixed width cells" tables: equal columns that wrap instead of overflowing */
.prose table.has-fixed-layout {
  table-layout: fixed;
}

.prose th,
.prose td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  hyphens: auto;
}

/* Tags + share links under the post body */
.article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.share__label {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.share__link {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s, color 0.15s;
}

.share__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.related {
  max-width: var(--container);
  margin: 72px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.related__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading);
}

.related .latest__grid {
  margin-top: 24px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: 56px 0 32px;
  background: var(--navy-deep);
  color: var(--footer-text);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 56px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer-about {
  margin: 24px 0 20px;
  font-size: 16px;
  line-height: 1.7;
}

.footer-small {
  font-size: 13px;
  line-height: 27.2px;
}

.footer-small a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.social {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.social__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.15s;
}

.social__icon:hover {
  background: var(--accent);
}

.footer-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.36;
  color: #fff;
}

.popular {
  display: grid;
  gap: 18px;
}

.popular__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.popular__item img {
  flex: 0 0 60px;
  width: 60px;
  height: 75px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.popular__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: #fff;
}

.popular__title:hover {
  text-decoration: underline;
}

.popular__date {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--footer-muted);
}

.footer-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.footer-cats a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

.footer-cats a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Floating translate button (TranslateButton.tsx)
   ========================================================================== */
.translate {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  /* Above page content, below the sticky header (40) and its menus */
  z-index: 30;
}

.translate__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow);
  transition:
    background-color 0.15s,
    color 0.15s;
}

.translate__toggle:hover,
.translate__toggle.is-open {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.translate__toggle:focus-visible {
  outline-offset: 3px;
  border-radius: 50%;
}

.translate__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  padding: 0 4px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.translate__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 210px;
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: translate-in 0.15s ease-out;
}

/* Focusable only so clicks inside keep it open; never a Tab stop */
.translate__panel:focus {
  outline: none;
}

@keyframes translate-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.translate__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.4;
  color: var(--heading);
  text-align: left;
}

.translate__option:hover {
  background: var(--surface);
}

.translate__option[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.translate__hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.translate__note {
  margin-top: 4px;
  padding: 8px 10px 4px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

/* Google's own <select>: present for us to drive, never shown */
.translate__engine {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Google Translate injects a top banner (in a body > .skiptranslate
   wrapper), pushes <body> down with top: 40px, shows a fixed spinner over
   the top-left corner (it can hang there and swallow clicks on the logo),
   and adds a hover tooltip and highlight with the original text. Our
   button replaces all of that. The VIpgJd-* names are Google's (obfuscated
   but stable) classes for the spinner and the hover highlight. */
body > .skiptranslate,
iframe.skiptranslate,
#goog-gt-tt,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
  display: none !important;
}

.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q,
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

body {
  top: 0 !important;
}

/* ==========================================================================
   Contacto + Sobre Nosotros (same sections and order as the live pages)
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.info-page {
  padding: 56px 0 88px;
}

.info-page__heading {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--heading);
}

/* Contacto: image + intro on the left, "Informacion" card on the right */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 652px) minmax(300px, 370px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}

.contact__image {
  width: 100%;
  max-width: 652px;
  height: 385px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.contact__main .info-page__heading {
  margin-top: 56px;
}

.contact__lead {
  margin-top: 8px;
  line-height: 1.7;
}

.contact__card {
  min-height: 330px;
  padding: 30px 33px 33px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.contact__list {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}

.contact__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.contact__icon {
  display: inline-flex;
  flex: 0 0 45px;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
}

/* Sobre Nosotros: logo + welcome text, then the two team quotes */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.about-intro__image {
  width: 100%;
  max-width: 462px;
  height: 350px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.about-intro__text {
  line-height: 1.7;
}

.about-intro__text p + p {
  margin-top: 32px;
}

.about-team__title {
  margin-top: 140px;
  padding: 0 32px;
}

.about-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 28px;
  padding: 0 32px;
}

.about-quote {
  margin: 0;
  line-height: 1.7;
}

.about-quote__mark {
  display: block;
  line-height: 1;
  color: var(--muted);
}

.about-quote__text {
  margin: 28px 0 0;
}

.about-quote__text p + p {
  margin-top: 27px;
}

.about-quote__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 27px;
  margin-top: 26px;
  padding-left: 27px;
}

.about-quote__photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .section-block__row,
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .sidebar .banner-slot {
    display: none;
  }

  .article-sidebar {
    margin-top: 24px;
  }

  .post-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .sidebar .widget + .widget,
  .sidebar .banner-slot + .widget {
    margin-top: 0;
  }
}

/* Narrow desktops/tablets (900-999px): tighten the menu so the logo and all
   seven items still fit on one row inside the content width. */
@media (max-width: 999px) {
  :root {
    --nav-gap: 2px;
    --nav-pad-x: 7px;
  }

  .site-header__logo {
    margin-right: 8px;
  }
}

/* Header collapses into the "Menú" drop-down */
@media (max-width: 899px) {
  :root {
    --header-h: 64px;
  }

  .site-header__logo .logo {
    height: 48px;
  }

  .primary-nav,
  .dropdown-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .latest__grid,
  .section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-col--about {
    grid-column: 1 / -1;
  }

  .contact,
  .about-intro,
  .about-team {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact {
    justify-content: stretch;
    gap: 50px;
  }

  .about-intro {
    gap: 20px;
  }

  .contact__image,
  .about-intro__image {
    max-width: none;
  }
}

@media (max-width: 599px) {
  :root {
    --gutter: 16px;
  }

  .main {
    padding-top: 28px;
  }

  .latest__title,
  .section-block__title,
  .widget__title,
  .related__title,
  .prose h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .news-card__title {
    font-size: 16px;
    line-height: 25px;
  }

  .news-card__excerpt {
    font-size: 13px;
    line-height: 20px;
  }

  .news-card__date,
  .section-card__date,
  .popular__date {
    line-height: 16px;
  }

  .badge {
    font-size: 13px;
    line-height: 16px;
  }

  .article__title {
    line-height: 38px;
  }

  .article__title--page {
    font-size: 24px;
  }

  .contact__lead {
    font-size: 15px;
    line-height: 24px;
  }

  .footer-title {
    font-size: 18px;
    line-height: 26px;
  }

  .popular__title,
  .footer-cats a {
    font-size: 15px;
    line-height: 24px;
  }

  .latest__grid,
  .section-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .section-grid {
    gap: 20px;
  }

  .section-card {
    flex-direction: row;
  }

  .section-card__media {
    flex: 0 0 34%;
    aspect-ratio: auto;
  }

  .section-card__body {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0;
  }

  .section-card .pill {
    display: none;
  }

  .section-card__title {
    font-size: 15px;
    line-height: 24px;
  }

  .sidebar,
  .post-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-page {
    padding-top: 24px;
  }

  .info-page {
    padding-top: 28px;
  }

  .info-page__heading {
    font-size: 24px;
    line-height: 28px;
  }

  .contact__card {
    padding: 30px 24px 33px;
  }

  .about-team__title {
    margin-top: 110px;
    padding: 0 27px;
  }

  .about-team {
    padding: 0 27px;
  }

  .about-quote__author {
    gap: 8px 20px;
    padding-left: 16px;
  }

  .prose table {
    font-size: 14px;
  }

  .prose th,
  .prose td {
    padding: 6px 8px;
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}