/* ==========================================================================
   Crisolat redesign v2 — sistema visual global
   Se carga DESPUES de screen.css y refinements.css: sobreescribe con las
   variables/spec del brief sin tener que reescribir todo el CSS heredado.
   ========================================================================== */

/* Soporte de fuentes personalizadas de Ghost (Admin > Design > Fonts).
   Si el editor no elige una fuente propia, se mantiene la tipografia actual. */
body{ font-family: var(--font-body, Inter, Arial, sans-serif); }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading, Inter, Arial, sans-serif); }

:root{
  /* Alias sobre las variables ya existentes en screen.css (no se duplican valores) */
  --color-navy: var(--navy);
  --color-navy-dark: var(--navy-2);
  --color-yellow: var(--yellow);
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
  --color-background: var(--white);
  --color-soft: var(--soft);

  --container-width: 1280px;
  --sidebar-width: 320px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-card: 0 12px 30px rgba(7,21,43,.10);

  /* Colores editoriales por categoria (Fase 4). Un solo lugar centralizado;
     el resto del CSS solo hace referencia a estas variables. */
  --category-breaking: #D71920;
  --category-politica: #D49A00;
  --category-economia: #138A4B;
  --category-internacional: #7047A3;
  --category-tecnologia: #2563A9;
  --category-deportes: #20A89A;
  --category-cultura: #C23B78;
  --category-salud: #4C9B54;
  --category-opinion: #444B55;
  --category-sociedad: #D66A1F;
  --category-medioambiente: #26734D;
  --category-ciencia: #5757B8;
  /* Categorias del tema sin color propio en la paleta aprobada: se
     reutiliza el neutro --category-opinion (gris oscuro) en vez de
     inventar un color nuevo. */
  --category-seguridad: var(--category-opinion);
  --category-entretenimiento: var(--category-opinion);
  --category-general: var(--category-opinion);

  /* Documentacion de breakpoints usados en las @media de este archivo */
  --breakpoint-desktop-wide: 1200px;
  --breakpoint-tablet-landscape: 992px;
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 400px;

  /* Ancho de contenedor fijo pedido por el brief (anula refinements.css) */
  --max: var(--container-width);
}

/* El contenedor nunca debe seguir creciendo en pantallas ultra anchas */
@media (min-width: 1500px){
  :root{ --max: var(--container-width); }
}

/* Padding lateral del contenedor por rango: 24 / 20 / 16 */
.site-container{ width: min(calc(100% - 48px), var(--max)); }
@media (max-width: 991px){
  .site-container{ width: min(calc(100% - 40px), var(--max)); }
}
@media (max-width: 767px){
  .site-container{ width: min(calc(100% - 32px), var(--max)); }
}

/* ==========================================================================
   Accesibilidad general
   ========================================================================== */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  background:var(--color-navy); color:#fff; padding:10px 16px;
  border-radius:var(--radius-sm); transition:top .15s ease;
}
.skip-link:focus{ top:16px; left:-9999px; left:16px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--color-yellow);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Ajustes finos de header: menu en una sola linea + clima ligeramente mas
   grande + breakpoint preventivo. Medido empiricamente en produccion: el
   menu empieza a partirse en 2 lineas en cuanto el contenedor baja de los
   1280px completos (o sea, viewport < ~1328px), no en 1024px como se podria
   asumir a simple vista. white-space:nowrap evita el corte de palabras como
   red de seguridad; el breakpoint evita que la situacion llegue a ocurrir.
   ========================================================================== */
.site-header__inner{ gap:28px; }
.desktop-navigation ul{ gap:20px; }
.desktop-navigation a{ white-space:nowrap; }
.site-header__actions{ gap:18px; }

.weather-widget{
  grid-template-columns:25px auto;
  grid-template-rows:18px 18px;
  column-gap:6px;
  font-size:1.12rem;
}
.weather-widget b{ font-size:2.24rem; }
.weather-widget strong{ font-size:1.46rem; }
.weather-widget small{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:110px; display:inline-block;
}
@media (max-width: 1100px){
  .weather-widget small{ max-width:78px; }
}

/* Destacadas: titulos a maximo 3 lineas, altura uniforme entre elementos */
.trending-widget h3{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; min-height:calc(1.3em * 3);
}

/* ==========================================================================
   Navegacion: refuerzo de accesibilidad y estado móvil
   (la fuente de datos sigue siendo {{navigation}} unica; ver header.hbs)
   ========================================================================== */
