@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  /* Brand Colors */
  --color-azul: #0044FF;
  --color-celeste: #4FCFFF;
  --color-amarillo: #FFDD00;
  --color-tinta: #10131A;
  --color-niebla: #F4F6FB;
  --color-blanco: #FFFFFF;

  /* Color Transparent Variants */
  --color-azul-rgb: 0, 68, 255;
  --color-tinta-rgb: 16, 19, 26;
  --color-celeste-rgb: 79, 207, 255;
  
  /* Fonts */
  --font-sans: 'Jost', sans-serif;
  --font-handwritten: 'Caveat', cursive;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 5rem;

  /* Layout */
  --container-width: 1200px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Theme-Dependent Variables (Default Light) */
  --bg-body: var(--color-blanco);
  --bg-section: var(--color-niebla);
  --text-main: var(--color-tinta);
  --text-muted: rgba(16, 19, 26, 0.65);
  --border-color: rgba(16, 19, 26, 0.1);
  --border-editorial: var(--color-tinta);
  --card-bg: var(--color-blanco);
  --shadow-sm: 0 2px 8px rgba(16, 19, 26, 0.04);
  --shadow-md: 0 10px 30px rgba(16, 19, 26, 0.08);
}

/* Dark Mode Theme Overrides */
body.dark-mode {
  --bg-body: #0d0f15;
  --bg-section: #141722;
  --text-main: #f0f2f5;
  --text-muted: rgba(240, 242, 245, 0.65);
  --border-color: rgba(240, 242, 245, 0.1);
  --border-editorial: #f0f2f5;
  --card-bg: #181c28;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

/* ==========================================================================
   TYPOGRAPHY & UTILITIES
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }

.kicker {
  font-family: var(--font-handwritten);
  font-size: 1.6rem;
  color: var(--color-azul);
  font-weight: bold;
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: 0.5rem;
}

body.dark-mode .kicker {
  color: var(--color-celeste);
}

.text-yellow {
  color: var(--color-amarillo);
}

.highlight-underline {
  background-image: linear-gradient(120deg, rgba(255, 221, 0, 0.4) 0%, rgba(255, 221, 0, 0.6) 100%);
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 88%;
}

.highlight-underline-blue {
  background-image: linear-gradient(120deg, rgba(0, 68, 255, 0.15) 0%, rgba(0, 68, 255, 0.25) 100%);
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 88%;
}

.container {
  max-width: 90%;
  width: 90%;
  margin: 0 auto;
  padding: 0;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.announcement-bar {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  text-align: center;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 100;
}

.announcement-bar a {
  text-decoration: underline;
  margin-left: 0.5rem;
}

.announcement-bar a:hover {
  color: var(--color-amarillo);
}

.header-main {
  background-color: var(--bg-body);
  border-bottom: 3px double var(--border-editorial);
  position: sticky;
  top: 0;
  z-index: 99;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.nav-brand {
  height: 48px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav-brand img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.nav-brand .logo-light { display: block; }
.nav-brand .logo-dark { display: none; }

body.dark-mode .nav-brand .logo-light { display: none; }
body.dark-mode .nav-brand .logo-dark { display: block; }

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  padding: 0.5rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-azul);
  transition: width var(--transition-fast);
}

body.dark-mode .nav-link::after {
  background-color: var(--color-celeste);
}

.nav-link:hover::after {
  width: 100%;
}

/* Navigation Dropdowns */
.nav-item-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-link {
  display: block;
  padding: 0.6rem var(--space-md);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-main);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-align: left;
  white-space: nowrap;
}

.nav-dropdown-link:hover {
  background-color: var(--bg-section);
  color: var(--color-azul);
}

body.dark-mode .nav-dropdown-link:hover {
  color: var(--color-celeste);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 0 0 auto;
}

.icon-btn {
  color: var(--text-main);
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.icon-btn:hover {
  background-color: var(--bg-section);
}

.btn-primary {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  padding: 0.6rem 1.25rem;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  border: 1px solid var(--color-azul);
}

.btn-primary:hover {
  background-color: #0036cc;
  transform: translateY(-1px);
}

body.dark-mode .btn-primary {
  background-color: var(--color-celeste);
  color: var(--color-tinta);
  border-color: var(--color-celeste);
}

body.dark-mode .btn-primary:hover {
  background-color: #3bb2e6;
}

.burger-menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  cursor: pointer;
}

.burger-menu span {
  display: block;
  height: 2px;
  background-color: var(--text-main);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ==========================================================================
   HERO / FEATURED SECTION (Magazine Style)
   ========================================================================== */
.hero-magazine {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border-color);
}

.hero-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: var(--space-xl);
}

.featured-main {
  position: relative;
  border-right: 1px solid var(--border-color);
  padding-right: var(--space-xl);
  padding-bottom: var(--space-xxl);
}

.hero-slides-container {
  width: 100%;
  position: relative;
  height: clamp(540px, 42vw, 640px);
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-xl);
  align-items: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.featured-text-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Hero Slider Dots */
.hero-slider-dots {
  position: absolute;
  bottom: 1.5rem;
  right: calc(var(--space-xl) + 1rem);
  left: auto;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
  background-color: rgba(16, 19, 26, 0.5);
  padding: 0.4rem 0.6rem;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .hero-slider-dots {
  background-color: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

body.dark-mode .hero-dot {
  background-color: rgba(255, 255, 255, 0.25);
}

.hero-dot.active {
  background-color: var(--color-amarillo);
  transform: scale(1.25);
}

body.dark-mode .hero-dot.active {
  background-color: var(--color-celeste);
}


.featured-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-section);
  height: 100%; /* Spans 100% height of absolute slide */
}

.featured-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.featured-main:hover .featured-img-wrapper img {
  transform: scale(1.03);
}

.tag {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--border-radius-sm);
  display: inline-block;
}

.tag.tag-sec {
  background-color: rgba(0, 68, 255, 0.1);
  color: var(--color-azul);
}

body.dark-mode .tag.tag-sec {
  background-color: rgba(79, 207, 255, 0.15);
  color: var(--color-celeste);
}

.tag.tag-opinion {
  background-color: var(--color-amarillo);
  color: var(--color-tinta);
}

.featured-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.meta-author {
  font-weight: 700;
  color: var(--text-main);
}

.meta-author.guest-author {
  font-family: var(--font-handwritten);
  font-size: 1.25rem;
  color: var(--color-azul);
}

body.dark-mode .meta-author.guest-author {
  color: var(--color-celeste);
}

.featured-title {
  font-size: 2.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
}

.featured-title a:hover {
  color: var(--color-azul);
}

body.dark-mode .featured-title a:hover {
  color: var(--color-celeste);
}

.featured-excerpt {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 70ch;
}

.read-more-link {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-azul);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

body.dark-mode .read-more-link {
  color: var(--color-celeste);
}

.read-more-link svg {
  transition: transform var(--transition-fast);
}

.read-more-link:hover svg {
  transform: translateX(4px);
}

/* Hero Sidebar (Trending & Short Stories) */
.hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.sidebar-title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-editorial);
  padding-bottom: 0.5rem;
  margin-bottom: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-news-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar-news-item {
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  position: relative;
  align-items: center;
}

.sidebar-news-item::after {
  content: '';
  position: absolute;
  bottom: -0.75rem;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  opacity: 0.5;
}

.sidebar-news-item:last-child::after {
  display: none;
}

.sidebar-news-thumb {
  width: 70px;
  height: 70px;
  min-width: 70px;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-section);
}

.sidebar-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-news-item:hover .sidebar-news-thumb img {
  transform: scale(1.06);
}

.sidebar-news-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.sidebar-news-item .tag {
  align-self: flex-start;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
}

.sidebar-news-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.sidebar-news-title:hover {
  color: var(--color-azul);
}

body.dark-mode .sidebar-news-title:hover {
  color: var(--color-celeste);
}

.sidebar-news-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================================================
   EDITORIAL SECTION - CAROUSEL / HIGHLIGHT (Explicadores)
   ========================================================================== */
.section-explicadores {
  padding: var(--space-xl) 0;
  background-color: var(--bg-section);
  transition: background-color var(--transition-normal);
  border-bottom: 1px solid var(--border-color);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-xl);
}

.section-header-left {
  max-width: 600px;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 900;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-top: 0.5rem;
  max-width: 60ch;
}

.slider-controls {
  display: flex;
  gap: 0.5rem;
}

.slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  background-color: var(--bg-body);
  transition: all var(--transition-fast);
}

.slider-btn:hover {
  background-color: var(--color-azul);
  border-color: var(--color-azul);
  color: var(--color-blanco);
}

body.dark-mode .slider-btn:hover {
  background-color: var(--color-celeste);
  border-color: var(--color-celeste);
  color: var(--color-tinta);
}

.explicadores-wrapper {
  overflow: hidden;
  position: relative;
  padding: 0.5rem 0;
}

.explicadores-track {
  display: flex;
  gap: var(--space-lg);
  transition: transform var(--transition-normal);
}

