/* Mil Sueños Personalizables — banner de cuenta atrás de Navidad + visor de catálogos */

/* ---------- Banner (temporada: borrar el bloque #xmasBar del index.html al acabar la campaña) ---------- */
.xm-bar{ background:linear-gradient(90deg,#17503d,#236b52 50%,#17503d); color:#fff4e0; padding:10px 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 22px; min-height:58px; text-align:center; }
.xm-bar[hidden]{ display:none; }
/* Con el banner activo, la franja rosa de envío se oculta (el envío va dentro del banner) */
html.xm-on .ribbon, main:has(#xmasBar:not([hidden])) .ribbon{ display:none; }
.xm-title{ font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; line-height:1.2; }
.xm-title b{ font-style:normal; font-weight:600; }
.xm-cd{ display:flex; gap:6px; }
.xm-cd div{ background:#fff4e0; color:#8f1f31; border-radius:8px; padding:2px 8px; min-width:48px; line-height:1.15; text-align:center; }
.xm-cd b{ display:block; font-family:'Fraunces',serif; font-weight:600; font-variant-numeric:tabular-nums; font-size:1.05rem; }
.xm-cd span{ font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; }
.xm-sm{ font-size:.84rem; opacity:.94; line-height:1.35; }
.xm-sm a{ color:#f0c566; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.xm-sm strong{ font-weight:600; }

/* Botón con borde giratorio al pasar el ratón (en móvil gira siempre) */
.xm-btn{ position:relative; overflow:hidden; isolation:isolate; border-radius:999px; padding:2px; background:rgba(255,244,224,.3); transition:transform .3s, box-shadow .3s; font-family:'Jost',sans-serif; font-weight:600; font-size:.88rem; cursor:pointer; }
.xm-btn:hover, .xm-btn:focus-visible{ transform:translateY(-2px); box-shadow:0 0 22px rgba(255,236,190,.35); }
.xm-btn::before{ content:""; position:absolute; left:50%; top:50%; width:170%; aspect-ratio:1; transform:translate(-50%,-50%); background:conic-gradient(from 90deg at 50% 50%, transparent 0 70%, #f0c566 100%); opacity:0; transition:opacity .3s; animation:xmSpin 3s linear infinite; }
.xm-btn:hover::before, .xm-btn:focus-visible::before{ opacity:1; }
.xm-in{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px; background:linear-gradient(180deg,#fffaf0,#f6e6c9); color:#8f1f31; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.xm-in svg{ width:15px; height:15px; transition:transform .3s; }
.xm-btn:hover .xm-in svg{ transform:translateX(3px); }
@keyframes xmSpin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (hover:none){ .xm-btn::before{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .xm-btn::before{ animation:none; } .xm-btn{ transition:none; } }

@media (max-width:640px){
  .xm-bar{ padding:10px 12px; gap:6px 12px; }
  .xm-title{ flex:1 0 100%; font-size:1rem; order:1; }
  .xm-cd{ order:2; }
  .xm-bar .xm-btn{ order:3; }
  .xm-sm{ order:4; flex:1 0 100%; font-size:.74rem; }
  .xm-rey{ display:none; }
}

/* ---------- Botones de las portadas de catálogo en "Explora" ---------- */
.cov-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cov-actions .btn{ margin:0; width:auto; }

/* "Ojear catálogo de eventos": mismo borde giratorio que el banner, con los colores de la web (rosa → lila + destello dorado) */
.xm-btn.cat-ojear{ padding:3px; background:rgba(219,90,158,.24); font-size:.95rem; }
.xm-btn.cat-ojear::before{ background:conic-gradient(from 90deg at 50% 50%, transparent 0 52%, #9b8cc4 70%, #db5a9e 86%, #f0c566 100%); }
.xm-btn.cat-ojear:hover, .xm-btn.cat-ojear:focus-visible{ box-shadow:0 8px 26px rgba(219,90,158,.38); }
.xm-btn.cat-ojear .xm-in{ gap:10px; padding:14px 26px; background:linear-gradient(135deg,var(--blush-deep),var(--lilac-deep)); color:#fff; box-shadow:0 6px 18px rgba(219,90,158,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.xm-btn.cat-ojear .xm-in svg{ width:18px; height:18px; }

/* "Descargar PDF": contorno rosa en vez de negro; al pasar el ratón se rellena con el degradado de la web */
.cov-actions .cat-dl.btn-ghost{ background:#fff; border:2px solid var(--blush-deep); color:#b3347f; padding:11px 20px; font-size:.9rem; transition:transform .3s, box-shadow .3s, color .25s, background-color .25s; }
.cov-actions .cat-dl.btn-ghost:hover, .cov-actions .cat-dl.btn-ghost:focus-visible{ background:linear-gradient(135deg,var(--blush-deep),var(--lilac-deep)); background-origin:border-box; border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:0 8px 22px rgba(219,90,158,.32); }
.cov-actions .cat-dl svg{ flex:none; transition:transform .3s; }
.cov-actions .cat-dl:hover svg{ transform:translateY(2px); }

/* ---------- Visor ---------- */
.fbv{ position:fixed; inset:0; z-index:1150; display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 12px max(12px, env(safe-area-inset-bottom)); background:radial-gradient(120% 90% at 50% 0%, #8f1f31, #3d0f1a 70%); color:#fff4e0; overflow:hidden; opacity:0; transition:opacity .25s; }
.fbv[hidden]{ display:none; }
.fbv.show{ opacity:1; }
.fbv[data-v="events"]{ background:radial-gradient(120% 90% at 50% 0%, #5d7a6c, #1f2d27 75%); }
.fbv-top{ width:100%; max-width:1100px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fbv-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1.3rem; }
.fbv-x{ width:42px; height:42px; border-radius:50%; background:rgba(255,244,224,.16); color:#fff4e0; font-size:1.7rem; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .2s; }
.fbv-x:hover{ background:rgba(255,244,224,.3); }
.fbv-stage{ flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.fbv-book{ position:relative; height:min(calc(100dvh - 250px), calc(94vw * 842 / 1190)); aspect-ratio:1190/842; perspective:2400px; display:grid; grid-template-columns:1fr 1fr; filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.fbv-pg{ background-size:cover; background-position:center; background-color:#f3e6cf; cursor:pointer; }
.fbv-pg.empty{ background-color:transparent; background-image:none !important; cursor:default; }
.fbv-pg.l{ border-radius:6px 0 0 6px; }
.fbv-pg.r{ border-radius:0 6px 6px 0; }
.fbv-flip{ position:absolute; top:0; width:50%; height:100%; transform-style:preserve-3d; transition:transform .85s cubic-bezier(.5,.05,.25,1); display:none; pointer-events:none; }
.fbv-flip.go{ display:block; }
.fbv-flip.n{ left:50%; transform-origin:left center; }
.fbv-flip.p{ left:0; transform-origin:right center; }
.fbv-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background-size:cover; background-position:center; background-color:#f3e6cf; }
.fbv-face.back{ transform:rotateY(180deg); }
.fbv-single{ display:none; height:min(calc(100dvh - 190px), calc(94vw * 842 / 595)); aspect-ratio:595/842; background-size:cover; background-position:center; background-color:#f3e6cf; border-radius:8px; filter:drop-shadow(0 12px 20px rgba(0,0,0,.4)); transition:opacity .2s; }
.fbv-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; }
.fbv-b{ background:#fff4e0; color:#6e1424; font-weight:600; font-size:.9rem; padding:9px 18px; border-radius:999px; cursor:pointer; transition:transform .2s, opacity .2s; }
.fbv-b:hover:not(:disabled){ transform:translateY(-2px); }
.fbv-b:disabled{ opacity:.4; cursor:default; }
.fbv-no{ min-width:12ch; text-align:center; font-variant-numeric:tabular-nums; font-size:.92rem; }
.fbv-bar .btn.fbv-wa{ width:auto; padding:10px 20px; font-size:.9rem; }
.fbv-pdf{ color:#fff4e0; font-weight:600; font-size:.88rem; text-decoration:underline; text-underline-offset:4px; padding:8px 4px; }
.fbv-thumbs{ display:flex; gap:6px; overflow-x:auto; max-width:100%; padding:4px 2px 6px; }
.fbv-thumbs button{ flex:0 0 auto; border:2px solid transparent; border-radius:6px; padding:0; background:none; opacity:.7; cursor:pointer; }
.fbv-thumbs button[aria-current="true"]{ border-color:#f0c566; opacity:1; }
.fbv-thumbs img{ height:62px; width:auto; border-radius:4px; }
.fbv :focus-visible{ outline:3px solid #f0c566; outline-offset:2px; }
@media (max-width:720px){
  .fbv-book{ display:none; }
  .fbv-single{ display:block; }
  .fbv-title{ font-size:1.1rem; }
  .fbv-thumbs{ display:none; }
}
@media (max-height:560px){ .fbv-thumbs{ display:none; } .fbv-book{ height:min(calc(100dvh - 180px), calc(94vw * 842 / 1190)); } }
@media (prefers-reduced-motion:reduce){ .fbv, .fbv-flip{ transition:none; } }