.mobile-menu-toggle{
  display:none;
  min-width:44px; min-height:44px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
}
.mobile-navigation{
  border-top:1px solid var(--color-border);
}
.mobile-navigation ul{ display:flex; flex-direction:column; }
.mobile-navigation a{
  display:block; padding:14px 4px; min-height:44px;
  border-bottom:1px solid var(--color-border);
  font-weight:700;
}
body.mobile-nav-open{ overflow:hidden; }

/* Alineado a 1000px (no 991px) a proposito: screen.css ya oculta
   .desktop-navigation en <=1000px. Con umbrales distintos existia una
   "zona muerta" de 992-1000px donde ni el menu de escritorio ni el boton
   de hamburguesa eran visibles (verificado: ambos display:none). */
@media (max-width: 1000px){
  .desktop-navigation{ display:none; }
  .mobile-menu-toggle{ display:inline-flex; }
}
@media (min-width: 1001px){
  /* Nunca debe verse la version movil en escritorio, pase lo que pase con JS */
  .mobile-navigation{ display:none !important; }
}

/* ==========================================================================
   Encabezado de articulo (article-header) — sin estilos previos en el tema
   ========================================================================== */
.article-header{
  max-width:780px;
  margin:0 auto;
  padding:var(--space-lg) 0 0;
}
.article-header__category{ margin-bottom:14px; }
.article-header__title{
  margin:0 0 16px;
  font-size:5.2rem;
  line-height:1.05;
  letter-spacing:-1px;
  color:var(--color-navy);
}
.article-header__excerpt{
  margin:0 0 18px;
  font-size:2rem;
  line-height:1.5;
  color:var(--color-muted);
}
.article-header__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  color:var(--color-muted); font-size:1.3rem; padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--color-border);
}
.in-context{
  margin:14px 0 0; padding:12px 16px; border-left:3px solid var(--color-yellow);
  background:var(--color-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.in-context strong{ display:block; margin-bottom:4px; font-size:1.2rem; text-transform:uppercase; color:var(--color-navy); }
.in-context p{ margin:0; font-size:1.4rem; color:var(--color-muted); }
.article-share{ display:flex; align-items:center; gap:14px; padding:var(--space-sm) 0; }
.article-share a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--color-border); border-radius:50%;
  color:var(--color-navy); font-size:1.4rem;
}
.article-share a svg{ width:16px; height:16px; }
@media (max-width: 767px){
  .article-header__title{ font-size:3.2rem; }
  .article-header__excerpt{ font-size:1.8rem; }
}

.article-footer{ margin-top:var(--space-lg); padding-top:var(--space-md); border-top:1px solid var(--color-border); }
.article-footer__label{ display:block; margin-bottom:4px; color:var(--color-muted); font-size:1.2rem; text-transform:uppercase; }
.article-footer__category{ font-weight:800; color:var(--color-navy); font-size:1.6rem; }