.explicador-card {
  min-width: 380px;
  max-width: 380px;
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.explicador-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.explicador-img-wrapper {
  height: 220px;
  overflow: hidden;
  background-color: var(--bg-section);
  border-bottom: 1px solid var(--border-color);
}

.explicador-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.explicador-card:hover .explicador-img-wrapper img {
  transform: scale(1.04);
}

.explicador-content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-grow: 1;
}

.explicador-title {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

.explicador-excerpt {
  font-size: 0.95rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.explicador-ad {
  flex: 0 0 315px;
  width: 315px;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-body);
  box-shadow: var(--shadow-sm);
}

.explicador-ad figcaption {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.explicador-ad img {
  display: block;
  width: 100%;
  height: calc(100% - 35px);
  object-fit: cover;
}

/* ==========================================================================
   MANIFESTO / BIG QUOTE BLOCK (Immersive Experience)
   ========================================================================== */
.block-manifesto {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  padding: var(--space-xxl) 0;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.block-manifesto::before {
  content: '"';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-handwritten);
  font-size: 16rem;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
}

.manifesto-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.manifesto-quote {
  font-family: var(--font-handwritten);
  font-size: 3.2rem;
  line-height: 1.25;
  color: var(--color-amarillo);
  margin-bottom: var(--space-lg);
  font-weight: 400;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}

.manifesto-signature {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: var(--space-xs);
}

/* ==========================================================================
   MAGAZINE GRID (Multi-column layout)
   ========================================================================== */
.magazine-grid-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border-color);
}

.grid-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-editorial);
  padding-bottom: 0.5rem;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.grid-filter-title {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.filter-tags {
  display: flex;
  gap: 0.5rem;
  list-style: none;
}

.filter-btn {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 1rem;
  border-radius: 30px;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  background-color: transparent;
  transition: all var(--transition-fast);
}

.filter-btn.active, .filter-btn:hover {
  background-color: var(--color-azul);
  border-color: var(--color-azul);
  color: var(--color-blanco);
}

body.dark-mode .filter-btn.active, body.dark-mode .filter-btn:hover {
  background-color: var(--color-celeste);
  border-color: var(--color-celeste);
  color: var(--color-tinta);
}

.news-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 1400px) {
  .news-masonry {
    grid-template-columns: repeat(4, 1fr);
  }
  .news-card.featured-card {
    grid-column: span 2;
  }
}

/* Custom Grid Cards */
.news-card.cta-card {
  background-color: var(--color-azul);
  border: none;
}

body.dark-mode .news-card.cta-card {
  background-color: #141a24;
  border: 1px solid var(--border-color);
}

.news-card.cta-card .news-card-content {
  color: var(--color-blanco);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.news-card.cta-card .news-card-title a {
  color: var(--color-blanco);
}

body.dark-mode .news-card.cta-card .news-card-title a {
  color: var(--color-celeste);
}

.news-card.cta-card .news-card-title a:hover {
  text-decoration: underline;
}

.news-card.cta-card .news-card-excerpt {
  color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .news-card.cta-card .news-card-excerpt {
  color: var(--text-muted);
}

.news-card.resources-card {
  border: 2px dashed var(--border-color);
  background-color: transparent;
  box-shadow: none;
}

.news-card.resources-card .news-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}


.news-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), opacity var(--transition-normal), scale var(--transition-normal);
  opacity: 1;
  scale: 1;
}

.news-card.hidden {
  opacity: 0;
  scale: 0.95;
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  border: none;
  padding: 0;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.news-card-img-wrapper {
  height: 200px;
  overflow: hidden;
  position: relative;
  background-color: var(--bg-section);
}

.news-card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover .news-card-img-wrapper img {
  transform: scale(1.04);
}

.news-card-content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.news-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.news-card-title:hover {
  color: var(--color-azul);
}

body.dark-mode .news-card-title:hover {
  color: var(--color-celeste);
}

.news-card-excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
  margin-top: auto;
}

.news-card-author {
  font-weight: 600;
  color: var(--text-main);
}

.news-card-author.guest-author {
  font-family: var(--font-handwritten);
  font-size: 1.15rem;
  color: var(--color-azul);
}

body.dark-mode .news-card-author.guest-author {
  color: var(--color-celeste);
}

/* Asymmetric styling for specific grid items to simulate editorial layout */
.news-card.featured-card {
  grid-column: span 2;
  flex-direction: row;
}

.news-card.featured-card .news-card-img-wrapper {
  width: 50%;
  height: auto;
  min-height: 100%;
}

.news-card.featured-card .news-card-content {
  width: 50%;
  padding: var(--space-lg);
  justify-content: center;
}

.news-card.featured-card .news-card-title {
  font-size: 1.6rem;
}

/* Text Only Card style */
.news-card.text-only-card {
  border-top: 4px solid var(--color-azul);
  background-color: var(--bg-section);
}

body.dark-mode .news-card.text-only-card {
  border-top-color: var(--color-celeste);
}

.news-card.text-only-card .news-card-content {
  justify-content: center;
  padding: var(--space-lg);
}

.news-card.text-only-card .news-card-title {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 600;
}

/* ==========================================================================
   NEWSLETTER & SUB-HERO INFO
   ========================================================================== */
.community-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border-color);
}

.community-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}

.community-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.community-info .kicker {
  align-self: flex-start;
}

