#secQueMiras,#secQueMiras *{box-sizing:border-box}
#secQueMiras{padding:38px 0 48px;color:#56201b;font-family:'Courier New',monospace}
#secQueMiras .qm-promo-wrap{max-width:1120px;margin:auto;padding:0 22px}
#secQueMiras .qm-promo{position:relative;display:grid;grid-template-columns:52% 48%;background:#ffcf70;min-height:510px;isolation:isolate;clip-path:polygon(0 24px,8px 24px,8px 8px,24px 8px,24px 0,calc(100% - 24px) 0,calc(100% - 24px) 8px,calc(100% - 8px) 8px,calc(100% - 8px) 24px,100% 24px,100% calc(100% - 24px),calc(100% - 8px) calc(100% - 24px),calc(100% - 8px) calc(100% - 8px),calc(100% - 24px) calc(100% - 8px),calc(100% - 24px) 100%,24px 100%,24px calc(100% - 8px),8px calc(100% - 8px),8px calc(100% - 24px),0 calc(100% - 24px))}
#secQueMiras .qm-copy{padding:35px 27px 32px 44px;position:relative;z-index:2;background:linear-gradient(0deg,#edb556 0 8px,transparent 8px)}
#secQueMiras .qm-eyebrow{font-size:14px;font-weight:bold;margin:0 0 10px}
#secQueMiras h2{margin:0 0 12px;max-width:370px;line-height:0}
#secQueMiras h2 img{display:block;width:100%;height:auto;image-rendering:pixelated}
#secQueMiras .qm-description{font:700 18px/1.5 'Courier New',monospace;margin:0 0 25px;max-width:390px}
#secQueMiras .qm-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
#secQueMiras .qm-play,#secQueMiras .qm-gift{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;border:2px solid #56201b;box-shadow:4px 4px 0 #56201b;padding:12px 16px;font:700 16px/1.3 'Courier New',monospace;text-decoration:none;cursor:pointer;border-radius:0}
#secQueMiras .qm-play{background:#a83b25;color:#fff9ed}
#secQueMiras .qm-gift{background:#fff0c9;color:#56201b}
#secQueMiras .qm-play:hover{background:#852b1c}
#secQueMiras .qm-gift:hover{background:#fff9ed}
#secQueMiras :focus-visible{outline:3px solid #155c7f;outline-offset:6px}
#secQueMiras .qm-note{font-size:13px;margin:21px 0 0}
#secQueMiras .qm-art{position:relative;overflow:hidden;background:#84c7e7;min-width:0}
#secQueMiras .qm-art::before{content:'';position:absolute;inset:0;background:59% 100%/auto 300% no-repeat;image-rendering:pixelated}

