/*
 * tdp-blog.css — CSS específico del listado de blog (Plantilla 4)
 * Se encola condicionalmente en is_home() && !is_front_page().
 * Requiere tdp-system.css como base.
 */

/* ============================================================
   Page Hero — solo texto, sin imagen lateral
   ============================================================ */
.page-hero {
  background: var(--cream);
  padding-top: 1.4rem;
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
  overflow: hidden;
  position: relative;
}
.page-hero h1 { margin: .4rem 0 .2rem; }
.page-hero .lede {
  color: var(--ink-soft);
  max-width: 56ch;
  font-size: 1.05rem;
}


/* ============================================================
   Artículo destacado — sección 3
   (.feat-art definido en tdp-system.css)
   ============================================================ */
/* Sin estilos adicionales — el componente es global. */


/* ============================================================
   Grid de artículos con filtros — sección 4
   ============================================================ */
.arts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}
/* .art y .filter están en tdp-system.css */


/* ============================================================
   CTA categorías — sección 7
   ============================================================ */
.cta-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  position: relative;
  z-index: 2;
}
.cta-cat {
  position: relative;
  border-radius: 22px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cta-cat.c-sea   { background: var(--sea);   color: #fff; }
.cta-cat.c-honey { background: var(--honey);  color: var(--ocean); }
.cta-cat .kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .5rem;
}
.cta-cat h3 {
  color: inherit;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: .5rem;
}
.cta-cat p {
  max-width: 36ch;
  font-size: .94rem;
  opacity: .9;
}
.cta-cat.c-sea p   { color: rgba(255, 255, 255, .9); }
.cta-cat .go {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}
.cta-cat.c-sea   .go { color: rgba(255, 255, 255, .95); }
.cta-cat.c-honey .go { color: var(--ocean); }
.cta-cat .go svg { width: 16px; height: 16px; }


/* ============================================================
   Responsive blog
   ============================================================ */
@media (max-width: 1020px) {
  .arts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .arts     { grid-template-columns: 1fr; }
  .cta-cats { grid-template-columns: 1fr; }
}


/* ============================================================
   PARCHE de fidelidad — blog (2026-06-11)
   Reglas presentes en prototipo-blog-ref.css pero ausentes
   en tdp-system.css + tdp-blog.css. Se añaden aquí para no
   tocar el CSS compartido.
   ============================================================ */

/* Subtítulo script dentro del hero del blog */
.page-hero .script-sub {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--coral);
  line-height: 1;
  display: block;
  margin-bottom: .9rem;
}

/* Etiqueta burbuja en el bloque de suscripción */
.subscribe .bubble-tag {
  display: inline-block;
  white-space: nowrap;
  background: var(--honey);
  color: var(--ocean);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.4rem;
  padding: .25rem 1rem;
  border-radius: 14px 14px 14px 3px;
  margin-bottom: .9rem;
  transform: rotate(-3deg);
}

/* Hover de tarjeta CTA de categoría */
.cta-cat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Animación de flecha al hacer hover en CTA */
.cta-cat:hover .go svg {
  transform: translateX(4px);
}