.newsletter-box {
  background-color: var(--bg-section);
  border: 1px dashed var(--border-editorial);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.newsletter-title {
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.newsletter-title span {
  font-family: var(--font-handwritten);
  color: var(--color-azul);
  font-size: 2rem;
  transform: rotate(-3deg);
}

body.dark-mode .newsletter-title span {
  color: var(--color-celeste);
}

.newsletter-form {
  display: flex;
  gap: 0.5rem;
}

.newsletter-input {
  flex-grow: 1;
  background-color: var(--bg-body);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
}

.newsletter-input:focus {
  border-color: var(--color-azul);
  box-shadow: 0 0 0 2px rgba(0, 68, 255, 0.1);
}

body.dark-mode .newsletter-input:focus {
  border-color: var(--color-celeste);
  box-shadow: 0 0 0 2px rgba(79, 207, 255, 0.15);
}

.newsletter-disclaimer {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.footer-main {
  background-color: var(--color-tinta);
  color: var(--color-blanco);
  padding: var(--space-xxl) 0 var(--space-lg) 0;
  font-size: 0.95rem;
  position: relative;
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page {
  background: var(--bg-body);
}

.legal-hero {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--bg-body) 0%, rgba(79, 207, 255, 0.12) 100%);
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-azul);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legal-hero h1 {
  max-width: 780px;
  margin: .75rem 0 1rem;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.legal-hero p {
  max-width: 700px;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.legal-meta {
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: .85rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(190px, .55fr) minmax(0, 2fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.legal-nav {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  padding: 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--card-bg);
}

.legal-nav p { margin: 0 0 .7rem; font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.legal-nav a { display: block; padding: .45rem 0; color: var(--text-color); font-size: .9rem; }
.legal-nav a[aria-current="page"], .legal-nav a:hover { color: var(--color-azul); font-weight: 700; }

.legal-content { max-width: 760px; }
.legal-content section { padding: 0 0 2.2rem; margin-bottom: 2.2rem; border-bottom: 1px solid var(--border-color); }
.legal-content section:last-child { border-bottom: 0; }
.legal-content h2 { margin: 0 0 .8rem; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; letter-spacing: -.035em; }
.legal-content p, .legal-content li { color: var(--text-muted); line-height: 1.72; }
.legal-content p + p { margin-top: .9rem; }
.legal-content ul { margin: .85rem 0 0 1.15rem; padding: 0; }
.legal-content li + li { margin-top: .45rem; }
.legal-callout { padding: 1.15rem 1.25rem; margin: 1.2rem 0; border-left: 3px solid var(--color-azul); border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0; background: rgba(0, 68, 255, .06); }
.legal-callout p { margin: 0; color: var(--text-color); }
.legal-contact { color: var(--color-azul); font-weight: 700; }

body.dark-mode .legal-hero { background: linear-gradient(135deg, var(--bg-body) 0%, rgba(79, 207, 255, 0.08) 100%); }
body.dark-mode .legal-callout { background: rgba(79, 207, 255, .08); border-left-color: var(--color-celeste); }

@media (max-width: 760px) {
  .legal-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .legal-nav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .legal-nav p { grid-column: 1 / -1; }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-brand-logo {
  height: 48px;
  align-self: flex-start;
}

.footer-brand-logo img {
  height: 100%;
  width: auto;
}

.footer-desc {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.footer-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-celeste);
  margin-bottom: var(--space-md);
  position: relative;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.75);
}

.footer-links a:hover {
  color: var(--color-amarillo);
  padding-left: 2px;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.footer-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  transition: background-color var(--transition-fast);
}

.footer-social-btn:hover {
  background-color: var(--color-azul);
  color: var(--color-blanco);
}

/* Footer Bottom (Credits & SWY Logo) */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

.swy-credit {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.swy-credit a {
  display: inline-block;
  height: 24px;
  transition: transform var(--transition-fast);
}

.swy-credit a:hover {
  transform: scale(1.05);
}

.swy-credit img {
  height: 100%;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.swy-credit a:hover img {
  opacity: 1;
}

/* ==========================================================================
   INTERACTIVE COMPONENTS: SEARCH MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 19, 26, 0.8);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background-color: var(--bg-body);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  max-width: 600px;
  width: 90%;
  padding: var(--space-xl);
  position: relative;
  transform: translateY(20px);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-md);
}

.modal-overlay.active .modal-container {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--text-main);
  opacity: 0.6;
}

.modal-close:hover {
  opacity: 1;
}

.search-title {
  margin-bottom: var(--space-md);
}

.search-input-wrapper {
  display: flex;
  border-bottom: 2px solid var(--color-azul);
  padding-bottom: 0.5rem;
  margin-bottom: var(--space-md);
}

body.dark-mode .search-input-wrapper {
  border-bottom-color: var(--color-celeste);
}

.search-input-wrapper input {
  flex-grow: 1;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-main);
}

.search-submit-btn {
  color: var(--color-azul);
}

body.dark-mode .search-submit-btn {
  color: var(--color-celeste);
}

.search-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.search-suggestions p {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.suggestion-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.suggestion-link {
  font-size: 0.85rem;
  background-color: var(--bg-section);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
}

.suggestion-link:hover {
  background-color: var(--color-azul);
  color: var(--color-blanco);
}

body.dark-mode .suggestion-link:hover {
  background-color: var(--color-celeste);
  color: var(--color-tinta);
}

/* ==========================================================================
   RESPONSIVE DESIGN (Media Queries)
   ========================================================================== */

@media (max-width: 1360px) {
  .navbar {
    height: 70px;
    gap: 0.75rem;
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: min(86vw, 360px);
    height: 100dvh;
    background-color: var(--color-azul);
    flex-direction: column;
    padding: 6.5rem var(--space-xl) var(--space-xl);
    align-items: flex-start;
    gap: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -18px 0 40px rgba(16, 19, 26, 0.24);
    transform: translateX(105%);
    transition: transform var(--transition-normal);
    z-index: 101;
    border: 0;
  }
  
  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-menu .nav-link,
  .nav-menu .nav-dropdown-link {
    color: var(--color-tinta);
  }

  .nav-menu .nav-link {
    font-size: 1.15rem;
    font-weight: 800;
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.active,
  .nav-menu .nav-dropdown-link:hover {
    color: var(--color-tinta);
    opacity: .68;
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-md);
    display: none;
    background-color: transparent;
    min-width: 0;
  }

  .nav-item-dropdown.active-dropdown .nav-dropdown {
    display: flex;
  }

  .nav-dropdown-link {
    font-size: 0.9rem;
    padding: 0.5rem 0 0.5rem var(--space-md);
    color: var(--color-tinta);
  }

  .nav-dropdown-link:hover {
    background-color: transparent;
    color: var(--color-tinta);
  }

  body.dark-mode .nav-dropdown-link:hover {
    color: var(--color-celeste);
  }

  body.dark-mode .nav-menu .nav-link,
  body.dark-mode .nav-menu .nav-dropdown-link,
  body.dark-mode .nav-menu .nav-dropdown-link:hover {
    color: var(--color-tinta);
  }
  
  .burger-menu {
    display: flex;
    order: 3;
    position: relative;
    z-index: 102;
  }
  
  .nav-actions {
    margin-left: auto;
    margin-right: 0;
    order: 2;
    gap: 0.5rem;
  }
  
  .nav-brand {
    order: 1;
    height: 38px;
  }

  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.6rem; }
  
  .hero-grid {
    grid-template-columns: 1.8fr 1fr;
    gap: var(--space-lg);
  }
  
  .featured-main {
    padding-right: var(--space-lg);
  }

  .hero-slides-container {
    height: auto;
  }

  .hero-slide {
    position: relative;
    height: auto;
    width: 100%;
    display: none;
    pointer-events: auto;
    visibility: visible;
  }

  .hero-slide.active {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    opacity: 1;
    z-index: 1;
  }

  .featured-img-wrapper {
    height: auto;
    width: 100%;
  }

  .hero-slider-dots {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    margin: var(--space-md) auto 0 auto;
    justify-content: center;
    background-color: transparent;
    border: none;
    padding: 0;
    backdrop-filter: none;
  }

  .hero-dot {
    background-color: var(--border-color);
  }

  body.dark-mode .hero-dot {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .hero-dot.active {
    background-color: var(--color-azul);
  }

  body.dark-mode .hero-dot.active {
    background-color: var(--color-celeste);
  }
  
  .featured-title {
    font-size: 2.3rem;
  }
  
  .featured-img-wrapper img {
    height: 380px;
  }
  
  .news-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .news-card.featured-card {
    grid-column: span 2;
  }
  
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-lg);
  }
  
  .footer-brand {
    grid-column: span 3;
    max-width: 600px;
  }
}

@media (max-width: 768px) {

  .announcement-bar {
    font-size: 0.72rem;
    line-height: 1.45;
    padding: 0.35rem 0.75rem;
  }

  .navbar {
    height: 64px;
    gap: 0.45rem;
  }

  .nav-brand {
    height: 31px;
    min-width: 0;
  }

  .nav-brand img {
    max-width: 132px;
  }

  .nav-actions {
    gap: 0.15rem;
  }

  .icon-btn {
    padding: 0.38rem;
  }

  .btn-primary {
    padding: 0.55rem 0.8rem;
    font-size: 0.72rem;
  }

  .burger-menu {
    flex: 0 0 26px;
    width: 26px;
  }

  .nav-menu {
    padding-top: 5.5rem;
  }

  
  .hero-grid {
    grid-template-columns: 1fr;
  }
  
  .featured-main {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-xl);
  }
  
  .featured-img-wrapper img {
    height: 300px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  
  .explicador-card {
    min-width: 290px;
    max-width: 290px;
  }
  
  .explicador-img-wrapper {
    height: 180px;
  }
  
  .manifesto-quote {
    font-size: 2.2rem;
  }
  
  .news-masonry {
    grid-template-columns: 1fr;
  }
  
  .news-card.featured-card {
    grid-column: span 1;
    flex-direction: column;
  }
  
  .news-card.featured-card .news-card-img-wrapper {
    width: 100%;
    height: 200px;
  }
  
  .news-card.featured-card .news-card-content {
    width: 100%;
    padding: var(--space-md);
  }
  
  .community-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-brand {
    grid-column: span 2;
  }
}

/* Keep the editorial hero legible on portrait tablets. At this width the
   two-column version leaves both the feature and the reading list too narrow. */
@media (min-width: 769px) and (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .featured-main {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-right: 0;
    padding-bottom: var(--space-xl);
  }
}

@media (max-width: 480px) {
  .container {
    max-width: calc(100% - 2rem);
    width: calc(100% - 2rem);
  }

  .nav-brand img {
    max-width: 112px;
  }

  .nav-actions .icon-btn {
    display: none;
  }

  .btn-primary {
    padding: 0.5rem 0.7rem;
    font-size: 0.68rem;
  }

  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.45rem; }
  
  .featured-title {
    font-size: 1.85rem;
  }
  
  .manifesto-quote {
    font-size: 1.8rem;
  }
  
  .newsletter-form {
    flex-direction: column;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-brand {
    grid-column: span 1;
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* ==========================================================================
   INSTAGRAM FEED SECTION
   ========================================================================== */
.instagram-feed-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border-color);
}

.instagram-feed-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.instagram-feed-title-col {
  flex: 1;
  min-width: 300px;
}

.instagram-profile-card {
  display: flex;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--space-md) var(--space-lg);
  align-items: center;
  gap: var(--space-md);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.ig-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.ig-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
}

.ig-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-grow: 1;
}

.ig-username-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ig-username {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.ig-verified-badge {
  display: flex;
  align-items: center;
}

.btn-ig-follow {
  background-color: #0095f6;
  color: var(--color-blanco);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  margin-left: auto;
  transition: background-color var(--transition-fast);
}

.btn-ig-follow:hover {
  background-color: #1877f2;
}

.ig-stats-row {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ig-stats-row strong {
  color: var(--text-main);
}

.ig-bio {
  font-size: 0.8rem;
  line-height: 1.35;
}

.ig-fullname {
  font-weight: 700;
  color: var(--text-main);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.ig-post-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-section);
}

.ig-post-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ig-post-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  color: var(--color-blanco);
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.ig-post-item:hover img {
  transform: scale(1.03);
}

.ig-post-item:hover .ig-post-overlay {
  opacity: 1;
}

@media (max-width: 768px) {
  .instagram-feed-header-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .instagram-profile-card {
    max-width: 100%;
  }
  
  .instagram-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-xs);
  }
}

/* ==========================================================================
   MOBILE REELS VIEW & COMMENT DRAWER
   ========================================================================== */

/* Switcher at top of main (mobile only) */
.mobile-view-switcher {
  display: none;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-body);
  position: sticky;
  top: 70px;
  z-index: 90;
}

.view-switch-btn {
  flex: 1;
  padding: 0.85rem 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.view-switch-btn.active {
  color: var(--color-azul);
  border-bottom-color: var(--color-azul);
}

body.dark-mode .view-switch-btn.active {
  color: var(--color-celeste);
  border-bottom-color: var(--color-celeste);
}

@media (max-width: 768px) {
  .mobile-view-switcher {
    display: flex;
  }
}

/* Reels Container */
#reels-view-container {
  height: calc(100vh - 70px - 44px); /* calc(100vh - navbar - switcher) */
  background-color: #000000;
  overflow: hidden;
  position: relative;
}

.reels-feed {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.reels-feed::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.reels-feed {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.reel-card {
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg) var(--space-lg) var(--space-xl) var(--space-lg);
  background-color: #0d0f15;
}

.reel-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.reel-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 50%, rgba(13,15,21,0.95) 100%);
  z-index: 1;
}