#secQueMiras .qm-kusi{appearance:none;border:0;padding:0;cursor:pointer;position:absolute;bottom:-30px;left:50%;transform:translateX(-45%);width:310px;aspect-ratio:543/724;background:0 0/400% 100% no-repeat;image-rendering:pixelated}
#secQueMiras .qm-route{position:absolute;top:27px;right:24px;border:2px solid #56201b;background:#fff9ed;box-shadow:4px 4px #56201b;padding:11px 13px;font-size:12px;font-weight:bold}
#secQueMiras .qm-spark{position:absolute;width:24px;height:24px;background:#ffcf70;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
#secQueMiras .qm-spark-a{top:140px;left:60px}#secQueMiras .qm-spark-b{top:240px;right:30px;width:16px;height:16px}
@media(max-width:820px){#secQueMiras{padding:0}#secQueMiras .qm-promo-wrap{padding:0}#secQueMiras .qm-promo{grid-template-columns:1fr;clip-path:none}#secQueMiras .qm-copy{padding:30px 25px 32px}#secQueMiras h2{max-width:320px}#secQueMiras .qm-description{font-size:17px;max-width:360px}#secQueMiras .qm-art{height:290px}#secQueMiras .qm-kusi{width:235px;bottom:-43px;left:57%}#secQueMiras .qm-route{top:28px;right:22px;font-size:11px}#secQueMiras .qm-spark-a{top:108px;left:35px}#secQueMiras .qm-spark-b{top:165px;right:28px}#secQueMiras .qm-actions{gap:13px}#secQueMiras .qm-play,#secQueMiras .qm-gift{font-size:15px;padding:12px 14px}}

#secQueMiras .qm-kusi[data-frame="1"]{background-position:33.333333% 0}
#secQueMiras .qm-kusi[data-frame="2"]{background-position:66.666667% 0}
#secQueMiras .qm-kusi[data-frame="3"]{background-position:100% 0}

/* Imágenes cargadas solo cuando la sección se acerca a la pantalla */
#secQueMiras.qm-near .qm-art::before{background-image:url('paisajes.webp?v=1')}
#secQueMiras.qm-near .qm-kusi{background-image:url('kusi-escupe.webp?v=2')}
#secQueMiras{padding-top:0}@media(max-width:820px){#secQueMiras{margin-top:48px}}

/* === Tamaño en la home: web 35% más chica; celular con márgenes como el portapasaporte === */
@media(min-width:821px){
#secQueMiras .qm-promo-wrap{max-width:764px;padding:0 18px}
#secQueMiras .qm-promo{min-height:332px;clip-path:polygon(0 16px,6px 16px,6px 6px,16px 6px,16px 0,calc(100% - 16px) 0,calc(100% - 16px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 16px,100% 16px,100% calc(100% - 16px),calc(100% - 6px) calc(100% - 16px),calc(100% - 6px) calc(100% - 6px),calc(100% - 16px) calc(100% - 6px),calc(100% - 16px) 100%,16px 100%,16px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 16px),0 calc(100% - 16px))}
#secQueMiras .qm-copy{padding:23px 18px 21px 29px;background:linear-gradient(0deg,#edb556 0 6px,transparent 6px)}
#secQueMiras .qm-eyebrow{font-size:11px;margin-bottom:7px}
#secQueMiras h2{max-width:240px;margin-bottom:8px}
#secQueMiras .qm-description{font-size:14px;margin-bottom:16px;max-width:260px}
#secQueMiras .qm-actions{gap:11px}
#secQueMiras .qm-play,#secQueMiras .qm-gift{min-height:38px;padding:8px 11px;gap:8px;font-size:13px;box-shadow:3px 3px 0 #56201b}
#secQueMiras .qm-note{font-size:11px;margin-top:14px}
#secQueMiras .qm-kusi{width:202px;bottom:-20px}
#secQueMiras .qm-route{top:18px;right:16px;padding:7px 9px;font-size:9px;box-shadow:3px 3px #56201b}
#secQueMiras .qm-spark-a{top:91px;left:39px;width:16px;height:16px}
#secQueMiras .qm-spark-b{top:156px;right:20px;width:11px;height:11px}
}
@media(max-width:820px){
#secQueMiras .qm-promo-wrap{max-width:333px;padding:0 14px}
#secQueMiras .qm-promo{clip-path:polygon(0 14px,5px 14px,5px 5px,14px 5px,14px 0,calc(100% - 14px) 0,calc(100% - 14px) 5px,calc(100% - 5px) 5px,calc(100% - 5px) 14px,100% 14px,100% calc(100% - 14px),calc(100% - 5px) calc(100% - 14px),calc(100% - 5px) calc(100% - 5px),calc(100% - 14px) calc(100% - 5px),calc(100% - 14px) 100%,14px 100%,14px calc(100% - 5px),5px calc(100% - 5px),5px calc(100% - 14px),0 calc(100% - 14px))}
#secQueMiras .qm-copy{padding:22px 18px 20px}
#secQueMiras .qm-eyebrow{font-size:11px;margin-bottom:6px}
#secQueMiras h2{max-width:220px;margin-bottom:8px}
#secQueMiras .qm-description{font-size:14px;margin-bottom:16px}
#secQueMiras .qm-actions{gap:10px}
#secQueMiras .qm-play,#secQueMiras .qm-gift{min-height:40px;padding:9px 11px;gap:8px;font-size:13px;box-shadow:3px 3px 0 #56201b}
#secQueMiras .qm-note{font-size:11px;margin-top:14px}
#secQueMiras .qm-art{height:210px}
#secQueMiras .qm-kusi{width:170px;bottom:-31px}
#secQueMiras .qm-route{top:16px;right:14px;padding:6px 8px;font-size:9px;box-shadow:3px 3px #56201b}
#secQueMiras .qm-spark-a{top:78px;left:24px;width:16px;height:16px}
#secQueMiras .qm-spark-b{top:120px;right:20px;width:11px;height:11px}
}
#secQueMiras{padding-bottom:0}
#secQueMiras{margin-top:28px;padding-bottom:56px}@media(max-width:820px){#secQueMiras{margin-top:24px;padding-bottom:40px}}
#secQueMiras{padding-bottom:28px}@media(max-width:820px){#secQueMiras{padding-bottom:24px}}


/* === Ventana "Ver regalo" (v2: compacta y animada) === */
#secQueMiras .qm-dialog{border:4px solid #56201b;background:#ffcf70;color:#56201b;padding:0;width:min(360px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:hidden auto;box-shadow:8px 8px 0 #56201b;margin:auto;text-align:center;font-family:'Courier New',monospace}
#secQueMiras .qm-dialog::backdrop{background:#201b27c4}
#secQueMiras .qm-dialog[open]{animation:qmPop .38s cubic-bezier(.2,1.6,.4,1)}
#secQueMiras .qm-close{position:absolute;right:10px;top:10px;width:36px;height:36px;background:#fff9ed;border:2px solid #56201b;box-shadow:3px 3px 0 #56201b;color:#56201b;font:bold 24px/1 monospace;cursor:pointer;z-index:3;padding:0}
#secQueMiras .qm-close:hover{background:#fff}
#secQueMiras .qm-gift-stage{position:relative;height:250px;overflow:hidden;display:grid;place-items:center;border-bottom:4px solid #56201b;background:#ffb547}
#secQueMiras .qm-gift-stage::before{content:'';position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;background:repeating-conic-gradient(#ffd98a 0 12deg,#ffb547 12deg 24deg);animation:qmSpin 18s linear infinite}
#secQueMiras .qm-gift-card{position:relative;z-index:1;width:178px;background:#fff;border:3px solid #56201b;box-shadow:5px 5px 0 #56201b;padding:6px;transform:rotate(-5deg);animation:qmFloat 2.6s ease-in-out infinite}
#secQueMiras .qm-gift-card img{display:block;width:100%;height:auto}
#secQueMiras .qm-gift-badge{position:absolute;z-index:2;top:26px;left:22px;background:#a83b25;color:#fff9ed;border:3px solid #56201b;box-shadow:3px 3px 0 #56201b;padding:6px 10px;font:bold 15px/1 'Courier New',monospace;letter-spacing:1px;transform:rotate(-10deg)}
#secQueMiras .qm-gift-stage .qm-spark{z-index:2;animation:qmTwinkle 1.4s steps(2) infinite}
#secQueMiras .qm-gift-stage .qm-spark-a{top:40px;left:auto;right:58px;width:20px;height:20px}
#secQueMiras .qm-gift-stage .qm-spark-b{top:auto;bottom:34px;right:auto;left:44px;width:14px;height:14px;animation-delay:.7s}
#secQueMiras .qm-gift-body{padding:20px 22px 24px}
#secQueMiras .qm-gift-body h3{margin:0 0 8px;font:bold 26px/1.1 'Courier New',monospace;letter-spacing:-1px}
#secQueMiras .qm-gift-line{margin:0 0 18px;font:bold 15px/1.4 'Courier New',monospace}
#secQueMiras .qm-gift-body .qm-play{width:100%}
@keyframes qmPop{from{transform:scale(.6) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@keyframes qmSpin{to{transform:rotate(360deg)}}
@keyframes qmFloat{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}
@keyframes qmTwinkle{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#secQueMiras .qm-dialog[open],#secQueMiras .qm-gift-stage::before,#secQueMiras .qm-gift-card,#secQueMiras .qm-gift-stage .qm-spark{animation:none}}
@media(max-width:400px){#secQueMiras .qm-gift-stage{height:220px}#secQueMiras .qm-gift-card{width:155px}}
#secQueMiras .qm-gift-body .qm-play{font-size:16px;min-height:46px}
/* Rojo de la página */
#secQueMiras .qm-play,#secQueMiras .qm-gift-badge{background:var(--accent,#CA2632)}
#secQueMiras .qm-play:hover{background:var(--accent-deep,#9c1c26)}
/* Ruta: solo texto blanco con sombra roja */
#secQueMiras .qm-route{background:none;border:0;box-shadow:none;padding:0;color:#fff9ed;font-size:13px;letter-spacing:1px;text-shadow:2px 2px 0 #CA2632,-1px -1px 0 #CA2632,1px -1px 0 #CA2632,-1px 1px 0 #CA2632,3px 3px 0 #CA2632}
@media(max-width:820px){#secQueMiras .qm-route{font-size:11px;top:14px;right:14px}}
#secQueMiras .qm-route{text-shadow:2px 2px 0 #CA2632}
/* Rayos en pixel art (sprite de 12 cuadros, 104px escalado x6) */
#secQueMiras .qm-gift-stage::before{width:624px;height:624px;margin:-312px 0 0 -312px;background:url('rayos.png?v=3') 0 0/7488px 624px no-repeat;image-rendering:pixelated;animation:qmRays 1.2s steps(12) infinite}
@keyframes qmRays{to{background-position:-7488px 0}}
@media(prefers-reduced-motion:reduce){#secQueMiras .qm-gift-stage::before{animation:none}}
#secQueMiras .qm-gift-stage::before{background-image:url('rayos.png?v=3')}
/* Ventana regalo: esquinas pixeladas como la sección, sin borde ni sombra */
#secQueMiras .qm-dialog{border:0;box-shadow:none;clip-path:polygon(0 16px,6px 16px,6px 6px,16px 6px,16px 0,calc(100% - 16px) 0,calc(100% - 16px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 16px,100% 16px,100% calc(100% - 16px),calc(100% - 6px) calc(100% - 16px),calc(100% - 6px) calc(100% - 6px),calc(100% - 16px) calc(100% - 6px),calc(100% - 16px) 100%,16px 100%,16px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 16px),0 calc(100% - 16px))}
#secQueMiras .qm-gift-stage{border-bottom:6px solid #edb556}
#secQueMiras .qm-close{top:14px;right:14px}
#secQueMiras .qm-gift-card img{aspect-ratio:1;object-fit:contain;background:#fff}
/* Pin con fondo transparente: sin tarjeta blanca, flota sobre los rayos */
#secQueMiras .qm-gift-card{width:168px;background:none;border:0;box-shadow:none;padding:0}
#secQueMiras .qm-gift-card img{aspect-ratio:auto;object-fit:initial;background:none;filter:drop-shadow(4px 4px 0 rgba(86,32,27,.35))}
#secQueMiras .qm-gift-stage{height:260px}
#secQueMiras .qm-gift-badge{top:30px;left:30px;z-index:3}
@media(max-width:400px){#secQueMiras .qm-gift-stage{height:236px}#secQueMiras .qm-gift-card{width:150px}}