/* Ajustes del sitio sobre style.css de la propuesta visual */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* El footer tapa el contenido que sube desde abajo: así parece que las preguntas salen de detrás */
.brand-footer{z-index:3}
.content{z-index:1}
.cap,.option{will-change:transform}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);max-width:340px;padding:12px 16px;border-radius:10px;background:#0C2340;color:#fff;font-size:15px;line-height:1.3;text-align:center;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25)}
/* Formulario: con errores o con el teclado abierto el contenido crece; se desplaza en vez de quedar debajo del footer */
.phone:has(form) .content{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:32px}
.phone:has(form) .content::-webkit-scrollbar{display:none}
.error-text{color:#B3261E}

/* ---------- Escritorio y tablet (≥ 700 px): tarjeta móvil centrada sobre un escenario ---------- */
.stage{display:none}
.frame{position:relative;z-index:2}
@media (min-width:700px){
  .app-page{overflow:hidden}
  .stage{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--sand)}
  .stage>*{position:absolute}
  .stage-beach{inset:0;background:url(assets/beach.png) center 60%/cover;opacity:0;visibility:hidden}
  .stage[data-mode=beach] .stage-beach,.stage[data-mode=thanks] .stage-beach{opacity:1;visibility:visible}
  /* Brochazo amarillo diagonal que cruza todo el fondo */
  .stage-brush{left:-8vw;right:-8vw;top:50%;height:clamp(120px,22vh,220px);background:url(assets/title-brush.svg) center/100% 100% no-repeat;transform:rotate(-8deg);transform-origin:center}
  .stage[data-mode=loader] .stage-brush{visibility:hidden}
  /* Franja azul inferior con borde de brochazo arriba (solo en preguntas) */
  .stage-band{left:0;right:0;bottom:0;height:18vh;visibility:hidden}
  .stage-band:before{content:'';position:absolute;inset:0;background:url(assets/header-brush.svg) center/100% 100% no-repeat;transform:rotate(180deg)}
  .stage[data-mode=sand] .stage-band{visibility:visible}
  .stage-panel{display:none}
  .frame{width:calc(390px * var(--card-scale,1));height:calc(844px * var(--card-scale,1))}
  #app{width:390px;height:844px;transform:scale(var(--card-scale,1));transform-origin:top left}
  .app-page .phone{width:390px;height:844px;max-height:none;min-height:0;box-shadow:0 30px 80px rgba(12,35,64,.35)}
}
/* Mensaje lateral: solo cuando hay espacio a la izquierda de la tarjeta */
@media (min-width:1100px){
  .stage-panel{display:block;left:clamp(32px,5vw,96px);top:14vh;width:clamp(260px,22vw,360px);padding:28px 30px 30px;background:var(--navy);color:#fff}
  .stage[data-mode=loader] .stage-panel{visibility:hidden}
  .stage-title{margin:0 0 14px;font-family:'Corona Headline';font-weight:600;font-size:clamp(40px,3.4vw,60px);line-height:.95;text-transform:uppercase}
  .stage-copy{margin:0;font-size:20px;line-height:1.25}
}
/* Móvil: la tarjeta ocupa toda la pantalla (el contenedor .frame no debe encogerla) */
@media (max-width:699px){.frame,#app{width:100%}.app-page{display:block}}
/* El título recibe foco al cambiar de pantalla (lectores de pantalla); no necesita recuadro visible */
h2[tabindex="-1"]:focus{outline:none}