.reel-content {
  position: relative;
  z-index: 2;
  color: var(--color-blanco);
  max-width: calc(100% - 55px);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.reel-content .tag {
  align-self: flex-start;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

.reel-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.8);
}

.reel-excerpt {
  font-size: 0.85rem;
  opacity: 0.85;
  line-height: 1.4;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reel-author-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reel-author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-blanco);
}

.reel-author-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.reel-author-name.guest-author {
  font-family: var(--font-handwritten);
  font-size: 1.1rem;
  color: var(--color-celeste);
}

/* Reels Action Bar */
.reel-actions {
  position: absolute;
  right: var(--space-md);
  bottom: calc(var(--space-xl) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  z-index: 3;
}

.reel-action-btn {
  background: none;
  border: none;
  color: var(--color-blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.reel-action-btn svg {
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.8));
  transition: transform var(--transition-fast), fill var(--transition-fast), color var(--transition-fast);
}

.reel-action-btn:active svg {
  transform: scale(0.9);
}

.reel-action-btn.active.like-btn svg {
  fill: #ff2d55;
  color: #ff2d55;
}

.reel-action-btn.active.save-btn svg {
  fill: var(--color-amarillo);
  color: var(--color-amarillo);
}

.reel-action-btn .action-count {
  font-size: 0.7rem;
  font-weight: 600;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Comments Bottom Drawer */
.comments-drawer {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 60vh;
  background-color: var(--bg-body);
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: bottom var(--transition-normal);
}

.comments-drawer.active {
  bottom: 0;
}

.comments-drawer-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comments-drawer-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.comments-drawer-close {
  color: var(--text-main);
  opacity: 0.6;
  padding: 0.25rem;
}

.comments-drawer-close:hover {
  opacity: 1;
}

.comments-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.comment-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: 1px solid rgba(16, 19, 26, 0.05);
  padding-bottom: var(--space-sm);
}

body.dark-mode .comment-item {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
}

.comment-role-tag {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: bold;
}

.comment-role-tag.role-estudiante {
  background-color: rgba(0, 68, 255, 0.1);
  color: var(--color-azul);
}

body.dark-mode .comment-role-tag.role-estudiante {
  background-color: rgba(79, 207, 255, 0.15);
  color: var(--color-celeste);
}

.comment-role-tag.role-profesor {
  background-color: rgba(255, 221, 0, 0.15);
  color: #c49900;
  border: 1px solid rgba(255, 221, 0, 0.4);
}

body.dark-mode .comment-role-tag.role-profesor {
  color: var(--color-amarillo);
  border-color: rgba(255, 221, 0, 0.3);
}

.comment-role-tag.role-invitado {
  background-color: rgba(16, 19, 26, 0.05);
  color: var(--text-muted);
}

body.dark-mode .comment-role-tag.role-invitado {
  background-color: rgba(255, 255, 255, 0.05);
}

.comment-text {
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.4;
}

.comment-input-form {
  padding: var(--space-md);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-section);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comment-role-select {
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-body);
  color: var(--text-main);
}

.comment-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.comment-input-field {
  flex-grow: 1;
  padding: 0.55rem var(--space-sm);
  background-color: var(--bg-body);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 0.85rem;
}

.comment-send-btn {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  border-radius: 20px;
  padding: 0.55rem 1.15rem;
  font-weight: 600;
  font-size: 0.8rem;
  transition: opacity var(--transition-fast);
}

body.dark-mode .comment-send-btn {
  background-color: var(--color-celeste);
  color: var(--color-tinta);
}

.comment-send-btn:hover {
  opacity: 0.9;
}

/* ==========================================================================
   GOOGLE MATERIAL SYMBOLS
   ========================================================================== */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  transition: font-variation-settings var(--transition-fast), color var(--transition-fast);
}

/* Specific styling for Reels active states using Material Symbols */
.reel-action-btn.active.like-btn .heart-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: #ff2d55;
}

.reel-action-btn.active.save-btn .bookmark-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: var(--color-amarillo);
}

/* ==========================================================================
   PÁGINA DEDICADA DE ACTUALIDAD
   ========================================================================== */
.actualidad-header-section {
  text-align: center;
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.actualidad-header-section .kicker,
.facultades-header-section .kicker,
.actualidad-header-section ~ * .kicker {
  font-family: var(--font-handwritten);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-azul);
  transform: rotate(-1.5deg);
  display: inline-block;
  margin-bottom: var(--space-xs);
}

body.dark-mode .actualidad-header-section .kicker,
body.dark-mode .facultades-header-section .kicker {
  color: var(--color-celeste);
}

.actualidad-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-tinta);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

body.dark-mode .actualidad-title {
  color: var(--color-blanco);
}

.actualidad-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: var(--space-lg);
}

/* Controls: Search and Filters */
.actualidad-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.actualidad-search-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.search-icon-inside {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

#actualidad-search-input,
#tut-search-input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
  background-color: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  color: var(--text-main);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

#actualidad-search-input:focus,
#tut-search-input:focus {
  outline: none;
  border-color: var(--color-azul);
  box-shadow: 0 0 10px rgba(0, 82, 204, 0.15);
  background-color: var(--bg-body);
}

body.dark-mode #actualidad-search-input:focus,
body.dark-mode #tut-search-input:focus {
  border-color: var(--color-celeste);
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.15);
}

.actualidad-filters {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: center;
}

.actualidad-filter-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.45rem 1.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.actualidad-filter-btn:hover {
  border-color: var(--text-main);
  color: var(--text-main);
}

.actualidad-filter-btn.active {
  background-color: var(--color-azul);
  border-color: var(--color-azul);
  color: var(--color-blanco);
}

body.dark-mode .actualidad-filter-btn.active {
  background-color: var(--color-celeste);
  border-color: var(--color-celeste);
  color: var(--color-tinta);
}

/* Layout Grid */
.actualidad-layout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.actualidad-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

/* Sidebar Widgets */
.actualidad-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.sidebar-widget {
  background-color: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-tinta);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--space-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.dark-mode .sidebar-title {
  color: var(--color-blanco);
}

/* Key Dates Widget */
.key-dates-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.key-dates-list li {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.date-badge {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  text-align: center;
  min-width: 60px;
  line-height: 1.2;
}

body.dark-mode .date-badge {
  background-color: var(--color-celeste);
  color: var(--color-tinta);
}

.date-desc strong {
  font-size: 0.85rem;
  color: var(--text-main);
  display: block;
  margin-bottom: 2px;
}

.date-desc p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .actualidad-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .actualidad-title {
    font-size: 2.2rem;
  }
  .actualidad-news-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PÁGINA DEDICADA DE FACULTADES
   ========================================================================== */
.facultades-header-section {
  text-align: center;
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Facultades kicker handled by shared rule above */

.facultades-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-tinta);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

body.dark-mode .facultades-title {
  color: var(--color-blanco);
}

.facultades-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: var(--space-lg);
}

/* Faculty Grid */
.facultades-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.faculty-card {
  min-width: 0;
  background-color: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.faculty-card[hidden] {
  display: none;
}

.faculty-search {
  width: min(100%, 560px);
  margin: var(--space-lg) auto 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-section);
  color: var(--color-azul);
}

.faculty-search input {
  min-width: 0;
  flex: 1;
  color: var(--text-main);
  font: inherit;
}

.faculty-search:focus-within {
  border-color: var(--color-azul);
  box-shadow: 0 0 0 3px rgba(0, 79, 158, 0.12);
}

