/* Microinteracciones (unidad B). Sin html.mov (reducido o sin JS): fundidos cortos, sin escala */
/* B-01 · Presión y foco (--t2: la transición que el control ya tenía) */
:where(.boton, .barra-cta, .regalo-numero, .rsvp-eleccion span, .selector-num button, .acordeon summary, .enlace, .sello-boton) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; --t2: color .4s; }
@media (prefers-reduced-motion: no-preference) {
  .boton, .barra-nav .barra-cta, .regalo-numero, .selector-num button, .acordeon summary, .enlace, .sello-boton { transition: scale 420ms var(--lento), outline-offset 200ms var(--suave), var(--t2); }
  .boton { --t2: color 160ms var(--suave) 60ms, border-color 160ms var(--suave) 60ms; }
  .regalo-numero { --t2: background-color .4s; }
  .selector-num button { --t2: opacity 300ms; }
  /* El texto cambia cuando la tinta ya lo cubre o lo destapó */
  .boton.recoge { transition-duration: 420ms, 200ms, 120ms, 120ms; transition-delay: 0s, 0s, calc(var(--rt, 420ms) * .7), calc(var(--rt, 420ms) * .7); }
  .rsvp-eleccion span { transition: scale 420ms var(--lento), border-color .4s, color 150ms var(--suave) 280ms; }
  .rsvp-eleccion :checked + span { transition-duration: 420ms, .4s, 220ms; transition-delay: 0s, 0s, 40ms; }
  :is(.boton, .barra-nav .barra-cta, .regalo-numero, .selector-num button, .acordeon summary, .enlace, .sello-boton, .rsvp-eleccion span):active, .rsvp-eleccion label:active span { scale: .975; transition-duration: 90ms; transition-timing-function: var(--presion); }
}
@media (prefers-reduced-motion: reduce) {
  .boton, .rsvp-eleccion span { transition-duration: 200ms; }
  .acordeon summary::after { transition: none; }
  :is(.boton, .barra-cta, .regalo-numero, .selector-num button:not([aria-disabled="true"]), .acordeon summary, .enlace):active, .rsvp-eleccion label:active span { opacity: .85; }
}
/* B-02 y B-03 · Tinta orgánica (--td: --d ya es el retraso de .aparece) */
.boton, .rsvp-eleccion span { position: relative; overflow: clip; isolation: isolate; }
.boton::before, .rsvp-eleccion span::before {
  --tm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M98 50C98 54 96 57 95 61S95 70 93 73S87 78 84 80S81 88 78 90S70 93 67 94S59 96 56 97S48 99 44 98S37 94 34 93S25 92 22 90S18 84 16 81S9 76 7 73S5 65 4 61S3 54 3 50S2 42 3 38S8 32 9 29S11 20 13 17S20 14 24 12S30 7 33 5S40 3 44 3S52 4 56 4S64 3 67 4S73 10 76 12S84 15 87 18S90 25 91 28S95 35 96 39S98 46 98 50Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: -1; width: var(--td, 240%); aspect-ratio: 1; pointer-events: none;
  background: var(--terracota-honda); -webkit-mask: var(--tm); mask: var(--tm); translate: -50% -50%; opacity: 0; transition: opacity 200ms;
}
.boton-lleno::before { background: var(--tinta); }
.rsvp-eleccion span::before { background: var(--olivo); transition-duration: 150ms; }
.boton.entintado::before, .boton:focus-visible::before, .rsvp-eleccion :checked + span::before { opacity: 1; }
.boton:focus-visible::before { left: 50%; top: 50%; }
.boton.entintado, .boton:focus-visible { color: var(--papel-claro); border-color: var(--terracota-honda); }
.boton-lleno:is(.entintado, :focus-visible) { border-color: var(--tinta); }
html.mov :is(.boton, .rsvp-eleccion span)::before { opacity: 1; scale: 0; transition: scale 650ms var(--lento), opacity 180ms; }
/* Mientras no cubre (bajo el dedo o al recogerse) es aguada: el texto terracota se sigue leyendo */
html.mov .boton:not(.entintado, :focus-visible)::before { opacity: .35; }
html.mov :is(.boton.entintado, .boton:focus-visible, .rsvp-eleccion :checked + span)::before { scale: 1; }
html.mov .boton.presiona::before { scale: .55; transition-duration: 220ms; }
html.mov .boton.recoge:not(:focus-visible)::before { transition: scale var(--rt, 420ms) var(--recoge), opacity var(--rt, 420ms) var(--recoge); }
html.mov .rsvp-eleccion :checked + span::before { transition-duration: 600ms; }
html.mov .rsvp-eleccion :not(:checked) + span::before { transition: scale 420ms var(--recoge); }
/* B-05 · Pluma (2 px: con 1.5 quedaba papel entre la tinta y la línea base) */
:is(.campo, .tarjeta-form) :is(input, textarea, select) { caret-color: var(--terracota); background: linear-gradient(var(--terracota) 0 0) var(--o, 0%) 100% / 0 2px no-repeat, linear-gradient(var(--olivo-claro) 0 0) 0 100% / 0 2px no-repeat; }
:is(.campo, .tarjeta-form) :is(input, textarea, select):focus, :is(.campo, .tarjeta-form) [aria-invalid="true"] { background-size: 100% 2px, 0 2px; }
:is(.campo, .tarjeta-form) .lleno:not(:focus) { background-size: 0 2px, 100% 2px; }
.campo:focus-within > span { color: var(--terracota); }
@media (prefers-reduced-motion: no-preference) {
  :is(.campo, .tarjeta-form) :is(input, textarea, select) { transition: background-size 650ms var(--pluma); }
  :is(.campo, .tarjeta-form) [aria-invalid="true"] { animation: redibuja 650ms var(--pluma); }
  .campo > span { transition: color 400ms var(--suave); }
}
@keyframes redibuja { from { background-size: 0 2px, 0 2px; } }
/* B-08 · Copiar: veladura (terracota suave al 30 %) y palomita */
.regalo-numero > span { position: relative; isolation: isolate; }
.regalo-numero > span::before { content: ""; position: absolute; inset: 10% -4px; z-index: -1; background: #CFA0884D; opacity: 0; transform-origin: 0; transition: opacity 150ms; }
.regalo-numero small { display: grid; }
.regalo-numero small > span { font: inherit; letter-spacing: inherit; grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: opacity 150ms, visibility 150ms; }
.c-copiado, .copiado .c-copiar { opacity: 0; visibility: hidden; }
.copiado > span::before, .copiado .c-copiado { opacity: 1; visibility: visible; }
.palomita { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.copiado .palomita { stroke-dashoffset: 0; }
html.mov .regalo-numero > span::before { scale: 0 1; transition: opacity 400ms, scale 0s 400ms; }
html.mov .copiado > span::before { scale: 1; transition: scale 450ms var(--pluma); }
html.mov .regalo-numero small > span { transition: opacity 350ms, translate 350ms var(--lento), visibility 350ms; }
html.mov .c-copiado { translate: 0 8px; }
html.mov .copiado .c-copiar { translate: 0 -8px; }
html.mov .copiado .c-copiado { translate: 0; }
html.mov .palomita { transition: stroke-dashoffset 0s 350ms; }
html.mov .copiado .palomita { transition: stroke-dashoffset 300ms var(--pluma) 80ms; }
/* Toast de papel claro (olivo 6:1) */
.toast { background: var(--papel-claro); color: var(--olivo); border: 1px solid var(--linea); box-shadow: 0 10px 28px -14px #3F3E3359; transition: opacity 500ms var(--lento), transform 500ms var(--lento); }
@media (prefers-reduced-motion: reduce) { .toast { transform: translate(-50%, 0); transition: opacity 200ms; } }
/* B-09 · Acordeón */
.acordeon { interpolate-size: allow-keywords; }
.acordeon [open] summary { color: var(--terracota); }
@media (prefers-reduced-motion: no-preference) {
  .acordeon details::details-content { block-size: 0; overflow: clip; transition: block-size 520ms var(--lento), content-visibility 520ms allow-discrete; }
  .acordeon [open]::details-content { block-size: auto; }
  .acordeon [open] > p { animation: asoma 520ms var(--lento) 60ms both; }
  .acordeon summary::after { transition: transform 600ms var(--lento); }
}
@keyframes asoma { from { opacity: 0; translate: 0 -6px; } }