/* Navidad comparte la identidad de Diverprofe con verde profundo y pequeños recortes. */
.carol-hero { position: relative; background: #2d514b; color: var(--paper); overflow: hidden; }
.carol-hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 65px; align-items: center; padding-block: 65px 80px; }
.carol-hero h1 { font-size: clamp(2.9rem, 4.4vw, 4.4rem); line-height: 1.05; text-align: left; }
.carol-hero h1 span { color: var(--yellow-soft); }
.carol-hero-copy > p:not(.chapter) { max-width: 41ch; margin-top: 26px; color: #edf1e6; font-size: 1.03rem; line-height: 1.85; }
.carol-hero .chapter { color: var(--pink-soft); font-size: .71rem; }
.carol-hero .button { margin-top: 30px; background: var(--pink); color: var(--ink); border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }
.carol-hero .button:hover { background: var(--pink-soft); }
.carol-count { display: block; color: #e2eadb; font-size: .73rem; margin-top: 20px; }
.carol-collage { position: relative; height: 405px; }
.carol-photo { position: absolute; padding: 12px 12px 27px; width: 66%; aspect-ratio: 1; background: var(--paper); border: 1px solid var(--ink); box-shadow: 5px 6px 0 #0002; }
.carol-photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.carol-photo-1 { top: 0; left: 0; transform: rotate(-9deg); }
.carol-photo-2 { bottom: 10px; right: 0; transform: rotate(10deg); }
.carol-star { position: absolute; top: 0; right: 0; color: var(--yellow); font-size: 6.5rem; line-height: 1; transform: rotate(8deg); }
.carol-note { position: absolute; left: -5px; bottom: 0; font: 1.35rem/1.3 var(--display); color: var(--ink); background: var(--pink-soft); border: var(--border); padding: 15px 20px; transform: rotate(-7deg); }
.carol-hero-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 13px; background: radial-gradient(circle at 12px 18px, var(--paper) 14px, transparent 14.5px) 0 0 / 25px 22px repeat-x; }
.carol-intro { display: grid; grid-template-columns: 1fr 1fr 70px; align-items: center; gap: 60px; padding-block: 60px 65px; }
.carol-intro > p:first-child { font: 1.65rem/1.3 var(--display); }
.carol-intro > p:nth-child(2) { font-size: .95rem; color: var(--muted); margin: 0; max-width: 47ch; }
.carol-intro > span { font-size: 3.8rem; line-height: 1; color: #916074; transform: rotate(-12deg); }
.carols-page .catalog-heading { padding-bottom: 28px; }
.carols-page .catalog-tools { background: #f3f1e8; border-radius: 20px; }
.carol-search-note { font: 1.4rem/1.2 var(--display); color: #916074; transform: rotate(-4deg); align-self: center; }
.carols-page .catalog-filter.is-active { background: #2d514b; border-color: #2d514b; }
.carols-page .catalog-card { border-radius: 18px; background: var(--paper); }
.carols-page .song-picture { height: 215px; padding: 22px; background: #e8ece1; }
.carols-page .category-animales .song-picture { background: var(--pink-soft); }
.carols-page .category-ingles .song-picture { background: var(--yellow-soft); }
.carols-page .catalog-card h2 { font-size: 1.65rem; }
.carols-page .catalog-category { color: #2d514b; }
.carols-page .catalog-card-body { padding-inline: 25px; }
.carols-page .resource-full { font-size: .94rem; line-height: 1.9; }
.carols-page .catalog-empty { background: var(--yellow-soft); }
.carol-finish { display: flex; gap: 35px; align-items: center; background: var(--pink-soft); border: var(--border); border-radius: 25px; padding: 40px; margin-bottom: 85px; }
.carol-finish > span { display: grid; place-items: center; width: 75px; height: 75px; border-radius: 50%; flex: 0 0 auto; background: var(--yellow-soft); border: var(--border); font-size: 2.5rem; }
.carol-finish h2 { font-size: clamp(1.9rem, 2.8vw, 2.8rem); }
.carol-finish .chapter { margin-bottom: 17px; }
.carol-finish p:not(.chapter) { margin-top: 17px; font-size: .93rem; max-width: 48ch; }
.carol-finish .button { flex: 0 0 auto; margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .carol-photo { transition: transform .2s ease; }
  .carol-collage:hover .carol-photo-1 { transform: rotate(-6deg); }
  .carol-collage:hover .carol-photo-2 { transform: rotate(6deg); }
}
@media (max-width: 1000px) {
  .carol-hero-inner { gap: 40px; }
  .carol-collage { height: 350px; }
  .carol-photo { width: 72%; }
  .carol-star { font-size: 5rem; }
  .carol-intro { gap: 35px; grid-template-columns: 1fr 1fr 50px; }
  .carol-finish { flex-wrap: wrap; gap: 25px; }
  .carol-finish .button { margin-left: 100px; }
}
@media (max-width: 850px) {
  .carol-hero-inner { gap: 25px; padding-block: 45px 65px; }
  .carol-hero h1 { font-size: clamp(2.6rem, 5.6vw, 3.9rem); }
  .carol-hero-copy > p:not(.chapter) { font-size: .97rem; }
  .carol-collage { height: 320px; }
  .carol-note { font-size: 1.08rem; padding: 13px 16px; bottom: -10px; }
  .carol-photo-1 { top: 10px; }
  .carol-photo-2 { bottom: 25px; }
  .carol-intro { grid-template-columns: 1fr 1fr; padding-block: 45px 55px; }
  .carol-intro > span { display: none; }
  .carol-finish > div { flex: 1 1 70%; }
}
@media (max-width: 620px) {
  .carol-hero-inner { grid-template-columns: 1fr; gap: 40px; padding-block: 35px 60px; }
  .carol-hero h1 { font-size: clamp(2.65rem, 10.6vw, 3.8rem); }
  .carol-hero .chapter { font-size: .63rem; }
  .carol-hero-copy > p:not(.chapter) { max-width: 36ch; font-size: 1rem; }
  .carol-collage { height: 310px; width: min(100%, 340px); margin: 0 auto; }
  .carol-photo { width: 62%; }
  .carol-photo-1 { left: 10px; }
  .carol-photo-2 { right: 10px; bottom: 20px; }
  .carol-star { right: 10px; font-size: 4.8rem; }
  .carol-note { left: 0; bottom: -5px; font-size: 1.15rem; }
  .carol-intro { grid-template-columns: 1fr; gap: 22px; }
  .carol-intro > p:first-child { font-size: 1.65rem; }
  .carol-search-note { display: none; }
  .carols-page .catalog-card h2 { font-size: 1.85rem; }
  .carols-page .song-picture { height: 215px; }
  .carol-finish { padding: 28px; margin-bottom: 60px; display: grid; gap: 22px; }
  .carol-finish > span { width: 60px; height: 60px; font-size: 2rem; }
  .carol-finish .button { margin: 0; width: 100%; font-size: .83rem; }
}