.faculty-search-status,
.search-results-status {
  min-height: 1.4em;
  margin-top: var(--space-sm);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ========================================================================== 
   ARTICLE PAGES
   ========================================================================== */
.article-shell {
  max-width: 1120px;
  padding-top: 9rem;
  padding-bottom: var(--space-xxl);
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.article-back:hover { color: var(--color-azul); }
.article-back .material-symbols-outlined { font-size: 1.1rem; }

.article-header { max-width: 840px; margin: var(--space-xl) auto var(--space-xl); text-align: center; }
.article-header h1 { margin: var(--space-md) 0; color: var(--color-tinta); font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.045em; }
.article-lead { max-width: 680px; margin: 0 auto; color: var(--text-muted); font-size: 1.15rem; line-height: 1.65; }
.article-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: var(--space-lg); color: var(--text-muted); font-size: 0.85rem; }
.article-meta span + span::before { content: '•'; margin-right: 1rem; color: var(--color-azul); }

.article-cover { margin: 0; overflow: hidden; border-radius: var(--border-radius-lg); background: var(--bg-section); }
.article-cover img { width: 100%; height: min(54vw, 520px); object-fit: cover; display: block; }
.article-cover figcaption { padding: 0.75rem 1rem; color: var(--text-muted); font-size: 0.8rem; }
.article-layout { display: grid; grid-template-columns: 190px minmax(0, 680px); justify-content: center; gap: clamp(2rem, 6vw, 6rem); margin-top: var(--space-xxl); }
.article-aside { align-self: start; position: sticky; top: 8rem; display: flex; flex-direction: column; gap: 0.65rem; border-left: 2px solid var(--border-color); padding-left: 1rem; }
.article-aside p { margin: 0 0 0.2rem; color: var(--color-azul); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; }
.article-aside a { color: var(--text-muted); font-size: 0.85rem; }
.article-aside a:hover { color: var(--color-azul); }
.article-content { color: var(--text-main); font-size: 1.1rem; line-height: 1.8; }
.article-content p { margin: 0 0 1.4rem; }
.article-content h2 { margin: 2.6rem 0 0.8rem; color: var(--color-tinta); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.article-author-signature { display:grid; grid-template-columns:112px minmax(0,1fr); gap:1.35rem; align-items:center; margin:3.5rem 0 .5rem; padding:1.5rem; border:1px solid var(--border-color); border-radius:var(--border-radius-lg); background:var(--bg-section); }.article-author-signature > .author-avatar-photo { position:relative; width:112px; height:112px; }.article-author-signature > .author-avatar-photo > img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:4px solid var(--color-celeste); box-shadow:0 8px 22px rgba(0,68,255,.14); }.article-author-signature h2 { margin:.15rem 0 .25rem; font-size:1.5rem; }.author-signature-label { margin:0; color:var(--color-azul); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.author-signature-title { margin:0; color:var(--text-muted); font-size:.95rem; font-weight:650; }.author-signature-bio { margin:.65rem 0 0; color:var(--text-main); font-size:.95rem; line-height:1.65; }
.article-author-signature .author-avatar-photo .professor-badge { position:absolute; bottom:-2px; right:-2px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--color-azul); color:var(--color-blanco); font-size:1.15rem; border:3px solid var(--bg-section); box-shadow:0 3px 8px rgba(0,0,0,.2); }
.article-author-signature h2 .professor-badge { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; margin-left:0.4rem; padding:0.15em; border-radius:50%; background:var(--color-azul); color:var(--color-blanco); font-size:0.75em; vertical-align:middle; }
.article-content ol, .article-content ul { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.article-content li { padding-left: 0.35rem; margin-bottom: 0.45rem; }
.article-content strong { color: var(--color-tinta); font-weight: 700; }
.article-content a { color: var(--color-azul); text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: var(--color-celeste); }
.article-content blockquote { margin: 1.8rem 0; padding: 1rem 1.5rem; border-left: 3px solid var(--color-azul); background: var(--bg-section); border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; font-style: italic; color: var(--text-main); }
.article-content > img { width: 100%; height: auto; border-radius: var(--border-radius-md); margin: 1.8rem 0; display: block; }
.article-callout { display: flex; gap: 1rem; margin: 2rem 0; padding: 1.25rem; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); background: var(--bg-section); }
.article-callout > .material-symbols-outlined { color: var(--color-azul); }
.article-callout strong { color: var(--color-tinta); font-weight: 700; }
.article-callout p { margin: 0.2rem 0 0; font-size: 0.95rem; }
.article-next { padding: var(--space-xxl) 0; background: var(--bg-section); border-top: 1px solid var(--border-color); }
.article-next > .container { max-width: 1120px; }
.article-next > .container > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.article-next-link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--bg-body); color: var(--color-tinta); font-weight: 650; }
.article-next-link:hover { border-color: var(--color-azul); color: var(--color-azul); }
body.dark-mode .article-header h1, body.dark-mode .article-content h2, body.dark-mode .article-content strong, body.dark-mode .article-callout strong, body.dark-mode .article-next-link { color: var(--color-blanco); }

/* Espacios publicitarios: visibles, pero deliberadamente secundarios al contenido. */
.ad-placement { margin: var(--space-xl) 0 0; padding: 0; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; background: var(--bg-body); }
.ad-placement figcaption { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ad-placement img { display: block; width: 100%; height: auto; }
.ad-placement-horizontal { max-width: 1100px; margin-left: auto; margin-right: auto; }
.ad-placement-sidebar { margin-top: var(--space-lg); }
body.dark-mode .ad-placement { background: var(--bg-section); }

@media (max-width: 760px) {
  /* La pieza lateral no tiene una ubicación editorial clara en móvil. Se retira
     de esta vista hasta definir un formato y punto de inserción propios. */
  .explicador-ad {
    display: none;
  }

  .article-shell { padding-top: 7.5rem; }
  .article-header { text-align: left; }
  .article-meta { justify-content: flex-start; }
  .article-author-signature { grid-template-columns:88px minmax(0,1fr); gap:1rem; padding:1.15rem; }.article-author-signature > .author-avatar-photo { width:88px; height:88px; }.article-author-signature .professor-badge { width:28px; height:28px; font-size:.95rem; }.article-author-signature h2 { font-size:1.3rem; }
  .article-layout { display: block; margin-top: var(--space-xl); }
  .article-aside { position: static; margin-bottom: var(--space-xl); }
  .article-next > .container > div { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .article-author-signature { grid-template-columns:1fr; justify-items:center; gap:.8rem; padding:1.35rem 1.15rem; text-align:center; }
  .article-author-signature > .author-avatar-photo { width:112px; height:112px; }
  .article-author-signature h2 { margin:.1rem 0 .3rem; font-size:1.35rem; }
  .author-signature-bio { max-width:31ch; margin:.7rem auto 0; }
}

.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-azul);
}

body.dark-mode .faculty-card:hover {
  border-color: var(--color-celeste);
}

.faculty-card-header {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--space-md);
}

.faculty-icon-wrapper {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-azul);
  color: var(--color-blanco);
}

body.dark-mode .faculty-icon-wrapper {
  background-color: var(--color-celeste);
  color: var(--color-tinta);
}

.faculty-icon {
  font-size: 26px !important;
}

.faculty-campus {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-azul);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

body.dark-mode .faculty-campus {
  color: var(--color-celeste);
}

.faculty-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-tinta);
  line-height: 1.2;
}

body.dark-mode .faculty-card-title {
  color: var(--color-blanco);
}

.faculty-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.faculty-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-top: 1px dashed var(--border-color);
  padding-top: var(--space-md);
}

.detail-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.4;
}

.detail-item > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-icon {
  font-size: 18px !important;
  color: var(--color-azul);
  margin-top: 2px;
}

body.dark-mode .detail-icon {
  color: var(--color-celeste);
}

/* Accordion Section */
.facultades-accordion-section {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.accordion-section-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-tinta);
  margin-bottom: var(--space-xs);
}

body.dark-mode .accordion-section-title {
  color: var(--color-blanco);
}

.accordion-section-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
}

.accordion-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
}

.accordion-item {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background-color: var(--bg-section);
  transition: border-color var(--transition-fast);
}

.accordion-item.active {
  border-color: var(--color-azul);
}

body.dark-mode .accordion-item.active {
  border-color: var(--color-celeste);
}

.accordion-header {
  width: 100%;
  padding: 1.15rem var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-tinta);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

body.dark-mode .accordion-header {
  color: var(--color-blanco);
}

.accordion-header:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

body.dark-mode .accordion-header:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.accordion-arrow {
  color: var(--text-muted);
  transition: transform var(--transition-normal);
}

.accordion-item.active .accordion-arrow {
  transform: rotate(180deg);
  color: var(--color-azul);
}

body.dark-mode .accordion-item.active .accordion-arrow {
  color: var(--color-celeste);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: var(--bg-body);
  border-top: 0 solid var(--border-color);
}

.accordion-item.active .accordion-content {
  border-top-width: 1px;
}

.accordion-content p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  padding: var(--space-lg);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .facultades-grid {
    grid-template-columns: 1fr;
  }
}



/* ==========================================================================
   TUTORIALES UGMA PAGE
   ========================================================================== */

/* --- Hero Banner --- */
.tut-hero {
  background: linear-gradient(135deg, var(--color-azul) 0%, #002bb5 60%, #001577 100%);
  padding: var(--space-xxl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}

.tut-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.tut-hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
  z-index: 1;
}

.tut-hero-text .kicker {
  color: var(--color-amarillo);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xs);
}