.related-stories{ padding:var(--space-lg) 0 var(--space-xl); }
.related-stories .section-heading{ margin-bottom:18px; }
.related-stories__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-md);
}
@media (max-width: 767px){
  .related-stories__grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Imagen destacada de articulo
   Causa raiz original: post.hbs fija width="1600" height="900" como hint de
   presentacion HTML y el CSS nunca definia height:auto, asi que el alto
   quedaba fijo en 900px aunque el ancho se redujera (deformacion en movil).
   Causa del segundo bug: el figure solo tenia "site-container" (hasta
   1280px), mas ancho que el titulo/cuerpo del articulo (780px) — la imagen
   sobresalia del ancho editorial. Se unifica todo a 780px, igual que
   .article-header y .article-main, y se prefiere height:auto siempre
   (sin recorte forzado) para no arriesgar proporciones incorrectas.
   ========================================================================== */
.article-feature{
  width:100%;
  max-width:780px;
  margin:var(--space-md) auto var(--space-lg);
  overflow:hidden;
  border-radius:var(--radius-md);
}
.article-feature img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
@media (max-width: 767px){
  .article-feature{ border-radius:var(--radius-sm); }
}
.article-feature figcaption{
  padding:10px 2px 0; color:var(--color-muted); font-size:1.3rem;
}

/* Cualquier imagen dentro del cuerpo editorial respeta su proporcion natural */
.gh-content img{ width:auto; height:auto; max-width:100%; border-radius:var(--radius-sm); }
.gh-content figure{ margin:var(--space-md) 0; }
/* Tarjetas de imagen "ancha"/"completa" del editor Koenig */
.gh-content .kg-width-wide{
  width:100vw; max-width:calc(100% + 160px); margin-left:-80px;
}
.gh-content .kg-width-full{
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.gh-content .kg-width-wide img,.gh-content .kg-width-full img{ width:100%; height:auto; }
@media (max-width: 900px){
  .gh-content .kg-width-wide{ width:auto; max-width:100%; margin-left:0; }
}
.gh-content table{ display:block; overflow-x:auto; max-width:100%; }
.gh-content iframe{ max-width:100%; }
.gh-content blockquote{
  margin:var(--space-md) 0; padding:4px 0 4px 20px;
  border-left:4px solid var(--color-yellow); color:var(--color-navy);
  font-size:1.9rem; font-style:italic;
}
.gh-content a{ text-decoration:underline; text-underline-offset:2px; }
.gh-content h2{ font-size:2.8rem; margin:2.4em 0 .6em; }
.gh-content h3{ font-size:2.2rem; margin:2em 0 .6em; }
.gh-content p{ margin:0 0 1.4em; }
.gh-content ul,.gh-content ol{ margin:0 0 1.4em; padding-left:1.4em; }
.gh-content li{ margin-bottom:.5em; }

/* ==========================================================================
   Layout de articulo: columna de lectura + sidebar
   ========================================================================== */
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--sidebar-width);
  gap:var(--space-lg);
  align-items:start;
}
.article-main{ min-width:0; max-width:780px; }
.article-main .gh-content{ font-size:1.8rem; line-height:1.7; }

.article-sidebar{
  position:sticky;
  top:calc(72px + var(--space-md));
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  max-height:calc(100vh - 72px - var(--space-lg));
  overflow-y:auto;
}
@media (max-width: 991px){
  .article-layout{ grid-template-columns:1fr; }
  .article-sidebar{ position:static; max-height:none; overflow:visible; }
}

