/* RÜM Stories · Colecciones: el botón Guardar y su menú (assets/editorial/collect.js).
   Pastilla durazno con un marcador; aparece al pasar el cursor por la pieza, en celular siempre. */
/* .rc-host: la pieza que lleva el botón; collect.js le da position: relative sólo si no tiene posición (las páginas de la revista son absolute) */
.rc-save {
  position: absolute; top: 12px; right: 12px; z-index: 9;
  display: inline-flex; align-items: center; gap: 0; height: 36px; min-width: 36px; padding: 0 10px;
  border: 0; border-radius: 999px; background: #F3D2B2; color: #1C1F26; cursor: pointer;
  font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: 0;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(-4px) scale(.88);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.3), gap .25s;
  -webkit-tap-highlight-color: transparent;
}
.rc-save .rc-ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.rc-save.is-saved .rc-ico { fill: currentColor; }
.rc-save .rc-save-t { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease; }
.rc-host:hover > .rc-save, .ed-icon:hover .rc-save, .ed-me-tour:hover .rc-save, .rc-save:focus-visible, .rc-save.is-saved, .rc-save[aria-expanded="true"] { opacity: 1; transform: none; }
.rc-save:hover, .rc-save:focus-visible, .rc-save[aria-expanded="true"] { gap: 7px; }
.rc-save:hover .rc-save-t, .rc-save:focus-visible .rc-save-t, .rc-save[aria-expanded="true"] .rc-save-t { max-width: 9em; }
.rc-save:focus-visible { outline: 2px solid #F3D2B2; outline-offset: 3px; }
.rc-save.is-saved { background: #1C1F26; color: #F3D2B2; }
.rc-save--img { top: 8px; right: 8px; height: 32px; min-width: 32px; padding: 0 8px; }
.rc-save--left { right: auto; left: 12px; }
/* En la revista: arriba, junto al lomo (las esquinas de afuera son donde la hoja se levanta para pasarla) */
.pg > .rc-save { top: 6px; height: 32px; min-width: 32px; padding: 0 8px; }
/* Algunas maquetas (.lay-a > :not(...) { position: relative }) lo metían al flujo del texto */
.pg.rc-host > .rc-save { position: absolute; }
.pg.is-right > .rc-save { right: auto; left: 18px; }
.pg.is-left > .rc-save { right: 18px; }
@media (hover: none) {
  .rc-save { opacity: .92; transform: none; }
  .rc-save--img { opacity: .85; }
}
/* Guardar es de la membresía: ningún botón se ve hasta que collect.js confirma que la visita la tiene vigente */
html:not(.rc-member) .rc-save { display: none !important; }
@media (prefers-reduced-motion: reduce) { .rc-save, .rc-save .rc-save-t { transition: none; } }

.rc-pop {
  position: fixed; z-index: 2147483000; box-sizing: border-box; padding: 16px 16px 12px;
  border-radius: 16px; background: #F3D2B2; color: #1C1F26;
  font: 400 14px/1.4 Inter, system-ui, sans-serif; text-align: left;
  box-shadow: 0 30px 60px -24px rgba(28, 31, 38, .55), 0 0 0 1px rgba(28, 31, 38, .08);
  animation: rc-pop-in .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes rc-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .rc-pop { animation: none; } }
.rc-pop * { box-sizing: border-box; }
.rc-pop p { margin: 0; }
.rc-pop-k { font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8E5434; margin-bottom: 10px !important; }
.rc-pop-h { font: 800 22px/1.05 Syne, system-ui, sans-serif; letter-spacing: -.01em; margin-bottom: 8px !important; }
.rc-pop-note { color: #6E5B4C; margin-bottom: 12px !important; }
.rc-pop-msg { margin: 0 0 10px !important; padding: 8px 10px; border-radius: 10px; background: #1C1F26; color: #F3D2B2; font-size: 13px; }
.rc-pop-msg a { color: #F3D2B2; }
.rc-pop-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: #1C1F26; color: #F3D2B2; font-weight: 600; text-decoration: none; }
.rc-pop-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 220px; overflow: auto; border-top: 1px solid rgba(28, 31, 38, .14); }
.rc-pop-list li { border-bottom: 1px solid rgba(28, 31, 38, .14); }
.rc-pop-col { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rc-pop-col:disabled { opacity: .5; cursor: progress; }
.rc-pop-check { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #1C1F26; display: grid; place-items: center; }
.rc-pop-col.is-on .rc-pop-check { background: #1C1F26; }
.rc-pop-col.is-on .rc-pop-check::after { content: ""; width: 9px; height: 5px; border: solid #F3D2B2; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.rc-pop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rc-pop-n { flex: none; font-size: 12px; color: #6E5B4C; }
.rc-pop-col:focus-visible { outline: 2px solid #1C1F26; outline-offset: 2px; border-radius: 6px; }
.rc-pop-new { display: flex; gap: 6px; margin-bottom: 10px; }
.rc-pop-new input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1.5px solid rgba(28, 31, 38, .35); border-radius: 10px; background: #FBEBDB; color: #1C1F26; font: inherit; font-size: 16px; }
.rc-pop-new input:focus { outline: none; border-color: #1C1F26; }
.rc-pop-new button { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: #1C1F26; color: #F3D2B2; font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.rc-pop-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.rc-pop-foot a { color: #8E5434; font-weight: 600; }
.rc-pop-foot span { color: #6E5B4C; }