.tut-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.tut-hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  max-width: 60ch;
}

/* --- Search Bar --- */
.tut-search-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 0.65rem var(--space-md);
  backdrop-filter: blur(8px);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  max-width: 620px;
}

.tut-search-wrapper:focus-within {
  border-color: var(--color-amarillo);
  background: rgba(255,255,255,0.18);
}

.tut-search-icon {
  color: rgba(255,255,255,0.6);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.tut-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: #fff;
  min-width: 0;
}

.tut-search-input::placeholder {
  color: rgba(255,255,255,0.5);
}

.tut-search-kbd {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color: rgba(255,255,255,0.6);
  font-size: 0.7rem;
  font-family: var(--font-sans);
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Filter Pills --- */
.tut-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* tut-filter-btn: structure-only extras; colors come from .actualidad-filter-btn */
.tut-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tut-filter-btn .material-symbols-outlined {
  font-size: 1rem;
}

/* .tut-filter-btn.active is now handled by .actualidad-filter-btn.active (blue) */

/* Outside hero, filter pill resets for empty-state button */
.tut-empty-state .tut-filter-btn {
  background: var(--color-azul);
  border-color: var(--color-azul);
  color: #fff;
  margin-top: var(--space-sm);
}

/* --- Main Content Section --- */
.tut-content-section {
  padding: var(--space-xxl) 0;
}

/* --- Layout: grid + sidebar --- */
.tut-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-xl);
  align-items: start;
}

/* --- Cards Grid --- */
.tut-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

/* --- Individual Card --- */
.tut-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.tut-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0,68,255,0.18);
}

.tut-card-download {
  border-top: 3px solid #155724;
}

.tut-card-icon {
  min-height: 76px;
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--icon-color) 20%, transparent) 0 4px, transparent 5px),
    linear-gradient(135deg, color-mix(in srgb, var(--icon-color) 14%, var(--card-bg)), color-mix(in srgb, var(--icon-color) 5%, var(--card-bg)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

.tut-card-icon .material-symbols-outlined {
  font-size: 2.25rem;
  color: var(--icon-color);
  padding: 0.45rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--icon-color) 15%, transparent);
}

.tut-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

/* --- Tags --- */
.tut-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
  width: fit-content;
}

.tut-tag-admin  { background: rgba(0,68,255,0.1);   color: var(--color-azul); }
.tut-tag-derecho{ background: rgba(26,26,46,0.08);  color: #1a1a2e; }
.tut-tag-odonto { background: rgba(0,109,119,0.1);  color: #006d77; }
.tut-tag-ing    { background: rgba(123,45,139,0.1); color: #7b2d8b; }
.tut-tag-faces  { background: rgba(196,124,0,0.1);  color: #c47c00; }
.tut-tag-tesis  { background: rgba(0,64,93,0.1);    color: #00405d; }
.tut-tag-formatos{ background: rgba(21,87,36,0.1);  color: #155724; }

body.dark-mode .tut-tag-derecho { background: rgba(240,242,245,0.08); color: #c8cad0; }

/* --- Card Typography --- */
.tut-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
}

.tut-card-excerpt {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

.tut-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tut-card-meta .material-symbols-outlined {
  font-size: 0.9rem;
}

.tut-sep {
  opacity: 0.4;
}

/* --- Card CTA Button --- */
.tut-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-azul);
  text-decoration: none;
  margin-top: auto;
  transition: gap var(--transition-fast);
}

.tut-card-btn .material-symbols-outlined {
  font-size: 1rem;
  transition: transform var(--transition-fast);
}

.tut-card-btn:hover {
  gap: 0.55rem;
}

.tut-card-btn:hover .material-symbols-outlined {
  transform: translateX(3px);
}

.tut-card-btn-download {
  color: #155724;
}

body.dark-mode .tut-card-btn-download {
  color: #6ee68b;
}

/* --- Empty State --- */
.tut-empty-state {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--text-muted);
  gap: var(--space-sm);
}

.tut-empty-state .material-symbols-outlined {
  font-size: 3rem;
  opacity: 0.4;
}

.tut-empty-state p {
  font-size: 1rem;
}

/* --- Sidebar --- */
.tut-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 110px;
}

.tut-sidebar-widget {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.tut-sidebar-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tut-sidebar-title .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-azul);
}

/* Quick Nav */
.tut-quicknav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tut-quicknav li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-main);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tut-quicknav li a .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-azul);
}

.tut-quicknav li a:hover {
  background: var(--bg-section);
  color: var(--color-azul);
}

/* Top Reads */
.tut-topreads {
  list-style: none;
  counter-reset: reads;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tut-topreads li {
  counter-increment: reads;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 2rem;
  position: relative;
}

.tut-topreads li::before {
  content: counter(reads);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-azul);
  opacity: 0.2;
  line-height: 1;
}

.tut-topreads li a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.tut-topreads li a:hover {
  color: var(--color-azul);
}

.tut-topreads-faculty {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Suggest Box */
.tut-suggest-box {
  text-align: center;
  background: linear-gradient(135deg, rgba(0,68,255,0.06) 0%, rgba(79,207,255,0.06) 100%);
  border: 1.5px solid rgba(0,68,255,0.15);
}

.tut-suggest-icon {
  font-size: 2rem !important;
  color: var(--color-amarillo) !important;
  display: block;
  margin-bottom: 0.5rem;
}

.tut-suggest-box h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.tut-suggest-box p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .tut-layout {
    grid-template-columns: 1fr;
  }

  .tut-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .tut-suggest-box {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .tut-grid {
    grid-template-columns: 1fr;
  }

  .tut-hero {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  .tut-search-kbd {
    display: none;
  }

  .tut-sidebar {
    grid-template-columns: 1fr;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================================================== 
   RECURSOS
   ========================================================================== */
.resources-main { overflow: hidden; }

.resources-hero {
  padding: 100px 0 0;
}

.resources-hero-grid {
  display: block;
}

.resources-hero h1 {
  max-width: none;
}

.resources-hero p { max-width: 600px; }

.resources-hero .actualidad-header-section {
  margin-bottom: var(--space-lg);
}

.resource-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 500px;
  margin-top: var(--space-sm);
  padding: 0.7rem 0.85rem 0.7rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.resource-search input { min-width: 0; flex: 1; color: var(--text-main); }
.resource-search kbd { padding: 0.15rem 0.45rem; border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-muted); font-size: 0.7rem; }

.resources-catalog { padding: var(--space-lg) 0 clamp(4rem, 8vw, 7rem); }
.resources-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: var(--space-lg); }
.resources-section-head h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); }
.resources-section-head p { max-width: 39ch; color: var(--text-muted); }