.sidebar-widget{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-md);
}
.sidebar-widget h2{ margin:0 0 12px; font-size:1.6rem; text-transform:uppercase; }
.sidebar-widget ol,.sidebar-widget ul{ list-style:none; margin:0; padding:0; }
.sidebar-widget li + li{ margin-top:14px; padding-top:14px; border-top:1px solid var(--color-border); }
.sidebar-widget li a{ font-weight:700; font-size:1.4rem; line-height:1.35; }
.sidebar-widget--newsletter{ background:var(--color-navy); color:#fff; border-color:var(--color-navy); }
.sidebar-widget--newsletter h2{ color:#fff; }
.sidebar-widget--newsletter input{
  width:100%; height:40px; margin-bottom:8px; padding:0 10px;
  border:1px solid #456080; border-radius:4px; background:transparent; color:#fff;
}
.sidebar-widget--newsletter button{
  width:100%; height:40px; border:0; border-radius:4px;
  background:var(--color-yellow); font-weight:800; cursor:pointer;
}
.related-topics{ display:flex; flex-wrap:wrap; gap:8px; }
.related-topics a{
  padding:6px 12px; border:1px solid var(--color-border); border-radius:999px; font-size:1.2rem;
}

/* Cuando no hay contenido real etiquetado "video", el modulo se oculta y la
   columna de cobertura en vivo ocupa el ancho completo */
.live-media--solo{ grid-template-columns:1fr; }
.live-media--solo .live-widget{ padding-right:28px; max-width:820px; }
.live-media--solo .live-timeline{ position:static; width:auto; margin-top:28px; border-left:0; padding-left:0; }

/* ==========================================================================
   Fase 9: iconos sociales y footer
   Causa raiz encontrada: la regla heredada ".social-icons a img" nunca
   coincidia con el markup real (los iconos son <svg> inline via partials,
   no <img>), asi que no tenian tamaño ni color consistente definido.
   ========================================================================== */
.social-icons{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.social-icons a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  color:var(--color-navy); border:1px solid transparent;
  transition:.15s;
}
.social-icons a svg{ width:18px; height:18px; display:block; }
.social-icons a:hover,.social-icons a:focus-visible{
  background:var(--color-soft); border-color:var(--color-border);
}
.footer-social{ display:flex; flex-direction:column; gap:10px; }
.footer-social h3{ margin:0; }
.site-footer .social-icons a{ color:#fff; }
.site-footer .social-icons a:hover,.site-footer .social-icons a:focus-visible{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24);
}

/* Espaciado general del footer: reducir aire vertical excesivo y alinear
   navegacion/columnas con respiracion consistente en vez de huecos grandes */
.site-footer{ padding:36px 0 16px; }
.footer-grid{ gap:28px; }
.footer-grid h3{ margin:0 0 12px; }
.footer-grid nav{ gap:8px; }
.footer-brand{ display:flex; flex-direction:column; gap:8px; }
.footer-bottom{ margin-top:24px; padding-top:14px; }
@media (max-width: 700px){
  .site-footer{ padding:28px 0 14px; }
  .footer-grid{ gap:22px; }
}

/* ==========================================================================
   Fases 11-12: widgets de sismos y mercados (datos reales via JSON estatico)
   ========================================================================== */
.data-widgets{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md);
  padding:var(--space-lg) 0 0;
  min-height:220px; /* reserva espacio para evitar CLS mientras carga */
}
.data-widgets .sidebar-widget{ min-height:180px; }
.data-widgets .widget-loading{ color:var(--color-muted); font-size:1.3rem; }
[data-earthquakes-list] li,[data-markets-list] li{ display:flex; flex-direction:column; gap:2px; }
.eq-item__mag{ font-weight:900; font-size:1.6rem; color:var(--color-navy); }
.eq-item__mag--major{ color:var(--category-breaking); }
.eq-item__place{ font-size:1.3rem; }
.eq-item__time{ color:var(--color-muted); font-size:1.15rem; }
.eq-item__link{ font-size:1.15rem; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.mk-item{ display:flex !important; flex-direction:row !important; justify-content:space-between; align-items:baseline; }
.mk-item__pair{ font-weight:700; }
.mk-item__value{ font-variant-numeric:tabular-nums; }
.widget-updated{ margin-top:10px; color:var(--color-muted); font-size:1.1rem; }
@media (max-width: 767px){
  .data-widgets{ grid-template-columns:1fr; min-height:0; }
}

/* ==========================================================================
   Espacios publicitarios (Google AdSense) — desactivados por defecto
   ========================================================================== */
.ad-slot{ display:none; }
.ad-slot[data-ads-enabled="true"]{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--ad-slot-height, 250px);
  background:var(--color-soft); border:1px dashed var(--color-border);
  border-radius:var(--radius-sm); color:var(--color-muted); font-size:1.2rem;
}

/* ==========================================================================
   Colores editoriales por categoria (Fase 4)
   La categoria principal (primary_tag) determina el color: se aplica via una
   clase modificadora "category-{slug}" (badge) o "category-text-{slug}"
   (label de texto), ya generadas por el tema en card.hbs/post.hbs/index.hbs.
   No se usa como fondo dominante de pagina/articulo, solo en badges,
   bordes/indicadores de tarjeta y acentos de hover.
   ========================================================================== */
.category-badge.category-ultima-hora,.category-label.category-text-ultima-hora{ background:var(--category-breaking); }
.category-badge.category-politica,.category-label.category-text-politica{ background:var(--category-politica); }
.category-badge.category-economia,.category-label.category-text-economia{ background:var(--category-economia); }
.category-badge.category-internacional,.category-label.category-text-internacional{ background:var(--category-internacional); }
.category-badge.category-tecnologia,.category-label.category-text-tecnologia{ background:var(--category-tecnologia); }
.category-badge.category-deportes,.category-label.category-text-deportes{ background:var(--category-deportes); }
.category-badge.category-cultura,.category-label.category-text-cultura{ background:var(--category-cultura); }
.category-badge.category-salud,.category-label.category-text-salud{ background:var(--category-salud); }
.category-badge.category-sociedad,.category-label.category-text-sociedad{ background:var(--category-sociedad); }
.category-badge.category-seguridad,.category-label.category-text-seguridad{ background:var(--category-seguridad); }
.category-badge.category-entretenimiento,.category-label.category-text-entretenimiento{ background:var(--category-entretenimiento); }
.category-badge.category-general,.category-label.category-text-general{ background:var(--category-general); }

/* Borde superior + indicador lateral discreto en tarjetas, segun la
   categoria del badge que contienen. Progressive enhancement con :has()
   (navegadores sin soporte simplemente no muestran el acento). */
.story-card,.news-card,.secondary-story{ border-top:3px solid transparent; transition:.2s, border-color 0s; }
.story-card:has(.category-ultima-hora),.news-card:has(.category-text-ultima-hora),.secondary-story:has(.category-text-ultima-hora){ border-top-color:var(--category-breaking); }
.story-card:has(.category-politica),.news-card:has(.category-text-politica),.secondary-story:has(.category-text-politica){ border-top-color:var(--category-politica); }
.story-card:has(.category-economia),.news-card:has(.category-text-economia),.secondary-story:has(.category-text-economia){ border-top-color:var(--category-economia); }
.story-card:has(.category-internacional),.news-card:has(.category-text-internacional),.secondary-story:has(.category-text-internacional){ border-top-color:var(--category-internacional); }
.story-card:has(.category-tecnologia),.news-card:has(.category-text-tecnologia),.secondary-story:has(.category-text-tecnologia){ border-top-color:var(--category-tecnologia); }
.story-card:has(.category-deportes),.news-card:has(.category-text-deportes),.secondary-story:has(.category-text-deportes){ border-top-color:var(--category-deportes); }
.story-card:has(.category-cultura),.news-card:has(.category-text-cultura),.secondary-story:has(.category-text-cultura){ border-top-color:var(--category-cultura); }
.story-card:has(.category-salud),.news-card:has(.category-text-salud),.secondary-story:has(.category-text-salud){ border-top-color:var(--category-salud); }
.story-card:has(.category-sociedad),.news-card:has(.category-text-sociedad),.secondary-story:has(.category-text-sociedad){ border-top-color:var(--category-sociedad); }
.story-card:has(.category-seguridad),.news-card:has(.category-text-seguridad),.secondary-story:has(.category-text-seguridad){ border-top-color:var(--category-seguridad); }
.story-card:has(.category-entretenimiento),.news-card:has(.category-text-entretenimiento),.secondary-story:has(.category-text-entretenimiento){ border-top-color:var(--category-entretenimiento); }
.story-card:has(.category-general),.news-card:has(.category-text-general),.secondary-story:has(.category-text-general){ border-top-color:var(--category-general); }
.story-card:hover,.news-card:hover{ border-top-color:currentColor; }

/* Indicador lateral discreto en la cabecera de categoria (tag-header--{slug}) */
.tag-header{ border-left:4px solid transparent; padding-left:var(--space-md); }
.tag-header--ultima-hora{ border-left-color:var(--category-breaking); }
.tag-header--politica{ border-left-color:var(--category-politica); }
.tag-header--economia{ border-left-color:var(--category-economia); }
.tag-header--internacional{ border-left-color:var(--category-internacional); }
.tag-header--tecnologia{ border-left-color:var(--category-tecnologia); }
.tag-header--deportes{ border-left-color:var(--category-deportes); }
.tag-header--cultura{ border-left-color:var(--category-cultura); }
.tag-header--salud{ border-left-color:var(--category-salud); }
.tag-header--sociedad{ border-left-color:var(--category-sociedad); }
.tag-header--seguridad{ border-left-color:var(--category-seguridad); }
.tag-header--entretenimiento{ border-left-color:var(--category-entretenimiento); }
.tag-header--general{ border-left-color:var(--category-general); }

/* Acento discreto en el titulo del articulo: pequeño borde inferior con el
   color de su categoria principal (no domina el articulo, es un detalle). */
.article-header{ border-bottom:3px solid transparent; }
.article-header:has(.category-ultima-hora){ border-bottom-color:var(--category-breaking); }
.article-header:has(.category-politica){ border-bottom-color:var(--category-politica); }
.article-header:has(.category-economia){ border-bottom-color:var(--category-economia); }
.article-header:has(.category-internacional){ border-bottom-color:var(--category-internacional); }
.article-header:has(.category-tecnologia){ border-bottom-color:var(--category-tecnologia); }
.article-header:has(.category-deportes){ border-bottom-color:var(--category-deportes); }
.article-header:has(.category-cultura){ border-bottom-color:var(--category-cultura); }
.article-header:has(.category-salud){ border-bottom-color:var(--category-salud); }
.article-header:has(.category-sociedad){ border-bottom-color:var(--category-sociedad); }
.article-header:has(.category-seguridad){ border-bottom-color:var(--category-seguridad); }
.article-header:has(.category-entretenimiento){ border-bottom-color:var(--category-entretenimiento); }
.article-header:has(.category-general){ border-bottom-color:var(--category-general); }

/* ==========================================================================
   Categorias / etiquetas
   ========================================================================== */
.tag-header{ padding:var(--space-lg) 0 var(--space-md); border-bottom:1px solid var(--color-border); }
.tag-header__eyebrow{
  display:inline-block; margin-bottom:8px; color:var(--color-yellow);
  font-weight:800; text-transform:uppercase; font-size:1.2rem; letter-spacing:.04em;
}
.tag-header h1{ margin:0 0 10px; font-size:4rem; color:var(--color-navy); }
.tag-header p{ max-width:640px; color:var(--color-muted); font-size:1.6rem; }

.tag-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--sidebar-width);
  gap:var(--space-lg);
  padding:var(--space-lg) 0 var(--space-xl);
  align-items:start;
}
.tag-archive__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-md);
}
@media (max-width: 991px){
  .tag-layout{ grid-template-columns:1fr; }
}
@media (max-width: 767px){
  .tag-archive__grid{ grid-template-columns:1fr; }
}

