/**
 * Bloque home «Especial niños» y página /especial-ninos.
 */
:root {
  --ninos-orange: #ea580c;
  --ninos-blue: #1d4ed8;
  --ninos-sky: #e0f2fe;
}

/* ----- Home ----- */
.block-ninos {
  margin-bottom: 2.5rem;
}
.block-ninos__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.block-ninos__extra {
  margin: 0;
  text-align: center;
}
.block-ninos__extra-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ninos-blue);
  text-decoration: none;
}
.block-ninos__extra-link:hover {
  text-decoration: underline;
}
.block-ninos__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ninos-sky) 0%, var(--white) 55%, #fff7ed 100%);
  border: 1px solid rgba(29, 78, 216, 0.12);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.block-ninos__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 54, 93, 0.12);
}
@media (min-width: 640px) {
  .block-ninos__card {
    grid-template-columns: minmax(140px, 200px) 1fr;
    padding: 1.75rem 2rem;
  }
}
.block-ninos__media {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.block-ninos__img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
}
.block-ninos__body {
  text-align: center;
}
@media (min-width: 640px) {
  .block-ninos__body {
    text-align: left;
  }
}
.block-ninos .block-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--blue-deep);
  margin: 0 0 0.5rem;
}
.block-ninos__lead {
  margin: 0 0 1rem;
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 36rem;
}
@media (min-width: 640px) {
  .block-ninos__lead {
    margin-left: 0;
    margin-right: auto;
  }
}
.block-ninos__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ninos-orange);
}
.block-ninos__cta::after {
  content: '→';
  transition: transform 0.2s ease;
}
.block-ninos__card:hover .block-ninos__cta::after {
  transform: translateX(4px);
}

/* ----- Página /especial-ninos ----- */
.page-especial-ninos {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}
.page-especial-ninos__brand {
  display: inline-block;
  margin-bottom: 1.5rem;
}
.page-especial-ninos__brand img {
  display: block;
  width: 100px;
  height: auto;
  margin: 0 auto;
}
.page-especial-ninos__figure {
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: linear-gradient(180deg, var(--ninos-sky) 0%, var(--white) 70%);
  border-radius: var(--radius);
  border: 1px solid rgba(29, 78, 216, 0.1);
}
.page-especial-ninos__mascot {
  display: block;
  width: min(280px, 85vw);
  height: auto;
  margin: 0 auto;
}
.page-especial-ninos__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2rem);
  color: var(--blue-deep);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.page-especial-ninos__intro {
  color: var(--gray);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  text-align: left;
}
.page-especial-ninos__intro:last-of-type {
  margin-bottom: 0;
}
.page-especial-ninos__back {
  display: inline-block;
  margin-top: 2rem;
  font-weight: 500;
  color: var(--coral);
  text-decoration: none;
}
.page-especial-ninos__back:hover {
  text-decoration: underline;
}

.page-especial-ninos__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.75rem 0 0;
}
.page-especial-ninos__videos-btn {
  background: var(--ninos-blue);
  color: var(--white);
  border-color: var(--ninos-blue);
}
.page-especial-ninos__videos-btn:hover {
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}

/* ----- Página /especial-ninos/videos ----- */
.page-ninos-videos {
  max-width: min(1180px, 100%);
  margin: 0 auto 3rem;
  padding: 0 0.25rem;
}
.page-ninos-videos__header {
  text-align: center;
  margin-bottom: 2rem;
}
.page-ninos-videos__crumb {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--coral);
  text-decoration: none;
}
.page-ninos-videos__crumb:hover {
  text-decoration: underline;
}
.page-ninos-videos__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--blue-deep);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.page-ninos-videos__lead {
  color: var(--gray);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 auto 1.25rem;
  max-width: 36rem;
  text-align: left;
}
.page-ninos-videos__channel {
  margin: 0;
}
.page-ninos-videos__empty {
  text-align: center;
  padding: 2rem 1.25rem;
  background: var(--off-white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-light);
  color: var(--gray);
  margin-bottom: 2rem;
}
.page-ninos-videos__empty a {
  color: var(--ninos-blue);
  word-break: break-all;
}
.page-ninos-videos__footer {
  margin-top: 2.5rem;
  text-align: center;
}

/* Tres columnas de Shorts (9:16); en móvil se apilan las columnas */
.ninos-videos__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 1.25rem;
  align-items: start;
}
@media (min-width: 768px) {
  .ninos-videos__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 0.85rem;
  }
}
.ninos-videos__column {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.ninos-videos__item {
  margin: 0;
  padding: 0;
}
.ninos-videos__item-title {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--blue-deep);
  margin: 0 0 0.45rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.ninos-videos__embed {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.14);
}
.ninos-videos__embed--short {
  aspect-ratio: 9 / 16;
  max-height: min(72vh, 560px);
  margin-left: auto;
  margin-right: auto;
}
.ninos-videos__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ninos-videos__watch-yt {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ninos-orange);
  text-decoration: none;
}
.ninos-videos__watch-yt:hover {
  text-decoration: underline;
}