/* ============================================================
   Perfect Feed — NEO-BRUTALISM
   Bordes negros gruesos · sombras duras · colores saturados
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@700&display=swap');

:root {
  --bg:        #f5e6c8;   /* crema */
  --ink:       #0a0a0a;   /* negro tinta */
  --white:     #ffffff;
  --yellow:    #ffd633;
  --pink:      #ff5da2;
  --cyan:      #4dd4e8;
  --lime:      #9ae600;
  --purple:    #9b8cff;
  --orange:    #ff8a3d;
  --green:     #34d058;
  --red:       #ff4d4d;

  --border:    3px solid var(--ink);
  --border-thick: 4px solid var(--ink);
  --shadow:    6px 6px 0 var(--ink);
  --shadow-lg: 9px 9px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);

  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;
  --max-width:    1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  /* Cuadrícula de fondo estilo papel */
  background-image:
    linear-gradient(rgba(10,10,10,.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(10,10,10,.07) 2px, transparent 2px);
  background-size: 38px 38px;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--ink); text-decoration: none; }

/* ── HEADER ── */
header {
  position: sticky; top: 0; z-index: 100;
  background: var(--yellow);
  border-bottom: var(--border-thick);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand .logo {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--pink); border: var(--border); box-shadow: var(--shadow-sm);
  font-size: 1.5rem; transform: rotate(-4deg);
}
.brand h1 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; }
.header-meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.chip-live {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  text-transform: uppercase;
  background: var(--lime); border: var(--border); padding: .3rem .65rem;
  display: inline-flex; align-items: center; gap: .4rem;
  box-shadow: var(--shadow-sm);
}
.chip-live::before {
  content: ''; width: 9px; height: 9px; background: var(--ink); border-radius: 50%;
  animation: pop 1.1s steps(1) infinite;
}
@keyframes pop { 50% { opacity: .2; } }
.chip-date { font-family: var(--font-mono); font-size: .72rem; }
.btn-rss {
  font-family: var(--font-display); font-size: .8rem;
  background: var(--orange); border: var(--border); padding: .45rem .9rem;
  box-shadow: var(--shadow-sm); transition: transform .1s, box-shadow .1s;
}
.btn-rss:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-rss:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