.story-card{
  display:flex; flex-direction:column;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  overflow:hidden; background:#fff; transition:.2s;
}
.story-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); }
.story-card__media{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--color-soft); }
.story-card__media img{ width:100%; height:100%; object-fit:cover; }
.story-card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.story-card__title{ margin:4px 0; font-size:1.6rem; line-height:1.3; }
.story-card__date{ margin-top:auto; color:var(--color-muted); font-size:1.2rem; }

.tag-empty{
  grid-column:1/-1; padding:var(--space-xl) var(--space-md); text-align:center;
  border:1px dashed var(--color-border); border-radius:var(--radius-md);
}
.tag-empty__eyebrow{ color:var(--color-yellow); font-weight:800; text-transform:uppercase; font-size:1.2rem; }
.tag-empty h2{ margin:10px 0; font-size:2.2rem; color:var(--color-navy); }
.tag-empty p{ color:var(--color-muted); margin:0 0 var(--space-md); }
.tag-empty__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.tag-empty__primary{
  padding:10px 18px; border-radius:var(--radius-sm); background:var(--color-navy); color:#fff; font-weight:700;
}

.pagination{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:var(--space-lg); padding-top:var(--space-md);
  border-top:1px solid var(--color-border);
}
.pagination a{
  padding:10px 16px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-weight:700;
}