.resource-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--space-xl); }
.resources-hero .resource-filters { justify-content: center; margin-top: var(--space-md); margin-bottom: 0; }
.resource-filter { border: 1px solid var(--border-color); border-radius: 999px; padding: 0.55rem 1rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.resource-filter:hover { color: var(--text-main); border-color: var(--text-main); }
.resource-filter.active { background: var(--color-azul); border-color: var(--color-azul); color: #fff; }

.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.resource-card { min-height: 310px; display: flex; flex-direction: column; padding: clamp(1.25rem, 2vw, 2rem); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); }
.resource-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.resource-card[hidden] { display: none; }
.resource-card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--color-azul); background: rgba(0, 68, 255, 0.1); margin-bottom: auto; }
.resource-card-icon .material-symbols-outlined { font-size: 1.5rem; }
.resource-label { display: block; width: fit-content; margin: 1.5rem 0 0.6rem; padding: 0.2rem 0.5rem; border-radius: 4px; color: var(--color-azul); background: rgba(0, 68, 255, 0.1); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.resource-card h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.55rem; }
.resource-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
.resource-meta { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 1rem; }
.resource-meta span { padding: 0.2rem 0.45rem; border-radius: 4px; background: var(--bg-section); color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.resource-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 1.4rem; color: var(--color-azul); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.resource-action .material-symbols-outlined { font-size: 1rem; }

.resource-empty { padding: var(--space-xxl); text-align: center; border: 1px dashed var(--border-color); border-radius: var(--border-radius-lg); color: var(--text-muted); }
.resource-empty .material-symbols-outlined { font-size: 3rem; color: var(--color-azul); }
.resource-empty h3 { color: var(--text-main); margin: 0.5rem 0; }

.resources-callout { padding: clamp(4rem, 8vw, 7rem) 0; color: var(--color-blanco); background: var(--color-tinta); text-align: center; }
.resources-callout .container { max-width: 760px; }
.resources-callout .kicker { color: var(--color-celeste); }
.resources-callout h2 { font-size: clamp(2.2rem, 4.2vw, 4rem); margin-bottom: var(--space-md); }
.resources-callout p { color: rgba(255, 255, 255, 0.68); margin: 0 auto var(--space-lg); }
.resources-callout .btn-primary { background: var(--color-amarillo); border-color: var(--color-amarillo); color: var(--color-tinta); }

@media (max-width: 900px) {
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .resources-hero { padding-top: 80px; }
  .resource-grid { grid-template-columns: 1fr; }
  .resources-section-head { display: block; }
  .resources-section-head p { margin-top: 0.75rem; }
}

/* ==========================================================================
   PÁGINA DE OPINIONES
   Mantiene el sistema editorial del sitio: tinta, azul, acentos y tarjetas.
   ========================================================================== */
.opinion-hero { background: var(--bg-section); border-bottom: 1px solid var(--border-color); padding: clamp(3rem, 7vw, 6rem) 0; position: relative; overflow: hidden; }
.opinion-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .72fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; position: relative; z-index: 1; }
.opinion-hero-copy { max-width: 720px; }
.opinion-eyebrow { display: flex; gap: .45rem; align-items: center; color: var(--color-azul); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.15rem; }
.opinion-eyebrow .material-symbols-outlined { font-size: 1.1rem; }
.opinion-hero h1 { font-size: clamp(3rem, 6vw, 5.3rem); max-width: 760px; letter-spacing: -.065em; line-height: .98; color: var(--text-main); }
.opinion-hero h1 em { color: var(--color-azul); font-style: normal; position: relative; white-space: nowrap; }
.opinion-hero h1 em::after { content: ''; position: absolute; height: .18em; background: var(--color-amarillo); border-radius: 1px; left: .03em; right: .03em; bottom: -.02em; z-index: -1; }
.opinion-lead { max-width: 620px; color: var(--text-muted); font-size: 1.13rem; line-height: 1.65; margin: 1.6rem 0 1.85rem; }
.opinion-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.opinion-button { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; border-radius: 4px; font-weight: 700; transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.opinion-button:hover { transform: translateY(-2px); }
.opinion-button .material-symbols-outlined { font-size: 1.05rem; }
.opinion-button-primary { background: var(--color-azul); color: var(--color-blanco); padding: .8rem 1.1rem; }
.opinion-button-primary:hover { background: #0038d2; color: var(--color-blanco); }
.opinion-button-text { color: var(--text-main); padding: .6rem .15rem; border-bottom: 2px solid var(--color-amarillo); }
.opinion-hero-note { background: var(--color-azul); color: var(--color-blanco); padding: clamp(1.7rem, 3vw, 2.7rem); border-radius: var(--border-radius-lg); box-shadow: 10px 10px 0 var(--color-amarillo); transform: rotate(1.2deg); }
.opinion-note-mark { display: block; font-family: var(--font-handwritten); color: var(--color-amarillo); font-size: 4.3rem; line-height: .65; margin-bottom: .6rem; }
.opinion-hero-note p { font-size: 1.2rem; line-height: 1.4; font-weight: 650; margin-bottom: 1.6rem; }
.opinion-hero-note > span:last-child { color: rgba(255,255,255,.74); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.opinion-orbit { position: absolute; border: 1px solid rgba(0,68,255,.12); border-radius: 50%; pointer-events: none; }
.opinion-orbit-one { width: 42rem; height: 42rem; top: -28rem; right: -9rem; }
.opinion-orbit-two { width: 20rem; height: 20rem; bottom: -15rem; left: 42%; }
.opinion-featured { padding: var(--space-xxl) 0; }
.opinion-section-label { display: flex; align-items: center; gap: .7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; }
.opinion-section-label span { color: var(--color-azul); font-size: .82rem; }
.opinion-section-label p { margin: 0; }
.opinion-feature-card { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr); margin-top: 1.2rem; border: 1px solid var(--border-color); background: var(--card-bg); border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.opinion-feature-visual { min-height: 340px; background: var(--color-azul); color: var(--color-blanco); padding: 2rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.opinion-feature-visual > span { position: absolute; top: 1.7rem; right: 1.7rem; color: var(--color-amarillo); font-size: 3.4rem; }
.opinion-feature-visual p { font-size: .82rem; font-weight: 800; letter-spacing: .18em; line-height: 1.1; z-index: 1; }
.opinion-feature-visual strong { font-size: clamp(2.2rem, 4vw, 3.7rem); letter-spacing: -.08em; }
.opinion-feature-visual i { position: absolute; display: block; width: 8rem; height: 8rem; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; top: -2rem; left: -2rem; }
.opinion-feature-visual i:nth-of-type(2) { width: 18rem; height: 18rem; top: 24%; left: 44%; }.opinion-feature-visual i:nth-of-type(3) { width: 4rem; height: 4rem; top: 57%; left: 12%; background: var(--color-celeste); border: 0; }
.opinion-feature-content { padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.opinion-category { color: var(--color-azul); border: 1px solid currentColor; border-radius: 30px; padding: .23rem .7rem; font-size: .68rem; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; display: inline-block; }.category-celeste { color: #008fc8; }.category-yellow { color: #a88900; }
.opinion-byline { color: var(--text-muted); margin: 1rem 0 .4rem; font-size: .83rem; }
.opinion-feature-content h2 { font-size: clamp(1.9rem, 3vw, 2.9rem); font-weight: 700; letter-spacing: -.045em; max-width: 660px; }.opinion-feature-content > p:not(.opinion-byline) { color: var(--text-muted); line-height: 1.65; margin: 1rem 0 1.3rem; max-width: 620px; }
.opinion-read-link { color: var(--color-azul); font-size: .9rem; font-weight: 800; display: inline-flex; gap: .35rem; align-items: center; border-bottom: 2px solid var(--color-amarillo); padding-bottom: .18rem; }.opinion-read-link .material-symbols-outlined { font-size: 1rem; }
.opinion-library { background: var(--bg-section); padding: var(--space-xxl) 0; border-top: 1px solid var(--border-color); }.opinion-library-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; }.opinion-library-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: .4rem; }.opinion-library-head > p { color: var(--text-muted); max-width: 330px; margin-bottom: .2rem; }
.opinion-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0; padding-bottom: 1.2rem; border-bottom: 2px solid var(--border-editorial); }.opinion-search { width: min(100%, 380px); display: flex; align-items: center; gap: .6rem; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 30px; padding: .55rem 1rem; background: var(--card-bg); }.opinion-search .material-symbols-outlined { font-size: 1.15rem; }.opinion-search input { width: 100%; color: var(--text-main); }.opinion-search:focus-within { border-color: var(--color-azul); box-shadow: 0 0 0 3px rgba(0,68,255,.09); }.opinion-filters { display: flex; gap: .5rem; flex-wrap: wrap; }.opinion-filter { border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 30px; padding: .45rem .85rem; font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.opinion-filter:hover { color: var(--text-main); border-color: var(--text-main); }.opinion-filter.active { color: var(--color-blanco); background: var(--color-azul); border-color: var(--color-azul); }
.opinion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }.opinion-card { min-height: 320px; padding: 1.5rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--transition-normal), box-shadow var(--transition-normal); }.opinion-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }.opinion-card[hidden] { display: none; }.opinion-card-highlight { background: var(--color-tinta); color: var(--color-blanco); border-color: var(--color-tinta); }.opinion-card-highlight .opinion-card-top, .opinion-card-highlight footer small { color: rgba(255,255,255,.6); }.opinion-card-highlight .opinion-category { color: var(--color-celeste); }.opinion-card-top { display: flex; justify-content: space-between; gap: .5rem; align-items: center; color: var(--text-muted); font-size: .72rem; font-weight: 700; }.opinion-card h3 { font-size: 1.38rem; font-weight: 600; line-height: 1.18; letter-spacing: -.035em; margin: 1.2rem 0 .8rem; }.opinion-card > p { color: var(--text-muted); font-size: .91rem; line-height: 1.6; }.opinion-card-highlight > p { color: rgba(255,255,255,.75); }.opinion-card footer { margin-top: auto; padding-top: 1.2rem; display: flex; align-items: center; gap: .65rem; }.opinion-card footer > span:nth-child(2) { display: grid; font-size: .78rem; }.opinion-card footer small { color: var(--text-muted); font-size: .7rem; margin-top: .05rem; }.opinion-card footer a { margin-left: auto; display: grid; place-items: center; color: var(--color-azul); width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0,68,255,.09); }.opinion-card-highlight footer a { background: var(--color-amarillo); color: var(--color-tinta); }.opinion-card footer a .material-symbols-outlined { font-size: 1.05rem; }.opinion-avatar { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; background: var(--color-azul); color: var(--color-blanco); border-radius: 50%; font-size: .7rem; font-weight: 800; }.avatar-celeste { background: var(--color-celeste); color: var(--color-tinta); }.avatar-yellow { background: var(--color-amarillo); color: var(--color-tinta); }.opinion-card-invite { background: var(--color-amarillo); border-color: var(--color-amarillo); }.opinion-card-invite > .material-symbols-outlined { font-size: 2.2rem; color: var(--color-azul); }.opinion-card-invite a { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 800; }.opinion-card-invite a .material-symbols-outlined { font-size: 1rem; }
.opinion-empty { padding: 3rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .65rem; }.opinion-empty > .material-symbols-outlined { font-size: 2.4rem; color: var(--color-azul); }.opinion-empty p { color: var(--text-muted); }.opinion-empty .opinion-button { margin-top: .75rem; }
.opinion-participate { background: var(--color-azul); color: var(--color-blanco); padding: var(--space-xxl) 0; }.opinion-participate-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 8vw, 8rem); align-items: end; }.opinion-participate .opinion-section-label { color: rgba(255,255,255,.7); }.opinion-participate .opinion-section-label span { color: var(--color-amarillo); }.opinion-participate h2 { margin-top: .5rem; font-size: clamp(2rem, 4vw, 3.45rem); letter-spacing: -.05em; max-width: 680px; }.opinion-participate-inner > div:last-child > p { color: rgba(255,255,255,.8); line-height: 1.65; margin-bottom: 1.4rem; }.opinion-button-light { color: var(--color-tinta); background: var(--color-amarillo); padding: .8rem 1rem; }.opinion-button-light:hover { color: var(--color-tinta); background: #ffe55b; }
body.dark-mode .opinion-hero { background: var(--bg-section); } body.dark-mode .opinion-hero h1 em, body.dark-mode .opinion-eyebrow, body.dark-mode .opinion-read-link { color: var(--color-celeste); } body.dark-mode .opinion-button-primary, body.dark-mode .opinion-filter.active { background: var(--color-celeste); border-color: var(--color-celeste); color: var(--color-tinta); } body.dark-mode .opinion-feature-visual { background: #172034; } body.dark-mode .opinion-card-highlight { background: #0e1118; border-color: #0e1118; } body.dark-mode .opinion-card footer a { color: var(--color-tinta); background: var(--color-celeste); } body.dark-mode .opinion-card-invite { color: var(--color-tinta); } body.dark-mode .opinion-card-invite > p { color: rgba(16,19,26,.72); } body.dark-mode .opinion-orbit { border-color: rgba(79,207,255,.12); }
@media (max-width: 900px) { .opinion-hero-grid, .opinion-participate-inner { grid-template-columns: 1fr; }.opinion-hero-note { max-width: 520px; }.opinion-grid { grid-template-columns: repeat(2, 1fr); }.opinion-library-head { align-items: start; flex-direction: column; gap: .8rem; }.opinion-library-head > p { max-width: 540px; }.opinion-controls { align-items: stretch; flex-direction: column; }.opinion-search { width: 100%; } }
@media (max-width: 640px) { .opinion-hero { padding: 3.3rem 0; }.opinion-hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }.opinion-lead { font-size: 1rem; }.opinion-hero-note { margin-right: .7rem; padding: 1.5rem; }.opinion-featured, .opinion-library, .opinion-participate { padding: 3.5rem 0; }.opinion-feature-card { grid-template-columns: 1fr; }.opinion-feature-visual { min-height: 235px; }.opinion-feature-content { padding: 1.6rem; }.opinion-grid { grid-template-columns: 1fr; }.opinion-card { min-height: 285px; }.opinion-filters { justify-content: flex-start; }.opinion-hero-actions { align-items: flex-start; flex-direction: column; gap: .7rem; } }

/* La cabecera de Opiniones comparte la misma composición de Actualidad,
   Tutoriales y Recursos; la identidad editorial comienza en las columnas. */
.opiniones-page .opinion-hero { background: var(--bg-body); border: 0; overflow: visible; padding: 100px 0 0; margin-bottom: var(--space-xl); }
.opiniones-page .opinion-hero .kicker { margin-bottom: var(--space-xs); }
.opiniones-page .opinion-hero .actualidad-title { color: var(--text-main); font-size: 3rem; }
.opiniones-page .opinion-hero .actualidad-subtitle { margin-bottom: var(--space-md); }
.opiniones-page .opinion-hero-actions { justify-content: center; }
.opiniones-page .opinion-button-primary { border-radius: 30px; padding: .65rem 1.05rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.opiniones-page .opinion-button-text { font-size: .85rem; }
@media (max-width: 640px) { .opiniones-page .opinion-hero { padding: 80px 0 0; }.opiniones-page .opinion-hero .actualidad-title { font-size: 2.2rem; }.opiniones-page .opinion-hero-actions { align-items: center; flex-direction: row; justify-content: center; } }

/* ========================================================================== 
   PÁGINA NOSOTROS
   ========================================================================== */
.nosotros-hero { padding: 100px 0 0; }
.nosotros-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); padding: var(--space-xxl) 0; }
.nosotros-index { color: var(--color-azul); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .65rem; }
.nosotros-intro h2, .nosotros-section-head h2, .nosotros-founder h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.045em; max-width: 690px; }
.nosotros-intro-copy > p:not(.nosotros-index) { color: var(--text-muted); max-width: 660px; line-height: 1.7; margin-top: 1rem; }
.nosotros-statement { min-height: 250px; display: flex; flex-direction: column; justify-content: center; padding: 2.2rem; border-radius: var(--border-radius-lg); background: var(--color-azul); color: var(--color-blanco); box-shadow: 10px 10px 0 var(--color-amarillo); }
.nosotros-statement .material-symbols-outlined { color: var(--color-amarillo); font-size: 2.3rem; margin-bottom: .8rem; }.nosotros-statement p { font-size: 1.35rem; font-weight: 600; line-height: 1.35; }.nosotros-statement small { color: rgba(255,255,255,.74); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 1.3rem; }
.nosotros-principles { background: var(--bg-section); padding: var(--space-xxl) 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }.nosotros-section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: var(--space-xl); }.nosotros-principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }.nosotros-principles article { min-height: 240px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 1.7rem; box-shadow: var(--shadow-sm); }.nosotros-principles article > span { color: var(--color-azul); font-size: 2rem; }.nosotros-principles h3 { font-size: 1.4rem; font-weight: 600; margin: 1.6rem 0 .5rem; }.nosotros-principles article p { color: var(--text-muted); line-height: 1.6; font-size: .93rem; }
.nosotros-founder { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; padding: var(--space-xxl) 0; }.nosotros-founder-mark { min-height: 480px; background: var(--color-tinta); color: var(--color-blanco); border-radius: var(--border-radius-lg); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }.nosotros-founder-mark::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(16,19,26,.76)); pointer-events: none; }.nosotros-founder-mark img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; position: absolute; inset: 0; }.nosotros-founder-mark span { position: relative; z-index: 1; margin: 0 1.4rem 1.3rem; color: var(--color-blanco); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.nosotros-founder-copy > p:not(.nosotros-index) { color: var(--text-muted); line-height: 1.7; margin-top: 1rem; }.nosotros-founder-meta { display: flex; gap: 2.4rem; flex-wrap: wrap; padding-top: 1.5rem; margin-top: 1.7rem; border-top: 1px solid var(--border-color); }.nosotros-founder-meta span { display: flex; flex-direction: column; }.nosotros-founder-meta strong { font-size: .9rem; }.nosotros-founder-meta small { color: var(--text-muted); font-size: .78rem; margin-top: .15rem; }.nosotros-founder-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-azul); font-size: .88rem; font-weight: 700; margin-top: 1.5rem; border-bottom: 2px solid var(--color-amarillo); padding-bottom: .2rem; }.nosotros-founder-link .material-symbols-outlined { font-size: 1rem; }
.nosotros-participate { background: var(--color-azul); color: var(--color-blanco); padding: var(--space-xxl) 0; }.nosotros-participate > .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 8vw, 8rem); align-items: end; }.nosotros-participate .kicker { color: var(--color-celeste); }.nosotros-participate h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; max-width: 680px; }.nosotros-participate p { color: rgba(255,255,255,.8); line-height: 1.65; margin-bottom: 1.4rem; }.nosotros-participate .btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--color-amarillo); border-color: var(--color-amarillo); color: var(--color-tinta); }.nosotros-participate .btn-primary .material-symbols-outlined { font-size: 1rem; }
body.dark-mode .nosotros-statement { background: #172034; }.nosotros-page .actualidad-title { color: var(--text-main); } body.dark-mode .nosotros-principles article > span, body.dark-mode .nosotros-index { color: var(--color-celeste); }
@media (max-width: 900px) { .nosotros-intro, .nosotros-founder, .nosotros-participate > .container { grid-template-columns: 1fr; }.nosotros-statement { max-width: 520px; }.nosotros-principles-grid { grid-template-columns: 1fr; }.nosotros-principles article { min-height: 0; }.nosotros-founder-mark { min-height: 440px; max-width: 520px; }.nosotros-section-head { display: block; } }
@media (max-width: 640px) { .nosotros-hero { padding: 80px 0 0; }.nosotros-intro, .nosotros-founder, .nosotros-principles, .nosotros-participate { padding: 3.5rem 0; }.nosotros-founder-mark { min-height: 380px; }.nosotros-statement { padding: 1.6rem; margin-right: .7rem; }.nosotros-founder-meta { gap: 1.2rem; } }