.popular-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; padding: 3rem; background: #edf3e9; border-radius: .9rem; margin-bottom: 3rem; }
.popular-hero h1 { font-size: clamp(2.3rem,5vw,3.7rem); color: #174728; letter-spacing: -.035em; }
.popular-intro { max-width: 48ch; font-size: 1.1rem; }
.popular-hero-side { border-left: 1px solid #bed1b5; padding-left: 2.5rem; }
.popular-hero-side > span { font-size: 5rem; font-weight: 650; line-height: 1.1; color: #226535; }
.popular-hero-side p:last-child { font-size: .9rem; color: var(--coop-muted); max-width: 30ch; }
.popular-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.3rem; }
.popular-card { display: flex; flex-direction: column; border: 1px solid var(--coop-line); border-radius: .7rem; overflow: hidden; background: #fff; min-width: 0; }
.popular-card[hidden] { display: none; }
.popular-media { padding: 1.25rem; background: #fff; height: 220px; display: grid; place-items: center; border-bottom: 1px solid #edf0eb; }
.popular-media img { display: block; height: 100%; width: 100%; min-height: 0; object-fit: contain; }
.popular-placeholder { display: flex; align-items: center; flex-direction: column; gap: .8rem; color: #7b8e7a; font-size: .8rem; }
.popular-copy { display: flex; flex-direction: column; padding: 1.3rem; flex: 1; }
.popular-category { color: #477540; font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .5rem; }
.popular-copy h3 { font-size: 1.15rem; margin: 0 0 .65rem; text-wrap: pretty; }
.popular-presentation { margin-bottom: .6rem; }
.popular-code { font-size: .8rem; color: var(--coop-muted); margin-bottom: 1rem; }
.popular-card-bottom { margin-top: auto; }
.popular-card-bottom p { font-size: .8rem; color: var(--coop-muted); margin-bottom: .75rem; }
.popular-card-bottom .button-link { width: 100%; text-align: center; }
.popular-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.popular-section-heading > a { flex-shrink: 0; font-weight: 600; }
.popular-section-heading h2 { margin-bottom: .65rem; }
.popular-section-heading p:last-child { margin-bottom: 0; }
.popular-controls { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 1rem; align-items: end; padding: 1.25rem; margin: 1.5rem 0 1rem; border-radius: .6rem; background: #f5f7f4; }
.popular-controls[hidden] { display: none; }
.popular-controls label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.popular-controls input,.popular-controls select,.popular-reset { width: 100%; min-height: 46px; padding: .6rem .75rem; border: 1px solid #8b998e; border-radius: .3rem; background: #fff; color: var(--coop-ink); font: inherit; min-width: 0; }
.popular-reset { cursor: pointer; color: var(--coop-green); }
.popular-controls select:focus-visible { outline: 3px solid #c79128; outline-offset: 4px; }
.popular-count { color: var(--coop-muted); font-size: .9rem; }
.popular-empty { padding: 2rem; background: #f5f7f4; text-align: center; border-radius: .5rem; }
.popular-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem; background: #f5f7f4; margin-top: 3rem; border-radius: .7rem; }
.popular-help h2 { margin-top: 0; }
.popular-help p { margin-bottom: 0; }
@media(max-width:900px) { .popular-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .popular-controls { grid-template-columns: 1fr 1fr; } .popular-hero { padding: 2rem; gap: 2rem; } .popular-section-heading { align-items: flex-start; flex-direction: column; } }
@media(max-width:580px) { .popular-grid { grid-template-columns: 1fr; } .popular-hero { grid-template-columns: 1fr; padding: 1.5rem; gap: 1rem; } .popular-hero-side { border-left: 0; border-top: 1px solid #bed1b5; padding: 1rem 0 0; } .popular-hero-side > span { font-size: 3rem; } .popular-controls { grid-template-columns: 1fr; padding: 1rem; } .popular-media { height: 200px; } .popular-help { padding: 1.5rem; } }

/* Carrusel compacto de Inicio, después de Gymboree. */
.popular-home .popular-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 4); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: .3rem .2rem .75rem; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #a0b49a #f0f5ed; }
.popular-home .popular-card { scroll-snap-align: start; }
.popular-home .popular-media { height: 126px; padding: .75rem; }
.popular-home .popular-media img { max-width: 110px; max-height: 102px; }
.popular-home .popular-copy { padding: 1rem; }
.popular-home .popular-copy h3 { font-size: 1rem; }
.popular-home .popular-presentation { font-size: .9rem; }
.popular-home .popular-code { margin-bottom: .6rem; }
.popular-home .popular-card-bottom p { font-size: .75rem; }
.popular-home .popular-card-bottom .button-link { font-size: .9rem; padding: .55rem; }
.popular-home .popular-grid:focus-visible { outline: 3px solid #c79128; outline-offset: 3px; }
.popular-carousel-controls { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: .6rem; }
.popular-carousel-controls[hidden] { display: none; }
.popular-carousel-controls button { width: 44px; height: 44px; border: 1px solid #cbdcc9; background: #f0f5ed; color: var(--coop-green); border-radius: 50%; font: inherit; font-size: 1.3rem; cursor: pointer; }
.popular-carousel-controls button:disabled { opacity: .4; cursor: default; }
.popular-carousel-controls span { min-width: 5rem; text-align: center; font-size: .9rem; color: var(--coop-muted); }
@media(max-width:1050px) { .popular-home .popular-grid { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media(max-width:800px) { .popular-home .popular-grid { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media(max-width:520px) { .popular-home .popular-grid { grid-auto-columns: 86%; } .popular-carousel-controls { justify-content: center; } }