/* ==========================================================================
   Paginas estaticas (Contacto, Quienes somos, Privacidad, Terminos...)
   Nota: solo tipografia/espaciado — el contenido viene de {{content}} y no
   se reestructura en tarjetas para no modificar contenido editorial.
   ========================================================================== */
.page-content{
  max-width:760px;
  margin:0 auto;
  padding:var(--space-xl) 0 calc(var(--space-xl) * 1.5);
}
.page-content h1{ font-size:4rem; color:var(--color-navy); margin:0 0 var(--space-md); }
.page-content h2{ font-size:2.4rem; color:var(--color-navy); margin:2em 0 .6em; }
.page-content p{ font-size:1.7rem; line-height:1.7; margin:0 0 1.2em; }
.page-content ul{ padding-left:1.4em; }
.page-content li{ margin-bottom:.6em; font-size:1.7rem; line-height:1.6; }
.page-content a{ text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* ==========================================================================
   Pagina de error (404)
   ========================================================================== */
.error-page{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:calc(var(--space-xl) * 2) 0; gap:var(--space-md);
}
.error-page__code{ font-size:8rem; font-weight:900; color:var(--color-navy); line-height:1; }
.error-page h1{ font-size:2.6rem; margin:0; }
.error-page p{ max-width:520px; color:var(--color-muted); font-size:1.7rem; }
.error-page a.primary-button{ margin-top:var(--space-sm); }

/* ==========================================================================
   Breadcrumb de articulo
   ========================================================================== */
.article-breadcrumb{
  padding:14px 0 0; font-size:1.2rem; color:var(--color-muted);
}
.article-breadcrumb a{ font-weight:700; color:var(--color-navy); }

/* ==========================================================================
   Utilidades responsive globales (44px de alto minimo en botones tactiles)
   ========================================================================== */
@media (max-width: 767px){
  button, .outline-button, .primary-button, .text-link, a.pagination__newer, a.pagination__older{
    min-height:44px;
  }
}