/* ── HERO ── */
.hero { padding: 3rem 0 1.5rem; }
.hero .tag {
  display: inline-block; font-family: var(--font-mono); font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--cyan); border: var(--border); padding: .35rem .8rem;
  box-shadow: var(--shadow-sm); transform: rotate(-2deg); margin-bottom: 1.2rem;
}
.hero h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.22; letter-spacing: -.03em;
  max-width: 14ch;
}
.hero h2 mark {
  background: var(--pink); color: var(--ink);
  /* Padding vertical + line-height propio: evita que la ñ/coma de una línea
     se monte sobre el fondo rosa de la línea vecina en Archivo Black. */
  padding: .12em .15em; line-height: 1;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero p {
  margin-top: 1.2rem; max-width: 60ch; font-size: 1.05rem; font-weight: 500;
}

/* ── TASAS — tarjetas chunky ── */
.tasas-promedios {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  margin: 2rem 0 0;
}
.tasa-card {
  border: var(--border-thick); box-shadow: var(--shadow-lg);
  padding: 1.4rem 1.5rem; position: relative;
  transition: transform .12s, box-shadow .12s;
}
.tasa-card:hover { transform: translate(-3px,-3px); box-shadow: 12px 12px 0 var(--ink); }
.tasa-card.usd { background: var(--lime); }
.tasa-card.eur { background: var(--purple); }
.tasa-card .moneda-label {
  font-family: var(--font-display); font-size: 1rem;
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.tasa-card .flag {
  font-size: 1.1rem; background: var(--white); border: var(--border);
  width: 38px; height: 38px; display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.tasa-values { display: flex; gap: 1.2rem; }
.tv-block {
  flex: 1; background: var(--white); border: var(--border);
  padding: .6rem .8rem; box-shadow: var(--shadow-sm);
}
.tv-label {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.tv-num { font-family: var(--font-display); font-size: 2rem; line-height: 1; margin-top: .2rem; }
.tv-block.compra { background: var(--white); }
.tv-block.compra .tv-num::before { content: ''; }
.tv-sub {
  margin-top: 1rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  background: var(--ink); color: var(--bg); display: inline-block;
  padding: .25rem .6rem;
}

/* ── TICKER doble ── */
.ticker-band {
  border-top: var(--border-thick); border-bottom: var(--border-thick);
  background: var(--ink); overflow: hidden; padding: .55rem 0;
}
.ticker-band.second { background: var(--pink); border-top: none; }
.ticker-band .label {
  position: absolute; z-index: 2; font-family: var(--font-display);
  background: var(--yellow); border-right: var(--border-thick);
  padding: .55rem 1rem; font-size: .85rem;
}
.ticker-row { display: flex; align-items: center; position: relative; }
.ticker {
  display: flex; gap: 1.4rem; width: max-content;
  animation: scroll 38s linear infinite; padding-left: 1.4rem;
}
.ticker.reverse { animation: scrollR 44s linear infinite; }
.ticker-band:hover .ticker { animation-play-state: paused; }
@keyframes scroll  { to { transform: translateX(-50%); } }
@keyframes scrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.tk-item {
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
  background: var(--white); border: var(--border); padding: .25rem .7rem;
  font-family: var(--font-mono); font-weight: 700; font-size: .82rem;
}
.ticker-band.second .tk-item { background: var(--bg); }
.tk-item .bank { text-transform: uppercase; font-family: var(--font-body); }
.tk-buy  { background: var(--green); padding: 0 .35rem; border: 2px solid var(--ink); }
.tk-sell { background: var(--cyan);  padding: 0 .35rem; border: 2px solid var(--ink); }

/* ── NAV categorías ── */
.cat-nav { display: flex; gap: .7rem; flex-wrap: wrap; margin: 2.8rem 0 2rem; }
.cat-nav button {
  font-family: var(--font-display); font-size: .82rem; cursor: pointer;
  background: var(--white); border: var(--border); padding: .55rem 1.1rem;
  box-shadow: var(--shadow-sm); transition: transform .1s, box-shadow .1s, background .1s;
}
.cat-nav button:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.cat-nav button.active { background: var(--yellow); transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

/* ── Categorías y tarjetas ── */
.categoria { margin-bottom: 3.5rem; scroll-margin-top: 100px; }
.cat-header {
  display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem;
}
.cat-icon {
  width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.4rem;
  background: var(--cyan); border: var(--border-thick); box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.cat-header h3 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; }
.cat-count {
  margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: .75rem;
  background: var(--ink); color: var(--bg); padding: .35rem .7rem;
}

.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.6rem;
}
.card {
  background: var(--white); border: var(--border-thick); box-shadow: var(--shadow);
  padding: 1.3rem; display: flex; flex-direction: column; gap: .7rem;
  transition: transform .12s, box-shadow .12s;
  opacity: 1;                       /* SIEMPRE visible (no depende de JS) */
  animation: cardIn .5s ease both;  /* entrada animada puramente en CSS */
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Stagger ligero de las primeras tarjetas de cada fila */
.cards-grid .card:nth-child(2) { animation-delay: .06s; }
.cards-grid .card:nth-child(3) { animation-delay: .12s; }
.card.reveal { opacity: 1; transform: translateY(0); }
.card:hover {
  transform: translate(-4px,-4px) !important;
  box-shadow: 11px 11px 0 var(--ink);
}
/* Color de barra superior rotando por tarjeta */
.card:nth-child(4n+1) .card-source { background: var(--yellow); }
.card:nth-child(4n+2) .card-source { background: var(--cyan); }
.card:nth-child(4n+3) .card-source { background: var(--pink); }
.card:nth-child(4n+4) .card-source { background: var(--lime); }
.card-source {
  align-self: flex-start;
  font-family: var(--font-mono); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em;
  border: var(--border); padding: .25rem .6rem; box-shadow: 3px 3px 0 var(--ink);
}
.card h4 { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.25; }
.card h4 a { text-decoration: none; }
.card p { font-size: .9rem; font-weight: 500; flex: 1; }

/* ── Tarjeta plegable (<details>) ── */
.card > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; gap: .7rem;
  position: relative;
  padding-right: 2rem; /* espacio para la flecha */
}
.card > summary::-webkit-details-marker { display: none; }
.card > summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.card > summary::after {
  content: '▸';
  position: absolute; top: 0; right: 0;
  font-size: 1.2rem; line-height: 1;
  transition: transform .15s ease;
}
.card[open] > summary::after { transform: rotate(90deg); }
.card[open] > summary { border-bottom: var(--border); padding-bottom: .7rem; }
.card-body { display: flex; flex-direction: column; gap: .7rem; margin-top: .7rem; }
.card .read-more {
  align-self: flex-start; font-family: var(--font-display); font-size: .78rem;
  background: var(--ink); color: var(--bg); padding: .45rem .85rem;
  transition: transform .1s; margin-top: auto;
}
.card .read-more:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }

/* ── Análisis IA ── */
.ia-analysis {
  border: var(--border);
  border-left: 8px solid var(--ink);   /* barra de acento: separa de un vistazo */
  background: var(--purple);
  padding: .8rem 1rem .85rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.ia-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: inline-block;
  background: var(--ink);
  color: var(--yellow);
  padding: .2rem .5rem;
  margin-bottom: .55rem;
}
.ia-analysis p {
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.55;
}

/* ── Footer ── */
footer {
  border-top: var(--border-thick); background: var(--ink); color: var(--bg);
  padding: 2.5rem 0; margin-top: 2rem;
}
footer .container { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
footer p { font-weight: 500; }
footer .foot-badges { display: flex; gap: .7rem; flex-wrap: wrap; }
footer .badge {
  font-family: var(--font-mono); font-weight: 700; font-size: .74rem;
  background: var(--bg); color: var(--ink); border: var(--border);
  padding: .35rem .75rem; box-shadow: 3px 3px 0 var(--pink);
}
footer .badge:hover { box-shadow: 3px 3px 0 var(--cyan); }

@media (max-width: 720px) {
  /* Sombras y bordes más finos: a 3-4px el look brutalista se mantiene
     pero deja de comerse el ancho útil de la pantalla. */
  :root {
    --border:       2px solid var(--ink);
    --border-thick: 3px solid var(--ink);
    --shadow:       4px 4px 0 var(--ink);
    --shadow-lg:    5px 5px 0 var(--ink);
    --shadow-sm:    3px 3px 0 var(--ink);
  }
  body { background-size: 26px 26px; }
  .container { padding: 0 .9rem; }

  /* Header centrado: marca arriba, chips debajo en una fila centrada.
     El logo va rotado y con sombra, así que necesita margen propio o el
     `overflow-x: hidden` del body le corta la esquina izquierda. */
  .header-inner {
    padding: .6rem 0; gap: .55rem;
    flex-direction: column; justify-content: center;
  }
  .brand { gap: .55rem; justify-content: center; padding-left: .35rem; }
  .brand .logo { width: 34px; height: 34px; font-size: 1.1rem; flex: 0 0 auto; }
  .brand h1 { font-size: 1.25rem; }
  .header-meta { gap: .45rem; justify-content: center; width: 100%; }
  .chip-live { font-size: .62rem; padding: .28rem .5rem; }
  .chip-live::before { width: 7px; height: 7px; }
  .chip-date { font-size: .62rem; }
  .btn-rss { font-size: .7rem; padding: .35rem .6rem; }

  .hero { padding: 1.75rem 0 1rem; }
  .hero .tag { font-size: .68rem; margin-bottom: .9rem; }
  .hero h2 { max-width: none; }
  .hero p { margin-top: .9rem; font-size: .95rem; }

  /* Tasas: una encima de otra, con los números aún grandes */
  .tasas-promedios { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
  .tasa-card { padding: 1rem 1.1rem; }
  .tasa-card .moneda-label { margin-bottom: .7rem; font-size: .9rem; }
  .tasa-card .flag { width: 30px; height: 30px; font-size: .95rem; }
  .tasa-values { gap: .7rem; }
  .tv-num { font-size: 1.7rem; }
  .tv-sub { margin-top: .7rem; font-size: .65rem; }

  .ticker-band .label { display: none; }
  .tk-item { font-size: .74rem; padding: .2rem .5rem; }

  /* Nav: carrusel horizontal en vez de envolver en 3 filas */
  .cat-nav {
    flex-wrap: nowrap; overflow-x: auto; margin: 1.75rem 0 1.25rem;
    padding-bottom: .55rem; gap: .5rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-nav button { flex: 0 0 auto; font-size: .72rem; padding: .5rem .8rem; }

  .categoria { margin-bottom: 2.25rem; scroll-margin-top: 108px; }
  .cat-header { gap: .6rem; margin-bottom: 1rem; }
  .cat-icon { width: 36px; height: 36px; font-size: 1.05rem; }
  .cat-header h3 { font-size: 1.15rem; }
  .cat-count { font-size: .62rem; padding: .25rem .5rem; }

  /* ── Tarjetas plegadas: título + fuente + fecha, nada más ── */
  .cards-grid { grid-template-columns: 1fr; gap: .8rem; }
  .card { padding: .9rem 1rem; }
  .card:hover { transform: none !important; box-shadow: var(--shadow); }
  .card > summary { gap: .5rem; padding-right: 1.75rem; }
  .card > summary::after { font-size: 1.15rem; }
  .card h4 { font-size: 1rem; }
  .card-top { align-items: center; gap: .4rem; }
  .card-source { font-size: .62rem; padding: .2rem .45rem; box-shadow: 2px 2px 0 var(--ink); }
  .card-date { font-size: .62rem; }
  .card .read-more { padding: .55rem .9rem; font-size: .74rem; }

  .ia-analysis { padding: .6rem .8rem; }
  .ia-analysis p { font-size: .84rem; }

  footer { padding: 1.75rem 0; }
  footer p { font-size: .88rem; }
  footer .badge { font-size: .66rem; padding: .3rem .6rem; }
}

/* Menos movimiento para quien lo pida (y menos batería en móvil) */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Fila superior de tarjeta: fuente + fecha ── */
.card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
}
.card-date {
  font-family: var(--font-mono); font-weight: 700; font-size: .68rem;
  letter-spacing: .04em; color: var(--ink); opacity: .55; white-space: nowrap;
}