/* Casa de Resonancia — estilo "pop" juvenil para landings de papás (papel, stickers, colores vivos) */
.cr-pop {
  --pop-papel: #F4EFE6; --pop-tinta: #111111; --pop-ambar: #E3A04A; --pop-azul: #3A5BFF;
  --pop-rosa: #FF5C8A; --pop-lima: #C8F03C; --pop-celeste: #7FD3FF; --pop-borde: 3px solid var(--pop-tinta);
  --pop-sombra: 6px 6px 0 var(--pop-tinta);
  background: var(--pop-fondo, var(--pop-papel)); color: var(--pop-tinta); position: relative; overflow: hidden;
  font-family: var(--cr-texto);
}
.cr-pop--oscuro { --pop-fondo: #111111; color: var(--pop-papel); }
.cr-pop::before { /* trama de puntos tipo fanzine */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(17,17,17,.12) 1.2px, transparent 1.3px); background-size: 18px 18px;
}
.cr-pop--oscuro::before { background-image: radial-gradient(rgba(244,239,230,.08) 1.2px, transparent 1.3px); }
.cr-pop .cr-container { position: relative; z-index: 1; }

/* Tipografía */
.cr-pop__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--pop-tinta); color: var(--pop-papel); font-family: var(--cr-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; padding: 8px 14px; border-radius: 999px; margin: 0 0 18px; transform: rotate(-2deg); }
.cr-pop--oscuro .cr-pop__eyebrow { background: var(--pop-lima); color: var(--pop-tinta); }
.cr-pop__h { font-family: var(--cr-display); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .92; letter-spacing: -0.02em; margin: 0 0 18px; font-size: clamp(34px, 6vw, var(--pop-h, 76px)); color: inherit; }
.cr-pop__h mark { background: none; color: inherit; position: relative; padding: 0 .08em; z-index: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cr-pop__h mark::before { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .04em; height: .42em; background: var(--pop-mark, var(--pop-lima)); z-index: -1; transform: skew(-8deg) rotate(-1.5deg); border-radius: 4px; }
.cr-pop--oscuro .cr-pop__h mark { color: var(--pop-lima); }
.cr-pop--oscuro .cr-pop__h mark::before { height: .12em; bottom: -.04em; background: var(--pop-rosa); }
.cr-pop__p { font-size: var(--pop-p, 17px); line-height: 1.6; margin: 0 0 22px; max-width: 58ch; opacity: .9; }
.cr-pop__center { text-align: center; }
.cr-pop__center .cr-pop__p { margin-left: auto; margin-right: auto; }

/* Botones */
.cr-pop__btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cr-pop__center .cr-pop__btns { justify-content: center; }
.cr-pop__btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 26px; border: var(--pop-borde); border-radius: 16px; background: var(--pop-ambar); color: var(--pop-tinta); font-family: var(--cr-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; text-decoration: none; box-shadow: var(--pop-sombra); transition: transform .25s var(--cr-ease), box-shadow .25s var(--cr-ease); }
.cr-pop__btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--pop-tinta); }
.cr-pop__btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--pop-tinta); }
.cr-pop__btn svg { width: 20px; height: 20px; flex: none; }
.cr-pop__btn--wsp { background: #25D366; }
.cr-pop__btn--claro { background: var(--pop-papel); }
.cr-pop--oscuro .cr-pop__btn { border-color: var(--pop-papel); box-shadow: 6px 6px 0 var(--pop-papel); }
.cr-pop__link { font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Stickers */
.cr-pop__sticker { position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--cr-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 13px; line-height: 1.05; padding: 10px 14px; border: var(--pop-borde); border-radius: 14px; background: var(--pop-lima); color: var(--pop-tinta); box-shadow: 4px 4px 0 var(--pop-tinta); transform: rotate(var(--rot, -6deg)); max-width: 170px; }
.cr-pop__sticker--redondo { width: 116px; height: 116px; border-radius: 50%; padding: 12px; font-size: 14px; }
.cr-pop__sticker--rosa { background: var(--pop-rosa); }
.cr-pop__sticker--azul { background: var(--pop-azul); color: #fff; }
.cr-pop__sticker--ambar { background: var(--pop-ambar); }
.cr-pop__sticker--celeste { background: var(--pop-celeste); }
.cr-pop__sticker--papel { background: var(--pop-papel); }
@media (prefers-reduced-motion: no-preference) {
  .cr-pop__sticker { animation: cr-pop-flota 5s ease-in-out infinite; }
  .cr-pop__sticker:nth-of-type(2n) { animation-delay: -2.5s; }
}
@keyframes cr-pop-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Garabatos SVG */
.cr-pop__doodle { position: absolute; z-index: 2; pointer-events: none; color: var(--pop-tinta); }
.cr-pop--oscuro .cr-pop__doodle { color: var(--pop-papel); }

/* ===== HERO ===== */
.cr-pop-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cr-pop-hero__chips { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cr-pop-hero__chips li { display: inline-flex; align-items: center; gap: 8px; border: 2px solid currentColor; border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.55); }
.cr-pop-hero__chips li::before { content: "✓"; font-weight: 900; color: var(--pop-tinta); background: var(--pop-lima); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; }
.cr-pop-hero__collage { position: relative; min-height: 600px; }
.cr-pop-foto { position: absolute; margin: 0; background: #fff; padding: 10px 10px 14px; border: var(--pop-borde); box-shadow: var(--pop-sombra); transform: rotate(var(--rot, 0deg)); }
.cr-pop-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-pop-foto figcaption { font-family: var(--cr-display); font-style: italic; font-weight: 800; font-size: 14px; text-align: center; padding-top: 8px; color: var(--pop-tinta); }
.cr-pop-foto::after { /* cinta adhesiva */ content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; margin-left: -46px; background: rgba(227,160,74,.75); transform: rotate(-4deg); }
.cr-pop-hero__f1 { left: 14%; top: 0; width: 62%; aspect-ratio: 2 / 3; --rot: 3deg; z-index: 2; }
.cr-pop-hero__f2 { left: 0; bottom: 4%; width: 40%; aspect-ratio: 3 / 4; --rot: -7deg; z-index: 3; }
.cr-pop-hero__f3 { right: 0; bottom: 0; width: 40%; aspect-ratio: 3 / 4; --rot: 6deg; z-index: 3; }
.cr-pop-hero__collage .cr-pop__sticker--s1 { right: 2%; top: 6%; --rot: 8deg; }
.cr-pop-hero__collage .cr-pop__sticker--s2 { left: -2%; top: 34%; --rot: -10deg; }
.cr-pop-hero__collage .cr-pop__sticker--s3 { left: 40%; bottom: -3%; --rot: -4deg; }
.cr-pop-hero__burbuja { position: relative; display: inline-block; background: #fff; border: var(--pop-borde); border-radius: 18px; padding: 10px 16px; font-weight: 700; font-size: 15px; margin: 0 0 16px; box-shadow: 4px 4px 0 var(--pop-tinta); }
.cr-pop-hero__burbuja::after { content: ""; position: absolute; left: 26px; bottom: -12px; width: 18px; height: 18px; background: #fff; border-right: var(--pop-borde); border-bottom: var(--pop-borde); transform: rotate(45deg); }

/* ===== TARJETAS ===== */
.cr-pop-cards__head { margin-bottom: 40px; }
.cr-pop-cards__grid { display: grid; grid-template-columns: repeat(var(--pop-cols, 3), minmax(0, 1fr)); gap: 28px; }
.cr-pop-card { position: relative; background: #fff; color: var(--pop-tinta); border: var(--pop-borde); border-radius: 22px; box-shadow: var(--pop-sombra); padding: 22px; display: flex; flex-direction: column; transition: transform .3s var(--cr-ease); }
.cr-pop-card:nth-child(odd) { transform: rotate(-.8deg); }
.cr-pop-card:nth-child(even) { transform: rotate(.8deg); }
.cr-pop-card:hover { transform: rotate(0) translateY(-4px); }
.cr-pop-card__top { background: var(--pop-acento, var(--pop-lima)); margin: -22px -22px 18px; border-radius: 19px 19px 0 0; border-bottom: var(--pop-borde); overflow: hidden; position: relative; }
.cr-pop-card__top { aspect-ratio: 16 / 10; }
.cr-pop-card__top img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 35%; }
.cr-pop-card__icono { margin: -22px -22px 18px; padding: 22px; background: var(--pop-acento, var(--pop-lima)); border-radius: 19px 19px 0 0; border-bottom: var(--pop-borde); }
.cr-pop-card__icono span { width: 58px; height: 58px; border-radius: 16px; background: #fff; border: var(--pop-borde); display: grid; place-items: center; }
.cr-pop-card__icono svg { width: 28px; height: 28px; }
.cr-pop-card .cr-pop__sticker { top: 14px; right: 14px; --rot: 5deg; font-size: 12px; }
.cr-pop-card__t, .cr-pop-glos__palabra { color: var(--pop-tinta) !important; }
.cr-pop-card__t { font-family: var(--cr-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 24px; line-height: 1; margin: 0 0 10px; }
.cr-pop-card__p { font-size: 15px; line-height: 1.55; margin: 0 0 14px; opacity: .85; }
.cr-pop-card__lista { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.cr-pop-card__lista li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.cr-pop-card__lista li::before { content: "→"; font-weight: 900; color: var(--pop-tinta); flex: none; }
.cr-pop-card__precio { font-family: var(--cr-display); font-weight: 900; font-style: italic; font-size: 18px; margin: auto 0 14px; }
.cr-pop-card__precio small { display: block; font-family: var(--cr-texto); font-style: normal; font-weight: 500; font-size: 12px; opacity: .7; }
.cr-pop-card .cr-pop__btn { align-self: flex-start; font-size: 13px; padding: 14px 18px; box-shadow: 4px 4px 0 var(--pop-tinta); }
.cr-pop-card__accion { margin-top: auto; }

/* ===== GLOSARIO ===== */
.cr-pop-glos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cr-pop-glos__item { border: var(--pop-borde); border-radius: 20px; background: var(--pop-papel); color: var(--pop-tinta); overflow: hidden; box-shadow: var(--pop-sombra); }
.cr-pop-glos__term { background: var(--pop-acento, var(--pop-lima)); border-bottom: var(--pop-borde); padding: 16px 18px; }
.cr-pop-glos__dice { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin: 0 0 4px; }
.cr-pop-glos__palabra { font-family: var(--cr-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 26px; line-height: 1; margin: 0; }
.cr-pop-glos__trad { padding: 16px 18px 20px; }
.cr-pop-glos__trad .cr-pop-glos__dice { color: var(--pop-tinta); }
.cr-pop-glos__trad p { margin: 0; font-size: 15px; line-height: 1.55; }
.cr-pop-glos__pie { margin-top: 40px; }

/* ===== CTA ===== */
.cr-pop-cta__caja { position: relative; background: var(--pop-caja, var(--pop-ambar)); color: var(--pop-tinta); border: var(--pop-borde); border-radius: 32px; box-shadow: 10px 10px 0 var(--pop-tinta); padding: clamp(36px, 6vw, 72px) clamp(22px, 5vw, 64px); text-align: center; }
.cr-pop--oscuro .cr-pop-cta__caja { box-shadow: 10px 10px 0 var(--pop-papel); border-color: var(--pop-papel); }
.cr-pop-cta__caja .cr-pop__p { margin-left: auto; margin-right: auto; opacity: 1; }
.cr-pop-cta__caja .cr-pop__btns { justify-content: center; }
.cr-pop-cta__caja .cr-pop__sticker { top: -26px; right: 6%; --rot: 9deg; }
.cr-pop-cta__nota { font-size: 13px; margin: 18px 0 0; opacity: .8; }

/* ===== Responsive ===== */
@media (max-width: 989px) {
  .cr-pop-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .cr-pop-hero__collage { min-height: 0; aspect-ratio: 1 / 1.05; max-width: 540px; width: 100%; margin: 0 auto; }
  .cr-pop-cards__grid { grid-template-columns: repeat(min(var(--pop-cols, 3), 2), minmax(0, 1fr)); }
  .cr-pop-glos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cr-pop-cards__grid, .cr-pop-glos__grid { grid-template-columns: 1fr; }
  .cr-pop__btns { flex-direction: column; align-items: stretch; }
  .cr-pop__btn { justify-content: center; }
  .cr-pop__sticker--redondo { width: 92px; height: 92px; font-size: 11px; }
  .cr-pop__sticker { font-size: 11px; }
  .cr-pop-hero__collage .cr-pop__sticker--s2 { left: 0; }
  .cr-pop__doodle { display: none; }
  .cr-pop-foto { padding: 6px 6px 8px; }
  .cr-pop-foto figcaption { font-size: 11px; padding-top: 5px; }
  .cr-pop-foto::after { width: 60px; height: 20px; margin-left: -30px; top: -10px; }
  .cr-pop-card:nth-child(n) { transform: none; }
}