/* Colección Editorial · base compartida.
   El motor (assets/scrollcraft/scrollcraft.css) pone el piso; aquí se le dan los tokens de la invitación
   y las piezas que todos los diseños comparten: botones, formulario, flotantes y el portón. */

:root {
	--sc-canvas: var(--papel);
	--sc-surface: var(--fondo);
	--sc-ink: var(--tinta);
	--sc-ink-soft: color-mix(in oklab, var(--tinta) 68%, var(--papel));
	--sc-accent: var(--acento);
	--sc-accent-ink: var(--papel);
	--sc-font-display: var(--titulos);
	--sc-font-text: var(--texto);
	--tinta-suave: var(--sc-ink-soft);
	--linea: color-mix(in oklab, var(--tinta) 14%, transparent);
	--linea-fuerte: color-mix(in oklab, var(--tinta) 30%, transparent);
	--margen: clamp(1.25rem, 5vw, 5rem);
	--radio: 2px;
	--curva: cubic-bezier(0.23, 1, 0.32, 1);
	--curva-io: cubic-bezier(0.77, 0, 0.175, 1);
}

html { -webkit-text-size-adjust: 100%; }
html.cerrado, html.cerrado body { overflow: hidden; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--acento); color: var(--papel); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones: presión con escala, hover solo con puntero fino, transiciones de propiedades concretas. */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .85em 1.6em; border: 1px solid var(--tinta); border-radius: var(--radio); background: var(--tinta); color: var(--papel); font: 500 .84rem/1 var(--texto); letter-spacing: .08em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms var(--curva), color 160ms var(--curva), border-color 160ms var(--curva), transform 140ms var(--curva); }
.boton:active { transform: scale(.97); }
.boton-suave { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
.boton-luz { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.boton-chico { min-height: 44px; padding: .65em 1.1em; font-size: .78rem; }
.boton-grande { min-height: 56px; width: 100%; font-size: .9rem; }
.boton:disabled { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
	.boton:hover { background: var(--acento); border-color: var(--acento); color: var(--papel); }
	.boton-suave:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
	.boton-luz:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
}
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Formulario de confirmación: etiquetas arriba, sin cajas, con foco visible. */
.formulario { display: grid; gap: 1.5rem; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; border: 0; margin: 0; padding: 0; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: .8rem 1rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); text-align: center; font-weight: 500; transition: background-color 160ms var(--curva), color 160ms var(--curva), border-color 160ms var(--curva), transform 140ms var(--curva); }
.opcion input:active + span { transform: scale(.98); }
.opcion input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }
.si-asiste { display: grid; gap: 1.5rem; }
.campo { display: grid; gap: .45rem; }
.campo span { font-size: .82rem; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: .7rem 0; border: 0; border-bottom: 1px solid var(--linea-fuerte); border-radius: 0; background: transparent; color: var(--tinta); font: inherit; caret-color: var(--acento); }
.campo select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--tinta) 50%) calc(100% - 12px) 50% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--tinta) 50%) calc(100% - 6px) 50% / 6px 6px no-repeat; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--acento); }
.error { color: var(--acento); font-weight: 500; }
.respuesta { display: grid; justify-items: start; gap: 1rem; }
.respuesta-marca { font: 400 clamp(4rem, 3rem + 6vw, 8rem)/.9 var(--titulos); color: var(--acento); }
.respuesta-texto { font: 400 var(--sc-t-xl)/1.2 var(--titulos); max-width: 22ch; }

/* Portón: la invitación cerrada. Cada diseño le da su composición; aquí solo lo común. */
.porton { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(1.5rem, 6vw, 4rem); background: var(--papel); overflow: auto; }
.porton-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* Flotantes */
.flotante, .pildora { position: fixed; z-index: 60; }
.musica-boton { left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--linea-fuerte); border-radius: 50%; padding: 0; background: color-mix(in oklab, var(--papel) 92%, transparent); color: var(--tinta); cursor: pointer; transition: transform 140ms var(--curva); }
.musica-boton:active { transform: scale(.94); }
.musica-boton svg { width: 22px; height: 22px; }
.pildora { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; min-height: 48px; padding: .8em 1.4em; border-radius: var(--radio); background: var(--acento); color: var(--papel); font: 500 .84rem/1 var(--texto); letter-spacing: .04em; text-decoration: none; box-shadow: 0 14px 28px -12px color-mix(in oklab, var(--acento) 60%, transparent); transform: translate3d(0, 180%, 0); transition: transform 420ms var(--curva); }
.pildora.ver { transform: none; }
.pildora:active { transform: scale(.97); }
.aviso { position: fixed; z-index: 70; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom)); translate: -50% 0; max-width: calc(100vw - 2rem); padding: .8rem 1.2rem; background: var(--tinta); color: var(--papel); font-size: .92rem; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 200ms var(--curva), transform 200ms var(--curva); pointer-events: none; }
.aviso.ver { opacity: 1; transform: none; }
.quiero-asi { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: #7A2E8E; color: #fff; font: 600 15px/1 system-ui, sans-serif; text-decoration: none; box-shadow: 0 10px 28px -10px rgb(0 0 0 / .45); }
.quiero-asi[hidden] { display: none; }
body:has(.quiero-asi:not([hidden])) .musica-boton { bottom: calc(76px + env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
	.opciones { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.boton, .opcion span, .pildora, .aviso { transition: opacity 160ms linear; }
}